@panneau/app 5.0.0-alpha.3 → 5.0.0-alpha.5

package/dist/pages/pages.css

@@ -0,0 +1,162 @@
+.panneau-pages-page {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-5);
+    max-width: 80rem;
+    margin-inline: auto;
+}
+
+.panneau-pages-narrow {
+    max-width: 64rem;
+}
+
+/* With the details of an item next to the list, the page takes the whole width. */
+.panneau-pages-with-panel {
+    max-width: none;
+}
+
+.panneau-pages-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: var(--panneau-space-4);
+}
+
+@container panneau-root (min-width: 80rem) {
+    .panneau-pages-with-panel .panneau-pages-split {
+        grid-template-columns: minmax(0, 1fr) var(--panneau-item-panel-width, 24rem);
+    }
+
+    /* A widened panel, for previews. */
+    .panneau-pages-with-panel .panneau-pages-split:has(> [data-wide]) {
+        grid-template-columns: minmax(0, 1fr) var(--panneau-item-panel-width-wide, 50%);
+    }
+}
+
+.panneau-pages-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--panneau-space-3);
+}
+
+.panneau-pages-header-title {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    min-width: 0;
+}
+
+.panneau-pages-header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-pages-back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    align-self: flex-start;
+    margin-inline-start: calc(-1 * var(--panneau-space-1));
+    padding: 0 var(--panneau-space-1);
+    border-radius: var(--panneau-radius-sm);
+    color: var(--panneau-color-text-muted);
+    font-size: var(--panneau-font-size-sm);
+    text-decoration: none;
+    outline: none;
+}
+
+.panneau-pages-back[data-hovered] {
+    color: var(--panneau-color-text);
+}
+
+.panneau-pages-back[data-focus-visible],
+.panneau-pages-link-button[data-focus-visible],
+.panneau-pages-card[data-focus-visible] {
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-pages-link-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height);
+    padding: 0 var(--panneau-control-padding-x);
+    border-radius: var(--panneau-radius-md);
+    background: var(--panneau-color-accent);
+    color: var(--panneau-color-accent-text);
+    font-size: var(--panneau-font-size-control);
+    font-weight: var(--panneau-font-weight-medium);
+    text-decoration: none;
+    outline: none;
+    transition: background-color var(--panneau-duration);
+}
+
+.panneau-pages-link-button[data-hovered] {
+    background: var(--panneau-color-accent-hover);
+}
+
+.panneau-pages-intro {
+    margin: 0;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-pages-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    gap: var(--panneau-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-pages-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+    height: 100%;
+    padding: var(--panneau-space-4);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+    background: var(--panneau-color-surface);
+    color: var(--panneau-color-text);
+    text-decoration: none;
+    outline: none;
+    transition:
+        border-color var(--panneau-duration),
+        box-shadow var(--panneau-duration);
+}
+
+.panneau-pages-card[data-hovered] {
+    border-color: var(--panneau-color-border-control);
+    box-shadow: var(--panneau-shadow-md);
+}
+
+.panneau-pages-card-icon {
+    display: inline-grid;
+    place-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--panneau-radius-md);
+    background: var(--panneau-color-accent-subtle);
+}
+
+.panneau-pages-card-title {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-pages-card-text {
+    color: var(--panneau-color-text-muted);
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-pages-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--panneau-space-3);
+    padding-block: var(--panneau-space-10);
+    text-align: center;
+}

package/dist/pages/pages.module.js

