@slipstream-ui/ai 0.4.0 → 0.6.0

package/dist/manifests/attachment.manifest.json

@@ -5,9 +5,24 @@
   "description": "File chips for prompts and messages. `Attachment` renders one file; `AttachmentList` renders a wrapping row. Display-only: upload and file-system logic stay in the consumer.",
   "designIntent": "Show what files are part of a conversation turn (name, size, type, thumbnail, upload status) without coupling the library to any upload implementation.",
   "props": [
-    { "name": "attachment", "type": "AttachmentItem", "required": true, "description": "File descriptor: id, name, size, type, previewUrl, status." },
-    { "name": "attachments", "type": "AttachmentItem[]", "required": true, "description": "Files to display (AttachmentList)." },
-    { "name": "onRemove", "type": "(attachment) => void", "required": false, "description": "Remove callback; omit to hide remove controls." }
+    {
+      "name": "attachment",
+      "type": "AttachmentItem",
+      "required": true,
+      "description": "File descriptor: id, name, size, type, previewUrl, status."
+    },
+    {
+      "name": "attachments",
+      "type": "AttachmentItem[]",
+      "required": true,
+      "description": "Files to display (AttachmentList)."
+    },
+    {
+      "name": "onRemove",
+      "type": "(attachment) => void",
+      "required": false,
+      "description": "Remove callback; omit to hide remove controls."
+    }
   ],
   "examples": [
     {
@@ -20,14 +35,28 @@
     }
   ],
   "antiPatterns": [
-    { "title": "Do not use Attachment for drag-and-drop targets", "explanation": "The chip displays an existing item; build dropzones in the consumer and render AttachmentList once items exist." }
+    {
+      "title": "Do not use Attachment for drag-and-drop targets",
+      "explanation": "The chip displays an existing item; build dropzones in the consumer and render AttachmentList once items exist."
+    }
   ],
   "accessibility": [
-    { "feature": "Remove control", "implementation": "Icon-only remove button has an aria-label including the file name." },
-    { "feature": "Upload status", "implementation": "Uploading state is announced via role=status." },
-    { "feature": "Decorative thumbnails", "implementation": "Preview images are aria-hidden; the file name carries the meaning." }
+    {
+      "feature": "Remove control",
+      "implementation": "Icon-only remove button has an aria-label including the file name."
+    },
+    {
+      "feature": "Upload status",
+      "implementation": "Uploading state is announced via role=status."
+    },
+    {
+      "feature": "Decorative thumbnails",
+      "implementation": "Preview images are aria-hidden; the file name carries the meaning."
+    }
   ],
+  "sourceDir": "attachment",
+  "exportName": "Attachment",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/branch.manifest.json

@@ -59,7 +59,9 @@
       "implementation": "N/M indicator uses aria-live=polite."
     }
   ],
+  "sourceDir": "branch",
+  "exportName": "Branch",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/chain-thought.manifest.json

@@ -33,7 +33,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "chainthought",
   "exportName": "ChainThought"
 }

package/dist/manifests/code-block.manifest.json

@@ -44,7 +44,9 @@
       "implementation": "Icon-labeled button with aria-label that flips to Copied."
     }
   ],
+  "sourceDir": "code-block",
+  "exportName": "CodeBlock",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/command-palette.manifest.json

@@ -22,7 +22,13 @@
       "type": "Command[]",
       "required": true,
       "description": "Available commands: { id, label, section?, keywords?, shortcut? }",
-      "examples": [{ "id": "go-docs", "label": "Open documentation", "section": "Navigation" }]
+      "examples": [
+        {
+          "id": "go-docs",
+          "label": "Open documentation",
+          "section": "Navigation"
+        }
+      ]
     },
     {
       "name": "onSelect",
@@ -33,9 +39,55 @@
     {
       "name": "placeholder",
       "type": "string",
-      "defaultValue": "Type a command…",
+      "defaultValue": "Type a command.",
       "required": false,
       "description": "Input placeholder text"
+    },
+    {
+      "name": "loadCommands",
+      "type": "(query: string) => Promise<Command[]>",
+      "required": false,
+      "description": "Async command source; debounced and stale-response guarded."
+    },
+    {
+      "name": "debounceMs",
+      "type": "number",
+      "required": false,
+      "defaultValue": "200",
+      "description": "Debounce for loadCommands in ms."
+    },
+    {
+      "name": "renderCommand",
+      "type": "(command, state: { active: boolean }) => ReactNode",
+      "required": false,
+      "description": "Custom row renderer (icons, type badges)."
+    },
+    {
+      "name": "loadingText",
+      "type": "string",
+      "required": false,
+      "description": "Shown while async commands load."
+    },
+    {
+      "name": "dialogLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Command palette",
+      "description": "Accessible label for the combobox."
+    },
+    {
+      "name": "listLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Commands",
+      "description": "Accessible label for the command listbox."
+    },
+    {
+      "name": "emptyText",
+      "type": "string",
+      "required": false,
+      "defaultValue": "No matching commands.",
+      "description": "Shown when no command matches the query."
     }
   ],
   "examples": [
@@ -71,10 +123,13 @@
       "relationship": "CommandPalette switches modes/actions; PromptInput captures free-form chat text."
     }
   ],
