@cytario/design 1.11.0 → 1.12.0

package/dist/index.d.ts

@@ -497,12 +497,12 @@ declare function SegmentedControlItem({ className, ...props }: SegmentedControlI
 interface StorageConnectionCardProps {
     /** Display name for the connection */
     name: string;
-    /** Cloud provider identifier (e.g., "aws", "minio", "azure", "gcp") */
-    provider: string;
-    /** AWS region or equivalent */
+    /** Cloud provider identifier (e.g., "aws", "minio", "azure", "gcp"). When omitted, the provider badge and region are hidden. */
+    provider?: string;
+    /** AWS region or equivalent (only rendered when provider is set) */
     region?: string;
-    /** Connection health status */
-    status: "connected" | "error" | "loading";
+    /** Connection health status. When omitted, the status dot is hidden and the preview area behaves as "connected". */
+    status?: "connected" | "error" | "loading";
     /** Human-readable error message when status is "error" */
     errorMessage?: string;
     /** Number of viewable images in the bucket */
@@ -619,6 +619,10 @@ declare const ColorSurfaceSuccess = "#f0fdf4";
 declare const ColorSurfaceWarning = "#fffbeb";
 declare const ColorSurfaceInfo = "#f8fafc";
 declare const ColorSurfaceOverlay = "#000000cc";
+declare const ColorSurfaceHover = "#f3f4f6";
+declare const ColorSurfacePressed = "#e5e7eb";
+declare const ColorSurfaceSelected = "#edf9f9";
+declare const ColorSurfaceSelectedHover = "#d0f0f0";
 declare const ColorBorderDefault = "#e5e7eb";
 declare const ColorBorderStrong = "#d1d5db";
 declare const ColorBorderBrand = "#5c2483";
@@ -629,6 +633,19 @@ declare const ColorBorderSuccess = "#16a34a";
 declare const ColorBorderInfo = "#94a3b8";
 declare const ColorBorderWarning = "#d97706";
 declare const ColorOverlayBackdrop = "#00000066";
+declare const ColorStatusSuccess = "#22c55e";
+declare const ColorStatusDanger = "#f43f5e";
+declare const ColorStatusWarning = "#d97706";
+declare const ColorBadgePurpleBg = "#ead9f5";
+declare const ColorBadgePurpleText = "#5c2483";
+declare const ColorBadgeTealBg = "#d0f0f0";
+declare const ColorBadgeTealText = "#217d7e";
+declare const ColorBadgeSlateBg = "#f1f5f9";
+declare const ColorBadgeSlateText = "#334155";
+declare const ColorBadgeRoseBg = "#ffe4e6";
+declare const ColorBadgeRoseText = "#be123c";
+declare const ColorBadgeNeutralBg = "#f3f4f6";
+declare const ColorBadgeNeutralText = "#374151";
 declare const Spacing1 = "4px";
 declare const Spacing2 = "8px";
 declare const Spacing3 = "12px";
@@ -662,4 +679,4 @@ declare const LineHeightTight = 1.25;
 declare const LineHeightNormal = 1.5;
 declare const LineHeightRelaxed = 1.625;
 
-export { BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple50, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorRose100, ColorRose200, ColorRose300, ColorRose400, ColorRose50, ColorRose500, ColorRose600, ColorRose700, ColorRose800, ColorRose900, ColorSlate100, ColorSlate200, ColorSlate300, ColorSlate400, ColorSlate50, ColorSlate500, ColorSlate600, ColorSlate700, ColorSlate800, ColorSlate900, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfaceSubtle, ColorSurfaceSuccess, ColorSurfaceWarning, ColorTeal100, ColorTeal200, ColorTeal300, ColorTeal400, ColorTeal50, ColorTeal500, ColorTeal600, ColorTeal700, ColorTeal800, ColorTeal900, ColorTextAccent, ColorTextBrand, ColorTextDanger, ColorTextInfo, ColorTextInverse, ColorTextPrimary, ColorTextSecondary, ColorTextSuccess, ColorTextTertiary, ColorTextWarning, Column, type DataTableProps, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, type GroupPosition, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, type IconProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupContext, type InputGroupProps, type InputProps, Label, type LabelProps, LineHeightNormal, LineHeightRelaxed, LineHeightTight, Link, type LinkProps, type LinkVariant, Menu, type MenuItemData, type MenuProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, Spacing1, Spacing12, Spacing16, Spacing2, Spacing3, Spacing4, Spacing6, Spacing8, Spinner, type SpinnerProps, StorageConnectionCard, type StorageConnectionCardProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, useInputGroup, useToast };
+export { BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorBadgeNeutralBg, ColorBadgeNeutralText, ColorBadgePurpleBg, ColorBadgePurpleText, ColorBadgeRoseBg, ColorBadgeRoseText, ColorBadgeSlateBg, ColorBadgeSlateText, ColorBadgeTealBg, ColorBadgeTealText, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple50, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorRose100, ColorRose200, ColorRose300, ColorRose400, ColorRose50, ColorRose500, ColorRose600, ColorRose700, ColorRose800, ColorRose900, ColorSlate100, ColorSlate200, ColorSlate300, ColorSlate400, ColorSlate50, ColorSlate500, ColorSlate600, ColorSlate700, ColorSlate800, ColorSlate900, ColorStatusDanger, ColorStatusSuccess, ColorStatusWarning, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceHover, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfacePressed, ColorSurfaceSelected, ColorSurfaceSelectedHover, ColorSurfaceSubtle, ColorSurfaceSuccess, ColorSurfaceWarning, ColorTeal100, ColorTeal200, ColorTeal300, ColorTeal400, ColorTeal50, ColorTeal500, ColorTeal600, ColorTeal700, ColorTeal800, ColorTeal900, ColorTextAccent, ColorTextBrand, ColorTextDanger, ColorTextInfo, ColorTextInverse, ColorTextPrimary, ColorTextSecondary, ColorTextSuccess, ColorTextTertiary, ColorTextWarning, Column, type DataTableProps, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, type GroupPosition, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, type IconProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupContext, type InputGroupProps, type InputProps, Label, type LabelProps, LineHeightNormal, LineHeightRelaxed, LineHeightTight, Link, type LinkProps, type LinkVariant, Menu, type MenuItemData, type MenuProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, Spacing1, Spacing12, Spacing16, Spacing2, Spacing3, Spacing4, Spacing6, Spacing8, Spinner, type SpinnerProps, StorageConnectionCard, type StorageConnectionCardProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, useInputGroup, useToast };

package/dist/index.js

@@ -24,8 +24,8 @@ var variantStyles = {
   ].join(" "),
   ghost: [
     "bg-transparent text-[var(--color-text-primary)]",
-    "hover:bg-[var(--color-neutral-100)]",
-    "pressed:bg-[var(--color-neutral-200)]"
+    "hover:bg-[var(--color-surface-hover)]",
+    "pressed:bg-[var(--color-surface-pressed)]"
   ].join(" "),
   destructive: [
     "bg-[var(--color-action-danger)] text-[var(--color-text-inverse)]",
@@ -232,7 +232,7 @@ function Tooltip({
           "bg-[var(--color-surface-overlay)] backdrop-blur-sm",
           "text-[var(--color-text-inverse)] text-sm",
           "px-3 py-1.5",
-          "rounded-md",
+          "rounded-[var(--border-radius-md)]",
           "max-w-xs",
           "entering:animate-in entering:fade-in entering:duration-150",
           "exiting:animate-out exiting:fade-out exiting:duration-100",
@@ -555,13 +555,13 @@ function Select({
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
+      className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsxs5(
           Label2,
           {
             className: [
-              "text-sm font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
+              "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
             ].join(" "),
             children: [
               label,
@@ -595,7 +595,7 @@ function Select({
             ]
           }
         ),
-        hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-[var(--color-text-danger)]", children: errorMessage }),
+        hasError && /* @__PURE__ */ jsx7("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage }),
         /* @__PURE__ */ jsx7(
           Popover,
           {
@@ -760,7 +760,7 @@ function Dialog({
           className: [
             "w-full mx-4",
             sizeStyles2[size],
-            "bg-[var(--color-surface-default)] rounded-lg shadow-xl max-h-[85vh] flex flex-col",
+            "bg-[var(--color-surface-default)] rounded-[var(--border-radius-lg)] shadow-xl max-h-[85vh] flex flex-col",
             "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
             "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
             className
@@ -771,7 +771,7 @@ function Dialog({
                 Heading,
                 {
                   slot: "title",
-                  className: "text-lg font-semibold text-[var(--color-text-primary)]",
+                  className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]",
                   children: title
                 }
               ),
@@ -781,7 +781,7 @@ function Dialog({
                   type: "button",
                   onClick: close,
                   className: [
-                    "inline-flex items-center justify-center rounded-md p-1",
+                    "inline-flex items-center justify-center rounded-[var(--border-radius-sm)] p-1",
                     "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-muted)]",
                     "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
                     "transition-colors"
@@ -860,7 +860,7 @@ function ToastItem({
       role: "status",
       "aria-live": "polite",
       className: [
-        "flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
+        "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)] shadow-md",
         "min-w-[320px] max-w-[420px]",
         "transition-all duration-200",
         isExiting ? "translate-x-full opacity-0" : "translate-x-0 opacity-100 animate-in slide-in-from-right",
@@ -868,13 +868,13 @@ function ToastItem({
       ].join(" "),
       children: [
         /* @__PURE__ */ jsx10(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]", children: toast.message }),
         /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
             onClick: dismiss,
-            className: "shrink-0 rounded p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
+            className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
             children: /* @__PURE__ */ jsx10(X2, { size: 16, "aria-hidden": "true" })
           }
@@ -947,12 +947,12 @@ function EmptyState({
     "div",
     {
       className: [
-        "flex flex-col items-center text-center py-12 px-6",
+        "flex flex-col items-center text-center py-[var(--spacing-12)] px-[var(--spacing-6)]",
         className
       ].filter(Boolean).join(" "),
       children: [
         icon && /* @__PURE__ */ jsx11(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
-        /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)] mt-4", children: title }),
+        /* @__PURE__ */ jsx11("h3", { className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-4", children: title }),
         description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
         action && /* @__PURE__ */ jsx11("div", { className: "mt-6", children: action })
       ]
@@ -1294,17 +1294,17 @@ var defaultSizeMap = {
   h6: "xs"
 };
 var sizeStyles3 = {
-  xs: "text-sm",
-  sm: "text-base",
-  md: "text-lg",
-  lg: "text-xl",
-  xl: "text-2xl",
-  "2xl": "text-3xl",
-  "3xl": "text-4xl"
+  xs: "text-[length:var(--font-size-sm)]",
+  sm: "text-[length:var(--font-size-base)]",
+  md: "text-[length:var(--font-size-lg)]",
+  lg: "text-[length:var(--font-size-xl)]",
+  xl: "text-[length:var(--font-size-2xl)]",
+  "2xl": "text-[length:var(--font-size-3xl)]",
+  "3xl": "text-[length:var(--font-size-4xl)]"
 };
 var weightStyles = {
-  semibold: "font-semibold",
-  bold: "font-bold"
+  semibold: "font-[number:var(--font-weight-semibold)]",
+  bold: "font-[number:var(--font-weight-bold)]"
 };
 function Heading2({
   as: Tag = "h2",
@@ -1407,7 +1407,7 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
                   /* @__PURE__ */ jsx22(
                     Link2,
                     {
@@ -1536,18 +1536,18 @@ var variantStyles3 = {
   default: {
     base: [
       "bg-transparent text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-neutral-100)]",
-      "pressed:bg-[var(--color-neutral-200)]"
+      "hover:bg-[var(--color-surface-hover)]",
+      "pressed:bg-[var(--color-surface-pressed)]"
     ].join(" "),
-    selected: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)]"
+    selected: "bg-[var(--color-surface-pressed)] text-[var(--color-text-primary)]"
   },
   primary: {
     base: [
       "bg-transparent text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-neutral-100)]",
-      "pressed:bg-[var(--color-neutral-200)]"
+      "hover:bg-[var(--color-surface-hover)]",
+      "pressed:bg-[var(--color-surface-pressed)]"
     ].join(" "),
-    selected: "bg-[var(--color-teal-500)] text-[var(--color-text-inverse)]"
+    selected: "bg-[var(--color-action-primary-active)] text-[var(--color-text-inverse)]"
   },
   outlined: {
     base: [
@@ -1605,7 +1605,7 @@ function Menu({ items, children, className }) {
       Popover2,
       {
         className: [
-          "bg-[var(--color-surface-primary)] rounded-[var(--border-radius-md)]",
+          "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
           "shadow-lg border border-[var(--color-border-default)]",
           "py-1 min-w-48",
           "entering:animate-in entering:fade-in entering:zoom-in-95",
@@ -1631,8 +1631,8 @@ function Menu({ items, children, className }) {
                 className: [
                   "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
                   "transition-colors",
-                  "focus:bg-[var(--color-neutral-100)]",
-                  "hover:bg-[var(--color-neutral-100)]",
+                  "focus:bg-[var(--color-surface-muted)]",
+                  "hover:bg-[var(--color-surface-muted)]",
                   "disabled:opacity-50 disabled:pointer-events-none",
                   item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
                 ].filter(Boolean).join(" "),
@@ -1807,14 +1807,14 @@ function getTabVariantStyles(variant, state) {
         "text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
         // Bottom indicator via pseudo-element
         "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-teal-600)]"
-      ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)]" : "text-[var(--color-text-secondary)] bg-transparent"
+      ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-muted)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)]" : "text-[var(--color-text-secondary)] bg-transparent"
     ];
   }
   return [
     // Shape
     "rounded-[var(--border-radius-md)]",
     // Color states
-    state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-200)]" : "text-[var(--color-text-secondary)] bg-transparent"
+    state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-pressed)]" : "text-[var(--color-text-secondary)] bg-transparent"
   ];
 }
 function TabPanel({ className, ...props }) {
@@ -1857,12 +1857,15 @@ function NodeRenderer({
   checkedIds,
   onCheckToggle,
   selectionMode,
+  size,
   onHover,
   onHoverEnd
 }) {
   const data = node.data;
   const isCheckbox = selectionMode === "checkbox";
   const isChecked = isCheckbox && checkedIds.has(node.id);
+  const isSelected = node.isSelected && !isCheckbox;
+  const isCompact = size === "compact";
   const IconComponent = data.icon ? data.icon : node.isInternal ? Folder : File;
   return /* @__PURE__ */ jsxs19(
     "div",
@@ -1870,16 +1873,19 @@ function NodeRenderer({
       ref: dragHandle,
       style,
       className: [
-        "flex items-center gap-1 px-2 cursor-default select-none",
+        "relative flex items-center cursor-default select-none",
+        isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
         "text-[length:var(--font-size-sm)] text-[var(--color-text-primary)]",
         "outline-none",
-        "transition-colors",
-        node.isSelected && !isCheckbox ? "bg-[var(--color-teal-50)]" : "hover:bg-[var(--color-teal-50)]",
-        node.isFocused ? "ring-2 ring-inset ring-[var(--color-border-focus)]" : ""
+        // Full-width background via pseudo-element
+        "before:absolute before:inset-y-0 before:left-[-100vw] before:right-0 before:-z-10 before:transition-colors",
+        isSelected ? "before:bg-[var(--color-surface-selected)] hover:before:bg-[var(--color-surface-selected-hover)] border-l-2 border-l-[var(--color-brand-accent)]" : "hover:before:bg-[var(--color-surface-hover)]",
+        node.isFocused ? "outline-2 outline-[var(--color-border-focus)] outline-offset-[-2px]" : ""
       ].filter(Boolean).join(" "),
       role: "treeitem",
       "aria-selected": isCheckbox ? isChecked : node.isSelected,
       "aria-expanded": node.isInternal ? node.isOpen : void 0,
+      "aria-level": node.level + 1,
       onPointerEnter: () => onHover?.(node.data),
       onPointerLeave: () => onHoverEnd?.(node.data),
       onClick: (e) => {
@@ -1901,10 +1907,10 @@ function NodeRenderer({
           {
             type: "button",
             className: [
-              "flex items-center justify-center w-5 h-5 shrink-0",
+              "flex items-center justify-center w-6 h-6 shrink-0",
               "rounded-[var(--border-radius-sm)]",
               "text-[var(--color-text-secondary)]",
-              "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-100)]",
+              "hover:text-[var(--color-text-primary)]",
               "transition-transform",
               node.isInternal ? "visible" : "invisible"
             ].filter(Boolean).join(" "),
@@ -2025,7 +2031,7 @@ function Tree({
     {
       role: "tree",
       "aria-label": ariaLabel,
-      className: ["outline-none", className].filter(Boolean).join(" "),
+      className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsx28(
         ArboristTree,
         {
@@ -2052,6 +2058,7 @@ function Tree({
               checkedIds,
               onCheckToggle: handleCheckToggle,
               selectionMode,
+              size,
               onHover,
               onHoverEnd
             }
@@ -2139,20 +2146,20 @@ import { AlertCircle, Database, Info as Info2 } from "lucide-react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var statusDotStyles = {
-  connected: "bg-emerald-500",
-  error: "bg-red-500",
-  loading: "bg-amber-500 animate-pulse"
+  connected: "bg-[var(--color-status-success)]",
+  error: "border-2 border-[var(--color-status-danger)] bg-transparent",
+  loading: "bg-[var(--color-status-warning)] animate-pulse"
 };
 var providerConfig = {
-  aws: { label: "AWS", color: "bg-orange-100 text-orange-700" },
-  azure: { label: "Azure", color: "bg-blue-100 text-blue-700" },
-  gcp: { label: "GCP", color: "bg-sky-100 text-sky-700" },
-  minio: { label: "MinIO", color: "bg-red-100 text-red-700" }
+  aws: { label: "AWS", color: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]" },
+  azure: { label: "Azure", color: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]" },
+  gcp: { label: "GCP", color: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]" },
+  minio: { label: "MinIO", color: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]" }
 };
 function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
-  const colorClass = config?.color ?? "bg-neutral-100 text-neutral-700";
+  const colorClass = config?.color ?? "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]";
   return /* @__PURE__ */ jsx30(
     "span",
     {
@@ -2165,7 +2172,7 @@ function ProviderBadge({ provider }) {
   );
 }
 function PreviewArea({
-  status,
+  status = "connected",
   errorMessage,
   children
 }) {
@@ -2173,16 +2180,16 @@ function PreviewArea({
     return /* @__PURE__ */ jsx30("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx30(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-red-950/20 px-4", children: [
+    return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
       /* @__PURE__ */ jsx30(
         Icon,
         {
           icon: AlertCircle,
           size: "lg",
-          className: "text-red-400"
+          className: "text-[var(--color-text-danger)]"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx30("p", { className: "text-center text-xs text-red-300", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx30("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
     ] });
   }
   if (children) {
@@ -2193,7 +2200,7 @@ function PreviewArea({
     {
       icon: Database,
       size: "xl",
-      className: "text-[var(--color-neutral-600)]"
+      className: "text-[var(--color-text-secondary)]"
     }
   ) });
 }
@@ -2213,7 +2220,7 @@ function StorageConnectionCard({
     /* @__PURE__ */ jsx30("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx30(PreviewArea, { status, errorMessage, children }) }),
     /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
       /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx30(
+        status && /* @__PURE__ */ jsx30(
           "span",
           {
             className: twMerge7(
@@ -2238,10 +2245,10 @@ function StorageConnectionCard({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 pl-4", children: [
-        /* @__PURE__ */ jsx30(ProviderBadge, { provider }),
-        region && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
-        imageCount != null && status === "connected" && /* @__PURE__ */ jsxs20("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
+      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs20("div", { className: twMerge7("flex items-center gap-2", status && "pl-4"), children: [
+        provider && /* @__PURE__ */ jsx30(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs20("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
           imageCount,
           " ",
           imageCount === 1 ? "image" : "images"
@@ -2361,6 +2368,10 @@ var ColorSurfaceSuccess = "#f0fdf4";
 var ColorSurfaceWarning = "#fffbeb";
 var ColorSurfaceInfo = "#f8fafc";
 var ColorSurfaceOverlay = "#000000cc";
+var ColorSurfaceHover = "#f3f4f6";
+var ColorSurfacePressed = "#e5e7eb";
+var ColorSurfaceSelected = "#edf9f9";
+var ColorSurfaceSelectedHover = "#d0f0f0";
 var ColorBorderDefault = "#e5e7eb";
 var ColorBorderStrong = "#d1d5db";
 var ColorBorderBrand = "#5c2483";
@@ -2371,6 +2382,19 @@ var ColorBorderSuccess = "#16a34a";
 var ColorBorderInfo = "#94a3b8";
 var ColorBorderWarning = "#d97706";
 var ColorOverlayBackdrop = "#00000066";
+var ColorStatusSuccess = "#22c55e";
+var ColorStatusDanger = "#f43f5e";
+var ColorStatusWarning = "#d97706";
+var ColorBadgePurpleBg = "#ead9f5";
+var ColorBadgePurpleText = "#5c2483";
+var ColorBadgeTealBg = "#d0f0f0";
+var ColorBadgeTealText = "#217d7e";
+var ColorBadgeSlateBg = "#f1f5f9";
+var ColorBadgeSlateText = "#334155";
+var ColorBadgeRoseBg = "#ffe4e6";
+var ColorBadgeRoseText = "#be123c";
+var ColorBadgeNeutralBg = "#f3f4f6";
+var ColorBadgeNeutralText = "#374151";
 var Spacing1 = "4px";
 var Spacing2 = "8px";
 var Spacing3 = "12px";
@@ -2428,6 +2452,16 @@ export {
   ColorActionSecondaryHover,
   ColorActionSuccess,
   ColorActionSuccessHover,
+  ColorBadgeNeutralBg,
+  ColorBadgeNeutralText,
+  ColorBadgePurpleBg,
+  ColorBadgePurpleText,
+  ColorBadgeRoseBg,
+  ColorBadgeRoseText,
+  ColorBadgeSlateBg,
+  ColorBadgeSlateText,
+  ColorBadgeTealBg,
+  ColorBadgeTealText,
   ColorBorderAccent,
   ColorBorderBrand,
   ColorBorderDanger,
@@ -2493,13 +2527,20 @@ export {
   ColorSlate700,
   ColorSlate800,
   ColorSlate900,
+  ColorStatusDanger,
+  ColorStatusSuccess,
+  ColorStatusWarning,
   ColorSurfaceAccent,
   ColorSurfaceBrand,
   ColorSurfaceDanger,
   ColorSurfaceDefault,
+  ColorSurfaceHover,
   ColorSurfaceInfo,
   ColorSurfaceMuted,
   ColorSurfaceOverlay,
+  ColorSurfacePressed,
+  ColorSurfaceSelected,
+  ColorSurfaceSelectedHover,
   ColorSurfaceSubtle,
   ColorSurfaceSuccess,
   ColorSurfaceWarning,