zyzz 0.0.21 → 0.0.22

package/src/react-native/StyleSheet.ts

@@ -7,6 +7,8 @@ import type * as Native from '../internal/NativeProperties.js'
 import * as Values from './internal/Values.js'
 import * as Color from './internal/Color.js'
 import * as Scalar from './internal/Scalar.js'
+import * as Calculation from './internal/Calculation.js'
+import * as Tokens from './internal/Tokens.js'
 
 const properties = Scalar.properties
 
@@ -207,6 +209,7 @@ export function compile<
                 scheme,
                 path,
                 resolution,
+                options,
               )
               if (property === 'lineHeight') {
                 lineHeight = value
@@ -266,9 +269,7 @@ export function compile<
               const converted = convert(kind, value, options, path)
               if (property === 'padding' || property === 'margin') {
                 const values =
-                  typeof value === 'string'
-                    ? value.trim().split(/\s+/)
-                    : [value]
+                  typeof value === 'string' ? Calculation.parts(value) : [value]
                 const [top, right = top, bottom = top, left = right] =
                   values.map((value) =>
                     length(value, options, property === 'margin', path),
@@ -606,12 +607,21 @@ type Merged<style> = {
 type StyleArray<style extends object> = Array<
   style | Falsy | readonly (style | Falsy)[] | StyleArray<style>
 >
-type Length = 0 | '0' | `${number}px` | `${number}rem`
+type Length =
+  | 0
+  | '0'
+  | `${number}px`
+  | `${number}rem`
+  | `${'c' | 'C'}${'a' | 'A'}${'l' | 'L'}${'c' | 'C'}(${string})`
 type Box =
   | Length
   | `${Length} ${Length}`
   | `${Length} ${Length} ${Length}`
-  | `${Length} ${Length} ${Length} ${Length}`
+  | Box4
+// Distribute the first item to keep case-insensitive calculations below the template expansion limit.
+type Box4<first extends string | number = Length> = first extends unknown
+  ? `${first} ${Length} ${Length} ${Length}`
+  : never
 type Weight =
   | 'bold'
   | 'normal'
@@ -757,50 +767,24 @@ function resolve(
   scheme: ColorScheme,
   path: readonly string[],
   resolution: { schemeIndependent: boolean },
+  options: compile.Options,
 ): number | string {
-  if (typeof value === 'number' || typeof value === 'string') return value
-  if (
-    !Token.is(value) ||
-    Object.getOwnPropertyDescriptor(value, Token.web)?.value
-  )
+  try {
+    return Tokens.resolve(value, {
+      ...options,
+      metadata,
+      colorScheme: scheme,
+      resolution,
+    })
+  } catch (error) {
     fail(
-      'unsupported_feature',
-      'Web variables, expressions, and dynamic bindings are not native scalar tokens.',
+      error instanceof Tokens.UnsupportedError
+        ? 'unsupported_feature'
+        : 'unsupported_value',
+      (error as Error).message,
       path,
     )
-  const shared =
-    metadata &&
-    (metadata.contract === value.contract ||
-      (metadata.contract[Token.identity] !== undefined &&
-        metadata.contract[Token.identity] === value.contract[Token.identity]))
-  let resolved = shared
-    ? Object.hasOwn(metadata.values, value.path)
-      ? metadata.values[value.path]
-      : undefined
-    : value.value
-  if (resolved === undefined)
-    fail('unsupported_value', 'Theme is missing a live token.', path)
-  while (typeof resolved === 'object') {
-    if (Token.is(resolved)) {
-      resolved = resolved.value
-      continue
-    }
-    if (Token.isExpression(resolved))
-      fail(
-        'unsupported_feature',
-        'Composed variables require a web target.',
-        path,
-      )
-    if ('default' in resolved)
-      fail(
-        'unsupported_feature',
-        'Media-conditioned variables require a web target.',
-        path,
-      )
-    if (resolved.light !== resolved.dark) resolution.schemeIndependent = false
-    resolved = resolved[scheme]
   }
-  return resolved
 }
 
 type TransformValues = {

package/src/react-native/index.native.ts

@@ -0,0 +1,10 @@
+/** Native authoring and React subscriptions with automatic device dimensions. @module */
+export * as Host from './Host.js'
+export * as StyleSheet from './StyleSheet.js'
+export * as Variants from './Variants.js'
+export {
+  defineConfig,
+  useStyles,
+  useVars,
+  withStyles,
+} from './internal/Device.js'

package/src/react-native/index.ts

@@ -1,4 +1,4 @@
-/** Native compilation, precompiled selection, and explicit host lifecycle. @module */
+/** Native compilation and explicit host lifecycle. @module */
 /** Explicit native context and adapter lifecycle. */
 export * as Host from './Host.js'
 /** Native compilation and table selection. */

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

@@ -0,0 +1,159 @@
+/** Evaluates finite calc lengths using explicit native unit mappings. @module */
+import type * as Scalar from './Scalar.js'
+
+type Value = { amount: number; length: boolean }
+
+/** Resolves number/length arithmetic, rejecting relative units and incompatible dimensions. */
+export function length(input: string, options: Scalar.Options): number {
+  const pattern =
+    /\s*(?:(\d+(?:\.\d+)?|\.\d+)(?:[eE]([+-]?\d+))?(px|rem)?|(calc)|([()+*/-]))/giy
+  const positions: number[] = []
+  const tokens: (string | Value)[] = []
+  let offset = 0
+  while (offset < input.trimEnd().length) {
+    pattern.lastIndex = offset
+    const match = pattern.exec(input)
+    if (!match) throw new Error('Unsupported native calc expression.')
+
+    offset = pattern.lastIndex
+    positions.push(match.index + match[0].search(/\S/))
+    if (positions.length > 512)
+      throw new Error('Native calc exceeds 512 tokens.')
+    if (match[1] === undefined) {
+      tokens.push(match[4]?.toLowerCase() ?? match[5]!)
+      continue
+    }
+
+    const unit = match[3]?.toLowerCase()
+    const scale =
+      unit === 'rem'
+        ? options.units?.rem
+        : unit === 'px'
+          ? (options.units?.px ?? 1)
+          : 1
+    if (scale === undefined)
+      throw new Error('Provide units.rem for rem lengths.')
+
+    tokens.push({
+      amount:
+        Number(`${match[1]}${match[2] === undefined ? '' : `e${match[2]}`}`) *
+        scale,
+      length: unit !== undefined,
+    })
+  }
+
+  let cursor = 0
+  let depth = 0
+  function atom(): Value {
+    if (++depth > 64)
+      throw new Error('Native calc exceeds 64 nested operations.')
+    try {
+      return readAtom()
+    } finally {
+      depth--
+    }
+  }
+  function readAtom(): Value {
+    const token = tokens[cursor++]
+    if (token === '+' || token === '-') {
+      const value = atom()
+      return { ...value, amount: token === '-' ? -value.amount : value.amount }
+    }
+    if (token === 'calc' || token === '(') {
+      if (token === 'calc' && tokens[cursor++] !== '(')
+        throw new Error('Unsupported native calc expression.')
+      const value = sum()
+      if (tokens[cursor++] !== ')')
+        throw new Error('Unsupported native calc expression.')
+      return value
+    }
+    if (!token || typeof token === 'string')
+      throw new Error('Unsupported native calc expression.')
+
+    return token
+  }
+
+  function product(): Value {
+    let value = atom()
+    while (tokens[cursor] === '*' || tokens[cursor] === '/') {
+      const operator = tokens[cursor++]
+      const right = atom()
+      if (
+        (operator === '*' && value.length && right.length) ||
+        (operator === '/' && (right.length || right.amount === 0))
+      )
+        throw new Error(
+          'Native calc requires compatible number and length operands.',
+        )
+
+      value = {
+        amount:
+          operator === '*'
+            ? value.amount * right.amount
+            : value.amount / right.amount,
+        length: value.length || right.length,
+      }
+    }
+    return value
+  }
+
+  function sum(): Value {
+    let value = product()
+    while (tokens[cursor] === '+' || tokens[cursor] === '-') {
+      const position = positions[cursor]!
+      if (
+        !/\s/.test(input[position - 1] ?? '') ||
+        !/\s/.test(input[position + 1] ?? '')
+      )
+        throw new Error('Unsupported native calc expression.')
+
+      const operator = tokens[cursor++]
+      const right = product()
+      if (value.length !== right.length)
+        throw new Error(
+          'Native calc requires compatible number and length operands.',
+        )
+
+      value = {
+        amount:
+          operator === '+'
+            ? value.amount + right.amount
+            : value.amount - right.amount,
+        length: value.length,
+      }
+    }
+    return value
+  }
+
+  const value = atom()
+  if (
+    cursor !== tokens.length ||
+    !value.length ||
+    !Number.isFinite(value.amount)
+  )
+    throw new Error('Native calc must resolve to one finite px or rem length.')
+
+  return value.amount
+}
+
+/** Splits shorthand lengths while preserving spaces within calculations. */
+export function parts(input: string): readonly string[] {
+  const result: string[] = []
+  let depth = 0
+  let start = 0
+  const text = input.trim()
+  for (let index = 0; index < text.length; index++) {
+    const character = text[index]
+    if (character === '(') depth++
+    if (character === ')' && --depth < 0)
+      throw new Error('Unbalanced native calculation.')
+    if (depth > 64) throw new Error('Native calc exceeds 64 nested operations.')
+    if (depth === 0 && /\s/.test(character!)) {
+      if (index > start) result.push(text.slice(start, index))
+      start = index + 1
+    }
+  }
+  if (depth !== 0) throw new Error('Unbalanced native calculation.')
+  if (start < text.length) result.push(text.slice(start))
+  return result
+}

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

@@ -0,0 +1,231 @@
+/** Supplies automatic window measurements for native React consumers. @module */
+import type * as Config from '../../Config.js'
+import * as NativeContext from '../../runtime/NativeContext.js'
+import NativeZyzz from './NativeZyzz.js'
+import * as React from 'react'
+import * as ReactNative from 'react-native'
+import * as Store from './Store.js'
+import * as Subscription from '../react.js'
+import * as Viewport from './Viewport.js'
+
+/** Creates native authoring helpers and a Provider with automatic window subscriptions. */
+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>
+}
+
+/** Provides selected variables, appearance, and automatic native dimensions. */
+export const Provider = dimensions(Subscription.Provider)
+
+export { useStyles, useVars, withStyles } from '../react.js'
+
+function dimensions<props extends Subscription.Provider.Props>(
+  Component: React.FunctionComponent<props>,
+): React.FunctionComponent<props> {
+  return function WindowProvider(props: props) {
+    const window = ReactNative.useWindowDimensions()
+    const viewport = React.useMemo(
+      () => ({ height: window.height, width: window.width }),
+      [window.height, window.width],
+    )
+    return React.createElement(
+      Viewport.context.Provider,
+      { value: viewport },
+      React.createElement(Component, props),
+    )
+  }
+}
+
+/** Compiler-only binding path, with React subscriptions for Expo Go. */
+export const useNativeStyles = useBindings
+
+type Instance = {
+  readonly __internalInstanceHandle?:
+    | {
+        readonly stateNode?: { readonly node?: object | undefined } | undefined
+      }
+    | undefined
+  readonly getNativeScrollRef?: (() => Instance) | undefined
+}
+
+function useBindings() {
+  const owner = React.useContext(Store.context)
+  const [fallback] = React.useState(() =>
+    Store.create({
+      colorScheme: 'light',
+      viewport: ReactNative.Dimensions.get('window'),
+    }),
+  )
+  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)
+    }
+  })
+  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)
+
+      return {
+        ...props,
+        ref: (value: Instance | null) => {
+          const ref = props.ref as React.Ref<Instance> | undefined
+          if (!value) return
+          let entry = refs.get(value)
+          if (entry && entry.ref !== ref) {
+            entry.release()
+            refs.delete(value)
+            entry = undefined
+          }
+          if (!entry) {
+            const release = typeof ref === 'function' ? ref(value) : undefined
+            if (ref && typeof ref !== 'function') ref.current = value
+            entry = {
+              active: true,
+              ref,
+              release: () => {
+                if (typeof release === 'function') release()
+                else if (typeof ref === 'function') ref(null)
+                else if (ref) ref.current = null
+              },
+            }
+            refs.set(value, entry)
+          }
+          entry.active = true
+          const attached = entry
+
+          const instance = value.getNativeScrollRef?.() ?? value
+          const node = instance.__internalInstanceHandle?.stateNode?.node
+          const detach = (() => {
+            if (!initial.length && typeof selected !== 'function')
+              return () => {}
+            if (!NativeZyzz || !node || !selective(selected)) {
+              const unsubscribe = store.subscribe(render)
+              if (store.getSnapshot() !== snapshot) render()
+              return unsubscribe
+            }
+            const id = NativeZyzz!.attach(node, nativeProps(selected))
+            let previous = initial
+            const read = (context: NativeContext.Context) => {
+              const keys = NativeContext.key(props.style, context)
+              if (
+                keys.length === previous.length &&
+                keys.every((key, index) => Object.is(key, previous[index]))
+              )
+                return { commit: () => {} }
+              const selected = NativeContext.resolve(props.style, context)
+              if (!selective(selected)) return { commit: render }
+              return {
+                commit: () => {
+                  previous = keys
+                },
+                patch: {
+                  id,
+                  props: 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()
+            const unbind = store.bind(read, write)
+            return () => {
+              unbind()
+              NativeZyzz!.detach(id)
+            }
+          })()
+          const update = () =>
+            fallback.update({
+              colorScheme: 'light',
+              viewport: ReactNative.Dimensions.get('window'),
+            })
+          const contextual =
+            initial.length > 0 || typeof selected === 'function'
+          const subscription =
+            owner || !contextual
+              ? undefined
+              : ReactNative.Dimensions.addEventListener('change', update)
+          if (!owner && contextual) update()
+          return () => {
+            detach()
+            subscription?.remove()
+            attached.active = false
+          }
+        },
+        style: selected,
+      }
+    },
+  }
+}
+
+function selective(style: unknown): boolean {
+  if (typeof style === 'function') return false
+  const value = ReactNative.StyleSheet.flatten(
+    style as ReactNative.StyleProp<ReactNative.ViewStyle>,
+  )
+  // Let React Native apply its processors to caller-owned representations.
+  // Only color properties are processed by the selective writer below.
+  return (
+    !value ||
+    ![
+      'aspectRatio',
+      'backgroundImage',
+      'backgroundPosition',
+      'backgroundRepeat',
+      'backgroundSize',
+      'boxShadow',
+      'experimental_backgroundImage',
+      'filter',
+      'fontVariant',
+      'transform',
+      'transformOrigin',
+    ].some((property) => property in value)
+  )
+}
+
+function nativeProps(style: unknown): Record<string, unknown> {
+  const flattened =
+    ReactNative.StyleSheet.flatten(
+      style as ReactNative.StyleProp<ReactNative.ViewStyle>,
+    ) ?? {}
+  const result: Record<string, unknown> = { ...flattened }
+  for (const [name, value] of Object.entries(result)) {
+    if (name === 'color' || name.endsWith('Color'))
+      result[name] = ReactNative.processColor(value as ReactNative.ColorValue)
+  }
+  return result
+}
+
+function write(patches: readonly Store.Patch[]) {
+  NativeZyzz!.update(patches)
+}

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

@@ -0,0 +1,20 @@
+/** Private Fabric bridge for committed view bindings. @module */
+import type { CodegenTypes, TurboModule } from 'react-native'
+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. */
+  readonly update: (updates: ReadonlyArray<CodegenTypes.UnsafeObject>) => void
+}
+
+export default TurboModuleRegistry.get<Spec>('NativeZyzz')

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

