efficient-easel 0.0.0 → 0.97.0

package/dist/fields/index.d.ts

@@ -0,0 +1,273 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { S as SettingsBucket } from '../buckets-1vRlQceY.js';
+import { I as InspectorFields, a as InspectorFieldDef, F as FieldRenderer, b as FieldTextProps, c as FieldNumberProps, d as FieldSelectProps, e as FieldOption } from '../types-CEqUFH2j.js';
+export { A as ArrayFieldDef, C as CustomFieldDef, f as CustomFieldRenderProps, N as NumberFieldDef, O as ObjectFieldDef, R as RadioFieldDef, S as SelectFieldDef, g as SlotFieldDef, T as TextFieldDef, h as TextareaFieldDef } from '../types-CEqUFH2j.js';
+import { R as ResolvableItem } from '../resolve-D68pb3Bx.js';
+export { F as FieldsWords } from '../words-CD3WADyb.js';
+import '../types-41704JE4.js';
+
+interface InspectorProps {
+    /** The selected node's fields, already resolved by the host. */
+    fields: InspectorFields;
+    /** The node's props. */
+    values: Record<string, unknown>;
+    /** One field written. The host turns it into one change of the document. */
+    onChange: (name: string, value: unknown) => void;
+    readOnly?: boolean;
+    /** Extra props for every custom render (the node, the root, the device…). */
+    context?: Record<string, unknown>;
+    /** The open tab. Absent: the Inspector keeps its own. */
+    tab?: SettingsBucket;
+    onTab?: (tab: SettingsBucket) => void;
+    /** False: no tab strip, every row in one list (the email designer's phone view). */
+    tabs?: boolean;
+    /** A glyph per tab (both editors draw one). */
+    tabIcons?: Partial<Record<SettingsBucket, ReactNode>>;
+    /** A field type's drawing, swapped in by the host. */
+    renderers?: Partial<Record<InspectorFieldDef['type'], FieldRenderer>>;
+    /** Unique per panel, e.g. the selected node's id: every field id starts with it. */
+    idPrefix?: string;
+    /** The tab strip's name. Default "Settings" (`EditorStrings.panel.settings`). */
+    ariaLabel?: string;
+    /** Drawn after the rows, on every tab (an app's own trailing rows). */
+    children?: ReactNode;
+}
+/**
+ * THE SETTINGS PANEL'S BODY (blueprint step 4.1) — what `<Puck.Fields>` was in
+ * both editors, without the hashed class names both had to hunt.
+ *
+ *   - THE TABS ARE THE FIELDS' OWN. Which tab a field opens is said on the field
+ *     (`bucket`, ./plan); the strip offers only the tabs that hold a row, in the
+ *     owner's order, and none at all when there is only one.
+ *   - A ROW ON ANOTHER TAB IS HIDDEN, NOT UNMOUNTED. The email designer's Logo
+ *     re-bakes its colours from a field on a tab you are not looking at; taking
+ *     the row out of the tree would stop that.
+ *   - EVERY ROW IS ONE `.es-insp-row` WITH ITS NAME ON IT (`data-field`), a
+ *     public class an app may style, where Puck's wrapper had a hashed one. A row
+ *     that draws nothing takes no space (`:empty`).
+ *   - THE SPACING IS THE PANEL'S (panel.css `--es-rhythm-*`): a row adds none of
+ *     its own, so the rhythm is defined once for both editors.
+ *   - A TAB'S KEY IS NOT ITS WORD. `bucket: 'Style'` names the tab; what the tab
+ *     says is `EditorStrings.panel.buckets.Style`, from the strings provider.
+ */
+declare function Inspector({ fields, values, onChange, readOnly, context, tab, onTab, tabs, tabIcons, renderers, idPrefix, ariaLabel, children, }: InspectorProps): react.JSX.Element;
+
+interface InspectorFieldProps {
+    field: InspectorFieldDef;
+    name: string;
+    /** Unique on the page: the label's `for`, and what a custom render gets as `id`. */
+    id: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    readOnly?: boolean;
+    /** Extra props for a custom render (the node, the root, the device…). */
+    context?: Record<string, unknown>;
+    /** A field type's drawing, swapped in by the host. */
+    renderers?: Partial<Record<InspectorFieldDef['type'], FieldRenderer>>;
+    /**
+     * An array's open item, when the Inspector holds it (the item takes the panel
+     * over). Absent: the list keeps its own.
+     */
+    openItem?: number | null;
+    onOpenItem?: (index: number | null) => void;
+}
+/** The label a row shows: the field's own, else its key, as Puck did. */
+declare const labelOf: (field: InspectorFieldDef, name: string) => string;
+/**
+ * ONE FIELD, drawn by its type — what Puck's `AutoField` was (blueprint 4.1).
+ *
+ *   custom    the field's own render, called with Puck's props plus `context`;
+ *   text, textarea, number, select
+ *             a SettingsField row (quiet label, control under it) holding the
+ *             shell's own control, never the browser's;
+ *   radio     the panel's segmented strip;
+ *   object    a group of its members, each written back into the object;
+ *   slot      nothing: a slot's children are on the canvas and in Layers;
+ *   array     the list field (4.2): a row per item, open one to edit its own
+ *             fields, each written back into the array.
+ *
+ * A marker, or a field with `visible: false`, draws nothing.
+ */
+declare function InspectorField(props: InspectorFieldProps): ReactNode;
+
+/** One drawn row: a field, its name, and the tab it opens. */
+interface PlannedRow {
+    name: string;
+    field: InspectorFieldDef;
+    bucket: SettingsBucket;
+}
+interface FieldPlan {
+    /** Every field that draws, in the order declared. */
+    rows: PlannedRow[];
+    /** The tabs to offer: the buckets that hold a row, in the owner's order. */
+    buckets: SettingsBucket[];
+}
+/**
+ * WHICH TAB EACH FIELD OPENS — read off the fields themselves (blueprint 4.1:
+ * "the tab is declared by the field, never found by hashed class names").
+ *
+ * In declaration order, a field's own `bucket` starts that bucket, and every
+ * field after it without one stays in it; the panel starts in Content. That one
+ * rule covers both editors as they are written today: the email designer puts a
+ * mark in front of each tab's run (its `FIELD_BUCKETS` map), the website puts a
+ * heading there (its `group(...)` headers), and a mark is just a field with
+ * `marker: true` that draws nothing.
+ *
+ * A slot counts for no tab — it draws nothing in the panel — and a field with
+ * `visible: false` neither draws nor counts, so a tab whose fields are all
+ * hidden is not offered (the owner's rule: an empty tab is hidden, never drawn).
+ */
+declare function planFields(fields: InspectorFields): FieldPlan;
+/**
+ * Every field's bucket, by name — what "copy style" asks (a look is what is not
+ * Content). The walk both editors did on their own (the website's
+ * `style-clipboard.ts`, the email designer's `FIELD_BUCKETS`) is this one.
+ */
+declare function bucketsOf(fields: InspectorFields): Map<string, SettingsBucket>;
+
+/** What a block may declare about its fields. */
+interface FieldsBlock {
+    fields?: object;
+    resolveFields?: (data: ResolvableItem, params: {
+        changed: Record<string, boolean>;
+        fields: InspectorFields;
+        lastFields: InspectorFields;
+        lastData: ResolvableItem | null;
+        appState: unknown;
+        parent: ResolvableItem | null;
+    }) => InspectorFields | Promise<InspectorFields>;
+}
+interface ResolvedFieldsInput {
+    /** The selected node's id, or "root". A new id starts again from its declared fields. */
+    id: string;
+    /** The node as it is now. A new object is a change, and is resolved again. */
+    node: ResolvableItem | null;
+    block: FieldsBlock | undefined;
+    /** The node that holds it, or null at the top. */
+    parent?: ResolvableItem | null;
+    /** What a resolver is told about the editor (Puck's public `{ data, ui }`). */
+    appState?: unknown;
+}
+/**
+ * A NODE'S FIELDS, RESOLVED AS PUCK RESOLVES THEM — `useRegisterFieldsSlice`
+ * in Puck 0.20, which both editors' `resolveFields` were written against.
+ *
+ *   - A new selection starts from the block's DECLARED fields (`lastFields` is
+ *     those) and is then resolved.
+ *   - A change to the node resolves again, with the last answer as
+ *     `lastFields`, the last node resolved for this id as `lastData`, and
+ *     `changed` saying which props differ from it.
+ *   - Every resolver is awaited, sync or not; an answer that arrives after the
+ *     selection has moved on is dropped.
+ *   - `loading` turns on only when an answer takes longer than 50 ms.
+ *
+ * `appState` and `parent` are read when a resolution starts, never watched:
+ * Puck re-resolved on the node's change alone.
+ */
+declare function useResolvedFields({ id, node, block, parent, appState }: ResolvedFieldsInput): {
+    fields: InspectorFields;
+    loading: boolean;
+};
+
+/**
+ * A LIST VALUE (blueprint step 4.2) — slides, buttons, links, any `array`
+ * field — drawn the way Layers draws a page: one row per item, the same rows,
+ * the same drag (the whole row picks up), the same ⌥↑ / ⌥↓, and a "+" between
+ * two rows that adds one there. Pressing a row opens that item in the panel,
+ * with a way back at the top.
+ *
+ * It replaces Puck's ArrayField, which drew its own look and ran its own drag.
+ * THE DATA DOES NOT CHANGE: a list is the array Puck stored, and every write is
+ * that array with an item added, moved, copied or taken out. No id is added to
+ * an item (Puck's `_arrayId` lived in its UI state, never in the data, and so
+ * does a row's key here — its position).
+ *
+ * CONTROLLED, both the list and which item is open: the Inspector holds them,
+ * so an editor can keep the open item across a re-render of the panel.
+ *
+ * Its words ("Add slide", "2 of 5", the rows' drag hint) are the strings
+ * provider's — `EditorStrings.fields.list` and `.tree` — English with none.
+ */
+interface ListFieldProps<T> {
+    /** The list's name, e.g. "Slides". Also the back button's word. */
+    label: string;
+    /** A glyph before the name, as a settings row wears one. */
+    icon?: ReactNode;
+    /** One item's word, lower case, e.g. "slide": "Add slide", "Delete slide". Default "item" (`EditorStrings.fields.list.item`). */
+    noun?: string;
+    items: readonly T[];
+    onChange: (next: T[]) => void;
+    /** A fresh item for "+" (Puck's `defaultItemProps`, copied). */
+    newItem: () => T;
+    /** The words after an item's name in its row (Puck's `getItemSummary`). */
+    summary?: (item: T, index: number) => ReactNode;
+    /** An item's own name; default "<Noun> <n>". */
+    itemName?: (item: T, index: number) => string;
+    /** A small picture at the start of the row. */
+    thumb?: (item: T, index: number) => ReactNode;
+    min?: number;
+    max?: number;
+    readOnly?: boolean;
+    /** The item open in the panel, by position, or null for the list. */
+    open: number | null;
+    onOpen: (index: number | null) => void;
+    /** The open item's own settings. `change` writes the item. */
+    renderItem: (item: T, index: number, change: (next: T) => void) => ReactNode;
+}
+/** The list with `item` put at `index`. */
+declare function insertAt<T>(items: readonly T[], index: number, item: T): T[];
+/** The list with the item at `from` moved to `to` (a final position). */
+declare function moveTo<T>(items: readonly T[], from: number, to: number): T[];
+/** The list without the item at `index`. */
+declare function removeAt<T>(items: readonly T[], index: number): T[];
+/**
+ * A copy of an item: a deep copy of plain data, so editing the copy never
+ * writes through to the original (a list item is JSON — Puck stored it so).
+ */
+declare function copyItem<T>(item: T): T;
+declare function ListField<T>({ label, icon, noun: ownNoun, items, onChange, newItem, summary, itemName, thumb, min, max, readOnly, open, onOpen, renderItem, }: ListFieldProps<T>): react.JSX.Element;
+
+/**
+ * A text value: the shell's own box, one line or several (blueprint step 4.1,
+ * "native inputs become shell controls"). The look is `fields.css`
+ * (`.es-fin`), so a row in the email designer and a row in the website editor
+ * are the same box instead of Puck's input under two sets of overrides.
+ *
+ * CONTROLLED: every keystroke goes to `onChange`; the host decides what a
+ * keystroke costs (the editors write a draft and save on their own clock).
+ */
+declare function FieldText({ id, value, onChange, placeholder, multiline, rows, readOnly, ariaLabel, ariaLabelledBy, }: FieldTextProps): react.JSX.Element;
+
+/** A number held to its bounds and, when a step is given, to the step's grid. */
+declare function clampNumber(n: number, min?: number, max?: number): number;
+/** What a typed string means as a number: null for nothing or not-a-number. */
+declare function parseTyped(text: string): number | null;
+/**
+ * A number value (blueprint step 4.1): the shell box, an optional unit after it
+ * and − / + beside it.
+ *
+ * It keeps the TYPED TEXT while you type, so "1." and "-" are allowed on the way
+ * to a number, and writes only when the text is a number. It writes as you type
+ * (the canvas follows), clamps to `min` / `max` when you leave the box, and
+ * arrow keys and the two buttons move by `step` (default 1). An empty box writes
+ * `undefined`: the setting goes back to the block's own.
+ */
+declare function FieldNumber({ id, value, onChange, min, max, step, unit, steppers, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldNumberProps): react.JSX.Element;
+
+/** The option a stored value names: equal by `Object.is`, so `0`, `false` and `''` are values too. */
+declare function optionFor<V>(options: readonly FieldOption<V>[], value: V | undefined): FieldOption<V> | undefined;
+/**
+ * One of a fixed set (blueprint step 4.1): a button that shows the choice and
+ * opens a list under it. The shell's control, not the browser's `<select>`, so
+ * it is the same box and the same list in both editors and on every system.
+ *
+ * Keyboard as a listbox: ↓ / ↑ / Enter / Space open it on the button; in the
+ * list ↓ ↑ Home End move, Enter or Space choose, Escape closes and gives the
+ * button its focus back, a letter jumps to the next option that starts with it.
+ * A click outside closes it (a CLICK, not a pointerdown: closing early moves the
+ * row and loses the press — the colour row learned that in 4.6).
+ */
+declare function FieldSelect<V>({ id, value, options, onChange, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldSelectProps<V>): react.JSX.Element;
+
+export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectProps, FieldText, FieldTextProps, type FieldsBlock, Inspector, InspectorField, InspectorFieldDef, type InspectorFieldProps, InspectorFields, type InspectorProps, ListField, type ListFieldProps, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, clampNumber, copyItem, insertAt, labelOf, moveTo, optionFor, parseTyped, planFields, removeAt, useResolvedFields };

package/dist/fields/index.js

@@ -0,0 +1,46 @@
+import{LayersTree as e,TreeSeam as n,TreeRow as t,TreeRowAction as l}from"../chunk-STFMZJKU.js";import{SettingsField as a,SETTINGS_BUCKETS as r,SettingsTabs as i,SettingsGroup as s}from"../chunk-67VZRQLG.js";import{DEFAULT_FIELDS_WORDS as o}from"../chunk-SUO5627P.js";import{DEFAULT_TREE_WORDS as c}from"../chunk-H4B72XCJ.js";import{DEFAULT_PANEL_WORDS as d}from"../chunk-7A7O2JWQ.js";export{useResolvedFields}from"../chunk-YRLPFZW3.js";import{SettingsSegmented as u}from"../chunk-QB3BZIRA.js";import{useWords as m}from"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import{useTreeDrag as h,gapToMoveIndex as p}from"../chunk-6PS6STGA.js";import"../chunk-YNZZYHA4.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{useState as b,useEffect as f,useId as v,useRef as y}from"react";import{jsxs as g,jsx as k,Fragment as x}from"react/jsx-runtime";function N(e,n,t){let l=e;return"number"==typeof n&&l<n&&(l=n),"number"==typeof t&&l>t&&(l=t),l}function w(e){const n=e.trim().replace(",",".");if(""===n||"-"===n||"."===n||"-."===n)return null;const t=Number(n);return Number.isFinite(t)?t:null}function C(e){const n=String(e),t=n.indexOf(".");return t<0?0:n.length-t-1}function O({id:e,value:n,onChange:t,min:l,max:a,step:r=1,unit:i,steppers:s=!1,placeholder:c,readOnly:d=!1,ariaLabel:u,ariaLabelledBy:h}){const p=m("fields",o),v="number"==typeof n&&Number.isFinite(n)?String(n):"",[y,x]=b(v);f(()=>{x(e=>w(e)===("number"==typeof n?n:null)?e:v)},[n,v]);const O=e=>{d||t(e)},$=e=>{const t=N(function(e,n){const t=Math.max(C(e),C(n));return Number((e+n).toFixed(t))}("number"==typeof n&&Number.isFinite(n)?n:l??0,e*r),l,a);x(String(t)),O(t)};/* @__PURE__ */
+return g("div",{className:"es-fnum",children:[
+/* @__PURE__ */k("input",{id:e,type:"text",inputMode:"decimal",className:"es-fin es-fnum-box",value:y,placeholder:c,readOnly:d,"aria-label":u,"aria-labelledby":h,onChange:e=>{const n=e.target.value;if(x(n),""===n.trim())O(void 0);else{const e=w(n);null!==e&&O(e)}},onBlur:()=>{const e=w(y);if(null===e)return void x(v);const t=N(e,l,a);x(String(t)),t!==n&&O(t)},onKeyDown:e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),$("ArrowUp"===e.key?1:-1))}}),i?/* @__PURE__ */k("span",{className:"es-fnum-unit",children:i}):null,s?/* @__PURE__ */g("span",{className:"es-fnum-steps",children:[
+/* @__PURE__ */k("button",{type:"button",className:"es-fbtn","aria-label":p.less,disabled:d,onClick:()=>$(-1),children:"−"}),
+/* @__PURE__ */k("button",{type:"button",className:"es-fbtn","aria-label":p.more,disabled:d,onClick:()=>$(1),children:"+"})]}):null]})}function $(e,n){return e.find(e=>Object.is(e.value,n))}function j({id:e,value:n,options:t,onChange:l,placeholder:a,readOnly:r=!1,ariaLabel:i,ariaLabelledBy:s}){const c=m("fields",o),d=v(),[u,h]=b(!1),[p,x]=b(0),N=y(null),w=y(null),C=y(null),O=$(t,n),j=O?t.indexOf(O):-1,I=()=>{r||0===t.length||(x(j>=0?j:0),h(!0))},S=e=>{h(!1),e&&w.current?.focus()},L=e=>{const a=t[e];a&&!a.disabled&&(Object.is(a.value,n)||l(a.value),S(!0))};f(()=>{if(!u)return;C.current?.focus();const e=N.current?.ownerDocument;if(!e)return;const n=e=>{N.current&&!N.current.contains(e.target)&&h(!1)};return e.addEventListener("click",n,!0),()=>e.removeEventListener("click",n,!0)},[u]);const D=e=>{const n=t.length;if(0===n)return;let l=(e%n+n)%n;for(let a=0;a<n&&t[l]?.disabled;a++)l=(l+(e>=p?1:-1)+n)%n;x(l)};/* @__PURE__ */
+return g("div",{className:"es-fsel",ref:N,children:[
+/* @__PURE__ */g("button",{ref:w,id:e,type:"button",className:"es-fin es-fsel-button","aria-haspopup":"listbox","aria-expanded":u,"aria-controls":u?d:void 0,"aria-label":i,"aria-labelledby":s,disabled:r,onClick:()=>u?S(!1):I(),onKeyDown:e=>{"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),I())},children:[
+/* @__PURE__ */k("span",{className:O?"es-fsel-value":"es-fsel-value is-empty",children:O?O.label:a??c.choose}),
+/* @__PURE__ */k("span",{className:"es-fsel-chev","aria-hidden":"true"})]}),u?/* @__PURE__ */k("ul",{ref:C,id:d,role:"listbox",tabIndex:-1,className:"es-fsel-list","aria-activedescendant":`${d}-${p}`,"aria-labelledby":s,"aria-label":s?void 0:i,onKeyDown:e=>{switch(e.key){case"ArrowDown":return e.preventDefault(),void D(p+1);case"ArrowUp":return e.preventDefault(),void D(p-1);case"Home":return e.preventDefault(),void D(0);case"End":return e.preventDefault(),void D(t.length-1);case"Enter":case" ":return e.preventDefault(),void L(p);case"Escape":return e.preventDefault(),e.stopPropagation(),void S(!0);case"Tab":return void S(!1);default:if(1===e.key.length&&/\S/.test(e.key)){const n=e.key.toLowerCase(),l=t.length;for(let e=1;e<=l;e++){const a=(p+e)%l;if(!t[a]?.disabled&&t[a]?.label.toLowerCase().startsWith(n))return void x(a)}}}},children:t.map((e,n)=>/* @__PURE__ */k("li",{id:`${d}-${n}`,role:"option","aria-selected":n===j,"aria-disabled":e.disabled||void 0,className:`es-fsel-option${n===p?" is-active":""}${n===j?" is-chosen":""}`,onMouseEnter:()=>x(n),onClick:()=>L(n),children:e.label},`${n}-${String(e.value)}`))}):null]})}function I({id:e,value:n,onChange:t,placeholder:l,multiline:a=!1,rows:r=3,readOnly:i=!1,ariaLabel:s,ariaLabelledBy:o}){const c=n??"";return a?/* @__PURE__ */k("textarea",{id:e,className:"es-fin es-fin--area",value:c,rows:r,placeholder:l,readOnly:i,"aria-label":s,"aria-labelledby":o,onChange:e=>t(e.target.value)}):/* @__PURE__ */k("input",{id:e,type:"text",className:"es-fin",value:c,placeholder:l,readOnly:i,"aria-label":s,"aria-labelledby":o,onChange:e=>t(e.target.value)})}function S(e,n,t){const l=e.slice();return l.splice(Math.max(0,Math.min(n,l.length)),0,t),l}function L(e,n,t){const l=e.slice(),[a]=l.splice(n,1);return l.splice(Math.max(0,Math.min(t,l.length)),0,a),l}function D(e,n){return e.filter((e,t)=>t!==n)}function M(e){return null===e||"object"!=typeof e?e:JSON.parse(JSON.stringify(e))}function A(){/* @__PURE__ */
+return g("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[
+/* @__PURE__ */k("circle",{cx:"9",cy:"6",r:"1.6"}),
+/* @__PURE__ */k("circle",{cx:"15",cy:"6",r:"1.6"}),
+/* @__PURE__ */k("circle",{cx:"9",cy:"12",r:"1.6"}),
+/* @__PURE__ */k("circle",{cx:"15",cy:"12",r:"1.6"}),
+/* @__PURE__ */k("circle",{cx:"9",cy:"18",r:"1.6"}),
+/* @__PURE__ */k("circle",{cx:"15",cy:"18",r:"1.6"})]})}var B={parentId:"list",slot:"items"};function F({label:a,icon:r,noun:i,items:s,onChange:d,newItem:u,summary:b,itemName:f,thumb:v,min:y=0,max:N,readOnly:w=!1,open:C,onOpen:O,renderItem:$}){const j=m("fields",o).list,I=m("tree",c),F=i??j.item,P=!w&&("number"!=typeof N||s.length<N),K=!w&&s.length>y,Z=(e,n)=>f?f(e,n):j.itemName({noun:F,n:n+1}),E=h({keyOf:e=>String(e),canDrop:(e,n)=>n.parentId===B.parentId&&n.slot===B.slot,onDrop:(e,n)=>{const t=p({...B,index:e},n);t!==e&&d(L(s,e,t))},onStep:(e,n)=>d(L(s,e,e+n)),canStep:(e,n)=>e+n>=0&&e+n<s.length,readOnly:w}),R=e=>{P&&d(S(s,e,u()))},U=e=>{P&&d(S(s,e+1,M(s[e])))},W=e=>{K&&(d(D(s,e)),null!==C&&O(null))};if(null!==C&&C>=0&&C<s.length){const e=s[C];/* @__PURE__ */
+return g("div",{className:"es-list is-open",children:[
+/* @__PURE__ */g("button",{type:"button",className:"es-list-back",onClick:()=>O(null),children:[
+/* @__PURE__ */k("span",{className:"es-list-back-chev","aria-hidden":"true"}),a]}),
+/* @__PURE__ */g("div",{className:"es-list-title",children:[
+/* @__PURE__ */k("span",{className:"es-list-name",children:Z(e,C)}),
+/* @__PURE__ */k("span",{className:"es-list-count",children:j.position({n:C+1,total:s.length})})]}),
+/* @__PURE__ */k("div",{className:"es-list-item",children:$(e,C,e=>{const n=s.slice();n[C]=e,d(n)})}),w?null:/* @__PURE__ */g("div",{className:"es-list-item-actions",children:[
+/* @__PURE__ */k("button",{type:"button",className:"es-fbtn",disabled:!P,onClick:()=>U(C),children:j.duplicate}),
+/* @__PURE__ */k("button",{type:"button",className:"es-fbtn es-fbtn--danger",disabled:!K,onClick:()=>W(C),children:j.deleteItem({noun:F})})]})]})}/* @__PURE__ */
+return g("div",{className:"es-list",children:[
+/* @__PURE__ */g("div",{className:"es-list-head",children:[
+/* @__PURE__ */g("span",{className:"es-list-label",children:[r?/* @__PURE__ */k("span",{className:"es-field-icon","aria-hidden":"true",children:r}):null,a]}),
+/* @__PURE__ */k("span",{className:"es-list-count",children:s.length})]}),s.length?/* @__PURE__ */g(e,{className:"es-list-tree",rootProps:E.rootProps(),children:[s.map((e,a)=>{const r={...B,index:a},i=E.row({item:a,place:r});/* @__PURE__ */
+return g("div",{className:"es-list-entry",children:[a>0?/* @__PURE__ */k(n,{...E.seam({place:r}),onAdd:P?()=>R(a):void 0,label:j.addHere({noun:F})}):null,
+/* @__PURE__ */k(t,{icon:v?v(e,a):/* @__PURE__ */k(A,{}),name:Z(e,a),preview:b?b(e,a):void 0,draggable:i.draggable,dragging:i.dragging,drop:i.drop,rowProps:i.rowProps,words:I,onSelect:()=>O(a),actions:w?void 0:/* @__PURE__ */g(x,{children:[
+/* @__PURE__ */k(l,{kind:"plain",label:j.duplicateItem({noun:F}),disabled:!P,onClick:()=>U(a),children:/* @__PURE__ */g("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[
+/* @__PURE__ */k("rect",{x:"9",y:"9",width:"11",height:"11",rx:"2"}),
+/* @__PURE__ */k("path",{d:"M5 15V6a2 2 0 0 1 2-2h9"})]})}),
+/* @__PURE__ */k(l,{kind:"delete",label:j.deleteItem({noun:F}),disabled:!K,onClick:()=>W(a),children:/* @__PURE__ */k("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round","aria-hidden":"true",children:/* @__PURE__ */k("path",{d:"M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3"})})})]})})]},a)}),
+/* @__PURE__ */k(n,{...E.seam({place:{...B,index:s.length}})})]}):null,w?null:/* @__PURE__ */k("button",{type:"button",className:"es-list-add",disabled:!P,onClick:()=>R(s.length),children:j.add({noun:F})})]})}var P=(e,n)=>"string"==typeof e.label&&e.label?e.label:n;function K({field:e,name:n,id:t,value:l,onChange:a,readOnly:r,context:i,renderers:o}){const[c,d]=b(!0),u=l&&"object"==typeof l?l:{};/* @__PURE__ */
+return k(s,{id:`${t}-group`,title:P(e,n),open:c,onToggle:d,children:Object.entries(e.objectFields).map(([e,l])=>/* @__PURE__ */k(E,{field:l,name:`${n}.${e}`,id:`${t}-${e}`,value:u[e],onChange:n=>a({...u,[e]:n}),readOnly:r,context:i,renderers:o},e))})}function Z({field:e,name:n,id:t,value:l,onChange:a,readOnly:r,context:i,renderers:s,openItem:o,onOpenItem:c}){const[d,u]=b(null),m=c?o??null:d,h=c??u,p=Array.isArray(l)?l:[],f=e.getItemSummary;/* @__PURE__ */
+return k(F,{label:P(e,n),icon:e.icon,noun:"string"==typeof e.noun?e.noun:void 0,items:p,onChange:a,newItem:()=>M({...e.defaultItemProps??{}}),summary:f?(e,n)=>f(e,n):void 0,min:e.min,max:e.max,readOnly:r,open:m,onOpen:h,renderItem:(l,a,o)=>Object.entries(e.arrayFields).map(([e,c])=>/* @__PURE__ */k(E,{field:c,name:`${n}[${a}].${e}`,id:`${t}-${a}-${e}`,value:l?.[e],onChange:n=>o({...l,[e]:n}),readOnly:r,context:i,renderers:s},e))})}function E(e){const{field:n,name:t,id:l,value:r,onChange:i,readOnly:s,context:o,renderers:c}=e;if(!n||n.marker||!1===n.visible)return null;const d=c?.[n.type];if(d)return d({field:n,name:t,id:l,value:r,onChange:i,readOnly:s});switch(n.type){case"custom":{const e={...o,field:n,name:t,id:l,value:r,onChange:i,readOnly:s};return n.render(e)}case"text":case"textarea":/* @__PURE__ */
+return k(a,{label:P(n,t),htmlFor:l,icon:n.icon,hint:n.hint,children:/* @__PURE__ */k(I,{id:l,value:"string"==typeof r?r:null==r?"":String(r),onChange:i,placeholder:n.placeholder,multiline:"textarea"===n.type,readOnly:s})});case"number":/* @__PURE__ */
+return k(a,{label:P(n,t),htmlFor:l,icon:n.icon,hint:n.hint,children:/* @__PURE__ */k(O,{id:l,value:"number"==typeof r?r:void 0,onChange:i,min:n.min,max:n.max,step:n.step,placeholder:n.placeholder,readOnly:s})});case"select":/* @__PURE__ */
+return k(a,{label:P(n,t),htmlFor:l,icon:n.icon,hint:n.hint,children:/* @__PURE__ */k(j,{id:l,value:r,options:n.options,onChange:i,readOnly:s})});case"radio":/* @__PURE__ */
+return k(a,{label:P(n,t),icon:n.icon,hint:n.hint,children:/* @__PURE__ */k(u,{ariaLabel:P(n,t),value:r,options:n.options.map(e=>({id:e.value,label:e.label,icon:e.icon,disabled:e.disabled||s})),onChange:e=>{s||i(e)}})});case"object":/* @__PURE__ */
+return k(K,{...e,field:n});case"array":/* @__PURE__ */
+return k(Z,{...e,field:n});case"slot":return null}}var R=e=>r.includes(e);function U(e){let n=r[0];const t=[],l=/* @__PURE__ */new Set;for(const[a,r]of Object.entries(e))r&&(R(r.bucket)&&(n=r.bucket),r.marker||!1===r.visible||(t.push({name:a,field:r,bucket:n}),"slot"!==r.type&&l.add(n)));return{rows:t,buckets:r.filter(e=>l.has(e))}}function W(e){return new Map(U(e).rows.map(e=>[e.name,e.bucket]))}function H({fields:e,values:n,onChange:t,readOnly:l=!1,context:a,tab:r,onTab:s,tabs:o=!0,tabIcons:c,renderers:u,idPrefix:h,ariaLabel:p,children:f}){const y=m("panel",d),x=v(),N=h??`es-insp${x.replace(/:/g,"")}`,w=U(e),[C,O]=b(void 0),$=r??C,j=$&&w.buckets.includes($)?$:w.buckets[0],[I,S]=b(null),L=I&&I.panel===N&&w.rows.some(e=>e.name===I.name)?I:null,D=o&&w.buckets.length>1&&!L,M=`${N}-rows`,A=e=>`${N}-tab-${e.toLowerCase()}`;/* @__PURE__ */
+return g("div",{className:"es-insp",children:[D?/* @__PURE__ */k("div",{className:"es-insp-tabs",children:/* @__PURE__ */k(i,{ariaLabel:p??y.settings,activeId:j,onSelect:e=>{const n=e;void 0===r&&O(n),s?.(n)},items:w.buckets.map(e=>({id:e,label:y.buckets[e],icon:c?.[e],htmlId:A(e),panelId:M}))})}):null,
+/* @__PURE__ */g("div",{className:"es-insp-rows",id:M,role:D?"tabpanel":void 0,"aria-labelledby":D&&j?A(j):void 0,children:[w.rows.map(({name:e,field:r,bucket:i})=>/* @__PURE__ */k("div",{className:"es-insp-row","data-field":e,"data-bucket":i,hidden:!!(L?L.name!==e:D&&i!==j)||void 0,children:/* @__PURE__ */k(E,{field:r,name:e,id:`${N}-${e}`,value:n[e],onChange:n=>t(e,n),readOnly:l,context:a,renderers:u,openItem:L&&L.name===e?L.index:null,onOpenItem:n=>S(null===n?null:{panel:N,name:e,index:n})})},e)),L?null:f]})]})}export{O as FieldNumber,j as FieldSelect,I as FieldText,H as Inspector,E as InspectorField,F as ListField,W as bucketsOf,N as clampNumber,M as copyItem,S as insertAt,P as labelOf,L as moveTo,$ as optionFor,w as parseTyped,U as planFields,D as removeAt};

