zyzz 0.0.19 → 0.0.21

package/src/compiler/internal/Themes.ts

@@ -144,6 +144,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
   const imports = new Set<number>()
   const variableImports = new Set<number>()
   const configImports = new Set<number>()
+  const factoryImports = new Map<number, 'create' | 'define' | 'extend'>()
   const configs = new Map<string, Link>()
   const configBindings = new Map<number, Link>()
   const factoryReferences = new Set<number>()
@@ -188,11 +189,31 @@ export function collect(program: Ast.Program, options: collect.Options) {
           : specifier.imported.value) === 'Config'
       )
         configImports.add(specifier.start)
+      else if (
+        specifier.type === 'ImportSpecifier' &&
+        specifier.importKind !== 'type' &&
+        ['defineConfig', 'defineVars', 'extendVars'].includes(
+          specifier.imported.type === 'Identifier'
+            ? specifier.imported.name
+            : specifier.imported.value,
+        )
+      ) {
+        const name =
+          specifier.imported.type === 'Identifier'
+            ? specifier.imported.name
+            : specifier.imported.value
+        if (name === 'defineConfig')
+          factoryImports.set(specifier.start, 'create')
+        else if (name === 'defineVars')
+          factoryImports.set(specifier.start, 'define')
+        else factoryImports.set(specifier.start, 'extend')
+      }
   }
 
   if (
     !imports.size &&
     !configImports.size &&
+    !factoryImports.size &&
     !Object.keys(options.links ?? {}).length
   )
     return undefined
@@ -251,6 +272,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
 
   const namespaces = new Set<string>()
   const configNamespaces = new Set<string>()
+  const factoryFunctions = new Map<string, 'create' | 'define' | 'extend'>()
   const variableNamespaces = new Set<string>()
   for (const node of program.body)
     if (node.type === 'ImportDeclaration')
