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

package/lib/markdown/MarkdownText.module.css

@@ -207,7 +207,7 @@
    already the hover that re-enables scrolling. */
 .tableScroll:global(.md-table-wide) {
   overflow-x: hidden;
-  padding-bottom: var(--dsh-scrollbar-width, 8px);
+  padding-bottom: var(--dsh-scrollbar-width, 5px);
 }
 
 .tableScroll:global(.md-table-wide):hover,

package/lib/settings-form/SettingsForm.module.css

@@ -0,0 +1,53 @@
+/* Settings form: the controls a page shows under a plugin's title, and the save that writes them. */
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.readOnly,
+.unavailable {
+  margin: 0 0 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 16px;
+}
+
+.failed {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.save {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.save:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}

package/lib/settings-form/fields.module.css

@@ -0,0 +1,145 @@
+/* Settings form fields: label, control, override badge, and hint. */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 0;
+}
+
+.field + .field {
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.labelGroup {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.labelGroup > .label {
+  flex: 0 1 auto;
+}
+
+.helpButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.helpButton:hover,
+.helpButton[aria-expanded='true'] {
+  background: var(--dsw-alias-bg-layer-4);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.helpButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+.help {
+  padding: 10px 0 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.help > p {
+  margin: 0;
+}
+
+.help > p + p {
+  margin-top: 8px;
+}
+
+.badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.reset {
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.reset:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+.reset:disabled {
+  cursor: default;
+}
+
+.input {
+  height: 34px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.input:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
+}
+
+.input[aria-invalid='true'] {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.invalid {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}

package/lib/types/ConfigField.d.ts

@@ -0,0 +1,33 @@
+/** Field state and localized controls supplied by the owning form. */
+export interface ConfigFieldProps {
+    /** Display label from the owning plugin. */
+    label: string;
+    /** Editable text; containers may use JSON. */
+    value: string;
+    /** Hide the input text and disable browser password autofill. */
+    secret: boolean;
+    /** Finite choices; an empty list uses a text control. */
+    choices: readonly string[];
+    /** Whether the field is currently read-only. */
+    disabled: boolean;
+    /** Whether the field has a user override. */
+    overridden: boolean;
+    /** Whether the draft fails validation. */
+    invalid: boolean;
+    /** Localized reset, inherited-value choice, and validation text. */
+    labels: {
+        reset: string;
+        inherited: string;
+        invalid: string;
+    };
+    /** Stage a new text value. */
+    onChange: (value: string) => void;
+    /** Stage removal of the user override. */
+    onReset: () => void;
+}
+/** Render a field without owning its schema, draft, or persistence.
+ * @param props Controlled field state and actions.
+ * @returns A labelled input with reset and validation feedback.
+ */
+export declare function ConfigField(props: ConfigFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=ConfigField.d.ts.map

package/lib/types/DisclosureRow.d.ts

@@ -6,6 +6,8 @@ export interface DisclosureRowProps {
     open: boolean;
     expandable: boolean;
     onToggle: () => void;
+    /** Animate the title while its owning operation is running. */
+    running?: boolean | undefined;
     /** Makes the complete title row the disclosure target. */
     expandOnRowClick?: boolean | undefined;
     /** Replaces the collapsed icon with a chevron while the row is hovered. */
@@ -22,8 +24,9 @@ export interface DisclosureRowProps {
 }
 /**
  * Render one disclosure header and its controlled expanded content.
+ * Shallow prop comparison requires stable callbacks and React nodes to skip unchanged renders.
  * @param props - Visual content, controlled state, and interaction policy.
  * @returns the disclosure row.
  */
-export declare function DisclosureRow({ icon, title, open, expandable, onToggle, expandOnRowClick, previewChevron, keepContentWhenOpen, collapsedContent, children, className, rowClassName, leadingClassName, chevronClassName, titleClassName, }: DisclosureRowProps): import("react").JSX.Element;
+export declare const DisclosureRow: import("react").MemoExoticComponent<({ icon, title, open, expandable, onToggle, running, expandOnRowClick, previewChevron, keepContentWhenOpen, collapsedContent, children, className, rowClassName, leadingClassName, chevronClassName, titleClassName, }: DisclosureRowProps) => import("react").JSX.Element>;
 //# sourceMappingURL=DisclosureRow.d.ts.map

package/lib/types/HoverCard.d.ts

@@ -1,24 +1,34 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 /**
  * Render an anchor with a hover-triggered preview card.
  * @param props.anchor - the hover target (rendered in place inside a wrapper span).
  * @param props.content - card content; the pointer may rest on it, so it is
  * readable and selectable, but it carries no dismissal affordance of its own.
  * @param props.openDelayMs - hover dwell before the card shows (default 500).
- * @param props.disabled - suppress opening; turning true closes an open card.
+ * @param props.variant - compact card beside the anchor, or a preview above/below it
+ * with 24px side insets, a 420px height cap, frame-top clearance, and 100ms opacity transitions.
+ * @param props.widthAnchorRef - optional element whose width and horizontal position size the preview.
+ * @param props.disabled - suppress opening; turning true dismisses an open card.
  * @param props.copyText - optional primary value copied by activation and
  * included in the card's accessible name.
  * @param props.copyLabel - localized accessible activation-label prefix.
  * @param props.copiedLabel - localized visible success label.
  * @returns anchor wrapper with the conditional portaled card.
  */
-export declare function HoverCard({ anchor, content, openDelayMs, disabled, copyText, copyLabel, copiedLabel, }: {
+export declare function HoverCard({ anchor, content, openDelayMs, disabled, copyText, copyLabel, copiedLabel, variant, widthAnchorRef, }: {
     anchor: ReactNode;
     content: ReactNode;
     openDelayMs?: number;
     disabled?: boolean;
+    variant?: 'compact' | 'preview';
+    widthAnchorRef?: RefObject<HTMLElement | null>;
+} & ({
     copyText?: string | undefined;
     copyLabel: string;
     copiedLabel: string;
-}): import("react").JSX.Element;
+} | {
+    copyText?: undefined;
+    copyLabel?: string;
+    copiedLabel?: string;
+})): import("react").JSX.Element;
 //# sourceMappingURL=HoverCard.d.ts.map

package/lib/types/LinkIcon.d.ts

@@ -1,34 +1,15 @@
 /**
- * Leading category glyph for clickable artifact links (anchors, file
- * mentions, produced-file chips). One component keyed by link category;
- * every glyph renders fill="currentColor" and so rides the link's own
- * color. Glyphs stay private to this module: the public surface is the
- * category vocabulary, not the individual glyph components, so consumers
- * cannot compose a glyph outside a link. Design sources:
- * ic_globe_language_outline_20, ic_code_outline_20, ic_folder_outline_20,
- * ic_photo_outline_20, ic_paper_doc_outline_20, ic_paper_outline_20.
- *
- * A `url` glyph whose destination names a well-known site is that site's own
- * mark instead of the globe (`SiteGlyph.tsx`); every mark keeps the same
- * currentColor-only rule.
+ * Leading current-color category glyphs for clickable artifact links. The
+ * public component keeps individual artwork private to the link vocabulary.
  */
 import type { ReactNode } from 'react';
 import type { IconProps } from './icons/props.ts';
-/**
- * Link categories with distinct leading glyphs. `url` and `folder` are
- * destination categories the consumer states directly; the rest are file
- * categories `classifyLinkPath` derives from a path. Code, web, and data
- * files share the `code` glyph by design.
- */
+/** Link categories with distinct leading glyphs. */
 export type LinkIconKind = 'url' | 'folder' | 'code' | 'image' | 'document' | 'other';
-/** Props for {@link LinkIcon}: the category plus the shared icon sizing seat. */
+/** Props for link icons: the category plus the shared icon sizing seat. */
 export interface LinkIconProps extends IconProps {
     kind: LinkIconKind;
-    /**
-     * Destination of a `url` link. A well-known site draws its own mark, so
-     * callers that know the destination should pass it; anything else keeps the
-     * globe. Other kinds ignore it — their destination is a path, not a site.
-     */
+    /** Destination of a URL link; known HTTP(S) hosts render their site mark. */
     href?: string | undefined;
 }
 /**
@@ -39,11 +20,15 @@ export interface LinkIconProps extends IconProps {
  */
 export declare function classifyLinkPath(path: string): LinkIconKind;
 /**
- * Render the leading glyph for one clickable artifact link.
- * @param props - The link category, the optional destination that can select a
- * site mark, optional size (default 14px — the inline link text size these
- * glyphs sit beside), and optional CSS class.
- * @returns The category's SVG glyph, riding currentColor.
+ * Render a regular one-pixel link icon.
+ * @param props - Link category, size, and optional class.
+ * @returns The regular decorative link glyph.
+ */
+export declare function LinkIconRegular(props: LinkIconProps): ReactNode;
+/**
+ * Render a medium 1.3px link icon.
+ * @param props - Link category, size, and optional class.
+ * @returns The medium decorative link glyph.
  */
-export declare function LinkIcon({ kind, href, size, className }: LinkIconProps): ReactNode;
+export declare function LinkIconMedium(props: LinkIconProps): ReactNode;
 //# sourceMappingURL=LinkIcon.d.ts.map

package/lib/types/Menu.d.ts

@@ -24,6 +24,41 @@ export interface MenuLabel {
 }
 /** One primary-menu entry: a row, a separator, or a heading label. */
 export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
+/** Props for one component-rendered menu row. */
+export interface MenuItemButtonProps {
+    /** Visible row label. */
+    children: ReactNode;
+    /** Leading icon (figma .Menu_cell gap 8). */
+    icon?: ReactNode;
+    /** Whether the row cannot be activated. */
+    disabled?: boolean;
+    /** Destructive row: error-colored text/icon and danger hover fill. */
+    danger?: boolean;
+    /**
+     * Start a new group: a hairline above this row, the same one a
+     * `{ type: 'separator' }` data entry draws. It comes and goes with the row,
+     * so a row that renders nothing leaves no stray line; a data separator
+     * directly before it draws no second line, and the list's first row draws none.
+     */
+    separatorBefore?: boolean;
+    /** Row activation (click, Enter, or Tab on the focused row). */
+    onSelect: () => void;
+}
+/**
+ * Render one `role="menuitem"` row for a {@link Menu} whose rows are
+ * components rather than `items` data: the same markup and styling as a data
+ * row, so it joins the list's keyboard walk and post-selection focus return
+ * without any shared state. Closing the menu stays the owner's decision, as
+ * it is for data rows.
+ * @param props.children - visible row label.
+ * @param props.icon - optional leading icon.
+ * @param props.disabled - whether the row cannot be activated.
+ * @param props.danger - whether to use the destructive row colors.
+ * @param props.separatorBefore - whether this row starts a new group (hairline above it).
+ * @param props.onSelect - row activation callback.
+ * @returns one menu-item row.
+ */
+export declare function MenuItemButton({ children, icon, disabled, danger, separatorBefore, onSelect, }: MenuItemButtonProps): import("react").JSX.Element;
 /**
  * Render an anchored dropdown menu. While the list is open its keys mirror the
  * composer's: Tab settles the focused row — from the trigger, Tab enters the
@@ -34,10 +69,10 @@ export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
  * @param props.autoFocus - focus the first item on open; the arrow keys walk the list either way.
  * @param props.open - whether the list is showing (owner-controlled).
  * @param props.anchor - the trigger element (rendered in place).
- * @param props.items - selectable rows and optional separators.
+ * @param props.items - selectable data rows and optional separators (default none; with no `children` either, the list is empty).
  * @param props.selectedId - row shown as selected.
  * @param props.selectedIds - rows shown as selected when a menu contains independent option groups.
- * @param props.onSelect - row click callback (not called for disabled rows or submenu parents that only open children).
+ * @param props.onSelect - data-row activation callback (not called for disabled rows or submenu parents that only open children).
  * @param props.onClose - invoked on outside click, Escape, or a window blur
  * that moved focus into an iframe (the only signal a pointerdown inside a
  * cross-origin iframe leaves).
@@ -61,21 +96,30 @@ export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
  * scroll/resize; return null to skip placement for that frame.
  * @param props.footer - rows pinned below the scrolling items area, separated
  * by a hairline; they stay visible while the items above scroll.
+ * @param props.children - component rows rendered after `items` in the same
+ * list, each a `role="menuitem"` button such as {@link MenuItemButton}; they
+ * share the keyboard walk, the submenu exclusivity, and the post-selection
+ * focus return.
  * @param props.selection - how a selected row is marked: a trailing check
  * (`'check'`, default — figma .Menu_cell) or the hover fill held on the row
  * with no check (`'fill'`, for icon-labelled rows where a trailing glyph
  * crowds the cell).
+ * @param props.className - extra class on the anchor wrapper span.
+ * @param props.listClassName - extra class on the dropdown card itself; the
+ * only style hook that reaches a portaled list, which renders under
+ * document.body outside the owner's DOM subtree.
  * @returns anchor wrapper with the conditional list.
  */
-export declare function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align, side, portal, closeOnPointerLeave, dense, compact, autoFocus, selection, getAnchorRect, footer, className }: {
+export declare function Menu({ open, anchor, items, children, selectedId, selectedIds, onSelect, onClose, align, side, portal, closeOnPointerLeave, dense, compact, autoFocus, selection, getAnchorRect, footer, className, listClassName }: {
     open: boolean;
     autoFocus?: boolean;
     anchor: ReactNode;
-    items: readonly MenuEntry[];
+    items?: readonly MenuEntry[];
+    children?: ReactNode;
     footer?: readonly MenuEntry[];
     selectedId?: string | undefined;
     selectedIds?: readonly string[] | undefined;
-    onSelect: (id: string) => void;
+    onSelect?: (id: string) => void;
     onClose: () => void;
     align?: 'start' | 'end';
     side?: 'bottom' | 'top' | 'right';
@@ -86,5 +130,6 @@ export declare function Menu({ open, anchor, items, selectedId, selectedIds, onS
     selection?: 'check' | 'fill';
     getAnchorRect?: () => DOMRect | null;
     className?: string | undefined;
+    listClassName?: string | undefined;
 }): import("react").JSX.Element;
 //# sourceMappingURL=Menu.d.ts.map

package/lib/types/PathLabel.d.ts

@@ -0,0 +1,13 @@
+/** A single-line file path whose trailing characters remain visible in narrow toolbars. */
+import { type HTMLAttributes } from 'react';
+/**
+ * Render subdued directories and a primary filename, with the complete path on hover.
+ * Fitting text is left-aligned; overflow clips and fades at the left edge.
+ * The fade updates on path changes and, when ResizeObserver is available, size changes.
+ * @param props - File path and attributes for its outer span; callers own toolbar spacing.
+ * @returns the path label.
+ */
+export declare function PathLabel({ path, className, ...attributes }: {
+    path: string;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'title'>): import("react").JSX.Element;
+//# sourceMappingURL=PathLabel.d.ts.map

package/lib/types/PermissionIcon.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { IconProps } from './icons/props.ts';
+/**
+ * Render the read-only permission icon with a one-pixel stroke.
+ * @param props - Size and optional class.
+ * @returns The regular decorative permission glyph.
+ */
+export declare function PermissionIconReadOnlyRegular(props: IconProps): ReactNode;
+/**
+ * Render the read-only permission icon with a 1.3px stroke.
+ * @param props - Size and optional class.
+ * @returns The medium decorative permission glyph.
+ */
+export declare function PermissionIconReadOnlyMedium(props: IconProps): ReactNode;
+/**
+ * Render the workspace-write permission icon with a one-pixel stroke.
+ * @param props - Size and optional class.
+ * @returns The regular decorative permission glyph.
+ */
+export declare function PermissionIconWorkspaceWriteRegular(props: IconProps): ReactNode;
+/**
+ * Render the workspace-write permission icon with a 1.3px stroke.
+ * @param props - Size and optional class.
+ * @returns The medium decorative permission glyph.
+ */
+export declare function PermissionIconWorkspaceWriteMedium(props: IconProps): ReactNode;
+/**
+ * Render the full-access permission icon with a one-pixel stroke.
+ * @param props - Size and optional class.
+ * @returns The regular decorative permission glyph.
+ */
+export declare function PermissionIconFullAccessRegular(props: IconProps): ReactNode;
+/**
+ * Render the full-access permission icon with a 1.3px stroke.
+ * @param props - Size and optional class.
+ * @returns The medium decorative permission glyph.
+ */
+export declare function PermissionIconFullAccessMedium(props: IconProps): ReactNode;
+//# sourceMappingURL=PermissionIcon.d.ts.map

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