@mkbabb/value.js 0.5.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/value.js",
-    "version": "0.5.0",
+    "version": "0.10.0",
     "description": "CSS value units for color, length, angles, & c.",
     "license": "MIT",
     "keywords": [
@@ -17,23 +17,43 @@
     ],
     "type": "module",
     "main": "./dist/value.js",
-    "module": "./dist/value.js",
     "types": "./dist/index.d.ts",
-    "sideEffects": false,
+    "sideEffects": [
+        "./demo/**",
+        "**/*.css"
+    ],
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
             "import": "./dist/value.js",
-            "require": "./dist/value.cjs"
+            "default": "./dist/value.js"
         }
     },
     "files": [
-        "dist"
+        "dist",
+        "scripts/migrate-*.mjs"
     ],
     "scripts": {
         "dev": "vite --port 9000",
+        "dev:hero-lab": "vite --mode hero-lab --port 9010",
         "build": "vite build --mode production",
+        "build:hero-lab": "vite build --mode hero-lab",
+        "build:watch": "vite build --mode production --watch",
         "gh-pages": "vite build --mode gh-pages",
+        "prepare": "test -f dist/value.js || npm run build",
+        "proof:resolution": "node scripts/proof-resolution-contract.mjs",
+        "proof:dts-layout": "node scripts/proof-dts-layout.mjs",
+        "proof:no-deprecated": "node scripts/proof-no-deprecated.mjs",
+        "proof:no-ts-ignore": "node scripts/proof-no-ts-ignore.mjs",
+        "proof:as-any-budget": "node scripts/proof-as-any-budget.mjs",
+        "proof:as-unknown-as-budget": "node scripts/proof-as-unknown-as-budget.mjs",
+        "proof:codemod-publication": "node scripts/proof-codemod-publication.mjs",
+        "proof:no-deep": "node scripts/proof-no-deep.mjs",
+        "proof:no-bare-builtins": "node scripts/proof-no-bare-builtins.mjs",
+        "codemod:keyframes-lerp": "node scripts/migrate-keyframes-js-lerp.mjs",
+        "bench": "node bench/color-channel-access.mjs && node bench/color2-direct-paths.mjs && node bench/parser-namelookup.mjs",
+        "typecheck": "vue-tsc --noEmit",
+        "lint": "eslint . --max-warnings=0",
         "test": "vitest",
         "test:e2e": "playwright test"
     },
@@ -50,44 +70,56 @@
     },
     "homepage": "https://github.com/mkbabb/value.js#readme",
     "dependencies": {
-        "@mkbabb/parse-that": "latest"
+        "@mkbabb/parse-that": "^0.8.2"
     },
     "devDependencies": {
-        "@iconify-json/radix-icons": "^1.2.2",
+        "@iconify-json/radix-icons": "^1.2.6",
         "@iconify/vue": "^4.1.2",
-        "@playwright/test": "^1.58.2",
-        "@tailwindcss/cli": "^4.1.11",
-        "@tailwindcss/postcss": "^4.1.11",
-        "@types/katex": "^0.16.7",
-        "@types/node": "^24.1.0",
-        "@unovis/ts": "^1.5.2",
-        "@unovis/vue": "^1.5.2",
-        "@vee-validate/zod": "^4.13.2",
-        "@vitejs/plugin-vue": "^6.0.0",
-        "@vue/test-utils": "^2.4.6",
-        "@vueuse/core": "^14.2.1",
+        "@lucide/vue": "^1.16.0",
+        "@mkbabb/glass-ui": "file:../glass-ui",
+        "@mkbabb/keyframes.js": "file:../keyframes.js",
+        "@playwright/test": "^1.60.0",
+        "@tailwindcss/cli": "^4.3.0",
+        "@tailwindcss/postcss": "^4.3.0",
+        "@types/katex": "^0.16.8",
+        "@types/node": "^24.12.3",
+        "@types/sortablejs": "^1.15.9",
+        "@typescript-eslint/eslint-plugin": "^8.59.4",
+        "@typescript-eslint/parser": "^8.59.4",
+        "@unovis/ts": "^1.6.5",
+        "@unovis/vue": "^1.6.5",
+        "@vee-validate/zod": "^4.15.1",
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vue/test-utils": "^2.4.10",
+        "@vueuse/core": "^14.3.0",
+        "@vueuse/integrations": "^14.3.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-vue": "^8.6.0",
+        "eslint": "^10.4.0",
+        "eslint-plugin-vue": "^10.9.1",
+        "globals": "^17.6.0",
         "highlight.js": "^11.11.1",
         "jsdom": "^26.1.0",
-        "katex": "^0.16.22",
-        "lucide-vue-next": "^0.525.0",
-        "prettier": "^3.6.2",
+        "katex": "^0.16.47",
+        "prettier": "^3.8.3",
         "reka-ui": "^2.0.0",
-        "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.11",
-        "tw-animate-css": "^1.2.5",
-        "typescript": "^5.8.3",
+        "sortablejs": "^1.15.7",
+        "tailwind-merge": "^3.6.0",
+        "tailwindcss": "^4.3.0",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^6.0.3",
         "unplugin-vue-markdown": "^29.2.0",
         "v-calendar": "^3.1.2",
-        "vaul-vue": "^0.2.0",
-        "vee-validate": "^4.13.2",
-        "vite": "^7.0.6",
+        "vaul-vue": "^0.4.0",
+        "vee-validate": "^4.15.1",
+        "vite": "^8.0.13",
         "vite-plugin-dts": "^4.5.4",
         "vitest": "^3.2.4",
-        "vue": "^3.5.18",
-        "vue-sonner": "^1.1.3",
+        "vue": "^3.5.34",
+        "vue-eslint-parser": "^10.4.0",
+        "vue-router": "^4.6.4",
+        "vue-tsc": "^3.3.1",
         "zod": "^3.23.8"
     }
 }

