[{"data":1,"prerenderedAt":629},["ShallowReactive",2],{"$f1Gsn7MZSRr9H_DVJkgUH0GJIvSVt-NxgeNUIp9bdYok":3},{"newThing":4,"project":5,"cycle":8,"sections":21,"threads":623,"otherDocs":624,"images":626,"archiveItems":627,"links":628},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":14,"status":15,"statusNote":4,"created":16,"completed":4,"mode":4,"recordless":17,"thumbnail":4,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":17,"hasInitialPrompt":17},"c23",23,"c23.unified-component-pantry","unified-component-pantry","Unified Component Pantry","Formalize the layer as a single shared pantry for all Qpoint projects and upgrade app's local DevCanvas","archived","2026-03-13",false,0,1,"2026-09-11",[22,58,96,359,401,411,444,477,599],{"key":23,"title":24,"empty":17,"ast":25},"why","Why",{"type":26,"children":27},"root",[28,36],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","The q-nuxt-layer already contains domain-specific components (security\u002F, alert\u002F, data-metric\u002F) alongside generic primitives. The instinct to \"keep it pure\" doesn't hold up: Nuxt tree-shakes aggressively, so unused components cost nothing at runtime. The real value is a common pantry — stock ingredients and tools once, any current or future project can use them without an extraction cycle.",{"type":29,"tag":30,"props":37,"children":38},{},[39,41,48,50,56],{"type":34,"value":40},"app.qpoint.io's local DevCanvas system (",{"type":29,"tag":42,"props":43,"children":45},"code",{"className":44},[],[46],{"type":34,"value":47},"\u002Fpages\u002Fdev\u002Fcomponents\u002F",{"type":34,"value":49},", ",{"type":29,"tag":42,"props":51,"children":53},{"className":52},[],[54],{"type":34,"value":55},"\u002Fpages\u002Flib\u002F",{"type":34,"value":57},") is an older fork that should consume the layer's DevCanvas directly.",{"key":59,"title":60,"empty":17,"ast":61},"objective","Objective",{"type":26,"children":62},[63,78,87],{"type":29,"tag":64,"props":65,"children":66},"ol",{},[67,73],{"type":29,"tag":68,"props":69,"children":70},"li",{},[71],{"type":34,"value":72},"Codify the \"unified pantry\" architecture decision — all visual components live in the layer regardless of how many projects currently use them",{"type":29,"tag":68,"props":74,"children":75},{},[76],{"type":34,"value":77},"analyze qpp.qpoint.io's \u002Fdev and \u002Flib examples.",{"type":29,"tag":79,"props":80,"children":81},"ul",{},[82],{"type":29,"tag":68,"props":83,"children":84},{},[85],{"type":34,"value":86},"if there are examples of component usage that now exists in q-layer, note it as potential for moving to our component documentation page",{"type":29,"tag":64,"props":88,"children":90},{"start":89},3,[91],{"type":29,"tag":68,"props":92,"children":93},{},[94],{"type":34,"value":95},"Upgrade app.qpoint.io's DevCanvas to use the layer's versions (delete local forks)",{"key":97,"title":98,"empty":17,"ast":99},"scope","Scope",{"type":26,"children":100},[101,108,134,140,161,170,270,278,324,334],{"type":29,"tag":102,"props":103,"children":105},"h3",{"id":104},"_1-codify-the-architecture-decision",[106],{"type":34,"value":107},"1. Codify the architecture decision",{"type":29,"tag":79,"props":109,"children":110},{},[111,124,129],{"type":29,"tag":68,"props":112,"children":113},{},[114,116,122],{"type":34,"value":115},"Update ",{"type":29,"tag":42,"props":117,"children":119},{"className":118},[],[120],{"type":34,"value":121},"brand\u002Fcomponent_philosophy.md",{"type":34,"value":123}," — revise the boundary guidance to reflect the pantry model",{"type":29,"tag":68,"props":125,"children":126},{},[127],{"type":34,"value":128},"Update CLAUDE.md in both layer and design projects",{"type":29,"tag":68,"props":130,"children":131},{},[132],{"type":34,"value":133},"The boundary test becomes: \"Is this a visual\u002Fpresentational component?\" → layer. \"Is this business logic wired to app state\u002FAPIs?\" → stays local in the consuming project.",{"type":29,"tag":102,"props":135,"children":137},{"id":136},"_2-upgrade-apps-devcanvas",[138],{"type":34,"value":139},"2. Upgrade app's DevCanvas",{"type":29,"tag":30,"props":141,"children":142},{},[143,145,151,153,159],{"type":34,"value":144},"App registers ",{"type":29,"tag":42,"props":146,"children":148},{"className":147},[],[149],{"type":34,"value":150},"~\u002Fpages\u002Fdev\u002Fcomponents",{"type":34,"value":152}," with ",{"type":29,"tag":42,"props":154,"children":156},{"className":155},[],[157],{"type":34,"value":158},"prefix: 'dev'",{"type":34,"value":160}," in nuxt.config.ts (line 73). Local forks override the layer's versions via Nuxt's component priority. Deleting the forks lets the layer versions take over automatically.",{"type":29,"tag":30,"props":162,"children":163},{},[164],{"type":29,"tag":165,"props":166,"children":167},"strong",{},[168],{"type":34,"value":169},"Delete 6 files (duplicates of layer):",{"type":29,"tag":79,"props":171,"children":172},{},[173,190,206,222,238,254],{"type":29,"tag":68,"props":174,"children":175},{},[176,182,184],{"type":29,"tag":42,"props":177,"children":179},{"className":178},[],[180],{"type":34,"value":181},"app.qpoint.io\u002Fapp\u002Fpages\u002Fdev\u002Fcomponents\u002FCanvas.vue",{"type":34,"value":183}," → layer's ",{"type":29,"tag":42,"props":185,"children":187},{"className":186},[],[188],{"type":34,"value":189},"DevCanvas",{"type":29,"tag":68,"props":191,"children":192},{},[193,199,200],{"type":29,"tag":42,"props":194,"children":196},{"className":195},[],[197],{"type":34,"value":198},"app.qpoint.io\u002Fapp\u002Fpages\u002Fdev\u002Fcomponents\u002FComment.vue",{"type":34,"value":183},{"type":29,"tag":42,"props":201,"children":203},{"className":202},[],[204],{"type":34,"value":205},"DevComment",{"type":29,"tag":68,"props":207,"children":208},{},[209,215,216],{"type":29,"tag":42,"props":210,"children":212},{"className":211},[],[213],{"type":34,"value":214},"app.qpoint.io\u002Fapp\u002Fpages\u002Fdev\u002Fcomponents\u002FFrame.vue",{"type":34,"value":183},{"type":29,"tag":42,"props":217,"children":219},{"className":218},[],[220],{"type":34,"value":221},"DevFrame",{"type":29,"tag":68,"props":223,"children":224},{},[225,231,232],{"type":29,"tag":42,"props":226,"children":228},{"className":227},[],[229],{"type":34,"value":230},"app.qpoint.io\u002Fapp\u002Fpages\u002Fdev\u002Fcomponents\u002FH.vue",{"type":34,"value":183},{"type":29,"tag":42,"props":233,"children":235},{"className":234},[],[236],{"type":34,"value":237},"DevH",{"type":29,"tag":68,"props":239,"children":240},{},[241,247,248],{"type":29,"tag":42,"props":242,"children":244},{"className":243},[],[245],{"type":34,"value":246},"app.qpoint.io\u002Fapp\u002Fpages\u002Fdev\u002Fcomponents\u002FLabel.vue",{"type":34,"value":183},{"type":29,"tag":42,"props":249,"children":251},{"className":250},[],[252],{"type":34,"value":253},"DevLabel",{"type":29,"tag":68,"props":255,"children":256},{},[257,263,264],{"type":29,"tag":42,"props":258,"children":260},{"className":259},[],[261],{"type":34,"value":262},"app.qpoint.io\u002Fapp\u002Fpages\u002Fdev\u002Fcomponents\u002F_meta\u002FPropsMachine.vue",{"type":34,"value":183},{"type":29,"tag":42,"props":265,"children":267},{"className":266},[],[268],{"type":34,"value":269},"DevMetaPropsMachine",{"type":29,"tag":30,"props":271,"children":272},{},[273],{"type":29,"tag":165,"props":274,"children":275},{},[276],{"type":34,"value":277},"Keep (app-specific, no layer equivalent):",{"type":29,"tag":79,"props":279,"children":280},{},[281,306],{"type":29,"tag":68,"props":282,"children":283},{},[284,290,291,297,298,304],{"type":29,"tag":42,"props":285,"children":287},{"className":286},[],[288],{"type":34,"value":289},"NavItems.vue",{"type":34,"value":49},{"type":29,"tag":42,"props":292,"children":294},{"className":293},[],[295],{"type":34,"value":296},"NavSection.vue",{"type":34,"value":49},{"type":29,"tag":42,"props":299,"children":301},{"className":300},[],[302],{"type":34,"value":303},"TopNav.vue",{"type":34,"value":305}," — dev section navigation",{"type":29,"tag":68,"props":307,"children":308},{},[309,315,316,322],{"type":29,"tag":42,"props":310,"children":312},{"className":311},[],[313],{"type":34,"value":314},"README.txt",{"type":34,"value":49},{"type":29,"tag":42,"props":317,"children":319},{"className":318},[],[320],{"type":34,"value":321},"mock\u002F",{"type":34,"value":323}," — documentation and mock data",{"type":29,"tag":30,"props":325,"children":326},{},[327,332],{"type":29,"tag":165,"props":328,"children":329},{},[330],{"type":34,"value":331},"API is identical",{"type":34,"value":333}," between local and layer versions (same props, same v-model pattern). Only difference is visual styling — layer versions have dark theme and polished CSS.",{"type":29,"tag":30,"props":335,"children":336},{},[337,342,344,349,351,357],{"type":29,"tag":165,"props":338,"children":339},{},[340],{"type":34,"value":341},"Verify:",{"type":34,"value":343}," ",{"type":29,"tag":42,"props":345,"children":347},{"className":346},[],[348],{"type":34,"value":55},{"type":34,"value":350}," and ",{"type":29,"tag":42,"props":352,"children":354},{"className":353},[],[355],{"type":34,"value":356},"\u002Fpages\u002Fdev\u002F",{"type":34,"value":358}," demos render correctly with layer versions",{"key":360,"title":361,"empty":17,"ast":362},"key-changes","Key Changes",{"type":26,"children":363},[364],{"type":29,"tag":79,"props":365,"children":366},{},[367,379,391,396],{"type":29,"tag":68,"props":368,"children":369},{},[370,372,377],{"type":34,"value":371},"Updated ",{"type":29,"tag":42,"props":373,"children":375},{"className":374},[],[376],{"type":34,"value":121},{"type":34,"value":378}," — \"Component scope\" section rewritten as \"unified pantry\" model with clear boundary tests",{"type":29,"tag":68,"props":380,"children":381},{},[382,383,389],{"type":34,"value":371},{"type":29,"tag":42,"props":384,"children":386},{"className":385},[],[387],{"type":34,"value":388},"CLAUDE.md",{"type":34,"value":390}," in both design and q-nuxt-layer projects",{"type":29,"tag":68,"props":392,"children":393},{},[394],{"type":34,"value":395},"Deleted 6 local DevCanvas fork files from app.qpoint.io (Canvas, Comment, Frame, H, Label, _meta\u002FPropsMachine)",{"type":29,"tag":68,"props":397,"children":398},{},[399],{"type":34,"value":400},"Verified 857+ component usages in app's lib\u002Fdev pages will resolve correctly from layer",{"key":402,"title":403,"empty":17,"ast":404},"outcome","Outcome",{"type":26,"children":405},[406],{"type":29,"tag":30,"props":407,"children":408},{},[409],{"type":34,"value":410},"Layer is the single pantry for all Qpoint visual components. App's DevCanvas uses layer versions. Architecture decision is documented and codified. 46 app lib demos identified as candidates for design site component documentation.",{"key":412,"title":413,"empty":17,"ast":414},"extra","The Boundary (revised)",{"type":26,"children":415},[416,426],{"type":29,"tag":30,"props":417,"children":418},{},[419,424],{"type":29,"tag":165,"props":420,"children":421},{},[422],{"type":34,"value":423},"Layer (the pantry):",{"type":34,"value":425}," All visual\u002Fpresentational components — generic or domain-specific. Buttons, inputs, security cards, data-metric stats, sentence builders, prose blocks. If it renders UI, it belongs here.",{"type":29,"tag":30,"props":427,"children":428},{},[429,434,436,442],{"type":29,"tag":165,"props":430,"children":431},{},[432],{"type":34,"value":433},"Local to consumer:",{"type":34,"value":435}," Components wired to app state, API calls, stores, or routing. Filters that call ",{"type":29,"tag":42,"props":437,"children":439},{"className":438},[],[440],{"type":34,"value":441},"useTrafficQuery()",{"type":34,"value":443},", pages that fetch from Firestore, layouts tied to auth state. If it has side effects beyond its own props\u002Femits, it stays local.",{"key":412,"title":445,"empty":17,"ast":446},"Out of Scope",{"type":26,"children":447},[448],{"type":29,"tag":79,"props":449,"children":450},{},[451],{"type":29,"tag":68,"props":452,"children":453},{},[454,459,461,467,469,475],{"type":29,"tag":165,"props":455,"children":456},{},[457],{"type":34,"value":458},"Tarball friction for types\u002Fproduction builds.",{"type":34,"value":460}," Local dev is already fast via ",{"type":29,"tag":42,"props":462,"children":464},{"className":463},[],[465],{"type":34,"value":466},"NUXT_LOCAL_LAYER",{"type":34,"value":468}," env var (direct path to ",{"type":29,"tag":42,"props":470,"children":472},{"className":471},[],[473],{"type":34,"value":474},"..\u002Fq-nuxt-layer",{"type":34,"value":476},"). The remaining tarball rebuild is only needed for TS type resolution and production builds — a narrow cost that doesn't block this cycle. Revisit later if it becomes painful (GitHub Packages, TS path aliases).",{"key":412,"title":478,"empty":17,"ast":479},"App Lib\u002FDev Analysis",{"type":26,"children":480},[481,486,496,539,549],{"type":29,"tag":30,"props":482,"children":483},{},[484],{"type":34,"value":485},"Scanned 101 lib demo files across 10 categories. Found 857+ usages of Dev components.",{"type":29,"tag":30,"props":487,"children":488},{},[489,494],{"type":29,"tag":165,"props":490,"children":491},{},[492],{"type":34,"value":493},"46 components (45%) already exist in the layer",{"type":34,"value":495}," — candidates for design site documentation:",{"type":29,"tag":79,"props":497,"children":498},{},[499,509,519,529],{"type":29,"tag":68,"props":500,"children":501},{},[502,507],{"type":29,"tag":165,"props":503,"children":504},{},[505],{"type":34,"value":506},"data-metric:",{"type":34,"value":508}," 100% coverage — all 11 demos (Background, Base, Compact, Date, InlineTrend, Label, PercentBar, Simple, Spark, TinyInline, Trend, Value)",{"type":29,"tag":68,"props":510,"children":511},{},[512,517],{"type":29,"tag":165,"props":513,"children":514},{},[515],{"type":34,"value":516},"ux:",{"type":34,"value":518}," 23 of 52 demos (Button, Toggle, Checkbox, Input, Modal, SimpleSelect, Tag, TagInput, ToggleCard, IconBtn, Avatar, BoxTag, Close, CopyBtn, DangerDelete, HelpText, HoverBox, LabelText, Link, ListItem, Message, AddBtn, StretchBox)",{"type":29,"tag":68,"props":520,"children":521},{},[522,527],{"type":29,"tag":165,"props":523,"children":524},{},[525],{"type":34,"value":526},"data:",{"type":34,"value":528}," 8 of 9 demos (Stat, Timeline, TrendDirection, Val, KeyVal, ChartUI, PercentBar, SparkChart)",{"type":29,"tag":68,"props":530,"children":531},{},[532,537],{"type":29,"tag":165,"props":533,"children":534},{},[535],{"type":34,"value":536},"form:",{"type":34,"value":538}," 4 of 6 demos (BigHeader, SmallHeader, Wrapper, SaveBar)",{"type":29,"tag":30,"props":540,"children":541},{},[542,547],{"type":29,"tag":165,"props":543,"children":544},{},[545],{"type":34,"value":546},"55 components (55%) are app-local",{"type":34,"value":548}," — wired to app state\u002FAPIs, should stay:",{"type":29,"tag":79,"props":550,"children":551},{},[552,589],{"type":29,"tag":68,"props":553,"children":554},{},[555,560,562,567,569,574,575,580,582,587],{"type":29,"tag":165,"props":556,"children":557},{},[558],{"type":34,"value":559},"filter",{"type":34,"value":561}," (8), ",{"type":29,"tag":165,"props":563,"children":564},{},[565],{"type":34,"value":566},"health",{"type":34,"value":568}," (5), ",{"type":29,"tag":165,"props":570,"children":571},{},[572],{"type":34,"value":573},"wizard",{"type":34,"value":568},{"type":29,"tag":165,"props":576,"children":577},{},[578],{"type":34,"value":579},"page",{"type":34,"value":581}," (2), ",{"type":29,"tag":165,"props":583,"children":584},{},[585],{"type":34,"value":586},"task",{"type":34,"value":588}," (2) — all domain-specific",{"type":29,"tag":68,"props":590,"children":591},{},[592,597],{"type":29,"tag":165,"props":593,"children":594},{},[595],{"type":34,"value":596},"29 app-specific ux",{"type":34,"value":598}," variants (navigation, specialized buttons, code editors, etc.)",{"key":412,"title":600,"empty":17,"ast":601},"Open Questions",{"type":26,"children":602},[603],{"type":29,"tag":79,"props":604,"children":605},{},[606,618],{"type":29,"tag":68,"props":607,"children":608},{},[609,611,616],{"type":34,"value":610},"Should app's ",{"type":29,"tag":42,"props":612,"children":614},{"className":613},[],[615],{"type":34,"value":55},{"type":34,"value":617}," demos be formalized with the same registry pattern as the design site?",{"type":29,"tag":68,"props":619,"children":620},{},[621],{"type":34,"value":622},"Does the design site document ALL layer components (including domain), or only shared ones?",[],[625],"app-lib-analysis.md",[],[],[],1789151089115]