@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/components/foundations/StatusPill.js

@@ -1,35 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Badge } from "./Badge.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/foundations/StatusPill.tsx
-/**
-* A short state report: an indicator, then the state itself.
-*
-* This is a `Badge` with an indicator in front, not a second kind of chip, so
-* `variant`, `color`, and `size` mean here exactly what they mean there. What
-* it adds is the dot and its pulse, which several surfaces had been writing
-* out by hand.
-*
-* It reports; it does not ask. A state that needs the user to do something is
-* `AgentAttention`.
-*
-* @example
-* ```tsx
-* <StatusPill busy color="destructive" size="sm">Live</StatusPill>
-* <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
-* ```
-*/
-function StatusPill({ busy = false, className, icon, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Badge, {
-		className: cx("status-pill", className),
-		"data-busy": busy || void 0,
-		...props,
-		children: [icon ?? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "status-pill__dot"
-		}), children]
-	});
-}
-//#endregion
-export { StatusPill };

package/dist/components/general-purpose/Shell.d.ts

@@ -1,149 +0,0 @@
-import * as React from "react";
-
-//#region src/components/general-purpose/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/general-purpose/Shell.js

@@ -1,116 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/general-purpose/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/styles/agent-activity-preview-overlay.css

@@ -1,169 +0,0 @@
-/*
- * Standalone closed-shadow styles for AgentActivityPreview. The extension host
- * owns placement, top-layer behavior, containment, and pointer-event policy.
- */
-@import "./activity-header.css";
-@import "./app-icon.css";
-@import "./agent-activity-preview.css";
-
-:host {
-  all: initial;
-  color-scheme: light dark;
-  display: block;
-  color: CanvasText;
-  font-family: system-ui, sans-serif;
-
-  /*
-   * `all: initial` plus a closed shadow root means nothing inherits, so every
-   * token the imported stylesheets read has to be restated here. A token that
-   * is missing does not fall back to the page value — it resolves to nothing
-   * and the declaration is dropped, which is silent. Keep this list in step
-   * with what the imported component stylesheets actually use.
-   *
-   * These are px, not rem, and that is the point. This bundle renders in an
-   * active-tab content script, and `rem` resolves against the host page's root
-   * element — a page setting `html { font-size: 10px }` would shrink the whole
-   * preview by a third. `all: initial` does not isolate that; nothing does.
-   * A surface drawn on a page we do not control has to carry its own units.
-   */
-  --sigvelo-spacing-0-5: 2px;
-  --sigvelo-spacing-1: 4px;
-  --sigvelo-spacing-1-5: 6px;
-  --sigvelo-spacing-2: 8px;
-  --sigvelo-spacing-3: 12px;
-  --sigvelo-spacing-4: 16px;
-  --sigvelo-spacing-5: 20px;
-  --sigvelo-spacing-6: 24px;
-  --sigvelo-spacing-8: 32px;
-  --sigvelo-spacing-10: 40px;
-  --sigvelo-spacing-12: 48px;
-  --sigvelo-spacing-14: 56px;
-  --sigvelo-radius-md: 8px;
-  --sigvelo-radius-lg: 12px;
-  --sigvelo-radius-xs: 3px;
-  --sigvelo-radius-full: 9999px;
-  --sigvelo-border-style: solid;
-  --sigvelo-border-width-hairline: 0.5px;
-  --sigvelo-border-width: 1px;
-  --sigvelo-text-compact: 13px;
-  --sigvelo-text-xs: 12px;
-  --sigvelo-font-weight-normal: 400;
-  --sigvelo-font-weight-semibold: 500;
-  --sigvelo-control-height-sm: 32px;
-  --sigvelo-control-height-xl: 44px;
-  --sigvelo-control-icon-size-sm: 14px;
-  --sigvelo-control-icon-size-md: 16px;
-  --sigvelo-control-icon-size-lg: 18px;
-  --sigvelo-duration-fast: 150ms;
-  --sigvelo-motion-duration-shimmer: 2400ms;
-  --sigvelo-motion-duration-spin: 900ms;
-  --sigvelo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --sigvelo-color-surface: Canvas;
-  --sigvelo-color-surface-raised: Canvas;
-  --sigvelo-color-shadow: black;
-  --sigvelo-color-text: CanvasText;
-  --sigvelo-color-text-muted: GrayText;
-  --sigvelo-color-primary-text: LinkText;
-  --sigvelo-color-primary-bg: CanvasText;
-  --sigvelo-color-primary-text-on-bg: Canvas;
-  --sigvelo-color-warning-text: #8a4b00;
-  --sigvelo-color-neutral-bg-subtle: color-mix(in oklab, CanvasText 7%, Canvas);
-  --sigvelo-elevation-raised:
-    0 0 0 0.5px color-mix(in oklab, CanvasText 8%, transparent),
-    0 1px 2px -1px color-mix(in oklab, CanvasText 8%, transparent);
-  --sigvelo-recipe-focus-shadow: 0 0 0 2px Canvas, 0 0 0 4px Highlight;
-}
-
-:host *,
-:host *::before,
-:host *::after {
-  box-sizing: border-box;
-}
-
-.agent-activity-preview {
-  width: min(448px, 100%);
-}
-
-.agent-activity-preview__dismiss {
-  display: grid;
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
-  min-height: 32px;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  appearance: none;
-  cursor: pointer;
-}
-
-.agent-activity-preview__dismiss > svg {
-  width: 14px;
-  height: 14px;
-}
-
-.agent-activity-preview__dismiss:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px Canvas,
-    0 0 0 4px Highlight;
-}
-
-.agent-activity-preview__list {
-  max-height: min(288px, 60dvh);
-}
-
-.agent-activity-preview__trailing {
-  min-width: 16px;
-}
-
-.activity__favicon {
-  display: block;
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  background-color: Canvas;
-  object-fit: contain;
-}
-
-.sigvelo-icon--spinner {
-  animation: agent-activity-preview-spin 900ms linear infinite;
-  transform-origin: center;
-}
-
-@keyframes agent-activity-preview-spin {
-  to {
-    rotate: 1turn;
-  }
-}
-
-/* Shadow-local copy of base.css's sigvelo-text-shimmer — keyframes do not cross
-   shadow roots, so the imported activity header shimmer needs it defined here.
-   --sigvelo-motion-duration-shimmer inherits across the boundary. */
-@keyframes sigvelo-text-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :host {
-    --sigvelo-color-warning-text: #f0aa45;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sigvelo-icon--spinner {
-    animation: none;
-  }
-}
-
-@media (forced-colors: active) {
-  :host {
-    --sigvelo-color-warning-text: MarkText;
-  }
-}

