@adecore/ui 0.14.0

package/src/theme.css

@@ -0,0 +1,562 @@
+/* The tokens, type scale and shared rules of @adecore/ui. An app imports this right after Tailwind and adds its own tokens after it. */
+
+/* dark: follows the app theme, not the OS. */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/* Semantic tokens. Components only ever reference these, never a raw color. */
+:root, [data-theme="light"] {
+    color-scheme: light;
+    --bg: #f4f4f5;
+    --surface: #ffffff;
+    --surface-raised: #ffffff;
+    --surface-sunken: #ececef;
+    /* A bar that is not the one in focus: between the sunken page behind it and a focused bar, so it
+       still reads as a bar. The toolbar of a cell in the grid that does not have the keyboard. */
+    --surface-idle: color-mix(in srgb, var(--surface) 50%, var(--surface-sunken));
+    /* The step under the pointer: one shade off the ground a row or a button sits on, and lighter
+       than the pressed step, so hover reads as a lift and pressed as the heavier state. A white
+       popup cannot go lighter, so in this theme the step is the softest gray there is. */
+    --surface-hover: #f3f3f5;
+    /* The pressed step of a toggle. It cannot be `--surface-raised`, which equals `--surface` in the
+       light theme, and it has to sit a shade past `--surface-hover` so pressed outranks hover. */
+    --surface-active: #dcdce2;
+    /* Borders carry an alpha rather than a gray of their own, so a line takes the color of whatever
+       it is drawn over instead of fighting it. A gray hairline over a tinted surface reads as a
+       smudge; the same line in black at a low alpha stays a line. Everything with a surface of its
+       own clips its background to the padding box (see `@layer base`), or the border would blend
+       with that surface and never with the ground behind it. */
+    --border: rgb(0 0 0 / 0.11);
+    --border-strong: rgb(0 0 0 / 0.2);
+    /* A hairline that stays out of the way: on a sunken field a full `--border` draws a box. */
+    --border-soft: rgb(0 0 0 / 0.06);
+    --text: #18181b;
+    --text-muted: #6f6f78;
+    --text-faint: #a1a1aa;
+    /* A neutral default. An app sets its own accent, in both channels, in a rule after this file. */
+    --accent: #155dfc;
+    /* The same accent as channels, for the tokens that carry it with an alpha. */
+    --accent-rgb: 21 93 252;
+    --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
+    --accent-text: #ffffff;
+    --selection: rgb(var(--accent-rgb) / 0.55);
+    --float-shadow:
+        0 1px 2px -1px rgb(0 0 0 / 0.08),
+        0 3px 6px -2px rgb(0 0 0 / 0.07),
+        0 8px 16px -8px rgb(0 0 0 / 0.1),
+        0 16px 28px -14px rgb(0 0 0 / 0.1);
+    /* The small lift of a thumb or a picked segment off the track it sits in: close to the surface
+       rather than a haze around it. Not named `--shadow-*`, since the theme maps that name onto this. */
+    --raised-shadow:
+        0 1px 2px rgb(0 0 0 / 0.05),
+        0 2px 4px -1px rgb(0 0 0 / 0.05),
+        0 6px 12px -6px rgb(0 0 0 / 0.08);
+    --status-running: #2563eb;
+    --status-needs-you: #d97706;
+    --status-idle: #16a34a;
+    --status-error: #dc2626;
+    --positive: #15803d;
+    --positive-text: #ffffff;
+    /* A control drawn over a picture rather than over the interface, the handle of a wipe, so it
+       stays the same in both themes. */
+    --media-handle: #ffffff;
+    --media-handle-text: #18181b;
+    --media-handle-edge: 0 0 0 1px rgb(0 0 0 / 0.3);
+    --media-handle-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
+    /* The file type palette. A file icon is the one thing in the interface that is not tinted by the
+       theme: TypeScript is blue and Vue is green wherever the file shows up, which is what makes a
+       row readable before the name is. The sprite of the file icons reads these, inside a tree's
+       shadow root as well as beside it, so both stay the same color. */
+    --file-icon-gray: #84848a;
+    --file-icon-red: #d52c36;
+    --file-icon-vermilion: #ff8c5b;
+    --file-icon-orange: #d47628;
+    --file-icon-yellow: #d5a910;
+    --file-icon-green: #199f43;
+    --file-icon-teal: #17a5af;
+    --file-icon-cyan: #1ca1c7;
+    --file-icon-blue: #1a85d4;
+    --file-icon-indigo: #693acf;
+    --file-icon-purple: #a631be;
+    --file-icon-pink: #d32a61;
+    --file-icon-mauve: #594c5b;
+}
+
+/* The theme attribute sits on `<html>`, the element the light rule above lands on too, so a token
+   derived there with `var()` resolves against these values, and a value that does not change
+   between themes is not repeated here. */
+[data-theme="dark"] {
+    color-scheme: dark;
+    --bg: #0d0d10;
+    --surface: #131316;
+    --surface-raised: #18181c;
+    --surface-sunken: #08080a;
+    --surface-hover: #202024;
+    --surface-active: #28282e;
+    /* White at a low alpha, which is what gives a dark surface its lifted edge. */
+    --border: rgb(255 255 255 / 0.07);
+    --border-strong: rgb(255 255 255 / 0.13);
+    --border-soft: rgb(255 255 255 / 0.03);
+    --text: #ececf1;
+    --text-muted: #9a9aa6;
+    --text-faint: #5f5f6b;
+    --selection: rgb(var(--accent-rgb) / 0.6);
+    --float-shadow:
+        0 1px 2px -1px rgb(0 0 0 / 0.3),
+        0 2px 4px rgb(0 0 0 / 0.24),
+        0 4px 8px rgb(0 0 0 / 0.18),
+        0 6px 12px rgb(0 0 0 / 0.1);
+    /* Tighter than in the light theme: the compositor rounds the faint tail of a shadow on a layer
+       of its own a gray level darker, so a wide blur ends in a flat ring that reads as a band. */
+    --raised-shadow:
+        0 1px 2px rgb(0 0 0 / 0.3),
+        0 2px 4px rgb(0 0 0 / 0.2),
+        0 4px 8px rgb(0 0 0 / 0.12);
+    --status-running: #60a5fa;
+    --status-needs-you: #fbbf24;
+    --status-idle: #4ade80;
+    --status-error: #ef4444;
+    --positive: #4ade80;
+    /* Dark on light green: the dark theme's positive is a foreground color, so text sits on it the
+       other way round from the light theme, where the same token is a fill deep enough for white. */
+    --positive-text: #052e16;
+    --file-icon-gray: #adadb1;
+    --file-icon-red: #ff6762;
+    --file-icon-vermilion: #d5512f;
+    --file-icon-orange: #ffa359;
+    --file-icon-yellow: #ffd452;
+    --file-icon-green: #5ecc71;
+    --file-icon-teal: #64d1db;
+    --file-icon-cyan: #68cdf2;
+    --file-icon-blue: #69b1ff;
+    --file-icon-indigo: #9d6afb;
+    --file-icon-purple: #d568ea;
+    --file-icon-pink: #ff678d;
+    --file-icon-mauve: #79697b;
+}
+
+/* Who floats over whom. Whole numbers in one place, so a new popup cannot guess. */
+:root {
+    --z-dialog-backdrop: 80;
+    --z-dialog: 90;
+    --z-popup: 100;
+    --z-tooltip: 110;
+    --z-shortcut-hints: 120;
+}
+
+/* One type scale for the whole interface, in rem against the font size the app sets on `<html>`
+   (15px reads well in a desktop app), so text and the rem-based layout scale together when it moves.
+   Code keeps its own absolute size, next to a terminal's, so it never scales twice.
+   `xs` is the size most of the interface is written in, so it is where reading has to work: the
+   sizes above it are a step apart rather than a leap.
+   Every rem is rounded to a whole pixel, since no interface size in the range lands a quarter rem
+   on one. The spacing unit is rounded rather than each multiple, so `p-2` is twice a whole pixel. */
+@theme {
+    /* No default palette: a component reaches only the semantic colors below. */
+    --color-*: initial;
+    --spacing: round(0.25rem, 1px);
+    --text-xs: round(0.875rem, 1px);
+    --text-xs--line-height: round(1.25rem, 1px);
+    --text-sm: round(0.9375rem, 1px);
+    --text-sm--line-height: round(1.375rem, 1px);
+    --text-base: round(1rem, 1px);
+    --text-base--line-height: round(1.5rem, 1px);
+    --text-lg: round(1.125rem, 1px);
+    --text-lg--line-height: round(1.5rem, 1px);
+    --text-4xl: round(2.25rem, 1px);
+    --text-4xl--line-height: round(2.5rem, 1px);
+    --text-code: 13px;
+    --text-code--line-height: 20px;
+    --radius-xs: round(0.125rem, 1px);
+    --radius-sm: round(0.25rem, 1px);
+    --radius-md: round(0.375rem, 1px);
+    --radius-lg: round(0.5rem, 1px);
+    --radius-xl: round(0.75rem, 1px);
+    --radius-2xl: round(1rem, 1px);
+    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
+    /* Not inline: an app that lets a person pick a monospace font overrides this variable on
+       `<html>`, and `font-mono` has to follow it. */
+    --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
+}
+
+/* A line height relative to the font would put a line between two pixels. Inline, so the `em`
+   resolves against the element that carries the utility. */
+@theme inline {
+    --leading-tight: round(1.25em, 1px);
+    --leading-snug: round(1.375em, 1px);
+    --leading-normal: round(1.5em, 1px);
+}
+
+@theme inline {
+    --color-bg: var(--bg);
+    --color-surface: var(--surface);
+    --color-surface-raised: var(--surface-raised);
+    --color-surface-sunken: var(--surface-sunken);
+    --color-surface-idle: var(--surface-idle);
+    --color-surface-hover: var(--surface-hover);
+    --color-surface-active: var(--surface-active);
+    --color-border: var(--border);
+    --color-border-strong: var(--border-strong);
+    --color-border-soft: var(--border-soft);
+    --color-text: var(--text);
+    --color-text-muted: var(--text-muted);
+    --color-text-faint: var(--text-faint);
+    --color-accent: var(--accent);
+    --color-accent-soft: var(--accent-soft);
+    --color-accent-text: var(--accent-text);
+    --color-status-running: var(--status-running);
+    --color-status-needs-you: var(--status-needs-you);
+    --color-status-idle: var(--status-idle);
+    --color-status-error: var(--status-error);
+    --color-positive: var(--positive);
+    --color-positive-text: var(--positive-text);
+    --color-media-handle: var(--media-handle);
+    --color-media-handle-text: var(--media-handle-text);
+    --shadow-float: var(--float-shadow);
+    --shadow-raised: var(--raised-shadow);
+    --shadow-media-handle-edge: var(--media-handle-edge);
+    --shadow-media-handle: var(--media-handle-shadow);
+}
+
+@layer base {
+    /*
+     * A border with an alpha has to mix with what is behind the element, not with the element's own
+     * background: by default a background runs on under the border and a node's white surface would
+     * wash its line out over the canvas. Utilities sit in a later layer, so `bg-clip-text` still wins.
+     */
+    *, ::before, ::after {
+        background-clip: padding-box;
+    }
+    body {
+        font-family: var(--font-sans);
+        font-size: var(--text-sm);
+        color: var(--text);
+        background: var(--bg);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        user-select: none;
+        /* The longhand, because the `text-wrap` shorthand also resets the wrap mode and would undo `whitespace-nowrap`. */
+        text-wrap-style: pretty;
+    }
+    ::selection {
+        background: var(--selection);
+        color: var(--accent-text);
+    }
+}
+
+/* The rules a utility cannot write: Base UI state selectors shared by many items, pseudo-elements,
+   keyframes. Inside Tailwind's `components` layer, so a utility on the same element still wins. */
+@layer components {
+    /* Every icon button in the app, with the pressed state a `data-` or `aria-` attribute puts on it. */
+    .icon-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        /* An icon button is a square in every row it stands in: a bar that runs out of room truncates
+           its text or folds its actions away, it never squeezes a button into a sliver. */
+        flex-shrink: 0;
+        border-radius: 8px;
+        color: var(--text-muted);
+        /* Only the press animates. A fade on hover lags behind the pointer, which reads as the
+           button answering late. */
+        transition: scale 120ms ease;
+    }
+    /* The size decides the radius, and the icon inside: 16 in the default of 32, 14 in 28, 12 below. */
+    .icon-btn-sm { width: 28px; height: 28px; border-radius: 6px; }
+    .icon-btn-xs { width: 24px; height: 24px; border-radius: 6px; }
+    .icon-btn-2xs { width: 20px; height: 20px; border-radius: 4px; }
+    .icon-btn:hover { background: var(--surface-hover); color: var(--text); }
+    .icon-btn:active { scale: 0.96; }
+    /* Pressed, not important: a toggle that is on reads as a filled gray key. The accent stays for
+       the focus ring, the primary button, canvas selection and agent status. */
+    .icon-btn[data-active="true"], .icon-btn[aria-pressed="true"] { background: var(--surface-active); color: var(--text); }
+    /* A button with nothing to do says so and stays quiet under the pointer. `aria-disabled` is the
+       one that keeps its focus and its tooltip. */
+    .icon-btn:disabled, .icon-btn[aria-disabled="true"] { color: var(--text-faint); cursor: default; }
+    .icon-btn:disabled:hover, .icon-btn[aria-disabled="true"]:hover { background: transparent; color: var(--text-faint); }
+    .icon-btn:disabled:active, .icon-btn[aria-disabled="true"]:active { scale: 1; }
+    /* Every text input in the app: one border and one focus ring, at the one height or the compact
+       one, so a field in a dialog, in settings and next to a chat answer cannot drift apart. */
+    .field {
+        height: 32px;
+        width: 100%;
+        padding: 0 10px;
+        border-radius: 8px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--text);
+        font-size: var(--text-sm);
+        outline: none;
+    }
+    .field::placeholder { color: var(--text-faint); }
+    .field:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
+    /* A field with an icon is a box around a bare input: the box wears the outline the input would. */
+    .field:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -1px; }
+    /* A value shown in a field but not typed into, such as a chosen folder beside the button that picks it. */
+    input.field[readonly], .field > input[readonly] { color: var(--text-muted); text-overflow: ellipsis; }
+    /* At the height of a small button: a row of tools, and a name typed in place of the label it renames. */
+    .field-sm {
+        height: 28px;
+        padding: 0 8px;
+        border-radius: 6px;
+        font-size: var(--text-xs);
+    }
+    /* Keyboard focus is visible on every control; pointer focus stays quiet. `.focus-ring` is the
+       same outline for something that takes focus without being a button, such as a row in a list. */
+    .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+    .menu-item:focus-visible { outline-offset: -2px; }
+    /* A card that holds a field, the composer's or a prompt's, wears the field's outline on its own edge. */
+    .focus-ring-within:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -1px; }
+    /* Base UI moves DOM focus to the item the pointer hovers, and a browser keeps `:focus-visible`
+       on for scripted focus as long as its own keyboard flag is up, so after any keystroke the ring
+       would follow the mouse through every menu. The last real input event decides instead
+       (`startInputModality`); hover keeps the background it already has. The role reaches an item
+       that is no row, such as an icon button or a swatch inside a menu. */
+    :root[data-modality='pointer'] :is(.menu-item, [role^='menuitem']):focus-visible { outline: none; }
+    /* Base UI's open and close transitions are `data-` states on the popup itself, and every menu,
+       picker, dialog and tooltip in the app shares them, along with the surface they float on. */
+    .menu-popup, .picker-popup, .dialog-popup, .tooltip-popup {
+        background: var(--surface-raised);
+        border: 1px solid var(--border);
+        box-shadow: var(--float-shadow);
+        transition: opacity 120ms ease, scale 120ms ease;
+    }
+    .menu-popup {
+        min-width: 200px;
+        padding: 4px;
+        border-radius: 10px;
+        outline: none;
+        /* The positioner says how much room is left before the viewport edge; a long menu scrolls
+           inside that, with some air so it never sits against the window's edge. */
+        max-height: calc(var(--available-height) - 16px);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        transform-origin: var(--transform-origin);
+    }
+    .menu-popup[data-starting-style], .menu-popup[data-ending-style] { opacity: 0; scale: 0.96; }
+    /* A menu row, with the states Base UI puts on it while it is highlighted, disabled or the
+       trigger of a submenu that is open. */
+    .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 6px 10px;
+        border-radius: 6px;
+        font-size: var(--text-sm);
+        /* The type scale, not the 1.5 the reset inherits, so a row is a whole number of pixels tall
+           and a glyph next to a two-line label lands on a whole pixel too. */
+        line-height: var(--text-sm--line-height);
+        color: var(--text);
+        cursor: default;
+        outline: none;
+    }
+    /* Base UI highlights a row for the pointer and for the arrow keys alike. The keyboard row is a
+       mark that has to be findable, the pointer's is the lift under the cursor. */
+    .menu-item[data-highlighted] { background: var(--surface-active); }
+    :root[data-modality='pointer'] .menu-item[data-highlighted] { background: var(--surface-hover); }
+    .menu-item[data-disabled] { opacity: .5; }
+    /* Two lines against each other divide nothing, and so does a line at the top or the bottom of a
+       menu. A menu is composed out of rows that each decide whether they are there, so the last word
+       on this is here rather than in every list that draws one. */
+    .menu-popup > [role='separator'] + [role='separator'],
+    .menu-popup > [role='separator']:first-child,
+    .menu-popup > [role='separator']:last-child { display: none; }
+    /* A list the arrow keys walk that is not a Base UI menu: the palette, the model picker, the
+       composer's own menus. Its cursor carries the same two marks a menu row does. */
+    .cursor-row[data-active='true'] { background: var(--surface-active); color: var(--text); }
+    :root[data-modality='pointer'] .cursor-row[data-active='true'] { background: var(--surface-hover); }
+    .menu-item[data-popup-open] { background: var(--surface-active); }
+    .project-switcher-trigger {
+        display: flex;
+        height: 32px;
+        min-width: 0;
+        align-items: center;
+        gap: 8px;
+        border-radius: 6px;
+        padding: 0 8px;
+        text-align: left;
+    }
+    .project-switcher-trigger:hover { background: var(--surface-hover); }
+    .project-switcher-trigger[data-popup-open] { background: var(--surface-active); }
+    .project-switcher-trigger:disabled { opacity: .5; pointer-events: none; }
+    /* A row with buttons at its end: the items touch, 1px apart, so only the outer corners stay round,
+       and the whole row lights up under the pointer while the item beneath it lights up more. */
+    .menu-row { display: flex; min-width: 0; align-items: stretch; gap: 1px; }
+    .menu-row > .menu-item:first-child { flex: 1 1 0%; min-width: 0; }
+    /* By the items around it, not by :last-child: an open submenu puts its focus guards in the row. */
+    .menu-row > .menu-item:has(~ .menu-item) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+    .menu-row > .menu-item ~ .menu-item { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+    .menu-row-action {
+        flex-shrink: 0;
+        width: calc(var(--text-sm--line-height) + 12px);
+        padding: 0;
+        justify-content: center;
+        gap: 0;
+    }
+    :root[data-modality='pointer'] .menu-row:hover > .menu-item {
+        background: color-mix(in srgb, var(--surface-hover) 55%, transparent);
+    }
+    :root[data-modality='pointer'] .menu-row > .menu-item[data-highlighted] {
+        background: var(--surface-hover);
+    }
+    .menu-row:has(.menu-row-action[data-popup-open]) > .menu-item {
+        background: var(--surface-hover);
+    }
+    /* A shortcut in a row: pushed to the right, in the interface font, wherever a row carries one. */
+    .menu-item kbd { margin-left: auto; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-faint); }
+    /* A menu with a search field on top: the field sits flush against the edge, so the padding is the list's. */
+    .picker-popup {
+        width: 320px;
+        border-radius: 10px;
+        outline: none;
+        overflow: hidden;
+        transform-origin: var(--transform-origin);
+    }
+    .picker-popup[data-starting-style], .picker-popup[data-ending-style] { opacity: 0; scale: 0.96; }
+    /* One stack for everything that floats: a dialog, then the menus and selects a dialog can host,
+       then the tooltips over those. A popup under its own dialog is the bug this ordering prevents;
+       a component reaches the middle step with `z-(--z-popup)`. */
+    .popup-positioner { z-index: var(--z-popup); }
+    /* A press on a window's drag region goes to the system and never reaches the page, so a popup
+       that closes on a press outside it would stay open over a custom title bar. While one is open
+       nothing drags, the way a native title bar takes that first press to close a menu. */
+    :root:has(.popup-positioner[data-open]) * { -webkit-app-region: no-drag; }
+    .dialog-backdrop { position: fixed; inset: 0; z-index: var(--z-dialog-backdrop); background: color-mix(in srgb, var(--bg) 55%, transparent); }
+    .dialog-backdrop[data-starting-style], .dialog-backdrop[data-ending-style] { opacity: 0; }
+    .dialog-popup {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        z-index: var(--z-dialog);
+        /* The individual `translate` property, not `transform`, because the spec applies translate
+           before scale: a `-50%` inside `transform` would be scaled along with the popup and leave
+           it drifting sideways while it grows. */
+        translate: -50% -50%;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100dvh - 32px);
+        border-radius: 14px;
+        outline: none;
+        overflow: hidden;
+    }
+    .dialog-popup[data-starting-style], .dialog-popup[data-ending-style] { opacity: 0; scale: 0.97; }
+    /* A dialog opened from inside another dialog. Base UI leaves the nested backdrop out because the
+       one of the dialog underneath is still on screen, but that one lies under its own popup, so the
+       dialog you opened this from keeps taking clicks. `forceRender` on the backdrop plus these two
+       steps put the dim over it; both stay under `--z-popup`, so a menu in the nested dialog wins. */
+    .dialog-backdrop-nested { z-index: calc(var(--z-dialog) + 1); }
+    .dialog-popup-nested { z-index: calc(var(--z-dialog) + 2); }
+    /* A lightbox is the picture and nothing else, so the popup takes the size the picture settles at
+       instead of filling the window. The margin keeps the window's own title bar, and the traffic
+       lights on it, in reach above a picture that is as large as it is allowed to get. */
+    .lightbox-frame {
+        --lightbox-margin: 64px;
+        --lightbox-header: 45px;
+    }
+    .lightbox-frame img {
+        max-width: calc(100vw - 2 * var(--lightbox-margin));
+        max-height: calc(100dvh - 2 * var(--lightbox-margin) - var(--lightbox-header));
+    }
+    /* A picture holds the eye better against a heavier dim than a dialog of controls needs. */
+    .lightbox-backdrop { background: color-mix(in srgb, var(--bg) 80%, transparent); }
+    /* Tooltips. The positioner animates its position, so a tooltip slides to the next button
+       instead of blinking; the popup fades and scales from its anchor side. Both drop the motion
+       while Base UI says the tooltip is instant. */
+    /* As wide as its label up to the viewport's max width, so a short label near the edge of the
+       window does not wrap to the room left of it before the positioner moves it back in. */
+    .tooltip-positioner {
+        width: max-content;
+        z-index: var(--z-tooltip);
+        pointer-events: none;
+        transition: top 150ms ease, left 150ms ease, right 150ms ease, bottom 150ms ease;
+    }
+    .tooltip-positioner[data-instant] { transition: none; }
+    .tooltip-popup {
+        display: flex;
+        border-radius: 7px;
+        color: var(--text);
+        font-size: var(--text-xs);
+        line-height: var(--text-xs--line-height);
+        transform-origin: var(--transform-origin);
+    }
+    .tooltip-popup[data-starting-style], .tooltip-popup[data-ending-style] { opacity: 0; scale: 0.98; }
+    .tooltip-popup[data-instant] { transition: none; }
+
+    /* A file icon outside the tree. Its glyph takes the hue the sprite gives the file type, and a
+       type without one keeps the muted text it would have in the tree. */
+    .file-icon { flex-shrink: 0; vertical-align: middle; fill: currentColor; color: var(--text-muted); }
+
+    /* A strip that scrolls sideways fades out at the edge that still hides something, and only there,
+       so a strip that fits keeps its first and last item sharp. The edges are set by whoever scrolls. */
+    .scroll-fade-x {
+        --fade-start: 0px;
+        --fade-end: 0px;
+        mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
+    }
+    .scroll-fade-x[data-fade-start] { --fade-start: 24px; }
+    .scroll-fade-x[data-fade-end] { --fade-end: 24px; }
+    /* The same for a column under a fixed header: its top fades once something has scrolled under it. */
+    .scroll-fade-top {
+        --fade-start: 0px;
+        mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start));
+    }
+    .scroll-fade-top[data-fade-start] { --fade-start: 24px; }
+
+    /* A toast's countdown ring; `TimerRing` sets duration and delay from the toast's own timer. */
+    .toast-timer-arc { animation: toast-timer linear forwards; }
+    @keyframes toast-timer {
+        from { stroke-dashoffset: 0; }
+        to { stroke-dashoffset: 1; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .toast-timer-arc { animation: none; }
+    }
+
+    /* A `Spinner`: Leap from loading-dev (https://github.com/jakubkrehel/loading), MIT, Copyright (c) 2026 Jakub Krehel.
+       Each dot turns half a circle over the other two, then slides back one gap at a time; the three
+       are a third of a turn apart, so at every moment one dot is in the air. */
+    .spinner {
+        --spinner-duration: 1800ms;
+        --spinner-dot: round(calc(var(--spinner-size) * 0.22), 1px);
+        --spinner-gap: round(down, calc((var(--spinner-size) - var(--spinner-dot)) / 2), 1px);
+        position: relative;
+        display: inline-block;
+        flex-shrink: 0;
+        width: var(--spinner-size);
+        height: var(--spinner-size);
+        vertical-align: middle;
+    }
+    .spinner-hop {
+        position: absolute;
+        top: round(calc((var(--spinner-size) - var(--spinner-dot)) / 2), 1px);
+        left: calc(var(--spinner-size) - var(--spinner-dot) - var(--spinner-gap) * 2);
+        width: calc(var(--spinner-gap) * 2 + var(--spinner-dot));
+        height: var(--spinner-dot);
+        animation: spinner-hop var(--spinner-duration) ease-in-out infinite;
+        animation-delay: calc(var(--spinner-duration) * (var(--spinner-step) - 3) / 3);
+    }
+    .spinner-dot {
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: var(--spinner-dot);
+        border-radius: 50%;
+        background: currentColor;
+    }
+    @keyframes spinner-hop {
+        0% { transform: translateX(0) rotate(0); }
+        33.33% { transform: translateX(0) rotate(180deg); }
+        66.66% { transform: translateX(calc(var(--spinner-gap) * -1)) rotate(180deg); }
+        100% { transform: translateX(calc(var(--spinner-gap) * -2)) rotate(180deg); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .spinner-hop {
+            transform: translateX(calc(var(--spinner-step) * var(--spinner-gap)));
+            animation: none;
+        }
+    }
+
+    /* A `SlidingColumn` opening and closing. A drag or a width restored on load lands at once. */
+    .sliding-column { transition: width 200ms cubic-bezier(0, 0, 0.2, 1); }
+    .sliding-column[data-resizing],
+    .sliding-column[data-instant] { transition: none; }
+}

package/src/toast-store.ts

@@ -0,0 +1,120 @@
+import { create, type StoreApi, type UseBoundStore } from 'zustand';
+import type { Shortcut } from './shortcut.ts';
+
+// How long a toast that went well stays up; a failure waits for the person instead.
+export const SUCCESS_MS = 4000;
+
+// How long a deletion can still be taken back.
+export const UNDO_MS = 8000;
+
+/* `deleted` says something went that can still come back, which is what its action is for. */
+export type ToastKind = 'progress' | 'success' | 'error' | 'deleted';
+
+export interface ToastAction {
+    label: string;
+    run(): void;
+    /* The key that does the same, printed beside the label. The key itself is bound elsewhere. */
+    shortcut?: Shortcut;
+}
+
+/* When a toast that goes by itself started counting and when it goes, as epoch milliseconds. */
+export interface ToastDeadline {
+    start: number;
+    end: number;
+}
+
+/* How far into its lifetime a toast is at `now`, held inside that lifetime. */
+export const elapsedOf = (deadline: ToastDeadline, now: number): number => Math.min(Math.max(now - deadline.start, 0), deadline.end - deadline.start);
+
+/* An app that carries more on a toast extends this and hands its own type to `createToastStore`. */
+export interface Toast {
+    id: string;
+    title: string;
+    /* The line under the title, often the one that says why something stopped. */
+    description?: string;
+    kind: ToastKind;
+    action?: ToastAction;
+    /* More than one thing to do about it, such as looking at what went wrong or trying again; drawn after `action`, in order. */
+    actions?: ToastAction[];
+    /* A success that waits to be dismissed, for news that lands while nobody is looking yet. */
+    persist?: boolean;
+    /* Runs once the toast is gone, whether it ran out or was dismissed. */
+    onClose?: () => void;
+    /* Set by the store from the timer that takes the toast away, so what counts down on screen is that timer. */
+    deadline?: ToastDeadline;
+}
+
+export type ToastInput<T extends Toast = Toast> = Omit<T, 'id' | 'deadline'> & { id?: string };
+
+export type ToastPatch<T extends Toast = Toast> = Partial<Omit<T, 'id' | 'deadline'>>;
+
+export interface ToastStore<T extends Toast = Toast> {
+    toasts: T[];
+    /* Puts one up, or moves the one with this id to what it says now; answers its id. */
+    show(toast: ToastInput<T>): string;
+    update(id: string, patch: ToastPatch<T>): void;
+    dismiss(id: string): void;
+}
+
+export type ToastStoreHook<T extends Toast = Toast> = UseBoundStore<StoreApi<ToastStore<T>>>;
+
+/*
+ * The one place an app says how something went that no surface on screen shows. A long action keeps
+ * one id from progress to its outcome, so a person never watches two cards for one thing.
+ */
+export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> => {
+    const timers = new Map<string, ReturnType<typeof setTimeout>>();
+    let counter = 0;
+
+    return create<ToastStore<T>>((set, get) => {
+        const stop = (id: string): void => {
+            clearTimeout(timers.get(id));
+            timers.delete(id);
+        };
+
+        /* A toast that went well takes itself away, and so does the offer to undo; a failure and a running action stay. */
+        const schedule = (id: string, kind: ToastKind, persist: boolean): ToastDeadline | undefined => {
+            stop(id);
+            const lifetime = kind === 'deleted' ? UNDO_MS : kind === 'success' && !persist ? SUCCESS_MS : null;
+            if (lifetime === null) {
+                return undefined;
+            }
+            timers.set(
+                id,
+                setTimeout(() => {
+                    timers.delete(id);
+                    get().dismiss(id);
+                }, lifetime)
+            );
+            const start = Date.now();
+            return { start, end: start + lifetime };
+        };
+
+        return {
+            toasts: [],
+            show(toast) {
+                counter += 1;
+                const id = toast.id ?? `toast-${counter}`;
+                const next = { ...toast, id, deadline: schedule(id, toast.kind, toast.persist === true) } as T;
+                const toasts = get().toasts;
+                set({ toasts: toasts.some((entry) => entry.id === id) ? toasts.map((entry) => (entry.id === id ? next : entry)) : [...toasts, next] });
+                return id;
+            },
+            update(id, patch) {
+                const current = get().toasts.find((entry) => entry.id === id);
+                if (current === undefined) {
+                    return;
+                }
+                const merged: T = { ...current, ...patch };
+                const next: T = { ...merged, deadline: schedule(id, merged.kind, merged.persist === true) };
+                set({ toasts: get().toasts.map((entry) => (entry.id === id ? next : entry)) });
+            },
+            dismiss(id) {
+                stop(id);
+                const gone = get().toasts.find((entry) => entry.id === id);
+                set({ toasts: get().toasts.filter((entry) => entry.id !== id) });
+                gone?.onClose?.();
+            }
+        };
+    });
+};