@industry-theme/principal-view-panels 0.12.65 → 0.12.67

package/dist/panels.bundle.js

@@ -95151,18 +95151,29 @@ const CanvasEditorPanel = ({
     isSearchOpen: false,
     searchQuery: ""
   });
-  useEffect(() => {
-    const container = canvasContainerRef.current;
-    if (!container) return;
-    const observer = new ResizeObserver(([entry]) => {
+  const observerRef = useRef(null);
+  const containerRefCallback = useCallback((node2) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    canvasContainerRef.current = node2;
+    if (!node2) return;
+    observerRef.current = new ResizeObserver(([entry]) => {
       const { width, height } = entry.contentRect;
       if (width > 0 && height > 0) {
         setContainerDimensions({ width, height });
       }
     });
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [state.loading]);
+    observerRef.current.observe(node2);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
   const [shouldFitToNodes, setShouldFitToNodes] = useState(false);
   const [fitCounter, setFitCounter] = useState(0);
   const [isCarouselExpanded, setIsCarouselExpanded] = useState(false);
@@ -95797,25 +95808,18 @@ const CanvasEditorPanel = ({
       events.off("custom", handleCustomEvent);
     };
   }, [events, workflowTemplate, state.selectedScenario, handleScenarioClick, handleScenarioDoubleClick, handleNarrativeEventClick]);
-  if (state.loading) {
-    return /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      color: theme2.colors.textMuted,
-      fontFamily: theme2.fonts.body
-    }, children: [
-      /* @__PURE__ */ jsx(Loader, { size: 24, style: { animation: "spin 1s linear infinite" } }),
-      /* @__PURE__ */ jsx("span", { style: { marginLeft: theme2.space[2] }, children: "Loading configuration..." })
-    ] });
-  }
-  if (state.error) {
-    return /* @__PURE__ */ jsx(ErrorStateContent, { theme: theme2, error: state.error, onRetry: () => loadConfiguration() });
-  }
-  if (!state.canvas) {
-    return /* @__PURE__ */ jsx(EmptyStateContent, { theme: theme2 });
-  }
+  const canvasContent = state.loading ? /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    width: "100%",
+    color: theme2.colors.textMuted,
+    fontFamily: theme2.fonts.body
+  }, children: [
+    /* @__PURE__ */ jsx(Loader, { size: 24, style: { animation: "spin 1s linear infinite" } }),
+    /* @__PURE__ */ jsx("span", { style: { marginLeft: theme2.space[2] }, children: "Loading configuration..." })
+  ] }) : state.error ? /* @__PURE__ */ jsx(ErrorStateContent, { theme: theme2, error: state.error, onRetry: () => loadConfiguration() }) : !state.canvas ? /* @__PURE__ */ jsx(EmptyStateContent, { theme: theme2 }) : null;
   return /* @__PURE__ */ jsxs("div", { style: {
     height: "100%",
     width: "100%",
@@ -95825,9 +95829,9 @@ const CanvasEditorPanel = ({
   }, children: [
     /* @__PURE__ */ jsxs("div", { style: {
       height: 39,
+      flexShrink: 0,
       borderBottom: `1px solid ${theme2.colors.border}`,
       backgroundColor: theme2.colors.background,
-      flexShrink: 0,
       display: "flex",
       alignItems: "center",
       boxSizing: "content-box"
@@ -95992,7 +95996,7 @@ const CanvasEditorPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { flex: "1 1 0%", minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
       AnimatedResizableLayout,
       {
         theme: theme2,
@@ -96009,347 +96013,345 @@ const CanvasEditorPanel = ({
             traceMatchInfo
           }
         ) }) : /* @__PURE__ */ jsx("div", {}),
-        rightPanel: /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", background: theme2.colors.background, position: "relative" }, children: [
-          /* @__PURE__ */ jsxs("div", { ref: canvasContainerRef, style: { flex: 1, position: "relative", minHeight: 0, width: "100%", height: "100%" }, children: [
-            /* @__PURE__ */ jsx(
-              GraphRenderer,
+        rightPanel: /* @__PURE__ */ jsxs("div", { ref: containerRefCallback, style: { height: "100%", width: "100%", background: theme2.colors.background, position: "relative" }, children: [
+          canvasContent ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: canvasContent }) : state.canvas ? /* @__PURE__ */ jsx(
+            GraphRenderer,
+            {
+              ref: graphRef,
+              canvas: state.canvas,
+              library: state.library ?? void 0,
+              spansCanvas: state.spansCanvas ?? void 0,
+              workflowSpanPattern: workflowSpanPattern ?? void 0,
+              width: "100%",
+              height: "100%",
+              editable: state.isEditMode,
+              onPendingChangesChange: (hasChanges) => {
+                setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
+              },
+              onCopy: handleCopyNodes,
+              showBackground: state.showGridLines,
+              backgroundVariant: "lines",
+              showControls: true,
+              highlightedNodeId: state.highlightedNodeId,
+              activeNodeIds,
+              fitViewToNodeIds,
+              fitViewPadding: 0.15,
+              containerWidth: containerDimensions == null ? void 0 : containerDimensions.width,
+              containerHeight: containerDimensions == null ? void 0 : containerDimensions.height
+            }
+          ) : null,
+          state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsxs("div", { style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            height: 40,
+            display: "flex",
+            alignItems: "stretch",
+            backgroundColor: theme2.colors.background,
+            border: `1px solid ${theme2.colors.border}`,
+            borderRadius: 0,
+            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+            zIndex: 40
+          }, children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              padding: theme2.space[3],
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.warning || "#f59e0b",
+              fontStyle: "italic",
+              fontWeight: theme2.fontWeights.medium
+            }, children: "Unsaved changes" }),
+            /* @__PURE__ */ jsxs(
+              "button",
               {
-                ref: graphRef,
-                canvas: state.canvas,
-                library: state.library ?? void 0,
-                spansCanvas: state.spansCanvas ?? void 0,
-                workflowSpanPattern: workflowSpanPattern ?? void 0,
-                width: "100%",
-                height: "100%",
-                editable: state.isEditMode,
-                onPendingChangesChange: (hasChanges) => {
-                  setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
+                onClick: saveAllChanges,
+                disabled: state.isSaving,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: theme2.space[1],
+                  padding: `0 ${theme2.space[3]}`,
+                  fontSize: theme2.fontSizes[1],
+                  fontFamily: theme2.fonts.body,
+                  color: "white",
+                  backgroundColor: theme2.colors.primary,
+                  border: "none",
+                  borderRadius: 0,
+                  cursor: state.isSaving ? "wait" : "pointer",
+                  opacity: state.isSaving ? 0.7 : 1,
+                  transition: "all 0.2s",
+                  minWidth: 80
                 },
-                onCopy: handleCopyNodes,
-                showBackground: state.showGridLines,
-                backgroundVariant: "lines",
-                showControls: true,
-                highlightedNodeId: state.highlightedNodeId,
-                activeNodeIds,
-                fitViewToNodeIds,
-                fitViewPadding: 0.15,
-                containerWidth: containerDimensions == null ? void 0 : containerDimensions.width,
-                containerHeight: containerDimensions == null ? void 0 : containerDimensions.height
+                children: [
+                  state.isSaving ? /* @__PURE__ */ jsx(Loader, { size: 14, style: { animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsx(Save, { size: 14 }),
+                  /* @__PURE__ */ jsx("span", { children: "Save" })
+                ]
               }
             ),
-            state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsxs("div", { style: {
-              position: "absolute",
-              top: 0,
-              right: 0,
-              height: 40,
-              display: "flex",
-              alignItems: "stretch",
-              backgroundColor: theme2.colors.background,
-              border: `1px solid ${theme2.colors.border}`,
-              borderRadius: 0,
-              boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-              zIndex: 40
-            }, children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                padding: theme2.space[3],
-                fontSize: theme2.fontSizes[1],
-                color: theme2.colors.warning || "#f59e0b",
-                fontStyle: "italic",
-                fontWeight: theme2.fontWeights.medium
-              }, children: "Unsaved changes" }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: saveAllChanges,
-                  disabled: state.isSaving,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: theme2.space[1],
-                    padding: `0 ${theme2.space[3]}`,
-                    fontSize: theme2.fontSizes[1],
-                    fontFamily: theme2.fonts.body,
-                    color: "white",
-                    backgroundColor: theme2.colors.primary,
-                    border: "none",
-                    borderRadius: 0,
-                    cursor: state.isSaving ? "wait" : "pointer",
-                    opacity: state.isSaving ? 0.7 : 1,
-                    transition: "all 0.2s",
-                    minWidth: 80
-                  },
-                  children: [
-                    state.isSaving ? /* @__PURE__ */ jsx(Loader, { size: 14, style: { animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsx(Save, { size: 14 }),
-                    /* @__PURE__ */ jsx("span", { children: "Save" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: discardChanges,
-                  disabled: state.isSaving,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: theme2.space[1],
-                    padding: `0 ${theme2.space[3]}`,
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: discardChanges,
+                disabled: state.isSaving,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: theme2.space[1],
+                  padding: `0 ${theme2.space[3]}`,
+                  fontSize: theme2.fontSizes[1],
+                  fontFamily: theme2.fonts.body,
+                  color: theme2.colors.text,
+                  backgroundColor: theme2.colors.backgroundSecondary,
+                  border: "none",
+                  borderLeft: `1px solid ${theme2.colors.border}`,
+                  borderRadius: 0,
+                  cursor: state.isSaving ? "wait" : "pointer",
+                  opacity: state.isSaving ? 0.7 : 1,
+                  transition: "all 0.2s",
+                  minWidth: 80
+                },
+                children: [
+                  /* @__PURE__ */ jsx(X, { size: 14 }),
+                  /* @__PURE__ */ jsx("span", { children: "Discard" })
+                ]
+              }
+            )
+          ] }),
+          state.showLegend && /* @__PURE__ */ jsxs("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 40,
+            backgroundColor: theme2.colors.background,
+            borderBottom: `1px solid ${theme2.colors.border}`,
+            padding: `0 ${theme2.space[3]}`,
+            display: "flex",
+            alignItems: "center",
+            gap: theme2.space[4],
+            overflowX: "auto",
+            zIndex: 50,
+            boxSizing: "border-box"
+          }, children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              fontSize: theme2.fontSizes[1],
+              fontWeight: theme2.fontWeights.medium,
+              color: theme2.colors.textMuted,
+              flexShrink: 0
+            }, children: "Edges:" }),
+            ((_d = (_c = state.canvas) == null ? void 0 : _c.pv) == null ? void 0 : _d.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: theme2.space[2]
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("svg", { width: "40", height: "12", style: { flexShrink: 0 }, children: [
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+                      "marker",
+                      {
+                        id: `legend-arrow-${typeName}`,
+                        markerWidth: "8",
+                        markerHeight: "6",
+                        refX: "7",
+                        refY: "3",
+                        orient: "auto",
+                        children: /* @__PURE__ */ jsx(
+                          "polygon",
+                          {
+                            points: "0 0, 8 3, 0 6",
+                            fill: edgeType.color || "#64748b"
+                          }
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: "2",
+                        y1: "6",
+                        x2: "32",
+                        y2: "6",
+                        stroke: edgeType.color || "#64748b",
+                        strokeWidth: Math.min(edgeType.width || 2, 3),
+                        strokeDasharray: edgeType.style === "dashed" ? "4,2" : edgeType.style === "dotted" ? "2,2" : void 0,
+                        markerEnd: edgeType.directed ? `url(#legend-arrow-${typeName})` : void 0
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: {
                     fontSize: theme2.fontSizes[1],
-                    fontFamily: theme2.fonts.body,
                     color: theme2.colors.text,
-                    backgroundColor: theme2.colors.backgroundSecondary,
-                    border: "none",
-                    borderLeft: `1px solid ${theme2.colors.border}`,
-                    borderRadius: 0,
-                    cursor: state.isSaving ? "wait" : "pointer",
-                    opacity: state.isSaving ? 0.7 : 1,
-                    transition: "all 0.2s",
-                    minWidth: 80
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(X, { size: 14 }),
-                    /* @__PURE__ */ jsx("span", { children: "Discard" })
-                  ]
+                    textTransform: "capitalize",
+                    whiteSpace: "nowrap"
+                  }, children: typeName.replace(/-/g, " ") })
+                ]
+              },
+              typeName
+            )) }) : /* @__PURE__ */ jsx("span", { style: {
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.textMuted,
+              fontStyle: "italic"
+            }, children: "No edge types defined" })
+          ] }),
+          state.isSearchOpen && /* @__PURE__ */ jsxs("div", { style: {
+            position: "absolute",
+            top: 12,
+            left: "50%",
+            transform: "translateX(-50%)",
+            display: "flex",
+            alignItems: "center",
+            gap: theme2.space[2],
+            padding: `${theme2.space[2]} ${theme2.space[3]}`,
+            backgroundColor: theme2.colors.background,
+            border: `1px solid ${theme2.colors.border}`,
+            borderRadius: theme2.radii[2],
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            zIndex: 60
+          }, children: [
+            /* @__PURE__ */ jsx(Search, { size: 16, style: { color: theme2.colors.textMuted, flexShrink: 0 } }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchInputRef,
+                type: "text",
+                value: state.searchQuery,
+                onChange: (e) => handleSearchChange(e.target.value),
+                placeholder: "Search nodes...",
+                style: {
+                  width: 200,
+                  padding: `${theme2.space[1]} ${theme2.space[2]}`,
+                  fontSize: theme2.fontSizes[1],
+                  fontFamily: theme2.fonts.body,
+                  color: theme2.colors.text,
+                  backgroundColor: theme2.colors.backgroundSecondary,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: theme2.radii[1],
+                  outline: "none"
+                },
+                onFocus: (e) => {
+                  e.target.style.borderColor = theme2.colors.primary;
+                },
+                onBlur: (e) => {
+                  e.target.style.borderColor = theme2.colors.border;
                 }
-              )
-            ] }),
-            state.showLegend && /* @__PURE__ */ jsxs("div", { style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              height: 40,
-              backgroundColor: theme2.colors.background,
-              borderBottom: `1px solid ${theme2.colors.border}`,
-              padding: `0 ${theme2.space[3]}`,
+              }
+            ),
+            state.searchQuery.trim() && /* @__PURE__ */ jsxs("div", { style: {
               display: "flex",
               alignItems: "center",
-              gap: theme2.space[4],
-              overflowX: "auto",
-              zIndex: 50,
-              boxSizing: "border-box"
+              gap: theme2.space[1]
             }, children: [
               /* @__PURE__ */ jsx("span", { style: {
-                fontSize: theme2.fontSizes[1],
-                fontWeight: theme2.fontWeights.medium,
-                color: theme2.colors.textMuted,
-                flexShrink: 0
-              }, children: "Edges:" }),
-              ((_d = (_c = state.canvas) == null ? void 0 : _c.pv) == null ? void 0 : _d.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: theme2.space[2]
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("svg", { width: "40", height: "12", style: { flexShrink: 0 }, children: [
-                      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-                        "marker",
-                        {
-                          id: `legend-arrow-${typeName}`,
-                          markerWidth: "8",
-                          markerHeight: "6",
-                          refX: "7",
-                          refY: "3",
-                          orient: "auto",
-                          children: /* @__PURE__ */ jsx(
-                            "polygon",
-                            {
-                              points: "0 0, 8 3, 0 6",
-                              fill: edgeType.color || "#64748b"
-                            }
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(
-                        "line",
-                        {
-                          x1: "2",
-                          y1: "6",
-                          x2: "32",
-                          y2: "6",
-                          stroke: edgeType.color || "#64748b",
-                          strokeWidth: Math.min(edgeType.width || 2, 3),
-                          strokeDasharray: edgeType.style === "dashed" ? "4,2" : edgeType.style === "dotted" ? "2,2" : void 0,
-                          markerEnd: edgeType.directed ? `url(#legend-arrow-${typeName})` : void 0
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx("span", { style: {
-                      fontSize: theme2.fontSizes[1],
-                      color: theme2.colors.text,
-                      textTransform: "capitalize",
-                      whiteSpace: "nowrap"
-                    }, children: typeName.replace(/-/g, " ") })
-                  ]
-                },
-                typeName
-              )) }) : /* @__PURE__ */ jsx("span", { style: {
-                fontSize: theme2.fontSizes[1],
-                color: theme2.colors.textMuted,
-                fontStyle: "italic"
-              }, children: "No edge types defined" })
-            ] }),
-            state.isSearchOpen && /* @__PURE__ */ jsxs("div", { style: {
-              position: "absolute",
-              top: 12,
-              left: "50%",
-              transform: "translateX(-50%)",
-              display: "flex",
-              alignItems: "center",
-              gap: theme2.space[2],
-              padding: `${theme2.space[2]} ${theme2.space[3]}`,
-              backgroundColor: theme2.colors.background,
-              border: `1px solid ${theme2.colors.border}`,
-              borderRadius: theme2.radii[2],
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-              zIndex: 60
-            }, children: [
-              /* @__PURE__ */ jsx(Search, { size: 16, style: { color: theme2.colors.textMuted, flexShrink: 0 } }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: searchInputRef,
-                  type: "text",
-                  value: state.searchQuery,
-                  onChange: (e) => handleSearchChange(e.target.value),
-                  placeholder: "Search nodes...",
-                  style: {
-                    width: 200,
-                    padding: `${theme2.space[1]} ${theme2.space[2]}`,
-                    fontSize: theme2.fontSizes[1],
-                    fontFamily: theme2.fonts.body,
-                    color: theme2.colors.text,
-                    backgroundColor: theme2.colors.backgroundSecondary,
-                    border: `1px solid ${theme2.colors.border}`,
-                    borderRadius: theme2.radii[1],
-                    outline: "none"
-                  },
-                  onFocus: (e) => {
-                    e.target.style.borderColor = theme2.colors.primary;
-                  },
-                  onBlur: (e) => {
-                    e.target.style.borderColor = theme2.colors.border;
+                fontSize: theme2.fontSizes[0],
+                color: searchMatchedNodeIds.length > 0 ? theme2.colors.textMuted : theme2.colors.error || "#ef4444",
+                whiteSpace: "nowrap",
+                minWidth: 50,
+                textAlign: "center"
+              }, children: searchMatchedNodeIds.length > 0 ? `${currentSearchIndex + 1}/${searchMatchedNodeIds.length}` : "No results" }),
+              searchMatchedNodeIds.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: goToPrevSearchResult,
+                    title: "Previous result (Shift+Enter)",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 24,
+                      height: 24,
+                      padding: 0,
+                      backgroundColor: "transparent",
+                      color: theme2.colors.textMuted,
+                      border: "none",
+                      borderRadius: theme2.radii[0],
+                      cursor: "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })
                   }
-                }
-              ),
-              state.searchQuery.trim() && /* @__PURE__ */ jsxs("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: theme2.space[1]
-              }, children: [
-                /* @__PURE__ */ jsx("span", { style: {
-                  fontSize: theme2.fontSizes[0],
-                  color: searchMatchedNodeIds.length > 0 ? theme2.colors.textMuted : theme2.colors.error || "#ef4444",
-                  whiteSpace: "nowrap",
-                  minWidth: 50,
-                  textAlign: "center"
-                }, children: searchMatchedNodeIds.length > 0 ? `${currentSearchIndex + 1}/${searchMatchedNodeIds.length}` : "No results" }),
-                searchMatchedNodeIds.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: goToPrevSearchResult,
-                      title: "Previous result (Shift+Enter)",
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: 24,
-                        height: 24,
-                        padding: 0,
-                        backgroundColor: "transparent",
-                        color: theme2.colors.textMuted,
-                        border: "none",
-                        borderRadius: theme2.radii[0],
-                        cursor: "pointer"
-                      },
-                      children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: goToNextSearchResult,
-                      title: "Next result (Enter)",
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: 24,
-                        height: 24,
-                        padding: 0,
-                        backgroundColor: "transparent",
-                        color: theme2.colors.textMuted,
-                        border: "none",
-                        borderRadius: theme2.radii[0],
-                        cursor: "pointer"
-                      },
-                      children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: closeSearch,
-                  title: "Close search (Escape)",
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 24,
-                    height: 24,
-                    padding: 0,
-                    backgroundColor: "transparent",
-                    color: theme2.colors.textMuted,
-                    border: "none",
-                    borderRadius: theme2.radii[0],
-                    cursor: "pointer",
-                    marginLeft: theme2.space[1]
-                  },
-                  children: /* @__PURE__ */ jsx(X, { size: 16 })
-                }
-              )
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: goToNextSearchResult,
+                    title: "Next result (Enter)",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 24,
+                      height: 24,
+                      padding: 0,
+                      backgroundColor: "transparent",
+                      color: theme2.colors.textMuted,
+                      border: "none",
+                      borderRadius: theme2.radii[0],
+                      cursor: "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+                  }
+                )
+              ] })
             ] }),
