@achasoft/dsh-advanced-sidebar 0.1.0

package/types/client/target.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Resolving what the menu acts on.
+ *
+ * Both menu seats answer the same question — which session, and which directory — from different
+ * starting points: the sidebar foot is root-scoped and must find the current session itself, while
+ * the session header is handed one. The resolution rule is shared so the two seats can never
+ * disagree about the target of an identical menu.
+ * @module @achasoft/dsh-advanced-sidebar/client/target
+ */
+import type { SessionListState, WorkspaceListState } from '@deepseek-ai/dsh-client-runtime/client';
+import type { OperationTarget } from './controller.ts';
+/**
+ * Build the operation target for one session.
+ *
+ * The directory is the session's own cwd first, and its Workspace's path only as a fallback: a
+ * session started inside a subdirectory works there, and reading git or opening a terminal at the
+ * Workspace root would silently act on a different tree than the model does.
+ * @param sessions - the session list snapshot.
+ * @param workspaces - the workspace list snapshot.
+ * @param sessionId - the session to describe; absent yields no target.
+ * @returns the target, or undefined when no session is selected or the id is not listed.
+ */
+export declare function resolveTarget(sessions: SessionListState, workspaces: WorkspaceListState, sessionId: string | undefined): OperationTarget | undefined;

package/types/client/terminal-screen.d.ts

@@ -0,0 +1,95 @@
+/**
+ * A one-line-at-a-time terminal screen: enough of the control vocabulary that a shell prompt, an
+ * interactive line edit, and a progress line all read correctly.
+ *
+ * This is deliberately not a full terminal emulator — there is no scroll region, no alternate
+ * screen, and no vertical cursor addressing, so a full-screen editor run in the panel will not
+ * render. What IS modelled is everything that decides what the current line SAYS, because an
+ * interactive shell redraws its prompt constantly and a screen that drops those sequences turns
+ * every keystroke into overwritten gibberish:
+ *
+ * - CR / BS move within the line.
+ * - `CUF` / `CUB` / `CHA` / `HPA` move the column, which is how `zle` and `readline` reposition
+ *   themselves after re-emitting a prompt.
+ * - `EL` erases part of the line, `ECH` blanks characters in place, and `DCH` / `ICH` delete and
+ *   insert them — the four a shell uses to edit text you already typed.
+ * - `ED` with parameter 2 clears the screen, which is what `clear` sends.
+ *
+ * Colour, mode switches, bracketed paste, and window titles are discarded: they change presentation,
+ * not text. Vertical movement is discarded too, and that is the honest boundary of this model.
+ *
+ * Feeding is incremental: the panel writes each polled delta, so cost is proportional to new output
+ * rather than to the whole retained scrollback.
+ * @module @achasoft/dsh-advanced-sidebar/client/terminal-screen
+ */
+/** A mutable text screen fed by {@link TerminalScreen.write}. */
+export declare class TerminalScreen {
+    private readonly maxLines;
+    private lines;
+    private column;
+    /** Bumped on every mutation so React can re-render from a primitive rather than an array identity. */
+    private generation;
+    /**
+     * @param maxLines - how many lines to retain; the head is dropped past it.
+     */
+    constructor(maxLines: number);
+    /**
+     * The current screen.
+     * @returns the retained lines, oldest first.
+     */
+    snapshot(): readonly string[];
+    /**
+     * A value that changes whenever the screen does.
+     * @returns the mutation counter.
+     */
+    revision(): number;
+    /** Discard everything and start from one empty line. */
+    clear(): void;
+    /**
+     * Feed one chunk of terminal output.
+     * @param text - the delta, exactly as the terminal produced it.
+     */
+    write(text: string): void;
+    /**
+     * Consume one escape sequence, applying the ones that change the text or the column.
+     * @param text - the chunk being written.
+     * @param start - index of the ESC byte.
+     * @returns the index just past the sequence.
+     */
+    private escape;
+    /**
+     * Apply one CSI sequence.
+     * @param final - the sequence's final byte.
+     * @param parameters - the parameter bytes before it.
+     */
+    private csi;
+    /** The line the cursor sits on, padded out to the cursor when it sits past the end. */
+    private padded;
+    /**
+     * Apply the erase-in-line sequence.
+     * @param mode - 0 erases to the end, 1 to the cursor, 2 the whole line.
+     */
+    private eraseInLine;
+    /**
+     * Blank characters in place, leaving the cursor where it was.
+     * @param count - how many characters to blank.
+     */
+    private eraseCharacters;
+    /**
+     * Delete characters at the cursor, shifting the rest of the line left.
+     * @param count - how many characters to delete.
+     */
+    private deleteCharacters;
+    /**
+     * Insert blanks at the cursor, shifting the rest of the line right.
+     * @param count - how many blanks to insert.
+     */
+    private insertBlanks;
+    /** Start a new line, dropping the head once the retention bound is reached. */
+    private newline;
+    /**
+     * Write printable text at the cursor, overwriting what it covers.
+     * @param text - printable characters only.
+     */
+    private put;
+}

