zyzz 0.0.3 → 0.0.5

package/src/next/loader.ts

@@ -90,10 +90,11 @@ async function compile(context: Context, source: string) {
 
       const specifier = node.source.value
       links[specifier] = null
+      // Next owns this virtual module, which has no physical stylesheet contract.
+      if (specifier === 'next/root-params') continue
       if (
         specifier === 'zyzz' ||
-        (specifier.startsWith('zyzz/') &&
-          specifier !== 'zyzz/default') ||
+        (specifier.startsWith('zyzz/') && specifier !== 'zyzz/default') ||
         specifier.startsWith('node:')
       )
         continue
@@ -288,15 +289,28 @@ async function compile(context: Context, source: string) {
     )
       .split(Path.sep)
       .join('/')
+    // Turbopack appends the output extension to loader-transformed resource paths.
+    const resource = await Fs.stat(context.resourcePath).then(
+      () => context.resourcePath,
+      async (error: NodeJS.ErrnoException) => {
+        if (error.code !== 'ENOENT') throw error
+        const original = context.resourcePath.slice(
+          0,
+          -Path.extname(context.resourcePath).length,
+        )
+        await Fs.access(original)
+        return original
+      },
+    )
     const requests = [
       ...(graph.sharedCss
         ? [
-            `import ${JSON.stringify(sharedFile.startsWith('.') ? sharedFile : `./${sharedFile}`)};`,
+            `import ${JSON.stringify(sharedFile.startsWith('../') ? sharedFile : `./${sharedFile}`)};`,
           ]
         : []),
       ...(output.css
         ? [
-            `import ${JSON.stringify(`./${Path.basename(context.resourcePath)}?zyzz-style`)};`,
+            `import ${JSON.stringify(`./${Path.basename(resource)}?zyzz-style`)};`,
           ]
         : []),
     ]
@@ -326,7 +340,7 @@ async function compile(context: Context, source: string) {
       .split(Path.sep)
       .join('/')
     requests.push(
-      `import ${JSON.stringify(relative.startsWith('.') ? relative : `./${relative}`)};`,
+      `import ${JSON.stringify(relative.startsWith('../') ? relative : `./${relative}`)};`,
     )
   }
 

package/src/node/Host.ts

@@ -54,8 +54,7 @@ export async function create(options: create.Options): Promise<Runtime> {
         fonts:
           options.native.fonts && Object.freeze({ ...options.native.fonts }),
         // Theme definitions are immutable. Only the caller-owned catalog needs copying.
-        themes:
-          options.native.themes && Object.freeze({ ...options.native.themes }),
+        vars: options.native.vars && Object.freeze({ ...options.native.vars }),
         units:
           options.native.units && Object.freeze({ ...options.native.units }),
       })

package/src/react-native/Host.ts

@@ -28,7 +28,7 @@ export function create<
     'highContrast',
     'reducedMotion',
     'rtl',
-    'theme',
+    'set',
   ] as const
   const bindings = new Set<(context: Snapshot) => () => void>()
   const listeners = new Set<(context: Snapshot) => void>()
@@ -45,8 +45,8 @@ export function create<
         (key) => !keys.includes(key as (typeof keys)[number]),
       ) ||
       (values.colorScheme !== 'light' && values.colorScheme !== 'dark') ||
-      typeof values.theme !== 'string' ||
-      !values.theme.trim() ||
+      typeof values.set !== 'string' ||
+      !values.set.trim() ||
       typeof values.density !== 'number' ||
       !Number.isFinite(values.density) ||
       values.density <= 0 ||
@@ -58,7 +58,7 @@ export function create<
       typeof values.rtl !== 'boolean'
     )
       throw new InputError(
-        'Provide a theme, resolved scheme, positive finite scales, and boolean accessibility inputs.',
+        'Provide a set, resolved scheme, positive finite scales, and boolean accessibility inputs.',
       )
     const hairlineWidth =
       Math.round(0.4 * values.density) / values.density || 1 / values.density
