@fairgarden/design 0.1.0-alpha.0

package/package.json

@@ -0,0 +1,112 @@
+{
+  "sideEffects": [
+    "*.css",
+    "./utils/fonts.js",
+    "./src/utils/fonts.ts"
+  ],
+  "name": "@fairgarden/design",
+  "version": "0.1.0-alpha.0",
+  "description": "FairGarden Design System",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fairgarden/design.git"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "files": [
+    "components",
+    "utils",
+    "icons"
+  ],
+  "type": "module",
+  "keywords": [
+    "design",
+    "system",
+    "ui",
+    "components",
+    "react",
+    "typescript",
+    "fairgarden",
+    "base-ui"
+  ],
+  "author": "FairGarden",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@fairgarden/distribution": "^0.1.0-alpha.0",
+    "@material-symbols/svg-400": "^0.47.5",
+    "@material-symbols/svg-500": "^0.47.5",
+    "@material-symbols/svg-600": "^0.47.5",
+    "@material-symbols/svg-700": "^0.47.5",
+    "@protomaps/basemaps": "^5.7.2",
+    "@radix-ui/colors": "^3.0.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.70.0",
+    "@typescript-eslint/parser": "^8.70.0",
+    "classnames": "^2.5.1",
+    "concurrently": "^10.0.5",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react": "^7.37.5",
+    "maplibre-gl": "^6.11.1",
+    "open-props": "^1.7.23",
+    "pmtiles": "^4.5.0",
+    "postcss": "^8.5.28",
+    "postcss-cli": "^12.0.0",
+    "postcss-custom-media": "^12.0.1",
+    "postcss-import": "^17.0.0",
+    "prettier": "^3.9.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tslib": "^2.8.1",
+    "typed-css-modules": "^0.9.1",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@protomaps/basemaps": "^5.7.2",
+    "maplibre-gl": "^6.11.1",
+    "pmtiles": "^4.5.0",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "peerDependenciesMeta": {
+    "@protomaps/basemaps": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    },
+    "pmtiles": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@fontsource-variable/figtree": "^5.3.0",
+    "@fontsource-variable/fraunces": "^5.3.0",
+    "@fontsource-variable/source-serif-4": "^5.3.0",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "recharts": "^3.10.1"
+  },
+  "scripts": {
+    "build": "pnpm run generate && pnpm run css-types && tsc && pnpm run postcss",
+    "dev": "concurrently --names css-types,typescript,postcss \"pnpm run css-types-watch\" \"tsc --pretty --watch --preserveWatchOutput\" \"pnpm run postcss-watch\"",
+    "postcss": "postcss './src/**/(*.css|*.module.css)' --base ./src -d . --config ./postcss.config.js",
+    "postcss-watch": "postcss './src/**/(*.css|*.module.css)' --base ./src -d . --config ./postcss.config.js --watch",
+    "css-types": "tcm -p '**/*.module.css' ./src",
+    "css-types-watch": "tcm -p '**/*.module.css' ./src --watch",
+    "lint": "eslint",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "canary": "fg-dist canary",
+    "release": "fg-dist release",
+    "release:check": "fg-dist release --check",
+    "generate": "node scripts/build-colors.js && node scripts/build-icons.js"
+  }
+}

package/utils/ClientProvider.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+export type Direction = 'ltr' | 'rtl';
+export interface LocaleValue {
+    locale: string;
+    direction: Direction;
+}
+/** The writing direction of a BCP 47 locale. */
+export declare function getDirection(locale: string): Direction;
+/** The current locale and its writing direction. */
+export declare function useLocale(): LocaleValue;
+/**
+ * Provides the locale (and its direction) to the design system and Base UI.
+ * Place it once in the app shell, inside `<html lang={locale}>`.
+ */
+export declare const ClientProvider: FunctionComponent<PropsWithChildren<{
+    locale: string;
+}>>;
+//# sourceMappingURL=ClientProvider.d.ts.map

