@astryxdesign/core 0.6.2 → 0.6.3-canary.01fa439

package/src/hooks/useScrollableArea.ts

@@ -4,8 +4,8 @@
 
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -26,6 +26,7 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
+import {attachScrollKeyboardDelegation} from './scrollKeyboardDelegation';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 import {mergeProps} from '../utils/mergeProps';
 import {mergeRefs} from '../utils/mergeRefs';
@@ -48,7 +49,12 @@ export type ScrollStickyContainment = 'whenScrollable' | 'always';
 
 export type ScrollKeyboardAccess =
   | {owner: 'content'}
-  | {owner: 'viewport'; label: string; role?: 'group' | 'region'};
+  | {owner: 'viewport'; label: string; role?: 'group' | 'region'}
+  | {
+      owner: 'contentOrViewport';
+      label: string;
+      role?: 'group' | 'region';
+    };
 
 export interface ScrollAxisState {
   isScrollable: boolean;
@@ -285,6 +291,8 @@ export function useScrollableArea({
     content.addEventListener('transitionend', scheduleMeasure);
     content.addEventListener('animationend', scheduleMeasure);
 
+    // Geometry invalidation is independent of keyboard eligibility. The latter
+    // is inspected only on native keyboard entry, never by these observers.
     const mutationObserver =
       typeof MutationObserver === 'undefined'
         ? null
@@ -346,6 +354,20 @@ export function useScrollableArea({
     [axis, measured],
   );
 
+  const hasEffectiveAxis =
+    state.inline.isScrollable || state.block.isScrollable;
+  useIsomorphicLayoutEffect(() => {
+    if (
+      keyboardAccess.owner !== 'contentOrViewport' ||
+      !hasEffectiveAxis ||
+      viewport == null ||
+      content == null
+    ) {
+      return;
+    }
+    return attachScrollKeyboardDelegation(viewport, content);
+  }, [content, hasEffectiveAxis, keyboardAccess.owner, viewport]);
+
   const getViewportProps = useCallback(
     <E extends HTMLElement>(
       props: ScrollableElementProps<E> = {},
@@ -385,8 +407,9 @@ export function useScrollableArea({
           ),
         ),
       ) as ScrollableElementProps<E>;
+      const viewportIsKeyboardOwner = keyboardAccess.owner !== 'content';
       const keepsProgrammaticFocus =
-        !hasEffectiveAxis &&
+        (!viewportIsKeyboardOwner || !hasEffectiveAxis) &&
         viewport != null &&
         typeof document !== 'undefined' &&
         document.activeElement === viewport;
@@ -409,15 +432,16 @@ export function useScrollableArea({
       }
 
       const keyboardProps =
-        keyboardAccess.owner === 'viewport'
+        keyboardAccess.owner !== 'content'
           ? {
               role: keyboardAccess.role ?? 'group',
               'aria-label': keyboardAccess.label,
-              tabIndex: hasEffectiveAxis
-                ? 0
-                : keepsProgrammaticFocus
-                  ? -1
-                  : undefined,
+              tabIndex:
+                viewportIsKeyboardOwner && hasEffectiveAxis
+                  ? 0
+                  : keepsProgrammaticFocus
+                    ? -1
+                    : undefined,
             }
           : {};
 

package/src/inputFontFloor.test.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file inputFontFloor.test.ts
+ * @input Uses node:fs and node:path to read the text-control sources
+ * @output Invariants for the 16px input floor shared by every text control
+ * @position Family-wide source test, in the source-reading style of
+ *   reset.test.ts. jsdom's CSSOM drops declarations nested inside @supports,
+ *   so the iOS branch cannot be asserted against injected rules — the
+ *   runtime half (no bare coarse-pointer floor) lives in TextInput.test.tsx.
+ */
+
+import {readFileSync, readdirSync} from 'node:fs';
+import path from 'node:path';
+
+import {describe, expect, it} from 'vitest';
+
+/**
+ * Every control that floors its text to 16px. iOS Safari zooms the page when
+ * a focused control renders under 16px; no other coarse-pointer browser does.
+ * `-webkit-touch-callout` is implemented by iOS WebKit alone, so each floor
+ * nests `@supports (-webkit-touch-callout: none)` inside the coarse-pointer
+ * query: iPhones and iPads keep the zoom guard, while Android and touch
+ * laptops keep the theme's own type scale instead of an inflated 16px.
+ */
+const FLOORED_CONTROLS = [
+  'Chat/ChatComposerInput.tsx',
+  'CommandPalette/CommandPaletteInput.tsx',
+  'ComplexSelector/ComplexSelector.tsx',
+  'DateInput/DateInput.tsx',
+  'DateInput/NativeDateField.tsx',
+  'DateInput/TouchDateField.tsx',
+  'DateRangeInput/DateRangeInput.tsx',
+  'DateTimeInput/DateTimeInput.tsx',
+  'DateTimeInput/TouchDateTimeField.tsx',
+  'DateTimeInput/nativePickerSegmentStyles.ts',
+  'Field/PanelSearchInput.tsx',
+  'FileInput/FileInput.tsx',
+  'NumberInput/NumberInput.tsx',
+  'Selector/Selector.tsx',
+  'TextArea/TextArea.tsx',
+  'TextInput/TextInput.tsx',
+  'TimeInput/TimeInput.tsx',
+  'Typeahead/BaseTypeahead.tsx',
+  // The rich-text package carries the same floor; its path is relative to
+  // packages/core/src.
+  '../../richtext/src/RichTextEditor.tsx',
+];
+
+/** A font floor applied to every coarse pointer, iOS or not. */
+const BARE_COARSE_FLOOR = `'@media (pointer: coarse)': \`max(1rem`;
+
+/** The same floor, gated to iOS WebKit inside the coarse-pointer query. */
+const IOS_GATED_FLOOR =
+  /'@media \(pointer: coarse\)': \{\s*'@supports \(-webkit-touch-callout: none\)': `max\(1rem, \$\{typeScaleVars\['--text-(?:body|label)-size'\]\}\)`/;
+
+/** Collect every non-test component source under `dir`, recursively. */
+function componentSources(dir: string): string[] {
+  const SOURCE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx'];
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      out.push(...componentSources(full));
+    } else if (
+      SOURCE_EXTENSIONS.some(ext => entry.name.endsWith(ext)) &&
+      !entry.name.endsWith('.test.ts') &&
+      !entry.name.endsWith('.test.tsx') &&
+      !entry.name.endsWith('.doc.mjs')
+    ) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+describe('the 16px input floor', () => {
+  it('gates every floored text control to iOS alone', () => {
+    // Guards the loop below against the list silently emptying out.
+    expect(FLOORED_CONTROLS.length).toBeGreaterThanOrEqual(18);
+    for (const file of FLOORED_CONTROLS) {
+      const source = readFileSync(path.resolve(__dirname, file), 'utf8');
+      expect(source, file).toMatch(IOS_GATED_FLOOR);
+      expect(source, file).not.toContain(BARE_COARSE_FLOOR);
+    }
+  });
+
+  it('leaves no bare coarse-pointer font floor anywhere in core or richtext', () => {
+    // Catches a new (or renamed) control reintroducing the ungated floor,
+    // wherever it lands — the list above only knows the current family. The
+    // rich-text package carries the same floor, so it is scanned too.
+    const scanRoots = [
+      __dirname,
+      path.resolve(__dirname, '../../richtext/src'),
+    ];
+    const offenders = scanRoots
+      .flatMap(root => componentSources(root))
+      .map(file => ({
+        file,
+        source: readFileSync(file, 'utf8'),
+      }))
+      .filter(({source}) => source.includes(BARE_COARSE_FLOOR))
+      .map(({file}) => path.relative(__dirname, file));
+    expect(offenders).toEqual([]);
+  });
+});

package/src/tailwind-theme.css

@@ -182,12 +182,6 @@
   --text-4xl: var(--font-size-4xl);
   --text-5xl: var(--font-size-5xl);
 
-  /* --- Font weights --- */
-  --font-weight-normal: var(--font-weight-normal);
-  --font-weight-medium: var(--font-weight-medium);
-  --font-weight-semibold: var(--font-weight-semibold);
-  --font-weight-bold: var(--font-weight-bold);
-
   /* =========================================================================
    * Border radius
    *

package/src/theme/generateThemeRules.test.ts

@@ -276,6 +276,36 @@ describe('generateThemeRules', () => {
     expect(rules.some(r => r.includes(':where(hr)'))).toBe(true);
   });
 
+  it('applies the theme body font to the scope root', () => {
+    // Components styled with `font-family: inherit` (SideNav items, Buttons)
+    // resolve against this; without it they fall back to the browser default
+    // serif since nothing else sets a page font.
+    const fontTheme = defineTheme({
+      name: 'with-body-font',
+      typography: {body: {family: 'Figtree', fallbacks: 'sans-serif'}},
+      tokens: {},
+      components: {},
+    });
+    const fontRules = generateThemeRules(fontTheme);
+    const fontRule = fontRules.find(
+      r =>
+        r.includes(':scope') &&
+        r.includes('font-family: var(--font-family-body)'),
+    );
+    expect(fontRule).toBeDefined();
+    expect(fontRule).toBe('  :scope {\n    font-family: var(--font-family-body);\n  }');
+  });
+
+  it('emits no scope font rule when the theme declares no body font', () => {
+    // A bare theme contributes no scope rules of its own.
+    const fontRule = rules.find(
+      r =>
+        r.includes(':scope') &&
+        r.includes('font-family: var(--font-family-body)'),
+    );
+    expect(fontRule).toBeUndefined();
+  });
+
   // --- Prop-level color overrides ---
 
   it('includes color prop overrides for text and heading', () => {

package/src/theme/generateThemeRules.ts

@@ -414,6 +414,16 @@ export function generateThemeRules(theme: ThemeRuleSource): string[] {
     parts.push(`  :scope {\n${declarations}\n  }`);
   }
 
+  // 1b. Base font — apply the theme's declared body font to the scope root.
+  // Components styled with `font-family: inherit` (SideNav items, Buttons)
+  // otherwise resolve against the browser default serif, since nothing else
+  // 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 (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) {

package/src/utils/interactionOverlay.stylex.ts

@@ -10,6 +10,11 @@
  * @output Exports reusable background-color and background-image state styles
  * @position Internal styling utility for interactive core surfaces
  *
+ * Every surface that paints a press composes one of these (or carries its own
+ * `:active` rule), so a change to how the system answers a press is made here
+ * once. `pressedBackgroundColor` is the press without the hover, for controls
+ * whose hover is a colour or nothing.
+ *
  * Keep the enabled guard outside the individual states. StyleX assigns an
  * extra priority bucket (and generated selector specificity) to media-nested
  * rules. Repeating `:active` inside the hover-capable branch gives hover and
@@ -71,4 +76,19 @@ export const interactionOverlayStyles = stylex.create({
       },
     },
   },
+  /**
+   * The pressed arm alone, for a control whose hover answer is its own — a
+   * text link changes colour, a disclosure row has none — so a press paints
+   * the system's pressed overlay without adding a hover surface the control
+   * never had. Same enabled guard as the paired states above.
+   */
+  pressedBackgroundColor: {
+    backgroundColor: {
+      default: null,
+      [ENABLED]: {
+        default: null,
+        ':active': colorVars['--color-overlay-pressed'],
+      },
+    },
+  },
 });