@bestagentkits/render 0.1.1-next.1 → 0.3.0

package/dist/render/runtime.d.ts

@@ -11,15 +11,18 @@
  * template literals) so the emitted artifact does not depend on a build step or
  * a modern-browser-only syntax tier.
  */
+import type { FeatureModule } from '../registry/block-module.js';
 import type { RuntimeFeature } from '../registry/roster.js';
 export interface RuntimeOptions {
     features: ReadonlySet<RuntimeFeature>;
     state: Record<string, unknown>;
     /** True when at least one block declares an action binding. */
     hasBindings: boolean;
+    /** Registry features the page uses, in registry order. */
+    moduleFeatures?: readonly FeatureModule[];
 }
 /** Build the emitted runtime for the features a page actually uses. */
 export declare function buildRuntime(options: RuntimeOptions): string;
 /** Features whose presence requires the live region in the document. */
-export declare function needsLiveRegion(features: ReadonlySet<RuntimeFeature>): boolean;
+export declare function needsLiveRegion(features: ReadonlySet<RuntimeFeature>, moduleFeatures?: readonly FeatureModule[]): boolean;
 //# sourceMappingURL=runtime.d.ts.map

package/dist/render/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/render/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAK5D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;CACtB;AA8YD,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,MAAM,CAqC5D;AAED,wEAAwE;AACxE,wBAAgB,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,OAAO,CAE9E"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/render/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAM5D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;CAC3C;AAugBD,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,MAAM,CAsD5D;AAED,wEAAwE;AACxE,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,EACrC,cAAc,GAAE,SAAS,aAAa,EAAO,GAC5C,OAAO,CAKT"}

package/dist/render/runtime.js

@@ -11,12 +11,18 @@
  * template literals) so the emitted artifact does not depend on a build step or
  * a modern-browser-only syntax tier.
  */
+import { CAROUSEL, TABS } from '../blocks/composition/composition-runtime.js';
+import { serializeJsonForScript } from './escape.js';
 /** Features that produce user-facing feedback and therefore need a live region. */
 const ANNOUNCING_FEATURES = ['copy', 'filter', 'theme'];
-const HELPERS = `
+const helpers = (conditions) => `
 function q(sel, ctx) { return (ctx || doc).querySelector(sel); }
 function qa(sel, ctx) { return Array.prototype.slice.call((ctx || doc).querySelectorAll(sel)); }
 function byId(id) { return qa('[data-ak-id="' + id + '"]'); }
+function motionAllowed() {
+  if (root.getAttribute('data-motion') === 'none') return false;
+  return !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
 function announce(message) {
   var region = q('[data-ak-live]');
   if (region) region.textContent = message;
@@ -58,6 +64,46 @@ function syncBindings() {
     } else {
       el.textContent = String(value);
     }
+  });${conditions ? '\n  syncConditions();' : ''}
+}`;
+/**
+ * `visibleWhen`: re-evaluate every condition after a state change. The rules
+ * match `evaluateCondition` in the compiler exactly, which already emitted the
+ * initial view; own keys only, so \`state.constructor\` reads as unset.
+ */
+const STATE = `
+function readOwnPath(path) {
+  var parts = String(path).split('.');
+  var cursor = state;
+  for (var i = 1; i < parts.length; i += 1) {
+    if (cursor === null || typeof cursor !== 'object' || Array.isArray(cursor)) return undefined;
+    if (!Object.prototype.hasOwnProperty.call(cursor, parts[i])) return undefined;
+    cursor = cursor[parts[i]];
+  }
+  return cursor;
+}
+function evalCondition(condition) {
+  var value = readOwnPath(condition.path);
+  var op = condition.op;
+  if (op === 'equals') return value === condition.value;
+  if (op === 'notEquals') return value !== condition.value;
+  if (op === 'in' || op === 'notIn') {
+    var found = false;
+    for (var i = 0; i < condition.value.length; i += 1) {
+      if (condition.value[i] === value) found = true;
+    }
+    return op === 'in' ? found : !found;
+  }
+  if (op === 'truthy') return Boolean(value);
+  if (op === 'falsy') return !value;
+  return true;
+}
+function syncConditions() {
+  qa('[data-ak-when]').forEach(function (el) {
+    var condition = readJson(el, 'data-ak-when');
+    if (!condition || typeof condition.path !== 'string') return;
+    if (evalCondition(condition)) el.removeAttribute('hidden');
+    else el.setAttribute('hidden', '');
   });
 }`;
 const FIRE = `
