editor-shell 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/chunk-N7NW4W3P.js +189 -0
  2. package/dist/chunk-N7NW4W3P.js.map +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +1 -0
  5. package/dist/shell/index.d.ts +145 -0
  6. package/dist/shell/index.js +3 -0
  7. package/dist/shell/index.js.map +1 -0
  8. package/dist/shell/shell.css +112 -0
  9. package/package.json +8 -3
package/dist/chunk-N7NW4W3P.js ADDED
@@ -0,0 +1,189 @@
1
+ // src/shell/tokens.ts
2
+ var shellTokens = {
3
+ // ── Accent (react-os-shell blue) ──────────────────────────────────────────
4
+ /** `--es-accent` — blue-600. */
5
+ accent: "#2563eb",
6
+ /** `--es-accent-tint` — blue-50. */
7
+ accentTint: "#eff6ff",
8
+ /** `--es-accent-tint-strong` — blue-100. */
9
+ accentTintStrong: "#dbeafe",
10
+ /** `--es-accent-text` — blue-700. */
11
+ accentText: "#1d4ed8",
12
+ /** `--es-accent-ring` — focus ring wash. */
13
+ accentRing: "rgba(37, 99, 235, 0.25)",
14
+ /** `--es-accent-shadow` — accent button shadow. */
15
+ accentShadow: "rgba(37, 99, 235, 0.35)",
16
+ /** `--es-on-accent` — text/icon over the solid accent. */
17
+ onAccent: "#ffffff",
18
+ // ── Surfaces (cool gray ramp) ─────────────────────────────────────────────
19
+ /** `--es-app-bg` — gray-50, sunken canvas. */
20
+ appBg: "#f9fafb",
21
+ /** `--es-preview-bg` — gray-100, preview well. */
22
+ previewBg: "#f3f4f6",
23
+ /** `--es-panel` — raised cards / panels. */
24
+ panel: "#ffffff",
25
+ /** `--es-raised` — active seg / chip. */
26
+ raised: "#ffffff",
27
+ /** `--es-topbar-bg`. */
28
+ topbarBg: "#ffffff",
29
+ /** `--es-frame-bg` — device "paper" behind the preview iframe. */
30
+ frameBg: "#ffffff",
31
+ /** `--es-hover` — gray-100 row / icon hover. */
32
+ hover: "#f3f4f6",
33
+ /** `--es-hatch` — 45° upload-slot texture. */
34
+ hatch: "rgba(0, 0, 0, 0.018)",
35
+ /** `--es-addcard-veil` — add-section card hover wash. */
36
+ addcardVeil: "rgba(248, 249, 250, 0.66)",
37
+ // ── Fields ────────────────────────────────────────────────────────────────
38
+ /** `--es-field-bg`. */
39
+ fieldBg: "#ffffff",
40
+ /** `--es-track-bg` — gray-100 segmented / search track. */
41
+ trackBg: "#f3f4f6",
42
+ /** `--es-input-border` — gray-300. */
43
+ inputBorder: "#d1d5db",
44
+ /** `--es-field-text` — gray-800. */
45
+ fieldText: "#1f2937",
46
+ /** `--es-field-placeholder` — gray-400. */
47
+ fieldPlaceholder: "#9ca3af",
48
+ /** `--es-knob` — toggle knob. */
49
+ knob: "#ffffff",
50
+ // ── Text ────────────────────────────────────────────────────────────────
51
+ /** `--es-text` — gray-900. */
52
+ text: "#111827",
53
+ /** `--es-text-strong` — gray-950 active labels. */
54
+ textStrong: "#030712",
55
+ /** `--es-text-secondary` — gray-700. */
56
+ textSecondary: "#374151",
57
+ /** `--es-muted` — gray-500. */
58
+ muted: "#6b7280",
59
+ /** `--es-icon` — gray-500 icon buttons. */
60
+ icon: "#6b7280",
61
+ /** `--es-disabled` — gray-400 disabled / faint glyphs. */
62
+ disabled: "#9ca3af",
63
+ // ── Lines / chips / buttons ──────────────────────────────────────────────
64
+ /** `--es-divider` — gray-200. */
65
+ divider: "#e5e7eb",
66
+ /** `--es-line` — gray-200 hairlines. */
67
+ line: "#e5e7eb",
68
+ /** `--es-btn-border` — gray-300. */
69
+ btnBorder: "#d1d5db",
70
+ /** `--es-btn-text` — gray-700. */
71
+ btnText: "#374151",
72
+ /** `--es-chip-bg` — gray-100. */
73
+ chipBg: "#f3f4f6",
74
+ /** `--es-chip-fg` — gray-500. */
75
+ chipFg: "#6b7280",
76
+ // ── Named chrome literals ─────────────────────────────────────────────────
77
+ /** `--es-brand-square` — gray-900 wordmark square. */
78
+ brandSquare: "#111827",
79
+ /** `--es-device-border` — gray-200 tablet/mobile frame. */
80
+ deviceBorder: "#e5e7eb",
81
+ /** `--es-toast-bg` — gray-900 dark chip / seam pill. */
82
+ toastBg: "#111827",
83
+ /** `--es-toggle-off` — gray-300 toggle track. */
84
+ toggleOff: "#d1d5db",
85
+ /** `--es-scrollbar` — gray-300. */
86
+ scrollbar: "#d1d5db",
87
+ /** `--es-scrollbar-hover` — gray-400. */
88
+ scrollbarHover: "#9ca3af",
89
+ // ── Danger / warning (shell red / amber) ──────────────────────────────────
90
+ /** `--es-danger` — red-600. */
91
+ danger: "#dc2626",
92
+ /** `--es-danger-strong` — red-700. */
93
+ dangerStrong: "#b91c1c",
94
+ /** `--es-danger-tint` — red-50. */
95
+ dangerTint: "#fef2f2",
96
+ /** `--es-warning` — amber-700. */
97
+ warning: "#b45309",
98
+ /** `--es-preview-tint` — amber-100 "Preview" pill. */
99
+ previewTint: "#fef3c7",
100
+ // ── Radii / shape / gap ───────────────────────────────────────────────────
101
+ /** `--es-panel-radius`. */
102
+ panelRadius: 12,
103
+ /** `--es-row-radius`. */
104
+ rowRadius: 8,
105
+ /** `--es-field-radius`. */
106
+ fieldRadius: 6,
107
+ /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */
108
+ panelGap: 10,
109
+ // ── Shadows ───────────────────────────────────────────────────────────────
110
+ /** `--es-panel-shadow`. */
111
+ panelShadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)",
112
+ /** `--es-topbar-shadow`. */
113
+ topbarShadow: "0 1px 3px rgba(0, 0, 0, 0.06)",
114
+ // ── Type ──────────────────────────────────────────────────────────────────
115
+ /** `--es-font` — system sans stack (also fed to `--puck-font-family`). */
116
+ font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
117
+ };
118
+ var shellCssVars = {
119
+ accent: "--es-accent",
120
+ accentTint: "--es-accent-tint",
121
+ accentTintStrong: "--es-accent-tint-strong",
122
+ accentText: "--es-accent-text",
123
+ accentRing: "--es-accent-ring",
124
+ accentShadow: "--es-accent-shadow",
125
+ onAccent: "--es-on-accent",
126
+ appBg: "--es-app-bg",
127
+ previewBg: "--es-preview-bg",
128
+ panel: "--es-panel",
129
+ raised: "--es-raised",
130
+ topbarBg: "--es-topbar-bg",
131
+ frameBg: "--es-frame-bg",
132
+ hover: "--es-hover",
133
+ hatch: "--es-hatch",
134
+ addcardVeil: "--es-addcard-veil",
135
+ fieldBg: "--es-field-bg",
136
+ trackBg: "--es-track-bg",
137
+ inputBorder: "--es-input-border",
138
+ fieldText: "--es-field-text",
139
+ fieldPlaceholder: "--es-field-placeholder",
140
+ knob: "--es-knob",
141
+ text: "--es-text",
142
+ textStrong: "--es-text-strong",
143
+ textSecondary: "--es-text-secondary",
144
+ muted: "--es-muted",
145
+ icon: "--es-icon",
146
+ disabled: "--es-disabled",
147
+ divider: "--es-divider",
148
+ line: "--es-line",
149
+ btnBorder: "--es-btn-border",
150
+ btnText: "--es-btn-text",
151
+ chipBg: "--es-chip-bg",
152
+ chipFg: "--es-chip-fg",
153
+ brandSquare: "--es-brand-square",
154
+ deviceBorder: "--es-device-border",
155
+ toastBg: "--es-toast-bg",
156
+ toggleOff: "--es-toggle-off",
157
+ scrollbar: "--es-scrollbar",
158
+ scrollbarHover: "--es-scrollbar-hover",
159
+ danger: "--es-danger",
160
+ dangerStrong: "--es-danger-strong",
161
+ dangerTint: "--es-danger-tint",
162
+ warning: "--es-warning",
163
+ previewTint: "--es-preview-tint",
164
+ panelRadius: "--es-panel-radius",
165
+ rowRadius: "--es-row-radius",
166
+ fieldRadius: "--es-field-radius",
167
+ panelGap: "--es-panel-gap",
168
+ panelShadow: "--es-panel-shadow",
169
+ topbarShadow: "--es-topbar-shadow",
170
+ font: "--es-font"
171
+ };
172
+ var puckAzureRamp = {
173
+ "--puck-color-azure-01": "#172554",
174
+ "--puck-color-azure-02": "#1e3a8a",
175
+ "--puck-color-azure-03": "#1d4ed8",
176
+ "--puck-color-azure-04": "#2563eb",
177
+ "--puck-color-azure-05": "#3b82f6",
178
+ "--puck-color-azure-06": "#60a5fa",
179
+ "--puck-color-azure-07": "#93c5fd",
180
+ "--puck-color-azure-08": "#bfdbfe",
181
+ "--puck-color-azure-09": "#dbeafe",
182
+ "--puck-color-azure-10": "#eff6ff",
183
+ "--puck-color-azure-11": "#f5f9ff",
184
+ "--puck-color-azure-12": "#fafcff"
185
+ };
186
+
187
+ export { puckAzureRamp, shellCssVars, shellTokens };
188
+ //# sourceMappingURL=chunk-N7NW4W3P.js.map
189
+ //# sourceMappingURL=chunk-N7NW4W3P.js.map
package/dist/chunk-N7NW4W3P.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/shell/tokens.ts"],"names":[],"mappings":"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","file":"chunk-N7NW4W3P.js","sourcesContent":["/**\n * Editor SHELL design tokens — the ONE source both editors' chrome converge on.\n *\n * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the\n * editor chrome theme: accent, surfaces, fields, text, lines, chips, named\n * chrome literals, danger/warning, radii, gap, shadows and font. Every value is\n * taken verbatim from the storefront editor's `--sf-*` block\n * (`efficient-shop/components/storefront-editor.css`), the visual reference the\n * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had\n * each re-copied. After card 66024 they all resolve to these values instead.\n *\n * Exposed BOTH ways, per the same value (mirrors the rail):\n * - `shellTokens` — this JS object, for code that needs the numbers/colours\n * (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);\n * - `shell.css` — the stylesheet, which declares the identical values as CSS\n * custom properties on `.es-editor` (names listed in `shellCssVars`).\n *\n * Numeric fields are pixel magnitudes (unitless) so they compose in code; the\n * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so\n * there is a single palette here — no dark counterpart.\n */\nexport const shellTokens = {\n // ── Accent (react-os-shell blue) ──────────────────────────────────────────\n /** `--es-accent` — blue-600. */\n accent: '#2563eb',\n /** `--es-accent-tint` — blue-50. */\n accentTint: '#eff6ff',\n /** `--es-accent-tint-strong` — blue-100. */\n accentTintStrong: '#dbeafe',\n /** `--es-accent-text` — blue-700. */\n accentText: '#1d4ed8',\n /** `--es-accent-ring` — focus ring wash. */\n accentRing: 'rgba(37, 99, 235, 0.25)',\n /** `--es-accent-shadow` — accent button shadow. */\n accentShadow: 'rgba(37, 99, 235, 0.35)',\n /** `--es-on-accent` — text/icon over the solid accent. */\n onAccent: '#ffffff',\n\n // ── Surfaces (cool gray ramp) ─────────────────────────────────────────────\n /** `--es-app-bg` — gray-50, sunken canvas. */\n appBg: '#f9fafb',\n /** `--es-preview-bg` — gray-100, preview well. */\n previewBg: '#f3f4f6',\n /** `--es-panel` — raised cards / panels. */\n panel: '#ffffff',\n /** `--es-raised` — active seg / chip. */\n raised: '#ffffff',\n /** `--es-topbar-bg`. */\n topbarBg: '#ffffff',\n /** `--es-frame-bg` — device \"paper\" behind the preview iframe. */\n frameBg: '#ffffff',\n /** `--es-hover` — gray-100 row / icon hover. */\n hover: '#f3f4f6',\n /** `--es-hatch` — 45° upload-slot texture. */\n hatch: 'rgba(0, 0, 0, 0.018)',\n /** `--es-addcard-veil` — add-section card hover wash. */\n addcardVeil: 'rgba(248, 249, 250, 0.66)',\n\n // ── Fields ────────────────────────────────────────────────────────────────\n /** `--es-field-bg`. */\n fieldBg: '#ffffff',\n /** `--es-track-bg` — gray-100 segmented / search track. */\n trackBg: '#f3f4f6',\n /** `--es-input-border` — gray-300. */\n inputBorder: '#d1d5db',\n /** `--es-field-text` — gray-800. */\n fieldText: '#1f2937',\n /** `--es-field-placeholder` — gray-400. */\n fieldPlaceholder: '#9ca3af',\n /** `--es-knob` — toggle knob. */\n knob: '#ffffff',\n\n // ── Text ────────────────────────────────────────────────────────────────\n /** `--es-text` — gray-900. */\n text: '#111827',\n /** `--es-text-strong` — gray-950 active labels. */\n textStrong: '#030712',\n /** `--es-text-secondary` — gray-700. */\n textSecondary: '#374151',\n /** `--es-muted` — gray-500. */\n muted: '#6b7280',\n /** `--es-icon` — gray-500 icon buttons. */\n icon: '#6b7280',\n /** `--es-disabled` — gray-400 disabled / faint glyphs. */\n disabled: '#9ca3af',\n\n // ── Lines / chips / buttons ──────────────────────────────────────────────\n /** `--es-divider` — gray-200. */\n divider: '#e5e7eb',\n /** `--es-line` — gray-200 hairlines. */\n line: '#e5e7eb',\n /** `--es-btn-border` — gray-300. */\n btnBorder: '#d1d5db',\n /** `--es-btn-text` — gray-700. */\n btnText: '#374151',\n /** `--es-chip-bg` — gray-100. */\n chipBg: '#f3f4f6',\n /** `--es-chip-fg` — gray-500. */\n chipFg: '#6b7280',\n\n // ── Named chrome literals ─────────────────────────────────────────────────\n /** `--es-brand-square` — gray-900 wordmark square. */\n brandSquare: '#111827',\n /** `--es-device-border` — gray-200 tablet/mobile frame. */\n deviceBorder: '#e5e7eb',\n /** `--es-toast-bg` — gray-900 dark chip / seam pill. */\n toastBg: '#111827',\n /** `--es-toggle-off` — gray-300 toggle track. */\n toggleOff: '#d1d5db',\n /** `--es-scrollbar` — gray-300. */\n scrollbar: '#d1d5db',\n /** `--es-scrollbar-hover` — gray-400. */\n scrollbarHover: '#9ca3af',\n\n // ── Danger / warning (shell red / amber) ──────────────────────────────────\n /** `--es-danger` — red-600. */\n danger: '#dc2626',\n /** `--es-danger-strong` — red-700. */\n dangerStrong: '#b91c1c',\n /** `--es-danger-tint` — red-50. */\n dangerTint: '#fef2f2',\n /** `--es-warning` — amber-700. */\n warning: '#b45309',\n /** `--es-preview-tint` — amber-100 \"Preview\" pill. */\n previewTint: '#fef3c7',\n\n // ── Radii / shape / gap ───────────────────────────────────────────────────\n /** `--es-panel-radius`. */\n panelRadius: 12,\n /** `--es-row-radius`. */\n rowRadius: 8,\n /** `--es-field-radius`. */\n fieldRadius: 6,\n /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */\n panelGap: 10,\n\n // ── Shadows ───────────────────────────────────────────────────────────────\n /** `--es-panel-shadow`. */\n panelShadow: '0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)',\n /** `--es-topbar-shadow`. */\n topbarShadow: '0 1px 3px rgba(0, 0, 0, 0.06)',\n\n // ── Type ──────────────────────────────────────────────────────────────────\n /** `--es-font` — system sans stack (also fed to `--puck-font-family`). */\n font: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n} as const;\n\nexport type ShellTokens = typeof shellTokens;\n\n/**\n * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets\n * these on `.es-editor`; override any of them on (or above) the editor root to\n * re-theme without shipping new CSS. The `shell-tokens.test.ts` parity gate\n * proves this map, `shellTokens` and `shell.css` never drift apart.\n */\nexport const shellCssVars: Record<keyof ShellTokens, string> = {\n accent: '--es-accent',\n accentTint: '--es-accent-tint',\n accentTintStrong: '--es-accent-tint-strong',\n accentText: '--es-accent-text',\n accentRing: '--es-accent-ring',\n accentShadow: '--es-accent-shadow',\n onAccent: '--es-on-accent',\n appBg: '--es-app-bg',\n previewBg: '--es-preview-bg',\n panel: '--es-panel',\n raised: '--es-raised',\n topbarBg: '--es-topbar-bg',\n frameBg: '--es-frame-bg',\n hover: '--es-hover',\n hatch: '--es-hatch',\n addcardVeil: '--es-addcard-veil',\n fieldBg: '--es-field-bg',\n trackBg: '--es-track-bg',\n inputBorder: '--es-input-border',\n fieldText: '--es-field-text',\n fieldPlaceholder: '--es-field-placeholder',\n knob: '--es-knob',\n text: '--es-text',\n textStrong: '--es-text-strong',\n textSecondary: '--es-text-secondary',\n muted: '--es-muted',\n icon: '--es-icon',\n disabled: '--es-disabled',\n divider: '--es-divider',\n line: '--es-line',\n btnBorder: '--es-btn-border',\n btnText: '--es-btn-text',\n chipBg: '--es-chip-bg',\n chipFg: '--es-chip-fg',\n brandSquare: '--es-brand-square',\n deviceBorder: '--es-device-border',\n toastBg: '--es-toast-bg',\n toggleOff: '--es-toggle-off',\n scrollbar: '--es-scrollbar',\n scrollbarHover: '--es-scrollbar-hover',\n danger: '--es-danger',\n dangerStrong: '--es-danger-strong',\n dangerTint: '--es-danger-tint',\n warning: '--es-warning',\n previewTint: '--es-preview-tint',\n panelRadius: '--es-panel-radius',\n rowRadius: '--es-row-radius',\n fieldRadius: '--es-field-radius',\n panelGap: '--es-panel-gap',\n panelShadow: '--es-panel-shadow',\n topbarShadow: '--es-topbar-shadow',\n font: '--es-font',\n};\n\n/**\n * Puck's own accent ramp + font, re-tinted to the shell blue. Puck reads these\n * fixed variable names (`--puck-color-azure-NN`, `--puck-font-family`) directly,\n * so they are NOT part of the `--es-*` set — but they had been copied verbatim\n * into BOTH editors' CSS, so `shell.css` now declares them once on `.es-editor`.\n * Kept here as the JS record so the parity gate can prove `shell.css` matches.\n */\nexport const puckAzureRamp: Record<string, string> = {\n '--puck-color-azure-01': '#172554',\n '--puck-color-azure-02': '#1e3a8a',\n '--puck-color-azure-03': '#1d4ed8',\n '--puck-color-azure-04': '#2563eb',\n '--puck-color-azure-05': '#3b82f6',\n '--puck-color-azure-06': '#60a5fa',\n '--puck-color-azure-07': '#93c5fd',\n '--puck-color-azure-08': '#bfdbfe',\n '--puck-color-azure-09': '#dbeafe',\n '--puck-color-azure-10': '#eff6ff',\n '--puck-color-azure-11': '#f5f9ff',\n '--puck-color-azure-12': '#fafcff',\n};\n"]}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { AddIcon, EditorRail, EditorRailButton, EditorRailButtonProps, EditorRailItem, EditorRailProps, LayersIcon, MediaIcon, PagesIcon, RailIconProps, RailTokens, SitemapIcon, StylesIcon, railCssVars, railTokens } from './rail/index.js';
2
+ export { ShellTokens, puckAzureRamp, shellCssVars, shellTokens } from './shell/index.js';
2
3
  import 'react';
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { puckAzureRamp, shellCssVars, shellTokens } from './chunk-N7NW4W3P.js';
1
2
  export { AddIcon, EditorRail, EditorRailButton, LayersIcon, MediaIcon, PagesIcon, SitemapIcon, StylesIcon, railCssVars, railTokens } from './chunk-WJIHF6PY.js';
2
3
  //# sourceMappingURL=index.js.map
3
4
  //# sourceMappingURL=index.js.map
package/dist/shell/index.d.ts ADDED
@@ -0,0 +1,145 @@
1
+ /**
2
+ * Editor SHELL design tokens — the ONE source both editors' chrome converge on.
3
+ *
4
+ * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the
5
+ * editor chrome theme: accent, surfaces, fields, text, lines, chips, named
6
+ * chrome literals, danger/warning, radii, gap, shadows and font. Every value is
7
+ * taken verbatim from the storefront editor's `--sf-*` block
8
+ * (`efficient-shop/components/storefront-editor.css`), the visual reference the
9
+ * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had
10
+ * each re-copied. After card 66024 they all resolve to these values instead.
11
+ *
12
+ * Exposed BOTH ways, per the same value (mirrors the rail):
13
+ * - `shellTokens` — this JS object, for code that needs the numbers/colours
14
+ * (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);
15
+ * - `shell.css` — the stylesheet, which declares the identical values as CSS
16
+ * custom properties on `.es-editor` (names listed in `shellCssVars`).
17
+ *
18
+ * Numeric fields are pixel magnitudes (unitless) so they compose in code; the
19
+ * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so
20
+ * there is a single palette here — no dark counterpart.
21
+ */
22
+ declare const shellTokens: {
23
+ /** `--es-accent` — blue-600. */
24
+ readonly accent: "#2563eb";
25
+ /** `--es-accent-tint` — blue-50. */
26
+ readonly accentTint: "#eff6ff";
27
+ /** `--es-accent-tint-strong` — blue-100. */
28
+ readonly accentTintStrong: "#dbeafe";
29
+ /** `--es-accent-text` — blue-700. */
30
+ readonly accentText: "#1d4ed8";
31
+ /** `--es-accent-ring` — focus ring wash. */
32
+ readonly accentRing: "rgba(37, 99, 235, 0.25)";
33
+ /** `--es-accent-shadow` — accent button shadow. */
34
+ readonly accentShadow: "rgba(37, 99, 235, 0.35)";
35
+ /** `--es-on-accent` — text/icon over the solid accent. */
36
+ readonly onAccent: "#ffffff";
37
+ /** `--es-app-bg` — gray-50, sunken canvas. */
38
+ readonly appBg: "#f9fafb";
39
+ /** `--es-preview-bg` — gray-100, preview well. */
40
+ readonly previewBg: "#f3f4f6";
41
+ /** `--es-panel` — raised cards / panels. */
42
+ readonly panel: "#ffffff";
43
+ /** `--es-raised` — active seg / chip. */
44
+ readonly raised: "#ffffff";
45
+ /** `--es-topbar-bg`. */
46
+ readonly topbarBg: "#ffffff";
47
+ /** `--es-frame-bg` — device "paper" behind the preview iframe. */
48
+ readonly frameBg: "#ffffff";
49
+ /** `--es-hover` — gray-100 row / icon hover. */
50
+ readonly hover: "#f3f4f6";
51
+ /** `--es-hatch` — 45° upload-slot texture. */
52
+ readonly hatch: "rgba(0, 0, 0, 0.018)";
53
+ /** `--es-addcard-veil` — add-section card hover wash. */
54
+ readonly addcardVeil: "rgba(248, 249, 250, 0.66)";
55
+ /** `--es-field-bg`. */
56
+ readonly fieldBg: "#ffffff";
57
+ /** `--es-track-bg` — gray-100 segmented / search track. */
58
+ readonly trackBg: "#f3f4f6";
59
+ /** `--es-input-border` — gray-300. */
60
+ readonly inputBorder: "#d1d5db";
61
+ /** `--es-field-text` — gray-800. */
62
+ readonly fieldText: "#1f2937";
63
+ /** `--es-field-placeholder` — gray-400. */
64
+ readonly fieldPlaceholder: "#9ca3af";
65
+ /** `--es-knob` — toggle knob. */
66
+ readonly knob: "#ffffff";
67
+ /** `--es-text` — gray-900. */
68
+ readonly text: "#111827";
69
+ /** `--es-text-strong` — gray-950 active labels. */
70
+ readonly textStrong: "#030712";
71
+ /** `--es-text-secondary` — gray-700. */
72
+ readonly textSecondary: "#374151";
73
+ /** `--es-muted` — gray-500. */
74
+ readonly muted: "#6b7280";
75
+ /** `--es-icon` — gray-500 icon buttons. */
76
+ readonly icon: "#6b7280";
77
+ /** `--es-disabled` — gray-400 disabled / faint glyphs. */
78
+ readonly disabled: "#9ca3af";
79
+ /** `--es-divider` — gray-200. */
80
+ readonly divider: "#e5e7eb";
81
+ /** `--es-line` — gray-200 hairlines. */
82
+ readonly line: "#e5e7eb";
83
+ /** `--es-btn-border` — gray-300. */
84
+ readonly btnBorder: "#d1d5db";
85
+ /** `--es-btn-text` — gray-700. */
86
+ readonly btnText: "#374151";
87
+ /** `--es-chip-bg` — gray-100. */
88
+ readonly chipBg: "#f3f4f6";
89
+ /** `--es-chip-fg` — gray-500. */
90
+ readonly chipFg: "#6b7280";
91
+ /** `--es-brand-square` — gray-900 wordmark square. */
92
+ readonly brandSquare: "#111827";
93
+ /** `--es-device-border` — gray-200 tablet/mobile frame. */
94
+ readonly deviceBorder: "#e5e7eb";
95
+ /** `--es-toast-bg` — gray-900 dark chip / seam pill. */
96
+ readonly toastBg: "#111827";
97
+ /** `--es-toggle-off` — gray-300 toggle track. */
98
+ readonly toggleOff: "#d1d5db";
99
+ /** `--es-scrollbar` — gray-300. */
100
+ readonly scrollbar: "#d1d5db";
101
+ /** `--es-scrollbar-hover` — gray-400. */
102
+ readonly scrollbarHover: "#9ca3af";
103
+ /** `--es-danger` — red-600. */
104
+ readonly danger: "#dc2626";
105
+ /** `--es-danger-strong` — red-700. */
106
+ readonly dangerStrong: "#b91c1c";
107
+ /** `--es-danger-tint` — red-50. */
108
+ readonly dangerTint: "#fef2f2";
109
+ /** `--es-warning` — amber-700. */
110
+ readonly warning: "#b45309";
111
+ /** `--es-preview-tint` — amber-100 "Preview" pill. */
112
+ readonly previewTint: "#fef3c7";
113
+ /** `--es-panel-radius`. */
114
+ readonly panelRadius: 12;
115
+ /** `--es-row-radius`. */
116
+ readonly rowRadius: 8;
117
+ /** `--es-field-radius`. */
118
+ readonly fieldRadius: 6;
119
+ /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */
120
+ readonly panelGap: 10;
121
+ /** `--es-panel-shadow`. */
122
+ readonly panelShadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)";
123
+ /** `--es-topbar-shadow`. */
124
+ readonly topbarShadow: "0 1px 3px rgba(0, 0, 0, 0.06)";
125
+ /** `--es-font` — system sans stack (also fed to `--puck-font-family`). */
126
+ readonly font: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif";
127
+ };
128
+ type ShellTokens = typeof shellTokens;
129
+ /**
130
+ * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets
131
+ * these on `.es-editor`; override any of them on (or above) the editor root to
132
+ * re-theme without shipping new CSS. The `shell-tokens.test.ts` parity gate
133
+ * proves this map, `shellTokens` and `shell.css` never drift apart.
134
+ */
135
+ declare const shellCssVars: Record<keyof ShellTokens, string>;
136
+ /**
137
+ * Puck's own accent ramp + font, re-tinted to the shell blue. Puck reads these
138
+ * fixed variable names (`--puck-color-azure-NN`, `--puck-font-family`) directly,
139
+ * so they are NOT part of the `--es-*` set — but they had been copied verbatim
140
+ * into BOTH editors' CSS, so `shell.css` now declares them once on `.es-editor`.
141
+ * Kept here as the JS record so the parity gate can prove `shell.css` matches.
142
+ */
143
+ declare const puckAzureRamp: Record<string, string>;
144
+
145
+ export { type ShellTokens, puckAzureRamp, shellCssVars, shellTokens };
package/dist/shell/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { puckAzureRamp, shellCssVars, shellTokens } from '../chunk-N7NW4W3P.js';
2
+ //# sourceMappingURL=index.js.map
3
+ //# sourceMappingURL=index.js.map
package/dist/shell/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
package/dist/shell/shell.css ADDED
@@ -0,0 +1,112 @@
1
+ /*
2
+ * editor-shell — shell chrome tokens.
3
+ *
4
+ * The values here mirror `shellTokens` in tokens.ts one-for-one (both trace back
5
+ * to the storefront editor's `--sf-*` block — the visual reference). They are
6
+ * declared as custom properties ON `.es-editor`, not on `:root`, so importing
7
+ * this stylesheet themes ONLY an editor root and never leaks variables into the
8
+ * host page (the campaign designer renders INSIDE the admin DOM, so this must
9
+ * not touch the surrounding app).
10
+ *
11
+ * Both editors add the `es-editor` class to their chrome root and alias their
12
+ * own `--sf-*` / `--cd-*` names onto these — e.g. `--sf-accent: var(--es-accent)`
13
+ * — so the light values live ONCE, here. Re-theme by overriding any `--es-*` var
14
+ * on or above the editor root.
15
+ *
16
+ * LIGHT only: both editing surfaces always render light (no dark mode), so there
17
+ * is no dark counterpart block — do not add one.
18
+ *
19
+ * Import once from a client entry / global stylesheet:
20
+ * import 'editor-shell/shell.css';
21
+ */
22
+
23
+ .es-editor {
24
+ /* — accent (react-os-shell blue) — */
25
+ --es-accent: #2563eb;
26
+ --es-accent-tint: #eff6ff;
27
+ --es-accent-tint-strong: #dbeafe;
28
+ --es-accent-text: #1d4ed8;
29
+ --es-accent-ring: rgba(37, 99, 235, 0.25);
30
+ --es-accent-shadow: rgba(37, 99, 235, 0.35);
31
+ --es-on-accent: #ffffff;
32
+
33
+ /* — surfaces (cool gray ramp) — */
34
+ --es-app-bg: #f9fafb;
35
+ --es-preview-bg: #f3f4f6;
36
+ --es-panel: #ffffff;
37
+ --es-raised: #ffffff;
38
+ --es-topbar-bg: #ffffff;
39
+ --es-frame-bg: #ffffff;
40
+ --es-hover: #f3f4f6;
41
+ --es-hatch: rgba(0, 0, 0, 0.018);
42
+ --es-addcard-veil: rgba(248, 249, 250, 0.66);
43
+
44
+ /* — fields — */
45
+ --es-field-bg: #ffffff;
46
+ --es-track-bg: #f3f4f6;
47
+ --es-input-border: #d1d5db;
48
+ --es-field-text: #1f2937;
49
+ --es-field-placeholder: #9ca3af;
50
+ --es-knob: #ffffff;
51
+
52
+ /* — text — */
53
+ --es-text: #111827;
54
+ --es-text-strong: #030712;
55
+ --es-text-secondary: #374151;
56
+ --es-muted: #6b7280;
57
+ --es-icon: #6b7280;
58
+ --es-disabled: #9ca3af;
59
+
60
+ /* — lines / chips / buttons — */
61
+ --es-divider: #e5e7eb;
62
+ --es-line: #e5e7eb;
63
+ --es-btn-border: #d1d5db;
64
+ --es-btn-text: #374151;
65
+ --es-chip-bg: #f3f4f6;
66
+ --es-chip-fg: #6b7280;
67
+
68
+ /* — named chrome literals — */
69
+ --es-brand-square: #111827;
70
+ --es-device-border: #e5e7eb;
71
+ --es-toast-bg: #111827;
72
+ --es-toggle-off: #d1d5db;
73
+ --es-scrollbar: #d1d5db;
74
+ --es-scrollbar-hover: #9ca3af;
75
+
76
+ /* — danger / warning (shell red / amber) — */
77
+ --es-danger: #dc2626;
78
+ --es-danger-strong: #b91c1c;
79
+ --es-danger-tint: #fef2f2;
80
+ --es-warning: #b45309;
81
+ --es-preview-tint: #fef3c7;
82
+
83
+ /* — radii / shape / gap — */
84
+ --es-panel-radius: 12px;
85
+ --es-row-radius: 8px;
86
+ --es-field-radius: 6px;
87
+ --es-panel-gap: 10px;
88
+
89
+ /* — shadows — */
90
+ --es-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
91
+ --es-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
92
+
93
+ /* — type — */
94
+ --es-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
95
+
96
+ /* — Puck's own accent ramp + font, re-tinted to the shell blue. Puck reads
97
+ these fixed names directly; declared once here so both editors stop copying
98
+ the ramp verbatim (see puckAzureRamp in tokens.ts). — */
99
+ --puck-color-azure-01: #172554;
100
+ --puck-color-azure-02: #1e3a8a;
101
+ --puck-color-azure-03: #1d4ed8;
102
+ --puck-color-azure-04: #2563eb;
103
+ --puck-color-azure-05: #3b82f6;
104
+ --puck-color-azure-06: #60a5fa;
105
+ --puck-color-azure-07: #93c5fd;
106
+ --puck-color-azure-08: #bfdbfe;
107
+ --puck-color-azure-09: #dbeafe;
108
+ --puck-color-azure-10: #eff6ff;
109
+ --puck-color-azure-11: #f5f9ff;
110
+ --puck-color-azure-12: #fafcff;
111
+ --puck-font-family: var(--es-font);
112
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "editor-shell",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Shared editor-chrome primitives for the EFFICIENT editors. First brick: EditorRail — one shared left icon-rail, consumable as a Next-16-safe leaf.",
5
5
  "license": "MIT",
6
6
  "author": "Lewis Liu",
@@ -28,7 +28,12 @@
28
28
  "types": "./dist/rail/index.d.ts",
29
29
  "import": "./dist/rail/index.js"
30
30
  },
31
- "./rail.css": "./dist/rail/rail.css"
31
+ "./rail.css": "./dist/rail/rail.css",
32
+ "./shell": {
33
+ "types": "./dist/shell/index.d.ts",
34
+ "import": "./dist/shell/index.js"
35
+ },
36
+ "./shell.css": "./dist/shell/shell.css"
32
37
  },
33
38
  "files": [
34
39
  "dist"
@@ -49,7 +54,7 @@
49
54
  "typescript": "^5.3.0"
50
55
  },
51
56
  "scripts": {
52
- "build": "tsup && cp src/rail/rail.css dist/rail/rail.css",
57
+ "build": "tsup && cp src/rail/rail.css dist/rail/rail.css && cp src/shell/shell.css dist/shell/shell.css",
53
58
  "dev": "tsup --watch",
54
59
  "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json",
55
60
  "test": "node scripts/test.mjs",