@deepseek-ai/dsh-client-ui-primitives 0.1.6-alpha.2 → 0.1.7-alpha.2

package/lib/types/ReferenceIcon.d.ts

@@ -1,16 +1,21 @@
 import type { ReactNode } from 'react';
+import type { IconProps } from './icons/props.ts';
 /** Reference domains with distinct composer and transcript glyphs. */
 export type ReferenceIconKind = 'session' | 'file' | 'folder';
 /** Props shared by inline reference glyphs. */
-export interface ReferenceIconProps {
+export interface ReferenceIconProps extends IconProps {
     kind: ReferenceIconKind;
-    size?: number;
-    className?: string | undefined;
 }
 /**
- * Render the icon that identifies one inline reference domain.
- * @param props - Reference kind, optional size, and optional CSS class.
- * @returns The corresponding current-color SVG glyph.
+ * Render a regular one-pixel reference icon.
+ * @param props - Reference kind, size, and optional class.
+ * @returns The regular decorative reference glyph.
  */
-export declare function ReferenceIcon({ kind, size, className }: ReferenceIconProps): ReactNode;
+export declare function ReferenceIconRegular(props: ReferenceIconProps): ReactNode;
+/**
+ * Render a medium 1.3px reference icon.
+ * @param props - Reference kind, size, and optional class.
+ * @returns The medium decorative reference glyph.
+ */
+export declare function ReferenceIconMedium(props: ReferenceIconProps): ReactNode;
 //# sourceMappingURL=ReferenceIcon.d.ts.map

package/lib/types/SegmentedControl.d.ts

@@ -0,0 +1,35 @@
+/** One segment of a {@link SegmentedControl}. */
+export interface SegmentedControlOption<Value extends string> {
+    /** The value the owner receives when this segment is chosen. */
+    value: Value;
+    /** Localized segment text. */
+    label: string;
+    /** Whether the segment refuses selection. */
+    disabled?: boolean;
+    /** Localized hover text, typically why the segment is locked. */
+    title?: string;
+}
+/**
+ * Render a segmented control.
+ * @param props.id - the owner's base id: each tab is `<id>-<value>` and names
+ * `<id>-<value>-panel` as the panel it controls.
+ * @param props.value - the selected option's value; the control is fully controlled.
+ * @param props.options - the segments in display order; at least two.
+ * @param props.onChange - called with the value a click or a walk key asks for,
+ * never with the value already selected.
+ * @param props.label - localized accessible name of the tablist.
+ * @param props.disabled - lock every segment, typically while the shown panel
+ * has a write or a fetch in flight that switching would orphan.
+ * @param props.className - extra class for layout placement.
+ * @returns the tablist element.
+ */
+export declare function SegmentedControl<Value extends string>({ id, value, options, onChange, label, disabled, className, }: {
+    id: string;
+    value: Value;
+    options: readonly SegmentedControlOption<Value>[];
+    onChange: (next: Value) => void;
+    label: string;
+    disabled?: boolean;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/lib/types/SegmentedTabs.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/** A tab links its localized label to a caller-owned panel. */
+export interface SegmentedTab<Value extends string = string> {
+    value: Value;
+    label: ReactNode;
+    id: string;
+    panelId: string;
+}
+/**
+ * Render equal-width, controlled tabs with a sliding selection indicator.
+ * @param props.items - non-empty ordered tabs with unique values and DOM ids.
+ * @param props.value - selected value, which must belong to items.
+ * @param props.onChange - selection requested by click, Left/Right, or Home/End.
+ * Keyboard selection also moves focus; only the selected tab is a tab stop.
+ * @param props.label - localized accessible name for the tab list.
+ * @param props.className - layout placement; panels remain caller-owned.
+ * @returns the tab list, without its panels.
+ */
+export declare function SegmentedTabs<Value extends string>({ items, value, onChange, label, className }: {
+    items: readonly [SegmentedTab<Value>, ...SegmentedTab<Value>[]];
+    value: Value;
+    onChange: (value: Value) => void;
+    label: string;
+    className?: string | undefined;
+}): ReactNode;
+//# sourceMappingURL=SegmentedTabs.d.ts.map

package/lib/types/SiteGlyph.d.ts

@@ -1,5 +1,5 @@
 /**
- * Site marks for well-known external link hosts. {@link LinkIcon} renders one in
+ * Site marks for well-known external link hosts. {@link LinkIconMedium} renders one in
  * the leading glyph seat, so a familiar destination leads with its own mark
  * instead of the generic globe. The marks are the `simple-icons` artwork set
  * (CC0-1.0), pinned by this package's dependency on it; each mark takes the

package/lib/types/StateDot.d.ts

@@ -1,18 +1,20 @@
 /**
- * State semantic: green done / amber user-attention / blue running ring /
- * red error / grey idle for a tracked subject with nothing in progress.
+ * State semantic: green done / amber user-attention / tertiary-grey loading /
+ * red error / neutral-grey idle for a tracked subject with nothing in progress.
  */
 export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error' | 'idle';
 /**
  * Render a state dot.
  * @param props.state - which of `done`, `warning`, `ongoing`, `error`, or `idle` to show.
- * @param props.size - outer diameter in px (default 10, the figma size).
+ * @param props.size - outer diameter in px; defaults to 14 for ongoing and 10 for solid states.
  * @param props.className - extra class for layout placement.
+ * @param props.appearance - compact dot by default; step uses a filled check or hollow pending circle.
  * @returns the dot element (aria-hidden; pair with text for accessibility).
  */
-export declare function StateDot({ state, size, className }: {
+export declare function StateDot({ state, size, className, appearance }: {
     state: StateDotState;
     size?: number | undefined;
     className?: string | undefined;
+    appearance?: 'dot' | 'step';
 }): import("react").JSX.Element;
 //# sourceMappingURL=StateDot.d.ts.map

package/lib/types/TerminalBlock.d.ts

@@ -46,12 +46,24 @@ export interface TerminalBlockProps {
     /** Settled terminating signal name; any value renders the status pill, taking precedence over the exit code. */
     signal?: string | undefined;
     /**
-     * The command is still running: the block shows the prompt line, and the
-     * output printed so far when there is any, with no copy control until it settles.
+     * The command is still running: with no `output` the block shows the prompt
+     * line alone; with output it renders the live text under the running state.
      */
     running?: boolean | undefined;
     /** Height cap in output lines before the middle collapses (default {@link DEFAULT_TERMINAL_MAX_LINES}); Infinity disables the cap. */
     maxLines?: number | undefined;
+    /**
+     * Copy-control payload override; the control copies the raw output when
+     * absent. Supplying it also keeps the control rendered before any output
+     * exists — a command is copyable before it prints.
+     */
+    copyText?: string | undefined;
+    /**
+     * Draw the run-state dot and its assistive label in the card gutter
+     * (default true). Hosts whose surrounding row already carries the same
+     * state omit both and reclaim the gutter via `--dsl-terminal-gutter`.
+     */
+    runStateDot?: boolean | undefined;
     /** Extra class merged onto the wrapper (callers position; this component draws). */
     className?: string | undefined;
     /** Localized display copy supplied by the owning render site. */
@@ -62,5 +74,5 @@ export interface TerminalBlockProps {
  * @param props - see {@link TerminalBlockProps}.
  * @returns the terminal block element.
  */
-export declare function TerminalBlock({ command, cwd, home, output, exitCode, signal, running, maxLines, className, labels, }: TerminalBlockProps): import("react").JSX.Element;
+export declare function TerminalBlock({ command, cwd, home, output, exitCode, signal, running, maxLines, copyText, runStateDot, className, labels, }: TerminalBlockProps): import("react").JSX.Element;
 //# sourceMappingURL=TerminalBlock.d.ts.map

package/lib/types/TextShimmer.d.ts

@@ -0,0 +1,13 @@
+/** Text and activity supplied by the owning row. */
+export interface TextShimmerProps {
+    children: string;
+    active: boolean;
+    className?: string | undefined;
+}
+/**
+ * Render text with an optional moving highlight; inactive text keeps the same node.
+ * @param props - localized text, running state, and owner styling.
+ * @returns the retained text span.
+ */
+export declare const TextShimmer: import("react").MemoExoticComponent<({ children, active, className }: TextShimmerProps) => import("react").JSX.Element>;
+//# sourceMappingURL=TextShimmer.d.ts.map

package/lib/types/Toast.d.ts

@@ -6,6 +6,8 @@ import type { ReactNode } from 'react';
  * per-show sequence). Rendered through a body portal so an owner inside a
  * transformed or filtered ancestor cannot trap the fixed banner in that
  * ancestor's box.
+ * With unchanged holdMs, parent rerenders do not extend the lifetime.
+ * Completion calls the latest onDone handler; fully faded actions receive no input.
  *
  * The hold is the owner's to set, because how long a banner has to stay
  * depends on how much there is to read: a one-line limit lands in the default
@@ -14,7 +16,16 @@ import type { ReactNode } from 'react';
  * reads it as a custom property — so the two can no longer disagree and leave
  * the banner unmounting mid-fade.
  * @param props.text - resolved banner copy; the owner passes localized text.
- * @param props.icon - optional leading glyph (e.g. a warning icon).
+ * @param props.icon - optional leading glyph (e.g. a warning icon); ignored
+ * under `tone="success"`, which brings its own glyph.
+ * @param props.tone - 'success' renders the design's circled green check as
+ * the leading glyph; omitted, the icon seat keeps its warning tint.
+ * @param props.actions - optional inline actions continuing the sentence:
+ * each renders its plain-text `prefix` (a connective like 或) followed by its
+ * localized `label` as blue clickable text, flowing after `text` as one
+ * sentence. Each press is the owner's to handle (e.g. undo the reported
+ * change, then unmount the toast). The banner surface stays click-through —
+ * only the action text takes the pointer.
  * @param props.holdMs - full-opacity hold before the fade; defaults to 3000.
  * @param props.anchor - optional element whose horizontal center the banner
  * follows (e.g. the composer card, so the banner centers over the chat column
@@ -22,11 +33,17 @@ import type { ReactNode } from 'react';
  * @param props.onDone - called once the fade completes; unmount the toast here.
  * @returns the floating banner.
  */
-export declare function Toast({ text, icon, anchor, holdMs, onDone }: {
+export declare function Toast({ text, icon, tone, anchor, holdMs, actions, onDone }: {
     text: string;
     icon?: ReactNode;
+    tone?: 'success';
     anchor?: HTMLElement | null;
     holdMs?: number;
+    actions?: readonly {
+        label: string;
+        prefix?: string;
+        onClick: () => void;
+    }[];
     onDone: () => void;
 }): import("react").ReactPortal;
 //# sourceMappingURL=Toast.d.ts.map

package/lib/types/Tooltip.d.ts

@@ -1,3 +1,4 @@
+/** Anchor-preserving tooltips with optional body portals for clipping containers. */
 import type { FocusEventHandler, MouseEventHandler, ReactElement, Ref } from 'react';
 /** Bubble placement relative to the anchor. */
 export type TooltipSide = 'right' | 'bottom' | 'top';
@@ -6,6 +7,7 @@ interface AnchorProps {
     ref?: Ref<HTMLElement> | undefined;
     onMouseEnter?: MouseEventHandler | undefined;
     onMouseLeave?: MouseEventHandler | undefined;
+    onClick?: MouseEventHandler | undefined;
     onFocus?: FocusEventHandler | undefined;
     onBlur?: FocusEventHandler | undefined;
 }
@@ -14,19 +16,28 @@ type TooltipLabel = string | (() => string);
  * Attach a hover/focus tooltip to an anchor element.
  * @param props.label - bubble text, or a resolver evaluated only while the bubble is visible.
  * @param props.side - placement relative to the anchor (default 'right').
+ * @param props.align - horizontal anchor-edge alignment for 'bottom'/'top' bubbles: 'end' pins
+ * the bubble's right edge to the anchor's (for anchors beside other hover surfaces the centered
+ * bubble would overlap); default 'center'. Ignored for side 'right'.
+ * @param props.portal - render the bubble under document.body to escape containing blocks and clipping ancestors.
  * @param props.delayMs - hover delay in milliseconds; keyboard focus remains immediate.
  * @param props.disabled - suppress the bubble while true; the anchor renders identically so
  * toggling never remounts it (which would cut its CSS transitions).
  * @param props.maxWidth - bubble width cap in pixels, for labels long enough that the default
  * half-viewport cap would render a slab wider than the surface the anchor sits on.
  * @param props.children - a single anchor element; its own ref (callback or object) is forwarded alongside the tooltip's.
- * @returns the cloned anchor plus a fixed-position bubble while hovered/focused.
+ * @returns the cloned anchor plus a fixed-position bubble, optionally portaled to the body.
+ * The bubble stays hidden until ResizeObserver supplies its size for viewport fitting; clicking the
+ * anchor dismisses the bubble until the next trigger, and focus arriving after a pointer
+ * interaction (a closing menu refocusing its trigger) never raises it.
  */
-export declare function Tooltip({ label, side, delayMs, disabled, maxWidth, children }: {
+export declare function Tooltip({ label, side, align, delayMs, disabled, portal, maxWidth, children }: {
     label: TooltipLabel;
     side?: TooltipSide;
+    align?: 'center' | 'end';
     delayMs?: number;
     disabled?: boolean;
+    portal?: boolean;
     maxWidth?: number;
     children: ReactElement<AnchorProps>;
 }): import("react").JSX.Element;

package/lib/types/code-file-types.d.ts

@@ -14,7 +14,7 @@ export interface FileTypeProjectContext {
  */
 export declare function isCodeFileType(type: string): type is CodeFileType;
 /**
- * Test whether an extension belonged to the established coarse LinkIcon code category.
+ * Test whether an extension belongs to the established coarse link-icon code category.
  * @param extension - Extension without a leading dot.
  * @returns Whether clickable links keep the code glyph for this extension.
  */

package/lib/types/code-highlighting.d.ts

@@ -0,0 +1,19 @@
+import { type HighlightSpan } from './markdown/highlight.ts';
+/** Recognized filename suffixes whose source can use the shared syntax highlighter. */
+export declare const CODE_HIGHLIGHT_EXTENSIONS: readonly string[];
+/**
+ * Select the shared syntax highlighter's grammar from a filename.
+ * @param path - decoded source filename or path.
+ * @returns a supported grammar hint, or `undefined` for other suffixes.
+ */
+export declare function languageForPath(path: string): string | undefined;
+/** Highlight one source fragment into one token list per line. */
+export type CodeHighlighter = (code: string) => HighlightSpan[][] | undefined;
+/**
+ * Bind the shared lazy highlighter to one language and refresh after its grammar loads.
+ * @param language - grammar hint selected from the source filename.
+ * @returns a stable fragment highlighter; unknown and loading grammars return `undefined` for plain-text fallback.
+ */
+export declare function useCodeHighlighter(language: string | undefined): CodeHighlighter;
+export type { HighlightSpan };
+//# sourceMappingURL=code-highlighting.d.ts.map