zyzz 0.0.3 → 0.0.5

package/src/runtime/Selection.ts

@@ -1,75 +1,86 @@
-/** Selects compiler-owned theme classes without evaluating authoring code. @module */
+/** Selects compiler-owned variable scope classes without evaluating authoring code. @module */
 import * as Scheme from '../internal/Scheme.js'
+import * as Html from './CompositionHtml.js'
 
 /**
- * Creates a validated selector with the compatible named theme catalog.
+ * Creates a validated selector with the compatible named set catalog.
  * A selected scheme adds its stylesheet class beside the scope class and an inline `color-scheme`.
- * @param entries Compatible theme names paired with compiler-owned scope classes.
+ * @param entries Compatible set names paired with compiler-owned scope classes.
  * @param html Whether selection returns HTML class/serialized-style props. Defaults to false (React className/object-style props).
- * @returns A callable selector with catalog members exposing their scope class names.
+ * @returns A callable selector returning scope props.
  * @throws {TypeError} When selection names, schemes, or option keys are invalid.
  */
 export function create<
   const entries extends readonly (readonly [string, string])[],
   const html extends boolean = false,
 >(entries: entries, html?: html): create.ReturnType<entries[number][0], html>
+export function create(
+  entries: readonly (readonly [string, string])[],
+  html: boolean,
+  key: 'set',
+  defaultSet?: string,
+): (input?: { set?: string | undefined; colorScheme?: string | undefined }) => {
+  className?: string
+  class?: string
+  style?: unknown
+}
 export function create(
   entries: readonly (readonly [string, string])[],
   html = false,
-) {
+  key: 'set' = 'set',
+  defaultSet?: string,
+): unknown {
   const catalog = Object.fromEntries(entries)
 
-  const select = (input: { theme: string; colorScheme?: string }) => {
+  const select = (
+    input: {
+      set?: string | undefined
+      colorScheme?: string | undefined
+    } = {},
+  ) => {
+    const selected =
+      input && typeof input === 'object'
+        ? (input[key] ?? defaultSet)
+        : undefined
     if (
       !input ||
       typeof input !== 'object' ||
       Array.isArray(input) ||
-      !Object.hasOwn(input, 'theme') ||
-      typeof input.theme !== 'string' ||
-      !Object.hasOwn(catalog, input.theme) ||
+      (!Object.hasOwn(input, key) && defaultSet === undefined) ||
+      typeof selected !== 'string' ||
+      !Object.hasOwn(catalog, selected!) ||
       Object.keys(input).some(
-        (key) => key !== 'theme' && key !== 'colorScheme',
+        (field) => field !== key && field !== 'colorScheme',
       ) ||
       (input.colorScheme !== undefined &&
         !['light', 'dark', 'light dark'].includes(input.colorScheme))
     )
-      throw new TypeError('Invalid theme selection.')
+      throw new TypeError('Invalid variable selection.')
 
     const scheme = input.colorScheme as Scheme.Name | undefined
 
-    return {
-      [html ? 'class' : 'className']: scheme
-        ? `${catalog[input.theme]} ${Scheme.classes[scheme]}`
-        : catalog[input.theme],
-      ...(scheme
-        ? {
-            style: html ? `color-scheme:${scheme}` : { colorScheme: scheme },
-          }
-        : {}),
+    const props = {
+      className: scheme
+        ? `${catalog[selected!]} ${Scheme.classes[scheme]}`
+        : catalog[selected!]!,
+      ...(scheme ? { style: { colorScheme: scheme } } : {}),
     }
+    return html ? Html.from(props) : props
   }
 
-  return Object.defineProperties(
-    select,
-    Object.getOwnPropertyDescriptors(
-      Object.fromEntries(
-        entries.map(([name, className]) => [name, { className }]),
-      ),
-    ),
-  ) as unknown as create.ReturnType<string, boolean>
+  return select as create.ReturnType<string, boolean>
 }
 
-/** Typed compiler-owned selection and compatible catalog members. */
+/** Typed compiler-owned scope selection. */
 export declare namespace create {
   type ReturnType<name extends string, html extends boolean = false> = {
     <
       const input extends {
-        readonly theme: name
+        readonly set: name
         readonly colorScheme?: 'light' | 'dark' | 'light dark' | undefined
       },
     >(
-      input: input &
-        Record<Exclude<keyof input, 'theme' | 'colorScheme'>, never>,
+      input: input & Record<Exclude<keyof input, 'set' | 'colorScheme'>, never>,
     ): html extends true
       ? { readonly class: string; readonly style?: string | undefined }
       : {
@@ -78,5 +89,5 @@ export declare namespace create {
             | { readonly colorScheme: 'light' | 'dark' | 'light dark' }
             | undefined
         }
-  } & { readonly [key in name]: { readonly className: string } }
+  }
 }

package/src/styleFunction.ts

@@ -4,25 +4,22 @@
  */
 import * as Authoring from './internal/Authoring.js'
 import type * as Binding from './internal/Binding.js'
+import type * as Completion from './internal/Completion.js'
 import type * as Literal from './internal/Literal.js'
 import type * as Style from './Style.js'
 
-/** Restricts callback hints to inferred declarations instead of expanding every property grammar. */
-type CompletionProperties<styles = Record<string, unknown>> = {
-  readonly [property in keyof typeof Literal.rules & keyof styles]?:
-    | Literal.Properties[property]
-    | (string & {})
-    | number
-    | object
-}
-
 type Keys<value> = value extends unknown ? keyof value : never
 
+// Keep named and custom-property instantiations separate so framework interfaces need no index signature.
+type InlineProperties<properties extends string> = {
+  readonly [property in properties]?: string | number | undefined
+}
+
 type VariableOptions<input> = input extends {
-  readonly variables: infer variables
+  readonly vars: infer variables
 }
   ? {
-      readonly variables: {
+      readonly vars: {
         readonly [key in keyof variables]: string extends key
           ? variables[key]
           : key extends `--${string}`
@@ -49,7 +46,7 @@ export function style<
       values: values,
     ) => styles &
       NoInfer<Style.Accepted<styles, {}, true> & Binding.Checked<styles>>) &
-    CompletionProperties<NoInfer<styles>>,
+    Completion.Properties<{}, NoInfer<styles>>,
   // Exclude invalid callbacks by arity so they cannot mask object-property diagnostics.
   ...options: Parameters<callback> extends [Record<string, string | number>]
     ? values extends Binding.Inputs<values>
@@ -60,7 +57,7 @@ export function style<
 export function style<const styles extends Record<string, unknown>>(
   styles: styles &
     NoInfer<Style.Accepted<styles, {}, true>> &
-    CompletionProperties,
+    Completion.Properties,
   options?: style.DefinitionOptions,
 ): style.ReturnType
 export function style(
@@ -80,7 +77,7 @@ export declare namespace style {
   type DefinitionOptions = { readonly id?: string | undefined }
   /** Callable compiled bindings with required scalar inputs and styling overrides. */
   type Dynamic<values, output extends Output = 'react'> = Reference &
-    (<const input extends values & Options>(
+    (<const input extends values & Options<output>>(
       input: input &
         VariableOptions<input> &
         Record<Exclude<keyof input, keyof values | keyof Options>, never>,
@@ -90,13 +87,19 @@ export declare namespace style {
   type ErrorType = Error
 
   /** Styling overrides consumed by a transformed definition. */
-  type Options = {
+  type Options<output extends Output = 'react'> = {
     /** External class names appended to the generated classes. */
     readonly className?: string | undefined
-    /** Literal inline styling overrides. */
-    readonly style?: Literal.Properties | undefined
+    /** Inline overrides. React accepts scalar values, while HTML requires CSS units. */
+    readonly style?:
+      | (output extends 'html'
+          ? Literal.Properties
+          :
+              | InlineProperties<keyof typeof Literal.rules>
+              | InlineProperties<keyof Literal.Properties>)
+      | undefined
     /** Inline custom-property assignments, merged before explicit style overrides. */
-    readonly variables?:
+    readonly vars?:
       | Readonly<Record<`--${string}`, string | number | undefined>>
       | undefined
   }
@@ -118,7 +121,7 @@ export declare namespace style {
 
   /** Callable definition; source rewriting supplies its implementation. */
   type ReturnType<output extends Output = 'react'> = Reference &
-    (<const options extends Options = Options>(
+    (<const options extends Options<output> = Options<output>>(
       options?: options &
         VariableOptions<options> &
         Record<Exclude<Keys<options>, keyof Options>, never>,