zyzz 0.0.22 → 0.0.23

package/src/compiler/internal/Themes.ts

@@ -120,6 +120,34 @@ export type VarsRead = {
   readonly vars: Readonly<Record<string, Theme.Definition>>
 }
 
+/** Resolves the variable alternatives a linked configuration or variable set exposes to native hooks. */
+export function varsRead(
+  link: Pick<Link, 'call' | 'definition' | 'members'>,
+): Omit<VarsRead, 'end' | 'start'> {
+  const named = link.call.options?.themes !== undefined
+  const vars = (() => {
+    if (!named) return { default: link.definition }
+    return Object.fromEntries(
+      Object.entries(link.members ?? {}).flatMap((entry) => {
+        const [key, member] = entry
+        const path = JSON.parse(key) as string[]
+        if (path.length === 1 && link.call.selection)
+          return [[path[0]!, member.definition]]
+        if (path.length === 2 && path[0] === 'themes')
+          return [[path[1]!, member.definition]]
+        return []
+      }),
+    )
+  })()
+
+  return {
+    defaultVars: named ? String(link.call.options!.defaultTheme) : 'default',
+    owner: link.call.name,
+    unnamed: !named,
+    vars,
+  }
+}
+
 /** Shared graph data; no filesystem or runtime evaluation is involved. */
 export type Context = {
   /** Canonical identifier names collected during graph validation. */
@@ -1796,29 +1824,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
     )
       return false
 
-    const named = link.call.options?.themes !== undefined
-    const vars = (() => {
-      if (!named) return { default: link.definition }
-      return Object.fromEntries(
-        Object.entries(link.members ?? {}).flatMap((entry) => {
-          const [key, member] = entry
-          const path = JSON.parse(key) as string[]
-          if (path.length === 1 && link.call.selection)
-            return [[path[0]!, member.definition]]
-          if (path.length === 2 && path[0] === 'themes')
-            return [[path[1]!, member.definition]]
-          return []
-        }),
-      )
-    })()
-    varsReads.push({
-      defaultVars: named ? String(link.call.options!.defaultTheme) : 'default',
-      end: node.end,
-      owner: link.call.name,
-      start: node.start,
-      unnamed: !named,
-      vars,
-    })
+    varsReads.push({ ...varsRead(link), end: node.end, start: node.start })
     return true
   }
 

package/src/metro/Graph.ts

