@zubra/runtime 0.0.0-stage → 5.0.2

package/dist/production/index.js

@@ -0,0 +1,12 @@
+// Generated by scripts/build-production.js from src/index.js: the runtime without hot reloading. Do not edit.
+// @zubra/runtime — everything compiled components and their scripts import.
+export { Signal, isNative } from './signal.js';
+export { effect, scope, flush, tick } from './effect.js';
+export { resource } from './resource.js';
+export {
+  define, $define, ABI, state, computed, watch, onMount, onUnmount, id, props, host, emit, adoptStyles,
+  createContext, provide, inject, ContextRequestEvent, ContextProviderEvent,
+  formValue, validity, onFormReset, onFormRestore, onFormDisabled,
+  prevent, stop, selfOnly, submit, keys, model, hasSlot, hydrated, signal, from, raw,
+  isSafeUrl, $r, $t,
+} from './element.js';

package/dist/production/primitives.js

@@ -0,0 +1,108 @@
+// Generated by scripts/build-production.js from src/primitives.js: the runtime without hot reloading. Do not edit.
+// @zubra/runtime/primitives: the two keyboard behaviours the platform doesn't have.
+//
+// The platform now does most of what headless libraries used to: <dialog> traps focus and closes
+// on Escape, `popover` gives a top layer and light dismissal, anchor positioning places it, and
+// <details name> makes an exclusive group. What's left for menus, tab lists, toolbars and listboxes
+// is moving focus among their items from the keyboard. Both functions here work on any element,
+// in any framework, and return a cleanup:
+//
+//   onMount(() => rovingFocus(menu, { selector: '[role=menuitem]', orientation: 'vertical' }))
+//   onMount(() => typeahead(menu, { selector: '[role=menuitem]' }))
+
+const usable = (element) => !element.matches(':disabled, [aria-disabled=true], [hidden]') && element.getClientRects().length > 0;
+
+/**
+ * One tab stop for a group of items, with arrow keys (and Home and End) moving focus among them:
+ * the WAI-ARIA "roving tabindex". The current item has tabindex 0 and the rest -1; focusing an
+ * item (by a click, say) makes it current. Items are found again on each key, so a list that
+ * changes needs nothing.
+ *
+ * - `selector`: the items, inside `container`;
+ * - `orientation`: `vertical` (Up and Down), `horizontal` (Left and Right, flipped in RTL), or
+ *   `both`;
+ * - `loop`: from the last item, the next is the first (and back);
+ * - `onMove(item)`: called after focus moves, for widgets whose selection follows focus (tabs).
+ */
+export function rovingFocus(container, { selector, orientation = 'both', loop = true, onMove } = {}) {
+  if (!selector) throw new TypeError('rovingFocus: a `selector` for the items is needed');
+  const items = () => [...container.querySelectorAll(selector)].filter(usable);
+  const current = () => {
+    const all = items();
+    return all.find((item) => item.tabIndex === 0) ?? all.find((item) => item.matches('[aria-selected=true], [aria-checked=true], [aria-current]:not([aria-current=false])')) ?? all[0];
+  };
+  const make = (target) => {
+    for (const item of container.querySelectorAll(selector)) item.tabIndex = item === target ? 0 : -1;
+  };
+  make(current());
+  const keys = (event) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    const all = items();
+    const at = all.indexOf(event.target.closest?.(selector));
+    if (at < 0) return;
+    const rtl = getComputedStyle(container).direction === 'rtl';
+    const next = { vertical: 'ArrowDown', horizontal: rtl ? 'ArrowLeft' : 'ArrowRight' };
+    const previous = { vertical: 'ArrowUp', horizontal: rtl ? 'ArrowRight' : 'ArrowLeft' };
+    const forward = orientation === 'both' ? [next.vertical, next.horizontal] : [next[orientation]];
+    const back = orientation === 'both' ? [previous.vertical, previous.horizontal] : [previous[orientation]];
+    let to;
+    if (forward.includes(event.key)) to = at + 1 < all.length ? at + 1 : loop ? 0 : at;
+    else if (back.includes(event.key)) to = at > 0 ? at - 1 : loop ? all.length - 1 : at;
+    else if (event.key === 'Home') to = 0;
+    else if (event.key === 'End') to = all.length - 1;
+    else return;
+    event.preventDefault();
+    make(all[to]);
+    all[to].focus();
+    onMove?.(all[to]);
+  };
+  const focused = (event) => {
+    const item = event.target.closest?.(selector);
+    if (item && container.contains(item) && item.tabIndex !== 0) make(item);
+  };
+  container.addEventListener('keydown', keys);
+  container.addEventListener('focusin', focused);
+  return () => {
+    container.removeEventListener('keydown', keys);
+    container.removeEventListener('focusin', focused);
+  };
+}
+
+/**
+ * Type to jump: printable keys typed in quick succession are a prefix, and focus moves to the
+ * next item (after the focused one, wrapping) whose text starts with it, ignoring case. Repeating
+ * one letter cycles through the items that start with it.
+ *
+ * - `selector`: the items, inside `container`;
+ * - `text(item)`: an item's text (its `textContent`, trimmed, by default);
+ * - `timeout`: how long a pause ends the prefix, in milliseconds (500);
+ * - `onMatch(item)`: called with the item instead of focusing it (for `aria-activedescendant`).
+ */
+export function typeahead(container, { selector, text = (item) => item.textContent.trim(), timeout = 500, onMatch } = {}) {
+  if (!selector) throw new TypeError('typeahead: a `selector` for the items is needed');
+  let typed = '';
+  let timer = null;
+  const keys = (event) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.key.length !== 1) return;
+    if (event.key === ' ' && !typed) return; // Space activates, unless it's part of a prefix
+    const all = [...container.querySelectorAll(selector)].filter(usable);
+    if (!all.length) return;
+    clearTimeout(timer);
+    timer = setTimeout(() => (typed = ''), timeout);
+    typed += event.key.toLowerCase();
+    // "bbb" is "b" again, cycling.
+    const prefix = typed.split('').every((letter) => letter === typed[0]) ? typed[0] : typed;
+    const at = all.indexOf(document.activeElement?.closest?.(selector));
+    const ordered = [...all.slice(at + 1), ...all.slice(0, at + 1)];
+    const match = ordered.find((item) => text(item).toLowerCase().startsWith(prefix));
+    if (!match) return;
+    event.preventDefault();
+    if (onMatch) onMatch(match);
+    else match.focus();
+  };
+  container.addEventListener('keydown', keys);
+  return () => {
+    clearTimeout(timer);
+    container.removeEventListener('keydown', keys);
+  };
+}

