@drawnagency/primitives 0.1.113 → 0.1.115

package/src/lib/registry.ts

@@ -2,7 +2,9 @@ import type { ZodType, z } from "zod";
 import type { ComponentType, ReactNode } from "react";
 import type { Audience } from "../schemas/auth";
 import type { LinkValue } from "../schemas/link";
+import type { ImageBackground } from "../schemas/shared";
 import type { SectionContent } from "../schemas/sections";
+import type { TagEntry } from "../schemas/tags";
 import type { VideoSource } from "../components/sections/Video/VideoBlock";
 
 // --- Settings field types ---
@@ -71,6 +73,16 @@ export type SettingsFieldDef =
       label: string;
       default: { documentId: string };
       target?: "content" | "options";
+    }
+  | {
+      /** Per-placement backdrop behind an image (ImageBackgroundField). Leave
+       *  `default` unset: an absent value is "None" and must stay absent on save. */
+      type: "image-background";
+      label: string;
+      default?: ImageBackground;
+      target?: "content" | "options";
+      /** Hide the field for the current values (e.g. when the ref is a video). */
+      hidden?: (values: Record<string, unknown>) => boolean;
     };
 
 export type SettingsSchema = Record<string, SettingsFieldDef>;
@@ -105,6 +117,20 @@ export interface SectionProps<T = unknown> {
   onDelete?: () => void;
 }
 
