@industry-theme/principal-view-panels 0.10.15 → 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/TraceListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAY/E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+yBxD,CAAC"}
+{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAY/E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2zBxD,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: {
@@ -100827,40 +101032,50 @@ const TraceListPanel = ({
                   /* @__PURE__ */ jsx("div", { style: { fontSize: "15px", fontWeight: 600, marginBottom: "4px" }, children: (_a = schematic.repositoryUrl) == null ? void 0 : _a.replace("https://github.com/", "") }),
                   /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: theme2.colors.textMuted, fontFamily: theme2.fonts.monospace }, children: schematic.commitSha })
                 ] }),
-                schematic.workflows && schematic.workflows.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: schematic.workflows.map((workflow, wIndex) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      padding: "12px",
-                      backgroundColor: theme2.colors.background,
-                      border: `1px solid ${theme2.colors.border}`,
-                      borderRadius: "3px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 500, marginBottom: "8px" }, children: workflow.name || "Unnamed Workflow" }),
-                      workflow.scenarios && workflow.scenarios.length > 0 && /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: theme2.colors.textSecondary }, children: [
-                        /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: "4px" }, children: [
-                          "Scenarios (",
-                          workflow.scenarios.length,
-                          "):"
-                        ] }),
-                        /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "20px" }, children: workflow.scenarios.map((scenario, sIndex) => {
-                          var _a2, _b;
-                          return /* @__PURE__ */ jsxs("li", { style: { marginBottom: "4px" }, children: [
-                            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: scenario.id }),
-                            ((_a2 = scenario.condition) == null ? void 0 : _a2.requires) && scenario.condition.requires.length > 0 && /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.textMuted }, children: [
-                              " ",
-                              "- requires: ",
-                              scenario.condition.requires.join(", ")
+                (() => {
+                  var _a2;
+                  const allWorkflows = ((_a2 = schematic.storyboards) == null ? void 0 : _a2.flatMap(
+                    (storyboard) => storyboard.workflows || []
+                  )) || [];
+                  return allWorkflows.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: allWorkflows.map((workflow, wIndex) => {
+                    var _a3;
+                    const scenarios = workflow.scenarios || ((_a3 = workflow.content) == null ? void 0 : _a3.scenarios) || [];
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: "12px",
+                          backgroundColor: theme2.colors.background,
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: "3px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 500, marginBottom: "8px" }, children: workflow.name || "Unnamed Workflow" }),
+                          scenarios.length > 0 && /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: theme2.colors.textSecondary }, children: [
+                            /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: "4px" }, children: [
+                              "Scenarios (",
+                              scenarios.length,
+                              "):"
                             ] }),
-                            ((_b = scenario.condition) == null ? void 0 : _b.default) && /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted }, children: " - default fallback" })
-                          ] }, sIndex);
-                        }) })
-                      ] })
-                    ]
-                  },
-                  wIndex
-                )) }) : /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: theme2.colors.textMuted }, children: "No workflows found" })
+                            /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "20px" }, children: scenarios.map((scenario, sIndex) => {
+                              var _a4, _b;
+                              return /* @__PURE__ */ jsxs("li", { style: { marginBottom: "4px" }, children: [
+                                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: scenario.id }),
+                                ((_a4 = scenario.condition) == null ? void 0 : _a4.requires) && scenario.condition.requires.length > 0 && /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.textMuted }, children: [
+                                  " ",
+                                  "- requires: ",
+                                  scenario.condition.requires.join(", ")
+                                ] }),
+                                ((_b = scenario.condition) == null ? void 0 : _b.default) && /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted }, children: " - default fallback" })
+                              ] }, sIndex);
+                            }) })
+                          ] })
+                        ]
+                      },
+                      wIndex
+                    );
+                  }) }) : /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: theme2.colors.textMuted }, children: "No workflows found" });
+                })()
               ]
             },
             index2