[{"data":1,"prerenderedAt":867},["ShallowReactive",2],{"$f2hparrkV1Lx9Dc7JBnR37hmipLyb50HR6jhnubJZ19k":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":842,"otherDocs":843,"documents":845,"images":849,"archiveItems":857,"links":866},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,"report":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-08-15",true,[23,46,72,319,694,793],{"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},"\u002Fcycles\u002Fdesign\u002Fc48\u002Fdoc\u002Fexecution-plan",[317],{"type":35,"value":318},"execution-plan.md",{"key":320,"title":321,"empty":17,"ast":322},"key-changes","Key Changes",{"type":27,"children":323},[324,331,480,487,620,628],{"type":30,"tag":31,"props":325,"children":326},{},[327],{"type":30,"tag":81,"props":328,"children":329},{},[330],{"type":35,"value":85},{"type":30,"tag":87,"props":332,"children":333},{},[334,425,456,475],{"type":30,"tag":91,"props":335,"children":336},{},[337,339,345,347,353,355,361,363,369,371,377,379,385,386,392,394,399,401,407,409,415,417,423],{"type":35,"value":338},"Added 10 components: ",{"type":30,"tag":38,"props":340,"children":342},{"className":341},[],[343],{"type":35,"value":344},"ProseCallout",{"type":35,"value":346}," (tone\u002Ftag), ",{"type":30,"tag":38,"props":348,"children":350},{"className":349},[],[351],{"type":35,"value":352},"UxCardLink",{"type":35,"value":354}," (optional ",{"type":30,"tag":38,"props":356,"children":358},{"className":357},[],[359],{"type":35,"value":360},"to",{"type":35,"value":362}," → static card), ",{"type":30,"tag":38,"props":364,"children":366},{"className":365},[],[367],{"type":35,"value":368},"UxCodeBlock",{"type":35,"value":370}," (label\u002Fcollapsible\u002Fdark+light themes — absorbed design's CodeBlock.vue), ",{"type":30,"tag":38,"props":372,"children":374},{"className":373},[],[375],{"type":35,"value":376},"UxCode",{"type":35,"value":378}," (0.9em inline, warn tone), ",{"type":30,"tag":38,"props":380,"children":382},{"className":381},[],[383],{"type":35,"value":384},"UxBackLink",{"type":35,"value":103},{"type":30,"tag":38,"props":387,"children":389},{"className":388},[],[390],{"type":35,"value":391},"UxPill",{"type":35,"value":393}," (grape\u002Fleaf\u002Fgrey\u002Fwarn), ",{"type":30,"tag":38,"props":395,"children":397},{"className":396},[],[398],{"type":35,"value":241},{"type":35,"value":400}," (single\u002Fmultiple\u002Frequired, grape\u002Fleaf\u002Fdark), ",{"type":30,"tag":38,"props":402,"children":404},{"className":403},[],[405],{"type":35,"value":406},"UxTable",{"type":35,"value":408}," (line\u002Fband variants, semantic tokens), ",{"type":30,"tag":38,"props":410,"children":412},{"className":411},[],[413],{"type":35,"value":414},"UxSelect",{"type":35,"value":416}," (bordered form select), ",{"type":30,"tag":38,"props":418,"children":420},{"className":419},[],[421],{"type":35,"value":422},"DataMetric_Card",{"type":35,"value":424}," (bordered stat card layout)",{"type":30,"tag":91,"props":426,"children":427},{},[428,430,435,437,442,444,449,451],{"type":35,"value":429},"Moved design's ",{"type":30,"tag":38,"props":431,"children":433},{"className":432},[],[434],{"type":35,"value":61},{"type":35,"value":436}," → ",{"type":30,"tag":38,"props":438,"children":440},{"className":439},[],[441],{"type":35,"value":162},{"type":35,"value":443}," (",{"type":30,"tag":38,"props":445,"children":447},{"className":446},[],[448],{"type":35,"value":275},{"type":35,"value":450},"), refactored onto ",{"type":30,"tag":38,"props":452,"children":454},{"className":453},[],[455],{"type":35,"value":368},{"type":30,"tag":91,"props":457,"children":458},{},[459,465,467,473],{"type":30,"tag":38,"props":460,"children":462},{"className":461},[],[463],{"type":35,"value":464},"ProseSectionHeadline",{"type":35,"value":466}," gained ",{"type":30,"tag":38,"props":468,"children":470},{"className":469},[],[471],{"type":35,"value":472},"size: 'display' | 'doc'",{"type":35,"value":474}," prop (doc = text-28 font-semi scale)",{"type":30,"tag":91,"props":476,"children":477},{},[478],{"type":35,"value":479},"CLAUDE.md catalog updated",{"type":30,"tag":31,"props":481,"children":482},{},[483],{"type":30,"tag":81,"props":484,"children":485},{},[486],{"type":35,"value":185},{"type":30,"tag":87,"props":488,"children":489},{},[490,495,577,608],{"type":30,"tag":91,"props":491,"children":492},{},[493],{"type":35,"value":494},"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":496,"children":497},{},[498,500,505,507,512,514,520,522,527,529,534,536,541,542,548,550,556,557,563,564,570,572],{"type":35,"value":499},"Adoption pass: ",{"type":30,"tag":38,"props":501,"children":503},{"className":502},[],[504],{"type":35,"value":43},{"type":35,"value":506}," now uses the layer ",{"type":30,"tag":38,"props":508,"children":510},{"className":509},[],[511],{"type":35,"value":219},{"type":35,"value":513}," family (deleted its 4 inline ",{"type":30,"tag":38,"props":515,"children":517},{"className":516},[],[518],{"type":35,"value":519},"h()",{"type":35,"value":521}," duplicates), ",{"type":30,"tag":38,"props":523,"children":525},{"className":524},[],[526],{"type":35,"value":226},{"type":35,"value":528}," uses ",{"type":30,"tag":38,"props":530,"children":532},{"className":531},[],[533],{"type":35,"value":414},{"type":35,"value":535},", timeline\u002Fcoverage stat cards use ",{"type":30,"tag":38,"props":537,"children":539},{"className":538},[],[540],{"type":35,"value":422},{"type":35,"value":235},{"type":30,"tag":38,"props":543,"children":545},{"className":544},[],[546],{"type":35,"value":547},"DataMetricValue",{"type":35,"value":549},"+",{"type":30,"tag":38,"props":551,"children":553},{"className":552},[],[554],{"type":35,"value":555},"Label",{"type":35,"value":103},{"type":30,"tag":38,"props":558,"children":560},{"className":559},[],[561],{"type":35,"value":562},"ArchiveArtifactDetail",{"type":35,"value":235},{"type":30,"tag":38,"props":565,"children":567},{"className":566},[],[568],{"type":35,"value":569},"TimelineInspector",{"type":35,"value":571}," badges use ",{"type":30,"tag":38,"props":573,"children":575},{"className":574},[],[576],{"type":35,"value":391},{"type":30,"tag":91,"props":578,"children":579},{},[580,582,587,589,595,597,602,603],{"type":35,"value":581},"Deleted ",{"type":30,"tag":38,"props":583,"children":585},{"className":584},[],[586],{"type":35,"value":170},{"type":35,"value":588}," and ",{"type":30,"tag":38,"props":590,"children":592},{"className":591},[],[593],{"type":35,"value":594},"app\u002Fcomponents\u002Fpatterns\u002FCodeBlock.vue",{"type":35,"value":596},"; renamed 18 ",{"type":30,"tag":38,"props":598,"children":600},{"className":599},[],[601],{"type":35,"value":61},{"type":35,"value":269},{"type":30,"tag":38,"props":604,"children":606},{"className":605},[],[607],{"type":35,"value":275},{"type":30,"tag":91,"props":609,"children":610},{},[611,613,618],{"type":35,"value":612},"Documented all 11 new components: demos in ",{"type":30,"tag":38,"props":614,"children":616},{"className":615},[],[617],{"type":35,"value":296},{"type":35,"value":619},", registry entries with coverage fields",{"type":30,"tag":31,"props":621,"children":622},{},[623],{"type":30,"tag":81,"props":624,"children":625},{},[626],{"type":35,"value":627},"Known remnants (intentional):",{"type":30,"tag":87,"props":629,"children":630},{},[631,649,666,671,689],{"type":30,"tag":91,"props":632,"children":633},{},[634,640,641,647],{"type":30,"tag":38,"props":635,"children":637},{"className":636},[],[638],{"type":35,"value":639},"designs\u002Findex.vue",{"type":35,"value":290},{"type":30,"tag":38,"props":642,"children":644},{"className":643},[],[645],{"type":35,"value":646},"\u003Cpre v-html>",{"type":35,"value":648}," — ANSI art renderer, not a code block",{"type":30,"tag":91,"props":650,"children":651},{},[652,657,659,664],{"type":30,"tag":38,"props":653,"children":655},{"className":654},[],[656],{"type":35,"value":562},{"type":35,"value":658}," grey back link — different tone than ",{"type":30,"tag":38,"props":660,"children":662},{"className":661},[],[663],{"type":35,"value":384},{"type":35,"value":665},"; candidate for a tone prop later",{"type":30,"tag":91,"props":667,"children":668},{},[669],{"type":35,"value":670},"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":672,"children":673},{},[674,680,681,687],{"type":30,"tag":38,"props":675,"children":677},{"className":676},[],[678],{"type":35,"value":679},"archive\u002Findex.vue",{"type":35,"value":290},{"type":30,"tag":38,"props":682,"children":684},{"className":683},[],[685],{"type":35,"value":686},"_shadow-box",{"type":35,"value":688}," card — image-card pattern, out of scope",{"type":30,"tag":91,"props":690,"children":691},{},[692],{"type":35,"value":693},"TimelineOverview micro-pills — canvas-presentation-tuned",{"key":695,"title":696,"empty":17,"ast":697},"outcome","Outcome",{"type":27,"children":698},[699],{"type":30,"tag":31,"props":700,"children":701},{},[702,704,709,710,715,716,721,722,727,728,733,734,739,740,745,746,751,752,757,758,763,765,770,772,777,779,784,786,791],{"type":35,"value":703},"Eleven presentational primitives shipped to q-nuxt-layer (",{"type":30,"tag":38,"props":705,"children":707},{"className":706},[],[708],{"type":35,"value":344},{"type":35,"value":103},{"type":30,"tag":38,"props":711,"children":713},{"className":712},[],[714],{"type":35,"value":352},{"type":35,"value":103},{"type":30,"tag":38,"props":717,"children":719},{"className":718},[],[720],{"type":35,"value":368},{"type":35,"value":103},{"type":30,"tag":38,"props":723,"children":725},{"className":724},[],[726],{"type":35,"value":376},{"type":35,"value":103},{"type":30,"tag":38,"props":729,"children":731},{"className":730},[],[732],{"type":35,"value":384},{"type":35,"value":103},{"type":30,"tag":38,"props":735,"children":737},{"className":736},[],[738],{"type":35,"value":391},{"type":35,"value":103},{"type":30,"tag":38,"props":741,"children":743},{"className":742},[],[744],{"type":35,"value":241},{"type":35,"value":103},{"type":30,"tag":38,"props":747,"children":749},{"className":748},[],[750],{"type":35,"value":406},{"type":35,"value":103},{"type":30,"tag":38,"props":753,"children":755},{"className":754},[],[756],{"type":35,"value":414},{"type":35,"value":103},{"type":30,"tag":38,"props":759,"children":761},{"className":760},[],[762],{"type":35,"value":422},{"type":35,"value":764},", plus ",{"type":30,"tag":38,"props":766,"children":768},{"className":767},[],[769],{"type":35,"value":275},{"type":35,"value":771}," 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":773,"children":775},{"className":774},[],[776],{"type":35,"value":219},{"type":35,"value":778}," family, ",{"type":30,"tag":38,"props":780,"children":782},{"className":781},[],[783],{"type":35,"value":414},{"type":35,"value":785},", and ",{"type":30,"tag":38,"props":787,"children":789},{"className":788},[],[790],{"type":35,"value":422},{"type":35,"value":792},". 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":794,"title":795,"empty":17,"ast":796},"extra","Pending",{"type":27,"children":797},[798],{"type":30,"tag":87,"props":799,"children":800},{},[801,822],{"type":30,"tag":91,"props":802,"children":803},{},[804,806,812,814,820],{"type":35,"value":805},"Layer release 0.6.0 (",{"type":30,"tag":38,"props":807,"children":809},{"className":808},[],[810],{"type":35,"value":811},"\u002Frelease-layer",{"type":35,"value":813},") + consumer ",{"type":30,"tag":38,"props":815,"children":817},{"className":816},[],[818],{"type":35,"value":819},"package.json",{"type":35,"value":821}," updates — awaiting review",{"type":30,"tag":91,"props":823,"children":824},{},[825,827,833,834,840],{"type":35,"value":826},"Opportunistic ",{"type":30,"tag":38,"props":828,"children":830},{"className":829},[],[831],{"type":35,"value":832},"h2+p",{"type":35,"value":436},{"type":30,"tag":38,"props":835,"children":837},{"className":836},[],[838],{"type":35,"value":839},"ProseSectionHeadline size=\"doc\"",{"type":35,"value":841}," migration as pages are touched",[],[844],"initial-prompt.md",[846,848],{"file":318,"title":847},"Execution Plan — Design Site on Layer",{"file":844,"title":13},[850,853],{"src":18,"kind":851,"order":852},"hero",4999,{"src":854,"kind":855,"order":856},"\u002Farchive\u002F2026-q3\u002Fc48-components-index-full.png","full",9000,[858],{"path":859,"title":860,"image":18,"gallery":861},"archive\u002F2026-q3\u002F2026-08-06-c48-components-index","Components Index on the Layer",[862,864],{"src":18,"alt":863},"The components index after c48 — the design site rendering entirely from q-nuxt-layer primitives.",{"src":854,"alt":865},"Components Index on the Layer — full page",[],1794599436130]