@flytedan/flytebot-design-system 0.76.0 → 0.78.0

package/dist/index.cjs

@@ -930,6 +930,7 @@ __export(index_exports, {
   CHAT_UNAVAILABLE: () => CHAT_UNAVAILABLE,
   COPIED_FEEDBACK_MS: () => COPIED_FEEDBACK_MS,
   CORNER_STACK_INSET_PROPERTY: () => CORNER_STACK_INSET_PROPERTY,
+  CORNER_STACK_OFFSET_PROPERTY: () => CORNER_STACK_OFFSET_PROPERTY,
   Calendar: () => Calendar,
   Card: () => Card,
   CardGrid: () => CardGrid,
@@ -1036,6 +1037,7 @@ __export(index_exports, {
   RoadmapTimeline: () => RoadmapTimeline,
   RunActions: () => RunActions,
   RuntimeKit: () => RuntimeKit,
+  SHEET_OPEN_ATTRIBUTE: () => SHEET_OPEN_ATTRIBUTE,
   SaturationDistribution: () => SaturationDistribution,
   ScoreMeter: () => ScoreMeter,
   ScreenHead: () => ScreenHead,
@@ -1140,10 +1142,12 @@ __export(index_exports, {
   useLayerZIndex: () => useLayerZIndex,
   useOverlayLayout: () => useOverlayLayout,
   usePopoverPosition: () => usePopoverPosition,
+  usePublishCornerStackOffset: () => usePublishCornerStackOffset,
   useResponsiveRail: () => useResponsiveRail,
   useRuntimeMode: () => useRuntimeMode,
   useServerTable: () => useServerTable,
   useSessionContext: () => useSessionContext,
+  useSheetOpenMark: () => useSheetOpenMark,
   useStackedLayer: () => useStackedLayer,
   useStagedFiles: () => useStagedFiles,
   useToast: () => useToast,
@@ -2423,6 +2427,30 @@ function CornerStackPortal({ slot, children }) {
   const element = useCornerStackSlot(slot);
   return element ? (0, import_react_dom5.createPortal)(children, element) : null;
 }
+var CORNER_STACK_OFFSET_PROPERTY = "--fd-corner-stack-offset";
+var SHEET_OPEN_ATTRIBUTE = "data-fd-sheet-open";
+function usePublishCornerStackOffset(ref, active) {
+  useSlotEffect(() => {
+    const el = ref.current;
+    if (!active || !el) return;
+    const root = document.documentElement;
+    const publish = () => root.style.setProperty(CORNER_STACK_OFFSET_PROPERTY, `${el.getBoundingClientRect().width}px`);
+    publish();
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(publish) : null;
+    observer?.observe(el);
+    return () => {
+      observer?.disconnect();
+      root.style.removeProperty(CORNER_STACK_OFFSET_PROPERTY);
+    };
+  }, [ref, active]);
+}
+function useSheetOpenMark(active) {
+  useSlotEffect(() => {
+    if (!active) return;
+    document.documentElement.setAttribute(SHEET_OPEN_ATTRIBUTE, "");
+    return () => document.documentElement.removeAttribute(SHEET_OPEN_ATTRIBUTE);
+  }, [active]);
+}
 
 // src/components/loading/ProgressBar.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -2819,6 +2847,8 @@ function DockedSidePanel({ open: open2, children: childrenNow, ...widthOptions }
   const { width, setWidth } = useResizableWidth(widthOptions);
   const drag = React19.useRef(null);
   const [resizing, setResizing] = React19.useState(false);
+  const boxRef = React19.useRef(null);
+  usePublishCornerStackOffset(boxRef, rendered);
   if (!rendered) return null;
   const onPointerDown = (e) => {
     e.preventDefault();
@@ -2842,6 +2872,7 @@ function DockedSidePanel({ open: open2, children: childrenNow, ...widthOptions }
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
+      ref: boxRef,
       className: ["fd-sidepanel", animateEnter ? "is-entering" : "", closing ? "is-closing" : "", resizing ? "is-resizing" : ""].filter(Boolean).join(" "),
       "data-open": open2 ? "true" : "false",
       style: { width },
@@ -2903,6 +2934,7 @@ function AppShell({
     initialOpen: initialNavOpen,
     onPersist: onNavOpenChange
   });
+  useSheetOpenMark(Boolean(sidePanel?.open) && rail.overlay);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
@@ -14291,9 +14323,44 @@ function JsonView({ value }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CodeBlock, { code: text, language: "json", collapseAfter: 18 });
 }
-function PacketCard({ packet, schema, render, onApply, applied }) {
+function DecisionFooter({ packet, decision, state }) {
+  const [pending, setPending] = React76.useState(null);
+  const [failure, setFailure] = React76.useState(null);
+  const mounted = React76.useRef(true);
+  React76.useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const press = (action) => {
+    if (pending) return;
+    setPending(action);
+    setFailure(null);
+    decision.onDecide(action, packet).then(
+      () => {
+        if (mounted.current) setPending(null);
+      },
+      (e) => {
+        if (!mounted.current) return;
+        setPending(null);
+        setFailure(e instanceof Error && e.message ? e.message : "That didn\u2019t go through.");
+      }
+    );
+  };
+  const error = failure !== null ? failure : state.error;
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "fdc-packet-decision-msg", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Banner, { tone: "danger", title: error }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("footer", { className: "fdc-packet-foot fdc-packet-decision", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Button, { variant: "secondary", size: "sm", loading: pending === "dismiss", disabled: pending === "confirm", onClick: () => press("dismiss"), children: decision.dismissLabel || "Dismiss" }),
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Button, { variant: "primary", size: "sm", loading: pending === "confirm", disabled: pending === "dismiss", onClick: () => press("confirm"), children: decision.confirmLabel || "Confirm" })
+    ] })
+  ] });
+}
+function PacketCard({ packet, schema, render, onApply, applied, decision }) {
   if (!packet) return null;
   const s = schema || {};
+  const state = decision ? decision.state(packet) : {};
   const invalid = packet.valid === false;
   const title = s.heading || packet.type;
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("section", { className: "fdc-packet" + (invalid ? " is-invalid" : ""), "aria-label": title, children: [
@@ -14301,13 +14368,14 @@ function PacketCard({ packet, schema, render, onApply, applied }) {
       /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("i", { className: "ph ph-" + (s.icon || "package"), "aria-hidden": "true" }),
       /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "fdc-packet-title", title: truncationTitle(title), children: title }),
       packet.repaired ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "fdc-packet-badge", children: "Repaired" }) : null,
-      invalid ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "fdc-packet-badge is-danger", children: "Invalid" }) : null
+      invalid ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "fdc-packet-badge is-danger", children: "Invalid" }) : null,
+      decision && state.status ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Badge, { tone: state.status.tone, children: state.status.label }) : null
     ] }),
     invalid ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "fdc-packet-alert", role: "alert", children: [
       /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { children: packet.error || "This result failed validation and can\u2019t be applied." })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "fdc-packet-body", children: render ? render(packet) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(JsonView, { value: packet.payload }) }),
