@juv/codego-react-ui 3.2.8 → 3.3.1

package/dist/index.cjs

@@ -6527,15 +6527,16 @@ function validateField(field, value) {
 }
 function FieldRenderer({ field, value, onChange }) {
   if (field.render) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: field.render(value, onChange) });
+  const toLabelValue = (o) => {
+    if (typeof o === "string") return { label: o, value: o };
+    if (Array.isArray(o)) return { label: o[0], value: o[1] };
+    return o;
+  };
   const strOptions = (field.options ?? []).map(
-    (o) => typeof o === "string" ? o : o.value
-  );
-  const comboOptions = (field.options ?? []).map(
-    (o) => typeof o === "string" ? { label: o, value: o } : o
-  );
-  const radioOptions = (field.options ?? []).map(
-    (o) => typeof o === "string" ? { label: o, value: o } : o
+    (o) => typeof o === "string" ? o : Array.isArray(o) ? o[1] : o.value
   );
+  const comboOptions = (field.options ?? []).map(toLabelValue);
+  const radioOptions = (field.options ?? []).map(toLabelValue);
   switch (field.type) {
     case "textarea":
       return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Textarea, { value: value ?? "", onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, rows: 3 });
@@ -6797,8 +6798,7 @@ function DeleteModal({
   itemId,
   onClose,
   onSuccess,
-  notif,
-  width
+  notif
 }) {
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
@@ -6820,7 +6820,7 @@ function DeleteModal({
     {
       title: "Confirm Delete",
       onClose,
-      width,
+      width: "lg",
       footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
@@ -6840,17 +6840,19 @@ function ActionBtn({
   defaultIcon,
   defaultLabel,
   defaultVariant,
+  defaultSize,
   onClick
 }) {
   const mode = cfg?.displayMode ?? "icon";
   const icon = cfg?.icon ?? defaultIcon;
   const label = cfg?.label ?? defaultLabel;
+  const buttonSize = cfg?.size ?? defaultSize ?? "xs";
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Button,
     {
       type: "button",
       title: label,
-      size: cfg?.size ?? "xs",
+      size: buttonSize,
       variant: cfg?.variant ?? defaultVariant,
       rounded: cfg?.rounded ?? "lg",
       gradientFrom: cfg?.gradientFrom,
@@ -6959,6 +6961,7 @@ function Table({
             defaultIcon: extra.icon,
             defaultLabel: extra.label ?? extra.key,
             defaultVariant: extra.variant ?? "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => extra.onClick(item)
           },
           extra.key
@@ -7337,7 +7340,6 @@ function Table({
         baseUrl: defaultActions.baseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
-        width: defaultActions.modalWidth,
         onClose: () => setDeleteItem(null),
         onSuccess: (deleted) => {
           setTableData(
@@ -7433,17 +7435,19 @@ function ActionBtn2({
   defaultIcon,
   defaultLabel,
   defaultVariant,
+  defaultSize,
   onClick
 }) {
   const mode = cfg?.displayMode ?? "icon";
   const icon = cfg?.icon ?? defaultIcon;
   const label = cfg?.label ?? defaultLabel;
+  const buttonSize = cfg?.size ?? defaultSize ?? "xs";
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Button,
     {
       type: "button",
       title: label,
-      size: cfg?.size ?? "xs",
+      size: buttonSize,
       variant: cfg?.variant ?? defaultVariant,
       rounded: cfg?.rounded ?? "lg",
       gradientFrom: cfg?.gradientFrom,
@@ -7487,15 +7491,16 @@ function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
 }
 function DGFieldRenderer({ field, value, onChange }) {
   if (field.render) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: field.render(value, onChange) });
+  const toLabelValue = (o) => {
+    if (typeof o === "string") return { label: o, value: o };
+    if (Array.isArray(o)) return { label: o[0], value: o[1] };
+    return o;
+  };
   const strOptions = (field.options ?? []).map(
-    (o) => typeof o === "string" ? o : o.value
-  );
-  const comboOptions = (field.options ?? []).map(
-    (o) => typeof o === "string" ? { label: o, value: o } : o
-  );
-  const radioOptions = (field.options ?? []).map(
-    (o) => typeof o === "string" ? { label: o, value: o } : o
+    (o) => typeof o === "string" ? o : Array.isArray(o) ? o[1] : o.value
   );
+  const comboOptions = (field.options ?? []).map(toLabelValue);
+  const radioOptions = (field.options ?? []).map(toLabelValue);
   switch (field.type) {
     case "textarea":
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Textarea, { value: value ?? "", onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, rows: 3 });
@@ -7666,8 +7671,7 @@ function DGDeleteModal({
   itemId,
   onClose,
   onSuccess,
-  notif,
-  width
+  notif
 }) {
   const [loading, setLoading] = React29.useState(false);
   const [error, setError] = React29.useState(null);
@@ -7689,7 +7693,7 @@ function DGDeleteModal({
     {
       title: "Confirm Delete",
       onClose,
-      width,
+      width: "lg",
       footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { onClick: handleDelete, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-danger text-danger-foreground hover:bg-danger-hover transition-colors flex items-center gap-1.5", children: [
@@ -7810,6 +7814,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Eye, { className: "h-3.5 w-3.5" }),
           defaultLabel: "View",
           defaultVariant: "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setViewItem(row)
         }
       ),
@@ -7820,6 +7825,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Pencil, { className: "h-3.5 w-3.5" }),
           defaultLabel: "Edit",
           defaultVariant: "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setEditItem(row)
         }
       ),
@@ -7830,6 +7836,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Trash, { className: "h-3.5 w-3.5" }),
           defaultLabel: "Delete",
           defaultVariant: "danger",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setDeleteItem(row)
         }
       ),
@@ -7840,6 +7847,7 @@ function DataGrid({
           defaultIcon: extra.icon,
           defaultLabel: extra.label ?? extra.key,
           defaultVariant: extra.variant ?? "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => extra.onClick(row)
         },
         extra.key
@@ -8073,7 +8081,6 @@ function DataGrid({
         baseUrl: defaultActions.baseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
-        width: defaultActions.modalWidth,
         onClose: () => setDeleteItem(null),
         onSuccess: (deleted) => {
           setTableData((prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey])));
@@ -10877,6 +10884,8 @@ var useTheme = () => {
 // src/components/ui/panel.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var PanelCollapsedContext = React40.createContext(false);
+var PanelGroupsContext = React40.createContext({ expandedGroups: /* @__PURE__ */ new Set(), onGroupToggle: () => {
+} });
 function PanelThemeToggle() {
   const { theme, setTheme } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
@@ -10903,15 +10912,109 @@ function Panel({
   topbar,
   topbarTrailing,
   defaultCollapsed = false,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
   collapsible = false,
   showThemeToggle = false,
   defaultPage,
+  currentPage: controlledPage,
+  onPageChange,
   height = "h-[520px]",
   children,
-  className
+  className,
+  loading = false,
+  emptyState,
+  error = null,
+  showGroupDividers = false,
+  expandedGroups: controlledExpandedGroups,
+  onGroupToggle,
+  theme: themeProp,
+  collapseIcon,
+  expandIcon,
+  meta,
+  actions,
+  keyboardNavigation = false,
+  draggable = false,
+  onSidebarReorder,
+  animationDuration = 200,
+  animationEasing = "ease-in-out",
+  sidebarTooltip,
+  mobileBreakpoint = 768,
+  mobileCollapsed: controlledMobileCollapsed,
+  onMobileCollapseChange
 }) {
-  const [collapsed, setCollapsed] = React40.useState(defaultCollapsed);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelCollapsedContext.Provider, { value: collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  const [internalCollapsed, setInternalCollapsed] = React40.useState(defaultCollapsed);
+  const [internalPage, setInternalPage] = React40.useState(defaultPage || "");
+  const [internalExpandedGroups, setInternalExpandedGroups] = React40.useState(
+    new Set(controlledExpandedGroups)
+  );
+  const [isMobile, setIsMobile] = React40.useState(false);
+  const [internalMobileCollapsed, setInternalMobileCollapsed] = React40.useState(true);
+  const isCollapsed = controlledCollapsed !== void 0 ? controlledCollapsed : internalCollapsed;
+  const currentPage = controlledPage !== void 0 ? controlledPage : internalPage;
+  const expandedGroups = controlledExpandedGroups !== void 0 ? new Set(controlledExpandedGroups) : internalExpandedGroups;
+  const mobileCollapsed = controlledMobileCollapsed !== void 0 ? controlledMobileCollapsed : internalMobileCollapsed;
+  const handleCollapsedChange = (value) => {
+    if (controlledCollapsed === void 0) setInternalCollapsed(value);
+    onCollapsedChange?.(value);
+  };
+  const handlePageChange = (page) => {
+    if (controlledPage === void 0) setInternalPage(page);
+    onPageChange?.(page);
+  };
+  const handleGroupToggle = (title, expanded) => {
+    if (controlledExpandedGroups === void 0) {
+      setInternalExpandedGroups((prev) => {
+        const next = new Set(prev);
+        if (expanded) next.add(title);
+        else next.delete(title);
+        return next;
+      });
+    }
+    onGroupToggle?.(title, expanded);
+  };
+  const handleMobileCollapseChange = (value) => {
+    if (controlledMobileCollapsed === void 0) setInternalMobileCollapsed(value);
+    onMobileCollapseChange?.(value);
+  };
+  React40.useEffect(() => {
+    const handleResize = () => {
+      const mobile = window.innerWidth < mobileBreakpoint;
+      setIsMobile(mobile);
+      if (mobile && !internalMobileCollapsed) {
+        handleMobileCollapseChange(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [mobileBreakpoint, internalMobileCollapsed]);
+  const handleKeyDown = React40.useCallback(
+    (e) => {
+      if (!keyboardNavigation) return;
+      if (e.key === "Escape" && !isCollapsed && collapsible) {
+        handleCollapsedChange(true);
+      }
+      if (e.key === "Enter" && isCollapsed && collapsible) {
+        handleCollapsedChange(false);
+      }
+    },
+    [keyboardNavigation, isCollapsed, collapsible]
+  );
+  React40.useEffect(() => {
+    if (keyboardNavigation) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [keyboardNavigation, handleKeyDown]);
+  const effectiveCollapsed = isMobile ? mobileCollapsed : isCollapsed;
+  const animStyle = {
+    transitionDuration: `${animationDuration}ms`,
+    transitionTimingFunction: animationEasing
+  };
+  const hasContent = React40.Children.count(children) > 0;
+  const showEmpty = !loading && !hasContent && emptyState;
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelCollapsedContext.Provider, { value: effectiveCollapsed, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelGroupsContext.Provider, { value: { expandedGroups, onGroupToggle: handleGroupToggle }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       className: cn(
@@ -10919,6 +11022,7 @@ function Panel({
         height,
         className
       ),
+      style: { ...animStyle },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute -top-[40%] -left-[20%] h-[80%] w-[60%] rounded-full bg-primary/10 blur-[120px]" }),
@@ -10928,23 +11032,36 @@ function Panel({
           "aside",
           {
             className: cn(
-              "relative z-10 flex flex-col shrink-0 border-r border-border transition-all duration-200",
-              collapsed ? "w-14" : sidebarWidth
+              "relative z-10 flex flex-col shrink-0 border-r border-border transition-all",
+              effectiveCollapsed ? "w-14" : sidebarWidth
             ),
+            style: { transitionDuration: `${animationDuration}ms`, transitionTimingFunction: animationEasing },
             children: [
-              (sidebarBrand || sidebarHeader) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn(
-                "shrink-0 border-b border-border",
-                collapsed ? "flex items-center justify-center py-3" : "flex items-center gap-2 px-4 py-3"
-              ), children: sidebarBrand ? collapsed ? sidebarBrand.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarBrand.icon }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-                sidebarBrand.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : sidebarBrand.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarBrand.icon }),
-                sidebarBrand.title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex-1 truncate text-sm font-semibold", children: sidebarBrand.title }),
-                sidebarBrand.trailing && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarBrand.trailing })
-              ] }) : !collapsed && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-sm font-semibold", children: sidebarHeader }) }),
+              (sidebarBrand || sidebarHeader) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0 border-b border-border",
+                    effectiveCollapsed ? "flex items-center justify-center py-3" : "flex items-center gap-2 px-4 py-3"
+                  ),
+                  children: sidebarBrand ? effectiveCollapsed ? sidebarBrand.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarBrand.icon }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+                    sidebarBrand.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : sidebarBrand.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarBrand.icon }),
+                    sidebarBrand.title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex-1 truncate text-sm font-semibold", children: sidebarBrand.title }),
+                    sidebarBrand.trailing && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarBrand.trailing })
+                  ] }) : !effectiveCollapsed && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-sm font-semibold", children: sidebarHeader })
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1 overflow-y-auto py-2", children: sidebar }),
-              (sidebarProfile || sidebarFooter) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn(
-                "shrink-0 border-t border-border",
-                collapsed ? "flex items-center justify-center py-3" : "px-4 py-3"
-              ), children: sidebarProfile ? collapsed ? sidebarProfile.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarProfile.image, alt: "profile", className: "h-7 w-7 rounded-full object-cover shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarProfile.icon }) : sidebarProfile.content ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center gap-2", children: sidebarProfile.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarProfile.image, alt: "profile", className: "h-7 w-7 rounded-full object-cover shrink-0" }) : sidebarProfile.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarProfile.icon }) }) : !collapsed && sidebarFooter })
+              (sidebarProfile || sidebarFooter) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0 border-t border-border",
+                    effectiveCollapsed ? "flex items-center justify-center py-3" : "px-4 py-3"
+                  ),
+                  children: sidebarProfile ? effectiveCollapsed ? sidebarProfile.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarProfile.image, alt: "profile", className: "h-7 w-7 rounded-full object-cover shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarProfile.icon }) : sidebarProfile.content ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center gap-2", children: sidebarProfile.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src: sidebarProfile.image, alt: "profile", className: "h-7 w-7 rounded-full object-cover shrink-0" }) : sidebarProfile.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "shrink-0", children: sidebarProfile.icon }) }) : !effectiveCollapsed && sidebarFooter
+                }
+              )
             ]
           }
         ),
