@deepseek-ai/dsh-client-ui-primitives 0.1.2-alpha.5 → 0.1.3-alpha.2

package/lib/markdown/MarkdownText.module.css

@@ -57,9 +57,10 @@
 
 .markdown a {
   /* deepsuite markdown.css uses brand-text (blue in newDesign); this sheet
-     keeps design-platform brand-text as near-black, so links use the blue
-     business-primary alias instead. */
-  color: var(--dsw-alias-state-business-primary);
+     keeps design-platform brand-text as near-black, so links use the
+     dedicated link alias instead. */
+  color: var(--dsw-alias-link);
+  font-weight: 500;
   transition: box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
   position: relative;
   text-decoration: none;
@@ -75,13 +76,27 @@
 .markdown a:hover,
 .markdown a:focus {
   outline: none;
-  text-decoration: underline var(--dsw-alias-state-business-primary);
+  text-decoration: underline dotted var(--dsw-alias-link);
+  text-underline-offset: 3px;
 }
 
 .markdown a:focus-visible {
   box-shadow: 0 0 0 2px var(--dsw-alias-state-business-primary);
 }
 
+/* Leading link-category glyph inside anchors, file mentions, and
+   URL-promoted inline code: outline glyphs ride the link's currentColor.
+   1.1em keeps the glyph proportional to the surrounding text's size (it
+   shrinks with the code chip's 0.875em); the small negative offset seats
+   its optical center on the cap height. */
+.linkIcon {
+  flex: none;
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: -0.25em;
+  margin-right: 5px;
+}
+
 .markdown :where(ul, ol) {
   margin: 16px 0;
   padding-left: 18px;
@@ -151,6 +166,7 @@
   font-family: var(--ds-font-family-code);
   font-size: 0.875em !important;
   background-color: var(--dsw-alias-markdown-inline-code);
+  border: 0.5px solid var(--dsw-alias-border-l1);
   border-radius: 6px;
   padding: 0 5px;
 }
@@ -282,8 +298,8 @@
 }
 
 /* Inline file mention: the same link language this sheet gives anchors (and
-   thereby URL-promoted inline code) — link-blue at rest, underline only on
-   hover/focus. An underline at rest reads badly inside the code chip, where
+   thereby URL-promoted inline code) — link-blue at rest, dotted underline only
+   on hover/focus. An underline at rest reads badly inside the code chip, where
    it collides with monospace descenders and the pill background. */
 .fileMention {
   margin: 0;
@@ -291,7 +307,8 @@
   border: none;
   background: none;
   font: inherit;
-  color: var(--dsw-alias-state-business-primary);
+  font-weight: 500;
+  color: var(--dsw-alias-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -299,6 +316,6 @@
 .fileMention:hover,
 .fileMention:focus {
   outline: none;
-  text-decoration: underline var(--dsw-alias-state-business-primary);
+  text-decoration: underline dotted var(--dsw-alias-link);
   text-underline-offset: 3px;
 }

package/lib/types/DocumentFileIcon.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Render the DeepSeek Web document glyph used by generic-file cards.
+ * @param props - optional CSS class for sizing and placement.
+ * @returns a decorative document SVG with an instance-safe gradient id.
+ */
+export declare function DocumentFileIcon({ className }: {
+    readonly className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DocumentFileIcon.d.ts.map

package/lib/types/LinkIcon.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+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.
+ */
+export type LinkIconKind = 'url' | 'folder' | 'code' | 'image' | 'document' | 'other';
+/** Props for {@link LinkIcon}: the category plus the shared icon sizing seat. */
+export interface LinkIconProps extends IconProps {
+    kind: LinkIconKind;
+}
+/**
+ * Derive a file path's link-icon category from its extension. Unknown and
+ * missing extensions fall to `other` (the plain-paper glyph).
+ * @param path - File path as the producing tool spelled it (either separator).
+ * @returns The file's glyph category; never `url` or `folder`.
+ */
+export declare function classifyLinkPath(path: string): LinkIconKind;
+/**
+ * Render the leading glyph for one clickable artifact link.
+ * @param props - The link category, 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.
+ */
+export declare function LinkIcon({ kind, size, className }: LinkIconProps): ReactNode;
+//# sourceMappingURL=LinkIcon.d.ts.map

package/lib/types/Menu.d.ts

@@ -53,9 +53,13 @@ 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.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).
  * @returns anchor wrapper with the conditional list.
  */
-export declare function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align, side, portal, closeOnPointerLeave, dense, compact, getAnchorRect, footer, className }: {
+export declare function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align, side, portal, closeOnPointerLeave, dense, compact, selection, getAnchorRect, footer, className }: {
     open: boolean;
     anchor: ReactNode;
     items: readonly MenuEntry[];
@@ -70,6 +74,7 @@ export declare function Menu({ open, anchor, items, selectedId, selectedIds, onS
     closeOnPointerLeave?: boolean;
     dense?: boolean;
     compact?: boolean;
+    selection?: 'check' | 'fill';
     getAnchorRect?: () => DOMRect | null;
     className?: string;
 }): import("react").JSX.Element;

package/lib/types/StateDot.d.ts

@@ -1,8 +1,11 @@
-/** Four-color state semantic (green done / amber user-attention / blue running ring / red error). */
-export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error';
+/**
+ * State semantic: green done / amber user-attention / blue running ring /
+ * red error / 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 the four states to show.
+ * @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.className - extra class for layout placement.
  * @returns the dot element (aria-hidden; pair with text for accessibility).

package/lib/types/Switch.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Render a toggle switch.
+ * @param props.checked - the current state; the control is fully controlled.
+ * @param props.onChange - called with the state the click asks for.
+ * @param props.label - localized accessible name, owned by the render site.
+ * @param props.disabled - whether the control refuses input; owners also set it
+ * while a write is in flight, not only when a deployment locks the toggle.
+ * @param props.title - localized hover text, typically why the toggle is locked.
+ * @param props.className - extra class for layout placement.
+ * @returns the switch element.
+ */
+export declare function Switch({ checked, onChange, label, disabled, title, className }: {
+    checked: boolean;
+    onChange: (next: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    title?: string | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Switch.d.ts.map

package/lib/types/Tag.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+/** Palette selector; each tone names one shipped appearance. */
+export type TagTone = 
+/** Hairline outline on tertiary text: the read-only default. */
+'outline'
+/** Inverted fill: one tag per group that names the current selection. */
+ | 'solid'
+/** Platform-gray fill: a neutral fact with no status meaning. */
+ | 'neutral'
+/** Text only, no fill: a fact stated more quietly than `neutral`. */
+ | 'quiet'
+/** Tinted green: a healthy or enabled state. */
+ | 'success'
+/** Tinted blue: informational classification, not health. */
+ | 'info'
+/** Tinted amber: attention needed, not yet a failure. */
+ | 'warning'
+/** Tinted red: a failure. */
+ | 'danger';
+/**
+ * Render a read-only tag.
+ * @param props.tone - which palette to use (default `outline`).
+ * @param props.className - extra class for layout placement.
+ * @param props.children - the localized label, owned by the render site.
+ * @returns the tag element.
+ */
+export declare function Tag({ tone, className, children }: {
+    tone?: TagTone;
+    className?: string | undefined;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Tag.d.ts.map

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

@@ -0,0 +1,8 @@
+/** Compact human-readable byte counts shared by attachment presenters. @module @deepseek-ai/dsh-client-ui-primitives/file-size */
+/**
+ * Byte count as compact user-facing size text (`312B`, `4.2KB`, `1.5MB`, `2.4GB`).
+ * @param bytes - exact byte count.
+ * @returns whole-unit text with one decimal below ten of the chosen unit.
+ */
+export declare function fileSizeText(bytes: number): string;
+//# sourceMappingURL=file-size.d.ts.map

package/lib/types/index.d.ts

@@ -8,6 +8,9 @@ export type { DisclosureRowProps } from './DisclosureRow.tsx';
 export { Button } from './Button.tsx';
 export type { ButtonVariant } from './Button.tsx';
 export { Pill } from './Pill.tsx';
+export { Tag } from './Tag.tsx';
+export type { TagTone } from './Tag.tsx';
+export { Switch } from './Switch.tsx';
 export { Input } from './Input.tsx';
 export { Menu } from './Menu.tsx';
 export type { MenuEntry, MenuItem, MenuSeparator, MenuLabel } from './Menu.tsx';
@@ -27,12 +30,17 @@ export { BrandWordmark } from './BrandWordmark.tsx';
 export type { BrandWordmarkProps } from './BrandWordmark.tsx';
 export { ReferenceIcon } from './ReferenceIcon.tsx';
 export type { ReferenceIconKind, ReferenceIconProps } from './ReferenceIcon.tsx';
+export { LinkIcon, classifyLinkPath } from './LinkIcon.tsx';
+export type { LinkIconKind, LinkIconProps } from './LinkIcon.tsx';
 export { projectUserText } from './user-text.tsx';
 export { Tooltip } from './Tooltip.tsx';
 export type { TooltipSide } from './Tooltip.tsx';
 export { Toast } from './Toast.tsx';
+export { fileSizeText } from './file-size.ts';
+export { DocumentFileIcon } from './DocumentFileIcon.tsx';
 export { writeClipboard } from './clipboard.ts';
 export { relativeTime } from './relative-time.ts';
+export { rankByName } from './rank-by-name.ts';
 export type { RelativeTime, RelativeTimeUnit } from './relative-time.ts';
 export { JsonTree } from './JsonTree.tsx';
 export type { JsonTreeProps, JsonTreeLabels } from './JsonTree.tsx';
@@ -51,7 +59,6 @@ export type { CodeBlockProps } from './markdown/CodeBlock.tsx';
 export { JsonBlock } from './markdown/JsonBlock.tsx';
 export { MarkdownText } from './markdown/MarkdownText.tsx';
 export type { MarkdownCodeLabels, MarkdownFileMentions, MarkdownLabels } from './markdown/MarkdownText.tsx';
-export { MessageText } from './markdown/MessageText.tsx';
 export { extractMarkdownPlainText } from './markdown/plain-text.ts';
 export type { MarkdownPlainTextMode, MarkdownPlainTextOptions } from './markdown/plain-text.ts';
 export * from './icons/index.tsx';

package/lib/types/rank-by-name.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Shared ranking for `/` menu candidates: the query must be a
+ * case-insensitive ordered subsequence of the candidate name. Prefix hits
+ * rank first, then the strongest alignment score, then the source order of
+ * the input. Decision record:
+ * .agents/notes/archived/feature/2026-08-04-web-slash-command-fuzzy-discovery.md
+ */
+/**
+ * Rank named items by a menu query.
+ * @param items - candidates in source order (a host catalog, then client contributions).
+ * @param rawQuery - the text typed after the trigger, matched case-insensitively.
+ * @returns the matching items: prefix hits first, then by alignment score,
+ * then in source order. The input list itself for an empty query.
+ */
+export declare function rankByName<T extends {
+    readonly name: string;
+}>(items: readonly T[], rawQuery: string): readonly T[];
+//# sourceMappingURL=rank-by-name.d.ts.map

package/lib/types/user-text.d.ts

@@ -2,18 +2,28 @@
  * Display projection of reference forms in sent user text (bubble and queue
  * rows). The logged model text remains the single truth; this is presentation
  * only, and every part renders inline so a single-line message never breaks
- * across lines. Three decoration sources, by precedence: the wire session form
+ * across lines. Four decoration sources, by precedence: the wire session form
  * `@[label](dsh-session:...)` folds to its label; exact session labels
- * supplied by an adjacent recall decorate their bare `@label` mention; and
- * plain `/name` / `@name` word-boundary tokens decorate by shape alone (sent
- * tokens were validated at compose time).
+ * supplied by an adjacent recall decorate their bare `@label` mention; plain
+ * `@name` word-boundary tokens decorate by shape alone; and a plain `/name`
+ * token decorates only when the caller names it — a skill the host actually
+ * loaded for that message (ui-chat reads the step's `skill-invocation`
+ * injections) or the command a command-input bubble echoes — so `/123` or a
+ * stray `/word` stays plain text. A `/name` token is whitespace-bounded like
+ * the host skill gesture (`dsh-tool-skill`): it ends at whitespace or the
+ * text end, so slash paths (`/nfs-hg/xxx`, `/plan.md`) and punctuation-glued
+ * tokens (`/plan。`) stay plain even for a loaded name.
  */
 import type { ReactNode } from 'react';
 /**
  * Split one sent text into inline plain runs and reference chips.
  * @param text - the logged model text of the message or queue row.
  * @param sessionLabels - exact session mention labels associated by an adjacent recall.
+ * @param slashNames - names a `/name` token may decorate as: the skills the
+ * host loaded for this message, or the command a command bubble echoes
+ * (unsent queue rows pass none).
+ * @param slashKind - the chip kind those tokens render as.
  * @returns inline nodes covering the whole text.
  */
-export declare function projectUserText(text: string, sessionLabels: readonly string[]): ReactNode;
+export declare function projectUserText(text: string, sessionLabels: readonly string[], slashNames?: readonly string[], slashKind?: 'skill' | 'command'): ReactNode;
 //# sourceMappingURL=user-text.d.ts.map

package/lib/user-text.module.css

@@ -20,6 +20,14 @@
   white-space: nowrap;
 }
 
+/* Skill and command tokens read as code: the theme's code family at the
+   consumer's own size and line height, so the chip sits on the bubble line
+   like the plain runs around it. `@` chips keep the body face — a file or
+   session name is a label, not code. */
+.slashChip {
+  font-family: var(--dsw-font-markdown-code-font-family);
+}
+
 /* Inline reference glyphs (always ReferenceIcon svgs) ride the consumer's own
    font: 1em keeps the glyph at the text's size in the bubble (14px + user
    setting), the queue preview's fixed 13px line, and any future consumer — a

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-primitives",
   "description": "Pure React atoms for the dsh web UI: controls, icons, markdown, and JSON inspectors (zero cordis)",
-  "version": "0.1.2-alpha.5",
+  "version": "0.1.3-alpha.2",
   "publishConfig": {
     "access": "public"
   },

package/lib/markdown/MessageText.module.css

@@ -1,9 +0,0 @@
-.text {
-  white-space: pre-wrap;
-  word-break: break-word;
-  /* Font metrics inherit from the consumer's container (bubble 16/24,
-     assistant flow 16/28) — a generic text primitive must not pin its own
-     size, or every consumer's line grid breaks (44px bubble spec regression). */
-  font-size: inherit;
-  line-height: inherit;
-}

package/lib/types/markdown/MessageText.d.ts

@@ -1,4 +0,0 @@
-export declare function MessageText({ text }: {
-    text: string;
-}): import("react").JSX.Element;
-//# sourceMappingURL=MessageText.d.ts.map