editor-shell 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lewis Liu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# editor-shell
+
+Shared **editor-chrome** primitives for the EFFICIENT editors — the owner's own
+editor shell, so every editor draws the same chrome from one source instead of
+hand-rolling and drifting.
+
+> **Status: foundation.** Ships one brick — the shared left icon-rail. Not
+> published to npm; no product repo consumes it yet.
+
+## Why
+
+The storefront editor (`efficient-shop`, Next 16 + Puck) and the campaign
+designer (`efficient-admin-portal`, Vite/React) each hand-rolled their own narrow
+left icon-rail. They had already drifted — button 34px vs 36px, icon 18px vs
+20px, radius 9 vs 8, a CSS-var accent vs a Tailwind one. `EditorRail` is the one
+rail they converge on.
+
+## The leaf
+
+The storefront's editor chrome renders in **Next-16 server components**, so the
+rail is a **self-contained leaf** at `editor-shell/rail`: it imports nothing heavy
+and touches no `document` / `window` / `localStorage` at import or render, so a
+server component can pull it in safely. `tests/rail-leaf-safety.test.tsx` proves
+it.
+
+```tsx
+// A client component in any editor:
+'use client';
+import {
+  EditorRail,
+  PagesIcon, LayersIcon, StylesIcon, MediaIcon, SitemapIcon, AddIcon,
+} from 'editor-shell/rail';
+import 'editor-shell/rail.css'; // once, from a client/global entry
+
+export function LeftRail({ view, onView, onAdd }) {
+  return (
+    <EditorRail
+      ariaLabel="Left panel views"
+      items={[
+        { id: 'pages',  label: 'Pages',  icon: <PagesIcon />,  active: view === 'pages',  onSelect: () => onView('pages') },
+        { id: 'layers', label: 'Layers', icon: <LayersIcon />, active: view === 'layers', onSelect: () => onView('layers') },
+        { id: 'styles', label: 'Styles', icon: <StylesIcon />, active: view === 'styles', onSelect: () => onView('styles') },
+        { id: 'media',  label: 'Media',  icon: <MediaIcon />,  onSelect: onOpenMedia },
+        { id: 'add',    label: 'Add page', icon: <AddIcon />,  onSelect: onAdd },
+      ]}
+    />
+  );
+}
+```
+
+## API
+
+### `<EditorRail items ariaLabel? className? />`
+
+A **pure presentational** vertical 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 |
+| `ariaLabel` | `string` | `"Editor"` | names the toolbar for assistive tech |
+| `className` | `string` | — | merged onto `.es-rail` |
+
+### `EditorRailItem`
+
+```ts
+interface EditorRailItem {
+  id: string;            // React key + selection correlation
+  label: string;         // aria-label + hover title
+  icon: React.ReactNode; // an 18px currentColor glyph — use the shipped icons
+  active?: boolean;      // present ⇒ view toggle (renders aria-pressed); omit for actions
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+```
+
+A **view item** passes `active: true | false` and renders as a toggle
+(`aria-pressed`, `.is-active` highlight). An **action item** (the quick-add "+")
+omits `active` and renders as a plain button.
+
+`EditorRailButton` — the single-button building block `EditorRail` maps to — is
+exported too, for bespoke layouts.
+
+## Tokens
+
+The same values, two ways — `railTokens` (JS) and `rail.css` (CSS custom
+properties on `.es-rail`). Taken verbatim from the storefront editor's `.sf-rail`
+(the visual reference).
+
+| token | value | CSS var |
+|---|---|---|
+| rail width | `46px` | `--es-rail-w` |
+| rail padding (y) | `8px` | `--es-rail-pad-y` |
+| button gap | `4px` | `--es-rail-gap` |
+| rail radius | `12px` | `--es-rail-radius` |
+| button size | `34px` | `--es-rail-btn-size` |
+| button radius | `9px` | `--es-rail-btn-radius` |
+| icon size | `18px` | `--es-rail-icon-size` |
+| background | `#ffffff` | `--es-rail-bg` |
+| idle icon | `#6b7280` | `--es-rail-fg` |
+| hover bg / fg | `#f3f4f6` / `#111827` | `--es-rail-hover-bg` / `--es-rail-hover-fg` |
+| accent (active) | `#2563eb` | `--es-rail-accent` |
+| accent tint (active bg) | `#eff6ff` | `--es-rail-accent-tint` |
+
+Re-theme without new CSS by overriding a var on the element:
+`style={{ ['--es-rail-accent']: brand }}`.
+
+## Develop
+
+No Node on the dev Mac — everything runs in Docker:
+
+```bash
+docker run --rm -v "$PWD":/w -w /w node:26-slim \
+  sh -lc "npm install && npm run typecheck && npm test && npm run build"
+```
+
+- `npm run typecheck` — `tsc` over `src` and the specs.
+- `npm test` — the leaf-safety gate.
+- `npm run build` — `tsup` → `dist/` (root + `rail` subpath) + the copied CSS.

