@tamagui/style-grammar 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/types/payloadShape.d.ts

@@ -0,0 +1,15 @@
+export interface PayloadShapeDiagnostic {
+	code: "multi-component-single-value";
+	property: string;
+	payload: string;
+	message: string;
+}
+/**
+* Returns a diagnostic when `payload` holds more than one top-level component
+* for a longhand that takes exactly one. `hasBase` sharpens the message: with
+* no base in the program, the most likely cause is a base written after a
+* conditional and swallowed by its space-greedy payload.
+*/
+export declare function validatePayloadShape(property: string, payload: string, hasBase: boolean): PayloadShapeDiagnostic | null;
+
+//# sourceMappingURL=payloadShape.d.ts.map

package/types/payloadShape.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AA4DA,iBAAiB,uBAAuB;CACtC,MAAM;CACN;CACA;CACA;;;;;;;;AASF,OAAO,iBAAS,qBACd,kBACA,iBACA,mBACC",
+  "names": [],
+  "sources": [
+    "src/payloadShape.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// Value-level payload-shape validation, owned by the resolution layer per the\n// design record (\"Value-level validation of resolved payloads has exactly one\n// owner, the resolution step\"). One source of truth for the runtime, the\n// compiler, and the ESLint rule — none of them may grow a second opinion\n// about what a suspicious payload looks like.\n//\n// The clause grammar is space-greedy by design: a payload extends until the\n// next `modifier:` clause, because many longhands legitimately take\n// space-separated component lists (`boxShadow=\"inset 0 2px red\"`). The\n// consequence is that a base written AFTER a conditional is absorbed into\n// that conditional's payload — `backgroundColor=\"sm:green red\"` parses as one\n// clause with payload \"green red\" and NO base, the browser then drops the\n// invalid declaration, and the element renders with nothing at every\n// viewport. The absorption stays (changing it would break legitimate\n// multi-component payloads); the silence goes: a multi-component payload on a\n// longhand that takes exactly one component value is a diagnostic.\n\nimport { splitTopLevelComponents } from './backgroundFamily'\n\n/**\n * Longhands whose value is a component LIST, where a multi-component payload\n * is ordinary CSS. Everything else that this validator is asked about is\n * treated as single-component. Family shorthands (`border`, `background`,\n * `textDecoration`, `font`) never reach payload validation — they split into\n * per-longhand programs first.\n */\nconst listValuedLonghands: ReadonlySet<string> = new Set([\n  'boxShadow',\n  'textShadow',\n  'transform',\n  'transition',\n  'transitionProperty',\n  'animation',\n  'animationName',\n  'backgroundImage',\n  'backgroundPosition',\n  'backgroundSize',\n  'backgroundRepeat',\n  'fontFamily',\n  'fontVariant',\n  'filter',\n  'backdropFilter',\n  'willChange',\n  'quotes',\n  'textDecorationLine',\n  'containIntrinsicSize',\n  'strokeDasharray',\n  'gridTemplateColumns',\n  'gridTemplateRows',\n  'gridTemplateAreas',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'inset',\n  'mask',\n  'maskImage',\n  'maskPosition',\n  'maskSize',\n])\n\nexport interface PayloadShapeDiagnostic {\n  code: 'multi-component-single-value'\n  property: string\n  payload: string\n  message: string\n}\n\n/**\n * Returns a diagnostic when `payload` holds more than one top-level component\n * for a longhand that takes exactly one. `hasBase` sharpens the message: with\n * no base in the program, the most likely cause is a base written after a\n * conditional and swallowed by its space-greedy payload.\n */\nexport function validatePayloadShape(\n  property: string,\n  payload: string,\n  hasBase: boolean\n): PayloadShapeDiagnostic | null {\n  if (listValuedLonghands.has(property)) return null\n  const components = splitTopLevelComponents(payload)\n  if (components.length <= 1) return null\n  return {\n    code: 'multi-component-single-value',\n    property,\n    payload,\n    message:\n      `\"${payload}\" holds ${components.length} values but \"${property}\" takes one.` +\n      (hasBase\n        ? ''\n        : ` A value written after a conditional joins that conditional's payload — write the base value before the first conditional.`),\n  }\n}\n"
+  ]
+}

package/types/programEligibility.d.ts

@@ -0,0 +1,23 @@
+/**
+* Props with no per-part flat clause spelling BY DESIGN, mapped to the
+* composite property that owns their clause spelling.
+*
+* - RN shadow parts are not CSS longhands: plain values compose into
+*   boxShadow/textShadow (web `styleToCSS`) or pass straight to the RN host,
+*   and the composite property carries any conditional.
+* - Transform parts outside the flat family (skews, 3D rotations,
+*   perspective, matrix) have no per-part spelling; the raw `transform`
+*   property is one ordinary program and owns their clauses (design record,
+*   "The transform family").
+*/
+export declare const legacyPartComposite: Readonly<Record<string, string>>;
+export type ProgramEligibility = "program" | "legacy-part";
+/**
+* 'program': a clause-bearing flat value on this prop evaluates through the
+* program engine. 'legacy-part': plain values keep their legacy pipeline and
+* a clause-bearing value is a diagnostic naming the composite — never a
+* silent forward, never a codemod conversion.
+*/
+export declare function programEligibility(prop: string): ProgramEligibility;
+
+//# sourceMappingURL=programEligibility.d.ts.map

package/types/programEligibility.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": ";;;;;;;;;;;;AAkBA,OAAO,cAAM,qBAAqB,SAAS;AAiB3C,YAAY,qBAAqB,YAAY;;;;;;;AAQ7C,OAAO,iBAAS,mBAAmB,eAAe",
+  "names": [],
+  "sources": [
+    "src/programEligibility.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// One owner for \"does a flat clause value on this prop evaluate through the\n// program engine\". The runtime consults it before contributing, the codemod\n// consults it before converting a condition object, and the ESLint rule\n// consults it before blessing a clause spelling — so a migration can never\n// produce source the runtime will not evaluate (review P0-2).\n\n/**\n * Props with no per-part flat clause spelling BY DESIGN, mapped to the\n * composite property that owns their clause spelling.\n *\n * - RN shadow parts are not CSS longhands: plain values compose into\n *   boxShadow/textShadow (web `styleToCSS`) or pass straight to the RN host,\n *   and the composite property carries any conditional.\n * - Transform parts outside the flat family (skews, 3D rotations,\n *   perspective, matrix) have no per-part spelling; the raw `transform`\n *   property is one ordinary program and owns their clauses (design record,\n *   \"The transform family\").\n */\nexport const legacyPartComposite: Readonly<Record<string, string>> = Object.freeze({\n  shadowColor: 'boxShadow',\n  shadowOffset: 'boxShadow',\n  shadowOpacity: 'boxShadow',\n  shadowRadius: 'boxShadow',\n  textShadowColor: 'textShadow',\n  textShadowOffset: 'textShadow',\n  textShadowRadius: 'textShadow',\n  perspective: 'transform',\n  skewX: 'transform',\n  skewY: 'transform',\n  matrix: 'transform',\n  rotateX: 'transform',\n  rotateY: 'transform',\n  rotateZ: 'transform',\n})\n\nexport type ProgramEligibility = 'program' | 'legacy-part'\n\n/**\n * 'program': a clause-bearing flat value on this prop evaluates through the\n * program engine. 'legacy-part': plain values keep their legacy pipeline and\n * a clause-bearing value is a diagnostic naming the composite — never a\n * silent forward, never a codemod conversion.\n */\nexport function programEligibility(prop: string): ProgramEligibility {\n  return prop in legacyPartComposite ? 'legacy-part' : 'program'\n}\n"
+  ]
+}

package/types/programHash.d.ts

@@ -0,0 +1,20 @@
+import type { ParsedValue } from "./valueTypes";
+/**
+* The exact string that identifies a program. Every variable-length part is
+* length-prefixed, so no payload can forge a boundary and two different
+* programs cannot normalize to the same key. Also usable as the upstream
+* parse/lower cache key.
+*/
+export declare function normalizeProgramKey(property: string, value: ParsedValue, configRevision: string): string;
+/**
+* Short per-property prefix for readability in devtools: the first letter of
+* each camelCase word, so `backgroundColor` is `bc` and `borderTopLeftRadius`
+* is `btlr`. Abbreviations may collide (`backgroundColor` and `backgroundClip`
+* are both `bc`); the hash carries the property name, so the full class name
+* still differs. This is a label, not identity.
+*/
+export declare function propertyAbbreviation(property: string): string;
+/** the css-safe class name that owns this program's block, eg `_bc-1076745300` */
+export declare function programClassName(property: string, value: ParsedValue, configRevision: string): string;
+
+//# sourceMappingURL=programHash.d.ts.map

