@usefragments/ui 1.7.0 → 2.0.1

package/README.md

@@ -148,9 +148,9 @@ All fragment and block previews are authored source snippets, not runtime-serial
 
 ## Design Tokens
 
-### Seed-Based Configuration (Recommended)
+### Seeds
 
-Configure ~5 seeds and everything derives automatically using the SCSS `@use ... with()` syntax:
+Seven seeds drive every derived token. Set them with the SCSS `@use ... with()` syntax on the styles entry point:
 
 ```scss
 // styles/globals.scss
@@ -165,8 +165,6 @@ Configure ~5 seeds and everything derives automatically using the SCSS `@use ...
 // Full customization
 @use "@usefragments/ui/styles" with (
   $fui-brand: #0066ff,
-  $fui-neutral: "ice",
-  $fui-density: "compact",
   $fui-radius-style: "rounded",
   $fui-danger: #dc2626,
   $fui-success: #16a34a
@@ -175,37 +173,17 @@ Configure ~5 seeds and everything derives automatically using the SCSS `@use ...
 
 #### Available Seeds
 
-| Seed                | Type   | Default     | Description                                             |
-| ------------------- | ------ | ----------- | ------------------------------------------------------- |
-| `$fui-brand`        | Color  | `#006b57`   | Primary brand color - derives accent, focus rings, etc. |
-| `$fui-neutral`      | String | `"carbon"`  | Neutral palette for surfaces, text, borders             |
-| `$fui-density`      | String | `"default"` | Spacing density scale                                   |
-| `$fui-radius-style` | String | `"default"` | Corner radius style                                     |
-| `$fui-danger`       | Color  | `#c44732`   | Error/danger semantic color                             |
-| `$fui-success`      | Color  | `#2c8c5f`   | Success semantic color                                  |
-| `$fui-warning`      | Color  | `#c4922a`   | Warning semantic color                                  |
-| `$fui-info`         | Color  | `#3d7aa8`   | Info semantic color                                     |
-
-#### Neutral Palettes
-
-| Name        | Description                                   |
-| ----------- | --------------------------------------------- |
-| `carbon`    | Near-black product chrome — default           |
-| `stone`     | Cool gray neutrals (balanced, professional)   |
-| `mono`      | Strict grayscale neutrals                     |
-| `ice`       | Cool blue-tinted grays (crisp, technical)     |
-| `earth`     | Warm brown-tinted grays (natural, grounded)   |
-| `sand`      | Warm tan-tinted grays (organic, approachable) |
-| `fire`      | Warm red-tinted grays (bold, energetic)       |
-| `fragments` | Fragments' original neutral palette           |
-
-#### Density Presets
-
-| Name      | Base Unit | Feel                                |
-| --------- | --------- | ----------------------------------- |
-| `compact` | 6px       | Tighter spacing, smaller elements   |
-| `default` | 7px       | Balanced, current visual appearance |
-| `relaxed` | 8px       | More spacious layout                |
+| Seed                | Type   | Default     | Description                                                                 |
+| ------------------- | ------ | ----------- | --------------------------------------------------------------------------- |
+| `$fui-brand`        | Color  | `#f56138`   | Brand color — derives the accent ramp, focus rings and the dark-mode accent |
+| `$fui-neutral`      | String | `"paper"`   | The neutral ramp: warm cream canvas, white cards, warm charcoal dark mode   |
+| `$fui-radius-style` | String | `"default"` | Corner radius style                                                         |
+| `$fui-danger`       | Color  | `#c44732`   | Danger semantic color                                                       |
+| `$fui-success`      | Color  | `#2c8c5f`   | Success semantic color                                                      |
+| `$fui-warning`      | Color  | `#c4922a`   | Warning semantic color                                                      |
+| `$fui-info`         | Color  | `#3d7aa8`   | Info semantic color                                                         |
+
+`"paper"` is the only neutral ramp that ships: one light theme, one dark theme. Any other `$fui-neutral` value fails the build.
 
 #### Radius Styles
 
@@ -217,7 +195,32 @@ Configure ~5 seeds and everything derives automatically using the SCSS `@use ...
 | `rounded` | More prominent (friendly)         |
 | `pill`    | Maximum rounding (playful, soft)  |
 
-### Individual Token Overrides (Backward Compatible)
+### Runtime attributes
+
+The compiled stylesheet also answers two attributes on `<html>` (or any ancestor), so a page can switch without a rebuild:
+
+| Attribute               | Values                                  | Effect                                  |
+| ----------------------- | --------------------------------------- | --------------------------------------- |
+| `data-theme`            | `light` · `dark`                        | Colour scheme (`ThemeProvider` sets it) |
+| `data-fui-radius-style` | `sharp` · `subtle` · `rounded` · `pill` | Radius profile; absent = `default`      |
+
+### Shared state tokens
+
+Every component reads these instead of carrying its own literal, so one override changes the whole kit:
+
+| Token                    | Default            | Purpose                                                                                                                                                                                |
+| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--fui-opacity-faint`    | `0.3`              | Faint decoration: pulse rings and glow tracks                                                                                                                                          |
+| `--fui-opacity-disabled` | `0.5`              | Disabled controls (`@include disabled-state` in SCSS)                                                                                                                                  |
+| `--fui-opacity-muted`    | `0.7`              | Dimmed but live: collapsed rails, secondary glyphs, decorative rules                                                                                                                   |
+| `--fui-radius-none`      | `0`                | Square corners: joined segments, skeleton blocks, code gutters                                                                                                                         |
+| `--fui-radius-l1`        | `--fui-radius-lg`  | Outermost surface level: cards, dialogs, panels                                                                                                                                        |
+| `--fui-radius-l2`        | `--fui-radius-md`  | Control level: buttons, inputs, menus                                                                                                                                                  |
+| `--fui-radius-l3`        | `--fui-radius-sm`  | Inner level: checkboxes, badges, nested chips                                                                                                                                          |
+| `--fui-scale`            | `1`                | Multiplies the spacing scale (`--fui-space-*`) and the measurement-catalog lengths (control and field tracks, insets, overlay widths, navigation); radius, strokes and type stay fixed |
+| `--fui-stroke-default`   | measurement target | Stroke used by `@include high-contrast-outline` under `prefers-contrast`                                                                                                               |
+
+### Individual Token Overrides
 
 You can still override individual tokens directly:
 
@@ -253,35 +256,22 @@ You can still override individual tokens directly:
 | `$fui-breakpoint-lg` | 1024px |
 | `$fui-breakpoint-xl` | 1280px |
 
-### Migration Guide
-
-**Existing code continues to work.** The seed system is fully backward compatible:
+### Migrating token overrides to seeds
 
-- Existing `@use '@usefragments/ui/tokens'` imports work unchanged
-- Individual variable overrides (`$fui-color-accent: #blue`) still work
-- CSS variable usage (`var(--fui-color-accent)`) works
-- Component APIs remain the same
-- Visual appearance is unchanged with default seeds
+Instead of overriding many individual tokens, set seed values; dark mode, hover states and derived colors are computed automatically:
 
-**To migrate to seeds (optional):**
-
-1. Instead of overriding many individual tokens, set seed values:
-
-   ```scss
-   // Before: many individual overrides
-   $fui-color-accent: #0066ff;
-   $fui-color-accent-hover: #0052cc;
-   $fui-bg-secondary: #f1f5f9;
-   // ...many more
-
-   // After: just seeds
-   @use "@usefragments/ui/styles" with (
-     $fui-brand: #0066ff,
-     $fui-neutral: "ice"
-   );
-   ```
+```scss
+// Before: many individual overrides
+$fui-color-accent: #0066ff;
+$fui-color-accent-hover: #0052cc;
+$fui-bg-secondary: #f1f5f9;
+// ...many more
 
-2. Dark mode, hover states, and derived colors are computed automatically
+// After: just seeds
+@use "@usefragments/ui/styles" with (
+  $fui-brand: #0066ff
+);
+```
 
 ## AI Agent Support
 
@@ -313,11 +303,9 @@ API-key header. There is no MCP npm package or local stdio process to install.
 The library includes composition blocks — named patterns showing how components wire together for common use cases:
 
 - **Login Form** — Email/password authentication form
-- **Confirm Dialog** — Destructive action confirmation
-- **Card Grid** — Responsive auto-fill card layout
-- **Form Layout** — Two-column form with Grid
 - **Dashboard Layout** — Featured card with metrics grid
-- **Settings Page** — Settings sections with cards and controls
+- **Stats Card** — Metric tile with delta badge
+- **Activity Feed** — Avatar-led activity list
 
 Access blocks through the Fragments docs or context generated by the CLI.
 

package/dist/assets/nav-glyph.cjs

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const navGlyph_module = require("./nav-glyph.module.scss.cjs");
+function part(verb, index, vars) {
+  const style = index === void 0 && !vars ? void 0 : { ...index === void 0 ? {} : { "--i": index }, ...vars };
+  return { className: [navGlyph_module.default.motion, navGlyph_module.default[verb]].join(" "), style };
+}
+function stroke(verb, index) {
+  return { ...part(verb, index), pathLength: 1 };
+}
+const GLYPHS = {
+  // Four tiles; the first is inked — the place you are standing.
+  overview: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: "2.5",
+        y: "2.5",
+        width: "4.5",
+        height: "4.5",
+        rx: "1",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("tile", 0)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "2.5", width: "4.5", height: "4.5", rx: "1", ...part("tile", 1) }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "4.5", height: "4.5", rx: "1", ...part("tile", 2) }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.5", y: "9", width: "4.5", height: "4.5", rx: "1", ...part("tile", 3) })
+  ] }),
+  // A bound volume with its spine.
+  repository: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "2.5", width: "10", height: "11", rx: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2.5v11", ...part("spine") })
+  ] }),
+  // Two commits on the base branch, one on the branch merging in.
+  pullRequest: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "4", r: "1.75" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "12", r: "1.75" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 5.75v4.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4h1.75A1.75 1.75 0 0 1 11.5 5.75v4.5", ...stroke("branch") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11.5", cy: "12", r: "1.75", ...part("head", 4) })
+  ] }),
+  // A planted flag with a notched fly.
+  finding: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 14V2.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 3h7.5l-1.75 2.5L11.5 8H4", ...part("fly") })
+  ] }),
+  // A signed sheet with a folded corner.
+  contract: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 2.5h5l3 3v7.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 2.5v3h3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 8.5h3", ...stroke("line", 0) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 11h3.5", ...stroke("line", 2) })
+  ] }),
+  // Three bars climbing.
+  adoption: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.25 13.5h11.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 13.5V9.5", ...part("bar", 0) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 13.5V6", ...part("bar", 1) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 13.5V2.75", ...part("bar", 2) })
+  ] }),
+  // The isometric cube from the card art.
+  component: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1.75l5.5 3.15v6.2L8 14.25l-5.5-3.15v-6.2z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 8.05l5.5-3.15", ...stroke("edge", 0) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 8.05L2.5 4.9", ...stroke("edge", 1) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 8.05v6.2", ...stroke("edge", 2) })
+  ] }),
+  // A terminal with its prompt.
+  setup: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6.75l2 1.5-2 1.5", ...part("caret") }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.75 10.25h2.5", ...part("cursor") })
+  ] }),
+  // Three sliders, each knob somewhere different.
+  settings: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 4.5h11" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: "10",
+        cy: "4.5",
+        r: "1.5",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("knob", 0, { "--dx": "2px" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 8h11" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: "6",
+        cy: "8",
+        r: "1.5",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("knob", 1, { "--dx": "-2px" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 11.5h11" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: "9.5",
+        cy: "11.5",
+        r: "1.5",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("knob", 2, { "--dx": "1.5px" })
+      }
+    )
+  ] })
+};
+const NAV_GLYPH_NAMES = Object.keys(GLYPHS);
+function NavGlyph({ name, size = 16, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: [navGlyph_module.default.glyph, className].filter(Boolean).join(" "),
+      ...rest,
+      children: GLYPHS[name]
+    }
+  );
+}
+exports.NAV_GLYPH_NAMES = NAV_GLYPH_NAMES;
+exports.NavGlyph = NavGlyph;

