efficient-easel 0.0.0 → 0.96.0

package/dist/chunk-ZAOM6PFH.js

@@ -0,0 +1 @@
+var e={colour:{notSet:"Not set",swatch:({label:e,shown:a})=>`${e}: ${a}`,dialog:({label:e})=>`${e} colour`,theme:"Theme colours",themeSwatchTitle:({name:e,hex:a})=>`${e} · ${a}`,themeSwatch:({name:e,hex:a})=>`${e} ${a}`,square:"Saturation and brightness",squareValue:({saturation:e,brightness:a})=>`Saturation ${e}, brightness ${a}`,hue:"Hue",hex:({label:e})=>`${e} hex code`},image:{choosing:"Choosing…",failed:"The library could not be opened. Try again.",chooseImage:"Choose an image",chooseVideo:"Choose a video",empty:({label:e,kind:a,placeholder:o})=>`${e}: ${o??"choose "+("video"===a?"a video":"an image")}`,hint:"From the library, or upload one",named:({label:e,name:a})=>`${e}: ${a}`,replace:"Replace",replaceNamed:({label:e})=>`Replace ${e.toLowerCase()}`,remove:"Remove",removeNamed:({label:e})=>`Remove ${e.toLowerCase()}`}};export{e as DEFAULT_PICK_WORDS};

package/dist/chunk-ZNCEOSXO.js

@@ -0,0 +1 @@
+var t=/* @__PURE__ */new Set(["button","checkbox","color","file","hidden","image","radio","range","reset","submit"]);function e(e){const n=e;if(!n||"string"!=typeof n.tagName)return!1;const o=n.tagName.toUpperCase();if("TEXTAREA"===o||"SELECT"===o)return!0;if("INPUT"===o)return!t.has(String(n.type??"text").toLowerCase());if(n.isContentEditable)return!0;const i=n.closest?.("[contenteditable]");return!(!i||"false"===i.getAttribute("contenteditable"))||null!=n.closest?.('[role="textbox"]')}var n="data-puck-component";function o(t,e=n){const o=t;return o&&"function"==typeof o.closest?o.closest(`[${e}]`)?.getAttribute(e)??null:null}function i(t){const e=t.offsetWidth;if(!e)return 1;const n=t.getBoundingClientRect().width;return n>0?n/e:1}function r(t,e,n){const o=t.getBoundingClientRect(),r=n?.getBoundingClientRect()??{left:0,top:0},c=i(t);return{left:o.left-r.left+e.left*c,top:o.top-r.top+e.top*c,width:e.width*c,height:e.height*c}}function c(t){const e=t.offsetWidth;if(!e)return 1;const n=t.getBoundingClientRect().width;return n>0?n/e:1}function u(t,e,n){const o=r(t,e,n),i=c(n);return{left:o.left/i,top:o.top/i,width:o.width/i,height:o.height/i}}function l(t,e,n){const o=t.getBoundingClientRect(),i=c(t);return{x:(e-o.left)/i,y:(n-o.top)/i}}function s(t,e,n,o){const{left:i,top:c}=r(t,{left:e,top:n,width:0,height:0},o);return{x:i,y:c}}function f({available:t,width:e,maxScale:n=1}){const o=Math.max(0,t);if(!e||e<=0)return{width:o,scale:1,shownWidth:o};const i=o>0?Math.min(o/e,n):1;return{width:e,scale:i,shownWidth:e*i}}var a="data-es-canvas-style",h=/* @__PURE__ */new WeakMap;function d(t,e){e?h.set(t,e):h.delete(t)}function g(t,e,n){const o=t.head??t.documentElement;let i=w(t,e);if(!i){i=t.createElement("style"),i.setAttribute(a,e);const n=h.get(t);n&&i.setAttribute("nonce",n),o.appendChild(i)}return i.textContent!==n&&(i.textContent=n),i}function p(t,e){w(t,e)?.remove()}function w(t,e){for(const n of Array.from(t.querySelectorAll(`style[${a}]`)))if(n.getAttribute(a)===e)return n;return null}export{n as BLOCK_ATTRIBUTE,l as clientPointToLayer,c as elementScale,f as fitCanvas,s as framePointToHost,r as frameRectToHost,u as frameRectToLayer,i as frameScale,e as isTypingTarget,o as nodeIdAt,p as removeCanvasStyle,d as setCanvasNonce,g as upsertCanvasStyle};

package/dist/copy/copy.css

