efficient-shell 4.131.0 → 4.134.0

package/dist/ui.css

@@ -1,11 +1,11 @@
 /**
- * react-os-shell/ui.css — styles for the UI kit, without the window chrome.
+ * efficient-shell/ui.css — styles for the UI kit, without the window chrome.
  *
- * Import this when you take `react-os-shell/ui`:
+ * Import this when you take `efficient-shell/ui`:
  *
- *   import "react-os-shell/ui.css";
+ *   import "efficient-shell/ui.css";
  *
- * Import EXACTLY ONE of this and `react-os-shell/styles.css` — the latter is
+ * Import EXACTLY ONE of this and `efficient-shell/styles.css` — the latter is
  * the umbrella over this file plus shell.css, so taking both doubles every rule.
  *
  * You supply Tailwind v4 yourself (`@import "tailwindcss"` in your own entry,
@@ -88,7 +88,7 @@
 
 /* Tailwind v4 doesn't scan node_modules by default — tell it to scan this
    package's compiled JS so utility classes used in kit components get
-   generated when consumers import react-os-shell/ui.css. */
+   generated when consumers import efficient-shell/ui.css. */
 @source "./**/*.js";
 
 /* Tailwind scans every text file it can reach, prose included, so a class
@@ -153,7 +153,7 @@ html.rosh-reduce-transparency *::after {
  * `[data-theme="dark"]` scope read any of these twelve. It exists so a surface
  * built WITHOUT the kit's utility classes — a report, an emailed document, a
  * standalone page — can read the same roles the portals do. That surface is
- * governed by harness 52-brand-surface.md and loads `react-os-shell/brand.css`.
+ * governed by harness 52-brand-surface.md and loads `efficient-shell/brand.css`.
  *
  * They are load-bearing in light now: the timeline card is drawn from them in
  * both themes, and the frosted glass is tinted from `--surface` (through
@@ -580,7 +580,7 @@ html.rosh-reduce-transparency *::after {
 /* ── Kit colours ────────────────────────────────────────────────────────────
  * Every colour a kit component used to write as a literal in its TypeScript,
  * as a token a host can reach. `tests/kitColourLiterals.test.ts` walks
- * everything `react-os-shell/ui` reaches and fails on a hex, `rgb()`, `hsl()` or
+ * everything `efficient-shell/ui` reaches and fails on a hex, `rgb()`, `hsl()` or
  * any other colour function written into a string; the allow-list beside it
  * names the few literals that are data rather than chrome.
  *
@@ -681,6 +681,231 @@ html.rosh-reduce-transparency *::after {
   );
 }
 
+/* ── DataTable on a narrow container ───────────────────────────────────────
+ * `<DataTable stackOnNarrow>`. Below 40rem of the TABLE'S OWN width every row
+ * is drawn as a card: one line per cell, the column's name on the left in the
+ * header's small uppercase voice, the value beside it. At 375px a strip of six
+ * columns wraps every cell onto two or three lines and pushes the last columns
+ * off the edge; a card gives each value the width there is.
+ *
+ * A CONTAINER query, not a media query. A table in a sidebar or a split pane
+ * on a wide monitor is as narrow as one on a phone, and only the container
+ * knows it. The wrapper (`rosh-dt-stack`) is the container, named so a table
+ * inside another container — a card that is one itself — answers to its own.
+ * 40rem rather than 640px so it moves with the reader's text size, as the
+ * columns it is making room for do. A container condition cannot read a custom
+ * property, which is why the width is not a token: one per table would mean a
+ * copy of every rule below for each.
+ *
+ * NOTHING HERE IS A DARK RULE. Every colour reads the neutral ramp, which the
+ * dark theme swaps underneath, so both themes are one set of rules.
+ *
+ * Why some declarations carry `!important`, and only those:
+ *   - three are inline styles the component writes for the wide layout — a
+ *     header's `width`, a pinned column's `left`, the table's `minWidth` —
+ *     and an inline style beats any rule that is not important;
+ *   - the rest are colours the dark remaps also set with `!important`
+ *     (`.bg-white`, `.bg-gray-50`, `.border-gray-100` on the row). Those
+ *     selectors weigh (0,2,0), so the rules that must beat them are written
+ *     from `.rosh-dt-table` down to weigh more.
+ * Everything else is unlayered, which already beats the Tailwind utilities the
+ * wide layout is drawn with (they live in `@layer utilities`). A caller's row
+ * TINT survives: the card sets no background, so `rowClassName="bg-red-50"`
+ * still paints it. Its borders and spacing are the card's.
+ *
+ * The label is `::before { content: attr(data-label) }` with an EMPTY
+ * alternative text (`/ ""`). Generated content is otherwise part of a cell's
+ * accessible name, so a screen reader would hear "Qty, Qty 5": once from the
+ * column header it announces with every cell, once from the label. The first
+ * `content` is the fallback for an engine that cannot parse the second.
+ *
+ * Outside the query, `rosh-dt-value` is `display: contents`: the box the value
+ * is wrapped in so a card line is always two items however many nodes `render`
+ * returns, and in the wide layout no box at all.
+ */
+.rosh-dt-stack {
+  container: rosh-dt / inline-size;
+}
+.rosh-dt-value {
+  display: contents;
+}
+
+@container rosh-dt (width < 40rem) {
+  /* The frame `bordered` draws steps aside: every card has an edge of its own,
+     and a frame around cards is a second border around each of them. */
+  .rosh-dt-scroll {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .rosh-dt-table {
+    display: block;
+    min-width: 0 !important;
+  }
+
+  /* The header stays, compact. Sorting has to remain reachable, and it is
+     these buttons — with their arrows and their `aria-sort` — that do it, so
+     the sortable headers become a wrapping row of chips above the cards, and
+     "select all" leads it, above the column of boxes it controls. */
+  /* A grouped table has two header rows — "select all" in the first, the
+     grouped columns' chips in the second — so the rows sit side by side as
+     well as their chips, and the strip reads as one line wherever it fits.
+     Spacing is each chip's margin, not a gap, so a row left with nothing to
+     show takes no room at all. */
+  .rosh-dt-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .rosh-dt-table > .rosh-dt-head > tr {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    border-width: 0;
+    background-color: transparent !important;
+  }
+  .rosh-dt-head th.rosh-dt-sort {
+    position: static;
+    width: auto !important;
+    margin: 0 0.375rem 0.5rem 0;
+    padding: 0;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md, 0.375rem);
+    /* The wide header's own fill, which is what the dark remap already gives
+       a pinned header — so neither theme needs to fight it. */
+    background-color: var(--surface-sunken);
+  }
+  .rosh-dt-head th.rosh-dt-sort[aria-sort="ascending"],
+  .rosh-dt-head th.rosh-dt-sort[aria-sort="descending"] {
+    border-color: var(--line-strong);
+  }
+  /* The button fills its chip, so the whole chip is the target — 32px tall,
+     past WCAG 2.5.8's 24. */
+  .rosh-dt-sort > button {
+    min-height: 2rem;
+    padding: 0.375rem 0.625rem;
+  }
+  /* A chip names its column group too: two chips both reading "Amount" would
+     leave the reader to guess which one sorts the debits. Hidden from the
+     accessibility tree like the card labels — the group header is still a
+     header, and is read with it. */
+  .rosh-dt-sort > button[data-group]::before {
+    content: attr(data-group) "\a0\b7\a0";
+    content: attr(data-group) "\a0\b7\a0" / "";
+  }
+  .rosh-dt-table > .rosh-dt-head > tr > th.rosh-dt-select {
+    position: static;
+    width: auto !important;
+    margin: 0 0.375rem 0.5rem 0;
+    /* Level with the card checkboxes below: a card's 1px edge, then its
+       padding. */
+    padding: 0.25rem 0.5rem 0.25rem calc(0.75rem + 1px);
+    background-color: transparent !important;
+  }
+  /* Every other header — a column that does not sort, a group — leaves the
+     screen but not the table: a screen reader still finds each cell's column
+     header. `left` is reset because a pinned header carries an inline offset,
+     and a 1px box parked 400px to the right is horizontal overflow. */
+  .rosh-dt-head th:not(.rosh-dt-sort, .rosh-dt-select) {
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    width: 1px !important;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* One card per row. */
+  .rosh-dt-body {
+    display: grid;
+    gap: 0.5rem;
+  }
+  .rosh-dt-table > .rosh-dt-body > .rosh-dt-row {
+    display: block;
+    position: relative;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid var(--line) !important;
+    border-radius: var(--radius-lg, 0.5rem);
+  }
+  /* The checkbox sits in the card's top-left corner, level with the first
+     line, rather than spending a line of its own. */
+  .rosh-dt-table > .rosh-dt-body > .rosh-dt-row-select {
+    padding-left: 2.5rem;
+  }
+  .rosh-dt-table > .rosh-dt-body > .rosh-dt-row > td.rosh-dt-select {
+    position: absolute;
+    top: 0;
+    left: 0 !important;
+    display: flex;
+    width: auto !important;
+    padding: 0.75rem;
+    background-color: transparent !important;
+  }
+
+  /* One line per cell: the label, then the value. A pinned cell's background
+     was there to hide the columns scrolling under it; there are none. */
+  .rosh-dt-table > .rosh-dt-body > .rosh-dt-row > td.rosh-dt-cell {
+    display: block;
+    position: static;
+    max-width: none;
+    padding: 0.375rem 0;
+    background-color: transparent !important;
+  }
+  .rosh-dt-cell + .rosh-dt-cell {
+    border-top: 1px solid var(--line-subtle);
+  }
+  .rosh-dt-table > .rosh-dt-body > .rosh-dt-row > td.rosh-dt-cell[data-label] {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 0.75rem;
+    align-items: baseline;
+  }
+  .rosh-dt-cell[data-label]::before {
+    content: attr(data-label);
+    content: attr(data-label) / "";
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    /* Left whatever the column's alignment: that is the VALUE's. And free to
+       wrap in an `ellipsis` column, whose cell is `nowrap` for the value. */
+    text-align: start;
+    white-space: normal;
+    color: var(--ink-faint);
+    overflow-wrap: anywhere;
+  }
+  /* The value keeps the cell's alignment, so a figures column still lines its
+     decimal points up at the card's right edge. A long token — an email, a
+     part number — breaks rather than pushing the card wider than the screen. */
+  .rosh-dt-cell > .rosh-dt-value {
+    display: block;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  /* `ellipsis` keeps its promise of one line; the cell is a grid now, and
+     only the value can carry the ellipsis. */
+  .rosh-dt-clip > .rosh-dt-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rosh-dt-body > .rosh-dt-empty,
+  .rosh-dt-body > .rosh-dt-empty > td {
+    display: block;
+  }
+
+  /* The pager wraps rather than running off a narrow screen. */
+  .rosh-dt-pager > nav {
+    flex-wrap: wrap;
+  }
+}
+
 /* ── Chart motion ───────────────────────────────────────────────────────────
  * Every animation the chart family uses, as classes, so no chart implements
  * motion itself and none of them can forget the reduced-motion rule below.
@@ -1370,30 +1595,48 @@ html.rosh-reduce-transparency *::after {
 :is([data-theme="dark"], .dark) .hover\:bg-gray-100:hover { background-color: var(--surface-raised) !important; }
 :is([data-theme="dark"], .dark) .hover\:bg-gray-200:hover { background-color: var(--line-strong) !important; }
 
+/* ── The accent, in dark ───────────────────────────────────────────────────
+ * The kit's accent is Tailwind's blue. In light it is painted with the blue
+ * utilities themselves, so a host that maps `--color-blue-*` onto its own accent
+ * recolours it. In dark these remaps paint it instead, and they used to write
+ * blue as literals, so a host's accent turned blue at night. They read these four
+ * now. Channels rather than colours, because most of them are washes at an alpha
+ * of their own (`rgba(var(--rosh-dark-accent-rgb), 0.26)`).
+ *
+ * Every default is the literal it replaced (blue-500 / blue-400 / blue-300 /
+ * blue-200), so nothing renders differently for a host that sets none.
+ * `tests/darkAccentTokens.test.ts` holds every dark blue rule to them. */
+:root {
+  --rosh-dark-accent-rgb: 59, 130, 246;
+  --rosh-dark-accent-line-rgb: 96, 165, 250;
+  --rosh-dark-accent-ink-rgb: 147, 197, 253;
+  --rosh-dark-accent-ink-strong-rgb: 191, 219, 254;
+}
+
 /* Blue hover states — used by menu items, profile row, etc.
    In dark mode swap the near-white bg for a dark blue tint and the dark
    blue text for a light shade so highlighted items stay readable. */
 :is([data-theme="dark"], .dark) .bg-blue-50,
-:is([data-theme="dark"], .dark) .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50:hover { background-color: rgba(var(--rosh-dark-accent-rgb), 0.26) !important; }
 :is([data-theme="dark"], .dark) .text-blue-700,
-:is([data-theme="dark"], .dark) .hover\:text-blue-700:hover { color: #bfdbfe !important; }
-:is([data-theme="dark"], .dark) .text-blue-600 { color: #93c5fd !important; }
-:is([data-theme="dark"], .dark) .text-blue-800 { color: #bfdbfe !important; }
+:is([data-theme="dark"], .dark) .hover\:text-blue-700:hover { color: rgb(var(--rosh-dark-accent-ink-strong-rgb)) !important; }
+:is([data-theme="dark"], .dark) .text-blue-600 { color: rgb(var(--rosh-dark-accent-ink-rgb)) !important; }
+:is([data-theme="dark"], .dark) .text-blue-800 { color: rgb(var(--rosh-dark-accent-ink-strong-rgb)) !important; }
 
 /* Bare *-100 highlight backgrounds + *-700 text (status pills, badges, avatars,
    dialog icons) have no dark override otherwise, so they keep their bright
    light-mode value and wash out the text on top. Mute the background to a low
    tint and lighten the text so highlighted content stays readable in dark mode. */
-:is([data-theme="dark"], .dark) .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-100 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.22) !important; }
 
 /* Tailwind's `!` important modifier compiles to distinct class names
    (`.\!bg-blue-100` etc.), so the EditableGrid selection utilities escape the
    remaps above: the selection keeps its light-mode background while the cell
    text goes light, making selected cells unreadable in dark mode. The
    attribute selector outranks the utility's own !important. */
-:is([data-theme="dark"], .dark) .\!bg-blue-50 { background-color: rgba(59, 130, 246, 0.26) !important; }
-:is([data-theme="dark"], .dark) .\!bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
-:is([data-theme="dark"], .dark) .\!bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
+:is([data-theme="dark"], .dark) .\!bg-blue-50 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.26) !important; }
+:is([data-theme="dark"], .dark) .\!bg-blue-100 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.22) !important; }
+:is([data-theme="dark"], .dark) .\!bg-blue-200 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.35) !important; }
 :is([data-theme="dark"], .dark) .\!text-gray-700 { color: var(--ink) !important; }
 :is([data-theme="dark"], .dark) .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
 :is([data-theme="dark"], .dark) .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