-  "relatedComponents": ["PromptInput", "Dialog"],
+  "relatedComponents": [
+    "PromptInput",
+    "Dialog"
+  ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "command-palette",
   "exportName": "CommandPalette"
 }

package/dist/manifests/confirmation.manifest.json

@@ -137,7 +137,9 @@
       "implementation": "Status chip text announces Approved/Rejected."
     }
   ],
+  "sourceDir": "confirmation",
+  "exportName": "Confirmation",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/conversation.manifest.json

@@ -284,7 +284,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "conversation",
   "exportName": "Conversation"
 }

package/dist/manifests/inline-citation.manifest.json

@@ -40,7 +40,9 @@
       "implementation": "Card has role=tooltip linked via aria-describedby."
     }
   ],
+  "sourceDir": "inline-citation",
+  "exportName": "InlineCitation",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/message-actions.manifest.json

@@ -5,11 +5,48 @@
   "description": "Feedback toolbar for an AI response: copy to clipboard, thumbs up/down rating, and regenerate. Every action is a callback; the component holds no conversation state.",
   "designIntent": "Collect user trust signals (copy, rating, regeneration) with minimal API surface; consumers own what happens after each action.",
   "props": [
-    { "name": "content", "type": "string", "required": false, "description": "Text to copy; omit to hide the copy action." },
-    { "name": "onCopy", "type": "(content: string) => void", "required": false, "description": "Called after copy with the copied text." },
-    { "name": "onFeedback", "type": "(rating: 'up' | 'down' | undefined) => void", "required": false, "description": "Rating callback; selecting the active rating again passes undefined." },
-    { "name": "onRegenerate", "type": "() => void", "required": false, "description": "Regeneration request; omit to hide the action." },
-    { "name": "labels", "type": "{ copy?, copied?, thumbUp?, thumbDown?, regenerate? }", "required": false, "description": "Overrides for all visible labels; enables localization." }
+    {
+      "name": "content",
+      "type": "string",
+      "required": false,
+      "description": "Text to copy; omit to hide the copy action."
+    },
+    {
+      "name": "onCopy",
+      "type": "(content: string) => void",
+      "required": false,
+      "description": "Called after copy with the copied text."
+    },
+    {
+      "name": "onFeedback",
+      "type": "(rating: 'up' | 'down' | undefined) => void",
+      "required": false,
+      "description": "Rating callback; selecting the active rating again passes undefined."
+    },
+    {
+      "name": "onRegenerate",
+      "type": "() => void",
+      "required": false,
+      "description": "Regeneration request; omit to hide the action."
+    },
+    {
+      "name": "autohide",
+      "type": "'always' | 'on-hover' | 'not-last'",
+      "required": false,
+      "defaultValue": "always",
+      "enum": [
+        "always",
+        "on-hover",
+        "not-last"
+      ],
+      "description": "Controls visibility: always visible, visible on hover/focus, or hidden until hover for non-latest messages."
+    },
+    {
+      "name": "labels",
+      "type": "{ copy?, copied?, thumbUp?, thumbDown?, regenerate? }",
+      "required": false,
+      "description": "Overrides for all visible labels; enables localization."
+    }
   ],
   "examples": [
     {
@@ -22,14 +59,28 @@
     }
   ],
   "antiPatterns": [
-    { "title": "Do not place MessageActions inside the message text flow", "explanation": "Render it below the Message bubble so actions remain visually and semantically separate from content." }
+    {
+      "title": "Do not place MessageActions inside the message text flow",
+      "explanation": "Render it below the Message bubble so actions remain visually and semantically separate from content."
+    }
   ],
   "accessibility": [
-    { "feature": "Toolbar semantics", "implementation": "Root has role=toolbar with an aria-label." },
-    { "feature": "Toggle state", "implementation": "Rating buttons expose aria-pressed so screen readers announce selection." },
-    { "feature": "Icon buttons", "implementation": "All icon-only controls have accessible labels; labels are localizable." }
+    {
+      "feature": "Toolbar semantics",
+      "implementation": "Root has role=toolbar with an aria-label."
+    },
+    {
+      "feature": "Toggle state",
+      "implementation": "Rating buttons expose aria-pressed so screen readers announce selection."
+    },
+    {
+      "feature": "Icon buttons",
+      "implementation": "All icon-only controls have accessible labels; labels are localizable."
+    }
   ],
