@flamingo-stack/openframe-frontend-core 0.0.442 → 0.0.443

package/dist/{chunk-ZQYFDYWV.js → chunk-NQODKJ2F.js}

@@ -27,7 +27,7 @@ import {
   useOgPlaceholderUrl,
   useOnboardingState,
   useToast
-} from "./chunk-2BTDPDME.js";
+} from "./chunk-MG4AMIFX.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -31937,7 +31937,7 @@ function ViewToggle({
 // src/components/features/policy-configuration-panel.tsx
 init_cn();
 import { useRef as useRef37, useEffect as useEffect52, useState as useState71 } from "react";
-import { ChevronDown as ChevronDown8 } from "lucide-react";
+import { ChevronDown as ChevronDown8, Shield as Shield2 } from "lucide-react";
 init_button2();
 import { Fragment as Fragment43, jsx as jsx253, jsxs as jsxs197 } from "react/jsx-runtime";
 var approvalLevelOptions = [
@@ -31953,33 +31953,68 @@ var getApprovalLevelLabel = (level, editMode = false) => {
   const option = approvalLevelOptions.find((opt) => opt.value === level);
   return option?.label || level;
 };
+var ApprovalLevelDropdown = ({ value, onChange, allowClear = false, triggerClassName, contentClassName }) => /* @__PURE__ */ jsxs197(DropdownMenu, { children: [
+  /* @__PURE__ */ jsx253(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx253(
+    Button,
+    {
+      variant: "outline",
+      rightIcon: /* @__PURE__ */ jsx253(ChevronDown8, { className: "h-6 w-6 text-ods-text-secondary" }),
+      className: cn(
+        "!text-h6 bg-ods-card border border-ods-border rounded-md flex gap-[var(--spacing-system-xsf)] items-center justify-between !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] hover:bg-ods-bg-hover transition-colors h-auto",
+        value ? "text-ods-text-primary" : "text-ods-text-secondary",
+        triggerClassName
+      ),
+      children: getApprovalLevelLabel(value, true)
+    }
+  ) }),
+  /* @__PURE__ */ jsxs197(DropdownMenuContent, { align: "end", className: contentClassName, children: [
+    allowClear && /* @__PURE__ */ jsx253(DropdownMenuItem, { onClick: () => onChange(void 0), className: "text-h6", children: "Clear Global Permission" }),
+    approvalLevelOptions.map((option) => /* @__PURE__ */ jsx253(
+      DropdownMenuItem,
+      {
+        onClick: () => onChange(option.value),
+        className: "text-h6",
+        children: option.label
+      },
+      option.value
+    ))
+  ] })
+] });
 var PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
