@juv/codego-react-ui 3.2.8 → 3.3.1

package/dist/index.global.js

@@ -271,7 +271,7 @@ var CodegoUI = (() => {
         }
         console.error(error);
       };
-      var Children = {
+      var Children2 = {
         map: mapChildren,
         forEach: function(children, forEachFunc, forEachContext) {
           mapChildren(
@@ -303,7 +303,7 @@ var CodegoUI = (() => {
         }
       };
       exports.Activity = REACT_ACTIVITY_TYPE;
-      exports.Children = Children;
+      exports.Children = Children2;
       exports.Component = Component;
       exports.Fragment = REACT_FRAGMENT_TYPE;
       exports.Profiler = REACT_PROFILER_TYPE;
@@ -69673,15 +69673,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
   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 });
@@ -69943,8 +69944,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     itemId,
     onClose,
     onSuccess,
-    notif,
-    width
+    notif
   }) {
     const [loading, setLoading] = React28.useState(false);
     const [error, setError] = React28.useState(null);
@@ -69966,7 +69966,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         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: [
@@ -69986,17 +69986,19 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     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,
@@ -70105,6 +70107,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               defaultIcon: extra.icon,
               defaultLabel: extra.label ?? extra.key,
               defaultVariant: extra.variant ?? "outline",
+              defaultSize: defaultActions.actionsSize,
               onClick: () => extra.onClick(item)
             },
             extra.key
@@ -70483,7 +70486,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           baseUrl: defaultActions.baseUrl,
           itemId: String(deleteItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
-          width: defaultActions.modalWidth,
           onClose: () => setDeleteItem(null),
           onSuccess: (deleted) => {
             setTableData(
@@ -70579,17 +70581,19 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     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,
@@ -70633,15 +70637,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
   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 });
@@ -70812,8 +70817,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     itemId,
     onClose,
     onSuccess,
-    notif,
-    width
+    notif
   }) {
     const [loading, setLoading] = React29.useState(false);
     const [error, setError] = React29.useState(null);
@@ -70835,7 +70839,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         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: [
@@ -70956,6 +70960,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Eye, { className: "h-3.5 w-3.5" }),
             defaultLabel: "View",
             defaultVariant: "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => setViewItem(row)
           }
         ),
@@ -70966,6 +70971,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pencil, { className: "h-3.5 w-3.5" }),
             defaultLabel: "Edit",
             defaultVariant: "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => setEditItem(row)
           }
         ),
@@ -70976,6 +70982,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Trash, { className: "h-3.5 w-3.5" }),
             defaultLabel: "Delete",
             defaultVariant: "danger",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => setDeleteItem(row)
           }
         ),
@@ -70986,6 +70993,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: extra.icon,
             defaultLabel: extra.label ?? extra.key,
             defaultVariant: extra.variant ?? "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => extra.onClick(row)
           },
           extra.key
@@ -71219,7 +71227,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           baseUrl: defaultActions.baseUrl,
           itemId: String(deleteItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
-          width: defaultActions.modalWidth,
           onClose: () => setDeleteItem(null),
           onSuccess: (deleted) => {
             setTableData((prev) => prev.filter((r2) => String(r2[actionIdKey]) !== String(deleted[actionIdKey])));
@@ -74441,6 +74448,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   // src/components/ui/panel.tsx
   var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
   var PanelCollapsedContext = React42.createContext(false);
+  var PanelGroupsContext = React42.createContext({ expandedGroups: /* @__PURE__ */ new Set(), onGroupToggle: () => {
+  } });
   function PanelThemeToggle() {
     const { theme, setTheme } = useTheme();
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
@@ -74467,15 +74476,109 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     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] = React42.useState(defaultCollapsed);
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelCollapsedContext.Provider, { value: collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    const [internalCollapsed, setInternalCollapsed] = React42.useState(defaultCollapsed);
+    const [internalPage, setInternalPage] = React42.useState(defaultPage || "");
+    const [internalExpandedGroups, setInternalExpandedGroups] = React42.useState(
+      new Set(controlledExpandedGroups)
+    );
+    const [isMobile, setIsMobile] = React42.useState(false);
+    const [internalMobileCollapsed, setInternalMobileCollapsed] = React42.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);
+    };
+    React42.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 = React42.useCallback(
+      (e) => {
+        if (!keyboardNavigation) return;
+        if (e.key === "Escape" && !isCollapsed && collapsible) {
+          handleCollapsedChange(true);
+        }
+        if (e.key === "Enter" && isCollapsed && collapsible) {
+          handleCollapsedChange(false);
+        }
+      },
+      [keyboardNavigation, isCollapsed, collapsible]
+    );
+    React42.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 = React42.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(
@@ -74483,6 +74586,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           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]" }),
@@ -74492,23 +74596,36 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             "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
+                  }
+                )
               ]
             }
           ),
@@ -74518,16 +74635,22 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                 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)(PanelLeftOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelLeftClose, { className: "h-5 w-5" })
+                        "aria-label": effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                        children: effectiveCollapsed ? expandIcon || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelLeftOpen, { className: "h-5 w-5" }) : collapseIcon || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PanelLeftClose, { className: "h-5 w-5" })
                       }
                     )
                   }
@@ -74539,11 +74662,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                 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)(LoaderCircle, { 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: Icon2,
@@ -74574,10 +74702,20 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     children
   }) {
     const collapsed = React42.useContext(PanelCollapsedContext);
+    const { expandedGroups, onGroupToggle } = React42.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 })
     ] });
   }