@pibbl/core 0.0.1 → 0.0.3-alpha.109.1

package/dist/lib/style/resolve-length.js

@@ -10,14 +10,7 @@ function resolveLength(value, reference, property, context = {}) {
     }
     return value;
   }
-  if (typeof value !== "string" || !DECIMAL_PERCENTAGE.test(value)) {
-    throw diagnostic(
-      property,
-      value,
-      `uses an unsupported length value ${String(value)}`,
-      context
-    );
-  }
+  const percentage = parsePercentage(value, property, context);
   if (reference === void 0 || !Number.isFinite(reference)) {
     throw diagnostic(
       property,
@@ -34,7 +27,7 @@ function resolveLength(value, reference, property, context = {}) {
       context
     );
   }
-  const resolved = Number.parseFloat(value) / 100 * reference;
+  const resolved = percentage / 100 * reference;
   if (!Number.isFinite(resolved)) {
     throw diagnostic(
       property,
@@ -45,10 +38,21 @@ function resolveLength(value, reference, property, context = {}) {
   }
   return resolved;
 }
+function parsePercentage(value, property, context = {}) {
+  if (typeof value !== "string" || !DECIMAL_PERCENTAGE.test(value)) {
+    throw diagnostic(property, value, `uses an unsupported length value ${String(value)}`, context);
+  }
+  const percentage = Number.parseFloat(value);
+  if (!Number.isFinite(percentage)) {
+    throw diagnostic(property, value, "percentage must be finite", context);
+  }
+  return percentage;
+}
 function diagnostic(property, value, reason, context) {
   return layoutDiagnostic({ ...context, property, value, reason });
 }
 export {
+  parsePercentage,
   resolveLength
 };
 //# sourceMappingURL=resolve-length.js.map

package/dist/lib/style/resolve-length.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/style/resolve-length.ts"],
-  "sourcesContent": ["import {\n  layoutDiagnostic,\n  type LayoutDiagnosticContext,\n} from './diagnostics.js';\nimport type { Length } from './types.js';\n\nconst DECIMAL_PERCENTAGE = /^[+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%$/;\n\n/**\n * Resolves a numeric or percentage length; automatic sizing returns undefined.\n *\n * @param value - Logical length or percentage to resolve. See {@link Length}.\n * @param reference - Reference length for percentages, or undefined if unavailable.\n * @param property - Property name used in diagnostics.\n * @param context - Component and property context for diagnostic messages. See\n * {@link LayoutDiagnosticContext} .\n * @returns The resolved logical length, or undefined for an unresolved automatic length.\n *\n * @see {@link Length}\n * @see {@link LayoutDiagnosticContext}\n */\nexport function resolveLength(\n  value: Length,\n  reference: number | undefined,\n  property: string,\n  context: Readonly<LayoutDiagnosticContext> = {},\n): number | undefined {\n  if (value === 'auto') return undefined;\n\n  if (typeof value === 'number') {\n    if (!Number.isFinite(value)) {\n      throw diagnostic(property, value, 'must be a finite number', context);\n    }\n    return value;\n  }\n\n  if (typeof value !== 'string' || !DECIMAL_PERCENTAGE.test(value)) {\n    throw diagnostic(\n      property,\n      value,\n      `uses an unsupported length value ${String(value)}`,\n      context,\n    );\n  }\n\n  if (reference === undefined || !Number.isFinite(reference)) {\n    throw diagnostic(\n      property,\n      value,\n      'requires a definite finite percentage reference',\n      context,\n    );\n  }\n  if (reference < 0) {\n    throw diagnostic(\n      property,\n      value,\n      'percentage reference must be nonnegative',\n      context,\n    );\n  }\n\n  const resolved = (Number.parseFloat(value) / 100) * reference;\n  if (!Number.isFinite(resolved)) {\n    throw diagnostic(\n      property,\n      value,\n      'resolved percentage arithmetic must remain finite',\n      context,\n    );\n  }\n  return resolved;\n}\n\nfunction diagnostic(\n  property: string,\n  value: unknown,\n  reason: string,\n  context: Readonly<LayoutDiagnosticContext>,\n) {\n  return layoutDiagnostic({ ...context, property, value, reason });\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,OAEK;AAGP,MAAM,qBAAqB;AAepB,SAAS,cACd,OACA,WACA,UACA,UAA6C,CAAC,GAC1B;AACpB,MAAI,UAAU,OAAQ,QAAO;AAE7B,MAAI,OAAO,UAAU,UAAU;AAC7B,QAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAC3B,YAAM,WAAW,UAAU,OAAO,2BAA2B,OAAO;AAAA,IACtE;AACA,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,YAAY,CAAC,mBAAmB,KAAK,KAAK,GAAG;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,oCAAoC,OAAO,KAAK,CAAC;AAAA,MACjD;AAAA,IACF;AAAA,EACF;AAEA,MAAI,cAAc,UAAa,CAAC,OAAO,SAAS,SAAS,GAAG;AAC1D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,YAAY,GAAG;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,WAAY,OAAO,WAAW,KAAK,IAAI,MAAO;AACpD,MAAI,CAAC,OAAO,SAAS,QAAQ,GAAG;AAC9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,WACP,UACA,OACA,QACA,SACA;AACA,SAAO,iBAAiB,EAAE,GAAG,SAAS,UAAU,OAAO,OAAO,CAAC;AACjE;",
+  "sourcesContent": ["import {\n  layoutDiagnostic,\n  type LayoutDiagnosticContext,\n} from './diagnostics.js';\nimport type { Length } from './types.js';\n\nconst DECIMAL_PERCENTAGE = /^[+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%$/;\n\n/**\n * Resolves a numeric or percentage length; automatic sizing returns undefined.\n *\n * @param value - Logical length or percentage to resolve. See {@link Length}.\n * @param reference - Reference length for percentages, or undefined if unavailable.\n * @param property - Property name used in diagnostics.\n * @param context - Component and property context for diagnostic messages. See\n * {@link LayoutDiagnosticContext} .\n * @returns The resolved logical length, or undefined for an unresolved automatic length.\n *\n * @see {@link Length}\n * @see {@link LayoutDiagnosticContext}\n */\nexport function resolveLength(\n  value: Length,\n  reference: number | undefined,\n  property: string,\n  context: Readonly<LayoutDiagnosticContext> = {},\n): number | undefined {\n  if (value === 'auto') return undefined;\n\n  if (typeof value === 'number') {\n    if (!Number.isFinite(value)) {\n      throw diagnostic(property, value, 'must be a finite number', context);\n    }\n    return value;\n  }\n\n  const percentage = parsePercentage(value, property, context);\n\n  if (reference === undefined || !Number.isFinite(reference)) {\n    throw diagnostic(\n      property,\n      value,\n      'requires a definite finite percentage reference',\n      context,\n    );\n  }\n  if (reference < 0) {\n    throw diagnostic(\n      property,\n      value,\n      'percentage reference must be nonnegative',\n      context,\n    );\n  }\n\n  const resolved = (percentage / 100) * reference;\n  if (!Number.isFinite(resolved)) {\n    throw diagnostic(\n      property,\n      value,\n      'resolved percentage arithmetic must remain finite',\n      context,\n    );\n  }\n  return resolved;\n}\n\n/** @internal Parse a percentage independently of its containing-size reference. */\nexport function parsePercentage(value: unknown, property: string, context: Readonly<LayoutDiagnosticContext> = {}): number {\n  if (typeof value !== 'string' || !DECIMAL_PERCENTAGE.test(value)) {\n    throw diagnostic(property, value, `uses an unsupported length value ${String(value)}`, context);\n  }\n  const percentage = Number.parseFloat(value);\n  if (!Number.isFinite(percentage)) {\n    throw diagnostic(property, value, 'percentage must be finite', context);\n  }\n  return percentage;\n}\n\nfunction diagnostic(\n  property: string,\n  value: unknown,\n  reason: string,\n  context: Readonly<LayoutDiagnosticContext>,\n) {\n  return layoutDiagnostic({ ...context, property, value, reason });\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAEK;AAGP,MAAM,qBAAqB;AAepB,SAAS,cACd,OACA,WACA,UACA,UAA6C,CAAC,GAC1B;AACpB,MAAI,UAAU,OAAQ,QAAO;AAE7B,MAAI,OAAO,UAAU,UAAU;AAC7B,QAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAC3B,YAAM,WAAW,UAAU,OAAO,2BAA2B,OAAO;AAAA,IACtE;AACA,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,gBAAgB,OAAO,UAAU,OAAO;AAE3D,MAAI,cAAc,UAAa,CAAC,OAAO,SAAS,SAAS,GAAG;AAC1D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,YAAY,GAAG;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,WAAY,aAAa,MAAO;AACtC,MAAI,CAAC,OAAO,SAAS,QAAQ,GAAG;AAC9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,gBAAgB,OAAgB,UAAkB,UAA6C,CAAC,GAAW;AACzH,MAAI,OAAO,UAAU,YAAY,CAAC,mBAAmB,KAAK,KAAK,GAAG;AAChE,UAAM,WAAW,UAAU,OAAO,oCAAoC,OAAO,KAAK,CAAC,IAAI,OAAO;AAAA,EAChG;AACA,QAAM,aAAa,OAAO,WAAW,KAAK;AAC1C,MAAI,CAAC,OAAO,SAAS,UAAU,GAAG;AAChC,UAAM,WAAW,UAAU,OAAO,6BAA6B,OAAO;AAAA,EACxE;AACA,SAAO;AACT;AAEA,SAAS,WACP,UACA,OACA,QACA,SACA;AACA,SAAO,iBAAiB,EAAE,GAAG,SAAS,UAAU,OAAO,OAAO,CAAC;AACjE;",
   "names": []
 }

package/dist/lib/style/sizing-length.d.ts

@@ -0,0 +1,51 @@
+import { type LayoutDiagnosticContext } from './diagnostics.js';
+import type { Length, Percentage } from './types.js';
+declare const fitContentBrand: unique symbol;
+/** Sizing values requiring an intrinsic layout owner. See {@link SizingLength}. */
+export type SizingKeyword = 'min-content' | 'max-content';
+/** Immutable fit-content bound created by {@link fitContent}. See {@link SizingLength}. */
+export interface FitContent {
+    /** Finite nonnegative logical length or parent-axis percentage. See {@link Percentage}. */
+    readonly limit: number | Percentage;
+    readonly [fitContentBrand]: true;
+}
+/** Sizing-only value; padding and insets retain {@link Length}. See {@link FitContent}, {@link SizingKeyword}. */
+export type SizingLength = Length | SizingKeyword | FitContent | 'stretch';
+/** A scalar result or an owner-resolved intrinsic sizing request. */
+export type NormalizedSizingLength = Readonly<{
+    kind: 'auto';
+}> | Readonly<{
+    kind: 'length';
+    value: number;
+}> | Readonly<{
+    kind: 'min-content';
+}> | Readonly<{
+    kind: 'max-content';
+}> | Readonly<{
+    kind: 'fit-content';
+    limit: number;
+}>;
+/** Options supplied by the layout owner that owns intrinsic-size policy. */
+export interface SizingNormalizationOptions {
+    readonly reference: number | undefined;
+    readonly property: string;
+    readonly context?: Readonly<LayoutDiagnosticContext>;
+    readonly allowAuto: boolean;
+    readonly allowIntrinsic: boolean;
+}
+/**
+ * Creates an immutable bound between measured min- and max-content widths.
+ * @param limit - Nonnegative finite logical width or parent-axis {@link Percentage}.
+ * @returns Branded immutable {@link FitContent} sizing value.
+ * @see {@link SizingLength}
+ */
+export declare function fitContent(limit: number | Percentage): FitContent;
+/** Identifies a fit-content value without accepting lookalike style records. */
+export declare function isFitContent(value: unknown): value is FitContent;
+/** Identifies a non-scalar sizing request without widening scalar length users. */
+export declare function isIntrinsicSizingValue(value: unknown): value is SizingKeyword | FitContent;
+/** Resolves only scalar sizing input at a non-intrinsic owner boundary. */
+export declare function resolveScalarSizingLength(value: SizingLength, reference: number | undefined, property: string, context?: Readonly<LayoutDiagnosticContext>): number | undefined;
+/** Normalizes sizing syntax without teaching scalar length users intrinsic semantics. */
+export declare function normalizeSizingLength(value: SizingLength | undefined, options: Readonly<SizingNormalizationOptions>): NormalizedSizingLength | undefined;
+export {};

package/dist/lib/style/sizing-length.js

@@ -0,0 +1,77 @@
+import { layoutDiagnostic } from "./diagnostics.js";
+import { parsePercentage, resolveLength } from "./resolve-length.js";
+const fitContentBrand = /* @__PURE__ */ Symbol("pibbl.fit-content");
+function fitContent(limit) {
+  const numeric = typeof limit === "number" ? limit : parsePercentage(limit, "fitContent");
+  if (!Number.isFinite(numeric) || numeric < 0) {
+    throw layoutDiagnostic({
+      property: "fitContent",
+      value: limit,
+      reason: "limit must be finite and nonnegative"
+    });
+  }
+  return Object.freeze({ [fitContentBrand]: true, limit });
+}
+function isFitContent(value) {
+  return typeof value === "object" && value !== null && value[fitContentBrand] === true;
+}
+function isIntrinsicSizingValue(value) {
+  return value === "min-content" || value === "max-content" || isFitContent(value);
+}
+function resolveScalarSizingLength(value, reference, property, context = {}) {
+  if (value === "stretch") {
+    if (reference !== void 0 && Number.isFinite(reference) && reference >= 0) return reference;
+    throw layoutDiagnostic({ ...context, property, value, reason: "stretch requires a finite owning allocation" });
+  }
+  if (isIntrinsicSizingValue(value)) {
+    throw layoutDiagnostic({
+      ...context,
+      property,
+      value,
+      reason: "requires a direct finite Flex intrinsic-sizing owner"
+    });
+  }
+  return resolveLength(value, reference, property, context);
+}
+function normalizeSizingLength(value, options) {
+  if (value === void 0) return void 0;
+  const context = options.context ?? {};
+  if (isFitContent(value)) {
+    if (!options.allowIntrinsic) throw unsupported(options, value, "intrinsic sizing requires a measuring layout owner");
+    const limit = resolveLength(value.limit, options.reference, options.property, context);
+    if (limit === void 0 || limit < 0) {
+      throw layoutDiagnostic({ ...context, property: options.property, value, reason: "fit-content limit must resolve to a finite nonnegative length" });
+    }
+    return { kind: "fit-content", limit };
+  }
+  if (value === "min-content" || value === "max-content") {
+    if (!options.allowIntrinsic) throw unsupported(options, value, "intrinsic sizing requires a measuring layout owner");
+    return { kind: value };
+  }
+  if (value === "stretch") {
+    const resolved2 = resolveScalarSizingLength(value, options.reference, options.property, context);
+    return { kind: "length", value: resolved2 };
+  }
+  const resolved = resolveLength(value, options.reference, options.property, context);
+  if (resolved === void 0) {
+    if (!options.allowAuto) throw unsupported(options, value, "automatic sizing is not allowed for this property");
+    return { kind: "auto" };
+  }
+  return { kind: "length", value: resolved };
+}
+function unsupported(options, value, reason) {
+  return layoutDiagnostic({
+    ...options.context ?? {},
+    property: options.property,
+    value,
+    reason
+  });
+}
+export {
+  fitContent,
+  isFitContent,
+  isIntrinsicSizingValue,
+  normalizeSizingLength,
+  resolveScalarSizingLength
+};
+//# sourceMappingURL=sizing-length.js.map

package/dist/lib/style/sizing-length.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/style/sizing-length.ts"],
+  "sourcesContent": ["import { layoutDiagnostic, type LayoutDiagnosticContext } from './diagnostics.js';\nimport { parsePercentage, resolveLength } from './resolve-length.js';\nimport type { Length, Percentage } from './types.js';\n\nconst fitContentBrand: unique symbol = Symbol('pibbl.fit-content');\n\n/** Sizing values requiring an intrinsic layout owner. See {@link SizingLength}. */\nexport type SizingKeyword = 'min-content' | 'max-content';\n\n/** Immutable fit-content bound created by {@link fitContent}. See {@link SizingLength}. */\nexport interface FitContent {\n  /** Finite nonnegative logical length or parent-axis percentage. See {@link Percentage}. */\n  readonly limit: number | Percentage;\n  readonly [fitContentBrand]: true;\n}\n\n/** Sizing-only value; padding and insets retain {@link Length}. See {@link FitContent}, {@link SizingKeyword}. */\nexport type SizingLength = Length | SizingKeyword | FitContent | 'stretch';\n\n/** A scalar result or an owner-resolved intrinsic sizing request. */\nexport type NormalizedSizingLength =\n  | Readonly<{ kind: 'auto' }>\n  | Readonly<{ kind: 'length'; value: number }>\n  | Readonly<{ kind: 'min-content' }>\n  | Readonly<{ kind: 'max-content' }>\n  | Readonly<{ kind: 'fit-content'; limit: number }>;\n\n/** Options supplied by the layout owner that owns intrinsic-size policy. */\nexport interface SizingNormalizationOptions {\n  readonly reference: number | undefined;\n  readonly property: string;\n  readonly context?: Readonly<LayoutDiagnosticContext>;\n  readonly allowAuto: boolean;\n  readonly allowIntrinsic: boolean;\n}\n\n/**\n * Creates an immutable bound between measured min- and max-content widths.\n * @param limit - Nonnegative finite logical width or parent-axis {@link Percentage}.\n * @returns Branded immutable {@link FitContent} sizing value.\n * @see {@link SizingLength}\n */\nexport function fitContent(limit: number | Percentage): FitContent {\n  const numeric = typeof limit === 'number' ? limit : parsePercentage(limit, 'fitContent');\n  if (!Number.isFinite(numeric) || numeric < 0) {\n    throw layoutDiagnostic({\n      property: 'fitContent',\n      value: limit,\n      reason: 'limit must be finite and nonnegative',\n    });\n  }\n  return Object.freeze({ [fitContentBrand]: true, limit }) as FitContent;\n}\n\n/** Identifies a fit-content value without accepting lookalike style records. */\nexport function isFitContent(value: unknown): value is FitContent {\n  return typeof value === 'object' && value !== null &&\n    (value as Partial<FitContent>)[fitContentBrand] === true;\n}\n\n/** Identifies a non-scalar sizing request without widening scalar length users. */\nexport function isIntrinsicSizingValue(value: unknown): value is SizingKeyword | FitContent {\n  return value === 'min-content' || value === 'max-content' || isFitContent(value);\n}\n\n/** Resolves only scalar sizing input at a non-intrinsic owner boundary. */\nexport function resolveScalarSizingLength(\n  value: SizingLength,\n  reference: number | undefined,\n  property: string,\n  context: Readonly<LayoutDiagnosticContext> = {},\n): number | undefined {\n  if (value === 'stretch') {\n    if (reference !== undefined && Number.isFinite(reference) && reference >= 0) return reference;\n    throw layoutDiagnostic({ ...context, property, value, reason: 'stretch requires a finite owning allocation' });\n  }\n  if (isIntrinsicSizingValue(value)) {\n    throw layoutDiagnostic({\n      ...context,\n      property,\n      value,\n      reason: 'requires a direct finite Flex intrinsic-sizing owner',\n    });\n  }\n  return resolveLength(value, reference, property, context);\n}\n\n/** Normalizes sizing syntax without teaching scalar length users intrinsic semantics. */\nexport function normalizeSizingLength(\n  value: SizingLength | undefined,\n  options: Readonly<SizingNormalizationOptions>,\n): NormalizedSizingLength | undefined {\n  if (value === undefined) return undefined;\n  const context = options.context ?? {};\n  if (isFitContent(value)) {\n    if (!options.allowIntrinsic) throw unsupported(options, value, 'intrinsic sizing requires a measuring layout owner');\n    const limit = resolveLength(value.limit, options.reference, options.property, context);\n    if (limit === undefined || limit < 0) {\n      throw layoutDiagnostic({ ...context, property: options.property, value, reason: 'fit-content limit must resolve to a finite nonnegative length' });\n    }\n    return { kind: 'fit-content', limit };\n  }\n  if (value === 'min-content' || value === 'max-content') {\n    if (!options.allowIntrinsic) throw unsupported(options, value, 'intrinsic sizing requires a measuring layout owner');\n    return { kind: value };\n  }\n  if (value === 'stretch') {\n    const resolved = resolveScalarSizingLength(value, options.reference, options.property, context)!;\n    return { kind: 'length', value: resolved };\n  }\n  const resolved = resolveLength(value, options.reference, options.property, context);\n  if (resolved === undefined) {\n    if (!options.allowAuto) throw unsupported(options, value, 'automatic sizing is not allowed for this property');\n    return { kind: 'auto' };\n  }\n  return { kind: 'length', value: resolved };\n}\n\nfunction unsupported(\n  options: Readonly<SizingNormalizationOptions>,\n  value: unknown,\n  reason: string,\n): Error {\n  return layoutDiagnostic({\n    ...(options.context ?? {}),\n    property: options.property,\n    value,\n    reason,\n  });\n}\n"],
+  "mappings": "AAAA,SAAS,wBAAsD;AAC/D,SAAS,iBAAiB,qBAAqB;AAG/C,MAAM,kBAAiC,uBAAO,mBAAmB;AAsC1D,SAAS,WAAW,OAAwC;AACjE,QAAM,UAAU,OAAO,UAAU,WAAW,QAAQ,gBAAgB,OAAO,YAAY;AACvF,MAAI,CAAC,OAAO,SAAS,OAAO,KAAK,UAAU,GAAG;AAC5C,UAAM,iBAAiB;AAAA,MACrB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IACV,CAAC;AAAA,EACH;AACA,SAAO,OAAO,OAAO,EAAE,CAAC,eAAe,GAAG,MAAM,MAAM,CAAC;AACzD;AAGO,SAAS,aAAa,OAAqC;AAChE,SAAO,OAAO,UAAU,YAAY,UAAU,QAC3C,MAA8B,eAAe,MAAM;AACxD;AAGO,SAAS,uBAAuB,OAAqD;AAC1F,SAAO,UAAU,iBAAiB,UAAU,iBAAiB,aAAa,KAAK;AACjF;AAGO,SAAS,0BACd,OACA,WACA,UACA,UAA6C,CAAC,GAC1B;AACpB,MAAI,UAAU,WAAW;AACvB,QAAI,cAAc,UAAa,OAAO,SAAS,SAAS,KAAK,aAAa,EAAG,QAAO;AACpF,UAAM,iBAAiB,EAAE,GAAG,SAAS,UAAU,OAAO,QAAQ,8CAA8C,CAAC;AAAA,EAC/G;AACA,MAAI,uBAAuB,KAAK,GAAG;AACjC,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV,CAAC;AAAA,EACH;AACA,SAAO,cAAc,OAAO,WAAW,UAAU,OAAO;AAC1D;AAGO,SAAS,sBACd,OACA,SACoC;AACpC,MAAI,UAAU,OAAW,QAAO;AAChC,QAAM,UAAU,QAAQ,WAAW,CAAC;AACpC,MAAI,aAAa,KAAK,GAAG;AACvB,QAAI,CAAC,QAAQ,eAAgB,OAAM,YAAY,SAAS,OAAO,oDAAoD;AACnH,UAAM,QAAQ,cAAc,MAAM,OAAO,QAAQ,WAAW,QAAQ,UAAU,OAAO;AACrF,QAAI,UAAU,UAAa,QAAQ,GAAG;AACpC,YAAM,iBAAiB,EAAE,GAAG,SAAS,UAAU,QAAQ,UAAU,OAAO,QAAQ,gEAAgE,CAAC;AAAA,IACnJ;AACA,WAAO,EAAE,MAAM,eAAe,MAAM;AAAA,EACtC;AACA,MAAI,UAAU,iBAAiB,UAAU,eAAe;AACtD,QAAI,CAAC,QAAQ,eAAgB,OAAM,YAAY,SAAS,OAAO,oDAAoD;AACnH,WAAO,EAAE,MAAM,MAAM;AAAA,EACvB;AACA,MAAI,UAAU,WAAW;AACvB,UAAMA,YAAW,0BAA0B,OAAO,QAAQ,WAAW,QAAQ,UAAU,OAAO;AAC9F,WAAO,EAAE,MAAM,UAAU,OAAOA,UAAS;AAAA,EAC3C;AACA,QAAM,WAAW,cAAc,OAAO,QAAQ,WAAW,QAAQ,UAAU,OAAO;AAClF,MAAI,aAAa,QAAW;AAC1B,QAAI,CAAC,QAAQ,UAAW,OAAM,YAAY,SAAS,OAAO,mDAAmD;AAC7G,WAAO,EAAE,MAAM,OAAO;AAAA,EACxB;AACA,SAAO,EAAE,MAAM,UAAU,OAAO,SAAS;AAC3C;AAEA,SAAS,YACP,SACA,OACA,QACO;AACP,SAAO,iBAAiB;AAAA,IACtB,GAAI,QAAQ,WAAW,CAAC;AAAA,IACxB,UAAU,QAAQ;AAAA,IAClB;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "names": ["resolved"]
+}

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

@@ -10,6 +10,7 @@ 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';
+import type { SizingLength } from './sizing-length.js';
 /**
  * A percentage string resolved against the relevant parent layout dimension.
  *
@@ -42,18 +43,20 @@ export interface RoundedCornerStyle {
 /**
  * One inset for every edge or independently specified top, right, bottom, and left insets.
  *
+ * @typeParam T - Permitted edge values; defaults to numeric insets. Padding may opt into {@link Percentage}.
+ *
  * @see {@link BoxStyle}
  * @see {@link normalizeEdges}
  */
-export type EdgeValues = number | Readonly<{
+export type EdgeValues<T extends number | Percentage = number> = T | Readonly<{
     /** Top edge value or top envelope guide. See {@link EdgeValues}. */
-    top?: number;
+    top?: T;
     /** Right edge coordinate or inset. See {@link EdgeValues}. */
-    right?: number;
+    right?: T;
     /** Bottom edge value or bottom envelope guide. See {@link EdgeValues}. */
-    bottom?: number;
+    bottom?: T;
     /** Left edge coordinate or inset. See {@link EdgeValues}. */
-    left?: number;
+    left?: T;
 }>;
 /**
  * Declared box dimensions, size limits, padding, and overflow behavior.
@@ -66,20 +69,37 @@ export type EdgeValues = number | Readonly<{
  * @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'>;
+    /** Positive finite width/height ratio. A declared definite axis derives the automatic axis before its bounds; boxSizing selects content or border geometry. See {@link resolveBox}. */
+    aspectRatio?: number;
+    /** Selects whether dimensions, bounds and Flex basis include padding and layout borders. Defaults to content-box.
+     * Border-box content floors at zero and the outer box floors at total axis padding plus layout borders.
+     * Painted stroke widths remain independent. See {@link ResolvedBoxStyle}.
+     */
+    boxSizing?: 'content-box' | 'border-box';
+    /** Horizontal extent in the units of the containing geometry or surface. See {@link SizingLength}. */
+    width?: SizingLength;
+    /** Vertical extent in the units of the containing geometry or surface. See {@link SizingLength}. */
+    height?: SizingLength;
+    /** Minimum permitted horizontal width. Finite horizontal Flex intrinsic owners also accept intrinsic sizing requests; automatic remains invalid. See {@link SizingLength}. */
+    minWidth?: Exclude<SizingLength, 'auto'>;
+    /** Maximum permitted horizontal width. Finite horizontal Flex intrinsic owners also accept intrinsic sizing requests; automatic remains invalid. See {@link SizingLength}. */
+    maxWidth?: Exclude<SizingLength, 'auto'>;
     /** Minimum permitted height. See {@link Length}. */
-    minHeight?: Exclude<Length, 'auto'>;
+    minHeight?: Exclude<SizingLength, 'auto'>;
     /** Maximum permitted height. See {@link Length}. */
-    maxHeight?: Exclude<Length, 'auto'>;
-    /** Insets between the border box and content box. See {@link EdgeValues}. */
-    padding?: EdgeValues;
+    maxHeight?: Exclude<SizingLength, 'auto'>;
+    /** Padding inside layout borders. Experimental allocated Flex percentages use owner content width for every edge. See {@link EdgeValues}, {@link Percentage}. */
+    padding?: EdgeValues<number | Percentage>;
+    /** Nonnegative inline-start padding overriding its physical padding edge. Experimental percentages require an allocated Flex owner and use its content width. See {@link BoxStyle}. */
+    paddingStart?: number | Percentage;
+    /** Nonnegative inline-end padding overriding its physical padding edge. See {@link BoxStyle}. */
+    paddingEnd?: number | Percentage;
+    /** Layout-only physical border insets, in logical pixels. Defaults to zero; does not paint a stroke. See {@link EdgeValues}. */
+    borderWidth?: EdgeValues;
+    /** Experimental nonnegative numeric inline-start layout border overriding its physical borderWidth edge. Does not paint a stroke. See {@link BoxStyle}. */
+    borderStartWidth?: number;
+    /** Experimental nonnegative numeric inline-end layout border overriding its physical borderWidth edge. See {@link BoxStyle}. */
+    borderEndWidth?: number;
     /** Selects `"visible"`, `"clip"` for overflow. See {@link BoxStyle}. */
     overflow?: 'visible' | 'clip';
 }
@@ -95,6 +115,8 @@ export interface ResolvedBoxStyle {
     /** The resolved rectangle available to content after padding. See {@link LayoutBox}. */
     contentBox: LayoutBox;
 }
+/** Flex edge margin value. Auto distributes remaining space on supported finite experimental Flex axes. See {@link FlexItemStyle}. */
+export type FlexMargin = number | Percentage | 'auto';
 /**
  * Parent-layout participation: positioning, self-alignment, flex sizing, and explicit grid placement.
  *
@@ -104,12 +126,28 @@ export interface ResolvedBoxStyle {
  * @see {@link PathStyle}
  */
 export interface LayoutItemStyle extends PositioningStyle {
+    /** Positive finite outer width/height ratio consumed by finite Flex, including wrapped lines. Final per-line main size derives cross size before cross bounds; intrinsic main sizing is unsupported. A documented direct absolute Flex child may derive exactly one automatic outer axis from its declared numeric opposite axis when no opposing inset pair supplies that axis. See {@link FlexItemStyle}. */
+    aspectRatio?: number;
+    /** Uniform physical margin in logical Canvas units, a percentage of allocated Flex content width, or auto on supported finite Flex axes. Finite negatives are allowed; specific edges override this value. Consumed by experimental Flex only. See {@link LayoutItemStyle}. */
+    margin?: FlexMargin;
+    /** Physical top margin overriding margin. See {@link LayoutItemStyle}. */
+    marginTop?: FlexMargin;
+    /** Physical right margin overriding margin. See {@link LayoutItemStyle}. */
+    marginRight?: FlexMargin;
+    /** Physical bottom margin overriding margin. See {@link LayoutItemStyle}. */
+    marginBottom?: FlexMargin;
+    /** Physical left margin overriding margin. See {@link LayoutItemStyle}. */
+    marginLeft?: FlexMargin;
+    /** Inline-start margin overriding the corresponding physical edge and margin shorthand in experimental Flex. Signed percentages use allocated content width. See {@link LayoutItemStyle}. */
+    marginStart?: FlexMargin;
+    /** Inline-end margin overriding the corresponding physical edge and margin shorthand in experimental Flex. See {@link LayoutItemStyle}. */
+    marginEnd?: FlexMargin;
     /** 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;
+    /** Initial main-axis size before flex growth or shrinkage. See {@link SizingLength}. */
+    flexBasis?: SizingLength;
     /** 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}. */
@@ -128,9 +166,9 @@ export interface LayoutItemStyle extends PositioningStyle {
  *
  * @see {@link LayoutItemStyle}
  */
-export type FlexItemStyle = Pick<LayoutItemStyle, 'flexBasis' | 'flexGrow' | 'flexShrink'> & {
+export type FlexItemStyle = Pick<LayoutItemStyle, 'position' | 'left' | 'right' | 'top' | 'bottom' | 'insetStart' | 'insetEnd' | 'aspectRatio' | 'flexBasis' | 'flexGrow' | 'flexShrink' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginStart' | 'marginEnd'> & {
     /** This child's cross-axis or block-axis alignment override. See {@link FlexItemStyle}. */
-    alignSelf?: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center';
+    alignSelf?: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'start' | 'end';
 };
 /**
  * Explicit grid cell placement, spans, and alignment of a child.
@@ -221,10 +259,10 @@ export interface PathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyl
  * @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;
+    /** Horizontal extent in the units of the containing geometry or surface. See {@link SizingLength}. */
+    width: SizingLength;
+    /** Vertical extent in the units of the containing geometry or surface. See {@link SizingLength}. */
+    height: SizingLength;
     /**
      * Pixel-grid alignment policy applied to the resolved geometry. See {@link PixelGridAlignment}.
      */

package/dist/lib/surface/root-surface.js

@@ -99,11 +99,12 @@ function prepareSurface(instance) {
   return snapshot;
 }
 function readCanvasContentBox(canvas) {
-  const rect = canvas.getBoundingClientRect();
+  if (canvas.getClientRects().length === 0) return { width: 0, height: 0 };
   const style = getComputedStyle(canvas);
+  const borderBox = style.boxSizing === "border-box";
   return {
-    width: Math.max(0, rect.width - boxInsets(style, "width")),
-    height: Math.max(0, rect.height - boxInsets(style, "height"))
+    width: Math.max(0, pixelValue(style.width) - (borderBox ? boxInsets(style, "width") : 0)),
+    height: Math.max(0, pixelValue(style.height) - (borderBox ? boxInsets(style, "height") : 0))
   };
 }
 function mountDensityObservers(instance, canvas, state) {
@@ -144,7 +145,8 @@ function setDisplaySize(state, display) {
   return true;
 }
 function ownInlineSize(canvas, property, value, current) {
-  const owned = `${value}px`;
+  const style = getComputedStyle(canvas);
+  const owned = `${value + (style.boxSizing === "border-box" ? boxInsets(style, property) : 0)}px`;
   const previous = current?.previous ?? canvas.style[property];
   canvas.style[property] = owned;
   return { previous, owned };
@@ -155,8 +157,10 @@ function restoreOwnedSize(canvas, property, record) {
   }
 }
 function boxInsets(style, axis) {
-  const values = axis === "width" ? [style.borderLeftWidth, style.borderRightWidth, style.paddingLeft, style.paddingRight] : [style.borderTopWidth, style.borderBottomWidth, style.paddingTop, style.paddingBottom];
-  return values.reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+  return axis === "width" ? pixelValue(style.borderLeftWidth) + pixelValue(style.borderRightWidth) + pixelValue(style.paddingLeft) + pixelValue(style.paddingRight) : pixelValue(style.borderTopWidth) + pixelValue(style.borderBottomWidth) + pixelValue(style.paddingTop) + pixelValue(style.paddingBottom);
+}
+function pixelValue(value) {
+  return Number.parseFloat(value) || 0;
 }
 function nearlyEqual(left, right) {
   return Math.abs(left - right) < 0.01;

package/dist/lib/surface/root-surface.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/surface/root-surface.ts"],
-  "sourcesContent": ["import type { PibblInstance } from '../types.js';\nimport { update } from '../update.js';\nimport { createLayerSurface, resolveSurface } from './resolve-surface.js';\nimport type {\n  PibblConfig,\n  PibblSurfaceSnapshot,\n  LayerSurfaceState,\n  RootSurfaceState,\n  SurfaceDisplaySize,\n} from './types.js';\nimport { validateSurfaceConfig } from './resolve-surface.js';\n\nexport function createRootSurfaceState(\n  canvas: HTMLCanvasElement,\n  config?: PibblConfig,\n): RootSurfaceState {\n  const resolved = validateSurfaceConfig(canvas, config);\n  return {\n    kind: 'root',\n    config: resolved,\n    display: readCanvasContentBox(canvas),\n    pixelRatio: readRequestedPixelRatio(resolved.pixelRatio),\n    snapshot: undefined,\n    ownedWidth: undefined,\n    ownedHeight: undefined,\n  };\n}\n\nexport function createLegacyLayerSurfaceState(\n  width: number,\n  height: number,\n): LayerSurfaceState {\n  return {\n    kind: 'layer',\n    managed: false,\n    snapshot: createLayerSurface(width, height, 1, 1),\n  };\n}\n\nexport function mountRootSurface(\n  instance: PibblInstance,\n  canvas: HTMLCanvasElement,\n): void {\n  const state = instance.surface;\n  if (state.kind !== 'root') return;\n\n  if (typeof ResizeObserver !== 'function') {\n    throw new Error('Pibbl requires ResizeObserver for Canvas surface sizing.');\n  }\n\n  const resizeObserver = new ResizeObserver(() => {\n    const display = readCanvasContentBox(canvas);\n    if (setDisplaySize(state, display)) {\n      update(canvas);\n    }\n  });\n  resizeObserver.observe(canvas);\n  instance.mainTeardowns.add(() => resizeObserver.disconnect());\n\n  instance.mainTeardowns.add(() => {\n    restoreOwnedSize(canvas, 'width', state.ownedWidth);\n    restoreOwnedSize(canvas, 'height', state.ownedHeight);\n  });\n\n  if (state.config.pixelRatio === 'device') {\n    mountDensityObservers(instance, canvas, state);\n  }\n}\n\nexport function prepareSurface(\n  instance: PibblInstance,\n): PibblSurfaceSnapshot | undefined {\n  const state = instance.surface;\n  if (state.kind === 'layer') {\n    if (!state.managed) {\n      state.snapshot = createLayerSurface(\n        instance.canvas.width,\n        instance.canvas.height,\n        1,\n        1,\n      );\n    }\n    return state.snapshot;\n  }\n\n  const canvas = instance.canvas as HTMLCanvasElement;\n  state.display = readCanvasContentBox(canvas);\n  if (state.config.pixelRatio === 'device') {\n    state.pixelRatio = readRequestedPixelRatio('device');\n  }\n  let snapshot = resolveSurface(state.config, state.display, state.pixelRatio);\n  state.snapshot = snapshot;\n  if (!snapshot) return undefined;\n\n  const before = state.display;\n  const dimensionsChanged = canvas.width !== snapshot.backingWidth ||\n    canvas.height !== snapshot.backingHeight;\n  if (dimensionsChanged) {\n    canvas.width = snapshot.backingWidth;\n    canvas.height = snapshot.backingHeight;\n    const after = readCanvasContentBox(canvas);\n    if (!nearlyEqual(after.width, before.width)) {\n      state.ownedWidth = ownInlineSize(\n        canvas,\n        'width',\n        before.width,\n        state.ownedWidth,\n      );\n    }\n    if (!nearlyEqual(after.height, before.height)) {\n      state.ownedHeight = ownInlineSize(\n        canvas,\n        'height',\n        before.height,\n        state.ownedHeight,\n      );\n    }\n    const stabilized = readCanvasContentBox(canvas);\n    if (setDisplaySize(state, stabilized)) {\n      snapshot = resolveSurface(state.config, stabilized, state.pixelRatio);\n      state.snapshot = snapshot;\n      if (!snapshot) return undefined;\n      if (\n        canvas.width !== snapshot.backingWidth ||\n        canvas.height !== snapshot.backingHeight\n      ) {\n        canvas.width = snapshot.backingWidth;\n        canvas.height = snapshot.backingHeight;\n      }\n    }\n  }\n  return snapshot;\n}\n\nexport function readCanvasContentBox(\n  canvas: HTMLCanvasElement,\n): SurfaceDisplaySize {\n  const rect = canvas.getBoundingClientRect();\n  const style = getComputedStyle(canvas);\n  return {\n    width: Math.max(0, rect.width - boxInsets(style, 'width')),\n    height: Math.max(0, rect.height - boxInsets(style, 'height')),\n  };\n}\n\nfunction mountDensityObservers(\n  instance: PibblInstance,\n  canvas: HTMLCanvasElement,\n  state: RootSurfaceState,\n): void {\n  let mediaQuery: MediaQueryList | undefined;\n  let closed = false;\n  const onDensityChange = () => {\n    if (closed) return;\n    const next = readRequestedPixelRatio('device');\n    bindMediaQuery(next);\n    if (next !== state.pixelRatio) {\n      state.pixelRatio = next;\n      update(canvas);\n    }\n  };\n  const bindMediaQuery = (ratio: number) => {\n    mediaQuery?.removeEventListener('change', onDensityChange);\n    mediaQuery = matchMedia(`(resolution: ${ratio}dppx)`);\n    mediaQuery.addEventListener('change', onDensityChange);\n  };\n\n  bindMediaQuery(state.pixelRatio);\n  window.addEventListener('resize', onDensityChange);\n  instance.mainTeardowns.add(() => {\n    closed = true;\n    mediaQuery?.removeEventListener('change', onDensityChange);\n    window.removeEventListener('resize', onDensityChange);\n  });\n}\n\nfunction readRequestedPixelRatio(requested: 'device' | number): number {\n  if (requested !== 'device') return requested;\n  const ratio = window.devicePixelRatio;\n  return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;\n}\n\nfunction setDisplaySize(\n  state: RootSurfaceState,\n  display: SurfaceDisplaySize,\n): boolean {\n  if (\n    nearlyEqual(state.display.width, display.width) &&\n    nearlyEqual(state.display.height, display.height)\n  ) {\n    return false;\n  }\n  state.display = display;\n  return true;\n}\n\nfunction ownInlineSize(\n  canvas: HTMLCanvasElement,\n  property: 'width' | 'height',\n  value: number,\n  current: RootSurfaceState['ownedWidth'],\n) {\n  const owned = `${value}px`;\n  const previous = current?.previous ?? canvas.style[property];\n  canvas.style[property] = owned;\n  return { previous, owned };\n}\n\nfunction restoreOwnedSize(\n  canvas: HTMLCanvasElement,\n  property: 'width' | 'height',\n  record: RootSurfaceState['ownedWidth'],\n): void {\n  if (record && canvas.style[property] === record.owned) {\n    canvas.style[property] = record.previous;\n  }\n}\n\nfunction boxInsets(\n  style: CSSStyleDeclaration,\n  axis: 'width' | 'height',\n): number {\n  const values = axis === 'width' ?\n    [style.borderLeftWidth, style.borderRightWidth, style.paddingLeft, style.paddingRight] :\n    [style.borderTopWidth, style.borderBottomWidth, style.paddingTop, style.paddingBottom];\n  return values.reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);\n}\n\nfunction nearlyEqual(left: number, right: number): boolean {\n  return Math.abs(left - right) < 0.01;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { PibblInstance } from '../types.js';\nimport { update } from '../update.js';\nimport { createLayerSurface, resolveSurface } from './resolve-surface.js';\nimport type {\n  PibblConfig,\n  PibblSurfaceSnapshot,\n  LayerSurfaceState,\n  RootSurfaceState,\n  SurfaceDisplaySize,\n} from './types.js';\nimport { validateSurfaceConfig } from './resolve-surface.js';\n\nexport function createRootSurfaceState(\n  canvas: HTMLCanvasElement,\n  config?: PibblConfig,\n): RootSurfaceState {\n  const resolved = validateSurfaceConfig(canvas, config);\n  return {\n    kind: 'root',\n    config: resolved,\n    display: readCanvasContentBox(canvas),\n    pixelRatio: readRequestedPixelRatio(resolved.pixelRatio),\n    snapshot: undefined,\n    ownedWidth: undefined,\n    ownedHeight: undefined,\n  };\n}\n\nexport function createLegacyLayerSurfaceState(\n  width: number,\n  height: number,\n): LayerSurfaceState {\n  return {\n    kind: 'layer',\n    managed: false,\n    snapshot: createLayerSurface(width, height, 1, 1),\n  };\n}\n\nexport function mountRootSurface(\n  instance: PibblInstance,\n  canvas: HTMLCanvasElement,\n): void {\n  const state = instance.surface;\n  if (state.kind !== 'root') return;\n\n  if (typeof ResizeObserver !== 'function') {\n    throw new Error('Pibbl requires ResizeObserver for Canvas surface sizing.');\n  }\n\n  const resizeObserver = new ResizeObserver(() => {\n    const display = readCanvasContentBox(canvas);\n    if (setDisplaySize(state, display)) {\n      update(canvas);\n    }\n  });\n  resizeObserver.observe(canvas);\n  instance.mainTeardowns.add(() => resizeObserver.disconnect());\n\n  instance.mainTeardowns.add(() => {\n    restoreOwnedSize(canvas, 'width', state.ownedWidth);\n    restoreOwnedSize(canvas, 'height', state.ownedHeight);\n  });\n\n  if (state.config.pixelRatio === 'device') {\n    mountDensityObservers(instance, canvas, state);\n  }\n}\n\nexport function prepareSurface(\n  instance: PibblInstance,\n): PibblSurfaceSnapshot | undefined {\n  const state = instance.surface;\n  if (state.kind === 'layer') {\n    if (!state.managed) {\n      state.snapshot = createLayerSurface(\n        instance.canvas.width,\n        instance.canvas.height,\n        1,\n        1,\n      );\n    }\n    return state.snapshot;\n  }\n\n  const canvas = instance.canvas as HTMLCanvasElement;\n  state.display = readCanvasContentBox(canvas);\n  if (state.config.pixelRatio === 'device') {\n    state.pixelRatio = readRequestedPixelRatio('device');\n  }\n  let snapshot = resolveSurface(state.config, state.display, state.pixelRatio);\n  state.snapshot = snapshot;\n  if (!snapshot) return undefined;\n\n  const before = state.display;\n  const dimensionsChanged = canvas.width !== snapshot.backingWidth ||\n    canvas.height !== snapshot.backingHeight;\n  if (dimensionsChanged) {\n    canvas.width = snapshot.backingWidth;\n    canvas.height = snapshot.backingHeight;\n    const after = readCanvasContentBox(canvas);\n    if (!nearlyEqual(after.width, before.width)) {\n      state.ownedWidth = ownInlineSize(\n        canvas,\n        'width',\n        before.width,\n        state.ownedWidth,\n      );\n    }\n    if (!nearlyEqual(after.height, before.height)) {\n      state.ownedHeight = ownInlineSize(\n        canvas,\n        'height',\n        before.height,\n        state.ownedHeight,\n      );\n    }\n    const stabilized = readCanvasContentBox(canvas);\n    if (setDisplaySize(state, stabilized)) {\n      snapshot = resolveSurface(state.config, stabilized, state.pixelRatio);\n      state.snapshot = snapshot;\n      if (!snapshot) return undefined;\n      if (\n        canvas.width !== snapshot.backingWidth ||\n        canvas.height !== snapshot.backingHeight\n      ) {\n        canvas.width = snapshot.backingWidth;\n        canvas.height = snapshot.backingHeight;\n      }\n    }\n  }\n  return snapshot;\n}\n\nexport function readCanvasContentBox(\n  canvas: HTMLCanvasElement,\n): SurfaceDisplaySize {\n  // A shared page transform changes the screen bounding rectangle, not the\n  // Canvas CSS content box. Resolved CSS sizes retain local fractional lengths.\n  // Hidden ancestors have no layout box even when computed width remains set.\n  if (canvas.getClientRects().length === 0) return { width: 0, height: 0 };\n  const style = getComputedStyle(canvas);\n  const borderBox = style.boxSizing === 'border-box';\n  return {\n    width: Math.max(0, pixelValue(style.width) - (borderBox ? boxInsets(style, 'width') : 0)),\n    height: Math.max(0, pixelValue(style.height) - (borderBox ? boxInsets(style, 'height') : 0)),\n  };\n}\n\nfunction mountDensityObservers(\n  instance: PibblInstance,\n  canvas: HTMLCanvasElement,\n  state: RootSurfaceState,\n): void {\n  let mediaQuery: MediaQueryList | undefined;\n  let closed = false;\n  const onDensityChange = () => {\n    if (closed) return;\n    const next = readRequestedPixelRatio('device');\n    bindMediaQuery(next);\n    if (next !== state.pixelRatio) {\n      state.pixelRatio = next;\n      update(canvas);\n    }\n  };\n  const bindMediaQuery = (ratio: number) => {\n    mediaQuery?.removeEventListener('change', onDensityChange);\n    mediaQuery = matchMedia(`(resolution: ${ratio}dppx)`);\n    mediaQuery.addEventListener('change', onDensityChange);\n  };\n\n  bindMediaQuery(state.pixelRatio);\n  window.addEventListener('resize', onDensityChange);\n  instance.mainTeardowns.add(() => {\n    closed = true;\n    mediaQuery?.removeEventListener('change', onDensityChange);\n    window.removeEventListener('resize', onDensityChange);\n  });\n}\n\nfunction readRequestedPixelRatio(requested: 'device' | number): number {\n  if (requested !== 'device') return requested;\n  const ratio = window.devicePixelRatio;\n  return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;\n}\n\nfunction setDisplaySize(\n  state: RootSurfaceState,\n  display: SurfaceDisplaySize,\n): boolean {\n  if (\n    nearlyEqual(state.display.width, display.width) &&\n    nearlyEqual(state.display.height, display.height)\n  ) {\n    return false;\n  }\n  state.display = display;\n  return true;\n}\n\nfunction ownInlineSize(\n  canvas: HTMLCanvasElement,\n  property: 'width' | 'height',\n  value: number,\n  current: RootSurfaceState['ownedWidth'],\n) {\n  const style = getComputedStyle(canvas);\n  const owned = `${value + (style.boxSizing === 'border-box' ? boxInsets(style, property) : 0)}px`;\n  const previous = current?.previous ?? canvas.style[property];\n  canvas.style[property] = owned;\n  return { previous, owned };\n}\n\nfunction restoreOwnedSize(\n  canvas: HTMLCanvasElement,\n  property: 'width' | 'height',\n  record: RootSurfaceState['ownedWidth'],\n): void {\n  if (record && canvas.style[property] === record.owned) {\n    canvas.style[property] = record.previous;\n  }\n}\n\nfunction boxInsets(\n  style: CSSStyleDeclaration,\n  axis: 'width' | 'height',\n): number {\n  return axis === 'width'\n    ? pixelValue(style.borderLeftWidth) + pixelValue(style.borderRightWidth) + pixelValue(style.paddingLeft) + pixelValue(style.paddingRight)\n    : pixelValue(style.borderTopWidth) + pixelValue(style.borderBottomWidth) + pixelValue(style.paddingTop) + pixelValue(style.paddingBottom);\n}\n\nfunction pixelValue(value: string): number {\n  return Number.parseFloat(value) || 0;\n}\n\nfunction nearlyEqual(left: number, right: number): boolean {\n  return Math.abs(left - right) < 0.01;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/lib/textures/texture.js

@@ -9,6 +9,13 @@ import { signal } from "../signals/graph.js";
 import {
   registerTexturePaint
 } from "./texture-protocol.js";
+const placementKeys = [
+  "tileWidth",
+  "tileHeight",
+  "offsetX",
+  "offsetY",
+  "rotation"
+];
 const recipes = /* @__PURE__ */ new WeakMap();
 function defineTexture(definition) {
   const stable = Object.freeze({ ...definition });
@@ -24,13 +31,8 @@ function defineTexture(definition) {
 function placement(value = {}) {
   if (value.mode !== void 0 && value.mode !== "repeat" && value.mode !== "stretch")
     throw new TypeError("Unknown texture placement mode.");
-  for (const key of [
-    "tileWidth",
-    "tileHeight",
-    "offsetX",
-    "offsetY",
-    "rotation"
-  ]) {
+  for (let keyIndex = 0; keyIndex < placementKeys.length; keyIndex++) {
+    const key = placementKeys[keyIndex];
     const n = value[key];
     if (n !== void 0 && (!Number.isFinite(n) || (key === "tileWidth" || key === "tileHeight") && n <= 0))
       throw new RangeError(`Invalid texture placement ${key}.`);
@@ -39,7 +41,7 @@ function placement(value = {}) {
 }
 function dimensions(options) {
   const width = options.resolution?.width ?? 256, height = options.resolution?.height ?? 160;
-  if (![width, height].every((n) => Number.isInteger(n) && n >= 8 && n <= 1024) || width * height > 262144)
+  if (!(Number.isInteger(width) && width >= 8 && width <= 1024 && Number.isInteger(height) && height >= 8 && height <= 1024) || width * height > 262144)
     throw new RangeError(
       "Texture resolution must be 8..1024 cells per axis, at most 262144 cells."
     );