@drawnagency/primitives 0.1.91 → 0.1.93

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -5,9 +5,11 @@ import { ColorPicker } from "../shared/ColorPicker";
 import { FontPicker } from "../shared/FontPicker";
 import { Input } from "../shared/Input";
 import { Select } from "../shared/Select";
+import { SubTabs } from "../shared/SubTabs";
 import { FormLabel } from "../shared/FormLabel";
 import { useMediaLibrary } from "./MediaLibraryContext";
-import { deriveContrast } from "../../lib/contrast";
+import { contrastRatio, wcagLevel, suggestAccessibleOn } from "../../lib/contrast";
+import { cn } from "../../lib/cn";
 import { buildGoogleFontsUrl } from "../../lib/google-fonts";
 import type { SiteConfig } from "../../schemas/site-config";
 import type { MediaItem } from "../../media/types";
@@ -43,6 +45,39 @@ const cornerRadiusOptions = [
 const FAVICON_TYPES = ["image/svg+xml", "image/png"];
 const FAVICON_MAX_BYTES = 100 * 1024;
 
+// Page-background tokens the brand colors are shown against, so contrast is
+// measured against the real surface (base.css: --color-base is hsl(0 0% 92%)
+// in light, hsl(0 0% 12%) in dark).
+const LIGHT_BASE = "#ebebeb";
+const DARK_BASE = "#1f1f1f";
+
+interface ContrastEntry {
+  mode: string;
+  ratio: number;
+}
+
+/** Compact WCAG readout: contrast ratio + AA / large-only / fail badge per mode. */
+function ContrastRow({ label, entries }: { label: string; entries: ContrastEntry[] }) {
+  return (
+    <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs">
+      <span className="text-base-contrast-light">{label}</span>
+      {entries.map((e) => {
+        const level = wcagLevel(e.ratio);
+        const tone = level.aa ? "text-green-600" : level.aaLarge ? "text-amber-600" : "text-red-600";
+        const mark = level.aa ? "AA" : level.aaLarge ? "large only" : "fail";
+        return (
+          <span key={e.mode} className="inline-flex items-center gap-1">
+            {entries.length > 1 && <span className="text-base-contrast-light">{e.mode}</span>}
+            <span className={cn("font-medium tabular-nums", tone)}>
+              {e.ratio.toFixed(2)}:1 · {mark}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
 export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
   const [faviconError, setFaviconError] = useState<string | null>(null);
   const mediaLibrary = useMediaLibrary();
@@ -82,17 +117,34 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
     update({ primaryContrast: color });
   }
 
-  function resetContrastToAuto() {
-    update({ primaryContrast: deriveContrast(siteConfig.primaryColor) });
+  function suggestAccent() {
+    update({ primaryContrast: suggestAccessibleOn(siteConfig.primaryColor) });
+  }
+
+  function handleDarkColorChange(color: string) {
+    update({ primaryColorDark: color });
+  }
+
+  function handleDarkContrastChange(color: string) {
+    update({ primaryContrastDark: color });
+  }
+
+  function suggestAccentDark() {
+    update({ primaryContrastDark: suggestAccessibleOn(siteConfig.primaryColorDark ?? siteConfig.primaryColor) });
   }
 
+  const customizeDarkPrimary = () => update({ primaryColorDark: siteConfig.primaryColor });
+  const matchLightPrimary = () => update({ primaryColorDark: null });
+  const customizeDarkAccent = () => update({ primaryContrastDark: siteConfig.primaryContrast });
+  const matchLightAccent = () => update({ primaryContrastDark: null });
+
   function handleFontChange(field: "headingFont" | "bodyFont", family: string) {
     const next = { ...siteConfig, [field]: family };
     next.googleFontsUrl = buildGoogleFontsUrl(next.headingFont, next.bodyFont);
     onChange(next);
   }
 
-  return (
+  const detailsContent = (
     <div className="space-y-5">
       <Input
         label="Site name"
@@ -102,34 +154,25 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
       />
 
       <div>
-        <FormLabel>Primary color</FormLabel>
-        <div className="flex items-center gap-3">
-          <ColorPicker
-            value={siteConfig.primaryColor}
-            onChange={handleColorChange}
-            label="Primary color"
-          />
-          <span className="text-sm text-base-contrast-light">{siteConfig.primaryColor}</span>
-        </div>
-      </div>
-
-      <div>
-        <FormLabel>Accent (button &amp; highlight text)</FormLabel>
-        <div className="flex items-center gap-3">
-          <ColorPicker
-            value={siteConfig.primaryContrast}
-            onChange={handleContrastChange}
-            label="Accent color"
-          />
-          <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrast}</span>
-          <Button type="button" variant="ghost" size="sm" onClick={resetContrastToAuto}>
-            Reset to auto
-          </Button>
+        <FormLabel htmlFor="site-description">Description</FormLabel>
+        <textarea
+          id="site-description"
+          aria-label="Site description"
+          rows={2}
+          maxLength={300}
+          value={siteConfig.description ?? ""}
+          onChange={(e) => update({ description: e.target.value || null })}
+          placeholder="Short summary for search results and social shares."
+          className="w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast"
+        />
+        <div className="mt-1 flex items-start justify-between gap-2">
+          <p className="text-xs text-base-contrast/70">
+            Used for the page's meta description and the social / OG preview.
+          </p>
+          <span className="shrink-0 text-xs text-base-contrast-light tabular-nums">
+            {(siteConfig.description ?? "").length}/300
+          </span>
         </div>
-        <p className="mt-1 text-xs text-base-contrast/70">
-          Shown as text on primary-colored buttons and as the text-selection color. "Reset to auto" derives a
-          legible light or dark value from your primary brand color.
-        </p>
       </div>
 
       <div>
@@ -259,6 +302,58 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
           </div>
         );
       })()}
+    </div>
+  );
+
+  // Which modes to score depends on darkMode: light-only shows Light, dark-only
+  // shows Dark, "optional" shows both (and reveals the per-mode variant inputs).
+  const showLight = siteConfig.darkMode !== "dark";
+  const showDark = siteConfig.darkMode !== "light";
+  const effPrimaryDark = siteConfig.primaryColorDark ?? siteConfig.primaryColor;
+  const effAccentDark = siteConfig.primaryContrastDark ?? siteConfig.primaryContrast;
+  const primaryTextEntries: ContrastEntry[] = [
+    ...(showLight ? [{ mode: "Light", ratio: contrastRatio(siteConfig.primaryColor, LIGHT_BASE) }] : []),
+    ...(showDark ? [{ mode: "Dark", ratio: contrastRatio(effPrimaryDark, DARK_BASE) }] : []),
+  ];
+  const accentEntries: ContrastEntry[] = [
+    ...(showLight ? [{ mode: "Light", ratio: contrastRatio(siteConfig.primaryContrast, siteConfig.primaryColor) }] : []),
+    ...(showDark ? [{ mode: "Dark", ratio: contrastRatio(effAccentDark, effPrimaryDark) }] : []),
+  ];
+
+  const stylesContent = (
+    <div className="space-y-5">
+      <div>
+        <FormLabel>Primary color</FormLabel>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={siteConfig.primaryColor}
+            onChange={handleColorChange}
+            label="Primary color"
+          />
+          <span className="text-sm text-base-contrast-light">{siteConfig.primaryColor}</span>
+        </div>
+        <ContrastRow label="As heading / link text" entries={primaryTextEntries} />
+      </div>
+
+      <div>
+        <FormLabel>Accent (button &amp; highlight text)</FormLabel>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={siteConfig.primaryContrast}
+            onChange={handleContrastChange}
+            label="Accent color"
+          />
+          <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrast}</span>
+          <Button type="button" variant="ghost" size="sm" onClick={suggestAccent}>
+            Suggest
+          </Button>
+        </div>
+        <ContrastRow label="As button label on primary" entries={accentEntries} />
+        <p className="mt-1 text-xs text-base-contrast/70">
+          Shown as text on primary-colored buttons and as the text-selection color. "Suggest" picks the black
+          or white with the strongest contrast on your primary color.
+        </p>
+      </div>
 
       <Select
         label="Dark mode"
@@ -267,6 +362,68 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         options={darkModeOptions}
       />
 
+      {siteConfig.darkMode === "optional" && (
+        <div className="space-y-4 border-l-2 border-base-200 pl-3">
+          <div>
+            <p className="text-sm font-medium text-base-contrast">Dark mode variants</p>
+            <p className="mt-0.5 text-xs text-base-contrast-light">
+              Optional overrides used only in dark mode, so light and dark can each hit their own contrast target.
+            </p>
+          </div>
+
+          <div>
+            <FormLabel>Primary (dark)</FormLabel>
+            {!siteConfig.primaryColorDark ? (
+              <div className="flex items-center gap-3">
+                <span className="text-sm text-base-contrast-light">Matches light ({siteConfig.primaryColor})</span>
+                <Button type="button" variant="secondary" size="sm" onClick={customizeDarkPrimary}>
+                  Customize
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                <ColorPicker
+                  value={siteConfig.primaryColorDark}
+                  onChange={handleDarkColorChange}
+                  label="Primary color (dark)"
+                />
+                <span className="text-sm text-base-contrast-light">{siteConfig.primaryColorDark}</span>
+                <Button type="button" variant="ghost" size="sm" onClick={matchLightPrimary}>
+                  Match light
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <div>
+            <FormLabel>Accent (dark)</FormLabel>
+            {!siteConfig.primaryContrastDark ? (
+              <div className="flex items-center gap-3">
+                <span className="text-sm text-base-contrast-light">Matches light ({siteConfig.primaryContrast})</span>
+                <Button type="button" variant="secondary" size="sm" onClick={customizeDarkAccent}>
+                  Customize
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                <ColorPicker
+                  value={siteConfig.primaryContrastDark}
+                  onChange={handleDarkContrastChange}
+                  label="Accent color (dark)"
+                />
+                <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrastDark}</span>
+                <Button type="button" variant="ghost" size="sm" onClick={suggestAccentDark}>
+                  Suggest
+                </Button>
+                <Button type="button" variant="ghost" size="sm" onClick={matchLightAccent}>
+                  Match light
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       <div>
         <Select
           label="Corner radius"
@@ -278,7 +435,11 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
           Rounding of cards, media frames, buttons, and panels across the site.
         </p>
       </div>
+    </div>
+  );
 
+  const typographyContent = (
+    <div className="space-y-5">
       <FontPicker
         label="Heading font"
         value={siteConfig.headingFont}
@@ -310,4 +471,14 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
       />
     </div>
   );
+
+  return (
+    <SubTabs
+      tabs={[
+        { id: "details", label: "Details", content: detailsContent },
+        { id: "styles", label: "Styles", content: stylesContent },
+        { id: "typography", label: "Typography", content: typographyContent },
+      ]}
+    />
+  );
 }

package/src/components/shell/ViewerLoginForm.tsx

@@ -1,10 +1,11 @@
 import { useState, type FormEvent } from "react";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
+import { Select } from "../shared/Select";
 import { safeRedirect } from "../../lib/safeRedirect";
 
 interface Props {
-  audiences: Array<{ name: string; displayName: string }>;
+  audiences: Array<{ name: string; displayName: string; hasPassword?: boolean }>;
   next?: string | null;
 }
 
@@ -14,12 +15,26 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const audienceOptions = [
+    ...(audiences.length > 1 ? [{ value: "", label: "Select audience..." }] : []),
+    ...audiences.map((a) => ({ value: a.name, label: a.displayName })),
+  ];
+
+  // An open (passwordless) audience needs no password field — enter with one click.
+  // Default to requiring a password until an audience is chosen so the field
+  // doesn't flash for the "Select audience..." state.
+  const selected = audiences.find((a) => a.name === audience);
+  const needsPassword = selected ? selected.hasPassword !== false : true;
+
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
     setLoading(true);
     setError(null);
 
-    const body: { audience: string; password: string; next?: string } = { audience, password };
+    const body: { audience: string; password: string; next?: string } = {
+      audience,
+      password: needsPassword ? password : "",
+    };
     if (next) body.next = next;
 
     try {
@@ -47,33 +62,22 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   return (
     <div className="mx-auto max-w-sm">
       <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="audience" className="mb-1.5 block text-sm font-medium text-base-contrast">
-            Audience
-          </label>
-          <select
-            id="audience"
-            value={audience}
-            onChange={(e) => setAudience(e.target.value)}
-            required
-            className="w-full rounded border border-base-200 px-3 py-2 text-sm"
-          >
-            {audiences.length > 1 && <option value="">Select audience...</option>}
-            {audiences.map((a) => (
-              <option key={a.name} value={a.name}>
-                {a.displayName}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <PasswordInput
-          label="Password"
-          value={password}
-          onChange={setPassword}
-          autoComplete="current-password"
+        <Select
+          label="Audience"
+          value={audience}
+          onChange={setAudience}
+          options={audienceOptions}
         />
 
+        {needsPassword && (
+          <PasswordInput
+            label="Password"
+            value={password}
+            onChange={setPassword}
+            autoComplete="current-password"
+          />
+        )}
+
         {error && (
           <p className="text-sm text-red-600">{error}</p>
         )}

package/src/lib/contrast.ts

@@ -21,3 +21,55 @@ export function contrastColor(hex: string): "#1a1a1a" | "#ffffff" {
   const b = parseInt(h.slice(4, 6), 16);
   return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? "#1a1a1a" : "#ffffff";
 }
+
+// --- WCAG 2.x contrast (relative-luminance based) -------------------------
+
+function toRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "");
+  const x = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+  return [
+    parseInt(x.slice(0, 2), 16),
+    parseInt(x.slice(2, 4), 16),
+    parseInt(x.slice(4, 6), 16),
+  ];
+}
+
+/** WCAG relative luminance of an sRGB hex color (0 = black, 1 = white). */
+export function relativeLuminance(hex: string): number {
+  const [r, g, b] = toRgb(hex).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** WCAG contrast ratio between two hex colors, 1 (identical) → 21 (#000/#fff). */
+export function contrastRatio(a: string, b: string): number {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const hi = Math.max(la, lb);
+  const lo = Math.min(la, lb);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+export interface WcagLevel {
+  /** ≥ 4.5:1 — AA for normal-size text. */
+  aa: boolean;
+  /** ≥ 3:1 — AA for large text and UI components. */
+  aaLarge: boolean;
+  /** ≥ 7:1 — AAA for normal-size text. */
+  aaa: boolean;
+}
+
+export function wcagLevel(ratio: number): WcagLevel {
+  return { aa: ratio >= 4.5, aaLarge: ratio >= 3, aaa: ratio >= 7 };
+}
+
+/**
+ * Pick the pure black/white that maximizes contrast against `bg` — used to
+ * suggest an accessible accent (text on a primary-colored button). Pure b/w
+ * gives the highest achievable ratio for a foreground on a fixed background.
+ */
+export function suggestAccessibleOn(bg: string): "#000000" | "#ffffff" {
+  return contrastRatio("#000000", bg) >= contrastRatio("#ffffff", bg) ? "#000000" : "#ffffff";
+}

package/src/lib/index.ts

@@ -3,7 +3,16 @@ export { cn } from "./cn";
 export { audiencePasses } from "./pages";
 export { resolveChatbotName, resolveThinkingPhrases, DEFAULT_CHATBOT_NAME } from "./chatbot";
 export { generateNavLinks, toSectionId, type NavItem } from "./nav";
-export { deriveContrast, contrastColor } from "./contrast";
+export {
+  deriveContrast,
+  contrastColor,
+  relativeLuminance,
+  contrastRatio,
+  wcagLevel,
+  suggestAccessibleOn,
+  type WcagLevel,
+} from "./contrast";
+export { primaryVarValue, accentVarValue } from "./theme-vars";
 export { sanitizeHtml, ensureSanitizer } from "./sanitize";
 export { gridColsClass } from "./grid";
 export { getIcon, curatedIcons, type IconEntry } from "./icons";

package/src/lib/theme-vars.ts

@@ -0,0 +1,31 @@
+import type { SiteConfig } from "../schemas/site-config";
+
+/**
+ * Computes the CSS value for the brand `--color-primary` / `--color-primary-contrast`
+ * custom properties. When darkMode is "optional" AND a dark variant is set, the
+ * value is a CSS `light-dark(<light>, <dark>)` expression — the browser resolves
+ * it per the element's `color-scheme` (the `.dark` class sets `color-scheme: dark`;
+ * `:root` sets `color-scheme: light`). Otherwise it's the plain light hex.
+ *
+ * Single source of truth for every injection site: Layout.astro / LoginLayout.astro
+ * (SSR inline `<html style>`) and EditorShell (live setProperty + localStorage).
+ */
+type ThemeColorConfig = Pick<
+  SiteConfig,
+  "primaryColor" | "primaryContrast" | "primaryColorDark" | "primaryContrastDark" | "darkMode"
+>;
+
+const DEFAULT_PRIMARY = "#009ca6";
+const DEFAULT_CONTRAST = "#f0f0f0";
+
+function lightDark(light: string, dark: string | null | undefined, optional: boolean): string {
+  return optional && dark ? `light-dark(${light}, ${dark})` : light;
+}
+
+export function primaryVarValue(c?: Partial<ThemeColorConfig> | null): string {
+  return lightDark(c?.primaryColor ?? DEFAULT_PRIMARY, c?.primaryColorDark, c?.darkMode === "optional");
+}
+
+export function accentVarValue(c?: Partial<ThemeColorConfig> | null): string {
+  return lightDark(c?.primaryContrast ?? DEFAULT_CONTRAST, c?.primaryContrastDark, c?.darkMode === "optional");
+}

package/src/media/compose-preview.ts

@@ -10,6 +10,9 @@ export interface PreviewImageInputs {
   invertLogo: boolean;
   siteName: string;
   headingFont: string;
+  /** The site's Google Fonts CSS URL (or null for system-ui), used to load the
+   *  heading font before drawing so text mode never falls back to system-ui. */
+  googleFontsUrl: string | null;
   /** Computed contrasting text color (text mode). */
   textColor: string;
 }
@@ -17,6 +20,53 @@ export interface PreviewImageInputs {
 const WIDTH = 1200;
 const HEIGHT = 630;
 
+/**
+ * Bump when the composition logic changes so already-composed rasters (stamped
+ * with the old version, or 0 for pre-versioning ones) regenerate on next editor
+ * open. v2 = load the Google heading font before drawing + draw at weight 700.
+ */
+export const PREVIEW_COMPOSE_VERSION = 2;
+
+// The raster draws the site name at this weight; the loader ensures this exact
+// weight is available so canvas doesn't silently fall back to a nearest weight.
+const HEADING_WEIGHT = 700;
+
+/**
+ * Ensure the heading font is actually loaded before canvas draws with it.
+ * `document.fonts.load` only fetches a family that already has a matching
+ * @font-face rule registered; in the editor that rule comes from a <link> that
+ * may not be parsed yet when composition runs, so an ambient load() can resolve
+ * empty and the draw silently falls back to system-ui. If the ambient load
+ * yields nothing, fetch the Google Fonts CSS and register the weight-700
+ * face(s) explicitly via the CSS Font Loading API.
+ */
+async function loadHeadingFont(family: string, googleFontsUrl: string | null): Promise<void> {
+  if (!family || family === "system-ui" || !googleFontsUrl || typeof FontFace === "undefined") return;
+  const spec = `${HEADING_WEIGHT} 84px "${family}"`;
+  try {
+    const loaded = await document.fonts.load(spec);
+    if (loaded.length > 0) return;
+  } catch {
+    // fall through to explicit registration
+  }
+  try {
+    const css = await (await fetch(googleFontsUrl)).text();
+    const blocks = css.match(/@font-face\s*\{[^}]*\}/g) ?? [];
+    const wanted = blocks.filter((b) => new RegExp(`font-weight:\\s*${HEADING_WEIGHT}\\b`).test(b));
+    await Promise.all(
+      (wanted.length ? wanted : blocks).map(async (block) => {
+        const url = block.match(/url\(([^)]+)\)/)?.[1];
+        if (!url) return;
+        const face = new FontFace(family, `url(${url})`, { weight: String(HEADING_WEIGHT) });
+        await face.load();
+        document.fonts.add(face);
+      }),
+    );
+  } catch {
+    // give up — the draw below falls back to system-ui
+  }
+}
+
 /**
  * Composes the 1200×630 social-preview raster in the browser (Canvas API only,
  * no dependency). Returns a WebP blob. Must run client-side (uses document/Image
@@ -60,13 +110,15 @@ export async function composePreviewImage(inputs: PreviewImageInputs): Promise<B
 
   if (!drewLogo) {
     if (document.fonts?.ready) await document.fonts.ready;
-    // fillText doesn't itself trigger a font load — explicitly load the exact
-    // weight/family used below so it's available before we draw.
-    await document.fonts.load(`600 84px ${inputs.headingFont}`).catch(() => {});
+    // Load the heading font (exact weight) before drawing — fillText doesn't
+    // itself trigger a webfont load, so without this canvas falls back silently.
+    await loadHeadingFont(inputs.headingFont, inputs.googleFontsUrl);
     ctx.fillStyle = inputs.textColor;
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.font = `600 84px ${inputs.headingFont}, system-ui, sans-serif`;
+    // Quote the family: multi-word names ("Playfair Display") break the CSS font
+    // shorthand parse when unquoted, which would drop the whole declaration.
+    ctx.font = `${HEADING_WEIGHT} 84px "${inputs.headingFont}", system-ui, sans-serif`;
     ctx.fillText(inputs.siteName, WIDTH / 2, HEIGHT / 2, WIDTH * 0.86);
   }
 

package/src/media/preview-inputs.ts

@@ -19,7 +19,7 @@ export function derivePreviewInputs(
   siteConfig: SiteConfig,
   resolveLogoUrl: (imageId: string) => string | null,
 ): { inputs: PreviewImageInputs; signature: string } {
-  const { logo, darkMode, primaryColor, siteName, headingFont } = siteConfig;
+  const { logo, darkMode, primaryColor, siteName, headingFont, googleFontsUrl } = siteConfig;
   const dark = darkMode === "dark";
 
   let mode: "logo" | "text" = "text";
@@ -43,6 +43,7 @@ export function derivePreviewInputs(
     invertLogo,
     siteName,
     headingFont,
+    googleFontsUrl,
     textColor: contrastColor(primaryColor),
   };
 
@@ -53,6 +54,7 @@ export function derivePreviewInputs(
     invertLogo: inputs.invertLogo,
     siteName: inputs.siteName,
     headingFont: inputs.headingFont,
+    googleFontsUrl: inputs.googleFontsUrl,
     textColor: inputs.textColor,
   });
 

package/src/schemas/site-config.ts

@@ -127,15 +127,41 @@ const CanonicalIndexSchema = z
       seenSlugs.add(p.slug);
     }
 
+    // Page section orders must partition sections{} exactly: every section id
+    // appears in exactly one page order, and every page-order id has a
+    // sections{} entry. On failure, name the offending ids by category so an
+    // agent (or human) can act without diffing the whole index by hand.
+    const fmtIds = (ids: string[]) => ids.map((id) => `"${id}"`).sort().join(", ");
     const fromPages: string[] = [];
     for (const p of data.pages) fromPages.push(...p.order);
     const fromPagesSet = new Set(fromPages);
-    if (fromPages.length !== fromPagesSet.size) {
-      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "A section id appears in more than one page" });
-    }
     const sectionKeys = Object.keys(data.sections);
-    if (fromPagesSet.size !== sectionKeys.length || !sectionKeys.every((k) => fromPagesSet.has(k))) {
-      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Page section orders must partition sections{} exactly" });
+    const sectionSet = new Set(sectionKeys);
+
+    const counts = new Map<string, number>();
+    for (const id of fromPages) counts.set(id, (counts.get(id) ?? 0) + 1);
+    const duplicated = [...counts].filter(([, n]) => n > 1).map(([id]) => id);
+    if (duplicated.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Section id(s) appear in more than one page order: ${fmtIds(duplicated)}`,
+      });
+    }
+
+    const orderedNotInSections = [...fromPagesSet].filter((id) => !sectionSet.has(id));
+    if (orderedNotInSections.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Section id(s) in a page order but missing from sections{}: ${fmtIds(orderedNotInSections)}`,
+      });
+    }
+
+    const sectionsNotOrdered = sectionKeys.filter((id) => !fromPagesSet.has(id));
+    if (sectionsNotOrdered.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Section id(s) in sections{} but not in any page order: ${fmtIds(sectionsNotOrdered)}`,
+      });
     }
   });
 
@@ -201,6 +227,12 @@ export const SiteConfigSchema = z.object({
   siteName: z.string().default("Brand Portal"),
   primaryColor: HexColorSchema.default("#009ca6"),
   primaryContrast: HexColorSchema.default("#f0f0f0"),
+  // Dark-mode overrides for the brand primary / accent. Only applied when
+  // darkMode is "optional" (both modes are reachable, so a single value can't
+  // satisfy both). null = reuse the light value in dark mode. Rendered via the
+  // CSS light-dark() function (see lib/theme-vars.ts).
+  primaryColorDark: HexColorSchema.nullable().default(null),
+  primaryContrastDark: HexColorSchema.nullable().default(null),
   darkMode: z.enum(["light", "dark", "optional"]).default("light"),
   // Maps to the --radius-outer design token (see lib/corner-radius.ts);
   // defaults so pre-existing site-config.json files keep parsing.
@@ -245,6 +277,10 @@ export const SiteConfigSchema = z.object({
       imageId: z.string(),
       width: z.number().int().positive(),
       height: z.number().int().positive(),
+      // Compose-logic version that produced this raster. Pre-existing rasters
+      // (and manifests written before this field) default to 0, which is below
+      // any current PREVIEW_COMPOSE_VERSION, so the editor regenerates them.
+      version: z.number().int().nonnegative().default(0),
     })
     .nullable()
     .default(null),