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

package/lib/markdown/CodeBlock.module.css

@@ -8,11 +8,12 @@
      with the markdown 0.875 ladder without shrinking every other xs-13 use. */
   --dsl-code-block-banner-font: 11px/18px var(--dsw-font-family);
   --dsl-code-block-content-font: var(--dsw-font-markdown-code-block);
+  --dsl-code-block-background: var(--dsw-alias-markdown-code-block);
 
   position: relative;
   margin: 16px 0;
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-markdown-code-block);
+  background: var(--dsl-code-block-background);
   border-radius: var(--dsl-code-block-border-radius);
 }
 
@@ -75,7 +76,7 @@
   overflow-x: auto;
   white-space: pre-wrap;
   word-break: break-all;
-  background: var(--dsw-alias-markdown-code-block);
+  background: var(--dsl-code-block-background);
   /* Bottom radii live on <pre>: overflow:hidden on .block would kill the
      sticky banner, and this opaque fill otherwise squares off the wrapper. */
   border-bottom-left-radius: var(--dsl-code-block-border-radius);
@@ -84,7 +85,7 @@
 
 /* Shiki inlines its theme background var; route it to the repo token. */
 .block :where(pre.shiki) {
-  background: var(--dsw-alias-markdown-code-block) !important;
+  background: var(--dsl-code-block-background) !important;
 }
 
 .block :where(pre) code {
@@ -96,3 +97,28 @@
 .plain {
   color: var(--dsw-alias-label-primary);
 }
+
+.numbered :where(pre) code {
+  display: block;
+  counter-reset: source-line;
+  white-space: normal;
+}
+
+.numbered :where(pre) code > :global(.line) {
+  position: relative;
+  display: block;
+  min-height: 1lh;
+  padding-inline-start: calc(var(--dsl-code-block-line-number-width) + 12px);
+  counter-increment: source-line;
+  white-space: var(--dsl-code-block-line-white-space, pre-wrap);
+}
+
+.numbered :where(pre) code > :global(.line)::before {
+  position: absolute;
+  inset-inline-start: 0;
+  width: var(--dsl-code-block-line-number-width);
+  color: var(--dsw-alias-label-tertiary);
+  text-align: end;
+  content: counter(source-line);
+  user-select: none;
+}

package/lib/types/CodeFileIcon.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { IconProps } from './icons/props.ts';
+import type { CodeFileType } from './code-file-types.ts';
+/**
+ * Render one full-color square code-file glyph from the embedded icon set.
+ * @param props - Detailed code type, optional size, and optional CSS class.
+ * @returns The selected decorative SVG with its identifying palette intact.
+ */
+export declare function CodeFileIcon({ type, size, className }: IconProps & {
+    readonly type: CodeFileType;
+}): ReactNode;
+//# sourceMappingURL=CodeFileIcon.d.ts.map

package/lib/types/FileTypeIcon.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { type CodeFileType, type FileTypeProjectContext } from './code-file-types.ts';
+import type { IconProps } from './icons/props.ts';
+/** File categories with distinct 28px glyphs. */
+export type FileType = CodeFileType | 'code' | 'excel' | 'folder' | 'html' | 'image' | 'markdown' | 'other' | 'pdf' | 'ppt' | 'video' | 'word';
+/** Compatibility name for consumers that pass an already resolved category. */
+export type FileTypeKind = FileType;
+type ClassifiedFileType = Exclude<FileType, 'folder'>;
+export type { CodeFileType, FileTypeProjectContext } from './code-file-types.ts';
+/** Props for {@link FileTypeIcon}: either a path to classify or an already resolved kind. */
+export type FileTypeIconProps = IconProps & ({
+    /** File path or name to classify. */
+    readonly path: string;
+    /** Optional project-file snapshot for context-sensitive code icons such as Flutter. */
+    readonly context?: FileTypeProjectContext | undefined;
+} | {
+    /** Explicit category for callers that already resolved the file type. */
+    readonly kind: FileTypeKind;
+});
+/**
+ * Extract the final suffix from a file path without changing its case.
+ * A leading dot starts a suffix, while a missing or trailing dot returns an empty string.
+ * @param path - File path or basename using either path separator.
+ * @returns The characters after the basename's final dot.
+ */
+export declare function fileExtension(path: string): string;
+/**
+ * Classify a file path or name for file-card presentation.
+ * Matching is case-insensitive and applies code filename rules before extension rules;
+ * unknown names fall back to `other`.
+ * @param path - File path or basename using either path separator.
+ * @param context - Optional project files used by context-sensitive code mappings.
+ * @returns The file's closed presentation category.
+ */
+export declare function classifyFileType(path: string, context?: FileTypeProjectContext): ClassifiedFileType;
+/**
+ * Render a decorative file-type glyph for a path or an explicitly resolved kind.
+ * @param props - Path or kind selection, optional project context, size, and CSS class.
+ * @returns The category-colored SVG; the caller owns the accessible name and may override
+ * the color through `--dsh-file-type-icon-color`.
+ */
+export declare function FileTypeIcon(props: FileTypeIconProps): ReactNode;
+//# sourceMappingURL=FileTypeIcon.d.ts.map

package/lib/types/Menu.d.ts

@@ -26,13 +26,16 @@ export interface MenuLabel {
 export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
 /**
  * Render an anchored dropdown menu.
+ * @param props.autoFocus - focus the first item on open and enable arrow-key navigation; Escape focuses the anchor's first button.
  * @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.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.onClose - invoked on outside click or Escape.
+ * @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).
  * @param props.align - list alignment against the anchor (default 'start').
  * @param props.side - open below (`bottom`, default) or above (`top`) the anchor.
  * @param props.portal - render the list into document.body, fixed-positioned
@@ -59,8 +62,9 @@ export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
  * 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, selection, getAnchorRect, footer, className }: {
+export declare function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align, side, portal, closeOnPointerLeave, dense, compact, autoFocus, selection, getAnchorRect, footer, className }: {
     open: boolean;
+    autoFocus?: boolean;
     anchor: ReactNode;
     items: readonly MenuEntry[];
     footer?: readonly MenuEntry[];
@@ -76,6 +80,6 @@ export declare function Menu({ open, anchor, items, selectedId, selectedIds, onS
     compact?: boolean;
     selection?: 'check' | 'fill';
     getAnchorRect?: () => DOMRect | null;
-    className?: string;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 //# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1,30 @@
+/** Code and configuration categories with embedded full-color glyphs. */
+export declare const CODE_FILE_TYPES: readonly ["angular", "c", "clojure", "cmake", "cpp", "csharp", "css", "dart", "docker", "elixir", "env", "erlang", "flutter", "git", "go", "graphql", "haskell", "ini", "java", "javascript", "json", "kotlin", "lua", "makefile", "node", "objective-c", "perl", "php", "powershell", "protobuf", "python", "r", "react", "ruby", "rust", "scala", "shell", "solidity", "sql", "svelte", "swift", "toml", "typescript", "vue", "wasm", "xml", "yaml", "zig"];
+/** A code or configuration file category with its own full-color square glyph. */
+export type CodeFileType = typeof CODE_FILE_TYPES[number];
+/** Optional project files used by context-sensitive code-icon rules. */
+export interface FileTypeProjectContext {
+    /** Text content keyed by project-relative or basename path. */
+    readonly files: Readonly<Record<string, string | undefined>>;
+}
+/**
+ * Test whether a resolved file type uses the full-color code-icon set.
+ * @param type - Resolved file-type string.
+ * @returns Whether the value is a detailed code-file type.
+ */
+export declare function isCodeFileType(type: string): type is CodeFileType;
+/**
+ * Test whether an extension belonged to the established coarse LinkIcon code category.
+ * @param extension - Extension without a leading dot.
+ * @returns Whether clickable links keep the code glyph for this extension.
+ */
+export declare function isLinkCodeExtension(extension: string): boolean;
+/**
+ * Resolve the most specific code/configuration icon according to the supplied map priority.
+ * @param name - Lowercase basename.
+ * @param extension - Lowercase extension without the leading dot.
+ * @param context - Optional project-file snapshot for context-sensitive matches.
+ * @returns The detailed code type, or null when the traditional file classifier owns the path.
+ */
+export declare function classifyCodeFileType(name: string, extension: string, context?: FileTypeProjectContext): CodeFileType | null;
+//# sourceMappingURL=code-file-types.d.ts.map

package/lib/types/icons/index.d.ts

@@ -43,7 +43,8 @@ export declare const IconCloseOutline16: ({ size, className }: IconProps) => imp
 export declare const IconCloseFill14: ({ size, className }: IconProps) => import("react").JSX.Element;
 /** ic_ds_copy_outline_16 */
 export declare const IconCopyOutline16: ({ size, className }: IconProps) => import("react").JSX.Element;
-/** ic_ds_refresh_outline_16 */
+/** ic_ds_refresh_outline_16, inset 10%: the exported glyph fills its box edge
+ * to edge, one visual size above the neighbouring 16px glyphs. */
 export declare const IconRefreshOutline16: ({ size, className }: IconProps) => import("react").JSX.Element;
 /** ic_ds_refresh_outline_14 */
 export declare const IconRefreshOutline14: ({ size, className }: IconProps) => import("react").JSX.Element;
@@ -135,6 +136,10 @@ export declare const IconDataOutline16: ({ size, className }: IconProps) => impo
 export declare const IconDatabaseOutline16: ({ size, className }: IconProps) => import("react").JSX.Element;
 /** Thin-stroke clock: outlined dial with square-cut hour and minute hands. */
 export declare const IconClockOutline16: ({ size, className }: IconProps) => import("react").JSX.Element;
+/** Thin-stroke gauge: dial arc open at the bottom, filled hub, square-cut needle to the upper right.
+ * The dial center sits at y=8.75, not 8: the bottom opening leaves the glyph top-heavy, and the
+ * 0.75 drop optically centers the drawn extent in the 16 box. */
+export declare const IconGaugeOutline16: ({ size, className }: IconProps) => import("react").JSX.Element;
 /** ic_send_outline_14 (figma extract): thin-stroke upward send arrow. */
 export declare const IconSendOutline14: ({ size, className }: IconProps) => import("react").JSX.Element;
 /** ic_queue_outline_14 (figma extract): open chat bubble with two queued lines. */

package/lib/types/index.d.ts

@@ -32,12 +32,13 @@ 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 { FileTypeIcon, classifyFileType, fileExtension } from './FileTypeIcon.tsx';
+export type { CodeFileType, FileType, FileTypeIconProps, FileTypeKind, FileTypeProjectContext, } from './FileTypeIcon.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';
@@ -58,7 +59,7 @@ export { CodeBlock } from './markdown/CodeBlock.tsx';
 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 type { MarkdownCodeLabels, MarkdownFileMentions, MarkdownLabels, MarkdownPathImages } from './markdown/MarkdownText.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/markdown/CodeBlock.d.ts

@@ -14,10 +14,12 @@ export interface CodeBlockProps {
     streaming?: boolean | undefined;
     /** Extra class merged onto the wrapper (callers position; this component draws). */
     className?: string | undefined;
+    /** Show a numbered gutter without adding numbers to copied source. Defaults to false. */
+    lineNumbers?: boolean | undefined;
     /** Copy-button idle label; the owner passes localized copy (this package is cordis-free, so copy arrives via props). */
     copyLabel: string;
     /** Copy-button label during the post-copy confirmation window. */
     copiedLabel: string;
 }
-export declare function CodeBlock({ code, lang, streaming, className, copyLabel, copiedLabel }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, lang, streaming, className, lineNumbers, copyLabel, copiedLabel }: CodeBlockProps): import("react").JSX.Element;
 //# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -10,9 +10,9 @@
  * other side of the freeze boundary renders literally until the settled
  * full parse self-heals it.
  */
-import type { MarkdownFileMentions, MarkdownLabels } from './render.tsx';
+import type { MarkdownFileMentions, MarkdownLabels, MarkdownPathImages } from './render.tsx';
 import 'katex/dist/katex.min.css';
-export type { MarkdownCodeLabels, MarkdownFileMentions, MarkdownLabels } from './render.tsx';
+export type { MarkdownCodeLabels, MarkdownFileMentions, MarkdownLabels, MarkdownPathImages } from './render.tsx';
 /**
  * Render untrusted assistant-authored Markdown as semantic React elements.
  * @param props - Markdown source text preserved by the session projection;
@@ -22,18 +22,21 @@ export type { MarkdownCodeLabels, MarkdownFileMentions, MarkdownLabels } from '.
  * `labels` forwards localized fence and footnote chrome — pass a
  * reference-stable object (memoized per locale revision), because a new
  * identity discards the streaming render cache mid-message. `fileMentions`
- * links inline-code tokens its resolver recognizes as real files; this is
- * the single streaming gate — it applies to settled renders only, because a
+ * links inline-code tokens its resolver recognizes as real files, and
+ * `pathImages` rewrites image destinations that are local file paths into
+ * displayable URLs its resolver vouches for; both vocabularies are the
+ * single streaming gate — they apply to settled renders only, because a
  * streaming message's vocabulary is not final and frozen cached elements
  * must not bake in handlers that could go stale.
  * @returns A GFM document with TeX math rendered through KaTeX; raw HTML,
  * relative links, and unsafe protocols are disabled, while absolute HTTP(S)
  * images render directly.
  */
-export declare const MarkdownText: import("react").MemoExoticComponent<({ text, streaming, labels, fileMentions }: {
+export declare const MarkdownText: import("react").MemoExoticComponent<({ text, streaming, labels, fileMentions, pathImages }: {
     text: string;
     streaming?: boolean;
     labels: MarkdownLabels;
     fileMentions?: MarkdownFileMentions | undefined;
+    pathImages?: MarkdownPathImages | undefined;
 }) => import("react").JSX.Element>;
 //# sourceMappingURL=MarkdownText.d.ts.map

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

@@ -49,6 +49,23 @@ export declare function createReferenceTargets(): ReferenceTargets;
  * @param targets - Accumulator, typically shared across incremental segments.
  */
 export declare function collectReferenceTargets(nodes: readonly Md.RootContent[], targets: ReferenceTargets): void;
+/**
+ * Local-path image vocabulary for image destinations: the owner maps an
+ * authored destination that fails the remote-URL allowlist (an absolute local
+ * file path, for example) to a displayable URL it can vouch for. Absent
+ * wherever no such vocabulary exists, authored local destinations keep their
+ * documented fallback (the image's alt text). Rewritten destinations must be
+ * absolute; the renderer re-checks their protocol before emitting them.
+ */
+export interface MarkdownPathImages {
+    /**
+     * Resolve one authored image destination.
+     * @param value - The destination exactly as the markdown author wrote it.
+     * @returns A displayable absolute URL, or undefined when the destination
+     * names no displayable image — it then stays inert alt text.
+     */
+    resolve(value: string): string | undefined;
+}
 /**
  * File-mention affordance for inline code: the owner resolves an authored
  * token to the file it names, using its own vocabulary of real files — the
@@ -80,6 +97,8 @@ export interface MarkdownRenderContext {
     readonly inBlockquote?: boolean;
     /** Inline-code file mentions; absent wherever no opener vocabulary exists. */
     readonly fileMentions: MarkdownFileMentions | undefined;
+    /** Local-path image vocabulary; absent wherever no rewriting owner exists. */
+    readonly pathImages: MarkdownPathImages | undefined;
     /** Inside an anchor's children: interactive mentions must not nest there. */
     readonly inLink?: boolean;
     /** Reference targets visible to this pass. */

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.3-alpha.2",
+  "version": "0.1.5-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -22,31 +22,29 @@
     "./package.json": "./package.json"
   },
   "license": "MIT",
-  "dependencies": {
-    "@shikijs/langs": "^4.3.1",
-    "@types/mdast": "^4.0.4",
-    "anser": "^2.3.5",
+  "devDependencies": {
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "react": "^18.2.0",
     "clsx": "^2.0.0",
+    "react-dom": "^18.2.0",
+    "anser": "^2.3.5",
     "katex": "^0.16.47",
-    "mdast-util-from-markdown": "^2.0.3",
-    "mdast-util-gfm": "^3.1.0",
-    "mdast-util-math": "^3.0.0",
     "micromark-core-commonmark": "^2.0.3",
-    "micromark-extension-gfm": "^3.0.0",
-    "micromark-extension-math": "^3.1.0",
-    "micromark-factory-space": "^2.0.1",
     "micromark-util-character": "^2.1.1",
     "micromark-util-classify-character": "^2.0.1",
-    "micromark-util-sanitize-uri": "^2.0.1",
     "micromark-util-symbol": "^2.0.1",
     "micromark-util-types": "^2.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "shiki": "^4.3.1"
-  },
-  "devDependencies": {
-    "@types/react": "~18.3.1",
-    "@types/react-dom": "~18.3.0",
+    "shiki": "^4.3.1",
+    "@shikijs/langs": "^4.3.1",
+    "@types/mdast": "^4.0.4",
+    "micromark-factory-space": "^2.0.1",
+    "micromark-extension-math": "^3.1.0",
+    "mdast-util-from-markdown": "^2.0.3",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-math": "^3.0.0",
+    "micromark-extension-gfm": "^3.0.0",
+    "micromark-util-sanitize-uri": "^2.0.1",
     "@deepseek-ai/cordis": "^4.0.2"
   },
   "files": [

package/lib/types/DocumentFileIcon.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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