-            copiedNodesCount !== null && /* @__PURE__ */ jsxs("div", { style: {
-              position: "absolute",
-              bottom: 16,
-              left: "50%",
-              transform: "translateX(-50%)",
-              display: "flex",
-              alignItems: "center",
-              gap: theme2.space[2],
-              padding: `${theme2.space[2]} ${theme2.space[3]}`,
-              backgroundColor: theme2.colors.backgroundSecondary,
-              border: `1px solid ${theme2.colors.border}`,
-              borderRadius: theme2.radii[1],
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-              zIndex: 50,
-              animation: "fadeIn 0.15s ease-out"
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: closeSearch,
+                title: "Close search (Escape)",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 24,
+                  height: 24,
+                  padding: 0,
+                  backgroundColor: "transparent",
+                  color: theme2.colors.textMuted,
+                  border: "none",
+                  borderRadius: theme2.radii[0],
+                  cursor: "pointer",
+                  marginLeft: theme2.space[1]
+                },
+                children: /* @__PURE__ */ jsx(X, { size: 16 })
+              }
+            )
+          ] }),
+          copiedNodesCount !== null && /* @__PURE__ */ jsxs("div", { style: {
+            position: "absolute",
+            bottom: 16,
+            left: "50%",
+            transform: "translateX(-50%)",
+            display: "flex",
+            alignItems: "center",
+            gap: theme2.space[2],
+            padding: `${theme2.space[2]} ${theme2.space[3]}`,
+            backgroundColor: theme2.colors.backgroundSecondary,
+            border: `1px solid ${theme2.colors.border}`,
+            borderRadius: theme2.radii[1],
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            zIndex: 50,
+            animation: "fadeIn 0.15s ease-out"
+          }, children: [
+            /* @__PURE__ */ jsx(Check, { size: 14, style: { color: theme2.colors.success || "#22c55e" } }),
+            /* @__PURE__ */ jsxs("span", { style: {
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.text,
+              whiteSpace: "nowrap"
             }, children: [
-              /* @__PURE__ */ jsx(Check, { size: 14, style: { color: theme2.colors.success || "#22c55e" } }),
-              /* @__PURE__ */ jsxs("span", { style: {
-                fontSize: theme2.fontSizes[1],
-                color: theme2.colors.text,
-                whiteSpace: "nowrap"
-              }, children: [
-                "Copied ",
-                copiedNodesCount,
-                " node",
-                copiedNodesCount !== 1 ? "s" : "",
-                " to clipboard"
-              ] })
+              "Copied ",
+              copiedNodesCount,
+              " node",
+              copiedNodesCount !== 1 ? "s" : "",
+              " to clipboard"
             ] })
           ] }),
