@mcp-b/react-components 0.14.1 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -40,54 +40,60 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.6.0",
-    "@cloudflare/codemode": "^0.4.2",
-    "@cloudflare/workers-types": "^4.20260702.1",
+    "@cloudflare/codemode": "^0.4.3",
+    "@cloudflare/workers-types": "^5.20260715.1",
     "@rrweb/replay": "^2.1.0",
-    "@shadcn/react": "^0.2.0",
+    "@shadcn/react": "^0.2.1",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
+    "agent-skills-ts-sdk": "^2.4.1",
     "anser": "^2.3.5",
-    "cloudflare": "^6.5.0",
-    "lucide-react": "^1.23.0",
-    "shiki": "^3.23.0",
+    "cloudflare": "^7.0.0",
+    "lucide-react": "^1.24.0",
+    "react-icons": "^5.7.0",
+    "rehype-slug": "^6.0.0",
+    "shiki": "^4.3.1",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.14.1"
+    "unist-util-visit": "^5.1.0",
+    "yet-another-react-lightbox": "^3.32.1",
+    "@mcp-b/design-tokens": "0.16.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",
     "@cloudflare/shell": "^0.4.1",
-    "@cloudflare/think": "^0.12.1",
-    "@cloudflare/voice": "^0.3.3",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-vitest": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
-    "@tanstack/react-form": "^1.33.0",
-    "@types/node": "^24",
+    "@cloudflare/think": "^0.13.0",
+    "@cloudflare/voice": "^0.3.4",
+    "@storybook/addon-a11y": "^10.5.0",
+    "@storybook/addon-docs": "^10.5.0",
+    "@storybook/addon-vitest": "^10.5.0",
+    "@storybook/react-vite": "^10.5.0",
+    "@tanstack/react-form": "^1.33.2",
+    "@types/hast": "^3.0.4",
+    "@types/node": "^26",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser-playwright": "^4.1.9",
-    "@vitest/coverage-v8": "^4.1.9",
-    "@vitest/mocker": "^4.1.9",
-    "agents": "^0.17.3",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/mocker": "^4.1.10",
+    "agents": "^0.17.4",
     "ai": "^6.0.220",
     "playwright": "^1.61.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.0",
     "typescript": "^6.0.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.3",
-    "vite-plus": "0.2.3",
-    "vitest": "^4.1.9"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "@ai-sdk/react": "^3.0.194",
+    "@ai-sdk/react": "^3.0.204",
     "@cloudflare/shell": "^0.4.1",
-    "@cloudflare/think": "^0.12.1",
-    "@cloudflare/voice": "^0.3.3",
-    "agents": "^0.17.3",
+    "@cloudflare/think": "^0.13.0",
+    "@cloudflare/voice": "^0.3.4",
+    "agents": "^0.17.4",
     "ai": "^6.0.182",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/dist/icons-Ba9THQKz.js