@@ -265,8 +265,8 @@ export type Inputs = {
   readonly reducedMotion: boolean
   /** Whether layout follows a right-to-left direction. */
   readonly rtl: boolean
-  /** Compiled theme label selected by binding factories. */
-  readonly theme: string
+  /** Compiled set label selected by binding factories. */
+  readonly set: string
 }
 
 /** An operation attempted to change a disposed or currently updating host. */

package/src/react-native/StyleSheet.ts

@@ -1,6 +1,7 @@
-/** Compiles portable declarations into immutable native theme tables. @module */
+/** Compiles portable declarations into immutable native set tables. @module */
 import type * as Style from '../Style.js'
-import type * as Theme from '../Theme.js'
+import type * as Vars from '../Vars.js'
+import type * as Theme from '../internal/Theme.js'
 import * as Token from '../internal/Token.js'
 import type * as Native from '../internal/NativeProperties.js'
 import * as Values from './internal/Values.js'
@@ -18,7 +19,7 @@ export const absoluteFill = Object.freeze({
   top: 0,
 } as const)
 
-/** Explicit theme alternative, never inferred from a device. */
+/** Explicit set alternative, never inferred from a device. */
 export type ColorScheme = 'dark' | 'light'
 
 /** Failure to represent the supplied definitions on the native target. */
@@ -46,7 +47,7 @@ export class CompileError extends Error {
 }
 
 /**
- * Resolves portable tokens into two static scheme tables per supplied theme.
+ * Resolves portable tokens into two static scheme tables per supplied set.
  * px defaults to one native logical unit. rem and font families require mappings.
  * No device state, CSS parser, stylesheet registration, or runtime binding is used.
  * @throws {CompileError} For unsupported semantics or invalid conversion inputs.
@@ -63,7 +64,7 @@ export function compile<
   },
 ): compile.ReturnType<name, themeName, definition, platform> {
   for (const key of Object.keys(options))
-    if (!['fonts', 'platform', 'styles', 'themes', 'units'].includes(key))
+    if (!['fonts', 'platform', 'styles', 'vars', 'units'].includes(key))
       fail('invalid_options', 'Unknown native compiler option.', [key])
 
   if (
@@ -137,15 +138,18 @@ export function compile<
     }
   }
 
-  const themes: readonly (readonly [string, Theme.Definition | undefined])[] =
-    options.themes === undefined
+  const vars: readonly (readonly [
+    string,
+    Theme.Definition | Vars.Definition | undefined,
+  ])[] =
+    options.vars === undefined
       ? [['default', undefined]]
-      : Object.entries(options.themes)
-  if (!themes.length)
+      : Object.entries(options.vars)
+  if (!vars.length)
     fail(
       'invalid_options',
-      'Supply at least one theme, or omit themes for a default table.',
-      ['themes'],
+      'Supply at least one set, or omit vars for a default table.',
+      ['vars'],
     )
 
   const tables: Record<
@@ -156,23 +160,19 @@ export function compile<
   const diagnostics: Diagnostic[] = []
   let independent: Readonly<Record<string, NativeStyle>> | undefined
 
-  for (const [label, theme] of themes) {
+  for (const [label, set] of vars) {
     if (!label)
-      fail('invalid_options', 'Theme labels must be nonempty.', [
-        'themes',
-        label,
-      ])
+      fail('invalid_options', 'Theme labels must be nonempty.', ['vars', label])
     const metadata =
-      theme &&
-      (Object.getOwnPropertyDescriptor(theme, Token.definition)?.value as
+      set &&
+      (Object.getOwnPropertyDescriptor(set, Token.definition)?.value as
         | Token.Metadata
         | undefined)
-    if (options.themes !== undefined && !metadata)
-      fail(
-        'invalid_options',
-        'Expected a Theme.define or Config theme handle.',
-        ['themes', label],
-      )
+    if (options.vars !== undefined && !metadata)
+      fail('invalid_options', 'Expected a Theme.define or Config set handle.', [
+        'vars',
+        label,
+      ])
 
     const schemes = {} as Record<
       ColorScheme,
@@ -387,7 +387,9 @@ export declare namespace compile {
     /** Immutable shared definitions, also accepted by Css.compile. */
     readonly styles: Style.Definition<name>
     /** Explicit output labels. Omission creates the token-fallback default table. */
