@astryxdesign/core 0.4.2 → 0.4.3

package/src/Markdown/parser.ts

@@ -275,7 +275,7 @@ function matchReferenceLink(
       // matches nothing.
       const label = rawLabel === '' ? linkText : rawLabel;
       const href = linkDefs.get(normalizeLinkLabel(label));
-      if (href != null) {
+      if (href != null && isSafeUrl(href)) {
         return {
           node: {type: 'link', href, children: parseInlineImpl(linkText, opts)},
           end: labelClose + 1,
@@ -290,7 +290,7 @@ function matchReferenceLink(
     return null;
   }
   const href = linkDefs.get(normalizeLinkLabel(linkText));
-  if (href == null) {
+  if (href == null || !isSafeUrl(href)) {
     return null;
   }
   return {
@@ -359,6 +359,31 @@ function isWordChar(ch: string | undefined): boolean {
   return /\w/.test(ch);
 }
 
+// ---------------------------------------------------------------------------
+// URL scheme sanitization
+// ---------------------------------------------------------------------------
+
+/**
+ * Reject URLs with dangerous schemes (javascript:, vbscript:, data:) that
+ * could execute arbitrary code when rendered as link hrefs or image srcs.
+ * Returns true if the URL is safe to use, false otherwise.
+ */
+function isSafeUrl(url: string): boolean {
+  // Trim and collapse whitespace/control chars that browsers tolerate but
+  // could bypass a naive prefix check (e.g. "java\nscript:alert(1)").
+  // eslint-disable-next-line no-control-regex -- control chars are the bypass
+  const normalized = url.replace(/[\x00-\x1f\x7f]/g, '').trim();
+  const lower = normalized.toLowerCase();
+  if (
+    lower.startsWith('javascript:') ||
+    lower.startsWith('vbscript:') ||
+    lower.startsWith('data:text/html')
+  ) {
+    return false;
+  }
+  return true;
+}
+
 // ---------------------------------------------------------------------------
 // Inline parser
 // ---------------------------------------------------------------------------
@@ -478,11 +503,17 @@ function parseInlineImpl(text: string, opts: ResolvedOptions): InlineNode[] {
       if (altClose !== -1 && text[altClose + 1] === '(') {
         const srcClose = findClosingParen(text, altClose + 2);
         if (srcClose !== -1) {
-          nodes.push({
-            type: 'image',
-            src: text.slice(altClose + 2, srcClose),
-            alt: text.slice(i + 2, altClose),
-          });
+          const src = text.slice(altClose + 2, srcClose);
+          if (!isSafeUrl(src)) {
+            // Dangerous scheme — emit as plain text.
+            nodes.push({type: 'text', content: text.slice(i, srcClose + 1)});
+          } else {
+            nodes.push({
+              type: 'image',
+              src,
+              alt: text.slice(i + 2, altClose),
+            });
+          }
           i = srcClose + 1;
           continue;
         }
@@ -515,11 +546,17 @@ function parseInlineImpl(text: string, opts: ResolvedOptions): InlineNode[] {
       if (textClose !== -1 && text[textClose + 1] === '(') {
         const urlClose = findClosingParen(text, textClose + 2);
         if (urlClose !== -1) {
-          nodes.push({
-            type: 'link',
-            href: text.slice(textClose + 2, urlClose),
-            children: parseInlineImpl(text.slice(i + 1, textClose), opts),
-          });
+          const href = text.slice(textClose + 2, urlClose);
+          if (!isSafeUrl(href)) {
+            // Dangerous scheme — emit as plain text instead of a link.
+            nodes.push({type: 'text', content: text.slice(i, urlClose + 1)});
+          } else {
+            nodes.push({
+              type: 'link',
+              href,
+              children: parseInlineImpl(text.slice(i + 1, textClose), opts),
+            });
+          }
           i = urlClose + 1;
           continue;
         }
@@ -780,6 +817,10 @@ function scanAutolinksInText(text: string): AutolinkMatch[] {
     let m: RegExpExecArray | null;
     while ((m = re.exec(text)) !== null) {
       const url = m[1];
+      // Skip dangerous URL schemes (javascript:, vbscript:, data:text/html)
+      if (!isSafeUrl(url)) {
+        continue;
+      }
       matches.push({
         start: m.index,
         end: m.index + m[0].length,

package/src/PowerSearch/PowerSearch.test.tsx

@@ -158,6 +158,41 @@ describe('PowerSearch', () => {
     expect(screen.getByRole('combobox')).toHaveFocus();
   });
 
+  describe('token value truncation (#4759)', () => {
+    it('truncates token values by characters, not code units', () => {
+      const truncConfig: PowerSearchConfig = {
+        name: 'trunc',
+        fields: [
+          {
+            key: 'status',
+            label: 'Status',
+            operators: [{key: 'is', label: 'is', value: {type: 'string'}}],
+          },
+        ],
+      };
+      // 14 emoji = 28 code units but 14 user-perceived characters.
+      // adjustedMaxLength = max(15 - 'Status'.length - 'is'.length, 10) = 10,
+      // so the value truncates only past 13 characters, cutting at 10.
+      render(
+        <PowerSearch
+          config={truncConfig}
+          filters={[
+            {
+              field: 'status',
+              operator: 'is',
+              value: {type: 'string', value: '\u{1F600}'.repeat(14)},
+            },
+          ]}
+          onChange={() => {}}
+          maxTokenLength={15}
+        />,
+      );
+      expect(
+        screen.getByText('\u{1F600}'.repeat(10) + '...'),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe('startIcon', () => {
     it('does not render a start icon when omitted', () => {
       render(<PowerSearch config={config} filters={[]} onChange={() => {}} />);
@@ -425,11 +460,15 @@ describe('PowerSearch', () => {
   });
 });
 
-
 describe('PowerSearch statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(
-      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',
@@ -439,7 +478,13 @@ describe('PowerSearch statusVariant forwarding', () => {
 
   it('forwards statusVariant="detached" to the underlying Field status', () => {
     const {container} = render(
-      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',

package/src/PowerSearch/PowerSearch.tsx

@@ -54,6 +54,7 @@ import {formatFilterValue} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
+import {truncateCharacters} from '../utils/characters';
 import {useTranslator} from '../i18n';
 import type {
   PowerSearchConfig,
@@ -117,7 +118,9 @@ const resultCountStyles = stylex.create({
 });
 
 function truncateString(value: string, limit: number): string {
-  return value.length > limit + 3 ? value.slice(0, limit) + '...' : value;
+  // Same semantics as before — strings within limit + 3 pass through, longer
+  // ones cut to limit + '...' — but counted in characters, not code units.
+  return truncateCharacters(value, limit + 3, '...');
 }
 
 function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {

package/src/PowerSearch/formatFilterValue.test.ts

@@ -62,6 +62,28 @@ describe('formatFilterValue', () => {
         'abcde',
       );
     });
+
+    it('truncates by characters, never splitting an emoji (#4759)', () => {
+      // Four surrogate-pair emoji: 8 code units, 4 user-perceived characters.
+      // The exact-string assertion also proves no surrogate pair was split.
+      const out = fmt(
+        {type: 'string'},
+        {type: 'string', value: '\u{1F600}'.repeat(4)},
+        3,
+      );
+      expect(out).toBe('\u{1F600}'.repeat(2) + ELLIPSIS);
+    });
+
+    it('keeps multi-unit characters within maxLength intact (#4759)', () => {
+      // Three emoji are 6 code units but only 3 user-perceived characters.
+      expect(
+        fmt(
+          {type: 'string'},
+          {type: 'string', value: '\u{1F600}'.repeat(3)},
+          3,
+        ),
+      ).toBe('\u{1F600}'.repeat(3));
+    });
   });
 
   describe('integer / float', () => {

package/src/PowerSearch/formatFilterValue.ts

@@ -13,12 +13,10 @@
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {TranslatorFn} from '../i18n';
+import {truncateCharacters} from '../utils/characters';
 
 function truncate(str: string, maxLength: number): string {
-  if (str.length <= maxLength) {
-    return str;
-  }
-  return str.slice(0, maxLength - 1) + '\u2026';
+  return truncateCharacters(str, maxLength);
 }
 
 function formatEnumLabel(

package/src/Table/Table.test.tsx

@@ -95,6 +95,12 @@ describe('columnUtils', () => {
     it('handles single character', () => {
       expect(capitalize('a')).toBe('A');
     });
+
+    it('uppercases an astral-plane letter without splitting it (#4759)', () => {
+      // Deseret 𐐨 (U+10428) uppercases to 𐐀 (U+10400); charAt(0) would grab
+      // half the surrogate pair and leave the string unchanged.
+      expect(capitalize('\u{10428}pple')).toBe('\u{10400}pple');
+    });
   });
 
   describe('generateColumns', () => {

package/src/Table/columnUtils.ts

@@ -13,6 +13,7 @@
 
 import type {CSSProperties, ReactNode} from 'react';
 import type {TableColumn, ProportionalWidth, PixelWidth} from './types';
+import {firstCharacter} from '../utils/characters';
 
 /** Default minimum width (in px) for proportional columns. */
 export const DEFAULT_MIN_COLUMN_WIDTH = 120;
@@ -168,7 +169,8 @@ export function capitalize(str: string): string {
   if (str.length === 0) {
     return str;
   }
-  return str.charAt(0).toUpperCase() + str.slice(1);
+  const first = firstCharacter(str);
+  return first.toUpperCase() + str.slice(first.length);
 }
 
 /**

package/src/TextArea/TextArea.doc.mjs

@@ -105,7 +105,7 @@ export const docs = {
       name: 'maxLength',
       type: 'number',
       description:
-        'Maximum number of characters allowed. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced.',
+        'Maximum number of characters allowed, counted as user-perceived characters — an emoji or flag sequence counts as one. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced. Consumers validating the limit should count with characterCount (exported from the package) so enforcement matches the displayed count.',
     },
     {
       name: 'status',

package/src/TextArea/TextArea.test.tsx

@@ -504,6 +504,33 @@ describe('TextArea', () => {
       expect(screen.getByRole('textbox')).not.toHaveAttribute('maxlength');
     });
 
+    it('counts user-perceived characters, not code units (#4759)', () => {
+      // Two surrogate-pair emoji: 4 code units, but 2 user-perceived characters.
+      render(
+        <TextArea
+          label="Description"
+          value={'\u{1F600}\u{1F600}'}
+          onChange={() => {}}
+          maxLength={5}
+        />,
+      );
+      expect(screen.getByText('2/5')).toBeInTheDocument();
+    });
+
+    it('measures the over-limit state in characters (#4759)', () => {
+      // Three ZWJ family emoji: 33 code units, 3 user-perceived characters.
+      const family = '\u{1F468}‍\u{1F469}‍\u{1F467}‍\u{1F466}';
+      render(
+        <TextArea
+          label="Description"
+          value={family.repeat(3)}
+          onChange={() => {}}
+          maxLength={2}
+        />,
+      );
+      expect(screen.getByText('3/2')).toBeInTheDocument();
+    });
+
     it('counter updates as user types (controlled)', async () => {
       const user = userEvent.setup();
       function Wrapper() {
@@ -570,6 +597,51 @@ describe('TextArea', () => {
       });
     });
 
+    it('announces zone transitions using character counts (#4759)', async () => {
+      function Wrapper() {
+        const [val, setVal] = useState('x'.repeat(7));
+        return (
+          <TextArea
+            label="Description"
+            value={val}
+            onChange={setVal}
+            maxLength={10}
+          />
+        );
+      }
+      render(<Wrapper />);
+      // Appending two emoji makes 9 characters (11 code units): near the limit
+      // with 1 remaining. Code-unit counting would call this over the limit
+      // and announce assertively instead.
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: {value: 'x'.repeat(7) + '\u{1F600}\u{1F600}'},
+      });
+      const politeRegion = () =>
+        document.querySelector('[data-astryx-live-region="polite"]');
+      const assertiveRegion = () =>
+        document.querySelector('[data-astryx-live-region="assertive"]');
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('1 character remaining');
+      });
+      expect(assertiveRegion()).not.toHaveTextContent('over the limit');
+    });
+
+    it('does not flag over-limit while characters fit, even when code units exceed (#4759)', () => {
+      // Three emoji: 6 code units but 3 user-perceived characters — within a
+      // maxLength of 4, so no error state anywhere.
+      render(
+        <TextArea
+          label="Description"
+          value={'\u{1F600}'.repeat(3)}
+          onChange={() => {}}
+          maxLength={4}
+        />,
+      );
+      const counter = screen.getByText('3/4');
+      expect(counter.querySelector('svg')).toBeNull();
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
+    });
+
     it('shows a non-color over-limit indicator icon when exceeded', () => {
       const {container} = render(
         <TextArea

package/src/TextArea/TextArea.tsx

@@ -22,6 +22,7 @@ import {
   useTransition,
   useRef,
   useCallback,
+  useMemo,
   type ChangeEvent,
   type ClipboardEvent,
   type FocusEvent,
@@ -53,6 +54,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {characterCount} from '../utils/characters';
 import {useTranslator} from '../i18n';
 
 const COUNTER_WARNING_THRESHOLD = 0.8;
@@ -312,10 +314,13 @@ export interface TextAreaProps extends Omit<
    */
   onPaste?: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
   /**
-   * Maximum number of characters allowed.
-   * When set, displays a character counter below the textarea.
+   * Maximum number of characters allowed, counted as user-perceived
+   * characters — an emoji or flag sequence counts as one. When set,
+   * displays a character counter below the textarea.
    * Does not enforce the limit natively — the counter shows error styling
-   * when exceeded, and the consumer can validate via onChange.
+   * when exceeded, and the consumer can validate via onChange. Validate with
+   * `characterCount` (exported from this package) rather than `value.length`
+   * so enforcement matches the displayed count.
    */
   maxLength?: number;
   /**
@@ -482,7 +487,11 @@ export function TextArea({
       return;
     }
     const newValue = e.target.value;
-    announceCounter(newValue.length);
+    // Guarded here, not just inside announceCounter, so textareas without a
+    // maxLength never pay for segmenting the whole value on each keystroke.
+    if (maxLength != null) {
+      announceCounter(characterCount(newValue));
+    }
     onChange?.(newValue, e);
     if (changeAction && !e.defaultPrevented) {
       startTransition(async () => {
@@ -492,6 +501,15 @@ export function TextArea({
     }
   };
 
+  // Counter semantics count user-perceived characters, so an emoji or flag
+  // sequence counts as one character, not its code units.
+  // Only measured when a counter exists — segmentation is O(value length),
+  // and memoized so re-renders that keep the same value skip it entirely.
+  const valueLength = useMemo(
+    () => (maxLength != null ? characterCount(optimisticValue) : 0),
+    [maxLength, optimisticValue],
+  );
+
   const effectivelyDisabled = isDisabled || isBusy;
 
   // Focus textarea when clicking anywhere on the wrapper (icons, padding, etc.)
@@ -583,7 +601,7 @@ export function TextArea({
           aria-required={isRequired && !isOptional ? 'true' : undefined}
           aria-invalid={
             status?.type === 'error' ||
-            (maxLength != null && optimisticValue.length > maxLength)
+            (maxLength != null && valueLength > maxLength)
               ? 'true'
               : undefined
           }
@@ -614,15 +632,15 @@ export function TextArea({
             id={counterID}
             {...stylex.props(
               styles.counter,
-              optimisticValue.length > maxLength && styles.counterError,
+              valueLength > maxLength && styles.counterError,
             )}>
-            {optimisticValue.length > maxLength && (
+            {valueLength > maxLength && (
               // Non-color cue so the over-limit state isn't conveyed by the red
               // color alone (WCAG 1.4.1). Decorative — the count text and the
               // live-region announcement carry the meaning.
               <Icon icon="warning" size="sm" />
             )}
-            {optimisticValue.length}/{maxLength}
+            {valueLength}/{maxLength}
           </div>
         )}
       </div>

package/src/TreeList/TreeList.doc.mjs

@@ -24,7 +24,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-tree-list', visualProps: ['density']},
+      {className: 'astryx-tree-list', visualProps: ['density', 'variant']},
       {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
       {className: 'astryx-tree-list-chevron', states: ['state']},
       {className: 'astryx-tree-list-item-label', states: ['selected']},
@@ -104,7 +104,7 @@ export const docsZh = {
   group: 'TreeList',
   theming: {
     targets: [
-      {className: 'astryx-tree-list', visualProps: ['density']},
+      {className: 'astryx-tree-list', visualProps: ['density', 'variant']},
       {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
       {className: 'astryx-tree-list-chevron', states: ['state']},
       {className: 'astryx-tree-list-item-label', states: ['selected']},

package/src/TreeList/TreeList.tsx

@@ -332,7 +332,7 @@ export function TreeList({
       ref={ref}
       data-testid={testId}
       {...mergeProps(
-        themeProps('tree-list', {density}),
+        themeProps('tree-list', {density, variant}),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/theme/defineTheme.test.ts

@@ -2,6 +2,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import type {IconRegistry} from '../Icon/globalIconRegistry';
+import type {DefinedTheme} from './defineTheme';
 import {defineTheme, generateThemeCSS, isDefinedTheme} from './defineTheme';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
@@ -1126,4 +1127,130 @@ describe('defineTheme extends', () => {
       base.tokens['--font-size-base'],
     );
   });
+
+  it('inherits indicators when the child has none', () => {
+    const indicator = (() => null) as unknown as NonNullable<
+      DefinedTheme['indicators']
+    >['check'];
+    const base = defineTheme({name: 'base', indicators: {check: indicator}});
+    const child = defineTheme({name: 'child', extends: base});
+    expect(child.indicators?.check).toBe(indicator);
+  });
+
+  it('inherits onDark token overrides from base theme', () => {
+    const base = defineTheme({
+      name: 'base',
+      onDark: {tokens: {'--color-border': '#ffffff'}},
+    });
+    const child = defineTheme({name: 'child', extends: base});
+    expect(child.__onDark?.tokens['--color-border']).toBe('#ffffff');
+  });
+
+  it('inherits onLight token overrides from base theme', () => {
+    const base = defineTheme({
+      name: 'base',
+      onLight: {tokens: {'--color-border': '#000000'}},
+    });
+    const child = defineTheme({name: 'child', extends: base});
+    expect(child.__onLight?.tokens['--color-border']).toBe('#000000');
+  });
+
+  it('lets the child override an inherited onDark token', () => {
+    const base = defineTheme({
+      name: 'base',
+      onDark: {tokens: {'--color-border': '#ffffff', '--color-track': '#eee'}},
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      onDark: {tokens: {'--color-border': '#cccccc'}},
+    });
+    expect(child.__onDark?.tokens['--color-border']).toBe('#cccccc');
+    expect(child.__onDark?.tokens['--color-track']).toBe('#eee');
+  });
+
+  it('inherits and deep-merges onDark component overrides', () => {
+    const base = defineTheme({
+      name: 'base',
+      onDark: {
+        components: {
+          card: {base: {borderColor: '#fff', backgroundColor: '#111'}},
+          badge: {base: {color: '#fff'}},
+        },
+      },
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      onDark: {components: {card: {base: {borderColor: '#ccc'}}}},
+    });
+    expect(child.__onDark?.components?.card?.base).toEqual({
+      borderColor: '#ccc',
+      backgroundColor: '#111',
+    });
+    expect(child.__onDark?.components?.badge?.base).toEqual({color: '#fff'});
+  });
+
+  it('inherits __inputTokens so inherited [light, dark] tuples survive', () => {
+    const base = defineTheme({
+      name: 'base',
+      tokens: {'--color-accent': ['#111111', '#eeeeee']},
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      tokens: {'--color-border': '#cccccc'},
+    });
+    expect(child.__inputTokens?.['--color-accent']).toEqual([
+      '#111111',
+      '#eeeeee',
+    ]);
+    expect(child.__inputTokens?.['--color-border']).toBe('#cccccc');
+  });
+
+  it('__inputTokens from the child win over the base', () => {
+    const base = defineTheme({
+      name: 'base',
+      tokens: {'--color-accent': ['#111111', '#eeeeee']},
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      tokens: {'--color-accent': '#ff0000'},
+    });
+    expect(child.__inputTokens?.['--color-accent']).toBe('#ff0000');
+  });
+
+  // The failure that motivated these: `extends` resolving to `undefined` (a
+  // named import that silently missed — see the theme-build resolution tests)
+  // used to inherit nothing and build a stylesheet that looked fine.
+  it('throws when extends is present but undefined', () => {
+    expect(() =>
+      defineTheme({
+        name: 'child',
+        extends: undefined,
+        tokens: {'--color-accent': '#ff0000'},
+      }),
+    ).toThrow(/extends/);
+  });
+
+  it('throws when extends is not a theme', () => {
+    expect(() =>
+      defineTheme({
+        name: 'child',
+        // A module namespace object is the shape a bad import hands over.
+        extends: {foo: 'bar'} as unknown as DefinedTheme,
+      }),
+    ).toThrow(/extends/);
+  });
+
+  it('accepts a pre-built theme module as a base', () => {
+    const built = {
+      name: 'built-base',
+      __built: true,
+      tokens: {'--color-accent': '#111111'},
+    } as DefinedTheme;
+    const child = defineTheme({name: 'child', extends: built});
+    expect(child.tokens['--color-accent']).toBe('#111111');
+  });
 });