zyzz 0.0.0 → 0.0.3

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

@@ -0,0 +1,253 @@
+/** Converts portable scalar values without source parsing or device state. @module */
+import * as Color from './Color.js'
+
+/** Portable property domains shared by static and dynamic native conversion. */
+export const properties = {
+  alignContent: [
+    'center',
+    'flex-end',
+    'flex-start',
+    'space-around',
+    'space-between',
+    'space-evenly',
+    'stretch',
+  ],
+  alignItems: ['baseline', 'center', 'flex-end', 'flex-start', 'stretch'],
+  alignSelf: [
+    'auto',
+    'baseline',
+    'center',
+    'flex-end',
+    'flex-start',
+    'stretch',
+  ],
+  aspectRatio: 'ratio',
+  backfaceVisibility: ['hidden', 'visible'],
+  backgroundColor: 'color',
+  borderBottomColor: 'color',
+  borderBottomLeftRadius: 'length',
+  borderBottomRightRadius: 'length',
+  borderBottomWidth: 'length',
+  borderColor: 'color',
+  borderLeftColor: 'color',
+  borderLeftWidth: 'length',
+  borderRadius: 'length',
+  borderRightColor: 'color',
+  borderRightWidth: 'length',
+  borderStyle: ['dashed', 'dotted', 'solid'],
+  borderTopColor: 'color',
+  borderTopLeftRadius: 'length',
+  borderTopRightRadius: 'length',
+  borderTopWidth: 'length',
+  borderWidth: 'length',
+  bottom: 'offset',
+  boxSizing: ['border-box', 'content-box'],
+  boxShadow: 'shadow',
+  color: 'color',
+  columnGap: 'length',
+  direction: ['ltr', 'rtl'],
+  display: ['contents', 'flex', 'none'],
+  flexBasis: 'size',
+  flexDirection: ['column', 'column-reverse', 'row', 'row-reverse'],
+  flexGrow: 'number',
+  flexShrink: 'number',
+  flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+  fontFamily: 'font',
+  fontSize: 'length',
+  fontStyle: ['italic', 'normal'],
+  fontVariant: 'fontVariant',
+  fontWeight: 'weight',
+  gap: 'length',
+  height: 'size',
+  justifyContent: [
+    'center',
+    'flex-end',
+    'flex-start',
+    'space-around',
+    'space-between',
+    'space-evenly',
+  ],
+  left: 'offset',
+  letterSpacing: 'signed',
+  lineHeight: 'line',
+  margin: 'boxSigned',
+  marginBottom: 'signed',
+  marginLeft: 'signed',
+  marginRight: 'signed',
+  marginTop: 'signed',
+  maxHeight: 'dimension',
+  maxWidth: 'dimension',
+  minHeight: 'dimension',
+  minWidth: 'dimension',
+  objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'],
+  opacity: 'opacity',
+  overflow: ['hidden', 'visible'],
+  padding: 'box',
+  paddingBottom: 'length',
+  paddingLeft: 'length',
+  paddingRight: 'length',
+  paddingTop: 'length',
+  position: ['absolute', 'relative', 'static'],
+  right: 'offset',
+  rowGap: 'length',
+  textAlign: ['center', 'end', 'justify', 'left', 'right', 'start'],
+  textDecorationColor: 'color',
+  textDecorationLine: [
+    'line-through',
+    'line-through underline',
+    'none',
+    'underline',
+    'underline line-through',
+  ],
+  textDecorationStyle: ['dashed', 'dotted', 'double', 'solid', 'wavy'],
+  textShadow: 'textShadow',
+  textTransform: ['capitalize', 'lowercase', 'none', 'uppercase'],
+  top: 'offset',
+  transform: 'transform',
+  transformOrigin: 'origin',
+  userSelect: ['all', 'auto', 'none', 'text'],
+  width: 'size',
+  zIndex: 'integer',
+} as const
+
+/** Explicit portable-unit and font mappings. */
+export type Options = {
+  /** Authored family names mapped to native font names. */
+  readonly fonts?: Readonly<Record<string, string>> | undefined
+  /** Explicit logical-unit scales. */
+  readonly units?:
+    | { readonly px?: number | undefined; readonly rem?: number | undefined }
+    | undefined
+}
+
+/** Converts a validated property domain using explicit unit and font mappings. */
+export function convert(
+  kind: (typeof properties)[keyof typeof properties],
+  value: number | string,
+  options: Options,
+  path: readonly string[],
+): number | string {
+  if (Array.isArray(kind)) {
+    if (typeof value !== 'string' || !kind.includes(value))
+      fail('unsupported_value', 'Unsupported native keyword.', path)
+    return value === 'line-through underline' ? 'underline line-through' : value
+  }
+  if (kind === 'ratio') {
+    const match =
+      typeof value === 'string'
+        ? /^\s*(\d+(?:\.\d+)?|\.\d+)\s*\/\s*(\d+(?:\.\d+)?|\.\d+)\s*$/.exec(
+            value,
+          )
+        : undefined
+    const ratio =
+      typeof value === 'number'
+        ? value
+        : match
+          ? Number(match[1]) / Number(match[2] ?? 1)
+          : NaN
+    if (!Number.isFinite(ratio) || ratio <= 0)
+      fail('unsupported_value', 'Use a positive finite aspect ratio.', path)
+    return ratio
+  }
+  if (kind === 'color') {
+    const converted = typeof value === 'string' ? Color.parse(value) : undefined
+    if (converted === undefined)
+      fail(
+        'unsupported_value',
+        'Use an absolute sRGB color supported by native conversion.',
+        path,
+      )
+    return converted
+  }
+  if (kind === 'font') {
+    if (typeof value !== 'string' || !Object.hasOwn(options.fonts ?? {}, value))
+      fail(
+        'unsupported_value',
+        'Provide an explicit fonts mapping for this family.',
+        path,
+      )
+    return options.fonts![value]!
+  }
+  if (kind === 'weight') {
+    if (
+      value === 'normal' ||
+      value === 'bold' ||
+      (typeof value === 'number' &&
+        value >= 100 &&
+        value <= 900 &&
+        value % 100 === 0)
+    )
+      return value
+    fail(
+      'unsupported_value',
+      'Use normal, bold, or numeric weights 100 through 900 in steps of 100.',
+      path,
+    )
+  }
+  if (kind === 'number' || kind === 'integer' || kind === 'opacity') {
+    if (
+      typeof value !== 'number' ||
+      !Number.isFinite(value) ||
+      (kind === 'integer' ? !Number.isInteger(value) : value < 0) ||
+      (kind === 'opacity' && value > 1)
+    )
+      fail('unsupported_value', 'Unsupported native numeric value.', path)
+    return value
+  }
+  if (kind === 'size' && value === 'auto') return value
+  if (
+    (kind === 'dimension' || kind === 'size' || kind === 'offset') &&
+    typeof value === 'string' &&
+    /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)%$/.test(value)
+  ) {
+    const number = Number(value.slice(0, -1))
+    if (Number.isFinite(number) && (kind === 'offset' || number >= 0))
+      return value
+    fail('unsupported_value', 'Invalid native percentage.', path)
+  }
+  if (kind === 'box' || kind === 'boxSigned') {
+    const values =
+      typeof value === 'string' ? value.trim().split(/\s+/) : [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)
+    return 0
+  }
+  return length(value, options, kind === 'signed' || kind === 'offset', path)
+}
+
+/** Converts a portable length to logical units. */
+export function length(
+  value: number | string,
+  options: Options,
+  signed: boolean,
+  path: readonly string[],
+): number {
+  if (value === 0 || value === '0') return 0
+  const match =
+    typeof value === 'string' &&
+    /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(px|rem)$/.exec(value)
+  if (!match)
+    fail(
+      'unsupported_value',
+      'Use zero, px, or rem with an explicit rem conversion.',
+      path,
+    )
+  const scale =
+    match[2] === 'px' ? (options.units?.px ?? 1) : options.units?.rem
+  if (scale === undefined)
+    fail('unsupported_value', 'Provide units.rem for rem lengths.', path)
+  const result = Number(match[1]) * scale
+  if (!Number.isFinite(result) || (!signed && result < 0))
+    fail(
+      'unsupported_value',
+      'Converted length is outside the native property domain.',
+      path,
+    )
+  return result
+}
+
+function fail(_code: string, message: string, _path: readonly string[]): never {
+  throw new Error(message)
+}

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

