@syware/jlib 0.5.1 → 0.7.0

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

@@ -1,7 +1,9 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { watchSizes } from "../lib/resize.js";
 import jl_app_shell_default from "./jl-app-shell.css_raw.js";
 import { css } from "@jadis/core";
 import { Menu } from "lucide";
@@ -10,6 +12,7 @@ import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 registerIcons({ menu: Menu });
 var MENU_ICON_SIZE = 18;
 var HIDDEN = "none";
+var SHELL_BOTTOM = "--jl-shell-bottom";
 /** Whether a click inside the drawer followed a link: the page changes, so the drawer gets out of the way. */
 var followsLink = (event) => event.composedPath().some((node) => node instanceof HTMLAnchorElement && node.href !== "");
 /**
@@ -17,18 +20,30 @@ var followsLink = (event) => event.composedPath().some((node) => node instanceof
 * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
 * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
 * a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
-* It takes the height of its container: give that one a height (`100dvh` for a whole page).
+* It takes the height of its container: give that one a height (`100dvh` for a whole page). A shell that fills the
+* window writes the height of its tab bar, while it shows, as `--jl-shell-bottom` on the document: toasts keep
+* above it, and a page's floating bars can (`bottom: calc(var(--jl-shell-bottom, 0px) + 16px)`).
 */
 var JlAppShell = class extends JlElement {
 	static selector = "jl-app-shell";
 	events = this.useEvents();
 	/** Whether the drawer is open, on narrow screens; wide ones always show the sidebar. */
 	navOpen = this.useChange(false, (value) => this.renderNavOpen(value), { attribute: "nav-open" });
+	/**
+	* The top bar only on narrow screens, as the navigation pattern lays it out: there it holds the menu button and
+	* the app's name; wide, the side nav's own header names the app.
+	*/
+	narrowHeader = this.useChange(false, (value) => this.reflect("narrow-header", value), { attribute: "narrow-header" });
 	_state = {
 		navListeners: new AbortController(),
+		publishedBottom: false,
 		tabsListeners: new AbortController()
 	};
-	_resize = new ResizeObserver(() => this.renderInert());
+	_resize = watchSizes(() => {
+		this.renderInert();
+		this.renderShellBottom();
+		this.renderDrawer();
+	});
 	_refs = this.useRefs((ref) => ({
 		aside: ref(".aside"),
 		asideSlot: ref("slot[name=\"aside\"]"),
@@ -56,7 +71,7 @@ var JlAppShell = class extends JlElement {
 					children: [/* @__PURE__ */ jsx("button", {
 						class: "menu",
 						type: "button",
-						"aria-label": "Navigation",
+						"aria-label": jlText("navigation"),
 						"aria-expanded": "false",
 						"aria-controls": "nav",
 						children: /* @__PURE__ */ jsx(JlIcon, {
@@ -96,6 +111,7 @@ var JlAppShell = class extends JlElement {
 	}
 	onConnect() {
 		this._resize.observe(this);
+		this._resize.observe(this._refs.tabs);
 		this.on(this._refs.menu, "click", () => this.onMenu());
 		this.on(this._refs.scrim, "click", () => this.setNavOpen(false));
 		this.on(this._refs.nav, "click", (event) => {
@@ -114,6 +130,23 @@ var JlAppShell = class extends JlElement {
 		this._resize.disconnect();
 		this._state.navListeners.abort();
 		this._state.tabsListeners.abort();
+		this.withdrawShellBottom();
+	}
+	/** Tells the page how much the tab bar covers at the bottom of the window, while it shows. */
+	renderShellBottom() {
+		const height = Math.round(this._refs.tabs.getBoundingClientRect().height);
+		const fillsWindow = this.getBoundingClientRect().bottom >= window.innerHeight - 1;
+		if (height === 0 || !fillsWindow) {
+			this.withdrawShellBottom();
+			return;
+		}
+		document.documentElement.style.setProperty(SHELL_BOTTOM, `${height}px`);
+		this._state.publishedBottom = true;
+	}
+	withdrawShellBottom() {
+		if (!this._state.publishedBottom) return;
+		document.documentElement.style.removeProperty(SHELL_BOTTOM);
+		this._state.publishedBottom = false;
 	}
 	/** Whether the shell is narrow: the menu button shows only then. */
 	isNarrow() {
@@ -171,6 +204,12 @@ var JlAppShell = class extends JlElement {
 		const signal = this._state.navListeners.signal;
 		for (const element of navElements) element.addEventListener("select", () => this.setNavOpen(false), { signal });
 		this.renderInert();
+		this.renderDrawer();
+	}
+	/** Narrow, the nav is a drawer: a side nav shows whole there, whether it is folded on a wide screen or not. */
+	renderDrawer() {
+		const narrow = this.isNarrow();
+		for (const element of this._refs.navSlot.assignedElements()) element.toggleAttribute("in-drawer", narrow);
 	}
 };
 JlAppShell.register();

package/dist/templates/jl-auth-layout.css_raw.js

@@ -0,0 +1,3 @@
+// src/templates/jl-auth-layout.css?raw
+var jl_auth_layout_default = ":host {\n  display: block;\n  min-height: var(--min-height, 100dvh);\n}\n\n.screen {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\n  min-height: var(--min-height, 100dvh);\n}\n\n/* The brand's dark panel: the dark tokens apply inside it (data-theme), whatever the page's theme. */\n.story {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 32px;\n  overflow: hidden;\n  padding: 40px 48px;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.brand,\n.pitch,\n.points,\n.origin {\n  position: relative;\n  z-index: 1;\n}\n\n.pitch {\n  display: grid;\n  gap: 16px;\n  max-width: 520px;\n}\n\n.headline {\n  font-size: clamp(30px, 3.4vw, 46px);\n  font-weight: 800;\n  letter-spacing: -0.03em;\n  line-height: 1.08;\n  text-wrap: balance;\n}\n\n.accent {\n  color: var(--jl-brand);\n}\n\n.text {\n  color: var(--jl-muted);\n  font-size: 15.5px;\n  line-height: 1.6;\n}\n\n.points {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--jl-font-md);\n}\n\n.points li {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.tick {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--jl-brand);\n  color: var(--jl-on-brand);\n}\n\n.origin {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 650;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n/* The SyWare mark, large and faint, leaning out of the corner. */\n.backdrop {\n  position: absolute;\n  right: -90px;\n  bottom: -110px;\n  width: 420px;\n  height: 460px;\n  opacity: 0.07;\n  pointer-events: none;\n}\n\n.side {\n  display: grid;\n  place-items: center;\n  padding: 32px 24px;\n  background: var(--jl-bg);\n}\n\n/* A phone: the panel is a band with the brand, above the form. */\n@media (max-width: 860px) {\n  .screen {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .story {\n    padding: 18px 24px;\n  }\n\n  .pitch,\n  .points,\n  .origin,\n  .backdrop {\n    display: none;\n  }\n}\n";
+export { jl_auth_layout_default as default };

package/dist/templates/jl-auth-layout.d.ts

@@ -0,0 +1,35 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * The screen before an app, as every SyWare app shows it: on a dark panel, the app's brand (slot `brand`), a
+ * headline whose words between asterisks take the brand's blue ("Workflows that *ask* before they act."), a
+ * sentence, a few points, and where it comes from; beside it, the form (the default slot). On a phone, the panel
+ * becomes a band with the brand, above the form.
+ */
+export declare class JlAuthLayout extends JlElement {
+    static readonly selector = "jl-auth-layout";
+    /** What the app does, in a few words; `*words*` take the brand's blue. */
+    readonly pitch: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** One or two sentences under the headline. */
+    readonly text: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** What the app is good at, three points at most; HTML writes them as JSON. */
+    readonly points: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    /** Where the app comes from, at the foot of the panel. */
+    readonly origin: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private renderPitch;
+    private renderPoints;
+}

package/dist/templates/jl-auth-layout.js

@@ -0,0 +1,139 @@
+import { BASE_STYLES, TOKEN_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 { starredParts } from "../lib/text.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_auth_layout_default from "./jl-auth-layout.css_raw.js";
+import { css } from "@jadis/core";
+import { Check } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/templates/jl-auth-layout.tsx
+registerIcons({ check: Check });
+var DEFAULT_ORIGIN = "Made in Switzerland by SyWare";
+var POINT_ICON_SIZE = 12;
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var MARK_VIEW_BOX = "429 1092 2155 2358";
+var MARK_TRANSFORM = "matrix(1.3333333 0 0 -1.3333333 0 4535.4267)";
+var MARK_PARTS = [{
+	colour: "var(--jl-text)",
+	d: "m 0,0 -786.134,459.252 c -29.13,18.997 -62.026,44.131 -85.701,73.026 V 335.352 c 0,-112.197 60.333,-216.758 157.489,-272.837 l 492.661,-284.389 c 47.878,-27.653 102.358,-42.252 157.563,-42.252 55.12,0 109.562,14.599 157.459,42.252 l 45.359,26.187 C 133.464,-116.391 99.209,-62.514 0,0",
+	transform: "translate(1193.8955 1078.5752)"
+}, {
+	colour: "var(--jl-brand)",
+	d: "m 0,0 c 0,112.186 -60.359,216.747 -157.526,272.845 l -492.639,284.407 c -47.822,27.634 -102.294,42.222 -157.544,42.222 -55.254,0 -109.715,-14.588 -157.489,-42.222 l -492.107,-284.098 c -12.716,-6.17 -157.459,-80.217 -157.459,-245.04 0,-164.205 138.525,-232.919 152.041,-239.219 l 937.433,-543.23 c -0.007,0 -0.063,-0.074 -0.063,-0.074 116.786,-68.629 155.718,-124.426 161.333,-209.494 153.313,93.103 206.494,122.148 206.494,122.148 65.696,37.908 228.603,135.168 -55.964,299.474 -284.567,164.309 -940.314,542.843 -940.314,542.843 -9.958,6.408 -15.905,17.159 -15.905,28.736 0,9.567 4.112,18.681 11.316,25.219 l 296.55,171.559 c 32.93,19.019 75.427,18.982 108.286,0.018 L -392.633,17.747 c 33.41,-19.303 54.16,-50.963 54.16,-118.386 0,-32.996 -5.679,-70.886 56.626,-107.08 47.577,-27.645 186.668,-107.832 249.792,-144.237 12.34,-9.065 22.934,-18.301 31.999,-27.597 L 0,-247.648 c 0,1.213 -0.093,2.397 -0.111,3.609 z",
+	transform: "translate(1937.4087 1982.8447)"
+}];
+/** The SyWare mark, drawn large and faint in the panel's corner: the company behind the app. JSX makes HTML only. */
+function backdrop() {
+	const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+	svg.setAttribute("viewBox", MARK_VIEW_BOX);
+	svg.setAttribute("class", "backdrop");
+	svg.setAttribute("aria-hidden", "true");
+	const group = document.createElementNS(SVG_NAMESPACE, "g");
+	group.setAttribute("transform", MARK_TRANSFORM);
+	for (const part of MARK_PARTS) {
+		const path = document.createElementNS(SVG_NAMESPACE, "path");
+		path.setAttribute("transform", part.transform);
+		path.setAttribute("d", part.d);
+		path.style.fill = part.colour;
+		group.append(path);
+	}
+	svg.append(group);
+	return svg;
+}
+/**
+* The screen before an app, as every SyWare app shows it: on a dark panel, the app's brand (slot `brand`), a
+* headline whose words between asterisks take the brand's blue ("Workflows that *ask* before they act."), a
+* sentence, a few points, and where it comes from; beside it, the form (the default slot). On a phone, the panel
+* becomes a band with the brand, above the form.
+*/
+var JlAuthLayout = class extends JlElement {
+	static selector = "jl-auth-layout";
+	/** What the app does, in a few words; `*words*` take the brand's blue. */
+	pitch = this.useChange("", (value) => this.renderPitch(value), { attribute: "pitch" });
+	/** One or two sentences under the headline. */
+	text = this.useChange("", (value) => {
+		this._refs.text.textContent = value;
+		this._refs.text.hidden = value === "";
+	}, { attribute: "text" });
+	/** What the app is good at, three points at most; HTML writes them as JSON. */
+	points = this.useChange([], (value) => this.renderPoints(value), {
+		attribute: "points",
+		parse: jsonOf([])
+	});
+	/** Where the app comes from, at the foot of the panel. */
+	origin = this.useChange(DEFAULT_ORIGIN, (value) => {
+		this._refs.origin.textContent = value;
+		this._refs.origin.hidden = value === "";
+	}, { attribute: "origin" });
+	_refs = this.useRefs((ref) => ({
+		headline: ref(".headline"),
+		origin: ref(".origin"),
+		points: ref(".points"),
+		text: ref(".text")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "screen",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("section", {
+				class: "story",
+				"data-theme": "dark",
+				attrs: { part: "story" },
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						class: "brand",
+						children: /* @__PURE__ */ jsx("slot", { name: "brand" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						class: "pitch",
+						children: [/* @__PURE__ */ jsx("p", {
+							class: "headline",
+							hidden: true
+						}), /* @__PURE__ */ jsx("p", {
+							class: "text",
+							hidden: true
+						})]
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						class: "points",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: "origin",
+						children: DEFAULT_ORIGIN
+					}),
+					backdrop()
+				]
+			}), /* @__PURE__ */ jsx("main", {
+				class: "side",
+				attrs: { part: "side" },
+				children: /* @__PURE__ */ jsx("slot", {})
+			})]
+		});
+	}
+	templateCss() {
+		return css`${TOKEN_STYLES}${BASE_STYLES}${jl_auth_layout_default}`;
+	}
+	renderPitch(pitch) {
+		const parts = starredParts(pitch).map((part) => part.accent ? /* @__PURE__ */ jsx("span", {
+			class: "accent",
+			children: part.text
+		}) : part.text);
+		this._refs.headline.replaceChildren(...parts);
+		this._refs.headline.hidden = pitch === "";
+	}
+	renderPoints(points) {
+		this._refs.points.replaceChildren(...points.map((point) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+			class: "tick",
+			children: /* @__PURE__ */ jsx(JlIcon, {
+				name: "check",
+				size: POINT_ICON_SIZE
+			})
+		}), /* @__PURE__ */ jsx("span", { children: point })] })));
+		this._refs.points.hidden = points.length === 0;
+	}
+};
+JlAuthLayout.register();
+export { JlAuthLayout };

package/dist/templates/jl-page.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-page.css?raw
-var jl_page_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --page-width: var(--jl-page-standard);\n}\n\n:host([width=\"form\"]) {\n  --page-width: var(--jl-page-form);\n}\n\n:host([width=\"wide\"]) {\n  --page-width: var(--jl-page-wide);\n}\n\n:host([width=\"full\"]) {\n  --page-width: none;\n}\n\n.page {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--jl-space-6);\n  max-width: var(--page-width);\n  margin: 0 auto;\n  padding: var(--jl-space-8) var(--jl-space-10) var(--jl-space-12);\n}\n\n/* A grid's items grow to their content otherwise: a row of chips would widen the page. */\n::slotted(*) {\n  min-width: 0;\n}\n\n.back {\n  margin-left: -8px;\n}\n\n@container (max-width: 720px) {\n  .page {\n    padding: var(--jl-space-6) var(--jl-space-4) var(--jl-space-12);\n  }\n}\n";
+var jl_page_default = ":host {\n  display: block;\n  --page-width: var(--jl-page-standard);\n}\n\n:host([width=\"form\"]) {\n  --page-width: var(--jl-page-form);\n}\n\n:host([width=\"wide\"]) {\n  --page-width: var(--jl-page-wide);\n}\n\n:host([width=\"full\"]) {\n  --page-width: none;\n}\n\n.page {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--jl-space-6);\n  max-width: var(--page-width);\n  margin: 0 auto;\n  padding: var(--jl-space-8) var(--jl-space-10) var(--jl-space-12);\n}\n\n/* A grid's items grow to their content otherwise: a row of chips would widen the page. */\n::slotted(*) {\n  min-width: 0;\n}\n\n.back {\n  margin-left: -8px;\n}\n\n/*\n * Narrow screens. A media query, not a container query: a size container is the containing block of what is\n * fixed inside it, and a page's floating bars and buttons must stay fixed to the screen.\n */\n@media (max-width: 720px) {\n  .page {\n    padding: var(--jl-space-6) var(--jl-space-4) var(--jl-space-12);\n  }\n}\n";
 export { jl_page_default as default };

package/dist/templates/jl-page.js

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { define } from "../lib/define.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { setOrRemove } from "../lib/dom.js";
 import { JlButton } from "../atoms/jl-button.js";
 import { JlPageHeader } from "../organisms/jl-page-header.js";
@@ -20,7 +21,6 @@ var PAGE_WIDTHS = [
 	"full"
 ];
 var BREADCRUMB_SLOT = "breadcrumb";
-var DEFAULT_BACK_LABEL = "Back";
 var TITLE_SEPARATOR = " · ";
 /**
 * A page of an app: its header (a back link named after the page it leads to, the heading, a sentence on what the
@@ -48,7 +48,7 @@ var JlPage = class extends JlElement {
 	appName = this.useChange("", () => this.renderTitle(), { attribute: "app-name" });
 	_refs = this.useRefs((ref) => ({
 		back: ref(".back"),
-		header: ref("jl-page-header")
+		header: ref(JlPageHeader)
 	}));
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("div", {
@@ -88,7 +88,7 @@ var JlPage = class extends JlElement {
 		const back = this._refs.back;
 		const href = this.back.get();
 		back.href.set(href);
-		back.label.set(this.backLabel.get() || DEFAULT_BACK_LABEL);
+		back.label.set(this.backLabel.get() || jlText("back"));
 		setOrRemove(back, "slot", href === "" ? "" : BREADCRUMB_SLOT);
 	}
 	renderTitle() {

package/dist/templates/jl-split-view.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-split-view.css?raw
-var jl_split_view_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.split {\n  display: grid;\n  grid-template-columns: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n  height: 100%;\n}\n\n:host([orientation=\"vertical\"]) .split {\n  grid-template-columns: none;\n  grid-template-rows: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n}\n\n.pane {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.divider {\n  position: relative;\n  z-index: 1;\n  background: var(--jl-line);\n  cursor: col-resize;\n  touch-action: none;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .divider {\n  cursor: row-resize;\n}\n\n/* The line is one pixel; the pointer gets a wider band to catch. */\n.divider::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -5px;\n}\n\n:host([orientation=\"vertical\"]) .divider::before {\n  inset: -5px 0;\n}\n\n.divider:hover,\n.divider:focus-visible,\n:host([dragging]) .divider {\n  background: var(--jl-accent);\n}\n\n.divider:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6px;\n  height: 28px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  transform: translate(-50%, -50%);\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .grip {\n  width: 28px;\n  height: 6px;\n}\n\n.divider:hover .grip,\n.divider:focus-visible .grip,\n:host([dragging]) .grip {\n  border-color: var(--jl-accent);\n}\n\n:host([dragging]) {\n  cursor: col-resize;\n  user-select: none;\n}\n\n:host([dragging][orientation=\"vertical\"]) {\n  cursor: row-resize;\n}\n\n/* While dragging, the panes ignore the pointer: a frame inside one would otherwise swallow it. */\n:host([dragging]) .pane {\n  pointer-events: none;\n}\n";
+var jl_split_view_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.split {\n  display: grid;\n  grid-template-columns: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n  height: 100%;\n}\n\n:host([orientation=\"vertical\"]) .split {\n  grid-template-columns: none;\n  grid-template-rows: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n}\n\n.pane {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.divider {\n  position: relative;\n  z-index: 1;\n  background: var(--jl-line);\n  cursor: col-resize;\n  touch-action: none;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .divider {\n  cursor: row-resize;\n}\n\n/* The line is one pixel; the pointer gets a wider band to catch. */\n.divider::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -5px;\n}\n\n:host([orientation=\"vertical\"]) .divider::before {\n  inset: -5px 0;\n}\n\n.divider:hover,\n.divider:focus-visible,\n:host([dragging]) .divider {\n  background: var(--jl-accent);\n}\n\n.divider:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6px;\n  height: 28px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  transform: translate(-50%, -50%);\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .grip {\n  width: 28px;\n  height: 6px;\n}\n\n.divider:hover .grip,\n.divider:focus-visible .grip,\n:host([dragging]) .grip {\n  border-color: var(--jl-accent);\n}\n\n:host([dragging]) {\n  cursor: col-resize;\n  user-select: none;\n}\n\n:host([dragging][orientation=\"vertical\"]) {\n  cursor: row-resize;\n}\n\n/* While dragging, the panes ignore the pointer: a frame inside one would otherwise swallow it. */\n:host([dragging]) .pane {\n  pointer-events: none;\n}\n\n/* Stacked: one pane at a time, the whole room, no divider. */\n:host([stacked]) .split {\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr);\n}\n\n:host([stacked]) .divider,\n:host([stacked]:not([pane=\"end\"])) .end,\n:host([stacked][pane=\"end\"]) .start {\n  display: none;\n}\n";
 export { jl_split_view_default as default };

package/dist/templates/jl-split-view.d.ts

@@ -1,16 +1,21 @@
 import { JlElement } from '../base/jl-element';
-import type { SplitOrientation } from '../types/jl-split-view.types';
+import type { SplitOrientation, SplitPane } from '../types/jl-split-view.types';
 export declare const SPLIT_ORIENTATIONS: readonly SplitOrientation[];
+export declare const SPLIT_PANES: readonly SplitPane[];
 /**
  * Two panes, `start` and `end`, side by side or one above the other, with a divider to drag between them. The
  * divider also moves with the arrows (Shift for large steps), Home and End; a double click puts it back. `position`
  * is the start pane's share, in percent; each pane keeps at least `min` percent.
+ *
+ * Narrower than `stack-below` pixels, it shows one pane at a time, the one `pane` names: a list and the item opened
+ * from it become two pages, as a phone shows them. It then has the attribute `stacked`, and fires `stack`.
  */
 export declare class JlSplitView extends JlElement {
     static readonly selector = "jl-split-view";
     /** The new position, in percent, once a drag ends or a key moved the divider. */
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         change: number;
+        stack: boolean;
     }>>;
     readonly orientation: Readonly<Readonly<{
         get(): SplitOrientation;
@@ -26,18 +31,33 @@ export declare class JlSplitView extends JlElement {
         get(): number;
         set(setter: number | ((prevState: number) => number)): void;
     }>>;
+    /** Under this width, in pixels, it shows one pane at a time; 0 never does. */
+    readonly stackBelow: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The pane it shows while stacked: `start`, or `end` once an item is open. */
+    readonly pane: Readonly<Readonly<{
+        get(): SplitPane;
+        set(setter: ((prevState: SplitPane) => SplitPane) | SplitPane): void;
+    }>>;
     /** The divider's name for screen readers. */
     readonly label: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
     private readonly _drag;
+    private readonly _resize;
+    /** Whether it shows one pane at a time now. */
+    isStacked(): boolean;
     private readonly _refs;
     /** Puts the divider back where the page first placed it. */
     reset(): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
+    onDisconnect(): void;
+    private renderStacked;
     private current;
     private startDrag;
     private drag;

package/dist/templates/jl-split-view.js

@@ -1,18 +1,22 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { jlText } from "../lib/texts.js";
+import { watchSizes } from "../lib/resize.js";
 import { clampMin, clampSplit, positionAfterKey, positionAt } from "../lib/split.js";
 import jl_split_view_default from "./jl-split-view.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/templates/jl-split-view.tsx
 var SPLIT_ORIENTATIONS = ["horizontal", "vertical"];
+var SPLIT_PANES = ["start", "end"];
 var DEFAULT_POSITION = 50;
 var DEFAULT_MIN = 15;
 var FULL = 100;
 var MAX_MIN = 50;
 var PRIMARY_BUTTON = 0;
-var DEFAULT_LABEL = "Resize the panes";
+var STACKED = "stacked";
+var MAX_STACK_WIDTH = 4e3;
 var SEPARATOR_ORIENTATION = {
 	horizontal: "vertical",
 	vertical: "horizontal"
@@ -22,6 +26,9 @@ var parsePosition = clampedNumber(DEFAULT_POSITION, 0, FULL);
 * Two panes, `start` and `end`, side by side or one above the other, with a divider to drag between them. The
 * divider also moves with the arrows (Shift for large steps), Home and End; a double click puts it back. `position`
 * is the start pane's share, in percent; each pane keeps at least `min` percent.
+*
+* Narrower than `stack-below` pixels, it shows one pane at a time, the one `pane` names: a list and the item opened
+* from it become two pages, as a phone shows them. It then has the attribute `stacked`, and fires `stack`.
 */
 var JlSplitView = class extends JlElement {
 	static selector = "jl-split-view";
@@ -44,11 +51,26 @@ var JlSplitView = class extends JlElement {
 		attribute: "min",
 		parse: clampedNumber(DEFAULT_MIN, 0, MAX_MIN)
 	});
+	/** Under this width, in pixels, it shows one pane at a time; 0 never does. */
+	stackBelow = this.useChange(0, () => this.renderStacked(), {
+		attribute: "stack-below",
+		parse: clampedNumber(0, 0, MAX_STACK_WIDTH)
+	});
+	/** The pane it shows while stacked: `start`, or `end` once an item is open. */
+	pane = this.useChange("start", (value) => this.reflect("pane", value), {
+		attribute: "pane",
+		parse: oneOf(SPLIT_PANES, "start")
+	});
 	/** The divider's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.divider.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	label = this.useChange(jlText("resizePanes"), (value) => {
+		this._refs.divider.setAttribute("aria-label", value === "" ? jlText("resizePanes") : value);
 	}, { attribute: "label" });
 	_drag = { from: DEFAULT_POSITION };
+	_resize = watchSizes(() => this.renderStacked());
+	/** Whether it shows one pane at a time now. */
+	isStacked() {
+		return this.hasAttribute(STACKED);
+	}
 	_refs = this.useRefs((ref) => ({
 		divider: ref(".divider"),
 		split: ref(".split")
@@ -91,6 +113,7 @@ var JlSplitView = class extends JlElement {
 		return css`${BASE_STYLES}${jl_split_view_default}`;
 	}
 	onConnect() {
+		this._resize.observe(this);
 		const divider = this._refs.divider;
 		this.on(divider, "pointerdown", (event) => this.startDrag(event));
 		this.on(divider, "pointermove", (event) => this.drag(event));
@@ -99,6 +122,16 @@ var JlSplitView = class extends JlElement {
 		this.on(divider, "keydown", (event) => this.onKey(event));
 		this.on(divider, "dblclick", () => this.reset());
 	}
+	onDisconnect() {
+		this._resize.disconnect();
+	}
+	renderStacked() {
+		const below = this.stackBelow.get();
+		const stacked = below > 0 && this.getBoundingClientRect().width < below;
+		if (stacked === this.isStacked()) return;
+		this.reflect(STACKED, stacked);
+		this.events.emit("stack", stacked);
+	}
 	current() {
 		return clampSplit(this.position.get(), this.min.get());
 	}
@@ -146,4 +179,4 @@ var JlSplitView = class extends JlElement {
 	}
 };
 JlSplitView.register();
-export { JlSplitView, SPLIT_ORIENTATIONS };
+export { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES };

package/dist/tokens.css

@@ -41,6 +41,8 @@
     --jl-accent-soft: #e9f4fb;
     --jl-accent-line: #b7dbf2;
     --jl-on-accent: #ffffff;
+    /* What is drawn on the brand's blue, such as an app's icon: white in both themes, as a favicon is. */
+    --jl-on-brand: #ffffff;
 
     --jl-ok: #17784a;
     --jl-ok-soft: #ecf6f0;

package/dist/types/jl-app-icon.types.d.ts

@@ -0,0 +1,5 @@
+/** The colours an app's icon is drawn in as a file: its tile's and its glyph's. */
+export type AppIconColors = {
+    tile: string;
+    glyph: string;
+};

package/dist/types/jl-command-palette.types.d.ts

@@ -4,10 +4,17 @@ export type PaletteCommand = {
     /** The heading the command is listed under. */
     group?: string;
     icon?: string;
+    /** What it is, beside its label and quieter: a record's type, a person's username. Tells apart two of one name. */
+    description?: string;
     /** Keys shown beside it, joined by `+`: `mod+shift+p` (`mod` is ⌘ on Apple, Ctrl elsewhere). */
     shortcut?: string;
     /** Other words that find it: `["preferences", "options"]` for "Settings". */
     keywords?: string[];
+    /**
+     * Found by the page for what was typed (a record, a person, "Open" with the ID pasted): listed whatever the
+     * search, since the page chose it already, after the commands the search matches.
+     */
+    result?: boolean;
 };
 /** A command that matches the search, with the places of the matched letters in its label. */
 export type PaletteMatch = {

package/dist/types/jl-facts.types.d.ts

@@ -0,0 +1,17 @@
+/** One fact about a thing: its label and value. A fact without a value is left out. */
+export type Fact = {
+    label: string;
+    value: string | number | null;
+    /** Drawn in the monospace font and broken anywhere: an identifier, a digest, a path. */
+    code?: boolean;
+    /** An address: the value is a link to it. */
+    href?: string;
+    /** The value's tooltip. */
+    hint?: string;
+    /** Names the fact for a renderer of `renderers`, which then draws its value. */
+    key?: string;
+};
+/** Draws a fact's value: a badge, links, a list. */
+export type FactRenderer = (fact: Fact) => Node;
+/** `horizontal` puts each label beside its value, `vertical` over it, the facts side by side. */
+export type FactsOrientation = 'horizontal' | 'vertical';

package/dist/types/jl-side-nav.types.d.ts

@@ -6,6 +6,8 @@ export type SideNavItem = {
     icon?: string;
     /** A link to follow; without it the item is a button that fires `select`. */
     href?: string;
+    /** Where the link opens: `_blank` for a new tab (the API's documentation beside the app). */
+    target?: string;
     /** A count or a short word beside the label: `3`, `New`. */
     badge?: string | number;
     children?: SideNavItem[];

package/dist/types/jl-split-view.types.d.ts

@@ -1,2 +1,4 @@
 /** `horizontal` puts the panes side by side, `vertical` one above the other. */
 export type SplitOrientation = 'horizontal' | 'vertical';
+/** The pane a stacked split view shows: the list (`start`), or the item opened from it (`end`). */
+export type SplitPane = 'start' | 'end';

package/dist/types/jl-steps.types.d.ts

@@ -2,6 +2,8 @@
 export type StepItem = {
     label: string;
     description?: string;
+    /** The step ended in failure (a payment refused, a transaction rolled back): an × in the danger colour. */
+    failed?: boolean;
 };
 export type StepsOrientation = 'horizontal' | 'vertical';
 /** Where a step stands against the current one. */

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

@@ -1,6 +1,6 @@
 import type { Tone } from './options.types';
-/** How a cell shows its value: as it is, a localised number or date, a badge, or code. */
-export type TableCellFormat = 'text' | 'number' | 'date' | 'badge' | 'code';
+/** How a cell shows its value: as it is, a localised number, date or date and time, a badge, or code. */
+export type TableCellFormat = 'text' | 'number' | 'date' | 'datetime' | 'badge' | 'code';
 export type TableAlign = 'left' | 'center' | 'right';
 /** The order of a sorted column; `none` keeps the rows as they came. */
 export type TableSortDirection = 'asc' | 'desc' | 'none';
@@ -16,6 +16,13 @@ export type TableColumn = {
     format?: TableCellFormat;
     /** For badges: the tone of each value (`{ "Active": "ok" }`); neutral otherwise. */
     tones?: Record<string, Tone>;
+    /** The row's field shown as a quieter line under the value: a package's format under its name. */
+    description?: string;
+    /**
+     * Long text, a description or a note, breaks over lines instead of widening the table; cells stay on one line
+     * otherwise.
+     */
+    wrap?: boolean;
 };
 export type TableRow = Record<string, unknown>;
 /** A row's identity, the value of its `row-key` field. */

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

@@ -16,8 +16,49 @@ export type ToastOptions = {
     actionLabel?: string;
     /** Called when that button is pressed; the toast then closes. */
     onAction?: () => void;
+    /** Shows a progress bar under the text, while the work it tells about runs. */
+    working?: boolean;
+    /** How far that work is, in percent; `null` for work of unknown length. */
+    progress?: number | null;
 };
-/** What `toast()` returns: a way to close the notification before its time. */
+/** What `toast()` returns: a way to change the notification while it shows, and to close it before its time. */
 export type ToastHandle = {
+    /** Changes what the toast says (its text, tone, progress, action…): the options given replace those it had. */
+    update(changes: ToastOptions): void;
     dismiss(): void;
 };
+/** The texts a download's toast shows: `{time}`, `{received}`, `{total}`, `{name}`, `{size}` and `{error}` are filled. */
+export type DownloadTexts = {
+    /** While the server prepares the file: "Preparing the file… {time}". */
+    preparing: string;
+    /** Bytes received, of a size the server did not say: "{received} received". */
+    received: string;
+    /** Bytes received of the size the server said: "{received} of {total}". */
+    receivedOf: string;
+    /** Saved: "Saved as {name}, {size}". */
+    saved: string;
+    /** Failed: "Not downloaded: {error}". */
+    failed: string;
+    /** The action that stops it. */
+    cancel: string;
+};
+export type DownloadOptions = {
+    /** The toast's heading: what is downloaded ("METS of Letters 1902"); the file's name otherwise. */
+    title?: string;
+    /** The name to save under when the server gives none; the address's last segment otherwise. */
+    fileName?: string;
+    /** The request's options: headers, credentials… */
+    init?: RequestInit;
+    texts?: Partial<DownloadTexts>;
+};
+/** How a download ended: saved (under a name, its size in bytes), failed (why), or canceled. */
+export type DownloadResult = {
+    outcome: 'saved';
+    name: string;
+    size: number;
+} | {
+    outcome: 'failed';
+    error: string;
+} | {
+    outcome: 'canceled';
+};