efficient-easel 0.0.0 → 0.97.0

package/dist/rail/rail.css

@@ -0,0 +1,175 @@
+/*
+ * efficient-easel — rail styles.
+ *
+ * The values here mirror `railTokens` in tokens.ts one-for-one (both trace back
+ * to the storefront editor's `.sf-rail` rules — the visual reference). They are
+ * declared as custom properties ON `.es-rail`, not on `:root`, so importing this
+ * stylesheet themes ONLY the rail and never leaks variables into the host page.
+ * Re-theme by overriding any `--es-rail-*` var on or above the rail element.
+ *
+ * Import once from a client entry / global stylesheet:
+ *     import 'efficient-easel/rail.css';
+ */
+
+.es-rail {
+  /* — tokens (see tokens.ts / railCssVars) — */
+  --es-rail-w: 46px;
+  --es-rail-pad-y: 8px;
+  --es-rail-gap: 4px;
+  --es-rail-radius: 12px;
+  --es-rail-btn-size: 34px;
+  --es-rail-btn-radius: 9px;
+  --es-rail-icon-size: 18px;
+  --es-rail-word-pad-x: 8px;
+  --es-rail-word-gap: 6px;
+  --es-rail-word-size: 12px;
+  --es-rail-word-weight: 500;
+  --es-rail-bg: #ffffff;
+  --es-rail-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
+  --es-rail-fg: #6b7280;
+  --es-rail-hover-bg: #f3f4f6;
+  --es-rail-hover-fg: #111827;
+  --es-rail-accent: #2563eb;
+  --es-rail-accent-tint: #eff6ff;
+
+  flex: none;
+  width: var(--es-rail-w);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--es-rail-gap);
+  padding: var(--es-rail-pad-y) 0;
+  background: var(--es-rail-bg);
+  border-radius: var(--es-rail-radius);
+  box-shadow: var(--es-rail-shadow);
+}
+
+/*
+ * The ROW variant (card 66160) — the same rail laid into a top bar.
+ *
+ * The column costs a 1280px laptop 56px of website preview (a 46px rail plus
+ * the 10px panel gap) that the top bar has going spare, so the icons move up
+ * there. `.es-rail` above is UNTOUCHED: this rule only overrides, so a consumer
+ * who never passes `orientation` gets exactly the stylesheet they had.
+ *
+ * THE CARD LOOK GOES, THROUGH THE TOKENS THAT ALREADY EXIST. The bar has its
+ * own surface and shadow; a second white card floating inside it is the bug.
+ * These re-point the THREE custom properties the base rule already reads rather
+ * than re-stating `background` / `box-shadow` / `border-radius` here — so the
+ * card look stays declared in exactly one place, and a host re-theming the rail
+ * still only has the `--es-rail-*` names to learn.
+ *
+ * WHAT DELIBERATELY DOES NOT CHANGE: the button size, the button radius, the
+ * icon size, the gap and every colour. The icons must not resize when they move
+ * into the bar, so no `--es-rail-btn-*`, `--es-rail-icon-size` or colour token
+ * appears below, and there is no `.es-rail-row .es-rail-btn` rule anywhere.
+ * `align-items: center` is inherited from the base rule and does the right
+ * thing here too — in a row it centres the buttons vertically.
+ */
+.es-rail.es-rail-row {
+  --es-rail-bg: transparent;
+  --es-rail-shadow: none;
+  --es-rail-radius: 0;
+
+  flex-direction: row;
+  /* No fixed width: the row is as wide as its buttons. `flex: none` from the
+     base rule keeps flex-basis on `auto`, so this sizes to content. */
+  width: auto;
+  /* The column pads `--es-rail-pad-y 0`: the one step goes on the MAIN axis —
+     the run of buttons — and the cross axis is handled by the fixed width.
+     Rotate the axes and the same step goes on the ENDS of the row. The cross
+     axis is 0 on purpose, so the row is exactly one button tall (34px) and the
+     52px bar centres it, instead of the rail imposing a height on the bar. */
+  padding: 0 var(--es-rail-pad-y);
+}
+
+.es-rail-btn {
+  width: var(--es-rail-btn-size);
+  height: var(--es-rail-btn-size);
+  border: none;
+  background: transparent;
+  border-radius: var(--es-rail-btn-radius);
+  color: var(--es-rail-fg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.es-rail-btn svg {
+  width: var(--es-rail-icon-size);
+  height: var(--es-rail-icon-size);
+  display: block;
+}
+
+.es-rail-btn:hover:not(:disabled) {
+  background: var(--es-rail-hover-bg);
+  color: var(--es-rail-hover-fg);
+}
+
+.es-rail-btn.is-active {
+  background: var(--es-rail-accent-tint);
+  color: var(--es-rail-accent);
+}
+
+.es-rail-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* ── Words beside the icons (a row rail only) ────────────────────────────────
+   THE SETTINGS TABS' RULE (owner, 2026-09-18: "the rule must be the same as the
+   top tabs of the right settings panel"). Three states, picked by the width of
+   the rail's column and nothing else:
+
+     every word      when every button fits with its word;
+     chosen word     otherwise the glyphs, plus the word of the button whose
+                     panel is open;
+     glyphs only     when even that does not fit.
+
+   BOTH parts are always in the markup once the words are measured; the widths
+   decide which are drawn, in CSS, against the column's own width (`100cqi`) —
+   the tab strip's way, not a script's. The thresholds come from ONE rule, the
+   "word fit" block in `panel.css`, which the segmented control reads too. This
+   sheet only names the rail's chrome for it — the four inputs below — so a
+   re-padded rail button moves its thresholds with it.
+
+   `is-measured` is set by `EditorRail` when it was handed the words' widths
+   (`TopBarRail` measures them). Without it, and without `panel.css`, the word
+   stays clipped to nothing: an icon-only rail always fits. */
+.es-rail.es-rail-row.is-measured {
+  --es-fit-chip: var(--es-rail-btn-size);
+  --es-fit-word-gap: var(--es-rail-word-gap);
+  --es-fit-gap: var(--es-rail-gap);
+  --es-fit-ends: var(--es-rail-pad-y);
+}
+/* The button keeps its 34px height, its radius and its idle / hover / active
+   colours; only its width follows the word. Wordless it is 34px wide exactly
+   as before — the padding plus the 18px glyph is 34. The icon-to-word gap is
+   the WORD's margin (see `panel.css`), so the button's own `gap` stays 0 and
+   goes with the word.
+
+   `min-width: 0` KEEPS THE ICON-ONLY RAIL'S GIVE. Six glyph buttons need 240px
+   and the 220px panel floor gives the column 219: the icon-only rail has
+   always shrunk its buttons a few px there rather than run past the column,
+   and padding would otherwise make the button's own content its floor.
+   The glyph keeps its square instead (the rule after), which is also what
+   holds a narrower glyph — the shop's text "+" — to a 34px button. */
+.es-rail.es-rail-row.is-measured .es-rail-btn {
+  width: auto;
+  min-width: 0;
+  padding: 0 var(--es-rail-word-pad-x);
+}
+.es-rail.es-rail-row.is-measured .es-rail-btn > :first-child {
+  min-width: var(--es-rail-icon-size);
+  text-align: center;
+}
+.es-rail-word {
+  font-size: var(--es-rail-word-size);
+  font-weight: var(--es-rail-word-weight);
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 0;
+}

package/dist/render/index.d.ts

@@ -0,0 +1,117 @@
+import { CSSProperties, ReactNode, ReactElement } from 'react';
+import { B as BlockShape, D as Data } from '../types-41704JE4.js';
+
+/**
+ * efficient-easel/render — draw a saved document, the published way.
+ *
+ * Step 1.2 of the engine that replaces Puck (blueprint "Puck From The Ground
+ * Up For Efficient Editor", 2026-09-29). The published storefront draws every
+ * page through Puck's `<Render>` today (efficient-shop `lib/puck/render-client.tsx`
+ * and `components/PublishedFooter.tsx`); this is the drop-in for it: the same
+ * config, the same document, THE SAME HTML — `tests/render-puck-parity.test.tsx`
+ * renders both and compares the markup byte for byte.
+ *
+ * WHAT IS DIFFERENT IS WHAT IT IS MADE OF. Puck's `<Render>` reaches the
+ * document through a React context and builds each block's props in hooks, so
+ * it can only run as a client component. This is a plain function: no hook, no
+ * context, no state, no browser global. It runs in a server component, in a
+ * client component, in a Node script, or called directly — `Render(props)`
+ * returns the element tree. Whether the BLOCKS can run on the server is up to
+ * the blocks (the storefront's are client components today; blueprint default
+ * #4 keeps that wrapper until they are moved one by one).
+ *
+ * THE BLOCK AUTHORING SHAPE IS PUCK'S (blueprint default #3), so an app hands
+ * in the config it has:
+ *
+ *   - a block's `render` receives its props, plus `puck`, plus each SLOT as a
+ *     component: `render: ({ content: Content }) => <Content className="…" />`.
+ *     A slot draws `<div className style>` around its blocks, as Puck's does;
+ *   - the root's `render` receives the root props, `puck`, `title` (`''` when
+ *     unset), `editMode: false`, `id: 'puck-root'`, and the page as `children`;
+ *   - a block type the config does not know draws nothing.
+ *
+ * Three details are copied exactly because a block can observe them, not
+ * because they are good design:
+ *
+ *   1. The top-level list is wrapped in one plain `<div>`, root render or not.
+ *      (Puck's own SERVER `<Render>` uses a fragment there instead, so Puck's
+ *      two renderers disagree; the client one is what is published.) A host
+ *      that needs to reach that wrapper from its stylesheet passes `className`
+ *      (0.95.0); left out, the `<div>` is as bare as Puck's.
+ *   2. `puck` differs by level. The root gets
+ *      `{ renderDropZone, isEditing: false, dragRef: null, metadata }`; a
+ *      top-level block gets `{ renderDropZone, metadata: { ...metadata,
+ *      ...block.metadata } }`; a block inside a slot gets `{ metadata }` only.
+ *   3. A missing top-level slot draws as an empty slot; a slot is found by its
+ *      field, including inside `object` and `array` fields.
+ *
+ * `renderDropZone` draws a legacy `zones` entry. Neither editor writes zones,
+ * so it draws an empty `<div>` in practice; it exists so a block that still
+ * calls it gets what Puck gave it.
+ *
+ * LEAF DISCIPLINE: imports React's JSX runtime and this package's own data
+ * layer, nothing else (`tests/render-leaf-safety.test.ts`).
+ */
+
+type Metadata = Record<string, unknown>;
+/** What a slot component accepts. Only `className` and `style` draw anything. */
+interface SlotProps {
+    className?: string;
+    style?: CSSProperties;
+    allow?: string[];
+    disallow?: string[];
+    minEmptyHeight?: number;
+    collisionAxis?: unknown;
+}
+/** A slot, as a block's `render` receives it. */
+type SlotComponent = (props?: SlotProps) => ReactElement;
+interface DropZoneProps extends SlotProps {
+    zone: string;
+}
+/** The `puck` prop. Which keys are present depends on the level (see above). */
+interface RenderContext {
+    renderDropZone?: (props: DropZoneProps) => ReactElement;
+    isEditing?: boolean;
+    dragRef?: null;
+    metadata: Metadata;
+}
+type BlockRender = (props: any) => ReactNode;
+interface RenderBlock extends BlockShape {
+    render: BlockRender;
+    metadata?: Metadata;
+}
+interface RenderConfig {
+    root?: BlockShape & {
+        render?: BlockRender;
+    };
+    components: Record<string, RenderBlock | undefined>;
+}
+/**
+ * What `Render` draws: a saved document, as loosely as the renderer reads it.
+ * `root.props` is OPTIONAL here, as it is in Puck's own `Data` type — a root
+ * that holds its props directly (the older format) is drawn the way Puck draws
+ * it, and a document with no root or no content draws an empty page. So a
+ * Puck-typed document is passed as it is, with no cast.
+ */
+interface RenderData {
+    root?: {
+        props?: Record<string, unknown>;
+        [key: string]: unknown;
+    };
+    content?: unknown[];
+    zones?: Record<string, unknown[]>;
+}
+interface RenderProps {
+    config: RenderConfig;
+    data: RenderData | Partial<Data>;
+    metadata?: Metadata;
+    /**
+     * A class for the `<div>` around the top-level list — that wrapper, and
+     * nothing else. OPT-IN: left out (or empty) the wrapper carries no attribute
+     * at all, and the markup is Puck's, byte for byte.
+     */
+    className?: string;
+}
+declare function Render({ config, data, metadata, className }: RenderProps): ReactElement;
+
+export { type DropZoneProps, type Metadata, Render, type RenderBlock, type RenderConfig, type RenderContext, type RenderData, type RenderProps, type SlotComponent, type SlotProps };

package/dist/render/index.js

@@ -0,0 +1,5 @@
+import{isRecord as t,fieldsFrom as n,slotLocations as e,setIn as r,isNode as o}from"../chunk-NKB3KVAB.js";import{jsx as a}from"react/jsx-runtime";function c({config:e,data:r,metadata:o={},className:c}){const s=Array.isArray(r?.content)?r.content:[],l=t(r?.root)?r.root:{},p="props"in l?l.props:l,m={config:e,content:s,zones:t(r?.zones)?r.zones:{},metadata:o},f={...p,puck:{renderDropZone:d(m,"root"),isEditing:!1,dragRef:null,metadata:o},title:p?.title||"",editMode:!1,id:"puck-root"},y=i(m,n(e.root),f),g=s.map(t=>u(m,t)),k=/* @__PURE__ */a("div",c?{className:c,children:g}:{children:g}),N=e.root?.render;return N?/* @__PURE__ */a(N,{...y,children:k}):k}function i(t,n,o){let a=o;for(const c of e(o,n))a=r(a,c.segments,s(t,c.content));return a}function s(t,e){return function(r={}){/* @__PURE__ */
+return a("div",{className:r.className,style:r.style,children:e.map(e=>function(t,e){if(!o(e))return null;const r=t.config.components[e.type];if(!r)return null;const c=i(t,n(r),e.props),s=r.render,u={...c.puck,metadata:t.metadata||{}};/* @__PURE__ */
+return a(s,{...c,puck:u},c.id)}(t,e))})}}function u(t,e){if(!o(e))return null;const r=t.config.components[e.type];if(!r)return null;const c=i(t,n(r),e.props),s=r.render,u={...c.puck,renderDropZone:d(t,c.id),metadata:{...t.metadata,...r.metadata}};/* @__PURE__ */
+return a(s,{...c,puck:u},c.id)}function d(t,n){return function({zone:e,className:r,style:o}){const c=`${n}:${e}`,i="root:default-zone"===c?t.content:t.zones[c],s=Array.isArray(i)?i:[];/* @__PURE__ */
+return a("div",{className:r,style:o,children:s.map(n=>u(t,n))})}}export{c as Render};

package/dist/resolve-D68pb3Bx.d.ts

@@ -0,0 +1,57 @@
+import { a as DataConfig } from './types-41704JE4.js';
+
+/**
+ * A BLOCK'S `resolveData`, RUN AS PUCK RUNS IT — `resolveComponentData` in Puck
+ * 0.20 (`lib/resolve-component-data.ts`), because the documents both editors
+ * hold were resolved by it and must go on resolving the same way.
+ *
+ *   - It runs only when the item differs from the last one resolved for that id
+ *     (deep-equal), unless the trigger is "force"; the last answer is reused.
+ *   - `changed` names every prop of the new item with whether it differs from
+ *     the last one resolved (`changedProps`, Puck's `getChanged`).
+ *   - The block's own `metadata` is spread over the host's.
+ *   - The answer's `props` are spread OVER the item's, and its `readOnly` kept
+ *     when it has any key.
+ *   - Then every slot's children are resolved the same way, in order.
+ *
+ * What differs from Puck is only where the memory lives: Puck kept the last
+ * change per id in a module-level object shared by every editor on the page;
+ * here the host hands in its own (`createResolveCache`), one per editor.
+ *
+ * Pure apart from the resolvers it calls: no React, no browser global.
+ */
+type ResolveTrigger = 'insert' | 'replace' | 'load' | 'force' | 'move';
+/** An item to resolve: a node, or the root (`{ props }`, no type). */
+interface ResolvableItem {
+    type?: string;
+    props: Record<string, unknown>;
+    readOnly?: Record<string, boolean>;
+}
+interface ResolveCache {
+    lastChange: Record<string, {
+        item: ResolvableItem;
+        resolved: ResolvableItem;
+    }>;
+}
+declare const createResolveCache: () => ResolveCache;
+interface ResolveOptions {
+    metadata?: Record<string, unknown>;
+    trigger?: ResolveTrigger;
+    cache?: ResolveCache;
+    onResolveStart?: (item: ResolvableItem) => void;
+    onResolveEnd?: (item: ResolvableItem) => void;
+}
+/** Deep equality of JSON-shaped values, as `fast-deep-equal` answers it for them. */
+declare function deepEqual(a: unknown, b: unknown): boolean;
+/** Every prop of `next`, and whether it differs from `last` (Puck's `getChanged`). */
+declare function changedProps(next: ResolvableItem | null | undefined, last: ResolvableItem | null | undefined): Record<string, boolean>;
+/**
+ * Resolve one item and everything in its slots. `didChange` says whether the
+ * answer differs from the item handed in.
+ */
+declare function resolveNodeData<T extends ResolvableItem>(item: T, config: DataConfig, options?: ResolveOptions): Promise<{
+    node: T;
+    didChange: boolean;
+}>;
+
+export { type ResolvableItem as R, type ResolveCache as a, type ResolveOptions as b, type ResolveTrigger as c, changedProps as d, createResolveCache as e, deepEqual as f, resolveNodeData as r };

package/dist/shell/index.d.ts

@@ -0,0 +1,159 @@
+/**
+ * Editor SHELL design tokens — the ONE source both editors' chrome converge on.
+ *
+ * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the
+ * editor chrome theme: accent, surfaces, fields, text, lines, chips, named
+ * chrome literals, danger/warning/success, radii, gap, shadows and font. Every
+ * value bar one is taken verbatim from the storefront editor's `--sf-*` block
+ * (`efficient-shop/components/storefront-editor.css`), the visual reference the
+ * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had
+ * each re-copied. After card 66024 they all resolve to these values instead.
+ * The one exception is `success`, which that block has no counterpart for; see
+ * its own note below.
+ *
+ * Exposed BOTH ways, per the same value (mirrors the rail):
+ *   - `shellTokens` — this JS object, for code that needs the numbers/colours
+ *     (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);
+ *   - `shell.css` — the stylesheet, which declares the identical values as CSS
+ *     custom properties on `.es-editor` (names listed in `shellCssVars`).
+ *
+ * Numeric fields are pixel magnitudes (unitless) so they compose in code; the
+ * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so
+ * there is a single palette here — no dark counterpart.
+ */
+declare const shellTokens: {
+    /** `--es-accent` — blue-600. */
+    readonly accent: "#2563eb";
+    /** `--es-accent-tint` — blue-50. */
+    readonly accentTint: "#eff6ff";
+    /** `--es-accent-tint-strong` — blue-100. */
+    readonly accentTintStrong: "#dbeafe";
+    /** `--es-accent-line` — blue-200: a quiet accent hairline (an empty slot's outline). */
+    readonly accentLine: "#bfdbfe";
+    /** `--es-accent-text` — blue-700. */
+    readonly accentText: "#1d4ed8";
+    /** `--es-accent-ring` — focus ring wash. */
+    readonly accentRing: "rgba(37, 99, 235, 0.25)";
+    /** `--es-accent-shadow` — accent button shadow. */
+    readonly accentShadow: "rgba(37, 99, 235, 0.35)";
+    /** `--es-on-accent` — text/icon over the solid accent. */
+    readonly onAccent: "#ffffff";
+    /** `--es-app-bg` — gray-50, sunken canvas. */
+    readonly appBg: "#f9fafb";
+    /** `--es-preview-bg` — gray-100, preview well. */
+    readonly previewBg: "#f3f4f6";
+    /** `--es-panel` — raised cards / panels. */
+    readonly panel: "#ffffff";
+    /** `--es-raised` — a lifted surface. NOT the active chip since card 66302. */
+    readonly raised: "#ffffff";
+    /** `--es-topbar-bg`. */
+    readonly topbarBg: "#ffffff";
+    /** `--es-frame-bg` — device "paper" behind the preview iframe. */
+    readonly frameBg: "#ffffff";
+    /** `--es-hover` — gray-100 row / icon hover. */
+    readonly hover: "#f3f4f6";
+    /** `--es-hatch` — 45° upload-slot texture. */
+    readonly hatch: "rgba(0, 0, 0, 0.018)";
+    /** `--es-addcard-veil` — add-section card hover wash. */
+    readonly addcardVeil: "rgba(248, 249, 250, 0.66)";
+    /** `--es-field-bg`. */
+    readonly fieldBg: "#ffffff";
+    /** `--es-track-bg` — gray-100 segmented / search track. */
+    readonly trackBg: "#f3f4f6";
+    /** `--es-input-border` — gray-300. */
+    readonly inputBorder: "#d1d5db";
+    /** `--es-field-text` — gray-800. */
+    readonly fieldText: "#1f2937";
+    /** `--es-field-placeholder` — gray-400. */
+    readonly fieldPlaceholder: "#9ca3af";
+    /** `--es-knob` — toggle knob. */
+    readonly knob: "#ffffff";
+    /** `--es-text` — gray-900. */
+    readonly text: "#111827";
+    /** `--es-text-strong` — gray-950 active labels. */
+    readonly textStrong: "#030712";
+    /** `--es-text-secondary` — gray-700. */
+    readonly textSecondary: "#374151";
+    /** `--es-muted` — gray-500. */
+    readonly muted: "#6b7280";
+    /** `--es-icon` — gray-500 icon buttons. */
+    readonly icon: "#6b7280";
+    /** `--es-disabled` — gray-400 disabled / faint glyphs. */
+    readonly disabled: "#9ca3af";
+    /** `--es-divider` — gray-200. */
+    readonly divider: "#e5e7eb";
+    /** `--es-line` — gray-200 hairlines. */
+    readonly line: "#e5e7eb";
+    /** `--es-btn-border` — gray-300. */
+    readonly btnBorder: "#d1d5db";
+    /** `--es-btn-text` — gray-700. */
+    readonly btnText: "#374151";
+    /** `--es-chip-bg` — gray-100. */
+    readonly chipBg: "#f3f4f6";
+    /** `--es-chip-fg` — gray-500. */
+    readonly chipFg: "#6b7280";
+    /** `--es-brand-square` — gray-900 wordmark square. */
+    readonly brandSquare: "#111827";
+    /** `--es-device-border` — gray-200 tablet/mobile frame. */
+    readonly deviceBorder: "#e5e7eb";
+    /** `--es-toast-bg` — gray-900 dark chip / seam pill. */
+    readonly toastBg: "#111827";
+    /** `--es-toggle-off` — gray-300 toggle track. */
+    readonly toggleOff: "#d1d5db";
+    /** `--es-scrollbar` — gray-300. */
+    readonly scrollbar: "#d1d5db";
+    /** `--es-scrollbar-hover` — gray-400. */
+    readonly scrollbarHover: "#9ca3af";
+    /** `--es-danger` — red-600. */
+    readonly danger: "#dc2626";
+    /** `--es-danger-strong` — red-700. */
+    readonly dangerStrong: "#b91c1c";
+    /** `--es-danger-tint` — red-50. */
+    readonly dangerTint: "#fef2f2";
+    /** `--es-warning` — amber-700. */
+    readonly warning: "#b45309";
+    /** `--es-preview-tint` — amber-100 "Preview" pill. */
+    readonly previewTint: "#fef3c7";
+    /**
+     * `--es-success` — green-700. THE ONE VALUE HERE WITH NO `--sf-*` BEHIND IT:
+     * the storefront editor's block has a red and an amber and no green, and card
+     * 8802.g needs one for a green tick. So it is picked to sit with the block
+     * rather than invented next to it — the same Tailwind ramp every other colour
+     * in this file comes from, at the 700 step `--es-warning` already sits on.
+     * 700 and not 600 for the reason amber went there: it is the darkest step
+     * still plainly the hue, and it clears WCAG AA (5.0:1) on the shell's white
+     * panels, so a tick may carry a label without needing a second token.
+     */
+    readonly success: "#15803d";
+    /** `--es-panel-radius`. */
+    readonly panelRadius: 12;
+    /** `--es-row-radius`. */
+    readonly rowRadius: 8;
+    /** `--es-field-radius`. */
+    readonly fieldRadius: 6;
+    /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */
+    readonly panelGap: 10;
+    /** `--es-panel-shadow`. */
+    readonly panelShadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)";
+    /** `--es-topbar-shadow`. */
+    readonly topbarShadow: "0 1px 3px rgba(0, 0, 0, 0.06)";
+    /**
+     * `--es-raised-shadow` — what a small surface sitting ON another one casts:
+     * the chip in the settings tab strip's track (card 66138). Tighter and darker
+     * than `panelShadow`, which is a whole panel floating over the app; this one
+     * has to read across 3px of track without looking like a second panel.
+     */
+    readonly raisedShadow: "0 1px 2px rgba(16, 24, 40, 0.1)";
+    /** `--es-font` — system sans stack. */
+    readonly font: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif";
+};
+type ShellTokens = typeof shellTokens;
+/**
+ * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets
+ * these on `.es-editor`; override any of them on (or above) the editor root to
+ * re-theme without shipping new CSS. The `shell-tokens.test.ts` parity gate
+ * proves this map, `shellTokens` and `shell.css` never drift apart.
+ */
+declare const shellCssVars: Record<keyof ShellTokens, string>;
+
+export { type ShellTokens, shellCssVars, shellTokens };

package/dist/shell/index.js

@@ -0,0 +1 @@
+export{shellCssVars,shellTokens}from"../chunk-FI23ALVJ.js";

package/dist/shell/shell.css

@@ -0,0 +1,122 @@
+/*
+ * efficient-easel — shell chrome tokens.
+ *
+ * The values here mirror `shellTokens` in tokens.ts one-for-one (both trace back
+ * to the storefront editor's `--sf-*` block — the visual reference). They are
+ * declared as custom properties ON `.es-editor`, not on `:root`, so importing
+ * this stylesheet themes ONLY an editor root and never leaks variables into the
+ * host page (the campaign designer renders INSIDE the admin DOM, so this must
+ * not touch the surrounding app).
+ *
+ * Both editors add the `es-editor` class to their chrome root and alias their
+ * own `--sf-*` / `--cd-*` names onto these — e.g. `--sf-accent: var(--es-accent)`
+ * — so the light values live ONCE, here. Re-theme by overriding any `--es-*` var
+ * on or above the editor root.
+ *
+ * LIGHT only: both editing surfaces always render light (no dark mode), so there
+ * is no dark counterpart block — do not add one.
+ *
+ *
+ * ⛔ 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:
+ * `CampaignDesigner.tsx` adds the class and `campaignBlocks.css` aliases its
+ * `--cd-*` onto these values). A custom property 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.
+ *
+ * ⚠️ This sheet is the one that matters most for that, because it is the one the
+ * admin portal actually imports (`CampaignDesigner.tsx`, since card 66024).
+ *
+ * Audited 2026-09-02 across every sheet here 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 — a rule with no test behind it. If you are adding a
+ * declaration here, you are the check.
+* Import once from a client entry / global stylesheet:
+ *     import 'efficient-easel/shell.css';
+ */
+
+.es-editor {
+  /* — accent (efficient-shell blue) — */
+  --es-accent: #2563eb;
+  --es-accent-tint: #eff6ff;
+  --es-accent-tint-strong: #dbeafe;
+  --es-accent-line: #bfdbfe;
+  --es-accent-text: #1d4ed8;
+  --es-accent-ring: rgba(37, 99, 235, 0.25);
+  --es-accent-shadow: rgba(37, 99, 235, 0.35);
+  --es-on-accent: #ffffff;
+
+  /* — surfaces (cool gray ramp) — */
+  --es-app-bg: #f9fafb;
+  --es-preview-bg: #f3f4f6;
+  --es-panel: #ffffff;
+  --es-raised: #ffffff;
+  --es-topbar-bg: #ffffff;
+  --es-frame-bg: #ffffff;
+  --es-hover: #f3f4f6;
+  --es-hatch: rgba(0, 0, 0, 0.018);
+  --es-addcard-veil: rgba(248, 249, 250, 0.66);
+
+  /* — fields — */
+  --es-field-bg: #ffffff;
+  --es-track-bg: #f3f4f6;
+  --es-input-border: #d1d5db;
+  --es-field-text: #1f2937;
+  --es-field-placeholder: #9ca3af;
+  --es-knob: #ffffff;
+
+  /* — text — */
+  --es-text: #111827;
+  --es-text-strong: #030712;
+  --es-text-secondary: #374151;
+  --es-muted: #6b7280;
+  --es-icon: #6b7280;
+  --es-disabled: #9ca3af;
+
+  /* — lines / chips / buttons — */
+  --es-divider: #e5e7eb;
+  --es-line: #e5e7eb;
+  --es-btn-border: #d1d5db;
+  --es-btn-text: #374151;
+  --es-chip-bg: #f3f4f6;
+  --es-chip-fg: #6b7280;
+
+  /* — named chrome literals — */
+  --es-brand-square: #111827;
+  --es-device-border: #e5e7eb;
+  --es-toast-bg: #111827;
+  --es-toggle-off: #d1d5db;
+  --es-scrollbar: #d1d5db;
+  --es-scrollbar-hover: #9ca3af;
+
+  /* — danger / warning / success (shell red / amber / green) — */
+  --es-danger: #dc2626;
+  --es-danger-strong: #b91c1c;
+  --es-danger-tint: #fef2f2;
+  --es-warning: #b45309;
+  --es-preview-tint: #fef3c7;
+  --es-success: #15803d;
+
+  /* — radii / shape / gap — */
+  --es-panel-radius: 12px;
+  --es-row-radius: 8px;
+  --es-field-radius: 6px;
+  --es-panel-gap: 10px;
+
+  /* — shadows — */
+  --es-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
+  --es-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --es-raised-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+
+  /* — type — */
+  --es-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}