package/types/programHash.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAaA,cAAc,mBAAmB;;;;;;;AA6DjC,OAAO,iBAAS,oBACd,kBACA,OAAO,aACP;;;;;;;;AAuBF,OAAO,iBAAS,qBAAqB;;AAkBrC,OAAO,iBAAS,iBACd,kBACA,OAAO,aACP",
+  "names": [],
+  "sources": [
+    "src/programHash.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// Deterministic identity for one lowered program.\n//\n// A (longhand property, program, config revision) triple hashes to one class\n// name, which is the whole dedup mechanism for the program block encoding: a\n// class name fully determines its block, so duplicate arrival is idempotent and\n// dedup is a name check. See plans/dom-tailwind-flat-values.md — \"The program\n// block encoding\".\n//\n// Server and client must agree, so nothing here may depend on iteration order,\n// config object identity, or insertion history. The config revision is the\n// caller's opaque stamp for \"the resolved config that produced these payloads\".\n\nimport { canonicalClauseModifier } from './clausePrecedence'\nimport type { ParsedValue } from './valueTypes'\n\n// The hash is the algorithm from @tamagui/simple-hash\n// (code/core/simple-hash/src/index.ts), copied rather than imported because this\n// package stays dependency-free. Same accumulator, same CSS-safe character\n// rules, so identifiers behave like the ones core already generates. Keep in\n// sync if that file changes. Two deliberate differences: no memo cache (callers\n// own caching, and a shared module-level cache in the grammar package would\n// outlive every config), and `strict` mode at the call site below.\nfunction hashChar(hash: number, char: string): number {\n  return (Math.imul(31, hash) + char.charCodeAt(0)) | 0\n}\n\nfunction isValidCssCharCode(code: number): boolean {\n  return (\n    (code >= 65 && code <= 90) || // A-Z\n    (code >= 97 && code <= 122) || // a-z\n    code === 95 || // _\n    code === 45 || // -\n    (code >= 48 && code <= 57) // 0-9\n  )\n}\n\nfunction simpleHash(input: string, hashMin: number | 'strict' = 10): string {\n  let str = input\n\n  // remove var()\n  if (str[0] === 'v' && str.startsWith('var(')) {\n    str = str.slice(6, str.length - 1)\n  }\n\n  let hash = 0\n  let valids = ''\n  let added = 0\n  const len = str.length\n\n  for (let i = 0; i < len; i++) {\n    if (hashMin !== 'strict' && added <= hashMin) {\n      const char = str.charCodeAt(i)\n      if (char === 46) {\n        valids += '--'\n        continue\n      }\n      if (isValidCssCharCode(char)) {\n        added++\n        valids += str[i]\n        continue\n      }\n    }\n    hash = hashChar(hash, str[i])\n  }\n\n  return valids + (hash ? Math.abs(hash) : '')\n}\n\n/**\n * The exact string that identifies a program. Every variable-length part is\n * length-prefixed, so no payload can forge a boundary and two different\n * programs cannot normalize to the same key. Also usable as the upstream\n * parse/lower cache key.\n */\nexport function normalizeProgramKey(\n  property: string,\n  value: ParsedValue,\n  configRevision: string\n): string {\n  let key = `${configRevision.length}:${configRevision}${property.length}:${property}`\n  key += value.base === null ? 'n' : `b${value.base.length}:${value.base}`\n  for (const clause of value.clauses) {\n    // condition sets are conjunctions: `dark:hover:` and `hover:dark:` are one\n    // clause, so the hash sorts a copy to agree with the merge rule and dedup;\n    // alias spellings canonicalize first so `active:` and `press:` are one name\n    const canonical = clause.modifiers.map(canonicalClauseModifier)\n    const modifiers =\n      canonical.length > 1 ? canonical.sort().join(',') : canonical.join(',')\n    key += `c${modifiers.length}:${modifiers}${clause.payload.length}:${clause.payload}`\n  }\n  return key\n}\n\n/**\n * Short per-property prefix for readability in devtools: the first letter of\n * each camelCase word, so `backgroundColor` is `bc` and `borderTopLeftRadius`\n * is `btlr`. Abbreviations may collide (`backgroundColor` and `backgroundClip`\n * are both `bc`); the hash carries the property name, so the full class name\n * still differs. This is a label, not identity.\n */\nexport function propertyAbbreviation(property: string): string {\n  let out = ''\n  for (let index = 0; index < property.length; index++) {\n    const code = property.charCodeAt(index)\n    const isWordStart =\n      index === 0 ||\n      (code >= 65 && code <= 90) ||\n      // a dash also starts a word, so the transform family's custom properties\n      // read as `--t-x` -> `tx` rather than collapsing to the fallback\n      property.charCodeAt(index - 1) === 45\n    if (isWordStart && ((code >= 65 && code <= 90) || (code >= 97 && code <= 122))) {\n      out += property[index].toLowerCase()\n    }\n  }\n  return out || 'x'\n}\n\n/** the css-safe class name that owns this program's block, eg `_bc-1076745300` */\nexport function programClassName(\n  property: string,\n  value: ParsedValue,\n  configRevision: string\n): string {\n  const hash = simpleHash(normalizeProgramKey(property, value, configRevision), 'strict')\n  // `strict` returns '' when the accumulator lands on 0, which would make every\n  // such program share one name\n  return `_${propertyAbbreviation(property)}-${hash || '0'}`\n}\n"
+  ]
+}

package/types/programs.d.ts

@@ -0,0 +1,18 @@
+import type { LonghandProgram, ParsedValue } from "./valueTypes";
+export declare const longhandExpansionTable: Readonly<Record<string, readonly string[]>>;
+export declare function expandToLonghands(prop: string, shorthands?: Record<string, string>): readonly string[];
+/**
+* The merge unit is the clause, keyed by its exact condition set (decision
+* 21): the later contribution replaces the base only when it restates one,
+* replaces the clauses whose condition sets it restates, and its clauses
+* append after the surviving earlier ones so last-match-wins holds. A styled
+* `bg="gray hover:blue"` overridden by a call-site `bg="red"` keeps the
+* hover clause, matching tailwind-merge's per-variant conflict groups.
+*/
+export declare function mergeProgramValues(earlier: ParsedValue, later: ParsedValue): ParsedValue;
+export declare function mergePrograms(entries: ReadonlyArray<{
+	prop: string;
+	value: ParsedValue;
+}>, shorthands?: Record<string, string>): Map<string, LonghandProgram>;
+
+//# sourceMappingURL=programs.d.ts.map

package/types/programs.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AACA,cAAc,iBAA+B,mBAAmB;AAEhE,OAAO,cAAM,wBAAwB,SAAS;AAoC9C,OAAO,iBAAS,kBACd,cACA,aAAa;;;;;;;;;AAcf,OAAO,iBAAS,mBACd,SAAS,aACT,OAAO,cACN;AAoBH,OAAO,iBAAS,cACd,SAAS,cAAc;CAAE;CAAc,OAAO;IAC9C,aAAa,yBACZ,YAAY",
+  "names": [],
+  "sources": [
+    "src/programs.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import { clauseConditionSetKey } from './clausePrecedence'\nimport type { LonghandProgram, ParsedClause, ParsedValue } from './valueTypes'\n\nexport const longhandExpansionTable: Readonly<Record<string, readonly string[]>> = {\n  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n  paddingHorizontal: ['paddingLeft', 'paddingRight'],\n  paddingVertical: ['paddingTop', 'paddingBottom'],\n  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n  marginHorizontal: ['marginLeft', 'marginRight'],\n  marginVertical: ['marginTop', 'marginBottom'],\n  inset: ['top', 'right', 'bottom', 'left'],\n  borderWidth: [\n    'borderTopWidth',\n    'borderRightWidth',\n    'borderBottomWidth',\n    'borderLeftWidth',\n  ],\n  borderColor: [\n    'borderTopColor',\n    'borderRightColor',\n    'borderBottomColor',\n    'borderLeftColor',\n  ],\n  borderStyle: [\n    'borderTopStyle',\n    'borderRightStyle',\n    'borderBottomStyle',\n    'borderLeftStyle',\n  ],\n  borderRadius: [\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomRightRadius',\n    'borderBottomLeftRadius',\n  ],\n  overflow: ['overflowX', 'overflowY'],\n  gap: ['rowGap', 'columnGap'],\n}\n\nexport function expandToLonghands(\n  prop: string,\n  shorthands?: Record<string, string>\n): readonly string[] {\n  const resolvedProp = shorthands?.[prop] ?? prop\n  return longhandExpansionTable[resolvedProp] ?? [resolvedProp]\n}\n\n/**\n * The merge unit is the clause, keyed by its exact condition set (decision\n * 21): the later contribution replaces the base only when it restates one,\n * replaces the clauses whose condition sets it restates, and its clauses\n * append after the surviving earlier ones so last-match-wins holds. A styled\n * `bg=\"gray hover:blue\"` overridden by a call-site `bg=\"red\"` keeps the\n * hover clause, matching tailwind-merge's per-variant conflict groups.\n */\nexport function mergeProgramValues(\n  earlier: ParsedValue,\n  later: ParsedValue\n): ParsedValue {\n  const base = later.base ?? earlier.base\n  if (!earlier.clauses.length) {\n    return base === later.base ? later : { base, clauses: later.clauses }\n  }\n  if (!later.clauses.length) {\n    return base === earlier.base ? earlier : { base, clauses: earlier.clauses }\n  }\n  const restated = new Set<string>()\n  for (const clause of later.clauses) {\n    restated.add(clauseConditionSetKey(clause.modifiers))\n  }\n  const clauses: ParsedClause[] = []\n  for (const clause of earlier.clauses) {\n    if (!restated.has(clauseConditionSetKey(clause.modifiers))) clauses.push(clause)\n  }\n  for (const clause of later.clauses) clauses.push(clause)\n  return { base, clauses }\n}\n\nexport function mergePrograms(\n  entries: ReadonlyArray<{ prop: string; value: ParsedValue }>,\n  shorthands?: Record<string, string>\n): Map<string, LonghandProgram> {\n  const programs = new Map<string, LonghandProgram>()\n\n  for (const { prop, value } of entries) {\n    for (const property of expandToLonghands(prop, shorthands)) {\n      const existing = programs.get(property)\n      const merged = existing ? mergeProgramValues(existing.value, value) : value\n      programs.delete(property)\n      programs.set(property, { property, value: merged, sourceProp: prop })\n    }\n  }\n\n  return programs\n}\n"
+  ]
+}

package/types/registry.d.ts

@@ -0,0 +1,24 @@
+import { modifierAliases } from "./stateModifiers";
+export { modifierAliases };
+export type TokenCategory = "space" | "size" | "radius" | "zIndex" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing";
+export type Convenience = "alignment-alias" | "bare-border" | "flex-bundle" | "font-generic" | "integer" | "percentage" | "sizing-keyword";
+export interface GrammarEntry {
+	prop: string;
+	prefix: string;
+	tokenCategory?: TokenCategory;
+	conveniences?: readonly Convenience[];
+}
+export declare const grammarEntries: readonly GrammarEntry[];
+export declare const propToGrammarEntry: Readonly<Record<string, GrammarEntry>>;
+export declare function getTokenCategory(prop: string): TokenCategory | null;
+export declare const prefixToEntries: Readonly<Record<string, readonly GrammarEntry[]>>;
+export declare const standaloneValueProps: Readonly<Record<string, Readonly<Record<string, string>>>>;
+export declare const fontWeightNames: Readonly<Record<string, string>>;
+export declare const wholeClassUtilities: Readonly<Record<string, Readonly<Record<string, string | number>>>>;
+export declare const wholeClassConveniences: Readonly<Record<string, Convenience>>;
+export declare const borderSideSuffix: Readonly<Record<string, readonly string[]>>;
+export declare const radiusCornerProps: Readonly<Record<string, readonly string[]>>;
+export declare const textAlignKeywords: ReadonlySet<string>;
+export declare const percentUtilityProps: ReadonlySet<string>;
+
+//# sourceMappingURL=registry.d.ts.map

