@astryxdesign/core 0.1.1 → 0.1.2-canary.2581eb4

package/src/ToggleButton/ToggleButton.tsx

@@ -20,14 +20,7 @@
  * - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
  */
 
-import React, {
-  useCallback,
-  useEffect,
-  useOptimistic,
-  useState,
-  useTransition,
-  type ReactNode,
-} from 'react';
+import React, {useOptimistic, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, fontWeightVars} from '../theme/tokens.stylex';
 
@@ -36,37 +29,6 @@ import {useToggleButtonGroup} from './ToggleButtonGroup';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
-// =============================================================================
-// Constants & helpers
-// =============================================================================
-
-/**
- * The spinner only appears once the action has been pending for this long.
- * A fast action shows the optimistic pressed state immediately with no spinner
- * flash, and rapid re-clicks can interrupt the in-flight action before the
- * button locks behind the spinner.
- */
-const PENDING_SPINNER_DELAY_MS = 150;
-
-/**
- * Returns `true` only once `active` has stayed `true` for `delayMs`.
- * Used to debounce the loading spinner so the optimistic state shows first.
- */
-function useDelayed(active: boolean, delayMs: number): boolean {
-  const [delayed, setDelayed] = useState(false);
-  useEffect(() => {
-    if (!active) {
-      return undefined;
-    }
-    const timer = setTimeout(() => setDelayed(true), delayMs);
-    return () => {
-      clearTimeout(timer);
-      setDelayed(false);
-    };
-  }, [active, delayMs]);
-  return active && delayed;
-}
-
 // =============================================================================
 // Styles
 // =============================================================================
@@ -122,23 +84,24 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
   isPressed?: boolean;
 
   /**
-   * Called when the pressed state should change.
+   * Called when the pressed state should change. Receives the next pressed
+   * state and the originating click event. Call `event.preventDefault()` to
+   * opt out of running `pressedChangeAction` (e.g. to handle the toggle
+   * entirely in this callback).
    * When used inside ToggleButtonGroup, this is handled by the group
    * and this prop is ignored.
    */