package/types/client/ui/Alert.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The kit's alert: an inline message with a tone, used for every panel-level failure and for the
+ * one toast this plugin raises.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Alert
+ */
+import type { ReactNode } from 'react';
+/** Message tone. */
+export type AlertTone = 'default' | 'success' | 'warning' | 'destructive';
+/** Everything an alert renders from. */
+export interface AlertProps {
+    /** Tone; defaults to `default`. */
+    tone?: AlertTone | undefined;
+    /** A heading above the message. */
+    title?: string | undefined;
+    /** Leading glyph; a destructive or warning alert defaults to the warning triangle. */
+    icon?: ReactNode | undefined;
+    /** The message. */
+    children: ReactNode;
+    /** Rendered at the end of the row: a dismiss control, a retry. */
+    action?: ReactNode | undefined;
+    /** Additional classes. */
+    className?: string | undefined;
+}
+/**
+ * An alert.
+ * @param props - the tone, the optional heading, the message, and an optional action.
+ * @returns the alert element.
+ * @see {@link AlertProps}
+ */
+export declare function Alert(props: AlertProps): import("react").JSX.Element;

package/types/client/ui/Badge.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The kit's badge — the tag used for a branch name, a file status letter, a port, or a capability
+ * verdict.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Badge
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Badge tone. The three state tones carry meaning; the first three are neutral. */
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'destructive';
+/** Everything a span takes, plus the tone. */
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Tone; defaults to `secondary`. */
+    variant?: BadgeVariant | undefined;
+    /** Render the text monospaced and allow it to clip, for a path or a command. */
+    code?: boolean | undefined;
+    /** Rendered before the text. */
+    icon?: ReactNode | undefined;
+}
+/**
+ * A badge.
+ * @param props - the tone, the optional monospace form, an optional icon, and span attributes.
+ * @returns the badge element.
+ * @see {@link BadgeProps}
+ */
+export declare function Badge(props: BadgeProps): import("react").JSX.Element;

