@pibbl/core 0.0.1

package/dist/lib/hooks/use-region.js

@@ -0,0 +1,34 @@
+import {
+  createTarget,
+  updateCursorTarget
+} from "../events/registrations.js";
+import { removeInteractionRegion } from "../events/dispatch.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { requireHookContext } from "./hook-slot.js";
+function createRegion(instance, component = requireHookContext().componentRefs, slot = Math.max(0, GLOBAL_STATE.componentHookIndex - 1)) {
+  return createTarget(instance, component, slot);
+}
+function updateRegion(instance, region, {
+  path,
+  fill = false,
+  lineInteractionWidth = 0,
+  cursor
+}) {
+  if (!cursor || !path) {
+    removeInteractionRegion(instance, region);
+    return;
+  }
+  updateCursorTarget(
+    region,
+    { path, fill, lineInteractionWidth, cursor }
+  );
+}
+function releaseRegion(instance, region) {
+  removeInteractionRegion(instance, region);
+}
+export {
+  createRegion,
+  releaseRegion,
+  updateRegion
+};
+//# sourceMappingURL=use-region.js.map

package/dist/lib/hooks/use-region.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/use-region.ts"],
+  "sourcesContent": ["import type { PathGeometry } from '../geometry/path-geometry.js';\nimport {\n  createTarget,\n  updateCursorTarget,\n  type PibblEventTargetRegistration,\n} from '../events/registrations.js';\nimport { removeInteractionRegion } from '../events/dispatch.js';\nimport type { PibblInstance } from '../types.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { requireHookContext } from './hook-slot.js';\n\nexport function createRegion(\n  instance: PibblInstance,\n  component = requireHookContext().componentRefs,\n  slot = Math.max(0, GLOBAL_STATE.componentHookIndex - 1),\n): PibblEventTargetRegistration {\n  return createTarget(instance, component, slot);\n}\n\nexport function updateRegion(\n  instance: PibblInstance,\n  region: PibblEventTargetRegistration,\n  {\n    path,\n    fill = false,\n    lineInteractionWidth = 0,\n    cursor,\n  }: {\n    path?: Path2D | PathGeometry;\n    fill?: boolean;\n    lineInteractionWidth?: number;\n    cursor?: string;\n  },\n): void {\n  if (!cursor || !path) {\n    removeInteractionRegion(instance, region);\n    return;\n  }\n\n  updateCursorTarget(\n    region,\n    { path, fill, lineInteractionWidth, cursor },\n  );\n}\n\nexport function releaseRegion(\n  instance: PibblInstance,\n  region: PibblEventTargetRegistration,\n): void {\n  removeInteractionRegion(instance, region);\n}\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,+BAA+B;AAExC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,SAAS,aACd,UACA,YAAY,mBAAmB,EAAE,eACjC,OAAO,KAAK,IAAI,GAAG,aAAa,qBAAqB,CAAC,GACxB;AAC9B,SAAO,aAAa,UAAU,WAAW,IAAI;AAC/C;AAEO,SAAS,aACd,UACA,QACA;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP,uBAAuB;AAAA,EACvB;AACF,GAMM;AACN,MAAI,CAAC,UAAU,CAAC,MAAM;AACpB,4BAAwB,UAAU,MAAM;AACxC;AAAA,EACF;AAEA;AAAA,IACE;AAAA,IACA,EAAE,MAAM,MAAM,sBAAsB,OAAO;AAAA,EAC7C;AACF;AAEO,SAAS,cACd,UACA,QACM;AACN,0BAAwB,UAAU,MAAM;AAC1C;",
+  "names": []
+}

package/dist/lib/hooks/use-signal.d.ts

@@ -0,0 +1,12 @@
+import type { SignalOptions, WritableSignal } from '../signals/types.js';
+/**
+ * Creates one component-owned writable signal identity for a hook slot.
+ *
+ * @param initialValue - Value stored when this hook slot is first created.
+ * @param options - Equality comparison and optional diagnostic name. See {@link SignalOptions}.
+ * @returns A stable mount-owned writable signal. See {@link WritableSignal}.
+ *
+ * @see {@link SignalOptions}
+ * @see {@link WritableSignal}
+ */
+export declare function useSignal<T>(initialValue: T, options?: SignalOptions<T>): WritableSignal<T>;

package/dist/lib/hooks/use-signal.js

@@ -0,0 +1,12 @@
+import { signal } from "../signals/graph.js";
+import { useHookSlot } from "./hook-slot.js";
+function useSignal(initialValue, options) {
+  return useHookSlot(
+    "signal",
+    () => signal(initialValue, options)
+  ).value;
+}
+export {
+  useSignal
+};
+//# sourceMappingURL=use-signal.js.map

package/dist/lib/hooks/use-signal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/use-signal.ts"],
+  "sourcesContent": ["import { signal } from '../signals/graph.js';\nimport type { SignalOptions, WritableSignal } from '../signals/types.js';\nimport { useHookSlot } from './hook-slot.js';\n\n/**\n * Creates one component-owned writable signal identity for a hook slot.\n *\n * @param initialValue - Value stored when this hook slot is first created.\n * @param options - Equality comparison and optional diagnostic name. See {@link SignalOptions}.\n * @returns A stable mount-owned writable signal. See {@link WritableSignal}.\n *\n * @see {@link SignalOptions}\n * @see {@link WritableSignal}\n */\nexport function useSignal<T>(\n  initialValue: T,\n  options?: SignalOptions<T>,\n): WritableSignal<T> {\n  return useHookSlot(\n    'signal',\n    () => signal(initialValue, options),\n  ).value;\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAYrB,SAAS,UACd,cACA,SACmB;AACnB,SAAO;AAAA,IACL;AAAA,IACA,MAAM,OAAO,cAAc,OAAO;AAAA,EACpC,EAAE;AACJ;",
+  "names": []
+}

