@octaviaflow/core 3.1.0-beta.111 → 3.1.0-beta.113

package/dist/index.cjs

@@ -10236,13 +10236,18 @@ var CommandPalette = (0, import_react63.forwardRef)(
     open,
     onClose,
     groups,
-    placeholder = "Search for actions, pages, datasets\u2026",
+    placeholder = "Search\u2026",
     onSelect,
     emptyState,
     footer,
     filter = defaultFilter2,
     container,
     disableAnimation = false,
+    query: controlledQuery,
+    onQueryChange,
+    shouldFilter = true,
+    loading = false,
+    loadingLabel = "Searching\u2026",
     id: providedId,
     className,
     ...rest
@@ -10252,14 +10257,16 @@ var CommandPalette = (0, import_react63.forwardRef)(
     const reducedMotion = (0, import_framer_motion13.useReducedMotion)();
     const inputRef = (0, import_react63.useRef)(null);
     const listRef = (0, import_react63.useRef)(null);
-    const [query, setQuery] = (0, import_react63.useState)("");
+    const isQueryControlled = controlledQuery !== void 0;
+    const [internalQuery, setInternalQuery] = (0, import_react63.useState)("");
+    const query = isQueryControlled ? controlledQuery : internalQuery;
     const [activeIndex, setActiveIndex] = (0, import_react63.useState)(0);
     const filteredGroups = (0, import_react63.useMemo)(() => {
       return groups.map((g) => ({
         ...g,
-        items: g.items.filter((it) => filter(it, query, g.heading))
+        items: g.shouldFilter ?? shouldFilter ? g.items.filter((it) => filter(it, query, g.heading)) : g.items
       })).filter((g) => g.items.length > 0);
-    }, [groups, query, filter]);
+    }, [groups, query, filter, shouldFilter]);
     const flatItems = (0, import_react63.useMemo)(
       () => filteredGroups.flatMap((g) => g.items),
       [filteredGroups]
@@ -10271,7 +10278,7 @@ var CommandPalette = (0, import_react63.forwardRef)(
     }, [flatItems.length, activeIndex]);
     (0, import_react63.useEffect)(() => {
       if (open) {
-        setQuery("");
+        if (!isQueryControlled) setInternalQuery("");
         setActiveIndex(0);
         requestAnimationFrame(() => inputRef.current?.focus());
       }
@@ -10350,76 +10357,85 @@ var CommandPalette = (0, import_react63.forwardRef)(
                 placeholder,
                 value: query,
                 onChange: (e) => {
-                  setQuery(e.target.value);
+                  const next = e.target.value;
+                  if (!isQueryControlled) setInternalQuery(next);
+                  onQueryChange?.(next);
                   setActiveIndex(0);
                 }
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("kbd", { className: "ods-cmdk__esc-hint", "aria-hidden": "true", children: "Esc" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
             "div",
             {
               ref: listRef,
               id: `${baseId}-list`,
               role: "listbox",
               className: "ods-cmdk__list",
-              children: filteredGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ods-cmdk__empty", children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "ods-cmdk__empty-title", children: "No results" }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "ods-cmdk__empty-hint", children: "Try a different keyword." })
-              ] }) }) : (() => {
-                let flatIdx = -1;
-                return filteredGroups.map((g, gi) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-                  "div",
-                  {
-                    className: "ods-cmdk__group",
-                    role: "group",
-                    "aria-label": typeof g.heading === "string" ? g.heading : void 0,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ods-cmdk__group-heading", children: g.heading }),
-                      g.items.map((item) => {
-                        flatIdx += 1;
-                        const idx = flatIdx;
-                        const isActive2 = idx === activeIndex;
-                        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-                          "div",
-                          {
-                            id: `${baseId}-opt-${idx}`,
-                            role: "option",
-                            "aria-selected": isActive2,
-                            "aria-disabled": item.disabled || void 0,
-                            className: cn(
-                              "ods-cmdk__option",
-                              isActive2 && "ods-cmdk__option--active",
-                              item.danger && "ods-cmdk__option--danger",
-                              item.disabled && "ods-cmdk__option--disabled"
-                            ),
-                            onMouseEnter: () => setActiveIndex(idx),
-                            onClick: () => handleItemClick(item),
-                            children: [
-                              item.icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                                "span",
-                                {
-                                  className: "ods-cmdk__option-icon",
-                                  "aria-hidden": "true",
-                                  children: item.icon
-                                }
+              "aria-busy": loading || void 0,
+              children: [
+                filteredGroups.length === 0 ? loading ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ods-cmdk__empty", children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "ods-cmdk__empty-title", children: "No results" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "ods-cmdk__empty-hint", children: "Try a different keyword." })
+                ] }) }) : (() => {
+                  let flatIdx = -1;
+                  return filteredGroups.map((g, gi) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    "div",
+                    {
+                      className: "ods-cmdk__group",
+                      role: "group",
+                      "aria-label": typeof g.heading === "string" ? g.heading : void 0,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ods-cmdk__group-heading", children: g.heading }),
+                        g.items.map((item) => {
+                          flatIdx += 1;
+                          const idx = flatIdx;
+                          const isActive2 = idx === activeIndex;
+                          return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                            "div",
+                            {
+                              id: `${baseId}-opt-${idx}`,
+                              role: "option",
+                              "aria-selected": isActive2,
+                              "aria-disabled": item.disabled || void 0,
+                              className: cn(
+                                "ods-cmdk__option",
+                                isActive2 && "ods-cmdk__option--active",
+                                item.danger && "ods-cmdk__option--danger",
+                                item.disabled && "ods-cmdk__option--disabled"
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "ods-cmdk__option-body", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ods-cmdk__option-label", children: item.label }),
-                                item.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ods-cmdk__option-desc", children: item.description })
-                              ] }),
-                              item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("kbd", { className: "ods-cmdk__option-shortcut", children: item.shortcut })
-                            ]
-                          },
-                          item.id
-                        );
-                      })
-                    ]
-                  },
-                  gi
-                ));
-              })()
+                              onMouseEnter: () => setActiveIndex(idx),
+                              onClick: () => handleItemClick(item),
+                              children: [
+                                item.icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                  "span",
+                                  {
+                                    className: "ods-cmdk__option-icon",
+                                    "aria-hidden": "true",
+                                    children: item.icon
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "ods-cmdk__option-body", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ods-cmdk__option-label", children: item.label }),
+                                  item.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ods-cmdk__option-desc", children: item.description })
+                                ] }),
+                                item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("kbd", { className: "ods-cmdk__option-shortcut", children: item.shortcut })
+                              ]
+                            },
+                            item.id
+                          );
+                        })
+                      ]
+                    },
+                    gi
+                  ));
+                })(),
+                loading && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "ods-cmdk__loading", role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Spinner, { size: "sm", tone: "muted", "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: loadingLabel })
+                ] })
+              ]
             }
           ),
           footer && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ods-cmdk__footer", children: footer })
