@orvain/utils 0.0.0-stage → 0.1.1

package/dist/chart/color.d.cts

@@ -0,0 +1,72 @@
+/**
+ * Chart colour palette shared by every chart part, chart item and composed
+ * chart (React + Vue). Figma draws 8 series colours on the Key-Value and Chart
+ * pages ("Chart Legend Dots v2", "Bar Chart Item v2", …):
+ *
+ * | ChartColor | Figma name                    | Fill    |
+ * |------------|-------------------------------|---------|
+ * | `neutral`  | 🩶 Neutral / 🤍 Light Gray     | #F2F2F2 |
+ * | `grey`     | 🖤 Grey / 🩶 Gray              | #2A2A2A |
+ * | `blue`     | 💙 Brand / 💙 Blue             | #005CF8 |
+ * | `purple`   | 💜 Brand / 💜 Purple           | #9B49DD |
+ * | `yellow`   | 💛 Yellow                      | #FDDA2A |
+ * | `orange`   | 🧡 Orange                      | #FF9000 |
+ * | `green`    | 💚 Green                       | #2ED714 |
+ * | `red`      | ❤️ Red / 💔 Red                | #EC0D33 |
+ *
+ * The values live in `packages/tokens/src/chart.json` (`--orvain-chart-*`).
+ * Some parts draw another shade of the same series colour (the v1 legend dot
+ * uses #4C4C4C for grey and #229A14 for green; the legend bar uses #CBCBCB for
+ * neutral), so each colour has three roles: `fill`, `dot` and `line`.
+ */
+export type ChartColor = 'neutral' | 'grey' | 'blue' | 'purple' | 'yellow' | 'orange' | 'green' | 'red';
+/** Every `ChartColor`, in Figma's variant order. */
+export declare const CHART_COLORS: readonly ChartColor[];
+/**
+ * Which shade of a series colour a part paints.
+ * - `fill`: bars, areas, donut segments, v2 legend swatches (Figma "Surface/Base").
+ * - `dot`: the v1 legend dot and the ForceTip dot.
+ * - `line`: the legend bar (Chart Legend Border).
+ */
+export type ChartColorRole = 'fill' | 'dot' | 'line' | 'accent' | 'soft';
+/**
+ * Extra shades the Chart page draws besides the 8 series colours (Donut v1/v2
+ * blues, Bar Chart Item v2 accents, Donut v4 rings, the dark green of stacked
+ * and grouped bars). Each one has the same token roles as a `ChartColor`.
+ *
+ * | ChartShade     | Fill    |
+ * |----------------|---------|
+ * | `blue-light`   | #3582FF |
+ * | `blue-lighter` | #A6C5FF |
+ * | `blue-dark`    | #0042B7 |
+ * | `yellow-light` | #FCE262 |
+ * | `orange-light` | #FFBE71 |
+ * | `green-dark`   | #229A14 |
+ * | `green-darker` | #186112 |
+ */
+export type ChartShade = 'blue-light' | 'blue-lighter' | 'blue-dark' | 'yellow-light' | 'orange-light' | 'green-dark' | 'green-darker';
+/** Every `ChartShade`. */
+export declare const CHART_SHADES: readonly ChartShade[];
+/** Any paint a chart accepts: a series `ChartColor` or one of its `ChartShade`s. */
+export type ChartFill = ChartColor | ChartShade;
+/** Figma "Theme" of chart fills: Solid, Ghost 20% or Ghost 8% opacity. */
+export type ChartTheme = 'solid' | 'ghost20' | 'ghost8';
+/** CSS custom property holding a chart colour, e.g. `var(--orvain-chart-fill-blue)`. */
+export declare function chartColorVar(color: ChartFill, role?: ChartColorRole): string;
+/**
+ * Text colour for a series hue (tinted captions). Hues whose dot colour is too
+ * light for 4.5:1 text have a darker `--orvain-chart-caption-*` token; the
+ * others fall back to the dot colour.
+ */
+export declare function chartCaptionColorVar(color: ChartFill): string;
+/** Opacity of a chart fill for a Figma theme (Solid 1, Ghost 20% 0.2, Ghost 8% 0.08). */
+export declare function chartThemeOpacity(theme?: ChartTheme): number;
+/** Colour for the n-th series when the data doesn't set one (cycles the palette, skipping `neutral`). */
+export declare function chartSeriesColor(index: number): ChartColor;
+/**
+ * CSS custom properties for one series colour, read by the chart items:
+ * `--chart-color` (fill), `--chart-color-subtle` (accent edge) and
+ * `--chart-color-soft` (area gradient / line nodes), each a `--orvain-chart-*`
+ * token.
+ */
+export declare function chartFillVars(color: ChartFill, prefix?: string): Record<string, string>;