@@ -0,0 +1,87 @@
+/** Validates static native values against the pinned declaration domains. @module */
+import type * as Native from '../../internal/NativeProperties.js'
+import * as Targets from '../../internal/Targets.js'
+import schema from './NativeSchema.js'
+
+type Node = {
+  kind: string
+  properties?: Record<string, { optional: boolean; value: number }> | undefined
+  value?: unknown
+  values?: readonly number[] | undefined
+}
+const data = schema as { root: number; nodes: readonly Node[] }
+
+/** Copies static native declarations and returns the first rejected property as a diagnostic. */
+export function parse(input: unknown): Native.Output {
+  const value = Targets.copy(input)
+  const root = data.nodes[data.root]!
+  if (!value || typeof value !== 'object' || Array.isArray(value))
+    throw new Error('Expected a native declaration record.')
+  for (const [key, property] of Object.entries(value)) {
+    if (!Object.hasOwn(root.properties!, key))
+      throw new Error(`Unknown native property: ${key}.`)
+    if (!matches(root.properties![key]!.value, property))
+      throw new Error(`Invalid static native value for ${key}.`)
+  }
+  const transforms = (value as Native.Output).transform
+  if (Array.isArray(transforms)) {
+    if (transforms.length > 1 && transforms.some((entry) => 'matrix' in entry))
+      throw new Error('A native matrix must be the only transform entry.')
+    for (const entry of transforms)
+      if ('matrix' in entry && ![9, 16].includes(entry.matrix.length))
+        throw new Error('Native matrices require nine or sixteen numbers.')
+  }
+  return value as Native.Output
+}
+
+function matches(id: number, value: unknown): boolean {
+  const node = data.nodes[id]!
+  switch (node.kind) {
+    case 'tuple':
+      return (
+        Array.isArray(value) &&
+        value.length === node.values!.length &&
+        node.values!.every((entry, index) => matches(entry, value[index]))
+      )
+    case 'array':
+      return (
+        Array.isArray(value) &&
+        value.every((entry) => matches(node.value as number, entry))
+      )
+    case 'literal':
+      return value === node.value
+    case 'never':
+      return false
+    case 'number':
+      return typeof value === 'number' && Number.isFinite(value)
+    case 'object': {
+      if (!value || typeof value !== 'object' || Array.isArray(value))
+        return false
+      const record = value as Record<string, unknown>
+      return (
+        Object.keys(record).every((key) =>
+          Object.hasOwn(node.properties!, key),
+        ) &&
+        Object.entries(node.properties!).every(([key, property]) =>
+          !Object.hasOwn(record, key)
+            ? property.optional
+            : matches(property.value, record[key]),
+        )
+      )
+    }
+    case 'percentage':
+      return (
+        typeof value === 'string' &&
+        /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?%$/i.test(value) &&
+        Number.isFinite(Number(value.slice(0, -1)))
+      )
+    case 'string':
+      return typeof value === 'string'
+    case 'undefined':
+      return value === undefined
+    case 'union':
+      return node.values!.some((entry) => matches(entry, value))
+    default:
+      throw new Error(`Unclassified native schema kind: ${node.kind}`)
+  }
+}

