@astryxdesign/core 0.6.2 → 0.6.3-canary.039a67e

package/src/theme/themeAdaptations.ts

@@ -9,8 +9,10 @@
  * Adaptations are deliberately closed and ordered. Width points are fixed names,
  * sparse rules and reserved token routing are rejected during normalization,
  * condition fields are ANDed, and rule order is the precedence model: every
- * matching rule writes after the root theme and later matching writes win. Token
- * cycles are judged only after each reachable ordered cascade is complete.
+ * matching rule writes after the root theme and later matching writes win.
+ * Invariant type-scale component defaults already declared at root are omitted;
+ * authored rule leaves and generated token writes retain their cascade order.
+ * Token cycles are judged after each reachable ordered cascade is complete.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/defineTheme.ts (`DefineThemeInput.adaptations`)
@@ -888,6 +890,42 @@ export function resolveThemeGenerativeAxes(
   };
 }
 
+/**
+ * Type-scale component generation is invariant var() wiring, not scale values.
+ * Keep root declarations (including authored pins) in the root cascade instead
+ * of resetting them in a rule that only changes tokens. Fill missing root paths
+ * for rule-only scales, and retain every authored rule leaf, even when it equals
+ * the root: that write may intentionally undo an earlier matching rule.
+ *
+ * SYNC: expandTypeScale.ts (generateTypeScaleComponents)
+ */
+function omitRootTypeScaleDefaults(
+  resolved: ComponentStyleMap | undefined,
+  root: ComponentStyleMap | undefined,
+  authored: ComponentStyleMap | undefined,
+): ComponentStyleMap | undefined {
+  if (!resolved || !root) {
+    return resolved;
+  }
+
+  const components: ComponentStyleMap = {};
+  for (const [component, rules] of Object.entries(resolved)) {
+    for (const [key, styles] of Object.entries(rules)) {
+      const writes = Object.fromEntries(
+        Object.entries(styles).filter(
+          ([property]) =>
+            root[component]?.[key]?.[property] === undefined ||
+            Object.hasOwn(authored?.[component]?.[key] ?? {}, property),
+        ),
+      );
+      if (Object.keys(writes).length > 0) {
+        (components[component] ??= {})[key] = writes;
+      }
+    }
+  }
+  return Object.keys(components).length > 0 ? components : undefined;
+}
+
 /** Lower ordered normalized rules to concrete CSS writes. */
 export function resolveThemeAdaptationRules(
   themeName: string,
@@ -895,14 +933,16 @@ export function resolveThemeAdaptationRules(
   axes: ThemeGenerativeAxes,
   rootTokens: Record<string, string>,
   rootLocalTokens: Record<string, string> | undefined,
+  rootComponents?: ComponentStyleMap,
 ): ResolvedThemeAdaptationRule[] | undefined {
   if (adaptations.rules.length === 0) {
     return undefined;
   }
 
   const resolvedRules = adaptations.rules.map((rule, index) => {
+    const input = valueToThemeInput(themeName, index, rule.value, axes);
     const resolved = resolveThemeValues(
-      valueToThemeInput(themeName, index, rule.value, axes),
+      input,
       undefined,
       // Authored adaptation values are a new surface with no legacy
       // acceptance to preserve, so a malformed token is rejected here rather
@@ -951,7 +991,13 @@ export function resolveThemeAdaptationRules(
       ),
       tokens: resolved.tokens,
       localTokens,
-      components: resolved.components,
+      components: input.typography?.scale
+        ? omitRootTypeScaleDefaults(
+            resolved.components,
+            rootComponents,
+            rule.value.components,
+          )
+        : resolved.components,
     };
   });
 

package/src/theme/tokenValueCompat.test.ts

@@ -22,7 +22,7 @@
  */
 
 import {describe, expect, it} from 'vitest';
-import {defineTheme} from './defineTheme';
+import {defineTheme, generateThemeCSS} from './defineTheme';
 import {resolveTokenValue} from './resolveThemeValues';
 
 /** Exactly what the pre-extraction implementation did with each shape. */
@@ -43,6 +43,9 @@ describe('root token values keep their historical acceptance', () => {
     });
 
     expect(theme.tokens['--color-background-body']).toBe(expected);
+    expect(generateThemeCSS(theme).component).toContain(
+      `--color-background-body: ${String(expected)};`,
+    );
   });
 
   it('still resolves the documented shapes', () => {

package/src/utils/inputPresentation.ts

@@ -0,0 +1,143 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file inputPresentation.ts
+ * @input A presentation policy, the deprecated nativePicker value, and pointer type
+ * @output The resolved picker surface for DateInput, DateTimeInput, and TimeInput
+ * @position Shared presentation vocabulary owned by spec:AST-043
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /docs/specs/AST-043-input-presentation/spec.md (FR1–FR3 tables)
+ * - /packages/core/src/DateInput/DateInput.tsx
+ * - /packages/core/src/DateTimeInput/DateTimeInput.tsx
+ * - /packages/core/src/TimeInput/TimeInput.tsx
+ */
+
+/** Picker-surface policy for date/time inputs (`spec:AST-043` FR1). */
+export type InputPresentation =
+  | 'text-input'
+  | 'popover'
+  | 'bottom-sheet'
+  | 'native'
+  | 'adaptive-bottom-sheet'
+  | 'adaptive-native';
+
+/** `presentation` for components without a text-only surface: all except `TimeInput` exclude `text-input` (AST-043). */
+export type PickerPresentation = Exclude<InputPresentation, 'text-input'>;
+
+/** The surface a resolved `InputPresentation` actually renders. */
+export type InputPresentationSurface =
+  'text-input' | 'desktop' | 'sheet' | 'native';
+
+/** The surface a resolved `PickerPresentation` renders: one where a picker opens. */
+export type PickerPresentationSurface = Exclude<
+  InputPresentationSurface,
+  'text-input'
+>;
+
+/** Deprecated picker policy (`spec:AST-043` FR3). */
+export type LegacyNativePicker = 'touch' | 'always' | 'never';
+
+/**
+ * Typed as the narrower policy because the default opens a picker for every
+ * component; it is still a valid `InputPresentation`.
+ */
+export const DEFAULT_INPUT_PRESENTATION: PickerPresentation = 'adaptive-native';
+
+/**
+ * Map a deprecated `nativePicker` value to its `presentation` equivalent for
+ * a component whose every surface opens a picker (`DateInput`,
+ * `DateTimeInput`). Their released `never` was Astryx's own pickers on every
+ * pointer, so no value maps to `text-input` — which is what lets the return
+ * type exclude it.
+ */
+export function pickerPresentationFromNativePicker(
+  nativePicker: LegacyNativePicker,
+): PickerPresentation {
+  switch (nativePicker) {
+    case 'touch':
+      return 'adaptive-native';
+    case 'always':
+      return 'native';
+    case 'never':
+      return 'adaptive-bottom-sheet';
+  }
+}
+
+/**
+ * Map a deprecated `nativePicker` value to its `presentation` equivalent.
+ * `TimeInput` differs: its released `never` is the typed field on every
+ * pointer, so it maps to `text-input`, not a sheet policy.
+ */
+export function presentationFromNativePicker(
+  nativePicker: LegacyNativePicker,
+  component: 'date' | 'time',
+): InputPresentation {
+  if (component === 'time' && nativePicker === 'never') {
+    return 'text-input';
+  }
+  return pickerPresentationFromNativePicker(nativePicker);
+}
+
+/**
+ * The effective picker-only policy: explicit `presentation` wins over the
+ * deprecated prop. The narrow twin of {@link effectiveInputPresentation} for
+ * `DateInput` and `DateTimeInput`, whose `presentation` cannot be
+ * `text-input`.
+ */
+export function effectivePickerPresentation(
+  presentation: PickerPresentation | undefined,
+  nativePicker: LegacyNativePicker | undefined,
+): PickerPresentation {
+  if (presentation !== undefined) {
+    return presentation;
+  }
+  if (nativePicker !== undefined) {
+    return pickerPresentationFromNativePicker(nativePicker);
+  }
+  return DEFAULT_INPUT_PRESENTATION;
+}
+
+/** The effective policy: explicit `presentation` wins over the deprecated prop. */
+export function effectiveInputPresentation(
+  presentation: InputPresentation | undefined,
+  nativePicker: LegacyNativePicker | undefined,
+  component: 'date' | 'time',
+): InputPresentation {
+  if (presentation !== undefined) {
+    return presentation;
+  }
+  if (nativePicker !== undefined) {
+    return presentationFromNativePicker(nativePicker, component);
+  }
+  return DEFAULT_INPUT_PRESENTATION;
+}
+
+/** Resolve a picker-only policy to the surface rendered for the current pointer. */
+export function resolvePickerPresentation(
+  presentation: PickerPresentation,
+  isCoarsePointer: boolean,
+): PickerPresentationSurface {
+  switch (presentation) {
+    case 'popover':
+      return 'desktop';
+    case 'bottom-sheet':
+      return 'sheet';
+    case 'native':
+      return 'native';
+    case 'adaptive-bottom-sheet':
+      return isCoarsePointer ? 'sheet' : 'desktop';
+    case 'adaptive-native':
+      return isCoarsePointer ? 'native' : 'desktop';
+  }
+}
+
+/** Resolve a policy to the surface rendered for the current pointer. */
+export function resolveInputPresentation(
+  presentation: InputPresentation,
+  isCoarsePointer: boolean,
+): InputPresentationSurface {
+  return presentation === 'text-input'
+    ? 'text-input'
+    : resolvePickerPresentation(presentation, isCoarsePointer);
+}

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'],
+      },
+    },
+  },
 });