package/dist/lib/hooks/use-svg-path.d.ts

@@ -0,0 +1,11 @@
+import type { SvgPathOptions } from "../geometry/svg-path.js";
+import type { createSvgPath } from "../geometry/svg-path.js";
+/**
+ * Creates a memoized Path2D for an SVG data string.
+ * @param svgPathData - SVG path data to parse and memoize.
+ * @returns A memoized Path2D
+ *
+ * @see {@link SvgPathOptions}
+ * @see {@link createSvgPath}
+ */
+export declare function useSvgPath(svgPathData: string): Path2D;

package/dist/lib/hooks/use-svg-path.js

@@ -0,0 +1,13 @@
+import { useValueMemoSlot } from "./use-value-memo-slot.js";
+import { createSvgPath } from "../geometry/svg-path.js";
+function useSvgPath(svgPathData) {
+  return useValueMemoSlot(
+    "svgPath",
+    () => createSvgPath({ d: svgPathData }),
+    [svgPathData]
+  );
+}
+export {
+  useSvgPath
+};
+//# sourceMappingURL=use-svg-path.js.map

package/dist/lib/hooks/use-svg-path.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/use-svg-path.ts"],
+  "sourcesContent": ["import type { SvgPathOptions } from '../geometry/svg-path.js';\nimport { useValueMemoSlot } from './use-value-memo-slot.js';\nimport { createSvgPath } from '../geometry/svg-path.js';\n\n/**\n * Creates a memoized Path2D for an SVG data string.\n * @param svgPathData - SVG path data to parse and memoize.\n * @returns A memoized Path2D\n *\n * @see {@link SvgPathOptions}\n * @see {@link createSvgPath}\n */\nexport function useSvgPath(svgPathData: string): Path2D {\n  return useValueMemoSlot(\n    'svgPath',\n    () => createSvgPath({ d: svgPathData }),\n    [svgPathData],\n  );\n}\n"],
+  "mappings": "AACA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAUvB,SAAS,WAAW,aAA6B;AACtD,SAAO;AAAA,IACL;AAAA,IACA,MAAM,cAAc,EAAE,GAAG,YAAY,CAAC;AAAA,IACtC,CAAC,WAAW;AAAA,EACd;AACF;",
+  "names": []
+}

package/dist/lib/hooks/use-value-memo-slot.d.ts

@@ -0,0 +1,12 @@
+import type { useInternalHookSlot } from "./hook-slot.js";
+/**
+ * Private direct-value cache for specialized hooks and renderer internals.
+ *
+ * @param kind - Hook kind used to validate stable hook ordering.
+ * @param create - Factory called when the slot is created or dependencies change.
+ * @param dependencies - Values compared to decide whether to recreate the memoized value.
+ * @returns The value retained for the current dependencies.
+ *
+ * @see {@link useInternalHookSlot}
+ */
+export declare function useValueMemoSlot<T>(kind: string, create: () => T, dependencies: readonly unknown[]): T;

package/dist/lib/hooks/use-value-memo-slot.js

@@ -0,0 +1,45 @@
+import { GLOBAL_STATE } from "../global-state.js";
+import { useHookSlot } from "./hook-slot.js";
+function useValueMemoSlot(kind, create, dependencies) {
+  const snapshot = [...dependencies];
+  const slot = useHookSlot(kind, () => ({
+    candidates: /* @__PURE__ */ new WeakMap(),
+    dependencies: snapshot,
+    renderRevision: 0,
+    value: create()
+  })).value;
+  const revision = ++slot.renderRevision;
+  if (sameDependencies(slot.dependencies, snapshot)) return slot.value;
+  const transaction = GLOBAL_STATE.renderTransaction;
+  if (!transaction) {
+    throw new Error("Pibbl value memoization requires an active render transaction.");
+  }
+  let candidate = slot.candidates.get(transaction);
+  if (!candidate || !sameDependencies(candidate.dependencies, snapshot)) {
+    candidate = {
+      dependencies: snapshot,
+      value: create()
+    };
+    slot.candidates.set(transaction, candidate);
+  }
+  transaction.onFinish((success) => {
+    if (slot.candidates.get(transaction) !== candidate) return;
+    if (revision !== slot.renderRevision) return;
+    slot.candidates.delete(transaction);
+    if (!success) return;
+    slot.dependencies = candidate.dependencies;
+    slot.value = candidate.value;
+  });
+  return candidate.value;
+}
+function sameDependencies(previous, next) {
+  if (previous.length !== next.length) return false;
+  for (let index = 0; index < previous.length; index += 1) {
+    if (!Object.is(previous[index], next[index])) return false;
+  }
+  return true;
+}
+export {
+  useValueMemoSlot
+};
+//# sourceMappingURL=use-value-memo-slot.js.map

