@astryxdesign/core 0.6.3-canary.2c831e4 → 0.6.3-canary.3ee796c

package/dist/Chat/ChatLayoutScrollButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAuC7B;yBAhDe,sBAAsB"}
+{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAkC7B;yBA3Ce,sBAAsB"}

package/dist/Chat/ChatLayoutScrollButton.js

@@ -75,50 +75,40 @@ export function ChatLayoutScrollButton({
   ...rest
 }) {
   const t = useTranslator();
-  return (
-    /*#__PURE__*/
-    // Two elements, two responsibilities. The outer one centres the pill and
-    // holds the gap above the composer — spacing outside the pill's border
-    // box, which the pill cannot own itself. The inner one is the pill: it is
-    // what a reader sees, so it carries the painted surface AND the public
-    // theming target. Keeping the target on the outer element would satisfy
-    // every automated check while leaving a theme styling an invisible
-    // full-width row (architecture:component-theming-surface INV4).
-    _jsx("div", {
-      ref: ref,
-      ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
-      ...rest,
-      children: /*#__PURE__*/_jsx("div", {
-        ...mergeProps(themeProps('chat-layout-scroll-button'), {
-          0: {
-            className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1jys5uj"
-          },
-          2: {
-            className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w xnpuxes x1jys5uj"
-          },
-          1: {
-            className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1ncir08"
-          },
-          3: {
-            className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w xnpuxes x1ncir08"
-          }
-        }[!!isVisible << 1 | !!label << 0]),
-        children: /*#__PURE__*/_jsx(Button, {
-          label: label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom'),
-          "aria-label": label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom'),
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "chevronDown",
-            size: "md"
-          }),
-          variant: "ghost",
-          size: "md",
-          isIconOnly: !label,
-          onClick: onClick,
-          xstyle: [styles.button, label ? styles.buttonWithLabel : null],
-          children: label ?? undefined
-        })
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    ...mergeProps(themeProps('chat-layout-scroll-button'), stylex.props(styles.wrapper, xstyle), className, style),
+    ...rest,
+    children: /*#__PURE__*/_jsx("div", {
+      ...{
+        0: {
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1jys5uj"
+        },
+        2: {
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w xnpuxes x1jys5uj"
+        },
+        1: {
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1ncir08"
+        },
+        3: {
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w xnpuxes x1ncir08"
+        }
+      }[!!isVisible << 1 | !!label << 0],
+      children: /*#__PURE__*/_jsx(Button, {
+        label: label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom'),
+        "aria-label": label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom'),
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "md"
+        }),
+        variant: "ghost",
+        size: "md",
+        isIconOnly: !label,
+        onClick: onClick,
+        xstyle: [styles.button, label ? styles.buttonWithLabel : null],
+        children: label ?? undefined
       })
     })
-  );
+  });
 }
 ChatLayoutScrollButton.displayName = 'ChatLayoutScrollButton';

package/dist/theme/generateThemeRules.d.ts

@@ -7,17 +7,11 @@
  * Used by both the runtime path (Theme injects <style>) and the build
  * path (`astryx theme build` pre-compiles to CSS files).
  *
- * Every consumer-supplied declaration is checked by declarationBoundary.ts
- * before it is emitted, so a value can never end its declaration or rule
- * early. A refused declaration is dropped and reported in the supplied
- * warnings array (build receipts), or through `console.warn` (runtime).
- *
  * Extracted from defineTheme.ts to reduce cyclomatic complexity and provide
  * a clear single-responsibility module for CSS generation.
  *
- * @input DefinedTheme (resolved theme object from defineTheme), optional warnings array
- * @output CSS rule strings, split by layer (component vs prose), and warning text
- *   for each dropped declaration
+ * @input DefinedTheme (resolved theme object from defineTheme)
+ * @output CSS rule strings, split by layer (component vs prose)
  * @position packages/core/src/theme/generateThemeRules.ts
  */
 import type { ComponentStyleMap, DefinedTheme } from './defineTheme';
