@pibbl/core 0.0.1 → 0.0.3-alpha.109.1

package/dist/lib/backend/types.d.ts

@@ -5,7 +5,7 @@ import type { PibblElementSource } from '../element/metadata.js';
 import type { PibblNode, PibblNodeInput } from '../element/types.js';
 import type { PibblHitTestOutput } from '../events/paint-entry.js';
 import type { PibblEventFocusOptions, PibblEventHandlers } from '../events/types.js';
-import type { MeasureInput, MeasureResult, NormalizedStyle, PreservedSignalPropKey, PrimitiveProgramProps, ResolvedStyle, SpecifiedStyle, StyleResolutionContext, SystemStyle, Canvas, RenderingContext2D } from '../types.js';
+import type { MeasureInput, IntrinsicMeasureInput, IntrinsicSizesResult, BaselineMeasureInput, BaselinesResult, MeasureResult, NormalizedStyle, PreservedSignalPropKey, PrimitiveProgramProps, ResolvedStyle, SpecifiedStyle, StyleResolutionContext, SystemStyle, Canvas, RenderingContext2D } from '../types.js';
 import type { RenderTargetSnapshot } from '../render-target.js';
 declare const PIBBL_BACKEND_TOKEN: unique symbol;
 /**
@@ -100,6 +100,18 @@ export interface PibblBackendPrimitiveDefinition<P = any, S extends SystemStyle
      * @returns Measured dimensions or an unsupported measurement result. See {@link MeasureResult}.
      */
     readonly measure?: (input: MeasureInput<PrimitiveProgramProps<P>, N>) => MeasureResult;