package/dist/gold/gold.css

@@ -0,0 +1,196 @@
+/*
+ * efficient-easel — gold-layer styles (card 66088).
+ *
+ * The values mirror `tokens.ts` one-for-one and are declared ON `.es-gold`, not
+ * on `:root`, so importing this sheet themes only the boxes and never leaks a
+ * variable into the page being edited.
+ *
+ * THE ONE RULE THIS FILE EXISTS TO ENFORCE: the layer and the box must resolve
+ * to the SAME type metrics. Everything that can move a glyph — family, size,
+ * weight, style, line-height, letter-spacing, word-spacing, wrapping, padding —
+ * is inherited by both from whatever the host renders them inside, and is set
+ * identically on both below. A property added to one of them and not the other
+ * pulls the two surfaces apart, and the caret stops sitting under the character
+ * it is next to. There is no third place to change it.
+ *
+ * Import once from a client entry / global stylesheet:
+ *     import 'efficient-easel/gold.css';
+ */
+
+.es-gold {
+  /* — tokens (see tokens.ts / goldCssVars) — */
+  --es-gold-accent: var(--gold, #c9a461);
+  --es-gold-quiet: var(--es-muted, #6b7280);
+  --es-gold-caret: var(--es-text, #111827);
+  --es-gold-placeholder: var(--es-field-placeholder, #9ca3af);
+  --es-gold-delim-opacity: 0.35;
+  --es-gold-delim-resting-opacity: 0.25;
+  --es-gold-bold-shadow: 0 0 0.4px currentColor;
+  --es-gold-italic-decoration: underline dotted;
+  --es-gold-strike-decoration: line-through;
+  /**
+   * The field's inner inset. ZERO here and set by the host — but set on the
+   * THREE SURFACES below, never on this wrapper, and the difference is a real
+   * caret bug (2026-09-26). `.es-gold-input` is `position:absolute; inset:0`,
+   * which resolves to this element's PADDING box, while the layer is in flow
+   * and starts at its CONTENT box. Padding this element therefore moves the
+   * glyphs and leaves the caret behind. A host that wants an inset sets this
+   * variable; it must not pad `.es-gold`.
+   */
+  --es-gold-pad: 0;
+
+  position: relative;
+  display: block;
+}
+
+/* The shared type contract. Read the note at the top before touching it. */
+.es-gold .es-gold-layer,
+.es-gold .es-gold-input,
+.es-gold .es-gold-placeholder {
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-align: inherit;
+  text-indent: inherit;
+  text-transform: inherit;
+  tab-size: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: normal;
+  margin: 0;
+  /* ON ALL THREE, FROM ONE VALUE — see `--es-gold-pad`. This is the same rule
+     as the properties above it: anything that can move a glyph is set
+     identically on the layer and the box, or the caret stops sitting under
+     the character it is next to. */
+  padding: var(--es-gold-pad);
+  border: 0;
+}
+
+/*
+ * The layer is the element IN FLOW: it holds the same characters as the box, so
+ * it wraps to the same height, so the box grows with the text and nothing has to
+ * be measured.
+ */
+.es-gold .es-gold-layer {
+  position: relative;
+  color: inherit;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+/*
+ * A zero-width space, drawn by CSS so it is NOT part of `textContent` and cannot
+ * break the character-for-character promise. It buys two things: an empty layer
+ * still has a line box (so an empty field is one line tall, not zero), and a
+ * value ending in a newline still shows that last, empty line — which a trailing
+ * "\n" in a text node does not.
+ */
+.es-gold .es-gold-layer::after {
+  content: '\200b';
+}
+
+.es-gold .es-gold-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: transparent;
+  /* The text is invisible; the layer underneath is what you read. */
+  color: transparent;
+  caret-color: var(--es-gold-caret);
+  resize: none;
+  overflow: hidden;
+  outline: none;
+}
+
+/* The hint is painted by the sibling below, in the layer's own metrics. Drawing
+ * it here as well would double it. */
+.es-gold .es-gold-input::placeholder {
+  color: transparent;
+}
+
+.es-gold .es-gold-placeholder {
+  position: absolute;
+  inset: 0;
+  color: var(--es-gold-placeholder);
+  pointer-events: none;
+}
+
+/* — the marks — */
+
+/*
+ * A whisper at rest, louder while you are IN the box (cards 8802.h, 8807).
+ *
+ * A merchant who is not typing should not READ `**` and `==` sitting inside
+ * their own page text — it looks like a bug. 8802.h took them to 0 for that,
+ * which worked, and left a second problem: the characters keep their full width
+ * either way (see below), so at 0 the space stayed and the explanation went. A
+ * short, heavily marked string spends about a quarter of its line on blanks
+ * nothing accounts for. At 0 that gap reads as a rendering bug; at a whisper it
+ * reads as punctuation. While the caret is in here the marks are what is being
+ * aimed at, so `:focus-within` brings them up to the louder dim.
+ *
+ * FADED, never removed, and done here rather than in React for the same reason.
+ * The characters stay in the layer at their full width: dropping a `**` would
+ * shift every following glyph two columns off its twin in the transparent box on
+ * top, and hiding them for real needs a second text engine. Opacity moves
+ * nothing, which is the only reason this is allowed at all — and it needs no
+ * state, so focusing the box does not re-render it for a change that is paint.
+ */
+.es-gold .es-gold-delim {
+  opacity: var(--es-gold-delim-resting-opacity);
+}
+
+.es-gold:focus-within .es-gold-delim {
+  opacity: var(--es-gold-delim-opacity);
+}
+
+.es-gold .es-gold-accent {
+  color: var(--es-gold-accent);
+  font-style: normal;
+}
+
+/* Quiet is SMALLER on the page; here it is only softer, for the same reason
+ * bold is not heavier — a smaller glyph changes its advance. */
+.es-gold .es-gold-quiet {
+  color: var(--es-gold-quiet);
+}
+
+/* Weight and slant are NOT applied here — see tokens.ts. Both would change a
+ * glyph's advance, and the transparent box on top would wrap somewhere else. */
+.es-gold .es-gold-bold {
+  /* `<strong>`'s own bold, undone — the shadow is what draws it instead. */
+  font-weight: inherit;
+  text-shadow: var(--es-gold-bold-shadow);
+}
+
+.es-gold .es-gold-italic {
+  font-style: normal;
+  text-decoration: var(--es-gold-italic-decoration);
+}
+
+.es-gold .es-gold-strike {
+  text-decoration: var(--es-gold-strike-decoration);
+}
+
+/*
+ * Read-only (a sent campaign, a locked page). The box cannot be typed in and
+ * says so itself; the LAYER keeps painting, because a merchant reading a sent
+ * campaign should see their own formatting rather than raw delimiters.
+ *
+ * The caret is taken away rather than dimmed — there is nothing to aim.
+ */
+.es-gold.es-gold-is-off {
+  --es-gold-caret: transparent;
+}
+
+.es-gold.es-gold-is-off .es-gold-layer,
+.es-gold.es-gold-is-off .es-gold-placeholder {
+  opacity: 0.6;
+}
+
+.es-gold.es-gold-is-off .es-gold-input {
+  cursor: default;
+}