zyzz 0.0.33 → 0.0.35

package/dist/web/internal/Wasm.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wasm.generated.js","sourceRoot":"","sources":["../../../src/web/internal/Wasm.generated.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,mDAAmD;AACnD,MAAM,CAAC,MAAM,MAAM,GAAW,sy/5BAAsy/5B,CAAA"}
+{"version":3,"file":"Wasm.generated.js","sourceRoot":"","sources":["../../../src/web/internal/Wasm.generated.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,mDAAmD;AACnD,MAAM,CAAC,MAAM,MAAM,GAAW,sx/5BAAsx/5B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zyzz",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "license": "MIT",
   "description": "Modern, universal, simple styling library for the Web and React Native",
   "homepage": "https://zyzz.style",
@@ -27,6 +27,7 @@
   "main": "./dist/index.js",
   "files": [
     "binding/*.node",
+    "binding/compiler.wasm",
     "binding/wasi/wasi-worker.mjs",
     "binding/wasi/zyzz.wasi.cjs",
     "binding/wasi/zyzz.wasm32-wasi.wasm",
@@ -76,11 +77,25 @@
       "types": "./dist/babel/index.d.ts",
       "default": "./dist/babel/index.js"
     },
+    "./base-ui/react": {
+      "src": "./src/base-ui/react/index.ts",
+      "types": "./dist/base-ui/react/index.d.ts",
+      "default": "./dist/base-ui/react/index.js"
+    },
     "./compiler": {
       "src": "./src/compiler/index.ts",
       "types": "./dist/compiler/index.d.ts",
       "default": "./dist/compiler/index.js"
     },
+    "./compiler.wasm": {
+      "src": "./binding/compiler.wasm",
+      "default": "./dist/binding/compiler.wasm"
+    },
+    "./compiler/wasm": {
+      "src": "./src/compiler/wasm/index.ts",
+      "types": "./dist/compiler/wasm/index.d.ts",
+      "default": "./dist/compiler/wasm/index.js"
+    },
     "./default": {
       "src": "./src/default.ts",
       "types": "./dist/default.d.ts",
@@ -205,6 +220,7 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.29.7",
+    "@base-ui/react": "1.8.0",
     "next": "^16.3.5",
     "react": "^19.0.0",
     "react-native": ">=0.86.0 <1.0.0",
@@ -215,6 +231,9 @@
     "@babel/core": {
       "optional": true
     },
+    "@base-ui/react": {
+      "optional": true
+    },
     "next": {
       "optional": true
     },

package/src/Style.ts

@@ -67,7 +67,10 @@ export type Accepted<
               : key extends 'typography'
                 ? literal extends true
                   ? never
-                  : Value.Atom<Typography.Names<tokens>>
+                  : style[key] extends Value.Atom<Typography.Names<tokens>>
+                    ? style[key]
+                    : // A disjoint literal would reduce the whole object to `never`, so the brand keeps the error on this property.
+                      Value.Unmatched<Typography.Names<tokens>>
                 : key extends keyof Literal.Properties
                   ? (literal extends true
                       ? LiteralDeclarations

package/src/Vars.ts

@@ -39,6 +39,11 @@ export type Values = {
   readonly [key: string]: Value | Values | readonly string[]
 }
 
+/** Extension values: overrides, additions, and `null` removals of existing paths. */
+export type Changes = {
+  readonly [key: string]: Value | Changes | readonly string[] | null
+}
+
 /** Immutable references retaining their shared set contract. */
 export type Definition<values extends Values = Values> = (Values extends values
   ? {}
@@ -184,21 +189,25 @@ type Merge<base, derived> = {
 }
 
 /**
- * Overrides existing leaves and adds new ones. Without an id, the extension is an
- * alternative set sharing the base's identity; with one, it is a new set whose
- * inherited leaves reference the base's variables. Restating a base leaf, such as
- * `base.spacing.md` at `spacing.md`, keeps it.
- * @throws {InvalidError} If an override changes a domain or an addition replaces a leaf with a category, or the reverse.
+ * Overrides existing leaves, adds new ones, and removes paths set to `null`. Without
+ * an id, the extension is an alternative set sharing the base's identity; with one,
+ * it is a new set whose inherited leaves reference the base's variables. Restating a
+ * base leaf, such as `base.spacing.md` at `spacing.md`, keeps it. A removed path
+ * leaves the extension's references and emitted variables, and `null` at a category
+ * removes every leaf below it.
+ * @throws {InvalidError} If an override changes a domain, an addition replaces a leaf with a category or the reverse, or a removal names a path the base lacks.
  */
-export function extend<const base extends Values, const values extends Values>(
+export function extend<const base extends Values, const values extends Changes>(
   variables: Definition<base>,
   values: values & NoInfer<Extension<base, values>>,
   options?: style.DefinitionOptions,
-): Definition<Extended<base, values>>
+): Extended<base, values> extends infer extended extends Values
+  ? Definition<extended>
+  : never
 /** Deeply merges derived leaves over the extended set, rejecting existing paths. */
 export function extend<
   const base extends Values,
-  const values extends Values,
+  const values extends Changes,
   const derived extends Values,
 >(
   variables: Definition<base>,
@@ -210,10 +219,13 @@ export function extend<
       ) => Validated<derived, false, true>
     >,
   options?: style.DefinitionOptions,
-): Definition<Extended<Extended<base, values>, derived>>
+): Extended<Extended<base, values>, derived> extends infer extended extends
+  Values
+  ? Definition<extended>
+  : never
 export function extend(
   variables: Definition,
-  values: Values,
+  values: Changes,
   derive: style.DefinitionOptions | ((vars: References<Values>) => Values) = {},
   options: style.DefinitionOptions = {},
 ): Definition {
@@ -249,9 +261,13 @@ export function extend(
   })
 }
 
-/** Base values grown by an extension; overridden leaves keep their base types. Unexported so declarations inline it. */
+/** Base values grown by an extension; overridden leaves keep their base types and removed paths drop. Unexported so declarations inline it. */
 type Extended<base, values> = {
-  readonly [key in keyof base | keyof values]: key extends keyof base
+  readonly [key in keyof base | keyof values as key extends keyof values
+    ? values[key] extends null
+      ? never
+      : key
+    : key]: key extends keyof base
     ? key extends keyof values
       ? base[key] extends Value
         ? base[key]
@@ -264,20 +280,24 @@ type Extended<base, values> = {
       : never
 }
 
-/** Compatible overrides at existing leaves, plus new leaves and categories. */
+/** Compatible overrides and `null` removals at existing paths, plus new leaves and categories. */
 type Extension<base, values, typography extends boolean = false> = {
   readonly [key in keyof values]: key extends keyof base
     ? base[key] extends Value
-      ? Conditional<Compatible<Scalar<base[key]>>>
+      ? Conditional<Compatible<Scalar<base[key]>>> | null
       : base[key] extends readonly string[]
         ? readonly string[]
-        : values[key] extends Value
-          ? never
-          : Extension<
-              base[key],
-              values[key],
-              key extends 'typography' ? true : typography
-            >
+        : values[key] extends null
+          ? key extends 'breakpoint' | 'container'
+            ? never
+            : null
+          : values[key] extends Value
+            ? never
+            : Extension<
+                base[key],
+                values[key],
+                key extends 'typography' ? true : typography
+              >
     : key extends 'containerNames'
       ? readonly string[]
       : key extends

package/src/babel/index.ts

@@ -109,7 +109,8 @@ export function zyzz(
         (node.type === 'ExportNamedDeclaration' ||
           node.type === 'ExportAllDeclaration') &&
         node.exportKind !== 'type' &&
-        node.source?.value === 'zyzz'
+        (node.source?.value === 'zyzz' ||
+          node.source?.value === 'zyzz/base-ui/react')
       )
         throw new Error(
           'Zyzz Babel does not support re-exporting authoring helpers. Export compiled style definitions instead.',
@@ -118,6 +119,16 @@ export function zyzz(
         continue
       if (
         node.source.value === 'zyzz/default' ||
+        (node.source.value === 'zyzz/base-ui/react' &&
+          node.specifiers.some(
+            (specifier) =>
+              specifier.type === 'ImportNamespaceSpecifier' ||
+              (specifier.type === 'ImportSpecifier' &&
+                specifier.importKind !== 'type' &&
+                (specifier.imported.type === 'Identifier'
+                  ? specifier.imported.name
+                  : specifier.imported.value) === 'defineConfig'),
+          )) ||
         (node.source.value === 'zyzz' &&
           node.specifiers.some(
             (specifier) =>
@@ -137,6 +148,7 @@ export function zyzz(
       (node) =>
         node.type === 'ImportDeclaration' &&
         (node.source.value === 'zyzz' ||
+          node.source.value === 'zyzz/base-ui/react' ||
           node.source.value === 'zyzz/default' ||
           node.source.value === 'zyzz/web'),
     )

package/src/base-ui/react/Config.ts

@@ -0,0 +1,74 @@
+/** Binds Base UI state authoring to the ordinary variable configuration. @module */
+import * as Authoring from './internal/Authoring.js'
+import * as Config from '../../Config.js'
+import type * as Shorthands from '../../internal/Shorthands.js'
+import type * as Style from './Style.js'
+import type * as Vars from '../../Vars.js'
+
+type Values<options> = options extends { vars: infer values }
+  ? options extends { defaultVars: infer name extends keyof values }
+    ? Vars.Extract<values[name]>
+    : Vars.Extract<values>
+  : {}
+
+/**
+ * Creates configured authoring with component-first Base UI styles.
+ * The ordinary variable sets, layers, mappings, shorthands, and recipes are retained.
+ * Output is React props. Component-first variants and callbacks are not supported.
+ * Pass `tokens` from `zyzz/default` as `vars` to retain default token strings,
+ * including inside component states. The unconfigured entrypoint stays token-free.
+ * @example
+ * ```ts
+ * import { defineConfig } from 'zyzz/base-ui/react'
+ * import { tokens } from 'zyzz/default'
+ *
+ * // Share default tokens with ordinary and component-first styles.
+ * export const { style, variants, vars } = defineConfig({ id: 'default', vars: tokens })
+ * ```
+ * @param options - The ordinary defineConfig options, with React output.
+ * @returns Configured helpers whose style also accepts imported Base UI parts.
+ */
+export function create<const options extends create.Options = {}>(
+  options: Parameters<typeof Config.create<options>>[0] = {} as never,
+): create.ReturnType<options> {
+  if ((options as Config.create.Options)?.output === 'html')
+    throw new Config.InvalidError(
+      'Base UI configuration requires React output.',
+    )
+
+  const config = Config.create<options>(options)
+
+  return {
+    ...config,
+    style: Authoring.bind(config.style as Authoring.bind.Factory),
+  } as create.ReturnType<options>
+}
+
+/** Configured Base UI authoring contracts. */
+export declare namespace create {
+  /** Ordinary configuration constrained to React props. */
+  type Options = Config.create.Options & {
+    /** Base UI components consume React className and style props. */
+    readonly output?: 'react' | undefined
+  }
+  /** Existing helpers with the component-first static style overload. */
+  type ReturnType<options extends Options = {}> = Omit<
+    Config.create.ReturnType<options>,
+    'style'
+  > & {
+    /** Authors ordinary styles and component-aware static Base UI declarations. */
+    readonly style: Config.create.ReturnType<options>['style'] &
+      Style.Factory<
+        Vars.Mapped<
+          Values<options>,
+          options extends { mappings: infer map } ? map : {}
+        >,
+        options extends { layers: readonly (infer layer extends string)[] }
+          ? layer
+          : never,
+        options extends { shorthands: infer map extends Shorthands.Map }
+          ? map
+          : {}
+      >
+  }
+}

package/src/base-ui/react/Style.ts

@@ -0,0 +1,109 @@
+/** Component-aware static declarations layered over ordinary style overloads. @module */
+import type * as Completion from '../../internal/Completion.js'
+import type * as Condition from '../../internal/Condition.js'
+import type * as Configuration from '../../internal/Configuration.js'
+import type * as Shorthands from '../../internal/Shorthands.js'
+import type * as Theme from '../../internal/Theme.js'
+import type * as Types from './internal/Types.generated.js'
+import * as Authoring from './internal/Authoring.js'
+import { style as rootStyle } from '../../styleFunction.js'
+
+type MarkerKeys<marker> = {
+  [key in keyof marker]-?: true extends marker[key] ? key : never
+}[keyof marker]
+
+type Keys<input> = input extends { readonly [Types.part]?: infer marker }
+  ? MarkerKeys<marker>
+  : never
+
+type Identity<component> = component extends (props: infer props) => unknown
+  ? Extract<Keys<component> | Keys<props>, keyof Types.Parts>
+  : never
+
+type Hints<
+  part extends keyof Types.Parts,
+  tokens extends Theme.Tokens,
+> = Completion.Properties<tokens> & {
+  readonly selectors?: {
+    readonly [selector in keyof Types.Selectors[part]]?: Hints<part, tokens>
+  } & Readonly<Record<string, Hints<part, tokens>>>
+  readonly states?: Types.States<Hints<part, tokens>>[part]
+} & {
+  readonly [key in Condition.Keys<tokens> | Condition.Suggestions]?: Hints<
+    part,
+    tokens
+  >
+}
+
+type Body<
+  input,
+  part extends keyof Types.Parts,
+  tokens extends Theme.Tokens,
+  layers extends string,
+  mappings extends Shorthands.Map,
+> = {
+  readonly [key in keyof input]: key extends 'states'
+    ? {
+        readonly [name in keyof input[key]]: name extends keyof Types.States<true>[part]
+          ? NonNullable<Types.States<true>[part][name]> extends true
+            ? Body<input[key][name], part, tokens, layers, mappings>
+            : {
+                readonly [value in keyof input[key][name]]: value extends keyof NonNullable<
+                  Types.States<true>[part][name]
+                >
+                  ? Body<
+                      input[key][name][value],
+                      part,
+                      tokens,
+                      layers,
+                      mappings
+                    >
+                  : never
+              }
+          : never
+      }
+    : key extends 'selectors'
+      ? {
+          readonly [selector in keyof input[key]]: Body<
+            input[key][selector],
+            part,
+            tokens,
+            layers,
+            mappings
+          >
+        }
+      : key extends
+            | Exclude<Condition.Keys<tokens, key>, `@layer${string}`>
+            | '@layer'
+            | `@layer ${layers}`
+        ? Body<input[key], part, tokens, layers, mappings>
+        : Configuration.Body<Pick<input, key>, tokens, layers, mappings>[key]
+}
+
+/** Component-first static overload. Ordinary style overloads remain available. */
+export type Factory<
+  tokens extends Theme.Tokens = {},
+  layers extends string = never,
+  mappings extends Shorthands.Map = {},
+> = {
+  <const component, const input extends Record<string, unknown>>(
+    component: component &
+      ([Identity<NoInfer<component>>] extends [never] ? never : unknown),
+    styles: input &
+      NoInfer<Body<input, Identity<component>, tokens, layers, mappings>> &
+      Hints<Identity<NoInfer<component>>, tokens>,
+    options?: rootStyle.DefinitionOptions,
+  ): rootStyle.ReturnType
+}
+
+/**
+ * Declares styles for an imported Base UI part, or ordinary token-free styles.
+ * Component-first calls accept static objects. `states` checks documented attributes,
+ * while `selectors` suggests those attributes and accepts arbitrary CSS selectors.
+ * Compilation resolves component imports and emits CSS ahead of time. No component
+ * wrapper, registration, or runtime CSS insertion is required.
+ * @see https://base-ui.com/react/handbook/styling
+ */
+export const style: typeof rootStyle & Factory = Authoring.bind(
+  rootStyle as Authoring.bind.Factory,
+) as typeof rootStyle & Factory

package/src/base-ui/react/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Opts into typed Base UI states and component-aware selector suggestions.
+ * `style` accepts static component-first declarations. `defineConfig` binds that
+ * overload to ordinary variable sets and shorthands. CSS is emitted ahead of time.
+ * Default token strings are opt-in through `defineConfig({ vars: tokens })`,
+ * with `tokens` imported from `zyzz/default`.
+ * @module
+ */
+/** Configures variables and component-aware Base UI style authoring. */
+export { create as defineConfig } from './Config.js'
+/** Authors static states and selectors for an imported Base UI component part. */
+export { style } from './Style.js'