@glw907/cairn-cms 0.59.0 → 0.60.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[])}

package/dist/components/IconPicker.svelte

@@ -6,60 +6,30 @@ field is optional, a None radio clears the value. A roving tabindex keeps a sing
 keys move the selection, the standard radiogroup keyboard model. The glyph renders inline from the
 IconSet path data, matching the renderer's 256-unit viewBox.
 -->
-<script lang="ts">
-  import { tick } from 'svelte';
-  import type { IconSet } from '../render/glyph.js';
-
-  interface Props {
-    /** The site's glyph name to SVG path-data map. */
-    icons: IconSet;
-    /** The currently selected glyph name, or '' for none. */
-    value: string;
-    /** When false, a None choice is offered. */
-    required: boolean;
-    /** Called with the new glyph name (or '' for none). */
-    onChange: (name: string) => void;
-    /** The group's accessible name, threaded from the field label. Defaults to Icon. */
-    label?: string;
-  }
-
-  let { icons, value, required, onChange, label = 'Icon' }: Props = $props();
-
-  // The radiogroup container, used to move focus with the selection per the ARIA radiogroup pattern.
-  let group: HTMLDivElement;
-
-  const names = $derived(Object.keys(icons));
-  // The selectable keys in DOM order: the optional None choice ('') first, then each glyph name.
-  // Arrow-key navigation walks this list, and the roving tabindex marks the selected key (or the
-  // first key when nothing is selected) as the single tab stop.
-  const choices = $derived(required ? names : ['', ...names]);
-  const tabStop = $derived(choices.includes(value) ? value : choices[0]);
-
-  function move(delta: number): void {
-    // Navigate relative to the focused element (the current tab stop), not the bound value. In a
-    // required group with no value, tabStop is the first radio while value is '', so a value-based
-    // origin would skip the first step.
-    const from = Math.max(0, choices.indexOf(tabStop));
-    const next = (from + delta + choices.length) % choices.length;
-    onChange(choices[next]);
-    // The roving tabindex updates reactively, so wait for the DOM then move focus onto the new tab
-    // stop. The keydown handler runs only when focus is already inside the group, so this never
-    // steals focus on mount.
-    void tick().then(() => {
-      const target = group?.querySelector<HTMLElement>('[tabindex="0"]');
-      target?.focus();
-    });
-  }
-
-  function onKeydown(e: KeyboardEvent): void {
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-      e.preventDefault();
-      move(1);
-    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-      e.preventDefault();
-      move(-1);
-    }
+<script lang="ts">import { tick } from "svelte";
+let { icons, value, required, onChange, label = "Icon" } = $props();
+let group;
+const names = $derived(Object.keys(icons));
+const choices = $derived(required ? names : ["", ...names]);
+const tabStop = $derived(choices.includes(value) ? value : choices[0]);
+function move(delta) {
+  const from = Math.max(0, choices.indexOf(tabStop));
+  const next = (from + delta + choices.length) % choices.length;
+  onChange(choices[next]);
+  void tick().then(() => {
+    const target = group?.querySelector('[tabindex="0"]');
+    target?.focus();
+  });
+}
+function onKeydown(e) {
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+    e.preventDefault();
+    move(1);
+  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+    e.preventDefault();
+    move(-1);
   }
+}
 </script>
 
 <div class="flex flex-wrap gap-2" role="radiogroup" aria-label={label} bind:this={group}>

package/dist/components/LinkPicker.svelte

@@ -6,65 +6,41 @@ showing its date and each draft marked. Picking a target inserts a cairn: intern
 editor's registerInsertLink seam. Built on a native <dialog>, following the component dialog's a11y
 conventions. The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
 -->
