@syware/jlib 0.6.0 → 0.7.0

package/dist/organisms/jl-side-nav.js

@@ -2,19 +2,28 @@ 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 { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlButton } from "../atoms/jl-button.js";
 import { findItem, firstLeaf, pathInSections } from "../lib/nav-tree.js";
 import jl_side_nav_default from "./jl-side-nav.css_raw.js";
 import { css } from "@jadis/core";
-import { ChevronRight } from "lucide";
+import { ChevronRight, PanelLeftClose, PanelLeftOpen } from "lucide";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/organisms/jl-side-nav.tsx
-registerIcons({ "chevron-right": ChevronRight });
+registerIcons({
+	"chevron-right": ChevronRight,
+	"panel-left-close": PanelLeftClose,
+	"panel-left-open": PanelLeftOpen
+});
 var ICON_SIZE = 16;
 var CHEVRON_SIZE = 14;
-var DEFAULT_LABEL = "Main";
+var COLLAPSE_ICON = "panel-left-close";
+var EXPAND_ICON = "panel-left-open";
 var ROW_SELECTOR = ".item";
+var NEW_TAB = "_blank";
+var SAFE_REL = "noopener noreferrer";
 /** A JSON attribute that should hold a list of sections; anything else gives none. */
 var parseSections = (value) => {
 	const parsed = jsonOf([])(value);
@@ -26,10 +35,12 @@ var isReachable = (row) => row.closest("[hidden]") === null && row.offsetParent
 /**
 * The navigation of an app, down its side: sections of items with icons, badges and nested items that open with
 * a chevron. `value` is the active item (its parents open to show it); `collapsed` makes it a rail of icons, with
-* the labels as tooltips. Items with an `href` are links; the others fire `select`.
+* the labels as tooltips, and `collapsible` lets people fold and unfold it with a button at its bottom. Items with
+* an `href` are links; the others fire `select`.
 */
 var JlSideNav = class extends JlElement {
 	static selector = "jl-side-nav";
+	/** `collapse`: people folded the side nav into its rail (true) or unfolded it (false), for the app to remember. */
 	events = this.useEvents();
 	sections = this.useChange([], () => this.render(), {
 		attribute: "sections",
@@ -40,16 +51,28 @@ var JlSideNav = class extends JlElement {
 	/** Shows only the icons, in a narrow rail; the labels become tooltips. */
 	collapsed = this.useChange(false, (value) => {
 		this.reflect("collapsed", value);
-		this.render();
+		this.renderRail();
 	}, { attribute: "collapsed" });
+	/** Adds a button at the bottom that folds the side nav into its rail and unfolds it. */
+	collapsible = this.useChange(false, () => this.renderFold(), { attribute: "collapsible" });
+	/** The fold button's text while the side nav is open. */
+	collapseLabel = this.useChange(jlText("collapseMenu"), () => this.renderFold(), { attribute: "collapse-label" });
+	/** Its hint while the side nav is a rail. */
+	expandLabel = this.useChange(jlText("expandMenu"), () => this.renderFold(), { attribute: "expand-label" });
+	/**
+	* Set by `jl-app-shell` while the side nav is its drawer, on a narrow screen: the drawer shows it whole, and its
+	* fold button hides, `collapsed` waiting for a wide screen again.
+	*/
+	inDrawer = this.useChange(false, () => this.renderRail(), { attribute: "in-drawer" });
 	/** The name of the navigation for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.nav.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	label = this.useChange(jlText("mainNavigation"), (value) => {
+		this._refs.nav.setAttribute("aria-label", value === "" ? jlText("mainNavigation") : value);
 	}, { attribute: "label" });
 	_prefix = uniqueId("jl-side-nav");
 	/** The parents people opened, or that hold the active item. */
 	_state = { open: /* @__PURE__ */ new Set() };
 	_refs = this.useRefs((ref) => ({
+		fold: ref(JlButton),
 		nav: ref("nav"),
 		sections: ref(".sections")
 	}));
@@ -59,7 +82,15 @@ var JlSideNav = class extends JlElement {
 			children: [
 				/* @__PURE__ */ jsx("slot", { name: "header" }),
 				/* @__PURE__ */ jsx("div", { class: "sections" }),
-				/* @__PURE__ */ jsx("slot", { name: "footer" })
+				/* @__PURE__ */ jsxs("div", {
+					class: "bottom",
+					children: [/* @__PURE__ */ jsx("slot", { name: "footer" }), /* @__PURE__ */ jsx(JlButton, {
+						class: "fold",
+						variant: "ghost",
+						size: "sm",
+						hidden: true
+					})]
+				})
 			]
 		});
 	}
@@ -67,6 +98,7 @@ var JlSideNav = class extends JlElement {
 		return css`${BASE_STYLES}${jl_side_nav_default}`;
 	}
 	onConnect() {
+		this._refs.fold.events.register("press", () => this.fold());
 		this.on(this._refs.sections, "click", (event) => this.onClick(event));
 		this.on(this._refs.sections, "keydown", (event) => this.onKey(event));
 	}
@@ -86,12 +118,35 @@ var JlSideNav = class extends JlElement {
 		const row = target.closest(ROW_SELECTOR);
 		const item = findItem(this.sections.get(), row?.dataset.id ?? "");
 		if (item === null) return;
-		if (hasChildren(item) && item.href === void 0 && !this.collapsed.get()) {
+		if (hasChildren(item) && item.href === void 0 && !this.isRail()) {
 			this.toggleItem(item.id);
 			return;
 		}
 		this.choose(row?.dataset.target ?? item.id);
 	}
+	/** Whether it shows as the rail now: folded, and not in a drawer. */
+	isRail() {
+		return this.collapsed.get() && !this.inDrawer.get();
+	}
+	fold() {
+		const collapsed = !this.collapsed.get();
+		this.collapsed.set(collapsed);
+		this.events.emit("collapse", collapsed);
+	}
+	/** The rail, or the whole side nav: drawn again, said on the host (`rail`) for the styles and the page. */
+	renderRail() {
+		this.reflect("rail", this.isRail());
+		this.render();
+		this.renderFold();
+	}
+	renderFold() {
+		const fold = this._refs.fold;
+		const rail = this.isRail();
+		fold.hidden = !this.collapsible.get() || this.inDrawer.get();
+		fold.icon.set(rail ? EXPAND_ICON : COLLAPSE_ICON);
+		fold.label.set(rail ? "" : this.collapseLabel.get());
+		fold.hint.set(rail ? this.expandLabel.get() : "");
+	}
 	choose(id) {
 		this.value.set(id);
 		this.events.emit("select", id);
@@ -117,7 +172,7 @@ var JlSideNav = class extends JlElement {
 		}
 	}
 	openOrGoDown(id, row) {
-		if (row.dataset.parent === void 0 || this.collapsed.get()) return;
+		if (row.dataset.parent === void 0 || this.isRail()) return;
 		if (!this._state.open.has(id)) {
 			this.toggleItem(id, true);
 			return;
@@ -161,7 +216,7 @@ var JlSideNav = class extends JlElement {
 			class: "entry",
 			children: [
 				this.rowNode(item, depth, childrenId),
-				parent && item.href !== void 0 && !this.collapsed.get() ? /* @__PURE__ */ jsx("button", {
+				parent && item.href !== void 0 && !this.isRail() ? /* @__PURE__ */ jsx("button", {
 					class: "expander",
 					type: "button",
 					"data-id": item.id,
@@ -187,7 +242,7 @@ var JlSideNav = class extends JlElement {
 	* leaf, since its children cannot show there.
 	*/
 	rowNode(item, depth, childrenId) {
-		const collapsed = this.collapsed.get();
+		const collapsed = this.isRail();
 		const parent = hasChildren(item);
 		const target = collapsed ? firstLeaf(item) : item;
 		const toggles = parent && item.href === void 0 && !collapsed;
@@ -202,6 +257,8 @@ var JlSideNav = class extends JlElement {
 		};
 		if (target.href !== void 0) return /* @__PURE__ */ jsx("a", {
 			href: target.href,
+			target: target.target,
+			rel: target.target === NEW_TAB ? SAFE_REL : void 0,
 			...attributes,
 			children: content
 		});
@@ -259,7 +316,7 @@ var JlSideNav = class extends JlElement {
 		if (opened.length > 0) this.renderOpen();
 		for (const row of this._refs.sections.querySelectorAll(ROW_SELECTOR)) {
 			const id = row.dataset.id ?? "";
-			const active = id === value || this.collapsed.get() && row.dataset.target === value;
+			const active = id === value || this.isRail() && row.dataset.target === value;
 			setOrRemove(row, "aria-current", active ? "page" : "");
 			row.classList.toggle("holds-active", !active && path.includes(id));
 		}

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

@@ -2,6 +2,7 @@ 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 { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import jl_tab_bar_default from "./jl-tab-bar.css_raw.js";
@@ -11,7 +12,6 @@ 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. */
@@ -45,7 +45,7 @@ var JlTabBar = class extends JlElement {
 		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" });
+	label = this.useChange(jlText("shortcuts"), (value) => this._refs.nav.setAttribute("aria-label", value === "" ? jlText("shortcuts") : value), { attribute: "label" });
 	_refs = this.useRefs((ref) => ({
 		items: ref(".items"),
 		more: ref(".more"),

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

@@ -1,3 +1,3 @@
 // src/organisms/jl-table.css?raw
-var jl_table_default = ":host {\n  display: block;\n  /* The table scrolls sideways inside its frame: its width never pushes the page, or a grid around it, wider. */\n  contain: inline-size;\n  --max-height: none;\n  --cell-y: 10px;\n  --cell-x: 14px;\n}\n\n:host([dense]) {\n  --cell-y: 6px;\n  --cell-x: 12px;\n}\n\n.scroll {\n  max-height: var(--max-height);\n  overflow: auto;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n  overscroll-behavior-x: contain;\n}\n\ntable {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n}\n\nth,\ntd {\n  padding: var(--cell-y) var(--cell-x);\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\nth {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  text-align: left;\n}\n\ntd {\n  border-top: 1px solid var(--jl-line-soft);\n}\n\ntbody tr:first-child td {\n  border-top: none;\n}\n\ntbody tr.empty td {\n  padding: 40px var(--cell-x);\n  color: var(--jl-muted);\n  text-align: center;\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin: -2px -4px;\n  padding: 2px 4px;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n\n.sort:hover {\n  color: var(--jl-text);\n}\n\n.sort-icon {\n  color: var(--jl-faint);\n}\n\nth[data-sorted] {\n  color: var(--jl-text);\n}\n\nth[data-sorted] .sort-icon {\n  color: var(--jl-accent);\n}\n\n/* Selected rows keep their shade: the hover and the stripes leave them alone. */\ntbody tr[data-selected] td {\n  background: var(--jl-accent-soft);\n}\n\ntbody tr:not(.empty, .skeleton, [data-selected]):hover td {\n  background: var(--jl-surface-2);\n}\n\n:host([striped]) tbody tr:nth-child(even):not(.empty, [data-selected]) td {\n  background: var(--jl-surface-2);\n}\n\n:host([striped]) tbody tr:not(.empty, .skeleton, [data-selected]):hover td {\n  background: var(--jl-surface-3);\n}\n\n.format-number {\n  font-variant-numeric: tabular-nums;\n}\n\n.format-date {\n  color: var(--jl-text-2);\n  font-variant-numeric: tabular-nums;\n}\n\ncode {\n  padding: 2px 6px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-code-bg);\n  font-size: var(--jl-font-xs);\n}\n\n.select-cell {\n  width: 44px;\n  padding-right: 0;\n  line-height: 0;\n}\n\n/* The checkbox: the native input keeps the keyboard and the states, the mark beside it draws the tick. */\n.check {\n  position: relative;\n  display: inline-flex;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--jl-line-strong);\n  border-radius: 4px;\n  background: var(--jl-surface);\n  cursor: pointer;\n  appearance: none;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease);\n}\n\n.checkbox:hover {\n  border-color: var(--jl-muted);\n}\n\n.checkbox:checked,\n.checkbox:indeterminate {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n}\n\n.checkbox:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.mark {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.checkbox:checked + .mark::after {\n  position: absolute;\n  top: 2.5px;\n  left: 5.5px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--jl-on-accent);\n  border-width: 0 2px 2px 0;\n  rotate: 45deg;\n  content: \"\";\n}\n\n.checkbox:indeterminate + .mark::after {\n  position: absolute;\n  top: 7px;\n  right: 4px;\n  left: 4px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--jl-on-accent);\n  content: \"\";\n}\n\n.empty-content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty jl-icon {\n  color: var(--jl-faint);\n}\n\n.bone {\n  display: inline-block;\n  width: 70%;\n  max-width: 160px;\n  height: 10px;\n  border-radius: var(--jl-radius-pill);\n  background:\n    linear-gradient(90deg, var(--jl-surface-3) 30%, var(--jl-surface-2) 50%, var(--jl-surface-3) 70%) 0 0 / 300%\n    100%;\n  vertical-align: middle;\n  animation: shimmer 1.4s linear infinite;\n}\n\n.bone.box {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n}\n\ntbody tr.skeleton:nth-child(3n + 2) .bone:not(.box) {\n  width: 50%;\n}\n\ntbody tr.skeleton:nth-child(3n) .bone:not(.box) {\n  width: 85%;\n}\n\n/* Shortened to a millisecond by the base styles, an endless shimmer would flicker: it stands still instead. */\n@media (prefers-reduced-motion: reduce) {\n  .bone {\n    animation: none;\n  }\n}\n\n@keyframes shimmer {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: 0 0;\n  }\n}\n";
+var jl_table_default = ":host {\n  display: block;\n  /* The table scrolls sideways inside its frame: its width never pushes the page, or a grid around it, wider. */\n  contain: inline-size;\n  --max-height: none;\n  --cell-y: 10px;\n  --cell-x: 14px;\n}\n\n:host([dense]) {\n  --cell-y: 6px;\n  --cell-x: 12px;\n}\n\n.scroll {\n  max-height: var(--max-height);\n  overflow: auto;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n  overscroll-behavior-x: contain;\n}\n\ntable {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n}\n\nth,\ntd {\n  padding: var(--cell-y) var(--cell-x);\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\nth {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  text-align: left;\n}\n\ntd {\n  border-top: 1px solid var(--jl-line-soft);\n}\n\ntbody tr:first-child td {\n  border-top: none;\n}\n\ntbody tr.empty td {\n  padding: 40px var(--cell-x);\n  color: var(--jl-muted);\n  text-align: center;\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin: -2px -4px;\n  padding: 2px 4px;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n\n.sort:hover {\n  color: var(--jl-text);\n}\n\n.sort-icon {\n  color: var(--jl-faint);\n}\n\nth[data-sorted] {\n  color: var(--jl-text);\n}\n\nth[data-sorted] .sort-icon {\n  color: var(--jl-accent);\n}\n\n/* Selected rows keep their shade: the hover and the stripes leave them alone. */\ntbody tr[data-selected] td {\n  background: var(--jl-accent-soft);\n}\n\n/* Marked rows (a search's matches) carry a bar at their start and a shade, which selection and hover take over. */\ntbody tr[data-marked] td {\n  background: var(--jl-accent-soft);\n}\n\ntbody tr[data-marked] td:first-child {\n  box-shadow: inset 3px 0 0 var(--jl-accent);\n}\n\ntbody tr:not(.empty, .skeleton, [data-selected]):hover td {\n  background: var(--jl-surface-2);\n}\n\n:host([striped]) tbody tr:nth-child(even):not(.empty, [data-selected], [data-marked]) td {\n  background: var(--jl-surface-2);\n}\n\n:host([striped]) tbody tr:not(.empty, .skeleton, [data-selected]):hover td {\n  background: var(--jl-surface-3);\n}\n\n.format-number {\n  font-variant-numeric: tabular-nums;\n}\n\n/* Broken anywhere, so a long address wraps too; never so narrow that a word stands alone on each line. */\ntd.wrap {\n  min-width: 160px;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.format-date {\n  color: var(--jl-text-2);\n  font-variant-numeric: tabular-nums;\n}\n\ncode {\n  padding: 2px 6px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-code-bg);\n  font-size: var(--jl-font-xs);\n}\n\n.select-cell {\n  width: 44px;\n  padding-right: 0;\n  line-height: 0;\n}\n\n/* The checkbox: the native input keeps the keyboard and the states, the mark beside it draws the tick. */\n.check {\n  position: relative;\n  display: inline-flex;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--jl-line-strong);\n  border-radius: 4px;\n  background: var(--jl-surface);\n  cursor: pointer;\n  appearance: none;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease);\n}\n\n.checkbox:hover {\n  border-color: var(--jl-muted);\n}\n\n.checkbox:checked,\n.checkbox:indeterminate {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n}\n\n.checkbox:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.mark {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.checkbox:checked + .mark::after {\n  position: absolute;\n  top: 2.5px;\n  left: 5.5px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--jl-on-accent);\n  border-width: 0 2px 2px 0;\n  rotate: 45deg;\n  content: \"\";\n}\n\n.checkbox:indeterminate + .mark::after {\n  position: absolute;\n  top: 7px;\n  right: 4px;\n  left: 4px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--jl-on-accent);\n  content: \"\";\n}\n\n.empty-content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty jl-icon {\n  color: var(--jl-faint);\n}\n\n.bone {\n  display: inline-block;\n  width: 70%;\n  max-width: 160px;\n  height: 10px;\n  border-radius: var(--jl-radius-pill);\n  background:\n    linear-gradient(90deg, var(--jl-surface-3) 30%, var(--jl-surface-2) 50%, var(--jl-surface-3) 70%) 0 0 / 300%\n    100%;\n  vertical-align: middle;\n  animation: shimmer 1.4s linear infinite;\n}\n\n.bone.box {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n}\n\ntbody tr.skeleton:nth-child(3n + 2) .bone:not(.box) {\n  width: 50%;\n}\n\ntbody tr.skeleton:nth-child(3n) .bone:not(.box) {\n  width: 85%;\n}\n\n/* Shortened to a millisecond by the base styles, an endless shimmer would flicker: it stands still instead. */\n@media (prefers-reduced-motion: reduce) {\n  .bone {\n    animation: none;\n  }\n}\n\n@keyframes shimmer {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: 0 0;\n  }\n}\n\n/* A column's description: a quieter line under the cell's value. */\n.cell-description {\n  margin-top: 2px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n";
 export { jl_table_default as default };

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

@@ -46,6 +46,11 @@ export declare class JlTable extends JlElement {
         get(): TableRowKey[];
         set(setter: TableRowKey[] | ((prevState: TableRowKey[]) => TableRowKey[])): void;
     }>>;
+    /** The keys of rows to draw attention to, such as a search's matches: a mark, not a selection. */
+    readonly marked: Readonly<Readonly<{
+        get(): TableRowKey[];
+        set(setter: TableRowKey[] | ((prevState: TableRowKey[]) => TableRowKey[])): void;
+    }>>;
     /** Shorter rows, for long lists. */
     readonly dense: Readonly<Readonly<{
         get(): boolean;
@@ -101,9 +106,13 @@ export declare class JlTable extends JlElement {
     private sortedRows;
     private renderBody;
     private bodyRow;
+    /** A cell's value, drawn by its renderer or in its format, with the row's description under it when it has one. */
     private cell;
+    private cellValue;
     private skeletonRows;
     private emptyRow;
+    /** The bar and the shade of marked rows, changed in place: one body row per key while there are rows. */
+    private renderMarks;
     /** The checkboxes and the shading of selected rows, changed in place. */
     private renderSelection;
 }

package/dist/organisms/jl-table.js

@@ -2,14 +2,15 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
+import { columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toggleAll, toggleKey } from "../lib/table.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { JlBadge } from "../atoms/jl-badge.js";
-import { columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toggleAll, toggleKey } from "../lib/table.js";
 import jl_table_default from "./jl-table.css_raw.js";
 import { css } from "@jadis/core";
 import { ArrowDown, ArrowUp, ChevronsUpDown, Inbox } from "lucide";
-import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/organisms/jl-table.tsx
 registerIcons({
 	"arrow-down": ArrowDown,
@@ -22,8 +23,8 @@ var TABLE_SORT_DIRECTIONS = [
 	"asc",
 	"desc"
 ];
+var MARKED_ATTRIBUTE = "data-marked";
 var DEFAULT_ROW_KEY = "id";
-var DEFAULT_EMPTY_TEXT = "No data";
 var SKELETON_ROWS = 5;
 var SORT_ICON_SIZE = 14;
 var EMPTY_ICON_SIZE = 18;
@@ -45,6 +46,7 @@ var CELL_MAKERS = {
 	}),
 	code: (text) => text === "" ? "" : /* @__PURE__ */ jsx("code", { children: text }),
 	date: (text) => text,
+	datetime: (text) => text,
 	number: (text) => text,
 	text: (text) => text
 };
@@ -99,6 +101,11 @@ var JlTable = class extends JlElement {
 		attribute: "selected",
 		parse: jsonOf([])
 	});
+	/** The keys of rows to draw attention to, such as a search's matches: a mark, not a selection. */
+	marked = this.useChange([], () => this.renderMarks(), {
+		attribute: "marked",
+		parse: jsonOf([])
+	});
 	/** Shorter rows, for long lists. */
 	dense = this.useChange(false, (value) => this.reflect("dense", value), { attribute: "dense" });
 	/** Shades every other row. */
@@ -106,7 +113,7 @@ var JlTable = class extends JlElement {
 	/** A CSS height past which the rows scroll under the header: `320px`, `50vh`; a number is pixels. */
 	maxHeight = this.useChange("", (value) => this.renderMaxHeight(value), { attribute: "max-height" });
 	/** What the table says when it has no rows. */
-	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, () => this.schedule("body"), { attribute: "empty-text" });
+	emptyText = this.useChange(jlText("noData"), () => this.schedule("body"), { attribute: "empty-text" });
 	/** Shows placeholder rows while the data loads. */
 	loading = this.useChange(false, (value) => {
 		this.reflect("loading", value);
@@ -250,6 +257,7 @@ var JlTable = class extends JlElement {
 		const sorted = this.sortedRows();
 		this._view.keys = sorted.map((row, index) => keys.get(row) ?? index);
 		this._refs.body.replaceChildren(...sorted.map((row, index) => this.bodyRow(row, index, columns)));
+		this.renderMarks();
 	}
 	bodyRow(row, index, columns) {
 		const first = columns[0];
@@ -259,11 +267,24 @@ var JlTable = class extends JlElement {
 			children: checkbox(`Select ${name}`, index)
 		}) : null;
 		return /* @__PURE__ */ jsxs("tr", { children: [select, columns.map((column) => /* @__PURE__ */ jsx("td", {
-			class: `align-${columnAlign(column)} format-${column.format ?? "text"}`,
+			class: `align-${columnAlign(column)} format-${column.format ?? "text"}${column.wrap ? " wrap" : ""}`,
 			children: this.cell(row, column)
 		}))] });
 	}
+	/** A cell's value, drawn by its renderer or in its format, with the row's description under it when it has one. */
 	cell(row, column) {
+		const value = this.cellValue(row, column);
+		const description = column.description === void 0 ? "" : formatCell(row[column.description]);
+		if (description === "") return value;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			class: "cell-value",
+			children: value
+		}), /* @__PURE__ */ jsx("div", {
+			class: "cell-description",
+			children: description
+		})] });
+	}
+	cellValue(row, column) {
 		const renderer = this.renderers.get()[column.key];
 		if (renderer !== void 0) return renderer(row);
 		const format = column.format ?? "text";
@@ -297,6 +318,15 @@ var JlTable = class extends JlElement {
 			})
 		});
 	}
+	/** The bar and the shade of marked rows, changed in place: one body row per key while there are rows. */
+	renderMarks() {
+		const marked = new Set(this.marked.get());
+		const rows = this._view.keys.length === 0 ? [] : [...this._refs.body.children];
+		for (const [index, row] of rows.entries()) {
+			const key = this._view.keys[index];
+			row.toggleAttribute(MARKED_ATTRIBUTE, key !== void 0 && marked.has(key));
+		}
+	}
 	/** The checkboxes and the shading of selected rows, changed in place. */
 	renderSelection() {
 		const selected = new Set(this.selected.get());

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

@@ -1,5 +1,5 @@
 import { JlElement } from '../base/jl-element';
-import type { ToasterPlacement, ToastHandle, ToastOptions } from '../types/jl-toaster.types';
+import type { DownloadOptions, DownloadResult, DownloadTexts, ToasterPlacement, ToastHandle, ToastOptions } from '../types/jl-toaster.types';
 export declare const TOASTER_PLACEMENTS: readonly ToasterPlacement[];
 /**
  * The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
@@ -49,3 +49,11 @@ export declare class JlToaster extends JlElement {
  * Returns a handle to close it early.
  */
 export declare function toast(options: ToastOptions): ToastHandle;
+/** A download's texts, in the language the page set (`setTexts`): what `download()` says unless told otherwise. */
+export declare const downloadTexts: () => DownloadTexts;
+/**
+ * Downloads a file with its progress in a toast of the page's toaster: the time the server takes to prepare it,
+ * the bytes received (a bar when it says the size), then the name it was saved under, or why it failed. Its
+ * Cancel stops it. Call it from a download link's click, leaving a modified click (a new tab) to the browser.
+ */
+export declare function download(url: string, options?: DownloadOptions): Promise<DownloadResult>;

package/dist/organisms/jl-toaster.js

@@ -1,11 +1,19 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { formatDuration } from "../lib/time.js";
+import { fillText } from "../lib/text.js";
+import { jlText } from "../lib/texts.js";
+import { formatFileSize } from "../lib/files.js";
 import { JlToast } from "../molecules/jl-toast.js";
+import { answerError, dispositionFileName, readWithProgress, saveBlob, urlFileName } from "../lib/download.js";
 import jl_toaster_default from "./jl-toaster.css_raw.js";
 import { css } from "@jadis/core";
+import { Download } from "lucide";
 import { jsx } from "@jadis/core/jsx-runtime";
 // src/organisms/jl-toaster.tsx
+registerIcons({ download: Download });
 var TOASTER_PLACEMENTS = [
 	"bottom-right",
 	"bottom-center",
@@ -18,11 +26,26 @@ var MAX_LIMIT = 20;
 var DEFAULT_DURATION = 5e3;
 var LONG_DURATION = 8e3;
 var LONG_TONE = "danger";
-var DEFAULT_LABEL = "Notifications";
 var STACKED = "data-stacked";
 /** How long a toast stays when its options do not say: longer for an error, or to give time to press its action. */
 var defaultDuration = (options) => options.tone === LONG_TONE || (options.actionLabel ?? "") !== "" ? LONG_DURATION : DEFAULT_DURATION;
 var OPEN = ":popover-open";
+/** The inputs of a toast that an update may change, each set when the update gives it. */
+var TOAST_SETTERS = {
+	actionLabel: (toast, value) => toast.actionLabel.set(value ?? ""),
+	closable: (toast, value) => toast.closable.set(value ?? false),
+	duration: (toast, value) => toast.duration.set(value ?? 0),
+	heading: (toast, value) => toast.heading.set(value ?? ""),
+	icon: (toast, value) => toast.icon.set(value ?? ""),
+	onAction: () => void 0,
+	progress: (toast, value) => toast.progress.set(value ?? null),
+	text: (toast, value) => toast.text.set(value ?? ""),
+	tone: (toast, value) => toast.tone.set(value ?? "neutral"),
+	working: (toast, value) => toast.working.set(value ?? false)
+};
+function updateToast(toast, changes) {
+	for (const key of Object.keys(changes)) TOAST_SETTERS[key](toast, changes[key]);
+}
 /**
 * The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
 * the top layer, so it shows over open dialogs, and its live region reads new toasts to screen readers. Pages
@@ -40,7 +63,7 @@ var JlToaster = class extends JlElement {
 		parse: clampedNumber(DEFAULT_MAX, 1, MAX_LIMIT)
 	});
 	/** The region's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.region.setAttribute("aria-label", value), { attribute: "label" });
+	label = this.useChange(jlText("notifications"), (value) => this._refs.region.setAttribute("aria-label", value), { attribute: "label" });
 	_watched = /* @__PURE__ */ new WeakSet();
 	_refs = this.useRefs((ref) => ({
 		region: ref(".region"),
@@ -58,13 +81,21 @@ var JlToaster = class extends JlElement {
 			icon: options.icon,
 			duration: options.duration ?? defaultDuration(options),
 			closable: options.closable ?? true,
-			actionLabel: options.actionLabel
+			actionLabel: options.actionLabel,
+			working: options.working,
+			progress: options.progress
 		});
-		const onAction = options.onAction;
-		if (onAction !== void 0) toast.addEventListener("action", () => onAction());
+		const actions = { onAction: options.onAction };
+		toast.addEventListener("action", () => actions.onAction?.());
 		this.append(toast);
 		this.whenRendered(() => this.raise());
-		return { dismiss: () => toast.dismiss() };
+		return {
+			dismiss: () => toast.dismiss(),
+			update: (changes) => {
+				if ("onAction" in changes) actions.onAction = changes.onAction;
+				updateToast(toast, changes);
+			}
+		};
 	}
 	templateHtml() {
 		return /* @__PURE__ */ jsx("section", {
@@ -146,4 +177,114 @@ function pageToaster() {
 function toast(options) {
 	return pageToaster().notify(options);
 }
-export { JlToaster, TOASTER_PLACEMENTS, toast };
+var DOWNLOAD_ICON = "download";
+var SAVED_VISIBLE_MS = 6e3;
+var PREPARING_TICK_MS = 1e3;
+var PROGRESS_INTERVAL_MS = 250;
+var PERCENT = 100;
+var FALLBACK_NAME = "download";
+var CONTENT_LENGTH = "content-length";
+var CONTENT_DISPOSITION = "content-disposition";
+/** A download's texts, in the language the page set (`setTexts`): what `download()` says unless told otherwise. */
+var downloadTexts = () => ({
+	cancel: jlText("downloadCancel"),
+	failed: jlText("downloadFailed"),
+	preparing: jlText("downloadPreparing"),
+	received: jlText("downloadReceived"),
+	receivedOf: jlText("downloadReceivedOf"),
+	saved: jlText("downloadSaved")
+});
+/** The toast's text and bar for the bytes received: a share of the size when the server said it. */
+function receiving(received, total, texts) {
+	const size = formatFileSize(received);
+	if (total <= 0) return {
+		progress: null,
+		text: fillText(texts.received, { received: size })
+	};
+	return {
+		progress: Math.min(PERCENT, received / total * PERCENT),
+		text: fillText(texts.receivedOf, {
+			received: size,
+			total: formatFileSize(total)
+		})
+	};
+}
+async function failureOf(response) {
+	const body = await response.json().catch(() => null);
+	return new Error(answerError(body, response.status));
+}
+/**
+* Downloads a file with its progress in a toast of the page's toaster: the time the server takes to prepare it,
+* the bytes received (a bar when it says the size), then the name it was saved under, or why it failed. Its
+* Cancel stops it. Call it from a download link's click, leaving a modified click (a new tab) to the browser.
+*/
+async function download(url, options = {}) {
+	const texts = {
+		...downloadTexts(),
+		...options.texts
+	};
+	const controller = new AbortController();
+	const started = performance.now();
+	const preparingText = () => fillText(texts.preparing, { time: formatDuration(performance.now() - started) });
+	const handle = toast({
+		actionLabel: texts.cancel,
+		closable: false,
+		duration: 0,
+		heading: options.title ?? urlFileName(url, FALLBACK_NAME),
+		icon: DOWNLOAD_ICON,
+		onAction: () => controller.abort(),
+		progress: null,
+		text: preparingText(),
+		working: true
+	});
+	const preparing = window.setInterval(() => handle.update({ text: preparingText() }), PREPARING_TICK_MS);
+	try {
+		const response = await fetch(url, {
+			...options.init,
+			signal: controller.signal
+		});
+		window.clearInterval(preparing);
+		if (!response.ok) throw await failureOf(response);
+		const total = Number(response.headers.get(CONTENT_LENGTH)) || 0;
+		const blob = await readWithProgress(response, (received) => handle.update(receiving(received, total, texts)), PROGRESS_INTERVAL_MS);
+		const name = dispositionFileName(response.headers.get(CONTENT_DISPOSITION)) ?? options.fileName ?? urlFileName(url, FALLBACK_NAME);
+		saveBlob(blob, name);
+		handle.update({
+			actionLabel: "",
+			closable: true,
+			duration: SAVED_VISIBLE_MS,
+			icon: "",
+			text: fillText(texts.saved, {
+				name,
+				size: formatFileSize(blob.size)
+			}),
+			tone: "ok",
+			working: false
+		});
+		return {
+			name,
+			outcome: "saved",
+			size: blob.size
+		};
+	} catch (error) {
+		window.clearInterval(preparing);
+		if (controller.signal.aborted) {
+			handle.dismiss();
+			return { outcome: "canceled" };
+		}
+		const message = error instanceof Error ? error.message : String(error);
+		handle.update({
+			actionLabel: "",
+			closable: true,
+			icon: "",
+			text: fillText(texts.failed, { error: message }),
+			tone: "danger",
+			working: false
+		});
+		return {
+			error: message,
+			outcome: "failed"
+		};
+	}
+}
+export { JlToaster, TOASTER_PLACEMENTS, download, downloadTexts, toast };

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

@@ -1,3 +1,3 @@
 // src/organisms/jl-tree.css?raw
-var jl_tree_default = ":host {\n  display: block;\n  --indent: 16px;\n  --row-height: 30px;\n}\n\n.tree {\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n.group {\n  position: relative;\n}\n\n/* A quiet line under each open folder, from its chevron down along its children. */\n.group::before {\n  position: absolute;\n  top: 0;\n  bottom: 4px;\n  left: calc(8px + var(--level) * var(--indent) + 6.5px);\n  width: 1px;\n  background: var(--jl-line);\n  content: \"\";\n}\n\n.item:focus-visible {\n  box-shadow: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--row-height);\n  padding: 0 8px 0 calc(8px + var(--level) * var(--indent));\n  border-radius: var(--jl-radius-sm);\n  cursor: pointer;\n  user-select: none;\n}\n\n.row:hover {\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n}\n\n.item:focus-visible > .row {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.item[aria-selected=\"true\"] > .row {\n  background: var(--jl-accent-soft);\n  color: var(--jl-text);\n  font-weight: 600;\n}\n\n.chevron {\n  display: inline-flex;\n  flex: none;\n  justify-content: center;\n  width: 14px;\n  color: var(--jl-faint);\n  transition: rotate var(--jl-fast) var(--jl-ease);\n}\n\n.item[aria-expanded=\"true\"] > .row > .chevron {\n  rotate: 90deg;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.item[aria-selected=\"true\"] > .row > .icon {\n  color: var(--jl-accent);\n}\n\n.label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+var jl_tree_default = ":host {\n  display: block;\n  --indent: 16px;\n  --row-height: 30px;\n}\n\n.tree {\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n.group {\n  position: relative;\n}\n\n/* A quiet line under each open folder, from its chevron down along its children. */\n.group::before {\n  position: absolute;\n  top: 0;\n  bottom: 4px;\n  left: calc(8px + var(--level) * var(--indent) + 6.5px);\n  width: 1px;\n  background: var(--jl-line);\n  content: \"\";\n}\n\n.item:focus-visible {\n  box-shadow: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--row-height);\n  padding: 0 8px 0 calc(8px + var(--level) * var(--indent));\n  border-radius: var(--jl-radius-sm);\n  cursor: pointer;\n  user-select: none;\n}\n\n.row:hover {\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n}\n\n.item:focus-visible > .row {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.item[aria-selected=\"true\"] > .row {\n  background: var(--jl-accent-soft);\n  color: var(--jl-text);\n  font-weight: 600;\n}\n\n.chevron {\n  display: inline-flex;\n  flex: none;\n  justify-content: center;\n  width: 14px;\n  color: var(--jl-faint);\n  transition: rotate var(--jl-fast) var(--jl-ease);\n}\n\n.item[aria-expanded=\"true\"] > .row > .chevron {\n  rotate: 90deg;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.item[aria-selected=\"true\"] > .row > .icon {\n  color: var(--jl-accent);\n}\n\n.label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* A link's row looks like any row: the address shows in the status bar, and a middle click opens a tab. */\na.row {\n  color: inherit;\n  text-decoration: none;\n}\n\n/* What ends a level: its page on the way, the button for its next page, an error to load again. */\n.item.level-end > .row {\n  color: var(--jl-muted);\n}\n\n.level-end[aria-disabled=\"true\"] > .row {\n  cursor: default;\n}\n\n.level-end[aria-disabled=\"true\"] > .row:hover {\n  background: none;\n}\n\n.spinner {\n  flex: none;\n  color: var(--jl-muted);\n}\n\n.more,\n.retry {\n  flex: none;\n  color: var(--jl-accent);\n  font-weight: 500;\n}\n\n.level-end > .row:hover .more,\n.level-end > .row:hover .retry {\n  color: var(--jl-accent-strong);\n}\n\n.icon.error {\n  color: var(--jl-danger);\n}\n\n.note {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: var(--row-height);\n  padding: 0 8px 0 calc(8px + var(--level) * var(--indent));\n  color: var(--jl-muted);\n}\n\n/* A folder's count, or a short word, after its label. */\n.badge {\n  flex: none;\n  margin-left: auto;\n  color: var(--jl-faint);\n  font-size: var(--jl-font-xs);\n  font-variant-numeric: tabular-nums;\n}\n";
 export { jl_tree_default as default };