package/dist/chart/color.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Chart colour palette shared by every chart part, chart item and composed
+ * chart (React + Vue). Figma draws 8 series colours on the Key-Value and Chart
+ * pages ("Chart Legend Dots v2", "Bar Chart Item v2", …):
+ *
+ * | ChartColor | Figma name                    | Fill    |
+ * |------------|-------------------------------|---------|
+ * | `neutral`  | 🩶 Neutral / 🤍 Light Gray     | #F2F2F2 |
+ * | `grey`     | 🖤 Grey / 🩶 Gray              | #2A2A2A |
+ * | `blue`     | 💙 Brand / 💙 Blue             | #005CF8 |
+ * | `purple`   | 💜 Brand / 💜 Purple           | #9B49DD |
+ * | `yellow`   | 💛 Yellow                      | #FDDA2A |
+ * | `orange`   | 🧡 Orange                      | #FF9000 |
+ * | `green`    | 💚 Green                       | #2ED714 |
+ * | `red`      | ❤️ Red / 💔 Red                | #EC0D33 |
+ *
+ * The values live in `packages/tokens/src/chart.json` (`--orvain-chart-*`).
+ * Some parts draw another shade of the same series colour (the v1 legend dot
+ * uses #4C4C4C for grey and #229A14 for green; the legend bar uses #CBCBCB for
+ * neutral), so each colour has three roles: `fill`, `dot` and `line`.
+ */
+export type ChartColor = 'neutral' | 'grey' | 'blue' | 'purple' | 'yellow' | 'orange' | 'green' | 'red';
+/** Every `ChartColor`, in Figma's variant order. */
+export declare const CHART_COLORS: readonly ChartColor[];
+/**
+ * Which shade of a series colour a part paints.
+ * - `fill`: bars, areas, donut segments, v2 legend swatches (Figma "Surface/Base").
+ * - `dot`: the v1 legend dot and the ForceTip dot.
+ * - `line`: the legend bar (Chart Legend Border).
+ */
+export type ChartColorRole = 'fill' | 'dot' | 'line' | 'accent' | 'soft';
+/**
+ * Extra shades the Chart page draws besides the 8 series colours (Donut v1/v2
+ * blues, Bar Chart Item v2 accents, Donut v4 rings, the dark green of stacked
+ * and grouped bars). Each one has the same token roles as a `ChartColor`.
+ *
+ * | ChartShade     | Fill    |
+ * |----------------|---------|
+ * | `blue-light`   | #3582FF |
+ * | `blue-lighter` | #A6C5FF |
+ * | `blue-dark`    | #0042B7 |
+ * | `yellow-light` | #FCE262 |
+ * | `orange-light` | #FFBE71 |
+ * | `green-dark`   | #229A14 |
+ * | `green-darker` | #186112 |
+ */
+export type ChartShade = 'blue-light' | 'blue-lighter' | 'blue-dark' | 'yellow-light' | 'orange-light' | 'green-dark' | 'green-darker';
+/** Every `ChartShade`. */
+export declare const CHART_SHADES: readonly ChartShade[];
+/** Any paint a chart accepts: a series `ChartColor` or one of its `ChartShade`s. */
+export type ChartFill = ChartColor | ChartShade;
+/** Figma "Theme" of chart fills: Solid, Ghost 20% or Ghost 8% opacity. */
+export type ChartTheme = 'solid' | 'ghost20' | 'ghost8';
+/** CSS custom property holding a chart colour, e.g. `var(--orvain-chart-fill-blue)`. */
+export declare function chartColorVar(color: ChartFill, role?: ChartColorRole): string;
+/**
+ * Text colour for a series hue (tinted captions). Hues whose dot colour is too
+ * light for 4.5:1 text have a darker `--orvain-chart-caption-*` token; the
+ * others fall back to the dot colour.
+ */
+export declare function chartCaptionColorVar(color: ChartFill): string;
+/** Opacity of a chart fill for a Figma theme (Solid 1, Ghost 20% 0.2, Ghost 8% 0.08). */
+export declare function chartThemeOpacity(theme?: ChartTheme): number;
+/** Colour for the n-th series when the data doesn't set one (cycles the palette, skipping `neutral`). */
+export declare function chartSeriesColor(index: number): ChartColor;
+/**
+ * CSS custom properties for one series colour, read by the chart items:
+ * `--chart-color` (fill), `--chart-color-subtle` (accent edge) and
+ * `--chart-color-soft` (area gradient / line nodes), each a `--orvain-chart-*`
+ * token.
+ */
+export declare function chartFillVars(color: ChartFill, prefix?: string): Record<string, string>;
+//# sourceMappingURL=color.d.ts.map

