@glw907/cairn-cms 0.60.0 → 0.60.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.60.1
+
+A packaging fix so the library bundles cleanly in a Vite 8 consumer. It supersedes `0.60.0`, whose
+consumer build failed on Vite 8 / Rolldown. `svelte-package` ships `.svelte` with `<script lang="ts">`
+and the TypeScript intact, and Rolldown parses that `<script>` as JavaScript before the Svelte plugin
+compiles the file, failing on a TypeScript optional parameter (`registry?: T` loses its type but keeps
+the `?`). The shipped `.svelte` now carry a plain-JavaScript `<script>` body. The `lang="ts"` tag
+stays, because the component markup still uses TypeScript that the Svelte compiler reads (typed
+`{#snippet}` parameters and `{@const x = y as T}` casts).
+
+No consumer action is required. The change is to the published `dist` only; the public API and the
+types are unchanged.
+
 ## 0.60.0
 
 <!-- release-size: minor -->

package/dist/components/AdminLayout.svelte

@@ -6,239 +6,140 @@ root sets `data-theme` to the resolved light or dark theme (seeded from the SSR'
 flipped by the topbar toggle) and imports the self-contained Warm Stone theme, so the admin looks
 identical on every host regardless of the site's own theme.
 -->
-<script lang="ts">
-  import { onMount, setContext, untrack, type Component, type Snippet } from 'svelte';
-  import type { LayoutData } from '../sveltekit/content-routes.js';
-  import CsrfField from './CsrfField.svelte';
-  import { CSRF_CONTEXT_KEY } from './csrf-context.js';
-  import { provideTopbar, type TopbarHolder } from './topbar-context.js';
-  import { MenuIcon, LogOutIcon, SunIcon, MoonIcon, ChevronRightIcon, SearchIcon } from './admin-icons.js';
-  import CairnLogo from './CairnLogo.svelte';
-  import { cairnFaviconHref } from './cairn-favicon.js';
-  import { warnIfChromeWrapped } from './chrome-guard.js';
-  import FileTextIcon from '@lucide/svelte/icons/file-text';
-  import SignpostIcon from '@lucide/svelte/icons/signpost';
-  import SettingsIcon from '@lucide/svelte/icons/settings';
-  import UsersIcon from '@lucide/svelte/icons/users';
-  import ImageIcon from '@lucide/svelte/icons/image';
-  import BlocksIcon from '@lucide/svelte/icons/blocks';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-  import './cairn-admin.css';
-
-  interface Props {
-    /** The layout load's data: site name, user, nav concepts, active path, owner capability. */
-    data: LayoutData;
-    /** The page body. */
-    children: Snippet;
-  }
-
-  let { data, children }: Props = $props();
-
-  // Hand descendant forms a live getter for the CSRF token layoutLoad issued, so the field stays
-  // correct even if the token ever rotates mid-session.
-  setContext(CSRF_CONTEXT_KEY, () => data.csrf);
-
-  // Persist an admin preference for a year, path-scoped to /admin so the cookie never reaches the
-  // host's own pages.
-  function writeAdminCookie(name: string, value: string) {
-    document.cookie = `${name}=${value}; path=/admin; max-age=31536000; samesite=lax`;
-  }
-
-  // A nav entry. `href` makes it a link; without one it is an inert stub (a developer-tool slot the
-  // extension mechanism has not wired yet).
-  interface NavItem {
-    label: string;
-    icon: Component;
-    href?: string;
-  }
-
-  // The core Cairn functions, all in one group: the content concepts, the nav-menu editor (when the
-  // site configures one; a signpost, kept distinct from the Settings gear), the site Settings, and
-  // the owner-only Editors.
-  const coreItems: NavItem[] = $derived([
-    ...data.concepts.map((c) => ({ label: c.label, icon: FileTextIcon, href: `/admin/${c.id}` })),
-    // Media is a content peer, immediately after the concepts.
-    { label: 'Media', icon: ImageIcon, href: '/admin/media' },
-    ...(data.navLabel ? [{ label: data.navLabel, icon: SignpostIcon, href: '/admin/nav' }] : []),
-    { label: 'Settings', icon: SettingsIcon, href: '/admin/settings' },
-    ...(data.canManageEditors ? [{ label: 'Editors', icon: UsersIcon, href: '/admin/editors' }] : []),
-  ]);
-
-  // The developer-extension groups: each custom-named, with its own items, collapsible like the core
-  // group. The CairnExtension seam will supply these; until it lands they are inert example stubs that
-  // show the shape, multiple named groups kept visually apart from the core functions.
-  const extensionGroups: { name: string; items: NavItem[] }[] = [
-    { name: 'Marketing', items: [
-      { label: 'Campaigns', icon: BlocksIcon },
-      { label: 'Audiences', icon: BlocksIcon },
-    ] },
-    { name: 'Shop', items: [
-      { label: 'Products', icon: BlocksIcon },
-      { label: 'Orders', icon: BlocksIcon },
-    ] },
-  ];
-
-  // Up to two uppercase initials from the display name, falling back to '?' for an empty name.
-  function initialsOf(displayName: string): string {
-    const letters = displayName
-      .split(/\s+/)
-      .filter(Boolean)
-      .slice(0, 2)
-      .map((word) => word[0]?.toUpperCase() ?? '')
-      .join('');
-    return letters || '?';
-  }
-
-  const initials = $derived(initialsOf(data.user.displayName));
-
-  function isActive(href: string): boolean {
-    return data.pathname === href || data.pathname.startsWith(`${href}/`);
-  }
-
-  // Which nav groups are collapsed. Seeded once from the SSR'd cookie (so a collapsed group renders
-  // collapsed with no flash), then owned by the toggle below, which mirrors each change to the cookie.
-  let collapsed = $state(new Set(untrack(() => data.collapsedNav)));
-
-  function onToggleSection(label: string, open: boolean) {
-    const next = new Set(collapsed);
-    if (open) next.delete(label);
-    else next.add(label);
-    collapsed = next;
-    const value = [...next].map((entry) => encodeURIComponent(entry)).join(',');
-    writeAdminCookie('cairn-admin-nav-collapsed', value);
-  }
-
-  let drawerOpen = $state(false);
-
-  function onKeydown(e: KeyboardEvent) {
-    if (e.key.toLowerCase() === 'b' && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      drawerOpen = !drawerOpen;
-    }
-    if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      openPalette();
-    }
+<script lang="ts">import { onMount, setContext, untrack } from "svelte";
+import CsrfField from "./CsrfField.svelte";
+import { CSRF_CONTEXT_KEY } from "./csrf-context.js";
+import { provideTopbar } from "./topbar-context.js";
+import { MenuIcon, LogOutIcon, SunIcon, MoonIcon, ChevronRightIcon, SearchIcon } from "./admin-icons.js";
+import CairnLogo from "./CairnLogo.svelte";
+import { cairnFaviconHref } from "./cairn-favicon.js";
+import { warnIfChromeWrapped } from "./chrome-guard.js";
+import FileTextIcon from "@lucide/svelte/icons/file-text";
+import SignpostIcon from "@lucide/svelte/icons/signpost";
+import SettingsIcon from "@lucide/svelte/icons/settings";
+import UsersIcon from "@lucide/svelte/icons/users";
+import ImageIcon from "@lucide/svelte/icons/image";
+import BlocksIcon from "@lucide/svelte/icons/blocks";
+import ExternalLinkIcon from "@lucide/svelte/icons/external-link";
+import "./cairn-admin.css";
+let { data, children } = $props();
+setContext(CSRF_CONTEXT_KEY, () => data.csrf);
+function writeAdminCookie(name, value) {
+  document.cookie = `${name}=${value}; path=/admin; max-age=31536000; samesite=lax`;
+}
+const coreItems = $derived([
+  ...data.concepts.map((c) => ({ label: c.label, icon: FileTextIcon, href: `/admin/${c.id}` })),
+  // Media is a content peer, immediately after the concepts.
+  { label: "Media", icon: ImageIcon, href: "/admin/media" },
+  ...data.navLabel ? [{ label: data.navLabel, icon: SignpostIcon, href: "/admin/nav" }] : [],
+  { label: "Settings", icon: SettingsIcon, href: "/admin/settings" },
+  ...data.canManageEditors ? [{ label: "Editors", icon: UsersIcon, href: "/admin/editors" }] : []
+]);
+const extensionGroups = [
+  { name: "Marketing", items: [
+    { label: "Campaigns", icon: BlocksIcon },
+    { label: "Audiences", icon: BlocksIcon }
+  ] },
+  { name: "Shop", items: [
+    { label: "Products", icon: BlocksIcon },
+    { label: "Orders", icon: BlocksIcon }
+  ] }
+];
+function initialsOf(displayName) {
+  const letters = displayName.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+  return letters || "?";
+}
+const initials = $derived(initialsOf(data.user.displayName));
+function isActive(href) {
+  return data.pathname === href || data.pathname.startsWith(`${href}/`);
+}
+let collapsed = $state(new Set(untrack(() => data.collapsedNav)));
+function onToggleSection(label, open) {
+  const next = new Set(collapsed);
+  if (open) next.delete(label);
+  else next.add(label);
+  collapsed = next;
+  const value = [...next].map((entry) => encodeURIComponent(entry)).join(",");
+  writeAdminCookie("cairn-admin-nav-collapsed", value);
+}
+let drawerOpen = $state(false);
+function onKeydown(e) {
+  if (e.key.toLowerCase() === "b" && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    drawerOpen = !drawerOpen;
   }
-
-  // Close the mobile drawer and the command palette whenever the active path changes (a nav click
-  // navigated). Closing the palette here, after the navigation lands, avoids racing a synchronous
-  // close() against a result link's own navigation, which would cancel it.
-  $effect(() => {
-    data.pathname;
-    drawerOpen = false;
-    paletteDialog?.close();
-    publishAllDialog?.close();
-  });
-
-  // Seed from the SSR'd theme once. The live theme is owned by this state and the toggle, so the
-  // initial read of data.theme is intentional and untracked to keep it out of any reactive graph.
-  let theme = $state<'cairn-admin' | 'cairn-admin-dark'>(untrack(() => data.theme));
-
-  // First mount with no persisted choice follows the OS preference. A returning user's cookie was
-  // already honored by the layout load (data.theme), so this only fires on a first-ever visit.
-  $effect(() => {
-    const hasCookie = document.cookie.split('; ').some((c) => c.startsWith('cairn-admin-theme='));
-    if (!hasCookie && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
-      theme = 'cairn-admin-dark';
-    }
-  });
-
-  function toggleTheme() {
-    theme = theme === 'cairn-admin' ? 'cairn-admin-dark' : 'cairn-admin';
-    writeAdminCookie('cairn-admin-theme', theme);
+  if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    openPalette();
   }
-
-  // The command palette: a quick jump-to over the admin's destinations plus a couple of actions, so
-  // the topbar carries something productive. Opened by the topbar trigger or Cmd/Ctrl+K.
-  interface Command {
-    label: string;
-    icon: Component;
-    href?: string;
-    external?: boolean;
-    action?: () => void;
+}
+$effect(() => {
+  data.pathname;
+  drawerOpen = false;
+  paletteDialog?.close();
+  publishAllDialog?.close();
+});
+let theme = $state(untrack(() => data.theme));
+$effect(() => {
+  const hasCookie = document.cookie.split("; ").some((c) => c.startsWith("cairn-admin-theme="));
+  if (!hasCookie && window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+    theme = "cairn-admin-dark";
   }
-
-  let paletteDialog = $state<HTMLDialogElement>();
-  let paletteList = $state<HTMLUListElement>();
-  let paletteQuery = $state('');
-
-  // The site-wide publish action. The trigger and its confirm render only while entries are
-  // pending; a null pendingEntries (GitHub unreachable) hides them rather than showing a stale count.
-  let publishAllDialog = $state<HTMLDialogElement>();
-  const pendingCount = $derived(data.pendingEntries?.length ?? 0);
-  // The pending ids grouped under their concept's nav label, in first-seen order. A ref whose
-  // concept is not in the nav (an unconfigured key) falls back to the raw key.
-  const pendingGroups = $derived.by(() => {
-    const groups = new Map<string, string[]>();
-    for (const entry of data.pendingEntries ?? []) {
-      const label = data.concepts.find((c) => c.id === entry.concept)?.label ?? entry.concept;
-      groups.set(label, [...(groups.get(label) ?? []), entry.id]);
-    }
-    return [...groups.entries()].map(([label, ids]) => ({ label, ids }));
-  });
-
-  // The bare data-theme wrapper is the admin root the dev chrome-guard measures from.
-  let rootEl = $state<HTMLElement>();
-  onMount(() => {
-    if (rootEl) warnIfChromeWrapped(rootEl);
-  });
-
-  const paletteCommands = $derived<Command[]>([
-    ...coreItems.map((item) => ({ label: item.label, icon: item.icon, href: item.href })),
-    { label: 'View the live site', icon: ExternalLinkIcon, href: '/', external: true },
-    theme === 'cairn-admin'
-      ? { label: 'Switch to dark mode', icon: MoonIcon, action: toggleTheme }
-      : { label: 'Switch to light mode', icon: SunIcon, action: toggleTheme },
-  ]);
-  const paletteResults = $derived(
-    paletteCommands.filter((c) => c.label.toLowerCase().includes(paletteQuery.trim().toLowerCase())),
-  );
-
-  function openPalette() {
-    if (paletteDialog?.open) return; // showModal throws on an already-open dialog
-    paletteQuery = '';
-    paletteDialog?.showModal();
-  }
-  // An action command (theme toggle). Link commands are real <a> elements that navigate on click, so
-  // the Enter shortcut clicks the first result element and both paths share the one navigation.
-  function runCommand(cmd: Command) {
-    paletteDialog?.close();
-    cmd.action?.();
-  }
-  function submitPalette() {
-    (paletteList?.querySelector('a, button') as HTMLElement | null)?.click();
-  }
-
-  interface Crumb {
-    label: string;
-    href?: string;
+});
+function toggleTheme() {
+  theme = theme === "cairn-admin" ? "cairn-admin-dark" : "cairn-admin";
+  writeAdminCookie("cairn-admin-theme", theme);
+}
+let paletteDialog = $state();
+let paletteList = $state();
+let paletteQuery = $state("");
+let publishAllDialog = $state();
+const pendingCount = $derived(data.pendingEntries?.length ?? 0);
+const pendingGroups = $derived.by(() => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of data.pendingEntries ?? []) {
+    const label = data.concepts.find((c) => c.id === entry.concept)?.label ?? entry.concept;
+    groups.set(label, [...groups.get(label) ?? [], entry.id]);
   }
-
-  // Path-derived breadcrumbs: the concept label (from the nav) then the entry id segment. Only the
-  // /admin/<concept>/<id> depth shows a trail; a bare concept list shows just the concept.
-  const crumbs = $derived.by<Crumb[]>(() => {
-    const segs = data.pathname.split('/').filter(Boolean); // ['admin', concept, id?]
-    if (segs.length < 2 || segs[0] !== 'admin') return [];
-    const conceptId = segs[1];
-    const concept = data.concepts.find((c) => c.id === conceptId);
-    const out: Crumb[] = [{ label: concept?.label ?? conceptId, href: `/admin/${conceptId}` }];
-    if (segs[2]) out.push({ label: decodeURIComponent(segs[2]) });
-    return out;
-  });
-
-  // The browser-tab title: the deepest breadcrumb (the active concept or entry), then the brand.
-  const pageTitle = $derived(crumbs.length ? crumbs[crumbs.length - 1].label : 'Admin');
-
-  // A desk route is an open document (/admin/<concept>/<id>): the third path segment is the entry.
-  // The band has one job there, so the topbar drops the palette trigger and the site-wide Publish
-  // button and renders the document's own desk controls instead.
-  const isDeskRoute = $derived(data.pathname.split('/').filter(Boolean).length > 2);
-
-  // The topbar context portal: a reactive holder a descendant document fills with its desk snippet.
-  // EditPage registers on mount and nulls it on teardown; the office routes leave it null.
-  let topbar = $state<TopbarHolder>({ desk: null, zen: false });
-  provideTopbar(topbar);
+  return [...groups.entries()].map(([label, ids]) => ({ label, ids }));
+});
+let rootEl = $state();
+onMount(() => {
+  if (rootEl) warnIfChromeWrapped(rootEl);
+});
+const paletteCommands = $derived([
+  ...coreItems.map((item) => ({ label: item.label, icon: item.icon, href: item.href })),
+  { label: "View the live site", icon: ExternalLinkIcon, href: "/", external: true },
+  theme === "cairn-admin" ? { label: "Switch to dark mode", icon: MoonIcon, action: toggleTheme } : { label: "Switch to light mode", icon: SunIcon, action: toggleTheme }
+]);
+const paletteResults = $derived(
+  paletteCommands.filter((c) => c.label.toLowerCase().includes(paletteQuery.trim().toLowerCase()))
+);
+function openPalette() {
+  if (paletteDialog?.open) return;
+  paletteQuery = "";
+  paletteDialog?.showModal();
+}
+function runCommand(cmd) {
+  paletteDialog?.close();
+  cmd.action?.();
+}
+function submitPalette() {
+  paletteList?.querySelector("a, button")?.click();
+}
+const crumbs = $derived.by(() => {
+  const segs = data.pathname.split("/").filter(Boolean);
+  if (segs.length < 2 || segs[0] !== "admin") return [];
+  const conceptId = segs[1];
+  const concept = data.concepts.find((c) => c.id === conceptId);
+  const out = [{ label: concept?.label ?? conceptId, href: `/admin/${conceptId}` }];
+  if (segs[2]) out.push({ label: decodeURIComponent(segs[2]) });
+  return out;
+});
+const pageTitle = $derived(crumbs.length ? crumbs[crumbs.length - 1].label : "Admin");
+const isDeskRoute = $derived(data.pathname.split("/").filter(Boolean).length > 2);
+let topbar = $state({ desk: null, zen: false });
+provideTopbar(topbar);
 </script>
 
 <svelte:head>

