zyzz 0.0.2 → 0.0.3

package/dist/internal/Typography.js

@@ -0,0 +1,18 @@
+import * as Token from './Token.js';
+/** Resolves the scalar fields owned by one dotted set path. */
+export function fields(theme, name) {
+    const data = theme &&
+        Object.getOwnPropertyDescriptor(theme, Token.definition)?.value;
+    if (!data || typeof name !== 'string')
+        return [];
+    return properties.filter((property) => Object.hasOwn(data.values, `typography.${name}.${property}`));
+}
+/** Scalar properties applied by a typography set. */
+export const properties = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+];
+//# sourceMappingURL=Typography.js.map

package/dist/internal/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../src/internal/Typography.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAA;AAEnC,+DAA+D;AAC/D,MAAM,UAAU,MAAM,CACpB,KAAyB,EACzB,IAAa;IAEb,MAAM,IAAI,GACR,KAAK;QACJ,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAE7C,CAAA;IAChB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO,EAAE,CAAA;IAEhD,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CACpC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,IAAI,IAAI,QAAQ,EAAE,CAAC,CAC7D,CAAA;AACH,CAAC;AAeD,qDAAqD;AACrD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,eAAe;IACf,YAAY;CACJ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zyzz",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "description": "Modern, universal, simple styling library for the Web and React Native",
   "repository": {

package/src/Config.ts

@@ -487,6 +487,7 @@ export type Body<
     | keyof mappings
     | 'selectors'
     | 'targets'
+    | 'typography'
     | 'variables'
     | keyof Style.DeclarationProperties
     | Exclude<Condition.Keys<tokens, Keys<styles>>, `@layer${string}`>

package/src/Style.ts

@@ -7,6 +7,7 @@ import * as Query from './internal/Query.js'
 import * as Binding from './internal/Binding.js'
 import type * as Literal from './internal/Literal.js'
 import * as Token from './internal/Token.js'
+import * as Typography from './internal/Typography.js'
 import * as Value from './internal/Value.js'
 import type * as Theme from './Theme.js'
 import * as Targets from './internal/Targets.js'
@@ -24,6 +25,7 @@ export type Accepted<
     | Condition.Keys<tokens, Keys<style>>
     | 'selectors'
     | 'targets'
+    | 'typography'
     | 'variables'
   >,
   never
@@ -55,28 +57,32 @@ export type Accepted<
                       : never
                   }
                 : never
-              : key extends keyof Literal.Properties
-                ? Value.Accepted<
-                    Pick<style, key>,
-                    literal extends true
-                      ? LiteralDeclarations
-                      : DeclarationProperties<tokens>
-                  >[key] &
-                    Value.Checked<Pick<style, key>, tokens>[key]
-                : key extends Condition.Keys<tokens, key>
-                  ? [style[key]] extends [undefined]
-                    ? never
-                    : NonNullable<style[key]> extends Record<string, unknown>
-                      ?
-                          | Accepted<
-                              NonNullable<style[key]>,
-                              tokens,
-                              literal,
-                              targets
-                            >
-                          | Extract<style[key], undefined>
-                      : never
-                  : never
+              : key extends 'typography'
+                ? literal extends true
+                  ? never
+                  : Value.Atom<Typography.Names<tokens>>
+                : key extends keyof Literal.Properties
+                  ? Value.Accepted<
+                      Pick<style, key>,
+                      literal extends true
+                        ? LiteralDeclarations
+                        : DeclarationProperties<tokens>
+                    >[key] &
+                      Value.Checked<Pick<style, key>, tokens>[key]
+                  : key extends Condition.Keys<tokens, key>
+                    ? [style[key]] extends [undefined]
+                      ? never
+                      : NonNullable<style[key]> extends Record<string, unknown>
+                        ?
+                            | Accepted<
+                                NonNullable<style[key]>,
+                                tokens,
+                                literal,
+                                targets
+                              >
+                            | Extract<style[key], undefined>
+                        : never
+                    : never
       }
     : never)
 