package/dist/chart/index.d.cts

@@ -0,0 +1,2 @@
+export * from './color.cjs';
+export * from './math.cjs';

package/dist/chart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color.js';
+export * from './math.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/chart/math.d.cts

@@ -0,0 +1,66 @@
+/**
+ * Small, dependency-free maths for SVG/CSS charts (no chart library). Shared
+ * by the React and Vue chart components.
+ */
+import type { ChartColor } from './color.cjs';
+/** One data point. Every chart takes `data: ChartDatum[]`. */
+export interface ChartDatum {
+    label: string;
+    value: number;
+    color?: ChartColor;
+}
+/** Clamp `value` into `[min, max]`. */
+export declare function clampChartValue(value: number, min: number, max: number): number;
+/** Sum of the `value`s (non-finite values count as 0). */
+export declare function sumValues(data: readonly {
+    value: number;
+}[]): number;
+/** Largest `value` (0 for an empty list). */
+export declare function maxValue(data: readonly {
+    value: number;
+}[]): number;
+/** `value / total` as a 0–100 percentage, clamped (0 when `total` is 0). */
+export declare function toPercent(value: number, total: number): number;
+/**
+ * A "nice" axis maximum ≥ `value`: 1, 2, 2.5 or 5 × 10ⁿ (87 → 100, 7496 → 10000).
+ * Returns 1 for 0 or negative input so scales never divide by zero.
+ */
+export declare function niceMax(value: number): number;
+/** `count + 1` evenly spaced ticks from 0 to `max`, e.g. (100, 4) → [0, 25, 50, 75, 100]. */
+export declare function ticks(max: number, count?: number): number[];
+/** A linear scale mapping `[d0, d1]` onto `[r0, r1]`. */
+export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): (value: number) => number;
+/** Cumulative offsets for stacked series: each value gets its `start` and `end` along the stack. */
+export declare function stackValues(values: readonly number[]): {
+    start: number;
+    end: number;
+}[];
+/** Point on a circle; angle in degrees, 0° = 12 o'clock, clockwise. */
+export declare function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): {
+    x: number;
+    y: number;
+};
+/**
+ * SVG path `d` for a ring segment (donut slice) between two angles (degrees,
+ * 0° = 12 o'clock, clockwise). `innerR` 0 draws a pie slice.
+ */
+export declare function arcPath(cx: number, cy: number, outerR: number, innerR: number, startAngle: number, endAngle: number): string;
+/**
+ * Plain-text summary of a series for a chart's `aria-label` or hidden table
+ * caption ("Jan 20, Feb 35, Mar 12"). `format` formats each value.
+ */
+export declare function describeData(data: readonly ChartDatum[], format?: (value: number) => string): string;
+/**
+ * Roving-tabindex helper for chart data points (WAI-ARIA APG): the next index
+ * for an arrow / Home / End key, or `null` when the key isn't handled.
+ * Left/Up go back, Right/Down go forward; no wrap-around.
+ */
+export declare function nextChartIndex(key: string, index: number, count: number): number | null;
+/**
+ * Grid keyboard model (WAI-ARIA APG Grid) for cells laid out row by row,
+ * `columns` per row: the next cell index for a key, or `null` when the key
+ * isn't handled. Arrows move one cell without wrapping, Home / End go to the
+ * row's first / last cell, Ctrl+Home / Ctrl+End to the grid's first / last
+ * cell, Page Up / Page Down to the column's first / last cell.
+ */
+export declare function nextGridCell(key: string, index: number, columns: number, count: number, ctrlKey?: boolean): number | null;

