@graphlearning/graphl-flow 0.2.0 → 0.4.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

@@ -29,6 +29,18 @@
 .gf-group .gf-group[data-toned] { background: var(--gf-tint); border-color: color-mix(in srgb, var(--gf-accent) 35%, transparent); }
 /* A bare group only arranges: no frame, fill or padding, at any depth. */
 .gf-group[data-bare], .gf-group .gf-group[data-bare] { border: 0; padding: 0; background: none; border-radius: 0; }
+/* A notebook cell: the `[n]` gutter, then the input (stretched to the cell, no bar) over its outputs.
+   The gutter is a fixed width in ch, so every cell's input starts at the same x. */
+.gf-group[data-cell], .gf-group .gf-group[data-cell] {
+  display: grid; grid-template-columns: auto 1fr; column-gap: 8px;
+  border: 0; padding: 0; background: none; border-radius: 0;
+}
+.gf-cell-n {
+  box-sizing: content-box; min-width: 5ch; padding-top: 9px; text-align: right; user-select: none;
+  font: 15px/1.6 'IBM Plex Mono', ui-monospace, monospace; color: var(--gf-code-gutter);
+}
+.gf-group[data-cell] > .gf-body > .gf-code:first-child:not([data-output]) { justify-self: stretch; }
+.gf-group[data-cell] > .gf-body > .gf-code:first-child > .gf-code-bar { display: none; }
 .gf-group-head { margin-bottom: 10px; }
 .gf-group-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; }
 .gf-group-sub { margin-top: 2px; font-size: 14px; color: var(--gf-muted); }
@@ -122,6 +134,10 @@
 .gf-fold { color: var(--gf-code-gutter); font-style: italic; background: color-mix(in srgb, var(--gf-code-gutter) 10%, transparent); user-select: none; }
 .gf-prompt { color: var(--gf-ok); user-select: none; }
 .gf-line[data-kind='out'] { color: var(--gf-muted); }
+/* A cell's printed output: plain text on the page, in ink — it is the result, not a terminal echo. */
+.gf-code[data-output] { border: 0; border-radius: 0; background: none; padding: 2px 0; }
+.gf-code[data-output] .gf-line { padding-left: 12px; }
+.gf-code[data-output] .gf-line[data-kind='out'] { color: var(--gf-ink); }
 .gf-line[data-kind='err'] { color: var(--gf-err); }
 .tok-var { color: var(--gf-code-var); }
 .tok-method { color: var(--gf-code-method); }

package/dist/types.d.ts

@@ -57,6 +57,11 @@ export interface Group extends Base {
     bare?: boolean;
     /** Distribute the children over the group's full height when it is stretched taller than them. */
     spread?: boolean;
+    /**
+     * A notebook cell: the execution count drawn as `[n]` in a gutter (`true`: not run yet, `[ ]`),
+     * the children — the input `code` first, then its outputs — stacked beside it. No frame or head.
+     */
+    cell?: number | true;
     children: SceneNode[];
 }
 /** One table row: its cells, plus an optional id, a short tag in a leading gutter, and a tone. */
@@ -97,6 +102,8 @@ export interface Code extends Base {
     highlight?: number[];
     /** A terminal: `$ cmd` lines are commands, `! text` errors, the rest output. No line numbers. */
     terminal?: boolean;
+    /** A notebook cell's printed output: plain text, no frame or line numbers; `! text` is an error. */
+    output?: boolean;
 }
 /** An axis in DATA units. `labels` makes it categorical: one slot per label (bar charts). */
 export interface PlotAxis {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphlearning/graphl-flow",
-  "version": "0.2.0",
+  "version": "0.4.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": {