@contraagent/elements 0.0.0-stage → 0.1.0

package/dist/graph/styles.js

@@ -0,0 +1,203 @@
+// A layered graph's styles: the frame, the drawing, the nodes and clusters, the
+// node table, the card and the row under the frame.
+import { css } from 'lit';
+export const graphStyles = css `
+  /* A container: the row under the frame follows the host's width. */
+  :host { display: block; container-type: inline-size; }
+  /* A column: the crumbs, the frame, the row under it. A height set on the host is the frame's to fill or give up. */
+  .col, .main { display: flex; flex-direction: column; }
+  .col { height: 100%; }
+  .main { flex: auto; min-height: 0; }
+
+  /* One frame for every view: the drawing, the node table and a mark matrix. */
+  .frame { flex: auto; position: relative; overflow: hidden; border-radius: 8px; background: var(--well); box-sizing: border-box; }
+  .gframe { cursor: grab; touch-action: none; }
+  .gframe.drag { cursor: grabbing; }
+  .stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
+  .gframe.down { touch-action: pan-y pinch-zoom; }
+  /* A view's content fades in when the view changes; the frame stays. */
+  .view { animation: view-in 0.1s var(--ease) both; }
+  @keyframes view-in { from { opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { .view { animation: none; } }
+  .tools { display: flex; align-items: center; gap: 4px; justify-self: end; }
+  .tools button { all: unset; cursor: pointer; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; text-align: center;
+    font-size: 11.5px; line-height: 22px; color: var(--text-2); border-radius: 6px; border: 1px solid var(--line); }
+  .tools button:hover:not(:disabled) { color: var(--text); border-color: var(--line2); }
+  .tools button:focus-visible, .loopchip:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
+  .tools button:disabled { cursor: default; opacity: 0.4; }
+  /* Graph | Table: the chosen one is raised. */
+  .views { margin-left: 6px; }
+
+  .dag { position: relative; }
+  .dag.unplaced { visibility: hidden; }
+  .dag > *, .cluster > .in > * { position: absolute; }
+  .edges { left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
+  .edges path { fill: none; stroke: var(--line2); stroke-width: 1.5; }
+  .edges path.dashed { stroke-dasharray: 5 4; }
+  /* A cluster's return to its next round: dotted, lighter than the edges, under the cluster's nodes. */
+  .edges path.ret, .legend svg path.ret { stroke: var(--text-2); stroke-width: 2; stroke-dasharray: 0.1 4; stroke-linecap: round; opacity: 0.8; }
+  .edges path.ret-tip, .legend svg path.ret-head { fill: var(--text-2); stroke: none; opacity: 0.8; }
+  .ic { display: block; flex: none; }
+  .loop-ic { color: var(--text-2); }
+  .in-ic { color: var(--text-muted); }
+
+  .stub { z-index: 1; font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); padding: 3px 9px;
+    border-radius: 999px; border: 1px solid var(--line); background: var(--card); white-space: nowrap; }
+
+  .cluster { z-index: 1; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--line2); background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
+  .cluster .cluster { background: color-mix(in srgb, var(--text-muted) 6%, transparent); }
+  .cluster > .in { position: absolute; inset: 0; pointer-events: none; }
+  .cluster > .in > * { pointer-events: auto; }
+  /* Room on the right for the mark of an inner view: the cluster is as wide as its label. */
+  .cluster > .hd { position: absolute; left: 11px; top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
+    white-space: nowrap; padding-right: 22px; cursor: pointer; }
+  .cluster > .hd .line { display: flex; align-items: center; gap: 8px; }
+  .cluster > .hd .name { display: inline-flex; align-items: center; gap: 5px; }
+  .cluster.sel { outline: var(--focus-width) solid var(--accent); outline-offset: 2px; }
+  .cluster > .hd .spread { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
+
+  .node { z-index: 1; width: max-content; min-width: 120px; box-sizing: border-box;
+    display: flex; flex-direction: column; gap: 7px; padding: 8px 10px 9px;
+    border-radius: 10px; border: 1px solid var(--line); background: var(--card); transition: border-color 0.3s, box-shadow 0.3s;
+    cursor: pointer; box-shadow: var(--ex, 0 0 0 0 transparent); }
+  /* An accent: a thin line along the node's left side, an identity, not a status. */
+  .node.accent { --ex: inset 3px 0 0 -1px color-mix(in srgb, var(--agent) 60%, transparent); }
+  .node .nm { display: flex; align-items: center; min-width: 0; gap: 0; }
+  .node .right { display: flex; align-items: center; gap: 8px; }
+  /* the toggle at a node's end: its hit area stays inside the node's line */
+  .node .right > .tog { margin-inline-end: 0; }
+  /* The mark of an inner view: at the top right of a node and of a cluster alike. */
+  .cue { display: block; line-height: 0; }
+  /* a cluster's toggle: its hit area reaches 2px past its glyph, inside the cue's own box */
+  .cluster > .cue { position: absolute; top: 9px; right: 10px; padding: 2px; margin: -2px; }
+  /* The open and close control: the inner view's mark, turned into a button. */
+  .tog { all: unset; cursor: pointer; display: inline-flex; line-height: 0; padding: 2px; margin: -2px; border-radius: 4px; color: var(--text-2); }
+  .tog:hover { color: var(--text); background: var(--raise); }
+  .tog:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
+  /* A cluster named by a path: its later parts are links to their own inner views. */
+  .cluster > .hd .psep { color: var(--text-muted); font-size: 11px; }
+  .cluster > .hd .part { all: unset; cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--text-2);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
+  .cluster > .hd .part:hover { color: var(--text); text-decoration: underline; }
+  .cluster > .hd .part:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: 3px; }
+  .node.sel { outline: var(--focus-width) solid var(--accent); outline-offset: 2px; }
+  .node.drill { box-shadow: 4px 4px 0 -1px var(--card), 4px 4px 0 0 var(--line2); }
+  .node[data-look='running'] { border-color: var(--status-running); }
+  .node.drill[data-look='running'] { box-shadow: 4px 4px 0 -1px var(--card), 4px 4px 0 0 var(--status-running), 0 0 14px var(--status-running-bg); }
+  .node:not(.drill)[data-look='running'] { box-shadow: var(--ex, 0 0 0 0 transparent), 0 0 14px var(--status-running-bg); }
+  .node[data-look='failed'] { border-color: color-mix(in srgb, var(--status-failed) 55%, transparent); }
+  .node:focus-within { border-color: var(--text-2); }
+  .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .name { all: unset; cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--text);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
+  .name:hover { text-decoration: underline; }
+  .name:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: 3px; }
+  .count { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  /* The notes wrap at the node's width, which its header and marks set: they never widen it. */
+  .ex { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 11px; line-height: 1.5; contain: inline-size; }
+  :is(.ex, .st) .err { color: var(--status-failed); }
+  :is(.ex, .st) .warn { color: var(--status-attention); }
+  :is(.ex, .st) .live { color: var(--status-running); }
+  :is(.ex, .st) .mut { color: var(--text-muted); }
+
+  .marks { display: grid; grid-template-columns: repeat(var(--cols), var(--m)); gap: var(--g); }
+  .slot { width: var(--m); height: var(--m); }
+  .taskchip.sel { outline: var(--focus-width) solid var(--accent); outline-offset: 1px; }
+  .hl .mark:not(.on) { opacity: 0.16; }
+  .hl .mark.on { transform: scale(1.2); }
+  @media (prefers-reduced-motion: reduce) {
+    .node { transition: none; }
+  }
+
+  .sbar { display: flex; width: 220px; height: 10px; border-radius: 3px; overflow: hidden; background: var(--track); gap: 1px; }
+  .sbar i { display: block; min-width: 2px; height: 100%; background: var(--tone, var(--line2)); }
+  .sbar i:not([data-tone]) { --tone: initial; }
+  .sbar i[data-tone='done'] { opacity: 0.85; }
+  .sbar i[data-tone='muted'] { opacity: 0.5; }
+  .sbar i[data-shape='hatched'] { background: repeating-linear-gradient(135deg, var(--tone-bg) 0 2px, color-mix(in srgb, var(--tone) 60%, transparent) 2px 3px); }
+  .sbar i[data-shape='half'] { background: linear-gradient(0deg, var(--tone) 50%, var(--tone-bg) 50%); }
+  .fails { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 220px; font-size: 11px; color: var(--text-muted); }
+  .fails .taskchip { color: var(--status-failed); border-color: color-mix(in srgb, var(--status-failed) 45%, transparent); }
+  .fails .taskchip:focus-visible { outline: var(--focus-width) solid var(--text); outline-offset: 1px; }
+  .hl .fails .taskchip:not(.on) { opacity: 0.4; }
+
+  /* A mark matrix: centred in the frame. */
+  .mxframe { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 14px 16px; }
+
+  /* The legend on the left, the tools at the right end of the first line, in every view. */
+  .foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; margin-top: 6px; }
+  .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-muted); }
+  .legend span { display: inline-flex; align-items: center; gap: 6px; }
+  .legend .mark { --m: 12px; cursor: default; animation: none; }
+  .legend .mark:hover { transform: none; outline: none; }
+  /* A mark in the legend is a swatch: a rounded square, a problem's shape a sharper one. */
+  .legend i.mark { border-radius: 3px; }
+  .legend i.mark:is([data-shape='square'], [data-shape='hatched']) { border-radius: 2px; }
+  .legend i.mark[data-shape='hatched'] { background: repeating-linear-gradient(135deg, transparent 0 2px, color-mix(in srgb, var(--tone) 55%, transparent) 2px 3px); }
+  .legend i.mark[data-shape='half'] { border-radius: 50%; }
+  .legend svg path { stroke: var(--line2); stroke-width: 1.5; fill: none; }
+
+  .main { position: relative; min-width: 0; }
+  .sep { color: var(--text-muted); }
+
+  /* The selection's card: beside the item, joined to it by a pointer, in the accent of the item's outline. */
+  .insp { position: absolute; left: 0; top: 0; z-index: 6; width: 272px; max-width: calc(100% - 16px); box-sizing: border-box;
+    display: flex; flex-direction: column; gap: 9px; padding: 10px 12px 12px; border-radius: 10px;
+    border: 1px solid var(--accent); background: var(--card); font-size: 12px; overflow: visible;
+    box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow) 55%, transparent); visibility: hidden;
+    animation: insp-in 0.12s var(--ease) both; }
+  .insp.placed { visibility: visible; }
+  .insp .scroll { display: flex; flex-direction: column; gap: 9px; min-height: 0; overflow: auto; }
+  .insp .ptr { position: absolute; width: 10px; height: 10px; background: var(--card); border: 1px solid var(--accent);
+    transform: rotate(45deg); }
+  .insp[data-side='right'] .ptr { left: -6px; top: calc(var(--arrow) - 5px); border-top: 0; border-right: 0; }
+  .insp[data-side='left'] .ptr { right: -6px; top: calc(var(--arrow) - 5px); border-bottom: 0; border-left: 0; }
+  .insp[data-side='below'] .ptr { top: -6px; left: calc(var(--arrow) - 5px); border-bottom: 0; border-right: 0; }
+  .insp[data-side='above'] .ptr { bottom: -6px; left: calc(var(--arrow) - 5px); border-top: 0; border-left: 0; }
+  /* A narrow screen: a sheet under the frame. */
+  .insp.sheet { position: sticky; bottom: 8px; width: auto; max-width: none; margin-top: 8px; visibility: visible; }
+  .insp.sheet .ptr { display: none; }
+  @keyframes insp-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
+  /* The key hints keep their room: the focus moves nothing. */
+  .keys { grid-column: 1 / -1; font-size: 11px; color: var(--text-muted); visibility: hidden; }
+  .keys span { white-space: nowrap; }
+  :host(:focus-within) .keys { visibility: visible; }
+  /* Narrow: the tools on a line of their own above the legend, and a key hint may break. */
+  @container (max-width: 560px) {
+    .foot { grid-template-columns: minmax(0, 1fr); }
+    .tools { grid-row: 1; justify-self: start; flex-wrap: wrap; }
+    .keys span { white-space: normal; }
+  }
+  /* Touch alone: no keys, no line. */
+  @media not (any-pointer: fine) { .keys { display: none; } }
+
+  /* The node table: across the frame's content box, the name and status as wide as their content, the relations sharing the rest. */
+  /* A shadow at an edge the table scrolls past: a lid over it at the end, a shadow fixed to the frame. */
+  .tframe { overflow: auto; padding: 0 12px 10px;
+    background:
+      linear-gradient(transparent, var(--well) 70%) center bottom / 100% 28px no-repeat local,
+      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--text-muted) 30%, transparent), transparent) center bottom / 100% 12px no-repeat scroll,
+      var(--well); }
+  /* As wide as the frame; on a narrow screen it keeps room for its relations and scrolls across inside the frame. */
+  table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
+  .list th, .list td { text-align: left; vertical-align: middle; padding: 6px 10px; border-bottom: 1px solid var(--line); }
+  .list .fit { width: 1%; white-space: nowrap; }
+  /* A header is as wide as its words, and stays at the top of the frame. */
+  .list thead th { position: sticky; top: 0; z-index: 2; background: var(--well); color: var(--text-muted); font-weight: 500; font-size: 11px;
+    white-space: nowrap; padding-top: 10px; }
+  .list tbody th { font-weight: 600; }
+  .list td { color: var(--text-2); }
+  /* A relation wraps between its names, and keeps room for a name or two (a table cell's own min-width does not hold). */
+  .list .rel > span { display: block; min-width: 14ch; }
+  .list tbody tr { cursor: pointer; }
+  .list tbody tr:hover > * { background-color: color-mix(in srgb, var(--text-muted) 8%, transparent); }
+  .list tbody tr.sel > * { background-color: var(--accent-bg); }
+  .list tbody tr.sel > th { box-shadow: inset 2px 0 0 var(--accent); }
+  .list .nm { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
+  .list .nm .in-ic { margin-right: -2px; }
+  .list .name { max-width: 32ch; }
+  .loopchip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-weight: 400; }
+  .loopchip .ic { color: var(--text-muted); }
+  .list .st .n { color: var(--text); }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/graph/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/graph/styles.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,oDAAoD;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsM7B,CAAC"}

package/dist/graph/types.d.ts

@@ -0,0 +1,184 @@
+import type { Fact } from '../primitives/fact-line.js';
+import type { Tone } from '../core/tone.js';
+/** How an edge is drawn: solid, or dashed (another kind of link). */
+export type EdgeStyle = 'solid' | 'dashed';
+/** One mark of a node: an item it stands for, drawn as a small shape in its state's look. */
+export interface GraphMark {
+    /** Unique in the graph: the selection id. */
+    id: string;
+    /** A key of `StateStyles`. */
+    state: string;
+    /** The accessible name: what it is, and its facts. */
+    label: string;
+    /** The tooltip. */
+    tip?: string;
+    /** A short text in the mark: a count. */
+    badge?: string;
+    /** A short name, as a chip shows it (a node drawn as a bar lists its failed marks by it); default: its series id. */
+    name?: string;
+    /** The mark opens an inner view: Enter and a double click send `cae-drill`, not `cae-activate`. */
+    drill?: boolean;
+}
+/** A node's header count: `done` of `total`, and its words. */
+export interface NodeProgress {
+    done: number;
+    total: number;
+    label: string;
+}
+export interface GraphNodeInput {
+    id: string;
+    label: string;
+    /** The tooltip of its name. */
+    tip?: string;
+    /** The accessible name of the node: its facts in sentences; default: `label`. */
+    summary?: string;
+    /** The innermost cluster it is drawn in, or null. */
+    cluster: string | null;
+    /** Icon names (`registerIcon`) before its label. */
+    icons?: readonly string[];
+    /** An accent along its side: an identity, not a status. */
+    accent?: boolean;
+    /** It has an inner view: it is drawn as a stack, and Enter and a double click send `cae-drill`. */
+    drill?: boolean;
+    /**
+     * One per series id (`GraphInput.series`), null where the series has no mark here.
+     * A mark belongs in a series when the same item has a mark in several nodes (a
+     * service in each step); default: [].
+     */
+    marks?: readonly (GraphMark | null)[];
+    /** Its marks outside any series: items of this node only (the jobs of one step); default: []. */
+    loose?: readonly GraphMark[];
+    /** Its items by state (the states of `StateStyles`): the bar a node with many marks draws; default: its marks by state. */
+    counts?: Readonly<Record<string, number>>;
+    /**
+     * Its header's count ("28/30") and its words; default: its marks whose state has
+     * the tone `done`, of all its marks, in the words of `strings.progress`.
+     */
+    progress?: NodeProgress;
+    /** The line under its marks ("1 failed | 1 not started"). */
+    notes?: readonly Fact[];
+    /** Its frame's tone: failed, running or done. */
+    look?: Tone;
+    /** It can be drawn open, as a cluster of what is inside it: a control in its header sends `cae-toggle` (`closed`: it is drawn closed now). */
+    toggle?: 'closed';
+}
+/** A node as the graph draws it: its input with the defaults filled in (`fillNode`). */
+export interface GraphNode extends GraphNodeInput {
+    marks: readonly (GraphMark | null)[];
+    loose: readonly GraphMark[];
+    counts: Readonly<Record<string, number>>;
+    progress: NodeProgress;
+}
+/** A box of nodes (and of other clusters) in a layered graph. */
+export interface GraphClusterInput {
+    id: string;
+    /** The cluster it is in, or null at the top level. */
+    parent: string | null;
+    /** The name in its header. */
+    label: string;
+    /** The tooltip of its name. */
+    tip?: string;
+    /** A fact beside its name ("up to 3 passes"). */
+    note?: string;
+    /** A second line under its name, and its tooltip. */
+    detail?: string;
+    detailTip?: string;
+    /** Its accessible name; default: `label`. */
+    summary?: string;
+    /** In the node table, a node in it links to it by a chip (`note` with the cluster's icon): the chip's accessible name and tooltip. */
+    chipLabel?: string;
+    chipTip?: string;
+    /** It has an inner view: Enter and a double click send `cae-drill`. */
+    drill?: boolean;
+    /** Its content repeats: it draws a return from its last layer to its first. */
+    cycle: boolean;
+    /** It is an item drawn open: a control in its header closes it (`cae-toggle`). */
+    toggle?: 'open';
+    /**
+     * Its name as a path of parts, outermost first ("a › b › c"): the first part is its
+     * name; each later part is a link to its own inner view (`cae-drill` with the part's id).
+     */
+    path?: readonly ClusterPathPart[];
+}
+/** A part of a cluster's name (`GraphClusterInput.path`). */
+export interface ClusterPathPart {
+    id: string;
+    label: string;
+    tip?: string;
+}
+export interface GraphEdgeInput {
+    from: string;
+    to: string;
+    style: EdgeStyle;
+    /** How many links it stands for. */
+    weight: number;
+    /** False: it closes a cycle (a cluster's next round); it never sets the layers, and is drawn only as the cluster's return. */
+    ranks: boolean;
+}
+/** An edge from outside the graph, drawn from a named stub. */
+export interface GraphStubInput {
+    id: string;
+    label: string;
+    to: string;
+    style: EdgeStyle;
+    weight: number;
+}
+export interface GraphInput {
+    /** The ids that line marks up across nodes, in drawing order. */
+    series: readonly string[];
+    nodes: readonly GraphNodeInput[];
+    clusters: readonly GraphClusterInput[];
+    edges: readonly GraphEdgeInput[];
+    stubs: readonly GraphStubInput[];
+}
+/** A graph as it is drawn: its nodes with their defaults. */
+export interface DrawnGraph extends Omit<GraphInput, 'nodes'> {
+    nodes: readonly GraphNode[];
+}
+/** Where a graph's items are: give it back to `arrange` to keep them there. */
+export interface GraphOrder {
+    /** The top level's layers: nodes, clusters and stubs. */
+    layers: string[][];
+    clusters: Record<string, string[][]>;
+}
+/** One place an edge passes: a slot (`id`) of a container (`in`: '' for the top level, else a cluster id). */
+export interface EdgePathStep {
+    id: string;
+    in: string;
+}
+/**
+ * A drawn edge (or a stub's), as the slots it passes from its source to its target:
+ * a point (`~...`) on every layer it crosses, and a cluster's id where it leaves or
+ * enters that cluster.
+ */
+export interface EdgePath {
+    from: string;
+    to: string;
+    style: EdgeStyle;
+    steps: EdgePathStep[];
+}
+/** A cluster as arranged: its items (node and cluster ids) by layer, each layer in drawing order. */
+export interface ClusterLayers {
+    id: string;
+    parent: string | null;
+    /** It draws a return from its last layer to its first (`GraphClusterInput.cycle`). */
+    cycle: boolean;
+    layers: string[][];
+}
+/** The order `arrange` finds: layers, the order in each, and the slots each edge passes. */
+export interface Arrangement {
+    /** Every node id, in drawing order. */
+    drawn: string[];
+    /** The top level's node and cluster ids by layer (no stubs), each layer in drawing order. */
+    layers: string[][];
+    /** Every cluster, in the input's order. */
+    clusters: ClusterLayers[];
+    /** One per input edge: it goes back (closes a cycle) and is not drawn. */
+    back: boolean[];
+    /** Each container's slots by layer, in drawing order: '' for the top level, a cluster's id for its inside. */
+    slots: Record<string, string[][]>;
+    /** The drawn edges and the stubs' edges, with the slots they pass. */
+    edgePaths: EdgePath[];
+    order: GraphOrder;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/graph/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/graph/types.ts"],"names":[],"mappings":"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"}

package/dist/graph/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/graph/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/graph/types.ts"],"names":[],"mappings":""}

package/dist/graph/view.d.ts

@@ -0,0 +1,17 @@
+/** A view of the graph: its scale and where its top left corner sits in the frame. */
+export interface View {
+    k: number;
+    x: number;
+    y: number;
+}
+/**
+ * The frame's height and the view that shows the whole graph: scaled down to fit the
+ * frame's width and at most `maxH` of height, never scaled up, and centred in a frame
+ * at least `minH` tall.
+ */
+export declare function fitView(graphW: number, graphH: number, frameW: number, maxH: number, minH?: number): View & {
+    h: number;
+};
+/** `v` scaled by `factor` about the point (`cx`, `cy`) of the frame, within `min` and `max`. */
+export declare function zoomView(v: View, factor: number, cx: number, cy: number, min: number, max: number): View;
+//# sourceMappingURL=view.d.ts.map

package/dist/graph/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/graph/view.ts"],"names":[],"mappings":"AAEA,sFAAsF;AACtF,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,IAAI,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAMpH;AAED,gGAAgG;AAChG,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAIxG"}

package/dist/graph/view.js

@@ -0,0 +1,21 @@
+// The view of the drawing in its frame: fit and zoom.
+/**
+ * The frame's height and the view that shows the whole graph: scaled down to fit the
+ * frame's width and at most `maxH` of height, never scaled up, and centred in a frame
+ * at least `minH` tall.
+ */
+export function fitView(graphW, graphH, frameW, maxH, minH = 0) {
+    if (graphW <= 0 || graphH <= 0 || frameW <= 0)
+        return { k: 1, x: 0, y: 0, h: Math.max(0, graphH) };
+    const byWidth = Math.min(1, frameW / graphW);
+    const h = Math.max(minH, Math.min(graphH * byWidth, maxH));
+    const k = Math.min(byWidth, h / graphH);
+    return { k, x: (frameW - graphW * k) / 2, y: (h - graphH * k) / 2, h };
+}
+/** `v` scaled by `factor` about the point (`cx`, `cy`) of the frame, within `min` and `max`. */
+export function zoomView(v, factor, cx, cy, min, max) {
+    const k = Math.min(max, Math.max(min, v.k * factor));
+    const r = k / v.k;
+    return { k, x: cx - (cx - v.x) * r, y: cy - (cy - v.y) * r };
+}
+//# sourceMappingURL=view.js.map

package/dist/graph/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../src/graph/view.ts"],"names":[],"mappings":"AAAA,sDAAsD;AAStD;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,MAAc,EAAE,IAAY,EAAE,IAAI,GAAG,CAAC;IAC5F,IAAI,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACnG,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3D,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;AACzE,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,QAAQ,CAAC,CAAO,EAAE,MAAc,EAAE,EAAU,EAAE,EAAU,EAAE,GAAW,EAAE,GAAW;IAChG,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;IACrD,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAClB,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;AAC/D,CAAC"}

package/dist/graph/views/dag.d.ts

@@ -0,0 +1,10 @@
+import { type Tone } from '../../core/tone.js';
+import { type GraphHost } from '../host.js';
+import type { GraphNode } from '../types.js';
+/** A note's class by its tone: failed, attention, running, muted. */
+export declare const NOTE_CLASS: Partial<Record<Tone, string>>;
+/** The graph in its frame: dragging pans, a click on the frame clears the selection. */
+export declare function dag(h: GraphHost): import("lit").TemplateResult<1>;
+/** A node's notes ("1 failed | 1 not started"), each in its tone's class. */
+export declare const notes: (n: GraphNode, tag?: "span" | "div") => import("lit").TemplateResult<1>[];
+//# sourceMappingURL=dag.d.ts.map

package/dist/graph/views/dag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dag.d.ts","sourceRoot":"","sources":["../../../src/graph/views/dag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAiD,KAAK,SAAS,EAA6B,MAAM,YAAY,CAAC;AAMtH,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,aAAa,CAAC;AAEhE,qEAAqE;AACrE,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAuE,CAAC;AAE7H,wFAAwF;AACxF,wBAAgB,GAAG,CAAC,CAAC,EAAE,SAAS,mCAO/B;AAyHD,6EAA6E;AAC7E,eAAO,MAAM,KAAK,GAAI,GAAG,SAAS,EAAE,MAAK,MAAM,GAAG,KAAc,sCACwI,CAAC"}