Qpixel Library

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.

Restructure qpixel from a Nuxt app to a Vue + Vite library component following the qmap/qflow packaging pattern. Create a showcase page on the design site with a live embedded editor.

In:

• Vite library mode build (ESM + UMD, CSS extracted)
• Move source from app/ to src/, fix all imports
• Convert remaining Tailwind utilities to scoped CSS (zero external CSS dependency)
• Export QpixelEditor (full editor) + individual components + composables + utils
• Dev harness for local development
• Design site showcase page at /visualization/qpixel
• Update Playwright tests for new structure

Out:

• Publishing to GitHub Packages (future cycle)
• CLI tools rewrite (stay as-is in tools/)
• New editor features

• @qpoint-io/qpixel package with peerDependencies: { vue: "^3.4.0" } — no other deps
• QpixelEditor component: full editor experience, container-driven sizing (height: 100%)
• Props for configurability: initialRows, initialCols, showLibrary, showPreview
• All 7 components individually exportable for custom compositions
• Design site gets /visualization/qpixel with live demo (matching qmap/qflow pattern)

Restructured qpixel from a Nuxt app into a lean @qpoint-io/qpixel Vue + Vite library matching the qmap/qflow packaging model — Vue as the only peer dependency, no external CSS. Exports the full QpixelEditor (container-driven sizing, initialRows/initialCols/showLibrary/showPreview) plus all seven components, composables, and utils. The design site gained /visualization/qpixel with a live embedded editor alongside the qmap and qflow demos.