dsh-over-ssh 0.0.0-stage → 0.1.0

package/lib/types/src/client/core/styles.d.ts

@@ -0,0 +1,458 @@
+/**
+ * The visual vocabulary shared by this plugin's three web surfaces.
+ *
+ * **Everything comes from the platform's own theme tokens.** The token names were read off the runtime
+ * theme (`@deepseek-ai/dsh-client-ui-theme/lib/client.js`, the `--dsw-*` custom properties it defines); the
+ * names this plugin used before — `--dsw-alias-text-primary`, `--dsw-alias-border-subtle`,
+ * `--dsw-alias-surface-subtle`, `--dsw-alias-surface-warning` — **are not in the theme at all**, so every
+ * declaration silently fell back to `inherit` / `currentColor` / a hard-coded amber, and the commit button
+ * had no `background` whatsoever. That is why the panel looked like bare HTML with grey default buttons.
+ *
+ * Why a stylesheet and not React components:
+ *
+ *  1. The platform's own atoms (`dsh-client-ui-primitives`: `Button` / `Input` / `Alert`) are **not**
+ *     reusable here — their factories import per-component CSS modules, which a third-party bundle cannot
+ *     supply (the loader materialises only registered factories), and the package is not a dependency of
+ *     this repository. The *tokens* those atoms are built from are on every page, so this module rebuilds
+ *     the same vocabulary.
+ *  2. A React component carrying `useState` (for `:hover` / `:focus`) cannot be rendered by this
+ *     repository's tests: they call the section functions **directly**, outside any React render, where a
+ *     hook throws `Invalid hook call`. Classes + one injected stylesheet keep the templates pure
+ *     `createElement` trees that the offline tests walk, while still giving the browser real `:hover`,
+ *     `:active`, `:focus-visible` and `:disabled` states.
+ *
+ * The stylesheet is injected by the containers that mount these controls ({@link CONTROL_STYLE_ID} makes it
+ * idempotent), so importing this module on the host side has no side effect.
+ *
+ * ## Why the surfaces read as cards (audit 0051)
+ *
+ * The three surface tiers (`bgLayer1/2/3`) are **the same white as the page in the shipped light theme** —
+ * read out of `app.asar`:
+ *
+ * ```text
+ * body { --dsw-alias-bg-base: neutral-bluish-00; --dsw-alias-bg-layer-1: …-00;
+ *        --dsw-alias-bg-layer-2: …-00; --dsw-alias-bg-layer-3: …-00 }
+ * body[data-ds-dark-theme] { … -875 / -850 / -800 }   -- only here do the tiers differ
+ * ```
+ *
+ * So a card built on `bgLayer1` over a `bgLayer2` row was white on white in light mode, and the *only* edge
+ * was a 1px `border-l2` (`rgba(0,0,0,.1)`). The platform's own answer is visible in its settings cards:
+ *
+ * ```css
+ * .card { border: .5px solid var(--dsw-alias-settings-card-stroke);   -- = border-l4
+ *         border-radius: var(--dsw-radius-xl);
+ *         background: var(--dsw-alias-settings-card-fill); }          -- = bg-layer-2
+ * ```
+ *
+ * i.e. **depth comes from a stronger hairline plus a larger radius**, not from a fill difference. The card,
+ * group and row rules below follow that: three nesting levels, three stroke weights and three radii, so the
+ * hierarchy survives the light theme instead of depending on a fill the theme does not provide.
+ *
+ * @module dsh-over-ssh/client/styles
+ */
+/**
+ * Semantic tokens of the shipped theme, each with a neutral fallback so a page whose theme failed to load
+ * still renders something readable rather than transparent text.
+ *
+ * The fallbacks are also kept **on the theme's own scale**: the radius fallbacks were one to two steps below
+ * the real values (`sm` was `4px` where the theme says `8px`), so a theme that failed to load produced
+ * corners that did not match the surrounding platform UI even though the token name was right.
+ */
+export declare const TOKENS: {
+    /** Primary/body text. */
+    readonly textPrimary: "var(--dsw-alias-label-primary, inherit)";
+    /** Secondary text: descriptions, hints, row subtitles. */
+    readonly textSecondary: "var(--dsw-alias-label-secondary, inherit)";
+    /** Tertiary text: the quietest tier. */
+    readonly textTertiary: "var(--dsw-alias-label-tertiary, currentColor)";
+    /** Hairline around inputs and cards. */
+    readonly border: "var(--dsw-alias-border-l2, currentColor)";
+    /** Page background. */
+    readonly bgBase: "var(--dsw-alias-bg-base, transparent)";
+    /** Level-1 surface: the blocks and cards this plugin draws. */
+    readonly bgLayer1: "var(--dsw-alias-bg-layer-1, rgba(127, 127, 127, 0.06))";
+    /** Level-2 surface: controls that must read as inset inside a block. */
+    readonly bgLayer2: "var(--dsw-alias-bg-layer-2, transparent)";
+    /** Level-3 surface: chips and badges. */
+    readonly bgLayer3: "var(--dsw-alias-bg-layer-3, rgba(127, 127, 127, 0.12))";
+    /**
+     * The platform's own card surface and stroke (its settings cards use exactly this pair).
+     *
+     * Read off `app.asar`: `--dsw-alias-settings-card-fill: var(--dsw-alias-bg-layer-2)` and
+     * `--dsw-alias-settings-card-stroke: var(--dsw-alias-border-l4)`. Using the *named* aliases rather than the
+     * layer/border they currently point at is deliberate: it says "this is a card", which is what the value
+     * means, and it follows the theme if the platform re-points the alias.
+     */
+    readonly cardSurface: "var(--dsw-alias-settings-card-fill, rgba(127, 127, 127, 0.06))";
+    /** The card hairline: `border-l4`, one step stronger than the row `border`. */
+    readonly cardStroke: "var(--dsw-alias-settings-card-stroke, currentColor)";
+    /** The brand fill of a primary button. */
+    readonly primaryFill: "var(--dsw-alias-button-primary-fill, currentColor)";
+    /** Its hover step. */
+    readonly primaryHover: "var(--dsw-alias-button-primary-hover, currentColor)";
+    /** Its active/pressed step (the theme exposes one dimmed step for both). */
+    readonly primaryActive: "var(--dsw-alias-button-primary-dimmed, currentColor)";
+    /** Text on a primary fill. */
+    readonly onPrimary: "var(--dsw-alias-label-primary-foreground, currentColor)";
+    /** The neutral fill of a secondary (outline) button. */
+    readonly secondaryFill: "var(--dsw-alias-button-elevated-fill, transparent)";
+    /** A hover wash for quiet controls. */
+    readonly hoverWash: "var(--dsw-alias-interactive-bg-hover, rgba(127, 127, 127, 0.12))";
+    /**
+     * The focus ring the platform draws for keyboard focus.
+     *
+     * The fallback is the platform's own (`focus.css`:
+     * `outline-color: var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary))`), not
+     * `currentColor`: `--dsw-focus-ring-color` is only *defined* while the input modality is pointer (as
+     * `transparent`), so a keyboard user hits the fallback — and with `currentColor` this plugin drew a grey
+     * ring where the platform drew a brand-blue one on the same page.
+     */
+    readonly focusRing: "var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary))";
+    /** The brand accent (checkbox ticks, and anything that must read as "selected"). */
+    readonly brandPrimary: "var(--dsw-alias-brand-primary, currentColor)";
+    /**
+     * The platform's business/neutral accent, used for progress.
+     *
+     * Its own `.progress` rule is `accent-color: var(--dsw-alias-state-business-primary)`, so the transfer bar
+     * matches the platform's bars instead of the browser default.
+     */
+    readonly stateBusiness: "var(--dsw-alias-state-business-primary, currentColor)";
+    /** Inline warning surface (the theme's warning tier, not an amber literal). */
+    readonly warnSurface: "var(--dsw-alias-state-warn-tertiary, rgba(255, 196, 0, 0.12))";
+    /** Inline warning text. */
+    readonly warnLabel: "var(--dsw-alias-state-warn-label, inherit)";
+    /** The warning glyph colour (the theme's warning *primary*, one step stronger than the label). */
+    readonly warnPrimary: "var(--dsw-alias-state-warn-primary, currentColor)";
+    /** Error text. */
+    readonly errorPrimary: "var(--dsw-alias-state-error-primary, inherit)";
+    /**
+     * The error hairline.
+     *
+     * There is **no** `--dsw-alias-state-error-tertiary` in the theme (checked against every definition in
+     * `app.asar`), so an error block cannot get a red *fill* from a semantic token. It gets a red *border*
+     * (this token) and red text over the neutral third layer, which is what keeps the three states
+     * distinguishable without inventing a colour.
+     */
+    readonly errorSecondary: "var(--dsw-alias-state-error-secondary, currentColor)";
+    /** Successful state. */
+    readonly successPrimary: "var(--dsw-alias-state-success-primary, currentColor)";
+    /** The success tint, for a "done"/"live" badge. */
+    readonly successSurface: "var(--dsw-alias-state-success-tertiary, rgba(0, 200, 83, 0.12))";
+    /** The skeleton/placeholder fill the platform uses for a loading surface. */
+    readonly skeleton: "var(--dsw-alias-bg-skeleton, rgba(127, 127, 127, 0.08))";
+    /**
+     * The floating surface of a panel that is not inside the sidebar's own cards (the session entry).
+     * Read off the shipped theme's `design-platform.css` (`--dsw-alias-bg-overlay`), not invented.
+     */
+    readonly overlaySurface: "var(--dsw-alias-bg-overlay, Canvas)";
+    /** Panel elevation: the theme's own panel shadow, which already carries its hairline stroke. */
+    readonly panelElevation: "var(--dsw-elevation-panel, none)";
+    /** A stronger hairline, for the edge of a floating card over arbitrary content. */
+    readonly borderStrong: "var(--dsw-alias-border-l4, currentColor)";
+    /** The pressed/selected wash, one step past `hoverWash`. */
+    readonly activeWash: "var(--dsw-alias-interactive-bg-active, rgba(127, 127, 127, 0.18))";
+    /**
+     * Corner radii, straight from the theme so this plugin matches the surrounding UI.
+     *
+     * The real scale (read off the theme) is `xs 4px / sm 8px / md 12px / lg 16px / xl 20px`; the fallbacks
+     * below are the theme's own numbers, not the previous one-step-down guesses.
+     */
+    readonly radiusXs: "var(--dsw-radius-xs, 4px)";
+    readonly radiusSm: "var(--dsw-radius-sm, 8px)";
+    readonly radiusMd: "var(--dsw-radius-md, 12px)";
+    readonly radiusLg: "var(--dsw-radius-lg, 16px)";
+    /** The large radius the theme uses for panels; the session entry's floating card. */
+    readonly radiusXl: "var(--dsw-radius-xl, 20px)";
+    /** The platform's capsule radius, for tags/badges. */
+    readonly radiusPill: "999px";
+};
+/** The `id` of the injected `<style>` element; a second mount reuses it. */
+export declare const CONTROL_STYLE_ID = "dsh-over-ssh-controls";
+/** Class names of the control vocabulary. Templates carry them; {@link controlStylesheet} styles them. */
+export declare const CLASS: {
+    /** A titled block: one form or group. */
+    readonly block: "dsh-rw-block";
+    /** A section heading (`h2`/`h3`). */
+    readonly sectionTitle: "dsh-rw-title";
+    /** A block heading (`h4`). */
+    readonly blockTitle: "dsh-rw-subtitle";
+    /** A description paragraph. */
+    readonly description: "dsh-rw-description";
+    /** A hint/caption paragraph. */
+    readonly hint: "dsh-rw-hint";
+    /** A vertical stack. */
+    readonly stack: "dsh-rw-stack";
+    /** A list of rows. */
+    readonly list: "dsh-rw-list";
+    /** One workspace section of the session inventory. */
+    readonly group: "dsh-rw-group";
+    /** A workspace section's heading line (label + count). */
+    readonly groupHead: "dsh-rw-group-head";
+    /**
+     * The inventory's action bar (select all / clear / delete). Sticky: the list is long, and a bar that
+     * scrolls away forces the user to scroll back up for every action.
+     */
+    readonly actionBar: "dsh-rw-action-bar";
+    /** One session row: checkbox plus its two-line body. */
+    readonly sessionRow: "dsh-rw-session-row";
+    /** A session row's text column. */
+    readonly sessionBody: "dsh-rw-session-body";
+    /** A session row's first line (label + badges). */
+    readonly sessionHead: "dsh-rw-session-head";
+    /** A session row's second line (id, time, size, parent). */
+    readonly sessionMeta: "dsh-rw-session-meta";
+    /** A short session-id chip. */
+    readonly idChip: "dsh-rw-id-chip";
+    /** One row (root or connection). */
+    readonly row: "dsh-rw-row";
+    /** A row's title. */
+    readonly rowTitle: "dsh-rw-row-title";
+    /** A row's secondary text (path, note). */
+    readonly rowMeta: "dsh-rw-row-meta";
+    /**
+     * A row's trailing action group.
+     *
+     * Replaces the `style: { marginLeft: 'auto' }` that four templates used to repeat: a layout decision
+     * written in four places is a layout decision that drifts.
+     */
+    readonly rowActions: "dsh-rw-row-actions";
+    /** A row's quiet annotation (the connection note). */
+    readonly rowNote: "dsh-rw-row-note";
+    /** The degraded-transport glyph: colour without a word. */
+    readonly warnGlyph: "dsh-rw-warn-glyph";
+    /**
+     * The sidebar's remote-session mark: a globe in the leading cell of a session row.
+     *
+     * The cell is the shell's own 16px seat (`sidebar.session.row.leading`), so this rule only centres the
+     * glyph and keeps it from being squeezed: no width, no padding, no background of its own.
+     */
+    readonly remoteMark: "dsh-rw-remote-mark";
+    /** A badge/chip. */
+    readonly badge: "dsh-rw-badge";
+    /** A badge in the success tone (a live session, a finished transfer). */
+    readonly badgeSuccess: "dsh-rw-badge-success";
+    /** A badge in the error tone (a failed transfer). */
+    readonly badgeError: "dsh-rw-badge-error";
+    /**
+     * A checkbox.
+     *
+     * The templates used to render a bare `<input type="checkbox">`: no rule existed for it anywhere in this
+     * stylesheet, so it was the browser's default size and accent colour. The platform's own checkbox rule is
+     * `width/height: 16px; margin: 0; accent-color: var(--dsw-alias-brand-primary)`.
+     */
+    readonly checkbox: "dsh-rw-checkbox";
+    /**
+     * The label that wraps a checkbox **and** its row body, so the whole row is the hit target.
+     *
+     * The session rows previously had no `<label>` at all (only `aria-label` on the input), so clicking the row
+     * text did nothing and the target was a 16px square.
+     */
+    readonly checkboxLabel: "dsh-rw-checkbox-label";
+    /** A field column: caption above control. */
+    readonly field: "dsh-rw-field";
+    /** A row of fields plus its commit button. */
+    readonly form: "dsh-rw-form";
+    /**
+     * The directory-flow dialog root. Besides the card, this is the **container** for the inline-size query
+     * below (`container-type: inline-size`), so the same component reflows by the width it is *given* rather
+     * than by the viewport.
+     */
+    readonly dialog: "dsh-rw-dialog";
+    /** The dialog's title line: flex-wrap so a long title and its badge share one row when there is space. */
+    readonly dialogHeader: "dsh-rw-dialog-header";
+    /** The dialog's body: one column by default, two columns once the container says there is room. */
+    readonly dialogBody: "dsh-rw-dialog-body";
+    /** A field that spans the whole form row (`grid-column: 1 / -1`). */
+    readonly fieldSpan: "dsh-rw-field-span";
+    /** A button that owns the whole form row. */
+    readonly spanFull: "dsh-rw-span-full";
+    /** A field whose control shares its line with one button (the remote path and its browse button). */
+    readonly inputRow: "dsh-rw-input-row";
+    /**
+     * A panel header: the title on the start edge, its controls on the end edge.
+     *
+     * Replaces the inline `display:flex; justify-content:space-between` two templates used to carry.
+     */
+    readonly header: "dsh-rw-header";
+    /** The trailing control group of a {@link CLASS.header}. */
+    readonly headerActions: "dsh-rw-header-actions";
+    /** The button base. Every button also carries one variant class. */
+    readonly button: "dsh-rw-button";
+    /** Primary (brand-filled) button. */
+    readonly buttonPrimary: "dsh-rw-button-primary";
+    /** Secondary (outlined) button. */
+    readonly buttonSecondary: "dsh-rw-button-secondary";
+    /** Ghost button: quiet until hovered (per-row destructive actions). */
+    readonly buttonGhost: "dsh-rw-button-ghost";
+    /**
+     * Row button: a **navigable** list row (the directory browser's enterable entries).
+     *
+     * It exists because the ghost variant carries the theme's **error** tone (`--dsw-alias-state-error-primary`,
+     * which is `--dsw-static-red-600` in the light theme), and that is right for a delete action but wrong for a
+     * directory name: the first release of the browser rendered every directory in red. A row therefore declares
+     * its own colour instead of inheriting the destructive one, so the reading does not depend on rule order.
+     */
+    readonly buttonRow: "dsh-rw-button-row";
+    /**
+     * Chip: a control that sits in a row of the platform's own chrome (the composer tool row) and must not read
+     * as a stray bordered button next to them. Mirrors the platform's own control there: transparent, ~28px tall,
+     * a 12px label, `--dsw-radius-sm`, and the hover/active washes.
+     */
+    readonly buttonChip: "dsh-rw-button-chip";
+    /**
+     * Menu item: one row of the platform's session 「…」 menu (`session-row-actions.ts`).
+     *
+     * The base button is a centred pill; inside a popover menu the row has to be full width, left aligned and
+     * quiet until hovered — otherwise the two new entries read as two grey buttons dropped into the menu. The
+     * colours are the same label/hover/active washes the platform's own menu rows use.
+     */
+    readonly menuItem: "dsh-rw-menu-item";
+    /**
+     * Destructive menu entry: red label so the row reads as a warning **before** it is clicked.
+     *
+     * Only the label and its hover wash change; the geometry stays the base menu row's, because a destructive row
+     * that is also a different size reads as a different kind of control rather than the same control with a
+     * consequence.
+     */
+    readonly menuItemDanger: "dsh-rw-menu-item-danger";
+    /** Small size modifier. */
+    readonly compact: "dsh-rw-compact";
+    /** A text input. */
+    readonly input: "dsh-rw-input";
+    /** A `<select>`. */
+    readonly select: "dsh-rw-select";
+    /** An inline notice block. */
+    readonly notice: "dsh-rw-notice";
+    /** The neutral (info) notice tone. */
+    readonly noticeInfo: "dsh-rw-notice-info";
+    /** The failure tone: red text and hairline over the neutral surface. */
+    readonly noticeError: "dsh-rw-notice-error";
+    /** A status dot. */
+    readonly statusDot: "dsh-rw-status-dot";
+    /**
+     * An empty state: the placeholder that says "nothing here yet".
+     *
+     * Its own class because "empty" used to be either a `hint` paragraph (12px grey, nearly invisible) or an
+     * info notice, depending on which of the three surfaces rendered it — three spellings of one state.
+     */
+    readonly empty: "dsh-rw-empty";
+    /** The transfer progress bar. */
+    readonly progress: "dsh-rw-progress";
+    /** A wrapped row of actions (buttons that may share a line when there is room). */
+    readonly actions: "dsh-rw-actions";
+    /** The directory browser: one listing level, one column whatever width it is given. */
+    readonly browser: "dsh-rw-browser";
+    /** The browser's current-path line. */
+    readonly browserPath: "dsh-rw-browser-path";
+    /** The browser's row list. */
+    readonly browserList: "dsh-rw-browser-list";
+    /** One `<li>` of the browser's list. */
+    readonly browserItem: "dsh-rw-browser-item";
+    /** A browser row that can be entered (a directory). */
+    readonly browserRow: "dsh-rw-browser-row";
+    /** A browser row that cannot be entered (a file or a symlink), rendered as text. */
+    readonly browserQuiet: "dsh-rw-browser-quiet";
+    /** The browser's committing action; owns its row. */
+    readonly browserCommit: "dsh-rw-browser-commit";
+    /** The session entry's mount point in the composer tool row. */
+    readonly sessionEntry: "dsh-rw-session-entry";
+    /** The session entry's trigger button. */
+    readonly sessionTrigger: "dsh-rw-session-trigger";
+    /**
+     * The session entry's card surface (the floating panel of `session-directory.ts`).
+     *
+     * Since the portal (`CLASS.portal`) owns the positioning, this class is the *surface*: the theme's overlay
+     * colour, its panel elevation and the hairline a card needs when it floats over arbitrary content.
+     */
+    readonly floating: "dsh-rw-floating";
+    /**
+     * The body-level container a card is portalled into (`src/client/portal.ts`): `position: fixed`, so no
+     * ancestor's `overflow`/`transform`/`contain` can clip or re-anchor the card, and viewport-bounded so it
+     * still fits a narrow window. See {@link controlStylesheet} for the placement it is combined with.
+     */
+    readonly portal: "dsh-rw-portal";
+    /** Placement of the directory-flow dialog's portal: the centre of the window. */
+    readonly portalTop: "dsh-rw-portal-top";
+    /** Placement of the session entry's portal: the centre of the window (its own surface, same placement). */
+    readonly portalComposer: "dsh-rw-portal-composer";
+    /**
+     * The click sink under a **modal** card: it swallows pointer input over the page behind the dialog.
+     *
+     * The card claims `aria-modal="true"` and traps Tab; without this element the pointer still reached the page
+     * underneath, which is how a click could land on the form behind an open dialog (audit 2026-11-01b ui P2-1).
+     * A sibling of the portal container at a lower `z-index`, so it never covers the card.
+     */
+    readonly backdrop: "dsh-rw-backdrop";
+    /**
+     * The **one** placement every confirmation card uses: centred, narrow (`32rem`), at the settings tier.
+     *
+     * Three confirmation cards used to live in three different shells — one at 44rem over the settings modal, one at
+     * 44rem in the overlay layer, one inline in a settings block — so the same act ("confirm this deletion") looked
+     * different depending on where it was started from, and the sidebar's copy was a 704 px-wide card holding one
+     * sentence and two buttons (audit 2026-11-01b ui P2-8 / task-12 B1). It is a deliberate decision that the sidebar
+     * card gets **smaller**.
+     */
+    readonly portalConfirm: "dsh-rw-portal-confirm";
+    /**
+     * The backdrop's tier when the card was opened **from inside the platform's settings modal**.
+     *
+     * The settings modal lives at z 900/1001, so the sink sits above it (1001) and the card above that (1002) —
+     * otherwise the page under a settings-hosted dialog would keep the promise broken.
+     */
+    readonly backdropSettings: "dsh-rw-backdrop-settings";
+    /**
+     * Placement of the connection **edit dialog**'s portal.
+     *
+     * It needs its own tier because it is the only one of the three cards opened **from inside a platform
+     * modal** (the settings dialog). `CLASS.portal` sits at the menu/popover tier (100), which is *below* the
+     * platform's modal layers (900 / 1001) — a card portalled there would render behind the very panel that
+     * opened it. This placement raises it above them.
+     */
+    readonly portalSettings: "dsh-rw-portal-settings";
+};
+/**
+ * One class attribute from a class name plus optional modifiers.
+ *
+ * @param names - the classes, `false`/`undefined` entries are dropped.
+ * @returns the `className` value.
+ */
+export declare function classes(...names: readonly (string | false | undefined)[]): string;
+/**
+ * The complete stylesheet for the vocabulary above.
+ *
+ * Exported as a pure string so a test can assert the token contract offline (which tokens are used, that the
+ * primary button really declares a brand `background`, and that hover/active/disabled each have a rule)
+ * without a browser or a CSS engine.
+ *
+ * @returns CSS text, ready for a `<style>` element.
+ */
+export declare function controlStylesheet(): string;
+/** The subset of `Document` the injection needs; structural so no DOM lib is required to type it. */
+export interface StyleDocument {
+    readonly head: {
+        appendChild(node: unknown): unknown;
+    };
+    getElementById(id: string): unknown;
+    createElement(tag: 'style'): {
+        id: string;
+        textContent: string;
+    };
+}
+/**
+ * Mount the stylesheet once per document.
+ *
+ * Idempotent through {@link CONTROL_STYLE_ID}, so two containers (the settings section and a directory-flow
+ * hole) share one element.
+ *
+ * The returned disposer is deliberately a **no-op**: it never removes the element. That is the intended
+ * behaviour, not an oversight — unmounting a surface must not strip the rules the surfaces still on screen are
+ * using (the class of flicker the file tree had to learn about in audit 0047). A previous version of this
+ * comment claimed the opposite ("the stylesheet leaves with the last mounted surface"), which the code never
+ * did; the test below it (`client-controls.test.ts`) had the real rule right all along.
+ *
+ * @param doc - the page's `document`, or `undefined` off-browser (tests) where the call is a no-op.
+ * @returns a disposer that is safe to call and does nothing; never throws.
+ */
+export declare function injectControlStyles(doc: StyleDocument | undefined): () => void;
+/** The idempotent stylesheet mount for a React effect: `useEffect(injectControlStylesInBrowser, [])`. */
+export declare function injectControlStylesInBrowser(): () => void;

package/lib/types/src/client/file-tree-io.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The file tree's host channel: the plugin's own HTTP route, narrowed to the four calls the tree makes.
+ *
+ * It lives beside the model rather than inside it for the reason every IO in this half does: the model must be
+ * testable with no server (红线 3), and the fetch plumbing must not leak into a reducer.
+ *
+ * @module dsh-remote-workspace/client/file-tree-io
+ */
+import { type FileTreeIo } from './file-tree.ts';
+import { type FetchLike } from './roots-panel.ts';
+/**
+ * Bind the tree to the route.
+ *
+ * @param fetchImpl - `window.fetch` in the app, a stub in tests.
+ * @param path - override for tests; defaults to {@link ROOTS_API_PATH}.
+ * @returns the four calls the tree makes.
+ */
+export declare function createFileTreeIo(fetchImpl: FetchLike, path?: string): FileTreeIo;
+//# sourceMappingURL=file-tree-io.d.ts.map