@green-on-grey/ui-kit 1.11.1 → 1.14.0

package/dist/styles.css

@@ -489,6 +489,198 @@ h3.sec {
   margin-top: 12px;
 }
 
+/* Graph (FTR.NAB.CMN-0003 R19, FTR.HMR.DEV-0002 R15): moved from Nabu with its look; g-c1 and g-c2 are its people and topics. */
+.gwrap {
+  border: 1px solid var(--border);
+  border-radius: var(--r-m);
+  background: var(--surface-2);
+  position: relative;
+  overflow: hidden;
+}
+.gwrap.loading {
+  min-height: 320px;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+}
+.gwrap svg {
+  display: block;
+  width: 100%;
+  height: min(64vh,620px);
+  touch-action: none;
+  cursor: grab;
+}
+.g-e line,
+.g-e path {
+  stroke: var(--border-strong);
+  fill: none;
+  transition: opacity 0.15s;
+}
+.g-e .hit {
+  stroke: transparent;
+  stroke-width: 12;
+  cursor: pointer;
+}
+.g-e.dashed line:first-child,
+.g-e.dashed path:first-child {
+  stroke: var(--violet);
+  stroke-dasharray: 6 4;
+}
+.gwrap marker path {
+  fill: var(--border-strong);
+}
+.g-n {
+  cursor: pointer;
+  transition: opacity 0.15s;
+  outline: none;
+}
+.g-n circle {
+  stroke: var(--surface);
+  stroke-width: 2;
+}
+.g-c1 circle,
+.gleg i.g-c1 {
+  fill: var(--green);
+  background: var(--green);
+}
+.g-c2 circle,
+.gleg i.g-c2 {
+  fill: var(--violet);
+  background: var(--violet);
+}
+.g-c3 circle,
+.gleg i.g-c3 {
+  fill: var(--amber);
+  background: var(--amber);
+}
+.g-c4 circle,
+.gleg i.g-c4 {
+  fill: var(--red);
+  background: var(--red);
+}
+.g-c5 circle,
+.gleg i.g-c5 {
+  fill: var(--text-2);
+  background: var(--text-2);
+}
+.g-c6 circle,
+.gleg i.g-c6 {
+  fill: var(--muted);
+  background: var(--muted);
+}
+.g-n.dashed circle {
+  fill: var(--surface);
+  stroke: var(--muted);
+  stroke-dasharray: 3 3;
+}
+.g-n.muted {
+  opacity: 0.45;
+}
+.g-n text {
+  font: 500 12px var(--font);
+  fill: var(--text);
+  text-anchor: middle;
+  pointer-events: none;
+}
+.g-n.small text {
+  opacity: 0;
+}
+.g-n.small:hover text,
+.g-n.small.hl text,
+.g-n.small:focus-visible text {
+  opacity: 1;
+}
+.g-n.pin circle,
+.g-n:focus-visible circle {
+  stroke: var(--text);
+  stroke-width: 2.5;
+}
+.g-n.focus circle {
+  stroke: var(--violet);
+  stroke-width: 2.5;
+}
+svg.dimmed .g-n:not(.hl) {
+  opacity: 0.22;
+}
+svg.dimmed .g-e:not(.hl) line,
+svg.dimmed .g-e:not(.hl) path {
+  opacity: 0.12;
+}
+svg.dimmed .g-e.hl line:first-child,
+svg.dimmed .g-e.hl path:first-child {
+  stroke: var(--text-2);
+}
+svg.dimmed .g-e.dashed.hl line:first-child,
+svg.dimmed .g-e.dashed.hl path:first-child {
+  stroke: var(--violet);
+}
+/* FTR.HMR.DEV-0002 R15: the rows of the row layout, a label at the left and a line between rows */
+.g-row {
+  pointer-events: none;
+}
+.g-row text {
+  font: 600 12px var(--font);
+  fill: var(--text-2);
+  dominant-baseline: middle;
+}
+.g-row line {
+  stroke: var(--border);
+  stroke-dasharray: 2 4;
+}
+.gleg {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-2);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-m);
+  padding: 5px 10px;
+}
+.gleg i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+  vertical-align: -1px;
+}
+.gzoom {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: grid;
+  gap: 4px;
+}
+.gzoom button {
+  width: 30px;
+  height: 30px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-s);
+  font-weight: 600;
+  color: var(--text-2);
+  cursor: pointer;
+}
+.gzoom button svg {
+  display: block;
+  margin: auto;
+}
+@media (max-width: 860px) {
+  .gzoom {
+    display: none;
+  }
+  .gwrap svg {
+    height: auto;
+  }
+  .g-n text {
+    font-size: 19px;
+  }
+}
+
 /* The modal dialog, fields, inputs, hints, the switch. */
 .overlay {
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@green-on-grey/ui-kit",
-  "version": "1.11.1",
+  "version": "1.14.0",
   "description": "UI kit of the Nabu and Hammurapi products: styles, components, the chat and the sign-in screen",
   "license": "Apache-2.0",
   "repository": {
@@ -55,10 +55,12 @@
     "react-i18next": "^17.0.0"
   },
   "dependencies": {
+    "d3-force": "^3.0.1",
     "postcss": "^8.5.29"
   },
   "devDependencies": {
     "@playwright/test": "^1.64.0",
+    "@types/d3-force": "^3.0.10",
     "@types/node": "^26.6.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",