@flamingo-stack/openframe-frontend-core 0.0.850 → 0.0.851

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { ChevronDown, Shield } from 'lucide-react';
 import type { FC } from 'react';
 import { useState } from 'react';
 import type {
@@ -11,17 +10,21 @@ import type {
 } from '../../types/permissions';
 import { cn } from '../../utils/cn';
 import { useCollapsible } from '../chat/hooks/use-collapsible';
+import { Chevron02DownIcon, ShieldIcon } from '../icons-v2-generated';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { ToolIcon } from '../tool-icon';
 import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
 import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
-import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from './approval-level';
+import { APPROVAL_LEVEL_META, APPROVAL_LEVELS, ApprovalLevelView } from './approval-level';
 
-const approvalLevelOptions = APPROVAL_LEVELS.map(value => ({ value, label: APPROVAL_LEVEL_META[value].label }));
-
-const POLICY_LEVEL_WIDTH = 'w-[180px]';
-const CATEGORY_LEVEL_WIDTH = 'w-[256px]';
+const CATEGORY_LEVEL_WIDTH = 'w-[296px]';
 
 /** How many collapsed category rows the panel draws while loading when the host passes no categories. */
 export const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
@@ -40,9 +43,22 @@ const CATEGORY_LEVEL_COLUMN_CLASS = cn(
   CATEGORY_LEVEL_WIDTH,
 );
 /** The expand / collapse control's chevron. */
-const CHEVRON_CLASS = 'h-6 w-6 text-ods-text-primary transition-transform duration-300';
+const CHEVRON_CLASS = '!h-6 !w-6 text-ods-text-primary transition-transform duration-300';
+
+/** A level as the dropdown writes it: its icon in its colour (the trigger's chevron size, 24px), then its name. */
+const LevelOption: FC<{ level: ApprovalLevel }> = ({ level }) => {
+  const { label, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
+  return (
+    <span className="inline-flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+      <Icon size={24} className={cn('shrink-0', toneClassName)} aria-hidden />
+      <span className="truncate">{label}</span>
+    </span>
+  );
+};
 
-const getApprovalLevelLabel = (level: ApprovalLevel): string => APPROVAL_LEVEL_META[level]?.label ?? level;
+/** A dropdown item at its trigger's scale: the trigger's type and icon size, a field's height (48px). The menu is
+ *  portalled to the window, so it steps with the window (`md:`), not the content. */
+const LEVEL_MENU_ITEM_CLASS = 'p-[var(--spacing-system-sf)] text-h4 [&_svg]:size-4 md:[&_svg]:size-6';
 
 const ApprovalLevelDropdown: FC<{
   value: ApprovalLevel | undefined;
@@ -58,27 +74,31 @@ const ApprovalLevelDropdown: FC<{
       <Button
         variant="outline"
         disabled={disabled}
-        rightIcon={<ChevronDown className="h-6 w-6 text-ods-text-secondary" />}
+        rightIcon={<Chevron02DownIcon className="!h-6 !w-6 text-ods-text-secondary" />}
         className={cn(
-          'flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] transition-colors !text-h6 hover:bg-ods-bg-hover',
+          'flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !p-[var(--spacing-system-sf)] transition-colors !text-h4 hover:bg-ods-bg-hover',
           value ? 'text-ods-text-primary' : 'text-ods-text-secondary',
           triggerClassName,
         )}
       >
-        {value ? getApprovalLevelLabel(value) : 'Set Global Permission'}
+        {value ? <LevelOption level={value} /> : 'Set Global Permission'}
       </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}
+      {APPROVAL_LEVELS.map(level => (
+        <DropdownMenuItem key={level} onClick={() => onChange(level)} className={LEVEL_MENU_ITEM_CLASS}>
+          <LevelOption level={level} />
         </DropdownMenuItem>
       ))}
+      {/* The way back out comes last, apart from the levels. */}
+      {allowClear && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => onChange(undefined)} className={LEVEL_MENU_ITEM_CLASS}>
+            Clear Global Permission
+          </DropdownMenuItem>
+        </>
+      )}
     </DropdownMenuContent>
   </DropdownMenu>
 );