-<script lang="ts">
-  import type { LinkTarget } from '../content/manifest.js';
-  import { formatCairnToken } from '../content/links.js';
-
-  interface Props {
-    /** The site's link targets, from the committed manifest (editLoad ships them). */
-    linkTargets: LinkTarget[];
-    /** Insert an inline cairn link at the editor cursor. */
-    insert: (href: string, title: string) => void;
-    /** Disable the trigger; the host sets it while Preview shows. */
-    disabled?: boolean;
-    /** Render the built-in Link to page trigger. False mounts only the dialog, for a host that
-     *  supplies its own trigger and opens the dialog through the exported open(). */
-    trigger?: boolean;
-  }
-
-  let { linkTargets, insert, disabled = false, trigger = true }: Props = $props();
-
-  let dialog = $state<HTMLDialogElement | null>(null);
-  let query = $state('');
-
-  // Group filtered targets by concept, Pages first then Posts then any other concept, so the list
-  // reads in a stable order. The filter is a case-insensitive title substring.
-  const ORDER: Record<string, number> = { pages: 0, posts: 1 };
-  function rank(concept: string): number {
-    return ORDER[concept] ?? 2;
-  }
-  function heading(concept: string): string {
-    if (concept === 'pages') return 'Pages';
-    if (concept === 'posts') return 'Posts';
-    return concept.charAt(0).toUpperCase() + concept.slice(1);
-  }
-
-  const groups = $derived.by(() => {
-    const q = query.trim().toLowerCase();
-    const matched = q ? linkTargets.filter((t) => t.title.toLowerCase().includes(q)) : linkTargets;
-    const byConcept = new Map<string, LinkTarget[]>();
-    for (const t of matched) {
-      const list = byConcept.get(t.concept) ?? [];
-      list.push(t);
-      byConcept.set(t.concept, list);
-    }
-    return [...byConcept.entries()]
-      .map(([concept, items]) => ({ concept, heading: heading(concept), items }))
-      .sort((a, b) => rank(a.concept) - rank(b.concept) || a.heading.localeCompare(b.heading));
-  });
-
-  /** Open the picker programmatically, for a host that drives it without the trigger. */
-  export function open() {
-    query = '';
-    dialog?.showModal();
-  }
-  function close() {
-    dialog?.close();
-  }
-  function choose(target: LinkTarget) {
-    insert(formatCairnToken(target), target.title);
-    close();
+<script lang="ts">import { formatCairnToken } from "../content/links.js";
+let { linkTargets, insert, disabled = false, trigger = true } = $props();
+let dialog = $state(null);
+let query = $state("");
+const ORDER = { pages: 0, posts: 1 };
+function rank(concept) {
+  return ORDER[concept] ?? 2;
+}
+function heading(concept) {
+  if (concept === "pages") return "Pages";
+  if (concept === "posts") return "Posts";
+  return concept.charAt(0).toUpperCase() + concept.slice(1);
+}
+const groups = $derived.by(() => {
+  const q = query.trim().toLowerCase();
+  const matched = q ? linkTargets.filter((t) => t.title.toLowerCase().includes(q)) : linkTargets;
+  const byConcept = /* @__PURE__ */ new Map();
+  for (const t of matched) {
+    const list = byConcept.get(t.concept) ?? [];
+    list.push(t);
+    byConcept.set(t.concept, list);
   }
+  return [...byConcept.entries()].map(([concept, items]) => ({ concept, heading: heading(concept), items })).sort((a, b) => rank(a.concept) - rank(b.concept) || a.heading.localeCompare(b.heading));
+});
+export function open() {
+  query = "";
+  dialog?.showModal();
+}
+function close() {
+  dialog?.close();
+}
+function choose(target) {
+  insert(formatCairnToken(target), target.title);
+  close();
+}
 </script>
 
 {#if trigger}

package/dist/components/LoginPage.svelte

@@ -4,33 +4,20 @@ The magic-link sign-in page. A plain form POST to the named `?/request` action (
 `requestAction`); no client SDK. The success message is identical whether or not the email is on
 the allowlist, so the page never leaks membership (spec §7.1).
 -->
-<script lang="ts">
-  import './cairn-admin.css';
-  import { onMount } from 'svelte';
-  import MailCheckIcon from '@lucide/svelte/icons/mail-check';
-  import InfoIcon from '@lucide/svelte/icons/info';
-  import CairnLogo from './CairnLogo.svelte';
-  import CsrfField from './CsrfField.svelte';
-  import { cairnFaviconHref } from './cairn-favicon.js';
-  import { warnIfChromeWrapped } from './chrome-guard.js';
-
-  interface Props {
-    /** The login load's data: the site name, an optional error, and the CSRF token. */
-    data: { siteName: string; error: string | null; csrf: string };
-    /** The action result. `sent` is true once a request was accepted; `status` discriminates the
-     * neutral, send-error, and throttled outcomes. */
-    form: { sent?: boolean; status?: 'sent' | 'send_error' | 'throttled' } | null;
-  }
-
-  let { data, form }: Props = $props();
-
-  let rootEl = $state<HTMLElement>();
-  // Lets a mistyped address go back to the form without a reload, even though the server still
-  // reports `sent`. The success copy never reveals whether the email was on the allowlist.
-  let dismissed = $state(false);
-  onMount(() => {
-    if (rootEl) warnIfChromeWrapped(rootEl);
-  });
+<script lang="ts">import "./cairn-admin.css";
+import { onMount } from "svelte";
+import MailCheckIcon from "@lucide/svelte/icons/mail-check";
+import InfoIcon from "@lucide/svelte/icons/info";
+import CairnLogo from "./CairnLogo.svelte";
+import CsrfField from "./CsrfField.svelte";
+import { cairnFaviconHref } from "./cairn-favicon.js";
+import { warnIfChromeWrapped } from "./chrome-guard.js";
+let { data, form } = $props();
+let rootEl = $state();
+let dismissed = $state(false);
+onMount(() => {
+  if (rootEl) warnIfChromeWrapped(rootEl);
+});
 </script>
 
 <svelte:head>

package/dist/components/ManageEditors.svelte

@@ -6,21 +6,9 @@ last-owner anti-lockout rule itself is enforced server-side (editors-routes). Ac
 named `?/setRole`, `?/removeEditor`, and `?/addEditor` actions, the names the single-mount
 dispatcher defines.
 -->
-<script lang="ts">
-  import CsrfField from './CsrfField.svelte';
-  import type { Editor } from '../auth/types.js';
-
-  interface Props {
-    /** The editors load's data: the allowlist and the acting owner's email. */
-    data: { editors: Editor[]; self: string };
-    /** The last action's result (an error message when it failed). */
-    form: { error?: string; ok?: boolean } | null;
-  }
-
-  let { data, form }: Props = $props();
-
-  // Eyebrow styling for the table column headers, matching the concept list.
-  const col = 'text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]';
+<script lang="ts">import CsrfField from "./CsrfField.svelte";
+let { data, form } = $props();
+const col = "text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]";
 </script>
 
 <header class="mb-6">