@@ -69,6 +115,9 @@ function fire(source, eventName, detail) {
       for (var i = 0; i < bindings.length; i += 1) run(bindings[i], source, detail);
       return;
     }
+    // A block's event belongs to that block: it never reaches an enclosing
+    // block's bindings.
+    if (target.hasAttribute('data-ak-id')) return;
     target = target.parentElement;
   }
 }`;
@@ -81,7 +130,7 @@ function run(action, source, detail) {
     nodes.forEach(function (node) {
       if (node.tagName === 'DIALOG') openDialog(node);
       else if (node.tagName === 'DETAILS') node.open = !node.open;
-      else if (node.hasAttribute('data-ak-theme-toggle')) toggleTheme();
+      else if (node.hasAttribute('data-ak-theme-toggle')) toggleTheme(node);
       else {
         var collapsed = node.getAttribute('aria-expanded') === 'false' || node.hasAttribute('hidden');
         if (collapsed) { node.removeAttribute('hidden'); node.setAttribute('aria-expanded', 'true'); }
@@ -101,7 +150,7 @@ function run(action, source, detail) {
   if (type === 'copy') {
     var text = '';
     byId(targetId).forEach(function (node) { text += node.textContent || ''; });
-    copyText(text, action);
+    copyText(text, source);
     return;
   }
   if (type === 'download') {
@@ -116,7 +165,9 @@ function run(action, source, detail) {
     return;
   }
   if (type === 'set-value') {
-    setPath(action.path, action.value);
+    // An action without its own value takes the event's, such as a slider's.
+    var next = Object.prototype.hasOwnProperty.call(action, 'value') ? action.value : (detail ? detail.value : undefined);
+    if (next !== undefined) setPath(action.path, next);
     return;
   }
   if (type === 'next' || type === 'previous') {
@@ -151,23 +202,59 @@ function applyTheme(mode) {
     root.setAttribute('data-theme', next);
   }
   try { window.localStorage.setItem('ak-render-theme', mode === 'system' ? 'system' : next); } catch (error) {}
+  syncThemeToggles(next);
+  announce('Theme set to ' + next);
+}
+// The toggle names the scheme it switches to, so it must follow the scheme in
+// effect, including one the system chose before anything was stored.
+function syncThemeToggles(scheme) {
   qa('[data-ak-theme-toggle]').forEach(function (button) {
-    button.setAttribute('aria-pressed', String(next === 'dark'));
-    button.textContent = next === 'dark' ? 'Light' : 'Dark';
+    button.setAttribute('aria-pressed', String(scheme === 'dark'));
+    button.textContent = scheme === 'dark' ? 'Light' : 'Dark';
   });
-  announce('Theme set to ' + next);
 }
-function toggleTheme() { applyTheme('toggle'); }
+/*
+ * Where supported, the new scheme is revealed as a circle growing from the
+ * toggle. The origin is written to two custom properties; the stylesheet owns
+ * the animation, and reduced motion or an older engine switches instantly.
+ */
+function toggleTheme(source) {
+  if (!motionAllowed() || typeof doc.startViewTransition !== 'function') { applyTheme('toggle'); return; }
+  if (source && source.getBoundingClientRect) {
+    var box = source.getBoundingClientRect();
+    root.style.setProperty('--ak-vt-x', Math.round(box.left + box.width / 2) + 'px');
+    root.style.setProperty('--ak-vt-y', Math.round(box.top + box.height / 2) + 'px');
+  }
+  doc.startViewTransition(function () { applyTheme('toggle'); });
+}
 function restoreTheme() {
+  // While the system owns the scheme, a change in system settings must relabel
+  // the toggle too, not only the first paint.
+  var system = window.matchMedia('(prefers-color-scheme: dark)');
+  if (typeof system.addEventListener === 'function') {
+    system.addEventListener('change', function () {
+      if (!root.getAttribute('data-theme')) syncThemeToggles(system.matches ? 'dark' : 'light');
+    });
+  }
   var stored = null;
   try { stored = window.localStorage.getItem('ak-render-theme'); } catch (error) {}
-  if (!stored) return;
+  if (!stored) {
+    syncThemeToggles(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    return;
+  }
   if (stored === 'system') applyTheme('system');
   else applyTheme(stored);
 }`;
 const COPY = `
-function copyText(text, action) {
-  var done = function () { announce('Copied to clipboard'); };
+function copyText(text, source) {
+  var done = function () {
+    announce('Copied to clipboard');
+    // A visible confirmation on the control itself, cleared after a moment.
+    if (source && source.setAttribute) {
+      source.setAttribute('data-ak-copied', '');
+      window.setTimeout(function () { source.removeAttribute('data-ak-copied'); }, 1600);
+    }
+  };
   if (navigator.clipboard && navigator.clipboard.writeText) {
     navigator.clipboard.writeText(text).then(done, function () { fallbackCopy(text, done); });
   } else {
@@ -198,6 +285,149 @@ function downloadText(text, filename, source) {
   window.setTimeout(function () { URL.revokeObjectURL(url); }, 0);
   announce('Downloaded ' + safeName);
 }`;