package/types/registry.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,SAAS,uBAAuB;AAEhC,SAAS;AAET,YAAY,gBACR,UACA,SACA,WACA,WACA,UACA,eACA,aACA,eACA,eACA;AAEJ,YAAY,cACR,oBACA,gBACA,gBACA,iBACA,YACA,eACA;AAEJ,iBAAiB,aAAa;CAC5B;CACA;CACA,gBAAgB;CAChB,wBAAwB;;AAG1B,OAAO,cAAM,yBAAyB;AA+GtC,OAAO,cAAM,oBAAoB,SAAS,eAAe;AAIzD,OAAO,iBAAS,iBAAiB,eAAe;AAIhD,OAAO,cAAM,iBAAiB,SAAS,wBAAwB;AAS/D,OAAO,cAAM,sBAAsB,SACjC,eAAe,SAAS;AA4G1B,OAAO,cAAM,iBAAiB,SAAS;AA0BvC,OAAO,cAAM,qBAAqB,SAChC,eAAe,SAAS;AAkB1B,OAAO,cAAM,wBAAwB,SAAS,eAAe;AAgB7D,OAAO,cAAM,kBAAkB,SAAS;AAUxC,OAAO,cAAM,mBAAmB,SAAS;AAYzC,OAAO,cAAM,mBAAmB;AAShC,OAAO,cAAM,qBAAqB",
+  "names": [],
+  "sources": [
+    "src/registry.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import { modifierAliases } from './stateModifiers'\n\nexport { modifierAliases }\n\nexport type TokenCategory =\n  | 'space'\n  | 'size'\n  | 'radius'\n  | 'zIndex'\n  | 'color'\n  | 'fontFamily'\n  | 'fontSize'\n  | 'fontWeight'\n  | 'lineHeight'\n  | 'letterSpacing'\n\nexport type Convenience =\n  | 'alignment-alias'\n  | 'bare-border'\n  | 'flex-bundle'\n  | 'font-generic'\n  | 'integer'\n  | 'percentage'\n  | 'sizing-keyword'\n\nexport interface GrammarEntry {\n  prop: string\n  prefix: string\n  tokenCategory?: TokenCategory\n  conveniences?: readonly Convenience[]\n}\n\nexport const grammarEntries: readonly GrammarEntry[] = [\n  { prop: 'backgroundColor', prefix: 'bg', tokenCategory: 'color' },\n  { prop: 'width', prefix: 'w', tokenCategory: 'size', conveniences: ['sizing-keyword'] },\n  {\n    prop: 'height',\n    prefix: 'h',\n    tokenCategory: 'size',\n    conveniences: ['sizing-keyword'],\n  },\n  {\n    prop: 'minWidth',\n    prefix: 'min-w',\n    tokenCategory: 'size',\n    conveniences: ['sizing-keyword'],\n  },\n  {\n    prop: 'maxWidth',\n    prefix: 'max-w',\n    tokenCategory: 'size',\n    conveniences: ['sizing-keyword'],\n  },\n  {\n    prop: 'minHeight',\n    prefix: 'min-h',\n    tokenCategory: 'size',\n    conveniences: ['sizing-keyword'],\n  },\n  {\n    prop: 'maxHeight',\n    prefix: 'max-h',\n    tokenCategory: 'size',\n    conveniences: ['sizing-keyword'],\n  },\n  { prop: 'padding', prefix: 'p', tokenCategory: 'space' },\n  { prop: 'paddingTop', prefix: 'pt', tokenCategory: 'space' },\n  { prop: 'paddingRight', prefix: 'pr', tokenCategory: 'space' },\n  { prop: 'paddingBottom', prefix: 'pb', tokenCategory: 'space' },\n  { prop: 'paddingLeft', prefix: 'pl', tokenCategory: 'space' },\n  { prop: 'paddingHorizontal', prefix: 'px', tokenCategory: 'space' },\n  { prop: 'paddingVertical', prefix: 'py', tokenCategory: 'space' },\n  { prop: 'margin', prefix: 'm', tokenCategory: 'space' },\n  { prop: 'marginTop', prefix: 'mt', tokenCategory: 'space' },\n  { prop: 'marginRight', prefix: 'mr', tokenCategory: 'space' },\n  { prop: 'marginBottom', prefix: 'mb', tokenCategory: 'space' },\n  { prop: 'marginLeft', prefix: 'ml', tokenCategory: 'space' },\n  { prop: 'marginHorizontal', prefix: 'mx', tokenCategory: 'space' },\n  { prop: 'marginVertical', prefix: 'my', tokenCategory: 'space' },\n  { prop: 'gap', prefix: 'gap', tokenCategory: 'space' },\n  { prop: 'borderWidth', prefix: 'border', tokenCategory: 'space' },\n  { prop: 'borderTopWidth', prefix: 'border-t', tokenCategory: 'space' },\n  { prop: 'borderRightWidth', prefix: 'border-r', tokenCategory: 'space' },\n  { prop: 'borderBottomWidth', prefix: 'border-b', tokenCategory: 'space' },\n  { prop: 'borderLeftWidth', prefix: 'border-l', tokenCategory: 'space' },\n  { prop: 'borderColor', prefix: 'border', tokenCategory: 'color' },\n  { prop: 'borderTopColor', prefix: 'border-t', tokenCategory: 'color' },\n  { prop: 'borderRightColor', prefix: 'border-r', tokenCategory: 'color' },\n  { prop: 'borderBottomColor', prefix: 'border-b', tokenCategory: 'color' },\n  { prop: 'borderLeftColor', prefix: 'border-l', tokenCategory: 'color' },\n  { prop: 'borderRadius', prefix: 'rounded', tokenCategory: 'radius' },\n  { prop: 'borderTopLeftRadius', prefix: 'rounded-tl', tokenCategory: 'radius' },\n  { prop: 'borderTopRightRadius', prefix: 'rounded-tr', tokenCategory: 'radius' },\n  { prop: 'borderBottomLeftRadius', prefix: 'rounded-bl', tokenCategory: 'radius' },\n  { prop: 'borderBottomRightRadius', prefix: 'rounded-br', tokenCategory: 'radius' },\n  { prop: 'borderStyle', prefix: 'border' },\n  { prop: 'color', prefix: 'color', tokenCategory: 'color' },\n  { prop: 'fontSize', prefix: 'text', tokenCategory: 'fontSize' },\n  // bound (2026-07-31 adjudication): the runtime resolves fontWeight through\n  // the active family's weight sub-map and the codemod already emits flat\n  // weight names, so an unbound registry row was an omission, not a decision\n  { prop: 'fontWeight', prefix: 'font', tokenCategory: 'fontWeight' },\n  {\n    prop: 'fontFamily',\n    prefix: 'font',\n    tokenCategory: 'fontFamily',\n    conveniences: ['font-generic'],\n  },\n  { prop: 'fontStyle', prefix: '' },\n  { prop: 'lineHeight', prefix: 'leading', tokenCategory: 'lineHeight' },\n  { prop: 'letterSpacing', prefix: 'tracking', tokenCategory: 'letterSpacing' },\n  { prop: 'textAlign', prefix: 'text' },\n  { prop: 'textTransform', prefix: '' },\n  { prop: 'textDecorationLine', prefix: '' },\n  { prop: 'display', prefix: '' },\n  { prop: 'position', prefix: '' },\n  { prop: 'top', prefix: 'top', tokenCategory: 'space' },\n  { prop: 'right', prefix: 'right', tokenCategory: 'space' },\n  { prop: 'bottom', prefix: 'bottom', tokenCategory: 'space' },\n  { prop: 'left', prefix: 'left', tokenCategory: 'space' },\n  { prop: 'inset', prefix: 'inset', tokenCategory: 'space' },\n  { prop: 'zIndex', prefix: 'z', tokenCategory: 'zIndex', conveniences: ['integer'] },\n  { prop: 'overflow', prefix: '' },\n  { prop: 'flex', prefix: 'flex', conveniences: ['flex-bundle'] },\n  { prop: 'flexDirection', prefix: 'flex' },\n  { prop: 'flexWrap', prefix: 'flex' },\n  { prop: 'flexGrow', prefix: 'grow' },\n  { prop: 'flexShrink', prefix: 'shrink' },\n  { prop: 'alignItems', prefix: 'items', conveniences: ['alignment-alias'] },\n  { prop: 'alignContent', prefix: 'content', conveniences: ['alignment-alias'] },\n  { prop: 'alignSelf', prefix: 'self', conveniences: ['alignment-alias'] },\n  { prop: 'justifyContent', prefix: 'justify', conveniences: ['alignment-alias'] },\n  { prop: 'opacity', prefix: 'opacity', conveniences: ['percentage'] },\n  { prop: 'boxShadow', prefix: 'shadow' },\n  { prop: 'pointerEvents', prefix: 'pointer-events' },\n  { prop: 'rotate', prefix: 'rotate' },\n  { prop: 'scale', prefix: 'scale', conveniences: ['percentage'] },\n  { prop: 'x', prefix: 'translate-x', tokenCategory: 'space' },\n  { prop: 'y', prefix: 'translate-y', tokenCategory: 'space' },\n  { prop: 'aspectRatio', prefix: 'aspect' },\n  { prop: 'objectFit', prefix: 'object' },\n] as const\n\nexport const propToGrammarEntry: Readonly<Record<string, GrammarEntry>> = Object.freeze(\n  Object.fromEntries(grammarEntries.map((entry) => [entry.prop, entry]))\n)\n\nexport function getTokenCategory(prop: string): TokenCategory | null {\n  return propToGrammarEntry[prop]?.tokenCategory || null\n}\n\nexport const prefixToEntries: Readonly<Record<string, readonly GrammarEntry[]>> =\n  Object.freeze(\n    grammarEntries.reduce<Record<string, GrammarEntry[]>>((out, entry) => {\n      if (!entry.prefix) return out\n      ;(out[entry.prefix] ||= []).push(entry)\n      return out\n    }, {})\n  )\n\nexport const standaloneValueProps: Readonly<\n  Record<string, Readonly<Record<string, string>>>\n> = Object.freeze({\n  display: {\n    flex: 'flex',\n    none: 'hidden',\n    block: 'block',\n    inline: 'inline',\n    grid: 'grid',\n    'inline-flex': 'inline-flex',\n  },\n  position: {\n    relative: 'relative',\n    absolute: 'absolute',\n    fixed: 'fixed',\n    sticky: 'sticky',\n    static: 'static',\n  },\n  flexDirection: {\n    row: 'flex-row',\n    column: 'flex-col',\n    'row-reverse': 'flex-row-reverse',\n    'column-reverse': 'flex-col-reverse',\n  },\n  flexWrap: {\n    wrap: 'flex-wrap',\n    nowrap: 'flex-nowrap',\n    'wrap-reverse': 'flex-wrap-reverse',\n  },\n  textTransform: {\n    uppercase: 'uppercase',\n    lowercase: 'lowercase',\n    capitalize: 'capitalize',\n    none: 'normal-case',\n  },\n  textDecorationLine: {\n    underline: 'underline',\n    'line-through': 'line-through',\n    none: 'no-underline',\n  },\n  fontStyle: {\n    italic: 'italic',\n    normal: 'not-italic',\n  },\n  borderStyle: {\n    solid: 'border-solid',\n    dashed: 'border-dashed',\n    dotted: 'border-dotted',\n    none: 'border-none',\n  },\n  alignItems: {\n    center: 'items-center',\n    'flex-start': 'items-start',\n    'flex-end': 'items-end',\n    baseline: 'items-baseline',\n    stretch: 'items-stretch',\n  },\n  alignContent: {\n    center: 'content-center',\n    'flex-start': 'content-start',\n    'flex-end': 'content-end',\n    'space-between': 'content-between',\n    'space-around': 'content-around',\n    stretch: 'content-stretch',\n  },\n  alignSelf: {\n    auto: 'self-auto',\n    center: 'self-center',\n    'flex-start': 'self-start',\n    'flex-end': 'self-end',\n    stretch: 'self-stretch',\n  },\n  justifyContent: {\n    center: 'justify-center',\n    'flex-start': 'justify-start',\n    'flex-end': 'justify-end',\n    'space-between': 'justify-between',\n    'space-around': 'justify-around',\n    'space-evenly': 'justify-evenly',\n  },\n  overflow: {\n    hidden: 'overflow-hidden',\n    scroll: 'overflow-scroll',\n    auto: 'overflow-auto',\n    visible: 'overflow-visible',\n  },\n  pointerEvents: {\n    none: 'pointer-events-none',\n    auto: 'pointer-events-auto',\n    'box-none': 'pointer-events-box-none',\n    'box-only': 'pointer-events-box-only',\n  },\n  textAlign: {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n    justify: 'text-justify',\n    start: 'text-start',\n    end: 'text-end',\n  },\n  objectFit: {\n    contain: 'object-contain',\n    cover: 'object-cover',\n    fill: 'object-fill',\n    none: 'object-none',\n    'scale-down': 'object-scale-down',\n  },\n})\n\nexport const fontWeightNames: Readonly<Record<string, string>> = Object.freeze({\n  '100': 'thin',\n  '200': 'extralight',\n  '300': 'light',\n  '400': 'normal',\n  '500': 'medium',\n  '600': 'semibold',\n  '700': 'bold',\n  '800': 'extrabold',\n  '900': 'black',\n  normal: 'normal',\n  bold: 'bold',\n})\n\nconst generatedWholeUtilities: Record<string, Record<string, string | number>> = {}\nfor (const prop in standaloneValueProps) {\n  for (const value in standaloneValueProps[prop]) {\n    generatedWholeUtilities[standaloneValueProps[prop][value]] = { [prop]: value }\n  }\n}\nfor (const value in fontWeightNames) {\n  generatedWholeUtilities[`font-${fontWeightNames[value]}`] = {\n    fontWeight: /^\\d+$/.test(value) ? value : value === 'bold' ? '700' : '400',\n  }\n}\n\nexport const wholeClassUtilities: Readonly<\n  Record<string, Readonly<Record<string, string | number>>>\n> = Object.freeze({\n  ...generatedWholeUtilities,\n  'flex-1': { flex: 1 },\n  'flex-auto': { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' },\n  'flex-initial': { flexGrow: 0, flexShrink: 1, flexBasis: 'auto' },\n  'flex-none': { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' },\n  contents: { display: 'contents' },\n  border: { borderWidth: 1 },\n  'border-t': { borderTopWidth: 1 },\n  'border-r': { borderRightWidth: 1 },\n  'border-b': { borderBottomWidth: 1 },\n  'border-l': { borderLeftWidth: 1 },\n  'border-x': { borderLeftWidth: 1, borderRightWidth: 1 },\n  'border-y': { borderTopWidth: 1, borderBottomWidth: 1 },\n  'inset-0': { top: 0, right: 0, bottom: 0, left: 0 },\n})\n\nexport const wholeClassConveniences: Readonly<Record<string, Convenience>> =\n  Object.freeze({\n    'flex-1': 'flex-bundle',\n    'flex-auto': 'flex-bundle',\n    'flex-initial': 'flex-bundle',\n    'flex-none': 'flex-bundle',\n    border: 'bare-border',\n    'border-t': 'bare-border',\n    'border-r': 'bare-border',\n    'border-b': 'bare-border',\n    'border-l': 'bare-border',\n    'border-x': 'bare-border',\n    'border-y': 'bare-border',\n    'inset-0': 'sizing-keyword',\n  })\n\nexport const borderSideSuffix: Readonly<Record<string, readonly string[]>> =\n  Object.freeze({\n    t: ['Top'],\n    r: ['Right'],\n    b: ['Bottom'],\n    l: ['Left'],\n    x: ['Left', 'Right'],\n    y: ['Top', 'Bottom'],\n  })\n\nexport const radiusCornerProps: Readonly<Record<string, readonly string[]>> =\n  Object.freeze({\n    tl: ['borderTopLeftRadius'],\n    tr: ['borderTopRightRadius'],\n    bl: ['borderBottomLeftRadius'],\n    br: ['borderBottomRightRadius'],\n    t: ['borderTopLeftRadius', 'borderTopRightRadius'],\n    b: ['borderBottomLeftRadius', 'borderBottomRightRadius'],\n    l: ['borderTopLeftRadius', 'borderBottomLeftRadius'],\n    r: ['borderTopRightRadius', 'borderBottomRightRadius'],\n  })\n\nexport const textAlignKeywords: ReadonlySet<string> = new Set([\n  'left',\n  'center',\n  'right',\n  'justify',\n  'start',\n  'end',\n])\n\nexport const percentUtilityProps: ReadonlySet<string> = new Set([\n  'opacity',\n  'scale',\n  'scaleX',\n  'scaleY',\n])\n"
+  ]
+}

