@syware/jlib 0.2.0 → 0.4.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";
@@ -34,6 +34,7 @@ import { JlAvatarGroup } from "./molecules/jl-avatar-group.js";
 import { JlBreadcrumb } from "./molecules/jl-breadcrumb.js";
 import { JlCalendar } from "./molecules/jl-calendar.js";
 import { CARD_PADDINGS, JlCard } from "./molecules/jl-card.js";
+import { JlChipGroup } from "./molecules/jl-chip-group.js";
 import { JlCopyButton } from "./molecules/jl-copy-button.js";
 import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
 import { JlCombobox } from "./molecules/jl-combobox.js";
@@ -65,6 +66,7 @@ import { JlFlow } from "./organisms/jl-flow.js";
 import { JlNavbar } from "./organisms/jl-navbar.js";
 import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
+import { JlTabBar } from "./organisms/jl-tab-bar.js";
 import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
 import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js";
 import { JlTree } from "./organisms/jl-tree.js";
@@ -72,5 +74,5 @@ import { JlAppShell } from "./templates/jl-app-shell.js";
 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 };
+define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, 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, JlTabBar, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
+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, JlChipGroup, 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, JlTabBar, 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-button.css_raw.js

@@ -1,3 +1,3 @@
 // src/atoms/jl-button.css?raw
