editor-shell 0.12.0 → 0.13.0

package/README.md

@@ -50,16 +50,38 @@ export function LeftRail({ view, onView, onAdd }) {
 
 ## API
 
-### `<EditorRail items ariaLabel? className? />`
+### `<EditorRail items ariaLabel? className? orientation? />`
 
-A **pure presentational** vertical toolbar. It owns the look, never the app
-state — you decide which item is `active` and what each `onSelect` does.
+A **pure presentational** toolbar. It owns the look, never the app state — you
+decide which item is `active` and what each `onSelect` does.
 
 | prop | type | default | notes |
 |---|---|---|---|
-| `items` | `EditorRailItem[]` | — | buttons, top→bottom, in render order |
+| `items` | `EditorRailItem[]` | — | buttons, in render order |
 | `ariaLabel` | `string` | `"Editor"` | names the toolbar for assistive tech |
 | `className` | `string` | — | merged onto `.es-rail` |
+| `orientation` | `'column' \| 'row'` | `'column'` | which way the buttons run |
+
+#### `orientation`
+
+`'column'` is the rail every editor draws today: a fixed 46px strip wearing its
+own card. It is the default, and it renders exactly what it rendered before this
+prop existed.
+
+`'row'` lays the same buttons left to right for a top bar — **no fixed width**
+(as wide as its buttons) and **no card** (no background, radius or shadow),
+because the bar already has its own surface. The button size, icon size, gap and
+every hover/active colour are identical in both directions; only the container
+changes. A row is 34px tall, so a 52px bar centres it with 9px to spare.
+
+```tsx
+// The same rail, in the top bar's empty middle.
+<EditorRail orientation="row" ariaLabel="Editor views" items={items} />
+```
+
+`aria-orientation` follows the layout (`vertical` / `horizontal`); the `toolbar`
+role does not change, because a rail that mixes view toggles with plain actions
+is a toolbar whichever way it runs.
 
 ### `EditorRailItem`
 
@@ -102,6 +124,11 @@ properties on `.es-rail`). Taken verbatim from the storefront editor's `.sf-rail
 | accent (active) | `#2563eb` | `--es-rail-accent` |
 | accent tint (active bg) | `#eff6ff` | `--es-rail-accent-tint` |
 
+`orientation="row"` adds **no new token**. It re-points three of the ones above
+— `--es-rail-bg` to `transparent`, `--es-rail-shadow` to `none`,
+`--es-rail-radius` to `0` — so the card look stays declared in one place, and it
+reuses `--es-rail-pad-y` rotated onto the row's ends and `--es-rail-gap` as-is.
+
 Re-theme without new CSS by overriding a var on the element:
 `style={{ ['--es-rail-accent']: brand }}`.
 

package/dist/{chunk-3VMFPQGZ.js → chunk-HYOACICE.js}

@@ -24,13 +24,19 @@ function EditorRailButton({
     }
   );
 }
