@mocanvas/mocanvas 4.0.2 → 4.1.1

package/dist/{chunk-QDUQZXE4.js → chunk-YMUR46N6.js}

@@ -2,6 +2,7 @@ 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';
+import { atom } from '@mocanvas/state';
 
 var DialogsContext = createContext(null);
 var NOOP = { addDialog: () => "", removeDialog: () => {
@@ -180,6 +181,16 @@ var TOOL_ICONS = {
     ] }),
     /* @__PURE__ */ jsx("path", { d: "M7 19.4h10.5" })
   ] }),
+  highlight: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9.15 14.9L6.1 11.85l7.15-6.4a2.15 2.15 0 0 1 3.05 3.05z" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.6 15.7l-2.9.6.5-2.95" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.2 20.05h13.6", strokeWidth: 2.8 })
+  ] }),
+  laser: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.55" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3.1v3.15M12 17.75v3.15M3.1 12h3.15M17.75 12h3.15" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.7 5.7l2.2 2.2M16.1 16.1l2.2 2.2M18.3 5.7l-2.2 2.2M7.9 16.1l-2.2 2.2" })
+  ] }),
   text: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { d: "M5 6.25V4.5h14v1.75" }),
     /* @__PURE__ */ jsx("path", { d: "M12 4.5v15" }),
@@ -603,6 +614,28 @@ function Popover({ anchorRef, open, onClose, label, cols = 5, prefer = "above",
     }
   );
 }
+var LayerNestingContext = createContext(null);
+function useLayerNesting() {
+  const parent = useContext(LayerNestingContext);
+  const nested = useRef(/* @__PURE__ */ new Set());
+  return useMemo(
+    () => ({
+      register(node) {
+        nested.current.add(node);
+        const releaseParent = parent?.register(node);
+        return () => {
+          nested.current.delete(node);
+          releaseParent?.();
+        };
+      },
+      containsNested(target) {
+        for (const node of nested.current) if (node.contains(target)) return true;
+        return false;
+      }
+    }),
+    [parent]
+  );
+}
 function useAnchoredPosition(anchorRef, open, prefer) {
   const ref = useRef(null);
   const [pos, setPos] = useState(null);
@@ -618,16 +651,19 @@ function useAnchoredPosition(anchorRef, open, prefer) {
   }, [open, prefer, anchorRef]);
   return [ref, pos];
 }
-function useDismissable(open, layerRef, anchorRef, onClose) {
+function useDismissable(open, layerRef, anchorRef, onClose, containsNested) {
   useEffect(() => {
     if (!open) return;
     const onDown = (event) => {
       const target = event.target;
       if (layerRef.current?.contains(target) || anchorRef.current?.contains(target)) return;
+      if (containsNested?.(target)) return;
       onClose();
     };
     const onKey = (event) => {
       if (event.key !== "Escape") return;
+      if (isTypingTarget(event.target)) return;
+      if (containsNested?.(event.target)) return;
       event.stopPropagation();
       onClose();
       anchorRef.current?.focus();
@@ -638,9 +674,14 @@ function useDismissable(open, layerRef, anchorRef, onClose) {
       document.removeEventListener("pointerdown", onDown, true);
       document.removeEventListener("keydown", onKey, true);
     };
-  }, [open, layerRef, anchorRef, onClose]);
+  }, [open, layerRef, anchorRef, onClose, containsNested]);
 }
 var FOCUSABLE2 = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],button:not([disabled]),a[href],input:not([disabled])';
