@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/CodeBlock/__tests__/CodeBlockCopyClearance.a11y.chromium.spec.ts

@@ -0,0 +1,290 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
+
+/**
+ * @file CodeBlockCopyClearance.a11y.chromium.spec.ts
+ * @input Built CodeBlock story and real Chromium layout
+ * @output Browser evidence that the floating Copy control never covers code
+ * @position CodeBlock headerless state (Copy on the root, ORD2): the code body
+ *   stays readable (Code Body, Copy Button design relationships)
+ */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+const STORY = 'core-codeblock--copy-clearance';
+
+async function mount(
+  page: Page,
+  args: Record<string, unknown> = {},
+  direction: 'ltr' | 'rtl' = 'ltr',
+) {
+  await page.setViewportSize({width: 600, height: 400});
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${STORY}&viewMode=story&globals=direction:${direction}`,
+  );
+  await expect(copyButton(page)).toBeVisible();
+  if (Object.keys(args).length > 0) {
+    await page.evaluate(
+      async ({storyId, updatedArgs}) =>
+        new Promise<void>(resolve => {
+          const channel = (
+            window as unknown as {
+              __STORYBOOK_ADDONS_CHANNEL__: {
+                emit: (event: string, payload: unknown) => void;
+                once: (event: string, handler: () => void) => void;
+              };
+            }
+          ).__STORYBOOK_ADDONS_CHANNEL__;
+          channel.once('storyRendered', () => resolve());
+          channel.emit('updateStoryArgs', {storyId, updatedArgs});
+          setTimeout(resolve, 1500);
+        }),
+      {storyId: STORY, updatedArgs: args},
+    );
+  }
+}
+
+async function box(locator: Locator) {
+  const rect = await locator.boundingBox();
+  if (!rect) {
+    throw new Error('element not laid out');
+  }
+  return rect;
+}
+
+function copyButton(page: Page) {
+  return page.getByRole('button', {name: 'Copy code'});
+}
+
+/**
+ * The code viewport clips every line, so a line can reach the button only if
+ * the viewport's box overlaps it. Returns the overlap width in pixels.
+ */
+async function overlap(page: Page, viewportName: string) {
+  const button = await box(copyButton(page));
+  const viewport = await box(page.getByRole('group', {name: viewportName}));
+  const inline =
+    Math.min(button.x + button.width, viewport.x + viewport.width) -
+    Math.max(button.x, viewport.x);
+  const block =
+    Math.min(button.y + button.height, viewport.y + viewport.height) -
+    Math.max(button.y, viewport.y);
+  return inline > 0 && block > 0 ? inline : 0;
+}
+
+/** The first line's painted text must end before the button starts. */
+async function firstLineReachesButton(page: Page) {
+  return page.evaluate(() => {
+    const find = (selector: string) => {
+      const node = document.querySelector(selector);
+      if (!node) {
+        throw new Error(`missing ${selector}`);
+      }
+      return node;
+    };
+    const button = find('[aria-label="Copy code"]').getBoundingClientRect();
+    const viewport = find('[role="group"]').getBoundingClientRect();
+    const range = document.createRange();
+    range.selectNodeContents(find('pre.astryx-code-block [data-line="1"]'));
+    const rtl =
+      getComputedStyle(find('pre.astryx-code-block')).direction === 'rtl';
+    for (const rect of Array.from(range.getClientRects())) {
+      if (rect.bottom <= button.top || rect.top >= button.bottom) {
+        continue;
+      }
+      // Visible part of the text: what the viewport does not clip.
+      const left = Math.max(rect.left, viewport.left);
+      const right = Math.min(rect.right, viewport.right);
+      if (right <= left) {
+        continue;
+      }
+      if (rtl ? left < button.right : right > button.left) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+
+test('a long first line ends before the floating Copy button', async ({
+  page,
+}) => {
+  await mount(page);
+  expect(await overlap(page, 'Code')).toBe(0);
+  expect(await firstLineReachesButton(page)).toBe(false);
+});
+
+test('scrolled to the end, the line still ends before Copy', async ({page}) => {
+  await mount(page);
+  const viewport = page.getByRole('group', {name: 'Code'});
+  await viewport.evaluate(node => {
+    node.scrollLeft = node.scrollWidth;
+  });
+  expect(await overlap(page, 'Code')).toBe(0);
+  expect(await firstLineReachesButton(page)).toBe(false);
+});
+
+test('wrapped lines wrap before Copy', async ({page}) => {
+  await mount(page, {isWrapped: true});
+  expect(await overlap(page, 'Code')).toBe(0);
+  expect(await firstLineReachesButton(page)).toBe(false);
+});
+
+test('in RTL the clearance mirrors to the inline end', async ({page}) => {
+  await mount(page, {}, 'rtl');
+  const button = await box(copyButton(page));
+  const root = await box(page.locator('pre.astryx-code-block'));
+  // Copy sits at the left (inline-end) edge in RTL.
+  expect(button.x - root.x).toBeLessThan(root.width / 2);
+  expect(await overlap(page, 'Code')).toBe(0);
+  expect(await firstLineReachesButton(page)).toBe(false);
+});
+
+test('with a header, Copy sits in the header and the code keeps its full width', async ({
+  page,
+}) => {
+  await mount(page, {title: 'run.sh'});
+  const viewport = await box(page.getByRole('group', {name: 'Code'}));
+  const root = await box(page.locator('pre.astryx-code-block'));
+  // Only the root's own border separates the viewport from the root's edges.
+  expect(Math.abs(root.width - viewport.width)).toBeLessThanOrEqual(2);
+  expect(await overlap(page, 'Code')).toBe(0);
+});
+
+async function centres(page: Page) {
+  return page.evaluate(() => {
+    const find = (selector: string) => {
+      const node = document.querySelector(selector);
+      if (!node) {
+        throw new Error(`missing ${selector}`);
+      }
+      return node.getBoundingClientRect();
+    };
+    const button = find('[aria-label="Copy code"]');
+    const line = find('pre.astryx-code-block [data-line="1"]');
+    const root = find('pre.astryx-code-block');
+    return {
+      button: button.top + button.height / 2,
+      line: line.top + line.height / 2,
+      above: button.top - root.top,
+      below: root.bottom - button.bottom,
+    };
+  });
+}
+
+test('a one-line block is one row: Copy is centred with even space', async ({
+  page,
+}) => {
+  await mount(page, {code: 'pnpm install'});
+  const one = await centres(page);
+  expect(Math.abs(one.button - one.line)).toBeLessThanOrEqual(1);
+  expect(Math.abs(one.above - one.below)).toBeLessThanOrEqual(1);
+  expect(await overlap(page, 'Code')).toBe(0);
+});
+
+test('a block that grows (streaming) keeps Copy on its first line', async ({
+  page,
+}) => {
+  await mount(page, {code: 'pnpm install'});
+  const before = await centres(page);
+  await mount(page, {code: 'pnpm install\npnpm build\npnpm test'});
+  const after = await centres(page);
+  expect(Math.abs(after.button - before.button)).toBeLessThanOrEqual(1);
+  expect(Math.abs(after.button - after.line)).toBeLessThanOrEqual(1);
+});
+
+test('the small size centres Copy on its own first line', async ({page}) => {
+  await mount(page, {code: 'pnpm install', size: 'sm'});
+  const one = await centres(page);
+  expect(Math.abs(one.button - one.line)).toBeLessThanOrEqual(1);
+});
+
+test('caller controls join Copy in the corner and never cover code', async ({
+  page,
+}) => {
+  await page.setViewportSize({width: 600, height: 400});
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-codeblock--end-content-headerless&viewMode=story`,
+  );
+  const action = page.getByRole('button', {name: 'Run in terminal'});
+  await expect(action).toBeVisible();
+  const viewport = await box(page.getByRole('group', {name: 'Code'}));
+  const run = await box(action);
+  const copy = await box(copyButton(page));
+  for (const control of [run, copy]) {
+    const inline =
+      Math.min(control.x + control.width, viewport.x + viewport.width) -
+      Math.max(control.x, viewport.x);
+    expect(inline).toBeLessThanOrEqual(0);
+  }
+  // Caller controls come first, then Copy, at the inline end.
+  expect(run.x).toBeLessThan(copy.x);
+  expect(Math.abs(run.y - copy.y)).toBeLessThanOrEqual(1);
+});
+
+test('with a header, caller controls sit before Copy in the header', async ({
+  page,
+}) => {
+  await page.setViewportSize({width: 600, height: 400});
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-codeblock--end-content&viewMode=story`,
+  );
+  const header = page.locator('.astryx-code-block-header');
+  await expect(header).toBeVisible();
+  await expect(
+    header.getByRole('button', {name: 'Run in terminal'}),
+  ).toBeVisible();
+  const run = await box(page.getByRole('button', {name: 'Run in terminal'}));
+  const copy = await box(copyButton(page));
+  expect(run.x).toBeLessThan(copy.x);
+});
+
+test('a taller caller control still centres on the first line of a one-line block', async ({
+  page,
+}) => {
+  await page.setViewportSize({width: 600, height: 400});
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-codeblock--end-content-tall&viewMode=story`,
+  );
+  await expect(
+    page.getByRole('button', {name: 'Run in terminal'}),
+  ).toBeVisible();
+  const geometry = await page.evaluate(() => {
+    const rect = (selector: string) => {
+      const node = document.querySelector(selector);
+      if (!node) {
+        throw new Error(`missing ${selector}`);
+      }
+      return node.getBoundingClientRect();
+    };
+    const action = rect('[aria-label="Run in terminal"]');
+    const copy = rect('[aria-label="Copy code"]');
+    const line = rect('pre.astryx-code-block [data-line="1"]');
+    const root = rect('pre.astryx-code-block');
+    return {
+      action: action.top + action.height / 2,
+      copy: copy.top + copy.height / 2,
+      line: line.top + line.height / 2,
+      above: line.top - root.top,
+      below: root.bottom - line.bottom,
+    };
+  });
+  expect(Math.abs(geometry.action - geometry.line)).toBeLessThanOrEqual(1);
+  expect(Math.abs(geometry.copy - geometry.line)).toBeLessThanOrEqual(1);
+  expect(Math.abs(geometry.above - geometry.below)).toBeLessThanOrEqual(1);
+});