package/dist/assets/nav-glyph.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * The navigation glyph set: one 16px stroke glyph per governance destination.
+ * Drawn on a 16-unit grid with a 1.5 stroke, round caps and joins, and
+ * `currentColor` ink, so a glyph takes the colour of the row it sits in. The
+ * component glyph is the isometric cube the illustrated cards use, so the
+ * sidebar and the cards share one object language.
+ *
+ * Each glyph has one motion verb (see the module stylesheet) that plays when
+ * the link or button it sits in is hovered or focused. Parts that move carry
+ * `motion` plus their verb class; `--i` staggers siblings.
+ */
+export type NavGlyphName = "overview" | "repository" | "pullRequest" | "finding" | "contract" | "adoption" | "component" | "setup" | "settings";
+export declare const NAV_GLYPH_NAMES: NavGlyphName[];
+export interface NavGlyphProps extends Omit<React.SVGAttributes<SVGSVGElement>, "name"> {
+    /** Which glyph to draw. */
+    name: NavGlyphName;
+    /** Rendered box in px; the glyph inherits `currentColor`. */
+    size?: number | string;
+}
+/**
+ * A navigation glyph. Decorative by default (`aria-hidden`): the label beside
+ * it names the destination. Pass `aria-label` and `role="img"` when the glyph
+ * stands alone. Its verb plays when the enclosing link or button is hovered
+ * or focused, and never under `prefers-reduced-motion: reduce`.
+ */
+export declare function NavGlyph({ name, size, className, ...rest }: NavGlyphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav-glyph.d.ts.map

package/dist/assets/nav-glyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-glyph.d.ts","sourceRoot":"","sources":["../../src/assets/nav-glyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;GAUG;AACH,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,aAAa,GACb,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,GACP,UAAU,CAAC;AAkIf,eAAO,MAAM,eAAe,EAA0B,YAAY,EAAE,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IACrF,2BAA2B;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAmB9E"}

package/dist/assets/nav-glyph.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import styles from "./nav-glyph.module.scss.js";
+function part(verb, index, vars) {
+  const style = index === void 0 && !vars ? void 0 : { ...index === void 0 ? {} : { "--i": index }, ...vars };
+  return { className: [styles.motion, styles[verb]].join(" "), style };
+}
+function stroke(verb, index) {
+  return { ...part(verb, index), pathLength: 1 };
+}
+const GLYPHS = {
+  // Four tiles; the first is inked — the place you are standing.
+  overview: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "2.5",
+        y: "2.5",
+        width: "4.5",
+        height: "4.5",
+        rx: "1",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("tile", 0)
+      }
+    ),
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "2.5", width: "4.5", height: "4.5", rx: "1", ...part("tile", 1) }),
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "4.5", height: "4.5", rx: "1", ...part("tile", 2) }),
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "9", width: "4.5", height: "4.5", rx: "1", ...part("tile", 3) })
+  ] }),
+  // A bound volume with its spine.
+  repository: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "2.5", width: "10", height: "11", rx: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 2.5v11", ...part("spine") })
+  ] }),
+  // Two commits on the base branch, one on the branch merging in.
+  pullRequest: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "4", r: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "12", r: "1.75" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.5 5.75v4.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4h1.75A1.75 1.75 0 0 1 11.5 5.75v4.5", ...stroke("branch") }),
+    /* @__PURE__ */ jsx("circle", { cx: "11.5", cy: "12", r: "1.75", ...part("head", 4) })
+  ] }),
+  // A planted flag with a notched fly.
+  finding: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 14V2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 3h7.5l-1.75 2.5L11.5 8H4", ...part("fly") })
+  ] }),
+  // A signed sheet with a folded corner.
+  contract: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 2.5h5l3 3v7.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1z" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 2.5v3h3" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.5 8.5h3", ...stroke("line", 0) }),
+    /* @__PURE__ */ jsx("path", { d: "M6.5 11h3.5", ...stroke("line", 2) })
+  ] }),
+  // Three bars climbing.
+  adoption: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.25 13.5h11.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 13.5V9.5", ...part("bar", 0) }),
+    /* @__PURE__ */ jsx("path", { d: "M8 13.5V6", ...part("bar", 1) }),
+    /* @__PURE__ */ jsx("path", { d: "M12 13.5V2.75", ...part("bar", 2) })
+  ] }),
+  // The isometric cube from the card art.
+  component: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 1.75l5.5 3.15v6.2L8 14.25l-5.5-3.15v-6.2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 8.05l5.5-3.15", ...stroke("edge", 0) }),
+    /* @__PURE__ */ jsx("path", { d: "M8 8.05L2.5 4.9", ...stroke("edge", 1) }),
+    /* @__PURE__ */ jsx("path", { d: "M8 8.05v6.2", ...stroke("edge", 2) })
+  ] }),
+  // A terminal with its prompt.
+  setup: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 6.75l2 1.5-2 1.5", ...part("caret") }),
+    /* @__PURE__ */ jsx("path", { d: "M8.75 10.25h2.5", ...part("cursor") })
+  ] }),
+  // Three sliders, each knob somewhere different.
+  settings: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.5 4.5h11" }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "10",
+        cy: "4.5",
+        r: "1.5",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("knob", 0, { "--dx": "2px" })
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M2.5 8h11" }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "6",
+        cy: "8",
+        r: "1.5",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("knob", 1, { "--dx": "-2px" })
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M2.5 11.5h11" }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "9.5",
+        cy: "11.5",
+        r: "1.5",
+        fill: "currentColor",
+        stroke: "none",
+        ...part("knob", 2, { "--dx": "1.5px" })
+      }
+    )
+  ] })
+};
+const NAV_GLYPH_NAMES = Object.keys(GLYPHS);
+function NavGlyph({ name, size = 16, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: [styles.glyph, className].filter(Boolean).join(" "),
+      ...rest,
+      children: GLYPHS[name]
+    }
+  );
+}
+export {
+  NAV_GLYPH_NAMES,
+  NavGlyph
+};

