@glw907/cairn-cms 0.60.0 → 0.60.1

package/dist/components/MediaPicker.svelte

@@ -19,142 +19,78 @@ The media-type facet (Images, Documents) is a designed-in seam: it renders only
 holds more than one distinct top-level content type, so the structure is present without dead UI
 while a site stores images only.
 -->
-<script module lang="ts">
-  // The picker's library entry is the shared node-safe projection (../media/library-entry), not a
-  // type from editor-media.ts: importing that module would pull CodeMirror into a bundle, which the
-  // editor-boundary test bars. Re-exported so the insert popover keeps importing it from here.
-  import type { MediaLibraryEntry } from '../media/library-entry.js';
-  export type { MediaLibraryEntry };
-
-  /** The picked asset the picker emits to its host: the library entry, its media: reference token,
-   *  and the manifest alt to prefill the placement. */
-  export interface MediaSelection {
-    /** The chosen library entry. */
-    entry: MediaLibraryEntry;
-    /** The media: reference token (`media:<slug>.<hash>`) to commit at the caret. */
-    ref: string;
-    /** The asset's manifest alt, prefilling the placement; empty means the placement needs alt. */
-    alt: string;
+<script module lang="ts"></script>
+
+<script lang="ts">import { mediaToken } from "../media/reference.js";
+import { publicPath } from "../media/naming.js";
+let { library, onselect } = $props();
+const uid = $props.id();
+const idBase = `cairn-mp-${uid}`;
+const listboxId = `${idBase}-listbox`;
+let query = $state("");
+let typeFilter = $state("all");
+let activeIndex = $state(-1);
+const entries = $derived(Object.values(library));
+const distinctTypes = $derived.by(() => {
+  const seen = [];
+  for (const e of entries) {
+    const top = e.contentType.split("/")[0] ?? "";
+    if (top && !seen.includes(top)) seen.push(top);
   }
-</script>
-
-<script lang="ts">
-  import { mediaToken } from '../media/reference.js';
-  // The bare delivery path under transformations: false (the same path the Task 3 source chip uses).
-  // SEAM: when transformations are on, the row thumbnail should request the `thumb` preset URL
-  // instead of the bare path; that is a later transformations-on refinement.
-  import { publicPath } from '../media/naming.js';
-
-  interface Props {
-    /** The committed media library projection, keyed by the 16-hex content hash. */
-    library: Record<string, MediaLibraryEntry>;
-    /** Emit the chosen asset to the host: the entry, its media: reference, and the manifest alt. */
-    onselect: (selection: MediaSelection) => void;
-  }
-
-  let { library, onselect }: Props = $props();
-
-  // A stable id base so the listbox and each option carry unique ids the combobox can point at.
-  // $props.id() is Svelte's deterministic, hydration-stable id source (the same value SSR and the
-  // client), unlike a Math.random() base that would mismatch across hydration. It must initialize a
-  // top-level variable directly, so the prefix is composed in a second declaration.
-  const uid = $props.id();
-  const idBase = `cairn-mp-${uid}`;
-  const listboxId = `${idBase}-listbox`;
-
-  let query = $state('');
-  // The media-type facet selection: 'all' or a top-level content type ('image', 'application').
-  let typeFilter = $state<string>('all');
-  // The index of the active option within the filtered list, or -1 for none active yet.
-  let activeIndex = $state(-1);
-
-  const entries = $derived(Object.values(library));
-
-  // The distinct top-level content types in the library, in first-seen order. The facet is a seam:
-  // it renders only when more than one distinct type exists, so a site storing images only sees no
-  // dead UI. ('image/webp' and 'image/png' both fold to 'image'.)
-  const distinctTypes = $derived.by(() => {
-    const seen: string[] = [];
-    for (const e of entries) {
-      const top = e.contentType.split('/')[0] ?? '';
-      if (top && !seen.includes(top)) seen.push(top);
-    }
-    return seen;
+  return seen;
+});
+const showFacet = $derived(distinctTypes.length > 1);
+function typeLabel(top) {
+  if (top === "image") return "Images";
+  if (top === "application") return "Documents";
+  return top.charAt(0).toUpperCase() + top.slice(1);
+}
+const filtered = $derived.by(() => {
+  const q = query.trim().toLowerCase();
+  return entries.filter((e) => {
+    if (typeFilter !== "all" && (e.contentType.split("/")[0] ?? "") !== typeFilter) return false;
+    if (!q) return true;
+    return e.displayName.toLowerCase().includes(q) || e.alt.toLowerCase().includes(q);
   });
-  const showFacet = $derived(distinctTypes.length > 1);
-
-  /** The label for a top-level content type, for the facet chips. */
-  function typeLabel(top: string): string {
-    if (top === 'image') return 'Images';
-    if (top === 'application') return 'Documents';
-    return top.charAt(0).toUpperCase() + top.slice(1);
-  }
-
-  // The filtered, displayed options: the type facet first, then a case-insensitive substring match
-  // across the display name and the alt. Order follows the library's insertion order.
-  const filtered = $derived.by(() => {
-    const q = query.trim().toLowerCase();
-    return entries.filter((e) => {
-      if (typeFilter !== 'all' && (e.contentType.split('/')[0] ?? '') !== typeFilter) return false;
-      if (!q) return true;
-      return (
-        e.displayName.toLowerCase().includes(q) || e.alt.toLowerCase().includes(q)
-      );
-    });
-  });
-
-  // Keep the active index in range as the filtered list narrows; a filter that drops the active row
-  // clears the active descendant rather than pointing at a gone option.
-  $effect(() => {
-    if (activeIndex >= filtered.length) activeIndex = filtered.length === 0 ? -1 : filtered.length - 1;
-  });
-
-  /** The per-row option id, used by aria-activedescendant and the live narration. */
-  function optionId(i: number): string {
-    return `${idBase}-opt-${i}`;
-  }
-
-  const activeEntry = $derived(activeIndex >= 0 ? (filtered[activeIndex] ?? null) : null);
-  const activeDescendant = $derived(activeEntry ? optionId(activeIndex) : undefined);
-
-  // The active-row narration text, kept in its own live region so it never clobbers the count.
-  const activeNarration = $derived(
-    activeEntry
-      ? `${activeEntry.displayName}${activeEntry.alt.trim() === '' ? ', needs alt text' : ''}, ${activeIndex + 1} of ${filtered.length}`
-      : '',
-  );
-
-  /** Build a selection from a library entry: its media: token and its manifest alt. */
-  function select(entry: MediaLibraryEntry) {
-    onselect({ entry, ref: mediaToken({ slug: entry.slug, hash: entry.hash }), alt: entry.alt });
-  }
-
-  function onKeydown(e: KeyboardEvent) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      if (filtered.length === 0) return;
-      // Clamp at the last option (a deliberate non-wrap, fine per the task).
-      activeIndex = Math.min(activeIndex + 1, filtered.length - 1);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      if (filtered.length === 0) return;
-      activeIndex = Math.max(activeIndex - 1, 0);
-    } else if (e.key === 'Home') {
-      if (filtered.length === 0) return;
-      e.preventDefault();
-      activeIndex = 0;
-    } else if (e.key === 'End') {
-      if (filtered.length === 0) return;
+});
+$effect(() => {
+  if (activeIndex >= filtered.length) activeIndex = filtered.length === 0 ? -1 : filtered.length - 1;
+});
+function optionId(i) {
+  return `${idBase}-opt-${i}`;
+}
+const activeEntry = $derived(activeIndex >= 0 ? filtered[activeIndex] ?? null : null);
+const activeDescendant = $derived(activeEntry ? optionId(activeIndex) : void 0);
+const activeNarration = $derived(
+  activeEntry ? `${activeEntry.displayName}${activeEntry.alt.trim() === "" ? ", needs alt text" : ""}, ${activeIndex + 1} of ${filtered.length}` : ""
+);
+function select(entry) {
+  onselect({ entry, ref: mediaToken({ slug: entry.slug, hash: entry.hash }), alt: entry.alt });
+}
+function onKeydown(e) {
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    if (filtered.length === 0) return;
+    activeIndex = Math.min(activeIndex + 1, filtered.length - 1);
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    if (filtered.length === 0) return;
+    activeIndex = Math.max(activeIndex - 1, 0);
+  } else if (e.key === "Home") {
+    if (filtered.length === 0) return;
+    e.preventDefault();
+    activeIndex = 0;
+  } else if (e.key === "End") {
+    if (filtered.length === 0) return;
+    e.preventDefault();
+    activeIndex = filtered.length - 1;
+  } else if (e.key === "Enter") {
+    if (activeEntry) {
       e.preventDefault();
-      activeIndex = filtered.length - 1;
-    } else if (e.key === 'Enter') {
-      if (activeEntry) {
-        e.preventDefault();
-        select(activeEntry);
-      }
+      select(activeEntry);
     }
-    // Escape is handled by the host popover (Task 6); let it bubble.
   }
+}
 </script>
 
 <div class="flex flex-col gap-3">

package/dist/components/NavTree.svelte

@@ -6,87 +6,55 @@ svelte-sortable-list (mouse, and keyboard with Space to lift, arrows to move, Sp
 depth comes from the Indent and Outdent buttons, capped at the menu's maxDepth. The engine
 validates on save.
 -->
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import CsrfField from './CsrfField.svelte';
-  import { SortableList, sortItems } from '@rodrigodagostino/svelte-sortable-list';
-  import type { SortableList as SortableListNS } from '@rodrigodagostino/svelte-sortable-list';
-  import '@rodrigodagostino/svelte-sortable-list/styles.css';
-  import type { NavLoadData } from '../sveltekit/nav-routes.js';
-  import type { NavNode } from '../nav/site-config.js';
-
-  interface Props {
-    /** The nav load's data: the menu meta, the current tree, page options, and flags. */
-    data: NavLoadData;
-  }
-
-  let { data }: Props = $props();
-
-  // A flat, ordered working model is simpler to reorder than a recursive one: each row carries an
-  // explicit depth, and the nested tree is rebuilt from order plus depth only at submit time.
-  interface Row {
-    id: string;
-    depth: number;
-    label: string;
-    url: string;
+<script lang="ts">import { untrack } from "svelte";
+import CsrfField from "./CsrfField.svelte";
+import { SortableList, sortItems } from "@rodrigodagostino/svelte-sortable-list";
+import "@rodrigodagostino/svelte-sortable-list/styles.css";
+let { data } = $props();
+let nextId = 1;
+function flatten(nodes, depth, out) {
+  for (const n of nodes) {
+    out.push({ id: `row-${nextId++}`, depth, label: n.label, url: n.url ?? "" });
+    if (n.children?.length) flatten(n.children, depth + 1, out);
   }
-
-  let nextId = 1;
-  function flatten(nodes: NavNode[], depth: number, out: Row[]): Row[] {
-    for (const n of nodes) {
-      out.push({ id: `row-${nextId++}`, depth, label: n.label, url: n.url ?? '' });
-      if (n.children?.length) flatten(n.children, depth + 1, out);
-    }
-    return out;
-  }
-
-  // untrack here is not for runtime behavior -- $state runs its initializer once regardless.
-  // It suppresses the Svelte compiler warning that `data` (a prop) is referenced outside a
-  // reactive context. The component is always remounted on save/error (both redirect), so
-  // a one-time snapshot of the initial tree is correct.
-  let rows = $state<Row[]>(untrack(() => flatten(data.tree, 0, [])));
-  // depth is 0-based internally; maxDepth in the config is 1-based (1 = flat, 2 = one nesting level)
-  const maxDepthIndex = $derived(data.menu.maxDepth - 1);
-
-  // Rebuild the nested tree from the flat rows by depth, then serialize for the hidden field.
-  function toTree(list: Row[]): NavNode[] {
-    const root: NavNode[] = [];
-    const stack: { depth: number; node: NavNode }[] = [];
-    for (const r of list) {
-      const node: NavNode = { label: r.label.trim() };
-      if (r.url.trim()) node.url = r.url.trim();
-      while (stack.length && stack[stack.length - 1].depth >= r.depth) stack.pop();
-      if (stack.length) (stack[stack.length - 1].node.children ??= []).push(node);
-      else root.push(node);
-      stack.push({ depth: r.depth, node });
-    }
-    return root;
+  return out;
+}
+let rows = $state(untrack(() => flatten(data.tree, 0, [])));
+const maxDepthIndex = $derived(data.menu.maxDepth - 1);
+function toTree(list) {
+  const root = [];
+  const stack = [];
+  for (const r of list) {
+    const node = { label: r.label.trim() };
+    if (r.url.trim()) node.url = r.url.trim();
+    while (stack.length && stack[stack.length - 1].depth >= r.depth) stack.pop();
+    if (stack.length) (stack[stack.length - 1].node.children ??= []).push(node);
+    else root.push(node);
+    stack.push({ depth: r.depth, node });
   }
-
-  const treeJson = $derived(JSON.stringify(toTree(rows)));
-
-  function addRow() {
-    rows = [...rows, { id: `row-${nextId++}`, depth: 0, label: 'New item', url: '' }];
-  }
-  function removeRow(id: string) {
-    rows = rows.filter((r) => r.id !== id);
-  }
-  function indent(i: number) {
-    // A row may nest at most one level deeper than the row above it, and never past the cap.
-    if (i === 0) return;
-    const ceiling = Math.min(rows[i - 1].depth + 1, maxDepthIndex);
-    if (rows[i].depth < ceiling) rows[i].depth += 1;
-  }
-  function outdent(i: number) {
-    if (rows[i].depth > 0) rows[i].depth -= 1;
-  }
-
-  function handleDragEnd(e: SortableListNS.RootEvents['ondragend']) {
-    const { draggedItemIndex, targetItemIndex, isCanceled } = e;
-    if (!isCanceled && typeof targetItemIndex === 'number' && draggedItemIndex !== targetItemIndex) {
-      rows = sortItems(rows, draggedItemIndex, targetItemIndex);
-    }
+  return root;
+}
+const treeJson = $derived(JSON.stringify(toTree(rows)));
+function addRow() {
+  rows = [...rows, { id: `row-${nextId++}`, depth: 0, label: "New item", url: "" }];
+}
+function removeRow(id) {
+  rows = rows.filter((r) => r.id !== id);
+}
+function indent(i) {
+  if (i === 0) return;
+  const ceiling = Math.min(rows[i - 1].depth + 1, maxDepthIndex);
+  if (rows[i].depth < ceiling) rows[i].depth += 1;
+}
+function outdent(i) {
+  if (rows[i].depth > 0) rows[i].depth -= 1;
+}
+function handleDragEnd(e) {
+  const { draggedItemIndex, targetItemIndex, isCanceled } = e;
+  if (!isCanceled && typeof targetItemIndex === "number" && draggedItemIndex !== targetItemIndex) {
+    rows = sortItems(rows, draggedItemIndex, targetItemIndex);
   }
+}
 </script>
 
 <h1 class="mb-6 text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">{data.menu.label}</h1>

package/dist/components/RenameDialog.svelte

@@ -5,49 +5,22 @@ moves the entry and rewrites every inbound cairn link in one commit, so no inter
 dated post keeps its date; only the slug changes. Built on a native <dialog>, following the
 DeleteDialog a11y conventions.
 -->
-<script lang="ts">
-  import CsrfField from './CsrfField.svelte';
-
-  interface Props {
-    /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
-    conceptId: string;
-    /** The entry id within its concept. Posted with the confirm. */
-    id: string;
-    /** A human label for the concept, e.g. "Post", used in the prompts. */
-    label: string;
-    /** The current slug, prefilled into the input. */
-    slug: string;
-    /** Render the built-in Change URL trigger. False mounts only the dialog, for a host that
-     *  supplies its own trigger and opens the dialog through the exported open(). */
-    trigger?: boolean;
-    /** Called when the rename form submits, before the document navigates. The edit page uses it
-     *  to stand down its leave guard while the POST is in flight. */
-    onsubmitting?: () => void;
-  }
-
-  let { conceptId, id, label, slug, trigger = true, onsubmitting }: Props = $props();
-
-  let dialog = $state<HTMLDialogElement | null>(null);
-  let slugInput = $state<HTMLInputElement | null>(null);
-  // Seeded on open() rather than from the prop at declaration, so the input prefills with the
-  // current slug each time the dialog opens without capturing only the initial prop value.
-  let nextSlug = $state('');
-
-  /** Open the dialog with a fresh prefill. Exported so a trigger={false} host can drive it. */
-  export function open() {
-    nextSlug = slug;
-    dialog?.showModal();
-    // showModal() lands focus on the first focusable element (the header Close button), so move
-    // it to the slug input the dialog exists for, and select the prefill so the author can replace
-    // it in one keystroke (WCAG 2.4.3). A microtask defers past the dialog's own focus handling.
-    queueMicrotask(() => {
-      slugInput?.focus();
-      slugInput?.select();
-    });
-  }
-  function close() {
-    dialog?.close();
-  }
+<script lang="ts">import CsrfField from "./CsrfField.svelte";
+let { conceptId, id, label, slug, trigger = true, onsubmitting } = $props();
+let dialog = $state(null);
+let slugInput = $state(null);
+let nextSlug = $state("");
+export function open() {
+  nextSlug = slug;
+  dialog?.showModal();
+  queueMicrotask(() => {
+    slugInput?.focus();
+    slugInput?.select();
+  });
+}
+function close() {
+  dialog?.close();
+}
 </script>
 
 {#if trigger}

package/dist/components/ShortcutsDialog.svelte

@@ -7,19 +7,15 @@ MarkdownHelpDialog recipe; the host (the edit page) drives it through the export
 it on Ctrl+/, so the component renders no trigger of its own. Esc dismisses through the dialog's
 native behavior.
 -->
-<script lang="ts">
-  import { shortcutsClosingLine } from './editor-shortcuts.js';
-  import ShortcutsGrid from './ShortcutsGrid.svelte';
-
-  let dialog = $state<HTMLDialogElement | null>(null);
-
-  /** Open the shortcuts sheet. The trigger lives in the host (the edit page's Ctrl+/ handler). */
-  export function open() {
-    dialog?.showModal();
-  }
-  function close() {
-    dialog?.close();
-  }
+<script lang="ts">import { shortcutsClosingLine } from "./editor-shortcuts.js";
+import ShortcutsGrid from "./ShortcutsGrid.svelte";
+let dialog = $state(null);
+export function open() {
+  dialog?.showModal();
+}
+function close() {
+  dialog?.close();
+}
 </script>
 
 <dialog class="modal" aria-labelledby="cairn-shortcuts-title" bind:this={dialog}>

package/dist/components/ShortcutsGrid.svelte

@@ -4,8 +4,7 @@ The two-column shortcut grid, the shared body of both discoverability sheets (Sh
 the Markdown help dialog). Each row pairs a label with its chord, read from the single
 editor-shortcuts source. The host wraps it with its own heading and any closing line.
 -->
-<script lang="ts">
-  import { editorShortcuts } from './editor-shortcuts.js';
+<script lang="ts">import { editorShortcuts } from "./editor-shortcuts.js";
 </script>
 
 <div class="grid grid-cols-1 gap-x-8 gap-y-1 text-sm sm:grid-cols-2">