package/dist/chart/math.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Small, dependency-free maths for SVG/CSS charts (no chart library). Shared
+ * by the React and Vue chart components.
+ */
+import type { ChartColor } from './color.js';
+/** One data point. Every chart takes `data: ChartDatum[]`. */
+export interface ChartDatum {
+    label: string;
+    value: number;
+    color?: ChartColor;
+}
+/** Clamp `value` into `[min, max]`. */
+export declare function clampChartValue(value: number, min: number, max: number): number;
+/** Sum of the `value`s (non-finite values count as 0). */
+export declare function sumValues(data: readonly {
+    value: number;
+}[]): number;
+/** Largest `value` (0 for an empty list). */
+export declare function maxValue(data: readonly {
+    value: number;
+}[]): number;
+/** `value / total` as a 0–100 percentage, clamped (0 when `total` is 0). */
+export declare function toPercent(value: number, total: number): number;
+/**
+ * A "nice" axis maximum ≥ `value`: 1, 2, 2.5 or 5 × 10ⁿ (87 → 100, 7496 → 10000).
+ * Returns 1 for 0 or negative input so scales never divide by zero.
+ */
+export declare function niceMax(value: number): number;
+/** `count + 1` evenly spaced ticks from 0 to `max`, e.g. (100, 4) → [0, 25, 50, 75, 100]. */
+export declare function ticks(max: number, count?: number): number[];
+/** A linear scale mapping `[d0, d1]` onto `[r0, r1]`. */
+export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): (value: number) => number;
+/** Cumulative offsets for stacked series: each value gets its `start` and `end` along the stack. */
+export declare function stackValues(values: readonly number[]): {
+    start: number;
+    end: number;
+}[];
+/** Point on a circle; angle in degrees, 0° = 12 o'clock, clockwise. */
+export declare function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): {
+    x: number;
+    y: number;
+};
+/**
+ * SVG path `d` for a ring segment (donut slice) between two angles (degrees,
+ * 0° = 12 o'clock, clockwise). `innerR` 0 draws a pie slice.
+ */
+export declare function arcPath(cx: number, cy: number, outerR: number, innerR: number, startAngle: number, endAngle: number): string;
+/**
+ * Plain-text summary of a series for a chart's `aria-label` or hidden table
+ * caption ("Jan 20, Feb 35, Mar 12"). `format` formats each value.
+ */
+export declare function describeData(data: readonly ChartDatum[], format?: (value: number) => string): string;
+/**
+ * Roving-tabindex helper for chart data points (WAI-ARIA APG): the next index
+ * for an arrow / Home / End key, or `null` when the key isn't handled.
+ * Left/Up go back, Right/Down go forward; no wrap-around.
+ */
+export declare function nextChartIndex(key: string, index: number, count: number): number | null;
+/**
+ * Grid keyboard model (WAI-ARIA APG Grid) for cells laid out row by row,
+ * `columns` per row: the next cell index for a key, or `null` when the key
+ * isn't handled. Arrows move one cell without wrapping, Home / End go to the
+ * row's first / last cell, Ctrl+Home / Ctrl+End to the grid's first / last
+ * cell, Page Up / Page Down to the column's first / last cell.
+ */
+export declare function nextGridCell(key: string, index: number, columns: number, count: number, ctrlKey?: boolean): number | null;
+//# sourceMappingURL=math.d.ts.map