+/**
+ * Print a diagram's folded text description. The print stylesheet opens it
+ * through \`::details-content\`; where that selector is unsupported, the runtime
+ * opens each closed description for the print and closes it again afterwards.
+ */
+const DIAGRAM = `
+function wireDiagramPrint() {
+  var opened = [];
+  window.addEventListener('beforeprint', function () {
+    qa('details.ak-diagram-details:not([open])').forEach(function (details) {
+      details.open = true;
+      opened.push(details);
+    });
+  });
+  window.addEventListener('afterprint', function () {
+    opened.forEach(function (details) { details.open = false; });
+    opened = [];
+  });
+}`;
+const OUTLINE = `
+function wireOutline() {
+  var links = qa('[data-ak-outline-link]');
+  if (!links.length || typeof window.IntersectionObserver !== 'function') return;
+  var byAnchor = {};
+  links.forEach(function (link) { byAnchor[link.getAttribute('href').slice(1)] = link; });
+  var mark = function (id) {
+    links.forEach(function (link) {
+      if (link === byAnchor[id]) link.setAttribute('aria-current', 'location');
+      else link.removeAttribute('aria-current');
+    });
+  };
+  // The current section is the last one whose top has crossed the upper third
+  // of the viewport, which matches where a reader's eye rests.
+  var observer = new window.IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) { if (entry.isIntersecting) mark(entry.target.id); });
+  }, { rootMargin: '0px 0px -66% 0px' });
+  Object.keys(byAnchor).forEach(function (id) {
+    var section = doc.getElementById(id);
+    if (section) observer.observe(section);
+  });
+}`;
+const BEFORE_AFTER = `
+function wireBeforeAfter() {
+  qa('[data-ak-before-after]').forEach(function (figure) {
+    var stage = q('.ak-ba-stage', figure);
+    var input = q('.ak-ba-range', figure);
+    if (!stage || !input) return;
+    var apply = function () { stage.style.setProperty('--ak-split', input.value + '%'); };
+    // Dragging anywhere on the stage moves the divider, which a bare range input
+    // only does from its thumb on some touch browsers.
+    var dragging = false;
+    var follow = function (event) {
+      var box = stage.getBoundingClientRect();
+      if (!box.width) return;
+      var ratio = Math.min(Math.max((event.clientX - box.left) / box.width, 0), 1);
+      input.value = String(Math.round(ratio * 100));
+      apply();
+    };
+    input.addEventListener('input', apply, false);
+    input.addEventListener('pointerdown', function (event) {
+      dragging = true;
+      if (input.setPointerCapture) input.setPointerCapture(event.pointerId);
+      follow(event);
+    }, false);
+    input.addEventListener('pointermove', function (event) { if (dragging) follow(event); }, false);
+    input.addEventListener('pointerup', function () { dragging = false; }, false);
+    input.addEventListener('pointercancel', function () { dragging = false; }, false);
+    apply();
+    figure.setAttribute('data-ak-ready', '');
+  });
+}`;
+const EFFECTS = `
+function countUp(el) {
+  if (el.children.length) return;
+  var text = el.textContent;
+  var match = /^([^\\dA-Za-z]*)(\\d{1,3}(?:,\\d{3})+|\\d+)(\\.\\d+)?([^\\d]*)$/.exec(text.trim());
+  if (!match) return;
+  var grouped = match[2].indexOf(',') !== -1;
+  var places = match[3] ? match[3].length - 1 : 0;
+  var target = parseFloat(match[2].replace(/,/g, '') + (match[3] || ''));
+  if (!isFinite(target) || target === 0) return;
+  var format = function (value) {
+    var fixed = value.toFixed(places);
+    if (grouped) {
+      var parts = fixed.split('.');
+      parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
+      fixed = parts.join('.');
+    }
+    return match[1] + fixed + match[4];
+  };
+  // The authored value stays in the DOM for assistive technology, copy and
+  // print; the rolling figure is a hidden layer drawn over it while it runs.
+  var real = doc.createElement('span');
+  real.className = 'ak-sr';
+  real.textContent = text;
+  var shown = doc.createElement('span');
+  shown.setAttribute('aria-hidden', 'true');
+  shown.textContent = format(0);
+  el.textContent = '';
+  el.appendChild(real);
+  el.appendChild(shown);
+  var settled = false;
+  var settle = function () {
+    if (settled) return;
+    settled = true;
+    el.textContent = text;
+    window.removeEventListener('beforeprint', settle);
+  };
+  window.addEventListener('beforeprint', settle);
+  var began = null;
+  var step = function (now) {
+    if (settled) return;
+    if (began === null) began = now;
+    var progress = Math.min((now - began) / 1400, 1);
+    if (progress >= 1) { settle(); return; }
+    shown.textContent = format(target * (1 - Math.pow(1 - progress, 4)));
+    window.requestAnimationFrame(step);
+  };
+  window.requestAnimationFrame(step);
+}
+function wireEffects() {
+  if (!motionAllowed()) return;
+  // A soft light follows the pointer across cards and tiles.
+  doc.addEventListener('pointermove', function (event) {
+    var surface = event.target && event.target.closest ? event.target.closest('.ak-card, .ak-tile, .ak-kpi-card') : null;
+    if (!surface) return;
+    var box = surface.getBoundingClientRect();
+    surface.style.setProperty('--ak-mx', Math.round(event.clientX - box.left) + 'px');
+    surface.style.setProperty('--ak-my', Math.round(event.clientY - box.top) + 'px');
+  }, { passive: true });
+  if (typeof window.IntersectionObserver !== 'function') return;
+  // Blocks play their entrance as they arrive. Until then they show their final
+  // state, so a capture, a print or a disabled script never sees them blank.
+  var observer = new window.IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (!entry.isIntersecting) return;
+      observer.unobserve(entry.target);
+      if (entry.target.hasAttribute('data-ak-animate')) entry.target.setAttribute('data-ak-inview', '');
+      else countUp(entry.target);
+    });
+  }, { rootMargin: '0px 0px 12% 0px' });
+  qa('[data-ak-animate], [data-ak-count], .ak-stat dd').forEach(function (el) { observer.observe(el); });
+}`;
 const DIALOG = `
 var lastFocus = null;
 function openDialog(dialog) {
@@ -214,116 +444,6 @@ function closeDialog(dialog) {
   if (lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus();
   fire(dialog, 'close');
 }`;