+function isTypingTarget(target) {
+  const el = target;
+  if (!el || typeof el.tagName !== "string") return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable === true;
+}
 function useMenuKeyboard(open, layerRef) {
   useEffect(() => {
     if (!open) return;
@@ -650,6 +691,7 @@ function useMenuKeyboard(open, layerRef) {
     const first = items()[0];
     first?.focus();
     const onKey = (event) => {
+      if (isTypingTarget(event.target)) return;
       const list = items();
       if (list.length === 0) return;
       const index = list.indexOf(layer.ownerDocument.activeElement);
@@ -683,8 +725,15 @@ function FloatingLayer({
   children
 }) {
   const [ref, pos] = useAnchoredPosition(anchorRef, open, prefer);
-  useDismissable(open, ref, anchorRef, onClose);
+  const parent = useContext(LayerNestingContext);
+  const nesting = useLayerNesting();
+  useDismissable(open, ref, anchorRef, onClose, nesting.containsNested);
   useMenuKeyboard(keyboardNav && open, ref);
+  useEffect(() => {
+    const node = ref.current;
+    if (!open || !node || !parent) return;
+    return parent.register(node);
+  }, [open, parent, ref]);
   if (!open) return null;
   return /* @__PURE__ */ jsx(EditorPortal, { children: /* @__PURE__ */ jsx(
     "div",
@@ -695,7 +744,7 @@ function FloatingLayer({
       ...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
+      children: /* @__PURE__ */ jsx(LayerNestingContext.Provider, { value: nesting, children })
     }
   ) });
 }
@@ -1114,11 +1163,13 @@ function TldrawUiTranslationProvider({ overrides, children }) {
   const locale = useValue("ui locale", () => editor.user.getLocale(), [editor]);
   const value = useMemo(() => {
     const messages = overrides ? Object.assign({}, ...getLocaleChain(locale).reverse().map((l) => overrides[l] ?? {})) : {};
+    const locales = overrides ? Object.keys(overrides).filter((l) => Object.keys(overrides[l] ?? {}).length > 0) : [];
     return {
       locale,
       label: LANGUAGES.find((l) => l.locale === locale)?.label ?? locale,
       dir: isRtlLanguage(locale) ? "rtl" : "ltr",
-      messages
+      messages,
+      locales
     };
   }, [locale, overrides]);
   return /* @__PURE__ */ jsx(TranslationContext.Provider, { value, children });
@@ -1140,6 +1191,14 @@ function useTranslation() {
   }, [translation]);
 }
 var useMsg = useTranslation;
+function useAvailableTranslationLocales() {
+  const translation = useMaybeCurrentTranslation();
+  const locales = translation?.locales;
+  return useMemo(
+    () => (locales ?? []).map((locale) => LANGUAGES.find((l) => l.locale === locale) ?? { locale, label: locale }),
+    [locales]
+  );
+}
 function useDirection() {
   return useMaybeCurrentTranslation()?.dir ?? "ltr";
 }
@@ -1306,20 +1365,398 @@ function TldrawUiMenuToolItem({ toolId, label, icon, disabled }) {
     }
   );
 }
-function DefaultKeyboardShortcutsDialogContent() {
+var debugStatsOpen = atom("debugStatsOpen", false);
+function isEditable(t) {
+  return t instanceof HTMLElement && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable);
+}
+var clipboardFallback = "";
+var KEYBOARD_SHORTCUTS = [
+  // ---- edit ---------------------------------------------------------------
+  { id: "undo", label: "Undo", kbd: "mod+z", group: "Edit", run: (editor) => void editor.undo() },
+  { id: "redo", label: "Redo", kbd: "mod+shift+z", also: ["mod+y"], group: "Edit", run: (editor) => void editor.redo() },
+  { id: "select-all", label: "Select all", kbd: "mod+a", group: "Edit", run: (editor) => void editor.selectAll() },
+  {
+    id: "duplicate",
+    label: "Duplicate",
+    kbd: "mod+d",
+    group: "Edit",
+    run: (editor) => {
+      const ids = editor.getSelectedShapeIds();
+      if (ids.length === 0) return;
+      editor.markHistoryStoppingPoint("duplicate");
+      editor.setSelectedShapes(editor.duplicateShapes(ids));
+    }
+  },
+  {
+    id: "copy",
+    label: "Copy",
+    kbd: "mod+c",
+    group: "Edit",
+    run: (editor) => writeSelectionToClipboard(editor) ? void 0 : false
+  },
+  {
+    id: "cut",
+    label: "Cut",
+    kbd: "mod+x",
+    group: "Edit",
+    run: (editor) => {
+      if (!writeSelectionToClipboard(editor)) return false;
+      editor.markHistoryStoppingPoint("cut");
+      editor.deleteShapes(editor.getSelectedShapeIds());
+      return void 0;
+    }
+  },
+  {
+    id: "paste",
+    label: "Paste",
+    kbd: "mod+v",
+    group: "Edit",
+    run: (editor) => {
+      const paste = (text) => {
+        try {
+          const data = JSON.parse(text);
+          if (data.type !== "application/mocanvas" || !Array.isArray(data.shapes)) return;
+          editor.markHistoryStoppingPoint("paste");
+          editor.putContentOntoCurrentPage(data, { point: editor.getViewportPageCenter() });
+        } catch {
+        }
+      };
+      if (navigator.clipboard?.readText) navigator.clipboard.readText().then(paste, () => clipboardFallback && paste(clipboardFallback));
+      else if (clipboardFallback) paste(clipboardFallback);
+    }
+  },
+  // ---- arrange ------------------------------------------------------------
+  {
+    id: "group",
+    label: "Group",
+    kbd: "mod+g",
+    group: "Arrange",
+    run: (editor) => {
+      const ids = editor.getSelectedShapeIds();
+      if (ids.length === 0) return;
+      editor.markHistoryStoppingPoint("group");
+      editor.groupShapes(ids);
+    }
+  },
+  {
+    id: "ungroup",
+    label: "Ungroup",
+    kbd: "mod+shift+g",
+    group: "Arrange",
+    run: (editor) => {
+      const ids = editor.getSelectedShapeIds();
+      if (ids.length === 0) return;
+      editor.markHistoryStoppingPoint("ungroup");
+      editor.ungroupShapes(ids);
+    }
+  },
+  {
+    id: "toggle-lock",
+    label: "Lock or unlock",
+    kbd: "mod+shift+l",
+    group: "Arrange",
+    run: (editor) => {
+      editor.markHistoryStoppingPoint("lock");
+      editor.toggleLock();
+    }
+  },
+  { id: "bring-forward", label: "Bring forward", kbd: "mod+]", group: "Arrange", run: (editor) => void editor.bringForward() },
+  { id: "bring-to-front", label: "Bring to front", kbd: "mod+alt+]", group: "Arrange", run: (editor) => void editor.bringToFront() },
+  { id: "send-backward", label: "Send backward", kbd: "mod+[", group: "Arrange", run: (editor) => void editor.sendBackward() },
+  { id: "send-to-back", label: "Send to back", kbd: "mod+alt+[", group: "Arrange", run: (editor) => void editor.sendToBack() },
+  // ---- view ---------------------------------------------------------------
+  { id: "zoom-in", label: "Zoom in", kbd: "mod+=", also: ["mod++", "mod+shift+="], group: "View", run: (editor) => void editor.zoomIn() },
+  { id: "zoom-out", label: "Zoom out", kbd: "mod+-", group: "View", run: (editor) => void editor.zoomOut() },
+  { id: "reset-zoom", label: "Reset zoom", kbd: "mod+0", group: "View", run: (editor) => void editor.resetZoom() },
+  { id: "zoom-to-fit", label: "Zoom to fit", kbd: "mod+1", group: "View", run: (editor) => void editor.zoomToFit() },
+  { id: "zoom-to-selection", label: "Zoom to selection", kbd: "mod+2", group: "View", run: (editor) => void editor.zoomToSelection() },
+  {
+    id: "toggle-grid",
+    label: "Show grid",
+    kbd: "mod+'",
+    group: "View",
+    run: (editor) => void editor.updateInstanceState({ isGridMode: !editor.getInstanceState().isGridMode })
+  },
+  {
+    id: "toggle-focus-mode",
+    label: "Focus mode",
+    kbd: "mod+.",
+    group: "View",
+    run: (editor) => void editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
+  },
+  {
+    id: "toggle-debug-stats",
+    label: "Frame statistics",
+    // Not ⌥D: that belongs to Align right, which the Arrange menu advertises
+    // and which is one of a coherent ⌥A/H/D/W/V/S set — breaking the set so
+    // one of its members opens a developer overlay is the wrong trade. The
+    // overlay takes the accelerator-plus-⌥ spelling instead.
+    kbd: "mod+alt+d",
+    group: "View",
+    run: () => void debugStatsOpen.set(!debugStatsOpen.get())
+  },
+  // ---- canvas -------------------------------------------------------------
+  {
+    id: "toggle-tool-lock",
+    label: "Tool lock",
+    kbd: "q",
+    group: "Canvas",
+    run: (editor) => void editor.updateInstanceState({ isToolLocked: !editor.getInstanceState().isToolLocked })
+  }
+];
+function writeSelectionToClipboard(editor) {
+  const ids = editor.getSelectedShapeIds();
+  if (ids.length === 0) return false;
+  const content = editor.getContentFromCurrentPage(ids);
+  if (!content) return false;
+  const text = JSON.stringify({ type: "application/mocanvas", ...content });
+  navigator.clipboard?.writeText(text).catch(() => {
+  });
+  clipboardFallback = text;
+  return true;
+}
+function pressedKeyNames(event) {
+  const names = [];
+  const key = event.key.toLowerCase();
+  if (key) names.push(key);
+  const code = event.code;
+  const fromCode = /^Key[A-Z]$/.test(code) ? code.slice(3).toLowerCase() : /^Digit[0-9]$/.test(code) ? code.slice(5) : PUNCTUATION_CODES[code];
+  if (fromCode && !names.includes(fromCode)) names.push(fromCode);
+  return names;
+}
+var PUNCTUATION_CODES = {
+  Equal: "=",
+  Minus: "-",
+  BracketLeft: "[",
+  BracketRight: "]",
+  Quote: "'",
+  Period: ".",
+  Comma: ",",
+  Slash: "/",
+  Semicolon: ";",
+  Backslash: "\\"
+};
+function bindingString(mod, alt, shift, key) {
+  return `${mod ? "mod+" : ""}${alt ? "alt+" : ""}${shift ? "shift+" : ""}${key}`;
+}
+function normalizeKbd(kbd) {
+  const parts = kbd.split("+").map((part) => part.trim().toLowerCase()).filter(Boolean);
+  const key = kbd.trim().endsWith("+") ? "+" : parts.pop() ?? "";
+  const set = new Set(parts);
+  return bindingString(set.has("mod") || set.has("cmd") || set.has("ctrl"), set.has("alt") || set.has("opt"), set.has("shift"), key);
+}
+function pressedBindings(e) {
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+  if (isMac ? e.ctrlKey : e.metaKey) return [];
+  const mod = isMac ? e.metaKey : e.ctrlKey;
+  return pressedKeyNames(e).map((name) => bindingString(mod, e.altKey, e.shiftKey, name));
+}
+function buildShortcutIndex(shortcuts = KEYBOARD_SHORTCUTS) {
+  const index = /* @__PURE__ */ new Map();
+  for (const shortcut of shortcuts) {
+    for (const binding of [shortcut.kbd, ...shortcut.also ?? []]) {
+      const normalized = normalizeKbd(binding);
+      if (!index.has(normalized)) index.set(normalized, shortcut);
+    }
+  }
+  return index;
+}
+var TOOL_KEYS = {
+  v: { tool: "select" },
+  h: { tool: "hand" },
+  r: { tool: "geo", geo: "rectangle" },
+  o: { tool: "geo", geo: "ellipse" },
+  d: { tool: "draw" },
+  p: { tool: "draw" },
+  b: { tool: "draw" },
+  e: { tool: "eraser" },
+  n: { tool: "note" },
+  t: { tool: "text" },
+  a: { tool: "arrow", optional: true },
+  l: { tool: "line", optional: true },
+  f: { tool: "frame", optional: true }
+};
+function useKeyboardShortcuts(editor, options = {}) {
+  const bindTools = options.tools ?? true;
+  useEffect(() => {
+    if (!editor) return;
+    const isMac = /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+    const index = buildShortcutIndex();
+    const onKeyDown = (e) => {
+      if (isEditable(e.target)) return;
+      if (editor.getEditingShapeId()) return;
+      const mod = isMac ? e.metaKey : e.ctrlKey;
+      if (isMac ? e.ctrlKey : e.metaKey) return;
+      for (const name of pressedKeyNames(e)) {
+        const shortcut = index.get(bindingString(mod, e.altKey, e.shiftKey, name));
+        if (!shortcut) continue;
+        if (shortcut.run(editor, e) !== false) e.preventDefault();
+        return;
+      }
+      if (mod || e.altKey || !bindTools) return;
+      const tool = TOOL_KEYS[e.key.toLowerCase()];
+      if (!tool) return;
+      if (tool.optional && !editor.root.children?.[tool.tool]) return;
+      editor.setCurrentTool(tool.tool, tool.geo ? { geo: tool.geo } : void 0);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [editor, bindTools]);
+}
+function isEditable2(t) {
+  return t instanceof HTMLElement && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable);
+}
+function toolKeyMap(tools, isReadonly) {
+  const map = /* @__PURE__ */ new Map();
+  for (const tool of Object.values(tools)) {
+    if (tool.disabled) continue;
+    if (isReadonly && !tool.readonlyOk) continue;
+    if (!tool.kbd) continue;
+    for (const raw of tool.kbd.split(",")) {
+      const key = raw.trim().toLowerCase();
+      if (key === "" || key.includes("+")) continue;
+      if (!map.has(key)) map.set(key, tool.id);
+    }
+  }
+  return map;
+}
+function useToolShortcuts() {
+  const editor = useEditor();
   const tools = useTools();
+  const toolsRef = useRef(tools);
+  toolsRef.current = tools;
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.shiftKey && e.key.length === 1 && /[a-z0-9]/i.test(e.key)) return;
+      if (isEditable2(e.target)) return;
+      if (editor.getEditingShapeId()) return;
+      const map = toolKeyMap(toolsRef.current, editor.getInstanceState().isReadonly);
+      const id = map.get(e.key.toLowerCase());
+      if (id === void 0) return;
+      const tool = toolsRef.current[id];
+      if (!tool) return;
+      e.preventDefault();
+      tool.onSelect("kbd");
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [editor]);
+}
+function ToolShortcuts() {
+  useToolShortcuts();
+  return null;
+}
+function isEditable3(t) {
+  return t instanceof HTMLElement && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable);
+}
+function actionKeyMap(actions, isReadonly) {
+  const owned = buildShortcutIndex();
+  const map = /* @__PURE__ */ new Map();
+  for (const action of Object.values(actions)) {
+    if (action.disabled) continue;
+    if (isReadonly && !action.readonlyOk) continue;
+    if (!action.kbd) continue;
+    for (const raw of action.kbd.split(",")) {
+      const binding = raw.trim();
+      if (binding === "") continue;
+      const normalized = normalizeKbd(binding);
+      if (owned.has(normalized)) continue;
+      if (!map.has(normalized)) map.set(normalized, action.id);
+    }
+  }
+  return map;
+}
+function useActionShortcuts() {
+  const editor = useEditor();
   const actions = useActions();
-  const toolItems = Object.values(tools).filter((tool) => tool.kbd);
-  const actionItems = Object.values(actions).filter((action) => action.kbd);
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (isEditable3(e.target)) return;
+      if (editor.getEditingShapeId()) return;
+      const map = actionKeyMap(actionsRef.current, editor.getInstanceState().isReadonly);
+      for (const binding of pressedBindings(e)) {
+        const id = map.get(binding);
+        if (id === void 0) continue;
+        const action = actionsRef.current[id];
+        if (!action) continue;
+        e.preventDefault();
+        action.onSelect("kbd");
+        return;
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [editor]);
+}
+function ActionShortcuts() {
+  useActionShortcuts();
+  return null;
+}
+function useBoundToolShortcuts() {
+  const tools = useTools();
+  const readonly = useReadonly();
+  return useMemo(() => {
+    const bound = toolKeyMap(tools, readonly);
+    const keysByTool = /* @__PURE__ */ new Map();
+    for (const [key, toolId] of bound) {
+      const keys = keysByTool.get(toolId);
+      if (keys) keys.push(key);
+      else keysByTool.set(toolId, [key]);
+    }
+    const rows = [];
+    for (const tool of Object.values(tools)) {
+      const keys = keysByTool.get(tool.id);
+      if (!keys || keys.length === 0) continue;
+      rows.push({ id: tool.id, label: tool.label, kbd: keys.join(",") });
+    }
+    return rows;
+  }, [tools, readonly]);
+}
+function useBoundActionShortcuts() {
+  const actions = useActions();
+  const readonly = useReadonly();
+  return useMemo(() => {
+    const bound = actionKeyMap(actions, readonly);
+    const keysByAction = /* @__PURE__ */ new Map();
+    for (const [key, actionId] of bound) {
+      const keys = keysByAction.get(actionId);
+      if (keys) keys.push(key);
+      else keysByAction.set(actionId, [key]);
+    }
+    const rows = [];
+    for (const action of Object.values(actions)) {
+      const keys = keysByAction.get(action.id);
+      if (!keys || keys.length === 0) continue;
+      rows.push({ id: action.id, label: action.label, kbd: keys.join(",") });
+    }
+    return rows;
+  }, [actions, readonly]);
+}
+var GROUP_ORDER = ["Edit", "View", "Arrange", "Canvas"];
+function groupKeyboardShortcuts(shortcuts = KEYBOARD_SHORTCUTS) {
+  return GROUP_ORDER.map((group) => ({
+    group,
+    rows: shortcuts.filter((s) => s.group === group).map((s) => ({ id: s.id, label: s.label, kbd: s.kbd }))
+  })).filter((section) => section.rows.length > 0);
+}
+function Section({ title, rows }) {
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "mocanvas-shortcut-section", "data-section": title, children: [
+    /* @__PURE__ */ jsx("h3", { children: title }),
+    rows.map((row) => /* @__PURE__ */ jsx(TldrawUiMenuItem, { id: row.id, label: row.label, kbd: row.kbd }, row.id))
+  ] });
+}
+function DefaultKeyboardShortcutsDialogContent() {
+  const toolRows = useBoundToolShortcuts();
+  const actionRows = useBoundActionShortcuts();
+  const sections = groupKeyboardShortcuts();
   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))
