zyzz 0.0.21 → 0.0.23

package/src/compiler/internal/NativeMedia.ts

@@ -0,0 +1,342 @@
+/** Lowers native media rules and conditional tokens to bounded static alternatives. @module */
+import * as CssTree from 'css-tree'
+import type * as Media from '../../runtime/internal/NativeMedia.js'
+import * as Scalar from '../../react-native/internal/Scalar.js'
+import type * as Style from '../../Style.js'
+import type * as StyleSheet from '../../react-native/StyleSheet.js'
+import * as Token from '../../internal/Token.js'
+
+/** Retains authored precedence while selecting each possible media outcome. */
+export function prepare<variables extends StyleSheet.compile.Options['vars']>(
+  styles: readonly Style.NamedStyle[] | undefined,
+  vars: variables,
+  options: Scalar.Options,
+) {
+  const catalog: StyleSheet.compile.Options['vars'] = vars
+  const expressions = new Map<string, number>()
+  const names = new Map<string, number>()
+  const queries: Media.Query[] = []
+  const visited = new Set<object>()
+
+  function add(name: string) {
+    if (names.has(name)) return
+
+    const query = parse(name, options)
+    const expression = JSON.stringify(query)
+    let index = expressions.get(expression)
+    if (index === undefined) {
+      index = queries.length
+      if (index === 8)
+        throw new Error(
+          'Native media supports at most eight distinct conditions per definition.',
+        )
+
+      queries.push(query)
+      expressions.set(expression, index)
+    }
+
+    names.set(name, index)
+  }
+
+  function values(value: unknown) {
+    if (!value || typeof value !== 'object' || visited.has(value)) return
+
+    visited.add(value)
+    if (Token.is(value)) {
+      values(value.value)
+      for (const theme of Object.values(catalog ?? {})) {
+        const metadata = theme[Token.definition]
+        if (
+          metadata.contract === value.contract ||
+          (metadata.contract[Token.identity] !== undefined &&
+            metadata.contract[Token.identity] ===
+              value.contract[Token.identity])
+        )
+          values(metadata.values[value.path])
+      }
+    } else if (Token.isExpression(value)) value.parts.forEach(values)
+    else if ('default' in value) {
+      for (const [name, entry] of Object.entries(value)) {
+        if (name !== 'default') {
+          // Unsupported variable leaves keep their deferred read diagnostic.
+          try {
+            add(name)
+          } catch (error) {
+            if (!(error instanceof UnsupportedError)) throw error
+          }
+        }
+        values(entry)
+      }
+    } else if ('light' in value && 'dark' in value) {
+      values(value.light)
+      values(value.dark)
+    }
+  }
+
+  function visit(style: Style.NamedStyle) {
+    for (const declaration of style.declarations) values(declaration.value)
+    for (const rule of style.rules ?? []) {
+      if (rule.condition?.startsWith('@media')) add(rule.condition)
+      visit(rule.style)
+    }
+  }
+
+  styles?.forEach(visit)
+  if (!styles)
+    for (const theme of Object.values(catalog ?? {})) {
+      const metadata = theme[Token.definition]
+      Object.values(metadata.values).forEach(values)
+    }
+  if (!queries.length) return
+
+  return {
+    queries,
+    select(selection: string) {
+      const active = new Set<object>()
+      function value<entry>(entry: entry): entry {
+        if (!entry || typeof entry !== 'object') return entry
+        if (active.has(entry))
+          throw new Error('Native token aliases must not form a cycle.')
+
+        active.add(entry)
+        try {
+          if (Token.is(entry))
+            return Token.create({
+              ...entry,
+              value: value(entry.value),
+            }) as entry
+          if (Token.isExpression(entry))
+            return { ...entry, parts: entry.parts.map(value) } as entry
+          if ('default' in entry) {
+            const branches = Object.entries(entry)
+            if (
+              branches.some(([name]) => name !== 'default' && !names.has(name))
+            )
+              return Object.fromEntries(
+                branches
+                  .filter(([name]) => name === 'default' || !names.has(name))
+                  .map(([name, branch]) => [name, value(branch)]),
+              ) as entry
+
+            let selected = entry.default
+            for (const [name, branch] of branches)
+              if (name !== 'default' && selection[names.get(name)!] === '1')
+                selected = branch
+
+            return value(selected) as entry
+          }
+          if ('light' in entry && 'dark' in entry)
+            return {
+              ...entry,
+              dark: value(entry.dark),
+              light: value(entry.light),
+            }
+          return entry
+        } finally {
+          active.delete(entry)
+        }
+      }
+
+      function style(entry: Style.NamedStyle): Style.NamedStyle {
+        return {
+          ...entry,
+          declarations: entry.declarations.map((declaration) => ({
+            ...declaration,
+            value: value(declaration.value),
+          })),
+          ...(entry.rules
+            ? {
+                rules: entry.rules.flatMap((rule) => {
+                  const index =
+                    rule.condition === undefined
+                      ? undefined
+                      : names.get(rule.condition)
+                  if (index !== undefined && selection[index] !== '1') return []
+
+                  return [
+                    {
+                      ...(index === undefined ? rule : {}),
+                      style: style(rule.style),
+                    },
+                  ]
+                }),
+              }
+            : {}),
+        }
+      }
+
+      return {
+        style,
+        vars:
+          catalog &&
+          (Object.fromEntries(
+            Object.entries(catalog).map(([name, theme]) => {
+              const metadata = theme[Token.definition]
+              return [
+                name,
+                Object.defineProperty({}, Token.definition, {
+                  value: {
+                    ...metadata,
+                    values: Object.fromEntries(
+                      Object.entries(metadata.values).map(([path, entry]) => [
+                        path,
+                        value(entry),
+                      ]),
+                    ),
+                  },
+                }) as typeof theme,
+              ]
+            }),
+          ) as variables),
+      }
+    },
+    selections: Array.from({ length: 2 ** queries.length }, (_entry, index) =>
+      index.toString(2).padStart(queries.length, '0'),
+    ),
+  }
+}
+
+class UnsupportedError extends Error {
+  override name = 'NativeMedia.UnsupportedError'
+}
+
+function parse(input: string, options: Scalar.Options): Media.Query {
+  if (!input.startsWith('@media'))
+    throw new UnsupportedError(
+      'Native conditional variables require media queries.',
+    )
+  const parsed = CssTree.parse(input.slice(6), { context: 'mediaQueryList' })
+  let count = 0
+  function read(node: CssTree.CssNode): Media.Query {
+    if (++count > 128)
+      throw new Error('Native media queries exceed 128 syntax nodes.')
+    if (node.type === 'MediaQueryList') {
+      const queries = node.children.toArray().map(read)
+      return queries.length === 1 ? queries[0]! : { kind: 'or', queries }
+    }
+    if (node.type === 'MediaQuery') {
+      if (
+        (node.mediaType &&
+          !['all', 'screen'].includes(node.mediaType.toLowerCase())) ||
+        node.modifier?.toLowerCase() === 'not'
+      )
+        throw new UnsupportedError(
+          'Native media types support all or screen without negation.',
+        )
+      return node.condition
+        ? read(node.condition)
+        : { kind: 'compare', left: 0, operator: '=', right: 0 }
+    }
+    if (node.type === 'Condition') {
+      const parts = node.children.toArray()
+      if (parts.length === 1) return read(parts[0]!)
+      if (
+        parts.length === 2 &&
+        parts[0]?.type === 'Identifier' &&
+        parts[0].name.toLowerCase() === 'not'
+      )
+        return { kind: 'not', query: read(parts[1]!) }
+      const operator =
+        parts[1]?.type === 'Identifier'
+          ? parts[1].name.toLowerCase()
+          : undefined
+      if (
+        (operator !== 'and' && operator !== 'or') ||
+        parts.length % 2 !== 1 ||
+        parts.some(
+          (part, index) =>
+            index % 2 === 1 &&
+            (part.type !== 'Identifier' ||
+              part.name.toLowerCase() !== operator),
+        )
+      )
+        throw new UnsupportedError('Unsupported native media condition.')
+      return {
+        kind: operator,
+        queries: parts.filter((_part, index) => index % 2 === 0).map(read),
+      }
+    }
+    function operand(entry: CssTree.CssNode): number | 'height' | 'width' {
+      if (
+        entry.type === 'Identifier' &&
+        (entry.name.toLowerCase() === 'height' ||
+          entry.name.toLowerCase() === 'width')
+      )
+        return entry.name.toLowerCase() as 'height' | 'width'
+      if (entry.type === 'Dimension') {
+        try {
+          return Scalar.length(
+            `${entry.value}${entry.unit.toLowerCase()}`,
+            options,
+            false,
+            [],
+          )
+        } catch (error) {
+          throw new UnsupportedError((error as Error).message)
+        }
+      }
+      if (entry.type === 'Number' && Number(entry.value) === 0) return 0
+      throw new UnsupportedError(
+        'Native media ranges require width/height and px/rem thresholds.',
+      )
+    }
+    function comparison(
+      left: CssTree.CssNode,
+      operator: string | null,
+      right: CssTree.CssNode,
+    ): Media.Query {
+      if (!operator || !['<', '<=', '=', '>', '>='].includes(operator))
+        throw new UnsupportedError('Unsupported native media comparison.')
+      return {
+        kind: 'compare',
+        left: operand(left),
+        operator: operator as '<' | '<=' | '=' | '>' | '>=',
+        right: operand(right),
+      }
+    }
+    if (node.type === 'FeatureRange') {
+      const first = comparison(node.left, node.leftComparison, node.middle)
+      return node.right
+        ? {
+            kind: 'and',
+            queries: [
+              first,
+              comparison(node.middle, node.rightComparison, node.right),
+            ],
+          }
+        : first
+    }
+    if (node.type === 'Feature') {
+      const name = node.name.toLowerCase()
+      if (
+        name === 'orientation' &&
+        node.value?.type === 'Identifier' &&
+        ['landscape', 'portrait'].includes(node.value.name.toLowerCase())
+      )
+        return {
+          kind: 'compare',
+          left: 'width',
+          operator: node.value.name.toLowerCase() === 'landscape' ? '>' : '<=',
+          right: 'height',
+        }
+      const match = /^(?:(min|max)-)?(height|width)$/.exec(name)
+      if (match)
+        return {
+          kind: 'compare',
+          left: match[2] as 'height' | 'width',
+          operator:
+            match[1] === 'min'
+              ? '>='
+              : match[1] === 'max'
+                ? '<='
+                : node.value
+                  ? '='
+                  : '>',
+          right: node.value ? operand(node.value) : 0,
+        }
+    }
+    throw new UnsupportedError('Unsupported native media feature.')
+  }
+
+  return read(parsed)
+}

