mockpit 3.0.0 → 3.1.0

package/dist/server/systemChecks.d.ts

@@ -0,0 +1,15 @@
+import { type Scale, type System } from "./system.ts";
+export declare function classesDefined(css: string): Set<string>;
+export interface PairResult {
+    palette: string;
+    mode: "light" | "dark";
+    fg: string;
+    bg: string;
+    min: number;
+    ratio: number | null;
+}
+export declare function pairResults(system: System, all?: boolean): PairResult[];
+export declare function systemChecks(system: System): string[];
+export declare function zoomFailures(scale: Scale): string[];
+export declare function pageChecks(system: System, htmls: string[], what?: string): string[];
+export declare function purposeNudge(slug: string, notes: string | null | undefined): string | null;

package/dist/server/systemChecks.js

@@ -0,0 +1,224 @@
+// What mockpit checks against a project's system, by string: on a `system`
+// write (the system against itself) and on a publish (a page against the
+// system). Pure and runtime-agnostic. Every check comes back as a nudge line,
+// one per kind, with a count and the first instances; none blocks a write.
+import { contrastRatio } from "./contrast.js";
+import { declaredNames, isColorValue, scaleSteps, TEXT_FIELDS, } from "./system.js";
+const FIRST = 3;
+const firstOf = (items) => `${items.slice(0, FIRST).join(", ")}${items.length > FIRST ? `, +${items.length - FIRST} more` : ""}`;
+const stripComments = (css) => css.replace(/\/\*[\s\S]*?\*\//g, "");
+// `var(--x)` names a stylesheet reads.
+function varsRead(css) {
+    const out = new Set();
+    for (const m of stripComments(css).matchAll(/var\(\s*--([\w-]+)/g))
+        out.add(m[1]);
+    return out;
+}
+// Custom properties a stylesheet declares.
+function varsDeclared(css) {
+    const out = new Set();
+    for (const m of stripComments(css).matchAll(/(?:^|[{;\s])--([\w-]+)\s*:/g))
+        out.add(m[1]);
+    return out;
+}
+// Class selectors a stylesheet defines rules for.
+export function classesDefined(css) {
+    const out = new Set();
+    const bare = stripComments(css).replace(/\{[^{}]*\}/g, "{}");
+    for (const m of bare.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g))
+        out.add(m[1]);
+    return out;
+}
+// Top-level `selector{declarations}` rules, by normalized selector and body.
+function flatRules(css) {
+    const out = new Map();
+    const norm = (x) => x
+        .replace(/\s+/g, " ")
+        .replace(/\s*([{};:,>])\s*/g, "$1")
+        .trim();
+    for (const m of stripComments(css).matchAll(/([^{}@;]+)\{([^{}]*)\}/g)) {
+        out.set(norm(m[1]), norm(m[2]).replace(/;$/, ""));
+    }
+    return out;
+}
+// Every declared pair in every palette and mode. A value contrast.ts can't
+// resolve is null: unchecked, never passed.
+// Hidden palettes are left out unless `all`: the System page shows every palette's.
+export function pairResults(system, all = false) {
+    const constants = new Map(system.tokens
+        .filter((t) => t.type === "color" && typeof t.value === "string")
+        .map((t) => [t.name, t.value]));
+    const out = [];
+    const palettes = system.color.palettes.filter((p) => all || p.status !== "hidden");
+    for (const p of palettes.length ? palettes : [null]) {
+        for (const mode of ["light", "dark"]) {
+            const value = (name) => p?.[mode][name] ?? constants.get(name);
+            for (const [fg, bg, min] of system.color.pairs) {
+                const f = value(fg);
+                const b = value(bg);
+                out.push({
+                    palette: p?.id ?? "",
+                    mode,
+                    fg,
+                    bg,
+                    min,
+                    ratio: f && b ? contrastRatio(f, b) : null,
+                });
+            }
+        }
+    }
+    return out;
+}
+export function systemChecks(system) {
+    const out = [];
+    const known = declaredNames(system);
+    const roleNames = system.color.roles.map((r) => r.name);
+    const results = pairResults(system);
+    const failing = results.filter((r) => r.ratio !== null && r.ratio < r.min);
+    if (failing.length)
+        out.push(`contrast: ${failing.length} pair${failing.length === 1 ? "" : "s"} below their minimum: ${firstOf(failing.map((r) => `${r.fg} on ${r.bg} ${r.ratio.toFixed(2)}:1 < ${r.min} (${r.palette || "tokens"} ${r.mode})`))}`);
+    const unchecked = results.filter((r) => r.ratio === null);
+    if (unchecked.length)
+        out.push(`contrast: ${unchecked.length} pair${unchecked.length === 1 ? "" : "s"} unchecked (a value that isn't hex, rgb, hsl, oklch or oklab, or a missing one): ${firstOf(unchecked.map((r) => `${r.fg} on ${r.bg} (${r.palette || "tokens"} ${r.mode})`))}`);
+    const missing = [];
+    for (const p of system.color.palettes) {
+        for (const mode of ["light", "dark"]) {
+            const lacks = roleNames.filter((r) => p[mode][r] === undefined);
+            if (lacks.length)
+                missing.push(`${p.id} ${mode} lacks ${lacks.slice(0, 4).join(", ")}${lacks.length > 4 ? "…" : ""}`);
+        }
+    }
+    if (missing.length)
+        out.push(`palettes missing a role: ${firstOf(missing)}`);
+    const strangers = system.color.palettes.flatMap((p) => Object.keys(p.light)
+        .filter((k) => !roleNames.includes(k))
+        .map((k) => `${p.id}.${k}`));
+    if (strangers.length && roleNames.length)
+        out.push(`palette values for no declared role: ${firstOf(strangers)} (declare them in roles)`);
+    const unknownPairs = system.color.pairs
+        .flatMap(([fg, bg]) => [fg, bg])
+        .filter((n) => !known.has(n));
+    if (unknownPairs.length)
+        out.push(`pairs name unknown tokens: ${firstOf([...new Set(unknownPairs)])}`);
+    for (const [token, role] of Object.entries(system.color.as ?? {})) {
+        if (!known.has(role))
+            out.push(`as.${token} points at "${role}", which nothing declares`);
+    }
+    const sheet = system.sheet?.css ?? "";
+    if (sheet) {
+        const own = varsDeclared(sheet);
+        const undeclared = [...varsRead(sheet)].filter((v) => !known.has(v) &&
+            !own.has(v) &&
+            !v.startsWith("k-") &&
+            !TEXT_FIELDS.some((f) => v.endsWith(`-${f}`) && known.has(v.slice(0, -f.length - 1))));
+        if (undeclared.length)
+            out.push(`sheet reads var(--…) that neither the system nor the sheet declares (fine if every page sets them): ${firstOf(undeclared.map((v) => `--${v}`))}`);
+        const defined = classesDefined(sheet);
+        const missingClasses = (system.sheet?.classes ?? [])
+            .map((c) => c.name)
+            .filter((c) => !defined.has(c));
+        if (missingClasses.length)
+            out.push(`indexed classes the sheet doesn't define: ${firstOf(missingClasses.map((c) => `.${c}`))}`);
+        const important = (stripComments(sheet).match(/!important/g) ?? []).length;
+        if (important)
+            out.push(`sheet uses !important ${important}×: inside a layer it beats every page rule, the opposite of what it does elsewhere`);
+    }
+    for (const scale of system.scales) {
+        const fails = zoomFailures(scale);
+        if (fails.length)
+            out.push(`scale ${scale.id} fails 200% zoom (WCAG 1.4.4): ${firstOf(fails)}; keep each step's largest size within 2.5× its smallest`);
+    }
+    return out;
+}
+// A fluid step whose largest size is past 2.5× its smallest can't reach 200%
+// at every width with browser zoom: the vw part doesn't grow with it.
+export function zoomFailures(scale) {
+    if (scale.family !== "type" || !scale.fluid)
+        return [];
+    return scaleSteps(scale)
+        .filter(({ min, max }) => Math.max(min, max) > 2.5 * Math.min(min, max))
+        .map(({ step, min, max }) => `${step} ${min}px → ${max}px`);
+}
+// --- a page against the system ----------------------------------------------------------
+const COLOR_LITERAL_RE = /#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\([^()]*\)/g;
+const STYLE_BLOCK_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+const STYLE_ATTR_RE = /\sstyle\s*=\s*("([^"]*)"|'([^']*)')/gi;
+// The CSS a page carries: its style blocks and style attributes.
+function pageCss(html) {
+    const blocks = [...html.matchAll(STYLE_BLOCK_RE)].map((m) => m[1]).join("\n");
+    const inline = [...html.matchAll(STYLE_ATTR_RE)].map((m) => m[2] ?? m[3] ?? "").join(";\n");
+    return { blocks, inline };
+}
+const pxOf = (v) => {
+    const m = /^(-?\d*\.?\d+)(px|rem)$/.exec(v.trim());
+    if (!m)
+        return null;
+    return m[2] === "rem" ? Number(m[1]) * 16 : Number(m[1]);
+};
+export function pageChecks(system, htmls, what = "page") {
+    const out = [];
+    const css = htmls.map(pageCss);
+    const all = css.map((c) => `${c.blocks}\n${c.inline}`).join("\n");
+    if (!all.trim())
+        return out;
+    const bare = stripComments(all);
+    const hasColour = system.color.palettes.length > 0 || system.tokens.some((t) => t.type === "color");
+    if (hasColour) {
+        const literals = [...bare.replace(/--[\w-]+\s*:[^;}]*/g, "").matchAll(COLOR_LITERAL_RE)]
+            .map((m) => m[0])
+            .filter((v) => isColorValue(v));
+        if (literals.length)
+            out.push(`${what} has ${literals.length} colour literal${literals.length === 1 ? "" : "s"} where the system has colours: ${firstOf([...new Set(literals)])}; use a role or token`);
+    }
+    const own = new Set([
+        ...system.tokens.filter((t) => t.owner !== "repo").map((t) => t.name),
+        ...system.color.roles.map((r) => r.name),
+    ]);
+    const redeclared = [...varsDeclared(bare)].filter((v) => own.has(v));
+    if (redeclared.length)
+        out.push(`${what} redeclares system names: ${firstOf(redeclared.map((v) => `--${v}`))}; change them in the system`);
+    // A rule copied from the sheet, same selector and same body, is the inlined
+    // kit habit; a page restyling a sheet class is an override, which is fine.
+    const sheetRules = flatRules(system.sheet?.css ?? "");
+    if (sheetRules.size) {
+        const copied = [...flatRules(css.map((c) => c.blocks).join("\n"))].filter(([selector, body]) => sheetRules.get(selector) === body);
+        if (copied.length)
+            out.push(`${what} copies ${copied.length} rule${copied.length === 1 ? "" : "s"} the system sheet already has: ${firstOf(copied.map(([sel]) => sel))}; the sheet is in every frame, so drop the copy`);
+    }
+    const typeScale = system.scales.filter((s) => s.family === "type");
+    const spaceScale = system.scales.filter((s) => s.family === "space");
+    const sizes = (scales) => scales.flatMap((s) => scaleSteps(s).flatMap(({ min, max }) => [min, max]));
+    // A plain dimension token is a size the system declares too.
+    const dimensions = system.tokens.flatMap((t) => t.type === "dimension" && !t.scale && typeof t.value === "string"
+        ? [pxOf(t.value)].filter((x) => x !== null)
+        : []);
+    const offScale = (prop, scales, label, extra = []) => {
+        if (!scales.length)
+            return;
+        const allowed = [...sizes(scales), ...extra];
+        const off = [];
+        for (const m of bare.matchAll(prop)) {
+            for (const part of m[1].trim().split(/\s+/)) {
+                const px = pxOf(part);
+                if (px === null || px === 0)
+                    continue;
+                // A negative margin pulls by a step of the scale.
+                if (!allowed.some((a) => Math.abs(a - Math.abs(px)) < 0.6))
+                    off.push(part);
+            }
+        }
+        if (off.length)
+            out.push(`${what} has ${off.length} ${label} value${off.length === 1 ? "" : "s"} off the ${scales.map((s) => s.id).join("/")} scale: ${firstOf([...new Set(off)])}; use var(--${scales[0].prefix}-…)`);
+    };
+    offScale(/font-size\s*:\s*([^;}"']+)/gi, typeScale, "font-size");
+    offScale(/(?:^|[;{\s])(?:gap|row-gap|column-gap|margin(?:-[a-z]+)?|padding(?:-[a-z]+)?)\s*:\s*([^;}"']+)/gi, spaceScale, "spacing", dimensions);
+    return out;
+}
+// A component's notes should open with one line saying what it is for: the
+// brief's component index prints that line.
+export function purposeNudge(slug, notes) {
+    const first = (notes ?? "").split("\n")[0].trim();
+    if (first && first.length <= 100)
+        return null;
+    return `give ${slug} a one-line purpose as the first line of its notes (\`edit --notes\`); the brief lists it${first ? ` (now ${first.length} characters, at most 100)` : ""}`;
+}

package/dist/server/systemSpecimen.d.ts

@@ -0,0 +1,2 @@
+import { type System } from "./system.ts";
+export declare function specimenHtml(system: System): string;

package/dist/server/systemSpecimen.js

@@ -0,0 +1,49 @@
+// The System place's type and space specimen: the scales drawn with the project's
+// own fonts and tokens, so it is a document of its own, rendered through
+// renderHtmlPage and served under the sandbox CSP like any surface. Names and
+// values are agent data: they go in as escaped text and as `var(--name)` of names
+// the system already validated. Runtime-agnostic.
+import { escapeHtml } from "./surfacePage.js";
+import { scaleSteps } from "./system.js";
+const SAMPLE = "Every render wears it";
+const CSS = `
+body{margin:0;padding:16px 20px;font-family:var(--font-sans,system-ui);color:var(--color-text-primary)}
+.sp-h{font:600 11px/1.4 var(--font-mono,ui-monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-tertiary);margin:18px 0 8px}
+.sp-h:first-child{margin-top:0}
+.sp-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;align-items:baseline;gap:12px;padding:4px 0}
+.sp-lb{font:400 12px/1.4 var(--font-mono,ui-monospace);color:var(--color-text-secondary);white-space:nowrap}
+.sp-lb b{font-weight:400;color:var(--color-text-tertiary)}
+.sp-tx{line-height:1.15;overflow-wrap:anywhere}
+.sp-bar{display:block;height:12px;border-radius:2px;background:var(--color-text-info,currentColor);opacity:.7}
+.sp-none{font-size:13px;color:var(--color-text-secondary)}
+`;
+// Each label's px follows the frame's width, so a fluid step reads what it is here.
+const MEASURE_JS = `<script>(function(){function m(){document.querySelectorAll("[data-sp]").forEach(function(r){var t=r.querySelector("[data-sp-of]");var o=r.querySelector("b");if(!t||!o)return;var cs=getComputedStyle(t);var v=r.getAttribute("data-sp")==="space"?t.getBoundingClientRect().width:parseFloat(cs.fontSize);o.textContent=" "+Math.round(v*10)/10+"px"})}addEventListener("load",m);addEventListener("resize",m)})();</script>`;
+export function specimenHtml(system) {
+    const out = [`<style>${CSS}</style>`];
+    const type = system.scales.filter((s) => s.family === "type");
+    const space = system.scales.filter((s) => s.family === "space");
+    for (const scale of type) {
+        out.push(`<div class="sp-h">${escapeHtml(scale.id)}</div>`);
+        for (const { step } of [...scaleSteps(scale)].reverse()) {
+            const name = `${scale.prefix}-${step}`;
+            out.push(`<div class="sp-row" data-sp="type"><span class="sp-lb">--${escapeHtml(name)}<b></b></span><span class="sp-tx" data-sp-of style="font-size:var(--${name})">${SAMPLE}</span></div>`);
+        }
+    }
+    for (const scale of space) {
+        out.push(`<div class="sp-h">${escapeHtml(scale.id)}</div>`);
+        for (const { step } of scaleSteps(scale)) {
+            const name = `${scale.prefix}-${step}`;
+            out.push(`<div class="sp-row" data-sp="space"><span class="sp-lb">--${escapeHtml(name)}<b></b></span><span><i class="sp-bar" data-sp-of style="width:var(--${name})"></i></span></div>`);
+        }
+    }
+    if (system.fonts.length)
+        out.push(`<div class="sp-h">fonts</div>`);
+    for (const f of system.fonts) {
+        out.push(`<div class="sp-row"><span class="sp-lb">${escapeHtml(f.family)}</span><span class="sp-tx" style="font-family:${escapeHtml(JSON.stringify(f.family))};font-size:20px">${SAMPLE}</span></div>`);
+    }
+    if (out.length === 1)
+        out.push(`<p class="sp-none">No scales or fonts yet.</p>`);
+    out.push(MEASURE_JS);
+    return out.join("\n");
+}

package/dist/server/themes.d.ts

@@ -5,7 +5,7 @@ export interface Accent {
     solid?: string;
     onSolid?: string;
 }
-export interface Palette {
+export interface ChromeColors {
     bg: string;
     panel: string;
     surface: string;
@@ -27,10 +27,11 @@ export interface Theme {
         light: string;
         dark: string;
     };
-    light: Palette;
-    dark: Palette;
+    light: ChromeColors;
+    dark: ChromeColors;
 }
 export type Mode = "light" | "dark";
+export declare const CHROME_TOKENS: readonly ["color-background-primary", "color-background-secondary", "color-background-tertiary", "color-background-info", "color-background-success", "color-background-warning", "color-background-danger", "color-text-primary", "color-text-secondary", "color-text-tertiary", "color-text-info", "color-text-success", "color-text-warning", "color-text-danger", "color-border-primary", "color-border-secondary", "color-border-tertiary", "color-border-info", "color-border-success", "color-border-warning", "color-border-danger"];
 export declare function schemeCss(light: Record<string, string>, dark: Record<string, string>, mode?: Mode): string;
 export declare function viewerThemeCss(t: Theme, mode?: Mode): string;
 export declare function tokenThemeCss(t: Theme, mode?: Mode): string;
@@ -44,7 +45,8 @@ export declare const themeOptions: () => {
     id: string;
     label: string;
 }[];
-export declare function paletteFromCssVars(cssVars: string): {
-    light: Palette;
-    dark: Palette;
-} | null;
+export declare function normalizeCssColor(raw: string): string | null;
+export declare function repoCustomProps(css: string): {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+};

package/dist/server/themes.js

@@ -54,6 +54,30 @@ function tokenVars(p) {
         "color-border-danger": p.danger.border,
     };
 }
+// The names of mockpit's own html tokens, reserved in a project's system.
+export const CHROME_TOKENS = [
+    "color-background-primary",
+    "color-background-secondary",
+    "color-background-tertiary",
+    "color-background-info",
+    "color-background-success",
+    "color-background-warning",
+    "color-background-danger",
+    "color-text-primary",
+    "color-text-secondary",
+    "color-text-tertiary",
+    "color-text-info",
+    "color-text-success",
+    "color-text-warning",
+    "color-text-danger",
+    "color-border-primary",
+    "color-border-secondary",
+    "color-border-tertiary",
+    "color-border-info",
+    "color-border-success",
+    "color-border-warning",
+    "color-border-danger",
+];
 // Terminal chrome. Always sourced from the theme's DARK palette (a terminal
 // reads as a terminal — ANSI output assumes a dark backdrop — so it stays dark
 // in light mode too), but tinted to the theme so it doesn't look foreign.
@@ -159,23 +183,15 @@ export function themeById(_id) {
     return DIALKIT;
 }
 export const themeOptions = () => THEMES.map((t) => ({ id: t.id, label: t.label }));
-// --- Imported project palettes -------------------------------------------
+// --- A repo's own custom properties -----------------------------------------
 //
-// `mockpit init` reads a repo's own design tokens (a `:root{}` / `@theme`
-// block from Tailwind or shadcn) and stores them per project. The raw text is
-// injected verbatim into the html-surface sandbox, but the VIEWER chrome and
-// the `--color-*` contract still need a Palette — so the recognised token
-// names are mapped onto one here, runtime-agnostic like the rest of this file.
-//
-// Anything the repo doesn't declare falls back per field to the default theme,
-// so a partial import can never leave a color undefined (an undefined token
-// renders as unstyled black-on-white, which reads as "mockpit is broken"
-// rather than "your repo declares no border color").
+// `mockpit init` stores a repo's raw `:root{}` / `.dark{}` / `@theme{}` text per
+// project; the system (server/system.ts) types what it can of it.
 // Colour values arrive in three dialects: real CSS colors (`#fff`,
 // `oklch(...)`), shadcn's channel-only triplets (`0 0% 100%`, meant to be
 // wrapped by `hsl(var(--x))` at the use site), and bare rgb triplets. Only the
 // first is usable as-is, so the other two are re-wrapped into a function.
-function normalizeCssColor(raw) {
+export function normalizeCssColor(raw) {
     const v = raw.trim().replace(/\s*!important$/, "");
     if (!v)
         return null;
@@ -240,86 +256,23 @@ function readCustomProps(declarations) {
         vars[m[1]] = m[2].trim();
     return vars;
 }
-// Ordered lookup: first declared name wins, so a repo that defines both
-// `--card` and `--background` gets the more specific one for a surface.
-function pick(vars, names) {
-    for (const name of names) {
-        const raw = vars[name];
-        if (raw == null)
-            continue;
-        const color = normalizeCssColor(raw);
-        if (color)
-            return color;
-    }
-    return null;
-}
-function accentFrom(vars, bg, text, border, fallback) {
-    const ink = pick(vars, text);
-    return {
-        bg: pick(vars, bg) ?? fallback.bg,
-        text: ink ?? fallback.text,
-        border: pick(vars, border) ?? fallback.border,
-        // The default's solid pair belongs to the default's ink; a repo's own ink
-        // fills with itself.
-        ...(ink ? {} : { solid: fallback.solid, onSolid: fallback.onSolid }),
-    };
-}
-function paletteFrom(vars, fallback) {
-    return {
-        bg: pick(vars, ["background", "color-background", "body-background"]) ?? fallback.bg,
-        panel: pick(vars, ["muted", "secondary", "color-muted", "popover"]) ?? fallback.panel,
-        surface: pick(vars, ["card", "popover", "background", "color-background"]) ?? fallback.surface,
-        text: pick(vars, ["foreground", "color-foreground", "card-foreground"]) ?? fallback.text,
-        muted: pick(vars, ["muted-foreground", "secondary-foreground"]) ?? fallback.muted,
-        faint: pick(vars, ["muted-foreground", "secondary-foreground"]) ?? fallback.faint,
-        border: pick(vars, ["border", "color-border", "input"]) ?? fallback.border,
-        border2: pick(vars, ["input", "ring", "border", "color-border"]) ?? fallback.border2,
-        hover: pick(vars, ["accent", "muted", "secondary"]) ?? fallback.hover,
-        // `info` doubles as the accent/link color everywhere in the viewer, so it
-        // is the one that must track the project's brand: primary for ink, accent
-        // for the wash, ring for the focus edge.
-        info: accentFrom(vars, ["accent", "primary-foreground", "secondary"], ["primary", "ring", "accent-foreground"], ["ring", "primary", "border"], fallback.info),
-        // Tailwind/shadcn ship no success or warning token, so these stay on the
-        // default theme unless a repo happens to declare them.
-        success: accentFrom(vars, ["success-background", "success-bg"], ["success", "success-foreground"], ["success-border", "success"], fallback.success),
-        warning: accentFrom(vars, ["warning-background", "warning-bg"], ["warning", "warning-foreground"], ["warning-border", "warning"], fallback.warning),
-        danger: accentFrom(vars, ["destructive-background", "destructive-bg", "danger-bg"], ["destructive", "danger", "destructive-foreground"], ["destructive-border", "destructive", "danger"], fallback.danger),
-    };
-}
-// Map a repo's CSS custom properties onto the two Palettes a theme needs.
-// Returns null when the text declares no recognisable color token at all —
-// the caller (`mockpit init`) then keeps the default theme rather than
-// storing a palette that is 100% fallback.
-//
-// `--radius` is intentionally NOT mapped: Palette carries colors only, and the
-// raw block is injected into the sandbox verbatim, so the repo's radius reaches
-// surfaces through `var(--radius)` without a second source of truth.
-export function paletteFromCssVars(cssVars) {
-    if (!cssVars || !cssVars.trim())
-        return null;
-    const blocks = [];
-    // Strip comments first so a commented-out token can't win the ordered pick.
-    collectBlocks(cssVars.replace(/\/\*[\s\S]*?\*\//g, ""), false, blocks);
-    // A bare declaration list (no selector) is treated as the light root, so
-    // callers may pass either `:root{…}` or just its contents.
-    if (blocks.length === 0)
-        blocks.push({ selector: ":root", dark: false, declarations: cssVars });
+// The custom properties a repo's root-level blocks declare, light and dark. Only
+// blocks that set page-wide values count (`:root`, `html`, `@theme`, `.dark`, a
+// dark media query), so a component's local `--x` isn't read as a project token.
+const ROOT_SELECTOR = /^(:root|html|:host|@theme\b|\.dark\b|:root\.dark|html\.dark|\[data-theme=["']?dark["']?\]|:root\[data-theme=["']?dark["']?\])/i;
+export function repoCustomProps(css) {
     const light = {};
     const dark = {};
+    if (!css.trim())
+        return { light, dark };
+    const blocks = [];
+    collectBlocks(css.replace(/\/\*[\s\S]*?\*\//g, ""), false, blocks);
+    if (blocks.length === 0)
+        blocks.push({ selector: ":root", dark: false, declarations: css });
     for (const b of blocks) {
-        const vars = readCustomProps(b.declarations);
-        Object.assign(b.dark ? dark : light, vars);
+        if (!ROOT_SELECTOR.test(b.selector.trim()) && !(b.dark && /:root|html/.test(b.selector)))
+            continue;
+        Object.assign(b.dark ? dark : light, readCustomProps(b.declarations));
     }
-    const base = themeById(DEFAULT_THEME_ID);
-    const lightPalette = paletteFrom(light, base.light);
-    // Dark inherits the light declarations first: a repo that only overrides
-    // `--background`/`--foreground` in `.dark` still gets its brand `--primary`.
-    // A repo with no dark block at all is single-palette (Loom, for one, is
-    // dark-only with everything in `:root`) — reusing the same values in both
-    // schemes keeps it looking like itself, where falling back to the default
-    // theme's dark would make the two modes look like two different products.
-    const darkPalette = paletteFrom({ ...light, ...dark }, base.dark);
-    const recognised = JSON.stringify(lightPalette) !== JSON.stringify(base.light) ||
-        JSON.stringify(darkPalette) !== JSON.stringify(base.dark);
-    return recognised ? { light: lightPalette, dark: darkPalette } : null;
+    return { light, dark };
 }