@hilum/designer-canvas 0.1.1

package/dist/index.js

@@ -0,0 +1,1190 @@
+import { createContext, useContext, useMemo, useReducer, useRef, useEffect, useState, useCallback } from 'react';
+import { ShellProvider, useShellContext, useHistory, DesignerToolbarButton, DesignerToolbarGroup, DesignerToolbarSeparator } from '@hilum/designer';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { cn } from '@hilum/ui';
+import { Plus, AlignLeft, AlignCenter, AlignRight, AlignStartHorizontal, AlignVerticalJustifyCenter, AlignEndHorizontal, AlignHorizontalSpaceAround, AlignVerticalSpaceAround, ChevronsUp, ArrowUp, ArrowDown, ChevronsDown, Trash2, Copy, Group, Ungroup, Unlock, Lock, EyeOff, Eye, MousePointer2, Hand, FlipHorizontal, FlipVertical, Undo2, Redo2, Minus, Maximize2 } from 'lucide-react';
+
+// src/context/state.ts
+function createInitialState(partial = {}) {
+  return {
+    layers: [],
+    zoom: 1,
+    pan: { x: 0, y: 0 },
+    frameSize: { width: 800, height: 600 },
+    artboardName: "Artboard",
+    artboardColor: "#ffffff",
+    artboardOpacity: 1,
+    artboardClipContent: true,
+    gridContainer: void 0,
+    copiedLayers: null,
+    uiColor: "light",
+    canvasColor: "light",
+    accentColor: "var(--brand-primary)",
+    layerTypes: [],
+    readOnly: false,
+    ...partial
+  };
+}
+
+// src/context/reducer.ts
+function canvasReducer(state, action) {
+  if (state.readOnly && action.type !== "SET_READ_ONLY" && !isReadActionAllowed(action.type)) {
+    return state;
+  }
+  switch (action.type) {
+    /* ---------------- Layer CRUD ---------------- */
+    case "SET_LAYERS":
+      return { ...state, layers: action.payload };
+    case "ADD_LAYER":
+      return { ...state, layers: [...state.layers, action.payload] };
+    case "UPDATE_LAYER": {
+      const { id, updates } = action.payload;
+      return {
+        ...state,
+        layers: state.layers.map((l) => l.id === id ? { ...l, ...updates } : l)
+      };
+    }
+    case "UPDATE_LAYERS": {
+      const map = new Map(action.payload.map((u) => [u.id, u.updates]));
+      return {
+        ...state,
+        layers: state.layers.map((l) => map.has(l.id) ? { ...l, ...map.get(l.id) } : l)
+      };
+    }
+    case "DELETE_LAYER":
+      return { ...state, layers: state.layers.filter((l) => l.id !== action.payload) };
+    case "DELETE_LAYERS": {
+      const ids = new Set(action.payload);
+      return { ...state, layers: state.layers.filter((l) => !ids.has(l.id)) };
+    }
+    case "REORDER_LAYERS": {
+      const { fromIndex, toIndex } = action.payload;
+      const next = [...state.layers];
+      const [moved] = next.splice(fromIndex, 1);
+      if (moved) next.splice(toIndex, 0, moved);
+      return { ...state, layers: next };
+    }
+    /* ---------------- Selection-driven mutations ---------------- */
+    case "NUDGE_LAYERS": {
+      const { targetLayerIds, dx, dy } = action.payload;
+      const ids = new Set(targetLayerIds);
+      return {
+        ...state,
+        layers: state.layers.map(
+          (l) => ids.has(l.id) && !l.isLocked ? { ...l, x: l.x + dx, y: l.y + dy } : l
+        )
+      };
+    }
+    case "ALIGN_LAYERS":
+      return {
+        ...state,
+        layers: alignLayers(state.layers, action.payload.targetLayerIds, action.payload.align)
+      };
+    case "DISTRIBUTE_LAYERS":
+      return {
+        ...state,
+        layers: distributeLayers(state.layers, action.payload.targetLayerIds, action.payload.axis)
+      };
+    case "GROUP_LAYERS": {
+      const { targetLayerIds, groupId } = action.payload;
+      const ids = new Set(targetLayerIds);
+      return {
+        ...state,
+        layers: state.layers.map((l) => ids.has(l.id) ? { ...l, groupId } : l)
+      };
+    }
+    case "UNGROUP_LAYERS": {
+      const ids = new Set(action.payload.targetLayerIds);
+      return {
+        ...state,
+        layers: state.layers.map((l) => {
+          if (!ids.has(l.id)) return l;
+          const { groupId: _gid, ...rest } = l;
+          return rest;
+        })
+      };
+    }
+    case "ARRANGE_LAYERS":
+      return {
+        ...state,
+        layers: arrangeLayers(state.layers, action.payload.targetLayerIds, action.payload.mode)
+      };
+    case "TRANSFORM_LAYERS": {
+      const { targetLayerIds, mode } = action.payload;
+      const ids = new Set(targetLayerIds);
+      return {
+        ...state,
+        layers: state.layers.map((l) => {
+          if (!ids.has(l.id) || l.isLocked) return l;
+          const data = l.data;
+          const flipKey = mode === "flip-h" ? "_flipX" : "_flipY";
+          const current = data[flipKey] ?? 1;
+          return { ...l, data: { ...data, [flipKey]: -current } };
+        })
+      };
+    }
+    case "SET_LAYER_PROPERTY": {
+      const { targetLayerIds, key, value } = action.payload;
+      const ids = new Set(targetLayerIds);
+      return {
+        ...state,
+        layers: state.layers.map(
+          (l) => ids.has(l.id) ? { ...l, [key]: value } : l
+        )
+      };
+    }
+    /* ---------------- Viewport ---------------- */
+    case "SET_ZOOM":
+      return { ...state, zoom: clamp(action.payload, 0.05, 32) };
+    case "SET_PAN":
+      return { ...state, pan: action.payload };
+    case "SET_FRAME_SIZE":
+      return { ...state, frameSize: action.payload };
+    /* ---------------- Artboard ---------------- */
+    case "SET_ARTBOARD_NAME":
+      return { ...state, artboardName: action.payload };
+    case "SET_ARTBOARD_COLOR":
+      return { ...state, artboardColor: action.payload };
+    case "SET_ARTBOARD_OPACITY":
+      return { ...state, artboardOpacity: clamp(action.payload, 0, 1) };
+    case "SET_ARTBOARD_CLIP_CONTENT":
+      return { ...state, artboardClipContent: action.payload };
+    /* ---------------- Grid ---------------- */
+    case "SET_GRID_CONTAINER":
+      return { ...state, gridContainer: action.payload };
+    case "CLEAR_GRID_CONTAINER":
+      return { ...state, gridContainer: void 0 };
+    case "UPDATE_GRID_CONTAINER":
+      return state.gridContainer ? { ...state, gridContainer: { ...state.gridContainer, ...action.payload } } : state;
+    /* ---------------- Theme ---------------- */
+    case "SET_UI_COLOR":
+      return { ...state, uiColor: action.payload };
+    case "SET_CANVAS_COLOR":
+      return { ...state, canvasColor: action.payload };
+    case "SET_ACCENT_COLOR":
+      return { ...state, accentColor: action.payload };
+    /* ---------------- Clipboard ---------------- */
+    case "COPY_LAYERS": {
+      const ids = new Set(action.payload.targetLayerIds);
+      const copied = state.layers.filter((l) => ids.has(l.id)).map(deepClone);
+      return { ...state, copiedLayers: copied };
+    }
+    case "PASTE_LAYERS": {
+      if (!state.copiedLayers || state.copiedLayers.length === 0) return state;
+      const offset = action.payload?.offset ?? { dx: 16, dy: 16 };
+      const fresh = state.copiedLayers.map((l) => ({
+        ...deepClone(l),
+        id: generateId(),
+        x: l.x + offset.dx,
+        y: l.y + offset.dy
+      }));
+      return { ...state, layers: [...state.layers, ...fresh] };
+    }
+    case "CLEAR_CLIPBOARD":
+      return { ...state, copiedLayers: null };
+    /* ---------------- Read-only ---------------- */
+    case "SET_READ_ONLY":
+      return { ...state, readOnly: action.payload };
+    default:
+      return state;
+  }
+}
+function isReadActionAllowed(type) {
+  return type === "SET_ZOOM" || type === "SET_PAN" || type === "SET_UI_COLOR" || type === "SET_CANVAS_COLOR";
+}
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function deepClone(v) {
+  if (typeof structuredClone === "function") return structuredClone(v);
+  return JSON.parse(JSON.stringify(v));
+}
+function generateId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto)
+    return crypto.randomUUID();
+  return `layer-${Math.random().toString(36).slice(2, 11)}`;
+}
+function alignLayers(layers, ids, align) {
+  const idSet = new Set(ids);
+  const targets = layers.filter((l) => idSet.has(l.id));
+  if (targets.length < 2) return layers;
+  let value = 0;
+  switch (align) {
+    case "left":
+      value = Math.min(...targets.map((l) => l.x));
+      break;
+    case "right": {
+      const maxRight = Math.max(...targets.map((l) => l.x + l.width));
+      return layers.map((l) => idSet.has(l.id) ? { ...l, x: maxRight - l.width } : l);
+    }
+    case "center": {
+      const minX = Math.min(...targets.map((l) => l.x));
+      const maxX = Math.max(...targets.map((l) => l.x + l.width));
+      const center = (minX + maxX) / 2;
+      return layers.map((l) => idSet.has(l.id) ? { ...l, x: center - l.width / 2 } : l);
+    }
+    case "top":
+      value = Math.min(...targets.map((l) => l.y));
+      return layers.map((l) => idSet.has(l.id) ? { ...l, y: value } : l);
+    case "bottom": {
+      const maxBottom = Math.max(...targets.map((l) => l.y + l.height));
+      return layers.map((l) => idSet.has(l.id) ? { ...l, y: maxBottom - l.height } : l);
+    }
+    case "middle": {
+      const minY = Math.min(...targets.map((l) => l.y));
+      const maxY = Math.max(...targets.map((l) => l.y + l.height));
+      const middle = (minY + maxY) / 2;
+      return layers.map((l) => idSet.has(l.id) ? { ...l, y: middle - l.height / 2 } : l);
+    }
+  }
+  return layers.map((l) => idSet.has(l.id) ? { ...l, x: value } : l);
+}
+function distributeLayers(layers, ids, axis) {
+  const idSet = new Set(ids);
+  const targets = layers.filter((l) => idSet.has(l.id));
+  if (targets.length < 3) return layers;
+  if (axis === "horizontal") {
+    const sorted = [...targets].sort((a, b) => a.x - b.x);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    const totalSpan = last.x + last.width - first.x;
+    const totalWidth = sorted.reduce((s, l) => s + l.width, 0);
+    const gap = (totalSpan - totalWidth) / (sorted.length - 1);
+    let cursor = first.x;
+    const updates = /* @__PURE__ */ new Map();
+    for (const l of sorted) {
+      updates.set(l.id, cursor);
+      cursor += l.width + gap;
+    }
+    return layers.map((l) => updates.has(l.id) ? { ...l, x: updates.get(l.id) } : l);
+  } else {
+    const sorted = [...targets].sort((a, b) => a.y - b.y);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    const totalSpan = last.y + last.height - first.y;
+    const totalHeight = sorted.reduce((s, l) => s + l.height, 0);
+    const gap = (totalSpan - totalHeight) / (sorted.length - 1);
+    let cursor = first.y;
+    const updates = /* @__PURE__ */ new Map();
+    for (const l of sorted) {
+      updates.set(l.id, cursor);
+      cursor += l.height + gap;
+    }
+    return layers.map((l) => updates.has(l.id) ? { ...l, y: updates.get(l.id) } : l);
+  }
+}
+function arrangeLayers(layers, ids, mode) {
+  const idSet = new Set(ids);
+  const indices = layers.map((l, i) => idSet.has(l.id) ? i : -1).filter((i) => i >= 0);
+  if (indices.length === 0) return layers;
+  switch (mode) {
+    case "front": {
+      const targets = indices.map((i) => layers[i]);
+      const others = layers.filter((l) => !idSet.has(l.id));
+      return [...others, ...targets];
+    }
+    case "back": {
+      const targets = indices.map((i) => layers[i]);
+      const others = layers.filter((l) => !idSet.has(l.id));
+      return [...targets, ...others];
+    }
+    case "forward": {
+      const next = [...layers];
+      for (let i = indices.length - 1; i >= 0; i--) {
+        const idx = indices[i];
+        if (idx < next.length - 1) {
+          [next[idx], next[idx + 1]] = [next[idx + 1], next[idx]];
+        }
+      }
+      return next;
+    }
+    case "backward": {
+      const next = [...layers];
+      for (let i = 0; i < indices.length; i++) {
+        const idx = indices[i];
+        if (idx > 0) {
+          [next[idx], next[idx - 1]] = [next[idx - 1], next[idx]];
+        }
+      }
+      return next;
+    }
+  }
+}
+var __test = { alignLayers, distributeLayers, arrangeLayers };
+var CanvasContext = createContext(null);
+function useCanvasContext() {
+  const ctx = useContext(
+    CanvasContext
+  );
+  if (!ctx) {
+    throw new Error(
+      "@hilum/designer-canvas: useCanvasContext must be used inside <Designer> / <CanvasProvider>."
+    );
+  }
+  return ctx;
+}
+var CanvasContextProvider = CanvasContext.Provider;
+function CanvasProvider({
+  initial,
+  services = {},
+  readOnly = false,
+  onChange,
+  children
+}) {
+  const initialState = useMemo(
+    () => createInitialState({ ...initial, readOnly }),
+    []
+    // initial state captured once at mount
+  );
+  const reducer = canvasReducer;
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const revisionRef = useRef(0);
+  if (state !== initialState) revisionRef.current += 0;
+  const resolveKind = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const l of state.layers) map.set(l.id, l.type);
+    return (id) => map.get(id);
+  }, [state.layers]);
+  if (onChange) {
+    onChange(state);
+  }
+  const value = useMemo(
+    () => ({ state, dispatch, services, revision: revisionRef.current }),
+    [state, dispatch, services]
+  );
+  return /* @__PURE__ */ jsx(ShellProvider, { readOnly, resolveKind, children: /* @__PURE__ */ jsx(CanvasContextProvider, { value, children }) });
+}
+var RendererContext = createContext({});
+function RendererProvider({ renderers, children }) {
+  const value = useMemo(() => renderers, [renderers]);
+  return /* @__PURE__ */ jsx(RendererContext.Provider, { value, children });
+}
+function useLayerRenderer(type) {
+  return useContext(RendererContext)[type];
+}
+function useAllRenderers() {
+  return useContext(RendererContext);
+}
+function Designer({
+  initial,
+  renderers = {},
+  services = {},
+  readOnly,
+  onChange,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    CanvasProvider,
+    {
+      initial,
+      services,
+      readOnly,
+      onChange,
+      children: /* @__PURE__ */ jsx(RendererProvider, { renderers, children })
+    }
+  );
+}
+function DesignerCanvas({ className, children }) {
+  const { state, dispatch } = useCanvasContext();
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const onWheel = (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const factor = Math.exp(-e.deltaY * 0.01);
+        const next = Math.min(32, Math.max(0.05, state.zoom * factor));
+        dispatch({ type: "SET_ZOOM", payload: next });
+      } else {
+        e.preventDefault();
+        dispatch({
+          type: "SET_PAN",
+          payload: { x: state.pan.x - e.deltaX, y: state.pan.y - e.deltaY }
+        });
+      }
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  }, [state.zoom, state.pan, dispatch]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("relative flex-1 overflow-hidden bg-taupe-100 select-none", className),
+      "data-canvas-root": true,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 origin-center",
+          style: {
+            transform: `translate(${state.pan.x}px, ${state.pan.y}px) scale(${state.zoom})`,
+            transformOrigin: "50% 50%"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function useDragInteraction({ layerId, scale = 1 }) {
+  const { state, dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  const [dragging, setDragging] = useState(false);
+  const startRef = useRef(null);
+  const onPointerDown = useCallback(
+    (e) => {
+      if (state.readOnly) return;
+      const layer = state.layers.find((l) => l.id === layerId);
+      if (!layer || layer.isLocked) return;
+      const ids = selectedIds.includes(layerId) ? selectedIds : [layerId];
+      const initial = /* @__PURE__ */ new Map();
+      for (const id of ids) {
+        const l = state.layers.find((x) => x.id === id);
+        if (l) initial.set(id, { x: l.x, y: l.y });
+      }
+      startRef.current = { pointerX: e.clientX, pointerY: e.clientY, initial };
+      setDragging(true);
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [state, selectedIds, layerId]
+  );
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e) => {
+      const start = startRef.current;
+      if (!start) return;
+      let dx = (e.clientX - start.pointerX) * scale;
+      let dy = (e.clientY - start.pointerY) * scale;
+      if (e.shiftKey) {
+        if (Math.abs(dx) > Math.abs(dy)) dy = 0;
+        else dx = 0;
+      }
+      const updates = [];
+      start.initial.forEach((origin, id) => {
+        updates.push({ id, updates: { x: origin.x + dx, y: origin.y + dy } });
+      });
+      dispatch({ type: "UPDATE_LAYERS", payload: updates });
+    };
+    const onUp = () => {
+      startRef.current = null;
+      setDragging(false);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [dragging, dispatch, scale]);
+  return { dragging, onPointerDown };
+}
+function LayerView({ layer, staticMode = false }) {
+  const { state } = useCanvasContext();
+  const { selectedIds, setSelectedIds, readOnly } = useShellContext();
+  const Renderer = useLayerRenderer(layer.type);
+  const { onPointerDown } = useDragInteraction({
+    layerId: layer.id,
+    scale: 1 / state.zoom
+  });
+  const selected = selectedIds.includes(layer.id);
+  const isVisible = layer.isVisible !== false;
+  if (!isVisible) return null;
+  const transform = `rotate(${layer.rotation ?? 0}deg)`;
+  const cursor = layer.isLocked ? "default" : "move";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-layer-id": layer.id,
+      onPointerDown: staticMode ? void 0 : (e) => {
+        if (readOnly) return;
+        if (e.button !== 0) return;
+        if (!selected) {
+          setSelectedIds(e.shiftKey ? [...selectedIds, layer.id] : [layer.id]);
+        }
+        onPointerDown(e);
+      },
+      className: cn("absolute", !staticMode && "cursor-move", layer.isLocked && "cursor-default"),
+      style: {
+        left: layer.x,
+        top: layer.y,
+        width: layer.width,
+        height: layer.height,
+        opacity: layer.opacity ?? 1,
+        transform,
+        cursor: staticMode ? "default" : cursor
+      },
+      children: Renderer ? /* @__PURE__ */ jsx(
+        Renderer,
+        {
+          layer,
+          ctx: { selected, zoom: state.zoom, readOnly: readOnly || staticMode }
+        }
+      ) : /* @__PURE__ */ jsx(FallbackRenderer, { layer })
+    }
+  );
+}
+function FallbackRenderer({ layer }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "size-full flex items-center justify-center bg-white border border-dashed border-taupe-300 caption text-taupe-400",
+      title: `No renderer registered for type "${layer.type}"`,
+      children: layer.type
+    }
+  );
+}
+function LayerSelectionOverlay() {
+  const { state } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  if (selectedIds.length === 0) return null;
+  const ids = new Set(selectedIds);
+  const selected = state.layers.filter((l) => ids.has(l.id));
+  return /* @__PURE__ */ jsx(Fragment, { children: selected.map((l) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute pointer-events-none",
+      style: {
+        left: l.x,
+        top: l.y,
+        width: l.width,
+        height: l.height,
+        transform: `rotate(${l.rotation ?? 0}deg)`,
+        outline: `1.5px solid ${state.accentColor}`,
+        outlineOffset: -1
+      },
+      "aria-hidden": true
+    },
+    l.id
+  )) });
+}
+function MarqueeOverlay({ containerRef }) {
+  const { state } = useCanvasContext();
+  const { setSelectedIds, readOnly } = useShellContext();
+  const [box, setBox] = useState(null);
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node || readOnly) return;
+    let start = null;
+    const onDown = (e) => {
+      if (e.target !== node) return;
+      if (e.button !== 0) return;
+      const rect = node.getBoundingClientRect();
+      start = {
+        x: (e.clientX - rect.left) / rect.width * state.frameSize.width,
+        y: (e.clientY - rect.top) / rect.height * state.frameSize.height
+      };
+      setBox({ x: start.x, y: start.y, w: 0, h: 0 });
+    };
+    const onMove = (e) => {
+      if (!start) return;
+      const rect = node.getBoundingClientRect();
+      const cx = (e.clientX - rect.left) / rect.width * state.frameSize.width;
+      const cy = (e.clientY - rect.top) / rect.height * state.frameSize.height;
+      setBox({
+        x: Math.min(start.x, cx),
+        y: Math.min(start.y, cy),
+        w: Math.abs(cx - start.x),
+        h: Math.abs(cy - start.y)
+      });
+    };
+    const onUp = (e) => {
+      if (!start || !box) {
+        start = null;
+        setBox(null);
+        return;
+      }
+      const x0 = box.x;
+      const y0 = box.y;
+      const x1 = box.x + box.w;
+      const y1 = box.y + box.h;
+      const intersects = state.layers.filter((l) => {
+        const lx0 = l.x;
+        const ly0 = l.y;
+        const lx1 = l.x + l.width;
+        const ly1 = l.y + l.height;
+        return lx0 < x1 && lx1 > x0 && ly0 < y1 && ly1 > y0;
+      });
+      const ids = intersects.map((l) => l.id);
+      if (e.shiftKey) {
+        setSelectedIds((prev) => Array.from(/* @__PURE__ */ new Set([...prev, ...ids])));
+      } else {
+        setSelectedIds(ids);
+      }
+      start = null;
+      setBox(null);
+    };
+    node.addEventListener("pointerdown", onDown);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    return () => {
+      node.removeEventListener("pointerdown", onDown);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+  }, [containerRef, readOnly, state.frameSize, state.layers, setSelectedIds, box]);
+  if (!box || box.w < 2 && box.h < 2) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute pointer-events-none",
+      style: {
+        left: box.x,
+        top: box.y,
+        width: box.w,
+        height: box.h,
+        background: "color-mix(in srgb, var(--brand-primary) 10%, transparent)",
+        outline: "1px solid var(--brand-primary)"
+      },
+      "aria-hidden": true
+    }
+  );
+}
+function GridOverlay() {
+  const { state } = useCanvasContext();
+  const { frameSize, gridContainer } = state;
+  if (!gridContainer) return null;
+  const { cols, rows, gap, padding } = gridContainer;
+  const cellW = (frameSize.width - padding * 2 - gap * (cols - 1)) / cols;
+  const cellH = (frameSize.height - padding * 2 - gap * (rows - 1)) / rows;
+  const lines = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      lines.push({
+        x: padding + c * (cellW + gap),
+        y: padding + r * (cellH + gap),
+        w: cellW,
+        h: cellH
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "absolute inset-0 pointer-events-none",
+      width: frameSize.width,
+      height: frameSize.height,
+      "aria-hidden": true,
+      children: lines.map((cell, i) => /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: cell.x,
+          y: cell.y,
+          width: cell.w,
+          height: cell.h,
+          fill: "none",
+          stroke: "var(--brand-primary)",
+          strokeOpacity: 0.18,
+          strokeDasharray: "3 3",
+          strokeWidth: 1
+        },
+        i
+      ))
+    }
+  );
+}
+function DesignerFrame({
+  className,
+  hideSelectionOverlay = false,
+  hideMarquee = false,
+  showGrid = false,
+  children
+}) {
+  const { state } = useCanvasContext();
+  const { setSelectedIds } = useShellContext();
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onPointerDown: (e) => {
+        if (e.target === ref.current) setSelectedIds([]);
+      },
+      className: cn("relative shadow-elevated", className),
+      style: {
+        width: state.frameSize.width,
+        height: state.frameSize.height,
+        background: state.artboardColor,
+        opacity: state.artboardOpacity,
+        overflow: state.artboardClipContent ? "hidden" : "visible"
+      },
+      "data-frame": true,
+      children: [
+        showGrid && /* @__PURE__ */ jsx(GridOverlay, {}),
+        state.layers.map((l) => /* @__PURE__ */ jsx(LayerView, { layer: l }, l.id)),
+        !hideSelectionOverlay && /* @__PURE__ */ jsx(LayerSelectionOverlay, {}),
+        !hideMarquee && /* @__PURE__ */ jsx(MarqueeOverlay, { containerRef: ref }),
+        children
+      ]
+    }
+  );
+}
+function DesignerStaticFrame({ className, width, height }) {
+  const { state } = useCanvasContext();
+  const w = width ?? state.frameSize.width;
+  const h = height ?? state.frameSize.height;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative", className),
+      style: {
+        width: w,
+        height: h,
+        background: state.artboardColor,
+        opacity: state.artboardOpacity,
+        overflow: state.artboardClipContent ? "hidden" : "visible"
+      },
+      "data-static-frame": true,
+      children: state.layers.map((l) => /* @__PURE__ */ jsx(LayerView, { layer: l, staticMode: true }, l.id))
+    }
+  );
+}
+function useLayers() {
+  return useCanvasContext().state.layers;
+}
+function useLayer(id) {
+  const layers = useLayers();
+  return useMemo(() => layers.find((l) => l.id === id), [layers, id]);
+}
+function useSelectedLayerIds() {
+  return useShellContext().selectedIds;
+}
+function useSelectedLayers() {
+  const ids = useSelectedLayerIds();
+  const layers = useLayers();
+  return useMemo(() => layers.filter((l) => ids.includes(l.id)), [layers, ids]);
+}
+function useSelectedLayer() {
+  const selected = useSelectedLayers();
+  return selected[0];
+}
+function useIsLayerSelected(id) {
+  return useSelectedLayerIds().includes(id);
+}
+var ZOOM_STEPS = [0.05, 0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24, 32];
+function nextStep(zoom, dir) {
+  if (dir === "in") {
+    return ZOOM_STEPS.find((s) => s > zoom) ?? ZOOM_STEPS[ZOOM_STEPS.length - 1];
+  }
+  let prev = ZOOM_STEPS[0];
+  for (const s of ZOOM_STEPS) {
+    if (s >= zoom) break;
+    prev = s;
+  }
+  return prev;
+}
+function useZoom() {
+  const { state, dispatch } = useCanvasContext();
+  const setZoom = useCallback(
+    (next) => dispatch({ type: "SET_ZOOM", payload: next }),
+    [dispatch]
+  );
+  const zoomIn = useCallback(
+    () => dispatch({ type: "SET_ZOOM", payload: nextStep(state.zoom, "in") }),
+    [dispatch, state.zoom]
+  );
+  const zoomOut = useCallback(
+    () => dispatch({ type: "SET_ZOOM", payload: nextStep(state.zoom, "out") }),
+    [dispatch, state.zoom]
+  );
+  const resetZoom = useCallback(() => dispatch({ type: "SET_ZOOM", payload: 1 }), [dispatch]);
+  const fitZoom = useCallback(
+    ({ width, height }, padding = 64) => {
+      const ratio = Math.min(
+        (width - padding) / state.frameSize.width,
+        (height - padding) / state.frameSize.height
+      );
+      dispatch({ type: "SET_ZOOM", payload: Math.max(0.05, Math.min(32, ratio)) });
+      dispatch({ type: "SET_PAN", payload: { x: 0, y: 0 } });
+    },
+    [dispatch, state.frameSize]
+  );
+  return { zoom: state.zoom, setZoom, zoomIn, zoomOut, resetZoom, fitZoom };
+}
+function useHistoryActions() {
+  const { state, dispatch } = useCanvasContext();
+  const initialRef = useRef(state.layers);
+  const hist = useHistory(initialRef.current);
+  const lastSeenRef = useRef(state.layers);
+  useEffect(() => {
+    if (state.layers === lastSeenRef.current) return;
+    if (state.layers === hist.state) {
+      lastSeenRef.current = state.layers;
+      return;
+    }
+    hist.setState(state.layers);
+    lastSeenRef.current = state.layers;
+  }, [state.layers, hist]);
+  const undo = () => {
+    hist.undo();
+    queueMicrotask(() => dispatch({ type: "SET_LAYERS", payload: hist.state }));
+  };
+  const redo = () => {
+    hist.redo();
+    queueMicrotask(() => dispatch({ type: "SET_LAYERS", payload: hist.state }));
+  };
+  return { undo, redo, canUndo: hist.canUndo, canRedo: hist.canRedo };
+}
+function generateId2() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return `layer-${Math.random().toString(36).slice(2, 11)}`;
+}
+function ActionAddLayer() {
+  const { state, dispatch } = useCanvasContext();
+  const { setSelectedIds } = useShellContext();
+  if (state.layerTypes.length === 0) {
+    return /* @__PURE__ */ jsx(DesignerToolbarButton, { label: "Add layer", icon: Plus, disabled: true });
+  }
+  return /* @__PURE__ */ jsx(DesignerToolbarGroup, { children: state.layerTypes.map((descriptor) => {
+    const Icon = descriptor.icon ?? Plus;
+    return /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: `Add ${descriptor.label}`,
+        icon: Icon,
+        onClick: () => {
+          const id = generateId2();
+          const size = descriptor.defaultSize ?? { width: 200, height: 100 };
+          const layer = {
+            id,
+            type: descriptor.type,
+            name: descriptor.label,
+            x: state.frameSize.width / 2 - size.width / 2,
+            y: state.frameSize.height / 2 - size.height / 2,
+            width: size.width,
+            height: size.height,
+            rotation: 0,
+            opacity: 1,
+            isLocked: false,
+            isVisible: true,
+            data: descriptor.defaultData
+          };
+          dispatch({ type: "ADD_LAYER", payload: layer });
+          setSelectedIds([id]);
+        }
+      },
+      descriptor.type
+    );
+  }) });
+}
+function ActionAlign() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  const disabled = selectedIds.length < 2;
+  const align = (a) => () => dispatch({ type: "ALIGN_LAYERS", payload: { targetLayerIds: selectedIds, align: a } });
+  const distribute = (axis) => () => dispatch({ type: "DISTRIBUTE_LAYERS", payload: { targetLayerIds: selectedIds, axis } });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Align left",
+          icon: AlignLeft,
+          onClick: align("left"),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Align center",
+          icon: AlignCenter,
+          onClick: align("center"),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Align right",
+          icon: AlignRight,
+          onClick: align("right"),
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(DesignerToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Align top",
+          icon: AlignStartHorizontal,
+          onClick: align("top"),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Align middle",
+          icon: AlignVerticalJustifyCenter,
+          onClick: align("middle"),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Align bottom",
+          icon: AlignEndHorizontal,
+          onClick: align("bottom"),
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(DesignerToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Distribute horizontally",
+          icon: AlignHorizontalSpaceAround,
+          onClick: distribute("horizontal"),
+          disabled: selectedIds.length < 3
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DesignerToolbarButton,
+        {
+          label: "Distribute vertically",
+          icon: AlignVerticalSpaceAround,
+          onClick: distribute("vertical"),
+          disabled: selectedIds.length < 3
+        }
+      )
+    ] })
+  ] });
+}
+function ActionArrange() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  const disabled = selectedIds.length === 0;
+  const arrange = (mode) => () => dispatch({ type: "ARRANGE_LAYERS", payload: { targetLayerIds: selectedIds, mode } });
+  return /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Bring to front",
+        icon: ChevronsUp,
+        onClick: arrange("front"),
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Bring forward",
+        icon: ArrowUp,
+        onClick: arrange("forward"),
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Send backward",
+        icon: ArrowDown,
+        onClick: arrange("backward"),
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Send to back",
+        icon: ChevronsDown,
+        onClick: arrange("back"),
+        disabled
+      }
+    )
+  ] });
+}
+function ActionDelete() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds, setSelectedIds } = useShellContext();
+  return /* @__PURE__ */ jsx(
+    DesignerToolbarButton,
+    {
+      label: "Delete",
+      icon: Trash2,
+      shortcut: "Del",
+      disabled: selectedIds.length === 0,
+      onClick: () => {
+        dispatch({ type: "DELETE_LAYERS", payload: selectedIds });
+        setSelectedIds([]);
+      }
+    }
+  );
+}
+function ActionDuplicate() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  return /* @__PURE__ */ jsx(
+    DesignerToolbarButton,
+    {
+      label: "Duplicate",
+      icon: Copy,
+      shortcut: "\u2318D",
+      disabled: selectedIds.length === 0,
+      onClick: () => {
+        dispatch({ type: "COPY_LAYERS", payload: { targetLayerIds: selectedIds } });
+        dispatch({ type: "PASTE_LAYERS" });
+      }
+    }
+  );
+}
+function ActionGroup() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  return /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Group",
+        icon: Group,
+        shortcut: "\u2318G",
+        disabled: selectedIds.length < 2,
+        onClick: () => {
+          const groupId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `group-${Date.now()}`;
+          dispatch({ type: "GROUP_LAYERS", payload: { targetLayerIds: selectedIds, groupId } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Ungroup",
+        icon: Ungroup,
+        shortcut: "\u21E7\u2318G",
+        disabled: selectedIds.length === 0,
+        onClick: () => dispatch({ type: "UNGROUP_LAYERS", payload: { targetLayerIds: selectedIds } })
+      }
+    )
+  ] });
+}
+function ActionLock() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  const selected = useSelectedLayers();
+  const disabled = selectedIds.length === 0;
+  const allLocked = selected.length > 0 && selected.every((l) => l.isLocked);
+  const allHidden = selected.length > 0 && selected.every((l) => l.isVisible === false);
+  return /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: allLocked ? "Unlock" : "Lock",
+        icon: allLocked ? Unlock : Lock,
+        disabled,
+        onClick: () => dispatch({
+          type: "SET_LAYER_PROPERTY",
+          payload: { targetLayerIds: selectedIds, key: "isLocked", value: !allLocked }
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: allHidden ? "Show" : "Hide",
+        icon: allHidden ? EyeOff : Eye,
+        disabled,
+        onClick: () => dispatch({
+          type: "SET_LAYER_PROPERTY",
+          payload: { targetLayerIds: selectedIds, key: "isVisible", value: allHidden }
+        })
+      }
+    )
+  ] });
+}
+var DEFAULT_TOOLS = [
+  { id: "select", label: "Select", icon: MousePointer2, shortcut: "V" },
+  { id: "hand", label: "Pan", icon: Hand, shortcut: "H" }
+];
+function ActionTool({ tools = DEFAULT_TOOLS }) {
+  const { activeTool, setActiveTool } = useShellContext();
+  return /* @__PURE__ */ jsx(DesignerToolbarGroup, { children: tools.map((tool) => /* @__PURE__ */ jsx(
+    DesignerToolbarButton,
+    {
+      label: tool.label,
+      icon: tool.icon,
+      shortcut: tool.shortcut,
+      active: activeTool === tool.id,
+      onClick: () => setActiveTool(tool.id)
+    },
+    tool.id
+  )) });
+}
+function ActionTransform() {
+  const { dispatch } = useCanvasContext();
+  const { selectedIds } = useShellContext();
+  const disabled = selectedIds.length === 0;
+  return /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Flip horizontal",
+        icon: FlipHorizontal,
+        disabled,
+        onClick: () => dispatch({
+          type: "TRANSFORM_LAYERS",
+          payload: { targetLayerIds: selectedIds, mode: "flip-h" }
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Flip vertical",
+        icon: FlipVertical,
+        disabled,
+        onClick: () => dispatch({
+          type: "TRANSFORM_LAYERS",
+          payload: { targetLayerIds: selectedIds, mode: "flip-v" }
+        })
+      }
+    )
+  ] });
+}
+function ActionUndoRedo() {
+  const { undo, redo, canUndo, canRedo } = useHistoryActions();
+  return /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Undo",
+        icon: Undo2,
+        shortcut: "\u2318Z",
+        onClick: undo,
+        disabled: !canUndo
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DesignerToolbarButton,
+      {
+        label: "Redo",
+        icon: Redo2,
+        shortcut: "\u21E7\u2318Z",
+        onClick: redo,
+        disabled: !canRedo
+      }
+    )
+  ] });
+}
+function ActionZoom() {
+  const { zoom, zoomIn, zoomOut, resetZoom } = useZoom();
+  return /* @__PURE__ */ jsxs(DesignerToolbarGroup, { children: [
+    /* @__PURE__ */ jsx(DesignerToolbarButton, { label: "Zoom out", icon: Minus, shortcut: "\u2318-", onClick: zoomOut }),
+    /* @__PURE__ */ jsx(DesignerToolbarButton, { label: "Reset zoom", icon: Maximize2, shortcut: "\u23180", onClick: resetZoom, children: /* @__PURE__ */ jsxs("span", { className: "caption-xs ml-1 tabular-nums", children: [
+      Math.round(zoom * 100),
+      "%"
+    ] }) }),
+    /* @__PURE__ */ jsx(DesignerToolbarButton, { label: "Zoom in", icon: Plus, shortcut: "\u2318=", onClick: zoomIn })
+  ] });
+}
+
+export { ActionAddLayer, ActionAlign, ActionArrange, ActionDelete, ActionDuplicate, ActionGroup, ActionLock, ActionTool, ActionTransform, ActionUndoRedo, ActionZoom, CanvasContextProvider, CanvasProvider, Designer, DesignerCanvas, DesignerFrame, DesignerStaticFrame, GridOverlay, LayerSelectionOverlay, MarqueeOverlay, RendererProvider, __test, canvasReducer, createInitialState, useAllRenderers, useCanvasContext, useDragInteraction, useHistoryActions, useIsLayerSelected, useLayer, useLayerRenderer, useLayers, useSelectedLayer, useSelectedLayerIds, useSelectedLayers, useZoom };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map