package/utils/ClientProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientProvider.d.ts","sourceRoot":"","sources":["../src/utils/ClientProvider.tsx"],"names":[],"mappings":"AAEA,OAAc,EAEZ,iBAAiB,EACjB,iBAAiB,EAGlB,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AAErC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,SAAS,CAAA;CACrB;AA0BD,gDAAgD;AAChD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAYtD;AAMD,oDAAoD;AACpD,wBAAgB,SAAS,IAAI,WAAW,CAEvC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAC5C,iBAAiB,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAWtC,CAAA"}

package/utils/ClientProvider.js

@@ -0,0 +1,55 @@
+'use client';
+import React, { createContext, useContext, useMemo, } from 'react';
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+// Languages written right to left, for runtimes without Intl.Locale text info.
+const RTL_LANGUAGES = new Set([
+    'ar',
+    'arc',
+    'ckb',
+    'dv',
+    'fa',
+    'he',
+    'iw',
+    'ks',
+    'ku',
+    'ps',
+    'sd',
+    'ug',
+    'ur',
+    'yi',
+]);
+const RTL_SCRIPTS = new Set(['Arab', 'Hebr', 'Syrc', 'Thaa', 'Nkoo', 'Adlm']);
+/** The writing direction of a BCP 47 locale. */
+export function getDirection(locale) {
+    try {
+        const intlLocale = new Intl.Locale(locale);
+        const info = intlLocale.getTextInfo?.() ?? intlLocale.textInfo;
+        if (info?.direction)
+            return info.direction === 'rtl' ? 'rtl' : 'ltr';
+        const script = intlLocale.maximize().script;
+        if (script)
+            return RTL_SCRIPTS.has(script) ? 'rtl' : 'ltr';
+        return RTL_LANGUAGES.has(intlLocale.language) ? 'rtl' : 'ltr';
+    }
+    catch {
+        const language = locale.split(/[-_]/)[0]?.toLowerCase() ?? '';
+        return RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr';
+    }
+}
+const defaultLocale = { locale: 'en-US', direction: 'ltr' };
+const LocaleContext = createContext(defaultLocale);
+LocaleContext.displayName = 'LocaleContext';
+/** The current locale and its writing direction. */
+export function useLocale() {
+    return useContext(LocaleContext);
+}
+/**
+ * Provides the locale (and its direction) to the design system and Base UI.
+ * Place it once in the app shell, inside `<html lang={locale}>`.
+ */
+export const ClientProvider = ({ children, locale }) => {
+    const value = useMemo(() => ({ locale, direction: getDirection(locale) }), [locale]);
+    return (React.createElement(LocaleContext.Provider, { value: value },
+        React.createElement(DirectionProvider, { direction: value.direction }, children)));
+};
+//# sourceMappingURL=ClientProvider.js.map

package/utils/ClientProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientProvider.js","sourceRoot":"","sources":["../src/utils/ClientProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AASrE,+EAA+E;AAC/E,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC;IAC5B,IAAI;IACJ,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACL,CAAC,CAAA;AACF,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAO7E,gDAAgD;AAChD,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAuB,CAAA;QAChE,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,EAAE,EAAE,IAAI,UAAU,CAAC,QAAQ,CAAA;QAC9D,IAAI,IAAI,EAAE,SAAS;YAAE,OAAO,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QACpE,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAA;QAC3C,IAAI,MAAM;YAAE,OAAO,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QAC1D,OAAO,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IAC/D,CAAC;IAAC,MAAM,CAAC;QACP,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;QAC7D,OAAO,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IACpD,CAAC;AACH,CAAC;AAED,MAAM,aAAa,GAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA;AACxE,MAAM,aAAa,GAAG,aAAa,CAAc,aAAa,CAAC,CAAA;AAC/D,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,oDAAoD;AACpD,MAAM,UAAU,SAAS;IACvB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAA;AAClC,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAEvB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,EACnD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClC,oBAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAG,QAAQ,CAAqB,CACtD,CAC1B,CAAA;AACH,CAAC,CAAA"}