@@ -264,6 +286,11 @@ export function collect(program: Ast.Program, options: collect.Options) {
         if (imports.has(specifier.start)) namespaces.add(specifier.local.name)
         else if (configImports.has(specifier.start))
           configNamespaces.add(specifier.local.name)
+        else if (factoryImports.has(specifier.start))
+          factoryFunctions.set(
+            specifier.local.name,
+            factoryImports.get(specifier.start)!,
+          )
 
   function resolve(node: Ast.Node): Link | undefined {
     if (node.type === 'Identifier') {
@@ -426,6 +453,35 @@ export function collect(program: Ast.Program, options: collect.Options) {
     if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression')
       return data(node.expression, derived)
 
+    if (node.type === 'CallExpression' && !node.optional) {
+      const callee = node.callee
+      if (
+        callee.type === 'MemberExpression' &&
+        !callee.computed &&
+        !callee.optional &&
+        callee.object.type === 'Identifier' &&
+        variableNamespaces.has(callee.object.name) &&
+        derived?.name !== callee.object.name &&
+        callee.property.type === 'Identifier' &&
+        callee.property.name === 'compose'
+      ) {
+        if (node.arguments.length !== 2)
+          return fail(
+            'Vars.compose requires a literal domain and parts array.',
+            node,
+          )
+        const group = data(node.arguments[0]!, derived)
+        const parts = data(node.arguments[1]!, derived)
+        if ((group !== 'color' && group !== 'spacing') || !Array.isArray(parts))
+          return fail(
+            'Vars.compose requires a literal domain and parts array.',
+            node,
+          )
+        factoryReferences.add(callee.start)
+        return Vars.compose(group, parts)
+      }
+    }
+
     if (
       node.type === 'Literal' &&
       (typeof node.value === 'string' || typeof node.value === 'number')
@@ -536,37 +592,52 @@ export function collect(program: Ast.Program, options: collect.Options) {
       registerAlias({ declaration, statement, variable })
 
       const expression = variable.init
-      if (
-        expression?.type !== 'CallExpression' ||
-        expression.callee.type !== 'MemberExpression' ||
-        expression.callee.object.type !== 'Identifier' ||
-        (!namespaces.has(expression.callee.object.name) &&
-          !configNamespaces.has(expression.callee.object.name))
-      )
-        continue
+      if (expression?.type !== 'CallExpression' || expression.optional) continue
 
       const member = expression.callee
+      const directFactory =
+        member.type === 'Identifier'
+          ? factoryFunctions.get(member.name)
+          : undefined
       if (
-        member.computed ||
-        member.optional ||
-        expression.optional ||
-        member.property.type !== 'Identifier' ||
-        !(
-          configNamespaces.has(expression.callee.object.name)
-            ? ['create']
-            : ['define', 'extend']
-        ).includes(member.property.name)
+        !directFactory &&
+        (member.type !== 'MemberExpression' ||
+          member.object.type !== 'Identifier' ||
+          (!namespaces.has(member.object.name) &&
+            !configNamespaces.has(member.object.name)) ||
+          member.computed ||
+          member.optional ||
+          member.property.type !== 'Identifier' ||
+          !(
+            configNamespaces.has(member.object.name)
+              ? ['create']
+              : ['define', 'extend']
+          ).includes(member.property.name))
       )
         continue
 
+      const config =
+        directFactory === 'create' ||
+        (member.type === 'MemberExpression' &&
+          member.object.type === 'Identifier' &&
+          configNamespaces.has(member.object.name))
+      const method =
+        member.type === 'MemberExpression' &&
+        member.property.type === 'Identifier'
+          ? member.property.name
+          : directFactory
+      const variableSet =
+        directFactory === 'define' ||
+        directFactory === 'extend' ||
+        (member.type === 'MemberExpression' &&
+          member.object.type === 'Identifier' &&
+          variableNamespaces.has(member.object.name))
+
       if (
         (statement.type === 'ExportNamedDeclaration' && !options.linked) ||
         declaration.kind !== 'const' ||
         (variable.id.type !== 'Identifier' &&
-          !(
-            configNamespaces.has(expression.callee.object.name) &&
-            variable.id.type === 'ObjectPattern'
-          ))
+          !(config && variable.id.type === 'ObjectPattern'))
       )
         fail(
           'Define local themes with a module-level const; exported themes require source linking.',
@@ -601,10 +672,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
         fail('Configuration destructuring requires a binding.', variable)
 
       let name = `${options.namespace}-${binding}`
-      if (
-        !configNamespaces.has(expression.callee.object.name) &&
-        member.property.name === 'define'
-      ) {
+      if (!config && method === 'define') {
         const argument = expression.arguments[1]
         const callback = argument && Expression.unwrap(argument)
         const id = Identifiers.explicit(
@@ -617,7 +685,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
         if (id !== undefined) name = Identity.requireId(id, 'Vars.define')
       }
 
-      if (configNamespaces.has(expression.callee.object.name)) {
+      if (config) {
         try {
           const link = Configurations.collect({
             data,
@@ -772,7 +840,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
       let output: Call['output']
 
       try {
-        if (member.property.name === 'define') {
+        if (method === 'define') {
           if (
             expression.arguments.length < 1 ||
             expression.arguments.length > 3
@@ -786,9 +854,6 @@ export function collect(program: Ast.Program, options: collect.Options) {
 
           tokenType = type(expression.arguments[0]!)
 
-          const variableSet = variableNamespaces.has(
-            expression.callee.object.name,
-          )
           const argument = expression.arguments[1]
           const callback = argument && Expression.unwrap(argument)
           if (
@@ -860,7 +925,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
             )
 
           factoryReferences.add(base!.start)
-          definition = variableNamespaces.has(expression.callee.object.name)
+          definition = variableSet
             ? VariableSets.theme(
                 Vars.extend(
                   VariableSets.from(themes[parent.name]![Token.definition]),
@@ -876,7 +941,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
         }
@@ -892,7 +957,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
       }
 
       const call = Object.freeze({
-        ...(variableNamespaces.has(expression.callee.object.name)
+        ...(variableSet
           ? {
               variableSet: true,
               directVariables: true,
@@ -912,6 +977,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)
@@ -1286,12 +1356,22 @@ export function collect(program: Ast.Program, options: collect.Options) {
 
     if (
       binding?.type === 'Import' &&
-      (imports.has(binding.node.start) || configImports.has(binding.node.start))
+      (imports.has(binding.node.start) ||
+        configImports.has(binding.node.start) ||
+        factoryImports.has(binding.node.start))
     ) {
+      if (
+        factoryImports.has(binding.node.start) &&
+        parent.type === 'CallExpression' &&
+        factories.has(parent.start)
+      )
+        return true
+
       if (
         parent.type === 'MemberExpression' &&
         grandparent?.type === 'CallExpression' &&
-        factories.has(grandparent.start)
+        (factories.has(grandparent.start) ||
+          factoryReferences.has(parent.start))
       )
         return true
 

package/src/compiler/internal/Vars.ts

@@ -6,6 +6,7 @@ import * as Theme from '../../internal/Theme.js'
 import type * as Css from '../../web/Css.js'
 import * as Identity from '../../internal/Identity.js'
 import * as Expression from './Expression.js'
+import * as Names from './Names.js'
 import type * as Scope from './Scope.js'
 import type * as Themes from './Themes.js'
 import { InvalidError } from './Themes.js'
@@ -14,6 +15,8 @@ import { InvalidError } from './Themes.js'
 export type Call = {
   /** Exclusive source offset. */
   readonly end: number
+  /** Whether the consumer supplied a portable variable identity. */
+  readonly explicit?: boolean | undefined
   /** Fixed scalar reference retained in portable metadata. */
   readonly slots: Readonly<Record<string, Binding.Reference>>
   /** Inclusive source offset. */
@@ -28,6 +31,7 @@ export function collect(
   links: Readonly<Record<string, Themes.Link>> = {},
   moduleId = namespace,
 ) {
+  const authoredNames = Names.collect(program)
   const imports = new Set<number>()
   const external = new Map<number, Themes.Link>()
   for (const statement of program.body) {
@@ -187,6 +191,7 @@ export function collect(
   })
 
   const calls: Call[] = []
+  const explicit = new Set<number>()
   const definitions = new Map<number, Themes.Link>()
   const registrations: Css.Contribution[] = []
   const registrationStarts: number[] = []
@@ -275,8 +280,10 @@ export function collect(
         descriptor[key] = literal as string | number | boolean
       }
 
+    if (descriptor.id !== undefined) explicit.add(call.start)
+
     const name =
-      `--z-v${descriptor.id === undefined ? `${namespace}-${call.start}` : Identity.requireId(typeof descriptor.id === 'string' ? descriptor.id : undefined, 'variable')}` as const
+      `--z-${descriptor.id === undefined ? authoredNames.get(call.start)! : Identity.requireId(typeof descriptor.id === 'string' ? descriptor.id : undefined, 'variable').slice(3)}` as const
     if (value && Object.keys(descriptor).some((key) => key !== 'id')) {
       const syntax =
         kind === 'signedLength'
@@ -325,6 +332,7 @@ export function collect(
       variable: true as const,
     })
     const entry = Object.freeze({
+      explicit: explicit.has(call.start),
       start: call.start,
       end: call.end,
       slots: Object.freeze({ value: slot }),

package/src/default.ts

@@ -41,11 +41,10 @@ void [spin, ping, pulse, bounce]
  */
 export const tokens = {
   animate: {
-    spin: 'z-kid-7a-79-7a-7a-2d-73-70-69-6e 1s linear infinite',
-    ping: 'z-kid-7a-79-7a-7a-2d-70-69-6e-67 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-    pulse:
-      'z-kid-7a-79-7a-7a-2d-70-75-6c-73-65 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-    bounce: 'z-kid-7a-79-7a-7a-2d-62-6f-75-6e-63-65 1s infinite',
+    spin: 'z-kid-zyzz_2d_spin 1s linear infinite',
+    ping: 'z-kid-zyzz_2d_ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+    pulse: 'z-kid-zyzz_2d_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+    bounce: 'z-kid-zyzz_2d_bounce 1s infinite',
   },
   aspect: {
     video: '16 / 9',
@@ -80,8 +79,8 @@ export const tokens = {
       1000: { dark: '#fef3dc', light: '#4e2009' },
     },
     background: {
-      100: { dark: '#0a0a0a', light: '#fff' },
-      200: { dark: '#000', light: '#fafafa' },
+      primary: { dark: '#000', light: '#fafafa' },
+      surface: { dark: '#0a0a0a', light: '#fff' },
     },
     black: '#000',
     blue: {
@@ -169,7 +168,6 @@ export const tokens = {
       900: { dark: '#ff6166', light: '#cb2a2f' },
       1000: { dark: '#feecee', light: '#391417' },
     },
-    surface: { dark: '#0a0a0a', light: '#fff' },
     teal: {
       100: { dark: '#04201b', light: '#eefcf9' },
       200: { dark: '#062822', light: '#e5faf6' },
@@ -428,14 +426,14 @@ export const tokens = {
         fontSize: '20px',
         fontWeight: 400,
         letterSpacing: '0px',
-        lineHeight: '36px',
+        lineHeight: '28px',
         strong: {
           fontFamily:
             'Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
           fontSize: '20px',
           fontWeight: 550,
           letterSpacing: '0px',
-          lineHeight: '36px',
+          lineHeight: '28px',
         },
       },
       '24': {
@@ -681,13 +679,13 @@ export const tokens = {
 /** Default appearance, restoration script, and authoring helpers with bundled light/dark tokens. */
 // Generated from tokens by scripts/default-theme.ts; edit tokens and regenerate.
 const config = Config.create({
+  id: 'default',
   vars: {
     animate: {
-      spin: 'z-kid-7a-79-7a-7a-2d-73-70-69-6e 1s linear infinite',
-      ping: 'z-kid-7a-79-7a-7a-2d-70-69-6e-67 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      pulse:
-        'z-kid-7a-79-7a-7a-2d-70-75-6c-73-65 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      bounce: 'z-kid-7a-79-7a-7a-2d-62-6f-75-6e-63-65 1s infinite',
+      spin: 'z-kid-zyzz_2d_spin 1s linear infinite',
+      ping: 'z-kid-zyzz_2d_ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      pulse: 'z-kid-zyzz_2d_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      bounce: 'z-kid-zyzz_2d_bounce 1s infinite',
     },
     aspect: {
       video: '16 / 9',
@@ -722,8 +720,8 @@ const config = Config.create({
         1000: { dark: '#fef3dc', light: '#4e2009' },
       },
       background: {
-        100: { dark: '#0a0a0a', light: '#fff' },
-        200: { dark: '#000', light: '#fafafa' },
+        primary: { dark: '#000', light: '#fafafa' },
+        surface: { dark: '#0a0a0a', light: '#fff' },
       },
       black: '#000',
       blue: {
@@ -811,7 +809,6 @@ const config = Config.create({
         900: { dark: '#ff6166', light: '#cb2a2f' },
         1000: { dark: '#feecee', light: '#391417' },
       },
-      surface: { dark: '#0a0a0a', light: '#fff' },
       teal: {
         100: { dark: '#04201b', light: '#eefcf9' },
         200: { dark: '#062822', light: '#e5faf6' },
@@ -1070,14 +1067,14 @@ const config = Config.create({
           fontSize: '20px',
           fontWeight: 400,
           letterSpacing: '0px',
-          lineHeight: '36px',
+          lineHeight: '28px',
           strong: {
             fontFamily:
               'Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
             fontSize: '20px',
             fontWeight: 550,
             letterSpacing: '0px',
-            lineHeight: '36px',
+            lineHeight: '28px',
           },
         },
         '24': {

package/src/index.ts

@@ -8,6 +8,21 @@ export * as Config from './Config.js'
 export { style } from './styleFunction.js'
 /** Ordered composition of applied styling props. */
 export { cx } from './cx.js'
+/**
+ * Creates isolated authoring with optional vars and named alternatives.
+ * @alias Config.create
+ */
+export { create as defineConfig } from './Config.js'
+/**
+ * Creates immutable typed variable sets without emitting CSS.
+ * @alias Vars.define
+ */
+export { define as defineVars } from './Vars.js'
+/**
+ * Overrides variable values while preserving their shared contract.
+ * @alias Vars.extend
+ */
+export { extend as extendVars } from './Vars.js'
 /** Inferred component inputs from callable style definitions. */
 export type * as Props from './Props.js'
 /** Typed literal style definitions and validation diagnostics. */

package/src/internal/Authoring.ts

@@ -3,6 +3,7 @@ import type { style } from '../styleFunction.js'
 import * as Html from '../runtime/CompositionHtml.js'
 import * as Identity from './Identity.js'
 import * as Props from '../runtime/Props.js'
+import * as Token from './Token.js'
 import * as Style from '../Style.js'
 import type * as Theme from './Theme.js'
 
@@ -66,10 +67,12 @@ export function create(
   options: Options = {},
 ): style.ReturnType {
   const dynamic = typeof input === 'function'
+  const identity = options.theme?.[Token.definition].contract[Token.identity]
+  const namespace = identity?.startsWith('id-') ? identity.slice(3) : undefined
   const id =
     options.id === undefined
       ? undefined
-      : Identity.requireId(options.id, 'style')
+      : `id-${namespace ? `${namespace}-` : ''}${Identity.requireId(options.id, 'style').slice(3)}`
   if (dynamic && !id) Identity.requireId(undefined, 'Dynamic style')
   if (!dynamic && !id && Object.keys(input as object).length === 0)
     Identity.requireId(undefined, 'Empty style')
@@ -90,6 +93,7 @@ export function create(
           { style: body(input as Record<string, unknown>) },
           { vars: options.theme },
         ).styles[0]!,
+        namespace,
       )
   const props = Props.create({ className })
   const apply = (values?: style.Options & Record<string, unknown>) => {
@@ -128,7 +132,9 @@ export function variants(
   input: Record<string, unknown>,
   options: Options = {},
 ): unknown {
-  const id = Identity.requireId(options.id, 'variants')
+  const identity = options.theme?.[Token.definition].contract[Token.identity]
+  const namespace = identity?.startsWith('id-') ? identity.slice(3) : undefined
+  const id = `id-${namespace ? `${namespace}-` : ''}${Identity.requireId(options.id, 'variants').slice(3)}`
   if (options.theme) {
     const styles = [
       input.base,
@@ -157,7 +163,7 @@ export function variants(
   return (values: Record<string, unknown> & style.Options = {}) => {
     const result = { ...props(values as style.Options) } as {
       className: string
-      style?: style.Props['style']
+      style?: NonNullable<style.Props['style']>
       [key: `data-${string}`]: string | undefined
     }
     const bindings: Record<string, string | number> = {}

package/src/internal/Binding.ts

@@ -15,10 +15,15 @@ export type Kind =
   | 'signedLength'
   | 'signedPercentage'
 
+/** Marks callback inputs that require an explicit custom token escape. */
+export const dynamic = Symbol('zyzz.binding.dynamic')
+
 /** A compiler-assigned web custom property with its scalar domain. */
 export type Reference<kind extends Domain = Domain> = {
   /** Fixed CSS custom-property name. */
   readonly name: `--${string}`
+  /** Internal callback provenance, independent of the emitted variable name. */
+  readonly [dynamic]?: true | undefined
   /** Scalar domain used by authoring types and runtime primitive checks. */
   readonly type: kind
   /** Distinguishes slots from theme references. */

package/src/internal/Configuration.ts

@@ -163,6 +163,9 @@ export function create(
     )
       throw new InvalidError(`Unknown configuration option: ${key}`)
 
+  if (input.id !== undefined && (typeof input.id !== 'string' || !input.id))
+    throw new InvalidError('id must be a nonempty string.')
+
   if (
     input.storageKey !== undefined &&
     (typeof input.storageKey !== 'string' || !input.storageKey)
@@ -291,7 +294,7 @@ export function create(
   function handle(theme: Theme.Definition, name: string) {
     const original = Token.bind(theme, contract)
     const className = () =>
-      `z_theme-${Identity.requireId(typeof input.id === 'string' ? input.id : undefined, 'Config.create')}-${name.replace(/[^a-zA-Z0-9-]/g, (character) => `_${character.charCodeAt(0).toString(16)}_`)}`
+      `z-theme-${Identity.requireId(typeof input.id === 'string' ? input.id : undefined, 'Config.create').slice(3)}-${Identity.name(name)}`
     const select = (options: { colorScheme?: string } = {}) => {
       const scheme = options.colorScheme
       const selection =
@@ -433,7 +436,7 @@ export function create(
   }
 
   const theme =
-    shorthands || input.defaultLayer !== undefined
+    shorthands || input.defaultLayer !== undefined || input.id !== undefined
       ? Token.bind(Theme.define({}), contract)
       : undefined
   return finish({
@@ -452,7 +455,7 @@ export declare namespace create {
     readonly cssOutput?: 'atomic' | 'grouped' | undefined
     /** Fallback CSS layer for bound styles and variants; unlayered when omitted. */
     readonly defaultLayer?: string | undefined
-    /** Stable theme identity required without source rewriting. */
+    /** Consumer-owned namespace; required for uncompiled variable configs. */
     readonly id?: string | undefined
     /** Explicit ordered property aliases; none are installed by default. */
     readonly shorthands?: Shorthands.Map | undefined
@@ -839,7 +842,7 @@ export type VariableOptions = {
   readonly defaultLayer?: string | undefined
   /** Required default key when vars contains named sets. */
   readonly defaultVars?: string | undefined
-  /** Stable identity required without source rewriting. */
+  /** Consumer-owned namespace; required for uncompiled variable configs. */
   readonly id?: string | undefined
   /** Ordered CSS layer names. */
   readonly layers?: readonly string[] | undefined

package/src/internal/Identity.ts

@@ -25,13 +25,6 @@ export function compact(value: string): string {
   return result
 }
 
-/** Encodes an explicit identity without losing punctuation or Unicode distinctions. */
-export function encode(value: string): string {
-  return Array.from(value, (character) =>
-    character.codePointAt(0)!.toString(16),
-  ).join('-')
-}
-
 /** Keeps an authored label readable while its separate hash disambiguates spelling. */
 export function label(value: string): string {
   return (
@@ -42,18 +35,27 @@ export function label(value: string): string {
   )
 }
 
+/** Encodes one name segment, reserving hyphens for path boundaries. */
+export function name(value: string): string {
+  return Array.from(value, (character) =>
+    /^[a-zA-Z0-9]$/.test(character)
+      ? character
+      : `_${character.codePointAt(0)!.toString(16)}_`,
+  ).join('')
+}
+
 /** Requires an explicit identity at an uncompiled authoring boundary. */
 export function requireId(id: string | undefined, kind: string): string {
   if (!id)
     throw new Error(
       `${kind} requires an explicit id without the compiler plugin.`,
     )
-  return `id-${encode(id)}`
+  return `id-${name(id)}`
 }
 
 /** Names one callback input independently of its declaration order. */
 export function slot(id: string, field: string): `--${string}` {
-  return `--z-d${id}-${encode(field)}`
+  return `--z-${id.startsWith('id-') ? id.slice(3) : id}-${name(field)}`
 }
 
 /** Hashes a canonical value using two independent 32-bit accumulators. */
@@ -69,7 +71,7 @@ export function hash(value: string): string {
 }
 
 /** Names ordered style data consistently in runtime and extraction. */
-export function style(input: Style.NamedStyle): string {
+export function style(input: Style.NamedStyle, namespace?: string): string {
   function value(input: Style.Declaration['value']): unknown {
     if (Binding.is(input)) return ['variable', input.name]
     if (Token.is(input))
@@ -105,12 +107,12 @@ export function style(input: Style.NamedStyle): string {
       !!declaration.important,
     ])
   }
-  return `z-content-${hash(JSON.stringify(shape(input)))}`
+  return `z-${namespace ? `${namespace}-` : ''}content-${name(JSON.stringify(shape(input)))}`
 }
 
 /** Names a complete ordered composition, including repeated definitions. */
 export function composition(names: readonly string[]): string {
-  return `z-compose-${hash(JSON.stringify(names))}`
+  return `z-compose-${name(JSON.stringify(names))}`
 }
 
 /** Names a stylesheet declaration with a caller-owned identity. */

package/src/internal/Theme.ts

@@ -599,10 +599,10 @@ function build(
     Object.defineProperty(
       {
         get className(): string {
-          if (scope) return `z_theme-${scope}`
+          if (scope) return `z-theme-${scope}`
           const id = contract[Token.identity]
           if (!id?.startsWith('id-')) throw new MissingTransformError()
-          return `z_theme-${id}-${Identity.hash(JSON.stringify(values))}`
+          return `z-theme-${id.slice(3)}`
         },
         style: (styles?: unknown, options: style.DefinitionOptions = {}) => {
           if (!contract[Token.identity])