@@ -148,7 +148,10 @@ export function read(
     seen.add(filename)
     const source = snapshot.readSync(filename)
     const file = manifest(filename)
-    if (file && !/['"]zyzz(?:\/default)?['"]/.test(source)) {
+    if (
+      file &&
+      !/['"]zyzz(?:\/default|\/react-native(?:\/react)?)?['"]/.test(source)
+    ) {
       const data = JSON.parse(snapshot.readSync(file)) as Record<
         string,
         unknown
@@ -174,7 +177,19 @@ export function read(
     for (const node of snapshot.parse({ moduleId: identity(filename), source })
       .program.body) {
       const name = specifier(node)
-      if (name === 'zyzz' || name === 'zyzz/default') {
+      // Consumers import vars profiles from defineConfig modules, so those modules must compile.
+      const native =
+        (name === 'zyzz/react-native' || name === 'zyzz/react-native/react') &&
+        node.type === 'ImportDeclaration' &&
+        node.specifiers.some(
+          (entry) =>
+            entry.type === 'ImportSpecifier' &&
+            entry.importKind !== 'type' &&
+            (entry.imported.type === 'Identifier'
+              ? entry.imported.name
+              : entry.imported.value) === 'defineConfig',
+        )
+      if (name === 'zyzz' || name === 'zyzz/default' || native) {
         authored.add(filename)
         return true
       }

package/src/react-native/StyleSheet.ts

@@ -278,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'
@@ -613,15 +621,26 @@ type Length =
   | `${number}px`
   | `${number}rem`
   | `${'c' | 'C'}${'a' | 'A'}${'l' | 'L'}${'c' | 'C'}(${string})`
-type Box =
-  | Length
-  | `${Length} ${Length}`
-  | `${Length} ${Length} ${Length}`
-  | Box4
+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<first extends string | number = Length> = first extends unknown
-  ? `${first} ${Length} ${Length} ${Length}`
-  : never
+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'
@@ -666,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>

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

@@ -5,6 +5,7 @@ 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'
 
@@ -22,7 +23,72 @@ export function defineConfig<const options extends Config.create.Options = {}>(
 /** Provides selected variables, appearance, and automatic native dimensions. */
 export const Provider = dimensions(Subscription.Provider)
 
-export { useStyles, useVars, withStyles } from '../react.js'
+/**
+ * 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>,

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

@@ -48,6 +48,7 @@ export const properties = {
   columnGap: 'length',
   direction: ['ltr', 'rtl'],
   display: ['contents', 'flex', 'none'],
+  flex: 'flex',
   flexBasis: 'size',
   flexDirection: ['column', 'column-reverse', 'row', 'row-reverse'],
   flexGrow: 'number',
@@ -60,6 +61,7 @@ export const properties = {
   fontWeight: 'weight',
   gap: 'length',
   height: 'size',
+  inset: 'boxOffset',
   justifyContent: [
     'center',
     'flex-end',
@@ -206,18 +208,87 @@ export function convert(
       return value
     fail('unsupported_value', 'Invalid native percentage.', path)
   }
-  if (kind === 'box' || kind === 'boxSigned') {
+  if (kind === 'flex') {
+    flex(value, options, path)
+    return 0
+  }
+  if (kind === 'box' || kind === 'boxOffset' || kind === 'boxSigned') {
     const values =
       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)
-      length(value, options, kind === 'boxSigned', path)
+      if (kind === 'boxOffset') convert('offset', value, options, path)
+      else length(value, options, kind === 'boxSigned', path)
     return 0
   }
   return length(value, options, kind === 'signed' || kind === 'offset', path)
 }
 
+/**
+ * Expands the CSS `flex` shorthand to native longhands with CSS semantics.
+ * Omitted factors default to 1 and an omitted basis to 0, unlike the React Native `flex` prop.
+ */
+export function flex(
+  value: number | string,
+  options: Options,
+  path: readonly string[],
+): flex.ReturnType {
+  const keyword = typeof value === 'string' ? value.trim() : undefined
+  if (keyword === 'none')
+    return { flexBasis: 'auto', flexGrow: 0, flexShrink: 0 }
+  if (keyword === 'auto')
+    return { flexBasis: 'auto', flexGrow: 1, flexShrink: 1 }
+  if (keyword === 'initial')
+    return { flexBasis: 'auto', flexGrow: 0, flexShrink: 1 }
+
+  const parts = typeof value === 'string' ? Calculation.parts(value) : [value]
+  const kinds: ('basis' | 'factor')[] = []
+  for (const part of parts) {
+    const numeric =
+      typeof part === 'number' ||
+      /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(part)
+    // A unitless zero after two factors is the basis, as in CSS.
+    const basis =
+      !numeric || (kinds.join(' ') === 'factor factor' && Number(part) === 0)
+    kinds.push(basis ? 'basis' : 'factor')
+  }
+  // Factors stay adjacent, and the basis may precede or follow them.
+  if (
+    ![
+      'basis',
+      'basis factor',
+      'basis factor factor',
+      'factor',
+      'factor basis',
+      'factor factor',
+      'factor factor basis',
+    ].includes(kinds.join(' '))
+  )
+    fail('unsupported_value', 'Invalid flex shorthand.', path)
+
+  const factors = parts
+    .filter((_, index) => kinds[index] === 'factor')
+    .map((part) => convert('number', Number(part), options, path) as number)
+  const basis = parts.find((_, index) => kinds[index] === 'basis')
+
+  return {
+    flexBasis: basis === undefined ? 0 : convert('size', basis, options, path),
+    flexGrow: factors[0] ?? 1,
+    flexShrink: factors[1] ?? 1,
+  }
+}
+
+/** Native longhands produced by the `flex` shorthand. */
+export declare namespace flex {
+  /** Grow and shrink factors with a converted basis. */
+  type ReturnType = {
+    readonly flexBasis: number | string
+    readonly flexGrow: number
+    readonly flexShrink: number
+  }
+}
+
 /** Converts a portable length to logical units. */
 export function length(
   value: number | string,

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

@@ -0,0 +1,77 @@
+/** Resolves compiled style applications for consumers outside native view bindings. @module */
+import * as NativeContext from '../../runtime/NativeContext.js'
+import * as React from 'react'
+import type { useStyles } from '../react.js'
+import type * as Store from './Store.js'
+
+/** Subscribes to a selection and returns its style resolvers. */
+export function use(
+  store: ReturnType<typeof Store.create>,
+): useStyles.ReturnType {
+  const value = React.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getSnapshot,
+  )
+  return React.useMemo(
+    () => ({
+      props: (props) =>
+        props && Object.hasOwn(props, 'style')
+          ? { ...props, style: NativeContext.resolve(props.style, value) }
+          : props,
+      style: <style>(style: style, input?: unknown) =>
+        NativeContext.resolve(style, value, input) as useStyles.Style<style>,
+    }),
+    [value],
+  )
+}
+
+/**
+ * Wraps a component so its style props resolve through an entrypoint's selection hook.
+ * @throws For invalid style prop names.
+ */
+export function wrap<const component extends React.ElementType>(
+  Component: component,
+  options: wrap.Options,
+  useStyles: () => useStyles.ReturnType,
+) {
+  const additional = options.styleProps ?? []
+  if (
+    !Array.isArray(additional) ||
+    additional.some(
+      (name) =>
+        typeof name !== 'string' || !name || name === 'key' || name === 'ref',
+    )
+  )
+    throw new Error(
+      'withStyles requires style prop names excluding key and ref.',
+    )
+
+  const names = [...new Set(['style', 'contentContainerStyle', ...additional])]
+  const Wrapped = React.forwardRef<
+    React.ComponentRef<component>,
+    React.ComponentPropsWithoutRef<component>
+  >((props, ref) => {
+    const selected = useStyles()
+    const resolved: Record<string, unknown> = { ...props, ref }
+    for (const name of names)
+      if (Object.hasOwn(props, name))
+        resolved[name] = selected.style(
+          (props as Record<string, unknown>)[name],
+        )
+
+    return React.createElement(Component, resolved)
+  })
+  Wrapped.displayName = `withStyles(${typeof Component === 'string' ? Component : Component.displayName || Component.name || 'Component'})`
+
+  return Wrapped
+}
+
+/** Style-bearing prop names accepted by a wrapper. */
+export declare namespace wrap {
+  /** Entrypoints narrow these names to the wrapped component's props. */
+  type Options = {
+    /** Additional style props declared by the wrapped component. */
+    readonly styleProps?: readonly string[] | undefined
+  }
+}

package/src/react-native/react.ts

@@ -1,17 +1,13 @@
 /** React subscriptions for compiled native styles and variable values. @module */
 import * as Config from '../Config.js'
-import * as NativeContext from '../runtime/NativeContext.js'
+import type * as NativeContext from '../runtime/NativeContext.js'
 import * as NativeVars from '../runtime/NativeVars.js'
 import * as React from 'react'
 import type * as Vars from '../Vars.js'
 import * as Store from './internal/Store.js'
+import * as Styles from './internal/Styles.js'
 import * as Viewport from './internal/Viewport.js'
 
-const unbound = {
-  getSnapshot: () => undefined,
-  subscribe: () => () => {},
-}
-
 /** Creates native authoring helpers and a Provider typed to the configured variables. */
 export function defineConfig<const options extends Config.create.Options = {}>(
   options: options & Parameters<typeof Config.create<options>>[0] = {} as never,
@@ -113,15 +109,39 @@ export declare namespace Provider {
   }
 }
 
-/** Compiler-inserted subscription for resolving native style applications. */
-export function useStyles() {
-  const store = React.useContext(Store.context) ?? unbound
-  const value = React.useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getSnapshot,
+/**
+ * Compiler-inserted subscription for resolving native style applications.
+ * Outside a Provider, selections use default variables and the light scheme.
+ */
+export function useStyles(): useStyles.ReturnType {
+  const [fallback] = React.useState(() =>
+    Store.create({ colorScheme: 'light' }),
   )
-  return React.useMemo(() => styles(value), [value])
+  return Styles.use(React.useContext(Store.context) ?? fallback)
+}
+
+/** Resolver types for Provider-selected native styles. */
+export declare namespace useStyles {
+  /** Resolvers bound to the nearest Provider selection. */
+  type ReturnType = {
+    /** Resolves the `style` prop of applied props and preserves other props. */
+    readonly props: <
+      props extends Readonly<Record<string, unknown>> | null | undefined,
+    >(
+      props: props,
+    ) => props
+    /** Resolves an applied style, native style, style array, or style callback. */
+    readonly style: <style>(style: style, input?: unknown) => Style<style>
+  }
+  /**
+   * Resolved style type. Caller-owned values keep their types. Native applications
+   * always carry `style`, so an applied style drops the `undefined` allowed by the shared props type.
+   */
+  type Style<style> = [
+    style extends object ? (string extends keyof style ? style : never) : never,
+  ] extends [never]
+    ? style
+    : Exclude<style, undefined>
 }
 
 /** Compiler fallback for native view bindings when no native adapter is installed. */
@@ -171,46 +191,37 @@ export function useVars(
 }
 
 /**
- * Resolves compiled style props for components using React updates.
- * @param Component - Function, class, or ref-forwarding component receiving native styles.
+ * 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<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 ref.
- * @throws For invalid style prop names or unresolved native selections.
+ * @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: withStyles.Options<component> = {},
-) {
-  const additional = options.styleProps ?? []
-  if (
-    !Array.isArray(additional) ||
-    additional.some(
-      (name) =>
-        typeof name !== 'string' || !name || name === 'key' || name === 'ref',
-    )
-  )
-    throw new Error(
-      'withStyles requires style prop names excluding key and ref.',
-    )
-
-  const names = [...new Set(['style', 'contentContainerStyle', ...additional])]
-  const Wrapped = React.forwardRef<
-    React.ComponentRef<component>,
-    React.ComponentPropsWithoutRef<component>
-  >((props, ref) => {
-    const selected = useStyles()
-    const resolved: Record<string, unknown> = { ...props, ref }
-    for (const name of names)
-      if (Object.hasOwn(props, name))
-        resolved[name] = selected.style(
-          (props as Record<string, unknown>)[name],
-        )
-
-    return React.createElement(Component, resolved)
-  })
-  Wrapped.displayName = `withStyles(${typeof Component === 'string' ? Component : Component.displayName || Component.name || 'Component'})`
-
-  return Wrapped
+  options?: withStyles.Options<component>,
+): React.ForwardRefExoticComponent<React.ComponentPropsWithRef<component>>
+export function withStyles(
+  Component: React.ElementType,
+  options: withStyles.Options<
+    (props: Readonly<Record<string, unknown>>) => React.ReactNode
+  > = {},
+): React.ElementType {
+  return Styles.wrap(Component, options, useStyles)
 }
 
 /** Style-bearing component properties resolved by the wrapper. */
@@ -226,14 +237,3 @@ export declare namespace withStyles {
       | undefined
   }
 }
-
-function styles(value: NativeContext.Context | undefined) {
-  return {
-    props: (props: Record<string, unknown> | null | undefined) =>
-      props && Object.hasOwn(props, 'style')
-        ? { ...props, style: NativeContext.resolve(props.style, value) }
-        : props,
-    style: (style: unknown, input?: unknown) =>
-      NativeContext.resolve(style, value, input),
-  }
-}

package/src/runtime/NativeDynamic.ts

@@ -205,6 +205,13 @@ export function create(
             [`${property}Bottom`]: bottom,
             [`${property}Left`]: left,
           })
+        } else if (property === 'inset') {
+          const parts =
+            typeof value === 'string' ? Calculation.parts(value) : [value]
+          const [top, right = top, bottom = top, left = right] = parts.map(
+            (part) => Scalar.convert('offset', part, options, [property]),
+          )
+          Object.assign(output, { top, right, bottom, left })
         } else if (property === 'borderColor' || property === 'borderWidth') {
           for (const side of ['Top', 'Right', 'Bottom', 'Left'])
             output[