@rathnasgala2/template 3.0.1 → 3.1.0

package/README.md

@@ -551,7 +551,7 @@ npm run format          # apply Prettier
 npm run format:check    # CI check
 npm run lint            # ESLint flat config
 npm run typecheck       # tsc --checkJs --noEmit against types/index.d.ts
-npm run architecture    # dependency-cruiser: no src/modules/, no circular deps
+npm run architecture    # dependency-cruiser: core never imports src/modules, no circular deps
 npm run duplication     # jscpd, 3% / 50 tokens
 npm run contracts:generate  # (re)write contracts/*.jcs from their reviewed source modules
 npm run contracts:check     # fail if committed contracts drifted
@@ -569,23 +569,25 @@ npm run audit               # npm audit --audit-level=high
 ## Package layout
 
 ```text
-src/core/                                # the only source root
+src/core/                                # the renderer
+src/modules/interactions/browser/        # the reader-interactions browser script (emitted as data)
 contracts/render-policy.jcs              # normalized-body policy identity (real content)
 contracts/theme-styling-contract.jcs     # published styling catalog (real and closed)
 ```
 
-No `src/modules/` tree, module import edge, registration stub, module
-configuration, module output or module runtime is ever admitted beside
-`src/core/`. `test/module-tree-absence.test.js` and `.dependency-cruiser.cjs`'s
-`only-src-core-is-a-source-root` rule both enforce this; `interactions`,
-`whitelabel`, `newsletter` and `prism` have no module directory, package,
-configuration schema, stub, output, runtime code, network target or
-compatibility promise in this MVP.
+`src/core/` and `src/modules/interactions/` are the only source roots, and
+`src/core` never imports from `src/modules`: the interactions browser script is
+read from disk and emitted as `assets/gala-interactions-v1.js` when
+`build-input.modules.interactions` is present.
+`test/module-tree-absence.test.js`, `.dependency-cruiser.cjs` and the ESLint
+`no-restricted-imports` rule enforce this. `whitelabel`, `newsletter` and
+`prism` have no module directory, package, configuration schema, stub, output or
+runtime code in this MVP.
 
 ## Consuming `@rathnasgala2/schemas`
 
-This repository consumes `@rathnasgala2/schemas@3.0.0` from the public npm
-registry, declared as `"@rathnasgala2/schemas": "3.0.0"` (exact pin, no range)
+This repository consumes `@rathnasgala2/schemas@3.1.0` from the public npm
+registry, declared as `"@rathnasgala2/schemas": "3.1.0"` (exact pin, no range)
 so `package-lock.json` records the resolved version and integrity hash. The
 LOCAL-1/LOCAL-39 local-tarball convention
 (`file:../../local-packages/rathnasgala2-schemas-*.tgz`) is retired for this

package/contracts/render-policy.jcs

