efficient-easel 0.0.0 → 0.97.0

package/dist/chrome/chrome.css

@@ -0,0 +1,570 @@
+/*
+ * efficient-easel/chrome.css — the editor frame: top bar, device switch, save pill,
+ * flat side panels, resize grips, inspector head.
+ *
+ * EVERY VALUE HERE WAS READ OFF `efficient-shop/components/storefront-editor.css`
+ * on origin/main (release 14.24.0, 2026-09-17), where the website editor drew
+ * these parts as `.sf-*`. Each `--sf-*` token it spent is an alias of the
+ * `--es-*` token spent here (`--sf-muted: var(--es-muted)` and so on), so the
+ * colours are the same colours, not copies of them.
+ *
+ * Needs `efficient-easel/shell.css` for the `--es-*` tokens. Widths come in as
+ * `--es-left-w` / `--es-right-w` from `panelWidthVars()`, set on the editor ROOT.
+ *
+ * Light only (owner, 2026-08-06: no dark mode in the editor or the designer).
+ */
+
+/* ── Top bar ─────────────────────────────────────────────────────────────── */
+.es-topbar {
+  box-sizing: border-box;
+  height: var(--es-topbar-h, 52px);
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* NO LEFT PADDING. The leftmost thing in the bar is the editor's left COLUMN
+     (`.es-cluster--rail`), and a column starts where the panel under it starts.
+     A 12px inset put the rail 12px right of its panel — the owner's third report
+     on this one column, 2026-09-04. The right edge really is the bar's own. */
+  padding: 0 12px 0 0;
+  background: var(--es-topbar-bg);
+  box-shadow: var(--es-topbar-shadow);
+  position: relative;
+  z-index: 20;
+}
+.es-cluster {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.es-cluster--right {
+  gap: 8px;
+  justify-content: flex-end;
+}
+.es-cluster--rail {
+  /* `flex: none` IS THE WIDTH. The bar is a flex row, so `width` alone is only a
+     basis, and the default shrink hands it back the moment the three clusters
+     want more room than the window has — the column collapses to its buttons
+     with a correct `width` sitting right here (found twice on :5173, 2026-09-04). */
+  flex: none;
+  width: var(--es-left-w);
+  box-sizing: border-box;
+  height: 100%;
+  gap: 0;
+  border-right: 1px solid var(--es-line);
+}
+.es-cluster--rail .es-rail {
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+.es-cluster--rail .es-rail-btn {
+  position: relative;
+}
+/* The one thing in the bar that knows where the panel is: a small accent
+   triangle hanging under the active rail button, pointing at the panel it
+   opened. The bar is 52px and the button 34, which leaves 9px; the triangle
+   takes 5. A clip-path shape, not the border trick — a directional border reads
+   as a divider to the no-divider-lines guard. */
+.es-cluster--rail .es-rail-btn.is-active::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -9px;
+  transform: translateX(-50%);
+  width: 10px;
+  height: 5px;
+  background: var(--es-accent);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.es-divider-v {
+  width: 1px;
+  height: 22px;
+  background: var(--es-divider);
+  margin: 0 4px;
+}
+
+/* ── Icon buttons ────────────────────────────────────────────────────────── */
+.es-iconbtn {
+  width: 30px;
+  height: 30px;
+  border: none;
+  background: transparent;
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--es-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.12s, color 0.12s;
+  text-decoration: none;
+}
+.es-iconbtn:hover:not(:disabled) {
+  background: var(--es-hover);
+}
+.es-iconbtn:disabled {
+  color: var(--es-disabled);
+  cursor: default;
+}
+.es-iconbtn--active {
+  color: var(--es-text-strong);
+}
+.es-iconbtn--inactive {
+  color: var(--es-disabled);
+}
+.es-iconbtn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Device switch ───────────────────────────────────────────────────────── */
+.es-devseg {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--es-track-bg);
+  border-radius: 9px;
+  padding: 3px;
+}
+.es-devseg button {
+  width: 30px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--es-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
+}
+.es-devseg button.is-active {
+  background: var(--es-raised);
+  color: var(--es-text-strong);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
+}
+.es-devseg button svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* ── Top-bar buttons ─────────────────────────────────────────────────────── */
+.es-btn-ghost {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border: 1px solid var(--es-btn-border);
+  background: var(--es-panel);
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--es-btn-text);
+  white-space: nowrap;
+  transition: background 0.12s;
+  text-decoration: none;
+}
+.es-btn-ghost:hover:not(:disabled) {
+  background: var(--es-hover);
+}
+.es-btn-ghost:disabled {
+  color: var(--es-disabled);
+  border-color: var(--es-btn-border);
+  background: var(--es-panel);
+  cursor: default;
+}
+.es-btn-ghost:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 2px;
+}
+/* The ONE primary button in the bar (Publish on the website). */
+.es-btn-primary {
+  padding: 7px 16px;
+  border: none;
+  background: var(--es-accent);
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--es-on-accent);
+  white-space: nowrap;
+  box-shadow: 0 1px 2px var(--es-accent-shadow);
+  transition: filter 0.12s;
+}
+.es-btn-primary:hover {
+  filter: brightness(1.06);
+}
+
+/* ── Save pill ───────────────────────────────────────────────────────────── */
+.es-savestate {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  user-select: none;
+  color: var(--es-muted);
+}
+.es-savestate-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+/* Saved, so no words (card 66103). It keeps its box: the pill is also the
+   autosave switch, and a control that vanishes when idle cannot be clicked.
+   `min-width` holds the footprint so the bar does not reflow on every save. */
+.es-savestate.is-quiet {
+  color: var(--es-muted);
+  min-width: 27px;
+  justify-content: center;
+}
+/* Rides ON is-quiet: a colour and nothing else. */
+.es-savestate.is-saved {
+  color: var(--es-success);
+}
+.es-savestate.is-saving {
+  color: var(--es-warning);
+}
+.es-savestate.is-error {
+  color: var(--es-danger);
+}
+.es-savestate-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+  border-radius: 8px;
+}
+.es-savestate-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--es-accent-shadow);
+}
+.es-savestate-toggle .es-savestate {
+  border: 1px solid transparent;
+}
+.es-savestate-toggle:hover .es-savestate {
+  background: var(--es-hover);
+}
+/* Paused: boxed, so it reads as a switch turned off, not a passive label. */
+.es-savestate.is-off {
+  color: var(--es-muted);
+  background: var(--es-hover);
+  border-color: var(--es-btn-border);
+}
+/* Paused AND an edit is waiting: amber, so held work is never invisible. */
+.es-savestate.is-off.is-unsaved {
+  color: var(--es-warning);
+  border-color: var(--es-warning);
+}
+/* The wait, drawn: a ring that empties ONCE (owner, 2026-09-09). Never a repeat
+   count above 1 — that is the blinking dot card 66103 removed. The duration is
+   handed in as `--es-savewait` from the editor's debounce; the fallback only
+   covers a caller that forgot to pass it. */
+@property --es-wait {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 360deg;
+}
+@keyframes es-savewait {
+  from { --es-wait: 360deg }
+  to   { --es-wait: 0deg }
+}
+.es-savestate-ring {
+  width: 11px;
+  height: 11px;
+  flex: none;
+  border-radius: 50%;
+  background: conic-gradient(currentColor var(--es-wait), transparent 0);
+  -webkit-mask: radial-gradient(circle, transparent 3.1px, #000 3.4px);
+  mask: radial-gradient(circle, transparent 3.1px, #000 3.4px);
+}
+/* `forwards`: hold empty until the save lands, never snap back to full. */
+.es-savestate-ring.is-counting {
+  animation: es-savewait var(--es-savewait, 10s) linear forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .es-savestate-ring.is-counting { animation: none }
+}
+
+/* ── Side panels: flat ───────────────────────────────────────────────────── */
+/* Lines, not floating cards (owner, card 66161, for the website editor; carried
+   to the campaign editor by the 2026-09-17 redesign). Gaps, corners and shadows
+   hold nothing, and on a 1280px laptop they cost the canvas 50px. The border is
+   drawn inside the panel's own width, so a panel stays 288 / 320. */
+.es-sidepanel {
+  box-sizing: border-box;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--es-panel);
+  overflow: hidden;
+  position: relative;
+  /* A size container: a panel is DRAGGED between 220 and 560, so its contents
+     ask the panel's width, never the screen's. */
+  container-type: inline-size;
+}
+.es-sidepanel--left {
+  width: var(--es-left-w);
+  border-right: 1px solid var(--es-line);
+}
+.es-sidepanel--right {
+  width: var(--es-right-w);
+  border-left: 1px solid var(--es-line);
+}
+.es-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 14px 11px;
+  flex: none;
+}
+/* A panel's own name. States the margin an h2 would otherwise bring. */
+.es-panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--es-text);
+  margin: 0;
+}
+.es-panel-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* ── Resize grips ────────────────────────────────────────────────────────── */
+/* An absolute child of the panel row, pinned over the panel↔canvas seam from the
+   same width vars the panels read. The 9px hit area is invisible at rest; a 2px
+   bar on the seam tints to the accent on hover and focus. The host's panel row
+   must be `position: relative`. */
+.es-resizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 9px;
+  z-index: 5;
+  display: flex;
+  cursor: col-resize;
+  touch-action: none;
+}
+.es-resizer--left {
+  left: var(--es-left-w);
+  justify-content: flex-start;
+}
+.es-resizer--right {
+  right: var(--es-right-w);
+  justify-content: flex-end;
+}
+.es-resizer-bar {
+  width: 2px;
+  border-radius: 2px;
+  background: transparent;
+  transition: background 0.12s;
+}
+.es-resizer:hover .es-resizer-bar,
+.es-resizer:focus-visible .es-resizer-bar {
+  background: var(--es-accent);
+}
+.es-resizer:focus {
+  outline: none;
+}
+body.es-col-resizing,
+body.es-col-resizing * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+body.es-col-resizing iframe {
+  pointer-events: none !important;
+}
+
+/* ── Inspector head ──────────────────────────────────────────────────────── */
+/* ↰ Go up one level: a quiet full-width row above the inspector head
+   (campaign designer UpLevelControl, card 66042). The whole row is the button. */
+.es-insp-up {
+  display: flex;
+  align-items: center;
+  flex: none;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--es-divider);
+}
+.es-insp-up-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  color: var(--es-muted);
+  text-align: left;
+  transition: background 0.12s, color 0.12s;
+}
+.es-insp-up-btn:hover {
+  background: var(--es-hover);
+  color: var(--es-text);
+}
+.es-insp-up-btn:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 1px;
+}
+.es-insp-up-icon {
+  display: inline-flex;
+  flex: none;
+}
+.es-insp-up-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.es-insp-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  flex: none;
+}
+.es-insp-chip {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  flex: none;
+  background: var(--es-chip-bg);
+  color: var(--es-icon);
+}
+.es-insp-chip svg {
+  width: 15px;
+  height: 15px;
+}
+.es-insp-titles {
+  flex: 1;
+  min-width: 0;
+}
+/* An h2 carries `0.83em 0` from the UA sheet; `margin: 0` keeps the head closed. */
+.es-insp-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--es-text);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.es-insp-kind {
+  font-size: 11px;
+  color: var(--es-muted);
+}
+.es-insp-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+}
+.es-insp-iconbtn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--es-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.12s, color 0.12s;
+}
+.es-insp-iconbtn:hover {
+  background: var(--es-hover);
+  color: var(--es-text-strong);
+}
+.es-insp-iconbtn--danger:hover {
+  background: var(--es-danger-tint);
+  color: var(--es-danger);
+}
+.es-insp-iconbtn[aria-expanded="true"] {
+  background: var(--es-accent-tint);
+  color: var(--es-accent);
+}
+
+/* ── Edit notice — somebody else is in here, or a save was refused ───────── */
+/* A bar under the top bar, never a dialog (blueprint 2.5): the operator has to
+   be able to read and copy from the screen it warns them about. No token of its
+   own — the amber is the shell's amber tint (`--es-preview-tint`) eased into the
+   panel white, edged with `--es-warning`, so a re-themed editor re-themes it. */
+.es-notice {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 16px;
+  font-family: var(--es-font);
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--es-text-secondary);
+  background: var(--es-app-bg);
+  border-bottom: 1px solid var(--es-divider);
+}
+.es-notice.is-warning {
+  color: var(--es-text);
+  background: color-mix(in srgb, var(--es-preview-tint) 70%, var(--es-panel));
+  border-bottom-color: color-mix(in srgb, var(--es-warning) 30%, var(--es-preview-tint));
+}
+.es-notice-text {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+.es-notice-text strong {
+  font-weight: 600;
+  color: var(--es-text-strong);
+}
+.es-notice-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.es-notice-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 10px;
+  border: 1px solid var(--es-btn-border);
+  border-radius: var(--es-field-radius);
+  background: var(--es-raised);
+  color: var(--es-btn-text);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.es-notice-btn:hover {
+  background: var(--es-hover);
+}
+.es-notice-btn:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 1px;
+}