[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"$fbfaJtiwtfq7khMYHs-_yTfE8myE3IomOc0XExiVtS-Q":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":294,"otherDocs":298,"images":299,"archiveItems":329,"links":330},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":20,"lastActivity":21,"hasPickup":17,"hasInitialPrompt":17},"c16",16,"c16.sharing-our-work","sharing-our-work","Sharing Our Work Thus Far","Communicate the new app.qpoint.io architecture and q-nuxt-layer to colleagues","archived","2026-03-12",false,"\u002Fcycles\u002Fdesign\u002Fc16-layer.png",9,1,"2026-09-11",[23,46,56,143,271],{"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","Colleagues need to understand the structural changes we've made to app.qpoint.io and the shared component layer. The old pattern — develop a component in the ",{"type":30,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":35,"value":43},"\u002Fdev",{"type":35,"value":45}," playground, then integrate it into the app where the live instance became the only working copy — was brittle and usually broken. We've replaced it with something fundamentally better, and the team needs to see the logic and benefits.",{"key":47,"title":48,"empty":17,"ast":49},"objective","Objective",{"type":27,"children":50},[51],{"type":30,"tag":31,"props":52,"children":53},{},[54],{"type":35,"value":55},"Create clear internal communication (async walkthrough, documentation, or presentation) explaining the q-nuxt-layer architecture and why it matters.",{"key":57,"title":58,"empty":17,"ast":59},"scope","Scope",{"type":27,"children":60},[61,66],{"type":30,"tag":31,"props":62,"children":63},{},[64],{"type":35,"value":65},"Key points to communicate:",{"type":30,"tag":67,"props":68,"children":69},"ul",{},[70,93,103,113,123,133],{"type":30,"tag":71,"props":72,"children":73},"li",{},[74,80,82,91],{"type":30,"tag":75,"props":76,"children":77},"strong",{},[78],{"type":35,"value":79},"Composition pattern:",{"type":35,"value":81}," Components are built once in the layer, then used as compositional building blocks across app.qpoint.io, ",{"type":30,"tag":83,"props":84,"children":88},"a",{"href":85,"rel":86},"http:\u002F\u002Fwww.qpoint.io",[87],"nofollow",[89],{"type":35,"value":90},"www.qpoint.io",{"type":35,"value":92},", and the design site",{"type":30,"tag":71,"props":94,"children":95},{},[96,101],{"type":30,"tag":75,"props":97,"children":98},{},[99],{"type":35,"value":100},"Why the old pattern failed:",{"type":35,"value":102}," The dev playground diverged from production — on integration, the live component became the only working instance, so the playground was perpetually broken",{"type":30,"tag":71,"props":104,"children":105},{},[106,111],{"type":30,"tag":75,"props":107,"children":108},{},[109],{"type":35,"value":110},"DRY across projects:",{"type":35,"value":112}," The brochure site consumes the same brand and base components as the app — no duplication",{"type":30,"tag":71,"props":114,"children":115},{},[116,121],{"type":30,"tag":75,"props":117,"children":118},{},[119],{"type":35,"value":120},"Living demos:",{"type":35,"value":122}," The brochure site instantiates real components for mini demos — \"the feel of the wheel seals the deal\"",{"type":30,"tag":71,"props":124,"children":125},{},[126,131],{"type":30,"tag":75,"props":127,"children":128},{},[129],{"type":35,"value":130},"Clean documentation:",{"type":35,"value":132}," design.qpoint.io provides interactive component docs, pattern examples, and brand guidelines",{"type":30,"tag":71,"props":134,"children":135},{},[136,141],{"type":30,"tag":75,"props":137,"children":138},{},[139],{"type":35,"value":140},"Separation of concerns:",{"type":35,"value":142}," Layer (shared components\u002Ftokens), design site (documentation\u002Fbrand), app (product), www (marketing) — each has a clear role",{"key":144,"title":145,"empty":17,"ast":146},"key-changes","Key Changes",{"type":27,"children":147},[148],{"type":30,"tag":67,"props":149,"children":150},{},[151,167,185,211,261],{"type":30,"tag":71,"props":152,"children":153},{},[154,165],{"type":30,"tag":75,"props":155,"children":156},{},[157,159],{"type":35,"value":158},"New page: ",{"type":30,"tag":38,"props":160,"children":162},{"className":161},[],[163],{"type":35,"value":164},"\u002Flayer",{"type":35,"value":166}," — 8-section documentation page covering why the layer exists, what it provides, how it works, the ecosystem, component inventory, key design decisions, separation of concerns, and before\u002Fafter comparison",{"type":30,"tag":71,"props":168,"children":169},{},[170,175,177,183],{"type":30,"tag":75,"props":171,"children":172},{},[173],{"type":35,"value":174},"Lazy loading subsection",{"type":35,"value":176}," — documents that the layer fully supports Nuxt's ",{"type":30,"tag":38,"props":178,"children":180},{"className":179},[],[181],{"type":35,"value":182},"Lazy",{"type":35,"value":184}," prefix for on-demand component loading, important for app.qpoint.io's performance requirements",{"type":30,"tag":71,"props":186,"children":187},{},[188,193,195,201,203,209],{"type":30,"tag":75,"props":189,"children":190},{},[191],{"type":35,"value":192},"Icon documentation updated",{"type":35,"value":194}," — phased out references to old ",{"type":30,"tag":38,"props":196,"children":198},{"className":197},[],[199],{"type":35,"value":200},"Icon*",{"type":35,"value":202}," render-function components across the site in favor of ",{"type":30,"tag":38,"props":204,"children":206},{"className":205},[],[207],{"type":35,"value":208},"\u003CUxIcon id=\"...\" \u002F>",{"type":35,"value":210}," as the standard pattern. Updated layer page, components page, and component registry.",{"type":30,"tag":71,"props":212,"children":213},{},[214,219,221,227,229,235,237,243,245,251,253,259],{"type":30,"tag":75,"props":215,"children":216},{},[217],{"type":35,"value":218},"UxTableList empty-state fix",{"type":35,"value":220}," — removed hardcoded ",{"type":30,"tag":38,"props":222,"children":224},{"className":223},[],[225],{"type":35,"value":226},"\u003Cimg>",{"type":35,"value":228}," referencing a consumer-specific SVG (",{"type":30,"tag":38,"props":230,"children":232},{"className":231},[],[233],{"type":35,"value":234},"assets\u002Fimages\u002F...\u002Fsine-long.svg",{"type":35,"value":236},") from the layer's ",{"type":30,"tag":38,"props":238,"children":240},{"className":239},[],[241],{"type":35,"value":242},"UxTableList",{"type":35,"value":244}," component, replaced with a ",{"type":30,"tag":38,"props":246,"children":248},{"className":247},[],[249],{"type":35,"value":250},"\u003Cslot name=\"empty\">",{"type":35,"value":252}," defaulting to \"No Records\". This was blocking the ",{"type":30,"tag":38,"props":254,"children":256},{"className":255},[],[257],{"type":35,"value":258},"\u002Fcomponents",{"type":35,"value":260}," page and violated the principle that layer components can't depend on consumer assets.",{"type":30,"tag":71,"props":262,"children":263},{},[264,269],{"type":30,"tag":75,"props":265,"children":266},{},[267],{"type":35,"value":268},"Nav link added",{"type":35,"value":270}," — \"Layer\" added to AppNav between Method and Components",{"key":272,"title":273,"empty":17,"ast":274},"outcome","Outcome",{"type":27,"children":275},[276],{"type":30,"tag":31,"props":277,"children":278},{},[279,284,286,292],{"type":30,"tag":38,"props":280,"children":282},{"className":281},[],[283],{"type":35,"value":164},{"type":35,"value":285}," page communicates the architecture, its benefits over the old pattern, and links to the interactive component catalog. Icon documentation is current. The UxTableList empty-state bug (from c3's \"kept as local\" workaround) is resolved — consumers can now provide custom empty states via the ",{"type":30,"tag":38,"props":287,"children":289},{"className":288},[],[290],{"type":35,"value":291},"#empty",{"type":35,"value":293}," slot.",[295],{"name":296,"prompt":297,"plan":4},"c16-initial","c16-initial-prompt.md",[],[300,303,307,310,313,316,319,322,325],{"src":18,"kind":301,"order":302},"hero",4999,{"src":304,"kind":305,"order":306},"\u002Fcycles\u002Fdesign\u002Fc16-layer-2.png","slice",2,{"src":308,"kind":305,"order":309},"\u002Fcycles\u002Fdesign\u002Fc16-layer-3.png",3,{"src":311,"kind":305,"order":312},"\u002Fcycles\u002Fdesign\u002Fc16-layer-4.png",4,{"src":314,"kind":305,"order":315},"\u002Fcycles\u002Fdesign\u002Fc16-layer-5.png",5,{"src":317,"kind":305,"order":318},"\u002Fcycles\u002Fdesign\u002Fc16-layer-6.png",6,{"src":320,"kind":305,"order":321},"\u002Fcycles\u002Fdesign\u002Fc16-layer-7.png",7,{"src":323,"kind":305,"order":324},"\u002Fcycles\u002Fdesign\u002Fc16-layer-8.png",8,{"src":326,"kind":327,"order":328},"\u002Fcycles\u002Fdesign\u002Fc16-layer-full.png","full",9000,[],[],1789151089356]