package/dist/chunk-WJIHF6PY.js

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/rail/EditorRailButton.tsx
+function EditorRailButton({
+  label,
+  icon,
+  active,
+  disabled,
+  onSelect,
+  className
+}) {
+  const classes = ["es-rail-btn", active ? "is-active" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      title: label,
+      "aria-label": label,
+      "aria-pressed": typeof active === "boolean" ? active : void 0,
+      disabled,
+      onClick: disabled ? void 0 : onSelect,
+      children: icon
+    }
+  );
+}
+function EditorRail({ items, ariaLabel = "Editor", className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["es-rail", className ?? ""].filter(Boolean).join(" "),
+      role: "toolbar",
+      "aria-orientation": "vertical",
+      "aria-label": ariaLabel,
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        EditorRailButton,
+        {
+          label: item.label,
+          icon: item.icon,
+          active: item.active,
+          disabled: item.disabled,
+          onSelect: item.onSelect
+        },
+        item.id
+      ))
+    }
+  );
+}
+function Glyph({ size = 18, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.7,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children
+    }
+  );
+}
+function PagesIcon(props) {
+  return /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 13h6M9 17h6" })
+  ] });
+}
+function LayersIcon(props) {
+  return /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3l9 5-9 5-9-5 9-5z" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 13l9 5 9-5" })
+  ] });
+}
+function StylesIcon(props) {
+  return /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3c-4.5 0-8 3.4-8 7.6 0 3 2.2 4.9 4.8 4.9 1 0 1.6.7 1.6 1.5 0 .5-.3.9-.3 1.4 0 .9.8 1.6 1.9 1.6 4.4 0 8-3.6 8-8C20 6.4 16.5 3 12 3z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "10", r: "0.6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7.8", r: "0.6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "10", r: "0.6", fill: "currentColor" })
+  ] });
+}
+function MediaIcon(props) {
+  return /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "9.5", r: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 16l-5-5-6 6" })
+  ] });
+}
+function SitemapIcon(props) {
+  return /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "3", width: "6", height: "4.5", rx: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "16.5", width: "6", height: "4.5", rx: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "15", y: "16.5", width: "6", height: "4.5", rx: "1" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7.5v4M6 16.5v-2.5h12v2.5M18 16.5v-2.5" })
+  ] });
+}
+function AddIcon(props) {
+  return /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+}
+
+// src/rail/tokens.ts
+var railTokens = {
+  /** Rail column width. `--sf-rail-w: 46px`. */
+  railWidth: 46,
+  /** Vertical padding inside the rail (top === bottom). */
+  railPaddingY: 8,
+  /** Gap between buttons. */
+  railGap: 4,
+  /** Rail card corner radius. `--sf-panel-radius: 12px`. */
+  railRadius: 12,
+  /** Button hit-area (square). */
+  buttonSize: 34,
+  /** Button corner radius. */
+  buttonRadius: 9,
+  /** Icon glyph size. */
+  iconSize: 18,
+  /** Hover/active colour transition. */
+  transition: "background 0.12s, color 0.12s",
+  /** Disabled-button opacity. */
+  disabledOpacity: 0.35,
+  color: {
+    /** Rail card background. `--sf-panel`. */
+    background: "#ffffff",
+    /** Rail card shadow. `--sf-panel-shadow`. */
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)",
+    /** Idle icon colour. `--sf-muted` (gray-500). */
+    idle: "#6b7280",
+    /** Hover background. `--sf-hover` (gray-100). */
+    hoverBg: "#f3f4f6",
+    /** Hover icon colour. `--sf-text` (gray-900). */
+    hoverFg: "#111827",
+    /** Active icon colour. `--sf-accent` (blue-600). */
+    accent: "#2563eb",
+    /** Active background. `--sf-accent-tint` (blue-50). */
+    accentTint: "#eff6ff"
+  }
+};
+var railCssVars = {
+  railWidth: "--es-rail-w",
+  railPaddingY: "--es-rail-pad-y",
+  railGap: "--es-rail-gap",
+  railRadius: "--es-rail-radius",
+  buttonSize: "--es-rail-btn-size",
+  buttonRadius: "--es-rail-btn-radius",
+  iconSize: "--es-rail-icon-size",
+  background: "--es-rail-bg",
+  shadow: "--es-rail-shadow",
+  idle: "--es-rail-fg",
+  hoverBg: "--es-rail-hover-bg",
+  hoverFg: "--es-rail-hover-fg",
+  accent: "--es-rail-accent",
+  accentTint: "--es-rail-accent-tint"
+};
+
+export { AddIcon, EditorRail, EditorRailButton, LayersIcon, MediaIcon, PagesIcon, SitemapIcon, StylesIcon, railCssVars, railTokens };
+//# sourceMappingURL=chunk-WJIHF6PY.js.map
+//# sourceMappingURL=chunk-WJIHF6PY.js.map