package/dist/chart-items/index.d.cts

@@ -0,0 +1,64 @@
+/**
+ * Geometry helpers for the chart *items* (Figma "Chart" page 7006:30287):
+ * bar fill ratios, stacking shares, line/area paths and donut arcs.
+ *
+ * Pure functions, shared by the React and Vue packages. They live apart from
+ * `src/chart/` (scales, legends — parts branch) so the two can merge without
+ * touching the same file.
+ */
+export interface ChartPoint {
+    x: number;
+    y: number;
+}
+/** `value / max` as a 0–1 ratio. Non-finite input, `max <= 0` → 0. */
+export declare function chartRatio(value: number, max: number): number;
+/** Sum of the finite, positive values. */
+export declare function chartSum(values: readonly number[]): number;
+export interface ChartStack {
+    /** Share of each value in the 0–1 range (same order as the input). */
+    shares: number[];
+    /** Share left empty (track) when `max` is larger than the total. */
+    rest: number;
+    /** The scale used (`max` or, without it, the total). */
+    total: number;
+}
+/**
+ * Splits values into shares of one bar. Without `max` the values fill the
+ * whole bar; with a larger `max` the remainder is returned as `rest`.
+ */
+export declare function chartStack(values: readonly number[], max?: number): ChartStack;
+/** `M x y L …` straight polyline. */
+export declare function linearLinePath(points: readonly ChartPoint[]): string;
+/**
+ * Smooth line with horizontal tangents at every point (cubic Béziers whose
+ * control points sit a third of the way along each step), the curve Figma's
+ * Area Chart v1/v3 vectors use. It never overshoots above or below a point.
+ */
+export declare function smoothLinePath(points: readonly ChartPoint[]): string;
+/**
+ * Stepped line: every point becomes a flat run `plateau` wide (centred on
+ * the point, clipped at the ends) joined by straight ramps. Approximates the
+ * hand-drawn Area Chart v2 silhouette.
+ */
+export declare function plateauLinePath(points: readonly ChartPoint[], plateau: number): string;
+/** Closes a line path down to `baseline` so it can be filled as an area. */
+export declare function areaPath(line: string, points: readonly ChartPoint[], baseline: number): string;
+/** Point on a circle; angle 0 = 12 o'clock, growing clockwise (radians). */
+export declare function polarPoint(cx: number, cy: number, r: number, angle: number): ChartPoint;
+/** Open circular arc from `a0` to `a1` (clockwise, radians), for stroked rings. */
+export declare function strokeArcPath(cx: number, cy: number, r: number, a0: number, a1: number): string;
+/**
+ * Filled ring sector between `rInner` and `rOuter` from `a0` to `a1`
+ * (clockwise, radians) with rounded corners of `corner` px.
+ */
+export declare function annularSectorPath(cx: number, cy: number, rOuter: number, rInner: number, a0: number, a1: number, corner?: number): string;
+export interface ChartArc {
+    start: number;
+    end: number;
+}
+/**
+ * Start/end angles (radians, 0 = 12 o'clock, clockwise) for each share of a
+ * full circle, leaving `gap` radians between neighbours. Zero shares get a
+ * zero-length arc.
+ */
+export declare function donutArcs(shares: readonly number[], gap?: number): ChartArc[];

