@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/components/Shell.d.ts

@@ -1,163 +0,0 @@
-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.
- *
- * Built internally for dense tools with side actions and optional panels. Use
- * for app-like work surfaces, not marketing pages or generic sections.
- *
- * Styling consumes Sigvelo layout, border, surface, spacing, and focus tokens.
- * Actions need labels because the visible affordance is usually icon-only.
- *
- * @example
- * ```tsx
- * <Shell.Root heading="Project">
- *   <Shell.ActionBar>
- *     <Shell.Action icon={<FilterIcon />} label="Filter" />
- *   </Shell.ActionBar>
- *   <Shell.Content>Map or tool content</Shell.Content>
- * </Shell.Root>
- * ```
- */
-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 action bar, collapsible panel, and content areas.
- * Useful for map applications and other interactive tools.
- *
- * @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

@@ -1,137 +0,0 @@
-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.
-*
-* Built internally for dense tools with side actions and optional panels. Use
-* for app-like work surfaces, not marketing pages or generic sections.
-*
-* Styling consumes Sigvelo layout, border, surface, spacing, and focus tokens.
-* Actions need labels because the visible affordance is usually icon-only.
-*
-* @example
-* ```tsx
-* <Shell.Root heading="Project">
-*   <Shell.ActionBar>
-*     <Shell.Action icon={<FilterIcon />} label="Filter" />
-*   </Shell.ActionBar>
-*   <Shell.Content>Map or tool content</Shell.Content>
-* </Shell.Root>
-* ```
-*/
-function ShellRoot({ className = "", heading, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: ["shell", className].filter(Boolean).join(" "),
-		...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: ["shell__action-bar", className].filter(Boolean).join(" "),
-		...props,
-		children
-	});
-}
-/**
-* An action button within the action bar.
-*/
-function ShellAction({ className = "", icon, active, label, ref, ...props }) {
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		className: [
-			"shell__action",
-			active && "shell__action--active",
-			className
-		].filter(Boolean).join(" "),
-		"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: [
-			"shell__panel",
-			open && "shell__panel--open",
-			className
-		].filter(Boolean).join(" "),
-		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: ["shell__content", className].filter(Boolean).join(" "),
-		...props,
-		children
-	});
-}
-/**
-* A shell layout component with action bar, collapsible panel, and content areas.
-* Useful for map applications and other interactive tools.
-*
-* @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/SubagentRun.d.ts

@@ -1,86 +0,0 @@
-import { Collapsible } from "./Collapsible.js";
-import { BadgeProps } from "./Badge.js";
-import { SubagentRunIndicator, SubagentRunIndicatorProps, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
-import { SubagentRunList, SubagentRunListProps } from "./SubagentRunList.js";
-import { SubagentRunSelector, SubagentRunSelectorProps } from "./SubagentRunSelector.js";
-import { SubagentRunActions, SubagentRunActionsProps, SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps } from "./SubagentRunDetails.js";
-import * as React from "react";
-
-//#region src/components/SubagentRun.d.ts
-interface SubagentRunProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
-}
-/**
- * Transport-neutral inline disclosure for one delegated agent run.
- *
- * @deprecated Retained subagent transcripts should open in an adjacent
- * `ThinkFullApp` workbench panel. Use `SubagentRunSelector` in the transcript.
- */
-declare function SubagentRun({
-  className,
-  ref,
-  ...props
-}: SubagentRunProps): React.JSX.Element;
-interface SubagentRunTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
-}
-/**
- * @deprecated Retained subagent transcripts should not expand inline. Use
- * `SubagentRunSelector` and render the child in a `ThinkFullApp` workbench panel.
- */
-declare function SubagentRunTrigger({
-  className,
-  children,
-  ref,
-  ...props
-}: SubagentRunTriggerProps): React.JSX.Element;
-interface SubagentRunHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {}
-declare function SubagentRunHeading({
-  className,
-  ref,
-  ...props
-}: SubagentRunHeadingProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
-interface SubagentRunTitleProps extends React.HTMLAttributes<HTMLSpanElement> {}
-declare function SubagentRunTitle({
-  className,
-  ref,
-  ...props
-}: SubagentRunTitleProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
-interface SubagentRunDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}
-declare function SubagentRunDescription({
-  className,
-  ref,
-  ...props
-}: SubagentRunDescriptionProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
-type SubagentRunStatusTone = "active" | "complete" | "error" | "stopped" | "warning";
-interface SubagentRunStatusProps extends Omit<BadgeProps, "color"> {
-  tone?: SubagentRunStatusTone;
-}
-/** Visible status label. A transport adapter owns any debounced live announcement. */
-declare function SubagentRunStatus({
-  className,
-  tone,
-  size,
-  ...props
-}: SubagentRunStatusProps): React.JSX.Element;
-interface SubagentRunContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
-/**
- * @deprecated Retained subagent transcripts should live in an adjacent
- * `ThinkFullApp` workbench panel, not below the selector.
- */
-declare function SubagentRunContent({
-  className,
-  children,
-  ref,
-  ...props
-}: SubagentRunContentProps): React.JSX.Element;
-//#endregion
-export { SubagentRun, SubagentRunActions, type SubagentRunActionsProps, SubagentRunContent, SubagentRunContentProps, SubagentRunDescription, SubagentRunDescriptionProps, SubagentRunHeading, SubagentRunHeadingProps, SubagentRunIndicator, type SubagentRunIndicatorProps, SubagentRunList, type SubagentRunListProps, SubagentRunMilestone, type SubagentRunMilestoneProps, SubagentRunMilestones, type SubagentRunMilestonesProps, SubagentRunProgress, type SubagentRunProgressProps, SubagentRunProps, SubagentRunSelector, type SubagentRunSelectorProps, SubagentRunStatus, SubagentRunStatusProps, SubagentRunStatusTone, SubagentRunTitle, SubagentRunTitleProps, SubagentRunTrigger, SubagentRunTriggerProps, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRun.js

@@ -1,108 +0,0 @@
-import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { Button } from "./Button.js";
-import { Badge } from "./Badge.js";
-import { NaniteMark } from "./NaniteScene.js";
-import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
-import { SubagentRunSelector } from "./SubagentRunSelector.js";
-import { SubagentRunList } from "./SubagentRunList.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/SubagentRun.tsx
-/**
-* Transport-neutral inline disclosure for one delegated agent run.
-*
-* @deprecated Retained subagent transcripts should open in an adjacent
-* `ThinkFullApp` workbench panel. Use `SubagentRunSelector` in the transcript.
-*/
-function SubagentRun({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Collapsible.Root, {
-		ref,
-		"data-slot": "subagent-run",
-		className: cx("subagent-run", className),
-		...props,
-		unstyled: true
-	});
-}
-/**
-* @deprecated Retained subagent transcripts should not expand inline. Use
-* `SubagentRunSelector` and render the child in a `ThinkFullApp` workbench panel.
-*/
-function SubagentRunTrigger({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
-		ref,
-		"data-slot": "subagent-run-trigger",
-		className: cx("subagent-run__trigger", className),
-		render: /* @__PURE__ */ jsx(Button, {
-			type: "button",
-			variant: "outline",
-			color: "neutral",
-			size: "sm"
-		}),
-		...props,
-		unstyled: true,
-		children: [/* @__PURE__ */ jsx(NaniteMark, {}), /* @__PURE__ */ jsx("span", {
-			className: "subagent-run__trigger-content",
-			children
-		})]
-	});
-}
-function SubagentRunHeading({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("subagent-run__heading", className),
-		...props
-	});
-}
-function SubagentRunTitle({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("subagent-run__title", className),
-		...props
-	});
-}
-function SubagentRunDescription({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("subagent-run__description", className),
-		...props
-	});
-}
-const STATUS_COLOR = {
-	active: "primary",
-	complete: "success",
-	error: "destructive",
-	stopped: "neutral",
-	warning: "warning"
-};
-/** Visible status label. A transport adapter owns any debounced live announcement. */
-function SubagentRunStatus({ className, tone = "active", size = "sm", ...props }) {
-	return /* @__PURE__ */ jsx(Badge, {
-		"data-slot": "subagent-run-status",
-		"data-tone": tone,
-		className: cx("subagent-run__status", className),
-		color: STATUS_COLOR[tone],
-		size,
-		...props
-	});
-}
-/**
-* @deprecated Retained subagent transcripts should live in an adjacent
-* `ThinkFullApp` workbench panel, not below the selector.
-*/
-function SubagentRunContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Collapsible.Panel, {
-		ref,
-		"data-slot": "subagent-run-content",
-		className: cx("subagent-run__content", className),
-		...props,
-		unstyled: true,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "subagent-run__content-inner",
-			children
-		})
-	});
-}
-//#endregion
-export { SubagentRun, SubagentRunActions, SubagentRunContent, SubagentRunDescription, SubagentRunHeading, SubagentRunIndicator, SubagentRunList, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress, SubagentRunSelector, SubagentRunStatus, SubagentRunTitle, SubagentRunTrigger, getSubagentRunName, getSubagentRunTooltip };

