@opentrace/components 0.1.1-pr.110.9 → 0.1.1-pr.118.26

package/dist/components.css

@@ -1 +1,533 @@
-:root{--sigma-background-color:#fff;--sigma-controls-background-color:#fff;--sigma-controls-background-color-hover:rgba(0,0,0,0.2);--sigma-controls-border-color:rgba(0,0,0,0.2);--sigma-controls-color:#000;--sigma-controls-zindex:100;--sigma-controls-margin:5px;--sigma-controls-size:30px;}div.react-sigma{height:100%;width:100%;position:relative;background:var(--sigma-background-color);}div.sigma-container{height:100%;width:100%;}.react-sigma-controls{position:absolute;z-index:var(--sigma-controls-zindex);border:2px solid var(--sigma-controls-border-color);border-radius:4px;color:var(--sigma-controls-color);background-color:var(--sigma-controls-background-color);}.react-sigma-controls.bottom-right{bottom:var(--sigma-controls-margin);right:var(--sigma-controls-margin);}.react-sigma-controls.bottom-left{bottom:var(--sigma-controls-margin);left:var(--sigma-controls-margin);}.react-sigma-controls.top-right{top:var(--sigma-controls-margin);right:var(--sigma-controls-margin);}.react-sigma-controls.top-left{top:var(--sigma-controls-margin);left:var(--sigma-controls-margin);}.react-sigma-controls:first-child{border-top-left-radius:2px;border-top-right-radius:2px;}.react-sigma-controls:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px;}.react-sigma-control{width:var(--sigma-controls-size);height:var(--sigma-controls-size);line-height:var(--sigma-controls-size);background-color:var(--sigma-controls-background-color);border-bottom:1px solid var(--sigma-controls-border-color);}.react-sigma-control:last-child{border-bottom:none;}.react-sigma-control>*{box-sizing:border-box;}.react-sigma-control>button{display:block;border:none;margin:0;padding:0;width:var(--sigma-controls-size);height:var(--sigma-controls-size);line-height:var(--sigma-controls-size);background-position:center;background-size:50%;background-repeat:no-repeat;background-color:var(--sigma-controls-background-color);clip:rect(0,0,0,0);}.react-sigma-control>button:hover{background-color:var(--sigma-controls-background-color-hover);}.react-sigma-search{background-color:var(--sigma-controls-background-color);}.react-sigma-search label{visibility:hidden;}.react-sigma-search input{color:var(--sigma-controls-color);background-color:var(--sigma-controls-background-color);font-size:1em;width:100%;margin:0;border:none;padding:var(--sigma-controls-margin);box-sizing:border-box;}
+:root{--sigma-background-color:#fff;--sigma-controls-background-color:#fff;--sigma-controls-background-color-hover:rgba(0,0,0,0.2);--sigma-controls-border-color:rgba(0,0,0,0.2);--sigma-controls-color:#000;--sigma-controls-zindex:100;--sigma-controls-margin:5px;--sigma-controls-size:30px;}div.react-sigma{height:100%;width:100%;position:relative;background:var(--sigma-background-color);}div.sigma-container{height:100%;width:100%;}.react-sigma-controls{position:absolute;z-index:var(--sigma-controls-zindex);border:2px solid var(--sigma-controls-border-color);border-radius:4px;color:var(--sigma-controls-color);background-color:var(--sigma-controls-background-color);}.react-sigma-controls.bottom-right{bottom:var(--sigma-controls-margin);right:var(--sigma-controls-margin);}.react-sigma-controls.bottom-left{bottom:var(--sigma-controls-margin);left:var(--sigma-controls-margin);}.react-sigma-controls.top-right{top:var(--sigma-controls-margin);right:var(--sigma-controls-margin);}.react-sigma-controls.top-left{top:var(--sigma-controls-margin);left:var(--sigma-controls-margin);}.react-sigma-controls:first-child{border-top-left-radius:2px;border-top-right-radius:2px;}.react-sigma-controls:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px;}.react-sigma-control{width:var(--sigma-controls-size);height:var(--sigma-controls-size);line-height:var(--sigma-controls-size);background-color:var(--sigma-controls-background-color);border-bottom:1px solid var(--sigma-controls-border-color);}.react-sigma-control:last-child{border-bottom:none;}.react-sigma-control>*{box-sizing:border-box;}.react-sigma-control>button{display:block;border:none;margin:0;padding:0;width:var(--sigma-controls-size);height:var(--sigma-controls-size);line-height:var(--sigma-controls-size);background-position:center;background-size:50%;background-repeat:no-repeat;background-color:var(--sigma-controls-background-color);clip:rect(0,0,0,0);}.react-sigma-control>button:hover{background-color:var(--sigma-controls-background-color-hover);}.react-sigma-search{background-color:var(--sigma-controls-background-color);}.react-sigma-search label{visibility:hidden;}.react-sigma-search input{color:var(--sigma-controls-color);background-color:var(--sigma-controls-background-color);font-size:1em;width:100%;margin:0;border:none;padding:var(--sigma-controls-margin);box-sizing:border-box;}/*
+ * 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.
+ */
+
+/* Filter Panel — content-only (positioning handled by SidePanel) */
+.filter-panel {
+  overflow-y: auto;
+  padding: 0 0 80px;
+}
+
+.filter-section {
+  padding: 0 14px;
+}
+
+.filter-section + .filter-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+}
+
+.filter-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.filter-section-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+}
+
+.filter-toggle-all {
+  background: none;
+  border: none;
+  font-size: 0.65rem;
+  color: var(--primary);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: var(--radius);
+  transition: background 0.1s;
+}
+
+.filter-toggle-all:hover {
+  background: color-mix(in oklch, var(--primary) 10%, transparent);
+}
+
+.filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background 0.1s;
+  font-size: 0.78rem;
+  color: var(--foreground);
+}
+
+.filter-item:hover {
+  background: color-mix(in oklch, var(--accent) 40%, transparent);
+}
+
+.filter-item.hidden {
+  color: var(--muted-foreground);
+  opacity: 0.6;
+}
+
+.filter-item.partial {
+  opacity: 0.8;
+}
+
+.filter-item.partial .filter-dot {
+  opacity: 0.45;
+}
+
+.filter-item input[type='checkbox'] {
+  display: none;
+}
+
+.filter-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: background-color 0.15s;
+}
+
+.filter-line {
+  width: 14px;
+  height: 3px;
+  border-radius: 1.5px;
+  flex-shrink: 0;
+  transition: background-color 0.15s;
+}
+
+.filter-type-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-count {
+  font-size: 0.7rem;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+.filter-empty {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  padding: 4px 6px;
+  font-style: italic;
+}
+
+/* Sub-type filter styles */
+
+.filter-type-group {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Shared expand/collapse button — used by FilterPanel and DiscoverPanel */
+.filter-expand-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--muted-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 2px;
+  transition:
+    color 0.15s,
+    background 0.1s;
+}
+
+.filter-expand-btn:hover {
+  color: var(--foreground);
+  background: color-mix(in oklch, var(--accent) 40%, transparent);
+}
+
+.filter-expand-icon {
+  transition: transform 0.15s ease;
+}
+
+.filter-expand-icon--open {
+  transform: rotate(90deg);
+}
+
+.filter-expand-spacer {
+  width: 14px;
+  flex-shrink: 0;
+}
+
+.filter-subtypes {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-left: 22px;
+}
+
+.filter-subitem {
+  font-size: 0.72rem !important;
+}
+
+.filter-dot--small {
+  width: 6px !important;
+  height: 6px !important;
+}
+/*
+ * 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.
+ */
+
+/* Legend */
+.legend {
+  position: absolute;
+  bottom: 20px;
+  left: 24px;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  background: color-mix(in oklch, var(--background) 85%, transparent);
+  backdrop-filter: blur(8px);
+  padding: 10px 16px;
+  border-radius: calc(var(--radius) + 2px);
+  border: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  text-transform: capitalize;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.legend-count {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+}
+
+.legend-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.legend-line {
+  width: 14px;
+  height: 3px;
+  border-radius: 1.5px;
+  flex-shrink: 0;
+}
+
+.legend-more-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--muted-foreground);
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  cursor: pointer;
+  pointer-events: auto;
+  white-space: nowrap;
+}
+
+.legend-more-btn:hover {
+  color: var(--foreground);
+  border-color: var(--foreground);
+}
+
+.legend-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) + 2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  max-height: 320px;
+  overflow-y: auto;
+  pointer-events: auto;
+}
+/*
+ * 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 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 8px 0 0;
+}
+
+/* Filter bar */
+.discover-filter-bar {
+  display: flex;
+  align-items: center;
+  padding: 0 10px 8px;
+  gap: 4px;
+  position: relative;
+}
+
+.discover-filter-input {
+  flex: 1;
+  background: color-mix(in oklch, var(--accent) 40%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  border-radius: var(--radius);
+  padding: 5px 28px 5px 10px;
+  font-size: 0.78rem;
+  color: var(--foreground);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.discover-filter-input::placeholder {
+  color: var(--muted-foreground);
+}
+
+.discover-filter-input:focus {
+  border-color: var(--primary);
+}
+
+.discover-filter-clear {
+  position: absolute;
+  right: 14px;
+  background: none;
+  border: none;
+  color: var(--muted-foreground);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  border-radius: var(--radius);
+}
+
+.discover-filter-clear:hover {
+  color: var(--foreground);
+}
+
+.discover-panel-empty {
+  padding: 24px 16px;
+  color: var(--muted-foreground);
+  font-size: 0.82rem;
+  text-align: center;
+}
+
+.discover-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-right: 8px;
+  min-height: 28px;
+}
+
+.discover-tree-row:hover {
+  background: color-mix(in oklch, var(--accent) 30%, transparent);
+}
+
+.discover-tree-row--selected {
+  background: color-mix(in oklch, var(--primary) 15%, transparent);
+}
+
+.discover-tree-row--selected .discover-tree-name {
+  color: var(--primary);
+  font-weight: 600;
+}
+
+/* Hop-distance highlight — intensity set via --hop-intensity CSS variable */
+.discover-tree-row--hop {
+  background: color-mix(
+    in oklch,
+    var(--primary) calc(var(--hop-intensity) * 18%),
+    transparent
+  );
+}
+
+.discover-tree-row--hop .discover-tree-name {
+  color: color-mix(
+    in oklch,
+    var(--primary) calc(var(--hop-intensity) * 100%),
+    var(--foreground)
+  );
+}
+
+.discover-tree-row--faded {
+  opacity: 0.35;
+}
+
+.discover-tree-row--faded:hover {
+  opacity: 0.7;
+}
+
+/* Graph-only toggle */
+.discover-graph-toggle {
+  padding: 0 10px 8px;
+}
+
+.discover-graph-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.72rem;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+}
+
+.discover-graph-toggle-label:hover {
+  color: var(--foreground);
+}
+
+/* Hide native checkbox */
+.discover-graph-toggle-label input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Pill track */
+.discover-toggle-track {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--muted) 60%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  flex-shrink: 0;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+/* Pill thumb */
+.discover-toggle-track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--muted-foreground);
+  transition:
+    transform 0.2s,
+    background 0.2s;
+}
+
+/* Checked state */
+.discover-graph-toggle-label input:checked + .discover-toggle-track {
+  background: color-mix(in oklch, var(--primary) 25%, transparent);
+  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
+}
+
+.discover-graph-toggle-label input:checked + .discover-toggle-track::after {
+  transform: translateX(12px);
+  background: var(--primary);
+}
+
+/* Active label text when checked */
+.discover-graph-toggle-label:has(input:checked) {
+  color: var(--foreground);
+}
+
+.discover-tree-name {
+  background: none;
+  border: none;
+  color: var(--foreground);
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.discover-tree-name:hover {
+  color: var(--primary);
+}
+
+.discover-tree-type {
+  font-size: 0.65rem;
+  color: var(--muted-foreground);
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.discover-tree-placeholder {
+  font-size: 0.78rem;
+  color: var(--muted-foreground);
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-style: italic;
+}