@usetheo/ui 0.1.0-next.0 → 0.1.0-next.1

package/dist/whiteboard/index.js

@@ -0,0 +1,738 @@
+import { useMemo, useEffect, useRef, useState, useCallback } from 'react';
+import rough from 'roughjs';
+import { getStroke } from 'perfect-freehand';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+// src/components/primitives/whiteboard/whiteboard.tsx
+
+// src/components/primitives/whiteboard/seed.ts
+var FNV_OFFSET_BASIS_32 = 2166136261;
+var FNV_PRIME_32 = 16777619;
+function fnv1a32(input) {
+  let hash = FNV_OFFSET_BASIS_32;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, FNV_PRIME_32);
+  }
+  return hash | 0;
+}
+function deriveSeed(el) {
+  if (typeof el.seed === "number" && Number.isFinite(el.seed)) {
+    return el.seed | 0;
+  }
+  const key = `${el.type}|${el.x}|${el.y}|${el.w ?? ""}|${el.h ?? ""}|${el.label ?? ""}`;
+  return fnv1a32(key);
+}
+var DEFAULT_STROKE_OPTIONS = {
+  size: 8,
+  thinning: 0.5,
+  smoothing: 0.5,
+  streamline: 0.5
+};
+function fmt(n) {
+  return typeof n === "number" && Number.isFinite(n) ? n.toFixed(2) : "0";
+}
+function svgPathFromStroke(points) {
+  if (points.length === 0) return "";
+  const first = points[0] ?? [];
+  let d = `M ${fmt(first[0])} ${fmt(first[1])}`;
+  for (let i = 1; i < points.length; i++) {
+    const p = points[i] ?? [];
+    d += ` L ${fmt(p[0])} ${fmt(p[1])}`;
+  }
+  d += " Z";
+  return d;
+}
+function renderFreedraw(el) {
+  const size = (el.strokeWidth ?? 1.5) * 5;
+  const inputPoints = el.points.map(([x, y, pressure]) => {
+    const tx = el.x + x;
+    const ty = el.y + y;
+    return pressure === void 0 ? [tx, ty] : [tx, ty, pressure];
+  });
+  const stroke = getStroke(inputPoints, {
+    ...DEFAULT_STROKE_OPTIONS,
+    size
+  });
+  const d = svgPathFromStroke(stroke);
+  return /* @__PURE__ */ jsx("g", { opacity: el.opacity ?? 1, children: /* @__PURE__ */ jsx("path", { d, fill: el.stroke ?? "currentColor", stroke: "none" }) });
+}
+
+// src/components/primitives/whiteboard/render/rough-paths.ts
+function toRoughPaths(generator, drawable) {
+  const paths = generator.toPaths(drawable);
+  return paths.map((p) => ({
+    d: p.d,
+    stroke: p.stroke,
+    strokeWidth: p.strokeWidth,
+    fill: p.fill
+  }));
+}
+
+// src/components/primitives/whiteboard/render/style.ts
+var DEFAULT_STROKE = "currentColor";
+function buildOptions(src, seed) {
+  const o = {
+    seed,
+    stroke: src.stroke ?? DEFAULT_STROKE,
+    strokeWidth: src.strokeWidth ?? 1.5,
+    roughness: src.roughness ?? 1.2
+  };
+  if (src.strokeStyle === "dashed") o.strokeLineDash = [10, 6];
+  else if (src.strokeStyle === "dotted") o.strokeLineDash = [2, 4];
+  if (src.fill) o.fill = src.fill;
+  if (src.fillStyle) o.fillStyle = src.fillStyle;
+  return o;
+}
+function strokeDashArray(strokeStyle2, strokeWidth) {
+  if (strokeStyle2 === "dashed") {
+    const dash = Math.max(8, strokeWidth * 6);
+    const gap = Math.max(5, strokeWidth * 4);
+    return `${dash} ${gap}`;
+  }
+  if (strokeStyle2 === "dotted") {
+    return `${strokeWidth} ${strokeWidth * 2.5}`;
+  }
+  return void 0;
+}
+var HEAD_BASE_PX = 12;
+var HEAD_ANGLE_RAD = Math.PI / 7;
+function arrowHeadGeometry(fromX, fromY, toX, toY, strokeWidth) {
+  const dx = toX - fromX;
+  const dy = toY - fromY;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist === 0) return null;
+  const angle = Math.atan2(dy, dx);
+  const headLen = Math.min(HEAD_BASE_PX + strokeWidth * 2, dist * 0.4);
+  const leftX = toX - headLen * Math.cos(angle - HEAD_ANGLE_RAD);
+  const leftY = toY - headLen * Math.sin(angle - HEAD_ANGLE_RAD);
+  const rightX = toX - headLen * Math.cos(angle + HEAD_ANGLE_RAD);
+  const rightY = toY - headLen * Math.sin(angle + HEAD_ANGLE_RAD);
+  return { apexX: toX, apexY: toY, leftX, leftY, rightX, rightY };
+}
+function lineBody(gen, el, seed) {
+  const opts = buildOptions(el, seed);
+  const drawable = gen.line(el.x, el.y, el.to[0], el.to[1], opts);
+  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);
+  return toRoughPaths(gen, drawable).map((p, i) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: p.d,
+      stroke: p.stroke,
+      strokeWidth: p.strokeWidth,
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: dash
+    },
+    `body-${i}`
+  ));
+}
+function arrowHead(gen, fromX, fromY, toX, toY, seed, el, side) {
+  const geom = arrowHeadGeometry(fromX, fromY, toX, toY, el.strokeWidth ?? 1.5);
+  if (!geom) return [];
+  const opts = buildOptions(el, seed);
+  const leftDrawable = gen.line(geom.apexX, geom.apexY, geom.leftX, geom.leftY, opts);
+  const rightDrawable = gen.line(geom.apexX, geom.apexY, geom.rightX, geom.rightY, opts);
+  const leftPaths = toRoughPaths(gen, leftDrawable);
+  const rightPaths = toRoughPaths(gen, rightDrawable);
+  const nodes = [];
+  for (const [i, p] of leftPaths.entries()) {
+    nodes.push(
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: p.d,
+          stroke: p.stroke,
+          strokeWidth: p.strokeWidth,
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "data-line-part": "arrowhead"
+        },
+        `${side}-l-${i}`
+      )
+    );
+  }
+  for (const [i, p] of rightPaths.entries()) {
+    nodes.push(
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: p.d,
+          stroke: p.stroke,
+          strokeWidth: p.strokeWidth,
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "data-line-part": "arrowhead"
+        },
+        `${side}-r-${i}`
+      )
+    );
+  }
+  return nodes;
+}
+function renderLine(gen, el) {
+  return /* @__PURE__ */ jsx("g", { opacity: el.opacity ?? 1, children: lineBody(gen, el, el.seed ?? 0) });
+}
+function renderArrow(gen, el) {
+  const seed = el.seed ?? 0;
+  const nodes = [...lineBody(gen, el, seed)];
+  if (el.headEnd !== false) {
+    nodes.push(...arrowHead(gen, el.x, el.y, el.to[0], el.to[1], seed + 1, el, "end"));
+  }
+  if (el.headStart) {
+    nodes.push(...arrowHead(gen, el.to[0], el.to[1], el.x, el.y, seed + 2, el, "start"));
+  }
+  let label = null;
+  if (el.label) {
+    const midX = (el.x + el.to[0]) / 2;
+    const midY = (el.y + el.to[1]) / 2;
+    const dx = el.to[0] - el.x;
+    const dy = el.to[1] - el.y;
+    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+    const nx = -dy / dist;
+    const ny = dx / dist;
+    const offset = 12;
+    label = /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: midX + nx * offset,
+        y: midY + ny * offset,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fontSize: 14,
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        fill: el.stroke ?? "currentColor",
+        style: { pointerEvents: "none" },
+        children: el.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("g", { opacity: el.opacity ?? 1, children: [
+    nodes,
+    label
+  ] });
+}
+function Label({ cx, cy, label, stroke }) {
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: cx,
+      y: cy,
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      fontSize: 16,
+      fontFamily: "ui-sans-serif, system-ui, sans-serif",
+      fill: stroke ?? "currentColor",
+      style: { pointerEvents: "none" },
+      children: label
+    }
+  );
+}
+function pathsToReactNodes(paths, keyPrefix, outlineStroke, dashArray) {
+  return paths.map((p, i) => {
+    const isOutline = p.stroke === outlineStroke;
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: p.d,
+        stroke: p.stroke,
+        strokeWidth: p.strokeWidth,
+        fill: p.fill ?? "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: isOutline ? dashArray : void 0
+      },
+      `${keyPrefix}-${i}`
+    );
+  });
+}
+function renderRect(gen, el) {
+  const opts = buildOptions(el, el.seed ?? 0);
+  const drawable = gen.rectangle(el.x, el.y, el.w, el.h, opts);
+  const paths = toRoughPaths(gen, drawable);
+  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);
+  return /* @__PURE__ */ jsxs("g", { opacity: el.opacity ?? 1, children: [
+    pathsToReactNodes(paths, "rect", opts.stroke, dash),
+    el.label ? /* @__PURE__ */ jsx(Label, { cx: el.x + el.w / 2, cy: el.y + el.h / 2, label: el.label, stroke: el.stroke }) : null
+  ] });
+}
+function renderEllipse(gen, el) {
+  const opts = buildOptions(el, el.seed ?? 0);
+  const drawable = gen.ellipse(el.x + el.w / 2, el.y + el.h / 2, el.w, el.h, opts);
+  const paths = toRoughPaths(gen, drawable);
+  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);
+  return /* @__PURE__ */ jsxs("g", { opacity: el.opacity ?? 1, children: [
+    pathsToReactNodes(paths, "ellipse", opts.stroke, dash),
+    el.label ? /* @__PURE__ */ jsx(Label, { cx: el.x + el.w / 2, cy: el.y + el.h / 2, label: el.label, stroke: el.stroke }) : null
+  ] });
+}
+function renderDiamond(gen, el) {
+  const opts = buildOptions(el, el.seed ?? 0);
+  const cx = el.x + el.w / 2;
+  const cy = el.y + el.h / 2;
+  const points = [
+    [cx, el.y],
+    // top
+    [el.x + el.w, cy],
+    // right
+    [cx, el.y + el.h],
+    // bottom
+    [el.x, cy]
+    // left
+  ];
+  const drawable = gen.polygon(points, opts);
+  const paths = toRoughPaths(gen, drawable);
+  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);
+  return /* @__PURE__ */ jsxs("g", { opacity: el.opacity ?? 1, children: [
+    pathsToReactNodes(paths, "diamond", opts.stroke, dash),
+    el.label ? /* @__PURE__ */ jsx(Label, { cx, cy, label: el.label, stroke: el.stroke }) : null
+  ] });
+}
+var FONT_STACKS = {
+  sans: "ui-sans-serif, system-ui, sans-serif",
+  serif: "ui-serif, Georgia, serif",
+  mono: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  hand: '"Virgil", "Caveat", "Comic Sans MS", cursive'
+};
+function textAnchor(align2) {
+  if (align2 === "center") return "middle";
+  if (align2 === "right") return "end";
+  return "start";
+}
+function renderText(el) {
+  const fontSize = el.fontSize ?? 18;
+  const fontFamily2 = FONT_STACKS[el.fontFamily ?? "hand"];
+  const anchor = textAnchor(el.align);
+  const lines = el.text.split("\n");
+  return /* @__PURE__ */ jsx("g", { opacity: el.opacity ?? 1, children: /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: el.x,
+      y: el.y,
+      textAnchor: anchor,
+      dominantBaseline: "hanging",
+      fontSize,
+      fontFamily: fontFamily2,
+      fill: el.stroke ?? "currentColor",
+      children: lines.map((line, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: text is split deterministically on '\n' so the line index is the most stable key.
+        /* @__PURE__ */ jsx("tspan", { x: el.x, dy: i === 0 ? 0 : fontSize * 1.2, children: line }, i)
+      ))
+    }
+  ) });
+}
+function elementWithSeed(el) {
+  if (typeof el.seed === "number") return el;
+  return { ...el, seed: deriveSeed(el) };
+}
+function renderElement(el, gen) {
+  switch (el.type) {
+    case "rect":
+      return renderRect(gen, elementWithSeed(el));
+    case "ellipse":
+      return renderEllipse(gen, elementWithSeed(el));
+    case "diamond":
+      return renderDiamond(gen, elementWithSeed(el));
+    case "line":
+      return renderLine(gen, elementWithSeed(el));
+    case "arrow":
+      return renderArrow(gen, elementWithSeed(el));
+    case "text":
+      return renderText(elementWithSeed(el));
+    case "freedraw":
+      return renderFreedraw(elementWithSeed(el));
+  }
+}
+function renderScene(scene, gen) {
+  return /* @__PURE__ */ jsx(Fragment, { children: scene.elements.map((el, i) => /* @__PURE__ */ jsx(
+    "g",
+    {
+      "data-element-id": el.id ?? String(i),
+      "data-element-type": el.type,
+      children: renderElement(el, gen)
+    },
+    el.id ?? `__idx-${i}`
+  )) });
+}
+var finiteNumber = z.number().finite();
+var finitePositive = finiteNumber.positive();
+var strokeStyle = z.enum(["solid", "dashed", "dotted"]);
+var fillStyle = z.enum(["hachure", "solid", "cross-hatch", "zigzag"]);
+var align = z.enum(["left", "center", "right"]);
+var fontFamily = z.enum(["sans", "serif", "mono", "hand"]);
+var roundness = z.enum(["sharp", "round"]);
+var baseElement = z.object({
+  id: z.string().max(120).optional(),
+  x: finiteNumber,
+  y: finiteNumber,
+  stroke: z.string().max(64).optional(),
+  strokeWidth: finitePositive.max(50).optional(),
+  strokeStyle: strokeStyle.optional(),
+  fill: z.string().max(64).optional(),
+  fillStyle: fillStyle.optional(),
+  opacity: finiteNumber.min(0).max(1).optional(),
+  roughness: finiteNumber.min(0).max(3).optional(),
+  seed: z.number().int().finite().optional()
+});
+var dim = finitePositive.max(2e4);
+var labelText = z.string().max(500);
+var rectElement = baseElement.extend({
+  type: z.literal("rect"),
+  w: dim,
+  h: dim,
+  label: labelText.optional(),
+  roundness: roundness.optional()
+});
+var ellipseElement = baseElement.extend({
+  type: z.literal("ellipse"),
+  w: dim,
+  h: dim,
+  label: labelText.optional()
+});
+var diamondElement = baseElement.extend({
+  type: z.literal("diamond"),
+  w: dim,
+  h: dim,
+  label: labelText.optional()
+});
+var point2 = z.tuple([finiteNumber, finiteNumber]);
+var lineElement = baseElement.extend({
+  type: z.literal("line"),
+  to: point2
+});
+var arrowElement = baseElement.extend({
+  type: z.literal("arrow"),
+  to: point2,
+  label: labelText.optional(),
+  headStart: z.boolean().optional(),
+  headEnd: z.boolean().default(true)
+});
+var textElement = baseElement.extend({
+  type: z.literal("text"),
+  text: z.string().max(5e3),
+  fontSize: finitePositive.max(500).optional(),
+  align: align.optional(),
+  fontFamily: fontFamily.optional()
+});
+var freedrawPoint = z.tuple([finiteNumber, finiteNumber, finiteNumber.optional()]);
+var freedrawElement = baseElement.extend({
+  type: z.literal("freedraw"),
+  points: z.array(freedrawPoint).min(2).max(5e3)
+});
+var whiteboardElement = z.discriminatedUnion("type", [
+  rectElement,
+  ellipseElement,
+  diamondElement,
+  lineElement,
+  arrowElement,
+  textElement,
+  freedrawElement
+]);
+var whiteboardScene = z.object({
+  version: z.literal(1),
+  width: dim,
+  // EC-4: clamped 1..20000
+  height: dim,
+  // EC-4: clamped 1..20000
+  background: z.string().max(64).optional(),
+  elements: z.array(whiteboardElement).max(5e3)
+});
+
+// src/components/primitives/whiteboard/validate.ts
+function valueAtPath(input, path) {
+  let cursor = input;
+  for (const segment of path) {
+    if (cursor === null || typeof cursor !== "object") return void 0;
+    cursor = cursor[segment];
+  }
+  return cursor;
+}
+function formatIssue(issue, input) {
+  const error = {
+    path: issue.path.join("."),
+    message: issue.message,
+    code: issue.code
+  };
+  if ("received" in issue && issue.received !== void 0) {
+    error.got = issue.received;
+  } else if (issue.path.length > 0) {
+    const value = valueAtPath(input, issue.path);
+    if (value !== void 0) error.got = value;
+  }
+  return error;
+}
+function validateScene(input) {
+  const result = whiteboardScene.safeParse(input);
+  if (result.success) {
+    return { ok: true, scene: result.data };
+  }
+  const errors = result.error.issues.map(
+    (issue) => formatIssue(issue, input)
+  );
+  return { ok: false, errors };
+}
+function usePointerPan(ref, viewport, size) {
+  const dragRef = useRef(null);
+  const spaceHeldRef = useRef(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handler = (e) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const localX = e.clientX - rect.left;
+      const localY = e.clientY - rect.top;
+      const scaleX = size.width / rect.width;
+      const scaleY = size.height / rect.height;
+      viewport.zoomAt(localX * scaleX, localY * scaleY, -e.deltaY * 1e-3, size);
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, [ref, viewport, size]);
+  useEffect(() => {
+    const down = (e) => {
+      if (e.code === "Space") spaceHeldRef.current = true;
+    };
+    const up = (e) => {
+      if (e.code === "Space") spaceHeldRef.current = false;
+    };
+    window.addEventListener("keydown", down);
+    window.addEventListener("keyup", up);
+    return () => {
+      window.removeEventListener("keydown", down);
+      window.removeEventListener("keyup", up);
+    };
+  }, []);
+  const onPointerDown = useCallback((e) => {
+    if (e.target instanceof Element && !e.currentTarget.contains(e.target)) return;
+    const isMouseButton = e.button === 0 || e.button === 1;
+    if (!isMouseButton && e.pointerType === "mouse") return;
+    if (e.pointerType === "mouse" && e.button !== 1 && !spaceHeldRef.current && e.button !== 0) {
+      return;
+    }
+    dragRef.current = { pointerId: e.pointerId, lastX: e.clientX, lastY: e.clientY };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, []);
+  const onPointerMove = useCallback(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== e.pointerId) return;
+      const dx = e.clientX - drag.lastX;
+      const dy = e.clientY - drag.lastY;
+      drag.lastX = e.clientX;
+      drag.lastY = e.clientY;
+      const el = ref.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const scaleX = size.width / rect.width;
+      const scaleY = size.height / rect.height;
+      viewport.pan(dx * scaleX, dy * scaleY);
+    },
+    [ref, viewport, size]
+  );
+  const releaseDrag = useCallback((e) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    dragRef.current = null;
+  }, []);
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: releaseDrag,
+    onPointerCancel: releaseDrag
+  };
+}
+var MIN_ZOOM = 0.1;
+var MAX_ZOOM = 8;
+function clampZoom(z2) {
+  if (!Number.isFinite(z2)) return 1;
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z2));
+}
+function useViewport(opts) {
+  const initial = useMemo(() => {
+    const zoom = clampZoom(opts.initialZoom ?? 1);
+    if (opts.initialCenter) {
+      const [cx, cy] = opts.initialCenter;
+      return {
+        x: cx - opts.width / (2 * zoom),
+        y: cy - opts.height / (2 * zoom),
+        zoom
+      };
+    }
+    return { x: 0, y: 0, zoom };
+  }, [opts.initialCenter, opts.initialZoom, opts.width, opts.height]);
+  const [state, setState] = useState(initial);
+  const pan = useCallback((dx, dy) => {
+    setState((prev) => ({ ...prev, x: prev.x - dx / prev.zoom, y: prev.y - dy / prev.zoom }));
+  }, []);
+  const setZoom = useCallback((zoom) => {
+    setState((prev) => ({ ...prev, zoom: clampZoom(zoom) }));
+  }, []);
+  const zoomAt = useCallback(
+    (screenX, screenY, delta, _size) => {
+      setState((prev) => {
+        const oldZoom = prev.zoom;
+        const newZoom = clampZoom(prev.zoom * Math.exp(delta));
+        if (newZoom === oldZoom) return prev;
+        const worldX = prev.x + screenX / oldZoom;
+        const worldY = prev.y + screenY / oldZoom;
+        return {
+          x: worldX - screenX / newZoom,
+          y: worldY - screenY / newZoom,
+          zoom: newZoom
+        };
+      });
+    },
+    []
+  );
+  const reset = useCallback(() => setState(initial), [initial]);
+  const fitTo = useCallback((bounds, size) => {
+    const bboxWidth = Math.max(1, bounds.maxX - bounds.minX);
+    const bboxHeight = Math.max(1, bounds.maxY - bounds.minY);
+    const zoomX = size.width / bboxWidth;
+    const zoomY = size.height / bboxHeight;
+    const zoom = clampZoom(Math.min(zoomX, zoomY));
+    const cx = (bounds.minX + bounds.maxX) / 2;
+    const cy = (bounds.minY + bounds.maxY) / 2;
+    setState({
+      x: cx - size.width / (2 * zoom),
+      y: cy - size.height / (2 * zoom),
+      zoom
+    });
+  }, []);
+  const viewBox = useCallback(
+    (size) => `${state.x} ${state.y} ${size.width / state.zoom} ${size.height / state.zoom}`,
+    [state]
+  );
+  return { state, pan, setZoom, zoomAt, reset, fitTo, viewBox };
+}
+function computeBounds(scene) {
+  if (scene.elements.length === 0) return null;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const el of scene.elements) {
+    const x1 = el.x;
+    const y1 = el.y;
+    let x2 = el.x;
+    let y2 = el.y;
+    if (el.type === "rect" || el.type === "ellipse" || el.type === "diamond") {
+      x2 = el.x + el.w;
+      y2 = el.y + el.h;
+    } else if (el.type === "line" || el.type === "arrow") {
+      x2 = el.to[0];
+      y2 = el.to[1];
+    } else if (el.type === "freedraw") {
+      for (const [px, py] of el.points) {
+        const tx = el.x + px;
+        const ty = el.y + py;
+        if (tx < minX) minX = tx;
+        if (ty < minY) minY = ty;
+        if (tx > maxX) maxX = tx;
+        if (ty > maxY) maxY = ty;
+      }
+      continue;
+    }
+    if (x1 < minX) minX = x1;
+    if (y1 < minY) minY = y1;
+    if (x2 < minX) minX = x2;
+    if (y2 < minY) minY = y2;
+    if (x1 > maxX) maxX = x1;
+    if (y1 > maxY) maxY = y1;
+    if (x2 > maxX) maxX = x2;
+    if (y2 > maxY) maxY = y2;
+  }
+  if (!Number.isFinite(minX)) return null;
+  return { minX, minY, maxX, maxY };
+}
+function Whiteboard({
+  data,
+  className,
+  initialZoom,
+  initialCenter,
+  fitOnLoad,
+  onValidationError,
+  "aria-label": ariaLabel
+}) {
+  const validation = useMemo(() => validateScene(data), [data]);
+  const scene = validation.ok ? validation.scene : null;
+  useEffect(() => {
+    if (!validation.ok && onValidationError) {
+      onValidationError(validation.errors);
+    }
+  }, [validation, onValidationError]);
+  const generator = useMemo(() => {
+    if (typeof globalThis === "undefined") return null;
+    try {
+      return rough.generator();
+    } catch {
+      return null;
+    }
+  }, []);
+  const sceneWidth = scene?.width ?? 400;
+  const sceneHeight = scene?.height ?? 300;
+  const sceneBackground = scene?.background;
+  const viewport = useViewport({
+    width: sceneWidth,
+    height: sceneHeight,
+    initialZoom,
+    initialCenter
+  });
+  const svgRef = useRef(null);
+  const fitTo = viewport.fitTo;
+  useEffect(() => {
+    if (!fitOnLoad || !scene) return;
+    const bounds = computeBounds(scene);
+    if (!bounds) return;
+    fitTo(bounds, { width: sceneWidth, height: sceneHeight });
+  }, [fitOnLoad, scene, sceneWidth, sceneHeight, fitTo]);
+  const handlers = usePointerPan(svgRef, viewport, {
+    width: sceneWidth,
+    height: sceneHeight
+  });
+  const label = ariaLabel ?? "Whiteboard diagram";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      viewBox: viewport.viewBox({ width: sceneWidth, height: sceneHeight }),
+      width: sceneWidth,
+      height: sceneHeight,
+      className,
+      role: "img",
+      "aria-label": label,
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-whiteboard-state": scene ? "ok" : "invalid",
+      style: { touchAction: "none", userSelect: "none" },
+      ...handlers,
+      children: [
+        /* @__PURE__ */ jsx("title", { children: label }),
+        sceneBackground ? /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width: sceneWidth,
+            height: sceneHeight,
+            fill: sceneBackground,
+            "data-layer": "background"
+          }
+        ) : null,
+        scene && generator ? renderScene(scene, generator) : null
+      ]
+    }
+  );
+}
+
+export { Whiteboard, validateScene };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map