package/src/utils/safeUrl.test.ts

@@ -0,0 +1,88 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {isSafeDestination, isSafeUrl, sanitizeUrl} from './safeUrl';
+
+// Expectations come from the navigation contract, not another policy helper.
+const accepted = [
+  'https://example.com/a?b=c#d',
+  'http://example.com',
+  '//example.com/protocol-relative',
+  '/relative/path',
+  'relative/path',
+  '#fragment',
+  'mailto:a@example.com',
+  'tel:+1234567890',
+  'custom:open/document',
+  'data:image/png;base64,iVBORw0KGgo=',
+  'data:text/plain,download',
+];
+const rejected = [
+  'javascript:alert(1)',
+  'JaVaScRiPt:alert(1)',
+  '  javascript:alert(1)',
+  'vbscript:MsgBox(1)',
+  'data:text/html,<script>alert(1)</script>',
+  'DATA:TEXT/HTML;base64,PHNjcmlwdD4=',
+  'java\tscript:alert(1)',
+  'java\nscript:alert(1)',
+  '\x00javascript:alert(1)',
+  'java\x7fscript:alert(1)',
+];
+
+describe('navigation strings', () => {
+  it.each(accepted)('accepts %s', url => {
+    expect(isSafeUrl(url)).toBe(true);
+    expect(isSafeDestination(url)).toBe(true);
+    expect(sanitizeUrl(url)).toBe(url);
+  });
+  it.each(rejected)('rejects %s', url => {
+    expect(isSafeUrl(url)).toBe(false);
+    expect(isSafeDestination(url)).toBe(false);
+    expect(sanitizeUrl(url)).toBeNull();
+  });
+  it('normalizes accepted strings only when requested', () => {
+    expect(sanitizeUrl('  /docs\n')).toBe('/docs');
+    expect(sanitizeUrl('/do\x00cs')).toBe('/docs');
+  });
+});
+
+describe('structured destinations', () => {
+  it.each([
+    {pathname: '/docs', search: '?q=1', hash: '#a'},
+    {href: 'https://example.com'},
+    {protocol: 'https:', hostname: 'example.com', pathname: '/docs'},
+    {protocol: 'custom', pathname: 'document'},
+    {protocol: 'mailto:', pathname: 'a@example.com'},
+    {protocol: 'data:', pathname: 'image/png;base64,aA=='},
+    {search: '?page=2'},
+    {hash: '#section'},
+    {},
+    new URL('https://example.com/docs'),
+    undefined,
+    null,
+  ])('accepts supported destination %j', destination => {
+    expect(isSafeDestination(destination)).toBe(true);
+  });
+  it.each([
+    {pathname: 'javascript:alert(1)'},
+    {pathname: 'java\x00script:alert(1)'},
+    {href: 'vbscript:MsgBox(1)'},
+    {pathname: '/ok', href: 'javascript:1'},
+    {protocol: 'javascript:', pathname: 'alert(1)'},
+    {protocol: 'javascript', pathname: 'alert(1)'},
+    {protocol: ' JaVa\tsCrIpT ', pathname: 'alert(1)'},
+    {protocol: 'vbscript', pathname: 'MsgBox(1)'},
+    {protocol: 'data:', pathname: 'text/html,<b>x</b>'},
+    {protocol: 'data', pathname: 'TEXT/HTML;base64,PGI+eDwvYj4='},
+    {protocol: 'data:', host: 'text/', pathname: 'html,<b>x</b>'},
+    {protocol: 'data:', hostname: 'text/html,<b>x</b>'},
+    {href: '/safe', protocol: 'javascript:'},
+    new URL('javascript:alert(1)'),
+    {pathname: 42},
+    {protocol: {toString: (): string => 'javascript:'}},
+    3,
+  ])('rejects blocked or unsupported destination %j', destination => {
+    expect(isSafeDestination(destination)).toBe(false);
+  });
+});

