zyzz 0.0.3 → 0.0.5

package/src/compiler/internal/Compositions.ts

@@ -193,6 +193,7 @@ export function collect(options: collect.Options) {
   )) {
     const selected: Source.Call[] = []
     const inputs: NonNullable<Source.Call['runtimeComposition']>[number][] = []
+    const outputs = new Set<'html' | undefined>()
     let runtime = false
     let conditions = 0
     const attributes = new Map<string, string>()
@@ -256,7 +257,6 @@ export function collect(options: collect.Options) {
       const resolved = bindings.resolve(expression, nodes)
       const conditional =
         resolved.type === 'LogicalExpression' && resolved.operator === '&&'
-      const condition = conditional ? conditions++ : undefined
       const value = conditional
         ? bindings.resolve(resolved.right, nodes)
         : resolved
@@ -305,6 +305,19 @@ export function collect(options: collect.Options) {
           'Composition requires statically known local style applications.',
           value,
         )
+      const scope = options.scopes?.get(value.start)
+      if (scope?.end === value.end) {
+        outputs.add(scope.output)
+        inputs.push({
+          start: expression.start,
+          end: expression.end,
+          name: '',
+          owners: [],
+        })
+        runtime = true
+        continue
+      }
+      const condition = conditional ? conditions++ : undefined
       const nested = calls.get(value.start)
       if (nested?.compositionCases && resolved !== expression)
         throw new Themes.InvalidError(
@@ -379,7 +392,8 @@ export function collect(options: collect.Options) {
           options.source.slice(application.start, application.calleeEnd),
         )
     }
-    if (selected.some((call) => call.output !== selected[0]?.output))
+    for (const call of selected) outputs.add(call.output)
+    if (outputs.size > 1)
       throw new Themes.InvalidError(
         'Composition cannot mix HTML and React props.',
         node,
@@ -497,6 +511,12 @@ export function collect(options: collect.Options) {
             ),
           }
         : {}),
+      typography: new Map(
+        selected.flatMap((call) => [...(call.typography ?? [])]),
+      ),
+      typographyQueries: new Map(
+        selected.flatMap((call) => [...(call.typographyQueries ?? [])]),
+      ),
       name,
       start: node.start,
       end: node.end,
@@ -507,7 +527,7 @@ export function collect(options: collect.Options) {
         end: node.end,
         properties: selected.flatMap((call) => properties(call)),
       },
-      ...(selected[0]?.output ? { output: selected[0].output } : {}),
+      ...(outputs.has('html') ? { output: 'html' as const } : {}),
       ...(identities.length ? { identity: identities.join(' ') } : {}),
     }
     calls.set(node.start, call)