@@ -364,16 +370,72 @@ export function define(
       continue
     }
 
-    const properties = authored.flatMap(([property, input]) =>
-      (mappings?.[property] ?? [property]).map(
-        (target) => [target, input, property] as const,
-      ),
+    const properties = authored.flatMap(
+      ([property, input]): readonly (readonly [string, unknown, string])[] => {
+        if (property !== 'typography')
+          return (mappings?.[property] ?? [property]).map(
+            (target) => [target, input, property] as const,
+          )
+
+        const parsed = Value.parse(input, 'fontFamily')
+        if (parsed && 'invalid' in parsed) {
+          report(
+            'invalid_value',
+            [name, property],
+            'Importance requires the suffix " !important".',
+          )
+          return []
+        }
+
+        const path = parsed?.value ?? input
+        const data = options.theme?.[Token.definition]
+        const fields = Typography.fields(options.theme, path)
+        if (!fields.length) {
+          report(
+            'invalid_value',
+            [name, property],
+            'Expected a named typography set from the bound theme.',
+          )
+          return []
+        }
+
+        // Explicit declarations in this block override the corresponding preset fields.
+        const explicit = new Set(
+          authored.flatMap(([property]) => mappings?.[property] ?? [property]),
+        )
+        return fields
+          .filter((field) => !explicit.has(field))
+          .map((field) => {
+            const key = `typography.${path}.${field}`
+            const reference = Token.create({
+              contract: data!.contract,
+              group: field,
+              path: key,
+              value: data!.values[key]!,
+            })
+            return [
+              field,
+              parsed?.important
+                ? Token.compose([reference, ' !important'])
+                : reference,
+              property,
+            ] as const
+          })
+      },
     )
 
     if (properties.some(([key]) => Condition.is(key))) {
       const rules: Rule[] = []
 
-      for (const [key, input] of authored) {
+      const blocks = authored.flatMap(([key, input]) =>
+        key === 'typography'
+          ? properties
+              .filter(([, , original]) => original === key)
+              .map(([property, value]) => [property, value] as const)
+          : [[key, input] as const],
+      )
+
+      for (const [key, input] of blocks) {
         try {
           const condition = Condition.is(key)
             ? Query.resolve(
@@ -707,6 +769,8 @@ export type Properties<
   readonly targets?:
     | (targets extends true ? TargetBranches<tokens> : never)
     | undefined
+  /** Applies a named typography set. Explicit fields in the same block take precedence. */
+  readonly typography?: Value.Atom<Typography.Names<tokens>>
 }
 
 /** Nested literal declarations retain exact keys at every depth. */

package/src/Theme.ts

@@ -10,6 +10,7 @@ import type * as Binding from './internal/Binding.js'
 import type * as Literal from './internal/Literal.js'
 import * as Query from './internal/Query.js'
 import * as Token from './internal/Token.js'
+import * as Typography from './internal/Typography.js'
 import type * as Value from './internal/Value.js'
 import type * as Style from './Style.js'
 
@@ -51,7 +52,7 @@ export type StyleFactory<tokens extends Tokens> = {
 }
 
 /**
- * Defines scalar tokens without metadata, defaults, or environment access.
+ * Defines scalar tokens and typography sets without defaults or environment access.
  * Colors currently use the supported literal color grammar; spacing and radius
  * values use nonnegative literal lengths or zero. Nested palettes are supported.
  * @throws {InvalidError} If groups, paths, values, or data records are invalid.
@@ -166,7 +167,16 @@ type OverrideTree<tree, group> = tree extends string | number
   ? Scalar<group>
   : tree extends { readonly dark: string; readonly light: string }
     ? Color
-    : { readonly [key in keyof tree]?: OverrideTree<tree[key], group> }
+    : {
+        readonly [key in keyof tree]?: OverrideTree<
+          tree[key],
+          group extends 'typography'
+            ? key extends Typography.Property
+              ? key
+              : group
+            : group
+        >
+      }
 
 /** Nested palette or scale data. */
 export type Palette<leaf> = { readonly [key: string]: leaf | Palette<leaf> }
@@ -177,17 +187,32 @@ export type Reference<group extends Token.Group = Token.Group> =
 
 /** The inferred tree replaces scalar values and scheme pairs with references. */
 export type References<tokens> = {
-  readonly [group in keyof tokens as group extends Token.Group
+  readonly [group in keyof tokens as group extends Token.Group | 'typography'
     ? group
-    : never]: ReferenceTree<tokens[group], Extract<group, Token.Group>>
+    : never]: ReferenceTree<
+    tokens[group],
+    Extract<group, Token.Group | 'typography'>
+  >
 }
 
-type ReferenceTree<tree, group extends Token.Group> = tree extends
+type ReferenceTree<
+  tree,
+  group extends Token.Group | 'typography',
+> = tree extends
   | string
   | number
   | { readonly dark: string; readonly light: string }
-  ? Reference<group>
-  : { readonly [key in keyof tree]: ReferenceTree<tree[key], group> }
+  ? Reference<Extract<group, Token.Group>>
+  : {
+      readonly [key in keyof tree]: ReferenceTree<
+        tree[key],
+        group extends 'typography'
+          ? key extends Typography.Property
+            ? key
+            : group
+          : group
+      >
+    }
 
 /** Supported scalar groups; composite presets and query metadata follow separately. */
 type Scalar<group> = group extends
@@ -253,6 +278,8 @@ export type Tokens = {
   readonly spacing?: Palette<Literal.Length> | undefined
   /** Colors available to text declarations. */
   readonly textColor?: Palette<Color> | undefined
+  /** Named sets of font family, size, weight, letter spacing, and line height. */
+  readonly typography?: Typography.Sets | undefined
 }
 
 function build(
@@ -282,9 +309,18 @@ function build(
   let hasQueries = !!baseQueries
   const active = new Set<object>()
 
-  function visit(value: unknown, group: Token.Group, path: readonly string[]) {
+  function visit(
+    value: unknown,
+    group: Token.Group | 'typography',
+    path: readonly string[],
+  ) {
     const key = path.join('.')
     const scalar = typeof value === 'string' || typeof value === 'number'
+    if (group === 'typography' && scalar)
+      throw new InvalidError(
+        path,
+        'Expected a typography set or a nested set group.',
+      )
     const entries = scalar ? undefined : record(value, path)
     const pair =
       ['color', 'backgroundColor', 'borderColor', 'textColor'].includes(
@@ -347,7 +383,18 @@ function build(
       )
         throw new InvalidError(next, 'Extensions cannot add token paths.')
 
-      visit(child, group, next)
+      const property =
+        group === 'typography' &&
+        Typography.properties.includes(name as Typography.Property)
+          ? (name as Typography.Property)
+          : undefined
+      if (property && typeof child !== 'string' && typeof child !== 'number')
+        throw new InvalidError(
+          next,
+          'Typography properties require scalar values.',
+        )
+
+      visit(child, property ?? group, next)
     }
 
     active.delete(value as object)
@@ -445,6 +492,7 @@ function build(
         'letterSpacing',
         'lineHeight',
         'textColor',
+        'typography',
       ].includes(group)
     )
       throw new InvalidError([group], 'Unsupported token group.')
@@ -459,8 +507,17 @@ function build(
     if (!entries.length && !base)
       throw new InvalidError([group], 'Token palettes cannot be empty.')
 
-    for (const [name, value] of entries)
-      visit(value, group as Token.Group, [group, name])
+    for (const [name, value] of entries) {
+      if (
+        group === 'typography' &&
+        Typography.properties.includes(name as Typography.Property)
+      )
+        throw new InvalidError(
+          [group, name],
+          'Typography properties require a named set.',
+        )
+      visit(value, group as Token.Group | 'typography', [group, name])
+    }
   }
 
   type Tree = { [key: string]: Tree | Token.Reference }
@@ -476,7 +533,9 @@ function build(
 
     tree[parts.at(-1)!] = Token.create({
       contract,
-      group: parts[0] as Token.Group,
+      group: (parts[0] === 'typography'
+        ? parts.at(-1)
+        : parts[0]) as Token.Group,
       path,
       value,
     })
@@ -634,7 +693,11 @@ type ValidPalette<palette, group> = palette extends undefined
   : {
       [key in keyof palette]: key extends `${string}!${string}`
         ? never
-        : ValidTree<palette[key], group>
+        : group extends 'typography'
+          ? key extends Typography.Property
+            ? never
+            : ValidTree<palette[key], group>
+          : ValidTree<palette[key], group>
     }
 
 type WeightDigits<
@@ -671,27 +734,29 @@ type Weight<value> = value extends number
   : value
 
 type ValidTree<tree, group> = tree extends string | number
-  ? tree extends Scalar<group>
-    ? group extends 'breakpoints' | 'containers'
-      ? tree extends `-${string}`
-        ? never
-        : Literal.Checked<tree>
-      : group extends keyof Literal.Properties
-        ? Literal.Checked<tree> &
-            Value.Checked<Record<group, tree>>[group] &
-            (group extends 'fontWeight' ? Weight<tree> : unknown) &
-            (tree extends string
-              ? Lowercase<tree> extends
-                  | 'inherit'
-                  | 'initial'
-                  | 'unset'
-                  | 'revert'
-                  | 'revert-layer'
-                ? never
-                : unknown
-              : unknown)
-        : Literal.Checked<tree>
-    : never
+  ? group extends 'typography'
+    ? never
+    : tree extends Scalar<group>
+      ? group extends 'breakpoints' | 'containers'
+        ? tree extends `-${string}`
+          ? never
+          : Literal.Checked<tree>
+        : group extends keyof Literal.Properties
+          ? Literal.Checked<tree> &
+              Value.Checked<Record<group, tree>>[group] &
+              (group extends 'fontWeight' ? Weight<tree> : unknown) &
+              (tree extends string
+                ? Lowercase<tree> extends
+                    | 'inherit'
+                    | 'initial'
+                    | 'unset'
+                    | 'revert'
+                    | 'revert-layer'
+                  ? never
+                  : unknown
+                : unknown)
+          : Literal.Checked<tree>
+      : never
   : Extract<
         keyof tree,
         group extends 'color' | 'backgroundColor' | 'borderColor' | 'textColor'
@@ -701,7 +766,13 @@ type ValidTree<tree, group> = tree extends string | number
     ? {
         [key in keyof tree]: key extends `${string}!${string}`
           ? never
-          : ValidTree<tree[key], group>
+          : group extends 'typography'
+            ? key extends Typography.Property
+              ? tree[key] extends string | number
+                ? ValidTree<tree[key], key>
+                : never
+              : ValidTree<tree[key], group>
+            : ValidTree<tree[key], group>
       }
     : group extends 'color' | 'backgroundColor' | 'borderColor' | 'textColor'
       ? {

package/src/compiler/Source.ts

@@ -31,6 +31,8 @@ import type * as Theme from '../Theme.js'
 import * as Themes from './internal/Themes.js'
 import * as ThemeValues from '../web/internal/Themes.js'
 import * as Token from '../internal/Token.js'
+import * as Typography from '../internal/Typography.js'
+import * as Value from '../internal/Value.js'
 import * as Variables from './internal/Variables.js'
 import * as Walker from 'oxc-walker'
 
@@ -97,6 +99,8 @@ export type Call = {
   readonly body?: Ast.ObjectExpression | undefined
   /** Alias targets retained for declaration source locations. */
   readonly shorthands?: Shorthands.Map | undefined
+  /** Emitted typography field counts keyed by authored property offsets. */
+  readonly typography?: ReadonlyMap<number, number> | undefined
   /** Native HTML attribute output selected by the bound configuration. */
   readonly output?: 'html' | undefined
   /** Typed runtime slots for callback definitions. */
@@ -640,6 +644,7 @@ export function extract(options: extract.Options): extract.ReturnType {
     }
     const name = `style-${namespace}-${call.start}`
     const locations: Style.SourceLocation[] = []
+    const typography = new Map<number, number>()
     const conditionKeys = new Map<string, Ast.Node>()
 
     function object(
@@ -1101,6 +1106,29 @@ export function extract(options: extract.Options): extract.ReturnType {
         values[key] = value(property.value, [name, ...prefix, key])
       }
 
+      if (typeof values.typography === 'string') {
+        const theme = themes?.styles.get(call.start)?.theme
+        const mappings = theme?.[Token.definition].contract.shorthands
+        const explicit = new Set(
+          Object.keys(values).flatMap((key) => mappings?.[key] ?? [key]),
+        )
+        const parsed = Value.parse(values.typography, 'fontFamily')
+        const count = Typography.fields(
+          theme,
+          parsed && !('invalid' in parsed) ? parsed.value : values.typography,
+        ).filter((field) => !explicit.has(field)).length
+        for (const property of properties) {
+          if (property.type !== 'Property') continue
+          const key =
+            property.key.type === 'Identifier'
+              ? property.key.name
+              : property.key.type === 'Literal'
+                ? property.key.value
+                : undefined
+          if (key === 'typography') typography.set(property.start, count)
+        }
+      }
+
       return values
     }
 
@@ -1185,6 +1213,7 @@ export function extract(options: extract.Options): extract.ReturnType {
           ? { body: argument }
           : {}),
         ...(shorthands ? { shorthands } : {}),
+        ...(typography.size ? { typography } : {}),
         ...(themes?.styles.get(call.start)?.output
           ? { output: 'html' as const }
           : {}),

package/src/compiler/Transform.ts

@@ -995,6 +995,12 @@ export function compile(options: compile.Options): compile.ReturnType {
                   ? String(property.key.value)
                   : ''
 
+            if (key === 'typography' && call.typography?.has(property.start))
+              return Array.from(
+                { length: call.typography.get(property.start)! },
+                () => property,
+              )
+
             const authoredLocations: readonly Ast.Node[] =
               value.type === 'ArrayExpression'
                 ? value.elements.filter(

package/src/compiler/internal/Contract.ts

@@ -24,7 +24,7 @@ export function read(
   if (
     ![
       1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-      22, 23,
+      22, 23, 24,
     ].includes(data.version as number)
   )
     throw new Error('Unsupported Zyzz contract version.')
@@ -108,6 +108,13 @@ export function read(
     }
 
     const definition = Theme.define(record(entry.tokens) as Theme.Tokens)
+    if (
+      (data.version as number) < 24 &&
+      Object.hasOwn(definition.tokens, 'typography')
+    )
+      throw new Error(
+        'Packed typography sets require contract version 24 or later.',
+      )
 
     themes[name] = Token.bind(definition, contract)
     types[name] = type(input(definition))
@@ -198,9 +205,9 @@ export function read(
       const name = string(entry.name)
       const reference = string(entry.reference)
       if (
-        ![9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23].includes(
-          data.version as number,
-        ) ||
+        ![
+          9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
+        ].includes(data.version as number) ||
         ![
           'cssFunction',
           'customMedia',
@@ -249,7 +256,7 @@ export function read(
     if (entry.kind === 'style-reference') {
       if (
         entry.style !== undefined &&
-        ![16, 17, 18, 19, 20, 21, 22, 23].includes(data.version as number)
+        ![16, 17, 18, 19, 20, 21, 22, 23, 24].includes(data.version as number)
       )
         throw new Error(
           'Packed callable styles require contract version 16 or later.',
@@ -574,6 +581,13 @@ export function write(
       ]),
     ),
     version: (() => {
+      if (
+        Object.values(themes).some((theme) =>
+          Object.hasOwn(theme.tokens, 'typography'),
+        )
+      )
+        return 24
+
       function callable(link: Themes.Link): boolean {
         return !!link.style || Object.values(link.members ?? {}).some(callable)
       }