zyzz 0.0.6 → 0.0.7

package/src/Style.ts

@@ -68,13 +68,20 @@ export type Accepted<
                   ? never
                   : Value.Atom<Typography.Names<tokens>>
                 : key extends keyof Literal.Properties
-                  ? Value.Accepted<
-                      Pick<style, key>,
-                      literal extends true
+                  ? (literal extends true
+                      ? LiteralDeclarations
+                      : keyof tokens extends never
                         ? LiteralDeclarations
-                        : DeclarationProperties<tokens>
-                    >[key] &
-                      Value.Checked<Pick<style, key>, tokens>[key]
+                        : DeclarationProperties<tokens>)[key] extends style[key]
+                    ? style[key]
+                    : Value.Accepted<
+                        Pick<style, key>,
+                        literal extends true
+                          ? LiteralDeclarations
+                          : DeclarationProperties<tokens>
+                      >[key] &
+                        Value.Checked<Pick<style, key>, tokens>[key] &
+                        Value.Tokens<style[key], tokens, key>
                   : key extends Condition.Keys<tokens, key>
                     ? [style[key]] extends [undefined]
                       ? never
@@ -605,10 +612,11 @@ export function define(
           )
           continue
         }
+        const custom = parsed?.custom
         const scalar = parsed ? parsed.value : entry
 
         const resolved = (() => {
-          if (!theme) return scalar
+          if (!theme || custom) return scalar
 
           if (typeof scalar !== 'string' && typeof scalar !== 'number')
             return scalar
@@ -645,6 +653,25 @@ export function define(
           continue
         }
 
+        if (
+          theme &&
+          !custom &&
+          Token.mapped(theme, key) &&
+          !Token.is(resolved) &&
+          !(Binding.is(resolved) && !resolved.name.startsWith('--z-d')) &&
+          !(
+            Token.isExpression(resolved) &&
+            resolved.parts.every((part) => Token.is(part) || part === '')
+          )
+        ) {
+          report(
+            'invalid_value',
+            [name, authoredProperty],
+            'Expected a configured token or a bracketed CSS value.',
+          )
+          continue
+        }
+
         const value = parsed && resolved === '0' ? 0 : resolved
 
         declarations.push(
@@ -774,6 +801,7 @@ export class InvalidError extends Error {
 type LiteralAtoms = {
   readonly [property in keyof Literal.Properties]-?: Value.Atom<
     | Exclude<Literal.Properties[property], undefined>
+    | `[${string}]`
     | Binding.Reference<'*'>
     | {
         [kind in Binding.Kind]: property extends Binding.Property<
@@ -812,7 +840,13 @@ export type NamedStyle<name extends string = string> = {
 /** Supported literal and token declarations. Unknown properties and undefined values are rejected. */
 export type DeclarationProperties<tokens extends Theme.Tokens = {}> = {
   readonly [property in keyof Literal.Properties]: Value.Fallbacks<
-    | LiteralAtoms[property]
+    | (property extends `--${string}`
+        ? LiteralAtoms[property]
+        : [Token.Names<tokens, property>] extends [never]
+          ? LiteralAtoms[property]
+          :
+              | Value.Atom<`[${string}]`>
+              | Extract<LiteralAtoms[property], Binding.Reference>)
     | Value.Atom<Token.Names<tokens, property>>
     | {
         [group in Token.Group]: property extends Token.Properties<group>

package/src/internal/Authoring.ts

@@ -74,6 +74,10 @@ export function create(
   if (!dynamic && !id && Object.keys(input as object).length === 0)
     Identity.requireId(undefined, 'Empty style')
 
+  if (id && !dynamic && options.theme)
+    Style.define({ style: body(input as Record<string, unknown>) } as never, {
+      vars: options.theme,
+    })
   const className = id
     ? `z-style-${id}`
     : Identity.style(
@@ -125,6 +129,23 @@ export function variants(
   options: Options = {},
 ): unknown {
   const id = Identity.requireId(options.id, 'variants')
+  if (options.theme) {
+    const styles = [
+      input.base,
+      ...Object.values(
+        (input.variants ?? {}) as Record<string, Record<string, unknown>>,
+      ).flatMap(Object.values),
+      ...((input.compoundVariants ?? []) as readonly { style: unknown }[]).map(
+        (entry) => entry.style,
+      ),
+    ]
+    for (const input of styles)
+      if (input && typeof input === 'object')
+        Style.define(
+          { style: body(input as Record<string, unknown>) } as never,
+          { vars: options.theme },
+        )
+  }
   const className = `z-style-${id}`
   const axes = Object.entries(
     (input.variants ?? {}) as Record<string, Record<string, unknown>>,

package/src/internal/Binding.ts

@@ -127,6 +127,36 @@ export type Checked<style> = {
         : unknown
 }
 
+/** Excludes token-name slots, which cannot resolve token names during application. */
+export type TokenSlots<style, values, tokens, mappings = {}> = {
+  [property in keyof style]: property extends keyof Literal.Properties
+    ? SlotValue<
+        style[property],
+        values[keyof values],
+        Token.Names<tokens, property>
+      >
+    : property extends keyof mappings
+      ? mappings[property] extends readonly (infer target extends
+          keyof Literal.Properties)[]
+        ? SlotValue<
+            style[property],
+            values[keyof values],
+            Token.Names<tokens, target>
+          >
+        : unknown
+      : property extends 'vars'
+        ? unknown
+        : style[property] extends Record<string, unknown>
+          ? TokenSlots<style[property], values, tokens, mappings>
+          : unknown
+}
+
+type SlotValue<value, inputs, names> = value extends readonly unknown[]
+  ? { [key in keyof value]: SlotValue<value[key], inputs, names> }
+  : Extract<Extract<value, inputs>, names> extends never
+    ? unknown
+    : never
+
 /** Rejects reserved callback field names and importance-bearing value domains. */
 export type Inputs<values> = {
   [key in keyof values]: key extends

package/src/internal/Configuration.ts

@@ -277,14 +277,16 @@ export function create(
       })
     }
   }
-  function boundVariants(
-    definition: Record<string, unknown>,
-    options: style.DefinitionOptions = {},
-  ) {
-    return Authoring.variants(definition, {
-      ...options,
-      output: input.output as style.Output | undefined,
-    })
+  function boundVariants(theme?: Theme.Definition) {
+    return (
+      definition: Record<string, unknown>,
+      options: style.DefinitionOptions = {},
+    ) =>
+      Authoring.variants(definition, {
+        ...options,
+        output: input.output as style.Output | undefined,
+        theme,
+      })
   }
   function handle(theme: Theme.Definition, name: string) {
     const original = Token.bind(theme, contract)
@@ -313,7 +315,7 @@ export function create(
     })
     Object.assign(select, {
       style: boundStyle(original),
-      variants: boundVariants,
+      variants: boundVariants(original),
     })
     return select
   }
@@ -410,7 +412,9 @@ export function create(
       ),
       theme: bound[input.defaultTheme],
       themes: Object.freeze(select),
-      variants: boundVariants,
+      variants: boundVariants(
+        bound[input.defaultTheme] as unknown as Theme.Definition,
+      ),
     })
   }
 
@@ -424,7 +428,7 @@ export function create(
       script: Appearance.create([], { storageKey }),
       style: boundStyle(theme as unknown as Theme.Definition),
       theme,
-      variants: boundVariants,
+      variants: boundVariants(theme as unknown as Theme.Definition),
     })
   }
 
@@ -436,7 +440,7 @@ export function create(
     appearance: Appearance.root([], { storageKey }),
     script: Appearance.create([], { storageKey }),
     style: boundStyle(theme),
-    variants: boundVariants,
+    variants: boundVariants(theme),
   })
 }
 
@@ -590,7 +594,9 @@ export type StyleFactory<
         values: values,
       ) => styles &
         NoInfer<
-          Body<styles, tokens, layers, mappings> & Binding.Checked<styles>
+          Body<styles, tokens, layers, mappings> &
+            Binding.Checked<styles> &
+            Binding.TokenSlots<styles, values, tokens, mappings>
         >) &
       Completion.Properties<tokens, NoInfer<styles>>,
     ...options: Parameters<callback> extends [Record<string, string | number>]

package/src/internal/Theme.ts

@@ -30,7 +30,11 @@ export type StyleFactory<tokens extends Tokens> = {
     styles: ((
       values: values,
     ) => styles &
-      NoInfer<Style.Accepted<styles, tokens> & Binding.Checked<styles>>) &
+      NoInfer<
+        Style.Accepted<styles, tokens> &
+          Binding.Checked<styles> &
+          Binding.TokenSlots<styles, values, tokens>
+      >) &
       (values extends Binding.Inputs<values> ? unknown : never),
     options?: style.DefinitionOptions,
   ): style.Dynamic<values>

package/src/internal/Token.ts

@@ -444,11 +444,11 @@ export type Reference<group extends Group = Group> = {
 
 const reference = Symbol('zyzz.token')
 
-/** Resolves shorthand tokens with literal precedence, with specific colors first. */
+/** Resolves configured token names, with specific color groups first. */
 export function resolve(value: unknown, options: resolve.Options): unknown {
   if (
-    (typeof value !== 'string' && typeof value !== 'number') ||
-    Literal.isLiteral(options.property, value)
+    options.property.startsWith('--') ||
+    (typeof value !== 'string' && typeof value !== 'number')
   )
     return value
 
@@ -529,6 +529,37 @@ export function resolve(value: unknown, options: resolve.Options): unknown {
   return value
 }
 
+/** Whether the configured catalog supplies tokens for a property. */
+export function mapped(
+  theme: object,
+  property: keyof Literal.Properties,
+): boolean {
+  if (property.startsWith('--')) return false
+  const data = Object.getOwnPropertyDescriptor(theme, definition)
+    ?.value as Metadata
+  return Object.keys(data.values).some((path) => {
+    const category = path.split('.')[0]!
+    const targets =
+      data.contract.mappings === false
+        ? undefined
+        : data.contract.mappings?.[category]
+    if (
+      data.contract.mappings !== false &&
+      !(targets
+        ? targets.includes(property)
+        : accepts(category as Group, property))
+    )
+      return false
+    let leaf: unknown = Object.getOwnPropertyDescriptor(theme, 'tokens')?.value
+    for (const key of path.split('.'))
+      leaf =
+        leaf && typeof leaf === 'object'
+          ? Object.getOwnPropertyDescriptor(leaf, key)?.value
+          : undefined
+    return is(leaf) && acceptsReference(leaf, property)
+  })
+}
+
 /** Input contract for theme token resolution. */
 export declare namespace resolve {
   /** Property domain and immutable theme metadata supplied by style validation. */

package/src/internal/Value.ts

@@ -21,6 +21,60 @@ export type Atom<value> =
  * Checks authored properties and retains validated input types to avoid expanding whole-property fallback unions.
  */
 export type Accepted<style, properties> = {
+  [property in keyof style]: AcceptedValue<
+    style[property],
+    property,
+    properties
+  >
+}
+
+type AcceptedValue<value, property extends PropertyKey, properties> =
+  Extract<value, `[${string}]` | `[${string}] !important`> extends never
+    ? AcceptedMember<Record<property, value>, properties>[property]
+    : value extends unknown
+      ? AcceptedMember<Record<property, value>, properties>[property]
+      : never
+
+type AcceptedMember<style, properties> = {
+  [property in keyof style]: property extends keyof properties
+    ? style[property] extends `[${infer value}]` | `[${infer value}] !important`
+      ?
+          | (property extends 'gridTemplateColumns' | 'gridTemplateRows'
+              ? style[property] extends LiteralAccepted<
+                  Pick<style, property>,
+                  Literal.Properties
+                >[property]
+                ? style[property]
+                : never
+              : never)
+          | (ScalarValue<value, property> extends LiteralAccepted<
+              Record<property, ScalarValue<value, property>>,
+              Literal.Properties
+            >[property]
+              ? style[property]
+              : never)
+      : style[property] extends readonly [unknown, ...unknown[]]
+        ? AcceptedArray<style[property], property, properties>
+        : LiteralAccepted<Pick<style, property>, properties>[property]
+    : never
+}
+
+type ScalarValue<value, property> =
+  value extends `${infer numeric extends number}`
+    ? property extends keyof Literal.Properties
+      ? number extends Literal.Properties[property]
+        ? numeric
+        : value
+      : value
+    : value
+
+type AcceptedArray<values, property extends PropertyKey, properties> = {
+  [index in keyof values]: values[index] extends readonly unknown[]
+    ? never
+    : Accepted<Record<property, values[index]>, properties>[property]
+}
+
+type LiteralAccepted<style, properties> = {
   [property in keyof style]: property extends keyof properties
     ? style[property] extends { readonly [Token.scalar]: infer scalar }
       ? property extends keyof Literal.Properties
@@ -80,6 +134,22 @@ type Fold<value> = value extends string
 
 /** Refines concrete scalar spellings; already-broad property contracts need no literal refinement. */
 export type Checked<style, tokens = {}> = {
+  [property in keyof style]: style[property] extends
+    | `[${infer value}]`
+    | `[${infer value}] !important`
+    ?
+        | (property extends 'gridTemplateColumns' | 'gridTemplateRows'
+            ? LiteralChecked<Pick<style, property>>[property]
+            : never)
+        | LiteralChecked<
+            Record<property, ScalarValue<value, property>>
+          >[property]
+    : style[property] extends readonly [unknown, ...unknown[]]
+      ? CheckedArray<style[property], property, tokens>
+      : LiteralChecked<Pick<style, property>, tokens>[property]
+}
+
+type LiteralChecked<style, tokens = {}> = {
   [property in keyof style]: style[property] extends string & Binding.Reference
     ? style[property] extends Binding.Reference<'*'>
       ? unknown
@@ -121,6 +191,40 @@ export type Checked<style, tokens = {}> = {
             : unknown)
 }
 
+type CheckedArray<values, property extends PropertyKey, tokens> = {
+  [index in keyof values]: Checked<
+    Record<property, values[index]>,
+    tokens
+  >[property]
+}
+
+/** Requires tokens for properties with configured values. */
+export type Tokens<
+  value,
+  tokens,
+  property extends keyof Literal.Properties,
+> = property extends `--${string}`
+  ? unknown
+  : [Token.Names<tokens, property>] extends [never]
+    ? unknown
+    : value extends readonly unknown[]
+      ? { [index in keyof value]: Tokens<value[index], tokens, property> }
+      : value extends
+            | Binding.Reference
+            | Token.Reference
+            | Token.Variable
+            | `${Token.Variable} !important`
+            | `[${string}]`
+            | `[${string}] !important`
+        ? unknown
+        : value extends Atom<Token.Names<tokens, property>>
+          ? unknown
+          : value extends number
+            ? `${value}` extends Token.Names<tokens, property>
+              ? unknown
+              : never
+            : never
+
 type Importance<value> = value extends readonly unknown[]
   ? { [key in keyof value]: Importance<value[key]> }
   : value extends `${infer body}!${infer suffix}`
@@ -263,7 +367,11 @@ export function parse(
   property: keyof Literal.Properties,
 ):
   | { invalid: true }
-  | { important: boolean; value: number | string | Token.Expression }
+  | {
+      custom?: true
+      important: boolean
+      value: number | string | Token.Expression
+    }
   | undefined {
   if (Token.isExpression(input)) {
     const text = input.parts
@@ -275,6 +383,16 @@ export function parse(
 
     const parts = [...input.parts]
     let remaining = text.length - String(parsed.value).length
+    if (parsed.custom) {
+      for (let index = 0; index < parts.length; index++) {
+        const part = parts[index]
+        if (part === '') continue
+        if (typeof part !== 'string') return undefined
+        parts[index] = part.slice(1)
+        break
+      }
+      remaining--
+    }
 
     for (let index = parts.length - 1; remaining > 0 && index >= 0; index--) {
       const part = parts[index]
@@ -286,7 +404,11 @@ export function parse(
       remaining -= count
     }
 
-    return { important: parsed.important, value: Token.compose(parts) }
+    return {
+      ...(parsed.custom ? { custom: true } : {}),
+      important: parsed.important,
+      value: Token.compose(parts.filter((part) => part !== '')),
+    }
   }
 
   if (typeof input !== 'string') return undefined
@@ -317,7 +439,15 @@ export function parse(
     marker = marker === 0 ? -1 : input.lastIndexOf('!', marker - 1)
   }
 
-  if (marker < 0) return undefined
+  if (marker < 0) {
+    if (bracketed(input))
+      return {
+        custom: true,
+        important: false,
+        value: scalar(input.slice(1, -1)),
+      }
+    return undefined
+  }
   if (input.slice(marker - 1) !== ' !important' || escaped(marker - 1))
     return { invalid: true }
 
@@ -326,14 +456,54 @@ export function parse(
   while (end > 0 && /[ \t\n\r\f]/.test(input[end - 1]!) && !escaped(end - 1))
     end--
 
-  const text = input.slice(0, end)
-  const numeric =
-    Literal.rule(property)?.kind === 'number' ||
-    Literal.rule(property)?.kind === 'grid-line'
-  const value =
-    numeric && /^[+-]?(?:\d*\.\d+|\d+)(?:[eE][+-]?\d+)?$/.test(text)
+  const body = input.slice(0, end)
+  const custom = bracketed(body)
+  const text = custom ? body.slice(1, -1) : body
+  const value = scalar(text)
+
+  return {
+    ...(custom ? { custom: true } : {}),
+    important: true as const,
+    value,
+  }
+
+  function scalar(text: string): number | string {
+    const numeric =
+      Literal.rule(property)?.kind === 'number' ||
+      Literal.rule(property)?.kind === 'grid-line'
+    return numeric && /^[+-]?(?:\d*\.\d+|\d+)(?:[eE][+-]?\d+)?$/.test(text)
       ? Number(text)
       : text
+  }
+}
 
-  return { important: true as const, value }
+/** Recognizes one enclosing pair without consuming native grid line lists. */
+function bracketed(value: string): boolean {
+  if (!value.startsWith('[') || !value.endsWith(']')) return false
+  let depth = 0
+  let quote = ''
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index]!
+    if (character === '\\') {
+      index++
+      continue
+    }
+    if (quote) {
+      if (character === quote) quote = ''
+      continue
+    }
+    if (character === '/' && value[index + 1] === '*') {
+      const end = value.indexOf('*/', index + 2)
+      if (end < 0) return false
+      index = end + 1
+      continue
+    }
+    if (character === '"' || character === "'") {
+      quote = character
+      continue
+    }
+    if (character === '[') depth++
+    if (character === ']' && --depth === 0) return index === value.length - 1
+  }
+  return false
 }