@@ -0,0 +1,40 @@
+import "./pages.css";
+//#region src/pages/pages.module.css
+var page = "panneau-pages-page";
+var narrow = "panneau-pages-narrow";
+var withPanel = "panneau-pages-with-panel";
+var split = "panneau-pages-split";
+var header = "panneau-pages-header";
+var headerTitle = "panneau-pages-header-title";
+var headerActions = "panneau-pages-header-actions";
+var back = "panneau-pages-back";
+var linkButton = "panneau-pages-link-button";
+var card = "panneau-pages-card";
+var intro = "panneau-pages-intro";
+var cards = "panneau-pages-cards";
+var cardIcon = "panneau-pages-card-icon";
+var cardTitle = "panneau-pages-card-title";
+var cardText = "panneau-pages-card-text";
+var center = "panneau-pages-center";
+var pages_module_default = {
+	page,
+	narrow,
+	withPanel,
+	split,
+	header,
+	headerTitle,
+	headerActions,
+	back,
+	linkButton,
+	card,
+	intro,
+	cards,
+	cardIcon,
+	cardTitle,
+	cardText,
+	center
+};
+//#endregion
+export { back, card, cardIcon, cardText, cardTitle, cards, center, pages_module_default as default, header, headerActions, headerTitle, intro, linkButton, narrow, page, split, withPanel };
+
+//# sourceMappingURL=pages.module.js.map