package/dist/chunk-WJIHF6PY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/rail/EditorRailButton.tsx","../src/rail/EditorRail.tsx","../src/rail/icons.tsx","../src/rail/tokens.ts"],"names":["jsx"],"mappings":"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","file":"chunk-WJIHF6PY.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","import type { ReactNode, SVGProps } from 'react';\n\n/**\n * The rail's bespoke icon set — shipped WITH the rail so no editor has to reach\n * for its own icon library (the storefront uses simple-icons, the admin portal\n * heroicons; neither is this rail's source of truth). The five view glyphs are\n * the exact paths the storefront editor's rail already draws, relocated here so\n * the shared rail is visually identical to its reference; `AddIcon` is new.\n *\n * Pure SVG, no interactivity, no browser globals — these render fine inside a\n * React Server Component. Sized 18×18 by default (the storefront's rail size);\n * pass `size` to override, or let `.es-rail-btn svg` in rail.css drive it.\n */\nexport type RailIconProps = Omit<SVGProps<SVGSVGElement>, 'children'> & { size?: number };\n\nfunction Glyph({ size = 18, children, ...rest }: RailIconProps & { children: ReactNode }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.7}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      {...rest}\n    >\n      {children}\n    </svg>\n  );\n}\n\n/** Pages — a document with a folded corner and text lines. */\nexport function PagesIcon(props: RailIconProps) {\n  return (\n    <Glyph {...props}>\n      <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\" />\n      <path d=\"M14 3v5h5\" />\n      <path d=\"M9 13h6M9 17h6\" />\n    </Glyph>\n  );\n}\n\n/** Layers — stacked sheets (the section / component tree). */\nexport function LayersIcon(props: RailIconProps) {\n  return (\n    <Glyph {...props}>\n      <path d=\"M12 3l9 5-9 5-9-5 9-5z\" />\n      <path d=\"M3 13l9 5 9-5\" />\n    </Glyph>\n  );\n}\n\n/** Styles — a paint droplet with palette dots (site styles). */\nexport function StylesIcon(props: RailIconProps) {\n  return (\n    <Glyph {...props}>\n      <path d=\"M12 3c-4.5 0-8 3.4-8 7.6 0 3 2.2 4.9 4.8 4.9 1 0 1.6.7 1.6 1.5 0 .5-.3.9-.3 1.4 0 .9.8 1.6 1.9 1.6 4.4 0 8-3.6 8-8C20 6.4 16.5 3 12 3z\" />\n      <circle cx=\"8.5\" cy=\"10\" r=\"0.6\" fill=\"currentColor\" />\n      <circle cx=\"12\" cy=\"7.8\" r=\"0.6\" fill=\"currentColor\" />\n      <circle cx=\"15.5\" cy=\"10\" r=\"0.6\" fill=\"currentColor\" />\n    </Glyph>\n  );\n}\n\n/** Media — an image frame with a sun and a mountain (the media library). */\nexport function MediaIcon(props: RailIconProps) {\n  return (\n    <Glyph {...props}>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" />\n      <circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\" />\n      <path d=\"M21 16l-5-5-6 6\" />\n    </Glyph>\n  );\n}\n\n/** Sitemap — a root node branching to two page nodes (the visual sitemap). */\nexport function SitemapIcon(props: RailIconProps) {\n  return (\n    <Glyph {...props}>\n      <rect x=\"9\" y=\"3\" width=\"6\" height=\"4.5\" rx=\"1\" />\n      <rect x=\"3\" y=\"16.5\" width=\"6\" height=\"4.5\" rx=\"1\" />\n      <rect x=\"15\" y=\"16.5\" width=\"6\" height=\"4.5\" rx=\"1\" />\n      <path d=\"M12 7.5v4M6 16.5v-2.5h12v2.5M18 16.5v-2.5\" />\n    </Glyph>\n  );\n}\n\n/** Add — the quick-add \"+\", drawn in the same weight and cap style as the set. */\nexport function AddIcon(props: RailIconProps) {\n  return (\n    <Glyph {...props}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </Glyph>\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

@@ -0,0 +1,2 @@
+export { AddIcon, EditorRail, EditorRailButton, EditorRailButtonProps, EditorRailItem, EditorRailProps, LayersIcon, MediaIcon, PagesIcon, RailIconProps, RailTokens, SitemapIcon, StylesIcon, railCssVars, railTokens } from './rail/index.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { AddIcon, EditorRail, EditorRailButton, LayersIcon, MediaIcon, PagesIcon, SitemapIcon, StylesIcon, railCssVars, railTokens } from './chunk-WJIHF6PY.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/rail/index.d.ts

@@ -0,0 +1,186 @@
+import * as react from 'react';
+import { ReactNode, SVGProps } from 'react';
+
+/**
+ * One entry in the rail. A rail item is either a *view switch* (Pages, Layers,
+ * Styles, …) or an *action* (the quick-add "+"). The shape is the same for both;
+ * what tells them apart is `active`:
+ *
+ *   - a view item passes `active: true | false` → it renders as a toggle
+ *     (`aria-pressed`) and lights up when its surface is open;
+ *   - an action item omits `active` → it renders as a plain button with no
+ *     pressed state, because "Add" is a thing you *do*, not a thing you're *in*.
+ *
+ * The rail is purely presentational: it owns the LOOK, never the app state. The
+ * host decides which item is `active` and what each `onSelect` does.
+ */
+interface EditorRailItem {
+    /** Stable identity — used as the React key and to correlate selection. */
+    id: string;
+    /** Accessible name; becomes both the `aria-label` and the hover `title`. */
+    label: string;
+    /**
+     * The glyph. Pass one of the icons this package ships
+     * (`<PagesIcon />`, `<AddIcon />`, …) so every editor's rail draws the same
+     * set. Any 18×18, `currentColor`-stroked node works.
+     */
+    icon: ReactNode;
+    /** Present ⇒ this is a view toggle and this is whether its surface is open. */
+    active?: boolean;
+    /** Dim + non-interactive. */
+    disabled?: boolean;
+    /** Click handler. Skipped while `disabled`. */
+    onSelect?: () => void;
+}
+interface EditorRailProps {
+    /** The buttons, top to bottom, in render order (place the "+" where you want it). */
+    items: EditorRailItem[];
+    /** Names the toolbar for assistive tech. Defaults to `"Editor"`. */
+    ariaLabel?: string;
+    /** Extra class(es) merged onto the rail container. */
+    className?: string;
+}
+interface EditorRailButtonProps {
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+    className?: string;
+}
+
+/**
+ * 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.
+ *
+ * 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.
+ * It's interactive only through the `onSelect` props the host passes, and the
+ * host owns its client boundary (both editors' chrome are already client
+ * 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
+ * honestly, where a tablist would force every button to pretend to be a tab.
+ */
+declare function EditorRail({ items, ariaLabel, className }: EditorRailProps): react.JSX.Element;
+
+/**
+ * A single rail button: an icon in a 34×34 square that hovers, highlights when
+ * active, and dims when disabled. Look only — the caller owns the click.
+ *
+ * `aria-pressed` is emitted **only** when `active` is a real boolean, so a view
+ * toggle announces its pressed state while an action button (the quick-add "+",
+ * whose item omits `active`) stays a plain button rather than a stuck toggle.
+ */
+declare function EditorRailButton({ label, icon, active, disabled, onSelect, className, }: EditorRailButtonProps): react.JSX.Element;
+
+/**
+ * The rail's bespoke icon set — shipped WITH the rail so no editor has to reach
+ * for its own icon library (the storefront uses simple-icons, the admin portal
+ * heroicons; neither is this rail's source of truth). The five view glyphs are
+ * the exact paths the storefront editor's rail already draws, relocated here so
+ * the shared rail is visually identical to its reference; `AddIcon` is new.
+ *
+ * Pure SVG, no interactivity, no browser globals — these render fine inside a
+ * React Server Component. Sized 18×18 by default (the storefront's rail size);
+ * pass `size` to override, or let `.es-rail-btn svg` in rail.css drive it.
+ */
+type RailIconProps = Omit<SVGProps<SVGSVGElement>, 'children'> & {
+    size?: number;
+};
+/** Pages — a document with a folded corner and text lines. */
+declare function PagesIcon(props: RailIconProps): react.JSX.Element;
+/** Layers — stacked sheets (the section / component tree). */
+declare function LayersIcon(props: RailIconProps): react.JSX.Element;
+/** Styles — a paint droplet with palette dots (site styles). */
+declare function StylesIcon(props: RailIconProps): react.JSX.Element;
+/** Media — an image frame with a sun and a mountain (the media library). */
+declare function MediaIcon(props: RailIconProps): react.JSX.Element;
+/** Sitemap — a root node branching to two page nodes (the visual sitemap). */
+declare function SitemapIcon(props: RailIconProps): react.JSX.Element;
+/** Add — the quick-add "+", drawn in the same weight and cap style as the set. */
+declare function AddIcon(props: RailIconProps): react.JSX.Element;
+
+/**
+ * Rail design tokens — the ONE source both apps' rails converge on.
+ *
+ * Every value below is taken verbatim from the storefront editor's rail
+ * (`efficient-shop` → `storefront-editor.css`, the `.sf-rail` / `.sf-rail-btn`
+ * rules), which is the visual reference. The admin portal's hand-rolled rail had
+ * drifted (button 36 vs 34, icon 20 vs 18, radius 8 vs 9, a Tailwind accent
+ * instead of a CSS var); these tokens end that drift.
+ *
+ * Exposed BOTH ways, per the same value:
+ *   - `railTokens` — this JS object, for anything that needs the numbers/colours
+ *     in code (inline styles, a theme bridge, a Storybook control);
+ *   - `rail.css` — the stylesheet, which declares the identical values as CSS
+ *     custom properties on `.es-rail` (names listed in `railCssVars`).
+ *
+ * Numeric fields are pixel magnitudes (unitless) so they compose in code; the
+ * CSS applies the `px`.
+ */
+declare const railTokens: {
+    /** Rail column width. `--sf-rail-w: 46px`. */
+    readonly railWidth: 46;
+    /** Vertical padding inside the rail (top === bottom). */
+    readonly railPaddingY: 8;
+    /** Gap between buttons. */
+    readonly railGap: 4;
+    /** Rail card corner radius. `--sf-panel-radius: 12px`. */
+    readonly railRadius: 12;
+    /** Button hit-area (square). */
+    readonly buttonSize: 34;
+    /** Button corner radius. */
+    readonly buttonRadius: 9;
+    /** Icon glyph size. */
+    readonly iconSize: 18;
+    /** Hover/active colour transition. */
+    readonly transition: "background 0.12s, color 0.12s";
+    /** Disabled-button opacity. */
+    readonly disabledOpacity: 0.35;
+    readonly color: {
+        /** Rail card background. `--sf-panel`. */
+        readonly background: "#ffffff";
+        /** Rail card shadow. `--sf-panel-shadow`. */
+        readonly shadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)";
+        /** Idle icon colour. `--sf-muted` (gray-500). */
+        readonly idle: "#6b7280";
+        /** Hover background. `--sf-hover` (gray-100). */
+        readonly hoverBg: "#f3f4f6";
+        /** Hover icon colour. `--sf-text` (gray-900). */
+        readonly hoverFg: "#111827";
+        /** Active icon colour. `--sf-accent` (blue-600). */
+        readonly accent: "#2563eb";
+        /** Active background. `--sf-accent-tint` (blue-50). */
+        readonly accentTint: "#eff6ff";
+    };
+};
+type RailTokens = typeof railTokens;
+/**
+ * The CSS custom-property name behind each token. `rail.css` sets these on
+ * `.es-rail`; override any of them on (or above) the rail element to re-theme it
+ * — e.g. `style={{ ['--es-rail-accent']: brand }}` — without shipping new CSS.
+ */
+declare const railCssVars: {
+    readonly railWidth: "--es-rail-w";
+    readonly railPaddingY: "--es-rail-pad-y";
+    readonly railGap: "--es-rail-gap";
+    readonly railRadius: "--es-rail-radius";
+    readonly buttonSize: "--es-rail-btn-size";
+    readonly buttonRadius: "--es-rail-btn-radius";
+    readonly iconSize: "--es-rail-icon-size";
+    readonly background: "--es-rail-bg";
+    readonly shadow: "--es-rail-shadow";
+    readonly idle: "--es-rail-fg";
+    readonly hoverBg: "--es-rail-hover-bg";
+    readonly hoverFg: "--es-rail-hover-fg";
+    readonly accent: "--es-rail-accent";
+    readonly accentTint: "--es-rail-accent-tint";
+};
+
+export { AddIcon, EditorRail, EditorRailButton, type EditorRailButtonProps, type EditorRailItem, type EditorRailProps, LayersIcon, MediaIcon, PagesIcon, type RailIconProps, type RailTokens, SitemapIcon, StylesIcon, railCssVars, railTokens };

package/dist/rail/index.js

@@ -0,0 +1,3 @@
+export { AddIcon, EditorRail, EditorRailButton, LayersIcon, MediaIcon, PagesIcon, SitemapIcon, StylesIcon, railCssVars, railTokens } from '../chunk-WJIHF6PY.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/rail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/rail/rail.css

@@ -0,0 +1,76 @@
+/*
+ * editor-shell — rail styles.
+ *
+ * The values here mirror `railTokens` in tokens.ts one-for-one (both trace back
+ * to the storefront editor's `.sf-rail` rules — the visual reference). They are
+ * declared as custom properties ON `.es-rail`, not on `:root`, so importing this
+ * stylesheet themes ONLY the rail and never leaks variables into the host page.
+ * Re-theme by overriding any `--es-rail-*` var on or above the rail element.
+ *
+ * Import once from a client entry / global stylesheet:
+ *     import 'editor-shell/rail.css';
+ */
+
+.es-rail {
+  /* — tokens (see tokens.ts / railCssVars) — */
+  --es-rail-w: 46px;
+  --es-rail-pad-y: 8px;
+  --es-rail-gap: 4px;
+  --es-rail-radius: 12px;
+  --es-rail-btn-size: 34px;
+  --es-rail-btn-radius: 9px;
+  --es-rail-icon-size: 18px;
+  --es-rail-bg: #ffffff;
+  --es-rail-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
+  --es-rail-fg: #6b7280;
+  --es-rail-hover-bg: #f3f4f6;
+  --es-rail-hover-fg: #111827;
+  --es-rail-accent: #2563eb;
+  --es-rail-accent-tint: #eff6ff;
+
+  flex: none;
+  width: var(--es-rail-w);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--es-rail-gap);
+  padding: var(--es-rail-pad-y) 0;
+  background: var(--es-rail-bg);
+  border-radius: var(--es-rail-radius);
+  box-shadow: var(--es-rail-shadow);
+}
+
+.es-rail-btn {
+  width: var(--es-rail-btn-size);
+  height: var(--es-rail-btn-size);
+  border: none;
+  background: transparent;
+  border-radius: var(--es-rail-btn-radius);
+  color: var(--es-rail-fg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.es-rail-btn svg {
+  width: var(--es-rail-icon-size);
+  height: var(--es-rail-icon-size);
+  display: block;
+}
+
+.es-rail-btn:hover:not(:disabled) {
+  background: var(--es-rail-hover-bg);
+  color: var(--es-rail-hover-fg);
+}
+
+.es-rail-btn.is-active {
+  background: var(--es-rail-accent-tint);
+  color: var(--es-rail-accent);
+}
+
+.es-rail-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "editor-shell",
+  "version": "0.1.0",
+  "description": "Shared editor-chrome primitives for the EFFICIENT editors. First brick: EditorRail — one shared left icon-rail, consumable as a Next-16-safe leaf.",
+  "license": "MIT",
+  "author": "Lewis Liu",
+  "homepage": "https://github.com/Lewislhy/editor-shell#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lewislhy/editor-shell.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Lewislhy/editor-shell/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./rail": {
+      "types": "./dist/rail/index.d.ts",
+      "import": "./dist/rail/index.js"
+    },
+    "./rail.css": "./dist/rail/rail.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "esbuild": "^0.27.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "scripts": {
+    "build": "tsup && cp src/rail/rail.css dist/rail/rail.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json",
+    "test": "node scripts/test.mjs",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "react",
+    "editor",
+    "ui-shell",
+    "rail",
+    "toolbar",
+    "next",
+    "rsc",
+    "leaf"
+  ],
+  "engines": {
+    "node": ">=20"
+  }
+}