@pibbl/core 0.0.1

package/dist/lib/layout/absolute.js

@@ -0,0 +1,348 @@
+import { ResponsiveStylePreparation, preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
+import { definePrimitive } from "../define-primitive.js";
+import { EMPTY_STYLE } from "../style/empty-style.js";
+import { materializeContainerChildren } from "../element/children.js";
+import { clonePibblElement } from "../element/create-element.js";
+import {
+  getPrimitiveDefinition,
+  getChildPrimitiveReceiverToken,
+  setPlacementConsumed
+} from "../element/metadata.js";
+import { resolvePrimitiveStyleInput } from "../element/resolve-primitive-inputs.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { normalizeEdges } from "../style/normalize.js";
+import { resolveLength } from "../style/resolve-length.js";
+import {
+  extractSystemFilter,
+  setPreNormalizedStyle,
+  withoutSystemFilter
+} from "../style/resolve-dispatch.js";
+import { layoutDiagnostic } from "../style/diagnostics.js";
+import {
+  wireStructuralEvents
+} from "../components/structural-events.js";
+import { pushLayoutBox } from "./context.js";
+import { recordLayoutEvaluation } from "./diagnostics.js";
+import { resolveBox } from "./box.js";
+import {
+  createPlacementIdentityHint,
+  placeChild
+} from "./place-child.js";
+import { withReceiverInputProvision } from "../signals/input-provision.js";
+const preparedLayoutTransactions = /* @__PURE__ */ new WeakMap();
+function renderAbsolute(props, style, ctx) {
+  wireStructuralEvents(props);
+  const children = prepareLayoutChildren(props.children, "Absolute");
+  recordLayoutEvaluation();
+  const content = style.box.contentBox;
+  ctx.translate(content.x, content.y);
+  const localContent = Object.freeze({
+    x: 0,
+    y: 0,
+    width: content.width,
+    height: content.height
+  });
+  const releaseLayout = pushLayoutBox(localContent);
+  GLOBAL_STATE.componentRefs.onAfterRender = releaseLayout;
+  let occurrence = 0;
+  return placeDirectChildren(
+    children,
+    localContent,
+    (child) => resolveAbsoluteChildPlacement(
+      localContent,
+      child,
+      getChildPrimitiveReceiverToken(
+        GLOBAL_STATE.renderTransaction,
+        GLOBAL_STATE.primitiveReceiverToken,
+        occurrence++
+      )
+    ),
+    style.overflow
+  );
+}
+const Absolute = definePrimitive(renderAbsolute, {
+  childInput: "structural",
+  resolveStyle: (style, context) => ({
+    box: resolveContainerBox(style, context, "Absolute", "absolute"),
+    overflow: style.overflow ?? "visible"
+  })
+});
+function resolveContainerBox(style, context, component, algorithm) {
+  return resolveLayoutBox(style, context, component, algorithm, false);
+}
+function placeAbsoluteChild(container, child) {
+  return resolveAbsoluteChildPlacement(container, child).box;
+}
+function resolveAbsoluteChildPlacement(container, child, receiverToken) {
+  const prepared = prepareDirectChildStyle(child, receiverToken, container);
+  const style = preparedStyleValue(prepared);
+  const resolved = resolveDirectChildBox(container, child, "absolute", style);
+  const context = childDiagnosticContext(child, container, "absolute");
+  const left = resolveLength(style.left ?? 0, container.width, "left", context);
+  const top = resolveLength(style.top ?? 0, container.height, "top", context);
+  const box = {
+    x: finitePlacement(container.x + left, "left", left, context),
+    y: finitePlacement(container.y + top, "top", top, context),
+    width: resolved.borderBox.width,
+    height: resolved.borderBox.height
+  };
+  return {
+    box,
+    element: childWithUsedSize(
+      child,
+      style,
+      resolved.contentBox.width,
+      resolved.contentBox.height,
+      receiverToken,
+      preparedStyleQuery(prepared)
+    )
+  };
+}
+function childWithUsedSize(child, style, width, height, receiverToken, query) {
+  const renderedChild = clonePibblElement(child);
+  setPlacementConsumed(renderedChild);
+  setPreNormalizedStyle(renderedChild, Object.freeze({
+    ...style,
+    width,
+    height
+  }), child, receiverToken, query);
+  return renderedChild;
+}
+function resolveDirectChildBox(container, child, algorithm, style = normalizeDirectChildStyle(child, void 0, container)) {
+  return resolveLayoutBox(
+    style,
+    {
+      allocation: container,
+      percentageBasis: container,
+      constraints: {
+        minWidth: 0,
+        maxWidth: container.width,
+        minHeight: 0,
+        maxHeight: container.height
+      },
+      component: child.type.name || "Anonymous",
+      algorithm: "render-dispatch"
+    },
+    child.type.name || "Anonymous",
+    algorithm,
+    true
+  );
+}
+function normalizeDirectChildStyle(child, receiverToken, queryBasis) {
+  return preparedStyleValue(prepareDirectChildStyle(child, receiverToken, queryBasis));
+}
+function prepareDirectChildStyle(child, receiverToken, queryBasis) {
+  const definition = getPrimitiveDefinition(child.type);
+  const prepared = withReceiverInputProvision(
+    GLOBAL_STATE.renderTransaction,
+    receiverToken,
+    () => resolvePrimitiveStyleInput(
+      child.props.style,
+      child,
+      queryBasis
+    ) ?? EMPTY_STYLE
+  );
+  const style = preparedStyleValue(prepared);
+  const filter = extractSystemFilter(style);
+  const normalized = definition?.normalizeStyle ? definition.normalizeStyle(withoutSystemFilter(style)) : withoutSystemFilter(style);
+  const final = { ...normalized, ...filter === void 0 ? {} : { filter }, ...style.transition === void 0 ? {} : { transition: style.transition } };
+  if (prepared instanceof ResponsiveStylePreparation) {
+    prepared.style = final;
+    return prepared;
+  }
+  return final;
+}
+function placeDirectChildren(children, contentBox, place, overflow) {
+  const occurrences = /* @__PURE__ */ new Map();
+  const placed = [];
+  for (const child of children) {
+    const occurrence = child.key === void 0 ? occurrences.get(child.type) ?? 0 : 0;
+    if (child.key === void 0) {
+      occurrences.set(child.type, occurrence + 1);
+    }
+    const placement = place(child);
+    const box = "box" in placement ? placement.box : placement;
+    const element = "box" in placement ? placement.element : child;
+    placed.push(placeChild({
+      element,
+      box,
+      clipInChildSpace: overflow === "clip" ? {
+        x: contentBox.x - box.x,
+        y: contentBox.y - box.y,
+        width: contentBox.width,
+        height: contentBox.height
+      } : void 0,
+      identityHint: createPlacementIdentityHint(child, occurrence)
+    }));
+  }
+  return placed;
+}
+function materializeLayoutChildren(children, receiver) {
+  return materializeContainerChildren(children, receiver, {
+    validateKeys: false
+  });
+}
+function prepareLayoutChildren(children, receiver) {
+  const transaction = GLOBAL_STATE.renderTransaction;
+  const receiverToken = GLOBAL_STATE.primitiveReceiverToken;
+  if (!transaction || !receiverToken) {
+    return materializeLayoutChildren(children, receiver);
+  }
+  let receivers = preparedLayoutTransactions.get(transaction);
+  if (!receivers) {
+    receivers = /* @__PURE__ */ new WeakMap();
+    preparedLayoutTransactions.set(transaction, receivers);
+  }
+  const prepared = receivers.get(receiverToken);
+  if (prepared) return prepared;
+  const materialized = withReceiverInputProvision(
+    transaction,
+    receiverToken,
+    () => materializeLayoutChildren(children, receiver)
+  );
+  receivers.set(receiverToken, materialized);
+  return materialized;
+}
+function resolveLayoutBox(style, context, component, algorithm, requireDefinite) {
+  if (requireDefinite && (style.width === void 0 || style.width === "auto")) {
+    throw requiredDimension(component, "width", style.width, context, algorithm);
+  }
+  if (requireDefinite && (style.height === void 0 || style.height === "auto")) {
+    throw requiredDimension(component, "height", style.height, context, algorithm);
+  }
+  const diagnosticContext = {
+    component,
+    algorithm,
+    constraints: context.constraints
+  };
+  const width = resolveOptionalAllocationLength(
+    style.width,
+    context.percentageBasis.width,
+    "width",
+    diagnosticContext
+  );
+  const height = resolveOptionalAllocationLength(
+    style.height,
+    context.percentageBasis.height,
+    "height",
+    diagnosticContext
+  );
+  const minWidth = resolveOptionalAllocationLength(
+    style.minWidth,
+    context.percentageBasis.width,
+    "minWidth",
+    diagnosticContext
+  );
+  const maxWidth = resolveOptionalAllocationLength(
+    style.maxWidth,
+    context.percentageBasis.width,
+    "maxWidth",
+    diagnosticContext
+  );
+  const minHeight = resolveOptionalAllocationLength(
+    style.minHeight,
+    context.percentageBasis.height,
+    "minHeight",
+    diagnosticContext
+  );
+  const maxHeight = resolveOptionalAllocationLength(
+    style.maxHeight,
+    context.percentageBasis.height,
+    "maxHeight",
+    diagnosticContext
+  );
+  const padding = normalizeEdges(style.padding, "padding", diagnosticContext);
+  const allowOverflow = requireDefinite;
+  const maxConstraintWidth = allowOverflow ? allocationCeiling(
+    context.allocation.width,
+    [width, minWidth, maxWidth],
+    padding.left + padding.right,
+    "width",
+    diagnosticContext
+  ) : context.allocation.width;
+  const maxConstraintHeight = allowOverflow ? allocationCeiling(
+    context.allocation.height,
+    [height, minHeight, maxHeight],
+    padding.top + padding.bottom,
+    "height",
+    diagnosticContext
+  ) : context.allocation.height;
+  return resolveBox({
+    ...style,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  }, {
+    minWidth: 0,
+    maxWidth: maxConstraintWidth,
+    minHeight: 0,
+    maxHeight: maxConstraintHeight
+  }, diagnosticContext);
+}
+function resolveOptionalAllocationLength(value, reference, property, context) {
+  if (value === void 0) return void 0;
+  return resolveLength(value, reference, property, context);
+}
+function allocationCeiling(allocation, values, padding, property, context) {
+  const ceiling = Math.max(allocation, ...values.filter(
+    (value) => value !== void 0
+  )) + padding;
+  if (!Number.isFinite(ceiling)) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value: ceiling,
+      reason: "resolved allocation arithmetic must remain finite"
+    });
+  }
+  return ceiling;
+}
+function requiredDimension(component, property, value, context, algorithm) {
+  return layoutDiagnostic({
+    component,
+    property,
+    value: value ?? "auto",
+    algorithm,
+    constraints: context.constraints,
+    reason: "requires a definite dimension until measurement is available"
+  });
+}
+function childDiagnosticContext(child, container, algorithm) {
+  return {
+    component: child.type.name || "Anonymous",
+    algorithm,
+    constraints: {
+      minWidth: 0,
+      maxWidth: container.width,
+      minHeight: 0,
+      maxHeight: container.height
+    }
+  };
+}
+function finitePlacement(resolved, property, value, context) {
+  if (!Number.isFinite(resolved)) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value,
+      reason: "resolved placement arithmetic must remain finite"
+    });
+  }
+  return resolved;
+}
+export {
+  Absolute,
+  childWithUsedSize,
+  materializeLayoutChildren,
+  normalizeDirectChildStyle,
+  placeAbsoluteChild,
+  placeDirectChildren,
+  prepareDirectChildStyle,
+  prepareLayoutChildren,
+  resolveContainerBox,
+  resolveDirectChildBox
+};
+//# sourceMappingURL=absolute.js.map