@@ -16859,7 +16875,10 @@ function shortReferenceLabel(token) {
   if (token.startsWith("{{ods://")) {
     const path = token.slice(8, -2);
     const parts = path.split("/");
-    if (parts[0] === "steps" && parts.length >= 4) return parts.slice(3).join(".");
+    if (parts[0] === "steps") {
+      if (parts.length >= 4) return parts.slice(3).join(".");
+      return parts[2] ?? "output";
+    }
     if (parts[0] === "flow") return `flow.${parts.slice(1).join(".")}`;
     return parts.join(".");
   }
@@ -40069,6 +40088,7 @@ function SlideoutContent({
   title,
   children,
   footer,
+  headerActions,
   className,
   offsetTop = 0,
   offsetBottom = 0
@@ -40154,16 +40174,19 @@ function SlideoutContent({
         children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "ods-slideout__header", children: [
             /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("h2", { ...titleProps, className: "ods-slideout__title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
-              "button",
-              {
-                className: "ods-slideout__close",
-                onClick: onClose,
-                "aria-label": "Close panel",
-                type: "button",
-                children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
-              }
-            )
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "ods-slideout__header-actions", children: [
+              headerActions,
+              /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+                "button",
+                {
+                  className: "ods-slideout__close",
+                  onClick: onClose,
+                  "aria-label": "Close panel",
+                  type: "button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "ods-slideout__body", children }),
           footer && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "ods-slideout__footer", children: footer })
@@ -41676,15 +41699,57 @@ var defaultIcons = {
   ] })
 };
 var ToastContext = (0, import_react188.createContext)(null);
-function ToastBody({ item, onDismiss }) {
+function ToastBody({ item, stacked, onDismiss }) {
   const dismiss = () => onDismiss(item.id);
+  const [expanded, setExpanded] = (0, import_react188.useState)(false);
+  const [overflowing, setOverflowing] = (0, import_react188.useState)(false);
+  const descRef = (0, import_react188.useRef)(null);
+  const cut = item.clampLines > 0 && !expanded;
+  (0, import_react188.useLayoutEffect)(() => {
+    if (!cut) return;
+    const el = descRef.current;
+    if (el) setOverflowing(el.scrollHeight > el.clientHeight + 1);
+  }, [cut, item.description]);
   if (item.render) return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_jsx_runtime174.Fragment, { children: item.render({ id: item.id, dismiss }) });
   const title = item.title ?? item.message;
+  const toggles = overflowing && !stacked;
+  const toggle = () => setExpanded((v) => !v);
+  const onTextClick = (e) => {
+    if (!toggles) return;
+    if (window.getSelection()?.toString()) return;
+    e.stopPropagation();
+    toggle();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(import_jsx_runtime174.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "ods-toast__icon", "aria-hidden": "true", children: item.icon ?? defaultIcons[item.variant] }),
-    /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-toast__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-toast__body", onClick: onTextClick, children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "ods-toast__title", children: title }),
-      item.description && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "ods-toast__desc", children: item.description })
+      item.description && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        "div",
+        {
+          ref: descRef,
+          className: cn(
+            "ods-toast__desc",
+            cut && "ods-toast__desc--cut",
+            toggles && "ods-toast__desc--toggles"
+          ),
+          style: cut ? { "--ods-toast-clamp": item.clampLines } : void 0,
+          children: item.description
+        }
+      ),
+      toggles && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ods-toast__more",
+          "aria-expanded": expanded,
+          onClick: (e) => {
+            e.stopPropagation();
+            toggle();
+          },
+          children: expanded ? "Less" : "More"
+        }
+      )
     ] }),
     (item.actionLabel || item.action) && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "ods-toast__action", children: item.actionLabel ? (
       // First-class action chip — consistent styling, auto-dismiss
@@ -41732,10 +41797,17 @@ function ToastBody({ item, onDismiss }) {
     )
   ] });
 }
