mockpit 3.0.0 → 3.1.0

package/dist/server/cdnInline.js

@@ -409,9 +409,11 @@ export function createCdnInliner() {
                 last = at + m[0].length;
                 const raw = m[1] ?? m[2] ?? m[3] ?? m[4] ?? m[5] ?? "";
                 const url = onCdn(raw, base);
-                // A media or layer qualifier would need wrapping, so it keeps its link.
-                const qualified = !!m[6]?.trim();
-                if (!url || qualified || depth >= MAX_IMPORT_DEPTH) {
+                // A layer is wrapped as a block, which says the same; a media or
+                // supports qualifier would need more, so it keeps its link.
+                const qualifier = m[6]?.trim() ?? "";
+                const layer = /^layer\(\s*([A-Za-z_][\w.-]*)\s*\)$/.exec(qualifier)?.[1];
+                if (!url || (qualifier && !layer) || depth >= MAX_IMPORT_DEPTH) {
                     imports += `${m[0]}\n`;
                     continue;
                 }
@@ -421,7 +423,7 @@ export function createCdnInliner() {
                     continue;
                 }
                 imports += inlined.imports;
-                importedBody += `${inlined.body}\n`;
+                importedBody += layer ? `@layer ${layer}{${inlined.body}}\n` : `${inlined.body}\n`;
             }
             rest += absolute.slice(last);
             return { imports, body: `${importedBody}${await rewriteFaces(rest, base)}` };

package/dist/server/codeWorker.js

@@ -25,8 +25,8 @@ const PRELUDE = `(function (call, out) {
   };
   globalThis.mockpit = Object.freeze({
     guide: fn("guide"), read: fn("read"), publish: fn("publish"), ask: fn("ask"),
-    feedback: fn("feedback"), say: fn("say"), move: fn("move"), edit: fn("edit"), export: fn("export"),
-    upload: fn("upload"),
+    feedback: fn("feedback"), say: fn("say"), move: fn("move"), edit: fn("edit"), system: fn("system"),
+    export: fn("export"), upload: fn("upload"),
   });
   globalThis.print = print;
   globalThis.console = Object.freeze({ log: print, info: print, warn: print, error: print });

package/dist/server/contrast.d.ts

@@ -0,0 +1,4 @@
+type Rgba = [r: number, g: number, b: number, a: number];
+export declare function parseColor(input: string): Rgba | null;
+export declare function contrastRatio(fg: string, bg: string): number | null;
+export {};

package/dist/server/contrast.js

@@ -0,0 +1,157 @@
+// WCAG 2.2 contrast between two CSS colours, for the system's declared pairs.
+// Five notations resolve: hex, rgb(), hsl(), oklch() and oklab(). Anything else
+// (a var(), color-mix(), a named colour past the few below) is unresolved, and
+// the caller reports the pair as unchecked rather than passing it.
+// Runtime-agnostic.
+const NAMED = {
+    white: [1, 1, 1, 1],
+    black: [0, 0, 0, 1],
+    transparent: [0, 0, 0, 0],
+};
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+// A number, a percentage of `full`, or `none` (0).
+function channel(raw, full) {
+    const s = raw.trim();
+    if (s === "none")
+        return 0;
+    const pct = /^(-?\d*\.?\d+)%$/.exec(s);
+    if (pct)
+        return (Number(pct[1]) / 100) * full;
+    const n = /^(-?\d*\.?\d+(?:e-?\d+)?)$/.exec(s);
+    return n ? Number(n[1]) : null;
+}
+function hue(raw) {
+    const m = /^(-?\d*\.?\d+)(deg|turn|rad|grad)?$/.exec(raw.trim());
+    if (!m)
+        return raw.trim() === "none" ? 0 : null;
+    const n = Number(m[1]);
+    switch (m[2]) {
+        case "turn":
+            return n * 360;
+        case "rad":
+            return (n * 180) / Math.PI;
+        case "grad":
+            return n * 0.9;
+        default:
+            return n;
+    }
+}
+// `fn(a b c / d)` or the legacy `fn(a, b, c, d)` into its parts.
+function args(body) {
+    const [main, alpha] = body.includes("/") ? body.split("/") : [body, null];
+    const parts = main.includes(",")
+        ? main.split(",").map((s) => s.trim())
+        : main.trim().split(/\s+/);
+    if (parts.length === 4 && alpha === null && main.includes(","))
+        return { parts: parts.slice(0, 3), alpha: parts[3] };
+    if (parts.length !== 3)
+        return null;
+    return { parts, alpha: alpha?.trim() ?? null };
+}
+const linearToSrgb = (c) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
+function oklabToRgb(L, a, b) {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ ** 3;
+    const m = m_ ** 3;
+    const s = s_ ** 3;
+    return [
+        clamp01(linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
+        clamp01(linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
+        clamp01(linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)),
+    ];
+}
+function hslToRgb(h, s, l) {
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    return [f(0), f(8), f(4)];
+}
+export function parseColor(input) {
+    const v = input.trim().toLowerCase();
+    if (NAMED[v])
+        return NAMED[v];
+    const hex = /^#([0-9a-f]{3,8})$/.exec(v);
+    if (hex) {
+        let h = hex[1];
+        if (h.length === 3 || h.length === 4)
+            h = [...h].map((c) => c + c).join("");
+        if (h.length !== 6 && h.length !== 8)
+            return null;
+        const n = (i) => parseInt(h.slice(i, i + 2), 16) / 255;
+        return [n(0), n(2), n(4), h.length === 8 ? n(6) : 1];
+    }
+    const fn = /^([a-z]+)\((.*)\)$/.exec(v);
+    if (!fn)
+        return null;
+    const parsed = args(fn[2]);
+    if (!parsed)
+        return null;
+    const alpha = parsed.alpha === null ? 1 : channel(parsed.alpha, 1);
+    if (alpha === null)
+        return null;
+    const [p0, p1, p2] = parsed.parts;
+    switch (fn[1]) {
+        case "rgb":
+        case "rgba": {
+            const c = [channel(p0, 255), channel(p1, 255), channel(p2, 255)];
+            if (c.some((x) => x === null))
+                return null;
+            return [clamp01(c[0] / 255), clamp01(c[1] / 255), clamp01(c[2] / 255), clamp01(alpha)];
+        }
+        case "hsl":
+        case "hsla": {
+            const h = hue(p0);
+            const s = channel(p1.endsWith("%") ? p1 : `${p1}%`, 1);
+            const l = channel(p2.endsWith("%") ? p2 : `${p2}%`, 1);
+            if (h === null || s === null || l === null)
+                return null;
+            return [...hslToRgb(((h % 360) + 360) % 360, clamp01(s), clamp01(l)), clamp01(alpha)];
+        }
+        case "oklab": {
+            const L = channel(p0, 1);
+            const a = channel(p1, 0.4);
+            const b = channel(p2, 0.4);
+            if (L === null || a === null || b === null)
+                return null;
+            return [...oklabToRgb(L, a, b), clamp01(alpha)];
+        }
+        case "oklch": {
+            const L = channel(p0, 1);
+            const C = channel(p1, 0.4);
+            const h = hue(p2);
+            if (L === null || C === null || h === null)
+                return null;
+            const r = (h * Math.PI) / 180;
+            return [...oklabToRgb(L, C * Math.cos(r), C * Math.sin(r)), clamp01(alpha)];
+        }
+        default:
+            return null;
+    }
+}
+const luminance = ([r, g, b]) => {
+    const lin = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+// A translucent colour is what it shows over what's under it.
+const over = (top, under) => [
+    top[0] * top[3] + under[0] * (1 - top[3]),
+    top[1] * top[3] + under[1] * (1 - top[3]),
+    top[2] * top[3] + under[2] * (1 - top[3]),
+    1,
+];
+// The ratio, rounded to two places, or null when either colour doesn't resolve.
+// A translucent background sits on white, the frame's canvas.
+export function contrastRatio(fg, bg) {
+    const f = parseColor(fg);
+    const b0 = parseColor(bg);
+    if (!f || !b0)
+        return null;
+    const b = b0[3] < 1 ? over(b0, [1, 1, 1, 1]) : b0;
+    const top = f[3] < 1 ? over(f, b) : f;
+    const l1 = luminance(top);
+    const l2 = luminance(b);
+    const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    return Math.round(ratio * 100) / 100;
+}

package/dist/server/decisionList.d.ts

@@ -1,4 +1,5 @@
 import { type DecisionSources, type Design } from "./types.ts";
+import type { System } from "./system.ts";
 export interface DecisionParts {
     asked: string;
     chose?: string;
@@ -15,6 +16,7 @@ export interface DecisionLine {
     parts?: DecisionParts;
     edited?: true;
     archived?: true;
+    system?: true;
     at?: string;
 }
 export type DecisionEdits = Record<string, {
@@ -23,7 +25,7 @@ export type DecisionEdits = Record<string, {
     removed?: true;
 }>;
 export declare function parseDecisionEdits(raw: string | null): DecisionEdits;
-export declare function deriveDecisionLines(designs: Design[], sources: DecisionSources): (DecisionLine & {
+export declare function deriveDecisionLines(designs: Design[], sources: DecisionSources, system?: System | null): (DecisionLine & {
     basis: string;
 })[];
 export declare function applyDecisionEdits(lines: (DecisionLine & {
@@ -32,6 +34,7 @@ export declare function applyDecisionEdits(lines: (DecisionLine & {
 export interface AgentDecisionLine {
     design: string;
     text: string;
+    system?: true;
     here?: true;
     edited?: true;
     archived?: true;

package/dist/server/decisionList.js

@@ -177,7 +177,7 @@ function standingBasis(design, ask) {
 // Every line the project's replies add up to, as derived: newest decided design
 // first, an archived design after every live one, each design's lines as it asked them
 // with what it put in use first.
-export function deriveDecisionLines(designs, sources) {
+export function deriveDecisionLines(designs, sources, system = null) {
     const byDesign = new Map();
     for (const v of sources.variants) {
         const list = byDesign.get(v.designId);
@@ -188,7 +188,7 @@ export function deriveDecisionLines(designs, sources) {
     }
     const order = [...designs].sort((a, b) => Number(!!a.archivedAt) - Number(!!b.archivedAt) ||
         (sources.decidedAt[b.id] ?? "").localeCompare(sources.decidedAt[a.id] ?? ""));
-    const out = [];
+    const out = systemLines(system);
     for (const design of order) {
         const variants = byDesign.get(design.id) ?? [];
         const base = {
@@ -234,6 +234,39 @@ export function deriveDecisionLines(designs, sources) {
     }
     return out;
 }
+// The project's own decisions, first: they hold on every design. A palette line
+// only once there are palettes to choose between.
+function systemLines(system) {
+    if (!system)
+        return [];
+    const base = { design: "", title: "System", system: true };
+    const out = [];
+    const palettes = system.color.palettes;
+    const def = palettes.find((p) => p.status === "default");
+    if (def && palettes.length > 1) {
+        const named = (status) => palettes.filter((p) => p.status === status).map((p) => p.label || p.id);
+        const kept = named("kept");
+        const hidden = named("hidden");
+        const text = [
+            `Palette: ${def.label || def.id} by default.`,
+            kept.length ? ` Kept: ${kept.join(", ")}.` : "",
+            hidden.length ? ` Not: ${hidden.join(", ")}.` : "",
+        ].join("");
+        out.push({
+            ...base,
+            id: "system:palette",
+            text,
+            basis: JSON.stringify(palettes.map((p) => [p.id, p.status])),
+        });
+    }
+    for (const [path, value] of Object.entries(system.settled)) {
+        if (!Object.hasOwn(system.knobs, path))
+            continue;
+        const text = `Project knob ${path}: ${typeof value === "string" ? value : JSON.stringify(value)}.`;
+        out.push({ ...base, id: `system:knob:${path}`, text, basis: JSON.stringify(value) });
+    }
+    return out;
+}
 // The hand edits laid over the derived lines. An edit made on an older answer
 // no longer applies: the user has decided again since.
 export function applyDecisionEdits(lines, edits) {
@@ -256,9 +289,12 @@ export function applyDecisionEdits(lines, edits) {
 const AGENT_LINE_CHARS = 280;
 const AGENT_LIST_CHARS = 6000;
 export function agentDecisionList(lines, here) {
-    const ordered = here
-        ? [...lines.filter((l) => l.design === here), ...lines.filter((l) => l.design !== here)]
-        : lines;
+    // The project's own come first wherever the read is: they hold on every design.
+    const ordered = [
+        ...lines.filter((l) => l.system),
+        ...lines.filter((l) => !l.system && here && l.design === here),
+        ...lines.filter((l) => !l.system && !(here && l.design === here)),
+    ];
     const kept = [];
     let used = 0;
     let clipped = false;
@@ -272,6 +308,7 @@ export function agentDecisionList(lines, here) {
         kept.push({
             design: l.design,
             text,
+            ...(l.system ? { system: true } : {}),
             ...(l.design === here ? { here: true } : {}),
             ...(l.edited ? { edited: true } : {}),
             ...(l.archived ? { archived: true } : {}),
@@ -295,6 +332,7 @@ export function fullAgentDecisionList(lines) {
         lines: lines.map((l) => ({
             design: l.design,
             text: l.text,
+            ...(l.system ? { system: true } : {}),
             ...(l.edited ? { edited: true } : {}),
             ...(l.archived ? { archived: true } : {}),
         })),

package/dist/server/designGuide.d.ts

@@ -1,20 +1,27 @@
-import type { DesignSystem } from "./types.ts";
-export declare const GUIDE_TOPICS: readonly ["knobs", "asks", "surfaces", "html", "feedback", "http", "scripts"];
+import { type System } from "./system.ts";
+export declare const GUIDE_TOPICS: readonly ["system", "knobs", "asks", "surfaces", "html", "feedback", "http", "scripts"];
 export type GuideTopic = (typeof GUIDE_TOPICS)[number];
 export declare const isGuideTopic: (id: unknown) => id is GuideTopic;
 export declare const unknownTopicMessage: (topic: string) => string;
-export declare function iconsLine(designSystem: DesignSystem | null): string;
+export declare function iconsLine(system: System | null): string;
 /**
  * What the repo's DESIGN.md, DTCG tokens and shadcn components.json say, as
  * init stored them. Empty when the repo has none.
  */
-export declare function designFilesSection(designSystem: DesignSystem | null): string;
+export declare function designFilesSection(system: System | null): string;
+export interface ComponentLine {
+    slug: string;
+    purpose: string;
+    screens: number;
+}
+export declare function systemSection(system: System | null, components?: ComponentLine[]): string;
+export declare function renderSystemTopic(contract: string, system: System | null, components?: ComponentLine[]): string;
 /**
  * The project-aware brief. `designSystem` is the stored `design:<project>` settings,
  * or null for a project that never ran `mockpit init`; `guidance` is the
  * layers above core (server/guidance.ts), absent when none is on.
  */
-export declare function renderBriefGuide(designSystem: DesignSystem | null, guidance?: {
+export declare function renderBriefGuide(system: System | null, guidance?: {
     line: string;
     body: string;
-}): string;
+}, components?: ComponentLine[]): string;