package/dist/styles/app-frame.css

@@ -1,15 +0,0 @@
-.app-frame {
-  block-size: 100%;
-  min-block-size: 0;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  overflow: hidden;
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-canvas);
-  container-type: inline-size;
-}
-
-.app-frame__body {
-  min-block-size: 0;
-  overflow: hidden;
-}

package/dist/styles/shell.css

@@ -1,122 +0,0 @@
-/* Shell Component */
-.shell {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 400px;
-  border-radius: var(--sigvelo-radius-md);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  background: var(--sigvelo-color-surface);
-  overflow: hidden;
-}
-
-.shell__header {
-  display: flex;
-  align-items: center;
-  padding: var(--sigvelo-spacing-3) 1rem;
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-}
-
-.shell__heading {
-  margin: 0;
-  font-size: 0.9375rem;
-  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: 0.25rem;
-  padding: 0.5rem;
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  border-right: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-}
-
-.shell__action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  border: none;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.shell__action:hover {
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.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: 1.25rem;
-  height: 1.25rem;
-}
-
-/* Panel */
-.shell__panel {
-  display: flex;
-  flex-direction: column;
-  width: 260px;
-  max-width: 100%;
-  background: var(--sigvelo-color-surface);
-  border-right: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  overflow: hidden;
-}
-
-.shell__panel[hidden] {
-  display: none;
-}
-
-.shell__panel-heading {
-  padding: var(--sigvelo-spacing-3) 1rem;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-color-text);
-  border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-}
-
-.shell__panel-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
-}
-
-/* Content */
-.shell__content {
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  overflow: hidden;
-}