package/utils/Ornament.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { type RadixScale } from './scales';
+/** The §4.7 marker set: origin ○, waypoint ×, terminal ▷ and current ●. */
+export type MarkerKind = 'origin' | 'waypoint' | 'terminal' | 'current';
+/** Origin and terminal sizes: on a trail (5 / 6 px) or a timeline (8 px). */
+export type MarkerSize = 'trail' | 'timeline';
+/** Props for Marker: SVG props, the kind, the size and the terminal's direction. */
+export type MarkerProps = Omit<React.SVGProps<SVGSVGElement>, 'children' | 'ref'> & {
+    /** `origin` ○ (start), `waypoint` × (turns, intermediate entries), `terminal` ▷ (end), `current` ● ("now"). */
+    kind: MarkerKind;
+    /**
+     * `trail` (default): origin 5 px, terminal 6 px. `timeline`: origin and
+     * terminal 8 px. The waypoint (9 px) and current dot (10 px) keep one size.
+     */
+    size?: MarkerSize;
+    /** The terminal's direction of travel in degrees: 0 the inline end, 90 down (default). */
+    angle?: number;
+};
+/**
+ * A §4.7 marker (`marker-origin`, `marker-waypoint`, `marker-terminal`,
+ * `marker-current`) as its own inline SVG, drawn in `currentColor` at its
+ * token size. Decorative; say the state in words.
+ */
+export declare function Marker(props: MarkerProps): React.JSX.Element;
+/** Props for MarkerIndex: `span` props, the number and its padded width. */
+export type MarkerIndexProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /** The callout's number, keyed to the list beside the figure. */
+    value: number;
+    /** Digits to zero-pad to: the widest count ("01"–"09" for up to 99 items). Default 2. */
+    digits?: number;
+};
+/**
+ * `marker-index` (§4.7.5, §8.10): a 24 px numbered circle, a `--primary1`
+ * face with a `--primary12` edge and a zero-padded `type-label` numeral.
+ * Numbering runs continuously across one figure.
+ */
+export declare function MarkerIndex(props: MarkerIndexProps): React.JSX.Element;
+/** Props for MarkerRank: `span` props and the rank. */
+export type MarkerRankProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /** The rank, written with no period. */
+    value: number;
+};
+/**
+ * The rank numeral of a ranked list (§8.4, §12.11): `type-body-ui` data
+ * numerals in `--role-muted`, no period, end-aligned in a 2.5ch column.
+ */
+export declare function MarkerRank(props: MarkerRankProps): React.JSX.Element;
+/** The trail library shapes built so far (§4.7.1). */
+export type TrailShape = 'short-tail' | 'entry';
+/** Props for OrnamentTrail: SVG props, the library shape and the mirror. */
+export type OrnamentTrailProps = Omit<React.SVGProps<SVGSVGElement>, 'children' | 'ref'> & {
+    /**
+     * `short-tail` (default): a short wander that turns down into its
+     * terminal. `entry`: one loop near the start, then a level run into a
+     * label at the inline end.
+     */
+    shape?: TrailShape;
+    /** Mirror it: the entry-right form, or a short tail that starts at the inline end. */
+    flip?: boolean;
+};
+/**
+ * `ornament-trail` (§4.7.1): the system's signature line ornament, a
+ * freehand `line-dashed` path in `--role-accent` (`--primary12` on the
+ * saturated fields) from a `marker-origin` circle to a `marker-terminal`
+ * triangle. The element's one ornament; decorative (`aria-hidden`).
+ */
+export declare function OrnamentTrail(props: OrnamentTrailProps): React.JSX.Element;
+/** Props for OrnamentBlob: `span` props, the mark and the secondary override. */
+export type OrnamentBlobProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /**
+     * The mark centred on the front disc, drawn in its contrast ink
+     * (`currentColor` is `--secondary-contrast`): a logo, a block icon or a
+     * stat numeral, about 42% of the disc's width (57 px).
+     */
+    children?: React.ReactNode;
+    /**
+     * Secondary Radix scale: both discs (steps 9 and 7) and the mark's
+     * contrast ink. Never defaulted; omitted, it inherits the scope [D133].
+     * On a pastel, `green` keeps the brand green (verified on all six, §6.6).
+     */
+    secondary?: RadixScale;
+};
+/**
+ * `ornament-blob` (§6.6, §1.5.16): the LTA blob mount, a flat hand-cut disc
+ * in `--secondary9` over a larger, turned under-disc in `--secondary7`,
+ * holding a centred mark in `--secondary-contrast`. Once per page, at a
+ * fixed 136 × 130 px. On `forest` and the solid fields the mount is omitted
+ * and the bare mark takes the scope's one ink [D14, D162]. In print the
+ * discs drop and the mark prints black. Decorative: the discs are
+ * `aria-hidden`; give a meaningful mark its own text alternative.
+ */
+export declare function OrnamentBlob(props: OrnamentBlobProps): React.JSX.Element;
+//# sourceMappingURL=Ornament.d.ts.map