+  "sourceDir": "message-actions",
+  "exportName": "MessageActions",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/message.manifest.json

@@ -102,6 +102,18 @@
       "type": "(content: string) => void",
       "required": false,
       "description": "Enables edit-and-resubmit; called with the edited content"
+    },
+    {
+      "name": "formatTime",
+      "type": "(date: Date) => string",
+      "required": false,
+      "description": "Formats message or step timestamps. Defaults to the runtime toLocaleTimeString()."
+    },
+    {
+      "name": "locale",
+      "type": "string",
+      "required": false,
+      "description": "BCP-47 locale used by the default timestamp formatter."
     }
   ],
   "examples": [
@@ -229,7 +241,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "message",
   "exportName": "Message"
 }

package/dist/manifests/prompt-input.manifest.json

@@ -328,7 +328,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "prompt-input",
   "exportName": "PromptInput"
-}
+}

package/dist/manifests/reasoning.manifest.json

@@ -53,6 +53,24 @@
       "type": "boolean",
       "required": false,
       "description": "Shows a streaming indicator while reasoning is in progress"
+    },
+    {
+      "name": "labels",
+      "type": "{ title?: string; count?: (count: number) => string; thinking?: string; step?: (index: number) => string }",
+      "required": false,
+      "description": "Localized header, count and step labels."
+    },
+    {
+      "name": "formatTime",
+      "type": "(date: Date) => string",
+      "required": false,
+      "description": "Formats message or step timestamps. Defaults to the runtime toLocaleTimeString()."
+    },
+    {
+      "name": "locale",
+      "type": "string",
+      "required": false,
+      "description": "BCP-47 locale used by the default timestamp formatter."
     }
   ],
   "examples": [
@@ -171,7 +189,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "reasoning",
   "exportName": "Reasoning"
 }

package/dist/manifests/response.manifest.json

@@ -45,7 +45,9 @@
       "implementation": "Routed through CodeBlock with accessible copy button."
     }
   ],
+  "sourceDir": "response",
+  "exportName": "Response",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1"
+  "version": "0.6.0"
 }

package/dist/manifests/source.manifest.json

@@ -72,7 +72,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "source",
   "exportName": "Source"
-}
+}

package/dist/manifests/streaming-indicator.manifest.json

@@ -33,7 +33,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "streaming",
   "exportName": "StreamingIndicator"
 }

package/dist/manifests/suggestions.manifest.json

@@ -39,7 +39,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "suggestion",
   "exportName": "Suggestions"
-}
+}

package/dist/manifests/tool-call.manifest.json

@@ -30,6 +30,12 @@
       "type": "string",
       "required": false,
       "description": "Additional CSS classes to apply"