-          state.selectedScenario && /* @__PURE__ */ jsx(
+          state.selectedScenario && /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 30 }, children: /* @__PURE__ */ jsx(
             EventCarousel,
             {
               scenario: state.selectedScenario,
@@ -96401,7 +96403,7 @@ const CanvasEditorPanel = ({
               },
               traceEvents
             }
-          )
+          ) })
         ] })
       }
     ) })
@@ -98213,7 +98215,7 @@ const StoryboardListPanel = ({
                       fontSize: theme2.fontSizes[1],
                       fontFamily: theme2.fonts.body,
                       fontWeight: effectiveCanvasTypeFilter === "regular" ? 600 : 400,
-                      color: effectiveCanvasTypeFilter === "regular" ? "white" : theme2.colors.text,
+                      color: effectiveCanvasTypeFilter === "regular" ? theme2.colors.textOnPrimary : theme2.colors.text,
                       transition: "all 0.2s ease"
                     },
                     title: "Static architecture .canvas files",
@@ -98237,7 +98239,7 @@ const StoryboardListPanel = ({
                       fontSize: theme2.fontSizes[1],
                       fontFamily: theme2.fonts.body,
                       fontWeight: effectiveCanvasTypeFilter === "otel" ? 600 : 400,
-                      color: effectiveCanvasTypeFilter === "otel" ? "white" : theme2.colors.text,
+                      color: effectiveCanvasTypeFilter === "otel" ? theme2.colors.textOnPrimary : theme2.colors.text,
                       transition: "all 0.2s ease"
                     },
                     title: "Runtime validated .otel.canvas files",