@glw907/cairn-cms 0.59.0 → 0.60.1

package/dist/components/TidyReview.svelte

@@ -0,0 +1,355 @@
+<!--
+@component
+The tidy review surface (spec 2.5, the approved rev.2 mockup). A native `<dialog>` opened with
+`showModal()`, so the focus trap, Escape, and inert background come from the platform. It shows the
+proposed copy-edit as a git-style diff, one hunk per change, ranked by safety: objective hunks
+(spelling, doubled word, whitespace, punctuation) read quiet and come pre-kept; judgment hunks (a
+declared normalization, or a grammar reword) carry the review-this treatment, default to undecided,
+and are NEVER swept by Accept fixes until the author confirms each. That safety property is the spine.
+
+The author's original stays in the editor buffer the whole time; the apply seam (registerTidy) shows
+the proposed edits as decorations and writes nothing until Apply. Apply lands the kept hunks in ONE
+batched transaction (one undoable step), so the whole tidy is one move back. Cancel and Reject all
+leave the document byte-identical.
+
+The category of each hunk is inferred LOCALLY from the diff shape and the enabled config, never a claim
+the model made and never a count of the author's own usage. A normalization names ONLY the config
+setting that authorized it; counting the author's own habit is the harmonize-to-author judgment cairn
+must never make, so no such count exists.
+-->
+<script lang="ts">import SparklesIcon from "@lucide/svelte/icons/sparkles";
+import CheckIcon from "@lucide/svelte/icons/check";
+import XIcon from "@lucide/svelte/icons/x";
+import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+import LightbulbIcon from "@lucide/svelte/icons/lightbulb";
+import EyeIcon from "@lucide/svelte/icons/eye";
+import { lineLabel } from "./tidy-diff.js";
+import {
+  categorize,
+  isObjective,
+  buildBecause,
+  categoryLabel
+} from "./tidy-categorize.js";
+let { changes, original, conventions, model, title, api, onclose, onshow } = $props();
+const hunks = $derived(changes.map((c) => {
+  const category = categorize(c, original, conventions);
+  const objective = isObjective(category);
+  const removed = original.slice(c.from, c.to);
+  const added = c.replacement;
+  const line = lineLabel(original, c.from);
+  const lines = original.split("\n");
+  const contextBefore = line >= 2 ? lines[line - 2] ?? "" : "";
+  const contextAfter = line < lines.length ? lines[line] ?? "" : "";
+  const lineStart = original.lastIndexOf("\n", c.from - 1) + 1;
+  const nextNewline = original.indexOf("\n", c.from);
+  const lineEnd = nextNewline === -1 ? original.length : nextNewline;
+  const fullLine = original.slice(lineStart, lineEnd);
+  const pre = original.slice(lineStart, c.from);
+  const post = original.slice(c.to, lineEnd);
+  const because = category.kind === "normalization" ? buildBecause(category.convention, conventions) : null;
+  return {
+    index: c.index,
+    category,
+    objective,
+    line,
+    contextBefore,
+    contextAfter,
+    delText: fullLine,
+    addText: pre + added + post,
+    delRun: { pre, mid: removed, post },
+    addRun: { pre, mid: added, post },
+    because,
+    label: categoryLabel(category)
+  };
+}));
+let overrides = $state({});
+function effectiveDisposition(h, map) {
+  return map[h.index] ?? (h.objective ? "kept" : "undecided");
+}
+const dispositions = $derived(
+  Object.fromEntries(hunks.map((h) => [h.index, effectiveDisposition(h, overrides)]))
+);
+let focusedPos = $state(0);
+let tallyMessage = $state("");
+let actionMessage = $state("");
+let announceNonce = 0;
+function nonce() {
+  return announceNonce++ % 2 === 0 ? "" : "​";
+}
+const keptCount = $derived(hunks.filter((h) => dispositions[h.index] === "kept").length);
+const reviewCount = $derived(hunks.filter((h) => dispositions[h.index] === "undecided").length);
+const skipCount = $derived(hunks.filter((h) => dispositions[h.index] === "rejected").length);
+let dialog = $state(null);
+$effect(() => {
+  dialog?.showModal();
+});
+function setDisposition(index, next) {
+  overrides = { ...overrides, [index]: next };
+}
+function narrate(h, verb) {
+  const where = `Hunk ${hunks.indexOf(h) + 1} of ${hunks.length}`;
+  const what = h.delRun.mid && h.addRun.mid ? `${h.delRun.mid.trim()} becomes ${h.addRun.mid.trim()}` : h.label;
+  const why = h.because ? `, your ${h.because.label} setting is ${h.because.variant}` : "";
+  actionMessage = `${where}. ${h.label}. ${what}${why}. ${verb}.${nonce()}`;
+}
+function acceptHunk(h) {
+  setDisposition(h.index, "kept");
+  narrate(h, "Kept");
+}
+function rejectHunk(h) {
+  setDisposition(h.index, "rejected");
+  narrate(h, "Skipped");
+}
+function acceptFixes() {
+  const next = { ...overrides };
+  for (const h of hunks) if (h.objective) next[h.index] = "kept";
+  overrides = next;
+  const n = hunks.filter((h) => h.objective).length;
+  const stillReview = hunks.filter((h) => effectiveDisposition(h, next) === "undecided").length;
+  tallyMessage = `${n} fixes kept. ${stillReview} still to review.${nonce()}`;
+}
+function rejectAll() {
+  overrides = Object.fromEntries(hunks.map((h) => [h.index, "rejected"]));
+  tallyMessage = `All ${hunks.length} changes skipping.${nonce()}`;
+}
+function apply() {
+  const keptIndexes = hunks.filter((h) => dispositions[h.index] === "kept").map((h) => h.index);
+  api.acceptMany(keptIndexes);
+  api.exit();
+  dialog?.close();
+  onclose(true);
+}
+function cancel() {
+  api.exit();
+  dialog?.close();
+  onclose(false);
+}
+function showInText(h) {
+  const c = changes.find((ch) => ch.index === h.index);
+  if (c) onshow(c.from, c.to);
+}
+function moveFocus(next) {
+  focusedPos = next;
+  const h = hunks[focusedPos];
+  if (h) narrate(h, "Focused");
+}
+function onListKeydown(e) {
+  const h = hunks[focusedPos];
+  if (e.key === "j" || e.key === "n") {
+    moveFocus(Math.min(focusedPos + 1, hunks.length - 1));
+    e.preventDefault();
+  } else if (e.key === "k" || e.key === "p") {
+    moveFocus(Math.max(focusedPos - 1, 0));
+    e.preventDefault();
+  } else if (e.key === "a" && !e.shiftKey) {
+    if (h) acceptHunk(h);
+    e.preventDefault();
+  } else if (e.key === "r" && !e.shiftKey) {
+    if (h) rejectHunk(h);
+    e.preventDefault();
+  } else if (e.key === "A" || e.key === "a" && e.shiftKey) {
+    acceptFixes();
+    e.preventDefault();
+  }
+}
+function onDialogCancel(e) {
+  e.preventDefault();
+  cancel();
+}
+function actsLabel(h) {
+  return h.objective ? "Accept or reject this fix" : "Accept or reject this change";
+}
+</script>
+
+<dialog
+  bind:this={dialog}
+  class="modal"
+  aria-labelledby="cairn-tidy-title"
+  oncancel={onDialogCancel}
+  onkeydown={onListKeydown}
+  data-testid="tidy-review"
+>
+  <div class="modal-box flex max-h-[85vh] w-[54rem] max-w-full flex-col overflow-hidden p-0">
+    <!-- the review head -->
+    <div class="flex items-center gap-3 border-b border-[var(--cairn-card-border)] px-4 py-3">
+      <span class="flex size-9 flex-none items-center justify-center rounded-lg bg-primary/10 text-primary">
+        <SparklesIcon class="size-5" aria-hidden="true" />
+      </span>
+      <div class="min-w-0 flex-1">
+        <div id="cairn-tidy-title" class="text-lg font-bold leading-tight">Review tidy</div>
+        <div class="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-[var(--color-muted)]">
+          <span><b class="text-base-content">{hunks.length} {hunks.length === 1 ? 'change' : 'changes'}</b> to <b class="text-base-content">{title}</b></span>
+          <span class="rounded-full border border-[var(--cairn-card-border)] px-2 py-0.5 text-[0.6875rem] font-semibold">{model}</span>
+        </div>
+      </div>
+      <span class="hidden flex-none items-center gap-1.5 text-[0.6875rem] text-[var(--color-muted)] sm:inline-flex" aria-hidden="true">
+        <kbd class="kbd kbd-xs">j</kbd><kbd class="kbd kbd-xs">k</kbd> move
+        <kbd class="kbd kbd-xs">a</kbd><kbd class="kbd kbd-xs">r</kbd> accept / reject
+      </span>
+      <button type="button" class="btn btn-ghost btn-sm btn-square" aria-label="Cancel review" onclick={cancel}>
+        <XIcon class="size-4" aria-hidden="true" />
+      </button>
+    </div>
+
+    <!-- the bulk bar: the live tally (role=status, bulk-only) + Accept fixes / Reject all -->
+    <div class="flex items-center gap-3 border-b border-[var(--cairn-card-border)] bg-base-200 px-4 py-2.5">
+      <span class="inline-flex flex-wrap items-center gap-2 text-sm text-[var(--color-muted)]" data-testid="tidy-tally">
+        <span class="inline-flex items-center gap-1 font-semibold text-[var(--color-positive-ink)]">
+          <CheckIcon class="size-3" aria-hidden="true" /><span class="tabular-nums">{keptCount}</span> kept
+        </span>
+        <span class="opacity-40" aria-hidden="true">&middot;</span>
+        <span class="inline-flex items-center gap-1 font-semibold text-[var(--cairn-warning-ink)]">
+          <TriangleAlertIcon class="size-3" aria-hidden="true" /><span class="tabular-nums">{reviewCount}</span> to review
+        </span>
+        <span class="opacity-40" aria-hidden="true">&middot;</span>
+        <span class="inline-flex items-center gap-1 font-semibold text-[var(--cairn-error-ink)]">
+          <XIcon class="size-3" aria-hidden="true" /><span class="tabular-nums">{skipCount}</span> skipping
+        </span>
+      </span>
+      <span class="flex-1"></span>
+      <button type="button" class="btn btn-sm btn-outline" onclick={acceptFixes}>
+        <CheckIcon class="size-3 text-[var(--color-positive-ink)]" aria-hidden="true" />Accept fixes
+      </button>
+      <button type="button" class="btn btn-sm btn-outline" onclick={rejectAll}>
+        <XIcon class="size-3 text-[var(--cairn-error-ink)]" aria-hidden="true" />Reject all
+      </button>
+    </div>
+
+    <!-- the hunk list: the scroll container -->
+    <div class="flex flex-col gap-3 overflow-y-auto px-4 py-3.5">
+      {#each hunks as h, i (h.index)}
+        {@const decided = dispositions[h.index]}
+        {@const isJudgment = !h.objective}
+        {@const undecided = decided === 'undecided'}
+        <div
+          class="relative overflow-hidden rounded-xl border bg-base-100 {isJudgment && undecided
+            ? 'border-[color-mix(in_oklab,var(--cairn-warning-ink)_30%,var(--cairn-card-border))] shadow-[inset_3px_0_0_0_color-mix(in_oklab,var(--cairn-warning-ink)_55%,transparent)]'
+            : 'border-[var(--cairn-card-border)]'} {decided === 'rejected' ? 'opacity-70' : ''} {i ===
+          focusedPos
+            ? 'outline outline-2 outline-offset-1 outline-[var(--color-primary)]'
+            : ''}"
+          data-testid="tidy-hunk"
+          data-objective={h.objective}
+          data-disposition={decided}
+        >
+          <!-- the hunk head -->
+          <div
+            class="flex items-center gap-2 border-b border-[var(--cairn-card-border)] px-3 py-2 {isJudgment
+              ? 'bg-[color-mix(in_oklab,var(--cairn-warning-ink)_7%,transparent)]'
+              : 'bg-[color-mix(in_oklab,var(--color-base-content)_1.5%,transparent)]'}"
+          >
+            <span
+              class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[0.6875rem] font-semibold {isJudgment
+                ? 'bg-[color-mix(in_oklab,var(--cairn-warning-ink)_11%,transparent)] text-[var(--cairn-warning-ink)]'
+                : 'bg-[color-mix(in_oklab,var(--color-base-content)_6%,transparent)] text-[var(--color-muted)]'}"
+            >
+              {h.label}
+            </span>
+            {#if isJudgment}
+              <span class="inline-flex items-center gap-1 text-[0.625rem] font-semibold uppercase tracking-wide text-[var(--cairn-warning-ink)]">
+                <EyeIcon class="size-3" aria-hidden="true" />Review this
+              </span>
+            {/if}
+            <button
+              type="button"
+              class="inline-flex min-h-6 items-center gap-1 rounded px-1.5 py-1.5 font-mono text-[0.6875rem] text-[var(--color-muted)] underline decoration-[color-mix(in_oklab,currentColor_35%,transparent)] underline-offset-2 hover:bg-primary/[0.08] hover:text-primary"
+              title="Show this line in the editor"
+              onclick={() => showInText(h)}
+            >
+              <EyeIcon class="size-3" aria-hidden="true" />line {h.line}
+            </button>
+            <span class="flex-1"></span>
+            <span class="inline-flex flex-none items-center overflow-hidden rounded-md border border-[var(--cairn-card-border)]" role="group" aria-label={actsLabel(h)}>
+              <button
+                type="button"
+                class="inline-flex min-h-6 items-center gap-1 px-2.5 py-1.5 text-[0.6875rem] font-medium {decided ===
+                'kept'
+                  ? 'bg-[color-mix(in_oklab,var(--color-positive-ink)_13%,transparent)] text-[var(--color-positive-ink)]'
+                  : 'text-[var(--color-muted)]'}"
+                aria-pressed={decided === 'kept'}
+                onclick={() => acceptHunk(h)}
+              >
+                <CheckIcon class="size-3" aria-hidden="true" />Accept
+              </button>
+              <button
+                type="button"
+                class="inline-flex min-h-6 items-center gap-1 border-l border-[var(--cairn-card-border)] px-2.5 py-1.5 text-[0.6875rem] font-medium {decided ===
+                'rejected'
+                  ? 'bg-[color-mix(in_oklab,var(--cairn-error-ink)_12%,transparent)] text-[var(--cairn-error-ink)]'
+                  : 'text-[var(--color-muted)]'}"
+                aria-pressed={decided === 'rejected'}
+                onclick={() => rejectHunk(h)}
+              >
+                <XIcon class="size-3" aria-hidden="true" />Reject
+              </button>
+            </span>
+          </div>
+
+          <!-- the unified diff body: context, deletion, insertion, optional because-line -->
+          <div class="font-mono text-[0.8125rem] leading-relaxed">
+            {#if h.contextBefore}
+              <div class="flex items-baseline">
+                <span class="w-6 flex-none select-none text-center text-[var(--color-muted)] opacity-60" aria-hidden="true">&nbsp;</span>
+                <span class="flex-1 whitespace-pre-wrap break-words px-1 py-0.5 text-[var(--color-muted)]">{h.contextBefore}</span>
+              </div>
+            {/if}
+            <div class="flex items-baseline bg-[var(--cairn-tidy-del-row)]">
+              <span class="w-6 flex-none select-none text-center font-semibold text-[var(--cairn-error-ink)]" aria-hidden="true">&minus;</span>
+              <span class="flex-1 whitespace-pre-wrap break-words px-1 py-0.5">{h.delRun.pre}<span
+                  class="rounded-sm bg-[var(--cairn-tidy-del-run)] px-px text-[var(--cairn-error-ink)] line-through decoration-1"
+                  data-testid="tidy-del"
+                >{h.delRun.mid}</span>{h.delRun.post}</span>
+            </div>
+            <div class="flex items-baseline bg-[var(--cairn-tidy-add-row)] {decided === 'rejected' ? 'opacity-70' : ''}">
+              <span class="w-6 flex-none select-none text-center font-semibold text-[var(--color-positive-ink)]" aria-hidden="true">+</span>
+              <span class="flex-1 whitespace-pre-wrap break-words px-1 py-0.5">{h.addRun.pre}<span
+                  class="rounded-sm bg-[var(--cairn-tidy-add-run)] px-px text-[var(--color-positive-ink)] {decided ===
+                  'rejected'
+                    ? 'line-through opacity-70'
+                    : ''}"
+                  data-testid="tidy-add"
+                >{h.addRun.mid}</span>{h.addRun.post}</span>
+            </div>
+            {#if h.contextAfter}
+              <div class="flex items-baseline">
+                <span class="w-6 flex-none select-none text-center text-[var(--color-muted)] opacity-60" aria-hidden="true">&nbsp;</span>
+                <span class="flex-1 whitespace-pre-wrap break-words px-1 py-0.5 text-[var(--color-muted)]">{h.contextAfter}</span>
+              </div>
+            {/if}
+          </div>
+
+          {#if h.because}
+            <!-- the mandatory because-line: names ONLY the config setting that authorized this hunk -->
+            <div
+              class="flex items-start gap-2 border-t border-dashed border-[var(--cairn-card-border)] bg-[color-mix(in_oklab,var(--cairn-warning-ink)_5%,transparent)] px-3 py-2 text-xs leading-snug text-[var(--color-subtle)]"
+              data-testid="tidy-because"
+            >
+              <LightbulbIcon class="mt-px size-3 flex-none text-[var(--cairn-warning-ink)]" aria-hidden="true" />
+              <span>Your <b class="text-base-content">{h.because.label} setting</b> is <b class="text-base-content">{h.because.variant}</b>, so {h.because.effect}.</span>
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    <!-- the review footer: the commit note + Cancel + the one-transaction Apply -->
+    <div class="flex items-center gap-2.5 border-t border-[var(--cairn-card-border)] px-4 py-3.5">
+      <span class="flex flex-1 items-center gap-1.5 text-[0.6875rem] leading-snug text-[var(--color-muted)]">
+        <CheckIcon class="size-3 flex-none text-[var(--color-positive-ink)]" aria-hidden="true" />
+        Applies to the editor only. Your next Save commits it like any edit, and Undo takes the whole tidy back.
+      </span>
+      <button type="button" class="btn btn-sm" onclick={cancel}>Cancel</button>
+      <button type="button" class="btn btn-sm btn-primary" onclick={apply} disabled={keptCount === 0}>
+        <CheckIcon class="size-3.5" aria-hidden="true" />Apply {keptCount} {keptCount === 1 ? 'change' : 'changes'}
+      </button>
+    </div>
+
+    <!-- the two live regions (the MediaPicker discipline), both visually hidden. The tally (role=status)
+         speaks only on a bulk action; the polite region narrates the single last per-hunk action. -->
+    <span class="sr-only" role="status" data-testid="tidy-tally-live">{tallyMessage}</span>
+    <span class="sr-only" aria-live="polite" data-testid="tidy-action-live">{actionMessage}</span>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" tabindex="-1" aria-label="Close" onclick={cancel}>close</button>
+  </form>
+</dialog>

package/dist/components/TidyReview.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { Change } from './tidy-diff.js';
+import type { TidyConventions } from '../nav/site-config.js';
+interface Props {
+    /** The validated change set (Task 13 output), the unit the surface accepts and rejects. */
+    changes: Change[];
+    /** The captured original the diff was computed against; the source of every line label and the
+     *  before/after rows. Positions index this string. */
+    original: string;
+    /** The resolved tidy conventions, the ONLY data source for a normalization's because-line and the
+     *  category inference. Never the buffer's usage. */
+    conventions: TidyConventions;
+    /** The model that produced the result, for the head pill (e.g. "claude-sonnet-4-6"). */
+    model: string;
+    /** The document's display title, for the head. */
+    title: string;
+    /** The apply seam from MarkdownEditor: the surface drives the in-buffer decorations and the batched
+     *  apply through it. Typed with an inline `import(...)` so no static editor-module edge sits in this
+     *  component (the editor-boundary test bars that edge by a textual scan). */
+    api: import('./editor-tidy.js').TidyApi;
+    /** Called when the review closes (apply or cancel), so the host clears tidy mode and re-enables the
+     *  editor. `applied` is true when the author applied changes, false on cancel/reject-all. */
+    onclose: (applied: boolean) => void;
+    /** Called to scroll the editor underneath to a hunk's source line; the host drives the editor's
+     *  selectRange seam. */
+    onshow: (from: number, to: number) => void;
+}
+/**
+ * The tidy review surface (spec 2.5, the approved rev.2 mockup). A native `<dialog>` opened with
+ * `showModal()`, so the focus trap, Escape, and inert background come from the platform. It shows the
+ * proposed copy-edit as a git-style diff, one hunk per change, ranked by safety: objective hunks
+ * (spelling, doubled word, whitespace, punctuation) read quiet and come pre-kept; judgment hunks (a
+ * declared normalization, or a grammar reword) carry the review-this treatment, default to undecided,
+ * and are NEVER swept by Accept fixes until the author confirms each. That safety property is the spine.
+ *
+ * The author's original stays in the editor buffer the whole time; the apply seam (registerTidy) shows
+ * the proposed edits as decorations and writes nothing until Apply. Apply lands the kept hunks in ONE
+ * batched transaction (one undoable step), so the whole tidy is one move back. Cancel and Reject all
+ * leave the document byte-identical.
+ *
+ * The category of each hunk is inferred LOCALLY from the diff shape and the enabled config, never a claim
+ * the model made and never a count of the author's own usage. A normalization names ONLY the config
+ * setting that authorized it; counting the author's own habit is the harmonize-to-author judgment cairn
+ * must never make, so no such count exists.
+ */
+declare const TidyReview: import("svelte").Component<Props, {}, "">;
+type TidyReview = ReturnType<typeof TidyReview>;
+export default TidyReview;

package/dist/components/WebLinkDialog.svelte

@@ -6,46 +6,25 @@ text; when the editor holds a selection it arrives as the default text, and the
 that selection either way. Built on a native <dialog>, following the LinkPicker a11y conventions,
 and opened by the host's Ctrl/Cmd+K shortcut through the exported open().
 -->
-<script lang="ts">
-  interface Props {
-    /** Insert an inline link at the editor cursor; the editor's registerInsertLink seam. */
-    insert: (href: string, title: string) => void;
-    /** Read the editor's current selection, for the Text field's default. */
-    selection?: () => string;
-    /** Disable the trigger; the host sets it while Preview shows. */
-    disabled?: boolean;
-    /** Render the built-in Web link 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 { insert, selection, disabled = false, trigger = true }: Props = $props();
-
-  let dialog = $state<HTMLDialogElement | null>(null);
-  let hrefInput = $state<HTMLInputElement | null>(null);
-  let href = $state('');
-  let text = $state('');
-
-  /** Open the dialog with fresh fields; the edit page's Ctrl/Cmd+K shortcut calls it too. */
-  export function open() {
-    href = '';
-    text = selection?.() ?? '';
-    dialog?.showModal();
-    // showModal() lands focus on the first focusable element (the header Close button), so move
-    // it to the address input the dialog exists for (WCAG 2.4.3). A microtask defers past the
-    // dialog's own focus handling, the RenameDialog recipe.
-    queueMicrotask(() => hrefInput?.focus());
-  }
-  function close() {
-    dialog?.close();
-  }
-  function submit(e: SubmitEvent) {
-    e.preventDefault();
-    // With no text and no selection the address itself becomes the display text, so the link
-    // never renders as an invisible pair of brackets.
-    insert(href, text.trim() || href);
-    close();
-  }
+<script lang="ts">let { insert, selection, disabled = false, trigger = true } = $props();
+let dialog = $state(null);
+let hrefInput = $state(null);
+let href = $state("");
+let text = $state("");
+export function open() {
+  href = "";
+  text = selection?.() ?? "";
+  dialog?.showModal();
+  queueMicrotask(() => hrefInput?.focus());
+}
+function close() {
+  dialog?.close();
+}
+function submit(e) {
+  e.preventDefault();
+  insert(href, text.trim() || href);
+  close();
+}
 </script>
 
 {#if trigger}