@opentrace/components 0.1.1-rc.43 → 0.1.1-rc.44

package/dist/components.css

@@ -1385,6 +1385,28 @@
 .graph-badge-sep {
   margin: 0 3px;
 }
+
+/* ── Compact badge (1100px–1300px) ──────────── */
+@media (max-width: 1300px) and (min-width: 1100px) {
+  .graph-badge-total,
+  .graph-badge-label {
+    display: none;
+  }
+
+  .graph-badge {
+    gap: 4px;
+    padding: 0 10px;
+  }
+}
+
+/* ── Hidden badge (1025px–1099px) ───────────── */
+/* Below 1024px the toolbar collapses to burger dropdown where the
+   badge reappears as a full-width menu row, so we stop hiding at 1025px. */
+@media (max-width: 1099px) and (min-width: 1025px) {
+  .graph-badge {
+    display: none;
+  }
+}
 /*
  * Copyright 2026 OpenTrace Contributors
  *
@@ -1504,6 +1526,427 @@
  * limitations under the License.
  */
 
+/* ── Toolbar layout ─────────────────────────── */
+
+.ot-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  pointer-events: none;
+}
+
+.ot-toolbar h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: -0.02em;
+  pointer-events: auto;
+}
+
+/* ── Nav (inline on desktop, dropdown on mobile) */
+
+.ot-toolbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  pointer-events: auto;
+}
+
+/* Hidden on desktop */
+.ot-toolbar .ot-menu-label {
+  display: none;
+}
+
+.ot-toolbar .ot-mobile-panel-btn,
+.ot-toolbar .ot-menu-divider {
+  display: none;
+}
+
+/* ── Search placement ──────────────────────── */
+/* Desktop: search inside nav is visible, tablet search is hidden */
+.ot-toolbar .ot-search-tablet {
+  display: none;
+}
+
+.ot-toolbar .ot-search-nav {
+  display: contents;
+}
+
+/* ── Persistent actions ─────────────────────── */
+/* On desktop: hidden here, shown inside nav via .ot-persistent-desktop */
+.ot-toolbar .ot-persistent-mobile {
+  display: none;
+  pointer-events: auto;
+}
+
+.ot-toolbar .ot-persistent-desktop {
+  display: contents;
+}
+
+/* ── Burger button ──────────────────────────── */
+
+.ot-toolbar .ot-burger-btn {
+  display: none;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px;
+  cursor: pointer;
+  color: var(--foreground);
+  pointer-events: auto;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.ot-toolbar .ot-burger-btn:hover {
+  background: var(--accent);
+}
+
+/* ── Search ─────────────────────────────────── */
+
+.ot-toolbar .ot-search-container {
+  position: relative;
+  flex: 1;
+  max-width: 460px;
+  margin: 0 0.5rem;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+}
+
+.ot-toolbar .ot-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  padding-right: 155px;
+  background: color-mix(in oklch, var(--card) 80%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  border-radius: calc(var(--radius) + 2px);
+  color: var(--foreground);
+  font-size: 0.8rem;
+  transition: all 0.2s;
+}
+
+.ot-toolbar .ot-search-input:focus {
+  outline: none;
+  border-color: color-mix(in oklch, var(--primary) 50%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 12%, transparent);
+}
+
+.ot-toolbar .ot-search-input::placeholder {
+  color: var(--muted-foreground);
+}
+
+.ot-toolbar .ot-search-params {
+  position: absolute;
+  right: 56px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  color: var(--muted-foreground);
+  border-left: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  padding-left: 8px;
+}
+
+.ot-toolbar .ot-hops-input {
+  width: 32px;
+  height: 22px;
+  background: color-mix(in oklch, var(--background) 60%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--foreground);
+  font-size: 0.7rem;
+  padding: 0 4px;
+  text-align: center;
+}
+
+.ot-toolbar .ot-hops-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.ot-toolbar .ot-hops-input::-webkit-inner-spin-button,
+.ot-toolbar .ot-hops-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.ot-toolbar .ot-search-actions {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ot-toolbar .ot-clear-search {
+  background: none;
+  border: none;
+  color: var(--muted-foreground);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 2px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ot-toolbar .ot-clear-search:hover {
+  color: var(--foreground);
+}
+
+.ot-toolbar .ot-search-btn {
+  background: var(--primary);
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--primary-foreground);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+
+.ot-toolbar .ot-search-btn:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--primary) 85%, black);
+}
+
+.ot-toolbar .ot-search-btn:disabled {
+  background: color-mix(in oklch, var(--secondary) 60%, transparent);
+  color: var(--muted-foreground);
+  cursor: not-allowed;
+}
+
+/* ── Reset / Show All button ────────────────── */
+
+.ot-toolbar .ot-reset-btn {
+  pointer-events: auto;
+  background: color-mix(in oklch, var(--card) 80%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  color: var(--muted-foreground);
+  height: 36px;
+  padding: 0 12px;
+  border-radius: calc(var(--radius) + 2px);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ot-toolbar .ot-reset-btn:hover {
+  background: color-mix(in oklch, var(--primary) 10%, transparent);
+  color: var(--primary);
+  border-color: color-mix(in oklch, var(--primary) 30%, transparent);
+}
+
+/* ── Tablet + Mobile (≤ 1024px): burger dropdown ── */
+
+@media (max-width: 1024px) {
+  .ot-toolbar {
+    flex-wrap: wrap;
+    padding: max(12px, env(safe-area-inset-top))
+      max(16px, env(safe-area-inset-right)) 12px
+      max(16px, env(safe-area-inset-left));
+    gap: 0;
+  }
+
+  /* Tablet search: visible outside the nav at 600–1024px */
+  .ot-toolbar .ot-search-tablet {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    pointer-events: auto;
+  }
+
+  .ot-toolbar .ot-search-tablet .ot-search-container {
+    flex: 1;
+    max-width: none;
+    margin: 0 8px;
+  }
+
+  /* Hide the in-nav copy of search */
+  .ot-toolbar .ot-search-nav {
+    display: none;
+  }
+
+  .ot-toolbar .ot-persistent-mobile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 0;
+    flex-shrink: 0;
+  }
+
+  .ot-toolbar .ot-persistent-desktop {
+    display: none;
+  }
+
+  .ot-toolbar .ot-burger-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+
+  .ot-toolbar-nav {
+    display: none;
+    flex-basis: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) + 2px);
+    padding: 6px 0;
+    margin-top: 8px;
+    pointer-events: auto;
+  }
+
+  .ot-toolbar-nav.open {
+    display: flex;
+  }
+
+  /* Show panel shortcuts and dividers */
+  .ot-toolbar .ot-mobile-panel-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    background: transparent;
+    border: none;
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    pointer-events: auto;
+  }
+
+  .ot-toolbar .ot-mobile-panel-btn:hover {
+    background: var(--accent);
+  }
+
+  .ot-toolbar .ot-menu-divider {
+    display: block;
+    height: 1px;
+    background: var(--border);
+    margin: 4px 0;
+  }
+
+  .ot-toolbar .ot-menu-label {
+    display: inline;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  /* Search full width in dropdown */
+  .ot-toolbar-nav .ot-search-container {
+    width: auto;
+    max-width: none;
+    min-width: 0;
+    margin: 4px 10px;
+  }
+
+  /* Reset button as menu row */
+  .ot-toolbar-nav .ot-reset-btn {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    height: auto;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--foreground);
+  }
+
+  .ot-toolbar-nav .ot-reset-btn:hover {
+    background: var(--accent);
+    border-color: transparent;
+  }
+
+  /* Badge as menu row */
+  .ot-toolbar-nav .graph-badge {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    backdrop-filter: none;
+    height: auto;
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+}
+
+/* ── Small mobile (≤ 600px): search goes back into burger ── */
+
+@media (max-width: 600px) {
+  .ot-toolbar .ot-search-tablet {
+    display: none;
+  }
+
+  .ot-toolbar .ot-search-nav {
+    display: contents;
+  }
+
+  .ot-toolbar .ot-persistent-mobile {
+    margin-left: auto;
+  }
+}
+
+/* ── Extra small (≤ 640px) ──────────────────── */
+
+@media (max-width: 640px) {
+  .ot-toolbar {
+    padding: max(10px, env(safe-area-inset-top))
+      max(12px, env(safe-area-inset-right)) 10px
+      max(12px, env(safe-area-inset-left));
+  }
+
+  .ot-toolbar h1 {
+    display: none;
+  }
+
+  .ot-toolbar-nav .ot-search-container {
+    margin: 4px 8px;
+  }
+
+  .ot-toolbar .ot-search-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  .ot-toolbar .ot-hops-input {
+    width: 40px;
+    height: 28px;
+  }
+}
+/*
+ * Copyright 2026 OpenTrace Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* Discover Panel — directory tree view */
 
 .discover-panel {

package/dist/opentrace-components.cjs

@@ -7799,7 +7799,7 @@ function GraphBadge({
       totalNodes,
       ")"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "nodes" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-label", children: "nodes" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-sep", children: "·" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-rendered", children: edgeCount }),
     totalEdges != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "graph-badge-total", children: [
@@ -7807,7 +7807,7 @@ function GraphBadge({
       totalEdges,
       ")"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "edges" })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-label", children: "edges" })
   ] });
 }
 const DEFAULT_MAX_VISIBLE = 5;
