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

package/dist/index.js

@@ -11734,7 +11734,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(".");
   }
@@ -33209,6 +33212,7 @@ function SlideoutContent({
   title,
   children,
   footer,
+  headerActions,
   className,
   offsetTop = 0,
   offsetBottom = 0
@@ -33294,16 +33298,19 @@ function SlideoutContent({
         children: [
           title && /* @__PURE__ */ jsxs130("div", { className: "ods-slideout__header", children: [
             /* @__PURE__ */ jsx135("h2", { ...titleProps, className: "ods-slideout__title", children: title }),
-            /* @__PURE__ */ jsx135(
-              "button",
-              {
-                className: "ods-slideout__close",
-                onClick: onClose,
-                "aria-label": "Close panel",
-                type: "button",
-                children: /* @__PURE__ */ jsx135("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx135("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__ */ jsxs130("div", { className: "ods-slideout__header-actions", children: [
+              headerActions,
+              /* @__PURE__ */ jsx135(
+                "button",
+                {
+                  className: "ods-slideout__close",
+                  onClick: onClose,
+                  "aria-label": "Close panel",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx135("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx135("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__ */ jsx135("div", { className: "ods-slideout__body", children }),
           footer && /* @__PURE__ */ jsx135("div", { className: "ods-slideout__footer", children: footer })
@@ -34661,6 +34668,8 @@ import {
   createContext as createContext3,
   useCallback as useCallback51,
   useContext as useContext4,
+  useEffect as useEffect57,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo37,
   useRef as useRef50,
   useState as useState71
@@ -34755,15 +34764,57 @@ var defaultIcons = {
   ] })
 };
 var ToastContext = createContext3(null);
-function ToastBody({ item, onDismiss }) {
+function ToastBody({ item, stacked, onDismiss }) {
   const dismiss = () => onDismiss(item.id);
+  const [expanded, setExpanded] = useState71(false);
+  const [overflowing, setOverflowing] = useState71(false);
+  const descRef = useRef50(null);
+  const cut = item.clampLines > 0 && !expanded;
+  useLayoutEffect12(() => {
+    if (!cut) return;
+    const el = descRef.current;
+    if (el) setOverflowing(el.scrollHeight > el.clientHeight + 1);
+  }, [cut, item.description]);
   if (item.render) return /* @__PURE__ */ jsx147(Fragment61, { 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__ */ jsxs141(Fragment61, { children: [
     /* @__PURE__ */ jsx147("span", { className: "ods-toast__icon", "aria-hidden": "true", children: item.icon ?? defaultIcons[item.variant] }),
-    /* @__PURE__ */ jsxs141("div", { className: "ods-toast__body", children: [
+    /* @__PURE__ */ jsxs141("div", { className: "ods-toast__body", onClick: onTextClick, children: [
       title && /* @__PURE__ */ jsx147("div", { className: "ods-toast__title", children: title }),
-      item.description && /* @__PURE__ */ jsx147("div", { className: "ods-toast__desc", children: item.description })
+      item.description && /* @__PURE__ */ jsx147(
+        "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__ */ jsx147(
+        "button",
+        {
+          type: "button",
+          className: "ods-toast__more",
+          "aria-expanded": expanded,
+          onClick: (e) => {
+            e.stopPropagation();
+            toggle();
+          },
+          children: expanded ? "Less" : "More"
+        }
+      )
     ] }),
     (item.actionLabel || item.action) && /* @__PURE__ */ jsx147("div", { className: "ods-toast__action", children: item.actionLabel ? (
       // First-class action chip — consistent styling, auto-dismiss
@@ -34811,10 +34862,17 @@ function ToastBody({ item, onDismiss }) {
     )
   ] });
 }
-function PositionStack({ items, position, onDismiss, maxStack }) {
+function PositionStack({ items, position, onDismiss, onHold, onRelease, maxStack }) {
   const [hovered, setHovered] = useState71(false);
+  const [focused, setFocused] = useState71(false);
   const [pinned, setPinned] = useState71(false);
   const expanded = hovered || pinned;
+  const held = hovered || focused;
+  const ids = useMemo37(() => items.map((t) => t.id), [items]);
+  useEffect57(() => {
+    if (held) onHold(ids);
+    else onRelease(ids);
+  }, [held, ids, onHold, onRelease]);
   const ordered = useMemo37(() => [...items].reverse(), [items]);
   const isBottom = position.startsWith("bottom");
   const dir = isBottom ? -1 : 1;
@@ -34842,6 +34900,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__ */ jsx147(
@@ -34879,7 +34941,14 @@ function PositionStack({ items, position, onDismiss, maxStack }) {
                       setPinned(true);
                     }
                   },
-                  children: /* @__PURE__ */ jsx147(ToastBody, { item, onDismiss })
+                  children: /* @__PURE__ */ jsx147(
+                    ToastBody,
+                    {
+                      item,
+                      stacked: !expanded && items.length > 1,
+                      onDismiss
+                    }
+                  )
                 },
                 item.id
               );
@@ -34916,29 +34985,51 @@ function ToastProvider({
   const [toasts, setToasts] = useState71([]);
   const timers = useRef50(/* @__PURE__ */ new Map());
   const idCounter2 = useRef50(0);
-  const dismiss = useCallback51((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 = useCallback51((id) => {
+    const c = timers.current.get(id);
+    if (c?.handle) clearTimeout(c.handle);
+    timers.current.delete(id);
   }, []);
-  const dismissAll = useCallback51((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 = useCallback51(
+    (id) => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      forget(id);
+    },
+    [forget]
+  );
+  const dismissAll = useCallback51(
+    (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 = useCallback51((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 = useCallback51(
+    (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 = useCallback51(
     (options2) => {
       const id = `toast-${++idCounter2.current}`;
@@ -34955,12 +35046,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;
     },
@@ -34988,7 +35083,9 @@ function ToastProvider({
         items: list,
         position: pos,
         maxStack,
-        onDismiss: dismiss
+        onDismiss: dismiss,
+        onHold: hold,
+        onRelease: release
       },
       pos
     );
@@ -35840,7 +35937,7 @@ UserCard.displayName = "UserCard";
 import { useId as useId64, useState as useState74 } from "react";
 
 // src/hooks/useRelativeTime.ts
-import { useEffect as useEffect57, useState as useState73 } from "react";
+import { useEffect as useEffect58, useState as useState73 } from "react";
 function toMs(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -35860,7 +35957,7 @@ function formatRelativeTime(when, now2 = Date.now()) {
 function useRelativeTime(date, options2 = {}) {
   const { intervalMs = 3e4 } = options2;
   const [now2, setNow] = useState73(() => Date.now());
-  useEffect57(() => {
+  useEffect58(() => {
     if (typeof window === "undefined") return;
     const id = window.setInterval(() => setNow(Date.now()), intervalMs);
     return () => window.clearInterval(id);
@@ -35924,7 +36021,20 @@ function VersionHistory({
 }) {
   const [expandedId, setExpandedId] = useState74(defaultExpandedId);
   const baseId = useId64();
-  const showToolbar = Boolean(tabs && tabs.length > 0 || onRefresh);
+  const showToolbar = Boolean(tabs && tabs.length > 0);
+  const refreshButton = onRefresh ? /* @__PURE__ */ jsx155(
+    "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__ */ jsx155(RefreshGlyph, {})
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs149(
     SlideoutPanel,
     {
@@ -35933,6 +36043,7 @@ function VersionHistory({
       position,
       width,
       title,
+      headerActions: showToolbar ? void 0 : refreshButton,
       offsetTop,
       offsetBottom,
       className: cn("ods-version-history", className),
@@ -35960,19 +36071,7 @@ function VersionHistory({
               tab.id
             );
           }) }) : /* @__PURE__ */ jsx155("span", {}),
-          onRefresh && /* @__PURE__ */ jsx155(
-            "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__ */ jsx155(RefreshGlyph, {})
-            }
-          )
+          refreshButton
         ] }),
         error && /* @__PURE__ */ jsx155("div", { className: "ods-version-history__banner", children: /* @__PURE__ */ jsx155(Banner, { variant: "error", appearance: "subtle", title: "Couldn't load history", description: error }) }),
         /* @__PURE__ */ jsx155("div", { className: "ods-version-history__body", role: "tabpanel", children: loading ? /* @__PURE__ */ jsxs149("div", { className: "ods-version-history__status", role: "status", "aria-live": "polite", children: [
@@ -37177,7 +37276,7 @@ import {
 } from "@octaviaflow/icons";
 
 // src/hooks/useWorkflowRuntime.ts
-import { useEffect as useEffect58, useState as useState76 } from "react";
+import { useEffect as useEffect59, useState as useState76 } from "react";
 function toMs2(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -37192,7 +37291,7 @@ function formatWorkflowRuntime(ms) {
 }
 function useWorkflowRuntime(startedAt, active) {
   const [, force] = useState76(0);
-  useEffect58(() => {
+  useEffect59(() => {
     if (!active || startedAt == null) return;
     if (typeof window === "undefined") return;
     const id = window.setInterval(() => force((n) => n + 1), 1e3);
@@ -37572,13 +37671,13 @@ function WorkflowHeaderExpanded({
 }
 
 // src/hooks/useBanner.ts
-import { useCallback as useCallback56, useEffect as useEffect59, useRef as useRef52, useState as useState77 } from "react";
+import { useCallback as useCallback56, useEffect as useEffect60, useRef as useRef52, useState as useState77 } from "react";
 function useBanner(options2 = {}) {
   const { defaultOpen = false, autoDismissAfter, onDismiss } = options2;
   const [open, setOpen] = useState77(defaultOpen);
   const timerRef = useRef52(null);
   const onDismissRef = useRef52(onDismiss);
-  useEffect59(() => {
+  useEffect60(() => {
     onDismissRef.current = onDismiss;
   }, [onDismiss]);
   const clearTimer = useCallback56(() => {
@@ -37609,7 +37708,7 @@ function useBanner(options2 = {}) {
     if (open) hide();
     else show();
   }, [open, show, hide]);
-  useEffect59(() => () => clearTimer(), [clearTimer]);
+  useEffect60(() => () => clearTimer(), [clearTimer]);
   return {
     open,
     show,
@@ -37677,7 +37776,7 @@ function breakpointMinWidth(name) {
 }
 
 // src/hooks/useCallout.ts
-import { useCallback as useCallback57, useEffect as useEffect60, useState as useState78 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect61, useState as useState78 } from "react";
 var STORAGE_PREFIX = "ods:callout:dismissed:";
 function readPersisted(key) {
   if (!key || typeof window === "undefined") return false;
@@ -37701,7 +37800,7 @@ function writePersisted(key, value) {
 function useCallout(options2 = {}) {
   const { defaultOpen = true, persistKey, onDismiss } = options2;
   const [open, setOpen] = useState78(defaultOpen);
-  useEffect60(() => {
+  useEffect61(() => {
     if (persistKey && readPersisted(persistKey)) {
       setOpen(false);
     }
@@ -39522,7 +39621,7 @@ NotificationChannelCard.displayName = "NotificationChannelCard";
 
 // src/notifications/components/NotificationChannelDialog/NotificationChannelDialog.tsx
 import { SendIcon as SendIcon2 } from "@octaviaflow/icons";
-import { useEffect as useEffect61, useMemo as useMemo42, useState as useState86 } from "react";
+import { useEffect as useEffect62, useMemo as useMemo42, useState as useState86 } from "react";
 
 // src/notifications/engine/channels.ts
 var CONNECTED_CHANNEL_TYPES = [
@@ -39980,7 +40079,7 @@ function NotificationChannelDialog({
   const [testing, setTesting] = useState86(false);
   const [testResult, setTestResult] = useState86(null);
   const [submitError, setSubmitError] = useState86(null);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!open) return;
     setDraft(draftFromChannel(channel, initialType));
     setSubmitted(false);
@@ -40921,13 +41020,13 @@ NotificationRuleList.displayName = "NotificationRuleList";
 
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
-import { createContext as createContext4, useContext as useContext5, useEffect as useEffect62, useMemo as useMemo45 } from "react";
+import { createContext as createContext4, useContext as useContext5, useEffect as useEffect63, useMemo as useMemo45 } from "react";
 import { OverlayProvider as OverlayProvider3 } from "react-aria";
 import { jsx as jsx173 } from "react/jsx-runtime";
 var OdsContext = createContext4(null);
 function OdsProvider({ config: userConfig, children }) {
   const resolved = useMemo45(() => resolveConfig(userConfig), [userConfig]);
-  useEffect62(() => {
+  useEffect63(() => {
     const cssVarsBlock = generateCssVars(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {