@syware/jlib 0.6.0 → 0.7.0

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

@@ -1,9 +1,12 @@
 import { JlElement } from '../base/jl-element';
-import type { TreeItem } from '../types/jl-tree.types';
+import type { TreeItem, TreeLoader } from '../types/jl-tree.types';
 /**
  * Nested items that open and close, as files in folders: `items` holds them, `expanded` lists the open folders and
- * `value` is the selected item. The keyboard follows the tree pattern: Up and Down move, Right opens or enters a
- * folder, Left closes it or goes to the parent, Home and End jump, Enter selects. Emits `select` and `toggle`.
+ * `value` is the selected item. With a `loader`, the tree loads itself a level at a time and a page at a time, so a
+ * large archive opens without loading everything: the roots first, a `lazy` folder's children when it opens, and
+ * the next page of a level from the button that ends it. The keyboard follows the tree pattern: Up and Down move,
+ * Right opens or enters a folder, Left closes it or goes to the parent, Home and End jump, Enter selects. Emits
+ * `select` and `toggle`; an item with an `href` is a link instead.
  */
 export declare class JlTree extends JlElement {
     static readonly selector = "jl-tree";
@@ -33,24 +36,88 @@ export declare class JlTree extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** What an empty tree says, such as "No object yet"; none by default. */
+    readonly emptyText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Said while a page loads. */
+    readonly loadingText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The button that loads a level's next page; `{count}` is how many items are left. */
+    readonly moreText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Said where a page could not be loaded. */
+    readonly errorText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The action that loads it again. */
+    readonly retryLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _source;
     private readonly _rows;
     private readonly _focus;
+    private readonly _loading;
     private readonly _refs;
+    /** Loads the items a page at a time; setting it forgets `items` and loads the roots. */
+    get loader(): TreeLoader | null;
+    set loader(loader: TreeLoader | null);
     /** Opens or closes a folder, as a press on its chevron would. */
     toggle(id: string, open: boolean): void;
+    /** Forgets what the loader gave and loads the roots again. */
+    reload(): Promise<void>;
+    /**
+     * Shows an item given the ids from its root down to it: opens the folders on the way, loading their levels and
+     * pages as needed, then selects it, without firing `select`. False when an id is not found where the path says.
+     */
+    reveal(path: readonly string[]): Promise<boolean>;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
     private idOf;
-    /** A press selects the item; on a folder it also opens or closes it, and the chevron only does that. */
+    /**
+     * A press selects the item; on a folder it also opens or closes it, and the chevron only does that. A link's row
+     * leaves a modified click (a new tab) to the browser.
+     */
     private press;
     private handleKey;
+    /** Enter on an item: the row that ends a level loads its page, a link is followed, an item is selected. */
+    private activate;
+    /** Marks the item; one that is not a link says so with `select`. */
     private select;
     private findItem;
     /** One item takes the Tab stop: the focused one, else the selected one, else the first. */
     private moveFocus;
+    private hasFocusInside;
+    private scrollToRow;
+    /** Loads a page of a level, once at a time: a second call while it loads waits for the same page. */
+    private loadLevel;
+    private loadNextPage;
+    private addPage;
+    private failLevel;
+    /** The open folders whose children the loader has not given yet: their first page. */
+    private loadOpenFolders;
+    /** The item of an id in a level, loading the level's next pages until it shows or none is left. */
+    private findInLevel;
+    private openFolder;
+    private levelEnd;
+    private hasLevelEndRow;
     private renderItems;
     private itemNode;
+    /** The row that ends a level, if it has one. */
+    private levelEndNodes;
+    private levelEndRow;
+    private loadingNode;
+    private moreNode;
+    private errorNode;
+    private noteNode;
     private renderExpanded;
     private isVisible;
     /** The item itself when it shows, else the nearest folder around it that does: the focus goes there. */

package/dist/organisms/jl-tree.js

@@ -2,16 +2,20 @@ 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 { allItems, isFolder, treeKeyAction, withExpanded } from "../lib/tree.js";
+import { isModifiedClick, setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlSpinner } from "../atoms/jl-spinner.js";
+import { pageLocale } from "../lib/locale.js";
+import { allItems, childrenOf, isFolder, treeKeyAction, withExpanded, withExtraRows, withPage } from "../lib/tree.js";
 import jl_tree_default from "./jl-tree.css_raw.js";
 import { css } from "@jadis/core";
-import { ChevronRight, File, Folder, FolderOpen } from "lucide";
+import { ChevronRight, CircleAlert, File, Folder, FolderOpen } from "lucide";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/organisms/jl-tree.tsx
 registerIcons({
 	"chevron-right": ChevronRight,
+	"circle-alert": CircleAlert,
 	file: File,
 	folder: Folder,
 	"folder-open": FolderOpen
@@ -21,10 +25,20 @@ var CHEVRON_SIZE = 14;
 var FOLDER_ICON = "folder";
 var OPEN_FOLDER_ICON = "folder-open";
 var FILE_ICON = "file";
+var ERROR_ICON = "circle-alert";
+var LEVEL_END_PREFIX = "jl-tree-level-end:";
+var COUNT_PLACEHOLDER = "{count}";
+var levelEndId = (parent) => `${LEVEL_END_PREFIX}${parent ?? ""}`;
+var isLevelEnd = (id) => id.startsWith(LEVEL_END_PREFIX);
+var parentOfLevelEnd = (id) => id.slice(18) || null;
+var messageOf = (error) => error instanceof Error ? error.message : String(error);
 /**
 * Nested items that open and close, as files in folders: `items` holds them, `expanded` lists the open folders and
-* `value` is the selected item. The keyboard follows the tree pattern: Up and Down move, Right opens or enters a
-* folder, Left closes it or goes to the parent, Home and End jump, Enter selects. Emits `select` and `toggle`.
+* `value` is the selected item. With a `loader`, the tree loads itself a level at a time and a page at a time, so a
+* large archive opens without loading everything: the roots first, a `lazy` folder's children when it opens, and
+* the next page of a level from the button that ends it. The keyboard follows the tree pattern: Up and Down move,
+* Right opens or enters a folder, Left closes it or goes to the parent, Home and End jump, Enter selects. Emits
+* `select` and `toggle`; an item with an `href` is a link instead.
 */
 var JlTree = class extends JlElement {
 	static selector = "jl-tree";
@@ -34,7 +48,10 @@ var JlTree = class extends JlElement {
 		parse: jsonOf([])
 	});
 	/** The ids of the open folders. */
-	expanded = this.useChange([], () => this.renderExpanded(), {
+	expanded = this.useChange([], () => {
+		this.renderExpanded();
+		this.loadOpenFolders();
+	}, {
 		attribute: "expanded",
 		parse: jsonOf([])
 	});
@@ -42,9 +59,32 @@ var JlTree = class extends JlElement {
 	value = this.useChange("", () => this.renderSelection(), { attribute: "value" });
 	/** The tree's name for screen readers. */
 	label = this.useChange("", (value) => setOrRemove(this._refs.tree, "aria-label", value), { attribute: "label" });
+	/** What an empty tree says, such as "No object yet"; none by default. */
+	emptyText = this.useChange("", () => this.renderItems(), { attribute: "empty-text" });
+	/** Said while a page loads. */
+	loadingText = this.useChange(jlText("loadingMore"), () => this.renderItems(), { attribute: "loading-text" });
+	/** The button that loads a level's next page; `{count}` is how many items are left. */
+	moreText = this.useChange(jlText("showMoreCount"), () => this.renderItems(), { attribute: "more-text" });
+	/** Said where a page could not be loaded. */
+	errorText = this.useChange(jlText("loadError"), () => this.renderItems(), { attribute: "error-text" });
+	/** The action that loads it again. */
+	retryLabel = this.useChange(jlText("retry"), () => this.renderItems(), { attribute: "retry-label" });
+	_source = { loader: null };
 	_rows = /* @__PURE__ */ new Map();
 	_focus = { id: "" };
+	_loading = {
+		generation: 0,
+		levels: /* @__PURE__ */ new Map()
+	};
 	_refs = this.useRefs((ref) => ({ tree: ref(".tree") }));
+	/** Loads the items a page at a time; setting it forgets `items` and loads the roots. */
+	get loader() {
+		return this._source.loader;
+	}
+	set loader(loader) {
+		this._source.loader = loader;
+		this.whenRendered(() => void this.reload());
+	}
 	/** Opens or closes a folder, as a press on its chevron would. */
 	toggle(id, open) {
 		this.expanded.set(withExpanded(this.expanded.get(), id, open));
@@ -53,6 +93,30 @@ var JlTree = class extends JlElement {
 			open
 		});
 	}
+	/** Forgets what the loader gave and loads the roots again. */
+	async reload() {
+		if (this.loader === null) return;
+		this._loading.generation += 1;
+		this._loading.levels.clear();
+		this.items.set([]);
+		await this.loadLevel(null, 0);
+	}
+	/**
+	* Shows an item given the ids from its root down to it: opens the folders on the way, loading their levels and
+	* pages as needed, then selects it, without firing `select`. False when an id is not found where the path says.
+	*/
+	async reveal(path) {
+		const target = path.at(-1);
+		if (target === void 0) return false;
+		for (const [index, id] of path.entries()) {
+			if (!await this.findInLevel(index === 0 ? null : path[index - 1] ?? null, id)) return false;
+			if (index < path.length - 1) await this.openFolder(id);
+		}
+		this.value.set(target);
+		this.moveFocus(target, false);
+		this.scrollToRow(target);
+		return true;
+	}
 	templateHtml() {
 		return /* @__PURE__ */ jsx("div", {
 			class: "tree",
@@ -75,30 +139,53 @@ var JlTree = class extends JlElement {
 	idOf(target) {
 		return (target instanceof Element ? target.closest("[role=\"treeitem\"]") : null)?.dataset.id ?? null;
 	}
-	/** A press selects the item; on a folder it also opens or closes it, and the chevron only does that. */
+	/**
+	* A press selects the item; on a folder it also opens or closes it, and the chevron only does that. A link's row
+	* leaves a modified click (a new tab) to the browser.
+	*/
 	press(event) {
 		const id = this.idOf(event.target);
+		if (id !== null && isLevelEnd(id)) {
+			this.loadNextPage(parentOfLevelEnd(id));
+			return;
+		}
 		const item = id === null ? void 0 : this.findItem(id);
 		if (id === null || item === void 0) return;
 		const onChevron = event.target instanceof Element && event.target.closest(".chevron") !== null;
+		if (onChevron) event.preventDefault();
+		if (item.href !== void 0 && !onChevron && isModifiedClick(event)) return;
 		if (isFolder(item)) this.toggle(id, !this.expanded.get().includes(id));
-		if (!onChevron) this.select(id);
+		if (!onChevron) this.select(item);
 		this.moveFocus(id, true);
 	}
 	handleKey(event) {
 		const focused = this._focus.id;
-		const action = treeKeyAction(this.items.get(), new Set(this.expanded.get()), focused, event.key);
+		const keyboardItems = withExtraRows(this.items.get(), (parent) => this.hasLevelEndRow(parent) ? levelEndId(parent) : null);
+		const action = treeKeyAction(keyboardItems, new Set(this.expanded.get()), focused, event.key);
 		if (action === null) return;
 		event.preventDefault();
 		({
 			focus: () => this.moveFocus(action.id, true),
-			select: () => this.select(action.id),
+			select: () => this.activate(action.id),
 			toggle: () => this.toggle(action.id, action.kind === "toggle" && action.open)
 		})[action.kind]();
 	}
-	select(id) {
-		this.value.set(id);
-		this.events.emit("select", id);
+	/** Enter on an item: the row that ends a level loads its page, a link is followed, an item is selected. */
+	activate(id) {
+		if (isLevelEnd(id)) {
+			this.loadNextPage(parentOfLevelEnd(id));
+			return;
+		}
+		const item = this.findItem(id);
+		if (item === void 0) return;
+		this.select(item);
+		const link = this._rows.get(id)?.querySelector(":scope > a.row");
+		if (link) location.assign(link.href);
+	}
+	/** Marks the item; one that is not a link says so with `select`. */
+	select(item) {
+		this.value.set(item.id);
+		if (item.href === void 0) this.events.emit("select", item.id);
 	}
 	findItem(id) {
 		return allItems(this.items.get()).find((entry) => entry.item.id === id)?.item;
@@ -112,18 +199,133 @@ var JlTree = class extends JlElement {
 		row.setAttribute("tabindex", "0");
 		if (focus) row.focus();
 	}
+	hasFocusInside() {
+		const active = this.shadowRoot?.activeElement;
+		return active instanceof Element && this._refs.tree.contains(active);
+	}
+	scrollToRow(id) {
+		const row = this._rows.get(id);
+		if (row !== void 0 && typeof row.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
+	}
+	/** Loads a page of a level, once at a time: a second call while it loads waits for the same page. */
+	loadLevel(parent, offset) {
+		const loader = this.loader;
+		const level = this._loading.levels.get(parent);
+		if (loader === null) return Promise.resolve();
+		if (level !== void 0 && level.pending !== null) return level.pending;
+		const generation = this._loading.generation;
+		const pending = Promise.resolve().then(() => loader(parent, offset)).then((page) => this.addPage(parent, page, generation), (error) => this.failLevel(parent, error, generation));
+		this._loading.levels.set(parent, {
+			error: "",
+			pending,
+			total: level?.total ?? 0
+		});
+		this.whenRendered(() => this.renderItems());
+		return pending;
+	}
+	loadNextPage(parent) {
+		this.loadLevel(parent, childrenOf(this.items.get(), parent).length);
+	}
+	addPage(parent, page, generation) {
+		if (generation !== this._loading.generation) return;
+		const focusFirst = this._focus.id === levelEndId(parent) && this.hasFocusInside();
+		const loaded = childrenOf(this.items.get(), parent).length + page.items.length;
+		const total = page.items.length === 0 ? loaded : page.total;
+		this._loading.levels.set(parent, {
+			error: "",
+			pending: null,
+			total
+		});
+		this.items.set(withPage(this.items.get(), parent, page.items));
+		this.loadOpenFolders();
+		const first = page.items[0];
+		if (focusFirst && first !== void 0) this.moveFocus(first.id, true);
+	}
+	failLevel(parent, error, generation) {
+		if (generation !== this._loading.generation) return;
+		const total = this._loading.levels.get(parent)?.total ?? 0;
+		this._loading.levels.set(parent, {
+			error: messageOf(error) || this.errorText.get(),
+			pending: null,
+			total
+		});
+		this.whenRendered(() => this.renderItems());
+	}
+	/** The open folders whose children the loader has not given yet: their first page. */
+	loadOpenFolders() {
+		for (const id of this.expanded.get()) if (this.findItem(id)?.lazy === true && !this._loading.levels.has(id)) this.loadLevel(id, 0);
+	}
+	/** The item of an id in a level, loading the level's next pages until it shows or none is left. */
+	async findInLevel(parent, id) {
+		const isThere = () => childrenOf(this.items.get(), parent).some((item) => item.id === id);
+		await this._loading.levels.get(parent)?.pending;
+		while (!isThere() && this.levelEnd(parent) === "more") await this.loadLevel(parent, childrenOf(this.items.get(), parent).length);
+		return isThere();
+	}
+	async openFolder(id) {
+		if (!this.expanded.get().includes(id)) this.expanded.set(withExpanded(this.expanded.get(), id, true));
+		await this._loading.levels.get(id)?.pending;
+	}
+	levelEnd(parent) {
+		const level = this._loading.levels.get(parent);
+		if (level !== void 0 && level.pending !== null) return "loading";
+		if (level !== void 0 && level.error !== "") return "error";
+		if (level !== void 0 && level.total > childrenOf(this.items.get(), parent).length) return "more";
+		return parent === null && this.items.get().length === 0 && this.emptyText.get() !== "" ? "empty" : "none";
+	}
+	hasLevelEndRow(parent) {
+		const end = this.levelEnd(parent);
+		return end !== "none" && end !== "empty";
+	}
 	renderItems() {
+		const hadFocus = this.hasFocusInside();
 		this._rows.clear();
-		this._refs.tree.replaceChildren(...this.items.get().map((item) => this.itemNode(item, 1)));
+		this._refs.tree.replaceChildren(...this.items.get().map((item) => this.itemNode(item, 1)), ...this.levelEndNodes(null, 1));
 		this.renderExpanded();
 		this.renderSelection();
-		const start = this._rows.has(this.value.get()) ? this.value.get() : this.items.get()[0]?.id ?? "";
-		this.moveFocus(this._rows.has(this._focus.id) ? this._focus.id : start, false);
+		const first = this._rows.keys().next().value ?? "";
+		const start = this._rows.has(this.value.get()) ? this.value.get() : first;
+		this.moveFocus(this._rows.has(this._focus.id) ? this._focus.id : start, hadFocus);
 	}
 	itemNode(item, level) {
 		const folder = isFolder(item);
 		const labelId = uniqueId("tree-label");
 		const iconClass = item.icon === void 0 && folder ? "icon auto" : "icon";
+		const content = [
+			/* @__PURE__ */ jsx("span", {
+				class: "chevron",
+				"aria-hidden": "true",
+				children: folder ? /* @__PURE__ */ jsx(JlIcon, {
+					name: "chevron-right",
+					size: CHEVRON_SIZE
+				}) : null
+			}),
+			/* @__PURE__ */ jsx(JlIcon, {
+				class: iconClass,
+				size: ICON_SIZE,
+				name: item.icon ?? (folder ? FOLDER_ICON : FILE_ICON)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				class: "label",
+				id: labelId,
+				children: item.label
+			}),
+			item.badge === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				class: "badge",
+				children: String(item.badge)
+			})
+		];
+		const row = item.href === void 0 ? /* @__PURE__ */ jsx("div", {
+			class: "row",
+			title: item.hint,
+			children: content
+		}) : /* @__PURE__ */ jsx("a", {
+			class: "row",
+			href: item.href,
+			title: item.hint,
+			tabIndex: -1,
+			children: content
+		});
 		const node = /* @__PURE__ */ jsx("div", {
 			class: "item",
 			role: "treeitem",
@@ -131,29 +333,7 @@ var JlTree = class extends JlElement {
 			tabIndex: -1,
 			"aria-selected": "false",
 			"aria-labelledby": labelId,
-			children: /* @__PURE__ */ jsxs("div", {
-				class: "row",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						class: "chevron",
-						"aria-hidden": "true",
-						children: folder ? /* @__PURE__ */ jsx(JlIcon, {
-							name: "chevron-right",
-							size: CHEVRON_SIZE
-						}) : null
-					}),
-					/* @__PURE__ */ jsx(JlIcon, {
-						class: iconClass,
-						size: ICON_SIZE,
-						name: item.icon ?? (folder ? FOLDER_ICON : FILE_ICON)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						class: "label",
-						id: labelId,
-						children: item.label
-					})
-				]
-			})
+			children: row
 		});
 		node.style.setProperty("--level", String(level - 1));
 		this._rows.set(item.id, node);
@@ -163,11 +343,94 @@ var JlTree = class extends JlElement {
 				role: "group"
 			});
 			group.style.setProperty("--level", String(level - 1));
-			group.replaceChildren(...(item.children ?? []).map((child) => this.itemNode(child, level + 1)));
+			group.replaceChildren(...(item.children ?? []).map((child) => this.itemNode(child, level + 1)), ...this.levelEndNodes(item.id, level + 1));
 			node.append(group);
 		}
 		return node;
 	}
+	/** The row that ends a level, if it has one. */
+	levelEndNodes(parent, level) {
+		return {
+			empty: () => [this.noteNode(this.emptyText.get(), level)],
+			error: () => [this.errorNode(parent, level)],
+			loading: () => [this.loadingNode(parent, level)],
+			more: () => [this.moreNode(parent, level)],
+			none: () => []
+		}[this.levelEnd(parent)]();
+	}
+	levelEndRow(parent, level, content, disabled) {
+		const id = levelEndId(parent);
+		const node = /* @__PURE__ */ jsx("div", {
+			class: "item level-end",
+			role: "treeitem",
+			"data-id": id,
+			tabIndex: -1,
+			"aria-disabled": disabled ? "true" : void 0,
+			children: /* @__PURE__ */ jsxs("div", {
+				class: "row",
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "chevron",
+					"aria-hidden": "true"
+				}), content]
+			})
+		});
+		node.style.setProperty("--level", String(level - 1));
+		this._rows.set(id, node);
+		return node;
+	}
+	loadingNode(parent, level) {
+		const text = this.loadingText.get();
+		return this.levelEndRow(parent, level, [/* @__PURE__ */ jsx(JlSpinner, {
+			class: "spinner",
+			size: ICON_SIZE,
+			label: text
+		}), /* @__PURE__ */ jsx("span", {
+			class: "label",
+			"aria-hidden": "true",
+			children: text
+		})], true);
+	}
+	moreNode(parent, level) {
+		const left = (this._loading.levels.get(parent)?.total ?? 0) - childrenOf(this.items.get(), parent).length;
+		const text = this.moreText.get().replace(COUNT_PLACEHOLDER, left.toLocaleString(pageLocale()));
+		return this.levelEndRow(parent, level, [/* @__PURE__ */ jsx("span", {
+			class: "label more",
+			children: text
+		})], false);
+	}
+	errorNode(parent, level) {
+		const node = this.levelEndRow(parent, level, [
+			/* @__PURE__ */ jsx(JlIcon, {
+				class: "icon error",
+				size: ICON_SIZE,
+				name: ERROR_ICON
+			}),
+			/* @__PURE__ */ jsx("span", {
+				class: "label",
+				children: this.errorText.get()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				class: "retry",
+				children: this.retryLabel.get()
+			})
+		], false);
+		setOrRemove(node, "title", this._loading.levels.get(parent)?.error ?? "");
+		return node;
+	}
+	noteNode(text, level) {
+		const node = /* @__PURE__ */ jsxs("div", {
+			class: "note",
+			children: [/* @__PURE__ */ jsx("span", {
+				class: "chevron",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx("span", {
+				class: "label",
+				children: text
+			})]
+		});
+		node.style.setProperty("--level", String(level - 1));
+		return node;
+	}
 	renderExpanded() {
 		const expanded = new Set(this.expanded.get());
 		for (const [id, row] of this._rows) {

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

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

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

@@ -18,6 +18,14 @@ export declare class JlAppShell extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /**
+     * 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.
+     */
+    readonly narrowHeader: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     private readonly _state;
     private readonly _resize;
     private readonly _refs;
@@ -45,4 +53,6 @@ export declare class JlAppShell extends JlElement {
      * `more` from the tabs (a tab bar's) opens it.
      */
     private renderSlots;
+    /** Narrow, the nav is a drawer: a side nav shows whole there, whether it is folded on a wide screen or not. */
+    private renderDrawer;
 }

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";
@@ -27,14 +29,20 @@ var JlAppShell = class extends JlElement {
 	events = this.useEvents();
 	/** Whether the drawer is open, on narrow screens; wide ones always show the sidebar. */
 	navOpen = this.useChange(false, (value) => this.renderNavOpen(value), { attribute: "nav-open" });
+	/**
+	* 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(() => {
+	_resize = watchSizes(() => {
 		this.renderInert();
 		this.renderShellBottom();
+		this.renderDrawer();
 	});
 	_refs = this.useRefs((ref) => ({
 		aside: ref(".aside"),
@@ -63,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, {
@@ -196,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.js

@@ -2,8 +2,8 @@ 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 { JlIcon } from "../atoms/jl-icon.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";