+    /**
+     * Pure intrinsic content provider. See {@link IntrinsicMeasureInput}.
+     * @param input - Resolved inputs and tagged availability. See {@link IntrinsicMeasureInput}.
+     * @returns Paired content sizes or unsupported. See {@link IntrinsicSizesResult}.
+     */
+    readonly measureIntrinsic?: (input: IntrinsicMeasureInput<PrimitiveProgramProps<P>, N>) => IntrinsicSizesResult;
+    /**
+     * Pure first/last baseline provider at the final content allocation.
+     * @param input - Resolved inputs and final local allocation. See {@link BaselineMeasureInput}.
+     * @returns Finite ordered offsets or unsupported. See {@link BaselinesResult}.
+     */
+    readonly measureBaselines?: (input: BaselineMeasureInput<PrimitiveProgramProps<P>, N>) => BaselinesResult;
 }
 /**
  * Inputs used to begin a backend frame.

package/dist/lib/backend/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/backend/types.ts"],
-  "sourcesContent": ["import type { registerNestedInteractionResolver, useBackendEventTarget } from '../../internal.js';\nimport type { mountBackendPibbl } from '../mount-pibbl.js';\nimport type { defineBackendPrimitive } from '../define-primitive.js';\nimport type { PibblElementSource } from '../element/metadata.js';\nimport type { PibblNode, PibblNodeInput } from '../element/types.js';\nimport type { PibblHitTestOutput } from '../events/paint-entry.js';\nimport type { PibblEventFocusOptions, PibblEventHandlers } from '../events/types.js';\nimport type {\n  MeasureInput,\n  MeasureResult,\n  NormalizedStyle,\n  PreservedSignalPropKey,\n  PrimitiveProgramProps,\n  ResolvedStyle,\n  SpecifiedStyle,\n  StyleResolutionContext,\n  SystemStyle,\n  Canvas,\n  RenderingContext2D,\n} from '../types.js';\nimport type { RenderTargetSnapshot } from '../render-target.js';\n\ndeclare const PIBBL_BACKEND_TOKEN: unique symbol;\n\n/**\n * Opaque identity for one official Pibbl rendering backend.\n *\n * @see {@link createBackendToken}\n * @see {@link PibblBackendDriver}\n * @see {@link PibblBackendPrimitiveDefinition}\n */\nexport interface PibblBackendToken {\n  readonly [PIBBL_BACKEND_TOKEN]: true;\n}\n\nconst backendNames = new WeakMap<PibblBackendToken, string>();\n\n/**\n * Creates a package-private backend identity for an official Pibbl renderer.\n *\n * @param name - Diagnostic name identifying the backend.\n * @returns A unique backend identity token. See {@link PibblBackendToken}.\n *\n * @see {@link PibblBackendToken}\n */\nexport function createBackendToken(name: string): PibblBackendToken {\n  if (!name.trim()) {\n    throw new Error('Pibbl backend names must be nonempty.');\n  }\n  const token = Object.freeze({}) as PibblBackendToken;\n  backendNames.set(token, name);\n  return token;\n}\n\n/** @internal Used only for diagnostics and dispatch inside core. */\nexport function getBackendTokenName(token: PibblBackendToken): string {\n  return backendNames.get(token) ?? 'unknown';\n}\n\n/**\n * Executable primitive rendering program recognized by the backend.\n *\n * @param props - Resolved non-style component inputs. See {@link PrimitiveProgramProps}.\n * @param style - Resolved primitive style. See {@link ResolvedStyle}.\n * @param environment - Backend environment for the active frame.\n * @returns Child nodes to traverse, or no children. See {@link PibblNodeInput}.\n *\n * @see {@link SystemStyle}\n * @see {@link PrimitiveProgramProps}\n * @see {@link ResolvedStyle}\n * @see {@link PibblNodeInput}\n * @see {@link PibblBackendPrimitiveDefinition}\n * @see {@link defineBackendPrimitive}\n */\nexport type PibblBackendPrimitiveProgram<\n  P = any,\n  R extends SystemStyle = SystemStyle,\n  E = any,\n> = (\n  props: Readonly<PrimitiveProgramProps<P>>,\n  style: ResolvedStyle<R>,\n  environment: E,\n) => PibblNodeInput | void;\n\n/**\n * Rendering, style, and measurement definition of a backend primitive.\n *\n * @see {@link SystemStyle}\n * @see {@link PibblBackendToken}\n * @see {@link PibblBackendPrimitiveProgram}\n * @see {@link SpecifiedStyle}\n * @see {@link NormalizedStyle}\n * @see {@link StyleResolutionContext}\n * @see {@link ResolvedStyle}\n * @see {@link MeasureInput}\n * @see {@link PrimitiveProgramProps}\n * @see {@link MeasureResult}\n * @see {@link PibblBackendPrimitiveInput}\n */\nexport interface PibblBackendPrimitiveDefinition<\n  P = any,\n  S extends SystemStyle = SystemStyle,\n  N extends SystemStyle = S,\n  R extends SystemStyle = N,\n  E = any,\n> {\n  /** Identity of the backend that accepts this primitive. See {@link PibblBackendToken}. */\n  readonly backend: PibblBackendToken;\n  /**\n   * Names props whose signal identity is preserved for the primitive program. See\n   * {@link PreservedSignalPropKey}.\n   */\n  readonly preserveSignalProps?: readonly PreservedSignalPropKey<P>[];\n  /**\n   * Declares how the primitive receives and resolves its children. See\n   * {@link PibblBackendPrimitiveDefinition}.\n   */\n  readonly childInput?: 'structural' | 'text';\n  /** Executable primitive program used by the backend. See {@link PibblBackendPrimitiveProgram}. */\n  readonly program: PibblBackendPrimitiveProgram<P, R, E>;\n  /**\n   * Applies primitive defaults and shorthand normalization before layout resolution. See\n   * {@link SpecifiedStyle}, {@link NormalizedStyle}.\n   * @param style - Specified style values before normalization. See {@link SpecifiedStyle}.\n   * @returns Normalized style with the primitive's shorthand and defaults applied. See\n   * {@link NormalizedStyle} .\n   */\n  readonly normalizeStyle?: (style: SpecifiedStyle<S>) => NormalizedStyle<N>;\n  /**\n   * Resolves normalized style using the current layout context. See {@link NormalizedStyle},\n   * {@link StyleResolutionContext}, {@link ResolvedStyle}.\n   * @param style - Normalized style to resolve. See {@link NormalizedStyle}.\n   * @param context - Layout and diagnostic context for resolution. See\n   * {@link StyleResolutionContext} .\n   * @returns Resolved style ready for rendering. See {@link ResolvedStyle}.\n   */\n  readonly resolveStyle?: (\n    style: NormalizedStyle<N>,\n    context: Readonly<StyleResolutionContext>,\n  ) => ResolvedStyle<R>;\n  /**\n   * Measures declared primitive inputs without painting or retaining draw commands. See\n   * {@link MeasureInput}, {@link PrimitiveProgramProps}, {@link MeasureResult}.\n   * @param input - Props, normalized style, constraints, and nested measurement services. See\n   * {@link MeasureInput} , {@link PrimitiveProgramProps} .\n   * @returns Measured dimensions or an unsupported measurement result. See {@link MeasureResult}.\n   */\n  readonly measure?: (input: MeasureInput<PrimitiveProgramProps<P>, N>) => MeasureResult;\n}\n\n/**\n * Inputs used to begin a backend frame.\n *\n * @see {@link Canvas}\n * @see {@link PibblBackendDriver}\n */\nexport interface PibblBackendFrameInput {\n  /** Canvas surface associated with this resource or mount. See {@link Canvas}. */\n  readonly canvas: Canvas;\n  /** Canvas width in logical units. See {@link PibblBackendFrameInput}. */\n  readonly logicalWidth: number;\n  /** Canvas height in logical units. See {@link PibblBackendFrameInput}. */\n  readonly logicalHeight: number;\n  /** Width of the backing raster in physical pixels. See {@link PibblBackendFrameInput}. */\n  readonly backingWidth: number;\n  /** Height of the backing raster in physical pixels. See {@link PibblBackendFrameInput}. */\n  readonly backingHeight: number;\n  /** Timestamp associated with this render frame. See {@link PibblBackendFrameInput}. */\n  readonly renderTimestamp: number;\n}\n\n/**\n * The backend rendering context for one scheduled frame.\n *\n * @see {@link RenderingContext2D}\n * @see {@link PibblBackendDriver}\n */\nexport interface PibblBackendFrame<E> {\n  /** Backend environment used while evaluating the frame. See {@link PibblBackendFrame}. */\n  readonly environment: E;\n  /** Canvas 2D context used for the current frame. See {@link RenderingContext2D}. */\n  readonly context2D?: RenderingContext2D;\n  /** Current drawing target owned by the backend frame. See {@link RenderTargetSnapshot}. */\n  readonly renderTarget?: RenderTargetSnapshot;\n  /**\n   * World transform establishing the backend frame's logical coordinate basis. See\n   * {@link PibblBackendFrame}.\n   */\n  readonly worldBaseTransform?: DOMMatrix;\n}\n\n/**\n * Resolved inputs delivered to a backend primitive program.\n *\n * @see {@link PibblElementSource}\n * @see {@link PibblBackendPrimitiveDefinition}\n * @see {@link PibblBackendDriver}\n */\nexport interface PibblBackendPrimitiveInput {\n  /** Component name retained for diagnostics. See {@link PibblBackendPrimitiveInput}. */\n  readonly componentName: string;\n  /** Authoring source location retained for diagnostics. See {@link PibblElementSource}. */\n  readonly source?: PibblElementSource;\n  /**\n   * Primitive definition used to resolve and render the supplied inputs. See\n   * {@link PibblBackendPrimitiveDefinition}.\n   */\n  readonly definition: PibblBackendPrimitiveDefinition;\n  /**\n   * Component props supplied to evaluation or measurement. See {@link PibblBackendPrimitiveInput}.\n   */\n  readonly props: Readonly<Record<PropertyKey, unknown>>;\n  /** Declared presentation and layout properties. See {@link PibblBackendPrimitiveInput}. */\n  readonly style: Readonly<Record<PropertyKey, unknown>>;\n  /**\n   * Transform applied to the primitive's presented Canvas geometry. See\n   * {@link PibblBackendPrimitiveInput}.\n   */\n  readonly presentationTransform2D?: DOMMatrix;\n}\n\n/**\n * A mounted backend's frame execution and cleanup operations.\n *\n * @see {@link Canvas}\n * @see {@link PibblNode}\n * @see {@link PibblNestedResolverInput}\n * @see {@link mountBackendPibbl}\n */\nexport interface PibblBackendMount {\n  /** Canvas surface associated with this resource or mount. See {@link Canvas}. */\n  readonly canvas: Canvas;\n  /**\n   * Updates the backend surface to the supplied dimensions. See {@link PibblBackendMount}.\n   * @param logicalWidth - New logical viewport width.\n   * @param logicalHeight - New logical viewport height.\n   */\n  resize(logicalWidth: number, logicalHeight: number): void;\n  /**\n   * Renders the current data or resources using the supplied context. See {@link PibblBackendMount}\n   * .\n   * @param root - Node tree to render. See {@link PibblNode}.\n   * @param timestamp - Frame timestamp in milliseconds.\n   */\n  render(root: PibblNode, timestamp: number): void;\n  /**\n   * Requests future work from the owning scheduler. See {@link PibblBackendMount}.\n   * @param updateParents - Whether ancestor compositions also need to be scheduled.\n   */\n  requestFrame(updateParents: boolean): void;\n  /** Releases resources owned by this mounted object. See {@link PibblBackendMount}. */\n  dispose(): void;\n}\n\n/**\n * Version-coupled rendering backend lifecycle used by official integrations.\n *\n * @see {@link PibblBackendToken}\n * @see {@link PibblBackendFrameInput}\n * @see {@link PibblBackendFrame}\n * @see {@link PibblBackendPrimitiveInput}\n * @see {@link PibblNodeInput}\n * @see {@link PibblBackendMountOptions}\n */\nexport interface PibblBackendDriver<E> {\n  /** Identity token distinguishing this backend driver. See {@link PibblBackendToken}. */\n  readonly token: PibblBackendToken;\n  /** Name identifying this backend, emitter, or parameter. See {@link PibblBackendDriver}. */\n  readonly name: string;\n  /**\n   * Begins backend work for one shared scheduler frame. See {@link PibblBackendFrame}.\n   * @param input - Root surface, timestamp, and logical dimensions for this render. See\n   * {@link PibblBackendFrameInput} .\n   * @returns Frame state, or undefined when no frame should be rendered. See\n   * {@link PibblBackendFrame} .\n   */\n  beginFrame(input: PibblBackendFrameInput): PibblBackendFrame<E> | undefined;\n  /**\n   * Enters a component's backend evaluation scope. See {@link PibblBackendDriver}.\n   * @param frame - Frame whose component environment should become active. See\n   * {@link PibblBackendFrame} .\n   * @returns A cleanup function restoring the previous environment.\n   */\n  enterComponent(frame: PibblBackendFrame<E>): () => void;\n  /**\n   * Runs a primitive's drawing program in the current backend frame. See {@link PibblBackendDriver}\n   * .\n   * @param frame - Active backend frame. See {@link PibblBackendFrame}.\n   * @param input - Primitive descriptor and resolved rendering inputs. See\n   * {@link PibblBackendPrimitiveInput} .\n   * @param runProgram - Runtime callback used to invoke the primitive program. See\n   * {@link PibblNodeInput} .\n   */\n  runPrimitive(\n    frame: PibblBackendFrame<E>,\n    input: PibblBackendPrimitiveInput,\n    runProgram: (invoke: () => PibblNodeInput | void) => void,\n  ): void;\n  /**\n   * Completes the backend frame and its pending composition work. See {@link PibblBackendDriver}.\n   * @param frame - Frame returned by beginFrame. See {@link PibblBackendFrame}.\n   * @param success - Whether traversal completed successfully.\n   */\n  finishFrame(frame: PibblBackendFrame<E>, success: boolean): void;\n  /** Releases resources owned by this mounted object. See {@link PibblBackendDriver}. */\n  dispose(): void;\n}\n\n/**\n * Canvas, configuration, and ownership inputs used to create a backend mount.\n *\n * @see {@link Canvas}\n * @see {@link PibblBackendDriver}\n * @see {@link mountBackendPibbl}\n */\nexport interface PibblBackendMountOptions<E> {\n  /** Owning parent runtime instance. See {@link Canvas}. */\n  readonly parent: Canvas;\n  /** Canvas width in logical units. See {@link PibblBackendMountOptions}. */\n  readonly logicalWidth: number;\n  /** Canvas height in logical units. See {@link PibblBackendMountOptions}. */\n  readonly logicalHeight: number;\n  /** Backend driver responsible for this mount. See {@link PibblBackendDriver}. */\n  readonly driver: PibblBackendDriver<E>;\n}\n\n/**\n * Backend target registration options with logical interaction geometry.\n *\n * @see {@link useBackendEventTarget}\n */\nexport interface PibblBackendEventTargetOptions extends PibblEventFocusOptions {\n  /**\n   * Cursor shown while this target owns pointer presentation. See\n   * {@link PibblBackendEventTargetOptions}.\n   */\n  readonly cursor?: string;\n  /** Defers backend-owned focus geometry until its visual generation commits. */\n  readonly deferKeyboardNavigationGeometry?: boolean;\n}\n\n/**\n * Context supplied when resolving nested content through a backend.\n *\n * @see {@link PibblBackendMount}\n * @see {@link PibblHitTestOutput}\n * @see {@link registerNestedInteractionResolver}\n */\nexport interface PibblNestedResolverInput {\n  /** Nested child content to resolve. See {@link PibblBackendMount}. */\n  readonly child: PibblBackendMount;\n  /** Logical region constraining the content or query. See {@link PibblNestedResolverInput}. */\n  readonly bounds: Path2D;\n  /** Whether this content participates in pointer targeting. See {@link PibblNestedResolverInput}. */\n  readonly pointerEvents: 'auto' | 'none';\n  /**\n   * Resolves nested content in the current local coordinate system. See\n   * {@link PibblNestedResolverInput}.\n   * @param localX - Horizontal position in resolver-local coordinates.\n   * @param localY - Vertical position in resolver-local coordinates.\n   * @param output - Mutable hit-test result to populate. See {@link PibblHitTestOutput}.\n   */\n  resolveLocal(localX: number, localY: number, output: PibblHitTestOutput): void;\n}\n\n/** @internal */\nexport function backendMismatchError(\n  componentName: string,\n  required: PibblBackendToken,\n  active: PibblBackendDriver<unknown>,\n  source?: PibblElementSource,\n): Error {\n  const requiredName = getBackendTokenName(required);\n  const prefix = `${componentName} requires the ${requiredName} backend and ` +\n    `cannot render in the ${active.name} root.`;\n  return new Error(withJSXSource(prefix, source));\n}\n\nfunction withJSXSource(message: string, source?: PibblElementSource): string {\n  return source ?\n      `${message} JSX source: ${source.fileName}:${source.lineNumber}:${source.columnNumber}.` :\n    message;\n}\n\nexport type { PibblEventHandlers };\n"],
-  "mappings": "AAmCA,MAAM,eAAe,oBAAI,QAAmC;AAUrD,SAAS,mBAAmB,MAAiC;AAClE,MAAI,CAAC,KAAK,KAAK,GAAG;AAChB,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACzD;AACA,QAAM,QAAQ,OAAO,OAAO,CAAC,CAAC;AAC9B,eAAa,IAAI,OAAO,IAAI;AAC5B,SAAO;AACT;AAGO,SAAS,oBAAoB,OAAkC;AACpE,SAAO,aAAa,IAAI,KAAK,KAAK;AACpC;AAqTO,SAAS,qBACd,eACA,UACA,QACA,QACO;AACP,QAAM,eAAe,oBAAoB,QAAQ;AACjD,QAAM,SAAS,GAAG,aAAa,iBAAiB,YAAY,qCAClC,OAAO,IAAI;AACrC,SAAO,IAAI,MAAM,cAAc,QAAQ,MAAM,CAAC;AAChD;AAEA,SAAS,cAAc,SAAiB,QAAqC;AAC3E,SAAO,SACH,GAAG,OAAO,gBAAgB,OAAO,QAAQ,IAAI,OAAO,UAAU,IAAI,OAAO,YAAY,MACvF;AACJ;",
+  "sourcesContent": ["import type { registerNestedInteractionResolver, useBackendEventTarget } from '../../internal.js';\nimport type { mountBackendPibbl } from '../mount-pibbl.js';\nimport type { defineBackendPrimitive } from '../define-primitive.js';\nimport type { PibblElementSource } from '../element/metadata.js';\nimport type { PibblNode, PibblNodeInput } from '../element/types.js';\nimport type { PibblHitTestOutput } from '../events/paint-entry.js';\nimport type { PibblEventFocusOptions, PibblEventHandlers } from '../events/types.js';\nimport type {\n  MeasureInput,\n  IntrinsicMeasureInput,\n  IntrinsicSizesResult,\n  BaselineMeasureInput,\n  BaselinesResult,\n  MeasureResult,\n  NormalizedStyle,\n  PreservedSignalPropKey,\n  PrimitiveProgramProps,\n  ResolvedStyle,\n  SpecifiedStyle,\n  StyleResolutionContext,\n  SystemStyle,\n  Canvas,\n  RenderingContext2D,\n} from '../types.js';\nimport type { RenderTargetSnapshot } from '../render-target.js';\n\ndeclare const PIBBL_BACKEND_TOKEN: unique symbol;\n\n/**\n * Opaque identity for one official Pibbl rendering backend.\n *\n * @see {@link createBackendToken}\n * @see {@link PibblBackendDriver}\n * @see {@link PibblBackendPrimitiveDefinition}\n */\nexport interface PibblBackendToken {\n  readonly [PIBBL_BACKEND_TOKEN]: true;\n}\n\nconst backendNames = new WeakMap<PibblBackendToken, string>();\n\n/**\n * Creates a package-private backend identity for an official Pibbl renderer.\n *\n * @param name - Diagnostic name identifying the backend.\n * @returns A unique backend identity token. See {@link PibblBackendToken}.\n *\n * @see {@link PibblBackendToken}\n */\nexport function createBackendToken(name: string): PibblBackendToken {\n  if (!name.trim()) {\n    throw new Error('Pibbl backend names must be nonempty.');\n  }\n  const token = Object.freeze({}) as PibblBackendToken;\n  backendNames.set(token, name);\n  return token;\n}\n\n/** @internal Used only for diagnostics and dispatch inside core. */\nexport function getBackendTokenName(token: PibblBackendToken): string {\n  return backendNames.get(token) ?? 'unknown';\n}\n\n/**\n * Executable primitive rendering program recognized by the backend.\n *\n * @param props - Resolved non-style component inputs. See {@link PrimitiveProgramProps}.\n * @param style - Resolved primitive style. See {@link ResolvedStyle}.\n * @param environment - Backend environment for the active frame.\n * @returns Child nodes to traverse, or no children. See {@link PibblNodeInput}.\n *\n * @see {@link SystemStyle}\n * @see {@link PrimitiveProgramProps}\n * @see {@link ResolvedStyle}\n * @see {@link PibblNodeInput}\n * @see {@link PibblBackendPrimitiveDefinition}\n * @see {@link defineBackendPrimitive}\n */\nexport type PibblBackendPrimitiveProgram<\n  P = any,\n  R extends SystemStyle = SystemStyle,\n  E = any,\n> = (\n  props: Readonly<PrimitiveProgramProps<P>>,\n  style: ResolvedStyle<R>,\n  environment: E,\n) => PibblNodeInput | void;\n\n/**\n * Rendering, style, and measurement definition of a backend primitive.\n *\n * @see {@link SystemStyle}\n * @see {@link PibblBackendToken}\n * @see {@link PibblBackendPrimitiveProgram}\n * @see {@link SpecifiedStyle}\n * @see {@link NormalizedStyle}\n * @see {@link StyleResolutionContext}\n * @see {@link ResolvedStyle}\n * @see {@link MeasureInput}\n * @see {@link PrimitiveProgramProps}\n * @see {@link MeasureResult}\n * @see {@link PibblBackendPrimitiveInput}\n */\nexport interface PibblBackendPrimitiveDefinition<\n  P = any,\n  S extends SystemStyle = SystemStyle,\n  N extends SystemStyle = S,\n  R extends SystemStyle = N,\n  E = any,\n> {\n  /** Identity of the backend that accepts this primitive. See {@link PibblBackendToken}. */\n  readonly backend: PibblBackendToken;\n  /**\n   * Names props whose signal identity is preserved for the primitive program. See\n   * {@link PreservedSignalPropKey}.\n   */\n  readonly preserveSignalProps?: readonly PreservedSignalPropKey<P>[];\n  /**\n   * Declares how the primitive receives and resolves its children. See\n   * {@link PibblBackendPrimitiveDefinition}.\n   */\n  readonly childInput?: 'structural' | 'text';\n  /** Executable primitive program used by the backend. See {@link PibblBackendPrimitiveProgram}. */\n  readonly program: PibblBackendPrimitiveProgram<P, R, E>;\n  /**\n   * Applies primitive defaults and shorthand normalization before layout resolution. See\n   * {@link SpecifiedStyle}, {@link NormalizedStyle}.\n   * @param style - Specified style values before normalization. See {@link SpecifiedStyle}.\n   * @returns Normalized style with the primitive's shorthand and defaults applied. See\n   * {@link NormalizedStyle} .\n   */\n  readonly normalizeStyle?: (style: SpecifiedStyle<S>) => NormalizedStyle<N>;\n  /**\n   * Resolves normalized style using the current layout context. See {@link NormalizedStyle},\n   * {@link StyleResolutionContext}, {@link ResolvedStyle}.\n   * @param style - Normalized style to resolve. See {@link NormalizedStyle}.\n   * @param context - Layout and diagnostic context for resolution. See\n   * {@link StyleResolutionContext} .\n   * @returns Resolved style ready for rendering. See {@link ResolvedStyle}.\n   */\n  readonly resolveStyle?: (\n    style: NormalizedStyle<N>,\n    context: Readonly<StyleResolutionContext>,\n  ) => ResolvedStyle<R>;\n  /**\n   * Measures declared primitive inputs without painting or retaining draw commands. See\n   * {@link MeasureInput}, {@link PrimitiveProgramProps}, {@link MeasureResult}.\n   * @param input - Props, normalized style, constraints, and nested measurement services. See\n   * {@link MeasureInput} , {@link PrimitiveProgramProps} .\n   * @returns Measured dimensions or an unsupported measurement result. See {@link MeasureResult}.\n   */\n  readonly measure?: (input: MeasureInput<PrimitiveProgramProps<P>, N>) => MeasureResult;\n  /**\n   * Pure intrinsic content provider. See {@link IntrinsicMeasureInput}.\n   * @param input - Resolved inputs and tagged availability. See {@link IntrinsicMeasureInput}.\n   * @returns Paired content sizes or unsupported. See {@link IntrinsicSizesResult}.\n   */\n  readonly measureIntrinsic?: (input: IntrinsicMeasureInput<PrimitiveProgramProps<P>, N>) => IntrinsicSizesResult;\n  /**\n   * Pure first/last baseline provider at the final content allocation.\n   * @param input - Resolved inputs and final local allocation. See {@link BaselineMeasureInput}.\n   * @returns Finite ordered offsets or unsupported. See {@link BaselinesResult}.\n   */\n  readonly measureBaselines?: (input: BaselineMeasureInput<PrimitiveProgramProps<P>, N>) => BaselinesResult;\n}\n\n/**\n * Inputs used to begin a backend frame.\n *\n * @see {@link Canvas}\n * @see {@link PibblBackendDriver}\n */\nexport interface PibblBackendFrameInput {\n  /** Canvas surface associated with this resource or mount. See {@link Canvas}. */\n  readonly canvas: Canvas;\n  /** Canvas width in logical units. See {@link PibblBackendFrameInput}. */\n  readonly logicalWidth: number;\n  /** Canvas height in logical units. See {@link PibblBackendFrameInput}. */\n  readonly logicalHeight: number;\n  /** Width of the backing raster in physical pixels. See {@link PibblBackendFrameInput}. */\n  readonly backingWidth: number;\n  /** Height of the backing raster in physical pixels. See {@link PibblBackendFrameInput}. */\n  readonly backingHeight: number;\n  /** Timestamp associated with this render frame. See {@link PibblBackendFrameInput}. */\n  readonly renderTimestamp: number;\n}\n\n/**\n * The backend rendering context for one scheduled frame.\n *\n * @see {@link RenderingContext2D}\n * @see {@link PibblBackendDriver}\n */\nexport interface PibblBackendFrame<E> {\n  /** Backend environment used while evaluating the frame. See {@link PibblBackendFrame}. */\n  readonly environment: E;\n  /** Canvas 2D context used for the current frame. See {@link RenderingContext2D}. */\n  readonly context2D?: RenderingContext2D;\n  /** Current drawing target owned by the backend frame. See {@link RenderTargetSnapshot}. */\n  readonly renderTarget?: RenderTargetSnapshot;\n  /**\n   * World transform establishing the backend frame's logical coordinate basis. See\n   * {@link PibblBackendFrame}.\n   */\n  readonly worldBaseTransform?: DOMMatrix;\n}\n\n/**\n * Resolved inputs delivered to a backend primitive program.\n *\n * @see {@link PibblElementSource}\n * @see {@link PibblBackendPrimitiveDefinition}\n * @see {@link PibblBackendDriver}\n */\nexport interface PibblBackendPrimitiveInput {\n  /** Component name retained for diagnostics. See {@link PibblBackendPrimitiveInput}. */\n  readonly componentName: string;\n  /** Authoring source location retained for diagnostics. See {@link PibblElementSource}. */\n  readonly source?: PibblElementSource;\n  /**\n   * Primitive definition used to resolve and render the supplied inputs. See\n   * {@link PibblBackendPrimitiveDefinition}.\n   */\n  readonly definition: PibblBackendPrimitiveDefinition;\n  /**\n   * Component props supplied to evaluation or measurement. See {@link PibblBackendPrimitiveInput}.\n   */\n  readonly props: Readonly<Record<PropertyKey, unknown>>;\n  /** Declared presentation and layout properties. See {@link PibblBackendPrimitiveInput}. */\n  readonly style: Readonly<Record<PropertyKey, unknown>>;\n  /**\n   * Transform applied to the primitive's presented Canvas geometry. See\n   * {@link PibblBackendPrimitiveInput}.\n   */\n  readonly presentationTransform2D?: DOMMatrix;\n}\n\n/**\n * A mounted backend's frame execution and cleanup operations.\n *\n * @see {@link Canvas}\n * @see {@link PibblNode}\n * @see {@link PibblNestedResolverInput}\n * @see {@link mountBackendPibbl}\n */\nexport interface PibblBackendMount {\n  /** Canvas surface associated with this resource or mount. See {@link Canvas}. */\n  readonly canvas: Canvas;\n  /**\n   * Updates the backend surface to the supplied dimensions. See {@link PibblBackendMount}.\n   * @param logicalWidth - New logical viewport width.\n   * @param logicalHeight - New logical viewport height.\n   */\n  resize(logicalWidth: number, logicalHeight: number): void;\n  /**\n   * Renders the current data or resources using the supplied context. See {@link PibblBackendMount}\n   * .\n   * @param root - Node tree to render. See {@link PibblNode}.\n   * @param timestamp - Frame timestamp in milliseconds.\n   */\n  render(root: PibblNode, timestamp: number): void;\n  /**\n   * Requests future work from the owning scheduler. See {@link PibblBackendMount}.\n   * @param updateParents - Whether ancestor compositions also need to be scheduled.\n   */\n  requestFrame(updateParents: boolean): void;\n  /** Releases resources owned by this mounted object. See {@link PibblBackendMount}. */\n  dispose(): void;\n}\n\n/**\n * Version-coupled rendering backend lifecycle used by official integrations.\n *\n * @see {@link PibblBackendToken}\n * @see {@link PibblBackendFrameInput}\n * @see {@link PibblBackendFrame}\n * @see {@link PibblBackendPrimitiveInput}\n * @see {@link PibblNodeInput}\n * @see {@link PibblBackendMountOptions}\n */\nexport interface PibblBackendDriver<E> {\n  /** Identity token distinguishing this backend driver. See {@link PibblBackendToken}. */\n  readonly token: PibblBackendToken;\n  /** Name identifying this backend, emitter, or parameter. See {@link PibblBackendDriver}. */\n  readonly name: string;\n  /**\n   * Begins backend work for one shared scheduler frame. See {@link PibblBackendFrame}.\n   * @param input - Root surface, timestamp, and logical dimensions for this render. See\n   * {@link PibblBackendFrameInput} .\n   * @returns Frame state, or undefined when no frame should be rendered. See\n   * {@link PibblBackendFrame} .\n   */\n  beginFrame(input: PibblBackendFrameInput): PibblBackendFrame<E> | undefined;\n  /**\n   * Enters a component's backend evaluation scope. See {@link PibblBackendDriver}.\n   * @param frame - Frame whose component environment should become active. See\n   * {@link PibblBackendFrame} .\n   * @returns A cleanup function restoring the previous environment.\n   */\n  enterComponent(frame: PibblBackendFrame<E>): () => void;\n  /**\n   * Runs a primitive's drawing program in the current backend frame. See {@link PibblBackendDriver}\n   * .\n   * @param frame - Active backend frame. See {@link PibblBackendFrame}.\n   * @param input - Primitive descriptor and resolved rendering inputs. See\n   * {@link PibblBackendPrimitiveInput} .\n   * @param runProgram - Runtime callback used to invoke the primitive program. See\n   * {@link PibblNodeInput} .\n   */\n  runPrimitive(\n    frame: PibblBackendFrame<E>,\n    input: PibblBackendPrimitiveInput,\n    runProgram: (invoke: () => PibblNodeInput | void) => void,\n  ): void;\n  /**\n   * Completes the backend frame and its pending composition work. See {@link PibblBackendDriver}.\n   * @param frame - Frame returned by beginFrame. See {@link PibblBackendFrame}.\n   * @param success - Whether traversal completed successfully.\n   */\n  finishFrame(frame: PibblBackendFrame<E>, success: boolean): void;\n  /** Releases resources owned by this mounted object. See {@link PibblBackendDriver}. */\n  dispose(): void;\n}\n\n/**\n * Canvas, configuration, and ownership inputs used to create a backend mount.\n *\n * @see {@link Canvas}\n * @see {@link PibblBackendDriver}\n * @see {@link mountBackendPibbl}\n */\nexport interface PibblBackendMountOptions<E> {\n  /** Owning parent runtime instance. See {@link Canvas}. */\n  readonly parent: Canvas;\n  /** Canvas width in logical units. See {@link PibblBackendMountOptions}. */\n  readonly logicalWidth: number;\n  /** Canvas height in logical units. See {@link PibblBackendMountOptions}. */\n  readonly logicalHeight: number;\n  /** Backend driver responsible for this mount. See {@link PibblBackendDriver}. */\n  readonly driver: PibblBackendDriver<E>;\n}\n\n/**\n * Backend target registration options with logical interaction geometry.\n *\n * @see {@link useBackendEventTarget}\n */\nexport interface PibblBackendEventTargetOptions extends PibblEventFocusOptions {\n  /**\n   * Cursor shown while this target owns pointer presentation. See\n   * {@link PibblBackendEventTargetOptions}.\n   */\n  readonly cursor?: string;\n  /** Defers backend-owned focus geometry until its visual generation commits. */\n  readonly deferKeyboardNavigationGeometry?: boolean;\n}\n\n/**\n * Context supplied when resolving nested content through a backend.\n *\n * @see {@link PibblBackendMount}\n * @see {@link PibblHitTestOutput}\n * @see {@link registerNestedInteractionResolver}\n */\nexport interface PibblNestedResolverInput {\n  /** Nested child content to resolve. See {@link PibblBackendMount}. */\n  readonly child: PibblBackendMount;\n  /** Logical region constraining the content or query. See {@link PibblNestedResolverInput}. */\n  readonly bounds: Path2D;\n  /** Whether this content participates in pointer targeting. See {@link PibblNestedResolverInput}. */\n  readonly pointerEvents: 'auto' | 'none';\n  /**\n   * Resolves nested content in the current local coordinate system. See\n   * {@link PibblNestedResolverInput}.\n   * @param localX - Horizontal position in resolver-local coordinates.\n   * @param localY - Vertical position in resolver-local coordinates.\n   * @param output - Mutable hit-test result to populate. See {@link PibblHitTestOutput}.\n   */\n  resolveLocal(localX: number, localY: number, output: PibblHitTestOutput): void;\n}\n\n/** @internal */\nexport function backendMismatchError(\n  componentName: string,\n  required: PibblBackendToken,\n  active: PibblBackendDriver<unknown>,\n  source?: PibblElementSource,\n): Error {\n  const requiredName = getBackendTokenName(required);\n  const prefix = `${componentName} requires the ${requiredName} backend and ` +\n    `cannot render in the ${active.name} root.`;\n  return new Error(withJSXSource(prefix, source));\n}\n\nfunction withJSXSource(message: string, source?: PibblElementSource): string {\n  return source ?\n      `${message} JSX source: ${source.fileName}:${source.lineNumber}:${source.columnNumber}.` :\n    message;\n}\n\nexport type { PibblEventHandlers };\n"],
+  "mappings": "AAuCA,MAAM,eAAe,oBAAI,QAAmC;AAUrD,SAAS,mBAAmB,MAAiC;AAClE,MAAI,CAAC,KAAK,KAAK,GAAG;AAChB,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACzD;AACA,QAAM,QAAQ,OAAO,OAAO,CAAC,CAAC;AAC9B,eAAa,IAAI,OAAO,IAAI;AAC5B,SAAO;AACT;AAGO,SAAS,oBAAoB,OAAkC;AACpE,SAAO,aAAa,IAAI,KAAK,KAAK;AACpC;AAiUO,SAAS,qBACd,eACA,UACA,QACA,QACO;AACP,QAAM,eAAe,oBAAoB,QAAQ;AACjD,QAAM,SAAS,GAAG,aAAa,iBAAiB,YAAY,qCAClC,OAAO,IAAI;AACrC,SAAO,IAAI,MAAM,cAAc,QAAQ,MAAM,CAAC;AAChD;AAEA,SAAS,cAAc,SAAiB,QAAqC;AAC3E,SAAO,SACH,GAAG,OAAO,gBAAgB,OAAO,QAAQ,IAAI,OAAO,UAAU,IAAI,OAAO,YAAY,MACvF;AACJ;",
   "names": []
 }

