@peoplesgrocers/design-canvas

Harness components for Qwik design-exploration apps: an infinite pan/zoom canvas in the style of Figma, plus the chrome that lives on it — sections, labeled artboards, breakpoint frames, variation boards, an anime.js timeline transport with scrubbing and retiming, a timeline lane visualizer, and bezier connectors between canvas elements.

Factored out of the dispatch-sheet design-explorations app, where every component here was grown. These are fixture components for look-and-feel iteration, not product components: some of them accept live anime.js instances through Signal<NoSerialize<...>> props, which can never cross Qwik's serialization boundary. Use them in sketchbook apps; copy winning visuals into products by hand. See AGENTS.md.

Components

All under @peoplesgrocers/design-canvas/qwik:

• DesignCanvas — the pan/zoom viewport. Trackpad pinch/scroll, mouse wheel zoom, drag-pan. The transform is written straight to the DOM on the hot path; no signal is touched per wheel tick.
• DCSection, DCLabeled, DCArtboard — section headings, floating labels, framed artboard cards.
• DCBreakpointFrame — an artboard whose width is driven by a segmented control of breakpoint widths.
• DCVariationBoard — records a design decision: the chosen variation framed above the dashed box of considered alternatives.
• DCAnimationControl, DCAnimatedArtboard — timeline transport for an anime.js instance: play/pause, click-drag scrub, and start/stop inputs that retime the instance via stretch().
• DCTimelineVisualizer — lane view of an anime.js instance: one row per child animation with targets, tweens, eases, and a live playhead. Reads animejs 4.5 private fields; re-check on any animejs upgrade.
• DCConnector — a bezier tying two canvas elements together, measured in layout coordinates so it survives pan/zoom.
• DCHomeLink — back link to the exploration index, placed on the pannable world.

Usage

import {
  DesignCanvas,
  DCSection,
  DCArtboard,
} from "@peoplesgrocers/design-canvas/qwik";

Per-file deep imports also work, and keep the animejs-dependent files (dc-timeline-visualizer) and the qwik-city-dependent file (dc-home-link) out of your module graph if you do not use them:

import { DesignCanvas } from "@peoplesgrocers/design-canvas/qwik/design-canvas";

Peer dependencies: @builder.io/qwik (required), @builder.io/qwik-city (only for DCHomeLink), animejs (only for DCTimelineVisualizer).

How this package is bundled

It is not. The package ships its .tsx sources and the exports map points straight at them; the consuming app's Vite + Qwik optimizer compiles them like its own source files. No build step, no dist, and the Qwik optimizer can split components into QRL segments because it sees the real source. Types resolve to the same .tsx files, so there are no declaration files to generate or drift. Compiling ahead of time would actively break consumers: the optimizer passes a library's plain .js through untouched, so component$ would never be split and lazy loading would silently stop working.

Consume it from a Yarn PnP app with a portal — edits here are picked up live, nothing to rebuild:

"@peoplesgrocers/design-canvas": "portal:../path/to/13.39-qwik-design-canvas-helpers"

Automation

Since nothing is compiled, yarn build IS the typecheck, and it gates everything:

• scripts/hooks/pre-commit — runs yarn build so a commit never carries sources that do not typecheck.
• scripts/hooks/pre-push — rejects unsigned commits.
• nu scripts/bootstrap.nu — wires core.hooksPath after cloning.
• .forgejo/workflows/publish.yml — on a v* tag: install, yarn build, then npm publish of src/ as-is to the peoplesgrocers registry, with a tag/package.json version-drift guard and prerelease dist-tag routing.
• bin/forgejo-ci-helper — trigger/inspect CI runs (needs a secrets.nuon in the repo root).

Commands

• yarn build / yarn tsc — typecheck (the only check; there is no compile)