editor-shell 0.4.0 → 0.5.1

package/dist/panel/index.d.ts

@@ -0,0 +1,99 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * The settings-panel primitives — the shared grammar BOTH editors' inspector
+ * panels are built from (owner-approved design, 2026-08-20).
+ *
+ * Every one is CONTROLLED and hook-free: the host owns which tab is active and
+ * which groups are open, exactly as the rail's host owns selection. That is what
+ * keeps this a directive-free leaf a Next-16 server component can import.
+ */
+/** One tab in the strip. `badge` shows a count (e.g. unsaved overrides). */
+interface SettingsTabItem {
+    id: string;
+    label: string;
+    badge?: number;
+}
+interface SettingsTabsProps {
+    items: SettingsTabItem[];
+    /** The `id` of the tab currently shown. */
+    activeId: string;
+    onSelect: (id: string) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+interface SettingsGroupProps {
+    /** The group's name — "Items", "Spacing", "Typeface". */
+    title: string;
+    /** Open state lives with the host, so it can persist it. */
+    open: boolean;
+    onToggle: (open: boolean) => void;
+    /**
+     * How many settings in this group differ from their default. Shown as a chip
+     * on the pill so a FOLDED group still admits it holds changes.
+     */
+    count?: number;
+    /** Ties the pill to its body for assistive tech (`aria-controls`). */
+    id?: string;
+    children: ReactNode;
+    className?: string;
+}
+interface SettingsFieldProps {
+    label: string;
+    /** An 18px glyph from `editor-shell/icons` — one meaning, one SVG. */
+    icon?: ReactNode;
+    /** The current value, right-aligned on the label row ("34 px", "style"). */
+    value?: ReactNode;
+    /** One quiet line under the control. Use it instead of a clause-long label. */
+    hint?: ReactNode;
+    /** Marks the row as changed from its default: the label takes the accent. */
+    changed?: boolean;
+    /** Set when the control is a single form element, so the label points at it. */
+    htmlFor?: string;
+    /** A trailing control on the label row — a reset dot, a badge. */
+    action?: ReactNode;
+    /** The control itself. */
+    children: ReactNode;
+    className?: string;
+}
+
+/**
+ * The tab strip under the panel head.
+ *
+ * It replaces the old stack of fold headers a merchant had to open and hunt
+ * through: the buckets a section actually has become tabs, in one fixed order,
+ * so the panel keeps the same shape on every section. A section shows only the
+ * tabs it has — pass three items and three tabs render.
+ *
+ * Controlled: the host decides `activeId`. No hooks, no browser globals.
+ */
+declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, className, }: SettingsTabsProps): react.JSX.Element;
+
+/**
+ * A group of settings under a soft pill row that folds with − / +.
+ *
+ * The sign is drawn by `panel.css` from `aria-expanded`, so the open state has
+ * exactly one home (the attribute assistive tech already reads) instead of a
+ * second copy in the markup.
+ *
+ * `count` is the reason a fold here is safe: a folded group that holds changes
+ * still says so on its pill, so nothing a merchant changed can hide.
+ */
+declare function SettingsGroup({ title, open, onToggle, count, id, children, className, }: SettingsGroupProps): react.JSX.Element;
+
+/**
+ * One setting: a label row, then its control.
+ *
+ * The row is stacked rather than side-by-side so the control gets the panel's
+ * full width — a 308px panel cannot afford a label column AND a usable slider.
+ * The label reads small and quiet; the VALUE sits at the end of the same line in
+ * the text colour, which is what a merchant scans for. That contrast is the
+ * point: before this, label and value looked alike and the panel read as noise.
+ *
+ * `hint` is where a clause-long explanation goes. A label is a name, never a
+ * sentence.
+ */
+declare function SettingsField({ label, icon, value, hint, changed, htmlFor, action, children, className, }: SettingsFieldProps): react.JSX.Element;
+
+export { SettingsField, type SettingsFieldProps, SettingsGroup, type SettingsGroupProps, type SettingsTabItem, SettingsTabs, type SettingsTabsProps };

