@syware/jlib 0.0.0-stage → 0.1.0

package/dist/organisms/jl-tree.js

@@ -0,0 +1,198 @@
+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 { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { allItems, isFolder, treeKeyAction, withExpanded } 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 { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-tree.tsx
+registerIcons({
+	"chevron-right": ChevronRight,
+	file: File,
+	folder: Folder,
+	"folder-open": FolderOpen
+});
+var ICON_SIZE = 16;
+var CHEVRON_SIZE = 14;
+var FOLDER_ICON = "folder";
+var OPEN_FOLDER_ICON = "folder-open";
+var FILE_ICON = "file";
+/**
+* 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`.
+*/
+var JlTree = class extends JlElement {
+	static selector = "jl-tree";
+	events = this.useEvents();
+	items = this.useChange([], () => this.renderItems(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	/** The ids of the open folders. */
+	expanded = this.useChange([], () => this.renderExpanded(), {
+		attribute: "expanded",
+		parse: jsonOf([])
+	});
+	/** The id of the selected item. */
+	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" });
+	_rows = /* @__PURE__ */ new Map();
+	_focus = { id: "" };
+	_refs = this.useRefs((ref) => ({ tree: ref(".tree") }));
+	/** Opens or closes a folder, as a press on its chevron would. */
+	toggle(id, open) {
+		this.expanded.set(withExpanded(this.expanded.get(), id, open));
+		this.events.emit("toggle", {
+			id,
+			open
+		});
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "tree",
+			role: "tree",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_tree_default}`;
+	}
+	onConnect() {
+		const tree = this._refs.tree;
+		this.on(tree, "click", (event) => this.press(event));
+		this.on(tree, "keydown", (event) => this.handleKey(event));
+		this.on(tree, "focusin", (event) => {
+			const id = this.idOf(event.target);
+			if (id !== null) this.moveFocus(id, false);
+		});
+	}
+	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. */
+	press(event) {
+		const id = this.idOf(event.target);
+		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 (isFolder(item)) this.toggle(id, !this.expanded.get().includes(id));
+		if (!onChevron) this.select(id);
+		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);
+		if (action === null) return;
+		event.preventDefault();
+		({
+			focus: () => this.moveFocus(action.id, true),
+			select: () => this.select(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);
+	}
+	findItem(id) {
+		return allItems(this.items.get()).find((entry) => entry.item.id === id)?.item;
+	}
+	/** One item takes the Tab stop: the focused one, else the selected one, else the first. */
+	moveFocus(id, focus) {
+		const row = this._rows.get(id);
+		if (row === void 0) return;
+		this._rows.get(this._focus.id)?.setAttribute("tabindex", "-1");
+		this._focus.id = id;
+		row.setAttribute("tabindex", "0");
+		if (focus) row.focus();
+	}
+	renderItems() {
+		this._rows.clear();
+		this._refs.tree.replaceChildren(...this.items.get().map((item) => this.itemNode(item, 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);
+	}
+	itemNode(item, level) {
+		const folder = isFolder(item);
+		const labelId = uniqueId("tree-label");
+		const iconClass = item.icon === void 0 && folder ? "icon auto" : "icon";
+		const node = /* @__PURE__ */ jsx("div", {
+			class: "item",
+			role: "treeitem",
+			"data-id": item.id,
+			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
+					})
+				]
+			})
+		});
+		node.style.setProperty("--level", String(level - 1));
+		this._rows.set(item.id, node);
+		if (folder) {
+			const group = /* @__PURE__ */ jsx("div", {
+				class: "group",
+				role: "group"
+			});
+			group.style.setProperty("--level", String(level - 1));
+			group.replaceChildren(...(item.children ?? []).map((child) => this.itemNode(child, level + 1)));
+			node.append(group);
+		}
+		return node;
+	}
+	renderExpanded() {
+		const expanded = new Set(this.expanded.get());
+		for (const [id, row] of this._rows) {
+			const group = row.querySelector(":scope > .group");
+			if (group === null) continue;
+			const open = expanded.has(id);
+			row.setAttribute("aria-expanded", String(open));
+			group.hidden = !open;
+			row.querySelector(":scope > .row > .icon.auto")?.name.set(open ? OPEN_FOLDER_ICON : FOLDER_ICON);
+		}
+		if (!this.isVisible(this._focus.id)) this.moveFocus(this.visibleAncestor(this._focus.id), false);
+	}
+	isVisible(id) {
+		const row = this._rows.get(id);
+		return row !== void 0 && row.closest(".group[hidden]") === null;
+	}
+	/** The item itself when it shows, else the nearest folder around it that does: the focus goes there. */
+	visibleAncestor(id) {
+		const owner = (this._rows.get(id)?.closest(".group[hidden]"))?.closest("[role=\"treeitem\"]");
+		return owner?.dataset.id === void 0 ? id : this.visibleAncestor(owner.dataset.id);
+	}
+	renderSelection() {
+		const value = this.value.get();
+		for (const [id, row] of this._rows) row.setAttribute("aria-selected", String(id === value));
+	}
+};
+JlTree.register();
+export { JlTree };

package/dist/styles/base.css_raw.js

@@ -0,0 +1,3 @@
+// src/styles/base.css?raw
+var base_default = "/* Shared by every component, first in its shadow root. */\n:host {\n  box-sizing: border-box;\n  font-family: var(--jl-font-sans);\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* A component's own display would otherwise win over the browser's rule for hidden. */\n:host([hidden]) {\n  /* biome-ignore lint/complexity/noImportantStyles: hidden must win over the component's own display */\n  display: none !important;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\n[hidden] {\n  /* biome-ignore lint/complexity/noImportantStyles: hidden must win over every component's own display rule */\n  display: none !important;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n  color: inherit;\n}\n\n:focus-visible {\n  outline: none;\n  box-shadow: var(--jl-focus-ring);\n}\n\nh1,\nh2,\nh3,\nh4,\np,\nul,\nol,\nfigure {\n  margin: 0;\n}\n\ncode,\nkbd,\npre {\n  font-family: var(--jl-font-mono);\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    /* biome-ignore lint/complexity/noImportantStyles: reduced motion must win over every component's animation */\n    animation-duration: 1ms !important;\n    /* biome-ignore lint/complexity/noImportantStyles: an endless animation cut to 1ms would flicker */\n    animation-iteration-count: 1 !important;\n    /* biome-ignore lint/complexity/noImportantStyles: reduced motion must win over every component's transition */\n    transition-duration: 1ms !important;\n  }\n}\n";
+export { base_default as default };

package/dist/styles/control.css_raw.js

@@ -0,0 +1,3 @@
+// src/styles/control.css?raw
+var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
+export { control_default as default };

package/dist/styles/floating.css_raw.js

@@ -0,0 +1,3 @@
+// src/styles/floating.css?raw
+var floating_default = "/*\n * What floats over the page in the top layer (the popover API): tooltips, menus, popovers, lists of options.\n * The browser's own popover box is centred in the window; this one is placed by script next to its anchor.\n */\n.floating {\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--jl-text);\n  overflow: visible;\n}\n\n.floating:popover-open {\n  animation: jl-float-in var(--jl-fast) var(--jl-ease);\n}\n\n/* The look of a floating panel: menus, popovers and lists of options share it. */\n.panel {\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n  box-shadow: var(--jl-shadow-lg);\n}\n\n@keyframes jl-float-in {\n  from {\n    opacity: 0;\n    transform: translateY(-2px) scale(0.98);\n  }\n}\n";
+export { floating_default as default };

package/dist/styles/shared.d.ts

@@ -0,0 +1,8 @@
+/** First in every shadow root. */
+export declare const BASE_STYLES: string;
+/** For the components that hold a text field, a select or a text area: the `.control` frame. */
+export declare const CONTROL_STYLES: string;
+/** For the components that open something over the page: `.floating` (the top-layer box) and `.panel`. */
+export declare const FLOATING_STYLES: string;
+/** The design tokens, adopted by the document when the first component registers. */
+export declare const TOKEN_STYLES: string;

package/dist/styles/shared.js

@@ -0,0 +1,14 @@
+import base_default from "./base.css_raw.js";
+import control_default from "./control.css_raw.js";
+import floating_default from "./floating.css_raw.js";
+import tokens_default from "./tokens.css_raw.js";
+// src/styles/shared.ts
+/** First in every shadow root. */
+var BASE_STYLES = base_default;
+/** For the components that hold a text field, a select or a text area: the `.control` frame. */
+var CONTROL_STYLES = control_default;
+/** For the components that open something over the page: `.floating` (the top-layer box) and `.panel`. */
+var FLOATING_STYLES = floating_default;
+/** The design tokens, adopted by the document when the first component registers. */
+var TOKEN_STYLES = tokens_default;
+export { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES };

package/dist/styles/tokens.css_raw.js

@@ -0,0 +1,3 @@
+// src/styles/tokens.css?raw
+var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n}\n";
+export { tokens_default as default };

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

@@ -0,0 +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.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\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.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      / minmax(0, 1fr);\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";
+export { jl_app_shell_default as default };

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

@@ -0,0 +1,37 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
+ * 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()`), and the panel hides.
+ * It takes the height of its container: give that one a height (`100dvh` for a whole page).
+ */
+export declare class JlAppShell extends JlElement {
+    static readonly selector = "jl-app-shell";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        navtoggle: boolean;
+    }>>;
+    /** Whether the drawer is open, on narrow screens; wide ones always show the sidebar. */
+    readonly navOpen: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _state;
+    private readonly _resize;
+    private readonly _refs;
+    /** Opens or closes the drawer; `force` sets the state instead of flipping it. */
+    toggleNav(force?: boolean): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    /** Whether the shell is narrow: the menu button shows only then. */
+    private isNarrow;
+    private onMenu;
+    private onKey;
+    /** The drawer as people open and close it: says so. */
+    private setNavOpen;
+    private renderNavOpen;
+    private renderInert;
+    /** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+    private renderSlots;
+}

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

@@ -0,0 +1,150 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_app_shell_default from "./jl-app-shell.css_raw.js";
+import { css } from "@jadis/core";
+import { Menu } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/templates/jl-app-shell.tsx
+registerIcons({ menu: Menu });
+var MENU_ICON_SIZE = 18;
+var HIDDEN = "none";
+/** 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 !== "");
+/**
+* The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
+* 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()`), and the panel hides.
+* It takes the height of its container: give that one a height (`100dvh` for a whole page).
+*/
+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" });
+	_state = { navListeners: new AbortController() };
+	_resize = new ResizeObserver(() => this.renderInert());
+	_refs = this.useRefs((ref) => ({
+		aside: ref(".aside"),
+		asideSlot: ref("slot[name=\"aside\"]"),
+		headerSlot: ref("slot[name=\"header\"]"),
+		main: ref("main"),
+		menu: ref(".menu"),
+		nav: ref(".nav"),
+		navSlot: ref("slot[name=\"nav\"]"),
+		scrim: ref(".scrim")
+	}));
+	/** Opens or closes the drawer; `force` sets the state instead of flipping it. */
+	toggleNav(force) {
+		this.setNavOpen(force ?? !this.navOpen.get());
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "shell",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					class: "top",
+					attrs: { part: "header" },
+					children: [/* @__PURE__ */ jsx("button", {
+						class: "menu",
+						type: "button",
+						"aria-label": "Navigation",
+						"aria-expanded": "false",
+						"aria-controls": "nav",
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: "menu",
+							size: MENU_ICON_SIZE
+						})
+					}), /* @__PURE__ */ jsx("slot", { name: "header" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "nav",
+					id: "nav",
+					tabIndex: -1,
+					attrs: { part: "nav" },
+					children: /* @__PURE__ */ jsx("slot", { name: "nav" })
+				}),
+				/* @__PURE__ */ jsx("main", {
+					class: "main",
+					attrs: { part: "main" },
+					children: /* @__PURE__ */ jsx("slot", {})
+				}),
+				/* @__PURE__ */ jsx("aside", {
+					class: "aside",
+					attrs: { part: "aside" },
+					children: /* @__PURE__ */ jsx("slot", { name: "aside" })
+				}),
+				/* @__PURE__ */ jsx("div", { class: "scrim" })
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_app_shell_default}`;
+	}
+	onConnect() {
+		this._resize.observe(this);
+		this.on(this._refs.menu, "click", () => this.onMenu());
+		this.on(this._refs.scrim, "click", () => this.setNavOpen(false));
+		this.on(this._refs.nav, "click", (event) => {
+			if (followsLink(event)) this.setNavOpen(false);
+		});
+		this.on(this, "keydown", (event) => this.onKey(event));
+		this.renderSlots();
+		for (const slot of [
+			this._refs.headerSlot,
+			this._refs.navSlot,
+			this._refs.asideSlot
+		]) this.on(slot, "slotchange", () => this.renderSlots());
+	}
+	onDisconnect() {
+		this._resize.disconnect();
+		this._state.navListeners.abort();
+	}
+	/** Whether the shell is narrow: the menu button shows only then. */
+	isNarrow() {
+		return getComputedStyle(this._refs.menu).display !== HIDDEN;
+	}
+	onMenu() {
+		const opening = !this.navOpen.get();
+		this.setNavOpen(opening);
+		if (opening) this._refs.nav.focus();
+	}
+	onKey(event) {
+		if (event.key !== "Escape" || !this.navOpen.get() || !this.isNarrow()) return;
+		event.preventDefault();
+		this.setNavOpen(false);
+		this._refs.menu.focus();
+	}
+	/** The drawer as people open and close it: says so. */
+	setNavOpen(open) {
+		if (open === this.navOpen.get()) return;
+		this.navOpen.set(open);
+		this.events.emit("navtoggle", open);
+	}
+	renderNavOpen(open) {
+		this.reflect("nav-open", open);
+		this._refs.menu.setAttribute("aria-expanded", String(open));
+		this.renderInert();
+	}
+	renderInert() {
+		const covered = this.navOpen.get() && this.isNarrow();
+		this._refs.main.inert = covered;
+		this._refs.aside.inert = covered;
+	}
+	/** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+	renderSlots() {
+		this.reflect("has-header", this._refs.headerSlot.assignedElements().length > 0);
+		this.reflect("has-aside", this._refs.asideSlot.assignedElements().length > 0);
+		const navElements = this._refs.navSlot.assignedElements();
+		this.reflect("has-nav", navElements.length > 0);
+		this._state.navListeners.abort();
+		this._state.navListeners = new AbortController();
+		const signal = this._state.navListeners.signal;
+		for (const element of navElements) element.addEventListener("select", () => this.setNavOpen(false), { signal });
+		this.renderInert();
+	}
+};
+JlAppShell.register();
+export { JlAppShell };

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

@@ -0,0 +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";
+export { jl_split_view_default as default };

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

@@ -0,0 +1,49 @@
+import { JlElement } from '../base/jl-element';
+import type { SplitOrientation } from '../types/jl-split-view.types';
+export declare const SPLIT_ORIENTATIONS: readonly SplitOrientation[];
+/**
+ * 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.
+ */
+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;
+    }>>;
+    readonly orientation: Readonly<Readonly<{
+        get(): SplitOrientation;
+        set(setter: ((prevState: SplitOrientation) => SplitOrientation) | SplitOrientation): void;
+    }>>;
+    /** The start pane's share of the room, in percent. */
+    readonly position: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The smallest share each pane keeps, in percent (0 to 50). */
+    readonly min: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): 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 _refs;
+    /** Puts the divider back where the page first placed it. */
+    reset(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private current;
+    private startDrag;
+    private drag;
+    private endDrag;
+    private onKey;
+    /** Moves the divider as people asked, and says so when it moved. */
+    private commit;
+    private renderPosition;
+}