@astryxdesign/core 0.4.2 → 0.4.3-canary.0a9618e

package/src/theme/extensibleAxes.test.ts

@@ -0,0 +1,365 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+/**
+ * @file Guards the EXTENSIBLE prop axes — the `*Map` interfaces a theme
+ *   augments — against the theming surface that has to carry them.
+ * @input Component sources (*.tsx/*.ts) and their `{Name}.doc.mjs` files.
+ * @output Vitest failures naming each map whose axis a theme cannot reach.
+ * @position Third sibling of derivedVarRegistry.test.ts (`vars`, `derived`) and
+ *   themingTargets.test.ts (`targets`). Those two check what a component
+ *   RENDERS against what it DOCUMENTS. Neither one looks at the open prop
+ *   unions, so nothing did.
+ *
+ * An extensible axis is a promise made in three places at once, and it is only
+ * kept if all three agree:
+ *
+ *   1. `export interface FooVariantMap` in `Foo/index.ts` — the augmentation
+ *      point. A consumer writes `declare module '@astryxdesign/core/Foo'`
+ *      against THAT subpath, and `astryx theme build` looks for the literal
+ *      interface there when it emits `<theme>.variants.d.ts`. A map declared
+ *      in a sibling file and only re-exported is invisible to both.
+ *   2. `themeProps('foo', {variant})` — the axis reaching the DOM. Without it
+ *      a custom variant renders no selector, so there is nothing to style.
+ *   3. `visualProps: ['variant']` on the doc's theming target — discovery, and
+ *      the reason `theme build` does not reject `'foo': {'variant:custom': …}`
+ *      as an unknown prop.
+ *
+ * Miss (2) and the type says yes while the CSS says nothing: TreeList shipped
+ * `TreeListVariantMap`, with a module-augmentation example in its own JSDoc,
+ * while `themeProps('tree-list', {density})` never passed `variant` — so an
+ * augmented variant type-checked, rendered, and could not be themed.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {readdirSync, readFileSync, existsSync} from 'node:fs';
+import {join, relative} from 'node:path';
+import ts from 'typescript';
+import {stableClassName} from '../naming';
+
+const SRC_DIR = join(__dirname, '..');
+
+// ---------------------------------------------------------------------------
+// Source scanning
+// ---------------------------------------------------------------------------
+
+/**
+ * An extensible axis, keyed by the map that owns it.
+ *
+ * The OWNER is the component whose index declares the interface — that is the
+ * subpath a consumer augments and the component that has to reflect the prop.
+ * Other components may declare a prop of the same type (`AlertDialog`'s
+ * `actionVariant: ButtonVariant`, every field's `statusVariant`); they forward
+ * the value to the owner and are not separately accountable for it.
+ */
+interface ExtensibleAxis {
+  /** Component directory under src/ whose index declares the map. */
+  dir: string;
+  /** Interface name, e.g. 'TreeListVariantMap'. */
+  mapName: string;
+  /** The prop it types, read off the interface name, e.g. 'variant'. */
+  prop: string;
+}
+
+function sourceFilesUnder(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === 'node_modules' || entry.name === '__tests__') {continue;}
+      sourceFilesUnder(full, out);
+    } else if (/\.tsx?$/.test(entry.name) && !entry.name.includes('.test.')) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+function parse(file: string): ts.SourceFile {
+  return ts.createSourceFile(
+    file,
+    readFileSync(file, 'utf8'),
+    ts.ScriptTarget.Latest,
+    true,
+    file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS,
+  );
+}
+
+/**
+ * Every `type Alias = keyof SomethingMap` in the tree, as alias -> map name.
+ * This is the shape that makes a union OPEN: augmenting the interface widens
+ * the alias, which is the whole mechanism a theme package uses.
+ */
+function collectKeyofAliases(files: string[]): Map<string, string> {
+  const aliases = new Map<string, string>();
+
+  /** `keyof FooMap`, and the `keyof FooMap & string` narrowing form. */
+  const mapBehind = (type: ts.TypeNode): string | null => {
+    if (ts.isIntersectionTypeNode(type)) {
+      for (const member of type.types) {
+        const found = mapBehind(member);
+        if (found != null) {return found;}
+      }
+      return null;
+    }
+    if (
+      ts.isTypeOperatorNode(type) &&
+      type.operator === ts.SyntaxKind.KeyOfKeyword &&
+      ts.isTypeReferenceNode(type.type) &&
+      ts.isIdentifier(type.type.typeName) &&
+      type.type.typeName.text.endsWith('Map')
+    ) {
+      return type.type.typeName.text;
+    }
+    return null;
+  };
+
+  for (const file of files) {
+    const visit = (node: ts.Node): void => {
+      if (ts.isTypeAliasDeclaration(node)) {
+        const map = mapBehind(node.type);
+        if (map != null) {aliases.set(node.name.text, map);}
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return aliases;
+}
+
+/**
+ * Maps whose alias types a prop on some `*Props` interface — i.e. the open
+ * union is a COMPONENT PROP, which is what makes it a theming axis.
+ *
+ * This is the line between the two kinds of augmentable map in the tree.
+ * `ButtonVariantMap` widens `<Button variant>`, a visual prop that reaches the
+ * DOM and gets styled. `IndicatorMap` widens the set of registered indicator
+ * NAMES — a different extension mechanism (the theme's `indicators` field,
+ * swapping a React component), with no selector and no visual prop. Holding
+ * the second to the theming contract below would be a category error.
+ */
+function mapsTypingAProp(
+  files: string[],
+  aliases: Map<string, string>,
+): Set<string> {
+  const used = new Set<string>();
+  for (const file of files) {
+    const visit = (node: ts.Node): void => {
+      if (ts.isInterfaceDeclaration(node) && node.name.text.endsWith('Props')) {
+        for (const member of node.members) {
+          if (!ts.isPropertySignature(member) || member.type == null) {continue;}
+          const typeNode = ts.isArrayTypeNode(member.type)
+            ? member.type.elementType
+            : member.type;
+          if (
+            ts.isTypeReferenceNode(typeNode) &&
+            ts.isIdentifier(typeNode.typeName)
+          ) {
+            const map = aliases.get(typeNode.typeName.text);
+            if (map != null) {used.add(map);}
+          }
+        }
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return used;
+}
+
+/**
+ * Every map that is (a) an open union — some `type X = keyof <Map>` exists, so
+ * augmenting it widens a real type — and (b) declared in a component index.
+ *
+ * The prop name is read off the interface, which is the same convention
+ * `astryx theme build` uses to find an augmentation point:
+ * `<Prefix><Prop>Map`. `TextColorMap` -> Text, `color`.
+ * `AvatarStatusDotVariantMap` -> Avatar, `variant`.
+ */
+function collectExtensibleAxes(
+  files: string[],
+  aliases: Map<string, string>,
+  propMaps: Set<string>,
+): ExtensibleAxis[] {
+  const open = propMaps;
+  const axes: ExtensibleAxis[] = [];
+  for (const file of files) {
+    if (!/\/index\.tsx?$/.test(file)) {continue;}
+    const dir = relative(SRC_DIR, file).split('/')[0];
+    const visit = (node: ts.Node): void => {
+      if (
+        ts.isInterfaceDeclaration(node) &&
+        node.name.text.endsWith('Map') &&
+        open.has(node.name.text)
+      ) {
+        const bare = node.name.text.slice(0, -'Map'.length);
+        // The trailing PascalCase word is the prop.
+        const match = /([A-Z][a-z0-9]*)$/.exec(bare);
+        if (match == null) {return;}
+        const prop = match[1].charAt(0).toLowerCase() + match[1].slice(1);
+        axes.push({dir, mapName: node.name.text, prop});
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return axes;
+}
+
+/** Every `themeProps('name', {...})` site, as class -> the prop keys it passes. */
+function collectThemePropsSites(files: string[]): Map<string, Set<string>> {
+  const sites = new Map<string, Set<string>>();
+  for (const file of files) {
+    const visit = (node: ts.Node): void => {
+      if (
+        ts.isCallExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === 'themeProps'
+      ) {
+        const [nameArg, propsArg] = node.arguments;
+        if (nameArg != null && ts.isStringLiteralLike(nameArg)) {
+          const cls = stableClassName(nameArg.text);
+          const keys = sites.get(cls) ?? new Set<string>();
+          if (propsArg != null && ts.isObjectLiteralExpression(propsArg)) {
+            for (const prop of propsArg.properties) {
+              const name = prop.name;
+              if (
+                name != null &&
+                (ts.isIdentifier(name) || ts.isStringLiteralLike(name))
+              ) {
+                keys.add(name.text);
+              }
+            }
+          }
+          sites.set(cls, keys);
+        }
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(parse(file));
+  }
+  return sites;
+}
+
+// ---------------------------------------------------------------------------
+// Docs
+// ---------------------------------------------------------------------------
+
+interface DocTarget {
+  className: string;
+  visualProps: string[];
+}
+
+function collectDocTargets(dir: string): Map<string, DocTarget[]> {
+  const byDir = new Map<string, DocTarget[]>();
+  const walk = (current: string): void => {
+    for (const entry of readdirSync(current, {withFileTypes: true})) {
+      const full = join(current, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === 'node_modules' || entry.name === '__tests__') {
+          continue;
+        }
+        walk(full);
+      } else if (entry.name.endsWith('.doc.mjs')) {
+        const componentDir = relative(SRC_DIR, full).split('/')[0];
+        let doc;
+        try {
+          doc = require(full).docs;
+        } catch {
+          continue;
+        }
+        const targets = (doc?.theming?.targets ?? [])
+          .filter(
+            (t: unknown): t is {className: string} =>
+              typeof (t as {className?: unknown})?.className === 'string',
+          )
+          .map((t: {className: string; visualProps?: string[]}) => ({
+            className: t.className,
+            visualProps: t.visualProps ?? [],
+          }));
+        byDir.set(componentDir, [
+          ...(byDir.get(componentDir) ?? []),
+          ...targets,
+        ]);
+      }
+    }
+  };
+  walk(dir);
+  return byDir;
+}
+
+// ---------------------------------------------------------------------------
+
+const files = sourceFilesUnder(SRC_DIR);
+const aliases = collectKeyofAliases(files);
+const propMaps = mapsTypingAProp(files, aliases);
+const axes = collectExtensibleAxes(files, aliases, propMaps);
+const themePropsSites = collectThemePropsSites(files);
+const docTargets = collectDocTargets(SRC_DIR);
+
+/** The target a component's own name maps to, e.g. TreeList -> astryx-tree-list. */
+function ownTargets(axis: ExtensibleAxis): DocTarget[] {
+  return docTargets.get(axis.dir) ?? [];
+}
+
+describe('extensible prop axes are reachable by a theme', () => {
+  it('finds the axes at all (guards the guard)', () => {
+    // If the AST walk silently stopped matching, every assertion below would
+    // pass on an empty list.
+    expect(axes.length).toBeGreaterThan(10);
+    expect(axes.map(a => a.mapName)).toContain('ButtonVariantMap');
+  });
+
+  it('every open prop union is declared in an index a consumer can augment', () => {
+    // Module augmentation only widens the module where the interface is
+    // DECLARED, and the CLI greps the public subpath for that literal
+    // declaration. A map in a sibling file, re-exported, satisfies neither:
+    // `declare module '@astryxdesign/core/<Component>'` would create a new,
+    // unrelated interface and `theme build` would emit no augmentation.
+    // `collectExtensibleAxes` only reads indexes, so anything open and
+    // declared elsewhere is missing from `axes` entirely — compare against
+    // every open map in the tree to catch that.
+    const declaredInAnIndex = new Set(axes.map(a => a.mapName));
+    const notAugmentable = [...propMaps].filter(m => !declaredInAnIndex.has(m));
+    expect(
+      notAugmentable,
+      'these maps type an open union but are not declared in a component index, ' +
+        'so no consumer can augment them at @astryxdesign/core/<Component>',
+    ).toEqual([]);
+  });
+
+  it.each(axes.map(a => [`${a.dir}.${a.prop} (${a.mapName})`, a] as const))(
+    '%s reaches the DOM through themeProps',
+    (_label, axis) => {
+      // The axis is extensible, so a consumer can add a value we have never
+      // seen. The only way their CSS can select it is if the component
+      // reflects the prop.
+      const targets = ownTargets(axis);
+      const reflected = targets.some(t =>
+        themePropsSites.get(t.className)?.has(axis.prop),
+      );
+      expect(
+        reflected,
+        `${axis.dir} lets a theme add \`${axis.prop}\` values via ${axis.mapName}, but no ` +
+          `themeProps() call passes \`${axis.prop}\` — a custom value renders no selector, ` +
+          `so it cannot be styled. Pass it: themeProps('<target>', {${axis.prop}}).`,
+      ).toBe(true);
+    },
+  );
+
+  it.each(axes.map(a => [`${a.dir}.${a.prop} (${a.mapName})`, a] as const))(
+    '%s is documented as a visual prop',
+    (_label, axis) => {
+      // Undocumented, it is undiscoverable — and `theme build` rejects
+      // `'<target>': {'<prop>:custom': …}` as an unknown prop, because its
+      // known-prop set is built from exactly this field.
+      const targets = ownTargets(axis);
+      const documented = targets.some(t => t.visualProps.includes(axis.prop));
+      expect(
+        documented,
+        `${axis.dir} lets a theme add \`${axis.prop}\` values via ${axis.mapName}, but no ` +
+          `theming target documents \`${axis.prop}\` in visualProps — a theme author cannot ` +
+          `discover the axis, and \`astryx theme build\` warns "Unknown prop" on it.`,
+      ).toBe(true);
+    },
+  );
+});

package/src/theme/mergeComponents.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Component style-map merging
+ *
+ * One merge rule for component overrides, shared by every layer that composes
+ * them: `extends` inheritance, generated type-scale rules, and the on-media
+ * (`onDark`/`onLight`) surfaces. Merging is per style key, so a child that
+ * restates one property of `button.base` keeps the rest of the base's.
+ *
+ * @input two ComponentStyleMaps — the base and the overrides that win
+ * @output a merged ComponentStyleMap
+ * @position packages/core/src/theme/mergeComponents.ts
+ */
+
+import type {ComponentStyleMap} from './defineTheme';
+
+/**
+ * Deep-merge component style maps: `overrides` wins per style key, and every
+ * component and key the base declared that the overrides do not mention is
+ * carried through untouched.
+ */
+export function deepMergeComponents(
+  base?: ComponentStyleMap,
+  overrides?: ComponentStyleMap,
+): ComponentStyleMap | undefined {
+  if (!base && !overrides) {
+    return undefined;
+  }
+  if (!base) {
+    return overrides;
+  }
+  if (!overrides) {
+    return base;
+  }
+
+  const result: ComponentStyleMap = {};
+
+  // Start with all base entries
+  for (const [component, rules] of Object.entries(base)) {
+    result[component] = {...rules};
+  }
+
+  // Merge overrides on top
+  for (const [component, rules] of Object.entries(overrides)) {
+    if (!result[component]) {
+      result[component] = {...rules};
+    } else {
+      for (const [key, styles] of Object.entries(rules)) {
+        result[component][key] = {
+          ...result[component][key],
+          ...styles,
+        };
+      }
+    }
+  }
+
+  return result;
+}

package/src/theme/onMediaTokens.ts

@@ -21,6 +21,7 @@
  */
 
 import type {TokenValue, ComponentStyleMap} from './defineTheme';
+import {deepMergeComponents} from './mergeComponents';
 
 /**
  * On-media theme overrides — same shape as the main theme but scoped
@@ -89,15 +90,21 @@ function resolveValue(value: TokenValue): string {
 /**
  * Resolve on-media overrides: merge user tokens with defaults,
  * pass through component overrides.
+ *
+ * `base` is the already-resolved surface of a theme being extended. It sits
+ * between the defaults and this theme's own input, so a child theme inherits
+ * the surface customizations of the theme it extends instead of silently
+ * reverting them to the defaults.
  */
 export function resolveOnMedia(
   surface: 'dark' | 'light',
   input?: OnMediaOverrides,
+  base?: ResolvedOnMedia,
 ): ResolvedOnMedia {
   const defaults =
     surface === 'dark' ? defaultOnDarkTokens : defaultOnLightTokens;
 
-  const tokens = {...defaults};
+  const tokens = {...defaults, ...base?.tokens};
 
   if (input?.tokens) {
     for (const [key, value] of Object.entries(input.tokens)) {
@@ -109,6 +116,6 @@ export function resolveOnMedia(
 
   return {
     tokens,
-    components: input?.components,
+    components: deepMergeComponents(base?.components, input?.components),
   };
 }

package/src/utils/characters.test.ts

@@ -0,0 +1,141 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file characters.test.ts
+ * @input character-counting utilities
+ * @output Tests for characterCount, firstCharacter, truncateCharacters
+ */
+
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {characterCount, firstCharacter, truncateCharacters} from './characters';
+
+// Multi-code-unit fixtures: an emoji surrogate pair (2 units), a flag
+// sequence (4 units), a ZWJ family (11 units), and a combining mark (2 units).
+const EMOJI = '\u{1F600}'; // 😀
+const FLAG = '\u{1F1F9}\u{1F1F7}'; // 🇹🇷
+const FAMILY = '\u{1F468}‍\u{1F469}‍\u{1F467}‍\u{1F466}'; // 👨‍👩‍👧‍👦
+// é as base + combining mark, spelled as an escape so NFC-normalizing
+// tools cannot silently precompose the fixture into single-code-unit é.
+const E_ACUTE = 'e\u0301';
+
+describe('characterCount', () => {
+  it('returns 0 for the empty string', () => {
+    expect(characterCount('')).toBe(0);
+  });
+
+  it('counts ASCII one per character', () => {
+    expect(characterCount('hello')).toBe(5);
+  });
+
+  it('counts an emoji surrogate pair as one', () => {
+    expect(characterCount(EMOJI.repeat(2))).toBe(2);
+    expect(EMOJI.repeat(2).length).toBe(4); // sanity: code units differ
+  });
+
+  it('counts a flag sequence as one', () => {
+    expect(characterCount(FLAG)).toBe(1);
+  });
+
+  it('counts a ZWJ family emoji as one', () => {
+    expect(characterCount(FAMILY)).toBe(1);
+    expect(FAMILY.length).toBe(11); // sanity: code units differ
+  });
+
+  it('counts a combining-mark character as one', () => {
+    expect(characterCount(E_ACUTE)).toBe(1);
+    expect(E_ACUTE.length).toBe(2); // sanity: code units differ
+  });
+
+  it('counts mixed content by user-perceived characters', () => {
+    expect(characterCount(`a${EMOJI}b`)).toBe(3);
+  });
+});
+
+describe('firstCharacter', () => {
+  it('returns the empty string for the empty string', () => {
+    expect(firstCharacter('')).toBe('');
+  });
+
+  it('returns the first ASCII character', () => {
+    expect(firstCharacter('abc')).toBe('a');
+  });
+
+  it('returns a whole emoji, not half a surrogate pair', () => {
+    expect(firstCharacter(`${EMOJI}x`)).toBe(EMOJI);
+  });
+
+  it('returns a whole ZWJ family emoji', () => {
+    expect(firstCharacter(`${FAMILY}x`)).toBe(FAMILY);
+  });
+
+  it('keeps a combining mark attached to its base', () => {
+    expect(firstCharacter(`${E_ACUTE}cole`)).toBe(E_ACUTE);
+  });
+});
+
+describe('truncateCharacters', () => {
+  it('returns strings within max unchanged', () => {
+    expect(truncateCharacters('abc', 5)).toBe('abc');
+  });
+
+  it('returns strings exactly at max unchanged', () => {
+    expect(truncateCharacters('abcde', 5)).toBe('abcde');
+  });
+
+  it('truncates so the result, including the ellipsis, is max characters', () => {
+    expect(truncateCharacters('abcdefghij', 5)).toBe('abcd…');
+  });
+
+  it('counts a multi-character ellipsis against max', () => {
+    // "..." is 3 characters, so 5 content characters remain.
+    expect(truncateCharacters('aaaaaaaaaa', 8, '...')).toBe('aaaaa...');
+  });
+
+  it('passes strings within max through under a multi-character ellipsis', () => {
+    expect(truncateCharacters('aaaaaaaa', 8, '...')).toBe('aaaaaaaa');
+  });
+
+  it('cuts between characters, never splitting an emoji', () => {
+    // The exact-string assertion also proves no surrogate pair was split.
+    expect(truncateCharacters(EMOJI.repeat(4), 3)).toBe(`${EMOJI.repeat(2)}…`);
+  });
+
+  it('treats a ZWJ family emoji as a single unit when cutting', () => {
+    expect(truncateCharacters(`${FAMILY}abc`, 2)).toBe(`${FAMILY}…`);
+  });
+
+  it('returns the empty string unchanged', () => {
+    expect(truncateCharacters('', 5)).toBe('');
+  });
+
+  it('degrades to just the ellipsis when max is smaller than the ellipsis', () => {
+    // Documented degenerate behavior: no consumer passes max below the
+    // ellipsis length, but the clamp must stay predictable.
+    expect(truncateCharacters('abcdef', 2, '...')).toBe('...');
+    expect(truncateCharacters('abcdef', 0)).toBe('…');
+  });
+});
+
+describe('code-point fallback (no Intl.Segmenter)', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.resetModules();
+  });
+
+  it('keeps surrogate pairs intact while counting by code points', async () => {
+    vi.resetModules();
+    // characters.ts only reads Intl.Segmenter, so a minimal stub suffices.
+    vi.stubGlobal('Intl', {Segmenter: undefined});
+    const fallback = await import('./characters');
+
+    expect(fallback.characterCount(EMOJI.repeat(2))).toBe(2);
+    expect(fallback.firstCharacter(`${EMOJI}x`)).toBe(EMOJI);
+    expect(fallback.firstCharacter('')).toBe('');
+    expect(fallback.truncateCharacters(EMOJI.repeat(4), 3)).toBe(
+      `${EMOJI.repeat(2)}…`,
+    );
+    // Documented degradation: a flag sequence splits into its two
+    // regional-indicator code points under the fallback.
+    expect(fallback.characterCount(FLAG)).toBe(2);
+  });
+});

package/src/utils/characters.ts

@@ -0,0 +1,88 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file characters.ts
+ * @input Strings that may contain characters made of several code units
+ *        (emoji, flags, joined emoji sequences, accented letters)
+ * @output Exports characterCount, firstCharacter, truncateCharacters —
+ *         replacements for .length / .charAt(0) / .slice(0, n) that measure
+ *         and cut user-visible strings the way a person reads them
+ * @position Shared utility; consumed by Avatar, TextArea, PowerSearch, Table
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/utils/characters.test.ts
+ * - /packages/core/src/utils/index.ts
+ */
+
+/**
+ * Reuse a single segmenter when the runtime supports Intl.Segmenter.
+ * `grapheme` is the Intl granularity name for a user-perceived character.
+ */
+const characterSegmenter =
+  typeof Intl.Segmenter === 'function'
+    ? new Intl.Segmenter(undefined, {granularity: 'grapheme'})
+    : null;
+
+/**
+ * Split a string into user-perceived characters. The code-point fallback
+ * keeps surrogate pairs intact but may split joined emoji sequences and flag
+ * pairs on runtimes without Intl.Segmenter.
+ */
+function splitCharacters(str: string): string[] {
+  if (characterSegmenter) {
+    return [...characterSegmenter.segment(str)].map(s => s.segment);
+  }
+  return [...str];
+}
+
+/**
+ * Number of characters in a string — the count a person would give, where one
+ * emoji, flag, or accented letter is one character. Replacement for `.length`
+ * on user-visible strings, which counts internal storage units instead.
+ */
+export function characterCount(str: string): number {
+  if (str === '') {
+    return 0;
+  }
+  return splitCharacters(str).length;
+}
+
+/**
+ * The first character of a string, or '' when empty. Replacement for
+ * `.charAt(0)`, which can return half of an emoji. Reads only the first
+ * character, so cost does not scale with the length of the string.
+ */
+export function firstCharacter(str: string): string {
+  if (characterSegmenter) {
+    const first = characterSegmenter.segment(str)[Symbol.iterator]().next();
+    return first.done ? '' : first.value.segment;
+  }
+  const codePoint = str.codePointAt(0);
+  return codePoint == null ? '' : String.fromCodePoint(codePoint);
+}
+
+/**
+ * Truncate to at most `max` characters, ellipsis included: strings within
+ * `max` characters pass through unchanged; longer strings are cut so the
+ * result — content plus `ellipsis` — is exactly `max` characters (or just the
+ * ellipsis, when `max` is smaller than the ellipsis itself). Replacement for
+ * `str.slice(0, n) + '…'`, which can cut an emoji in half.
+ *
+ * @example
+ * ```
+ * truncateCharacters('abcdefghij', 5) // 'abcd…'
+ * truncateCharacters('abcdefghij', 8, '...') // 'abcde...'
+ * ```
+ */
+export function truncateCharacters(
+  str: string,
+  max: number,
+  ellipsis = '…',
+): string {
+  const characters = splitCharacters(str);
+  if (characters.length <= max) {
+    return str;
+  }
+  const keep = Math.max(max - characterCount(ellipsis), 0);
+  return characters.slice(0, keep).join('') + ellipsis;
+}