zyzz 0.0.21 → 0.0.22

package/src/compiler/internal/Themes.ts

@@ -32,6 +32,8 @@ export type Alias = Call & {
 
 /** Theme factory span and generated scope key. */
 export type Call = {
+  /** Whether native defineConfig retains a typed React Provider. */
+  readonly nativeProvider?: boolean | undefined
   readonly variableSet?: boolean | undefined
   readonly directVariables?: boolean | undefined
   readonly variableConfig?: boolean | undefined
@@ -102,6 +104,22 @@ export type Link = {
   readonly members?: Readonly<Record<string, Link>> | undefined
 }
 
+/** A readonly variable argument consumed by a native React hook. */
+export type VarsRead = {
+  /** Owning configuration fallback. */
+  readonly defaultVars: string
+  /** Exclusive source offset. */
+  readonly end: number
+  /** Stable configuration identity for graph-owned native profiles. */
+  readonly owner: string
+  /** Inclusive source offset. */
+  readonly start: number
+  /** A standalone definition that does not select a named catalog entry. */
+  readonly unnamed: boolean
+  /** Complete compatible variable alternatives. */
+  readonly vars: Readonly<Record<string, Theme.Definition>>
+}
+
 /** Shared graph data; no filesystem or runtime evaluation is involved. */
 export type Context = {
   /** Canonical identifier names collected during graph validation. */
@@ -137,6 +155,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
     { end: number; output: 'html' | undefined }
   >()
   const selections = new Set<string>()
+  const selectionUses = new Set<string>()
   const calls: Call[] = []
   const scripts = new Set<string>()
   const definitions = new Map<number, Call>()
@@ -145,10 +164,12 @@ export function collect(program: Ast.Program, options: collect.Options) {
   const variableImports = new Set<number>()
   const configImports = new Set<number>()
   const factoryImports = new Map<number, 'create' | 'define' | 'extend'>()
+  const nativeFactories = new Set<string>()
   const configs = new Map<string, Link>()
   const configBindings = new Map<number, Link>()
   const factoryReferences = new Set<number>()
   const references: Reference[] = []
+  const varsReads: VarsRead[] = []
 
   const styles = new Map<
     number,
@@ -166,12 +187,28 @@ export function collect(program: Ast.Program, options: collect.Options) {
   for (const node of program.body) {
     if (
       node.type !== 'ImportDeclaration' ||
-      node.source.value !== 'zyzz' ||
+      !['zyzz', 'zyzz/react-native', 'zyzz/react-native/react'].includes(
+        node.source.value,
+      ) ||
       node.importKind === 'type'
     )
       continue
 
-    for (const specifier of node.specifiers)
+    for (const specifier of node.specifiers) {
+      if (node.source.value !== 'zyzz') {
+        if (
+          specifier.type === 'ImportSpecifier' &&
+          specifier.importKind !== 'type' &&
+          (specifier.imported.type === 'Identifier'
+            ? specifier.imported.name
+            : specifier.imported.value) === 'defineConfig'
+        ) {
+          factoryImports.set(specifier.start, 'create')
+          nativeFactories.add(specifier.local.name)
+        }
+        continue
+      }
+
       if (
         specifier.type === 'ImportSpecifier' &&
         specifier.importKind !== 'type' &&
@@ -208,6 +245,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
           factoryImports.set(specifier.start, 'define')
         else factoryImports.set(specifier.start, 'extend')
       }
+    }
   }
 
   if (
@@ -686,11 +724,20 @@ export function collect(program: Ast.Program, options: collect.Options) {
       }
 
       if (config) {
+        const nativeProvider =
+          member.type === 'Identifier' && nativeFactories.has(member.name)
+        if (nativeProvider && !options.native)
+          fail(
+            'Native defineConfig requires a native compilation target.',
+            expression,
+          )
+
         try {
           const link = Configurations.collect({
             data,
             expression,
             name,
+            nativeProvider,
             resolve: (node) => {
               const link = resolve(node)
 
@@ -717,6 +764,8 @@ export function collect(program: Ast.Program, options: collect.Options) {
           themes[link.call.name] = link.definition
 
           for (const { key, id } of bindings) {
+            if (key === 'Provider' && link.call.nativeProvider) continue
+
             if (
               (key === 'style' || key === 'variants') &&
               !link.call.selection &&
@@ -1046,6 +1095,15 @@ export function collect(program: Ast.Program, options: collect.Options) {
       })
 
       for (const { key, id } of bindings) {
+        if (
+          key === 'Provider' &&
+          link.call.nativeProvider &&
+          !link.call.initialization &&
+          !link.call.root &&
+          !link.call.selection
+        )
+          continue
+
         if (
           (key === 'style' || key === 'variants') &&
           !link.call.selection &&
@@ -1351,6 +1409,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
     parent: Ast.Node,
     ancestors: readonly Ast.Node[],
     binding: Walker.ScopeTrackerNode | null,
+    lookup: (name: string) => Walker.ScopeTrackerNode | null,
   ): boolean {
     const grandparent = ancestors.at(-3)
 
@@ -1438,6 +1497,13 @@ export function collect(program: Ast.Program, options: collect.Options) {
       )
         fail('Configuration references must follow their definition.', node)
 
+      if (
+        config.call.variableConfig &&
+        config.call.selection &&
+        readVars(node, parent, config, lookup)
+      )
+        return true
+
       // Root controls are an ordinary runtime object; any read or call is valid.
       if (config.call.root) {
         appearances.add(config.call.name)
@@ -1459,6 +1525,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
 
         if (config.call.selection) {
           selections.add(config.call.name)
+          selectionUses.add(config.call.name)
           scopeApplications.set(parent.start, {
             end: parent.end,
             output: config.call.options?.output === 'html' ? 'html' : undefined,
@@ -1504,6 +1571,24 @@ export function collect(program: Ast.Program, options: collect.Options) {
         path.push(key)
         target = member
 
+        if (
+          path.length === 1 &&
+          path[0] === 'Provider' &&
+          config.call.nativeProvider &&
+          !config.call.initialization &&
+          !config.call.root &&
+          !config.call.selection
+        )
+          return true
+
+        if (
+          config.call.variableConfig &&
+          path.length === 1 &&
+          path[0] === 'vars' &&
+          readVars(target, ancestors[index - 1]!, config, lookup)
+        )
+          return true
+
         if (
           aliasReferences.has(target.start) ||
           factoryReferences.has(target.start)
@@ -1562,6 +1647,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
 
           if (path[0] === 'themes' || path[0] === 'vars') {
             selections.add(config.call.name)
+            selectionUses.add(config.call.name)
             const application = ancestors[index - 1]!
             scopeApplications.set(application.start, {
               end: application.end,
@@ -1623,6 +1709,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
       // A compiled selector is an ordinary runtime function, so passing or storing it is safe.
       if (config.call.selection && !config.call.catalogOnly && !path.length) {
         selections.add(config.call.name)
+        selectionUses.add(config.call.name)
 
         return true
       }
@@ -1640,9 +1727,101 @@ export function collect(program: Ast.Program, options: collect.Options) {
     if (!theme) return false
     if (node.start === binding!.node.start) return true
 
+    if (
+      theme.variableSet &&
+      readVars(
+        node,
+        parent,
+        {
+          call: theme,
+          definition: themes[theme.name]!,
+        },
+        lookup,
+      )
+    )
+      return true
+
     return themeReference(node, parent, ancestors, theme)
   }
 
+  function readVars(
+    node: Ast.Node,
+    parent: Ast.Node,
+    link: Pick<Link, 'call' | 'definition' | 'members'>,
+    lookup: (name: string) => Walker.ScopeTrackerNode | null,
+  ): boolean {
+    if (
+      !options.native ||
+      parent.type !== 'CallExpression' ||
+      parent.optional ||
+      parent.arguments[0] !== node
+    )
+      return false
+
+    const callee = parent.callee
+    const name =
+      callee.type === 'Identifier'
+        ? callee.name
+        : callee.type === 'MemberExpression' &&
+            !callee.computed &&
+            !callee.optional &&
+            callee.object.type === 'Identifier' &&
+            callee.property.type === 'Identifier' &&
+            ['useAnimatedVars', 'useVars'].includes(callee.property.name)
+          ? callee.object.name
+          : undefined
+    const binding = name === undefined ? undefined : lookup(name)
+    if (
+      binding?.type !== 'Import' ||
+      ![
+        'zyzz/react-native',
+        'zyzz/react-native/reanimated',
+        'zyzz/react-native/react',
+      ].includes(binding.importNode.source.value) ||
+      binding.importNode.importKind === 'type'
+    )
+      return false
+
+    const specifier = binding.node
+    if (
+      callee.type === 'Identifier'
+        ? specifier.type !== 'ImportSpecifier' ||
+          specifier.importKind === 'type' ||
+          !['useAnimatedVars', 'useVars'].includes(
+            specifier.imported.type === 'Identifier'
+              ? specifier.imported.name
+              : specifier.imported.value,
+          )
+        : specifier.type !== 'ImportNamespaceSpecifier'
+    )
+      return false
+
+    const named = link.call.options?.themes !== undefined
+    const vars = (() => {
+      if (!named) return { default: link.definition }
+      return Object.fromEntries(
+        Object.entries(link.members ?? {}).flatMap((entry) => {
+          const [key, member] = entry
+          const path = JSON.parse(key) as string[]
+          if (path.length === 1 && link.call.selection)
+            return [[path[0]!, member.definition]]
+          if (path.length === 2 && path[0] === 'themes')
+            return [[path[1]!, member.definition]]
+          return []
+        }),
+      )
+    })()
+    varsReads.push({
+      defaultVars: named ? String(link.call.options!.defaultTheme) : 'default',
+      end: node.end,
+      owner: link.call.name,
+      start: node.start,
+      unnamed: !named,
+      vars,
+    })
+    return true
+  }
+
   function themeReference(
     node: Ast.Node,
     parent: Ast.Node,
@@ -2023,6 +2202,8 @@ export function collect(program: Ast.Program, options: collect.Options) {
       const entries = Object.entries(config.members ?? {}).flatMap(
         ([key, value]) => {
           const path = JSON.parse(key) as string[]
+          if (config.call.selection && path.length === 1)
+            return [[path[0]!, value.definition] as const]
           return (path[0] === 'themes' || path[0] === 'vars') &&
             path.length === 2
             ? [[path[1]!, value.definition] as const]
@@ -2045,10 +2226,12 @@ export function collect(program: Ast.Program, options: collect.Options) {
     scopeApplications,
     scripts,
     selections,
+    selectionUses,
     staticTokens,
     styles,
     themes: Object.freeze(themes),
     tokens,
+    varsReads,
   }
 }
 
@@ -2056,6 +2239,8 @@ export function collect(program: Ast.Program, options: collect.Options) {
 export declare namespace collect {
   /** Stable module namespace, independent of token values and call offsets. */
   type Options = {
+    /** Captures readonly variable arguments for native React hooks. */
+    readonly native?: boolean | undefined
     /** Encoded package/module identity from the source adapter. */
     readonly staticBindings?: ReadonlySet<number> | undefined
     readonly contributionCalls?: ReadonlySet<number> | undefined

package/src/compiler/internal/Vars.ts

@@ -477,6 +477,7 @@ export function collect(
   function reference(
     node: Extract<Ast.Node, { type: 'Identifier' | 'JSXIdentifier' }>,
     parent: Ast.Node,
+    ancestors: readonly Ast.Node[],
     binding: Walker.ScopeTrackerNode | null,
   ) {
     if (binding?.type === 'Import' && imports.has(binding.node.start))
@@ -488,7 +489,17 @@ export function collect(
           : node,
       ) ?? resolve(node)
     if (!link) return false
-    if (link.call.start >= 0 && node.start < link.call.end)
+    // Reads inside functions wait for a call, so only module-scope reads must follow the declaration.
+    if (
+      link.call.start >= 0 &&
+      node.start < link.call.end &&
+      !ancestors.some(
+        (ancestor) =>
+          ancestor.type === 'ArrowFunctionExpression' ||
+          ancestor.type === 'FunctionDeclaration' ||
+          ancestor.type === 'FunctionExpression',
+      )
+    )
       throw new InvalidError('Vars must be declared before use.', node)
     return true
   }

package/src/internal/Completion.ts

@@ -11,9 +11,12 @@ export type Properties<
   styles = Record<string, unknown>,
 > = {
   readonly [property in keyof Literal.Properties & keyof styles]?:
-    | (string extends Literal.Properties[property]
-        ? never
-        : Literal.Properties[property])
+    // Configured tokens replace literal CSS values, so only token names are suggested.
+    | ([Token.Names<tokens, property>] extends [never]
+        ? string extends Literal.Properties[property]
+          ? never
+          : Literal.Properties[property]
+        : never)
     | Token.Names<tokens, property>
     | (string & {})
     | number

package/src/internal/Targets.ts

@@ -147,6 +147,8 @@ export function copy(
 export function web<name extends string>(
   style: Style.NamedStyle<name>,
 ): Style.NamedStyle<name> {
+  if (!style.rules && !style.targets) return style
+
   const rules = style.rules?.map((rule) => ({
     ...rule,
     style: web(rule.style),

package/src/internal/Token.ts

@@ -391,8 +391,6 @@ export const complete = Symbol('zyzz.contract.complete')
 export type Contract = {
   /** Whether values belong to independent variables rather than fixed theme categories. */
   readonly variableSet?: boolean | undefined
-  /** Custom-property spelling retained by older packed producers. */
-  readonly variableNaming?: 'legacy' | 'hashed' | undefined
   /** Configuration-local category-to-property mappings. */
   readonly mappings?: VariableSets.Mappings | false | undefined
   /** Web emission mode retained by configuration-bound theme handles. */

package/src/internal/Value.ts

@@ -190,6 +190,26 @@ type CheckedArray<values, property extends PropertyKey, tokens> = {
   >[property]
 }
 
+/** Lists the values a token-constrained property accepts, so mismatch diagnostics name them. */
+export type Mismatch<tokens, property extends keyof Literal.Properties> =
+  // Resolving through a conditional prints the expected values instead of this alias's arguments.
+  tokens extends unknown
+    ? Expected<
+        | Extract<Token.Names<tokens, property>, string>
+        | NumericNames<Token.Names<tokens, property>>
+        | `${string} !custom`
+      >
+    : never
+
+// An object brand never reduces with a string literal, so the diagnostic keeps the expected values.
+type Expected<values> = { readonly [expected]: values }
+
+declare const expected: unique symbol
+
+type NumericNames<names> = names extends `${infer value extends number}`
+  ? value
+  : never
+
 /** Requires tokens for properties with configured values. */
 export type Tokens<
   value,