@usetheo/ui 0.13.2 → 0.15.0

package/dist/whiteboard/index.js

@@ -1,741 +0,0 @@
-"use client";
-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",
-    {
-      "data-slot": "label",
-      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",
-    {
-      "data-slot": "whiteboard",
-      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