@glw907/cairn-cms 0.60.0 → 0.62.1

package/dist/components/MarkdownHelpDialog.svelte

@@ -5,18 +5,15 @@ each piece of syntax with what it makes, and a closing note explains the ::: lay
 Built on a native <dialog>, the DeleteDialog recipe; the host drives it through the exported
 open(), so the component renders no trigger of its own.
 -->
-<script lang="ts">
-  import ShortcutsGrid from './ShortcutsGrid.svelte';
-
-  let dialog = $state<HTMLDialogElement | null>(null);
-
-  /** Open the cheat sheet. The trigger lives in the host (the edit page's editor footer). */
-  export function open() {
-    dialog?.showModal();
-  }
-  function close() {
-    dialog?.close();
-  }
+<script lang="ts">import ShortcutsGrid from "./ShortcutsGrid.svelte";
+import { markdownReference } from "./markdown-reference.js";
+let dialog = $state(null);
+export function open() {
+  dialog?.showModal();
+}
+function close() {
+  dialog?.close();
+}
 </script>
 
 <dialog class="modal" aria-labelledby="cairn-markdown-help-title" bind:this={dialog}>
@@ -33,21 +30,9 @@ open(), so the component renders no trigger of its own.
         </tr>
       </thead>
       <tbody>
-        <tr><td><code>## Heading</code></td><td>A heading</td></tr>
-        <tr><td><code>### Heading</code></td><td>A smaller heading</td></tr>
-        <tr><td><code>#### Heading</code></td><td>A fourth-level heading</td></tr>
-        <tr><td><code>**bold**</code></td><td>Bold text</td></tr>
-        <tr><td><code>*italic*</code></td><td>Italic text</td></tr>
-        <tr><td><code>~~text~~</code></td><td>Crossed-out text</td></tr>
-        <tr><td><code>[text](url)</code></td><td>A link</td></tr>
-        <tr><td><code>[[page-name]]</code></td><td>A link to one of your pages</td></tr>
-        <tr><td><code>- item</code></td><td>A bulleted list</td></tr>
-        <tr><td><code>1. item</code></td><td>A numbered list</td></tr>
-        <tr><td><code>- [ ] item</code></td><td>A checklist</td></tr>
-        <tr><td><code>&gt; quote</code></td><td>A quote</td></tr>
-        <tr><td><code>`code`</code></td><td>Code</td></tr>
-        <tr><td>Table</td><td>The Table button in the toolbar inserts one</td></tr>
-        <tr><td><code>---</code></td><td>A horizontal rule</td></tr>
+        {#each markdownReference as row (row.syntax)}
+          <tr><td><code>{row.syntax}</code></td><td>{row.makes}</td></tr>
+        {/each}
       </tbody>
     </table>
     <h3 class="mt-4 mb-2 text-sm font-semibold">Keyboard shortcuts</h3>

package/dist/components/MediaCaptureCard.svelte

@@ -17,63 +17,24 @@ also resolves alt to the empty string. The committed reference keys off an empty
 needs-alt signal, so the emitted record uses an empty alt string for both the decorative and the
 left-blank cases, and a separate decorative flag distinguishes them for the host.
 -->
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { proposedNameFor } from './client-ingest.js';
-
-  /** The record the card emits to its host on insert. */
-  interface CaptureRecord {
-    /** The image bytes the author is placing. */
-    file: File;
-    /** The editable display name, the proposed stem or the author's edit. */
-    displayName: string;
-    /** The alt text. Empty for a decorative image or for an author who proceeded without alt; the
-     *  host commits an empty alt as the needs-alt signal in the `![](media:...)` reference. */
-    alt: string;
-    /** True when the author marked the image decorative, distinguishing a deliberate empty alt from
-     *  a left-blank one. The committed alt is empty either way. */
-    decorative: boolean;
-  }
-
-  interface Props {
-    /** The image to capture; the card previews it from a local object URL. */
-    file: File;
-    /** Emit the captured record to the host on insert. */
-    oncapture: (record: CaptureRecord) => void;
-  }
-
-  let { file, oncapture }: Props = $props();
-
-  // The proposed display name for this file, computed once. A real stem pre-fills the field and shows
-  // the Suggested tag; a generic stem yields null, leaving the field empty, required, and untagged.
-  const proposed = $derived(proposedNameFor(file.name));
-  // Seeded once from the file the card opened with; untrack marks it a deliberate one-time read, not
-  // a reactive miss. The card lives for one file, so a later file swap is out of scope.
-  let displayName = $state(untrack(() => proposedNameFor(file.name) ?? ''));
-
-  // The alt mode: unset until the author picks one, then 'describe' or 'decorative'. Unset emits an
-  // empty alt (needs-alt debt); insert never blocks on it.
-  let altMode = $state<'describe' | 'decorative' | null>(null);
-  let altText = $state('');
-
-  // A local object URL for the preview. Allocation and revoke live in ONE $effect keyed on the file,
-  // never in a $derived: a derivation that calls createObjectURL allocates a resource as a side
-  // effect, which can desync from the revoke (a re-derive leaks the prior URL). The matched effect
-  // revokes on teardown and on any file change, so the blob never leaks.
-  let previewUrl = $state('');
-  $effect(() => {
-    const url = URL.createObjectURL(file);
-    previewUrl = url;
-    return () => URL.revokeObjectURL(url);
-  });
-
-  function submit(e: SubmitEvent) {
-    e.preventDefault();
-    // Decorative and write-but-blank both commit an empty alt; the decorative flag distinguishes
-    // them for the host. A described image carries the trimmed alt text.
-    const alt = altMode === 'describe' ? altText.trim() : '';
-    oncapture({ file, displayName: displayName.trim(), alt, decorative: altMode === 'decorative' });
-  }
+<script lang="ts">import { untrack } from "svelte";
+import { proposedNameFor } from "./client-ingest.js";
+let { file, oncapture } = $props();
+const proposed = $derived(proposedNameFor(file.name));
+let displayName = $state(untrack(() => proposedNameFor(file.name) ?? ""));
+let altMode = $state(null);
+let altText = $state("");
+let previewUrl = $state("");
+$effect(() => {
+  const url = URL.createObjectURL(file);
+  previewUrl = url;
+  return () => URL.revokeObjectURL(url);
+});
+function submit(e) {
+  e.preventDefault();
+  const alt = altMode === "describe" ? altText.trim() : "";
+  oncapture({ file, displayName: displayName.trim(), alt, decorative: altMode === "decorative" });
+}
 </script>
 
 <form class="flex flex-col gap-4" onsubmit={submit}>

package/dist/components/MediaFigureControl.svelte

@@ -16,77 +16,38 @@ active segment tinted with a check glyph (the non-color state cue, WCAG 1.4.1),
 select. Measure maps to the null role (the measure default, no role brace); the others map to their
 own name.
 -->
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import type { FigureRole } from './markdown-format.js';
-
-  /** The roles the segmented control offers, with Measure standing for the null (measure-default)
-   *  role. Declared as a const tuple so the segment loop and the keyboard handler share one source. */
-  const ROLE_OPTIONS: { value: FigureRole | null; label: string }[] = [
-    { value: null, label: 'Measure' },
-    { value: 'center', label: 'Center' },
-    { value: 'wide', label: 'Wide' },
-    { value: 'full', label: 'Full' },
-  ];
-
-  interface Props {
-    /** The initial caption; the field seeds from it and the author edits a local copy. */
-    caption?: string;
-    /** The initial placement role, or null for the measure default. */
-    role?: FigureRole | null;
-    /** `wrap` for a bare image (the primary action wraps it), `edit` for an existing figure (the
-     *  primary action updates it and a ghost action unwraps it). */
-    mode?: 'wrap' | 'edit';
-    /** Whether the image's alt is empty or marked decorative; the host derives it. Drives the
-     *  alt-status row and the decorative-plus-caption warning. */
-    decorative?: boolean;
-    /** Emit the chosen caption and role: the host wraps (wrap mode) or updates (edit mode). */
-    onapply: (choice: { caption: string; role: FigureRole | null }) => void;
-    /** Emit the unwrap action (edit mode only); the host replaces the figure with its bare image. */
-    onunwrap?: () => void;
-  }
-
-  let { caption = '', role = null, mode = 'wrap', decorative = false, onapply, onunwrap }: Props =
-    $props();
-
-  // The author's working copies, seeded once from the props the control opened with. untrack marks
-  // the read a deliberate one-time seed (the control mounts fresh per image), not a reactive miss.
-  let captionValue = $state(untrack(() => caption));
-  let roleValue = $state<FigureRole | null>(untrack(() => role));
-
-  // The index of the active role in ROLE_OPTIONS, the roving-tabindex focus target.
-  const activeIndex = $derived(ROLE_OPTIONS.findIndex((o) => o.value === roleValue));
-
-  // The decorative-plus-caption contradiction: a decorative image is hidden from screen readers, so a
-  // visible caption on it is a state to flag (never blocked, surfaced for the author to resolve).
-  const decorativeWithCaption = $derived(decorative && captionValue.trim() !== '');
-
-  // The segment refs, so arrow-key navigation can move focus to the newly selected segment.
-  let segmentEls = $state<HTMLButtonElement[]>([]);
-
-  function pickRole(value: FigureRole | null) {
-    roleValue = value;
-  }
-
-  // Arrow keys move and select within the radiogroup (the roving-tabindex pattern); Home/End jump to
-  // the ends. Selection follows focus, the standard radiogroup behavior.
-  function onSegmentKeydown(e: KeyboardEvent, index: number) {
-    let next = index;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (index + 1) % ROLE_OPTIONS.length;
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
-      next = (index - 1 + ROLE_OPTIONS.length) % ROLE_OPTIONS.length;
-    else if (e.key === 'Home') next = 0;
-    else if (e.key === 'End') next = ROLE_OPTIONS.length - 1;
-    else return;
-    e.preventDefault();
-    pickRole(ROLE_OPTIONS[next].value);
-    segmentEls[next]?.focus();
-  }
-
-  function submit(e: SubmitEvent) {
-    e.preventDefault();
-    onapply({ caption: captionValue.trim(), role: roleValue });
-  }
+<script lang="ts">import { untrack } from "svelte";
+const ROLE_OPTIONS = [
+  { value: null, label: "Measure" },
+  { value: "center", label: "Center" },
+  { value: "wide", label: "Wide" },
+  { value: "full", label: "Full" }
+];
+let { caption = "", role = null, mode = "wrap", decorative = false, onapply, onunwrap } = $props();
+let captionValue = $state(untrack(() => caption));
+let roleValue = $state(untrack(() => role));
+const activeIndex = $derived(ROLE_OPTIONS.findIndex((o) => o.value === roleValue));
+const decorativeWithCaption = $derived(decorative && captionValue.trim() !== "");
+let segmentEls = $state([]);
+function pickRole(value) {
+  roleValue = value;
+}
+function onSegmentKeydown(e, index) {
+  let next = index;
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (index + 1) % ROLE_OPTIONS.length;
+  else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+    next = (index - 1 + ROLE_OPTIONS.length) % ROLE_OPTIONS.length;
+  else if (e.key === "Home") next = 0;
+  else if (e.key === "End") next = ROLE_OPTIONS.length - 1;
+  else return;
+  e.preventDefault();
+  pickRole(ROLE_OPTIONS[next].value);
+  segmentEls[next]?.focus();
+}
+function submit(e) {
+  e.preventDefault();
+  onapply({ caption: captionValue.trim(), role: roleValue });
+}
 </script>
 
 <form class="flex flex-col gap-4" onsubmit={submit}>