@craft-ts/style 0.7.0-beta.15

package/src/lib/axes/types.js

@@ -0,0 +1,21 @@
+/**
+ * What an axis is made of.
+ *
+ * An axis is a **closed** set of points, shipped by the library or built by
+ * `defineBreakpoints` / `defineAxis` / `defineStateAxis` / `defineContainer`.
+ * Never a string: `scrollState.stuck.blockEnd`, not
+ * `scrollState.stuck('block-end')`. A key that does not exist is a compile
+ * error, not CSS the browser ignores.
+ *
+ * Every point carries its **driver**. An axis without one would be worse than a
+ * missing axis: the matrix would enumerate scenarios nothing can reach and
+ * render identical captures, which is false coverage rather than no coverage.
+ */
+export const axisPoint = (axis, name, open, driver, extra = {}) => ({
+    axis,
+    point: name,
+    open,
+    driver,
+    ...extra,
+});
+//# sourceMappingURL=types.js.map

package/src/lib/axes/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AA6DH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAU,EACV,IAAW,EACX,IAAY,EACZ,MAAc,EACd,QAA2E,EAAE,EACrD,EAAE,CAAC,CAAC;IAC5B,IAAI;IACJ,KAAK,EAAE,IAAI;IACX,IAAI;IACJ,MAAM;IACN,GAAG,KAAK;CACT,CAAC,CAAC","sourcesContent":["/**\n * What an axis is made of.\n *\n * An axis is a **closed** set of points, shipped by the library or built by\n * `defineBreakpoints` / `defineAxis` / `defineStateAxis` / `defineContainer`.\n * Never a string: `scrollState.stuck.blockEnd`, not\n * `scrollState.stuck('block-end')`. A key that does not exist is a compile\n * error, not CSS the browser ignores.\n *\n * Every point carries its **driver**. An axis without one would be worse than a\n * missing axis: the matrix would enumerate scenarios nothing can reach and\n * render identical captures, which is false coverage rather than no coverage.\n */\n\n/** How a test reaches a point. There is no `'none'`: every point is reachable. */\nexport type Driver =\n  | {\n      readonly kind: 'emulateMedia';\n      readonly feature:\n        | 'prefers-color-scheme'\n        | 'prefers-reduced-motion'\n        | 'forced-colors'\n        | 'prefers-contrast';\n      readonly value: string;\n    }\n  | { readonly kind: 'resize'; readonly minInlineSize: string }\n  | {\n      readonly kind: 'resizeContainer';\n      readonly container: string;\n      readonly minInlineSize: string;\n    }\n  | {\n      readonly kind: 'setAttribute';\n      readonly name: string;\n      readonly value: string;\n    }\n  | { readonly kind: 'scroll'; readonly to: 'start' | 'end' | 'snap' }\n  | {\n      readonly kind: 'descendantState';\n      readonly state: 'user-invalid' | 'focus-visible' | 'checked';\n    };\n\nexport interface AxisPoint<Axis extends string, Point extends string> {\n  readonly axis: Axis;\n  readonly point: Point;\n  /** The at-rule or selector fragment the emitter wraps around the rule. */\n  readonly open: string;\n  readonly driver: Driver;\n  /**\n   * Ordered axes only — viewport and container. Two points of the same axis\n   * with an order can be compared, which is what makes a dead rule detectable\n   * and what lets the matrix reduce by interval instead of by product.\n   */\n  readonly order?: number;\n  /**\n   * Set when the point is a lower bound (`above`) or an upper bound (`below`).\n   * A plain breakpoint is a lower bound.\n   */\n  readonly bound?: 'above' | 'below';\n  /**\n   * The container this point queries, when it is not the viewport. A container\n   * axis does not propagate above the element that resolves it.\n   */\n  readonly container?: string;\n  /**\n   * Custom properties this axis is allowed to write, by kind syntax. Empty\n   * means unconstrained. See `defineAxis(..., { writes })`.\n   */\n  readonly writes?: readonly string[];\n}\n\nexport type AnyAxisPoint = AxisPoint<string, string>;\n\nexport const axisPoint = <Axis extends string, Point extends string>(\n  axis: Axis,\n  name: Point,\n  open: string,\n  driver: Driver,\n  extra: Omit<Partial<AnyAxisPoint>, 'axis' | 'point' | 'open' | 'driver'> = {},\n): AxisPoint<Axis, Point> => ({\n  axis,\n  point: name,\n  open,\n  driver,\n  ...extra,\n});\n"]}

package/src/lib/css-vars.d.ts