package/dist/lib/hooks/use-value-memo-slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/use-value-memo-slot.ts"],
+  "sourcesContent": ["import type { useInternalHookSlot } from './hook-slot.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport type { PibblRenderTransaction } from '../types.js';\nimport { useHookSlot } from './hook-slot.js';\n\ninterface ValueMemoCandidate<T> {\n  readonly dependencies: readonly unknown[];\n  readonly value: T;\n}\n\ninterface ValueMemoSlot<T> {\n  readonly candidates: WeakMap<PibblRenderTransaction, ValueMemoCandidate<T>>;\n  dependencies: readonly unknown[];\n  renderRevision: number;\n  value: T;\n}\n\n/**\n * Private direct-value cache for specialized hooks and renderer internals.\n *\n * @param kind - Hook kind used to validate stable hook ordering.\n * @param create - Factory called when the slot is created or dependencies change.\n * @param dependencies - Values compared to decide whether to recreate the memoized value.\n * @returns The value retained for the current dependencies.\n *\n * @see {@link useInternalHookSlot}\n */\nexport function useValueMemoSlot<T>(\n  kind: string,\n  create: () => T,\n  dependencies: readonly unknown[],\n): T {\n  const snapshot = [...dependencies];\n  const slot = useHookSlot<ValueMemoSlot<T>>(kind, () => ({\n    candidates: new WeakMap(),\n    dependencies: snapshot,\n    renderRevision: 0,\n    value: create(),\n  })).value;\n  const revision = ++slot.renderRevision;\n  if (sameDependencies(slot.dependencies, snapshot)) return slot.value;\n\n  const transaction = GLOBAL_STATE.renderTransaction;\n  if (!transaction) {\n    throw new Error('Pibbl value memoization requires an active render transaction.');\n  }\n  let candidate = slot.candidates.get(transaction);\n  if (!candidate || !sameDependencies(candidate.dependencies, snapshot)) {\n    candidate = {\n      dependencies: snapshot,\n      value: create(),\n    };\n    slot.candidates.set(transaction, candidate);\n  }\n  transaction.onFinish(success => {\n    if (slot.candidates.get(transaction) !== candidate) return;\n    if (revision !== slot.renderRevision) return;\n    slot.candidates.delete(transaction);\n    if (!success) return;\n    slot.dependencies = candidate.dependencies;\n    slot.value = candidate.value;\n  });\n  return candidate.value;\n}\n\nfunction sameDependencies(\n  previous: readonly unknown[],\n  next: readonly unknown[],\n): boolean {\n  if (previous.length !== next.length) return false;\n  for (let index = 0; index < previous.length; index += 1) {\n    if (!Object.is(previous[index], next[index])) return false;\n  }\n  return true;\n}\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAwBrB,SAAS,iBACd,MACA,QACA,cACG;AACH,QAAM,WAAW,CAAC,GAAG,YAAY;AACjC,QAAM,OAAO,YAA8B,MAAM,OAAO;AAAA,IACtD,YAAY,oBAAI,QAAQ;AAAA,IACxB,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,OAAO,OAAO;AAAA,EAChB,EAAE,EAAE;AACJ,QAAM,WAAW,EAAE,KAAK;AACxB,MAAI,iBAAiB,KAAK,cAAc,QAAQ,EAAG,QAAO,KAAK;AAE/D,QAAM,cAAc,aAAa;AACjC,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI,MAAM,gEAAgE;AAAA,EAClF;AACA,MAAI,YAAY,KAAK,WAAW,IAAI,WAAW;AAC/C,MAAI,CAAC,aAAa,CAAC,iBAAiB,UAAU,cAAc,QAAQ,GAAG;AACrE,gBAAY;AAAA,MACV,cAAc;AAAA,MACd,OAAO,OAAO;AAAA,IAChB;AACA,SAAK,WAAW,IAAI,aAAa,SAAS;AAAA,EAC5C;AACA,cAAY,SAAS,aAAW;AAC9B,QAAI,KAAK,WAAW,IAAI,WAAW,MAAM,UAAW;AACpD,QAAI,aAAa,KAAK,eAAgB;AACtC,SAAK,WAAW,OAAO,WAAW;AAClC,QAAI,CAAC,QAAS;AACd,SAAK,eAAe,UAAU;AAC9B,SAAK,QAAQ,UAAU;AAAA,EACzB,CAAC;AACD,SAAO,UAAU;AACnB;AAEA,SAAS,iBACP,UACA,MACS;AACT,MAAI,SAAS,WAAW,KAAK,OAAQ,QAAO;AAC5C,WAAS,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS,GAAG;AACvD,QAAI,CAAC,OAAO,GAAG,SAAS,KAAK,GAAG,KAAK,KAAK,CAAC,EAAG,QAAO;AAAA,EACvD;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/lib/hooks/use-visibility-transition.d.ts

@@ -0,0 +1,103 @@
+import type { Signal } from '../signals/types.js';
+import { type PibblTransitionBinding } from '../transitions/binding.js';
+import { type PibblTransitionEffect } from '../transitions/fade.js';
+/**
+ * The current hidden, entering, visible, exiting, or disposed transition state.
+ *
+ * @see {@link PibblVisibilityTransition}
+ */
+export type PibblVisibilityTransitionStatus = 'hidden' | 'entering' | 'visible' | 'exiting' | 'disposed';
+/**
+ * Settlement of one show or hide request, including its request identifier, phase, and outcome.
+ *
+ * @see {@link PibblVisibilityTransition}
+ */
+export interface PibblVisibilityTransitionResult {
+    /**
+     * Monotonic identifier of the visibility request that produced this result. See
+     * {@link PibblVisibilityTransitionResult}.
+     */
+    readonly requestId: number;
+    /** Selects `"enter"`, `"exit"` for phase. See {@link PibblVisibilityTransitionResult}. */
+    readonly phase: 'enter' | 'exit';
+    /** How this specific show or hide request settled. See {@link PibblVisibilityTransitionResult}. */
+    readonly status: 'finished' | 'cancelled' | 'disposed';
+}
+/**
+ * Enter and exit effects and lifecycle configuration for visibility transitions.
+ *
+ * @see {@link PibblTransitionEffect}
+ * @see {@link useVisibilityTransition}
+ */
+export interface PibblVisibilityTransitionOptions {
+    /** Mount-time options in the first slice. */
+    readonly initial?: boolean;
+    /** Effect used when moving toward visible. See {@link PibblTransitionEffect}. */
+    readonly enter: PibblTransitionEffect;
+    /**
+     * Effect used when moving toward hidden; defaults to the enter effect. See
+     * {@link PibblTransitionEffect}.
+     */
+    readonly exit?: PibblTransitionEffect;
+    /**
+     * Transition duration in milliseconds; defaults to 300. See
+     * {@link PibblVisibilityTransitionOptions}.
+     */
+    readonly duration?: number;
+}
+/**
+ * Mount-owned visibility controls, reactive progress and status, and a primitive presentation binding.
+ *
+ * @see {@link PibblTransitionBinding}
+ * @see {@link Signal}
+ * @see {@link PibblVisibilityTransitionStatus}
+ * @see {@link PibblVisibilityTransitionResult}
+ * @see {@link useVisibilityTransition}
+ */
+export interface PibblVisibilityTransition {
+    /**
+     * Presentation binding to assign to the receiving primitive's style.transition. See
+     * {@link PibblTransitionBinding}.
+     */
+    readonly binding: PibblTransitionBinding;
+    /** Readonly view of the requested visibility target. See {@link Signal}. */
+    readonly visible: Signal<boolean>;
+    /** Normalized progress through the current animation or transition. See {@link Signal}. */
+    readonly progress: Signal<number>;
+    /**
+     * Reactive visibility-transition lifecycle state. See {@link Signal},
+     * {@link PibblVisibilityTransitionStatus}.
+     */
+    readonly status: Signal<PibblVisibilityTransitionStatus>;
+    /**
+     * Requests entry and resolves with the request's finished, cancelled, or disposed outcome. See
+     * {@link PibblVisibilityTransitionResult}.
+     * @returns A promise settling with the request's completion or interruption result. See
+     * {@link PibblVisibilityTransitionResult} .
+     */
+    show(): Promise<PibblVisibilityTransitionResult>;
+    /**
+     * Requests exit and resolves with the request's finished, cancelled, or disposed outcome. See
+     * {@link PibblVisibilityTransitionResult}.
+     * @returns A promise settling with the request's completion or interruption result. See
+     * {@link PibblVisibilityTransitionResult} .
+     */
+    hide(): Promise<PibblVisibilityTransitionResult>;
+    /**
+     * Forces the currently requested transition to its endpoint. See {@link PibblVisibilityTransition}
+     * .
+     */
+    finish(): void;
+}
+/**
+ * Explicitly controlled visibility. It does not retain unmounted content or alter targeting.
+ *
+ * @param options - Visibility signal, effect, timing, and lifecycle options. See
+ * {@link PibblVisibilityTransitionOptions} .
+ * @returns Stable mount-owned controls for visibility and transition completion. See
+ * {@link PibblVisibilityTransition} .
+ *
+ * @see {@link PibblVisibilityTransitionOptions}
+ * @see {@link PibblVisibilityTransition}
+ */
+export declare function useVisibilityTransition(options: PibblVisibilityTransitionOptions): PibblVisibilityTransition;

package/dist/lib/hooks/use-visibility-transition.js

@@ -0,0 +1,195 @@
+import { signal } from "../signals/graph.js";
+import { drive } from "../animation/program.js";
+import { defineAnimation, tween } from "../animation/definition.js";
+import { createTransitionBinding } from "../transitions/binding.js";
+import { createTransitionRuntime, transitionEffectSampler, transitionEffectTail } from "../transitions/fade.js";
+import { useHookSlot } from "./hook-slot.js";
+import { queueBeginCommand } from "../scheduler/realm-scheduler.js";
+import { usePlayback } from "./use-playback.js";
+function useVisibilityTransition(options) {
+  const duration = options.duration ?? 300;
+  if (!Number.isFinite(duration) || duration < 0) throw new RangeError("Visibility transition duration must be finite and nonnegative.");
+  if (options.initial !== void 0 && typeof options.initial !== "boolean") throw new TypeError("Visibility transition initial must be boolean.");
+  transitionEffectSampler(options.enter);
+  transitionEffectSampler(options.exit ?? options.enter);
+  const enterTail = transitionEffectTail(options.enter), exitTail = transitionEffectTail(options.exit ?? options.enter);
+  const state = useHookSlot("visibility-transition", (teardowns) => {
+    const enterRuntime = createTransitionRuntime(options.enter);
+    const exitRuntime = options.exit && options.exit !== options.enter ? createTransitionRuntime(options.exit) : enterRuntime;
+    const runtimes = [.../* @__PURE__ */ new Set([enterRuntime, exitRuntime])];
+    const enter = enterRuntime.sample, exit = exitRuntime.sample;
+    const visible = signal(options.initial ?? true);
+    const progress = signal(visible.get() ? 1 : 0);
+    const status = signal(visible.get() ? "visible" : "hidden");
+    let disposed = false, serial = 0;
+    let pending;
+    const elapsed = signal(0), tailTime = signal(0);
+    const maxTail = Math.max(enterTail, exitTail);
+    let playback2, clock2, tail2;
+    let tailRunning = false;
+    const forced = signal(false);
+    let runStart = 0, runInitial = progress.get();
+    const historyCommands = /* @__PURE__ */ new Set();
+    let history = [];
+    const progressAt = (time) => {
+      if (!Number.isFinite(time)) throw new RangeError("progressAt requires a finite time.");
+      if (time < 0) return runInitial;
+      const segment = history.findLast((value) => value.time <= time);
+      if (!segment) return runInitial;
+      return Math.max(0, Math.min(1, segment.progress + segment.direction * (duration === 0 ? 1 : (time - segment.time) / duration)));
+    };
+    let direction = "enter";
+    const settle = (outcome) => {
+      const request2 = pending;
+      pending = void 0;
+      request2?.resolve(Object.freeze({ requestId: request2.id, phase: request2.target ? "enter" : "exit", status: outcome }));
+    };
+    const request = (target) => {
+      const id = ++serial, phase = target ? "enter" : "exit";
+      if (disposed) return Promise.resolve({ requestId: id, phase, status: "disposed" });
+      visible.set(target);
+      const wasActive = pending !== void 0;
+      const wasTailing = tailRunning;
+      tailRunning = false;
+      forced.set(false);
+      if (wasTailing) tail2.cancel();
+      settle("cancelled");
+      if (!wasActive && progress.get() === Number(target) && playback2.status.get() !== "running") {
+        status.set(target ? "visible" : "hidden");
+        return Promise.resolve({ requestId: id, phase, status: "finished" });
+      }
+      const promise = new Promise((resolve) => {
+        pending = { id, target, resolve };
+      });
+      status.set(target ? "entering" : "exiting");
+      if (!wasActive) clock2.play();
+      if (!wasActive || wasTailing || direction !== phase) {
+        const at = wasActive ? elapsed.get() : 0, from = progress.get();
+        let command;
+        command = queueBeginCommand((snapshot) => {
+          historyCommands.delete(command);
+          if (disposed) return;
+          if (!wasActive) {
+            history = [];
+            runInitial = from;
+            runStart = snapshot.logicalTime;
+            for (const runtime of runtimes) runtime.reset?.();
+          }
+          const append = (time, slope) => {
+            if (history.at(-1)?.time === time) history.pop();
+            history.push({ time, progress: from, direction: slope });
+          };
+          append(at, 0);
+          append(snapshot.logicalTime - runStart, target ? 1 : -1);
+        });
+        historyCommands.add(command);
+      }
+      if (wasTailing && progress.get() === Number(target)) {
+        startTail();
+        return promise;
+      }
+      if (wasActive && !wasTailing || playback2.status.get() === "running" || playback2.status.get() === "paused" || playback2.status.get() === "scheduled") {
+        if (direction !== phase) playback2.reverse();
+        playback2.resume();
+      } else if (target) playback2.play();
+      else playback2.reverse();
+      direction = phase;
+      return promise;
+    };
+    const complete = () => {
+      if (disposed || !pending || progress.get() !== Number(pending.target)) return;
+      tailRunning = false;
+      clock2.pause();
+      status.set(pending.target ? "visible" : "hidden");
+      settle("finished");
+    };
+    const startTail = () => {
+      if (disposed || !pending || progress.get() !== Number(pending.target)) return;
+      const length = pending.target ? enterTail : exitTail;
+      if (!length || forced.get()) {
+        complete();
+        return;
+      }
+      tailRunning = true;
+      tail2.play();
+      tail2.setPlaybackRate(maxTail / length);
+    };
+    const binding = createTransitionBinding(() => {
+      const active = (status.get() === "entering" || status.get() === "exiting") && !forced.get();
+      return (visible.get() ? enter : exit)(progress.get(), visible.get() ? "enter" : "exit", {
+        active,
+        elapsed: active ? elapsed.get() : 0,
+        progressAt
+      });
+    });
+    const handle = Object.freeze({
+      binding,
+      visible: visible.asReadonly(),
+      progress: progress.asReadonly(),
+      status: status.asReadonly(),
+      show: () => request(true),
+      hide: () => request(false),
+      finish: () => {
+        if (!disposed && pending) {
+          forced.set(true);
+          if (tailRunning) tail2.finish();
+          else if (pending.target) playback2.finish();
+          else playback2.seek(0);
+        }
+      }
+    });
+    teardowns.add(() => {
+      disposed = true;
+      for (const runtime of runtimes) runtime.dispose?.();
+      history = [];
+      for (const command of historyCommands) command.cancel();
+      historyCommands.clear();
+      status.set("disposed");
+      settle("disposed");
+    });
+    return {
+      handle,
+      program: drive(progress, duration === 0 ? defineAnimation({ duration: 0, sample: () => Number(visible.get()) }) : tween({ from: 0, to: 1, duration })),
+      clockProgram: drive(elapsed, defineAnimation({ duration: 1e12, sample: ({ localTime }) => {
+        if (pending && !forced.get()) (visible.get() ? enterRuntime : exitRuntime).advance?.(localTime, progressAt);
+        return localTime;
+      } })),
+      tailProgram: drive(tailTime, tween({ from: 0, to: 1, duration: maxTail })),
+      setPlayback(value, clockValue, tailValue) {
+        playback2 = value;
+        clock2 = clockValue;
+        tail2 = tailValue;
+      },
+      fail() {
+        disposed = true;
+        for (const runtime of runtimes) runtime.dispose?.();
+        forced.set(true);
+        status.set("disposed");
+        settle("disposed");
+        playback2.cancel();
+        clock2.cancel();
+        tail2.cancel();
+      },
+      startTail,
+      completeTail() {
+        if (tailRunning) complete();
+      }
+    };
+  }).value;
+  const playback = usePlayback(state.program, { onEvent: (event) => {
+    if (event.type === "finish") state.startTail();
+  } });
+  const clock = usePlayback(state.clockProgram, { onError: (error) => {
+    state.fail();
+    throw error;
+  } });
+  const tail = usePlayback(state.tailProgram, { onEvent: (event) => {
+    if (event.type === "finish") state.completeTail();
+  } });
+  state.setPlayback(playback, clock, tail);
+  return state.handle;
+}
+export {
+  useVisibilityTransition
+};
+//# sourceMappingURL=use-visibility-transition.js.map

package/dist/lib/hooks/use-visibility-transition.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/use-visibility-transition.ts"],
+  "sourcesContent": ["import { signal } from '../signals/graph.js';\nimport type { Signal } from '../signals/types.js';\nimport { drive } from '../animation/program.js';\nimport { defineAnimation, tween } from '../animation/definition.js';\nimport type { PibblPlayback } from '../animation/types.js';\nimport { createTransitionBinding, type PibblTransitionBinding } from '../transitions/binding.js';\nimport { createTransitionRuntime, transitionEffectSampler, transitionEffectTail, type PibblTransitionEffect } from '../transitions/fade.js';\nimport { useHookSlot } from './hook-slot.js';\nimport { queueBeginCommand } from '../scheduler/realm-scheduler.js';\nimport type { PibblBeginCommandHandle } from '../scheduler/types.js';\nimport { usePlayback } from './use-playback.js';\n\n/**\n * The current hidden, entering, visible, exiting, or disposed transition state.\n *\n * @see {@link PibblVisibilityTransition}\n */\nexport type PibblVisibilityTransitionStatus = 'hidden' | 'entering' | 'visible' | 'exiting' | 'disposed';\n/**\n * Settlement of one show or hide request, including its request identifier, phase, and outcome.\n *\n * @see {@link PibblVisibilityTransition}\n */\nexport interface PibblVisibilityTransitionResult {\n  /**\n   * Monotonic identifier of the visibility request that produced this result. See\n   * {@link PibblVisibilityTransitionResult}.\n   */\n  readonly requestId: number;\n  /** Selects `\"enter\"`, `\"exit\"` for phase. See {@link PibblVisibilityTransitionResult}. */\n  readonly phase: 'enter' | 'exit';\n  /** How this specific show or hide request settled. See {@link PibblVisibilityTransitionResult}. */\n  readonly status: 'finished' | 'cancelled' | 'disposed';\n}\n/**\n * Enter and exit effects and lifecycle configuration for visibility transitions.\n *\n * @see {@link PibblTransitionEffect}\n * @see {@link useVisibilityTransition}\n */\nexport interface PibblVisibilityTransitionOptions {\n  /** Mount-time options in the first slice. */\n  readonly initial?: boolean;\n  /** Effect used when moving toward visible. See {@link PibblTransitionEffect}. */\n  readonly enter: PibblTransitionEffect;\n  /**\n   * Effect used when moving toward hidden; defaults to the enter effect. See\n   * {@link PibblTransitionEffect}.\n   */\n  readonly exit?: PibblTransitionEffect;\n  /**\n   * Transition duration in milliseconds; defaults to 300. See\n   * {@link PibblVisibilityTransitionOptions}.\n   */\n  readonly duration?: number;\n}\n/**\n * Mount-owned visibility controls, reactive progress and status, and a primitive presentation binding.\n *\n * @see {@link PibblTransitionBinding}\n * @see {@link Signal}\n * @see {@link PibblVisibilityTransitionStatus}\n * @see {@link PibblVisibilityTransitionResult}\n * @see {@link useVisibilityTransition}\n */\nexport interface PibblVisibilityTransition {\n  /**\n   * Presentation binding to assign to the receiving primitive's style.transition. See\n   * {@link PibblTransitionBinding}.\n   */\n  readonly binding: PibblTransitionBinding;\n  /** Readonly view of the requested visibility target. See {@link Signal}. */\n  readonly visible: Signal<boolean>;\n  /** Normalized progress through the current animation or transition. See {@link Signal}. */\n  readonly progress: Signal<number>;\n  /**\n   * Reactive visibility-transition lifecycle state. See {@link Signal},\n   * {@link PibblVisibilityTransitionStatus}.\n   */\n  readonly status: Signal<PibblVisibilityTransitionStatus>;\n  /**\n   * Requests entry and resolves with the request's finished, cancelled, or disposed outcome. See\n   * {@link PibblVisibilityTransitionResult}.\n   * @returns A promise settling with the request's completion or interruption result. See\n   * {@link PibblVisibilityTransitionResult} .\n   */\n  show(): Promise<PibblVisibilityTransitionResult>;\n  /**\n   * Requests exit and resolves with the request's finished, cancelled, or disposed outcome. See\n   * {@link PibblVisibilityTransitionResult}.\n   * @returns A promise settling with the request's completion or interruption result. See\n   * {@link PibblVisibilityTransitionResult} .\n   */\n  hide(): Promise<PibblVisibilityTransitionResult>;\n  /**\n   * Forces the currently requested transition to its endpoint. See {@link PibblVisibilityTransition}\n   * .\n   */\n  finish(): void;\n}\n\n/**\n * Explicitly controlled visibility. It does not retain unmounted content or alter targeting.\n *\n * @param options - Visibility signal, effect, timing, and lifecycle options. See\n * {@link PibblVisibilityTransitionOptions} .\n * @returns Stable mount-owned controls for visibility and transition completion. See\n * {@link PibblVisibilityTransition} .\n *\n * @see {@link PibblVisibilityTransitionOptions}\n * @see {@link PibblVisibilityTransition}\n */\nexport function useVisibilityTransition(options: PibblVisibilityTransitionOptions): PibblVisibilityTransition {\n  const duration = options.duration ?? 300;\n  if (!Number.isFinite(duration) || duration < 0) throw new RangeError('Visibility transition duration must be finite and nonnegative.');\n  if (options.initial !== undefined && typeof options.initial !== 'boolean') throw new TypeError('Visibility transition initial must be boolean.');\n  transitionEffectSampler(options.enter);\n  transitionEffectSampler(options.exit ?? options.enter);\n  const enterTail = transitionEffectTail(options.enter), exitTail = transitionEffectTail(options.exit ?? options.enter);\n  const state = useHookSlot('visibility-transition', teardowns => {\n    const enterRuntime = createTransitionRuntime(options.enter);\n    const exitRuntime = options.exit && options.exit !== options.enter ? createTransitionRuntime(options.exit) : enterRuntime;\n    const runtimes = [...new Set([enterRuntime, exitRuntime])];\n    const enter = enterRuntime.sample, exit = exitRuntime.sample;\n    const visible = signal(options.initial ?? true);\n    const progress = signal(visible.get() ? 1 : 0);\n    const status = signal<PibblVisibilityTransitionStatus>(visible.get() ? 'visible' : 'hidden');\n    let disposed = false, serial = 0;\n    let pending: { id: number; target: boolean; resolve: (result: PibblVisibilityTransitionResult) => void } | undefined;\n    const elapsed = signal(0), tailTime = signal(0);\n    const maxTail = Math.max(enterTail, exitTail);\n    let playback!: PibblPlayback, clock!: PibblPlayback, tail!: PibblPlayback;\n    let tailRunning = false;\n    const forced = signal(false);\n    let runStart = 0, runInitial = progress.get();\n    const historyCommands = new Set<PibblBeginCommandHandle>();\n    let history: { time: number; progress: number; direction: number }[] = [];\n    const progressAt = (time: number) => {\n      if (!Number.isFinite(time)) throw new RangeError('progressAt requires a finite time.');\n      if (time < 0) return runInitial;\n      const segment = history.findLast(value => value.time <= time);\n      if (!segment) return runInitial;\n      return Math.max(0, Math.min(1, segment.progress + segment.direction * (duration === 0 ? 1 : (time - segment.time) / duration)));\n    };\n    let direction: 'enter' | 'exit' = 'enter';\n    const settle = (outcome: PibblVisibilityTransitionResult['status']) => {\n      const request = pending; pending = undefined;\n      request?.resolve(Object.freeze({ requestId: request.id, phase: request.target ? 'enter' : 'exit', status: outcome }));\n    };\n    const request = (target: boolean): Promise<PibblVisibilityTransitionResult> => {\n      const id = ++serial, phase = target ? 'enter' : 'exit';\n      if (disposed) return Promise.resolve({ requestId: id, phase, status: 'disposed' });\n      // The signal write also enforces Pibbl's prohibition on commands during rendering.\n      visible.set(target);\n      const wasActive = pending !== undefined;\n      const wasTailing = tailRunning;\n      tailRunning = false; forced.set(false); if (wasTailing) tail.cancel();\n      settle('cancelled');\n      if (!wasActive && progress.get() === Number(target) && playback.status.get() !== 'running') {\n        status.set(target ? 'visible' : 'hidden');\n        return Promise.resolve({ requestId: id, phase, status: 'finished' });\n      }\n      const promise = new Promise<PibblVisibilityTransitionResult>(resolve => { pending = { id, target, resolve }; });\n      status.set(target ? 'entering' : 'exiting');\n      if (!wasActive) clock.play();\n      if (!wasActive || wasTailing || direction !== phase) {\n        const at = wasActive ? elapsed.get() : 0, from = progress.get();\n        let command!: PibblBeginCommandHandle;\n        command = queueBeginCommand(snapshot => {\n          historyCommands.delete(command);\n          if (disposed) return;\n          if (!wasActive) { history = []; runInitial = from; runStart = snapshot.logicalTime; for (const runtime of runtimes) runtime.reset?.(); }\n          const append = (time: number, slope: number) => {\n            if (history.at(-1)?.time === time) history.pop();\n            history.push({ time, progress: from, direction: slope });\n          };\n          // Playback changes direction in Begin, holding the last committed value\n          // until that frame. Keep that hold and all earlier run segments.\n          append(at, 0);\n          append(snapshot.logicalTime - runStart, target ? 1 : -1);\n        });\n        historyCommands.add(command);\n      }\n      if (wasTailing && progress.get() === Number(target)) { startTail(); return promise; }\n      if ((wasActive && !wasTailing) || playback.status.get() === 'running' || playback.status.get() === 'paused' || playback.status.get() === 'scheduled') {\n        if (direction !== phase) playback.reverse();\n        playback.resume();\n      } else if (target) playback.play();\n      else playback.reverse();\n      direction = phase;\n      return promise;\n    };\n    const complete = () => {\n      if (disposed || !pending || progress.get() !== Number(pending.target)) return;\n      tailRunning = false; clock.pause();\n      status.set(pending.target ? 'visible' : 'hidden'); settle('finished');\n    };\n    const startTail = () => {\n      if (disposed || !pending || progress.get() !== Number(pending.target)) return;\n      const length = pending.target ? enterTail : exitTail;\n      if (!length || forced.get()) { complete(); return; }\n      tailRunning = true; tail.play(); tail.setPlaybackRate(maxTail / length);\n    };\n    const binding = createTransitionBinding(() => {\n      const active = (status.get() === 'entering' || status.get() === 'exiting') && !forced.get();\n      return (visible.get() ? enter : exit)(progress.get(), visible.get() ? 'enter' : 'exit', {\n        active, elapsed: active ? elapsed.get() : 0, progressAt,\n      });\n    });\n    const handle: PibblVisibilityTransition = Object.freeze({\n      binding, visible: visible.asReadonly(), progress: progress.asReadonly(), status: status.asReadonly(),\n      show: () => request(true), hide: () => request(false), finish: () => { if (!disposed && pending) { forced.set(true); if (tailRunning) tail.finish(); else if (pending.target) playback.finish(); else playback.seek(0); } },\n    });\n    teardowns.add(() => { disposed = true; for (const runtime of runtimes) runtime.dispose?.(); history = []; for (const command of historyCommands) command.cancel(); historyCommands.clear(); status.set('disposed'); settle('disposed'); });\n    return {\n      handle, program: drive(progress, duration === 0 ? defineAnimation({ duration: 0, sample: () => Number(visible.get()) }) : tween({ from: 0, to: 1, duration })),\n      clockProgram: drive(elapsed, defineAnimation({ duration: 1e12, sample: ({ localTime }) => {\n        if (pending && !forced.get()) (visible.get() ? enterRuntime : exitRuntime).advance?.(localTime, progressAt);\n        return localTime;\n      } })),\n      tailProgram: drive(tailTime, tween({ from: 0, to: 1, duration: maxTail })),\n      setPlayback(value: PibblPlayback, clockValue: PibblPlayback, tailValue: PibblPlayback) { playback = value; clock = clockValue; tail = tailValue; },\n      fail() { disposed = true; for (const runtime of runtimes) runtime.dispose?.(); forced.set(true); status.set('disposed'); settle('disposed'); playback.cancel(); clock.cancel(); tail.cancel(); },\n      startTail,\n      completeTail() { if (tailRunning) complete(); },\n    };\n  }).value;\n  const playback = usePlayback(state.program, { onEvent: event => { if (event.type === 'finish') state.startTail(); } });\n  const clock = usePlayback(state.clockProgram, { onError: error => { state.fail(); throw error; } });\n  const tail = usePlayback(state.tailProgram, { onEvent: event => { if (event.type === 'finish') state.completeTail(); } });\n  state.setPlayback(playback, clock, tail);\n  return state.handle;\n}\n"],
+  "mappings": "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",
+  "names": ["playback", "clock", "tail", "request"]
+}

