@sentropic/design-system-react 0.1.0 → 0.2.0

package/dist/styles.css

@@ -2344,10 +2344,13 @@
 
   .st-forceGraph svg { display: block; overflow: visible; }
 
+  .st-forceGraph__svg--panning { cursor: grabbing; }
+
   .st-forceGraph__edge {
     stroke: var(--st-semantic-border-strong);
     stroke-width: 1;
     opacity: 0.55;
+    transition: opacity 120ms ease, stroke-width 120ms ease;
   }
 
   .st-forceGraph__edge--weak {
@@ -2356,6 +2359,19 @@
     opacity: 0.5;
   }
 
+  .st-forceGraph__edge--hovered {
+    opacity: 0.9;
+    stroke-width: 2;
+  }
+
+  /* Invisible wide hit target for edge hover */
+  .st-forceGraph__edgeHit {
+    stroke: transparent;
+    stroke-width: 10;
+    fill: none;
+    cursor: crosshair;
+  }
+
   .st-forceGraph__node { transition: opacity 120ms ease; }
   .st-forceGraph__node--dim { opacity: 0.3; }
 
@@ -2375,14 +2391,14 @@
     outline-offset: 1px;
   }
 
-  
+  /* Selection highlight: slightly thicker stroke ring, full opacity. */
   .st-forceGraph__node--selected .st-forceGraph__dot {
     fill-opacity: 1;
     stroke: var(--st-semantic-border-interactive, #0f62fe);
     stroke-width: 2.5;
   }
 
-  
+  /* Focus (keyboard/programmatic focus): stronger ring + slight scale. */
   .st-forceGraph__node--focus .st-forceGraph__dot {
     fill-opacity: 1;
     stroke: var(--st-semantic-border-interactive, #0f62fe);
@@ -2424,10 +2440,169 @@
 
   .st-forceGraph__tooltipLabel { font-weight: 600; }
   .st-forceGraph__tooltipMeta { opacity: 0.85; }
+  .st-forceGraph__tooltipRelation {
+    opacity: 0.75;
+    font-style: italic;
+    font-size: 0.6875rem;
+  }
+
+  /* Reset view button */
+  .st-forceGraph__resetBtn {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.55));
+    border: none;
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    opacity: 0.8;
+    transition: opacity 120ms ease;
+    z-index: 2;
+  }
+
+  .st-forceGraph__resetBtn:hover,
+  .st-forceGraph__resetBtn:focus-visible {
+    opacity: 1;
+  }
+
+  .st-forceGraph__resetBtn:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 2px;
+  }
+
+  /* Legend overlay */
+  .st-forceGraph__legend {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    display: flex;
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0.5rem;
+    z-index: 2;
+  }
+
+  .st-forceGraph__legendEntry {
+    align-items: center;
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .st-forceGraph__legendSwatch {
+    flex-shrink: 0;
+  }
+
+  .st-forceGraph__legendLabel {
+    white-space: nowrap;
+  }
+
+  .st-forceGraph__legendShape {
+    fill-opacity: 0.9;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1;
+  }
+
+  .st-forceGraph__legendShape--category1 { fill: var(--st-semantic-data-category1); }
+  .st-forceGraph__legendShape--category2 { fill: var(--st-semantic-data-category2); }
+  .st-forceGraph__legendShape--category3 { fill: var(--st-semantic-data-category3); }
+  .st-forceGraph__legendShape--category4 { fill: var(--st-semantic-data-category4); }
+  .st-forceGraph__legendShape--category5 { fill: var(--st-semantic-data-category5); }
+  .st-forceGraph__legendShape--category6 { fill: var(--st-semantic-data-category6); }
+  .st-forceGraph__legendShape--category7 { fill: var(--st-semantic-data-category7); }
+  .st-forceGraph__legendShape--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-forceGraph__legendEdge {
+    stroke: var(--st-semantic-border-strong, #888);
+    stroke-width: 1.5;
+    opacity: 0.8;
+  }
+
+  .st-forceGraph__legendEdge--weak {
+    stroke: var(--st-semantic-border-subtle, #aaa);
+    stroke-dasharray: 3 3;
+    opacity: 0.65;
+  }
 
   @media (prefers-reduced-motion: reduce) {
     .st-forceGraph__node,
-    .st-forceGraph__dot { transition: none; }
+    .st-forceGraph__dot,
+    .st-forceGraph__edge,
+    .st-forceGraph__resetBtn { transition: none; }
+  }
+
+.st-graphLegend {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .st-graphLegend__title {
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    margin: 0 0 0.125rem;
+    opacity: 0.75;
+    text-transform: uppercase;
+  }
+
+  .st-graphLegend__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-graphLegend__entry {
+    align-items: center;
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .st-graphLegend__swatch { flex-shrink: 0; }
+
+  .st-graphLegend__label { white-space: nowrap; }
+
+  .st-graphLegend__shape {
+    fill-opacity: 0.9;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1;
+  }
+
+  .st-graphLegend__shape--category1 { fill: var(--st-semantic-data-category1); }
+  .st-graphLegend__shape--category2 { fill: var(--st-semantic-data-category2); }
+  .st-graphLegend__shape--category3 { fill: var(--st-semantic-data-category3); }
+  .st-graphLegend__shape--category4 { fill: var(--st-semantic-data-category4); }
+  .st-graphLegend__shape--category5 { fill: var(--st-semantic-data-category5); }
+  .st-graphLegend__shape--category6 { fill: var(--st-semantic-data-category6); }
+  .st-graphLegend__shape--category7 { fill: var(--st-semantic-data-category7); }
+  .st-graphLegend__shape--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-graphLegend__edge {
+    stroke: var(--st-semantic-border-strong, #888);
+    stroke-width: 1.5;
+    opacity: 0.8;
+  }
+
+  .st-graphLegend__edge--weak {
+    stroke: var(--st-semantic-border-subtle, #aaa);
+    stroke-dasharray: 3 3;
+    opacity: 0.65;
   }
 
 .st-form {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {