@mcp-b/react-components 0.29.0 → 0.30.1

package/dist/components/{ActionGuide.js → general-purpose/ActionGuide.js}

@@ -1,8 +1,8 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Button } from "../foundations/Button.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ActionGuide.tsx
+//#region src/components/general-purpose/ActionGuide.tsx
 /**
 * App-agnostic guide hydrated from product-owned sections and actions.
 *

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+//#region src/components/general-purpose/AppFrame.d.ts
+declare function Root({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Body({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/** Full-height application frame with a fixed chrome row and contained work surface. */
+declare const AppFrame: {
+  Root: typeof Root;
+  Body: typeof Body;
+};
+//#endregion
+export { AppFrame };

package/dist/components/general-purpose/AppFrame.js

@@ -0,0 +1,25 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/general-purpose/AppFrame.tsx
+function Root({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("app-frame", className),
+		...props
+	});
+}
+function Body({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("app-frame__body", className),
+		...props
+	});
+}
+/** Full-height application frame with a fixed chrome row and contained work surface. */
+const AppFrame = {
+	Root,
+	Body
+};
+//#endregion
+export { AppFrame };

package/dist/components/{AppTopBar.d.ts → general-purpose/AppTopBar.d.ts}

@@ -1,8 +1,8 @@
-import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps } from "./Toolbar.js";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps } from "../foundations/Toolbar.js";
 import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
 
