[{"data":1,"prerenderedAt":338},["ShallowReactive",2],{"$fITahymJgTdEOzdYbjItjzLWtvyEn73EgBMtFnEddBW8":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":317,"otherDocs":318,"images":320,"archiveItems":328,"links":337},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":4,"status":14,"statusNote":4,"created":15,"completed":4,"mode":4,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":16,"hasInitialPrompt":21},"c40",40,"c40.qpixel-library","qpixel-library","Qpixel Library","archived","2026-04-16",false,"\u002Farchive\u002F2026-q3\u002Fc40-qpixel-editor.png",2,1,"2026-09-11",true,[23,37,47,166,260],{"key":24,"title":25,"empty":16,"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","qpixel was scaffolded as a full Nuxt app during c35, but it's purely client-side with zero server features and zero layer component usage. Meanwhile qmap and qflow — our other visualization tools — are packaged as lean Vue + Vite libraries that the design site imports and embeds directly. Aligning qpixel on the same model lets us embed a live editor on the design site, drop unnecessary Nuxt overhead, and make the editor importable by any Vue project.",{"key":38,"title":39,"empty":16,"ast":40},"objective","Objective",{"type":27,"children":41},[42],{"type":30,"tag":31,"props":43,"children":44},{},[45],{"type":35,"value":46},"Restructure qpixel from a Nuxt app to a Vue + Vite library component following the qmap\u002Fqflow packaging pattern. Create a showcase page on the design site with a live embedded editor.",{"key":48,"title":49,"empty":16,"ast":50},"scope","Scope",{"type":27,"children":51},[52,61,132,140],{"type":30,"tag":31,"props":53,"children":54},{},[55],{"type":30,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":35,"value":60},"In:",{"type":30,"tag":62,"props":63,"children":64},"ul",{},[65,71,93,98,111,116,127],{"type":30,"tag":66,"props":67,"children":68},"li",{},[69],{"type":35,"value":70},"Vite library mode build (ESM + UMD, CSS extracted)",{"type":30,"tag":66,"props":72,"children":73},{},[74,76,83,85,91],{"type":35,"value":75},"Move source from ",{"type":30,"tag":77,"props":78,"children":80},"code",{"className":79},[],[81],{"type":35,"value":82},"app\u002F",{"type":35,"value":84}," to ",{"type":30,"tag":77,"props":86,"children":88},{"className":87},[],[89],{"type":35,"value":90},"src\u002F",{"type":35,"value":92},", fix all imports",{"type":30,"tag":66,"props":94,"children":95},{},[96],{"type":35,"value":97},"Convert remaining Tailwind utilities to scoped CSS (zero external CSS dependency)",{"type":30,"tag":66,"props":99,"children":100},{},[101,103,109],{"type":35,"value":102},"Export ",{"type":30,"tag":77,"props":104,"children":106},{"className":105},[],[107],{"type":35,"value":108},"QpixelEditor",{"type":35,"value":110}," (full editor) + individual components + composables + utils",{"type":30,"tag":66,"props":112,"children":113},{},[114],{"type":35,"value":115},"Dev harness for local development",{"type":30,"tag":66,"props":117,"children":118},{},[119,121],{"type":35,"value":120},"Design site showcase page at ",{"type":30,"tag":77,"props":122,"children":124},{"className":123},[],[125],{"type":35,"value":126},"\u002Fvisualization\u002Fqpixel",{"type":30,"tag":66,"props":128,"children":129},{},[130],{"type":35,"value":131},"Update Playwright tests for new structure",{"type":30,"tag":31,"props":133,"children":134},{},[135],{"type":30,"tag":56,"props":136,"children":137},{},[138],{"type":35,"value":139},"Out:",{"type":30,"tag":62,"props":141,"children":142},{},[143,148,161],{"type":30,"tag":66,"props":144,"children":145},{},[146],{"type":35,"value":147},"Publishing to GitHub Packages (future cycle)",{"type":30,"tag":66,"props":149,"children":150},{},[151,153,159],{"type":35,"value":152},"CLI tools rewrite (stay as-is in ",{"type":30,"tag":77,"props":154,"children":156},{"className":155},[],[157],{"type":35,"value":158},"tools\u002F",{"type":35,"value":160},")",{"type":30,"tag":66,"props":162,"children":163},{},[164],{"type":35,"value":165},"New editor features",{"key":167,"title":168,"empty":16,"ast":169},"key-changes","Key Changes",{"type":27,"children":170},[171],{"type":30,"tag":62,"props":172,"children":173},{},[174,193,210,243,248],{"type":30,"tag":66,"props":175,"children":176},{},[177,183,185,191],{"type":30,"tag":77,"props":178,"children":180},{"className":179},[],[181],{"type":35,"value":182},"@qpoint-io\u002Fqpixel",{"type":35,"value":184}," package with ",{"type":30,"tag":77,"props":186,"children":188},{"className":187},[],[189],{"type":35,"value":190},"peerDependencies: { vue: \"^3.4.0\" }",{"type":35,"value":192}," — no other deps",{"type":30,"tag":66,"props":194,"children":195},{},[196,201,203,209],{"type":30,"tag":77,"props":197,"children":199},{"className":198},[],[200],{"type":35,"value":108},{"type":35,"value":202}," component: full editor experience, container-driven sizing (",{"type":30,"tag":77,"props":204,"children":206},{"className":205},[],[207],{"type":35,"value":208},"height: 100%",{"type":35,"value":160},{"type":30,"tag":66,"props":211,"children":212},{},[213,215,221,223,229,230,236,237],{"type":35,"value":214},"Props for configurability: ",{"type":30,"tag":77,"props":216,"children":218},{"className":217},[],[219],{"type":35,"value":220},"initialRows",{"type":35,"value":222},", ",{"type":30,"tag":77,"props":224,"children":226},{"className":225},[],[227],{"type":35,"value":228},"initialCols",{"type":35,"value":222},{"type":30,"tag":77,"props":231,"children":233},{"className":232},[],[234],{"type":35,"value":235},"showLibrary",{"type":35,"value":222},{"type":30,"tag":77,"props":238,"children":240},{"className":239},[],[241],{"type":35,"value":242},"showPreview",{"type":30,"tag":66,"props":244,"children":245},{},[246],{"type":35,"value":247},"All 7 components individually exportable for custom compositions",{"type":30,"tag":66,"props":249,"children":250},{},[251,253,258],{"type":35,"value":252},"Design site gets ",{"type":30,"tag":77,"props":254,"children":256},{"className":255},[],[257],{"type":35,"value":126},{"type":35,"value":259}," with live demo (matching qmap\u002Fqflow pattern)",{"key":261,"title":262,"empty":16,"ast":263},"outcome","Outcome",{"type":27,"children":264},[265],{"type":30,"tag":31,"props":266,"children":267},{},[268,270,275,277,282,284,289,291,296,297,302,303,308,310,315],{"type":35,"value":269},"Restructured qpixel from a Nuxt app into a lean ",{"type":30,"tag":77,"props":271,"children":273},{"className":272},[],[274],{"type":35,"value":182},{"type":35,"value":276}," Vue + Vite library matching the qmap\u002Fqflow packaging model — Vue as the only peer dependency, no external CSS. Exports the full ",{"type":30,"tag":77,"props":278,"children":280},{"className":279},[],[281],{"type":35,"value":108},{"type":35,"value":283}," (container-driven sizing, ",{"type":30,"tag":77,"props":285,"children":287},{"className":286},[],[288],{"type":35,"value":220},{"type":35,"value":290},"\u002F",{"type":30,"tag":77,"props":292,"children":294},{"className":293},[],[295],{"type":35,"value":228},{"type":35,"value":290},{"type":30,"tag":77,"props":298,"children":300},{"className":299},[],[301],{"type":35,"value":235},{"type":35,"value":290},{"type":30,"tag":77,"props":304,"children":306},{"className":305},[],[307],{"type":35,"value":242},{"type":35,"value":309},") plus all seven components, composables, and utils. The design site gained ",{"type":30,"tag":77,"props":311,"children":313},{"className":312},[],[314],{"type":35,"value":126},{"type":35,"value":316}," with a live embedded editor alongside the qmap and qflow demos.",[],[319],"initial-prompt.md",[321,324],{"src":17,"kind":322,"order":323},"hero",4999,{"src":325,"kind":326,"order":327},"\u002Farchive\u002F2026-q3\u002Fc40-qpixel-editor-full.png","full",9000,[329],{"path":330,"title":331,"image":17,"gallery":332},"archive\u002F2026-q3\u002F2026-04-16-c40-qpixel-editor","Qpixel Editor Embed",[333,335],{"src":17,"alt":334},"The qpixel block-art editor running live inside the design site.",{"src":325,"alt":336},"Qpixel Editor Embed — full page",[],1789151085755]