@@ -1437,16 +1680,16 @@ html.rosh-reduce-transparency *::after {
 :is([data-theme="dark"], .dark) .bg-gray-100\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
 :is([data-theme="dark"], .dark) .bg-gray-200\/40 { background-color: rgba(49, 50, 68, 0.4) !important; }
 :is([data-theme="dark"], .dark) .bg-gray-200\/50 { background-color: rgba(49, 50, 68, 0.5) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-100\/60 { background-color: rgba(59, 130, 246, 0.22) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-100\/60 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.22) !important; }
 /* Pale-blue tinted panels (selected rows, inline-reply box) — scale the
    .bg-blue-50 dark tint (0.26) down through the alpha steps. */
-:is([data-theme="dark"], .dark) .bg-blue-50\/30 { background-color: rgba(59, 130, 246, 0.10) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-50\/40 { background-color: rgba(59, 130, 246, 0.12) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-50\/50 { background-color: rgba(59, 130, 246, 0.15) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-50\/60 { background-color: rgba(59, 130, 246, 0.18) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/30 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.10) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/40 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.12) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/50 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.15) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/60 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.18) !important; }
 :is([data-theme="dark"], .dark) .border-gray-200\/40 { border-color: rgba(69, 71, 90, 0.4) !important; }
 :is([data-theme="dark"], .dark) .border-gray-300\/40 { border-color: rgba(88, 91, 112, 0.4) !important; }
