@snowcone-app/canvas 0.1.0

package/dist/internals.mjs

@@ -0,0 +1,219 @@
+import { n as C, A as P, C as w, o as I, b as R, I as A, R as W, S as E, m as O, W as H, q as F, s as L, t as z, u as B, v as K, w as m, x as X, y as J, z as _, B as q } from "./ElementFactory-uJTXU-nP.js";
+import { ab as l } from "./HybridHistoryManager-BV6XV0nD.js";
+import { ac as V, ad as Y, ae as j, af as G, aa as U, ag as Q, ah as Z, ai as $, aj as x, ak as D, al as oo, am as ro, an as so, ao, ap as io, aq as eo, ar as no, as as to, at as ho, c as co, au as fo, av as lo, aw as po, ax as go, ay as uo, az as ko, aA as To, aB as yo, aC as Mo, aD as bo, aE as So, aF as vo, aG as Co, aH as Po, aI as wo, aJ as Io, aK as Ro } from "./HybridHistoryManager-BV6XV0nD.js";
+import { I as Wo } from "./ImportManager-CxiaRg1N.js";
+import { A as Oo, a as Ho, C as Fo, S as Lo } from "./CanvasStateV1-ejb4d_LM.js";
+function M(o, r, c) {
+  var e, n;
+  o.save(), o.translate(r.x, r.y), r.rotation && o.rotate(-r.rotation * Math.PI / 180);
+  let i = 1, h = 1;
+  if (r.flipHorizontal && (i = -1), r.flipVertical && (h = -1), (i !== 1 || h !== 1) && o.scale(i, h), r.opacity !== void 0 && r.opacity !== 1 && (o.globalAlpha = r.opacity), r.borderRadius && r.borderRadius > 0) {
+    const a = Math.min(
+      r.borderRadius / 100 * Math.min(r.width, r.height),
+      r.width / 2,
+      r.height / 2
+    );
+    o.beginPath();
+    const s = -r.width / 2, t = -r.height / 2, d = r.width, f = r.height;
+    o.moveTo(s + a, t), o.lineTo(s + d - a, t), o.arcTo(s + d, t, s + d, t + a, a), o.lineTo(s + d, t + f - a), o.arcTo(s + d, t + f, s + d - a, t + f, a), o.lineTo(s + a, t + f), o.arcTo(s, t + f, s, t + f - a, a), o.lineTo(s, t + a), o.arcTo(s, t, s + a, t, a), o.closePath(), o.clip();
+  }
+  if (r.cropX !== void 0 && r.cropWidth !== void 0 ? o.drawImage(
+    c,
+    r.cropX,
+    r.cropY || 0,
+    r.cropWidth,
+    r.cropHeight || c.height,
+    -r.width / 2,
+    -r.height / 2,
+    r.width,
+    r.height
+  ) : o.drawImage(c, -r.width / 2, -r.height / 2, r.width, r.height), o.restore(), (e = r.stroke) != null && e.enabled) {
+    const a = ((n = r.knockoutParts) == null ? void 0 : n.stroke) === !0, s = {
+      x: r.x,
+      y: r.y,
+      rotation: r.rotation,
+      stroke: r.stroke,
+      knockoutParts: r.knockoutParts,
+      transformData: {
+        type: "image",
+        width: r.width,
+        height: r.height,
+        borderRadius: r.borderRadius || 0
+      }
+    };
+    if (a) {
+      const t = o.canvas;
+      let d;
+      if (typeof OffscreenCanvas < "u")
+        d = new OffscreenCanvas(t.width, t.height);
+      else if (typeof document < "u")
+        d = document.createElement("canvas"), d.width = t.width, d.height = t.height;
+      else {
+        l(o, s);
+        return;
+      }
+      const f = d.getContext("2d");
+      if (!f) {
+        l(o, s);
+        return;
+      }
+      l(f, s, { isKnockout: !0 }), o.save(), o.globalCompositeOperation = "destination-out", o.drawImage(d, 0, 0), o.restore();
+    } else
+      l(o, s);
+  }
+}
+function k(o, r) {
+  if (typeof OffscreenCanvas < "u")
+    return new OffscreenCanvas(o, r);
+  const c = document.createElement("canvas");
+  return c.width = o, c.height = r, c;
+}
+function b(o, r) {
+  var e;
+  const c = r.opacity ?? 1, i = !!((e = r.stroke) != null && e.enabled);
+  c < 1 && i ? T(o, r, c) : p(o, r, c);
+}
+function T(o, r, c) {
+  var f;
+  const i = r.transformData, e = (((f = r.stroke) == null ? void 0 : f.width) || 2) + 2, n = Math.ceil(i.width + e * 2), a = Math.ceil(i.height + e * 2), s = k(n, a), t = s.getContext("2d");
+  if (!t) {
+    p(o, r, c);
+    return;
+  }
+  const d = {
+    ...r,
+    x: n / 2,
+    y: a / 2
+  };
+  p(t, d, 1), o.save(), o.translate(r.x, r.y), r.rotation && o.rotate(-r.rotation * Math.PI / 180), o.globalAlpha = c, o.drawImage(s, -n / 2, -a / 2), o.restore();
+}
+function p(o, r, c) {
+  var e;
+  const i = r.transformData, h = i.fillOpacity ?? 1;
+  if (o.save(), o.translate(r.x, r.y), r.rotation && o.rotate(-r.rotation * Math.PI / 180), o.globalAlpha = c * h, o.fillStyle = i.fillColor || "#3b82f6", o.beginPath(), u(o, i), o.fill(), o.restore(), (e = r.stroke) != null && e.enabled) {
+    o.save(), o.translate(r.x, r.y), r.rotation && o.rotate(-r.rotation * Math.PI / 180);
+    const n = r.stroke;
+    o.globalAlpha = c * (n.opacity ?? 1), o.strokeStyle = n.color || "#000000", o.lineWidth = n.width || 2, o.lineCap = n.lineCap || "round", o.lineJoin = n.lineJoin || "round", o.beginPath(), u(o, i), o.stroke(), o.restore();
+  }
+}
+function u(o, r) {
+  const { shapeType: c, width: i, height: h } = r;
+  switch (c) {
+    case "rectangle": {
+      const e = r.borderRadius || 0, n = -i / 2, a = -h / 2;
+      if (e > 0) {
+        const s = Math.min(e / 100 * Math.min(i, h), i / 2, h / 2);
+        o.roundRect(n, a, i, h, s);
+      } else
+        o.rect(n, a, i, h);
+      break;
+    }
+    case "circle": {
+      const e = Math.min(i, h) / 2;
+      o.arc(0, 0, e, 0, Math.PI * 2);
+      break;
+    }
+    case "ellipse": {
+      o.ellipse(0, 0, i / 2, h / 2, 0, 0, Math.PI * 2);
+      break;
+    }
+    case "triangle": {
+      const e = i / 2, n = h / 2;
+      o.moveTo(0, -n), o.lineTo(e, n), o.lineTo(-e, n), o.closePath();
+      break;
+    }
+    case "polygon": {
+      const e = r.sides || 5, n = Math.min(i, h) / 2;
+      for (let a = 0; a < e; a++) {
+        const s = a * 2 * Math.PI / e - Math.PI / 2, t = n * Math.cos(s), d = n * Math.sin(s);
+        a === 0 ? o.moveTo(t, d) : o.lineTo(t, d);
+      }
+      o.closePath();
+      break;
+    }
+    case "star": {
+      const e = r.points || 5, n = Math.min(i, h) / 2, a = n * (r.innerRadius || 0.4);
+      for (let s = 0; s < e * 2; s++) {
+        const t = s * Math.PI / e - Math.PI / 2, d = s % 2 === 0 ? n : a, f = d * Math.cos(t), g = d * Math.sin(t);
+        s === 0 ? o.moveTo(f, g) : o.lineTo(f, g);
+      }
+      o.closePath();
+      break;
+    }
+    case "line": {
+      const e = i / 2, n = h / 2;
+      o.rect(-e, -n, i, h);
+      break;
+    }
+    default:
+      o.rect(-i / 2, -h / 2, i, h);
+  }
+}
+export {
+  C as AlignmentSnapSystem,
+  Oo as AnyElementConfigSchema,
+  Ho as AnyTransformDataSchema,
+  V as ArchTransform,
+  Y as ArtboardManager,
+  P as ArtboardRenderer,
+  j as AscendTransform,
+  w as CanvasRenderer,
+  Fo as CanvasStateV1Schema,
+  G as CircleTransform,
+  U as CustomTransform,
+  I as DEFAULT_MAX_BITMAP_DIMENSION,
+  Q as ElementStore,
+  R as ExportManager,
+  Z as FlagTransform,
+  $ as HybridHistoryManager,
+  Wo as ImportManager,
+  A as InteractionStateMachine,
+  x as LeanTransform,
+  D as LogLevel,
+  W as ResizePipeline,
+  Lo as SerializedArtboardSchema,
+  E as SpacingSystem,
+  O as TransformHandles,
+  oo as WaveTransform,
+  H as WorkerExportManager,
+  ro as applySpaceLayoutRules,
+  so as applyStrokeStyle,
+  ao as buildFontString,
+  io as calculateFixedCornerPosition,
+  eo as calculateResizeHandles,
+  no as calculateRotationHandlePosition,
+  F as clearImageBitmapCache,
+  L as clearMaskCache,
+  z as clearRegisteredBitmapKeys,
+  to as createCirclePath,
+  ho as createImagePath,
+  co as createLogger,
+  fo as createRectPath,
+  lo as createTextPath,
+  po as getFontMetrics,
+  B as getSharedWorkerExportManager,
+  go as hitTestCircle,
+  uo as hitTestRect,
+  K as invalidateMaskCache,
+  ko as logger,
+  To as measureTextWidth,
+  m as removeFromImageBitmapCache,
+  yo as renderCustomTransform,
+  M as renderImageElement,
+  l as renderImageStroke,
+  Mo as renderMultilineText,
+  bo as renderPathStroke,
+  So as renderRichTextFillOnly,
+  b as renderShapeElement,
+  vo as renderTextElement,
+  Co as renderTextFillOnly,
+  Po as renderTextStroke,
+  X as renderWithKnockout,
+  J as renderWithMasks,
+  wo as splitRichTextIntoLines,
+  _ as terminateSharedWorkerExportManager,
+  q as unregisterElementBitmaps,
+  Io as wrapRichTextSpans,
+  Ro as wrapText
+};
+//# sourceMappingURL=internals.mjs.map