package/dist/panel/index.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/panel/SettingsTabs.tsx
+function SettingsTabs({
+  items,
+  activeId,
+  onSelect,
+  ariaLabel = "Settings",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      "aria-orientation": "horizontal",
+      className: className ? `es-tabs ${className}` : "es-tabs",
+      children: items.map((item) => {
+        const active = item.id === activeId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            className: active ? "es-tab is-active" : "es-tab",
+            onClick: () => onSelect(item.id),
+            children: [
+              item.label,
+              typeof item.badge === "number" && item.badge > 0 ? /* @__PURE__ */ jsx("span", { className: "es-tab-badge", children: item.badge }) : null
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+function SettingsGroup({
+  title,
+  open,
+  onToggle,
+  count,
+  id,
+  children,
+  className
+}) {
+  const bodyId = id ? `${id}-body` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: className ? `es-group ${className}` : "es-group", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        className: "es-group-head",
+        onClick: () => onToggle(!open),
+        children: [
+          title,
+          typeof count === "number" && count > 0 ? /* @__PURE__ */ jsx("span", { className: "es-group-count", children: count }) : null,
+          /* @__PURE__ */ jsx("span", { className: "es-group-sign", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: bodyId, className: "es-group-body", hidden: !open, children })
+  ] });
+}
+function SettingsField({
+  label,
+  icon,
+  value,
+  hint,
+  changed,
+  htmlFor,
+  action,
+  children,
+  className
+}) {
+  const classes = ["es-field"];
+  if (changed) classes.push("is-changed");
+  if (className) classes.push(className);
+  const labelBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "es-field-icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "es-field-label", children: label })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: classes.join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "es-field-head", children: [
+      htmlFor ? /* @__PURE__ */ jsx("label", { className: "es-field-name", htmlFor, children: labelBody }) : /* @__PURE__ */ jsx("span", { className: "es-field-name", children: labelBody }),
+      value !== void 0 && value !== null ? /* @__PURE__ */ jsx("span", { className: "es-field-value", children: value }) : null,
+      action
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "es-field-ctl", children }),
+    hint ? /* @__PURE__ */ jsx("p", { className: "es-field-hint", children: hint }) : null
+  ] });
+}
+
+export { SettingsField, SettingsGroup, SettingsTabs };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/panel/SettingsTabs.tsx","../../src/panel/SettingsGroup.tsx","../../src/panel/SettingsField.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import type { SettingsTabsProps } from './types';\n\n/**\n * The tab strip under the panel head.\n *\n * It replaces the old stack of fold headers a merchant had to open and hunt\n * through: the buckets a section actually has become tabs, in one fixed order,\n * so the panel keeps the same shape on every section. A section shows only the\n * tabs it has — pass three items and three tabs render.\n *\n * Controlled: the host decides `activeId`. No hooks, no browser globals.\n */\nexport function SettingsTabs({\n  items,\n  activeId,\n  onSelect,\n  ariaLabel = 'Settings',\n  className,\n}: SettingsTabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      aria-orientation=\"horizontal\"\n      className={className ? `es-tabs ${className}` : 'es-tabs'}\n    >\n      {items.map((item) => {\n        const active = item.id === activeId;\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={active}\n            className={active ? 'es-tab is-active' : 'es-tab'}\n            onClick={() => onSelect(item.id)}\n          >\n            {item.label}\n            {typeof item.badge === 'number' && item.badge > 0 ? (\n              <span className=\"es-tab-badge\">{item.badge}</span>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n","import type { SettingsGroupProps } from './types';\n\n/**\n * A group of settings under a soft pill row that folds with − / +.\n *\n * The sign is drawn by `panel.css` from `aria-expanded`, so the open state has\n * exactly one home (the attribute assistive tech already reads) instead of a\n * second copy in the markup.\n *\n * `count` is the reason a fold here is safe: a folded group that holds changes\n * still says so on its pill, so nothing a merchant changed can hide.\n */\nexport function SettingsGroup({\n  title,\n  open,\n  onToggle,\n  count,\n  id,\n  children,\n  className,\n}: SettingsGroupProps) {\n  const bodyId = id ? `${id}-body` : undefined;\n  return (\n    <div className={className ? `es-group ${className}` : 'es-group'}>\n      <button\n        type=\"button\"\n        id={id}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"es-group-head\"\n        onClick={() => onToggle(!open)}\n      >\n        {title}\n        {typeof count === 'number' && count > 0 ? (\n          <span className=\"es-group-count\">{count}</span>\n        ) : null}\n        <span className=\"es-group-sign\" aria-hidden=\"true\" />\n      </button>\n      <div id={bodyId} className=\"es-group-body\" hidden={!open}>\n        {children}\n      </div>\n    </div>\n  );\n}\n","import type { SettingsFieldProps } from './types';\n\n/**\n * One setting: a label row, then its control.\n *\n * The row is stacked rather than side-by-side so the control gets the panel's\n * full width — a 308px panel cannot afford a label column AND a usable slider.\n * The label reads small and quiet; the VALUE sits at the end of the same line in\n * the text colour, which is what a merchant scans for. That contrast is the\n * point: before this, label and value looked alike and the panel read as noise.\n *\n * `hint` is where a clause-long explanation goes. A label is a name, never a\n * sentence.\n */\nexport function SettingsField({\n  label,\n  icon,\n  value,\n  hint,\n  changed,\n  htmlFor,\n  action,\n  children,\n  className,\n}: SettingsFieldProps) {\n  const classes = ['es-field'];\n  if (changed) classes.push('is-changed');\n  if (className) classes.push(className);\n\n  const labelBody = (\n    <>\n      {icon ? (\n        <span className=\"es-field-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"es-field-label\">{label}</span>\n    </>\n  );\n\n  return (\n    <div className={classes.join(' ')}>\n      <div className=\"es-field-head\">\n        {htmlFor ? (\n          <label className=\"es-field-name\" htmlFor={htmlFor}>\n            {labelBody}\n          </label>\n        ) : (\n          <span className=\"es-field-name\">{labelBody}</span>\n        )}\n        {value !== undefined && value !== null ? (\n          <span className=\"es-field-value\">{value}</span>\n        ) : null}\n        {action}\n      </div>\n      <div className=\"es-field-ctl\">{children}</div>\n      {hint ? <p className=\"es-field-hint\">{hint}</p> : null}\n    </div>\n  );\n}\n"]}

