@syware/jlib 0.2.0 → 0.4.0

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/organisms/jl-tab-bar.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-tab-bar.css?raw
+var jl_tab_bar_default = ":host {\n  display: block;\n  --height: 60px;\n}\n\nnav {\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  min-height: var(--height);\n  /* Clear of the home indicator on phones without a button. */\n  padding-bottom: env(safe-area-inset-bottom);\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n/* The items and the \"more\" button share the bar's columns. */\n.items {\n  display: contents;\n}\n\n.item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 0;\n  padding: 6px 2px;\n  border: none;\n  background: none;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1.4;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.item:hover {\n  color: var(--jl-text);\n}\n\n.item[aria-current=\"page\"] {\n  color: var(--jl-accent);\n}\n\n/* The ring goes round the icon's pill: round the whole column, it would touch the bar's edges. */\n.item:focus-visible {\n  box-shadow: none;\n}\n\n.icon {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  width: 52px;\n  height: 28px;\n  border-radius: var(--jl-radius-pill);\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.item:focus-visible .icon {\n  box-shadow: var(--jl-focus-ring);\n}\n\n/* The current item is told by a shape too, not by its colour alone. */\n.item[aria-current=\"page\"] .icon {\n  background: var(--jl-accent-soft);\n}\n\n.label {\n  max-width: 100%;\n  padding: 0 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  position: absolute;\n  top: -4px;\n  left: calc(50% + 4px);\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border: 2px solid var(--jl-surface);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 14px;\n  text-align: center;\n}\n";
+export { jl_tab_bar_default as default };

package/dist/organisms/jl-tab-bar.d.ts

@@ -0,0 +1,43 @@
+import { JlElement } from '../base/jl-element';
+import type { TabBarItem } from '../types/jl-tab-bar.types';
+/**
+ * The bar along the bottom of a phone, under the thumb: the three to five main places of an app, an icon over a
+ * label, one tap away. `value` is the current item. Items with an `href` are links; the others are buttons; both
+ * fire `select`. `more` adds a last button for everything else, which fires `more`: in a `jl-app-shell`, it opens
+ * the navigation drawer.
+ */
+export declare class JlTabBar extends JlElement {
+    static readonly selector = "jl-tab-bar";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+        more: undefined;
+    }>>;
+    readonly items: Readonly<Readonly<{
+        get(): TabBarItem[];
+        set(setter: TabBarItem[] | ((prevState: TabBarItem[]) => TabBarItem[])): void;
+    }>>;
+    /** The id of the current item. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The label of a last button for the other places (`More`); empty shows none. */
+    readonly more: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of the navigation for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private onClick;
+    private render;
+    private renderItem;
+    /** The current item says so: `aria-current="page"`, drawn in the accent. */
+    private renderCurrent;
+}

package/dist/organisms/jl-tab-bar.js

