@flamingo-stack/openframe-frontend-core 0.0.294 → 0.0.295-snapshot.20260619154913

package/dist/{chunk-ZYZWD7LS.js → chunk-K2PFPBMF.js}

@@ -93,7 +93,7 @@ import {
   useControllableState,
   useEntityCardLink,
   useEntityCardPlaceholder
-} from "./chunk-NSPOYUBH.js";
+} from "./chunk-D652TJBQ.js";
 import {
   COMPACT_CARD_ICON_SLOT,
   COMPACT_CARD_IMAGE_SLOT,
@@ -168,7 +168,7 @@ import {
   init_button2,
   init_split_button,
   usePortalContainer
-} from "./chunk-5IJ46KAV.js";
+} from "./chunk-EL6QLAWX.js";
 import {
   init_next_link,
   next_link_default
@@ -1080,47 +1080,63 @@ ThinkingDisplay.displayName = "ThinkingDisplay";
 // src/components/chat/error-message-display.tsx
 init_cn();
 import { forwardRef as forwardRef5, useState as useState5 } from "react";
-import { AlertCircle, ChevronDown } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var iconTint = {
+  error: "text-ods-error",
+  warning: "text-ods-warning",
+  info: "text-ods-text-secondary"
+};
 var ErrorMessageDisplay = forwardRef5(
-  ({ className, title, details, ...props }, ref) => {
-    const [isExpanded, setIsExpanded] = useState5(false);
+  ({ className, title, details, type = "error", ...props }, ref) => {
+    const [expanded, setExpanded] = useState5(false);
+    const { innerRef, containerStyle } = useCollapsible({ expanded });
+    const hasDetails = Boolean(details);
     return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
         className: cn(
-          "bg-[var(--ods-attention-red-error-secondary)] border border-ods-error rounded-[6px] p-3 mb-2 flex items-start gap-3",
+          "bg-ods-card rounded-md p-[var(--spacing-system-xsf)] mb-[var(--spacing-system-xsf)]",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx7(AlertCircle, { className: "w-6 h-6 text-white flex-shrink-0 mt-0.5" }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsx7("span", { className: "text-lg leading-6 text-white font-['DM_Sans'] font-medium", children: title }),
-              details && /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setIsExpanded((prev) => !prev),
-                  className: "flex-shrink-0 p-0.5 rounded hover:bg-white/10 transition-colors",
-                  "aria-expanded": isExpanded,
-                  "aria-label": isExpanded ? "Collapse error details" : "Expand error details",
-                  children: /* @__PURE__ */ jsx7(
-                    ChevronDown,
-                    {
-                      className: cn(
-                        "w-5 h-5 text-white transition-transform duration-200",
-                        isExpanded && "rotate-180"
-                      )
-                    }
-                  )
-                }
-              )
-            ] }),
-            details && isExpanded && /* @__PURE__ */ jsx7("span", { className: "text-sm leading-5 text-white font-['DM_Sans'] font-medium mt-1", children: details })
-          ] })
+          /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              onClick: hasDetails ? () => setExpanded((prev) => !prev) : void 0,
+              "aria-expanded": hasDetails ? expanded : void 0,
+              "aria-label": hasDetails ? expanded ? "Collapse details" : "Expand details" : void 0,
+              disabled: !hasDetails,
+              className: cn(
+                "flex w-full items-center gap-[var(--spacing-system-xsf)] text-left",
+                hasDetails ? "cursor-pointer" : "cursor-default"
+              ),
+              children: [
+                /* @__PURE__ */ jsx7(AlertCircleIcon, { size: 16, className: cn("shrink-0", iconTint[type]) }),
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1 font-mono text-sm font-medium uppercase leading-5 tracking-[-0.28px]",
+                      expanded ? "text-ods-text-primary" : "truncate text-ods-text-secondary"
+                    ),
+                    children: title
+                  }
+                ),
+                hasDetails && /* @__PURE__ */ jsx7(ExpandChevron, { expanded })
+              ]
+            }
+          ),
+          hasDetails && /* @__PURE__ */ jsx7("div", { style: containerStyle, children: /* @__PURE__ */ jsx7(
+            "div",
+            {
+              ref: innerRef,
+              className: "px-[var(--spacing-system-lf)] pt-[var(--spacing-system-xsf)]",
+              children: /* @__PURE__ */ jsx7("p", { className: "text-sm font-medium leading-5 text-ods-text-primary", children: details })
+            }
+          ) })
         ]
       }
     );
