@mcp-b/react-components 0.22.0 → 0.24.0

package/dist/components/FormattedDate.d.ts

@@ -0,0 +1,21 @@
+//#region src/components/FormattedDate.d.ts
+interface FormattedDateProps {
+  /** The date to render. */
+  date: Date;
+  /**
+   * Locale for the visible label.
+   * @default 'en-us'
+   */
+  locale?: string;
+}
+/**
+ * A `<time>` element with an ISO `datetime` and a short, UTC-stable visible
+ * label (e.g. "Jan 5, 2026"). UTC framing keeps server and client render
+ * identical regardless of the viewer's zone.
+ */
+declare function FormattedDate({
+  date,
+  locale
+}: FormattedDateProps): import("react").JSX.Element;
+//#endregion
+export { FormattedDate, FormattedDateProps };

package/dist/components/FormattedDate.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/FormattedDate.tsx
+/**
+* A `<time>` element with an ISO `datetime` and a short, UTC-stable visible
+* label (e.g. "Jan 5, 2026"). UTC framing keeps server and client render
+* identical regardless of the viewer's zone.
+*/
+function FormattedDate({ date, locale = "en-us" }) {
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: date.toISOString(),
+		children: date.toLocaleDateString(locale, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+			timeZone: "UTC"
+		})
+	});
+}
+//#endregion
+export { FormattedDate };

package/dist/components/LinkButton.d.ts

@@ -0,0 +1,46 @@
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../Button-SBIz6Lqi.js";
+import { AnchorHTMLAttributes } from "react";
+
+//#region src/components/LinkButton.d.ts
+interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Destination of the link. */
+  href: string;
+  /**
+   * The visual rendering style of the button chrome.
+   * @default 'normal'
+   */
+  variant?: ButtonVariant;
+  /**
+   * The semantic color intent of the button chrome.
+   * @default 'primary'
+   */
+  color?: ButtonColor;
+  /**
+   * The size of the button chrome.
+   * @default 'sm'
+   */
+  size?: ButtonSize;
+}
+/**
+ * A link that wears Button chrome. Renders a plain anchor composed through the
+ * {@link buttonVariants} seam, so the element stays a genuine link.
+ *
+ * `Button render={<a />}` gives the same visuals in React, but a link styled as
+ * a button still needs a component wrapper for non-React hosts: Astro templates
+ * cannot construct the React element the `render` prop expects (a `.astro` `<a />`
+ * is an Astro vnode, not a React element, and `@astrojs/react` rejects it). This
+ * component is that wrapper, so Astro can render a button-styled link by passing
+ * plain props.
+ */
+declare function LinkButton({
+  variant,
+  color,
+  size,
+  className,
+  ref,
+  ...props
+}: LinkButtonProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): import("react").JSX.Element;
+//#endregion
+export { LinkButton, LinkButtonProps };

package/dist/components/LinkButton.js