package/dist/production/react.js

@@ -0,0 +1,125 @@
+// Generated by scripts/build-production.js from src/react.js: the runtime without hot reloading. Do not edit.
+// React adapter: a zubra element as a React component, for React 18 and 19.
+//
+//   import Rating from './rating.zb'          // the build plugin wraps it for React files
+//   <Rating value={stars} onValueChange={(event) => setStars(event.detail)} />
+//
+// - Props are set as properties (objects and arrays arrive as values, not JSON), already when
+//   React 19 creates the element, so its script sees them. A prop that's left out, or was given
+//   and then removed, is the component's default.
+// - `on<Event>` subscribes to the component's event of that name, in any casing: `valuechange`
+//   is `onValueChange`, `onValuechange` or `onvaluechange`. The handler gets the DOM event (the
+//   value is in `event.detail`) and can change between renders without re-subscribing.
+// - Everything else (className, style, id, aria-*, native event handlers like onClick, ref) is
+//   passed to the element itself, and children go into its slots (`slot="name"` for named ones).
+// - `value` + `onValueChange` is React's controlled pattern; any `<prop>` + `<prop>change` pair
+//   works the same way.
+import * as React from 'react';
+import { serverContent } from './server.js';
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+const clone = (value) => (value && typeof value === 'object' ? structuredClone(value) : value);
+
+/** `zb-star-rating` → `ZbStarRating`. */
+const pascal = (tag) => tag.split(/[-.]/).filter(Boolean).map((part) => part[0].toUpperCase() + part.slice(1)).join('');
+
+// React 18 and older set custom elements' props as attributes under their own names, so
+// `className` would become a `classname` attribute; React 19 maps it.
+const legacy = Number.parseInt(React.version, 10) < 19;
+const attributes = (rest) => {
+  if (!legacy) return rest;
+  const { className, htmlFor, ...others } = rest;
+  if (className !== undefined) others.class = className;
+  if (htmlFor !== undefined) others.for = htmlFor;
+  return others;
+};
+
+/** The given props as JSON for the host's `zb-props`, or null (none, or not serializable). */
+export function propsJson(values) {
+  const given = Object.entries(values).filter(([, value]) => value !== undefined && typeof value !== 'function');
+  if (!given.length) return null;
+  try {
+    return JSON.stringify(Object.fromEntries(given));
+  } catch {
+    return null;
+  }
+}
+
+export function wrap(Element) {
+  const meta = Element?.zubra;
+  if (!meta) throw new TypeError('zubra: wrap() needs a compiled zubra element (the default export of a .zb module)');
+  const { tag, props, events } = meta;
+
+  const Component = React.forwardRef(function ZubraComponent(all, forwarded) {
+    const element = React.useRef(null);
+    const values = {};
+    const listeners = {};
+    const rest = {};
+    for (const key of Object.keys(all)) {
+      if (key === 'children') continue;
+      const event = key.length > 2 && key.startsWith('on') ? key.slice(2).toLowerCase() : null;
+      if (Object.hasOwn(props, key)) values[key] = all[key];
+      else if (event && events.includes(event)) listeners[event] = all[key];
+      else rest[key] = all[key];
+    }
+
+    // Subscribe once per event; always call the latest handler.
+    const handlers = React.useRef(listeners);
+    handlers.current = listeners;
+    useIsomorphicLayoutEffect(() => {
+      const node = element.current;
+      const subscriptions = events.map((name) => {
+        const listener = (event) => handlers.current[name]?.(event);
+        node.addEventListener(name, listener);
+        return () => node.removeEventListener(name, listener);
+      });
+      return () => subscriptions.forEach((unsubscribe) => unsubscribe());
+    }, []);
+
+    // Props as properties, after every render; removed props go back to their defaults.
+    const given = React.useRef(new Set());
+    useIsomorphicLayoutEffect(() => {
+      const node = element.current;
+      for (const name of given.current) {
+        if (!Object.hasOwn(values, name)) node[name] = clone(props[name].default);
+      }
+      for (const [name, value] of Object.entries(values)) {
+        if (value === undefined) node[name] = clone(props[name].default);
+        else if (node[name] !== value) node[name] = value;
+      }
+      given.current = new Set(Object.keys(values));
+    });
+
+    const ref = React.useCallback((node) => {
+      element.current = node;
+      if (typeof forwarded === 'function') forwarded(node);
+      else if (forwarded) forwarded.current = node;
+    }, [forwarded]);
+
+    // React 19 also sets the props itself when it creates the element, before inserting it, so
+    // the component's script sees them when it runs (`let draft = card`). (React 18 would write
+    // them as attributes; there, and for later changes and removals, the effect above sets them.)
+    const early = legacy || typeof window === 'undefined' ? {} : values;
+    // The props as JSON, on the server and in the browser alike (so hydration matches): the
+    // element starts with them before React sets them, and @zubra/server's injectShadowRoots
+    // renders the element's shadow root from them.
+    const json = propsJson(values);
+    const host = { ...early, ...attributes(rest), ...(json ? { 'zb-props': json } : {}), ref };
+    // An element with no React children: on the server, its content (a shadow-DOM element's
+    // declarative shadow root, a light-DOM element's rendered children, and a form control's
+    // fallback input) as the host's inner HTML, so it shows before JavaScript. React doesn't
+    // hydrate inner HTML, so nothing disagrees, and the element hydrates its markup in place (a
+    // light-DOM element from 3.3; shadow since 2.11). In the browser it's an empty string, which
+    // React leaves alone while hydrating and never changes after. (Next.js has no HTML hook for
+    // @zubra/server's injectShadowRoots; this works without one.)
+    if (React.Children.count(all.children) === 0) {
+      const html = typeof window === 'undefined' ? serverContent(Element, { props: json ? JSON.parse(json) : {}, name: rest.name }) : '';
+      return React.createElement(tag, { ...host, dangerouslySetInnerHTML: { __html: html }, suppressHydrationWarning: true });
+    }
+    return React.createElement(tag, host, all.children);
+  });
+  Component.displayName = pascal(tag);
+  Component.element = Element;
+  return Component;
+}

