@ikenga/contract 0.7.0 → 0.9.0

package/dist/canvas/canvas.css

@@ -0,0 +1,579 @@
+/* Ikenga <Canvas> primitive — free-form, pan/zoom/grid-snap widget surface.
+ *
+ * Extracted from the shell home page (design source:
+ * design/shell/concepts/03-screens/16-home.html). Owns the canvas chrome
+ * (surface, grain, stage, item wrapper, top bar, palette) plus the default
+ * item-content styling shared by the home widgets. Theme-aware via the host
+ * document's data-mode attribute — no @media prefers-color-scheme here.
+ *
+ * Tokens (var(--fg), var(--border), …) resolve against whatever stylesheet
+ * the host document loads. Inside the shell that's the global styles.css;
+ * inside a Vite/iframe pkg the consumer must import @ikenga/tokens at entry
+ * (Round 8 / G21) so these custom properties resolve in the sandbox.
+ *
+ * Structural selectors are prefixed `.ikenga-canvas*` so they cannot collide
+ * with shell-global styles; inner content selectors (.w-*, .qrow, .pad-meta,
+ * the greeting/finance helpers) are scoped under `.ikenga-canvas-item` /
+ * `.ikenga-canvas-stage` for the same reason.
+ */
+
+.ikenga-canvas {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	background: radial-gradient(900px 600px at 50% 40%, var(--primary-soft) 0%, var(--bg-base) 70%);
+}
+
+/* Wood-grain dot pattern, pans with the stage. */
+.ikenga-canvas-grain {
+	position: absolute;
+	inset: 0;
+	background-image: radial-gradient(circle, hsla(28, 14%, 22%, 0.55) 1px, transparent 1px);
+	background-size: 28px 28px;
+	opacity: 0.38;
+	pointer-events: none;
+	transition: opacity 180ms ease;
+}
+.ikenga-canvas[data-mode-edit="true"] .ikenga-canvas-grain {
+	opacity: 0.65;
+}
+[data-mode="light"] .ikenga-canvas-grain {
+	background-image: radial-gradient(circle, hsla(28, 14%, 40%, 0.3) 1px, transparent 1px);
+	opacity: 0.35;
+}
+
+/* Stage holds items, translated/scaled as a whole on pan/autofit. */
+.ikenga-canvas-stage {
+	position: absolute;
+	inset: 0;
+	transform-origin: 0 0;
+	transition: transform 260ms cubic-bezier(0.2, 0.6, 0.2, 1);
+	will-change: transform;
+}
+.ikenga-canvas-stage.is-dragging {
+	transition: none;
+}
+
+/* Item geometry. Canvas injects left/top/width/height (or min-height) inline
+   onto the element renderItem returns, so the consumer's own card/greeting
+   element stays the positioned box — DOM shape is identical to pre-extraction.
+   The renderItem element must carry `position: absolute` itself; the home
+   widget/greeting rules below provide it. */
+
+/* Widget card */
+.home-widget {
+	position: absolute;
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.55),
+		0 4px 12px -2px rgba(0, 0, 0, 0.45);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	transition:
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+[data-mode="light"] .home-widget {
+	box-shadow:
+		0 1px 2px rgba(28, 18, 8, 0.08),
+		0 4px 12px -2px rgba(28, 18, 8, 0.1);
+}
+.home-widget:hover {
+	border-color: var(--border-soft);
+}
+.home-widget[data-patina="warm"] {
+	box-shadow:
+		0 4px 12px -2px rgba(0, 0, 0, 0.55),
+		0 0 0 1px hsla(42, 78%, 54%, 0.14),
+		0 0 22px 2px hsla(20, 50%, 34%, 0.12);
+}
+[data-mode="light"] .home-widget[data-patina="warm"] {
+	box-shadow:
+		0 4px 12px -2px rgba(28, 18, 8, 0.1),
+		0 0 0 1px hsla(42, 78%, 42%, 0.18),
+		0 0 22px 2px hsla(20, 50%, 70%, 0.14);
+}
+
+/* Naked greeting — sits on the canvas like text on paper, no card. */
+.home-greeting {
+	position: absolute;
+	padding: 4px 8px;
+	transition:
+		outline-color 120ms ease,
+		background 120ms ease;
+	outline: 1px dashed transparent;
+	outline-offset: 6px;
+	border-radius: 4px;
+}
+.ikenga-canvas[data-mode-edit="true"] .home-greeting {
+	outline-color: var(--border);
+	cursor: grab;
+}
+.ikenga-canvas[data-mode-edit="true"] .home-greeting:hover {
+	outline-color: var(--achievement, hsl(42, 78%, 54%));
+	background: hsla(42, 78%, 54%, 0.04);
+}
+.home-greeting.is-selected {
+	outline-color: var(--achievement, hsl(42, 78%, 54%)) !important;
+}
+.home-greeting h1 {
+	font-family: var(--font-display, ui-serif);
+	font-weight: 500;
+	font-size: 36px;
+	line-height: 1.04;
+	letter-spacing: -0.014em;
+	margin: 0;
+	color: var(--fg);
+}
+.home-greeting h1 em {
+	font-style: italic;
+	font-weight: 400;
+	color: var(--achievement, hsl(42, 78%, 54%));
+}
+.home-greeting .gloss {
+	margin-top: 6px;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 8px;
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	color: var(--fg-faint);
+}
+.home-greeting .gloss .english {
+	font-family: var(--font-display, ui-serif);
+	font-style: italic;
+	font-size: 13px;
+	letter-spacing: 0;
+	color: var(--fg-muted);
+}
+.home-greeting .gloss .sep {
+	opacity: 0.55;
+}
+.home-greeting .shape {
+	margin-top: 14px;
+	font-size: 14px;
+	color: var(--fg-muted);
+	line-height: 1.55;
+	max-width: 36em;
+}
+.home-greeting .quote {
+	margin-top: 18px;
+	padding-top: 14px;
+	border-top: 1px solid var(--border-soft);
+	max-width: 40em;
+}
+.home-greeting .quote-body {
+	font-family: var(--font-display, ui-serif);
+	font-style: italic;
+	font-size: 14px;
+	line-height: 1.55;
+	color: var(--fg);
+}
+.home-greeting .quote-gloss {
+	font-style: normal;
+	font-size: 13px;
+	color: var(--fg-faint);
+	margin-left: 6px;
+}
+.home-greeting .quote-gloss::before {
+	content: "— ";
+}
+.home-greeting .quote-attr {
+	margin-top: 6px;
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10.5px;
+	letter-spacing: 0.04em;
+	color: var(--fg-faint);
+}
+
+.home-widget .w-head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--border-soft);
+	background: linear-gradient(180deg, hsla(28, 14%, 14%, 0.4) 0%, transparent 100%);
+}
+[data-mode="light"] .home-widget .w-head {
+	background: linear-gradient(180deg, hsla(28, 14%, 86%, 0.45) 0%, transparent 100%);
+}
+.home-widget .w-icon {
+	width: 22px;
+	height: 22px;
+	border-radius: 5px;
+	background: var(--bg-raised);
+	display: grid;
+	place-items: center;
+	color: var(--fg-muted);
+}
+.home-widget .w-icon svg {
+	width: 14px;
+	height: 14px;
+}
+.home-widget .w-title {
+	font-family: var(--font-display, ui-serif);
+	font-weight: 500;
+	font-size: 14px;
+	color: var(--fg);
+	line-height: 1;
+}
+.home-widget .w-tag {
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--fg-faint);
+	margin-left: auto;
+}
+.home-widget[data-patina="warm"] .w-tag {
+	color: var(--achievement, hsl(42, 78%, 54%));
+}
+.home-widget .w-body {
+	flex: 1;
+	padding: 12px 16px;
+	font-size: 13px;
+	color: var(--fg-muted);
+	line-height: 1.5;
+	overflow: auto;
+}
+
+.home-widget .w-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 7px 0;
+	border-bottom: 1px solid var(--border-soft);
+}
+.home-widget .w-row:last-child {
+	border-bottom: 0;
+}
+.home-widget .w-dot {
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: var(--fg-faint);
+	flex-shrink: 0;
+}
+.home-widget .w-dot.live {
+	background: var(--live, hsl(150, 48%, 52%));
+	box-shadow: 0 0 0 3px hsla(150, 48%, 52%, 0.16);
+}
+.home-widget .w-dot.warm {
+	background: var(--achievement, hsl(42, 78%, 54%));
+}
+.home-widget .w-dot.danger {
+	background: var(--danger);
+}
+.home-widget .w-dot.agent {
+	background: var(--agent, hsl(265, 52%, 64%));
+}
+.home-widget .w-label {
+	flex: 1;
+	color: var(--fg);
+	font-size: 13px;
+	min-width: 0;
+}
+.home-widget .w-meta {
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10.5px;
+	letter-spacing: 0.04em;
+	color: var(--fg-faint);
+	flex-shrink: 0;
+}
+.home-widget .w-agent-tag {
+	color: var(--fg-faint);
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10.5px;
+	letter-spacing: 0.04em;
+	margin-right: 8px;
+}
+
+/* Edit-mode adornments. */
+.ikenga-canvas[data-mode-edit="true"] .home-widget {
+	border-style: dashed;
+	border-color: var(--border-soft);
+	cursor: grab;
+}
+.ikenga-canvas[data-mode-edit="true"] .home-widget:hover {
+	border-color: var(--achievement, hsl(42, 78%, 54%));
+	box-shadow:
+		0 4px 12px -2px rgba(0, 0, 0, 0.55),
+		0 0 0 1px hsla(42, 78%, 54%, 0.18);
+}
+.ikenga-canvas[data-mode-edit="true"] .home-widget.is-selected {
+	border-color: var(--achievement, hsl(42, 78%, 54%));
+	border-style: solid;
+	box-shadow:
+		0 12px 28px -8px rgba(0, 0, 0, 0.6),
+		0 0 0 1px var(--achievement, hsl(42, 78%, 54%));
+}
+
+/* Top bar — floats over the canvas. */
+.ikenga-canvas-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 44px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 0 16px;
+	background: linear-gradient(180deg, var(--bg-sunken) 0%, transparent 100%);
+	z-index: 5;
+	pointer-events: none;
+}
+.ikenga-canvas-bar > * {
+	pointer-events: auto;
+}
+.ikenga-canvas-bar .crumb {
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 11px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--fg-faint);
+}
+.ikenga-canvas-bar .crumb b {
+	color: var(--fg-muted);
+	font-weight: 500;
+}
+.ikenga-canvas-bar .hint {
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 11px;
+	color: var(--fg-faint);
+	letter-spacing: 0.04em;
+	margin-left: auto;
+}
+.ikenga-canvas-bar .hint .kbd {
+	display: inline-block;
+	padding: 1px 5px;
+	background: var(--bg-surface);
+	border: 1px solid var(--border-soft);
+	border-radius: 3px;
+	color: var(--fg-muted);
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10px;
+}
+.ikenga-canvas-bar .btn {
+	height: 26px;
+	padding: 0 12px;
+	border: 1px solid var(--border);
+	background: var(--bg-surface);
+	color: var(--fg-muted);
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	border-radius: 5px;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+	transition:
+		border-color 120ms ease,
+		color 120ms ease,
+		background 120ms ease;
+}
+.ikenga-canvas-bar .btn:hover {
+	color: var(--fg);
+	border-color: var(--border-soft);
+}
+.ikenga-canvas-bar .btn.is-primary {
+	background: hsla(42, 78%, 54%, 0.14);
+	border-color: hsla(42, 78%, 54%, 0.14);
+	color: var(--achievement, hsl(42, 78%, 54%));
+}
+.ikenga-canvas-bar .btn svg {
+	width: 12px;
+	height: 12px;
+}
+
+/* Palette slide-in. */
+.home-palette {
+	position: absolute;
+	top: 44px;
+	right: 0;
+	bottom: 0;
+	width: 320px;
+	background: var(--bg-sunken);
+	border-left: 1px solid var(--border-soft);
+	display: none;
+	flex-direction: column;
+	z-index: 7;
+	box-shadow: -16px 0 24px -12px rgba(0, 0, 0, 0.5);
+	overflow-y: auto;
+}
+[data-mode="light"] .home-palette {
+	box-shadow: -16px 0 24px -12px rgba(28, 18, 8, 0.14);
+}
+.ikenga-canvas[data-mode-edit="true"] .home-palette {
+	display: flex;
+}
+.home-palette .head {
+	padding: 16px 16px 12px;
+	border-bottom: 1px solid var(--border-soft);
+}
+.home-palette .head .ptag {
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10.5px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--achievement, hsl(42, 78%, 54%));
+	margin-bottom: 4px;
+}
+.home-palette .head h3 {
+	margin: 0;
+	font-family: var(--font-display, ui-serif);
+	font-weight: 500;
+	font-size: 16px;
+	color: var(--fg);
+}
+.home-palette .head p {
+	margin: 4px 0 0;
+	font-size: 12px;
+	color: var(--fg-muted);
+	line-height: 1.5;
+}
+.home-palette .section {
+	padding: 12px 16px 16px;
+}
+.home-palette .section + .section {
+	border-top: 1px solid var(--border-soft);
+}
+.home-palette .section h4 {
+	margin: 0 0 8px;
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--fg-faint);
+	font-weight: 500;
+}
+.home-palette .list {
+	display: grid;
+	gap: 6px;
+}
+.home-palette .item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 8px 12px;
+	background: var(--bg-surface);
+	border: 1px solid var(--border-soft);
+	border-radius: 5px;
+	cursor: grab;
+	transition:
+		border-color 120ms ease,
+		transform 120ms ease;
+}
+.home-palette .item:hover {
+	border-color: var(--achievement, hsl(42, 78%, 54%));
+	transform: translateX(-2px);
+}
+.home-palette .item .pic {
+	width: 24px;
+	height: 24px;
+	background: var(--bg-raised);
+	border-radius: 3px;
+	display: grid;
+	place-items: center;
+	color: var(--fg-muted);
+}
+.home-palette .item .pic svg {
+	width: 13px;
+	height: 13px;
+}
+.home-palette .item .title {
+	font-size: 13px;
+	color: var(--fg);
+}
+.home-palette .item .meta {
+	margin-left: auto;
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10px;
+	letter-spacing: 0.04em;
+	color: var(--fg-faint);
+}
+.home-palette .item.is-placed {
+	opacity: 0.45;
+	cursor: default;
+}
+.home-palette .item.is-placed:hover {
+	border-color: var(--border-soft);
+	transform: none;
+}
+
+/* Quick-actions widget — distinct row shape with kbd column. */
+.home-widget .qrow {
+	display: grid;
+	grid-template-columns: 1fr auto auto;
+	gap: 12px;
+	align-items: center;
+	padding: 7px 0;
+	border-bottom: 1px solid var(--border-soft);
+}
+.home-widget .qrow:last-child {
+	border-bottom: 0;
+}
+.home-widget .qrow > span:first-child {
+	color: var(--fg);
+	font-size: 13px;
+}
+.home-widget .qrow .qmeta {
+	color: var(--fg-faint);
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10.5px;
+}
+.home-widget .qrow .kbd {
+	display: inline-block;
+	padding: 2px 6px;
+	background: var(--bg-raised);
+	border: 1px solid var(--border);
+	border-radius: 3px;
+	color: var(--fg-muted);
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10px;
+}
+
+/* Scratchpad — pull-quote feel. */
+.home-widget.w-pad .w-body {
+	font-family: var(--font-display, ui-serif);
+	font-style: italic;
+	color: var(--fg);
+	font-size: 14px;
+	line-height: 1.6;
+}
+.home-widget.w-pad .pad-meta {
+	margin-top: 12px;
+	font-style: normal;
+	font-family: var(--font-mono, ui-monospace);
+	font-size: 10.5px;
+	letter-spacing: 0.04em;
+	color: var(--fg-faint);
+}
+
+/* Finance — single big figure + spark. */
+.home-widget.w-finance .figure {
+	font-family: var(--font-display, ui-serif);
+	font-weight: 500;
+	font-size: 36px;
+	color: var(--fg);
+	letter-spacing: -0.018em;
+	line-height: 1;
+	margin: 8px 0 12px;
+}
+.home-widget.w-finance .figure em {
+	font-style: normal;
+	color: var(--achievement, hsl(42, 78%, 54%));
+	font-size: 18px;
+	margin-left: 8px;
+	letter-spacing: 0;
+}
+.home-widget.w-finance .spark {
+	height: 32px;
+	margin-top: 4px;
+}