package/dist/assets/nav-glyph.module.scss.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const glyph = "_glyph_1g87d_1";
+const motion = "_motion_1g87d_7";
+const tile = "_tile_1g87d_11";
+const hop = "_hop_1g87d_1";
+const spine = "_spine_1g87d_17";
+const open = "_open_1g87d_1";
+const branch = "_branch_1g87d_23";
+const draw = "_draw_1g87d_1";
+const head = "_head_1g87d_29";
+const pop = "_pop_1g87d_1";
+const fly = "_fly_1g87d_35";
+const wave = "_wave_1g87d_1";
+const line = "_line_1g87d_44";
+const bar = "_bar_1g87d_50";
+const rise = "_rise_1g87d_1";
+const edge = "_edge_1g87d_59";
+const caret = "_caret_1g87d_65";
+const nudge = "_nudge_1g87d_1";
+const cursor = "_cursor_1g87d_71";
+const blink = "_blink_1g87d_1";
+const knob = "_knob_1g87d_77";
+const slide = "_slide_1g87d_1";
+const styles = {
+  glyph,
+  motion,
+  tile,
+  hop,
+  spine,
+  open,
+  branch,
+  draw,
+  head,
+  pop,
+  fly,
+  wave,
+  line,
+  bar,
+  rise,
+  edge,
+  caret,
+  nudge,
+  cursor,
+  blink,
+  knob,
+  slide
+};
+exports.bar = bar;
+exports.blink = blink;
+exports.branch = branch;
+exports.caret = caret;
+exports.cursor = cursor;
+exports.default = styles;
+exports.draw = draw;
+exports.edge = edge;
+exports.fly = fly;
+exports.glyph = glyph;
+exports.head = head;
+exports.hop = hop;
+exports.knob = knob;
+exports.line = line;
+exports.motion = motion;
+exports.nudge = nudge;
+exports.open = open;
+exports.pop = pop;
+exports.rise = rise;
+exports.slide = slide;
+exports.spine = spine;
+exports.tile = tile;
+exports.wave = wave;