package/dist/lib/html/html-service.d.ts

@@ -0,0 +1,30 @@
+import type { PibblClippingStackEntry, PibblEventRoot, PibblInstance, PibblInteractionLayer } from '../types.js';
+import type { HtmlBoxRegistration, HtmlBoxSlot, HtmlBridge } from './types.js';
+export declare function requireHtmlService(owner: PibblInstance): HtmlService;
+export declare class HtmlService implements HtmlBridge {
+    private readonly root;
+    private snapshots;
+    private pending;
+    private transaction;
+    private live;
+    private svg;
+    private viewport;
+    private disposed;
+    private rendered;
+    constructor(root: PibblEventRoot);
+    private enterTransaction;
+    beginRender(instance: PibblInstance): void;
+    suspend(instance: PibblInstance): void;
+    register(registration: HtmlBoxRegistration): void;
+    recordLayer(parent: PibblInstance, child: PibblInstance, bridge: PibblInteractionLayer, opacity: number, composite: GlobalCompositeOperation): void;
+    private hasHosts;
+    release(slot: HtmlBoxSlot): void;
+    private retire;
+    private publish;
+    private ensureDOM;
+    private apply;
+    private applyClips;
+    private reset;
+    dispose(): void;
+}
+export declare function snapshotClips(clips: readonly PibblClippingStackEntry[]): PibblClippingStackEntry[];