efficient-easel 0.106.0 → 1.0.1

package/dist/copy/copy.css

@@ -18,24 +18,22 @@
   --es-copy-gap: var(--es-space-8, 8px);
   /* efficient-shell's IconButton at its default size, md (design v5, 0.94.0). */
   --es-copy-mark-size: 32px;
-  --es-copy-mark-ink: var(--es-text-muted, #6b7280);
-  --es-copy-mark-ink-hover: var(--es-text, #111827);
-  --es-copy-mark-hover: var(--es-hover, rgba(0, 0, 0, 0.06));
-  --es-copy-rule: var(--es-border, #e5e7eb);
-  --es-copy-field-border: var(--es-field-border, #d1d5db);
-  --es-copy-field-bg: var(--es-field-bg, #ffffff);
+  --es-copy-rule: var(--es-border, var(--line));
+  --es-copy-field-border: var(--es-field-border, var(--line-strong));
+  --es-copy-field-bg: var(--es-field-bg, var(--surface));
   /** The field's inner inset. On the SURFACES, never on the box — see
    *  `.es-copy-box` below for the caret bug that rule exists to stop. */
   --es-copy-field-pad: 4px 8px;
-  --es-copy-field-ring: var(--es-accent, #2563eb);
-  /* react-os-shell's inputClasses (design v5, 0.95.0): text-sm, a blue-400
-     border and a 2px blue-400/30 ring while focused. One set of numbers for
-     BOTH views, so flipping "Show marks" moves no word. */
+  --es-copy-field-ring: var(--es-accent, var(--accent-600, var(--submit-bg)));
+  /* efficient-shell's inputClasses (design v5, 0.95.0): text-sm, and while
+     focused the shell's own focus tokens — the solid ring colour as the border
+     and the 2px ring wash. One set of numbers for BOTH views, so flipping
+     "Show marks" moves no word. */
   --es-copy-field-font: 14px;
   --es-copy-field-line: 1.5;
-  --es-copy-focus-border: #60a5fa;
-  --es-copy-focus-ring: 0 0 0 2px rgba(96, 165, 250, 0.3);
-  --es-copy-radius: 6px;
+  --es-copy-focus-border: var(--rosh-focus-ring-solid);
+  --es-copy-focus-ring: 0 0 0 2px var(--rosh-focus-ring);
+  --es-copy-radius: var(--radius-md);
 
   display: block;
   /* A container, so a host can query the box's own width. Never on
@@ -96,54 +94,23 @@
   background: var(--es-copy-rule);
 }
 
+/* A mark button is efficient-shell's IconButton (harness UI-24): its look, its
+   hover, its disabled fade and — since efficient-shell 4.164.0 — its pressed
+   look from `aria-pressed` are the kit's; this bar used to draw a copy of each.
+   What stays is its size in this bar, the room a letter needs and the letter
+   styling below. */
 .es-copy-mark {
   height: var(--es-copy-mark-size);
   min-width: var(--es-copy-mark-size);
+  width: auto;
   padding: 0 4px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--es-copy-mark-ink);
-  font: inherit;
   font-size: 11px;
   line-height: 1;
-  cursor: pointer;
-}
-
-.es-copy-mark:hover:not(:disabled) {
-  background: var(--es-copy-mark-hover);
-  color: var(--es-copy-mark-ink-hover);
-}
-
-.es-copy-mark:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-/* A button carrying a drawing — the set's glyph (0.94.0) or the host's own —
-   centres it and gets none of the letter styling below: an SVG must not be
-   emboldened or slanted by us. */
-.es-copy-mark.has-glyph {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }
 
 /* The glyph looks like what it does. Safe here and NOT in the gold layer: a
-   button is not sitting over a caret, so a wider glyph moves nothing. */
-/* PRESSED: the selection already wears this mark, so a press takes it off —
-   or, for the link button, its window is open. efficient-shell has no pressed
-   IconButton, so the design (v5) takes its PopupMenu's selected item:
-   bg-blue-50, text-blue-700. */
-/* `:hover` too: the hover rule above is (0,3,0) and outranks a bare
-   `.is-active`, so a pressed button turned grey under the very pointer that
-   pressed it (seen in the 0.94.0 click-through). */
-.es-copy-mark.is-active,
-.es-copy-mark.is-active:hover:not(:disabled) {
-  background: var(--es-accent-tint, #eff6ff);
-  color: var(--es-accent-text, #1d4ed8);
-}
-
+   button is not sitting over a caret, so a wider glyph moves nothing. A
+   drawing — the set's glyph or the host's own — gets none of it. */
 .es-copy-mark.is-bold { font-weight: 700; }
 .es-copy-mark.is-italic { font-style: italic; }
 .es-copy-mark.is-strike { text-decoration: line-through; }
@@ -204,7 +171,7 @@
 }
 
 .es-copy-box.es-gold-is-off {
-  background: var(--es-field-bg-off, #f9fafb);
+  background: var(--es-field-bg-off, var(--surface-sunken));
 }
 
 /* — the link button's window (blueprint 4.9) — */
@@ -221,43 +188,19 @@
   margin-top: var(--es-copy-gap);
   padding: 12px;
   border: 1px solid var(--es-copy-rule);
-  border-radius: var(--es-row-radius, 8px);
+  border-radius: var(--es-row-radius, var(--radius-lg));
   background: var(--es-raised, var(--es-copy-field-bg));
-  box-shadow: var(--es-raised-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
+  box-shadow: var(--es-raised-shadow, var(--rosh-glass-solid-shadow));
 }
 
-.es-copy-link-label {
-  font-size: 11px;
-  color: var(--es-copy-mark-ink);
-}
-
-.es-copy-link-input {
-  box-sizing: border-box;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  border: 1px solid var(--es-copy-field-border);
-  border-radius: var(--es-field-radius, 6px);
-  background: var(--es-copy-field-bg);
-  color: var(--es-text, #111827);
-  font: inherit;
-  font-size: 12px;
-}
-
-.es-copy-link-input:focus {
-  outline: none;
-  border-color: var(--es-copy-field-ring);
-}
-
-.es-copy-link-input[aria-invalid='true'] {
-  border-color: var(--es-danger, #dc2626);
-}
+/* The window's parts are the shell's Label, Input and Buttons (UI-24): their
+   look is the kit's, never redrawn here. */
 
 .es-copy-link-why {
   margin: 0;
   font-size: 11px;
   line-height: 1.45;
-  color: var(--es-danger, #dc2626);
+  color: var(--es-danger, var(--status-danger-soft-ink));
 }
 
 .es-copy-link-actions {
@@ -275,35 +218,6 @@
   margin-left: auto;
 }
 
-.es-copy-link-btn.is-danger {
-  border-color: transparent;
-  background: transparent;
-  color: var(--es-danger, #dc2626);
-}
-
-.es-copy-link-btn {
-  height: 28px;
-  padding: 0 12px;
-  border: 1px solid var(--es-btn-border, var(--es-copy-field-border));
-  border-radius: var(--es-field-radius, 6px);
-  background: var(--es-raised, #fff);
-  color: var(--es-btn-text, var(--es-text, #111827));
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.es-copy-link-btn.is-primary {
-  border-color: var(--es-accent, #2563eb);
-  background: var(--es-accent, #2563eb);
-  color: var(--es-on-accent, #fff);
-}
-
-.es-copy-link-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 /* — the rich view (0.95.0, rulings B + C) — */
 
 /*
@@ -329,7 +243,7 @@
   border: 1px solid var(--es-copy-field-border);
   border-radius: var(--es-copy-radius);
   background: var(--es-copy-field-bg);
-  color: var(--es-text, #111827);
+  color: var(--es-text, var(--ink-strongest));
   font: inherit;
   font-size: var(--es-copy-field-font);
   line-height: var(--es-copy-field-line);
@@ -359,7 +273,7 @@
 }
 
 .es-rich.is-off {
-  background: var(--es-field-bg-off, #f9fafb);
+  background: var(--es-field-bg-off, var(--surface-sunken));
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -375,7 +289,7 @@
 }
 
 .es-rich-line.is-bullet::marker {
-  color: var(--es-text-muted, #9ca3af);
+  color: var(--es-text-muted, var(--ink-faintest));
 }
 
 /* A numbered line (E1's `12. words`) draws the number AS SAVED — `01` stays
@@ -393,7 +307,7 @@
   right: 100%;
   padding-right: 0.35em;
   white-space: nowrap;
-  color: var(--es-text-muted, #9ca3af);
+  color: var(--es-text-muted, var(--ink-faintest));
   font-variant-numeric: tabular-nums;
   pointer-events: none;
   user-select: none;
@@ -422,12 +336,12 @@
 }
 
 .es-rich .es-rich-quiet {
-  color: var(--es-gold-quiet, #6b7280);
+  color: var(--es-gold-quiet, var(--ink-faint));
   font-size: 0.86em;
 }
 
 .es-rich .es-rich-link {
-  color: var(--es-accent, #2563eb);
+  color: var(--es-accent, var(--accent-600, var(--submit-bg)));
   text-decoration: underline;
   text-underline-offset: 3px;
   cursor: text;
@@ -438,7 +352,7 @@
   inset: 0;
   padding: var(--es-copy-field-pad);
   border: 1px solid transparent;
-  color: var(--es-gold-placeholder, #9ca3af);
+  color: var(--es-gold-placeholder, var(--ink-faintest));
   font-size: var(--es-copy-field-font);
   line-height: var(--es-copy-field-line);
   pointer-events: none;
@@ -459,7 +373,7 @@
 .es-copy-marks-label {
   font-size: 13px;
   white-space: nowrap;
-  color: var(--es-text-secondary, #374151);
+  color: var(--es-text-secondary, var(--ink));
 }
 
 /*
@@ -476,15 +390,21 @@
   gap: var(--es-space-4, 4px);
   padding: var(--es-space-4, 4px) var(--es-space-8, 8px);
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: transparent;
   font: inherit;
   font-size: 13px;
   white-space: nowrap;
-  color: var(--es-text-secondary, #374151);
+  color: var(--es-text-secondary, var(--ink));
   cursor: pointer;
 }
 
+/* Off, it explains itself in the shell's Tooltip, whose wrapper is then the
+   line's last item: the wrapper takes the push to the end. */
+.es-copy-marks > span:has(> .es-copy-clear) {
+  margin-left: auto;
+}
+
 .es-copy-clear svg {
   flex: none;
   width: 16px;
@@ -492,7 +412,7 @@
 }
 
 .es-copy-clear:hover:not(:disabled) {
-  background: var(--es-hover, #f3f4f6);
+  background: var(--es-hover, var(--surface-raised));
 }
 
 .es-copy-clear:focus-visible {
@@ -501,7 +421,7 @@
 }
 
 .es-copy-clear:disabled {
-  color: var(--es-disabled, #9ca3af);
+  color: var(--es-disabled, var(--ink-faintest));
   cursor: default;
 }
 
@@ -557,19 +477,13 @@
   display: contents;
 }
 
+/* A toolbar button is efficient-shell's IconButton look (harness UI-24): its
+   ground, hover, focus ring, disabled fade and lit state are the kit's
+   (`IconButton` from `aria-pressed`, else `iconButtonClasses({ pressed })`).
+   What stays is its size in the 9-column grid and the glyph inside. */
 .es-tb-btn {
-  box-sizing: border-box;
   width: var(--es-tb-size);
   height: var(--es-tb-size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--es-text-secondary, #374151);
-  cursor: pointer;
 }
 
 .es-tb-btn svg {
@@ -577,28 +491,6 @@
   height: 16px;
 }
 
-.es-tb-btn:hover:not(:disabled) {
-  background: var(--es-hover, #f3f4f6);
-}
-
-.es-tb-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--es-copy-focus-ring);
-}
-
-/* Lit: the selection wears the mark (a press takes it off), the window is
-   open, or the field holds that value — react-os-shell's selected tone. */
-.es-tb-btn.is-on,
-.es-tb-btn.is-on:hover:not(:disabled) {
-  background: var(--es-accent-tint, #eff6ff);
-  color: var(--es-accent-text, #1d4ed8);
-}
-
-.es-tb-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
 /* The bar under the A is the colour the selected words wear. */
 .es-tb-color svg rect {
   fill: var(--es-tb-run, currentColor);
@@ -615,10 +507,6 @@
     --es-tb-size: min(24px, calc(100cqw / 9));
   }
 
-  .es-tb-btn {
-    border-radius: 5px;
-  }
-
   .es-tb-btn svg {
     width: 14px;
     height: 14px;
@@ -648,10 +536,10 @@
   flex-direction: column;
   gap: var(--es-space-8, 8px);
   padding: 12px;
-  border: 1px solid var(--es-border, #e5e7eb);
-  border-radius: 12px;
-  background: var(--es-raised, #fff);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--es-border, var(--line));
+  border-radius: var(--radius-xl);
+  background: var(--es-raised, var(--surface));
+  box-shadow: var(--rosh-glass-solid-shadow);
 }
 
 /* The point, aimed at its button: column k of row 1 across the box (100cqw),
@@ -663,8 +551,8 @@
   width: 10px;
   height: 10px;
   background: inherit;
-  border-left: 1px solid var(--es-border, #e5e7eb);
-  border-top: 1px solid var(--es-border, #e5e7eb);
+  border-left: 1px solid var(--es-border, var(--line));
+  border-top: 1px solid var(--es-border, var(--line));
   transform: rotate(45deg);
 }
 
@@ -684,23 +572,24 @@
   transform: rotate(225deg);
 }
 
-.es-copy-pop-label,
-.es-copy-pop .es-copy-link-label {
+.es-copy-pop-label {
   font-size: 12px;
   font-weight: 500;
-  color: var(--es-text-secondary, #4b5563);
+  color: var(--es-text-secondary, var(--ink));
 }
 
-/* The theme colours are pick's ONE theme row (`.es-pick-theme`, pick.css). */
+/* The theme colours: efficient-shell `ColorSwatch`es in one row — the row is
+   drawn here, the swatches are the shell's (easel#199 step 4, UI-24). */
+.es-copy-theme {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--es-space-4, 4px);
+}
 
-/* Any color (E1 widened 2026-10-06) is pick's own ColourWindow (pick.css):
-   inside this window it is not a second box — no border, no inset. */
-.es-copy-colors .es-pick-window {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  gap: var(--es-space-8, 8px);
+/* Any color is the shell's ColorPickerPanel, as wide as this window: not the
+   panel's own popover width. */
+.es-copy-colors .es-copy-any {
+  width: auto;
 }
 
 .es-copy-pop-foot {

package/dist/copy/index.d.ts

@@ -46,8 +46,6 @@ declare function CopyCells({ cells, words, readOnly }: {
     readOnly?: boolean;
 }): react.JSX.Element;
 
-/** A theme colour the host offers: the NAME saved, what it is called, and the
- *  value the box paints it in. */
 interface CopyThemeColor {
     name: string;
     label: string;