@@ -0,0 +1,282 @@
+/*
+ * efficient-easel — the copy control's own chrome.
+ *
+ * Only the BAR and the frame are dressed here. The box inside it is
+ * `efficient-easel/gold.css` and the direction strip is the panel grammar's own
+ * chip (`efficient-easel/panel.css`) — this sheet must never restate either, or
+ * there are two places a chip can change.
+ *
+ * Declared on `.es-copy`, never on `:root`, for the reason gold.css gives: a
+ * sheet imported by an editor must not leak a variable into the page being
+ * edited.
+ *
+ * Import once from a client entry / global stylesheet:
+ *     import 'efficient-easel/copy.css';
+ */
+
+.es-copy {
+  --es-copy-gap: 4px;
+  /* efficient-shell's IconButton at its default size, md (design v5, 0.94.0). */
+  --es-copy-mark-size: 32px;
+  --es-copy-mark-ink: var(--es-text-muted, #6b7280);
+  --es-copy-mark-ink-hover: var(--es-text, #111827);
+  --es-copy-mark-hover: var(--es-hover, rgba(0, 0, 0, 0.06));
+  --es-copy-rule: var(--es-border, #e5e7eb);
+  --es-copy-field-border: var(--es-field-border, #d1d5db);
+  --es-copy-field-bg: var(--es-field-bg, #ffffff);
+  /** The field's inner inset. On the SURFACES, never on the box — see
+   *  `.es-copy-box` below for the caret bug that rule exists to stop. */
+  --es-copy-field-pad: 4px 6px;
+  --es-copy-field-ring: var(--es-accent, #2563eb);
+  --es-copy-radius: 4px;
+
+  display: block;
+  /* A container, so a host can query the box's own width. Never on
+     `.es-copy-bar`: that would contain the very box whose children measure. */
+  container-type: inline-size;
+}
+
+/* — the bar — */
+
+.es-copy-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: var(--es-copy-gap);
+}
+
+/*
+ * The direction sits on ITS OWN LINE, under the marks (0.94.0, design v5:
+ * "下面一行是对齐"). Until 0.93 it sat at the far end of the marks' row; seven
+ * 32px buttons leave no room beside them at any panel width, and a strip
+ * squeezed into the remainder is a strip drawn broken. The marks act on the
+ * SELECTION and this on the whole text, so a line of its own also says they
+ * are different kinds of thing.
+ *
+ * ⚠️ THE FLEX VALUES ARE NOT TASTE. THE STRIP IS 0px WIDE WITHOUT THEM.
+ *
+ * `.es-segs-fit` is `container-type: inline-size` + `flex: none` (panel.css).
+ * In a flex parent `flex: none` means "size to your own content", and size
+ * containment means there IS no content width to size to. Both declarations
+ * are right where they were written and they collide in any flex slot — which
+ * this is. `panel.css` carries the full account under card 66516 and the same
+ * exception for `.es-field-ctl`; it is not restated here, only obeyed.
+ *
+ * So the wrapper takes a basis from the bar, and hands one to the fit wrapper
+ * inside it. `min-width: 0` on both because a flex item's automatic minimum is
+ * its content size, which containment makes meaningless.
+ */
+.es-copy-bar-end {
+  display: flex;
+  align-items: center;
+  flex: 1 1 100%;
+  min-width: 0;
+}
+
+/* Not the whole line (design v14: the Segmented "does not fill a row"). A
+   FIXED basis, never `auto`: this wrapper is a size container, so `auto` is
+   its content width, which containment makes 0. */
+.es-copy-bar-end > .es-segs-fit {
+  flex: 0 1 240px;
+  min-width: 0;
+}
+
+.es-copy-bar-split {
+  width: 1px;
+  align-self: stretch;
+  margin: 2px 4px;
+  background: var(--es-copy-rule);
+}
+
+.es-copy-mark {
+  height: var(--es-copy-mark-size);
+  min-width: var(--es-copy-mark-size);
+  padding: 0 5px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--es-copy-mark-ink);
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.es-copy-mark:hover:not(:disabled) {
+  background: var(--es-copy-mark-hover);
+  color: var(--es-copy-mark-ink-hover);
+}
+
+.es-copy-mark:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* A button carrying a drawing — the set's glyph (0.94.0) or the host's own —
+   centres it and gets none of the letter styling below: an SVG must not be
+   emboldened or slanted by us. */
+.es-copy-mark.has-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The glyph looks like what it does. Safe here and NOT in the gold layer: a
+   button is not sitting over a caret, so a wider glyph moves nothing. */
+/* PRESSED: the selection already wears this mark, so a press takes it off —
+   or, for the link button, its window is open. efficient-shell has no pressed
+   IconButton, so the design (v5) takes its PopupMenu's selected item:
+   bg-blue-50, text-blue-700. */
+/* `:hover` too: the hover rule above is (0,3,0) and outranks a bare
+   `.is-active`, so a pressed button turned grey under the very pointer that
+   pressed it (seen in the 0.94.0 click-through). */
+.es-copy-mark.is-active,
+.es-copy-mark.is-active:hover:not(:disabled) {
+  background: var(--es-accent-tint, #eff6ff);
+  color: var(--es-accent-text, #1d4ed8);
+}
+
+.es-copy-mark.is-bold { font-weight: 700; }
+.es-copy-mark.is-italic { font-style: italic; }
+.es-copy-mark.is-strike { text-decoration: line-through; }
+
+/* — the frame around the box — */
+
+/*
+ * The box is `GoldTextInput`, which draws no border of its own: it inherits its
+ * type from whatever it is rendered inside, and a border here is what makes it
+ * read as a field. The focus ring is on the WRAPPER, because the textarea
+ * itself is transparent and its outline is suppressed by gold.css.
+ */
+/*
+ * ⚠️ THE FIELD'S INSET IS HANDED TO GOLD, NOT APPLIED HERE — and that is the
+ * whole of a caret bug reported from production on 2026-09-26: "the caret is
+ * not at the right position".
+ *
+ * `.es-gold-input` is `position: absolute; inset: 0`, and for an absolutely
+ * positioned child `inset: 0` resolves to the containing block's PADDING box.
+ * The layer underneath is IN FLOW, so it starts at the CONTENT box. So
+ * `padding` here — on the WRAPPER — moved the painted glyphs and left the
+ * caret behind: measured in the campaign designer, the input sat at x=1222
+ * w=232 and the layer at x=1228 w=220, every character 6px right of its caret
+ * and 4px down.
+ *
+ * The inset is a GOLD metric, so gold.css declares it on all three surfaces
+ * at once (`--es-gold-pad`) — the rule it already states about glyph-moving
+ * properties. This sheet only says what the value is, which is the boundary
+ * this file's header sets: the frame is dressed here, the box never is.
+ */
+/*
+ * ⚠️ `.es-gold` TOO, AND THAT IS NOT DECORATION. gold.css defaults
+ * `--es-gold-pad: 0` on `.es-gold`, and the element carries BOTH classes —
+ * so at equal specificity (0,1,0 each) the winner is whichever sheet is
+ * loaded last. In the campaign designer gold.css comes second, the default
+ * won, and 0.65.0 shipped the field with NO inner inset: the text sat against
+ * its own border. Measured live, `--es-gold-pad` computed to `0` and the
+ * surfaces had `padding: 0px`.
+ *
+ * Two classes is (0,2,0) and beats the default whatever the order, which is
+ * the only version of this that does not depend on how a host bundles CSS.
+ */
+.es-gold.es-copy-box {
+  --es-gold-pad: var(--es-copy-field-pad);
+}
+
+.es-copy-box {
+
+  border: 1px solid var(--es-copy-field-border);
+  border-radius: var(--es-copy-radius);
+  background: var(--es-copy-field-bg);
+  font-size: 12px;
+}
+
+.es-copy-box:focus-within {
+  border-color: var(--es-copy-field-ring);
+}
+
+.es-copy-box.es-gold-is-off {
+  background: var(--es-field-bg-off, #f9fafb);
+}
+
+/* — the link button's window (blueprint 4.9) — */
+
+/*
+ * Under the box, in its flow: a settings panel scrolls, and a floating window
+ * is clipped by the edge it scrolls under (the colour window's rule). Drawn on
+ * the panel's own raised surface, so it reads as part of this field.
+ */
+.es-copy-link {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: var(--es-copy-gap);
+  padding: 12px;
+  border: 1px solid var(--es-copy-rule);
+  border-radius: var(--es-row-radius, 8px);
+  background: var(--es-raised, var(--es-copy-field-bg));
+  box-shadow: var(--es-raised-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
+}
+
+.es-copy-link-label {
+  font-size: 11px;
+  color: var(--es-copy-mark-ink);
+}
+
+.es-copy-link-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--es-copy-field-border);
+  border-radius: var(--es-field-radius, 6px);
+  background: var(--es-copy-field-bg);
+  color: var(--es-text, #111827);
+  font: inherit;
+  font-size: 12px;
+}
+
+.es-copy-link-input:focus {
+  outline: none;
+  border-color: var(--es-copy-field-ring);
+}
+
+.es-copy-link-input[aria-invalid='true'] {
+  border-color: var(--es-danger, #dc2626);
+}
+
+.es-copy-link-why {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--es-danger, #dc2626);
+}
+
+.es-copy-link-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.es-copy-link-btn {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--es-btn-border, var(--es-copy-field-border));
+  border-radius: var(--es-field-radius, 6px);
+  background: var(--es-raised, #fff);
+  color: var(--es-btn-text, var(--es-text, #111827));
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.es-copy-link-btn.is-primary {
+  border-color: var(--es-accent, #2563eb);
+  background: var(--es-accent, #2563eb);
+  color: var(--es-on-accent, #fff);
+}
+
+.es-copy-link-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}

package/dist/copy/index.d.ts

@@ -0,0 +1,336 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { MarkStyle, MarkupTool, WrapResult, InlineRule } from '../markup/index.js';
+import { a as CopyAlign } from '../words-DfxEp_RH.js';
+export { b as COPY_ALIGNS, c as COPY_ALIGN_FIT, d as COPY_ALIGN_GLYPHS, e as COPY_ALIGN_LABELS, C as CopyWords, f as copyAlignOptions } from '../words-DfxEp_RH.js';
+
+/** `'b'` → `Meta+B`, `'shift+x'` → `Meta+Shift+X` — the ARIA spelling of a
+ *  shortcut. Meta is what the tooltips promise (⌘); Ctrl works too. */
+declare function ariaShortcut(shortcut: string | undefined): string | undefined;
+interface MarkBarProps {
+    /**
+     * Which buttons to show.
+     *
+     * TWO FORMS, and the second is not a convenience — it is the only way a
+     * product with marks of its OWN can use this bar at all.
+     *
+     *   `MarkStyle[]`   resolved against the shared grammar's `MARKUP_TOOLS`, in
+     *                   that order. What the campaign designer passes.
+     *   `MarkupTool[]`  used verbatim. What `efficient-shop` passes.
+     *
+     * ⚠️ WHY VERBATIM DESCRIPTORS HAD TO EXIST. The storefront offered SEVEN
+     * marks: the grammar's four, plus its three word styles (`@@`, `++`, `^^`),
+     * which then lived only in the shop because the grammar was
+     * `efficient-shell/markup`. Resolving through `markupTools` can only ever
+     * return marks the grammar knows, so it silently DROPPED all three — the bar
+     * rendered four buttons where the panel had seven, and nothing failed to
+     * compile. Since 2026-09-28 the grammar is ours and holds Quiet (`^^`) and
+     * reads `@@` / `++` as Emphasis and Strong, but a host may still hand in
+     * marks of its own.
+     *
+     * So a host that has its own marks builds its own descriptors (the shop
+     * already did: `shopMarkupTools()`) and hands them over whole. The bar's job
+     * is the ROW — the buttons, the focus guard, the naming, the group — and that
+     * job does not depend on who defined the mark.
+     */
+    tools: readonly MarkStyle[] | readonly MarkupTool[];
+    onApply: (style: MarkStyle) => void;
+    disabled?: boolean;
+    /** Buttons that write no mark, after a divider — see `CopyBoxProps.actions`. */
+    actions?: ReactNode;
+    /** The alignment strip, already built by the control. */
+    align?: ReactNode;
+    /**
+     * WHAT A BUTTON IS DRAWN AS, per style. Default: the grammar's own letter —
+     * `B`, `I`, `S`, `◆` — which is what the campaign designer has always shown.
+     *
+     * ⚠️ THIS IS NOT A THEME KNOB, AND IT IS NOT OPTIONAL POLISH. This package
+     * already says that WHICH buttons and WHAT they write are the grammar's, while
+     * how they LOOK is the host's, "because this bar has to belong to the
+     * storefront inspector's chrome and the campaign designer's bar has to belong
+     * to the portal's". Colour was delegated by tokens on day one; the DRAWING was
+     * not, and a letter is a drawing. `efficient-shop` renders each mark as a 14px
+     * stroked SVG at the weight of its other inspector glyphs, on the stated
+     * ground that the row should read "as part of the field rather than as
+     * pasted-in icons" — so without this it could not adopt the bar without losing
+     * that, which is a regression dressed as a refactor.
+     *
+     * The set now HAS a glyph for every mark (0.94.0: bold, italic, strike,
+     * emphasis, quiet, clear-marks — the owner's call, made 2026-10-02), and they
+     * are the default. This map stays so a host can still draw its own.
+     *
+     * A style the map does not name falls back to the icon set's glyph for it
+     * (`SET_GLYPH`, 0.94.0, when the owner added the mark glyphs to the set) and
+     * then to the letter, so a host may override one button and leave the rest.
+     */
+    glyphs?: Partial<Record<MarkStyle, ReactNode>>;
+    /**
+     * What the group is CALLED. Defaults to "Formatting" (`EditorStrings.copy.formatting`).
+     *
+     * A bar bound to one box needs nothing more. A bar SHARED by several rows has
+     * to say which row it is aimed at, because the visible cue — the marked row —
+     * is not readable. `efficient-shop` has that case today.
+     */
+    ariaLabel?: string;
+    /**
+     * The marks the selection already wears — a button drawn pressed is one
+     * whose press takes the mark OFF (`markedAt`, the same test `applyMark`
+     * unwraps by), so the two cannot disagree. A style not named is not pressed;
+     * with no map at all no button says either way (`aria-pressed` is left off),
+     * which is what every host that does not track the selection still gets.
+     */
+    pressed?: Partial<Record<MarkStyle, boolean>>;
+    /** The style whose own window is open — the link button while its "Link
+     *  to" window is showing. Drawn pressed, and named as expanded. */
+    open?: MarkStyle | null;
+}
+declare function MarkBar({ tools, onApply, disabled, actions, align, glyphs, ariaLabel, pressed, open, }: MarkBarProps): react.JSX.Element | null;
+
+/**
+ * Just enough of a text control to read a selection off it. Narrowed to these
+ * two fields so a caller may hand in a plain object in a test.
+ *
+ * A `<textarea>` OR an `<input>` (blueprint 4.9). An input's selection is
+ * `number | null` where a textarea's is `number`, so the type had to be the
+ * wider of the two: typed to the textarea, every one-line row in the website
+ * editor needed a cast or a copy of this file, and the shop kept a copy.
+ */
+type SelectionSource = {
+    readonly selectionStart: number | null;
+    readonly selectionEnd: number | null;
+} | null;
+/**
+ * How a mark is written. Defaults to the shared grammar's own `applyMark`.
+ *
+ * INJECTED RATHER THAN ASSUMED, because the storefront legitimately writes marks
+ * the shell's grammar does not know: its three word styles (`@@`, `++`, `^^`)
+ * go through `applyShopMark`, which delegates here for everything else. Making
+ * the writer a parameter is what lets one control serve both products without
+ * this package learning a vocabulary that belongs to one of them.
+ */
+type MarkWriter = (text: string, start: number, end: number, style: MarkStyle) => WrapResult;
+/** Apply a style to whatever the field has selected. */
+declare function markSelection(value: string, style: MarkStyle, el: SelectionSource, write?: MarkWriter): WrapResult;
+/**
+ * Put a literal string where the caret is.
+ *
+ * The caret lands AFTER the inserted text and selects nothing, because the thing
+ * inserted is finished — a merge tag is not a placeholder to type over, and
+ * leaving it selected invites the next keystroke to delete it.
+ */
+declare function insertSelection(value: string, text: string, el: SelectionSource): WrapResult;
+
+/**
+ * A handle on the box's textarea.
+ *
+ * DECLARED STRUCTURALLY rather than as React's `RefObject`, and the reason is
+ * the package's `react >=18` peer range. React 18 types read `RefObject<T>` as
+ * `{ readonly current: T | null }`, React 19's `useRef<T>(null)` produces
+ * `RefObject<T | null>`, and the interface is covariant in `T` — so the two
+ * spellings of the same object do not assign to each other, and a package that
+ * has to compile against both cannot name either one. The shape is the whole
+ * contract; naming it here costs one line and no version branch.
+ */
+type TextAreaHandle = {
+    current: HTMLTextAreaElement | null;
+};
+/**
+ * A handle on ANY text control the caret machinery can drive — a `<textarea>`
+ * or a one-line `<input>` (blueprint 4.9). `useCaretEdit` takes this, so a host
+ * with its own input rows (the website editor's list lines) uses the same
+ * twelve lines instead of a copy of them. A {@link TextAreaHandle} is one.
+ */
+type TextBoxHandle = {
+    current: HTMLInputElement | HTMLTextAreaElement | null;
+};
+/**
+ * What a host may put UNDER the box, and what it needs to draw it.
+ *
+ * A render prop rather than a plain node, for one reason that is not style: the
+ * campaign's merge-tag chips have to insert at the caret, and only this control
+ * knows where the caret is. Handing the host `insert` is what lets the chips
+ * live in the app — where the tag list, the audience call and the product's
+ * vocabulary belong — while the caret machinery stays here, written once.
+ *
+ * `focused` is passed for the same reason the portal tracked it locally: the row
+ * appears while the merchant is typing in THIS box and not in its neighbour.
+ */
+interface CopyBoxFooter {
+    focused: boolean;
+    /** Put a literal string where the caret is, replacing any selection. */
+    insert: (text: string) => void;
+}
+/**
+ * The alignment strip, when the host has an alignment to offer.
+ *
+ * GENERIC IN THE DIRECTIONS IT ALLOWS, so `onChange` RECEIVES only what the
+ * host said it could honour. Before this it received the whole union, and a
+ * host allowing three directions had to narrow a `justify` it had just
+ * declared impossible before storing. Raised by the strip's first consumer,
+ * which did write that narrowing; the next one might not.
+ *
+ * `A` is inferred from `allow`, so nothing has to be spelled at the call site.
+ *
+ * ⚠️ IT DOES NOT FORBID A WIDER HANDLER, and cannot: a function taking the
+ * whole `CopyAlign` is assignable where one taking three is wanted, because
+ * parameters are contravariant — and that direction is SAFE, since only the
+ * three can ever arrive. What this buys is that the narrow handler now
+ * type-checks without a cast, which is what makes writing the safe one the
+ * path of least resistance.
+ */
+interface CopyBoxAlign<A extends CopyAlign = CopyAlign> {
+    value: A | '';
+    onChange: (next: A) => void;
+    /**
+     * Which directions this host can honour. Required and with no default: a
+     * renderer that cannot justify must not be given a Justify button because a
+     * default handed it one, which is the shape of mistake this whole card exists
+     * to stop. It is also what `A` above is inferred from.
+     */
+    allow: readonly A[];
+    /** The strip exists but cannot apply right now. Distinct from the whole
+     *  control being read-only. */
+    disabled?: boolean;
+}
+interface CopyBoxProps {
+    /** The authored string, delimiters and all. The single source of truth. */
+    value: string;
+    /** Every keystroke, and every button press. */
+    onChange: (value: string) => void;
+    /** The edit is finished and may be written: on blur, and on Enter when
+     *  {@link multiline} is false. */
+    onCommit?: (value: string) => void;
+    /** Escape. The argument is the value the box was given when it gained focus;
+     *  the HOST puts it back, because the host owns the string. */
+    onCancel?: (restored: string) => void;
+    /** What Enter means — NOT how the text wraps. Both modes soft-wrap. */
+    multiline?: boolean;
+    placeholder?: string;
+    /** Accessible name for the box. */
+    ariaLabel?: string;
+    className?: string;
+    /** Nothing may be typed or pressed. */
+    readOnly?: boolean;
+    /**
+     * The grammar's rule set — `CAMPAIGN_MARKUP` in the designer,
+     * `STOREFRONT_MARKUP` in the shop, both from `efficient-easel/markup`. It
+     * decides what the LAYER paints; {@link tools} decides what the BAR offers,
+     * and a host that lets those two disagree gets a button whose mark draws as
+     * plain text.
+     */
+    rules?: readonly InlineRule[];
+    /**
+     * Which mark buttons to show — styles resolved against the shared grammar, or
+     * the host's own descriptors used verbatim. See `MarkBarProps.tools`. Empty
+     * draws no bar.
+     */
+    tools?: MarkBarProps['tools'];
+    /**
+     * How a mark is written. Defaults to the shared grammar's `applyMark`; the
+     * storefront passes its own so its three word styles reach the same bar.
+     */
+    writeMark?: MarkWriter;
+    /**
+     * Buttons that are NOT marks, drawn after a divider at the end of the bar.
+     *
+     * The storefront's "Clear formatting" is the one that exists: it writes no
+     * mark at all, so it is not in the grammar's tool list and must not be added
+     * to it. Drawing it here keeps `MARKUP_TOOLS` meaning "what a mark MEANS".
+     */
+    actions?: ReactNode;
+    /** The alignment strip. Omitted = no strip. */
+    align?: CopyBoxAlign<CopyAlign>;
+    /** What each mark button is DRAWN as — see `MarkBarProps.glyphs`. Default is
+     *  the grammar's own letter. */
+    glyphs?: MarkBarProps['glyphs'];
+    /** What the formatting group is CALLED — see `MarkBarProps.ariaLabel`. */
+    barLabel?: string;
+    /** What goes under the box — see {@link CopyBoxFooter}. */
+    renderFooter?: (ctx: CopyBoxFooter) => ReactNode;
+    /**
+     * When the bar is drawn. `'always'` (the default) keeps it over the box at
+     * rest. `'focus'` draws it only while this box is being typed in — the text
+     * box design for 4.9: a column of text settings at rest is a column of
+     * words, not a column of toolbars.
+     */
+    barShows?: 'always' | 'focus';
+    /** A handle on the textarea, for a host that needs one — and the SAME object
+     *  the control uses, so there is never a second ref to reconcile. A plain prop
+     *  rather than `ref`, for the reason `GoldLayer.layerRef` gives. */
+    inputRef?: TextAreaHandle;
+}
+
+declare function CopyBox({ value, onChange, onCommit, onCancel, multiline, placeholder, ariaLabel, className, readOnly, rules, tools, writeMark, actions, align, glyphs, barLabel, renderFooter, inputRef, barShows, }: CopyBoxProps): react.JSX.Element;
+
+interface PasteData {
+    /** The clipboard's `text/html`, when there is one. */
+    html?: string;
+    /** The clipboard's `text/plain`. */
+    text?: string;
+}
+interface PasteOptions {
+    /** The document the box lives in — the HTML is read in an inert template
+     *  of it. */
+    doc: Document;
+    /** A one-line box joins every line with a space. */
+    multiline: boolean;
+    /** The host's rules, which the result must read back under. */
+    rules?: readonly InlineRule[];
+}
+/** Turn a clipboard's contents into the grammar, filtered. */
+declare function pasteToMarkup(data: PasteData, opts: PasteOptions): string;
+
+/**
+ * THE BOX'S OWN UNDO (0.94.0) — what ⌘Z and ⇧⌘Z step through while a copy
+ * box has the caret.
+ *
+ * A browser's own text undo cannot do it: it forgets everything the moment a
+ * value is set from script, and every mark, link, clear and paste is set from
+ * script. And the editor's undo (`efficient-easel/editor` `bindUndoKeys`)
+ * steps the whole document, a keystroke at a time. So the box keeps the steps
+ * IT made, with the selection each one started from, and answers ⌘Z itself —
+ * the key never reaches the editor while the caret is in the box, so one key
+ * is never answered twice.
+ *
+ * Typing is one step per burst: keystrokes less than a second apart are one
+ * step, as every word processor groups them. A press of a mark is always its
+ * own step.
+ *
+ * Plain functions, no React, so a spec can pin it without a box.
+ */
+/** A value and where its selection was. */
+interface Snapshot {
+    text: string;
+    start: number;
+    end: number;
+}
+interface History {
+    /** Remember `before`, the state about to be replaced. `type` coalesces with
+     *  the previous `type` step when it came less than {@link TYPING_BURST_MS}
+     *  after it. Any new step forgets what could be redone. */
+    record(before: Snapshot, kind: 'type' | 'edit', now: number): void;
+    /** The state to go back to, or null. `current` becomes redoable. */
+    undo(current: Snapshot): Snapshot | null;
+    /** The state to go forward to, or null. `current` becomes undoable. */
+    redo(current: Snapshot): Snapshot | null;
+    /** Forget everything — the host put a different value in the box. */
+    reset(): void;
+}
+/** Keystrokes closer together than this are one undo step. */
+declare const TYPING_BURST_MS = 1000;
+declare function createHistory(limit?: number): History;
+
+interface CaretEdit {
+    /** The field being edited — a textarea or an input. Its live selection IS
+     *  the argument, so nothing here holds state that could fall out of step with
+     *  the box. */
+    target: TextBoxHandle;
+    onChange: (next: string) => void;
+}
+/**
+ * Returns a runner: hand it a function that produces the next value and where
+ * the caret goes, and it writes both.
+ */
+declare function useCaretEdit({ target, onChange }: CaretEdit): (edit: (el: HTMLInputElement | HTMLTextAreaElement | null) => WrapResult) => void;
+
+export { type CaretEdit, CopyAlign, CopyBox, type CopyBoxAlign, type CopyBoxFooter, type CopyBoxProps, type History, MarkBar, type MarkBarProps, type MarkWriter, type PasteData, type PasteOptions, type SelectionSource, type Snapshot, TYPING_BURST_MS, type TextAreaHandle, type TextBoxHandle, ariaShortcut, createHistory, insertSelection, markSelection, pasteToMarkup, useCaretEdit };

package/dist/copy/index.js

@@ -0,0 +1,10 @@
+import{DEFAULT_COPY_WORDS as e}from"../chunk-2LUSK32B.js";import{SettingsSegmented as t}from"../chunk-QB3BZIRA.js";import{GoldTextInput as n}from"../chunk-CERTFXCV.js";import{applyMark as l,STANDARD_MARKUP as r,writeMarkedLines as o,sameMarks as i,markedLines as a,spanFor as s,markupTools as c,findLink as u,markedAt as d,removeLink as p,writeLink as h,isSafeLinkHref as f}from"../chunk-6OPSJGAI.js";import{useWords as m}from"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import{AlignSeparateIcon as y,AlignRightIcon as b,AlignCenterIcon as g,AlignLeftIcon as k,ClearMarksIcon as v,LinkIcon as x,QuietIcon as C,EmphasisIcon as w,StrikeIcon as S,ItalicIcon as N,BoldIcon as D}from"../chunk-YNZZYHA4.js";import{useRef as j,useLayoutEffect as E,useState as L,useEffect as K,useId as P}from"react";import{jsx as A,jsxs as T,Fragment as z}from"react/jsx-runtime";var B=["left","center","right","justify"],R=e.align,$={left:/* @__PURE__ */A(k,{}),center:/* @__PURE__ */A(g,{}),right:/* @__PURE__ */A(b,{}),justify:/* @__PURE__ */A(y,{})},M={three:{labelsPx:94.5,widestLabelPx:39.94},four:{labelsPx:140,widestLabelPx:44}};function F(e,t=R){return B.filter(t=>e.includes(t)).map(e=>({id:e,label:t[e],icon:$[e],title:t[e]}))}var Z=/[\u1100-\u11ff\u2e80-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/;function I(e){if(e.every(e=>e.label===R[e.id]))return e.length>3?M.four:M.three;const t=e.map(e=>[...e.label].reduce((e,t)=>e+(Z.test(t)?13:8),0));return{labelsPx:t.reduce((e,t)=>e+t,0),widestLabelPx:Math.max(0,...t)}}function Y(e,t){const n=t?.selectionStart??e.length;return{start:n,end:t?.selectionEnd??n}}function q(e,t,n,r=l){const{start:o,end:i}=Y(e,n);return r(e,o,i,t)}function H(e,t,n){const{start:l,end:r}=Y(e,n),o=l+t.length;return{text:e.slice(0,l)+t+e.slice(r),selectionStart:o,selectionEnd:o}}var O=1e3;function U(e=200){let t=[],n=[],l=null,r=0;return{record(o,i,a){const s="type"===i&&"type"===l&&a-r<1e3;l=i,r=a,n=[],s||(t.push(o),t.length>e&&t.shift())},undo(e){const r=t.pop();return r?(n.push(e),l=null,r):null},redo(e){const r=n.pop();return r?(t.push(e),l=null,r):null},reset(){t=[],n=[],l=null}}}function G({href:t,editing:n,onApply:l,onRemove:r,onClose:o}){const i=m("copy",e).link,a=P(),[s,c]=L(t),[u,d]=L(!1),p=j(null);K(()=>{p.current?.focus(),p.current?.select()},[]);const h=()=>{const e=s.trim();f(e)?l(e):d(!0)};/* @__PURE__ */
+return T("div",{role:"dialog","aria-label":i.title,className:"es-copy-link",onKeyDown:e=>{"Enter"===e.key?(e.preventDefault(),h()):"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),o())},children:[
+/* @__PURE__ */A("label",{htmlFor:a,className:"es-copy-link-label",children:i.label}),
+/* @__PURE__ */A("input",{ref:p,id:a,type:"text",className:"es-copy-link-input",value:s,placeholder:i.placeholder,spellCheck:!1,autoComplete:"off","aria-invalid":u||void 0,"aria-describedby":u?`${a}-why`:void 0,onChange:e=>{c(e.target.value),d(!1)}}),u?/* @__PURE__ */A("p",{id:`${a}-why`,role:"alert",className:"es-copy-link-why",children:i.refused}):null,
+/* @__PURE__ */T("div",{className:"es-copy-link-actions",children:[n?/* @__PURE__ */A("button",{type:"button",className:"es-copy-link-btn",onClick:r,children:i.remove}):null,
+/* @__PURE__ */A("button",{type:"button",className:"es-copy-link-btn is-primary",onClick:h,disabled:""===s.trim(),children:i.apply})]})]})}var W=/* @__PURE__ */new Set(["script","style","head","title","meta","link","template","noscript","svg","math","object","iframe"]),X=/* @__PURE__ */new Set(["p","div","li","ul","ol","dl","dt","dd","h1","h2","h3","h4","h5","h6","blockquote","pre","table","thead","tbody","tfoot","tr","section","article","header","footer","aside","nav","figure","figcaption","address","hr"]);function J(e,t){const n=t.rules??r,l=e.html&&""!==e.html.trim()?function(e,t,n){const l=t.createElement("template");l.innerHTML=e;const r=[[]],s=()=>r[r.length-1],c=()=>{const e=s();for(;e.length>0&&" "===e[e.length-1].ch;)e.pop();e.length>0&&r.push([])},u=(e,t,n,l)=>{if(3===e.nodeType){for(const r of e.textContent??""){const e=/\s/.test(r)?" ":r,o=s();(" "!==e||0!==o.length&&" "!==o[o.length-1].ch)&&o.push({ch:e,bold:t,italic:n,href:l})}return}if(1!==e.nodeType&&11!==e.nodeType)return;const o=e,i=1===e.nodeType?o.localName:"";if(W.has(i))return;if("br"===i)return void r.push([]);let a=t,d=n,p=l;if("b"!==i&&"strong"!==i||(a=!0),"i"!==i&&"em"!==i||(d=!0),"a"===i){const e=(o.getAttribute("href")??"").trim();p=f(e)?e:null}const h=1===e.nodeType?o.style:null;if(h){const e=h.fontWeight;"bold"===e||"bolder"===e||Number(e)>=600?a=!0:("normal"===e||"lighter"===e||""!==e&&Number(e)<600)&&(a=!1),"italic"===h.fontStyle||"oblique"===h.fontStyle?d=!0:"normal"===h.fontStyle&&(d=!1)}const m=X.has(i);m&&c();for(const t of[...e.childNodes])u(t,a,d,p);m&&c()};u(l.content,!1,!1,null);for(;r.length>1&&0===r[r.length-1].length;)r.pop();return r.map(e=>function(e,t){const n=t=>e.map((n,l)=>n[t]&&(" "!==n.ch||Boolean(e[l-1]?.[t])&&Boolean(e[l+1]?.[t]))),l=[{bold:!0,italic:!0,links:!0},{bold:!0,italic:!1,links:!0},{bold:!1,italic:!1,links:!0},{bold:!1,italic:!1,links:!1}];for(const r of l){const l=Q(e,r.bold?n("bold"):null,r.italic?n("italic"):null,r.links),s=o([l]).text;if(i([l],a(s,t)))return s}return e.map(e=>e.ch).join("")}(e,n))}(e.html,t.doc,n):(e.text??"").replace(/\r\n?/g,"\n").split("\n");return t.multiline?l.join("\n"):l.map(e=>e.trim()).filter(e=>""!==e).join(" ")}function Q(e,t,n,l){let r=0,o=null,i=null,a=null;return{bullet:!1,chars:e.map((e,c)=>{const u=l?e.href:null;return o=null===u?null:o&&o.href===u?o:s(++r,"link",u),i=t?.[c]?i??s(++r,"bold"):null,a=n?.[c]?a??s(++r,"italic"):null,{ch:e.ch,at:-1,marks:[o,i,a].filter(e=>null!==e)}})}}var V={bold:/* @__PURE__ */A(D,{size:16}),italic:/* @__PURE__ */A(N,{size:16}),strike:/* @__PURE__ */A(S,{size:16}),highlight:/* @__PURE__ */A(w,{size:16}),quiet:/* @__PURE__ */A(C,{size:16}),link:/* @__PURE__ */A(x,{size:16}),clear:/* @__PURE__ */A(v,{size:16})};function _(e){if(!e)return;const t=e.split("+"),n=t.pop().toUpperCase();return["Meta",...t.map(e=>e[0].toUpperCase()+e.slice(1)),n].join("+")}var ee={bold:"is-bold",italic:"is-italic",strike:"is-strike"};function te({tools:t,onApply:n,disabled:l=!1,actions:r,align:o,glyphs:i,ariaLabel:a,pressed:s,open:u=null}){const d=m("copy",e),p="string"==typeof t[0]?c(t).map(e=>({...e,...d.marks[e.style]})):t;return 0!==p.length||r||o?/* @__PURE__ */T("div",{className:"es-copy-bar",role:"group","aria-label":a??d.formatting,children:[p.map(e=>{const t=i?.[e.style]??V[e.style],r=u===e.style||Boolean(s?.[e.style]);/* @__PURE__ */
+return A("button",{type:"button",onMouseDown:e=>e.preventDefault(),onClick:()=>n(e.style),disabled:l,title:e.title,"aria-label":e.name??e.title,"aria-keyshortcuts":_(e.shortcut),"aria-pressed":s||u?r:void 0,"aria-haspopup":"link"===e.style&&s?"dialog":void 0,"aria-expanded":"link"===e.style&&s?"link"===u:void 0,className:`es-copy-mark${t?" has-glyph":ee[e.style]?` ${ee[e.style]}`:""}${r?" is-active":""}`,children:t??e.label},e.style)}),r?/* @__PURE__ */T(z,{children:[
+/* @__PURE__ */A("span",{className:"es-copy-bar-split","aria-hidden":"true"}),r]}):null,o?/* @__PURE__ */A("span",{className:"es-copy-bar-end",children:o}):null]}):null}function ne({target:e,onChange:t}){const n=j(null);return E(()=>{const t=n.current,l=e.current;t&&l&&l.value===t.text&&(n.current=null,l.focus(),l.setSelectionRange(t.start,t.end))}),l=>{const r=l(e.current);t(r.text),n.current={start:r.selectionStart,end:r.selectionEnd,text:r.text}}}function le({value:o,onChange:i,onCommit:a,onCancel:s,multiline:f=!1,placeholder:y,ariaLabel:b,className:g,readOnly:k=!1,rules:v,tools:x=[],writeMark:C,actions:w,align:S,glyphs:N,barLabel:D,renderFooter:E,inputRef:P,barShows:z="always"}){const B=m("copy",e),R=j(null),$=P??R,[M,Z]=L(!1),[Y,O]=L(null),W=j(U()).current,X=j(null);K(()=>{const e=X.current;e&&o===e.to?X.current=null:e&&o===e.from||(X.current=null,W.reset())},[o,W]);const Q=e=>{X.current={from:X.current?.from??o,to:e},i(e)},V=e=>({text:o,start:e?.selectionStart??Y?.start??o.length,end:e?.selectionEnd??Y?.end??o.length}),_=ne({target:$,onChange:Q}),ee=e=>(O({start:e.selectionStart,end:e.selectionEnd}),e),le=e=>_(t=>(W.record(V(t),"edit",Date.now()),ee(e(t)))),[re,oe]=L(null),ie=v??r,ae="string"==typeof x[0]?c(x):x,se=ae.map(e=>e.style),ce={};if(Y)for(const e of se)ce[e]="link"===e?null!==u(o,Y.start,Y.end):d(o,Y.start,Y.end,e);const ue=e=>{if("clear"===e)return void le(t=>q(o,e,t,(e,t,n)=>l(e,t,n,"clear",ie)));if("link"!==e){const t=C??((e,t,n,o)=>l(e,t,n,o,r,B.placeholders));return void le(n=>q(o,e,n,t))}const t=$.current,n=t?.selectionStart??o.length,i=t?.selectionEnd??n;oe({start:n,end:i,link:u(o,n,i)})},de=S?F(S.allow,B.align):[];/* @__PURE__ */
+return T("div",{className:"es-copy"+(g?` ${g}`:""),onFocus:()=>Z(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||Z(!1)},onKeyDown:e=>{if(k||e.target!==$.current)return;if(e.altKey||e.metaKey===e.ctrlKey)return;const t=e.key.toLowerCase(),n="KeyZ"===e.code||"z"===t,l=("KeyY"===e.code||"y"===t)&&!e.shiftKey;if(n||l)return e.preventDefault(),e.stopPropagation(),r=l||e.shiftKey?"redo":"undo",void _(e=>{const t=V(e),n=W[r](t);return ee(n?{text:n.text,selectionStart:n.start,selectionEnd:n.end}:{text:t.text,selectionStart:t.start,selectionEnd:t.end})});var r;const o=`${e.shiftKey?"shift+":""}${t}`,i=ae.find(e=>e.shortcut===o);i&&(e.preventDefault(),e.stopPropagation(),ue(i.style))},onPaste:e=>{const t=$.current;if(k||!t||e.target!==t)return;e.preventDefault();const n=J({html:e.clipboardData.getData("text/html"),text:e.clipboardData.getData("text/plain")},{doc:t.ownerDocument,multiline:f,rules:ie});le(e=>H(o,n,e))},onSelect:()=>{const e=$.current;e&&e.ownerDocument.activeElement===e&&O({start:e.selectionStart??o.length,end:e.selectionEnd??o.length})},children:["always"===z||M||null!==re?/* @__PURE__ */A(te,{tools:x,disabled:k,actions:w,glyphs:N,ariaLabel:D,pressed:ce,open:re?"link":null,onApply:ue,align:S?/* @__PURE__ */A(t,{options:de,value:S.value,onChange:S.onChange,ariaLabel:B.alignment,disabled:k||S.disabled,fit:I(de)}):null}):null,
+/* @__PURE__ */A(n,{value:o,onInput:e=>{W.record(V(null),"type",Date.now()),Q(e)},onCommit:a,onCancel:s,multiline:f,placeholder:y,ariaLabel:b,rules:v,disabled:k,inputRef:$,className:"es-copy-box"}),re?/* @__PURE__ */A(G,{href:re.link?.href??"",editing:null!==re.link,onApply:e=>{const t=re;oe(null),le(()=>h(o,t.start,t.end,e))},onRemove:()=>{const e=re.link;oe(null),e&&le(()=>p(o,e))},onClose:()=>{oe(null),$.current?.focus()}}):null,E?E({focused:M,insert:e=>le(t=>H(o,e,t))}):null]})}export{B as COPY_ALIGNS,M as COPY_ALIGN_FIT,$ as COPY_ALIGN_GLYPHS,R as COPY_ALIGN_LABELS,le as CopyBox,te as MarkBar,O as TYPING_BURST_MS,_ as ariaShortcut,F as copyAlignOptions,U as createHistory,H as insertSelection,q as markSelection,J as pasteToMarkup,ne as useCaretEdit};