editor-shell 0.6.0 → 0.8.0

package/dist/panel/index.d.ts

@@ -11,9 +11,26 @@ import { ReactNode } from 'react';
  */
 /** One tab in the strip. `badge` shows a count (e.g. unsaved overrides). */
 interface SettingsTabItem {
+    /** What this tab IS, as `activeId` and `onSelect` name it. Not a DOM id. */
     id: string;
     label: string;
     badge?: number;
+    /**
+     * The DOM id of the element that shows this tab's settings — `aria-controls`.
+     *
+     * Without it a tab is announced as "tab, 1 of 4, selected" and there is no
+     * panel it is bound to, which is what `role="tab"` promises there will be.
+     * The shell cannot supply the id itself: only the host knows what element the
+     * settings land in, and in Puck's flat sibling list that element may be one
+     * the shell never rendered. Optional because a host that has no such element
+     * to point at should render NO attribute rather than one pointing nowhere.
+     */
+    panelId?: string;
+    /**
+     * A DOM id for the tab BUTTON, so the panel above can name itself with
+     * `aria-labelledby` and the pair is wired in both directions.
+     */
+    htmlId?: string;
 }
 interface SettingsTabsProps {
     items: SettingsTabItem[];
@@ -39,6 +56,26 @@ interface SettingsGroupProps {
     children: ReactNode;
     className?: string;
 }
+/**
+ * A group heading with nothing folded under it — see `SettingsGroupHead`.
+ *
+ * Deliberately NOT `SettingsGroupProps` minus a few fields: a heading has no
+ * open state to own, nothing to toggle, and no count, because a heading hides
+ * nothing that a count would have to admit to.
+ */
+interface SettingsGroupHeadProps {
+    /** The heading's name — "Items", "Spacing", "Typeface". */
+    title: string;
+    /**
+     * Which heading level this is in the HOST's outline. Defaults to 3, the level
+     * a panel section sits at under a panel title; only the host knows what sits
+     * above it.
+     */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /** A DOM id, so the rows it heads can point `aria-labelledby` at it. */
+    id?: string;
+    className?: string;
+}
 interface SettingsFieldProps {
     label: string;
     /**
@@ -120,6 +157,15 @@ type SettingsSwitchProps = SettingsSwitchBaseProps & SettingsSwitchLabel;
  * tabs it has — pass three items and three tabs render.
  *
  * Controlled: the host decides `activeId`. No hooks, no browser globals.
+ *
+ * A tab can be WIRED to what it shows (`panelId` / `htmlId` on the item). That
+ * is not decoration: `role="tab"` promises a panel, and a tab strip that names
+ * none announces "tab, 1 of 4, selected" over nothing. The shell cannot supply
+ * those ids — only the host knows the element the settings land in — but until
+ * card 8802.d it could not ACCEPT them either, so no host could fix it. A tab
+ * with nothing to point at renders no attribute at all; an empty
+ * `aria-controls` is worse than a missing one, because it names an element
+ * that does not exist instead of admitting there is none.
  */
 declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, className, }: SettingsTabsProps): react.JSX.Element;
 
@@ -135,6 +181,37 @@ declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, className,
  */
 declare function SettingsGroup({ title, open, onToggle, count, id, children, className, }: SettingsGroupProps): react.JSX.Element;
 
+/**
+ * A group heading with NO group under it — the pill on its own.
+ *
+ * It exists because Puck lays the inspector out as a FLAT sibling list: a field
+ * renders next to the heading above it, never inside it, so nothing here can
+ * wrap the rows that follow. Heading a run of settings is therefore a job for a
+ * component that heads and nothing else.
+ *
+ * `SettingsGroup` cannot do that job. It always renders its body div, and its
+ * pill is always a <button> carrying `aria-expanded`, `aria-controls` and the
+ * − / + sign. Used header-only it would draw a control that claims to expand
+ * something, does nothing when clicked, and tells a screen reader the same lie.
+ * A component that folds and a component that titles are two different things,
+ * and this is the one that titles.
+ *
+ * So it is a HEADING, not a control: a real <h3> (the level is the host's, since
+ * only the host knows the page outline around it) with no role bolted on, no
+ * expanded state, no sign, no body. In a flat list the heading list is the only
+ * structure a screen reader has left to navigate by, which is the whole reason
+ * this renders a heading element rather than a styled <div>.
+ *
+ * It wears `.es-group-head` — the same pill as a real group's — so a section
+ * that folds and a section that does not read as the same panel. `panel.css`
+ * scopes the cursor and the hover tint to `button.es-group-head`, so the
+ * heading does not offer a press it cannot honour.
+ *
+ * NO `count`. A folded group needs one because a fold can hide a change; a
+ * heading folds nothing, so nothing can hide behind it.
+ */
+declare function SettingsGroupHead({ title, level, id, className, }: SettingsGroupHeadProps): react.JSX.Element;
+
 /**
  * One setting: a label row, then its control.
  *
@@ -192,4 +269,4 @@ declare function SettingsField({ label, labelId, icon, value, hint, changed, htm
  */
 declare function SettingsSwitch({ checked, onChange, disabled, id, ariaLabel, ariaLabelledBy, className, }: SettingsSwitchProps): react.JSX.Element;
 