@@ -1,64 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, Copy, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Image, Info, Link2, LoaderCircle, Maximize2, Mic, Minus, Monitor, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Terminal, TriangleAlert, Wrench, X } from "lucide-react";
-//#region src/components/_internal/icons.tsx
-function icon(Component) {
-	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {
-		return /* @__PURE__ */ jsx(Component, {
-			size,
-			strokeWidth,
-			"aria-hidden": "true",
-			focusable: "false",
-			...props
-		});
-	};
-}
-const ChevronRightIcon = icon(ChevronRight);
-const ChevronDownIcon = icon(ChevronDown);
-const ChevronLeftIcon = icon(ChevronLeft);
-const CheckIcon = icon(Check);
-const XIcon = icon(X);
-const PencilIcon = icon(Pencil);
-const CopyIcon = icon(Copy);
-const EyeIcon = icon(Eye);
-const EyeOffIcon = icon(EyeOff);
-const FolderIcon = icon(Folder);
-const FolderOpenIcon = icon(FolderOpen);
-const FileIcon = icon(File);
-const PaperclipIcon = icon(Paperclip);
-const MicrophoneIcon = icon(Mic);
-const StopIcon = icon(CircleStop);
-const PlusIcon = icon(Plus);
-const MinusIcon = icon(Minus);
-const PlayIcon = icon(Play);
-const PauseIcon = icon(Pause);
-const SquareIcon = icon(Square);
-const ArrowLeftIcon = icon(ArrowLeft);
-const ArrowRightIcon = icon(ArrowRight);
-const ArrowDownIcon = icon(ArrowDown);
-const ArrowUpIcon = icon(ArrowUp);
-const DownloadIcon = icon(Download);
-const RefreshIcon = icon(RefreshCw);
-const DotIcon = icon(Dot);
-const EllipsisIcon = icon(Ellipsis);
-function SpinnerIcon({ className, size = 16, strokeWidth = 1.75, ...props }) {
-	return /* @__PURE__ */ jsx(LoaderCircle, {
-		size,
-		strokeWidth,
-		"aria-hidden": "true",
-		focusable: "false",
-		className: ["sigvelo-icon--spinner", className].filter(Boolean).join(" "),
-		...props
-	});
-}
-const SearchIcon = icon(Search);
-const SidebarIcon = icon(PanelLeft);
-const TerminalIcon = icon(Terminal);
-const LinkIcon = icon(Link2);
-const WarningIcon = icon(TriangleAlert);
-const WrenchIcon = icon(Wrench);
-const InfoIcon = icon(Info);
-const ImageIcon = icon(Image);
-const MonitorIcon = icon(Monitor);
-const MaximizeIcon = icon(Maximize2);
-//#endregion
-export { RefreshIcon as A, MinusIcon as C, PencilIcon as D, PauseIcon as E, StopIcon as F, TerminalIcon as I, WarningIcon as L, SidebarIcon as M, SpinnerIcon as N, PlayIcon as O, SquareIcon as P, WrenchIcon as R, MicrophoneIcon as S, PaperclipIcon as T, FolderOpenIcon as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SearchIcon as j, PlusIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, MonitorIcon as w, MaximizeIcon as x, InfoIcon as y, XIcon as z };

package/dist/styles/think-resize-handle.css

@@ -1,33 +0,0 @@
-/* Shared implementation detail for the resizable Think shell separators. */
-.think-resize-handle {
-  position: absolute;
-  inset-block: 0;
-  inline-size: var(--sigvelo-spacing-2-5);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: col-resize;
-  touch-action: pan-y;
-  appearance: none;
-}
-
-.think-resize-handle::before {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 50%;
-  inline-size: 1px;
-  transform: translateX(-50%);
-  background: transparent;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.think-resize-handle:hover::before,
-.think-resize-handle:focus-visible::before {
-  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
-}
-
-.think-resize-handle:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: -2px;
-}

package/dist/styles/think-thread-shell.css