-  return /* @__PURE__ */ jsxs197("div", { className: "bg-ods-bg border-b border-ods-border flex gap-4 items-center px-4 py-3", children: [
-    /* @__PURE__ */ jsx253("div", { className: "bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8", children: /* @__PURE__ */ jsx253(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
+  const handleChange = (level) => {
+    if (level) onPermissionChange(categoryId, policy.id, level);
+  };
+  return /* @__PURE__ */ jsxs197("div", { className: "bg-ods-bg border-b last:border-b-0 border-ods-border flex gap-[var(--spacing-system-m)] items-start md:items-center px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)]", children: [
+    /* @__PURE__ */ jsx253("div", { className: "bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0", children: /* @__PURE__ */ jsx253(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
     /* @__PURE__ */ jsxs197("div", { className: "flex-1 flex flex-col min-w-0", children: [
-      /* @__PURE__ */ jsx253("p", { className: "text-h6 text-ods-text-primary truncate", title: policy.name, children: policy.name }),
-      /* @__PURE__ */ jsx253("p", { className: "text-code text-ods-text-secondary break-all", children: policy.commandPattern })
-    ] }),
-    editMode ? /* @__PURE__ */ jsxs197(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx253(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx253(
-        Button,
+      /* @__PURE__ */ jsx253("p", { className: "text-h4 text-ods-text-primary truncate", title: policy.name, children: policy.name }),
+      /* @__PURE__ */ jsx253(
+        "p",
         {
-          variant: "outline",
-          rightIcon: /* @__PURE__ */ jsx253(ChevronDown8, { className: "h-6 w-6 text-ods-text-secondary" }),
-          className: "md:!text-sm bg-ods-card border border-ods-border rounded-md flex gap-2 items-center justify-between !px-2 py-2 w-[180px] hover:bg-ods-bg-hover transition-colors text-ods-text-primary h-auto",
-          children: getApprovalLevelLabel(policy.approvalLevel, editMode)
+          className: "text-h6 text-ods-text-secondary truncate md:whitespace-normal md:break-all",
+          title: policy.commandPattern,
+          children: policy.commandPattern
         }
-      ) }),
-      /* @__PURE__ */ jsx253(DropdownMenuContent, { align: "end", className: "w-[180px]", children: approvalLevelOptions.map((option) => /* @__PURE__ */ jsx253(
-        DropdownMenuItem,
+      ),
+      editMode ? /* @__PURE__ */ jsx253("div", { className: "md:hidden mt-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx253(
+        ApprovalLevelDropdown,
         {
-          onClick: () => onPermissionChange(categoryId, policy.id, option.value),
-          className: "text-h6",
-          children: option.label
-        },
-        option.value
-      )) })
-    ] }) : policy.approvalLevel ? /* @__PURE__ */ jsx253("div", { className: "px-3 py-2 w-[180px]", children: /* @__PURE__ */ jsx253("span", { className: "text-h6 text-ods-text-primary", children: getApprovalLevelLabel(policy.approvalLevel, editMode) }) }) : /* @__PURE__ */ jsx253("div", { className: "px-3 py-2 w-[180px]" })
+          value: policy.approvalLevel,
+          onChange: handleChange,
+          triggerClassName: "w-full",
+          contentClassName: "w-[180px]"
+        }
+      ) }) : policy.approvalLevel ? /* @__PURE__ */ jsx253("span", { className: "md:hidden text-h4 text-ods-text-primary", children: getApprovalLevelLabel(policy.approvalLevel) }) : null
+    ] }),
+    /* @__PURE__ */ jsx253("div", { className: "hidden md:block shrink-0", children: editMode ? /* @__PURE__ */ jsx253(
+      ApprovalLevelDropdown,
+      {
+        value: policy.approvalLevel,
+        onChange: handleChange,
+        triggerClassName: "w-[180px]",
+        contentClassName: "w-[180px]"
+      }
+    ) : /* @__PURE__ */ jsx253("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[180px]", children: policy.approvalLevel && /* @__PURE__ */ jsx253("span", { className: "text-h4 text-ods-text-primary", children: getApprovalLevelLabel(policy.approvalLevel) }) }) })
   ] });
 };
 var useAnimatedHeight = (isExpanded) => {
@@ -31996,69 +32031,52 @@ var useAnimatedHeight = (isExpanded) => {
 var CategorySection = ({
   category,
   editMode,
-  onCategoryToggle,
-  onGlobalPermissionChange,
+  isExpanded,
+  bulkLevel,
+  onToggle,
+  onBulkLevelChange,
   onPolicyPermissionChange
 }) => {
-  const { contentRef, height } = useAnimatedHeight(category.isExpanded);
+  const { contentRef, height } = useAnimatedHeight(isExpanded);
+  const handleBulkChange = (level) => onBulkLevelChange(category.id, level);
   return /* @__PURE__ */ jsxs197(Fragment43, { children: [
     /* @__PURE__ */ jsxs197(
       "div",
       {
-        className: "bg-ods-card border-t border-ods-border flex gap-4 items-center pl-4 pr-2 py-3 cursor-pointer hover:bg-ods-bg-hover transition-colors",
-        onClick: () => onCategoryToggle(category.id),
+        className: "bg-ods-card border-t first:border-t-0 border-ods-border flex gap-[var(--spacing-system-m)] items-center pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] py-[var(--spacing-system-s)] cursor-pointer hover:bg-ods-bg-hover transition-colors",
+        onClick: () => onToggle(category.id),
         children: [
-          /* @__PURE__ */ jsx253("div", { className: "bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8", children: /* @__PURE__ */ jsx253("div", { className: "text-ods-text-secondary", children: category.icon }) }),
-          /* @__PURE__ */ jsxs197("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx253("p", { className: "md:!text-sm font-medium text-ods-text-primary", children: category.name }),
+          /* @__PURE__ */ jsx253("div", { className: "bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0", children: /* @__PURE__ */ jsx253("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx253(Shield2, { className: "w-4 h-4" }) }) }),
+          /* @__PURE__ */ jsxs197("div", { className: "flex-1 flex flex-col min-w-0", children: [
+            /* @__PURE__ */ jsx253("p", { className: "text-h4 text-ods-text-primary truncate", title: category.name, children: category.name }),
             /* @__PURE__ */ jsxs197("p", { className: "text-h6 text-ods-text-secondary", children: [
-              category.configurationsCount,
+              category.policies.length,
               " Configurations"
-            ] })
-          ] }),
-          editMode ? /* @__PURE__ */ jsx253("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs197(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx253(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx253(
-              Button,
+            ] }),
+            editMode && /* @__PURE__ */ jsx253("div", { className: "md:hidden mt-[var(--spacing-system-xsf)]", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx253(
+              ApprovalLevelDropdown,
               {
-                variant: "outline",
-                rightIcon: /* @__PURE__ */ jsx253(ChevronDown8, { className: "h-6 w-6 text-ods-text-secondary" }),
-                className: "md:!text-sm bg-ods-card border border-ods-border rounded-md flex gap-2 items-center justify-between !px-2 py-2 w-[256px] hover:bg-ods-bg-hover transition-colors h-auto",
-                children: /* @__PURE__ */ jsx253("span", { className: cn(
-                  "md:!text-sm font-medium",
-                  category.globalPermission ? "text-ods-text-primary" : "text-ods-text-secondary"
-                ), children: getApprovalLevelLabel(category.globalPermission, editMode) })
+                value: bulkLevel,
+                onChange: handleBulkChange,
+                allowClear: true,
+                triggerClassName: "w-full",
+                contentClassName: "w-[256px]"
               }
-            ) }),
-            /* @__PURE__ */ jsxs197(DropdownMenuContent, { align: "end", className: "w-[256px]", children: [
-              /* @__PURE__ */ jsx253(
-                DropdownMenuItem,
-                {
-                  onClick: () => onGlobalPermissionChange(category.id, void 0),
-                  className: "md:!text-sm",
-                  children: "Clear Global Permission"
-                }
-              ),
-              approvalLevelOptions.map((option) => /* @__PURE__ */ jsx253(
-                DropdownMenuItem,
-                {
-                  onClick: () => onGlobalPermissionChange(category.id, option.value),
-                  className: "md:!text-sm",
-                  children: option.label
-                },
-                option.value
-              ))
-            ] })
-          ] }) }) : category.globalPermission ? /* @__PURE__ */ jsx253(
-            "div",
+            ) })
+          ] }),
+          editMode ? /* @__PURE__ */ jsx253("div", { className: "hidden md:block shrink-0", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx253(
+            ApprovalLevelDropdown,
             {
-              className: "px-3 py-2 w-[256px]",
-              onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx253("span", { className: "md:!text-sm font-medium text-ods-text-primary", children: getApprovalLevelLabel(category.globalPermission, editMode) })
+              value: bulkLevel,
+              onChange: handleBulkChange,
+              allowClear: true,
+              triggerClassName: "w-[256px]",
+              contentClassName: "w-[256px]"
             }
-          ) : /* @__PURE__ */ jsx253(
+          ) }) : /* @__PURE__ */ jsx253(
             "div",
             {
-              className: "px-3 py-2 w-[256px]",
+              className: "hidden md:block px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[256px] shrink-0",
               onClick: (e) => e.stopPropagation()
             }
           ),
@@ -32069,19 +32087,19 @@ var CategorySection = ({
               variant: "transparent",
               onClick: (e) => {
                 e.stopPropagation();
-                onCategoryToggle(category.id);
+                onToggle(category.id);
               },
               leftIcon: /* @__PURE__ */ jsx253(
                 ChevronDown8,
                 {
                   className: cn(
                     "h-6 w-6 text-ods-text-primary transition-transform duration-300",
-                    category.isExpanded && "rotate-180"
+                    isExpanded && "rotate-180"
                   )
                 }
               ),
-              className: "rounded-md h-auto w-auto",
-              "aria-label": category.isExpanded ? "Collapse" : "Expand"
+              className: "rounded-md h-auto w-auto shrink-0",
+              "aria-label": isExpanded ? "Collapse" : "Expand"
             }
           )
         ]