@@ -1,5 +1,6 @@
 /** Converts portable scalar values without source parsing or device state. @module */
 import * as Color from './Color.js'
+import * as Calculation from './Calculation.js'
 
 /** Portable property domains shared by static and dynamic native conversion. */
 export const properties = {
@@ -207,7 +208,7 @@ export function convert(
   }
   if (kind === 'box' || kind === 'boxSigned') {
     const values =
-      typeof value === 'string' ? value.trim().split(/\s+/) : [value]
+      typeof value === 'string' ? Calculation.parts(value) : [value]
     if (!values.length || values.length > 4)
       fail('unsupported_value', 'Use one to four scalar lengths.', path)
     for (const value of values)
@@ -225,9 +226,19 @@ export function length(
   path: readonly string[],
 ): number {
   if (value === 0 || value === '0') return 0
+  if (typeof value === 'string' && /^\s*calc\(/i.test(value)) {
+    const result = Calculation.length(value.trim(), options)
+    if (!signed && result < 0)
+      fail(
+        'unsupported_value',
+        'Converted length is outside the native property domain.',
+        path,
+      )
+    return result
+  }
   const match =
     typeof value === 'string' &&
-    /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(px|rem)$/.exec(value)
+    /^([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:[eE][+-]?\d+)?)(px|rem)$/.exec(value)
   if (!match)
     fail(
       'unsupported_value',

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

@@ -0,0 +1,78 @@
+/** Owns scoped React subscriptions and committed native style readers. @module */
+import type * as NativeContext from '../../runtime/NativeContext.js'
+import * as React from 'react'
+
+/** Internal view update payload shared with the native bridge. */
+export type Patch = {
+  /** Runtime-local mounted view identifier. */
+  readonly id: number
+  /** Processed native style properties. */
+  readonly props: Record<string, unknown>
+}
+
+type Selection = {
+  readonly commit: () => void
+  readonly patch?: Patch | undefined
+}
+type Reader = (value: NativeContext.Context) => Selection
+type Writer = (patches: readonly Patch[]) => void
+
+/** Nearest configuration-owned selection. */
+export const context = React.createContext<
+  ReturnType<typeof create> | undefined
+>(undefined)
+
+/** Creates subscriptions owned by a Provider or a provider-free style consumer. */
+export function create(initial: NativeContext.Context) {
+  let snapshot = Object.freeze(initial)
+  const bindings = new Map<Reader, Writer>()
+  const listeners = new Set<() => void>()
+
+  return {
+    bind(read: Reader, write: Writer) {
+      bindings.set(read, write)
+      return () => {
+        bindings.delete(read)
+      }
+    },
+    getSnapshot: () => snapshot,
+    subscribe(listener: () => void) {
+      const entry = () => listener()
+      listeners.add(entry)
+      return () => {
+        listeners.delete(entry)
+      }
+    },
+    update(value: NativeContext.Context) {
+      if (
+        snapshot.colorScheme === value.colorScheme &&
+        snapshot.set === value.set &&
+        snapshot.viewport?.height === value.viewport?.height &&
+        snapshot.viewport?.width === value.viewport?.width
+      )
+        return
+
+      // Resolve every binding before applying a scope change that can fail.
+      const selections: Selection[] = []
+      const batches = new Map<Writer, Patch[]>()
+      for (const [read, write] of bindings) {
+        const selection = read(value)
+        selections.push(selection)
+        if (!selection.patch) continue
+        let batch = batches.get(write)
+        if (!batch) {
+          batch = []
+          batches.set(write, batch)
+        }
+        batch.push(selection.patch)
+      }
+      for (const [write, patches] of batches) write(patches)
+
+      snapshot = Object.freeze(value)
+      for (const selection of selections) selection.commit()
+      // Subscriptions added during notification wait for the next change.
+      for (const listener of Array.from(listeners))
+        if (listeners.has(listener)) listener()
+    },
+  }
+}