package/utils/Ornament.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ornament.d.ts","sourceRoot":"","sources":["../src/utils/Ornament.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAA0B,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAclE,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAA;AAEvE,6EAA6E;AAC7E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,UAAU,CAAA;AAoD7C,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAClF,+GAA+G;IAC/G,IAAI,EAAE,UAAU,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAiBxC;AAED,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAOlD;AAED,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAOhD;AAED,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,CAAA;AAyC/C,4EAA4E;AAC5E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IACzF;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,sFAAsF;IACtF,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAgCtD;AAiBD,iFAAiF;AACjF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAgCpD"}

package/utils/Ornament.js

@@ -0,0 +1,160 @@
+'use client';
+import * as React from 'react';
+import { secondaryScaleVariants } from './scales';
+import { useScope } from './scope';
+import { MARKER_PX } from './tokens';
+import styles from './ornament.module.css';
+const r = (value) => Math.round(value * 100) / 100;
+/** A marker's box in px: its token size (§1.5.16). */
+function markerPx(kind, size) {
+    if (kind === 'waypoint')
+        return MARKER_PX.waypoint;
+    if (kind === 'current')
+        return MARKER_PX.current;
+    if (size === 'timeline')
+        return MARKER_PX.timeline;
+    return kind === 'origin' ? MARKER_PX.trail : MARKER_PX.arrowHead;
+}
+/**
+ * One marker's shape, centered in its `px` box, its stroke inside the box.
+ * The terminal is an equilateral outline pointing along `angle` (degrees,
+ * 0 = the inline end, 90 = down).
+ */
+function markerShape(kind, px, angle) {
+    const c = px / 2;
+    const inset = MARKER_PX.stroke / 2;
+    switch (kind) {
+        case 'origin':
+            return React.createElement("circle", { cx: c, cy: c, r: r(c - inset) });
+        case 'waypoint': {
+            const a = inset;
+            const b = px - inset;
+            return React.createElement("path", { d: `M${a} ${a} ${b} ${b}M${b} ${a} ${a} ${b}` });
+        }
+        case 'terminal': {
+            const base = px - MARKER_PX.stroke;
+            const height = (base * Math.sqrt(3)) / 2;
+            const tip = r(c + height / 2);
+            const back = r(c - height / 2);
+            return (React.createElement("path", { d: `M${tip} ${c}L${back} ${r(c - base / 2)}L${back} ${r(c + base / 2)}Z`, transform: angle === 0 ? undefined : `rotate(${angle} ${c} ${c})` }));
+        }
+        case 'current':
+            return React.createElement("circle", { cx: c, cy: c, r: c });
+    }
+}
+const markerClass = {
+    origin: styles.markerOrigin,
+    waypoint: styles.markerWaypoint,
+    terminal: styles.markerTerminal,
+    current: styles.markerCurrent,
+};
+/**
+ * A §4.7 marker (`marker-origin`, `marker-waypoint`, `marker-terminal`,
+ * `marker-current`) as its own inline SVG, drawn in `currentColor` at its
+ * token size. Decorative; say the state in words.
+ */
+export function Marker(props) {
+    const { kind, size = 'trail', angle = 90, className, ...rest } = props;
+    const px = markerPx(kind, size);
+    const timeline = size === 'timeline' && (kind === 'origin' || kind === 'terminal');
+    return (React.createElement("svg", { "aria-hidden": "true", focusable: "false", ...rest, viewBox: `0 0 ${px} ${px}`, className: [markerClass[kind], timeline ? styles.markerTimeline : null, className]
+            .filter(Boolean)
+            .join(' ') }, markerShape(kind, px, angle)));
+}
+/**
+ * `marker-index` (§4.7.5, §8.10): a 24 px numbered circle, a `--primary1`
+ * face with a `--primary12` edge and a zero-padded `type-label` numeral.
+ * Numbering runs continuously across one figure.
+ */
+export function MarkerIndex(props) {
+    const { value, digits = 2, className, ...rest } = props;
+    return (React.createElement("span", { ...rest, className: className ? `${styles.markerIndex} ${className}` : styles.markerIndex }, String(value).padStart(digits, '0')));
+}
+/**
+ * The rank numeral of a ranked list (§8.4, §12.11): `type-body-ui` data
+ * numerals in `--role-muted`, no period, end-aligned in a 2.5ch column.
+ */
+export function MarkerRank(props) {
+    const { value, className, ...rest } = props;
+    return (React.createElement("span", { ...rest, className: className ? `${styles.markerRank} ${className}` : styles.markerRank }, value));
+}
+/*
+ * Hand-set library paths (§4.7.1): freehand, no straight run over ≈ 40 px,
+ * the phase starting on a full dash at the origin. `short-tail` (120 × 60)
+ * wanders and turns down into its terminal, pointing at what follows below
+ * (the empty state's action). `entry` (176 × 56) loops once near its start
+ * (≈ 22 × 40 px), then runs level into a label at its inline end; the label
+ * sits --ds-space-halo past the terminal.
+ */
+const trails = {
+    'short-tail': {
+        width: 120,
+        height: 60,
+        d: 'M12.5 12C24 9 32 21 46 19C60 17 62 5 76 7C92 9 88 29 100 32C106 34 108 38 108 44',
+        origin: { x: 5, y: 12 },
+        terminal: { x: 108, y: 52, angle: 90 },
+    },
+    entry: {
+        width: 176,
+        height: 56,
+        d: 'M12.5 44C26 44 38 41 46 31C55 20 58 4 49 3C39 2 32 21 44 35C52 45 70 46 88 41C104 36 118 45 134 41C146 38 154 39 163 40',
+        origin: { x: 5, y: 44 },
+        terminal: { x: 171, y: 40, angle: 0 },
+    },
+};
+/**
+ * `ornament-trail` (§4.7.1): the system's signature line ornament, a
+ * freehand `line-dashed` path in `--role-accent` (`--primary12` on the
+ * saturated fields) from a `marker-origin` circle to a `marker-terminal`
+ * triangle. The element's one ornament; decorative (`aria-hidden`).
+ */
+export function OrnamentTrail(props) {
+    const { shape = 'short-tail', flip = false, className, ...rest } = props;
+    const trail = trails[shape];
+    const origin = MARKER_PX.trail;
+    const terminal = MARKER_PX.arrowHead;
+    return (React.createElement("svg", { "aria-hidden": "true", focusable: "false", width: trail.width, height: trail.height, ...rest, viewBox: `0 0 ${trail.width} ${trail.height}`, className: className ? `${styles.ornamentTrail} ${className}` : styles.ornamentTrail },
+        React.createElement("g", { transform: flip ? `matrix(-1 0 0 1 ${trail.width} 0)` : undefined },
+            React.createElement("path", { className: styles.ornamentTrailPath, d: trail.d, vectorEffect: "non-scaling-stroke" }),
+            React.createElement("g", { className: styles.trailMarker, transform: `translate(${trail.origin.x - origin / 2} ${trail.origin.y - origin / 2})` }, markerShape('origin', origin, 0)),
+            React.createElement("g", { className: styles.trailMarker, transform: `translate(${trail.terminal.x - terminal / 2} ${trail.terminal.y - terminal / 2})` }, markerShape('terminal', terminal, trail.terminal.angle)))));
+}
+/*
+ * The blob mount's hand-cut disc (§6.6): a closed curve through nine points
+ * at uneven angles and radii in a 136 × 130 box. The under-disc is the same
+ * curve scaled 1.04 and turned 8° about the centre, so its crescents vary
+ * between about 2 and 6 px.
+ */
+const BLOB_WIDTH = 136;
+const BLOB_HEIGHT = 130;
+const BLOB_PATH = 'M136 65C135.9 78.1 130.2 93.3 120.2 104C110.3 114.8 90.6 127.1 76.3 129.5C61.9 132 46.1 125.9 34.2 118.8C22.3 111.7 9.3 100.1 4.7 87C0.2 73.9 1.4 53.6 7 40.2C12.5 26.8 25.4 12.6 38.2 6.6C51 0.5 70.1 0.7 84 3.8C97.8 7 112.4 15.2 121 25.4C129.7 35.6 136.1 51.9 136 65Z';
+const BLOB_UNDER = 'translate(68 65) rotate(8) scale(1.04) translate(-68 -65)';
+/** The grounds that take the mount (§6.6, §1.5.16): the page grounds and the night band. */
+const MOUNT_TONES = new Set(['light-base', 'tinted', 'dark-base']);
+/**
+ * `ornament-blob` (§6.6, §1.5.16): the LTA blob mount, a flat hand-cut disc
+ * in `--secondary9` over a larger, turned under-disc in `--secondary7`,
+ * holding a centred mark in `--secondary-contrast`. Once per page, at a
+ * fixed 136 × 130 px. On `forest` and the solid fields the mount is omitted
+ * and the bare mark takes the scope's one ink [D14, D162]. In print the
+ * discs drop and the mark prints black. Decorative: the discs are
+ * `aria-hidden`; give a meaningful mark its own text alternative.
+ */
+export function OrnamentBlob(props) {
+    const { secondary, className, children, ...rest } = props;
+    const { tone } = useScope();
+    const mounted = MOUNT_TONES.has(tone);
+    return (React.createElement("span", { ...rest, className: [
+            styles.ornamentBlob,
+            mounted ? null : styles.blobOmitted,
+            secondary ? secondaryScaleVariants[secondary] : null,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        mounted ? (React.createElement("svg", { className: styles.blobDiscs, width: BLOB_WIDTH, height: BLOB_HEIGHT, viewBox: `0 0 ${BLOB_WIDTH} ${BLOB_HEIGHT}`, "aria-hidden": "true", focusable: "false" },
+            React.createElement("path", { className: styles.blobUnder, d: BLOB_PATH, transform: BLOB_UNDER }),
+            React.createElement("path", { className: styles.blobFront, d: BLOB_PATH }))) : null,
+        children != null ? React.createElement("span", { className: styles.blobMark }, children) : null));
+}
+//# sourceMappingURL=Ornament.js.map

package/utils/Ornament.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ornament.js","sourceRoot":"","sources":["../src/utils/Ornament.tsx"],"names":[],"mappings":"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"}

package/utils/StatusGlyph.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type Status = 'info' | 'success' | 'warning' | 'danger';
+/** §1.5.4 status scales, passed as the host's computed secondary [D129]. */
+export declare const statusScales: {
+    readonly info: "indigo";
+    readonly success: "green";
+    readonly warning: "amber";
+    readonly danger: "red";
+};
+/** The glyph's accessible name: the status in words, so it is never shape or color alone. */
+export declare const statusLabels: Record<Status, string>;
+/** Props for StatusGlyph: SVG props (without `children`), the status and its accessible name. */
+export type StatusGlyphProps = Omit<React.ComponentProps<'svg'>, 'children'> & {
+    status: Status;
+    /**
+     * Accessible name, normally the status word. Omit it, or pass `null`, when
+     * an adjacent word already names the status: the glyph is then hidden from
+     * assistive technology.
+     */
+    label?: string | null;
+};
+/** A §1.5.4 status glyph, drawn custom with its inner mark [D58]. */
+export declare function StatusGlyph({ status, label, ...rest }: StatusGlyphProps): React.JSX.Element;
+//# sourceMappingURL=StatusGlyph.d.ts.map

package/utils/StatusGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusGlyph.d.ts","sourceRoot":"","sources":["../src/utils/StatusGlyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9D,4EAA4E;AAC5E,eAAO,MAAM,YAAY;;;;;CAKsB,CAAA;AAE/C,6FAA6F;AAC7F,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK/C,CAAA;AA+BD,iGAAiG;AACjG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,CAAA;AAED,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,qBAWvE"}

package/utils/StatusGlyph.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+/** §1.5.4 status scales, passed as the host's computed secondary [D129]. */
+export const statusScales = {
+    info: 'indigo',
+    success: 'green',
+    warning: 'amber',
+    danger: 'red',
+};
+/** The glyph's accessible name: the status in words, so it is never shape or color alone. */
+export const statusLabels = {
+    info: 'Information',
+    success: 'Success',
+    warning: 'Warning',
+    danger: 'Error',
+};
+const glyphs = {
+    info: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "10", cy: "10", r: "8.25", stroke: "currentColor" }),
+        React.createElement("path", { d: "M10 9v5", fill: "none", stroke: "currentColor" }),
+        React.createElement("circle", { cx: "10", cy: "6.25", r: "1", fill: "currentColor", stroke: "none" }))),
+    success: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", stroke: "none" }),
+        React.createElement("path", { d: "M6.25 10.25l2.5 2.5 5-5", fill: "none" }))),
+    warning: (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: "M10 2.75 18 16.75H2z", fill: "currentColor", stroke: "currentColor" }),
+        React.createElement("path", { d: "M10 7.5v4", fill: "none" }),
+        React.createElement("circle", { cx: "10", cy: "14.25", r: "1", stroke: "none" }))),
+    danger: (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: "M10 1.5 18.5 10 10 18.5 1.5 10z", fill: "currentColor", stroke: "currentColor" }),
+        React.createElement("path", { d: "m7.5 7.5 5 5m0-5-5 5", fill: "none" }))),
+};
+/** A §1.5.4 status glyph, drawn custom with its inner mark [D58]. */
+export function StatusGlyph({ status, label, ...rest }) {
+    const a11y = label == null
+        ? { 'aria-hidden': true }
+        : { role: 'img', 'aria-label': label };
+    return (React.createElement("svg", { viewBox: "0 0 20 20", focusable: "false", ...a11y, ...rest }, glyphs[status]));
+}
+//# sourceMappingURL=StatusGlyph.js.map