-:is([data-theme="dark"], .dark) .border-blue-400\/60 { border-color: rgba(96, 165, 250, 0.45) !important; }
+:is([data-theme="dark"], .dark) .border-blue-400\/60 { border-color: rgba(var(--rosh-dark-accent-line-rgb), 0.45) !important; }
 :is([data-theme="dark"], .dark) .hover\:bg-gray-200\/40:hover { background-color: rgba(49, 50, 68, 0.4) !important; }
 
 /* White alpha variants — the bare .bg-white override doesn't match the /50../95
@@ -1459,7 +1702,7 @@ html.rosh-reduce-transparency *::after {
 :is([data-theme="dark"], .dark) .bg-white\/80 { background-color: rgba(30, 30, 46, 0.85) !important; }
 :is([data-theme="dark"], .dark) .bg-white\/90 { background-color: rgba(30, 30, 46, 0.92) !important; }
 :is([data-theme="dark"], .dark) .bg-white\/95 { background-color: rgba(30, 30, 46, 0.95) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-50\/70 { background-color: rgba(59, 130, 246, 0.22) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/70 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.22) !important; }
 
 /* ── Bare elements ─────────────────────────────────────────────────────────
    The next three rules style elements by TAG — every input, select and
@@ -1506,7 +1749,7 @@ html.rosh-reduce-transparency *::after {
 :is([data-theme="dark"], .dark) .bg-gray-100.text-gray-800 { background-color: var(--surface-raised) !important; color: var(--ink) !important; }
 :is([data-theme="dark"], .dark) .bg-gray-300.text-gray-800 { background-color: var(--line-strong) !important; color: var(--ink-strongest) !important; }
 :is([data-theme="dark"], .dark) .bg-green-100.text-green-800 { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
-:is([data-theme="dark"], .dark) .bg-blue-100.text-blue-800 { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
+:is([data-theme="dark"], .dark) .bg-blue-100.text-blue-800 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.18) !important; color: rgb(var(--rosh-dark-accent-ink-rgb)) !important; }
 :is([data-theme="dark"], .dark) .bg-indigo-100.text-indigo-800 { background-color: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }
 :is([data-theme="dark"], .dark) .bg-sky-100.text-sky-800 { background-color: rgba(14, 165, 233, 0.18) !important; color: #7dd3fc !important; }
 :is([data-theme="dark"], .dark) .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.18) !important; color: #fde68a !important; }
@@ -1656,27 +1899,27 @@ html.rosh-reduce-transparency *::after {
 /* Blue — gaps beyond the accent remaps above. Hover/active steps sit one
    ladder step above their resting tint (base .26 → active .30; the /30../50
    alpha ladder steps 0.10/0.12/0.15 → hovers 0.12/0.15/0.18). */