package/src/compiler/internal/NativeVars.ts

@@ -0,0 +1,231 @@
+/** Converts authored variables to static native value profiles. @module */
+import * as Calculation from '../../react-native/internal/Calculation.js'
+import * as Literal from '../../internal/Literal.js'
+import * as Media from './NativeMedia.js'
+import type * as Runtime from '../../runtime/NativeVars.js'
+import * as Scalar from '../../react-native/internal/Scalar.js'
+import type * as Theme from '../../internal/Theme.js'
+import * as Token from '../../internal/Token.js'
+import * as VariableSets from '../../internal/VariableSets.js'
+
+/** Resolves native domains using the style compiler's unit and font mappings. */
+export function compile(options: compile.Options): Runtime.create.Options {
+  const media = Media.prepare(undefined, options.vars, options)
+  return {
+    defaultVars: options.defaultVars,
+    ...(media
+      ? {
+          media: {
+            profiles: Object.fromEntries(
+              media.selections.map((selection) => [
+                selection,
+                compile({ ...options, vars: media.select(selection).vars! })
+                  .profiles,
+              ]),
+            ),
+            queries: media.queries,
+          },
+        }
+      : {}),
+    profiles: Object.fromEntries(
+      Object.entries(options.vars).map((entry) => {
+        const [name, theme] = entry
+        return [
+          name,
+          { dark: profile(theme, 'dark'), light: profile(theme, 'light') },
+        ]
+      }),
+    ),
+    unnamed: options.unnamed,
+  }
+
+  function profile(theme: Theme.Definition, scheme: 'dark' | 'light') {
+    const metadata = theme[Token.definition]
+    const active = new Set<Token.Reference>()
+    type Tree = {
+      [key: string]: string | number | Tree | readonly [string]
+    }
+    const tree: Tree = Object.create(null)
+
+    function resolve(value: Token.Value): string | number {
+      if (typeof value === 'string' || typeof value === 'number') return value
+      if (Token.is(value)) {
+        if (active.has(value))
+          throw new Error('Native token aliases must not form a cycle.')
+        const shared =
+          metadata.contract === value.contract ||
+          (metadata.contract[Token.identity] !== undefined &&
+            metadata.contract[Token.identity] ===
+              value.contract[Token.identity])
+        const next = shared ? metadata.values[value.path] : value.value
+        if (next === undefined)
+          throw new Error(`Missing native token: ${value.path}.`)
+        active.add(value)
+        try {
+          return resolve(next)
+        } finally {
+          active.delete(value)
+        }
+      }
+      if (Token.isExpression(value) && 'group' in value) {
+        const text = value.parts.map(resolve).join('')
+        return value.group === 'spacing' && /^\s*calc\(/i.test(text)
+          ? `${Calculation.length(text, options) / (options.units?.px ?? 1)}px`
+          : text
+      }
+      if ('light' in value && 'dark' in value) return resolve(value[scheme])
+      throw new Error(
+        media
+          ? 'Native media-conditioned variables require the native Provider window dimensions.'
+          : 'Media-conditioned variables require a web target.',
+      )
+    }
+
+    for (const [path, source] of Object.entries(metadata.values)) {
+      const parts = metadata.paths?.[path] ?? path.split('.')
+      const property = parts.at(-1)
+      const domain = VariableSets.domain(source)
+      const mappings = metadata.contract.mappings
+      const properties = mappings === false ? undefined : mappings?.[parts[0]!]
+      const category = parts[0] === 'typography' ? property! : parts[0]!
+      const target = category === 'radius' ? 'borderRadius' : category
+      const targets = properties?.length
+        ? properties
+        : Object.hasOwn(Scalar.properties, target)
+          ? [target]
+          : []
+
+      const converted = (() => {
+        try {
+          if (parts.some((part) => /^@(media|container)\s/.test(part)))
+            throw new Error('Media-conditioned variables require a web target.')
+          const value = resolve(source)
+
+          function convert(property: string): string | number {
+            property =
+              property in Literal.aliases
+                ? Literal.aliases[property as keyof typeof Literal.aliases]
+                : property
+            if (!Object.hasOwn(Scalar.properties, property))
+              throw new Error(`Unsupported native property: ${property}.`)
+
+            if (property === 'lineHeight') {
+              if (
+                typeof value === 'string' &&
+                (/^\s*calc\(/i.test(value) ||
+                  /^\s*[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?(?:px|rem)\s*$/i.test(
+                    value,
+                  ))
+              )
+                return Scalar.length(
+                  value.trim().toLowerCase(),
+                  options,
+                  false,
+                  [path],
+                )
+
+              const multiplier =
+                typeof value === 'number' ? value : Number(value)
+              if (
+                !Number.isFinite(multiplier) ||
+                (typeof value === 'string' && !value.trim())
+              )
+                throw new Error(`Unsupported native line height: ${value}.`)
+              const size =
+                parts[0] === 'typography'
+                  ? metadata.values[
+                      [...parts.slice(0, -1), 'fontSize'].join('.')
+                    ]
+                  : undefined
+              if (size === undefined)
+                throw new Error(
+                  `Native line height requires fontSize: ${path}.`,
+                )
+              return Scalar.convert(
+                'number',
+                multiplier *
+                  Scalar.length(resolve(size), options, false, [path]),
+                options,
+                [path],
+              )
+            }
+
+            const kind =
+              Scalar.properties[property as keyof typeof Scalar.properties]
+            if (
+              typeof kind === 'string' &&
+              [
+                'flex',
+                'fontVariant',
+                'origin',
+                'shadow',
+                'textShadow',
+                'transform',
+              ].includes(kind)
+            )
+              throw new Error(
+                `Native property ${property} does not have a scalar variable value.`,
+              )
+            if (kind === 'ratio' && typeof value !== 'number')
+              throw new Error(
+                'Native aspect ratios require numeric variable values.',
+              )
+            if (kind === 'box' || kind === 'boxSigned')
+              return Scalar.length(value, options, kind === 'boxSigned', [path])
+            if (kind === 'boxOffset')
+              return Scalar.convert('offset', value, options, [path])
+            return Scalar.convert(kind, value, options, [path])
+          }
+
+          if (targets.length) {
+            const values = targets.map(convert)
+            if (values.some((value) => value !== values[0]))
+              throw new Error(
+                'Mapped native properties require different converted values.',
+              )
+            return values[0]!
+          }
+          if (domain === 'spacing')
+            return Scalar.length(value, options, true, [path])
+          if (domain === 'color')
+            return Scalar.convert('color', value, options, [path])
+          return value
+        } catch (error) {
+          return [
+            `Native variable ${path}: ${error instanceof Error ? error.message : String(error)}`,
+          ] as const
+        }
+      })()
+      let parent = tree
+      for (const key of parts.slice(0, -1))
+        parent = (parent[key] ??= Object.create(null)) as typeof tree
+      parent[parts.at(-1)!] = converted
+    }
+    return tree
+  }
+}
+
+/** Compiler inputs for resolved native variables. */
+export declare namespace compile {
+  /** Complete variable catalog and explicit target mappings. */
+  type Options = Scalar.Options & {
+    /** Configuration fallback. */
+    readonly defaultVars: string
+    /** Whether the input is a standalone definition instead of a named catalog. */
+    readonly unnamed: boolean
+    /** Compatible authored definitions. */
+    readonly vars: Readonly<Record<string, Theme.Definition>>
+  }
+}
+
+/** Graph-owned profile exports and imports, excluded from public adapter options. */
+export const shared = Symbol('zyzz.compiler.native.vars')
+
+/** Static profile artifacts belonging to one source module. */
+export type Shared = {
+  readonly definitions: ReadonlyMap<string, string>
+  readonly reads: ReadonlyMap<
+    number,
+    { readonly name: string; readonly source?: string | undefined }
+  >
+}

package/src/compiler/internal/PackedStyles.ts

@@ -26,6 +26,8 @@ export type Definition = {
   readonly className?: string | undefined
   /** Attributes owned by the callable, including conditional selections. */
   readonly attributes: readonly string[]
+  /** Named Provider selections retained by separately compiled styles. */
+  readonly nativeContext?: Source.Call['nativeContext']
   /** Native HTML output; React props are the default. */
   readonly output?: 'html' | undefined
   /** Private dynamic custom properties owned by the callable. */
@@ -39,6 +41,7 @@ export type Definition = {
 /** Captures ownership without retaining source ASTs or executable expressions. */
 export function create(call: Source.Call, style: Style.NamedStyle): Definition {
   return {
+    ...(call.nativeContext ? { nativeContext: call.nativeContext } : {}),
     ...(call.slots || call.dynamicRecipe
       ? {
           dynamic: {
@@ -419,6 +422,7 @@ export function write(definition: Definition): unknown {
     JSON.stringify(
       {
         ...definition,
+        nativeContext: undefined,
         style: {
           ...definition.style,
           cssOutput: definition.style.cssOutput ?? 'atomic',