package/utils/StatusGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusGlyph.js","sourceRoot":"","sources":["../src/utils/StatusGlyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,4EAA4E;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,KAAK;CACgC,CAAA;AAE/C,6FAA6F;AAC7F,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,OAAO;CAChB,CAAA;AAED,MAAM,MAAM,GAAoC;IAC9C,IAAI,EAAE,CACJ;QACE,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,GAAG;QACzD,8BAAM,CAAC,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,GAAG;QACtD,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,GAAG,CACnE,CACJ;IACD,OAAO,EAAE,CACP;QACE,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,GAAG;QAClE,8BAAM,CAAC,EAAC,yBAAyB,EAAC,IAAI,EAAC,MAAM,GAAG,CAC/C,CACJ;IACD,OAAO,EAAE,CACP;QACE,8BAAM,CAAC,EAAC,sBAAsB,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,GAAG;QAC3E,8BAAM,CAAC,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,GAAG;QAClC,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,GAAG,CAChD,CACJ;IACD,MAAM,EAAE,CACN;QACE,8BAAM,CAAC,EAAC,iCAAiC,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,GAAG;QACtF,8BAAM,CAAC,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,GAAG,CAC5C,CACJ;CACF,CAAA;AAaD,qEAAqE;AACrE,MAAM,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAoB;IACtE,MAAM,IAAI,GACR,KAAK,IAAI,IAAI;QACX,CAAC,CAAE,EAAE,aAAa,EAAE,IAAI,EAAY;QACpC,CAAC,CAAE,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAY,CAAA;IAErD,OAAO,CACL,6BAAK,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,OAAO,KAAK,IAAI,KAAM,IAAI,IAC1D,MAAM,CAAC,MAAM,CAAC,CACX,CACP,CAAA;AACH,CAAC"}

