@acms-subir/core 0.1.0 → 0.3.0

package/src/lib/socialIcons.ts

@@ -0,0 +1,32 @@
+// Brand glyphs for social links, matched by URL host. Used by the site footer
+// and the /links profile row. Unknown hosts return null and the caller falls
+// back to the item's text label. Paths are 24×24, filled with currentColor.
+
+const ICONS: [RegExp, string][] = [
+  [/(^|\.)(x|twitter)\.com$/, 'M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.2-8.3L2 3h6.4l4.4 5.8L17.8 3Zm-1.1 16.2h1.7L7.4 4.7H5.6l11.1 14.5Z'],
+  [/(^|\.)github\.com$/, 'M12 2.5a9.5 9.5 0 0 0-3 18.5c.5.1.7-.2.7-.5v-1.7c-2.7.6-3.2-1.2-3.2-1.2-.4-1.1-1.1-1.4-1.1-1.4-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.1-.2-4.4-1.1-4.4-4.7 0-1 .4-1.9 1-2.6-.1-.2-.4-1.2.1-2.5 0 0 .8-.3 2.6 1a9 9 0 0 1 4.8 0c1.8-1.3 2.6-1 2.6-1 .5 1.3.2 2.3.1 2.5.6.7 1 1.6 1 2.6 0 3.7-2.3 4.5-4.4 4.7.3.3.6.9.6 1.8v2.6c0 .3.2.6.7.5A9.5 9.5 0 0 0 12 2.5Z'],
+  [/(^|\.)linkedin\.com$/, 'M5 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM3.3 9h3.4v11.5H3.3V9Zm5.6 0h3.3v1.6c.5-.9 1.6-1.9 3.4-1.9 3.6 0 4.2 2.3 4.2 5.4v6.4h-3.4v-5.7c0-1.4 0-3.1-1.9-3.1s-2.2 1.5-2.2 3v5.8H8.9V9Z'],
+  [/(^|\.)instagram\.com$/, 'M12 7.4a4.6 4.6 0 1 0 0 9.2 4.6 4.6 0 0 0 0-9.2Zm0 7.6a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm5.9-7.8a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0ZM12 4.3c2.5 0 2.8 0 3.8.1 2.6.1 3.7 1.3 3.8 3.8.1 1 .1 1.3.1 3.8s0 2.8-.1 3.8c-.1 2.5-1.3 3.7-3.8 3.8-1 .1-1.3.1-3.8.1s-2.8 0-3.8-.1c-2.6-.1-3.7-1.3-3.8-3.8-.1-1-.1-1.3-.1-3.8s0-2.8.1-3.8c.1-2.5 1.3-3.7 3.8-3.8 1-.1 1.3-.1 3.8-.1Zm0-1.7c-2.6 0-2.9 0-3.9.1-3.5.2-5.4 2.1-5.6 5.6-.1 1-.1 1.3-.1 3.9s0 2.9.1 3.9c.2 3.5 2.1 5.4 5.6 5.6 1 .1 1.3.1 3.9.1s2.9 0 3.9-.1c3.5-.2 5.4-2.1 5.6-5.6.1-1 .1-1.3.1-3.9s0-2.9-.1-3.9c-.2-3.5-2.1-5.4-5.6-5.6-1-.1-1.3-.1-3.9-.1Z'],
+  [/(^|\.)(youtube\.com|youtu\.be)$/, 'M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8c1.6.4 7.8.4 7.8.4s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8ZM10 15V9l5.2 3L10 15Z'],
+  [/(^|\.)(facebook\.com|fb\.com)$/, 'M13.5 21v-7.6h2.6l.4-3h-3V8.5c0-.9.2-1.5 1.5-1.5h1.6V4.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1Z'],
+  [/(^|\.)tiktok\.com$/, 'M16.6 3h-3.1v12.3a2.6 2.6 0 1 1-2.6-2.6c.3 0 .5 0 .8.1V9.6a5.8 5.8 0 1 0 4.9 5.7V9.1a7.3 7.3 0 0 0 4.3 1.4V7.4a4.3 4.3 0 0 1-4.3-4.4Z'],
+];
+
+const RSS = 'M5 3a16 16 0 0 1 16 16h-3A13 13 0 0 0 5 6V3Zm0 6a10 10 0 0 1 10 10h-3a7 7 0 0 0-7-7V9Zm1.5 6.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z';
+const MAIL = 'M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1.5 2v.3l7.5 5.2 7.5-5.2V7h-15Zm15 2.7-7.5 5.2-7.5-5.2V17h15V9.7Z';
+
+// the SVG path for a social URL, or null when the host isn't recognised
+export function socialIconPath(url: string): string | null {
+  if (url.startsWith('mailto:')) return MAIL;
+  if (/\/rss\.xml$|\/feed\/?$/.test(url)) return RSS;
+  let host = '';
+  try {
+    host = new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return null;
+  }
+  return ICONS.find(([re]) => re.test(host))?.[1] ?? null;
+}
+
+export const socialIconSvg = (path: string) =>
+  `<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="${path}"/></svg>`;