package/src/react-native/react.ts

@@ -0,0 +1,47 @@
+/** React lifecycle for automatically compiled native styling. @module */
+import * as React from 'react'
+import * as NativeContext from '../runtime/NativeContext.js'
+
+const context = React.createContext(styles(undefined))
+
+/** Supplies theme and resolved device appearance to compiled native components. */
+export function Provider(props: Provider.Props) {
+  if (
+    (props.colorScheme !== 'light' && props.colorScheme !== 'dark') ||
+    (props.theme !== undefined &&
+      (typeof props.theme !== 'string' || !props.theme.trim()))
+  )
+    throw new Error(
+      'Native appearance requires a resolved light/dark scheme and a nonempty theme name.',
+    )
+  const value = React.useMemo(
+    () => styles({ colorScheme: props.colorScheme, theme: props.theme }),
+    [props.colorScheme, props.theme],
+  )
+  return React.createElement(context.Provider, { value }, props.children)
+}
+
+/** Application boundary inputs. Pass React Native's useColorScheme result with a light fallback. */
+export declare namespace Provider {
+  /** Theme selection and resolved appearance for this React subtree. */
+  type Props = NativeContext.Context & {
+    /** Components that consume compiled native styles. */
+    readonly children?: React.ReactNode | undefined
+  }
+}
+
+/** Compiler-inserted unconditional subscription, including memoized components. */
+export function useStyles() {
+  return React.useContext(context)
+}
+
+function styles(value: NativeContext.Context | undefined) {
+  return {
+    style: (style: unknown, input?: unknown) =>
+      NativeContext.resolve(style, value, input),
+    props: (props: Record<string, unknown> | null | undefined) =>
+      props && Object.hasOwn(props, 'style')
+        ? { ...props, style: NativeContext.resolve(props.style, value) }
+        : props,
+  }
+}

package/src/reset.css

@@ -0,0 +1,244 @@
+/*
+  Opt-in base reset. Font stacks are inlined because the reset ships as a
+  standalone stylesheet without a theme contract. The third-party MIT notice
+  covering this file is retained under themes/.
+*/
+@layer reset {
+  /* Border-box sizing, no default margins or padding, and a zero-width solid border ready for a width. */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  /* Consistent line height, no iOS font scaling after orientation changes, a readable tab size, and no tap highlight. */
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Firefox height, inherited border color, and a 1px top border. */
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /* Links opt into styling instead of opting out. */
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /* Monospace stack and corrected em font sizing. */
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  /* Subscripts and superscripts keep the surrounding line height. */
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* No text indentation, inherited border color, and collapsed borders in tables. */
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring:where(:not(iframe)) {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /* Replaced elements are block-level and middle-aligned. */
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Form controls inherit typography and drop browser radii, backgrounds, and disabled opacity. */
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /* Placeholder color mixes currentcolor only in browsers that do not crash on it. */
+  @supports (not (-webkit-appearance: -apple-pay-button)) or
+    (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /* Date and time inputs keep a stable height and alignment in Safari. */
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /* Button appearance keeps border radius stylable in iOS Safari. */
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}