package/dist/pages/pages.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages.module.js","names":[],"sources":["../../src/pages/pages.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-5);\n    max-width: 80rem;\n    margin-inline: auto;\n}\n\n.narrow {\n    max-width: 64rem;\n}\n\n/* With the details of an item next to the list, the page takes the whole width. */\n.withPanel {\n    max-width: none;\n}\n\n.split {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-items: start;\n    gap: var(--panneau-space-4);\n}\n\n@container panneau-root (min-width: 80rem) {\n    .withPanel .split {\n        grid-template-columns: minmax(0, 1fr) var(--panneau-item-panel-width, 24rem);\n    }\n\n    /* A widened panel, for previews. */\n    .withPanel .split:has(> [data-wide]) {\n        grid-template-columns: minmax(0, 1fr) var(--panneau-item-panel-width-wide, 50%);\n    }\n}\n\n.header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--panneau-space-3);\n}\n\n.headerTitle {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.headerActions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n}\n\n.back {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    align-self: flex-start;\n    margin-inline-start: calc(-1 * var(--panneau-space-1));\n    padding: 0 var(--panneau-space-1);\n    border-radius: var(--panneau-radius-sm);\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-sm);\n    text-decoration: none;\n    outline: none;\n}\n\n.back[data-hovered] {\n    color: var(--panneau-color-text);\n}\n\n.back[data-focus-visible],\n.linkButton[data-focus-visible],\n.card[data-focus-visible] {\n    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.linkButton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-control-padding-x);\n    border-radius: var(--panneau-radius-md);\n    background: var(--panneau-color-accent);\n    color: var(--panneau-color-accent-text);\n    font-size: var(--panneau-font-size-control);\n    font-weight: var(--panneau-font-weight-medium);\n    text-decoration: none;\n    outline: none;\n    transition: background-color var(--panneau-duration);\n}\n\n.linkButton[data-hovered] {\n    background: var(--panneau-color-accent-hover);\n}\n\n.intro {\n    margin: 0;\n    color: var(--panneau-color-text-muted);\n}\n\n.cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    height: 100%;\n    padding: var(--panneau-space-4);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    background: var(--panneau-color-surface);\n    color: var(--panneau-color-text);\n    text-decoration: none;\n    outline: none;\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.card[data-hovered] {\n    border-color: var(--panneau-color-border-control);\n    box-shadow: var(--panneau-shadow-md);\n}\n\n.cardIcon {\n    display: inline-grid;\n    place-items: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    border-radius: var(--panneau-radius-md);\n    background: var(--panneau-color-accent-subtle);\n}\n\n.cardTitle {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.cardText {\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.center {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--panneau-space-3);\n    padding-block: var(--panneau-space-10);\n    text-align: center;\n}\n"],"mappings":""}

package/dist/preferences.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A choice of the user that the browser remembers (`localStorage`), such as a collapsed sidebar.
+ * `null` until the user makes it, and when the stored value isn't allowed or can't be read.
+ */
+export declare function usePreference<T extends string>(key: string, allowed: readonly T[]): [T | null, (value: T) => void];
+//# sourceMappingURL=preferences.d.ts.map

package/dist/preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.d.ts","sourceRoot":"","sources":["../src/preferences.ts"],"names":[],"mappings":"AAsBA;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC1C,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,SAAS,CAAC,EAAE,GACtB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAShC"}

package/dist/preferences.js

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { c } from "react/compiler-runtime";
+//#region src/preferences.ts
+var PREFIX = "panneau:";
+function read(key, allowed) {
+	try {
+		const value = window.localStorage.getItem(`${PREFIX}${key}`);
+		return allowed.find((candidate) => candidate === value) ?? null;
+	} catch {
+		return null;
+	}
+}
+function write(key, value) {
+	try {
+		window.localStorage.setItem(`${PREFIX}${key}`, value);
+	} catch {}
+}
+/**
+* A choice of the user that the browser remembers (`localStorage`), such as a collapsed sidebar.
+* `null` until the user makes it, and when the stored value isn't allowed or can't be read.
+*/
+function usePreference(key, allowed) {
+	const $ = c(8);
+	let t0;
+	if ($[0] !== allowed || $[1] !== key) {
+		t0 = () => read(key, allowed);
+		$[0] = allowed;
+		$[1] = key;
+		$[2] = t0;
+	} else t0 = $[2];
+	const [value, setValue] = useState(t0);
+	let t1;
+	if ($[3] !== key) {
+		t1 = (next) => {
+			setValue(next);
+			write(key, next);
+		};
+		$[3] = key;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t1 || $[6] !== value) {
+		t2 = [value, t1];
+		$[5] = t1;
+		$[6] = value;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+//#endregion
+export { usePreference };
+
+//# sourceMappingURL=preferences.js.map

package/dist/preferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.js","names":["_c"],"sources":["../src/preferences.ts"],"sourcesContent":["import { useState } from 'react';\n\nconst PREFIX = 'panneau:';\n\nfunction read<T extends string>(key: string, allowed: readonly T[]): T | null {\n    try {\n        const value = window.localStorage.getItem(`${PREFIX}${key}`);\n        return allowed.find((candidate) => candidate === value) ?? null;\n    } catch {\n        // Storage can be blocked (private windows, site data settings).\n        return null;\n    }\n}\n\nfunction write(key: string, value: string) {\n    try {\n        window.localStorage.setItem(`${PREFIX}${key}`, value);\n    } catch {\n        // The preference then lasts until the page is reloaded.\n    }\n}\n\n/**\n * A choice of the user that the browser remembers (`localStorage`), such as a collapsed sidebar.\n * `null` until the user makes it, and when the stored value isn't allowed or can't be read.\n */\nexport function usePreference<T extends string>(\n    key: string,\n    allowed: readonly T[],\n): [T | null, (value: T) => void] {\n    const [value, setValue] = useState<T | null>(() => read(key, allowed));\n    return [\n        value,\n        (next: T) => {\n            setValue(next);\n            write(key, next);\n        },\n    ];\n}\n"],"mappings":";;;AAEA,IAAM,SAAS;AAEf,SAAS,KAAuB,KAAa,SAAiC;CAC1E,IAAI;EACA,MAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG,SAAS,KAAK;EAC3D,OAAO,QAAQ,MAAM,cAAc,cAAc,KAAK,KAAK;CAC/D,QAAQ;EAEJ,OAAO;CACX;AACJ;AAEA,SAAS,MAAM,KAAa,OAAe;CACvC,IAAI;EACA,OAAO,aAAa,QAAQ,GAAG,SAAS,OAAO,KAAK;CACxD,QAAQ,CACJ;AAER;;;;;AAMA,SAAO,cAAA,KAAA,SAAA;CAAA,MAAA,IAAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,KAAA;EAI0C,WAAM,KAAK,KAAK,OAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAArE,MAAA,CAAA,OAAA,YAA0B,SAAmB,EAAwB;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,KAAA;EAGnE,MAAA,SAAA;GACI,SAAS,IAAI;GACb,MAAM,KAAK,IAAI;EAAC;EACnB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,OAAA;EALE,KAAA,CACH,OACA,EAGC;EACJ,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OANM;AAMN"}

package/dist/recentItems.d.ts

@@ -0,0 +1,15 @@
+/** An item the user opened, for the "Go to…" palette. */
+export interface RecentItem {
+    resource: string;
+    id: string;
+    title: string;
+}
+/** The items the user opened last, the most recent first. Empty when storage can't be read. */
+export declare function readRecentItems(basePath: string, user: string): RecentItem[];
+/** Puts an item first in the recent items, keeping the last 8. */
+export declare function recordRecentItem(basePath: string, user: string, item: RecentItem): void;
+/** The user the recent items belong to: the id of the definition's user. */
+export declare function useRecentScope(): string;
+/** Records an item as opened, once it is loaded and has a title. */
+export declare function useRecordRecentItem(basePath: string, item: RecentItem | null): void;
+//# sourceMappingURL=recentItems.d.ts.map

package/dist/recentItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recentItems.d.ts","sourceRoot":"","sources":["../src/recentItems.ts"],"names":[],"mappings":"AAIA,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AASD,+FAA+F;AAC/F,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,UAAU,EAAE,CAkB5E;AAED,kEAAkE;AAClE,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,QAYhF;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,QAU5E"}

package/dist/recentItems.js

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import { c } from "react/compiler-runtime";
+import { usePanneau } from "@panneau/core";
+//#region src/recentItems.ts
+var LIMIT = 8;
+/** The key of the recent items of an app (its base path) and a user, in `localStorage`. */
+function storageKey(basePath, user) {
+	return `panneau:recent:${basePath}:${user}`;
+}
+/** The items the user opened last, the most recent first. Empty when storage can't be read. */
+function readRecentItems(basePath, user) {
+	try {
+		const stored = JSON.parse(window.localStorage.getItem(storageKey(basePath, user)) ?? "[]");
+		return Array.isArray(stored) ? stored.filter((entry) => typeof entry === "object" && entry !== null && typeof entry.resource === "string" && typeof entry.id === "string" && typeof entry.title === "string") : [];
+	} catch {
+		return [];
+	}
+}
+/** Puts an item first in the recent items, keeping the last 8. */
+function recordRecentItem(basePath, user, item) {
+	const items = [item, ...readRecentItems(basePath, user).filter((entry) => entry.resource !== item.resource || entry.id !== item.id)].slice(0, LIMIT);
+	try {
+		window.localStorage.setItem(storageKey(basePath, user), JSON.stringify(items));
+	} catch {}
+}
+/** The user the recent items belong to: the id of the definition's user. */
+function useRecentScope() {
+	return String(usePanneau().definition?.user?.id ?? "");
+}
+/** Records an item as opened, once it is loaded and has a title. */
+function useRecordRecentItem(basePath, item) {
+	const $ = c(7);
+	const user = useRecentScope();
+	const resource = item?.resource;
+	const id = item?.id;
+	const title = item?.title;
+	let t0;
+	let t1;
+	if ($[0] !== basePath || $[1] !== id || $[2] !== resource || $[3] !== title || $[4] !== user) {
+		t0 = () => {
+			if (resource !== void 0 && id !== void 0 && title !== void 0 && title !== "") recordRecentItem(basePath, user, {
+				resource,
+				id,
+				title
+			});
+		};
+		t1 = [
+			basePath,
+			user,
+			resource,
+			id,
+			title
+		];
+		$[0] = basePath;
+		$[1] = id;
+		$[2] = resource;
+		$[3] = title;
+		$[4] = user;
+		$[5] = t0;
+		$[6] = t1;
+	} else {
+		t0 = $[5];
+		t1 = $[6];
+	}
+	useEffect(t0, t1);
+}
+//#endregion
+export { readRecentItems, recordRecentItem, useRecentScope, useRecordRecentItem };
+
+//# sourceMappingURL=recentItems.js.map

package/dist/recentItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recentItems.js","names":["_c"],"sources":["../src/recentItems.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { usePanneau } from '@panneau/core';\n\n/** An item the user opened, for the \"Go to…\" palette. */\nexport interface RecentItem {\n    resource: string;\n    id: string;\n    title: string;\n}\n\nconst LIMIT = 8;\n\n/** The key of the recent items of an app (its base path) and a user, in `localStorage`. */\nfunction storageKey(basePath: string, user: string): string {\n    return `panneau:recent:${basePath}:${user}`;\n}\n\n/** The items the user opened last, the most recent first. Empty when storage can't be read. */\nexport function readRecentItems(basePath: string, user: string): RecentItem[] {\n    try {\n        const stored: unknown = JSON.parse(\n            window.localStorage.getItem(storageKey(basePath, user)) ?? '[]',\n        );\n        return Array.isArray(stored)\n            ? stored.filter(\n                  (entry): entry is RecentItem =>\n                      typeof entry === 'object' &&\n                      entry !== null &&\n                      typeof (entry as RecentItem).resource === 'string' &&\n                      typeof (entry as RecentItem).id === 'string' &&\n                      typeof (entry as RecentItem).title === 'string',\n              )\n            : [];\n    } catch {\n        return [];\n    }\n}\n\n/** Puts an item first in the recent items, keeping the last 8. */\nexport function recordRecentItem(basePath: string, user: string, item: RecentItem) {\n    const items = [\n        item,\n        ...readRecentItems(basePath, user).filter(\n            (entry) => entry.resource !== item.resource || entry.id !== item.id,\n        ),\n    ].slice(0, LIMIT);\n    try {\n        window.localStorage.setItem(storageKey(basePath, user), JSON.stringify(items));\n    } catch {\n        // The palette then shows no recent items.\n    }\n}\n\n/** The user the recent items belong to: the id of the definition's user. */\nexport function useRecentScope(): string {\n    return String(usePanneau().definition?.user?.id ?? '');\n}\n\n/** Records an item as opened, once it is loaded and has a title. */\nexport function useRecordRecentItem(basePath: string, item: RecentItem | null) {\n    const user = useRecentScope();\n    const resource = item?.resource;\n    const id = item?.id;\n    const title = item?.title;\n    useEffect(() => {\n        if (resource !== undefined && id !== undefined && title !== undefined && title !== '') {\n            recordRecentItem(basePath, user, { resource, id, title });\n        }\n    }, [basePath, user, resource, id, title]);\n}\n"],"mappings":";;;;AAWA,IAAM,QAAQ;;AAGd,SAAS,WAAW,UAAkB,MAAsB;CACxD,OAAO,kBAAkB,SAAQ,GAAI;AACzC;;AAGA,SAAgB,gBAAgB,UAAkB,MAA4B;CAC1E,IAAI;EACA,MAAM,SAAkB,KAAK,MACzB,OAAO,aAAa,QAAQ,WAAW,UAAU,IAAI,CAAC,KAAK,IAC/D;EACA,OAAO,MAAM,QAAQ,MAAM,IACrB,OAAO,QACF,UACG,OAAO,UAAU,YACjB,UAAU,QACV,OAAQ,MAAqB,aAAa,YAC1C,OAAQ,MAAqB,OAAO,YACpC,OAAQ,MAAqB,UAAU,QAC/C,IACA,CAAA;CACV,QAAQ;EACJ,OAAO,CAAA;CACX;AACJ;;AAGA,SAAgB,iBAAiB,UAAkB,MAAc,MAAkB;CAC/E,MAAM,QAAQ,CACV,MACA,GAAG,gBAAgB,UAAU,IAAI,CAAC,CAAC,QAC9B,UAAU,MAAM,aAAa,KAAK,YAAY,MAAM,OAAO,KAAK,EACrE,CAAC,CACJ,CAAC,MAAM,GAAG,KAAK;CAChB,IAAI;EACA,OAAO,aAAa,QAAQ,WAAW,UAAU,IAAI,GAAG,KAAK,UAAU,KAAK,CAAC;CACjF,QAAQ,CACJ;AAER;;AAGA,SAAO,iBAAA;CAAA,OACI,OAAO,WAAW,CAAC,CAAA,YAAiB,MAAI,MAAjC,EAAuC;AAAC;;AAI1D,SAAO,oBAAA,UAAA,MAAA;CAAA,MAAA,IAAAA,EAAA,CAAA;CACH,MAAA,OAAa,eAAe;CAC5B,MAAA,WAAiB,MAAI;CACrB,MAAA,KAAW,MAAI;CACf,MAAA,QAAc,MAAI;CAAQ,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,YAAA,EAAA,OAAA,SAAA,EAAA,OAAA,MAAA;EAChB,WAAA;GACN,IAAI,aAAa,KAAA,KAAa,OAAO,KAAA,KAAa,UAAU,KAAA,KAAa,UAAU,IAC/E,iBAAiB,UAAU,MAAM;IAAA;IAAA;IAAA;GAAsB,CAAC;EAC3D;EACF,KAAA;GAAC;GAAU;GAAM;GAAU;GAAI;EAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAJxC,UAAU,IAIP,EAAqC;AAAC"}

package/dist/shell/AppLayout.css

@@ -0,0 +1,189 @@
+/* The frame of the app: the page on a panel inset from the edges, on the window's background, as
+ * in recent browsers. One column on a small screen, with a bar on top. From Panneau's `lg`
+ * breakpoint (64rem, measured on the Panneau root, a size container): the sidebar on the left. */
+
+.panneau-app-layout-layout {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 100dvh;
+    background: var(--panneau-shell-bg, var(--panneau-color-surface-sunken));
+}
+
+.panneau-app-layout-top-bar {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: 3.25rem;
+    padding: var(--panneau-space-1) var(--panneau-space-3) var(--panneau-space-1)
+        var(--panneau-space-1);
+    background: var(--panneau-shell-bg, var(--panneau-color-surface-sunken));
+}
+
+.panneau-app-layout-top-bar-search {
+    margin-inline-start: auto;
+}
+
+.panneau-app-layout-top-bar-name {
+    overflow: hidden;
+    color: var(--panneau-color-text);
+    font-weight: var(--panneau-font-weight-bold);
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    outline: none;
+}
+
+.panneau-app-layout-top-bar-name[data-focus-visible] {
+    border-radius: var(--panneau-radius-sm);
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-app-layout-sidebar {
+    display: none;
+}
+
+.panneau-app-layout-main {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding: 0 var(--panneau-shell-inset, var(--panneau-space-2))
+        var(--panneau-shell-inset, var(--panneau-space-2));
+}
+
+.panneau-app-layout-main:focus {
+    outline: none;
+}
+
+.panneau-app-layout-panel {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--panneau-space-5) var(--panneau-space-4) var(--panneau-space-8);
+    background: var(--panneau-shell-panel-bg, var(--panneau-color-surface));
+    border: var(
+        --panneau-shell-panel-border,
+        var(--panneau-border-width) solid var(--panneau-color-border)
+    );
+    border-radius: var(--panneau-shell-panel-radius, calc(var(--panneau-radius-lg) * 1.5));
+    box-shadow: var(--panneau-shell-panel-shadow, var(--panneau-shadow-sm));
+}
+
+/* The drawer of a small screen. */
+.panneau-app-layout-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--panneau-z-overlay);
+    background: var(--panneau-color-backdrop);
+}
+
+.panneau-app-layout-backdrop[data-entering] {
+    animation: panneau-app-layout-fade var(--panneau-duration) ease-out;
+}
+
+.panneau-app-layout-drawer {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: min(18rem, 85vw);
+    background: var(--panneau-shell-bg, var(--panneau-color-surface-sunken));
+    box-shadow: var(--panneau-shadow-lg);
+}
+
+.panneau-app-layout-drawer[data-entering] {
+    animation: panneau-app-layout-slide 200ms ease-out;
+}
+
+.panneau-app-layout-drawer-dialog {
+    height: 100%;
+    outline: none;
+}
+
+/* Keyboard users jump past the navigation. */
+.panneau-app-layout-skip-link {
+    position: absolute;
+    top: var(--panneau-space-2);
+    left: var(--panneau-space-2);
+    z-index: 100;
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    border-radius: var(--panneau-radius-md);
+    background: var(--panneau-color-accent);
+    color: var(--panneau-color-accent-text);
+    font-weight: var(--panneau-font-weight-medium);
+    text-decoration: none;
+}
+
+.panneau-app-layout-skip-link:not(:focus) {
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+@keyframes panneau-app-layout-fade {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes panneau-app-layout-slide {
+    from {
+        transform: translateX(-100%);
+    }
+}
+
+@container panneau-root (min-width: 64rem) {
+    .panneau-app-layout-layout {
+        grid-template-rows: minmax(0, 1fr);
+        grid-template-columns: var(--panneau-sidebar-width, 15rem) minmax(0, 1fr);
+        transition: grid-template-columns 200ms ease-out;
+    }
+
+    .panneau-app-layout-layout.panneau-app-layout-collapsed {
+        grid-template-columns: var(--panneau-sidebar-width-collapsed, 3.5rem) minmax(0, 1fr);
+    }
+
+    .panneau-app-layout-top-bar {
+        display: none;
+    }
+
+    .panneau-app-layout-sidebar {
+        position: sticky;
+        top: 0;
+        display: block;
+        height: 100dvh;
+        min-width: 0;
+        overflow: hidden;
+        background: var(--panneau-sidebar-bg, transparent);
+        border-inline-end: var(--panneau-sidebar-border, 0 none);
+    }
+
+    .panneau-app-layout-main {
+        padding: var(--panneau-shell-inset, var(--panneau-space-2));
+        padding-inline-start: 0;
+    }
+
+    .panneau-app-layout-panel {
+        min-height: calc(100dvh - 2 * var(--panneau-shell-inset, var(--panneau-space-2)));
+        padding: var(--panneau-space-6) var(--panneau-shell-panel-padding-x, var(--panneau-space-8))
+            var(--panneau-space-10);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .panneau-app-layout-layout,
+    .panneau-app-layout-backdrop[data-entering],
+    .panneau-app-layout-drawer[data-entering] {
+        animation: none;
+        transition: none;
+    }
+}
+
+/* The title of a page takes focus when the route changes, for screen readers: no ring. */
+.panneau-app-layout-main h1[tabindex='-1']:focus {
+    outline: none;
+}

package/dist/shell/AppLayout.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import type { Definition } from '@panneau/protocol';
+import { type AppRoute } from '../routes';
+import { type ColorSchemePreference } from './Sidebar';
+export interface AppLayoutProps {
+    definition: Definition;
+    basePath: string;
+    route: AppRoute;
+    colorScheme: ColorSchemePreference;
+    onColorSchemeChange: (scheme: ColorSchemePreference) => void;
+    children?: ReactNode;
+}
+/**
+ * The frame of the app. From the `lg` width of the Panneau root (64rem): the sidebar on the
+ * window's background and the page on a raised panel, like the vertical tabs of recent browsers.
+ * The sidebar collapses to a rail of icons (with its button, or Ctrl+\ / ⌘+\), and the browser
+ * remembers it. On a smaller screen: a bar at the top, whose button opens the sidebar as a drawer.
+ * When the route changes, focus moves to the title of the new page, and the page scrolls to the
+ * top.
+ */
+export declare function AppLayout({ definition, basePath, route, colorScheme, onColorSchemeChange, children, }: AppLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=AppLayout.d.ts.map

package/dist/shell/AppLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../src/shell/AppLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAGrD,OAAO,EAAE,KAAK,qBAAqB,EAAW,MAAM,WAAW,CAAC;AAKhE,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,EAAE,qBAAqB,CAAC;IACnC,mBAAmB,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AA8CD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,QAAQ,GACX,EAAE,cAAc,+BAyHhB"}