@@ -0,0 +1,28 @@
+import { buttonVariants } from "./Button.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/LinkButton.tsx
+/**
+* A link that wears Button chrome. Renders a plain anchor composed through the
+* {@link buttonVariants} seam, so the element stays a genuine link.
+*
+* `Button render={<a />}` gives the same visuals in React, but a link styled as
+* a button still needs a component wrapper for non-React hosts: Astro templates
+* cannot construct the React element the `render` prop expects (a `.astro` `<a />`
+* is an Astro vnode, not a React element, and `@astrojs/react` rejects it). This
+* component is that wrapper, so Astro can render a button-styled link by passing
+* plain props.
+*/
+function LinkButton({ variant, color, size, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		className: buttonVariants({
+			variant,
+			color,
+			size,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+export { LinkButton };

package/dist/components/ScrollArea.js

@@ -37,6 +37,7 @@ function ScrollAreaViewport({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 		ref,
 		"data-slot": "scroll-area-viewport",
+		"data-recipe": "scroll-fade-y",
 		className: classes,
 		...props
 	});

package/dist/components/Shell.d.ts

@@ -0,0 +1,149 @@
+import * as React from "react";
+
+//#region src/components/Shell.d.ts
+/**
+ * Props for the Shell.Root component.
+ */
+interface ShellRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+  /** The heading text displayed in the header */
+  heading?: string;
+}
+/**
+ * Props for the Shell.ActionBar component.
+ */
+interface ShellActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Shell.Action component.
+ */
+interface ShellActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Additional CSS class names */
+  className?: string;
+  /** Icon to display */
+  icon?: React.ReactNode;
+  /** Whether this action is currently active */
+  active?: boolean;
+  /** Accessible label for the action */
+  label?: string;
+}
+/**
+ * Props for the Shell.Panel component.
+ */
+interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+  /** The panel heading */
+  heading?: string;
+  /** Whether the panel is visible */
+  open?: boolean;
+}
+/**
+ * Props for the Shell.Content component.
+ */
+interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Root container for the shell layout.
+ * Provides a structured layout with optional header, action bar, panel, and content areas.
+ */
+declare function ShellRoot({
+  className,
+  heading,
+  children,
+  ref,
+  ...props
+}: ShellRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for action buttons that toggle panels.
+ * Typically placed on the left side of the shell.
+ */
+declare function ShellActionBar({
+  className,
+  children,
+  ref,
+  ...props
+}: ShellActionBarProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * An action button within the action bar.
+ */
+declare function ShellAction({
+  className,
+  icon,
+  active,
+  label,
+  ref,
+  ...props
+}: ShellActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * A collapsible panel that slides in from the side.
+ */
+declare function ShellPanel({
+  className,
+  heading,
+  open,
+  children,
+  ref,
+  ...props
+}: ShellPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The main content area of the shell.
+ */
+declare function ShellContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ShellContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A shell layout component with an icon action bar, a collapsible side panel,
+ * and a content canvas. Useful for map applications and other interactive
+ * tools where a full chat or sidebar chrome (see ResponsiveSidebarShell) is
+ * too heavy.
+ *
+ * @example
+ * ```tsx
+ * const [filterOpen, setFilterOpen] = useState(false);
+ *
+ * <Shell.Root heading="My Map Application">
+ *   <Shell.ActionBar>
+ *     <Shell.Action
+ *       icon={<FilterIcon />}
+ *       active={filterOpen}
+ *       onClick={() => setFilterOpen(!filterOpen)}
+ *       label="Filter"
+ *     />
+ *   </Shell.ActionBar>
+ *   <Shell.Panel heading="Filter" open={filterOpen}>
+ *     <p>Filter controls here</p>
+ *   </Shell.Panel>
+ *   <Shell.Content>
+ *     <div id="map" />
+ *   </Shell.Content>
+ * </Shell.Root>
+ * ```
+ */
+declare const Shell: {
+  Root: typeof ShellRoot;
+  ActionBar: typeof ShellActionBar;
+  Action: typeof ShellAction;
+  Panel: typeof ShellPanel;
+  Content: typeof ShellContent;
+};
+//#endregion
+export { Shell, ShellActionBarProps, ShellActionProps, ShellContentProps, ShellPanelProps, ShellRootProps };

package/dist/components/Shell.js

@@ -0,0 +1,116 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Shell.tsx
+/**
+* Root container for the shell layout.
+* Provides a structured layout with optional header, action bar, panel, and content areas.
+*/
+function ShellRoot({ className, heading, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("shell", className),
+		...props,
+		children: [heading && /* @__PURE__ */ jsx("header", {
+			className: "shell__header",
+			children: /* @__PURE__ */ jsx("h3", {
+				className: "shell__heading",
+				children: heading
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shell__body",
+			children
+		})]
+	});
+}
+/**
+* Container for action buttons that toggle panels.
+* Typically placed on the left side of the shell.
+*/
+function ShellActionBar({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("shell__action-bar", className),
+		...props,
+		children
+	});
+}
+/**
+* An action button within the action bar.
+*/
+function ShellAction({ className, icon, active, label, ref, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		className: cx("shell__action", active && "shell__action--active", className),
+		"aria-label": label,
+		"aria-pressed": active,
+		...props,
+		children: icon
+	});
+}
+/**
+* A collapsible panel that slides in from the side.
+*/
+function ShellPanel({ className, heading, open = false, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("shell__panel", open && "shell__panel--open", className),
+		hidden: !open,
+		...props,
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			className: "shell__panel-heading",
+			children: heading
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shell__panel-content",
+			children
+		})]
+	});
+}
+/**
+* The main content area of the shell.
+*/
+function ShellContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("shell__content", className),
+		...props,
+		children
+	});
+}
+/**
+* A shell layout component with an icon action bar, a collapsible side panel,
+* and a content canvas. Useful for map applications and other interactive
+* tools where a full chat or sidebar chrome (see ResponsiveSidebarShell) is
+* too heavy.
+*
+* @example
+* ```tsx
+* const [filterOpen, setFilterOpen] = useState(false);
+*
+* <Shell.Root heading="My Map Application">
+*   <Shell.ActionBar>
+*     <Shell.Action
+*       icon={<FilterIcon />}
+*       active={filterOpen}
+*       onClick={() => setFilterOpen(!filterOpen)}
+*       label="Filter"
+*     />
+*   </Shell.ActionBar>
+*   <Shell.Panel heading="Filter" open={filterOpen}>
+*     <p>Filter controls here</p>
+*   </Shell.Panel>
+*   <Shell.Content>
+*     <div id="map" />
+*   </Shell.Content>
+* </Shell.Root>
+* ```
+*/
+const Shell = {
+	Root: ShellRoot,
+	ActionBar: ShellActionBar,
+	Action: ShellAction,
+	Panel: ShellPanel,
+	Content: ShellContent
+};
+//#endregion
+export { Shell };

package/dist/components/ThinkThreadPicker.js

