@flamingo-stack/openframe-frontend-core 0.0.442 → 0.0.443-snapshot.20260717175152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.442",
+  "version": "0.0.443-snapshot.20260717175152",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/policy-configuration-panel.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useRef, useEffect, useState } from 'react'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown, Shield } from 'lucide-react'
 import { cn } from '../../utils/cn'
 import { ToolIcon } from '../tool-icon'
 import { Button } from '../ui/button'
@@ -34,62 +34,107 @@ const getApprovalLevelLabel = (level: ApprovalLevel | undefined, editMode: boole
   return option?.label || level
 }
 
+const ApprovalLevelDropdown: React.FC<{
+  value: ApprovalLevel | undefined;
+  onChange: (level: ApprovalLevel | undefined) => void;
+  /** Adds the "Clear Global Permission" item (category bulk dropdown). */
+  allowClear?: boolean;
+  triggerClassName?: string;
+  contentClassName?: string;
+}> = ({ value, onChange, allowClear = false, triggerClassName, contentClassName }) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button
+        variant="outline"
+        rightIcon={<ChevronDown 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
+        )}
+      >
+        {getApprovalLevelLabel(value, true)}
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" className={contentClassName}>
+      {allowClear && (
+        <DropdownMenuItem onClick={() => onChange(undefined)} className="text-h6">
+          Clear Global Permission
+        </DropdownMenuItem>
+      )}
+      {approvalLevelOptions.map(option => (
+        <DropdownMenuItem
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          className="text-h6"
+        >
+          {option.label}
+        </DropdownMenuItem>
+      ))}
+    </DropdownMenuContent>
+  </DropdownMenu>
+)
+
 const PolicyRow: React.FC<{
   policy: PermissionPolicy;
   categoryId: string;
   editMode: boolean;
   onPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
 }> = ({ policy, categoryId, editMode, onPermissionChange }) => {
+  const handleChange = (level: ApprovalLevel | undefined) => {
+    if (level) onPermissionChange(categoryId, policy.id, level)
+  }
+
   return (
-    <div className="bg-ods-bg border-b border-ods-border flex gap-4 items-center px-4 py-3">
+    <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)]">
       {/* Tool Icon */}
-      <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8">
+      <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0">
         <ToolIcon toolType={policy.toolName} size={16} />
       </div>
 
-      {/* Policy Info */}
+      {/* Policy Info — on mobile the approval level stacks below the pattern */}
       <div className="flex-1 flex flex-col min-w-0">
-        <p className="text-h6 text-ods-text-primary truncate" title={policy.name}>
+        <p className="text-h4 text-ods-text-primary truncate" title={policy.name}>
           {policy.name}
         </p>
-        <p className="text-code text-ods-text-secondary break-all">
+        <p className="text-h6 text-ods-text-secondary break-all">
           {policy.commandPattern}
         </p>
+        {editMode ? (
+          <div className="md:hidden mt-[var(--spacing-system-xsf)]">
+            <ApprovalLevelDropdown
+              value={policy.approvalLevel}
+              onChange={handleChange}
+              triggerClassName="w-full"
+              contentClassName="w-[180px]"
+            />
+          </div>
+        ) : policy.approvalLevel ? (
+          <span className="md:hidden text-h4 text-ods-text-primary">
+            {getApprovalLevelLabel(policy.approvalLevel)}
+          </span>
+        ) : null}
       </div>
 
