efficient-easel 0.105.1 → 1.0.0

package/dist/panel/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { W as WordFit } from '../wordFit-D4S36PvB.js';
+import { W as WordFit } from '../wordFit-7XpmhcaW.js';
 import { P as PanelWords } from '../words-BGrHZAJJ.js';
 export { a as SETTINGS_BUCKETS, S as SettingsBucket } from '../buckets-CuLM47h9.js';
 
@@ -21,11 +21,12 @@ interface SettingsTabItem {
      *
      * Required, and a plain string, on purpose. Give the tab an `icon` and a
      * narrow panel takes this word off the screen, but never out of the tab: it
-     * stays in the markup and it is carried as `title` and `aria-label` on the
-     * button at every width. An icon-only control with no name is the exact
-     * defect card 8801 shipped and had to have caught in review, and a separate
-     * optional `ariaLabel` prop is how that happens again. Here it cannot — the
-     * name is the field the tab has always had, and it is not optional.
+     * stays in the markup (clipped, never `display: none`) as the tab's
+     * accessible name at every width, and the shell's `Tooltip` says it on
+     * hover. An icon-only control with no name is the exact defect card 8801
+     * shipped and had to have caught in review, and a separate optional
+     * `ariaLabel` prop is how that happens again. Here it cannot — the name is
+     * the field the tab has always had, and it is not optional.
      */
     label: string;
     /**
@@ -63,6 +64,12 @@ interface SettingsTabsProps {
     activeId: string;
     onSelect: (id: string) => void;
     ariaLabel?: string;
+    /**
+     * Wires each tab to its panel, the shell's way: tab `tabButtonId(prefix, id)`,
+     * `aria-controls` → `tabPanelId(prefix, id)` (both from efficient-shell/ui).
+     * The host gives the panel it shows that id and names it with the tab's.
+     */
+    idPrefix?: string;
     className?: string;
 }
 /**
@@ -676,66 +683,18 @@ type SettingsActionNote = {
 };
 type SettingsActionProps = SettingsActionBaseProps & SettingsActionNote;
 
-/**
- * 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.
- *
- * 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.
- *
- * A SEGMENTED CONTROL (card 66138). The strip is a grey track and the chosen
- * bucket is a raised white chip on it. Lewis, looking at a real panel: the tab
- * he is NOT on does not invite a click — it does not even look like a button.
- * The track is the answer to that, because it makes every segment look
- * pressable, where a mark under the chosen tab only ever made the chosen tab
- * louder. It replaces the underline strip and card 8811's tint ground; see the
- * long note on `.es-tab.is-active` in `panel.css`.
- *
- * A segment takes the width its OWN label needs and shares what is left over,
- * rather than every segment taking the width of the widest label. Equal
- * segments were measured and cost too much: three of them need a 267px track
- * and four need 355px, against the 281px the shop's default panel gives.
- *
- * THE WORD DROPS WHERE IT STOPS FITTING. Natural widths fit two and three
- * buckets across the whole panel-drag band; they do not fit four, where the
- * last segment ends 39px past the panel edge. So given an `icon`, a segment can
- * spend less width instead of more — the word goes and the glyph stays.
- *
- * Where that happens depends on HOW MANY buckets a section has, because with
- * natural widths the question is about the sum of the labels:
- *
- *   two buckets     both words, at every width the panel drags to.
- *   three buckets   words down to 240px, then glyph plus the chosen word.
- *   four buckets    glyph plus the chosen word under 320px; glyphs under 200px.
- *
- * Which state is a CSS decision, taken against the PANEL's width — see the
- * `@container` blocks in `panel.css`, and the wrapper below that gives them
- * something to measure. React cannot know the answer at render time, and it
- * does not need to: BOTH parts are always in the markup, and CSS shows the one
- * that fits. The word is only ever hidden, never dropped, and the label rides
- * along as `title` and `aria-label` on every tab in every state, so the glyph
- * never has to speak for the tab.
- *
- * A tab with no icon is untouched at every width — it has nothing to fall back
- * to, so it keeps its word.
- */
-declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, className, }: SettingsTabsProps): react.JSX.Element;
+declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, idPrefix, className, }: SettingsTabsProps): react.JSX.Element;
 
 /**
  * A segmented control: one row of chips, one of them pressed.
  *
+ * THE SHELL'S `Segmented` (harness UI-24, efficient-easel#199 step 4): a
+ * button group (no `name`), its track, chips, pressed state and disabled look
+ * the kit's. What stays here is what the shell's has no prop for: a value of
+ * any type (the options are keyed by position), the word that drops where it
+ * stops fitting (below), and a name for a glyph — the shell's `Tooltip` around
+ * it, never a `title`.
+ *
  * THE SAME CHIP AS `SettingsTabs`, AND A DIFFERENT PROMISE. Everything a
  * merchant sees is shared — the grey track, the raised white chip for the one
  * he is on, the glyph drawn at every width, the word that drops where it stops
@@ -919,11 +878,11 @@ declare function SettingsField({ label, labelId, icon, value, hint, changed, htm
  * had to learn the control twice. Both now import this file, which is the only
  * thing that stops them drifting apart again.
  *
- * It is a real <button>, and that is the whole keyboard story: a button is
- * activated by Space and by Enter in every browser, and that activation IS a
- * click — so the one `onClick` below serves mouse and keyboard alike. A div
- * wearing `role="switch"` would need a key handler of our own. Do not add one.
- * `type="button"` keeps it from submitting a form it happens to sit in.
+ * IT IS THE SHELL'S `Switch` (harness UI-24, efficient-easel#199 step 4): a
+ * real `<button role="switch">`, so Space and Enter are a click with no key
+ * handler of ours, and its look is the kit's, in both themes. This name stays
+ * because both editors' hosts import it, and `SettingsField` recognises it in
+ * its `action` slot; nothing here draws a switch any more.
  *
  * It cannot exist without a NAME. `SettingsSwitchProps` demands `ariaLabel` or
  * `ariaLabelledBy` and forbids both at once, so an unnamed switch — which a
@@ -933,12 +892,13 @@ declare function SettingsField({ label, labelId, icon, value, hint, changed, htm
  * ONE-WAY DEPENDENCY. `SettingsField` imports this module so it can recognise a
  * switch in its `action` slot and hand it the field's label as a name. This
  * module must NEVER import `SettingsField` back — that would close a cycle
- * between two siblings in the same folder. It imports `./types` and nothing
- * else, and `tests/settings-switch.test.tsx` (o) keeps it that way.
+ * between two siblings in the same folder. It imports `./types` and the
+ * shell's kit, nothing else, and `tests/settings-switch.test.tsx` (o) keeps it
+ * that way.
  *
- * CONTROLLED and hook-free like the other three: `checked` comes from the host
- * and the switch only ever ASKS to be flipped. That is what keeps this module a
- * directive-free leaf a Next-16 server component can import.
+ * CONTROLLED: `checked` comes from the host and the switch only ever ASKS to
+ * be flipped. Hook-free and directive-free here; the shell's kit entry is a
+ * client boundary, so a Next-16 server component can still import this.
  */
 declare function SettingsSwitch({ checked, onChange, disabled, id, ariaLabel, ariaLabelledBy, className, }: SettingsSwitchProps): react.JSX.Element;
 