package/utils/assignRef.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+/**
+ * Writes a node to a consumer's ref (callback or object), for a component
+ * that also keeps its own ref to the same node. Not exported from any index.
+ */
+export declare function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null): void;
+//# sourceMappingURL=assignRef.d.ts.map

package/utils/assignRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignRef.d.ts","sourceRoot":"","sources":["../src/utils/assignRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,QAG1E"}

package/utils/assignRef.js

@@ -0,0 +1,11 @@
+/**
+ * Writes a node to a consumer's ref (callback or object), for a component
+ * that also keeps its own ref to the same node. Not exported from any index.
+ */
+export function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+//# sourceMappingURL=assignRef.js.map

package/utils/assignRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignRef.js","sourceRoot":"","sources":["../src/utils/assignRef.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAI,GAA6B,EAAE,KAAe;IACzE,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,GAAG,CAAC,KAAK,CAAC,CAAA;SACpC,IAAI,GAAG;QAAG,GAAiC,CAAC,OAAO,GAAG,KAAK,CAAA;AAClE,CAAC"}

package/utils/className.d.ts

@@ -0,0 +1,10 @@
+/** Base UI's `className`: a string, or a function of the part's state. */
+export type StateClassName<State> = string | ((state: State) => string | undefined) | undefined;
+/**
+ * Appends a consumer's `className` (string or state function) to a CVA
+ * result, keeping the function form so Base UI can call it with the state.
+ */
+export declare function resolveClassName<State>(className: StateClassName<State>, build: (extra?: string) => string): string | ((state: State) => string);
+/** Space-joins the truthy class names. */
+export declare function cx(...names: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=className.d.ts.map

package/utils/className.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/utils/className.ts"],"names":[],"mappings":"AAOA,0EAA0E;AAC1E,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAA;AAE/F;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,EAChC,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,GAChC,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAKrC;AAED,0CAA0C;AAC1C,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAE7E"}

package/utils/className.js

@@ -0,0 +1,21 @@
+/*
+ * Class-name helpers shared by every component. Not exported from any
+ * index. CVA builds each part's own classes; these join a consumer's
+ * `className` after them (§1.11.3), keeping Base UI's state-function form
+ * (§1.11.4).
+ */
+/**
+ * Appends a consumer's `className` (string or state function) to a CVA
+ * result, keeping the function form so Base UI can call it with the state.
+ */
+export function resolveClassName(className, build) {
+    if (typeof className === 'function') {
+        return (state) => build(className(state));
+    }
+    return build(className);
+}
+/** Space-joins the truthy class names. */
+export function cx(...names) {
+    return names.filter(Boolean).join(' ');
+}
+//# sourceMappingURL=className.js.map

package/utils/className.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.js","sourceRoot":"","sources":["../src/utils/className.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAC9B,SAAgC,EAChC,KAAiC;IAEjC,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IAClD,CAAC;IACD,OAAO,KAAK,CAAC,SAAS,CAAC,CAAA;AACzB,CAAC;AAED,0CAA0C;AAC1C,MAAM,UAAU,EAAE,CAAC,GAAG,KAA+C;IACnE,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACxC,CAAC"}