package/types/client/ui/Button.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The kit's button, in shadcn's variant/size vocabulary.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Button
+ */
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+/** Visual weight, in shadcn's names. */
+export type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+/** Control height; `icon` is the square form for a glyph with no label. */
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-lg';
+/** Everything a native button takes, plus the two style axes. */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual weight; defaults to `ghost`, the toolbar form used most here. */
+    variant?: ButtonVariant | undefined;
+    /** Control height; defaults to `md`. */
+    size?: ButtonSize | undefined;
+    /** Rendered before the label. */
+    icon?: ReactNode | undefined;
+    /** Marks a toggle button as pressed, which also sets `aria-pressed`. */
+    active?: boolean | undefined;
+}
+/**
+ * A button.
+ * @param props - the two style axes, an optional leading icon, and every native button attribute.
+ * @param ref - forwarded to the button element, so a caller can anchor a layer to it.
+ * @returns the button element.
+ * @see {@link ButtonProps}
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/client/ui/Calendar.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The kit's month grid.
+ *
+ * Dates are handled as local calendar days, never as instants: a task started at 23:30 belongs to
+ * the day the operator saw on the clock, and comparing `Date` values directly would put it on the
+ * next one for anybody east of UTC. {@link dayKey} is the comparison used everywhere.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Calendar
+ */
+/**
+ * One local calendar day, as `YYYY-MM-DD`.
+ *
+ * `toISOString` is deliberately not used: it converts to UTC first, which shifts the day for most
+ * of the world.
+ * @param date - any instant.
+ * @returns the local day it falls on.
+ */
+export declare function dayKey(date: Date): string;
+/**
+ * Midnight at the start of one local day.
+ * @param date - any instant.
+ * @returns a new Date at 00:00 local time on the same day.
+ */
+export declare function startOfDay(date: Date): Date;
+/**
+ * The days one month grid shows, including the leading and trailing days of its neighbours.
+ * @param month - any instant inside the month.
+ * @param weekStart - 0 for Sunday, 1 for Monday.
+ * @returns 42 consecutive local days.
+ */
+export declare function monthGrid(month: Date, weekStart: number): Date[];
+/** Everything the grid renders from. */
+export interface CalendarProps {
+    /** The selected day; absent selects nothing. */
+    value: Date | undefined;
+    /**
+     * A day was chosen.
+     * @param next - midnight at the start of the chosen local day.
+     */
+    onValueChange: (next: Date) => void;
+    /** Earliest selectable day; earlier days are disabled. */
+    min?: Date | undefined;
+    /** Latest selectable day; later days are disabled. */
+    max?: Date | undefined;
+    /** BCP 47 tag for the month and weekday names; absent uses the browser's. */
+    locale?: string | undefined;
+    /** 0 for Sunday, 1 for Monday; defaults to Monday. */
+    weekStart?: number | undefined;
+    /** The clear control's text; absent hides it. */
+    clearLabel?: string | undefined;
+    /** Clear the selection. */
+    onClear?: (() => void) | undefined;
+    /** The today control's text. */
+    todayLabel: string;
+    /** Accessible name of the previous-month control. */
+    previousLabel: string;
+    /** Accessible name of the next-month control. */
+    nextLabel: string;
+}
+/**
+ * A month grid.
+ * @param props - the selection, the bounds, and the control labels.
+ * @returns the calendar element.
+ * @see {@link CalendarProps}
+ */
+export declare function Calendar(props: CalendarProps): import("react").JSX.Element;

package/types/client/ui/DatePicker.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The kit's date picker: a trigger showing the chosen day, and the month grid in a floating layer.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/DatePicker
+ */
+/** Everything the picker renders from. */
+export interface DatePickerProps {
+    /** The chosen day; absent shows the placeholder. */
+    value: Date | undefined;
+    /**
+     * A different day was chosen, or the selection was cleared.
+     * @param next - midnight at the start of the chosen local day, or undefined when cleared.
+     */
+    onValueChange: (next: Date | undefined) => void;
+    /** Shown while nothing is chosen. */
+    placeholder: string;
+    /** The clear control's text inside the grid. */
+    clearLabel: string;
+    /** The today control's text inside the grid. */
+    todayLabel: string;
+    /** Accessible name of the previous-month control. */
+    previousLabel: string;
+    /** Accessible name of the next-month control. */
+    nextLabel: string;
+    /** Latest selectable day. */
+    max?: Date | undefined;
+    /** BCP 47 tag for the month and weekday names. */
+    locale?: string | undefined;
+    /** Accessible name of the trigger. */
+    'aria-label'?: string | undefined;
+    /** Refuses the press and dims the trigger. */
+    disabled?: boolean | undefined;
+    /** Additional classes on the trigger. */
+    className?: string | undefined;
+}
+/**
+ * A date picker.
+ * @param props - the selection, the labels, and the bounds.
+ * @returns the trigger and, while open, the month grid.
+ * @see {@link DatePickerProps}
+ */
+export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;

package/types/client/ui/Dialog.d.ts