package/types/resolvePayload.d.ts

@@ -0,0 +1,75 @@
+export type ReferenceKind = "color" | "length" | "number" | "other";
+/**
+* What a lookup returns for a configured token or variable. Intentionally open:
+* the variables unification (design item 11) can carry more here, and extra
+* fields ride through onto the emitted reference.
+*/
+export interface ResolvedReference {
+	/** the resolved name, which is what the serializers key on */
+	name: string;
+	kind: ReferenceKind;
+}
+/** a resolved reference in a payload, with its color opacity suffix if any */
+export type PayloadReference = ResolvedReference & {
+	/** integer 1-99; only ever present when `kind` is `color` */
+	opacity?: number;
+};
+export type PayloadSegment = string | PayloadReference;
+export type PayloadResolveErrorCode = "opacity-on-non-color" | "opacity-out-of-range";
+export interface PayloadResolveError {
+	code: PayloadResolveErrorCode;
+	/** character offset of the identifier within the payload */
+	index: number;
+	message: string;
+	/** the identifier the suffix was applied to, without the suffix */
+	name: string;
+	/** the percentage as authored, which may be out of range or fractional */
+	opacity: number;
+}
+export interface ResolvedPayload {
+	/** static text runs and references, in payload order; adjacent text collapses */
+	segments: readonly PayloadSegment[];
+	/** every reference in `segments`, same objects, in order */
+	references: readonly PayloadReference[];
+	errors: readonly PayloadResolveError[];
+}
+export interface ResolvePayloadOptions {
+	/** the property's bound token categories first, then the variables namespace */
+	lookup(name: string): ResolvedReference | undefined;
+	/**
+	* set when the property binds a numeric token category (space, size, radius,
+	* z-index). Off means bare numbers are always literal.
+	*/
+	resolveNumbers?: boolean;
+	/**
+	* tooling hook: receives every top-level candidate the resolver considered —
+	* idents and hex colors always, bare numbers when `resolveNumbers` is set —
+	* with its payload offsets and resolution. Skipped positions (strings, url()
+	* bodies, function names, custom properties) never report. The runtime path
+	* never passes this.
+	*/
+	onCandidate?(start: number, end: number, name: string, resolved: PayloadReference | undefined): void;
+}
+export declare function resolvePayload(payload: string, options: ResolvePayloadOptions): ResolvedPayload;
+export type ColorOpacitySuffix = {
+	kind: "none";
+} | {
+	kind: "valid";
+	name: string;
+	opacity: number;
+} | {
+	kind: "invalid";
+	name: string;
+	raw: string;
+};
+/**
+* The one owner of the color opacity suffix rule for WHOLE names
+* (`slate-500/50`). Every layer — flat payloads (via `readOpacitySuffix`
+* below, same rules anchored mid-payload), Tailwind candidates, and whole
+* color token values must agree: valid means an unsigned integer 0 through
+* 100; an invalid attempt is a diagnostic and is never clamped or partially
+* applied (review divergence 2).
+*/
+export declare function splitColorOpacitySuffix(value: string): ColorOpacitySuffix;
+
+//# sourceMappingURL=resolvePayload.d.ts.map