+    },
+    {
+      "name": "labels",
+      "type": "{ pending?: string; running?: string; completed?: string; failed?: string; arguments?: string; result?: string; error?: string }",
+      "required": false,
+      "description": "Localized status and section labels."
     }
   ],
   "examples": [
@@ -152,7 +158,7 @@
   ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "sourceDir": "tool-call",
   "exportName": "ToolCall"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slipstream-ui/ai",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/michaelmcshinsky/slipstream-ui.git",
@@ -31,24 +31,24 @@
     "prism-react-renderer": "^2.4.1",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^2.2.0",
-    "@slipstream-ui/core": "0.4.0"
+    "tailwind-merge": "^3.7.0",
+    "@slipstream-ui/core": "0.6.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.0",
-    "@types/react": "^18.2.0",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/react": "^19.0.0",
     "eslint": "^8.56.0",
-    "jest-axe": "^9.0.0",
-    "jsdom": "^24.0.0",
-    "tsup": "^8.0.0",
+    "jest-axe": "^11.0.0",
+    "jsdom": "^30.1.3",
+    "tsup": "^9.0.0",
     "typescript": "^5.3.3",
     "vitest": "^5.0.5",
     "@slipstream-ui/eslint-config": "0.0.1",
     "@slipstream-ui/tailwind-config": "0.0.1",
-    "@slipstream-ui/typescript-config": "0.0.1",
-    "@slipstream-ui/vitest-config": "0.0.1"
+    "@slipstream-ui/vitest-config": "0.0.1",
+    "@slipstream-ui/typescript-config": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/code-block/CodeBlock.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Highlight, themes } from 'prism-react-renderer';
+import { Highlight, type PrismTheme } from 'prism-react-renderer';
 import { cn } from '@slipstream-ui/core';
 
 export type CodeBlockProps = {
@@ -29,12 +29,95 @@ function useIsDark(): boolean {
   return dark;
 }
 
+/**
+ * AA-safe syntax palettes.
+ *
+ * prism-react-renderer's stock themes put comments (#999988) and constants
+ * (#36acaa) at ~2.7-2.9:1 on the code surface. Every colour below clears
+ * 4.5:1 against its background (white light / near-black dark).
+ */
+const LIGHT_CODE_THEME: PrismTheme = {
+  plain: { color: '#1f2328', backgroundColor: 'transparent' },
+  styles: [
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: '#57606a' } },
+    { types: ['punctuation', 'operator'], style: { color: '#24292f' } },
+    { types: ['namespace'], style: { color: '#6f42c1' } },
+    { types: ['tag', 'deleted', 'keyword', 'atrule', 'important'], style: { color: '#b31d28' } },
+    { types: ['attr-name', 'variable'], style: { color: '#953800' } },
+    { types: ['string', 'char', 'attr-value', 'inserted', 'regex'], style: { color: '#0a5c2f' } },
+    {
+      types: [
+        'function',
+        'class-name',
+        'number',
+        'boolean',
+        'constant',
+        'symbol',
+        'property',
+        'selector',
+        'builtin',
+        'entity',
+        'url',
+      ],
+      style: { color: '#0550ae' },
+    },
+  ],
+};
+
+const DARK_CODE_THEME: PrismTheme = {
+  plain: { color: '#e6edf3', backgroundColor: 'transparent' },
+  styles: [
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: '#8b949e' } },
+    { types: ['punctuation', 'operator'], style: { color: '#c9d1d9' } },
+    { types: ['namespace'], style: { color: '#d2a8ff' } },
+    { types: ['tag', 'deleted', 'keyword', 'atrule', 'important'], style: { color: '#ff7b72' } },
+    { types: ['attr-name', 'variable'], style: { color: '#ffa657' } },
+    { types: ['string', 'char', 'attr-value', 'inserted', 'regex'], style: { color: '#7ee787' } },
+    {
+      types: [
+        'function',
+        'class-name',
+        'number',
+        'boolean',
+        'constant',
+        'symbol',
+        'property',
+        'selector',
+        'builtin',
+        'entity',
+        'url',
+      ],
+      style: { color: '#79c0ff' },
+    },
+  ],
+};
+
 const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
   ({ code, language = 'tsx', showCopyButton = true, className, ...props }, ref) => {
     const [copied, setCopied] = React.useState(false);
     const isDark = useIsDark();
     const trimmedCode = code.replace(/\n$/, '');
 
+    // Horizontally scrollable code must be reachable by keyboard (WCAG 2.1.1).
+    // Only make it a tab stop when it actually overflows, so short snippets
+    // do not add noise to the tab order.
+    const preRef = React.useRef<HTMLPreElement>(null);
+    const [scrollable, setScrollable] = React.useState(false);
+    React.useEffect(() => {
+      const element = preRef.current;
+      if (!element) return;
+      const update = () => setScrollable(element.scrollWidth > element.clientWidth + 1);
+      update();
+      // jsdom (tests) has no ResizeObserver; window resize is the fallback.
+      if (typeof ResizeObserver === 'undefined') {
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+      }
+      const observer = new ResizeObserver(update);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [trimmedCode, language]);
+
     const handleCopy = async () => {
       try {
         await navigator.clipboard.writeText(trimmedCode);
@@ -50,8 +133,8 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       <div
         ref={ref}
         className={cn(
-          // bg-background (not muted): Prism light themes assume a white
-          // surface — on gray the comment/keyword tokens fall below AA.
+          // bg-background (not muted): the light syntax palette is tuned for
+          // a white surface; on gray the token contrast drops below AA.
           'relative group rounded-md border border-border bg-background overflow-hidden',
           className
         )}
@@ -70,10 +153,13 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
             </button>
           )}
         </div>
-        <Highlight theme={isDark ? themes.vsDark : themes.github} code={trimmedCode} language={language}>
+        <Highlight theme={isDark ? DARK_CODE_THEME : LIGHT_CODE_THEME} code={trimmedCode} language={language}>
           {({ style, tokens, getLineProps, getTokenProps }) => (
             <pre
-              className="overflow-x-auto p-4 text-xs leading-relaxed m-0"
+              ref={preRef}
+              tabIndex={scrollable ? 0 : undefined}
+              aria-label={scrollable ? `${language} code, scrollable` : undefined}
+              className="overflow-x-auto p-4 text-xs leading-relaxed m-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               style={{ ...style, background: 'transparent' }}
             >
               {tokens.map((line, i) => (