@@ -71,7 +65,7 @@ export interface ThemeRuleSource {
     /** Resolved component style overrides. */
     components?: ComponentStyleMap;
 }
-export declare function generateThemeRules(theme: ThemeRuleSource, warnings?: string[]): string[];
+export declare function generateThemeRules(theme: ThemeRuleSource): string[];
 /**
  * Generate theme rules split into component and prose groups.
  *
@@ -82,7 +76,7 @@ export declare function generateThemeRules(theme: ThemeRuleSource, warnings?: st
  * Component rules (tokens, stable .astryx-* targets plus data-* selectors) are
  * that need to beat StyleX — they stay in astryx-theme (above StyleX layers).
  */
-export declare function generateThemeRulesSplit(theme: DefinedTheme, warnings?: string[]): ThemeRulesSplit;
+export declare function generateThemeRulesSplit(theme: DefinedTheme): ThemeRulesSplit;
 /**
  * Generate CSS for on-media token and component overrides.
  *
@@ -91,7 +85,7 @@ export declare function generateThemeRulesSplit(theme: DefinedTheme, warnings?:
  * to media contexts — only tokens change. Themes can further customize
  * via onDark.components / onLight.components.
  */
-export declare function generateOnMediaCSS(theme: DefinedTheme, warnings?: string[]): string;
+export declare function generateOnMediaCSS(theme: DefinedTheme): string;
 /**
  * Generate CSS for a theme's ordered adaptation rules.
  *
@@ -101,7 +95,7 @@ export declare function generateOnMediaCSS(theme: DefinedTheme, warnings?: strin
  * rule. Bare prose follows semantic variables, so token writes need no duplicate
  * prose selectors here.
  */
-export declare function generateAdaptationCSS(theme: DefinedTheme, warnings?: string[]): ThemeCSSOutput;
+export declare function generateAdaptationCSS(theme: DefinedTheme): ThemeCSSOutput;
 /**
  * The `--color-data-*` defaults as one unscoped `:root` block.
  *
@@ -134,5 +128,5 @@ export declare function generateDataTokenDefaultsCSS(): string;
  * The theme-independent `--color-data-*` defaults are not part of this output:
  * see `generateDataTokenDefaultsCSS`.
  */
-export declare function generateThemeCSS(theme: DefinedTheme, warnings?: string[]): ThemeCSSOutput;
+export declare function generateThemeCSS(theme: DefinedTheme): ThemeCSSOutput;
 //# sourceMappingURL=generateThemeRules.d.ts.map