-  onPressedChange?: (isPressed: boolean) => void;
+  onPressedChange?: (
+    isPressed: boolean,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => void;
 
   /**
    * Action handler for API- or navigation-backed toggles, run inside a
-   * transition. The button shows a loading spinner while the action is
-   * pending — whether it returns a promise or synchronously triggers a
+   * transition by Button. The button shows a loading spinner while the action
+   * is pending — whether it returns a promise or synchronously triggers a
    * suspending update (e.g. a router navigation that suspends on data).
    *
-   * Because it runs in a transition, the toggle is *interruptible*: clicking
-   * again while an action is pending starts a new transition with the next
-   * optimistic state, so the action reflects the latest intent rather than
-   * being dropped.
-   *
    * @example
    * ```
    * <ToggleButton
@@ -272,54 +235,52 @@ export function ToggleButton({
   const size = sizeProp ?? group?.size ?? 'md';
   const isDisabled = group?.isDisabled ?? isDisabledProp;
 
-  // Track the pressed state optimistically. While an action is pending, the
-  // button reflects the intended (optimistic) state immediately, and a click
-  // mid-flight derives its next state from this value — so rapid toggles read
-  // true -> false -> true rather than stalling on the last committed value.
+  // Track the pressed state optimistically so the button reflects the intended
+  // state immediately while an async action is pending. The optimistic update
+  // is applied inside Button's clickAction transition (below), satisfying
+  // React's "useOptimistic must run in a transition" rule.
   const [optimisticPressed, setOptimisticPressed] =
     useOptimistic(committedPressed);
   const isPressed = optimisticPressed;
 
+  // Next state derives from the *optimistic* value, not the committed one, so a
+  // re-click while an action is pending reads the in-flight intent and toggles
+  // (true -> false -> true) rather than recomputing from the stale committed
+  // state. handleClick and clickAction share this so the callback and the
+  // optimistic update always agree within a single click.
+  const nextPressed = !isPressed;
+
   const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
 
-  // Run the toggle inside a transition. The action is interruptible: clicking
-  // again while it is pending starts a fresh transition with the next
-  // optimistic state instead of being dropped, so there is no re-entry guard.
-  // Both onPressedChange and pressedChangeAction run inside the transition,
-  // which means a synchronous-but-suspending handler (e.g. a router navigation
-  // that suspends on data) also drives the pending state — not just promises.
-  const [isPending, startTransition] = useTransition();
-  // Debounce the spinner so a fast action shows the optimistic state without a
-  // spinner flash, and rapid re-clicks can interrupt before the button locks.
-  const showSpinner = useDelayed(isPending, PENDING_SPINNER_DELAY_MS);
-  const isLoadingState = isLoading || showSpinner;
-
-  const handleClick = useCallback(() => {
+  // Synchronous part of the toggle. Button calls onClick before clickAction and
+  // skips clickAction when the event is defaultPrevented, so calling
+  // preventDefault() inside onPressedChange opts out of pressedChangeAction.
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (isDisabled) {
       return;
     }
-
     if (group && value != null) {
       // Group mode delegates selection to the group; no async-action path.
       group.toggle(value);
+      event.preventDefault();
       return;
     }
-
-    const newState = !optimisticPressed;
-    startTransition(async () => {
-      setOptimisticPressed(newState);
-      onPressedChangeProp?.(newState);
-      await pressedChangeAction?.(newState);
-    });
-  }, [
-    isDisabled,
-    group,
-    value,
-    optimisticPressed,
-    onPressedChangeProp,
-    pressedChangeAction,
-    setOptimisticPressed,
-  ]);
+    onPressedChangeProp?.(nextPressed, event);
+  };
+
+  // Async part of the toggle, run inside Button's transition (so the optimistic
+  // update is valid and Button's isPending drives the pending spinner). Skipped
+  // automatically by Button when handleClick called preventDefault, and never
+  // wired in group mode (where there is no async action). Button is rendered
+  // interruptible, so it stays clickable while pending and a re-click starts a
+  // fresh transition that interrupts the previous one.
+  const clickAction =
+    group && value != null
+      ? undefined
+      : async () => {
+          setOptimisticPressed(nextPressed);
+          await pressedChangeAction?.(nextPressed);
+        };
 
   // isIconOnly prop is the source of truth for icon-only rendering.
   const labelContent =
@@ -352,7 +313,8 @@ export function ToggleButton({
       variant="ghost"
       size={size}
       isDisabled={isDisabled}
-      isLoading={isLoadingState}
+      isLoading={isLoading}
+      isInterruptible
       isIconOnly={isIconOnly}
       aria-pressed={isPressed}
       icon={resolvedIcon}
@@ -363,6 +325,7 @@ export function ToggleButton({
       xstyle={[isPressed ? pressedStyles.background : undefined, xstyle]}
       style={style}
       onClick={handleClick}
+      clickAction={clickAction}
       {...props}>
       {labelContent}
     </Button>

package/src/Tokenizer/Tokenizer.tsx

@@ -222,7 +222,10 @@ const styles = stylex.create({
   },
   endSection: {
     position: 'absolute',
-    insetInlineEnd: `calc(${spacingVars['--spacing-1']} - 1px)`,
+    // Match the field's inline padding (inputWrapperStyles.base uses
+    // spacing-2) so end content (clear button, resultCount) lines up with
+    // the text/start-icon inset instead of hugging the border at ~3px.
+    insetInlineEnd: spacingVars['--spacing-2'],
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],

package/src/Toolbar/Toolbar.doc.mjs

@@ -7,6 +7,25 @@ export const docs = {
   displayName: 'Toolbar',
   category: 'Action',
   keywords: ['toolbar', 'nav', 'bar', 'actions', 'buttonbar', 'header', 'footer', 'action-bar', 'control-bar'],
+  playground: {
+    defaults: {
+      label: 'Table actions',
+      size: 'sm',
+      dividers: ['bottom'],
+      startContent: {
+        __element: 'TabList',
+        props: {value: 'overview'},
+        children: [
+          {__element: 'Tab', props: {label: 'Overview', value: 'overview'}},
+          {__element: 'Tab', props: {label: 'Activity', value: 'activity'}},
+        ],
+      },
+      endContent: [
+        {__element: 'Selector', props: {label: 'Status', isLabelHidden: true, placeholder: 'Status', size: 'sm', options: ['Open', 'In progress', 'Done']}},
+        {__element: 'Button', props: {label: 'New item', variant: 'primary', size: 'sm'}},
+      ],
+    },
+  },
   theming: {
     targets: [
       {className: 'astryx-toolbar', states: ['size']},
@@ -29,21 +48,62 @@ export const docs = {
           name: 'startContent',
           type: 'ReactNode',
           description: 'Content aligned to the start (left in LTR).',
-          slotElements: [{__element: 'Icon', props: {icon: 'check', size: 'sm'}}],
+          slotElements: [
+            {__element: 'Text', props: {type: 'body', weight: 'bold'}, children: 'Title'},
+            {__element: 'Button', props: {label: 'Back', variant: 'ghost', size: 'sm'}},
+            {__element: 'IconButton', props: {label: 'Filter', icon: {__element: 'Icon', props: {icon: 'check', size: 'sm'}}, variant: 'ghost', size: 'sm'}},
+            {
+              __element: 'TabList',
+              props: {value: 'overview'},
+              children: [
+                {__element: 'Tab', props: {label: 'Overview', value: 'overview'}},
+                {__element: 'Tab', props: {label: 'Activity', value: 'activity'}},
+              ],
+            },
+            {
+              __element: 'SegmentedControl',
+              props: {label: 'View', value: 'list'},
+              children: [
+                {__element: 'SegmentedControlItem', props: {label: 'List', value: 'list'}},
+                {__element: 'SegmentedControlItem', props: {label: 'Grid', value: 'grid'}},
+              ],
+            },
+            {__element: 'Selector', props: {label: 'Status', isLabelHidden: true, placeholder: 'Status', size: 'sm', options: ['Open', 'In progress', 'Done']}},
+          ],
         },
         {
           name: 'centerContent',
           type: 'ReactNode',
           description:
             'Centered content. Switches layout to CSS grid (1fr auto 1fr).',
-          slotElements: [{__element: 'Text', props: {type: 'body', weight: 'bold'}, children: 'Center'}],
+          slotElements: [
+            {__element: 'Text', props: {type: 'body', weight: 'bold'}, children: 'Center'},
+            {
+              __element: 'SegmentedControl',
+              props: {label: 'View', value: 'list'},
+              children: [
+                {__element: 'SegmentedControlItem', props: {label: 'List', value: 'list'}},
+                {__element: 'SegmentedControlItem', props: {label: 'Grid', value: 'grid'}},
+              ],
+            },
+            {
+              __element: 'TabList',
+              props: {value: 'overview'},
+              children: [
+                {__element: 'Tab', props: {label: 'Overview', value: 'overview'}},
+                {__element: 'Tab', props: {label: 'Activity', value: 'activity'}},
+              ],
+            },
+          ],
         },
         {
           name: 'endContent',
           type: 'ReactNode',
           description: 'Content aligned to the end (right in LTR).',
           slotElements: [
-            {__element: 'Icon', props: {icon: 'chevronDown', size: 'sm'}},
+            {__element: 'Button', props: {label: 'Save', variant: 'primary', size: 'sm'}},
+            {__element: 'IconButton', props: {label: 'More', icon: {__element: 'Icon', props: {icon: 'chevronDown', size: 'sm'}}, variant: 'ghost', size: 'sm'}},
+            {__element: 'Selector', props: {label: 'Sort', isLabelHidden: true, placeholder: 'Sort by', size: 'sm', options: ['Newest', 'Oldest', 'A–Z']}},
             {__element: 'Badge', props: {label: '3'}},
           ],
         },
@@ -51,14 +111,14 @@ export const docs = {
           name: 'size',
           type: "'sm' | 'md' | 'lg'",
           description:
-            'Size of the toolbar. Controls minimum height and coordinates with Button, TextInput, TabList, and Selector — children inherit this size as their default via SizeContext.',
+            'Size of the toolbar. Controls minimum height and coordinates with Button, TextInput, TabList, and Selector; children inherit this size as their default via SizeContext.',
           default: "'md'",
         },
         {
           name: 'gap',
           type: 'SpacingStep',
           description: 'Gap between items within each slot.',
-          default: '2',
+          default: '1',
         },
         {
           name: 'orientation',

package/src/Tooltip/Tooltip.test.tsx

@@ -55,6 +55,19 @@ describe('Tooltip', () => {
     expect(screen.getByRole('button', {name: 'Trigger'})).toBeInTheDocument();
   });
 
+  it('gives the tooltip layer role="tooltip" linked from the trigger', () => {
+    render(
+      <Tooltip content="Tooltip text">
+        <button type="button">Trigger</button>
+      </Tooltip>,
+    );
+    const layer = screen.getByRole('tooltip', {hidden: true});
+    expect(layer).toHaveTextContent('Tooltip text');
+    // ARIA tooltip pattern: trigger references the layer via aria-describedby.
+    const trigger = screen.getByRole('button', {name: 'Trigger'});
+    expect(trigger.getAttribute('aria-describedby')).toBe(layer.id);
+  });
+
   it('calls onOpenChange(true) when shown via hover', async () => {
     const onOpenChange = vi.fn();
     render(

package/src/Tooltip/useTooltip.tsx

@@ -233,9 +233,7 @@ function isFocusable(element: HTMLElement): boolean {
  * {tooltip.renderTooltip('Helpful tooltip text')}
  * ```
  */
-export function useTooltip(
-  options: TooltipOptions = {},
-): TooltipReturn {
+export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
   const {
     placement = 'above',
     alignment = 'center',
@@ -429,6 +427,7 @@ export function useTooltip(
       const renderProps = {
         placement: renderPlacement,
         alignment: props?.alignment ?? alignment,
+        role: 'tooltip',
         xstyle: [popoverXstyle, layerAnimations[renderPlacement]],
         className: themeProps('tooltip').className,
       };

package/src/hooks/useImageMode.test.ts

@@ -0,0 +1,133 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useImageMode.test.ts
+ * @input Uses vitest, @testing-library/react, useImageMode hook
+ * @output Unit tests for useImageMode hook
+ * @position Testing; validates useImageMode.ts pixel-sampling + CORS behavior
+ *
+ * SYNC: When useImageMode.ts changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {renderHook, waitFor, act} from '@testing-library/react';
+import {useImageMode} from './useImageMode';
+
+// jsdom has no fetch/createImageBitmap/OffscreenCanvas — stub them per test so
+// we can exercise the sampling path and the cross-origin failure path.
+
+/** Fill the sampled canvas with a flat RGB so perceptualLightness is deterministic. */
+function stubSamplingPipeline(rgb: [number, number, number]) {
+  // fetch resolves to a blob (same-origin / CORS-enabled image)
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async () => ({blob: async () => ({}) as Blob})),
+  );
+  vi.stubGlobal(
+    'createImageBitmap',
+    vi.fn(async () => ({width: 100, height: 100}) as ImageBitmap),
+  );
+  const [r, g, b] = rgb;
+  class FakeOffscreenCanvas {
+    constructor(
+      public width: number,
+      public height: number,
+    ) {}
+    getContext() {
+      return {
+        drawImage: vi.fn(),
+        getImageData: (_x: number, _y: number, w: number, h: number) => {
+          const data = new Uint8ClampedArray(w * h * 4);
+          for (let i = 0; i < data.length; i += 4) {
+            data[i] = r;
+            data[i + 1] = g;
+            data[i + 2] = b;
+            data[i + 3] = 255;
+          }
+          return {data};
+        },
+      };
+    }
+  }
+  vi.stubGlobal('OffscreenCanvas', FakeOffscreenCanvas);
+}
+
+/** Simulate a cross-origin image with no CORS headers: fetch rejects. */
+function stubCorsBlockedFetch() {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async () => {
+      throw new TypeError(
+        'Failed to fetch: No Access-Control-Allow-Origin header',
+      );
+    }),
+  );
+  vi.stubGlobal('createImageBitmap', vi.fn());
+  vi.stubGlobal('OffscreenCanvas', class {});
+}
+
+describe('useImageMode', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('returns the fallback while no src is provided', () => {
+    const {result} = renderHook(() => useImageMode(null, {fallback: 'dark'}));
+    expect(result.current).toBe('dark');
+  });
+
+  it('samples a dark image and reports "dark"', async () => {
+    stubSamplingPipeline([10, 10, 10]);
+    const {result} = renderHook(() =>
+      useImageMode('data:image/png;base64,AAAA'),
+    );
+    await waitFor(() => expect(result.current).toBe('dark'));
+  });
+
+  it('samples a light image and reports "light"', async () => {
+    stubSamplingPipeline([240, 240, 240]);
+    const {result} = renderHook(() =>
+      useImageMode('data:image/png;base64,AAAA'),
+    );
+    await waitFor(() => expect(result.current).toBe('light'));
+  });
+
+  // ── Reproduction for BB-001 (cluster C6) ────────────────────────────────
+  // A cross-origin image with no `Access-Control-Allow-Origin` header cannot be
+  // fetched with `mode: 'cors'`, so the APCA sampling pipeline never runs and the
+  // hook silently stays on its fallback. This is why image-backed Thumbnail
+  // overlay/remove-button contrast is unreliable for hosted demo examples that
+  // point `src` at a non-CORS CDN URL.
+  it('stays on fallback when a cross-origin image cannot be sampled (CORS)', async () => {
+    stubCorsBlockedFetch();
+    const {result} = renderHook(() =>
+      useImageMode(
+        'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png',
+        {fallback: null},
+      ),
+    );
+    // Give the rejected fetch + state update a chance to flush.
+    await act(async () => {
+      await new Promise(r => setTimeout(r, 0));
+    });
+    expect(result.current).toBeNull();
+  });
+
+  it('requests the image with CORS mode (the constraint that fails for non-CORS hosts)', async () => {
+    const fetchSpy = vi.fn(async () => {
+      throw new TypeError('CORS');
+    });
+    vi.stubGlobal('fetch', fetchSpy);
+    vi.stubGlobal('createImageBitmap', vi.fn());
+    vi.stubGlobal('OffscreenCanvas', class {});
+    renderHook(() => useImageMode('https://cross-origin.example/x.png'));
+    await waitFor(() => expect(fetchSpy).toHaveBeenCalled());
+    expect(fetchSpy).toHaveBeenCalledWith(
+      'https://cross-origin.example/x.png',
+      {mode: 'cors'},
+    );
+  });
+});