package/dist/production/remark.js

@@ -0,0 +1,173 @@
+// Generated by scripts/build-production.js from src/remark.js: the runtime without hot reloading. Do not edit.
+// Server markup whose markers were stripped: the element's runtime loads this module only when it
+// meets such markup.
+//
+// A sanitizer or a fragment parser can remove the server markup's markers: the region markers
+// (<?zb [?>, <?zb ]?>) and text anchors (<?zb ?>), or the comments a 4.x server wrote, which an HTML
+// minifier removes too. Rather than render such an element afresh, `remark` walks the template
+// against the markup by structure and puts the markers back (as comments), where that's unambiguous:
+// - a text anchor's text runs up to the next element, so its place is always known;
+// - an zb-if region holds the branch the current values choose, and an zb-each region one row
+//   per item, each with the shape of its block (checked element by element);
+// - a light-DOM slot region is the rest of its range, when nothing follows it there; its
+//   content is the fallback if it has the fallback's shape, and supplied content otherwise.
+// Anything else (an zb-await, content projected into a child component, a region the server
+// left to the browser, other than one left empty) can't be placed for sure, and the element
+// renders afresh as before.
+
+const TEXT = 3;
+const COMMENT = 8;
+
+/** Put back the comments of server markup under `root` (see above). Whether it could. */
+export function remark(root, template, parts, { blueprint, isOpen, isClose, read: $r, untrack, State }) {
+  const edits = [];
+  const fail = { failed: true };
+  const mapOf = (list) => {
+    const map = new Map();
+    for (const part of list) {
+      if (part.hydrate) throw fail; // content projected into a child component
+      map.set(part.path.join(','), part);
+    }
+    return map;
+  };
+  const insert = (parent, before, data) => edits.push({ parent, before, data });
+  const skipText = (node) => {
+    while (node && node.nodeType === TEXT) node = node.nextSibling;
+    return node;
+  };
+  const isBlank = (node) => node.nodeType === TEXT && node.data.trim() === '';
+  // Whether markup `node` (or the end of the range, for null) is what comes after the template's
+  // region opened at `open`: its next element, or the end.
+  const followsRegion = (open, node) => {
+    let depth = 0;
+    let next = open.nextSibling;
+    for (; next; next = next.nextSibling) {
+      if (isOpen(next)) depth++;
+      else if (isClose(next) && depth-- === 0) break;
+    }
+    next = next?.nextSibling;
+    while (next && next.nodeType === TEXT) next = next.nextSibling;
+    if (!next) return !node;
+    return next.nodeType === 1 && node?.nodeType === 1 && node.localName === next.localName;
+  };
+  // Walk the template nodes from `t` against the markup from `cursor` (children of `parent`);
+  // returns the markup node after what they matched.
+  function walkRange(t, parent, cursor, prefix, map) {
+    let index = 0;
+    for (; t; t = t.nextSibling) {
+      if (t.nodeType === TEXT) {
+        if (cursor?.nodeType === TEXT) cursor = cursor.nextSibling; // static text (if kept)
+        continue;
+      }
+      const path = [...prefix, index];
+      if (t.nodeType === 1) {
+        const node = skipText(cursor);
+        if (!node || node.nodeType !== 1 || node.localName !== t.localName) throw fail;
+        if (t.localName.includes('-')) {
+          // A child component renders (and restores) its own content.
+          const key = path.join(',');
+          for (const other of map.keys()) if (other.startsWith(`${key},`)) throw fail;
+        } else {
+          const after = walkRange(t.firstChild, node, node.firstChild, path, map);
+          // Anything left must be text (an element's text part renders into it).
+          for (let rest = after; rest; rest = rest.nextSibling) if (rest.nodeType !== TEXT) throw fail;
+        }
+        cursor = node.nextSibling;
+        index++;
+        continue;
+      }
+      if (t.nodeType !== COMMENT) continue;
+      if (t.data === '') {
+        // A text anchor: its text is the run that starts here.
+        insert(parent, cursor, '');
+        if (cursor?.nodeType === TEXT) cursor = cursor.nextSibling;
+        index++;
+        continue;
+      }
+      if (t.data !== '[') throw fail;
+      const part = map.get(path.join(','));
+      if (!part) throw fail;
+      const block = (chosen, args) => {
+        const content = blueprint(chosen, parent);
+        return walkRange(content.firstChild, parent, cursor, [], mapOf(chosen.parts(...args)));
+      };
+      if (part.when || part.each) {
+        const saved = edits.length;
+        const start = cursor;
+        try {
+          insert(parent, cursor, '[');
+          if (part.when) {
+            const chosen = part.blocks[untrack(() => $r(part.when())) ? 0 : 1];
+            if (chosen) cursor = block(chosen, []);
+          } else {
+            const list = untrack(() => $r(part.each()));
+            if (!Array.isArray(list)) throw fail;
+            list.forEach((item, position) => {
+              insert(parent, cursor, '[');
+              cursor = block(part.block, [new State(item), new State(position)]);
+              insert(parent, cursor, ']');
+            });
+          }
+          insert(parent, cursor, ']');
+        } catch (error) {
+          if (error !== fail) throw error;
+          // Nothing here where the region's content would be: the server left it to the
+          // browser (`[?`), when what follows in the markup is what follows in the template.
+          edits.length = saved;
+          cursor = start;
+          if (!followsRegion(t, skipText(cursor))) throw fail;
+          insert(parent, cursor, '[?');
+          insert(parent, cursor, ']');
+        }
+      } else if (part.slot) {
+        // Only as the last thing in its range: then its content is everything that's left.
+        let next = t.nextSibling;
+        while (next && next.nodeType === COMMENT && next.data === ']') next = next.nextSibling;
+        for (let rest = next; rest; rest = rest.nextSibling) if (!(rest.nodeType === TEXT)) throw fail;
+        let fallback = !!part.fallback;
+        if (fallback) {
+          // The fallback's shape exactly (its elements, in order): it's the fallback.
+          const saved = edits.length;
+          try {
+            const probe = [];
+            const end = block(part.fallback, []);
+            for (let rest = end; rest; rest = rest.nextSibling) if (!isBlank(rest)) throw fail;
+            probe.push(...edits.splice(saved));
+            insert(parent, cursor, '[');
+            edits.push(...probe);
+            insert(parent, null, ']');
+          } catch (error) {
+            if (error !== fail) throw error;
+            edits.length = saved;
+            fallback = false;
+          }
+        }
+        if (!fallback) {
+          insert(parent, cursor, '[!');
+          insert(parent, null, ']');
+        }
+        cursor = null;
+      } else {
+        throw fail; // zb-await
+      }
+      // Past the template's matching close.
+      let depth = 0;
+      for (t = t.nextSibling; t; t = t.nextSibling) {
+        if (isOpen(t)) depth++;
+        else if (isClose(t) && depth-- === 0) break;
+      }
+      if (!t) throw fail;
+      index++;
+    }
+    return cursor;
+  }
+  try {
+    const after = walkRange(template.firstChild, root, root.firstChild, [], mapOf(parts));
+    for (let rest = after; rest; rest = rest.nextSibling) if (!isBlank(rest)) throw fail;
+  } catch (error) {
+    if (error === fail) return false;
+    throw error;
+  }
+  for (const { parent, before, data } of edits) parent.insertBefore(document.createComment(data), before);
+  return true;
+}

