zyzz 0.0.21 → 0.0.23

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),
@@ -277,6 +278,14 @@ export function compile<
                 output[`${property}Right`] = right!
                 output[`${property}Bottom`] = bottom!
                 output[`${property}Left`] = left!
+              } else if (property === 'flex') {
+                Object.assign(output, Scalar.flex(value, options, path))
+              } else if (property === 'inset') {
+                const values =
+                  typeof value === 'string' ? Calculation.parts(value) : [value]
+                const [top, right = top, bottom = top, left = right] =
+                  values.map((value) => convert('offset', value, options, path))
+                Object.assign(output, { top, right, bottom, left })
               } else if (
                 property === 'borderColor' ||
                 property === 'borderWidth'
@@ -606,12 +615,32 @@ 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 Box =
-  | Length
-  | `${Length} ${Length}`
-  | `${Length} ${Length} ${Length}`
-  | `${Length} ${Length} ${Length} ${Length}`
+type Length =
+  | 0
+  | '0'
+  | `${number}px`
+  | `${number}rem`
+  | `${'c' | 'C'}${'a' | 'A'}${'l' | 'L'}${'c' | 'C'}(${string})`
+type Box<item extends string | number = Length> =
+  | item
+  | `${item} ${item}`
+  | `${item} ${item} ${item}`
+  | Box4<item>
+// Distribute the first item to keep case-insensitive calculations below the template expansion limit.
+type Box4<
+  item extends string | number,
+  first extends string | number = item,
+> = first extends unknown ? `${first} ${item} ${item} ${item}` : never
+type FlexBasis = Length | `${number}%` | 'auto'
+type Flex =
+  | number
+  | 'initial'
+  | 'none'
+  | FlexBasis
+  | `${number} ${number | FlexBasis}`
+  | `${FlexBasis} ${number}`
+  | `${number} ${number} ${FlexBasis}`
+  | `${FlexBasis} ${number} ${number}`
 type Weight =
   | 'bold'
   | 'normal'
@@ -656,7 +685,11 @@ type Atom<kind> = kind extends readonly string[]
                         ? Length | number
                         : kind extends 'box' | 'boxSigned'
                           ? Box
-                          : Length
+                          : kind extends 'boxOffset'
+                            ? Box<Length | `${number}%`>
+                            : kind extends 'flex'
+                              ? Flex
+                              : Length
 
 type Reference<property extends keyof typeof properties> = {
   [group in Token.Group]: property extends Token.Properties<group>
@@ -757,50 +790,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,297 @@
+/** 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 Styles from './Styles.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)
+
+/**
+ * Compiler-inserted subscription for resolving native style applications.
+ * Outside a Provider, selections use default variables, the light scheme, and window dimensions.
+ */
+export function useStyles(): Subscription.useStyles.ReturnType {
+  const owner = React.useContext(Store.context)
+  const [fallback] = React.useState(() =>
+    Store.create({
+      colorScheme: 'light',
+      viewport: ReactNative.Dimensions.get('window'),
+    }),
+  )
+  React.useLayoutEffect(() => {
+    if (owner) return
+    const update = () =>
+      fallback.update({
+        colorScheme: 'light',
+        viewport: ReactNative.Dimensions.get('window'),
+      })
+    // Dimensions can change between render and commit.
+    update()
+    const subscription = ReactNative.Dimensions.addEventListener(
+      'change',
+      update,
+    )
+    return () => subscription.remove()
+  }, [fallback, owner])
+
+  return Styles.use(owner ?? fallback)
+}
+
+export { useVars } from '../react.js'
+
+/**
+ * Resolves compiled style props for function components using React updates.
+ * @param Component - Function, memo, or ref-forwarding component receiving native styles.
+ * @param options - Additional style-bearing prop names.
+ * @returns A component with the original call signature and ref. Type parameters remain when `styleProps` is omitted.
+ * @throws For invalid style prop names.
+ */
+export function withStyles<
+  props extends object,
+  result extends React.ReactNode,
+>(
+  Component: (props: props) => result,
+  options?: NoInfer<Subscription.withStyles.Options<(props: props) => result>>,
+): (props: props) => result
+/**
+ * Resolves compiled style props for class and host components using React updates.
+ * @param Component - Class component or host element type receiving native styles.
+ * @param options - Additional style-bearing prop names.
+ * @returns A component preserving the original props and instance ref.
+ * @throws For invalid style prop names.
+ */
+export function withStyles<const component extends React.ElementType>(
+  Component: component,
+  options?: Subscription.withStyles.Options<component>,
+): React.ForwardRefExoticComponent<React.ComponentPropsWithRef<component>>
+export function withStyles(
+  Component: React.ElementType,
+  options: Subscription.withStyles.Options<
+    (props: Readonly<Record<string, unknown>>) => React.ReactNode
+  > = {},
+): React.ElementType {
+  return Styles.wrap(Component, options, useStyles)
+}
+
+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')