efficient-easel 0.0.0 → 0.96.0

package/dist/data/index.d.ts

@@ -0,0 +1,208 @@
+import { S as SlotAddress, N as Node, a as DataConfig, D as Data, F as Found, P as Place, b as SlotEntry, W as WalkInfo } from '../types-DziKCwsN.js';
+export { B as BlockShape, c as FieldShape, d as FieldsShape, e as NodeProps, R as RootData } from '../types-DziKCwsN.js';
+export { R as ResolvableItem, a as ResolveCache, b as ResolveOptions, c as ResolveTrigger, d as changedProps, e as createResolveCache, f as deepEqual, r as resolveNodeData } from '../resolve-DpH8YQOA.js';
+
+/**
+ * Finding a node's slots, and reading or writing a value at a prop path.
+ *
+ * A slot is found the way Puck finds one: by the FIELDS, not by the value. A
+ * prop is a slot when its field says `type: 'slot'`; a slot can also sit inside
+ * an `object` field or inside each item of an `array` field, and its name is
+ * then the prop path Puck gives it — `items[0].content`, `box.content`.
+ *
+ * One deliberate difference from Puck: Puck also walks an object whose field is
+ * NOT an `object` field using the PARENT's field map, so a key there that
+ * happens to share a slot's name is treated as a slot. No document relies on
+ * that (a non-array value there crashes Puck's own walk), and a rule that
+ * depends on a coincidence of names is not one to copy.
+ *
+ * Order is DECLARATION order — the order the fields are written in the config,
+ * which is the order a person reads the block in (`col1` before `col2`). Puck
+ * visits slots in reverse, as a side effect of how it fills empty ones; nothing
+ * in either app depends on that.
+ */
+
+/** One step of a prop path: a key, or an index into an array. */
+type Segment = string | number;
+declare function getIn(value: unknown, segments: readonly Segment[]): unknown;
+
+/**
+ * efficient-easel/data — the document, as pure functions.
+ *
+ * The bottom layer of the engine that replaces Puck (the blueprint "Puck From
+ * The Ground Up For Efficient Editor", 2026-09-29, step 1.1). Every function
+ * takes a document and returns a new one; nothing here holds state, knows
+ * about React, or touches a browser global, so a server component, a Node
+ * script, a test and the editor's store all call the same code.
+ *
+ *   find · walk · slotsOf              read
+ *   insert · move · remove · duplicate change the tree
+ *   setProps · setRoot                 change one node's props, or the root's
+ *   normalizeData                      what the editor does to a document it opens
+ *   createNode · newId                 make a block the way the Add panel does
+ *
+ * THE FORMAT DOES NOT CHANGE. A document goes in and comes out in exactly the
+ * shape Puck 0.20 saves (see ./types). Four rules keep it that way, and the
+ * round-trip spec pins each one:
+ *
+ *   1. An empty slot is written as `[]`, and `zones` is written as `{}`.
+ *   2. Default props follow Puck: a new block is created WITH its
+ *      `defaultProps`; the root's `defaultProps` are filled in on open; an
+ *      existing block is never back-filled.
+ *   3. A root prop that no field declares (a site's `theme`, `fonts`, `scales`)
+ *      is kept exactly as it is. Nothing here drops a key it doesn't know.
+ *   4. The two older formats are READ — root props written directly on `root`,
+ *      and children parked in `zones` — and converted on open, the way Puck's
+ *      `migrate()` converts them. They are never written back.
+ *
+ * KEY ORDER. The backend stores these documents in Postgres `jsonb`, which does
+ * not keep key order, so "the same document as Puck" means the same keys and
+ * values. What this layer does promise is stronger for its own round trip: a
+ * document that is already in shape comes back as THE SAME OBJECT (so
+ * `normalizeData(doc) === doc`), and every edit copies only the nodes on the
+ * path to the change — an untouched block is the same object before and after.
+ *
+ * ERRORS. An edit that names a node or slot that is not there, an index off the
+ * end of a list, a move into the node's own subtree, or an insert that would
+ * put a second copy of an id into the document throws a `DataError`. The
+ * editor's store decides what an operator sees; this layer never guesses.
+ *
+ * LEAF DISCIPLINE: no imports outside this folder, no dependency at all.
+ * `crypto` is read inside `newId`, never at module evaluation.
+ */
+
+/**
+ * What `normalizeData` accepts: any saved document, as loosely as Puck's own
+ * `Data` type describes one (`root.props` optional). Converting the older
+ * shapes is its job, so it must take them without a cast. Every OTHER function
+ * here takes the normalised `Data` it returns.
+ */
+interface DataInput {
+    root?: {
+        props?: Record<string, unknown>;
+        [key: string]: unknown;
+    };
+    content?: unknown[];
+    zones?: Record<string, unknown[]>;
+}
+
+/** The root's id in a zone key, and the parent of the top-level list. */
+declare const ROOT_ID = "root";
+/** The top-level list's slot name. */
+declare const ROOT_SLOT = "default-zone";
+/** The top-level list, as an address. */
+declare const ROOT_LIST: SlotAddress;
+/** `{ parentId, slot }` → Puck's zone key `"<parentId>:<slot>"`. */
+declare const zoneKey: ({ parentId, slot }: SlotAddress) => string;
+/** Puck's zone key → `{ parentId, slot }`. Ids and prop paths hold no colon. */
+declare function parseZoneKey(key: string): SlotAddress;
+type DataErrorCode = 'not-found' | 'no-slot' | 'bad-index' | 'duplicate-id' | 'cycle' | 'id-change' | 'unknown-type';
+declare class DataError extends Error {
+    readonly code: DataErrorCode;
+    constructor(code: DataErrorCode, message: string);
+}
+/**
+ * `<Type>-<uuid>` — the id every saved block already carries, in both apps.
+ * Where `crypto.randomUUID` is unavailable (a non-secure origin, an old test
+ * runtime) it falls back to time plus randomness: ids are persisted, so they
+ * must stay unique across page loads, which a counter would not.
+ */
+declare function newId(type: string): string;
+/** A node's slots in declaration order. A missing top-level slot reads as `[]`. */
+declare function slotsOf(node: Node, config: DataConfig): SlotEntry[];
+/**
+ * Visit every node once, depth first, parent before children: the top-level
+ * list, then any slots on the root, then anything still parked in a legacy
+ * `zones` entry. Entries in a list that are not nodes are skipped, and indexes
+ * are always positions in the stored list.
+ *
+ * `visit` may return a node to put in this one's place (its id must not
+ * change); its children are then walked from the replacement. Returning
+ * nothing keeps the node. The result is `data` itself when nothing was
+ * replaced.
+ */
+declare function walk(data: Data, config: DataConfig, visit: (node: Node, info: WalkInfo) => Node | void): Data;
+/** Where the node with this id is, or `null`. The first match in walk order. */
+declare function find(data: Data, config: DataConfig, id: string): Found | null;
+/** The list at an address, or `null` when no such slot exists. */
+declare function getList(data: Data, config: DataConfig, address: SlotAddress): Node[] | null;
+/**
+ * What the editor does to a document when it opens it — the same result Puck
+ * reaches on load, with the older formats converted (rule 4):
+ *
+ *   - `root` holding its props directly becomes `{ props: { …those keys } }`;
+ *   - the root's `defaultProps` fill any root prop that is missing (rule 2);
+ *   - every declared top-level slot exists, `[]` when empty (rule 1);
+ *   - `content` is a list and `zones` exists, `{}` when there is nothing in it;
+ *   - children parked in `zones["<id>:<slot>"]` move into that slot when the
+ *     node declares it and the slot is empty. Anything else in `zones` stays
+ *     where it is — never dropped, never merged over content.
+ *
+ * A document already in shape is returned as the same object.
+ */
+declare function normalizeData(data: DataInput | Data, config: DataConfig): Data;
+/**
+ * A new block, the way the Add panel makes one — Puck's `insert` recipe:
+ * `{ ...defaultProps, id }`, plus any `props` the caller starts it with. The
+ * defaults are copied, so two blocks never share an array or object, and every
+ * child a default slot seeds gets its own id.
+ */
+declare function createNode(config: DataConfig, type: string, props?: Record<string, unknown>, options?: {
+    id?: string;
+}): Node;
+/**
+ * Put `node` into the list at `place`. The node is brought into shape (default
+ * slots, ids for children that have none) and must not bring an id the
+ * document already holds — that is the bug where two blocks select, hide and
+ * delete together.
+ */
+declare function insert(data: Data, config: DataConfig, place: Place, node: Node): Data;
+/** Take the node, and everything under it, out of the document. */
+declare function remove(data: Data, config: DataConfig, id: string): Data;
+/**
+ * Move a node to `to`. Within one list, `to.index` is the node's index AFTER
+ * the move (Puck's rule), so `0 … length-1`; into another list it is the index
+ * to insert at, `0 … length`. A move into the node's own subtree is refused.
+ */
+declare function move(data: Data, config: DataConfig, id: string, to: Place): Data;
+/**
+ * Copy a node, and everything under it, to the place just after it. Every
+ * copied node gets a fresh id. `strip` sees each copied node (with its new id)
+ * and returns what to keep — the hook for "a copy must not claim the
+ * original's baked image" (`bakedId`), which Puck's own duplicate copied
+ * verbatim.
+ */
+declare function duplicate(data: Data, config: DataConfig, id: string, options?: {
+    id?: string;
+    strip?: (node: Node) => Node;
+}): Data;
+/**
+ * A copy of `node` and everything under it, every copied node with a FRESH id —
+ * what a paste inserts, so a clipboard can be pasted twice without two blocks
+ * sharing an id. `strip` sees each copied node, as in `duplicate`. The input is
+ * not touched.
+ */
+declare function copyNode(node: Node, config: DataConfig, options?: {
+    id?: string;
+    strip?: (node: Node) => Node;
+}): Node;
+/**
+ * Merge `patch` into a node's props — Puck's `replace`, for the common case of
+ * changing some props. A key keeps its place; a new key goes on the end;
+ * `undefined` clears a key (JSON drops it on save). New children in a patched
+ * slot are brought into shape. Changing `id` is refused. A patch that changes
+ * nothing returns `data` itself.
+ */
+declare function setProps(data: Data, config: DataConfig, id: string, patch: Record<string, unknown>): Data;
+/**
+ * Replace a node wholesale — Puck's `replace` action: the node keeps its place
+ * and its id, and every prop is the new node's (a key it does not carry is
+ * gone, which `setProps` cannot do). Children in its slots that arrive without
+ * an id get one, and an id another node already holds is refused, as `insert`
+ * refuses it.
+ */
+declare function replaceNode(data: Data, config: DataConfig, id: string, node: Node): Data;
+/** Merge `patch` into the root's props, the same way `setProps` does. */
+declare function setRoot(data: Data, config: DataConfig, patch: Record<string, unknown>): Data;
+
+export { Data, DataConfig, DataError, type DataErrorCode, type DataInput, Found, Node, Place, ROOT_ID, ROOT_LIST, ROOT_SLOT, type Segment, SlotAddress, SlotEntry, WalkInfo, copyNode, createNode, duplicate, find, getIn, getList, insert, move, newId, normalizeData, parseZoneKey, remove, replaceNode, setProps, setRoot, slotsOf, walk, zoneKey };

