ink-framework 0.1.0-alpha.12 → 0.1.0-alpha.13

package/src/native-list.ts

@@ -1,10 +1,11 @@
-import { createElement, Fragment, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from "./react";
-import { ListLoadError, ReactList, type ListProps } from "./list";
-import { useAction } from "./action";
+import { createElement, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from "./react";
+import { ReactList, useListPaginationEvents, type ListPagination, type ListProps } from "./list";
 import type { Row } from "./image";
 import { pressHandler } from "./press";
 import { rememberListPatch, type NativeListItem } from "./list-patch";
 
+export { fixedListRow } from "./fixed-list-row";
+
 type Captured = { value: unknown; prototype?: object | null; fields?: [PropertyKey, boolean, Captured][] };
 type Scope = { identity: string; values: readonly Captured[] };
 type Capture = { identity: string; values: () => readonly unknown[]; usesIndex?: boolean };
@@ -73,7 +74,7 @@ export function listText(parts: unknown[]): string {
 export function listRowFields(props: ComponentProps<typeof Row>) {
   return { image: props.image, title: props.title, titleMaxLines: props.titleMaxLines,
     titleIcon: props.titleIcon, subtitle: props.subtitle, subtitleIcon: props.subtitleIcon,
-    onLongPress: props.onLongPress,
+    selected: props.selected, onLongPress: props.onLongPress,
     onPress: pressHandler(props) ?? (props.onLongPress ? () => {} : undefined) };
 }
 
@@ -286,11 +287,9 @@ export function nativeListPlan<T>(render: ListProps<T>["renderItem"]): Plan<T> |
   return plans.get(render) as Plan<T> | undefined;
 }
 
-export function CompiledList<T>({ plan, ...props }: ListProps<T> & { plan: Plan<T> }) {
-  const { items, keyExtractor, gap = 47, followEnd, initialPosition, measurementKey, onLoadMore, onLoadOlder, hasMore = false, hasOlder = false } = props;
+export function CompiledList<T>({ plan, pagination, ...props }: ListProps<T> & { plan: Plan<T>; pagination: ListPagination }) {
+  const { items, keyExtractor, gap = 47, followEnd, initialPosition, measurementKey } = props;
   if (!Number.isFinite(gap) || gap < 0) throw new Error("List gap must be finite and non-negative");
-  const load = useAction(() => onLoadMore?.());
-  const older = useAction(() => onLoadOlder?.());
   const committed = useRef<Records<T> | null>(null);
   const committedRequest = useRef<Request<T> | null>(null);
   const committedPlan = useRef<Plan<T> | null>(null);
@@ -388,14 +387,13 @@ export function CompiledList<T>({ plan, ...props }: ListProps<T> & { plan: Plan<
       if (timer !== undefined) clearTimeout(timer);
     };
   }, [request]);
+  const paginationProps = useListPaginationEvents(pagination, preparing || !records,
+    records?.data.length ?? 0, records?.data[0]?.key, records?.data.at(-1)?.key);
   if (outcome?.status === "error") throw outcome.error;
-  if (!records) return createElement(ReactList<T>, props);
+  if (!records) return createElement(ReactList<T>, { ...props, pagination });
   const nativeProps = {
     items: records.data, keyField: "key", template: records.template, gap, followEnd, initialEnd: initialPosition === "end",
-    hasMore: !preparing && hasMore && load.status !== "pending" && load.status !== "error",
-    hasOlder: !preparing && hasOlder && older.status !== "pending" && older.status !== "error",
-    onEndReached: !preparing && onLoadMore ? load.run : undefined,
-    onStartReached: !preparing && onLoadOlder ? older.run : undefined,
+    ...paginationProps,
     onRowEvent(key: string, target: number, name: string, ...args: unknown[]) {
       const latest = events.current;
       const path = latest?.targets.get(target)?.[name];
@@ -432,11 +430,7 @@ export function CompiledList<T>({ plan, ...props }: ListProps<T> & { plan: Plan<
       if (typeof callback === "function") callback(...args);
     },
   };
-  return createElement(Fragment, null,
-    older.status === "error" && createElement(ListLoadError, { message: older.error.message, onRetry: older.run }),
-    createElement("NativeList", nativeProps),
-    load.status === "error" && createElement(ListLoadError, { message: load.error.message, onRetry: load.run }),
-  );
+  return createElement("NativeList", nativeProps);
 }
 
 /** @internal Fixed native descriptions for Ink's own list components. */

package/src/native.ts

@@ -34,6 +34,14 @@ Object.defineProperty(globalThis, "__inkReceive", {
   },
 });
 
+Object.defineProperty(globalThis, "__inkResolveNativeResult", {
+  value: (id: number, value?: string, kind?: string, message?: string, retryable?: boolean) => {
+    listeners.get("result")?.(typeof value === "string"
+      ? { id, type: "result", value }
+      : { id, kind, message, retryable, type: "result" });
+  },
+});
+
 onNativeMessage("result", message => {
   if (typeof message.id !== "number") throw new Error("Invalid native result ID");
   const request = pending.get(message.id);

package/src/prefresh.d.ts

@@ -0,0 +1,3 @@
+declare module "@prefresh/utils" {
+  export function flush(): void;
+}

package/src/react-compat.ts

@@ -0,0 +1,24 @@
+import React from "preact/compat";
+import { cloneElement, isValidElement } from "preact";
+import { Activity, useEffect, useLayoutEffect, useSyncExternalStore, useImperativeHandle } from "./visibility";
+import { useRef, useCallback, useLayoutEffect as commitLayoutEffect } from "preact/hooks";
+const compatibleReact = /* @__PURE__ */ Object.assign({}, React, { Activity, cloneElement, isValidElement, useEffect, useLayoutEffect, useSyncExternalStore, useImperativeHandle, useEffectEvent });
+export default compatibleReact;
+export {
+  Children, Component, Fragment, PureComponent, StrictMode, Suspense, SuspenseList,
+  createContext, createElement, createFactory, createPortal, createRef,
+  findDOMNode, flushSync, forwardRef, hydrate, lazy, memo, render,
+  startTransition, unmountComponentAtNode, unstable_batchedUpdates,
+  useCallback, useContext, useDebugValue, useDeferredValue,
+  useId, useInsertionEffect, useMemo, useReducer,
+  useRef, useState, useTransition, version,
+} from "preact/compat";
+export { cloneElement, isValidElement } from "preact";
+export { Activity, useEffect, useLayoutEffect, useSyncExternalStore, useImperativeHandle } from "./visibility";
+
+/** Effect events retain their identity and read the latest committed callback. */
+export function useEffectEvent<T extends (...args: never[]) => unknown>(callback: T): T {
+  const current = useRef(callback);
+  commitLayoutEffect(() => { current.current = callback; });
+  return useCallback(((...args: Parameters<T>) => current.current(...args)) as T, []);
+}

package/src/react.ts

@@ -1,6 +1,26 @@
-// Share the CommonJS React import so unused component modules contribute no wrapper code.
-export {
-  Activity, Children, Fragment, createContext, createElement, isValidElement, memo,
-  useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState,
-  useSyncExternalStore, type ComponentProps, type ReactElement, type ReactNode,
-} from "react";
+import { createElement as element, createContext as context, isValidElement as valid, Fragment as fragment, Component, type ComponentChildren } from "preact";
+import { useCallback, useContext as contextValue, useMemo, useRef, useState } from "preact/hooks";
+import type * as React from "react";
+
+// Keep the public React declarations while executing Preact core in Ink.
+export const createElement = element as unknown as typeof React.createElement;
+export const createContext = context as unknown as typeof React.createContext;
+export const useContext = contextValue as unknown as typeof React.useContext;
+export const isValidElement = valid as unknown as typeof React.isValidElement;
+export const Fragment = fragment as unknown as typeof React.Fragment;
+export { Children } from "preact/compat";
+export { useCallback, useMemo, useRef, useState };
+export { Activity, useEffect, useLayoutEffect, useSyncExternalStore } from "./visibility";
+export type { ComponentProps, ComponentType, ReactElement, ReactNode } from "react";
+
+// A single core component avoids compat memo's extra function-component layer.
+export function memo<P extends object>(render: (props: P) => React.ReactNode) {
+  return class extends Component<P> {
+    shouldComponentUpdate(next: P) {
+      const previous = this.props;
+      const keys = Object.keys(next) as (keyof P)[];
+      return keys.length !== Object.keys(previous).length || keys.some(key => !Object.is(previous[key], next[key]));
+    }
+    render() { return render(this.props) as ComponentChildren; }
+  } as unknown as (props: P) => React.ReactNode;
+}

package/src/refresh.ts

@@ -0,0 +1,29 @@
+import "@prefresh/core";
+import { flush } from "@prefresh/utils";
+
+declare const self: { __PREFRESH__: {
+  register(type: unknown, id: string): void;
+  sign(type: unknown, key: string, forceReset: boolean, getCustomHooks: (() => unknown[]) | undefined, status: string): string;
+} };
+
+export const register = (type: unknown, id: string) => self.__PREFRESH__.register(type, id);
+export const performReactRefresh = flush;
+
+// Oxc emits React Refresh's signature protocol; translate it to Prefresh.
+export function createSignatureFunctionForTransform() {
+  let savedType: unknown;
+  let savedKey = "";
+  let savedReset = false;
+  let savedHooks: (() => unknown[]) | undefined;
+  let status = "begin";
+  return (type?: unknown, key?: string, forceReset = false, getCustomHooks?: () => unknown[]) => {
+    if (type) {
+      savedType = type;
+      savedKey = key ?? "";
+      savedReset = forceReset;
+      savedHooks = getCustomHooks;
+    }
+    status = self.__PREFRESH__.sign(savedType, savedKey, savedReset, savedHooks, status);
+    return type;
+  };
+}

package/src/renderer.ts

@@ -1,7 +1,7 @@
 declare const process: { env: { NODE_ENV: string } };
-import { createContext, type ReactNode } from "./react";
-import Reconciler from "react-reconciler";
-import { ConcurrentRoot, DefaultEventPriority, DiscreteEventPriority } from "react-reconciler/constants";
+import { options, render as renderPreact, type Component, type ComponentChildren, type VNode } from "preact";
+import type { ReactNode } from "react";
+import { Activity, activityChanged, isComponentVisible } from "./visibility";
 import { onNativeMessage } from "./native";
 import { pressHandler } from "./press";
 import type { Destination } from "./navigation";
@@ -11,8 +11,74 @@ declare const __inkCommit: (operations: Operation[]) => void;
 declare const __inkPost: (message: string) => void;
 
 type Props = Record<string, unknown>;
-type Instance = { id: number; type: string; props: Props; children: Instance[]; parent: Container | undefined; hidden?: boolean };
-type Container = { id: number; children: Instance[] };
+const hostProperties = Symbol("ink.hostProps");
+type HostProps = Props & { [hostProperties]?: Props };
+// Preact only needs tree links and mutation methods; no browser DOM is involved.
+class HostNode {
+  id: number;
+  props: Props = {};
+  parentNode: HostNode | null = null;
+  firstChild: HostNode | null = null;
+  lastChild: HostNode | null = null;
+  previousSibling: HostNode | null = null;
+  nextSibling: HostNode | null = null;
+  hidden = false;
+  mounted = false;
+  readonly nodeType: number;
+  readonly namespaceURI = "http://www.w3.org/1999/xhtml";
+  constructor(readonly type: string, text?: string) {
+    this.id = type === "#root" ? 0 : allocateHostId();
+    this.nodeType = type === "#text" ? 3 : 1;
+    if (text !== undefined) this.props = { text: String(text) };
+  }
+  get localName() { return this.type; }
+  get childNodes(): HostNode[] {
+    const nodes: HostNode[] = [];
+    for (let child = this.firstChild; child; child = child.nextSibling) nodes.push(child);
+    return nodes;
+  }
+  get data() { return this.props.text; }
+  set data(text: unknown) {
+    this.props = { text: String(text) };
+    if (this.mounted) (textChanges ?? createTextBatch()).push(this.id, String(text));
+  }
+  // Native props and callbacks are read together from the completed host vnode.
+  setAttribute() {}
+  removeAttribute() {}
+  addEventListener() {}
+  removeEventListener() {}
+  appendChild(child: HostNode) { this.insertBefore(child, null); }
+  insertBefore(child: HostNode, before: HostNode | null) {
+    if (child === before) return;
+    if (child.parentNode) child.parentNode.unlink(child);
+    child.parentNode = this;
+    child.previousSibling = before ? before.previousSibling : this.lastChild;
+    child.nextSibling = before;
+    if (child.previousSibling) child.previousSibling.nextSibling = child;
+    else this.firstChild = child;
+    if (before) before.previousSibling = child;
+    else this.lastChild = child;
+    if (this.id === 0 || this.mounted) {
+      publish(child);
+      queue({ op: "insert", id: child.id, parent: this.id, before: before?.id ?? null });
+    }
+  }
+  unlink(child: HostNode) {
+    if (child.previousSibling) child.previousSibling.nextSibling = child.nextSibling;
+    else this.firstChild = child.nextSibling;
+    if (child.nextSibling) child.nextSibling.previousSibling = child.previousSibling;
+    else this.lastChild = child.previousSibling;
+    child.parentNode = child.previousSibling = child.nextSibling = null;
+  }
+  removeChild(child: HostNode) {
+    this.unlink(child);
+    if (child.mounted) {
+      queue({ op: "remove", id: child.id, parent: this.id });
+      forget(child);
+    }
+  }
+}
+type Instance = HostNode;
 type Operation =
   | { op: "create"; id: number; type: string; props: Props }
   | { op: "update"; id: number; props: Props }
@@ -26,8 +92,6 @@ let nextId = 1;
 let operations: Operation[] = [];
 let textChanges: (number | string)[] | undefined;
 let commitScheduled = false;
-let priority = DefaultEventPriority;
-const hostContext = {};
 
 function allocateHostId() {
   if (!Number.isSafeInteger(nextId)) throw new RangeError("Host identifiers exhausted");
@@ -47,7 +111,7 @@ function createTextBatch() {
 
 function textContent(type: string, props: Props): string | null {
   if (type !== "Text") return null;
-  const value = props.children;
+  const value = props.text ?? props.children;
   return typeof value === "string" ? value : typeof value === "number" || typeof value === "bigint" ? String(value) : null;
 }
 
@@ -75,36 +139,21 @@ function nativeProps(props: Props, type: string): Props {
 }
 
 function publish(instance: Instance) {
-  if (mounted.has(instance.id)) return;
+  if (instance.mounted) return;
+  instance.mounted = true;
   mounted.set(instance.id, instance);
   queue({ op: "create", id: instance.id, type: instance.type, props: nativeProps(instance.props, instance.type) });
   if (instance.hidden) queue({ op: "hidden", id: instance.id, value: true });
-  for (const child of instance.children) {
+  for (let child = instance.firstChild; child; child = child.nextSibling) {
     publish(child);
     queue({ op: "insert", id: child.id, parent: instance.id, before: null });
   }
 }
 
-function insert(parent: Container, child: Instance, before?: Instance) {
-  // Only a moved child needs searching for; appends stay constant-time.
-  if (child.parent === parent) parent.children.splice(parent.children.indexOf(child), 1);
-  child.parent = parent;
-  if (before) parent.children.splice(parent.children.indexOf(before), 0, child);
-  else parent.children.push(child);
-  publish(child);
-  queue({ op: "insert", id: child.id, parent: parent.id, before: before?.id ?? null });
-}
-
 function forget(instance: Instance) {
+  instance.mounted = false;
   mounted.delete(instance.id);
-  instance.parent = undefined;
-  for (const child of instance.children) forget(child);
-}
-
-function remove(parent: Container, child: Instance) {
-  parent.children.splice(parent.children.indexOf(child), 1);
-  queue({ op: "remove", id: child.id, parent: parent.id });
-  forget(child);
+  for (let child = instance.firstChild; child; child = child.nextSibling) forget(child);
 }
 
 function sameListValue(a: unknown, b: unknown): boolean {
@@ -147,9 +196,11 @@ function compiledListUpdate(previous: Props, props: Props): Props | null {
 
 function update(instance: Instance, type: string, _oldProps: Props, props: Props) {
   const previous = instance.props;
+  if (previous === props) return;
   const isText = type === "Text";
   if (isText) props = hostProps(type, props);
   instance.props = props;
+  if (!instance.mounted) return;
   if (type === "NativeList" && props.keyField === "key" && previous.template === props.template) {
     const next = compiledListUpdate(previous, props);
     if (next) queue({ op: "update", id: instance.id, props: next }, true);
@@ -163,10 +214,11 @@ function update(instance: Instance, type: string, _oldProps: Props, props: Props
       queue({ op: "update", id: instance.id, props: nativeProps(props, type) });
       return;
     }
-    const children = props.children;
-    if (children !== previous.children) {
+    const children = props.text ?? props.children;
+    if (children !== (previous.text ?? previous.children)) {
       if (typeof children === "string") return (textChanges ?? createTextBatch()).push(instance.id, children);
       if (typeof children === "number" || typeof children === "bigint") return (textChanges ?? createTextBatch()).push(instance.id, String(children));
+      if (textContent(type, previous) !== null) (textChanges ?? createTextBatch()).push(instance.id, "");
     }
     return;
   }
@@ -204,8 +256,9 @@ function update(instance: Instance, type: string, _oldProps: Props, props: Props
 }
 
 function hide(instance: Instance, value: boolean) {
+  if (instance.hidden === value) return;
   instance.hidden = value;
-  if (mounted.has(instance.id)) queue({ op: "hidden", id: instance.id, value });
+  if (instance.mounted) queue({ op: "hidden", id: instance.id, value });
 }
 
 function errorMessage(error: unknown, info: { componentStack?: string | null }) {
@@ -217,118 +270,101 @@ function report(error: unknown, info: { componentStack?: string | null }) {
   __inkPost(JSON.stringify({ type: "error", message: errorMessage(error, info) }));
 }
 
-function reportRecovered(error: unknown, info: { componentStack?: string | null }) {
-  __inkPost(JSON.stringify({ type: "log", level: "error", message: errorMessage(error, info) }));
-}
+// These fields are the stable, mangled option-hook ABI in the pinned Preact 10.
+type HostVNode = VNode<Props> & { __e?: HostNode; __?: HostVNode; __k?: (HostVNode | null)[]; __c?: Component };
+const hooks = options as typeof options & {
+  __c?: (vnode: HostVNode, queue: unknown[]) => void;
+  __inkNative?: boolean;
+  __inkHost?: (node: HostNode, type: string, props: Props, vnode: HostVNode) => void;
+};
+hooks.__inkHost = (node, type, props, vnode) => {
+  update(node, type, node.props, props);
+  if (!node.parentNode && isHidden(vnode)) node.hidden = true;
+};
+const previousDiff = options.diffed;
+options.diffed = vnode => {
+  if (typeof vnode.type !== "string" && vnode.type != null) previousDiff?.(vnode);
+  const host = vnode as HostVNode;
+  if (!hooks.__inkNative) {
+    if (typeof host.type === "string" && host.__e) update(host.__e, host.type, host.__e.props, (host.props as HostProps)[hostProperties]!);
+    if (host.__e && (typeof host.type === "string" || host.type == null)) hide(host.__e, isHidden(host));
+  }
+  if (hooks.__inkNative && host.type == null && host.__e) hide(host.__e, isHidden(host));
+  if (host.type === Activity && host.__c && activityChanged(host.__c)) visitVisibility(host);
+};
 
-const reconciler = Reconciler<string, Props, Container, Instance, Instance, never, never, never,
-  Instance, object, never, ReturnType<typeof setTimeout>, -1, null>({
-  supportsMutation: true,
-  supportsPersistence: false,
-  supportsHydration: false,
-  isPrimaryRenderer: true,
-  supportsMicrotasks: true,
-  // Declare `parent` up front so every instance keeps one object shape.
-  createInstance: (type, props) => ({ id: allocateHostId(), type, props: hostProps(type, props), children: [], parent: undefined }),
-  createTextInstance: text => ({ id: allocateHostId(), type: "#text", props: { text }, children: [], parent: undefined }),
-  appendInitialChild: (parent, child) => { parent.children.push(child); child.parent = parent; },
-  finalizeInitialChildren: () => false,
-  shouldSetTextContent: (type, props) => {
-    if (type !== "Text") return false;
-    const kind = typeof props.children;
-    return kind === "string" || kind === "number" || kind === "bigint";
-  },
-  getRootHostContext: () => hostContext,
-  getChildHostContext: () => hostContext,
-  getPublicInstance: instance => instance,
-  prepareForCommit: () => null,
-  resetAfterCommit: () => {
-    if (!operations.length || commitScheduled) return;
-    commitScheduled = true;
-    queueMicrotask(() => {
-      // Revealing an Activity reconnects store subscriptions in passive effects.
-      // Include their synchronous corrections before presenting the page.
-      while (reconciler.flushPassiveEffects()) {}
-      reconciler.flushSyncWork();
-      const committed = operations;
-      operations = [];
-      textChanges = undefined;
-      commitScheduled = false;
-      if (committed.length) __inkCommit(committed);
-    });
-  },
-  preparePortalMount: () => {},
-  scheduleTimeout: setTimeout,
-  cancelTimeout: clearTimeout,
-  noTimeout: -1,
-  scheduleMicrotask: queueMicrotask,
-  getInstanceFromNode: () => null,
-  beforeActiveInstanceBlur: () => {},
-  afterActiveInstanceBlur: () => {},
-  prepareScopeUpdate: () => {},
-  getInstanceFromScope: () => null,
-  detachDeletedInstance: () => {},
-  appendChild: insert,
-  appendChildToContainer: insert,
-  insertBefore: insert,
-  insertInContainerBefore: insert,
-  removeChild: remove,
-  removeChildFromContainer: remove,
-  resetTextContent: instance => { (textChanges ?? createTextBatch()).push(instance.id, ""); },
-  commitTextUpdate: (instance, _oldText, text) => {
-    instance.props = { text };
-    (textChanges ?? createTextBatch()).push(instance.id, text);
-  },
-  commitUpdate: update,
-  hideInstance: instance => hide(instance, true),
-  hideTextInstance: instance => hide(instance, true),
-  unhideInstance: instance => hide(instance, false),
-  unhideTextInstance: instance => hide(instance, false),
-  clearContainer: container => {
-    for (const child of [...container.children]) remove(container, child);
-  },
-  NotPendingTransition: null,
-  // React's public Context type omits the fields consumed by its reconciler.
-  HostTransitionContext: createContext(null) as unknown as Reconciler.ReactContext<null>,
-  setCurrentUpdatePriority: value => { priority = value; },
-  getCurrentUpdatePriority: () => priority,
-  resolveUpdatePriority: () => priority,
-  resetFormInstance: () => {},
-  requestPostPaintCallback: callback => { setTimeout(() => callback(performance.now()), 0); },
-  shouldAttemptEagerTransition: () => false,
-  trackSchedulerEvent: () => {},
-  resolveEventType: () => null,
-  resolveEventTimeStamp: () => performance.now(),
-  maySuspendCommit: () => false,
-  preloadInstance: () => true,
-  startSuspendingCommit: () => {},
-  suspendInstance: () => {},
-  waitForCommitToBeReady: () => null,
-});
+function isHidden(vnode: HostVNode) {
+  let component: Component | undefined;
+  for (let parent = vnode.__; parent; parent = parent.__) {
+    // A native ancestor already carries visibility for this entire branch.
+    if (typeof parent.type === "string") return false;
+    if (parent.__c) {
+      component ??= parent.__c;
+      if (parent.type === Activity) return !isComponentVisible(parent.__c);
+    }
+  }
+  return component ? !isComponentVisible(component) : false;
+}
 
-export function dispatchEvent(id: number, name: string, args: unknown[]) {
-  const handler = mounted.get(id)?.props[name];
-  if (typeof handler !== "function") return;
-  const previous = priority;
-  priority = DiscreteEventPriority;
-  try {
-    handler(...args);
-  } finally {
-    priority = previous;
+function visitVisibility(vnode: HostVNode) {
+  if (typeof vnode.type === "string" || vnode.type == null) {
+    if (vnode.__e) hide(vnode.__e, isHidden(vnode));
+    return;
   }
+  for (const child of vnode.__k ?? []) if (child) visitVisibility(child);
 }
 
-let developmentRoot: ReturnType<typeof reconciler.createContainer> | undefined;
-if (process.env.NODE_ENV === "development") {
-  reconciler.injectIntoDevTools({ bundleType: 1, version: "19.2.8", rendererPackageName: "ink" });
+const previousVNode = options.vnode;
+options.vnode = vnode => {
+  if (typeof vnode.type !== "string") {
+    previousVNode?.(vnode);
+    return;
+  }
+  const props = vnode.props as HostProps;
+  // Preact reconciles children; Ink compares native props once, after the diff.
+  // Keep the original props in this envelope so cloned compiler-cached vnodes
+  // retain them without copying or normalising every native property.
+  if (!hooks.__inkNative && !props[hostProperties]) {
+    (vnode as VNode<HostProps>).props = {
+      children: (textContent(vnode.type, props) === null ? props.children : undefined) as ComponentChildren,
+      [hostProperties]: props,
+    };
+  }
+};
+
+// QuickJS has no browser paint cycle. Run effects before presenting queued ops.
+options.requestAnimationFrame = callback => { queueMicrotask(callback); };
+options.debounceRendering = queueMicrotask;
+const previousCommit = hooks.__c;
+hooks.__c = (vnode, components) => {
+  previousCommit?.(vnode, components);
+  if (commitScheduled) return;
+  commitScheduled = true;
+  queueMicrotask(() => queueMicrotask(() => {
+    const committed = operations;
+    operations = [];
+    textChanges = undefined;
+    commitScheduled = false;
+    if (committed.length) __inkCommit(committed);
+  }));
+};
+
+// Preact creates nodes through document, but all layout and painting stay native.
+Object.assign(globalThis, { document: {
+  createElementNS: (_namespace: string, type: string) => new HostNode(type),
+  createElement: (type: string) => new HostNode(type),
+  createTextNode: (text: string) => new HostNode("#text", text),
+} });
+
+export function dispatchEvent(id: number, name: string, args: unknown[]) {
+  const handler = mounted.get(id)?.props[name];
+  if (typeof handler === "function") handler(...args);
 }
 
+let developmentRoot: HostNode | undefined;
 export function render(element: ReactNode) {
-  if (process.env.NODE_ENV === "development" && developmentRoot) {
-    const root = developmentRoot;
-    reconciler.updateContainer(element, root, null, null);
-    return () => reconciler.updateContainer(null, root, null, null);
-  }
+  const container = process.env.NODE_ENV === "development" && developmentRoot || new HostNode("#root");
+  if (process.env.NODE_ENV === "development") developmentRoot = container;
   onNativeMessage("event", message => {
     if (typeof message.id !== "number" || !Number.isSafeInteger(message.id)
       || typeof message.name !== "string" || !Array.isArray(message.args)) {
@@ -336,9 +372,16 @@ export function render(element: ReactNode) {
     }
     dispatchEvent(message.id, message.name, message.args);
   });
-  const container: Container = { id: 0, children: [] };
-  const root = reconciler.createContainer(container, ConcurrentRoot, null, false, null, "", report, reportRecovered, reportRecovered, () => {});
-  if (process.env.NODE_ENV === "development") developmentRoot = root;
-  reconciler.updateContainer(element, root, null, null);
-  return () => reconciler.updateContainer(null, root, null, null);
+  const updateRoot = () => {
+    try {
+      renderPreact(element as ComponentChildren, container as unknown as Parameters<typeof renderPreact>[1]);
+    } catch (error) {
+      report(error, {});
+    }
+  };
+  // Prefresh replaces mounted component types at the end of the bundle.
+  // Apply the new root afterwards so matching components keep their state.
+  if (process.env.NODE_ENV === "development") queueMicrotask(updateRoot);
+  else updateRoot();
+  return () => renderPreact(null, container as unknown as Parameters<typeof renderPreact>[1]);
 }

package/src/reorder.ts

@@ -1,14 +1,18 @@
 import { createElement } from "./react";
-import { Button, Stack, Text } from "./index";
 import { keyboardArrowDown, keyboardArrowUp } from "./icons";
 import { List } from "./list";
-import { nativeListRow, nativeListTemplate } from "./native-list";
+import { fixedListRow } from "./native-list";
 
-const template = /* @__PURE__ */ nativeListTemplate((node, field) => node("Stack", { axis: "horizontal", align: "center", justify: "space-between", gap: 12 }, [
-  node("Text", { text: field("label"), maxLines: field("maxLines") }),
+type ReorderFields = {
+  label: string; maxLines?: number; first: boolean; last: boolean;
+  down: () => void; up: () => void;
+};
+
+const reorderRow = /* @__PURE__ */ fixedListRow<ReorderFields>((node, field) => node("Stack", { axis: "horizontal", align: "center", justify: "space-between", gap: 12 }, [
+  node("Text", { text: field(values => values.label), maxLines: field(values => values.maxLines) }),
   node("Stack", { axis: "horizontal", align: "center", gap: 4 }, [
-    node("Button", { icon: keyboardArrowDown, disabled: field("last"), onPress: field("down") }),
-    node("Button", { icon: keyboardArrowUp, disabled: field("first"), onPress: field("up") }),
+    node("Button", { icon: keyboardArrowDown, disabled: field(values => values.last), onPress: field(values => values.down) }),
+    node("Button", { icon: keyboardArrowUp, disabled: field(values => values.first), onPress: field(values => values.up) }),
   ]),
 ]));
 
@@ -35,15 +39,8 @@ export function ReorderList<T>({ items, keyExtractor, getLabel, onChange, multil
     keyExtractor,
     gap,
     measurementKey: multiline ? "multiline" : "single-line",
-    renderItem: nativeListRow((item: T, index: number) => createElement(Stack, {
-      axis: "horizontal", align: "center", justify: "space-between", gap: 12,
-    },
-    createElement(Text, { maxLines: multiline ? undefined : 1 }, getLabel(item)),
-    createElement(Stack, { axis: "horizontal", align: "center", gap: 4 },
-      createElement(Button, { icon: keyboardArrowDown, disabled: index === items.length - 1, onPress: () => move(index, 1) }),
-      createElement(Button, { icon: keyboardArrowUp, disabled: index === 0, onPress: () => move(index, -1) }),
-    )), (item, index) => [{ label: getLabel(item), maxLines: multiline ? undefined : 1,
+    renderItem: reorderRow((item: T, index: number) => ({ label: getLabel(item), maxLines: multiline ? undefined : 1,
       first: index === 0, last: index === items.length - 1,
-      down: () => move(index, 1), up: () => move(index, -1) }], template),
+      down: () => move(index, 1), up: () => move(index, -1) })),
   });
 }