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

package/src/scanFlatValue.ts

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

package/src/serializePayload.ts

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

package/src/stateModifiers.ts

@@ -0,0 +1,36 @@
+export type CoreStateModifierName =
+  | 'hover'
+  | 'press'
+  | 'focus'
+  | 'focus-visible'
+  | 'focus-within'
+  | 'disabled'
+  | 'enter'
+  | 'exit'
+
+export const coreStateModifierNames: readonly CoreStateModifierName[] = Object.freeze([
+  'hover',
+  'press',
+  'focus',
+  'focus-visible',
+  'focus-within',
+  'disabled',
+  'enter',
+  'exit',
+])
+
+/**
+ * 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 const modifierAliases: Readonly<Record<string, string>> = Object.freeze({
+  active: 'press',
+  pressed: 'press',
+  starting: 'enter',
+  ending: 'exit',
+})

package/src/states.ts

@@ -0,0 +1,128 @@
+// A1 — the shared STATE VOCABULARY + style-grammar modifiers.
+//
+// The canonical set of states a styled skin can respond to and how each maps to
+// a Tailwind modifier. The registry generator reads this table as the single
+// source of truth for stateful styles.
+//
+// Two tiers:
+//  - `pseudo`: a core interaction or lifecycle state applies at runtime.
+//  - `component`: the behavior toggles a web data/aria attribute and the skin
+//    styles through that selector. No core pseudo-prop — the Tailwind modifier is
+//    an attribute variant (`data-[…]` / `aria-…`).
+
+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[]
+}
+
+// The eight-state vocabulary (open/checked/pressed/highlighted/disabled/invalid/
+// starting/ending). hover/focus/focus-visible/focus-within are interaction
+// states outside the eight but compose the same way.
+export const stateVocabulary: readonly StateEntry[] = [
+  // tier 1 — interaction / lifecycle. The state word can differ from the modifier word
+  // (pressed→press, starting→enter, ending→exit).
+  {
+    state: 'pressed',
+    tier: 'pseudo',
+    modifier: 'press',
+    aliases: ['active', 'pressed'],
+  },
+  {
+    state: 'disabled',
+    tier: 'pseudo',
+    modifier: 'disabled',
+  },
+  {
+    state: 'starting',
+    tier: 'pseudo',
+    modifier: 'enter',
+    aliases: ['starting'],
+  },
+  {
+    state: 'ending',
+    tier: 'pseudo',
+    modifier: 'exit',
+    aliases: ['ending'],
+  },
+  // tier 2 — component / ARIA states (behavior-driven attributes).
+  {
+    state: 'open',
+    tier: 'component',
+    modifier: 'data-[state=open]',
+    selector: '[data-state="open"]',
+  },
+  {
+    state: 'checked',
+    tier: 'component',
+    modifier: 'data-[state=checked]',
+    selector: '[data-state="checked"]',
+    aliases: ['data-[state=on]', 'aria-checked'],
+  },
+  {
+    state: 'highlighted',
+    tier: 'component',
+    modifier: 'data-[highlighted]',
+    selector: '[data-highlighted]',
+  },
+  {
+    // item selection (Select/RadioGroup items, ToggleGroup) — the behavior emits
+    // data-state="active"/"inactive"; distinct from `checked`. The bare word
+    // `active` is NOT an alias here (it stays an alias of `pressed`).
+    state: 'selected',
+    tier: 'component',
+    modifier: 'data-[state=active]',
+    selector: '[data-state="active"]',
+  },
+  {
+    state: 'invalid',
+    tier: 'component',
+    modifier: 'aria-invalid',
+    selector: '[aria-invalid="true"]',
+    aliases: ['data-[invalid]'],
+  },
+] as const
+
+export type StateName = (typeof stateVocabulary)[number]['state']
+
+export const stateNames: readonly string[] = Object.freeze(
+  stateVocabulary.map((entry) => entry.state)
+)
+
+// state name -> canonical Tailwind modifier.
+export const stateToModifier: Readonly<Record<string, string>> = Object.freeze(
+  Object.fromEntries(stateVocabulary.map((entry) => [entry.state, entry.modifier]))
+)
+
+// any recognized modifier spelling (canonical or alias) -> canonical state name.
+export const modifierToState: Readonly<Record<string, string>> = Object.freeze(
+  stateVocabulary.reduce<Record<string, string>>((out, entry) => {
+    out[entry.modifier] = entry.state
+    for (const alias of entry.aliases ?? []) out[alias] = entry.state
+    return out
+  }, {})
+)
+
+// state name -> web attribute selector (component-tier states only).
+export const stateToSelector: Readonly<Record<string, string>> = Object.freeze(
+  Object.fromEntries(
+    stateVocabulary
+      .filter((entry) => entry.selector)
+      .map((entry) => [entry.state, entry.selector as string])
+  )
+)
+
+export const componentStateNames: readonly string[] = Object.freeze(
+  stateVocabulary
+    .filter((entry) => entry.tier === 'component')
+    .map((entry) => entry.state)
+)