@@ -1355,16 +1371,14 @@ import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var ConnectionIndicator = ({ status }) => {
   const getStatusStyles = () => {
     switch (status) {
-      // ODS attention tokens — same scheme used by the rest of the chat
-      // shell (StatusBadge, error toast, etc.). Hex Tailwind palette
-      // (`bg-green-500` / `bg-red-500`) would diverge from the theme and
-      // is forbidden by the host's design-token policy.
+      // ODS semantic status tokens — preset-defined utilities aliasing the same
+      // green/yellow/red as the raw ods-attention palette (which is CSS-vars only).
       case "connected":
-        return "bg-ods-attention-green-success";
+        return "bg-ods-success";
       case "connecting":
-        return "bg-ods-attention-yellow-warning animate-pulse";
+        return "bg-ods-warning animate-pulse";
       case "disconnected":
-        return "bg-ods-attention-red-error";
+        return "bg-ods-error";
       default:
         return "bg-ods-text-tertiary";
     }
@@ -3277,7 +3291,7 @@ var ChatMessageEnhanced = forwardRef11(
         ...props,
         children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)] min-w-0", children: [
           /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-            showAvatar && !isSystem && (!isUser && assistantIcon && !avatar ? (
+            showAvatar && !isSystem && !(isUser && !avatar) && (!isUser && assistantIcon && !avatar ? (
               // Host-supplied brand icon (e.g. Mingo): render it directly,
               // no filled pill — the icon carries its own brand accent.
               /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center flex-shrink-0", children: assistantIcon })
@@ -4196,12 +4210,6 @@ ChatTicketItem.displayName = "ChatTicketItem";
 
 // src/components/chat/chat-ticket-list.tsx
 import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
-function getMask(top, bottom) {
-  if (top && bottom) return "linear-gradient(to bottom, transparent, black 64px, black calc(100% - 64px), transparent)";
-  if (top) return "linear-gradient(to bottom, transparent, black 64px)";
-  if (bottom) return "linear-gradient(to bottom, black calc(100% - 64px), transparent)";
-  return "none";
-}
 var ChatTicketList = React8.forwardRef(
   ({ className, tickets, onTicketClick, isLoading = false, skeletonCount = 5, ...props }, ref) => {
     const scrollRef = React8.useRef(null);
@@ -4227,34 +4235,48 @@ var ChatTicketList = React8.forwardRef(
       ] });
     }
     if (tickets.length === 0) return null;
-    const mask = getMask(fadeTop, fadeBottom);
     return /* @__PURE__ */ jsxs25("div", { ref, className: cn("flex flex-col gap-2 min-h-0", className), ...props, children: [
       /* @__PURE__ */ jsx29("p", { className: "text-h5 text-ods-text-secondary shrink-0", children: "Your Chats:" }),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsxs25(
         "div",
         {
           className: cn(
-            "border-x border-ods-border flex-1 min-h-0 overflow-hidden",
+            "relative border-x border-ods-border flex-1 min-h-0 overflow-hidden",
             !fadeTop && "border-t rounded-t-md",
             !fadeBottom && "border-b rounded-b-md"
           ),
-          children: /* @__PURE__ */ jsx29(
-            "div",
-            {
-              ref: scrollRef,
-              className: "overflow-y-auto h-full",
-              onScroll: updateFade,
-              style: mask !== "none" ? { maskImage: mask, WebkitMaskImage: mask } : void 0,
-              children: tickets.map((ticket) => /* @__PURE__ */ jsx29(
-                ChatTicketItem,
-                {
-                  ticket,
-                  onClick: onTicketClick
-                },
-                ticket.id
-              ))
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsx29("div", { ref: scrollRef, className: "overflow-y-auto h-full", onScroll: updateFade, children: tickets.map((ticket) => /* @__PURE__ */ jsx29(
+              ChatTicketItem,
+              {
+                ticket,
+                onClick: onTicketClick
+              },
+              ticket.id
+            )) }),
+            /* @__PURE__ */ jsx29(
+              "div",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 top-0 h-16 transition-opacity duration-150",
+                  fadeTop ? "opacity-100" : "opacity-0"
+                ),
+                style: { background: "linear-gradient(0deg, transparent 0%, var(--color-bg) 100%)" }
+              }
+            ),
+            /* @__PURE__ */ jsx29(
+              "div",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-16 transition-opacity duration-150",
+                  fadeBottom ? "opacity-100" : "opacity-0"
+                ),
+                style: { background: "linear-gradient(180deg, transparent 0%, var(--color-bg) 100%)" }
+              }
+            )
+          ]
         }
       )
     ] });
@@ -8616,7 +8638,7 @@ import {
 
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp } from "lucide-react";
 init_cn();
 import * as React27 from "react";
 import { jsx as jsx69, jsxs as jsxs55 } from "react/jsx-runtime";
@@ -8681,7 +8703,7 @@ var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx69(ChevronDown2, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx69(ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -11402,7 +11424,7 @@ DrawerFooter.displayName = "DrawerFooter";
 init_cn();
 import * as React46 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown as ChevronDown3 } from "lucide-react";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
 import { jsx as jsx92, jsxs as jsxs73 } from "react/jsx-runtime";
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx92(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
@@ -11418,7 +11440,7 @@ var AccordionTrigger = React46.forwardRef(({ className, children, ...props }, re
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx92(ChevronDown3, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      /* @__PURE__ */ jsx92(ChevronDown2, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
     ]
   }
 ) }));
@@ -11694,7 +11716,7 @@ init_cn();
 import * as React49 from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva as cva6 } from "class-variance-authority";