package/scripts/migrate-keyframes-js-lerp.mjs

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+/**
+ * Migrates keyframes.js's `lerp(t, a, b)` → `lerp(a, b, t)` call sites
+ * (the v0.6.0 silent-breakage finding documented in
+ *  value.js docs/tranches/E/coordination/Q.md §5).
+ *
+ * Authored at value.js tranche E, wave W4, Lane F. Lane F's PRODUCT is the
+ * migration scaffolding — value.js does NOT write keyframes.js directly per the
+ * precept-bound cross-repo boundary. The keyframes.js maintainer applies this
+ * codemod locally; the verification protocol lives in `coordination/Q.md §5.4`.
+ *
+ * Usage:
+ *
+ *   node scripts/migrate-keyframes-js-lerp.mjs <path/to/keyframes.js> [--dry-run]
+ *
+ *   <path/to/keyframes.js>   Absolute or relative path to a keyframes.js checkout
+ *                            root (the directory containing `src/animation/`).
+ *
+ *   --dry-run                Print the diff WITHOUT writing. Exits 0 even when
+ *                            rewrites are detected.
+ *
+ * Strategy (conservative — refuses to rewrite anything it can't recognise):
+ *
+ *   For each of the two known call sites discovered by E.W4 Lane F's audit,
+ *   match the EXACT multi-line shape and rewrite the argument order from
+ *   `lerp(t, a, b)` → `lerp(a, b, t)`, preserving:
+ *     - the exact indentation of the original block,
+ *     - any inline `!` non-null assertions and `as` casts,
+ *     - the trailing comma + closing paren style.
+ *
+ *   Sites covered (verbatim per keyframes.js @ HEAD `0909177`):
+ *     1. src/animation/numeric.ts:159 — `lerp(eased, seg.startVals[i]!, seg.stopVals[i]!)`
+ *     2. src/animation/group.ts:251   — `lerp(layer.weight, existing.value, incoming.value)`
+ *
+ *   Each rewrite ASSERTS that the post-rewrite `lerp(` occurrence count equals
+ *   the pre-rewrite count — the codemod never adds or removes call sites.
+ *
+ *   If a site doesn't match its expected shape (e.g. the maintainer has already
+ *   re-styled the block, the line has shifted, the args differ), the codemod
+ *   REFUSES to rewrite that site and prints a diagnostic. The keyframes.js
+ *   maintainer applies the migration manually using the diffs in
+ *   `coordination/Q.md §5.2`.
+ *
+ * Exit codes:
+ *
+ *   0  All known sites either rewritten successfully or already migrated.
+ *   1  Usage error, path not found, or a site failed the conservative match
+ *      AND was not already in the post-migration shape — manual intervention
+ *      required.
+ */
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+const USAGE = `Usage: node scripts/migrate-keyframes-js-lerp.mjs <path/to/keyframes.js> [--dry-run]
+
+Migrates keyframes.js's two \`lerp(t, a, b)\` call sites to value.js's
+v0.6.0 \`lerp(a, b, t)\` canonical order.
+
+Arguments:
+  <path/to/keyframes.js>   Path to a keyframes.js checkout root.
+
+Flags:
+  --dry-run                Print the diff but do not write.
+  -h, --help               Print this message.
+
+See value.js docs/tranches/E/coordination/Q.md §5 for full context.
+`;
+
+/**
+ * The known call sites. Each entry describes the relative path inside the
+ * keyframes.js checkout, the legacy (pre-migration) source snippet, and the
+ * canonical (post-migration) snippet. The snippets are matched verbatim.
+ *
+ * Indentation is significant — these strings reproduce the exact bytes from
+ * keyframes.js @ HEAD `0909177`, verified at E.W4 Lane F dispatch.
+ */
+const SITES = [
+    {
+        relPath: "src/animation/numeric.ts",
+        legacy: `            (this.result as Record<string, number>)[seg.keys[i]!] = lerp(
+                eased,
+                seg.startVals[i]!,
+                seg.stopVals[i]!,
+            );`,
+        canonical: `            (this.result as Record<string, number>)[seg.keys[i]!] = lerp(
+                seg.startVals[i]!,
+                seg.stopVals[i]!,
+                eased,
+            );`,
+        description:
+            "numeric.ts:159 — per-segment numeric interpolation in NumericAnimator.update()",
+    },
+    {
+        relPath: "src/animation/group.ts",
+        legacy: `                                existing.value = lerp(
+                                    layer.weight,
+                                    existing.value,
+                                    incoming.value,
+                                );`,
+        canonical: `                                existing.value = lerp(
+                                    existing.value,
+                                    incoming.value,
+                                    layer.weight,
+                                );`,
+        description:
+            "group.ts:251 — weighted-blend lerp in AnimationGroup.tick() weighted branch",
+    },
+];
+
+/**
+ * Print a minimal unified-style diff for a single site. We do not depend on
+ * the system `diff(1)` so the codemod is hermetic.
+ */
+function renderSiteDiff(relPath, legacy, canonical) {
+    const minus = legacy.split("\n").map((l) => `- ${l}`);
+    const plus = canonical.split("\n").map((l) => `+ ${l}`);
+    return [`--- a/${relPath}`, `+++ b/${relPath}`, ...minus, ...plus].join(
+        "\n",
+    );
+}
+
+/**
+ * Count total `lerp(` occurrences in a source string. Used as the parity
+ * assertion — a rewrite must never change the total count.
+ */
+function countLerpCalls(source) {
+    const matches = source.match(/\blerp\(/g);
+    return matches ? matches.length : 0;
+}
+
+function main(argv) {
+    const args = argv.slice(2);
+
+    if (args.length === 0 || args.includes("-h") || args.includes("--help")) {
+        process.stdout.write(USAGE);
+        process.exit(args.length === 0 ? 1 : 0);
+    }
+
+    const dryRun = args.includes("--dry-run");
+    const positional = args.filter((a) => !a.startsWith("--") && !a.startsWith("-h"));
+
+    if (positional.length !== 1) {
+        process.stderr.write(USAGE);
+        process.exit(1);
+    }
+
+    const root = path.resolve(positional[0]);
+
+    if (!existsSync(root)) {
+        process.stderr.write(`error: path does not exist: ${root}\n`);
+        process.exit(1);
+    }
+
+    const srcAnimation = path.join(root, "src/animation");
+    if (!existsSync(srcAnimation)) {
+        process.stderr.write(
+            `error: ${root} does not appear to be a keyframes.js checkout ` +
+                `(missing src/animation/)\n`,
+        );
+        process.exit(1);
+    }
+
+    process.stdout.write(
+        `migrate-keyframes-js-lerp: target = ${root}` +
+            (dryRun ? " (dry-run)" : "") +
+            "\n\n",
+    );
+
+    let rewriteCount = 0;
+    let alreadyMigratedCount = 0;
+    let unmatchedCount = 0;
+    const failures = [];
+
+    for (const site of SITES) {
+        const filePath = path.join(root, site.relPath);
+
+        if (!existsSync(filePath)) {
+            process.stderr.write(
+                `[skip] ${site.relPath} — file missing (the keyframes.js layout has changed)\n`,
+            );
+            failures.push(site.relPath);
+            unmatchedCount++;
+            continue;
+        }
+
+        const before = readFileSync(filePath, "utf8");
+        const beforeLerpCount = countLerpCalls(before);
+
+        const hasLegacy = before.includes(site.legacy);
+        const hasCanonical = before.includes(site.canonical);
+
+        if (hasLegacy) {
+            const after = before.replace(site.legacy, site.canonical);
+            const afterLerpCount = countLerpCalls(after);
+
+            if (afterLerpCount !== beforeLerpCount) {
+                process.stderr.write(
+                    `[abort] ${site.relPath} — parity check failed ` +
+                        `(${beforeLerpCount} → ${afterLerpCount} lerp() calls). ` +
+                        `Refusing to write.\n`,
+                );
+                failures.push(site.relPath);
+                continue;
+            }
+
+            process.stdout.write(`[rewrite] ${site.relPath}\n`);
+            process.stdout.write(`           ${site.description}\n`);
+            process.stdout.write(
+                renderSiteDiff(site.relPath, site.legacy, site.canonical) +
+                    "\n\n",
+            );
+
+            if (!dryRun) {
+                writeFileSync(filePath, after, "utf8");
+            }
+            rewriteCount++;
+        } else if (hasCanonical) {
+            process.stdout.write(
+                `[already-migrated] ${site.relPath} — canonical (a, b, t) order present; skipping\n\n`,
+            );
+            alreadyMigratedCount++;
+        } else {
+            process.stderr.write(
+                `[unmatched] ${site.relPath} — neither legacy nor canonical shape found.\n` +
+                    `            The block at this site has drifted from the ` +
+                    `audit-recorded shape; the codemod cannot rewrite safely.\n` +
+                    `            Apply the diff manually per ` +
+                    `coordination/Q.md §5.2.\n\n`,
+            );
+            failures.push(site.relPath);
+            unmatchedCount++;
+        }
+    }
+
+    process.stdout.write("---\n");
+    process.stdout.write(
+        `summary: rewritten=${rewriteCount}, already-migrated=${alreadyMigratedCount}, unmatched=${unmatchedCount}\n`,
+    );
+
+    if (dryRun) {
+        process.stdout.write(
+            "dry-run: no files were modified. Re-run without --dry-run to apply.\n",
+        );
+    }
+
+    if (failures.length > 0) {
+        process.stderr.write(
+            `\nfailed sites:\n${failures.map((f) => `  - ${f}`).join("\n")}\n`,
+        );
+        process.exit(1);
+    }
+
+    process.exit(0);
+}
+
+main(process.argv);

package/dist/units/color/utils.d.ts

@@ -1,77 +0,0 @@
-import { AdobeRGBColor, Color, DisplayP3Color, HSLColor, HSVColor, HWBColor, KelvinColor, LABColor, LCHColor, LinearSRGBColor, OKLABColor, OKLCHColor, ProPhotoRGBColor, RGBColor, Rec2020Color, XYZColor, ColorSpaceMap } from '.';
-import { ColorSpace, WhitePoint } from './constants';
-export declare const getFormattedColorSpaceRange: <T extends ColorSpace>(colorSpace: T) => ColorSpaceMap<{
-    min: string;
-    max: string;
-}>[T];
-export declare const hex2rgb: (hex: string) => RGBColor;
-export declare const rgb2hex: ({ r, g, b, alpha }: RGBColor) => string;
-export declare const kelvin2rgb: ({ kelvin, alpha }: KelvinColor) => RGBColor;
-export declare const rgb2kelvin: ({ r, g, b, alpha }: RGBColor) => KelvinColor;
-export declare const hsv2hsl: ({ h, s, v, alpha }: HSVColor) => HSLColor;
-export declare const hsl2hsv: ({ h, s, l, alpha }: HSLColor) => HSVColor;
-export declare const hwb2hsl: ({ h, w, b, alpha }: HWBColor) => HSLColor;
-export declare const hsl2hwb: ({ h, s, l, alpha }: HSLColor) => HWBColor;
-export declare const rgb2hsl: ({ r, g, b, alpha }: RGBColor) => HSLColor;
-export declare function hsl2rgb({ h, s, l, alpha }: HSLColor): RGBColor;
-export declare function xyz2lab(xyz: XYZColor, toWhitePoint?: WhitePoint): LABColor;
-export declare function lab2xyz(lab: LABColor): XYZColor;
-export declare function srgbToLinear(channel: number): number;
-export declare function linearToSrgb(channel: number): number;
-export declare function rgb2xyz({ r, g, b, alpha }: RGBColor): XYZColor;
-export declare const xyz2rgb: ({ x, y, z, alpha }: XYZColor, correctGamut?: boolean) => RGBColor;
-export declare function lch2lab({ l, c, h, alpha }: LCHColor): LABColor;
-export declare function lab2lch({ l, a, b, alpha }: LABColor): LCHColor;
-export declare function oklab2xyz({ l, a, b, alpha }: OKLABColor): XYZColor;
-export declare function xyz2oklab(xyz: XYZColor): OKLABColor;
-export declare function oklab2lab(oklab: OKLABColor): LABColor;
-export declare function lab2oklab(lab: LABColor): OKLABColor;
-export declare function oklab2oklch({ l, a, b, alpha }: OKLABColor): OKLCHColor;
-export declare function oklch2oklab({ l, c, h, alpha }: OKLCHColor): OKLABColor;
-export declare function oklch2lab(oklch: OKLCHColor): LABColor;
-export declare function lab2oklch(lab: LABColor): OKLCHColor;
-export declare function hsl2xyz(hsl: HSLColor): XYZColor<number>;
-export declare function xyz2hsl(xyz: XYZColor): HSLColor<number>;
-export declare function hsv2xyz(hsv: HSVColor): XYZColor;
-export declare function xyz2hsv(xyz: XYZColor): HSVColor;
-export declare function hwb2xyz(hwb: HWBColor): XYZColor;
-export declare function xyz2hwb(xyz: XYZColor): HWBColor;
-export declare function lch2xyz(lch: LCHColor): XYZColor;
-export declare function xyz2lch(xyz: XYZColor): LCHColor;
-export declare function oklch2xyz(oklch: OKLCHColor): XYZColor;
-export declare function xyz2oklch(xyz: XYZColor): OKLCHColor;
-export declare function kelvin2xyz(kelvin: KelvinColor): XYZColor;
-export declare function xyz2kelvin(xyz: XYZColor): KelvinColor;
-export declare function adobeRgbToLinear(c: number): number;
-export declare function linearToAdobeRgb(c: number): number;
-export declare function proPhotoToLinear(c: number): number;
-export declare function linearToProPhoto(c: number): number;
-export declare function rec2020ToLinear(c: number): number;
-export declare function linearToRec2020(c: number): number;
-export declare function linearSrgb2xyz({ r, g, b, alpha }: LinearSRGBColor): XYZColor;
-export declare function xyz2linearSrgb({ x, y, z, alpha }: XYZColor): LinearSRGBColor;
-export declare function displayP32xyz({ r, g, b, alpha }: DisplayP3Color): XYZColor;
-export declare function xyz2displayP3({ x, y, z, alpha }: XYZColor): DisplayP3Color;
-export declare function adobeRgb2xyz({ r, g, b, alpha }: AdobeRGBColor): XYZColor;
-export declare function xyz2adobeRgb({ x, y, z, alpha }: XYZColor): AdobeRGBColor;
-export declare function proPhoto2xyz({ r, g, b, alpha }: ProPhotoRGBColor): XYZColor;
-export declare function xyz2proPhoto({ x, y, z, alpha }: XYZColor): ProPhotoRGBColor;
-export declare function rec20202xyz({ r, g, b, alpha }: Rec2020Color): XYZColor;
-export declare function xyz2rec2020({ x, y, z, alpha }: XYZColor): Rec2020Color;
-export declare function color2<T, C extends ColorSpace>(color: Color<T>, to: C): Color<T>;
-export { deltaEOK, isInSRGBGamut, DELTA_E_OK_JND } from './gamut';
-export declare function gamutMap<C extends Color>(color: C): C;
-export type HueInterpolationMethod = "shorter" | "longer" | "increasing" | "decreasing";
-export declare const CYLINDRICAL_HUE_COMPONENT: Partial<Record<ColorSpace, string>>;
-/**
- * Interpolate between two hue values using the given method.
- * Hues are in [0, 1] (normalized). Returns an interpolated hue in [0, 1].
- * Handles NaN (CSS `none`): if one hue is NaN, the other's value is used.
- */
-export declare function interpolateHue(h1: number, h2: number, t: number, method?: HueInterpolationMethod): number;
-/**
- * Mix two colors per CSS color-mix() specification.
- * Both colors should be normalized (components in [0, 1]).
- * Percentages p1, p2 are in [0, 1] (e.g. 0.5 = 50%).
- */
-export declare function mixColors(col1: Color, col2: Color, p1: number, p2: number, space?: ColorSpace, hueMethod?: HueInterpolationMethod): Color;