-function PositionStack({ items, position, onDismiss, maxStack }) {
+function PositionStack({ items, position, onDismiss, onHold, onRelease, maxStack }) {
   const [hovered, setHovered] = (0, import_react188.useState)(false);
+  const [focused, setFocused] = (0, import_react188.useState)(false);
   const [pinned, setPinned] = (0, import_react188.useState)(false);
   const expanded = hovered || pinned;
+  const held = hovered || focused;
+  const ids = (0, import_react188.useMemo)(() => items.map((t) => t.id), [items]);
+  (0, import_react188.useEffect)(() => {
+    if (held) onHold(ids);
+    else onRelease(ids);
+  }, [held, ids, onHold, onRelease]);
   const ordered = (0, import_react188.useMemo)(() => [...items].reverse(), [items]);
   const isBottom = position.startsWith("bottom");
   const dir = isBottom ? -1 : 1;
@@ -41763,6 +41835,10 @@ function PositionStack({ items, position, onDismiss, maxStack }) {
       ),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+      },
       "aria-live": "polite",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
@@ -41800,7 +41876,14 @@ function PositionStack({ items, position, onDismiss, maxStack }) {
                       setPinned(true);
                     }
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ToastBody, { item, onDismiss })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+                    ToastBody,
+                    {
+                      item,
+                      stacked: !expanded && items.length > 1,
+                      onDismiss
+                    }
+                  )
                 },
                 item.id
               );