-var jl_button_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --height: var(--jl-control-md);\n  --pad: 14px;\n  --font-size: var(--jl-font-md);\n  --radius: var(--jl-radius-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 11px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 18px;\n  --font-size: 15px;\n  --radius: var(--jl-radius);\n}\n\n:host([block]) {\n  display: flex;\n}\n\nbutton {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: var(--height);\n  padding: 0 var(--pad);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n:host([icon-only]) button {\n  width: var(--height);\n  padding: 0;\n}\n\nbutton:hover {\n  background: var(--jl-surface-2);\n}\n\nbutton:active {\n  background: var(--jl-surface-3);\n}\n\n:host([variant=\"primary\"]) button {\n  border-color: transparent;\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n:host([variant=\"primary\"]) button:hover {\n  background: var(--jl-accent-strong);\n}\n\n:host([variant=\"ghost\"]) button {\n  border-color: transparent;\n  background: transparent;\n  color: var(--jl-accent);\n}\n\n:host([variant=\"ghost\"]) button:hover {\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"danger\"]) button {\n  border-color: transparent;\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n:host([variant=\"danger\"]) button:hover {\n  background: color-mix(in srgb, var(--jl-danger) 86%, var(--jl-text));\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
+var jl_button_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --height: var(--jl-control-md);\n  --pad: 14px;\n  --font-size: var(--jl-font-md);\n  --radius: var(--jl-radius-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 11px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 18px;\n  --font-size: 15px;\n  --radius: var(--jl-radius);\n}\n\n:host([block]) {\n  display: flex;\n}\n\n/* Moves between the button and the link: its children are laid out by whichever holds it. */\n.content {\n  display: contents;\n}\n\n.base {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: var(--height);\n  padding: 0 var(--pad);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n:host([icon-only]) .base {\n  width: var(--height);\n  padding: 0;\n}\n\n.base:hover {\n  background: var(--jl-surface-2);\n}\n\n.base:active {\n  background: var(--jl-surface-3);\n}\n\n:host([variant=\"primary\"]) .base {\n  border-color: transparent;\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n:host([variant=\"primary\"]) .base:hover {\n  background: var(--jl-accent-strong);\n}\n\n:host([variant=\"ghost\"]) .base {\n  border-color: transparent;\n  background: transparent;\n  color: var(--jl-accent);\n}\n\n:host([variant=\"ghost\"]) .base:hover {\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"danger\"]) .base {\n  border-color: transparent;\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n:host([variant=\"danger\"]) .base:hover {\n  background: color-mix(in srgb, var(--jl-danger) 86%, var(--jl-text));\n}\n\n:host([loading]) .base {\n  cursor: progress;\n}\n\n.base:disabled,\n.base[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
 export { jl_button_default as default };

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

@@ -6,6 +6,7 @@ export declare const BUTTON_TYPES: readonly ButtonType[];
 /**
  * A button. Its text is the `label` (or the slotted content); with only an `icon`, its `hint` names it.
  * Listen to `press`: it fires only while the button can be pressed. `type="submit"` submits the surrounding form.
+ * With an `href` it is a link that looks the same: it opens the address, and `press` still fires.
  */
 export declare class JlButton extends JlElement {
     static readonly selector = "jl-button";
@@ -56,12 +57,30 @@ export declare class JlButton extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** An address to open: the button becomes a link, for navigation that should open in a new tab when asked. */
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Where the link opens (`_blank` for a new tab), with an `href`. */
+    readonly target: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     private readonly _internals;
     private readonly _refs;
     focus(options?: FocusOptions): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
+    private canPress;
+    /** The element that takes focus and clicks: the link with an `href`, the button otherwise. */
+    private control;
+    /**
+     * Moves the content into the link or back into the button. A disabled link loses its address, so it can be
+     * neither followed nor focused, and says it is disabled.
+     */
+    private renderLink;
     private actOnForm;
     private renderIcon;
     private renderSize;

package/dist/atoms/jl-button.js

@@ -2,11 +2,12 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
 import jl_button_default from "./jl-button.css_raw.js";
 import { JlSpinner } from "./jl-spinner.js";
 import { css } from "@jadis/core";
-import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-button.tsx
 var BUTTON_VARIANTS = [
 	"secondary",
@@ -24,9 +25,13 @@ var ICON_SIZES = {
 	md: 16,
 	sm: 14
 };
+var NEW_TAB = "_blank";
+/** A page opened in a new tab gets no handle on this one. */
+var SAFE_REL = "noopener noreferrer";
 /**
 * A button. Its text is the `label` (or the slotted content); with only an `icon`, its `hint` names it.
 * Listen to `press`: it fires only while the button can be pressed. `type="submit"` submits the surrounding form.
+* With an `href` it is a link that looks the same: it opens the address, and `press` still fires.
 */
 var JlButton = class extends JlElement {
 	static selector = "jl-button";
@@ -49,6 +54,7 @@ var JlButton = class extends JlElement {
 	});
 	disabled = this.useChange(false, (value) => {
 		this._refs.button.disabled = value;
+		this.renderLink();
 		this.reflect("disabled", value);
 	}, { attribute: "disabled" });
 	/** Shows a spinner in place of the icon and ignores presses, while the work it started runs. */
@@ -56,42 +62,57 @@ var JlButton = class extends JlElement {
 		this._refs.spinner.hidden = !value;
 		this._refs.start.hidden = value || this.icon.get() === "";
 		this._refs.button.toggleAttribute("aria-busy", value);
+		this._refs.link.toggleAttribute("aria-busy", value);
 		this.reflect("loading", value);
 	}, { attribute: "loading" });
 	/** The tooltip; also the button's name for screen readers when it only has an icon. */
 	hint = this.useChange("", () => this.renderLabel(), { attribute: "hint" });
 	/** Takes the whole width of its container. */
 	block = this.useChange(false, (value) => this.reflect("block", value), { attribute: "block" });
+	/** An address to open: the button becomes a link, for navigation that should open in a new tab when asked. */
+	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
+	/** Where the link opens (`_blank` for a new tab), with an `href`. */
+	target = this.useChange("", () => this.renderLink(), { attribute: "target" });
 	_internals = this.attachInternals();
 	_refs = this.useRefs((ref) => ({
 		button: ref("button"),
+		content: ref(".content"),
 		end: ref(".end"),
 		label: ref(".text"),
+		link: ref("a"),
 		slot: ref("slot"),
 		spinner: ref("jl-spinner"),
 		start: ref(".start")
 	}));
 	focus(options) {
-		this._refs.button.focus(options);
+		this.control().focus(options);
 	}
 	templateHtml() {
-		return /* @__PURE__ */ jsxs("button", {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			class: "base",
 			type: "button",
 			attrs: { part: "base" },
-			children: [
-				/* @__PURE__ */ jsx(JlSpinner, { hidden: true }),
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "start",
-					hidden: true
-				}),
-				/* @__PURE__ */ jsx("span", { class: "text" }),
-				/* @__PURE__ */ jsx("slot", {}),
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "end",
-					hidden: true
-				})
-			]
-		});
+			children: /* @__PURE__ */ jsxs("span", {
+				class: "content",
+				children: [
+					/* @__PURE__ */ jsx(JlSpinner, { hidden: true }),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "start",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("span", { class: "text" }),
+					/* @__PURE__ */ jsx("slot", {}),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "end",
+						hidden: true
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("a", {
+			class: "base",
+			hidden: true,
+			attrs: { part: "base" }
+		})] });
 	}
 	templateCss() {
 		return css`${BASE_STYLES}${jl_button_default}`;
@@ -99,10 +120,43 @@ var JlButton = class extends JlElement {
 	onConnect() {
 		this.on(this._refs.slot, "slotchange", () => this.renderLabel());
 		this.on(this._refs.button, "click", () => {
-			if (this.disabled.get() || this.loading.get()) return;
+			if (!this.canPress()) return;
 			this.events.emit("press");
 			this.actOnForm();
 		});
+		this.on(this._refs.link, "click", (event) => {
+			if (!this.canPress()) {
+				event.preventDefault();
+				return;
+			}
+			this.events.emit("press");
+		});
+	}
+	canPress() {
+		return !(this.disabled.get() || this.loading.get());
+	}
+	/** The element that takes focus and clicks: the link with an `href`, the button otherwise. */
+	control() {
+		return this.href.get() === "" ? this._refs.button : this._refs.link;
+	}
+	/**
+	* Moves the content into the link or back into the button. A disabled link loses its address, so it can be
+	* neither followed nor focused, and says it is disabled.
+	*/
+	renderLink() {
+		const { button, content, link } = this._refs;
+		const href = this.href.get();
+		const isLink = href !== "";
+		const target = this.target.get();
+		const off = isLink && this.disabled.get();
+		this.control().append(content);
+		button.hidden = isLink;
+		link.hidden = !isLink;
+		setOrRemove(link, "href", isLink && !off ? href : "");
+		setOrRemove(link, "target", target);
+		setOrRemove(link, "rel", target === NEW_TAB ? SAFE_REL : "");
+		setOrRemove(link, "role", off ? "link" : "");
+		setOrRemove(link, "aria-disabled", off ? "true" : "");
 	}
 	actOnForm() {
 		const form = this._internals.form;
@@ -133,13 +187,11 @@ var JlButton = class extends JlElement {
 		const iconOnly = label === "" && !this.hasSlottedContent();
 		this._refs.label.textContent = label;
 		this._refs.label.hidden = label === "";
-		this._refs.button.title = hint;
 		this.reflect("icon-only", iconOnly);
-		if (iconOnly && hint !== "") {
-			this._refs.button.setAttribute("aria-label", hint);
-			return;
+		for (const control of [this._refs.button, this._refs.link]) {
+			setOrRemove(control, "title", hint);
+			setOrRemove(control, "aria-label", iconOnly ? hint : "");
 		}
-		this._refs.button.removeAttribute("aria-label");
 	}
 };
 JlButton.register();

package/dist/atoms/jl-chip.css_raw.js

@@ -1,3 +1,3 @@
 // src/atoms/jl-chip.css?raw
-var jl_chip_default = ":host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  --height: 28px;\n  --pad: 10px;\n  --font-size: var(--jl-font-sm);\n  --dismiss: 20px;\n}\n\n:host([size=\"sm\"]) {\n  --height: 24px;\n  --pad: 8px;\n  --font-size: var(--jl-font-xs);\n  --dismiss: 18px;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  height: var(--height);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.main {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--pad);\n  border-radius: inherit;\n}\n\n.label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.label:empty {\n  display: none;\n}\n\n:host([removable]) .main {\n  padding-right: 4px;\n}\n\n:host([selectable]) .main {\n  cursor: pointer;\n}\n\n:host([selectable]:not([disabled])) .chip:hover {\n  background: var(--jl-surface-2);\n}\n\n:host([selected]) .chip,\n:host([selected][selectable]:not([disabled])) .chip:hover {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n/* The ring goes around the whole chip, which the main part fills. */\n.main:focus-visible {\n  box-shadow: none;\n}\n\n.chip:has(.main:focus-visible) {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.dismiss {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--dismiss);\n  height: var(--dismiss);\n  margin-right: 3px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--jl-muted);\n  cursor: pointer;\n}\n\n.dismiss:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n:host([selected]) .dismiss {\n  color: var(--jl-accent);\n}\n\n:host([selected]) .dismiss:hover {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent-strong);\n}\n\n:host([disabled]) .chip {\n  opacity: 0.5;\n}\n\n:host([disabled]) .main,\n:host([disabled]) .dismiss {\n  cursor: not-allowed;\n}\n\n:host([disabled]) .dismiss:hover {\n  background: transparent;\n}\n";
+var jl_chip_default = ":host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  --height: 28px;\n  --pad: 10px;\n  --font-size: var(--jl-font-sm);\n  --dismiss: 20px;\n}\n\n:host([size=\"sm\"]) {\n  --height: 24px;\n  --pad: 8px;\n  --font-size: var(--jl-font-xs);\n  --dismiss: 18px;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  height: var(--height);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.main {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--pad);\n  border-radius: inherit;\n}\n\n/* A line box taller than the chip's own line-height of 1: the accents of É, Â, Ö stay inside what overflow clips. */\n.label {\n  overflow: hidden;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n}\n\n.label:empty {\n  display: none;\n}\n\n:host([removable]) .main {\n  padding-right: 4px;\n}\n\n:host([selectable]) .main {\n  cursor: pointer;\n}\n\n:host([selectable]:not([disabled])) .chip:hover {\n  background: var(--jl-surface-2);\n}\n\n:host([selected]) .chip,\n:host([selected][selectable]:not([disabled])) .chip:hover {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n/* The ring goes around the whole chip, which the main part fills. */\n.main:focus-visible {\n  box-shadow: none;\n}\n\n.chip:has(.main:focus-visible) {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.dismiss {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--dismiss);\n  height: var(--dismiss);\n  margin-right: 3px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--jl-muted);\n  cursor: pointer;\n}\n\n.dismiss:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n:host([selected]) .dismiss {\n  color: var(--jl-accent);\n}\n\n:host([selected]) .dismiss:hover {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent-strong);\n}\n\n:host([disabled]) .chip {\n  opacity: 0.5;\n}\n\n:host([disabled]) .main,\n:host([disabled]) .dismiss {\n  cursor: not-allowed;\n}\n\n:host([disabled]) .dismiss:hover {\n  background: transparent;\n}\n";
 export { jl_chip_default as default };

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;
@@ -33,6 +34,11 @@ export declare class JlInput extends JlFormControl {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The keyboard a phone shows for the field (`numeric`, `decimal`, `tel`…), as a native input's `inputmode`. */
+    readonly inputmode: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     readonly min: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;

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.
@@ -49,6 +50,8 @@ var JlInput = class extends JlFormControl {
 	/** The field's name for screen readers, when no visible label names it. */
 	label = this.useChange("", (value) => this.setNative("aria-label", value), { attribute: "label" });
 	autocomplete = this.useChange("", (value) => this.setNative("autocomplete", value), { attribute: "autocomplete" });
+	/** The keyboard a phone shows for the field (`numeric`, `decimal`, `tel`…), as a native input's `inputmode`. */
+	inputmode = this.useChange("", (value) => this.setNative("inputmode", value), { attribute: "inputmode" });
 	min = this.useChange("", (value) => this.setNative("min", value), { attribute: "min" });
 	max = this.useChange("", (value) => this.setNative("max", value), { attribute: "max" });
 	step = this.useChange("", (value) => this.setNative("step", value), { attribute: "step" });
@@ -137,6 +140,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';
@@ -19,6 +19,7 @@ export type * from './types/jl-avatar.types';
 export type * from './types/jl-breadcrumb.types';
 export type * from './types/jl-button.types';
 export type * from './types/jl-card.types';
+export type * from './types/jl-chip-group.types';
 export type * from './types/jl-chip.types';
 export type * from './types/jl-combobox.types';
 export type * from './types/jl-command-palette.types';
@@ -44,6 +45,7 @@ export type * from './types/jl-split-view.types';
 export type * from './types/jl-stat.types';
 export type * from './types/jl-steps.types';
 export type * from './types/jl-switch.types';
+export type * from './types/jl-tab-bar.types';
 export type * from './types/jl-table.types';
 export type * from './types/jl-tabs.types';
 export type * from './types/jl-timeline.types';
@@ -83,6 +85,7 @@ export * from './molecules/jl-avatar-group';
 export * from './molecules/jl-breadcrumb';
 export * from './molecules/jl-calendar';
 export * from './molecules/jl-card';
+export * from './molecules/jl-chip-group';
 export * from './molecules/jl-code-block';
 export * from './molecules/jl-combobox';
 export * from './molecules/jl-copy-button';
@@ -114,6 +117,7 @@ export * from './organisms/jl-flow';
 export * from './organisms/jl-navbar';
 export * from './organisms/jl-page-header';
 export * from './organisms/jl-side-nav';
+export * from './organisms/jl-tab-bar';
 export * from './organisms/jl-table';
 export * from './organisms/jl-toaster';
 export * from './organisms/jl-tree';

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";
@@ -34,6 +34,7 @@ import { JlAvatarGroup } from "./molecules/jl-avatar-group.js";
 import { JlBreadcrumb } from "./molecules/jl-breadcrumb.js";
 import { JlCalendar } from "./molecules/jl-calendar.js";
 import { CARD_PADDINGS, JlCard } from "./molecules/jl-card.js";
+import { JlChipGroup } from "./molecules/jl-chip-group.js";
 import { JlCopyButton } from "./molecules/jl-copy-button.js";
 import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
 import { JlCombobox } from "./molecules/jl-combobox.js";
@@ -65,9 +66,10 @@ import { JlFlow } from "./organisms/jl-flow.js";
 import { JlNavbar } from "./organisms/jl-navbar.js";
 import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
+import { JlTabBar } from "./organisms/jl-tab-bar.js";
 import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
 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, JlChipGroup, 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, JlTabBar, 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/attributes.d.ts

@@ -7,3 +7,8 @@ export declare const oneOf: <Value extends string>(allowed: readonly Value[], fa
 export declare const jsonOf: <Value>(fallback: Value) => (value: string | null) => Value;
 /** A number attribute kept within bounds; a missing or unreadable one gives the fallback. */
 export declare const clampedNumber: (fallback: number, min: number, max: number) => (value: string | null) => number;
+/**
+ * An attribute holding a list of strings, as HTML writes it: a JSON list (`'["a","b"]'`), or one plain value
+ * (`open`) for the common case of a single one. Empty or unreadable gives an empty list.
+ */
+export declare const stringList: (value: string | null) => string[];

package/dist/lib/attributes.js

@@ -19,4 +19,16 @@ var clampedNumber = (fallback, min, max) => (value) => {
 	if (Number.isNaN(parsed)) return fallback;
 	return Math.min(max, Math.max(min, parsed));
 };
-export { clampedNumber, jsonOf, oneOf };
+var LIST_START = "[";
+/**
+* An attribute holding a list of strings, as HTML writes it: a JSON list (`'["a","b"]'`), or one plain value
+* (`open`) for the common case of a single one. Empty or unreadable gives an empty list.
+*/
+var stringList = (value) => {
+	const text = value?.trim() ?? "";
+	if (text === "") return [];
+	if (!text.startsWith(LIST_START)) return [text];
+	const parsed = jsonOf([])(text);
+	return Array.isArray(parsed) ? parsed.map(String) : [];
+};
+export { clampedNumber, jsonOf, oneOf, stringList };

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;