package/dist/internals.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.mjs","sources":["../src/rendering/image-renderer.ts","../src/rendering/shape-renderer.ts"],"sourcesContent":["/**\n * Image Renderer - Image element rendering with crop, flip, border radius, and stroke.\n *\n * Works in both main thread and Web Worker (via OffscreenCanvas).\n */\n\nimport type { ImageElementConfig } from '../types/index.js';\nimport { renderImageStroke } from './StrokeRenderer.js';\nimport type { RenderContext, SerializedImageElement } from './renderer-types.js';\n\n/**\n * Render an image element using ImageBitmap\n * Works in both main thread and worker\n */\nexport function renderImageElement(\n  ctx: RenderContext,\n  elementData: SerializedImageElement,\n  imageBitmap: ImageBitmap\n): void {\n  ctx.save();\n\n  // Translate to element position\n  ctx.translate(elementData.x, elementData.y);\n\n  // Apply rotation (negative for clockwise)\n  if (elementData.rotation) {\n    ctx.rotate((-elementData.rotation * Math.PI) / 180);\n  }\n\n  // Apply flip transformations\n  let scaleX = 1;\n  let scaleY = 1;\n  if (elementData.flipHorizontal) scaleX = -1;\n  if (elementData.flipVertical) scaleY = -1;\n  if (scaleX !== 1 || scaleY !== 1) {\n    ctx.scale(scaleX, scaleY);\n  }\n\n  // Apply opacity if specified\n  if (elementData.opacity !== undefined && elementData.opacity !== 1) {\n    ctx.globalAlpha = elementData.opacity;\n  }\n\n  // Apply border radius if specified (borderRadius is stored as percentage 0-100)\n  if (elementData.borderRadius && elementData.borderRadius > 0) {\n    const radius = Math.min(\n      (elementData.borderRadius / 100) * Math.min(elementData.width, elementData.height),\n      elementData.width / 2,\n      elementData.height / 2\n    );\n\n    // Create clipping path for rounded corners\n    ctx.beginPath();\n    const x = -elementData.width / 2;\n    const y = -elementData.height / 2;\n    const w = elementData.width;\n    const h = elementData.height;\n\n    ctx.moveTo(x + radius, y);\n    ctx.lineTo(x + w - radius, y);\n    ctx.arcTo(x + w, y, x + w, y + radius, radius);\n    ctx.lineTo(x + w, y + h - radius);\n    ctx.arcTo(x + w, y + h, x + w - radius, y + h, radius);\n    ctx.lineTo(x + radius, y + h);\n    ctx.arcTo(x, y + h, x, y + h - radius, radius);\n    ctx.lineTo(x, y + radius);\n    ctx.arcTo(x, y, x + radius, y, radius);\n    ctx.closePath();\n    ctx.clip();\n  }\n\n  // Draw the image\n  if (elementData.cropX !== undefined && elementData.cropWidth !== undefined) {\n    // Draw with crop\n    ctx.drawImage(\n      imageBitmap,\n      elementData.cropX,\n      elementData.cropY || 0,\n      elementData.cropWidth,\n      elementData.cropHeight || imageBitmap.height,\n      -elementData.width / 2,\n      -elementData.height / 2,\n      elementData.width,\n      elementData.height\n    );\n  } else {\n    // Draw without crop (centered)\n    ctx.drawImage(imageBitmap, -elementData.width / 2, -elementData.height / 2, elementData.width, elementData.height);\n  }\n\n  ctx.restore();\n\n  // Render stroke if enabled (after restore to apply fresh transforms)\n  if (elementData.stroke?.enabled) {\n    const hasKnockoutStroke = elementData.knockoutParts?.stroke === true;\n\n    const imageConfig: ImageElementConfig = {\n      transformType: 'image',\n      x: elementData.x,\n      y: elementData.y,\n      rotation: elementData.rotation,\n      stroke: elementData.stroke,\n      knockoutParts: elementData.knockoutParts,\n      transformData: {\n        type: 'image',\n        width: elementData.width,\n        height: elementData.height,\n        borderRadius: elementData.borderRadius || 0,\n      },\n    };\n\n    if (hasKnockoutStroke) {\n      // For knockout stroke, use offscreen canvas approach\n      const canvas = ctx.canvas;\n      let offscreen: HTMLCanvasElement | OffscreenCanvas;\n\n      if (typeof OffscreenCanvas !== 'undefined') {\n        offscreen = new OffscreenCanvas(canvas.width, canvas.height);\n      } else if (typeof document !== 'undefined') {\n        offscreen = document.createElement('canvas');\n        offscreen.width = canvas.width;\n        offscreen.height = canvas.height;\n      } else {\n        renderImageStroke(ctx, imageConfig);\n        return;\n      }\n\n      const offCtx = offscreen.getContext('2d');\n      if (!offCtx) {\n        renderImageStroke(ctx, imageConfig);\n        return;\n      }\n\n      // Render the stroke to the offscreen canvas with knockout flag\n      renderImageStroke(offCtx, imageConfig, { isKnockout: true });\n\n      // Composite with destination-out\n      ctx.save();\n      ctx.globalCompositeOperation = 'destination-out';\n      ctx.drawImage(offscreen as CanvasImageSource, 0, 0);\n      ctx.restore();\n    } else {\n      // Normal stroke\n      renderImageStroke(ctx, imageConfig);\n    }\n  }\n}\n","/**\n * Shape Renderer - Shape element rendering (rectangle, circle, ellipse, triangle, etc.)\n *\n * Works in both main thread and Web Worker (via OffscreenCanvas).\n *\n * Opacity strategy: When a shape has both element-level opacity AND a stroke,\n * we render fill+stroke at full opacity on a temporary canvas, then composite\n * the result at the element's opacity. This prevents fill/stroke overlap from\n * compounding (e.g., 50% fill + 50% stroke overlap ≠ 75% opaque).\n */\n\nimport type { RenderContext, SerializedShapeElement } from './renderer-types.js';\n\ntype CanvasLike = HTMLCanvasElement | OffscreenCanvas;\n\nfunction createTempCanvas(width: number, height: number): CanvasLike {\n  if (typeof OffscreenCanvas !== 'undefined') {\n    return new OffscreenCanvas(width, height);\n  }\n  const canvas = document.createElement('canvas');\n  canvas.width = width;\n  canvas.height = height;\n  return canvas;\n}\n\n/**\n * Render a shape element\n * Works in both main thread and worker\n */\nexport function renderShapeElement(ctx: RenderContext, elementData: SerializedShapeElement): void {\n  const elementOpacity = elementData.opacity ?? 1;\n  const hasStroke = !!elementData.stroke?.enabled;\n  const needsOffscreen = elementOpacity < 1 && hasStroke;\n\n  if (needsOffscreen) {\n    // Render fill+stroke at full opacity on a temp canvas, then composite\n    renderShapeWithOffscreen(ctx, elementData, elementOpacity);\n  } else {\n    // No compounding risk — render directly\n    renderShapeDirect(ctx, elementData, elementOpacity);\n  }\n}\n\n/**\n * Render shape via temporary canvas to avoid fill/stroke opacity compounding.\n */\nfunction renderShapeWithOffscreen(\n  ctx: RenderContext,\n  elementData: SerializedShapeElement,\n  elementOpacity: number\n): void {\n  const td = elementData.transformData;\n  const strokeWidth = elementData.stroke?.width || 2;\n  // Pad temp canvas to fit the stroke (strokes extend beyond the shape bounds)\n  const padding = strokeWidth + 2;\n  const offW = Math.ceil(td.width + padding * 2);\n  const offH = Math.ceil(td.height + padding * 2);\n\n  const offCanvas = createTempCanvas(offW, offH);\n  const offCtx = offCanvas.getContext('2d') as RenderContext;\n  if (!offCtx) {\n    // Fallback to direct render\n    renderShapeDirect(ctx, elementData, elementOpacity);\n    return;\n  }\n\n  // Render at center of temp canvas with full opacity (elementOpacity = 1)\n  const tempData: SerializedShapeElement = {\n    ...elementData,\n    x: offW / 2,\n    y: offH / 2,\n    opacity: 1,\n  };\n  renderShapeDirect(offCtx, tempData, 1);\n\n  // Composite temp canvas onto main canvas at element opacity\n  ctx.save();\n\n  // Position: elementData.(x,y) is the shape center, temp canvas center is (offW/2, offH/2)\n  // We need to account for rotation around the element center\n  ctx.translate(elementData.x, elementData.y);\n  if (elementData.rotation) {\n    ctx.rotate((-elementData.rotation * Math.PI) / 180);\n  }\n\n  ctx.globalAlpha = elementOpacity;\n  ctx.drawImage(offCanvas, -offW / 2, -offH / 2);\n  ctx.restore();\n}\n\n/**\n * Render shape directly onto ctx (no offscreen). Used when there's no\n * compounding risk, or as the inner render for the offscreen path.\n */\nfunction renderShapeDirect(\n  ctx: RenderContext,\n  elementData: SerializedShapeElement,\n  elementOpacity: number\n): void {\n  const transformData = elementData.transformData;\n  const fillOpacity = transformData.fillOpacity ?? 1;\n\n  ctx.save();\n  ctx.translate(elementData.x, elementData.y);\n\n  if (elementData.rotation) {\n    ctx.rotate((-elementData.rotation * Math.PI) / 180);\n  }\n\n  // Fill\n  ctx.globalAlpha = elementOpacity * fillOpacity;\n  ctx.fillStyle = transformData.fillColor || '#3b82f6';\n  ctx.beginPath();\n  traceShapePath(ctx, transformData);\n  ctx.fill();\n  ctx.restore();\n\n  // Stroke\n  if (elementData.stroke?.enabled) {\n    ctx.save();\n    ctx.translate(elementData.x, elementData.y);\n    if (elementData.rotation) {\n      ctx.rotate((-elementData.rotation * Math.PI) / 180);\n    }\n\n    const stroke = elementData.stroke;\n    ctx.globalAlpha = elementOpacity * (stroke.opacity ?? 1);\n    ctx.strokeStyle = stroke.color || '#000000';\n    ctx.lineWidth = stroke.width || 2;\n    ctx.lineCap = stroke.lineCap || 'round';\n    ctx.lineJoin = stroke.lineJoin || 'round';\n\n    ctx.beginPath();\n    traceShapePath(ctx, transformData);\n    ctx.stroke();\n    ctx.restore();\n  }\n}\n\n/**\n * Trace the shape path (without fill/stroke) — reusable for both fill and stroke passes.\n */\nfunction traceShapePath(\n  ctx: RenderContext,\n  transformData: SerializedShapeElement['transformData']\n): void {\n  const { shapeType, width, height } = transformData;\n\n  switch (shapeType) {\n    case 'rectangle': {\n      const borderRadius = transformData.borderRadius || 0;\n      const x = -width / 2;\n      const y = -height / 2;\n\n      if (borderRadius > 0) {\n        const radius = Math.min((borderRadius / 100) * Math.min(width, height), width / 2, height / 2);\n        ctx.roundRect(x, y, width, height, radius);\n      } else {\n        ctx.rect(x, y, width, height);\n      }\n      break;\n    }\n\n    case 'circle': {\n      const radius = Math.min(width, height) / 2;\n      ctx.arc(0, 0, radius, 0, Math.PI * 2);\n      break;\n    }\n\n    case 'ellipse': {\n      ctx.ellipse(0, 0, width / 2, height / 2, 0, 0, Math.PI * 2);\n      break;\n    }\n\n    case 'triangle': {\n      const halfWidth = width / 2;\n      const halfHeight = height / 2;\n      ctx.moveTo(0, -halfHeight);\n      ctx.lineTo(halfWidth, halfHeight);\n      ctx.lineTo(-halfWidth, halfHeight);\n      ctx.closePath();\n      break;\n    }\n\n    case 'polygon': {\n      const sides = transformData.sides || 5;\n      const radius = Math.min(width, height) / 2;\n      for (let i = 0; i < sides; i++) {\n        const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;\n        const px = radius * Math.cos(angle);\n        const py = radius * Math.sin(angle);\n        if (i === 0) {\n          ctx.moveTo(px, py);\n        } else {\n          ctx.lineTo(px, py);\n        }\n      }\n      ctx.closePath();\n      break;\n    }\n\n    case 'star': {\n      const points = transformData.points || 5;\n      const outerRadius = Math.min(width, height) / 2;\n      const innerRadius = outerRadius * (transformData.innerRadius || 0.4);\n      for (let i = 0; i < points * 2; i++) {\n        const angle = (i * Math.PI) / points - Math.PI / 2;\n        const r = i % 2 === 0 ? outerRadius : innerRadius;\n        const px = r * Math.cos(angle);\n        const py = r * Math.sin(angle);\n        if (i === 0) {\n          ctx.moveTo(px, py);\n        } else {\n          ctx.lineTo(px, py);\n        }\n      }\n      ctx.closePath();\n      break;\n    }\n\n    case 'line': {\n      const halfWidth = width / 2;\n      const halfHeight = height / 2;\n      ctx.rect(-halfWidth, -halfHeight, width, height);\n      break;\n    }\n\n    default:\n      ctx.rect(-width / 2, -height / 2, width, height);\n  }\n}\n"],"names":["renderImageElement","ctx","elementData","imageBitmap","scaleX","scaleY","radius","x","y","w","h","_a","hasKnockoutStroke","_b","imageConfig","canvas","offscreen","renderImageStroke","offCtx","createTempCanvas","width","height","renderShapeElement","elementOpacity","hasStroke","renderShapeWithOffscreen","renderShapeDirect","td","padding","offW","offH","offCanvas","tempData","transformData","fillOpacity","traceShapePath","stroke","shapeType","borderRadius","halfWidth","halfHeight","sides","i","angle","px","py","points","outerRadius","innerRadius","r"],"mappings":"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"}

package/dist/kits/compose.d.ts

@@ -0,0 +1,69 @@
+import { KitDefinition } from './types.js';
+/** Utility type for deep partial objects */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? U[] : T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Deep-merges overrides into a base kit definition to create a new customized kit.
+ *
+ * Merge behavior by field type:
+ * - **Arrays** (layout slots, capability lists) — union/concatenate with deduplication
+ * - **Objects** (behavior, style, content, features) — shallow merge (override wins per key)
+ * - **Primitives** (name, strings, numbers, booleans) — override replaces base
+ * - **Undefined fields** — base value is kept
+ *
+ * @param base - The base kit to extend (not mutated)
+ * @param overrides - Partial overrides to apply on top
+ * @returns A new KitDefinition with the merged result
+ *
+ * @example
+ * ```ts
+ * const myKit = extendKit(COMPACT_CUSTOMIZER, {
+ *   name: 'my-customizer',
+ *   layout: { slots: { right: ['my-effects-panel'] } },
+ *   capabilities: { effects: ['stroke', 'mask'] },
+ *   behavior: { autoExport: true },
+ * });
+ * ```
+ */
+export declare function extendKit(base: KitDefinition, overrides: DeepPartial<KitDefinition>): KitDefinition;
+/**
+ * Creates a kit definition from minimal input with sensible defaults.
+ *
+ * Only the `name` field is required. All other fields fall back to minimal
+ * defaults suitable for a simple product customizer: canvas-only layout,
+ * text + image elements, contextual toolbar, single selection.
+ *
+ * Internally delegates to `extendKit()` using the minimal defaults as the
+ * base, so the same merge semantics apply (arrays are union-merged, objects
+ * are shallow-merged, etc.).
+ *
+ * @param partial - Kit configuration with at least a `name`.
+ * @returns A complete KitDefinition
+ *
+ * @example
+ * ```ts
+ * const simpleKit = createKit({
+ *   name: 'text-only',
+ *   capabilities: { elements: ['text'] },
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * const proKit = createKit({
+ *   name: 'pro-lite',
+ *   layout: { slots: { left: ['layers-panel'] } },
+ *   capabilities: {
+ *     elements: ['text', 'image', 'shape'],
+ *     effects: ['stroke', 'mask'],
+ *     panels: ['layers', 'effects'],
+ *   },
+ *   behavior: { selection: 'multi', panelMode: 'sidebar' },
+ * });
+ * ```
+ */
+export declare function createKit(partial: {
+    name: string;
+} & DeepPartial<Omit<KitDefinition, 'name'>>): KitDefinition;
+export {};

package/dist/kits/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Kit System - Barrel Export
+ *
+ * The kit system provides pre-configured editor setups for common use cases.
+ * Import from here to access types, presets, and the resolver.
+ *
+ * @example
+ * ```ts
+ * import { resolveKit, COMPACT_CUSTOMIZER, type KitDefinition } from '@snowcone-app/canvas';
+ * ```
+ */
+export type { KitDefinition, KitPresetId, RuntimeTheme } from './types.js';
+export { COMPACT_CUSTOMIZER, PRO_STUDIO, EMBED_ONLY } from './presets.js';
+export { KIT_PRESETS, resolveKit } from './registry.js';
+export { extendKit, createKit } from './compose.js';
+export { validateKit } from './validation.js';
+export type { KitValidationResult } from './validation.js';
+export { registerSection, getSection, getSectionIds, getAllSections, unregisterSection, registerBuiltinSections, registerBuiltinSectionsSync, } from './sections.js';
+export type { SectionConfig, SectionComponent } from './sections.js';
+export { serializeKit, loadKitFromJSON } from './serialization.js';
+export type { KitJSON } from './serialization.js';

package/dist/kits/presets.d.ts

@@ -0,0 +1,40 @@
+import { KitDefinition } from './types.js';
+/**
+ * Compact customizer -- minimal UI for product customization.
+ *
+ * Includes a contextual toolbar and single-selection mode.
+ * Best for e-commerce product customization flows where the user
+ * adds text or uploads an image onto a product.
+ *
+ * @example
+ * ```tsx
+ * <KitRenderer kit={COMPACT_CUSTOMIZER} />
+ * ```
+ */
+export declare const COMPACT_CUSTOMIZER: KitDefinition;
+/**
+ * Pro studio -- full editor with all panels and features.
+ *
+ * Includes layers panel, effects panel, multi-selection, and all
+ * transform/effect types. Best for design professionals or admin
+ * interfaces where full editing power is needed.
+ *
+ * @example
+ * ```tsx
+ * <KitRenderer kit={PRO_STUDIO} />
+ * ```
+ */
+export declare const PRO_STUDIO: KitDefinition;
+/**
+ * Embed only -- canvas with no UI chrome, for embedding in other apps.
+ *
+ * No toolbar, no panels, auto-export enabled. Best for headless
+ * integration where the host app provides all UI and just needs
+ * the canvas rendering engine.
+ *
+ * @example
+ * ```tsx
+ * <KitRenderer kit={EMBED_ONLY} />
+ * ```
+ */
+export declare const EMBED_ONLY: KitDefinition;

package/dist/kits/registry.d.ts

@@ -0,0 +1,33 @@
+import { KitDefinition, KitPresetId } from './types.js';
+/**
+ * Map of all registered kit presets, keyed by their preset ID.
+ *
+ * @example
+ * ```ts
+ * const kit = KIT_PRESETS.get('compact-customizer');
+ * // kit === COMPACT_CUSTOMIZER
+ * ```
+ */
+export declare const KIT_PRESETS: ReadonlyMap<KitPresetId, KitDefinition>;
+/**
+ * Resolve a kit from either a preset ID string or a full KitDefinition.
+ *
+ * This is the primary entry point for consumers. It allows components
+ * like `<KitRenderer>` to accept a `kit` prop that is either a string
+ * shorthand or a fully custom definition.
+ *
+ * @param kit - A preset ID string (e.g., 'compact-customizer') or a full KitDefinition object
+ * @returns The resolved KitDefinition
+ * @throws {Error} If a string is passed that does not match any registered preset
+ *
+ * @example
+ * ```ts
+ * // Using a preset ID
+ * const kit = resolveKit('pro-studio');
+ *
+ * // Using a custom definition (passed through unchanged)
+ * const custom: KitDefinition = { name: 'my-kit', ... };
+ * const kit = resolveKit(custom);
+ * ```
+ */
+export declare function resolveKit(kit: KitPresetId | KitDefinition): KitDefinition;

package/dist/kits/sections.d.ts

@@ -0,0 +1,119 @@
+import { default as React } from 'react';
+/**
+ * Configuration for a registered section.
+ *
+ * Each section maps a string ID to a React component, a display label,
+ * and the layout position where it is typically rendered.
+ */
+/**
+ * Type alias for section components in the registry.
+ *
+ * Section components read their state from context providers,
+ * so they can be rendered with no props: `<Component />`.
+ */
+export type SectionComponent = React.ComponentType<{}>;
+export interface SectionConfig {
+    /**
+     * The React component to render for this section.
+     *
+     * Section components read their state from EditorContext and other context
+     * providers, so they are rendered with no explicit props: `<Component />`.
+     *
+     * If registering a component that has required props (e.g. for direct use),
+     * cast it: `component: MyPanel as SectionComponent`.
+     */
+    component: SectionComponent;
+    /** Human-readable label for UI display (e.g., panel headers, settings) */
+    label: string;
+    /** Optional icon identifier (e.g., an Iconify icon string) */
+    icon?: string;
+    /** The layout position where this section is typically placed */
+    position: 'topbar' | 'left' | 'canvas' | 'right' | 'bottombar';
+}
+/**
+ * Register a section in the global section registry.
+ *
+ * If a section with the same ID is already registered, it will be
+ * silently overwritten. This allows consumers to replace built-in
+ * sections with custom implementations.
+ *
+ * @param id - Unique section identifier (e.g., 'layers-panel')
+ * @param config - Section configuration including component, label, and position
+ */
+export declare function registerSection(id: string, config: SectionConfig): void;
+/**
+ * Retrieve a registered section by ID.
+ *
+ * @param id - The section identifier to look up
+ * @returns The section config if found, or undefined
+ */
+export declare function getSection(id: string): SectionConfig | undefined;
+/**
+ * Get all registered section IDs.
+ *
+ * @returns An array of all registered section ID strings
+ */
+export declare function getSectionIds(): string[];
+/**
+ * Get all registered sections as `[id, config]` pairs.
+ *
+ * Useful for iterating over the full registry to build dynamic layouts,
+ * settings UIs, or debug views.
+ *
+ * @returns An array of `[sectionId, SectionConfig]` tuples
+ *
+ * @example List all registered sections
+ * ```ts
+ * for (const [id, config] of getAllSections()) {
+ *   console.log(`${id}: ${config.label} (${config.position})`);
+ * }
+ * ```
+ */
+export declare function getAllSections(): Array<[string, SectionConfig]>;
+/**
+ * Remove a section from the registry.
+ *
+ * @param id - The section identifier to unregister
+ */
+export declare function unregisterSection(id: string): void;
+/**
+ * Register all built-in sections from the editor's component library.
+ *
+ * This function lazily imports the component modules to avoid circular
+ * dependencies and is idempotent — calling it multiple times has no
+ * additional effect after the first call.
+ *
+ * Built-in sections registered:
+ * - `layers-panel` — LayersPanel (left)
+ * - `effects-panel` — EffectsPanel (right)
+ * - `export-panel` — ExportPanel (right)
+ * - `images-panel` — ImagePanel (right)
+ * - `glyph-panel` — GlyphPanel (right)
+ * - `artboard-tabs` — ArtboardTabs (topbar)
+ * - `contextual-toolbar` — ContextualToolbars (topbar)
+ * - `zoom-controls` — ZoomControls (bottombar)
+ * - `menu-button` — MenuButton (topbar)
+ * - `crop-panel` — CropPanel (right)
+ */
+export declare function registerBuiltinSections(): Promise<void>;
+/**
+ * Synchronously register built-in sections using direct component references.
+ *
+ * Unlike `registerBuiltinSections()` which uses lazy imports, this function
+ * requires that components be passed in directly. Use this when you have
+ * already imported the components and want to avoid async registration.
+ *
+ * @param components - Object mapping section IDs to their component references
+ */
+export declare function registerBuiltinSectionsSync(components: {
+    LayersPanel: SectionComponent;
+    EffectsPanel: SectionComponent;
+    ExportPanel: SectionComponent;
+    ImagePanel: SectionComponent;
+    GlyphPanel: SectionComponent;
+    ArtboardTabs: SectionComponent;
+    ContextualToolbars: SectionComponent;
+    ZoomControls: SectionComponent;
+    MenuButton: SectionComponent;
+    CropPanel: SectionComponent;
+}): void;

package/dist/kits/serialization.d.ts

@@ -0,0 +1,78 @@
+import { EditorCapabilities } from '../types/capabilities.js';
+import { KitDefinition, KitPresetId } from './types.js';
+/**
+ * JSON-safe representation of a KitDefinition.
+ *
+ * When `extends` is provided, the kit is built by resolving the base
+ * preset and applying the remaining fields as overrides. When `extends`
+ * is omitted, a new kit is created from scratch using `createKit`.
+ */
+export interface KitJSON {
+    /** Kit name (required) */
+    name: string;
+    /** Optional base preset to extend from */
+    extends?: KitPresetId;
+    /** Partial capability overrides */
+    capabilities?: Partial<EditorCapabilities>;
+    /** Partial behavior overrides */
+    behavior?: Partial<KitDefinition['behavior']>;
+    /** Partial layout overrides */
+    layout?: Partial<KitDefinition['layout']>;
+    /** Partial style overrides */
+    style?: Partial<KitDefinition['style']>;
+    /** Content configuration */
+    content?: KitDefinition['content'];
+}
+/**
+ * Serialize a KitDefinition to a JSON-safe format.
+ *
+ * The resulting object can be safely passed to `JSON.stringify()` and
+ * later restored with `loadKitFromJSON()`. All fields from the kit
+ * are included in the output for a complete, self-contained representation.
+ *
+ * @param kit - The KitDefinition to serialize
+ * @returns A JSON-safe KitJSON object
+ *
+ * @example
+ * ```ts
+ * const json = serializeKit(myKit);
+ * localStorage.setItem('kit', JSON.stringify(json));
+ * ```
+ */
+export declare function serializeKit(kit: KitDefinition): KitJSON;
+/**
+ * Load a KitDefinition from a JSON representation.
+ *
+ * If `extends` is provided, the corresponding preset is resolved and the
+ * remaining fields are applied as overrides via `extendKit`. If `extends`
+ * is omitted, a new kit is created from scratch via `createKit`.
+ *
+ * The result is validated with `validateKit`. If validation produces
+ * errors (fatal issues), an error is thrown. Warnings are logged to
+ * the console but do not prevent loading.
+ *
+ * @param json - The KitJSON object to deserialize
+ * @returns A complete, validated KitDefinition
+ * @throws {Error} If the kit name is missing
+ * @throws {Error} If a preset ID in `extends` is invalid
+ * @throws {Error} If the resulting kit fails validation (has errors)
+ *
+ * @example Extend a preset
+ * ```ts
+ * const kit = loadKitFromJSON({
+ *   name: 'my-pro-variant',
+ *   extends: 'pro-studio',
+ *   behavior: { autoExport: true },
+ * });
+ * ```
+ *
+ * @example Create from scratch
+ * ```ts
+ * const kit = loadKitFromJSON({
+ *   name: 'minimal-editor',
+ *   capabilities: { elements: ['text'] },
+ *   behavior: { toolbar: 'none', selection: 'single', panelMode: 'inline', onEmptyClick: 'noop', autoExport: false },
+ * });
+ * ```
+ */
+export declare function loadKitFromJSON(json: KitJSON): KitDefinition;