@@ -41837,29 +41920,51 @@ function ToastProvider({
   const [toasts, setToasts] = (0, import_react188.useState)([]);
   const timers = (0, import_react188.useRef)(/* @__PURE__ */ new Map());
   const idCounter2 = (0, import_react188.useRef)(0);
-  const dismiss = (0, import_react188.useCallback)((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-    const timer = timers.current.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      timers.current.delete(id);
-    }
+  const forget = (0, import_react188.useCallback)((id) => {
+    const c = timers.current.get(id);
+    if (c?.handle) clearTimeout(c.handle);
+    timers.current.delete(id);
   }, []);
-  const dismissAll = (0, import_react188.useCallback)((position) => {
-    setToasts((prev) => {
-      const remaining = position ? prev.filter((t) => t.position !== position) : [];
-      for (const t of prev) {
-        if (!remaining.find((r) => r.id === t.id)) {
-          const timer = timers.current.get(t.id);
-          if (timer) {
-            clearTimeout(timer);
-            timers.current.delete(t.id);
-          }
+  const dismiss = (0, import_react188.useCallback)(
+    (id) => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      forget(id);
+    },
+    [forget]
+  );
+  const dismissAll = (0, import_react188.useCallback)(
+    (position) => {
+      setToasts((prev) => {
+        const remaining = position ? prev.filter((t) => t.position !== position) : [];
+        for (const t of prev) {
+          if (!remaining.find((r) => r.id === t.id)) forget(t.id);
         }
-      }
-      return remaining;
-    });
+        return remaining;
+      });
+    },
+    [forget]
+  );
+  const hold = (0, import_react188.useCallback)((ids) => {
+    const now2 = Date.now();
+    for (const id of ids) {
+      const c = timers.current.get(id);
+      if (!c || c.handle === null) continue;
+      clearTimeout(c.handle);
+      c.handle = null;
+      c.remaining = Math.max(0, c.remaining - (now2 - c.since));
+    }
   }, []);
+  const release = (0, import_react188.useCallback)(
+    (ids) => {
+      for (const id of ids) {
+        const c = timers.current.get(id);
+        if (!c || c.handle !== null) continue;
+        c.since = Date.now();
+        c.handle = setTimeout(() => dismiss(id), c.remaining);
+      }
+    },
+    [dismiss]
+  );
   const toast = (0, import_react188.useCallback)(
     (options2) => {
       const id = `toast-${++idCounter2.current}`;
@@ -41876,12 +41981,16 @@ function ToastProvider({
         render: options2.render,
         duration: options2.duration ?? 5e3,
         closeable: options2.closeable ?? true,
-        position: options2.position ?? defaultPosition
+        position: options2.position ?? defaultPosition,
+        clampLines: options2.clampLines ?? 2
       };
       setToasts((prev) => [...prev, item]);
       if (item.duration > 0) {
-        const timer = setTimeout(() => dismiss(id), item.duration);
-        timers.current.set(id, timer);
+        timers.current.set(id, {
+          handle: setTimeout(() => dismiss(id), item.duration),
+          remaining: item.duration,
+          since: Date.now()
+        });
       }
       return id;
     },
@@ -41909,7 +42018,9 @@ function ToastProvider({
         items: list,
         position: pos,
         maxStack,
-        onDismiss: dismiss
+        onDismiss: dismiss,
+        onHold: hold,
+        onRelease: release
       },
       pos
     );
@@ -42810,7 +42921,20 @@ function VersionHistory({
 }) {
   const [expandedId, setExpandedId] = (0, import_react195.useState)(defaultExpandedId);
   const baseId = (0, import_react195.useId)();
-  const showToolbar = Boolean(tabs && tabs.length > 0 || onRefresh);
+  const showToolbar = Boolean(tabs && tabs.length > 0);
+  const refreshButton = onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "ods-version-history__refresh",
+      onClick: onRefresh,
+      disabled: refreshing,
+      "aria-label": "Refresh history",
+      title: "Refresh",
+      "data-spinning": refreshing || void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(RefreshGlyph, {})
+    }
+  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
     SlideoutPanel,
     {
@@ -42819,6 +42943,7 @@ function VersionHistory({
       position,
       width,
       title,
+      headerActions: showToolbar ? void 0 : refreshButton,
       offsetTop,
       offsetBottom,
       className: cn("ods-version-history", className),
@@ -42846,19 +42971,7 @@ function VersionHistory({
               tab.id
             );
           }) }) : /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("span", {}),
-          onRefresh && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ods-version-history__refresh",
-              onClick: onRefresh,
-              disabled: refreshing,
-              "aria-label": "Refresh history",
-              title: "Refresh",
-              "data-spinning": refreshing || void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(RefreshGlyph, {})
-            }
-          )
+          refreshButton
         ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { className: "ods-version-history__banner", children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Banner, { variant: "error", appearance: "subtle", title: "Couldn't load history", description: error }) }),
         /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { className: "ods-version-history__body", role: "tabpanel", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: "ods-version-history__status", role: "status", "aria-live": "polite", children: [
@@ -47655,6 +47768,14 @@ var DEFAULT_NOTIFICATION_CATALOG = [
         subjectNoun: "app",
         defaultEmail: false
       },
+      {
+        key: "connector.expiring_soon",
+        label: "App sign-in expires soon",
+        phrase: "an app's sign-in is about to expire",
+        severity: "warning",
+        audience: "org",
+        subjectNoun: "app"
+      },
       {
         key: "connector.test_failed",
         label: "Connection test failed",