@@ -32097,9 +32115,9 @@ var CategorySection = ({
         },
         className: cn(
           "overflow-hidden",
-          category.isExpanded ? "opacity-100" : "opacity-0"
+          isExpanded ? "opacity-100" : "opacity-0"
         ),
-        children: /* @__PURE__ */ jsx253("div", { className: "px-4 pb-4 pt-0", children: /* @__PURE__ */ jsx253("div", { className: "border border-ods-border rounded-md overflow-hidden", children: category.policies.map((policy) => /* @__PURE__ */ jsx253(
+        children: /* @__PURE__ */ jsx253("div", { className: "px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0", children: /* @__PURE__ */ jsx253("div", { className: "border border-ods-border rounded-md overflow-hidden", children: category.policies.map((policy) => /* @__PURE__ */ jsx253(
           PolicyRow,
           {
             policy,
@@ -32116,11 +32134,29 @@ var CategorySection = ({
 var PolicyConfigurationPanel = ({
   categories,
   editMode,
-  onCategoryToggle,
-  onGlobalPermissionChange,
   onPolicyPermissionChange,
+  onCategoryPermissionChange,
   className
 }) => {
+  const [expandedIds, setExpandedIds] = useState71(/* @__PURE__ */ new Set());
+  const [bulkLevels, setBulkLevels] = useState71({});
+  useEffect52(() => {
+    setBulkLevels({});
+  }, [editMode]);
+  const handleToggle = (categoryId) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(categoryId)) next.delete(categoryId);
+      else next.add(categoryId);
+      return next;
+    });
+  };
+  const handleBulkLevelChange = (categoryId, level) => {
+    setBulkLevels((prev) => ({ ...prev, [categoryId]: level }));
+    if (level) {
+      onCategoryPermissionChange(categoryId, level);
+    }
+  };
   return /* @__PURE__ */ jsx253("div", { className: cn(
     "bg-ods-card border border-ods-border rounded-md overflow-hidden",
     className
@@ -32129,8 +32165,10 @@ var PolicyConfigurationPanel = ({
     {
       category,
       editMode,
-      onCategoryToggle,
-      onGlobalPermissionChange,
+      isExpanded: expandedIds.has(category.id),
+      bulkLevel: bulkLevels[category.id],
+      onToggle: handleToggle,
+      onBulkLevelChange: handleBulkLevelChange,
       onPolicyPermissionChange
     },
     category.id
@@ -54084,4 +54122,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-ZQYFDYWV.js.map
+//# sourceMappingURL=chunk-NQODKJ2F.js.map