@@ -0,0 +1,61 @@
+/**
+ * The kit's modal: a scrimmed, centred card, and the confirmation form of it.
+ *
+ * Unlike the dock this plugin opens beside the conversation, a dialog IS modal: it takes focus,
+ * traps it, and blocks the page behind its scrim. That is the whole difference between asking a
+ * question and offering a panel, and it is why Delete uses this and the panels do not.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Dialog
+ */
+import type { ReactNode } from 'react';
+/** Everything a dialog renders from. */
+export interface DialogProps {
+    /** Whether the dialog is showing. */
+    open: boolean;
+    /** Asked to close, from the scrim, Escape, or a cancel control. */
+    onClose: () => void;
+    /** The heading. */
+    title: string;
+    /** The body text; a caller with richer content passes `children` instead. */
+    description?: ReactNode | undefined;
+    /** Body content below the description. */
+    children?: ReactNode | undefined;
+    /** The action row. */
+    footer?: ReactNode | undefined;
+    /** Refuses the scrim and Escape while an action is in flight. */
+    busy?: boolean | undefined;
+    /** Additional classes on the card. */
+    className?: string | undefined;
+}
+/**
+ * A modal dialog.
+ * @param props - the open state, the heading, the body, and the action row.
+ * @returns the portal, or null while closed.
+ * @see {@link DialogProps}
+ */
+export declare function Dialog(props: DialogProps): import("react").ReactPortal | null;
+/**
+ * A confirmation dialog: a question, a cancel, and one action that commits it.
+ * @param props.open - whether the dialog is showing.
+ * @param props.onClose - dismiss without acting.
+ * @param props.onConfirm - commit the action.
+ * @param props.title - the question.
+ * @param props.description - what committing will do.
+ * @param props.confirmLabel - the committing control's text.
+ * @param props.cancelLabel - the dismissing control's text.
+ * @param props.destructive - draw the committing control as destructive.
+ * @param props.busy - the action is in flight; both controls refuse.
+ * @param props.children - extra body content between the description and the action row.
+ * @returns the dialog.
+ */
+export declare function AlertDialog(props: {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    description?: ReactNode | undefined;
+    confirmLabel: string;
+    cancelLabel: string;
+    destructive?: boolean | undefined;
+    busy?: boolean | undefined;
+    children?: ReactNode | undefined;
+}): import("react").JSX.Element;

package/types/client/ui/DropdownMenu.d.ts

@@ -0,0 +1,98 @@
+/**
+ * The kit's dropdown menu, with submenus that stay on screen.
+ *
+ * The harness's `Menu` primitive pins a submenu at `left: calc(100% + 10px)` with no collision
+ * handling, so a menu anchored near the right edge of the window — the session header's, always —
+ * pushed its `Open in` submenu off the viewport entirely. Every surface here is placed through
+ * {@link placeLayer}, which flips a submenu to the left of its row when the right side cannot hold
+ * it and shifts it vertically to stay inside the window.
+ *
+ * Keyboard handling follows the WAI-ARIA menu pattern: arrows move, Home/End jump, Right opens a
+ * submenu, Left closes it, Escape closes the deepest surface, and focus returns to the row that
+ * opened it — and to the trigger when the whole menu closes.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/DropdownMenu
+ */
+import type { ReactNode, RefObject } from 'react';
+import type { Align, Side } from './anchor.ts';
+/** A selectable row. */
+export interface MenuItemNode {
+    kind: 'item';
+    /** Reported to `onSelect`; unique within the whole tree. */
+    id: string;
+    /** The row's text. */
+    label: ReactNode;
+    /** Why the row cannot be used, shown beside the label rather than replacing it. */
+    note?: string | undefined;
+    /** Leading glyph. */
+    icon?: ReactNode | undefined;
+    /** Unusable rows stay visible: an absent row cannot be told from a mistyped configuration. */
+    disabled?: boolean | undefined;
+    /** Destructive rows take the error colour and its hover fill. */
+    danger?: boolean | undefined;
+    /** Draws a trailing check. */
+    checked?: boolean | undefined;
+}
+/** A row that opens a nested surface. */
+export interface MenuSubNode {
+    kind: 'sub';
+    /** Identifies the row; never reported to `onSelect`, which fires only for leaves. */
+    id: string;
+    /** The row's text. */
+    label: ReactNode;
+    /** Leading glyph. */
+    icon?: ReactNode | undefined;
+    /** A disabled parent cannot be opened. */
+    disabled?: boolean | undefined;
+    /** The nested rows. */
+    items: readonly MenuNode[];
+}
+/** A hairline between groups. */
+export interface MenuSeparatorNode {
+    kind: 'separator';
+    /** React key. */
+    id: string;
+}
+/** A non-interactive heading above a group. */
+export interface MenuLabelNode {
+    kind: 'label';
+    /** React key. */
+    id: string;
+    /** The heading. */
+    text: string;
+}
+/** One entry of a menu surface. */
+export type MenuNode = MenuItemNode | MenuSubNode | MenuSeparatorNode | MenuLabelNode;
+/** Everything the menu renders from. */
+export interface DropdownMenuProps {
+    /** Whether the menu is showing; the caller owns it, because the trigger does the toggling. */
+    open: boolean;
+    /** Asked to close, from a selection, Escape, or a pointer outside the tree. */
+    onClose: () => void;
+    /** The trigger the root surface is placed against, and focus returns to. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** The rows. */
+    items: readonly MenuNode[];
+    /**
+     * A leaf was chosen.
+     * @param id - the leaf's id.
+     */
+    onSelect: (id: string) => void;
+    /** Preferred edge of the trigger; flipped when the surface does not fit there. */
+    side?: Side | undefined;
+    /** Preferred alignment along that edge. */
+    align?: Align | undefined;
+    /** Accessible name of the root surface. */
+    label?: string | undefined;
+}
+/**
+ * A dropdown menu anchored to a caller-owned trigger.
+ *
+ * The trigger is rendered by the caller rather than by this component: each seat needs its own
+ * geometry and its own accessible name, and a wrapper element around a flex-centred icon button is
+ * not laid out where the button is — which is what put the harness menu's list against the wrong
+ * edge in the collapsed rail.
+ * @param props - the open state, the trigger, the rows, and the selection callback.
+ * @returns the menu surface, or null while closed.
+ * @see {@link DropdownMenuProps}
+ */
+export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element | null;