package/dist/panel/panel.css

@@ -0,0 +1,188 @@
+/**
+ * editor-shell/panel.css — the settings-panel grammar.
+ *
+ * Values come from the shell token layer (`editor-shell/shell.css`), never from
+ * literals: this file is the storefront editor's approved panel design expressed
+ * once, so both editors read the same rules. Light only — neither editor has a
+ * dark mode.
+ *
+ * Two details are deliberate and were decided by measurement, not taste:
+ *   · rows sit 20px apart while a label sits 7px from its own control, so a
+ *     setting reads as ONE thing with air around it;
+ *   · the label is small and grey, the value is larger and dark. Before that
+ *     contrast existed, a merchant could not tell a name from a number.
+ */
+
+/* ── the tab strip ─────────────────────────────────────────────────────────── */
+
+.es-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--es-divider);
+  background: var(--es-panel);
+  flex: none;
+}
+
+.es-tab {
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--es-muted);
+  padding: 9px 10px 8px;
+  cursor: pointer;
+  /* The active rule sits ON the strip's own border, not under it. */
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: color 0.12s;
+}
+
+.es-tab:hover { color: var(--es-text); }
+
+.es-tab.is-active {
+  color: var(--es-accent-text);
+  border-bottom-color: var(--es-accent);
+}
+
+.es-tab-badge {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── a group: the soft pill row that folds ─────────────────────────────────── */
+
+.es-group + .es-group { margin-top: 6px; }
+
+.es-group-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--es-text);
+  background: var(--es-hover);
+  border-radius: var(--es-row-radius);
+  padding: 8px 11px;
+  margin: 20px 0 0;
+  transition: background 0.12s;
+}
+
+.es-group-head:hover { background: var(--es-chip-bg); }
+
+.es-group-count {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The sign is drawn from aria-expanded so the open state has ONE home. */
+.es-group-sign {
+  margin-left: auto;
+  width: 16px;
+  text-align: center;
+  color: var(--es-muted);
+  font-size: 14px;
+  line-height: 1;
+  flex: none;
+}
+
+.es-group-head[aria-expanded='true'] .es-group-sign::before { content: '−'; }
+.es-group-head[aria-expanded='false'] .es-group-sign::before { content: '+'; }
+
+/* `hidden` on the body is the fold; this only stops a flex/grid parent from
+   overriding the attribute's own display:none. */
+.es-group-body[hidden] { display: none; }
+.es-group-body > .es-field:first-child { margin-top: 14px; }
+
+/* ── one setting ───────────────────────────────────────────────────────────── */
+
+.es-field { margin-top: 20px; }
+
+.es-field-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 7px;
+  min-height: 16px;
+}
+
+.es-field-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.es-field-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  color: var(--es-icon);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.es-field-icon svg { width: 16px; height: 16px; }
+
+.es-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--es-muted);
+}
+
+.es-field.is-changed .es-field-label { color: var(--es-accent-text); }
+
+.es-field-value {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--es-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.es-field-ctl {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.es-field-hint {
+  margin: 7px 0 0;
+  padding-left: 24px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--es-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .es-tab,
+  .es-group-head { transition: none; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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",
@@ -22,25 +22,36 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./rail": {
       "types": "./dist/rail/index.d.ts",
-      "import": "./dist/rail/index.js"
+      "import": "./dist/rail/index.js",
+      "default": "./dist/rail/index.js"
     },
     "./icons": {
       "types": "./dist/icons/index.d.ts",
-      "import": "./dist/icons/index.js"
+      "import": "./dist/icons/index.js",
+      "default": "./dist/icons/index.js"
     },
+    "./panel": {
+      "types": "./dist/panel/index.d.ts",
+      "import": "./dist/panel/index.js",
+      "default": "./dist/panel/index.js"
+    },
+    "./panel.css": "./dist/panel/panel.css",
     "./rail.css": "./dist/rail/rail.css",
     "./shell": {
       "types": "./dist/shell/index.d.ts",
-      "import": "./dist/shell/index.js"
+      "import": "./dist/shell/index.js",
+      "default": "./dist/shell/index.js"
     },
     "./shell.css": "./dist/shell/shell.css",
     "./gold": {
       "types": "./dist/gold/index.d.ts",
-      "import": "./dist/gold/index.js"
+      "import": "./dist/gold/index.js",
+      "default": "./dist/gold/index.js"
     },
     "./gold.css": "./dist/gold/gold.css"
   },
@@ -72,10 +83,11 @@
     "typescript": "^5.3.0"
   },
   "scripts": {
-    "build": "tsup && cp src/rail/rail.css dist/rail/rail.css && cp src/shell/shell.css dist/shell/shell.css && cp src/gold/gold.css dist/gold/gold.css",
+    "build": "tsup && cp src/rail/rail.css dist/rail/rail.css && cp src/shell/shell.css dist/shell/shell.css && cp src/gold/gold.css dist/gold/gold.css && cp src/panel/panel.css dist/panel/panel.css",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json",
     "test": "node scripts/test.mjs",
+    "verify:exports": "node scripts/verify-exports-resolve.mjs",
     "clean": "rm -rf dist"
   },
   "keywords": [