@pibbl/core 0.0.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/grid.ts"],
+  "sourcesContent": ["import { preparedStyleValue, preparedStyleQuery } from '../style/responsive.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { clonePibblElement } from '../element/create-element.js';\nimport { getChildPrimitiveReceiverToken } from '../element/metadata.js';\nimport type { PibblElement } from '../element/types.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { layoutDiagnostic } from '../style/diagnostics.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from '../components/structural-events.js';\nimport { normalizeEdges } from '../style/normalize.js';\nimport { resolveLength } from '../style/resolve-length.js';\nimport { setPreNormalizedStyle } from '../style/resolve-dispatch.js';\nimport type {\n  BoxStyle,\n  GridItemStyle,\n  LayoutItemStyle,\n  ResolvedBoxStyle,\n} from '../style/types.js';\nimport type {\n  CanvasMeasurementService,\n  PibblNodeInput,\n  MeasureInput,\n  MeasureResult,\n  RenderingContext2D,\n  SystemStyle,\n} from '../types.js';\nimport {\n  childWithUsedSize,\n  prepareDirectChildStyle,\n  materializeLayoutChildren,\n  placeDirectChildren,\n  prepareLayoutChildren,\n  resolveContainerBox,\n  resolveDirectChildBox,\n} from './absolute.js';\nimport { pushLayoutBox } from './context.js';\nimport { recordLayoutEvaluation } from './diagnostics.js';\nimport { assertSupportedChildPosition } from './positioning-diagnostics.js';\nimport { measureElement } from './measure.js';\nimport type { Constraints, LayoutBox } from './types.js';\n\n/**\n * A fixed logical size, percentage of available space, or fractional share of remaining grid space.\n *\n * @see {@link GridStyle}\n */\nexport type GridTrack = number | `${number}%` | `${number}fr`;\ntype GridAlignment = 'stretch' | 'start' | 'center' | 'end';\ntype ParsedGridTrack =\n  | Readonly<{ kind: 'fixed'; value: number }>\n  | Readonly<{ kind: 'percentage'; factor: number }>\n  | Readonly<{ kind: 'fraction'; factor: number }>;\n\n/**\n * Supported geometry and presentation properties for Grid.\n *\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link GridTrack}\n * @see {@link Grid}\n */\nexport interface GridStyle extends BoxStyle, LayoutItemStyle {\n  /** Explicit grid column track definitions. See {@link GridTrack}. */\n  gridTemplateColumns: readonly GridTrack[];\n  /** Explicit grid row track definitions. See {@link GridTrack}. */\n  gridTemplateRows: readonly GridTrack[];\n  /** Default inline-axis alignment of grid or overlay children. See {@link GridAlignment}. */\n  justifyItems?: GridAlignment;\n  /** Default alignment of children on the cross or block axis. See {@link GridAlignment}. */\n  alignItems?: GridAlignment;\n  /** Spacing between adjacent items. See {@link GridStyle}. */\n  gap?: number;\n  /** Space between adjacent rows or items on the row axis. See {@link GridStyle}. */\n  rowGap?: number;\n  /** Space between adjacent columns or items on the column axis. See {@link GridStyle}. */\n  columnGap?: number;\n}\n\n/**\n * Authored inputs for Grid, including the declared data and presentation options.\n *\n * @see {@link PibblNodeInput}\n * @see {@link Grid}\n */\nexport interface GridProps extends PibblStructuralEventProps {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\nexport interface GridMeasurementInput {\n  service: CanvasMeasurementService;\n  measureElement(\n    element: PibblElement<any>,\n    constraints: Readonly<Constraints>,\n  ): MeasureResult;\n}\n\ninterface ResolvedGridStyle extends SystemStyle {\n  box: ResolvedBoxStyle;\n  overflow: 'visible' | 'clip';\n  columns: readonly ParsedGridTrack[];\n  rows: readonly ParsedGridTrack[];\n  justifyItems: GridAlignment;\n  alignItems: GridAlignment;\n  rowGap: number;\n  columnGap: number;\n}\n\ninterface GridPlacement {\n  box: LayoutBox;\n  element: PibblElement<any>;\n}\n\nfunction renderGrid(\n  props: GridProps,\n  style: Readonly<ResolvedGridStyle>,\n  ctx: RenderingContext2D,\n) {\n  wireStructuralEvents(props);\n  const children = prepareLayoutChildren(props.children, 'Grid');\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  const service = {\n    measureText(value: string, font: string) {\n      ctx.save();\n      try {\n        ctx.font = font;\n        return ctx.measureText(value);\n      } finally {\n        ctx.restore();\n      }\n    },\n  };\n  const placements = resolveGridPlacements(\n    localContent,\n    children,\n    style,\n    {\n      service,\n      measureElement: (element, constraints) =>\n        measureElement(element, constraints, service),\n    },\n  );\n  let index = 0;\n  return placeDirectChildren(\n    children,\n    localContent,\n    () => placements[index++],\n    style.overflow,\n  );\n}\n\n/**\n * Describes explicit Grid 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 GridProps}\n * @see {@link GridStyle}\n */\nexport const Grid = definePrimitive<\n  GridProps,\n  GridStyle,\n  GridStyle,\n  ResolvedGridStyle\n>(renderGrid, {\n  childInput: 'structural',\n  resolveStyle: (style, context) => ({\n    box: resolveContainerBox(style, context, 'Grid', 'grid'),\n    overflow: style.overflow ?? 'visible',\n    ...normalizeGridOptions(style, context.allocation),\n  }),\n  measure: (input) => measureGrid(input),\n});\n\nexport function layoutGrid(\n  container: Readonly<LayoutBox>,\n  children: PibblNodeInput,\n  style: Readonly<GridStyle>,\n  measurement: GridMeasurementInput,\n): LayoutBox[] {\n  const prepared = materializeLayoutChildren(children, 'Grid');\n  const options = normalizeGridOptions(style, container);\n  return resolveGridPlacements(container, prepared, options, measurement)\n    .map((placement) => placement.box);\n}\n\nfunction resolveGridPlacements(\n  container: Readonly<LayoutBox>,\n  children: readonly PibblElement<any>[],\n  options: Readonly<ReturnType<typeof normalizeGridOptions>>,\n  measurement: GridMeasurementInput,\n): GridPlacement[] {\n  assertFiniteContainer(container);\n  const columns = resolveParsedGridTracks(\n    options.columns,\n    container.width,\n    options.columnGap,\n    'columns',\n    container,\n  );\n  const rows = resolveParsedGridTracks(\n    options.rows,\n    container.height,\n    options.rowGap,\n    'rows',\n    container,\n  );\n  const placements: GridPlacement[] = [];\n\n  for (const child of children) {\n    const receiverToken = getChildPrimitiveReceiverToken(\n      GLOBAL_STATE.renderTransaction,\n      GLOBAL_STATE.primitiveReceiverToken,\n      placements.length,\n    );\n    const prepared = prepareDirectChildStyle(child, receiverToken, container);\n    const normalized = preparedStyleValue(prepared) as Readonly<\n      BoxStyle & GridItemStyle & LayoutItemStyle & Record<string, unknown>\n    >;\n    assertSupportedChildPosition('Grid', child, normalized);\n    rejectUnsupportedItemFields(child, normalized, container);\n    const columnStart = placementInteger(\n      normalized.gridColumnStart,\n      'gridColumnStart',\n      child,\n      container,\n      true,\n    );\n    const rowStart = placementInteger(\n      normalized.gridRowStart,\n      'gridRowStart',\n      child,\n      container,\n      true,\n    );\n    const columnSpan = placementInteger(\n      normalized.gridColumnSpan ?? 1,\n      'gridColumnSpan',\n      child,\n      container,\n      false,\n    );\n    const rowSpan = placementInteger(\n      normalized.gridRowSpan ?? 1,\n      'gridRowSpan',\n      child,\n      container,\n      false,\n    );\n    validateStart(\n      columnStart,\n      columns.length,\n      'gridColumnStart',\n      child,\n      container,\n    );\n    validateStart(\n      rowStart,\n      rows.length,\n      'gridRowStart',\n      child,\n      container,\n    );\n    validateSpan(\n      columnStart,\n      columnSpan,\n      columns.length,\n      'gridColumnSpan',\n      child,\n      container,\n    );\n    validateSpan(\n      rowStart,\n      rowSpan,\n      rows.length,\n      'gridRowSpan',\n      child,\n      container,\n    );\n    const area = {\n      x: container.x + trackOffset(columns, columnStart - 1, options.columnGap),\n      y: container.y + trackOffset(rows, rowStart - 1, options.rowGap),\n      width: trackSpan(columns, columnStart - 1, columnSpan, options.columnGap),\n      height: trackSpan(rows, rowStart - 1, rowSpan, options.rowGap),\n    };\n    const widthAuto =\n      normalized.width === undefined || normalized.width === 'auto';\n    const heightAuto =\n      normalized.height === undefined || normalized.height === 'auto';\n    const justify = itemAlignment(\n      normalized.justifySelf,\n      options.justifyItems,\n      'justifySelf',\n      child,\n      container,\n    );\n    const align = itemAlignment(\n      normalized.alignSelf,\n      options.alignItems,\n      'alignSelf',\n      child,\n      container,\n    );\n    let measured: MeasureResult | undefined;\n    if (\n      (widthAuto && justify !== 'stretch') ||\n      (heightAuto && align !== 'stretch')\n    ) {\n      const measurementChild = clonePibblElement(child);\n      setPreNormalizedStyle(\n        measurementChild,\n        normalized,\n        child,\n        receiverToken,\n        preparedStyleQuery(prepared),\n      );\n      measured = measurement.measureElement(measurementChild, {\n        minWidth: 0,\n        maxWidth: area.width,\n        minHeight: 0,\n        maxHeight: area.height,\n      });\n      if (measured.status === 'unsupported') {\n        throw childDiagnostic(\n          child,\n          widthAuto && justify !== 'stretch' ? 'width' : 'height',\n          'auto',\n          container,\n          `measurement is required but unsupported: ${measured.reason}`,\n        );\n      }\n    }\n    const padding = normalizeEdges(\n      normalized.padding,\n      'padding',\n      childContext(child, container),\n    );\n    const usedStyle = {\n      ...normalized,\n      width: widthAuto\n        ? justify === 'stretch'\n          ? Math.max(0, area.width - padding.left - padding.right)\n          : measured!.status === 'measured'\n            ? measured!.size.width\n            : 0\n        : normalized.width,\n      height: heightAuto\n        ? align === 'stretch'\n          ? Math.max(0, area.height - padding.top - padding.bottom)\n          : measured!.status === 'measured'\n            ? measured!.size.height\n            : 0\n        : normalized.height,\n    };\n    const resolved = resolveDirectChildBox(area, child, 'grid', usedStyle);\n    const border = resolved.borderBox;\n    const box = {\n      x: area.x + alignmentOffset(area.width, border.width, justify),\n      y: area.y + alignmentOffset(area.height, border.height, align),\n      width: border.width,\n      height: border.height,\n    };\n    placements.push({\n      box,\n      element: childWithUsedSize(\n        child,\n        normalized,\n        resolved.contentBox.width,\n        resolved.contentBox.height,\n        receiverToken,\n        preparedStyleQuery(prepared),\n      ),\n    });\n  }\n  return placements;\n}\n\nexport function resolveGridTracks(\n  tracks: readonly GridTrack[],\n  bound: number,\n  gap: number,\n  axis: 'columns' | 'rows',\n): number[] {\n  const container = {\n    x: 0,\n    y: 0,\n    width: axis === 'columns' ? bound : 0,\n    height: axis === 'rows' ? bound : 0,\n  };\n  const parsed = parseGridTracks(tracks, axis, container);\n  return resolveParsedGridTracks(parsed, bound, gap, axis, container);\n}\n\nfunction resolveParsedGridTracks(\n  tracks: readonly ParsedGridTrack[],\n  bound: number,\n  gap: number,\n  axis: 'columns' | 'rows',\n  container: Readonly<LayoutBox>,\n): number[] {\n  if (!Number.isFinite(bound) || bound < 0) {\n    throw optionDiagnostic(\n      axis,\n      bound,\n      container,\n      'requires a finite nonnegative track bound',\n    );\n  }\n  const resolved = new Array<number>(tracks.length).fill(0);\n  const fractions: { index: number; factor: number }[] = [];\n  let allocated =\n    Math.max(0, tracks.length - 1) * nonnegativeOption(gap, 'gap', container);\n  for (let index = 0; index < tracks.length; index++) {\n    const track = tracks[index];\n    if (track.kind === 'fixed') {\n      resolved[index] = track.value;\n      allocated += track.value;\n    } else if (track.kind === 'percentage') {\n      const size = (bound * track.factor) / 100;\n      if (!Number.isFinite(size)) throw trackDiagnostic(track, axis, container);\n      resolved[index] = size;\n      allocated += size;\n    } else {\n      fractions.push({ index, factor: track.factor });\n    }\n  }\n  const totalFr = fractions.reduce((total, track) => total + track.factor, 0);\n  if (!Number.isFinite(allocated) || !Number.isFinite(totalFr)) {\n    throw trackDiagnostic(tracks, axis, container);\n  }\n  const remaining = Math.max(0, bound - allocated);\n  const unit = remaining / Math.max(1, totalFr);\n  for (const track of fractions) resolved[track.index] = unit * track.factor;\n  if (resolved.some((value) => !Number.isFinite(value) || value < 0)) {\n    throw trackDiagnostic(tracks, axis, container);\n  }\n  return resolved;\n}\n\nfunction parseGridTracks(\n  tracks: readonly GridTrack[],\n  axis: 'columns' | 'rows',\n  container: Readonly<LayoutBox>,\n): readonly ParsedGridTrack[] {\n  if (!Array.isArray(tracks) || tracks.length === 0) {\n    throw optionDiagnostic(\n      axis === 'columns' ? 'gridTemplateColumns' : 'gridTemplateRows',\n      tracks,\n      container,\n      `requires a nonempty explicit ${axis} list`,\n    );\n  }\n  return tracks.map(track => {\n    if (typeof track === 'number') {\n      if (!Number.isFinite(track) || track < 0) {\n        throw trackDiagnostic(track, axis, container);\n      }\n      return Object.freeze({ kind: 'fixed', value: track });\n    }\n    if (typeof track !== 'string') {\n      throw trackDiagnostic(track, axis, container);\n    }\n    const match = /^(?:\\d+(?:\\.\\d+)?|\\.\\d+)(%|fr)$/.exec(track);\n    if (!match) throw trackDiagnostic(track, axis, container);\n    const factor = Number.parseFloat(track);\n    if (!Number.isFinite(factor) || factor < 0) {\n      throw trackDiagnostic(track, axis, container);\n    }\n    return Object.freeze(match[1] === '%' ?\n      { kind: 'percentage', factor } :\n      { kind: 'fraction', factor });\n  });\n}\n\nfunction measureGrid(input: MeasureInput<GridProps, GridStyle>): MeasureResult {\n  prepareLayoutChildren(input.props.children, 'Grid');\n  const diagnosticBox = {\n    x: 0,\n    y: 0,\n    width: Number.isFinite(input.constraints.maxWidth)\n      ? input.constraints.maxWidth\n      : 0,\n    height: Number.isFinite(input.constraints.maxHeight)\n      ? input.constraints.maxHeight\n      : 0,\n  };\n  const options = normalizeGridOptions(input.style, diagnosticBox);\n  const widthDefinite =\n    input.style.width !== undefined && input.style.width !== 'auto';\n  const heightDefinite =\n    input.style.height !== undefined && input.style.height !== 'auto';\n  if (!widthDefinite) {\n    const unsupported = intrinsicTrackReason(\n      options.columns,\n      'columns',\n    );\n    if (unsupported) return { status: 'unsupported', reason: unsupported };\n  }\n  if (!heightDefinite) {\n    const unsupported = intrinsicTrackReason(options.rows, 'rows');\n    if (unsupported) return { status: 'unsupported', reason: unsupported };\n  }\n  const width = widthDefinite\n    ? measuredLength(\n        input.style.width!,\n        input.constraints.maxWidth,\n        'width',\n        input.constraints,\n      )\n    : intrinsicTrackSize(\n        options.columns,\n        options.columnGap,\n        'columns',\n      );\n  const height = heightDefinite\n    ? measuredLength(\n        input.style.height!,\n        input.constraints.maxHeight,\n        'height',\n        input.constraints,\n      )\n    : intrinsicTrackSize(options.rows, options.rowGap, 'rows');\n  return { status: 'measured', size: { width, height } };\n}\n\nfunction intrinsicTrackSize(\n  tracks: readonly ParsedGridTrack[],\n  gap: number,\n  axis: 'columns' | 'rows',\n): number {\n  const size =\n    tracks.reduce((total, track) => total +\n      (track.kind === 'fixed' ? track.value : 0), 0) +\n    Math.max(0, tracks.length - 1) * gap;\n  if (!Number.isFinite(size))\n    throw trackDiagnostic(tracks, axis, { x: 0, y: 0, width: 0, height: 0 });\n  return size;\n}\n\nfunction intrinsicTrackReason(\n  tracks: readonly ParsedGridTrack[],\n  axis: 'columns' | 'rows',\n): string | undefined {\n  if (tracks.every(track => track.kind === 'fixed')) return undefined;\n  const kind = tracks.some(track => track.kind === 'fraction')\n    ? 'fractional'\n    : 'percentage';\n  return `Grid ${kind} intrinsic measurement for ${axis} is unsupported because it is allocation-dependent`;\n}\n\nfunction measuredLength(\n  value: Exclude<BoxStyle['width'], undefined>,\n  reference: number,\n  property: string,\n  constraints: Readonly<Constraints>,\n): number {\n  const resolved = resolveLength(value, reference, property, {\n    component: 'Grid',\n    algorithm: 'measurement',\n    constraints,\n  });\n  if (resolved === undefined || resolved < 0) {\n    throw layoutDiagnostic({\n      component: 'Grid',\n      property,\n      value,\n      algorithm: 'measurement',\n      constraints,\n      reason: 'requires a definite nonnegative container size',\n    });\n  }\n  return resolved;\n}\n\nfunction normalizeGridOptions(\n  style: Readonly<GridStyle>,\n  container: Readonly<LayoutBox>,\n) {\n  if (\n    !Array.isArray(style.gridTemplateColumns) ||\n    style.gridTemplateColumns.length === 0\n  ) {\n    throw optionDiagnostic(\n      'gridTemplateColumns',\n      style.gridTemplateColumns,\n      container,\n      'requires a nonempty explicit columns list',\n    );\n  }\n  if (\n    !Array.isArray(style.gridTemplateRows) ||\n    style.gridTemplateRows.length === 0\n  ) {\n    throw optionDiagnostic(\n      'gridTemplateRows',\n      style.gridTemplateRows,\n      container,\n      'requires a nonempty explicit rows list',\n    );\n  }\n  const justifyItems = containerAlignment(\n    style.justifyItems ?? 'stretch',\n    'justifyItems',\n    container,\n  );\n  const alignItems = containerAlignment(\n    style.alignItems ?? 'stretch',\n    'alignItems',\n    container,\n  );\n  const gap = nonnegativeOption(style.gap ?? 0, 'gap', container);\n  return {\n    columns: parseGridTracks(\n      style.gridTemplateColumns,\n      'columns',\n      container,\n    ),\n    rows: parseGridTracks(style.gridTemplateRows, 'rows', container),\n    justifyItems,\n    alignItems,\n    rowGap: nonnegativeOption(style.rowGap ?? gap, 'rowGap', container),\n    columnGap: nonnegativeOption(\n      style.columnGap ?? gap,\n      'columnGap',\n      container,\n    ),\n  };\n}\n\nfunction containerAlignment(\n  value: unknown,\n  property: string,\n  container: Readonly<LayoutBox>,\n): GridAlignment {\n  if (\n    value === 'stretch' ||\n    value === 'start' ||\n    value === 'center' ||\n    value === 'end'\n  )\n    return value;\n  throw optionDiagnostic(\n    property,\n    value,\n    container,\n    'uses an unsupported grid alignment',\n  );\n}\n\nfunction itemAlignment(\n  value: unknown,\n  fallback: GridAlignment,\n  property: string,\n  child: PibblElement<any>,\n  container: Readonly<LayoutBox>,\n): GridAlignment {\n  if (value === undefined || value === 'auto') return fallback;\n  if (\n    value === 'stretch' ||\n    value === 'start' ||\n    value === 'center' ||\n    value === 'end'\n  )\n    return value;\n  throw childDiagnostic(\n    child,\n    property,\n    value,\n    container,\n    'uses an unsupported grid alignment',\n  );\n}\n\nfunction placementInteger(\n  value: unknown,\n  property: string,\n  child: PibblElement<any>,\n  container: Readonly<LayoutBox>,\n  required: boolean,\n): number {\n  if (value === undefined && required) {\n    throw childDiagnostic(\n      child,\n      property,\n      value,\n      container,\n      'is required for explicit grid placement',\n    );\n  }\n  if (typeof value !== 'number' || !Number.isInteger(value) || value <= 0) {\n    throw childDiagnostic(\n      child,\n      property,\n      value,\n      container,\n      'must be a positive integer',\n    );\n  }\n  return value;\n}\n\nfunction validateSpan(\n  start: number,\n  span: number,\n  trackCount: number,\n  property: string,\n  child: PibblElement<any>,\n  container: Readonly<LayoutBox>,\n): void {\n  if (start - 1 + span > trackCount) {\n    throw childDiagnostic(\n      child,\n      property,\n      span,\n      container,\n      `grid area start ${start} plus span ${span} exceeds the explicit ${trackCount}-track list`,\n    );\n  }\n}\n\nfunction validateStart(\n  start: number,\n  trackCount: number,\n  property: string,\n  child: PibblElement<any>,\n  container: Readonly<LayoutBox>,\n): void {\n  if (start > trackCount) {\n    throw childDiagnostic(\n      child,\n      property,\n      start,\n      container,\n      `must reference the explicit ${trackCount}-track list`,\n    );\n  }\n}\n\nfunction trackOffset(\n  tracks: readonly number[],\n  index: number,\n  gap: number,\n): number {\n  return (\n    tracks.slice(0, index).reduce((total, size) => total + size, 0) +\n    index * gap\n  );\n}\n\nfunction trackSpan(\n  tracks: readonly number[],\n  index: number,\n  span: number,\n  gap: number,\n): number {\n  return (\n    tracks.slice(index, index + span).reduce((total, size) => total + size, 0) +\n    Math.max(0, span - 1) * gap\n  );\n}\n\nfunction alignmentOffset(\n  area: number,\n  item: number,\n  alignment: GridAlignment,\n): number {\n  if (alignment === 'center') return (area - item) / 2;\n  if (alignment === 'end') return area - item;\n  return 0;\n}\n\nfunction nonnegativeOption(\n  value: number,\n  property: string,\n  container: Readonly<LayoutBox>,\n): number {\n  if (!Number.isFinite(value) || value < 0) {\n    throw optionDiagnostic(\n      property,\n      value,\n      container,\n      'requires a finite nonnegative number',\n    );\n  }\n  return value;\n}\n\nfunction assertFiniteContainer(container: Readonly<LayoutBox>): void {\n  for (const [property, value] of Object.entries(container)) {\n    if (\n      !Number.isFinite(value) ||\n      ((property === 'width' || property === 'height') && value < 0)\n    ) {\n      throw optionDiagnostic(\n        property,\n        value,\n        container,\n        'requires finite nonnegative container geometry',\n      );\n    }\n  }\n}\n\nfunction rejectUnsupportedItemFields(\n  child: PibblElement<any>,\n  style: Readonly<Record<string, unknown>>,\n  container: Readonly<LayoutBox>,\n): void {\n  for (const property of ['gridColumnEnd', 'gridRowEnd', 'gridArea', 'order']) {\n    if (style[property] !== undefined) {\n      throw childDiagnostic(\n        child,\n        property,\n        style[property],\n        container,\n        'is outside the explicit Grid subset',\n      );\n    }\n  }\n}\n\nfunction trackDiagnostic(\n  value: unknown,\n  axis: string,\n  container: Readonly<LayoutBox>,\n) {\n  return optionDiagnostic(\n    axis === 'columns' ? 'gridTemplateColumns' : 'gridTemplateRows',\n    value,\n    container,\n    'contains an unsupported track; use finite numbers, exact decimal percentages, or decimal fr units',\n  );\n}\n\nfunction optionDiagnostic(\n  property: string,\n  value: unknown,\n  container: Readonly<LayoutBox>,\n  reason: string,\n) {\n  return layoutDiagnostic({\n    component: 'Grid',\n    property,\n    value,\n    algorithm: 'grid',\n    constraints: constraintsFor(container),\n    reason,\n  });\n}\n\nfunction childDiagnostic(\n  child: PibblElement<any>,\n  property: string,\n  value: unknown,\n  container: Readonly<LayoutBox>,\n  reason: string,\n) {\n  return layoutDiagnostic({\n    component: child.type.name || 'Anonymous',\n    property,\n    value,\n    algorithm: 'grid',\n    constraints: constraintsFor(container),\n    reason,\n  });\n}\n\nfunction childContext(child: PibblElement<any>, container: Readonly<LayoutBox>) {\n  return {\n    component: child.type.name || 'Anonymous',\n    algorithm: 'grid',\n    constraints: constraintsFor(container),\n  };\n}\n\nfunction constraintsFor(container: Readonly<LayoutBox>) {\n  return {\n    minWidth: 0,\n    maxWidth: container.width,\n    minHeight: 0,\n    maxHeight: container.height,\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,19 @@
+import type { CanvasMeasurementService, MeasureResult } from '../types.js';
+import type { PibblElement } from '../element/types.js';
+import type { Constraints } from './types.js';
+export type { CanvasMeasurementService, MeasureInput, MeasureResult, } from '../types.js';
+/**
+ * Measures an element against finite constraints using the supplied Canvas measurement service.
+ *
+ * @param element - Element whose declared measurement capability is used. See {@link PibblElement}.
+ * @param constraints - Available size constraints in logical units. See {@link Constraints}.
+ * @param service - Canvas text measurement service. See {@link CanvasMeasurementService}.
+ * @returns Measured dimensions, or an unsupported result with its reason. See
+ * {@link MeasureResult} .
+ *
+ * @see {@link PibblElement}
+ * @see {@link Constraints}
+ * @see {@link CanvasMeasurementService}
+ * @see {@link MeasureResult}
+ */
+export declare function measureElement(element: PibblElement<any>, constraints: Readonly<Constraints>, service: CanvasMeasurementService): MeasureResult;

package/dist/lib/layout/measure.js

@@ -0,0 +1,144 @@
+import { getStyleMeasurementMode, withStyleMeasurement, rejectResponsiveMeasurement, UnsupportedResponsiveMeasurement } from "../style/responsive.js";
+import { layoutDiagnostic } from "../style/diagnostics.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { EMPTY_STYLE } from "../style/empty-style.js";
+import {
+  takePreNormalizedStyle,
+  withoutSystemFilter
+} from "../style/resolve-dispatch.js";
+import {
+  createPrimitiveReceiverToken,
+  getPrimitiveDefinition,
+  getPrimitiveReceiverToken,
+  getPolicyPreparationSource
+} from "../element/metadata.js";
+import { resolvePrimitiveInputs } from "../element/resolve-primitive-inputs.js";
+import { recordLayoutMeasurement } from "./diagnostics.js";
+import { prepareElementPolicies } from "../element/children.js";
+import { untracked, withSignalWriteForbidden } from "../signals/graph.js";
+function measureElement(element, constraints, service) {
+  const context = {
+    active: /* @__PURE__ */ new Set(),
+    stack: []
+  };
+  const mode = getStyleMeasurementMode() ? "recursive" : GLOBAL_STATE.componentRefs ? "mounted-intrinsic" : "standalone-root";
+  return withSignalWriteForbidden(
+    "Signal writes are forbidden during Pibbl measurement",
+    () => withStyleMeasurement(mode, () => withIsolatedRenderState(
+      () => measureElementInternal(element, constraints, service, context)
+    ))
+  );
+}
+function measureElementInternal(element, constraints, service, context) {
+  element = prepareElementPolicies(element, "measureElement");
+  recordLayoutMeasurement();
+  const type = element.type;
+  const definition = getPrimitiveDefinition(type);
+  const component = type.name || "Anonymous";
+  const preNormalized = takePreNormalizedStyle(element);
+  const source = getPolicyPreparationSource(element) ?? preNormalized?.source ?? element;
+  if (context.active.has(source)) {
+    throw layoutDiagnostic({
+      component,
+      property: "measurement",
+      value: context.stack.map((item) => item.type.name || "Anonymous"),
+      algorithm: "measurement",
+      constraints,
+      reason: "cyclic measurement dependency is not supported"
+    });
+  }
+  if (!definition?.measure) {
+    return {
+      status: "unsupported",
+      reason: `${component} does not provide measurement`
+    };
+  }
+  context.active.add(source);
+  context.stack.push(element);
+  try {
+    if (preNormalized?.query && getStyleMeasurementMode() !== "standalone-root") {
+      rejectResponsiveMeasurement(element);
+    }
+    const inputs = untracked(() => resolvePrimitiveInputs(element, definition, preNormalized, {
+      width: constraints.maxWidth,
+      height: constraints.maxHeight
+    }));
+    const specifiedStyle = withoutSystemFilter(
+      preNormalized?.style ?? inputs.style ?? EMPTY_STYLE
+    );
+    const normalized = preNormalized ? specifiedStyle : definition.normalizeStyle ? definition.normalizeStyle(specifiedStyle) : specifiedStyle;
+    const previousReceiverToken = GLOBAL_STATE.primitiveReceiverToken;
+    GLOBAL_STATE.primitiveReceiverToken = getPrimitiveReceiverToken(element) ?? createPrimitiveReceiverToken();
+    let result;
+    try {
+      result = withStyleMeasurement("recursive", () => definition.measure({
+        props: inputs.props,
+        style: normalized,
+        constraints,
+        service,
+        measureElement: (child, childConstraints) => measureElementInternal(child, childConstraints, service, context)
+      }));
+    } finally {
+      GLOBAL_STATE.primitiveReceiverToken = previousReceiverToken;
+    }
+    if (result.status === "unsupported") return result;
+    validateMeasuredSize(result.size.width, "width", component, constraints);
+    validateMeasuredSize(result.size.height, "height", component, constraints);
+    return result;
+  } catch (error) {
+    if (error instanceof UnsupportedResponsiveMeasurement) {
+      return { status: "unsupported", reason: error.message };
+    }
+    throw error;
+  } finally {
+    context.stack.pop();
+    context.active.delete(source);
+  }
+}
+function withIsolatedRenderState(work) {
+  const snapshot = {
+    currentPibblInstance: GLOBAL_STATE.currentPibblInstance,
+    componentRefs: GLOBAL_STATE.componentRefs,
+    canvas: GLOBAL_STATE.canvas,
+    componentIsMounting: GLOBAL_STATE.componentIsMounting,
+    componentHookIndex: GLOBAL_STATE.componentHookIndex,
+    renderContext: GLOBAL_STATE.renderContext,
+    primitiveReceiverToken: GLOBAL_STATE.primitiveReceiverToken,
+    seenIds: GLOBAL_STATE.seenIds,
+    seenKeys: GLOBAL_STATE.seenKeys,
+    clippingStack: GLOBAL_STATE.clippingStack,
+    layoutStack: GLOBAL_STATE.layoutStack
+  };
+  GLOBAL_STATE.currentPibblInstance = void 0;
+  GLOBAL_STATE.componentRefs = void 0;
+  GLOBAL_STATE.canvas = void 0;
+  GLOBAL_STATE.componentIsMounting = false;
+  GLOBAL_STATE.componentHookIndex = 0;
+  GLOBAL_STATE.renderContext = void 0;
+  GLOBAL_STATE.primitiveReceiverToken = void 0;
+  GLOBAL_STATE.seenIds = void 0;
+  GLOBAL_STATE.seenKeys = void 0;
+  GLOBAL_STATE.clippingStack = [];
+  GLOBAL_STATE.layoutStack = void 0;
+  try {
+    return work();
+  } finally {
+    Object.assign(GLOBAL_STATE, snapshot);
+  }
+}
+function validateMeasuredSize(value, property, component, constraints) {
+  if (!Number.isFinite(value) || value < 0) {
+    throw layoutDiagnostic({
+      component,
+      property,
+      value,
+      algorithm: "measurement",
+      constraints,
+      reason: "measured dimensions must be finite and nonnegative"
+    });
+  }
+}
+export {
+  measureElement
+};
+//# sourceMappingURL=measure.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/measure.ts"],
+  "sourcesContent": ["import { getStyleMeasurementMode, withStyleMeasurement, rejectResponsiveMeasurement, UnsupportedResponsiveMeasurement } from '../style/responsive.js';\nimport { layoutDiagnostic } from '../style/diagnostics.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { EMPTY_STYLE } from '../style/empty-style.js';\nimport {\n  takePreNormalizedStyle,\n  withoutSystemFilter,\n} from '../style/resolve-dispatch.js';\nimport {\n  createPrimitiveReceiverToken,\n  getPrimitiveDefinition,\n  getPrimitiveReceiverToken,\n  getPolicyPreparationSource,\n} from '../element/metadata.js';\nimport { resolvePrimitiveInputs } from '../element/resolve-primitive-inputs.js';\nimport { recordLayoutMeasurement } from './diagnostics.js';\nimport type {\n  CanvasMeasurementService,\n  MeasureResult,\n} from '../types.js';\nimport type { PibblElement } from '../element/types.js';\nimport { prepareElementPolicies } from '../element/children.js';\nimport type { Constraints } from './types.js';\nimport { untracked, withSignalWriteForbidden } from '../signals/graph.js';\n\nexport type {\n  CanvasMeasurementService,\n  MeasureInput,\n  MeasureResult,\n} from '../types.js';\n\n/**\n * Measures an element against finite constraints using the supplied Canvas measurement service.\n *\n * @param element - Element whose declared measurement capability is used. See {@link PibblElement}.\n * @param constraints - Available size constraints in logical units. See {@link Constraints}.\n * @param service - Canvas text measurement service. See {@link CanvasMeasurementService}.\n * @returns Measured dimensions, or an unsupported result with its reason. See\n * {@link MeasureResult} .\n *\n * @see {@link PibblElement}\n * @see {@link Constraints}\n * @see {@link CanvasMeasurementService}\n * @see {@link MeasureResult}\n */\nexport function measureElement(\n  element: PibblElement<any>,\n  constraints: Readonly<Constraints>,\n  service: CanvasMeasurementService,\n): MeasureResult {\n  const context: MeasurementContext = {\n    active: new Set(),\n    stack: [],\n  };\n  const mode = getStyleMeasurementMode() ? 'recursive' :\n    GLOBAL_STATE.componentRefs ? 'mounted-intrinsic' : 'standalone-root';\n  return withSignalWriteForbidden('Signal writes are forbidden during Pibbl measurement', () =>\n    withStyleMeasurement(mode, () => withIsolatedRenderState(() =>\n      measureElementInternal(element, constraints, service, context),\n    )),\n  );\n}\n\ninterface MeasurementContext {\n  active: Set<PibblElement<any>>;\n  stack: PibblElement<any>[];\n}\n\nfunction measureElementInternal(\n  element: PibblElement<any>,\n  constraints: Readonly<Constraints>,\n  service: CanvasMeasurementService,\n  context: MeasurementContext,\n): MeasureResult {\n  element = prepareElementPolicies(element, 'measureElement');\n  recordLayoutMeasurement();\n  const type = element.type;\n  const definition = getPrimitiveDefinition(type);\n  const component = type.name || 'Anonymous';\n  const preNormalized = takePreNormalizedStyle(element);\n  const source = getPolicyPreparationSource(element) ??\n    preNormalized?.source ??\n    element;\n  if (context.active.has(source)) {\n    throw layoutDiagnostic({\n      component,\n      property: 'measurement',\n      value: context.stack.map(item => item.type.name || 'Anonymous'),\n      algorithm: 'measurement',\n      constraints,\n      reason: 'cyclic measurement dependency is not supported',\n    });\n  }\n  if (!definition?.measure) {\n    return {\n      status: 'unsupported',\n      reason: `${component} does not provide measurement`,\n    };\n  }\n\n  context.active.add(source);\n  context.stack.push(element);\n  try {\n    if (preNormalized?.query && getStyleMeasurementMode() !== 'standalone-root') {\n      rejectResponsiveMeasurement(element);\n    }\n    const inputs = untracked(() => resolvePrimitiveInputs(element, definition, preNormalized, {\n      width: constraints.maxWidth, height: constraints.maxHeight,\n    }));\n    const specifiedStyle = withoutSystemFilter(\n      preNormalized?.style ?? inputs.style ?? EMPTY_STYLE,\n    );\n    const normalized = preNormalized ?\n        specifiedStyle :\n      definition.normalizeStyle ?\n          definition.normalizeStyle(specifiedStyle) :\n          specifiedStyle;\n    const previousReceiverToken = GLOBAL_STATE.primitiveReceiverToken;\n    GLOBAL_STATE.primitiveReceiverToken =\n      getPrimitiveReceiverToken(element) ?? createPrimitiveReceiverToken();\n    let result: MeasureResult;\n    try {\n      result = withStyleMeasurement('recursive', () => definition.measure!({\n        props: inputs.props,\n        style: normalized,\n        constraints,\n        service,\n        measureElement: (child, childConstraints) =>\n          measureElementInternal(child, childConstraints, service, context),\n      }));\n    } finally {\n      GLOBAL_STATE.primitiveReceiverToken = previousReceiverToken;\n    }\n    if (result.status === 'unsupported') return result;\n    validateMeasuredSize(result.size.width, 'width', component, constraints);\n    validateMeasuredSize(result.size.height, 'height', component, constraints);\n    return result;\n  } catch (error) {\n    if (error instanceof UnsupportedResponsiveMeasurement) {\n      return { status: 'unsupported', reason: error.message };\n    }\n    throw error;\n  } finally {\n    context.stack.pop();\n    context.active.delete(source);\n  }\n}\n\nfunction withIsolatedRenderState<T>(work: () => T): T {\n  const snapshot = {\n    currentPibblInstance: GLOBAL_STATE.currentPibblInstance,\n    componentRefs: GLOBAL_STATE.componentRefs,\n    canvas: GLOBAL_STATE.canvas,\n    componentIsMounting: GLOBAL_STATE.componentIsMounting,\n    componentHookIndex: GLOBAL_STATE.componentHookIndex,\n    renderContext: GLOBAL_STATE.renderContext,\n    primitiveReceiverToken: GLOBAL_STATE.primitiveReceiverToken,\n    seenIds: GLOBAL_STATE.seenIds,\n    seenKeys: GLOBAL_STATE.seenKeys,\n    clippingStack: GLOBAL_STATE.clippingStack,\n    layoutStack: GLOBAL_STATE.layoutStack,\n  };\n  GLOBAL_STATE.currentPibblInstance = undefined;\n  GLOBAL_STATE.componentRefs = undefined;\n  GLOBAL_STATE.canvas = undefined;\n  GLOBAL_STATE.componentIsMounting = false;\n  GLOBAL_STATE.componentHookIndex = 0;\n  GLOBAL_STATE.renderContext = undefined;\n  GLOBAL_STATE.primitiveReceiverToken = undefined;\n  GLOBAL_STATE.seenIds = undefined;\n  GLOBAL_STATE.seenKeys = undefined;\n  GLOBAL_STATE.clippingStack = [];\n  GLOBAL_STATE.layoutStack = undefined;\n  try {\n    return work();\n  } finally {\n    Object.assign(GLOBAL_STATE, snapshot);\n  }\n}\n\nfunction validateMeasuredSize(\n  value: number,\n  property: 'width' | 'height',\n  component: string,\n  constraints: Readonly<Constraints>,\n): void {\n  if (!Number.isFinite(value) || value < 0) {\n    throw layoutDiagnostic({\n      component,\n      property,\n      value,\n      algorithm: 'measurement',\n      constraints,\n      reason: 'measured dimensions must be finite and nonnegative',\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,yBAAyB,sBAAsB,6BAA6B,wCAAwC;AAC7H,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AAMxC,SAAS,8BAA8B;AAEvC,SAAS,WAAW,gCAAgC;AAsB7C,SAAS,eACd,SACA,aACA,SACe;AACf,QAAM,UAA8B;AAAA,IAClC,QAAQ,oBAAI,IAAI;AAAA,IAChB,OAAO,CAAC;AAAA,EACV;AACA,QAAM,OAAO,wBAAwB,IAAI,cACvC,aAAa,gBAAgB,sBAAsB;AACrD,SAAO;AAAA,IAAyB;AAAA,IAAwD,MACtF,qBAAqB,MAAM,MAAM;AAAA,MAAwB,MACvD,uBAAuB,SAAS,aAAa,SAAS,OAAO;AAAA,IAC/D,CAAC;AAAA,EACH;AACF;AAOA,SAAS,uBACP,SACA,aACA,SACA,SACe;AACf,YAAU,uBAAuB,SAAS,gBAAgB;AAC1D,0BAAwB;AACxB,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,uBAAuB,IAAI;AAC9C,QAAM,YAAY,KAAK,QAAQ;AAC/B,QAAM,gBAAgB,uBAAuB,OAAO;AACpD,QAAM,SAAS,2BAA2B,OAAO,KAC/C,eAAe,UACf;AACF,MAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,MACV,OAAO,QAAQ,MAAM,IAAI,UAAQ,KAAK,KAAK,QAAQ,WAAW;AAAA,MAC9D,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IACV,CAAC;AAAA,EACH;AACA,MAAI,CAAC,YAAY,SAAS;AACxB,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ,GAAG,SAAS;AAAA,IACtB;AAAA,EACF;AAEA,UAAQ,OAAO,IAAI,MAAM;AACzB,UAAQ,MAAM,KAAK,OAAO;AAC1B,MAAI;AACF,QAAI,eAAe,SAAS,wBAAwB,MAAM,mBAAmB;AAC3E,kCAA4B,OAAO;AAAA,IACrC;AACA,UAAM,SAAS,UAAU,MAAM,uBAAuB,SAAS,YAAY,eAAe;AAAA,MACxF,OAAO,YAAY;AAAA,MAAU,QAAQ,YAAY;AAAA,IACnD,CAAC,CAAC;AACF,UAAM,iBAAiB;AAAA,MACrB,eAAe,SAAS,OAAO,SAAS;AAAA,IAC1C;AACA,UAAM,aAAa,gBACf,iBACF,WAAW,iBACP,WAAW,eAAe,cAAc,IACxC;AACN,UAAM,wBAAwB,aAAa;AAC3C,iBAAa,yBACX,0BAA0B,OAAO,KAAK,6BAA6B;AACrE,QAAI;AACJ,QAAI;AACF,eAAS,qBAAqB,aAAa,MAAM,WAAW,QAAS;AAAA,QACnE,OAAO,OAAO;AAAA,QACd,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC,OAAO,qBACtB,uBAAuB,OAAO,kBAAkB,SAAS,OAAO;AAAA,MACpE,CAAC,CAAC;AAAA,IACJ,UAAE;AACA,mBAAa,yBAAyB;AAAA,IACxC;AACA,QAAI,OAAO,WAAW,cAAe,QAAO;AAC5C,yBAAqB,OAAO,KAAK,OAAO,SAAS,WAAW,WAAW;AACvE,yBAAqB,OAAO,KAAK,QAAQ,UAAU,WAAW,WAAW;AACzE,WAAO;AAAA,EACT,SAAS,OAAO;AACd,QAAI,iBAAiB,kCAAkC;AACrD,aAAO,EAAE,QAAQ,eAAe,QAAQ,MAAM,QAAQ;AAAA,IACxD;AACA,UAAM;AAAA,EACR,UAAE;AACA,YAAQ,MAAM,IAAI;AAClB,YAAQ,OAAO,OAAO,MAAM;AAAA,EAC9B;AACF;AAEA,SAAS,wBAA2B,MAAkB;AACpD,QAAM,WAAW;AAAA,IACf,sBAAsB,aAAa;AAAA,IACnC,eAAe,aAAa;AAAA,IAC5B,QAAQ,aAAa;AAAA,IACrB,qBAAqB,aAAa;AAAA,IAClC,oBAAoB,aAAa;AAAA,IACjC,eAAe,aAAa;AAAA,IAC5B,wBAAwB,aAAa;AAAA,IACrC,SAAS,aAAa;AAAA,IACtB,UAAU,aAAa;AAAA,IACvB,eAAe,aAAa;AAAA,IAC5B,aAAa,aAAa;AAAA,EAC5B;AACA,eAAa,uBAAuB;AACpC,eAAa,gBAAgB;AAC7B,eAAa,SAAS;AACtB,eAAa,sBAAsB;AACnC,eAAa,qBAAqB;AAClC,eAAa,gBAAgB;AAC7B,eAAa,yBAAyB;AACtC,eAAa,UAAU;AACvB,eAAa,WAAW;AACxB,eAAa,gBAAgB,CAAC;AAC9B,eAAa,cAAc;AAC3B,MAAI;AACF,WAAO,KAAK;AAAA,EACd,UAAE;AACA,WAAO,OAAO,cAAc,QAAQ;AAAA,EACtC;AACF;AAEA,SAAS,qBACP,OACA,UACA,WACA,aACM;AACN,MAAI,CAAC,OAAO,SAAS,KAAK,KAAK,QAAQ,GAAG;AACxC,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IACV,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,42 @@
+import { type PibblStructuralEventProps } from '../components/structural-events.js';
+import type { BoxStyle, LayoutItemStyle } from '../style/types.js';
+import type { PibblNodeInput } from '../types.js';
+import type { PibblElement } from '../element/types.js';
+import type { LayoutBox } from './types.js';
+type OverlayAlignment = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Supported geometry and presentation properties for Overlay.
+ *
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link Overlay}
+ */
+export interface OverlayStyle extends BoxStyle, LayoutItemStyle {
+    /** Default alignment of children on the cross or block axis. See {@link OverlayAlignment}. */
+    alignItems?: OverlayAlignment;
+    /** Default inline-axis alignment of grid or overlay children. See {@link OverlayAlignment}. */
+    justifyItems?: OverlayAlignment;
+}
+/**
+ * Authored inputs for Overlay, including the declared data and presentation options.
+ *
+ * @see {@link PibblNodeInput}
+ * @see {@link Overlay}
+ */
+export interface OverlayProps extends PibblStructuralEventProps {
+    /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */
+    children: PibblNodeInput;
+}
+/**
+ * Describes overlay layout for JSX or createElement authoring.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link OverlayProps}
+ * @see {@link OverlayStyle}
+ */
+export declare const Overlay: import("@pibbl/core").PibblPrimitiveComponent<OverlayProps, import("@pibbl/core").PrimitiveInput<OverlayProps, OverlayStyle>>;
+export declare function placeOverlayChild(container: Readonly<LayoutBox>, child: PibblElement<any>, alignment?: Readonly<Pick<OverlayStyle, 'alignItems' | 'justifyItems'>>): LayoutBox;
+export {};

package/dist/lib/layout/overlay.js

@@ -0,0 +1,151 @@
+import { preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
+import { definePrimitive } from "../define-primitive.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { layoutDiagnostic } from "../style/diagnostics.js";
+import {
+  wireStructuralEvents
+} from "../components/structural-events.js";
+import { getChildPrimitiveReceiverToken } from "../element/metadata.js";
+import {
+  childWithUsedSize,
+  prepareLayoutChildren,
+  prepareDirectChildStyle,
+  placeDirectChildren,
+  resolveContainerBox,
+  resolveDirectChildBox
+} from "./absolute.js";
+import { pushLayoutBox } from "./context.js";
+import { recordLayoutEvaluation } from "./diagnostics.js";
+function renderOverlay(props, style, ctx) {
+  wireStructuralEvents(props);
+  const children = prepareLayoutChildren(props.children, "Overlay");
+  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) => resolveOverlayChildPlacement(
+      localContent,
+      child,
+      style,
+      getChildPrimitiveReceiverToken(
+        GLOBAL_STATE.renderTransaction,
+        GLOBAL_STATE.primitiveReceiverToken,
+        occurrence++
+      )
+    ),
+    style.overflow
+  );
+}
+const Overlay = definePrimitive(renderOverlay, {
+  childInput: "structural",
+  resolveStyle: (style, context) => ({
+    box: resolveContainerBox(style, context, "Overlay", "overlay"),
+    overflow: style.overflow ?? "visible",
+    alignItems: style.alignItems ?? "stretch",
+    justifyItems: style.justifyItems ?? "stretch"
+  })
+});
+function placeOverlayChild(container, child, alignment = {}) {
+  return resolveOverlayChildPlacement(container, child, alignment).box;
+}
+function resolveOverlayChildPlacement(container, child, alignment = {}, receiverToken) {
+  const prepared = prepareDirectChildStyle(child, receiverToken, container);
+  const item = preparedStyleValue(prepared);
+  const resolved = resolveDirectChildBox(
+    container,
+    child,
+    "overlay",
+    item
+  );
+  const declaredBox = resolved.borderBox;
+  const horizontal = resolveItemAlignment(
+    item.justifySelf,
+    alignment.justifyItems ?? "stretch",
+    child,
+    container,
+    "justifySelf"
+  );
+  const vertical = resolveItemAlignment(
+    item.alignSelf,
+    alignment.alignItems ?? "stretch",
+    child,
+    container,
+    "alignSelf"
+  );
+  const x = alignAxis(
+    container.x,
+    container.width,
+    declaredBox.width,
+    horizontal
+  );
+  const y = alignAxis(
+    container.y,
+    container.height,
+    declaredBox.height,
+    vertical
+  );
+  const box = {
+    x,
+    y,
+    width: horizontal === "stretch" ? Math.max(0, container.width) : declaredBox.width,
+    height: vertical === "stretch" ? Math.max(0, container.height) : declaredBox.height
+  };
+  const horizontalPadding = declaredBox.width - resolved.contentBox.width;
+  const verticalPadding = declaredBox.height - resolved.contentBox.height;
+  return {
+    box,
+    element: childWithUsedSize(
+      child,
+      item,
+      Math.max(0, box.width - horizontalPadding),
+      Math.max(0, box.height - verticalPadding),
+      receiverToken,
+      preparedStyleQuery(prepared)
+    )
+  };
+}
+function resolveItemAlignment(item, fallback, child, container, property) {
+  if (item === void 0 || item === "auto") return fallback;
+  if (item === "start" || item === "center" || item === "end" || item === "stretch") {
+    return item;
+  }
+  throw layoutDiagnostic({
+    component: child.type.name || "Anonymous",
+    property,
+    value: item,
+    algorithm: "overlay",
+    constraints: {
+      minWidth: 0,
+      maxWidth: container.width,
+      minHeight: 0,
+      maxHeight: container.height
+    },
+    reason: "uses an unsupported overlay alignment value"
+  });
+}
+function alignAxis(start, available, size, alignment) {
+  switch (alignment) {
+    case "center":
+      return start + (available - size) / 2;
+    case "end":
+      return start + available - size;
+    default:
+      return start;
+  }
+}
+export {
+  Overlay,
+  placeOverlayChild
+};
+//# sourceMappingURL=overlay.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/overlay.ts"],
+  "sourcesContent": ["import { preparedStyleValue, preparedStyleQuery } from '../style/responsive.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { layoutDiagnostic } from '../style/diagnostics.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from '../components/structural-events.js';\nimport type { BoxStyle, LayoutItemStyle, ResolvedBoxStyle } from '../style/types.js';\nimport type {\n  PibblNodeInput,\n  RenderingContext2D,\n  SystemStyle,\n} from '../types.js';\nimport type { PibblElement } from '../element/types.js';\nimport { getChildPrimitiveReceiverToken } from '../element/metadata.js';\nimport {\n  childWithUsedSize,\n  prepareLayoutChildren,\n  prepareDirectChildStyle,\n  placeDirectChildren,\n  resolveContainerBox,\n  resolveDirectChildBox,\n} from './absolute.js';\nimport { pushLayoutBox } from './context.js';\nimport { recordLayoutEvaluation } from './diagnostics.js';\nimport type { LayoutBox } from './types.js';\n\ntype OverlayAlignment = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Supported geometry and presentation properties for Overlay.\n *\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Overlay}\n */\nexport interface OverlayStyle extends BoxStyle, LayoutItemStyle {\n  /** Default alignment of children on the cross or block axis. See {@link OverlayAlignment}. */\n  alignItems?: OverlayAlignment;\n  /** Default inline-axis alignment of grid or overlay children. See {@link OverlayAlignment}. */\n  justifyItems?: OverlayAlignment;\n}\n\n/**\n * Authored inputs for Overlay, including the declared data and presentation options.\n *\n * @see {@link PibblNodeInput}\n * @see {@link Overlay}\n */\nexport interface OverlayProps extends PibblStructuralEventProps {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\ninterface ResolvedOverlayStyle extends SystemStyle {\n  box: ResolvedBoxStyle;\n  overflow: 'visible' | 'clip';\n  alignItems: OverlayAlignment;\n  justifyItems: OverlayAlignment;\n}\n\nfunction renderOverlay(\n  props: OverlayProps,\n  style: Readonly<ResolvedOverlayStyle>,\n  ctx: RenderingContext2D,\n) {\n  wireStructuralEvents(props);\n  const children = prepareLayoutChildren(props.children, 'Overlay');\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 => resolveOverlayChildPlacement(\n      localContent,\n      child,\n      style,\n      getChildPrimitiveReceiverToken(\n        GLOBAL_STATE.renderTransaction,\n        GLOBAL_STATE.primitiveReceiverToken,\n        occurrence++,\n      ),\n    ),\n    style.overflow,\n  );\n}\n\n/**\n * Describes overlay 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 OverlayProps}\n * @see {@link OverlayStyle}\n */\nexport const Overlay = definePrimitive<\n  OverlayProps,\n  OverlayStyle,\n  OverlayStyle,\n  ResolvedOverlayStyle\n>(renderOverlay, {\n  childInput: 'structural',\n  resolveStyle: (style, context) => ({\n    box: resolveContainerBox(style, context, 'Overlay', 'overlay'),\n    overflow: style.overflow ?? 'visible',\n    alignItems: style.alignItems ?? 'stretch',\n    justifyItems: style.justifyItems ?? 'stretch',\n  }),\n});\n\nexport function placeOverlayChild(\n  container: Readonly<LayoutBox>,\n  child: PibblElement<any>,\n  alignment: Readonly<Pick<OverlayStyle, 'alignItems' | 'justifyItems'>> = {},\n): LayoutBox {\n  return resolveOverlayChildPlacement(container, child, alignment).box;\n}\n\nfunction resolveOverlayChildPlacement(\n  container: Readonly<LayoutBox>,\n  child: PibblElement<any>,\n  alignment: Readonly<Pick<OverlayStyle, 'alignItems' | 'justifyItems'>> = {},\n  receiverToken?: object,\n): { box: LayoutBox; element: PibblElement<any> } {\n  const prepared = prepareDirectChildStyle(child, receiverToken, container);\n  const item = preparedStyleValue(prepared) as Readonly<\n    BoxStyle & LayoutItemStyle\n  >;\n  const resolved = resolveDirectChildBox(\n    container,\n    child,\n    'overlay',\n    item,\n  );\n  const declaredBox = resolved.borderBox;\n  const horizontal = resolveItemAlignment(\n    item.justifySelf,\n    alignment.justifyItems ?? 'stretch',\n    child,\n    container,\n    'justifySelf',\n  );\n  const vertical = resolveItemAlignment(\n    item.alignSelf,\n    alignment.alignItems ?? 'stretch',\n    child,\n    container,\n    'alignSelf',\n  );\n  const x = alignAxis(\n    container.x,\n    container.width,\n    declaredBox.width,\n    horizontal,\n  );\n  const y = alignAxis(\n    container.y,\n    container.height,\n    declaredBox.height,\n    vertical,\n  );\n  const box = {\n    x,\n    y,\n    width: horizontal === 'stretch' ?\n        Math.max(0, container.width) :\n        declaredBox.width,\n    height: vertical === 'stretch' ?\n        Math.max(0, container.height) :\n        declaredBox.height,\n  };\n  const horizontalPadding = declaredBox.width - resolved.contentBox.width;\n  const verticalPadding = declaredBox.height - resolved.contentBox.height;\n  return {\n    box,\n    element: childWithUsedSize(\n      child,\n      item,\n      Math.max(0, box.width - horizontalPadding),\n      Math.max(0, box.height - verticalPadding),\n      receiverToken,\n      preparedStyleQuery(prepared),\n    ),\n  };\n}\n\nfunction resolveItemAlignment(\n  item: LayoutItemStyle['alignSelf'] | LayoutItemStyle['justifySelf'],\n  fallback: OverlayAlignment,\n  child: PibblElement<any>,\n  container: Readonly<LayoutBox>,\n  property: 'alignSelf' | 'justifySelf',\n): OverlayAlignment {\n  if (item === undefined || item === 'auto') return fallback;\n  if (item === 'start' || item === 'center' || item === 'end' || item === 'stretch') {\n    return item;\n  }\n  throw layoutDiagnostic({\n    component: child.type.name || 'Anonymous',\n    property,\n    value: item,\n    algorithm: 'overlay',\n    constraints: {\n      minWidth: 0,\n      maxWidth: container.width,\n      minHeight: 0,\n      maxHeight: container.height,\n    },\n    reason: 'uses an unsupported overlay alignment value',\n  });\n}\n\nfunction alignAxis(\n  start: number,\n  available: number,\n  size: number,\n  alignment: OverlayAlignment,\n): number {\n  switch (alignment) {\n    case 'center': return start + (available - size) / 2;\n    case 'end': return start + available - size;\n    default: return start;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/lib/layout/place-child.d.ts

@@ -0,0 +1,12 @@
+import type { PibblElement } from '../element/types.js';
+import type { InternalIdentityHint } from '../types.js';
+import type { LayoutBox } from './types.js';
+interface PlacedChildProps {
+    element: PibblElement<any>;
+    box: Readonly<LayoutBox>;
+    clipInChildSpace?: Readonly<LayoutBox>;
+    identityHint: InternalIdentityHint;
+}
+export declare function placeChild(props: PlacedChildProps): PibblElement<any>;
+export declare function createPlacementIdentityHint(element: PibblElement<any>, occurrence: number): InternalIdentityHint;
+export {};

package/dist/lib/layout/place-child.js

@@ -0,0 +1,72 @@
+import { rectangleSvg } from "../html/portable-clips.js";
+import { definePrimitive } from "../define-primitive.js";
+import { createElement } from "../element/create-element.js";
+import { setPlacementIdentityHint } from "../element/metadata.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { pushClippingPath } from "../util/push-clipping-path.js";
+import { pushLayoutBox } from "./context.js";
+import { recordLayoutPlacement } from "./diagnostics.js";
+function PlacedChild(props, _style, ctx) {
+  recordLayoutPlacement();
+  assertFiniteBox(props.box, "placement");
+  if (props.clipInChildSpace) {
+    assertFiniteBox(props.clipInChildSpace, "placement clip");
+  }
+  const refs = GLOBAL_STATE.componentRefs;
+  let localBox = refs.refs[0];
+  if (!localBox || localBox.width !== props.box.width || localBox.height !== props.box.height) {
+    localBox = Object.freeze({
+      x: 0,
+      y: 0,
+      width: props.box.width,
+      height: props.box.height
+    });
+    refs.refs[0] = localBox;
+  }
+  ctx.translate(props.box.x, props.box.y);
+  const releaseLayout = pushLayoutBox(localBox);
+  let releaseClip;
+  try {
+    const clip = props.clipInChildSpace;
+    if (clip) {
+      const path = new Path2D();
+      path.rect(clip.x, clip.y, clip.width, clip.height);
+      releaseClip = pushClippingPath(ctx, path, "nonzero", true, rectangleSvg(clip));
+    }
+  } catch (error) {
+    releaseLayout();
+    throw error;
+  }
+  refs.onAfterRender = () => {
+    releaseClip?.();
+    releaseLayout();
+  };
+  return props.element;
+}
+const PlacedChildPrimitive = definePrimitive(PlacedChild);
+function placeChild(props) {
+  const element = createElement(PlacedChildPrimitive, props);
+  setPlacementIdentityHint(element, props.identityHint);
+  return element;
+}
+function createPlacementIdentityHint(element, occurrence) {
+  if (!Number.isInteger(occurrence) || occurrence < 0) {
+    throw new Error("Placement identity occurrence must be a nonnegative integer");
+  }
+  return { type: element.type, key: element.key, occurrence };
+}
+function assertFiniteBox(box, label) {
+  for (const [property, value] of Object.entries(box)) {
+    if (!Number.isFinite(value)) {
+      throw new Error(`${label} ${property} must be finite, received ${value}`);
+    }
+  }
+  if (box.width < 0 || box.height < 0) {
+    throw new Error(`${label} dimensions must be nonnegative`);
+  }
+}
+export {
+  createPlacementIdentityHint,
+  placeChild
+};
+//# sourceMappingURL=place-child.js.map

package/dist/lib/layout/place-child.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/place-child.ts"],
+  "sourcesContent": ["import { rectangleSvg } from '../html/portable-clips.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { createElement } from '../element/create-element.js';\nimport { setPlacementIdentityHint } from '../element/metadata.js';\nimport type { PibblElement } from '../element/types.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport type { InternalIdentityHint, RenderingContext2D } from '../types.js';\nimport { pushClippingPath } from '../util/push-clipping-path.js';\nimport { pushLayoutBox } from './context.js';\nimport { recordLayoutPlacement } from './diagnostics.js';\nimport type { LayoutBox } from './types.js';\n\ninterface PlacedChildProps {\n  element: PibblElement<any>;\n  box: Readonly<LayoutBox>;\n  clipInChildSpace?: Readonly<LayoutBox>;\n  identityHint: InternalIdentityHint;\n}\n\nfunction PlacedChild(\n  props: PlacedChildProps,\n  _style: Readonly<{}>,\n  ctx: RenderingContext2D,\n) {\n  recordLayoutPlacement();\n  assertFiniteBox(props.box, 'placement');\n  if (props.clipInChildSpace) {\n    assertFiniteBox(props.clipInChildSpace, 'placement clip');\n  }\n\n  const refs = GLOBAL_STATE.componentRefs!;\n  let localBox = refs.refs[0] as Readonly<LayoutBox> | undefined;\n  if (\n    !localBox ||\n    localBox.width !== props.box.width ||\n    localBox.height !== props.box.height\n  ) {\n    localBox = Object.freeze({\n      x: 0,\n      y: 0,\n      width: props.box.width,\n      height: props.box.height,\n    });\n    refs.refs[0] = localBox;\n  }\n\n  ctx.translate(props.box.x, props.box.y);\n  const releaseLayout = pushLayoutBox(localBox);\n  let releaseClip: (() => void) | undefined;\n  try {\n    const clip = props.clipInChildSpace;\n    if (clip) {\n      const path = new Path2D();\n      path.rect(clip.x, clip.y, clip.width, clip.height);\n      releaseClip = pushClippingPath(ctx, path, 'nonzero', true, rectangleSvg(clip));\n    }\n  } catch (error) {\n    releaseLayout();\n    throw error;\n  }\n\n  refs.onAfterRender = () => {\n    releaseClip?.();\n    releaseLayout();\n  };\n  return props.element;\n}\n\nconst PlacedChildPrimitive = definePrimitive<PlacedChildProps>(PlacedChild);\n\nexport function placeChild(props: PlacedChildProps): PibblElement<any> {\n  const element = createElement(PlacedChildPrimitive, props);\n  setPlacementIdentityHint(element, props.identityHint);\n  return element;\n}\n\nexport function createPlacementIdentityHint(\n  element: PibblElement<any>,\n  occurrence: number,\n): InternalIdentityHint {\n  if (!Number.isInteger(occurrence) || occurrence < 0) {\n    throw new Error('Placement identity occurrence must be a nonnegative integer');\n  }\n  return { type: element.type, key: element.key, occurrence };\n}\n\nfunction assertFiniteBox(box: Readonly<LayoutBox>, label: string): void {\n  for (const [property, value] of Object.entries(box)) {\n    if (!Number.isFinite(value)) {\n      throw new Error(`${label} ${property} must be finite, received ${value}`);\n    }\n  }\n  if (box.width < 0 || box.height < 0) {\n    throw new Error(`${label} dimensions must be nonnegative`);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAEzC,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAUtC,SAAS,YACP,OACA,QACA,KACA;AACA,wBAAsB;AACtB,kBAAgB,MAAM,KAAK,WAAW;AACtC,MAAI,MAAM,kBAAkB;AAC1B,oBAAgB,MAAM,kBAAkB,gBAAgB;AAAA,EAC1D;AAEA,QAAM,OAAO,aAAa;AAC1B,MAAI,WAAW,KAAK,KAAK,CAAC;AAC1B,MACE,CAAC,YACD,SAAS,UAAU,MAAM,IAAI,SAC7B,SAAS,WAAW,MAAM,IAAI,QAC9B;AACA,eAAW,OAAO,OAAO;AAAA,MACvB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO,MAAM,IAAI;AAAA,MACjB,QAAQ,MAAM,IAAI;AAAA,IACpB,CAAC;AACD,SAAK,KAAK,CAAC,IAAI;AAAA,EACjB;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;AACtC,QAAM,gBAAgB,cAAc,QAAQ;AAC5C,MAAI;AACJ,MAAI;AACF,UAAM,OAAO,MAAM;AACnB,QAAI,MAAM;AACR,YAAM,OAAO,IAAI,OAAO;AACxB,WAAK,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK,OAAO,KAAK,MAAM;AACjD,oBAAc,iBAAiB,KAAK,MAAM,WAAW,MAAM,aAAa,IAAI,CAAC;AAAA,IAC/E;AAAA,EACF,SAAS,OAAO;AACd,kBAAc;AACd,UAAM;AAAA,EACR;AAEA,OAAK,gBAAgB,MAAM;AACzB,kBAAc;AACd,kBAAc;AAAA,EAChB;AACA,SAAO,MAAM;AACf;AAEA,MAAM,uBAAuB,gBAAkC,WAAW;AAEnE,SAAS,WAAW,OAA4C;AACrE,QAAM,UAAU,cAAc,sBAAsB,KAAK;AACzD,2BAAyB,SAAS,MAAM,YAAY;AACpD,SAAO;AACT;AAEO,SAAS,4BACd,SACA,YACsB;AACtB,MAAI,CAAC,OAAO,UAAU,UAAU,KAAK,aAAa,GAAG;AACnD,UAAM,IAAI,MAAM,6DAA6D;AAAA,EAC/E;AACA,SAAO,EAAE,MAAM,QAAQ,MAAM,KAAK,QAAQ,KAAK,WAAW;AAC5D;AAEA,SAAS,gBAAgB,KAA0B,OAAqB;AACtE,aAAW,CAAC,UAAU,KAAK,KAAK,OAAO,QAAQ,GAAG,GAAG;AACnD,QAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAC3B,YAAM,IAAI,MAAM,GAAG,KAAK,IAAI,QAAQ,6BAA6B,KAAK,EAAE;AAAA,IAC1E;AAAA,EACF;AACA,MAAI,IAAI,QAAQ,KAAK,IAAI,SAAS,GAAG;AACnC,UAAM,IAAI,MAAM,GAAG,KAAK,iCAAiC;AAAA,EAC3D;AACF;",
+  "names": []
+}

package/dist/lib/layout/positioning-diagnostics.d.ts

@@ -0,0 +1,3 @@
+import type { PibblElement } from '../element/types.js';
+import type { SystemStyle } from '../types.js';
+export declare function assertSupportedChildPosition(layout: string, child: PibblElement<any>, style: Readonly<SystemStyle>): void;

package/dist/lib/layout/positioning-diagnostics.js

@@ -0,0 +1,15 @@
+import { isDevelopment } from "../development.js";
+import { getElementSource } from "../element/metadata.js";
+function assertSupportedChildPosition(layout, child, style) {
+  if (!isDevelopment) return;
+  const values = style;
+  const fields = ["left", "top"].filter((key) => Object.prototype.hasOwnProperty.call(values, key) && values[key] !== void 0);
+  if (fields.length === 0) return;
+  const source = getElementSource(child);
+  const location = source ? ` Source: ${source.fileName}:${source.lineNumber}` : "";
+  throw new Error(`PIBBL_LAYOUT_IGNORED_POSITION: ${child.type.name || "Anonymous"} inside ${layout} declares ${fields.map((key) => `${key}: ${String(values[key])}`).join(", ")}. ${layout} controls this child's position; these fields have no effect. Use ${layout} alignment/gap or an Absolute region for positioned content.${location}`);
+}
+export {
+  assertSupportedChildPosition
+};
+//# sourceMappingURL=positioning-diagnostics.js.map