@cytario/design 3.1.2 → 3.3.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps as ButtonProps$1, TextFieldProps, SelectProps as SelectProps$1, CellProps, ColumnProps, TableProps, RowProps, TableBodyProps, TableHeaderProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, ToggleButtonProps as ToggleButtonProps$1, Selection, PopoverProps as PopoverProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, Key } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, TextFieldProps, TextField, ColorField, SelectProps as SelectProps$1, CellProps, ColumnProps, TableProps, RowProps, TableBodyProps, TableHeaderProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, ToggleButtonProps as ToggleButtonProps$1, Selection, PopoverProps as PopoverProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, Key } from 'react-aria-components';
 export { Key, RouterConfig, RouterProvider, Tab as UnstyledTab, TabList as UnstyledTabList, TabPanel as UnstyledTabPanel, Tabs as UnstyledTabs } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LucideIcon } from 'lucide-react';
@@ -84,26 +84,18 @@ interface IconButtonProps extends Omit<ButtonProps$1, "className"> {
 declare function IconButton({ icon, "aria-label": ariaLabel, variant, size, showTooltip, tooltipPlacement, isLoading, isDisabled, className, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<TextFieldProps, "children" | "className"> {
-    /** Label text displayed above the input. Omit for raw input mode. */
+    as?: typeof TextField | typeof ColorField;
     label?: string;
-    /** Placeholder text shown when the input is empty */
     placeholder?: string;
-    /** Help text shown below the input */
     description?: string;
-    /** Error message shown below the input (triggers error styling) */
     errorMessage?: string;
-    /** HTML input type */
     type?: "text" | "email" | "password" | "number";
-    /** Controls padding and font size */
     size?: Size;
-    /** Text prefix shown inside the input on the left (e.g., "$", "https://") */
     prefix?: string;
-    /** Text alignment within the input */
     align?: "left" | "center" | "right";
-    /** Additional CSS class for the outer wrapper */
     className?: string;
 }
-declare function Input({ label, placeholder, description, errorMessage, type, size, prefix, align, isDisabled, isRequired, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ as: FieldProp, label, placeholder, description, errorMessage, type, size, prefix, align, isDisabled, isRequired, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 interface SelectItem {
     id: string;
@@ -465,40 +457,27 @@ interface PopoverProps {
     onOpenChange?: (isOpen: boolean) => void;
     children: React__default.ReactNode;
 }
+/** Provides open/close state to a paired PopoverTrigger and PopoverContent. */
+declare function Popover({ children, isOpen, onOpenChange }: PopoverProps): react_jsx_runtime.JSX.Element;
 interface PopoverTriggerProps {
     children: React__default.ReactNode;
     /** Additional CSS classes for the trigger wrapper */
     className?: string;
 }
+/** Wraps its child in an AriaButton so it can toggle the parent Popover. */
+declare function PopoverTrigger({ children, className }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
 interface PopoverContentProps {
-    /** Placement relative to the trigger element */
     placement?: PopoverProps$1["placement"];
-    /** Offset from the trigger in pixels */
     offset?: number;
-    /** Additional CSS classes */
     className?: string;
-    /** Content to render inside the popover. Can be a render function receiving { close }. */
-    children: React__default.ReactNode | ((opts: {
-        close: () => void;
-    }) => React__default.ReactNode);
+    children: React__default.ReactNode;
 }
 /**
- * Popover root -- wraps React Aria's DialogTrigger.
- */
-declare function Popover({ children, isOpen, onOpenChange }: PopoverProps): react_jsx_runtime.JSX.Element;
-/**
- * PopoverTrigger -- wraps the child in a React Aria Button so it
- * participates in DialogTrigger's open/close handling.
- *
- * Renders as an unstyled inline element. Pass your visual trigger
- * (text, icon, swatch) as children.
- */
-declare function PopoverTrigger({ children, className }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
-/**
- * PopoverContent -- the floating panel anchored to the trigger.
- * Built on React Aria's Popover + Dialog for accessible focus management.
+ * Floating panel anchored to the trigger. Provides focus trap,
+ * Escape-to-close, focus restore, and outside-click dismiss via RAC's
+ * Popover (no Dialog wrapper needed for those behaviors).
  */
-declare function PopoverContent({ placement, offset: offsetPx, className, children, }: PopoverContentProps): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ placement, offset: offsetPx, className, children, ...rest }: PopoverContentProps): react_jsx_runtime.JSX.Element;
 
 type TabsVariant = "underline" | "pills" | "unstyled";
 type TabsSize = "sm" | "md" | "lg";
@@ -773,11 +752,14 @@ declare function Pill({ children, color, className, ...rest }: PillProps): react
 
 interface PathPillProps {
     children: string;
+    /** Number of trailing segments to show; earlier ones collapse to dots. Defaults to all. */
     visibleCount?: number;
+    /** Override per-segment color. Falls back to hash-based `pillColorFromName`. */
+    colorFn?: (segment: string, index: number) => PillColor;
     className?: string;
 }
 /** Renders a slash-separated path as overlapping, hash-colored pill segments. */
-declare function PathPill({ children, visibleCount, className, }: PathPillProps): react_jsx_runtime.JSX.Element | null;
+declare function PathPill({ children, visibleCount, colorFn, className, }: PathPillProps): react_jsx_runtime.JSX.Element | null;
 
 interface FormWizardContextValue {
     /** Zero-based index of the currently active step */

package/dist/index.js

@@ -352,6 +352,7 @@ function groupRadiusClasses(position) {
   }
 }
 function Input({
+  as: FieldProp = TextField,
   label,
   placeholder,
   description,
@@ -365,13 +366,14 @@ function Input({
   className,
   ...props
 }) {
+  const Field2 = FieldProp;
   const isInvalid = !!errorMessage;
   const { inGroup, position } = useInputGroup();
   const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
   const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
   return /* @__PURE__ */ jsxs4(
-    TextField,
+    Field2,
     {
       ...props,
       type,
@@ -614,7 +616,7 @@ function Select({
                   sizeStyles[size]
                 ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
-                  /* @__PURE__ */ jsx7("span", { className: "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  /* @__PURE__ */ jsx7("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
                   isSelected && /* @__PURE__ */ jsx7(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
                 ] })
               }
@@ -1894,57 +1896,54 @@ function MenuSeparator({ className }) {
 import {
   DialogTrigger,
   Popover as AriaPopover,
-  Dialog as AriaDialog2,
   Button as AriaButton3
 } from "react-aria-components";
-import { Fragment as Fragment8, jsx as jsx33 } from "react/jsx-runtime";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Popover3({ children, isOpen, onOpenChange }) {
   return /* @__PURE__ */ jsx33(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
-  return /* @__PURE__ */ jsx33(
-    AriaButton3,
-    {
-      className: [
-        "inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer",
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm",
-        className
-      ].filter(Boolean).join(" "),
-      children
-    }
-  );
+  const cx = `
+    inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
+    focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm
+  `;
+  return /* @__PURE__ */ jsx33(AriaButton3, { className: twMerge8(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
   offset: offsetPx = 8,
   className,
-  children
+  children,
+  ...rest
 }) {
+  const cx = `
+    z-50
+    bg-(--color-surface-default)
+    border border-(--color-border-default)
+    rounded-md shadow-lg
+    entering:animate-in entering:fade-in entering:duration-300
+    exiting:animate-out exiting:fade-out exiting:duration-300
+    entering:placement-top:slide-in-from-bottom-1
+    entering:placement-bottom:slide-in-from-top-1
+    entering:placement-left:slide-in-from-right-1
+    entering:placement-right:slide-in-from-left-1
+  `;
   return /* @__PURE__ */ jsx33(
     AriaPopover,
     {
+      ...rest,
       placement,
       offset: offsetPx,
-      className: [
-        "z-50",
-        "bg-(--color-surface-default) border border-(--color-border-default)",
-        "rounded-md shadow-lg",
-        "entering:animate-in entering:fade-in entering:duration-150",
-        "exiting:animate-out exiting:fade-out exiting:duration-100",
-        "entering:placement-top:slide-in-from-bottom-1",
-        "entering:placement-bottom:slide-in-from-top-1",
-        "entering:placement-left:slide-in-from-right-1",
-        "entering:placement-right:slide-in-from-left-1",
-        className
-      ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx33(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx33(Fragment8, { children: typeof children === "function" ? children({ close }) : children }) })
+      className: twMerge8(cx, className),
+      children
     }
   );
 }
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
-import { twMerge as twMerge8 } from "tailwind-merge";
+import { twMerge as twMerge9 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -1974,7 +1973,7 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: twMerge8(
+      className: twMerge9(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -1993,7 +1992,7 @@ function TabList({
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge8(
+      className: ({ orientation }) => twMerge9(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2009,14 +2008,14 @@ function Tab({ className, ...props }) {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge8(
+          return twMerge9(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge8(
+        return twMerge9(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2064,7 +2063,7 @@ function TabPanel({ className, ...props }) {
     AriaTabPanel,
     {
       ...props,
-      className: twMerge8(
+      className: twMerge9(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2316,7 +2315,7 @@ function Tree({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
-import { twMerge as twMerge9 } from "tailwind-merge";
+import { twMerge as twMerge10 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
@@ -2349,7 +2348,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge9(
+      className: twMerge10(
         "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
@@ -2366,7 +2365,7 @@ function SegmentedControlItem({
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge9(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge10(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2389,7 +2388,7 @@ function SegmentedControlItem({
 // src/components/FileCard/FileCard.tsx
 import { useCallback as useCallback3 } from "react";
 import { File as File2, Info as Info2 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function FileCard({
   name,
   icon: IconComponent = File2,
@@ -2423,7 +2422,7 @@ function FileCard({
     },
     [onPress]
   );
-  const cardContent = /* @__PURE__ */ jsxs23(Fragment9, { children: [
+  const cardContent = /* @__PURE__ */ jsxs23(Fragment8, { children: [
     /* @__PURE__ */ jsx37(
       "div",
       {
@@ -2439,7 +2438,7 @@ function FileCard({
           "bg-(--color-surface-default)",
           compact ? "px-2 py-1.5 rounded-b-(--border-radius-md)" : "gap-0.5 px-3 py-2 rounded-b-(--border-radius-lg)"
         ].join(" "),
-        children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
+        children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment8, { children: [
           /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx37(
               IconComponent,
@@ -2508,8 +2507,8 @@ function FileCard({
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
 import { useCallback as useCallback4 } from "react";
 import { AlertCircle, Database } from "lucide-react";
-import { twMerge as twMerge10 } from "tailwind-merge";
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-(--color-status-success)",
   error: "border-2 border-(--color-status-danger) bg-transparent",
@@ -2569,14 +2568,14 @@ function StorageConnectionCard({
     },
     [onPress]
   );
-  const cardContent = /* @__PURE__ */ jsxs24(Fragment10, { children: [
+  const cardContent = /* @__PURE__ */ jsxs24(Fragment9, { children: [
     /* @__PURE__ */ jsx38("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx38(PreviewArea, { status, errorMessage, children }) }),
     /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1.5 border-t border-(--color-border-default) bg-(--color-surface-default) px-3 py-2.5 rounded-b-(--border-radius-lg)", children: [
       /* @__PURE__ */ jsxs24("div", { className: "flex items-start gap-2", children: [
         status && /* @__PURE__ */ jsx38(
           "span",
           {
-            className: twMerge10(
+            className: twMerge11(
               "mt-1.5 h-2 w-2 shrink-0 rounded-full",
               statusDotStyles[status]
             ),
@@ -2604,10 +2603,10 @@ function StorageConnectionCard({
           }
         )
       ] }),
-      meta && /* @__PURE__ */ jsx38("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: meta })
+      meta && /* @__PURE__ */ jsx38("div", { className: twMerge11("flex items-center gap-2", status && "pl-4"), children: meta })
     ] })
   ] });
-  const baseStyles = twMerge10(
+  const baseStyles = twMerge11(
     "flex flex-col overflow-hidden rounded-lg",
     "border border-(--color-border-default)",
     "shadow-sm transition-all",
@@ -2616,7 +2615,7 @@ function StorageConnectionCard({
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx38("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx38("a", { href, className: twMerge11(baseStyles, "no-underline"), children: cardContent });
   }
   if (onPress) {
     return /* @__PURE__ */ jsx38(
@@ -2635,7 +2634,7 @@ function StorageConnectionCard({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge11 } from "tailwind-merge";
+import { twMerge as twMerge12 } from "tailwind-merge";
 import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
@@ -2664,7 +2663,7 @@ function Badge({
   return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge11(
+      className: twMerge12(
         "inline-flex items-center gap-1 rounded-full",
         "text-xs font-medium leading-tight",
         variantStyles4[variant],
@@ -2681,8 +2680,8 @@ function Badge({
 
 // src/components/Card/Card.tsx
 import { useCallback as useCallback5 } from "react";
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2700,7 +2699,7 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge12(
+  const containerClass = twMerge13(
     "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
     isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
@@ -2715,11 +2714,11 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs26(Fragment11, { children: [
+  const content = /* @__PURE__ */ jsxs26(Fragment10, { children: [
     header && /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge12(
+        className: twMerge13(
           "border-b border-(--color-border-default)",
           paddingStyles[padding]
         ),
@@ -2730,7 +2729,7 @@ function Card({
     footer && /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge12(
+        className: twMerge13(
           "border-t border-(--color-border-default)",
           paddingStyles[padding]
         ),
@@ -2759,7 +2758,7 @@ function Card({
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
@@ -2816,7 +2815,7 @@ function DeltaIndicator({
     return /* @__PURE__ */ jsxs27(
       "span",
       {
-        className: twMerge13(
+        className: twMerge14(
           "inline-flex items-center gap-1 font-medium",
           "text-(--color-text-tertiary)",
           className
@@ -2855,7 +2854,7 @@ function DeltaIndicator({
   return /* @__PURE__ */ jsxs27(
     "span",
     {
-      className: twMerge13(
+      className: twMerge14(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2875,7 +2874,7 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
@@ -2899,7 +2898,7 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs28("div", { className: twMerge14("w-full", className), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: twMerge15("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
       /* @__PURE__ */ jsx42("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
@@ -2912,14 +2911,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge14(
+        className: twMerge15(
           "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles9[size]
         ),
         children: /* @__PURE__ */ jsx42(
           "div",
           {
-            className: twMerge14(
+            className: twMerge15(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2940,7 +2939,7 @@ import {
   CheckCircle2,
   X as X3
 } from "lucide-react";
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
@@ -2989,7 +2988,7 @@ function Banner({
     "div",
     {
       role: config.role,
-      className: twMerge15(
+      className: twMerge16(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
@@ -3000,7 +2999,7 @@ function Banner({
           IconComponent,
           {
             size: 20,
-            className: twMerge15("shrink-0 mt-0.5", config.iconClass),
+            className: twMerge16("shrink-0 mt-0.5", config.iconClass),
             "aria-hidden": "true"
           }
         ),
@@ -3027,8 +3026,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3050,18 +3049,18 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge16(
+  const containerClass = twMerge17(
     "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs30(Fragment12, { children: [
-    /* @__PURE__ */ jsx44("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+  const content = /* @__PURE__ */ jsxs30(Fragment11, { children: [
+    /* @__PURE__ */ jsx44("div", { className: twMerge17(config.labelClass, "text-(--color-text-secondary)"), children: label }),
     /* @__PURE__ */ jsx44(
       "div",
       {
-        className: twMerge16(
+        className: twMerge17(
           config.valueClass,
           "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
         ),
@@ -3077,7 +3076,7 @@ function MetricCard({
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
+import { twMerge as twMerge18 } from "tailwind-merge";
 import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function SectionHeader({
   title,
@@ -3087,7 +3086,7 @@ function SectionHeader({
   return /* @__PURE__ */ jsxs31(
     "div",
     {
-      className: twMerge17(
+      className: twMerge18(
         "flex flex-wrap items-center gap-3 py-4",
         className
       ),
@@ -3100,7 +3099,7 @@ function SectionHeader({
 }
 
 // src/components/Pill/Pill.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
+import { twMerge as twMerge19 } from "tailwind-merge";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var hashColors = {
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
@@ -3127,7 +3126,7 @@ function Pill({
   className,
   ...rest
 }) {
-  const cx = twMerge18(
+  const cx = twMerge19(
     `
     inline-flex items-center
     rounded-full
@@ -3143,27 +3142,29 @@ function Pill({
 }
 
 // src/components/Pill/PathPill.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
+import { twMerge as twMerge20 } from "tailwind-merge";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function PathPill({
   children,
-  visibleCount = 1,
+  visibleCount,
+  colorFn,
   className
 }) {
   const segments = children.split("/").filter(Boolean);
   if (segments.length === 0) return null;
-  const dotCount = Math.max(0, segments.length - visibleCount);
+  const effectiveVisible = visibleCount ?? segments.length;
+  const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
   return /* @__PURE__ */ jsx47(
     "div",
     {
-      className: twMerge19("relative flex", className),
+      className: twMerge20("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
-        const color = pillColorFromName(segment);
+        const cx = twMerge20(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
         return /* @__PURE__ */ jsx47(
           Pill,
           {