package/dist/chart-items/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Geometry helpers for the chart *items* (Figma "Chart" page 7006:30287):
+ * bar fill ratios, stacking shares, line/area paths and donut arcs.
+ *
+ * Pure functions, shared by the React and Vue packages. They live apart from
+ * `src/chart/` (scales, legends — parts branch) so the two can merge without
+ * touching the same file.
+ */
+export interface ChartPoint {
+    x: number;
+    y: number;
+}
+/** `value / max` as a 0–1 ratio. Non-finite input, `max <= 0` → 0. */
+export declare function chartRatio(value: number, max: number): number;
+/** Sum of the finite, positive values. */
+export declare function chartSum(values: readonly number[]): number;
+export interface ChartStack {
+    /** Share of each value in the 0–1 range (same order as the input). */
+    shares: number[];
+    /** Share left empty (track) when `max` is larger than the total. */
+    rest: number;
+    /** The scale used (`max` or, without it, the total). */
+    total: number;
+}
+/**
+ * Splits values into shares of one bar. Without `max` the values fill the
+ * whole bar; with a larger `max` the remainder is returned as `rest`.
+ */
+export declare function chartStack(values: readonly number[], max?: number): ChartStack;
+/** `M x y L …` straight polyline. */
+export declare function linearLinePath(points: readonly ChartPoint[]): string;
+/**
+ * Smooth line with horizontal tangents at every point (cubic Béziers whose
+ * control points sit a third of the way along each step), the curve Figma's
+ * Area Chart v1/v3 vectors use. It never overshoots above or below a point.
+ */
+export declare function smoothLinePath(points: readonly ChartPoint[]): string;
+/**
+ * Stepped line: every point becomes a flat run `plateau` wide (centred on
+ * the point, clipped at the ends) joined by straight ramps. Approximates the
+ * hand-drawn Area Chart v2 silhouette.
+ */
+export declare function plateauLinePath(points: readonly ChartPoint[], plateau: number): string;
+/** Closes a line path down to `baseline` so it can be filled as an area. */
+export declare function areaPath(line: string, points: readonly ChartPoint[], baseline: number): string;
+/** Point on a circle; angle 0 = 12 o'clock, growing clockwise (radians). */
+export declare function polarPoint(cx: number, cy: number, r: number, angle: number): ChartPoint;
+/** Open circular arc from `a0` to `a1` (clockwise, radians), for stroked rings. */
+export declare function strokeArcPath(cx: number, cy: number, r: number, a0: number, a1: number): string;
+/**
+ * Filled ring sector between `rInner` and `rOuter` from `a0` to `a1`
+ * (clockwise, radians) with rounded corners of `corner` px.
+ */
+export declare function annularSectorPath(cx: number, cy: number, rOuter: number, rInner: number, a0: number, a1: number, corner?: number): string;
+export interface ChartArc {
+    start: number;
+    end: number;
+}
+/**
+ * Start/end angles (radians, 0 = 12 o'clock, clockwise) for each share of a
+ * full circle, leaving `gap` radians between neighbours. Zero shares get a
+ * zero-length arc.
+ */
+export declare function donutArcs(shares: readonly number[], gap?: number): ChartArc[];
+//# sourceMappingURL=index.d.ts.map

package/dist/codeTokenizer.d.cts

@@ -0,0 +1,29 @@
+/**
+ * Tiny built-in syntax tokenizer for <CodeSnippet> (React + Vue).
+ *
+ * Covers the roles the Figma "CodeSnippet [v1]" (7489:54806) colours:
+ * keywords, strings, comments, numbers, punctuation, function names,
+ * variables, types, JSX/HTML tags + attributes, for JS / JSX / TS / TSX /
+ * HTML / CSS. It is deliberately small (no grammar engine, no dependency):
+ * apps that need full-fidelity highlighting pass their own tokens
+ * (`tokens` / `highlight` props) from Shiki, Prism, etc.
+ */
+export type CodeTokenType = 'plain' | 'keyword' | 'string' | 'comment' | 'number' | 'punctuation' | 'function' | 'variable' | 'type' | 'builtin' | 'tag' | 'attr' | 'text';
+export interface CodeToken {
+    /** Raw text of the token (never contains a newline once split into lines). */
+    content: string;
+    /** Semantic role, mapped to a Figma syntax colour. Defaults to `plain`. */
+    type?: CodeTokenType;
+    /** Explicit colour from an external highlighter (e.g. Shiki). Wins over `type`. */
+    color?: string;
+}
+export type CodeLanguage = 'js' | 'jsx' | 'ts' | 'tsx' | 'html' | 'css' | 'plain';
+/** Guess a language from a file name such as `Counter.tsx`. */
+export declare function inferCodeLanguage(fileName?: string): CodeLanguage;
+/** Splits a flat token stream into lines (tokens never span a newline afterwards). */
+export declare function splitCodeTokensIntoLines(tokens: CodeToken[]): CodeToken[][];
+/**
+ * Tokenizes `code` into lines of coloured tokens.
+ * @example tokenizeCode("const a = 1;", 'ts') // [[{content:'const',type:'keyword'}, …]]
+ */
+export declare function tokenizeCode(code: string, language?: CodeLanguage): CodeToken[][];