-    !invalid && onApply && s.apply !== false ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("footer", { className: "fdc-packet-foot", children: [
+    !invalid && decision ? state.outcome ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "fdc-packet-decision-msg", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Banner, { tone: state.outcome.tone === "success" ? "ok" : "danger", role: "status", title: state.outcome.message }) }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(DecisionFooter, { packet, decision, state }) : !invalid && onApply && s.apply !== false ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("footer", { className: "fdc-packet-foot", children: [
       packet.repaired ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "fdc-packet-note", children: "Corrected by the backend after a first attempt." }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", {}),
       /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("button", { type: "button", className: "fd-btn fd-btn-primary fd-btn-sm", disabled: applied, onClick: () => onApply(packet), children: [
         /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("i", { className: "ph ph-" + (applied ? "check" : "arrow-square-in"), "aria-hidden": "true" }),
@@ -14389,6 +14457,7 @@ function MessageBody({ message: m, ctx }) {
         schema: (ctx.packetSchemas || {})[m.packet.type],
         render: (ctx.packetRenderers || {})[m.packet.type],
         onApply: ctx.onApplyPacket,
+        decision: (ctx.packetDecisions || {})[m.packet.type],
         applied: ctx.appliedPackets && ctx.appliedPackets[m.id]
       }
     ) : null,
@@ -15107,6 +15176,7 @@ function AgentChatPanel({
   renderEmpty,
   packetSchemas,
   packetRenderers,
+  packetDecisions,
   onApplyPacket,
   pendingTimeoutMs,
   describeWaiting,
@@ -15196,6 +15266,7 @@ function AgentChatPanel({
     showThinking,
     packetSchemas,
     packetRenderers,
+    packetDecisions,
     appliedPackets: applied,
     narrow,
     onOpenAttachment,
@@ -16632,6 +16703,7 @@ function useDocumentTitle(routeTitle, appName) {
   CHAT_UNAVAILABLE,
   COPIED_FEEDBACK_MS,
   CORNER_STACK_INSET_PROPERTY,
+  CORNER_STACK_OFFSET_PROPERTY,
   Calendar,
   Card,
   CardGrid,
@@ -16738,6 +16810,7 @@ function useDocumentTitle(routeTitle, appName) {
   RoadmapTimeline,
   RunActions,
   RuntimeKit,
+  SHEET_OPEN_ATTRIBUTE,
   SaturationDistribution,
   ScoreMeter,
   ScreenHead,
@@ -16842,10 +16915,12 @@ function useDocumentTitle(routeTitle, appName) {
   useLayerZIndex,
   useOverlayLayout,
   usePopoverPosition,
+  usePublishCornerStackOffset,
   useResponsiveRail,
   useRuntimeMode,
   useServerTable,
   useSessionContext,
+  useSheetOpenMark,
   useStackedLayer,
   useStagedFiles,
   useToast,