package/dist/lib/layout/absolute.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/absolute.ts"],
+  "sourcesContent": ["import { ResponsiveStylePreparation, preparedStyleValue, preparedStyleQuery, type PreparedQuery } from '../style/responsive.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { EMPTY_STYLE } from '../style/empty-style.js';\nimport { materializeContainerChildren } from '../element/children.js';\nimport { clonePibblElement } from '../element/create-element.js';\nimport {\n  getPrimitiveDefinition,\n  getChildPrimitiveReceiverToken,\n  setPlacementConsumed,\n} from '../element/metadata.js';\nimport { resolvePrimitiveStyleInput } from '../element/resolve-primitive-inputs.js';\nimport type { PibblElement } from '../element/types.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { normalizeEdges } from '../style/normalize.js';\nimport { resolveLength } from '../style/resolve-length.js';\nimport {\n  extractSystemFilter,\n  setPreNormalizedStyle,\n  withoutSystemFilter,\n} from '../style/resolve-dispatch.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedBoxStyle,\n} from '../style/types.js';\nimport type {\n  PibblNodeInput,\n  PibblRenderTransaction,\n  RenderingContext2D,\n  StyleResolutionContext,\n  SystemStyle,\n} from '../types.js';\nimport { layoutDiagnostic } from '../style/diagnostics.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from '../components/structural-events.js';\nimport { pushLayoutBox } from './context.js';\nimport { recordLayoutEvaluation } from './diagnostics.js';\nimport { resolveBox } from './box.js';\nimport {\n  createPlacementIdentityHint,\n  placeChild,\n} from './place-child.js';\nimport type { LayoutBox } from './types.js';\nimport { withReceiverInputProvision } from '../signals/input-provision.js';\n\n/**\n * Supported geometry and presentation properties for Absolute.\n *\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Absolute}\n */\nexport type AbsoluteStyle = BoxStyle & LayoutItemStyle;\n\n/**\n * Authored inputs for Absolute, including the declared data and presentation options.\n *\n * @see {@link PibblNodeInput}\n * @see {@link Absolute}\n */\nexport interface AbsoluteProps extends PibblStructuralEventProps {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\ninterface ResolvedAbsoluteStyle extends SystemStyle {\n  box: ResolvedBoxStyle;\n  overflow: 'visible' | 'clip';\n}\n\ntype LayoutReceiver = 'Absolute' | 'Overlay' | 'Flow' | 'Flex' | 'Grid';\n\nconst preparedLayoutTransactions = new WeakMap<\n  PibblRenderTransaction,\n  WeakMap<object, readonly PibblElement<any>[]>\n>();\n\nfunction renderAbsolute(\n  props: AbsoluteProps,\n  style: Readonly<ResolvedAbsoluteStyle>,\n  ctx: RenderingContext2D,\n) {\n  wireStructuralEvents(props);\n  const children = prepareLayoutChildren(props.children, 'Absolute');\n  recordLayoutEvaluation();\n  const content = style.box.contentBox;\n  ctx.translate(content.x, content.y);\n  const localContent = Object.freeze({\n    x: 0,\n    y: 0,\n    width: content.width,\n    height: content.height,\n  });\n  const releaseLayout = pushLayoutBox(localContent);\n  GLOBAL_STATE.componentRefs!.onAfterRender = releaseLayout;\n\n  let occurrence = 0;\n  return placeDirectChildren(\n    children,\n    localContent,\n    child => resolveAbsoluteChildPlacement(\n      localContent,\n      child,\n      getChildPrimitiveReceiverToken(\n        GLOBAL_STATE.renderTransaction,\n        GLOBAL_STATE.primitiveReceiverToken,\n        occurrence++,\n      ),\n    ),\n    style.overflow,\n  );\n}\n\n/**\n * Describes absolute layout 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 AbsoluteProps}\n * @see {@link AbsoluteStyle}\n */\nexport const Absolute = definePrimitive<\n  AbsoluteProps,\n  AbsoluteStyle,\n  AbsoluteStyle,\n  ResolvedAbsoluteStyle\n>(renderAbsolute, {\n  childInput: 'structural',\n  resolveStyle: (style, context) => ({\n    box: resolveContainerBox(style, context, 'Absolute', 'absolute'),\n    overflow: style.overflow ?? 'visible',\n  }),\n});\n\n/** @internal Resolves a layout container without inspecting its children. */\nexport function resolveContainerBox(\n  style: Readonly<BoxStyle>,\n  context: Readonly<StyleResolutionContext>,\n  component: string,\n  algorithm: string,\n): ResolvedBoxStyle {\n  return resolveLayoutBox(style, context, component, algorithm, false);\n}\n\nexport function placeAbsoluteChild(\n  container: Readonly<LayoutBox>,\n  child: PibblElement<any>,\n): LayoutBox {\n  return resolveAbsoluteChildPlacement(container, child).box;\n}\n\nfunction resolveAbsoluteChildPlacement(\n  container: Readonly<LayoutBox>,\n  child: PibblElement<any>,\n  receiverToken?: object,\n): { box: LayoutBox; element: PibblElement<any> } {\n  const prepared = prepareDirectChildStyle(child, receiverToken, container);\n  const style = preparedStyleValue(prepared) as Readonly<\n    BoxStyle & LayoutItemStyle\n  >;\n  const resolved = resolveDirectChildBox(container, child, 'absolute', style);\n  const context = childDiagnosticContext(child, container, 'absolute');\n  const left = resolveLength(style.left ?? 0, container.width, 'left', context)!;\n  const top = resolveLength(style.top ?? 0, container.height, 'top', context)!;\n  const box = {\n    x: finitePlacement(container.x + left, 'left', left, context),\n    y: finitePlacement(container.y + top, 'top', top, context),\n    width: resolved.borderBox.width,\n    height: resolved.borderBox.height,\n  };\n  return {\n    box,\n    element: childWithUsedSize(\n      child,\n      style,\n      resolved.contentBox.width,\n      resolved.contentBox.height,\n      receiverToken,\n      preparedStyleQuery(prepared),\n    ),\n  };\n}\n\n/** @internal Carries normalized finite content size into the eventual render. */\nexport function childWithUsedSize(\n  child: PibblElement<any>,\n  style: Readonly<SystemStyle>,\n  width: number,\n  height: number,\n  receiverToken?: object,\n  query?: PreparedQuery,\n): PibblElement<any> {\n  const renderedChild = clonePibblElement(child);\n  setPlacementConsumed(renderedChild);\n  setPreNormalizedStyle(renderedChild, Object.freeze({\n    ...style,\n    width,\n    height,\n  }), child, receiverToken, query);\n  return renderedChild;\n}\n\n/** @internal Shared by the initial direct-child layout algorithms. */\nexport function resolveDirectChildBox(\n  container: Readonly<LayoutBox>,\n  child: PibblElement<any>,\n  algorithm: string,\n  style: Readonly<SystemStyle> = normalizeDirectChildStyle(child, undefined, container),\n): ResolvedBoxStyle {\n  return resolveLayoutBox(\n    style as Readonly<BoxStyle>,\n    {\n      allocation: container,\n      percentageBasis: container,\n      constraints: {\n        minWidth: 0,\n        maxWidth: container.width,\n        minHeight: 0,\n        maxHeight: container.height,\n      },\n      component: child.type.name || 'Anonymous',\n      algorithm: 'render-dispatch',\n    },\n    child.type.name || 'Anonymous',\n    algorithm,\n    true,\n  );\n}\n\n/** @internal Normalizes a descriptor without resolving or invoking its callback. */\nexport function normalizeDirectChildStyle(\n  child: PibblElement<any>,\n  receiverToken?: object,\n  queryBasis?: Readonly<LayoutBox>,\n): Readonly<SystemStyle> {\n  return preparedStyleValue(prepareDirectChildStyle(child, receiverToken, queryBasis));\n}\n\n/** Carries responsive eligibility with this normalization, never with a token. */\nexport function prepareDirectChildStyle(\n  child: PibblElement<any>,\n  receiverToken?: object,\n  queryBasis?: Readonly<LayoutBox>,\n): Readonly<SystemStyle> | ResponsiveStylePreparation<Readonly<SystemStyle>> {\n  const definition = getPrimitiveDefinition(child.type);\n  const prepared = withReceiverInputProvision(\n    GLOBAL_STATE.renderTransaction,\n    receiverToken,\n    () => resolvePrimitiveStyleInput(\n      (child.props as { readonly style?: unknown }).style,\n      child, queryBasis,\n    ) ?? EMPTY_STYLE,\n  );\n  const style = preparedStyleValue(prepared);\n  const filter = extractSystemFilter(style);\n  const normalized = definition?.normalizeStyle ?\n      definition.normalizeStyle(withoutSystemFilter(style)) :\n      withoutSystemFilter(style);\n  const final = { ...normalized, ...(filter === undefined ? {} : { filter }), ...(style.transition === undefined ? {} : { transition: (style as Readonly<SystemStyle>).transition }) };\n  if (prepared instanceof ResponsiveStylePreparation) {\n    prepared.style = final;\n    return prepared;\n  }\n  return final;\n}\n\n/** @internal Converts source-order descriptors to stable placed children. */\nexport function placeDirectChildren(\n  children: readonly PibblElement<any>[],\n  contentBox: Readonly<LayoutBox>,\n  place: (child: PibblElement<any>) => LayoutBox | {\n    box: LayoutBox;\n    element: PibblElement<any>;\n  },\n  overflow: 'visible' | 'clip',\n): PibblElement<any>[] {\n  const occurrences = new Map<Function, number>();\n  const placed: PibblElement<any>[] = [];\n  for (const child of children) {\n    const occurrence = child.key === undefined ?\n      occurrences.get(child.type) ?? 0 :\n      0;\n    if (child.key === undefined) {\n      occurrences.set(child.type, occurrence + 1);\n    }\n    const placement = place(child);\n    const box = 'box' in placement ? placement.box : placement;\n    const element = 'box' in placement ? placement.element : child;\n    placed.push(placeChild({\n      element,\n      box,\n      clipInChildSpace: overflow === 'clip' ? {\n        x: contentBox.x - box.x,\n        y: contentBox.y - box.y,\n        width: contentBox.width,\n        height: contentBox.height,\n      } : undefined,\n      identityHint: createPlacementIdentityHint(child, occurrence),\n    }));\n  }\n  return placed;\n}\n\n/** @internal Prepares one finite direct-child sequence for a layout boundary. */\nexport function materializeLayoutChildren(\n  children: PibblNodeInput,\n  receiver: LayoutReceiver,\n): readonly PibblElement<any>[] {\n  // Placement identity owns layout sibling keys. Deferring its check preserves\n  // fail-closed teardown when a later duplicate follows an acquired child.\n  return materializeContainerChildren(children, receiver, {\n    validateKeys: false,\n  });\n}\n\n/** @internal Shares one direct sequence between an occurrence's measurement and paint. */\nexport function prepareLayoutChildren(\n  children: PibblNodeInput,\n  receiver: LayoutReceiver,\n): readonly PibblElement<any>[] {\n  const transaction = GLOBAL_STATE.renderTransaction;\n  const receiverToken = GLOBAL_STATE.primitiveReceiverToken;\n  if (!transaction || !receiverToken) {\n    return materializeLayoutChildren(children, receiver);\n  }\n\n  let receivers = preparedLayoutTransactions.get(transaction);\n  if (!receivers) {\n    receivers = new WeakMap();\n    preparedLayoutTransactions.set(transaction, receivers);\n  }\n  const prepared = receivers.get(receiverToken);\n  if (prepared) return prepared;\n  const materialized = withReceiverInputProvision(\n    transaction,\n    receiverToken,\n    () => materializeLayoutChildren(children, receiver),\n  );\n  receivers.set(receiverToken, materialized);\n  return materialized;\n}\n\nfunction resolveLayoutBox(\n  style: Readonly<BoxStyle>,\n  context: Readonly<StyleResolutionContext>,\n  component: string,\n  algorithm: string,\n  requireDefinite: boolean,\n): ResolvedBoxStyle {\n  if (requireDefinite && (style.width === undefined || style.width === 'auto')) {\n    throw requiredDimension(component, 'width', style.width, context, algorithm);\n  }\n  if (requireDefinite && (style.height === undefined || style.height === 'auto')) {\n    throw requiredDimension(component, 'height', style.height, context, algorithm);\n  }\n\n  const diagnosticContext = {\n    component,\n    algorithm,\n    constraints: context.constraints,\n  };\n  const width = resolveOptionalAllocationLength(\n    style.width,\n    context.percentageBasis.width,\n    'width',\n    diagnosticContext,\n  );\n  const height = resolveOptionalAllocationLength(\n    style.height,\n    context.percentageBasis.height,\n    'height',\n    diagnosticContext,\n  );\n  const minWidth = resolveOptionalAllocationLength(\n    style.minWidth,\n    context.percentageBasis.width,\n    'minWidth',\n    diagnosticContext,\n  );\n  const maxWidth = resolveOptionalAllocationLength(\n    style.maxWidth,\n    context.percentageBasis.width,\n    'maxWidth',\n    diagnosticContext,\n  );\n  const minHeight = resolveOptionalAllocationLength(\n    style.minHeight,\n    context.percentageBasis.height,\n    'minHeight',\n    diagnosticContext,\n  );\n  const maxHeight = resolveOptionalAllocationLength(\n    style.maxHeight,\n    context.percentageBasis.height,\n    'maxHeight',\n    diagnosticContext,\n  );\n  const padding = normalizeEdges(style.padding, 'padding', diagnosticContext);\n  const allowOverflow = requireDefinite;\n  const maxConstraintWidth = allowOverflow ? allocationCeiling(\n    context.allocation.width,\n    [width, minWidth, maxWidth],\n    padding.left + padding.right,\n    'width',\n    diagnosticContext,\n  ) : context.allocation.width;\n  const maxConstraintHeight = allowOverflow ? allocationCeiling(\n    context.allocation.height,\n    [height, minHeight, maxHeight],\n    padding.top + padding.bottom,\n    'height',\n    diagnosticContext,\n  ) : context.allocation.height;\n\n  return resolveBox({\n    ...style,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n  }, {\n    minWidth: 0,\n    maxWidth: maxConstraintWidth,\n    minHeight: 0,\n    maxHeight: maxConstraintHeight,\n  }, diagnosticContext);\n}\n\nfunction resolveOptionalAllocationLength(\n  value: BoxStyle['width'],\n  reference: number,\n  property: string,\n  context: Parameters<typeof resolveLength>[3],\n): number | undefined {\n  if (value === undefined) return undefined;\n  return resolveLength(value, reference, property, context);\n}\n\nfunction allocationCeiling(\n  allocation: number,\n  values: readonly (number | undefined)[],\n  padding: number,\n  property: string,\n  context: Parameters<typeof resolveLength>[3],\n): number {\n  const ceiling = Math.max(allocation, ...values.filter(\n    (value): value is number => value !== undefined,\n  )) + padding;\n  if (!Number.isFinite(ceiling)) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value: ceiling,\n      reason: 'resolved allocation arithmetic must remain finite',\n    });\n  }\n  return ceiling;\n}\n\nfunction requiredDimension(\n  component: string,\n  property: 'width' | 'height',\n  value: unknown,\n  context: Readonly<StyleResolutionContext>,\n  algorithm: string,\n) {\n  return layoutDiagnostic({\n    component,\n    property,\n    value: value ?? 'auto',\n    algorithm,\n    constraints: context.constraints,\n    reason: 'requires a definite dimension until measurement is available',\n  });\n}\n\nfunction childDiagnosticContext(\n  child: PibblElement<any>,\n  container: Readonly<LayoutBox>,\n  algorithm: string,\n) {\n  return {\n    component: child.type.name || 'Anonymous',\n    algorithm,\n    constraints: {\n      minWidth: 0,\n      maxWidth: container.width,\n      minHeight: 0,\n      maxHeight: container.height,\n    },\n  };\n}\n\nfunction finitePlacement(\n  resolved: number,\n  property: string,\n  value: unknown,\n  context: ReturnType<typeof childDiagnosticContext>,\n): number {\n  if (!Number.isFinite(resolved)) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value,\n      reason: 'resolved placement arithmetic must remain finite',\n    });\n  }\n  return resolved;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/lib/layout/box.d.ts

@@ -0,0 +1,19 @@
+import { type LayoutDiagnosticContext } from '../style/diagnostics.js';
+import type { BoxStyle, ResolvedBoxStyle } from '../style/types.js';
+import type { Constraints } from './types.js';
+/**
+ * Resolves declared box sizing and padding into border and content boxes under parent constraints.
+ *
+ * @param style - Declared box sizing and edge properties. See {@link BoxStyle}.
+ * @param constraints - Available dimensions used to resolve percentages and constraints. See
+ * {@link Constraints} .
+ * @param context - Component and property context for diagnostic messages. See
+ * {@link LayoutDiagnosticContext} .
+ * @returns Resolved box dimensions and edge values. See {@link ResolvedBoxStyle}.
+ *
+ * @see {@link BoxStyle}
+ * @see {@link Constraints}
+ * @see {@link LayoutDiagnosticContext}
+ * @see {@link ResolvedBoxStyle}
+ */
+export declare function resolveBox(style: Readonly<BoxStyle>, constraints: Readonly<Constraints>, context?: Readonly<LayoutDiagnosticContext>): ResolvedBoxStyle;

package/dist/lib/layout/box.js

@@ -0,0 +1,209 @@
+import {
+  layoutDiagnostic
+} from "../style/diagnostics.js";
+import { normalizeEdges } from "../style/normalize.js";
+import { resolveLength } from "../style/resolve-length.js";
+function resolveBox(style, constraints, context = {}) {
+  const diagnosticContext = {
+    component: context.component ?? "layout",
+    algorithm: context.algorithm ?? "box-resolution",
+    constraints
+  };
+  validateConstraints(constraints, diagnosticContext);
+  const padding = normalizeEdges(style.padding, "padding", diagnosticContext);
+  const horizontal = resolveAxis(
+    "width",
+    style.width,
+    style.minWidth,
+    style.maxWidth,
+    constraints.minWidth,
+    constraints.maxWidth,
+    padding.left,
+    padding.right,
+    diagnosticContext
+  );
+  const vertical = resolveAxis(
+    "height",
+    style.height,
+    style.minHeight,
+    style.maxHeight,
+    constraints.minHeight,
+    constraints.maxHeight,
+    padding.top,
+    padding.bottom,
+    diagnosticContext
+  );
+  return {
+    borderBox: {
+      x: 0,
+      y: 0,
+      width: horizontal.border,
+      height: vertical.border
+    },
+    contentBox: {
+      x: padding.left,
+      y: padding.top,
+      width: horizontal.content,
+      height: vertical.content
+    }
+  };
+}
+function resolveAxis(axis, specified, specifiedMinimum, specifiedMaximum, constraintMinimum, constraintMaximum, paddingStart, paddingEnd, context) {
+  const minimumProperty = axis === "width" ? "minWidth" : "minHeight";
+  const maximumProperty = axis === "width" ? "maxWidth" : "maxHeight";
+  const minimum = specifiedMinimum === void 0 ? 0 : resolveAllocationLength(
+    specifiedMinimum,
+    constraintMaximum,
+    minimumProperty,
+    context
+  );
+  const maximum = specifiedMaximum === void 0 ? Number.POSITIVE_INFINITY : resolveAllocationLength(
+    specifiedMaximum,
+    constraintMaximum,
+    maximumProperty,
+    context
+  );
+  if (minimum > maximum) {
+    throw layoutDiagnostic({
+      ...context,
+      property: minimumProperty,
+      value: minimum,
+      reason: `${minimumProperty} ${minimum} must not exceed ${maximumProperty} ${maximum}`
+    });
+  }
+  const padding = requireFiniteArithmetic(
+    paddingStart + paddingEnd,
+    axis,
+    context
+  );
+  const resolved = specified === void 0 ? void 0 : resolveLength(specified, constraintMaximum, axis, context);
+  let content;
+  if (resolved === void 0) {
+    if (!Number.isFinite(constraintMaximum)) {
+      throw layoutDiagnostic({
+        ...context,
+        property: axis,
+        value: specified ?? "auto",
+        reason: "requires a definite finite allocation for auto sizing"
+      });
+    }
+    content = Math.max(
+      0,
+      requireFiniteArithmetic(constraintMaximum - padding, axis, context)
+    );
+  } else {
+    if (resolved < 0) {
+      throw layoutDiagnostic({
+        ...context,
+        property: axis,
+        value: specified,
+        reason: "must be nonnegative when used as a layout allocation"
+      });
+    }
+    content = resolved;
+  }
+  content = Math.min(maximum, Math.max(minimum, content));
+  const paddedContent = requireFiniteArithmetic(
+    content + padding,
+    axis,
+    context
+  );
+  const border = Math.min(
+    constraintMaximum,
+    Math.max(constraintMinimum, paddedContent)
+  );
+  return {
+    border: requireFiniteArithmetic(border, axis, context),
+    content: Math.max(
+      0,
+      requireFiniteArithmetic(border - padding, axis, context)
+    )
+  };
+}
+function requireFiniteArithmetic(value, property, context) {
+  if (!Number.isFinite(value)) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value,
+      reason: "resolved box arithmetic must remain finite"
+    });
+  }
+  return value;
+}
+function resolveAllocationLength(value, reference, property, context) {
+  const resolved = resolveLength(value, reference, property, context);
+  if (resolved < 0) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value,
+      reason: "must be nonnegative when used as a layout allocation"
+    });
+  }
+  return resolved;
+}
+function validateConstraints(constraints, context) {
+  validateConstraint(
+    constraints.minWidth,
+    "constraints.minWidth",
+    false,
+    context
+  );
+  validateConstraint(
+    constraints.maxWidth,
+    "constraints.maxWidth",
+    true,
+    context
+  );
+  validateConstraint(
+    constraints.minHeight,
+    "constraints.minHeight",
+    false,
+    context
+  );
+  validateConstraint(
+    constraints.maxHeight,
+    "constraints.maxHeight",
+    true,
+    context
+  );
+  if (constraints.minWidth > constraints.maxWidth) {
+    throw layoutDiagnostic({
+      ...context,
+      property: "constraints.minWidth",
+      value: constraints.minWidth,
+      reason: `constraints.minWidth ${constraints.minWidth} must not exceed constraints.maxWidth ${constraints.maxWidth}`
+    });
+  }
+  if (constraints.minHeight > constraints.maxHeight) {
+    throw layoutDiagnostic({
+      ...context,
+      property: "constraints.minHeight",
+      value: constraints.minHeight,
+      reason: `constraints.minHeight ${constraints.minHeight} must not exceed constraints.maxHeight ${constraints.maxHeight}`
+    });
+  }
+}
+function validateConstraint(value, property, allowPositiveInfinity, context) {
+  if (!Number.isFinite(value) && !(allowPositiveInfinity && value === Number.POSITIVE_INFINITY)) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value,
+      reason: "must be finite"
+    });
+  }
+  if (value < 0) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value,
+      reason: "must be nonnegative"
+    });
+  }
+}
+export {
+  resolveBox
+};
+//# sourceMappingURL=box.js.map

