@caelo-cms/shared 0.10.60 → 0.10.62

package/src/preview-compose.test.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: MPL-2.0
 
 import { describe, expect, it } from "bun:test";
+import { INTERACTIONS } from "./interactions.js";
 import {
   ComposeError,
   composePagePreview,
@@ -528,11 +529,96 @@ describe("composePageWithLayout", () => {
     expect(out.html).toContain('data-nav-open="false"');
     // Functional assets exactly once, even with two nav placements.
     expect(out.html.split("caelo-nav-toggle{display:none").length - 1).toBe(1);
-    expect(out.html.split("data-nav-open','false'").length - 1).toBe(1);
+    expect(out.html.split(INTERACTIONS["mobile-nav"].js).length - 1).toBe(1);
+    expect(out.html).toContain('data-caelo-ui="mobile-nav"');
     // Zero aesthetics in the functional css: no colors beyond currentColor.
     expect(out.html).not.toMatch(/caelo-nav-toggle\{[^}]*#[0-9a-f]{3}/i);
   });
 
+  it("ships each vetted interaction once per page, whoever asks for it (issue #160)", () => {
+    const tabsModule = {
+      ...blankModule,
+      moduleId: "33333333-3333-4333-8333-333333333304",
+      slug: "pricing-tabs",
+      html: '<div class="pricing" data-caelo-ui="tabs"><div role="tablist"></div></div>',
+      css: ".pricing{display:grid}",
+    };
+    const faqModule = {
+      ...blankModule,
+      moduleId: "33333333-3333-4333-8333-333333333305",
+      slug: "faq",
+      html: '<div class="faq" data-caelo-ui="accordion"><details><summary>Q</summary>A</details></div>',
+    };
+    const out = composePageWithLayout({
+      templateHtml,
+      templateCss: "",
+      blocks: [{ blockName: "content", modules: [tabsModule, faqModule, tabsModule] }],
+      // The layout's own chrome may ask too.
+      layoutHtml: layoutHtml.replace("<body>", "<body><div data-caelo-ui='tabs'></div>"),
+      layoutCss: "",
+      layoutBlocks: [],
+      layoutSlug: "test",
+    });
+    expect(out.html.split(INTERACTIONS.tabs.js).length - 1).toBe(1);
+    expect(out.html.split(INTERACTIONS.tabs.css).length - 1).toBe(1);
+    expect(out.html.split(INTERACTIONS.accordion.js).length - 1).toBe(1);
+    // Registry order, independent of which module asked first.
+    expect(out.html.indexOf(INTERACTIONS.accordion.js)).toBeLessThan(
+      out.html.indexOf(INTERACTIONS.tabs.js),
+    );
+    // Unused ones stay out.
+    expect(out.html).not.toContain(INTERACTIONS.carousel.js);
+    expect(out.html).not.toContain(INTERACTIONS["mobile-nav"].js);
+    // Functional rules follow module CSS so a module display rule cannot unhide a panel.
+    expect(out.html.indexOf(".pricing{display:grid}")).toBeLessThan(
+      out.html.indexOf(INTERACTIONS.tabs.css),
+    );
+  });
+
+  it("ships the interaction a withheld module needs (issue #160)", () => {
+    const gated = {
+      ...blankModule,
+      moduleId: "33333333-3333-4333-8333-333333333306",
+      slug: "gallery",
+      html: '<section class="gallery" data-caelo-ui="carousel"></section>',
+    };
+    const out = composePageWithLayout({
+      templateHtml,
+      templateCss: "",
+      blocks: [{ blockName: "content", modules: [gated] }],
+      layoutHtml,
+      layoutCss: "",
+      layoutBlocks: [],
+      layoutSlug: "test",
+      deferredModules: {
+        [gated.moduleId]: {
+          pluginSlug: "consent-manager",
+          reason: "marketing",
+          placeholderModuleSlug: "consent-placeholder",
+          placeholderHtml: "<p>consent</p>",
+          placeholderCss: "",
+        },
+      },
+    });
+    // The snippet binds by delegation, so it works once the plugin clones
+    // the module out of its <template> after consent.
+    expect(out.html).toContain(INTERACTIONS.carousel.js);
+  });
+
+  it("does not ship anything for a data-caelo-ui value outside the kit (issue #160)", () => {
+    const out = composePagePreview({
+      templateHtml: `<!doctype html><html><head></head><body><caelo-slot name="content"></caelo-slot></body></html>`,
+      templateCss: "",
+      blocks: [
+        {
+          blockName: "content",
+          modules: [{ ...blankModule, html: '<div data-caelo-ui="lightbox"></div>' }],
+        },
+      ],
+    });
+    expect(out.html).not.toContain('data-source="modules"');
+  });
+
   it("injects the invisible technical baseline between theme and modules (issue #151)", () => {
     const out = composePageWithLayout({
       templateHtml,

package/src/preview-compose.ts

@@ -27,7 +27,7 @@
 
 import { BASE_TECHNICAL_CSS } from "./base-css.js";
 import type { ModuleFieldKind } from "./content.js";
-import { NAV_FUNCTIONAL_CSS, NAV_TOGGLE_JS } from "./interactions.js";
+import { findInteractionIds, interactionAssets } from "./interactions.js";
 import { type LinkResolver, resolveLinkRefsInHtml } from "./link-refs.js";
 import {
   type NestedModuleResource,
@@ -276,8 +276,6 @@ export function composePagePreview(input: ComposeInput): ComposeOutput {
   const contentByName = new Map<string, string>();
   const allCss: string[] = [];
   const allJs: string[] = [];
-  // issue #160 — see composePageWithLayout.
-  let navRendered = false;
   // issue #158 — same per-module dedup as composePageWithLayout.
   const seenAssetModules = new Set<string>();
   const moduleFailures: ComposeModuleFailure[] = [];
@@ -298,7 +296,6 @@ export function composePagePreview(input: ComposeInput): ComposeOutput {
       const navMenuItems = lookupNavMenuItems(m.slug, input.structuredSets);
       let baseHtml: string;
       if (navMenuItems !== null) {
-        navRendered = true;
         const nav = renderNavMenuHtml(navMenuItems, input.linkResolver);
         baseHtml = nav.html;
         recordFailures(moduleFailures, block.blockName, m, nav.failures);
@@ -328,13 +325,12 @@ export function composePagePreview(input: ComposeInput): ComposeOutput {
     }
   }
 
-  if (navRendered) {
-    allCss.push(NAV_FUNCTIONAL_CSS);
-    allJs.push(NAV_TOGGLE_JS);
-  }
-
   const replaced = applySlotReplacements(input.templateHtml, { contentByName });
   let html = replaced.html;
+  // issue #160 — see composePageWithLayout.
+  const interactions = interactionAssets(new Set(findInteractionIds(html).known));
+  allCss.push(...interactions.css);
+  allJs.push(...interactions.js);
 
   // Theme brand metadata (favicon) leads the injected head block — it
   // is document metadata, not styling, and is independent of the
@@ -462,13 +458,13 @@ function renderNavMenuHtml(
     return typeof o.label === "string" && typeof o.href === "string";
   });
   // issue #160 — mobile-ready markup: toggle button (three functional
-  // bars via currentColor) + collapsible list. The functional CSS/JS
-  // ships once per page from ./interactions.ts when a nav rendered.
+  // bars via currentColor) + collapsible list. `data-caelo-ui` pulls the
+  // functional CSS/JS from ./interactions.ts in once per page.
   const toggle =
     '<button type="button" class="caelo-nav-toggle" aria-expanded="false" aria-label="Menu">' +
     '<span class="caelo-nav-bar"></span><span class="caelo-nav-bar"></span><span class="caelo-nav-bar"></span>' +
     "</button>";
-  const html = `<nav class="caelo-nav-menu" data-nav-open="false">${toggle}<ul>${safeItems.map(renderNavItem).join("")}</ul></nav>`;
+  const html = `<nav class="caelo-nav-menu" data-caelo-ui="mobile-nav" data-nav-open="false">${toggle}<ul>${safeItems.map(renderNavItem).join("")}</ul></nav>`;
   return { html, failures: missing.map((reason) => ({ field: "", reason })) };
 }
 
@@ -794,9 +790,6 @@ export function composePageWithLayout(input: ComposeWithLayoutInput): ComposeOut
   // brittle and reads as a bug).
   const cssParts: string[] = [];
   const jsParts: string[] = [];
-  // issue #160 — set when any nav-menu module rendered; pulls the
-  // functional nav CSS/JS in exactly once per page.
-  let navRendered = false;
   // issue #158 — a module placed N times contributes its CSS/JS ONCE
   // (first occurrence wins; source order is otherwise preserved).
   // Duplicate rule blocks made the cascade order-dependent and bloated
@@ -821,7 +814,6 @@ export function composePageWithLayout(input: ComposeWithLayoutInput): ComposeOut
     const navMenuItems = lookupNavMenuItems(m.slug, input.structuredSets);
     let baseHtml: string;
     if (navMenuItems !== null) {
-      navRendered = true;
       const nav = renderNavMenuHtml(navMenuItems, input.linkResolver);
       baseHtml = nav.html;
       recordFailures(moduleFailures, blockName, m, nav.failures);
@@ -913,11 +905,6 @@ export function composePageWithLayout(input: ComposeWithLayoutInput): ComposeOut
     if (css.trim().length > 0) cssParts.push(css);
   }
 
-  if (navRendered) {
-    cssParts.push(NAV_FUNCTIONAL_CSS);
-    jsParts.push(NAV_TOGGLE_JS);
-  }
-
   // 3. Render the layout HTML, substituting all named slots. The
   //    layout's own markup (the page frame around the blocks) stores
   //    internal links as references too (#724 rollout C canonicalises
@@ -932,6 +919,14 @@ export function composePageWithLayout(input: ComposeWithLayoutInput): ComposeOut
   });
   let html = replaced.html;
 
+  // issue #160 — every vetted interaction the page's markup asks for
+  // (`data-caelo-ui="…"`, from modules, the nav renderer, the layout or
+  // the template, withheld modules included) ships once, after module
+  // CSS/JS so its functional rules win over a module's display rules.
+  const interactions = interactionAssets(new Set(findInteractionIds(html).known));
+  cssParts.push(...interactions.css);
+  jsParts.push(...interactions.js);
+
   // Theme brand metadata (favicon) — see composePagePreview.
   const themeHeadLinks = themeHeadFragment(input.theme);
   if (themeHeadLinks !== null) {

package/src/release-manifest.ts

@@ -31,6 +31,9 @@ const GHSA_ID = /^GHSA(-[23456789cfghjmpqrvwx]{4}){3}$/;
 
 const digest = z.string().regex(IMAGE_DIGEST, "expected sha256:<64 hex>");
 
+/** The longest `ownerAction` a release may declare: one sentence. */
+export const OWNER_ACTION_MAX_CHARS = 300;
+
 /** Zod schema of `release-manifest.json` (manifestVersion 1). */
 export const ReleaseManifestSchema = z.object({
   manifestVersion: z.literal(1),
@@ -55,6 +58,15 @@ export const ReleaseManifestSchema = z.object({
   /** Set only via the release-cut input, backed by published GitHub Security Advisories. */
   security: z.boolean(),
   advisories: z.array(z.string().regex(GHSA_ID, "expected a GHSA id")),
+  /**
+   * #868 — what the Owner has to do for this release's breaking change, in
+   * one sentence (Settings → Updates shows it under "Before you update").
+   * Set from the release-cut input; the release checks refuse a release
+   * with a breaking commit without it. Absent on releases from before the
+   * field and on releases without a breaking change: optional, so
+   * manifestVersion stays 1 and older readers ignore it.
+   */
+  ownerAction: z.string().min(1).max(OWNER_ACTION_MAX_CHARS).optional(),
 });
 export type ReleaseManifest = z.infer<typeof ReleaseManifestSchema>;
 

package/src/static-security-headers.test.ts

@@ -0,0 +1,60 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * #863 / #891 — the media security headers. The CSP must reach every SVG
+ * (the second line behind `sanitizeSvg`) and must NOT reach a PDF:
+ * `sandbox` stops Chrome's built-in viewer from opening it.
+ */
+
+import { describe, expect, it } from "bun:test";
+import {
+  isSvgContentType,
+  mediaSecurityHeaders,
+  SVG_DOCUMENT_CSP,
+  SVG_PATH_PATTERN,
+} from "./static-security-headers.js";
+
+describe("mediaSecurityHeaders", () => {
+  it("sandboxes SVG documents without script, network or plugins", () => {
+    const h = mediaSecurityHeaders("image/svg+xml");
+    expect(h["content-security-policy"]).toBe(SVG_DOCUMENT_CSP);
+    expect(SVG_DOCUMENT_CSP).toContain("default-src 'none'");
+    expect(SVG_DOCUMENT_CSP).toContain("sandbox");
+    expect(SVG_DOCUMENT_CSP).not.toContain("script-src");
+    expect(h["x-content-type-options"]).toBe("nosniff");
+  });
+
+  it("matches the SVG type regardless of case or parameters", () => {
+    expect(mediaSecurityHeaders("Image/SVG+XML; charset=utf-8")["content-security-policy"]).toBe(
+      SVG_DOCUMENT_CSP,
+    );
+    expect(isSvgContentType(" image/svg+xml ")).toBe(true);
+    expect(isSvgContentType("image/png")).toBe(false);
+  });
+
+  it("keeps embedded rasters and inline styles rendering", () => {
+    expect(SVG_DOCUMENT_CSP).toContain("img-src data:");
+    expect(SVG_DOCUMENT_CSP).toContain("style-src 'unsafe-inline'");
+  });
+
+  it("leaves PDFs and rasters openable (nosniff only)", () => {
+    for (const type of ["application/pdf", "image/png", "image/webp", "video/mp4", "text/html"]) {
+      expect(mediaSecurityHeaders(type)).toEqual({ "x-content-type-options": "nosniff" });
+    }
+  });
+});
+
+describe("SVG_PATH_PATTERN", () => {
+  it("matches .svg paths in any case and nothing else", () => {
+    for (const p of ["/_assets/logo.0123456789abcdef.svg", "/_assets/LOGO.SVG", "icon.Svg"]) {
+      expect(new RegExp(SVG_PATH_PATTERN).test(p)).toBe(true);
+    }
+    for (const p of ["/_assets/logo.svgz", "/_assets/svg/logo.png", "/about/", "/x.svg/"]) {
+      expect(new RegExp(SVG_PATH_PATTERN).test(p)).toBe(false);
+    }
+  });
+
+  it("uses no inline flags or lookaround, so RE2 (Firebase Hosting) accepts it", () => {
+    expect(SVG_PATH_PATTERN).not.toMatch(/\(\?/);
+  });
+});

package/src/static-security-headers.ts

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * Security response headers for uploaded media and the published static
+ * site — the one definition the admin's media routes, the staging preview,
+ * every static publisher and every provider stack's edge config derive
+ * from (#863, #891).
+ *
+ * An SVG opened directly (`https://<site>/_assets/logo.<hash>.svg`) is a
+ * document, not an image: it runs script in the origin it is served from.
+ * On the public site that origin also serves `/api/*` (the gateway behind
+ * the same load balancer, CLAUDE.md §11.B), on the admin it holds the
+ * operator's session. `sanitizeSvg` strips script at upload; this CSP is
+ * the line behind it should a construct ever get past the sanitizer: no
+ * script, no plugins, no network, and `sandbox` gives the document an
+ * opaque origin. Inline styles and `data:` rasters / fonts stay allowed so
+ * an SVG renders exactly as before — as a document and as an `<img>`.
+ * Browsers apply a CSP only to documents (and workers), so the header
+ * changes nothing for an SVG loaded through `<img>` or CSS.
+ *
+ * Only SVG gets the CSP: raster images, video and fonts cannot run script,
+ * and `sandbox` would stop Chrome's built-in viewer from opening a PDF.
+ * `nosniff` goes on everything so a browser never reinterprets bytes as a
+ * scriptable type the content-type did not declare.
+ */
+
+/** The CSP an SVG document is served with (see the file comment). */
+export const SVG_DOCUMENT_CSP =
+  "default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:; sandbox";
+
+/** `X-Content-Type-Options` value every media / static response carries. */
+export const NOSNIFF = "nosniff";
+
+/** The MIME type the CSP is keyed on. */
+export const SVG_CONTENT_TYPE = "image/svg+xml";
+
+/**
+ * Regex (source string, unanchored at the start) matching a URL path that
+ * ends in `.svg`, any case. Only syntax shared by ECMAScript and RE2 (no
+ * inline flags), so the same string serves Firebase Hosting's `regex`
+ * header matcher and `RegExp` here. The static generator names every file
+ * by extension (`contentTypeFor` in admin-core), so the extension is what
+ * decides the served `image/svg+xml`.
+ */
+export const SVG_PATH_PATTERN = "\\.[sS][vV][gG]$";
+
+/** True when `contentType` is SVG (case and parameters such as `; charset=` ignored). */
+export function isSvgContentType(contentType: string): boolean {
+  return (contentType.split(";")[0] ?? "").trim().toLowerCase() === SVG_CONTENT_TYPE;
+}
+
+/**
+ * Security headers for one media / static-file response.
+ *
+ * @param contentType - the `content-type` the response is served with.
+ * @returns lower-case header entries to spread into the response's headers.
+ * @example
+ *   new Response(body, { headers: { "Content-Type": ct, ...mediaSecurityHeaders(ct) } });
+ */
+export function mediaSecurityHeaders(contentType: string): Record<string, string> {
+  const headers: Record<string, string> = { "x-content-type-options": NOSNIFF };
+  if (isSvgContentType(contentType)) headers["content-security-policy"] = SVG_DOCUMENT_CSP;
+  return headers;
+}

package/src/version.ts

@@ -22,7 +22,7 @@
  * follow standard SemVer.
  */
 
-export const CAELO_VERSION = "0.10.60";
+export const CAELO_VERSION = "0.10.62";
 
 /**
  * Deprecated alias for back-compat — early P17 work spelled this