-const TABS = `
-function selectTab(container, action, fireFn) {
-  var tabs = qa('[role="tab"]', container);
-  if (!tabs.length) return;
-  var index = tabs.length - 1;
-  if (typeof action.index === 'number') index = Math.min(Math.max(action.index, 0), tabs.length - 1);
-  else if (action.tabId) {
-    for (var i = 0; i < tabs.length; i += 1) if (tabs[i].getAttribute('data-ak-tab-id') === action.tabId) index = i;
-  } else {
-    var active = tabs.findIndex(function (tab) { return tab.getAttribute('aria-selected') === 'true'; });
-    if (active >= 0 && typeof action.index !== 'number' && !action.tabId) index = active;
-  }
-  activateTab(container, index, true, fireFn, true);
-}
-function activateTab(container, index, moveFocus, fireFn, announceChange) {
-  var tabs = qa('[role="tab"]', container);
-  qa('[role="tabpanel"]', container).forEach(function (panel, panelIndex) {
-    var selected = panelIndex === index;
-    panel.hidden = !selected;
-    panel.setAttribute('tabindex', selected ? '0' : '-1');
-  });
-  tabs.forEach(function (tab, tabIndex) {
-    var selected = tabIndex === index;
-    tab.setAttribute('aria-selected', String(selected));
-    tab.tabIndex = selected ? 0 : -1;
-  });
-  if (moveFocus && tabs[index]) tabs[index].focus();
-  // Only a user-driven change is worth announcing. Announcing the initial
-  // selection would make every page with tabs talk on load.
-  if (announceChange) announce('Tab ' + (index + 1) + ' of ' + tabs.length);
-  if (fireFn) fireFn(container, 'select', { index: index });
-}
-function wireTabs() {
-  qa('[data-ak-tabs]').forEach(function (container) {
-    activateTab(container, 0, false, fire, false);
-    qa('[role="tab"]', container).forEach(function (tab, index) {
-      tab.addEventListener('click', function () { selectTab(container, { index: index }, fire); }, false);
-      tab.addEventListener('keydown', function (event) {
-        var keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
-        if (keys.indexOf(event.key) === -1) return;
-        event.preventDefault();
-        var total = qa('[role="tab"]', container).length;
-        var current = index;
-        if (event.key === 'ArrowRight') current = (index + 1) % total;
-        else if (event.key === 'ArrowLeft') current = (index - 1 + total) % total;
-        else if (event.key === 'Home') current = 0;
-        else current = total - 1;
-        activateTab(container, current, true, fire, true);
-      }, false);
-    });
-  });
-}`;
-const CAROUSEL = `
-function shiftSlide(carousel, delta, fireFn) {
-  var slides = qa('[data-ak-slide]', carousel);
-  if (!slides.length) return;
-  var current = slides.findIndex(function (slide) { return !slide.hidden; });
-  if (current < 0) current = 0;
-  var next = (current + delta + slides.length) % slides.length;
-  showSlide(carousel, next, fireFn, false);
-}
-function showSlide(carousel, index, fireFn, focus) {
-  var slides = qa('[data-ak-slide]', carousel);
-  if (!slides.length) return;
-  var bounded = Math.min(Math.max(index, 0), slides.length - 1);
-  slides.forEach(function (slide, slideIndex) {
-    var active = slideIndex === bounded;
-    slide.hidden = !active;
-    slide.setAttribute('aria-hidden', String(!active));
-  });
-  var buttons = qa('[data-ak-carousel]', carousel);
-  buttons.forEach(function (button) {
-    var isPrev = button.getAttribute('data-ak-carousel') === 'prev';
-    button.disabled = !carousel.hasAttribute('data-ak-loop') && ((isPrev && bounded === 0) || (!isPrev && bounded === slides.length - 1));
-  });
-  var status = q('[data-ak-carousel-status]', carousel);
-  if (status) status.textContent = (bounded + 1) + ' / ' + slides.length;
-  if (focus && slides[bounded]) slides[bounded].focus();
-  if (fireFn) fireFn(carousel, 'change', { index: bounded });
-}
-function wireCarousels() {
-  qa('[data-ak-carousel-root]').forEach(function (carousel) {
-    showSlide(carousel, 0, fire, false);
-    qa('[data-ak-carousel]', carousel).forEach(function (button) {
-      button.addEventListener('click', function () {
-        shiftSlide(carousel, button.getAttribute('data-ak-carousel') === 'next' ? 1 : -1, fire);
-      }, false);
-    });
-    carousel.addEventListener('keydown', function (event) {
-      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
-      event.preventDefault();
-      var delta = event.key === 'ArrowRight' ? 1 : -1;
-      var slides = qa('[data-ak-slide]', carousel);
-      var current = slides.findIndex(function (slide) { return !slide.hidden; });
-      showSlide(carousel, current + delta, fire, true);
-    }, false);
-    var startX = null;
-    carousel.addEventListener('touchstart', function (event) {
-      if (event.touches.length === 1) startX = event.touches[0].clientX;
-    }, { passive: true });
-    carousel.addEventListener('touchend', function (event) {
-      if (startX === null) return;
-      var endX = event.changedTouches.length ? event.changedTouches[0].clientX : startX;
-      var delta = endX - startX;
-      startX = null;
-      if (Math.abs(delta) < 40) return;
-      shiftSlide(carousel, delta < 0 ? 1 : -1, fire);
-    }, false);
-  });
-}`;
 const SLIDER = `
 function wireSliders() {
   qa('[data-ak-slider]').forEach(function (input) {
@@ -383,7 +503,7 @@ doc.addEventListener('click', function (event) {
       return;
     }
     if (target.hasAttribute && target.hasAttribute('data-ak-theme-toggle')) {
-      toggleTheme();
+      toggleTheme(target);
       return;
     }
     target = target.parentElement;
@@ -400,8 +520,11 @@ restoreTheme();`;
 /** Build the emitted runtime for the features a page actually uses. */
 export function buildRuntime(options) {
     const { features } = options;
-    const needsLiveRegion = ANNOUNCING_FEATURES.some((feature) => features.has(feature));
+    const modules = options.moduleFeatures ?? [];
+    const conditions = features.has('state');
     const parts = [];
+    if (conditions)
+        parts.push(STATE);
     if (features.has('theme'))
         parts.push(THEME);
     if (features.has('copy'))
@@ -416,6 +539,17 @@ export function buildRuntime(options) {
         parts.push(SLIDER);
     if (features.has('tabs'))
         parts.push(TABS);
+    if (features.has('outline'))
+        parts.push(OUTLINE);
+    if (features.has('before-after'))
+        parts.push(BEFORE_AFTER);
+    if (features.has('diagram'))
+        parts.push(DIAGRAM);
+    for (const feature of modules) {
+        if (feature.script !== undefined)
+            parts.push(feature.script.code);
+    }
+    parts.push(EFFECTS);
     const wiring = [];
     if (features.has('tabs'))
         wiring.push('wireTabs();');
@@ -425,27 +559,40 @@ export function buildRuntime(options) {
         wiring.push('wireSliders();');
     if (features.has('filter'))
         wiring.push('wireFilters();');
+    if (features.has('outline'))
+        wiring.push('wireOutline();');
+    if (features.has('before-after'))
+        wiring.push('wireBeforeAfter();');
+    if (features.has('diagram'))
+        wiring.push('wireDiagramPrint();');
+    for (const feature of modules) {
+        if (feature.script?.boot !== undefined)
+            wiring.push(feature.script.boot);
+    }
+    wiring.push('wireEffects();');
     return [
         '(function () {',
         '"use strict";',
         'var doc = document;',
         'var root = doc.documentElement;',
-        `var state = ${JSON.stringify(options.state)};`,
-        HELPERS,
+        // The state is author data inside a script element: escaped so a value such
+        // as `</script>` cannot close it.
+        `var state = ${serializeJsonForScript(options.state)};`,
+        helpers(conditions),
         RUN,
         FIRE,
         ...parts,
         DELEGATION,
         BOOT,
         ...wiring,
-        needsLiveRegion ? '' : '',
         '})();',
     ]
         .filter((part) => part !== '')
         .join('\n');
 }
 /** Features whose presence requires the live region in the document. */
-export function needsLiveRegion(features) {
-    return ANNOUNCING_FEATURES.some((feature) => features.has(feature));
+export function needsLiveRegion(features, moduleFeatures = []) {
+    return (ANNOUNCING_FEATURES.some((feature) => features.has(feature)) ||
+        moduleFeatures.some((feature) => feature.announces === true && features.has(feature.name)));
 }
 //# sourceMappingURL=runtime.js.map

package/dist/render/runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../../src/render/runtime.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../../src/render/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,8CAA8C,CAAC;AAG9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,mFAAmF;AACnF,MAAM,mBAAmB,GAA8B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAWnF,MAAM,OAAO,GAAG,CAAC,UAAmB,EAAU,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiD1C,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;EAC9C,CAAC;AAEH;;;;GAIG;AACH,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCZ,CAAC;AAEH,MAAM,IAAI,GAAG;;;;;;;;;;;;;;EAcX,CAAC;AAEH,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEV,CAAC;AAEH,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDZ,CAAC;AAEH,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCX,CAAC;AAEH;;;;GAIG;AACH,MAAM,OAAO,GAAG;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;EAqBd,CAAC;AAEH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BnB,CAAC;AAEH,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEd,CAAC;AAEH,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;EAeb,CAAC;AAEH,MAAM,MAAM,GAAG;;;;;;;;;;;EAWb,CAAC;AAEH,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0Bb,CAAC;AAEH,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA8BR,CAAC;AAEZ,MAAM,IAAI,GAAG;;gBAEG,CAAC;AAEjB,uEAAuE;AACvE,MAAM,UAAU,YAAY,CAAC,OAAuB;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAC7B,MAAM,OAAO,GAAG,OAAO,CAAC,cAAc,IAAI,EAAE,CAAC;IAC7C,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACzC,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,IAAI,UAAU;QAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,IAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjD,IAAI,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3D,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjD,KAAK,MAAM,OAAO,IAAI,OAAO,EAAE,CAAC;QAC9B,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS;YAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpE,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEpB,MAAM,MAAM,GAAa,EAAE,CAAC;IAC5B,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrD,IAAI,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,IAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC1D,IAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC1D,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3D,IAAI,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACpE,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAChE,KAAK,MAAM,OAAO,IAAI,OAAO,EAAE,CAAC;QAC9B,IAAI,OAAO,CAAC,MAAM,EAAE,IAAI,KAAK,SAAS;YAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3E,CAAC;IACD,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE9B,OAAO;QACL,gBAAgB;QAChB,eAAe;QACf,qBAAqB;QACrB,iCAAiC;QACjC,4EAA4E;QAC5E,kCAAkC;QAClC,eAAe,sBAAsB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;QACvD,OAAO,CAAC,UAAU,CAAC;QACnB,GAAG;QACH,IAAI;QACJ,GAAG,KAAK;QACR,UAAU;QACV,IAAI;QACJ,GAAG,MAAM;QACT,OAAO;KACR;SACE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC;SAC7B,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,eAAe,CAC7B,QAAqC,EACrC,iBAA2C,EAAE;IAE7C,OAAO,CACL,mBAAmB,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC5D,cAAc,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,KAAK,IAAI,IAAI,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAC3F,CAAC;AACJ,CAAC"}

package/dist/render/showcase-blocks.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Showcase block renderers.
+ *
+ * Blocks that present work rather than structure it: a bento mosaic, a ticker,
+ * a terminal session, a file tree, a before/after slider, KPI cards with
+ * sparklines, a framed feature spotlight, and a checklist.
+ *
+ * The same rules as `blocks.ts` apply: pure functions of the node and the IR,
+ * exactly one `data-ak-id` per block, no style attributes or handlers. Every
+ * motion these blocks get comes from CSS or the runtime, and the markup is
+ * complete without either, so the content reads the same in a PDF, a
+ * screenshot, or with script disabled.
+ */
+import type { IrNode, NetworkPolicy } from '../ir.js';
+import { type JsonValue } from '../json.js';
+/** Minimal render context the showcase renderers need. */
+export interface ShowcaseContext {
+    ir: {
+        policy: {
+            network: NetworkPolicy;
+        };
+    };
+}
+type ShowcaseRenderer = (node: IrNode, context: ShowcaseContext) => string;
+/** An image allowed by the policy, or an honest note when it is not. */
+export declare function framedImage(source: string, alt: string, policy: NetworkPolicy, loading?: 'lazy' | 'eager'): string;
+/** Browser chrome (decorative) around an image: the bar, then the viewport. */
+export declare function browserShot(source: string, alt: string, address: string, policy: NetworkPolicy, loading?: 'lazy' | 'eager'): string;
+export declare function paragraph(className: string, text: string): string;
+/** A paragraph of prose: backtick spans become inline code. */
+export declare function prose(className: string, text: string): string;
+interface TreeFile {
+    name: string;
+    status: string;
+    note: string;
+}
+interface TreeDir {
+    name: string;
+    dirs: Map<string, TreeDir>;
+    files: TreeFile[];
+}
+/** Build a folder tree from slash-separated paths; a trailing slash names an empty folder. */
+export declare function buildFileTree(items: Record<string, JsonValue>[]): TreeDir;
+/** Line and area paths for a sparkline, scaled into a fixed view box. */
+export declare function sparkPaths(series: number[]): {
+    line: string;
+    area: string;
+    end: [number, number];
+};
+export declare const SHOWCASE_RENDERERS: Record<string, ShowcaseRenderer>;
+export {};
+//# sourceMappingURL=showcase-blocks.d.ts.map

package/dist/render/showcase-blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"showcase-blocks.d.ts","sourceRoot":"","sources":["../../src/render/showcase-blocks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAuB3D,0DAA0D;AAC1D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE;QAAE,MAAM,EAAE;YAAE,OAAO,EAAE,aAAa,CAAA;SAAE,CAAA;KAAE,CAAC;CAC5C;AAED,KAAK,gBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;AAE3E,wEAAwE;AACxE,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,aAAa,EACrB,OAAO,GAAE,MAAM,GAAG,OAAgB,GACjC,MAAM,CAUR;AAED,+EAA+E;AAC/E,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,aAAa,EACrB,OAAO,GAAE,MAAM,GAAG,OAAgB,GACjC,MAAM,CAKR;AAED,wBAAgB,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,+DAA+D;AAC/D,wBAAgB,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7D;AAqDD,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,OAAO;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAMD,8FAA8F;AAC9F,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,OAAO,CAyBzE;AAuHD,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvB,CAoBA;AAiJD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAS/D,CAAC"}