@mocanvas/mocanvas 1.0.0 → 4.0.0

package/dist/chunk-QDUQZXE4.js

@@ -0,0 +1,1340 @@
+import { pathWordsToSvgD, getGeoGeometry } from './chunk-OMUOD53T.js';
+import { GEO_SHAPE_KINDS, EditorPortal, useEditor, useValue, getLocaleChain, resolveUiMessage, useActions, useTools, useIsToolSelected } from '@mocanvas/editor';
+import { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect, useLayoutEffect, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DialogsContext = createContext(null);
+var NOOP = { addDialog: () => "", removeDialog: () => {
+}, clearDialogs: () => {
+}, dialogs: [] };
+var nextDialogId = 0;
+function TldrawUiDialogsProvider({ children }) {
+  const [dialogs, setDialogs] = useState([]);
+  const removeDialog = useCallback((id) => {
+    setDialogs((current) => {
+      current.find((dialog) => dialog.id === id)?.onClose?.();
+      return current.filter((dialog) => dialog.id !== id);
+    });
+  }, []);
+  const addDialog = useCallback((dialog) => {
+    const id = dialog.id ?? `dialog:${nextDialogId++}`;
+    setDialogs((current) => [...current.filter((d) => d.id !== id), { ...dialog, id }]);
+    return id;
+  }, []);
+  const clearDialogs = useCallback(() => {
+    setDialogs((current) => {
+      for (const dialog of current) dialog.onClose?.();
+      return [];
+    });
+  }, []);
+  const value = useMemo(
+    () => ({ addDialog, removeDialog, clearDialogs, dialogs }),
+    [addDialog, removeDialog, clearDialogs, dialogs]
+  );
+  return /* @__PURE__ */ jsx(DialogsContext.Provider, { value, children });
+}
+function useDialogs() {
+  return useContext(DialogsContext) ?? NOOP;
+}
+var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function DialogFrame({ dialog, onClose }) {
+  const ref = useRef(null);
+  const returnFocusTo = useRef(null);
+  useEffect(() => {
+    returnFocusTo.current = ref.current?.ownerDocument.activeElement ?? null;
+    const first = ref.current?.querySelector(FOCUSABLE);
+    (first ?? ref.current)?.focus();
+    return () => {
+      const previous = returnFocusTo.current;
+      if (previous instanceof HTMLElement) previous.focus();
+    };
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onClose();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = Array.from(ref.current?.querySelectorAll(FOCUSABLE) ?? []);
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = ref.current?.ownerDocument.activeElement;
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  const Component = dialog.component;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mocanvas-dialog-backdrop",
+      onPointerDown: (event) => {
+        if (event.target === event.currentTarget && !dialog.preventBackdropClose) onClose();
+      },
+      children: /* @__PURE__ */ jsx("div", { ref, className: "mocanvas-dialog mocanvas-panel", role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown, children: /* @__PURE__ */ jsx(Component, { onClose }) })
+    }
+  );
+}
+function DefaultDialogs() {
+  const { dialogs, removeDialog } = useDialogs();
+  if (dialogs.length === 0) return null;
+  return /* @__PURE__ */ jsx(EditorPortal, { children: dialogs.map((dialog) => /* @__PURE__ */ jsx(DialogFrame, { dialog, onClose: () => removeDialog(dialog.id) }, dialog.id)) });
+}
+function TldrawUiDialogHeader({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: className ? `mocanvas-dialog-header ${className}` : "mocanvas-dialog-header", children });
+}
+function TldrawUiDialogTitle({ className, children }) {
+  return /* @__PURE__ */ jsx("h2", { className: className ? `mocanvas-dialog-title ${className}` : "mocanvas-dialog-title", children });
+}
+function TldrawUiDialogCloseButton() {
+  const { dialogs, removeDialog } = useDialogs();
+  const top = dialogs[dialogs.length - 1];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "mocanvas-btn mocanvas-dialog-close",
+      "aria-label": "Close",
+      onClick: () => {
+        if (top) removeDialog(top.id);
+      },
+      children: "\xD7"
+    }
+  );
+}
+function TldrawUiDialogBody({ className, style, children }) {
+  return /* @__PURE__ */ jsx("div", { className: className ? `mocanvas-dialog-body ${className}` : "mocanvas-dialog-body", style, children });
+}
+function TldrawUiDialogFooter({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: className ? `mocanvas-dialog-footer ${className}` : "mocanvas-dialog-footer", children });
+}
+function ExampleDialog({
+  title = "Title",
+  body = "Description",
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  displayDontShowAgain = false,
+  onCancel,
+  onContinue,
+  onClose
+}) {
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(TldrawUiDialogHeader, { children: [
+      /* @__PURE__ */ jsx(TldrawUiDialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(TldrawUiDialogCloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsx(TldrawUiDialogBody, { children: body }),
+    /* @__PURE__ */ jsxs(TldrawUiDialogFooter, { children: [
+      displayDontShowAgain ? /* @__PURE__ */ jsxs("label", { className: "mocanvas-dialog-checkbox", children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: dontShowAgain, onChange: (event) => setDontShowAgain(event.target.checked) }),
+        "Don\u2019t show again"
+      ] }) : null,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mocanvas-btn mocanvas-btn--wide",
+          onClick: () => {
+            onCancel?.();
+            onClose();
+          },
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mocanvas-btn mocanvas-btn--wide",
+          onClick: () => {
+            onContinue?.();
+            onClose();
+          },
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] });
+}
+var ICON_GRID = 24;
+var GEO_BOX = 16;
+var solid = { fill: "currentColor", stroke: "none" };
+var TOOL_ICONS = {
+  select: /* @__PURE__ */ jsx("path", { d: "M6.65 4.05v13.95l3.54-3.35 2.41 5.3 2.33-1.02-2.42-5.21 4.84-.19z" }),
+  hand: /* @__PURE__ */ jsx("path", { d: "M8.35 14.6V9.5a1.3 1.3 0 0 1 2.6 0V5.3a1.3 1.3 0 0 1 2.6 0v.5a1.3 1.3 0 0 1 2.6 0v1.9a1.3 1.3 0 0 1 2.6 0v6.75c0 3.15-2.55 5.7-5.7 5.7h-.6c-1.9 0-3.68-.96-4.72-2.55l-1.75-2.65a1.3 1.3 0 0 1 2.17-1.42z" }),
+  draw: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.4 19.6l1.05-3.8L15.5 5.75a2 2 0 0 1 2.83 2.83L8.2 18.55z" }),
+    /* @__PURE__ */ jsx("path", { d: "M13.55 7.7l2.83 2.83" })
+  ] }),
+  eraser: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("g", { transform: "translate(12 10.5) rotate(-45)", children: [
+      /* @__PURE__ */ jsx("rect", { x: "-5.75", y: "-3.5", width: "11.5", height: "7", rx: "1.6" }),
+      /* @__PURE__ */ jsx("path", { d: "M0 -3.5V3.5" })
+    ] }),
+    /* @__PURE__ */ jsx("path", { d: "M7 19.4h10.5" })
+  ] }),
+  text: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 6.25V4.5h14v1.75" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 4.5v15" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.75 19.5h6.5" })
+  ] }),
+  note: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 5.75A1.75 1.75 0 0 1 6.25 4h11.5a1.75 1.75 0 0 1 1.75 1.75v8L13.5 20H6.25A1.75 1.75 0 0 1 4.5 18.25z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19.5 13.75h-4.25a1.75 1.75 0 0 0-1.75 1.75V20" })
+  ] }),
+  frame: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 4.5v15M16 4.5v15" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.5 8h15M4.5 16h15" })
+  ] }),
+  arrow: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5.15 18.85L18.85 5.15" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 5.15h6.85V12" })
+  ] }),
+  line: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M7.6 16.4L16.4 7.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5.85", cy: "18.15", r: "1.85" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18.15", cy: "5.85", r: "1.85" })
+  ] }),
+  image: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3.9", y: "5.25", width: "16.2", height: "13.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.9", cy: "10", r: "1.55" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 16.2l4.75-4.2 3.75 3.25 3-2.5 4.6 4.05" })
+  ] })
+};
+var ACTION_ICONS = {
+  "zoom-in": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10.75", cy: "10.75", r: "6.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.4 15.4l5.1 5.1" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 10.75h5.5M10.75 8v5.5" })
+  ] }),
+  "zoom-out": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10.75", cy: "10.75", r: "6.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.4 15.4l5.1 5.1" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 10.75h5.5" })
+  ] }),
+  "zoom-fit": /* @__PURE__ */ jsx("path", { d: "M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15" }),
+  undo: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.25 8.75h10.25a5.25 5.25 0 0 1 0 10.5H10" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.25 4.75L4.25 8.75l4 4" })
+  ] }),
+  redo: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M19.75 8.75H9.5a5.25 5.25 0 0 0 0 10.5H14" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.75 4.75l4 4-4 4" })
+  ] }),
+  lock: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4.75", y: "10.5", width: "14.5", height: "9.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.25 10.5V7.75a3.75 3.75 0 0 1 7.5 0v2.75" })
+  ] }),
+  unlock: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4.75", y: "10.5", width: "14.5", height: "9.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.25 10.5V7.75a3.75 3.75 0 0 1 7.15-1.5" })
+  ] }),
+  duplicate: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "8.5", y: "8.5", width: "11.5", height: "11.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5 4H6.25A2.25 2.25 0 0 0 4 6.25V15.5" })
+  ] }),
+  trash: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 7h15" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 7V5.75A1.5 1.5 0 0 1 11 4.25h2a1.5 1.5 0 0 1 1.5 1.5V7" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.75 7l.75 11.5A1.5 1.5 0 0 0 9 20h6a1.5 1.5 0 0 0 1.5-1.5L17.25 7" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.25 10.5v6M13.75 10.5v6" })
+  ] }),
+  group: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx("rect", { x: "7", y: "7", width: "4.5", height: "4.5", rx: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "12.5", y: "12.5", width: "4.5", height: "4.5", rx: "1" })
+  ] }),
+  ungroup: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 8V5.25A1.25 1.25 0 0 1 5.25 4H8M16 4h2.75A1.25 1.25 0 0 1 20 5.25V8M20 16v2.75A1.25 1.25 0 0 1 18.75 20H16M8 20H5.25A1.25 1.25 0 0 1 4 18.75V16" }),
+    /* @__PURE__ */ jsx("rect", { x: "7", y: "7", width: "4.5", height: "4.5", rx: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "12.5", y: "12.5", width: "4.5", height: "4.5", rx: "1" })
+  ] }),
+  "bring-forward": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4.75", y: "11.25", width: "14.5", height: "8.75", rx: "2.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9V4M8.75 7.25L12 4l3.25 3.25" })
+  ] }),
+  "send-backward": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4.75", y: "4", width: "14.5", height: "8.75", rx: "2.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 15v5M8.75 16.75L12 20l3.25-3.25" })
+  ] }),
+  "chevron-down": /* @__PURE__ */ jsx("path", { d: "M6.75 9.75L12 15l5.25-5.25" }),
+  "chevron-up": /* @__PURE__ */ jsx("path", { d: "M6.75 14.25L12 9l5.25 5.25" }),
+  check: /* @__PURE__ */ jsx("path", { d: "M5 12.5l4.9 4.9L19 6.75" }),
+  close: /* @__PURE__ */ jsx("path", { d: "M6.5 6.5l11 11M17.5 6.5l-11 11" }),
+  mixed: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7.25", strokeDasharray: "2.6 2.8" })
+};
+var FILL_BOX = { x: 4.25, y: 4.25, width: 15.5, height: 15.5, rx: 3 };
+var STYLE_ICONS = {
+  "fill-none": /* @__PURE__ */ jsx("rect", { ...FILL_BOX }),
+  "fill-semi": /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("rect", { ...FILL_BOX, fill: "currentColor", fillOpacity: 0.22 }) }),
+  "fill-solid": /* @__PURE__ */ jsx("rect", { ...FILL_BOX, fill: "currentColor" }),
+  // Hatching is texture, not outline: a lighter stroke keeps the block's weight
+  // level with the other three fill icons.
+  "fill-pattern": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { ...FILL_BOX }),
+    /* @__PURE__ */ jsx("path", { d: "M6.2 12.6l6.4-6.4M6.2 17.1l10.9-10.9M9.4 18.3l8.9-8.9M14.6 18.4l3.7-3.7", strokeWidth: 1.25 })
+  ] }),
+  "dash-draw": /* @__PURE__ */ jsx("path", { d: "M4 14.9c1.6-3.4 3.2-4.9 4.9-4.4 1.7.4 2.4 4 4.2 4.4 1.9.4 3.9-1.9 6.9-5.9" }),
+  "dash-solid": /* @__PURE__ */ jsx("path", { d: "M4.25 12h15.5" }),
+  "dash-dashed": /* @__PURE__ */ jsx("path", { d: "M4.5 12h15", strokeDasharray: "3.1 2.8" }),
+  // Round caps on a zero-length dash draw the dots; the wider stroke is the dot.
+  "dash-dotted": /* @__PURE__ */ jsx("path", { d: "M5 12h14", strokeDasharray: "0.01 4.35", strokeWidth: 2.6 }),
+  "size-s": /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", ...solid }),
+  "size-m": /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3.4", ...solid }),
+  "size-l": /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4.9", ...solid }),
+  "size-xl": /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6.6", ...solid }),
+  "align-left": /* @__PURE__ */ jsx("path", { d: "M4.5 6.5h15M4.5 12h7.5M4.5 17.5h11.5" }),
+  "align-center": /* @__PURE__ */ jsx("path", { d: "M4.5 6.5h15M8.25 12h7.5M6.25 17.5h11.5" }),
+  "align-right": /* @__PURE__ */ jsx("path", { d: "M4.5 6.5h15M12 12h7.5M8 17.5h11.5" }),
+  "valign-top": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 4.5h15" }),
+    /* @__PURE__ */ jsx("rect", { x: "7.5", y: "7.75", width: "9", height: "6.25", rx: "1.5" })
+  ] }),
+  "valign-middle": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 12h15" }),
+    /* @__PURE__ */ jsx("rect", { x: "7.5", y: "8.9", width: "9", height: "6.25", rx: "1.5" })
+  ] }),
+  "valign-bottom": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 19.5h15" }),
+    /* @__PURE__ */ jsx("rect", { x: "7.5", y: "10", width: "9", height: "6.25", rx: "1.5" })
+  ] }),
+  // A single-storey script "a": the other three fonts share the capital-A
+  // silhouette, so the handwriting option needs a different letter to stay
+  // legible at 20px.
+  "font-draw": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10.6", cy: "12.6", r: "4.4" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 6.3v8.9c0 1.5 1 2.5 2.5 2.5" })
+  ] }),
+  "font-sans": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5.5 19L12 5l6.5 14" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 14.5h8" })
+  ] }),
+  "font-serif": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M6.75 19L12 5l5.25 14" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.7 14.5h6.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.9 19h3.6M15.5 19h3.6" })
+  ] }),
+  "font-mono": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 19l4-13 4 13" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.6 14.9h4.8" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.75 5.75v12.5M19.25 5.75v12.5", strokeWidth: 1.4 })
+  ] })
+};
+var GEO_ICON_BOX = {
+  rectangle: [GEO_BOX, 12],
+  oval: [GEO_BOX, 10.5],
+  "arrow-left": [GEO_BOX, 13],
+  "arrow-right": [GEO_BOX, 13],
+  "arrow-up": [13, GEO_BOX],
+  "arrow-down": [13, GEO_BOX]
+};
+function getGeoIconBox(kind) {
+  return GEO_ICON_BOX[kind] ?? [GEO_BOX, GEO_BOX];
+}
+var GEO_ICON_PATHS = Object.fromEntries(
+  GEO_SHAPE_KINDS.map((kind) => {
+    const [w, h] = getGeoIconBox(kind);
+    return [kind, pathWordsToSvgD(getGeoGeometry(kind, w, h, false).toPathWords())];
+  })
+);
+var GEO_ICONS = Object.fromEntries(
+  GEO_SHAPE_KINDS.map((kind) => {
+    const [w, h] = getGeoIconBox(kind);
+    return [
+      `geo-${kind}`,
+      /* @__PURE__ */ jsx("g", { transform: `translate(${(ICON_GRID - w) / 2} ${(ICON_GRID - h) / 2})`, children: /* @__PURE__ */ jsx("path", { d: GEO_ICON_PATHS[kind] }) })
+    ];
+  })
+);
+var ICONS = { ...TOOL_ICONS, ...ACTION_ICONS, ...STYLE_ICONS, ...GEO_ICONS };
+var ICON_NAMES = Object.keys(ICONS).sort();
+function Icon({ name, size = 20, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: className ? `mocanvas-icon ${className}` : "mocanvas-icon",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: ICONS[name]
+    }
+  );
+}
+function isUrl(icon) {
+  return icon.includes("/") || icon.includes(".");
+}
+function TldrawUiIcon({ icon, label, small, invertIcon, className, style, color }) {
+  const classes = ["mocanvas-icon", small ? "mocanvas-icon--small" : null, className].filter(Boolean).join(" ");
+  const transform = invertIcon ? "scaleX(-1)" : void 0;
+  const size = small ? 16 : 20;
+  if (Object.prototype.hasOwnProperty.call(ICONS, icon)) {
+    return /* @__PURE__ */ jsx("span", { className: classes, style: { ...style, color, transform, display: "inline-flex" }, ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size }) });
+  }
+  if (isUrl(icon)) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: classes,
+        src: icon,
+        alt: label ?? "",
+        width: size,
+        height: size,
+        style: { ...style, transform },
+        ...label ? {} : { "aria-hidden": true }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${classes} mocanvas-icon--fallback`,
+      style: { ...style, color, transform, width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 600 },
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+      children: (label ?? icon).slice(0, 1).toUpperCase()
+    }
+  );
+}
+function TldrawUiButton({
+  type = "normal",
+  isChecked,
+  isActive,
+  disabled,
+  title,
+  className,
+  style,
+  id,
+  tabIndex,
+  role,
+  ref,
+  onClick,
+  onPointerDown,
+  onPointerUp,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  children,
+  ...rest
+}) {
+  const label = rest["aria-label"] ?? title;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      id,
+      role,
+      tabIndex,
+      className: ["mocanvas-btn", `mocanvas-btn--${type}`, className].filter(Boolean).join(" "),
+      style,
+      disabled,
+      ...label ? { "aria-label": label, "data-tooltip": title ?? label } : {},
+      ...isChecked === void 0 ? {} : { "aria-pressed": isChecked },
+      ...isActive ? { "aria-current": true } : {},
+      onClick,
+      onPointerDown,
+      onPointerUp,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      children
+    }
+  );
+}
+function TldrawUiButtonIcon({ icon, small, invertIcon, className }) {
+  return /* @__PURE__ */ jsx(TldrawUiIcon, { icon, ...small ? { small } : {}, ...invertIcon ? { invertIcon } : {}, className: ["mocanvas-btn-icon", className].filter(Boolean).join(" ") });
+}
+function TldrawUiButtonLabel({ className, children }) {
+  return /* @__PURE__ */ jsx("span", { className: ["mocanvas-btn-label", className].filter(Boolean).join(" "), children });
+}
+function TldrawUiButtonCheck({ checked, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["mocanvas-btn-check", className].filter(Boolean).join(" "),
+      "data-checked": checked,
+      "aria-hidden": "true",
+      style: { visibility: checked ? "visible" : "hidden", display: "inline-flex" },
+      children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "check", small: true })
+    }
+  );
+}
+var GAP = 8;
+var EDGE = 8;
+function placeNear(anchor, box, prefer, vw, vh) {
+  const above = anchor.top - box.height - GAP;
+  const below = anchor.bottom + GAP;
+  let top = prefer === "above" ? above : below;
+  if (prefer === "above" && above < EDGE && below + box.height <= vh - EDGE) top = below;
+  if (prefer === "below" && below + box.height > vh - EDGE && above >= EDGE) top = above;
+  top = Math.min(Math.max(top, EDGE), Math.max(EDGE, vh - box.height - EDGE));
+  let left = anchor.left + anchor.width / 2 - box.width / 2;
+  left = Math.min(Math.max(left, EDGE), Math.max(EDGE, vw - box.width - EDGE));
+  return { left, top };
+}
+function useClamped(getAnchor, prefer, deps) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const anchor = getAnchor();
+    if (!el || !anchor) {
+      setPos(null);
+      return;
+    }
+    const box = el.getBoundingClientRect();
+    setPos(placeNear(anchor, box, prefer, window.innerWidth, window.innerHeight));
+  }, deps);
+  return [ref, pos];
+}
+var HOVER_DELAY = 500;
+function UiTooltip() {
+  const [tip, setTip] = useState(null);
+  const timer = useRef(void 0);
+  const clear = useCallback(() => {
+    clearTimeout(timer.current);
+    setTip(null);
+  }, []);
+  useEffect(() => {
+    const read = (el) => {
+      const label = el.dataset["tooltip"];
+      if (!label) return null;
+      return { label, shortcut: el.dataset["shortcut"] ?? null, anchor: el.getBoundingClientRect() };
+    };
+    const target = (e) => {
+      const el = e.target?.closest?.("[data-tooltip]");
+      if (!el || el.matches(":disabled") || el.getAttribute("aria-disabled") === "true") return null;
+      return el;
+    };
+    const onOver = (e) => {
+      const el = target(e);
+      clearTimeout(timer.current);
+      if (!el) {
+        setTip(null);
+        return;
+      }
+      timer.current = setTimeout(() => setTip(read(el)), HOVER_DELAY);
+    };
+    const onFocus = (e) => {
+      const el = target(e);
+      clearTimeout(timer.current);
+      setTip(el && el.matches(":focus-visible") ? read(el) : null);
+    };
+    document.addEventListener("pointerover", onOver, true);
+    document.addEventListener("pointerdown", clear, true);
+    document.addEventListener("focusin", onFocus, true);
+    document.addEventListener("focusout", clear, true);
+    window.addEventListener("scroll", clear, true);
+    return () => {
+      clearTimeout(timer.current);
+      document.removeEventListener("pointerover", onOver, true);
+      document.removeEventListener("pointerdown", clear, true);
+      document.removeEventListener("focusin", onFocus, true);
+      document.removeEventListener("focusout", clear, true);
+      window.removeEventListener("scroll", clear, true);
+    };
+  }, [clear]);
+  const [ref, pos] = useClamped(() => tip?.anchor ?? null, "above", [tip]);
+  if (!tip) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "mocanvas-tooltip mocanvas-layer",
+      role: "tooltip",
+      style: pos ? { left: pos.left, top: pos.top } : { left: 0, top: 0, visibility: "hidden" },
+      children: [
+        tip.label,
+        tip.shortcut ? /* @__PURE__ */ jsx("kbd", { children: tip.shortcut }) : null
+      ]
+    }
+  );
+}
+function Popover({ anchorRef, open, onClose, label, cols = 5, prefer = "above", children }) {
+  const [ref, pos] = useClamped(() => anchorRef.current?.getBoundingClientRect() ?? null, prefer, [open, anchorRef]);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      const t = e.target;
+      if (ref.current?.contains(t) || anchorRef.current?.contains(t)) return;
+      onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+        anchorRef.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [open, onClose, anchorRef, ref]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "mocanvas-popover mocanvas-layer",
+      role: "menu",
+      "aria-label": label,
+      style: {
+        ["--mocanvas-popover-cols"]: cols,
+        ...pos ? { left: pos.left, top: pos.top } : { left: 0, top: 0, visibility: "hidden" }
+      },
+      onPointerDown: (e) => e.stopPropagation(),
+      children
+    }
+  );
+}
+function useAnchoredPosition(anchorRef, open, prefer) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const anchor = anchorRef.current?.getBoundingClientRect() ?? null;
+    if (!open || !el || !anchor) {
+      setPos(null);
+      return;
+    }
+    const box = el.getBoundingClientRect();
+    setPos(placeNear(anchor, box, prefer, window.innerWidth, window.innerHeight));
+  }, [open, prefer, anchorRef]);
+  return [ref, pos];
+}
+function useDismissable(open, layerRef, anchorRef, onClose) {
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event) => {
+      const target = event.target;
+      if (layerRef.current?.contains(target) || anchorRef.current?.contains(target)) return;
+      onClose();
+    };
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      onClose();
+      anchorRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [open, layerRef, anchorRef, onClose]);
+}
+var FOCUSABLE2 = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],button:not([disabled]),a[href],input:not([disabled])';
+function useMenuKeyboard(open, layerRef) {
+  useEffect(() => {
+    if (!open) return;
+    const layer = layerRef.current;
+    if (!layer) return;
+    const items = () => Array.from(layer.querySelectorAll(FOCUSABLE2));
+    const first = items()[0];
+    first?.focus();
+    const onKey = (event) => {
+      const list = items();
+      if (list.length === 0) return;
+      const index = list.indexOf(layer.ownerDocument.activeElement);
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        list[(index + 1) % list.length]?.focus();
+      } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        list[(index - 1 + list.length) % list.length]?.focus();
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        list[0]?.focus();
+      } else if (event.key === "End") {
+        event.preventDefault();
+        list[list.length - 1]?.focus();
+      }
+    };
+    layer.addEventListener("keydown", onKey);
+    return () => layer.removeEventListener("keydown", onKey);
+  }, [open, layerRef]);
+}
+function FloatingLayer({
+  anchorRef,
+  open,
+  onClose,
+  prefer = "below",
+  role = "menu",
+  label,
+  className,
+  keyboardNav = true,
+  children
+}) {
+  const [ref, pos] = useAnchoredPosition(anchorRef, open, prefer);
+  useDismissable(open, ref, anchorRef, onClose);
+  useMenuKeyboard(keyboardNav && open, ref);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(EditorPortal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: ["mocanvas-layer", className].filter(Boolean).join(" "),
+      role,
+      ...label ? { "aria-label": label } : {},
+      style: pos ? { position: "fixed", left: pos.left, top: pos.top } : { position: "fixed", left: 0, top: 0, visibility: "hidden" },
+      onPointerDown: (event) => event.stopPropagation(),
+      children
+    }
+  ) });
+}
+var DropdownContext = createContext(null);
+function useDropdown(component) {
+  const value = useContext(DropdownContext);
+  if (!value) throw new Error(`${component}: render inside <TldrawUiDropdownMenuRoot>.`);
+  return value;
+}
+function TldrawUiDropdownMenuRoot({ id, open: controlled, onOpenChange, children }) {
+  const generated = useId();
+  const [uncontrolled, setUncontrolled] = useState(false);
+  const anchorRef = useRef(null);
+  const open = controlled ?? uncontrolled;
+  const setOpen = useCallback(
+    (next) => {
+      if (controlled === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange]
+  );
+  const value = useMemo(() => ({ id: id ?? generated, open, setOpen, anchorRef }), [id, generated, open, setOpen]);
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children });
+}
+function TldrawUiDropdownMenuTrigger({ className, label, children }) {
+  const { id, open, setOpen, anchorRef } = useDropdown("TldrawUiDropdownMenuTrigger");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: (node) => {
+        anchorRef.current = node;
+      },
+      type: "button",
+      className: ["mocanvas-btn", className].filter(Boolean).join(" "),
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": `${id}-content`,
+      ...label ? { "aria-label": label, "data-tooltip": label } : {},
+      onClick: () => setOpen(!open),
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown" && !open) {
+          event.preventDefault();
+          setOpen(true);
+        }
+      },
+      children
+    }
+  );
+}
+function TldrawUiDropdownMenuContent({ label, className, side = "below", children }) {
+  const ctx = useDropdown("TldrawUiDropdownMenuContent");
+  const close = useCallback(() => ctx.setOpen(false), [ctx]);
+  return /* @__PURE__ */ jsx(
+    FloatingLayer,
+    {
+      anchorRef: ctx.anchorRef,
+      open: ctx.open,
+      onClose: close,
+      prefer: side,
+      role: "menu",
+      className: ["mocanvas-menu", className].filter(Boolean).join(" "),
+      ...label ? { label } : {},
+      children: /* @__PURE__ */ jsx("div", { id: `${ctx.id}-content`, className: "mocanvas-menu-list", children })
+    }
+  );
+}
+function TldrawUiDropdownMenuGroup({ label, className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: ["mocanvas-menu-group", className].filter(Boolean).join(" "), role: "group", ...label ? { "aria-label": label } : {}, children });
+}
+function TldrawUiDropdownMenuItem({ closeOnSelect = true, disabled, className, onSelect, children }) {
+  const ctx = useContext(DropdownContext);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: ["mocanvas-menu-item", className].filter(Boolean).join(" "),
+      disabled,
+      onClick: () => {
+        onSelect?.();
+        if (closeOnSelect) ctx?.setOpen(false);
+      },
+      children
+    }
+  );
+}
+function TldrawUiDropdownMenuCheckboxItem({ checked, disabled, title, className, onSelect, children }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      className: ["mocanvas-menu-item", className].filter(Boolean).join(" "),
+      disabled,
+      ...title ? { "data-tooltip": title } : {},
+      onClick: () => onSelect?.(),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TldrawUiButtonCheck, { checked })
+      ]
+    }
+  );
+}
+function TldrawUiDropdownMenuIndicator() {
+  return /* @__PURE__ */ jsx("span", { className: "mocanvas-menu-indicator", "aria-hidden": "true" });
+}
+var SubContext = createContext(null);
+function TldrawUiDropdownMenuSub({ id, open: controlled, onOpenChange, children }) {
+  const generated = useId();
+  const [uncontrolled, setUncontrolled] = useState(false);
+  const anchorRef = useRef(null);
+  const open = controlled ?? uncontrolled;
+  const setOpen = useCallback(
+    (next) => {
+      if (controlled === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange]
+  );
+  const value = useMemo(() => ({ id: id ?? generated, open, setOpen, anchorRef }), [id, generated, open, setOpen]);
+  return /* @__PURE__ */ jsx(SubContext.Provider, { value, children });
+}
+function TldrawUiDropdownMenuSubTrigger({ label, disabled, className, children }) {
+  const ctx = useContext(SubContext);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: (node) => {
+        if (ctx) ctx.anchorRef.current = node;
+      },
+      type: "button",
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx?.open ?? false,
+      className: ["mocanvas-menu-item", "mocanvas-menu-item--sub", className].filter(Boolean).join(" "),
+      disabled,
+      onClick: () => ctx?.setOpen(!ctx.open),
+      onKeyDown: (event) => {
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          event.stopPropagation();
+          ctx?.setOpen(true);
+        } else if (event.key === "ArrowLeft" && ctx?.open) {
+          event.preventDefault();
+          event.stopPropagation();
+          ctx.setOpen(false);
+        }
+      },
+      children: [
+        children ?? label,
+        /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "chevron-down", small: true })
+      ]
+    }
+  );
+}
+function TldrawUiDropdownMenuSubContent({ label, className, children }) {
+  const ctx = useContext(SubContext);
+  const close = useCallback(() => ctx?.setOpen(false), [ctx]);
+  if (!ctx) return null;
+  return /* @__PURE__ */ jsx(
+    FloatingLayer,
+    {
+      anchorRef: ctx.anchorRef,
+      open: ctx.open,
+      onClose: close,
+      prefer: "below",
+      role: "menu",
+      className: ["mocanvas-menu", "mocanvas-menu--sub", className].filter(Boolean).join(" "),
+      ...label ? { label } : {},
+      children: /* @__PURE__ */ jsx("div", { id: `${ctx.id}-content`, className: "mocanvas-menu-list", children })
+    }
+  );
+}
+var APPLE = {
+  mod: "\u2318",
+  cmd: "\u2318",
+  alt: "\u2325",
+  opt: "\u2325",
+  shift: "\u21E7",
+  ctrl: "\u2303",
+  enter: "\u21B5",
+  backspace: "\u232B",
+  del: "\u2326",
+  esc: "\u238B",
+  tab: "\u21E5",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192"
+};
+var OTHER = {
+  mod: "Ctrl",
+  cmd: "Ctrl",
+  alt: "Alt",
+  opt: "Alt",
+  shift: "Shift",
+  ctrl: "Ctrl",
+  enter: "Enter",
+  backspace: "Backspace",
+  del: "Delete",
+  esc: "Esc",
+  tab: "Tab",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192"
+};
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+}
+function kbdToKeys(kbd, isApple = isApplePlatform()) {
+  const table = isApple ? APPLE : OTHER;
+  const first = (kbd.split(",")[0] ?? "").trim();
+  if (first === "") return [];
+  return first.split("+").map((part) => part.trim()).filter(Boolean).map((part) => table[part.toLowerCase()] ?? (part.length === 1 ? part.toUpperCase() : part));
+}
+function TldrawUiKbd({ children, isApple, className }) {
+  const raw = typeof children === "string" ? children : String(children ?? "");
+  const keys = kbdToKeys(raw, isApple ?? isApplePlatform());
+  if (keys.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: ["mocanvas-kbd", className].filter(Boolean).join(" "), "aria-hidden": "true", children: keys.map((key, i) => /* @__PURE__ */ jsx("kbd", { children: key }, `${key}-${i}`)) });
+}
+function useCanUndo() {
+  const editor = useEditor();
+  return useValue("canUndo", () => editor.getCanUndo(), [editor]);
+}
+function useCanRedo() {
+  const editor = useEditor();
+  return useValue("canRedo", () => editor.getCanRedo(), [editor]);
+}
+function useReadonly() {
+  const editor = useEditor();
+  return useValue("isReadonly", () => editor.getIsReadonly(), [editor]);
+}
+function useUnlockedSelectedShapesCount(min = 1) {
+  const editor = useEditor();
+  return useValue("unlockedSelectedShapes", () => editor.getSelectedShapes().filter((shape) => !shape.isLocked).length >= min, [editor, min]);
+}
+function useCanApplySelectionAction() {
+  const readonly = useReadonly();
+  const hasUnlocked = useUnlockedSelectedShapesCount(1);
+  return !readonly && hasUnlocked;
+}
+function useHasLockedShapes() {
+  const editor = useEditor();
+  return useValue("hasLockedShapes", () => editor.getCurrentPageShapes().some((shape) => shape.isLocked), [editor]);
+}
+function useIsGridMode() {
+  const editor = useEditor();
+  return useValue("isGridMode", () => editor.getInstanceState().isGridMode, [editor]);
+}
+function useIsDarkMode() {
+  const editor = useEditor();
+  return useValue("isDarkMode", () => editor.getColorMode() === "dark", [editor]);
+}
+function useRelevantStyles() {
+  const editor = useEditor();
+  return useValue(
+    "relevantStyles",
+    () => {
+      const styles = editor.getSharedStyles();
+      if (styles.size === 0 && editor.getSelectedShapeIds().length > 0) return null;
+      return styles.size === 0 ? null : styles;
+    },
+    [editor]
+  );
+}
+function useActionState(actionId) {
+  const editor = useEditor();
+  return useValue(
+    "actionState",
+    () => {
+      const readonly = editor.getIsReadonly();
+      const shapes = editor.getSelectedShapes();
+      const unlocked = shapes.filter((shape) => !shape.isLocked).length;
+      const instance = editor.getInstanceState();
+      const user = editor.user;
+      const edits = (min) => ({ disabled: readonly || unlocked < min, checked: false });
+      switch (actionId) {
+        case "undo":
+          return { disabled: !editor.getCanUndo(), checked: false };
+        case "redo":
+          return { disabled: !editor.getCanRedo(), checked: false };
+        case "zoom-to-selection":
+        case "select-none":
+          return { disabled: shapes.length === 0, checked: false };
+        case "delete":
+        case "duplicate":
+        case "toggle-lock":
+        case "rotate-cw":
+        case "rotate-ccw":
+        case "bring-to-front":
+        case "bring-forward":
+        case "send-backward":
+        case "send-to-back":
+        case "flip-horizontal":
+        case "flip-vertical":
+          return edits(1);
+        case "group":
+        case "align-left":
+        case "align-center-horizontal":
+        case "align-right":
+        case "align-top":
+        case "align-center-vertical":
+        case "align-bottom":
+        case "stretch-horizontal":
+        case "stretch-vertical":
+          return edits(2);
+        case "distribute-horizontal":
+        case "distribute-vertical":
+        case "stack-horizontal":
+        case "stack-vertical":
+        case "pack":
+          return edits(3);
+        case "ungroup":
+          return { disabled: readonly || !shapes.some((shape) => shape.type === "group"), checked: false };
+        case "unlock-all":
+          return { disabled: readonly || !editor.getCurrentPageShapes().some((shape) => shape.isLocked), checked: false };
+        case "delete-page":
+          return { disabled: readonly || editor.getPages().length < 2, checked: false };
+        case "new-page":
+        case "duplicate-page":
+          return { disabled: readonly, checked: false };
+        case "toggle-grid":
+          return { disabled: false, checked: instance.isGridMode };
+        case "toggle-focus-mode":
+          return { disabled: false, checked: instance.isFocusMode };
+        case "toggle-debug-mode":
+          return { disabled: false, checked: instance.isDebugMode };
+        case "toggle-tool-lock":
+          return { disabled: readonly, checked: instance.isToolLocked };
+        // The preference is "transparent background", the record is
+        // "paint a background", so the tick is the negation.
+        case "toggle-transparent":
+          return { disabled: false, checked: !instance.exportBackground };
+        case "toggle-snap-mode":
+          return { disabled: false, checked: user.getIsSnapMode() };
+        case "toggle-wrap-mode":
+          return { disabled: false, checked: user.getIsWrapMode() };
+        case "toggle-dynamic-size-mode":
+          return { disabled: false, checked: user.getIsDynamicSizeMode() };
+        case "toggle-paste-at-cursor":
+          return { disabled: false, checked: user.getIsPasteAtCursorMode() };
+        case "toggle-edge-scrolling":
+          return { disabled: false, checked: user.getEdgeScrollSpeed() !== 0 };
+        case "toggle-reduce-motion":
+          return { disabled: false, checked: user.getAnimationSpeed() === 0 };
+        case "toggle-dark-mode":
+          return { disabled: false, checked: editor.getColorMode() === "dark" };
+        case "toggle-keyboard-shortcuts":
+          return { disabled: false, checked: user.getAreKeyboardShortcutsEnabled() };
+        default:
+          return { disabled: false, checked: false };
+      }
+    },
+    [editor, actionId]
+  );
+}
+var EventsContext = createContext(null);
+function TldrawUiEventsProvider({ onEvent, children }) {
+  return /* @__PURE__ */ jsx(EventsContext.Provider, { value: onEvent ?? null, children });
+}
+function useUiEvents() {
+  const handler = useContext(EventsContext);
+  return useCallback(
+    (name, data) => {
+      handler?.(name, data);
+    },
+    [handler]
+  );
+}
+var LANGUAGES = [
+  { locale: "ar", label: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629" },
+  { locale: "cs", label: "\u010Ce\u0161tina" },
+  { locale: "da", label: "Dansk" },
+  { locale: "de", label: "Deutsch" },
+  { locale: "en", label: "English" },
+  { locale: "es", label: "Espa\xF1ol" },
+  { locale: "fa", label: "\u0641\u0627\u0631\u0633\u06CC" },
+  { locale: "fi", label: "Suomi" },
+  { locale: "fr", label: "Fran\xE7ais" },
+  { locale: "he", label: "\u05E2\u05D1\u05E8\u05D9\u05EA" },
+  { locale: "hi", label: "\u0939\u093F\u0928\u094D\u0926\u0940" },
+  { locale: "hu", label: "Magyar" },
+  { locale: "it", label: "Italiano" },
+  { locale: "ja", label: "\u65E5\u672C\u8A9E" },
+  { locale: "ko", label: "\uD55C\uAD6D\uC5B4" },
+  { locale: "nl", label: "Nederlands" },
+  { locale: "no", label: "Norsk" },
+  { locale: "pl", label: "Polski" },
+  { locale: "pt", label: "Portugu\xEAs" },
+  { locale: "ru", label: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439" },
+  { locale: "sv", label: "Svenska" },
+  { locale: "tr", label: "T\xFCrk\xE7e" },
+  { locale: "uk", label: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430" },
+  { locale: "vi", label: "Ti\u1EBFng Vi\u1EC7t" },
+  { locale: "zh", label: "\u4E2D\u6587" }
+];
+var RTL_LANGUAGES = ["ar", "fa", "he", "ur"];
+function getDefaultTranslationLocale(locales = typeof navigator === "undefined" ? [] : navigator.languages ?? []) {
+  for (const locale of locales) {
+    for (const candidate of getLocaleChain(locale)) {
+      if (LANGUAGES.some((l) => l.locale === candidate)) return candidate;
+    }
+  }
+  return "en";
+}
+function isRtlLanguage(locale) {
+  return RTL_LANGUAGES.includes(locale.split(/[-_]/)[0] ?? locale);
+}
+var TranslationContext = createContext(null);
+function TldrawUiTranslationProvider({ overrides, children }) {
+  const editor = useEditor();
+  const locale = useValue("ui locale", () => editor.user.getLocale(), [editor]);
+  const value = useMemo(() => {
+    const messages = overrides ? Object.assign({}, ...getLocaleChain(locale).reverse().map((l) => overrides[l] ?? {})) : {};
+    return {
+      locale,
+      label: LANGUAGES.find((l) => l.locale === locale)?.label ?? locale,
+      dir: isRtlLanguage(locale) ? "rtl" : "ltr",
+      messages
+    };
+  }, [locale, overrides]);
+  return /* @__PURE__ */ jsx(TranslationContext.Provider, { value, children });
+}
+function useCurrentTranslation() {
+  const value = useContext(TranslationContext);
+  if (!value) throw new Error("useCurrentTranslation: render inside <TldrawUiTranslationProvider>.");
+  return value;
+}
+function useMaybeCurrentTranslation() {
+  return useContext(TranslationContext);
+}
+function useTranslation() {
+  const translation = useMaybeCurrentTranslation();
+  return useMemo(() => {
+    if (!translation) return (id) => id;
+    const dict = { [translation.locale]: translation.messages };
+    return (id) => resolveUiMessage(dict, translation.locale, id);
+  }, [translation]);
+}
+var useMsg = useTranslation;
+function useDirection() {
+  return useMaybeCurrentTranslation()?.dir ?? "ltr";
+}
+var MenuContext = createContext({ type: "menu", sourceId: "menu" });
+function TldrawUiMenuContextProvider({ type, sourceId, children }) {
+  const resolved = sourceId ?? (type === "context-menu" ? "context-menu" : type === "toolbar" ? "toolbar" : "menu");
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { type, sourceId: resolved }, children });
+}
+function useTldrawUiMenuContext() {
+  return useContext(MenuContext);
+}
+function TldrawUiMenuItem({ id, label, icon, kbd, title, disabled, isSelected, noClose, children, onSelect }) {
+  const { type, sourceId } = useTldrawUiMenuContext();
+  const msg = useTranslation();
+  const trackEvent = useUiEvents();
+  const text = label === void 0 ? void 0 : msg(label);
+  const select = () => {
+    onSelect?.(sourceId);
+    trackEvent(id, { source: sourceId });
+  };
+  switch (type) {
+    case "keyboard-shortcuts":
+      return /* @__PURE__ */ jsxs("div", { className: "mocanvas-shortcut-row", "data-item": id, children: [
+        /* @__PURE__ */ jsx("span", { className: "mocanvas-shortcut-label", children: text ?? id }),
+        kbd ? /* @__PURE__ */ jsx(TldrawUiKbd, { children: kbd }) : null
+      ] });
+    case "small-icons":
+    case "icons":
+    case "helper-buttons":
+    case "toolbar":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mocanvas-btn",
+          "data-item": id,
+          disabled,
+          "aria-label": text ?? id,
+          "data-tooltip": title ?? text ?? id,
+          ...kbd ? { "aria-keyshortcuts": kbd, "data-shortcut": kbd } : {},
+          ...isSelected === void 0 ? {} : { "aria-pressed": isSelected },
+          onClick: select,
+          children: icon ? /* @__PURE__ */ jsx(TldrawUiIcon, { icon, label: text ?? id }) : children ?? /* @__PURE__ */ jsx("span", { children: text ?? id })
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsxs(TldrawUiDropdownMenuItem, { closeOnSelect: !noClose, ...disabled ? { disabled } : {}, onSelect: select, children: [
+        icon ? /* @__PURE__ */ jsx(TldrawUiIcon, { icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "mocanvas-menu-item-label", children: children ?? text ?? id }),
+        kbd ? /* @__PURE__ */ jsx(TldrawUiKbd, { children: kbd }) : null
+      ] });
+  }
+}
+function TldrawUiMenuGroup({ id, label, className, children }) {
+  const { type } = useTldrawUiMenuContext();
+  const msg = useTranslation();
+  if (type === "small-icons" || type === "icons" || type === "toolbar" || type === "helper-buttons") {
+    return /* @__PURE__ */ jsx("div", { className: "mocanvas-menu-icon-group", "data-group": id, role: "group", ...label ? { "aria-label": msg(label) } : {}, children });
+  }
+  return /* @__PURE__ */ jsx(TldrawUiDropdownMenuGroup, { className: ["mocanvas-menu-group", className].filter(Boolean).join(" "), ...label ? { label: msg(label) } : {}, children });
+}
+function TldrawUiMenuSubmenu({ id, label, disabled, children }) {
+  const { type } = useTldrawUiMenuContext();
+  const msg = useTranslation();
+  const text = label ? msg(label) : id;
+  if (type === "small-icons" || type === "icons" || type === "toolbar" || type === "helper-buttons" || type === "keyboard-shortcuts") {
+    return /* @__PURE__ */ jsx("div", { className: "mocanvas-menu-icon-group", "data-group": id, role: "group", "aria-label": text, children });
+  }
+  return /* @__PURE__ */ jsxs(TldrawUiDropdownMenuSub, { id, children: [
+    /* @__PURE__ */ jsx(TldrawUiDropdownMenuSubTrigger, { label: text, ...disabled ? { disabled } : {} }),
+    /* @__PURE__ */ jsx(TldrawUiDropdownMenuSubContent, { label: text, children })
+  ] });
+}
+function TldrawUiMenuCheckboxItem({ id, label, icon, kbd, title, checked = false, disabled, onSelect }) {
+  const { type, sourceId } = useTldrawUiMenuContext();
+  const msg = useTranslation();
+  const trackEvent = useUiEvents();
+  const text = label ? msg(label) : id;
+  const select = () => {
+    onSelect?.(sourceId);
+    trackEvent(id, { source: sourceId });
+  };
+  if (type === "keyboard-shortcuts") {
+    return /* @__PURE__ */ jsxs("div", { className: "mocanvas-shortcut-row", "data-item": id, children: [
+      /* @__PURE__ */ jsx("span", { className: "mocanvas-shortcut-label", children: text }),
+      kbd ? /* @__PURE__ */ jsx(TldrawUiKbd, { children: kbd }) : null
+    ] });
+  }
+  if (type === "small-icons" || type === "icons" || type === "toolbar" || type === "helper-buttons") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mocanvas-btn",
+        "data-item": id,
+        role: "checkbox",
+        "aria-checked": checked,
+        "aria-label": text,
+        "data-tooltip": title ?? text,
+        disabled,
+        onClick: select,
+        children: icon ? /* @__PURE__ */ jsx(TldrawUiIcon, { icon, label: text }) : /* @__PURE__ */ jsx("span", { children: text })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(TldrawUiDropdownMenuCheckboxItem, { checked, ...disabled ? { disabled } : {}, ...title ? { title } : {}, onSelect: select, children: [
+    icon ? /* @__PURE__ */ jsx(TldrawUiIcon, { icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "mocanvas-menu-item-label", children: text }),
+    kbd ? /* @__PURE__ */ jsx(TldrawUiKbd, { children: kbd }) : null
+  ] });
+}
+function TldrawUiMenuActionItem({ actionId, label, icon, disabled, noClose }) {
+  const actions = useActions();
+  const state = useActionState(actionId);
+  const action = actions[actionId];
+  if (!action) return null;
+  return /* @__PURE__ */ jsx(
+    TldrawUiMenuItem,
+    {
+      id: action.id,
+      label: label ?? action.label,
+      ...icon ?? action.icon ? { icon: icon ?? action.icon } : {},
+      ...action.kbd ? { kbd: action.kbd } : {},
+      ...disabled ?? action.disabled ?? state.disabled ? { disabled: true } : {},
+      ...noClose ? { noClose } : {},
+      onSelect: (source) => action.onSelect(source)
+    }
+  );
+}
+function TldrawUiMenuActionCheckboxItem({ actionId, label, icon, checked, disabled }) {
+  const actions = useActions();
+  const state = useActionState(actionId);
+  const action = actions[actionId];
+  if (!action) return null;
+  const isChecked = checked ?? (typeof action.meta?.["checked"] === "boolean" ? action.meta["checked"] : state.checked);
+  return /* @__PURE__ */ jsx(
+    TldrawUiMenuCheckboxItem,
+    {
+      id: action.id,
+      label: label ?? action.label,
+      ...icon ?? action.icon ? { icon: icon ?? action.icon } : {},
+      ...action.kbd ? { kbd: action.kbd } : {},
+      checked: isChecked,
+      ...disabled ?? action.disabled ?? state.disabled ? { disabled: true } : {},
+      onSelect: (source) => action.onSelect(source)
+    }
+  );
+}
+function TldrawUiMenuToolItem({ toolId, label, icon, disabled }) {
+  const tools = useTools();
+  const tool = tools[toolId];
+  const isSelected = useIsToolSelected(tool);
+  if (!tool) return null;
+  return /* @__PURE__ */ jsx(
+    TldrawUiMenuItem,
+    {
+      id: tool.id,
+      label: label ?? tool.label,
+      icon: icon ?? tool.icon,
+      ...tool.kbd ? { kbd: tool.kbd } : {},
+      ...disabled ?? tool.disabled ? { disabled: true } : {},
+      isSelected,
+      onSelect: (source) => tool.onSelect(source)
+    }
+  );
+}
+function DefaultKeyboardShortcutsDialogContent() {
+  const tools = useTools();
+  const actions = useActions();
+  const toolItems = Object.values(tools).filter((tool) => tool.kbd);
+  const actionItems = Object.values(actions).filter((action) => action.kbd);
+  return /* @__PURE__ */ jsxs(TldrawUiMenuContextProvider, { type: "keyboard-shortcuts", children: [
+    /* @__PURE__ */ jsxs("section", { className: "mocanvas-shortcut-section", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Tools" }),
+      toolItems.map((tool) => /* @__PURE__ */ jsx(TldrawUiMenuItem, { id: tool.id, label: tool.label, kbd: tool.kbd }, tool.id))
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "mocanvas-shortcut-section", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Actions" }),
+      actionItems.map((action) => /* @__PURE__ */ jsx(TldrawUiMenuItem, { id: action.id, label: action.label, kbd: action.kbd }, action.id))
+    ] })
+  ] });
+}
+function DefaultKeyboardShortcutsDialog({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(TldrawUiDialogHeader, { children: [
+      /* @__PURE__ */ jsx(TldrawUiDialogTitle, { children: "Keyboard shortcuts" }),
+      /* @__PURE__ */ jsx(TldrawUiDialogCloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsx(TldrawUiDialogBody, { className: "mocanvas-shortcuts", children: children ?? /* @__PURE__ */ jsx(DefaultKeyboardShortcutsDialogContent, {}) })
+  ] });
+}
+function KeyboardShortcutsDialogContents(_props) {
+  return /* @__PURE__ */ jsx(DefaultKeyboardShortcutsDialog, {});
+}
+
+export { DefaultDialogs, DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, ExampleDialog, FloatingLayer, GEO_BOX, GEO_ICON_PATHS, ICONS, ICON_GRID, ICON_NAMES, Icon, KeyboardShortcutsDialogContents, LANGUAGES, Popover, RTL_LANGUAGES, TldrawUiButton, TldrawUiButtonCheck, TldrawUiButtonIcon, TldrawUiButtonLabel, TldrawUiDialogBody, TldrawUiDialogCloseButton, TldrawUiDialogFooter, TldrawUiDialogHeader, TldrawUiDialogTitle, TldrawUiDialogsProvider, TldrawUiDropdownMenuCheckboxItem, TldrawUiDropdownMenuContent, TldrawUiDropdownMenuGroup, TldrawUiDropdownMenuIndicator, TldrawUiDropdownMenuItem, TldrawUiDropdownMenuRoot, TldrawUiDropdownMenuSub, TldrawUiDropdownMenuSubContent, TldrawUiDropdownMenuSubTrigger, TldrawUiDropdownMenuTrigger, TldrawUiEventsProvider, TldrawUiIcon, TldrawUiKbd, TldrawUiMenuActionCheckboxItem, TldrawUiMenuActionItem, TldrawUiMenuCheckboxItem, TldrawUiMenuContextProvider, TldrawUiMenuGroup, TldrawUiMenuItem, TldrawUiMenuSubmenu, TldrawUiMenuToolItem, TldrawUiTranslationProvider, UiTooltip, getDefaultTranslationLocale, getGeoIconBox, isRtlLanguage, kbdToKeys, placeNear, useActionState, useAnchoredPosition, useCanApplySelectionAction, useCanRedo, useCanUndo, useCurrentTranslation, useDialogs, useDirection, useDismissable, useHasLockedShapes, useIsDarkMode, useIsGridMode, useMaybeCurrentTranslation, useMenuKeyboard, useMsg, useReadonly, useRelevantStyles, useTldrawUiMenuContext, useTranslation, useUiEvents, useUnlockedSelectedShapesCount };
+//# sourceMappingURL=chunk-QDUQZXE4.js.map
+//# sourceMappingURL=chunk-QDUQZXE4.js.map