@@ -1 +1 @@
-{"contentSecurityPolicy":"default-src 'none'; base-uri 'none'; object-src 'none'; frame-ancestors 'none'; form-action 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; manifest-src 'self'; worker-src 'none'","contentSecurityPolicyHeaderOnlyDirectives":["frame-ancestors 'none'"],"contentSecurityPolicyMeta":"default-src 'none'; base-uri 'none'; object-src 'none'; form-action 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; manifest-src 'self'; worker-src 'none'","highlighter":{"grammars":["bash","css","diff","java","javascript","json","jsx","markdown","markup","python","sql","tsx","typescript","yaml"],"package":"@11ty/eleventy-plugin-syntaxhighlight","tokenClasses":["atrule","attr-equals","attr-name","attr-value","bold","boolean","builtin","cdata","char","class-name","comment","constant","content","coord","deleted","deleted-sign","doctype","entity","for-or-select","function","function-variable","important","inserted","inserted-sign","interpolation","interpolation-punctuation","italic","key","keyword","namespace","null","number","operator","prefix","prolog","property","punctuation","regex","rule","selector","shebang","string","symbol","tag","template-punctuation","template-string","title","token","url","variable"],"version":"5.0.2"},"markdownIt":{"options":{"html":false,"linkify":false,"typographer":false},"package":"markdown-it","version":"14.3.1"},"name":"gala-render-policy","sanitizer":{"allowedAttributes":{"a":["href","rel"],"code":["class"],"h1":["id"],"h2":["id"],"h3":["id"],"h4":["id"],"h5":["id"],"h6":["id"],"img":["src","alt"],"ol":["start"],"pre":["class"],"span":["class"]},"allowedTags":["p","br","hr","h1","h2","h3","h4","h5","h6","ul","ol","li","blockquote","pre","code","strong","em","b","i","u","s","del","ins","sub","sup","mark","small","wbr","a","img","table","thead","tbody","tr","th","td","dl","dt","dd","figure","figcaption","span"],"allowedUrlSchemes":["https","http","mailto"],"package":"sanitize-html","version":"2.17.7"},"version":"2.0.0"}
+{"contentSecurityPolicy":"default-src 'none'; base-uri 'none'; object-src 'none'; frame-ancestors 'none'; form-action 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self' https://api.galascribe.com; media-src 'self'; manifest-src 'self'; worker-src 'none'","contentSecurityPolicyHeaderOnlyDirectives":["frame-ancestors 'none'"],"contentSecurityPolicyMeta":"default-src 'none'; base-uri 'none'; object-src 'none'; form-action 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self' https://api.galascribe.com; media-src 'self'; manifest-src 'self'; worker-src 'none'","highlighter":{"grammars":["bash","css","diff","java","javascript","json","jsx","markdown","markup","python","sql","tsx","typescript","yaml"],"package":"@11ty/eleventy-plugin-syntaxhighlight","tokenClasses":["atrule","attr-equals","attr-name","attr-value","bold","boolean","builtin","cdata","char","class-name","comment","constant","content","coord","deleted","deleted-sign","doctype","entity","for-or-select","function","function-variable","important","inserted","inserted-sign","interpolation","interpolation-punctuation","italic","key","keyword","namespace","null","number","operator","prefix","prolog","property","punctuation","regex","rule","selector","shebang","string","symbol","tag","template-punctuation","template-string","title","token","url","variable"],"version":"5.0.2"},"markdownIt":{"options":{"html":false,"linkify":false,"typographer":false},"package":"markdown-it","version":"14.3.1"},"name":"gala-render-policy","sanitizer":{"allowedAttributes":{"a":["href","rel"],"code":["class"],"h1":["id"],"h2":["id"],"h3":["id"],"h4":["id"],"h5":["id"],"h6":["id"],"img":["src","alt"],"ol":["start"],"pre":["class"],"span":["class"]},"allowedTags":["p","br","hr","h1","h2","h3","h4","h5","h6","ul","ol","li","blockquote","pre","code","strong","em","b","i","u","s","del","ins","sub","sup","mark","small","wbr","a","img","table","thead","tbody","tr","th","td","dl","dt","dd","figure","figcaption","span"],"allowedUrlSchemes":["https","http","mailto"],"package":"sanitize-html","version":"2.17.7"},"version":"2.0.0"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala2/template",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Deterministic Eleventy-backed static publication renderer for Galascribe portable repositories.",
   "type": "module",
   "license": "Apache-2.0",
@@ -22,6 +22,7 @@
   "types": "./types/index.d.ts",
   "files": [
     "src/core/",
+    "src/modules/",
     "contracts/",
     "types/",
     "LICENSE",
@@ -52,7 +53,7 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "lint": "eslint .",
-    "typecheck": "tsc --project tsconfig.json",
+    "typecheck": "tsc --project tsconfig.json && tsc --project tsconfig.modules.json",
     "architecture": "depcruise --validate .dependency-cruiser.cjs src contracts eslint.config.js",
     "duplication": "jscpd src scripts test eslint.config.js",
     "contracts:generate": "node scripts/generate-contracts.mjs",
@@ -71,7 +72,7 @@
   "dependencies": {
     "@11ty/eleventy": "3.1.6",
     "@11ty/eleventy-plugin-syntaxhighlight": "5.0.2",
-    "@rathnasgala2/schemas": "3.0.0",
+    "@rathnasgala2/schemas": "3.1.0",
     "jpeg-js": "0.4.4",
     "markdown-it": "14.3.1",
     "sanitize-html": "2.17.7"

package/src/core/index.js

@@ -83,8 +83,16 @@ import {
   assertPolicyConformantHtml,
   assertRenderPolicyIdentity,
   computeRenderPolicyIdentity,
+  contentSecurityPolicyMetaTag,
 } from './internal/content-security.js';
 import { renderPagesWithEleventy } from './internal/eleventy-render.js';
+import {
+  INTERACTIONS_SCRIPT_MEDIA_TYPE,
+  INTERACTIONS_SCRIPT_PATH,
+  interactionsActive,
+  loadInteractionsScript,
+  validateInteractionsModule,
+} from './internal/interactions.js';
 import {
   ATOM_FEED_ROUTE,
   RSS_FEED_ROUTE,
@@ -241,8 +249,9 @@ function assertOptions(options) {
  * Verify every `renderableBody.renderPolicy` in the publication profile,
  * footer card and every content record byte-equals the currently published
  * render-policy identity, and that no module or placement value leaked
- * through (belt-and-suspenders on top of the `build-input:2.0.0` schema's
- * own `modules: {}` / `placements: []` closure). Fails closed before any
+ * through (belt-and-suspenders on top of the `build-input` schema's module
+ * closure: only a valid `interactions` module is admitted, `placements` stays
+ * empty). Fails closed before any
  * directory is created or Eleventy ever runs: an absent policy file, wrong
  * path/name/version/digest, mixed identity between records, or body
  * produced under a different policy rejects before build.
@@ -252,14 +261,20 @@ function assertOptions(options) {
  * @returns {Promise<void>} resolves once every reference is verified
  */
 async function assertRenderPolicyCompliance(validatedInput) {
-  if (
-    Object.keys(validatedInput.modules).length !== 0 ||
-    validatedInput.placements.length !== 0
-  ) {
+  const moduleKeys = Object.keys(validatedInput.modules);
+  if (moduleKeys.some((key) => key !== 'interactions')) {
     throw new RenderPolicyViolationError(
-      'build-input.modules and build-input.placements must both be empty in S2',
+      'build-input.modules may only carry interactions',
     );
   }
+  if (validatedInput.placements.length !== 0) {
+    throw new RenderPolicyViolationError(
+      'build-input.placements must be empty',
+    );
+  }
+  if (validatedInput.modules.interactions !== undefined) {
+    validateInteractionsModule(validatedInput.modules.interactions);
+  }
 
   const identity = await computeRenderPolicyIdentity();
 
@@ -343,6 +358,17 @@ export async function renderPublication(buildInput, options) {
     validatedInput.baseUrl,
     validatedInput.basePath,
   );
+  const interactionsModule = validatedInput.modules.interactions;
+  const interactionsOn = interactionsActive(interactionsModule);
+  // One CSP per build: the production policy, plus (local stack only) the
+  // interactions module's differing API origin in `connect-src`.
+  const cspMetaTag = contentSecurityPolicyMetaTag(
+    interactionsModule?.apiOrigin,
+  );
+  const interactionsScriptHref = joinBasePathAndRoute(
+    publicBasePath,
+    `/${INTERACTIONS_SCRIPT_PATH}`,
+  );
   const urlPrefix = derivePublicBasePath(validatedInput.baseUrl, '/');
   const homeRoute = joinPublicRoute(publicBasePath, '/');
 
@@ -500,7 +526,10 @@ export async function renderPublication(buildInput, options) {
   const generatedPages = buildGeneratedPages(validatedInput, {
     mediaAssets,
     mediaDimensions,
+    interactions: interactionsOn ? interactionsModule : undefined,
   });
+  /** @type {Set<string>} output paths of the interaction-bearing routes */
+  const interactionBearingPaths = new Set();
   generatedPages.forEach((page, index) => {
     const joinedRoute = joinBasePathAndRoute(
       validatedInput.basePath,
@@ -520,10 +549,12 @@ export async function renderPublication(buildInput, options) {
       basePath: publicBasePath,
     });
     const ogImage = ogImageInfo?.url;
+    const pagePermalink = projectRouteToFilePath(joinedRoute, routeProfile);
+    if (page.interactionBearing) interactionBearingPaths.add(pagePermalink);
     contentPages.push({
       virtualPath: `pages/${page.kind}-${index}.html`,
       content: bodyHtml,
-      permalink: projectRouteToFilePath(joinedRoute, routeProfile),
+      permalink: pagePermalink,
       layout: 'skeleton.njk',
       data: {
         title: page.documentTitle ?? page.title,
@@ -552,6 +583,10 @@ export async function renderPublication(buildInput, options) {
         atomFeedUrl: feeds.atomSelfUrl,
         rssFeedUrl: feeds.rssSelfUrl,
         appearanceScriptHref: appearanceScriptHrefValue,
+        interactionsScriptHref: page.interactionBearing
+          ? interactionsScriptHref
+          : undefined,
+        cspMetaTag,
         baseStylesheetHref: baseStylesheetHrefValue,
         themeStylesheetLinksHtml,
       },
@@ -623,6 +658,7 @@ export async function renderPublication(buildInput, options) {
       atomFeedUrl: feeds.atomSelfUrl,
       rssFeedUrl: feeds.rssSelfUrl,
       appearanceScriptHref: appearanceScriptHrefValue,
+      cspMetaTag,
       baseStylesheetHref: baseStylesheetHrefValue,
       themeStylesheetLinksHtml,
     },
@@ -767,7 +803,7 @@ export async function renderPublication(buildInput, options) {
       byteLength: String(bytes.byteLength),
       sha256: digestBytes(bytes),
       routeClass: special?.routeClass ?? 'html',
-      interactionBearing: false,
+      interactionBearing: interactionBearingPaths.has(filePath),
     });
   }
   routes.sort((a, b) => compareUtf8Bytes(a.path, b.path));
@@ -897,10 +933,39 @@ export async function renderPublication(buildInput, options) {
     immutable: false,
   };
 
+  // The reader-interactions browser script, only when the module is on. Its
+  // bytes are the template package's own file, so the asset row is a pure
+  // function of the template version.
+  /** @type {import('../../types/index.d.ts').ManifestAssetEntry[]} */
+  const interactionsAssets = [];
+  if (interactionsOn) {
+    const interactionsScriptBytes = await loadInteractionsScript();
+    const joinedInteractionsScriptPath = projectFixedAssetPath(
+      validatedInput.basePath,
+      `/${INTERACTIONS_SCRIPT_PATH}`,
+    );
+    const interactionsScriptDestination = path.join(
+      outputDirectory,
+      joinedInteractionsScriptPath,
+    );
+    await mkdir(path.dirname(interactionsScriptDestination), {
+      recursive: true,
+    });
+    await writeFile(interactionsScriptDestination, interactionsScriptBytes);
+    interactionsAssets.push({
+      path: joinedInteractionsScriptPath,
+      mediaType: INTERACTIONS_SCRIPT_MEDIA_TYPE,
+      byteLength: String(interactionsScriptBytes.byteLength),
+      sha256: digestBytes(interactionsScriptBytes),
+      immutable: false,
+    });
+  }
+
   const assets = [
     ...joinedMediaAssets,
     appearanceScriptAsset,
     baseStylesheetAsset,
+    ...interactionsAssets,
     ...(themeAssetsResult ? themeAssetsResult.assets : []),
   ].sort((a, b) => compareUtf8Bytes(a.path, b.path));
 

package/src/core/internal/appearance/base-layer.js

@@ -654,6 +654,83 @@ export const GALA_BASE_COMPONENT_CSS = `
   [aria-selected="true"] > .g-search-hit > .g-icon { opacity: 1; color: var(--gala-color-accent); }
   .g-search-empty { padding: var(--gala-space-6) var(--gala-space-4); color: var(--gala-color-text-muted); font-family: var(--gala-font-ui); text-align: center; }
 
+  /* reader interactions: server-rendered section and the classes the browser script creates */
+  .g-interactions { display: grid; gap: var(--gala-space-4); min-width: 0; padding: var(--gala-space-6); border-radius: var(--gala-radius-large); background: var(--gala-color-surface); border: var(--gala-border-card); font-family: var(--gala-font-ui); }
+  .g-interactions__title { font-family: var(--gala-font-display); font-weight: var(--gala-weight-title); font-size: 1.25rem; letter-spacing: var(--gala-tracking-title); text-transform: var(--gala-title-transform); line-height: 1.2; }
+  .g-interactions__notice, .g-interactions__status { font-size: .875rem; color: var(--gala-color-text-muted); overflow-wrap: anywhere; }
+  .g-interactions__status:empty { display: none; }
+  .g-interactions__signout { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--gala-color-link); text-decoration: underline; text-underline-offset: var(--gala-link-offset); cursor: pointer; }
+  .g-interactions__signout:hover { color: var(--gala-color-text); }
+  .g-reactions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2); }
+  .g-reaction {
+    display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; max-width: 100%; padding: .45rem .95rem;
+    border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: var(--gala-color-canvas); color: var(--gala-color-text-muted);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; line-height: 1.2; cursor: pointer;
+    transition: transform var(--gala-duration-fast) var(--gala-ease-standard), border-color var(--gala-duration-fast) var(--gala-ease-standard), color var(--gala-duration-fast) var(--gala-ease-standard), background-color var(--gala-duration-fast) var(--gala-ease-standard);
+  }
+  .g-reaction:hover:not(:disabled) { border-color: var(--gala-color-text); color: var(--gala-color-text); }
+  .g-reaction:active:not(:disabled) { transform: scale(.96); }
+  .g-reaction:disabled { opacity: .55; cursor: default; }
+  .g-reaction__icon { display: inline-grid; place-items: center; font-size: 1.1rem; line-height: 1; }
+  .g-reaction__icon .g-icon { width: 1.15rem; height: 1.15rem; }
+  .g-reaction__label { overflow-wrap: anywhere; }
+  .g-reaction__count { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--gala-color-text-faint); padding-left: var(--gala-space-2); border-left: var(--gala-border-width) solid var(--gala-color-border); }
+  .g-reaction__count:empty { display: none; }
+  .g-reaction[aria-pressed="true"], .g-reaction--active { border-color: var(--gala-color-accent); background: var(--gala-paint-chip); color: var(--gala-color-chip-text); }
+  .g-reaction[aria-pressed="true"] .g-icon, .g-reaction--active .g-icon { fill: currentColor; color: var(--gala-color-accent); }
+  .g-comments { display: grid; gap: var(--gala-space-4); min-width: 0; padding-top: var(--gala-space-4); border-top: var(--gala-border-width) solid var(--gala-color-border); }
+  .g-comments__title { font-family: var(--gala-font-display); font-weight: var(--gala-weight-title); font-size: 1.05rem; }
+  .g-comments__count { font-family: var(--gala-font-ui); font-weight: var(--gala-weight-normal); font-size: .875rem; color: var(--gala-color-text-faint); font-variant-numeric: tabular-nums; }
+  .g-comments__more {
+    justify-self: start; min-height: 2.75rem; padding: .5rem 1.1rem; border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: transparent; color: var(--gala-color-text);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; cursor: pointer;
+    transition: border-color var(--gala-duration-fast) var(--gala-ease-standard), transform var(--gala-duration-fast) var(--gala-ease-standard);
+  }
+  .g-comments__more:hover { border-color: var(--gala-color-text); }
+  .g-comments__more:active { transform: scale(.97); }
+  .g-composer { display: grid; gap: var(--gala-space-3); min-width: 0; }
+  .g-composer label { font-size: .875rem; font-weight: var(--gala-weight-ui); color: var(--gala-color-text-muted); }
+  .g-composer__input, .g-report select, .g-report textarea {
+    width: 100%; max-width: 100%; min-height: 2.75rem; padding: .7rem .9rem; border-radius: var(--gala-radius-medium); border: var(--gala-border-width) solid var(--gala-color-border);
+    background: var(--gala-color-canvas); color: var(--gala-color-text); font-family: var(--gala-font-body); font-size: 1rem; line-height: 1.5;
+  }
+  .g-composer__input, .g-report textarea { min-height: 6rem; resize: vertical; }
+  .g-composer__input:hover, .g-report select:hover, .g-report textarea:hover { border-color: var(--gala-color-text-muted); }
+  .g-composer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gala-space-3); justify-content: space-between; font-size: .875rem; color: var(--gala-color-text-muted); }
+  .g-composer__submit, .g-composer__signin, .g-report button[type="submit"] {
+    display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 2.75rem; padding: .6rem 1.2rem; border-radius: var(--gala-radius-pill);
+    background: var(--gala-paint-button); color: var(--gala-color-btn-text); border: var(--gala-border-button); box-shadow: var(--gala-shadow-button);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9375rem; cursor: pointer;
+    transition: transform var(--gala-duration-fast) var(--gala-ease-standard), filter var(--gala-duration-base) var(--gala-ease-standard);
+  }
+  .g-composer__submit:hover:not(:disabled), .g-composer__signin:hover, .g-report button[type="submit"]:hover { filter: brightness(1.07) saturate(1.05); }
+  .g-composer__submit:active:not(:disabled), .g-composer__signin:active { transform: scale(.97); }
+  .g-composer__submit:disabled { opacity: .55; cursor: default; box-shadow: none; }
+  .g-composer__cancel, .g-report button[type="button"] {
+    min-height: 2.75rem; padding: .6rem 1rem; border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: transparent; color: var(--gala-color-text);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; cursor: pointer;
+  }
+  .g-composer__cancel:hover, .g-report button[type="button"]:hover { border-color: var(--gala-color-text); }
+  .g-comment-list { display: grid; gap: var(--gala-space-4); min-width: 0; }
+  .g-comment { display: grid; gap: var(--gala-space-2); min-width: 0; }
+  .g-comment__head { display: flex; align-items: center; gap: var(--gala-space-3); min-width: 0; }
+  .g-comment__avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--gala-radius-avatar); background: var(--gala-paint-button); color: var(--gala-color-btn-text); box-shadow: var(--gala-shadow-avatar-ring); font-family: var(--gala-font-display); font-weight: var(--gala-weight-display); font-size: .8rem; text-transform: uppercase; }
+  .g-comment__author { font-weight: var(--gala-weight-ui); font-size: .9375rem; overflow-wrap: anywhere; min-width: 0; }
+  .g-comment__time { font-size: .8125rem; color: var(--gala-color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .g-comment__body { margin: 0; font-family: var(--gala-font-body); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+  .g-comment__body a { color: var(--gala-color-link); text-decoration: underline; text-decoration-color: var(--gala-color-link-underline); text-underline-offset: var(--gala-link-offset); }
+  .g-comment__body a:hover { text-decoration-color: var(--gala-color-link-underline-hover); }
+  .g-comment__actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-1) var(--gala-space-3); }
+  .g-comment__action { min-height: 2.5rem; padding: 0 .5rem; margin-left: -.5rem; border: 0; border-radius: var(--gala-radius-small); background: transparent; color: var(--gala-color-text-muted); font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .8125rem; cursor: pointer; transition: color var(--gala-duration-fast) var(--gala-ease-standard), background-color var(--gala-duration-fast) var(--gala-ease-standard); }
+  .g-comment__action:hover { color: var(--gala-color-text); background: var(--gala-color-surface-raised); }
+  .g-comment__replies { display: grid; gap: var(--gala-space-4); min-width: 0; margin-top: var(--gala-space-2); padding-left: var(--gala-space-4); border-left: var(--gala-border-width) solid var(--gala-color-border); }
+  .g-comment--tombstone > .g-comment__body { font-style: italic; color: var(--gala-color-text-faint); }
+  .g-comment--mine > .g-comment__head .g-comment__avatar { box-shadow: 0 0 0 2px var(--gala-color-accent); }
+  .g-report { width: min(28rem, calc(100% - 2rem)); max-width: 100%; padding: var(--gala-space-6); border-radius: var(--gala-radius-large); border: var(--gala-border-card); background: var(--gala-color-surface); color: var(--gala-color-text); box-shadow: var(--gala-shadow-dialog); font-family: var(--gala-font-ui); }
+  .g-report::backdrop { background: var(--gala-color-overlay); }
+  .g-report form { display: grid; gap: var(--gala-space-3); }
+  .g-report menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gala-space-3); margin: 0; padding: 0; }
+
   /* toast */
   .g-toast {
     position: fixed; left: 50%; bottom: var(--gala-space-6); z-index: 60; max-width: calc(100% - 2rem); padding: .7rem 1.1rem;
@@ -709,6 +786,10 @@ export const GALA_BASE_COMPONENT_CSS = `
     .g-article-cover img { aspect-ratio: 16 / 10; }
     .g-footer-grid { grid-template-columns: minmax(0, 1fr); }
     .g-author-card { flex-direction: column; }
+    .g-interactions { padding: var(--gala-space-4); }
+    .g-comment__replies { padding-left: var(--gala-space-3); }
+    .g-composer__actions { flex-direction: column; align-items: stretch; }
+    .g-composer__submit, .g-composer__signin { width: 100%; }
     .g-topic-head { align-items: flex-start; }
   }
 

package/src/core/internal/eleventy-render.js

@@ -38,7 +38,6 @@ import {
   APPEARANCE_SERVER_DEFAULT_RESOLVED_MODE,
   COLOR_SCHEME_META_CONTENT,
 } from './appearance/contract.js';
-import { contentSecurityPolicyMetaTag } from './content-security.js';
 import { PAGE_KIND_ATTRIBUTE } from './page-kinds.js';
 
 /**
@@ -133,9 +132,12 @@ const SKELETON_LAYOUT_SOURCE = [
   '<head>',
   '<meta charset="utf-8">',
   '<meta name="viewport" content="width=device-width, initial-scale=1">',
-  contentSecurityPolicyMetaTag(),
+  '{{ cspMetaTag | safe }}',
   `<meta name="color-scheme" content="${COLOR_SCHEME_META_CONTENT}">`,
-  '<script src="{{ appearanceScriptHref }}"></script>',
+  // The interactions script (article pages, module on) is deferred and sits
+  // on the appearance script's line, so a page without it is byte-identical
+  // to before.
+  '<script src="{{ appearanceScriptHref }}"></script>{% if interactionsScriptHref %}<script src="{{ interactionsScriptHref }}" defer></script>{% endif %}',
   '<title>{{ title }}</title>',
   '{% if description %}<meta name="description" content="{{ description }}">{% endif %}',
   '{% if robotsContent %}<meta name="robots" content="{{ robotsContent }}">{% endif %}',

package/src/core/internal/icons.js

@@ -35,6 +35,8 @@ export const ICONS = Object.freeze({
     '<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/>',
   list: '<path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/>',
   layers: '<path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/>',
+  heart:
+    '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z"/>',
   pen: '<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/>',
 });