zyzz 0.0.20 → 0.0.22

package/src/web/internal/Themes.ts

@@ -10,13 +10,29 @@ import type * as Theme from '../../internal/Theme.js'
 
 /** Collects live token references within one in-memory compilation graph. */
 export function create() {
-  let nextScope = 0
-  let nextVariable = 0
   const contracts = new Map<
     Token.Contract,
     { identity: string | undefined; paths: Map<string, string> }
   >()
 
+  const anonymous = new Map<Token.Contract, Map<string, string>>()
+  let nextVariable = 0
+  function property(contract: Token.Contract, path: string): string {
+    const identity = contract[Token.identity]
+    if (identity) return variable(identity, path)
+    let paths = anonymous.get(contract)
+    if (!paths) {
+      paths = new Map()
+      anonymous.set(contract, paths)
+    }
+    let name = paths.get(path)
+    if (!name) {
+      name = `--z${(nextVariable++).toString(36)}`
+      paths.set(path, name)
+    }
+    return name
+  }
+
   const defaults = new Map<string, readonly Rule[]>()
   const defaultGroups = new Map<Token.Contract, Set<string>>()
 
@@ -35,14 +51,11 @@ export function create() {
     let name = contract.paths.get(token.path)
 
     if (!name) {
-      name =
-        contract.identity === undefined
-          ? `--z${nextVariable++}`
-          : variable(contract.identity, token.path)
+      name = property(token.contract, token.path)
       contract.paths.set(token.path, name)
     }
 
-    const label = contract.identity?.startsWith('src-') ? token.path : undefined
+    const label = token.path
     return `var(${name},${literal(value, label, token.contract)})`
   }
 
@@ -52,6 +65,8 @@ export function create() {
     separate?: 'all' | 'defaults',
   ) {
     const classes: Record<string, string> = Object.create(null)
+    let nextScope = 0
+    const scopeBodies = new Map<string, string>()
     const completeDefaults = new Set<Token.Contract>()
     const empty: string[] = []
     const rules: Rule[] = []
@@ -69,9 +84,16 @@ export function create() {
       // Anonymous contracts are graph-local. Source-owned contracts retain stable
       // identities across separately compiled components and theme scopes.
       const className =
-        data.contract[Token.identity] === undefined
-          ? `t_${nextScope++}`
-          : `z_theme-${encode(name)}`
+        data.contract[Token.identity] || data.cssName
+          ? scope(
+              data.cssName ??
+                (data.contract[Token.identity] &&
+                name.startsWith(`${data.contract[Token.identity]}-`)
+                  ? name.slice(data.contract[Token.identity]!.length + 1)
+                  : name),
+              data.contract[Token.identity],
+            )
+          : `z${(nextScope++).toString(36)}`
 
       classes[name] = className
 
@@ -87,27 +109,19 @@ export function create() {
         for (const path of Object.keys(data.values)) {
           if (contract.paths.has(path)) continue
 
-          contract.paths.set(
-            path,
-            contract.identity === undefined
-              ? `--z${nextVariable++}`
-              : variable(contract.identity, path),
-          )
+          contract.paths.set(path, property(data.contract, path))
         }
 
         contracts.set(data.contract, contract)
       }
 
       if (!contract) continue
+
       // Independently compiled consumers must import identical fallback contents.
       if (separate === 'all' && contract.identity) {
         completeDefaults.add(data.contract)
         for (const [path, value] of Object.entries(data.values))
-          literal(
-            value,
-            contract.identity.startsWith('src-') ? path : undefined,
-            data.contract,
-          )
+          literal(value, path, data.contract)
       }
       if (!contract.paths.size) empty.push(`.${className}{}`)
 
@@ -119,7 +133,7 @@ export function create() {
         if (value === undefined)
           throw new Error('Theme scope is missing a live token.')
 
-        const label = contract.identity?.startsWith('src-') ? path : undefined
+        const label = path
         declarations.push({
           conditions: [],
           property: name,
@@ -135,12 +149,26 @@ export function create() {
           name,
           `.${className}`,
           rules,
-          contract.identity?.startsWith('src-') ? path : undefined,
+          path,
           [],
           data.contract,
         )
     }
 
+    for (const rule of rules) {
+      const key = JSON.stringify([
+        rule.selector,
+        rule.conditions,
+        rule.property,
+      ])
+      const previous = scopeBodies.get(key)
+      if (previous !== undefined && previous !== rule.value)
+        throw new Error(
+          `Generated scope ${rule.selector.slice(1)} conflicts. Supply distinct config ids.`,
+        )
+      scopeBodies.set(key, rule.value)
+    }
+
     const scopes = new Map<string, Rule[]>()
     for (const rule of rules) {
       const entries = scopes.get(rule.property) ?? []
@@ -188,6 +216,7 @@ export function create() {
             ]
               .filter(Boolean)
               .join('\n'),
+      rules,
       resources: separate
         ? [
             ...resources,
@@ -230,9 +259,7 @@ export function create() {
       const base = literal(value.default, label, owner)
       // Rule consolidation must not change existing variable identities.
       const css = `:where(*){--fallback:${base};}${conditionalCss(value, '--fallback', ':where(*)', label, owner)}`
-      const name = label
-        ? `--z-${Identity.label(label)}-fallback-${Identity.compact(css)}`
-        : `--z-f${Identity.hash(css)}`
+      const name = `${owner ? property(owner, label ?? 'value') : variable(undefined, label ?? 'value')}-fallback-${Identity.name(css)}`
       const emitted: Rule[] = [
         { conditions: [], property: name, selector: ':where(*)', value: base },
       ]
@@ -307,14 +334,6 @@ export function create() {
   return { emit, serialize }
 }
 
-/** Escapes a scope key into the identifier segment of its compiled class. */
-export function encode(value: string): string {
-  return value.replace(
-    /[^a-zA-Z0-9-]/g,
-    (character) => `_${character.charCodeAt(0).toString(16)}_`,
-  )
-}
-
 /** Combines generated declarations without crossing competing declarations of the same property. */
 export function render(rules: readonly Rule[]): string {
   const groups: {
@@ -384,9 +403,13 @@ export type Rule = {
 /** Selects independently shareable defaults or all token rules. */
 export const shared = Symbol('shared token rules')
 
-function variable(index: number | string, path: string): string {
-  // Packed declarations retain the spelling assigned by their compiler.
-  if (typeof index === 'string' && index.startsWith('src-'))
-    return `--z-${Identity.label(path)}-${Identity.compact(JSON.stringify([index, path]))}`
-  return `--z-t${encode(String(index))}-${encode(path)}`
+/** Names an authored scope without its private source identity. */
+export function scope(value: string, identity?: string): string {
+  const namespace = identity?.startsWith('id-') ? `${identity.slice(3)}-` : ''
+  return `z-theme-${namespace}${Identity.name(value)}`
+}
+
+function variable(identity: string | undefined, path: string): string {
+  const namespace = identity?.startsWith('id-') ? `${identity.slice(3)}-` : ''
+  return `--z-${namespace}${path.split('.').map(Identity.name).join('-')}`
 }

package/src/web/page.ts

@@ -35,6 +35,8 @@ export declare namespace page {
       | 'crop cross'
       | 'cross crop'
       | undefined
+    /** Handling of page margins that exceed the printer's printable area. */
+    readonly pageMarginSafety?: 'none' | 'clamp' | 'add' | undefined
     /** Rotation applied to a laid-out page. */
     readonly pageOrientation?:
       | 'upright'