@glw907/cairn-cms 0.60.0 → 0.62.1

package/dist/components/EditorToolbar.svelte

@@ -9,177 +9,115 @@ widths, reported to the host through `onDevice`. The writing-mode toggles live i
 footer (the bottom strip carries the writing environment; this strip acts on the text). The glyphs
 are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
 -->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { FormatKind } from './markdown-format.js';
-  import { deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
-
-  interface Props {
-    /** Apply a markdown transform to the editor's current selection. */
-    format: (kind: FormatKind) => void;
-    /** Which pane the editor card shows; the segmented control reflects it. */
-    mode: 'write' | 'preview';
-    /** Ask the host to switch panes. */
-    onMode: (m: 'write' | 'preview') => void;
-    /** The active preview-frame device, shown on the device trigger. Desktop when absent. */
-    device?: PreviewDeviceId;
-    /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
-     *  while Preview shows. */
-    onDevice?: (id: PreviewDeviceId) => void;
-    /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
-    insertControls?: Snippet;
-  }
-
-  let {
-    format,
-    mode,
-    onMode,
-    device = 'desktop',
-    onDevice,
-    insertControls,
-  }: Props = $props();
-
-  // Each icon is a set of stroke `<path>` d-strings rendered into the shared 24x24 svg below, so the
-  // markup stays declarative (no per-icon raw html). Paths follow the house outline style.
-  type ToolButton = { kind: FormatKind; label: string; paths: string[] };
-
-  // Labels carry the shortcut where one exists. "Ctrl" is written literally for macOS readers
-  // too; detecting the platform buys little for what it costs.
-  const textButtons: ToolButton[] = [
-    { kind: 'bold', label: 'Bold (Ctrl+B)', paths: ['M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'] },
-    { kind: 'italic', label: 'Italic (Ctrl+I)', paths: ['M19 4h-9', 'M14 20H5', 'M15 4 9 20'] },
-  ];
-
-  const structureButtons: ToolButton[] = [
-    {
-      kind: 'h2',
-      label: 'Heading (Ctrl+Alt+2)',
-      paths: ['M4 12h8', 'M4 18V6', 'M12 18V6', 'M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1'],
-    },
-    {
-      kind: 'h3',
-      label: 'Smaller heading (Ctrl+Alt+3)',
-      paths: [
-        'M4 12h8',
-        'M4 18V6',
-        'M12 18V6',
-        'M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2',
-        'M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2',
-      ],
-    },
-    { kind: 'ul', label: 'Bulleted list (Ctrl+Shift+8)', paths: ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'] },
-    {
-      kind: 'ol',
-      label: 'Numbered list (Ctrl+Shift+7)',
-      paths: ['M10 12h11', 'M10 18h11', 'M10 6h11', 'M4 10h2', 'M4 6h1v4', 'M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'],
-    },
-    {
-      kind: 'quote',
-      label: 'Quote (Ctrl+Shift+9)',
-      paths: [
-        'M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z',
-        'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z',
-      ],
-    },
-    // The everyday formats promoted out of the More menu onto the strip (after Quote, before
-    // More), per mockup screen 1. They keep the strip's glyph grammar.
-    { kind: 'code', label: 'Inline code (Ctrl+E)', paths: ['m9 8-4 4 4 4', 'm15 8 4 4-4 4'] },
-    {
-      kind: 'strike',
-      label: 'Strikethrough',
-      paths: ['M14 12a4 4 0 0 1 0 8H8', 'M16 4H9.5a3.5 3.5 0 0 0-1.4 6.7', 'M4 12h16'],
-    },
-    {
-      kind: 'table',
-      label: 'Table',
-      paths: ['M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', 'M3 10h18', 'M10 3v18'],
-    },
-  ];
-
-  const ellipsisPaths = ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'];
-  // The check glyph marking an active pick, shared by the More menu's toggles and the device list.
-  const checkPaths = ['M20 6 9 17l-5-5'];
-
-  // The trimmed overflow: the block formats that stay rare. A divider splits the code block from
-  // the rest (the spec keeps "code block and the rest" behind the ellipsis once inline code,
-  // strikethrough, and table promote into the strip).
-  const moreItems: { kind: FormatKind; label: string; divideBefore?: boolean }[] = [
-    { kind: 'codeblock', label: 'Code block' },
-    { kind: 'hr', label: 'Horizontal rule', divideBefore: true },
-    { kind: 'task', label: 'Task list' },
-  ];
-
-  // The More menu's popover element and its open state, mirrored from the toggle event into
-  // aria-expanded on the trigger.
-  let moreMenu = $state<HTMLUListElement | null>(null);
-  let moreOpen = $state(false);
-
-  // Picking dismisses the menu; hiding returns focus to the trigger, keeping the roving order.
-  function hideMenu(menu: HTMLUListElement | null) {
-    if (menu?.matches(':popover-open')) menu.hidePopover();
-  }
-
-  function pickMore(kind: FormatKind) {
-    format(kind);
-    hideMenu(moreMenu);
-  }
-
-  // The device menu's popover element and its open state, mirrored from the toggle event into
-  // aria-expanded on the trigger (the More menu's pattern).
-  let deviceMenu = $state<HTMLUListElement | null>(null);
-  let deviceOpen = $state(false);
-  const activeDevice = $derived(previewDevice(device));
-  // Whether the device trigger renders as the capsule's third segment.
-  const showDeviceTrigger = $derived(mode === 'preview' && !!onDevice);
-
-  function pickDevice(id: PreviewDeviceId) {
-    onDevice?.(id);
-    hideMenu(deviceMenu);
-  }
-
-  let toolbarEl = $state<HTMLDivElement | null>(null);
-  // The roving tab stop's position among the strip's enabled top-level controls. The Write/Preview
-  // tabs join the toolbar's roving order instead of managing their own arrow keys: the ARIA toolbar
-  // pattern allows either, and one arrow model over the whole strip is the simpler of the two.
-  let roving = $state(0);
-
-  /** The strip's top-level controls in DOM order: every enabled button outside the More menu's
-   *  popover and outside the insert controls' dialogs. The host's insertControls render their own
-   *  buttons, so the set is queried, not declared. */
-  function rovingControls(): HTMLElement[] {
-    if (!toolbarEl) return [];
-    return Array.from(toolbarEl.querySelectorAll<HTMLElement>('button')).filter(
-      (el) => !el.hasAttribute('disabled') && !el.closest('[popover]') && !el.closest('dialog'),
-    );
-  }
-
-  // Keep exactly one tab stop. Runs on mount (the snippet's buttons render synchronously, so the
-  // first pass sees them) and again whenever the stop moves or a mode switch changes which
-  // controls are enabled.
-  $effect(() => {
-    void mode;
-    const items = rovingControls();
-    if (items.length === 0) return;
-    const stop = Math.min(roving, items.length - 1);
-    // Write the clamp back so the stored stop never drifts from the displayed one across a
-    // Preview round trip. The effect reads roving, so the guarded write re-runs it once and
-    // converges (the second pass computes the same stop and writes nothing).
-    if (stop !== roving) roving = stop;
-    for (const [i, el] of items.entries()) el.setAttribute('tabindex', i === stop ? '0' : '-1');
-  });
-
-  function onToolbarKeydown(e: KeyboardEvent) {
-    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
-    // Leave the keys alone inside the open More menu; its items are not part of the roving order.
-    if ((e.target as HTMLElement | null)?.closest('[popover]')) return;
-    const items = rovingControls();
-    if (items.length === 0) return;
-    const current = items.indexOf(document.activeElement as HTMLElement);
-    const base = current >= 0 ? current : Math.min(roving, items.length - 1);
-    roving = (base + (e.key === 'ArrowRight' ? 1 : -1) + items.length) % items.length;
-    items[roving].focus();
-    e.preventDefault();
+<script lang="ts">import { deviceLabel, previewDevice, previewDevices } from "./preview-doc.js";
+let {
+  format,
+  mode,
+  onMode,
+  device = "desktop",
+  onDevice,
+  insertControls
+} = $props();
+const textButtons = [
+  { kind: "bold", label: "Bold (Ctrl+B)", paths: ["M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"] },
+  { kind: "italic", label: "Italic (Ctrl+I)", paths: ["M19 4h-9", "M14 20H5", "M15 4 9 20"] }
+];
+const structureButtons = [
+  {
+    kind: "h2",
+    label: "Heading (Ctrl+Alt+2)",
+    paths: ["M4 12h8", "M4 18V6", "M12 18V6", "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"]
+  },
+  {
+    kind: "h3",
+    label: "Smaller heading (Ctrl+Alt+3)",
+    paths: [
+      "M4 12h8",
+      "M4 18V6",
+      "M12 18V6",
+      "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2",
+      "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"
+    ]
+  },
+  { kind: "ul", label: "Bulleted list (Ctrl+Shift+8)", paths: ["M8 6h13", "M8 12h13", "M8 18h13", "M3 6h.01", "M3 12h.01", "M3 18h.01"] },
+  {
+    kind: "ol",
+    label: "Numbered list (Ctrl+Shift+7)",
+    paths: ["M10 12h11", "M10 18h11", "M10 6h11", "M4 10h2", "M4 6h1v4", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"]
+  },
+  {
+    kind: "quote",
+    label: "Quote (Ctrl+Shift+9)",
+    paths: [
+      "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z",
+      "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z"
+    ]
+  },
+  // The everyday formats promoted out of the More menu onto the strip (after Quote, before
+  // More), per mockup screen 1. They keep the strip's glyph grammar.
+  { kind: "code", label: "Inline code (Ctrl+E)", paths: ["m9 8-4 4 4 4", "m15 8 4 4-4 4"] },
+  {
+    kind: "strike",
+    label: "Strikethrough",
+    paths: ["M14 12a4 4 0 0 1 0 8H8", "M16 4H9.5a3.5 3.5 0 0 0-1.4 6.7", "M4 12h16"]
+  },
+  {
+    kind: "table",
+    label: "Table",
+    paths: ["M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z", "M3 10h18", "M10 3v18"]
   }
+];
+const ellipsisPaths = ["M5 12h.01", "M12 12h.01", "M19 12h.01"];
+const checkPaths = ["M20 6 9 17l-5-5"];
+const moreItems = [
+  { kind: "codeblock", label: "Code block" },
+  { kind: "hr", label: "Horizontal rule", divideBefore: true },
+  { kind: "task", label: "Task list" }
+];
+let moreMenu = $state(null);
+let moreOpen = $state(false);
+function hideMenu(menu) {
+  if (menu?.matches(":popover-open")) menu.hidePopover();
+}
+function pickMore(kind) {
+  format(kind);
+  hideMenu(moreMenu);
+}
+let deviceMenu = $state(null);
+let deviceOpen = $state(false);
+const activeDevice = $derived(previewDevice(device));
+const showDeviceTrigger = $derived(mode === "preview" && !!onDevice);
+function pickDevice(id) {
+  onDevice?.(id);
+  hideMenu(deviceMenu);
+}
+let toolbarEl = $state(null);
+let roving = $state(0);
+function rovingControls() {
+  if (!toolbarEl) return [];
+  return Array.from(toolbarEl.querySelectorAll("button")).filter(
+    (el) => !el.hasAttribute("disabled") && !el.closest("[popover]") && !el.closest("dialog")
+  );
+}
+$effect(() => {
+  void mode;
+  const items = rovingControls();
+  if (items.length === 0) return;
+  const stop = Math.min(roving, items.length - 1);
+  if (stop !== roving) roving = stop;
+  for (const [i, el] of items.entries()) el.setAttribute("tabindex", i === stop ? "0" : "-1");
+});
+function onToolbarKeydown(e) {
+  if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+  if (e.target?.closest("[popover]")) return;
+  const items = rovingControls();
+  if (items.length === 0) return;
+  const current = items.indexOf(document.activeElement);
+  const base = current >= 0 ? current : Math.min(roving, items.length - 1);
+  roving = (base + (e.key === "ArrowRight" ? 1 : -1) + items.length) % items.length;
+  items[roving].focus();
+  e.preventDefault();
+}
 </script>
 
 {#snippet strokeIcon(paths: string[])}