@@ -89,56 +109,49 @@ const PolicyRow: FC<{
   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);
-  };
+  const nameId = `policy-${categoryId}-${policy.id}`;
+  // The level as every guardrail surface draws it: its icon in its colour, then its name (Figma 1608-49525), or, while
+  // editing, its name in its colour beside the four levels' icons to pick from (Figma 4365-22663).
+  const level = policy.approvalLevel ? (
+    <ApprovalLevelView
+      value={policy.approvalLevel}
+      editable={editMode}
+      onChange={next => onPermissionChange(categoryId, policy.id, next)}
+      aria-labelledby={nameId}
+    />
+  ) : null;
 
   return (
     <div className="flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center">
-      {/* Tool Icon */}
-      <div className={ICON_TILE_CLASS}>
+      {/* Tool Icon: grey, as the category's (Figma 1608-49526). Editing on a phone it moves beside the name, and the
+          strip gets the row's width (Figma 4365-22455). */}
+      <div className={cn(ICON_TILE_CLASS, 'text-ods-text-secondary', editMode && 'hidden content-md:flex')}>
         <ToolIcon toolType={policy.toolName} size={16} />
       </div>
 
-      {/* Policy Info — on mobile the approval level stacks below the pattern */}
+      {/* Policy Info — on mobile the approval level stacks below the name */}
       <div className="flex min-w-0 flex-1 flex-col">
-        <p className="truncate text-ods-text-primary text-h4" title={policy.name}>
-          {policy.name}
-        </p>
-        <p className="break-all text-ods-text-secondary text-h6">{policy.commandPattern}</p>
-        {editMode ? (
-          <div className="mt-[var(--spacing-system-xsf)] content-md:hidden">
-            <ApprovalLevelDropdown
-              value={policy.approvalLevel}
-              onChange={handleChange}
-              triggerClassName="w-full"
-              contentClassName={POLICY_LEVEL_WIDTH}
-            />
-          </div>
-        ) : policy.approvalLevel ? (
-          <span className="text-ods-text-primary text-h4 content-md:hidden">
-            {getApprovalLevelLabel(policy.approvalLevel)}
-          </span>
-        ) : null}
-      </div>
-
-      {/* Approval Level column (desktop only) */}
-      <div className="hidden shrink-0 content-md:block">
-        {editMode ? (
-          <ApprovalLevelDropdown
-            value={policy.approvalLevel}
-            onChange={handleChange}
-            triggerClassName={POLICY_LEVEL_WIDTH}
-            contentClassName={POLICY_LEVEL_WIDTH}
-          />
-        ) : (
-          <div className={cn('px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)]', POLICY_LEVEL_WIDTH)}>
-            {policy.approvalLevel && (
-              <span className="text-ods-text-primary text-h4">{getApprovalLevelLabel(policy.approvalLevel)}</span>
-            )}
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-sf)]">
+          <div className="flex min-w-0 flex-1 flex-col">
+            {/* The rule's name only: its command pattern is a regex, not something to read. */}
+            <p id={nameId} className="truncate text-ods-text-primary text-h4" title={policy.name}>
+              {policy.name}
+            </p>
           </div>
+          {editMode && (
+            <span className="flex shrink-0 text-ods-text-secondary content-md:hidden">
+              <ToolIcon toolType={policy.toolName} size={16} />
+            </span>
+          )}
+        </div>
+        {level && (
+          <div className={cn('flex content-md:hidden', editMode && 'mt-[var(--spacing-system-sf)]')}>{level}</div>
         )}
       </div>
+
+      {/* Approval Level column (desktop only). A flex box, not a block: a block's line box around the inline level
+          stood taller than the level and set it above the row's centre. */}
+      {level && <div className="hidden shrink-0 items-center content-md:flex">{level}</div>}
     </div>
   );
 };
