[{"data":1,"prerenderedAt":517},["ShallowReactive",2],{"$fs2wxMizI4JlVyLUwFG9uIky03Go0gTl_MQXjaLYsiMU":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":490,"otherDocs":494,"images":495,"archiveItems":507,"links":516},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},"c24",24,"c24.viz-libraries","viz-libraries","Viz Libraries","Instantiate and document qmap and qflow in the design site","archived","2026-03-16",false,"\u002Fcycles\u002Fdesign\u002Fc24-visualization-index.png",3,1,"2026-09-11",[23,37,56,183,337,472],{"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],{"type":35,"value":36},"text","qmap (3D network visualization, Three.js) and qflow (2D traffic visualization, PixiJS) have each gone through extensive experimentation cycles (14 and 9 respectively) and are approaching production readiness. Neither is formally documented or consumable outside of ad-hoc Vite aliases. The design site — as the single source of truth for Qpoint's visual language — is the right place to document them and establish the consumption pattern.",{"key":38,"title":39,"empty":17,"ast":40},"objective","Objective",{"type":27,"children":41},[42],{"type":30,"tag":31,"props":43,"children":44},{},[45,47,54],{"type":35,"value":46},"Make both visualization libraries discoverable and documented on the design site, with live demos. Rename packages to ",{"type":30,"tag":48,"props":49,"children":51},"code",{"className":50},[],[52],{"type":35,"value":53},"@qpoint-io",{"type":35,"value":55}," scope to match the established GitHub Packages pattern. Establish local dev consumption via Nuxt aliases so the design site can render live demos from source.",{"key":57,"title":58,"empty":17,"ast":59},"scope","Scope",{"type":27,"children":60},[61,70,157,165],{"type":30,"tag":31,"props":62,"children":63},{},[64],{"type":30,"tag":65,"props":66,"children":67},"strong",{},[68],{"type":35,"value":69},"In scope:",{"type":30,"tag":71,"props":72,"children":73},"ul",{},[74,109,114,134,139,152],{"type":30,"tag":75,"props":76,"children":77},"li",{},[78,80,86,88,94,96,102,103],{"type":35,"value":79},"Rename ",{"type":30,"tag":48,"props":81,"children":83},{"className":82},[],[84],{"type":35,"value":85},"@qpoint\u002Fqmap",{"type":35,"value":87}," → ",{"type":30,"tag":48,"props":89,"children":91},{"className":90},[],[92],{"type":35,"value":93},"@qpoint-io\u002Fqmap",{"type":35,"value":95}," and ",{"type":30,"tag":48,"props":97,"children":99},{"className":98},[],[100],{"type":35,"value":101},"@qpoint\u002Fflow",{"type":35,"value":87},{"type":30,"tag":48,"props":104,"children":106},{"className":105},[],[107],{"type":35,"value":108},"@qpoint-io\u002Fqflow",{"type":30,"tag":75,"props":110,"children":111},{},[112],{"type":35,"value":113},"Update all internal references across qmap, qflow, and app.qpoint.io",{"type":30,"tag":75,"props":115,"children":116},{},[117,119,125,126,132],{"type":35,"value":118},"Add ",{"type":30,"tag":48,"props":120,"children":122},{"className":121},[],[123],{"type":35,"value":124},"publishConfig",{"type":35,"value":95},{"type":30,"tag":48,"props":127,"children":129},{"className":128},[],[130],{"type":35,"value":131},"repository",{"type":35,"value":133}," fields to both package.json files (prep for future publish)",{"type":30,"tag":75,"props":135,"children":136},{},[137],{"type":35,"value":138},"Wire up design site with local aliases, peer deps, and SSR safety config",{"type":30,"tag":75,"props":140,"children":141},{},[142,144,150],{"type":35,"value":143},"Create ",{"type":30,"tag":48,"props":145,"children":147},{"className":146},[],[148],{"type":35,"value":149},"\u002Fvisualization",{"type":35,"value":151}," section with overview + detail pages for each library",{"type":30,"tag":75,"props":153,"children":154},{},[155],{"type":35,"value":156},"Add nav entry and link from projects page",{"type":30,"tag":31,"props":158,"children":159},{},[160],{"type":30,"tag":65,"props":161,"children":162},{},[163],{"type":35,"value":164},"Not in scope (future phase):",{"type":30,"tag":71,"props":166,"children":167},{},[168,173,178],{"type":30,"tag":75,"props":169,"children":170},{},[171],{"type":35,"value":172},"Publishing to GitHub Packages (libraries still in experimentation)",{"type":30,"tag":75,"props":174,"children":175},{},[176],{"type":35,"value":177},"Production consumption pattern (npm install from registry)",{"type":30,"tag":75,"props":179,"children":180},{},[181],{"type":35,"value":182},"Extracting components to the shared layer",{"key":184,"title":185,"empty":17,"ast":186},"key-changes","Key Changes",{"type":27,"children":187},[188,195,233,239,291,297],{"type":30,"tag":189,"props":190,"children":192},"h3",{"id":191},"phase-1-package-identity",[193],{"type":35,"value":194},"Phase 1: Package Identity",{"type":30,"tag":71,"props":196,"children":197},{},[198,210,228],{"type":30,"tag":75,"props":199,"children":200},{},[201,203,208],{"type":35,"value":202},"Rename both packages to ",{"type":30,"tag":48,"props":204,"children":206},{"className":205},[],[207],{"type":35,"value":53},{"type":35,"value":209}," scope",{"type":30,"tag":75,"props":211,"children":212},{},[213,214,219,221,226],{"type":35,"value":118},{"type":30,"tag":48,"props":215,"children":217},{"className":216},[],[218],{"type":35,"value":124},{"type":35,"value":220}," + ",{"type":30,"tag":48,"props":222,"children":224},{"className":223},[],[225],{"type":35,"value":131},{"type":35,"value":227}," to both package.json files",{"type":30,"tag":75,"props":229,"children":230},{},[231],{"type":35,"value":232},"Update references in README, CLAUDE.md, imports, and app.qpoint.io alias",{"type":30,"tag":189,"props":234,"children":236},{"id":235},"phase-2-design-site-consumption",[237],{"type":35,"value":238},"Phase 2: Design Site Consumption",{"type":30,"tag":71,"props":240,"children":241},{},[242,261,266,279],{"type":30,"tag":75,"props":243,"children":244},{},[245,246,252,253,259],{"type":35,"value":118},{"type":30,"tag":48,"props":247,"children":249},{"className":248},[],[250],{"type":35,"value":251},"three",{"type":35,"value":95},{"type":30,"tag":48,"props":254,"children":256},{"className":255},[],[257],{"type":35,"value":258},"pixi.js",{"type":35,"value":260}," as peer deps in design site",{"type":30,"tag":75,"props":262,"children":263},{},[264],{"type":35,"value":265},"Add Nuxt aliases pointing at sibling source directories",{"type":30,"tag":75,"props":267,"children":268},{},[269,271,277],{"type":35,"value":270},"Configure ",{"type":30,"tag":48,"props":272,"children":274},{"className":273},[],[275],{"type":35,"value":276},"vite.ssr.external",{"type":35,"value":278}," for Three.js\u002FPixiJS (browser-only libs)",{"type":30,"tag":75,"props":280,"children":281},{},[282,283,289],{"type":35,"value":270},{"type":30,"tag":48,"props":284,"children":286},{"className":285},[],[287],{"type":35,"value":288},"vite.optimizeDeps.exclude",{"type":35,"value":290}," for aliased packages",{"type":30,"tag":189,"props":292,"children":294},{"id":293},"phase-3-documentation-pages",[295],{"type":35,"value":296},"Phase 3: Documentation Pages",{"type":30,"tag":71,"props":298,"children":299},{},[300,310,321,332],{"type":30,"tag":75,"props":301,"children":302},{},[303,308],{"type":30,"tag":48,"props":304,"children":306},{"className":305},[],[307],{"type":35,"value":149},{"type":35,"value":309}," — overview with cards for each library",{"type":30,"tag":75,"props":311,"children":312},{},[313,319],{"type":30,"tag":48,"props":314,"children":316},{"className":315},[],[317],{"type":35,"value":318},"\u002Fvisualization\u002Fqmap",{"type":35,"value":320}," — live demo, props API, composable API",{"type":30,"tag":75,"props":322,"children":323},{},[324,330],{"type":30,"tag":48,"props":325,"children":327},{"className":326},[],[328],{"type":35,"value":329},"\u002Fvisualization\u002Fqflow",{"type":35,"value":331}," — live demo with mock data, props API, layout catalog",{"type":30,"tag":75,"props":333,"children":334},{},[335],{"type":35,"value":336},"Nav link + projects page links",{"key":338,"title":339,"empty":17,"ast":340},"outcome","Outcome",{"type":27,"children":341},[342],{"type":30,"tag":71,"props":343,"children":344},{},[345,363,380,398,403,428,454,459],{"type":30,"tag":75,"props":346,"children":347},{},[348,350,355,356,361],{"type":35,"value":349},"Renamed ",{"type":30,"tag":48,"props":351,"children":353},{"className":352},[],[354],{"type":35,"value":85},{"type":35,"value":87},{"type":30,"tag":48,"props":357,"children":359},{"className":358},[],[360],{"type":35,"value":93},{"type":35,"value":362}," across 18 files + package-lock",{"type":30,"tag":75,"props":364,"children":365},{},[366,367,372,373,378],{"type":35,"value":349},{"type":30,"tag":48,"props":368,"children":370},{"className":369},[],[371],{"type":35,"value":101},{"type":35,"value":87},{"type":30,"tag":48,"props":374,"children":376},{"className":375},[],[377],{"type":35,"value":108},{"type":35,"value":379}," across 26 files + package-lock",{"type":30,"tag":75,"props":381,"children":382},{},[383,385,390,391,396],{"type":35,"value":384},"Both packages have ",{"type":30,"tag":48,"props":386,"children":388},{"className":387},[],[389],{"type":35,"value":124},{"type":35,"value":220},{"type":30,"tag":48,"props":392,"children":394},{"className":393},[],[395],{"type":35,"value":131},{"type":35,"value":397}," for future GitHub Packages publish",{"type":30,"tag":75,"props":399,"children":400},{},[401],{"type":35,"value":402},"Updated app.qpoint.io alias to match new names",{"type":30,"tag":75,"props":404,"children":405},{},[406,408,413,415,420,421,426],{"type":35,"value":407},"Design site wired as consumer: Nuxt aliases for local HMR, ",{"type":30,"tag":48,"props":409,"children":411},{"className":410},[],[412],{"type":35,"value":276},{"type":35,"value":414}," for Three.js\u002FPixiJS, ",{"type":30,"tag":48,"props":416,"children":418},{"className":417},[],[419],{"type":35,"value":251},{"type":35,"value":220},{"type":30,"tag":48,"props":422,"children":424},{"className":423},[],[425],{"type":35,"value":258},{"type":35,"value":427}," installed as peer deps",{"type":30,"tag":75,"props":429,"children":430},{},[431,433,438,440,445,447,452],{"type":35,"value":432},"3 new pages: ",{"type":30,"tag":48,"props":434,"children":436},{"className":435},[],[437],{"type":35,"value":149},{"type":35,"value":439}," (overview), ",{"type":30,"tag":48,"props":441,"children":443},{"className":442},[],[444],{"type":35,"value":318},{"type":35,"value":446}," (live 3D demo + API docs), ",{"type":30,"tag":48,"props":448,"children":450},{"className":449},[],[451],{"type":35,"value":329},{"type":35,"value":453}," (live 2D demo with 500 mock audit logs + API docs)",{"type":30,"tag":75,"props":455,"children":456},{},[457],{"type":35,"value":458},"\"Viz\" nav link added, projects page cards link to viz detail pages",{"type":30,"tag":75,"props":460,"children":461},{},[462,464,470],{"type":35,"value":463},"All pages SSR-safe (200 status, ",{"type":30,"tag":48,"props":465,"children":467},{"className":466},[],[468],{"type":35,"value":469},"\u003CClientOnly>",{"type":35,"value":471}," wrappers)",{"key":473,"title":474,"empty":17,"ast":475},"extra","Open Issues",{"type":27,"children":476},[477],{"type":30,"tag":71,"props":478,"children":479},{},[480,485],{"type":30,"tag":75,"props":481,"children":482},{},[483],{"type":35,"value":484},"QFlow's c9 (dev-tools integration) is still active — API may shift",{"type":30,"tag":75,"props":486,"children":487},{},[488],{"type":35,"value":489},"Neither library has TypeScript types yet",[491],{"name":492,"prompt":493,"plan":4},"cycle-create","cycle-create-prompt.md",[],[496,499,503],{"src":18,"kind":497,"order":498},"hero",4999,{"src":500,"kind":501,"order":502},"\u002Fcycles\u002Fdesign\u002Fc24-visualization-index-2.png","slice",2,{"src":504,"kind":505,"order":506},"\u002Fcycles\u002Fdesign\u002Fc24-visualization-index-full.png","full",9000,[508],{"path":509,"title":510,"image":18,"gallery":511},"archive\u002F2026-q3\u002F2026-03-25-c24-visualization-index","Visualization Index",[512,514],{"src":18,"alt":513},"The \u002Fvisualization overview.",{"src":504,"alt":515},"Visualization Index — full page",[],1789151088604]