@zerotal/flow 1.3.0 → 1.5.0

package/src/components.ts

@@ -11,8 +11,16 @@
  * ```
  */
 
-import { jsx, _resolveReactiveName, _resolveBindName, _injectedBindKey } from "./jsx-runtime.ts";
+import {
+  jsx,
+  _resolveReactiveName,
+  _resolveBindName,
+  _injectedBindKey,
+  _renderChild,
+  _protectThunks,
+} from "./jsx-runtime.ts";
 import type { HtmlNode } from "./jsx-runtime.ts";
+import { publishSection, reserveSection } from "./sections.ts";
 import { jsLiteral } from "./utils.ts";
 
 // ── <Link> ────────────────────────────────────────────────────────────────
@@ -22,6 +30,7 @@ export interface LinkProps {
   hover?: boolean;
   current?: boolean;
   exact?: boolean;
+  preserveScroll?: boolean;
   [key: string]: unknown;
 }
 
@@ -35,18 +44,26 @@ export interface LinkProps {
  * the automatic active state to an exact path match. Any other props pass through to
  * the `<a>`.
  *
+ * Following a link lands at the top of the new page, as a full navigation would —
+ * or at the fragment, if the href names one. `preserveScroll` leaves the viewport
+ * where it is instead, which is what you want for a control the user is looking at
+ * partway down a page (a filter, a sort header, a tab strip) rather than a link
+ * that takes them somewhere else.
+ *
  * @example
  * ```tsx
  * <Link href="/posts" hover>Posts</Link>
  * <Link href="/dashboard" exact>Dashboard</Link>
+ * <Link href="/posts?sort=title" preserveScroll>Title</Link>
  * ```
  *
  * @category Navigation & data
  */
 export function Link(props: LinkProps & { children?: unknown }): HtmlNode {
-  const { href, hover, current, exact, children, ...rest } = props;
+  const { href, hover, current, exact, preserveScroll, children, ...rest } = props;
   const out: Record<string, unknown> = { ...rest, href, navigate: true, children };
   if (hover) out["navigateHover"] = true;
+  if (preserveScroll) out["navigatePreserveScroll"] = true;
   // `current` overrides the automatic URL-based active state:
   //   false → never active (flow:current.ignore)
   //   true  → always active, and stays active across SPA navigations (flow:current.force).
@@ -927,8 +944,7 @@ export interface PagerProps {
  * @remarks
  * Pass `params` to preserve other query state (search term, per-page, …). `hover`
  * prefetches each page; `prevLabel`/`nextLabel` and the class props override the
- * defaults. This is the links UI — the Flow equivalent of Livewire's
- * `$paginator->links()` view.
+ * defaults. This is the links UI for a paginator.
  *
  * @example
  * ```tsx
@@ -1463,3 +1479,269 @@ export function Drawer(props: DrawerProps): HtmlNode {
   // and nothing intercepts clicks when closed (both are display:none via x-show).
   return jsx("div", { ...rest, class: "contents", children: [backdrop, jsx("div", panelOut)] });
 }