package/src/CodeBlock/__tests__/CodeBlockLanguages.a11y.chromium.spec.ts

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeBlockLanguages.a11y.chromium.spec.ts
+ * @input Storybook stories core-codeblock--built-in-languages and
+ *   core-codeblock--language-modules
+ * @output CodeBlock FR12 and FR13 in a real browser: built-in languages and
+ *   language values passed as `language` register syntax highlights over the
+ *   right text
+ * @position CodeBlock FR12, FR13 browser evidence
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** The text each range of the `astryx-<type>` syntax highlight covers. */
+async function highlighted(page: Page, type: string) {
+  return page.evaluate(name => {
+    const highlight = CSS.highlights.get(`astryx-${name}`);
+    return highlight
+      ? Array.from(highlight as unknown as Iterable<Range>).map(range =>
+          range.toString(),
+        )
+      : [];
+  }, type);
+}
+
+test('built-in C++, Rust, and SQL colour with no setup', async ({page}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-codeblock--built-in-languages&viewMode=story`,
+  );
+  await expect(page.locator('pre.astryx-code-block')).toHaveCount(3);
+  await expect
+    .poll(async () => highlighted(page, 'keyword'))
+    .toEqual(expect.arrayContaining(['int', 'return', 'fn', 'SELECT']));
+  expect(await highlighted(page, 'comment')).toEqual(
+    expect.arrayContaining(['// Sum a vector', '-- Active users this week']),
+  );
+});
+
+test('Thrift and Java colour when passed as the language', async ({page}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-codeblock--language-modules&viewMode=story`,
+  );
+  await expect(page.locator('pre.astryx-code-block')).toHaveCount(2);
+  await expect
+    .poll(async () => highlighted(page, 'keyword'))
+    .toEqual(expect.arrayContaining(['struct', 'required', 'public', 'class']));
+  expect(await highlighted(page, 'string')).toContain('"hello, "');
+});