@@ -10954,16 +11071,22 @@ function Panel({
               collapsible && sidebar && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 Tooltip,
                 {
-                  content: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  content: effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
                   side: "bottom",
                   children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     "button",
                     {
                       type: "button",
-                      onClick: () => setCollapsed((c) => !c),
+                      onClick: () => {
+                        if (isMobile) {
+                          handleMobileCollapseChange(!mobileCollapsed);
+                        } else {
+                          handleCollapsedChange(!isCollapsed);
+                        }
+                      },
                       className: "text-muted-foreground hover:text-foreground transition-colors",
-                      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                      children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.PanelLeftOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.PanelLeftClose, { className: "h-5 w-5" })
+                      "aria-label": effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                      children: effectiveCollapsed ? expandIcon || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.PanelLeftOpen, { className: "h-5 w-5" }) : collapseIcon || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.PanelLeftClose, { className: "h-5 w-5" })
                     }
                   )
                 }
@@ -10975,11 +11098,16 @@ function Panel({
               showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelThemeToggle, {})
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("main", { className: "flex-1 overflow-y-auto p-4", children })
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("main", { className: "flex-1 overflow-y-auto p-4", children: [
+            error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mb-4 p-3 rounded-md bg-destructive/10 text-destructive text-sm", children: error }),
+            loading && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }),
+            showEmpty && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: emptyState }),
+            !loading && !showEmpty && children
+          ] })
         ] })
       ]
     }
-  ) });
+  ) }) });
 }
 function PanelSidebarItem({
   icon: Icon,
@@ -11010,10 +11138,20 @@ function PanelSidebarGroup({
   children
 }) {
   const collapsed = React40.useContext(PanelCollapsedContext);
+  const { expandedGroups, onGroupToggle } = React40.useContext(PanelGroupsContext);
+  const isExpanded = title ? expandedGroups.has(title) : true;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "px-2 py-1", children: [
-    title && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+    title && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onGroupToggle(title, !isExpanded),
+        className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors w-full text-left",
+        children: title
+      }
+    ),
     title && collapsed && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mx-1 mb-1 h-px bg-border" }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("main", { className: "space-y-0.5", children })
+    (!title || isExpanded) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("main", { className: "space-y-0.5", children })
   ] });
 }