package/dist/styles/agent-activity-preview.css

@@ -1,209 +0,0 @@
-.agent-activity-preview {
-  position: relative;
-  width: min(28rem, 100%);
-  min-width: 0;
-  padding: var(--sigvelo-spacing-2);
-  border-radius: var(--sigvelo-radius-lg);
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-raised);
-}
-
-.agent-activity-preview__badge {
-  position: absolute;
-  inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
-  inset-inline-end: var(--sigvelo-spacing-1);
-  display: grid;
-  place-items: center;
-  width: var(--sigvelo-control-height-sm);
-  height: var(--sigvelo-control-height-sm);
-  border-radius: var(--sigvelo-radius-full);
-  color: var(--sigvelo-color-primary-text);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-raised);
-}
-
-.agent-activity-preview__badge > svg {
-  width: var(--sigvelo-control-icon-size-md);
-  height: var(--sigvelo-control-icon-size-md);
-}
-
-.agent-activity-preview__dismiss {
-  position: absolute;
-  z-index: 1;
-  inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
-  inset-inline-end: var(--sigvelo-spacing-1);
-  border-radius: var(--sigvelo-radius-full);
-  color: var(--sigvelo-color-text-muted);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-raised);
-  opacity: 0;
-  scale: 0.92;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.agent-activity-preview:hover .agent-activity-preview__dismiss,
-.agent-activity-preview:focus-within .agent-activity-preview__dismiss,
-.agent-activity-preview__dismiss:focus-visible {
-  opacity: 1;
-  scale: 1;
-}
-
-.agent-activity-preview__dismiss:hover:not([data-disabled]) {
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-surface-raised);
-}
-
-.agent-activity-preview__row:focus-visible,
-.agent-activity-preview__file-action:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.agent-activity-preview__list {
-  display: grid;
-  gap: var(--sigvelo-spacing-0-5);
-  max-height: min(18rem, 60dvh);
-  padding: 0;
-  margin: 0;
-  overflow-y: auto;
-  list-style: none;
-}
-
-.agent-activity-preview__item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: stretch;
-  gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
-}
-
-.agent-activity-preview__item:first-child {
-  padding-inline-end: calc(var(--sigvelo-spacing-8) + var(--sigvelo-spacing-0-5));
-}
-
-.agent-activity-preview__row {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  min-height: var(--sigvelo-control-height-sm);
-  padding: var(--sigvelo-spacing-1-5);
-  border: 0;
-  border-radius: var(--sigvelo-radius-md);
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.agent-activity-preview__row:hover {
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  transform: translateY(-1px);
-}
-
-.agent-activity-preview__file-action {
-  display: grid;
-  place-items: center;
-  min-width: var(--sigvelo-control-height-sm);
-  min-height: var(--sigvelo-control-height-sm);
-  padding: var(--sigvelo-spacing-1-5);
-  border: 0;
-  border-radius: var(--sigvelo-radius-md);
-  color: var(--sigvelo-color-text-muted);
-  background: transparent;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.agent-activity-preview__file-action:hover {
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.agent-activity-preview__file-action > svg {
-  width: var(--sigvelo-control-icon-size-md);
-  height: var(--sigvelo-control-icon-size-md);
-}
-
-.agent-activity-preview__row .activity__header {
-  gap: var(--sigvelo-spacing-2);
-}
-
-.agent-activity-preview__row .activity__header-action {
-  max-width: none;
-}
-
-.agent-activity-preview__trailing {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  min-width: 1rem;
-}
-
-.agent-activity-preview__trailing > svg {
-  width: var(--sigvelo-control-icon-size-md);
-  height: var(--sigvelo-control-icon-size-md);
-}
-
-.agent-activity-preview__row[data-status="running"] .agent-activity-preview__trailing > svg,
-.agent-activity-preview__row[data-status="unviewed"] .agent-activity-preview__trailing {
-  color: var(--sigvelo-color-primary-text);
-}
-
-.agent-activity-preview__row[data-status="input-required"] .agent-activity-preview__trailing > svg {
-  color: var(--sigvelo-color-warning-text);
-}
-
-.agent-activity-preview__unviewed-dot {
-  width: var(--sigvelo-spacing-2);
-  height: var(--sigvelo-spacing-2);
-  border-radius: var(--sigvelo-radius-full);
-  background: currentColor;
-}
-
-@media (pointer: coarse) {
-  .agent-activity-preview__dismiss {
-    opacity: 1;
-    scale: 1;
-  }
-
-  .agent-activity-preview__row,
-  .agent-activity-preview__file-action {
-    min-height: var(--sigvelo-control-height-xl);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .agent-activity-preview__dismiss,
-  .agent-activity-preview__row,
-  .agent-activity-preview__file-action {
-    transition: none;
-  }
-
-  .agent-activity-preview__row:hover {
-    transform: none;
-  }
-}
-
-@media (forced-colors: active) {
-  .agent-activity-preview {
-    outline: 1px solid CanvasText;
-  }
-
-  .agent-activity-preview__badge,
-  .agent-activity-preview__dismiss,
-  .agent-activity-preview__file-action {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
-  }
-}