-export { SettingsField, type SettingsFieldProps, SettingsGroup, type SettingsGroupProps, SettingsSwitch, type SettingsSwitchBaseProps, type SettingsSwitchLabel, type SettingsSwitchProps, type SettingsTabItem, SettingsTabs, type SettingsTabsProps };
+export { SettingsField, type SettingsFieldProps, SettingsGroup, SettingsGroupHead, type SettingsGroupHeadProps, type SettingsGroupProps, SettingsSwitch, type SettingsSwitchBaseProps, type SettingsSwitchLabel, type SettingsSwitchProps, type SettingsTabItem, SettingsTabs, type SettingsTabsProps };

package/dist/panel/index.js

@@ -23,7 +23,9 @@ function SettingsTabs({
           {
             type: "button",
             role: "tab",
+            id: item.htmlId,
             "aria-selected": active,
+            "aria-controls": item.panelId,
             className: active ? "es-tab is-active" : "es-tab",
             onClick: () => onSelect(item.id),
             children: [
@@ -67,6 +69,15 @@ function SettingsGroup({
     /* @__PURE__ */ jsx("div", { id: bodyId, className: "es-group-body", hidden: !open, children })
   ] });
 }
+function SettingsGroupHead({
+  title,
+  level = 3,
+  id,
+  className
+}) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(Tag, { id, className: className ? `es-group-head ${className}` : "es-group-head", children: title });
+}
 function SettingsSwitch({
   checked,
   onChange,
@@ -138,6 +149,6 @@ function SettingsField({
   ] });
 }
 
-export { SettingsField, SettingsGroup, SettingsSwitch, SettingsTabs };
+export { SettingsField, SettingsGroup, SettingsGroupHead, SettingsSwitch, SettingsTabs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/panel/SettingsTabs.tsx","../../src/panel/SettingsGroup.tsx","../../src/panel/SettingsSwitch.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 { SettingsSwitchProps } from './types';\n\n/**\n * The yes-or-no control — ONE shape, both editors (card 8801).\n *\n * Point 5 of the approved settings design says one switch style everywhere.\n * Before this, the storefront editor drew a tick box and the campaign designer\n * drew a green switch, so a merchant met two shapes for the same question and\n * had to learn the control twice. Both now import this file, which is the only\n * thing that stops them drifting apart again.\n *\n * It is a real <button>, and that is the whole keyboard story: a button is\n * activated by Space and by Enter in every browser, and that activation IS a\n * click — so the one `onClick` below serves mouse and keyboard alike. A div\n * wearing `role=\"switch\"` would need a key handler of our own. Do not add one.\n * `type=\"button\"` keeps it from submitting a form it happens to sit in.\n *\n * It cannot exist without a NAME. `SettingsSwitchProps` demands `ariaLabel` or\n * `ariaLabelledBy` and forbids both at once, so an unnamed switch — which a\n * screen reader reads out as \"switch, on\" and nothing more — is a compile error\n * instead of something a docstring asks you to remember.\n *\n * ONE-WAY DEPENDENCY. `SettingsField` imports this module so it can recognise a\n * switch in its `action` slot and hand it the field's label as a name. This\n * module must NEVER import `SettingsField` back — that would close a cycle\n * between two siblings in the same folder. It imports `./types` and nothing\n * else, and `tests/settings-switch.test.tsx` (o) keeps it that way.\n *\n * CONTROLLED and hook-free like the other three: `checked` comes from the host\n * and the switch only ever ASKS to be flipped. That is what keeps this module a\n * directive-free leaf a Next-16 server component can import.\n */\nexport function SettingsSwitch({\n  checked,\n  onChange,\n  disabled,\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  className,\n}: SettingsSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      disabled={disabled}\n      className={className ? `es-switch ${className}` : 'es-switch'}\n      onClick={() => onChange(!checked)}\n    />\n  );\n}\n","import { cloneElement, isValidElement } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { SettingsSwitch } from './SettingsSwitch';\nimport type { SettingsFieldProps } from './types';\n\n/**\n * Does this slot hold a control?\n *\n * The rule is ELEMENT-OR-NOTHING, deliberately not a list of falsy values: a\n * list rots, and the next odd value nobody thought of walks straight through.\n * `{flag && <Slider/>}` yields `false`, `{count && <Slider/>}` yields `0` when\n * the count is zero — and React RENDERS that zero, a stray 0 sitting in the\n * panel where a control belongs. A bare string or number in a control slot is a\n * caller mistake in every case any of us can name.\n *\n * Arrays are walked rather than trusted: `Array.isArray([])` is true, so an\n * empty array — or one holding only `false` and `null`, which is what a list of\n * conditional controls collapses to — would otherwise draw the empty row this\n * check exists to prevent.\n */\nfunction hasControlIn(slot: ReactNode): boolean {\n  if (Array.isArray(slot)) return slot.some(hasControlIn);\n  return isValidElement(slot);\n}\n\n/** What a switch is named by. Read off an unknown element, so it stays loose. */\ninterface SwitchName {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n}\n\n/**\n * Give a switch in the `action` slot the field's own label as its name.\n *\n * A switch carries no text, and `htmlFor` cannot bridge a <label> to a\n * <button>, so in a boolean row nothing connects the visible label to the\n * control unless something does it explicitly. Doing it HERE means the common\n * case is right with the caller saying nothing: the accessible name and the\n * visible name are the same string and cannot drift apart.\n *\n * It only ever fills a gap. A switch that names itself keeps its own name, and\n * anything that is not a switch — a reset dot, a badge — is left alone, since\n * labelling those with the field's name would be worse than not labelling them.\n */\nfunction nameSwitch(action: ReactNode, label: string, labelId?: string): ReactNode {\n  if (!isValidElement(action) || action.type !== SettingsSwitch) return action;\n\n  const named = action.props as SwitchName;\n  if (named.ariaLabel || named.ariaLabelledBy) return action;\n\n  return cloneElement(\n    action as ReactElement<SwitchName>,\n    labelId ? { ariaLabelledBy: labelId } : { ariaLabel: label },\n  );\n}\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 *\n * A BOOLEAN row is the one exception to \"control on its own line\" (card 8801,\n * Option A, approved). A switch is small and it is the whole control, so it\n * rides the label line in the `action` slot and the row costs one line instead\n * of two — which is what lets a 308px panel show four settings where it used to\n * show three. That is the only reason `children` is optional: a field with no\n * children draws no control row, and its label line IS the row.\n *\n * A field with no children AND no action has no control on either slot. That is\n * a mistake at the call site, so it renders NOTHING — an empty row would hide\n * the mistake behind 20px of blank panel.\n */\nexport function SettingsField({\n  label,\n  labelId,\n  icon,\n  value,\n  hint,\n  changed,\n  htmlFor,\n  action,\n  children,\n  className,\n}: SettingsFieldProps) {\n  const hasControl = hasControlIn(children);\n  const hasAction = hasControlIn(action);\n  if (!hasControl && !hasAction) return null;\n\n  const classes = ['es-field'];\n  if (!hasControl) classes.push('is-inline');\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\" id={labelId}>\n        {label}\n      </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        {hasAction ? nameSwitch(action, label, labelId) : null}\n      </div>\n      {hasControl ? <div className=\"es-field-ctl\">{children}</div> : null}\n      {hint ? <p className=\"es-field-hint\">{hint}</p> : null}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/panel/SettingsTabs.tsx","../../src/panel/SettingsGroup.tsx","../../src/panel/SettingsGroupHead.tsx","../../src/panel/SettingsSwitch.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 *\n * A tab can be WIRED to what it shows (`panelId` / `htmlId` on the item). That\n * is not decoration: `role=\"tab\"` promises a panel, and a tab strip that names\n * none announces \"tab, 1 of 4, selected\" over nothing. The shell cannot supply\n * those ids — only the host knows the element the settings land in — but until\n * card 8802.d it could not ACCEPT them either, so no host could fix it. A tab\n * with nothing to point at renders no attribute at all; an empty\n * `aria-controls` is worse than a missing one, because it names an element\n * that does not exist instead of admitting there is none.\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            id={item.htmlId}\n            aria-selected={active}\n            aria-controls={item.panelId}\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 { SettingsGroupHeadProps } from './types';\n\n/**\n * A group heading with NO group under it — the pill on its own.\n *\n * It exists because Puck lays the inspector out as a FLAT sibling list: a field\n * renders next to the heading above it, never inside it, so nothing here can\n * wrap the rows that follow. Heading a run of settings is therefore a job for a\n * component that heads and nothing else.\n *\n * `SettingsGroup` cannot do that job. It always renders its body div, and its\n * pill is always a <button> carrying `aria-expanded`, `aria-controls` and the\n * − / + sign. Used header-only it would draw a control that claims to expand\n * something, does nothing when clicked, and tells a screen reader the same lie.\n * A component that folds and a component that titles are two different things,\n * and this is the one that titles.\n *\n * So it is a HEADING, not a control: a real <h3> (the level is the host's, since\n * only the host knows the page outline around it) with no role bolted on, no\n * expanded state, no sign, no body. In a flat list the heading list is the only\n * structure a screen reader has left to navigate by, which is the whole reason\n * this renders a heading element rather than a styled <div>.\n *\n * It wears `.es-group-head` — the same pill as a real group's — so a section\n * that folds and a section that does not read as the same panel. `panel.css`\n * scopes the cursor and the hover tint to `button.es-group-head`, so the\n * heading does not offer a press it cannot honour.\n *\n * NO `count`. A folded group needs one because a fold can hide a change; a\n * heading folds nothing, so nothing can hide behind it.\n */\nexport function SettingsGroupHead({\n  title,\n  level = 3,\n  id,\n  className,\n}: SettingsGroupHeadProps) {\n  const Tag = `h${level}` as const;\n  return (\n    <Tag id={id} className={className ? `es-group-head ${className}` : 'es-group-head'}>\n      {title}\n    </Tag>\n  );\n}\n","import type { SettingsSwitchProps } from './types';\n\n/**\n * The yes-or-no control — ONE shape, both editors (card 8801).\n *\n * Point 5 of the approved settings design says one switch style everywhere.\n * Before this, the storefront editor drew a tick box and the campaign designer\n * drew a green switch, so a merchant met two shapes for the same question and\n * had to learn the control twice. Both now import this file, which is the only\n * thing that stops them drifting apart again.\n *\n * It is a real <button>, and that is the whole keyboard story: a button is\n * activated by Space and by Enter in every browser, and that activation IS a\n * click — so the one `onClick` below serves mouse and keyboard alike. A div\n * wearing `role=\"switch\"` would need a key handler of our own. Do not add one.\n * `type=\"button\"` keeps it from submitting a form it happens to sit in.\n *\n * It cannot exist without a NAME. `SettingsSwitchProps` demands `ariaLabel` or\n * `ariaLabelledBy` and forbids both at once, so an unnamed switch — which a\n * screen reader reads out as \"switch, on\" and nothing more — is a compile error\n * instead of something a docstring asks you to remember.\n *\n * ONE-WAY DEPENDENCY. `SettingsField` imports this module so it can recognise a\n * switch in its `action` slot and hand it the field's label as a name. This\n * module must NEVER import `SettingsField` back — that would close a cycle\n * between two siblings in the same folder. It imports `./types` and nothing\n * else, and `tests/settings-switch.test.tsx` (o) keeps it that way.\n *\n * CONTROLLED and hook-free like the other three: `checked` comes from the host\n * and the switch only ever ASKS to be flipped. That is what keeps this module a\n * directive-free leaf a Next-16 server component can import.\n */\nexport function SettingsSwitch({\n  checked,\n  onChange,\n  disabled,\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  className,\n}: SettingsSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      disabled={disabled}\n      className={className ? `es-switch ${className}` : 'es-switch'}\n      onClick={() => onChange(!checked)}\n    />\n  );\n}\n","import { cloneElement, isValidElement } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { SettingsSwitch } from './SettingsSwitch';\nimport type { SettingsFieldProps } from './types';\n\n/**\n * Does this slot hold a control?\n *\n * The rule is ELEMENT-OR-NOTHING, deliberately not a list of falsy values: a\n * list rots, and the next odd value nobody thought of walks straight through.\n * `{flag && <Slider/>}` yields `false`, `{count && <Slider/>}` yields `0` when\n * the count is zero — and React RENDERS that zero, a stray 0 sitting in the\n * panel where a control belongs. A bare string or number in a control slot is a\n * caller mistake in every case any of us can name.\n *\n * Arrays are walked rather than trusted: `Array.isArray([])` is true, so an\n * empty array — or one holding only `false` and `null`, which is what a list of\n * conditional controls collapses to — would otherwise draw the empty row this\n * check exists to prevent.\n */\nfunction hasControlIn(slot: ReactNode): boolean {\n  if (Array.isArray(slot)) return slot.some(hasControlIn);\n  return isValidElement(slot);\n}\n\n/** What a switch is named by. Read off an unknown element, so it stays loose. */\ninterface SwitchName {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n}\n\n/**\n * Give a switch in the `action` slot the field's own label as its name.\n *\n * A switch carries no text, and `htmlFor` cannot bridge a <label> to a\n * <button>, so in a boolean row nothing connects the visible label to the\n * control unless something does it explicitly. Doing it HERE means the common\n * case is right with the caller saying nothing: the accessible name and the\n * visible name are the same string and cannot drift apart.\n *\n * It only ever fills a gap. A switch that names itself keeps its own name, and\n * anything that is not a switch — a reset dot, a badge — is left alone, since\n * labelling those with the field's name would be worse than not labelling them.\n */\nfunction nameSwitch(action: ReactNode, label: string, labelId?: string): ReactNode {\n  if (!isValidElement(action) || action.type !== SettingsSwitch) return action;\n\n  const named = action.props as SwitchName;\n  if (named.ariaLabel || named.ariaLabelledBy) return action;\n\n  return cloneElement(\n    action as ReactElement<SwitchName>,\n    labelId ? { ariaLabelledBy: labelId } : { ariaLabel: label },\n  );\n}\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 *\n * A BOOLEAN row is the one exception to \"control on its own line\" (card 8801,\n * Option A, approved). A switch is small and it is the whole control, so it\n * rides the label line in the `action` slot and the row costs one line instead\n * of two — which is what lets a 308px panel show four settings where it used to\n * show three. That is the only reason `children` is optional: a field with no\n * children draws no control row, and its label line IS the row.\n *\n * A field with no children AND no action has no control on either slot. That is\n * a mistake at the call site, so it renders NOTHING — an empty row would hide\n * the mistake behind 20px of blank panel.\n */\nexport function SettingsField({\n  label,\n  labelId,\n  icon,\n  value,\n  hint,\n  changed,\n  htmlFor,\n  action,\n  children,\n  className,\n}: SettingsFieldProps) {\n  const hasControl = hasControlIn(children);\n  const hasAction = hasControlIn(action);\n  if (!hasControl && !hasAction) return null;\n\n  const classes = ['es-field'];\n  if (!hasControl) classes.push('is-inline');\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\" id={labelId}>\n        {label}\n      </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        {hasAction ? nameSwitch(action, label, labelId) : null}\n      </div>\n      {hasControl ? <div className=\"es-field-ctl\">{children}</div> : null}\n      {hint ? <p className=\"es-field-hint\">{hint}</p> : null}\n    </div>\n  );\n}\n"]}