-function EditorRail({ items, ariaLabel = "Editor", className }) {
+function EditorRail({
+  items,
+  ariaLabel = "Editor",
+  className,
+  orientation = "column"
+}) {
+  const row = orientation === "row";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: ["es-rail", className ?? ""].filter(Boolean).join(" "),
+      className: ["es-rail", row ? "es-rail-row" : "", className ?? ""].filter(Boolean).join(" "),
       role: "toolbar",
-      "aria-orientation": "vertical",
+      "aria-orientation": row ? "horizontal" : "vertical",
       "aria-label": ariaLabel,
       children: items.map((item) => /* @__PURE__ */ jsx(
         EditorRailButton,
@@ -102,5 +108,5 @@ var railCssVars = {
 };
 
 export { EditorRail, EditorRailButton, railCssVars, railTokens };
-//# sourceMappingURL=chunk-3VMFPQGZ.js.map
-//# sourceMappingURL=chunk-3VMFPQGZ.js.map
+//# sourceMappingURL=chunk-HYOACICE.js.map
+//# sourceMappingURL=chunk-HYOACICE.js.map

package/dist/chunk-HYOACICE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/rail/EditorRailButton.tsx","../src/rail/EditorRail.tsx","../src/rail/tokens.ts"],"names":["jsx"],"mappings":"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","file":"chunk-HYOACICE.js","sourcesContent":["import type { EditorRailButtonProps } from './types';\n\n/**\n * A single rail button: an icon in a 34×34 square that hovers, highlights when\n * active, and dims when disabled. Look only — the caller owns the click.\n *\n * `aria-pressed` is emitted **only** when `active` is a real boolean, so a view\n * toggle announces its pressed state while an action button (the quick-add \"+\",\n * whose item omits `active`) stays a plain button rather than a stuck toggle.\n */\nexport function EditorRailButton({\n  label,\n  icon,\n  active,\n  disabled,\n  onSelect,\n  className,\n}: EditorRailButtonProps) {\n  const classes = ['es-rail-btn', active ? 'is-active' : '', className ?? '']\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      title={label}\n      aria-label={label}\n      aria-pressed={typeof active === 'boolean' ? active : undefined}\n      disabled={disabled}\n      onClick={disabled ? undefined : onSelect}\n    >\n      {icon}\n    </button>\n  );\n}\n","import { EditorRailButton } from './EditorRailButton';\nimport type { EditorRailProps } from './types';\n\n/**\n * The shared icon-rail — one slim strip of icon buttons that every EFFICIENT\n * editor uses to switch panels (Pages / Layers / Styles / Media / Sitemap) and\n * to quick-add (\"+\"). By default it is the vertical strip down the left; pass\n * `orientation=\"row\"` and the same buttons lay into a top bar instead. It is a\n * **pure presentational switcher**: give it `items[]`, it draws them; which one\n * is `active` and what each does is the host's business.\n *\n * No `'use client'` here on purpose — the rail has no hooks or state, so it is a\n * plain module a Next-16 server component can import and even statically render.\n * It's interactive only through the `onSelect` props the host passes, and the\n * host owns its client boundary (both editors' chrome are already client\n * components), so baking a directive into this leaf would only narrow where it\n * can be imported.\n *\n * A `toolbar` (not a `tablist`), because the rail mixes view *toggles* with\n * plain *actions* like the quick-add — a toolbar of buttons models that\n * honestly, where a tablist would force every button to pretend to be a tab.\n * That is true in both directions, so `orientation` moves `aria-orientation`\n * and leaves the role alone: what the rail IS did not change, only which way it\n * runs — and a toolbar's arrow keys follow its orientation, so a row that kept\n * saying `vertical` would describe the wrong keys.\n *\n * `orientation` defaults to `'column'`, and that path is byte-identical to what\n * this component rendered before the prop existed: same class list, same\n * attributes, same order. `'row'` adds ONE modifier class beside `es-rail` —\n * never instead of it, since every button rule and token in rail.css hangs off\n * the base class — and rail.css does the rest.\n */\nexport function EditorRail({\n  items,\n  ariaLabel = 'Editor',\n  className,\n  orientation = 'column',\n}: EditorRailProps) {\n  const row = orientation === 'row';\n\n  return (\n    <div\n      className={['es-rail', row ? 'es-rail-row' : '', className ?? '']\n        .filter(Boolean)\n        .join(' ')}\n      role=\"toolbar\"\n      aria-orientation={row ? 'horizontal' : 'vertical'}\n      aria-label={ariaLabel}\n    >\n      {items.map((item) => (\n        <EditorRailButton\n          key={item.id}\n          label={item.label}\n          icon={item.icon}\n          active={item.active}\n          disabled={item.disabled}\n          onSelect={item.onSelect}\n        />\n      ))}\n    </div>\n  );\n}\n","/**\n * Rail design tokens — the ONE source both apps' rails converge on.\n *\n * Every value below is taken verbatim from the storefront editor's rail\n * (`efficient-shop` → `storefront-editor.css`, the `.sf-rail` / `.sf-rail-btn`\n * rules), which is the visual reference. The admin portal's hand-rolled rail had\n * drifted (button 36 vs 34, icon 20 vs 18, radius 8 vs 9, a Tailwind accent\n * instead of a CSS var); these tokens end that drift.\n *\n * Exposed BOTH ways, per the same value:\n *   - `railTokens` — this JS object, for anything that needs the numbers/colours\n *     in code (inline styles, a theme bridge, a Storybook control);\n *   - `rail.css` — the stylesheet, which declares the identical values as CSS\n *     custom properties on `.es-rail` (names listed in `railCssVars`).\n *\n * Numeric fields are pixel magnitudes (unitless) so they compose in code; the\n * CSS applies the `px`.\n */\nexport const railTokens = {\n  /** Rail column width. `--sf-rail-w: 46px`. */\n  railWidth: 46,\n  /** Vertical padding inside the rail (top === bottom). */\n  railPaddingY: 8,\n  /** Gap between buttons. */\n  railGap: 4,\n  /** Rail card corner radius. `--sf-panel-radius: 12px`. */\n  railRadius: 12,\n  /** Button hit-area (square). */\n  buttonSize: 34,\n  /** Button corner radius. */\n  buttonRadius: 9,\n  /** Icon glyph size. */\n  iconSize: 18,\n  /** Hover/active colour transition. */\n  transition: 'background 0.12s, color 0.12s',\n  /** Disabled-button opacity. */\n  disabledOpacity: 0.35,\n  color: {\n    /** Rail card background. `--sf-panel`. */\n    background: '#ffffff',\n    /** Rail card shadow. `--sf-panel-shadow`. */\n    shadow: '0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)',\n    /** Idle icon colour. `--sf-muted` (gray-500). */\n    idle: '#6b7280',\n    /** Hover background. `--sf-hover` (gray-100). */\n    hoverBg: '#f3f4f6',\n    /** Hover icon colour. `--sf-text` (gray-900). */\n    hoverFg: '#111827',\n    /** Active icon colour. `--sf-accent` (blue-600). */\n    accent: '#2563eb',\n    /** Active background. `--sf-accent-tint` (blue-50). */\n    accentTint: '#eff6ff',\n  },\n} as const;\n\nexport type RailTokens = typeof railTokens;\n\n/**\n * The CSS custom-property name behind each token. `rail.css` sets these on\n * `.es-rail`; override any of them on (or above) the rail element to re-theme it\n * — e.g. `style={{ ['--es-rail-accent']: brand }}` — without shipping new CSS.\n */\nexport const railCssVars = {\n  railWidth: '--es-rail-w',\n  railPaddingY: '--es-rail-pad-y',\n  railGap: '--es-rail-gap',\n  railRadius: '--es-rail-radius',\n  buttonSize: '--es-rail-btn-size',\n  buttonRadius: '--es-rail-btn-radius',\n  iconSize: '--es-rail-icon-size',\n  background: '--es-rail-bg',\n  shadow: '--es-rail-shadow',\n  idle: '--es-rail-fg',\n  hoverBg: '--es-rail-hover-bg',\n  hoverFg: '--es-rail-hover-fg',\n  accent: '--es-rail-accent',\n  accentTint: '--es-rail-accent-tint',\n} as const;\n"]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { EditorRail, EditorRailButton, EditorRailButtonProps, EditorRailItem, EditorRailProps, RailTokens, railCssVars, railTokens } from './rail/index.js';
+export { EditorRail, EditorRailButton, EditorRailButtonProps, EditorRailItem, EditorRailOrientation, EditorRailProps, RailTokens, railCssVars, railTokens } from './rail/index.js';
 export { AddIcon, LayersIcon, MediaIcon, PageIcon as PagesIcon, IconProps as RailIconProps, SitemapIcon, StylesIcon } from './icons/index.js';
 export { ShellTokens, puckAzureRamp, shellCssVars, shellTokens } from './shell/index.js';
 import 'react';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { puckAzureRamp, shellCssVars, shellTokens } from './chunk-EZKBKK3E.js';
-export { EditorRail, EditorRailButton, railCssVars, railTokens } from './chunk-3VMFPQGZ.js';
+export { EditorRail, EditorRailButton, railCssVars, railTokens } from './chunk-HYOACICE.js';
 export { AddIcon, LayersIcon, MediaIcon, PageIcon as PagesIcon, SitemapIcon, StylesIcon } from './chunk-M7B5VTWH.js';
+export { puckAzureRamp, shellCssVars, shellTokens } from './chunk-EZKBKK3E.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/rail/index.d.ts

@@ -33,6 +33,23 @@ interface EditorRailItem {
     /** Click handler. Skipped while `disabled`. */
     onSelect?: () => void;
 }
+/**
+ * Which way the rail runs.
+ *
+ * `'column'` — the original, and the default: a slim fixed-width strip down the
+ * side of the editor, wearing its own card (a background, a 12px radius and a
+ * drop shadow).
+ *
+ * `'row'` — the same buttons laid left to right, with NO fixed width and NO
+ * card, so the rail can sit in the middle of a top bar that already has its own
+ * surface. It exists because the column costs a 1280px laptop 56px of preview
+ * (46px of rail plus the 10px gap) that the top bar has going spare.
+ *
+ * Only the CONTAINER changes. Button size, icon size, the gap, and the hover
+ * and active look are the same in both directions — the row re-points three
+ * existing `--es-rail-*` custom properties and touches nothing else.
+ */
+type EditorRailOrientation = 'column' | 'row';
 interface EditorRailProps {
     /** The buttons, top to bottom, in render order (place the "+" where you want it). */
     items: EditorRailItem[];
@@ -40,6 +57,12 @@ interface EditorRailProps {
     ariaLabel?: string;
     /** Extra class(es) merged onto the rail container. */
     className?: string;
+    /**
+     * Which way the buttons run. Defaults to `'column'`, which renders exactly
+     * what every editor draws today — adding this prop changed no existing
+     * output. Pass `'row'` to lay the rail into a top bar.
+     */
+    orientation?: EditorRailOrientation;
 }
 interface EditorRailButtonProps {
     label: string;
@@ -51,11 +74,12 @@ interface EditorRailButtonProps {
 }
 
 /**
- * The shared left icon-rail — one slim vertical strip of icon buttons that every
- * EFFICIENT editor uses to switch panels (Pages / Layers / Styles / Media /
- * Sitemap) and to quick-add ("+"). It is a **pure presentational switcher**: give
- * it `items[]`, it draws them; which one is `active` and what each does is the
- * host's business.
+ * The shared icon-rail — one slim strip of icon buttons that every EFFICIENT
+ * editor uses to switch panels (Pages / Layers / Styles / Media / Sitemap) and
+ * to quick-add ("+"). By default it is the vertical strip down the left; pass
+ * `orientation="row"` and the same buttons lay into a top bar instead. It is a
+ * **pure presentational switcher**: give it `items[]`, it draws them; which one
+ * is `active` and what each does is the host's business.
  *
  * No `'use client'` here on purpose — the rail has no hooks or state, so it is a
  * plain module a Next-16 server component can import and even statically render.
@@ -64,11 +88,21 @@ interface EditorRailButtonProps {
  * components), so baking a directive into this leaf would only narrow where it
  * can be imported.
  *
- * A vertical `toolbar` (not a `tablist`), because the rail mixes view *toggles*
- * with plain *actions* like the quick-add — a toolbar of buttons models that
+ * A `toolbar` (not a `tablist`), because the rail mixes view *toggles* with
+ * plain *actions* like the quick-add — a toolbar of buttons models that
  * honestly, where a tablist would force every button to pretend to be a tab.
+ * That is true in both directions, so `orientation` moves `aria-orientation`
+ * and leaves the role alone: what the rail IS did not change, only which way it
+ * runs — and a toolbar's arrow keys follow its orientation, so a row that kept
+ * saying `vertical` would describe the wrong keys.
+ *
+ * `orientation` defaults to `'column'`, and that path is byte-identical to what
+ * this component rendered before the prop existed: same class list, same
+ * attributes, same order. `'row'` adds ONE modifier class beside `es-rail` —
+ * never instead of it, since every button rule and token in rail.css hangs off
+ * the base class — and rail.css does the rest.
  */
-declare function EditorRail({ items, ariaLabel, className }: EditorRailProps): react.JSX.Element;
+declare function EditorRail({ items, ariaLabel, className, orientation, }: EditorRailProps): react.JSX.Element;
 
 /**
  * A single rail button: an icon in a 34×34 square that hovers, highlights when
@@ -157,4 +191,4 @@ declare const railCssVars: {
     readonly accentTint: "--es-rail-accent-tint";
 };
 
-export { EditorRail, EditorRailButton, type EditorRailButtonProps, type EditorRailItem, type EditorRailProps, type RailTokens, railCssVars, railTokens };
+export { EditorRail, EditorRailButton, type EditorRailButtonProps, type EditorRailItem, type EditorRailOrientation, type EditorRailProps, type RailTokens, railCssVars, railTokens };

package/dist/rail/index.js

@@ -1,4 +1,4 @@
-export { EditorRail, EditorRailButton, railCssVars, railTokens } from '../chunk-3VMFPQGZ.js';
+export { EditorRail, EditorRailButton, railCssVars, railTokens } from '../chunk-HYOACICE.js';
 export { AddIcon, LayersIcon, MediaIcon, PageIcon as PagesIcon, SitemapIcon, StylesIcon } from '../chunk-M7B5VTWH.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/rail/rail.css

@@ -40,6 +40,45 @@
   box-shadow: var(--es-rail-shadow);
 }
 
+/*
+ * The ROW variant (card 66160) — the same rail laid into a top bar.
+ *
+ * The column costs a 1280px laptop 56px of website preview (a 46px rail plus
+ * the 10px panel gap) that the top bar has going spare, so the icons move up
+ * there. `.es-rail` above is UNTOUCHED: this rule only overrides, so a consumer
+ * who never passes `orientation` gets exactly the stylesheet they had.
+ *
+ * THE CARD LOOK GOES, THROUGH THE TOKENS THAT ALREADY EXIST. The bar has its
+ * own surface and shadow; a second white card floating inside it is the bug.
+ * These re-point the THREE custom properties the base rule already reads rather
+ * than re-stating `background` / `box-shadow` / `border-radius` here — so the
+ * card look stays declared in exactly one place, and a host re-theming the rail
+ * still only has the `--es-rail-*` names to learn.
+ *
+ * WHAT DELIBERATELY DOES NOT CHANGE: the button size, the button radius, the
+ * icon size, the gap and every colour. The icons must not resize when they move
+ * into the bar, so no `--es-rail-btn-*`, `--es-rail-icon-size` or colour token
+ * appears below, and there is no `.es-rail-row .es-rail-btn` rule anywhere.
+ * `align-items: center` is inherited from the base rule and does the right
+ * thing here too — in a row it centres the buttons vertically.
+ */
+.es-rail.es-rail-row {
+  --es-rail-bg: transparent;
+  --es-rail-shadow: none;
+  --es-rail-radius: 0;
+
+  flex-direction: row;
+  /* No fixed width: the row is as wide as its buttons. `flex: none` from the
+     base rule keeps flex-basis on `auto`, so this sizes to content. */
+  width: auto;
+  /* The column pads `--es-rail-pad-y 0`: the one step goes on the MAIN axis —
+     the run of buttons — and the cross axis is handled by the fixed width.
+     Rotate the axes and the same step goes on the ENDS of the row. The cross
+     axis is 0 on purpose, so the row is exactly one button tall (34px) and the
+     52px bar centres it, instead of the rail imposing a height on the bar. */
+  padding: 0 var(--es-rail-pad-y);
+}
+
 .es-rail-btn {
   width: var(--es-rail-btn-size);
   height: var(--es-rail-btn-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Shared editor-chrome primitives for the EFFICIENT editors: EditorRail (a Next-16-safe left icon-rail leaf), the shell token layer, and GoldTextInput — type in place and watch the markup formatting appear as you type.",
   "license": "MIT",
   "author": "Lewis Liu",

package/dist/chunk-3VMFPQGZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/rail/EditorRailButton.tsx","../src/rail/EditorRail.tsx","../src/rail/tokens.ts"],"names":["jsx"],"mappings":"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","file":"chunk-3VMFPQGZ.js","sourcesContent":["import type { EditorRailButtonProps } from './types';\n\n/**\n * A single rail button: an icon in a 34×34 square that hovers, highlights when\n * active, and dims when disabled. Look only — the caller owns the click.\n *\n * `aria-pressed` is emitted **only** when `active` is a real boolean, so a view\n * toggle announces its pressed state while an action button (the quick-add \"+\",\n * whose item omits `active`) stays a plain button rather than a stuck toggle.\n */\nexport function EditorRailButton({\n  label,\n  icon,\n  active,\n  disabled,\n  onSelect,\n  className,\n}: EditorRailButtonProps) {\n  const classes = ['es-rail-btn', active ? 'is-active' : '', className ?? '']\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      title={label}\n      aria-label={label}\n      aria-pressed={typeof active === 'boolean' ? active : undefined}\n      disabled={disabled}\n      onClick={disabled ? undefined : onSelect}\n    >\n      {icon}\n    </button>\n  );\n}\n","import { EditorRailButton } from './EditorRailButton';\nimport type { EditorRailProps } from './types';\n\n/**\n * The shared left icon-rail — one slim vertical strip of icon buttons that every\n * EFFICIENT editor uses to switch panels (Pages / Layers / Styles / Media /\n * Sitemap) and to quick-add (\"+\"). It is a **pure presentational switcher**: give\n * it `items[]`, it draws them; which one is `active` and what each does is the\n * host's business.\n *\n * No `'use client'` here on purpose — the rail has no hooks or state, so it is a\n * plain module a Next-16 server component can import and even statically render.\n * It's interactive only through the `onSelect` props the host passes, and the\n * host owns its client boundary (both editors' chrome are already client\n * components), so baking a directive into this leaf would only narrow where it\n * can be imported.\n *\n * A vertical `toolbar` (not a `tablist`), because the rail mixes view *toggles*\n * with plain *actions* like the quick-add — a toolbar of buttons models that\n * honestly, where a tablist would force every button to pretend to be a tab.\n */\nexport function EditorRail({ items, ariaLabel = 'Editor', className }: EditorRailProps) {\n  return (\n    <div\n      className={['es-rail', className ?? ''].filter(Boolean).join(' ')}\n      role=\"toolbar\"\n      aria-orientation=\"vertical\"\n      aria-label={ariaLabel}\n    >\n      {items.map((item) => (\n        <EditorRailButton\n          key={item.id}\n          label={item.label}\n          icon={item.icon}\n          active={item.active}\n          disabled={item.disabled}\n          onSelect={item.onSelect}\n        />\n      ))}\n    </div>\n  );\n}\n","/**\n * Rail design tokens — the ONE source both apps' rails converge on.\n *\n * Every value below is taken verbatim from the storefront editor's rail\n * (`efficient-shop` → `storefront-editor.css`, the `.sf-rail` / `.sf-rail-btn`\n * rules), which is the visual reference. The admin portal's hand-rolled rail had\n * drifted (button 36 vs 34, icon 20 vs 18, radius 8 vs 9, a Tailwind accent\n * instead of a CSS var); these tokens end that drift.\n *\n * Exposed BOTH ways, per the same value:\n *   - `railTokens` — this JS object, for anything that needs the numbers/colours\n *     in code (inline styles, a theme bridge, a Storybook control);\n *   - `rail.css` — the stylesheet, which declares the identical values as CSS\n *     custom properties on `.es-rail` (names listed in `railCssVars`).\n *\n * Numeric fields are pixel magnitudes (unitless) so they compose in code; the\n * CSS applies the `px`.\n */\nexport const railTokens = {\n  /** Rail column width. `--sf-rail-w: 46px`. */\n  railWidth: 46,\n  /** Vertical padding inside the rail (top === bottom). */\n  railPaddingY: 8,\n  /** Gap between buttons. */\n  railGap: 4,\n  /** Rail card corner radius. `--sf-panel-radius: 12px`. */\n  railRadius: 12,\n  /** Button hit-area (square). */\n  buttonSize: 34,\n  /** Button corner radius. */\n  buttonRadius: 9,\n  /** Icon glyph size. */\n  iconSize: 18,\n  /** Hover/active colour transition. */\n  transition: 'background 0.12s, color 0.12s',\n  /** Disabled-button opacity. */\n  disabledOpacity: 0.35,\n  color: {\n    /** Rail card background. `--sf-panel`. */\n    background: '#ffffff',\n    /** Rail card shadow. `--sf-panel-shadow`. */\n    shadow: '0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)',\n    /** Idle icon colour. `--sf-muted` (gray-500). */\n    idle: '#6b7280',\n    /** Hover background. `--sf-hover` (gray-100). */\n    hoverBg: '#f3f4f6',\n    /** Hover icon colour. `--sf-text` (gray-900). */\n    hoverFg: '#111827',\n    /** Active icon colour. `--sf-accent` (blue-600). */\n    accent: '#2563eb',\n    /** Active background. `--sf-accent-tint` (blue-50). */\n    accentTint: '#eff6ff',\n  },\n} as const;\n\nexport type RailTokens = typeof railTokens;\n\n/**\n * The CSS custom-property name behind each token. `rail.css` sets these on\n * `.es-rail`; override any of them on (or above) the rail element to re-theme it\n * — e.g. `style={{ ['--es-rail-accent']: brand }}` — without shipping new CSS.\n */\nexport const railCssVars = {\n  railWidth: '--es-rail-w',\n  railPaddingY: '--es-rail-pad-y',\n  railGap: '--es-rail-gap',\n  railRadius: '--es-rail-radius',\n  buttonSize: '--es-rail-btn-size',\n  buttonRadius: '--es-rail-btn-radius',\n  iconSize: '--es-rail-icon-size',\n  background: '--es-rail-bg',\n  shadow: '--es-rail-shadow',\n  idle: '--es-rail-fg',\n  hoverBg: '--es-rail-hover-bg',\n  hoverFg: '--es-rail-hover-fg',\n  accent: '--es-rail-accent',\n  accentTint: '--es-rail-accent-tint',\n} as const;\n"]}