-import { ChevronDown as ChevronDown4 } from "lucide-react";
+import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { jsx as jsx95, jsxs as jsxs76 } from "react/jsx-runtime";
 var NavigationMenu = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs76(
   NavigationMenuPrimitive.Root,
@@ -11738,7 +11760,7 @@ var NavigationMenuTrigger = React49.forwardRef(({ className, children, ...props
       children,
       " ",
       /* @__PURE__ */ jsx95(
-        ChevronDown4,
+        ChevronDown3,
         {
           className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
           "aria-hidden": "true"
@@ -12021,7 +12043,7 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/ui/release-changelog-section.tsx
 import { useState as useState30, useRef as useRef17, useEffect as useEffect20 } from "react";
-import { ChevronDown as ChevronDown5 } from "lucide-react";
+import { ChevronDown as ChevronDown4 } from "lucide-react";
 import { jsx as jsx100, jsxs as jsxs79 } from "react/jsx-runtime";
 var PREVIEW_COLLAPSED_HEIGHT = 120;
 function ReleaseChangelogSection({
@@ -12059,7 +12081,7 @@ function ReleaseChangelogSection({
             /* @__PURE__ */ jsx100(Badge, { variant: "secondary", className: "ml-2", children: entries.length })
           ] }),
           /* @__PURE__ */ jsx100(
-            ChevronDown5,
+            ChevronDown4,
             {
               className: `h-4 w-4 text-ods-text-secondary shrink-0 transition-transform duration-200 ${!collapsed ? "rotate-180" : ""}`
             }
@@ -12104,7 +12126,7 @@ function ReleaseChangelogSection({
             children: [
               /* @__PURE__ */ jsx100("span", { children: previewExpanded ? "Show less" : `Show ${entries.length - 1} more` }),
               /* @__PURE__ */ jsx100(
-                ChevronDown5,
+                ChevronDown4,
                 {
                   className: `w-3.5 h-3.5 transition-transform duration-300 ${previewExpanded ? "rotate-180" : ""}`
                 }
@@ -13184,11 +13206,11 @@ function BulletList({
 // src/components/ui/chevron-button.tsx
 init_cn();
 import * as React60 from "react";
-import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown6 } from "lucide-react";
+import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown5 } from "lucide-react";
 import { jsx as jsx115 } from "react/jsx-runtime";
 var ChevronButton = React60.forwardRef(
   ({ className, direction = "down", size = "md", isExpanded, backgroundColor, borderColor, ...props }, ref) => {
-    const Icon2 = (isExpanded ? ChevronUp2 : ChevronDown6) || (direction === "up" ? ChevronUp2 : ChevronDown6);
+    const Icon2 = (isExpanded ? ChevronUp2 : ChevronDown5) || (direction === "up" ? ChevronUp2 : ChevronDown5);
     const sizeClasses2 = {
       sm: "h-4 w-4",
       md: "h-5 w-5",
@@ -14654,7 +14676,7 @@ function AuthProvidersList({
 }
 
 // src/components/features/changelog-manager.tsx
-import { Trash2 as Trash22, Plus as Plus3, ChevronDown as ChevronDown7, ChevronUp as ChevronUp3, Eye as Eye3, EyeOff } from "lucide-react";
+import { Trash2 as Trash22, Plus as Plus3, ChevronDown as ChevronDown6, ChevronUp as ChevronUp3, Eye as Eye3, EyeOff } from "lucide-react";
 import { useState as useState40, useEffect as useEffect27 } from "react";
 import { jsx as jsx136, jsxs as jsxs106 } from "react/jsx-runtime";
 function ChangelogManager({
@@ -14742,7 +14764,7 @@ function ChangelogManager({
               size: "icon",
               onClick: () => toggleExpanded(index),
               className: "shrink-0",
-              children: isExpanded ? /* @__PURE__ */ jsx136(ChevronUp3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx136(ChevronDown7, { className: "h-4 w-4" })
+              children: isExpanded ? /* @__PURE__ */ jsx136(ChevronUp3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx136(ChevronDown6, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ jsx136("div", { className: "flex-1 min-w-0", children: hasContent ? /* @__PURE__ */ jsx136("p", { className: "font-['DM_Sans'] font-medium text-[14px] text-ods-text-primary truncate", children: entry.title }) : /* @__PURE__ */ jsx136("p", { className: "font-['DM_Sans'] font-medium text-[14px] text-ods-text-secondary italic", children: "New entry (click to edit)" }) }),
@@ -18299,7 +18321,7 @@ var AIWarningsSection = ({
 
 // src/components/features/ai-enrich/AIEnrichSection.tsx
 init_button2();
-import { CheckCircle as CheckCircle2, AlertCircle as AlertCircle2, Loader2 as Loader28, X as X9 } from "lucide-react";
+import { CheckCircle as CheckCircle2, AlertCircle, Loader2 as Loader28, X as X9 } from "lucide-react";
 import { jsx as jsx165, jsxs as jsxs129 } from "react/jsx-runtime";
 var AIEnrichSection = ({
   onEnrich,
@@ -18440,7 +18462,7 @@ var AIEnrichSection = ({
             "flex items-center gap-3 p-3 rounded-lg",
             status === "success" ? "bg-[--ods-attention-green-success]/10" : "bg-[--ods-attention-red-error]/10"
           ), children: [
-            status === "success" ? /* @__PURE__ */ jsx165(CheckCircle2, { className: "h-5 w-5 text-[--ods-attention-green-success]" }) : /* @__PURE__ */ jsx165(AlertCircle2, { className: "h-5 w-5 text-[--ods-attention-red-error]" }),
+            status === "success" ? /* @__PURE__ */ jsx165(CheckCircle2, { className: "h-5 w-5 text-[--ods-attention-green-success]" }) : /* @__PURE__ */ jsx165(AlertCircle, { className: "h-5 w-5 text-[--ods-attention-red-error]" }),
             /* @__PURE__ */ jsx165("span", { className: cn(
               "text-sm font-medium",
               status === "success" ? "text-[--ods-attention-green-success]" : "text-[--ods-attention-red-error]"
@@ -19341,7 +19363,7 @@ function ViewToggle({
 // src/components/features/policy-configuration-panel.tsx
 init_cn();
 import { useRef as useRef26, useEffect as useEffect33, useState as useState51 } from "react";
-import { ChevronDown as ChevronDown8 } from "lucide-react";
+import { ChevronDown as ChevronDown7 } from "lucide-react";
 init_button2();
 
 // src/components/dropdown-menu.tsx
@@ -19503,7 +19525,7 @@ var PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
         Button,
         {
           variant: "outline",
-          rightIcon: /* @__PURE__ */ jsx179(ChevronDown8, { className: "h-6 w-6 text-ods-text-secondary" }),
+          rightIcon: /* @__PURE__ */ jsx179(ChevronDown7, { 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)
         }
@@ -19559,7 +19581,7 @@ var CategorySection = ({
               Button,
               {
                 variant: "outline",
-                rightIcon: /* @__PURE__ */ jsx179(ChevronDown8, { className: "h-6 w-6 text-ods-text-secondary" }),
+                rightIcon: /* @__PURE__ */ jsx179(ChevronDown7, { 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__ */ jsx179("span", { className: cn(
                   "md:!text-sm font-medium",
@@ -19610,7 +19632,7 @@ var CategorySection = ({
                 onCategoryToggle(category.id);
               },
               leftIcon: /* @__PURE__ */ jsx179(
-                ChevronDown8,
+                ChevronDown7,
                 {
                   className: cn(
                     "h-6 w-6 text-ods-text-primary transition-transform duration-300",
@@ -20050,6 +20072,7 @@ function NotificationsProvider({
   defaultShowDesktopPopups = false,
   onShowDesktopPopupsChange,
   onHistoryClick,
+  historyHref,
   actions,
   hasMore = false,
   isLoadingMore = false,
@@ -20155,6 +20178,7 @@ function NotificationsProvider({
       setShowDesktopPopups,
       desktopPopupsConfigured,
       onHistoryClick,
+      historyHref,
       hasMore,
       isLoadingMore,
       loadMore: onLoadMore,
@@ -20181,6 +20205,7 @@ function NotificationsProvider({
       toggle,
       setShowPopups,
       onHistoryClick,
+      historyHref,
       hasMore,
       isLoadingMore,
       onLoadMore,
@@ -20202,7 +20227,7 @@ function useOptionalNotifications() {
 
 // src/components/features/notifications/notification-drawer.tsx
 import { useEffect as useEffect38, useRef as useRef29 } from "react";
-init_button();
+init_button2();
 init_cn();
 
 // src/components/features/notifications/notification-tile.tsx
@@ -20329,6 +20354,7 @@ function NotificationDrawer({
     setShowDesktopPopups,
     desktopPopupsConfigured,
     onHistoryClick,
+    historyHref,
     hasMore,
     isLoadingMore,
     loadMore,
@@ -20390,7 +20416,8 @@ function NotificationDrawer({
               onClick: onHistoryClick ? () => {
                 onHistoryClick();
                 close();
-              } : void 0
+              } : void 0,
+              historyHref
             }
           )
         ] })
@@ -20521,15 +20548,23 @@ function DesktopNotificationsToggleRow({ checked, onChange }) {
     ] })
   ] });
 }
-function NotificationsHistoryButton({ onClick }) {
+function NotificationsHistoryButton({ onClick, historyHref }) {
   return /* @__PURE__ */ jsx184(
-    Button,
+    SplitButton,
     {
       variant: "outline",
       fullWidth: true,
-      disabled: !onClick,
       onClick,
-      leftIcon: /* @__PURE__ */ jsx184(ClockHistoryIcon, { className: "!size-6 text-ods-text-secondary" }),
+      mainDisabled: !onClick,
+      leftIcon: /* @__PURE__ */ jsx184(ClockHistoryIcon, { className: "text-ods-text-secondary" }),
+      groupAriaLabel: "Notifications history",
+      iconAction: {
+        icon: /* @__PURE__ */ jsx184(ArrowRightUpIcon, { className: "text-ods-text-secondary" }),
+        "aria-label": "Open notifications history in a new tab",
+        href: historyHref,
+        openInNewTab: true,
+        disabled: !historyHref
+      },
       children: "Notifications History"
     }
   );
@@ -39555,4 +39590,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-ZYZWD7LS.js.map
+//# sourceMappingURL=chunk-K2PFPBMF.js.map