@graphlearning/graphl-flow 0.5.0 → 0.7.0

package/dist/styles.css

@@ -27,6 +27,13 @@
 .gf-group[data-spread] > .gf-body { flex: 1; align-content: space-evenly; }
 /* ...unless it names its OWN tone: then it is a coloured column again (Spark's four columns). */
 .gf-group .gf-group[data-toned] { background: var(--gf-tint); border-color: color-mix(in srgb, var(--gf-accent) 35%, transparent); }
+/* A dashed group is a place (an AZ): only the line style changes, never the box. */
+.gf-group[data-dashed] { border-style: dashed; }
+/* A group not there yet (`muted`): a grey outline, no tint, the heading dimmed — paint only. Its
+   children keep their own paint; an item that is not there is muted itself. */
+.gf-group[data-muted], .gf-group .gf-group[data-muted] { background: none; border-color: var(--gf-line); }
+.gf-group[data-muted] > .gf-group-head { opacity: 0.4; }
+.gf-group[data-muted] > .gf-group-head .gf-icon { filter: grayscale(1); }
 /* 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.
@@ -63,6 +70,9 @@
 .gf-item[data-chip] .gf-item-title { font-weight: 500; font-size: 15px; }
 .gf-item[data-stack] { flex-direction: column; align-items: center; text-align: center; justify-self: center; }
 .gf-item-title { font-weight: 600; }
+/* A part not there yet (`muted`): paint only — opacity and a desaturated icon never move a box. */
+.gf-item[data-muted] { opacity: 0.4; }
+.gf-item[data-muted] .gf-icon { filter: grayscale(1); }
 /* The reading measure: an item's text WRAPS here instead of widening its column. The fit is set by
    the scene's width, so an unwrapped subtitle shrinks every word in the frame (Barclays: 20px body
    text at 4K before this). */
@@ -127,6 +137,10 @@
 .gf-dots i + i + i { background: #27c93f; }
 .gf-code-body { padding-block: 8px; }
 .gf-line { display: flex; white-space: pre; padding-right: 16px; color: var(--gf-code-var); }
+/* A row is a FLEX container, and flex drops a text run that is only whitespace: a blank terminal row
+   collapsed to nothing, and a screen row's leading spaces vanished (0.7: Debian's login banner lost
+   its blank lines, man's 7-column indent was gone). A row is always one row tall; runs are spans. */
+.gf-line { min-height: 1lh; }
 .gf-code[data-terminal] .gf-line { padding-left: 14px; }
 .gf-ln { flex: none; box-sizing: content-box; min-width: 3ch; padding: 0 12px 0 10px; text-align: right; color: var(--gf-code-gutter); user-select: none; }
 .gf-line[data-lit] { background: color-mix(in srgb, var(--gf-accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--gf-accent); }
@@ -139,6 +153,18 @@
 .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); }
+/* A real console (0.7): the prompt as bash colours it, output in INK — in a Linux lesson the output is
+   the subject, not chrome. Root's prompt is the error colour: `#` should look like what it is. */
+.gf-code[data-console] .gf-line, .gf-tty .gf-line { padding-left: 14px; }
+.gf-code[data-console] .gf-line[data-kind='out'] { color: var(--gf-ink); }
+.gf-ps { color: var(--gf-code-punct); user-select: none; }
+.gf-ps-who { color: var(--gf-ok); font-weight: 600; }
+.gf-ps-cwd { color: var(--gf-code-method); font-weight: 600; }
+.gf-ps[data-root] .gf-ps-who { color: var(--gf-err); }
+/* A full-screen program's grid: every row the full width, inverse video as the terminal draws it. */
+.gf-tty .gf-line { color: var(--gf-ink); }
+.gf-tty [data-inverse] { background: var(--gf-code-var); color: var(--gf-code-bg); }
+.gf-tty [data-bold] { font-weight: 600; }
 .tok-var { color: var(--gf-code-var); }
 .tok-method { color: var(--gf-code-method); }
 .tok-keyword { color: var(--gf-code-keyword); }

package/dist/types.d.ts

