zyzz 0.0.21 → 0.0.22

package/src/runtime/NativeDynamic.ts

@@ -1,5 +1,6 @@
-/** Applies compiled native binding instructions to runtime scalar payloads. @module */
+/** Selects ordered native fragments and applies runtime scalar payloads. @module */
 import * as Scalar from '../react-native/internal/Scalar.js'
+import * as Calculation from '../react-native/internal/Calculation.js'
 import type * as StyleSheet from '../react-native/StyleSheet.js'
 import * as Native from './Native.js'
 import type * as Recipe from './Recipe.js'
@@ -45,14 +46,14 @@ export type Program = {
           readonly parts: readonly (
             | string
             | number
-            | { readonly slot: string }
+            | { readonly slot: string; readonly number?: true }
           )[]
         }
     )[]
   }[]
 }
 
-/** Binds generated instructions without running authoring callbacks or generating CSS. */
+/** Applies generated rules with bounded static caching and fresh scalar results. */
 export function create(
   options: create.Options,
 ): Callable<Record<string, unknown>> {
@@ -63,6 +64,10 @@ export function create(
     Object.freeze(value)
   }
   for (const style of Object.values(options.styles)) freeze(style)
+  const cache =
+    Object.keys(options.program.slots).length || options.payloads?.length
+      ? undefined
+      : new Map<string, StyleSheet.NativeStyle>()
 
   return (input = {}) => {
     const bindings: Record<string, string | number> = Object.create(null)
@@ -98,7 +103,9 @@ export function create(
     for (const [axis, choices] of Object.entries(options.axes)) {
       let value = Object.hasOwn(input, axis) ? input[axis] : undefined
       if (value === undefined) {
-        value = options.defaults[axis]
+        value = Object.hasOwn(options.defaults, axis)
+          ? options.defaults[axis]
+          : undefined
         if (value != null && Object.hasOwn(options.defaultPayloads ?? {}, axis))
           value = { [String(value)]: options.defaultPayloads![axis] }
       }
@@ -107,7 +114,8 @@ export function create(
         continue
       }
       let payload: unknown
-      if (typeof value === 'object' && !Array.isArray(value)) {
+      const scoped = typeof value === 'object' && !Array.isArray(value)
+      if (scoped) {
         const entries = Object.entries(value)
         if (entries.length !== 1)
           throw new Native.SelectionError(
@@ -128,12 +136,16 @@ export function create(
         (entry) => entry.axis === axis && entry.choice === choice,
       )
       if (definition) bind(definition.slots[0]!, payload)
-      else if (payload !== undefined)
+      else if (scoped)
         throw new Native.SelectionError(
           `Static native choice does not accept a payload: ${axis}.`,
         )
     }
 
+    const key = cache ? JSON.stringify(Object.values(selected)) : undefined
+    const cached = key === undefined ? undefined : cache?.get(key)
+    if (cached) return { style: input.style ? [cached, input.style] : cached }
+
     const output: Record<string, unknown> = {}
     let lineHeight: string | number | undefined
     for (const rule of options.program.rules) {
@@ -155,9 +167,15 @@ export function create(
           if (style.lineHeight !== undefined) lineHeight = undefined
           continue
         }
-        const values = step.parts.map((part) =>
-          typeof part === 'object' ? bindings[part.slot] : part,
-        )
+        const values = step.parts.map((part) => {
+          if (typeof part !== 'object') return part
+          const value = bindings[part.slot]
+          if (value !== undefined && part.number && typeof value !== 'number')
+            throw new Native.SelectionError(
+              'Native numeric bindings require numbers.',
+            )
+          return value
+        })
         if (values.some((value) => value === undefined))
           throw new Native.SelectionError(
             'Native binding program references an unbound slot.',
@@ -176,7 +194,7 @@ export function create(
         )
         if (property === 'padding' || property === 'margin') {
           const parts =
-            typeof value === 'string' ? value.trim().split(/\s+/) : [value]
+            typeof value === 'string' ? Calculation.parts(value) : [value]
           const [top, right = top, bottom = top, left = right] = parts.map(
             (part) =>
               Scalar.length(part, options, property === 'margin', [property]),
@@ -227,6 +245,13 @@ export function create(
         ])
     }
     const style = output as StyleSheet.NativeStyle
+    if (cache && key !== undefined) {
+      Object.freeze(style)
+      // Bound retained selections without limiting the recipe's choice space.
+      if (cache.size >= 256) cache.delete(cache.keys().next().value!)
+      cache.set(key, style)
+    }
+
     return { style: input.style ? [style, input.style] : style }
   }
 }

package/src/runtime/NativeStatic.ts

@@ -0,0 +1,145 @@
+/** Selects finite native variants from precompiled fragments. @module */
+import * as Native from './Native.js'
+import type * as StyleSheet from '../react-native/StyleSheet.js'
+
+/**
+ * Binds finite selection data without including dynamic value converters.
+ * @param options - Compiler-owned axes, defaults, ordered rules, and native fragments.
+ * @returns A callable preserving finite choices and caller-owned native overrides.
+ * @throws {Native.SelectionError} For invalid selections, missing fragments, or invalid line heights.
+ */
+export function create<
+  const axes extends Readonly<Record<string, readonly string[]>>,
+>(options: create.Options<axes>): Native.Callable<axes> {
+  const axes = Object.entries(options.axes)
+  const rules = options.rules.map((rule) => ({
+    matches: rule.matches.map(([name, choices]) => {
+      const axis = axes.findIndex(([key]) => key === name)
+      return [
+        axis,
+        choices.map((choice) => axes[axis]![1].indexOf(choice)),
+      ] as const
+    }),
+    steps: rule.steps.map((step) => {
+      if (typeof step === 'number') return step
+      const style = options.styles[step]
+      if (!style)
+        throw new Native.SelectionError(
+          'Native binding program is missing a static style.',
+        )
+      freeze(style)
+      return style
+    }),
+  }))
+  const cache = new Map<string, StyleSheet.NativeStyle>()
+
+  return (input = {}) => {
+    for (const key of Object.keys(input))
+      if (key !== 'style' && !Object.hasOwn(options.axes, key))
+        throw new Native.SelectionError(`Unknown native recipe input: ${key}.`)
+    const selected: number[] = []
+    let key = ''
+    const values: Readonly<Record<string, unknown>> = input
+    for (const [axis, choices] of axes) {
+      const supplied = Object.hasOwn(values, axis) ? values[axis] : undefined
+      const value =
+        supplied === undefined
+          ? Object.hasOwn(options.defaults, axis)
+            ? options.defaults[axis]
+            : undefined
+          : supplied
+      if (
+        value !== null &&
+        typeof value === 'object' &&
+        !Array.isArray(value)
+      ) {
+        const entries = Object.keys(value)
+        if (entries.length !== 1)
+          throw new Native.SelectionError(
+            'Native payloads require exactly one choice.',
+          )
+        if (choices.includes(entries[0]!))
+          throw new Native.SelectionError(
+            `Static native choice does not accept a payload: ${axis}.`,
+          )
+      }
+      const choice =
+        value == null
+          ? choices.length
+          : typeof value === 'string' || typeof value === 'boolean'
+            ? choices.indexOf(String(value))
+            : -1
+      if (choice < 0)
+        throw new Native.SelectionError(
+          `Unknown native recipe choice for ${axis}.`,
+        )
+      selected.push(choice)
+      key += `${choice},`
+    }
+    let style = cache.get(key)
+    if (!style) {
+      const output: Record<string, unknown> = {}
+      let lineHeight: number | undefined
+      for (const rule of rules) {
+        if (
+          !rule.matches.every(([axis, choices]) =>
+            choices.includes(selected[axis]!),
+          )
+        )
+          continue
+        for (const step of rule.steps) {
+          if (typeof step === 'number') lineHeight = step
+          else {
+            Object.assign(output, step)
+            if (step.lineHeight !== undefined) lineHeight = undefined
+          }
+        }
+      }
+      if (lineHeight !== undefined) {
+        if (
+          !Number.isFinite(lineHeight) ||
+          lineHeight < 0 ||
+          typeof output.fontSize !== 'number'
+        )
+          throw new Native.SelectionError(
+            'Numeric lineHeight requires an explicit fontSize and a nonnegative finite multiplier.',
+          )
+        output.lineHeight = lineHeight * output.fontSize
+        if (!Number.isFinite(output.lineHeight))
+          throw new Native.SelectionError(
+            'Converted lineHeight must be finite.',
+          )
+      }
+      style = Object.freeze(output) as StyleSheet.NativeStyle
+      // Retain a bounded working set even for recipes with many independent axes.
+      if (cache.size >= 256) cache.delete(cache.keys().next().value!)
+      cache.set(key, style)
+    }
+    return { style: input.style ? [style, input.style] : style }
+  }
+}
+
+/** Compiler-owned finite metadata and converted native fragments. */
+export declare namespace create {
+  /** Numeric steps are line-height multipliers resolved against the final font size. */
+  type Options<
+    axes extends Readonly<Record<string, readonly string[]>> = Readonly<
+      Record<string, readonly string[]>
+    >,
+  > = Native.create.Options<axes> & {
+    /** Ordered rules containing static fragment names and line-height multipliers. */
+    readonly rules: readonly {
+      /** Axis names and allowed choices, all of which must match. */
+      readonly matches: readonly (readonly [string, readonly string[]])[]
+      /** Fragment names or line-height multipliers applied in order. */
+      readonly steps: readonly (string | number)[]
+    }[]
+  }
+}
+
+function freeze(value: object): void {
+  if (Object.isFrozen(value)) return
+  for (const child of Object.values(value))
+    if (child && typeof child === 'object') freeze(child)
+  Object.freeze(value)
+}

package/src/runtime/NativeVars.ts

@@ -0,0 +1,189 @@
+/** Selects immutable native variable tables emitted by the compiler. @module */
+import type * as Literal from '../internal/Literal.js'
+import * as Media from './internal/NativeMedia.js'
+import type * as StyleSheet from '../react-native/StyleSheet.js'
+import type * as Vars from '../Vars.js'
+
+const binding = Symbol('zyzz.native.vars')
+
+/** Static values with deferred diagnostics for unsupported native leaves. */
+export type EncodedTree = {
+  readonly [key: string]: string | number | EncodedTree | readonly [string]
+}
+
+/** Resolves portable reference domains to readonly native value types. */
+export type Values<
+  values,
+  category = undefined,
+  root extends boolean = true,
+> = {
+  readonly [key in Exclude<
+    keyof values,
+    root extends true ? 'breakpoint' | 'containerNames' : never
+  >]: values[key] extends Vars.Value
+    ? category extends 'fontWeight'
+      ? Exclude<StyleSheet.NativeStyle['fontWeight'], undefined>
+      : category extends 'typography'
+        ? key extends 'fontWeight'
+          ? Exclude<StyleSheet.NativeStyle['fontWeight'], undefined>
+          : key extends 'lineHeight'
+            ? number
+            : Scalar<Vars.Scalar<values[key]>>
+        : Scalar<Vars.Scalar<values[key]>>
+    : Values<values[key], root extends true ? key : category, false>
+}
+
+/** Native scalar values nested under their authored variable paths. */
+export type Tree = { readonly [key: string]: string | number | Tree }
+
+type Scalar<value> = value extends number | Literal.Length ? number : string
+
+type Definition = {
+  readonly defaultVars: string
+  readonly media?:
+    | {
+        readonly profiles: Readonly<Record<string, Definition['profiles']>>
+        readonly queries: readonly Media.Query[]
+      }
+    | undefined
+  readonly profiles: Readonly<
+    Record<string, Readonly<Record<'dark' | 'light', Tree>>>
+  >
+  readonly unnamed: boolean
+}
+
+/** Copies and shares equal branches across the compiled profiles. */
+export function create(options: create.Options): object {
+  const shared = new Map<string, Tree>()
+
+  function freeze(tree: EncodedTree): Tree {
+    const key = JSON.stringify(tree)
+    const previous = shared.get(key)
+    if (previous) return previous
+
+    const value: Tree = {}
+    for (const [name, entry] of Object.entries(tree)) {
+      const diagnostic = Array.isArray(entry) ? String(entry[0]) : undefined
+      Object.defineProperty(
+        value,
+        name,
+        diagnostic !== undefined
+          ? {
+              enumerable: true,
+              get() {
+                throw new Error(diagnostic)
+              },
+            }
+          : {
+              enumerable: true,
+              value:
+                typeof entry === 'object'
+                  ? freeze(entry as EncodedTree)
+                  : entry,
+            },
+      )
+    }
+    Object.freeze(value)
+    shared.set(key, value)
+    return value
+  }
+
+  function profiles(value: create.Options['profiles']): Definition['profiles'] {
+    return Object.freeze(
+      Object.fromEntries(
+        Object.entries(value).map(([name, schemes]) => [
+          name,
+          Object.freeze({
+            dark: freeze(schemes.dark),
+            light: freeze(schemes.light),
+          }),
+        ]),
+      ),
+    )
+  }
+
+  return Object.freeze({
+    [binding]: Object.freeze({
+      defaultVars: options.defaultVars,
+      ...(options.media
+        ? {
+            media: Object.freeze({
+              profiles: Object.freeze(
+                Object.fromEntries(
+                  Object.entries(options.media.profiles).map(([key, value]) => [
+                    key,
+                    profiles(value),
+                  ]),
+                ),
+              ),
+              queries: options.media.queries,
+            }),
+          }
+        : {}),
+      profiles: profiles(options.profiles),
+      unnamed: options.unnamed,
+    }),
+  })
+}
+
+/** Compiler-generated native profiles. */
+export declare namespace create {
+  /** Static tables and the owning configuration's default name. */
+  type Options = {
+    /** Fallback when the Provider omits its selection. */
+    readonly defaultVars: string
+    /** Precompiled alternatives for supported window queries. */
+    readonly media?:
+      | {
+          readonly profiles: Readonly<Record<string, Options['profiles']>>
+          readonly queries: readonly Media.Query[]
+        }
+      | undefined
+    /** Native values for every configured name and scheme. */
+    readonly profiles: Readonly<
+      Record<string, Readonly<Record<'dark' | 'light', EncodedTree>>>
+    >
+    /** A standalone definition whose values do not depend on the selected name. */
+    readonly unnamed: boolean
+  }
+}
+
+/** Reads a compiled profile without evaluating authoring or accessing device state. */
+export function read(value: object, selection: read.Options): Tree {
+  if (
+    !value ||
+    (typeof value !== 'object' && typeof value !== 'function') ||
+    !Object.hasOwn(value, binding)
+  )
+    throw new Error(
+      'useVars requires variables compiled by the native adapter.',
+    )
+
+  const definition = (value as { readonly [binding]: Definition })[binding]
+  const profiles =
+    definition.media && selection.viewport
+      ? definition.media.profiles[
+          Media.select(definition.media.queries, selection.viewport)
+        ]!
+      : definition.profiles
+  const name = selection.set ?? definition.defaultVars
+  const profile =
+    (Object.hasOwn(profiles, name) ? profiles[name] : undefined) ??
+    (definition.unnamed ? profiles.default : undefined)
+  if (!profile) throw new Error(`Unknown native vars: ${name}.`)
+
+  return profile[selection.colorScheme]
+}
+
+/** Selection supplied by the nearest native Provider. */
+export declare namespace read {
+  /** Resolved appearance and an optional variable name. */
+  type Options = {
+    /** Resolved native color scheme. */
+    readonly colorScheme: 'dark' | 'light'
+    /** Selected name, or the configuration default when omitted. */
+    readonly set?: string | undefined
+    /** Native window dimensions; unsupported leaves remain lazy when absent. */
+    readonly viewport?: Media.Viewport | undefined
+  }
+}

package/src/runtime/index.ts

@@ -29,6 +29,12 @@ export * as NativeContext from './NativeContext.js'
 /** Ordered native scalar bindings for generated dynamic callables. */
 export * as NativeDynamic from './NativeDynamic.js'
 
+/** Finite native selection without dynamic value conversion. */
+export * as NativeStatic from './NativeStatic.js'
+
+/** Readonly native variable selection for compiled hooks. */
+export * as NativeVars from './NativeVars.js'
+
 /** Scoped recipe inputs bound to fixed variable slots. */
 export * as PayloadRecipe from './PayloadRecipe.js'
 

package/src/runtime/internal/NativeMedia.ts

@@ -0,0 +1,63 @@
+/** Selects precompiled media alternatives using native logical dimensions. @module */
+
+/** Comparison data emitted by the compiler, with no CSS parsing at application time. */
+export type Query =
+  | { readonly kind: 'and'; readonly queries: readonly Query[] }
+  | {
+      readonly kind: 'compare'
+      readonly left: number | 'height' | 'width'
+      readonly operator: '<' | '<=' | '=' | '>' | '>='
+      readonly right: number | 'height' | 'width'
+    }
+  | { readonly kind: 'not'; readonly query: Query }
+  | { readonly kind: 'or'; readonly queries: readonly Query[] }
+
+/** Window measurements supplied by the native React adapter. */
+export type Viewport = {
+  readonly height: number
+  readonly width: number
+}
+
+/** Computes the selected alternative without interpreting authoring code. */
+export function select(
+  queries: readonly Query[],
+  viewport: Viewport | undefined,
+): string {
+  if (!viewport)
+    throw new Error(
+      'Native media queries require the native Provider window dimensions.',
+    )
+  if (
+    !Number.isFinite(viewport.height) ||
+    viewport.height < 0 ||
+    !Number.isFinite(viewport.width) ||
+    viewport.width < 0
+  )
+    throw new Error('Native window dimensions must be finite and nonnegative.')
+
+  const dimensions = viewport
+  function matches(query: Query): boolean {
+    if (query.kind === 'and') return query.queries.every(matches)
+    if (query.kind === 'or') return query.queries.some(matches)
+    if (query.kind === 'not') return !matches(query.query)
+
+    const left =
+      typeof query.left === 'number' ? query.left : dimensions[query.left]
+    const right =
+      typeof query.right === 'number' ? query.right : dimensions[query.right]
+    switch (query.operator) {
+      case '<':
+        return left < right
+      case '<=':
+        return left <= right
+      case '=':
+        return left === right
+      case '>':
+        return left > right
+      case '>=':
+        return left >= right
+    }
+  }
+
+  return queries.map((query) => (matches(query) ? '1' : '0')).join('')
+}

package/src/vite/index.ts

@@ -20,6 +20,7 @@ import * as Scope from '../compiler/internal/Scope.js'
 import type { Environment, Plugin, Rollup, ViteDevServer } from 'vite'
 import * as Graph from '../compiler/Graph.js'
 import * as Source from '../compiler/Source.js'
+import * as ThemeRules from '../web/internal/Themes.js'
 
 /**
  * Compiles physical project source without executing authoring code.
@@ -749,6 +750,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       )
 
     const result = entry.compiler.compile({
+      [ThemeRules.shared]: native ? undefined : 'all',
       [Syntax.cache]: snapshot(entry.environment).programs(modules),
       compiler: options.compiler,
       reset: options.reset ? Reset.read() : undefined,
@@ -812,46 +814,6 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         configurations.set(key, configuration)
       }
 
-    const map = new Mapping.GenMapping()
-    const styles: string[] = []
-    let line = 0
-
-    for (const [id, output] of Object.entries(result.modules)) {
-      if (!connected.has(sourceFile(id)!)) continue
-      if (!output.css) continue
-
-      for (const mapping of Mapping.allMappings(
-        Mapping.fromMap(JSON.stringify(output.cssMap)),
-      )) {
-        const generated = {
-          column: mapping.generated.column,
-          line: mapping.generated.line + line,
-        }
-
-        if (mapping.source !== undefined && mapping.original !== undefined) {
-          const location = {
-            generated,
-            original: mapping.original,
-            source: sourceFile(mapping.source) ?? mapping.source,
-          }
-
-          if (mapping.name === undefined) Mapping.addMapping(map, location)
-          else Mapping.addMapping(map, { ...location, name: mapping.name })
-        } else Mapping.addMapping(map, { generated })
-      }
-
-      for (const [index, source] of output.cssMap.sources.entries())
-        if (source !== null)
-          Mapping.setSourceContent(
-            map,
-            sourceFile(source) ?? source,
-            output.cssMap.sourcesContent?.[index] ?? null,
-          )
-
-      styles.push(output.css)
-      line += output.css.split('\n').length
-    }
-
     const owners = new Map<string, string>()
 
     for (const id of new Set(Object.values(result.sharedAssetOwners ?? {}))) {
@@ -1018,10 +980,15 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       contractIds: Object.keys(compiled),
       configurations,
       connections: staged,
-      css: styles.join('\n'),
+      css: output.css,
       sharedCss: new TextDecoder().decode(shared.code),
       sharedCssMap: sharedMap,
-      cssMap: Mapping.toEncodedMap(map),
+      cssMap: {
+        ...output.cssMap,
+        sources: output.cssMap.sources.map((source) =>
+          source === null ? null : (sourceFile(source) ?? source),
+        ),
+      },
       map: {
         ...output.map,
         sources: output.map.sources.map((source) =>