package/dist/canvas/index.d.ts

@@ -0,0 +1,7 @@
+export type { ItemId, Placement, Viewport, ItemRenderState, CanvasProps, CanvasHandle, } from './types.js';
+export { Canvas } from './Canvas.js';
+export { usePanZoom } from './use-pan-zoom.js';
+export { useDragSnap } from './use-drag-snap.js';
+export type { UsePanZoom, UsePanZoomArgs } from './use-pan-zoom.js';
+export type { DragState, UseDragSnap, UseDragSnapArgs } from './use-drag-snap.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,WAAW,EACX,YAAY,GACb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/canvas/index.js

@@ -0,0 +1,4 @@
+export { Canvas } from './Canvas.js';
+export { usePanZoom } from './use-pan-zoom.js';
+export { useDragSnap } from './use-drag-snap.js';
+//# sourceMappingURL=index.js.map

package/dist/canvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/canvas/types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+export type ItemId = string & {
+    readonly __brand: 'ItemId';
+};
+export interface Placement {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface Viewport {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface ItemRenderState {
+    id: ItemId;
+    kind: string;
+    placement: Placement;
+    isSelected: boolean;
+    isEditMode: boolean;
+}
+export interface CanvasProps<T> {
+    items: T[];
+    itemId: (item: T) => ItemId;
+    itemKind: (item: T) => string;
+    layout: Record<ItemId, Placement>;
+    viewport: Viewport;
+    editMode: boolean;
+    selectedId?: ItemId | null;
+    gridSnap?: number;
+    renderItem: (item: T, state: ItemRenderState) => ReactNode;
+    onLayoutChange?: (layout: Record<ItemId, Placement>) => void;
+    onViewportChange?: (viewport: Viewport) => void;
+    onEditModeChange?: (editMode: boolean) => void;
+    onSelectionChange?: (selectedId: ItemId | null) => void;
+    autoFitOnResize?: boolean;
+    className?: string;
+    /** Consumer chrome (top bar, palette) rendered inside the canvas surface. */
+    children?: ReactNode;
+}
+export interface CanvasHandle {
+    autoFit(animate?: boolean): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/canvas/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/canvas/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IAC7D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC"}

package/dist/canvas/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/canvas/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/canvas/types.ts"],"names":[],"mappings":""}

package/dist/canvas/use-drag-snap.d.ts

@@ -0,0 +1,33 @@
+import type { ItemId, Placement } from './types.js';
+export interface DragState {
+    id: ItemId;
+    startMouse: {
+        x: number;
+        y: number;
+    };
+    startPos: {
+        x: number;
+        y: number;
+    };
+}
+export interface UseDragSnapArgs {
+    /** Controlled layout (id → placement). Read at gesture start; never mutated. */
+    layout: Record<ItemId, Placement>;
+    /** Snap lattice in canvas units. Home passes 12, studio passes 24. */
+    gridSnap: number;
+    /** Current viewport scale — drag delta is divided by this. */
+    scale: number;
+    /** Emits the moved layout so the parent can persist / re-render. */
+    onLayoutChange?: (layout: Record<ItemId, Placement>) => void;
+    /** Stage element whose `.is-dragging` class suppresses the pan transition. */
+    stageRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface UseDragSnap {
+    dragState: React.MutableRefObject<DragState | null>;
+    /** Begin dragging `id` from a mousedown at screen (clientX, clientY). */
+    beginDrag: (id: ItemId, clientX: number, clientY: number) => void;
+    /** Is an item drag in flight? */
+    isDragging: () => boolean;
+}
+export declare function useDragSnap(args: UseDragSnapArgs): UseDragSnap;
+//# sourceMappingURL=use-drag-snap.d.ts.map

package/dist/canvas/use-drag-snap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag-snap.d.ts","sourceRoot":"","sources":["../../src/canvas/use-drag-snap.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IAC7D,8EAA8E;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACpD,yEAAyE;IACzE,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,iCAAiC;IACjC,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,CA6D9D"}