-//#region src/components/AppTopBar.d.ts
+//#region src/components/general-purpose/AppTopBar.d.ts
 interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar.Root> {
   /** Accessible name describing the controls in this application bar. */
   "aria-label": string;

package/dist/components/{AppTopBar.js → general-purpose/AppTopBar.js}

@@ -1,11 +1,11 @@
-import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
-import { buttonVariants } from "./Button.js";
-import { Tooltip } from "./Tooltip.js";
-import { Toolbar } from "./Toolbar.js";
+import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
+import { buttonVariants } from "../foundations/Button.js";
+import { Tooltip } from "../foundations/Tooltip.js";
+import { Toolbar } from "../foundations/Toolbar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/AppTopBar.tsx
+//#region src/components/general-purpose/AppTopBar.tsx
 /**
 * Stable application-level toolbar with composable leading, title, and trailing
 * slots. Descendant buttons share Base UI's roving focus and tooltip provider.

package/dist/components/{Commit.d.ts → general-purpose/Commit.d.ts}

@@ -1,8 +1,8 @@
-import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
-import { t as CopyButtonProps } from "../copy-button-EBv_B9F6.js";
+import { t as CopyButtonProps } from "../../copy-button-C0JyjClr.js";
+import { Collapsible } from "../foundations/Collapsible.js";
 import * as React from "react";
 
-//#region src/components/Commit.d.ts
+//#region src/components/general-purpose/Commit.d.ts
 type CommitFileStatusValue = "added" | "modified" | "deleted" | "renamed";
 interface CommitProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {}
 /**
@@ -210,7 +210,6 @@ declare function CommitFileIcon({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 interface CommitFilePathProps extends React.HTMLAttributes<HTMLSpanElement> {}
-interface CommitFileInfoProps extends React.HTMLAttributes<HTMLSpanElement> {}
 declare function CommitFilePath({
   className,
   children,
@@ -219,7 +218,6 @@ declare function CommitFilePath({
 }: CommitFilePathProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
-declare const CommitFileInfo: typeof CommitFilePath;
 interface CommitFileAdditionsProps extends React.HTMLAttributes<HTMLSpanElement> {
   count: number;
 }
@@ -234,10 +232,7 @@ declare function CommitFileAdditions({
 interface CommitFileDeletionsProps extends React.HTMLAttributes<HTMLSpanElement> {
   count: number;
 }
-interface CommitFileChangesProps extends React.HTMLAttributes<HTMLSpanElement> {
-  additions?: number;
-  deletions?: number;
-}
+interface CommitFileChangesProps extends React.HTMLAttributes<HTMLSpanElement> {}
 declare function CommitFileDeletions({
   className,
   count,
@@ -248,12 +243,10 @@ declare function CommitFileDeletions({
 }): React.JSX.Element | null;
 declare function CommitFileChanges({
   className,
-  additions,
-  deletions,
   ref,
   ...props
 }: CommitFileChangesProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { Commit, CommitActions, CommitActionsProps, CommitAuthor, CommitAuthorAvatar, CommitAuthorAvatarProps, CommitAuthorProps, CommitContent, CommitContentProps, CommitCopyButton, CommitCopyButtonProps, CommitFile, CommitFileAdditions, CommitFileAdditionsProps, CommitFileChanges, CommitFileChangesProps, CommitFileDeletions, CommitFileDeletionsProps, CommitFileIcon, CommitFileIconProps, CommitFileInfo, CommitFileInfoProps, CommitFilePath, CommitFilePathProps, CommitFileProps, CommitFileStatus, CommitFileStatusProps, CommitFileStatusValue, CommitFiles, CommitFilesProps, CommitHash, CommitHashProps, CommitHeader, CommitHeaderProps, CommitInfo, CommitInfoProps, CommitMessage, CommitMessageProps, CommitMetadata, CommitMetadataProps, CommitProps, CommitSeparator, CommitSeparatorProps, CommitTimestamp, CommitTimestampProps };
+export { Commit, CommitActions, CommitActionsProps, CommitAuthor, CommitAuthorAvatar, CommitAuthorAvatarProps, CommitAuthorProps, CommitContent, CommitContentProps, CommitCopyButton, CommitCopyButtonProps, CommitFile, CommitFileAdditions, CommitFileAdditionsProps, CommitFileChanges, CommitFileChangesProps, CommitFileDeletions, CommitFileDeletionsProps, CommitFileIcon, CommitFileIconProps, CommitFilePath, CommitFilePathProps, CommitFileProps, CommitFileStatus, CommitFileStatusProps, CommitFileStatusValue, CommitFiles, CommitFilesProps, CommitHash, CommitHashProps, CommitHeader, CommitHeaderProps, CommitInfo, CommitInfoProps, CommitMessage, CommitMessageProps, CommitMetadata, CommitMetadataProps, CommitProps, CommitSeparator, CommitSeparatorProps, CommitTimestamp, CommitTimestampProps };

package/dist/components/{Commit.js → general-purpose/Commit.js}

@@ -1,12 +1,12 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Collapsible } from "./Collapsible.js";
-import { C as FileIcon, m as ChevronRightIcon } from "../icons-B4mGvCvc.js";
-import { Avatar } from "./Avatar.js";
-import { t as CopyButton } from "../copy-button-7ttJAorN.js";
-import { Badge } from "./Badge.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Collapsible } from "../foundations/Collapsible.js";
+import { C as FileIcon, m as ChevronRightIcon } from "../../icons-B4mGvCvc.js";
+import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { Badge } from "../foundations/Badge.js";
+import { Avatar } from "../foundations/Avatar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Commit.tsx
+//#region src/components/general-purpose/Commit.tsx
 const FILE_STATUS_COLOR = {
 	added: "success",
 	modified: "warning",
@@ -224,7 +224,6 @@ function CommitFilePath({ className, children, ref, ...props }) {
 		children
 	});
 }
-const CommitFileInfo = CommitFilePath;
 function CommitFileAdditions({ className, count, ref, ...props }) {
 	if (count <= 0) return null;
 	return /* @__PURE__ */ jsxs("span", {
@@ -245,12 +244,11 @@ function CommitFileDeletions({ className, count, ref, ...props }) {
 		children: ["-", count]
 	});
 }
-function CommitFileChanges({ className, additions = 0, deletions = 0, ref, ...props }) {
-	return /* @__PURE__ */ jsxs("span", {
+function CommitFileChanges({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
 		ref,
 		className: cx("commit__file-changes", className),
-		...props,
-		children: [/* @__PURE__ */ jsx(CommitFileAdditions, { count: additions }), /* @__PURE__ */ jsx(CommitFileDeletions, { count: deletions })]
+		...props
 	});
 }
 function formatRelative(date) {
@@ -268,4 +266,4 @@ function formatRelative(date) {
 	return `${Math.round(diffMo / 12)}y ago`;
 }
 //#endregion
-export { Commit, CommitActions, CommitAuthor, CommitAuthorAvatar, CommitContent, CommitCopyButton, CommitFile, CommitFileAdditions, CommitFileChanges, CommitFileDeletions, CommitFileIcon, CommitFileInfo, CommitFilePath, CommitFileStatus, CommitFiles, CommitHash, CommitHeader, CommitInfo, CommitMessage, CommitMetadata, CommitSeparator, CommitTimestamp };
+export { Commit, CommitActions, CommitAuthor, CommitAuthorAvatar, CommitContent, CommitCopyButton, CommitFile, CommitFileAdditions, CommitFileChanges, CommitFileDeletions, CommitFileIcon, CommitFilePath, CommitFileStatus, CommitFiles, CommitHash, CommitHeader, CommitInfo, CommitMessage, CommitMetadata, CommitSeparator, CommitTimestamp };

package/dist/components/{EnvironmentVariables.d.ts → general-purpose/EnvironmentVariables.d.ts}

@@ -1,7 +1,7 @@
-import { t as CopyButtonProps } from "../copy-button-EBv_B9F6.js";
+import { t as CopyButtonProps } from "../../copy-button-C0JyjClr.js";
 import * as React from "react";
 
-//#region src/components/EnvironmentVariables.d.ts
+//#region src/components/general-purpose/EnvironmentVariables.d.ts
 interface EnvironmentVariablesProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Controlled visibility for all variable values. */
   showValues?: boolean;
@@ -144,13 +144,11 @@ declare function EnvironmentVariableValue({
 type EnvironmentVariableCopyFormat = "name" | "value" | "export";
 interface EnvironmentVariableCopyButtonProps extends Omit<CopyButtonProps, "label" | "stopPropagation" | "text"> {
   format?: EnvironmentVariableCopyFormat;
-  copyFormat?: EnvironmentVariableCopyFormat;
   label?: string;
 }
 declare function EnvironmentVariableCopyButton({
   className,
   format,
-  copyFormat,
   label,
   onClick,
   onCopy,

package/dist/components/{EnvironmentVariables.js → general-purpose/EnvironmentVariables.js}

@@ -1,11 +1,11 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { S as EyeOffIcon, x as EyeIcon } from "../icons-B4mGvCvc.js";
-import { t as CopyButton } from "../copy-button-7ttJAorN.js";
-import { Badge } from "./Badge.js";
-import { Switch } from "./Switch.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { S as EyeOffIcon, x as EyeIcon } from "../../icons-B4mGvCvc.js";
+import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { Badge } from "../foundations/Badge.js";
+import { Switch } from "../foundations/Switch.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/EnvironmentVariables.tsx
+//#region src/components/general-purpose/EnvironmentVariables.tsx
 const EnvStateContext = React.createContext(null);
 function useEnvStateContext() {
 	const ctx = React.useContext(EnvStateContext);
@@ -169,11 +169,10 @@ function EnvironmentVariableValue({ className, children, ref, ...props }) {
 		children: children ?? (showValues ? value : masked)
 	});
 }
-function EnvironmentVariableCopyButton({ className, format = "value", copyFormat, label, onClick, onCopy, onError, timeout = 1500, ...props }) {
+function EnvironmentVariableCopyButton({ className, format = "value", label, onClick, onCopy, onError, timeout = 1500, ...props }) {
 	const { name, value } = useVariableContext();
-	const resolvedFormat = copyFormat ?? format;
-	const text = resolvedFormat === "name" ? name : resolvedFormat === "export" ? `export ${name}="${value}"` : value;
-	const buttonLabel = label ?? `Copy ${resolvedFormat}`;
+	const text = format === "name" ? name : format === "export" ? `export ${name}="${value}"` : value;
+	const buttonLabel = label ?? `Copy ${format}`;
 	return /* @__PURE__ */ jsx(CopyButton, {
 		...props,
 		text,

package/dist/components/{FileTree.d.ts → general-purpose/FileTree.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-//#region src/components/FileTree.d.ts
+//#region src/components/general-purpose/FileTree.d.ts
 interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
   /** Visual treatment for the tree container. Plain trees inherit their surrounding canvas. */
   appearance?: "contained" | "plain";
@@ -54,6 +54,10 @@ interface FileTreeFolderProps extends React.HTMLAttributes<HTMLLIElement> {
   path: string;
   /** Display name. */
   name: string;
+  /** Optional custom icon; defaults to the current open or closed folder icon. */
+  icon?: React.ReactNode;
+  /** Interactive controls rendered beside the folder selection button. */
+  actions?: React.ReactNode;
   /** Depth level (0 for top-level). Auto-incremented by nested folders. */
   level?: number;
 }
@@ -61,6 +65,8 @@ declare function FileTreeFolder({
   className,
   path,
   name,
+  icon,
+  actions,
   level,
   children,
   ref,
@@ -73,6 +79,8 @@ interface FileTreeFileProps extends React.HTMLAttributes<HTMLLIElement> {
   name: string;
   /** Optional custom icon; defaults to a generic file icon. */
   icon?: React.ReactNode;
+  /** Interactive controls rendered beside the file selection button or link. */
+  actions?: React.ReactNode;
   /** App-owned anchor or router Link when selecting the file navigates. */
   render?: React.ReactElement;
   /** Depth level, auto-set by parent folder. */
@@ -83,6 +91,7 @@ declare function FileTreeFile({
   path,
   name,
   icon,
+  actions,
   render,
   level,
   ref,

package/dist/components/{FileTree.js → general-purpose/FileTree.js}

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-XOLP3Yvo.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../../FileTree-DbQMpvxV.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/{Pricing.d.ts → general-purpose/Pricing.d.ts}

@@ -1,4 +1,4 @@
-//#region src/components/Pricing.d.ts
+//#region src/components/general-purpose/Pricing.d.ts
 type PricingBillingPeriod = "monthly" | "yearly";
 /** A feature presented within a pricing plan. */
 interface PlanFeature {

package/dist/components/{Pricing.js → general-purpose/Pricing.js}

@@ -1,4 +1,4 @@
-//#region src/components/Pricing.ts
+//#region src/components/general-purpose/Pricing.ts
 function getPlanPrice(plan, billingPeriod) {
 	return billingPeriod === "yearly" ? plan.yearlyPrice : plan.monthlyPrice;
 }

package/dist/components/{PricingBillingToggle.d.ts → general-purpose/PricingBillingToggle.d.ts}

@@ -1,7 +1,7 @@
 import { PricingBillingPeriod } from "./Pricing.js";
 import * as React from "react";
 
-//#region src/components/PricingBillingToggle.d.ts
+//#region src/components/general-purpose/PricingBillingToggle.d.ts
 interface PricingBillingToggleProps {
   value: PricingBillingPeriod;
   onValueChange: (value: PricingBillingPeriod) => void;

package/dist/components/{PricingBillingToggle.js → general-purpose/PricingBillingToggle.js}

@@ -1,12 +1,12 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Badge } from "./Badge.js";
-import { Checkbox } from "./Checkbox.js";
-import { Switch } from "./Switch.js";
-import { Label } from "./Label.js";
-import { ToggleGroup } from "./ToggleGroup.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Badge } from "../foundations/Badge.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
+import { Switch } from "../foundations/Switch.js";
+import { Checkbox } from "../foundations/Checkbox.js";
+import { Label } from "../foundations/Label.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PricingBillingToggle.tsx
+//#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */
 function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, variant, className }) {
 	const [demoVariant, setDemoVariant] = React.useState("switch");

package/dist/components/{PricingConfirmationDialog.d.ts → general-purpose/PricingConfirmationDialog.d.ts}

@@ -1,7 +1,7 @@
 import { Plan, PricingBillingPeriod } from "./Pricing.js";
 import { PricingPlanAction } from "./PricingPlanCard.js";
 
-//#region src/components/PricingConfirmationDialog.d.ts
+//#region src/components/general-purpose/PricingConfirmationDialog.d.ts
 interface PricingConfirmationDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/dist/components/{PricingConfirmationDialog.js → general-purpose/PricingConfirmationDialog.js}

@@ -1,8 +1,8 @@
-import { Button } from "./Button.js";
-import { AlertDialog } from "./AlertDialog.js";
+import { Button } from "../foundations/Button.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PricingConfirmationDialog.tsx
+//#region src/components/general-purpose/PricingConfirmationDialog.tsx
 function getActionLabel(action) {
 	if (action === "downgrade") return "Downgrade";
 	if (action === "switch") return "Switch";

package/dist/components/{PricingFAQ.d.ts → general-purpose/PricingFAQ.d.ts}

@@ -1,7 +1,7 @@
 import { FAQItem } from "./Pricing.js";
 import * as React from "react";
 
-//#region src/components/PricingFAQ.d.ts
+//#region src/components/general-purpose/PricingFAQ.d.ts
 interface PricingFAQProps {
   items: readonly FAQItem[];
   title?: string;

package/dist/components/{PricingFAQ.js → general-purpose/PricingFAQ.js}

@@ -1,8 +1,8 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Accordion } from "./Accordion.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Accordion } from "../foundations/Accordion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PricingFAQ.tsx
+//#region src/components/general-purpose/PricingFAQ.tsx
 /** Pricing FAQ section composed from the shared Base UI-backed Accordion. */
 function PricingFAQ({ items, title = "Frequently Asked Questions", className }) {
 	const titleId = React.useId();

package/dist/components/{PricingPage.d.ts → general-purpose/PricingPage.d.ts}

@@ -1,7 +1,7 @@
 import { FAQItem, Plan, PlanFeature, UsageTier } from "./Pricing.js";
 import * as React from "react";
 
-//#region src/components/PricingPage.d.ts
+//#region src/components/general-purpose/PricingPage.d.ts
 interface PricingPageProps {
   /**
    * The title of the pricing page

package/dist/components/{PricingPage.js → general-purpose/PricingPage.js}

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { getPlanPrice } from "./Pricing.js";
 import { PricingBillingToggle } from "./PricingBillingToggle.js";
 import { PricingConfirmationDialog } from "./PricingConfirmationDialog.js";
@@ -7,7 +7,7 @@ import { PricingPlanCard } from "./PricingPlanCard.js";
 import { PricingUsageCalculator } from "./PricingUsageCalculator.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PricingPage.tsx
+//#region src/components/general-purpose/PricingPage.tsx
 const EMPTY_USAGE_TIERS = [];
 /**
 * A comprehensive pricing page component that demonstrates all pricing-related

package/dist/components/{PricingPlanCard.d.ts → general-purpose/PricingPlanCard.d.ts}

@@ -1,6 +1,6 @@
 import { Plan, PricingBillingPeriod } from "./Pricing.js";
 
-//#region src/components/PricingPlanCard.d.ts
+//#region src/components/general-purpose/PricingPlanCard.d.ts
 type PricingPlanAction = "current" | "upgrade" | "downgrade" | "switch" | "select";
 interface PricingPlanCardProps {
   plan: Plan;

package/dist/components/{PricingPlanCard.js → general-purpose/PricingPlanCard.js}

@@ -1,13 +1,13 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
-import { O as InfoIcon, P as MinusIcon, d as CheckIcon } from "../icons-B4mGvCvc.js";
-import { IconButton } from "./IconButton.js";
-import { Separator } from "./Separator.js";
-import { Badge } from "./Badge.js";
-import { Card } from "./Card.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { O as InfoIcon, P as MinusIcon, d as CheckIcon } from "../../icons-B4mGvCvc.js";
+import { Button } from "../foundations/Button.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { Separator } from "../foundations/Separator.js";
+import { Card } from "../foundations/Card.js";
+import { Badge } from "../foundations/Badge.js";
 import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PricingPlanCard.tsx
+//#region src/components/general-purpose/PricingPlanCard.tsx
 function getPlanActionLabel(plan, action) {
 	if (action === "current") return "Current Plan";
 	if (action === "upgrade") return "Upgrade";

package/dist/components/{PricingUsageCalculator.d.ts → general-purpose/PricingUsageCalculator.d.ts}

@@ -1,7 +1,7 @@
 import { UsageTier } from "./Pricing.js";
 import * as React from "react";
 
-//#region src/components/PricingUsageCalculator.d.ts
+//#region src/components/general-purpose/PricingUsageCalculator.d.ts
 interface PricingUsageCalculatorProps {
   usageTiers: readonly UsageTier[];
   maxUsage?: number;

package/dist/components/{PricingUsageCalculator.js → general-purpose/PricingUsageCalculator.js}

@@ -1,12 +1,12 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Separator } from "./Separator.js";
-import { Progress } from "./Progress.js";
-import { Slider } from "./Slider.js";
-import { Card } from "./Card.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Separator } from "../foundations/Separator.js";
+import { Card } from "../foundations/Card.js";
+import { Slider } from "../foundations/Slider.js";
+import { Progress } from "../foundations/Progress.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PricingUsageCalculator.tsx
+//#region src/components/general-purpose/PricingUsageCalculator.tsx
 /** Self-contained usage estimator composed from Card, Slider, Progress, and Separator. */
 function PricingUsageCalculator({ usageTiers, maxUsage = 1e5, usageUnit = "API calls", defaultUsage = 5e4, className }) {
 	const [usage, setUsage] = React.useState(() => Math.min(defaultUsage, maxUsage));

package/dist/components/{ResizableSidePanel.d.ts → general-purpose/ResizableSidePanel.d.ts}

@@ -1,7 +1,7 @@
-import { SeparatorProps } from "./Separator.js";
+import { SeparatorProps } from "../foundations/Separator.js";
 import * as React from "react";
 
-//#region src/components/ResizableSidePanel.d.ts
+//#region src/components/general-purpose/ResizableSidePanel.d.ts
 type ResizableSidePanelSide = "start" | "end";
 interface ResizableSidePanelRootProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Short noun used by the resize separator, such as “threads” or “workbench”. */
@@ -18,6 +18,10 @@ interface ResizableSidePanelRootProps extends React.HTMLAttributes<HTMLDivElemen
   keyboardStep?: number;
   /** Called whenever pointer or keyboard input changes the panel size. */
   onSizeChange?: (size: number) => void;
+  /** Pointer size below which the consumer should collapse the panel. */
+  collapseThreshold?: number;
+  /** Called once pointer resizing crosses `collapseThreshold`. */
+  onCollapse?: () => void;
 }
 interface ResizableSidePanelHandleProps extends Omit<SeparatorProps, "aria-label" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "decorative" | "orientation"> {}
 /**
@@ -27,12 +31,14 @@ interface ResizableSidePanelHandleProps extends Omit<SeparatorProps, "aria-label
 declare function ResizableSidePanelRoot({
   children,
   className,
+  collapseThreshold,
   defaultSize,
   keyboardStep,
   label,
   maxSize,
   minSize,
   onSizeChange,
+  onCollapse,
   ref,
   side,
   style,

package/dist/components/{ResizableSidePanel.js → general-purpose/ResizableSidePanel.js}

@@ -1,9 +1,9 @@
-import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
-import { n as clamp } from "../format-S6uWyoSb.js";
-import { Separator } from "./Separator.js";
+import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
+import { n as clamp } from "../../format-CmopcfqJ.js";
+import { Separator } from "../foundations/Separator.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/ResizableSidePanel.tsx
+//#region src/components/general-purpose/ResizableSidePanel.tsx
 const ResizableSidePanelContext = React.createContext(null);
 function panelSizeDelta(physicalDelta, side, direction) {
 	const sideDirection = side === "start" ? 1 : -1;
@@ -14,7 +14,7 @@ function panelSizeDelta(physicalDelta, side, direction) {
 * Shared sizing seam for a logical start- or end-side panel. Consumers retain
 * ownership of panel placement, visibility, compact behavior, and top bars.
 */
-function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, ref, side = "start", style, ...props }) {
+function ResizableSidePanelRoot({ children, className, collapseThreshold, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, onCollapse, ref, side = "start", style, ...props }) {
 	const [size, setInnerSize] = React.useState(() => clamp(defaultSize, minSize, maxSize));
 	const cleanupResizeRef = React.useRef(null);
 	const setSize = React.useCallback((nextSize) => {
@@ -41,7 +41,13 @@ function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep
 		const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr";
 		const onMove = (move) => {
 			if (move.pointerId !== pointerId) return;
-			setSize(startSize + panelSizeDelta(move.clientX - startX, side, direction));
+			const nextSize = startSize + panelSizeDelta(move.clientX - startX, side, direction);
+			if (collapseThreshold !== void 0 && nextSize < collapseThreshold) {
+				onCollapse?.();
+				stopResize();
+				return;
+			}
+			setSize(nextSize);
 		};
 		const onEnd = (end) => {
 			if (end.pointerId === pointerId) stopResize();
@@ -58,6 +64,8 @@ function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep
 		window.addEventListener("pointerup", onEnd);
 		window.addEventListener("pointercancel", onEnd);
 	}, [
+		collapseThreshold,
+		onCollapse,
 		setSize,
 		side,
 		size,

package/dist/{ResponsiveSidebarShell-CsAh4NyL.d.ts → components/general-purpose/ResponsiveSidebarShell.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-//#region src/components/ResponsiveSidebarShell.d.ts
+//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
 interface ResponsiveSidebarShellControls {
   /** Close the sidebar and move focus to the main content. */
   closeSidebar: () => void;
@@ -65,4 +65,4 @@ declare function ResponsiveSidebarShell({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ResponsiveSidebarShellTopBarControls as i, ResponsiveSidebarShellControls as n, ResponsiveSidebarShellProps as r, ResponsiveSidebarShell as t };
+export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, ResponsiveSidebarShellTopBarControls };

package/dist/components/{ResponsiveSidebarShell.js → general-purpose/ResponsiveSidebarShell.js}

@@ -1,13 +1,13 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
-import { K as SidebarIcon } from "../icons-B4mGvCvc.js";
-import { t as capitalize } from "../format-S6uWyoSb.js";
-import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { K as SidebarIcon } from "../../icons-B4mGvCvc.js";
+import { Button } from "../foundations/Button.js";
+import { t as capitalize } from "../../format-CmopcfqJ.js";
+import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ResponsiveSidebarShell.tsx
+//#region src/components/general-purpose/ResponsiveSidebarShell.tsx
 const sidebarDefaultWidth = 256;
 const sidebarMinWidth = 224;
 const sidebarMaxWidth = 384;

package/dist/components/{SettingsFormDialog.d.ts → general-purpose/SettingsFormDialog.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-//#region src/components/SettingsFormDialog.d.ts
+//#region src/components/general-purpose/SettingsFormDialog.d.ts
 type SettingsFormFieldType = "email" | "password" | "search" | "tel" | "text" | "url";
 interface SettingsFormField {
   name: string;