package/types/resolvePayload.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAyBA,YAAY,gBAAgB,UAAU,WAAW,WAAW;;;;;;AAO5D,iBAAiB,kBAAkB;;CAEjC;CACA,MAAM;;;AAIR,YAAY,mBAAmB,oBAAoB;;CAEjD;;AAGF,YAAY,0BAA0B;AAEtC,YAAY,0BAER,yBAEA;AAEJ,iBAAiB,oBAAoB;CACnC,MAAM;;CAEN;CACA;;CAEA;;CAEA;;AAUF,iBAAiB,gBAAgB;;CAE/B,mBAAmB;;CAEnB,qBAAqB;CACrB,iBAAiB;;AAGnB,iBAAiB,sBAAsB;;CAErC,OAAO,eAAe;;;;;CAKtB;;;;;;;;CAQA,aACE,eACA,aACA,cACA,UAAU;;AA8Ed,OAAO,iBAAS,eACd,iBACA,SAAS,wBACR;AA+MH,YAAY,qBAER;CAAE,MAAM;IAER;CAAE,MAAM;CAAS;CAAc;IAE/B;CAAE,MAAM;CAAW;CAAc;;;;;;;;;;AAarC,OAAO,iBAAS,wBAAwB,gBAAgB",
+  "names": [],
+  "sources": [
+    "src/resolvePayload.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// Config-first identifier resolution inside one clause payload.\n//\n// See plans/dom-tailwind-flat-values.md — \"the resolver's mechanical contract\".\n// Step 3 of the shared pipeline: the parser has already split the program, and\n// this turns one payload into static text runs plus reference nodes, which the\n// two serializers in ./serializePayload render for web and native. One\n// implementation serves both platforms, so resolution never bakes in a target.\n//\n// What is a candidate:\n//\n// - ident tokens anywhere, including inside function arguments, so\n//   `linear-gradient(135deg, accent, blue)` resolves `accent`;\n// - never inside a string, never inside an unquoted `url()` body, never a\n//   function name, never a `--*` custom-property reference;\n// - bare numbers only when the property binds a numeric token category, and only\n//   as a whole component value: `4 8` resolves both, `0 2px` resolves neither for\n//   box-shadow because it binds no numeric category. Numbers with units are\n//   always literal.\n//\n// A lookup miss stays literal text. Typos in literal positions are the\n// compiler's and language service's job, never a runtime guess — so with a\n// lookup that resolves nothing, both serializers reproduce the input exactly.\n\nimport { reservedCssIdents } from './valueTypes'\n\nexport type ReferenceKind = 'color' | 'length' | 'number' | 'other'\n\n/**\n * What a lookup returns for a configured token or variable. Intentionally open:\n * the variables unification (design item 11) can carry more here, and extra\n * fields ride through onto the emitted reference.\n */\nexport interface ResolvedReference {\n  /** the resolved name, which is what the serializers key on */\n  name: string\n  kind: ReferenceKind\n}\n\n/** a resolved reference in a payload, with its color opacity suffix if any */\nexport type PayloadReference = ResolvedReference & {\n  /** integer 1-99; only ever present when `kind` is `color` */\n  opacity?: number\n}\n\nexport type PayloadSegment = string | PayloadReference\n\nexport type PayloadResolveErrorCode =\n  /** the suffix is recognized only directly after a resolved color token */\n  | 'opacity-on-non-color'\n  /** a suffix on a resolved color token that is not an integer 0 through 100 */\n  | 'opacity-out-of-range'\n\nexport interface PayloadResolveError {\n  code: PayloadResolveErrorCode\n  /** character offset of the identifier within the payload */\n  index: number\n  message: string\n  /** the identifier the suffix was applied to, without the suffix */\n  name: string\n  /** the percentage as authored, which may be out of range or fractional */\n  opacity: number\n}\n\ninterface OpacitySuffix {\n  /** index just past the suffix */\n  end: number\n  /** the percentage, or null when it is not a valid integer 0 through 100 */\n  percentage: number | null\n}\n\nexport interface ResolvedPayload {\n  /** static text runs and references, in payload order; adjacent text collapses */\n  segments: readonly PayloadSegment[]\n  /** every reference in `segments`, same objects, in order */\n  references: readonly PayloadReference[]\n  errors: readonly PayloadResolveError[]\n}\n\nexport interface ResolvePayloadOptions {\n  /** the property's bound token categories first, then the variables namespace */\n  lookup(name: string): ResolvedReference | undefined\n  /**\n   * set when the property binds a numeric token category (space, size, radius,\n   * z-index). Off means bare numbers are always literal.\n   */\n  resolveNumbers?: boolean\n  /**\n   * tooling hook: receives every top-level candidate the resolver considered —\n   * idents and hex colors always, bare numbers when `resolveNumbers` is set —\n   * with its payload offsets and resolution. Skipped positions (strings, url()\n   * bodies, function names, custom properties) never report. The runtime path\n   * never passes this.\n   */\n  onCandidate?(\n    start: number,\n    end: number,\n    name: string,\n    resolved: PayloadReference | undefined\n  ): void\n}\n\n// CSS-wide keywords are case-insensitive, and the shared set spells one of them\n// camelCase (`currentColor`), so both sides of the comparison have to fold\nconst reservedFolded: ReadonlySet<string> = new Set(\n  Array.from(reservedCssIdents, (ident) => ident.toLowerCase())\n)\n\nconst noReferences: readonly PayloadReference[] = Object.freeze([])\nconst noErrors: readonly PayloadResolveError[] = Object.freeze([])\n\nconst CHAR_TAB = 9\nconst CHAR_LF = 10\nconst CHAR_FF = 12\nconst CHAR_CR = 13\nconst CHAR_SPACE = 32\nconst CHAR_PERCENT = 37\nconst CHAR_HASH = 35\nconst CHAR_DOUBLE_QUOTE = 34\nconst CHAR_SINGLE_QUOTE = 39\nconst CHAR_PAREN_OPEN = 40\nconst CHAR_PAREN_CLOSE = 41\nconst CHAR_PLUS = 43\nconst CHAR_COMMA = 44\nconst CHAR_MINUS = 45\nconst CHAR_DOT = 46\nconst CHAR_SLASH = 47\nconst CHAR_UNDERSCORE = 95\nconst CHAR_BACKSLASH = 92\nconst CHAR_E_LOWER = 101\nconst CHAR_E_UPPER = 69\n\nfunction isWhitespace(code: number): boolean {\n  return (\n    code === CHAR_SPACE ||\n    code === CHAR_TAB ||\n    code === CHAR_LF ||\n    code === CHAR_CR ||\n    code === CHAR_FF\n  )\n}\n\nfunction isDigit(code: number): boolean {\n  return code >= 48 && code <= 57\n}\n\nfunction isLetter(code: number): boolean {\n  return (code >= 97 && code <= 122) || (code >= 65 && code <= 90)\n}\n\nfunction isIdentStart(code: number): boolean {\n  return (\n    isLetter(code) ||\n    code === CHAR_UNDERSCORE ||\n    code === CHAR_MINUS ||\n    code === CHAR_BACKSLASH ||\n    // non-ascii idents are legal CSS and may name a configured token\n    code > 127\n  )\n}\n\nfunction isIdentPart(code: number): boolean {\n  return isIdentStart(code) || isDigit(code)\n}\n\n/** a component-value boundary, with -1 meaning start or end of the payload */\nfunction isBoundary(code: number): boolean {\n  return (\n    code === -1 ||\n    isWhitespace(code) ||\n    code === CHAR_COMMA ||\n    code === CHAR_PAREN_OPEN ||\n    code === CHAR_PAREN_CLOSE\n  )\n}\n\nexport function resolvePayload(\n  payload: string,\n  options: ResolvePayloadOptions\n): ResolvedPayload {\n  const { lookup, resolveNumbers = false, onCandidate } = options\n  const length = payload.length\n\n  const segments: PayloadSegment[] = []\n  let references: PayloadReference[] | null = null\n  let errors: PayloadResolveError[] | null = null\n  // start of the static run not yet pushed\n  let staticStart = 0\n\n  const codeAt = (index: number): number =>\n    index >= 0 && index < length ? payload.charCodeAt(index) : -1\n\n  const pushReference = (start: number, end: number, reference: PayloadReference) => {\n    if (start > staticStart) segments.push(payload.slice(staticStart, start))\n    segments.push(reference)\n    ;(references ||= []).push(reference)\n    staticStart = end\n  }\n\n  let index = 0\n  while (index < length) {\n    const code = payload.charCodeAt(index)\n\n    // strings are verbatim, including anything ident-shaped inside them\n    if (code === CHAR_DOUBLE_QUOTE || code === CHAR_SINGLE_QUOTE) {\n      index++\n      while (index < length) {\n        const inner = payload.charCodeAt(index)\n        if (inner === CHAR_BACKSLASH) index += 2\n        else if (inner === code) {\n          index++\n          break\n        } else index++\n      }\n      continue\n    }\n\n    // a hex color's digits are not a number token\n    if (code === CHAR_HASH) {\n      const start = index\n      index++\n      while (index < length && isIdentPart(payload.charCodeAt(index))) index++\n      onCandidate?.(start, index, payload.slice(start, index), undefined)\n      continue\n    }\n\n    // `-` before a digit is a signed number, not an ident\n    if (isIdentStart(code) && !(code === CHAR_MINUS && isDigit(codeAt(index + 1)))) {\n      const start = index\n      let end = index\n      while (end < length && isIdentPart(payload.charCodeAt(end))) {\n        end += payload.charCodeAt(end) === CHAR_BACKSLASH ? 2 : 1\n      }\n      const name = payload.slice(start, Math.min(end, length))\n\n      // a function name is never a candidate, and an unquoted url() body never\n      // resolves, so skip the whole call\n      if (codeAt(end) === CHAR_PAREN_OPEN) {\n        index = name.toLowerCase() === 'url' ? skipParens(payload, end) : end + 1\n        continue\n      }\n\n      // custom-property references stay literal\n      if (name.startsWith('--')) {\n        index = end\n        continue\n      }\n\n      // CSS-wide keywords are case-insensitive, so the reserved gate is folded.\n      // Token names themselves stay case-sensitive: only the gate folds.\n      const resolved = reservedFolded.has(name.toLowerCase()) ? undefined : lookup(name)\n\n      // a numeric run directly after the ident, ending at a component boundary,\n      // is an opacity suffix attempt. `center/50%` and `center/cover` are not\n      // attempts at all, so ordinary CSS slash forms never come near this.\n      const suffix = readOpacitySuffix(payload, end, codeAt)\n\n      if (suffix !== null && resolved?.kind === 'color') {\n        if (suffix.percentage === null) {\n          // a malformed percentage on a real color token is the user reaching for\n          // opacity and missing, so it is reported rather than emitted as text\n          ;(errors ||= []).push({\n            code: 'opacity-out-of-range',\n            index: start,\n            message: `\"${name}${payload.slice(end, suffix.end)}\" is not an opacity suffix: it must be an integer percentage from 0 through 100`,\n            name,\n            opacity: Number(payload.slice(end + 1, suffix.end)),\n          })\n          onCandidate?.(start, suffix.end, name, { ...resolved })\n          index = suffix.end\n          continue\n        }\n        const reference =\n          // 100% is the identity, so it never reaches a serializer\n          suffix.percentage === 100\n            ? { ...resolved }\n            : { ...resolved, opacity: suffix.percentage }\n        pushReference(start, suffix.end, reference)\n        onCandidate?.(start, suffix.end, name, reference)\n        index = suffix.end\n        continue\n      }\n\n      if (suffix !== null && suffix.percentage !== null) {\n        // a well-formed suffix somewhere it cannot apply: the suffix is\n        // recognized only directly after a resolved color token. The text stays\n        // literal so the payload still round-trips.\n        ;(errors ||= []).push({\n          code: 'opacity-on-non-color',\n          index: start,\n          message: resolved\n            ? `\"${name}\" is not a color token (kind: ${resolved.kind}), so the /${suffix.percentage} opacity suffix does not apply`\n            : `\"${name}\" is not a resolved color token, so the /${suffix.percentage} opacity suffix does not apply`,\n          name,\n          opacity: suffix.percentage,\n        })\n        onCandidate?.(start, end, name, resolved ? { ...resolved } : undefined)\n        index = suffix.end\n        continue\n      }\n\n      // no suffix, or a malformed one after an ident that is not a color token,\n      // which is ordinary CSS such as `font: bold small/1.2 serif`\n      if (!resolved) {\n        onCandidate?.(start, end, name, undefined)\n        index = end\n        continue\n      }\n\n      const reference = { ...resolved }\n      pushReference(start, end, reference)\n      onCandidate?.(start, end, name, reference)\n      index = end\n      continue\n    }\n\n    if (\n      isDigit(code) ||\n      code === CHAR_DOT ||\n      ((code === CHAR_PLUS || code === CHAR_MINUS) && isDigit(codeAt(index + 1)))\n    ) {\n      const start = index\n      let end = index\n      if (code === CHAR_PLUS || code === CHAR_MINUS) end++\n      while (end < length) {\n        const digit = payload.charCodeAt(end)\n        if (isDigit(digit) || digit === CHAR_DOT) end++\n        else break\n      }\n      // scientific notation stays part of the number token\n      if (codeAt(end) === CHAR_E_LOWER || codeAt(end) === CHAR_E_UPPER) {\n        let exponent = end + 1\n        if (codeAt(exponent) === CHAR_PLUS || codeAt(exponent) === CHAR_MINUS) exponent++\n        if (isDigit(codeAt(exponent))) {\n          exponent++\n          while (exponent < length && isDigit(payload.charCodeAt(exponent))) exponent++\n          end = exponent\n        }\n      }\n      const numberEnd = end\n\n      // a unit or percent sign makes it literal\n      let unitEnd = numberEnd\n      if (codeAt(unitEnd) === CHAR_PERCENT) unitEnd++\n      else while (unitEnd < length && isIdentPart(payload.charCodeAt(unitEnd))) unitEnd++\n      if (unitEnd > numberEnd) {\n        index = unitEnd\n        continue\n      }\n\n      // a number resolves only as a WHOLE component value, so it must be\n      // bounded on both sides: `4 8` resolves both, `4/8` and `12px/4` neither\n      if (\n        !resolveNumbers ||\n        !isBoundary(codeAt(start - 1)) ||\n        !isBoundary(codeAt(numberEnd))\n      ) {\n        index = numberEnd\n        continue\n      }\n\n      const name = payload.slice(start, numberEnd)\n      const resolved = lookup(name)\n      if (resolved) {\n        const reference = { ...resolved }\n        pushReference(start, numberEnd, reference)\n        onCandidate?.(start, numberEnd, name, reference)\n      } else {\n        onCandidate?.(start, numberEnd, name, undefined)\n      }\n      index = numberEnd\n      continue\n    }\n\n    index++\n  }\n\n  if (staticStart < length) segments.push(payload.slice(staticStart))\n\n  return {\n    segments,\n    references: references ?? noReferences,\n    errors: errors ?? noErrors,\n  }\n}\n\nexport type ColorOpacitySuffix =\n  /** no suffix attempt: `center/cover` and `x/50%` are ordinary CSS */\n  | { kind: 'none' }\n  /** a valid suffix: unsigned integer 0 through 100 */\n  | { kind: 'valid'; name: string; opacity: number }\n  /** an attempt that is signed, fractional, or out of range — a diagnostic, never a clamp */\n  | { kind: 'invalid'; name: string; raw: string }\n\nconst opacityAttempt = /^[+-]?\\d+(?:\\.\\d+)?$/\nconst opacityValid = /^\\d+$/\n\n/**\n * The one owner of the color opacity suffix rule for WHOLE names\n * (`slate-500/50`). Every layer — flat payloads (via `readOpacitySuffix`\n * below, same rules anchored mid-payload), Tailwind candidates, and whole\n * color token values must agree: valid means an unsigned integer 0 through\n * 100; an invalid attempt is a diagnostic and is never clamped or partially\n * applied (review divergence 2).\n */\nexport function splitColorOpacitySuffix(value: string): ColorOpacitySuffix {\n  const slash = value.lastIndexOf('/')\n  if (slash <= 0 || slash === value.length - 1) return { kind: 'none' }\n  const raw = value.slice(slash + 1)\n  if (!opacityAttempt.test(raw)) return { kind: 'none' }\n  const name = value.slice(0, slash)\n  if (opacityValid.test(raw) && Number(raw) <= 100) {\n    return { kind: 'valid', name, opacity: Number(raw) }\n  }\n  return { kind: 'invalid', name, raw }\n}\n\n/**\n * Reads a `/NN` opacity suffix attempt sitting directly on an ident. An attempt\n * is a numeric run that ends at a component boundary, so `center/cover` and\n * `center/50%` are not attempts and stay ordinary CSS. `percentage` is null when\n * the number is signed, fractional, or outside 0 through 100.\n */\nfunction readOpacitySuffix(\n  payload: string,\n  identEnd: number,\n  codeAt: (index: number) => number\n): OpacitySuffix | null {\n  if (codeAt(identEnd) !== CHAR_SLASH) return null\n  let cursor = identEnd + 1\n  let signed = false\n  if (codeAt(cursor) === CHAR_MINUS || codeAt(cursor) === CHAR_PLUS) {\n    signed = true\n    cursor++\n  }\n  const digitsStart = cursor\n  while (isDigit(codeAt(cursor))) cursor++\n  if (cursor === digitsStart) return null\n  let fractional = false\n  if (codeAt(cursor) === CHAR_DOT && isDigit(codeAt(cursor + 1))) {\n    fractional = true\n    cursor++\n    while (isDigit(codeAt(cursor))) cursor++\n  }\n  if (!isBoundary(codeAt(cursor))) return null\n  const value = Number(payload.slice(identEnd + 1, cursor))\n  const valid = !signed && !fractional && value >= 0 && value <= 100\n  return { end: cursor, percentage: valid ? value : null }\n}\n\n/** index just past the `)` matching the `(` at `open` */\nfunction skipParens(payload: string, open: number): number {\n  let depth = 0\n  let index = open\n  while (index < payload.length) {\n    const code = payload.charCodeAt(index)\n    if (code === CHAR_BACKSLASH) {\n      index += 2\n      continue\n    }\n    if (code === CHAR_DOUBLE_QUOTE || code === CHAR_SINGLE_QUOTE) {\n      index++\n      while (index < payload.length) {\n        const inner = payload.charCodeAt(index)\n        if (inner === CHAR_BACKSLASH) index += 2\n        else if (inner === code) {\n          index++\n          break\n        } else index++\n      }\n      continue\n    }\n    if (code === CHAR_PAREN_OPEN) depth++\n    else if (code === CHAR_PAREN_CLOSE) {\n      depth--\n      if (depth === 0) return index + 1\n    }\n    index++\n  }\n  return payload.length\n}\n"
+  ]
+}