package/dist/production/resource.js

@@ -0,0 +1,76 @@
+// Generated by scripts/build-production.js from src/resource.js: the runtime without hot reloading. Do not edit.
+// Async data as signals: `resource(fetcher)`.
+//
+//   const user = resource(({ signal }) => fetch(`/api/users/${p.id}`, { signal }).then((r) => r.json()))
+//   <zb-if test={user.loading}><p>Loading…</p><zb-else><p>{user.value?.name}</p></zb-else></zb-if>
+//
+// The fetcher runs at once and again whenever a signal it read before its first `await`
+// changes (a prop, a state), like an effect. A new run aborts the previous one through the
+// `AbortSignal` it was given, and so does the element's removal; a result that arrives after a
+// newer run started is dropped, so the value is always the latest request's. While a new run is
+// pending the previous value stays (`loading` is true), so the UI doesn't flash empty.
+import { Signal } from './signal.js';
+import { effect } from './effect.js';
+
+const { untrack } = Signal.subtle;
+
+/** Marks a resource, so `<zb-await>` follows its state instead of awaiting it once. */
+export const RESOURCE = Symbol.for('zubra.resource');
+
+/**
+ * A signal-backed view of async data. `value`, `error`, `loading` and `status` (`"pending"`,
+ * `"ready"`, `"error"`) are reactive reads; `refresh()` runs the fetcher again; `then()` makes
+ * it awaitable (resolving to the current run's value).
+ */
+export function resource(fetcher, { initial } = {}) {
+  if (typeof fetcher !== 'function') throw new TypeError('zubra: resource() takes a function that returns a value or a promise');
+  const value = new Signal.State(initial);
+  const error = new Signal.State(undefined);
+  const status = new Signal.State('pending');
+  const version = new Signal.State(0);
+  let current = null; // the latest run's promise
+
+  effect(() => {
+    version.get();
+    const controller = new AbortController();
+    let result;
+    try {
+      result = fetcher({ signal: controller.signal });
+    } catch (thrown) {
+      result = Promise.reject(thrown);
+    }
+    untrack(() => {
+      if (status.get() !== 'pending') status.set('pending');
+    });
+    const run = Promise.resolve(result).then(
+      (resolved) => {
+        if (run !== current) return resolved;
+        value.set(resolved);
+        error.set(undefined);
+        status.set('ready');
+        return resolved;
+      },
+      (thrown) => {
+        if (run !== current) throw thrown;
+        // An aborted run was replaced or the element left: not an error to show.
+        if (controller.signal.aborted) return untrack(() => value.get());
+        error.set(thrown);
+        status.set('error');
+        throw thrown;
+      },
+    );
+    run.catch(() => {}); // reported through `error`
+    current = run;
+    return () => controller.abort();
+  });
+
+  return {
+    [RESOURCE]: true,
+    get value() { return value.get(); },
+    get error() { return error.get(); },
+    get status() { return status.get(); },
+    get loading() { return status.get() === 'pending'; },
+    refresh() { version.set(untrack(() => version.get()) + 1); },
+    then(resolve, reject) { return current.then(resolve, reject); },
+  };
+}