@@ -188,7 +188,6 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, clas
 					className: "think-thread-picker__scroll",
 					children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 						className: "think-thread-picker__viewport",
-						"data-recipe": "scroll-fade-y",
 						"aria-label": "Thread list",
 						children: visibleThreads.length ? /* @__PURE__ */ jsx("ul", {
 							className: "think-thread-picker__list",

package/dist/styles/index.css

@@ -65,6 +65,7 @@
 @import "./search-field.css" layer(components);
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
+@import "./shell.css" layer(components);
 @import "./slider.css" layer(components);
 @import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);

package/dist/styles/message-scroller.css

@@ -24,7 +24,11 @@
 }
 
 .message-scroller__viewport[data-scrollable~="end"] {
-  --sigvelo-scroll-fade-end: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
+  --sigvelo-scroll-fade-end: var(--message-scroller-fade-size);
+}
+
+.message-scroller__viewport[data-scrollable~="start"] {
+  --sigvelo-scroll-fade-start: var(--message-scroller-fade-size);
 }
 
 .message-scroller__content {

package/dist/styles/recipes.css

@@ -166,12 +166,19 @@
   color: var(--sigvelo-color-text);
 }
 
-/* Reveal scrollability by fading the top/bottom edges. Owns only the mask
-   structure; each scroller drives --sigvelo-scroll-fade-start/end (default 0px)
-   from its own overflow signal. */
+/* Reveal vertical scrollability by fading the top/bottom edges. Base UI
+   ScrollArea supplies live overflow distances; other scrollers can override
+   --sigvelo-scroll-fade-start/end from their own state. */
 :where([data-recipe~="scroll-fade-y"]) {
-  --sigvelo-scroll-fade-start: 0px;
-  --sigvelo-scroll-fade-end: 0px;
+  --sigvelo-scroll-fade-size: min(12%, 2.5rem);
+  --sigvelo-scroll-fade-start: min(
+    var(--sigvelo-scroll-fade-size),
+    var(--scroll-area-overflow-y-start, 0px)
+  );
+  --sigvelo-scroll-fade-end: min(
+    var(--sigvelo-scroll-fade-size),
+    var(--scroll-area-overflow-y-end, 0px)
+  );
   -webkit-mask-image: linear-gradient(
     to bottom,
     transparent 0,

package/dist/styles/shell.css

@@ -0,0 +1,122 @@
+/* Shell Component */
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 25rem;
+  border-radius: var(--sigvelo-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: var(--sigvelo-color-surface-raised);
+  overflow: hidden;
+}
+
+.shell__header {
+  display: flex;
+  align-items: center;
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
+  background: var(--sigvelo-color-surface-sunken);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.shell__heading {
+  margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-text);
+}
+
+.shell__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+/* Action Bar */
+.shell__action-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-2);
+  background: var(--sigvelo-color-surface-sunken);
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.shell__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sigvelo-spacing-10);
+  height: var(--sigvelo-spacing-10);
+  padding: 0;
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.shell__action:hover {
+  background: var(--sigvelo-color-surface-sunken);
+  color: var(--sigvelo-color-text);
+}
+
+.shell__action--active {
+  background: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.shell__action--active:hover {
+  background: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.shell__action svg {
+  width: var(--sigvelo-spacing-5);
+  height: var(--sigvelo-spacing-5);
+}
+
+/* Panel */
+.shell__panel {
+  display: flex;
+  flex-direction: column;
+  width: 16.25rem;
+  max-width: 100%;
+  background: var(--sigvelo-color-surface-raised);
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  overflow: hidden;
+}
+
+.shell__panel[hidden] {
+  display: none;
+}
+
+.shell__panel-heading {
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-bold);
+  color: var(--sigvelo-color-text);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.shell__panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sigvelo-spacing-4);
+}
+
+/* Content */
+.shell__content {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
+}

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

@@ -91,16 +91,6 @@
 }
 
 .think-thread-picker__viewport {
-  --think-thread-picker-fade-size: min(12%, 2.5rem);
-  --sigvelo-scroll-fade-start: min(
-    var(--think-thread-picker-fade-size),
-    var(--scroll-area-overflow-y-start, 0px)
-  );
-  --sigvelo-scroll-fade-end: min(
-    var(--think-thread-picker-fade-size),
-    var(--scroll-area-overflow-y-end, 0px)
-  );
-
   padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;

package/dist/styles/tokens.css

@@ -1 +1,7 @@
 @import "@mcp-b/design-tokens";
+
+/* Opt-in accent and design-language presets, inert until data-preset or
+   data-style is set on the root. Imported after the main tokens so their
+   equal-specificity overrides win by order. */
+@import "@mcp-b/design-tokens/color-presets";
+@import "@mcp-b/design-tokens/style-presets";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.22.0",
+  "version": "0.24.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": {
@@ -57,7 +57,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.22.0"
+    "@mcp-b/design-tokens": "0.24.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",