package/types/runtime.d.ts

@@ -0,0 +1,34 @@
+export * from "./backgroundFamily";
+export * from "./borderFamily";
+export * from "./candidate";
+export * from "./candidateTarget";
+export * from "./clausePrecedence";
+export * from "./clauseSources";
+export * from "./config";
+export * from "./evaluateProgram";
+export * from "./fontShorthand";
+export * from "./geometricShorthand";
+export * from "./lowerProgram";
+export * from "./mergeFlatValues";
+export * from "./modifierRegistry";
+export * from "./payloadShape";
+export * from "./programEligibility";
+export * from "./programHash";
+export * from "./programs";
+export * from "./registry";
+export * from "./resolvePayload";
+export * from "./safeAreaVariables";
+export * from "./scanFlatValue";
+export * from "./stateModifiers";
+export * from "./serializePayload";
+export * from "./states";
+export * from "./textDecorationFamily";
+export * from "./transformFamily";
+export * from "./transition";
+export * from "./transitionAlign";
+export * from "./transitionNative";
+export * from "./valueParser";
+export * from "./valueTypes";
+export * from "./unitlessNumbers";
+
+//# sourceMappingURL=runtime.d.ts.map

package/types/runtime.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc",
+  "names": [],
+  "sources": [
+    "src/runtime.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "export * from './backgroundFamily'\nexport * from './borderFamily'\nexport * from './candidate'\nexport * from './candidateTarget'\nexport * from './clausePrecedence'\nexport * from './clauseSources'\nexport * from './config'\nexport * from './evaluateProgram'\nexport * from './fontShorthand'\nexport * from './geometricShorthand'\nexport * from './lowerProgram'\nexport * from './mergeFlatValues'\nexport * from './modifierRegistry'\nexport * from './payloadShape'\nexport * from './programEligibility'\nexport * from './programHash'\nexport * from './programs'\nexport * from './registry'\nexport * from './resolvePayload'\nexport * from './safeAreaVariables'\nexport * from './scanFlatValue'\nexport * from './stateModifiers'\nexport * from './serializePayload'\nexport * from './states'\nexport * from './textDecorationFamily'\nexport * from './transformFamily'\nexport * from './transition'\nexport * from './transitionAlign'\nexport * from './transitionNative'\nexport * from './valueParser'\nexport * from './valueTypes'\nexport * from './unitlessNumbers'\n"
+  ]
+}

package/types/safeAreaVariables.d.ts

@@ -0,0 +1,5 @@
+export type SafeAreaEdge = "top" | "right" | "bottom" | "left";
+export declare const safeAreaVariableNames: Readonly<Record<SafeAreaEdge, string>>;
+export declare function getSafeAreaEdge(name: string): SafeAreaEdge | undefined;
+
+//# sourceMappingURL=safeAreaVariables.d.ts.map

package/types/safeAreaVariables.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,YAAY,eAAe,QAAQ,UAAU,WAAW;AAExD,OAAO,cAAM,uBAAuB,SAAS,OAAO;AAcpD,OAAO,iBAAS,gBAAgB,eAAe",
+  "names": [],
+  "sources": [
+    "src/safeAreaVariables.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left'\n\nexport const safeAreaVariableNames: Readonly<Record<SafeAreaEdge, string>> = {\n  top: 'safe-area-top',\n  right: 'safe-area-right',\n  bottom: 'safe-area-bottom',\n  left: 'safe-area-left',\n}\n\nconst safeAreaEdges: Readonly<Record<string, SafeAreaEdge>> = {\n  [safeAreaVariableNames.top]: 'top',\n  [safeAreaVariableNames.right]: 'right',\n  [safeAreaVariableNames.bottom]: 'bottom',\n  [safeAreaVariableNames.left]: 'left',\n}\n\nexport function getSafeAreaEdge(name: string): SafeAreaEdge | undefined {\n  return safeAreaEdges[name]\n}\n"
+  ]
+}

package/types/scanFlatValue.d.ts

@@ -0,0 +1,29 @@
+export type FlatScanErrorCode = "invalid-character" | "unterminated-string" | "unterminated-function" | "unterminated-comment" | "stray-comment-close";
+/** why a scan stopped short, or null when it ran to the end cleanly */
+export type FlatScanFailure = FlatScanErrorCode | "refused-chain";
+export interface FlatValueVisitor {
+	/**
+	* The base, or one clause's payload, just ended. `start` and `end` are
+	* already trimmed, and `start === end` means the segment is empty: an empty
+	* base is simply no base, an empty payload is a clause with nothing in it.
+	*/
+	segment(start: number, end: number, isBase: boolean): void;
+	/**
+	* A modifier chain just ended, without its trailing colon, so
+	* `source.slice(start, end)` is `dark:hover` for `dark:hover:red`. Returning
+	* false stops the scan: the consumer has refused the value and does not want
+	* later chains resolved.
+	*/
+	chain(start: number, end: number): boolean;
+	/**
+	* A character the grammar refuses, or a delimiter left open at the end. The
+	* scan continues, so a consumer that only wants the first one records it and
+	* refuses the next chain.
+	*/
+	error?(code: FlatScanErrorCode, index: number): void;
+	/** every top-level word, whether or not it turned out to carry a chain */
+	word?(start: number, end: number, isChain: boolean): void;
+}
+export declare function scanFlatValue(source: string, visitor: FlatValueVisitor): FlatScanFailure | null;
+
+//# sourceMappingURL=scanFlatValue.d.ts.map

