@drawbridge/components 0.1.5 → 0.1.6

package/dist/dashboard/steps.mjs

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
 import { capitalize, formatDateString } from "@drawbridge/drawbridge-utils";
 import Accordion from "./accordion.mjs";
 import Paged from "./paged.mjs";
@@ -23,6 +24,14 @@ const indicatorType = (status) => {
   if (status === "partial" || status === "skipped") return "warning";
   return "inactive";
 };
+const replyExcerpt = (response, length = 300) => {
+  const wrapped = response && typeof response === "object" && !Array.isArray(response) && Object.keys(response).length === 1 && "body" in response;
+  const reply = wrapped ? response.body : response;
+  if (reply === void 0 || reply === null) return null;
+  const text = (typeof reply === "string" ? reply : JSON.stringify(reply)).replace(/<(script|style)\b[\s\S]*?<\/\1>/gi, " ").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  return text.length > length ? text.slice(0, length) + "\u2026" : text;
+};
 const StepItem = ({
   updatedAt,
   error: chunkError,
@@ -35,6 +44,7 @@ const StepItem = ({
 }) => {
   const error = chunkError || status === "failed" && message || null;
   const notice = error || status === "skipped" && message || null;
+  const reply = error ? replyExcerpt(response) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -102,13 +112,51 @@ const StepItem = ({
                     }
                   )
                 },
-                children: notice ? /* @__PURE__ */ jsx(
-                  CardTask,
+                children: notice ? /* @__PURE__ */ jsxs(
+                  "div",
                   {
                     ...{
-                      message: notice,
-                      type: error ? "error" : "warning"
-                    }
+                      className: "space-y-3"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        CardTask,
+                        {
+                          ...{
+                            message: notice,
+                            type: error ? "error" : "warning"
+                          }
+                        }
+                      ),
+                      reply && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ...{
+                            className: "space-y-1"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs text-gray-dark"
+                                },
+                                children: "Response"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs break-words"
+                                },
+                                children: reply
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
                   }
                 ) : /* @__PURE__ */ jsx(
                   CodeFormater,
@@ -141,11 +189,15 @@ const groupTitle = ({ count, email, items, kind, pending }) => {
   const entries = count + " new " + (count === 1 ? "entry" : "entries");
   return "Team notification \u2014 " + entries + (pending ? ", sending" : "");
 };
-const rowLabel = ({ item, kind }) => {
-  if (kind !== "notify") return item == null ? void 0 : item.slug;
+const rowLabel = ({ item, kind, labels = [] }) => {
+  var _a;
+  if (kind !== "notify") return ((_a = labels.find((option) => option.value === (item == null ? void 0 : item.slug))) == null ? void 0 : _a.key) || (item == null ? void 0 : item.slug);
   return NOTIFY_LABELS[item == null ? void 0 : item.status] || NOTIFY_LABELS.succeeded;
 };
-const Group = ({ group }) => {
+const Group = ({
+  group,
+  labels
+}) => {
   const { items, kind } = group;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
@@ -172,7 +224,7 @@ const Group = ({ group }) => {
           {
             ...{
               ...item,
-              label: rowLabel({ item, kind })
+              label: rowLabel({ item, kind, labels })
             }
           },
           key
@@ -186,6 +238,8 @@ const Steps = ({
   limit = 24,
   organization
 }) => {
+  var _a, _b, _c, _d;
+  const labels = (_d = (_c = (_b = (_a = useQueryClient().getQueryData(["app"])) == null ? void 0 : _a.enums) == null ? void 0 : _b.step) == null ? void 0 : _c.type) == null ? void 0 : _d.options;
   return /* @__PURE__ */ jsx(
     Paged,
     {
@@ -211,7 +265,8 @@ const Steps = ({
             Group,
             {
               ...{
-                group
+                group,
+                labels
               }
             },
             key
@@ -225,5 +280,6 @@ var steps_default = Steps;
 export {
   steps_default as default,
   groupTitle,
+  replyExcerpt,
   rowLabel
 };

package/dist/dashboard/template-dashboard.js

@@ -30,6 +30,7 @@ __export(template_dashboard_exports, {
   Refetch: () => Refetch,
   TemplateDashboardError: () => TemplateDashboardError,
   TemplateDashboardResource: () => TemplateDashboardResource,
+  TemplateDashboardTasks: () => TemplateDashboardTasks,
   default: () => template_dashboard_default
 });
 module.exports = __toCommonJS(template_dashboard_exports);
@@ -382,55 +383,74 @@ const TemplateDashboardTasks = ({
   });
   const array = [...items];
   const first = array.shift();
-  const openAll = () => {
-    open({
-      title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "span",
-        {
-          ...{
-            className: "flex items-center space-x-3"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Next steps" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_badge.default,
-              {
-                ...{
-                  type: "warning"
-                },
-                children: array.length + 1
-              }
-            )
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          ...{
-            className: "p-6"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_list.default,
+  const nextSteps = () => ({
+    title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "span",
+      {
+        ...{
+          className: "flex items-center space-x-3"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Next steps" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_badge.default,
             {
               ...{
-                items: [
-                  {
-                    ...first,
-                    onClick: () => close()
-                  },
-                  ...array.map((props) => ({
-                    ...props,
-                    onClick: () => close()
-                  }))
-                ]
-              }
+                type: "warning"
+              },
+              children: array.length + 1
             }
           )
-        }
-      )
-    });
+        ]
+      }
+    ),
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...{
+          className: "p-6"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_list.default,
+          {
+            ...{
+              items: [
+                {
+                  ...first,
+                  onClick: () => close()
+                },
+                ...array.map((props) => ({
+                  ...props,
+                  onClick: () => close()
+                }))
+              ]
+            }
+          }
+        )
+      }
+    )
+  });
+  const shown = (0, import_react.useRef)(null);
+  const openAll = () => {
+    const props = nextSteps();
+    shown.current = props.children;
+    open(props);
   };
+  (0, import_react.useEffect)(
+    () => {
+      const drawer = queryClient.getQueryData(["drawer"]);
+      if (!shown.current || !(drawer == null ? void 0 : drawer.active) || drawer.children !== shown.current) return;
+      if (!first) {
+        shown.current = null;
+        close();
+        return;
+      }
+      openAll();
+    },
+    // The tasks are the trigger; the rest follows them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items]
+  );
   if (first) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -733,5 +753,6 @@ var template_dashboard_default = TemplateDashboard;
 0 && (module.exports = {
   Refetch,
   TemplateDashboardError,
-  TemplateDashboardResource
+  TemplateDashboardResource,
+  TemplateDashboardTasks
 });

package/dist/dashboard/template-dashboard.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement, useEffect, useState } from "react";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { keepPreviousData, useIsFetching, useQueryClient } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import { isTransientError } from "@drawbridge/drawbridge-utils/fetch";
@@ -347,55 +347,74 @@ const TemplateDashboardTasks = ({
   });
   const array = [...items];
   const first = array.shift();
-  const openAll = () => {
-    open({
-      title: /* @__PURE__ */ jsxs(
-        "span",
-        {
-          ...{
-            className: "flex items-center space-x-3"
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { children: "Next steps" }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                ...{
-                  type: "warning"
-                },
-                children: array.length + 1
-              }
-            )
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...{
-            className: "p-6"
-          },
-          children: /* @__PURE__ */ jsx(
-            List,
+  const nextSteps = () => ({
+    title: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...{
+          className: "flex items-center space-x-3"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: "Next steps" }),
+          /* @__PURE__ */ jsx(
+            Badge,
             {
               ...{
-                items: [
-                  {
-                    ...first,
-                    onClick: () => close()
-                  },
-                  ...array.map((props) => ({
-                    ...props,
-                    onClick: () => close()
-                  }))
-                ]
-              }
+                type: "warning"
+              },
+              children: array.length + 1
             }
           )
-        }
-      )
-    });
+        ]
+      }
+    ),
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "p-6"
+        },
+        children: /* @__PURE__ */ jsx(
+          List,
+          {
+            ...{
+              items: [
+                {
+                  ...first,
+                  onClick: () => close()
+                },
+                ...array.map((props) => ({
+                  ...props,
+                  onClick: () => close()
+                }))
+              ]
+            }
+          }
+        )
+      }
+    )
+  });
+  const shown = useRef(null);
+  const openAll = () => {
+    const props = nextSteps();
+    shown.current = props.children;
+    open(props);
   };
