@astryxdesign/core 0.4.2 → 0.4.3

package/src/theme/defineTheme.ts

@@ -72,6 +72,7 @@ import type {DomainTokenName} from './domainTokens';
 import {domainTokenDefaults} from './domainTokens';
 import type {SyntaxThemeDefinition} from './syntax';
 import {registerTheme} from './themeRegistry';
+import {deepMergeComponents} from './mergeComponents';
 
 // =============================================================================
 // Types
@@ -165,9 +166,14 @@ export interface DefineThemeInput {
   name: string;
 
   /**
-   * Base theme to extend. When provided, the new theme starts with the
-   * base theme's tokens, components, and fonts, then applies overrides
-   * from this input on top. The base theme's values have lowest precedence.
+   * Base theme to extend. When provided, the new theme starts with everything
+   * the base resolved to — tokens, component overrides, icons, indicators, and
+   * its `onDark`/`onLight` surfaces — then applies this input on top. The base
+   * theme's values have lowest precedence.
+   *
+   * The result is flat: an extended theme carries its inheritance in its own
+   * resolved output, so `astryx theme build` emits one self-contained
+   * stylesheet and the base's CSS does not need to be loaded alongside it.
    *
    * Use this to create variant themes that customize only a few aspects
    * (e.g. icons, accent color) without re-specifying the full theme.
@@ -416,49 +422,6 @@ function resolveTokenValue(value: TokenValue): string {
   return value;
 }
 
-/**
- * Deep-merge two component style maps.
- * Properties in `overrides` take precedence over `base`.
- * This allows typeScale-generated rules to be overridden by explicit components.
- */
-function deepMergeComponents(
-  base?: ComponentStyleMap,
-  overrides?: ComponentStyleMap,
-): ComponentStyleMap | undefined {
-  if (!base && !overrides) {
-    return undefined;
-  }
-  if (!base) {
-    return overrides;
-  }
-  if (!overrides) {
-    return base;
-  }
-
-  const result: ComponentStyleMap = {};
-
-  // Start with all base entries
-  for (const [component, rules] of Object.entries(base)) {
-    result[component] = {...rules};
-  }
-
-  // Merge overrides on top
-  for (const [component, rules] of Object.entries(overrides)) {
-    if (!result[component]) {
-      result[component] = {...rules};
-    } else {
-      for (const [key, styles] of Object.entries(rules)) {
-        result[component][key] = {
-          ...result[component][key],
-          ...styles,
-        };
-      }
-    }
-  }
-
-  return result;
-}
-
 /**
  * Resolve a FontWeight name to a var() reference.
  * Named weights map to var(--font-weight-*); raw values pass through.
@@ -491,6 +454,24 @@ function buildFontFamily(
   return quoted;
 }
 
+/**
+ * Describe a rejected `extends` value for the error message — enough to tell a
+ * missed import (`undefined`) from a module namespace or a plain object.
+ */
+function describeBadBase(value: unknown): string {
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (value === null) {
+    return 'null';
+  }
+  if (typeof value !== 'object') {
+    return typeof value;
+  }
+  const keys = Object.keys(value);
+  return `an object with keys [${keys.slice(0, 4).join(', ')}${keys.length > 4 ? ', …' : ''}]`;
+}
+
 /**
  * Create an Astryx theme.
  *
@@ -504,7 +485,19 @@ function buildFontFamily(
 export function defineTheme(input: DefineThemeInput): DefinedTheme {
   const tokens: Record<string, string> = {};
 
-  // 0. Pre-seed from base theme when `extends` is provided (lowest precedence)
+  // 0. Pre-seed from base theme when `extends` is provided (lowest precedence).
+  // A base that is not a theme is refused rather than ignored: `extends` used
+  // to inherit nothing when its value was undefined, which is what a named
+  // import silently resolving to the wrong module hands over, and the theme
+  // then built into a plausible-looking stylesheet missing everything it was
+  // supposed to inherit.
+  if ('extends' in input && !isDefinedTheme(input.extends)) {
+    throw new Error(
+      `defineTheme("${input.name}"): \`extends\` must be a theme from defineTheme(), got ${describeBadBase(input.extends)}. ` +
+        `Check that the import naming your base theme resolves to its source and exports that name — ` +
+        `a generated \`<theme>.js\` artifact sitting next to the source exports \`<name>Theme\`, not the source's own export.`,
+    );
+  }
   const base = input.extends;
   if (base) {
     for (const [key, value] of Object.entries(base.tokens)) {
@@ -640,9 +633,10 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
     components = deepMergeComponents(base.components, components);
   }
 
-  // 4. Resolve on-media token overrides (defaults + user overrides)
-  const __onDark = resolveOnMedia('dark', input.onDark);
-  const __onLight = resolveOnMedia('light', input.onLight);
+  // 4. Resolve on-media token overrides (base's resolved surface, then
+  // defaults, then this theme's own overrides)
+  const __onDark = resolveOnMedia('dark', input.onDark, base?.__onDark);
+  const __onLight = resolveOnMedia('light', input.onLight, base?.__onLight);
 
   // 5. Merge icons — input icons override base icons
   const icons =
@@ -663,7 +657,10 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
     components,
     icons,
     indicators,
-    __inputTokens: input.tokens,
+    __inputTokens:
+      base?.__inputTokens || input.tokens
+        ? {...base?.__inputTokens, ...input.tokens}
+        : undefined,
     __onDark,
     __onLight,
   };

package/src/theme/extensibleAxes.test.ts

@@ -0,0 +1,365 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+/**
+ * @file Guards the EXTENSIBLE prop axes — the `*Map` interfaces a theme
+ *   augments — against the theming surface that has to carry them.
+ * @input Component sources (*.tsx/*.ts) and their `{Name}.doc.mjs` files.
+ * @output Vitest failures naming each map whose axis a theme cannot reach.
+ * @position Third sibling of derivedVarRegistry.test.ts (`vars`, `derived`) and
+ *   themingTargets.test.ts (`targets`). Those two check what a component
+ *   RENDERS against what it DOCUMENTS. Neither one looks at the open prop
+ *   unions, so nothing did.
+ *
+ * An extensible axis is a promise made in three places at once, and it is only
+ * kept if all three agree:
+ *
+ *   1. `export interface FooVariantMap` in `Foo/index.ts` — the augmentation
+ *      point. A consumer writes `declare module '@astryxdesign/core/Foo'`
+ *      against THAT subpath, and `astryx theme build` looks for the literal
+ *      interface there when it emits `<theme>.variants.d.ts`. A map declared
+ *      in a sibling file and only re-exported is invisible to both.
+ *   2. `themeProps('foo', {variant})` — the axis reaching the DOM. Without it
+ *      a custom variant renders no selector, so there is nothing to style.
+ *   3. `visualProps: ['variant']` on the doc's theming target — discovery, and
+ *      the reason `theme build` does not reject `'foo': {'variant:custom': …}`
+ *      as an unknown prop.
+ *
+ * Miss (2) and the type says yes while the CSS says nothing: TreeList shipped
+ * `TreeListVariantMap`, with a module-augmentation example in its own JSDoc,
+ * while `themeProps('tree-list', {density})` never passed `variant` — so an
+ * augmented variant type-checked, rendered, and could not be themed.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {readdirSync, readFileSync, existsSync} from 'node:fs';
+import {join, relative} from 'node:path';
+import ts from 'typescript';
+import {stableClassName} from '../naming';
+
+const SRC_DIR = join(__dirname, '..');
+
+// ---------------------------------------------------------------------------
+// Source scanning
+// ---------------------------------------------------------------------------
+
+/**
+ * An extensible axis, keyed by the map that owns it.
+ *
+ * The OWNER is the component whose index declares the interface — that is the
+ * subpath a consumer augments and the component that has to reflect the prop.
+ * Other components may declare a prop of the same type (`AlertDialog`'s
+ * `actionVariant: ButtonVariant`, every field's `statusVariant`); they forward
+ * the value to the owner and are not separately accountable for it.
+ */
+interface ExtensibleAxis {
+  /** Component directory under src/ whose index declares the map. */
+  dir: string;
+  /** Interface name, e.g. 'TreeListVariantMap'. */
+  mapName: string;
+  /** The prop it types, read off the interface name, e.g. 'variant'. */
+  prop: string;
+}
+
+function sourceFilesUnder(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === 'node_modules' || entry.name === '__tests__') {continue;}
+      sourceFilesUnder(full, out);
+    } else if (/\.tsx?$/.test(entry.name) && !entry.name.includes('.test.')) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+function parse(file: string): ts.SourceFile {
+  return ts.createSourceFile(
+    file,
+    readFileSync(file, 'utf8'),
+    ts.ScriptTarget.Latest,
+    true,
+    file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS,
+  );
+}
+
+/**
+ * Every `type Alias = keyof SomethingMap` in the tree, as alias -> map name.
+ * This is the shape that makes a union OPEN: augmenting the interface widens
+ * the alias, which is the whole mechanism a theme package uses.
+ */
+function collectKeyofAliases(files: string[]): Map<string, string> {
+  const aliases = new Map<string, string>();
+
+  /** `keyof FooMap`, and the `keyof FooMap & string` narrowing form. */
+  const mapBehind = (type: ts.TypeNode): string | null => {
+    if (ts.isIntersectionTypeNode(type)) {
+      for (const member of type.types) {
+        const found = mapBehind(member);
+        if (found != null) {return found;}
+      }
+      return null;
+    }
+    if (
+      ts.isTypeOperatorNode(type) &&
+      type.operator === ts.SyntaxKind.KeyOfKeyword &&
+      ts.isTypeReferenceNode(type.type) &&
+      ts.isIdentifier(type.type.typeName) &&
+      type.type.typeName.text.endsWith('Map')
+    ) {
+      return type.type.typeName.text;
+    }
+    return null;
+  };
+
+  for (const file of files) {
+    const visit = (node: ts.Node): void => {
+      if (ts.isTypeAliasDeclaration(node)) {
+        const map = mapBehind(node.type);
+        if (map != null) {aliases.set(node.name.text, map);}
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return aliases;
+}
+
+/**
+ * Maps whose alias types a prop on some `*Props` interface — i.e. the open
+ * union is a COMPONENT PROP, which is what makes it a theming axis.
+ *
+ * This is the line between the two kinds of augmentable map in the tree.
+ * `ButtonVariantMap` widens `<Button variant>`, a visual prop that reaches the
+ * DOM and gets styled. `IndicatorMap` widens the set of registered indicator
+ * NAMES — a different extension mechanism (the theme's `indicators` field,
+ * swapping a React component), with no selector and no visual prop. Holding
+ * the second to the theming contract below would be a category error.
+ */
+function mapsTypingAProp(
+  files: string[],
+  aliases: Map<string, string>,
+): Set<string> {
+  const used = new Set<string>();
+  for (const file of files) {
+    const visit = (node: ts.Node): void => {
+      if (ts.isInterfaceDeclaration(node) && node.name.text.endsWith('Props')) {
+        for (const member of node.members) {
+          if (!ts.isPropertySignature(member) || member.type == null) {continue;}
+          const typeNode = ts.isArrayTypeNode(member.type)
+            ? member.type.elementType
+            : member.type;
+          if (
+            ts.isTypeReferenceNode(typeNode) &&
+            ts.isIdentifier(typeNode.typeName)
+          ) {
+            const map = aliases.get(typeNode.typeName.text);
+            if (map != null) {used.add(map);}
+          }
+        }
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return used;
+}
+
+/**
+ * Every map that is (a) an open union — some `type X = keyof <Map>` exists, so
+ * augmenting it widens a real type — and (b) declared in a component index.
+ *
+ * The prop name is read off the interface, which is the same convention
+ * `astryx theme build` uses to find an augmentation point:
+ * `<Prefix><Prop>Map`. `TextColorMap` -> Text, `color`.
+ * `AvatarStatusDotVariantMap` -> Avatar, `variant`.
+ */
+function collectExtensibleAxes(
+  files: string[],
+  aliases: Map<string, string>,
+  propMaps: Set<string>,
+): ExtensibleAxis[] {
+  const open = propMaps;
+  const axes: ExtensibleAxis[] = [];
+  for (const file of files) {
+    if (!/\/index\.tsx?$/.test(file)) {continue;}
+    const dir = relative(SRC_DIR, file).split('/')[0];
+    const visit = (node: ts.Node): void => {
+      if (
+        ts.isInterfaceDeclaration(node) &&
+        node.name.text.endsWith('Map') &&
+        open.has(node.name.text)
+      ) {
+        const bare = node.name.text.slice(0, -'Map'.length);
+        // The trailing PascalCase word is the prop.
+        const match = /([A-Z][a-z0-9]*)$/.exec(bare);
+        if (match == null) {return;}
+        const prop = match[1].charAt(0).toLowerCase() + match[1].slice(1);
+        axes.push({dir, mapName: node.name.text, prop});
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return axes;
+}
+
+/** Every `themeProps('name', {...})` site, as class -> the prop keys it passes. */
+function collectThemePropsSites(files: string[]): Map<string, Set<string>> {
+  const sites = new Map<string, Set<string>>();
+  for (const file of files) {
+    const visit = (node: ts.Node): void => {
+      if (
+        ts.isCallExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === 'themeProps'
+      ) {
+        const [nameArg, propsArg] = node.arguments;
+        if (nameArg != null && ts.isStringLiteralLike(nameArg)) {
+          const cls = stableClassName(nameArg.text);
+          const keys = sites.get(cls) ?? new Set<string>();
+          if (propsArg != null && ts.isObjectLiteralExpression(propsArg)) {
+            for (const prop of propsArg.properties) {
+              const name = prop.name;
+              if (
+                name != null &&
+                (ts.isIdentifier(name) || ts.isStringLiteralLike(name))
+              ) {
+                keys.add(name.text);
+              }
+            }
+          }
+          sites.set(cls, keys);
+        }
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return sites;
+}
+
+// ---------------------------------------------------------------------------
+// Docs
+// ---------------------------------------------------------------------------
+
+interface DocTarget {
+  className: string;
+  visualProps: string[];
+}
+
+function collectDocTargets(dir: string): Map<string, DocTarget[]> {
+  const byDir = new Map<string, DocTarget[]>();
+  const walk = (current: string): void => {
+    for (const entry of readdirSync(current, {withFileTypes: true})) {
+      const full = join(current, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === 'node_modules' || entry.name === '__tests__') {
+          continue;
+        }
+        walk(full);
+      } else if (entry.name.endsWith('.doc.mjs')) {
+        const componentDir = relative(SRC_DIR, full).split('/')[0];
+        let doc;
+        try {
+          doc = require(full).docs;
+        } catch {
+          continue;
+        }
+        const targets = (doc?.theming?.targets ?? [])
+          .filter(
+            (t: unknown): t is {className: string} =>
+              typeof (t as {className?: unknown})?.className === 'string',
+          )
+          .map((t: {className: string; visualProps?: string[]}) => ({
+            className: t.className,
+            visualProps: t.visualProps ?? [],
+          }));
+        byDir.set(componentDir, [
+          ...(byDir.get(componentDir) ?? []),
+          ...targets,
+        ]);
+      }
+    }
+  };
+  walk(dir);
+  return byDir;
+}
+
+// ---------------------------------------------------------------------------
+
+const files = sourceFilesUnder(SRC_DIR);
+const aliases = collectKeyofAliases(files);
+const propMaps = mapsTypingAProp(files, aliases);
+const axes = collectExtensibleAxes(files, aliases, propMaps);
+const themePropsSites = collectThemePropsSites(files);
+const docTargets = collectDocTargets(SRC_DIR);
+
+/** The target a component's own name maps to, e.g. TreeList -> astryx-tree-list. */
+function ownTargets(axis: ExtensibleAxis): DocTarget[] {
+  return docTargets.get(axis.dir) ?? [];
+}
+
+describe('extensible prop axes are reachable by a theme', () => {
+  it('finds the axes at all (guards the guard)', () => {
+    // If the AST walk silently stopped matching, every assertion below would
+    // pass on an empty list.
+    expect(axes.length).toBeGreaterThan(10);
+    expect(axes.map(a => a.mapName)).toContain('ButtonVariantMap');
+  });
+
+  it('every open prop union is declared in an index a consumer can augment', () => {
+    // Module augmentation only widens the module where the interface is
+    // DECLARED, and the CLI greps the public subpath for that literal
+    // declaration. A map in a sibling file, re-exported, satisfies neither:
+    // `declare module '@astryxdesign/core/<Component>'` would create a new,
+    // unrelated interface and `theme build` would emit no augmentation.
+    // `collectExtensibleAxes` only reads indexes, so anything open and
+    // declared elsewhere is missing from `axes` entirely — compare against
+    // every open map in the tree to catch that.
+    const declaredInAnIndex = new Set(axes.map(a => a.mapName));
+    const notAugmentable = [...propMaps].filter(m => !declaredInAnIndex.has(m));
+    expect(
+      notAugmentable,
+      'these maps type an open union but are not declared in a component index, ' +
+        'so no consumer can augment them at @astryxdesign/core/<Component>',
+    ).toEqual([]);
+  });
+
+  it.each(axes.map(a => [`${a.dir}.${a.prop} (${a.mapName})`, a] as const))(
+    '%s reaches the DOM through themeProps',
+    (_label, axis) => {
+      // The axis is extensible, so a consumer can add a value we have never
+      // seen. The only way their CSS can select it is if the component
+      // reflects the prop.
+      const targets = ownTargets(axis);
+      const reflected = targets.some(t =>
+        themePropsSites.get(t.className)?.has(axis.prop),
+      );
+      expect(
+        reflected,
+        `${axis.dir} lets a theme add \`${axis.prop}\` values via ${axis.mapName}, but no ` +
+          `themeProps() call passes \`${axis.prop}\` — a custom value renders no selector, ` +
+          `so it cannot be styled. Pass it: themeProps('<target>', {${axis.prop}}).`,
+      ).toBe(true);
+    },
+  );
+
+  it.each(axes.map(a => [`${a.dir}.${a.prop} (${a.mapName})`, a] as const))(
+    '%s is documented as a visual prop',
+    (_label, axis) => {
+      // Undocumented, it is undiscoverable — and `theme build` rejects
+      // `'<target>': {'<prop>:custom': …}` as an unknown prop, because its
+      // known-prop set is built from exactly this field.
+      const targets = ownTargets(axis);
+      const documented = targets.some(t => t.visualProps.includes(axis.prop));
+      expect(
+        documented,
+        `${axis.dir} lets a theme add \`${axis.prop}\` values via ${axis.mapName}, but no ` +
+          `theming target documents \`${axis.prop}\` in visualProps — a theme author cannot ` +
+          `discover the axis, and \`astryx theme build\` warns "Unknown prop" on it.`,
+      ).toBe(true);
+    },
+  );
+});

package/src/theme/mergeComponents.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Component style-map merging
+ *
+ * One merge rule for component overrides, shared by every layer that composes
+ * them: `extends` inheritance, generated type-scale rules, and the on-media
+ * (`onDark`/`onLight`) surfaces. Merging is per style key, so a child that
+ * restates one property of `button.base` keeps the rest of the base's.
+ *
+ * @input two ComponentStyleMaps — the base and the overrides that win
+ * @output a merged ComponentStyleMap
+ * @position packages/core/src/theme/mergeComponents.ts
+ */
+
+import type {ComponentStyleMap} from './defineTheme';
+
+/**
+ * Deep-merge component style maps: `overrides` wins per style key, and every
+ * component and key the base declared that the overrides do not mention is
+ * carried through untouched.
+ */
+export function deepMergeComponents(
+  base?: ComponentStyleMap,
+  overrides?: ComponentStyleMap,
+): ComponentStyleMap | undefined {
+  if (!base && !overrides) {
+    return undefined;
+  }
+  if (!base) {
+    return overrides;
+  }
+  if (!overrides) {
+    return base;
+  }
+
+  const result: ComponentStyleMap = {};
+
+  // Start with all base entries
+  for (const [component, rules] of Object.entries(base)) {
+    result[component] = {...rules};
+  }
+
+  // Merge overrides on top
+  for (const [component, rules] of Object.entries(overrides)) {
+    if (!result[component]) {
+      result[component] = {...rules};
+    } else {
+      for (const [key, styles] of Object.entries(rules)) {
+        result[component][key] = {
+          ...result[component][key],
+          ...styles,
+        };
+      }
+    }
+  }
+
+  return result;
+}

package/src/theme/onMediaTokens.ts

@@ -21,6 +21,7 @@
  */
 
 import type {TokenValue, ComponentStyleMap} from './defineTheme';
+import {deepMergeComponents} from './mergeComponents';
 
 /**
  * On-media theme overrides — same shape as the main theme but scoped
@@ -89,15 +90,21 @@ function resolveValue(value: TokenValue): string {
 /**
  * Resolve on-media overrides: merge user tokens with defaults,
  * pass through component overrides.
+ *
+ * `base` is the already-resolved surface of a theme being extended. It sits
+ * between the defaults and this theme's own input, so a child theme inherits
+ * the surface customizations of the theme it extends instead of silently
+ * reverting them to the defaults.
  */
 export function resolveOnMedia(
   surface: 'dark' | 'light',
   input?: OnMediaOverrides,
+  base?: ResolvedOnMedia,
 ): ResolvedOnMedia {
   const defaults =
     surface === 'dark' ? defaultOnDarkTokens : defaultOnLightTokens;
 
-  const tokens = {...defaults};
+  const tokens = {...defaults, ...base?.tokens};
 
   if (input?.tokens) {
     for (const [key, value] of Object.entries(input.tokens)) {
@@ -109,6 +116,6 @@ export function resolveOnMedia(
 
   return {
     tokens,
-    components: input?.components,
+    components: deepMergeComponents(base?.components, input?.components),
   };
 }