zyzz 0.0.20 → 0.0.22

package/src/compiler/internal/NativeVars.ts

@@ -0,0 +1,228 @@
+/** Converts authored variables to static native value profiles. @module */
+import * as Calculation from '../../react-native/internal/Calculation.js'
+import * as Literal from '../../internal/Literal.js'
+import * as Media from './NativeMedia.js'
+import type * as Runtime from '../../runtime/NativeVars.js'
+import * as Scalar from '../../react-native/internal/Scalar.js'
+import type * as Theme from '../../internal/Theme.js'
+import * as Token from '../../internal/Token.js'
+import * as VariableSets from '../../internal/VariableSets.js'
+
+/** Resolves native domains using the style compiler's unit and font mappings. */
+export function compile(options: compile.Options): Runtime.create.Options {
+  const media = Media.prepare(undefined, options.vars, options)
+  return {
+    defaultVars: options.defaultVars,
+    ...(media
+      ? {
+          media: {
+            profiles: Object.fromEntries(
+              media.selections.map((selection) => [
+                selection,
+                compile({ ...options, vars: media.select(selection).vars! })
+                  .profiles,
+              ]),
+            ),
+            queries: media.queries,
+          },
+        }
+      : {}),
+    profiles: Object.fromEntries(
+      Object.entries(options.vars).map((entry) => {
+        const [name, theme] = entry
+        return [
+          name,
+          { dark: profile(theme, 'dark'), light: profile(theme, 'light') },
+        ]
+      }),
+    ),
+    unnamed: options.unnamed,
+  }
+
+  function profile(theme: Theme.Definition, scheme: 'dark' | 'light') {
+    const metadata = theme[Token.definition]
+    const active = new Set<Token.Reference>()
+    type Tree = {
+      [key: string]: string | number | Tree | readonly [string]
+    }
+    const tree: Tree = Object.create(null)
+
+    function resolve(value: Token.Value): string | number {
+      if (typeof value === 'string' || typeof value === 'number') return value
+      if (Token.is(value)) {
+        if (active.has(value))
+          throw new Error('Native token aliases must not form a cycle.')
+        const shared =
+          metadata.contract === value.contract ||
+          (metadata.contract[Token.identity] !== undefined &&
+            metadata.contract[Token.identity] ===
+              value.contract[Token.identity])
+        const next = shared ? metadata.values[value.path] : value.value
+        if (next === undefined)
+          throw new Error(`Missing native token: ${value.path}.`)
+        active.add(value)
+        try {
+          return resolve(next)
+        } finally {
+          active.delete(value)
+        }
+      }
+      if (Token.isExpression(value) && 'group' in value) {
+        const text = value.parts.map(resolve).join('')
+        return value.group === 'spacing' && /^\s*calc\(/i.test(text)
+          ? `${Calculation.length(text, options) / (options.units?.px ?? 1)}px`
+          : text
+      }
+      if ('light' in value && 'dark' in value) return resolve(value[scheme])
+      throw new Error(
+        media
+          ? 'Native media-conditioned variables require the native Provider window dimensions.'
+          : 'Media-conditioned variables require a web target.',
+      )
+    }
+
+    for (const [path, source] of Object.entries(metadata.values)) {
+      const parts = metadata.paths?.[path] ?? path.split('.')
+      const property = parts.at(-1)
+      const domain = VariableSets.domain(source)
+      const mappings = metadata.contract.mappings
+      const properties = mappings === false ? undefined : mappings?.[parts[0]!]
+      const category = parts[0] === 'typography' ? property! : parts[0]!
+      const target = category === 'radius' ? 'borderRadius' : category
+      const targets = properties?.length
+        ? properties
+        : Object.hasOwn(Scalar.properties, target)
+          ? [target]
+          : []
+
+      const converted = (() => {
+        try {
+          if (parts.some((part) => /^@(media|container)\s/.test(part)))
+            throw new Error('Media-conditioned variables require a web target.')
+          const value = resolve(source)
+
+          function convert(property: string): string | number {
+            property =
+              property in Literal.aliases
+                ? Literal.aliases[property as keyof typeof Literal.aliases]
+                : property
+            if (!Object.hasOwn(Scalar.properties, property))
+              throw new Error(`Unsupported native property: ${property}.`)
+
+            if (property === 'lineHeight') {
+              if (
+                typeof value === 'string' &&
+                (/^\s*calc\(/i.test(value) ||
+                  /^\s*[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?(?:px|rem)\s*$/i.test(
+                    value,
+                  ))
+              )
+                return Scalar.length(
+                  value.trim().toLowerCase(),
+                  options,
+                  false,
+                  [path],
+                )
+
+              const multiplier =
+                typeof value === 'number' ? value : Number(value)
+              if (
+                !Number.isFinite(multiplier) ||
+                (typeof value === 'string' && !value.trim())
+              )
+                throw new Error(`Unsupported native line height: ${value}.`)
+              const size =
+                parts[0] === 'typography'
+                  ? metadata.values[
+                      [...parts.slice(0, -1), 'fontSize'].join('.')
+                    ]
+                  : undefined
+              if (size === undefined)
+                throw new Error(
+                  `Native line height requires fontSize: ${path}.`,
+                )
+              return Scalar.convert(
+                'number',
+                multiplier *
+                  Scalar.length(resolve(size), options, false, [path]),
+                options,
+                [path],
+              )
+            }
+
+            const kind =
+              Scalar.properties[property as keyof typeof Scalar.properties]
+            if (
+              typeof kind === 'string' &&
+              [
+                'fontVariant',
+                'origin',
+                'shadow',
+                'textShadow',
+                'transform',
+              ].includes(kind)
+            )
+              throw new Error(
+                `Native property ${property} does not have a scalar variable value.`,
+              )
+            if (kind === 'ratio' && typeof value !== 'number')
+              throw new Error(
+                'Native aspect ratios require numeric variable values.',
+              )
+            if (kind === 'box' || kind === 'boxSigned')
+              return Scalar.length(value, options, kind === 'boxSigned', [path])
+            return Scalar.convert(kind, value, options, [path])
+          }
+
+          if (targets.length) {
+            const values = targets.map(convert)
+            if (values.some((value) => value !== values[0]))
+              throw new Error(
+                'Mapped native properties require different converted values.',
+              )
+            return values[0]!
+          }
+          if (domain === 'spacing')
+            return Scalar.length(value, options, true, [path])
+          if (domain === 'color')
+            return Scalar.convert('color', value, options, [path])
+          return value
+        } catch (error) {
+          return [
+            `Native variable ${path}: ${error instanceof Error ? error.message : String(error)}`,
+          ] as const
+        }
+      })()
+      let parent = tree
+      for (const key of parts.slice(0, -1))
+        parent = (parent[key] ??= Object.create(null)) as typeof tree
+      parent[parts.at(-1)!] = converted
+    }
+    return tree
+  }
+}
+
+/** Compiler inputs for resolved native variables. */
+export declare namespace compile {
+  /** Complete variable catalog and explicit target mappings. */
+  type Options = Scalar.Options & {
+    /** Configuration fallback. */
+    readonly defaultVars: string
+    /** Whether the input is a standalone definition instead of a named catalog. */
+    readonly unnamed: boolean
+    /** Compatible authored definitions. */
+    readonly vars: Readonly<Record<string, Theme.Definition>>
+  }
+}
+
+/** Graph-owned profile exports and imports, excluded from public adapter options. */
+export const shared = Symbol('zyzz.compiler.native.vars')
+
+/** Static profile artifacts belonging to one source module. */
+export type Shared = {
+  readonly definitions: ReadonlyMap<string, string>
+  readonly reads: ReadonlyMap<
+    number,
+    { readonly name: string; readonly source?: string | undefined }
+  >
+}

package/src/compiler/internal/PackedStyles.ts

@@ -26,6 +26,8 @@ export type Definition = {
   readonly className?: string | undefined
   /** Attributes owned by the callable, including conditional selections. */
   readonly attributes: readonly string[]
+  /** Named Provider selections retained by separately compiled styles. */
+  readonly nativeContext?: Source.Call['nativeContext']
   /** Native HTML output; React props are the default. */
   readonly output?: 'html' | undefined
   /** Private dynamic custom properties owned by the callable. */
@@ -39,6 +41,7 @@ export type Definition = {
 /** Captures ownership without retaining source ASTs or executable expressions. */
 export function create(call: Source.Call, style: Style.NamedStyle): Definition {
   return {
+    ...(call.nativeContext ? { nativeContext: call.nativeContext } : {}),
     ...(call.slots || call.dynamicRecipe
       ? {
           dynamic: {
@@ -419,6 +422,7 @@ export function write(definition: Definition): unknown {
     JSON.stringify(
       {
         ...definition,
+        nativeContext: undefined,
         style: {
           ...definition.style,
           cssOutput: definition.style.cssOutput ?? 'atomic',

package/src/compiler/internal/Selectors.ts

@@ -6,6 +6,7 @@ import * as Theme from '../../internal/Theme.js'
 import * as AtRules from './AtRules.js'
 import * as Identity from '../../internal/Identity.js'
 import * as Identifiers from './Identifiers.js'
+import * as Names from './Names.js'
 import * as Expression from './Expression.js'
 import type * as Scope from './Scope.js'
 import * as Themes from './Themes.js'
@@ -18,7 +19,10 @@ export function scan(
   calls: readonly Ast.CallExpression[],
   links: Readonly<Record<string, Themes.Link>> = {},
   selectorKeys: ReadonlySet<number> = new Set(),
+  cssNamespaces: ReadonlyMap<number, string> = new Map(),
+  moduleId = namespace,
 ) {
+  const authoredNames = Names.collect(program)
   const conditions = new Map<number, string>()
   const localConditions = new Set<string>()
   const identities = new Map<number, string>()
@@ -163,7 +167,8 @@ export function scan(
 
   function link(call: Ast.CallExpression): Themes.Link {
     const id = Identifiers.explicit(call)
-    const name = `z-style-${id === undefined ? `${namespace}-${call.start}` : Identity.requireId(id, 'style')}`
+    const prefix = cssNamespaces.get(call.start)
+    const name = `z-style-${id === undefined ? `${prefix ? `${prefix}-` : ''}${Identity.compact(moduleId).slice(-6)}-${authoredNames.get(call.start)!}` : `id-${prefix ? `${prefix}-` : ''}${Identity.requireId(id, 'style').slice(3)}`}`
     identities.set(call.start, name)
 
     return {

package/src/compiler/internal/Stylesheets.ts

@@ -214,7 +214,7 @@ export function render(sections: readonly Section[]) {
             )
               throw new ConflictError(
                 section.owner ?? section.source,
-                `Conflicting stylesheet identity: ${identity.name}; compile libraries with package-qualified module IDs.`,
+                `Conflicting stylesheet identity: ${identity.name}; supply distinct declaration ids.`,
               )
             identities.set(key, { source: section.source, signature })
             return
@@ -230,7 +230,7 @@ export function render(sections: readonly Section[]) {
           )
             throw new ConflictError(
               section.owner ?? section.source,
-              `Conflicting animation identity: ${name}; compile libraries with package-qualified module IDs.`,
+              `Conflicting animation identity: ${name}; supply distinct declaration ids.`,
             )
 
           animations.set(name, { source: section.source, signature })

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 &&
@@ -941,7 +990,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
               'id-',
             )
           )
-            name = definition.className.slice('z_theme-'.length)
+            name = definition.className.slice('z-theme-'.length)
           tokenType = parent.tokenType
           output = parent.output
         }
@@ -977,6 +1026,11 @@ export function collect(program: Ast.Program, options: collect.Options) {
           : {}),
       })
 
+      definition = Token.bind(
+        definition,
+        definition[Token.definition].contract,
+        binding,
+      )
       calls.push(call)
       definitions.set(variable.id.start, call)
       factories.add(expression.start)
@@ -1041,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 &&
@@ -1346,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)
 
@@ -1433,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)
@@ -1454,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,
@@ -1499,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)
@@ -1557,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,
@@ -1618,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
       }
@@ -1635,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,
@@ -2018,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]
@@ -2040,10 +2226,12 @@ export function collect(program: Ast.Program, options: collect.Options) {
     scopeApplications,
     scripts,
     selections,
+    selectionUses,
     staticTokens,
     styles,
     themes: Object.freeze(themes),
     tokens,
+    varsReads,
   }
 }
 
@@ -2051,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