@worca/ui 0.2.0-rc.5 → 0.3.0

package/app/styles.css

@@ -3937,3 +3937,120 @@ sl-details.learnings-panel::part(content) {
 .project-worca-version { font-size: 11px; color: var(--muted); font-family: var(--sl-font-mono); margin-top: 2px; }
 .project-worca-version--behind { color: var(--status-failed, #dc2626); }
 
+/* ─── Bead tooltip content ──────────────────────────────────────────── */
+.bead-tooltip-content {
+  max-width: 540px;
+  padding: 4px 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bead-tooltip-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+sl-tooltip.bead-tooltip::part(body) {
+  pointer-events: auto;
+}
+
+.bead-tooltip-badges {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.bead-tooltip-id {
+  font-family: var(--sl-font-mono);
+  font-size: 11px;
+  opacity: 0.7;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.bead-tooltip-separator {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 4px 0;
+}
+
+.bead-tooltip-label {
+  font-size: 11px;
+  opacity: 0.7;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.bead-tooltip-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.bead-tooltip-excerpt {
+  font-size: 12px;
+  white-space: pre-wrap;
+  margin-bottom: 2px;
+}
+
+.bead-tooltip-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+
+.bead-tooltip-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.15);
+  color: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.bead-tooltip-copy:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* ─── Graph node tooltip overlays ─────────────────────────────────── */
+.run-beads-graph {
+  position: relative;
+}
+
+.graph-tooltip-trigger {
+  position: absolute;
+  cursor: pointer;
+}
+
+.bead-chip-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-width: 240px;
+  padding: 2px 0;
+}
+
+.bead-chip-tooltip-id {
+  font-family: var(--sl-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bead-chip-tooltip-title {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worca/ui",
-  "version": "0.2.0-rc.5",
+  "version": "0.3.0",
   "description": "Pipeline monitoring UI for worca-cc",
   "license": "MIT",
   "author": "Sinisha Djukic",