package/src/lib/tagColor.ts

@@ -0,0 +1,11 @@
+// Tag marker colors. Labels render as a small rounded-square marker + text
+// (never a filled pill); each tag gets a stable hue hashed from its name, so
+// the same tag is the same color on every page without any stored setting.
+// Mid-tone hues chosen to read on both light and dark canvases.
+const PALETTE = ['#3a86d6', '#2f9e6e', '#d9822b', '#8a6cf0', '#d45a8a', '#0c8599', '#c2872a', '#6b7fd7'];
+
+export function tagColor(name: string): string {
+  let h = 0;
+  for (const c of name.toLowerCase()) h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  return PALETTE[h % PALETTE.length];
+}

package/src/lib/theme.ts

@@ -1,3 +1,4 @@
+import { ThemeManifest, sectionDefinitions } from '../theme-sdk/contract.mjs';
 import { z } from 'zod';
 import type { Settings } from './schema';
 
@@ -11,37 +12,25 @@ import type { Settings } from './schema';
 // sparse per-token overrides (settings.designOverrides) on top; resolveDesign
 // merges the two and emits CSS variables consumed by site.css.
 
-export const ThemeTokens = z.object({
-  bg: z.string().default('#faf9f7'),
-  ink: z.string().default('#1e1f24'),
-  muted: z.string().default('#6b6e78'),
-  line: z.string().default('#e5e3de'),
-  accent: z.string().default('#4f46e5'),
-  panel: z.string().default('#ffffff'),
-  soft: z.string().default('#eceae5'),
-  headingFont: z.string().default("'Inter', system-ui, sans-serif"),
-  bodyFont: z.string().default("'Inter', system-ui, sans-serif"),
-  // the `family=` query for fonts.googleapis.com/css2; empty = no webfont
-  googleFonts: z.string().default('family=Inter:wght@400;600;700'),
-  width: z.coerce.number().default(760),
-});
-export type ThemeTokens = z.infer<typeof ThemeTokens>;
-
-// Token keys the Design screen may override individually.
-export const OVERRIDE_KEYS = ['bg', 'ink', 'muted', 'line', 'accent', 'panel', 'soft', 'width'] as const;
+export { ThemeTokens } from './themeTokens';
+import { ThemeTokens, tokensCss, hasCustomDark } from './themeTokens';
+
+// Token keys the Design screen may override individually. Dark-palette
+// overrides use DARK_OVERRIDE_KEYS (designOverrides.darkBg → tokens.dark.bg).
+export const OVERRIDE_KEYS = [
+  'bg', 'ink', 'muted', 'line', 'accent', 'panel', 'soft', 'width', 'wideWidth',
+  'button', 'scheme', 'radius', 'elevation', 'density', 'header', 'footer', 'blogLayout',
+] as const;
+export const DARK_OVERRIDE_KEYS = {
+  darkBg: 'bg', darkInk: 'ink', darkMuted: 'muted', darkLine: 'line',
+  darkAccent: 'accent', darkPanel: 'panel', darkSoft: 'soft',
+} as const;
 
 // Post-page display options. Themes set defaults in theme.json under `post`;
 // the Design screen overrides individual fields via designOverrides
 // (postCover: 'normal'|'full'|'hidden', the rest as 'show'|'hide' strings).
