npm - @crossworks/share-ui - Versions diffs - 0.232.66 → 0.232.68 - Mend

@crossworks/share-ui 0.232.66 → 0.232.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +3 -3
package/src/app-frame-html.test.ts +46 -0
package/src/app-frame-html.ts +39 -6
package/src/neat-background.test.ts +58 -0
package/src/neat-background.ts +41 -8

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@crossworks/share-ui",
-  "version": "0.232.66",
+  "version": "0.232.68",
   "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.68",
+    "@mantle/content-core": "npm:@crossworks/content-core@0.232.68",
     "@radix-ui/react-label": "^2.1.12",
     "@radix-ui/react-slot": "^1.3.0",
     "class-variance-authority": "^0.7.1",

package/src/app-frame-html.test.ts CHANGED Viewed

@@ -49,3 +49,49 @@ describe('buildAppFrameHtml — error reporting', () => {
     expect(html).toContain('<script type="importmap">{"imports":{}}</script>');
   });
 });
+describe('buildAppFrameHtml — the Neat backdrop', () => {
+  const SPEC = '{"v":1,"seed":42,"tone":"auto","speed":2}';
+  const withNeat = (neatLicense?: string | null) =>
+    buildAppFrameHtml({
+      bundleCode: 'console.log(1)',
+      appCss: '',
+      importMapJson: '{"imports":{}}',
+      cls: 'dark',
+      colorTheme: 'darkmatter',
+      viewport: true,
+      neatSpec: SPEC,
+      neatLicense,
+    });
+  it('renders no host div and no runtime script without a spec', () => {
+    const html = frame('console.log(1)');
+    expect(html).not.toContain('data-neat-spec');
+    expect(html).not.toContain('share-page.js');
+  });
+  it('renders the host div at z-index:-1 plus the runtime script with a spec', () => {
+    const html = withNeat();
+    expect(html).toContain('data-neat-spec="{&quot;v&quot;:1');
+    expect(html).toContain('z-index:-1');
+    expect(html).toContain('src="/share-runtime/share-page.js"');
+    // No reader attribute — the runtime must never mount its toggle in a frame.
+    expect(html).not.toContain('data-share-mode-default');
+  });
+  it('keeps html transparent so the body ground propagates BENEATH the canvas', () => {
+    const html = withNeat();
+    // Body ground + transparent html is the /s arrangement: the background
+    // propagates to the canvas layer, under the z-index:-1 backdrop. An html
+    // background (or a bg-background class painting body as an element)
+    // would sit above the backdrop and hide it.
+    expect(html).toContain('body{background:var(--background)}');
+    expect(html).not.toContain('html{background');
+    expect(html).not.toContain('<body class="bg-background');
+  });
+  it('carries the licence only when set', () => {
+    expect(withNeat('k-1')).toContain('data-neat-license="k-1"');
+    expect(withNeat()).not.toContain('data-neat-license');
+  });
+});

package/src/app-frame-html.ts CHANGED Viewed

@@ -38,7 +38,10 @@ export function buildAppFrameCsp(origin: string): string {
     // inside the AppSandbox iframe it composes with the identical attribute.
     `sandbox allow-scripts; ` +
     `default-src 'none'; style-src 'unsafe-inline' ${origin}/share-runtime/; ` +
-    `script-src 'unsafe-inline' ${origin}/app-runtime/; ` +
+    // share-runtime scripts joined app-runtime for the Neat backdrop
+    // (share-page.js + its lazy WebGL chunk) — same-origin built assets,
+    // no new capability.
+    `script-src 'unsafe-inline' ${origin}/app-runtime/ ${origin}/share-runtime/; ` +
     `img-src data: blob: ${origin}; ` +
     `font-src data: ${origin}/share-runtime/ ${origin}/fonts/; ` +
     "connect-src 'none'; base-uri 'none'; form-action 'none'"
@@ -185,6 +188,14 @@ export function buildAppFrameHtml(opts: {
   colorTheme: string | null;
   /** Viewport frame (iframe IS the viewport) vs card frame (auto-sized). */
   viewport: boolean;
+  /** The brain's saved Neat background spec (canonical encoding), or
+   *  null/absent for the plain themed ground. Resolved server-side by the
+   *  frame route — owner frames from the prefs alone, shared frames gated by
+   *  the shareNeat switch. */
+  neatSpec?: string | null;
+  /** Neat licence key for watermark removal — same env-sourced value the
+   *  other surfaces ride. */
+  neatLicense?: string | null;
 }): string {
   const colorThemeAttr = opts.colorTheme ? ` data-color-theme="${attr(opts.colorTheme)}"` : '';
   return `<!doctype html>
@@ -205,8 +216,14 @@ export function buildAppFrameHtml(opts: {
 <style>/* Paint the iframe canvas with the theme background, NOT transparent: a
    sandboxed (opaque-origin) iframe renders WHITE where it's transparent, so any
    gap between the app content and the iframe height showed a white strip. With
-   the themed background, any such gap is invisible (matches the app + host). */
-html,body{margin:0;background:var(--background)}#root{padding:0}
+   the themed background, any such gap is invisible (matches the app + host).
+   The ground lives on BODY with html left transparent — the /s reader's exact
+   arrangement, and load-bearing for the Neat backdrop: a body background on a
+   transparent html PROPAGATES to the canvas, painted beneath everything
+   including the backdrop's z-index:-1 host, while a background on html (or a
+   non-propagating body background) paints in the normal layers, above the
+   backdrop, and hides it. */
+html,body{margin:0}body{background:var(--background)}#root{padding:0}
 /* Themed scrollbars for the WHOLE app. The host only styles scrollbars behind an
    opt-in .scrollbar-thin class, so an app's own scroll containers otherwise fall
    back to the default wide OS scrollbar with a white/grey track that clashes with
@@ -234,11 +251,27 @@ body{overflow:auto}`
 .h-screen,.h-dvh,.h-svh,.h-lvh{height:auto!important}`
 }</style>
 </head>
-<body class="bg-background text-foreground">
-<div id="root"></div>
+<body class="text-foreground">
+${
+  /* The brain's saved Neat gradient, rendered INSIDE the frame document —
+     the iframe is opaque-origin (sandbox without allow-same-origin), so
+     transparency renders WHITE and the host page's backdrop can never show
+     through; the only way the background "transfers" into an app is to
+     paint it here. Same host-div + share-page.js contract as the /s reader
+     (no mode toggle mounts — that requires the reader's
+     data-share-mode-default, which frames deliberately lack), and the
+     runtime's class observer repaints it when the parent posts a theme
+     change. z-index:-1 sits above the html ground (the canvas layer) and
+     below all app content. */
+  opts.neatSpec
+    ? `<div data-neat-spec="${attr(opts.neatSpec)}"${
+        opts.neatLicense ? ` data-neat-license="${attr(opts.neatLicense)}"` : ''
+      } style="position:fixed;inset:0;z-index:-1;pointer-events:none" aria-hidden="true"></div>\n`
+    : ''
+}<div id="root"></div>
 <script>${ERROR_REPORTER}</script>
 <script type="module">${opts.bundleCode}</script>
 <script>${INSPECTOR}</script>
-</body>
+${opts.neatSpec ? `<script type="module" src="/share-runtime/share-page.js"></script>\n` : ''}</body>
 </html>`;
 }

package/src/neat-background.test.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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,
   };
 }