package/dist/codeTokenizer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Tiny built-in syntax tokenizer for <CodeSnippet> (React + Vue).
+ *
+ * Covers the roles the Figma "CodeSnippet [v1]" (7489:54806) colours:
+ * keywords, strings, comments, numbers, punctuation, function names,
+ * variables, types, JSX/HTML tags + attributes, for JS / JSX / TS / TSX /
+ * HTML / CSS. It is deliberately small (no grammar engine, no dependency):
+ * apps that need full-fidelity highlighting pass their own tokens
+ * (`tokens` / `highlight` props) from Shiki, Prism, etc.
+ */
+export type CodeTokenType = 'plain' | 'keyword' | 'string' | 'comment' | 'number' | 'punctuation' | 'function' | 'variable' | 'type' | 'builtin' | 'tag' | 'attr' | 'text';
+export interface CodeToken {
+    /** Raw text of the token (never contains a newline once split into lines). */
+    content: string;
+    /** Semantic role, mapped to a Figma syntax colour. Defaults to `plain`. */
+    type?: CodeTokenType;
+    /** Explicit colour from an external highlighter (e.g. Shiki). Wins over `type`. */
+    color?: string;
+}
+export type CodeLanguage = 'js' | 'jsx' | 'ts' | 'tsx' | 'html' | 'css' | 'plain';
+/** Guess a language from a file name such as `Counter.tsx`. */
+export declare function inferCodeLanguage(fileName?: string): CodeLanguage;
+/** Splits a flat token stream into lines (tokens never span a newline afterwards). */
+export declare function splitCodeTokensIntoLines(tokens: CodeToken[]): CodeToken[][];
+/**
+ * Tokenizes `code` into lines of coloured tokens.
+ * @example tokenizeCode("const a = 1;", 'ts') // [[{content:'const',type:'keyword'}, …]]
+ */
+export declare function tokenizeCode(code: string, language?: CodeLanguage): CodeToken[][];
+//# sourceMappingURL=codeTokenizer.d.ts.map

package/dist/cssModule.d.cts

@@ -0,0 +1,12 @@
+/**
+ * Looks up a CSS Module class by a computed key, such as a variant name or
+ * `` `size-${px}` ``. A key the stylesheet doesn't define (typically the
+ * default variant, which the base rules already style) gives `undefined`,
+ * which clsx and Vue's `:class` drop.
+ *
+ * The class map must still define at least one key of the key's type, so a
+ * misspelt key family (`` `varaint-${v}` ``) fails to compile.
+ *
+ * @example clsx(styles.root, moduleClass(styles, variant))
+ */
+export declare function moduleClass<K extends string>(styles: Partial<Record<NoInfer<K>, string>>, key: K): string | undefined;

package/dist/cssModule.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Looks up a CSS Module class by a computed key, such as a variant name or
+ * `` `size-${px}` ``. A key the stylesheet doesn't define (typically the
+ * default variant, which the base rules already style) gives `undefined`,
+ * which clsx and Vue's `:class` drop.
+ *
+ * The class map must still define at least one key of the key's type, so a
+ * misspelt key family (`` `varaint-${v}` ``) fails to compile.
+ *
+ * @example clsx(styles.root, moduleClass(styles, variant))
+ */
+export declare function moduleClass<K extends string>(styles: Partial<Record<NoInfer<K>, string>>, key: K): string | undefined;
+//# sourceMappingURL=cssModule.d.ts.map

package/dist/dismiss.d.cts