package/dist/lib/layout/box.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/box.ts"],
+  "sourcesContent": ["import {\n  layoutDiagnostic,\n  type LayoutDiagnosticContext,\n} from '../style/diagnostics.js';\nimport { normalizeEdges } from '../style/normalize.js';\nimport { resolveLength } from '../style/resolve-length.js';\nimport type { BoxStyle, Length, ResolvedBoxStyle } from '../style/types.js';\nimport type { Constraints } from './types.js';\n\n/**\n * Resolves declared box sizing and padding into border and content boxes under parent constraints.\n *\n * @param style - Declared box sizing and edge properties. See {@link BoxStyle}.\n * @param constraints - Available dimensions used to resolve percentages and constraints. See\n * {@link Constraints} .\n * @param context - Component and property context for diagnostic messages. See\n * {@link LayoutDiagnosticContext} .\n * @returns Resolved box dimensions and edge values. See {@link ResolvedBoxStyle}.\n *\n * @see {@link BoxStyle}\n * @see {@link Constraints}\n * @see {@link LayoutDiagnosticContext}\n * @see {@link ResolvedBoxStyle}\n */\nexport function resolveBox(\n  style: Readonly<BoxStyle>,\n  constraints: Readonly<Constraints>,\n  context: Readonly<LayoutDiagnosticContext> = {},\n): ResolvedBoxStyle {\n  const diagnosticContext = {\n    component: context.component ?? 'layout',\n    algorithm: context.algorithm ?? 'box-resolution',\n    constraints,\n  };\n  validateConstraints(constraints, diagnosticContext);\n  const padding = normalizeEdges(style.padding, 'padding', diagnosticContext);\n\n  const horizontal = resolveAxis(\n    'width',\n    style.width,\n    style.minWidth,\n    style.maxWidth,\n    constraints.minWidth,\n    constraints.maxWidth,\n    padding.left,\n    padding.right,\n    diagnosticContext,\n  );\n  const vertical = resolveAxis(\n    'height',\n    style.height,\n    style.minHeight,\n    style.maxHeight,\n    constraints.minHeight,\n    constraints.maxHeight,\n    padding.top,\n    padding.bottom,\n    diagnosticContext,\n  );\n\n  return {\n    borderBox: {\n      x: 0,\n      y: 0,\n      width: horizontal.border,\n      height: vertical.border,\n    },\n    contentBox: {\n      x: padding.left,\n      y: padding.top,\n      width: horizontal.content,\n      height: vertical.content,\n    },\n  };\n}\n\nfunction resolveAxis(\n  axis: 'width' | 'height',\n  specified: Length | undefined,\n  specifiedMinimum: Exclude<Length, 'auto'> | undefined,\n  specifiedMaximum: Exclude<Length, 'auto'> | undefined,\n  constraintMinimum: number,\n  constraintMaximum: number,\n  paddingStart: number,\n  paddingEnd: number,\n  context: Readonly<LayoutDiagnosticContext>,\n): { border: number; content: number } {\n  const minimumProperty = axis === 'width' ? 'minWidth' : 'minHeight';\n  const maximumProperty = axis === 'width' ? 'maxWidth' : 'maxHeight';\n  const minimum =\n    specifiedMinimum === undefined\n      ? 0\n      : resolveAllocationLength(\n          specifiedMinimum,\n          constraintMaximum,\n          minimumProperty,\n          context,\n        );\n  const maximum =\n    specifiedMaximum === undefined\n      ? Number.POSITIVE_INFINITY\n      : resolveAllocationLength(\n          specifiedMaximum,\n          constraintMaximum,\n          maximumProperty,\n          context,\n        );\n\n  if (minimum > maximum) {\n    throw layoutDiagnostic({\n      ...context,\n      property: minimumProperty,\n      value: minimum,\n      reason: `${minimumProperty} ${minimum} must not exceed ${maximumProperty} ${maximum}`,\n    });\n  }\n\n  const padding = requireFiniteArithmetic(\n    paddingStart + paddingEnd,\n    axis,\n    context,\n  );\n  const resolved =\n    specified === undefined\n      ? undefined\n      : resolveLength(specified, constraintMaximum, axis, context);\n  let content: number;\n  if (resolved === undefined) {\n    if (!Number.isFinite(constraintMaximum)) {\n      throw layoutDiagnostic({\n        ...context,\n        property: axis,\n        value: specified ?? 'auto',\n        reason: 'requires a definite finite allocation for auto sizing',\n      });\n    }\n    content = Math.max(\n      0,\n      requireFiniteArithmetic(constraintMaximum - padding, axis, context),\n    );\n  } else {\n    if (resolved < 0) {\n      throw layoutDiagnostic({\n        ...context,\n        property: axis,\n        value: specified,\n        reason: 'must be nonnegative when used as a layout allocation',\n      });\n    }\n    content = resolved;\n  }\n\n  content = Math.min(maximum, Math.max(minimum, content));\n  const paddedContent = requireFiniteArithmetic(\n    content + padding,\n    axis,\n    context,\n  );\n  const border = Math.min(\n    constraintMaximum,\n    Math.max(constraintMinimum, paddedContent),\n  );\n  return {\n    border: requireFiniteArithmetic(border, axis, context),\n    content: Math.max(\n      0,\n      requireFiniteArithmetic(border - padding, axis, context),\n    ),\n  };\n}\n\nfunction requireFiniteArithmetic(\n  value: number,\n  property: string,\n  context: Readonly<LayoutDiagnosticContext>,\n): number {\n  if (!Number.isFinite(value)) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value,\n      reason: 'resolved box arithmetic must remain finite',\n    });\n  }\n  return value;\n}\n\nfunction resolveAllocationLength(\n  value: Exclude<Length, 'auto'>,\n  reference: number,\n  property: string,\n  context: Readonly<LayoutDiagnosticContext>,\n): number {\n  const resolved = resolveLength(value, reference, property, context)!;\n  if (resolved < 0) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value,\n      reason: 'must be nonnegative when used as a layout allocation',\n    });\n  }\n  return resolved;\n}\n\nfunction validateConstraints(\n  constraints: Readonly<Constraints>,\n  context: Readonly<LayoutDiagnosticContext>,\n): void {\n  validateConstraint(\n    constraints.minWidth,\n    'constraints.minWidth',\n    false,\n    context,\n  );\n  validateConstraint(\n    constraints.maxWidth,\n    'constraints.maxWidth',\n    true,\n    context,\n  );\n  validateConstraint(\n    constraints.minHeight,\n    'constraints.minHeight',\n    false,\n    context,\n  );\n  validateConstraint(\n    constraints.maxHeight,\n    'constraints.maxHeight',\n    true,\n    context,\n  );\n\n  if (constraints.minWidth > constraints.maxWidth) {\n    throw layoutDiagnostic({\n      ...context,\n      property: 'constraints.minWidth',\n      value: constraints.minWidth,\n      reason: `constraints.minWidth ${constraints.minWidth} must not exceed constraints.maxWidth ${constraints.maxWidth}`,\n    });\n  }\n  if (constraints.minHeight > constraints.maxHeight) {\n    throw layoutDiagnostic({\n      ...context,\n      property: 'constraints.minHeight',\n      value: constraints.minHeight,\n      reason: `constraints.minHeight ${constraints.minHeight} must not exceed constraints.maxHeight ${constraints.maxHeight}`,\n    });\n  }\n}\n\nfunction validateConstraint(\n  value: number,\n  property: string,\n  allowPositiveInfinity: boolean,\n  context: Readonly<LayoutDiagnosticContext>,\n): void {\n  if (\n    !Number.isFinite(value) &&\n    !(allowPositiveInfinity && value === Number.POSITIVE_INFINITY)\n  ) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value,\n      reason: 'must be finite',\n    });\n  }\n  if (value < 0) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value,\n      reason: 'must be nonnegative',\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/lib/layout/context.d.ts

@@ -0,0 +1,13 @@
+import type { LayoutBox } from './types.js';
+export declare function getLayoutBox(): Readonly<LayoutBox>;
+export declare function getPercentageBasis(): Readonly<LayoutBox>;
+/**
+ * Pushes a layout allocation for nested evaluation and returns the callback that restores the
+ * previous allocation.
+ *
+ * @param box - Parent allocation to expose to child layout hooks. See {@link LayoutBox}.
+ * @returns A function restoring the previous layout box.
+ *
+ * @see {@link LayoutBox}
+ */
+export declare function pushLayoutBox(box: Readonly<LayoutBox>): () => void;