package/types/client/ui/Input.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The kit's text controls: a single-line input and a textarea, both in shadcn's bordered form.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Input
+ */
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+/** Every native input attribute, plus the two shapes this package needs. */
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Render the value monospaced, for a path, a command, or a URL. */
+    code?: boolean | undefined;
+}
+/**
+ * A single-line input.
+ * @param props - the optional monospace form and every native input attribute.
+ * @param ref - forwarded to the input element.
+ * @returns the input element.
+ * @see {@link InputProps}
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * A multi-line input.
+ * @param props - every native textarea attribute.
+ * @param ref - forwarded to the textarea element.
+ * @returns the textarea element.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/types/client/ui/Layer.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The portal every floating surface in the kit is drawn in: menus, submenus, select lists, the date
+ * picker, and tooltips.
+ *
+ * Floating surfaces go to `document.body` rather than staying beside their trigger. The dock, the
+ * session header, and the settings card all sit inside overflow-clipping containers, and a list
+ * rendered in place is cropped by the first of them.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Layer
+ */
+import type { CSSProperties, MutableRefObject, ReactNode, RefObject } from 'react';
+import { type PlacementRequest } from './anchor.ts';
+/** Everything a floating surface needs to place itself. */
+export interface LayerProps {
+    /** Whether the surface is rendered at all. */
+    open: boolean;
+    /** The element the surface is positioned against. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Overrides of the default placement request. */
+    placement?: Partial<PlacementRequest> | undefined;
+    /** ARIA role of the surface itself. */
+    role?: string | undefined;
+    /** Marks every surface of one menu tree, so an outside-click test can recognise its own. */
+    treeId?: string | undefined;
+    /** Additional classes on the surface. */
+    className?: string | undefined;
+    /** Additional inline style, merged after the computed position. */
+    style?: CSSProperties | undefined;
+    /** The surface's contents. */
+    children: ReactNode;
+    /** Ref to the surface element, for callers that manage focus inside it. */
+    contentRef?: MutableRefObject<HTMLDivElement | null> | undefined;
+    /** Makes the surface itself focusable, so a menu can take focus without focusing a row. */
+    tabIndex?: number | undefined;
+    /** Accessible name of the surface. */
+    'aria-label'?: string | undefined;
+    /** Called with the surface's own key events, before they reach the document. */
+    onKeyDown?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+}
+/**
+ * A positioned floating surface.
+ * @param props - the open flag, the anchor, the placement, and the contents.
+ * @returns the portal, or null while closed.
+ * @see {@link LayerProps}
+ */
+export declare function Layer(props: LayerProps): import("react").ReactPortal | null;
+/**
+ * Whether one event target sits inside the trigger or any surface of one layer tree.
+ *
+ * A portal is outside its trigger's DOM subtree, and a submenu is outside its parent list's, so an
+ * outside-click test that only walks the trigger would dismiss the menu on its own rows.
+ * @param target - the event target.
+ * @param treeId - the tree marker every surface of one menu carries.
+ * @param anchor - the trigger element.
+ * @returns true when the target belongs to the tree.
+ */
+export declare function insideLayerTree(target: EventTarget | null, treeId: string, anchor: Element | null): boolean;