@@ -0,0 +1,100 @@
+/**
+ * CSS custom properties, typed by the `@property` grammar.
+ *
+ * Static → a class at build time. Dynamic → a typed custom property. No class
+ * is ever computed at runtime: a value that depends on a signal goes through
+ * `assign(v.x, …)`, never through a concatenated class string. That split is
+ * what keeps the visual matrix finite — a variable is not an axis.
+ */
+import type { AnyKind, CssVarRole, CssVarSpec, ValueOf } from './kinds.ts';
+export interface CssVarDeclaration {
+    readonly name: `--${string}`;
+    readonly syntax: string;
+    readonly inherits: boolean;
+    readonly initialValue: string;
+    readonly role: CssVarRole;
+}
+declare const VAR_VALUE: unique symbol;
+declare const VAR_SYNTAX: unique symbol;
+export declare const VAR_WRITE: unique symbol;
+/**
+ * A declaration that writes a custom property, carrying the kind it writes.
+ *
+ * The syntax rides on the type so that an axis constrained to `<color>` can be
+ * checked at the call site of `when`, instead of by reading the emitted CSS
+ * afterwards and hoping.
+ */
+export type VarWrite<Syntax extends string = string> = {
+    readonly property: string;
+    readonly value: string;
+    readonly unproven: string;
+    /**
+     * **Required**, not optional. An optional marker brands nothing: a plain
+     * declaration would satisfy `VarWrite<'<color>'>` structurally, and an axis
+     * constrained to colours would accept `p(space(6))` while looking correct.
+     * The same trap as an optional phantom on a primitive base, one level up.
+     */
+    readonly [VAR_WRITE]: Syntax;
+};
+/**
+ * A variable token **carries its kind's brand**: the token of a `<color>`
+ * variable is a `ColorValue`, so `color(v.ink)` needs no conversion and
+ * `p(v.ink)` does not compile. It is not a generic bag of strings.
+ */
+export type CssVarToken<Value, Syntax extends string = string> = Value & {
+    readonly declaration: CssVarDeclaration;
+    /** Inference site for `assign`; nothing reads it at runtime. */
+    readonly [VAR_VALUE]?: Value;
+    /** Inference site for the axis write constraint. */
+    readonly [VAR_SYNTAX]?: Syntax;
+    /** The fallback is typed against the same kind: `.or(space(4))` will not compile. */
+    or(fallback: Value): Value;
+};
+export type AnySpec = CssVarSpec<string, any>;
+export type CssVarTokens<Specs extends Readonly<Record<string, AnySpec>>> = {
+    readonly [Key in keyof Specs]: CssVarToken<Specs[Key]['initial'], Specs[Key]['syntax']>;
+};
+/** Every custom property declared so far — the emitter's `@property` input. */
+export declare const registeredVars: () => readonly CssVarDeclaration[];
+/** Test-only: the registry is module state, and a spec must be able to reset it. */
+export declare const resetCssVarRegistry: () => void;
+/**
+ * The name `--{prefix}-{key}` is **derived**, never retyped — which is what
+ * makes a mismatch between the declared name and the read name impossible.
+ *
+ * Two sheets sharing a prefix is an error rather than a merge: silently
+ * merging would let one component's `--card-bg` be redefined by another's,
+ * which is exactly the class of bug this package exists to remove.
+ */
+export declare function cssVars<const Specs extends Readonly<Record<string, AnySpec>>>(prefix: string, specs: Specs): CssVarTokens<Specs>;
+/** The `@property` block for one declaration, for the emitter. */
+export declare const propertyRule: (declaration: CssVarDeclaration) => string;
+/**
+ * Writes a variable **statically**, as part of a sheet.
+ *
+ * This is how an axis paints: `when(tone.danger, [set(v.bg, palette.accent.danger)])`
+ * emits one atomic rule that assigns the custom property, and the base rule
+ * that reads it never changes. The alternative — a class per tone per property —
+ * multiplies the atoms by the number of tones for no gain.
+ */
+export declare function set<Value, Syntax extends string>(token: {
+    readonly [VAR_VALUE]?: Value;
+    readonly [VAR_SYNTAX]?: Syntax;
+    readonly declaration: CssVarDeclaration;
+}, value: Value & {
+    readonly css: string;
+    readonly unproven?: string;
+}): VarWrite<Syntax>;
+/**
+ * The single gateway to the dynamic side. Returns an inline style object, to be
+ * bound to `style:` — readable by the existing renderer with no change, and
+ * invisible to the visual matrix, because a variable is not an axis.
+ */
+export declare function assign<Value>(token: {
+    readonly [VAR_VALUE]?: Value;
+    readonly declaration: CssVarDeclaration;
+}, value: Value & {
+    readonly css: string;
+}): Readonly<Record<`--${string}`, string>>;
+export type { CssVarRole, ValueOf, AnyKind };
+//# sourceMappingURL=css-vars.d.ts.map

package/src/lib/css-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["../../../../../libs/style/src/lib/css-vars.ts"],"names":[],"mappings":"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"}

package/src/lib/css-vars.js

@@ -0,0 +1,96 @@
+/**
+ * Units a registered `initial-value` may not use.
+ *
+ * `@property` requires the initial value to be **computationally independent**:
+ * it must not depend on the font size or the viewport. `initial-value: 1rem`
+ * therefore makes the whole `@property` rule invalid, and the browser drops it
+ * *silently* — the variable stops being registered, `var(--x)` resolves to
+ * nothing, and the declaration that reads it computes to zero. Every test stays
+ * green because nothing threw.
+ *
+ * Found the hard way on the design-system demo: the colours were registered and
+ * the lengths were not, and the only symptom was buttons with no padding.
+ */
+const RELATIVE_UNIT = /\d\s*(r?em|ex|ch|cap|ic|r?lh|[sld]?v(w|h|i|b|min|max))\b/i;
+const declared = new Map();
+const prefixes = new Set();
+/** Every custom property declared so far — the emitter's `@property` input. */
+export const registeredVars = () => [
+    ...declared.values(),
+];
+/** Test-only: the registry is module state, and a spec must be able to reset it. */
+export const resetCssVarRegistry = () => {
+    declared.clear();
+    prefixes.clear();
+};
+/**
+ * The name `--{prefix}-{key}` is **derived**, never retyped — which is what
+ * makes a mismatch between the declared name and the read name impossible.
+ *
+ * Two sheets sharing a prefix is an error rather than a merge: silently
+ * merging would let one component's `--card-bg` be redefined by another's,
+ * which is exactly the class of bug this package exists to remove.
+ */
+export function cssVars(prefix, specs) {
+    if (prefixes.has(prefix)) {
+        throw new Error(`cssVars: prefix '${prefix}' is already declared. Two sheets sharing a prefix would redefine each other's variables; pick a prefix per sheet.`);
+    }
+    prefixes.add(prefix);
+    const tokens = Object.entries(specs).map(([key, spec]) => {
+        const name = `--${prefix}-${key}`;
+        const initialValue = String(spec.initial.css ?? spec.initial);
+        if (spec.syntax.includes('length') && RELATIVE_UNIT.test(initialValue)) {
+            throw new Error(`cssVars: '${name}' registers a <length> with the initial value '${initialValue}', which is not computationally independent. @property refuses relative units there, and the browser drops the whole registration without a word — the variable then resolves to nothing wherever it is read. Give the initial value an absolute unit (unit.px(...)) and keep the relative one for what writes the variable.`);
+        }
+        const declaration = {
+            name,
+            syntax: spec.syntax,
+            inherits: spec.inherits,
+            initialValue,
+            role: spec.role,
+        };
+        declared.set(name, declaration);
+        const token = {
+            ...spec.initial,
+            css: `var(${name})`,
+            declaration,
+            or: (fallback) => ({
+                ...spec.initial,
+                css: `var(${name}, ${fallback.css})`,
+            }),
+        };
+        return [key, token];
+    });
+    return Object.fromEntries(tokens);
+}
+/** The `@property` block for one declaration, for the emitter. */
+export const propertyRule = (declaration) => `@property ${declaration.name} { syntax: "${declaration.syntax}"; inherits: ${declaration.inherits}; initial-value: ${declaration.initialValue}; }`;
+/**
+ * Writes a variable **statically**, as part of a sheet.
+ *
+ * This is how an axis paints: `when(tone.danger, [set(v.bg, palette.accent.danger)])`
+ * emits one atomic rule that assigns the custom property, and the base rule
+ * that reads it never changes. The alternative — a class per tone per property —
+ * multiplies the atoms by the number of tones for no gain.
+ */
+export function set(token, value) {
+    // The marker is a declared symbol: nothing is written at runtime, and the
+    // object stays an ordinary declaration the sheet walker already understands.
+    return {
+        property: token.declaration.name,
+        value: value.css,
+        unproven: value.unproven ?? '',
+    };
+}
+/**
+ * The single gateway to the dynamic side. Returns an inline style object, to be
+ * bound to `style:` — readable by the existing renderer with no change, and
+ * invisible to the visual matrix, because a variable is not an axis.
+ */
+export function assign(token, value) {
+    // The key type is narrow on purpose: the renderer's `style:` binding accepts
+    // a record of custom properties, and a plain `Record<string, string>` would
+    // widen into "any CSS property", which is not what this returns.
+    return { [token.declaration.name]: value.css };
+}
+//# sourceMappingURL=css-vars.js.map