+
+// ── <ErrorBoundary> ───────────────────────────────────────────────────────────
+/** Props for {@link ErrorBoundary}: the protected `children` and what to show instead on failure. */
+export interface ErrorBoundaryProps {
+  /** Markup to render when a child fails. A function receives the thrown error. */
+  fallback?: HtmlNode | ((error: unknown) => HtmlNode);
+  /** Called server-side when a child fails, for logging or reporting. */
+  onError?: (error: unknown) => void;
+  /** Wrapper element. Defaults to `"div"`. */
+  tag?: string;
+  class?: string;
+  children?: unknown;
+  [key: string]: unknown;
+}
+
+/**
+ * Contains a failure in a nested `<Component />` so it costs that component
+ * rather than the page.
+ *
+ * @remarks
+ * Without a boundary, a child component that throws while mounting or rendering
+ * takes the whole response with it — one broken widget blanks the dashboard.
+ * Wrapped, the child is replaced by `fallback` and everything around it renders.
+ *
+ * What it covers is child *components*. Inline JSX in the same `render()` is evaluated before
+ * this component is ever called, so a throw there cannot be intercepted here —
+ * move the risky work into a child component, which is where it belongs anyway.
+ * Boundaries nest, and the innermost one wins.
+ *
+ * The failure is reported through `onError` and logged; it is contained, not
+ * hidden.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<p class="text-sm text-red-600">Sales data unavailable.</p>}>
+ *   <SalesReport />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @category Feedback
+ */
+export function ErrorBoundary(props: ErrorBoundaryProps): HtmlNode {
+  const { fallback, onError, tag, class: cls, children, ...rest } = props;
+
+  // Children are already rendered, and their child-component thunks already
+  // queued but not yet run, so the tokens sitting in this string are exactly the
+  // pending children this boundary is responsible for.
+  const inner = _renderChild(children);
+
+  _protectThunks(inner, (error) => {
+    try {
+      onError?.(error);
+    } catch {
+      // A reporting hook that throws must not replace the original failure with
+      // a less useful one.
+    }
+    console.error("[Flow] A component inside <ErrorBoundary> failed to render:", error);
+
+    if (typeof fallback === "function") return fallback(error).html;
+    if (fallback) return fallback.html;
+    return (
+      '<div data-flow-boundary-error role="alert" class="rounded border border-red-300 ' +
+      'bg-red-50 p-3 text-sm text-red-700">Something went wrong loading this section.</div>'
+    );
+  });
+
+  const out: Record<string, unknown> = { ...rest, children: { html: inner } };
+  out["data-flow-boundary"] = true;
+  if (cls) out["class"] = cls;
+  return jsx(tag ?? "div", out);
+}
+
+// ── <SectionContent> / <SectionOutlet> ────────────────────────────────────────
+/** Props for {@link SectionContent}: the `name` to publish under, and the markup. */
+export interface SectionContentProps {
+  /** Section name. Must match a {@link SectionOutlet}. */
+  name: string;
+  children?: unknown;
+}
+
+/**
+ * Publish markup to a named section, rendered wherever the matching
+ * {@link SectionOutlet} sits — typically in the layout.
+ *
+ * @remarks
+ * This renders nothing where it appears. It is how a page reaches a region it
+ * does not own: a page-specific toolbar button, a breadcrumb trail, a title. The
+ * alternative is threading content through every component in between as props,
+ * or the layout knowing about every page that might contribute.
+ *
+ * Two components may publish to one name; their content accumulates in render
+ * order rather than one replacing the other.
+ *
+ * Sections resolve once per document render. A WebSocket patch re-renders a
+ * component, not the layout, so content published during one does not reach an
+ * outlet outside the component being patched.
+ *
+ * @example
+ * ```tsx
+ * <SectionContent name="toolbar">
+ *   <button onClick={this.publish}>Publish</button>
+ * </SectionContent>
+ * ```
+ *
+ * @category Layout
+ */
+export function SectionContent(props: SectionContentProps): HtmlNode {
+  publishSection(props.name, _renderChild(props.children));
+  return { html: "" };
+}
+
+/** Props for {@link SectionOutlet}: the `name` to render, plus optional default content. */
+export interface SectionOutletProps {
+  /** Section name. Must match a {@link SectionContent}. */
+  name: string;
+  /** Rendered when nothing was published to this section. */
+  children?: unknown;
+}
+
+/**
+ * Render whatever was published to a named section.
+ *
+ * @remarks
+ * Place it in a layout to give pages a hole to fill. Children are the default,
+ * used when no page published anything.
+ *
+ * Order does not matter: the outlet reserves its place and is filled after the
+ * page *and* the layout have rendered. That is what makes the usual arrangement
+ * work — outlet in the layout, content in the page it wraps — where reading a
+ * store at render time would always be too early.
+ *
+ * @example
+ * ```tsx
+ * <header class="flex gap-2">
+ *   <SectionOutlet name="toolbar" />
+ * </header>
+ * ```
+ *
+ * @category Layout
+ */
+export function SectionOutlet(props: SectionOutletProps): HtmlNode {
+  return { html: reserveSection(props.name, _renderChild(props.children)) };
+}
+
+// ── <Virtualize> ──────────────────────────────────────────────────────────────
+/** Props for {@link Virtualize}: the current window of rows and how to ask for another. */
+export interface VirtualizeProps<T> {
+  /** The rows to render — the current window, not the whole collection. */
+  items: readonly T[];
+  /** Height of one row in pixels. Every row must be this tall. */
+  itemHeight: number;
+  /** Total rows in the full collection. Defaults to `items.length`. */
+  total?: number;
+  /** Index of `items[0]` within the full collection. Defaults to 0. */
+  start?: number;
+  /** Height of the scroll viewport in pixels. Defaults to 400. */
+  height?: number;
+  /**
+   * Server action requesting a different window, called as `(start, count)`.
+   * Omit when the collection is small enough to render whole.
+   */
+  onWindow?: unknown;
+  /** Rows rendered beyond the viewport on each side, to hide fetch latency. Defaults to 6. */
+  overscan?: number;
+  class?: string;
+  /** The row template: `(item, index) => <div>…</div>`, where `index` is absolute. */
+  children: (item: T, index: number) => HtmlNode;
+}
+
+/**
+ * A scrolling window over a collection too large to put in the DOM.
+ *
+ * @remarks
+ * Only the visible rows exist as elements; spacers above and below hold the
+ * scrollbar at the size the full collection implies. As the viewport moves, the
+ * component asks the server for the window it now needs via `onWindow` — a
+ * server-authoritative arrangement, which means the collection never has to
+ * reach the client in full.
+ *
+ * Rows must be a known, uniform `itemHeight`. That is what lets a scroll offset
+ * be turned into an index without measuring anything.
+ *
+ * Distinct from {@link InfiniteScroll}, which appends and grows the DOM without
+ * bound. Reach for this when *keeping* every rendered row is the problem.
+ *
+ * @example
+ * ```tsx
+ * <Virtualize
+ *   items={this.window}
+ *   start={this.windowStart}
+ *   total={this.total}
+ *   itemHeight={36}
+ *   height={480}
+ *   onWindow={this.loadWindow}
+ * >
+ *   {(row) => <div class="h-9 px-3 leading-9">{row.name}</div>}
+ * </Virtualize>
+ * ```
+ *
+ * @category Navigation & data
+ */
+export function Virtualize<T>(props: VirtualizeProps<T>): HtmlNode {
+  const {
+    items,
+    itemHeight,
+    total,
+    start = 0,
+    height = 400,
+    onWindow,
+    overscan = 6,
+    class: cls,
+    children,
+  } = props;
+
+  const rows = items ?? [];
+  const count = total ?? rows.length;
+  const visible = Math.max(1, Math.ceil(height / itemHeight));
+
+  let body = "";
+  for (let i = 0; i < rows.length; i++) {
+    const node = children(rows[i]!, start + i);
+    body += node && typeof node === "object" && "html" in node ? node.html : "";
+  }
+
+  // Spacers rather than absolutely-positioned rows: the browser keeps the
+  // scrollbar honest without every row needing a computed `top`, and the row
+  // template stays ordinary markup the caller can style however they like.
+  const above = start * itemHeight;
+  const below = Math.max(0, (count - start - rows.length) * itemHeight);
+
+  const state =
+    `{ h: ${itemHeight}, v: ${visible}, o: ${overscan}, at: ${start}, ` +
+    `win() { const s = Math.max(0, Math.floor($el.scrollTop / this.h) - this.o); ` +
+    `const c = this.v + this.o * 2; ` +
+    // Only ask when the window actually moved: scroll fires far more often than
+    // the set of needed rows changes, and every request is a round trip.
+    `if (s === this.at) return; this.at = s; ${_virtualizeRequest(onWindow)} } }`;
+
+  return jsx("div", {
+    ...(cls ? { class: cls } : {}),
+    "x-data": state,
+    "x-on:scroll.passive.throttle.100ms": "win()",
+    style: `height:${height}px;overflow-y:auto`,
+    "data-flow-virtualize": true,
+    children: {
+      html:
+        `<div style="height:${above}px" data-flow-virtualize-spacer></div>` +
+        body +
+        `<div style="height:${below}px" data-flow-virtualize-spacer></div>`,
+    },
+  });
+}
+
+/**
+ * The client expression that asks for a new window.
+ *
+ * A method reference arrives as a function whose `name` is the server action to
+ * call. Anything else means no provider was supplied, in which case scrolling
+ * just moves over rows that are already present.
+ */
+function _virtualizeRequest(onWindow: unknown): string {
+  if (typeof onWindow !== "function") return "";
+  const method = (onWindow as { name?: string }).name;
+  if (!method) return "";
+  return `$flow.${method}(s, c);`;
+}

