zyzz 0.0.19 → 0.0.21

package/src/internal/Token.ts

@@ -262,6 +262,11 @@ export function acceptsReference(
   if (property.startsWith('--')) return true
   function check(value: Value): boolean {
     if (is(value)) return acceptsReference(value, property)
+    if (isExpression(value))
+      return Binding.accepts(
+        value.group === 'color' ? 'color' : 'length',
+        property,
+      )
     if (typeof value === 'object') return Object.values(value).every(check)
     if (typeof value === 'number') {
       const rule = Literal.rule(property)
@@ -328,6 +333,7 @@ export function acceptsReference(
 export function bind<tokens extends Theme.Tokens>(
   original: Theme.Definition<tokens>,
   contract: Contract,
+  cssName?: string,
 ): Theme.Definition<tokens> {
   type Tree = { [key: string]: Reference | Tree }
 
@@ -366,7 +372,14 @@ export function bind<tokens extends Theme.Tokens>(
         vars: variables(tokens),
       },
       definition,
-      { value: Object.freeze({ ...metadata, contract, values }) },
+      {
+        value: Object.freeze({
+          ...metadata,
+          ...(cssName !== undefined ? { cssName } : {}),
+          contract,
+          values,
+        }),
+      },
     ),
   ) as Theme.Definition<tokens>
 }
@@ -378,6 +391,8 @@ 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. */
@@ -403,6 +418,18 @@ export type Expression = {
   readonly parts: readonly (string | Reference | Binding.Reference)[]
 }
 
+/** A composed variable value with an explicit scalar domain. */
+export type Composition<
+  group extends 'color' | 'spacing' = 'color' | 'spacing',
+> = {
+  /** Structured expression discriminator. */
+  readonly [expression]: true
+  /** Domain retained by variable references and compatible overrides. */
+  readonly group: group
+  /** CSS text and references to portable variable values. */
+  readonly parts: readonly (string | Reference)[]
+}
+
 /** Identifies structured web expressions independently of literal CSS text. */
 export const expression = Symbol('zyzz.expression')
 
@@ -503,6 +530,8 @@ export function is(value: unknown): value is Reference {
 
 /** Immutable theme data carried directly by each definition. */
 export type Metadata = {
+  /** Authored scope name, independent of private graph ownership. */
+  readonly cssName?: string | undefined
   /** Original segments for typography paths containing query punctuation. */
   readonly paths?: Readonly<Record<string, readonly string[]>> | undefined
   readonly queries?: Query.Metadata | undefined
@@ -558,17 +587,27 @@ type Paths<tree, property extends keyof Literal.Properties = never> = [
         > extends Value
           ? [property] extends [never]
             ? PathKey<key>
-            : VariableSets.Scalar<
-                  NonNullable<tree[key]>
-                > extends Literal.Properties[property] &
-                  ValueSyntax.Checked<
-                    Record<
-                      property,
-                      VariableSets.Scalar<NonNullable<tree[key]>>
-                    >
-                  >[property]
-              ? PathKey<key>
-              : never
+            : Literal.Color extends VariableSets.Scalar<NonNullable<tree[key]>>
+              ? property extends Properties<'color'>
+                ? PathKey<key>
+                : never
+              : Literal.Length extends VariableSets.Scalar<
+                    NonNullable<tree[key]>
+                  >
+                ? Binding.Property<'length', property> extends never
+                  ? never
+                  : PathKey<key>
+                : VariableSets.Scalar<
+                      NonNullable<tree[key]>
+                    > extends Literal.Properties[property] &
+                      ValueSyntax.Checked<
+                        Record<
+                          property,
+                          VariableSets.Scalar<NonNullable<tree[key]>>
+                        >
+                      >[property]
+                  ? PathKey<key>
+                  : never
           : `${key}.${Paths<NonNullable<tree[key]>, property>}`
       }[Extract<keyof tree, number | string>]
 
@@ -794,6 +833,7 @@ export type Value =
   | number
   | string
   | Reference
+  | Composition
   | { readonly dark: Value; readonly light: Value }
   | Conditions
 

package/src/internal/VariableSets.ts

@@ -33,7 +33,7 @@ export function theme(
       get: () => {
         const identity = metadata.contract[Token.identity]
         return identity
-          ? `z_theme-${identity}-${Identity.hash(JSON.stringify(metadata.values))}`
+          ? `z-theme-${identity.startsWith('id-') ? identity.slice(3) : Identity.name(identity)}`
           : original.className
       },
       enumerable: true,
@@ -75,6 +75,7 @@ export function build(
       typeof input === 'string' ||
       typeof input === 'number' ||
       Token.is(input) ||
+      Token.isExpression(input) ||
       (path.length > 0 &&
         input &&
         typeof input === 'object' &&
@@ -244,6 +245,17 @@ function read(
   active = new Set<object>(),
 ): Token.Value {
   if (Token.is(input)) return input
+  if (Token.isExpression(input)) {
+    if (
+      !('group' in input) ||
+      (input.group !== 'color' && input.group !== 'spacing')
+    )
+      throw new Vars.InvalidError(path, 'Expected a composed variable value.')
+    return Vars.compose(
+      input.group,
+      input.parts as readonly (string | Token.Reference)[],
+    )
+  }
   if (typeof input === 'number' && Number.isFinite(input)) return input
   if (typeof input === 'string' && input.trim() && !/[;{}]/.test(input))
     return input
@@ -307,7 +319,7 @@ function read(
 
 /** Infers the shared declaration domain after following defaults and references. */
 export function domain(value: Token.Value): Token.Group {
-  if (Token.is(value)) return value.group
+  if (Token.is(value) || Token.isExpression(value)) return value.group
   if (typeof value === 'object')
     return 'default' in value ? domain(value.default) : 'color'
   if (
@@ -383,6 +395,7 @@ export function merge(
           typeof entry !== 'object' ||
           Array.isArray(entry) ||
           Token.is(entry) ||
+          Token.isExpression(entry) ||
           'default' in entry ||
           ('light' in entry && 'dark' in entry) ||
           (Object.keys(entry).length <= 2 &&
@@ -424,6 +437,17 @@ export function rebind(
         value: visit(value.path),
       })
     }
+    if (Token.isExpression(value))
+      return Vars.compose(
+        value.group,
+        value.parts.map((part) => {
+          if (typeof part === 'string') return part
+          const reference = resolve(part)
+          if (!Token.is(reference))
+            throw new Vars.InvalidError([], 'Expected a variable reference.')
+          return reference
+        }),
+      )
     if (typeof value !== 'object') return value
 
     return Object.freeze(

package/src/node/Host.ts

@@ -17,6 +17,7 @@ import * as Snapshot from './internal/Snapshot.js'
 import * as Syntax from '../compiler/internal/Syntax.js'
 import * as Source from '../compiler/Source.js'
 import * as Transform from '../compiler/Transform.js'
+import * as ThemeRules from '../web/internal/Themes.js'
 
 /** A successful publication; paths are relative to the output directory. */
 export type Build = {
@@ -49,6 +50,14 @@ export async function create(options: create.Options): Promise<Runtime> {
           targets: { ...options.css?.targets },
         }
 
+  const externals = [...(options.external ?? [])]
+  if (
+    externals.some((pattern) => !pattern || pattern.slice(0, -1).includes('*'))
+  )
+    throw new Error(
+      'External imports require exact names or a trailing * prefix.',
+    )
+
   const native = options.native
     ? Object.freeze({
         ...options.native,
@@ -404,6 +413,15 @@ export async function create(options: create.Options): Promise<Runtime> {
           (!specifier.startsWith('#') && specifier.includes('#'))
         )
           continue
+        if (
+          externals.some((pattern) =>
+            pattern.endsWith('*')
+              ? specifier.startsWith(pattern.slice(0, -1))
+              : specifier === pattern,
+          )
+        )
+          continue
+
         try {
           if (specifier.startsWith('.')) {
             const target = Relative.resolve({ moduleId, modules, specifier })
@@ -441,6 +459,8 @@ export async function create(options: create.Options): Promise<Runtime> {
     }
 
     const graph = compiler.compile({
+      [ThemeRules.shared]:
+        options.modules === false && !native ? 'all' : undefined,
       [Syntax.cache]: snapshot.programs(modules),
       compiler: options.compiler,
       native,
@@ -951,6 +971,8 @@ export declare namespace create {
           readonly targets?: Readonly<LightningCss.Targets> | undefined
         }
       | undefined
+    /** Imports left for downstream tooling. Matches exact names or prefixes ending in *. */
+    readonly external?: readonly string[] | undefined
     /** Native context captured at creation. Emits modules and maps without CSS or web initialization. */
     readonly native?: Graph.compile.Options['native']
     /** Output directory exclusively locked until close; may be nested under root. Defaults to `dist`. */

package/src/react-native/StyleSheet.ts

@@ -785,6 +785,12 @@ function resolve(
       resolved = resolved.value
       continue
     }
+    if (Token.isExpression(resolved))
+      fail(
+        'unsupported_feature',
+        'Composed variables require a web target.',
+        path,
+      )
     if ('default' in resolved)
       fail(
         'unsupported_feature',

package/src/styleFunction.ts

@@ -114,9 +114,7 @@ export declare namespace style {
         /** Compiled and supplied class names. */
         readonly className: string
         /** Supplied inline styling overrides when present. */
-        readonly style?:
-          | Readonly<Record<string, string | number | undefined>>
-          | undefined
+        readonly style?: Readonly<Record<string, string | number | undefined>>
       }
 
   /** Callable definition; source rewriting supplies its implementation. */

package/src/variable.ts

@@ -38,7 +38,7 @@ export function variable(
 ): unknown {
   const id = typeof kind === 'object' ? kind.id : options?.id
   return Variable.create({
-    name: `--z-v${Identity.requireId(id, 'variable')}`,
+    name: `--z-${Identity.requireId(id, 'variable').slice(3)}`,
     type: typeof kind === 'string' ? kind : '*',
     variable: true,
   })

package/src/variants.ts

@@ -61,32 +61,54 @@ type CheckedChoice<
           : never)
   : CheckedStyles<style, tokens, layers, mappings>
 
-type SuggestedStyles<tokens extends Theme.Tokens> =
-  Completion.Properties<tokens> & Readonly<Record<string, unknown>>
+type SuggestedStyles<
+  tokens extends Theme.Tokens,
+  styles = Record<string, unknown>,
+> = Completion.Properties<tokens, styles> & Readonly<Record<string, unknown>>
 
 /** Editor hints remain independent of declaration and selection validation. */
-type Suggestions<tokens extends Theme.Tokens> = {
-  readonly base?: SuggestedStyles<tokens> | undefined
+type Suggestions<
+  tokens extends Theme.Tokens,
+  definition = Record<string, unknown>,
+> = {
+  readonly base?:
+    | SuggestedStyles<
+        tokens,
+        definition extends { base: infer styles }
+          ? styles
+          : Record<string, unknown>
+      >
+    | undefined
   readonly compoundVariants?:
     | readonly {
         readonly style: SuggestedStyles<tokens>
         readonly when: unknown
       }[]
     | undefined
-  readonly variants?:
-    | Readonly<
-        Record<
-          string,
-          Readonly<
+  readonly variants?: definition extends { variants: infer axes }
+    ? {
+        readonly [axis in keyof axes]: {
+          readonly [choice in keyof axes[axis]]: axes[axis][choice] extends (
+            ...args: never[]
+          ) => unknown
+            ? (...args: never[]) => SuggestedStyles<tokens>
+            : SuggestedStyles<tokens, axes[axis][choice]>
+        }
+      }
+    :
+        | Readonly<
             Record<
               string,
-              | SuggestedStyles<tokens>
-              | ((...args: never[]) => SuggestedStyles<tokens>)
+              Readonly<
+                Record<
+                  string,
+                  | SuggestedStyles<tokens>
+                  | ((...args: never[]) => SuggestedStyles<tokens>)
+                >
+              >
             >
           >
-        >
-      >
-    | undefined
+        | undefined
 }
 
 type Keys<value> = value extends unknown ? keyof value : never
@@ -201,7 +223,7 @@ type Checked<
 export function variants<const definition extends Record<string, unknown>>(
   definition: definition &
     NoInfer<Checked<definition, {}, never, {}>> &
-    Suggestions<{}>,
+    Suggestions<{}, NoInfer<definition>>,
   options: style.DefinitionOptions = {},
 ): variants.ReturnType<definition> {
   return Authoring.variants(
@@ -221,7 +243,7 @@ export declare namespace variants {
   > = <const definition extends Record<string, unknown>>(
     definition: definition &
       NoInfer<Checked<definition, tokens, layers, mappings>> &
-      Suggestions<tokens>,
+      Suggestions<tokens, NoInfer<definition>>,
     options?: style.DefinitionOptions,
   ) => ReturnType<definition, output>