npm - @crossworks/share-ui - Versions diffs - 0.232.67 → 0.232.69 - Mend

@crossworks/share-ui 0.232.67 → 0.232.69

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 (3) hide show

package/package.json +3 -3
package/src/app-frame-html.test.ts +56 -0
package/src/app-frame-html.ts +55 -6

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@crossworks/share-ui",
-  "version": "0.232.67",
+  "version": "0.232.69",
   "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.67",
-    "@mantle/content-core": "npm:@crossworks/content-core@0.232.67",
+    "@mantle/client-types": "npm:@crossworks/client-types@0.232.69",
+    "@mantle/content-core": "npm:@crossworks/content-core@0.232.69",
     "@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,59 @@ 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');
+  });
+  it('makes --card translucent over a Neat ground, and ONLY then', () => {
+    // The derived token sits on :root and the override on body — a custom
+    // property may not reference itself on the same element. No spec ⇒ no
+    // override, so apps on a plain brain stay pixel-identical.
+    const html = withNeat();
+    expect(html).toContain('--card-on-neat:color-mix(in oklab,var(--card) 70%,transparent)');
+    expect(html).toContain('body{--card:var(--card-on-neat)}');
+    expect(frame('console.log(1)')).not.toContain('--card-on-neat');
+  });
+});

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
@@ -233,12 +250,44 @@ body{overflow:auto}`
 .min-h-screen,.min-h-dvh,.min-h-svh,.min-h-lvh{min-height:0!important}
 .h-screen,.h-dvh,.h-svh,.h-lvh{height:auto!important}`
 }</style>
+${
+  /* Translucent card surfaces — ONLY when a Neat ground is painted below
+     (no spec ⇒ no override, existing apps stay pixel-identical). 70% is the
+     workspace ListCard's idle alpha, so app cards and host cards read as one
+     system. Token-level on purpose: apps consume the card colour through
+     var(--card) (Tailwind bg-card), so one override restyles them all with no
+     per-app opt-in. The derived token lives on html and the override on body
+     because a custom property may not reference itself on the same element —
+     html still sees the theme's solid --card, body swaps in the mix, and a
+     live theme flip recomputes both. --popover stays solid: floating layers
+     need an opaque ground, same as the host app. */
+  opts.neatSpec
+    ? `<style>:root{--card-on-neat:color-mix(in oklab,var(--card) 70%,transparent)}body{--card:var(--card-on-neat)}</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>`;
 }