@@ -0,0 +1,123 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_tab_bar_default from "./jl-tab-bar.css_raw.js";
+import { css } from "@jadis/core";
+import { Ellipsis } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-tab-bar.tsx
+registerIcons({ ellipsis: Ellipsis });
+var ICON_SIZE = 22;
+var DEFAULT_LABEL = "Shortcuts";
+var MAX_COUNT = 99;
+var ITEM_SELECTOR = ".item";
+/** A JSON attribute that should hold a list of items; anything else gives none. */
+var parseItems = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+/** What the badge shows: counts are capped so they fit over the icon. */
+var badgeText = (badge) => {
+	if (typeof badge === "number") return badge > MAX_COUNT ? `${MAX_COUNT}+` : String(badge);
+	return badge ?? "";
+};
+/**
+* The bar along the bottom of a phone, under the thumb: the three to five main places of an app, an icon over a
+* label, one tap away. `value` is the current item. Items with an `href` are links; the others are buttons; both
+* fire `select`. `more` adds a last button for everything else, which fires `more`: in a `jl-app-shell`, it opens
+* the navigation drawer.
+*/
+var JlTabBar = class extends JlElement {
+	static selector = "jl-tab-bar";
+	events = this.useEvents();
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: parseItems
+	});
+	/** The id of the current item. */
+	value = this.useChange("", (value) => this.renderCurrent(value), { attribute: "value" });
+	/** The label of a last button for the other places (`More`); empty shows none. */
+	more = this.useChange("", (value) => {
+		this._refs.moreLabel.textContent = value;
+		this._refs.more.hidden = value === "";
+	}, { attribute: "more" });
+	/** The name of the navigation for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.nav.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		items: ref(".items"),
+		more: ref(".more"),
+		moreLabel: ref(".more .label"),
+		nav: ref("nav")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("nav", {
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("div", { class: "items" }), /* @__PURE__ */ jsxs("button", {
+				class: "item more",
+				type: "button",
+				hidden: true,
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "icon",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "ellipsis",
+						size: ICON_SIZE
+					})
+				}), /* @__PURE__ */ jsx("span", { class: "label" })]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_tab_bar_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.items, "click", (event) => this.onClick(event));
+		this.on(this._refs.more, "click", () => this.events.emit("more"));
+	}
+	onClick(event) {
+		const id = event.target.closest(ITEM_SELECTOR)?.dataset.id;
+		if (id === void 0) return;
+		this.value.set(id);
+		this.events.emit("select", id);
+	}
+	render() {
+		this._refs.items.replaceChildren(...this.items.get().map((item) => this.renderItem(item)));
+		this.renderCurrent(this.value.get());
+	}
+	renderItem(item) {
+		const badge = badgeText(item.badge);
+		const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			class: "icon",
+			children: [/* @__PURE__ */ jsx(JlIcon, {
+				name: item.icon,
+				size: ICON_SIZE
+			}), badge === "" ? null : /* @__PURE__ */ jsx("span", {
+				class: "badge",
+				children: badge
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			class: "label",
+			children: item.label
+		})] });
+		if (item.href === void 0) return /* @__PURE__ */ jsx("button", {
+			class: "item",
+			type: "button",
+			"data-id": item.id,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("a", {
+			class: "item",
+			href: item.href,
+			"data-id": item.id,
+			children: content
+		});
+	}
+	/** The current item says so: `aria-current="page"`, drawn in the accent. */
+	renderCurrent(value) {
+		for (const item of this._refs.items.querySelectorAll(ITEM_SELECTOR)) setOrRemove(item, "aria-current", item.dataset.id === value ? "page" : "");
+	}
+};
+JlTabBar.register();
+export { JlTabBar };