package/dist/assets/nav-glyph.module.scss.js

@@ -0,0 +1,71 @@
+const glyph = "_glyph_1g87d_1";
+const motion = "_motion_1g87d_7";
+const tile = "_tile_1g87d_11";
+const hop = "_hop_1g87d_1";
+const spine = "_spine_1g87d_17";
+const open = "_open_1g87d_1";
+const branch = "_branch_1g87d_23";
+const draw = "_draw_1g87d_1";
+const head = "_head_1g87d_29";
+const pop = "_pop_1g87d_1";
+const fly = "_fly_1g87d_35";
+const wave = "_wave_1g87d_1";
+const line = "_line_1g87d_44";
+const bar = "_bar_1g87d_50";
+const rise = "_rise_1g87d_1";
+const edge = "_edge_1g87d_59";
+const caret = "_caret_1g87d_65";
+const nudge = "_nudge_1g87d_1";
+const cursor = "_cursor_1g87d_71";
+const blink = "_blink_1g87d_1";
+const knob = "_knob_1g87d_77";
+const slide = "_slide_1g87d_1";
+const styles = {
+  glyph,
+  motion,
+  tile,
+  hop,
+  spine,
+  open,
+  branch,
+  draw,
+  head,
+  pop,
+  fly,
+  wave,
+  line,
+  bar,
+  rise,
+  edge,
+  caret,
+  nudge,
+  cursor,
+  blink,
+  knob,
+  slide
+};
+export {
+  bar,
+  blink,
+  branch,
+  caret,
+  cursor,
+  styles as default,
+  draw,
+  edge,
+  fly,
+  glyph,
+  head,
+  hop,
+  knob,
+  line,
+  motion,
+  nudge,
+  open,
+  pop,
+  rise,
+  slide,
+  spine,
+  tile,
+  wave
+};