[{"data":1,"prerenderedAt":204},["ShallowReactive",2],{"$fcByllwjrwJt5HGLrGxft_mr3cAwq67b9i05Gv_N6LDk":3},{"newThing":4,"project":5,"cycle":8,"sections":21,"threads":188,"otherDocs":189,"images":190,"archiveItems":202,"links":203},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":4,"status":14,"statusNote":4,"created":15,"completed":4,"mode":4,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":16,"hasInitialPrompt":16},"c1",1,"c1.shared-component-library","shared-component-library","Shared Component Library & Nuxt Layer","archived","February 2026",false,"\u002Fcycles\u002Fdesign\u002Fc1-ux-button.png",3,0,"2026-09-11",[22,47,57,178],{"key":23,"title":24,"empty":16,"ast":25},"why","Why",{"type":26,"children":27},"root",[28],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33,36,45],{"type":34,"value":35},"text","Sister projects (",{"type":29,"tag":37,"props":38,"children":42},"a",{"href":39,"rel":40},"http:\u002F\u002Fwww.qpoint.io",[41],"nofollow",[43],{"type":34,"value":44},"www.qpoint.io",{"type":34,"value":46},", app.qpoint.io) duplicated components, tokens, and CSS. Changes had to be made in multiple places. The styleguide project had the canonical versions but no mechanism to share them.",{"key":48,"title":49,"empty":16,"ast":50},"objective","Objective",{"type":26,"children":51},[52],{"type":29,"tag":30,"props":53,"children":54},{},[55],{"type":34,"value":56},"Transform the styleguide project into a Nuxt Layer that sister projects can extend to inherit shared components, design tokens, and CSS.",{"key":58,"title":59,"empty":16,"ast":60},"key-changes","What Was Done",{"type":26,"children":61},[62],{"type":29,"tag":63,"props":64,"children":65},"ul",{},[66,81,92,111,124,137,148,159],{"type":29,"tag":67,"props":68,"children":69},"li",{},[70,72,79],{"type":34,"value":71},"Canonicalized ",{"type":29,"tag":73,"props":74,"children":76},"code",{"className":75},[],[77],{"type":34,"value":78},"tailwind.config.js",{"type":34,"value":80}," as single source of truth for design tokens (fixed border-radius bug, production line-heights, 28 font sizes)",{"type":29,"tag":67,"props":82,"children":83},{},[84,86],{"type":34,"value":85},"Consolidated shared CSS into ",{"type":29,"tag":73,"props":87,"children":89},{"className":88},[],[90],{"type":34,"value":91},"assets\u002Fcss\u002Fshared.css",{"type":29,"tag":67,"props":93,"children":94},{},[95,97,103,105],{"type":34,"value":96},"Configured Nuxt Layer with ",{"type":29,"tag":73,"props":98,"children":100},{"className":99},[],[101],{"type":34,"value":102},"@@\u002F",{"type":34,"value":104}," aliases, auto-import dirs, ",{"type":29,"tag":73,"props":106,"children":108},{"className":107},[],[109],{"type":34,"value":110},"cssPath: false",{"type":29,"tag":67,"props":112,"children":113},{},[114,116,122],{"type":34,"value":115},"Extracted 10 shared components into ",{"type":29,"tag":73,"props":117,"children":119},{"className":118},[],[120],{"type":34,"value":121},"components\u002Fux\u002F",{"type":34,"value":123}," (Button, Input, Modal, Toggle, Tag, CopyBtn, Close, Checkbox, Message, Icon)",{"type":29,"tag":67,"props":125,"children":126},{},[127,129,135],{"type":34,"value":128},"Created 4 icon stubs in ",{"type":29,"tag":73,"props":130,"children":132},{"className":131},[],[133],{"type":34,"value":134},"components\u002Ficon\u002F",{"type":34,"value":136}," (X, Spinner, Check, Copy)",{"type":29,"tag":67,"props":138,"children":139},{},[140,142],{"type":34,"value":141},"Extracted ",{"type":29,"tag":73,"props":143,"children":145},{"className":144},[],[146],{"type":34,"value":147},"composables\u002FuseClipboard.ts",{"type":29,"tag":67,"props":149,"children":150},{},[151,153],{"type":34,"value":152},"Built component showcase page at ",{"type":29,"tag":73,"props":154,"children":156},{"className":155},[],[157],{"type":34,"value":158},"\u002Fcomponents",{"type":29,"tag":67,"props":160,"children":161},{},[162,164,170,172],{"type":34,"value":163},"Wrote ",{"type":29,"tag":73,"props":165,"children":167},{"className":166},[],[168],{"type":34,"value":169},"brand\u002Fcomponent_philosophy.md",{"type":34,"value":171}," and ",{"type":29,"tag":73,"props":173,"children":175},{"className":174},[],[176],{"type":34,"value":177},"brand\u002Fdesign_tokens.md",{"key":179,"title":180,"empty":16,"ast":181},"outcome","Outcome",{"type":26,"children":182},[183],{"type":29,"tag":30,"props":184,"children":185},{},[186],{"type":34,"value":187},"Styleguide is a functional Nuxt Layer. Sister projects extend with one config line. Components auto-import with existing names — zero template changes needed in consumers.",[],[],[191,194,198],{"src":17,"kind":192,"order":193},"hero",4999,{"src":195,"kind":196,"order":197},"\u002Fcycles\u002Fdesign\u002Fc1-ux-button-2.png","slice",2,{"src":199,"kind":200,"order":201},"\u002Fcycles\u002Fdesign\u002Fc1-ux-button-full.png","full",9000,[],[],1789151091908]