@@ -1,219 +0,0 @@
-.think-thread-shell {
-  container: think-thread-shell / inline-size;
-  block-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 0;
-}
-
-.think-thread-shell__frame {
-  --think-thread-mobile-sidebar-w: min(80cqi, 22rem);
-
-  position: relative;
-  isolation: isolate;
-  block-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 0;
-  display: grid;
-  grid-template-columns: var(--think-thread-sidebar-w, 16rem) minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-  background: var(--sigvelo-color-canvas);
-  color: var(--sigvelo-color-text);
-  font-family: inherit;
-  transition: grid-template-columns var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
-}
-
-.think-thread-shell__sidebar,
-.think-thread-shell__main {
-  min-inline-size: 0;
-  min-block-size: 0;
-  overflow: hidden;
-}
-
-.think-thread-shell__sidebar {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.think-thread-shell__main {
-  grid-column: 2;
-  grid-row: 1;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr);
-}
-
-.think-thread-shell__peek {
-  display: none;
-}
-
-.think-thread-shell__toolbar {
-  position: absolute;
-  inset-block-start: calc(0.4375rem + env(safe-area-inset-top, 0px));
-  inset-inline-start: calc(0.5rem + env(safe-area-inset-left, 0px));
-  z-index: 30;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-
-.think-thread-shell__panel-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-0-5);
-  padding: var(--sigvelo-spacing-0-5);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 58%, transparent);
-  border-radius: 0.625rem;
-  background: color-mix(
-    in srgb,
-    color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-primary-bg-subtle) 18%) 72%,
-    var(--sigvelo-color-surface)
-  );
-  pointer-events: auto;
-}
-
-.think-thread-shell__panel-toggle button {
-  min-block-size: 1.5rem;
-  min-inline-size: 1.625rem;
-  padding: 0.1875rem;
-  border: 0;
-  border-radius: 0.5rem;
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.think-thread-shell__panel-toggle button svg {
-  display: block;
-}
-
-.think-thread-shell__panel-toggle button:hover,
-.think-thread-shell__panel-toggle button[data-selected="true"] {
-  background: color-mix(
-    in srgb,
-    var(--sigvelo-color-primary-bg-subtle) 78%,
-    var(--sigvelo-color-surface)
-  );
-  color: var(--sigvelo-color-primary-text);
-}
-
-.think-thread-shell__panel-toggle button:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
-}
-
-.think-thread-shell__resizer {
-  z-index: 25;
-  inset-inline-start: var(--think-thread-sidebar-w, 16rem);
-  margin-inline-start: -0.3125rem;
-}
-
-body.is-resizing-think-thread-shell .think-thread-shell__resizer::before {
-  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
-}
-
-body.is-resizing-think-thread-shell {
-  cursor: col-resize;
-  user-select: none;
-}
-
-body.is-resizing-think-thread-shell .think-thread-shell__frame {
-  transition: none;
-}
-
-.think-thread-shell__frame[data-sidebar-open="false"] {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__sidebar {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  transform: translateX(-100%);
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__main {
-  grid-column: 1;
-}
-
-.think-thread-shell__frame[data-sidebar-open="true"] .think-thread-picker__header {
-  padding-inline-start: calc(4.25rem + env(safe-area-inset-left, 0px));
-}
-
-@container think-thread-shell (inline-size <= 56rem) {
-  .think-thread-shell__frame {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .think-thread-shell__sidebar,
-  .think-thread-shell__main {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .think-thread-shell__sidebar {
-    z-index: 20;
-    inline-size: var(--think-thread-mobile-sidebar-w);
-    max-inline-size: calc(100cqi - 4rem);
-    transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
-  }
-
-  .think-thread-shell__resizer {
-    display: none;
-  }
-
-  .think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__sidebar {
-    visibility: hidden;
-    transform: translateX(-100%);
-  }
-
-  .think-thread-shell__main {
-    transition:
-      transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-      filter var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
-  }
-
-  .think-thread-shell__frame[data-sidebar-open="true"] .think-thread-shell__main {
-    transform: translateX(var(--think-thread-mobile-sidebar-w));
-    filter: brightness(0.86) saturate(0.92);
-    border-start-start-radius: 1.5rem;
-    border-end-start-radius: 1.5rem;
-    box-shadow: var(--sigvelo-shadow-lg);
-    pointer-events: none;
-  }
-
-  .think-thread-shell__frame[data-sidebar-open="true"] .think-thread-shell__peek {
-    position: absolute;
-    inset-block: 0;
-    inset-inline: var(--think-thread-mobile-sidebar-w) 0;
-    z-index: 22;
-    display: block;
-    padding: 0;
-    background: transparent;
-  }
-
-  .think-thread-shell__peek:hover {
-    background: transparent;
-  }
-
-  .think-thread-shell__peek:focus-visible {
-    outline: 2px solid var(--sigvelo-color-focus);
-    outline-offset: -0.25rem;
-    border-start-start-radius: 1.5rem;
-    border-end-start-radius: 1.5rem;
-  }
-
-  .think-thread-picker {
-    inline-size: 100%;
-    border-inline-end: 0;
-    box-shadow: var(--sigvelo-shadow-lg);
-  }
-}
-
-@media (forced-colors: active) {
-  .think-thread-shell__panel-toggle {
-    border-color: canvastext;
-    background: canvas;
-  }
-}