package/dist/production/server.js

@@ -0,0 +1,98 @@
+// Generated by scripts/build-production.js from src/server.js: the runtime without hot reloading. Do not edit.
+// Server rendering of zubra elements, for framework integrations (the Astro renderer, …).
+//
+// A `.zb` module loads on a server: `define()` returns a stand-in that carries the element's
+// `zubra` description and can't be constructed. The build plugin's server build of each component
+// registers how to render it (through @zubra/compiler, with the component's sources embedded), and
+// `renderToString(Element, …)` uses that. Without the plugin, render a file with
+// `@zubra/compiler`'s `renderToString(path, …)` instead.
+
+// One registry per process, even with several copies of the runtime.
+const renderers = (globalThis[Symbol.for('zubra.renderers')] ??= new Map());
+
+/** Register how to server-render `tag`: `(props, slots) => html`. Called by the plugin's output. */
+export function registerRenderer(tag, render) {
+  renderers.set(tag, render);
+}
+
+/** Whether `Element` is a zubra element that can be rendered here. */
+export function canRender(Element) {
+  return typeof Element?.zubra?.tag === 'string' && renderers.has(Element.zubra.tag);
+}
+
+/**
+ * The element's server-rendered HTML, which it hydrates in the browser. `props` are its prop
+ * values (JSON), `attributes` other attributes for the host (`class`, `id`, …), and `slots` the
+ * supplied content by slot name (`default` for unnamed content), as HTML.
+ */
+export function renderToString(Element, { props = {}, attributes = {}, slots = {} } = {}) {
+  const meta = Element?.zubra;
+  if (!meta) throw new TypeError('zubra: renderToString() needs a compiled zubra element (the default export of a .zb module)');
+  const render = renderers.get(meta.tag);
+  if (!render) {
+    throw new Error(`zubra: no server renderer for <${meta.tag}>; build it with the zubra plugin (in its server build), or use @zubra/compiler's renderToString(path)`);
+  }
+  for (const name of Object.keys(slots)) {
+    if (name !== 'default' && !meta.slots.includes(name)) throw new Error(`zubra: <${meta.tag}> has no slot \`${name}\``);
+  }
+  const html = render(props, slots);
+  const extra = Object.entries(attributes)
+    .filter(([, value]) => value != null && value !== false)
+    .map(([name, value]) => (value === true ? ` ${name}` : ` ${name}="${escapeAttribute(String(value))}"`))
+    .join('');
+  // Onto the host's start tag (the markup starts with it).
+  return extra ? html.replace(/^(<[a-z][\w.-]*)/, `$1${extra}`) : html;
+}
+
+/**
+ * An element's server-rendered content, for a host a framework renders bare: for a shadow-DOM
+ * element its declarative shadow root (`<template shadowrootmode>…</template>`), for a light-DOM
+ * element its rendered children (with their hydration markers); plus, for a form-associated
+ * element with a `name`, a hidden input with the value it would submit (the element removes it
+ * when it starts). The framework must leave the host's content alone while hydrating (React's
+ * `dangerouslySetInnerHTML`, Vue's `innerHTML`). Empty when it can't be rendered here.
+ */
+export function serverContent(Element, { props = {}, name } = {}) {
+  const meta = Element?.zubra;
+  if (!meta || !canRender(Element)) return '';
+  let html;
+  try {
+    html = renderers.get(meta.tag)(props, {});
+  } catch {
+    return ''; // left to the browser rather than break the page
+  }
+  let content = '';
+  if (meta.shadow) {
+    const start = html.search(/<template\s[^>]*shadowrootmode/i);
+    if (start < 0) return '';
+    let depth = 0;
+    for (const match of html.slice(start).matchAll(/<template\b[^>]*>|<\/template>/gi)) {
+      depth += match[0][1] === '/' ? -1 : 1;
+      if (depth === 0) {
+        content = html.slice(start, start + match.index + match[0].length);
+        break;
+      }
+    }
+  } else {
+    // The host's children: from the end of its start tag to its end tag.
+    const open = html.match(/^<[a-z][\w.-]*(?:\s[^>]*)?>/);
+    const close = html.lastIndexOf(`</${meta.tag}>`);
+    if (!open || close < open[0].length) return '';
+    content = html.slice(open[0].length, close);
+  }
+  if (!content) return '';
+  const models = Object.entries(meta.props).filter(([, spec]) => spec.model);
+  if (!meta.form || !name || models.length !== 1) return content;
+  const [[model, spec]] = models;
+  const value = model in props ? props[model] : spec.default;
+  if (value == null || value === false || value === '') return content;
+  const text = value === true ? 'on' : typeof value === 'object' ? JSON.stringify(value) : String(value);
+  return `${content}<input type="hidden" name="${escapeAttribute(String(name))}" value="${escapeAttribute(text)}" data-zb-fallback>`;
+}
+
+/** `serverContent` for a shadow-DOM element (the 2.11 name); empty for a light-DOM one. */
+export function shadowContent(Element, options) {
+  return Element?.zubra?.shadow ? serverContent(Element, options) : '';
+}
+
+const escapeAttribute = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');