@@ -39,6 +39,11 @@ export interface Item extends Base {
     stack?: boolean;
     /** A small framed pill — a thing COUNTED, not described (`Task 1`, `Local disk`). */
     chip?: boolean;
+    /**
+     * Not there yet: drawn greyed (icon desaturated, text dimmed) at its full size and place — a part
+     * of an architecture the system does not have yet. Paint only, so muting moves nothing.
+     */
+    muted?: boolean;
 }
 /** A container: lays its children out in a row, a column or a grid. */
 export interface Group extends Base {
@@ -55,6 +60,17 @@ export interface Group extends Base {
     cols?: number;
     /** No frame, fill or padding — a group that only arranges its children. */
     bare?: boolean;
+    /**
+     * The frame drawn dashed: a boundary that is a PLACE, not a thing (an AWS Availability Zone, a
+     * Region). Same width as the solid frame, so dashing a group never moves anything.
+     */
+    dashed?: boolean;
+    /**
+     * Not there yet: the frame drawn as a plain grey outline (no tint, a dimmed heading) at its full
+     * size and place — a network or a service the system does not have yet. Children are NOT dimmed
+     * by it: mute each item that is not there either. Paint only, so muting moves nothing.
+     */
+    muted?: boolean;
     /** Distribute the children over the group's full height when it is stretched taller than them. */
     spread?: boolean;
     /**
@@ -93,7 +109,7 @@ export interface Code extends Base {
     type: 'code';
     /** The source. A template literal's common indent and outer blank lines are dropped. */
     code: string;
-    lang?: 'python' | 'sql' | 'scala' | 'java' | 'js' | 'ts' | 'shell' | 'text';
+    lang?: 'python' | 'sql' | 'scala' | 'java' | 'js' | 'ts' | 'shell' | 'hcl' | 'ini' | 'nginx' | 'nft' | 'text';
     /** The tab label; for a terminal, its title. */
     filename?: string;
     /** Only these 1-based, inclusive line ranges; each skipped run folds to `··· N lines`. */
@@ -104,6 +120,33 @@ export interface Code extends Base {
     terminal?: boolean;
     /** A notebook cell's printed output: plain text, no frame or line numbers; `! text` is an error. */
     output?: boolean;
+    /**
+     * A REAL console transcript, row for row as an 80-column terminal drew it: a row starting with a
+     * shell prompt is a command (`ana@web-01:~$`, `[ana@web-02 ~]$`, zsh's `ana@mac ~ %`; `#` is root),
+     * everything else output, drawn in ink. A command row exactly `cols` wide WRAPPED, so the next row
+     * continues the command. No `$ ` convention and no `!` marks: the transcript is not edited.
+     */
+    console?: boolean;
+    /** The console's width in columns, for wrapped command rows. Default 80. */
+    cols?: number;
+}
+/**
+ * A full-screen program (`top`, `less`, `nano`) as a terminal screen showed it: exactly `rows`, each
+ * drawn in a fixed `cols`-wide grid, with the program's inverse-video and bold runs. Captured from a
+ * real virtual terminal, never typed. Rows are addressable as `<tty>.R<n>` (1-based) for `focus`.
+ */
+export interface Tty extends Base {
+    type: 'tty';
+    /** The window title. */
+    title?: string;
+    /** The screen's rows, top to bottom; shorter rows are padded, so the grid is always cols × rows. */
+    screen: string[];
+    /** Default 80. */
+    cols?: number;
+    /** Inverse-video runs: [row, from, to] — 0-based row, columns [from, to). */
+    inverse?: [number, number, number][];
+    /** Bold runs, the same shape. */
+    bold?: [number, number, number][];
 }
 /** An axis in DATA units. `labels` makes it categorical: one slot per label (bar charts). */
 export interface PlotAxis {
@@ -168,7 +211,7 @@ export interface Note extends Base {
     type: 'note';
     text: string;
 }
-export type SceneNode = Item | Group | Table | Code | Plot | Tree | Note;
+export type SceneNode = Item | Group | Table | Code | Plot | Tree | Note | Tty;
 export interface Edge {
     /** A node id, or a table row as `<table>.<row>`. */
     from: string;

package/package.json

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