package/dist/templates/jl-app-shell.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-app-shell.css?raw
-var jl_app_shell_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  container: jl-app-shell / inline-size;\n  --header-height: 56px;\n  --drawer-width: min(300px, 86%);\n}\n\n.shell {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"top top top\" auto\n    \"nav main aside\" minmax(0, 1fr)\n    / auto minmax(0, 1fr) auto;\n  height: 100%;\n  overflow: hidden;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.top {\n  grid-area: top;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: var(--header-height);\n  padding: 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-header])) .top {\n  display: none;\n}\n\n::slotted([slot=\"header\"]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.menu {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-md);\n  height: var(--jl-control-md);\n  margin-left: -8px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.menu:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav {\n  grid-area: nav;\n  min-height: 0;\n  overflow-y: auto;\n  border-right: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.nav:focus-visible {\n  box-shadow: none;\n}\n\n:host(:not([has-nav])) .nav {\n  display: none;\n}\n\n.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.aside {\n  grid-area: aside;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-aside])) .aside {\n  display: none;\n}\n\n.scrim {\n  display: none;\n}\n\n/* Narrow: the sidebar slides over the content as a drawer, the menu button opens it, the panel steps aside. */\n@container jl-app-shell (width < 960px) {\n  .shell {\n    grid-template:\n      \"top\" auto\n      \"main\" minmax(0, 1fr)\n      / minmax(0, 1fr);\n  }\n\n  :host([has-nav]) .top {\n    display: flex;\n  }\n\n  :host([has-nav]) .menu {\n    display: inline-flex;\n  }\n\n  .nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    max-width: var(--drawer-width);\n    box-shadow: var(--jl-shadow-lg);\n    transform: translateX(-100%);\n    visibility: hidden;\n    transition:\n      transform var(--jl-slow) var(--jl-ease),\n      visibility 0s linear var(--jl-slow);\n  }\n\n  :host([nav-open]) .nav {\n    transform: none;\n    visibility: visible;\n    transition: transform var(--jl-slow) var(--jl-ease);\n  }\n\n  .scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: block;\n    background: var(--jl-scrim);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--jl-slow) var(--jl-ease);\n  }\n\n  :host([nav-open]) .scrim {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .aside {\n    display: none;\n  }\n}\n";
+var jl_app_shell_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  container: jl-app-shell / inline-size;\n  --header-height: 56px;\n  --drawer-width: min(300px, 86%);\n}\n\n.shell {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"top top top\" auto\n    \"nav main aside\" minmax(0, 1fr)\n    / auto minmax(0, 1fr) auto;\n  height: 100%;\n  overflow: hidden;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.top {\n  grid-area: top;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: var(--header-height);\n  padding: 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-header])) .top {\n  display: none;\n}\n\n::slotted([slot=\"header\"]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.menu {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-md);\n  height: var(--jl-control-md);\n  margin-left: -8px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.menu:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav {\n  grid-area: nav;\n  min-height: 0;\n  overflow-y: auto;\n  border-right: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.nav:focus-visible {\n  box-shadow: none;\n}\n\n:host(:not([has-nav])) .nav {\n  display: none;\n}\n\n/* Its own stacking context: what the page lifts with z-index (a sticky bar) stays under the drawer and its scrim. */\n.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  isolation: isolate;\n}\n\n.aside {\n  grid-area: aside;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-aside])) .aside {\n  display: none;\n}\n\n/* The bottom bar is for narrow screens: wide ones have the sidebar. */\n.tabs {\n  display: none;\n}\n\n.scrim {\n  display: none;\n}\n\n/* Narrow: the sidebar slides over the content as a drawer, the menu button opens it, the panel steps aside. */\n@container jl-app-shell (width < 960px) {\n  .shell {\n    grid-template:\n      \"top\" auto\n      \"main\" minmax(0, 1fr)\n      \"tabs\" auto\n      / minmax(0, 1fr);\n  }\n\n  :host([has-tabs]) .tabs {\n    display: block;\n    grid-area: tabs;\n  }\n\n  :host([has-nav]) .top {\n    display: flex;\n  }\n\n  :host([has-nav]) .menu {\n    display: inline-flex;\n  }\n\n  .nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    max-width: var(--drawer-width);\n    box-shadow: var(--jl-shadow-lg);\n    transform: translateX(-100%);\n    visibility: hidden;\n    transition:\n      transform var(--jl-slow) var(--jl-ease),\n      visibility 0s linear var(--jl-slow);\n  }\n\n  :host([nav-open]) .nav {\n    transform: none;\n    visibility: visible;\n    transition: transform var(--jl-slow) var(--jl-ease);\n  }\n\n  .scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: block;\n    background: var(--jl-scrim);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--jl-slow) var(--jl-ease);\n  }\n\n  :host([nav-open]) .scrim {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .aside {\n    display: none;\n  }\n}\n";
 export { jl_app_shell_default as default };

package/dist/templates/jl-app-shell.d.ts

@@ -2,7 +2,8 @@ import { JlElement } from '../base/jl-element';
 /**
  * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
  * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
- * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), and the panel hides.
+ * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
+ * a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
  * It takes the height of its container: give that one a height (`100dvh` for a whole page).
  */
 export declare class JlAppShell extends JlElement {
@@ -27,11 +28,16 @@ export declare class JlAppShell extends JlElement {
     /** Whether the shell is narrow: the menu button shows only then. */
     private isNarrow;
     private onMenu;
+    /** The tab bar's "more": the other places are in the drawer. */
+    private onMore;
     private onKey;
     /** The drawer as people open and close it: says so. */
     private setNavOpen;
     private renderNavOpen;
     private renderInert;
-    /** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+    /**
+     * What was slotted: empty areas take no room, a `select` from the nav (a side nav's) closes the drawer, and a
+     * `more` from the tabs (a tab bar's) opens it.
+     */
     private renderSlots;
 }

package/dist/templates/jl-app-shell.js

@@ -15,7 +15,8 @@ var followsLink = (event) => event.composedPath().some((node) => node instanceof
 /**
 * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
 * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
-* over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), and the panel hides.
+* over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
+* a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
 * It takes the height of its container: give that one a height (`100dvh` for a whole page).
 */
 var JlAppShell = class extends JlElement {
@@ -23,7 +24,10 @@ var JlAppShell = class extends JlElement {
 	events = this.useEvents();
 	/** Whether the drawer is open, on narrow screens; wide ones always show the sidebar. */
 	navOpen = this.useChange(false, (value) => this.renderNavOpen(value), { attribute: "nav-open" });
-	_state = { navListeners: new AbortController() };
+	_state = {
+		navListeners: new AbortController(),
+		tabsListeners: new AbortController()
+	};
 	_resize = new ResizeObserver(() => this.renderInert());
 	_refs = this.useRefs((ref) => ({
 		aside: ref(".aside"),
@@ -33,7 +37,9 @@ var JlAppShell = class extends JlElement {
 		menu: ref(".menu"),
 		nav: ref(".nav"),
 		navSlot: ref("slot[name=\"nav\"]"),
-		scrim: ref(".scrim")
+		scrim: ref(".scrim"),
+		tabs: ref(".tabs"),
+		tabsSlot: ref("slot[name=\"tabs\"]")
 	}));
 	/** Opens or closes the drawer; `force` sets the state instead of flipping it. */
 	toggleNav(force) {
@@ -76,6 +82,11 @@ var JlAppShell = class extends JlElement {
 					attrs: { part: "aside" },
 					children: /* @__PURE__ */ jsx("slot", { name: "aside" })
 				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "tabs",
+					attrs: { part: "tabs" },
+					children: /* @__PURE__ */ jsx("slot", { name: "tabs" })
+				}),
 				/* @__PURE__ */ jsx("div", { class: "scrim" })
 			]
 		});
@@ -95,12 +106,14 @@ var JlAppShell = class extends JlElement {
 		for (const slot of [
 			this._refs.headerSlot,
 			this._refs.navSlot,
-			this._refs.asideSlot
+			this._refs.asideSlot,
+			this._refs.tabsSlot
 		]) this.on(slot, "slotchange", () => this.renderSlots());
 	}
 	onDisconnect() {
 		this._resize.disconnect();
 		this._state.navListeners.abort();
+		this._state.tabsListeners.abort();
 	}
 	/** Whether the shell is narrow: the menu button shows only then. */
 	isNarrow() {
@@ -111,6 +124,11 @@ var JlAppShell = class extends JlElement {
 		this.setNavOpen(opening);
 		if (opening) this._refs.nav.focus();
 	}
+	/** The tab bar's "more": the other places are in the drawer. */
+	onMore() {
+		this.setNavOpen(true);
+		this._refs.nav.focus();
+	}
 	onKey(event) {
 		if (event.key !== "Escape" || !this.navOpen.get() || !this.isNarrow()) return;
 		event.preventDefault();
@@ -132,11 +150,20 @@ var JlAppShell = class extends JlElement {
 		const covered = this.navOpen.get() && this.isNarrow();
 		this._refs.main.inert = covered;
 		this._refs.aside.inert = covered;
+		this._refs.tabs.inert = covered;
 	}
-	/** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+	/**
+	* What was slotted: empty areas take no room, a `select` from the nav (a side nav's) closes the drawer, and a
+	* `more` from the tabs (a tab bar's) opens it.
+	*/
 	renderSlots() {
 		this.reflect("has-header", this._refs.headerSlot.assignedElements().length > 0);
 		this.reflect("has-aside", this._refs.asideSlot.assignedElements().length > 0);
+		const tabElements = this._refs.tabsSlot.assignedElements();
+		this.reflect("has-tabs", tabElements.length > 0);
+		this._state.tabsListeners.abort();
+		this._state.tabsListeners = new AbortController();
+		for (const element of tabElements) element.addEventListener("more", () => this.onMore(), { signal: this._state.tabsListeners.signal });
 		const navElements = this._refs.navSlot.assignedElements();
 		this.reflect("has-nav", navElements.length > 0);
 		this._state.navListeners.abort();

package/dist/types/jl-chip-group.types.d.ts

@@ -0,0 +1,10 @@
+/** One choice of a chip group. */
+export type ChipGroupOption = {
+    value: string;
+    label: string;
+    /** An icon name before the label; a chosen chip without one shows a check. */
+    icon?: string;
+    /** A count or a short word after the label: how many things the choice holds. */
+    badge?: string | number;
+    disabled?: boolean;
+};

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;
 };