package/src/utils/safeUrl.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file safeUrl.ts
+ * @input Navigation strings or supported structured router destinations
+ * @output The shared blocked-scheme decision, without rewriting accepted inputs
+ * @position Core navigation policy; embedded-resource policy is separate
+ */
+
+function normalizeUrl(url: string): string {
+  // eslint-disable-next-line no-control-regex -- inspect schemes without browser-ignored controls
+  return url.replace(/[\x00-\x1f\x7f]/g, '').trim();
+}
+
+/** Return a normalized navigation URL, or null for a blocked scheme. */
+export function sanitizeUrl(url: string): string | null {
+  const normalized = normalizeUrl(url);
+  const lower = normalized.toLowerCase();
+  if (
+    lower.startsWith('javascript:') ||
+    lower.startsWith('vbscript:') ||
+    lower.startsWith('data:text/html')
+  ) {
+    return null;
+  }
+  return normalized;
+}
+
+/** Inspect a navigation string without changing the value used by its sink. */
+export function isSafeUrl(url: string): boolean {
+  return sanitizeUrl(url) !== null;
+}
+
+/**
+ * Inspect React Router paths, Next.js URL objects, and URL instances without
+ * serializing or replacing the object handed to the router. Search/query/hash
+ * are route-relative data, not schemes. Absent destinations remain absent.
+ */
+export function isSafeDestination(destination: unknown): boolean {
+  if (destination == null) {
+    return true;
+  }
+  if (typeof destination === 'string') {
+    return isSafeUrl(destination);
+  }
+  if (typeof destination !== 'object') {
+    return false;
+  }
+
+  const {pathname, href, protocol, host, hostname} = destination as {
+    pathname?: unknown;
+    href?: unknown;
+    protocol?: unknown;
+    host?: unknown;
+    hostname?: unknown;
+  };
+  for (const field of [pathname, href, protocol, host, hostname]) {
+    if (field != null && typeof field !== 'string') {
+      return false;
+    }
+  }
+  if (typeof pathname === 'string' && !isSafeUrl(pathname)) {
+    return false;
+  }
+  if (typeof href === 'string' && !isSafeUrl(href)) {
+    return false;
+  }
+  if (typeof protocol === 'string' && protocol !== '') {
+    // URL-object formatters accept a protocol with or without its colon and
+    // can assemble a data media type from the host and pathname fields.
+    const normalizedProtocol = normalizeUrl(protocol);
+    const prefix = normalizedProtocol.endsWith(':')
+      ? normalizedProtocol
+      : `${normalizedProtocol}:`;
+    if (!isSafeUrl(prefix)) {
+      return false;
+    }
+    const body = (host || hostname || '') as string;
+    const path = typeof pathname === 'string' ? pathname : '';
+    if (!isSafeUrl(`${prefix}${body}${path}`)) {
+      return false;
+    }
+  }
+  return true;
+}