efficient-easel 0.106.0 → 1.0.0

package/dist/screen/screen.css

@@ -15,13 +15,19 @@
  * draws to a rule in them.
  * The `sf-` names are kept: the hosts' sheets and their guards address them.
  *
+ * The `--sf-*` aliases below stay (hosts read them), but they resolve through
+ * `--es-*` to efficient-shell's tokens since UI-24 (efficient-harness#117):
+ * a host that loads the shell's CSS first gets the shell's theme, dark
+ * included, in every `--sf-*` name too. `--sf-frame-bg` is the canvas's
+ * paper — output, not chrome — and stays the page's white.
+ *
  * Load it after the other easel sheets and before a host's own sheet, which is
  * where these rules sat in the builder's; that order is the one the cascade
  * was measured in.
  */
 
 .sf-editor {
-  /* ── Accent (efficient-shell blue) ───────────────────────────────────── */
+  /* ── Accent (efficient-shell's) ──────────────────────────────────────── */
   --sf-accent: var(--es-accent);
   --sf-accent-tint: var(--es-accent-tint);
   --sf-accent-tint-strong: var(--es-accent-tint-strong);
@@ -30,7 +36,7 @@
   --sf-accent-shadow: var(--es-accent-shadow);
   --sf-on-accent: var(--es-on-accent);
 
-  /* ── Surfaces (cool gray ramp) ──────────────────────────────────────── */
+  /* ── Surfaces (shell ramp) ──────────────────────────────────────────── */
   --sf-app-bg: var(--es-app-bg);
   --sf-preview-bg: var(--es-preview-bg);
   --sf-panel: var(--es-panel);
@@ -70,7 +76,7 @@
   --sf-scrollbar: var(--es-scrollbar);
   --sf-scrollbar-hover: var(--es-scrollbar-hover);
 
-  /* ── Danger / warning / success (shell red / amber / green) ─────────── */
+  /* ── Danger / warning / success (shell status tiers) ───────────────── */
   --sf-danger: var(--es-danger);
   --sf-danger-strong: var(--es-danger-strong);
   --sf-danger-tint: var(--es-danger-tint);
@@ -222,7 +228,7 @@
 
 .sf-scroll::-webkit-scrollbar-thumb {
   background: var(--sf-scrollbar);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   border: 3px solid transparent;
   background-clip: content-box;
 }
@@ -277,9 +283,9 @@
 /* THE SIDE PANELS AND THEIR GRIPS ARE editor-shell's (efficient-easel/chrome.css):
    `.es-sidepanel` — flush, a hairline on the SEAM side only (card 66161: draw the
    seams, leave the outer edges alone), the size-container context every
-   `@container` rule in this sheet asks (card 66212) — and `.es-resizer`, pinned
-   over each seam from `--es-left-w` / `--es-right-w`, with the drag's
-   `body.es-col-resizing`. Lifted from this sheet (redesign 2a). The panels keep
+   `@container` rule in this sheet asks (card 66212) — and `.es-resizer` (the
+   shell's `ResizeHandle` since 1.0.0), pinned over each seam from
+   `--es-left-w` / `--es-right-w`. Lifted from this sheet (redesign 2a). The panels keep
    `.sf-panel` / `.sf-panel--left|right` as well, which is what this sheet's own
    descendant rules (`.sf-panel--right .sf-insp-body`, …) hang on. */
 .sf-panel-head {
@@ -381,7 +387,7 @@
 .sf-chip {
   width: 18px;
   height: 18px;
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -434,21 +440,28 @@
   padding: 6px 9px;
   border: none;
   background: transparent;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
   color: var(--sf-accent);
   font-size: 12px;
   font-weight: 500;
 }
 
-.sf-add-card:hover {
+.sf-add-card:hover:not([aria-disabled='true']) {
   background: var(--sf-accent-tint);
 }
 
+/* Off with a reason (`aria-disabled`, so the keyboard reaches it and hears
+   why): the shell's own disabled fade, which only `:disabled` would draw. */
+.sf-add-card[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .sf-add-card .sf-plus {
   width: 18px;
   height: 18px;
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -457,81 +470,10 @@
   background: var(--sf-accent-tint);
 }
 
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  margin: 2px 0 4px;
-  padding: 4px;
-  border: 1px solid var(--sf-line);
-  border-radius: 8px;
-  background: var(--sf-panel);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 9px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--sf-text, var(--sf-text));
-  font-size: 12.5px;
-  text-align: left;
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu-item:hover {
-  background: var(--sf-accent-tint);
-  color: var(--sf-accent);
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-/* A group heading inside that menu — drawn only where a choice list carries
-   groups (a Box's does; the Footer's and the Slide box's do not, and render
-   exactly as before).
-
-   ⚠️ THE SAME TYPE AS `.sf-addgroup-title` BELOW, and deliberately not a second
-   look: that is the heading the Add-section panel puts over every one of its
-   categories, and this menu is the OTHER door a merchant adds something
-   through. One grammar for "these belong together" (rule zero). It is not the
-   same CLASS because the two live in different boxes — a 4px-padded floating
-   menu and a 20px panel column — so only the spacing differs, and it differs
-   because the container does.
-
-   `role="presentation"` on the row: it is a label, not a menuitem, and a
-   keyboard user arrowing through the menu must not land on it. */
-.sf-menugroup-head {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 9px 9px 5px;
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-/* No top padding on the first heading — the menu's own 4px inset already sets
-   it in, and a second inset would leave the first group sitting lower than the
-   rows it names. */
-.sf-menugroup-head:first-child {
-  padding-top: 4px;
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-menugroup-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--sf-muted);
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+/* ── Footer "Add block" menu — the shell's DropdownMenu (easel issue 199, step 4) ────── */
+/* The menu, its rows and its group headings are efficient-shell's; the row
+   that opens it is the add card (`.sf-add-card`, the trigger's own look). What
+   stays is a heading's count, quieter than its word. */
 .sf-menugroup-count {
   font-size: 11px;
   color: var(--sf-field-placeholder);
@@ -563,7 +505,7 @@
    the engine itself since efficient-easel 0.80.1: a scene drawn to fill it
    painted over the whole panel before. */
 .sf-addside .es-add-tile-cover {
-  border: 1px solid #edeff4;
+  border: 1px solid var(--sf-line);
 }
 
 /* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
@@ -584,42 +526,6 @@
   overflow: hidden;
 }
 
-/* Toast — transient confirmation (e.g. after adding a section) */
-.sf-toast {
-  position: absolute;
-  left: 50%;
-  bottom: 34px;
-  transform: translateX(-50%);
-  z-index: 60;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 11px 17px;
-  border-radius: 11px;
-  background: var(--sf-toast-bg);
-  color: #fff;
-  font-size: 13px;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
-}
-
-.sf-toast-check {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--sf-accent);
-  color: #fff;
-  font-size: 11px;
-  flex: none;
-}
-
-/* Error variant — same dark pill, red mark instead of the green check. */
-.sf-toast--error .sf-toast-check {
-  background: var(--sf-danger);
-}
-
 /* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
 .sf-center {
   flex: 1;
@@ -826,7 +732,7 @@
   padding: 4px;
   border-radius: 999px;
   background: var(--sf-toast-bg);
-  color: #fff;
+  color: var(--sf-on-accent);
   font-family: var(--sf-font);
   font-size: 12px;
   font-weight: 500;
@@ -865,7 +771,7 @@
   height: 18px;
   border-radius: 50%;
   background: var(--sf-accent);
-  color: #fff;
+  color: var(--sf-on-accent);
   font-size: 13px;
   line-height: 1;
   flex: none;
@@ -921,64 +827,6 @@
   color: var(--sf-danger);
 }
 
-/* ── The icon rail: the shared editor-shell EaselRail (`.es-rail`) ───────────
-   The rail markup + base styles live in the `efficient-easel` package (imported via
-   `efficient-easel/rail.css`); the storefront no longer hand-rolls `.sf-rail`.
-   editor-shell ships its own defaults, so we remap the themeable `--es-rail-*`
-   custom properties onto the storefront's own `--sf-*` tokens, which is what
-   keeps the shared rail reading as this editor's chrome rather than as the
-   package's. (One mode only — the editor is deliberately light-only; see the
-   note at the top of this file.)
-   Scoped `.sf-editor .es-rail` (specificity 0,2,0) so it always beats rail.css's
-   base `.es-rail` (0,1,0) whatever order the two stylesheets load in.
-
-   THREE TOKENS ARE DELIBERATELY NOT REMAPPED HERE, and each absence is load-
-   bearing since card 66198 laid the rail into the top bar as a row:
-
-     --es-rail-w        only the COLUMN reads it (`.es-rail { width:
-                        var(--es-rail-w) }`); the row is `width: auto` and sizes
-                        to its buttons, so a remap would be config nothing reads.
-     --es-rail-bg       the row variant re-points these to transparent / none / 0
-     --es-rail-shadow   ON PURPOSE: the bar already has its own surface, and a
-     --es-rail-radius   second white card floating inside it is the bug. This
-                        rule ties with `.es-rail.es-rail-row` on specificity
-                        (0,2,0 both), so setting them here would silently WIN
-                        and put that card back. The rail's surface is the bar's.
-
-   Everything left below is colour the row variant does not touch. */
-.sf-editor .es-rail {
-  --es-rail-fg: var(--sf-muted);
-  --es-rail-hover-bg: var(--sf-hover);
-  --es-rail-hover-fg: var(--sf-text);
-  --es-rail-accent: var(--sf-accent);
-  --es-rail-accent-tint: var(--sf-accent-tint);
-}
-
-/* ── The icon rail: the shared editor-shell EaselRail (`.es-rail`) ───────────
-   The rail markup + base styles live in the `efficient-easel` package (imported via
-   `efficient-easel/rail.css`); the storefront no longer hand-rolls `.sf-rail`.
-   editor-shell ships its own defaults, so we remap the themeable `--es-rail-*`
-   custom properties onto the storefront's own `--sf-*` tokens, which is what
-   keeps the shared rail reading as this editor's chrome rather than as the
-   package's. (One mode only — the editor is deliberately light-only; see the
-   note at the top of this file.)
-   Scoped `.sf-editor .es-rail` (specificity 0,2,0) so it always beats rail.css's
-   base `.es-rail` (0,1,0) whatever order the two stylesheets load in.
-
-   THREE TOKENS ARE DELIBERATELY NOT REMAPPED HERE, and each absence is load-
-   bearing since card 66198 laid the rail into the top bar as a row:
-
-     --es-rail-w        only the COLUMN reads it (`.es-rail { width:
-                        var(--es-rail-w) }`); the row is `width: auto` and sizes
-                        to its buttons, so a remap would be config nothing reads.
-     --es-rail-bg       the row variant re-points these to transparent / none / 0
-     --es-rail-shadow   ON PURPOSE: the bar already has its own surface, and a
-     --es-rail-radius   second white card floating inside it is the bug. This
-                        rule ties with `.es-rail.es-rail-row` on specificity
-                        (0,2,0 both), so setting them here would silently WIN
-                        and put that card back. The rail's surface is the bar's.
-
-   Everything left below is colour the row variant does not touch. */
 /* THE RAIL COLUMN (owner, 2026-09-04: "the top control panel and the panel
    below it" must read as one) — the cluster exactly the left panel's width,
    carrying its hairline up through the bar, the buttons spread across it (his
@@ -1050,7 +898,7 @@
 .sf-device-scope {
   margin: 8px 0 2px;
   padding: 7px 10px;
-  border-radius: 7px;
+  border-radius: var(--radius-md);
   background: var(--sf-chip-bg);
   font-size: 11.5px;
   line-height: 1.35;
@@ -1099,8 +947,7 @@
    Every side panel's head is efficient-easel's `InspectorHead`; these two
    are the pieces the website editor adds to it. The hairline parts a panel's
    own tools from the hide button that ends every head, and a mode's way out
-   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
-   28px of the head's icon buttons so the row keeps one height. */
+   is a word ("Done", "Cancel") on the shell's small Button. */
 .sf-head-divider {
   width: 1px;
   height: 16px;
@@ -1109,26 +956,6 @@
   flex: none;
 }
 
-/* ── Side panel heads (components/SidePanelHead) ─────────────────────────
-   Every side panel's head is efficient-easel's `InspectorHead`; these two
-   are the pieces the website editor adds to it. The hairline parts a panel's
-   own tools from the hide button that ends every head, and a mode's way out
-   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
-   28px of the head's icon buttons so the row keeps one height. */
-.es-btn-ghost.sf-head-textbtn {
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12.5px;
-  border-radius: 7px;
-  white-space: nowrap;
-}
-
-/* ── Side panel heads (components/SidePanelHead) ─────────────────────────
-   Every side panel's head is efficient-easel's `InspectorHead`; these two
-   are the pieces the website editor adds to it. The hairline parts a panel's
-   own tools from the hide button that ends every head, and a mode's way out
-   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
-   28px of the head's icon buttons so the row keeps one height. */
 /* A hidden side panel's strip (components/SidePanelHead `PanelShowStrip`):
    one Show panel button where the panel was. It IS a side panel — the
    engine's `.es-sidepanel--left|right` gives it the panels' ground and the