@pibbl/core 0.0.1

package/dist/lib/style/responsive.js

@@ -0,0 +1,172 @@
+import { isSignal, recordPlainInputResolution, recordSignalInputResolution } from "../signals/graph.js";
+import { getLayoutBox } from "../layout/context.js";
+import { getElementSource } from "../element/metadata.js";
+import { layoutDiagnostic } from "./diagnostics.js";
+class ResponsiveStylePreparation {
+  constructor(style, query) {
+    this.style = style;
+    this.query = query;
+  }
+  style;
+  query;
+}
+function preparedStyleValue(value) {
+  return value instanceof ResponsiveStylePreparation ? value.style : value;
+}
+function preparedStyleQuery(value) {
+  return value instanceof ResponsiveStylePreparation ? value.query : void 0;
+}
+let measurementMode;
+function getStyleMeasurementMode() {
+  return measurementMode;
+}
+function withStyleMeasurement(mode, work) {
+  const previous = measurementMode;
+  measurementMode = mode;
+  try {
+    return work();
+  } finally {
+    measurementMode = previous;
+  }
+}
+class UnsupportedResponsiveMeasurement extends Error {
+}
+function rejectResponsiveMeasurement(element) {
+  throw new UnsupportedResponsiveMeasurement(queryDiagnostic(
+    element,
+    "style.when",
+    "nonempty rule list",
+    "PIBBL_STYLE_QUERY_MEASUREMENT",
+    "Give this item definite dimensions or a definite allocation, and put responsive styles inside that allocated component."
+  ).message);
+}
+function queryDiagnostic(element, property, value, code, repair, preparation = "render") {
+  const name = element?.type.name || "Primitive";
+  const location = element && getElementSource(element);
+  return layoutDiagnostic({
+    component: location ? `${name} (${location.fileName}:${location.lineNumber})` : name,
+    algorithm: measurementMode ? "measurement" : preparation,
+    property,
+    value,
+    reason: `${code}: ${repair}`
+  });
+}
+const counters = { preparations: 0, rules: 0, patchFields: 0, mergeCopies: 0 };
+function responsiveStyleSnapshot() {
+  return { ...counters };
+}
+const bounds = ["minWidth", "maxWidth", "minHeight", "maxHeight"];
+function failQuery(element, preparation, code, property, value, repair) {
+  throw queryDiagnostic(element, property, value, code, repair, preparation);
+}
+function queryRecord(value, index, suffix, element, preparation) {
+  if (isSignal(value)) failQuery(element, preparation, "PIBBL_STYLE_QUERY_SIGNAL", `style.when[${index}]${suffix}`, "Signal", "Put the signal on the whole style or on a base/patch field.");
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    failQuery(element, preparation, "PIBBL_STYLE_QUERY_SHAPE", `style.when[${index}]${suffix}`, value, "Use a plain data record.");
+  }
+  const prototype = Object.getPrototypeOf(value);
+  if (prototype !== Object.prototype && prototype !== null) {
+    failQuery(element, preparation, "PIBBL_STYLE_QUERY_SHAPE", `style.when[${index}]${suffix}`, value, "Use a plain data record.");
+  }
+  return value;
+}
+function resolveResponsiveStyle(source, element, suppliedBasis) {
+  const preparation = suppliedBasis ? "layout" : "render";
+  const list = source.when;
+  if (isSignal(list)) failQuery(element, preparation, "PIBBL_STYLE_QUERY_SIGNAL", "style.when", "Signal", "Put the signal on the whole style or on a base/patch field.");
+  if (!Array.isArray(list)) failQuery(element, preparation, "PIBBL_STYLE_QUERY_SHAPE", "style.when", list, "Use a readonly list of query/style records.");
+  const rules = list;
+  let result;
+  let basis;
+  let axes = 0;
+  const rejectedMode = measurementMode === "mounted-intrinsic" || measurementMode === "recursive";
+  const checkEligibilityFirst = measurementMode === "standalone-root" && suppliedBasis !== void 0 && (!Number.isFinite(suppliedBasis.width) || !Number.isFinite(suppliedBasis.height));
+  let unavailable;
+  if (rules.length) counters.preparations++;
+  for (let index = 0; index < rules.length; index++) {
+    counters.rules++;
+    const rule = queryRecord(rules[index], index, "", element, preparation);
+    for (const key of Object.keys(rule)) {
+      if (key !== "query" && key !== "style") failQuery(element, preparation, "PIBBL_STYLE_QUERY_KEY", `style.when[${index}].${key}`, rule[key], "Use only query and style in a rule.");
+    }
+    const query = queryRecord(rule.query, index, ".query", element, preparation);
+    const patch = queryRecord(rule.style, index, ".style", element, preparation);
+    if ("when" in patch) failQuery(element, preparation, "PIBBL_STYLE_QUERY_NESTED", `style.when[${index}].style.when`, patch.when, "Flatten rules into the receiving style's when list.");
+    let hasBound = false;
+    for (const key of Object.keys(query)) {
+      if (!bounds.includes(key)) failQuery(element, preparation, "PIBBL_STYLE_QUERY_KEY", `style.when[${index}].query.${key}`, query[key], "Use minWidth, maxWidth, minHeight, or maxHeight.");
+      const value = query[key];
+      if (value === void 0) continue;
+      if (isSignal(value)) failQuery(element, preparation, "PIBBL_STYLE_QUERY_SIGNAL", `style.when[${index}].query.${key}`, "Signal", "Put the signal on the whole style or on a base/patch field.");
+      if (typeof value !== "number" || !Number.isFinite(value) || value < 0) failQuery(element, preparation, "PIBBL_STYLE_QUERY_BOUND", `style.when[${index}].query.${key}`, value, "Use a finite nonnegative bound.");
+      hasBound = true;
+    }
+    if (!hasBound) failQuery(element, preparation, "PIBBL_STYLE_QUERY_KEY", `style.when[${index}].query`, query, "Supply at least one size bound.");
+    const { minWidth, maxWidth, minHeight, maxHeight } = query;
+    if (minWidth !== void 0 && maxWidth !== void 0 && minWidth > maxWidth) failQuery(element, preparation, "PIBBL_STYLE_QUERY_RANGE", `style.when[${index}].query`, query, "Set minWidth less than or equal to maxWidth.");
+    if (minHeight !== void 0 && maxHeight !== void 0 && minHeight > maxHeight) failQuery(element, preparation, "PIBBL_STYLE_QUERY_RANGE", `style.when[${index}].query`, query, "Set minHeight less than or equal to maxHeight.");
+    const ruleAxes = (minWidth !== void 0 || maxWidth !== void 0 ? 1 : 0) | (minHeight !== void 0 || maxHeight !== void 0 ? 2 : 0);
+    axes |= ruleAxes;
+    if (rejectedMode) continue;
+    basis ??= suppliedBasis ?? getLayoutBox();
+    if (ruleAxes & 1 && !Number.isFinite(basis.width)) unavailable ??= { property: `style.when[${index}].query.${minWidth !== void 0 ? "minWidth" : "maxWidth"}`, axis: "Width" };
+    if (ruleAxes & 2 && !Number.isFinite(basis.height)) unavailable ??= { property: `style.when[${index}].query.${minHeight !== void 0 ? "minHeight" : "maxHeight"}`, axis: "Height" };
+    if (checkEligibilityFirst || unavailable) continue;
+    result ??= copyBase(source);
+    applyMatchingPatch(query, patch, basis, result);
+  }
+  if (rules.length && rejectedMode) rejectResponsiveMeasurement(element);
+  if (unavailable) {
+    throw new UnsupportedResponsiveMeasurement(queryDiagnostic(
+      element,
+      unavailable.property,
+      unavailable.axis === "Width" ? basis.width : basis.height,
+      "PIBBL_STYLE_QUERY_BASIS",
+      `Supply a finite max${unavailable.axis} to standalone measureElement.`
+    ).message);
+  }
+  if (checkEligibilityFirst && rules.length) {
+    result = copyBase(source);
+    for (const rule of rules) {
+      applyMatchingPatch(rule.query, rule.style, basis, result);
+    }
+  }
+  const selected = result ?? copyBase(source);
+  return basis ? new ResponsiveStylePreparation(selected, { basis, axes }) : selected;
+}
+function readField(key, value) {
+  if (key === "custom") return value;
+  if (isSignal(value)) {
+    recordSignalInputResolution();
+    return value.get();
+  }
+  recordPlainInputResolution();
+  return value;
+}
+function copyBase(source) {
+  counters.mergeCopies++;
+  const result = {};
+  for (const key of Object.keys(source)) if (key !== "when") result[key] = readField(key, source[key]);
+  return result;
+}
+function applyMatchingPatch(query, patch, basis, result) {
+  const { minWidth, maxWidth, minHeight, maxHeight } = query;
+  if ((minWidth === void 0 || basis.width >= minWidth) && (maxWidth === void 0 || basis.width <= maxWidth) && (minHeight === void 0 || basis.height >= minHeight) && (maxHeight === void 0 || basis.height <= maxHeight)) {
+    for (const key of Object.keys(patch)) {
+      counters.patchFields++;
+      result[key] = readField(key, patch[key]);
+    }
+  }
+}
+export {
+  ResponsiveStylePreparation,
+  UnsupportedResponsiveMeasurement,
+  getStyleMeasurementMode,
+  preparedStyleQuery,
+  preparedStyleValue,
+  rejectResponsiveMeasurement,
+  resolveResponsiveStyle,
+  responsiveStyleSnapshot,
+  withStyleMeasurement
+};
+//# sourceMappingURL=responsive.js.map

