@syware/jlib 0.2.0 → 0.3.0

package/README.md

@@ -107,6 +107,7 @@ git push --follow-tags
 
 The tag stages the version on npm and creates the GitHub release; a maintainer then approves it with
 `npm stage approve`. Every step, pre-releases and what to do when something fails: [RELEASING.md](RELEASING.md).
+What changed in each version: [CHANGELOG.md](CHANGELOG.md).
 
 ## Made by SyWare
 

package/dist/all.js

@@ -1,4 +1,4 @@
-import { TOKEN_STYLES } from "./styles/shared.js";
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from "./styles/shared.js";
 import { adoptTokens } from "./lib/tokens.js";
 import { JlElement } from "./base/jl-element.js";
 import { JlFormControl } from "./base/jl-form-control.js";
@@ -73,4 +73,4 @@ import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
 // src/all.ts
 registerIcons(COMMON_ICONS);
 define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/atoms/jl-input.d.ts

@@ -11,6 +11,7 @@ export declare class JlInput extends JlFormControl {
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         input: string;
         change: string;
+        enter: string;
     }>>;
     readonly value: Readonly<Readonly<{
         get(): string;

package/dist/atoms/jl-input.js

@@ -33,6 +33,7 @@ var PASSWORD = "password";
 var REVEALED = "text";
 var ICON_SIZE = 16;
 var ACTION_ICON_SIZE = 14;
+var ENTER = "Enter";
 /**
 * A single-line text field that takes part in forms. `value` is the text; `input` fires as people type and
 * `change` when they commit. Slots `start` and `end` hold adornments such as a unit or a prefix.
@@ -137,6 +138,7 @@ var JlInput = class extends JlFormControl {
 			this.events.emit("input", native.value);
 		});
 		this.on(native, "change", () => this.events.emit("change", native.value));
+		this.on(native, "keydown", (event) => event.key === ENTER && this.events.emit("enter", native.value));
 		this.on(this._refs.clear, "click", () => this.clearValue());
 		this.on(this._refs.reveal, "click", () => this.toggleReveal());
 	}

package/dist/atoms/jl-select.d.ts

@@ -15,6 +15,7 @@ export declare class JlSelect extends JlFormControl {
         get(): SelectOption[];
         set(setter: SelectOption[] | ((prevState: SelectOption[]) => SelectOption[])): void;
     }>>;
+    /** The chosen value. One that no option has is kept, as an option of its own, rather than replaced. */
     readonly value: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
@@ -60,6 +61,11 @@ export declare class JlSelect extends JlFormControl {
     private optionNodes;
     private placeholderNodes;
     private renderOptions;
+    /**
+     * A value no option has (a choice since removed, options still loading) shows as an option of its own, first, so
+     * the field shows what is saved and the form keeps it, rather than another choice.
+     */
+    private keepUnknownValue;
     /** Shows the chosen option; the form gets what is shown. */
     private renderValue;
     /**

package/dist/atoms/jl-select.js

@@ -40,7 +40,8 @@ var JlSelect = class extends JlFormControl {
 		attribute: "options",
 		parse: jsonOf([])
 	});
-	value = this.useChange(NO_VALUE, () => this.renderValue(), { attribute: "value" });
+	/** The chosen value. One that no option has is kept, as an option of its own, rather than replaced. */
+	value = this.useChange(NO_VALUE, () => this.renderOptions(), { attribute: "value" });
 	/** Shown while nothing is chosen; it cannot be picked back from the list. */
 	placeholder = this.useChange("", () => this.renderOptions(), { attribute: "placeholder" });
 	size = this.useChange("md", (value) => this.reflect("size", value), {
@@ -120,8 +121,24 @@ var JlSelect = class extends JlFormControl {
 	}
 	renderOptions() {
 		this._refs.native.replaceChildren(...this.placeholderNodes(), ...this.optionNodes());
+		this.keepUnknownValue();
 		this.renderValue();
 	}
+	/**
+	* A value no option has (a choice since removed, options still loading) shows as an option of its own, first, so
+	* the field shows what is saved and the form keeps it, rather than another choice.
+	*/
+	keepUnknownValue() {
+		const native = this._refs.native;
+		const value = this.value.get();
+		const known = [...native.options].some((option) => option.value === value);
+		if (value === NO_VALUE || known) return;
+		const afterPlaceholder = this.placeholder.get() === "" ? 0 : 1;
+		native.add(/* @__PURE__ */ jsx("option", {
+			value,
+			children: value
+		}), afterPlaceholder);
+	}
 	/** Shows the chosen option; the form gets what is shown. */
 	renderValue() {
 		const native = this._refs.native;

package/dist/atoms/jl-switch.d.ts

@@ -24,6 +24,14 @@ export declare class JlSwitch extends JlFormControl {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /**
+     * Keeps the label for screen readers only, for a switch whose meaning the page already shows beside it (an "On"
+     * or "Off" next to the track).
+     */
+    readonly hideLabel: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     readonly size: Readonly<Readonly<{
         get(): SwitchSize;
         set(setter: ((prevState: SwitchSize) => SwitchSize) | SwitchSize): void;
@@ -52,6 +60,9 @@ export declare class JlSwitch extends JlFormControl {
     private commit;
     private renderChecked;
     private renderFormValue;
-    /** Hides the text column when there is nothing to show, so a lone switch has no gap beside it. */
+    /**
+     * Hides the text column when there is nothing to show, so a lone switch has no gap beside it; a hidden label stays
+     * for screen readers, out of the layout.
+     */
     private renderText;
 }

package/dist/atoms/jl-switch.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-switch.tsx
 var SWITCH_SIZES = ["md", "sm"];
 var DEFAULT_VALUE = "on";
+var SCREEN_READER_ONLY = "sr-only";
 /**
 * An on/off setting that applies at once, such as "Dark mode" or "Email me". `checked` is the state; the form gets
 * `value` while it is on. For a choice confirmed later with a button, prefer a checkbox.
@@ -27,6 +28,11 @@ var JlSwitch = class extends JlFormControl {
 		this._refs.description.hidden = value === "";
 		this.renderText();
 	}, { attribute: "description" });
+	/**
+	* Keeps the label for screen readers only, for a switch whose meaning the page already shows beside it (an "On"
+	* or "Off" next to the track).
+	*/
+	hideLabel = this.useChange(false, () => this.renderText(), { attribute: "hide-label" });
 	size = this.useChange("md", (value) => this.reflect("size", value), {
 		attribute: "size",
 		parse: oneOf(SWITCH_SIZES, "md")
@@ -115,10 +121,14 @@ var JlSwitch = class extends JlFormControl {
 	renderFormValue() {
 		this.internals.setFormValue(this.checked.get() ? this.value.get() : null);
 	}
-	/** Hides the text column when there is nothing to show, so a lone switch has no gap beside it. */
+	/**
+	* Hides the text column when there is nothing to show, so a lone switch has no gap beside it; a hidden label stays
+	* for screen readers, out of the layout.
+	*/
 	renderText() {
 		const slotted = this._refs.slot.assignedNodes().some((node) => node instanceof Element || node.textContent?.trim() !== "");
 		this._refs.text.hidden = this.label.get() === "" && this.description.get() === "" && !slotted;
+		this._refs.text.classList.toggle(SCREEN_READER_ONLY, this.hideLabel.get());
 	}
 };
 JlSwitch.register();

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { COMMON_ICONS } from './lib/icon-set';
 export { hasIcon, iconElement, iconNames, registerIcons } from './lib/icons';
 export { CONTROL_SIZES, TONE_ICON_FILLED, TONE_ICONS, TONES } from './lib/options';
 export { adoptTokens } from './lib/tokens';
-export { TOKEN_STYLES } from './styles/shared';
+export { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from './styles/shared';
 export type * from './types/calendar.types';
 export type * from './types/files.types';
 export type * from './types/floating.types';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { TOKEN_STYLES } from "./styles/shared.js";
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from "./styles/shared.js";
 import { adoptTokens } from "./lib/tokens.js";
 import { JlElement } from "./base/jl-element.js";
 import { JlFormControl } from "./base/jl-form-control.js";
@@ -70,4 +70,4 @@ import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js"
 import { JlTree } from "./organisms/jl-tree.js";
 import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/lib/flow.d.ts

@@ -1,7 +1,11 @@
 import type { FlowEdge, FlowEdgeEnds, FlowGraph, FlowNode, FlowPoint, FlowPort, FlowViewport } from '../types/jl-flow.types';
-/** A node's box: fixed, so that every anchor and edge is computed without measuring the page. */
+/**
+ * A node's box: fixed, so that every anchor and edge is computed without measuring the page. A node with a detail
+ * line is taller.
+ */
 export declare const FLOW_NODE: {
     readonly height: 64;
+    readonly heightWithDetail: 96;
     readonly width: 240;
 };
 export declare const FLOW_ZOOM: {
@@ -12,6 +16,7 @@ export declare const FLOW_ZOOM: {
 /** The exit of a node that names none. */
 export declare const DEFAULT_PORT: FlowPort;
 export declare const portsOf: (node: FlowNode) => FlowPort[];
+export declare const nodeHeight: (node: FlowNode) => number;
 /** The exit an edge leaves by: its own, or its node's first. */
 export declare const portOfEdge: (node: FlowNode, edge: FlowEdge) => string;
 export declare const snap: (point: FlowPoint) => FlowPoint;
@@ -31,6 +36,10 @@ export declare const edgePath: (from: FlowPoint, to: FlowPoint) => string;
 export declare const edgeMidpoint: (from: FlowPoint, to: FlowPoint) => FlowPoint;
 /** Where an edge starts and ends, or nothing when one of its ends is gone. */
 export declare function edgeEnds(graph: FlowGraph, edge: FlowEdge): FlowEdgeEnds | undefined;
+/** A run went this way: its node left by the edge's exit, and the node it leads to ran too. */
+export declare function isEdgeTaken(graph: FlowGraph, edge: FlowEdge): boolean;
+/** The position of a node centred on a point: where something dropped there lands. */
+export declare const centeredAt: (point: FlowPoint) => FlowPoint;
 /** The node under a point, other than `except`. */
 export declare const nodeAt: (graph: FlowGraph, point: FlowPoint, except?: string) => FlowNode | undefined;
 export declare const isPortFree: (graph: FlowGraph, node: FlowNode, portId: string) => boolean;

package/dist/lib/flow.js

@@ -1,7 +1,11 @@
 // src/lib/flow.ts
-/** A node's box: fixed, so that every anchor and edge is computed without measuring the page. */
+/**
+* A node's box: fixed, so that every anchor and edge is computed without measuring the page. A node with a detail
+* line is taller.
+*/
 var FLOW_NODE = {
 	height: 64,
+	heightWithDetail: 96,
 	width: 240
 };
 var FLOW_ZOOM = {
@@ -20,6 +24,7 @@ var REVEAL_MARGIN = 48;
 var ROW_GAP = 72;
 var COLUMN_GAP = 32;
 var portsOf = (node) => node.ports ?? [DEFAULT_PORT];
+var nodeHeight = (node) => node.detail ? FLOW_NODE.heightWithDetail : FLOW_NODE.height;
 /** The exit an edge leaves by: its own, or its node's first. */
 var portOfEdge = (node, edge) => edge.port ?? portsOf(node)[0]?.id ?? "";
 var nodeById = (graph, id) => graph.nodes.find((node) => node.id === id);
@@ -36,7 +41,7 @@ function outputAnchor(node, portId) {
 	if (index < 0) return;
 	return {
 		x: node.position.x + portX(index, ports.length),
-		y: node.position.y + FLOW_NODE.height + PORT_DROP
+		y: node.position.y + nodeHeight(node) + PORT_DROP
 	};
 }
 var inputAnchor = (node) => ({
@@ -152,7 +157,18 @@ function edgeEnds(graph, edge) {
 		tone
 	};
 }
-var isInside = (point, node) => point.x >= node.position.x && point.x <= node.position.x + FLOW_NODE.width && point.y >= node.position.y && point.y <= node.position.y + FLOW_NODE.height;
+var isInside = (point, node) => point.x >= node.position.x && point.x <= node.position.x + FLOW_NODE.width && point.y >= node.position.y && point.y <= node.position.y + nodeHeight(node);
+/** A run went this way: its node left by the edge's exit, and the node it leads to ran too. */
+function isEdgeTaken(graph, edge) {
+	const source = nodeById(graph, edge.from);
+	const target = nodeById(graph, edge.to);
+	return source?.taken !== void 0 && source.taken === portOfEdge(source, edge) && target?.status !== void 0;
+}
+/** The position of a node centred on a point: where something dropped there lands. */
+var centeredAt = (point) => snap({
+	x: point.x - FLOW_NODE.width / 2,
+	y: point.y - FLOW_NODE.height / 2
+});
 /** The node under a point, other than `except`. */
 var nodeAt = (graph, point, except = "") => graph.nodes.find((node) => node.id !== except && isInside(point, node));
 var isPortFree = (graph, node, portId) => !graph.edges.some((edge) => edge.from === node.id && portOfEdge(node, edge) === portId);
@@ -188,8 +204,8 @@ var removeEdge = (graph, id) => ({
 	...graph,
 	edges: graph.edges.filter((edge) => edge.id !== id)
 });
-var ROW = FLOW_NODE.height + ROW_GAP;
 var COLUMN = FLOW_NODE.width + COLUMN_GAP;
+var rowOfFlow = (graph) => Math.max(FLOW_NODE.height, ...graph.nodes.map(nodeHeight)) + ROW_GAP;
 /** How far across a node hangs from its parent's exit: the exits share the row out, side by side, around it. */
 function portShift(node, portId) {
 	const ports = portsOf(node);
@@ -204,7 +220,7 @@ function positionAfter(graph, from, portId) {
 	};
 	return snap({
 		x: source.position.x + portShift(source, portId),
-		y: source.position.y + ROW
+		y: source.position.y + nodeHeight(source) + ROW_GAP
 	});
 }
 /** The edges that close a loop, found walking from the starts: the layout leaves them out, or a loop has no top. */
@@ -267,6 +283,7 @@ function layoutFlow(graph) {
 	const loops = loopEdges(graph);
 	const edges = graph.edges.filter((edge) => !loops.has(edge.id) && ids.has(edge.from) && ids.has(edge.to));
 	const rows = rowsOf(graph, edges);
+	const row = rowOfFlow(graph);
 	const placed = /* @__PURE__ */ new Map();
 	for (const row of [...new Set(rows.values())].sort((a, b) => a - b)) placeRow(graph.nodes.filter((node) => rows.get(node.id) === row).map((node) => ({
 		id: node.id,
@@ -278,7 +295,7 @@ function layoutFlow(graph) {
 			...node,
 			position: snap({
 				x: placed.get(node.id) ?? 0,
-				y: (rows.get(node.id) ?? 0) * ROW
+				y: (rows.get(node.id) ?? 0) * row
 			})
 		}))
 	};
@@ -309,7 +326,7 @@ function fitView(nodes, width, height) {
 	const left = Math.min(...nodes.map((node) => node.position.x));
 	const top = Math.min(...nodes.map((node) => node.position.y));
 	const right = Math.max(...nodes.map((node) => node.position.x + FLOW_NODE.width));
-	const bottom = Math.max(...nodes.map((node) => node.position.y + FLOW_NODE.height + PORT_DROP));
+	const bottom = Math.max(...nodes.map((node) => node.position.y + nodeHeight(node) + PORT_DROP));
 	const zoom = clampZoom(Math.min(1, (width - 96) / (right - left), (height - 96) / (bottom - top)));
 	return {
 		x: width / 2 - (left + right) / 2 * zoom,
@@ -329,8 +346,8 @@ function revealIn(viewport, node, width, height) {
 	const top = viewport.y + node.position.y * zoom;
 	return {
 		x: viewport.x + shiftInto(left, left + FLOW_NODE.width * zoom, width),
-		y: viewport.y + shiftInto(top, top + (FLOW_NODE.height + PORT_DROP) * zoom, height),
+		y: viewport.y + shiftInto(top, top + (nodeHeight(node) + PORT_DROP) * zoom, height),
 		zoom
 	};
 }
-export { DEFAULT_PORT, FLOW_NODE, FLOW_ZOOM, connect, edgeEnds, edgeMidpoint, edgePath, edgeRoute, fitView, inputAnchor, isPortFree, layoutFlow, moveNode, nodeAt, outputAnchor, portOfEdge, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, roundedPath, snap, toWorld, zoomAt };
+export { DEFAULT_PORT, FLOW_NODE, FLOW_ZOOM, centeredAt, connect, edgeEnds, edgeMidpoint, edgePath, edgeRoute, fitView, inputAnchor, isEdgeTaken, isPortFree, layoutFlow, moveNode, nodeAt, nodeHeight, outputAnchor, portOfEdge, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, roundedPath, snap, toWorld, zoomAt };

package/dist/molecules/jl-accordion-item.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-accordion-item.css?raw
-var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.heading {\n  flex: 1;\n  min-width: 0;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
+var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.titles {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n}\n\n.description {\n  overflow: hidden;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
 export { jl_accordion_item_default as default };

package/dist/molecules/jl-accordion-item.d.ts

@@ -12,11 +12,16 @@ export declare class JlAccordionItem extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** A quieter line under the heading, shown open or closed: what the section holds ("3 fields", "2 pages"). */
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     readonly open: Readonly<Readonly<{
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
-    /** An icon before the heading. */
+    /** An icon before the heading; the `icon` slot takes a richer one instead. */
     readonly icon: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;

package/dist/molecules/jl-accordion-item.js

@@ -19,8 +19,13 @@ var JlAccordionItem = class extends JlElement {
 	heading = this.useChange("", (value) => {
 		this._refs.heading.textContent = value;
 	}, { attribute: "heading" });
+	/** A quieter line under the heading, shown open or closed: what the section holds ("3 fields", "2 pages"). */
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
 	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
-	/** An icon before the heading. */
+	/** An icon before the heading; the `icon` slot takes a richer one instead. */
 	icon = this.useChange("", (name) => {
 		this._refs.icon.name.set(name);
 		this._refs.icon.hidden = name === "";
@@ -32,6 +37,7 @@ var JlAccordionItem = class extends JlElement {
 		this._refs.summary.tabIndex = value ? -1 : 0;
 	}, { attribute: "disabled" });
 	_refs = this.useRefs((ref) => ({
+		description: ref(".description"),
 		details: ref("details"),
 		heading: ref(".heading"),
 		icon: ref(".icon"),
@@ -41,12 +47,21 @@ var JlAccordionItem = class extends JlElement {
 		return /* @__PURE__ */ jsxs("details", {
 			attrs: { part: "base" },
 			children: [/* @__PURE__ */ jsxs("summary", { children: [
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "icon",
-					size: ICON_SIZE,
-					hidden: true
+				/* @__PURE__ */ jsx("slot", {
+					name: "icon",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						class: "icon",
+						size: ICON_SIZE,
+						hidden: true
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: "titles",
+					children: [/* @__PURE__ */ jsx("span", { class: "heading" }), /* @__PURE__ */ jsx("span", {
+						class: "description",
+						hidden: true
+					})]
 				}),
-				/* @__PURE__ */ jsx("span", { class: "heading" }),
 				/* @__PURE__ */ jsx(JlIcon, {
 					class: "chevron",
 					name: "chevron-down",

package/dist/molecules/jl-search.d.ts

@@ -9,6 +9,7 @@ export declare class JlSearch extends JlFormControl {
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         input: string;
         search: string;
+        enter: string;
     }>>;
     readonly value: Readonly<Readonly<{
         get(): string;
@@ -52,6 +53,8 @@ export declare class JlSearch extends JlFormControl {
     focus(options?: FocusOptions): void;
     /** Selects the whole text, ready to be replaced. */
     select(): void;
+    /** Empties the field, as its clear button does: `input` and `search` fire with `''`, and it takes the focus. */
+    clear(): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
@@ -64,7 +67,6 @@ export declare class JlSearch extends JlFormControl {
     private onPageKey;
     private scheduleSearch;
     private search;
-    private clear;
     private renderValue;
     private renderActions;
     private renderShortcut;

package/dist/molecules/jl-search.js

@@ -77,6 +77,13 @@ var JlSearch = class extends JlFormControl {
 	select() {
 		this._refs.native.select();
 	}
+	/** Empties the field, as its clear button does: `input` and `search` fire with `''`, and it takes the focus. */
+	clear() {
+		this.value.set("");
+		this.events.emit("input", "");
+		this.search("");
+		this.focus();
+	}
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "control",
@@ -151,6 +158,7 @@ var JlSearch = class extends JlFormControl {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			this.search(this.value.get());
+			this.events.emit("enter", this.value.get());
 			return;
 		}
 		if (event.key === "Escape" && this.value.get() !== "") {
@@ -178,12 +186,6 @@ var JlSearch = class extends JlFormControl {
 		this._state.lastSearch = query;
 		this.events.emit("search", query);
 	}
-	clear() {
-		this.value.set("");
-		this.events.emit("input", "");
-		this.search("");
-		this.focus();
-	}
 	renderValue(value) {
 		const native = this._refs.native;
 		if (native.value !== value) native.value = value;

package/dist/molecules/jl-segmented.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-segmented.css?raw
-var jl_segmented_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* Its own width, even as a grid or flex item that would stretch it: block asks for the whole width. */\n  justify-self: start;\n  max-width: 100%;\n  --height: var(--jl-control-md);\n  --pad: 12px;\n  --font-size: var(--jl-font-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 10px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 16px;\n  --font-size: var(--jl-font-md);\n}\n\n:host([block]) {\n  display: flex;\n  justify-self: stretch;\n}\n\n.group {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  min-width: 0;\n  height: var(--height);\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface-2);\n}\n\n.segment {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: calc(var(--height) - 6px);\n  padding: 0 var(--pad);\n  border: none;\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  background: none;\n  color: var(--jl-muted);\n  font-size: var(--font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.segment:hover:not(:disabled) {\n  color: var(--jl-text);\n}\n\n.segment[aria-checked=\"true\"] {\n  color: var(--jl-text);\n}\n\n.segment:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host([block]) .segment {\n  flex: 1 1 0;\n}\n\n/* The chosen option's raised surface, slid under it. */\n.thumb {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--w);\n  height: var(--h);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  /* Raised over the track: white on light grey, a lighter grey on a dark ground. */\n  background: light-dark(var(--jl-surface), var(--jl-surface-3));\n  box-shadow: var(--jl-shadow-sm);\n  transform: translate(var(--x), var(--y));\n  pointer-events: none;\n}\n\n.thumb[data-placed] {\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    width var(--jl-slow) var(--jl-ease);\n}\n\n.group[aria-disabled] {\n  opacity: 0.55;\n}\n\n.group[aria-disabled] .segment {\n  opacity: 1;\n}\n\n/* The track scrolls when the options do not fit: a ring drawn outside the segment would be cut. */\n.segment:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n";
+var jl_segmented_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* Its own width, even as a grid or flex item that would stretch it: block asks for the whole width. */\n  justify-self: start;\n  max-width: 100%;\n  --height: var(--jl-control-md);\n  --pad: 12px;\n  --font-size: var(--jl-font-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 10px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 16px;\n  --font-size: var(--jl-font-md);\n}\n\n:host([block]) {\n  display: flex;\n  justify-self: stretch;\n}\n\n.group {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  min-width: 0;\n  height: var(--height);\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface-2);\n}\n\n.segment {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: calc(var(--height) - 6px);\n  padding: 0 var(--pad);\n  border: none;\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  background: none;\n  color: var(--jl-muted);\n  font-size: var(--font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.segment:hover:not(:disabled) {\n  color: var(--jl-text);\n}\n\n.segment[aria-checked=\"true\"] {\n  color: var(--jl-text);\n}\n\n.badge {\n  min-width: 18px;\n  padding: 0 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 650;\n  line-height: 18px;\n  text-align: center;\n}\n\n.segment[aria-checked=\"true\"] .badge {\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.segment:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host([block]) .segment {\n  flex: 1 1 0;\n}\n\n/* The chosen option's raised surface, slid under it. */\n.thumb {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--w);\n  height: var(--h);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  /* Raised over the track: white on light grey, a lighter grey on a dark ground. */\n  background: light-dark(var(--jl-surface), var(--jl-surface-3));\n  box-shadow: var(--jl-shadow-sm);\n  transform: translate(var(--x), var(--y));\n  pointer-events: none;\n}\n\n.thumb[data-placed] {\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    width var(--jl-slow) var(--jl-ease);\n}\n\n.group[aria-disabled] {\n  opacity: 0.55;\n}\n\n.group[aria-disabled] .segment {\n  opacity: 1;\n}\n\n/* The track scrolls when the options do not fit: a ring drawn outside the segment would be cut. */\n.segment:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n";
 export { jl_segmented_default as default };

package/dist/molecules/jl-segmented.js

@@ -126,13 +126,20 @@ var JlSegmented = class extends JlFormControl {
 			class: "segment",
 			"data-value": option.value,
 			"data-disabled": option.disabled === true ? "" : void 0,
-			children: [option.icon === void 0 ? "" : /* @__PURE__ */ jsx(JlIcon, {
-				name: option.icon,
-				size: iconSize
-			}), label === "" ? "" : /* @__PURE__ */ jsx("span", {
-				class: "label",
-				children: label
-			})]
+			children: [
+				option.icon === void 0 ? "" : /* @__PURE__ */ jsx(JlIcon, {
+					name: option.icon,
+					size: iconSize
+				}),
+				label === "" ? "" : /* @__PURE__ */ jsx("span", {
+					class: "label",
+					children: label
+				}),
+				option.badge === void 0 ? "" : /* @__PURE__ */ jsx("span", {
+					class: "badge",
+					children: String(option.badge)
+				})
+			]
 		});
 	}
 	/** The chosen option's index: the one `value` names, or else the first that can be chosen. */

package/dist/molecules/jl-stat.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-stat.css?raw
-var jl_stat_default = ":host {\n  display: block;\n  --mood: var(--jl-muted);\n}\n\n:host([mood=\"good\"]) {\n  --mood: var(--jl-ok);\n}\n\n:host([mood=\"bad\"]) {\n  --mood: var(--jl-danger);\n}\n\n.stat {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.icon {\n  color: var(--jl-faint);\n}\n\n.figure {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n}\n\n.value {\n  color: var(--jl-text);\n  font-size: var(--jl-font-2xl);\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n.delta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mood);\n  font-size: var(--jl-font-sm);\n  font-variant-numeric: tabular-nums;\n  font-weight: 650;\n  white-space: nowrap;\n}\n\n.caption {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.4;\n}\n\n.spark {\n  height: 36px;\n  margin-top: 8px;\n}\n\n.spark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  fill: none;\n  stroke: var(--jl-accent);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: 2;\n  vector-effect: non-scaling-stroke;\n}\n\n.area {\n  fill: color-mix(in srgb, var(--jl-accent) 10%, transparent);\n  stroke: none;\n}\n";
+var jl_stat_default = ":host {\n  display: block;\n  --mood: var(--jl-muted);\n}\n\n:host([mood=\"good\"]) {\n  --mood: var(--jl-ok);\n}\n\n:host([mood=\"bad\"]) {\n  --mood: var(--jl-danger);\n}\n\n.stat {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.icon {\n  color: var(--jl-faint);\n}\n\n:host([tone=\"accent\"]) .icon {\n  color: var(--jl-accent);\n}\n\n:host([tone=\"ok\"]) .icon {\n  color: var(--jl-ok);\n}\n\n:host([tone=\"warn\"]) .icon {\n  color: var(--jl-warn);\n}\n\n:host([tone=\"danger\"]) .icon {\n  color: var(--jl-danger);\n}\n\n:host([tone=\"info\"]) .icon {\n  color: var(--jl-info);\n}\n\n.figure {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n}\n\n.value {\n  color: var(--jl-text);\n  font-size: var(--jl-font-2xl);\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n.delta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mood);\n  font-size: var(--jl-font-sm);\n  font-variant-numeric: tabular-nums;\n  font-weight: 650;\n  white-space: nowrap;\n}\n\n.caption {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.4;\n}\n\n.spark {\n  height: 36px;\n  margin-top: 8px;\n}\n\n.spark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  fill: none;\n  stroke: var(--jl-accent);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: 2;\n  vector-effect: non-scaling-stroke;\n}\n\n.area {\n  fill: color-mix(in srgb, var(--jl-accent) 10%, transparent);\n  stroke: none;\n}\n";
 export { jl_stat_default as default };

package/dist/molecules/jl-stat.d.ts

@@ -1,5 +1,6 @@
 import { JlElement } from '../base/jl-element';
 import type { StatTrend } from '../types/jl-stat.types';
+import type { Tone } from '../types/options.types';
 export declare const STAT_TRENDS: readonly StatTrend[];
 /**
  * A key figure: what it measures, its value, how it moved (`delta`, coloured by its trend) and an optional
@@ -36,6 +37,11 @@ export declare class JlStat extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The colour of the icon: neutral (quiet) by default, or what the figure is about (`ok`, `info`…). */
+    readonly tone: Readonly<Readonly<{
+        get(): Tone;
+        set(setter: ((prevState: Tone) => Tone) | Tone): void;
+    }>>;
     /** A note under the figure: "vs. last month". */
     readonly caption: Readonly<Readonly<{
         get(): string;

package/dist/molecules/jl-stat.js

@@ -2,6 +2,7 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
+import { TONES } from "../lib/options.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { areaAttribute, pointsAttribute, sparklinePoints } from "../lib/sparkline.js";
 import { trendOfDelta } from "../lib/trend.js";
@@ -71,6 +72,11 @@ var JlStat = class extends JlElement {
 		this._refs.icon.name.set(value);
 		this._refs.icon.hidden = value === "";
 	}, { attribute: "icon" });
+	/** The colour of the icon: neutral (quiet) by default, or what the figure is about (`ok`, `info`…). */
+	tone = this.useChange("neutral", (value) => this.reflect("tone", value), {
+		attribute: "tone",
+		parse: oneOf(TONES, "neutral")
+	});
 	/** A note under the figure: "vs. last month". */
 	caption = this.useChange("", (value) => {
 		this._refs.caption.textContent = value;

package/dist/organisms/jl-flow.css_raw.js

@@ -1,3 +1,3 @@
 // src/organisms/jl-flow.css?raw
-var jl_flow_default = ":host {\n  display: block;\n  height: 420px;\n  min-height: 0;\n}\n\n.viewport {\n  position: relative;\n  height: 100%;\n  overflow: clip;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background-color: var(--jl-surface-2);\n  background-image: radial-gradient(circle, var(--jl-line-strong) 1px, transparent 1.2px);\n  outline: none;\n  touch-action: none;\n  user-select: none;\n}\n\n.viewport:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.world,\n.nodes,\n.edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.world {\n  transform-origin: 0 0;\n}\n\n.edges {\n  overflow: visible;\n  pointer-events: none;\n}\n\n.edge {\n  fill: none;\n  stroke: color-mix(in srgb, var(--tone, var(--jl-muted)) 60%, var(--jl-line-strong));\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n.edge[data-tone=\"danger\"] {\n  stroke-dasharray: 6 5;\n}\n\n.edge-hit {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 14;\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.edge-group:hover .edge {\n  stroke: var(--tone, var(--jl-muted));\n}\n\n.edge-group.selected .edge {\n  stroke: var(--jl-accent);\n  stroke-width: 3;\n}\n\n.draft {\n  stroke: var(--jl-accent);\n  stroke-dasharray: 5 5;\n}\n\n.node {\n  --tone: var(--jl-accent);\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--jl-space-3);\n  width: 240px;\n  height: 64px;\n  padding: 0 var(--jl-space-3) var(--jl-space-1);\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background: var(--jl-surface);\n  box-shadow: var(--jl-shadow-sm);\n  cursor: grab;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.node:hover {\n  border-color: var(--jl-line-strong);\n}\n\n.node:focus-visible {\n  outline: none;\n  box-shadow: var(--jl-focus-ring);\n}\n\n.node.selected {\n  border-color: var(--jl-accent);\n  box-shadow: 0 0 0 3px var(--jl-accent-soft);\n}\n\n.input {\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  width: 10px;\n  height: 10px;\n  border: 2px solid var(--jl-surface);\n  border-radius: 50%;\n  background: var(--jl-line-strong);\n  transform: translateX(-50%);\n}\n\n.icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--jl-radius);\n  background: color-mix(in srgb, var(--tone) 14%, var(--jl-surface));\n  color: var(--tone);\n}\n\n.text {\n  display: grid;\n  min-width: 0;\n}\n\n.label,\n.description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label {\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.ports {\n  position: absolute;\n  right: 0;\n  bottom: -11px;\n  left: 0;\n  height: 22px;\n}\n\n.port {\n  --tone: var(--jl-muted);\n  position: absolute;\n  top: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--jl-space-1);\n  height: 22px;\n  padding: 0 7px;\n  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--jl-line));\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: color-mix(in srgb, var(--tone) 80%, var(--jl-text));\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  cursor: crosshair;\n}\n\n.port:has(.add) {\n  padding-right: 3px;\n}\n\n.dot {\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tone);\n}\n\n.port-label {\n  overflow: hidden;\n  min-width: 0;\n  text-overflow: ellipsis;\n}\n\n.add,\n.remove-edge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n.add {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: color-mix(in srgb, var(--tone) 16%, var(--jl-surface));\n  color: var(--tone);\n}\n\n.add:hover {\n  background: var(--tone);\n  color: var(--jl-surface);\n}\n\n.remove-edge {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n  color: var(--jl-danger);\n}\n\n.remove-edge:hover {\n  border-color: var(--jl-danger);\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n.empty {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: var(--jl-space-6);\n  color: var(--jl-muted);\n  text-align: center;\n  pointer-events: none;\n}\n\n.empty[hidden] {\n  display: none;\n}\n\n.empty ::slotted(*) {\n  pointer-events: auto;\n}\n\n.controls {\n  position: absolute;\n  bottom: var(--jl-space-3);\n  left: var(--jl-space-3);\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n}\n\n/* The zoom buttons: small and quiet, as ghost buttons. */\n.control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-sm);\n  height: var(--jl-control-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: transparent;\n  color: var(--jl-accent);\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  background: var(--jl-accent-soft);\n}\n\n.zoom-label {\n  min-width: 40px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n\n/* The tones of icons, exits and edges: after .node and .port, whose default tones they replace. */\n[data-tone=\"neutral\"] {\n  --tone: var(--jl-muted);\n}\n\n[data-tone=\"accent\"] {\n  --tone: var(--jl-accent);\n}\n\n[data-tone=\"ok\"] {\n  --tone: var(--jl-ok);\n}\n\n[data-tone=\"warn\"] {\n  --tone: var(--jl-warn);\n}\n\n[data-tone=\"danger\"] {\n  --tone: var(--jl-danger);\n}\n\n[data-tone=\"info\"] {\n  --tone: var(--jl-info);\n}\n\n/* View only: nodes are pressed to be selected, not dragged, and their exits do not connect. */\n:host([readonly]) .node,\n:host([readonly]) .port {\n  cursor: pointer;\n}\n\n/* View only: the layout stays as it was given. */\n:host([readonly]) .tidy {\n  display: none;\n}\n";
+var jl_flow_default = ":host {\n  display: block;\n  height: 420px;\n  min-height: 0;\n}\n\n.viewport {\n  position: relative;\n  height: 100%;\n  overflow: clip;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background-color: var(--jl-surface-2);\n  background-image: radial-gradient(circle, var(--jl-line-strong) 1px, transparent 1.2px);\n  outline: none;\n  touch-action: none;\n  user-select: none;\n}\n\n.viewport:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.world,\n.nodes,\n.edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.world {\n  transform-origin: 0 0;\n}\n\n.edges {\n  overflow: visible;\n  pointer-events: none;\n}\n\n.edge {\n  fill: none;\n  stroke: color-mix(in srgb, var(--tone, var(--jl-muted)) 60%, var(--jl-line-strong));\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n.edge[data-tone=\"danger\"] {\n  stroke-dasharray: 6 5;\n}\n\n.edge-hit {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 14;\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.edge-group:hover .edge {\n  stroke: var(--tone, var(--jl-muted));\n}\n\n.edge-group.taken .edge {\n  stroke: var(--tone, var(--jl-muted));\n  stroke-width: 3;\n}\n\n.edge-group.selected .edge {\n  stroke: var(--jl-accent);\n  stroke-width: 3;\n}\n\n.draft {\n  stroke: var(--jl-accent);\n  stroke-dasharray: 5 5;\n}\n\n/* The box's size is the one lib/flow.ts computes the edges with: 240 wide, and the height the script sets (64, or 96\n   with a detail line). */\n.node {\n  --tone: var(--jl-accent);\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 240px;\n  height: 64px;\n  padding: 0 var(--jl-space-3) var(--jl-space-1);\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background: var(--jl-surface);\n  box-shadow: var(--jl-shadow-sm);\n  cursor: grab;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.node:hover {\n  border-color: var(--jl-line-strong);\n}\n\n.node:focus-visible {\n  outline: none;\n  box-shadow: var(--jl-focus-ring);\n}\n\n/* How a node did in a run: a ring while it works or waits for someone, a border once it is done or failed. */\n.node[data-status=\"running\"] {\n  --state: var(--jl-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-info) 30%, transparent);\n}\n\n.node[data-status=\"done\"] {\n  --state: var(--jl-ok);\n  border-color: color-mix(in srgb, var(--jl-ok) 55%, var(--jl-line));\n}\n\n.node[data-status=\"waiting\"] {\n  --state: var(--jl-brand);\n  border-color: var(--jl-brand);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 30%, transparent);\n}\n\n.node[data-status=\"failed\"] {\n  --state: var(--jl-danger);\n  border-color: var(--jl-danger);\n}\n\n.node.selected {\n  border-color: var(--jl-accent);\n  box-shadow: 0 0 0 3px var(--jl-accent-soft);\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  gap: var(--jl-space-3);\n  min-width: 0;\n}\n\n/* With a detail line, the head sits at the top and the detail under it, clear of the exits below. */\n.node:has(.detail) {\n  justify-content: flex-start;\n  padding-top: 10px;\n}\n\n.detail {\n  overflow: hidden;\n  margin-top: 6px;\n  padding-top: 5px;\n  line-height: 16px;\n  border-top: 1px dashed var(--jl-line);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.problem {\n  display: inline-flex;\n  flex: none;\n  color: var(--jl-danger);\n}\n\n.status {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--state);\n  color: var(--jl-on-accent);\n}\n\n.node[data-status=\"running\"] .status jl-icon {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    rotate: 360deg;\n  }\n}\n\n.input {\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  width: 10px;\n  height: 10px;\n  border: 2px solid var(--jl-surface);\n  border-radius: 50%;\n  background: var(--jl-line-strong);\n  transform: translateX(-50%);\n}\n\n.icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--jl-radius);\n  background: color-mix(in srgb, var(--tone) 14%, var(--jl-surface));\n  color: var(--tone);\n}\n\n.text {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n}\n\n.label,\n.description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label {\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.ports {\n  position: absolute;\n  right: 0;\n  bottom: -11px;\n  left: 0;\n  height: 22px;\n}\n\n.port {\n  --tone: var(--jl-muted);\n  position: absolute;\n  top: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--jl-space-1);\n  height: 22px;\n  padding: 0 7px;\n  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--jl-line));\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: color-mix(in srgb, var(--tone) 80%, var(--jl-text));\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  cursor: crosshair;\n}\n\n.port:has(.add) {\n  padding-right: 3px;\n}\n\n/* The exit a run left by. */\n.port[data-taken] {\n  border-color: var(--tone);\n  background: color-mix(in srgb, var(--tone) 14%, var(--jl-surface));\n}\n\n.dot {\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tone);\n}\n\n.port-label {\n  overflow: hidden;\n  min-width: 0;\n  text-overflow: ellipsis;\n}\n\n.add,\n.remove-edge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n.add {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: color-mix(in srgb, var(--tone) 16%, var(--jl-surface));\n  color: var(--tone);\n}\n\n.add:hover {\n  background: var(--tone);\n  color: var(--jl-surface);\n}\n\n.remove-edge {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n  color: var(--jl-danger);\n}\n\n.remove-edge:hover {\n  border-color: var(--jl-danger);\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n.empty {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: var(--jl-space-6);\n  color: var(--jl-muted);\n  text-align: center;\n  pointer-events: none;\n}\n\n.empty[hidden] {\n  display: none;\n}\n\n.empty ::slotted(*) {\n  pointer-events: auto;\n}\n\n.controls {\n  position: absolute;\n  bottom: var(--jl-space-3);\n  left: var(--jl-space-3);\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n}\n\n/* The zoom buttons: small and quiet, as ghost buttons. */\n.control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-sm);\n  height: var(--jl-control-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: transparent;\n  color: var(--jl-accent);\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  background: var(--jl-accent-soft);\n}\n\n.zoom-label {\n  min-width: 40px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n\n/* The tones of icons, exits and edges: after .node and .port, whose default tones they replace. */\n[data-tone=\"neutral\"] {\n  --tone: var(--jl-muted);\n}\n\n[data-tone=\"accent\"] {\n  --tone: var(--jl-accent);\n}\n\n[data-tone=\"ok\"] {\n  --tone: var(--jl-ok);\n}\n\n[data-tone=\"warn\"] {\n  --tone: var(--jl-warn);\n}\n\n[data-tone=\"danger\"] {\n  --tone: var(--jl-danger);\n}\n\n[data-tone=\"info\"] {\n  --tone: var(--jl-info);\n}\n\n/* View only: nodes are pressed to be selected, not dragged, and their exits do not connect. */\n:host([readonly]) .node,\n:host([readonly]) .port {\n  cursor: pointer;\n}\n\n/* View only: the layout stays as it was given. */\n:host([readonly]) .tidy {\n  display: none;\n}\n";
 export { jl_flow_default as default };

package/dist/organisms/jl-flow.d.ts

@@ -1,9 +1,10 @@
 import { JlElement } from '../base/jl-element';
-import type { FlowAddRequest, FlowGraph } from '../types/jl-flow.types';
+import type { FlowAddRequest, FlowDropRequest, FlowGraph, FlowPoint } from '../types/jl-flow.types';
 /**
  * A flow of nodes joined by edges, to edit: people move the nodes, draw an edge from a node's exit to another node,
  * press + on a free exit to ask for the next node, and move and zoom the view. Every edit goes out as a new graph
- * (`change`); the page adds nodes itself, when `add` asks.
+ * (`change`); the page adds nodes itself, when `add` or `drop` asks. Nodes can show how a run went (`status`,
+ * `taken`) and what to fix (`problem`).
  */
 export declare class JlFlow extends JlElement {
     static readonly selector = "jl-flow";
@@ -11,6 +12,7 @@ export declare class JlFlow extends JlElement {
         change: FlowGraph;
         select: string;
         add: FlowAddRequest;
+        drop: FlowDropRequest;
     }>>;
     readonly graph: Readonly<Readonly<{
         get(): FlowGraph;
@@ -26,6 +28,14 @@ export declare class JlFlow extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /**
+     * The drag-and-drop type the canvas takes (`application/x-step`): something dragged in carrying it asks for a node
+     * where it is dropped, with `drop`.
+     */
+    readonly dropType: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     /** The canvas's name for screen readers. */
     readonly label: Readonly<Readonly<{
         get(): string;
@@ -37,6 +47,12 @@ export declare class JlFlow extends JlElement {
     private readonly _refs;
     /** Moves and zooms the view to show every node, never larger than life. */
     fit(): void;
+    /** Moves the view, when needed, so that a node is in sight: one just added, or moved with the keys. */
+    reveal(id: string): void;
+    /** Where a node added after an exit goes, as + puts it: a row below, under that exit. */
+    positionAfter(from: string, port: string): FlowPoint;
+    /** Where a node added without a place goes: in the middle of the view (its top left corner). */
+    centerPosition(): FlowPoint;
     /** Lays the nodes out again, in rows from the starts down (`change` gives the new positions), and shows them all. */
     layout(): void;
     templateHtml(): Node;
@@ -58,11 +74,13 @@ export declare class JlFlow extends JlElement {
     /** An edge dropped on a node joins it; dropped on empty space, it asks for a node there. */
     private connectAt;
     private pressAdd;
+    /** Whether a drag carries what the canvas takes: then it may be dropped here. */
+    private carriesDrop;
+    private dragOver;
+    private dropOn;
     private key;
     /** The arrows move the selected node; with Shift, further. */
     private nudge;
-    /** Moves the view, when needed, so that a node is in sight: one just added, or moved with the keys. */
-    private reveal;
     /** Two fingers or the wheel move the view; with Ctrl or ⌘ (a pinch on a trackpad), they zoom. */
     private wheel;
     private zoomBy;
@@ -75,11 +93,16 @@ export declare class JlFlow extends JlElement {
     private renderNodes;
     private createNode;
     private drawNode;
+    /** A colour of the page's own for the icon wins over the tone's. */
+    private paintIcon;
     private portElement;
     private place;
     private renderSelection;
     private renderEdges;
-    /** An edge, with a wide invisible twin that catches the pointer: a thin line is still easy to press. */
+    /**
+     * An edge, with a wide invisible twin that catches the pointer: a thin line is still easy to press. One a run took
+     * stands out.
+     */
     private edgeGroup;
     /** The button that removes the selected edge, in its middle. */
     private renderEdgeTool;

package/dist/organisms/jl-flow.js

@@ -4,13 +4,17 @@ import { jsonOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { setOrRemove, svgElement } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
-import { FLOW_NODE, FLOW_ZOOM, connect, edgeEnds, edgeMidpoint, edgePath, fitView, isPortFree, layoutFlow, moveNode, nodeAt, outputAnchor, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, snap, toWorld, zoomAt } from "../lib/flow.js";
+import { FLOW_NODE, FLOW_ZOOM, centeredAt, connect, edgeEnds, edgeMidpoint, edgePath, fitView, isEdgeTaken, isPortFree, layoutFlow, moveNode, nodeAt, nodeHeight, outputAnchor, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, snap, toWorld, zoomAt } from "../lib/flow.js";
 import jl_flow_default from "./jl-flow.css_raw.js";
 import { css } from "@jadis/core";
-import { Maximize, Minus, Plus, WandSparkles, X } from "lucide";
+import { Check, CircleAlert, Hourglass, LoaderCircle, Maximize, Minus, Plus, WandSparkles, X } from "lucide";
 import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/organisms/jl-flow.tsx
 registerIcons({
+	check: Check,
+	"circle-alert": CircleAlert,
+	hourglass: Hourglass,
+	"loader-circle": LoaderCircle,
 	maximize: Maximize,
 	minus: Minus,
 	plus: Plus,
@@ -32,6 +36,7 @@ var PERCENT = 100;
 var ICON_SIZE = 16;
 var ADD_ICON_SIZE = 12;
 var CONTROL_ICON_SIZE = 14;
+var STATUS_ICON_SIZE = 12;
 var PORT_GAP = 6;
 var ID_LENGTH = 8;
 var DELETE_KEYS = /* @__PURE__ */ new Set(["Delete", "Backspace"]);
@@ -53,6 +58,20 @@ var ARROWS = /* @__PURE__ */ new Map([
 		y: -1
 	}]
 ]);
+var STATUS_ICONS = {
+	done: "check",
+	failed: "x",
+	running: "loader-circle",
+	waiting: "hourglass"
+};
+var STATUS_LABELS = {
+	done: "Done",
+	failed: "Failed",
+	running: "Running",
+	waiting: "Waiting"
+};
+/** What screen readers hear after a node's label: how it did in the run, and what to fix. */
+var noteOf = (node) => [node.status ? STATUS_LABELS[node.status] : "", node.problem ?? ""].filter((part) => part !== "").join(". ");
 var markOf = (element, name) => element?.closest(`[${name}]`)?.getAttribute(name) ?? void 0;
 var isControl = (event) => event.composedPath().some((element) => element instanceof Element && element.hasAttribute("data-control"));
 function targetOf(event) {
@@ -71,7 +90,8 @@ var addLabel = (node, port) => port.label ? `Add after ${node.label}, ${port.lab
 /**
 * A flow of nodes joined by edges, to edit: people move the nodes, draw an edge from a node's exit to another node,
 * press + on a free exit to ask for the next node, and move and zoom the view. Every edit goes out as a new graph
-* (`change`); the page adds nodes itself, when `add` asks.
+* (`change`); the page adds nodes itself, when `add` or `drop` asks. Nodes can show how a run went (`status`,
+* `taken`) and what to fix (`problem`).
 */
 var JlFlow = class extends JlElement {
 	static selector = "jl-flow";
@@ -90,6 +110,11 @@ var JlFlow = class extends JlElement {
 		this.reflect("readonly", value);
 		this.render();
 	}, { attribute: "readonly" });
+	/**
+	* The drag-and-drop type the canvas takes (`application/x-step`): something dragged in carrying it asks for a node
+	* where it is dropped, with `drop`.
+	*/
+	dropType = this.useChange("", () => void 0, { attribute: "drop-type" });
 	/** The canvas's name for screen readers. */
 	label = this.useChange("", (value) => this._refs.viewport.setAttribute("aria-label", value || DEFAULT_LABEL), { attribute: "label" });
 	_state = {
@@ -133,6 +158,27 @@ var JlFlow = class extends JlElement {
 			this.setViewport(fitView(this._state.graph.nodes, width, height));
 		});
 	}
+	/** Moves the view, when needed, so that a node is in sight: one just added, or moved with the keys. */
+	reveal(id) {
+		this.whenRendered(() => {
+			const node = this.nodeOf(id);
+			const { width, height } = this._refs.viewport.getBoundingClientRect();
+			if (!node || width === 0) return;
+			this.setViewport(revealIn(this._state.viewport, node, width, height));
+		});
+	}
+	/** Where a node added after an exit goes, as + puts it: a row below, under that exit. */
+	positionAfter(from, port) {
+		return positionAfter(this._state.graph, from, port);
+	}
+	/** Where a node added without a place goes: in the middle of the view (its top left corner). */
+	centerPosition() {
+		const { width, height } = this._refs.viewport.getBoundingClientRect();
+		return centeredAt(toWorld(this._state.viewport, {
+			x: width / 2,
+			y: height / 2
+		}));
+	}
 	/** Lays the nodes out again, in rows from the starts down (`change` gives the new positions), and shows them all. */
 	layout() {
 		this.whenRendered(() => {
@@ -236,6 +282,8 @@ var JlFlow = class extends JlElement {
 		this.on(viewport, "wheel", (event) => this.wheel(event));
 		this.on(viewport, "keydown", (event) => this.key(event));
 		this.on(viewport, "click", (event) => this.pressAdd(event));
+		this.on(viewport, "dragover", (event) => this.dragOver(event));
+		this.on(viewport, "drop", (event) => this.dropOn(event));
 		this.on(viewport, "focusin", (event) => {
 			const node = targetOf(event).node;
 			if (node !== void 0) this.select(node);
@@ -424,6 +472,24 @@ var JlFlow = class extends JlElement {
 			position: positionAfter(this._state.graph, node, add)
 		});
 	}
+	/** Whether a drag carries what the canvas takes: then it may be dropped here. */
+	carriesDrop(event) {
+		const type = this.dropType.get();
+		return type !== "" && !this.readonly.get() && (event.dataTransfer?.types.includes(type) ?? false);
+	}
+	dragOver(event) {
+		if (this.carriesDrop(event)) event.preventDefault();
+	}
+	dropOn(event) {
+		if (!this.carriesDrop(event)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const data = event.dataTransfer?.getData(this.dropType.get()) ?? "";
+		this.events.emit("drop", {
+			data,
+			position: centeredAt(this.worldPoint(event))
+		});
+	}
 	key(event) {
 		const target = targetOf(event);
 		if (target.control || target.add !== void 0) return;
@@ -453,13 +519,6 @@ var JlFlow = class extends JlElement {
 		this.commit(moveNode(this._state.graph, node.id, position));
 		this.reveal(node.id);
 	}
-	/** Moves the view, when needed, so that a node is in sight: one just added, or moved with the keys. */
-	reveal(id) {
-		const node = this.nodeOf(id);
-		const { width, height } = this._refs.viewport.getBoundingClientRect();
-		if (!node || width === 0) return;
-		this.setViewport(revealIn(this._state.viewport, node, width, height));
-	}
 	/** Two fingers or the wheel move the view; with Ctrl or ⌘ (a pinch on a trackpad), they zoom. */
 	wheel(event) {
 		event.preventDefault();
@@ -535,30 +594,63 @@ var JlFlow = class extends JlElement {
 	drawNode(element, node) {
 		const ports = portsOf(node);
 		element.setAttribute("aria-label", node.label);
+		setOrRemove(element, "aria-description", noteOf(node));
 		element.part.toggle("start", node.start === true);
 		setOrRemove(element, "data-tone", node.tone ?? "");
+		setOrRemove(element, "data-status", node.status ?? "");
+		element.style.height = `${nodeHeight(node)}px`;
+		this.paintIcon(element, node.color ?? "");
 		element.replaceChildren(/* @__PURE__ */ jsxs(Fragment, { children: [
 			node.start === true ? null : /* @__PURE__ */ jsx("span", { class: "input" }),
-			node.icon ? /* @__PURE__ */ jsx("span", {
-				class: "icon",
-				attrs: { part: "icon" },
-				children: /* @__PURE__ */ jsx(JlIcon, {
-					name: node.icon,
-					size: ICON_SIZE
-				})
-			}) : null,
 			/* @__PURE__ */ jsxs("span", {
-				class: "text",
-				children: [/* @__PURE__ */ jsx("span", {
-					class: "label",
-					attrs: { part: "label" },
-					children: node.label
-				}), node.description ? /* @__PURE__ */ jsx("span", {
-					class: "description",
-					attrs: { part: "description" },
-					children: node.description
-				}) : null]
+				class: "head",
+				children: [
+					node.icon ? /* @__PURE__ */ jsx("span", {
+						class: "icon",
+						attrs: { part: "icon" },
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: node.icon,
+							size: ICON_SIZE
+						})
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						class: "text",
+						children: [/* @__PURE__ */ jsx("span", {
+							class: "label",
+							attrs: { part: "label" },
+							children: node.label
+						}), node.description ? /* @__PURE__ */ jsx("span", {
+							class: "description",
+							attrs: { part: "description" },
+							children: node.description
+						}) : null]
+					}),
+					node.problem ? /* @__PURE__ */ jsx("span", {
+						class: "problem",
+						title: node.problem,
+						attrs: { part: "problem" },
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: "circle-alert",
+							size: ICON_SIZE
+						})
+					}) : null,
+					node.status ? /* @__PURE__ */ jsx("span", {
+						class: "status",
+						title: STATUS_LABELS[node.status],
+						attrs: { part: "status" },
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: STATUS_ICONS[node.status],
+							size: STATUS_ICON_SIZE
+						})
+					}) : null
+				]
 			}),
+			node.detail ? /* @__PURE__ */ jsx("span", {
+				class: "detail",
+				title: node.detail,
+				attrs: { part: "detail" },
+				children: node.detail
+			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				class: "ports",
 				children: ports.map((port, index) => this.portElement(node, port, index, ports.length))
@@ -566,6 +658,14 @@ var JlFlow = class extends JlElement {
 		] }));
 		this.place(element, node.position);
 	}
+	/** A colour of the page's own for the icon wins over the tone's. */
+	paintIcon(element, color) {
+		if (color === "") {
+			element.style.removeProperty("--tone");
+			return;
+		}
+		element.style.setProperty("--tone", color);
+	}
 	portElement(node, port, index, count) {
 		const free = !this.readonly.get() && isPortFree(this._state.graph, node, port.id);
 		const element = /* @__PURE__ */ jsxs("span", {
@@ -594,6 +694,7 @@ var JlFlow = class extends JlElement {
 		element.style.left = `${portX(index, count)}px`;
 		element.style.maxWidth = `${FLOW_NODE.width / count - PORT_GAP}px`;
 		setOrRemove(element, "data-tone", port.tone ?? "");
+		element.toggleAttribute("data-taken", node.taken === port.id);
 		return element;
 	}
 	place(element, position) {
@@ -611,16 +712,20 @@ var JlFlow = class extends JlElement {
 		const { edge: selected, graph } = this._state;
 		const groups = graph.edges.flatMap((edge) => {
 			const ends = edgeEnds(graph, edge);
-			return ends ? [this.edgeGroup(edge.id, ends, edge.id === selected)] : [];
+			return ends ? [this.edgeGroup(edge.id, ends, edge.id === selected, isEdgeTaken(graph, edge))] : [];
 		});
 		this._svg.root.replaceChildren(...groups, this._svg.draft);
 		this.renderEdgeTool();
 	}
-	/** An edge, with a wide invisible twin that catches the pointer: a thin line is still easy to press. */
-	edgeGroup(id, ends, selected) {
+	/**
+	* An edge, with a wide invisible twin that catches the pointer: a thin line is still easy to press. One a run took
+	* stands out.
+	*/
+	edgeGroup(id, ends, selected, taken) {
 		const d = edgePath(ends.from, ends.to);
+		const states = [selected ? "selected" : "", taken ? "taken" : ""].filter((state) => state !== "");
 		const group = svgElement("g", {
-			class: selected ? "edge-group selected" : "edge-group",
+			class: ["edge-group", ...states].join(" "),
 			"data-edge": id
 		});
 		group.append(svgElement("path", {
@@ -630,7 +735,7 @@ var JlFlow = class extends JlElement {
 			class: "edge",
 			d,
 			"data-tone": ends.tone,
-			part: selected ? "edge selected" : "edge"
+			part: ["edge", ...states].join(" ")
 		}));
 		return group;
 	}

package/dist/types/jl-flow.types.d.ts

@@ -10,6 +10,8 @@ export type FlowPort = {
     label?: string;
     tone?: Tone;
 };
+/** How a node did in a run, shown on it: at work, finished, waiting for someone, or failed. */
+export type FlowNodeStatus = 'running' | 'done' | 'waiting' | 'failed';
 export type FlowNode = {
     id: string;
     label: string;
@@ -17,9 +19,19 @@ export type FlowNode = {
     position: FlowPoint;
     /** A second, quieter line under the label. */
     description?: string;
+    /** A third line, under a dashed rule: what the node is set to do. The node is taller with it. */
+    detail?: string;
     icon?: string;
     /** The colour of the icon: `accent` by default. */
     tone?: Tone;
+    /** The icon's colour as any CSS colour, for kinds the tones do not cover (`var(--my-ai)`); wins over `tone`. */
+    color?: string;
+    /** How it did in a run. */
+    status?: FlowNodeStatus;
+    /** The exit a run left it by: that exit, and its edges to nodes with a status, stand out. */
+    taken?: string;
+    /** Something to fix before the flow can run: a mark on the node, with this text as its explanation. */
+    problem?: string;
     /** The exits. Absent, the node has one without a name; empty, it has none (it ends the flow). */
     ports?: FlowPort[];
     /** A start takes no incoming edge. */
@@ -42,6 +54,11 @@ export type FlowAddRequest = {
     port: string;
     position: FlowPoint;
 };
+/** Asks for a node where something was dropped: what it carried, and where to put the node. */
+export type FlowDropRequest = {
+    data: string;
+    position: FlowPoint;
+};
 /** How far the view is moved, and how much it is zoomed. */
 export type FlowViewport = {
     x: number;

package/dist/types/jl-segmented.types.d.ts

@@ -3,5 +3,7 @@ export type SegmentedOption = {
     value: string;
     label?: string;
     icon?: string;
+    /** A count or a short word after the label: what waits behind the choice. */
+    badge?: string | number;
     disabled?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syware/jlib",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",