@graphlearning/graphl-flow 0.1.0 → 0.3.0

package/dist/routing.d.ts

@@ -23,6 +23,8 @@ export interface Routed {
         side: 'on' | 'before' | 'after';
         seg: 'h' | 'v';
     };
+    /** How many edges hold a slot in this edge's channel (0: none). The layout widens the gap for them. */
+    slots: number;
 }
 /** An edge ends this far OUTSIDE its node, so the arrowhead never touches the border. */
 export declare const ANCHOR_OUTSET = 4;
@@ -30,6 +32,17 @@ export declare const ANCHOR_OUTSET = 4;
 export declare const PORT_INSET = 12;
 /** Two ports closer than this on one face make the whole face spread evenly. */
 export declare const PORT_MIN_GAP = 14;
+/** The arrowhead's length (its marker is 10 user units): a slot keeps at least this run to each anchor. */
+export declare const HEAD_LEN = 10;
+/** Between two slots in one channel. */
+export declare const SLOT_GAP = 8;
+/**
+ * The gap a channel needs for `n` slots: a full head's run at each end, outside each anchor, and
+ * SLOT_GAP between neighbours. One slot needs 28 — inside EDGE_GAP — so only a SHARED channel grows.
+ * Without it, three arrows fanning into one node through a 32px gap left a 4px last run, which the
+ * 6px head trim reversed: the arrowhead pointed back into the gap (0.2, edge-fan-in).
+ */
+export declare const slotRoom: (n: number) => number;
 /**
  * `sides[i]` names the two SIBLINGS edge i runs between — the children of its lowest common
  * ancestor that contain each end. The faces are chosen from THEIR boxes, not the nodes': two nested

package/dist/styles.css

@@ -177,3 +177,13 @@
 }
 /* A plot never scales: in a narrow column use `compact`, the second fixed size. Too wide is overflow,
    which check fails — scaling down silently shrank the text past reading in a 560px side pane. */
+
+/* Focus: a ring and a glow in the node's own accent, by box-shadow — NO layout effect, so moving the
+   focus between sections never moves the scene. An unframed item gains a frame while focused. */
+[data-focus] {
+  box-shadow: 0 0 0 2px var(--gf-accent), 0 0 24px 2px color-mix(in srgb, var(--gf-accent) 45%, transparent);
+  border-radius: 8px;
+}
+.gf-item[data-focus] { background: color-mix(in srgb, var(--gf-accent) 12%, var(--gf-surface)); }
+tr[data-focus] td, .gf-line[data-focus], .gf-tree-row[data-focus] { background: color-mix(in srgb, var(--gf-accent) 18%, transparent); }
+tr[data-focus], .gf-line[data-focus], .gf-tree-row[data-focus] { box-shadow: inset 3px 0 0 var(--gf-accent); border-radius: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphlearning/graphl-flow",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Declarative diagram engine — authors describe groups, items and edges; the browser lays them out and the engine draws the edges.",
   "license": "UNLICENSED",
   "repository": {