[{"data":1,"prerenderedAt":862},["ShallowReactive",2],{"$f1Y3OASeDp8KEbX7wRDSIe8K9QUqtV6IUTqrFNY58Fu4":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":841,"otherDocs":842,"images":844,"archiveItems":852,"links":861},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":18,"imageCount":19,"artifactCount":19,"lastActivity":20,"hasPickup":17,"hasInitialPrompt":21},"c48",48,"c48.design-site-on-layer","design-site-on-layer","Design Site on Layer","Close the layer gaps so the design site uses only q-nuxt-layer components for everything presentational","archived","2026-06-11",false,"\u002Farchive\u002F2026-q3\u002Fc48-components-index.png",2,"2026-09-11",true,[23,46,72,318,693,792],{"key":24,"title":25,"empty":17,"ast":26},"why","Why",{"type":27,"children":28},"root",[29],{"type":30,"tag":31,"props":32,"children":33},"element","p",{},[34,37,44],{"type":35,"value":36},"text","The design site is the first consumer of the design system, but a sweep (2026-06-11) found it still hand-rolls recurring presentational patterns: left-border callouts (15+ uses), index card links (5 pages), code blocks, inline code (24+ uses), back links (12+ pages), filter button groups, read-only pills, and static doc tables. It also bypasses layer components that already exist (DataMetric for stat cards, Sentence* — which ",{"type":30,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":35,"value":43},"NotificationRuleCard",{"type":35,"value":45}," duplicates with inline render functions, UxSimpleSelect). Per the unified pantry rule, these patterns belong in the layer; the site should consume them.",{"key":47,"title":48,"empty":17,"ast":49},"objective","Objective",{"type":27,"children":50},[51],{"type":30,"tag":31,"props":52,"children":53},{},[54,56,62,64,70],{"type":35,"value":55},"Add 8 primitives to the layer, move the ",{"type":30,"tag":38,"props":57,"children":59},{"className":58},[],[60],{"type":35,"value":61},"PatternCard",{"type":35,"value":63}," doc scaffold to the dev group, and migrate every design-site call site — so that grep finds zero hand-rolled presentational markup outside ",{"type":30,"tag":38,"props":65,"children":67},{"className":66},[],[68],{"type":35,"value":69},"_demos",{"type":35,"value":71},", and local components are limited to site chrome and data-wired logic (~16 files, down from 30).",{"key":73,"title":74,"empty":17,"ast":75},"scope","Scope",{"type":27,"children":76},[77,86,178,186,281,307],{"type":30,"tag":31,"props":78,"children":79},{},[80],{"type":30,"tag":81,"props":82,"children":83},"strong",{},[84],{"type":35,"value":85},"Layer (q-nuxt-layer):",{"type":30,"tag":87,"props":88,"children":89},"ul",{},[90,152,173],{"type":30,"tag":91,"props":92,"children":93},"li",{},[94,96,102,104,110,111,117,118,124,125,131,132,138,139,145,146],{"type":35,"value":95},"New: ",{"type":30,"tag":38,"props":97,"children":99},{"className":98},[],[100],{"type":35,"value":101},"prose\u002FCallout.vue",{"type":35,"value":103},", ",{"type":30,"tag":38,"props":105,"children":107},{"className":106},[],[108],{"type":35,"value":109},"ux\u002FCardLink.vue",{"type":35,"value":103},{"type":30,"tag":38,"props":112,"children":114},{"className":113},[],[115],{"type":35,"value":116},"ux\u002FCodeBlock.vue",{"type":35,"value":103},{"type":30,"tag":38,"props":119,"children":121},{"className":120},[],[122],{"type":35,"value":123},"ux\u002FCode.vue",{"type":35,"value":103},{"type":30,"tag":38,"props":126,"children":128},{"className":127},[],[129],{"type":35,"value":130},"ux\u002FBackLink.vue",{"type":35,"value":103},{"type":30,"tag":38,"props":133,"children":135},{"className":134},[],[136],{"type":35,"value":137},"ux\u002FPill.vue",{"type":35,"value":103},{"type":30,"tag":38,"props":140,"children":142},{"className":141},[],[143],{"type":35,"value":144},"ux\u002FFilterGroup.vue",{"type":35,"value":103},{"type":30,"tag":38,"props":147,"children":149},{"className":148},[],[150],{"type":35,"value":151},"ux\u002FTable.vue",{"type":30,"tag":91,"props":153,"children":154},{},[155,157,163,165,171],{"type":35,"value":156},"Moved: ",{"type":30,"tag":38,"props":158,"children":160},{"className":159},[],[161],{"type":35,"value":162},"dev\u002FPatternCard.vue",{"type":35,"value":164}," (from design's ",{"type":30,"tag":38,"props":166,"children":168},{"className":167},[],[169],{"type":35,"value":170},"app\u002Fcomponents\u002FPatternCard.vue",{"type":35,"value":172},")",{"type":30,"tag":91,"props":174,"children":175},{},[176],{"type":35,"value":177},"Release 0.6.0 at the end (additive minor)",{"type":30,"tag":31,"props":179,"children":180},{},[181],{"type":30,"tag":81,"props":182,"children":183},{},[184],{"type":35,"value":185},"Design site:",{"type":30,"tag":87,"props":187,"children":188},{},[189,202,250,276],{"type":30,"tag":91,"props":190,"children":191},{},[192,194,200],{"type":35,"value":193},"Migrate call sites across ",{"type":30,"tag":38,"props":195,"children":197},{"className":196},[],[198],{"type":35,"value":199},"app\u002Fpages\u002F",{"type":35,"value":201}," (brand, layer, method, philosophy, visualization, history, archive, timeline, coverage, index pages)",{"type":30,"tag":91,"props":203,"children":204},{},[205,207,212,214,220,221,227,228,234,236,242,244],{"type":35,"value":206},"Refactor ",{"type":30,"tag":38,"props":208,"children":210},{"className":209},[],[211],{"type":35,"value":43},{"type":35,"value":213}," onto ",{"type":30,"tag":38,"props":215,"children":217},{"className":216},[],[218],{"type":35,"value":219},"Sentence*",{"type":35,"value":103},{"type":30,"tag":38,"props":222,"children":224},{"className":223},[],[225],{"type":35,"value":226},"TimelineFilters",{"type":35,"value":213},{"type":30,"tag":38,"props":229,"children":231},{"className":230},[],[232],{"type":35,"value":233},"UxSimpleSelect",{"type":35,"value":235},"\u002F",{"type":30,"tag":38,"props":237,"children":239},{"className":238},[],[240],{"type":35,"value":241},"UxFilterGroup",{"type":35,"value":243},", stat cards onto ",{"type":30,"tag":38,"props":245,"children":247},{"className":246},[],[248],{"type":35,"value":249},"DataMetric*",{"type":30,"tag":91,"props":251,"children":252},{},[253,255,261,263,268,270],{"type":35,"value":254},"Delete ",{"type":30,"tag":38,"props":256,"children":258},{"className":257},[],[259],{"type":35,"value":260},"patterns\u002FCodeBlock.vue",{"type":35,"value":262},"; rename ",{"type":30,"tag":38,"props":264,"children":266},{"className":265},[],[267],{"type":35,"value":61},{"type":35,"value":269}," usages to ",{"type":30,"tag":38,"props":271,"children":273},{"className":272},[],[274],{"type":35,"value":275},"DevPatternCard",{"type":30,"tag":91,"props":277,"children":278},{},[279],{"type":35,"value":280},"Document all new components (demos + registry + coverage fields)",{"type":30,"tag":31,"props":282,"children":283},{},[284,289,291,297,299,305],{"type":30,"tag":81,"props":285,"children":286},{},[287],{"type":35,"value":288},"Out:",{"type":35,"value":290}," ",{"type":30,"tag":38,"props":292,"children":294},{"className":293},[],[295],{"type":35,"value":296},"_demos\u002F",{"type":35,"value":298}," markup, sectioned link grid (document as pattern), moving ",{"type":30,"tag":38,"props":300,"children":302},{"className":301},[],[303],{"type":35,"value":304},"patterns\u002F*",{"type":35,"value":306}," compositions, bulk h2+p heading migration.",{"type":30,"tag":31,"props":308,"children":309},{},[310,312],{"type":35,"value":311},"Full phase-by-phase detail: ",{"type":30,"tag":313,"props":314,"children":316},"a",{"href":315},"execution-plan.md",[317],{"type":35,"value":315},{"key":319,"title":320,"empty":17,"ast":321},"key-changes","Key Changes",{"type":27,"children":322},[323,330,479,486,619,627],{"type":30,"tag":31,"props":324,"children":325},{},[326],{"type":30,"tag":81,"props":327,"children":328},{},[329],{"type":35,"value":85},{"type":30,"tag":87,"props":331,"children":332},{},[333,424,455,474],{"type":30,"tag":91,"props":334,"children":335},{},[336,338,344,346,352,354,360,362,368,370,376,378,384,385,391,393,398,400,406,408,414,416,422],{"type":35,"value":337},"Added 10 components: ",{"type":30,"tag":38,"props":339,"children":341},{"className":340},[],[342],{"type":35,"value":343},"ProseCallout",{"type":35,"value":345}," (tone\u002Ftag), ",{"type":30,"tag":38,"props":347,"children":349},{"className":348},[],[350],{"type":35,"value":351},"UxCardLink",{"type":35,"value":353}," (optional ",{"type":30,"tag":38,"props":355,"children":357},{"className":356},[],[358],{"type":35,"value":359},"to",{"type":35,"value":361}," → static card), ",{"type":30,"tag":38,"props":363,"children":365},{"className":364},[],[366],{"type":35,"value":367},"UxCodeBlock",{"type":35,"value":369}," (label\u002Fcollapsible\u002Fdark+light themes — absorbed design's CodeBlock.vue), ",{"type":30,"tag":38,"props":371,"children":373},{"className":372},[],[374],{"type":35,"value":375},"UxCode",{"type":35,"value":377}," (0.9em inline, warn tone), ",{"type":30,"tag":38,"props":379,"children":381},{"className":380},[],[382],{"type":35,"value":383},"UxBackLink",{"type":35,"value":103},{"type":30,"tag":38,"props":386,"children":388},{"className":387},[],[389],{"type":35,"value":390},"UxPill",{"type":35,"value":392}," (grape\u002Fleaf\u002Fgrey\u002Fwarn), ",{"type":30,"tag":38,"props":394,"children":396},{"className":395},[],[397],{"type":35,"value":241},{"type":35,"value":399}," (single\u002Fmultiple\u002Frequired, grape\u002Fleaf\u002Fdark), ",{"type":30,"tag":38,"props":401,"children":403},{"className":402},[],[404],{"type":35,"value":405},"UxTable",{"type":35,"value":407}," (line\u002Fband variants, semantic tokens), ",{"type":30,"tag":38,"props":409,"children":411},{"className":410},[],[412],{"type":35,"value":413},"UxSelect",{"type":35,"value":415}," (bordered form select), ",{"type":30,"tag":38,"props":417,"children":419},{"className":418},[],[420],{"type":35,"value":421},"DataMetric_Card",{"type":35,"value":423}," (bordered stat card layout)",{"type":30,"tag":91,"props":425,"children":426},{},[427,429,434,436,441,443,448,450],{"type":35,"value":428},"Moved design's ",{"type":30,"tag":38,"props":430,"children":432},{"className":431},[],[433],{"type":35,"value":61},{"type":35,"value":435}," → ",{"type":30,"tag":38,"props":437,"children":439},{"className":438},[],[440],{"type":35,"value":162},{"type":35,"value":442}," (",{"type":30,"tag":38,"props":444,"children":446},{"className":445},[],[447],{"type":35,"value":275},{"type":35,"value":449},"), refactored onto ",{"type":30,"tag":38,"props":451,"children":453},{"className":452},[],[454],{"type":35,"value":367},{"type":30,"tag":91,"props":456,"children":457},{},[458,464,466,472],{"type":30,"tag":38,"props":459,"children":461},{"className":460},[],[462],{"type":35,"value":463},"ProseSectionHeadline",{"type":35,"value":465}," gained ",{"type":30,"tag":38,"props":467,"children":469},{"className":468},[],[470],{"type":35,"value":471},"size: 'display' | 'doc'",{"type":35,"value":473}," prop (doc = text-28 font-semi scale)",{"type":30,"tag":91,"props":475,"children":476},{},[477],{"type":35,"value":478},"CLAUDE.md catalog updated",{"type":30,"tag":31,"props":480,"children":481},{},[482],{"type":30,"tag":81,"props":483,"children":484},{},[485],{"type":35,"value":185},{"type":30,"tag":87,"props":487,"children":488},{},[489,494,576,607],{"type":30,"tag":91,"props":490,"children":491},{},[492],{"type":35,"value":493},"Migrated all call sites: 17 callouts, 8 card links, 16 back links, 73 inline code spans, 10 code blocks, 10 tables (incl. the component detail page's props\u002Femits\u002Fslots tables), archive filters + pills",{"type":30,"tag":91,"props":495,"children":496},{},[497,499,504,506,511,513,519,521,526,528,533,535,540,541,547,549,555,556,562,563,569,571],{"type":35,"value":498},"Adoption pass: ",{"type":30,"tag":38,"props":500,"children":502},{"className":501},[],[503],{"type":35,"value":43},{"type":35,"value":505}," now uses the layer ",{"type":30,"tag":38,"props":507,"children":509},{"className":508},[],[510],{"type":35,"value":219},{"type":35,"value":512}," family (deleted its 4 inline ",{"type":30,"tag":38,"props":514,"children":516},{"className":515},[],[517],{"type":35,"value":518},"h()",{"type":35,"value":520}," duplicates), ",{"type":30,"tag":38,"props":522,"children":524},{"className":523},[],[525],{"type":35,"value":226},{"type":35,"value":527}," uses ",{"type":30,"tag":38,"props":529,"children":531},{"className":530},[],[532],{"type":35,"value":413},{"type":35,"value":534},", timeline\u002Fcoverage stat cards use ",{"type":30,"tag":38,"props":536,"children":538},{"className":537},[],[539],{"type":35,"value":421},{"type":35,"value":235},{"type":30,"tag":38,"props":542,"children":544},{"className":543},[],[545],{"type":35,"value":546},"DataMetricValue",{"type":35,"value":548},"+",{"type":30,"tag":38,"props":550,"children":552},{"className":551},[],[553],{"type":35,"value":554},"Label",{"type":35,"value":103},{"type":30,"tag":38,"props":557,"children":559},{"className":558},[],[560],{"type":35,"value":561},"ArchiveArtifactDetail",{"type":35,"value":235},{"type":30,"tag":38,"props":564,"children":566},{"className":565},[],[567],{"type":35,"value":568},"TimelineInspector",{"type":35,"value":570}," badges use ",{"type":30,"tag":38,"props":572,"children":574},{"className":573},[],[575],{"type":35,"value":390},{"type":30,"tag":91,"props":577,"children":578},{},[579,581,586,588,594,596,601,602],{"type":35,"value":580},"Deleted ",{"type":30,"tag":38,"props":582,"children":584},{"className":583},[],[585],{"type":35,"value":170},{"type":35,"value":587}," and ",{"type":30,"tag":38,"props":589,"children":591},{"className":590},[],[592],{"type":35,"value":593},"app\u002Fcomponents\u002Fpatterns\u002FCodeBlock.vue",{"type":35,"value":595},"; renamed 18 ",{"type":30,"tag":38,"props":597,"children":599},{"className":598},[],[600],{"type":35,"value":61},{"type":35,"value":269},{"type":30,"tag":38,"props":603,"children":605},{"className":604},[],[606],{"type":35,"value":275},{"type":30,"tag":91,"props":608,"children":609},{},[610,612,617],{"type":35,"value":611},"Documented all 11 new components: demos in ",{"type":30,"tag":38,"props":613,"children":615},{"className":614},[],[616],{"type":35,"value":296},{"type":35,"value":618},", registry entries with coverage fields",{"type":30,"tag":31,"props":620,"children":621},{},[622],{"type":30,"tag":81,"props":623,"children":624},{},[625],{"type":35,"value":626},"Known remnants (intentional):",{"type":30,"tag":87,"props":628,"children":629},{},[630,648,665,670,688],{"type":30,"tag":91,"props":631,"children":632},{},[633,639,640,646],{"type":30,"tag":38,"props":634,"children":636},{"className":635},[],[637],{"type":35,"value":638},"designs\u002Findex.vue",{"type":35,"value":290},{"type":30,"tag":38,"props":641,"children":643},{"className":642},[],[644],{"type":35,"value":645},"\u003Cpre v-html>",{"type":35,"value":647}," — ANSI art renderer, not a code block",{"type":30,"tag":91,"props":649,"children":650},{},[651,656,658,663],{"type":30,"tag":38,"props":652,"children":654},{"className":653},[],[655],{"type":35,"value":561},{"type":35,"value":657}," grey back link — different tone than ",{"type":30,"tag":38,"props":659,"children":661},{"className":660},[],[662],{"type":35,"value":383},{"type":35,"value":664},"; candidate for a tone prop later",{"type":30,"tag":91,"props":666,"children":667},{},[668],{"type":35,"value":669},"Small bordered buttons in timeline components (\"Clear filters\", inspector links) — a \"small button\" layer gap, noted for a future cycle",{"type":30,"tag":91,"props":671,"children":672},{},[673,679,680,686],{"type":30,"tag":38,"props":674,"children":676},{"className":675},[],[677],{"type":35,"value":678},"archive\u002Findex.vue",{"type":35,"value":290},{"type":30,"tag":38,"props":681,"children":683},{"className":682},[],[684],{"type":35,"value":685},"_shadow-box",{"type":35,"value":687}," card — image-card pattern, out of scope",{"type":30,"tag":91,"props":689,"children":690},{},[691],{"type":35,"value":692},"TimelineOverview micro-pills — canvas-presentation-tuned",{"key":694,"title":695,"empty":17,"ast":696},"outcome","Outcome",{"type":27,"children":697},[698],{"type":30,"tag":31,"props":699,"children":700},{},[701,703,708,709,714,715,720,721,726,727,732,733,738,739,744,745,750,751,756,757,762,764,769,771,776,778,783,785,790],{"type":35,"value":702},"Eleven presentational primitives shipped to q-nuxt-layer (",{"type":30,"tag":38,"props":704,"children":706},{"className":705},[],[707],{"type":35,"value":343},{"type":35,"value":103},{"type":30,"tag":38,"props":710,"children":712},{"className":711},[],[713],{"type":35,"value":351},{"type":35,"value":103},{"type":30,"tag":38,"props":716,"children":718},{"className":717},[],[719],{"type":35,"value":367},{"type":35,"value":103},{"type":30,"tag":38,"props":722,"children":724},{"className":723},[],[725],{"type":35,"value":375},{"type":35,"value":103},{"type":30,"tag":38,"props":728,"children":730},{"className":729},[],[731],{"type":35,"value":383},{"type":35,"value":103},{"type":30,"tag":38,"props":734,"children":736},{"className":735},[],[737],{"type":35,"value":390},{"type":35,"value":103},{"type":30,"tag":38,"props":740,"children":742},{"className":741},[],[743],{"type":35,"value":241},{"type":35,"value":103},{"type":30,"tag":38,"props":746,"children":748},{"className":747},[],[749],{"type":35,"value":405},{"type":35,"value":103},{"type":30,"tag":38,"props":752,"children":754},{"className":753},[],[755],{"type":35,"value":413},{"type":35,"value":103},{"type":30,"tag":38,"props":758,"children":760},{"className":759},[],[761],{"type":35,"value":421},{"type":35,"value":763},", plus ",{"type":30,"tag":38,"props":765,"children":767},{"className":766},[],[768],{"type":35,"value":275},{"type":35,"value":770}," moved from the design site), with every design-site call site migrated — 17 callouts, 8 card links, 16 back links, 73 inline code spans, 10 code blocks, 10 tables — and an adoption pass onto the ",{"type":30,"tag":38,"props":772,"children":774},{"className":773},[],[775],{"type":35,"value":219},{"type":35,"value":777}," family, ",{"type":30,"tag":38,"props":779,"children":781},{"className":780},[],[782],{"type":35,"value":413},{"type":35,"value":784},", and ",{"type":30,"tag":38,"props":786,"children":788},{"className":787},[],[789],{"type":35,"value":421},{"type":35,"value":791},". All components documented with demos, registry entries, and coverage fields; intentional remnants (ANSI art renderer, grey back link, small bordered buttons) recorded for future cycles. The once-pending 0.6.0 layer release long since shipped (layer at 0.9.x).",{"key":793,"title":794,"empty":17,"ast":795},"extra","Pending",{"type":27,"children":796},[797],{"type":30,"tag":87,"props":798,"children":799},{},[800,821],{"type":30,"tag":91,"props":801,"children":802},{},[803,805,811,813,819],{"type":35,"value":804},"Layer release 0.6.0 (",{"type":30,"tag":38,"props":806,"children":808},{"className":807},[],[809],{"type":35,"value":810},"\u002Frelease-layer",{"type":35,"value":812},") + consumer ",{"type":30,"tag":38,"props":814,"children":816},{"className":815},[],[817],{"type":35,"value":818},"package.json",{"type":35,"value":820}," updates — awaiting review",{"type":30,"tag":91,"props":822,"children":823},{},[824,826,832,833,839],{"type":35,"value":825},"Opportunistic ",{"type":30,"tag":38,"props":827,"children":829},{"className":828},[],[830],{"type":35,"value":831},"h2+p",{"type":35,"value":435},{"type":30,"tag":38,"props":834,"children":836},{"className":835},[],[837],{"type":35,"value":838},"ProseSectionHeadline size=\"doc\"",{"type":35,"value":840}," migration as pages are touched",[],[843],"initial-prompt.md",[845,848],{"src":18,"kind":846,"order":847},"hero",4999,{"src":849,"kind":850,"order":851},"\u002Farchive\u002F2026-q3\u002Fc48-components-index-full.png","full",9000,[853],{"path":854,"title":855,"image":18,"gallery":856},"archive\u002F2026-q3\u002F2026-08-06-c48-components-index","Components Index on the Layer",[857,859],{"src":18,"alt":858},"The components index after c48 — the design site rendering entirely from q-nuxt-layer primitives.",{"src":849,"alt":860},"Components Index on the Layer — full page",[],1789151084329]