zyzz 0.0.23 → 0.0.24

package/src/node/Host.ts

@@ -13,6 +13,7 @@ import * as Graph from '../compiler/Graph.js'
 import * as AtRules from '../compiler/internal/AtRules.js'
 import * as Catalogs from '../compiler/internal/Catalogs.js'
 import * as Relative from '../compiler/internal/Relative.js'
+import * as Scheme from '../internal/Scheme.js'
 import * as Snapshot from './internal/Snapshot.js'
 import * as Syntax from '../compiler/internal/Syntax.js'
 import * as Source from '../compiler/Source.js'
@@ -620,7 +621,10 @@ export async function create(options: create.Options): Promise<Runtime> {
       artifacts.set('zyzz.shared.css.map', shared.map)
     }
 
-    const moduleStylesheets = new Map<string, Stylesheet>()
+    const moduleStylesheets = new Map<
+      string,
+      { name: string; stylesheet: Stylesheet }
+    >()
 
     for (const name of Object.keys(sources)) {
       const output = graph.modules[`${options.packageId}/${name}`]!
@@ -661,23 +665,40 @@ export async function create(options: create.Options): Promise<Runtime> {
 
       artifacts.set(`${name}.css`, stylesheet.code)
       artifacts.set(`${name}.css.map`, stylesheet.map)
-      // Module URLs resolve beside the module file; the complete stylesheet at
-      // the output root carries a copy with those URLs rebased.
-      moduleStylesheets.set(
-        `${options.packageId}/${name}`,
-        rebase(stylesheet, name, css === false ? false : css.minify),
-      )
+      moduleStylesheets.set(`${options.packageId}/${name}`, {
+        name,
+        stylesheet,
+      })
     }
 
     // The complete stylesheet follows the module graph so a consumer's rules
     // cascade over the rules of the modules it imports.
     if (shared || moduleStylesheets.size) {
-      const complete = concatenate([
-        ...(shared ? [shared] : []),
-        ...order(graph.dependencies, [...moduleStylesheets.keys()]).map(
-          (id) => moduleStylesheets.get(id)!,
-        ),
-      ])
+      const parts = shared ? [shared] : []
+      let schemes = false
+
+      // Each module stylesheet declares the scheme classes to load alone. The
+      // complete stylesheet keeps the first declaration.
+      for (const id of order(graph.dependencies, [
+        ...moduleStylesheets.keys(),
+      ])) {
+        const { name, stylesheet } = moduleStylesheets.get(id)!
+        const declares = Object.values(Scheme.classes).some((className) =>
+          stylesheet.code.includes(`.${className}`),
+        )
+
+        parts.push(
+          rebase(
+            stylesheet,
+            name,
+            css === false ? false : css.minify,
+            schemes && declares,
+          ),
+        )
+        schemes ||= declares
+      }
+
+      const complete = concatenate(parts)
 
       artifacts.set('zyzz.css', complete.code)
       artifacts.set('zyzz.css.map', complete.map)
@@ -1025,7 +1046,7 @@ function concatenate(parts: readonly { code: string; map: string }[]) {
   let offset = 0
 
   for (const part of parts) {
-    if (!part.code) continue
+    if (!part.code.trim()) continue
 
     const code = part.code.endsWith('\n') ? part.code : `${part.code}\n`
     const traced = Mapping.fromMap(part.map)
@@ -1169,15 +1190,22 @@ async function read(
   }
 }
 
-/** Rewrites a nested module stylesheet's relative URLs against the output root. */
+/**
+ * Copies a module stylesheet into the complete stylesheet at the output root,
+ * rebasing nested relative URLs and optionally dropping the scheme rules.
+ */
 function rebase(
   stylesheet: { code: string; map: string },
   name: string,
   minify: boolean,
+  schemes: boolean,
 ) {
   const directory = Path.posix.dirname(name)
 
-  if (directory === '.' || !stylesheet.code.includes('url(')) return stylesheet
+  if (!schemes && (directory === '.' || !stylesheet.code.includes('url(')))
+    return stylesheet
+
+  const classes = Object.values(Scheme.classes)
 
   const result = AtRules.transform({
     code: Buffer.from(stylesheet.code),
@@ -1186,8 +1214,27 @@ function rebase(
     minify,
     sourceMap: true,
     visitor: {
+      Rule: {
+        style(rule) {
+          const [selector, ...others] = rule.value.selectors
+          const [component, ...rest] = selector ?? []
+
+          if (
+            schemes &&
+            !others.length &&
+            !rest.length &&
+            component?.type === 'class' &&
+            classes.includes(component.name)
+          )
+            return []
+        },
+      },
       Url(url) {
-        if (/^(?:\/|[?#]|[a-z][a-z\d+.-]*:)/i.test(url.url)) return url
+        if (
+          directory === '.' ||
+          /^(?:\/|[?#]|[a-z][a-z\d+.-]*:)/i.test(url.url)
+        )
+          return url
 
         return { ...url, url: Path.posix.join(directory, url.url) }
       },

package/src/react-native/internal/Device.ts

@@ -14,10 +14,17 @@ export function defineConfig<const options extends Config.create.Options = {}>(
   options: options & Parameters<typeof Config.create<options>>[0] = {} as never,
 ): Subscription.defineConfig.ReturnType<options> {
   const config = Subscription.defineConfig<options>(options)
-  return Object.freeze({
-    ...config,
-    Provider: dimensions(config.Provider),
-  }) as Subscription.defineConfig.ReturnType<options>
+  // Copy descriptors rather than spreading, so deferred helpers stay deferred.
+  return Object.freeze(
+    Object.defineProperties(
+      { Provider: dimensions(config.Provider) } as Record<string, unknown>,
+      Object.fromEntries(
+        Object.entries(Object.getOwnPropertyDescriptors(config)).filter(
+          ([name]) => name !== 'Provider',
+        ),
+      ),
+    ),
+  ) as unknown as Subscription.defineConfig.ReturnType<options>
 }
 
 /** Provides selected variables, appearance, and automatic native dimensions. */
@@ -95,18 +102,40 @@ function dimensions<props extends Subscription.Provider.Props>(
 ): React.FunctionComponent<props> {
   return function WindowProvider(props: props) {
     const window = ReactNative.useWindowDimensions()
+    const scheme = ReactNative.useColorScheme()
     const viewport = React.useMemo(
       () => ({ height: window.height, width: window.width }),
       [window.height, window.width],
     )
+    const appearance = React.useMemo(
+      () => ({
+        adaptive,
+        colorScheme: scheme === 'dark' ? ('dark' as const) : ('light' as const),
+      }),
+      [scheme],
+    )
     return React.createElement(
       Viewport.context.Provider,
       { value: viewport },
-      React.createElement(Component, props),
+      React.createElement(
+        Viewport.appearance.Provider,
+        { value: appearance },
+        React.createElement(Component, props),
+      ),
     )
   }
 }
 
+// iOS resolves these colors from the window's appearance, so scheme changes need no Fabric update.
+const adaptive =
+  ReactNative.Platform.OS === 'ios'
+    ? (light: string | number, dark: string | number) =>
+        ReactNative.DynamicColorIOS({
+          dark: dark as ReactNative.ColorValue,
+          light: light as ReactNative.ColorValue,
+        })
+    : undefined
+
 /** Compiler-only binding path, with React subscriptions for Expo Go. */
 export const useNativeStyles = useBindings
 
@@ -121,55 +150,68 @@ type Instance = {
 
 function useBindings() {
   const owner = React.useContext(Store.context)
-  const [fallback] = React.useState(() =>
-    Store.create({
+  // Views inside a Provider never read the fallback, so it is created only outside one.
+  const fallbackRef = React.useRef<ReturnType<typeof Store.create> | undefined>(
+    undefined,
+  )
+  if (!owner)
+    fallbackRef.current ??= Store.create({
       colorScheme: 'light',
       viewport: ReactNative.Dimensions.get('window'),
-    }),
-  )
-  const store = owner ?? fallback
+    })
+  const fallback = fallbackRef.current
+  const store = (owner ?? fallback)!
   const [, render] = React.useReducer((count: number) => count + 1, 0)
-  const [refs] = React.useState(
-    () =>
-      new Map<
-        Instance,
-        {
-          active: boolean
-          ref: React.Ref<Instance> | undefined
-          release: () => void
-        }
-      >(),
-  )
-  React.useLayoutEffect(() => {
-    for (const [instance, entry] of refs) {
-      if (entry.active) continue
-      entry.release()
-      refs.delete(instance)
+  const [refs] = React.useState(() => {
+    const entries = new Map<
+      Instance,
+      {
+        active: boolean
+        ref: React.Ref<Instance> | undefined
+        release: () => void
+      }
+    >()
+    let scheduled = false
+    return {
+      entries,
+      // Runs after the commit, once every cleanup and re-attachment has settled, without a layout effect per render.
+      sweep() {
+        if (scheduled) return
+        scheduled = true
+        queueMicrotask(() => {
+          scheduled = false
+          for (const [instance, entry] of entries) {
+            if (entry.active) continue
+            entry.release()
+            entries.delete(instance)
+          }
+        })
+      },
     }
   })
-  React.useLayoutEffect(
-    () => () => {
-      for (const entry of refs.values()) entry.release()
-      refs.clear()
-    },
-    [refs],
-  )
   return {
     style: NativeContext.application,
     view: (props: Record<string, unknown>) => {
       const snapshot = store.getSnapshot()
       const selected = NativeContext.resolve(props.style, snapshot)
       const initial = NativeContext.key(props.style, snapshot)
+      // A context-free style never needs a binding, so React keeps a stable element without a ref wrapper.
+      if (
+        !initial.length &&
+        typeof selected !== 'function' &&
+        props.ref == null
+      )
+        return { ...props, style: selected }
 
       return {
         ...props,
         ref: (value: Instance | null) => {
           const ref = props.ref as React.Ref<Instance> | undefined
           if (!value) return
-          let entry = refs.get(value)
+          let entry = refs.entries.get(value)
           if (entry && entry.ref !== ref) {
             entry.release()
-            refs.delete(value)
+            refs.entries.delete(value)
             entry = undefined
           }
           if (!entry) {
@@ -184,7 +226,7 @@ function useBindings() {
                 else if (ref) ref.current = null
               },
             }
-            refs.set(value, entry)
+            refs.entries.set(value, entry)
           }
           entry.active = true
           const attached = entry
@@ -199,7 +241,9 @@ function useBindings() {
               if (store.getSnapshot() !== snapshot) render()
               return unsubscribe
             }
-            const id = NativeZyzz!.attach(node, nativeProps(selected))
+            // Most views never change selection, so they bind on their first patch.
+            let id: number | undefined
+            let bound = false
             let previous = initial
             const read = (context: NativeContext.Context) => {
               const keys = NativeContext.key(props.style, context)
@@ -208,30 +252,38 @@ function useBindings() {
                 keys.every((key, index) => Object.is(key, previous[index]))
               )
                 return { commit: () => {} }
-              const selected = NativeContext.resolve(props.style, context)
-              if (!selective(selected)) return { commit: render }
+              const next = NativeContext.resolve(props.style, context)
+              if (!selective(next)) return { commit: render }
+              id ??= ++bindings
               return {
                 commit: () => {
                   previous = keys
+                  bound = true
                 },
-                patch: {
-                  id,
-                  props: nativeProps(selected),
-                },
+                patch: bound
+                  ? { id, props: nativeProps(next) }
+                  : {
+                      id,
+                      node,
+                      props: nativeProps(next),
+                      rendered: nativeProps(selected),
+                    },
               }
             }
             // Context can change between render and committing the host ref.
-            const current = read(store.getSnapshot())
-            if (current.patch) write([current.patch])
-            current.commit()
+            if (store.getSnapshot() !== snapshot) {
+              const current = read(store.getSnapshot())
+              if (current.patch) write([current.patch])
+              current.commit()
+            }
             const unbind = store.bind(read, write)
             return () => {
               unbind()
-              NativeZyzz!.detach(id)
+              if (bound) NativeZyzz!.detach(id!)
             }
           })()
           const update = () =>
-            fallback.update({
+            fallback!.update({
               colorScheme: 'light',
               viewport: ReactNative.Dimensions.get('window'),
             })
@@ -246,6 +298,7 @@ function useBindings() {
             detach()
             subscription?.remove()
             attached.active = false
+            refs.sweep()
           }
         },
         style: selected,
@@ -256,6 +309,21 @@ function useBindings() {
 
 function selective(style: unknown): boolean {
   if (typeof style === 'function') return false
+  const shared =
+    typeof style === 'object' &&
+    style !== null &&
+    !Array.isArray(style) &&
+    Object.isFrozen(style)
+  const cached = shared ? patchable.get(style) : undefined
+  if (cached !== undefined) return cached
+  const result = writable(style)
+  if (shared) patchable.set(style, result)
+  return result
+}
+
+const patchable = new WeakMap<object, boolean>()
+
+function writable(style: unknown): boolean {
   const value = ReactNative.StyleSheet.flatten(
     style as ReactNative.StyleProp<ReactNative.ViewStyle>,
   )
@@ -279,7 +347,16 @@ function selective(style: unknown): boolean {
   )
 }
 
+// Compiled styles are frozen and shared by every view that selects them.
+const converted = new WeakMap<object, Record<string, unknown>>()
 function nativeProps(style: unknown): Record<string, unknown> {
+  const shared =
+    typeof style === 'object' &&
+    style !== null &&
+    !Array.isArray(style) &&
+    Object.isFrozen(style)
+  const cached = shared ? converted.get(style) : undefined
+  if (cached) return cached
   const flattened =
     ReactNative.StyleSheet.flatten(
       style as ReactNative.StyleProp<ReactNative.ViewStyle>,
@@ -289,9 +366,13 @@ function nativeProps(style: unknown): Record<string, unknown> {
     if (name === 'color' || name.endsWith('Color'))
       result[name] = ReactNative.processColor(value as ReactNative.ColorValue)
   }
+  if (shared) converted.set(style, result)
   return result
 }
 
+// Binding identifiers are unique per JavaScript runtime, like the native module.
+let bindings = 0
+
 function write(patches: readonly Store.Patch[]) {
   NativeZyzz!.update(patches)
 }

package/src/react-native/internal/NativeZyzz.ts

@@ -4,16 +4,14 @@ import { TurboModuleRegistry } from 'react-native'
 
 /** Codegen contract, consumed only by the native adapter. */
 export interface Spec extends TurboModule {
-  /** Links a mounted Fabric node and its rendered style. */
-  readonly attach: (
-    node: CodegenTypes.UnsafeObject,
-    props: CodegenTypes.UnsafeObject,
-  ) => number
   /** Releases a view binding. */
   readonly detach: (id: number) => void
   /** Reports live bindings and applied update batches. */
   readonly inspect: () => CodegenTypes.UnsafeObject
-  /** Applies one batch of changed native styles. */
+  /**
+   * Applies one batch of changed native styles. An update with `node` and
+   * `rendered` first binds that mounted Fabric node to its rendered style.
+   */
   readonly update: (updates: ReadonlyArray<CodegenTypes.UnsafeObject>) => void
 }
 

package/src/react-native/internal/Store.ts

@@ -6,8 +6,12 @@ import * as React from 'react'
 export type Patch = {
   /** Runtime-local mounted view identifier. */
   readonly id: number
+  /** Mounted Fabric node, sent until the binding's first patch commits. */
+  readonly node?: object | undefined
   /** Processed native style properties. */
   readonly props: Record<string, unknown>
+  /** Processed style React rendered, sent with `node`. */
+  readonly rendered?: Record<string, unknown> | undefined
 }
 
 type Selection = {

package/src/react-native/internal/Viewport.ts

@@ -1,4 +1,5 @@
 /** Connects the native device adapter to framework subscriptions. @module */
+import type * as NativeContext from '../../runtime/NativeContext.js'
 import type * as Media from '../../runtime/internal/NativeMedia.js'
 import * as React from 'react'
 
@@ -6,3 +7,9 @@ import * as React from 'react'
 export const context = React.createContext<Media.Viewport | undefined>(
   undefined,
 )
+
+/** Device appearance for `colorScheme: 'system'`, with the platform's appearance-following color when it has one. */
+export const appearance = React.createContext<{
+  readonly adaptive?: NativeContext.Context['adaptive']
+  readonly colorScheme: 'dark' | 'light'
+}>({ colorScheme: 'light' })

package/src/react-native/react.ts

@@ -12,7 +12,6 @@ import * as Viewport from './internal/Viewport.js'
 export function defineConfig<const options extends Config.create.Options = {}>(
   options: options & Parameters<typeof Config.create<options>>[0] = {} as never,
 ): defineConfig.ReturnType<options> {
-  const config = Config.create<options>(options)
   const defaultVars = (options as Config.VariableOptions).defaultVars
   const names =
     defaultVars === undefined
@@ -29,10 +28,71 @@ export function defineConfig<const options extends Config.create.Options = {}>(
     })
   }
 
+  if ((options as Config.VariableOptions).vars === undefined)
+    return Object.freeze({
+      ...Config.create<options>(options),
+      Provider: BoundProvider,
+    }) as defineConfig.ReturnType<options>
+
+  // Compiled native styles and `useVars` read precompiled tables, so variable
+  // configurations build their authoring helpers on first runtime use.
+  let config: Helpers | undefined
+  const create = () =>
+    (config ??= (Config.create as (options: object) => Helpers)(options))
   return Object.freeze({
-    ...config,
+    get appearance() {
+      return create().appearance
+    },
     Provider: BoundProvider,
-  }) as defineConfig.ReturnType<options>
+    get script() {
+      return create().script
+    },
+    style: (...args: never[]) => create().style(...args),
+    variants: (...args: never[]) => create().variants(...args),
+    vars: deferred(() => create().vars),
+  }) as unknown as defineConfig.ReturnType<options>
+}
+
+/** Untyped view of a variable configuration's helpers. */
+type Helpers = {
+  readonly appearance: unknown
+  readonly script: unknown
+  readonly style: (...args: never[]) => unknown
+  readonly variants: (...args: never[]) => unknown
+  readonly vars: object
+}
+
+/** Forwards every operation to a value built on first use, mirroring it onto the proxy target so invariants hold. */
+function deferred<value extends object>(create: () => value): value {
+  const target = (() => {}) as unknown as value
+  let ready = false
+  function resolve() {
+    if (ready) return target
+    const value = create()
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(value))
+    Object.setPrototypeOf(target, Object.getPrototypeOf(value))
+    if (Object.isFrozen(value)) Object.freeze(target)
+    ready = true
+    return target
+  }
+  return new Proxy(target, {
+    apply: (_, self, args) =>
+      Reflect.apply(create() as (...args: unknown[]) => unknown, self, args),
+    defineProperty: (_, key, descriptor) =>
+      Reflect.defineProperty(resolve(), key, descriptor),
+    deleteProperty: (_, key) => Reflect.deleteProperty(resolve(), key),
+    get: (_, key) => Reflect.get(resolve(), key),
+    getOwnPropertyDescriptor: (_, key) =>
+      Reflect.getOwnPropertyDescriptor(resolve(), key),
+    getPrototypeOf: () => Reflect.getPrototypeOf(resolve()),
+    has: (_, key) => Reflect.has(resolve(), key),
+    isExtensible: () => Reflect.isExtensible(resolve()),
+    ownKeys: () => Reflect.ownKeys(resolve()),
+    preventExtensions: () => Reflect.preventExtensions(resolve()),
+    set: (_, key, value) => Reflect.set(resolve(), key, value),
+    setPrototypeOf: (_, prototype) =>
+      Reflect.setPrototypeOf(resolve(), prototype),
+  })
 }
 
 /** Native configuration helpers and inferred Provider props. */
@@ -62,23 +122,30 @@ export function Provider(props: Provider.Props) {
   if (Object.hasOwn(props, 'set'))
     throw new Error('Provider uses vars instead of set.')
   if (
-    (props.colorScheme !== 'light' && props.colorScheme !== 'dark') ||
+    (props.colorScheme !== 'light' &&
+      props.colorScheme !== 'dark' &&
+      props.colorScheme !== 'system') ||
     (props.vars !== undefined &&
       (typeof props.vars !== 'string' || !props.vars.trim()))
   )
     throw new Error(
-      'Native appearance requires a resolved light/dark scheme and a nonempty vars name.',
+      'Native appearance requires a light, dark, or system scheme and a nonempty vars name.',
     )
 
   const viewport = React.useContext(Viewport.context)
+  const system = React.useContext(Viewport.appearance)
+  const colorScheme =
+    props.colorScheme === 'system' ? system.colorScheme : props.colorScheme
+  const adaptive = props.colorScheme === 'system' ? system.adaptive : undefined
   const [store] = React.useState(() =>
-    Store.create({ colorScheme: props.colorScheme, set: props.vars, viewport }),
+    Store.create({ adaptive, colorScheme, set: props.vars, viewport }),
   )
   const [, publish] = React.useReducer((version: number) => version + 1, 0)
   const committed = React.useRef(props.children)
   const snapshot = store.getSnapshot()
   const pending =
-    snapshot.colorScheme !== props.colorScheme ||
+    snapshot.adaptive !== adaptive ||
+    snapshot.colorScheme !== colorScheme ||
     snapshot.set !== props.vars ||
     snapshot.viewport?.width !== viewport?.width ||
     snapshot.viewport?.height !== viewport?.height
@@ -89,9 +156,9 @@ export function Provider(props: Provider.Props) {
     // Keep the committed subtree until its selection is published. This avoids
     // rendering new application props with the previous store snapshot, without
     // mutating an external store during a potentially abandoned React render.
-    store.update({ colorScheme: props.colorScheme, set: props.vars, viewport })
+    store.update({ adaptive, colorScheme, set: props.vars, viewport })
     publish()
-  }, [children, pending, props.colorScheme, props.vars, store, viewport])
+  }, [adaptive, children, colorScheme, pending, props.vars, store, viewport])
 
   return React.createElement(Store.context.Provider, { value: store }, children)
 }
@@ -102,8 +169,11 @@ export declare namespace Provider {
   type Props = {
     /** Components that consume compiled native styling or values. */
     readonly children?: React.ReactNode | undefined
-    /** Resolved device scheme or an application override. */
-    readonly colorScheme: 'dark' | 'light'
+    /**
+     * Resolved device scheme, an application override, or `system` to follow the device.
+     * On iOS, `system` styles whose schemes differ only in color switch without updates.
+     */
+    readonly colorScheme: 'dark' | 'light' | 'system'
     /** Selected variables. Omission uses each configuration's default. */
     readonly vars?: string | undefined
   }