package/dist/lib/components/arc-geometry.js

@@ -10,7 +10,8 @@ function arcBounds(cx, cy, radius, sweep) {
     };
   }
   const angles = [sweep.startAngle, sweep.endAngle];
-  for (const cardinal of [0, Math.PI / 2, Math.PI, Math.PI * 1.5]) {
+  for (let cardinalIndex = 0; cardinalIndex < 4; cardinalIndex++) {
+    const cardinal = cardinalIndex * (Math.PI / 2);
     if (containsAngle(sweep, cardinal)) angles.push(cardinal);
   }
   const xs = angles.map((angle) => cx + radius * Math.cos(angle));

package/dist/lib/components/arc-geometry.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/arc-geometry.ts"],
-  "sourcesContent": ["import type { LayoutBox } from \"../layout/types.js\";\nimport type { CircularSweep } from \"../geometry/circular-sweep.js\";\n\nconst fullTurn = Math.PI * 2;\n\nexport function arcBounds(\n  cx: number,\n  cy: number,\n  radius: number,\n  sweep: Readonly<CircularSweep>,\n): LayoutBox | undefined {\n  if (radius <= 0 || sweep.sweep === 0) return undefined;\n  if (sweep.fullCircle) {\n    return {\n      x: cx - radius,\n      y: cy - radius,\n      width: radius * 2,\n      height: radius * 2,\n    };\n  }\n\n  const angles = [sweep.startAngle, sweep.endAngle];\n  for (const cardinal of [0, Math.PI / 2, Math.PI, Math.PI * 1.5]) {\n    if (containsAngle(sweep, cardinal)) angles.push(cardinal);\n  }\n  const xs = angles.map((angle) => cx + radius * Math.cos(angle));\n  const ys = angles.map((angle) => cy + radius * Math.sin(angle));\n  const left = Math.min(...xs);\n  const right = Math.max(...xs);\n  const top = Math.min(...ys);\n  const bottom = Math.max(...ys);\n  return { x: left, y: top, width: right - left, height: bottom - top };\n}\n\nexport function wedgeBounds(\n  cx: number,\n  cy: number,\n  radius: number,\n  sweep: Readonly<CircularSweep>,\n): LayoutBox | undefined {\n  const bounds = arcBounds(cx, cy, radius, sweep);\n  if (!bounds || sweep.fullCircle) return bounds;\n  const left = Math.min(bounds.x, cx);\n  const right = Math.max(bounds.x + bounds.width, cx);\n  const top = Math.min(bounds.y, cy);\n  const bottom = Math.max(bounds.y + bounds.height, cy);\n  return { x: left, y: top, width: right - left, height: bottom - top };\n}\n\nfunction containsAngle(sweep: Readonly<CircularSweep>, angle: number): boolean {\n  const distance = sweep.counterclockwise\n    ? positiveModulo(sweep.startAngle - angle, fullTurn)\n    : positiveModulo(angle - sweep.startAngle, fullTurn);\n  return distance <= Math.abs(sweep.sweep);\n}\n\nfunction positiveModulo(value: number, divisor: number): number {\n  const result = value % divisor;\n  if (result === 0) return 0;\n  return result < 0 ? result + divisor : result;\n}\n"],
-  "mappings": "AAGA,MAAM,WAAW,KAAK,KAAK;AAEpB,SAAS,UACd,IACA,IACA,QACA,OACuB;AACvB,MAAI,UAAU,KAAK,MAAM,UAAU,EAAG,QAAO;AAC7C,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,OAAO,SAAS;AAAA,MAChB,QAAQ,SAAS;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,MAAM,YAAY,MAAM,QAAQ;AAChD,aAAW,YAAY,CAAC,GAAG,KAAK,KAAK,GAAG,KAAK,IAAI,KAAK,KAAK,GAAG,GAAG;AAC/D,QAAI,cAAc,OAAO,QAAQ,EAAG,QAAO,KAAK,QAAQ;AAAA,EAC1D;AACA,QAAM,KAAK,OAAO,IAAI,CAAC,UAAU,KAAK,SAAS,KAAK,IAAI,KAAK,CAAC;AAC9D,QAAM,KAAK,OAAO,IAAI,CAAC,UAAU,KAAK,SAAS,KAAK,IAAI,KAAK,CAAC;AAC9D,QAAM,OAAO,KAAK,IAAI,GAAG,EAAE;AAC3B,QAAM,QAAQ,KAAK,IAAI,GAAG,EAAE;AAC5B,QAAM,MAAM,KAAK,IAAI,GAAG,EAAE;AAC1B,QAAM,SAAS,KAAK,IAAI,GAAG,EAAE;AAC7B,SAAO,EAAE,GAAG,MAAM,GAAG,KAAK,OAAO,QAAQ,MAAM,QAAQ,SAAS,IAAI;AACtE;AAEO,SAAS,YACd,IACA,IACA,QACA,OACuB;AACvB,QAAM,SAAS,UAAU,IAAI,IAAI,QAAQ,KAAK;AAC9C,MAAI,CAAC,UAAU,MAAM,WAAY,QAAO;AACxC,QAAM,OAAO,KAAK,IAAI,OAAO,GAAG,EAAE;AAClC,QAAM,QAAQ,KAAK,IAAI,OAAO,IAAI,OAAO,OAAO,EAAE;AAClD,QAAM,MAAM,KAAK,IAAI,OAAO,GAAG,EAAE;AACjC,QAAM,SAAS,KAAK,IAAI,OAAO,IAAI,OAAO,QAAQ,EAAE;AACpD,SAAO,EAAE,GAAG,MAAM,GAAG,KAAK,OAAO,QAAQ,MAAM,QAAQ,SAAS,IAAI;AACtE;AAEA,SAAS,cAAc,OAAgC,OAAwB;AAC7E,QAAM,WAAW,MAAM,mBACnB,eAAe,MAAM,aAAa,OAAO,QAAQ,IACjD,eAAe,QAAQ,MAAM,YAAY,QAAQ;AACrD,SAAO,YAAY,KAAK,IAAI,MAAM,KAAK;AACzC;AAEA,SAAS,eAAe,OAAe,SAAyB;AAC9D,QAAM,SAAS,QAAQ;AACvB,MAAI,WAAW,EAAG,QAAO;AACzB,SAAO,SAAS,IAAI,SAAS,UAAU;AACzC;",
+  "sourcesContent": ["import type { LayoutBox } from \"../layout/types.js\";\nimport type { CircularSweep } from \"../geometry/circular-sweep.js\";\n\nconst fullTurn = Math.PI * 2;\n\nexport function arcBounds(\n  cx: number,\n  cy: number,\n  radius: number,\n  sweep: Readonly<CircularSweep>,\n): LayoutBox | undefined {\n  if (radius <= 0 || sweep.sweep === 0) return undefined;\n  if (sweep.fullCircle) {\n    return {\n      x: cx - radius,\n      y: cy - radius,\n      width: radius * 2,\n      height: radius * 2,\n    };\n  }\n\n  const angles = [sweep.startAngle, sweep.endAngle];\n  for (let cardinalIndex = 0; cardinalIndex < 4; cardinalIndex++) {\n    const cardinal = cardinalIndex * (Math.PI / 2);\n    if (containsAngle(sweep, cardinal)) angles.push(cardinal);\n  }\n  const xs = angles.map((angle) => cx + radius * Math.cos(angle));\n  const ys = angles.map((angle) => cy + radius * Math.sin(angle));\n  const left = Math.min(...xs);\n  const right = Math.max(...xs);\n  const top = Math.min(...ys);\n  const bottom = Math.max(...ys);\n  return { x: left, y: top, width: right - left, height: bottom - top };\n}\n\nexport function wedgeBounds(\n  cx: number,\n  cy: number,\n  radius: number,\n  sweep: Readonly<CircularSweep>,\n): LayoutBox | undefined {\n  const bounds = arcBounds(cx, cy, radius, sweep);\n  if (!bounds || sweep.fullCircle) return bounds;\n  const left = Math.min(bounds.x, cx);\n  const right = Math.max(bounds.x + bounds.width, cx);\n  const top = Math.min(bounds.y, cy);\n  const bottom = Math.max(bounds.y + bounds.height, cy);\n  return { x: left, y: top, width: right - left, height: bottom - top };\n}\n\nfunction containsAngle(sweep: Readonly<CircularSweep>, angle: number): boolean {\n  const distance = sweep.counterclockwise\n    ? positiveModulo(sweep.startAngle - angle, fullTurn)\n    : positiveModulo(angle - sweep.startAngle, fullTurn);\n  return distance <= Math.abs(sweep.sweep);\n}\n\nfunction positiveModulo(value: number, divisor: number): number {\n  const result = value % divisor;\n  if (result === 0) return 0;\n  return result < 0 ? result + divisor : result;\n}\n"],
+  "mappings": "AAGA,MAAM,WAAW,KAAK,KAAK;AAEpB,SAAS,UACd,IACA,IACA,QACA,OACuB;AACvB,MAAI,UAAU,KAAK,MAAM,UAAU,EAAG,QAAO;AAC7C,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,OAAO,SAAS;AAAA,MAChB,QAAQ,SAAS;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,MAAM,YAAY,MAAM,QAAQ;AAChD,WAAS,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB;AAC9D,UAAM,WAAW,iBAAiB,KAAK,KAAK;AAC5C,QAAI,cAAc,OAAO,QAAQ,EAAG,QAAO,KAAK,QAAQ;AAAA,EAC1D;AACA,QAAM,KAAK,OAAO,IAAI,CAAC,UAAU,KAAK,SAAS,KAAK,IAAI,KAAK,CAAC;AAC9D,QAAM,KAAK,OAAO,IAAI,CAAC,UAAU,KAAK,SAAS,KAAK,IAAI,KAAK,CAAC;AAC9D,QAAM,OAAO,KAAK,IAAI,GAAG,EAAE;AAC3B,QAAM,QAAQ,KAAK,IAAI,GAAG,EAAE;AAC5B,QAAM,MAAM,KAAK,IAAI,GAAG,EAAE;AAC1B,QAAM,SAAS,KAAK,IAAI,GAAG,EAAE;AAC7B,SAAO,EAAE,GAAG,MAAM,GAAG,KAAK,OAAO,QAAQ,MAAM,QAAQ,SAAS,IAAI;AACtE;AAEO,SAAS,YACd,IACA,IACA,QACA,OACuB;AACvB,QAAM,SAAS,UAAU,IAAI,IAAI,QAAQ,KAAK;AAC9C,MAAI,CAAC,UAAU,MAAM,WAAY,QAAO;AACxC,QAAM,OAAO,KAAK,IAAI,OAAO,GAAG,EAAE;AAClC,QAAM,QAAQ,KAAK,IAAI,OAAO,IAAI,OAAO,OAAO,EAAE;AAClD,QAAM,MAAM,KAAK,IAAI,OAAO,GAAG,EAAE;AACjC,QAAM,SAAS,KAAK,IAAI,OAAO,IAAI,OAAO,QAAQ,EAAE;AACpD,SAAO,EAAE,GAAG,MAAM,GAAG,KAAK,OAAO,QAAQ,MAAM,QAAQ,SAAS,IAAI;AACtE;AAEA,SAAS,cAAc,OAAgC,OAAwB;AAC7E,QAAM,WAAW,MAAM,mBACnB,eAAe,MAAM,aAAa,OAAO,QAAQ,IACjD,eAAe,QAAQ,MAAM,YAAY,QAAQ;AACrD,SAAO,YAAY,KAAK,IAAI,MAAM,KAAK;AACzC;AAEA,SAAS,eAAe,OAAe,SAAyB;AAC9D,QAAM,SAAS,QAAQ;AACvB,MAAI,WAAW,EAAG,QAAO;AACzB,SAAO,SAAS,IAAI,SAAS,UAAU;AACzC;",
   "names": []
 }