@@ -186,15 +199,21 @@ const CategorySection: FC<{
       {/* Category Header */}
       <div
         {...loadingItemProps(props)}
-        className={cn(CATEGORY_HEADER_CLASS, !loading && 'cursor-pointer transition-colors hover:bg-ods-bg-hover')}
+        // The whole row toggles, so the whole row lights on hover; not while the pointer is on the bulk dropdown, which
+        // is its own target. Open, a rule under the row (on the frame below) ends the lit row at an edge.
+        className={cn(
+          CATEGORY_HEADER_CLASS,
+          !loading &&
+            'cursor-pointer transition-colors hover:bg-ods-bg-hover [&:has([data-bulk-level]:hover)]:bg-ods-card',
+        )}
         onClick={loading ? undefined : () => onToggle(category.id)}
       >
         {/* Category Icon (static: the host's, else the default shield) */}
         <div className={ICON_TILE_CLASS}>
-          <div className="text-ods-text-secondary">{category.icon ?? <Shield className="h-4 w-4" />}</div>
+          <div className="text-ods-text-secondary">{category.icon ?? <ShieldIcon size={16} />}</div>
         </div>
 
-        {/* Category Info — on mobile the bulk dropdown stacks below the count */}
+        {/* Category Info. A phone has no bulk dropdown (Figma 4365-22446): its rules are set one by one. */}
         <div className={CATEGORY_TEXT_CLASS}>
           {category.name ? (
             <p className="truncate text-ods-text-primary text-h4" title={category.name}>
@@ -206,25 +225,15 @@ const CategorySection: FC<{
           {loading ? (
             <TextLineSkeleton type="h6" className="w-24" />
           ) : (
-            <p className="text-ods-text-secondary text-h6">{category.policies.length} Configurations</p>
-          )}
-          {editMode && (
-            <div className="mt-[var(--spacing-system-xsf)] content-md:hidden" onClick={e => e.stopPropagation()}>
-              <ApprovalLevelDropdown
-                value={bulkLevel}
-                onChange={handleBulkChange}
-                allowClear
-                triggerClassName="w-full"
-                contentClassName={CATEGORY_LEVEL_WIDTH}
-                disabled={loading}
-              />
-            </div>
+            <p className="text-ods-text-secondary text-h6">
+              {category.policies.length} {category.policies.length === 1 ? 'Configuration' : 'Configurations'}
+            </p>
           )}
         </div>
 
         {/* Global Permission column (desktop only) */}
         {editMode ? (
-          <div className="hidden shrink-0 content-md:block" onClick={e => e.stopPropagation()}>
+          <div data-bulk-level className="hidden shrink-0 content-md:block" onClick={e => e.stopPropagation()}>
             <ApprovalLevelDropdown
               value={bulkLevel}
               onChange={handleBulkChange}
@@ -247,8 +256,13 @@ const CategorySection: FC<{
             e.stopPropagation();
             onToggle(category.id);
           }}
-          leftIcon={<ChevronDown className={cn(CHEVRON_CLASS, isExpanded && 'rotate-180')} />}
-          className="h-auto w-auto shrink-0 rounded-md"
+          leftIcon={<Chevron02DownIcon className={cn(CHEVRON_CLASS, isExpanded && 'rotate-180')} />}
+          // 40px on a phone (Figma 4365-22452), 48 from content-md.
+          className={cn(
+            'h-auto w-auto shrink-0 rounded-md !p-[var(--spacing-system-xsf)] content-md:!p-[var(--spacing-system-sf)]',
+            // The row is the hover; the chevron adds none of its own.
+            'hover:bg-transparent active:bg-transparent',
+          )}
           aria-label={isExpanded ? 'Collapse' : 'Expand'}
         />
       </div>
@@ -264,7 +278,10 @@ const CategorySection: FC<{
         }}
         className={isExpanded ? 'opacity-100' : 'opacity-0'}
       >
-        <div ref={innerRef} className="px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0">
+        <div
+          ref={innerRef}
+          className="border-t border-ods-border px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-[var(--spacing-system-mf)]"
+        >
           <div className="overflow-hidden rounded-md border border-ods-border">
             {/* No rows while the policies are read: nothing read is drawn, even collapsed. */}
             {(loading ? [] : category.policies).map(policy => (
@@ -290,9 +307,9 @@ const CategorySection: FC<{
  * 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.
+ * Responsive (content width): below `content-md` a rule's level stacks under its
+ * pattern, and a category has no bulk dropdown (Figma 4365-22405); from
+ * `content-md` both are right-hand columns.
  */
 /** One shared empty map, so a reset that changes nothing changes no identity. */
 const NO_BULK_LEVELS: Record<string, ApprovalLevel | undefined> = {};

package/src/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, forwardRef } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, forwardRef, useState } from 'react';
 
 import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
@@ -126,6 +126,10 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
       loading && options.length === 0 ? Array.from({ length: skeletonCount }, () => null) : options;
     const isGrouped = variant === 'grouped';
     const isHorizontal = orientation === 'horizontal';
+    // The options the block first showed loaded. One added after that (a row the user's action brought in) fades in, as
+    // new rows do across the system; the first options, and the skeleton's swap to them, do not.
+    const [firstOptions, setFirstOptions] = useState<ReadonlySet<string> | null>(null);
+    if (!loading && firstOptions === null) setFirstOptions(new Set(options.map(option => option.value)));
     return (
       <div className={cn('relative flex w-full flex-col', className)}>
         <RadioGroupPrimitive.Root
@@ -215,7 +219,13 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                     )
                   )}
                 </div>
-                {option?.trailing && <div className="ml-auto flex shrink-0 items-center">{option.trailing}</div>}
+                {/* The row's full height, its content centred whatever the row aligns (a design may top-align the dot with
+                    the label); a trailing node can still place itself (`self-start`). */}
+                {option?.trailing && (
+                  <div data-radio-trailing className="ml-auto flex shrink-0 items-center self-stretch">
+                    {option.trailing}
+                  </div>
+                )}
               </>
             );
             return (
@@ -236,6 +246,10 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   // CheckboxBlock — the border stays put so an unselected row
                   // never flashes "selected" under the cursor.
                   interactive && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
+                  // A control in `trailing` (a button, a menu) is its own target: on it, the row is not hovered or
+                  // pressed, so the row never looks like what the click will do.
+                  interactive &&
+                    '[&:has([data-radio-trailing]_:active)]:bg-ods-card [&:has([data-radio-trailing]_:hover)]:bg-ods-card',
                   isGrouped
                     ? cn(
                         'bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]',
@@ -254,6 +268,10 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   // `Tag`'s label is a span too, and it went invisible against
                   // its own fill.
                   isDisabled && 'bg-ods-bg',
+                  option &&
+                    firstOptions !== null &&
+                    !firstOptions.has(option.value) &&
+                    'duration-300 animate-in fade-in slide-in-from-top-2 motion-reduce:animate-none',
                   // With a footer the option stacks: its row, then the footer.
                   hasFooter && 'flex-col items-stretch gap-[var(--spacing-system-sf)]',
                   itemClassName,

package/src/components/ui/tab-selector.tsx

@@ -30,6 +30,12 @@ export interface TabSelectorProps {
   items: TabSelectorItem[];
   /** Visual variant: primary (accent bg) or secondary (soft grey bg) */
   variant?: 'primary' | 'secondary';
+  /**
+   * `compact`: an icon-only strip at its content's width: 44px tall, 36px segments and 20px icons from `content-md`,
+   * 40 / 32 / 16px below it (the guardrails level picker, Figma 4365-22670 / 4365-22462). Default: the full-width
+   * strip, 48px at `content-md`.
+   */
+  size?: 'default' | 'compact';
   /** Optional label displayed above the selector */
   label?: string;
   /** Disable the entire selector (overrides per-item enabled state) */
@@ -51,6 +57,7 @@ export function TabSelector({
   onValueChange,
   items,
   variant = 'primary',
+  size = 'default',
   label,
   disabled,
   scrollable = false,
@@ -63,6 +70,7 @@ export function TabSelector({
   // renders in its title bar adapts by context, with no re-styling at the
   // call site.
   const flush = useIsInActionsMenuHeader();
+  const compact = size === 'compact';
   return (
     <div
       className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', disabled && 'opacity-50', className)}
@@ -79,7 +87,11 @@ export function TabSelector({
           'flex gap-[var(--spacing-system-xxs)] bg-ods-bg p-[var(--spacing-system-xxs)]',
           flush
             ? 'h-10 w-full'
-            : cn('h-11 rounded-md border border-ods-border content-md:h-12', scrollable ? 'overflow-x-auto' : 'w-full'),
+            : cn(
+                'rounded-md border border-ods-border',
+                compact ? 'h-10 content-md:h-11' : 'h-11 content-md:h-12',
+                scrollable ? 'overflow-x-auto' : compact ? 'w-auto' : 'w-full',
+              ),
         )}
       >
         {items.map(item => {
@@ -101,10 +113,21 @@ export function TabSelector({
               data-tone={variant === 'primary' ? 'accent' : undefined}
               // scrollable: intrinsic widths must sum past the container or nothing ever overflows (flex-1's basis-0
               // defeats the scroll).
-              className={cn('h-full', scrollable ? 'flex-none shrink-0 basis-auto' : 'flex-1')}
+              className={cn(
+                'h-full',
+                compact ? 'w-8 flex-none content-md:w-9' : scrollable ? 'flex-none shrink-0 basis-auto' : 'flex-1',
+              )}
             >
               {item.icon && (
-                <span className="flex size-4 shrink-0 items-center justify-center content-md:size-6">{item.icon}</span>
+                <span
+                  className={cn(
+                    'flex shrink-0 items-center justify-center',
+                    // compact: the box sizes the icon, whatever size the caller drew it at.
+                    compact ? 'size-4 content-md:size-5 [&>svg]:size-full' : 'size-4 content-md:size-6',
+                  )}
+                >
+                  {item.icon}
+                </span>
               )}
               {item.label}
               {item.badge && item.badge}

package/dist/chunk-N3MBQRCQ.cjs

@@ -1,41 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
-
-
-var _chunk63A4GZMBcjs = require('./chunk-63A4GZMB.cjs');
-
-// src/components/ui/label.tsx
-var _reactlabel = require('@radix-ui/react-label'); var LabelPrimitive = _interopRequireWildcard(_reactlabel);
-var _classvarianceauthority = require('class-variance-authority');
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var LABEL_TEXT_CLASS = "block text-ods-text-primary text-h6";
-var labelVariants = _classvarianceauthority.cva.call(void 0, "", {
-  variants: {
-    variant: {
-      default: LABEL_TEXT_CLASS,
-      /** @deprecated alias of `default` — the three small scales converged on text-h6. */
-      small: LABEL_TEXT_CLASS,
-      /** @deprecated alias of `default`. */
-      medium: LABEL_TEXT_CLASS,
-      large: _chunk63A4GZMBcjs.cn.call(void 0, LABEL_TEXT_CLASS, "text-h4"),
-      /** A click surface that labels its control: no typography, the site's `className` is its look. */
-      surface: ""
-    },
-    spacing: {
-      none: "",
-      tight: "mb-0.5",
-      normal: "mb-2",
-      loose: "mb-3"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    spacing: "none"
-  }
-});
-var Label = _react.forwardRef.call(void 0, ({ className, variant, spacing, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LabelPrimitive.Root, { ref, className: _chunk63A4GZMBcjs.cn.call(void 0, labelVariants({ variant, spacing }), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-
-
-exports.Label = Label;