@@ -0,0 +1,40 @@
+/**
+ * Light-dismiss for open surfaces (menus, popovers, listboxes, dialogs):
+ * a pointer press outside, Escape, or focus moving outside closes them.
+ *
+ * Open surfaces form a stack in the order they open. Escape only closes the
+ * top one, so a menu inside a dialog closes before the dialog. A press or
+ * focus inside a surface that opened later (a submenu, or a popover portalled
+ * out of its parent) counts as inside every surface below it, so it never
+ * closes the parent.
+ *
+ * Containment uses `composedPath()`, so presses inside shadow roots count
+ * as inside the host that owns them.
+ */
+export type DismissReason = 'outside' | 'escape' | 'focusout';
+/**
+ * Why an overlay (modal, drawer, sheet, popover, lightbox) asked to close:
+ * its Cancel button, Escape, a press outside it, or its × / other close action.
+ */
+export type OverlayCloseReason = 'cancel' | 'escape' | 'outside' | 'close';
+/** Second argument of an overlay's `onOpenChange` / `openChange`. */
+export interface OverlayOpenChangeDetails {
+    reason: OverlayCloseReason;
+}
+export interface DismissLayerOptions {
+    /** Elements that count as inside: the surface, its trigger, portalled parts. Read on every event. */
+    getElements: () => Iterable<Element | null | undefined>;
+    /** Asks the owner to close. The layer stays registered until its remove function runs. */
+    onDismiss: (reason: DismissReason, event: Event) => void;
+    /** Close on a pointer press outside. Default `true`. */
+    outsidePress?: boolean | undefined;
+    /** Close on Escape while this is the top layer. Default `true`. */
+    escapeKey?: boolean | undefined;
+    /** Close when focus moves outside. Default `false` (menus and listboxes keep focus on their trigger). */
+    focusOut?: boolean | undefined;
+}
+/**
+ * Registers an open surface on the dismiss stack; returns the function that
+ * removes it (call it when the surface closes or unmounts).
+ */
+export declare function addDismissLayer(options: DismissLayerOptions): () => void;

package/dist/dismiss.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Light-dismiss for open surfaces (menus, popovers, listboxes, dialogs):
+ * a pointer press outside, Escape, or focus moving outside closes them.
+ *
+ * Open surfaces form a stack in the order they open. Escape only closes the
+ * top one, so a menu inside a dialog closes before the dialog. A press or
+ * focus inside a surface that opened later (a submenu, or a popover portalled
+ * out of its parent) counts as inside every surface below it, so it never
+ * closes the parent.
+ *
+ * Containment uses `composedPath()`, so presses inside shadow roots count
+ * as inside the host that owns them.
+ */
+export type DismissReason = 'outside' | 'escape' | 'focusout';
+/**
+ * Why an overlay (modal, drawer, sheet, popover, lightbox) asked to close:
+ * its Cancel button, Escape, a press outside it, or its × / other close action.
+ */
+export type OverlayCloseReason = 'cancel' | 'escape' | 'outside' | 'close';
+/** Second argument of an overlay's `onOpenChange` / `openChange`. */
+export interface OverlayOpenChangeDetails {
+    reason: OverlayCloseReason;
+}
+export interface DismissLayerOptions {
+    /** Elements that count as inside: the surface, its trigger, portalled parts. Read on every event. */
+    getElements: () => Iterable<Element | null | undefined>;
+    /** Asks the owner to close. The layer stays registered until its remove function runs. */
+    onDismiss: (reason: DismissReason, event: Event) => void;
+    /** Close on a pointer press outside. Default `true`. */
+    outsidePress?: boolean | undefined;
+    /** Close on Escape while this is the top layer. Default `true`. */
+    escapeKey?: boolean | undefined;
+    /** Close when focus moves outside. Default `false` (menus and listboxes keep focus on their trigger). */
+    focusOut?: boolean | undefined;
+}
+/**
+ * Registers an open surface on the dismiss stack; returns the function that
+ * removes it (call it when the surface closes or unmounts).
+ */
+export declare function addDismissLayer(options: DismissLayerOptions): () => void;
+//# sourceMappingURL=dismiss.d.ts.map