package/src/config.ts

@@ -12,8 +12,8 @@ export interface FlowConfigShape {
    */
   cspSafe: boolean;
   /**
-   * Global middleware re-applied on every WebSocket update (Livewire-style
-   * persistent middleware). Entries are matched against the app's global
+   * Global middleware re-applied on every WebSocket update (persistent
+   * middleware). Entries are matched against the app's global
    * pipeline by class reference or by class name.
    *
    * Route middleware always re-runs and does not need to be listed here.

package/src/decorators.ts

@@ -189,13 +189,26 @@ function _scanChain(startProto: object | null): void {
 interface PendingField {
   name: string;
   apply: (proto: object) => void;
+  /**
+   * `context.metadata` — one object per **file**, not per class (Bun shares it across
+   * every class defined in the same module). It is the only link back to where a
+   * buffered entry came from, because `Symbol.metadata` never reaches the class, so
+   * there is nothing to read at drain time.
+   *
+   * It is enough for the case that matters: a class may only claim registrations
+   * enqueued by its own file. Without it, a component that declares `count` and is
+   * never read leaves that entry in the buffer forever, and the next class in a
+   * *different* file with an own field called `count` claims it — silently getting
+   * the wrong decorator, and never getting its own.
+   */
+  group: object | undefined;
 }
 const _pendingFields: PendingField[] = [];
 const _drainedProtos = new WeakSet<object>();
 
 /** Enqueue a field registration captured (with the correct name) in the decorator body. */