@@ -1053,6 +1013,13 @@ declare function SettingsDrill({ name, preview, offPage, status, onOpen, id, cla
  * or a grid anchor is the host's business, and keeping it that way is what lets
  * one control answer both questions.
  *
+ * ── AN EDITOR'S COMPOSITE, OF THE SHELL'S PARTS (UI-24 §2) ─────────────────
+ *
+ * The shell has a `RadioGroup` of labelled rows and no grid of positions, so
+ * this picture of nine squares stays the editor's — but every cell is the
+ * shell's `IconButton` (a `role="radio"`), its name the shell's `Tooltip`,
+ * and the sheet draws only the picture: the track, the dot, the chosen cell.
+ *
  * Controlled and hook-free, like every primitive here, so a Next server
  * component can import this module.
  */
@@ -1106,6 +1073,13 @@ declare function SettingsPlacement({ label, value, points, onChange, id, classNa
  * grid requires its value already resolved. A control that invented the default
  * would be answering a question only the host can answer.
  *
+ * ── AN EDITOR'S COMPOSITE, OF THE SHELL'S PARTS (UI-24 §2) ─────────────────
+ *
+ * The shell's `Segmented` answers ONE of a set, and it has no set of toggles,
+ * so the four corners stay the editor's picture — but every cell is the
+ * shell's `IconButton` (`aria-pressed`), its name the shell's `Tooltip`, and
+ * the sheet draws only the picture: the track, the frame and the marks.
+ *
  * Controlled and hook-free, like every primitive here, so a Next server
  * component can import this module.
  */

package/dist/panel/index.js

@@ -1,18 +1,17 @@
-export{SETTINGS_BUCKETS,SettingsField,SettingsGroup,SettingsTabs}from"../chunk-ZNS7727Y.js";import{DEFAULT_PANEL_WORDS as e}from"../chunk-QTLAVDJE.js";export{SettingsSegmented,SettingsSwitch}from"../chunk-P6O363EE.js";import"../chunk-BZ5ASXOL.js";import{RevertIcon as a}from"../chunk-L5KW4HG5.js";import{jsx as l,jsxs as s}from"react/jsx-runtime";function n({title:e,level:a=3,id:s,className:n}){/* @__PURE__ */
-return l(`h${a}`,{id:s,className:n?`es-group-head ${n}`:"es-group-head",children:e})}function i({title:e,level:a=4,id:s,className:n}){/* @__PURE__ */
-return l(`h${a}`,{id:s,className:n?`es-group-sub ${n}`:"es-group-sub",children:e})}function t({label:s,changed:n,onReset:i,detail:t,disabled:d,defaultAction:u,words:p,className:m}){const b={...e,...p},h=["es-default-reset"];if(n&&h.push("is-changed"),m&&h.push(m),!n&&u)return h.push("is-pressable"),/* @__PURE__ */l("button",{type:"button",className:h.join(" "),"aria-label":u.title,title:u.title,disabled:d,onClick:u.onPress,children:u.icon});if(!n)/* @__PURE__ */
-return l("span",{className:h.join(" "),"aria-hidden":"true"});const N=b.resetName({label:s});/* @__PURE__ */
-return l("button",{type:"button",className:h.join(" "),"aria-label":N,"aria-description":t||void 0,title:t?b.resetTitle({label:s,detail:t}):N,disabled:d,onClick:e=>{i(),function(e){const a=e.currentTarget,l=a.closest(".es-field");let s=l?.querySelector(o(".es-field-ctl"))??l?.querySelector(o(".es-field-head"))??null,n=l?null:a.parentElement;for(let e=0;!s&&n&&e<c;e+=1,n=n.parentElement)s=[...n.querySelectorAll(r)].find(e=>e!==a)??null;s?.focus()}(e)},children:/* @__PURE__ */l(a,{size:15})})}var r=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled]):not(.es-default-reset)",'[tabindex]:not([tabindex="-1"])'].join(", "),o=e=>r.split(", ").map(a=>`${e} ${a}`).join(", "),c=4;function d({name:e,preview:a,offPage:n,status:i,onOpen:t,id:r,className:o}){const c=null!=a;/* @__PURE__ */
-return s("button",{type:"button",id:r,className:o?`es-drill ${o}`:"es-drill",onClick:t,children:[
-/* @__PURE__ */s("span",{className:"es-drill-text",children:[
-/* @__PURE__ */l("span",{className:"es-drill-name",children:e}),c?/* @__PURE__ */l("span",{className:n?"es-drill-preview is-offpage":"es-drill-preview",children:a}):null]}),i?/* @__PURE__ */l("span",{className:"es-drill-status",children:i}):null,
-/* @__PURE__ */l("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function u({label:e,value:a,points:s,onChange:n,id:i,className:t}){/* @__PURE__ */
-return l("div",{id:i,className:"es-placement"+(t?` ${t}`:""),role:"radiogroup","aria-label":e,children:s.map(e=>{const s=a===e.value,i=!0===e.disabled;/* @__PURE__ */
-return l("button",{type:"button",role:"radio","aria-checked":s,"aria-label":e.label,"aria-disabled":i||void 0,disabled:i,title:e.title??e.label,className:`es-placement-cell${s?" is-active":""}${i?" is-off":""}`,onClick:()=>n(e.value),children:e.icon?/* @__PURE__ */l("span",{className:"es-placement-icon","aria-hidden":"true",children:e.icon}):/* @__PURE__ */l("span",{className:"es-placement-dot"})},e.value)})})}function p({label:e,value:a,corners:n,onChange:i,id:t,className:r}){/* @__PURE__ */
-return s("div",{id:t,className:"es-corners"+(r?` ${r}`:""),role:"group","aria-label":e,children:[
-/* @__PURE__ */l("span",{className:"es-corners-frame","aria-hidden":"true"}),n.map(e=>{const s=a.includes(e.value),n=!0===e.disabled;/* @__PURE__ */
-return l("button",{type:"button","aria-pressed":s,"aria-label":e.label,"aria-disabled":n||void 0,disabled:n,title:e.title??e.label,className:`es-corners-cell es-corners-${e.value}${s?" is-on":""}${n?" is-off":""}`,onClick:()=>i(s?a.filter(a=>a!==e.value):[...a,e.value]),children:/* @__PURE__ */l("span",{className:"es-corners-mark","aria-hidden":"true"})},e.value)})]})}function m({label:e,onPress:a,disabled:n,note:i,done:t,doneLabel:r,icon:o,id:c,className:d}){const u=void 0===r?e:r,p=t?u:e,m=null!=i,b=m&&c?`${c}-note`:void 0;/* @__PURE__ */
-return s("div",{className:d?`es-action-wrap ${d}`:"es-action-wrap",children:[
-/* @__PURE__ */s("button",{type:"button",id:c,className:t?"es-action is-done":"es-action",disabled:n,"aria-describedby":b,onClick:a,children:[o?/* @__PURE__ */l("span",{className:"es-action-icon","aria-hidden":"true",children:o}):null,
-/* @__PURE__ */l("span",{className:"es-action-label",children:p})]}),m?/* @__PURE__ */l("p",{id:b,className:"es-action-note",children:i}):null,
-/* @__PURE__ */l("span",{className:"es-action-live",role:"status","aria-live":"polite",children:t?u:null})]})}export{m as SettingsAction,p as SettingsCorners,t as SettingsDefaultReset,d as SettingsDrill,n as SettingsGroupHead,i as SettingsGroupSub,u as SettingsPlacement};
+export{SETTINGS_BUCKETS,SettingsField,SettingsGroup,SettingsTabs}from"../chunk-Q27BB5ZC.js";import{DEFAULT_PANEL_WORDS as e}from"../chunk-QTLAVDJE.js";export{SettingsSegmented,SettingsSwitch}from"../chunk-QLD57GBB.js";import{withTip as a}from"../chunk-P2VEMZH5.js";import{RevertIcon as l}from"../chunk-L5KW4HG5.js";import{jsx as s,jsxs as i}from"react/jsx-runtime";import{Tooltip as n,IconButton as t}from"efficient-shell/ui";function r({title:e,level:a=3,id:l,className:i}){/* @__PURE__ */
+return s(`h${a}`,{id:l,className:i?`es-group-head ${i}`:"es-group-head",children:e})}function c({title:e,level:a=4,id:l,className:i}){/* @__PURE__ */
+return s(`h${a}`,{id:l,className:i?`es-group-sub ${i}`:"es-group-sub",children:e})}function d({label:i,changed:n,onReset:t,detail:r,disabled:c,defaultAction:d,words:p,className:h}){const b={...e,...p},f=["es-default-reset"];if(n&&f.push("is-changed"),h&&f.push(h),!n&&d)return f.push("is-pressable"),a(d.title,/* @__PURE__ */s("button",{type:"button",className:f.join(" "),"aria-label":d.title,disabled:c,onClick:d.onPress,children:d.icon}));if(!n)/* @__PURE__ */
+return s("span",{className:f.join(" "),"aria-hidden":"true"});const v=b.resetName({label:i});return a(r?b.resetTitle({label:i,detail:r}):v,/* @__PURE__ */s("button",{type:"button",className:f.join(" "),"aria-label":v,"aria-description":r||void 0,disabled:c,onClick:e=>{t(),function(e){const a=e.currentTarget,l=a.closest(".es-field");let s=l?.querySelector(u(".es-field-ctl"))??l?.querySelector(u(".es-field-head"))??null,i=l?null:a.parentElement;for(let e=0;!s&&i&&e<m;e+=1,i=i.parentElement)s=[...i.querySelectorAll(o)].find(e=>e!==a)??null;s?.focus()}(e)},children:/* @__PURE__ */s(l,{size:15})}))}var o=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled]):not(.es-default-reset)",'[tabindex]:not([tabindex="-1"])'].join(", "),u=e=>o.split(", ").map(a=>`${e} ${a}`).join(", "),m=4;function p({name:e,preview:a,offPage:l,status:n,onOpen:t,id:r,className:c}){const d=null!=a;/* @__PURE__ */
+return i("button",{type:"button",id:r,className:c?`es-drill ${c}`:"es-drill",onClick:t,children:[
+/* @__PURE__ */i("span",{className:"es-drill-text",children:[
+/* @__PURE__ */s("span",{className:"es-drill-name",children:e}),d?/* @__PURE__ */s("span",{className:l?"es-drill-preview is-offpage":"es-drill-preview",children:a}):null]}),n?/* @__PURE__ */s("span",{className:"es-drill-status",children:n}):null,
+/* @__PURE__ */s("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function h({label:e,value:a,points:l,onChange:r,id:c,className:d}){const o=c??`es-placement-${e.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;/* @__PURE__ */
+return i("div",{id:c,className:"es-placement"+(d?` ${d}`:""),role:"radiogroup","aria-label":e,children:[l.map(e=>{const l=a===e.value,i=!0===e.disabled,c=i&&e.title?`${o}-${e.value}-why`:void 0;/* @__PURE__ */
+return s(n,{content:e.title??e.label,children:/* @__PURE__ */s(t,{size:"sm",role:"radio","aria-checked":l,"aria-label":e.label,"aria-disabled":i||void 0,"aria-describedby":c,className:`es-placement-cell${l?" is-active":""}${i?" is-off":""}`,onClick:()=>{i||r(e.value)},children:e.icon?/* @__PURE__ */s("span",{className:"es-placement-icon","aria-hidden":"true",children:e.icon}):/* @__PURE__ */s("span",{className:"es-placement-dot"})})},e.value)}),l.map(e=>!0===e.disabled&&e.title?/* @__PURE__ */s("span",{id:`${o}-${e.value}-why`,className:"es-vh",children:e.title},`${e.value}-why`):null)]})}function b({label:e,value:a,corners:l,onChange:r,id:c,className:d}){const o=c??`es-corners-${e.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;/* @__PURE__ */
+return i("div",{id:c,className:"es-corners"+(d?` ${d}`:""),role:"group","aria-label":e,children:[
+/* @__PURE__ */s("span",{className:"es-corners-frame","aria-hidden":"true"}),l.map(e=>{const l=a.includes(e.value),i=!0===e.disabled,c=i&&e.title?`${o}-${e.value}-why`:void 0;/* @__PURE__ */
+return s(n,{content:e.title??e.label,children:/* @__PURE__ */s(t,{size:"sm","aria-pressed":l,"aria-label":e.label,"aria-disabled":i||void 0,"aria-describedby":c,className:`es-corners-cell es-corners-${e.value}${l?" is-on":""}${i?" is-off":""}`,onClick:()=>{i||r(l?a.filter(a=>a!==e.value):[...a,e.value])},children:/* @__PURE__ */s("span",{className:"es-corners-mark","aria-hidden":"true"})})},e.value)}),l.map(e=>!0===e.disabled&&e.title?/* @__PURE__ */s("span",{id:`${o}-${e.value}-why`,className:"es-vh",children:e.title},`${e.value}-why`):null)]})}function f({label:e,onPress:a,disabled:l,note:n,done:t,doneLabel:r,icon:c,id:d,className:o}){const u=void 0===r?e:r,m=t?u:e,p=null!=n,h=p&&d?`${d}-note`:void 0;/* @__PURE__ */
+return i("div",{className:o?`es-action-wrap ${o}`:"es-action-wrap",children:[
+/* @__PURE__ */i("button",{type:"button",id:d,className:t?"es-action is-done":"es-action",disabled:l,"aria-describedby":h,onClick:a,children:[c?/* @__PURE__ */s("span",{className:"es-action-icon","aria-hidden":"true",children:c}):null,
+/* @__PURE__ */s("span",{className:"es-action-label",children:m})]}),p?/* @__PURE__ */s("p",{id:h,className:"es-action-note",children:n}):null,
+/* @__PURE__ */s("span",{className:"es-action-live",role:"status","aria-live":"polite",children:t?u:null})]})}export{f as SettingsAction,b as SettingsCorners,d as SettingsDefaultReset,p as SettingsDrill,r as SettingsGroupHead,c as SettingsGroupSub,h as SettingsPlacement};