efficient-easel 0.0.0 → 0.96.0

package/dist/menu/menu.css

@@ -0,0 +1,254 @@
+/*
+ * efficient-easel/menu.css — the right-click menu box (card 66400.d).
+ *
+ * THE VALUES ARE NOT OURS. They are the storefront editor's shipped
+ * `.sf-blockmenu` / `.sf-blockmenu-item` — `efficient-shop/components/storefront-editor.css`,
+ * read at line 1165 — which is the look card 66400.d names for the menu Lewis
+ * approved on 2026-08-31. Each `--sf-*` there is already an alias of the
+ * matching `--es-*` here (card 66024), so the look is expressed with no new
+ * value except the three noted below. Change one only to track a deliberate
+ * change THERE. Pinned by `tests/menu-box-css.test.ts`.
+ *
+ * ⚠️ THREE VALUES ARE UNDER A LIVE QUESTION, and each is behind ONE var so
+ * settling it is a three-line change. The drawing Lewis approved that same day
+ * (`mockups/editor-add-and-context-v1.html`, its `.ctx` rule) is a FLOATING
+ * menu, where `.sf-blockmenu` is an in-flow picker, and it holds different
+ * numbers for exactly the three things that difference would move:
+ *
+ *              .sf-blockmenu (shipped)          .ctx (the drawing)
+ *   radius     8px                              9px
+ *   shadow     0 6px 18px rgba(0,0,0,.08)       0 10px 28px rgba(0,0,0,.16)
+ *   min-width  220px (the admin box's own)      186px
+ *
+ * This sheet ships `.sf-blockmenu`'s, per the card's own constraint. The
+ * question is with the fork that owns the design.
+ *
+ * LIGHT only — neither editing surface has a dark mode (owner, 2026-08-06), so
+ * there is no dark counterpart block here. Do not add one.
+ *
+ * Import once from a client entry / global stylesheet:
+ *     import 'efficient-easel/menu.css';
+ */
+
+/* ── this sheet's own vars ──────────────────────────────────────────────────
+   ON `.es-editor`, the chrome root, following `rail.css` (which owns
+   `--es-rail-*`) and `panel.css` (`--es-row-gap`): the sheet that owns the
+   rules owns its tokens, and `shell.css` stays a verbatim mirror of the
+   storefront editor's `--sf-*` block. None of these is a shell token.
+
+   ⚠️ The box itself names `es-editor` (see `skin.ts`) — it is portalled to
+   `document.body`, outside the editor tree, so this is also where it picks these
+   up. Read that note before moving them.
+
+   ⛔ CUSTOM PROPERTIES ONLY IN THIS BLOCK. Never a paint property.
+
+   `.es-editor` is not this package's own element — it is the class each editor
+   puts on ITS OWN chrome root, and the campaign designer puts it on a root that
+   lives INSIDE the admin portal's DOM (card 66024 made that the mechanism by
+   which the designer is themed; `CampaignDesigner.tsx` adds the class and
+   `campaignBlocks.css` aliases its `--cd-*` onto these values). A custom
+   property declared here is inert until something reads it. A `background`, a
+   `padding`, a `font` — anything that PAINTS — is not: it applies to that root
+   the moment this sheet is imported, in every editor that imports it, and in
+   the admin portal's own document.
+
+   Audited on 2026-09-02 across every sheet in this package that opens an
+   `.es-editor` block, and the honest number is zero:
+
+       shell.css   67 declarations, 67 custom, 0 paint
+       panel.css   11 declarations, 11 custom, 0 paint
+       menu.css     7 declarations,  7 custom, 0 paint
+
+   ⚠️ Nothing enforces this — it is a rule with no test behind it. If you are
+   adding a declaration here, you are the check. */
+.es-editor {
+  /* HOW FAR THE BOX FLOATS OFF THE PAGE BEHIND IT.
+     The drawing's value. `.sf-blockmenu` — the shop's shipped Add-block picker
+     — carries `0 6px 18px rgba(0,0,0,.08)`, and this is deliberately heavier:
+     that picker sits IN FLOW inside a panel, while this box FLOATS over
+     content, and a floating box has to separate itself from whatever is under
+     it. The drawing's own header cites `.sf-blockmenu`, so its author had that
+     value open and moved off it on purpose.
+     This is the CONTEXT half of the split described on `--es-menu-hover-bg`:
+     it follows the situation, not the neighbour. */
+  --es-menu-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+
+  /* HOW SOFT ITS CORNERS ARE. The drawing's 9px, one more than the in-flow
+     picker's 8 — the same floating-vs-in-flow distinction. */
+  --es-menu-radius: 9px;
+
+  /* THE NARROWEST THE BOX MAY GET — a floor, not a width.
+     A menu that shrank to its longest label would change width with its
+     contents, so a merchant's pointer would land on a different row depending
+     on which label happened to be longest. The drawing's 186px. It is also the
+     width the flyout measures against when it decides to flip left. */
+  --es-menu-min-w: 186px;
+
+  /* WHAT A ROW DOES UNDER THE POINTER — the one thing a merchant watches move.
+     ⚠️ THIS ONE DOES NOT FOLLOW THE DRAWING, AND THAT IS DELIBERATE. The
+     drawing's `.ctx` washes the row GREY and leaves the text alone. This washes
+     the accent tint and turns the text blue, which is `.sf-blockmenu` — the Add
+     menu, one keystroke away in the same editor.
+
+     Owner ruling, 2026-09-02, recorded as a dated amendment in the
+     `owner-design-rulings` skill ("the right-click menu hovers BLUE, not the
+     drawing's grey"): it was put to him rather than decided, because two menus
+     in one editor highlighting differently is a rule-zero failure. His word was
+     blue.
+
+     ⛔ DO NOT "RESTORE" THE DRAWING'S GREY. The split from the three values
+     above is not an inconsistency, it is the rule:
+
+         hover                interaction grammar -> follows the NEIGHBOUR
+         shadow / radius /    context             -> follows the SITUATION
+         min-width                                   (this box floats; the Add
+                                                      menu sits in flow)
+
+     Still behind a var, because that is what made asking him cost nothing. */
+  --es-menu-hover-bg: var(--es-accent-tint);
+  --es-menu-hover-fg: var(--es-accent);
+
+  /* A ROW THAT DESTROYS SOMETHING.
+     ⚠️ The drawing is the ONLY reference for this one — `.sf-blockmenu` has no
+     danger row at all, so nothing is being overridden here. Its `#b91c1c` is
+     exactly `--es-danger-strong`, so it is read from the token layer rather
+     than copied as a literal. */
+  --es-menu-danger-fg: var(--es-danger-strong);
+
+  /* THE SHORTCUT COLUMN'S INK — quieter than a label, quieter than `--es-muted`,
+     because a shortcut is a reminder and never the thing being read.
+     ⚠️ The one value here with no shell token behind it: the drawing's own
+     `#b6bcc4`, which is lighter than `--es-disabled` (#9ca3af). Named here
+     rather than reaching for a token that is not this colour. */
+  --es-menu-shortcut-fg: #b6bcc4;
+}
+
+
+/* ── the box ────────────────────────────────────────────────────────────────
+   FIXED and lifted on purpose: it hangs OVER the panel it was opened from
+   rather than inside it, so a left panel dragged to its 220px minimum — which
+   clips its own overflow — cannot cut it off. Measured in Chromium at both
+   panel widths; see `tests/fixtures/menu-clipping.html`. */
+.es-menu {
+  position: fixed;
+  z-index: 9999;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: var(--es-menu-min-w);
+  /* A box that could grow past the viewport would be unreachable on its far
+     side whatever the edge-flip did. */
+  max-width: calc(100vw - 16px);
+  padding: 4px;
+  border: 1px solid var(--es-line);
+  border-radius: var(--es-menu-radius);
+  background: var(--es-panel);
+  box-shadow: var(--es-menu-shadow);
+  font-family: var(--es-font);
+  /* For `maxHeight`. The flyout is portalled separately BECAUSE of this: a CSS
+     overflow that is not `visible` on one axis clips the other too, so an
+     in-flow flyout would be cut off at this box's edge. */
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ── a row ──────────────────────────────────────────────────────────────── */
+.es-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 9px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--es-text);
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* The one thing a merchant watches move — see `--es-menu-hover-*` above for
+   which reference this follows and why it is behind a var. */
+.es-menu-item:hover {
+  background: var(--es-menu-hover-bg);
+  color: var(--es-menu-hover-fg);
+}
+
+.es-menu-item:focus-visible {
+  outline: 2px solid var(--es-accent-ring);
+  outline-offset: -2px;
+}
+
+.es-menu-item.is-danger {
+  color: var(--es-menu-danger-fg);
+}
+/* The drawing gives a danger row no hover of its own: it takes the same grey as
+   every other row and KEEPS its red, rather than washing red as well. Stated as
+   its own rule because `.es-menu-item:hover` would otherwise repaint the text. */
+.es-menu-item.is-danger:hover {
+  background: var(--es-menu-hover-bg);
+  color: var(--es-menu-danger-fg);
+}
+
+/* ── the parts of a row ─────────────────────────────────────────────────── */
+.es-menu-label {
+  flex: 1;
+}
+/* A state name in a flyout can be long; a row in the box never is. */
+.es-menu-label-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.es-menu-chevron {
+  color: var(--es-icon);
+}
+
+/* The drawing's `.ci` — a fixed 16px column so labels line up whether or not a
+   row has a glyph, exactly as the tick column does in a flyout. */
+.es-menu-icon {
+  flex: none;
+  width: 16px;
+  text-align: center;
+  color: var(--es-muted);
+  font-size: 11px;
+}
+
+/* The drawing's `.k`. `margin-left: auto` is what right-aligns it, so it works
+   whether or not the row also carries a chevron. */
+.es-menu-shortcut {
+  margin-left: auto;
+  color: var(--es-menu-shortcut-fg);
+  font-size: 11px;
+}
+
+/* Present on every row of a flyout that uses one, so the labels line up whether
+   or not the row is the state you are already on. */
+.es-menu-tick {
+  flex: none;
+  width: 12px;
+  color: var(--es-accent);
+}
+
+/* ── a caption, and a separator ─────────────────────────────────────────── */
+.es-menu-header {
+  padding: 6px 9px 4px;
+  color: var(--es-muted);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* AIR, NOT A LINE (card 66350). The owner has asked for divider hairlines to
+   go, more than once, and `tests/panel-no-divider-lines.test.ts` sweeps every
+   stylesheet this package ships for a one-sided border — this one included. A
+   `'—'` item still separates; it does it with a gap. With the box's own 1px
+   `gap` either side, that is 7px between groups against 1px between rows. */
+.es-menu-divider {
+  height: 5px;
+}

package/dist/node-ops/index.d.ts

@@ -0,0 +1,91 @@
+export { A as AfterRemove, I as ItemSelector, N as NodeSelection, P as Planned, S as StepBounds, c as canStep, f as fromItemSelector, p as parentStep, a as planDuplicate, b as planMove, d as planPaste, e as planRemove, g as planSetProps, h as planStep, t as toItemSelector } from '../plan-DtNw2VuI.js';
+export { C as ClipboardEntry, N as NodeClipboard, a as NodeOps, b as NodeOpsHost, c as createNodeClipboard, u as useNodeOps } from '../useNodeOps-6IAej9jy.js';
+import { ReactNode } from 'react';
+import { E as EditorContextMenuItem } from '../types-pGBXevBU.js';
+import { N as NodeMenuWords } from '../words-DOhF-4D4.js';
+import '../types-DziKCwsN.js';
+
+/**
+ * nodeMenuItems — the right-click rows for a block, ONE list for both editors.
+ *
+ * The campaign designer (`blockMenuItems`) and the storefront editor
+ * (`nodeMenuItems`) each built their own, in the same row type and drawn by the
+ * same `EditorContextMenu`, and they had drifted: different group order, the
+ * layer flyout in a different group, Copy / Cut / Paste / Rename on one side
+ * only, and no pinned-block rule on the storefront. The ORDER and the GROUPS
+ * are decided here once:
+ *
+ *   title | pick | make | style | change | remove
+ *   pick   : Select layer (when the host puts the layer flyout here)
+ *   make   : Add inside · Duplicate · Move up · Move down · Copy · Cut · Paste
+ *   style  : the host's Copy style / Paste style rows (efficient-easel/style-clipboard)
+ *   change : Rename · Hide/Show · the layer flyout (when it goes here) · Up one level
+ *   remove : Delete
+ *
+ * WHAT IS OFFERED IS THE HOST'S CALL, BY PRESENCE. A row appears when the host
+ * passes its action and is omitted when it does not — never drawn disabled,
+ * the rule both editors already follow. So the pinned Header and Footer, a
+ * locked block, a read-only campaign are all answered upstream, where the host
+ * knows why; a pinned block with nothing to offer gets `pinnedLine`.
+ *
+ * Every row's label, icon and shortcut can be overridden (`rows`), so each
+ * editor keeps its own words ("Hide from email", "Delete section") until the
+ * two are asked to agree. Extra host rows go into a named group (`extras`).
+ */
+
+type NodeMenuRowId = 'layer' | 'addInside' | 'duplicate' | 'moveUp' | 'moveDown' | 'copy' | 'cut' | 'paste' | 'rename' | 'hide' | 'show' | 'upLevel' | 'delete';
+type RowLook = Partial<Pick<EditorContextMenuItem, 'label' | 'icon' | 'shortcut' | 'danger'>> & {
+    /** `null` draws the row with no glyph. */
+    icon?: ReactNode | null;
+};
+interface NodeMenuOptions {
+    /** The menu's caption — the block's name. */
+    title: string;
+    /** The layer flyout: its entries (built by the host from the ancestor chain) and which group it sits in. */
+    layer?: {
+        items: EditorContextMenuItem[];
+        group?: 'pick' | 'change';
+    };
+    /** Each present action is offered; an absent one is not. */
+    actions: {
+        addInside?: () => void;
+        duplicate?: () => void;
+        moveUp?: () => void;
+        moveDown?: () => void;
+        copy?: () => void;
+        cut?: () => void;
+        /** `label` names what is held: "Paste ‹label›". */
+        paste?: {
+            label: string;
+            run: () => void;
+        };
+        rename?: () => void;
+        /** `hidden` says which of Hide / Show to offer. */
+        hide?: {
+            hidden: boolean;
+            run: () => void;
+        };
+        upLevel?: () => void;
+        delete?: () => void;
+    };
+    /** The host's style rows (styleMenuItems). Offered on pinned blocks too. */
+    style?: EditorContextMenuItem[];
+    /**
+     * The block cannot move or be removed: show this line when nothing else is on
+     * offer. It is a CAPTION, like the title — it says why the menu is short, and
+     * a row that looked clickable and did nothing would say the opposite.
+     */
+    pinnedLine?: string;
+    /** Per-row look overrides: label, icon (`null` = none), shortcut, danger. */
+    rows?: Partial<Record<NodeMenuRowId, RowLook>>;
+    /** Host rows added to the end of a group. */
+    extras?: Partial<Record<'pick' | 'make' | 'change' | 'remove', EditorContextMenuItem[]>>;
+    /**
+     * The rows' own words in the host's language: `useEditorStrings().menu`
+     * (0.95.0). Left out, English. A row's `rows` override still wins.
+     */
+    words?: NodeMenuWords;
+}
+declare function nodeMenuItems(options: NodeMenuOptions): EditorContextMenuItem[];
+
+export { type NodeMenuOptions, type NodeMenuRowId, NodeMenuWords, nodeMenuItems };

package/dist/node-ops/index.js

@@ -0,0 +1 @@
+import{DEFAULT_NODE_MENU_WORDS as e}from"../chunk-WK3AFPXY.js";export{canStep,fromItemSelector,parentStep,planDuplicate,planMove,planPaste,planRemove,planSetProps,planStep,toItemSelector,useNodeOps}from"../chunk-EFTTSIMK.js";import{TrashIcon as n,EyeIcon as t,EyeOffIcon as o,RenameIcon as p,PasteIcon as l,CopyIcon as c,MoveDownIcon as s,MoveUpIcon as a,DuplicateIcon as i,AddIcon as r,LayersIcon as u}from"../chunk-YNZZYHA4.js";import"../chunk-LPRQDDQO.js";import"../chunk-NKB3KVAB.js";import{jsx as h}from"react/jsx-runtime";function d(){let e=null;const n=/* @__PURE__ */new Set;return{get:()=>e,set(t){e=t;for(const e of[...n])e()},subscribe:e=>(n.add(e),()=>n.delete(e))}}var m={layer:{icon:/* @__PURE__ */h(u,{})},addInside:{icon:/* @__PURE__ */h(r,{})},duplicate:{icon:/* @__PURE__ */h(i,{})},moveUp:{icon:/* @__PURE__ */h(a,{})},moveDown:{icon:/* @__PURE__ */h(s,{})},copy:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘C"},cut:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘X"},paste:{icon:/* @__PURE__ */h(l,{}),shortcut:"⌘V"},rename:{icon:/* @__PURE__ */h(p,{})},hide:{icon:/* @__PURE__ */h(o,{})},show:{icon:/* @__PURE__ */h(t,{})},upLevel:{},delete:{icon:/* @__PURE__ */h(n,{}),danger:!0}};function v(n){const{actions:t,rows:o={},extras:p={},words:l=e}=n,c=e=>({...m[e],label:l[e],...o[e]}),s=(e,n,t)=>{const o=c(e),p={label:t??o.label??e,onClick:n};return o.icon&&(p.icon=o.icon),o.shortcut&&(p.shortcut=o.shortcut),o.danger&&(p.danger=!0),p},a=()=>{const e=c("layer"),t={label:e.label??l.layer,onClick:()=>{},children:n.layer.items};return e.icon&&(t.icon=e.icon),t},i=[],r=[],u=[],h=[],d=!!n.layer&&n.layer.items.length>1;if(d&&"pick"===(n.layer.group??"pick")&&i.push(a()),t.addInside&&r.push(s("addInside",t.addInside)),t.duplicate&&r.push(s("duplicate",t.duplicate)),t.moveUp&&r.push(s("moveUp",t.moveUp)),t.moveDown&&r.push(s("moveDown",t.moveDown)),t.copy&&r.push(s("copy",t.copy)),t.cut&&r.push(s("cut",t.cut)),t.paste){const e=c("paste").label??l.paste;r.push(s("paste",t.paste.run,l.pasteNamed({paste:e,label:t.paste.label})))}t.rename&&u.push(s("rename",t.rename)),t.hide&&u.push(t.hide.hidden?s("show",t.hide.run):s("hide",t.hide.run)),d&&"change"===n.layer.group&&u.push(a()),t.upLevel&&u.push(s("upLevel",t.upLevel)),t.delete&&h.push(s("delete",t.delete)),i.push(...p.pick??[]),r.push(...p.make??[]),u.push(...p.change??[]),h.push(...p.remove??[]);const v=[i,r,n.style??[],u,h].filter(e=>e.length>0),g=i.length+r.length+u.length+h.length===0,k=[{label:n.title,header:!0,onClick:()=>{}}];return g&&n.pinnedLine&&k.push({label:n.pinnedLine,header:!0,onClick:()=>{}}),v.forEach((e,t)=>{(t>0||g&&n.pinnedLine)&&k.push({label:"—",onClick:()=>{}}),k.push(...e)}),k}export{d as createNodeClipboard,v as nodeMenuItems};