@syware/jlib 0.3.0 → 0.5.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-load-state.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-load-state.css?raw
+var jl_load_state_default = ":host {\n  display: block;\n}\n\n.bones {\n  display: grid;\n  gap: 16px;\n  padding: 16px;\n}\n\n.bones.lines {\n  gap: 10px;\n}\n\n.bones.cards {\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 12px;\n  padding: 0;\n}\n\n.bone-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.bone-lines {\n  display: grid;\n  flex: 1;\n  gap: 6px;\n}\n\n.bone-card {\n  display: grid;\n  gap: 8px;\n  padding: 12px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n}\n";
+export { jl_load_state_default as default };

package/dist/molecules/jl-load-state.d.ts

@@ -0,0 +1,61 @@
+import { JlElement } from '../base/jl-element';
+import type { LoadSkeleton, LoadState, LoadTask } from '../types/jl-load-state.types';
+export declare const LOAD_STATES: readonly LoadState[];
+export declare const LOAD_SKELETONS: readonly LoadSkeleton[];
+/**
+ * What a list or a page shows while its data comes: nothing for a moment, then a skeleton shaped like it; then the
+ * data (the default slot), what to say when there is none (slot `empty`, a `jl-empty`), or, when it failed, what
+ * failed and Try again. `load()` fetches, draws and moves between the states; a later `load()` keeps what is shown
+ * until the new data is there, so live updates do not flash. Or set `state` yourself.
+ */
+export declare class JlLoadState extends JlElement {
+    static readonly selector = "jl-load-state";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        retry: undefined;
+    }>>;
+    readonly state: Readonly<Readonly<{
+        get(): LoadState;
+        set(setter: ((prevState: LoadState) => LoadState) | LoadState): void;
+    }>>;
+    /** The shape of the skeleton; slot `loading` takes one of the page's own instead. */
+    readonly skeleton: Readonly<Readonly<{
+        get(): LoadSkeleton;
+        set(setter: ((prevState: LoadSkeleton) => LoadSkeleton) | LoadSkeleton): void;
+    }>>;
+    /** How many rows, cards or lines the skeleton has. */
+    readonly count: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Milliseconds before the skeleton shows. */
+    readonly delay: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly errorHeading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly errorText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly retryLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _work;
+    private readonly _refs;
+    /**
+     * Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
+     * (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
+     * worked: a refresh that fails says so only here, for the page to tell people.
+     */
+    load<Value>(task: LoadTask<Value>): Promise<boolean>;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    private renderState;
+    private renderSkeleton;
+}

package/dist/molecules/jl-load-state.js