-    ] })
+    /* @__PURE__ */ jsx(Section, { title: "Tools", rows: toolRows }),
+    sections.map((section) => /* @__PURE__ */ jsx(Section, { title: section.group, rows: section.rows }, section.group)),
+    /* @__PURE__ */ jsx(Section, { title: "Actions", rows: actionRows })
   ] });
 }
 function DefaultKeyboardShortcutsDialog({ children }) {
@@ -1335,6 +1772,6 @@ 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
+export { ActionShortcuts, DefaultDialogs, DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, ExampleDialog, FloatingLayer, GEO_BOX, GEO_ICON_PATHS, ICONS, ICON_GRID, ICON_NAMES, Icon, KEYBOARD_SHORTCUTS, 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, ToolShortcuts, UiTooltip, actionKeyMap, buildShortcutIndex, debugStatsOpen, getDefaultTranslationLocale, getGeoIconBox, groupKeyboardShortcuts, isRtlLanguage, kbdToKeys, normalizeKbd, placeNear, toolKeyMap, useActionShortcuts, useActionState, useAnchoredPosition, useAvailableTranslationLocales, useBoundActionShortcuts, useBoundToolShortcuts, useCanApplySelectionAction, useCanRedo, useCanUndo, useCurrentTranslation, useDialogs, useDirection, useDismissable, useHasLockedShapes, useIsDarkMode, useIsGridMode, useKeyboardShortcuts, useMaybeCurrentTranslation, useMenuKeyboard, useMsg, useReadonly, useRelevantStyles, useTldrawUiMenuContext, useToolShortcuts, useTranslation, useUiEvents, useUnlockedSelectedShapesCount };
+//# sourceMappingURL=chunk-YMUR46N6.js.map
+//# sourceMappingURL=chunk-YMUR46N6.js.map