package/dist/lib/components/g.js

@@ -1,3 +1,4 @@
+import { registerContentsTransform } from "../layout/participation.js";
 import { definePrimitive } from "../define-primitive.js";
 import {
   createGroupTransform,
@@ -18,6 +19,7 @@ const Group = definePrimitive(renderGroup, {
 setPrimitivePresentation(Group, (style) => ({
   transform: createGroupTransform(style)
 }));
+registerContentsTransform(Group);
 export {
   Group
 };

package/dist/lib/components/g.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/g.ts"],
-  "sourcesContent": ["import type { PibblDragHandleStyle } from '../manipulation/handles.js';\nimport type { HtmlBoxStyle } from '../html/types.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { PibblNodeInput, SystemStyle } from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport {\n  createGroupTransform,\n  setPrimitivePresentation,\n} from '../primitive-presentation.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from './structural-events.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\n\n/**\n * Authored inputs for Group, including the declared data and presentation options.\n *\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link PibblNodeInput}\n * @see {@link Group}\n */\nexport interface GroupProps extends PibblStructuralEventProps, PibblPhysics2DPropExtension {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\n/**\n * Transforms, layout participation, and shared style properties for Group.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Group}\n * @see {@link PibblDragHandleStyle}\n * @see {@link HtmlBoxStyle}\n */\nexport interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyle {\n  /** Horizontal scale factor. See {@link GStyle}. */\n  scaleX?: number;\n  /** Vertical scale factor. See {@link GStyle}. */\n  scaleY?: number;\n  /** Clockwise rotation in degrees. */\n  rotationDegrees?: number;\n  /** Point around which the rotation is applied. See {@link GStyle}. */\n  rotationOrigin?: [number, number];\n  /** Horizontal translation in the current logical coordinate system. See {@link GStyle}. */\n  translateX?: number;\n  /** Vertical translation in the current logical coordinate system. See {@link GStyle}. */\n  translateY?: number;\n  /** Horizontal skew angle in degrees. */\n  skewX?: number;\n  /** Vertical skew angle in degrees. */\n  skewY?: number;\n}\n\ntype ResolvedGStyle = ResolvedDrawingStyle<GStyle>;\n\nfunction renderGroup(\n  props: GroupProps,\n) {\n  wireStructuralEvents(props);\n  return props.children;\n}\n\n/**\n * Describes a transformation group for JSX or createElement authoring.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link GroupProps}\n * @see {@link GStyle}\n */\nexport const Group = definePrimitive<\n  GroupProps,\n  GStyle,\n  GStyle,\n  ResolvedGStyle\n>(renderGroup, {\n  childInput: 'structural',\n  resolveStyle: style => stripLayoutParticipation(style) as ResolvedGStyle,\n});\n\nsetPrimitivePresentation<ResolvedGStyle>(Group, style => ({\n  transform: createGroupTransform(style),\n}));\n"],
-  "mappings": "AAEA,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC;AAAA,EAEE;AAAA,OACK;AAkDP,SAAS,YACP,OACA;AACA,uBAAqB,KAAK;AAC1B,SAAO,MAAM;AACf;AAYO,MAAM,QAAQ,gBAKnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc,WAAS,yBAAyB,KAAK;AACvD,CAAC;AAED,yBAAyC,OAAO,YAAU;AAAA,EACxD,WAAW,qBAAqB,KAAK;AACvC,EAAE;",
+  "sourcesContent": ["import { registerContentsTransform } from '../layout/participation.js';\nimport type { PibblDragHandleStyle } from '../manipulation/handles.js';\nimport type { HtmlBoxStyle } from '../html/types.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { PibblNodeInput, SystemStyle } from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport {\n  createGroupTransform,\n  setPrimitivePresentation,\n} from '../primitive-presentation.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from './structural-events.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\n\n/**\n * Authored inputs for Group, including the declared data and presentation options.\n *\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link PibblNodeInput}\n * @see {@link Group}\n */\nexport interface GroupProps extends PibblStructuralEventProps, PibblPhysics2DPropExtension {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\n/**\n * Transforms, layout participation, and shared style properties for Group.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Group}\n * @see {@link PibblDragHandleStyle}\n * @see {@link HtmlBoxStyle}\n */\nexport interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyle {\n  /** Horizontal scale factor. See {@link GStyle}. */\n  scaleX?: number;\n  /** Vertical scale factor. See {@link GStyle}. */\n  scaleY?: number;\n  /** Clockwise rotation in degrees. */\n  rotationDegrees?: number;\n  /** Point around which the rotation is applied. See {@link GStyle}. */\n  rotationOrigin?: [number, number];\n  /** Horizontal translation in the current logical coordinate system. See {@link GStyle}. */\n  translateX?: number;\n  /** Vertical translation in the current logical coordinate system. See {@link GStyle}. */\n  translateY?: number;\n  /** Horizontal skew angle in degrees. */\n  skewX?: number;\n  /** Vertical skew angle in degrees. */\n  skewY?: number;\n}\n\ntype ResolvedGStyle = ResolvedDrawingStyle<GStyle>;\n\nfunction renderGroup(\n  props: GroupProps,\n) {\n  wireStructuralEvents(props);\n  return props.children;\n}\n\n/**\n * Describes a transformation group for JSX or createElement authoring.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link GroupProps}\n * @see {@link GStyle}\n */\nexport const Group = definePrimitive<\n  GroupProps,\n  GStyle,\n  GStyle,\n  ResolvedGStyle\n>(renderGroup, {\n  childInput: 'structural',\n  resolveStyle: style => stripLayoutParticipation(style) as ResolvedGStyle,\n});\n\nsetPrimitivePresentation<ResolvedGStyle>(Group, style => ({\n  transform: createGroupTransform(style),\n}));\n\nregisterContentsTransform(Group);\n"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAG1C,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC;AAAA,EAEE;AAAA,OACK;AAkDP,SAAS,YACP,OACA;AACA,uBAAqB,KAAK;AAC1B,SAAO,MAAM;AACf;AAYO,MAAM,QAAQ,gBAKnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc,WAAS,yBAAyB,KAAK;AACvD,CAAC;AAED,yBAAyC,OAAO,YAAU;AAAA,EACxD,WAAW,qBAAqB,KAAK;AACvC,EAAE;AAEF,0BAA0B,KAAK;",
   "names": []
 }

package/dist/lib/components/html-box.js

@@ -13,7 +13,7 @@ function renderHtmlBox(props, style, ctx) {
   let slot = refs.refs[0];
   if (!slot || slot.disposed) {
     if (typeof props.mount !== "function") throw new TypeError("HtmlBox mount must be a function.");
-    slot = { owner, mount: props.mount, disposed: false, region: { identity: {}, owner, content: void 0, rootBounds: void 0, active: true } };
+    slot = { component: refs, owner, mount: props.mount, disposed: false, region: { identity: {}, owner, content: void 0, rootBounds: void 0, active: true } };
     const stable = slot;
     stable.region = { ...stable.region, onFocusSnapshot(snapshot) {
       queueMicrotask(() => {
@@ -27,6 +27,7 @@ function renderHtmlBox(props, style, ctx) {
   if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1) throw new RangeError("HtmlBox opacity must be between 0 and 1.");
   service.register({
     slot,
+    handlers: props,
     data: props.data,
     matrix: getCurrentWorldTransform(),
     clips: snapshotClips(GLOBAL_STATE.clippingStack),

package/dist/lib/components/html-box.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/html-box.ts"],
-  "sourcesContent": ["import type { HtmlMountCallback } from '../html/types.js';\nimport type { ResolvedDrawingStyle } from '../style/types.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { resolveBox } from '../layout/box.js';\nimport type { LayoutBox } from '../layout/types.js';\nimport { createGroupTransform, setPrimitivePresentation } from '../primitive-presentation.js';\nimport { getCurrentWorldTransform } from '../render-target.js';\nimport { registerOpaquePrimitiveProps } from '../element/metadata.js';\nimport { requireHtmlService, snapshotClips } from '../html/html-service.js';\nimport type { HtmlBoxProps, HtmlBoxSlot, HtmlBoxStyle } from '../html/types.js';\nimport type { PibblRenderResult, PrimitiveInput, RenderingContext2D } from '../types.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\n\ntype Resolved = ResolvedDrawingStyle<HtmlBoxStyle> & {\n  borderBox: Readonly<LayoutBox>; contentBox: Readonly<LayoutBox>; overflow: 'visible' | 'clip';\n};\n\nfunction renderHtmlBox(props: HtmlBoxProps<unknown>, style: Readonly<Resolved>, ctx: RenderingContext2D): void {\n  const refs = GLOBAL_STATE.componentRefs!;\n  const owner = GLOBAL_STATE.currentPibblInstance!;\n  const service = requireHtmlService(owner);\n  let slot = refs.refs[0] as HtmlBoxSlot | undefined;\n  if (!slot || slot.disposed) {\n    if (typeof props.mount !== 'function') throw new TypeError('HtmlBox mount must be a function.');\n    slot = { owner, mount: props.mount, disposed: false, region: { identity: {}, owner, content: undefined, rootBounds: undefined, active: true } };\n    const stable = slot;\n    stable.region = { ...stable.region, onFocusSnapshot(snapshot) {\n      queueMicrotask(() => { if (!stable.disposed) stable.callback?.(snapshot); });\n    } };\n    refs.refs[0] = slot;\n    refs.teardowns.add(() => service.release(stable));\n  }\n  const opacity = style.opacity ?? 1;\n  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1) throw new RangeError('HtmlBox opacity must be between 0 and 1.');\n  service.register({ slot, data: props.data, matrix: getCurrentWorldTransform(),\n    clips: snapshotClips(GLOBAL_STATE.clippingStack), border: style.borderBox, content: style.contentBox,\n    opacity: ctx.globalAlpha * opacity, interactive: props.pointerEvents !== 'none', overflow: style.overflow ?? 'clip', onFocusChange: props.onFocusChange });\n}\n\nconst primitive = definePrimitive<HtmlBoxProps<unknown>, HtmlBoxStyle, HtmlBoxStyle, Resolved>(renderHtmlBox, {\n  resolveStyle(style, context) {\n    const box = resolveBox({ ...style, width: style.width === undefined || style.width === 'auto' ? context.allocation.width : style.width,\n      height: style.height === undefined || style.height === 'auto' ? context.allocation.height : style.height }, context.constraints, { component: 'HtmlBox' });\n    return { ...stripLayoutParticipation(style), ...box, overflow: style.overflow ?? 'clip' } as Resolved;\n  },\n});\n\nregisterOpaquePrimitiveProps(primitive, ['data']);\nsetPrimitivePresentation<Resolved>(primitive, style => ({ transform: createGroupTransform(style) }));\n\ntype HtmlBoxInput<Props> = Omit<PrimitiveInput<HtmlBoxProps<Props>, HtmlBoxStyle>, 'data' | 'mount'> & Pick<HtmlBoxProps<Props>, 'data' | 'mount'>;\ntype HtmlBoxComponent = {\n  <Props>(props: HtmlBoxInput<Props>): PibblRenderResult;\n};\n/**\n * A persistent native HTML box projected into Pibbl layout, transforms and clips.\n *\n * @see {@link HtmlBoxProps}\n * @see {@link HtmlBoxStyle}\n * @see {@link HtmlMountCallback}\n */\nexport const HtmlBox = primitive as HtmlBoxComponent;\n"],
-  "mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,gCAAgC;AAC/D,SAAS,gCAAgC;AACzC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB,qBAAqB;AAGlD,SAAS,gCAAgC;AAMzC,SAAS,cAAc,OAA8B,OAA2B,KAA+B;AAC7G,QAAM,OAAO,aAAa;AAC1B,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,mBAAmB,KAAK;AACxC,MAAI,OAAO,KAAK,KAAK,CAAC;AACtB,MAAI,CAAC,QAAQ,KAAK,UAAU;AAC1B,QAAI,OAAO,MAAM,UAAU,WAAY,OAAM,IAAI,UAAU,mCAAmC;AAC9F,WAAO,EAAE,OAAO,OAAO,MAAM,OAAO,UAAU,OAAO,QAAQ,EAAE,UAAU,CAAC,GAAG,OAAO,SAAS,QAAW,YAAY,QAAW,QAAQ,KAAK,EAAE;AAC9I,UAAM,SAAS;AACf,WAAO,SAAS,EAAE,GAAG,OAAO,QAAQ,gBAAgB,UAAU;AAC5D,qBAAe,MAAM;AAAE,YAAI,CAAC,OAAO,SAAU,QAAO,WAAW,QAAQ;AAAA,MAAG,CAAC;AAAA,IAC7E,EAAE;AACF,SAAK,KAAK,CAAC,IAAI;AACf,SAAK,UAAU,IAAI,MAAM,QAAQ,QAAQ,MAAM,CAAC;AAAA,EAClD;AACA,QAAM,UAAU,MAAM,WAAW;AACjC,MAAI,CAAC,OAAO,SAAS,OAAO,KAAK,UAAU,KAAK,UAAU,EAAG,OAAM,IAAI,WAAW,0CAA0C;AAC5H,UAAQ,SAAS;AAAA,IAAE;AAAA,IAAM,MAAM,MAAM;AAAA,IAAM,QAAQ,yBAAyB;AAAA,IAC1E,OAAO,cAAc,aAAa,aAAa;AAAA,IAAG,QAAQ,MAAM;AAAA,IAAW,SAAS,MAAM;AAAA,IAC1F,SAAS,IAAI,cAAc;AAAA,IAAS,aAAa,MAAM,kBAAkB;AAAA,IAAQ,UAAU,MAAM,YAAY;AAAA,IAAQ,eAAe,MAAM;AAAA,EAAc,CAAC;AAC7J;AAEA,MAAM,YAAY,gBAA6E,eAAe;AAAA,EAC5G,aAAa,OAAO,SAAS;AAC3B,UAAM,MAAM,WAAW;AAAA,MAAE,GAAG;AAAA,MAAO,OAAO,MAAM,UAAU,UAAa,MAAM,UAAU,SAAS,QAAQ,WAAW,QAAQ,MAAM;AAAA,MAC/H,QAAQ,MAAM,WAAW,UAAa,MAAM,WAAW,SAAS,QAAQ,WAAW,SAAS,MAAM;AAAA,IAAO,GAAG,QAAQ,aAAa,EAAE,WAAW,UAAU,CAAC;AAC3J,WAAO,EAAE,GAAG,yBAAyB,KAAK,GAAG,GAAG,KAAK,UAAU,MAAM,YAAY,OAAO;AAAA,EAC1F;AACF,CAAC;AAED,6BAA6B,WAAW,CAAC,MAAM,CAAC;AAChD,yBAAmC,WAAW,YAAU,EAAE,WAAW,qBAAqB,KAAK,EAAE,EAAE;AAa5F,MAAM,UAAU;",
+  "sourcesContent": ["import type { HtmlMountCallback } from '../html/types.js';\nimport type { ResolvedDrawingStyle } from '../style/types.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { resolveBox } from '../layout/box.js';\nimport type { LayoutBox } from '../layout/types.js';\nimport { createGroupTransform, setPrimitivePresentation } from '../primitive-presentation.js';\nimport { getCurrentWorldTransform } from '../render-target.js';\nimport { registerOpaquePrimitiveProps } from '../element/metadata.js';\nimport { requireHtmlService, snapshotClips } from '../html/html-service.js';\nimport type { HtmlBoxProps, HtmlBoxSlot, HtmlBoxStyle } from '../html/types.js';\nimport type { PibblRenderResult, PrimitiveInput, RenderingContext2D } from '../types.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\n\ntype Resolved = ResolvedDrawingStyle<HtmlBoxStyle> & {\n  borderBox: Readonly<LayoutBox>; contentBox: Readonly<LayoutBox>; overflow: 'visible' | 'clip';\n};\n\nfunction renderHtmlBox(props: HtmlBoxProps<unknown>, style: Readonly<Resolved>, ctx: RenderingContext2D): void {\n  const refs = GLOBAL_STATE.componentRefs!;\n  const owner = GLOBAL_STATE.currentPibblInstance!;\n  const service = requireHtmlService(owner);\n  let slot = refs.refs[0] as HtmlBoxSlot | undefined;\n  if (!slot || slot.disposed) {\n    if (typeof props.mount !== 'function') throw new TypeError('HtmlBox mount must be a function.');\n    slot = { component: refs, owner, mount: props.mount, disposed: false, region: { identity: {}, owner, content: undefined, rootBounds: undefined, active: true } };\n    const stable = slot;\n    stable.region = { ...stable.region, onFocusSnapshot(snapshot) {\n      queueMicrotask(() => { if (!stable.disposed) stable.callback?.(snapshot); });\n    } };\n    refs.refs[0] = slot;\n    refs.teardowns.add(() => service.release(stable));\n  }\n  const opacity = style.opacity ?? 1;\n  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1) throw new RangeError('HtmlBox opacity must be between 0 and 1.');\n  service.register({ slot, handlers: props, data: props.data, matrix: getCurrentWorldTransform(),\n    clips: snapshotClips(GLOBAL_STATE.clippingStack), border: style.borderBox, content: style.contentBox,\n    opacity: ctx.globalAlpha * opacity, interactive: props.pointerEvents !== 'none', overflow: style.overflow ?? 'clip', onFocusChange: props.onFocusChange });\n}\n\nconst primitive = definePrimitive<HtmlBoxProps<unknown>, HtmlBoxStyle, HtmlBoxStyle, Resolved>(renderHtmlBox, {\n  resolveStyle(style, context) {\n    const box = resolveBox({ ...style, width: style.width === undefined || style.width === 'auto' ? context.allocation.width : style.width,\n      height: style.height === undefined || style.height === 'auto' ? context.allocation.height : style.height }, context.constraints, { component: 'HtmlBox' });\n    return { ...stripLayoutParticipation(style), ...box, overflow: style.overflow ?? 'clip' } as Resolved;\n  },\n});\n\nregisterOpaquePrimitiveProps(primitive, ['data']);\nsetPrimitivePresentation<Resolved>(primitive, style => ({ transform: createGroupTransform(style) }));\n\ntype HtmlBoxInput<Props> = Omit<PrimitiveInput<HtmlBoxProps<Props>, HtmlBoxStyle>, 'data' | 'mount'> & Pick<HtmlBoxProps<Props>, 'data' | 'mount'>;\ntype HtmlBoxComponent = {\n  <Props>(props: HtmlBoxInput<Props>): PibblRenderResult;\n};\n/**\n * A persistent native HTML box projected into Pibbl layout, transforms and clips.\n *\n * @see {@link HtmlBoxProps}\n * @see {@link HtmlBoxStyle}\n * @see {@link HtmlMountCallback}\n */\nexport const HtmlBox = primitive as HtmlBoxComponent;\n"],
+  "mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,gCAAgC;AAC/D,SAAS,gCAAgC;AACzC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB,qBAAqB;AAGlD,SAAS,gCAAgC;AAMzC,SAAS,cAAc,OAA8B,OAA2B,KAA+B;AAC7G,QAAM,OAAO,aAAa;AAC1B,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,mBAAmB,KAAK;AACxC,MAAI,OAAO,KAAK,KAAK,CAAC;AACtB,MAAI,CAAC,QAAQ,KAAK,UAAU;AAC1B,QAAI,OAAO,MAAM,UAAU,WAAY,OAAM,IAAI,UAAU,mCAAmC;AAC9F,WAAO,EAAE,WAAW,MAAM,OAAO,OAAO,MAAM,OAAO,UAAU,OAAO,QAAQ,EAAE,UAAU,CAAC,GAAG,OAAO,SAAS,QAAW,YAAY,QAAW,QAAQ,KAAK,EAAE;AAC/J,UAAM,SAAS;AACf,WAAO,SAAS,EAAE,GAAG,OAAO,QAAQ,gBAAgB,UAAU;AAC5D,qBAAe,MAAM;AAAE,YAAI,CAAC,OAAO,SAAU,QAAO,WAAW,QAAQ;AAAA,MAAG,CAAC;AAAA,IAC7E,EAAE;AACF,SAAK,KAAK,CAAC,IAAI;AACf,SAAK,UAAU,IAAI,MAAM,QAAQ,QAAQ,MAAM,CAAC;AAAA,EAClD;AACA,QAAM,UAAU,MAAM,WAAW;AACjC,MAAI,CAAC,OAAO,SAAS,OAAO,KAAK,UAAU,KAAK,UAAU,EAAG,OAAM,IAAI,WAAW,0CAA0C;AAC5H,UAAQ,SAAS;AAAA,IAAE;AAAA,IAAM,UAAU;AAAA,IAAO,MAAM,MAAM;AAAA,IAAM,QAAQ,yBAAyB;AAAA,IAC3F,OAAO,cAAc,aAAa,aAAa;AAAA,IAAG,QAAQ,MAAM;AAAA,IAAW,SAAS,MAAM;AAAA,IAC1F,SAAS,IAAI,cAAc;AAAA,IAAS,aAAa,MAAM,kBAAkB;AAAA,IAAQ,UAAU,MAAM,YAAY;AAAA,IAAQ,eAAe,MAAM;AAAA,EAAc,CAAC;AAC7J;AAEA,MAAM,YAAY,gBAA6E,eAAe;AAAA,EAC5G,aAAa,OAAO,SAAS;AAC3B,UAAM,MAAM,WAAW;AAAA,MAAE,GAAG;AAAA,MAAO,OAAO,MAAM,UAAU,UAAa,MAAM,UAAU,SAAS,QAAQ,WAAW,QAAQ,MAAM;AAAA,MAC/H,QAAQ,MAAM,WAAW,UAAa,MAAM,WAAW,SAAS,QAAQ,WAAW,SAAS,MAAM;AAAA,IAAO,GAAG,QAAQ,aAAa,EAAE,WAAW,UAAU,CAAC;AAC3J,WAAO,EAAE,GAAG,yBAAyB,KAAK,GAAG,GAAG,KAAK,UAAU,MAAM,YAAY,OAAO;AAAA,EAC1F;AACF,CAAC;AAED,6BAA6B,WAAW,CAAC,MAAM,CAAC;AAChD,yBAAmC,WAAW,YAAU,EAAE,WAAW,qBAAqB,KAAK,EAAE,EAAE;AAa5F,MAAM,UAAU;",
   "names": []
 }

package/dist/lib/components/img.js

@@ -3,7 +3,7 @@ import { definePrimitive } from "../define-primitive.js";
 import { useRectPath } from "../hooks/use-rect-path.js";
 import { useReaction } from "../hooks/use-reaction.js";
 import { useSignal } from "../hooks/use-signal.js";
-import { resolveLength } from "../style/resolve-length.js";
+import { resolveScalarSizingLength } from "../style/sizing-length.js";
 import {
   resolveOptionalLength,
   stripLayoutParticipation
@@ -129,13 +129,13 @@ function measureImage({
   return {
     status: "measured",
     size: {
-      width: resolveLength(
+      width: resolveScalarSizingLength(
         style.width,
         constraints.maxWidth,
         "width",
         context
       ),
-      height: resolveLength(
+      height: resolveScalarSizingLength(
         style.height,
         constraints.maxHeight,
         "height",

package/dist/lib/components/img.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/img.ts"],
-  "sourcesContent": ["import { resolveTexturePaint } from '../textures/texture-protocol.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport type {\n  PibblEventFocusOptions,\n  PibblEventHandlers,\n  PibblEventParticipationOptions,\n} from '../events/types.js';\nimport { useRectPath } from '../hooks/use-rect-path.js';\nimport { useReaction } from '../hooks/use-reaction.js';\nimport { useSignal } from '../hooks/use-signal.js';\nimport type {\n  PibblPhysics2DPropExtension,\n  MeasureInput,\n  MeasureResult,\n  RenderingContext2D,\n  StyleResolutionContext,\n} from '../types.js';\nimport { resolveLength } from '../style/resolve-length.js';\nimport {\n  resolveOptionalLength,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';\nimport type { ImgStyle, ResolvedImgStyle } from '../style/types.js';\nimport { adjustRectangleToPixelGrid } from '../util/pixel-grid-adjustments.js';\nimport { wireCommonEvents } from '../util/wire-common-events.js';\n\n/**\n * Authored inputs for Image, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link Image}\n */\nexport interface ImageProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}\n\ninterface LoadedImage {\n  src: string;\n  element: HTMLImageElement;\n}\n\nfunction renderImage(\n  props: ImageProps,\n  style: Readonly<ResolvedImgStyle>,\n  ctx: RenderingContext2D,\n) {\n  let {\n    src,\n    x = 0,\n    y = 0,\n    width,\n    height,\n    stroke,\n    strokeWidth,\n    opacity,\n    cursor,\n    alignToPixelGrid,\n  } = style;\n\n  if (opacity !== undefined) {\n    ctx.globalAlpha = ctx.globalAlpha * opacity;\n  }\n\n  const loadedImage = useSignal<LoadedImage | null>(null);\n  const loadedImageValue = loadedImage.get();\n  const image =\n    loadedImageValue && loadedImageValue.src === src ?\n      loadedImageValue.element : null;\n\n  useReaction(() => {\n    let active = true;\n    const BrowserImage = globalThis.Image;\n    const element = new BrowserImage();\n    const settle = () => {\n      active = false;\n      element.onload = null;\n      element.onerror = null;\n    };\n\n    element.onload = () => {\n      if (!active) return;\n      settle();\n      loadedImage.set({ src, element });\n    };\n    element.onerror = () => {\n      if (!active) return;\n      settle();\n      loadedImage.set(null);\n    };\n    element.src = src;\n\n    return () => {\n      active = false;\n      element.onload = null;\n      element.onerror = null;\n      element.removeAttribute('src');\n    };\n  }, [src]);\n\n  width = width ?? image?.naturalWidth ?? image?.width ?? 0;\n  height = height ?? image?.naturalHeight ?? image?.height ?? 0;\n\n  if (alignToPixelGrid) {\n    ({ x, y, width, height } = adjustRectangleToPixelGrid(\n      strokeWidth ?? 0,\n      x,\n      y,\n      width,\n      height,\n      alignToPixelGrid,\n    ));\n  }\n\n  const imagePath = useRectPath(x, y, width, height);\n\n  if (image) {\n    ctx.drawImage(image, x, y, width, height);\n  }\n\n  if (stroke && strokeWidth) {\n    ctx.strokeStyle = resolveTexturePaint(stroke, ctx, { x, y, width, height });\n    ctx.lineWidth = strokeWidth;\n    ctx.stroke(imagePath);\n  }\n\n  wireCommonEvents(\n    props,\n    imagePath,\n    true,\n    strokeWidth ?? 0,\n    cursor,\n    { x, y, width, height },\n  );\n}\n\n/**\n * Describes a Canvas image primitive for JSX or createElement authoring.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link ImageProps}\n * @see {@link ImgStyle}\n */\nexport const Image = definePrimitive<\n  ImageProps,\n  ImgStyle,\n  ImgStyle,\n  ResolvedImgStyle\n>(renderImage, {\n  resolveStyle: resolveImageStyle,\n  measure: measureImage,\n});\nregisterOpaqueStyleProperties(Image, ['src', 'stroke', 'cursor']);\n\nfunction resolveImageStyle(\n  style: Readonly<ImgStyle>,\n  context: Readonly<StyleResolutionContext>,\n): ResolvedImgStyle {\n  return {\n    ...stripLayoutParticipation(style),\n    x: 0,\n    y: 0,\n    width: resolveOptionalLength(\n      style.width,\n      context.percentageBasis.width,\n      'width',\n      context,\n    ),\n    height: resolveOptionalLength(\n      style.height,\n      context.percentageBasis.height,\n      'height',\n      context,\n    ),\n  } as ResolvedImgStyle;\n}\n\nfunction measureImage({\n  style,\n  constraints,\n}: MeasureInput<ImageProps, ImgStyle>): MeasureResult {\n  if (\n    style.width === undefined || style.width === 'auto' ||\n    style.height === undefined || style.height === 'auto'\n  ) {\n    return {\n      status: 'unsupported',\n      reason: 'Image natural dimensions are unavailable during pure measurement',\n    };\n  }\n  const context = {\n    component: 'Image',\n    algorithm: 'measurement' as const,\n    constraints,\n  };\n  return {\n    status: 'measured',\n    size: {\n      width: resolveLength(\n        style.width,\n        constraints.maxWidth,\n        'width',\n        context,\n      )!,\n      height: resolveLength(\n        style.height,\n        constraints.maxHeight,\n        'height',\n        context,\n      )!,\n    },\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { resolveTexturePaint } from '../textures/texture-protocol.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport type {\n  PibblEventFocusOptions,\n  PibblEventHandlers,\n  PibblEventParticipationOptions,\n} from '../events/types.js';\nimport { useRectPath } from '../hooks/use-rect-path.js';\nimport { useReaction } from '../hooks/use-reaction.js';\nimport { useSignal } from '../hooks/use-signal.js';\nimport type {\n  PibblPhysics2DPropExtension,\n  MeasureInput,\n  MeasureResult,\n  RenderingContext2D,\n  StyleResolutionContext,\n} from '../types.js';\nimport { resolveScalarSizingLength } from '../style/sizing-length.js';\nimport {\n  resolveOptionalLength,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';\nimport type { ImgStyle, ResolvedImgStyle } from '../style/types.js';\nimport { adjustRectangleToPixelGrid } from '../util/pixel-grid-adjustments.js';\nimport { wireCommonEvents } from '../util/wire-common-events.js';\n\n/**\n * Authored inputs for Image, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link Image}\n */\nexport interface ImageProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}\n\ninterface LoadedImage {\n  src: string;\n  element: HTMLImageElement;\n}\n\nfunction renderImage(\n  props: ImageProps,\n  style: Readonly<ResolvedImgStyle>,\n  ctx: RenderingContext2D,\n) {\n  let {\n    src,\n    x = 0,\n    y = 0,\n    width,\n    height,\n    stroke,\n    strokeWidth,\n    opacity,\n    cursor,\n    alignToPixelGrid,\n  } = style;\n\n  if (opacity !== undefined) {\n    ctx.globalAlpha = ctx.globalAlpha * opacity;\n  }\n\n  const loadedImage = useSignal<LoadedImage | null>(null);\n  const loadedImageValue = loadedImage.get();\n  const image =\n    loadedImageValue && loadedImageValue.src === src ?\n      loadedImageValue.element : null;\n\n  useReaction(() => {\n    let active = true;\n    const BrowserImage = globalThis.Image;\n    const element = new BrowserImage();\n    const settle = () => {\n      active = false;\n      element.onload = null;\n      element.onerror = null;\n    };\n\n    element.onload = () => {\n      if (!active) return;\n      settle();\n      loadedImage.set({ src, element });\n    };\n    element.onerror = () => {\n      if (!active) return;\n      settle();\n      loadedImage.set(null);\n    };\n    element.src = src;\n\n    return () => {\n      active = false;\n      element.onload = null;\n      element.onerror = null;\n      element.removeAttribute('src');\n    };\n  }, [src]);\n\n  width = width ?? image?.naturalWidth ?? image?.width ?? 0;\n  height = height ?? image?.naturalHeight ?? image?.height ?? 0;\n\n  if (alignToPixelGrid) {\n    ({ x, y, width, height } = adjustRectangleToPixelGrid(\n      strokeWidth ?? 0,\n      x,\n      y,\n      width,\n      height,\n      alignToPixelGrid,\n    ));\n  }\n\n  const imagePath = useRectPath(x, y, width, height);\n\n  if (image) {\n    ctx.drawImage(image, x, y, width, height);\n  }\n\n  if (stroke && strokeWidth) {\n    ctx.strokeStyle = resolveTexturePaint(stroke, ctx, { x, y, width, height });\n    ctx.lineWidth = strokeWidth;\n    ctx.stroke(imagePath);\n  }\n\n  wireCommonEvents(\n    props,\n    imagePath,\n    true,\n    strokeWidth ?? 0,\n    cursor,\n    { x, y, width, height },\n  );\n}\n\n/**\n * Describes a Canvas image primitive for JSX or createElement authoring.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link ImageProps}\n * @see {@link ImgStyle}\n */\nexport const Image = definePrimitive<\n  ImageProps,\n  ImgStyle,\n  ImgStyle,\n  ResolvedImgStyle\n>(renderImage, {\n  resolveStyle: resolveImageStyle,\n  measure: measureImage,\n});\nregisterOpaqueStyleProperties(Image, ['src', 'stroke', 'cursor']);\n\nfunction resolveImageStyle(\n  style: Readonly<ImgStyle>,\n  context: Readonly<StyleResolutionContext>,\n): ResolvedImgStyle {\n  return {\n    ...stripLayoutParticipation(style),\n    x: 0,\n    y: 0,\n    width: resolveOptionalLength(\n      style.width,\n      context.percentageBasis.width,\n      'width',\n      context,\n    ),\n    height: resolveOptionalLength(\n      style.height,\n      context.percentageBasis.height,\n      'height',\n      context,\n    ),\n  } as ResolvedImgStyle;\n}\n\nfunction measureImage({\n  style,\n  constraints,\n}: MeasureInput<ImageProps, ImgStyle>): MeasureResult {\n  if (\n    style.width === undefined || style.width === 'auto' ||\n    style.height === undefined || style.height === 'auto'\n  ) {\n    return {\n      status: 'unsupported',\n      reason: 'Image natural dimensions are unavailable during pure measurement',\n    };\n  }\n  const context = {\n    component: 'Image',\n    algorithm: 'measurement' as const,\n    constraints,\n  };\n  return {\n    status: 'measured',\n    size: {\n      width: resolveScalarSizingLength(\n        style.width,\n        constraints.maxWidth,\n        'width',\n        context,\n      )!,\n      height: resolveScalarSizingLength(\n        style.height,\n        constraints.maxHeight,\n        'height',\n        context,\n      )!,\n    },\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/lib/components/layer.js

@@ -1,6 +1,15 @@
+import { getLayoutDirection, hasParentLayoutAllocation } from "../layout/context.js";
+import { registerLayoutSuspensionResource, unregisterLayoutSuspensionResource } from "../layout/participation.js";
+import { isLayoutComponent, prepareLayoutComponent } from "../layout/define-layout-component.js";
+import { isKnownLayoutType, registerKnownLayoutPreflight, preflightKnownLayout, attachPreparedLayoutSlot, stagePreparedBoundaryChildren, takePreparedBoundaryChildren, preparedBoundaryNeedsAllocationParent, retainPreparedBoundarySubtree } from "../layout/prepared-root.js";
+import { prepareLayoutChildren, prepareDirectChildStyle, resolveContainerBox } from "../layout/absolute.js";
+import { setPreNormalizedStyle } from "../style/resolve-dispatch.js";
+import { getChildPrimitiveReceiverToken } from "../element/metadata.js";
+import { preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
+import { nativeLayout } from "../layout/wasm/region.js";
 import { definePrimitive } from "../define-primitive.js";
 import { materializeContainerChildren } from "../element/children.js";
-import { createElement } from "../element/create-element.js";
+import { clonePibblElement, createElement } from "../element/create-element.js";
 import { Fragment } from "../element/fragment.js";
 import { executeRender } from "../execute-render.js";
 import {
@@ -21,7 +30,8 @@ import { getCurrentWorldTransform } from "../render-target.js";
 import { createLayerSurface } from "../surface/resolve-surface.js";
 import {
   completeInstanceRenderRevision,
-  hasPendingInstanceRender
+  hasPendingInstanceRender,
+  setInstanceAllocationParent
 } from "../scheduler/realm-scheduler.js";
 import {
   haveSameLayerNodeTree,
@@ -32,14 +42,20 @@ import {
 } from "./structural-events.js";
 function renderLayer(props, style, ctx) {
   wireStructuralEvents(props);
-  const materializedChildren = materializeContainerChildren(
-    props.children,
-    "Layer"
-  );
-  const nextRoot = createPrivateLayerRoot(materializedChildren);
   const canvas = GLOBAL_STATE.canvas;
   const { width = canvas.width, height = canvas.height } = style;
   const componentRefs = GLOBAL_STATE.componentRefs;
+  let preparedBoundary = componentRefs.element;
+  let preparedChildren = nativeLayout ? takePreparedBoundaryChildren(preparedBoundary) : void 0;
+  if (nativeLayout && !preparedChildren) {
+    const slot2 = preflightKnownLayout(preparedBoundary, style, { x: 0, y: 0, width, height }, GLOBAL_STATE.primitiveReceiverToken);
+    preparedBoundary = clonePibblElement(preparedBoundary);
+    attachPreparedLayoutSlot(preparedBoundary, slot2);
+    preparedChildren = takePreparedBoundaryChildren(preparedBoundary);
+  }
+  const materializedChildren = preparedChildren ?? materializeContainerChildren(props.children, "Layer");
+  const needsPreparedAllocationParent = nativeLayout && preparedBoundaryNeedsAllocationParent(preparedBoundary);
+  const nextRoot = createPrivateLayerRoot(materializedChildren);
   const parentInstance = getCurrentPibblInstance();
   const parentSurface = getSurfaceSnapshot(parentInstance);
   const layerSurface = createLayerSurface(
@@ -72,10 +88,17 @@ function renderLayer(props, style, ctx) {
       interactionLayer: interactionLayer2,
       logicalWidth: width,
       logicalHeight: height,
+      layoutDirection: void 0,
       focusRenderRevision: void 0,
       retainedTree: void 0
     };
+    const suspensionResource = {
+      suspendLayout: () => parentInstance.paintEntries.delete(interactionLayer2)
+    };
+    registerLayoutSuspensionResource(componentRefs, suspensionResource);
     componentRefs.teardowns.add(() => {
+      unregisterLayoutSuspensionResource(componentRefs, suspensionResource);
+      setInstanceAllocationParent(childInstance);
       childInstance.eventParent = void 0;
       parentInstance.paintEntries.delete(interactionLayer2);
       controller.dispose();
@@ -84,6 +107,12 @@ function renderLayer(props, style, ctx) {
   const slot = componentRefs.refs[0];
   const offscreenCanvas = slot.canvas;
   const layerPibbl = getPibblInstance(offscreenCanvas);
+  if (nativeLayout) setInstanceAllocationParent(
+    layerPibbl,
+    hasParentLayoutAllocation() || needsPreparedAllocationParent ? parentInstance : void 0
+  );
+  const layoutDirection = getLayoutDirection();
+  const directionChanged = slot.layoutDirection !== layoutDirection;
   const dimensionsChanged = slot.logicalWidth !== width || slot.logicalHeight !== height;
   const surfaceChanged = offscreenCanvas.width !== layerSurface.backingWidth || offscreenCanvas.height !== layerSurface.backingHeight;
   const { interactionLayer } = slot;
@@ -96,7 +125,7 @@ function renderLayer(props, style, ctx) {
   parentInstance.paintEntries.add(interactionLayer);
   const focusPolicy = parentInstance.eventRoot.focusPolicy;
   const focusRenderRevision = focusPolicy?.layerFocusRenderRevision?.(layerPibbl);
-  const shouldRender = GLOBAL_STATE.componentIsMounting || dimensionsChanged || surfaceChanged || !haveSameLayerNodeTree(slot.retainedTree, nextRoot) || slot.focusRenderRevision !== focusRenderRevision || hasPendingInstanceRender(layerPibbl);
+  const shouldRender = GLOBAL_STATE.componentIsMounting || dimensionsChanged || directionChanged || surfaceChanged || !haveSameLayerNodeTree(slot.retainedTree, nextRoot) || slot.focusRenderRevision !== focusRenderRevision || hasPendingInstanceRender(layerPibbl);
   if (shouldRender) {
     if (layerPibbl.surface.kind !== "layer") {
       throw new Error("Pibbl layer mounted without a derived surface.");
@@ -108,15 +137,24 @@ function renderLayer(props, style, ctx) {
     slot.logicalWidth = width;
     slot.logicalHeight = height;
     const renderedRevision = layerPibbl.requestedRenderRevision;
-    executeRender(
-      offscreenCanvas,
-      getCurrentPibblInstance().renderTimestamp,
-      nextRoot,
-      false
-    );
-    completeInstanceRenderRevision(layerPibbl, renderedRevision);
-    slot.retainedTree = snapshotLayerNodeTree(nextRoot);
+    const previousRootLayoutDirection = layerPibbl.rootLayoutDirection;
+    layerPibbl.rootLayoutDirection = layoutDirection;
+    try {
+      executeRender(
+        offscreenCanvas,
+        getCurrentPibblInstance().renderTimestamp,
+        nextRoot,
+        false
+      );
+      completeInstanceRenderRevision(layerPibbl, renderedRevision);
+      slot.retainedTree = snapshotLayerNodeTree(nextRoot);
+      slot.layoutDirection = layoutDirection;
+    } catch (error) {
+      layerPibbl.rootLayoutDirection = previousRootLayoutDirection;
+      throw error;
+    }
   } else {
+    if (nativeLayout) retainPreparedBoundarySubtree(preparedBoundary);
     parentInstance.eventRoot.focusPolicy?.replayRetainedSubtree(layerPibbl);
   }
   const renderedFocusPolicy = parentInstance.eventRoot.focusPolicy;
@@ -138,6 +176,50 @@ const Layer = definePrimitive(renderLayer, {
   childInput: "structural",
   resolveStyle: resolveLayerStyle
 });
+if (nativeLayout) registerKnownLayoutPreflight(Layer, (element, _style, content, receiver, slot) => {
+  const previous = GLOBAL_STATE.primitiveReceiverToken;
+  GLOBAL_STATE.primitiveReceiverToken = receiver;
+  try {
+    const children = prepareLayoutChildren(element.props.children, "Layer");
+    const placed = children.slice();
+    let occurrences;
+    for (let index = 0; index < children.length; index++) {
+      const child = children[index];
+      if (!isKnownLayoutType(child.type) && !isLayoutComponent(child.type)) continue;
+      let occurrence = 0;
+      if (child.key === void 0) {
+        occurrences ??= /* @__PURE__ */ new Map();
+        occurrence = occurrences.get(child.type) ?? 0;
+        occurrences.set(child.type, occurrence + 1);
+      }
+      const token = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, receiver, index);
+      const root = isLayoutComponent(child.type) ? prepareLayoutComponent(child, { receiverToken: token }) : child;
+      if (!isKnownLayoutType(root.type)) continue;
+      const component = root.type.name || "Layout";
+      const prepared = prepareDirectChildStyle(child, token, content, true);
+      const style = preparedStyleValue(prepared);
+      const context = { component, algorithm: "render-dispatch", allocation: content, percentageBasis: content, constraints: { minWidth: 0, maxWidth: content.width, minHeight: 0, maxHeight: content.height } };
+      let width, height;
+      if (root.type === Layer) {
+        const layerStyle = resolveLayerStyle(style, context);
+        width = layerStyle.width;
+        height = layerStyle.height;
+      } else {
+        const box = resolveContainerBox(style, context, component, "render-dispatch");
+        width = box.contentBox.width;
+        height = box.contentBox.height;
+      }
+      const nested = preflightKnownLayout(child, style, { x: 0, y: 0, width, height }, token, occurrence, slot);
+      const clone = clonePibblElement(child);
+      setPreNormalizedStyle(clone, style, child, token, preparedStyleQuery(prepared));
+      attachPreparedLayoutSlot(clone, nested);
+      placed[index] = clone;
+    }
+    stagePreparedBoundaryChildren(slot, placed);
+  } finally {
+    GLOBAL_STATE.primitiveReceiverToken = previous;
+  }
+});
 function resolveLayerStyle(style, context) {
   return {
     ...stripLayoutParticipation(style),

package/dist/lib/components/layer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/layer.ts"],
-  "sourcesContent": ["import { definePrimitive } from '../define-primitive.js';\nimport { materializeContainerChildren } from '../element/children.js';\nimport { createElement } from '../element/create-element.js';\nimport { Fragment, type FragmentProps } from '../element/fragment.js';\nimport { executeRender } from '../execute-render.js';\nimport {\n  getPibblInstance,\n  getCurrentPibblInstance,\n  GLOBAL_STATE,\n} from '../global-state.js';\nimport { mountPibbl } from '../mount-pibbl.js';\nimport {\n  PibblNodeInput,\n  PibblInteractionLayer,\n  RenderingContext2D,\n  SystemStyle,\n} from '../types.js';\nimport { PibblPaintEntryKind } from '../events/paint-entry.js';\nimport {\n  resolveRequiredLength,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\nimport {\n  getSurfaceSnapshot,\n} from '../surface/transform.js';\nimport { getCurrentWorldTransform } from '../render-target.js';\nimport { createLayerSurface } from '../surface/resolve-surface.js';\nimport {\n  completeInstanceRenderRevision,\n  hasPendingInstanceRender,\n} from '../scheduler/realm-scheduler.js';\nimport type { PibblElement } from '../element/types.js';\nimport {\n  haveSameLayerNodeTree,\n  snapshotLayerNodeTree,\n  type LayerNodeSnapshot,\n} from './layer-node-equality.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from './structural-events.js';\n\n/**\n * Authored inputs for Layer, including the declared data and presentation options.\n *\n * @see {@link PibblNodeInput}\n * @see {@link Layer}\n */\nexport interface LayerProps extends PibblStructuralEventProps {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\n/**\n * Supported geometry and presentation properties for Layer.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Layer}\n */\nexport interface LayerStyle extends SystemStyle, BoxStyle, LayoutItemStyle {}\n\ntype ResolvedLayerStyle = ResolvedDrawingStyle<LayerStyle> & {\n  width: number;\n  height: number;\n};\n\ninterface LayerSlot {\n  canvas: OffscreenCanvas;\n  interactionLayer: PibblInteractionLayer;\n  logicalWidth: number;\n  logicalHeight: number;\n  focusRenderRevision: number | undefined;\n  retainedTree: LayerNodeSnapshot | undefined;\n}\n\nfunction renderLayer(\n  props: LayerProps,\n  style: Readonly<ResolvedLayerStyle>,\n  ctx: RenderingContext2D,\n) {\n  wireStructuralEvents(props);\n  const materializedChildren = materializeContainerChildren(\n    props.children,\n    'Layer',\n  );\n  const nextRoot = createPrivateLayerRoot(materializedChildren);\n  const canvas = GLOBAL_STATE.canvas!;\n  const { width = canvas.width, height = canvas.height } = style;\n  const componentRefs = GLOBAL_STATE.componentRefs!;\n  const parentInstance = getCurrentPibblInstance();\n  const parentSurface = getSurfaceSnapshot(parentInstance);\n  const layerSurface = createLayerSurface(\n    width,\n    height,\n    parentSurface.backingPixelsPerLogicalUnitX,\n    parentSurface.backingPixelsPerLogicalUnitY,\n  );\n  if (GLOBAL_STATE.componentIsMounting) {\n    const offscreenCanvas = new OffscreenCanvas(\n      layerSurface.backingWidth,\n      layerSurface.backingHeight,\n    );\n    const controller = mountPibbl(offscreenCanvas, nextRoot, {\n      parent: canvas,\n      surface: layerSurface,\n    });\n    const childInstance = getPibblInstance(offscreenCanvas);\n    childInstance.eventParent = componentRefs;\n    const interactionLayer: PibblInteractionLayer = {\n      paintKind: PibblPaintEntryKind.NestedInstance,\n      instance: childInstance,\n      transform: new DOMMatrix(),\n      clippingStack: [],\n      bounds: createBounds(width, height),\n      resolveLocal: undefined,\n    };\n    componentRefs.refs[0] = {\n      canvas: offscreenCanvas,\n      interactionLayer,\n      logicalWidth: width,\n      logicalHeight: height,\n      focusRenderRevision: undefined,\n      retainedTree: undefined,\n    } satisfies LayerSlot;\n    componentRefs.teardowns.add(() => {\n      childInstance.eventParent = undefined;\n      parentInstance.paintEntries.delete(interactionLayer);\n      controller.dispose();\n    });\n  }\n\n  const slot = componentRefs.refs[0] as LayerSlot;\n  const offscreenCanvas = slot.canvas;\n  const layerPibbl = getPibblInstance(offscreenCanvas);\n  const dimensionsChanged = slot.logicalWidth !== width ||\n    slot.logicalHeight !== height;\n  const surfaceChanged =\n    offscreenCanvas.width !== layerSurface.backingWidth ||\n    offscreenCanvas.height !== layerSurface.backingHeight;\n\n  const { interactionLayer } = slot;\n  parentInstance.paintEntries.delete(interactionLayer);\n  interactionLayer.transform = getCurrentWorldTransform();\n  interactionLayer.clippingStack = Array.from(GLOBAL_STATE.clippingStack);\n  if (dimensionsChanged) {\n    interactionLayer.bounds = createBounds(width, height);\n  }\n  // Install the current bridge before entering the child render. Focus bounds\n  // collected by the child must never see the previous frame's transform.\n  parentInstance.paintEntries.add(interactionLayer);\n\n  const focusPolicy = parentInstance.eventRoot.focusPolicy;\n  const focusRenderRevision = focusPolicy?.layerFocusRenderRevision?.(layerPibbl);\n\n  const shouldRender =\n    GLOBAL_STATE.componentIsMounting ||\n    dimensionsChanged ||\n    surfaceChanged ||\n    !haveSameLayerNodeTree(slot.retainedTree, nextRoot) ||\n    slot.focusRenderRevision !== focusRenderRevision ||\n    hasPendingInstanceRender(layerPibbl);\n  if (shouldRender) {\n    if (layerPibbl.surface.kind !== 'layer') {\n      throw new Error('Pibbl layer mounted without a derived surface.');\n    }\n    layerPibbl.surface.snapshot = layerSurface;\n    layerPibbl.surface.managed = true;\n    offscreenCanvas.width = layerSurface.backingWidth;\n    offscreenCanvas.height = layerSurface.backingHeight;\n    slot.logicalWidth = width;\n    slot.logicalHeight = height;\n\n    const renderedRevision = layerPibbl.requestedRenderRevision;\n    executeRender(\n      offscreenCanvas,\n      getCurrentPibblInstance().renderTimestamp,\n      nextRoot,\n      false,\n    );\n    completeInstanceRenderRevision(layerPibbl, renderedRevision);\n    slot.retainedTree = snapshotLayerNodeTree(nextRoot);\n  } else {\n    parentInstance.eventRoot.focusPolicy?.replayRetainedSubtree(layerPibbl);\n  }\n  const renderedFocusPolicy = parentInstance.eventRoot.focusPolicy;\n  slot.focusRenderRevision =\n    renderedFocusPolicy?.layerFocusRenderRevision?.(layerPibbl);\n\n  parentInstance.eventRoot.html?.recordLayer(parentInstance, layerPibbl, interactionLayer, ctx.globalAlpha, ctx.globalCompositeOperation);\n\n  ctx.drawImage(\n    offscreenCanvas,\n    0,\n    0,\n    offscreenCanvas.width,\n    offscreenCanvas.height,\n    0,\n    0,\n    width,\n    height,\n  );\n\n}\n\n/**\n * Describes a retained offscreen composition layer.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link LayerProps}\n * @see {@link LayerStyle}\n */\nexport const Layer = definePrimitive<\n  LayerProps,\n  LayerStyle,\n  LayerStyle,\n  ResolvedLayerStyle\n>(renderLayer, {\n  childInput: 'structural',\n  resolveStyle: resolveLayerStyle,\n});\n\nfunction resolveLayerStyle(\n  style: Readonly<LayerStyle>,\n  context: Parameters<NonNullable<\n    import('../types.js').PrimitiveCapabilities<\n      LayerProps,\n      LayerStyle,\n      LayerStyle,\n      ResolvedLayerStyle\n    >['resolveStyle']\n  >>[1],\n): ResolvedLayerStyle {\n  return {\n    ...stripLayoutParticipation(style),\n    width: resolveRequiredLength(\n      style.width ?? context.allocation.width,\n      context.percentageBasis.width,\n      'width',\n      context,\n    ),\n    height: resolveRequiredLength(\n      style.height ?? context.allocation.height,\n      context.percentageBasis.height,\n      'height',\n      context,\n    ),\n  } as ResolvedLayerStyle;\n}\n\nfunction createPrivateLayerRoot(\n  children: readonly PibblElement<any>[],\n): PibblElement<FragmentProps> {\n  return createElement(Fragment, {\n    key: 'pibbl-layer-root',\n    children,\n  });\n}\n\nfunction createBounds(width: number, height: number): Path2D {\n  const bounds = new Path2D();\n  bounds.rect(0, 0, width, height);\n  return bounds;\n}\n"],
-  "mappings": "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",
-  "names": ["offscreenCanvas", "interactionLayer"]
+  "sourcesContent": ["import { getLayoutDirection, hasParentLayoutAllocation } from '../layout/context.js';\nimport { registerLayoutSuspensionResource, unregisterLayoutSuspensionResource } from '../layout/participation.js';\nimport { isLayoutComponent, prepareLayoutComponent } from '../layout/define-layout-component.js';\nimport { isKnownLayoutType, registerKnownLayoutPreflight, preflightKnownLayout, attachPreparedLayoutSlot, stagePreparedBoundaryChildren, takePreparedBoundaryChildren, preparedBoundaryNeedsAllocationParent, retainPreparedBoundarySubtree } from '../layout/prepared-root.js';\nimport { prepareLayoutChildren, prepareDirectChildStyle, resolveContainerBox } from '../layout/absolute.js';\nimport { setPreNormalizedStyle } from '../style/resolve-dispatch.js';\nimport { getChildPrimitiveReceiverToken } from '../element/metadata.js';\nimport { preparedStyleValue, preparedStyleQuery } from '../style/responsive.js';\nimport { nativeLayout } from '../layout/wasm/region.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { materializeContainerChildren } from '../element/children.js';\nimport { clonePibblElement, createElement } from '../element/create-element.js';\nimport { Fragment, type FragmentProps } from '../element/fragment.js';\nimport { executeRender } from '../execute-render.js';\nimport {\n  getPibblInstance,\n  getCurrentPibblInstance,\n  GLOBAL_STATE,\n} from '../global-state.js';\nimport { mountPibbl } from '../mount-pibbl.js';\nimport {\n  PibblNodeInput,\n  PibblInteractionLayer,\n  RenderingContext2D,\n  SystemStyle,\n} from '../types.js';\nimport { PibblPaintEntryKind } from '../events/paint-entry.js';\nimport {\n  resolveRequiredLength,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\nimport {\n  getSurfaceSnapshot,\n} from '../surface/transform.js';\nimport { getCurrentWorldTransform } from '../render-target.js';\nimport { createLayerSurface } from '../surface/resolve-surface.js';\nimport {\n  completeInstanceRenderRevision,\n  hasPendingInstanceRender,\n  setInstanceAllocationParent,\n} from '../scheduler/realm-scheduler.js';\nimport type { PibblElement } from '../element/types.js';\nimport {\n  haveSameLayerNodeTree,\n  snapshotLayerNodeTree,\n  type LayerNodeSnapshot,\n} from './layer-node-equality.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from './structural-events.js';\n\n/**\n * Authored inputs for Layer, including the declared data and presentation options.\n *\n * @see {@link PibblNodeInput}\n * @see {@link Layer}\n */\nexport interface LayerProps extends PibblStructuralEventProps {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\n/**\n * Supported geometry and presentation properties for Layer.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Layer}\n */\nexport interface LayerStyle extends SystemStyle, BoxStyle, LayoutItemStyle {}\n\ntype ResolvedLayerStyle = ResolvedDrawingStyle<LayerStyle> & {\n  width: number;\n  height: number;\n};\n\ninterface LayerSlot {\n  canvas: OffscreenCanvas;\n  interactionLayer: PibblInteractionLayer;\n  logicalWidth: number;\n  logicalHeight: number;\n  /** Direction used for the currently retained child bitmap. */\n  layoutDirection: 'ltr' | 'rtl' | undefined;\n  focusRenderRevision: number | undefined;\n  retainedTree: LayerNodeSnapshot | undefined;\n}\n\nfunction renderLayer(\n  props: LayerProps,\n  style: Readonly<ResolvedLayerStyle>,\n  ctx: RenderingContext2D,\n) {\n  wireStructuralEvents(props);\n  const canvas = GLOBAL_STATE.canvas!;\n  const { width = canvas.width, height = canvas.height } = style;\n  const componentRefs = GLOBAL_STATE.componentRefs!;\n  let preparedBoundary = componentRefs.element;\n  let preparedChildren = nativeLayout ? takePreparedBoundaryChildren(preparedBoundary) : undefined;\n  if (nativeLayout && !preparedChildren) {\n    const slot = preflightKnownLayout(preparedBoundary, style, { x: 0, y: 0, width, height }, GLOBAL_STATE.primitiveReceiverToken);\n    // Keep transaction metadata off the application-owned reusable descriptor.\n    preparedBoundary = clonePibblElement(preparedBoundary);\n    attachPreparedLayoutSlot(preparedBoundary, slot);\n    preparedChildren = takePreparedBoundaryChildren(preparedBoundary);\n  }\n  const materializedChildren = preparedChildren ?? materializeContainerChildren(props.children, 'Layer');\n  const needsPreparedAllocationParent = nativeLayout && preparedBoundaryNeedsAllocationParent(preparedBoundary);\n  const nextRoot = createPrivateLayerRoot(materializedChildren);\n  const parentInstance = getCurrentPibblInstance();\n  const parentSurface = getSurfaceSnapshot(parentInstance);\n  const layerSurface = createLayerSurface(\n    width,\n    height,\n    parentSurface.backingPixelsPerLogicalUnitX,\n    parentSurface.backingPixelsPerLogicalUnitY,\n  );\n  if (GLOBAL_STATE.componentIsMounting) {\n    const offscreenCanvas = new OffscreenCanvas(\n      layerSurface.backingWidth,\n      layerSurface.backingHeight,\n    );\n    const controller = mountPibbl(offscreenCanvas, nextRoot, {\n      parent: canvas,\n      surface: layerSurface,\n    });\n    const childInstance = getPibblInstance(offscreenCanvas);\n    childInstance.eventParent = componentRefs;\n    const interactionLayer: PibblInteractionLayer = {\n      paintKind: PibblPaintEntryKind.NestedInstance,\n      instance: childInstance,\n      transform: new DOMMatrix(),\n      clippingStack: [],\n      bounds: createBounds(width, height),\n      resolveLocal: undefined,\n    };\n    componentRefs.refs[0] = {\n      canvas: offscreenCanvas,\n      interactionLayer,\n      logicalWidth: width,\n      logicalHeight: height,\n      layoutDirection: undefined,\n      focusRenderRevision: undefined,\n      retainedTree: undefined,\n    } satisfies LayerSlot;\n    const suspensionResource = {\n      suspendLayout: () => parentInstance.paintEntries.delete(interactionLayer),\n    };\n    registerLayoutSuspensionResource(componentRefs, suspensionResource);\n    componentRefs.teardowns.add(() => {\n      unregisterLayoutSuspensionResource(componentRefs, suspensionResource);\n      setInstanceAllocationParent(childInstance);\n      childInstance.eventParent = undefined;\n      parentInstance.paintEntries.delete(interactionLayer);\n      controller.dispose();\n    });\n  }\n\n  const slot = componentRefs.refs[0] as LayerSlot;\n  const offscreenCanvas = slot.canvas;\n  const layerPibbl = getPibblInstance(offscreenCanvas);\n  if (nativeLayout) setInstanceAllocationParent(layerPibbl,\n    hasParentLayoutAllocation() || needsPreparedAllocationParent ? parentInstance : undefined);\n  const layoutDirection = getLayoutDirection();\n  const directionChanged = slot.layoutDirection !== layoutDirection;\n  const dimensionsChanged = slot.logicalWidth !== width ||\n    slot.logicalHeight !== height;\n  const surfaceChanged =\n    offscreenCanvas.width !== layerSurface.backingWidth ||\n    offscreenCanvas.height !== layerSurface.backingHeight;\n\n  const { interactionLayer } = slot;\n  parentInstance.paintEntries.delete(interactionLayer);\n  interactionLayer.transform = getCurrentWorldTransform();\n  interactionLayer.clippingStack = Array.from(GLOBAL_STATE.clippingStack);\n  if (dimensionsChanged) {\n    interactionLayer.bounds = createBounds(width, height);\n  }\n  // Install the current bridge before entering the child render. Focus bounds\n  // collected by the child must never see the previous frame's transform.\n  parentInstance.paintEntries.add(interactionLayer);\n\n  const focusPolicy = parentInstance.eventRoot.focusPolicy;\n  const focusRenderRevision = focusPolicy?.layerFocusRenderRevision?.(layerPibbl);\n\n  const shouldRender =\n    GLOBAL_STATE.componentIsMounting ||\n    dimensionsChanged ||\n    directionChanged ||\n    surfaceChanged ||\n    !haveSameLayerNodeTree(slot.retainedTree, nextRoot) ||\n    slot.focusRenderRevision !== focusRenderRevision ||\n    hasPendingInstanceRender(layerPibbl);\n  if (shouldRender) {\n    if (layerPibbl.surface.kind !== 'layer') {\n      throw new Error('Pibbl layer mounted without a derived surface.');\n    }\n    layerPibbl.surface.snapshot = layerSurface;\n    layerPibbl.surface.managed = true;\n    offscreenCanvas.width = layerSurface.backingWidth;\n    offscreenCanvas.height = layerSurface.backingHeight;\n    slot.logicalWidth = width;\n    slot.logicalHeight = height;\n\n    const renderedRevision = layerPibbl.requestedRenderRevision;\n    const previousRootLayoutDirection = layerPibbl.rootLayoutDirection;\n    layerPibbl.rootLayoutDirection = layoutDirection;\n    try {\n      executeRender(\n        offscreenCanvas,\n        getCurrentPibblInstance().renderTimestamp,\n        nextRoot,\n        false,\n      );\n      completeInstanceRenderRevision(layerPibbl, renderedRevision);\n      slot.retainedTree = snapshotLayerNodeTree(nextRoot);\n      slot.layoutDirection = layoutDirection;\n    } catch (error) {\n      layerPibbl.rootLayoutDirection = previousRootLayoutDirection;\n      throw error;\n    }\n  } else {\n    if (nativeLayout) retainPreparedBoundarySubtree(preparedBoundary);\n    parentInstance.eventRoot.focusPolicy?.replayRetainedSubtree(layerPibbl);\n  }\n  const renderedFocusPolicy = parentInstance.eventRoot.focusPolicy;\n  slot.focusRenderRevision =\n    renderedFocusPolicy?.layerFocusRenderRevision?.(layerPibbl);\n\n  parentInstance.eventRoot.html?.recordLayer(parentInstance, layerPibbl, interactionLayer, ctx.globalAlpha, ctx.globalCompositeOperation);\n\n  ctx.drawImage(\n    offscreenCanvas,\n    0,\n    0,\n    offscreenCanvas.width,\n    offscreenCanvas.height,\n    0,\n    0,\n    width,\n    height,\n  );\n\n}\n\n/**\n * Describes a retained offscreen composition layer.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link LayerProps}\n * @see {@link LayerStyle}\n */\nexport const Layer = definePrimitive<\n  LayerProps,\n  LayerStyle,\n  LayerStyle,\n  ResolvedLayerStyle\n>(renderLayer, {\n  childInput: 'structural',\n  resolveStyle: resolveLayerStyle,\n});\n\nif (nativeLayout) registerKnownLayoutPreflight(Layer, (element, _style, content, receiver, slot) => {\n  const previous = GLOBAL_STATE.primitiveReceiverToken;\n  GLOBAL_STATE.primitiveReceiverToken = receiver;\n  try {\n    const children = prepareLayoutChildren(element.props.children, 'Layer');\n    const placed = children.slice();\n    let occurrences: Map<Function, number> | undefined;\n    for (let index = 0; index < children.length; index++) {\n      const child = children[index];\n      // Layer is a raster boundary, not a layout algorithm for arbitrary children.\n      if (!isKnownLayoutType(child.type) && !isLayoutComponent(child.type)) continue;\n      let occurrence = 0;\n      if (child.key === undefined) {\n        occurrences ??= new Map(); occurrence = occurrences.get(child.type) ?? 0;\n        occurrences.set(child.type, occurrence + 1);\n      }\n      const token = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, receiver, index);\n      const root = isLayoutComponent(child.type) ? prepareLayoutComponent(child, { receiverToken: token }) : child;\n      if (!isKnownLayoutType(root.type)) continue;\n      const component = root.type.name || 'Layout';\n      const prepared = prepareDirectChildStyle(child, token, content, true);\n      const style = preparedStyleValue(prepared);\n      const context = { component, algorithm: 'render-dispatch' as const, allocation: content, percentageBasis: content, constraints: { minWidth: 0, maxWidth: content.width, minHeight: 0, maxHeight: content.height } };\n      // A nested raster boundary uses Layer's actual dimensions, not box layout.\n      let width: number, height: number;\n      if (root.type === Layer) {\n        const layerStyle = resolveLayerStyle(style, context);\n        width = layerStyle.width!; height = layerStyle.height!;\n      } else {\n        const box = resolveContainerBox(style, context, component, 'render-dispatch');\n        width = box.contentBox.width; height = box.contentBox.height;\n      }\n      const nested = preflightKnownLayout(child, style, { x: 0, y: 0, width, height }, token, occurrence, slot);\n      const clone = clonePibblElement(child);\n      setPreNormalizedStyle(clone, style, child, token, preparedStyleQuery(prepared));\n      attachPreparedLayoutSlot(clone, nested); placed[index] = clone;\n    }\n    stagePreparedBoundaryChildren(slot, placed);\n  } finally { GLOBAL_STATE.primitiveReceiverToken = previous; }\n});\n\nfunction resolveLayerStyle(\n  style: Readonly<LayerStyle>,\n  context: Parameters<NonNullable<\n    import('../types.js').PrimitiveCapabilities<\n      LayerProps,\n      LayerStyle,\n      LayerStyle,\n      ResolvedLayerStyle\n    >['resolveStyle']\n  >>[1],\n): ResolvedLayerStyle {\n  return {\n    ...stripLayoutParticipation(style),\n    width: resolveRequiredLength(\n      style.width ?? context.allocation.width,\n      context.percentageBasis.width,\n      'width',\n      context,\n    ),\n    height: resolveRequiredLength(\n      style.height ?? context.allocation.height,\n      context.percentageBasis.height,\n      'height',\n      context,\n    ),\n  } as ResolvedLayerStyle;\n}\n\nfunction createPrivateLayerRoot(\n  children: readonly PibblElement<any>[],\n): PibblElement<FragmentProps> {\n  return createElement(Fragment, {\n    key: 'pibbl-layer-root',\n    children,\n  });\n}\n\nfunction createBounds(width: number, height: number): Path2D {\n  const bounds = new Path2D();\n  bounds.rect(0, 0, width, height);\n  return bounds;\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB,iCAAiC;AAC9D,SAAS,kCAAkC,0CAA0C;AACrF,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,mBAAmB,8BAA8B,sBAAsB,0BAA0B,+BAA+B,8BAA8B,uCAAuC,qCAAqC;AACnP,SAAS,uBAAuB,yBAAyB,2BAA2B;AACpF,SAAS,6BAA6B;AACtC,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB,0BAA0B;AACvD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,gBAAoC;AAC7C,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAO3B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMP;AAAA,EACE;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EAEE;AAAA,OACK;AAuCP,SAAS,YACP,OACA,OACA,KACA;AACA,uBAAqB,KAAK;AAC1B,QAAM,SAAS,aAAa;AAC5B,QAAM,EAAE,QAAQ,OAAO,OAAO,SAAS,OAAO,OAAO,IAAI;AACzD,QAAM,gBAAgB,aAAa;AACnC,MAAI,mBAAmB,cAAc;AACrC,MAAI,mBAAmB,eAAe,6BAA6B,gBAAgB,IAAI;AACvF,MAAI,gBAAgB,CAAC,kBAAkB;AACrC,UAAMA,QAAO,qBAAqB,kBAAkB,OAAO,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,OAAO,GAAG,aAAa,sBAAsB;AAE7H,uBAAmB,kBAAkB,gBAAgB;AACrD,6BAAyB,kBAAkBA,KAAI;AAC/C,uBAAmB,6BAA6B,gBAAgB;AAAA,EAClE;AACA,QAAM,uBAAuB,oBAAoB,6BAA6B,MAAM,UAAU,OAAO;AACrG,QAAM,gCAAgC,gBAAgB,sCAAsC,gBAAgB;AAC5G,QAAM,WAAW,uBAAuB,oBAAoB;AAC5D,QAAM,iBAAiB,wBAAwB;AAC/C,QAAM,gBAAgB,mBAAmB,cAAc;AACvD,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,EAChB;AACA,MAAI,aAAa,qBAAqB;AACpC,UAAMC,mBAAkB,IAAI;AAAA,MAC1B,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AACA,UAAM,aAAa,WAAWA,kBAAiB,UAAU;AAAA,MACvD,QAAQ;AAAA,MACR,SAAS;AAAA,IACX,CAAC;AACD,UAAM,gBAAgB,iBAAiBA,gBAAe;AACtD,kBAAc,cAAc;AAC5B,UAAMC,oBAA0C;AAAA,MAC9C,WAAW,oBAAoB;AAAA,MAC/B,UAAU;AAAA,MACV,WAAW,IAAI,UAAU;AAAA,MACzB,eAAe,CAAC;AAAA,MAChB,QAAQ,aAAa,OAAO,MAAM;AAAA,MAClC,cAAc;AAAA,IAChB;AACA,kBAAc,KAAK,CAAC,IAAI;AAAA,MACtB,QAAQD;AAAA,MACR,kBAAAC;AAAA,MACA,cAAc;AAAA,MACd,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,cAAc;AAAA,IAChB;AACA,UAAM,qBAAqB;AAAA,MACzB,eAAe,MAAM,eAAe,aAAa,OAAOA,iBAAgB;AAAA,IAC1E;AACA,qCAAiC,eAAe,kBAAkB;AAClE,kBAAc,UAAU,IAAI,MAAM;AAChC,yCAAmC,eAAe,kBAAkB;AACpE,kCAA4B,aAAa;AACzC,oBAAc,cAAc;AAC5B,qBAAe,aAAa,OAAOA,iBAAgB;AACnD,iBAAW,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,cAAc,KAAK,CAAC;AACjC,QAAM,kBAAkB,KAAK;AAC7B,QAAM,aAAa,iBAAiB,eAAe;AACnD,MAAI,aAAc;AAAA,IAA4B;AAAA,IAC5C,0BAA0B,KAAK,gCAAgC,iBAAiB;AAAA,EAAS;AAC3F,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,mBAAmB,KAAK,oBAAoB;AAClD,QAAM,oBAAoB,KAAK,iBAAiB,SAC9C,KAAK,kBAAkB;AACzB,QAAM,iBACJ,gBAAgB,UAAU,aAAa,gBACvC,gBAAgB,WAAW,aAAa;AAE1C,QAAM,EAAE,iBAAiB,IAAI;AAC7B,iBAAe,aAAa,OAAO,gBAAgB;AACnD,mBAAiB,YAAY,yBAAyB;AACtD,mBAAiB,gBAAgB,MAAM,KAAK,aAAa,aAAa;AACtE,MAAI,mBAAmB;AACrB,qBAAiB,SAAS,aAAa,OAAO,MAAM;AAAA,EACtD;AAGA,iBAAe,aAAa,IAAI,gBAAgB;AAEhD,QAAM,cAAc,eAAe,UAAU;AAC7C,QAAM,sBAAsB,aAAa,2BAA2B,UAAU;AAE9E,QAAM,eACJ,aAAa,uBACb,qBACA,oBACA,kBACA,CAAC,sBAAsB,KAAK,cAAc,QAAQ,KAClD,KAAK,wBAAwB,uBAC7B,yBAAyB,UAAU;AACrC,MAAI,cAAc;AAChB,QAAI,WAAW,QAAQ,SAAS,SAAS;AACvC,YAAM,IAAI,MAAM,gDAAgD;AAAA,IAClE;AACA,eAAW,QAAQ,WAAW;AAC9B,eAAW,QAAQ,UAAU;AAC7B,oBAAgB,QAAQ,aAAa;AACrC,oBAAgB,SAAS,aAAa;AACtC,SAAK,eAAe;AACpB,SAAK,gBAAgB;AAErB,UAAM,mBAAmB,WAAW;AACpC,UAAM,8BAA8B,WAAW;AAC/C,eAAW,sBAAsB;AACjC,QAAI;AACF;AAAA,QACE;AAAA,QACA,wBAAwB,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,MACF;AACA,qCAA+B,YAAY,gBAAgB;AAC3D,WAAK,eAAe,sBAAsB,QAAQ;AAClD,WAAK,kBAAkB;AAAA,IACzB,SAAS,OAAO;AACd,iBAAW,sBAAsB;AACjC,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,QAAI,aAAc,+BAA8B,gBAAgB;AAChE,mBAAe,UAAU,aAAa,sBAAsB,UAAU;AAAA,EACxE;AACA,QAAM,sBAAsB,eAAe,UAAU;AACrD,OAAK,sBACH,qBAAqB,2BAA2B,UAAU;AAE5D,iBAAe,UAAU,MAAM,YAAY,gBAAgB,YAAY,kBAAkB,IAAI,aAAa,IAAI,wBAAwB;AAEtI,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEF;AAYO,MAAM,QAAQ,gBAKnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAChB,CAAC;AAED,IAAI,aAAc,8BAA6B,OAAO,CAAC,SAAS,QAAQ,SAAS,UAAU,SAAS;AAClG,QAAM,WAAW,aAAa;AAC9B,eAAa,yBAAyB;AACtC,MAAI;AACF,UAAM,WAAW,sBAAsB,QAAQ,MAAM,UAAU,OAAO;AACtE,UAAM,SAAS,SAAS,MAAM;AAC9B,QAAI;AACJ,aAAS,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS;AACpD,YAAM,QAAQ,SAAS,KAAK;AAE5B,UAAI,CAAC,kBAAkB,MAAM,IAAI,KAAK,CAAC,kBAAkB,MAAM,IAAI,EAAG;AACtE,UAAI,aAAa;AACjB,UAAI,MAAM,QAAQ,QAAW;AAC3B,wBAAgB,oBAAI,IAAI;AAAG,qBAAa,YAAY,IAAI,MAAM,IAAI,KAAK;AACvE,oBAAY,IAAI,MAAM,MAAM,aAAa,CAAC;AAAA,MAC5C;AACA,YAAM,QAAQ,+BAA+B,aAAa,mBAAmB,UAAU,KAAK;AAC5F,YAAM,OAAO,kBAAkB,MAAM,IAAI,IAAI,uBAAuB,OAAO,EAAE,eAAe,MAAM,CAAC,IAAI;AACvG,UAAI,CAAC,kBAAkB,KAAK,IAAI,EAAG;AACnC,YAAM,YAAY,KAAK,KAAK,QAAQ;AACpC,YAAM,WAAW,wBAAwB,OAAO,OAAO,SAAS,IAAI;AACpE,YAAM,QAAQ,mBAAmB,QAAQ;AACzC,YAAM,UAAU,EAAE,WAAW,WAAW,mBAA4B,YAAY,SAAS,iBAAiB,SAAS,aAAa,EAAE,UAAU,GAAG,UAAU,QAAQ,OAAO,WAAW,GAAG,WAAW,QAAQ,OAAO,EAAE;AAElN,UAAI,OAAe;AACnB,UAAI,KAAK,SAAS,OAAO;AACvB,cAAM,aAAa,kBAAkB,OAAO,OAAO;AACnD,gBAAQ,WAAW;AAAQ,iBAAS,WAAW;AAAA,MACjD,OAAO;AACL,cAAM,MAAM,oBAAoB,OAAO,SAAS,WAAW,iBAAiB;AAC5E,gBAAQ,IAAI,WAAW;AAAO,iBAAS,IAAI,WAAW;AAAA,MACxD;AACA,YAAM,SAAS,qBAAqB,OAAO,OAAO,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,OAAO,GAAG,OAAO,YAAY,IAAI;AACxG,YAAM,QAAQ,kBAAkB,KAAK;AACrC,4BAAsB,OAAO,OAAO,OAAO,OAAO,mBAAmB,QAAQ,CAAC;AAC9E,+BAAyB,OAAO,MAAM;AAAG,aAAO,KAAK,IAAI;AAAA,IAC3D;AACA,kCAA8B,MAAM,MAAM;AAAA,EAC5C,UAAE;AAAU,iBAAa,yBAAyB;AAAA,EAAU;AAC9D,CAAC;AAED,SAAS,kBACP,OACA,SAQoB;AACpB,SAAO;AAAA,IACL,GAAG,yBAAyB,KAAK;AAAA,IACjC,OAAO;AAAA,MACL,MAAM,SAAS,QAAQ,WAAW;AAAA,MAClC,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,UAAU,QAAQ,WAAW;AAAA,MACnC,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,uBACP,UAC6B;AAC7B,SAAO,cAAc,UAAU;AAAA,IAC7B,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;AAEA,SAAS,aAAa,OAAe,QAAwB;AAC3D,QAAM,SAAS,IAAI,OAAO;AAC1B,SAAO,KAAK,GAAG,GAAG,OAAO,MAAM;AAC/B,SAAO;AACT;",
+  "names": ["slot", "offscreenCanvas", "interactionLayer"]
 }

package/dist/lib/components/text.d.ts

@@ -1,5 +1,6 @@
 import type { PibblEventFocusOptions, PibblEventHandlers, PibblEventParticipationOptions } from '../events/types.js';
 import type { TextStyle } from '../style/types.js';
+import { CanvasMeasurementService } from '../types.js';
 import type { PibblTextInput } from '../types.js';
 import type { PibblPhysics2DPropExtension } from '../types.js';
 /**
@@ -27,3 +28,18 @@ export interface TextProps extends PibblEventHandlers, PibblEventFocusOptions, P
  * @see {@link TextStyle}
  */
 export declare const Text: import("@pibbl/core").PibblPrimitiveComponent<TextProps, import("@pibbl/core").PrimitiveInput<TextProps, TextStyle>>;
+/** @internal Measure a materialized value without bypassing receiver reads. */
+export declare function measureLayoutTextNaturalRun(text: string, options: {
+    font: string;
+    service: CanvasMeasurementService;
+}): number;
+/** @internal Longest run under Text's existing ASCII-space wrapping contract. */
+export declare function measureLayoutTextMinimumWidth(props: Readonly<TextProps>, options: {
+    font: string;
+    service: CanvasMeasurementService;
+    receiverToken?: object;
+}): number;
+/** @internal Prepare measured Text through its existing transaction/receiver ownership. */
+export declare function prepareLayoutTextContent(props: Readonly<TextProps>, options: {
+    receiverToken?: object;
+}): string;