-export const PostOptions = z.object({
-  cover: z.enum(['normal', 'full', 'overlay', 'hidden']).default('normal'),
-  showDate: z.boolean().default(true),
-  showReadingTime: z.boolean().default(true),
-  byline: z.boolean().default(true),
-  authorCard: z.boolean().default(true),
-  share: z.boolean().default(true),
-  related: z.boolean().default(true),
-});
+export { PostOptions } from '../theme-sdk/contract.mjs';
+import { PostOptions } from '../theme-sdk/contract.mjs';
 export type PostOptions = z.infer<typeof PostOptions>;
 
 // override key in designOverrides → PostOptions boolean field
@@ -52,11 +41,14 @@ const POST_TOGGLES: [string, keyof PostOptions][] = [
   ['postAuthorCard', 'authorCard'],
   ['postShare', 'share'],
   ['postRelated', 'related'],
+  ['postProgress', 'progress'],
+  ['postToc', 'toc'],
 ];
 
 // Curated heading/body pairings the UI can swap in (override key: fontPairing).
 // Agent-authored themes set headingFont/bodyFont/googleFonts directly instead.
 export const FONT_PAIRINGS = [
+  { key: 'geist', label: 'Geist (modern sans)', headingFont: "'Geist', ui-sans-serif, system-ui, sans-serif", bodyFont: "'Geist', ui-sans-serif, system-ui, sans-serif", googleFonts: 'family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500' },
   { key: 'inter', label: 'Inter (sans)', headingFont: "'Inter', system-ui, sans-serif", bodyFont: "'Inter', system-ui, sans-serif", googleFonts: 'family=Inter:wght@400;600;700' },
   { key: 'fraunces', label: 'Fraunces + Inter (editorial serif)', headingFont: "'Fraunces', Georgia, serif", bodyFont: "'Inter', system-ui, sans-serif", googleFonts: 'family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600' },
   { key: 'playfair', label: 'Playfair Display + Inter', headingFont: "'Playfair Display', Georgia, serif", bodyFont: "'Inter', system-ui, sans-serif", googleFonts: 'family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600' },
@@ -73,15 +65,20 @@ export interface Theme {
   tokens: ThemeTokens;
   post: PostOptions;
   css: string;
+  version: string;
+  sections: ReturnType<typeof sectionDefinitions>;
+  sectionTemplates: Record<string, unknown>;
   // Astro component (module default) when the theme ships templates/home.astro
   HomeTemplate: unknown | null;
   // optional per-document templates: templates/post-<name>.astro and
   // templates/page-<name>.astro, selectable in the editor sidebar
   postTemplates: Record<string, unknown>;
   pageTemplates: Record<string, unknown>;
+  // templates/event.astro replaces the built-in event page layout
+  EventTemplate: unknown | null;
 }
 
-interface ThemeJson { name?: string; description?: string; tokens?: Record<string, unknown>; post?: Record<string, unknown> }
+interface ThemeJson { sections?: Record<string, unknown>; version?: string; name?: string; description?: string; tokens?: Record<string, unknown>; post?: Record<string, unknown> }
 
 // Built-in themes ship inside the package (relative globs); project themes
 // come from the consumer's src/themes via the integration's virtual module
@@ -89,11 +86,13 @@ interface ThemeJson { name?: string; description?: string; tokens?: Record<strin
 // theme whose slug matches a built-in replaces it.
 import * as user from 'virtual:acms-user-themes';
 
+const assets = import.meta.glob(['../themes/*/assets/**/*', '!**/.img-subir-originals/**'], { eager: true, query: '?url', import: 'default' }) as Record<string, string>;
 const jsons = import.meta.glob('../themes/*/theme.json', { eager: true, import: 'default' }) as Record<string, ThemeJson>;
 const csses = import.meta.glob('../themes/*/theme.css', { eager: true, query: '?raw', import: 'default' }) as Record<string, string>;
 const homes = import.meta.glob('../themes/*/templates/home.astro', { eager: true }) as Record<string, { default: unknown }>;
 const postTpls = import.meta.glob('../themes/*/templates/post-*.astro', { eager: true }) as Record<string, { default: unknown }>;
 const pageTpls = import.meta.glob('../themes/*/templates/page-*.astro', { eager: true }) as Record<string, { default: unknown }>;
+const eventTpls = import.meta.glob('../themes/*/templates/event.astro', { eager: true }) as Record<string, { default: unknown }>;
 
 // works for both '../themes/<slug>/…' and '/src/themes/<slug>/…'
 const slugOf = (path: string) => /themes\/([^/]+)\//.exec(path)?.[1] ?? path.split('/')[2];
@@ -115,31 +114,46 @@ function buildThemes(
   cssMap: Record<string, string>,
   homeMap: Record<string, { default: unknown }>,
   postMap: Record<string, { default: unknown }>,
-  pageMap: Record<string, { default: unknown }>
+  pageMap: Record<string, { default: unknown }>,
+  eventMap: Record<string, { default: unknown }> = {}
 ): Theme[] {
   return Object.entries(jsonMap).map(([path, raw]) => {
     const slug = slugOf(path);
+    const manifest = ThemeManifest.parse({ ...raw, name: raw.name ?? slug });
+    const customSections = (user as { sectionTpls?: Record<string, { default: unknown }> }).sectionTpls ?? {};
     return {
+      version: manifest.version,
+      sections: sectionDefinitions(manifest),
+      sectionTemplates: Object.fromEntries(Object.entries(manifest.sections).flatMap(([key, definition]) => {
+        const component = (definition as {component?: string}).component;
+        const match = component && Object.entries(customSections).find(([p]) => p.endsWith(`/themes/${slug}/${component}`));
+        return match ? [[key, match[1].default]] : [];
+      })),
       slug,
       name: raw.name ?? slug,
       description: raw.description ?? '',
       tokens: ThemeTokens.parse(raw.tokens ?? {}),
       post: PostOptions.parse(raw.post ?? {}),
-      css: Object.entries(cssMap).find(([p]) => slugOf(p) === slug)?.[1] ?? '',
+      css: (Object.entries(cssMap).find(([p]) => slugOf(p) === slug)?.[1] ?? '').replace(/url\(\s*['"]?(?:\.\/)?(assets\/[^)'"\s]+)['"]?\s*\)/g, (original, file) => {
+        const asset = Object.entries({ ...assets, ...((user as { assets?: Record<string,string> }).assets ?? {}) }).find(([p]) => p.endsWith(`/themes/${slug}/${file}`));
+        return asset ? `url(${asset[1]})` : original;
+      }),
       HomeTemplate: Object.entries(homeMap).find(([p]) => slugOf(p) === slug)?.[1]?.default ?? null,
       postTemplates: templatesFor(slug, postMap, 'post'),
       pageTemplates: templatesFor(slug, pageMap, 'page'),
+      EventTemplate: Object.entries(eventMap).find(([p]) => slugOf(p) === slug)?.[1]?.default ?? null,
     };
   });
 }
 
-const builtins = buildThemes(jsons, csses, homes, postTpls, pageTpls);
+const builtins = buildThemes(jsons, csses, homes, postTpls, pageTpls, eventTpls);
 const projectThemes = buildThemes(
   user.jsons as Record<string, ThemeJson>,
   user.csses,
   user.homes,
   user.postTpls,
-  user.pageTpls
+  user.pageTpls,
+  (user as { eventTpls?: Record<string, { default: unknown }> }).eventTpls ?? {}
 );
 const projectSlugs = new Set(projectThemes.map((t) => t.slug));
 
@@ -160,6 +174,7 @@ export interface ResolvedDesign {
   tokens: ThemeTokens;
   post: PostOptions;
   css: string; // ready-to-inline <style> content: :root vars + theme.css
+  customDark: boolean; // theme/overrides supply a dark palette (vs generated)
   fontsHref: string | null;
   homeMode: 'auto' | 'content';
   HomeTemplate: unknown | null;
@@ -181,24 +196,28 @@ export function resolveDesign(settings: Settings): ResolvedDesign {
       merged.googleFonts = p.googleFonts;
     }
   }
-  const tokens = ThemeTokens.parse(merged);
+  const dark: Record<string, unknown> = { ...theme.tokens.dark };
+  for (const [key, field] of Object.entries(DARK_OVERRIDE_KEYS)) {
+    const v = o[key];
+    if (typeof v === 'string' && v) dark[field] = v;
+  }
+  merged.dark = dark;
+  // a bad stored override (stale enum value, junk width) must never take the
+  // site down: fall back to the theme's own tokens
+  const parsed = ThemeTokens.safeParse(merged);
+  const tokens = parsed.success ? parsed.data : theme.tokens;
   const post: PostOptions = { ...theme.post };
   if (o.postCover === 'normal' || o.postCover === 'full' || o.postCover === 'overlay' || o.postCover === 'hidden') post.cover = o.postCover;
   for (const [key, field] of POST_TOGGLES) {
     if (o[key] === 'show') (post[field] as boolean) = true;
     if (o[key] === 'hide') (post[field] as boolean) = false;
   }
-  const vars = [
-    `--bg:${tokens.bg}`, `--ink:${tokens.ink}`, `--muted:${tokens.muted}`,
-    `--line:${tokens.line}`, `--accent:${tokens.accent}`, `--panel:${tokens.panel}`,
-    `--soft:${tokens.soft}`, `--font-heading:${tokens.headingFont}`,
-    `--font-body:${tokens.bodyFont}`, `--content-width:${tokens.width}px`,
-  ].join(';');
   return {
     theme,
     tokens,
     post,
-    css: `:root{${vars}}\n${theme.css}`,
+    css: `${tokensCss(tokens)}\n${theme.css}`,
+    customDark: hasCustomDark(tokens),
     fontsHref: tokens.googleFonts ? `https://fonts.googleapis.com/css2?${tokens.googleFonts}&display=swap` : null,
     homeMode: o.homeMode === 'content' ? 'content' : 'auto',
     HomeTemplate: theme.HomeTemplate,

package/src/lib/themeTokens.ts

@@ -0,0 +1,174 @@
+import { z } from 'zod';
+
+// Theme token schema v2 + the CSS it compiles to. Pure (no Astro virtual
+// modules), so it's unit-tested directly; lib/theme.ts wires it to the
+// discovered themes and the Design-screen overrides.
+//
+// Every key is optional: a theme.json that sets four colors still gets a
+// complete design (shape, depth, dark palette, derived colors) from the
+// Ink v2 defaults below. Old (v1) theme.json files parse unchanged.
+
+import { DarkTokens, ThemeTokens } from '../theme-sdk/tokens.mjs';
+export { DarkTokens, ThemeTokens };
+export type DarkTokens = z.infer<typeof DarkTokens>;
+export type ThemeTokens = z.infer<typeof ThemeTokens>;
+
+export interface Palette {
+  bg: string; ink: string; muted: string; line: string; accent: string; panel: string; soft: string;
+}
+
+// ---- color math (sRGB hex only; anything else passes through untouched) ----
+
+type RGB = [number, number, number];
+
+export function parseHex(c: string): RGB | null {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? [...m[1]].map((x) => x + x).join('') : m[1];
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) as RGB;
+}
+
+const toHex = (rgb: RGB) =>
+  '#' + rgb.map((v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, '0')).join('');
+
+export function mix(a: string, b: string, t: number): string {
+  const x = parseHex(a), y = parseHex(b);
+  if (!x || !y) return a;
+  return toHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t) as RGB);
+}
+
+export function luminance(c: string): number {
+  const rgb = parseHex(c);
+  if (!rgb) return 0.5;
+  const [r, g, b] = rgb.map((v) => {
+    const s = v / 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;
+}
+
+export function contrast(a: string, b: string): number {
+  const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (l1 + 0.05) / (l2 + 0.05);
+}
+
+// Nudge `fg` toward `toward` until it reaches `min` contrast on `bg`. Used for
+// accent-as-text (links, "Featured", today) so any accent a user picks stays
+// readable. Unparseable colors are returned as-is.
+export function ensureContrast(fg: string, bg: string, min = 4.5, toward?: string): string {
+  if (!parseHex(fg) || !parseHex(bg)) return fg;
+  const target = toward ?? (luminance(bg) > 0.4 ? '#000000' : '#ffffff');
+  for (let t = 0; t <= 1.0001; t += 0.04) {
+    const c = mix(fg, target, t);
+    if (contrast(c, bg) >= min) return c;
+  }
+  return target;
+}
+
+export const isDarkColor = (c: string) => luminance(c) < 0.18;
+
+// ---- palettes ----
+
+// A dark palette from a light one: neutral charcoal surfaces carrying a whisper
+// of the light background's warmth, plus the accent lifted until it reads on
+// the dark canvas.
+export function autoDark(light: Palette): Palette {
+  const warm = (base: string, t: number) => mix(base, light.bg, t);
+  const bg = warm('#121316', 0.015);
+  return {
+    bg,
+    panel: warm('#1a1b1f', 0.02),
+    soft: warm('#222328', 0.02),
+    line: warm('#2a2b31', 0.02),
+    ink: warm('#eceae5', 0.2),
+    muted: '#9a9ca4',
+    accent: ensureContrast(light.accent, bg, 4.5, '#ffffff'),
+  };
+}
+
+export function darkPalette(t: ThemeTokens): Palette {
+  const light: Palette = { bg: t.bg, ink: t.ink, muted: t.muted, line: t.line, accent: t.accent, panel: t.panel, soft: t.soft };
+  const gen = autoDark(light);
+  const d = t.dark ?? {};
+  return {
+    bg: d.bg || gen.bg, ink: d.ink || gen.ink, muted: d.muted || gen.muted, line: d.line || gen.line,
+    accent: d.accent || gen.accent, panel: d.panel || gen.panel, soft: d.soft || gen.soft,
+  };
+}
+
+// true when the theme ships its own dark palette (vs. the generated one) —
+// the Design screen flags generated palettes so authors know to check them
+export const hasCustomDark = (t: ThemeTokens) => Object.values(t.dark ?? {}).some(Boolean);
+
+// ---- CSS ----
+
+const RADII: Record<ThemeTokens['radius'], [number, number, number]> = {
+  sharp: [3, 4, 6],
+  soft: [6, 8, 12],
+  round: [10, 16, 24],
+  smooth: [12, 20, 28],
+};
+
+const DENSITY: Record<ThemeTokens['density'], number> = { compact: 0.85, cozy: 1, airy: 1.18 };
+
+function shadows(elevation: ThemeTokens['elevation'], dark: boolean): [string, string, string] {
+  if (elevation === 'flat') return ['none', 'none', dark ? '0 16px 40px -16px rgb(0 0 0 / 70%)' : '0 16px 40px -16px rgb(0 0 0 / 22%)'];
+  const k = elevation === 'lifted' ? 1.6 : 1;
+  const a = (x: number) => `${Math.min(90, Math.round(x * k * (dark ? 5 : 1)))}%`;
+  const c = dark ? '0 0 0' : '23 24 28';
+  return [
+    `0 1px 2px rgb(${c} / ${a(5)})`,
+    `0 1px 2px rgb(${c} / ${a(4)}), 0 8px 24px -12px rgb(${c} / ${a(14)})`,
+    `0 2px 6px rgb(${c} / ${a(6)}), 0 24px 48px -20px rgb(${c} / ${a(28)})`,
+  ];
+}
+
+// Per-scheme variables: the palette, derived colors and shadows. Derived
+// values that need a contrast guarantee are computed here; purely cosmetic
+// ones use color-mix() so theme.css overrides of a base token cascade.
+export function paletteVars(p: Palette, t: ThemeTokens, dark: boolean): string[] {
+  const accentInk = t.accentInk || (contrast('#ffffff', p.accent) >= 4.5 ? '#ffffff' : ensureContrast('#111214', p.accent, 4.5));
+  const [s1, s2, s3] = shadows(t.elevation, dark);
+  const btnInk = t.button === 'accent' ? 'var(--accent-ink)' : 'var(--bg)';
+  return [
+    `--bg:${p.bg}`, `--ink:${p.ink}`, `--muted:${ensureContrast(p.muted, p.bg, 4.5)}`,
+    `--line:${p.line}`, `--accent:${p.accent}`, `--panel:${p.panel}`, `--soft:${p.soft}`,
+    `--accent-ink:${accentInk}`,
+    `--accent-text:${ensureContrast(p.accent, p.bg, 4.5)}`,
+    `--btn:${t.button === 'accent' ? 'var(--accent)' : 'var(--ink)'}`, `--btn-ink:${btnInk}`,
+    `--code-bg:${dark ? '#0d0e11' : '#1b1c21'}`,
+    `--success:${dark ? '#5cc98e' : '#127442'}`, `--danger:${dark ? '#f07b7b' : '#b42f2f'}`, `--warning:${dark ? '#e3b456' : '#8a5f0a'}`,
+    `--sh-1:${s1}`, `--sh-2:${s2}`, `--sh-3:${s3}`,
+    `color-scheme:${dark ? 'dark' : 'light'}`,
+  ];
+}
+
+// Scheme-independent variables: type, shape, rhythm, layout widths.
+export function staticVars(t: ThemeTokens): string[] {
+  const [r1, r2, r3] = RADII[t.radius];
+  return [
+    `--font-heading:${t.headingFont}`, `--font-body:${t.bodyFont}`, `--font-mono:${t.monoFont}`,
+    `--display-weight:${t.displayWeight}`, `--display-tracking:${t.displayTracking}`,
+    `--base-size:${t.baseSize}px`,
+    `--r-sm:${r1}px`, `--r:${r2}px`, `--r-lg:${r3}px`,
+    `--space:${DENSITY[t.density]}`,
+    `--content-width:${t.width}px`, `--wide-width:${t.wideWidth}px`,
+  ];
+}
+
+// The inline <style> body for the tokens: light and dark blocks wired to
+// data-scheme (visitor toggle) and prefers-color-scheme (OS default).
+export function tokensCss(t: ThemeTokens): string {
+  const light: Palette = { bg: t.bg, ink: t.ink, muted: t.muted, line: t.line, accent: t.accent, panel: t.panel, soft: t.soft };
+  const dark = darkPalette(t);
+  const stat = staticVars(t).join(';');
+  const L = paletteVars(light, t, false).join(';');
+  const D = paletteVars(dark, t, true).join(';');
+  if (t.scheme === 'light') return `:root{${stat};${L}}`;
+  if (t.scheme === 'dark') return `:root{${stat};${D}}`;
+  return [
+    `:root{${stat};${L}}`,
+    `:root[data-scheme=dark]{${D}}`,
+    `@media (prefers-color-scheme:dark){:root:not([data-scheme=light]){${D}}}`,
+  ].join('\n');
+}

package/src/lib/umami.ts

@@ -0,0 +1,108 @@
+// Read-side Umami client for the admin dashboard and content rows. The public
+// site only *sends* to Umami (lib/analytics.ts); reading stats needs an API
+// credential that never reaches the browser:
+//   UMAMI_API_KEY   — Umami Cloud API key (x-umami-api-key)
+//   UMAMI_API_TOKEN — self-hosted bearer token (from POST /api/auth/login)
+// The API base is the tracker script's origin + /api (UMAMI_API_URL overrides).
+// Every call fails soft: no credential, a network error, or an unexpected
+// shape returns null and the admin simply hides the numbers.
+import type { Settings } from './schema';
+import { env } from './env';
+import { UMAMI_ID_RE, normalizeScriptUrl } from './analytics';
+
+export interface TrafficSummary {
+  visitors: number;
+  visitorsPrev: number;
+  pageviews: number;
+  pageviewsPrev: number;
+  avgSeconds: number;
+  series: { t: number; views: number; visitors: number }[];
+  topPaths: { path: string; views: number }[];
+}
+
+const TTL = 10 * 60_000;
+const cache = new Map<string, { at: number; value: TrafficSummary | null }>();
+
+function config(settings: Settings) {
+  const u = settings.analytics?.umami;
+  if (!u?.enabled || !UMAMI_ID_RE.test(u.websiteId)) return null;
+  const key = env('UMAMI_API_KEY');
+  const token = env('UMAMI_API_TOKEN');
+  if (!key && !token) return null;
+  let base = env('UMAMI_API_URL') || '';
+  if (!base) {
+    const src = normalizeScriptUrl(u.scriptUrl);
+    if (!src) return null;
+    const origin = new URL(src).origin;
+    base = origin === 'https://cloud.umami.is' ? 'https://api.umami.is/v1' : `${origin}/api`;
+  }
+  const headers: Record<string, string> = { accept: 'application/json' };
+  if (key) headers['x-umami-api-key'] = key;
+  else headers.authorization = `Bearer ${token}`;
+  return { base: base.replace(/\/+$/, ''), id: u.websiteId.toLowerCase(), headers, tz: settings.timezone || 'UTC' };
+}
+
+export function umamiReadEnabled(settings: Settings): boolean {
+  return config(settings) !== null;
+}
+
+// Umami ≥2.13 returns { pageviews: 12, comparison: { pageviews: 9 } };
+// older versions return { pageviews: { value: 12, prev: 9 } }.
+function stat(body: any, name: string): [number, number] {
+  const v = body?.[name];
+  if (v && typeof v === 'object') return [Number(v.value) || 0, Number(v.prev) || 0];
+  return [Number(v) || 0, Number(body?.comparison?.[name]) || 0];
+}
+
+export async function getTraffic(settings: Settings, days = 30): Promise<TrafficSummary | null> {
+  const c = config(settings);
+  if (!c) return null;
+  const cacheKey = `${c.id}:${days}`;
+  const hit = cache.get(cacheKey);
+  if (hit && Date.now() - hit.at < TTL) return hit.value;
+
+  const endAt = Date.now();
+  const startAt = endAt - days * 86_400_000;
+  const q = `startAt=${startAt}&endAt=${endAt}`;
+  const get = async (path: string) => {
+    const res = await fetch(`${c.base}/websites/${c.id}/${path}`, { headers: c.headers, signal: AbortSignal.timeout(4000) });
+    if (!res.ok) throw new Error(`umami ${res.status}`);
+    return res.json();
+  };
+  let value: TrafficSummary | null = null;
+  try {
+    const [stats, pv, urls] = await Promise.all([
+      get(`stats?${q}`),
+      get(`pageviews?${q}&unit=day&timezone=${encodeURIComponent(c.tz)}`),
+      get(`metrics?${q}&type=url&limit=50`).catch(() => []),
+    ]);
+    const [pageviews, pageviewsPrev] = stat(stats, 'pageviews');
+    const [visitors, visitorsPrev] = stat(stats, 'visitors');
+    const [visits] = stat(stats, 'visits');
+    const [totaltime] = stat(stats, 'totaltime');
+    const views = new Map<number, number>();
+    const sess = new Map<number, number>();
+    for (const p of pv?.pageviews ?? []) views.set(new Date(p.x).getTime(), Number(p.y) || 0);
+    for (const p of pv?.sessions ?? []) sess.set(new Date(p.x).getTime(), Number(p.y) || 0);
+    const series = [...views.keys()].sort((a, b) => a - b).map((t) => ({ t, views: views.get(t) ?? 0, visitors: sess.get(t) ?? 0 }));
+    value = {
+      visitors,
+      visitorsPrev,
+      pageviews,
+      pageviewsPrev,
+      avgSeconds: visits ? Math.round(totaltime / visits) : 0,
+      series,
+      topPaths: (Array.isArray(urls) ? urls : []).map((u: any) => ({ path: String(u.x ?? ''), views: Number(u.y) || 0 })),
+    };
+  } catch {
+    value = null;
+  }
+  cache.set(cacheKey, { at: Date.now(), value });
+  return value;
+}
+
+/** views per public path over the window, for content rows */
+export async function viewsByPath(settings: Settings): Promise<Map<string, number>> {
+  const t = await getTraffic(settings, 30);
+  return new Map((t?.topPaths ?? []).map((p) => [p.path.replace(/\/+$/, '') || '/', p.views]));
+}