package/dist/components/CairnAdmin.svelte

@@ -5,48 +5,16 @@ component for every admin view, feeding it the discriminated `AdminData` from `c
 load. It is a pure switcher on `data.view`: the public auth pages mount bare, and the authed views
 mount inside `AdminLayout`. No styling or wrapper elements of its own.
 -->
-<script lang="ts">
-  import AdminLayout from './AdminLayout.svelte';
-  import LoginPage from './LoginPage.svelte';
-  import ConfirmPage from './ConfirmPage.svelte';
-  import ConceptList from './ConceptList.svelte';
-  import EditPage from './EditPage.svelte';
-  import ManageEditors from './ManageEditors.svelte';
-  import NavTree from './NavTree.svelte';
-  import CairnMediaLibrary from './CairnMediaLibrary.svelte';
-  import CairnTidySettings from './CairnTidySettings.svelte';
-  import type { AdminData } from '../sveltekit/cairn-admin.js';
-  import type { ContentFormFailure } from '../sveltekit/content-routes.js';
-  import type { ComponentRegistry } from '../render/registry.js';
-  import type { IconSet } from '../render/glyph.js';
-  import type { LinkResolve } from '../content/links.js';
-  import type { MediaResolve } from '../render/resolve-media.js';
-
-  interface Props {
-    /** The discriminated view data from `createCairnAdmin`'s load. */
-    data: AdminData;
-    /** The last action's result, forwarded to whichever view rendered: the shared content-action
-     *  failure family (every failure carries `error`), merged with the auth and editors results,
-     *  so the route's one `form` export covers every view. */
-    form?:
-      | (ContentFormFailure & {
-          sent?: boolean;
-          status?: 'sent' | 'send_error' | 'throttled';
-          ok?: boolean;
-        })
-      | null;
-    /** The site's design-accurate render pipeline, for the edit view's preview pane. */
-    render?: (
-      md: string,
-      opts?: { stagger?: boolean; resolve?: LinkResolve; resolveMedia?: MediaResolve },
-    ) => string | Promise<string>;
-    /** The site's component registry, for the edit view's insert palette. */
-    registry?: ComponentRegistry;
-    /** The site's icon set, for the edit view's guided form fields. */
-    icons?: IconSet;
-  }
-
-  let { data, form = null, render, registry, icons }: Props = $props();
+<script lang="ts">import AdminLayout from "./AdminLayout.svelte";
+import LoginPage from "./LoginPage.svelte";
+import ConfirmPage from "./ConfirmPage.svelte";
+import ConceptList from "./ConceptList.svelte";
+import EditPage from "./EditPage.svelte";
+import ManageEditors from "./ManageEditors.svelte";
+import NavTree from "./NavTree.svelte";
+import CairnMediaLibrary from "./CairnMediaLibrary.svelte";
+import CairnTidySettings from "./CairnTidySettings.svelte";
+let { data, form = null, render, registry, icons } = $props();
 </script>
 
 {#if data.view === 'login'}

package/dist/components/CairnLogo.svelte

@@ -7,12 +7,7 @@ accessible name.
 Artwork: the "cairn" icon from the Temaki icon set (https://github.com/ideditor/temaki), released into
 the public domain under CC0 1.0 (no attribution required). Recorded here as provenance.
 -->
-<script lang="ts">
-  interface Props {
-    /** Utility classes for sizing and color, e.g. `h-7 w-7 text-primary`. */
-    class?: string;
-  }
-  let { class: className = '' }: Props = $props();
+<script lang="ts">let { class: className = "" } = $props();
 </script>
 
 <svg