+  useEffect(
+    () => {
+      const drawer = queryClient.getQueryData(["drawer"]);
+      if (!shown.current || !(drawer == null ? void 0 : drawer.active) || drawer.children !== shown.current) return;
+      if (!first) {
+        shown.current = null;
+        close();
+        return;
+      }
+      openAll();
+    },
+    // The tasks are the trigger; the rest follows them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items]
+  );
   if (first) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -698,5 +717,6 @@ export {
   Refetch,
   TemplateDashboardError,
   TemplateDashboardResource,
+  TemplateDashboardTasks,
   template_dashboard_default as default
 };

package/dist/dashboard/template-socket.js

@@ -439,10 +439,12 @@ const TemplateSocketOrganization = ({
           queryKey: ["organization-members", params.organization]
         });
       },
-      // Sync wrote or cleared a workflow's run-time issue. The open workflow
-      // page shows it, the list carries it, and the dashboard's Next steps
-      // and the sidebar Workflows dot are built server-side off the org and
-      // menu queries — so all four refetch.
+      // @story workflows/list
+      // Sync emits this on every workflow status change, on delete, and when
+      // a run-time issue is written or cleared. The open workflow page shows
+      // it, the list carries it, and the dashboard's Next steps and the
+      // sidebar Workflows dot are built server-side off the org and menu
+      // queries — so all four refetch.
       "organization.workflows": () => {
         queryClient.invalidateQueries({
           queryKey: ["organization-workflows", params.organization]
@@ -456,6 +458,12 @@ const TemplateSocketOrganization = ({
         queryClient.invalidateQueries({
           queryKey: ["menu", "organization", params.organization]
         });
+        queryClient.invalidateQueries({
+          queryKey: ["organizations"]
+        });
+        queryClient.invalidateQueries({
+          queryKey: ["shared"]
+        });
       },
       // A running workflow's steps transition ( insert + status change ) in
       // sync, which coalesces the burst into one emit per org room. The
@@ -481,6 +489,7 @@ const TemplateSocketOrganization = ({
       ["organization-connection", params == null ? void 0 : params.organization],
       ["organization-campaign-products", params == null ? void 0 : params.organization],
       ["organization-workflows", params == null ? void 0 : params.organization],
+      ["organization-workflow", params == null ? void 0 : params.organization],
       ["organization-workflow-catalog", params == null ? void 0 : params.organization],
       ["organization-workflow-steps"],
       ["organization-contacts", params == null ? void 0 : params.organization],

package/dist/dashboard/template-socket.mjs

@@ -404,10 +404,12 @@ const TemplateSocketOrganization = ({
           queryKey: ["organization-members", params.organization]
         });
       },
-      // Sync wrote or cleared a workflow's run-time issue. The open workflow
-      // page shows it, the list carries it, and the dashboard's Next steps
-      // and the sidebar Workflows dot are built server-side off the org and
-      // menu queries — so all four refetch.
+      // @story workflows/list
+      // Sync emits this on every workflow status change, on delete, and when
+      // a run-time issue is written or cleared. The open workflow page shows
+      // it, the list carries it, and the dashboard's Next steps and the
+      // sidebar Workflows dot are built server-side off the org and menu
+      // queries — so all four refetch.
       "organization.workflows": () => {
         queryClient.invalidateQueries({
           queryKey: ["organization-workflows", params.organization]
@@ -421,6 +423,12 @@ const TemplateSocketOrganization = ({
         queryClient.invalidateQueries({
           queryKey: ["menu", "organization", params.organization]
         });
+        queryClient.invalidateQueries({
+          queryKey: ["organizations"]
+        });
+        queryClient.invalidateQueries({
+          queryKey: ["shared"]
+        });
       },
       // A running workflow's steps transition ( insert + status change ) in
       // sync, which coalesces the burst into one emit per org room. The
@@ -446,6 +454,7 @@ const TemplateSocketOrganization = ({
       ["organization-connection", params == null ? void 0 : params.organization],
       ["organization-campaign-products", params == null ? void 0 : params.organization],
       ["organization-workflows", params == null ? void 0 : params.organization],
+      ["organization-workflow", params == null ? void 0 : params.organization],
       ["organization-workflow-catalog", params == null ? void 0 : params.organization],
       ["organization-workflow-steps"],
       ["organization-contacts", params == null ? void 0 : params.organization],

package/dist/shared/lib/video.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var video_exports = {};
+__export(video_exports, {
+  provideHls: () => provideHls,
+  startSeek: () => startSeek,
+  videoErrorAction: () => videoErrorAction,
+  videoOverlay: () => videoOverlay
+});
+module.exports = __toCommonJS(video_exports);
+const provideHls = (Hls, target) => {
+  if (Hls && target && !target.Hls) target.Hls = Hls;
+};
+const videoErrorAction = ({
+  data,
+  error,
+  mp4,
+  url
+}) => {
+  if (data && !data.fatal) return "ignore";
+  if ((error == null ? void 0 : error.name) === "AbortError") return "ignore";
+  if ((error == null ? void 0 : error.name) === "NotAllowedError") return "fail";
+  return mp4 && url !== mp4 ? "retry" : "fail";
+};
+const videoOverlay = ({
+  failed,
+  poster,
+  videoPaintable
+}) => {
+  if (videoPaintable) return null;
+  if (poster) return "poster";
+  return failed ? "warning" : "loader";
+};
+const SHOWN_START = 1e-3;
+const startSeek = ({
+  reset,
+  wasReset
+}) => {
+  if (reset) return 0;
+  return wasReset ? SHOWN_START : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  provideHls,
+  startSeek,
+  videoErrorAction,
+  videoOverlay
+});

package/dist/shared/lib/video.mjs

@@ -0,0 +1,37 @@
+const provideHls = (Hls, target) => {
+  if (Hls && target && !target.Hls) target.Hls = Hls;
+};
+const videoErrorAction = ({
+  data,
+  error,
+  mp4,
+  url
+}) => {
+  if (data && !data.fatal) return "ignore";
+  if ((error == null ? void 0 : error.name) === "AbortError") return "ignore";
+  if ((error == null ? void 0 : error.name) === "NotAllowedError") return "fail";
+  return mp4 && url !== mp4 ? "retry" : "fail";
+};
+const videoOverlay = ({
+  failed,
+  poster,
+  videoPaintable
+}) => {
+  if (videoPaintable) return null;
+  if (poster) return "poster";
+  return failed ? "warning" : "loader";
+};
+const SHOWN_START = 1e-3;
+const startSeek = ({
+  reset,
+  wasReset
+}) => {
+  if (reset) return 0;
+  return wasReset ? SHOWN_START : null;
+};
+export {
+  provideHls,
+  startSeek,
+  videoErrorAction,
+  videoOverlay
+};

package/dist/video.js

@@ -36,8 +36,13 @@ var import_dynamic = __toESM(require("next/dynamic"));
 var import_react = require("react");
 var import_loader = __toESM(require("./icons/loader"));
 var import_warning = __toESM(require("./icons/warning"));
+var import_video = require("./shared/lib/video");
 const ReactPlayer = (0, import_dynamic.default)(
-  () => import("react-player/lazy"),
+  () => Promise.all([
+    import("hls.js").then((module2) => (0, import_video.provideHls)(module2.default || module2, window)).catch(() => {
+    }),
+    import("react-player/lazy")
+  ]).then(([, player]) => player),
   {
     ssr: false
   }
@@ -67,17 +72,22 @@ const Video = ({
 }) => {
   var _a, _b, _c, _d;
   const durationFired = (0, import_react.useRef)(false);
+  const errored = (0, import_react.useRef)(false);
   const [player, setPlayer] = (0, import_react.useState)();
   const [videoUrl, setVideoUrl] = (0, import_react.useState)(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = (0, import_react.useState)(!defer);
   const [posterPainted, setPosterPainted] = (0, import_react.useState)(false);
   const [videoPaintable, setVideoPaintable] = (0, import_react.useState)(false);
   const [failed, setFailed] = (0, import_react.useState)(false);
+  const wasReset = (0, import_react.useRef)(reset);
   (0, import_react.useEffect)(
     () => {
-      if (player && reset) {
-        player.seekTo(0, "seconds");
+      if (!player) return;
+      const target = (0, import_video.startSeek)({ reset, wasReset: wasReset.current });
+      if (target !== null) {
+        player.seekTo(target, "seconds");
       }
+      wasReset.current = reset;
     },
     [player, reset]
   );
@@ -109,6 +119,11 @@ const Video = ({
     },
     [defer, mountPlayer, poster, posterPainted]
   );
+  const overlay = (0, import_video.videoOverlay)({
+    failed,
+    poster,
+    videoPaintable
+  });
   const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
     mountPlayer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ReactPlayer,
@@ -154,11 +169,19 @@ const Video = ({
             onTime == null ? void 0 : onTime(seconds);
           },
           progressInterval: 100,
-          onError: () => {
-            if (mp4 && videoUrl !== mp4) {
+          onError: (error, data) => {
+            const action = (0, import_video.videoErrorAction)({
+              data,
+              error,
+              mp4,
+              url: videoUrl
+            });
+            if (action === "ignore" || errored.current) return;
+            if (action === "retry") {
               setVideoUrl(mp4);
               return;
             }
+            errored.current = true;
             setFailed(true);
             onError();
           },
@@ -183,7 +206,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && poster && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    overlay === "poster" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "img",
       {
         ...{
@@ -204,7 +227,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    overlay === "loader" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ...{
@@ -227,7 +250,7 @@ const Video = ({
         )
       }
     ),
-    failed && !poster && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    overlay === "warning" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ...{