@syware/jlib 0.2.0 → 0.4.0

package/dist/molecules/jl-chip-group.js

@@ -0,0 +1,259 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf, oneOf, stringList } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { rovingIndex } from "../lib/roving-index.js";
+import jl_chip_group_default from "./jl-chip-group.css_raw.js";
+import { css } from "@jadis/core";
+import { Check } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-chip-group.tsx
+registerIcons({ check: Check });
+var ICON_SIZES = {
+	lg: 16,
+	md: 14,
+	sm: 12
+};
+var SELECTED_ICON = "check";
+var CHIP_SELECTOR = ".chip";
+var VALUE_MISSING = "Please select one of these options.";
+/** The keys that move between the chips; with one choice, the choice moves too, as with native radios. */
+var MOVES = /* @__PURE__ */ new Map([
+	["ArrowDown", "next"],
+	["ArrowLeft", "previous"],
+	["ArrowRight", "next"],
+	["ArrowUp", "previous"],
+	["End", "last"],
+	["Home", "first"]
+]);
+/** A JSON attribute that should hold a list of options; anything else gives none. */
+var parseOptions = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+/**
+* A row of chips to choose from: a status to filter by, a category, a reason. One choice by default, as radios
+* (choosing the chosen chip again keeps it); `multiple` lets people turn each chip on and off. On a narrow screen
+* the row scrolls sideways; `wrap` lets it go to the next line instead. `change` fires with the chosen values.
+*/
+var JlChipGroup = class extends JlFormControl {
+	static selector = "jl-chip-group";
+	events = this.useEvents();
+	options = this.useChange([], () => this.renderOptions(), {
+		attribute: "options",
+		parse: parseOptions
+	});
+	/** The chosen values, in the options' order; with one choice, a list of at most one. */
+	value = this.useChange([], () => this.renderValue(), {
+		attribute: "value",
+		parse: stringList
+	});
+	/** Several chips can be chosen, each turned on and off on its own. */
+	multiple = this.useChange(false, (value) => {
+		this.reflect("multiple", value);
+		this.renderValue();
+	}, { attribute: "multiple" });
+	/** Goes to the next line when the chips do not fit, instead of scrolling sideways. */
+	wrap = this.useChange(false, (value) => this.reflect("wrap", value), { attribute: "wrap" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this.renderOptions();
+	}, {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** The group's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.group, "aria-label", value), { attribute: "label" });
+	/** A form refuses to submit while nothing is chosen. */
+	required = this.useChange(false, (value) => {
+		this.reflect("required", value);
+		this._refs.group.toggleAttribute("aria-required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderValue();
+	}, { attribute: "disabled" });
+	/** The chip that holds the Tab stop with several choices: the last one people reached. */
+	_state = {
+		disabledByForm: false,
+		stop: ""
+	};
+	_nameWatch = new MutationObserver(() => this.renderFormValue());
+	_refs = this.useRefs((ref) => ({ group: ref(".group") }));
+	/** Focuses the chip that holds the Tab stop. */
+	focus(options) {
+		this.chips().find((chip) => chip.tabIndex === 0)?.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "group",
+			role: "radiogroup",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_chip_group_default}`;
+	}
+	onConnect() {
+		this._nameWatch.observe(this, {
+			attributeFilter: ["name"],
+			attributes: true
+		});
+		this.renderFormValue();
+		this.on(this._refs.group, "click", (event) => {
+			const chip = event.target.closest(CHIP_SELECTOR);
+			if (chip !== null && !chip.disabled) this.press(chip);
+		});
+		this.on(this._refs.group, "keydown", (event) => this.onKeydown(event));
+	}
+	onDisconnect() {
+		this._nameWatch.disconnect();
+	}
+	resetValue() {
+		this.value.set(stringList(this.getAttribute("value")));
+	}
+	/** The browser calls it for a disabled fieldset and for the element's own `disabled`, even before it renders. */
+	setDisabledByForm(disabled) {
+		this._state.disabledByForm = disabled;
+		this.whenRendered(() => this.renderValue());
+	}
+	chips() {
+		return [...this._refs.group.querySelectorAll(CHIP_SELECTOR)];
+	}
+	/** What is chosen: with one choice, only the first value counts. */
+	chosen() {
+		const values = this.value.get();
+		return this.multiple.get() ? values : values.slice(0, 1);
+	}
+	isDisabled() {
+		return this.disabled.get() || this._state.disabledByForm;
+	}
+	/** One choice: the chip becomes it. Several: the chip turns on or off, the values keeping the options' order. */
+	press(chip) {
+		const value = chip.dataset.value ?? "";
+		this._state.stop = value;
+		const chosen = this.chosen();
+		if (!this.multiple.get()) {
+			if (chosen[0] === value) {
+				this.renderTabStop();
+				return;
+			}
+			this.commit([value]);
+			return;
+		}
+		const next = new Set(chosen);
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		this.commit(this.options.get().flatMap((option) => next.has(option.value) ? [option.value] : []));
+	}
+	commit(values) {
+		this.value.set(values);
+		this.events.emit("change", values);
+	}
+	onKeydown(event) {
+		const move = MOVES.get(event.key);
+		const chips = this.chips();
+		const from = chips.indexOf(event.target);
+		if (move === void 0 || from === -1) return;
+		event.preventDefault();
+		const target = chips[rovingIndex(chips.map((chip) => chip.disabled), from, move)];
+		if (target === void 0) return;
+		target.focus();
+		if (this.multiple.get()) {
+			this._state.stop = target.dataset.value ?? "";
+			this.renderTabStop();
+			return;
+		}
+		this.press(target);
+	}
+	renderOptions() {
+		const iconSize = ICON_SIZES[this.size.get()];
+		this._refs.group.replaceChildren(...this.options.get().map((option) => this.chip(option, iconSize)));
+		this.renderValue();
+	}
+	chip(option, iconSize) {
+		const badge = option.badge === void 0 ? "" : String(option.badge);
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			class: "chip",
+			tabIndex: -1,
+			"data-value": option.value,
+			"data-icon": option.icon,
+			"data-disabled": option.disabled === true ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "icon",
+					size: iconSize,
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "label",
+					children: option.label
+				}),
+				badge === "" ? "" : /* @__PURE__ */ jsx("span", {
+					class: "badge",
+					children: badge
+				})
+			]
+		});
+	}
+	/** Radios with one choice, toggle buttons with several; each chosen chip shows its icon or a check. */
+	renderValue() {
+		const chosen = new Set(this.chosen());
+		const multiple = this.multiple.get();
+		const groupDisabled = this.isDisabled();
+		this._refs.group.setAttribute("role", multiple ? "group" : "radiogroup");
+		this._refs.group.toggleAttribute("aria-disabled", groupDisabled);
+		for (const chip of this.chips()) {
+			const selected = chosen.has(chip.dataset.value ?? "");
+			chip.disabled = groupDisabled || chip.dataset.disabled !== void 0;
+			setOrRemove(chip, "role", multiple ? "" : "radio");
+			setOrRemove(chip, "aria-checked", multiple ? "" : String(selected));
+			setOrRemove(chip, "aria-pressed", multiple ? String(selected) : "");
+			chip.classList.toggle("selected", selected);
+			const icon = chip.querySelector(".icon");
+			const name = chip.dataset.icon ?? (selected ? SELECTED_ICON : "");
+			icon?.name.set(name);
+			if (icon !== null) icon.hidden = name === "";
+		}
+		this.renderTabStop();
+		this.renderFormValue();
+		this.renderValidity();
+	}
+	/** Tab reaches one chip: the chosen one with one choice, the last one reached with several, else the first. */
+	renderTabStop() {
+		const enabled = this.chips().filter((chip) => !chip.disabled);
+		const chosen = this.chosen();
+		const stop = (this.multiple.get() ? [this._state.stop, ...chosen] : chosen).map((value) => enabled.find((chip) => chip.dataset.value === value)).find((chip) => chip !== void 0) ?? enabled[0];
+		for (const chip of this.chips()) chip.tabIndex = chip === stop ? 0 : -1;
+	}
+	/** One choice gives one entry; several give one entry each under the field's name, as checkboxes would. */
+	renderFormValue() {
+		const chosen = this.chosen();
+		if (!this.multiple.get()) {
+			this.internals.setFormValue(chosen[0] ?? null);
+			return;
+		}
+		const name = this.getAttribute("name") ?? "";
+		if (name === "") {
+			this.internals.setFormValue(null);
+			return;
+		}
+		const data = new FormData();
+		for (const value of chosen) data.append(name, value);
+		this.internals.setFormValue(data);
+	}
+	renderValidity() {
+		if (!(this.required.get() && this.chosen().length === 0)) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this.chips()[0] ?? this._refs.group);
+	}
+};
+JlChipGroup.register();
+export { JlChipGroup };

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/molecules/jl-tag-input.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-tag-input.css?raw
-var jl_tag_input_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n  --chip-height: calc(var(--height, var(--jl-control-md)) - 12px);\n}\n\n.control {\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 4px 6px;\n  cursor: text;\n}\n\n/* The chips are items of the frame's own flow, so the field follows the last one on its line. */\n.tags {\n  display: contents;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  max-width: 100%;\n  height: var(--chip-height);\n  padding: 0 3px 0 8px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  line-height: 1;\n  cursor: default;\n}\n\n:host([size=\"sm\"]) .tag {\n  padding-left: 6px;\n  font-size: var(--jl-font-xs);\n}\n\n.tag.flash {\n  animation: flash 600ms var(--jl-ease);\n}\n\n.tag-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tag-remove {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.tag-remove:hover,\n.tag-remove:focus-visible {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.native {\n  flex: 1 0 80px;\n  height: calc(var(--height, var(--jl-control-md)) - 10px);\n  padding-left: 6px;\n}\n\n:host([disabled]) .tag {\n  padding-right: 8px;\n  color: var(--jl-muted);\n}\n\n.popup {\n  min-width: 180px;\n  padding: 4px;\n}\n\n.listbox {\n  position: relative;\n  max-height: 240px;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n.option {\n  padding: 6px 10px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 1.4;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\n\n.option.active,\n.option:hover {\n  background: var(--jl-surface-3);\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n@keyframes flash {\n  30% {\n    border-color: var(--jl-accent-line);\n    background: var(--jl-accent-soft);\n    color: var(--jl-accent-strong);\n  }\n}\n";
+var jl_tag_input_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n  --chip-height: calc(var(--height, var(--jl-control-md)) - 12px);\n}\n\n.control {\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 4px 6px;\n  cursor: text;\n}\n\n/* The chips are items of the frame's own flow, so the field follows the last one on its line. */\n.tags {\n  display: contents;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  max-width: 100%;\n  height: var(--chip-height);\n  padding: 0 3px 0 8px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  line-height: 1;\n  cursor: default;\n}\n\n:host([size=\"sm\"]) .tag {\n  padding-left: 6px;\n  font-size: var(--jl-font-xs);\n}\n\n.tag.flash {\n  animation: flash 600ms var(--jl-ease);\n}\n\n/* A line box taller than the tag's own line-height of 1: the accents of É, Â, Ö stay inside what overflow clips. */\n.tag-text {\n  overflow: hidden;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tag-remove {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.tag-remove:hover,\n.tag-remove:focus-visible {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.native {\n  flex: 1 0 80px;\n  height: calc(var(--height, var(--jl-control-md)) - 10px);\n  padding-left: 6px;\n}\n\n:host([disabled]) .tag {\n  padding-right: 8px;\n  color: var(--jl-muted);\n}\n\n.popup {\n  min-width: 180px;\n  padding: 4px;\n}\n\n.listbox {\n  position: relative;\n  max-height: 240px;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n.option {\n  padding: 6px 10px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 1.4;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\n\n.option.active,\n.option:hover {\n  background: var(--jl-surface-3);\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n@keyframes flash {\n  30% {\n    border-color: var(--jl-accent-line);\n    background: var(--jl-accent-soft);\n    color: var(--jl-accent-strong);\n  }\n}\n";
 export { jl_tag_input_default as default };

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;