package/src/lib/css-vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.js","sourceRoot":"","sources":["../../../../../libs/style/src/lib/css-vars.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * CSS custom properties, typed by the `@property` grammar.\n *\n * Static → a class at build time. Dynamic → a typed custom property. No class\n * is ever computed at runtime: a value that depends on a signal goes through\n * `assign(v.x, …)`, never through a concatenated class string. That split is\n * what keeps the visual matrix finite — a variable is not an axis.\n */\nimport type { AnyKind, CssVarRole, CssVarSpec, ValueOf } from './kinds.ts';\n\nexport interface CssVarDeclaration {\n  readonly name: `--${string}`;\n  readonly syntax: string;\n  readonly inherits: boolean;\n  readonly initialValue: string;\n  readonly role: CssVarRole;\n}\n\ndeclare const VAR_VALUE: unique symbol;\ndeclare const VAR_SYNTAX: unique symbol;\nexport declare const VAR_WRITE: unique symbol;\n\n/**\n * A declaration that writes a custom property, carrying the kind it writes.\n *\n * The syntax rides on the type so that an axis constrained to `<color>` can be\n * checked at the call site of `when`, instead of by reading the emitted CSS\n * afterwards and hoping.\n */\nexport type VarWrite<Syntax extends string = string> = {\n  readonly property: string;\n  readonly value: string;\n  readonly unproven: string;\n  /**\n   * **Required**, not optional. An optional marker brands nothing: a plain\n   * declaration would satisfy `VarWrite<'<color>'>` structurally, and an axis\n   * constrained to colours would accept `p(space(6))` while looking correct.\n   * The same trap as an optional phantom on a primitive base, one level up.\n   */\n  readonly [VAR_WRITE]: Syntax;\n};\n\n/**\n * A variable token **carries its kind's brand**: the token of a `<color>`\n * variable is a `ColorValue`, so `color(v.ink)` needs no conversion and\n * `p(v.ink)` does not compile. It is not a generic bag of strings.\n */\nexport type CssVarToken<Value, Syntax extends string = string> = Value & {\n  readonly declaration: CssVarDeclaration;\n  /** Inference site for `assign`; nothing reads it at runtime. */\n  readonly [VAR_VALUE]?: Value;\n  /** Inference site for the axis write constraint. */\n  readonly [VAR_SYNTAX]?: Syntax;\n  /** The fallback is typed against the same kind: `.or(space(4))` will not compile. */\n  or(fallback: Value): Value;\n};\n\nexport type AnySpec = CssVarSpec<string, any>;\n\nexport type CssVarTokens<Specs extends Readonly<Record<string, AnySpec>>> = {\n  readonly [Key in keyof Specs]: CssVarToken<\n    Specs[Key]['initial'],\n    Specs[Key]['syntax']\n  >;\n};\n\n/**\n * Units a registered `initial-value` may not use.\n *\n * `@property` requires the initial value to be **computationally independent**:\n * it must not depend on the font size or the viewport. `initial-value: 1rem`\n * therefore makes the whole `@property` rule invalid, and the browser drops it\n * *silently* — the variable stops being registered, `var(--x)` resolves to\n * nothing, and the declaration that reads it computes to zero. Every test stays\n * green because nothing threw.\n *\n * Found the hard way on the design-system demo: the colours were registered and\n * the lengths were not, and the only symptom was buttons with no padding.\n */\nconst RELATIVE_UNIT =\n  /\\d\\s*(r?em|ex|ch|cap|ic|r?lh|[sld]?v(w|h|i|b|min|max))\\b/i;\n\nconst declared = new Map<string, CssVarDeclaration>();\nconst prefixes = new Set<string>();\n\n/** Every custom property declared so far — the emitter's `@property` input. */\nexport const registeredVars = (): readonly CssVarDeclaration[] => [\n  ...declared.values(),\n];\n\n/** Test-only: the registry is module state, and a spec must be able to reset it. */\nexport const resetCssVarRegistry = (): void => {\n  declared.clear();\n  prefixes.clear();\n};\n\n/**\n * The name `--{prefix}-{key}` is **derived**, never retyped — which is what\n * makes a mismatch between the declared name and the read name impossible.\n *\n * Two sheets sharing a prefix is an error rather than a merge: silently\n * merging would let one component's `--card-bg` be redefined by another's,\n * which is exactly the class of bug this package exists to remove.\n */\nexport function cssVars<const Specs extends Readonly<Record<string, AnySpec>>>(\n  prefix: string,\n  specs: Specs,\n): CssVarTokens<Specs> {\n  if (prefixes.has(prefix)) {\n    throw new Error(\n      `cssVars: prefix '${prefix}' is already declared. Two sheets sharing a prefix would redefine each other's variables; pick a prefix per sheet.`,\n    );\n  }\n  prefixes.add(prefix);\n\n  const tokens = Object.entries(specs).map(([key, spec]) => {\n    const name = `--${prefix}-${key}` as `--${string}`;\n    const initialValue = String(\n      (spec.initial as { readonly css?: unknown }).css ?? spec.initial,\n    );\n    if (spec.syntax.includes('length') && RELATIVE_UNIT.test(initialValue)) {\n      throw new Error(\n        `cssVars: '${name}' registers a <length> with the initial value '${initialValue}', which is not computationally independent. @property refuses relative units there, and the browser drops the whole registration without a word — the variable then resolves to nothing wherever it is read. Give the initial value an absolute unit (unit.px(...)) and keep the relative one for what writes the variable.`,\n      );\n    }\n    const declaration: CssVarDeclaration = {\n      name,\n      syntax: spec.syntax,\n      inherits: spec.inherits,\n      initialValue,\n      role: spec.role,\n    };\n    declared.set(name, declaration);\n\n    const token = {\n      ...(spec.initial as object),\n      css: `var(${name})`,\n      declaration,\n      or: (fallback: { readonly css: string }) => ({\n        ...(spec.initial as object),\n        css: `var(${name}, ${fallback.css})`,\n      }),\n    };\n    return [key, token] as const;\n  });\n\n  return Object.fromEntries(tokens) as unknown as CssVarTokens<Specs>;\n}\n\n/** The `@property` block for one declaration, for the emitter. */\nexport const propertyRule = (declaration: CssVarDeclaration): string =>\n  `@property ${declaration.name} { syntax: \"${declaration.syntax}\"; inherits: ${declaration.inherits}; initial-value: ${declaration.initialValue}; }`;\n\n/**\n * Writes a variable **statically**, as part of a sheet.\n *\n * This is how an axis paints: `when(tone.danger, [set(v.bg, palette.accent.danger)])`\n * emits one atomic rule that assigns the custom property, and the base rule\n * that reads it never changes. The alternative — a class per tone per property —\n * multiplies the atoms by the number of tones for no gain.\n */\nexport function set<Value, Syntax extends string>(\n  token: {\n    readonly [VAR_VALUE]?: Value;\n    readonly [VAR_SYNTAX]?: Syntax;\n    readonly declaration: CssVarDeclaration;\n  },\n  value: Value & { readonly css: string; readonly unproven?: string },\n): VarWrite<Syntax> {\n  // The marker is a declared symbol: nothing is written at runtime, and the\n  // object stays an ordinary declaration the sheet walker already understands.\n  return {\n    property: token.declaration.name,\n    value: value.css,\n    unproven: value.unproven ?? '',\n  } as unknown as VarWrite<Syntax>;\n}\n\n/**\n * The single gateway to the dynamic side. Returns an inline style object, to be\n * bound to `style:` — readable by the existing renderer with no change, and\n * invisible to the visual matrix, because a variable is not an axis.\n */\nexport function assign<Value>(\n  token: {\n    readonly [VAR_VALUE]?: Value;\n    readonly declaration: CssVarDeclaration;\n  },\n  value: Value & { readonly css: string },\n): Readonly<Record<`--${string}`, string>> {\n  // The key type is narrow on purpose: the renderer's `style:` binding accepts\n  // a record of custom properties, and a plain `Record<string, string>` would\n  // widen into \"any CSS property\", which is not what this returns.\n  return { [token.declaration.name]: value.css };\n}\n\nexport type { CssVarRole, ValueOf, AnyKind };\n"]}

package/src/lib/kinds.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Custom-property kinds, modelled after the `@property` grammar itself.
+ *
+ * A kind is not an invention: it is exactly what CSS knows how to register
+ * (`<color>`, `<length>`, `<length-percentage>`, `+`, `#`, `|`). Inventing a
+ * kind `@property` does not know would break the runtime half of the
+ * guarantee — the browser would stop validating the value, and a variable
+ * assigned a length where a colour was expected would simply paint nothing.
+ *
+ * A kind is **callable**: `kind.color(palette.text.strong)` builds the spec
+ * `cssVars` wants, while `kind.color` on its own is the grammar that `many`,
+ * `csv` and the axis `writes` constraint operate on. One name for one concept,
+ * used in both positions.
+ *
+ * The assignability lattice is **not** a second table kept in sync with the
+ * brands. It reads the brands: an integer carries the number brand, so
+ * `<integer>` flows into `<number>`; `<length-percentage>` is a union, so
+ * `<length>` flows into it and not the other way round. A table would be one
+ * more thing that can silently disagree with reality.
+ */
+import type { AngleValue, ColorRole, ColorValue, CssStringValue, IdentValue, IntegerValue, LengthPercentageValue, LengthValue, NumberValue, PercentValue, TimeValue, UrlValue } from './tokens/units.ts';
+export type CssVarRole = ColorRole;
+export interface CssVarOptions {
+    readonly role?: CssVarRole;
+    /**
+     * `false` by default: it bounds invalidation when the variable is rewritten
+     * at runtime instead of making the whole subtree recompute.
+     */
+    readonly inherits?: boolean;
+}
+export interface CssVarSpec<Syntax extends string, Value> {
+    readonly syntax: Syntax;
+    readonly initial: Value;
+    readonly role: CssVarRole;
+    readonly inherits: boolean;
+}
+export interface CssVarKind<Syntax extends string, Value> {
+    (initial: Value, options?: CssVarOptions): CssVarSpec<Syntax, Value>;
+    readonly syntax: Syntax;
+    /** Type-only inference site; nothing reads it at runtime. */
+    readonly __value?: Value;
+}
+export declare const kind: {
+    readonly color: CssVarKind<"<color>", ColorValue>;
+    readonly length: CssVarKind<"<length>", LengthValue>;
+    readonly percentage: CssVarKind<"<percentage>", PercentValue>;
+    readonly lengthPercentage: CssVarKind<"<length-percentage>", LengthPercentageValue>;
+    readonly number: CssVarKind<"<number>", NumberValue>;
+    readonly integer: CssVarKind<"<integer>", IntegerValue>;
+    readonly angle: CssVarKind<"<angle>", AngleValue>;
+    readonly time: CssVarKind<"<time>", TimeValue>;
+    readonly ident: CssVarKind<"<custom-ident>", IdentValue>;
+    readonly string: CssVarKind<"<string>", CssStringValue>;
+    readonly url: CssVarKind<"<url>", UrlValue>;
+};
+export type AnyKind = CssVarKind<string, any>;
+export type ValueOf<Kind> = Kind extends CssVarKind<string, infer Value> ? Value : never;
+export type SyntaxOf<Kind> = Kind extends CssVarKind<infer Syntax, any> ? Syntax : never;
+/**
+ * `<a>+` — a space-separated list of at least one.
+ *
+ * The value type is a non-empty tuple rather than an array so that `many(kind.length)`
+ * cannot be satisfied by `[]`, which registers as an invalid value at runtime.
+ */
+export declare const many: <Kind extends AnyKind>(of: Kind) => CssVarKind<`${SyntaxOf<Kind>}+`, readonly [ValueOf<Kind>, ...ValueOf<Kind>[]]>;
+/** `<a>#` — a comma-separated list of at least one. */
+export declare const csv: <Kind extends AnyKind>(of: Kind) => CssVarKind<`${SyntaxOf<Kind>}#`, readonly [ValueOf<Kind>, ...ValueOf<Kind>[]]>;
+/**
+ * `a | b | c` — a closed keyword set, registered as such.
+ *
+ * The keywords are the *values*: `oneOf('auto', 'none')` accepts `'auto'` and
+ * nothing else. This is the one place a string literal is a legitimate value,
+ * because the grammar itself is a set of literals and the union is closed.
+ */
+export declare const oneOf: <const Keywords extends readonly [string, ...string[]]>(...keywords: Keywords) => CssVarKind<string, Keywords[number]>;
+/**
+ * Can a value of kind `From` be written into a variable of kind `To`?
+ *
+ * Read off the brands, so it cannot drift from what the values actually are.
+ */
+export type Assignable<From extends AnyKind, To extends AnyKind> = [
+    ValueOf<From>
+] extends [ValueOf<To>] ? true : false;
+//# sourceMappingURL=kinds.d.ts.map

package/src/lib/kinds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kinds.d.ts","sourceRoot":"","sources":["../../../../../libs/style/src/lib/kinds.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK;IACtD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK;IACtD,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACrE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;CAC1B;AAmBD,eAAO,MAAM,IAAI;;;;;;;;;;;;CAcP,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE9C,MAAM,MAAM,OAAO,CAAC,IAAI,IACtB,IAAI,SAAS,UAAU,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,QAAQ,CAAC,IAAI,IACvB,IAAI,SAAS,UAAU,CAAC,MAAM,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9D;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,IAAI,SAAS,OAAO,EACvC,IAAI,IAAI,KACP,UAAU,CACX,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EACpB,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CACT,CAAC;AAEtC,uDAAuD;AACvD,eAAO,MAAM,GAAG,GAAI,IAAI,SAAS,OAAO,EACtC,IAAI,IAAI,KACP,UAAU,CACX,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EACpB,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CACT,CAAC;AAEtC;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,GAAI,KAAK,CAAC,QAAQ,SAAS,SAAS,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,EACzE,GAAG,UAAU,QAAQ,KACpB,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAiC,CAAC;AAExE;;;;GAIG;AACH,MAAM,MAAM,UAAU,CAAC,IAAI,SAAS,OAAO,EAAE,EAAE,SAAS,OAAO,IAAI;IACjE,OAAO,CAAC,IAAI,CAAC;CACd,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,GACnB,IAAI,GACJ,KAAK,CAAC"}

package/src/lib/kinds.js

@@ -0,0 +1,44 @@
+const roleOf = (initial) => {
+    const role = initial?.role;
+    return role ?? 'none';
+};
+function kindOf(syntax) {
+    const build = (initial, options) => ({
+        syntax,
+        initial,
+        role: options?.role ?? roleOf(initial),
+        inherits: options?.inherits ?? false,
+    });
+    return Object.assign(build, { syntax });
+}
+export const kind = {
+    color: kindOf('<color>'),
+    length: kindOf('<length>'),
+    percentage: kindOf('<percentage>'),
+    lengthPercentage: kindOf('<length-percentage>'),
+    number: kindOf('<number>'),
+    integer: kindOf('<integer>'),
+    angle: kindOf('<angle>'),
+    time: kindOf('<time>'),
+    ident: kindOf('<custom-ident>'),
+    string: kindOf('<string>'),
+    url: kindOf('<url>'),
+};
+/**
+ * `<a>+` — a space-separated list of at least one.
+ *
+ * The value type is a non-empty tuple rather than an array so that `many(kind.length)`
+ * cannot be satisfied by `[]`, which registers as an invalid value at runtime.
+ */
+export const many = (of) => kindOf(`${of.syntax}+`);
+/** `<a>#` — a comma-separated list of at least one. */
+export const csv = (of) => kindOf(`${of.syntax}#`);
+/**
+ * `a | b | c` — a closed keyword set, registered as such.
+ *
+ * The keywords are the *values*: `oneOf('auto', 'none')` accepts `'auto'` and
+ * nothing else. This is the one place a string literal is a legitimate value,
+ * because the grammar itself is a set of literals and the union is closed.
+ */
+export const oneOf = (...keywords) => kindOf(keywords.join(' | '));
+//# sourceMappingURL=kinds.js.map

package/src/lib/kinds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kinds.js","sourceRoot":"","sources":["../../../../../libs/style/src/lib/kinds.ts"],"names":[],"mappings":"AA4DA,MAAM,MAAM,GAAG,CAAC,OAAgB,EAAc,EAAE;IAC9C,MAAM,IAAI,GAAI,OAAiD,EAAE,IAAI,CAAC;IACtE,OAAO,IAAI,IAAI,MAAM,CAAC;AACxB,CAAC,CAAC;AAEF,SAAS,MAAM,CACb,MAAc;IAEd,MAAM,KAAK,GAAG,CAAC,OAAc,EAAE,OAAuB,EAAE,EAAE,CAAC,CAAC;QAC1D,MAAM;QACN,OAAO;QACP,IAAI,EAAE,OAAO,EAAE,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QACtC,QAAQ,EAAE,OAAO,EAAE,QAAQ,IAAI,KAAK;KACrC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAA8B,CAAC;AACvE,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE,MAAM,CAAwB,SAAS,CAAC;IAC/C,MAAM,EAAE,MAAM,CAA0B,UAAU,CAAC;IACnD,UAAU,EAAE,MAAM,CAA+B,cAAc,CAAC;IAChE,gBAAgB,EAAE,MAAM,CACtB,qBAAqB,CACtB;IACD,MAAM,EAAE,MAAM,CAA0B,UAAU,CAAC;IACnD,OAAO,EAAE,MAAM,CAA4B,WAAW,CAAC;IACvD,KAAK,EAAE,MAAM,CAAwB,SAAS,CAAC;IAC/C,IAAI,EAAE,MAAM,CAAsB,QAAQ,CAAC;IAC3C,KAAK,EAAE,MAAM,CAA+B,gBAAgB,CAAC;IAC7D,MAAM,EAAE,MAAM,CAA6B,UAAU,CAAC;IACtD,GAAG,EAAE,MAAM,CAAoB,OAAO,CAAC;CAC/B,CAAC;AAUX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAClB,EAAQ,EAIR,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,CAAU,CAAC;AAEtC,uDAAuD;AACvD,MAAM,CAAC,MAAM,GAAG,GAAG,CACjB,EAAQ,EAIR,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,CAAU,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CACnB,GAAG,QAAkB,EACiB,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC","sourcesContent":["/**\n * Custom-property kinds, modelled after the `@property` grammar itself.\n *\n * A kind is not an invention: it is exactly what CSS knows how to register\n * (`<color>`, `<length>`, `<length-percentage>`, `+`, `#`, `|`). Inventing a\n * kind `@property` does not know would break the runtime half of the\n * guarantee — the browser would stop validating the value, and a variable\n * assigned a length where a colour was expected would simply paint nothing.\n *\n * A kind is **callable**: `kind.color(palette.text.strong)` builds the spec\n * `cssVars` wants, while `kind.color` on its own is the grammar that `many`,\n * `csv` and the axis `writes` constraint operate on. One name for one concept,\n * used in both positions.\n *\n * The assignability lattice is **not** a second table kept in sync with the\n * brands. It reads the brands: an integer carries the number brand, so\n * `<integer>` flows into `<number>`; `<length-percentage>` is a union, so\n * `<length>` flows into it and not the other way round. A table would be one\n * more thing that can silently disagree with reality.\n */\nimport type {\n  AngleValue,\n  ColorRole,\n  ColorValue,\n  CssStringValue,\n  IdentValue,\n  IntegerValue,\n  LengthPercentageValue,\n  LengthValue,\n  NumberValue,\n  PercentValue,\n  TimeValue,\n  UrlValue,\n} from './tokens/units.ts';\n\nexport type CssVarRole = ColorRole;\n\nexport interface CssVarOptions {\n  readonly role?: CssVarRole;\n  /**\n   * `false` by default: it bounds invalidation when the variable is rewritten\n   * at runtime instead of making the whole subtree recompute.\n   */\n  readonly inherits?: boolean;\n}\n\nexport interface CssVarSpec<Syntax extends string, Value> {\n  readonly syntax: Syntax;\n  readonly initial: Value;\n  readonly role: CssVarRole;\n  readonly inherits: boolean;\n}\n\nexport interface CssVarKind<Syntax extends string, Value> {\n  (initial: Value, options?: CssVarOptions): CssVarSpec<Syntax, Value>;\n  readonly syntax: Syntax;\n  /** Type-only inference site; nothing reads it at runtime. */\n  readonly __value?: Value;\n}\n\nconst roleOf = (initial: unknown): CssVarRole => {\n  const role = (initial as { readonly role?: CssVarRole } | null)?.role;\n  return role ?? 'none';\n};\n\nfunction kindOf<Syntax extends string, Value>(\n  syntax: Syntax,\n): CssVarKind<Syntax, Value> {\n  const build = (initial: Value, options?: CssVarOptions) => ({\n    syntax,\n    initial,\n    role: options?.role ?? roleOf(initial),\n    inherits: options?.inherits ?? false,\n  });\n  return Object.assign(build, { syntax }) as CssVarKind<Syntax, Value>;\n}\n\nexport const kind = {\n  color: kindOf<'<color>', ColorValue>('<color>'),\n  length: kindOf<'<length>', LengthValue>('<length>'),\n  percentage: kindOf<'<percentage>', PercentValue>('<percentage>'),\n  lengthPercentage: kindOf<'<length-percentage>', LengthPercentageValue>(\n    '<length-percentage>',\n  ),\n  number: kindOf<'<number>', NumberValue>('<number>'),\n  integer: kindOf<'<integer>', IntegerValue>('<integer>'),\n  angle: kindOf<'<angle>', AngleValue>('<angle>'),\n  time: kindOf<'<time>', TimeValue>('<time>'),\n  ident: kindOf<'<custom-ident>', IdentValue>('<custom-ident>'),\n  string: kindOf<'<string>', CssStringValue>('<string>'),\n  url: kindOf<'<url>', UrlValue>('<url>'),\n} as const;\n\nexport type AnyKind = CssVarKind<string, any>;\n\nexport type ValueOf<Kind> =\n  Kind extends CssVarKind<string, infer Value> ? Value : never;\n\nexport type SyntaxOf<Kind> =\n  Kind extends CssVarKind<infer Syntax, any> ? Syntax : never;\n\n/**\n * `<a>+` — a space-separated list of at least one.\n *\n * The value type is a non-empty tuple rather than an array so that `many(kind.length)`\n * cannot be satisfied by `[]`, which registers as an invalid value at runtime.\n */\nexport const many = <Kind extends AnyKind>(\n  of: Kind,\n): CssVarKind<\n  `${SyntaxOf<Kind>}+`,\n  readonly [ValueOf<Kind>, ...ValueOf<Kind>[]]\n> => kindOf(`${of.syntax}+`) as never;\n\n/** `<a>#` — a comma-separated list of at least one. */\nexport const csv = <Kind extends AnyKind>(\n  of: Kind,\n): CssVarKind<\n  `${SyntaxOf<Kind>}#`,\n  readonly [ValueOf<Kind>, ...ValueOf<Kind>[]]\n> => kindOf(`${of.syntax}#`) as never;\n\n/**\n * `a | b | c` — a closed keyword set, registered as such.\n *\n * The keywords are the *values*: `oneOf('auto', 'none')` accepts `'auto'` and\n * nothing else. This is the one place a string literal is a legitimate value,\n * because the grammar itself is a set of literals and the union is closed.\n */\nexport const oneOf = <const Keywords extends readonly [string, ...string[]]>(\n  ...keywords: Keywords\n): CssVarKind<string, Keywords[number]> => kindOf(keywords.join(' | '));\n\n/**\n * Can a value of kind `From` be written into a variable of kind `To`?\n *\n * Read off the brands, so it cannot drift from what the values actually are.\n */\nexport type Assignable<From extends AnyKind, To extends AnyKind> = [\n  ValueOf<From>,\n] extends [ValueOf<To>]\n  ? true\n  : false;\n"]}

package/src/lib/obligations.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Les obligations de contexte : ce qu'une classe exige de ses ancêtres.
+ *
+ * Le cœur du dispositif tient en une ligne : **`provides(scrollPort.block)`
+ * retourne l'effet CSS et la décharge dans le même objet**. Comme `overflow`
+ * n'existe pas dans la table de propriétés, c'est l'unique chemin vers
+ * `overflow: auto`. Le mauvais correctif — poser un `overflow` au hasard sur le
+ * parent le plus proche — n'est pas découragé, il est inexprimable.
+ */
+import type { CraftRequirement } from '@craft-ts/core';
+import type { Declaration } from './props/factory.ts';
+/**
+ * The payload the channel carries. An obligation and its discharge share the
+ * **same** type — that is what makes `Exclude` cancel them in the core.
+ *
+ * It is a `CraftRequirement`, so the id and the explanation travel with it and
+ * the sealing error can quote both. The core reads two opaque strings; every
+ * word of CSS meaning in them is written here.
+ */
+export type Obligation<Id extends string, Explain extends string = string> = CraftRequirement<Id, Explain>;
+export interface ObligationSpec<Id extends string, Explain extends string = string> {
+    readonly id: Id;
+    /** The CSS a provider must lay down, inseparable from the discharge. */
+    readonly effect: readonly Declaration[];
+    readonly explain: Explain;
+}
+export declare const scrollPort: {
+    readonly block: ObligationSpec<"scrollPort.block", "declare it on the layout component that owns the scrollable area. An overflow on the direct parent would create a second scroll port, and the sticky element would stick to the wrong container.">;
+    readonly inline: ObligationSpec<"scrollPort.inline", "declare it on the layout component that owns the scrollable area.">;
+};
+export declare const noClipping: {
+    readonly block: ObligationSpec<"noClipping.block", "no ancestor between this node and its container may clip the block axis.">;
+    readonly inline: ObligationSpec<"noClipping.inline", "no ancestor between this node and its container may clip the inline axis.">;
+};
+export declare const containerType: {
+    readonly inlineSize: ObligationSpec<"containerType.inlineSize", "declare it on the element whose inline size the container queries read.">;
+    readonly size: ObligationSpec<"containerType.size", "declare it on the element whose size the container queries read.">;
+    readonly scrollState: ObligationSpec<"containerType.scrollState", "declare it on the element whose scroll state must be queryable.">;
+};
+/**
+ * Ce qu'une classe **exige**. S'attache à la classe qui en dépend, pas à la
+ * feuille entière : c'est la classe précise qui porte la demande, sinon
+ * l'erreur désigne un fichier au lieu d'une règle.
+ */
+export declare const requires: <const Id extends string, const Explain extends string>(spec: ObligationSpec<Id, Explain>) => {
+    readonly kind: "requires";
+    readonly spec: ObligationSpec<Id, Explain>;
+};
+/**
+ * Ce qu'un ancêtre **fournit**. Émet l'effet CSS ET la décharge. Il n'existe
+ * pas de constructeur littéral de décharge : on ne peut pas prétendre avoir
+ * fourni sans poser le CSS correspondant.
+ */
+export declare const provides: <const Id extends string, const Explain extends string>(spec: ObligationSpec<Id, Explain>) => {
+    readonly kind: "provides";
+    readonly spec: ObligationSpec<Id, Explain>;
+};
+/**
+ * Rogne l'overflow — et **déclare le faire**. Une classe qui clippe traverse
+ * le canal `violates` : si une obligation `noClipping` reste ouverte sous elle,
+ * le chemin est en faute et le typage le dit.
+ */
+export declare const clipOverflow: {
+    readonly block: {
+        readonly kind: "violates";
+        readonly spec: ObligationSpec<"noClipping.block", "this node clips the block axis.">;
+    };
+    readonly inline: {
+        readonly kind: "violates";
+        readonly spec: ObligationSpec<"noClipping.inline", "this node clips the inline axis.">;
+    };
+};
+/**
+ * Discharges an obligation **without** laying down the CSS — for the cases the
+ * model cannot see, such as a scroll port owned by a third-party shell.
+ *
+ * It is the marked escape hatch, not a loophole: `unproven` travels with it, so
+ * the graph counts it as debt. An escape hatch that did not bubble up would be
+ * a design bug, not a convenience.
+ */
+export declare const unsafeAssume: <const Id extends string, const Explain extends string, Reason extends string>(spec: ObligationSpec<Id, Explain>, reason: Reason) => {
+    readonly kind: "provides";
+    readonly spec: {
+        readonly effect: readonly Declaration[];
+        readonly id: Id;
+        readonly explain: Explain;
+    };
+    readonly unproven: Reason;
+};
+/**
+ * Declares that a class *is* the thing an obligation asks for, without being
+ * the one that asks. Reserved for the layout primitives that own a region.
+ */
+export declare const declares: <const Id extends string, const Explain extends string>(spec: ObligationSpec<Id, Explain>) => {
+    readonly kind: "provides";
+    readonly spec: ObligationSpec<Id, Explain>;
+};
+export type ObligationEntry = ReturnType<typeof requires> | ReturnType<typeof provides> | ReturnType<typeof unsafeAssume> | typeof clipOverflow.block | typeof clipOverflow.inline;
+//# sourceMappingURL=obligations.d.ts.map

package/src/lib/obligations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"obligations.d.ts","sourceRoot":"","sources":["../../../../../libs/style/src/lib/obligations.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,OAAO,SAAS,MAAM,GAAG,MAAM,IACvE,gBAAgB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;AAEhC,MAAM,WAAW,cAAc,CAC7B,EAAE,SAAS,MAAM,EACjB,OAAO,SAAS,MAAM,GAAG,MAAM;IAE/B,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IACxC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAcD,eAAO,MAAM,UAAU;;;CAcb,CAAC;AAEX,eAAO,MAAM,UAAU;;;CAWb,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAgBhB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,CAAC,OAAO,SAAS,MAAM,EAC5E,MAAM,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC;;;CACO,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,CAAC,OAAO,SAAS,MAAM,EAC5E,MAAM,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC;;;CACO,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;CAiBf,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GACvB,KAAK,CAAC,EAAE,SAAS,MAAM,EACvB,KAAK,CAAC,OAAO,SAAS,MAAM,EAC5B,MAAM,SAAS,MAAM,EAErB,MAAM,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC,EACjC,QAAQ,MAAM;;;yBAImB,SAAS,WAAW,EAAE;;;;;CAE5C,CAAC;AAEd;;;GAGG;AACH,eAAO,MAAM,QAAQ,SAtDU,EAAE,SAAS,MAAM,QAAQ,OAAO,SAAS,MAAM,QACtE,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC;;;CAqDH,CAAC;AAEjC,MAAM,MAAM,eAAe,GACvB,UAAU,CAAC,OAAO,QAAQ,CAAC,GAC3B,UAAU,CAAC,OAAO,QAAQ,CAAC,GAC3B,UAAU,CAAC,OAAO,YAAY,CAAC,GAC/B,OAAO,YAAY,CAAC,KAAK,GACzB,OAAO,YAAY,CAAC,MAAM,CAAC"}

package/src/lib/obligations.js

@@ -0,0 +1,69 @@
+const obligation = (id, effect, explain) => ({ id, effect, explain });
+const d = (property, value) => ({
+    property,
+    value,
+    unproven: '',
+});
+export const scrollPort = {
+    block: obligation('scrollPort.block', 
+    // Les deux déclarations partent ensemble. `min-block-size: 0` sans
+    // `overflow-block` ne sert à rien, et l'inverse produit un port qui ne
+    // rétrécit jamais — c'est précisément le bug que ce couplage évite.
+    [d('overflow-block', 'auto'), d('min-block-size', '0')], 'declare it on the layout component that owns the scrollable area. An overflow on the direct parent would create a second scroll port, and the sticky element would stick to the wrong container.'),
+    inline: obligation('scrollPort.inline', [d('overflow-inline', 'auto'), d('min-inline-size', '0')], 'declare it on the layout component that owns the scrollable area.'),
+};
+export const noClipping = {
+    block: obligation('noClipping.block', [d('overflow-block', 'visible')], 'no ancestor between this node and its container may clip the block axis.'),
+    inline: obligation('noClipping.inline', [d('overflow-inline', 'visible')], 'no ancestor between this node and its container may clip the inline axis.'),
+};
+export const containerType = {
+    inlineSize: obligation('containerType.inlineSize', [d('container-type', 'inline-size')], 'declare it on the element whose inline size the container queries read.'),
+    size: obligation('containerType.size', [d('container-type', 'size')], 'declare it on the element whose size the container queries read.'),
+    scrollState: obligation('containerType.scrollState', [d('container-type', 'scroll-state')], 'declare it on the element whose scroll state must be queryable.'),
+};
+/**
+ * Ce qu'une classe **exige**. S'attache à la classe qui en dépend, pas à la
+ * feuille entière : c'est la classe précise qui porte la demande, sinon
+ * l'erreur désigne un fichier au lieu d'une règle.
+ */
+export const requires = (spec) => ({ kind: 'requires', spec });
+/**
+ * Ce qu'un ancêtre **fournit**. Émet l'effet CSS ET la décharge. Il n'existe
+ * pas de constructeur littéral de décharge : on ne peut pas prétendre avoir
+ * fourni sans poser le CSS correspondant.
+ */
+export const provides = (spec) => ({ kind: 'provides', spec });
+/**
+ * Rogne l'overflow — et **déclare le faire**. Une classe qui clippe traverse
+ * le canal `violates` : si une obligation `noClipping` reste ouverte sous elle,
+ * le chemin est en faute et le typage le dit.
+ */
+export const clipOverflow = {
+    block: {
+        kind: 'violates',
+        spec: obligation('noClipping.block', [d('overflow-block', 'clip')], 'this node clips the block axis.'),
+    },
+    inline: {
+        kind: 'violates',
+        spec: obligation('noClipping.inline', [d('overflow-inline', 'clip')], 'this node clips the inline axis.'),
+    },
+};
+/**
+ * Discharges an obligation **without** laying down the CSS — for the cases the
+ * model cannot see, such as a scroll port owned by a third-party shell.
+ *
+ * It is the marked escape hatch, not a loophole: `unproven` travels with it, so
+ * the graph counts it as debt. An escape hatch that did not bubble up would be
+ * a design bug, not a convenience.
+ */
+export const unsafeAssume = (spec, reason) => ({
+    kind: 'provides',
+    spec: { ...spec, effect: [] },
+    unproven: reason,
+});
+/**
+ * Declares that a class *is* the thing an obligation asks for, without being
+ * the one that asks. Reserved for the layout primitives that own a region.
+ */
+export const declares = provides;
+//# sourceMappingURL=obligations.js.map

package/src/lib/obligations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"obligations.js","sourceRoot":"","sources":["../../../../../libs/style/src/lib/obligations.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Les obligations de contexte : ce qu'une classe exige de ses ancêtres.\n *\n * Le cœur du dispositif tient en une ligne : **`provides(scrollPort.block)`\n * retourne l'effet CSS et la décharge dans le même objet**. Comme `overflow`\n * n'existe pas dans la table de propriétés, c'est l'unique chemin vers\n * `overflow: auto`. Le mauvais correctif — poser un `overflow` au hasard sur le\n * parent le plus proche — n'est pas découragé, il est inexprimable.\n */\nimport type { CraftRequirement } from '@craft-ts/core';\nimport type { Declaration } from './props/factory.ts';\n\n/**\n * The payload the channel carries. An obligation and its discharge share the\n * **same** type — that is what makes `Exclude` cancel them in the core.\n *\n * It is a `CraftRequirement`, so the id and the explanation travel with it and\n * the sealing error can quote both. The core reads two opaque strings; every\n * word of CSS meaning in them is written here.\n */\nexport type Obligation<Id extends string, Explain extends string = string> =\n  CraftRequirement<Id, Explain>;\n\nexport interface ObligationSpec<\n  Id extends string,\n  Explain extends string = string,\n> {\n  readonly id: Id;\n  /** The CSS a provider must lay down, inseparable from the discharge. */\n  readonly effect: readonly Declaration[];\n  readonly explain: Explain;\n}\n\nconst obligation = <const Id extends string, const Explain extends string>(\n  id: Id,\n  effect: readonly Declaration[],\n  explain: Explain,\n): ObligationSpec<Id, Explain> => ({ id, effect, explain });\n\nconst d = (property: string, value: string): Declaration => ({\n  property,\n  value,\n  unproven: '',\n});\n\nexport const scrollPort = {\n  block: obligation(\n    'scrollPort.block',\n    // Les deux déclarations partent ensemble. `min-block-size: 0` sans\n    // `overflow-block` ne sert à rien, et l'inverse produit un port qui ne\n    // rétrécit jamais — c'est précisément le bug que ce couplage évite.\n    [d('overflow-block', 'auto'), d('min-block-size', '0')],\n    'declare it on the layout component that owns the scrollable area. An overflow on the direct parent would create a second scroll port, and the sticky element would stick to the wrong container.',\n  ),\n  inline: obligation(\n    'scrollPort.inline',\n    [d('overflow-inline', 'auto'), d('min-inline-size', '0')],\n    'declare it on the layout component that owns the scrollable area.',\n  ),\n} as const;\n\nexport const noClipping = {\n  block: obligation(\n    'noClipping.block',\n    [d('overflow-block', 'visible')],\n    'no ancestor between this node and its container may clip the block axis.',\n  ),\n  inline: obligation(\n    'noClipping.inline',\n    [d('overflow-inline', 'visible')],\n    'no ancestor between this node and its container may clip the inline axis.',\n  ),\n} as const;\n\nexport const containerType = {\n  inlineSize: obligation(\n    'containerType.inlineSize',\n    [d('container-type', 'inline-size')],\n    'declare it on the element whose inline size the container queries read.',\n  ),\n  size: obligation(\n    'containerType.size',\n    [d('container-type', 'size')],\n    'declare it on the element whose size the container queries read.',\n  ),\n  scrollState: obligation(\n    'containerType.scrollState',\n    [d('container-type', 'scroll-state')],\n    'declare it on the element whose scroll state must be queryable.',\n  ),\n} as const;\n\n/**\n * Ce qu'une classe **exige**. S'attache à la classe qui en dépend, pas à la\n * feuille entière : c'est la classe précise qui porte la demande, sinon\n * l'erreur désigne un fichier au lieu d'une règle.\n */\nexport const requires = <const Id extends string, const Explain extends string>(\n  spec: ObligationSpec<Id, Explain>,\n) => ({ kind: 'requires', spec }) as const;\n\n/**\n * Ce qu'un ancêtre **fournit**. Émet l'effet CSS ET la décharge. Il n'existe\n * pas de constructeur littéral de décharge : on ne peut pas prétendre avoir\n * fourni sans poser le CSS correspondant.\n */\nexport const provides = <const Id extends string, const Explain extends string>(\n  spec: ObligationSpec<Id, Explain>,\n) => ({ kind: 'provides', spec }) as const;\n\n/**\n * Rogne l'overflow — et **déclare le faire**. Une classe qui clippe traverse\n * le canal `violates` : si une obligation `noClipping` reste ouverte sous elle,\n * le chemin est en faute et le typage le dit.\n */\nexport const clipOverflow = {\n  block: {\n    kind: 'violates',\n    spec: obligation(\n      'noClipping.block',\n      [d('overflow-block', 'clip')],\n      'this node clips the block axis.',\n    ),\n  },\n  inline: {\n    kind: 'violates',\n    spec: obligation(\n      'noClipping.inline',\n      [d('overflow-inline', 'clip')],\n      'this node clips the inline axis.',\n    ),\n  },\n} as const;\n\n/**\n * Discharges an obligation **without** laying down the CSS — for the cases the\n * model cannot see, such as a scroll port owned by a third-party shell.\n *\n * It is the marked escape hatch, not a loophole: `unproven` travels with it, so\n * the graph counts it as debt. An escape hatch that did not bubble up would be\n * a design bug, not a convenience.\n */\nexport const unsafeAssume = <\n  const Id extends string,\n  const Explain extends string,\n  Reason extends string,\n>(\n  spec: ObligationSpec<Id, Explain>,\n  reason: Reason,\n) =>\n  ({\n    kind: 'provides',\n    spec: { ...spec, effect: [] as readonly Declaration[] },\n    unproven: reason,\n  }) as const;\n\n/**\n * Declares that a class *is* the thing an obligation asks for, without being\n * the one that asks. Reserved for the layout primitives that own a region.\n */\nexport const declares = provides;\n\nexport type ObligationEntry =\n  | ReturnType<typeof requires>\n  | ReturnType<typeof provides>\n  | ReturnType<typeof unsafeAssume>\n  | typeof clipOverflow.block\n  | typeof clipOverflow.inline;\n"]}