package/dist/data/index.js

@@ -0,0 +1 @@
+export{DataError,ROOT_ID,ROOT_LIST,ROOT_SLOT,changedProps,copyNode,createNode,createResolveCache,deepEqual,duplicate,find,getList,insert,move,newId,normalizeData,parseZoneKey,remove,replaceNode,resolveNodeData,setProps,setRoot,slotsOf,walk,zoneKey}from"../chunk-LPRQDDQO.js";export{getIn}from"../chunk-NKB3KVAB.js";

package/dist/drag/drag.css

@@ -0,0 +1,360 @@
+/*
+ * efficient-easel/drag.css — the canvas drag layer (blueprint step 3.2): the
+ * hover handle, the drop line, "+ Add section" between sections and "+ Add
+ * block" in an empty slot. The tree's drag look is tree.css.
+ *
+ * The layer sits over the canvas frame in the host page and lets every click
+ * through to the canvas except on its own few controls. Needs
+ * `efficient-easel/shell.css` for the `--es-*` tokens.
+ */
+
+.es-canvas-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* ONE handle, over the smallest box under the pointer. Never unmounted: a
+   native drag aborts if its source leaves the page. */
+.es-canvas-handle {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 22px;
+  padding: 0 8px 0 6px;
+  border-radius: 11px;
+  background: var(--es-toast-bg);
+  color: var(--es-on-accent);
+  font: 500 11px/22px var(--es-font);
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.2);
+  cursor: grab;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.es-canvas-handle.is-shown {
+  opacity: 1;
+  pointer-events: auto;
+}
+.es-canvas-handle:active {
+  cursor: grabbing;
+}
+/* Frozen, not removed, while it is being dragged. */
+.es-canvas-handle.is-dragging {
+  opacity: 0;
+}
+.es-canvas-grip {
+  font-size: 10px;
+  letter-spacing: -2px;
+  opacity: 0.8;
+}
+
+/* While a drag is on — from here, the tree or the Add list — the whole canvas
+   is one drop surface in the host page. */
+.es-canvas-catch {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+
+/* The drop line: 2px of accent, across a list or down between columns. */
+.es-canvas-line {
+  position: absolute;
+  background: var(--es-accent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* "+ Add section", in the gap between two sections, on hover. */
+.es-canvas-seam {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+.es-canvas-seam::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 50%;
+  height: 2px;
+  margin-top: -1px;
+  background: var(--es-accent);
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.es-canvas-seam-add {
+  position: relative;
+  padding: 2px 10px;
+  border: none;
+  border-radius: 999px;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font: 600 11px/16px var(--es-font);
+  cursor: pointer;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.12s, transform 0.12s;
+}
+.es-canvas-seam:hover::before,
+.es-canvas-seam:focus-within::before,
+.es-canvas-seam:hover .es-canvas-seam-add,
+.es-canvas-seam-add:focus-visible {
+  opacity: 1;
+}
+.es-canvas-seam:hover .es-canvas-seam-add,
+.es-canvas-seam-add:focus-visible {
+  transform: scale(1);
+}
+
+/* An empty slot: a faint dashed cell that adds a block there, and takes a drop. */
+.es-canvas-empty {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px dashed var(--es-input-border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--es-app-bg) 60%, transparent);
+  color: var(--es-muted);
+  font: 500 12px/1.3 var(--es-font);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+.es-canvas-empty:hover,
+.es-canvas-empty:focus-visible,
+.es-canvas-empty.is-over {
+  border-color: var(--es-accent);
+  background: var(--es-accent-tint);
+  color: var(--es-accent-text);
+}
+
+/* ── The Add panel's shell ───────────────────────────────────────────────────
+   The campaign designer's Add view (redesign PR 6b), itself the website
+   picker's grammar at the left panel's width: a search that says so when
+   nothing matches, uppercase group headings with a count, and tiles that are
+   clicked to add and dragged to place. */
+.es-add {
+  font-family: var(--es-font);
+}
+.es-add-at {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0 0 10px;
+  padding: 7px 8px 7px 11px;
+  border-radius: 8px;
+  background: var(--es-accent-tint);
+  color: var(--es-accent-text);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.es-add-at-clear {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.es-add-at-clear:hover {
+  background: var(--es-accent-tint-strong);
+}
+.es-add-hint {
+  margin: 0 0 10px;
+  font-size: 12.5px;
+  color: var(--es-muted);
+}
+.es-add-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 16px;
+  padding: 0 12px;
+  height: 38px;
+  background: var(--es-track-bg);
+  border: 1px solid var(--es-input-border);
+  border-radius: 10px;
+  color: var(--es-muted);
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+}
+.es-add-search:focus-within {
+  border-color: var(--es-accent);
+  background: var(--es-panel);
+  box-shadow: 0 0 0 3px var(--es-accent-ring);
+}
+.es-add-search > svg {
+  flex: none;
+}
+.es-add-search input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  padding: 0;
+  font: inherit;
+  font-size: 13.5px;
+  color: var(--es-text);
+}
+.es-add-search input::placeholder {
+  color: var(--es-field-placeholder);
+  opacity: 1;
+}
+.es-add-search input::-webkit-search-cancel-button {
+  display: none;
+}
+.es-add-search-clear {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--es-muted);
+  cursor: pointer;
+}
+.es-add-search-clear:hover {
+  background: var(--es-divider);
+  color: var(--es-text);
+}
+.es-add-group + .es-add-group {
+  margin-top: 22px;
+}
+.es-add-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 11px;
+}
+.es-add-group-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--es-muted);
+}
+.es-add-group-count {
+  font-size: 11px;
+  color: var(--es-field-placeholder);
+}
+.es-add-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 6px;
+}
+.es-add-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 64px;
+  padding: 9px 6px;
+  border: 1px solid var(--es-line);
+  border-radius: 7px;
+  background: var(--es-panel);
+  color: var(--es-text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: center;
+  cursor: grab;
+  transition: background 0.12s, border-color 0.12s;
+}
+.es-add-tile:hover {
+  background: var(--es-hover);
+  border-color: var(--es-accent);
+}
+.es-add-tile:active {
+  cursor: grabbing;
+}
+.es-add-tile:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 1px;
+}
+.es-add-tile[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: var(--es-panel);
+  border-color: var(--es-line);
+}
+.es-add-tile-glyph {
+  display: flex;
+  color: var(--es-icon);
+}
+.es-add-tile-glyph svg {
+  width: 20px;
+  height: 20px;
+}
+.es-add-tile:hover .es-add-tile-glyph {
+  color: var(--es-accent);
+}
+/* Cards (0.80.0): a group whose tiles all carry a cover — two across, the
+   picture above the name, so a section is chosen by how it looks. */
+.es-add-grid.is-cards {
+  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  gap: 8px;
+}
+.es-add-tile.has-cover {
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 5px;
+  min-height: 0;
+  padding: 5px 5px 7px;
+  text-align: left;
+}
+/* The containing block for the host's picture: a cover drawn to FILL its box
+   (the storefront's scenes are positioned against it) must not escape the
+   tile and paint over the panel. */
+.es-add-tile-cover {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 16 / 10;
+  border-radius: 4px;
+  background: var(--es-app-bg);
+}
+.es-add-tile-cover > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.es-add-tile.has-cover .es-add-tile-label {
+  padding: 0 2px;
+}
+.es-add-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+  padding: 48px 12px;
+  text-align: center;
+  color: var(--es-muted);
+}
+.es-add-empty-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--es-text);
+}
+.es-add-empty-sub {
+  font-size: 12.5px;
+}