-:is([data-theme="dark"], .dark) .bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
-:is([data-theme="dark"], .dark) .active\:bg-blue-200:active { background-color: rgba(59, 130, 246, 0.40) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-200\/60 { background-color: rgba(59, 130, 246, 0.20) !important; }
-:is([data-theme="dark"], .dark) .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
-:is([data-theme="dark"], .dark) .active\:bg-blue-50:active { background-color: rgba(59, 130, 246, 0.30) !important; }
-:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/30:hover { background-color: rgba(59, 130, 246, 0.12) !important; }
-:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/40:hover { background-color: rgba(59, 130, 246, 0.15) !important; }
-:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/50:hover { background-color: rgba(59, 130, 246, 0.18) !important; }
-:is([data-theme="dark"], .dark) .border-blue-100 { border-color: rgba(59, 130, 246, 0.22) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-200 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.35) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-blue-200:active { background-color: rgba(var(--rosh-dark-accent-rgb), 0.40) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-200\/60 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.20) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-100:hover { background-color: rgba(var(--rosh-dark-accent-rgb), 0.26) !important; }
+:is([data-theme="dark"], .dark) .active\:bg-blue-50:active { background-color: rgba(var(--rosh-dark-accent-rgb), 0.30) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/30:hover { background-color: rgba(var(--rosh-dark-accent-rgb), 0.12) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/40:hover { background-color: rgba(var(--rosh-dark-accent-rgb), 0.15) !important; }
+:is([data-theme="dark"], .dark) .hover\:bg-blue-50\/50:hover { background-color: rgba(var(--rosh-dark-accent-rgb), 0.18) !important; }
+:is([data-theme="dark"], .dark) .border-blue-100 { border-color: rgba(var(--rosh-dark-accent-rgb), 0.22) !important; }
 :is([data-theme="dark"], .dark) .border-blue-200,
-:is([data-theme="dark"], .dark) .hover\:border-blue-200:hover { border-color: rgba(59, 130, 246, 0.32) !important; }
+:is([data-theme="dark"], .dark) .hover\:border-blue-200:hover { border-color: rgba(var(--rosh-dark-accent-rgb), 0.32) !important; }
 :is([data-theme="dark"], .dark) .border-blue-300,
-:is([data-theme="dark"], .dark) .hover\:border-blue-300:hover { border-color: rgba(59, 130, 246, 0.45) !important; }
-:is([data-theme="dark"], .dark) .border-blue-300\/50 { border-color: rgba(59, 130, 246, 0.25) !important; }
-:is([data-theme="dark"], .dark) .text-blue-900 { color: #bfdbfe !important; }
-:is([data-theme="dark"], .dark) .hover\:text-blue-600:hover { color: #93c5fd !important; }
-:is([data-theme="dark"], .dark) .hover\:text-blue-800:hover { color: #bfdbfe !important; }
+:is([data-theme="dark"], .dark) .hover\:border-blue-300:hover { border-color: rgba(var(--rosh-dark-accent-rgb), 0.45) !important; }
+:is([data-theme="dark"], .dark) .border-blue-300\/50 { border-color: rgba(var(--rosh-dark-accent-rgb), 0.25) !important; }
+:is([data-theme="dark"], .dark) .text-blue-900 { color: rgb(var(--rosh-dark-accent-ink-strong-rgb)) !important; }
+:is([data-theme="dark"], .dark) .hover\:text-blue-600:hover { color: rgb(var(--rosh-dark-accent-ink-rgb)) !important; }
+:is([data-theme="dark"], .dark) .hover\:text-blue-800:hover { color: rgb(var(--rosh-dark-accent-ink-strong-rgb)) !important; }
 /* File-input buttons (file: compiles to ::file-selector-button) */
-:is([data-theme="dark"], .dark) .file\:bg-blue-50::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
-:is([data-theme="dark"], .dark) .file\:text-blue-700::file-selector-button { color: #bfdbfe !important; }
-:is([data-theme="dark"], .dark) .hover\:file\:bg-blue-100:hover::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
+:is([data-theme="dark"], .dark) .file\:bg-blue-50::file-selector-button { background-color: rgba(var(--rosh-dark-accent-rgb), 0.26) !important; }
+:is([data-theme="dark"], .dark) .file\:text-blue-700::file-selector-button { color: rgb(var(--rosh-dark-accent-ink-strong-rgb)) !important; }
+:is([data-theme="dark"], .dark) .hover\:file\:bg-blue-100:hover::file-selector-button { background-color: rgba(var(--rosh-dark-accent-rgb), 0.26) !important; }
 
 /* Gray interaction-state variants (separate class names from the bare remaps) */
 :is([data-theme="dark"], .dark) .hover\:text-gray-600:hover,
@@ -1706,7 +1949,7 @@ html.rosh-reduce-transparency *::after {
 :is([data-theme="dark"], .dark) .text-black { color: var(--ink-strongest) !important; }
 :is([data-theme="dark"], .dark) .hover\:text-black:hover { color: #ffffff !important; }
 
-/* Markdown — the clamped note (react-os-shell/markdown, `clamp`).
+/* Markdown — the clamped note (efficient-shell/markdown, `clamp`).
 
    The fade MASKS the text rather than laying a coloured gradient over it. A
    gradient has to know what colour to fade to, and there is no answer that
@@ -1896,12 +2139,12 @@ html.rosh-reduce-transparency *::after {
 :is([data-theme="dark"], .dark) .hover\:bg-gray-200\/70:hover { background-color: rgba(49, 50, 68, 0.7) !important; }
 :is([data-theme="dark"], .dark) .hover\:bg-gray-200\/90:hover { background-color: rgba(49, 50, 68, 0.9) !important; }
 :is([data-theme="dark"], .dark) .border-gray-200\/60 { border-color: rgba(69, 71, 90, 0.6) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-50\/80 { background-color: rgba(59, 130, 246, 0.24) !important; }
-:is([data-theme="dark"], .dark) .bg-blue-50\/90 { background-color: rgba(59, 130, 246, 0.26) !important; }
-:is([data-theme="dark"], .dark) .text-blue-600\/70 { color: rgba(147, 197, 253, 0.7) !important; }
-:is([data-theme="dark"], .dark) .text-blue-700\/70 { color: rgba(191, 219, 254, 0.7) !important; }
-:is([data-theme="dark"], .dark) .text-blue-800\/80 { color: rgba(191, 219, 254, 0.8) !important; }
-:is([data-theme="dark"], .dark) .text-blue-900\/60 { color: rgba(191, 219, 254, 0.6) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/80 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.24) !important; }
+:is([data-theme="dark"], .dark) .bg-blue-50\/90 { background-color: rgba(var(--rosh-dark-accent-rgb), 0.26) !important; }
+:is([data-theme="dark"], .dark) .text-blue-600\/70 { color: rgba(var(--rosh-dark-accent-ink-rgb), 0.7) !important; }
+:is([data-theme="dark"], .dark) .text-blue-700\/70 { color: rgba(var(--rosh-dark-accent-ink-strong-rgb), 0.7) !important; }
+:is([data-theme="dark"], .dark) .text-blue-800\/80 { color: rgba(var(--rosh-dark-accent-ink-strong-rgb), 0.8) !important; }
+:is([data-theme="dark"], .dark) .text-blue-900\/60 { color: rgba(var(--rosh-dark-accent-ink-strong-rgb), 0.6) !important; }
 :is([data-theme="dark"], .dark) .bg-amber-200\/70 { background-color: rgba(245, 158, 11, 0.20) !important; }
 :is([data-theme="dark"], .dark) .hover\:bg-amber-50\/70:hover { background-color: rgba(245, 158, 11, 0.12) !important; }
 :is([data-theme="dark"], .dark) .text-amber-800\/80 { color: rgba(253, 230, 138, 0.8) !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-shell",
-  "version": "4.131.0",
+  "version": "4.134.0",
   "description": "Desktop-style React UI shell — windows, taskbar, start menu, sticky notes, frosted glass theming, and bundled apps.",
   "license": "MIT",
   "author": "Victor Y. Mau",

package/dist/ConfirmDialog-MTC7QMUJ.js

@@ -1,4 +0,0 @@
-export { ConfirmProvider, confirm, confirmDestructive, prompt, useConfirm } from './chunk-XH3ELPQZ.js';
-import './chunk-7IN7YZAL.js';
-//# sourceMappingURL=ConfirmDialog-MTC7QMUJ.js.map
-//# sourceMappingURL=ConfirmDialog-MTC7QMUJ.js.map

package/dist/PdfViewer-M2YGZIYX.js

@@ -1,5 +0,0 @@
-export { PdfViewer as default, fitScale } from './chunk-SEWF4O3H.js';
-import './chunk-EENVXIVU.js';
-import './chunk-7IN7YZAL.js';
-//# sourceMappingURL=PdfViewer-M2YGZIYX.js.map
-//# sourceMappingURL=PdfViewer-M2YGZIYX.js.map

package/dist/chunk-2GZQ352J.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/apps/_about.tsx"],"names":[],"mappings":"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","file":"chunk-2GZQ352J.js","sourcesContent":["/**\n * Shared \"About\" dialog for the bundled apps.\n *\n * Each bundled app carries its own version (independent of the package\n * version) so app-level changes can be tracked without bumping every app at\n * once. `<AboutApp app=\"…\" />` registers an \"About <Name>\" item in the\n * window title menu and renders the dialog: app icon, name, app version and\n * the react-os-shell attribution + shell version.\n *\n * Bump an app's version in `BUILTIN_APP_INFO` whenever that app's behaviour\n * changes, alongside the package-level CHANGELOG entry.\n */\nimport { useCallback, useState, isValidElement, cloneElement, type ReactElement } from 'react';\nimport Modal, { useWindowMenuItem } from '../shell/Modal';\nimport { navIcons } from '../shell-config/nav';\nimport { VERSION } from '../version';\n\nexport interface BuiltinAppInfo {\n  /** Display name — matches the window-registry label. */\n  name: string;\n  /** App version, independent of the package version. */\n  version: string;\n  /** One-line summary shown in the About dialog. */\n  description: string;\n  /** Registry route — used to look up the consumer-registered nav icon. */\n  route: string;\n}\n\nexport const BUILTIN_APP_INFO = {\n  spreadsheet: {\n    name: 'Spreadsheets',\n    version: '1.1.3',\n    route: '/spreadsheet',\n    description: 'Multi-sheet spreadsheet editor with CSV / TSV import and export.',\n  },\n  notepad: {\n    name: 'Notepad',\n    version: '1.0.0',\n    route: '/notepad',\n    description: 'Color-coded notes with checklists, desktop stickies and entity autolinking.',\n  },\n  documents: {\n    name: 'Documents',\n    version: '1.1.0',\n    route: '/documents',\n    description: 'Letter-page editor for Word documents and plain-text files — images, lists, alignment.',\n  },\n  preview: {\n    name: 'Preview',\n    version: '1.3.2',\n    route: '/preview',\n    description: 'Viewer for PDF documents, images, DXF drawings and 3D models — CAD-style measuring with object snap and an AutoCAD-like command bar.',\n  },\n  files: {\n    name: 'Files',\n    version: '1.1.0',\n    route: '/files',\n    description: 'Personal file manager with folders, uploads, quota, trash and desktop shortcut folders.',\n  },\n  browser: {\n    name: 'Browser',\n    version: '1.0.1',\n    route: '/browser',\n    description: 'Minimal web browser with bookmarks, history and navigation bar.',\n  },\n} satisfies Record<string, BuiltinAppInfo>;\n\nexport type BuiltinAppId = keyof typeof BUILTIN_APP_INFO;\n\nconst ABOUT_MENU_ICON = (\n  <svg className=\"h-4 w-4 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={1.5}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z\" />\n  </svg>\n);\n\n// Generic window glyph shown when the consumer hasn't registered a nav icon\n// for the app's route (same fallback shape as the Modal title bar).\nconst FALLBACK_APP_ICON = (\n  <svg className=\"h-9 w-9\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={1.5}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.75 6.75A2.25 2.25 0 016 4.5h12a2.25 2.25 0 012.25 2.25v10.5A2.25 2.25 0 0118 19.5H6a2.25 2.25 0 01-2.25-2.25V6.75z M3.75 9h16.5\" />\n  </svg>\n);\n\n/** Registers \"About <Name>\" in the window title menu and renders the dialog.\n *  Render anywhere inside the app's window. */\nexport default function AboutApp({ app }: { app: BuiltinAppId }) {\n  const info = BUILTIN_APP_INFO[app];\n  const [open, setOpen] = useState(false);\n  const openDialog = useCallback(() => setOpen(true), []);\n  useWindowMenuItem(`About ${info.name}`, openDialog, ABOUT_MENU_ICON);\n\n  if (!open) return null;\n\n  const registered = navIcons[info.route];\n  const appIcon = isValidElement(registered)\n    ? cloneElement(registered as ReactElement, { className: 'h-9 w-9' } as any)\n    : FALLBACK_APP_ICON;\n\n  return (\n    <Modal open onClose={() => setOpen(false)} title={`About ${info.name}`} size=\"sm\" compact bodyScroll={false} autoHeight dimensions={[320, 320]}>\n      <div className=\"flex flex-col items-center text-center px-5 pt-5 pb-4\">\n        <div className=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-gray-100 text-gray-600 shrink-0\">\n          {appIcon}\n        </div>\n        <h2 className=\"mt-3 text-lg font-bold text-gray-900\">{info.name}</h2>\n        <p className=\"text-[11px] font-mono text-gray-400\">Version {info.version}</p>\n        <p className=\"mt-2 text-xs text-gray-500 leading-relaxed\">{info.description}</p>\n        <div className=\"mt-4 pt-3 border-t border-gray-200 w-full\">\n          <p className=\"text-[11px] text-gray-500\">\n            Part of the <span className=\"font-medium text-gray-700\">react-os-shell</span> desktop environment\n          </p>\n          {VERSION && <p className=\"mt-0.5 text-[10px] font-mono text-gray-400\">shell v{VERSION}</p>}\n        </div>\n      </div>\n    </Modal>\n  );\n}\n"]}

package/dist/chunk-3L463T5H.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/apps/_previewStage.ts"],"names":[],"mappings":";AA+CO,IAAM,wBAAA,GAA2B;AAaxC,IAAI,OAAA,GAAkC,IAAA;AACtC,IAAI,SAAA,GAAY,CAAA;AAKT,SAAS,cAAc,IAAA,EAAwC;AACpE,EAAA,MAAM,QAAQ,EAAE,SAAA;AAChB,EAAA,MAAM,KAAA,GAAyB,EAAE,KAAA,EAAO,IAAA,EAAK;AAC7C,EAAA,OAAA,GAAU,KAAA;AACV,EAAA,OAAO;AAAA,IACL,OAAO,IAAA,EAAsB;AAY3B,MAAA,IAAI,OAAA,KAAY,KAAA,EAAO,KAAA,CAAM,IAAA,GAAO,IAAA;AACpC,MAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACnC,MAAA,MAAA,CAAO,aAAA,CAAc,IAAI,WAAA,CAAY,wBAAA,EAA0B,EAAE,MAAA,EAAQ,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAK,EAAG,CAAC,CAAA;AAAA,IACnG;AAAA,GACF;AACF;AAGO,SAAS,mBAAA,GAA8C;AAC5D,EAAA,OAAO,OAAA;AACT;AAKO,SAAS,qBAAqB,KAAA,EAA8B;AACjE,EAAA,IAAI,OAAA,KAAY,OAAO,OAAA,GAAU,IAAA;AACnC","file":"chunk-3L463T5H.js","sourcesContent":["/**\n * PDF Preview staging — the tiny consumer-facing surface of the Preview app.\n *\n * Lives apart from Preview.tsx so importing `setPdfPreview` (from\n * `react-os-shell/apps` or shell internals like PdfActionButton /\n * openPreviewFile) never drags the viewer implementation — and its static\n * pdfjs-dist import — into a host's startup bundle. The Preview window\n * component stays behind its React.lazy dynamic import and drains the stage\n * on mount via the @internal peek/claim helpers below.\n */\n\nexport interface PdfPreviewData {\n  /** Object URL or remote URL of the PDF. Blob URLs are revoked when the window unmounts.\n   *  Leave blank when staging a `converting: true` placeholder; call `handle.update({...})`\n   *  on the handle returned by `setPdfPreview` once conversion finishes. */\n  url?: string;\n  /** Display name (and download filename). */\n  filename: string;\n  /** Renderer to use. Defaults to `'pdf'`. `'dxf'` requires the consumer to\n   *  have `dxf-viewer` installed (it's an optional peer dep). `'image'`\n   *  renders an `<img>` for raster screenshots / photos. `'3d'` covers\n   *  STEP / STL / OBJ / GLTF / 3MF / IGES via the optional\n   *  `online-3d-viewer` peer dep. */\n  kind?: 'pdf' | 'dxf' | 'image' | '3d';\n  /** Optional download handler — replaces the built-in \"save URL as filename\" if supplied. */\n  onDownload?: () => void;\n  /** Optional email handler — only shown when supplied. */\n  onEmail?: () => void;\n  /** Show a progress placeholder while the consumer fetches/converts the file. */\n  converting?: boolean;\n  /** Headline shown on the converting placeholder (e.g. \"CONVERTING DWG FILE\"). */\n  convertingMessage?: string;\n}\n\n/** Handle returned by `setPdfPreview`. Holds the identity of the staged\n *  payload so a later `.update()` only targets the window that picked it up\n *  (not every open Preview, which would clobber unrelated windows). */\nexport interface PdfPreviewHandle {\n  /** Replace the data shown in the window that consumed this staging. Safe to\n   *  call before that window exists — an update that lands while the payload\n   *  is still staged replaces the staged payload, so the window opens on the\n   *  resolved file instead of the placeholder it was staged with.\n   *  No-op only once the window that consumed the staging has been closed. */\n  update(next: PdfPreviewData): void;\n}\n\n/** @internal Event carrying `.update()` payloads to the claiming window. */\nexport const PDF_PREVIEW_UPDATE_EVENT = 'react-os-shell:pdf-preview-update';\n\n/** @internal Staged payload awaiting the next Preview window mount.\n *\n *  `data` is MUTABLE and deliberately so: `update()` rewrites it in place\n *  while the stage is still unclaimed. Restaging a fresh object instead would\n *  break the identity that `claimPdfPreviewStage` and the claimant's own\n *  `consumedRef` are holding. */\nexport interface PendingPdfStage {\n  token: number;\n  data: PdfPreviewData;\n}\n\nlet pending: PendingPdfStage | null = null;\nlet nextToken = 0;\n\n/** Stage a PDF for the next Preview window mount. The returned handle's\n *  `update()` method swaps content in *that* specific window only — use it\n *  to replace a `converting: true` placeholder with the resolved file. */\nexport function setPdfPreview(data: PdfPreviewData): PdfPreviewHandle {\n  const token = ++nextToken;\n  const stage: PendingPdfStage = { token, data };\n  pending = stage;\n  return {\n    update(next: PdfPreviewData) {\n      // The window is opened by `openPage('/preview')` and Preview is a lazy\n      // chunk, so a consumer that resolves quickly — a cached PDF, a fast\n      // endpoint, a second preview in the same session — can call this before\n      // any window has mounted to listen. The event is fire-and-forget, so on\n      // its own it would be dropped and the window would open on the\n      // placeholder and sit there for ever. Rewrite the stage as well while it\n      // is still ours: whoever drains it next gets the current payload.\n      //\n      // `pending === stage` is exactly \"no window has claimed this yet\".\n      // Claiming and binding the listener happen in the same commit (see\n      // Preview.tsx), so there is no third state where both paths miss.\n      if (pending === stage) stage.data = next;\n      if (typeof window === 'undefined') return;\n      window.dispatchEvent(new CustomEvent(PDF_PREVIEW_UPDATE_EVENT, { detail: { token, data: next } }));\n    },\n  };\n}\n\n/** @internal Render-phase peek — see Preview.tsx for the drain protocol. */\nexport function peekPdfPreviewStage(): PendingPdfStage | null {\n  return pending;\n}\n\n/** @internal Commit-phase claim. The identity check keeps a payload staged\n *  *after* the claimant's render-phase peek available for the window it\n *  belongs to. */\nexport function claimPdfPreviewStage(stage: PendingPdfStage): void {\n  if (pending === stage) pending = null;\n}\n"]}