package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
 
 /**
  * @file CodeBlockOverflowStop.a11y.chromium.spec.ts

package/src/CodeBlock/__tests__/DiffRowPaint.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
 
 /**
  * @file DiffRowPaint.a11y.chromium.spec.ts

package/src/CodeBlock/grammar.ts

@@ -0,0 +1,291 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file grammar.ts
+ * @input Nothing
+ * @output Shared pattern builders for CodeBlock grammars, the CodeLanguage
+ *   value, createCodeLanguage, and lookups by identifier and file name
+ * @position Shared utility; consumed by tokenizer.ts and the modules under
+ *   languages/
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/CodeBlock/tokenizer.ts
+ * - /packages/core/src/CodeBlock/languages/
+ */
+
+/** One grammar rule: text matching `regex` paints as `type`. */
+export type GrammarPattern = {type: string; regex: RegExp};
+
+/** A language's rules, tried in order at each position. */
+export type Grammar = {
+  patterns: GrammarPattern[];
+  /** SyntaxToken type that matches the element's default text color (skipped in output). */
+  defaultType: string;
+};
+
+const LANGUAGE = Symbol.for('astryx.codeLanguage');
+
+/** A flat token from a custom tokenize function: absolute offsets in `code`. */
+export type CodeLanguageToken = {type: string; start: number; end: number};
+
+/** A custom language's tokenize function, the shape `tokenizer` takes. */
+export type CodeLanguageTokenize = (
+  code: string,
+  language: string,
+) => CodeLanguageToken[];
+
+/**
+ * A language value: an Astryx module from
+ * `@astryxdesign/core/CodeBlock/languages/<path>`, or a custom language from
+ * `createCodeLanguage`. Pass it as `language`, or list it in `codeLanguages`
+ * on Markdown, RichText, and DiffViewer.
+ */
+export type CodeLanguage = {
+  /** The identifier the label shows, such as `graphql`; shown verbatim. */
+  readonly name: string;
+  /** The words that name this language in `language` strings and fences. */
+  readonly identifiers: ReadonlyArray<string>;
+  /** File extensions (no dot) that infer this language, such as `graphql`. */
+  readonly fileExtensions: ReadonlyArray<string>;
+  /** Whole file names that infer this language, such as `Dockerfile`. */
+  readonly fileNames: ReadonlyArray<string>;
+  readonly [LANGUAGE]: true;
+};
+
+/** How a language value paints: Astryx grammar data or a custom function. */
+export type CodeLanguagePainter =
+  | {kind: 'grammar'; grammar: Grammar}
+  | {kind: 'tokenize'; tokenize: CodeLanguageTokenize};
+
+type InternalCodeLanguage = CodeLanguage & {
+  readonly painter: () => CodeLanguagePainter;
+};
+
+type CodeLanguageMeta = {
+  name: string;
+  identifiers: ReadonlyArray<string>;
+  fileExtensions?: ReadonlyArray<string>;
+  fileNames?: ReadonlyArray<string>;
+};
+
+function makeLanguage(
+  meta: CodeLanguageMeta,
+  painter: () => CodeLanguagePainter,
+): CodeLanguage {
+  const language: InternalCodeLanguage = {
+    name: meta.name,
+    identifiers: meta.identifiers,
+    fileExtensions: meta.fileExtensions ?? [],
+    fileNames: meta.fileNames ?? [],
+    [LANGUAGE]: true,
+    painter,
+  };
+  return language;
+}
+
+/** Make an Astryx language module from grammar data. Internal. */
+export function defineCodeLanguage(
+  meta: CodeLanguageMeta,
+  grammar: () => Grammar,
+): CodeLanguage {
+  return makeLanguage(meta, () => ({kind: 'grammar', grammar: grammar()}));
+}
+
+export type CreateCodeLanguageOptions = CodeLanguageMeta & {
+  /** Returns the tokens of `code`; runs synchronously. */
+  tokenize: CodeLanguageTokenize;
+};
+
+/**
+ * Make a custom language value from your own tokenize function. It works
+ * everywhere an Astryx language module does: as `language`, and in
+ * `codeLanguages` on Markdown, RichText, and DiffViewer.
+ *
+ * @example
+ * ```
+ * const zig = createCodeLanguage({
+ *   name: 'zig',
+ *   identifiers: ['zig'],
+ *   fileExtensions: ['zig'],
+ *   tokenize: zigTokens,
+ * });
+ * <CodeBlock language={zig} code={source} />
+ * ```
+ */
+export function createCodeLanguage({
+  tokenize,
+  ...meta
+}: CreateCodeLanguageOptions): CodeLanguage {
+  return makeLanguage(meta, () => ({kind: 'tokenize', tokenize}));
+}
+
+/** Whether `value` is a language value. */
+export function isCodeLanguage(value: unknown): value is CodeLanguage {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as Partial<CodeLanguage>)[LANGUAGE] === true
+  );
+}
+
+/** How a language value paints, or null for any other value. */
+export function codeLanguagePainter(
+  language: CodeLanguage,
+): CodeLanguagePainter | null {
+  const internal = language as Partial<InternalCodeLanguage>;
+  return isCodeLanguage(language) && typeof internal.painter === 'function'
+    ? internal.painter()
+    : null;
+}
+
+/**
+ * Whether `language` is a custom language (made with `createCodeLanguage`),
+ * whose function runs synchronously at any length, as `tokenizer` does.
+ */
+export function isCustomCodeLanguage(language: string | CodeLanguage): boolean {
+  return (
+    typeof language !== 'string' &&
+    codeLanguagePainter(language)?.kind === 'tokenize'
+  );
+}
+
+/**
+ * Whether two languages paint and label the same: the same value, or custom
+ * languages with the same tokenize function, name, and identifiers — so an
+ * inline `createCodeLanguage({...})` does not re-tokenize on every render.
+ */
+export function sameCodeLanguage(
+  a: string | CodeLanguage,
+  b: string | CodeLanguage,
+): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a === 'string' || typeof b === 'string') {
+    return false;
+  }
+  const painterA = codeLanguagePainter(a);
+  const painterB = codeLanguagePainter(b);
+  return (
+    painterA?.kind === 'tokenize' &&
+    painterB?.kind === 'tokenize' &&
+    painterA.tokenize === painterB.tokenize &&
+    a.name === b.name &&
+    a.identifiers.length === b.identifiers.length &&
+    a.identifiers.every((identifier, i) => identifier === b.identifiers[i])
+  );
+}
+
+/** The word a language reflects and labels: a string itself, or a value's name. */
+export function languageLabel(language: string | CodeLanguage): string {
+  return typeof language === 'string' ? language : language.name;
+}
+
+/** The word a language reflects as `data-language`: its first identifier. */
+export function languageKey(language: string | CodeLanguage): string {
+  return typeof language === 'string'
+    ? language
+    : (language.identifiers[0] ?? language.name);
+}
+
+/** Whether two lists name the same values in the same order. */
+export function sameCodeLanguageList(
+  a: ReadonlyArray<CodeLanguage> | undefined,
+  b: ReadonlyArray<CodeLanguage> | undefined,
+): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null || a.length !== b.length) {
+    return false;
+  }
+  return a.every((language, i) => language === b[i]);
+}
+
+/** The listed value that claims `word`; a later entry wins. */
+export function listedLanguage(
+  languages: ReadonlyArray<CodeLanguage> | undefined,
+  word: string,
+): CodeLanguage | undefined {
+  if (languages == null) {
+    return undefined;
+  }
+  for (let i = languages.length - 1; i >= 0; i--) {
+    if (languages[i].identifiers.includes(word)) {
+      return languages[i];
+    }
+  }
+  return undefined;
+}
+
+/** The listed value a file's name or extension infers; a later entry wins. */
+export function listedLanguageForFile(
+  languages: ReadonlyArray<CodeLanguage> | undefined,
+  fileName: string,
+  extension: string | null,
+): CodeLanguage | undefined {
+  if (languages == null) {
+    return undefined;
+  }
+  for (let i = languages.length - 1; i >= 0; i--) {
+    const language = languages[i];
+    if (
+      language.fileNames.includes(fileName) ||
+      (extension != null && language.fileExtensions.includes(extension))
+    ) {
+      return language;
+    }
+  }
+  return undefined;
+}
+
+/** A keyword alternation from a space-separated word list. */
+export const keywords = (words: string): RegExp =>
+  new RegExp(`\\b(?:${words.trim().split(/\s+/).join('|')})\\b`);
+
+export const NUMBER =
+  /\b(?:0[xX][\da-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|\d[\d_]*\.?[\d_]*(?:[eE][+-]?\d+)?)[a-zA-Z]*\b/;
+export const DOUBLE_QUOTED = /"(?:[^"\\\n]|\\.)*"/;
+export const SINGLE_QUOTED = /'(?:[^'\\\n]|\\.)*'/;
+export const BLOCK_COMMENT = /\/\*[\s\S]*?\*\//;
+export const LINE_COMMENT = /\/\/[^\n]*/;
+export const HASH_COMMENT = /#[^\n]*/;
+export const CALL = /\b[a-zA-Z_$][\w$]*(?=\s*\()/;
+export const TYPE_NAME = /\b[A-Z][a-zA-Z0-9_]*\b/;
+export const OPERATOR = /[+\-*/%=!<>&|^~?:]+/;
+// eslint-disable-next-line no-useless-escape
+export const PUNCTUATION = /[{}()\[\];,.@]/;
+
+/**
+ * A C-like grammar: comments, any extra rules, strings, numbers, keywords,
+ * calls, type names, operators, and punctuation, in that order.
+ */
+export function cLike(
+  words: string,
+  extra: GrammarPattern[] = [],
+  comments: RegExp[] = [BLOCK_COMMENT, LINE_COMMENT],
+): Grammar {
+  return {
+    defaultType: 'variable',
+    patterns: [
+      ...comments.map(regex => ({type: 'comment', regex})),
+      ...extra,
+      {type: 'string', regex: DOUBLE_QUOTED},
+      {type: 'string', regex: SINGLE_QUOTED},
+      {type: 'number', regex: NUMBER},
+      {type: 'keyword', regex: keywords(words)},
+      {type: 'function', regex: CALL},
+      {type: 'type', regex: TYPE_NAME},
+      {type: 'operator', regex: OPERATOR},
+      {type: 'punctuation', regex: PUNCTUATION},
+    ],
+  };
+}
+
+/** A preprocessor directive at the start of a line (`#include`). */
+export const DIRECTIVE = /^[ \t]*#\s*\w+/m;
+
+export const C_WORDS =
+  'auto break case char const continue default do double else enum extern float for goto if inline int long register restrict return short signed sizeof static struct switch typedef union unsigned void volatile while bool true false NULL nullptr';
+
+export const CPP_WORDS = `${C_WORDS} alignas alignof catch class concept constexpr consteval co_await co_return co_yield decltype delete explicit export friend mutable namespace new noexcept operator override private protected public requires static_assert template this throw try typename using virtual final`;

package/src/CodeBlock/index.ts

@@ -13,6 +13,13 @@
 
 export {CodeBlock} from './CodeBlock';
 export type {CodeBlockProps} from './CodeBlock';
+export {createCodeLanguage} from './grammar';
+export type {
+  CodeLanguage,
+  CodeLanguageToken,
+  CodeLanguageTokenize,
+  CreateCodeLanguageOptions,
+} from './grammar';
 
 export {Code} from '../Code';
 export type {CodeProps, CodeColor, CodeSize} from '../Code';