efficient-easel 0.0.0 → 0.97.0

package/dist/tree/tree.css

@@ -0,0 +1,618 @@
+/*
+ * efficient-easel/tree.css — the Layers tree: one row shape at every depth.
+ *
+ * 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
+ * the tree as `.sf-tree` / `.sf-row` / `.sf-subtree` / `.sf-group-label` (the
+ * owner's "One Ladder", 2026-09-04). Its `--sf-*` tokens alias the `--es-*`
+ * tokens spent here. New with the move: `.es-tree-preview` (0.42.0), and the
+ * campaign editor's select button, marks, badge, end mark and plain action (0.44.0).
+ *
+ * Needs `efficient-easel/shell.css`.
+ */
+
+.es-tree {
+  flex: 1;
+  overflow-y: auto;
+  /* LEFT 8 — the inset a rounded row needs. RIGHT 11 — the room a real,
+     space-taking 11px scrollbar takes, so nothing at a row's end sits under
+     the thumb. Words inside start on one 11px column down the panel. */
+  padding: 0 11px 10px 8px;
+  /* THE TREE'S RHYTHM, under the shell's names, at the tree's own density: the
+     owner picked 10 between groups and 6 between rows by eye (2026-08-31). They
+     are declared HERE, not on the editor root, so the settings panel beside the
+     tree keeps its own values for the same names. */
+  --es-rhythm-group: 10px;
+  --es-rhythm-between: 6px;
+}
+/* Every seam the tree stacks, spelled out: labels and subtrees interleave with
+   rows, and a rule that knew only rows would leave those seams to chance. */
+.es-tree > .es-tree-row + .es-tree-row,
+.es-tree > .es-subtree + .es-tree-row {
+  margin-top: var(--es-rhythm-between);
+}
+
+.es-tree-group {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--es-muted);
+  padding: var(--es-rhythm-group) 11px var(--es-rhythm-between);
+}
+
+/* THE ONLY THING IN THE TREE THAT SAYS DEPTH: 16px of indent and a hairline
+   that runs the height of the group. Rows inside sit exactly as far apart as
+   rows outside, so the ladder reads as one list at several depths. */
+.es-subtree {
+  margin: var(--es-rhythm-between) 0 var(--es-rhythm-between) 16px;
+  padding-left: 9px;
+  border-left: 1px solid var(--es-line);
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-rhythm-between);
+}
+
+.es-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 11px;
+  border-radius: var(--es-row-radius);
+  cursor: pointer;
+  transition: background 0.12s;
+  /* Anchors the drop rules and the out-of-flow drag handle. */
+  position: relative;
+  /* The ground this row is painted on, as a value its children can read: the
+     actions' fade must end in the colour really behind the row. Every rule that
+     changes the row's background changes this in the same block. */
+  --es-row-scrim: var(--es-panel);
+}
+.es-tree-row:hover {
+  --es-row-scrim: var(--es-hover);
+  background: var(--es-row-scrim);
+}
+.es-tree-row.is-dragging {
+  opacity: 0.4;
+}
+.es-tree-row.is-drop-before::before,
+.es-tree-row.is-drop-after::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 2px;
+  background: var(--es-accent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+/* THE ONE DROP LINE (0.74.0): centred in the gap, where a seam draws its own —
+   so a drop between two rows looks the same whether the pointer is over the
+   lower half of one, the gap, or the upper half of the next. */
+.es-tree-row.is-drop-before::before {
+  top: calc(-1px - var(--es-rhythm-between) / 2);
+}
+.es-tree-row.is-drop-after::after {
+  bottom: calc(-1px - var(--es-rhythm-between) / 2);
+}
+/* An outline, not a border: a border would move every row below by 2px as the
+   pointer crossed, which reads as the list flinching. */
+.es-tree-row.is-drop-into {
+  outline: 2px solid var(--es-accent);
+  outline-offset: -2px;
+  border-radius: 6px;
+  background: var(--es-accent-tint);
+}
+.es-tree-row.is-selected {
+  --es-row-scrim: var(--es-accent-tint);
+  background: var(--es-row-scrim);
+  box-shadow: inset 2px 0 0 var(--es-accent);
+}
+.es-tree-row.is-selected .es-tree-chip {
+  background: var(--es-raised);
+  color: var(--es-accent);
+}
+.es-tree-row.is-selected .es-tree-name {
+  color: var(--es-accent-text);
+  font-weight: 600;
+}
+
+/* No ground and no rule: every row carries a glyph, so the glyph is the mark. */
+.es-tree-chip {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  flex: none;
+  background: transparent;
+  color: var(--es-icon);
+}
+.es-tree-chip svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* The name's box: what the actions are positioned against, so they cover the
+   name's tail and never the caret. */
+.es-tree-name-box {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+/* One size at every depth — 12px / 500, the group pill's size at a row's weight. */
+.es-tree-name {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--es-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* NEW in 0.42.0: the thing's own first words after its type — "Text  BACK IN
+   STOCK NOW" — quieter than the name, and the first thing to be cut when the
+   panel is narrow (it sits inside the name's own ellipsis). */
+.es-tree-preview {
+  margin-left: 6px;
+  font-weight: 400;
+  color: var(--es-muted);
+}
+.es-tree-row.is-selected .es-tree-preview {
+  color: var(--es-accent-text);
+  font-weight: 400;
+}
+.es-tree-row.is-hidden .es-tree-name {
+  color: var(--es-muted);
+  text-decoration: line-through;
+}
+
+.es-tree-actions {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  /* 22px of fade so the name dissolves under the buttons instead of being
+     chopped, ending in the ground this row is really painted on. */
+  padding-left: 22px;
+  background: linear-gradient(to right, transparent 0, var(--es-row-scrim) 22px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+/* Hover AND focus. Bound to hover alone, a keyboard user who tabs to the trash
+   gets it painted onto the name with nothing behind it. */
+.es-tree-row:hover .es-tree-actions,
+.es-tree-row:focus-within .es-tree-actions {
+  opacity: 1;
+}
+/* THE STRIP NEVER TAKES THE POINTER — only the buttons in it do, and each arms
+   its own as it shows (0.44.1). On a short row the fade covers most of the name,
+   and a row that selects from its NAME button (`onSelect`) must still get the
+   click: with the strip taking it, a hovered row could not be selected at all.
+   A row that selects through its own onClick is unaffected — the click lands on
+   the name and bubbles to the row as before. */
+/* A hidden row keeps its eye showing, back in the flow, so it can always be
+   un-hidden without a scrim parked over its struck-through name. */
+.es-tree-row.is-hidden .es-tree-actions {
+  position: static;
+  opacity: 1;
+  background: none;
+  padding-left: 0;
+}
+
+.es-tree-del,
+.es-tree-eye {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  flex: none;
+}
+.es-tree-del svg,
+.es-tree-eye svg {
+  width: 14px;
+  height: 14px;
+}
+.es-tree-del {
+  color: var(--es-danger);
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+}
+.es-tree-eye {
+  color: var(--es-muted);
+  transition: opacity 0.12s, background 0.12s;
+}
+.es-tree-row:hover .es-tree-del,
+.es-tree-row:focus-within .es-tree-del,
+.es-tree-row:hover .es-tree-eye,
+.es-tree-row:focus-within .es-tree-eye {
+  opacity: 0.7;
+  pointer-events: auto;
+}
+.es-tree-del:hover {
+  opacity: 1;
+  background: var(--es-danger-tint);
+  color: var(--es-danger-strong);
+}
+.es-tree-eye:hover {
+  opacity: 1;
+  background: var(--es-hover);
+}
+.es-tree-row.is-hidden .es-tree-eye {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* The ONLY drag source and keyboard reorder route. It may be made invisible;
+   it may never be made unreachable — opacity only, never display or visibility. */
+.es-tree-handle {
+  position: absolute;
+  left: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--es-disabled);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: -2px;
+  width: 9px;
+  flex: none;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.12s;
+  padding: 0;
+  border: none;
+  background: transparent;
+  touch-action: none;
+}
+.es-tree-row:hover .es-tree-handle,
+.es-tree-handle:focus-visible {
+  opacity: 1;
+}
+.es-tree-handle:active {
+  cursor: grabbing;
+}
+.es-tree-handle:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 1px;
+  border-radius: 3px;
+  color: var(--es-text-secondary);
+}
+
+/* The caret LEADS the row (One Ladder). A row that does not fold holds the
+   column open with the spacer, so every glyph below lines up. */
+.es-tree-caret {
+  width: 14px;
+  height: 14px;
+  margin-left: -2px;
+  flex: none;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--es-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.es-tree-caret:hover {
+  background: var(--es-hover);
+  color: var(--es-text);
+}
+.es-tree-caret-spacer {
+  width: 14px;
+  margin-left: -2px;
+  flex: none;
+}
+.es-tree-chev {
+  transition: transform 0.14s;
+}
+.es-tree-chev.is-open {
+  transform: rotate(90deg);
+}
+
+/* ── 0.44.0 — the campaign editor's rows ─────────────────────────────────── */
+/* The name as a button, for keyboard selection. It must not move the row by a
+   pixel against a row without one: no chrome, no padding, the same flex run. */
+.es-tree-select {
+  all: unset;
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.es-tree-select:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 2px;
+}
+/* With a mark or a badge after it, the name hugs its words so the mark sits
+   beside them rather than at the far end. A plain row keeps `flex: 1`. */
+.es-tree-select .es-tree-name,
+.es-tree-name:has(~ .es-tree-mark),
+.es-tree-name:has(~ .es-tree-badge) {
+  flex: 0 1 auto;
+}
+/* A named state after the name — quiet, never a control. */
+.es-tree-mark {
+  flex: none;
+  display: inline-flex;
+  color: var(--es-muted);
+}
+.es-tree-mark svg,
+.es-tree-trailing svg {
+  width: 13px;
+  height: 13px;
+}
+.es-tree-badge {
+  flex: none;
+  font-size: 10px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--es-muted);
+  background: var(--es-chip-bg);
+  border-radius: 4px;
+  padding: 1px 4px;
+}
+.es-tree-trailing {
+  flex: none;
+  display: inline-flex;
+  color: var(--es-muted);
+}
+/* Any other row action, in the neutral colour — the eye's twin. */
+.es-tree-act {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--es-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  flex: none;
+  transition: opacity 0.12s, background 0.12s;
+}
+.es-tree-act svg {
+  width: 14px;
+  height: 14px;
+}
+.es-tree-row:hover .es-tree-act,
+.es-tree-row:focus-within .es-tree-act {
+  opacity: 0.7;
+  pointer-events: auto;
+}
+.es-tree-act:hover {
+  opacity: 1;
+  background: var(--es-hover);
+}
+.es-tree-act:disabled {
+  color: var(--es-disabled);
+  cursor: default;
+}
+/* A toggle that is ON stays visible at rest, like a hidden row's eye: the state
+   has to be readable without hovering. */
+.es-tree-act[aria-pressed="true"] {
+  opacity: 1;
+  pointer-events: auto;
+  color: var(--es-accent);
+}
+/* …which means its strip must show too. Same answer as a hidden row's eye: the
+   strip goes back into the flow, with no scrim over the name, and the other
+   actions in it still wait for hover. */
+.es-tree-actions:has(.es-tree-act[aria-pressed="true"]) {
+  position: static;
+  opacity: 1;
+  background: none;
+  padding-left: 0;
+}
+/* In the flow, the actions still waiting for hover must not hold their width
+   open at rest — that would cut the name down to make room for buttons nobody
+   can see. They come back when the row is hovered or focus enters it (the name
+   button is the row's first tab stop, so the keyboard reaches them). */
+.es-tree-actions:has(.es-tree-act[aria-pressed="true"]) > :not([aria-pressed="true"]) {
+  display: none;
+}
+.es-tree-row:hover .es-tree-actions:has(.es-tree-act[aria-pressed="true"]) > :not([aria-pressed="true"]),
+.es-tree-row:focus-within .es-tree-actions:has(.es-tree-act[aria-pressed="true"]) > :not([aria-pressed="true"]) {
+  display: flex;
+}
+
+/* A rename box stands in for the name. It must not move the row by a pixel:
+   same font and size, no border, no padding of its own. */
+.es-tree-rename {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: inherit;
+  outline: none;
+}
+
+/* ── Picking a row up (efficient-easel/drag, 0.74.0) ───────────────────────
+   The whole row is the handle. It says so four ways, and none of them is a
+   target of its own: the grab cursor, a faint ⋮ at its left on hover, a hint
+   after 0.7 s, and — while it moves — the row lifted with a shadow. */
+.es-tree-row.is-draggable,
+.es-tree-row.is-draggable .es-tree-select {
+  cursor: grab;
+}
+.es-tree-row.is-draggable:active,
+.es-tree-row.is-draggable:active .es-tree-select {
+  cursor: grabbing;
+}
+.es-tree-grip {
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  line-height: 1;
+  color: var(--es-disabled);
+  opacity: 0;
+  transition: opacity 0.12s;
+  pointer-events: none;
+}
+.es-tree-row.is-draggable:hover .es-tree-grip {
+  opacity: 0.8;
+}
+/* The hint waits 0.7 s on the way in and none on the way out — a delay in the
+   transition, not a timer, so nothing re-renders while the pointer rests. */
+.es-tree-hint {
+  position: absolute;
+  left: 24px;
+  top: calc(100% + 4px);
+  z-index: 5;
+  padding: 3px 7px;
+  border-radius: 6px;
+  background: var(--es-toast-bg);
+  color: var(--es-on-accent);
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.es-tree-row.is-draggable:hover .es-tree-hint {
+  opacity: 1;
+  transition-delay: 0.7s;
+}
+.es-tree-row.is-dragging .es-tree-hint,
+.es-tree-row.is-lifting .es-tree-hint {
+  display: none;
+}
+/* On for the instant the browser takes the drag picture: the row that follows
+   the pointer is this one, raised. */
+.es-tree-row.is-lifting {
+  background: var(--es-raised);
+  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.1);
+}
+
+/* ── The seam — the gap between two rows, as a place (0.74.0) ───────────────
+   A drop between rows lands here, and a host may offer a "+" that adds here.
+   IT IS THE GAP: every rule below takes back the space a seam would otherwise
+   add, so a list reads exactly the same with seams in it or without. A list's
+   gaps are uniform — seams in every gap of it, or in none. */
+.es-tree-seam {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  height: var(--es-rhythm-between);
+}
+/* A little more than the gap to aim at, over the rows' own edges. */
+.es-tree-seam::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -4px;
+  bottom: -4px;
+}
+.es-tree-seam::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: calc(50% - 1px);
+  height: 2px;
+  background: var(--es-accent);
+  border-radius: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.es-tree-seam.is-drop::after,
+.es-tree-seam.has-add:hover::after,
+.es-tree-seam.has-add:focus-within::after {
+  opacity: 1;
+}
+.es-tree-seam-add {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 18px;
+  height: 18px;
+  margin: -9px 0 0 -9px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font: 600 13px/18px var(--es-font);
+  cursor: pointer;
+  opacity: 0;
+  transform: scale(0.7);
+  transition: opacity 0.12s, transform 0.12s;
+}
+.es-tree-seam.has-add:hover .es-tree-seam-add,
+.es-tree-seam-add:focus-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.es-tree-seam-add:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 2px;
+}
+/* While something is being dropped, the line alone. */
+.es-tree-seam.is-drop .es-tree-seam-add {
+  opacity: 0;
+}
+/* The top level stacks as blocks, and margins there collapse: a seam after a
+   subtree, beside a group label, or at an end hands its height back. */
+.es-tree > .es-subtree + .es-tree-seam,
+.es-tree > .es-tree-group + .es-tree-seam,
+.es-tree > .es-tree-seam:last-child {
+  margin-top: calc(-1 * var(--es-rhythm-between));
+}
+.es-tree > .es-tree-seam:has(+ .es-tree-group),
+.es-tree > .es-tree-seam:first-child {
+  margin-bottom: calc(-1 * var(--es-rhythm-between));
+}
+/* …once: a seam both after a subtree and before a label has already handed its
+   height back above. */
+.es-tree > .es-subtree + .es-tree-seam:has(+ .es-tree-group) {
+  margin-bottom: 0;
+}
+/* One level down is a flex column with a gap: a seamed list's seams ARE its
+   gaps, a nested list keeps the gap-and-margin it had, and the ends reach into
+   the list's own margins. */
+.es-subtree:has(> .es-tree-seam) {
+  gap: 0;
+}
+.es-subtree:has(> .es-tree-seam) > .es-subtree {
+  margin-top: calc(2 * var(--es-rhythm-between));
+}
+.es-subtree > .es-tree-seam:first-child {
+  margin-top: calc(-1 * var(--es-rhythm-between));
+}
+.es-subtree > .es-tree-seam:last-child {
+  margin-bottom: calc(-1 * var(--es-rhythm-between));
+}