package/types/client/ui/Select.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The kit's select: a trigger showing the current option and a floating list of the rest.
+ *
+ * A native `<select>` cannot be drawn in this vocabulary — its popup is the operating system's, and
+ * on the platforms this Web Client runs on it ignores every colour the app resolves. The list here
+ * is the same {@link Layer} the menu uses, so it flips and clamps like everything else.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Select
+ */
+import type { ReactNode } from 'react';
+/** One option. */
+export interface SelectOption<T extends string> {
+    /** The stored value. */
+    value: T;
+    /** The rendered text. */
+    label: ReactNode;
+    /** Shown beside the label, for the reason an option is unusable. */
+    note?: string | undefined;
+    /** Refuses selection. */
+    disabled?: boolean | undefined;
+}
+/** Everything the select renders from. */
+export interface SelectProps<T extends string> {
+    /** The selected value; absent shows the placeholder. */
+    value: T | undefined;
+    /**
+     * A different option was chosen.
+     * @param next - the chosen value.
+     */
+    onValueChange: (next: T) => void;
+    /** The options, in the order they are offered. */
+    options: readonly SelectOption<T>[];
+    /** Shown while nothing is selected. */
+    placeholder?: string | undefined;
+    /** Refuses the press and dims the trigger. */
+    disabled?: boolean | undefined;
+    /** Accessible name. */
+    'aria-label'?: string | undefined;
+    /** The trigger's id, for a `<label for>`. */
+    id?: string | undefined;
+    /** Additional classes on the trigger. */
+    className?: string | undefined;
+}
+/**
+ * A select.
+ * @param props - the value, the options, and the change callback.
+ * @returns the trigger and, while open, its list.
+ * @see {@link SelectProps}
+ */
+export declare function Select<T extends string>(props: SelectProps<T>): import("react").JSX.Element;

package/types/client/ui/Separator.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The kit's separator: a hairline between groups, in either orientation.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Separator
+ */
+/**
+ * A hairline.
+ * @param props.orientation - `horizontal` (default) draws a rule across the flow; `vertical` draws
+ * one between two controls in a row.
+ * @param props.className - additional classes.
+ * @returns the separator element.
+ */
+export declare function Separator({ orientation, className }: {
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/types/client/ui/Tabs.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The kit's tab strip: shadcn's segmented control, with an optional per-tab close.
+ *
+ * The strip scrolls horizontally rather than wrapping. The panels it heads are full-height, so a
+ * second row of tabs would take height from the thing being tabbed.
+ * @module @achasoft/dsh-advanced-sidebar/client/ui/Tabs
+ */
+import type { ReactNode } from 'react';
+/** One tab. */
+export interface TabDescriptor {
+    /** Identifies the tab; reported to both callbacks. */
+    id: string;
+    /** The tab's text. */
+    label: ReactNode;
+    /** Native tooltip, for a label the strip clips. */
+    title?: string | undefined;
+    /** Leading glyph, for a state marker. */
+    icon?: ReactNode | undefined;
+}
+/** Everything the strip renders from. */
+export interface TabsProps {
+    /** The tabs, in display order. */
+    tabs: readonly TabDescriptor[];
+    /** Which tab is showing. */
+    value: string | undefined;
+    /**
+     * A different tab was chosen.
+     * @param id - the chosen tab.
+     */
+    onValueChange: (id: string) => void;
+    /**
+     * A tab's close control was used; absent leaves the tabs uncloseable.
+     * @param id - the tab to close.
+     */
+    onClose?: ((id: string) => void) | undefined;
+    /** Accessible name of the strip. */
+    'aria-label'?: string | undefined;
+    /** Rendered after the tabs, inside the strip: the add button, a count, a toolbar. */
+    children?: ReactNode | undefined;
+    /** Additional classes. */
+    className?: string | undefined;
+}
+/**
+ * A tab strip.
+ * @param props - the tabs, the selection, and the callbacks.
+ * @returns the strip.
+ * @see {@link TabsProps}
+ */
+export declare function Tabs(props: TabsProps): import("react").JSX.Element;