package/types/scanFlatValue.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAiFA,YAAY,oBACR,sBACA,wBACA,0BACA,yBACA;;AAGJ,YAAY,kBAAkB,oBAAoB;AAElD,iBAAiB,iBAAiB;;;;;;CAMhC,QAAQ,eAAe,aAAa;;;;;;;CAOpC,MAAM,eAAe;;;;;;CAMrB,OAAO,MAAM,mBAAmB;;CAEhC,MAAM,eAAe,aAAa;;AAiEpC,OAAO,iBAAS,cACd,gBACA,SAAS,mBACR",
+  "names": [],
+  "sources": [
+    "src/scanFlatValue.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// The one flat-value lexer.\n//\n//   value  := base? clause*\n//   clause := modifier (\":\" modifier)* \":\" payload\n//\n// Every implementation of this grammar splits a value the same way, so the\n// split lives here once and every consumer drives it with a visitor:\n// `parseValue` builds the canonical result on top of it, and the web runtime's\n// style, variant and lifecycle scanners drive it directly so that what they\n// consume cannot drift from what the canonical parser says the value means.\n//\n// The visitor gets index ranges, never slices. A style prop is scanned on every\n// render it is not classed away, so the scan itself allocates nothing and the\n// consumer slices only what it keeps.\n//\n// Clause detection is purely syntactic. A colon counts only at the top level:\n// outside strings, outside comments, outside `url()` and outside every paren\n// nesting, which covers every other function. A top-level colon is never valid\n// inside a CSS value, so an unregistered modifier is a hard error rather than\n// silent value content.\n//\n// A top-level `{`, `}`, or `;` is rejected for the same reason: those tokens are\n// never valid in a CSS component value. Inside strings, comments, `url()` and\n// parens they stay ordinary content.\n//\n// The states below mirror CSS's tokenizer rather than approximating it, because\n// the whole class of bugs here has been the scan believing it was inside a\n// construct the tokenizer had already left:\n//\n//   - a comment outranks paren depth, because comments are lexical. `/*` opens\n//     one at ANY depth, since `calc(1px /* pad */ + 2px)` is real CSS. It runs\n//     to `*/` however many lines that takes and holds no escapes: `\\*/` still\n//     closes it. A comment is opaque content belonging to whatever segment it\n//     sits in, so a colon inside one is not a clause boundary and a `;` inside\n//     one is not a refused character.\n//   - a string outranks a comment opener: `\"/*\"` is a two-character string.\n//   - a comment outranks a quote: a `\"` inside one is just text.\n//   - `url(` outranks BOTH. It is the one function CSS does not tokenize: no\n//     comments, no strings, only an escape and the `)` that ends it.\n//     `url(\"...\")` is an ordinary function whose string IS real, so the quote\n//     lookahead in `opensUrlToken` has to tell the two apart.\n//   - a backslash escapes its next character everywhere except inside a comment.\n//\n// Containment is only real if the delimiter actually closes, so an unbalanced\n// value is an error rather than trusted for a containment the emitted CSS will\n// not honour:\n//\n//   - a string. CSS ends an unterminated one at a NEWLINE, as a parse error, so\n//     `\"abc\\n;}.x{y\"` would read quoted end to end to a naive scan while the\n//     browser reads a bad string, a top-level `;}` and a new rule. The scan\n//     reports the error at the opening quote and RESUMES at the newline, so the\n//     `;}` is seen where the browser sees it. A backslash before the newline is\n//     a line continuation and does stay inside the string, which is why the\n//     escape branch is checked first.\n//   - a comment. `red/*` opens one that swallows whatever follows it, and\n//     `insertStyleRule`'s `getAllRules` joins rules into one blob that SSR emits\n//     as a single style tag, so an unclosed comment blanks other components'\n//     rules until some later `*/` turns them back on.\n//   - a `*/` with nothing open, at any depth, closes a comment somewhere else in\n//     that same blob.\n//\n// This runs at runtime on native, so it is one left-to-right pass with no\n// regexes and no substrings.\n\nconst CHAR_TAB = 9\nconst CHAR_LF = 10\nconst CHAR_FF = 12\nconst CHAR_CR = 13\nconst CHAR_SPACE = 32\nconst CHAR_DOUBLE_QUOTE = 34\nconst CHAR_SINGLE_QUOTE = 39\nconst CHAR_PAREN_OPEN = 40\nconst CHAR_PAREN_CLOSE = 41\nconst CHAR_STAR = 42\nconst CHAR_SLASH = 47\nconst CHAR_SEMICOLON = 59\nconst CHAR_COLON = 58\nconst CHAR_BACKSLASH = 92\nconst CHAR_BRACE_OPEN = 123\nconst CHAR_BRACE_CLOSE = 125\n\nexport type FlatScanErrorCode =\n  | 'invalid-character'\n  | 'unterminated-string'\n  | 'unterminated-function'\n  | 'unterminated-comment'\n  | 'stray-comment-close'\n\n/** why a scan stopped short, or null when it ran to the end cleanly */\nexport type FlatScanFailure = FlatScanErrorCode | 'refused-chain'\n\nexport interface FlatValueVisitor {\n  /**\n   * The base, or one clause's payload, just ended. `start` and `end` are\n   * already trimmed, and `start === end` means the segment is empty: an empty\n   * base is simply no base, an empty payload is a clause with nothing in it.\n   */\n  segment(start: number, end: number, isBase: boolean): void\n  /**\n   * A modifier chain just ended, without its trailing colon, so\n   * `source.slice(start, end)` is `dark:hover` for `dark:hover:red`. Returning\n   * false stops the scan: the consumer has refused the value and does not want\n   * later chains resolved.\n   */\n  chain(start: number, end: number): boolean\n  /**\n   * A character the grammar refuses, or a delimiter left open at the end. The\n   * scan continues, so a consumer that only wants the first one records it and\n   * refuses the next chain.\n   */\n  error?(code: FlatScanErrorCode, index: number): void\n  /** every top-level word, whether or not it turned out to carry a chain */\n  word?(start: number, end: number, isChain: boolean): void\n}\n\nfunction isWhitespace(code: number): boolean {\n  return (\n    code === CHAR_SPACE ||\n    code === CHAR_TAB ||\n    code === CHAR_LF ||\n    code === CHAR_CR ||\n    code === CHAR_FF\n  )\n}\n\n/**\n * `index` points at the `(`. A url token is the ident `url` followed directly by\n * it, with no ident character before the `u` (`myurl(` is an ordinary function)\n * and no quote after it (`url(\"a\")` is one too).\n */\nfunction opensUrlToken(source: string, index: number): boolean {\n  if (index < 3) return false\n  if (\n    (source.charCodeAt(index - 3) | 32) !== 117 ||\n    (source.charCodeAt(index - 2) | 32) !== 114 ||\n    (source.charCodeAt(index - 1) | 32) !== 108\n  ) {\n    return false\n  }\n  const before = index > 3 ? source.charCodeAt(index - 4) : 0\n  if (\n    before === 45 ||\n    before === 95 ||\n    before >= 128 ||\n    (before >= 48 && before <= 57) ||\n    (before >= 65 && before <= 90) ||\n    (before >= 97 && before <= 122)\n  ) {\n    return false\n  }\n  let next = index + 1\n  while (next < source.length && source.charCodeAt(next) <= 32) next++\n  const quote = source.charCodeAt(next)\n  return quote !== CHAR_DOUBLE_QUOTE && quote !== CHAR_SINGLE_QUOTE\n}\n\n/**\n * Closes the base (before any clause) or the payload of the pending clause.\n *\n * A module function rather than a closure over the scan: a style prop is\n * scanned on every render it is not classed away, and one closure per scan is\n * one allocation per prop per render for nothing.\n */\nfunction closeSegment(\n  source: string,\n  visitor: FlatValueVisitor,\n  segmentStart: number,\n  end: number,\n  isBase: boolean\n): void {\n  let start = segmentStart\n  let stop = end\n  while (start < stop && isWhitespace(source.charCodeAt(start))) start++\n  while (stop > start && isWhitespace(source.charCodeAt(stop - 1))) stop--\n  visitor.segment(start, stop, isBase)\n}\n\nexport function scanFlatValue(\n  source: string,\n  visitor: FlatValueVisitor\n): FlatScanFailure | null {\n  const length = source.length\n\n  let failure: FlatScanFailure | null = null\n  let sawChain = false\n  // where the base, or the current payload, starts\n  let segmentStart = 0\n\n  // scanner state: in a comment, in a string, in a url token, inside parens, or\n  // at the top level\n  let comment = false\n  let commentStart = -1\n  let quote = 0\n  let quoteStart = -1\n  let url = false\n  let depth = 0\n  let parenStart = -1\n  // the top-level word being scanned, and the last top-level colon inside it\n  let wordStart = -1\n  let lastColon = -1\n\n  for (let index = 0; index < length; index++) {\n    const code = source.charCodeAt(index)\n\n    if (comment) {\n      // no escapes inside a comment: `\\*/` still closes it\n      if (code === CHAR_STAR && source.charCodeAt(index + 1) === CHAR_SLASH) {\n        comment = false\n        index++\n      }\n      continue\n    }\n\n    if (quote !== 0) {\n      // inside a string an unescaped matching quote ends it, and a newline ends\n      // it as a parse error the browser sees the same way\n      if (code === CHAR_BACKSLASH) index++\n      else if (code === quote) quote = 0\n      else if (code === CHAR_LF || code === CHAR_CR || code === CHAR_FF) {\n        if (failure === null) failure = 'unterminated-string'\n        if (visitor.error !== undefined) visitor.error('unterminated-string', quoteStart)\n        quote = 0\n        // re-read the newline at top level, where it is ordinary whitespace\n        index--\n      }\n      continue\n    }\n\n    if (url) {\n      // the one function CSS does not tokenize: only an escape and the `)`\n      if (code === CHAR_BACKSLASH) index++\n      else if (code === CHAR_PAREN_CLOSE) {\n        url = false\n        depth--\n      }\n      continue\n    }\n\n    // comments are lexical, so they open at any depth and outrank paren nesting\n    if (code === CHAR_SLASH && source.charCodeAt(index + 1) === CHAR_STAR) {\n      comment = true\n      commentStart = index\n      index++\n      continue\n    }\n    if (code === CHAR_STAR && source.charCodeAt(index + 1) === CHAR_SLASH) {\n      if (failure === null) failure = 'stray-comment-close'\n      if (visitor.error !== undefined) visitor.error('stray-comment-close', index)\n      index++\n      continue\n    }\n\n    if (depth > 0) {\n      // inside parens whitespace and colons are ordinary content\n      if (code === CHAR_BACKSLASH) index++\n      else if (code === CHAR_DOUBLE_QUOTE || code === CHAR_SINGLE_QUOTE) {\n        quote = code\n        quoteStart = index\n      } else if (code === CHAR_PAREN_OPEN) {\n        if (opensUrlToken(source, index)) url = true\n        depth++\n      } else if (code === CHAR_PAREN_CLOSE) depth--\n      continue\n    }\n\n    if (isWhitespace(code)) {\n      if (wordStart !== -1) {\n        if (visitor.word !== undefined) visitor.word(wordStart, index, lastColon !== -1)\n        if (lastColon !== -1) {\n          closeSegment(source, visitor, segmentStart, wordStart, !sawChain)\n          if (!visitor.chain(wordStart, lastColon)) return 'refused-chain'\n          sawChain = true\n          segmentStart = lastColon + 1\n        }\n        wordStart = -1\n        lastColon = -1\n      }\n      continue\n    }\n\n    // any other top-level character starts or continues a word\n    if (wordStart === -1) wordStart = index\n\n    if (\n      code === CHAR_BRACE_OPEN ||\n      code === CHAR_BRACE_CLOSE ||\n      code === CHAR_SEMICOLON\n    ) {\n      if (failure === null) failure = 'invalid-character'\n      if (visitor.error !== undefined) visitor.error('invalid-character', index)\n    } else if (code === CHAR_BACKSLASH) index++\n    else if (code === CHAR_DOUBLE_QUOTE || code === CHAR_SINGLE_QUOTE) {\n      quote = code\n      quoteStart = index\n    } else if (code === CHAR_PAREN_OPEN) {\n      if (opensUrlToken(source, index)) url = true\n      depth = 1\n      parenStart = index\n    } else if (code === CHAR_COLON) lastColon = index\n  }\n\n  if (comment) {\n    if (failure === null) failure = 'unterminated-comment'\n    if (visitor.error !== undefined) visitor.error('unterminated-comment', commentStart)\n  }\n  if (quote !== 0) {\n    if (failure === null) failure = 'unterminated-string'\n    if (visitor.error !== undefined) visitor.error('unterminated-string', quoteStart)\n  }\n  if (depth > 0) {\n    if (failure === null) failure = 'unterminated-function'\n    if (visitor.error !== undefined) visitor.error('unterminated-function', parenStart)\n  }\n\n  if (wordStart !== -1) {\n    if (visitor.word !== undefined) visitor.word(wordStart, length, lastColon !== -1)\n    if (lastColon !== -1) {\n      closeSegment(source, visitor, segmentStart, wordStart, !sawChain)\n      if (!visitor.chain(wordStart, lastColon)) return 'refused-chain'\n      sawChain = true\n      segmentStart = lastColon + 1\n    }\n  }\n  closeSegment(source, visitor, segmentStart, length, !sawChain)\n\n  return failure\n}\n"
+  ]
+}

package/types/serializePayload.d.ts