-      {/* Approval Level Dropdown */}
-      {editMode ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button 
-              variant="outline"
-              rightIcon={<ChevronDown 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"
-            >
-              {getApprovalLevelLabel(policy.approvalLevel, editMode)}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-[180px]">
-            {approvalLevelOptions.map(option => (
-              <DropdownMenuItem
-                key={option.value}
-                onClick={() => onPermissionChange(categoryId, policy.id, option.value)}
-                className="text-h6"
-              >
-                {option.label}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : policy.approvalLevel ? (
-        <div className="px-3 py-2 w-[180px]">
-          <span className="text-h6 text-ods-text-primary">
-            {getApprovalLevelLabel(policy.approvalLevel, editMode)}
-          </span>
-        </div>
-      ) : (
-        <div className="px-3 py-2 w-[180px]" />
-      )}
+      {/* Approval Level column (desktop only) */}
+      <div className="hidden md:block shrink-0">
+        {editMode ? (
+          <ApprovalLevelDropdown
+            value={policy.approvalLevel}
+            onChange={handleChange}
+            triggerClassName="w-[180px]"
+            contentClassName="w-[180px]"
+          />
+        ) : (
+          <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[180px]">
+            {policy.approvalLevel && (
+              <span className="text-h4 text-ods-text-primary">
+                {getApprovalLevelLabel(policy.approvalLevel)}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
@@ -97,7 +142,7 @@ const PolicyRow: React.FC<{
 const useAnimatedHeight = (isExpanded: boolean) => {
   const [height, setHeight] = useState<number | 'auto'>(0);
   const contentRef = useRef<HTMLDivElement>(null);
-  
+
   useEffect(() => {
     if (contentRef.current) {
       const contentHeight = contentRef.current.scrollHeight;
@@ -111,93 +156,73 @@ const useAnimatedHeight = (isExpanded: boolean) => {
 const CategorySection: React.FC<{
   category: PermissionCategory;
   editMode: boolean;
-  onCategoryToggle: (categoryId: string) => void;
-  onGlobalPermissionChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
+  isExpanded: boolean;
+  /** Last bulk level applied to this category (display-only, edit mode). */
+  bulkLevel: ApprovalLevel | undefined;
+  onToggle: (categoryId: string) => void;
+  onBulkLevelChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
   onPolicyPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
-}> = ({ 
-  category, 
-  editMode, 
-  onCategoryToggle, 
-  onGlobalPermissionChange, 
-  onPolicyPermissionChange 
+}> = ({
+  category,
+  editMode,
+  isExpanded,
+  bulkLevel,
+  onToggle,
+  onBulkLevelChange,
+  onPolicyPermissionChange
 }) => {
-  const { contentRef, height } = useAnimatedHeight(category.isExpanded);
-  
+  const { contentRef, height } = useAnimatedHeight(isExpanded);
+  const handleBulkChange = (level: ApprovalLevel | undefined) => onBulkLevelChange(category.id, level)
+
   return (
     <>
       {/* Category Header */}
-      <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)}
+      <div
+        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)}
       >
         {/* Category Icon */}
-        <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8">
+        <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0">
           <div className="text-ods-text-secondary">
-            {category.icon}
+            {category.icon ?? <Shield className="w-4 h-4" />}
           </div>
         </div>
 
-        {/* Category Info */}
-        <div className="flex-1 flex flex-col">
-          <p className="md:!text-sm font-medium text-ods-text-primary">
+        {/* Category Info — on mobile the bulk dropdown stacks below the count */}
+        <div className="flex-1 flex flex-col min-w-0">
+          <p className="text-h4 text-ods-text-primary truncate" title={category.name}>
             {category.name}
           </p>
           <p className="text-h6 text-ods-text-secondary">
-            {category.configurationsCount} Configurations
+            {category.policies.length} Configurations
           </p>
+          {editMode && (
+            <div className="md:hidden mt-[var(--spacing-system-xsf)]" onClick={(e) => e.stopPropagation()}>
+              <ApprovalLevelDropdown
+                value={bulkLevel}
+                onChange={handleBulkChange}
+                allowClear
+                triggerClassName="w-full"
+                contentClassName="w-[256px]"
+              />
+            </div>
+          )}
         </div>
 
-        {/* Global Permission Dropdown */}
+        {/* Global Permission column (desktop only) */}
         {editMode ? (
-          <div onClick={(e) => e.stopPropagation()}>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  rightIcon={<ChevronDown 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"
-                >
-                  <span className={cn(
-                    "md:!text-sm font-medium",
-                    category.globalPermission 
-                      ? "text-ods-text-primary" 
-                      : "text-ods-text-secondary"
-                  )}>
-                    {getApprovalLevelLabel(category.globalPermission, editMode)}
-                  </span>
-                </Button>
-              </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-[256px]">
-              <DropdownMenuItem
-                onClick={() => onGlobalPermissionChange(category.id, undefined)}
-                className="md:!text-sm"
-              >
-                Clear Global Permission
-              </DropdownMenuItem>
-              {approvalLevelOptions.map(option => (
-                <DropdownMenuItem
-                  key={option.value}
-                  onClick={() => onGlobalPermissionChange(category.id, option.value)}
-                  className="md:!text-sm"
-                >
-                  {option.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          </div>
-        ) : category.globalPermission ? (
-          <div 
-            className="px-3 py-2 w-[256px]"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <span className="md:!text-sm font-medium text-ods-text-primary">
-              {getApprovalLevelLabel(category.globalPermission, editMode)}
-            </span>
+          <div className="hidden md:block shrink-0" onClick={(e) => e.stopPropagation()}>
+            <ApprovalLevelDropdown
+              value={bulkLevel}
+              onChange={handleBulkChange}
+              allowClear
+              triggerClassName="w-[256px]"
+              contentClassName="w-[256px]"
+            />
           </div>
         ) : (
-          <div 
-            className="px-3 py-2 w-[256px]" 
+          <div
+            className="hidden md:block px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[256px] shrink-0"
             onClick={(e) => e.stopPropagation()}
           />
         )}
@@ -208,32 +233,32 @@ const CategorySection: React.FC<{
           variant="transparent"
           onClick={(e) => {
             e.stopPropagation();
-            onCategoryToggle(category.id);
+            onToggle(category.id);
           }}
-          leftIcon={<ChevronDown 
+          leftIcon={<ChevronDown
             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"}
         />
       </div>
 
       {/* Policies List */}
-      <div 
+      <div
         ref={contentRef}
-        style={{ 
+        style={{
           height: height === 'auto' ? 'auto' : `${height}px`,
           transition: 'height 300ms ease-in-out, opacity 300ms ease-in-out'
         }}
         className={cn(
           "overflow-hidden",
-          category.isExpanded ? "opacity-100" : "opacity-0"
+          isExpanded ? "opacity-100" : "opacity-0"
         )}
       >
-        <div className="px-4 pb-4 pt-0">
+        <div className="px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0">
           <div className="border border-ods-border rounded-md overflow-hidden">
             {category.policies.map((policy) => (
               <PolicyRow
@@ -251,14 +276,47 @@ const CategorySection: React.FC<{
   )
 }
 
+/**
+ * Grouped list of permission categories with per-policy approval dropdowns.
+ * Presentation state — which categories are expanded and the last bulk level
+ * picked per category — lives inside the panel, so callers pass pure data and
+ * background data refreshes never collapse the user's view. Bulk selections
+ * reset when `editMode` changes.
+ *
+ * Responsive: below `md` the approval level / dropdowns stack inside the text
+ * column (per the ODS mobile design); at `md+` they render as fixed-width
+ * right-hand columns.
+ */
 export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> = ({
   categories,
   editMode,
-  onCategoryToggle,
-  onGlobalPermissionChange,
   onPolicyPermissionChange,
+  onCategoryPermissionChange,
   className
 }) => {
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set())
+  const [bulkLevels, setBulkLevels] = useState<Record<string, ApprovalLevel | undefined>>({})
+
+  useEffect(() => {
+    setBulkLevels({})
+  }, [editMode])
+
+  const handleToggle = (categoryId: string) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev)
+      if (next.has(categoryId)) next.delete(categoryId)
+      else next.add(categoryId)
+      return next
+    })
+  }
+
+  const handleBulkLevelChange = (categoryId: string, level: ApprovalLevel | undefined) => {
+    setBulkLevels(prev => ({ ...prev, [categoryId]: level }))
+    if (level) {
+      onCategoryPermissionChange(categoryId, level)
+    }
+  }
+
   return (
     <div className={cn(
       "bg-ods-card border border-ods-border rounded-md overflow-hidden",
@@ -269,8 +327,10 @@ export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> =
           key={category.id}
           category={category}
           editMode={editMode}
-          onCategoryToggle={onCategoryToggle}
-          onGlobalPermissionChange={onGlobalPermissionChange}
+          isExpanded={expandedIds.has(category.id)}
+          bulkLevel={bulkLevels[category.id]}
+          onToggle={handleToggle}
+          onBulkLevelChange={handleBulkLevelChange}
           onPolicyPermissionChange={onPolicyPermissionChange}
         />
       ))}
@@ -278,4 +338,4 @@ export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> =
   )
 }
 
-PolicyConfigurationPanel.displayName = 'PolicyConfigurationPanel'
+PolicyConfigurationPanel.displayName = 'PolicyConfigurationPanel'

package/src/components/ui/checkbox-block.tsx

@@ -17,6 +17,12 @@ interface CheckboxBlockProps {
   description?: React.ReactNode
   /** Keep the label on one line and ellipsize on overflow instead of wrapping */
   truncateLabel?: boolean
+  /**
+   * Optional trailing slot rendered at the end of the row (e.g. an action
+   * button). Interactive content must call `preventDefault` on click to stop
+   * the wrapping label from toggling the checkbox.
+   */
+  trailing?: React.ReactNode
   disabled?: boolean
   /** Error message displayed below the block (also triggers red border) */
   error?: string
@@ -26,12 +32,14 @@ interface CheckboxBlockProps {
 const CheckboxBlock = React.forwardRef<
   React.ComponentRef<typeof CheckboxPrimitive.Root>,
   CheckboxBlockProps
->(({ id, checked, defaultChecked, onCheckedChange, label, description, truncateLabel, disabled, error, className }, ref) => (
+>(({ id, checked, defaultChecked, onCheckedChange, label, description, truncateLabel, trailing, disabled, error, className }, ref) => (
   <div className={cn("relative flex w-full flex-col", className)}>
     <label
       htmlFor={id}
       className={cn(
         "flex items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset w-full",
+        // Trailing content stacks full-width below the text on mobile.
+        trailing && "flex-wrap md:flex-nowrap",
         "p-[var(--spacing-system-sf)]",
         !description && "min-h-[44px] md:min-h-[48px]",
         description && "min-h-[60px] md:min-h-[64px]",
@@ -82,6 +90,9 @@ const CheckboxBlock = React.forwardRef<
           </span>
         )}
       </div>
+      {trailing && (
+        <div className="flex w-full shrink-0 items-center md:ml-auto md:w-auto">{trailing}</div>
+      )}
     </label>
     {error && (
       <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error" title={error}>

package/src/stories/CheckboxBlock.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { useState } from 'react';
+import { Button } from '../components/ui/button';
 import { CheckboxBlock } from '../components/ui/checkbox-block';
 
 const meta = {
@@ -142,6 +143,23 @@ export const WithDescription: Story = {
   },
 };
 
+/**
+ * Checkbox block with a trailing action. Interactive trailing content must
+ * call `preventDefault` on click so the wrapping label doesn't toggle the
+ * checkbox (see the OpenFrame customer guardrails tab for a real usage).
+ */
+export const WithTrailingAction: Story = {
+  args: {
+    label: 'Use the default guardrails settings',
+    description: 'This customer follows guardrails defaults.',
+    trailing: (
+      <Button variant="outline" onClick={e => e.preventDefault()}>
+        Edit Default Guardrails
+      </Button>
+    ),
+  },
+};
+
 /**
  * Checkbox block with description, checked.
  */