package/dist/lib/style/responsive.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/style/responsive.ts"],
+  "sourcesContent": ["import { isSignal, recordPlainInputResolution, recordSignalInputResolution } from '../signals/graph.js';\nimport { getLayoutBox } from '../layout/context.js';\nimport { getElementSource } from '../element/metadata.js';\nimport type { PibblElement } from '../element/types.js';\nimport { layoutDiagnostic } from './diagnostics.js';\n\nexport interface QueryBasis { readonly width: number; readonly height: number }\nexport interface PreparedQuery { readonly basis: QueryBasis; readonly axes: number }\n/** A single evaluation's selected style; never indexed by receiver identity. */\nexport class ResponsiveStylePreparation<T extends object = Readonly<Record<PropertyKey, unknown>>> {\n  constructor(public style: T, readonly query: PreparedQuery) {}\n}\nexport function preparedStyleValue<T extends object>(value: T | ResponsiveStylePreparation<T>): T {\n  return value instanceof ResponsiveStylePreparation ? value.style : value;\n}\nexport function preparedStyleQuery(value: object): PreparedQuery | undefined {\n  return value instanceof ResponsiveStylePreparation ? value.query : undefined;\n}\nexport type StyleMeasurementMode = 'standalone-root' | 'mounted-intrinsic' | 'recursive';\nlet measurementMode: StyleMeasurementMode | undefined;\nexport function getStyleMeasurementMode() { return measurementMode; }\nexport function withStyleMeasurement<T>(mode: StyleMeasurementMode, work: () => T): T {\n  const previous = measurementMode;\n  measurementMode = mode;\n  try { return work(); } finally { measurementMode = previous; }\n}\nexport class UnsupportedResponsiveMeasurement extends Error {}\nexport function rejectResponsiveMeasurement(element?: PibblElement<any>): never {\n  throw new UnsupportedResponsiveMeasurement(queryDiagnostic(\n    element, 'style.when', 'nonempty rule list', 'PIBBL_STYLE_QUERY_MEASUREMENT',\n    'Give this item definite dimensions or a definite allocation, ' +\n    'and put responsive styles inside that allocated component.',\n  ).message);\n}\nfunction queryDiagnostic(\n  element: PibblElement<any> | undefined,\n  property: string,\n  value: unknown,\n  code: string,\n  repair: string,\n  preparation: 'render' | 'layout' = 'render',\n) {\n  const name = element?.type.name || 'Primitive';\n  const location = element && getElementSource(element);\n  return layoutDiagnostic({\n    component: location ? `${name} (${location.fileName}:${location.lineNumber})` : name,\n    algorithm: measurementMode ? 'measurement' : preparation,\n    property, value, reason: `${code}: ${repair}`,\n  });\n}\nconst counters = { preparations: 0, rules: 0, patchFields: 0, mergeCopies: 0 };\nexport function responsiveStyleSnapshot() { return { ...counters }; }\nconst bounds = ['minWidth', 'maxWidth', 'minHeight', 'maxHeight'] as const;\n\nfunction failQuery(\n  element: PibblElement<any> | undefined,\n  preparation: 'render' | 'layout',\n  code: string,\n  property: string,\n  value: unknown,\n  repair: string,\n): never {\n  throw queryDiagnostic(element, property, value, code, repair, preparation);\n}\nfunction queryRecord(\n  value: unknown,\n  index: number,\n  suffix: string,\n  element: PibblElement<any> | undefined,\n  preparation: 'render' | 'layout',\n): Record<string, unknown> {\n  if (isSignal(value)) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_SIGNAL', `style.when[${index}]${suffix}`, 'Signal', 'Put the signal on the whole style or on a base/patch field.');\n  if (!value || typeof value !== 'object' || Array.isArray(value)) {\n    failQuery(element, preparation, 'PIBBL_STYLE_QUERY_SHAPE', `style.when[${index}]${suffix}`, value, 'Use a plain data record.');\n  }\n  const prototype = Object.getPrototypeOf(value);\n  if (prototype !== Object.prototype && prototype !== null) {\n    failQuery(element, preparation, 'PIBBL_STYLE_QUERY_SHAPE', `style.when[${index}]${suffix}`, value, 'Use a plain data record.');\n  }\n  return value as Record<string, unknown>;\n}\n\n/** Selects a closed local rule list; ordinary styles bypass this function. */\nexport function resolveResponsiveStyle(\n  source: Readonly<Record<PropertyKey, unknown>>,\n  element?: PibblElement<any>,\n  suppliedBasis?: QueryBasis,\n): Readonly<Record<PropertyKey, unknown>> | ResponsiveStylePreparation {\n  const preparation = suppliedBasis ? 'layout' : 'render';\n  const list = source.when;\n  if (isSignal(list)) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_SIGNAL', 'style.when', 'Signal', 'Put the signal on the whole style or on a base/patch field.');\n  if (!Array.isArray(list)) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_SHAPE', 'style.when', list, 'Use a readonly list of query/style records.');\n  const rules = list as unknown[];\n  let result: Record<PropertyKey, unknown> | undefined;\n  let basis: QueryBasis | undefined;\n  let axes = 0;\n  const rejectedMode = measurementMode === 'mounted-intrinsic' || measurementMode === 'recursive';\n  const checkEligibilityFirst = measurementMode === 'standalone-root' && suppliedBasis !== undefined &&\n    (!Number.isFinite(suppliedBasis.width) || !Number.isFinite(suppliedBasis.height));\n  let unavailable: { property: string; axis: 'Width' | 'Height' } | undefined;\n  // Validate every envelope, even for unmatched rules. No unmatched patch walk.\n  if (rules.length) counters.preparations++;\n  for (let index = 0; index < rules.length; index++) {\n    counters.rules++;\n    const rule = queryRecord(rules[index], index, '', element, preparation);\n    for (const key of Object.keys(rule)) {\n      if (key !== 'query' && key !== 'style') failQuery(element, preparation, 'PIBBL_STYLE_QUERY_KEY', `style.when[${index}].${key}`, rule[key], 'Use only query and style in a rule.');\n    }\n    const query = queryRecord(rule.query, index, '.query', element, preparation);\n    const patch = queryRecord(rule.style, index, '.style', element, preparation);\n    if ('when' in patch) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_NESTED', `style.when[${index}].style.when`, patch.when, \"Flatten rules into the receiving style's when list.\");\n    let hasBound = false;\n    for (const key of Object.keys(query)) {\n      if (!(bounds as readonly string[]).includes(key)) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_KEY', `style.when[${index}].query.${key}`, query[key], 'Use minWidth, maxWidth, minHeight, or maxHeight.');\n      const value = query[key];\n      if (value === undefined) continue;\n      if (isSignal(value)) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_SIGNAL', `style.when[${index}].query.${key}`, 'Signal', 'Put the signal on the whole style or on a base/patch field.');\n      if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_BOUND', `style.when[${index}].query.${key}`, value, 'Use a finite nonnegative bound.');\n      hasBound = true;\n    }\n    if (!hasBound) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_KEY', `style.when[${index}].query`, query, 'Supply at least one size bound.');\n    const { minWidth, maxWidth, minHeight, maxHeight } = query as { [K in typeof bounds[number]]?: number };\n    if (minWidth !== undefined && maxWidth !== undefined && minWidth > maxWidth) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_RANGE', `style.when[${index}].query`, query, 'Set minWidth less than or equal to maxWidth.');\n    if (minHeight !== undefined && maxHeight !== undefined && minHeight > maxHeight) failQuery(element, preparation, 'PIBBL_STYLE_QUERY_RANGE', `style.when[${index}].query`, query, 'Set minHeight less than or equal to maxHeight.');\n    const ruleAxes = (minWidth !== undefined || maxWidth !== undefined ? 1 : 0) |\n      (minHeight !== undefined || maxHeight !== undefined ? 2 : 0);\n    axes |= ruleAxes;\n    // Eligibility errors never hide a malformed later rule.\n    if (rejectedMode) continue;\n    basis ??= suppliedBasis ?? getLayoutBox();\n    if ((ruleAxes & 1) && !Number.isFinite(basis.width)) unavailable ??= { property: `style.when[${index}].query.${minWidth !== undefined ? 'minWidth' : 'maxWidth'}`, axis: 'Width' };\n    if ((ruleAxes & 2) && !Number.isFinite(basis.height)) unavailable ??= { property: `style.when[${index}].query.${minHeight !== undefined ? 'minHeight' : 'maxHeight'}`, axis: 'Height' };\n    if (checkEligibilityFirst || unavailable) continue;\n    result ??= copyBase(source);\n    applyMatchingPatch(query as QueryBounds, patch, basis, result);\n  }\n  if (rules.length && rejectedMode) rejectResponsiveMeasurement(element);\n  if (unavailable) {\n    throw new UnsupportedResponsiveMeasurement(queryDiagnostic(\n      element, unavailable.property, unavailable.axis === 'Width' ? basis!.width : basis!.height,\n      'PIBBL_STYLE_QUERY_BASIS', `Supply a finite max${unavailable.axis} to standalone measureElement.`,\n    ).message);\n  }\n  if (checkEligibilityFirst && rules.length) {\n    // Only standalone measurement with an indefinite unqueried axis needs this\n    // second scan. Validation and callbacks are never repeated.\n    result = copyBase(source);\n    for (const rule of rules as Array<{ query: QueryBounds; style: Record<string, unknown> }>) {\n      applyMatchingPatch(rule.query, rule.style, basis!, result);\n    }\n  }\n  const selected = result ?? copyBase(source);\n  return basis ? new ResponsiveStylePreparation(selected, { basis, axes }) : selected;\n}\nfunction readField(key: string, value: unknown): unknown {\n  if (key === 'custom') return value;\n  if (isSignal(value)) { recordSignalInputResolution(); return value.get(); }\n  recordPlainInputResolution();\n  return value;\n}\nfunction copyBase(source: Readonly<Record<PropertyKey, unknown>>): Record<PropertyKey, unknown> {\n  counters.mergeCopies++;\n  const result: Record<PropertyKey, unknown> = {};\n  for (const key of Object.keys(source)) if (key !== 'when') result[key] = readField(key, source[key]);\n  return result;\n}\n\ntype QueryBounds = { [K in typeof bounds[number]]?: number };\nfunction applyMatchingPatch(\n  query: QueryBounds,\n  patch: Record<string, unknown>,\n  basis: QueryBasis,\n  result: Record<PropertyKey, unknown>,\n): void {\n  const { minWidth, maxWidth, minHeight, maxHeight } = query;\n  if ((minWidth === undefined || basis.width >= minWidth) &&\n    (maxWidth === undefined || basis.width <= maxWidth) &&\n    (minHeight === undefined || basis.height >= minHeight) &&\n    (maxHeight === undefined || basis.height <= maxHeight)) {\n    for (const key of Object.keys(patch)) {\n      counters.patchFields++;\n      result[key] = readField(key, patch[key]);\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,338 @@
+import type { normalizeEdges } from "./normalize.js";
+import type { GridStyle } from "../layout/grid.js";
+import type { Image } from "../components/img.js";
+import type { resolveBox } from "../layout/box.js";
+import type { SvgPath } from "../components/svg-path.js";
+import type { Text } from "../components/text.js";
+import type { PolygonStyle } from "../components/polygon.js";
+import type { StarStyle } from "../components/star.js";
+import type { PathGeometry } from '../geometry/path-geometry.js';
+import type { FillStyle, PixelGridAlignment, StrokeStyle, SystemStyle } from '../types.js';
+import type { LayoutBox } from '../layout/types.js';
+import type { PositioningStyle } from './positioning.js';
+/**
+ * A percentage string resolved against the relevant parent layout dimension.
+ *
+ * @see {@link Length}
+ */
+export type Percentage = `${number}%`;
+/**
+ * A layout length in logical units, a parent-relative percentage, or automatic sizing.
+ *
+ * @see {@link Percentage}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link RectStyle}
+ */
+export type Length = number | Percentage | 'auto';
+/**
+ * Uniform and per-vertex corner radii for supported drawing primitives.
+ *
+ * @see {@link Length}
+ * @see {@link RectStyle}
+ * @see {@link PolygonStyle}
+ * @see {@link StarStyle}
+ */
+export interface RoundedCornerStyle {
+    /** Uniform corner radius used where no per-corner override is supplied. See {@link Length}. */
+    cornerRadius?: Exclude<Length, 'auto'>;
+    /** Per-corner radii; nullish entries use the uniform corner radius. See {@link Length}. */
+    cornerRadii?: readonly (Exclude<Length, 'auto'> | null | undefined)[];
+}
+/**
+ * One inset for every edge or independently specified top, right, bottom, and left insets.
+ *
+ * @see {@link BoxStyle}
+ * @see {@link normalizeEdges}
+ */
+export type EdgeValues = number | Readonly<{
+    /** Top edge value or top envelope guide. See {@link EdgeValues}. */
+    top?: number;
+    /** Right edge coordinate or inset. See {@link EdgeValues}. */
+    right?: number;
+    /** Bottom edge value or bottom envelope guide. See {@link EdgeValues}. */
+    bottom?: number;
+    /** Left edge coordinate or inset. See {@link EdgeValues}. */
+    left?: number;
+}>;
+/**
+ * Declared box dimensions, size limits, padding, and overflow behavior.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link Length}
+ * @see {@link EdgeValues}
+ * @see {@link ImgStyle}
+ * @see {@link PathStyle}
+ * @see {@link RectStyle}
+ */
+export interface BoxStyle extends SystemStyle {
+    /** Horizontal extent in the units of the containing geometry or surface. See {@link Length}. */
+    width?: Length;
+    /** Vertical extent in the units of the containing geometry or surface. See {@link Length}. */
+    height?: Length;
+    /** Minimum permitted width. See {@link Length}. */
+    minWidth?: Exclude<Length, 'auto'>;
+    /** Maximum permitted width. See {@link Length}. */
+    maxWidth?: Exclude<Length, 'auto'>;
+    /** Minimum permitted height. See {@link Length}. */
+    minHeight?: Exclude<Length, 'auto'>;
+    /** Maximum permitted height. See {@link Length}. */
+    maxHeight?: Exclude<Length, 'auto'>;
+    /** Insets between the border box and content box. See {@link EdgeValues}. */
+    padding?: EdgeValues;
+    /** Selects `"visible"`, `"clip"` for overflow. See {@link BoxStyle}. */
+    overflow?: 'visible' | 'clip';
+}
+/**
+ * Resolved border and content boxes after sizing and padding are applied.
+ *
+ * @see {@link LayoutBox}
+ * @see {@link resolveBox}
+ */
+export interface ResolvedBoxStyle {
+    /** The resolved outer rectangle including padding. See {@link LayoutBox}. */
+    borderBox: LayoutBox;
+    /** The resolved rectangle available to content after padding. See {@link LayoutBox}. */
+    contentBox: LayoutBox;
+}
+/**
+ * Parent-layout participation: positioning, self-alignment, flex sizing, and explicit grid placement.
+ *
+ * @see {@link Length}
+ * @see {@link FlexItemStyle}
+ * @see {@link ImgStyle}
+ * @see {@link PathStyle}
+ */
+export interface LayoutItemStyle extends PositioningStyle {
+    /** This child's cross-axis or block-axis alignment override. See {@link LayoutItemStyle}. */
+    alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'flex-start' | 'flex-end';
+    /** This child's inline-axis alignment override. See {@link LayoutItemStyle}. */
+    justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+    /** Initial main-axis size before flex growth or shrinkage. See {@link Length}. */
+    flexBasis?: Length;
+    /** Relative share of positive free space assigned to this child. See {@link LayoutItemStyle}. */
+    flexGrow?: number;
+    /** Relative factor used when reducing main-axis size. See {@link LayoutItemStyle}. */
+    flexShrink?: number;
+    /** Explicit starting grid column. See {@link LayoutItemStyle}. */
+    gridColumnStart?: number;
+    /** Number of columns occupied by this child. See {@link LayoutItemStyle}. */
+    gridColumnSpan?: number;
+    /** Explicit starting grid row. See {@link LayoutItemStyle}. */
+    gridRowStart?: number;
+    /** Number of rows occupied by this child. See {@link LayoutItemStyle}. */
+    gridRowSpan?: number;
+}
+/**
+ * The supported flex sizing and cross-axis alignment properties of a child.
+ *
+ * @see {@link LayoutItemStyle}
+ */
+export type FlexItemStyle = Pick<LayoutItemStyle, 'flexBasis' | 'flexGrow' | 'flexShrink'> & {
+    /** This child's cross-axis or block-axis alignment override. See {@link FlexItemStyle}. */
+    alignSelf?: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center';
+};
+/**
+ * Explicit grid cell placement, spans, and alignment of a child.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link GridStyle}
+ */
+export interface GridItemStyle extends SystemStyle {
+    /** Explicit starting grid column. See {@link GridItemStyle}. */
+    gridColumnStart?: number;
+    /** Number of columns occupied by this child. See {@link GridItemStyle}. */
+    gridColumnSpan?: number;
+    /** Explicit starting grid row. See {@link GridItemStyle}. */
+    gridRowStart?: number;
+    /** Number of rows occupied by this child. See {@link GridItemStyle}. */
+    gridRowSpan?: number;
+    /** This child's cross-axis or block-axis alignment override. See {@link GridItemStyle}. */
+    alignSelf?: 'auto' | 'stretch' | 'start' | 'center' | 'end';
+    /** This child's inline-axis alignment override. See {@link GridItemStyle}. */
+    justifySelf?: 'auto' | 'stretch' | 'start' | 'center' | 'end';
+}
+type LayoutParticipationKey = Exclude<keyof BoxStyle | keyof LayoutItemStyle, 'custom' | 'filter'>;
+export type ResolvedDrawingStyle<S> = Omit<S, LayoutParticipationKey>;
+/**
+ * Fill, stroke, stroke width, and opacity shared by drawing primitives.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link FillStyle}
+ * @see {@link StrokeStyle}
+ * @see {@link PathStyle}
+ * @see {@link RectStyle}
+ * @see {@link SvgPathStyle}
+ */
+export interface PaintStyle extends SystemStyle {
+    /** Paint used for the interior. See {@link FillStyle}. */
+    fill?: FillStyle;
+    /** Paint used for the outline. See {@link StrokeStyle}. */
+    stroke?: StrokeStyle;
+    /** Width of the painted outline. See {@link PaintStyle}. */
+    strokeWidth?: number;
+    /** Opacity of the painted result. See {@link PaintStyle}. */
+    opacity?: number;
+}
+/**
+ * Cursor presentation for an interactive primitive.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link ImgStyle}
+ * @see {@link PathStyle}
+ * @see {@link RectStyle}
+ */
+export interface CursorStyle extends SystemStyle {
+    /** Cursor shown while this target owns pointer presentation. See {@link CursorStyle}. */
+    cursor?: string;
+}
+/**
+ * Geometry, paint, layout, and interaction width for drawing a path.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PaintStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link PathGeometry}
+ */
+export interface PathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /**
+     * Geometry to draw or clip, supplied in the declared path representation. See
+     * {@link PathGeometry}.
+     */
+    d: Path2D | PathGeometry;
+    /**
+     * Width used for line hit testing independently of the visible stroke width. See
+     * {@link PathStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * Rectangle dimensions, paint, corner rounding, and pixel-grid alignment.
+ *
+ * @see {@link RoundedCornerStyle}
+ * @see {@link SystemStyle}
+ * @see {@link PaintStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link Length}
+ * @see {@link PixelGridAlignment}
+ */
+export interface RectStyle extends RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /** Horizontal extent in the units of the containing geometry or surface. See {@link Length}. */
+    width: Length;
+    /** Vertical extent in the units of the containing geometry or surface. See {@link Length}. */
+    height: Length;
+    /**
+     * Pixel-grid alignment policy applied to the resolved geometry. See {@link PixelGridAlignment}.
+     */
+    alignToPixelGrid?: PixelGridAlignment;
+    /**
+     * Width used for line hit testing independently of the visible stroke width. See
+     * {@link RectStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * SVG path data together with paint, layout, and interaction styling.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PaintStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link SvgPath}
+ */
+export interface SvgPathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /**
+     * Geometry to draw or clip, supplied in the declared path representation. See
+     * {@link SvgPathStyle}.
+     */
+    d: string;
+    /**
+     * Width used for line hit testing independently of the visible stroke width. See
+     * {@link SvgPathStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * How text that exceeds its box remains visible, compresses, truncates, or clips.
+ *
+ * @see {@link TextStyle}
+ */
+export type TextFit = 'visible' | 'squish' | 'ellipsis' | 'clip';
+/**
+ * Font, alignment, wrapping, overflow fitting, paint, and layout of Canvas text.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PaintStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link TextFit}
+ * @see {@link Text}
+ */
+export interface TextStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /** Spacing between successive text lines. See {@link TextStyle}. */
+    lineHeight?: number;
+    /** Whether content may wrap into additional lines. See {@link TextStyle}. */
+    wrap?: boolean;
+    /** Policy for fitting content within its available box. See {@link TextFit}. */
+    fit?: TextFit;
+    /** Canvas font string used to draw or measure text. See {@link TextStyle}. */
+    font?: string;
+    /** Canvas baseline used when placing text. See {@link TextStyle}. */
+    textBaseline?: CanvasTextBaseline;
+    /** Canvas horizontal alignment used when placing text. See {@link TextStyle}. */
+    textAlign?: CanvasTextAlign;
+}
+/**
+ * Image source, sizing, opacity, outline, and pixel-grid alignment.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link StrokeStyle}
+ * @see {@link PixelGridAlignment}
+ * @see {@link Image}
+ */
+export interface ImgStyle extends SystemStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /** Image URL loaded by the drawing primitive. See {@link ImgStyle}. */
+    src: string;
+    /** Paint used for the outline. See {@link StrokeStyle}. */
+    stroke?: StrokeStyle;
+    /** Width of the painted outline. See {@link ImgStyle}. */
+    strokeWidth?: number;
+    /** Opacity of the painted result. See {@link ImgStyle}. */
+    opacity?: number;
+    /**
+     * Pixel-grid alignment policy applied to the resolved geometry. See {@link PixelGridAlignment}.
+     */
+    alignToPixelGrid?: PixelGridAlignment;
+}
+export type ResolvedPathStyle = ResolvedDrawingStyle<PathStyle>;
+export type ResolvedRectStyle = Omit<ResolvedDrawingStyle<RectStyle>, keyof RoundedCornerStyle> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    cornerRadius?: number;
+    cornerRadii?: readonly (number | null | undefined)[];
+};
+export type ResolvedSvgPathStyle = ResolvedDrawingStyle<SvgPathStyle>;
+export type ResolvedTextStyle = ResolvedDrawingStyle<TextStyle> & {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+export type ResolvedImgStyle = ResolvedDrawingStyle<ImgStyle> & {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+export {};

package/dist/lib/surface/resolve-surface.d.ts

@@ -0,0 +1,4 @@
+import type { PibblConfig, PibblSurfaceSnapshot, ResolvedSurfaceConfig, SurfaceDisplaySize } from './types.js';
+export declare function validateSurfaceConfig(canvas: HTMLCanvasElement, config?: PibblConfig): ResolvedSurfaceConfig;
+export declare function resolveSurface(config: ResolvedSurfaceConfig, display: SurfaceDisplaySize, pixelRatio: number): PibblSurfaceSnapshot | undefined;
+export declare function createLayerSurface(width: number, height: number, densityX: number, densityY: number): PibblSurfaceSnapshot;