@@ -538,6 +558,12 @@ export function collect(options: collect.Options) {
           start: call.start,
           end: call.end,
           compositionCase: true,
+          typography: new Map(
+            included.flatMap((call) => [...(call.typography ?? [])]),
+          ),
+          typographyQueries: new Map(
+            included.flatMap((call) => [...(call.typographyQueries ?? [])]),
+          ),
           body: {
             ...call.body!,
             properties: included.flatMap((call) => properties(call)),
@@ -604,6 +630,13 @@ export declare namespace collect {
     readonly links?: Readonly<Record<string, Themes.Link>> | undefined
     /** Parsed module with lexical binding scopes. */
     readonly program: Ast.Program
+    /** Validated variable scope applications preserved as runtime props. */
+    readonly scopes?:
+      | ReadonlyMap<
+          number,
+          { readonly end: number; readonly output: 'html' | undefined }
+        >
+      | undefined
     /** Source used to preserve initialization-sensitive binding reads. */
     readonly source: string
     /** Validated ordered style bodies. */

package/src/compiler/internal/Configurations.ts

@@ -4,21 +4,32 @@
  */
 import * as Identity from '../../internal/Identity.js'
 import type * as Ast from '@oxc-project/types'
-import * as Config from '../../Config.js'
+import * as Config from '../../internal/Configuration.js'
+import * as PublicConfig from '../../Config.js'
 import * as Shorthands from '../../internal/Shorthands.js'
 import * as Token from '../../internal/Token.js'
-import * as Theme from '../../Theme.js'
+import * as Theme from '../../internal/Theme.js'
+import * as VariableSets from '../../internal/VariableSets.js'
+import * as Vars from '../../Vars.js'
 import type * as Themes from './Themes.js'
 
 /** Reads a direct configuration factory without executing authored expressions. */
 export function collect(options: collect.Options): Themes.Link {
   function data(node: Ast.Node): unknown {
     const linked = options.resolve(node)
-    if (linked?.kind === 'theme') return linked.definition
+    if (
+      linked?.kind === 'theme' ||
+      (linked?.call.variableConfig && linked.call.selection)
+    )
+      return linked.definition[Token.definition].contract.variableSet
+        ? VariableSets.from(linked.definition[Token.definition])
+        : linked.definition
 
     if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression')
       return data(node.expression)
 
+    if (node.type === 'Literal' && node.value === false) return false
+
     if (node.type === 'ArrayExpression')
       return node.elements.map((node) => {
         if (!node || node.type === 'SpreadElement')
@@ -77,12 +88,40 @@ export function collect(options: collect.Options): Themes.Link {
       'Config.create accepts one literal options object.',
     )
 
-  const input = (
+  let input = (
     options.expression.arguments.length
       ? data(options.expression.arguments[0]!)
       : {}
   ) as Config.create.Options
 
+  PublicConfig.create(input as unknown as PublicConfig.create.Options)
+
+  const authored = input as unknown as Config.VariableOptions
+  const variableMode = authored.vars !== undefined
+  if (variableMode) {
+    Config.create(authored)
+    const wrap = (value: Vars.Definition | Vars.Values) =>
+      VariableSets.theme(
+        Token.definition in value
+          ? (value as Vars.Definition)
+          : Vars.define(value as Vars.Values),
+        authored.mappings,
+      )
+    const { vars, defaultVars, mappings: _mappings, ...rest } = authored
+    input =
+      defaultVars === undefined
+        ? { ...rest, theme: wrap(vars as Vars.Definition) }
+        : {
+            ...rest,
+            defaultTheme: defaultVars,
+            themes: Object.fromEntries(
+              Object.entries(vars).map(([key, value]) => [
+                key,
+                wrap(value as Vars.Definition),
+              ]),
+            ),
+          }
+  }
   const config = Config.create(input)
 
   const catalog = (() => {
@@ -102,8 +141,17 @@ export function collect(options: collect.Options): Themes.Link {
       ? options.name
       : Identity.requireId(input.id, 'Config.create')
   const contract = Object.freeze({
+    ...(variableMode
+      ? {
+          variableSet: true,
+          mappings: VariableSets.mappings(authored.mappings),
+        }
+      : {}),
     [Token.identity]: identity,
     cssOutput: input.cssOutput ?? 'atomic',
+    ...(input.defaultLayer !== undefined
+      ? { defaultLayer: input.defaultLayer }
+      : {}),
     ...(input.shorthands
       ? { shorthands: Shorthands.read(input.shorthands) }
       : {}),
@@ -151,6 +199,16 @@ export function collect(options: collect.Options): Themes.Link {
   if ('themes' in config && selected)
     members[JSON.stringify(['theme'])] = selected
 
+  if (variableMode && selected)
+    members[JSON.stringify(['vars'])] = {
+      ...selected,
+      call: {
+        ...selected.call,
+        directVariables: true,
+        type: `import('zyzz').Vars.References<${selected.call.tokenType}>`,
+      },
+    }
+
   const definition =
     selected?.definition ?? Token.bind(Theme.define({}), contract)
 
@@ -160,10 +218,14 @@ export function collect(options: collect.Options): Themes.Link {
         return {
           defaultTheme: input.defaultTheme,
           themes: Object.fromEntries(
-            Object.entries(catalog).map(([name, theme]) => [
-              name,
-              { ...values(theme.tokens), ...theme[Token.definition].queries },
-            ]),
+            Object.keys(catalog).map((name) => {
+              const theme =
+                members[JSON.stringify(['themes', name])]!.definition!
+              return [
+                name,
+                { ...values(theme.tokens), ...theme[Token.definition].queries },
+              ]
+            }),
           ),
         }
       }
@@ -171,8 +233,8 @@ export function collect(options: collect.Options): Themes.Link {
       if ('theme' in config) {
         return {
           theme: {
-            ...values(config.theme.tokens),
-            ...config.theme[Token.definition].queries,
+            ...values(definition.tokens),
+            ...definition[Token.definition].queries,
           },
         }
       }
@@ -180,6 +242,9 @@ export function collect(options: collect.Options): Themes.Link {
       return {}
     })(),
     ...(input.cssOutput ? { cssOutput: input.cssOutput } : {}),
+    ...(input.defaultLayer !== undefined
+      ? { defaultLayer: input.defaultLayer }
+      : {}),
     ...(input.shorthands ? { shorthands: input.shorthands } : {}),
     ...(input.output ? { output: input.output } : {}),
     ...(input.layers ? { layers: input.layers } : {}),
@@ -189,6 +254,9 @@ export function collect(options: collect.Options): Themes.Link {
   return {
     binding: options.name,
     call: {
+      ...(variableMode
+        ? { variableConfig: true, variableMappings: authored.mappings }
+        : {}),
       appearance: true,
       script: true,
       end: options.expression.end,
@@ -199,7 +267,9 @@ export function collect(options: collect.Options): Themes.Link {
       options: normalized,
       start: options.expression.start,
       tokenType: selected?.call.tokenType ?? '{}',
-      type: `import('zyzz').Config.create.ReturnType<${type(normalized)}>`,
+      type: variableMode
+        ? `import('zyzz').Config.VariableConfig<${type({ ...normalized, theme: undefined, themes: undefined, defaultTheme: undefined, vars: 'themes' in normalized ? normalized.themes : normalized.theme, ...('themes' in normalized ? { defaultVars: normalized.defaultTheme } : {}), ...(authored.mappings !== undefined ? { mappings: VariableSets.mappings(authored.mappings) } : {}) })}>`
+        : `import('zyzz').Config.create.ReturnType<${type(normalized)}>`,
     },
     definition,
     kind: 'config',
@@ -224,10 +294,12 @@ export declare namespace collect {
 
 /** Encodes validated literal options as a declaration type, never executable text. */
 export function type(value: unknown): string {
+  if (Token.is(value)) return `import('zyzz').Vars.Reference<'${value.group}'>`
   if (Array.isArray(value)) return `readonly [${value.map(type).join(',')}]`
   if (!value || typeof value !== 'object') return JSON.stringify(value)
 
   return `{${Object.entries(value)
+    .filter(([, value]) => value !== undefined)
     .map(([key, value]) => `readonly ${JSON.stringify(key)}:${type(value)}`)
     .join(';')}}`
 }

package/src/compiler/internal/Contract.ts

@@ -3,14 +3,16 @@
  * @module
  */
 import type * as Binding from '../../internal/Binding.js'
-import * as Config from '../../Config.js'
+import * as Config from '../../internal/Configuration.js'
 import * as Configurations from './Configurations.js'
 import * as FunctionSyntax from '../../internal/FunctionSyntax.js'
 import * as Identifiers from './Identifiers.js'
 import * as PackedStyles from './PackedStyles.js'
 import * as Shorthands from '../../internal/Shorthands.js'
 import * as Stylesheets from './Stylesheets.js'
-import * as Theme from '../../Theme.js'
+import * as Theme from '../../internal/Theme.js'
+import * as VariableSets from '../../internal/VariableSets.js'
+import * as Vars from '../../Vars.js'
 import type * as Themes from './Themes.js'
 import * as Token from '../../internal/Token.js'
 
@@ -24,7 +26,7 @@ export function read(
   if (
     ![
       1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-      22, 23, 24,
+      22, 23, 24, 25, 26, 27,
     ].includes(data.version as number)
   )
     throw new Error('Unsupported Zyzz contract version.')
@@ -56,12 +58,53 @@ export function read(
     for (const entry of Object.values(record(data.exports))) collect(entry)
   }
 
+  function decode(value: unknown): unknown {
+    if (!value || typeof value !== 'object') return value
+    if (Array.isArray(value)) return value.map(decode)
+    const fields = record(value)
+    if (Object.hasOwn(fields, '$object'))
+      return Object.fromEntries(
+        Object.entries(record(fields.$object)).map(([key, value]) => [
+          key,
+          decode(value),
+        ]),
+      )
+    if (Object.hasOwn(fields, '$variable')) {
+      const reference = record(fields.$variable)
+      const identity = string(reference.identity)
+      let contract = identities.get(identity)
+      if (contract && !contract.variableSet)
+        throw new Error(
+          'Conflicting packed variable-set modes for one identity.',
+        )
+      if (!contract) {
+        contract = Object.freeze({
+          variableSet: true,
+          [Token.identity]: identity,
+        })
+        identities.set(identity, contract)
+      }
+      const resolved = decode(reference.value) as Token.Value
+      return Token.create({
+        contract,
+        group: VariableSets.domain(resolved),
+        path: string(reference.path),
+        value: resolved,
+      })
+    }
+    return Object.fromEntries(
+      Object.entries(fields).map(([key, value]) => [key, decode(value)]),
+    )
+  }
   const themes: Record<string, Theme.Definition> = Object.create(null)
   const types: Record<string, string> = Object.create(null)
 
   for (const [name, value] of Object.entries(record(data.themes))) {
     const entry = record(value)
     const identity = string(entry.identity)
+    if (entry.variableSet === true && (data.version as number) < 26)
+      throw new Error('Vars contracts require contract version 26 or later.')
+    const mappings = VariableSets.mappings(entry.mappings)
     if (
       entry.cssOutput !== undefined &&
       entry.cssOutput !== 'atomic' &&
@@ -73,11 +116,28 @@ export function read(
       | 'grouped'
       | undefined
 
+    if (entry.defaultLayer !== undefined) {
+      if ((data.version as number) < 27)
+        throw new Error('Default layers require contract version 27 or later.')
+      Config.create({ defaultLayer: entry.defaultLayer as string })
+    }
+    const defaultLayer = entry.defaultLayer as string | undefined
+
     const shorthands =
       entry.shorthands !== undefined
         ? Shorthands.read(entry.shorthands)
         : undefined
     let contract = identities.get(identity)
+    if (
+      contract &&
+      Boolean(contract.variableSet) !== (entry.variableSet === true)
+    )
+      throw new Error('Conflicting packed variable-set modes for one identity.')
+    if (
+      contract &&
+      JSON.stringify(contract.mappings ?? {}) !== JSON.stringify(mappings ?? {})
+    )
+      throw new Error('Conflicting packed variable mappings for one identity.')
     if (
       contract &&
       Shorthands.signature(contract.shorthands) !==
@@ -95,19 +155,37 @@ export function read(
         'Conflicting packed CSS output modes for one theme identity.',
       )
 
+    if (contract && contract.defaultLayer !== defaultLayer)
+      throw new Error(
+        'Conflicting packed default layers for one theme identity.',
+      )
+
     if (!contract) {
       contract = Object.freeze({
+        ...(entry.variableSet === true
+          ? {
+              variableSet: true,
+              mappings,
+            }
+          : {}),
         ...(entry.shorthands !== undefined
           ? { shorthands: Shorthands.read(entry.shorthands) }
           : {}),
         ...(cssOutput ? { cssOutput } : {}),
+        ...(defaultLayer !== undefined ? { defaultLayer } : {}),
         [Token.complete]: true,
         [Token.identity]: identity,
       })
       identities.set(identity, contract)
     }
 
-    const definition = Theme.define(record(entry.tokens) as Theme.Tokens)
+    const definition =
+      entry.variableSet === true
+        ? VariableSets.theme(
+            Vars.define(decode(entry.tokens) as Vars.Values),
+            mappings,
+          )
+        : Theme.define(record(entry.tokens) as Theme.Tokens)
     if (
       (data.version as number) < 24 &&
       Object.hasOwn(definition.tokens, 'typography')
@@ -116,6 +194,15 @@ export function read(
         'Packed typography sets require contract version 24 or later.',
       )
 
+    if (
+      (data.version as number) < 25 &&
+      (definition[Token.definition].paths ||
+        Object.hasOwn(definition.tokens, 'borderWidth'))
+    )
+      throw new Error(
+        'Packed responsive typography and border widths require contract version 25 or later.',
+      )
+
     themes[name] = Token.bind(definition, contract)
     types[name] = type(input(definition))
   }
@@ -206,7 +293,8 @@ export function read(
       const reference = string(entry.reference)
       if (
         ![
-          9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
+          9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
+          27,
         ].includes(data.version as number) ||
         ![
           'cssFunction',
@@ -254,10 +342,7 @@ export function read(
     }
 
     if (entry.kind === 'style-reference') {
-      if (
-        entry.style !== undefined &&
-        ![16, 17, 18, 19, 20, 21, 22, 23, 24].includes(data.version as number)
-      )
+      if (entry.style !== undefined && (data.version as number) < 16)
         throw new Error(
           'Packed callable styles require contract version 16 or later.',
         )
@@ -331,10 +416,17 @@ export function read(
         : undefined
 
     const options =
-      entry.options === undefined ? undefined : record(entry.options)
+      entry.options === undefined ? undefined : record(decode(entry.options))
 
     if (options) {
-      Config.create(options as Config.create.Options)
+      if (entry.variableConfig === true)
+        Config.create(
+          variableOptions(
+            options,
+            entry.variableMappings as Vars.Mappings | false | undefined,
+          ),
+        )
+      else Config.create(options as Config.create.Options)
       if (
         (data.version as number) >= 17 &&
         (options.cssOutput ?? 'atomic') !==
@@ -344,6 +436,14 @@ export function read(
           'Configuration CSS output disagrees with linked theme metadata.',
         )
 
+      if (
+        options.defaultLayer !==
+        definition[Token.definition].contract.defaultLayer
+      )
+        throw new Error(
+          'Configuration default layer disagrees with linked theme metadata.',
+        )
+
       if (
         Shorthands.signature(options.shorthands) !==
         Shorthands.signature(definition[Token.definition].contract.shorthands)
@@ -357,7 +457,9 @@ export function read(
       !!options?.themes &&
       ((data.version as number) < 4 || entry.catalogOnly === true)
     const fullConfigType = options
-      ? `import('zyzz').Config.create.ReturnType<${Configurations.type(options)}>`
+      ? entry.variableConfig === true
+        ? `import('zyzz').Config.VariableConfig<${Configurations.type(variableOptions(options, entry.variableMappings as Vars.Mappings | false | undefined))}>`
+        : `import('zyzz').Config.create.ReturnType<${Configurations.type(options)}>`
       : ''
     // Helpers a legacy library did not compile are hidden from its consumers' types.
     const hidden = [
@@ -376,6 +478,27 @@ export function read(
     return {
       binding: string(entry.binding),
       call: {
+        ...(entry.variableSet === true
+          ? {
+              variableSet: true,
+              type: `import('zyzz').Vars.Definition<${types[theme]!}>`,
+            }
+          : {}),
+        ...(entry.directVariables === true
+          ? {
+              directVariables: true,
+              type: `import('zyzz').Vars.${entry.variableSet === true ? 'Definition' : 'References'}<${types[theme]!}>`,
+            }
+          : {}),
+        ...(entry.variableConfig === true
+          ? {
+              variableConfig: true,
+              variableMappings: entry.variableMappings as
+                | Vars.Mappings
+                | false
+                | undefined,
+            }
+          : {}),
         ...(entry.recipe === true ? { recipe: true } : {}),
         ...(entry.output === 'html' ? { output: 'html' as const } : {}),
         ...(catalogOnly ? { catalogOnly: true } : {}),
@@ -399,7 +522,7 @@ export function read(
         ...(options
           ? {
               options,
-              type: `${outputType}${entry.initialization === true ? "['script']" : entry.root === true ? "['appearance']" : entry.selection === true ? "['themes']" : ''}`,
+              type: `${outputType}${entry.initialization === true ? "['script']" : entry.root === true ? "['appearance']" : entry.selection === true ? (entry.variableConfig === true ? "['vars']" : "['themes']") : ''}`,
             }
           : {}),
         ...(members
@@ -459,6 +582,7 @@ function tokens(tree: Theme.References<Theme.Tokens>): Record<string, unknown> {
 }
 
 function type(value: unknown): string {
+  if (Token.is(value)) return Configurations.type(value)
   if (Array.isArray(value)) return `readonly [${value.map(type).join(',')}]`
   if (!value || typeof value !== 'object') return JSON.stringify(value)
 
@@ -525,6 +649,11 @@ export function write(
       }
 
     return {
+      ...(link.call.variableSet ? { variableSet: true } : {}),
+      ...(link.call.directVariables ? { directVariables: true } : {}),
+      ...(link.call.variableConfig
+        ? { variableConfig: true, variableMappings: link.call.variableMappings }
+        : {}),
       ...(link.call.recipe ? { recipe: true } : {}),
       ...(link.call.output ? { output: link.call.output } : {}),
       ...(link.call.script &&
@@ -541,7 +670,7 @@ export function write(
       ...(link.call.selection ? { selection: true } : {}),
       ...(link.call.initialization ? { initialization: true } : {}),
       ...(link.call.root ? { root: true } : {}),
-      ...(link.call.options ? { options: link.call.options } : {}),
+      ...(link.call.options ? { options: encode(link.call.options) } : {}),
       ...(link.members
         ? {
             members: Object.fromEntries(
@@ -572,15 +701,46 @@ export function write(
           ...(theme[Token.definition].contract.shorthands
             ? { shorthands: theme[Token.definition].contract.shorthands }
             : {}),
+          ...(theme[Token.definition].contract.defaultLayer !== undefined
+            ? { defaultLayer: theme[Token.definition].contract.defaultLayer }
+            : {}),
           ...(theme[Token.definition].contract.cssOutput
             ? { cssOutput: theme[Token.definition].contract.cssOutput }
             : {}),
+          ...(theme[Token.definition].contract.variableSet
+            ? {
+                variableSet: true,
+                mappings: theme[Token.definition].contract.mappings,
+              }
+            : {}),
           identity: theme[Token.definition].contract[Token.identity],
-          tokens: input(theme),
+          tokens: encode(input(theme)),
         },
       ]),
     ),
     version: (() => {
+      if (
+        Object.values(themes).some(
+          (theme) =>
+            theme[Token.definition].contract.defaultLayer !== undefined,
+        )
+      )
+        return 27
+      if (
+        Object.values(themes).some(
+          (theme) => theme[Token.definition].contract.variableSet,
+        )
+      )
+        return 26
+      if (
+        Object.values(themes).some(
+          (theme) =>
+            theme[Token.definition].paths ||
+            Object.hasOwn(theme.tokens, 'borderWidth'),
+        )
+      )
+        return 25
+
       if (
         Object.values(themes).some((theme) =>
           Object.hasOwn(theme.tokens, 'typography'),
@@ -858,3 +1018,35 @@ function extended(signature: NonNullable<Themes.Call['function']>): boolean {
     )
   )
 }
+
+function encode(value: unknown): unknown {
+  if (Token.is(value))
+    return {
+      $variable: {
+        identity: value.contract[Token.identity],
+        path: value.path,
+        value: encode(value.value),
+      },
+    }
+  if (Array.isArray(value)) return value.map(encode)
+  if (!value || typeof value !== 'object') return value
+  const fields = Object.fromEntries(
+    Object.entries(value).map(([key, value]) => [key, encode(value)]),
+  )
+  return Object.hasOwn(fields, '$variable') || Object.hasOwn(fields, '$object')
+    ? { $object: fields }
+    : fields
+}
+
+function variableOptions(
+  options: Record<string, unknown>,
+  mappings?: Vars.Mappings | false,
+): Config.VariableOptions {
+  const { theme, themes, defaultTheme, ...rest } = options
+  return {
+    ...rest,
+    vars: (themes ?? theme) as Vars.Values,
+    ...(themes ? { defaultVars: String(defaultTheme) } : {}),
+    ...(mappings !== undefined ? { mappings } : {}),
+  }
+}

package/src/compiler/internal/Contributions.ts

@@ -18,7 +18,7 @@ import * as Properties from './Properties.js'
 import * as RuleReference from '../../internal/RuleReference.js'
 import type * as Scope from './Scope.js'
 import * as Style from '../../Style.js'
-import * as Theme from '../../Theme.js'
+import * as Theme from '../../internal/Theme.js'
 import * as Themes from './Themes.js'
 import type * as Token from '../../internal/Token.js'
 import * as Walker from 'oxc-walker'

package/src/compiler/internal/Dynamic.ts

@@ -64,7 +64,7 @@ export function read(
         'key',
         'ref',
         'style',
-        'variables',
+        'vars',
         '__proto__',
       ].includes(key) ||
       Object.hasOwn(slots, key)