@@ -0,0 +1,200 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { define } from "../lib/define.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { JlSkeleton } from "../atoms/jl-skeleton.js";
+import { JlEmpty } from "./jl-empty.js";
+import jl_load_state_default from "./jl-load-state.css_raw.js";
+import { css } from "@jadis/core";
+import { CircleAlert, RefreshCw } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-load-state.tsx
+registerIcons({
+	"circle-alert": CircleAlert,
+	refresh: RefreshCw
+});
+define(JlEmpty);
+var LOAD_STATES = [
+	"loading",
+	"ready",
+	"empty",
+	"error"
+];
+var LOAD_SKELETONS = [
+	"rows",
+	"cards",
+	"lines"
+];
+var DEFAULT_ERROR_HEADING = "This could not be loaded";
+var DEFAULT_ERROR_TEXT = "Check the connection, then try again. Nothing was changed.";
+var DEFAULT_RETRY_LABEL = "Try again";
+var DEFAULT_DELAY_MS = 300;
+var MAX_DELAY_MS = 5e3;
+var DEFAULT_COUNT = 3;
+var MAX_COUNT = 24;
+var LINE_WIDTHS = [
+	"100%",
+	"92%",
+	"96%",
+	"70%"
+];
+/** The skeleton of each shape, `count` times. */
+var SKELETONS = {
+	cards: (count) => Array.from({ length: count }, () => /* @__PURE__ */ jsxs("div", {
+		class: "bone-card",
+		children: [
+			/* @__PURE__ */ jsx(JlSkeleton, {
+				shape: "rect",
+				height: "120px"
+			}),
+			/* @__PURE__ */ jsx(JlSkeleton, { width: "70%" }),
+			/* @__PURE__ */ jsx(JlSkeleton, { width: "45%" })
+		]
+	})),
+	lines: (count) => Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(JlSkeleton, { width: LINE_WIDTHS[index % LINE_WIDTHS.length] })),
+	rows: (count) => Array.from({ length: count }, () => /* @__PURE__ */ jsxs("div", {
+		class: "bone-row",
+		children: [/* @__PURE__ */ jsx(JlSkeleton, {
+			shape: "circle",
+			width: "32px",
+			height: "32px"
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "bone-lines",
+			children: [/* @__PURE__ */ jsx(JlSkeleton, { width: "60%" }), /* @__PURE__ */ jsx(JlSkeleton, { width: "35%" })]
+		})]
+	}))
+};
+/**
+* What a list or a page shows while its data comes: nothing for a moment, then a skeleton shaped like it; then the
+* data (the default slot), what to say when there is none (slot `empty`, a `jl-empty`), or, when it failed, what
+* failed and Try again. `load()` fetches, draws and moves between the states; a later `load()` keeps what is shown
+* until the new data is there, so live updates do not flash. Or set `state` yourself.
+*/
+var JlLoadState = class extends JlElement {
+	static selector = "jl-load-state";
+	events = this.useEvents();
+	state = this.useChange("loading", (value) => this.renderState(value), {
+		attribute: "state",
+		parse: oneOf(LOAD_STATES, "loading")
+	});
+	/** The shape of the skeleton; slot `loading` takes one of the page's own instead. */
+	skeleton = this.useChange("rows", () => this.renderSkeleton(), {
+		attribute: "skeleton",
+		parse: oneOf(LOAD_SKELETONS, "rows")
+	});
+	/** How many rows, cards or lines the skeleton has. */
+	count = this.useChange(DEFAULT_COUNT, () => this.renderSkeleton(), {
+		attribute: "count",
+		parse: clampedNumber(DEFAULT_COUNT, 1, MAX_COUNT)
+	});
+	/** Milliseconds before the skeleton shows. */
+	delay = this.useChange(DEFAULT_DELAY_MS, () => void 0, {
+		attribute: "delay",
+		parse: clampedNumber(DEFAULT_DELAY_MS, 0, MAX_DELAY_MS)
+	});
+	errorHeading = this.useChange(DEFAULT_ERROR_HEADING, (value) => this._refs.error.heading.set(value), { attribute: "error-heading" });
+	errorText = this.useChange(DEFAULT_ERROR_TEXT, (value) => this._refs.error.description.set(value), { attribute: "error-text" });
+	retryLabel = this.useChange(DEFAULT_RETRY_LABEL, (value) => this._refs.retry.label.set(value), { attribute: "retry-label" });
+	_work = {};
+	_refs = this.useRefs((ref) => ({
+		bones: ref(".bones"),
+		content: ref(".content"),
+		empty: ref(".empty"),
+		error: ref("jl-empty"),
+		loading: ref(".loading"),
+		retry: ref(".retry")
+	}));
+	/**
+	* Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
+	* (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
+	* worked: a refresh that fails says so only here, for the page to tell people.
+	*/
+	async load(task) {
+		this._work.retry = () => this.load(task);
+		const showing = this.state.get() === "ready" || this.state.get() === "empty";
+		if (!showing) this.state.set("loading");
+		try {
+			const value = await task.fetch();
+			task.draw(value);
+			this.state.set(task.isEmpty?.(value) === true ? "empty" : "ready");
+			return true;
+		} catch {
+			if (!showing) this.state.set("error");
+			return false;
+		}
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "load-state",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					class: "loading",
+					hidden: true,
+					"aria-busy": "true",
+					children: /* @__PURE__ */ jsx("slot", {
+						name: "loading",
+						children: /* @__PURE__ */ jsx("div", { class: "bones" })
+					})
+				}),
+				/* @__PURE__ */ jsx("jl-empty", {
+					class: "error",
+					icon: "circle-alert",
+					heading: DEFAULT_ERROR_HEADING,
+					description: DEFAULT_ERROR_TEXT,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlButton, {
+						class: "retry",
+						icon: "refresh",
+						label: DEFAULT_RETRY_LABEL
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "empty",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "empty" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "content",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", {})
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_load_state_default}`;
+	}
+	onConnect() {
+		this.renderSkeleton();
+		this.renderState(this.state.get());
+		this._refs.retry.events.register("press", () => {
+			this.events.emit("retry");
+			this._work.retry?.();
+		});
+	}
+	onDisconnect() {
+		clearTimeout(this._work.timer);
+	}
+	renderState(state) {
+		const refs = this._refs;
+		clearTimeout(this._work.timer);
+		refs.loading.hidden = true;
+		refs.error.hidden = state !== "error";
+		refs.empty.hidden = state !== "empty";
+		refs.content.hidden = state !== "ready";
+		this.reflect("state", state);
+		if (state === "loading") this._work.timer = setTimeout(() => {
+			refs.loading.hidden = false;
+		}, this.delay.get());
+	}
+	renderSkeleton() {
+		const kind = this.skeleton.get();
+		this._refs.bones.className = `bones ${kind}`;
+		this._refs.bones.replaceChildren(...SKELETONS[kind](this.count.get()));
+	}
+};
+JlLoadState.register();
+export { JlLoadState, LOAD_SKELETONS, LOAD_STATES };

package/dist/molecules/jl-search-button.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-search-button.css?raw
+var jl_search_button_default = ":host {\n  display: block;\n}\n\n.search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: var(--jl-control-sm);\n  padding: 0 6px 0 10px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  cursor: pointer;\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n.search:hover {\n  border-color: var(--jl-line-strong);\n  color: var(--jl-text-2);\n}\n\n.text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Folded: the icon alone, as square as a control. */\n:host([compact]) {\n  display: inline-block;\n}\n\n:host([compact]) .search {\n  justify-content: center;\n  width: var(--jl-control-sm);\n  padding: 0;\n}\n\n:host([compact]) .text,\n:host([compact]) jl-kbd {\n  display: none;\n}\n\n/* Touch screens have no keys to press. */\n@media (pointer: coarse) {\n  jl-kbd {\n    display: none;\n  }\n}\n";
+export { jl_search_button_default as default };

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

@@ -0,0 +1,34 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * What opens an app's command palette: it looks like a search field, with the palette's keys (Ctrl K, ⌘K on a
+ * Mac). `compact` keeps the icon alone, for a folded side nav or a phone's top bar. Listen to `press`; the keys are
+ * the palette's own (`jl-command-palette` listens to them), the button only shows them.
+ */
+export declare class JlSearchButton extends JlElement {
+    static readonly selector = "jl-search-button";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: undefined;
+    }>>;
+    /** The text, and the button's name: "Search". */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The keys that open the palette, as `jl-kbd` writes them: `mod+k`; `none` for no keys. */
+    readonly hotkey: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The icon alone, the label as its tooltip. */
+    readonly compact: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderLabel;
+    private renderHotkey;
+}

package/dist/molecules/jl-search-button.js

@@ -0,0 +1,80 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { JlKbd } from "../atoms/jl-kbd.js";
+import { parseShortcut, shortcutAria } from "../lib/key-shortcut.js";
+import jl_search_button_default from "./jl-search-button.css_raw.js";
+import { css } from "@jadis/core";
+import { Search } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-search-button.tsx
+registerIcons({ search: Search });
+var DEFAULT_LABEL = "Search";
+var DEFAULT_HOTKEY = "mod+k";
+var NO_HOTKEY = "none";
+var ICON_SIZE = 15;
+var MAC_PATTERN = /Mac|iPhone|iPad|iPod/;
+var isMac = () => MAC_PATTERN.test(navigator.userAgent);
+/**
+* What opens an app's command palette: it looks like a search field, with the palette's keys (Ctrl K, ⌘K on a
+* Mac). `compact` keeps the icon alone, for a folded side nav or a phone's top bar. Listen to `press`; the keys are
+* the palette's own (`jl-command-palette` listens to them), the button only shows them.
+*/
+var JlSearchButton = class extends JlElement {
+	static selector = "jl-search-button";
+	events = this.useEvents();
+	/** The text, and the button's name: "Search". */
+	label = this.useChange(DEFAULT_LABEL, () => this.renderLabel(), { attribute: "label" });
+	/** The keys that open the palette, as `jl-kbd` writes them: `mod+k`; `none` for no keys. */
+	hotkey = this.useChange(DEFAULT_HOTKEY, () => this.renderHotkey(), { attribute: "hotkey" });
+	/** The icon alone, the label as its tooltip. */
+	compact = this.useChange(false, (value) => this.reflect("compact", value), { attribute: "compact" });
+	_refs = this.useRefs((ref) => ({
+		button: ref("button"),
+		keys: ref("jl-kbd"),
+		text: ref(".text")
+	}));
+	focus(options) {
+		this._refs.button.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			class: "search",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					name: "search",
+					size: ICON_SIZE
+				}),
+				/* @__PURE__ */ jsx("span", { class: "text" }),
+				/* @__PURE__ */ jsx(JlKbd, {})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_search_button_default}`;
+	}
+	onConnect() {
+		this.renderLabel();
+		this.renderHotkey();
+		this.on(this._refs.button, "click", () => this.events.emit("press"));
+	}
+	renderLabel() {
+		const label = this.label.get() || DEFAULT_LABEL;
+		this._refs.text.textContent = label;
+		this._refs.button.setAttribute("aria-label", label);
+		this._refs.button.title = label;
+	}
+	renderHotkey() {
+		const text = this.hotkey.get();
+		const shortcut = text === NO_HOTKEY ? null : parseShortcut(text);
+		this._refs.keys.keys.set(shortcut === null ? "" : text);
+		this._refs.keys.hidden = shortcut === null;
+		setOrRemove(this._refs.button, "aria-keyshortcuts", shortcut === null ? "" : shortcutAria(shortcut, isMac()));
+	}
+};
+JlSearchButton.register();
+export { JlSearchButton };

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-confirm.d.ts

@@ -1,5 +1,5 @@
 import { JlElement } from '../base/jl-element';
-import type { ConfirmOptions, ConfirmTone } from '../types/jl-confirm.types';
+import type { ConfirmOptions, ConfirmTone, LeaveGuardOptions } from '../types/jl-confirm.types';
 export declare const CONFIRM_TONES: readonly ConfirmTone[];
 /**
  * A yes-or-no question in a small modal dialog. `ask()` opens it and resolves `true` on confirm, `false` on cancel,
@@ -54,3 +54,9 @@ export declare class JlConfirm extends JlElement {
  * ```
  */
 export declare function confirmDialog(options: ConfirmOptions): Promise<boolean>;
+/**
+ * Guards a form or an editor against leaving with changes not saved. Closing or reloading the tab asks the
+ * browser's own question; the function it returns asks in the page, for the app's router to call before it moves
+ * on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost.
+ */
+export declare function guardLeave(options: LeaveGuardOptions): () => Promise<boolean>;