+/** The site's tag registry and its edits, as the editor shell hands them to
+ *  the canvas and Site settings. */
+export interface SiteTagging {
+  /** Already reconciled (siteTags). */
+  tags: TagEntry[];
+  /** False when the registry was never loaded or loaded degraded: a save would
+   *  wholesale-replace tags.json with what this session couldn't fully read. */
+  editable: boolean;
+  onCreate: (label: string, sectionId?: string) => void;
+  onRename: (tagId: string, label: string) => void;
+  onDelete: (tagId: string) => void;
+  onToggle: (sectionId: string, tagId: string, tagged: boolean) => void;
+}
+
 export interface WrapperProps {
   sectionId: string;
   sectionType: string;
@@ -112,6 +138,8 @@ export interface WrapperProps {
   dirty?: boolean;
   index: number;
   isLast: boolean;
+  /** Total sections on the page — Move up/down's "N of M" and end-disabling. */
+  sectionCount?: number;
   containerId: string;
   isContainerBlock: boolean;
   definition: SectionDefinition;
@@ -119,6 +147,15 @@ export interface WrapperProps {
   audiences: Audience[];
   access: string[];
   onAccessChange?: (access: string[]) => void;
+  /** Section tags (the tags.json sidecar). Only root sections get a
+   *  SectionWrapper — container children are not index sections and cannot be
+   *  tagged. Absent handlers make the Tags pill read-only. */
+  tagging: {
+    tags: TagEntry[];
+    assignedIds: string[];
+    onToggle?: (tagId: string, tagged: boolean) => void;
+    onCreate?: (label: string) => void;
+  };
   onStatusChange?: (status: "draft" | "live" | "archived") => void;
   onSectionChange?: (options: Record<string, unknown>) => void;
   onReorder?: (fromIndex: number, toIndex: number) => void;

package/src/lib/sidecar-diagnostics.ts

@@ -0,0 +1,29 @@
+/**
+ * What a Sidecar reconcile changed. Reconcile repairs silently on every read, so
+ * these are only ever warnings: a validator reports them, nothing rejects on them.
+ *  - dangling: ids of pages/sections the index does not have, dropped
+ *  - duplicate-id: a group/tag id used again, later uses dropped
+ *  - duplicate-member: a page placed twice / a section tagged twice, later placements dropped
+ *  - unlisted: pages missing from the nav, appended to its end (nav only)
+ *
+ * Its own leaf so nav-tree and tags can report without importing the Sidecar
+ * module that imports them.
+ */
+export type SidecarDiagnostic = {
+  code: "dangling" | "duplicate-id" | "duplicate-member" | "unlisted";
+  ids: string[];
+};
+
+export function diagnosticsCollector() {
+  const byCode = new Map<SidecarDiagnostic["code"], Set<string>>();
+  return {
+    add(code: SidecarDiagnostic["code"], id: string) {
+      const ids = byCode.get(code) ?? new Set<string>();
+      ids.add(id);
+      byCode.set(code, ids);
+    },
+    list(): SidecarDiagnostic[] {
+      return [...byCode].map(([code, ids]) => ({ code, ids: [...ids] }));
+    },
+  };
+}

package/src/lib/sidecars.ts

@@ -0,0 +1,221 @@
+import type { ZodType } from "zod";
+import { NavEntrySchema, NavFileSchema, type NavEntry } from "../schemas/nav";
+import { TagEntrySchema, TagsFileSchema, type TagEntry } from "../schemas/tags";
+import type { SiteIndex } from "../schemas/site-config";
+import { reconcileNavReport } from "./nav-tree";
+import { mergeTags, reconcileTagsReport } from "./tags";
+import type { SidecarDiagnostic } from "./sidecar-diagnostics";
+
+export type { SidecarDiagnostic };
+
+/**
+ * One definition per Sidecar — a content file kept beside index.json rather than
+ * on it, so a writer that predates it cannot drop it (CONTEXT.md). Every rule a
+ * caller would otherwise re-implement per file lives behind these: lenient
+ * parse, lifting the wire key off an index before IndexSchema strips it, and the
+ * two places the Sidecars genuinely differ — how a list is repaired against the
+ * index, and how concurrent edits rebase. Pure and browser-safe: the editor uses
+ * it during hydration, and callers do their own I/O.
+ */
+export interface SidecarDefinition<E> {
+  /** Also the key the Sidecar travels under on the wire (`index.nav`, `index.tags`). */
+  name: "nav" | "tags";
+  path: string;
+  /** The key holding the entry list inside the file. */
+  fileKey: "entries" | "tags";
+  entrySchema: ZodType<E>;
+  fileSchema: ZodType<unknown>;
+  /** Total, pure and idempotent; also reports what it repaired. */
+  reconcile(entries: E[], index: SiteIndex): { entries: E[]; diagnostics: SidecarDiagnostic[] };
+  /** The list after a collab rebase; `undefined` when no side carries one. */
+  rebase(args: { base: E[] | undefined; local: E[] | undefined; remote: E[] | undefined }): E[] | undefined;
+  /** Words for a declined write's warning. */
+  words: {
+    /** What the file holds: "navigation entries". */
+    entries: string;
+    /** What did not land: "Page grouping changes". */
+    changes: string;
+    /** What a valid payload is: "a valid navigation tree". */
+    valid: string;
+    /** The expected wire shape, for an agent that sent the wrong one. */
+    shape: string;
+  };
+}
+
+export const NAV: SidecarDefinition<NavEntry> = {
+  name: "nav",
+  path: "src/content/nav.json",
+  fileKey: "entries",
+  entrySchema: NavEntrySchema,
+  fileSchema: NavFileSchema,
+  reconcile: (entries, index) => reconcileNavReport(entries, index.pages),
+  // Grouping is edited rarely and has no dirty tracking, so persisted remote
+  // state beats unsaved local edits. A remote without the Sidecar (an older
+  // server) keeps ours rather than flattening it.
+  rebase: ({ local, remote }) => (remote !== undefined ? remote : local),
+  words: {
+    entries: "navigation entries",
+    changes: "Page grouping changes",
+    valid: "a valid navigation tree",
+    shape: 'an array of {kind:"page",pageId} / {kind:"group",id,label,startCollapsed,pageIds} entries',
+  },
+};
+
+export const TAGS: SidecarDefinition<TagEntry> = {
+  name: "tags",
+  path: "src/content/tags.json",
+  fileKey: "tags",
+  entrySchema: TagEntrySchema,
+  fileSchema: TagsFileSchema,
+  reconcile: (entries, index) => reconcileTagsReport(entries, index.sections),
+  // Tagging is edited from every section's chrome, so remote-wins would drop
+  // unsaved tagging whenever a peer saved anything. See mergeTags.
+  rebase: mergeTags,
+  words: {
+    entries: "tag entries",
+    changes: "Tag changes",
+    valid: "a valid tag list",
+    shape: "an array of {id,label,sectionIds} entries",
+  },
+};
+
+// Widened once here: the definitions are invariant in their entry type, so a
+// loop over both needs the common type.
+export const SIDECARS: readonly SidecarDefinition<unknown>[] = [NAV, TAGS] as readonly SidecarDefinition<unknown>[];
+
+/**
+ * A Sidecar as read. `degraded` means the file was present but held something
+ * this package version could not represent, so `entries` is missing it: the read
+ * is a Degraded read, never to be cached, posted back, or written over the file.
+ */
+export type SidecarRead<E> = { entries: E[]; degraded: boolean };
+
+/**
+ * Tolerance is per entry: one unknown entry kind (a newer package's addition, an
+ * authoring typo) drops that entry alone, not every group or tag on the site.
+ */
+function readEntries<E>(def: SidecarDefinition<E>, raw: unknown): SidecarRead<E> {
+  if (!Array.isArray(raw)) {
+    console.warn(`[sidecars] ${def.name}: entry list is not a list; reading it as empty and degraded`);
+    return { entries: [], degraded: true };
+  }
+  const entries: E[] = [];
+  let dropped = 0;
+  for (const item of raw) {
+    const parsed = def.entrySchema.safeParse(item);
+    if (parsed.success) entries.push(parsed.data);
+    else dropped++;
+  }
+  if (dropped > 0) {
+    console.warn(`[sidecars] ${def.name}: dropped ${dropped} entr${dropped === 1 ? "y" : "ies"} this package version cannot represent; the read is degraded`);
+  }
+  return { entries, degraded: dropped > 0 };
+}
+
+/** Read a parsed Sidecar file. Absent (null/undefined) is an empty list, not degraded. */
+export function readSidecar<E>(def: SidecarDefinition<E>, file: unknown): SidecarRead<E> {
+  if (file === undefined || file === null) return { entries: [], degraded: false };
+  return readEntries(def, (file as Record<string, unknown>)[def.fileKey]);
+}
+
+/**
+ * Read a Sidecar file's raw text. Present-but-unparseable JSON is degraded, not
+ * absent: a site whose nav.json is corrupt still has groups, and treating it as
+ * "never had any" would let a writer replace them.
+ */
+export function readSidecarText<E>(def: SidecarDefinition<E>, text: string | undefined): SidecarRead<E> {
+  if (text === undefined) return { entries: [], degraded: false };
+  let file: unknown;
+  try {
+    file = JSON.parse(text);
+  } catch {
+    console.warn(`[sidecars] ${def.name}: ${def.path} is not valid JSON; the read is degraded`);
+    return { entries: [], degraded: true };
+  }
+  return readSidecar(def, file);
+}
+
+/**
+ * Lift the Sidecars off an index as it arrives on the wire, BEFORE anything
+ * parses it with IndexSchema — the parse strips unknown keys, and an index
+ * round-tripped through it has lost its Sidecars. A key the index does not carry
+ * is `undefined` (omitted: writers leave the file alone); a carried key is read
+ * with the file's per-entry leniency, into fresh objects that never alias the
+ * caller's.
+ */
+export function liftSidecars(rawIndex: unknown): { nav?: SidecarRead<NavEntry>; tags?: SidecarRead<TagEntry> } {
+  const raw = rawIndex !== null && typeof rawIndex === "object" ? (rawIndex as Record<string, unknown>) : {};
+  return {
+    ...(raw.nav !== undefined ? { nav: readEntries(NAV, raw.nav) } : {}),
+    ...(raw.tags !== undefined ? { tags: readEntries(TAGS, raw.tags) } : {}),
+  };
+}
+
+/** The Sidecar file on the branch a write lands on, as the writer read it. */
+export type SidecarFileState =
+  | { kind: "absent" }
+  | { kind: "present"; text: string }
+  /** The read itself failed, so nothing is known about the file. */
+  | { kind: "unreadable" };
+
+export type SidecarWritePlan =
+  | { action: "untouched" }
+  | { action: "write"; path: string; content: string }
+  /** Declined. The rest of the write still lands, so the warning is what tells the caller. */
+  | { action: "skip"; warning: string };
+
+/**
+ * What a write does to one Sidecar file, given what was posted (from
+ * liftSidecars) and the file on the branch. Every Sidecar write REPLACES the
+ * file, and the posted list was built from what this package version could
+ * READ — so a file holding anything this version cannot fully parse (an entry
+ * from a newer package, or a corrupt file) is read-only: replacing it would
+ * destroy those entries with a clean write. The same holds for a posted
+ * Degraded read.
+ *
+ * Emptiness is judged on the POSTED list, before reconcile: an empty list never
+ * creates a file (every editor save carries the Sidecars, and nav's reconcile
+ * would turn [] into the page list), while an empty list over an existing file
+ * replaces it wholesale. A written list is reconciled against the index being
+ * written, so it never names a page or section that write removed.
+ */
+export function planSidecarWrite<E>(
+  def: SidecarDefinition<E>,
+  posted: SidecarRead<E> | undefined,
+  branch: SidecarFileState,
+  index: SiteIndex,
+): SidecarWritePlan {
+  if (posted === undefined) return { action: "untouched" };
+  const skip = (reason: string): SidecarWritePlan => ({
+    action: "skip",
+    warning: `${def.path} was left unchanged: ${reason} ${def.words.changes} from this save did not land. Upgrade the site's @drawnagency packages (or repair ${def.path} directly in the repo), then retry.`,
+  });
+
+  if (posted.degraded) {
+    // Leaving the file alone is the right action; saying nothing is not — an
+    // agent that posted a malformed list would otherwise believe it landed.
+    return {
+      action: "skip",
+      warning: `${def.name} was not ${def.words.valid}, so ${def.path} was left unchanged (it held entries this package version cannot read). Expected ${def.words.shape}.`,
+    };
+  }
+  if (branch.kind === "unreadable") {
+    return skip("the current file could not be read to confirm the replacement loses nothing.");
+  }
+  if (branch.kind === "present") {
+    let existing: unknown;
+    try {
+      existing = JSON.parse(branch.text);
+    } catch {
+      return skip("the current file is not valid JSON, so this version cannot prove a replacement keeps its entries.");
+    }
+    if (!def.fileSchema.safeParse(existing).success) {
+      return skip(`the current file holds ${def.words.entries} this package version cannot represent (likely written by a newer version).`);
+    }
+  } else if (posted.entries.length === 0) {
+    return { action: "untouched" };
+  }
+
+  const { entries } = def.reconcile(posted.entries, index);
+  return { action: "write", path: def.path, content: JSON.stringify({ [def.fileKey]: entries }, null, 2) };
+}

package/src/lib/slug.ts

@@ -0,0 +1,6 @@
+// The one slugifier for page slugs and media names. Its own leaf, with no
+// imports, so the media worker can use it without bundling the schemas
+// lib/pages pulls in.
+export function slugifyPageSlug(input: string): string {
+  return input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}

package/src/lib/storage-tier.ts

@@ -0,0 +1,38 @@
+import { DOCUMENT_GIT_MAX_BYTES, DOCUMENT_BUCKET_MAX_BYTES } from "../schemas/documents";
+import { MEDIA_GIT_MAX_BYTES, MEDIA_BUCKET_MAX_BYTES, type MediaConfig } from "../schemas/media";
+
+// Where a file's bytes live, decided by its size: committed to the site repo
+// (git), stored in the optional bucket, or refused. Every upload path and the
+// write path's backstop decide this the same way, and every message quotes the
+// limits through formatBytes, so a limit changes in one place.
+
+export { DOCUMENT_GIT_MAX_BYTES, DOCUMENT_BUCKET_MAX_BYTES, MEDIA_GIT_MAX_BYTES, MEDIA_BUCKET_MAX_BYTES };
+
+/**
+ * The MCP connector's own document ceiling, half the bucket cap. The binding
+ * constraint is memory, not time: a presigned PUT cannot stream, so the whole
+ * body is buffered (peak about 2x the file). The browser path has no such
+ * limit because those bytes never pass through a function.
+ */
+export const DOCUMENT_CONNECTOR_MAX_BYTES = 104_857_600;
+
+export type StorageTier = "git" | "bucket" | "too_large";
+
+type MediaLimits = Pick<MediaConfig, "maxFileSize" | "maxAssetSize">;
+
+/** Media limits come from the site's `media` config; documents' are fixed. */
+export function tierFor(
+  kind: "document" | "media",
+  bytes: number,
+  media: MediaLimits = { maxFileSize: MEDIA_GIT_MAX_BYTES, maxAssetSize: MEDIA_BUCKET_MAX_BYTES },
+): StorageTier {
+  const [gitMax, bucketMax] =
+    kind === "document" ? [DOCUMENT_GIT_MAX_BYTES, DOCUMENT_BUCKET_MAX_BYTES] : [media.maxFileSize, media.maxAssetSize];
+  if (bytes <= gitMax) return "git";
+  return bytes <= bucketMax ? "bucket" : "too_large";
+}
+
+/** "2.5 MB", "100 MB" — one decimal at most, in binary megabytes. */
+export function formatBytes(bytes: number): string {
+  return `${Math.round((bytes / 1024 / 1024) * 10) / 10} MB`;
+}

package/src/lib/tags.ts

@@ -0,0 +1,165 @@
+import type { TagEntry } from "../schemas/tags";
+import type { SiteIndex } from "../schemas/site-config";
+import { diagnosticsCollector, type SidecarDiagnostic } from "./sidecar-diagnostics";
+
+/**
+ * Repair the tag sidecar against the current section set.
+ *
+ * Total, pure, and idempotent — the same contract as reconcileNav, for the same
+ * reason: tags.json survives writers that do not know it exists, so it can name
+ * sections an older writer (or an agent) has since deleted, and the repair has
+ * to happen on read rather than by rejecting content. It is deliberately NOT a
+ * schema refinement: parse-rejecting content would leave the editor unable to
+ * load the site it needs to repair it.
+ *
+ * Drops assignments to sections absent from `sections`, duplicate section ids
+ * within a tag, duplicate tag ids (first wins), and tags with no usable id. A
+ * tag with no assignments left is KEPT — the registry outlives its sections.
+ * Every entry is rebuilt key by key, so the output always parses as a
+ * TagsFile and never shares structure with the input (the editor holds this in
+ * React state, where a shared array would let a later edit mutate prior state).
+ */
+export function reconcileTags(entries: TagEntry[], sections: SiteIndex["sections"]): TagEntry[] {
+  return reconcileTagsReport(entries, sections).entries;
+}
+
+/** reconcileTags plus what the repair changed — what a validator reports. */
+export function reconcileTagsReport(
+  entries: TagEntry[],
+  sections: SiteIndex["sections"],
+): { entries: TagEntry[]; diagnostics: SidecarDiagnostic[] } {
+  const report = diagnosticsCollector();
+  const entryList = Array.isArray(entries) ? entries : [];
+  const validIds = new Set(sections && typeof sections === "object" ? Object.keys(sections) : []);
+
+  const seenTagIds = new Set<string>();
+  const result: TagEntry[] = [];
+  for (const entry of entryList) {
+    if (!entry || typeof entry !== "object") continue;
+    if (typeof entry.id !== "string" || entry.id === "") continue;
+    if (seenTagIds.has(entry.id)) {
+      report.add("duplicate-id", entry.id);
+      continue;
+    }
+    seenTagIds.add(entry.id);
+
+    const claimed = Array.isArray(entry.sectionIds) ? entry.sectionIds : [];
+    const sectionIds: string[] = [];
+    for (const id of claimed) {
+      if (typeof id !== "string") continue;
+      if (!validIds.has(id)) report.add("dangling", id);
+      else if (sectionIds.includes(id)) report.add("duplicate-member", id);
+      else sectionIds.push(id);
+    }
+    result.push({ id: entry.id, label: typeof entry.label === "string" ? entry.label : "", sectionIds });
+  }
+  return { entries: result, diagnostics: report.list() };
+}
+
+/**
+ * The ONLY sanctioned way to read the tags. Always reconciles, so callers never
+ * reason about whether index.tags is present, stale, or names deleted sections.
+ */
+export function siteTags(index: SiteIndex): TagEntry[] {
+  return reconcileTags(index.tags ?? [], index.sections);
+}
+
+/** Display fallback for blank tag labels — mirrors groupDisplayLabel. */
+export function tagDisplayLabel(label: string): string {
+  return label || "Untitled tag";
+}
+
+/** The tag already using this name (case- and whitespace-insensitive) — what
+ *  an inline create reuses, and what the registry refuses to duplicate. */
+export function findTagByLabel(tags: TagEntry[], label: string): TagEntry | null {
+  const wanted = label.trim().toLowerCase();
+  if (!wanted) return null;
+  return tags.find((t) => t.label.trim().toLowerCase() === wanted) ?? null;
+}
+
+export function addTag(index: SiteIndex, id: string, label: string, sectionId?: string): SiteIndex {
+  const tags = siteTags(index);
+  if (tags.some((t) => t.id === id)) return { ...index, tags };
+  return { ...index, tags: reconcileTags([...tags, { id, label, sectionIds: sectionId ? [sectionId] : [] }], index.sections) };
+}
+
+export function renameTag(index: SiteIndex, id: string, label: string): SiteIndex {
+  return { ...index, tags: siteTags(index).map((t) => (t.id === id ? { ...t, label } : t)) };
+}
+
+export function deleteTag(index: SiteIndex, id: string): SiteIndex {
+  return { ...index, tags: siteTags(index).filter((t) => t.id !== id) };
+}
+
+export function setSectionTagged(index: SiteIndex, sectionId: string, tagId: string, tagged: boolean): SiteIndex {
+  return {
+    ...index,
+    tags: siteTags(index).map((t) => {
+      if (t.id !== tagId) return t;
+      const without = t.sectionIds.filter((id) => id !== sectionId);
+      return { ...t, sectionIds: tagged ? [...without, sectionId] : without };
+    }),
+  };
+}
+
+/**
+ * Three-way merge of the tag sidecar for the collab rebase.
+ *
+ * Nav's rebase rule is "the remote's persisted tree wins", which is safe there
+ * because grouping is edited rarely. Tags are edited from every section's
+ * chrome, so the same rule would silently drop unsaved tagging whenever a peer
+ * saved anything at all. Instead, local edits are diffed against the clean
+ * baseline (`base`) and replayed onto the remote:
+ *  - a tag created locally is appended; one deleted locally is dropped;
+ *  - a local rename wins, otherwise the remote label stands;
+ *  - per (tag, section) pair, a local add or remove is replayed;
+ *  - a tag the REMOTE deleted stays deleted, local assignments included —
+ *    persisted state beats unsaved edits to a tag that no longer exists.
+ * With no baseline to diff against, the remote wins (nav's rule). A remote with
+ * no tags at all (an older server that does not attach the sidecar) leaves the
+ * local tags intact rather than wiping them. Inputs are never mutated; the
+ * result is not reconciled — readers do that through siteTags.
+ */
+export function mergeTags(args: {
+  base: TagEntry[] | undefined;
+  local: TagEntry[] | undefined;
+  remote: TagEntry[] | undefined;
+}): TagEntry[] | undefined {
+  const { base, local, remote } = args;
+  if (remote === undefined) return local?.map((t) => ({ ...t, sectionIds: [...t.sectionIds] }));
+  if (base === undefined || local === undefined) return remote.map((t) => ({ ...t, sectionIds: [...t.sectionIds] }));
+
+  // First occurrence wins, matching reconcileTags — `base` is an unreconciled
+  // server read, and a last-wins map would invent a diff against a duplicate.
+  const firstById = (tags: TagEntry[]) => {
+    const byId = new Map<string, TagEntry>();
+    for (const t of tags) if (!byId.has(t.id)) byId.set(t.id, t);
+    return byId;
+  };
+  const baseById = firstById(base);
+  const localById = firstById(local);
+  const remoteIds = new Set(remote.map((t) => t.id));
+
+  const result: TagEntry[] = [];
+  for (const r of remote) {
+    const b = baseById.get(r.id);
+    const l = localById.get(r.id);
+    if (b && !l) continue; // deleted locally
+    const members = [...r.sectionIds];
+    let label = r.label;
+    if (b && l) {
+      if (l.label !== b.label) label = l.label;
+      for (const id of l.sectionIds) if (!b.sectionIds.includes(id) && !members.includes(id)) members.push(id);
+      for (const id of b.sectionIds) {
+        if (l.sectionIds.includes(id)) continue;
+        const at = members.indexOf(id);
+        if (at !== -1) members.splice(at, 1);
+      }
+    }
+    result.push({ id: r.id, label, sectionIds: members });
+  }
+  for (const l of local) {
+    if (!remoteIds.has(l.id) && !baseById.has(l.id)) result.push({ ...l, sectionIds: [...l.sectionIds] });
+  }
+  return result;
+}

package/src/lib/theme-vars.ts

@@ -1,5 +1,6 @@
 import type { SiteConfig } from "../schemas/site-config";
 import { suggestAccessibleOn } from "./contrast";
+import { cornerRadiusValue } from "./corner-radius";
 
 /**
  * Computes the CSS value for the brand `--color-primary` / `--color-primary-contrast`
@@ -50,3 +51,25 @@ export function onPrimaryVarValue(c?: Partial<ThemeColorConfig> | null): string
   const dark = c?.primaryColorDark ? suggestAccessibleOn(c.primaryColorDark) : null;
   return lightDark(light, dark, c?.darkMode === "optional");
 }
+
+/**
+ * The full inline `<html style>` string both `Layout.astro` and
+ * `LoginLayout.astro` set at SSR time — one assembly point for the 9 custom
+ * properties instead of the same template literal copied into both files.
+ * Byte-for-byte identical to what those files built inline before this
+ * existed; changing the property order or defaults here is a client-facing
+ * change to every site's `<html>` tag, not a refactor.
+ */
+export function themeStyle(siteConfig?: SiteConfig | null): string {
+  return (
+    `--color-primary: ${primaryVarValue(siteConfig)}; ` +
+    `--color-primary-contrast: ${accentVarValue(siteConfig)}; ` +
+    `--color-on-primary: ${onPrimaryVarValue(siteConfig)}; ` +
+    `--font-heading: ${siteConfig?.headingFont ?? "system-ui"}, system-ui, sans-serif; ` +
+    `--font-body: ${siteConfig?.bodyFont ?? "system-ui"}, system-ui, sans-serif; ` +
+    `--heading-text-transform: ${siteConfig?.uppercaseHeadings !== false ? "uppercase" : "none"}; ` +
+    `--subheading-text-transform: ${siteConfig?.uppercaseSubheadings !== false ? "uppercase" : "none"}; ` +
+    `--nav-text-transform: ${siteConfig?.uppercaseNavHeadings !== false ? "uppercase" : "none"}; ` +
+    `--radius-outer: ${cornerRadiusValue(siteConfig?.cornerRadius)};`
+  );
+}

package/src/media/index.ts

@@ -5,7 +5,7 @@ export * from "./provider";
 export * from "./utils";
 export * from "./queue";
 export * from "./resolve";
-export { generateVideoPoster } from "./videoPoster";
+export { generateVideoPoster } from "./video-poster";
 export { composePreviewImage, type PreviewImageInputs } from "./compose-preview";
 
 const MEDIA_KEY = Symbol.for("@drawnagency/primitives/media");

package/src/media/queue.ts

@@ -1,4 +1,5 @@
 import type { MediaKind } from "./types";
+import type { ImageVariantPlan } from "../lib/image-variant-plan";
 
 export interface QueueInput {
   buffer: ArrayBuffer;
@@ -23,6 +24,7 @@ export interface QueueItem {
     posterBlob?: Blob;
     width: number;
     height: number;
+    plan?: ImageVariantPlan;
   };
 }
 
@@ -116,6 +118,7 @@ export class ProcessingQueue {
           posterBlob: msg.posterBlob,
           width: msg.width,
           height: msg.height,
+          plan: msg.plan,
         };
         this.options.onEvent({ type: "complete", item: { ...item } });
         // The event above carries the only reference anyone reads. Holding ours

package/src/media/utils.ts

@@ -1,4 +1,4 @@
-import { slugifyPageSlug } from "../lib/pages";
+import { slugifyPageSlug } from "../lib/slug";
 import type { MediaItem } from "./types";
 
 export async function hashFileBuffer(buffer: ArrayBuffer): Promise<string> {
@@ -48,6 +48,24 @@ export function mimeToExt(mime: string): string {
   return MIME_TO_EXT[mime] ?? "bin";
 }
 
+// Editor preview URL for a library item, matching what /api/media/[id] serves:
+// SVGs carry kind "image" but have no webp variants, only original.svg; rasters
+// get their smallest variant; animated and video items get their playable
+// original (a <video> src, not a still). Null for a raster with no variants.
+export function mediaThumbnailUrl(item: MediaItem): string | null {
+  if (item.mimeType === "image/svg+xml" || item.kind !== "image") {
+    return `/api/media/${item.id}/original.${mimeToExt(item.mimeType)}`;
+  }
+  if (item.variants.length === 0) return null;
+  const smallest = item.variants.reduce((a, b) => (a.width < b.width ? a : b));
+  return `/api/media/${item.id}/${smallest.width}.webp`;
+}
+
+// For <img>-only previews (cover, logo): null unless the item is a still image.
+export function imageThumbnailUrl(item: MediaItem | undefined): string | null {
+  return item?.kind === "image" ? mediaThumbnailUrl(item) : null;
+}
+
 export function displayFilenameExt(mime: string): string {
   const ext = MIME_TO_EXT[mime];
   return ext ? `.${ext}` : "";

package/src/media/{videoPoster.ts → video-poster.ts}

@@ -26,7 +26,7 @@ export function generateVideoPoster(
     }, 10_000);
 
     video.addEventListener("error", () => {
-      safeReject(new Error("Failed to load video for poster generation"));
+      safeReject(new Error("Couldn't load video for poster generation"));
     }, { once: true });
 
     video.muted = true;
@@ -56,7 +56,7 @@ export function generateVideoPoster(
               settled = true;
               cleanup();
               if (!posterBlob) {
-                reject(new Error("Failed to create poster blob"));
+                reject(new Error("Couldn't create poster blob"));
                 return;
               }
               resolve({ posterBlob, width: w, height: h, duration: video.duration });