@@ -7877,6 +7877,198 @@ function GraphLegend({
     ] })
   ] });
 }
+function GraphToolbar({
+  logo,
+  searchQuery,
+  onSearchQueryChange,
+  onSearch,
+  onReset,
+  searchDisabled,
+  showResetButton,
+  hops,
+  onHopsChange,
+  maxHops = 5,
+  nodeCount,
+  edgeCount,
+  totalNodes,
+  totalEdges,
+  mobilePanelTabs,
+  onMobilePanelTab,
+  actions,
+  persistentActions,
+  className
+}) {
+  const [menuOpen, setMenuOpen] = t.useState(false);
+  const navRef = t.useRef(null);
+  const burgerRef = t.useRef(null);
+  t.useEffect(() => {
+    if (!menuOpen) return;
+    const onClickOutside = (e2) => {
+      if (navRef.current?.contains(e2.target)) return;
+      if (burgerRef.current?.contains(e2.target)) return;
+      setMenuOpen(false);
+    };
+    const onEscape = (e2) => {
+      if (e2.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    document.addEventListener("keydown", onEscape);
+    return () => {
+      document.removeEventListener("mousedown", onClickOutside);
+      document.removeEventListener("keydown", onEscape);
+    };
+  }, [menuOpen]);
+  const handleNavClick = t.useCallback((e2) => {
+    const target = e2.target;
+    const clickable = target.closest("button, a");
+    if (clickable && !clickable.classList.contains("ot-clear-search") && !clickable.classList.contains("ot-search-btn")) {
+      setMenuOpen(false);
+    }
+  }, []);
+  const visibleTabs = mobilePanelTabs?.filter((t2) => t2.visible !== false);
+  const searchMarkup = (id) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ot-search-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search nodes...",
+        value: searchQuery,
+        onChange: (e2) => onSearchQueryChange(e2.target.value),
+        onKeyDown: (e2) => e2.key === "Enter" && onSearch(),
+        className: "ot-search-input"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ot-search-params", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `ot-hops-input-${id}`, children: "Hops:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: `ot-hops-input-${id}`,
+          type: "number",
+          min: "0",
+          max: maxHops,
+          value: hops,
+          onChange: (e2) => onHopsChange(
+            Math.min(maxHops, Math.max(0, parseInt(e2.target.value) || 0))
+          ),
+          className: "ot-hops-input",
+          title: `Number of connection hops to include (max ${maxHops})`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ot-search-actions", children: [
+      searchQuery && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "ot-clear-search",
+          onClick: onReset,
+          title: "Clear search",
+          children: "×"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "ot-search-btn",
+          onClick: onSearch,
+          title: "Query API and rerender",
+          disabled: searchDisabled,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `ot-toolbar${className ? ` ${className}` : ""}`, children: [
+    logo,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ot-search-tablet", children: searchMarkup("tablet") }),
+    persistentActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ot-persistent-mobile", children: persistentActions }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "ot-burger-btn",
+        ref: burgerRef,
+        onClick: () => setMenuOpen((v2) => !v2),
+        "aria-label": "Toggle menu",
+        "aria-expanded": menuOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "22",
+            height: "22",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: menuOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+            ] })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        className: `ot-toolbar-nav${menuOpen ? " open" : ""}`,
+        ref: navRef,
+        onClick: handleNavClick,
+        children: [
+          visibleTabs?.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ot-mobile-panel-btn",
+              onClick: () => onMobilePanelTab?.(tab.key),
+              children: [
+                tab.icon,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ot-menu-label", children: tab.label })
+              ]
+            },
+            tab.key
+          )),
+          visibleTabs && visibleTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ot-menu-divider" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ot-search-nav", children: searchMarkup("nav") }),
+          showResetButton && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "ot-reset-btn", onClick: onReset, children: "Show All" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            GraphBadge,
+            {
+              nodeCount,
+              edgeCount,
+              totalNodes,
+              totalEdges
+            }
+          ),
+          persistentActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ot-persistent-desktop", children: persistentActions }),
+          actions
+        ]
+      }
+    )
+  ] });
+}
 const q = typeof window < "u" ? t.useLayoutEffect : t.useEffect;
 function ie(e2) {
   if (e2 !== void 0)
@@ -8805,6 +8997,7 @@ exports.Graph = GraphCanvas;
 exports.GraphBadge = GraphBadge;
 exports.GraphCanvas = GraphCanvas;
 exports.GraphLegend = GraphLegend;
+exports.GraphToolbar = GraphToolbar;
 exports.LABEL_COLOR = LABEL_COLOR;
 exports.LABEL_FONT = LABEL_FONT;
 exports.LABEL_RENDERED_SIZE_THRESHOLD = LABEL_RENDERED_SIZE_THRESHOLD;