@crossworks/share-ui 0.232.66 → 0.232.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossworks/share-ui",
-  "version": "0.232.66",
+  "version": "0.232.67",
   "description": "The server-rendered share surface — the /s/<token> presenters, view-payload contract, mini-app sandbox, and the few primitives they need. Lives in MANTLE (the server renders these), published for jackdaw to consume; may depend only on @mantle/{client-types,content-core} (the jackdaw-repo-split boundary).",
   "exports": {
     "./app-presenter": "./src/app-presenter.tsx",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@firecms/neat": "1.0.2",
-    "@mantle/client-types": "npm:@crossworks/client-types@0.232.66",
-    "@mantle/content-core": "npm:@crossworks/content-core@0.232.66",
+    "@mantle/client-types": "npm:@crossworks/client-types@0.232.67",
+    "@mantle/content-core": "npm:@crossworks/content-core@0.232.67",
     "@radix-ui/react-label": "^2.1.12",
     "@radix-ui/react-slot": "^1.3.0",
     "class-variance-authority": "^0.7.1",

package/src/neat-background.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { decodeNeatSpec, encodeNeatSpec, neatConfigFromSpec } from './neat-background';
+
+const SPEC = { v: 1 as const, seed: 2325271021, tone: 'auto' as const, speed: 2 };
+
+describe('decodeNeatSpec', () => {
+  it('round-trips the canonical encoding', () => {
+    expect(decodeNeatSpec(encodeNeatSpec(SPEC))).toEqual(SPEC);
+  });
+
+  it('rejects garbage as null, never a throw', () => {
+    for (const bad of [null, '', '{}', '{"v":2}', 'not json', '{"v":1,"seed":-1}']) {
+      expect(decodeNeatSpec(bad)).toBeNull();
+    }
+  });
+});
+
+describe('neatConfigFromSpec — the wash', () => {
+  const long = {
+    background: '#ffffff',
+    primary: '#b85c23',
+    accent: '#eeeeee',
+    secondary: '#527575',
+  };
+  // What getComputedStyle actually returns on a deployed build: the compiled
+  // stylesheet minifies hex custom properties to shorthand where possible.
+  const short = { background: '#fff', primary: '#b85c23', accent: '#eee', secondary: '#527575' };
+
+  it('produces the IDENTICAL config for shorthand #rgb and #rrggbb tokens', () => {
+    // Whole-config equality on purpose: it pins the wash (a failed shorthand
+    // parse degraded stops to the raw brand colour) AND the raw pass-throughs
+    // (colors[0]/[4] and backgroundColor once carried '#fff' verbatim, which
+    // Neat's parseInt-based parser reads as 0x000fff — electric blue).
+    expect(neatConfigFromSpec(SPEC, short, 'light')).toEqual(
+      neatConfigFromSpec(SPEC, long, 'light'),
+    );
+  });
+
+  it('hands the shader only canonical six-digit hex, never shorthand', () => {
+    const c = neatConfigFromSpec(SPEC, short, 'light');
+    for (const stop of c.colors) expect(stop.color).toMatch(/^#[0-9a-f]{6}$/);
+    expect(c.backgroundColor).toBe('#ffffff');
+  });
+
+  it('actually washes the brand colour toward the ground', () => {
+    const washed = neatConfigFromSpec(SPEC, short, 'light').colors[1]?.color ?? '';
+    // Raw primary (or its 1.08 shade, #c66c39-ish) means the mix silently
+    // failed; a washed stop is much lighter than the brand colour.
+    expect(washed).not.toBe('#b85c23');
+    const mean =
+      [1, 3, 5].map((i) => parseInt(washed.slice(i, i + 2), 16)).reduce((s, n) => s + n, 0) / 3;
+    expect(mean).toBeGreaterThan(150);
+  });
+
+  it('is deterministic — same seed, same config', () => {
+    expect(neatConfigFromSpec(SPEC, long, 'dark')).toEqual(neatConfigFromSpec(SPEC, long, 'dark'));
+  });
+});

package/src/neat-background.ts

@@ -109,7 +109,20 @@ function mulberry32(seed: number): () => number {
 }
 
 function hexToRgb(hex: string): [number, number, number] | null {
-  const digits = /^#?([0-9a-f]{6})$/i.exec(hex.trim())?.[1];
+  const t = hex.trim();
+  // Shorthand #rgb MUST parse: the compiled stylesheets minify hex custom
+  // properties (#ffffff → #fff, #eeeeee → #eee), so this is what
+  // getComputedStyle actually returns on deployed builds. Rejecting it made
+  // mixHex silently return the RAW brand colour — no wash, a saturated
+  // poster instead of a tint — on exactly the themes whose tokens shorten,
+  // and only in production (dev CSS is unminified). Light modes were hit
+  // hardest because near-white grounds (#ffffff/#eeeeee) all shorten.
+  const short = /^#?([0-9a-f]{3})$/i.exec(t)?.[1];
+  if (short) {
+    const c = (i: number) => parseInt(short.charAt(i) + short.charAt(i), 16);
+    return [c(0), c(1), c(2)];
+  }
+  const digits = /^#?([0-9a-f]{6})$/i.exec(t)?.[1];
   if (!digits) return null;
   const n = parseInt(digits, 16);
   return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
@@ -148,6 +161,18 @@ function shadeHex(hex: string, factor: number): string {
   ]);
 }
 
+/** Canonical #rrggbb for any hex this module can parse; unparseable values
+ *  pass through untouched. EVERY colour handed to the shader goes through
+ *  this: Neat's own parser is `parseInt(hex, 16)` on whatever it gets, so a
+ *  shorthand `#fff` reads as the 24-bit int 0x000fff — rgb(0, 15, 255), an
+ *  electric blue poster where the page ground should be. That is precisely
+ *  what deployed light themes produced, because minified stylesheets shorten
+ *  near-white tokens to #fff/#eee. */
+function normalizeHex(hex: string): string {
+  const rgb = hexToRgb(hex);
+  return rgb ? rgbToHex(rgb) : hex;
+}
+
 const round1 = (n: number) => Math.round(n * 10) / 10;
 const round2 = (n: number) => Math.round(n * 100) / 100;
 
@@ -166,32 +191,40 @@ export function neatConfigFromSpec(
   const range = (lo: number, hi: number) => lo + rnd() * (hi - lo);
   const darker = spec.tone === 'darker' || (spec.tone === 'auto' && mode === 'dark');
 
+  // Tokens arrive as whatever getComputedStyle returns — on deployed builds
+  // that includes minifier shorthand. Normalized ONCE here, so both our wash
+  // math and the raw pass-throughs below hand the shader canonical hex.
+  const background = normalizeHex(tokens.background);
+  const primary = normalizeHex(tokens.primary);
+  const accent = normalizeHex(tokens.accent);
+  const secondary = normalizeHex(tokens.secondary);
+
   // A wash: pull the brand colour part-way into the page background, then
   // nudge the result off the surface in the chosen direction. Enough colour
   // to read as a real gradient, close enough to the surface that content
   // sitting on it never fights it.
   const wash = (hex: string, towardBg: number) =>
-    shadeHex(mixHex(hex, tokens.background, towardBg), darker ? 0.88 : 1.08);
+    shadeHex(mixHex(hex, background, towardBg), darker ? 0.88 : 1.08);
 
   return {
     colors: [
-      { color: tokens.background, enabled: true, influence: round2(range(0.3, 0.6)) },
+      { color: background, enabled: true, influence: round2(range(0.3, 0.6)) },
       {
-        color: wash(tokens.primary, round2(range(0.25, 0.5))),
+        color: wash(primary, round2(range(0.25, 0.5))),
         enabled: true,
         influence: round2(range(0.5, 0.9)),
       },
       {
-        color: wash(tokens.accent, round2(range(0.25, 0.55))),
+        color: wash(accent, round2(range(0.25, 0.55))),
         enabled: true,
         influence: round2(range(0.45, 0.85)),
       },
       {
-        color: wash(tokens.secondary, round2(range(0.35, 0.6))),
+        color: wash(secondary, round2(range(0.35, 0.6))),
         enabled: true,
         influence: round2(range(0.35, 0.75)),
       },
-      { color: tokens.background, enabled: true, influence: round2(range(0.25, 0.55)) },
+      { color: background, enabled: true, influence: round2(range(0.25, 0.55)) },
     ],
     speed: spec.speed,
     horizontalPressure: round1(range(2, 5)),
@@ -210,7 +243,7 @@ export function neatConfigFromSpec(
     grainIntensity: round2(range(0.02, 0.1)),
     grainSpeed: 0.3,
     wireframe: false,
-    backgroundColor: tokens.background,
+    backgroundColor: background,
     backgroundAlpha: 1,
   };
 }