-    readonly themes?: Readonly<Record<themeName, Theme.Definition>> | undefined
+    readonly vars?:
+      | Readonly<Record<themeName, Theme.Definition | Vars.Definition>>
+      | undefined
     /** Positive logical-unit scales. px defaults to one, rem has no default. */
     readonly units?:
       | { readonly px?: number | undefined; readonly rem?: number | undefined }
@@ -514,7 +516,7 @@ type Compiled<definition, platform, name extends string> =
 
 /** Optional native authoring constraint used with satisfies before Style.define. */
 export type Properties = {
-  /** Portable literals or property-compatible scalar theme references. */
+  /** Portable literals or property-compatible scalar set references. */
   readonly [property in keyof typeof properties]?:
     | Atom<(typeof properties)[property]>
     | Reference<property>
@@ -522,7 +524,7 @@ export type Properties = {
 
 /**
  * Looks up an existing table without allocating or resolving device state.
- * @throws {SelectionError} For unknown own theme labels or color schemes.
+ * @throws {SelectionError} For unknown own set labels or color schemes.
  */
 export function select<const tables extends Tables>(
   styles: tables,
@@ -536,12 +538,12 @@ export function select<name extends string, themeName extends string>(
     !styles ||
     !options ||
     (options.colorScheme !== 'light' && options.colorScheme !== 'dark') ||
-    !Object.hasOwn(styles, options.theme)
+    !Object.hasOwn(styles, options.set)
   )
     throw new SelectionError(
-      'Select an existing theme label and light or dark colorScheme.',
+      'Select an existing set label and light or dark colorScheme.',
     )
-  return styles[options.theme][options.colorScheme]
+  return styles[options.set][options.colorScheme]
 }
 
 /** Native lookup options. */
@@ -551,7 +553,7 @@ export declare namespace select {
     /** Precompiled color scheme. */
     readonly colorScheme: ColorScheme
     /** Own label in the compiled tables. */
-    readonly theme: themeName
+    readonly set: themeName
   }
 }
 
@@ -771,23 +773,28 @@ function resolve(
     (metadata.contract === value.contract ||
       (metadata.contract[Token.identity] !== undefined &&
         metadata.contract[Token.identity] === value.contract[Token.identity]))
-  const resolved = shared
+  let resolved = shared
     ? Object.hasOwn(metadata.values, value.path)
       ? metadata.values[value.path]
       : undefined
     : value.value
   if (resolved === undefined)
     fail('unsupported_value', 'Theme is missing a live token.', path)
-  if (typeof resolved === 'object' && resolved.light !== resolved.dark)
-    resolution.schemeIndependent = false
-  const scalar = typeof resolved === 'object' ? resolved[scheme] : resolved
-  if (typeof scalar !== 'string' && typeof scalar !== 'number')
-    fail(
-      'unsupported_value',
-      'Expected a complete scalar color-scheme pair.',
-      path,
-    )
-  return scalar
+  while (typeof resolved === 'object') {
+    if (Token.is(resolved)) {
+      resolved = resolved.value
+      continue
+    }
+    if ('default' in resolved)
+      fail(
+        'unsupported_feature',
+        'Media-conditioned variables require a web target.',
+        path,
+      )
+    if (resolved.light !== resolved.dark) resolution.schemeIndependent = false
+    resolved = resolved[scheme]
+  }
+  return resolved
 }
 
 type TransformValues = {

package/src/react-native/Variants.ts

@@ -20,8 +20,8 @@ export type Definition<
 
 /**
  * Compiles every finite selection, including omitted axes, before application.
- * @param options - Static recipe, themes, and explicit native destination inputs.
- * @returns Immutable native tables with at most 256 selections per theme and scheme.
+ * @param options - Static recipe, vars, and explicit native destination inputs.
+ * @returns Immutable native tables with at most 256 selections per set and scheme.
  * @throws {CompileError} When recipe data is invalid or exceeds the selection budget.
  * @throws {StyleSheet.CompileError} When selected declarations cannot compile for native.
  */
@@ -108,7 +108,7 @@ export declare namespace compile {
     /** Validated static recipe retained by Source.extract. */
     readonly recipe: recipe
   }
-  /** Immutable tables retaining recipe metadata and theme labels. */
+  /** Immutable tables retaining recipe metadata and set labels. */
   type ReturnType<
     recipe extends Recipe.Definition = Recipe.Definition,
     themeName extends string = string,

package/src/react-native/react.ts

@@ -4,19 +4,19 @@ import * as NativeContext from '../runtime/NativeContext.js'
 
 const context = React.createContext(styles(undefined))
 
-/** Supplies theme and resolved device appearance to compiled native components. */
+/** Supplies set and resolved device appearance to compiled native components. */
 export function Provider(props: Provider.Props) {
   if (
     (props.colorScheme !== 'light' && props.colorScheme !== 'dark') ||
-    (props.theme !== undefined &&
-      (typeof props.theme !== 'string' || !props.theme.trim()))
+    (props.set !== undefined &&
+      (typeof props.set !== 'string' || !props.set.trim()))
   )
     throw new Error(
-      'Native appearance requires a resolved light/dark scheme and a nonempty theme name.',
+      'Native appearance requires a resolved light/dark scheme and a nonempty set name.',
     )
   const value = React.useMemo(
-    () => styles({ colorScheme: props.colorScheme, theme: props.theme }),
-    [props.colorScheme, props.theme],
+    () => styles({ colorScheme: props.colorScheme, set: props.set }),
+    [props.colorScheme, props.set],
   )
   return React.createElement(context.Provider, { value }, props.children)
 }

package/src/rollup/index.ts

@@ -0,0 +1,5 @@
+/** Exposes the Zyzz rollup build adapter. @module */
+import { zyzz as unplugin } from '../unplugin/index.js'
+
+/** Compiles project sources and emits `zyzz.css` into the bundler output directory. */
+export const zyzz = unplugin.rollup

package/src/runtime/Appearance.ts

@@ -2,7 +2,7 @@
 import * as Scheme from '../internal/Scheme.js'
 
 /**
- * Binds an HTML-safe script factory to compiled named theme classes.
+ * Binds an HTML-safe script factory to compiled named set classes.
  * The factory is server-safe; only its returned JavaScript accesses the DOM.
  * A saved scheme swaps the stylesheet scheme class and sets the inline `color-scheme`;
  * a saved `null` scheme removes both so a cleared selection survives reloads.
@@ -19,7 +19,7 @@ export function create(
     const key = serialize(options.storageKey ?? 'zyzz')
     const schemes = serialize(Object.entries(Scheme.classes))
 
-    return `(()=>{try{const value=JSON.parse(localStorage.getItem(${key})||"null");if(!value||typeof value!=="object"||Array.isArray(value))return;const root=document.documentElement;const catalog=new Map(${catalog});if(Object.hasOwn(value,"theme")&&typeof value.theme==="string"&&catalog.has(value.theme)){root.classList.remove(...catalog.values());root.classList.add(catalog.get(value.theme))}const schemes=new Map(${schemes});if(Object.hasOwn(value,"colorScheme")){if(value.colorScheme===null){root.classList.remove(...schemes.values());root.style.removeProperty("color-scheme")}else if(schemes.has(value.colorScheme)){root.classList.remove(...schemes.values());root.classList.add(schemes.get(value.colorScheme));root.style.colorScheme=value.colorScheme}}}catch{}})();`
+    return `(()=>{try{const value=JSON.parse(localStorage.getItem(${key})||"null");if(!value||typeof value!=="object"||Array.isArray(value))return;const root=document.documentElement;const catalog=new Map(${catalog});if(Object.hasOwn(value,"set")&&typeof value.set==="string"&&catalog.has(value.set)){root.classList.remove(...catalog.values());root.classList.add(catalog.get(value.set))}const schemes=new Map(${schemes});if(Object.hasOwn(value,"colorScheme")){if(value.colorScheme===null){root.classList.remove(...schemes.values());root.style.removeProperty("color-scheme")}else if(schemes.has(value.colorScheme)){root.classList.remove(...schemes.values());root.classList.add(schemes.get(value.colorScheme));root.style.colorScheme=value.colorScheme}}}catch{}})();`
   }
 }
 
@@ -33,11 +33,11 @@ export declare namespace create {
 }
 
 /**
- * Binds root selection controls to compiled named theme classes.
+ * Binds root selection controls to compiled named set classes.
  * Creation touches no browser state; `get` and `set` read and write
  * `document.documentElement` and the record the initialization script restores.
  * @param entries - Catalog names paired with compiled scope classes.
- * @param options - Default theme reported without a root class and the storage key.
+ * @param options - Default set reported without a root class and the storage key.
  * @returns Controls reading the applied root selection and applying saved changes.
  * @throws {TypeError} If a named catalog receives no default or one outside its entries.
  */
@@ -49,24 +49,24 @@ export function root<const name extends string>(
   const key = options.storageKey ?? 'zyzz'
   const schemes = Object.entries(Scheme.classes) as [Scheme.Name, string][]
 
-  // Named catalogs always report a theme, so the fallback must be one of them.
+  // Named catalogs always report a set, so the fallback must be one of them.
   if (
     catalog.size &&
-    (options.defaultTheme === undefined || !catalog.has(options.defaultTheme))
+    (options.defaultVars === undefined || !catalog.has(options.defaultVars))
   )
-    throw new TypeError('defaultTheme must name a catalog theme.')
+    throw new TypeError('defaultVars must name a catalog set.')
 
   function get(): Selection<name> {
     const classes = document.documentElement.classList
-    const theme =
+    const set =
       [...catalog].find(([, className]) => classes.contains(className))?.[0] ??
-      options.defaultTheme
+      options.defaultVars
     const colorScheme = schemes.find(([, className]) =>
       classes.contains(className),
     )?.[0]
 
     return {
-      ...(theme === undefined ? {} : { theme }),
+      ...(set === undefined ? {} : { set }),
       ...(colorScheme === undefined ? {} : { colorScheme }),
     } as Selection<name>
   }
@@ -75,20 +75,20 @@ export function root<const name extends string>(
     const element = document.documentElement
     const next = { ...get(), ...selection } as {
       colorScheme?: Scheme.Name | undefined
-      theme?: string | undefined
+      set?: string | undefined
     }
     const scopeClass =
-      next.theme === undefined ? undefined : catalog.get(next.theme)
+      next.set === undefined ? undefined : catalog.get(next.set)
 
     // Rejected input leaves the document and the saved record untouched.
-    if (next.theme !== undefined && scopeClass === undefined)
-      throw new TypeError('Invalid theme selection.')
+    if (next.set !== undefined && scopeClass === undefined)
+      throw new TypeError('Invalid set selection.')
 
     if (
       next.colorScheme !== undefined &&
       !Object.hasOwn(Scheme.classes, next.colorScheme)
     )
-      throw new TypeError('Invalid theme selection.')
+      throw new TypeError('Invalid set selection.')
 
     element.classList.remove(
       ...catalog.values(),
@@ -105,7 +105,7 @@ export function root<const name extends string>(
     // The record mirrors the applied root, so a cleared scheme saves as null
     // and the script removes a server-rendered scheme on the next load.
     const record = {
-      ...(next.theme === undefined ? {} : { theme: next.theme }),
+      ...(next.set === undefined ? {} : { set: next.set }),
       colorScheme: next.colorScheme ?? null,
     }
 
@@ -124,7 +124,7 @@ export declare namespace root {
   /** Catalog defaults and storage settings. */
   type Options<name extends string = string> = {
     /** Theme reported by `get` when the root carries no catalog class; required with a named catalog. */
-    readonly defaultTheme?: NoInfer<name> | undefined
+    readonly defaultVars?: NoInfer<name> | undefined
     /** localStorage key shared with the initialization script; defaults to zyzz. */
     readonly storageKey?: string | undefined
   }
@@ -132,18 +132,18 @@ export declare namespace root {
 
 /** Live root selection controls. */
 export type Root<name extends string> = {
-  /** Reads the theme and scheme classes the root carries. */
+  /** Reads the set and scheme classes the root carries. */
   readonly get: () => Selection<name>
   /** Applies fields over the current selection and saves the result. */
   readonly set: (selection: Partial<Selection<name>>) => void
 }
 
-/** A catalog theme with an optional scheme; an omitted scheme inherits. Token-free and single-theme configurations select only a scheme. */
+/** A catalog set with an optional scheme; an omitted scheme inherits. Token-free and single-set configurations select only a scheme. */
 export type Selection<name extends string> = [name] extends [never]
   ? { readonly colorScheme?: Scheme.Name | undefined }
   : {
       readonly colorScheme?: Scheme.Name | undefined
-      readonly theme: name
+      readonly set: name
     }
 
 function serialize(value: unknown): string {

package/src/runtime/Dynamic.ts

@@ -15,7 +15,10 @@ export function create(
       return value === '' ? ' ' : value
     })
     const external = input.className
-    const style = { ...input.variables, ...input.style }
+    const style: Record<string, string | number | undefined> = {
+      ...input.vars,
+      ...input.style,
+    }
 
     for (let index = 0; index < slots.length; index++)
       style[slots[index]![1].name] = values[index]!

package/src/runtime/NativeContext.ts

@@ -3,12 +3,12 @@ import type * as Native from './Native.js'
 
 const binding = Symbol('zyzz.native.context')
 
-/** Render-local theme and resolved appearance. */
+/** Render-local set and resolved appearance. */
 export type Context = {
   /** Resolved system appearance or an explicit override. */
   readonly colorScheme: 'dark' | 'light'
-  /** Named compiled theme; omission uses each configuration default. */
-  readonly theme?: string | undefined
+  /** Named compiled set; omission uses each configuration default. */
+  readonly set?: string | undefined
 }
 
 type Callable = (input: never) => Native.Props<object>
@@ -19,17 +19,17 @@ type Tables = Readonly<
 /** Retains compiled alternatives without selecting a device context at module evaluation. */
 export function create<const tables extends Tables>(
   tables: tables,
-  defaultTheme: keyof tables & string,
+  defaultVars: keyof tables & string,
 ): tables[keyof tables]['light'] {
   const fallback =
-    Object.keys(tables).length === 1 && defaultTheme === 'default'
+    Object.keys(tables).length === 1 && defaultVars === 'default'
       ? tables.default
       : undefined
 
   function select(context: Context, input?: never) {
-    const theme = context.theme ?? defaultTheme
-    const table = tables[theme] ?? fallback
-    if (!table) throw new Error(`Unknown native theme: ${theme}.`)
+    const set = context.set ?? defaultVars
+    const table = tables[set] ?? fallback
+    if (!table) throw new Error(`Unknown native set: ${set}.`)
     return table[context.colorScheme](input!).style
   }
   function props(input?: never) {

package/src/runtime/NativeDynamic.ts

@@ -27,10 +27,8 @@ export type RecipeCallable<input> = <
 /** Adapts a published web callable's payload to native styling overrides. */
 export type From<fn> = fn extends (...args: infer args) => unknown
   ? [] extends args
-    ? RecipeCallable<
-        Omit<NonNullable<args[0]>, 'style' | 'className' | 'variables'>
-      >
-    : Callable<Omit<NonNullable<args[0]>, 'style' | 'className' | 'variables'>>
+    ? RecipeCallable<Omit<NonNullable<args[0]>, 'style' | 'className' | 'vars'>>
+    : Callable<Omit<NonNullable<args[0]>, 'style' | 'className' | 'vars'>>
   : never
 
 /** Ordered static and dynamic assignments selected by finite recipe choices. */

package/src/runtime/Props.ts

@@ -8,14 +8,14 @@ import type { style } from '../styleFunction.js'
  * Binds compiled classes to the web styling override contract.
  * Returns fresh props; without variable assignments, inline styles retain their identity.
  * Never generates rules or changes the supplied overrides.
- * @returns A callable accepting className, style, and variables.
+ * @returns A callable accepting className, style, and vars.
  */
 export function create({ className }: create.Options): style.ReturnType {
   return ((overrides?: style.Options) => {
     if (!overrides) return { className }
 
-    const { className: external, style, variables } = overrides
-    const inline = variables ? { ...variables, ...style } : style
+    const { className: external, style, vars } = overrides
+    const inline = vars ? { ...vars, ...style } : style
     const merged =
       className && external ? `${className} ${external}` : external || className