efficient-easel 20.2.1 → 21.1.0

package/dist/panel/index.js

@@ -1,15 +1,15 @@
-export{DESIGN_GROUPS,SETTINGS_BUCKETS,SettingsGroup}from"../chunk-RC25EGHD.js";import{DEFAULT_PANEL_WORDS as e}from"../chunk-KFV7N2DJ.js";export{SettingsSwitch}from"../chunk-OECWLNKJ.js";import{SettingsField as l,SettingsSegmented as n}from"../chunk-VANKQVOW.js";export{SettingsField,SettingsSegmented}from"../chunk-VANKQVOW.js";import{withTip as t}from"../chunk-P2VEMZH5.js";import{jsx as a,jsxs as i,Fragment as s}from"react/jsx-runtime";import{RevertIcon as o,BackgroundIcon as d,WidthIcon as r}from"efficient-shell/icons/efficient";import{Tooltip as c}from"efficient-shell/ui";export{BorderInput as SettingsBorder,CornersInput as SettingsCorners,AlignmentGrid as SettingsPlacement,SidesInput as SettingsSides,SidesEachToggle as SettingsSidesEach,borderSides,borderStartEach,sidesStartEach}from"efficient-shell/ui";function u({title:e,level:l=3,id:n,className:t}){/* @__PURE__ */
-return a(`h${l}`,{id:n,className:t?`es-group-head ${t}`:"es-group-head",children:e})}function h({title:e,level:l=4,id:n,className:t}){/* @__PURE__ */
-return a(`h${l}`,{id:n,className:t?`es-group-sub ${t}`:"es-group-sub",children:e})}function b({label:l,changed:n,onReset:i,detail:s,disabled:d,defaultAction:r,words:c,className:u}){const h={...e,...c},b=["es-default-reset"];if(n&&b.push("is-changed"),u&&b.push(u),!n&&r)return b.push("is-pressable"),t(r.title,/* @__PURE__ */a("button",{type:"button",className:b.join(" "),"aria-label":r.title,disabled:d,onClick:r.onPress,children:r.icon}));if(!n)/* @__PURE__ */
-return a("span",{className:b.join(" "),"aria-hidden":"true"});const g=h.resetName({label:l});return t(s?h.resetTitle({label:l,detail:s}):g,/* @__PURE__ */a("button",{type:"button",className:b.join(" "),"aria-label":g,"aria-description":s||void 0,disabled:d,onClick:e=>{i(),function(e){const l=e.currentTarget,n=l.closest(".es-field");let t=n?.querySelector(m(".es-field-ctl"))??n?.querySelector(m(".es-field-head"))??null,a=n?null:l.parentElement;for(let e=0;!t&&a&&e<f;e+=1,a=a.parentElement)t=[...a.querySelectorAll(p)].find(e=>e!==l)??null;t?.focus()}(e)},children:/* @__PURE__ */a(o,{size:15})}))}var p=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled]):not(.es-default-reset)",'[tabindex]:not([tabindex="-1"])'].join(", "),m=e=>p.split(", ").map(l=>`${e} ${l}`).join(", "),f=4;function g({name:e,preview:l,offPage:n,status:t,onOpen:o,id:d,className:r}){const u=null!=l;/* @__PURE__ */
-return i("button",{type:"button",id:d,className:r?`es-drill ${r}`:"es-drill",onClick:o,children:[
-/* @__PURE__ */i(c,{content:u?/* @__PURE__ */i(s,{children:[e,
-/* @__PURE__ */a("br",{}),l]}):e,describe:!1,className:"es-drill-text",children:[
-/* @__PURE__ */a("span",{className:"es-drill-name",children:e}),u?/* @__PURE__ */a("span",{className:n?"es-drill-preview is-offpage":"es-drill-preview",children:l}):null]}),t?/* @__PURE__ */a("span",{className:"es-drill-status",children:t}):null,
-/* @__PURE__ */a("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function N({label:e,onPress:l,disabled:n,note:t,done:s,doneLabel:o,icon:d,id:r,className:c}){const u=void 0===o?e:o,h=s?u:e,b=null!=t,p=b&&r?`${r}-note`:void 0;/* @__PURE__ */
-return i("div",{className:c?`es-action-wrap ${c}`:"es-action-wrap",children:[
-/* @__PURE__ */i("button",{type:"button",id:r,className:s?"es-action is-done":"es-action",disabled:n,"aria-describedby":p,onClick:l,children:[d?/* @__PURE__ */a("span",{className:"es-action-icon","aria-hidden":"true",children:d}):null,
-/* @__PURE__ */a("span",{className:"es-action-label",children:h})]}),b?/* @__PURE__ */a("p",{id:p,className:"es-action-note",children:t}):null,
-/* @__PURE__ */a("span",{className:"es-action-live",role:"status","aria-live":"polite",children:s?u:null})]})}var S=["full","content"],v={label:"Background",full:"Full width",content:"Content width"};function w({value:e,changed:t,detail:i,onChange:s,onReset:o,disabled:r=!1,hint:c,labelId:u,words:h,resetWords:p}){const m={...v,...h};/* @__PURE__ */
-return a(l,{label:m.label,labelId:u,icon:/* @__PURE__ */a(d,{}),changed:t,hint:c,action:/* @__PURE__ */a(b,{words:p,label:m.label,changed:t,detail:i,onReset:o}),children:/* @__PURE__ */a(n,{options:S.map(e=>({id:e,label:"full"===e?m.full:m.content})),value:e,onChange:s,ariaLabel:m.label,disabled:r})})}var C={label:"Content",full:"Full width",content:"Content width"};function j({mode:e,onMode:t,number:s,changed:o,detail:d,onReset:c,fullClosed:u=!1,disabled:h=!1,hint:p,labelId:m,words:f,resetWords:g}){const N={...C,...f},v=void 0!==e&&t?/* @__PURE__ */a(n,{options:S.map(e=>({id:e,label:"full"===e?N.full:N.content,disabled:"full"===e&&u})),value:e,onChange:t,ariaLabel:N.label,disabled:h}):null;/* @__PURE__ */
-return a(l,{label:N.label,labelId:m,icon:/* @__PURE__ */a(r,{}),changed:o,hint:p,action:/* @__PURE__ */a(b,{words:g,label:N.label,changed:o,detail:d,onReset:c}),children:v&&s?/* @__PURE__ */i("div",{className:"es-width-stack",children:[v,s]}):v??s??null})}export{S as BACKGROUND_WIDTHS,v as DEFAULT_BACKGROUND_WIDTH_WORDS,C as DEFAULT_CONTENT_WIDTH_WORDS,N as SettingsAction,w as SettingsBackgroundWidth,j as SettingsContentWidth,b as SettingsDefaultReset,g as SettingsDrill,u as SettingsGroupHead,h as SettingsGroupSub};
+export{DESIGN_GROUPS,SETTINGS_BUCKETS,SettingsGroup}from"../chunk-FM6JO4WF.js";import{DEFAULT_PANEL_WORDS as e}from"../chunk-KFV7N2DJ.js";export{SettingsSwitch}from"../chunk-OECWLNKJ.js";import{SettingsField as l,SettingsSegmented as n}from"../chunk-S3DUFDQ6.js";export{SettingsField,SettingsSegmented}from"../chunk-S3DUFDQ6.js";import{AccordionHeading as a,SettingReset as t,Tooltip as i}from"efficient-shell/ui";export{BorderInput as SettingsBorder,CornersInput as SettingsCorners,AlignmentGrid as SettingsPlacement,SidesInput as SettingsSides,SidesEachToggle as SettingsSidesEach,borderSides,borderStartEach,sidesStartEach}from"efficient-shell/ui";import{jsx as s,jsxs as d,Fragment as o}from"react/jsx-runtime";import{BackgroundIcon as r,WidthIcon as c}from"efficient-shell/icons/efficient";function u({title:e,level:l=3,id:n,className:t}){/* @__PURE__ */
+return s(a,{title:e,level:l,id:n,className:t?`es-panel-band ${t}`:"es-panel-band"})}function h({title:e,level:l=4,id:n,className:t}){/* @__PURE__ */
+return s(a,{tier:"row",title:e,level:l,id:n,className:t})}function b({label:l,changed:n,onReset:a,detail:i,disabled:d,defaultAction:o,words:r,className:c}){const u={...e,...r},h=u.resetName({label:l});/* @__PURE__ */
+return s(t,{label:l,changed:n,onReset:a,detail:i,disabled:d,defaultAction:o,name:h,tip:i?u.resetTitle({label:l,detail:i}):h,className:c})}function m({name:e,preview:l,offPage:n,status:a,onOpen:t,id:r,className:c}){const u=null!=l;/* @__PURE__ */
+return d("button",{type:"button",id:r,className:c?`es-drill ${c}`:"es-drill",onClick:t,children:[
+/* @__PURE__ */d(i,{content:u?/* @__PURE__ */d(o,{children:[e,
+/* @__PURE__ */s("br",{}),l]}):e,describe:!1,className:"es-drill-text",children:[
+/* @__PURE__ */s("span",{className:"es-drill-name",children:e}),u?/* @__PURE__ */s("span",{className:n?"es-drill-preview is-offpage":"es-drill-preview",children:l}):null]}),a?/* @__PURE__ */s("span",{className:"es-drill-status",children:a}):null,
+/* @__PURE__ */s("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function f({label:e,onPress:l,disabled:n,note:a,done:t,doneLabel:i,icon:o,id:r,className:c}){const u=void 0===i?e:i,h=t?u:e,b=null!=a,m=b&&r?`${r}-note`:void 0;/* @__PURE__ */
+return d("div",{className:c?`es-action-wrap ${c}`:"es-action-wrap",children:[
+/* @__PURE__ */d("button",{type:"button",id:r,className:t?"es-action is-done":"es-action",disabled:n,"aria-describedby":m,onClick:l,children:[o?/* @__PURE__ */s("span",{className:"es-action-icon","aria-hidden":"true",children:o}):null,
+/* @__PURE__ */s("span",{className:"es-action-label",children:h})]}),b?/* @__PURE__ */s("p",{id:m,className:"es-action-note",children:a}):null,
+/* @__PURE__ */s("span",{className:"es-action-live",role:"status","aria-live":"polite",children:t?u:null})]})}var p=["full","content"],g={label:"Background",full:"Full width",content:"Content width"};function N({value:e,changed:a,detail:t,onChange:i,onReset:d,disabled:o=!1,hint:c,labelId:u,words:h,resetWords:m}){const f={...g,...h};/* @__PURE__ */
+return s(l,{label:f.label,labelId:u,icon:/* @__PURE__ */s(r,{}),changed:a,hint:c,action:/* @__PURE__ */s(b,{words:m,label:f.label,changed:a,detail:t,onReset:d}),children:/* @__PURE__ */s(n,{options:p.map(e=>({id:e,label:"full"===e?f.full:f.content})),value:e,onChange:i,ariaLabel:f.label,disabled:o})})}var S={label:"Content",full:"Full width",content:"Content width"};function v({mode:e,onMode:a,number:t,changed:i,detail:o,onReset:r,fullClosed:u=!1,disabled:h=!1,hint:m,labelId:f,words:g,resetWords:N}){const v={...S,...g},w=void 0!==e&&a?/* @__PURE__ */s(n,{options:p.map(e=>({id:e,label:"full"===e?v.full:v.content,disabled:"full"===e&&u})),value:e,onChange:a,ariaLabel:v.label,disabled:h}):null;/* @__PURE__ */
+return s(l,{label:v.label,labelId:f,icon:/* @__PURE__ */s(c,{}),changed:i,hint:m,action:/* @__PURE__ */s(b,{words:N,label:v.label,changed:i,detail:o,onReset:r}),children:w&&t?/* @__PURE__ */d("div",{className:"es-width-stack",children:[w,t]}):w??t??null})}export{p as BACKGROUND_WIDTHS,g as DEFAULT_BACKGROUND_WIDTH_WORDS,S as DEFAULT_CONTENT_WIDTH_WORDS,f as SettingsAction,N as SettingsBackgroundWidth,v as SettingsContentWidth,b as SettingsDefaultReset,m as SettingsDrill,u as SettingsGroupHead,h as SettingsGroupSub};

package/dist/panel/panel.css

@@ -459,265 +459,56 @@
    control out of force says so on its fit box, for the pointer. */
 .es-segs-fit[data-disabled] { cursor: not-allowed; }
 
-/* ── a group: the soft pill row that folds ─────────────────────────────────── */
-
-/* WAS 6px, AND THE 6 NEVER APPLIED (card 66203). `.es-group` is a plain div, so
-   this margin is adjoining `.es-group-head`'s own 36px below and the two
-   COLLAPSE to the larger — measured in Chromium against these stylesheets, two
-   stacked groups sit 36.00px apart, not 6. The rule was dead as written.
-
-   It is kept, at the floor, because it is a landmine rather than a non-issue: a
-   host that gives `.es-group` a border or padding through `className` stops the
-   collapsing, and then the 6 is real and is the tightest gap in the panel. At
-   `var(--es-row-gap)` the worst case is the floor instead. */
-.es-group + .es-group { margin-top: var(--es-row-gap); }
-
-/* THE HEADING ROUND A GROUP'S BUTTON (7.2.0, WAI-ARIA APG accordion pattern).
-   It is there for the outline a screen reader walks, not for the eye, so it
-   draws nothing: no margin, no padding, the font of the group around it (a
-   host's `h3 { … }` or a browser's bold 1.17em never reaches the pill). The
-   pill's own margin collapses through it, as it did through nothing before. */
-.es-group-title {
-  display: block;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
-  color: inherit;
-}
-
-/* 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;
-  text-align: left;
-  font: inherit;
-  font-size: var(--text-xs, 12px);
-  font-weight: 600;
-  color: var(--es-text);
-  background: var(--es-hover);
-  /* SQUARE (Lewis 2026-10-14, again 2026-10-23): a band, not a pill.
-     `tests/panel-group-band-full-bleed.test.ts` fails on any radius here. */
-  border-radius: 0;
-  /* 32 TALL, ONE STEP UNDER THE 36 MENU ROW (Lewis 2026-10-23: the full-bleed
-     band was too tall). The shell's medium control height. The 4 above and
-     below keeps the words and a 16px icon inside 32, so the padding never
-     makes the band taller; the words and the − / + stay centred
-     (`align-items`). `tests/panel-group-band-full-bleed.test.ts` (d). */
-  min-height: var(--control-height-md, 32px);
-  /* Its words start where a tree row's do: the shell's `TreeRow` pads `px-2`,
-     two of the shell's `--spacing` steps, and so does this (the Layers panel
-     drew a heading at 12px over rows at 8px: two text columns). */
-  padding: 4px calc(2 * var(--spacing));
-  /* A heading needs more air above it than the settings it heads have between
-     them (38px), or it reads as one more row. Floored on `--es-row-gap` so it
-     rises with the rest of the panel (card 66203). */
+/* ── a group, a heading, one setting, Default / Reset: the SHELL'S ──────────
+   B2 plan C (Lewis 2026-10-26: "keep the easel look; put it in the shell").
+   `SettingsGroup`, `SettingsGroupHead`, `SettingsGroupSub`, `SettingsField`
+   and `SettingsDefaultReset` are the shell's `Accordion`, `AccordionHeading`,
+   compact `SettingRow` and `SettingReset`, and their look is the shell's
+   `ui.css` (the `es-group…`, `es-field…` and `es-default-reset` rules moved
+   there whole). What stays here is the EDITOR'S LAYOUT round them. */
+
+/* `es-panel-band` marks a band this package's parts draw (`SettingsGroup`,
+   `SettingsGroupHead`). The air above it: more than the settings it heads
+   have between them, or it reads as one more row. Its words start where a
+   tree row's do (the shell's `TreeRow` pads two `--spacing` steps), and its
+   body takes no side inset of its own: the panel's body already has one.
+   `:where()` keeps each at the shell rule's own weight, so this sheet (loaded
+   after the shell's) wins over it and the settings body's full bleed, below,
+   wins over this. */
+.es-group-head:where(.es-panel-band, .es-panel-band > .es-group-title > *) {
   margin: max(var(--es-row-gap), var(--es-rhythm-group)) 0 0;
+  padding-inline: calc(2 * var(--spacing));
 }
+/* And no air of its own below: in a panel, whatever follows a band — the next
+   band, a row, the hints button — already brings its own 32px above it, and
+   the rows column is a flex item, so a bottom margin here would not fold into
+   that and would add 32px after the last band. */
+:where(.es-panel-band) > .es-group-body { padding-inline: 0; margin-bottom: 0; }
 
-/* FULL BLEED IN THE SETTINGS BODY (Lewis 2026-10-14, again 2026-10-23): the
-   band's ground reaches both edges of the panel, with no inset round it. It
-   cancels the body's side inset and pads the same amount back inside, so its
-   words start on the rows' left edge and its − / + ends on their right edge.
-   The start side is the panel's one inset (`--es-insp-pad-x`, chrome.css). The
-   end side is `--es-insp-pad-end` where a host keeps a scrollbar lane out of
-   the inset (the website editor's body pads its end by the inset less the
-   lane), else the same inset: a band that bled the full inset there would run
-   the lane's width past the body and give it a sideways scroll.
-   ONLY IN `.es-insp-body`: that is the one place the inset is known. A host
-   that draws a band anywhere else gets the square band in its own box. */
-.es-insp-body .es-group-head {
-  width: calc(100% + var(--es-insp-pad-x) + var(--es-insp-pad-end, var(--es-insp-pad-x)));
-  margin-inline: calc(-1 * var(--es-insp-pad-x)) calc(-1 * var(--es-insp-pad-end, var(--es-insp-pad-x)));
-  padding-inline: var(--es-insp-pad-x) var(--es-insp-pad-end, var(--es-insp-pad-x));
-}
+/* THE PANEL'S RHYTHM between its rows, on the named tokens above (cards
+   66203, 66228, 66301; one spacing scale, 2026-10-02). The rows are the
+   shell's; how far apart this panel lays them is this sheet's.
 
-/* THE QUIET TIER (card 66300) — a heading one rung under the pill.
-   NO GROUND AND NO RULE, which is the whole point of it. The pill separates
-   itself from the settings around it with a fill; this separates itself with
-   case and colour, so the two can sit in one panel without competing. And a
-   heading takes no hairline under it: a rule there separates a heading from the
-   rows it heads, which is the opposite of what a heading is for. The storefront
-   ruled BOTH its tiers that way and the owner's words on 2026-08-31 were
-   "these lines, I still find them annoying to look at".
-
-   THE TYPE IS NOT INVENTED HERE. It is `.sf-field-group` and `.sf-group-label`
-   from `efficient-storefront`, which are the same look to the decimal, hand-rolled in
-   two panels of one editor. Owning it here is what stops a third copy.
-
-   FLUSH, not inset. `.es-field` has no horizontal padding, so a heading that
-   started 11px in would sit to the RIGHT of the rows it heads and read as those
-   rows being outdented from it. The pill's text is inset only because a pill has
-   padding; this has no such excuse.
-
-   ONE NOTCH UNDER THE PILL IN AIR AS WELL AS IN TYPE. `--es-rhythm-between`
-   rather than the pill's `--es-rhythm-group`, so the tiers stay in order when a
-   reader is skimming rather than reading. Written as NAMES: every one of these
-   tokens grew between 0.20.0 and 0.23.0 (group 36->48, between 28->38,
-   group-first 14->24) and the ladder survived untouched because it reads names.
-   Pinned numbers would have crossed. */
+   A heading one rung under the band takes one notch less air than the band
+   (`--es-rhythm-between`, not `--es-rhythm-group`), so the tiers stay in order
+   when a reader skims; directly under a band it belongs TO that band. */
 .es-group-sub {
-  box-sizing: border-box;
-  font-size: var(--text-2xs, 11px);
-  font-weight: 600;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--es-muted);
   margin: max(var(--es-row-gap), var(--es-rhythm-between)) 0
           max(var(--es-row-gap), var(--es-rhythm-group-first));
 }
-
-/* Directly under a pill it belongs TO that pill, so it does not take a second
-   helping of the air the pill already put above itself. */
 .es-group-head + .es-group-sub { margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first)); }
 
-button.es-group-head {
-  cursor: pointer;
-  transition: background 0.12s;
-}
-
-button.es-group-head:hover { background: var(--es-chip-bg); }
-
-.es-group-count {
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 999px;
-  background: var(--es-accent);
-  color: var(--es-on-accent);
-  font-size: var(--text-2xs, 11px);
-  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: var(--text-sm, 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; }
-/* The first setting under a head sits CLOSER than the settings below it do to
-   each other — it belongs to that head, and 38px would cut it loose.
-
-   AND IT IS LIVE FOR THE FIRST TIME (card 66301). It declared 14 against a 16px
-   floor, so it has never once been 14 on screen — the floor answered every
-   time, and card 66206 measured that very move (14 → 16) and wrote it down as
-   the floor working, which it was. At 24 over a 20px floor the declared number
-   is finally the visible one, so this seam grows 16 → 24 rather than the 14 →
-   24 the file appears to say. `tests/panel-layout.test.ts` (h) is what turns a
-   floored rhythm into a failure instead of a footnote. */
-.es-group-body > .es-field:first-child { margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first)); }
-
-/* ── one setting ───────────────────────────────────────────────────────────── */
-
-/* 38 IS NOT A THIRD OPINION ABOUT THE FLOOR. A setting is TWO lines — a label
-   row and its control — held together by the 11px between them, and that 11px
-   is the only thing saying which label owns which control. The gap between
-   settings has to be plainly larger than the gap inside one or the panel stops
-   being a list of settings and becomes a list of loose parts. The pair was
-   measured at 28 and 7 and approved from mockups (card 8802.d) — 20 was tried
-   there and was too tight — and re-scaled together to 38 and 11 (card 66301),
-   which is the same rule with more air, not a new one.
-
-   Floored, not replaced, and not `calc()`: 38 was measured and then re-scaled,
-   it is not "20 plus 18", so arithmetic off the token would claim a
-   relationship nobody decided. */
+/* 32 between two settings; 12 between a name and its OWN control — the gap
+   inside a setting stays plainly smaller than the gap between settings,
+   because it is the only thing saying which name owns which control. Floored
+   on `--es-row-gap`, not replaced, and not `calc()`. */
 .es-field { margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
+.es-field-head { margin-bottom: var(--es-rhythm-within); }
 
-.es-field-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  /* THE ONE THAT SAYS WHICH LABEL OWNS WHICH CONTROL. Named so a consumer can
-     read it (card 66228) — it is half of the rule, and the half that is easiest
-     to lose when someone re-scales the other half. */
-  margin-bottom: var(--es-rhythm-within);
-  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: var(--text-2xs, 11px);
-  font-weight: 500;
-  color: var(--es-muted);
-}
-
-.es-field.is-changed .es-field-label { color: var(--es-accent-text); }
-
-/* The same cue, read off the row itself: a row whose Default / Reset part says
-   Reset is changed, whether or not its host passed `changed`. A host that draws
-   the part inside a component of its own (it reads a live value through a
-   hook) is invisible to SettingsField, and without this its label stayed grey
-   beside a Reset — measured on the website's section Width row. */
-.es-field:has(> .es-field-head > .es-default-reset.is-changed) > .es-field-head .es-field-label,
-.es-field:has(> .es-field-head > span > .es-default-reset.is-changed) > .es-field-head .es-field-label {
-  color: var(--es-accent-text);
-}
-
-.es-field-value {
-  margin-left: auto;
-  font-size: var(--text-xs, 12px);
-  /* The part's own 16px, and the head's min-height: so a row is one height
-     whether its value is drawn or not. Left to the host's line-height (18px in
-     the website editor) a press on Reset, which empties the value, moved every
-     row below it by 1.5px. */
-  line-height: 16px;
-  color: var(--es-text);
-  font-variant-numeric: tabular-nums;
-}
-
-.es-field-ctl {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
+/* A one-line row (a switch on the name line) has no control line, so no gap
+   to one. */
+.es-field.is-inline { margin-top: max(var(--es-row-gap), var(--es-rhythm-between-tight)); }
+.es-field.is-inline .es-field-head { margin-bottom: 0; }
 
 /* A LIST OF DRILL ROWS IN THE CONTROL SLOT STACKS (Lewis, 2026-10-14). The slot
    is a row because a slider and its number box share it; a drill row is a
@@ -731,108 +522,23 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   gap: 0;
 }
 
-/* The hint sits FLUSH LEFT, on the same edge as the row's icon and control —
-   not indented under the label's words (owner ruling, 2026-10-06; it was
-   24px, glyph + gap, until then). `tests/panel-hint-flush-left` holds it. */
-.es-field-hint {
-  margin: 8px 0 0;
-  font-size: var(--text-2xs, 11px);
-  line-height: 1.45;
-  color: var(--es-muted);
-}
-
-/* ── Default / Reset: the end of a label line ─────────────────────────────────
-   Owner 2026-10-06: ONE part puts a changed setting back. Option E, final
-   2026-10-07: a ↺ icon button while the setting is changed, NOTHING while it is
-   not (the row's grey value already says it is the default).
-
-   ONE FIXED 22px SLOT IN BOTH STATES. The unchanged state is an empty span of
-   the same box, so every row's end lines up whether it can be reset or not.
-   It replaced PR 154's two hidden words, which sized the box to the wider of
-   "Default" and "Reset": there is no word to size for now.
-
-   Straight after the label the slot pushes itself to the row's end. After a
-   value it sits 4px from it (the head's 8px gap less 4, option E). After
-   anything else on the line — a colour row's readout — that thing has already
-   been pushed right; pick.css sets the gap there. A second `auto` would split
-   the free space and strand the slot mid-row (PR 163: 295px apart). */
-.es-default-reset {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-md);
-  background: transparent;
-  color: var(--es-muted);
-}
-
-.es-default-reset svg {
-  display: block;
-  width: 15px;
-  height: 15px;
-}
-
-.es-default-reset.is-changed {
-  color: var(--es-accent-text);
-  cursor: pointer;
-}
-
-.es-default-reset.is-changed:hover { background: var(--es-hover); }
-
-.es-default-reset.is-changed:disabled {
-  color: var(--es-disabled);
-  background: transparent;
-  cursor: default;
-}
-
-.es-default-reset.is-pressable { cursor: pointer; }
-.es-default-reset.is-pressable:hover { background: var(--es-hover); color: var(--es-text-secondary); }
-.es-default-reset.is-pressable:disabled { color: var(--es-disabled); background: transparent; cursor: default; }
-
-.es-default-reset:focus-visible {
-  outline: 2px solid var(--es-accent-ring);
-  outline-offset: 1px;
+/* FULL BLEED IN THE SETTINGS BODY (Lewis 2026-10-14, again 2026-10-23): the
+   band's ground reaches both edges of the panel, with no inset round it. It
+   cancels the body's side inset and pads the same amount back inside, so its
+   words start on the rows' left edge and its − / + ends on their right edge.
+   The start side is the panel's one inset (`--es-insp-pad-x`, chrome.css). The
+   end side is `--es-insp-pad-end` where a host keeps a scrollbar lane out of
+   the inset (the website editor's body pads its end by the inset less the
+   lane), else the same inset: a band that bled the full inset there would run
+   the lane's width past the body and give it a sideways scroll.
+   ONLY IN `.es-insp-body`: that is the one place the inset is known. A host
+   that draws a band anywhere else gets the square band in its own box. */
+.es-insp-body .es-group-head {
+  width: calc(100% + var(--es-insp-pad-x) + var(--es-insp-pad-end, var(--es-insp-pad-x)));
+  margin-inline: calc(-1 * var(--es-insp-pad-x)) calc(-1 * var(--es-insp-pad-end, var(--es-insp-pad-x)));
+  padding-inline: var(--es-insp-pad-x) var(--es-insp-pad-end, var(--es-insp-pad-x));
 }
 
-/* WHATEVER A HOST PUTS IN `action` SITS AT THE ROW'S RIGHT END: the Default /
-   Reset part (or the shell Tooltip wrapper round it), a switch, the `Each side`
-   toggle of the Padding and Border rows. ONE rule for all of them (plan E-P,
-   2026-10-16), where the Default / Reset part had two of its own. A value, when
-   drawn, already takes the free space (`.es-field-value`), and the action
-   follows it. */
-.es-field-name + :not(.es-field-value) { margin-left: auto; }
-
-/* THE GREY VALUE IS THE "DEFAULT" WORD NOW (option E): a row whose slot is
-   empty draws its value grey, and the value takes the text colour once the
-   setting is changed. Scoped to rows that carry the part, so a value on a row
-   with nothing to reset keeps its colour. */
-.es-field:has(> .es-field-head > span.es-default-reset) .es-field-value { color: var(--es-muted); }
-.es-field-value + .es-default-reset,
-.es-field-value + span:has(> .es-default-reset) { margin-left: -4px; }
-
-/* A boolean row is ONE line (card 8801, Option A). The switch rides the label
-   line in the `action` slot, so there is no control row under it — and with no
-   control row, the label line's 7px bottom margin would be a gap to nothing.
-
-   A one-line row is one line tall, so it needs less air above it than a
-   two-line setting does — 26, not 38 — and it is floored on the token for the
-   same reason everything else here is (card 66203).
-
-   IT TIED WITH THE FLOOR UNTIL NOW (card 66301). At 16 against a 16px floor
-   nothing was wrong on screen, but the sheet could not tell you which of the
-   two numbers you were reading, and moving either one alone would have moved
-   nothing. 26 over 20 puts it plainly on its own number. */
-.es-field.is-inline { margin-top: max(var(--es-row-gap), var(--es-rhythm-between-tight)); }
-.es-field.is-inline .es-field-head { margin-bottom: 0; }
-
 /* ── the switch: one yes-or-no shape, both editors ─────────────────────────
    The shell's `Switch` since efficient-easel issue 199 step 4 (harness UI-24): its
    track, knob, on colour, focus ring and locked look are the kit's. `.es-switch`

package/dist/render/index.d.ts

@@ -6,7 +6,7 @@ import { B as BlockShape, D as Data } from '../types-41704JE4.js';
  *
  * Step 1.2 of the engine that replaces Puck (blueprint "Puck From The Ground
  * Up For Efficient Editor", 2026-09-29). The published storefront draws every
- * page through Puck's `<Render>` today (efficient-storefront `lib/puck/render-client.tsx`
+ * page through Puck's `<Render>` today (efficient-storefront `lib/document/render-client.tsx`
  * and `components/PublishedFooter.tsx`); this is the drop-in for it: the same
  * config, the same document, THE SAME HTML — `tests/render-puck-parity.test.tsx`
  * renders both and compares the markup byte for byte.
@@ -77,7 +77,7 @@ type SlotComponent = ((props?: SlotProps) => ReactElement) & {
 interface DropZoneProps extends SlotProps {
     zone: string;
 }
-/** The `puck` prop. Which keys are present depends on the level (see above). */
+/** The `editor` prop (and `puck`, its deprecated twin). Which keys are present depends on the level (see above). */
 interface RenderContext {
     renderDropZone?: (props: DropZoneProps) => ReactElement;
     isEditing?: boolean;

package/dist/render/index.js

@@ -1,5 +1,5 @@
-import{isRecord as n,fieldsFrom as t,slotLocations as e,setIn as o,drawnBlockCount as r,isNode as a}from"../chunk-L55YIXDC.js";import{jsx as c}from"react/jsx-runtime";function s({config:e,data:o,metadata:r={},className:a}){const s=Array.isArray(o?.content)?o.content:[],u=n(o?.root)?o.root:{},p="props"in u?u.props:u,m={config:e,content:s,zones:n(o?.zones)?o.zones:{},metadata:r},f={...p,puck:{renderDropZone:l(m,"root"),isEditing:!1,dragRef:null,metadata:r},title:p?.title||"",editMode:!1,id:"puck-root"},y=i(m,t(e.root),f),g=s.map(n=>d(m,n)),k=/* @__PURE__ */c("div",a?{className:a,children:g}:{children:g}),h=e.root?.render;return h?/* @__PURE__ */c(h,{...y,children:k}):k}function i(n,t,r){let a=r;for(const c of e(r,t))a=o(a,c.segments,u(n,c.content));return a}function u(n,e){return Object.assign(function(o={}){/* @__PURE__ */
-return c("div",{className:o.className,style:o.style,children:e.map(e=>function(n,e){if(!a(e))return null;const o=n.config.components[e.type];if(!o)return null;const r=i(n,t(o),e.props),s=o.render,u={...r.puck,metadata:n.metadata||{}};/* @__PURE__ */
-return c(s,{...r,puck:u},r.id)}(n,e))})},{blockCount:r(e,n.config.components)})}function d(n,e){if(!a(e))return null;const o=n.config.components[e.type];if(!o)return null;const r=i(n,t(o),e.props),s=o.render,u={...r.puck,renderDropZone:l(n,r.id),metadata:{...n.metadata,...o.metadata}};/* @__PURE__ */
-return c(s,{...r,puck:u},r.id)}function l(n,t){return function({zone:e,className:o,style:r}){const a=`${t}:${e}`,s="root:default-zone"===a?n.content:n.zones[a],i=Array.isArray(s)?s:[];/* @__PURE__ */
-return c("div",{className:o,style:r,children:i.map(t=>d(n,t))})}}export{s as Render};
+import{isRecord as t,fieldsFrom as n,slotLocations as e,setIn as o,drawnBlockCount as r,isNode as a}from"../chunk-L55YIXDC.js";import{jsx as c}from"react/jsx-runtime";function i({config:e,data:o,metadata:r={},className:a}){const i=Array.isArray(o?.content)?o.content:[],u=t(o?.root)?o.root:{},p="props"in u?u.props:u,m={config:e,content:i,zones:t(o?.zones)?o.zones:{},metadata:r},f={renderDropZone:l(m,"root"),isEditing:!1,dragRef:null,metadata:r},y={...p,editor:f,puck:f,title:p?.title||"",editMode:!1,id:"puck-root"},g=s(m,n(e.root),y),k=i.map(t=>d(m,t)),h=/* @__PURE__ */c("div",a?{className:a,children:k}:{children:k}),z=e.root?.render;return z?/* @__PURE__ */c(z,{...g,children:h}):h}function s(t,n,r){let a=r;for(const c of e(r,n))a=o(a,c.segments,u(t,c.content));return a}function u(t,e){return Object.assign(function(o={}){/* @__PURE__ */
+return c("div",{className:o.className,style:o.style,children:e.map(e=>function(t,e){if(!a(e))return null;const o=t.config.components[e.type];if(!o)return null;const r=s(t,n(o),e.props),i=o.render,u={...r.puck,metadata:t.metadata||{}};/* @__PURE__ */
+return c(i,{...r,editor:u,puck:u},r.id)}(t,e))})},{blockCount:r(e,t.config.components)})}function d(t,e){if(!a(e))return null;const o=t.config.components[e.type];if(!o)return null;const r=s(t,n(o),e.props),i=o.render,u={...r.puck,renderDropZone:l(t,r.id),metadata:{...t.metadata,...o.metadata}};/* @__PURE__ */
+return c(i,{...r,editor:u,puck:u},r.id)}function l(t,n){return function({zone:e,className:o,style:r}){const a=`${n}:${e}`,i="root:default-zone"===a?t.content:t.zones[a],s=Array.isArray(i)?i:[];/* @__PURE__ */
+return c("div",{className:o,style:r,children:s.map(n=>d(t,n))})}}export{i as Render};

package/dist/{repeat-Czi-6zPX.d.ts → repeat-BNgSq2Nw.d.ts}

@@ -8,7 +8,7 @@
  *   <div data-sf-repeat="<ownerId>:template" data-sf-repeat-index={i}>
  *
  * Index 0 is the MAIN copy. The blocks inside keep their real
- * `data-puck-component` / `data-puck-dnd` ids in every copy, so a click on any
+ * `data-puck-component` / `data-easel-dnd` ids in every copy, so a click on any
  * copy selects the template block. What the canvas does with the copies:
  *   - the hover and the selected outline are drawn on every copy;
  *   - only the main copy's lists are drop targets (the others are pictures);

package/dist/screen/components/AddBlockRow.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { BlockChoice } from '../lib/puck/block-choice.js';
+import { BlockChoice } from '../lib/document/block-choice.js';
 
 declare function AddBlockRow({ choices, onPick, }: {
     /** The block types this slot accepts, from `canAddTo(parentType)?.choices`. */

package/dist/screen/components/AddBlockRow.js

@@ -1 +1 @@
-export{AddBlockRow as default}from"../../chunk-L2Y3PF2R.js";import"../../chunk-M2Z775ZC.js";import"../../chunk-PAOZMXEI.js";import"../../chunk-FHCKFOCD.js";import"../../chunk-MQA7OFRA.js";import"../../chunk-23DYNW6S.js";import"../../chunk-EFHV56BO.js";import"../../chunk-TBY3DFKS.js";import"../../chunk-7LYKFL3Q.js";import"../../chunk-BPXEFVSQ.js";import"../../chunk-A6Z4SD3I.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-ZEH6QLBH.js";import"../../chunk-IWCKVZHS.js";import"../../chunk-FIVU2COQ.js";import"../../chunk-RC25EGHD.js";import"../../chunk-KFV7N2DJ.js";import"../../chunk-BSHIQIZC.js";import"../../chunk-23VM4PMV.js";import"../../chunk-KRL3IUV3.js";import"../../chunk-ZOBSIXRD.js";import"../../chunk-QAJAEWCZ.js";import"../../chunk-WRFD4EXD.js";import"../../chunk-VANKQVOW.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-3S5N4HLJ.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-K7BTCBWD.js";import"../../chunk-L55YIXDC.js";import"../../chunk-QIDRJH3S.js";import"../../chunk-PLVEGYK6.js";import"../../chunk-LF3FUSCQ.js";
+export{AddBlockRow as default}from"../../chunk-U7TFWHST.js";import"../../chunk-RUQOIQWI.js";import"../../chunk-OHZHYROJ.js";import"../../chunk-PRHBWA5V.js";import"../../chunk-FHCKFOCD.js";import"../../chunk-MQA7OFRA.js";import"../../chunk-EB6NI2VK.js";import"../../chunk-TCAAOYQY.js";import"../../chunk-TUXLORVR.js";import"../../chunk-TBY3DFKS.js";import"../../chunk-PFFH7ASD.js";import"../../chunk-BPXEFVSQ.js";import"../../chunk-ZEH6QLBH.js";import"../../chunk-FM6JO4WF.js";import"../../chunk-KFV7N2DJ.js";import"../../chunk-WHS6Y55E.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-IWCKVZHS.js";import"../../chunk-FIVU2COQ.js";import"../../chunk-BSHIQIZC.js";import"../../chunk-MZ5GSSZ3.js";import"../../chunk-KRL3IUV3.js";import"../../chunk-Y2T3JX7K.js";import"../../chunk-KFWNGPW3.js";import"../../chunk-S3DUFDQ6.js";import"../../chunk-JACEEVVF.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-3S5N4HLJ.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-4FD7TAOE.js";import"../../chunk-LF3FUSCQ.js";import"../../chunk-K7BTCBWD.js";import"../../chunk-L55YIXDC.js";

package/dist/screen/components/AddSidePanel.d.ts

@@ -3,9 +3,9 @@ import { ReactNode } from 'react';
 import { D as DragSession } from '../../session-DSQFmIvx.js';
 import { SectionTemplate } from '../lib/section-template-types.js';
 import { SharedSection } from '../lib/shared-section-types.js';
-import { BlockChoice } from '../lib/puck/block-choice.js';
+import { BlockChoice } from '../lib/document/block-choice.js';
 import '../../types-41704JE4.js';
-import '../lib/puck/content-tree.js';
+import '../lib/document/content-tree.js';
 
 /** What a tile adds, parsed back out of its key. */
 type AddKey = {

package/dist/screen/components/AddSidePanel.js

@@ -1 +1 @@
-export{blockKey,AddSidePanel as default,sectionKey,sharedKey,templateKey}from"../../chunk-R5KEFI55.js";import"../../chunk-PA3PNTVV.js";import"../../chunk-5ZBY24K7.js";import"../../chunk-BVN33R76.js";import"../../chunk-43AEUUNQ.js";import"../../chunk-SINAM2IT.js";import"../../chunk-UMDQ6CLQ.js";import"../../chunk-M2Z775ZC.js";import"../../chunk-PAOZMXEI.js";import"../../chunk-KCOBHPN6.js";import"../../chunk-FHCKFOCD.js";import"../../chunk-O7Q4DDJT.js";import"../../chunk-RSCMJIWS.js";import"../../chunk-MQA7OFRA.js";import"../../chunk-23DYNW6S.js";import"../../chunk-EFHV56BO.js";import"../../chunk-TBY3DFKS.js";import"../../chunk-7LYKFL3Q.js";import"../../chunk-BPXEFVSQ.js";import"../../chunk-A6Z4SD3I.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-ZEH6QLBH.js";import"../../chunk-IWCKVZHS.js";import"../../chunk-ZKY45F5G.js";import"../../chunk-FIVU2COQ.js";import"../../chunk-RC25EGHD.js";import"../../chunk-KFV7N2DJ.js";import"../../chunk-BSHIQIZC.js";import"../../chunk-23VM4PMV.js";import"../../chunk-KRL3IUV3.js";import"../../chunk-ZOBSIXRD.js";import"../../chunk-QAJAEWCZ.js";import"../../chunk-WRFD4EXD.js";import"../../chunk-VANKQVOW.js";import"../../chunk-ZG6PVMC3.js";import"../../chunk-MJM6SFD3.js";import"../../chunk-AJSDWWJW.js";import"../../chunk-2OAZYSWJ.js";import"../../chunk-THWO5YVZ.js";import"../../chunk-RE4LP46F.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-LQV5FZTQ.js";import"../../chunk-KAML3KQH.js";import"../../chunk-3S5N4HLJ.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-K7BTCBWD.js";import"../../chunk-L55YIXDC.js";import"../../chunk-QIDRJH3S.js";import"../../chunk-PLVEGYK6.js";import"../../chunk-LF3FUSCQ.js";
+export{blockKey,AddSidePanel as default,sectionKey,sharedKey,templateKey}from"../../chunk-2C7W64S5.js";import"../../chunk-VKPOH6MK.js";import"../../chunk-CPL43ZLJ.js";import"../../chunk-N7E6264U.js";import"../../chunk-N3MJOHAG.js";import"../../chunk-SINAM2IT.js";import"../../chunk-UMDQ6CLQ.js";import"../../chunk-RUQOIQWI.js";import"../../chunk-OHZHYROJ.js";import"../../chunk-PRHBWA5V.js";import"../../chunk-KCOBHPN6.js";import"../../chunk-FHCKFOCD.js";import"../../chunk-YM4UEGBV.js";import"../../chunk-SNF5764Q.js";import"../../chunk-MQA7OFRA.js";import"../../chunk-EB6NI2VK.js";import"../../chunk-TCAAOYQY.js";import"../../chunk-TUXLORVR.js";import"../../chunk-TBY3DFKS.js";import"../../chunk-PFFH7ASD.js";import"../../chunk-BPXEFVSQ.js";import"../../chunk-ZEH6QLBH.js";import"../../chunk-FM6JO4WF.js";import"../../chunk-KFV7N2DJ.js";import"../../chunk-WHS6Y55E.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-IWCKVZHS.js";import"../../chunk-ZKY45F5G.js";import"../../chunk-FIVU2COQ.js";import"../../chunk-BSHIQIZC.js";import"../../chunk-ZG6PVMC3.js";import"../../chunk-MJM6SFD3.js";import"../../chunk-AJSDWWJW.js";import"../../chunk-2OAZYSWJ.js";import"../../chunk-THWO5YVZ.js";import"../../chunk-RE4LP46F.js";import"../../chunk-MZ5GSSZ3.js";import"../../chunk-KRL3IUV3.js";import"../../chunk-Y2T3JX7K.js";import"../../chunk-KFWNGPW3.js";import"../../chunk-S3DUFDQ6.js";import"../../chunk-JACEEVVF.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-WJJ7H42G.js";import"../../chunk-TQ5Y6S2X.js";import"../../chunk-3S5N4HLJ.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-4FD7TAOE.js";import"../../chunk-LF3FUSCQ.js";import"../../chunk-K7BTCBWD.js";import"../../chunk-L55YIXDC.js";