package/dist/theme/generateThemeRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateThemeRules.d.ts","sourceRoot":"","sources":["../../src/theme/generateThemeRules.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAqHnE;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kFAAkF;IAClF,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAmUD;;;;;GAKG;AACH;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,eAAe,EACtB,QAAQ,CAAC,EAAE,MAAM,EAAE,GAClB,MAAM,EAAE,CAiDV;AAoZD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,YAAY,EACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,GAClB,eAAe,CAejB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,EACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,GAClB,MAAM,CAmDR;AA+CD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,YAAY,EACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,GAClB,cAAc,CAoFhB;AAOD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,4BAA4B,IAAI,MAAM,CAKrD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,GAClB,cAAc,CAoChB"}
+{"version":3,"file":"generateThemeRules.d.ts","sourceRoot":"","sources":["../../src/theme/generateThemeRules.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAiHnE;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kFAAkF;IAClF,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAoND;;;;;GAKG;AACH;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,EAAE,CAuDnE;AAsXD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAe5E;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CA6C9D;AA+CD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,CA+EzE;AAUD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,4BAA4B,IAAI,MAAM,CAKrD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,CAoCpE"}

package/dist/theme/generateThemeRules.js

@@ -9,17 +9,11 @@
  * Used by both the runtime path (Theme injects <style>) and the build
  * path (`astryx theme build` pre-compiles to CSS files).
  *
- * Every consumer-supplied declaration is checked by declarationBoundary.ts
- * before it is emitted, so a value can never end its declaration or rule
- * early. A refused declaration is dropped and reported in the supplied
- * warnings array (build receipts), or through `console.warn` (runtime).
- *
  * Extracted from defineTheme.ts to reduce cyclomatic complexity and provide
  * a clear single-responsibility module for CSS generation.
  *
- * @input DefinedTheme (resolved theme object from defineTheme), optional warnings array
- * @output CSS rule strings, split by layer (component vs prose), and warning text
- *   for each dropped declaration
+ * @input DefinedTheme (resolved theme object from defineTheme)
+ * @output CSS rule strings, split by layer (component vs prose)
  * @position packages/core/src/theme/generateThemeRules.ts
  */
 
@@ -28,7 +22,6 @@ import { parseStyleKey } from "../utils/parseStyleKey.js";
 import { getDerivedVars } from "./derivedVarRegistry.js";
 import { dataTokenDefaults } from "./domainTokens/dataTokens.js";
 import { cssVar, classPrefix, dataAttrNamespace } from "../naming.js";
-import { checkDeclarationName, checkDeclarationValue } from "./declarationBoundary.js";
 
 /**
  * Theme @scope selectors.
@@ -291,77 +284,6 @@ function expandContainerPadding(component, parsed, resetInheritedSpecificity = f
   return tokens;
 }
 
-// =============================================================================
-// Declaration assembly: a declaration always stays one declaration
-// =============================================================================
-
-const warnToConsole = message => {
-  console.warn(`[astryx theme] ${message}`);
-};
-
-/** Build receipts collect warning text; runtime callers warn by default. */
-function diagnosticSink(warnings) {
-  return warnings ? message => warnings.push(message) : warnToConsole;
-}
-
-/** Shorten an authored value for a one-line message. */
-function previewValue(value) {
-  const oneLine = JSON.stringify(value);
-  return oneLine.length > 80 ? `${oneLine.slice(0, 77)}..."` : oneLine;
-}
-function reportDrop(sink, property, value, location, reason) {
-  sink(`dropped "${property}" in ${location}: ${reason} (value: ${previewValue(value)})`);
-}
-
-/**
- * True when `name: value;` stays exactly one declaration; otherwise reports
- * the drop and returns false. Both checks follow CSS syntax, so valid CSS a
- * browser keeps inside one declaration (a `data:` URI, `Gill\ Sans`, a closed
- * comment, a vendor-prefixed property) is never refused; see
- * declarationBoundary.ts for the rules.
- */
-function acceptDeclaration(property, value, location, sink) {
-  const reason = checkDeclarationName(property) ?? checkDeclarationValue(value);
-  if (reason === null) {
-    return true;
-  }
-  reportDrop(sink, property, value, location, reason);
-  return false;
-}
-
-/**
- * Assemble `prop: value;` lines, dropping (and reporting) any entry whose
- * property or value could not stay a single declaration. Theme definitions
- * are code, but apps do assemble them from stored input (brand colors,
- * white-labeling), so the generated stylesheet must never extend beyond the
- * declarations it means to emit.
- */
-function joinDeclarations(entries, location, sink, mapProp = p => p) {
-  const lines = [];
-  for (const [rawProp, rawValue] of entries) {
-    // Legacy unenrolled tokens retain non-string values. Scan the same text
-    // interpolation has always emitted, without changing the normalized theme.
-    const value = `${rawValue}`;
-    const prop = mapProp(rawProp);
-    if (acceptDeclaration(prop, value, location, sink)) {
-      lines.push(`    ${prop}: ${value};`);
-    }
-  }
-  return lines.join('\n');
-}
-
-/** The `:scope` token block for portable and theme-local token values. */
-function tokenBlock(source, location, sink) {
-  const declarations = [joinDeclarations(Object.entries(source.tokens), `${location}tokens`, sink), joinDeclarations(Object.entries(source.localTokens ?? {}), `${location}localTokens`, sink)].filter(block => block.length > 0).join('\n');
-  const hasEntries = Object.keys(source.tokens).length > 0 || Object.keys(source.localTokens ?? {}).length > 0;
-  return hasEntries ? `  :scope {\n${declarations}\n  }` : null;
-}
-
-/** `components.button["variant:secondary"]`-style location for a rule. */
-function componentLocation(prefix, component, key) {
-  return `${prefix}components.${component}[${JSON.stringify(key)}]`;
-}
-
 // =============================================================================
 // Public API
 // =============================================================================
@@ -381,9 +303,9 @@ function componentLocation(prefix, component, key) {
  * lost for every conditional rule, with no type error to catch it.
  */
 
-export function generateThemeRules(theme, warnings) {
+export function generateThemeRules(theme) {
   const parts = [];
-  const sink = diagnosticSink(warnings);
+  const tokens = theme.tokens;
 
   // Bare prose rules reference semantic variables instead of baking the root
   // value. That lets adaptation token writes take effect through CSS alone
@@ -391,9 +313,10 @@ export function generateThemeRules(theme, warnings) {
   const val = key => `var(${key})`;
 
   // 1. Token block — CSS custom properties on :scope
-  const tokenRules = tokenBlock(theme, '', sink);
-  if (tokenRules !== null) {
-    parts.push(tokenRules);
+  const tokenEntries = [...Object.entries(tokens), ...Object.entries(theme.localTokens ?? {})];
+  if (tokenEntries.length > 0) {
+    const declarations = tokenEntries.map(([prop, value]) => `    ${prop}: ${value};`).join('\n');
+    parts.push(`  :scope {\n${declarations}\n  }`);
   }
 
   // 1b. Base font — apply the theme's declared body font to the scope root.
@@ -402,16 +325,14 @@ export function generateThemeRules(theme, warnings) {
   // sets a page font. `font-family` inherits, so one rule on :scope covers
   // the tree. Only emitted when the theme declares a body font, so a bare
   // theme still contributes no scope rules of its own.
-  if (theme.tokens['--font-family-body']) {
+  if (tokens['--font-family-body']) {
     parts.push(`  :scope {\n    font-family: var(--font-family-body);\n  }`);
   }
 
   // 2. Component overrides: stable .astryx-* target classes combined with
   // reflected data-* selectors for visual props and runtime states.
   if (theme.components) {
-    generateComponentRules(theme.components, parts, {
-      sink
-    });
+    generateComponentRules(theme.components, parts);
   }
 
   // 3. Prose HTML element rules (h1-h6, p, small, code, hr)
@@ -475,21 +396,13 @@ function generateHeadingWeightOverrides(components, parts, {
     parts.push(`  ${selector} { font-weight: ${effectiveWeight}; }`);
   }
 }
-
-/**
- * The `fontWeight` a heading rule authors for `styleKey`, or undefined when
- * it has none. A value that cannot stay one declaration is treated as not
- * authored, so the override falls back to the inherited or token weight
- * instead of interpolating it; the drop itself is reported where that same
- * rule's declarations are emitted, so it is not reported twice here.
- */
 function getAuthoredHeadingWeight(headingRuleMap, styleKey) {
   const rule = headingRuleMap[styleKey];
   if (rule == null || typeof rule !== 'object' || Array.isArray(rule)) {
     return undefined;
   }
   const fontWeight = rule.fontWeight;
-  return typeof fontWeight === 'string' && checkDeclarationValue(fontWeight) === null ? fontWeight : undefined;
+  return typeof fontWeight === 'string' ? fontWeight : undefined;
 }
 
 /** Options shared by root, adaptation, and media-surface component lowering. */
@@ -501,9 +414,7 @@ function getAuthoredHeadingWeight(headingRuleMap, styleKey) {
  */
 function generateComponentRules(components, parts, {
   resetInheritedPaddingSpecificity = false,
-  surface,
-  sink = warnToConsole,
-  location: locationPrefix = ''
+  surface
 } = {}) {
   for (const [component, rules] of Object.entries(components)) {
     for (const [key, styles] of Object.entries(rules)) {
@@ -513,7 +424,6 @@ function generateComponentRules(components, parts, {
       }
       const suffix = parseStyleKey(key);
       const baseSelector = componentSelector(component, suffix, surface);
-      const location = componentLocation(locationPrefix, component, key);
 
       // Separate regular properties from pseudo-class overrides
       const props = [];
@@ -521,7 +431,7 @@ function generateComponentRules(components, parts, {
       for (const [prop, value] of entries) {
         if (prop.startsWith(':') && typeof value === 'object') {
           pseudos.push([prop, value]);
-        } else if (acceptDeclaration(toKebabCase(prop), `${value}`, location, sink)) {
+        } else {
           props.push([prop, value]);
         }
       }
@@ -583,7 +493,7 @@ function generateComponentRules(components, parts, {
 
       // Emit base rule
       if (finalProps.length > 0) {
-        const declarations = joinDeclarations(finalProps, location, sink, toKebabCase);
+        const declarations = finalProps.map(([prop, value]) => `    ${toKebabCase(prop)}: ${value};`).join('\n');
         parts.push(`  ${baseSelector} {\n${declarations}\n  }`);
       }
 
@@ -591,7 +501,7 @@ function generateComponentRules(components, parts, {
       for (const [pseudo, pseudoStyles] of pseudos) {
         const pseudoEntries = Object.entries(pseudoStyles);
         if (pseudoEntries.length > 0) {
-          const declarations = joinDeclarations(pseudoEntries, `${location}[${JSON.stringify(pseudo)}]`, sink, toKebabCase);
+          const declarations = pseudoEntries.map(([prop, value]) => `    ${toKebabCase(prop)}: ${value};`).join('\n');
           parts.push(`  ${appendPseudoToSelectorList(baseSelector, pseudo)} {\n${declarations}\n  }`);
         }
       }
@@ -729,8 +639,8 @@ function generateSizeOverrides(components, parts, surface) {
  * Component rules (tokens, stable .astryx-* targets plus data-* selectors) are
  * that need to beat StyleX — they stay in astryx-theme (above StyleX layers).
  */
-export function generateThemeRulesSplit(theme, warnings) {
-  const allRules = generateThemeRules(theme, warnings);
+export function generateThemeRulesSplit(theme) {
+  const allRules = generateThemeRules(theme);
   const prose = [];
   const component = [];
   for (const rule of allRules) {
@@ -754,21 +664,19 @@ export function generateThemeRulesSplit(theme, warnings) {
  * to media contexts — only tokens change. Themes can further customize
  * via onDark.components / onLight.components.
  */
-export function generateOnMediaCSS(theme, warnings) {
+export function generateOnMediaCSS(theme) {
   const parts = [];
   const scopeSelector = themeScopeStart(theme.name);
-  const sink = diagnosticSink(warnings);
   for (const surface of ['dark', 'light']) {
     const onMedia = surface === 'dark' ? theme.__onDark : theme.__onLight;
     if (!onMedia) {
       continue;
     }
-    const location = surface === 'dark' ? 'onDark.' : 'onLight.';
 
     // Token overrides
     const tokenEntries = Object.entries(onMedia.tokens);
     if (tokenEntries.length > 0) {
-      const declarations = joinDeclarations(tokenEntries, `${location}tokens`, sink);
+      const declarations = tokenEntries.map(([prop, value]) => `    ${prop}: ${value};`).join('\n');
       parts.push(`  ${mediaSelector(surface)} {\n${declarations}\n  }`);
     }
 
@@ -777,9 +685,7 @@ export function generateOnMediaCSS(theme, warnings) {
     if (onMedia.components) {
       generateComponentRules(onMedia.components, parts, {
         resetInheritedPaddingSpecificity: true,
-        surface,
-        sink,
-        location
+        surface
       });
       generateColorOverrides(onMedia.components, parts, surface);
       generateSizeOverrides(onMedia.components, parts, surface);
@@ -801,17 +707,16 @@ export function generateOnMediaCSS(theme, warnings) {
 }
 
 /** Generate only the declarations one adaptation rule writes. */
-function generateAdaptationRuleRules(rule, location, sink) {
+function generateAdaptationRuleRules(rule) {
   const parts = [];
-  const tokens = tokenBlock(rule, location, sink);
-  if (tokens !== null) {
-    parts.push(tokens);
+  const tokenEntries = [...Object.entries(rule.tokens), ...Object.entries(rule.localTokens ?? {})];
+  if (tokenEntries.length > 0) {
+    const declarations = tokenEntries.map(([prop, value]) => `    ${prop}: ${value};`).join('\n');
+    parts.push(`  :scope {\n${declarations}\n  }`);
   }
   if (rule.components) {
     generateComponentRules(rule.components, parts, {
-      resetInheritedPaddingSpecificity: true,
-      sink,
-      location
+      resetInheritedPaddingSpecificity: true
     });
     generateColorOverrides(rule.components, parts);
     generateSizeOverrides(rule.components, parts);
@@ -835,8 +740,7 @@ function generateAdaptationMediaBlock(query, parts, scopeSelector) {
  * rule. Bare prose follows semantic variables, so token writes need no duplicate
  * prose selectors here.
  */
-export function generateAdaptationCSS(theme, warnings) {
-  const sink = diagnosticSink(warnings);
+export function generateAdaptationCSS(theme) {
   // Built themes can reach this compiler without passing through defineTheme.
   // Validate retained metadata even when it has no rules (and therefore emits
   // no CSS): width points remain observable through AppShell and inheritance.
@@ -857,8 +761,8 @@ export function generateAdaptationCSS(theme, warnings) {
   // active whenever the later condition matches, even if the earlier condition
   // does not. Pairwise merging cannot repair that: multiple mutually exclusive
   // earlier rules can each overlap one broad later rule.
-  for (const [index, rule] of rules.entries()) {
-    const parts = generateAdaptationRuleRules(rule, `adaptations[${index}].`, sink);
+  for (const rule of rules) {
+    const parts = generateAdaptationRuleRules(rule);
     if (parts.length === 0) {
       continue;
     }
@@ -893,9 +797,9 @@ export function generateAdaptationCSS(theme, warnings) {
   };
 }
 
-/** Indent the rule start without rewriting newlines inside authored values. */
+/** Indent a generated rule one level further, for nesting inside `@media`. */
 function indentRule(rule) {
-  return `  ${rule}`;
+  return rule.split('\n').map(line => line.length > 0 ? `  ${line}` : line).join('\n');
 }
 
 /**
@@ -934,11 +838,11 @@ export function generateDataTokenDefaultsCSS() {
  * The theme-independent `--color-data-*` defaults are not part of this output:
  * see `generateDataTokenDefaultsCSS`.
  */
-export function generateThemeCSS(theme, warnings) {
+export function generateThemeCSS(theme) {
   const {
     component,
     prose
-  } = generateThemeRulesSplit(theme, warnings);
+  } = generateThemeRulesSplit(theme);
   const scopeSelector = themeScopeStart(theme.name);
   const scopeTo = THEME_SCOPE_TO;
   let proseCss = '';
@@ -957,11 +861,11 @@ export function generateThemeCSS(theme, warnings) {
 
   // Adaptations follow the root theme in authored order. Media-surface rules
   // follow adaptations so onDark/onLight keep their specified precedence.
-  const adaptationCss = generateAdaptationCSS(theme, warnings);
+  const adaptationCss = generateAdaptationCSS(theme);
   if (adaptationCss.component) {
     componentCss = componentCss ? `${componentCss}\n\n${adaptationCss.component}` : adaptationCss.component;
   }
-  const onMediaCss = generateOnMediaCSS(theme, warnings);
+  const onMediaCss = generateOnMediaCSS(theme);
   if (onMediaCss) {
     componentCss = componentCss ? `${componentCss}\n\n${onMediaCss}` : onMediaCss;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.6.3-canary.2c831e4",
+  "version": "0.6.3-canary.3ee796c",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -692,8 +692,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.6.3-canary.2c831e4",
-    "@astryxdesign/cli": "0.6.3-canary.2c831e4",
+    "@astryxdesign/a11y-spec": "0.6.3-canary.3ee796c",
+    "@astryxdesign/cli": "0.6.3-canary.3ee796c",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -139,25 +139,20 @@ export function ChatLayoutScrollButton({
 }: ChatLayoutScrollButtonProps) {
   const t = useTranslator();
   return (
-    // Two elements, two responsibilities. The outer one centres the pill and
-    // holds the gap above the composer — spacing outside the pill's border
-    // box, which the pill cannot own itself. The inner one is the pill: it is
-    // what a reader sees, so it carries the painted surface AND the public
-    // theming target. Keeping the target on the outer element would satisfy
-    // every automated check while leaving a theme styling an invisible
-    // full-width row (architecture:component-theming-surface INV4).
     <div
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
+      {...mergeProps(
+        themeProps('chat-layout-scroll-button'),
+        stylex.props(styles.wrapper, xstyle),
+        className,
+        style,
+      )}
       {...rest}>
       <div
-        {...mergeProps(
-          themeProps('chat-layout-scroll-button'),
-          stylex.props(
-            styles.container,
-            isVisible ? styles.visible : styles.hidden,
-            label ? styles.expanded : styles.collapsed,
-          ),
+        {...stylex.props(
+          styles.container,
+          isVisible ? styles.visible : styles.hidden,
+          label ? styles.expanded : styles.collapsed,
         )}>
         <Button
           label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}

package/src/Chat/__tests__/ChatLayoutScrollButton.a11y.chromium.spec.ts

@@ -38,12 +38,8 @@ import {
 const OUTPUT = path.resolve('test-results/chat-layout-audit-evidence');
 const STORY_ID = 'core-chatlayout--scroll-affordance-states';
 
-/**
- * The pill: the element wrapping the Button, whose visibility and height are
- * the claims below. It also carries the public theming target, so the class is
- * a stable handle for it.
- */
-const PILL = '.astryx-chat-layout-scroll-button';
+/** The pill wrapper: the element whose visibility and height are the claims. */
+const PILL = '.astryx-chat-layout-scroll-button > div';
 
 /** One observed tab stop, identified structurally rather than by its text. */
 type FocusStop = {

package/src/theme/Theme.test.tsx

@@ -55,38 +55,6 @@ describe('Theme', () => {
     expect(getByText('hello')).toBeTruthy();
   });
 
-  it('mounts the remaining CSS when one authored declaration is dropped', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    try {
-      const theme = defineTheme({
-        name: 'declaration-boundary',
-        tokens: {'--color-accent': 'red; } body { color: red'},
-        components: {button: {base: {borderRadius: '4px'}}},
-      });
-      render(
-        <Theme theme={theme}>
-          <span>child</span>
-        </Theme>,
-      );
-      const css = Array.from(document.querySelectorAll('style'))
-        .map(tag => tag.textContent ?? '')
-        .join('\n');
-      expect(css).not.toContain('body { color: red');
-      expect(css).toContain('border-radius: 4px;');
-      expect(css).toContain(':where(p)');
-      expect(
-        warn.mock.calls.filter(([message]) =>
-          String(message).startsWith('[astryx theme] dropped'),
-        ),
-      ).toHaveLength(1);
-      expect(warn).toHaveBeenCalledWith(
-        expect.stringContaining('dropped "--color-accent" in tokens'),
-      );
-    } finally {
-      warn.mockRestore();
-    }
-  });
-
   it('sets data-astryx-theme on wrapper div', () => {
     const {container} = render(
       <Theme theme={testTheme}>