package/src/theme/derivedVarRegistry.test.ts

@@ -64,6 +64,10 @@ const STRUCTURAL_VARS = new Set([
   '--indicator-color',
   '--indicator-width',
   '--table-resize-height',
+  // sticky-columns plugin: opaque backdrop (overridable) + the row overlay it
+  // replays on pinned cells. Structural/runtime, not themeable design tokens.
+  '--table-sticky-background',
+  '--table-row-overlay',
   '--separator-display',
   '--astryx-section-padding',
 ]);

package/src/theme/generateThemeRules.test.ts

@@ -101,7 +101,9 @@ describe('generateThemeRules', () => {
 
   it('includes .astryx-heading.level-* rules for all 6 levels', () => {
     for (let level = 1; level <= 6; level++) {
-      const rule = rules.find(r => r.includes(`.astryx-heading.level-${level}`));
+      const rule = rules.find(r =>
+        r.includes(`.astryx-heading.level-${level}`),
+      );
       expect(rule).toBeDefined();
       expect(rule).toContain('font-family');
       expect(rule).toContain(`var(--text-heading-${level}-size)`);
@@ -137,9 +139,7 @@ describe('generateThemeRules', () => {
     });
     const pseudoRules = generateThemeRules(pseudoTheme);
     expect(
-      pseudoRules.some(rule =>
-        rule.includes('.astryx-button:hover'),
-      ),
+      pseudoRules.some(rule => rule.includes('.astryx-button:hover')),
     ).toBe(true);
   });
 
@@ -186,7 +186,8 @@ describe('generateThemeRules', () => {
     expect(rules.some(r => r.includes('.astryx-text.secondary'))).toBe(true);
     expect(rules.some(r => r.includes('.astryx-heading.primary'))).toBe(true);
     expect(rules.some(r => r.includes('.astryx-heading.disabled'))).toBe(true);
-    expect(rules.some(r => r.includes('.astryx-text.active'))).toBe(true);
+    expect(rules.some(r => r.includes('.astryx-text.active'))).toBe(false);
+    expect(rules.some(r => r.includes('.astryx-text.accent'))).toBe(true);
   });
 
   // --- Consistency ---
@@ -194,9 +195,7 @@ describe('generateThemeRules', () => {
   it('generateThemeCSS returns prose and component blocks with @scope', () => {
     const {prose, component} = generateThemeCSS(theme);
     const combined = prose + component;
-    expect(combined).toContain(
-      '@scope ([data-astryx-theme="default"])',
-    );
+    expect(combined).toContain('@scope ([data-astryx-theme="default"])');
     expect(combined).toContain('to ([data-astryx-theme])');
     // Every rule from generateThemeRules should appear in one of the blocks
     for (const rule of rules) {

package/src/theme/generateThemeRules.ts

@@ -472,7 +472,7 @@ function generateColorOverrides(
     secondary: 'var(--color-text-secondary)',
     disabled: 'var(--color-text-disabled)',
     placeholder: 'var(--color-text-secondary)',
-    active: 'var(--color-accent)',
+    accent: 'var(--color-text-accent)',
   };
 
   const touchesText = 'text' in components;

package/src/theme/syntax/SyntaxTheme.tsx

@@ -8,7 +8,7 @@
  * @output SyntaxTheme provider, useSyntaxTheme hook
  * @position Provider component; wraps code surfaces to apply syntax coloring
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 
 import React, {createContext, use, useMemo} from 'react';

package/src/theme/syntax/defineSyntaxTheme.ts

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-"use strict";
+'use strict';
 
 /**
  * @file defineSyntaxTheme.ts
@@ -8,7 +8,7 @@
  * @output defineSyntaxTheme, SyntaxTheme, syntaxThemeStyle
  * @position Syntax theme definition API; consumed by presets, SyntaxTheme, defineTheme
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 
 import {syntaxTokenDefaults, type SyntaxTokenName} from './tokens';
@@ -41,7 +41,10 @@ export type SyntaxThemeTokenKey =
 export type SyntaxTokenValue = string | [light: string, dark: string];
 
 /** Token map for defineSyntaxTheme input — values can be strings or tuples. */
-export type SyntaxThemeTokenInput = Record<SyntaxThemeTokenKey, SyntaxTokenValue>;
+export type SyntaxThemeTokenInput = Record<
+  SyntaxThemeTokenKey,
+  SyntaxTokenValue
+>;
 
 /** Resolved token map — all values are CSS strings (tuples resolved to light-dark()). */
 export type SyntaxThemeTokenMap = Record<SyntaxThemeTokenKey, string>;
@@ -73,8 +76,9 @@ function toCSSProperty(key: SyntaxThemeTokenKey): SyntaxTokenName {
 }
 
 /** All valid human-readable token keys, derived from the defaults. */
-export const ALL_SYNTAX_KEYS: SyntaxThemeTokenKey[] = Object.keys(syntaxTokenDefaults)
-  .map(k => k.replace(CSS_PREFIX, '') as SyntaxThemeTokenKey);
+export const ALL_SYNTAX_KEYS: SyntaxThemeTokenKey[] = Object.keys(
+  syntaxTokenDefaults,
+).map(k => k.replace(CSS_PREFIX, '') as SyntaxThemeTokenKey);
 
 // =============================================================================
 // Helpers
@@ -130,12 +134,17 @@ export function resolveSyntaxTokenForMode(
  *   },
  * });
  */
-export function defineSyntaxTheme(input: SyntaxThemeInput): SyntaxThemeDefinition {
+export function defineSyntaxTheme(
+  input: SyntaxThemeInput,
+): SyntaxThemeDefinition {
   const missing = ALL_SYNTAX_KEYS.filter(key => !(key in input.tokens));
   if (missing.length > 0) {
     console.warn(
-      '[Astryx] defineSyntaxTheme("' + input.name + '"): missing tokens: ' +
-        missing.join(', ') + '. All 14 syntax tokens are required.',
+      '[Astryx] defineSyntaxTheme("' +
+        input.name +
+        '"): missing tokens: ' +
+        missing.join(', ') +
+        '. All 14 syntax tokens are required.',
     );
   }
 
@@ -169,7 +178,7 @@ export function syntaxThemeStyle(
 
 /** Convert a syntax theme to CSS declarations (no selector wrapper). */
 export function syntaxThemeToCSS(theme: SyntaxThemeDefinition): string {
-  return ALL_SYNTAX_KEYS
-    .map(key => toCSSProperty(key) + ': ' + theme.tokens[key] + ';')
-    .join('\n  ');
+  return ALL_SYNTAX_KEYS.map(
+    key => toCSSProperty(key) + ': ' + theme.tokens[key] + ';',
+  ).join('\n  ');
 }

package/src/theme/syntax/presets.ts

@@ -8,10 +8,13 @@
  * All original themes are MIT licensed. Only color values are extracted.
  * See THIRD_PARTY_LICENSES.md for full attribution.
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 
-import {defineSyntaxTheme, type SyntaxThemeDefinition} from './defineSyntaxTheme';
+import {
+  defineSyntaxTheme,
+  type SyntaxThemeDefinition,
+} from './defineSyntaxTheme';
 
 /** One Dark Pro (Binaryify) — MIT */
 export const oneDarkPro: SyntaxThemeDefinition = defineSyntaxTheme({

package/src/theme/syntax/tokens.ts

@@ -16,7 +16,7 @@
  * 14-token architecture validated against 11 community code themes.
  * All themes map cleanly to these 14 slots.
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 
 export const syntaxTokenDefaults = {