package/dist/panel/panel.css

@@ -7,16 +7,33 @@
  * 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;
+ *   · rows sit 28px apart while a label sits 7px from its own control, so a
+ *     setting reads as ONE thing with air around it. The 7px is the ONLY thing
+ *     saying which label owns which control — widening the rows widened the
+ *     air BETWEEN settings and left that gap exactly where it was (card
+ *     8802.d, approved from mockups/8802e-settings-spacing-mockup.html);
  *   · 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 ─────────────────────────────────────────────────────────── */
 
+/* The strip WRAPS. Four tabs need 267px and the panel drags down to 220px, so
+   on a narrow panel the last bucket used to sit past the edge and could not be
+   reached at all — by dragging a handle the editor itself offers.
+
+   Wrap and not scroll, on the merits: a wrapped strip hides NOTHING, at any
+   width, in any language and at any tab count, where a scrolling strip always
+   leaves something out of sight with no sign that it is there. Replacing "a
+   bucket you cannot reach" with "a bucket you cannot see" is not a fix. The
+   cost is a strip that is two rows tall when it has to be, and that cost is
+   visible and explains itself: the merchant just made the panel narrower.
+
+   The row gap comes free from `gap`, and it is what keeps the active tab's
+   −1px overhang (below) off the row underneath it. */
 .es-tabs {
   display: flex;
+  flex-wrap: wrap;
   gap: 2px;
   padding: 0 14px;
   border-bottom: 1px solid var(--es-divider);
@@ -27,6 +44,11 @@
 .es-tab {
   border: 0;
   background: transparent;
+  /* Wrapping only helps if a tab keeps the width its label needs. A flex item
+     shrinks by default, and a shrunk tab breaks its label over two lines or
+     clips it — a bucket out of reach in a different way. */
+  flex: none;
+  white-space: nowrap;
   font: inherit;
   font-size: 12px;
   font-weight: 600;
@@ -67,13 +89,23 @@
 
 .es-group + .es-group { margin-top: 6px; }
 
+/* ONE pill, two elements. `SettingsGroup` renders a <button> that folds;
+   `SettingsGroupHead` renders a heading that folds nothing, because Puck's
+   inspector is a flat sibling list and a heading there cannot wrap the rows it
+   heads. Everything a merchant SEES is shared here; the press — the pointer
+   and the hover tint — is scoped to the button below, so the heading never
+   offers a press it cannot honour.
+
+   `box-sizing` for the same reason the switch sets it: this file assumes no
+   reset of the host's, and `width: 100%` plus 22px of padding would otherwise
+   run the pill past the panel. */
 .es-group-head {
+  box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
   border: 0;
-  cursor: pointer;
   text-align: left;
   font: inherit;
   font-size: 12px;
@@ -82,11 +114,17 @@
   background: var(--es-hover);
   border-radius: var(--es-row-radius);
   padding: 8px 11px;
-  margin: 20px 0 0;
+  /* A heading needs more air above it than the settings it heads have between
+     them (28px), or it reads as one more row. */
+  margin: 36px 0 0;
+}
+
+button.es-group-head {
+  cursor: pointer;
   transition: background 0.12s;
 }
 
-.es-group-head:hover { background: var(--es-chip-bg); }
+button.es-group-head:hover { background: var(--es-chip-bg); }
 
 .es-group-count {
   min-width: 16px;
@@ -123,7 +161,7 @@
 
 /* ── one setting ───────────────────────────────────────────────────────────── */
 
-.es-field { margin-top: 20px; }
+.es-field { margin-top: 28px; }
 
 .es-field-head {
   display: flex;
@@ -258,7 +296,9 @@
 
 @media (prefers-reduced-motion: reduce) {
   .es-tab,
-  .es-group-head,
+  /* `button.` and not `.es-group-head`: the transition it cancels is declared
+     on `button.es-group-head`, and a plainer selector would lose to it. */
+  button.es-group-head,
   .es-switch,
   .es-switch::after { transition: none; }
 }

package/dist/rail/index.js

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

package/dist/shell/index.d.ts

@@ -3,11 +3,13 @@
  *
  * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the
  * editor chrome theme: accent, surfaces, fields, text, lines, chips, named
- * chrome literals, danger/warning, radii, gap, shadows and font. Every value is
- * taken verbatim from the storefront editor's `--sf-*` block
+ * chrome literals, danger/warning/success, radii, gap, shadows and font. Every
+ * value bar one is taken verbatim from the storefront editor's `--sf-*` block
  * (`efficient-shop/components/storefront-editor.css`), the visual reference the
  * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had
  * each re-copied. After card 66024 they all resolve to these values instead.
+ * The one exception is `success`, which that block has no counterpart for; see
+ * its own note below.
  *
  * Exposed BOTH ways, per the same value (mirrors the rail):
  *   - `shellTokens` — this JS object, for code that needs the numbers/colours
@@ -110,6 +112,17 @@ declare const shellTokens: {
     readonly warning: "#b45309";
     /** `--es-preview-tint` — amber-100 "Preview" pill. */
     readonly previewTint: "#fef3c7";
+    /**
+     * `--es-success` — green-700. THE ONE VALUE HERE WITH NO `--sf-*` BEHIND IT:
+     * the storefront editor's block has a red and an amber and no green, and card
+     * 8802.g needs one for a green tick. So it is picked to sit with the block
+     * rather than invented next to it — the same Tailwind ramp every other colour
+     * in this file comes from, at the 700 step `--es-warning` already sits on.
+     * 700 and not 600 for the reason amber went there: it is the darkest step
+     * still plainly the hue, and it clears WCAG AA (5.0:1) on the shell's white
+     * panels, so a tick may carry a label without needing a second token.
+     */
+    readonly success: "#15803d";
     /** `--es-panel-radius`. */
     readonly panelRadius: 12;
     /** `--es-row-radius`. */

package/dist/shell/index.js

@@ -1,3 +1,3 @@
-export { puckAzureRamp, shellCssVars, shellTokens } from '../chunk-N7NW4W3P.js';
+export { puckAzureRamp, shellCssVars, shellTokens } from '../chunk-ML5SEFU4.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/shell/shell.css

@@ -73,12 +73,13 @@
   --es-scrollbar: #d1d5db;
   --es-scrollbar-hover: #9ca3af;
 
-  /* — danger / warning (shell red / amber) — */
+  /* — danger / warning / success (shell red / amber / green) — */
   --es-danger: #dc2626;
   --es-danger-strong: #b91c1c;
   --es-danger-tint: #fef2f2;
   --es-warning: #b45309;
   --es-preview-tint: #fef3c7;
+  --es-success: #15803d;
 
   /* — radii / shape / gap — */
   --es-panel-radius: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.6.0",
+  "version": "0.8.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-N7NW4W3P.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shell/tokens.ts"],"names":[],"mappings":"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","file":"chunk-N7NW4W3P.js","sourcesContent":["/**\n * Editor SHELL design tokens — the ONE source both editors' chrome converge on.\n *\n * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the\n * editor chrome theme: accent, surfaces, fields, text, lines, chips, named\n * chrome literals, danger/warning, radii, gap, shadows and font. Every value is\n * taken verbatim from the storefront editor's `--sf-*` block\n * (`efficient-shop/components/storefront-editor.css`), the visual reference the\n * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had\n * each re-copied. After card 66024 they all resolve to these values instead.\n *\n * Exposed BOTH ways, per the same value (mirrors the rail):\n *   - `shellTokens` — this JS object, for code that needs the numbers/colours\n *     (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);\n *   - `shell.css` — the stylesheet, which declares the identical values as CSS\n *     custom properties on `.es-editor` (names listed in `shellCssVars`).\n *\n * Numeric fields are pixel magnitudes (unitless) so they compose in code; the\n * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so\n * there is a single palette here — no dark counterpart.\n */\nexport const shellTokens = {\n  // ── Accent (react-os-shell blue) ──────────────────────────────────────────\n  /** `--es-accent` — blue-600. */\n  accent: '#2563eb',\n  /** `--es-accent-tint` — blue-50. */\n  accentTint: '#eff6ff',\n  /** `--es-accent-tint-strong` — blue-100. */\n  accentTintStrong: '#dbeafe',\n  /** `--es-accent-text` — blue-700. */\n  accentText: '#1d4ed8',\n  /** `--es-accent-ring` — focus ring wash. */\n  accentRing: 'rgba(37, 99, 235, 0.25)',\n  /** `--es-accent-shadow` — accent button shadow. */\n  accentShadow: 'rgba(37, 99, 235, 0.35)',\n  /** `--es-on-accent` — text/icon over the solid accent. */\n  onAccent: '#ffffff',\n\n  // ── Surfaces (cool gray ramp) ─────────────────────────────────────────────\n  /** `--es-app-bg` — gray-50, sunken canvas. */\n  appBg: '#f9fafb',\n  /** `--es-preview-bg` — gray-100, preview well. */\n  previewBg: '#f3f4f6',\n  /** `--es-panel` — raised cards / panels. */\n  panel: '#ffffff',\n  /** `--es-raised` — active seg / chip. */\n  raised: '#ffffff',\n  /** `--es-topbar-bg`. */\n  topbarBg: '#ffffff',\n  /** `--es-frame-bg` — device \"paper\" behind the preview iframe. */\n  frameBg: '#ffffff',\n  /** `--es-hover` — gray-100 row / icon hover. */\n  hover: '#f3f4f6',\n  /** `--es-hatch` — 45° upload-slot texture. */\n  hatch: 'rgba(0, 0, 0, 0.018)',\n  /** `--es-addcard-veil` — add-section card hover wash. */\n  addcardVeil: 'rgba(248, 249, 250, 0.66)',\n\n  // ── Fields ────────────────────────────────────────────────────────────────\n  /** `--es-field-bg`. */\n  fieldBg: '#ffffff',\n  /** `--es-track-bg` — gray-100 segmented / search track. */\n  trackBg: '#f3f4f6',\n  /** `--es-input-border` — gray-300. */\n  inputBorder: '#d1d5db',\n  /** `--es-field-text` — gray-800. */\n  fieldText: '#1f2937',\n  /** `--es-field-placeholder` — gray-400. */\n  fieldPlaceholder: '#9ca3af',\n  /** `--es-knob` — toggle knob. */\n  knob: '#ffffff',\n\n  // ── Text ────────────────────────────────────────────────────────────────\n  /** `--es-text` — gray-900. */\n  text: '#111827',\n  /** `--es-text-strong` — gray-950 active labels. */\n  textStrong: '#030712',\n  /** `--es-text-secondary` — gray-700. */\n  textSecondary: '#374151',\n  /** `--es-muted` — gray-500. */\n  muted: '#6b7280',\n  /** `--es-icon` — gray-500 icon buttons. */\n  icon: '#6b7280',\n  /** `--es-disabled` — gray-400 disabled / faint glyphs. */\n  disabled: '#9ca3af',\n\n  // ── Lines / chips / buttons ──────────────────────────────────────────────\n  /** `--es-divider` — gray-200. */\n  divider: '#e5e7eb',\n  /** `--es-line` — gray-200 hairlines. */\n  line: '#e5e7eb',\n  /** `--es-btn-border` — gray-300. */\n  btnBorder: '#d1d5db',\n  /** `--es-btn-text` — gray-700. */\n  btnText: '#374151',\n  /** `--es-chip-bg` — gray-100. */\n  chipBg: '#f3f4f6',\n  /** `--es-chip-fg` — gray-500. */\n  chipFg: '#6b7280',\n\n  // ── Named chrome literals ─────────────────────────────────────────────────\n  /** `--es-brand-square` — gray-900 wordmark square. */\n  brandSquare: '#111827',\n  /** `--es-device-border` — gray-200 tablet/mobile frame. */\n  deviceBorder: '#e5e7eb',\n  /** `--es-toast-bg` — gray-900 dark chip / seam pill. */\n  toastBg: '#111827',\n  /** `--es-toggle-off` — gray-300 toggle track. */\n  toggleOff: '#d1d5db',\n  /** `--es-scrollbar` — gray-300. */\n  scrollbar: '#d1d5db',\n  /** `--es-scrollbar-hover` — gray-400. */\n  scrollbarHover: '#9ca3af',\n\n  // ── Danger / warning (shell red / amber) ──────────────────────────────────\n  /** `--es-danger` — red-600. */\n  danger: '#dc2626',\n  /** `--es-danger-strong` — red-700. */\n  dangerStrong: '#b91c1c',\n  /** `--es-danger-tint` — red-50. */\n  dangerTint: '#fef2f2',\n  /** `--es-warning` — amber-700. */\n  warning: '#b45309',\n  /** `--es-preview-tint` — amber-100 \"Preview\" pill. */\n  previewTint: '#fef3c7',\n\n  // ── Radii / shape / gap ───────────────────────────────────────────────────\n  /** `--es-panel-radius`. */\n  panelRadius: 12,\n  /** `--es-row-radius`. */\n  rowRadius: 8,\n  /** `--es-field-radius`. */\n  fieldRadius: 6,\n  /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */\n  panelGap: 10,\n\n  // ── Shadows ───────────────────────────────────────────────────────────────\n  /** `--es-panel-shadow`. */\n  panelShadow: '0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)',\n  /** `--es-topbar-shadow`. */\n  topbarShadow: '0 1px 3px rgba(0, 0, 0, 0.06)',\n\n  // ── Type ──────────────────────────────────────────────────────────────────\n  /** `--es-font` — system sans stack (also fed to `--puck-font-family`). */\n  font: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n} as const;\n\nexport type ShellTokens = typeof shellTokens;\n\n/**\n * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets\n * these on `.es-editor`; override any of them on (or above) the editor root to\n * re-theme without shipping new CSS. The `shell-tokens.test.ts` parity gate\n * proves this map, `shellTokens` and `shell.css` never drift apart.\n */\nexport const shellCssVars: Record<keyof ShellTokens, string> = {\n  accent: '--es-accent',\n  accentTint: '--es-accent-tint',\n  accentTintStrong: '--es-accent-tint-strong',\n  accentText: '--es-accent-text',\n  accentRing: '--es-accent-ring',\n  accentShadow: '--es-accent-shadow',\n  onAccent: '--es-on-accent',\n  appBg: '--es-app-bg',\n  previewBg: '--es-preview-bg',\n  panel: '--es-panel',\n  raised: '--es-raised',\n  topbarBg: '--es-topbar-bg',\n  frameBg: '--es-frame-bg',\n  hover: '--es-hover',\n  hatch: '--es-hatch',\n  addcardVeil: '--es-addcard-veil',\n  fieldBg: '--es-field-bg',\n  trackBg: '--es-track-bg',\n  inputBorder: '--es-input-border',\n  fieldText: '--es-field-text',\n  fieldPlaceholder: '--es-field-placeholder',\n  knob: '--es-knob',\n  text: '--es-text',\n  textStrong: '--es-text-strong',\n  textSecondary: '--es-text-secondary',\n  muted: '--es-muted',\n  icon: '--es-icon',\n  disabled: '--es-disabled',\n  divider: '--es-divider',\n  line: '--es-line',\n  btnBorder: '--es-btn-border',\n  btnText: '--es-btn-text',\n  chipBg: '--es-chip-bg',\n  chipFg: '--es-chip-fg',\n  brandSquare: '--es-brand-square',\n  deviceBorder: '--es-device-border',\n  toastBg: '--es-toast-bg',\n  toggleOff: '--es-toggle-off',\n  scrollbar: '--es-scrollbar',\n  scrollbarHover: '--es-scrollbar-hover',\n  danger: '--es-danger',\n  dangerStrong: '--es-danger-strong',\n  dangerTint: '--es-danger-tint',\n  warning: '--es-warning',\n  previewTint: '--es-preview-tint',\n  panelRadius: '--es-panel-radius',\n  rowRadius: '--es-row-radius',\n  fieldRadius: '--es-field-radius',\n  panelGap: '--es-panel-gap',\n  panelShadow: '--es-panel-shadow',\n  topbarShadow: '--es-topbar-shadow',\n  font: '--es-font',\n};\n\n/**\n * Puck's own accent ramp + font, re-tinted to the shell blue. Puck reads these\n * fixed variable names (`--puck-color-azure-NN`, `--puck-font-family`) directly,\n * so they are NOT part of the `--es-*` set — but they had been copied verbatim\n * into BOTH editors' CSS, so `shell.css` now declares them once on `.es-editor`.\n * Kept here as the JS record so the parity gate can prove `shell.css` matches.\n */\nexport const puckAzureRamp: Record<string, string> = {\n  '--puck-color-azure-01': '#172554',\n  '--puck-color-azure-02': '#1e3a8a',\n  '--puck-color-azure-03': '#1d4ed8',\n  '--puck-color-azure-04': '#2563eb',\n  '--puck-color-azure-05': '#3b82f6',\n  '--puck-color-azure-06': '#60a5fa',\n  '--puck-color-azure-07': '#93c5fd',\n  '--puck-color-azure-08': '#bfdbfe',\n  '--puck-color-azure-09': '#dbeafe',\n  '--puck-color-azure-10': '#eff6ff',\n  '--puck-color-azure-11': '#f5f9ff',\n  '--puck-color-azure-12': '#fafcff',\n};\n"]}