efficient-easel 0.99.2 → 0.101.0

package/dist/copy/copy.css

@@ -28,7 +28,14 @@
    *  `.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);
-  --es-copy-radius: 4px;
+  /* 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-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;
 
   display: block;
   /* A container, so a host can query the box's own width. Never on
@@ -184,15 +191,16 @@
 }
 
 .es-copy-box {
-
   border: 1px solid var(--es-copy-field-border);
   border-radius: var(--es-copy-radius);
   background: var(--es-copy-field-bg);
-  font-size: 12px;
+  font-size: var(--es-copy-field-font);
+  line-height: var(--es-copy-field-line);
 }
 
 .es-copy-box:focus-within {
-  border-color: var(--es-copy-field-ring);
+  border-color: var(--es-copy-focus-border);
+  box-shadow: var(--es-copy-focus-ring);
 }
 
 .es-copy-box.es-gold-is-off {
@@ -254,10 +262,25 @@
 
 .es-copy-link-actions {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
 
+/* Cancel and Apply sit together at the end; Remove, when there is a link to
+   take off, at the start (the design's footer). */
+.es-copy-link-end {
+  display: flex;
+  gap: var(--es-space-4, 4px);
+  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;
@@ -280,3 +303,417 @@
   opacity: 0.5;
   cursor: default;
 }
+
+/* — the rich view (0.95.0, rulings B + C) — */
+
+/*
+ * The box that shows the EFFECT (./RichBox). Same frame and same type as the
+ * marks view above, so the "Show marks" switch flips the marks in and out and
+ * moves nothing else.
+ *
+ * Unlike the gold layer, weight and slant are SAFE here: there is no second
+ * surface for a wider glyph to drift from — the caret is the browser's own,
+ * in the same text it draws.
+ *
+ * The colours are the gold layer's (`--es-gold-accent`, `--es-gold-quiet`), so
+ * Emphasis and Quiet look the same in both views and a host aliases them once.
+ */
+.es-rich-wrap {
+  position: relative;
+}
+
+.es-rich {
+  box-sizing: border-box;
+  min-height: calc(var(--es-copy-field-font) * var(--es-copy-field-line) + 14px);
+  padding: var(--es-copy-field-pad);
+  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);
+  font: inherit;
+  font-size: var(--es-copy-field-font);
+  line-height: var(--es-copy-field-line);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  outline: none;
+  cursor: text;
+}
+
+/* Many lines: room for three, like the textarea it replaces (design: the
+   empty box is 4.625rem). */
+.es-rich.is-multiline {
+  min-height: 4.625rem;
+}
+
+/* One line: it scrolls sideways rather than wrapping, as an <input> does. */
+.es-rich.is-single {
+  white-space: pre;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.es-rich:focus {
+  border-color: var(--es-copy-focus-border);
+  box-shadow: var(--es-copy-focus-ring);
+}
+
+.es-rich.is-off {
+  background: var(--es-field-bg-off, #f9fafb);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.es-rich-line {
+  min-height: calc(var(--es-copy-field-font) * var(--es-copy-field-line));
+}
+
+.es-rich-line.is-bullet {
+  display: list-item;
+  list-style: disc outside;
+  margin-left: 1.25em;
+}
+
+.es-rich-line.is-bullet::marker {
+  color: var(--es-text-muted, #9ca3af);
+}
+
+/* A numbered line (E1's `12. words`) draws the number AS SAVED — `01` stays
+   `01` — in the margin, where the caret never goes. Not `list-item`: a list
+   counter would renumber, and the saved digits are the truth. */
+.es-rich-line.is-numbered {
+  position: relative;
+  /* Room for up to three digits and the dot ("100.") left of the words. */
+  margin-left: 2em;
+}
+
+.es-rich-line.is-numbered::before {
+  content: attr(data-number) '.';
+  position: absolute;
+  right: 100%;
+  padding-right: 0.35em;
+  white-space: nowrap;
+  color: var(--es-text-muted, #9ca3af);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* E1's spans. Underline, sup and sub are the browser's own <u>, <sup>, <sub>.
+   A theme colour reads `--es-color-<name>`, which the HOST sets from its
+   theme (RichBox draws the var); the words keep the text colour until it does. */
+.es-rich u {
+  text-underline-offset: 2px;
+}
+
+.es-rich sup,
+.es-rich sub {
+  font-size: 0.75em;
+  line-height: 0;
+}
+
+.es-rich strong {
+  font-weight: 600;
+}
+
+.es-rich .es-rich-emphasis {
+  color: var(--es-gold-accent, var(--gold, #c9a461));
+  font-weight: 600;
+}
+
+.es-rich .es-rich-quiet {
+  color: var(--es-gold-quiet, #6b7280);
+  font-size: 0.86em;
+}
+
+.es-rich .es-rich-link {
+  color: var(--es-accent, #2563eb);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: text;
+}
+
+.es-rich-placeholder {
+  position: absolute;
+  inset: 0;
+  padding: var(--es-copy-field-pad);
+  border: 1px solid transparent;
+  color: var(--es-gold-placeholder, #9ca3af);
+  font-size: var(--es-copy-field-font);
+  line-height: var(--es-copy-field-line);
+  pointer-events: none;
+}
+
+/* The "Show marks" switch, under the box (design v5: react-os-shell's Switch
+   with its label to the right). The switch is the panel's own (`.es-switch`). */
+.es-copy-marks {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--es-space-4, 4px) var(--es-space-8, 8px);
+  margin-top: var(--es-space-12, 12px);
+}
+
+/* Words never break inside: in a narrow box (a 220px panel) Clear style
+   moves to a line of its own, still at the right end. */
+.es-copy-marks-label {
+  font-size: 13px;
+  white-space: nowrap;
+  color: var(--es-text-secondary, #374151);
+}
+
+/*
+ * CLEAR STYLE (owner ruling 2026-10-07, mockup
+ * https://claude.ai/artifact/GiyeV3xazepzArKGVkFM8T): a quiet text button at
+ * the right end of the line under the box — beside Show marks, or alone under
+ * a one-line box (GG, 2026-10-07) — with the clear-marks glyph. Grey and
+ * not pressable until words are selected in the box.
+ */
+.es-copy-clear {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--es-space-4, 4px);
+  padding: var(--es-space-4, 4px) var(--es-space-8, 8px);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+  color: var(--es-text-secondary, #374151);
+  cursor: pointer;
+}
+
+.es-copy-clear svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+.es-copy-clear:hover:not(:disabled) {
+  background: var(--es-hover, #f3f4f6);
+}
+
+.es-copy-clear:focus-visible {
+  outline: none;
+  box-shadow: var(--es-copy-focus-ring);
+}
+
+.es-copy-clear:disabled {
+  color: var(--es-disabled, #9ca3af);
+  cursor: default;
+}
+
+/* — the final toolbar (E5b, design final 2026-10-06) — */
+
+/*
+ * TWO ROWS ON ONE 9-COLUMN GRID, flush to the box at both ends: every button
+ * sits under the one above it. The size is react-os-shell's IconButton md
+ * (`--es-copy-mark-size`, 32px), the size the design draws in a 320px panel.
+ * A cell the host does not offer is drawn EMPTY, so the columns still line up.
+ */
+.es-tb-wrap {
+  /*
+   * The button size: react-os-shell's IconButton md (32px) — but never more
+   * than a ninth of the row, so the row is FLUSH to the box at both ends. A
+   * 320px panel's box is 286px (its 1px border takes two), and nine 32px
+   * buttons would overrun it by 2px; here they are 31.8px. On the WRAPPER, so
+   * the two windows, which sit beside the toolbar, read it too.
+   */
+  --es-tb-size: min(var(--es-copy-mark-size), calc(100cqw / 9));
+  /* The gaps across row 1, for the windows' points (below). */
+  --es-tb-steps: 8;
+  position: relative;
+  margin-bottom: var(--es-copy-gap);
+}
+
+.es-tb {
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-space-4, 4px);
+}
+
+.es-tb-row {
+  display: grid;
+  grid-template-columns: repeat(9, var(--es-tb-size));
+  justify-content: space-between;
+}
+
+/* Row 1 with no host control in its 9th cell (owner ruling 2026-10-07):
+   eight buttons spread over the same width, not eight and a hole. The
+   wrapper carries it too, so the windows' points follow the buttons. */
+.es-tb-row.is-eight {
+  grid-template-columns: repeat(8, var(--es-tb-size));
+}
+
+.es-tb-wrap.is-eight {
+  --es-tb-steps: 7;
+}
+
+/* The alignment and case groups are radiogroups for a screen reader and
+   nothing for the grid: their buttons are cells of the row. */
+.es-tb-group {
+  display: contents;
+}
+
+.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 {
+  width: 16px;
+  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);
+}
+
+/*
+ * A NARROW BOX keeps both rows and shrinks the buttons a little — never wraps.
+ * The design: under a 300px panel, the shell's next size down (24px), and no
+ * wider than a ninth of the row. A 300px panel less its two 16px gutters is a
+ * 268px box: `.es-copy` is the container that measures it.
+ */
+@container (width < 268px) {
+  .es-tb-wrap {
+    --es-tb-size: min(24px, calc(100cqw / 9));
+  }
+
+  .es-tb-btn {
+    border-radius: 5px;
+  }
+
+  .es-tb-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+/*
+ * THE TWO WINDOWS (colour, link) float, pushing nothing down. They open just
+ * BELOW the words they act on, left-aligned to them, or ABOVE them with no
+ * room below (Lewis 2026-10-07: under the toolbar, the window covered the
+ * words being coloured). `CopyBox` measures that and writes `top`, `left`,
+ * `--es-pop-point` and `data-side` on the window (./place). The `top` here is
+ * only the unmeasured fallback: under the first row, as first drawn.
+ * DatePicker's popover: 288px, 12px corners, a 12px inset, react-os-shell's
+ * shadow; never wider than the box.
+ */
+.es-copy-pop {
+  position: absolute;
+  z-index: 5;
+  left: 0;
+  top: calc(var(--es-tb-size) + 6px);
+  box-sizing: border-box;
+  width: 288px;
+  max-width: 100%;
+  margin-top: 0;
+  display: flex;
+  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);
+}
+
+/* The point, aimed at its button: column k of row 1 across the box (100cqw),
+   whose cells are `--es-tb-steps` + 1 (nine, or eight with no host control). */
+.es-copy-pop::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border-left: 1px solid var(--es-border, #e5e7eb);
+  border-top: 1px solid var(--es-border, #e5e7eb);
+  transform: rotate(45deg);
+}
+
+/* Aimed at the words (measured), or — unmeasured — at its button, as above. */
+.es-copy-colors::before {
+  left: var(--es-pop-point, calc(4 * (100cqw - var(--es-tb-size)) / var(--es-tb-steps) + var(--es-tb-size) / 2 - 6px));
+}
+
+.es-copy-link.es-copy-pop::before {
+  left: var(--es-pop-point, calc(5 * (100cqw - var(--es-tb-size)) / var(--es-tb-steps) + var(--es-tb-size) / 2 - 6px));
+}
+
+/* Opened above the words: the point is on the bottom edge, aimed down. */
+.es-copy-pop[data-side='above']::before {
+  top: auto;
+  bottom: -6px;
+  transform: rotate(225deg);
+}
+
+.es-copy-pop-label,
+.es-copy-pop .es-copy-link-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--es-text-secondary, #4b5563);
+}
+
+/* The theme colours are pick's ONE theme row (`.es-pick-theme`, pick.css). */
+
+/* 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);
+}
+
+.es-copy-pop-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--es-space-4, 4px);
+}
+
+/* — the number cells (E5b): a 2-column grid between the toolbar and the box — */
+.es-copy-cells {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--es-space-4, 4px);
+  margin-bottom: var(--es-copy-gap);
+}