@event4u/agent-config 16.4.0 → 17.0.0

package/dist/agent-src/skills/design-tokens/scripts/tokens.ts

@@ -20,9 +20,17 @@
  *   - `json.dumps(..., indent=2)` with the DEFAULT `ensure_ascii=True`
  *     (non-ASCII → `\uXXXX`, astral → surrogate pairs).
  *
+ * Two deliberate departures from the original (road-to-a-brand-the-tree-can-check
+ * 3.1 / 3.2): stable DTCG 2025.10 object values (colour, dimension, duration)
+ * serialise to CSS and any other object value fails with its token path, and
+ * `validate` blanks the `var(--…)` span instead of skipping the whole line.
+ * With `--tokens`, `validate --json` adds a palette tag per colour literal
+ * and a stable finding id (3.3); without it the output is unchanged.
+ *
  * Pure stdlib (Node builtins only) · read-only except `generate -o` · no
  * network · no subprocess. A `.ts` MUST NOT import a `.py`.
  */
+import { createHash } from 'node:crypto';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import process from 'node:process';
@@ -189,6 +197,112 @@ export function resolveReference(value: Json, tokens: JsonObject): Json {
     return node !== null ? node : value;
 }
 
+// ------------------------------------------------- DTCG 2025.10 object values
+
+/** A token value this toolchain cannot serialise to CSS. Names the token path. */
+export class TokenValueError extends Error {}
+
+const DIMENSION_UNITS: ReadonlySet<string> = new Set(['px', 'rem']);
+const DURATION_UNITS: ReadonlySet<string> = new Set(['ms', 's']);
+
+/**
+ * Per colour space: the CSS Color 4 function and, per component, its inclusive
+ * range. `null` is unbounded. Hue ranges are the specification's 0-360.
+ */
+type Range = readonly [number, number] | null;
+const COLOR_SPACES: Readonly<Record<string, { fn: string; ranges: readonly [Range, Range, Range] }>> = {
+    srgb: { fn: 'color(srgb', ranges: [[0, 1], [0, 1], [0, 1]] },
+    'srgb-linear': { fn: 'color(srgb-linear', ranges: [[0, 1], [0, 1], [0, 1]] },
+    'display-p3': { fn: 'color(display-p3', ranges: [[0, 1], [0, 1], [0, 1]] },
+    'a98-rgb': { fn: 'color(a98-rgb', ranges: [[0, 1], [0, 1], [0, 1]] },
+    'prophoto-rgb': { fn: 'color(prophoto-rgb', ranges: [[0, 1], [0, 1], [0, 1]] },
+    rec2020: { fn: 'color(rec2020', ranges: [[0, 1], [0, 1], [0, 1]] },
+    'xyz-d65': { fn: 'color(xyz-d65', ranges: [null, null, null] },
+    'xyz-d50': { fn: 'color(xyz-d50', ranges: [null, null, null] },
+    hsl: { fn: 'hsl(', ranges: [[0, 360], [0, 100], [0, 100]] },
+    hwb: { fn: 'hwb(', ranges: [[0, 360], [0, 100], [0, 100]] },
+    lab: { fn: 'lab(', ranges: [[0, 100], null, null] },
+    lch: { fn: 'lch(', ranges: [[0, 100], [0, Infinity], [0, 360]] },
+    oklab: { fn: 'oklab(', ranges: [[0, 1], null, null] },
+    oklch: { fn: 'oklch(', ranges: [[0, 1], [0, Infinity], [0, 360]] },
+};
+
+/** Six decimals at most, no exponent, no trailing zeros. */
+function _num(n: number): string {
+    return String(Number(n.toFixed(6)));
+}
+
+function _finite(v: unknown, what: string, tokenPath: string): number {
+    if (typeof v !== 'number' || !Number.isFinite(v)) {
+        throw new TokenValueError(`token ${tokenPath}: ${what} must be a finite number, got ${JSON.stringify(v)}`);
+    }
+    return v;
+}
+
+function _colorToCss(v: JsonObject, tokenPath: string): string {
+    const space = v['colorSpace'];
+    const alpha = v['alpha'] === undefined ? 1 : _finite(v['alpha'], 'alpha', tokenPath);
+    if (alpha < 0 || alpha > 1) {
+        throw new TokenValueError(`token ${tokenPath}: alpha ${alpha} is outside 0-1`);
+    }
+    const hex = v['hex'];
+    if (typeof hex === 'string') {
+        if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
+            throw new TokenValueError(`token ${tokenPath}: hex ${JSON.stringify(hex)} is not a #rrggbb value`);
+        }
+        if (alpha === 1) return hex;
+        const a = Math.round(alpha * 255).toString(16).padStart(2, '0');
+        return hex + (hex === hex.toUpperCase() ? a.toUpperCase() : a);
+    }
+    const spec = typeof space === 'string' ? COLOR_SPACES[space] : undefined;
+    if (spec === undefined) {
+        throw new TokenValueError(`token ${tokenPath}: colorSpace ${JSON.stringify(space)} has no CSS mapping`);
+    }
+    const comps = v['components'];
+    if (!Array.isArray(comps) || comps.length !== 3) {
+        throw new TokenValueError(`token ${tokenPath}: components must be an array of three values`);
+    }
+    const parts = comps.map((c, i) => {
+        if (c === 'none') return 'none';
+        const n = _finite(c, `component ${i}`, tokenPath);
+        const range = spec.ranges[i] ?? null;
+        if (range !== null && (n < range[0] || n > range[1])) {
+            throw new TokenValueError(
+                `token ${tokenPath}: component ${i} (${n}) is outside ${range[0]}-${range[1]} for ${String(space)}`,
+            );
+        }
+        return space === 'hsl' || space === 'hwb' ? (i === 0 ? _num(n) : `${_num(n)}%`) : _num(n);
+    });
+    const alphaPart = alpha === 1 ? '' : ` / ${_num(alpha)}`;
+    const open = spec.fn.endsWith('(') ? spec.fn : `${spec.fn} `;
+    return `${open}${parts.join(' ')}${alphaPart})`;
+}
+
+/**
+ * Serialise a resolved token value for CSS. Strings pass through unchanged
+ * (legacy-valid). A DTCG 2025.10 colour or dimension/duration object becomes
+ * CSS; any other object is a hard error naming the token — never `[object Object]`.
+ */
+export function tokenValueToCss(value: Json, tokenPath: string): Json {
+    if (!_isPlainObject(value)) {
+        return value;
+    }
+    if ('colorSpace' in value || 'components' in value || 'hex' in value) {
+        return _colorToCss(value, tokenPath);
+    }
+    if ('unit' in value && 'value' in value) {
+        const unit = value['unit'];
+        const n = _finite(value['value'], 'value', tokenPath);
+        if (typeof unit !== 'string' || !(DIMENSION_UNITS.has(unit) || DURATION_UNITS.has(unit))) {
+            throw new TokenValueError(`token ${tokenPath}: unit ${JSON.stringify(unit)} is not px, rem, ms or s`);
+        }
+        return `${_num(n)}${unit}`;
+    }
+    throw new TokenValueError(
+        `token ${tokenPath}: object value ${JSON.stringify(value)} is neither a DTCG colour nor a dimension/duration`,
+    );
+}
+
 /** Flatten a DTCG token tree into `--css-var → resolved value`. */
 export function flattenTokens(
     obj: JsonObject,
@@ -204,7 +318,7 @@ export function flattenTokens(
         if (_isPlainObject(value)) {
             if ('$value' in value) {
                 const cssVar = '--' + current.join('-').replace(/\./g, '-');
-                res[cssVar] = resolveReference(value['$value'], tokens);
+                res[cssVar] = tokenValueToCss(resolveReference(value['$value'], tokens), current.join('.'));
             } else {
                 flattenTokens(value, tokens, current, res);
             }
@@ -412,6 +526,35 @@ function _searchGroup0(regex: RegExp, line: string): string | null {
     return m ? m[0] : null;
 }
 
+/**
+ * Replace every `var(--…)` span — nested `var()` fallbacks included — with
+ * spaces of the same length, so columns stay put and only the reference goes.
+ */
+function _blankVarSpans(line: string): string {
+    let out = '';
+    let i = 0;
+    while (i < line.length) {
+        if (line.startsWith('var(--', i)) {
+            let depth = 0;
+            let j = i;
+            for (; j < line.length; j += 1) {
+                if (line[j] === '(') depth += 1;
+                else if (line[j] === ')') {
+                    depth -= 1;
+                    if (depth === 0) break;
+                }
+            }
+            const end = Math.min(j + 1, line.length);
+            out += ' '.repeat(end - i);
+            i = end;
+        } else {
+            out += line[i];
+            i += 1;
+        }
+    }
+    return out;
+}
+
 export function scanFile(p: string): Violation[] {
     const violations: Violation[] = [];
     let text: string;
@@ -423,16 +566,14 @@ export function scanFile(p: string): Violation[] {
     const lines = text.split('\n');
     for (let i = 0; i < lines.length; i += 1) {
         const lineno = i + 1;
-        const line = lines[i] as string;
-        const stripped = _strip(line);
-        if (
-            stripped.startsWith('//') ||
-            stripped.startsWith('/*') ||
-            stripped.startsWith('*') ||
-            line.includes('var(--')
-        ) {
+        const raw = lines[i] as string;
+        const stripped = _strip(raw);
+        if (stripped.startsWith('//') || stripped.startsWith('/*') || stripped.startsWith('*')) {
             continue;
         }
+        // Skip the `var(--…)` span, not the line: a literal beside a token
+        // reference on the same line is still a literal.
+        const line = _blankVarSpans(raw);
         for (const kind of Object.keys(PATTERNS)) {
             const { regex, message, suggestion } = PATTERNS[kind] as Pattern;
             const matches = _findall(regex, line);
@@ -464,6 +605,153 @@ export function scanFile(p: string): Violation[] {
     return violations;
 }
 
+// ------------------------------------------------------ palette reading (3.3)
+
+type Rgb = readonly [number, number, number];
+
+/** `#rgb`, `#rrggbb`, `#rrggbbaa` or integer `rgb()/rgba()` → 0-255 channels. Alpha is ignored. */
+function _parseColor(s: string): Rgb | null {
+    const t = s.trim();
+    let m = /^#([0-9a-fA-F]{3})$/.exec(t);
+    if (m) {
+        const h = m[1] as string;
+        return [0, 1, 2].map((i) => parseInt(h[i]! + h[i]!, 16)) as unknown as Rgb;
+    }
+    m = /^#([0-9a-fA-F]{6})(?:[0-9a-fA-F]{2})?$/.exec(t);
+    if (m) {
+        const h = m[1] as string;
+        return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) as unknown as Rgb;
+    }
+    m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(t);
+    if (m) {
+        const c = [m[1], m[2], m[3]].map(Number);
+        return c.every((n) => n <= 255) ? (c as unknown as Rgb) : null;
+    }
+    return null;
+}
+
+/** A resolved token value as sRGB, or null when it is no colour this reading compares. */
+function _tokenColor(v: Json): Rgb | null {
+    if (typeof v === 'string') return _parseColor(v);
+    if (!_isPlainObject(v)) return null;
+    if (typeof v['hex'] === 'string') return _parseColor(v['hex']);
+    const comps = v['components'];
+    if (v['colorSpace'] === 'srgb' && Array.isArray(comps) && comps.length === 3) {
+        if (!comps.every((c) => typeof c === 'number' && c >= 0 && c <= 1)) return null;
+        return (comps as number[]).map((c) => Math.round(c * 255)) as unknown as Rgb;
+    }
+    return null;
+}
+
+interface PaletteEntry {
+    token: string;
+    rgb: Rgb;
+}
+
+/** Every token whose resolved value is a comparable colour, in document order. Never merged by value. */
+export function readPalette(tokens: JsonObject): PaletteEntry[] {
+    const out: PaletteEntry[] = [];
+    const walk = (node: JsonObject, at: string[]): void => {
+        for (const key of Object.keys(node)) {
+            if (key.startsWith('$')) continue;
+            const value = node[key];
+            if (!_isPlainObject(value)) continue;
+            if ('$value' in value) {
+                const rgb = _tokenColor(resolveReference(value['$value'], tokens));
+                if (rgb !== null) out.push({ token: [...at, key].join('.'), rgb });
+            } else {
+                walk(value, [...at, key]);
+            }
+        }
+    };
+    walk(tokens, []);
+    return out;
+}
+
+function _lab(rgb: Rgb): [number, number, number] {
+    const lin = rgb.map((c) => {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    }) as [number, number, number];
+    const [r, g, b] = lin;
+    const xyz = [
+        (0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / 0.95047,
+        0.2126729 * r + 0.7151522 * g + 0.072175 * b,
+        (0.0193339 * r + 0.119192 * g + 0.9503041 * b) / 1.08883,
+    ].map((t) => (t > 216 / 24389 ? Math.cbrt(t) : (24389 / 27 * t + 16) / 116));
+    const [fx, fy, fz] = xyz as [number, number, number];
+    return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - fz)];
+}
+
+/** CIEDE2000 colour difference between two sRGB colours (kL = kC = kH = 1). */
+export function deltaE2000(a: Rgb, b: Rgb): number {
+    const [L1, a1, b1] = _lab(a);
+    const [L2, a2, b2] = _lab(b);
+    const rad = Math.PI / 180;
+    const Cbar = (Math.hypot(a1, b1) + Math.hypot(a2, b2)) / 2;
+    const G = 0.5 * (1 - Math.sqrt(Cbar ** 7 / (Cbar ** 7 + 25 ** 7)));
+    const ap1 = (1 + G) * a1;
+    const ap2 = (1 + G) * a2;
+    const Cp1 = Math.hypot(ap1, b1);
+    const Cp2 = Math.hypot(ap2, b2);
+    const hue = (x: number, y: number): number => {
+        if (x === 0 && y === 0) return 0;
+        const h = Math.atan2(y, x) / rad;
+        return h < 0 ? h + 360 : h;
+    };
+    const hp1 = hue(ap1, b1);
+    const hp2 = hue(ap2, b2);
+    const dL = L2 - L1;
+    const dC = Cp2 - Cp1;
+    let dh = 0;
+    if (Cp1 * Cp2 !== 0) {
+        dh = hp2 - hp1;
+        if (dh > 180) dh -= 360;
+        else if (dh < -180) dh += 360;
+    }
+    const dH = 2 * Math.sqrt(Cp1 * Cp2) * Math.sin((dh / 2) * rad);
+    const Lbar = (L1 + L2) / 2;
+    const Cpbar = (Cp1 + Cp2) / 2;
+    let hbar = hp1 + hp2;
+    if (Cp1 * Cp2 !== 0) {
+        if (Math.abs(hp1 - hp2) <= 180) hbar /= 2;
+        else hbar = hbar < 360 ? (hbar + 360) / 2 : (hbar - 360) / 2;
+    }
+    const T =
+        1 -
+        0.17 * Math.cos((hbar - 30) * rad) +
+        0.24 * Math.cos(2 * hbar * rad) +
+        0.32 * Math.cos((3 * hbar + 6) * rad) -
+        0.2 * Math.cos((4 * hbar - 63) * rad);
+    const dTheta = 30 * Math.exp(-(((hbar - 275) / 25) ** 2));
+    const Rc = 2 * Math.sqrt(Cpbar ** 7 / (Cpbar ** 7 + 25 ** 7));
+    const Sl = 1 + (0.015 * (Lbar - 50) ** 2) / Math.sqrt(20 + (Lbar - 50) ** 2);
+    const Sc = 1 + 0.045 * Cpbar;
+    const Sh = 1 + 0.015 * Cpbar * T;
+    const Rt = -Math.sin(2 * dTheta * rad) * Rc;
+    return Math.sqrt((dL / Sl) ** 2 + (dC / Sc) ** 2 + (dH / Sh) ** 2 + Rt * (dC / Sc) * (dH / Sh));
+}
+
+/** `on-palette (<token>)`, `off-palette (nearest <token>, ΔE2000 n.nn)`, or null for a non-colour literal. */
+export function paletteTag(literal: string, palette: PaletteEntry[]): string | null {
+    const rgb = _parseColor(literal);
+    if (rgb === null || palette.length === 0) return null;
+    let best: { token: string; de: number } | null = null;
+    for (const entry of palette) {
+        const de = deltaE2000(rgb, entry.rgb);
+        if (best === null || de < best.de) best = { token: entry.token, de };
+    }
+    const nearest = best as { token: string; de: number };
+    return nearest.de === 0
+        ? `on-palette (${nearest.token})`
+        : `off-palette (nearest ${nearest.token}, ΔE2000 ${nearest.de.toFixed(2)})`;
+}
+
+/** Stable across unrelated line shifts: file, kind, literal and the line's own text — never its number. */
+function _findingId(v: Violation): string {
+    return createHash('sha256').update([v.file, v.type, v.value, v.context].join('\0')).digest('hex').slice(0, 16);
+}
+
 /** Mirror Python `s[:80]` over code points. */
 function _sliceCodePoints(s: string, n: number): string {
     let out = '';
@@ -653,6 +941,7 @@ interface ValidateArgs {
     dir: string;
     ignore: string[];
     json: boolean;
+    tokens: string | null;
 }
 interface EmbedArgs {
     op: 'embed';
@@ -725,6 +1014,7 @@ function _parseArgs(argv: string[]): ParsedArgs {
         let dir: string | null = null;
         const ignore: string[] = [];
         let json = false;
+        let tokens: string | null = null;
         let i = 0;
         while (i < rest.length) {
             const t = rest[i] as string;
@@ -740,6 +1030,10 @@ function _parseArgs(argv: string[]): ParsedArgs {
             } else if (base === '--json') {
                 json = true;
                 i += 1;
+            } else if (base === '--tokens') {
+                const r = _takeValue(rest, i, '--tokens');
+                tokens = r.value;
+                i = r.next;
             } else {
                 _usageError(`unrecognized arguments: ${t}`);
             }
@@ -747,7 +1041,10 @@ function _parseArgs(argv: string[]): ParsedArgs {
         if (dir === null) {
             _usageError('the following arguments are required: --dir/-d');
         }
-        return { op: 'validate', dir, ignore, json };
+        if (tokens !== null && !json) {
+            _usageError('argument --tokens: only applies together with --json');
+        }
+        return { op: 'validate', dir, ignore, json, tokens };
     }
 
     if (op === 'embed') {
@@ -802,8 +1099,16 @@ export function main(argv: string[] | null = null): number {
             return 1;
         }
         const tokens = JSON.parse(fs.readFileSync(config, 'utf-8')) as JsonObject;
-        const output =
-            parsed.format === 'tailwind' ? generateTailwind(tokens) : generateCss(tokens);
+        let output: string;
+        try {
+            output = parsed.format === 'tailwind' ? generateTailwind(tokens) : generateCss(tokens);
+        } catch (exc) {
+            if (exc instanceof TokenValueError) {
+                process.stderr.write(`Error: ${exc.message}\n`);
+                return 1;
+            }
+            throw exc;
+        }
         if (parsed.output) {
             const out = parsed.output;
             const dir = path.dirname(out);
@@ -827,7 +1132,25 @@ export function main(argv: string[] | null = null): number {
         for (const file of _iterFiles(root, ignore)) {
             violations = violations.concat(scanFile(file));
         }
-        if (parsed.json) {
+        if (parsed.json && parsed.tokens !== null) {
+            let registered: Json;
+            try {
+                registered = JSON.parse(fs.readFileSync(parsed.tokens, 'utf-8'));
+            } catch (exc) {
+                process.stderr.write(`Error: tokens file unreadable: ${parsed.tokens}: ${(exc as Error).message}\n`);
+                return 1;
+            }
+            if (!_isPlainObject(registered)) {
+                process.stderr.write(`Error: tokens file is not a JSON object: ${parsed.tokens}\n`);
+                return 1;
+            }
+            const palette = readPalette(registered);
+            const tagged = violations.map((v) => {
+                const tag = paletteTag(v.value, palette);
+                return tag === null ? { ...v, id: _findingId(v) } : { ...v, palette: tag, id: _findingId(v) };
+            });
+            process.stdout.write(_pyDumpsIndent2(tagged) + '\n');
+        } else if (parsed.json) {
             process.stdout.write(_pyDumpsIndent2(violations) + '\n');
         } else {
             process.stdout.write(formatReport(violations) + '\n');

package/dist/agent-src/skills/design-tokens/templates/design-tokens-starter.json

@@ -1,72 +1,71 @@
 {
-  "$schema": "https://design-tokens.org/schema.json",
   "primitive": {
     "color": {
       "gray": {
-        "50": { "$value": "#F9FAFB", "$type": "color" },
-        "100": { "$value": "#F3F4F6", "$type": "color" },
-        "200": { "$value": "#E5E7EB", "$type": "color" },
-        "300": { "$value": "#D1D5DB", "$type": "color" },
-        "400": { "$value": "#9CA3AF", "$type": "color" },
-        "500": { "$value": "#6B7280", "$type": "color" },
-        "600": { "$value": "#4B5563", "$type": "color" },
-        "700": { "$value": "#374151", "$type": "color" },
-        "800": { "$value": "#1F2937", "$type": "color" },
-        "900": { "$value": "#111827", "$type": "color" },
-        "950": { "$value": "#030712", "$type": "color" }
+        "50": { "$value": { "colorSpace": "srgb", "components": [0.9765, 0.9804, 0.9843], "hex": "#F9FAFB" }, "$type": "color" },
+        "100": { "$value": { "colorSpace": "srgb", "components": [0.9529, 0.9569, 0.9647], "hex": "#F3F4F6" }, "$type": "color" },
+        "200": { "$value": { "colorSpace": "srgb", "components": [0.898, 0.9059, 0.9216], "hex": "#E5E7EB" }, "$type": "color" },
+        "300": { "$value": { "colorSpace": "srgb", "components": [0.8196, 0.8353, 0.8588], "hex": "#D1D5DB" }, "$type": "color" },
+        "400": { "$value": { "colorSpace": "srgb", "components": [0.6118, 0.6392, 0.6863], "hex": "#9CA3AF" }, "$type": "color" },
+        "500": { "$value": { "colorSpace": "srgb", "components": [0.4196, 0.4471, 0.502], "hex": "#6B7280" }, "$type": "color" },
+        "600": { "$value": { "colorSpace": "srgb", "components": [0.2941, 0.3333, 0.3882], "hex": "#4B5563" }, "$type": "color" },
+        "700": { "$value": { "colorSpace": "srgb", "components": [0.2157, 0.2549, 0.3176], "hex": "#374151" }, "$type": "color" },
+        "800": { "$value": { "colorSpace": "srgb", "components": [0.1216, 0.1608, 0.2157], "hex": "#1F2937" }, "$type": "color" },
+        "900": { "$value": { "colorSpace": "srgb", "components": [0.0667, 0.0941, 0.1529], "hex": "#111827" }, "$type": "color" },
+        "950": { "$value": { "colorSpace": "srgb", "components": [0.0118, 0.0275, 0.0706], "hex": "#030712" }, "$type": "color" }
       },
       "blue": {
-        "50": { "$value": "#EFF6FF", "$type": "color" },
-        "500": { "$value": "#3B82F6", "$type": "color" },
-        "600": { "$value": "#2563EB", "$type": "color" },
-        "700": { "$value": "#1D4ED8", "$type": "color" },
-        "800": { "$value": "#1E40AF", "$type": "color" }
+        "50": { "$value": { "colorSpace": "srgb", "components": [0.9373, 0.9647, 1], "hex": "#EFF6FF" }, "$type": "color" },
+        "500": { "$value": { "colorSpace": "srgb", "components": [0.2314, 0.5098, 0.9647], "hex": "#3B82F6" }, "$type": "color" },
+        "600": { "$value": { "colorSpace": "srgb", "components": [0.1451, 0.3882, 0.9216], "hex": "#2563EB" }, "$type": "color" },
+        "700": { "$value": { "colorSpace": "srgb", "components": [0.1137, 0.3059, 0.8471], "hex": "#1D4ED8" }, "$type": "color" },
+        "800": { "$value": { "colorSpace": "srgb", "components": [0.1176, 0.251, 0.6863], "hex": "#1E40AF" }, "$type": "color" }
       },
       "red": {
-        "500": { "$value": "#EF4444", "$type": "color" },
-        "600": { "$value": "#DC2626", "$type": "color" },
-        "700": { "$value": "#B91C1C", "$type": "color" }
+        "500": { "$value": { "colorSpace": "srgb", "components": [0.9373, 0.2667, 0.2667], "hex": "#EF4444" }, "$type": "color" },
+        "600": { "$value": { "colorSpace": "srgb", "components": [0.8627, 0.149, 0.149], "hex": "#DC2626" }, "$type": "color" },
+        "700": { "$value": { "colorSpace": "srgb", "components": [0.7255, 0.1098, 0.1098], "hex": "#B91C1C" }, "$type": "color" }
       },
       "green": {
-        "500": { "$value": "#22C55E", "$type": "color" },
-        "600": { "$value": "#16A34A", "$type": "color" }
+        "500": { "$value": { "colorSpace": "srgb", "components": [0.1333, 0.7725, 0.3686], "hex": "#22C55E" }, "$type": "color" },
+        "600": { "$value": { "colorSpace": "srgb", "components": [0.0863, 0.6392, 0.2902], "hex": "#16A34A" }, "$type": "color" }
       },
       "yellow": {
-        "500": { "$value": "#EAB308", "$type": "color" }
+        "500": { "$value": { "colorSpace": "srgb", "components": [0.9176, 0.702, 0.0314], "hex": "#EAB308" }, "$type": "color" }
       },
-      "white": { "$value": "#FFFFFF", "$type": "color" }
+      "white": { "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "hex": "#FFFFFF" }, "$type": "color" }
     },
     "spacing": {
-      "0": { "$value": "0", "$type": "dimension" },
-      "1": { "$value": "0.25rem", "$type": "dimension" },
-      "2": { "$value": "0.5rem", "$type": "dimension" },
-      "3": { "$value": "0.75rem", "$type": "dimension" },
-      "4": { "$value": "1rem", "$type": "dimension" },
-      "5": { "$value": "1.25rem", "$type": "dimension" },
-      "6": { "$value": "1.5rem", "$type": "dimension" },
-      "8": { "$value": "2rem", "$type": "dimension" },
-      "10": { "$value": "2.5rem", "$type": "dimension" },
-      "12": { "$value": "3rem", "$type": "dimension" },
-      "16": { "$value": "4rem", "$type": "dimension" }
+      "0": { "$value": { "value": 0, "unit": "px" }, "$type": "dimension" },
+      "1": { "$value": { "value": 0.25, "unit": "rem" }, "$type": "dimension" },
+      "2": { "$value": { "value": 0.5, "unit": "rem" }, "$type": "dimension" },
+      "3": { "$value": { "value": 0.75, "unit": "rem" }, "$type": "dimension" },
+      "4": { "$value": { "value": 1, "unit": "rem" }, "$type": "dimension" },
+      "5": { "$value": { "value": 1.25, "unit": "rem" }, "$type": "dimension" },
+      "6": { "$value": { "value": 1.5, "unit": "rem" }, "$type": "dimension" },
+      "8": { "$value": { "value": 2, "unit": "rem" }, "$type": "dimension" },
+      "10": { "$value": { "value": 2.5, "unit": "rem" }, "$type": "dimension" },
+      "12": { "$value": { "value": 3, "unit": "rem" }, "$type": "dimension" },
+      "16": { "$value": { "value": 4, "unit": "rem" }, "$type": "dimension" }
     },
     "fontSize": {
-      "xs": { "$value": "0.75rem", "$type": "dimension" },
-      "sm": { "$value": "0.875rem", "$type": "dimension" },
-      "base": { "$value": "1rem", "$type": "dimension" },
-      "lg": { "$value": "1.125rem", "$type": "dimension" },
-      "xl": { "$value": "1.25rem", "$type": "dimension" },
-      "2xl": { "$value": "1.5rem", "$type": "dimension" },
-      "3xl": { "$value": "1.875rem", "$type": "dimension" },
-      "4xl": { "$value": "2.25rem", "$type": "dimension" }
+      "xs": { "$value": { "value": 0.75, "unit": "rem" }, "$type": "dimension" },
+      "sm": { "$value": { "value": 0.875, "unit": "rem" }, "$type": "dimension" },
+      "base": { "$value": { "value": 1, "unit": "rem" }, "$type": "dimension" },
+      "lg": { "$value": { "value": 1.125, "unit": "rem" }, "$type": "dimension" },
+      "xl": { "$value": { "value": 1.25, "unit": "rem" }, "$type": "dimension" },
+      "2xl": { "$value": { "value": 1.5, "unit": "rem" }, "$type": "dimension" },
+      "3xl": { "$value": { "value": 1.875, "unit": "rem" }, "$type": "dimension" },
+      "4xl": { "$value": { "value": 2.25, "unit": "rem" }, "$type": "dimension" }
     },
     "radius": {
-      "none": { "$value": "0", "$type": "dimension" },
-      "sm": { "$value": "0.125rem", "$type": "dimension" },
-      "default": { "$value": "0.25rem", "$type": "dimension" },
-      "md": { "$value": "0.375rem", "$type": "dimension" },
-      "lg": { "$value": "0.5rem", "$type": "dimension" },
-      "xl": { "$value": "0.75rem", "$type": "dimension" },
-      "full": { "$value": "9999px", "$type": "dimension" }
+      "none": { "$value": { "value": 0, "unit": "px" }, "$type": "dimension" },
+      "sm": { "$value": { "value": 0.125, "unit": "rem" }, "$type": "dimension" },
+      "default": { "$value": { "value": 0.25, "unit": "rem" }, "$type": "dimension" },
+      "md": { "$value": { "value": 0.375, "unit": "rem" }, "$type": "dimension" },
+      "lg": { "$value": { "value": 0.5, "unit": "rem" }, "$type": "dimension" },
+      "xl": { "$value": { "value": 0.75, "unit": "rem" }, "$type": "dimension" },
+      "full": { "$value": { "value": 9999, "unit": "px" }, "$type": "dimension" }
     },
     "shadow": {
       "none": { "$value": "none", "$type": "shadow" },
@@ -76,9 +75,9 @@
       "lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "$type": "shadow" }
     },
     "duration": {
-      "fast": { "$value": "150ms", "$type": "duration" },
-      "normal": { "$value": "200ms", "$type": "duration" },
-      "slow": { "$value": "300ms", "$type": "duration" }
+      "fast": { "$value": { "value": 150, "unit": "ms" }, "$type": "duration" },
+      "normal": { "$value": { "value": 200, "unit": "ms" }, "$type": "duration" },
+      "slow": { "$value": { "value": 300, "unit": "ms" }, "$type": "duration" }
     }
   },
   "semantic": {

package/dist/agent-src/skills/docker/SKILL.md

@@ -164,7 +164,7 @@ When creating or reviewing Dockerfiles:
 - [ ] **No secrets in layers** — never `ENV` or `COPY` secrets. Use `--mount=type=secret` (BuildKit) or runtime secrets.
 - [ ] **Minimal packages** — only install what's needed. Remove package manager cache in the same `RUN` layer.
 - [ ] **Read-only root filesystem** — use `--read-only` flag where possible, mount writable dirs explicitly.
-- [ ] **No `latest` tag** — pin base image versions (`node:18.19-alpine`, not `node:latest`).
+- [ ] **No `latest` tag** — pin a supported version (`node:22.11-alpine`, not `node:latest`).
 - [ ] **Scan images** — use `docker scout quickview` or Trivy for vulnerability scanning.
 
 ```dockerfile

package/dist/agent-src/skills/estimate-ticket/SKILL.md

@@ -195,5 +195,5 @@ copy-paste instructions if missing.
 
 - [`refine-ticket`](../refine-ticket/SKILL.md) — sibling; refine first if the ticket is vague
 - [`jira-ticket`](../../commands/jira-ticket.md) — ticket loader
-- [`feature-plan`](../../commands/feature-plan.md) — downstream planning
+- [`feature-plan`](../../commands/feature/plan.md) — downstream planning
 - [`artifact-drafting-protocol`](../../rules/artifact-drafting-protocol.md) — drafting protocol