@glw907/cairn-cms 0.60.0 → 0.60.1

package/dist/components/CairnTidySettings.svelte

@@ -22,267 +22,200 @@ announces the new total; the per-keystroke diff examples are aria-hidden so the
 The save commits the conventions block to the same committed YAML the nav editor writes (one config
 home), diffable and shared across editors.
 -->
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import CsrfField from './CsrfField.svelte';
-  import CheckIcon from '@lucide/svelte/icons/check';
-  import CircleIcon from '@lucide/svelte/icons/circle';
-  import SettingsIcon from '@lucide/svelte/icons/settings';
-  import LockIcon from '@lucide/svelte/icons/lock';
-  import CodeIcon from '@lucide/svelte/icons/code-xml';
-  import ListIcon from '@lucide/svelte/icons/list';
-  import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
-  import InfoIcon from '@lucide/svelte/icons/info';
-  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
-  import SparklesIcon from '@lucide/svelte/icons/sparkles';
-  import type { SettingsData } from '../sveltekit/content-routes.js';
-  import type { TidyConventions } from '../nav/site-config.js';
-
-  interface Props {
-    /** The two-tier settings load: the read-only developer facts, the truthful gate flag, and the
-     *  resolved editor-tier conventions. */
-    data: SettingsData;
-  }
-
-  let { data }: Props = $props();
-
-  // The working copy of the editor-tier conventions: every control binds to this, and the save posts
-  // it. Seeded once from the load's resolved conventions, so the resting state IS the committed state.
-  // A fresh load remounts the screen (the route key), so seeding from the initial prop is correct.
-  let conv = $state<TidyConventions>(untrack(() => ({ ...data.conventions })));
-
-  // A multi-position style row: its config key, label, the variants (value + short label), and the
-  // diff example for the chosen variant.
-  type Variant = { value: string; label: string };
-  type StyleRow = {
-    key: keyof TidyConventions;
-    name: string;
-    /** The variants when the row is a multi-position toggle; absent for a plain on/off (en-dash). */
-    variants?: Variant[];
-    /** The radiogroup's label ("Write times as"). */
-    variantLabel?: string;
-    /** The generic "what it does" example, shown when the row is off (a hypothetical). */
-    egBefore: string;
-    egAfter: string;
-  };
-
-  // The style conventions, in mockup order. Each maps to one config field. The multi-position rows
-  // carry their variants; en-dash is a plain on/off.
-  const styleRows: StyleRow[] = [
-    {
-      key: 'oxfordComma',
-      name: 'Oxford comma',
-      variantLabel: 'Use the Oxford comma',
-      variants: [
-        { value: 'always', label: 'Always' },
-        { value: 'complex-only', label: 'Only in complex lists' },
-        { value: 'never', label: 'Never' },
-      ],
-      egBefore: 'wax, skins and poles',
-      egAfter: 'wax, skins, and poles',
-    },
-    {
-      key: 'emDash',
-      name: 'Em-dash style',
-      variantLabel: 'Write em dashes as',
-      variants: [
-        { value: 'spaced', label: 'Spaced' },
-        { value: 'closed', label: 'Closed' },
-      ],
-      egBefore: 'grooming--early',
-      egAfter: 'grooming—early',
-    },
-    { key: 'enDashRanges', name: 'En-dash in number ranges', egBefore: '9-11 am', egAfter: '9–11 am' },
-    {
-      key: 'ellipsis',
-      name: 'Ellipsis',
-      variantLabel: 'Write ellipses as',
-      variants: [
-        { value: 'single-char', label: 'One character' },
-        { value: 'three-dots', label: 'Three dots' },
-      ],
-      egBefore: 'later...',
-      egAfter: 'later…',
-    },
-    {
-      key: 'timeFormat',
-      name: 'Time format',
-      variantLabel: 'Write times as',
-      variants: [
-        { value: '5 PM', label: '5 PM' },
-        { value: '5pm', label: '5pm' },
-        { value: '5 p.m.', label: '5 p.m.' },
-      ],
-      egBefore: 'doors at 5pm',
-      egAfter: 'doors at 5 PM',
-    },
-    {
-      key: 'numberStyle',
-      name: 'Number style',
-      variantLabel: 'Write numbers as',
-      variants: [
-        { value: 'under-ten', label: 'Spell out under ten' },
-        { value: 'under-hundred', label: 'Spell out under 100' },
-        { value: 'always-numerals', label: 'Always numerals' },
-      ],
-      egBefore: '7 inches of snow',
-      egAfter: 'seven inches of snow',
-    },
-    {
-      key: 'measurements',
-      name: 'Measurements and units',
-      variantLabel: 'Write units as',
-      variants: [
-        { value: 'abbreviate', label: 'Abbreviate' },
-        { value: 'spell-out', label: 'Spell out' },
-      ],
-      egBefore: '15 centimeters',
-      egAfter: '15 cm',
-    },
-    {
-      key: 'percent',
-      name: 'Percent',
-      variantLabel: 'Write percent as',
-      variants: [
-        { value: 'sign', label: 'Sign (%)' },
-        { value: 'word', label: 'Word (percent)' },
-      ],
-      egBefore: '30 percent',
-      egAfter: '30%',
-    },
-  ];
-
-  // The advanced (higher-risk) rows: plain on/off booleans behind a disclosure.
-  const advancedRows: { key: keyof TidyConventions; name: string; egBefore: string; egAfter: string }[] = [
-    { key: 'smartQuotes', name: 'Curly quotes', egBefore: '"groomed"', egAfter: '“groomed”' },
-    { key: 'brandCaps', name: 'Brand and proper-noun capitals', egBefore: 'github', egAfter: 'GitHub' },
-  ];
-
-  // --- whether a row is on, generic over the config shape ---
-  // A boolean field is on when true; a multi-position field is on when it carries a variant.
-  function rowOn(key: keyof TidyConventions): boolean {
-    const v = conv[key];
-    return typeof v === 'boolean' ? v : v !== undefined;
-  }
-
-  // The default variant a multi-position toggle takes when turned on: the first listed (the mockup's
-  // leading position). A plain on/off uses true.
-  function defaultVariant(row: StyleRow): string | boolean {
-    return row.variants ? row.variants[0].value : true;
-  }
-
-  function toggleStyle(row: StyleRow) {
-    if (rowOn(row.key)) {
-      // Off: a multi-position field collapses to undefined; a boolean field to false.
-      (conv[row.key] as unknown) = row.variants ? undefined : false;
-    } else {
-      (conv[row.key] as unknown) = defaultVariant(row);
-    }
-  }
-
-  function toggleBool(key: keyof TidyConventions) {
-    (conv[key] as unknown) = !rowOn(key);
-  }
-
-  function pickVariant(key: keyof TidyConventions, value: string) {
-    (conv[key] as unknown) = value;
-  }
-
-  // --- the live counts and the generated summary, in the role="status" regions ---
-  const styleOnCount = $derived(
-    styleRows.filter((r) => rowOn(r.key)).length + advancedRows.filter((r) => rowOn(r.key)).length,
-  );
-
-  // The "fix" clause names the always-on objective set plus any on style convention; the "leaves
-  // alone" clause names what stays untouched. Both are generated from the live config, so the line is
-  // always true for any combination.
-  const summaryFixes = $derived.by(() => {
-    const parts: string[] = [];
-    if (conv.fixes) parts.push('spelling', 'grammar', 'doubled words', 'spacing', 'capitals', 'end punctuation');
-    if (rowOn('oxfordComma')) parts.push('commas');
-    if (rowOn('timeFormat')) parts.push('time format');
-    if (rowOn('numberStyle')) parts.push('number style');
-    if (rowOn('measurements')) parts.push('units');
-    if (rowOn('percent')) parts.push('percent');
-    if (rowOn('emDash') || rowOn('enDashRanges')) parts.push('dashes');
-    if (rowOn('ellipsis')) parts.push('ellipses');
-    if (rowOn('smartQuotes')) parts.push('quotes');
-    if (rowOn('brandCaps')) parts.push('brand names');
-    return parts.length ? joinList(parts) : 'nothing yet';
-  });
-  const summaryLeaves = $derived.by(() => {
-    const parts: string[] = [];
-    if (!rowOn('oxfordComma')) parts.push('commas');
-    if (!rowOn('emDash') && !rowOn('enDashRanges')) parts.push('dashes');
-    if (!rowOn('numberStyle')) parts.push('number style');
-    if (!rowOn('measurements')) parts.push('units');
-    if (!rowOn('percent')) parts.push('percent');
-    if (!rowOn('smartQuotes')) parts.push('quotes');
-    if (!rowOn('brandCaps')) parts.push('brand names');
-    return parts.length ? joinList(parts) : 'nothing';
-  });
-
-  function joinList(parts: string[]): string {
-    if (parts.length === 1) return parts[0];
-    if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;
-    return `${parts.slice(0, -1).join(', ')}, and ${parts[parts.length - 1]}`;
-  }
-
-  // --- section masters and the safe-default reset ---
-  function styleAllOn() {
-    for (const row of styleRows) if (!rowOn(row.key)) (conv[row.key] as unknown) = defaultVariant(row);
-    for (const row of advancedRows) (conv[row.key] as unknown) = true;
-  }
-  function styleAllOff() {
-    for (const row of styleRows) (conv[row.key] as unknown) = row.variants ? undefined : false;
-    for (const row of advancedRows) (conv[row.key] as unknown) = false;
-  }
-  function fixesAllOff() {
-    conv.fixes = false;
-  }
-  function fixesAllOn() {
-    conv.fixes = true;
-  }
-  // Reset to the safe resting default: Fixes on, every style and advanced toggle off, every variant
-  // collapsed. Never named a house style.
-  function resetSafeDefault() {
-    conv = { fixes: true, enDashRanges: false, smartQuotes: false, brandCaps: false };
-  }
-
-  // --- the radiogroup roving-tabindex handler, the CairnMediaLibrary triage recipe ---
-  // The selected radio is the only tab stop; Arrow/Home/End move the selection and the focus with
-  // wraparound. A declared radiogroup owes this keyboard model.
-  let radioEls = $state<Record<string, HTMLButtonElement[]>>(
-    Object.fromEntries(styleRows.filter((r) => r.variants).map((r) => [String(r.key), []])),
-  );
-  function onRadioKeydown(e: KeyboardEvent, row: StyleRow, i: number) {
-    if (!row.variants) return;
-    const n = row.variants.length;
-    let next = i;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (i + 1) % n;
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (i - 1 + n) % n;
-    else if (e.key === 'Home') next = 0;
-    else if (e.key === 'End') next = n - 1;
-    else return;
-    e.preventDefault();
-    pickVariant(row.key, row.variants[next].value);
-    radioEls[String(row.key)]?.[next]?.focus();
-  }
-
-  // The conventions payload the save posts: the live working copy as JSON.
-  const conventionsJson = $derived(JSON.stringify(conv));
-
-  // The shared class for a check-and-tint on/off button (the binary-state idiom, no DaisyUI .toggle).
-  function onoffClass(on: boolean): string {
-    return `inline-flex h-[30px] items-center gap-1.5 rounded-lg border px-2.5 text-xs font-semibold ${
-      on
-        ? 'border-primary/30 bg-primary/10 text-primary'
-        : 'border-[var(--cairn-card-border)] bg-base-100 text-[var(--color-muted)] hover:border-primary/35 hover:text-base-content'
-    }`;
+<script lang="ts">import { untrack } from "svelte";
+import CsrfField from "./CsrfField.svelte";
+import CheckIcon from "@lucide/svelte/icons/check";
+import CircleIcon from "@lucide/svelte/icons/circle";
+import SettingsIcon from "@lucide/svelte/icons/settings";
+import LockIcon from "@lucide/svelte/icons/lock";
+import CodeIcon from "@lucide/svelte/icons/code-xml";
+import ListIcon from "@lucide/svelte/icons/list";
+import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+import InfoIcon from "@lucide/svelte/icons/info";
+import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
+import SparklesIcon from "@lucide/svelte/icons/sparkles";
+let { data } = $props();
+let conv = $state(untrack(() => ({ ...data.conventions })));
+const styleRows = [
+  {
+    key: "oxfordComma",
+    name: "Oxford comma",
+    variantLabel: "Use the Oxford comma",
+    variants: [
+      { value: "always", label: "Always" },
+      { value: "complex-only", label: "Only in complex lists" },
+      { value: "never", label: "Never" }
+    ],
+    egBefore: "wax, skins and poles",
+    egAfter: "wax, skins, and poles"
+  },
+  {
+    key: "emDash",
+    name: "Em-dash style",
+    variantLabel: "Write em dashes as",
+    variants: [
+      { value: "spaced", label: "Spaced" },
+      { value: "closed", label: "Closed" }
+    ],
+    egBefore: "grooming--early",
+    egAfter: "grooming—early"
+  },
+  { key: "enDashRanges", name: "En-dash in number ranges", egBefore: "9-11 am", egAfter: "9–11 am" },
+  {
+    key: "ellipsis",
+    name: "Ellipsis",
+    variantLabel: "Write ellipses as",
+    variants: [
+      { value: "single-char", label: "One character" },
+      { value: "three-dots", label: "Three dots" }
+    ],
+    egBefore: "later...",
+    egAfter: "later…"
+  },
+  {
+    key: "timeFormat",
+    name: "Time format",
+    variantLabel: "Write times as",
+    variants: [
+      { value: "5 PM", label: "5 PM" },
+      { value: "5pm", label: "5pm" },
+      { value: "5 p.m.", label: "5 p.m." }
+    ],
+    egBefore: "doors at 5pm",
+    egAfter: "doors at 5 PM"
+  },
+  {
+    key: "numberStyle",
+    name: "Number style",
+    variantLabel: "Write numbers as",
+    variants: [
+      { value: "under-ten", label: "Spell out under ten" },
+      { value: "under-hundred", label: "Spell out under 100" },
+      { value: "always-numerals", label: "Always numerals" }
+    ],
+    egBefore: "7 inches of snow",
+    egAfter: "seven inches of snow"
+  },
+  {
+    key: "measurements",
+    name: "Measurements and units",
+    variantLabel: "Write units as",
+    variants: [
+      { value: "abbreviate", label: "Abbreviate" },
+      { value: "spell-out", label: "Spell out" }
+    ],
+    egBefore: "15 centimeters",
+    egAfter: "15 cm"
+  },
+  {
+    key: "percent",
+    name: "Percent",
+    variantLabel: "Write percent as",
+    variants: [
+      { value: "sign", label: "Sign (%)" },
+      { value: "word", label: "Word (percent)" }
+    ],
+    egBefore: "30 percent",
+    egAfter: "30%"
   }
-  function segClass(on: boolean): string {
-    return `inline-flex items-center gap-1.5 px-3 py-1.5 text-xs ${on ? 'bg-primary/10 text-primary font-medium' : 'text-[var(--color-muted)]'}`;
+];
+const advancedRows = [
+  { key: "smartQuotes", name: "Curly quotes", egBefore: '"groomed"', egAfter: "“groomed”" },
+  { key: "brandCaps", name: "Brand and proper-noun capitals", egBefore: "github", egAfter: "GitHub" }
+];
+function rowOn(key) {
+  const v = conv[key];
+  return typeof v === "boolean" ? v : v !== void 0;
+}
+function defaultVariant(row) {
+  return row.variants ? row.variants[0].value : true;
+}
+function toggleStyle(row) {
+  if (rowOn(row.key)) {
+    conv[row.key] = row.variants ? void 0 : false;
+  } else {
+    conv[row.key] = defaultVariant(row);
   }
+}
+function toggleBool(key) {
+  conv[key] = !rowOn(key);
+}
+function pickVariant(key, value) {
+  conv[key] = value;
+}
+const styleOnCount = $derived(
+  styleRows.filter((r) => rowOn(r.key)).length + advancedRows.filter((r) => rowOn(r.key)).length
+);
+const summaryFixes = $derived.by(() => {
+  const parts = [];
+  if (conv.fixes) parts.push("spelling", "grammar", "doubled words", "spacing", "capitals", "end punctuation");
+  if (rowOn("oxfordComma")) parts.push("commas");
+  if (rowOn("timeFormat")) parts.push("time format");
+  if (rowOn("numberStyle")) parts.push("number style");
+  if (rowOn("measurements")) parts.push("units");
+  if (rowOn("percent")) parts.push("percent");
+  if (rowOn("emDash") || rowOn("enDashRanges")) parts.push("dashes");
+  if (rowOn("ellipsis")) parts.push("ellipses");
+  if (rowOn("smartQuotes")) parts.push("quotes");
+  if (rowOn("brandCaps")) parts.push("brand names");
+  return parts.length ? joinList(parts) : "nothing yet";
+});
+const summaryLeaves = $derived.by(() => {
+  const parts = [];
+  if (!rowOn("oxfordComma")) parts.push("commas");
+  if (!rowOn("emDash") && !rowOn("enDashRanges")) parts.push("dashes");
+  if (!rowOn("numberStyle")) parts.push("number style");
+  if (!rowOn("measurements")) parts.push("units");
+  if (!rowOn("percent")) parts.push("percent");
+  if (!rowOn("smartQuotes")) parts.push("quotes");
+  if (!rowOn("brandCaps")) parts.push("brand names");
+  return parts.length ? joinList(parts) : "nothing";
+});
+function joinList(parts) {
+  if (parts.length === 1) return parts[0];
+  if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;
+  return `${parts.slice(0, -1).join(", ")}, and ${parts[parts.length - 1]}`;
+}
+function styleAllOn() {
+  for (const row of styleRows) if (!rowOn(row.key)) conv[row.key] = defaultVariant(row);
+  for (const row of advancedRows) conv[row.key] = true;
+}
+function styleAllOff() {
+  for (const row of styleRows) conv[row.key] = row.variants ? void 0 : false;
+  for (const row of advancedRows) conv[row.key] = false;
+}
+function fixesAllOff() {
+  conv.fixes = false;
+}
+function fixesAllOn() {
+  conv.fixes = true;
+}
+function resetSafeDefault() {
+  conv = { fixes: true, enDashRanges: false, smartQuotes: false, brandCaps: false };
+}
+let radioEls = $state(
+  Object.fromEntries(styleRows.filter((r) => r.variants).map((r) => [String(r.key), []]))
+);
+function onRadioKeydown(e, row, i) {
+  if (!row.variants) return;
+  const n = row.variants.length;
+  let next = i;
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (i + 1) % n;
+  else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (i - 1 + n) % n;
+  else if (e.key === "Home") next = 0;
+  else if (e.key === "End") next = n - 1;
+  else return;
+  e.preventDefault();
+  pickVariant(row.key, row.variants[next].value);
+  radioEls[String(row.key)]?.[next]?.focus();
+}
+const conventionsJson = $derived(JSON.stringify(conv));
+function onoffClass(on) {
+  return `inline-flex h-[30px] items-center gap-1.5 rounded-lg border px-2.5 text-xs font-semibold ${on ? "border-primary/30 bg-primary/10 text-primary" : "border-[var(--cairn-card-border)] bg-base-100 text-[var(--color-muted)] hover:border-primary/35 hover:text-base-content"}`;
+}
+function segClass(on) {
+  return `inline-flex items-center gap-1.5 px-3 py-1.5 text-xs ${on ? "bg-primary/10 text-primary font-medium" : "text-[var(--color-muted)]"}`;
+}
 </script>
 
 <div class="mx-auto max-w-3xl px-2 py-2">