@industry-theme/principal-view-panels 0.10.16 → 0.10.17

package/dist/panels/StoryboardListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAgB/E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAktB7D,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAiB/E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAusB7D,CAAC"}

package/dist/panels/canvas-list/components/StoryboardLoadingGraph.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const StoryboardLoadingGraph: React.FC;
+//# sourceMappingURL=StoryboardLoadingGraph.d.ts.map

package/dist/panels/canvas-list/components/StoryboardLoadingGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryboardLoadingGraph.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/components/StoryboardLoadingGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAiN1C,CAAC"}

package/dist/panels.bundle.js

@@ -98697,6 +98697,224 @@ const useCanvasWorkflowData = ({
     refreshData
   };
 };
+const StoryboardLoadingGraph = () => {
+  const { theme: theme2 } = useTheme();
+  const stepDuration = 0.5;
+  const animationDuration = stepDuration * 12;
+  const pauseDuration = 2;
+  const fadeDuration = 0.5;
+  const totalCycleDuration = animationDuration + pauseDuration + fadeDuration;
+  const nodes = [
+    { id: "workflow-1", x: 20, y: 30, delay: 0 },
+    // Step 0: Start
+    { id: "storyboard-1", x: 40, y: 50, delay: stepDuration * 2 },
+    // Step 2: After edge-0
+    { id: "canvas-1", x: 60, y: 30, delay: stepDuration * 4 },
+    // Step 4: After edge-1
+    { id: "workflow-2", x: 80, y: 50, delay: stepDuration * 6 },
+    // Step 6: After edge-2
+    { id: "storyboard-2", x: 60, y: 70, delay: stepDuration * 8 },
+    // Step 8: After edge-3
+    { id: "workflow-3", x: 40, y: 70, delay: stepDuration * 10 }
+    // Step 10: After edge-4
+  ];
+  const edges = [
+    { from: nodes[0], to: nodes[1], delay: stepDuration * 1 },
+    // Step 1: workflow-1 → storyboard-1
+    { from: nodes[1], to: nodes[2], delay: stepDuration * 3 },
+    // Step 3: storyboard-1 → canvas-1
+    { from: nodes[2], to: nodes[3], delay: stepDuration * 5 },
+    // Step 5: canvas-1 → workflow-2
+    { from: nodes[3], to: nodes[4], delay: stepDuration * 7 },
+    // Step 7: workflow-2 → storyboard-2
+    { from: nodes[4], to: nodes[5], delay: stepDuration * 9 },
+    // Step 9: storyboard-2 → workflow-3
+    { from: nodes[5], to: nodes[1], delay: stepDuration * 11 }
+    // Step 11: workflow-3 → storyboard-1 (completes cycle)
+  ];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: theme2.colors.textSecondary,
+        padding: "32px"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+          ${nodes.map((node2, index2) => {
+          const appearStart = node2.delay / totalCycleDuration * 100;
+          const appearEnd = (node2.delay + 0.4) / totalCycleDuration * 100;
+          const fadeStart = (animationDuration + pauseDuration) / totalCycleDuration * 100;
+          return `
+              @keyframes nodeAppear-${index2} {
+                0% {
+                  opacity: 0;
+                  transform: translate(-50%, -50%) scale(0.3);
+                }
+                ${appearStart}% {
+                  opacity: 0;
+                  transform: translate(-50%, -50%) scale(0.3);
+                }
+                ${appearEnd}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) scale(1);
+                }
+                ${fadeStart}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) scale(1);
+                }
+                100% {
+                  opacity: 0;
+                  transform: translate(-50%, -50%) scale(0.3);
+                }
+              }
+            `;
+        }).join("")}
+
+          ${edges.map((edge, index2) => {
+          const drawStart = edge.delay / totalCycleDuration * 100;
+          const drawEnd = (edge.delay + 0.5) / totalCycleDuration * 100;
+          const fadeStart = (animationDuration + pauseDuration) / totalCycleDuration * 100;
+          return `
+              @keyframes edgeDraw-${index2} {
+                0% {
+                  stroke-dashoffset: 200;
+                  opacity: 0;
+                }
+                ${drawStart}% {
+                  stroke-dashoffset: 200;
+                  opacity: 0;
+                }
+                ${drawEnd}% {
+                  stroke-dashoffset: 0;
+                  opacity: 1;
+                }
+                ${fadeStart}% {
+                  stroke-dashoffset: 0;
+                  opacity: 1;
+                }
+                100% {
+                  stroke-dashoffset: 200;
+                  opacity: 0;
+                }
+              }
+            `;
+        }).join("")}
+        ` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "100%",
+              maxWidth: "500px",
+              height: "300px",
+              marginBottom: "24px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    overflow: "visible"
+                  },
+                  children: edges.map((edge, index2) => {
+                    const x1 = `${edge.from.x}%`;
+                    const y1 = `${edge.from.y}%`;
+                    const x2 = `${edge.to.x}%`;
+                    const y2 = `${edge.to.y}%`;
+                    return /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1,
+                        y1,
+                        x2,
+                        y2,
+                        stroke: theme2.colors.primary,
+                        strokeWidth: "2",
+                        strokeDasharray: "200",
+                        strokeDashoffset: "200",
+                        opacity: "0",
+                        style: {
+                          animation: `edgeDraw-${index2} ${totalCycleDuration}s ease-out infinite`
+                        }
+                      },
+                      `edge-${index2}`
+                    );
+                  })
+                }
+              ),
+              nodes.map((node2, index2) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: `${node2.x}%`,
+                    top: `${node2.y}%`,
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "8px",
+                    backgroundColor: theme2.colors.backgroundSecondary,
+                    border: `2px solid ${theme2.colors.primary}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    opacity: 0,
+                    animation: `nodeAppear-${index2} ${totalCycleDuration}s ease-out infinite`
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        backgroundColor: theme2.colors.primary
+                      }
+                    }
+                  )
+                },
+                node2.id
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[2],
+              fontWeight: 500,
+              color: theme2.colors.text,
+              marginBottom: "8px"
+            },
+            children: "Loading storyboards..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.textSecondary
+            },
+            children: "Discovering workflows and canvases"
+          }
+        )
+      ]
+    }
+  );
+};
 const StoryboardListPanel = ({
   context,
   actions,
@@ -99140,20 +99358,7 @@ const StoryboardListPanel = ({
               overflowY: "hidden",
               minHeight: 0
             },
-            children: isLoading ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  height: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: theme2.colors.textSecondary,
-                  fontSize: theme2.fontSizes[2]
-                },
-                children: "Loading storyboards..."
-              }
-            ) : filteredStoryboards.length === 0 ? /* @__PURE__ */ jsx(
+            children: isLoading ? /* @__PURE__ */ jsx(StoryboardLoadingGraph, {}) : filteredStoryboards.length === 0 ? /* @__PURE__ */ jsx(
               "div",
               {
                 style: {