@@ -0,0 +1,13 @@
+import type { ResolvedPayload } from "./resolvePayload";
+export declare function serializePayloadWeb(resolved: ResolvedPayload, toVar: (name: string) => string): string;
+export interface SerializeNativeOptions {
+	/**
+	* `px-to-number` finalizes a single `<number>px` result to the bare number,
+	* which React Native requires for length props. Whether a property takes
+	* unitless numbers is property-table knowledge, so it stays with the caller.
+	*/
+	unit?: "px-to-number";
+}
+export declare function serializePayloadNative(resolved: ResolvedPayload, get: (name: string) => string | number, opts?: SerializeNativeOptions): string | number;
+
+//# sourceMappingURL=serializePayload.d.ts.map

package/types/serializePayload.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAiBA,cAAgC,uBAAuB;AAEvD,OAAO,iBAAS,oBACd,UAAU,iBACV,QAAQ;AAiBV,iBAAiB,uBAAuB;;;;;;CAMtC,OAAO;;AAGT,OAAO,iBAAS,uBACd,UAAU,iBACV,MAAM,kCACN,OAAO",
+  "names": [],
+  "sources": [
+    "src/serializePayload.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// The two serializers over a ResolvedPayload: one representation, two targets.\n//\n// See plans/dom-tailwind-flat-values.md — \"the resolver's mechanical contract\".\n// Web joins references as `var(--name)` so theme switches stay zero-re-render,\n// and a color opacity suffix becomes `color-mix(in srgb, var(--name) NN%,\n// transparent)`, which keeps opacity variants theme-reactive without generating\n// per-alpha variables. Native looks references up through the granular theme\n// subscription at evaluate time and alpha-composes the color right there.\n//\n// Both spellings match what core already emits: the `color-mix` form is\n// `normalizeColor` on web, and the `rgba(r,g,b,a)` form is `normalizeColor` on\n// native. Neither is imported — this package stays dependency-free.\n//\n// With a payload whose references are empty (every lookup missed), both\n// functions return the input string byte for byte, which is what makes literal\n// CSS provably untouched.\n\nimport type { PayloadReference, ResolvedPayload } from './resolvePayload'\n\nexport function serializePayloadWeb(\n  resolved: ResolvedPayload,\n  toVar: (name: string) => string\n): string {\n  let out = ''\n  for (const segment of resolved.segments) {\n    if (typeof segment === 'string') {\n      out += segment\n      continue\n    }\n    const variable = toVar(segment.name)\n    out +=\n      segment.opacity === undefined\n        ? variable\n        : `color-mix(in srgb, ${variable} ${segment.opacity}%, transparent)`\n  }\n  return out\n}\n\nexport interface SerializeNativeOptions {\n  /**\n   * `px-to-number` finalizes a single `<number>px` result to the bare number,\n   * which React Native requires for length props. Whether a property takes\n   * unitless numbers is property-table knowledge, so it stays with the caller.\n   */\n  unit?: 'px-to-number'\n}\n\nexport function serializePayloadNative(\n  resolved: ResolvedPayload,\n  get: (name: string) => string | number,\n  opts?: SerializeNativeOptions\n): string | number {\n  let out = ''\n  for (const segment of resolved.segments) {\n    if (typeof segment === 'string') {\n      out += segment\n      continue\n    }\n    const value = get(segment.name)\n    out += segment.opacity === undefined ? value : composeAlpha(value, segment)\n  }\n  return finalizeNumeric(out, opts?.unit)\n}\n\n/**\n * Alpha-composes a resolved color so native matches what `color-mix(in srgb, C\n * NN%, transparent)` produces on web: the suffix scales the color's existing\n * alpha rather than replacing it.\n */\nfunction composeAlpha(value: string | number, reference: PayloadReference): string {\n  const parsed = typeof value === 'string' ? readColor(value) : null\n  if (!parsed) {\n    throw new Error(\n      `cannot apply the /${reference.opacity} opacity suffix to \"${reference.name}\": ` +\n        `its value ${JSON.stringify(value)} is not a #hex, rgb(), or rgba() color`\n    )\n  }\n  const alpha = round4(parsed.a * (reference.opacity! / 100))\n  return `rgba(${parsed.r},${parsed.g},${parsed.b},${alpha})`\n}\n\ninterface Rgba {\n  r: number\n  g: number\n  b: number\n  a: number\n}\n\nfunction readColor(input: string): Rgba | null {\n  const color = input.trim()\n  if (color.charCodeAt(0) === 35) return readHex(color)\n\n  const open = color.indexOf('(')\n  if (open === -1 || color.charCodeAt(color.length - 1) !== 41) return null\n  const fn = color.slice(0, open).toLowerCase()\n  if (fn !== 'rgb' && fn !== 'rgba') return null\n\n  const parts = color.slice(open + 1, -1).split(',')\n  if (parts.length !== 3 && parts.length !== 4) return null\n\n  const channels: number[] = []\n  for (let index = 0; index < 3; index++) {\n    const channel = readNumber(parts[index])\n    // percentage channels would need a second scale; not supported here\n    if (channel === null) return null\n    channels.push(clamp(Math.round(channel), 0, 255))\n  }\n  let alpha = 1\n  if (parts.length === 4) {\n    const parsedAlpha = readNumber(parts[3])\n    if (parsedAlpha === null) return null\n    alpha = clamp(parsedAlpha, 0, 1)\n  }\n  return { r: channels[0], g: channels[1], b: channels[2], a: alpha }\n}\n\nfunction readHex(color: string): Rgba | null {\n  const digits = color.slice(1)\n  const size = digits.length\n  if (size !== 3 && size !== 4 && size !== 6 && size !== 8) return null\n  for (let index = 0; index < size; index++) {\n    const code = digits.charCodeAt(index)\n    const isHex =\n      (code >= 48 && code <= 57) ||\n      (code >= 97 && code <= 102) ||\n      (code >= 65 && code <= 70)\n    if (!isHex) return null\n  }\n  const short = size === 3 || size === 4\n  const pair = (position: number): number =>\n    short\n      ? Number.parseInt(digits[position].repeat(2), 16)\n      : Number.parseInt(digits.slice(position * 2, position * 2 + 2), 16)\n  const hasAlpha = size === 4 || size === 8\n  return {\n    r: pair(0),\n    g: pair(1),\n    b: pair(2),\n    a: hasAlpha ? round4(pair(3) / 255) : 1,\n  }\n}\n\nfunction readNumber(text: string): number | null {\n  const trimmed = text.trim()\n  if (!trimmed) return null\n  for (let index = 0; index < trimmed.length; index++) {\n    const code = trimmed.charCodeAt(index)\n    const ok =\n      (code >= 48 && code <= 57) ||\n      code === 46 || // .\n      ((code === 45 || code === 43) && index === 0) // leading sign\n    if (!ok) return null\n  }\n  const value = Number(trimmed)\n  return Number.isFinite(value) ? value : null\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return value < min ? min : value > max ? max : value\n}\n\n/** 8-bit alpha needs nowhere near this much precision; this just kills float noise */\nfunction round4(value: number): number {\n  return Math.round(value * 10000) / 10000\n}\n\n/**\n * React Native wants bare numbers for numeric props, so a result that is exactly\n * one plain number becomes a number, and `<number>px` becomes one when the\n * caller says this property's lengths are unitless.\n */\nfunction finalizeNumeric(out: string, unit: 'px-to-number' | undefined): string | number {\n  let end = out.length\n  if (unit === 'px-to-number' && end > 2 && out.endsWith('px')) end -= 2\n  if (end === 0) return out\n\n  let index = 0\n  const first = out.charCodeAt(0)\n  if (first === 45 || first === 43) index++\n  let digits = 0\n  let dots = 0\n  for (; index < end; index++) {\n    const code = out.charCodeAt(index)\n    if (code >= 48 && code <= 57) {\n      digits++\n      continue\n    }\n    if (code === 46) {\n      dots++\n      if (dots > 1) return out\n      continue\n    }\n    return out\n  }\n  if (digits === 0) return out\n\n  const value = Number(out.slice(0, end))\n  return Number.isFinite(value) ? value : out\n}\n"
+  ]
+}

package/types/stateModifiers.d.ts

@@ -0,0 +1,14 @@
+export type CoreStateModifierName = "hover" | "press" | "focus" | "focus-visible" | "focus-within" | "disabled" | "enter" | "exit";
+export declare const coreStateModifierNames: readonly CoreStateModifierName[];
+/**
+* Every alternate spelling of a core state modifier, and the one it means.
+*
+* This table is the only place an alias is written down. The web runtime used
+* to re-map `pressed`, `starting` and `ending` inline while resolving a
+* condition, which meant `parseValue` reported them as unregistered modifiers
+* and the runtime styled them anyway. `stateVocabulary` in states.ts already
+* calls all four aliases, so the two tables now agree by construction.
+*/
+export declare const modifierAliases: Readonly<Record<string, string>>;
+
+//# sourceMappingURL=stateModifiers.d.ts.map

package/types/stateModifiers.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,YAAY,wBACR,UACA,UACA,UACA,kBACA,iBACA,aACA,UACA;AAEJ,OAAO,cAAM,iCAAiC;;;;;;;;;;AAoB9C,OAAO,cAAM,iBAAiB,SAAS",
+  "names": [],
+  "sources": [
+    "src/stateModifiers.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "export type CoreStateModifierName =\n  | 'hover'\n  | 'press'\n  | 'focus'\n  | 'focus-visible'\n  | 'focus-within'\n  | 'disabled'\n  | 'enter'\n  | 'exit'\n\nexport const coreStateModifierNames: readonly CoreStateModifierName[] = Object.freeze([\n  'hover',\n  'press',\n  'focus',\n  'focus-visible',\n  'focus-within',\n  'disabled',\n  'enter',\n  'exit',\n])\n\n/**\n * Every alternate spelling of a core state modifier, and the one it means.\n *\n * This table is the only place an alias is written down. The web runtime used\n * to re-map `pressed`, `starting` and `ending` inline while resolving a\n * condition, which meant `parseValue` reported them as unregistered modifiers\n * and the runtime styled them anyway. `stateVocabulary` in states.ts already\n * calls all four aliases, so the two tables now agree by construction.\n */\nexport const modifierAliases: Readonly<Record<string, string>> = Object.freeze({\n  active: 'press',\n  pressed: 'press',\n  starting: 'enter',\n  ending: 'exit',\n})\n"
+  ]
+}

package/types/states.d.ts

@@ -0,0 +1,22 @@
+export type StateTier = "pseudo" | "component";
+export interface StateEntry {
+	/** canonical state name — the vocabulary word. */
+	state: string;
+	/** how the state is applied: a core interaction state, or a DOM attribute. */
+	tier: StateTier;
+	/** canonical Tailwind modifier (e.g. 'press', 'data-[state=open]'). */
+	modifier: string;
+	/** the web attribute selector the behavior emits (tier === 'component'). */
+	selector?: string;
+	/** additional modifier spellings that resolve to the canonical one. */
+	aliases?: readonly string[];
+}
+export declare const stateVocabulary: readonly StateEntry[];
+export type StateName = (typeof stateVocabulary)[number]["state"];
+export declare const stateNames: readonly string[];
+export declare const stateToModifier: Readonly<Record<string, string>>;
+export declare const modifierToState: Readonly<Record<string, string>>;
+export declare const stateToSelector: Readonly<Record<string, string>>;
+export declare const componentStateNames: readonly string[];
+
+//# sourceMappingURL=states.d.ts.map