-function _enqueueField(name: string, apply: (proto: object) => void): void {
-  _pendingFields.push({ name, apply });
+function _enqueueField(name: string, apply: (proto: object) => void, group?: object): void {
+  _pendingFields.push({ name, apply, group });
 }
 
 /**
@@ -206,6 +219,11 @@ function _enqueueField(name: string, apply: (proto: object) => void): void {
  * decorators run consecutively at definition time (including a subclass's mixin-supplied fields)
  * and in declaration order, so its block is exactly such a run.
  *
+ * The search is scoped to one FILE's entries at a time, newest first — see
+ * {@link PendingField.group}. Scanning the whole buffer let a class claim a same-named
+ * entry left behind by an unrelated file, which is invisible: it gets the wrong
+ * decorator and never gets its own.
+ *
  * The strictly-increasing constraint is what makes this robust when two classes share field
  * names AND their blocks are adjacent in the buffer (e.g. AddTransactionModal and TransferModal
  * both declare `accountId`/`open`/`fAmount`). A plain "longest run ⊆ own" would greedily extend
@@ -222,40 +240,109 @@ function _drainFields(ctor: unknown): void {
   _drainedProtos.add(proto); // mark first to stay re-entrancy-safe during the probe
   if (_pendingFields.length === 0) return;
 
+  // The fields THIS class declares — not the ones it inherits. Instance fields all
+  // land on the instance whoever declared them, so `Object.keys(new Derived())` also
+  // lists the base's; subtracting the base's own probe leaves this class's block.
+  //
+  // The difference is load-bearing, not tidiness. `PaginatedPage extends
+  // Pagination(Component)` inherits `page`, so an undrained `[page, page]` group left
+  // by *another* `Pagination(...)` application matched it — and being two entries long
+  // it beat `PaginatedPage`'s own one-entry `[rows]`. The subclass silently ended up
+  // with the mixin's decorators and none of its own.
+  //
+  // If the base cannot be constructed without arguments there is nothing to subtract,
+  // and the full key set is the same answer this used to give.
   let ownIndex: Map<string, number>;
   try {
     const keys = Object.keys(new (ctor as new () => object)());
-    ownIndex = new Map(keys.map((k, i) => [k, i]));
+    const base = Object.getPrototypeOf(ctor) as unknown;
+    let inherited: Set<string> | undefined;
+    if (typeof base === "function" && base !== Function.prototype) {
+      try {
+        inherited = new Set(Object.keys(new (base as new () => object)()));
+      } catch {
+        inherited = undefined;
+      }
+    }
+    const declared = inherited ? keys.filter((k) => !inherited.has(k)) : keys;
+    ownIndex = new Map(declared.map((k, i) => [k, i]));
   } catch {
     return; // not constructible without args — nothing we can match
   }
 
-  // Longest contiguous run whose names map to strictly-increasing declaration-order indices
-  // (equal allowed only for an identical repeated name — multiple decorators on one field).
-  let bestStart = -1;
-  let bestLen = 0;
+  // Match within one class's entries at a time — see {@link PendingField.group}.
+  //
+  // Scanning the buffer as one flat list let a class claim a same-named entry left
+  // behind by an unrelated class, and that is invisible when it happens: the class
+  // silently gets the wrong decorator and never gets its own. It is not
+  // hypothetical — a component that declares a field and is never read leaves its
+  // entry buffered for the life of the process, and names like `count`, `open` and
+  // `page` are declared all over a codebase.
+  //
+  // Groups are keyed by identity rather than by adjacency, because a class's entries
+  // need not be contiguous: an import evaluated part-way through a module interleaves
+  // another file's.
+  const groups: object[] = [];
+  const byGroup = new Map<object, number[]>();
+  const NO_GROUP = {}; // stand-in key, so entries without metadata still group together
   for (let i = 0; i < _pendingFields.length; i++) {
-    if (!ownIndex.has(_pendingFields[i]!.name)) continue;
-    let last = -1;
-    let lastName = "";
-    let j = i;
-    while (j < _pendingFields.length) {
-      const name = _pendingFields[j]!.name;
-      const idx = ownIndex.get(name);
-      if (idx === undefined) break;
-      if (idx < last || (idx === last && name !== lastName)) break;
-      last = idx;
-      lastName = name;
-      j++;
+    const key = _pendingFields[i]!.group ?? NO_GROUP;
+    let list = byGroup.get(key);
+    if (!list) {
+      list = [];
+      byGroup.set(key, list);
+      groups.push(key);
     }
-    if (j - i > bestLen) {
-      bestLen = j - i;
-      bestStart = i;
+    list.push(i);
+  }
+
+  // Best run across every group, NOT the first group that matches anything. A class
+  // whose own group is a two-field block must beat an unrelated group that happens to
+  // share one of those names, and only the length says so. Ties go to the most
+  // recently enqueued group: a class is drained after its own definition, so among
+  // equal candidates the newest is the one that just defined it, and older equals are
+  // leftovers by construction.
+  let bestIdxs: number[] | null = null;
+  let bestLen = 0;
+  let bestGroup = -1;
+  for (let g = 0; g < groups.length; g++) {
+    const idxs = byGroup.get(groups[g]!)!;
+
+    // Longest contiguous run whose names map to strictly-increasing declaration-order
+    // indices (equal allowed only for an identical repeated name — multiple decorators
+    // on one field). "Contiguous" is within this group's entries.
+    for (let i = 0; i < idxs.length; i++) {
+      if (!ownIndex.has(_pendingFields[idxs[i]!]!.name)) continue;
+      let last = -1;
+      let lastName = "";
+      let j = i;
+      while (j < idxs.length) {
+        const name = _pendingFields[idxs[j]!]!.name;
+        const idx = ownIndex.get(name);
+        if (idx === undefined) break;
+        if (idx < last || (idx === last && name !== lastName)) break;
+        last = idx;
+        lastName = name;
+        j++;
+      }
+      // Longer always wins. On a tie, a LATER group wins (newest definition), but an
+      // earlier run within the SAME group is kept — which is the previous behaviour.
+      const len = j - i;
+      if (len > bestLen || (len === bestLen && len > 0 && g > bestGroup)) {
+        bestLen = len;
+        bestIdxs = idxs.slice(i, j);
+        bestGroup = g;
+      }
     }
   }
-  if (bestStart === -1) return;
-  const claimed = _pendingFields.splice(bestStart, bestLen);
-  for (const e of claimed) e.apply(proto);
+  if (!bestIdxs || bestLen === 0) return;
+
+  // Apply, then remove the claimed entries. Removal is by descending buffer index so
+  // the earlier positions stay valid while splicing.
+  for (const bufIdx of bestIdxs) _pendingFields[bufIdx]!.apply(proto);
+  for (let k = bestIdxs.length - 1; k >= 0; k--) {
+    _pendingFields.splice(bestIdxs[k]!, 1);
+  }
 }
 
 /** Drain via an instance or a prototype before reading. */
@@ -291,7 +378,7 @@ function _fieldDecorator(
   return (_value, context) => {
     const name = String(context.name);
     _assertField(name, context);
-    _enqueueField(name, (proto) => register(proto, name));
+    _enqueueField(name, (proto) => register(proto, name), context.metadata);
   };
 }
 
@@ -415,7 +502,7 @@ function _memoizeGetter(orig: () => unknown, name: string): () => unknown {
  * @remarks
  * A computed getter is not serialized and is not client-writable; it renders as static
  * server-produced text. The result is memoized for the duration of a single render pass
- * (Livewire-style per-request caching): an expensive getter read several times in one template
+ * — an expensive getter read several times in one template
  * runs once. The cache is scoped to the active render (see `_renderFlowPage`), so reads
  * outside rendering always recompute and never go stale. Apply only to a getter — a field-style
  * decorator on it is rejected; conversely `@computed` on a non-getter is a TypeScript error.
@@ -512,7 +599,7 @@ export function expose(_value: unknown, context: ExposeContext): void {
   }
   if (context.kind === "field") {
     // Field: capture in the body and enqueue (see _fieldDecorator / _drainFields).
-    _enqueueField(name, (proto) => _register(_exposedProps, proto, name));
+    _enqueueField(name, (proto) => _register(_exposedProps, proto, name), context.metadata);
     return;
   }
   // Method: tag the function so `_scanProto` finds it on the DECLARING prototype (see header);
@@ -671,7 +758,7 @@ export function resolveSharedChannel(channel: SharedChannel, instance: object):
 // A child-component prop the PARENT can push new values into on every re-render.
 // Included in the snapshot and client-writable (so the framework can deliver
 // parent updates), and re-emitted by the parent so the child re-renders when the
-// bound value changes. Mirrors Livewire's #[Reactive].
+// bound value changes.
 
 /**
  * Marks a child-component prop as reactive — the parent re-pushes new values into it on every
@@ -680,8 +767,8 @@ export function resolveSharedChannel(channel: SharedChannel, instance: object):
  * @remarks
  * The prop is included in the snapshot and is client-writable (so the framework can deliver the
  * parent's updates), and the parent re-emits it so the child re-renders when the bound value
- * changes. This is a one-way parent→child binding; use `@modelable` for two-way. Mirrors
- * Livewire's `#[Reactive]`. Applies to a field only.
+ * changes. This is a one-way parent→child binding; use `@modelable` for two-way.
+ * Applies to a field only.
  *
  * @example
  * ```tsx
@@ -700,8 +787,8 @@ export const reactive = _fieldDecorator((proto, name) => {
 
 // ── @modelable ────────────────────────────────────────────────────────────────
 // A reactive prop that ALSO syncs back to the parent: `value={this.x}` on a child
-// component binds the parent's `x` to the child's modelable prop both ways. Mirrors
-// Livewire's #[Modelable]. A modelable prop is implicitly reactive.
+// component binds the parent's `x` to the child's modelable prop both ways.
+// A modelable prop is implicitly reactive.
 
 /**
  * Marks a child-component prop as two-way bound to the parent (parent↔child).
@@ -709,8 +796,8 @@ export const reactive = _fieldDecorator((proto, name) => {
  * @remarks
  * A modelable prop is reactive (the parent pushes new values in on re-render) AND syncs back:
  * `value={this.x}` on a child component binds the parent's `x` to the child's modelable prop in
- * both directions. A modelable prop is implicitly reactive (it registers as both). Mirrors
- * Livewire's `#[Modelable]`. Applies to a field only.
+ * both directions. A modelable prop is implicitly reactive (it registers as both).
+ * Applies to a field only.
  *
  * @example
  * ```tsx

package/src/dehydrate.ts

@@ -73,7 +73,7 @@ function currentSubject(): string | undefined {
 
 // ── Signing payload ───────────────────────────────────────────────────────────
 // children and listeners are excluded from signing:
-//   - children: Livewire pattern — ids are derived server-side, never trusted from client
+//   - children: ids are derived server-side, never trusted from the client
 //   - listeners: server-derived from class decorators, cannot meaningfully be tampered
 //     with (@on methods are still validated against @expose allowlist on every call)
 
@@ -155,7 +155,7 @@ export function dehydrate(
       : undefined;
 
   // Children collected during the render that preceded this dehydrate call.
-  // Excluded from HMAC (Livewire pattern).
+  // Excluded from HMAC — see the signing-payload note above.
   const snapshotMemo: Snapshot["memo"] = {
     ...memo,
     children: [...page._childIds],

package/src/events.ts

@@ -40,7 +40,7 @@
  *
  * @category Realtime
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
 export interface FlowEvents {}
 
 /**

package/src/index.ts

@@ -105,6 +105,10 @@ export {
   Alert,
   Table,
   Drawer,
+  ErrorBoundary,
+  SectionContent,
+  SectionOutlet,
+  Virtualize,
 } from "./components.ts";
 export type {
   LinkProps,
@@ -126,6 +130,10 @@ export type {
   TableProps,
   TableColumn,
   DrawerProps,
+  ErrorBoundaryProps,
+  SectionContentProps,
+  SectionOutletProps,
+  VirtualizeProps,
 } from "./components.ts";
 
 // Headless (unstyled, accessible) primitives — data-* state, Tailwind-friendly.
@@ -221,8 +229,6 @@ import "./synths/CarbonIntervalSynth.ts";
 import "./synths/CollectionSynth.ts";
 import "./synths/DateSynth.ts";
 import "./synths/TemporaryUploadedFileSynth.ts";
-import type { MiddlewareClass, RouteRegistration } from "@zerotal/core";
-import type { PageClassWithMeta } from "./registry.ts";
 
 // File uploads
 export { TemporaryUploadedFile } from "./uploads/TemporaryUploadedFile.ts";