@panneau/app 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/location.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"location.d.ts","sourceRoot":"","sources":["../src/location.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAyC,MAAM,OAAO,CAAC;AAgBnF,uEAAuE;AACvE,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,kEAAkE;AAClE,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAGpC;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAkBvF"}
+{"version":3,"file":"location.d.ts","sourceRoot":"","sources":["../src/location.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAyC,MAAM,OAAO,CAAC;AASnF,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IACzB,8DAA8D;IAC9D,UAAU,IAAI,OAAO,CAAC;IACtB,iDAAiD;IACjD,YAAY,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;CACpC;AA+DD,uEAAuE;AACvE,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,IAAI,CAO9D;AAED,6FAA6F;AAC7F,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAIpC;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAkBvF"}

package/dist/location.js

@@ -1,69 +1,76 @@
 import { useSyncExternalStore } from "react";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import "react/compiler-runtime";
+import "react/jsx-runtime";
 //#region src/location.tsx
+var INDEX_KEY = "panneauIndex";
 var listeners = /* @__PURE__ */ new Set();
+var guard = null;
+var current = 0;
+var confirmed = false;
+function readIndex(state) {
+	const value = state !== null && typeof state === "object" ? state[INDEX_KEY] : void 0;
+	return typeof value === "number" ? value : null;
+}
+function notify() {
+	listeners.forEach((listener) => listener());
+}
+function onPopState(event) {
+	const index = readIndex(event.state);
+	if (index !== null && index !== current && !confirmed && guard?.isBlocking() === true) {
+		const delta = index - current;
+		window.history.go(-delta);
+		guard.confirmLeave().then((leave) => {
+			if (leave) {
+				confirmed = true;
+				window.history.go(delta);
+			}
+		});
+		return;
+	}
+	confirmed = false;
+	if (index !== null) current = index;
+	notify();
+}
 function subscribe(listener) {
+	if (listeners.size === 0) {
+		const index = readIndex(window.history.state);
+		if (index === null) window.history.replaceState({
+			...window.history.state,
+			[INDEX_KEY]: current
+		}, "");
+		else current = index;
+		window.addEventListener("popstate", onPopState);
+	}
 	listeners.add(listener);
-	window.addEventListener("popstate", listener);
 	return () => {
 		listeners.delete(listener);
-		window.removeEventListener("popstate", listener);
+		if (listeners.size === 0) window.removeEventListener("popstate", onPopState);
 	};
 }
 /** The current path, updated on navigation and on back and forward. */
 function usePathname() {
 	return useSyncExternalStore(subscribe, _temp);
 }
-/** Navigates to a path of the app, without reloading the page. */
+/**
+* Sets what guards going back and forward: the shell's leave guards. Returns a function that
+* removes it.
+*/
 function _temp() {
 	return window.location.pathname;
 }
-function navigate(path) {
-	window.history.pushState(null, "", path);
-	listeners.forEach((listener) => listener());
+function setHistoryGuard(next) {
+	guard = next;
+	return () => {
+		if (guard === next) guard = null;
+	};
 }
-/** A link to a path of the app. Plain clicks navigate without reloading the page. */
-function Link(t0) {
-	const $ = c(8);
-	let href;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		const { href: t2, onClick, ...t3 } = t0;
-		href = t2;
-		props = t3;
-		t1 = (event) => {
-			onClick?.(event);
-			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || props.target !== void 0 && props.target !== "_self") return;
-			event.preventDefault();
-			navigate(href);
-		};
-		$[0] = t0;
-		$[1] = href;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		href = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const handleClick = t1;
-	let t2;
-	if ($[4] !== handleClick || $[5] !== href || $[6] !== props) {
-		t2 = /* @__PURE__ */ jsx("a", {
-			...props,
-			href,
-			onClick: handleClick
-		});
-		$[4] = handleClick;
-		$[5] = href;
-		$[6] = props;
-		$[7] = t2;
-	} else t2 = $[7];
-	return t2;
+/** Navigates to a path of the app, without reloading the page. It doesn't ask the guards. */
+function navigate(path) {
+	current += 1;
+	window.history.pushState({ [INDEX_KEY]: current }, "", path);
+	notify();
 }
 //#endregion
-export { Link, navigate, usePathname };
+export { navigate, setHistoryGuard, usePathname };
 
 //# sourceMappingURL=location.js.map

package/dist/location.js.map

@@ -1 +1 @@
-{"version":3,"file":"location.js","names":["href","handleClick","_c"],"sources":["../src/location.tsx"],"sourcesContent":["import { type ComponentProps, type MouseEvent, useSyncExternalStore } from 'react';\n\n// A minimal history-mode location, for the placeholder shell. The shell of Phase 2 replaces it\n// with the app's router.\n\nconst listeners = new Set<() => void>();\n\nfunction subscribe(listener: () => void) {\n    listeners.add(listener);\n    window.addEventListener('popstate', listener);\n    return () => {\n        listeners.delete(listener);\n        window.removeEventListener('popstate', listener);\n    };\n}\n\n/** The current path, updated on navigation and on back and forward. */\nexport function usePathname(): string {\n    return useSyncExternalStore(subscribe, () => window.location.pathname);\n}\n\n/** Navigates to a path of the app, without reloading the page. */\nexport function navigate(path: string) {\n    window.history.pushState(null, '', path);\n    listeners.forEach((listener) => listener());\n}\n\n/** A link to a path of the app. Plain clicks navigate without reloading the page. */\nexport function Link({ href, onClick, ...props }: ComponentProps<'a'> & { href: string }) {\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n        onClick?.(event);\n        if (\n            event.defaultPrevented ||\n            event.button !== 0 ||\n            event.metaKey ||\n            event.ctrlKey ||\n            event.shiftKey ||\n            event.altKey ||\n            (props.target !== undefined && props.target !== '_self')\n        ) {\n            return;\n        }\n        event.preventDefault();\n        navigate(href);\n    };\n    return <a {...props} href={href} onClick={handleClick} />;\n}\n"],"mappings":";;;;AAKA,IAAM,4BAAY,IAAI,IAAgB;AAEtC,SAAS,UAAU,UAAsB;CACrC,UAAU,IAAI,QAAQ;CACtB,OAAO,iBAAiB,YAAY,QAAQ;CAC5C,aAAa;EACT,UAAU,OAAO,QAAQ;EACzB,OAAO,oBAAoB,YAAY,QAAQ;CACnD;AACJ;;AAGA,SAAO,cAAA;CAAA,OACI,qBAAqB,WAAW,KAA8B;AAAC;;AADnE,SAAA,QAAA;CAAA,OAC0C,OAAM,SAAS;AAAS;AAIzE,SAAgB,SAAS,MAAc;CACnC,OAAO,QAAQ,UAAU,MAAM,IAAI,IAAI;CACvC,UAAU,SAAS,aAAa,SAAS,CAAC;AAC9C;;AAGA,SAAO,KAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,MAAA,IAAA,SAAA,GAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EACG,MAAA,UAAA;GAChB,UAAU,KAAK;GACf,IACI,MAAK,oBACL,MAAK,WAAY,KACjB,MAAK,WACL,MAAK,WACL,MAAK,YACL,MAAK,UACJ,MAAK,WAAY,KAAA,KAAa,MAAK,WAAY,SAAQ;GAI5D,MAAK,eAAgB;GACrB,SAAS,IAAI;EAAC;EACjB,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,OAAA,EAAA;EAAA,QAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAfD,MAAA,cAAoB;CAelB,IAAA;CAAA,IAAA,EAAA,OAAA,eAAA,EAAA,OAAA,QAAA,EAAA,OAAA,OAAA;EACK,KAAA,oBAAA,KAAA;GAAkD,GAA3C;GAAa;GAAeD,SAAA;EAAW,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAlD;AAAkD"}
+{"version":3,"file":"location.js","names":["href","handleClick"],"sources":["../src/location.tsx"],"sourcesContent":["import { type ComponentProps, type MouseEvent, useSyncExternalStore } from 'react';\n\n// A minimal history-mode location. Each entry of the app keeps its position in the history\n// (`panneauIndex`), so that a guard can undo going back or forward and ask first.\n\nconst INDEX_KEY = 'panneauIndex';\n\nconst listeners = new Set<() => void>();\n\n/** What guards going back or forward, such as forms with unsaved changes. */\nexport interface HistoryGuard {\n    /** Whether going back or forward needs a confirmation now. */\n    isBlocking(): boolean;\n    /** Resolves `true` to leave, `false` to stay. */\n    confirmLeave(): Promise<boolean>;\n}\n\nlet guard: HistoryGuard | null = null;\n// The position of the current entry, and whether the next move is already confirmed\nlet current = 0;\nlet confirmed = false;\n\nfunction readIndex(state: unknown): number | null {\n    const value =\n        state !== null && typeof state === 'object'\n            ? (state as Record<string, unknown>)[INDEX_KEY]\n            : undefined;\n    return typeof value === 'number' ? value : null;\n}\n\nfunction notify() {\n    listeners.forEach((listener) => listener());\n}\n\nfunction onPopState(event: PopStateEvent) {\n    const index = readIndex(event.state);\n    if (index !== null && index !== current && !confirmed && guard?.isBlocking() === true) {\n        // Undo the move, then make it again once the user chose to leave\n        const delta = index - current;\n        window.history.go(-delta);\n        void guard.confirmLeave().then((leave) => {\n            if (leave) {\n                confirmed = true;\n                window.history.go(delta);\n            }\n        });\n        return;\n    }\n    confirmed = false;\n    if (index !== null) {\n        current = index;\n    }\n    notify();\n}\n\nfunction subscribe(listener: () => void) {\n    if (listeners.size === 0) {\n        // The entry the app starts on\n        const index = readIndex(window.history.state);\n        if (index === null) {\n            window.history.replaceState(\n                { ...(window.history.state as object | null), [INDEX_KEY]: current },\n                '',\n            );\n        } else {\n            current = index;\n        }\n        window.addEventListener('popstate', onPopState);\n    }\n    listeners.add(listener);\n    return () => {\n        listeners.delete(listener);\n        if (listeners.size === 0) {\n            window.removeEventListener('popstate', onPopState);\n        }\n    };\n}\n\n/** The current path, updated on navigation and on back and forward. */\nexport function usePathname(): string {\n    return useSyncExternalStore(subscribe, () => window.location.pathname);\n}\n\n/**\n * Sets what guards going back and forward: the shell's leave guards. Returns a function that\n * removes it.\n */\nexport function setHistoryGuard(next: HistoryGuard): () => void {\n    guard = next;\n    return () => {\n        if (guard === next) {\n            guard = null;\n        }\n    };\n}\n\n/** Navigates to a path of the app, without reloading the page. It doesn't ask the guards. */\nexport function navigate(path: string) {\n    current += 1;\n    window.history.pushState({ [INDEX_KEY]: current }, '', path);\n    notify();\n}\n\n/** A link to a path of the app. Plain clicks navigate without reloading the page. */\nexport function Link({ href, onClick, ...props }: ComponentProps<'a'> & { href: string }) {\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n        onClick?.(event);\n        if (\n            event.defaultPrevented ||\n            event.button !== 0 ||\n            event.metaKey ||\n            event.ctrlKey ||\n            event.shiftKey ||\n            event.altKey ||\n            (props.target !== undefined && props.target !== '_self')\n        ) {\n            return;\n        }\n        event.preventDefault();\n        navigate(href);\n    };\n    return <a {...props} href={href} onClick={handleClick} />;\n}\n"],"mappings":";;;;AAKA,IAAM,YAAY;AAElB,IAAM,4BAAY,IAAI,IAAgB;AAUtC,IAAI,QAA6B;AAEjC,IAAI,UAAU;AACd,IAAI,YAAY;AAEhB,SAAS,UAAU,OAA+B;CAC9C,MAAM,QACF,UAAU,QAAQ,OAAO,UAAU,WAC5B,MAAkC,aACnC,KAAA;CACV,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC/C;AAEA,SAAS,SAAS;CACd,UAAU,SAAS,aAAa,SAAS,CAAC;AAC9C;AAEA,SAAS,WAAW,OAAsB;CACtC,MAAM,QAAQ,UAAU,MAAM,KAAK;CACnC,IAAI,UAAU,QAAQ,UAAU,WAAW,CAAC,aAAa,OAAO,WAAW,MAAM,MAAM;EAEnF,MAAM,QAAQ,QAAQ;EACtB,OAAO,QAAQ,GAAG,CAAC,KAAK;EACxB,MAAW,aAAa,CAAC,CAAC,MAAM,UAAU;GACtC,IAAI,OAAO;IACP,YAAY;IACZ,OAAO,QAAQ,GAAG,KAAK;GAC3B;EACJ,CAAC;EACD;CACJ;CACA,YAAY;CACZ,IAAI,UAAU,MACV,UAAU;CAEd,OAAO;AACX;AAEA,SAAS,UAAU,UAAsB;CACrC,IAAI,UAAU,SAAS,GAAG;EAEtB,MAAM,QAAQ,UAAU,OAAO,QAAQ,KAAK;EAC5C,IAAI,UAAU,MACV,OAAO,QAAQ,aACX;GAAE,GAAI,OAAO,QAAQ;IAA0B,YAAY;EAAQ,GACnE,EACJ;OAEA,UAAU;EAEd,OAAO,iBAAiB,YAAY,UAAU;CAClD;CACA,UAAU,IAAI,QAAQ;CACtB,aAAa;EACT,UAAU,OAAO,QAAQ;EACzB,IAAI,UAAU,SAAS,GACnB,OAAO,oBAAoB,YAAY,UAAU;CAEzD;AACJ;;AAGA,SAAO,cAAA;CAAA,OACI,qBAAqB,WAAW,KAA8B;AAAC;;;;;AADnE,SAAA,QAAA;CAAA,OAC0C,OAAM,SAAS;AAAS;AAOzE,SAAgB,gBAAgB,MAAgC;CAC5D,QAAQ;CACR,aAAa;EACT,IAAI,UAAU,MACV,QAAQ;CAEhB;AACJ;;AAGA,SAAgB,SAAS,MAAc;CACnC,WAAW;CACX,OAAO,QAAQ,UAAU,GAAG,YAAY,QAAQ,GAAG,IAAI,IAAI;CAC3D,OAAO;AACX"}

package/dist/navigation.d.ts

@@ -0,0 +1,53 @@
+import type { Definition } from '@panneau/protocol';
+import { type AppRoute } from './routes';
+/** What a link of the navigation leads to, for its default icon and to know when it is current. */
+export type NavTarget = {
+    kind: 'home';
+} | {
+    kind: 'resource';
+    resource: string;
+} | {
+    kind: 'page';
+    page: string;
+} | {
+    kind: 'url';
+    external: boolean;
+};
+/** A link of the navigation. */
+export interface NavLink {
+    type: 'link';
+    key: string;
+    label: string;
+    href: string;
+    /** A Lucide icon name from the definition (`"icon": "file-text"`). */
+    icon: string | undefined;
+    target: NavTarget;
+}
+/** A titled group of links. */
+export interface NavGroup {
+    type: 'group';
+    key: string;
+    label: string | undefined;
+    children: NavLink[];
+}
+export interface NavSeparator {
+    type: 'separator';
+    key: string;
+}
+export type NavEntry = NavLink | NavGroup | NavSeparator;
+/**
+ * The path of the user's profile: the user's item in the resource of users (`user.resource`, or
+ * the resource `users`), or `null` when the definition has no such resource.
+ */
+export declare function getProfilePath(definition: Definition, basePath: string): string | null;
+/** The first letter in upper case: resource labels are written in lower case (`pages`). */
+export declare function capitalize(label: string, locale?: string): string;
+/**
+ * The entries of the main navigation: the `main` menu of the definition, or every resource and
+ * page without one. Resources the user can't list (`abilities.viewAny`) and entries of unknown
+ * types are left out. Groups keep one level: the links of nested groups join their parent.
+ */
+export declare function getNavigation(definition: Definition, basePath: string): NavEntry[];
+/** Whether a link leads to the current route: a resource is current on all of its pages. */
+export declare function isCurrent(target: NavTarget, route: AppRoute): boolean;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAY,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,UAAU,CAAC;AAEpD,mGAAmG;AACnG,MAAM,MAAM,SAAS,GACf;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzC,gCAAgC;AAChC,MAAM,WAAW,OAAO;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,MAAM,EAAE,SAAS,CAAC;CACrB;AAED,+BAA+B;AAC/B,MAAM,WAAW,QAAQ;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAUtF;AAED,2FAA2F;AAC3F,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEjE;AAgED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,GAAG,QAAQ,EAAE,CAgBlF;AAED,4FAA4F;AAC5F,wBAAgB,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,OAAO,CAWrE"}

package/dist/navigation.js

@@ -0,0 +1,117 @@
+import { routePath } from "./routes.js";
+import { can } from "@panneau/core";
+//#region src/navigation.ts
+/**
+* The path of the user's profile: the user's item in the resource of users (`user.resource`, or
+* the resource `users`), or `null` when the definition has no such resource.
+*/
+function getProfilePath(definition, basePath) {
+	const user = definition.user;
+	if (user === void 0 || user === null) return null;
+	const id = user.resource ?? "users";
+	const resource = definition.resources.find((candidate) => candidate.id === id);
+	return resource !== void 0 ? routePath({
+		name: "resource.edit",
+		resource: resource.id,
+		id: user.id
+	}, basePath) : null;
+}
+/** The first letter in upper case: resource labels are written in lower case (`pages`). */
+function capitalize(label, locale) {
+	return label.charAt(0).toLocaleUpperCase(locale) + label.slice(1);
+}
+function toLinks(item, definition, basePath, key) {
+	const resourceLink = (id, label, icon) => {
+		const resource = definition.resources.find((candidate) => candidate.id === id);
+		if (resource === void 0 || !can(resource.abilities, "viewAny")) return [];
+		return [{
+			type: "link",
+			key: `${key}:${id}`,
+			label: label ?? capitalize(resource.label.plural, definition.locale),
+			href: routePath({
+				name: "resource.index",
+				resource: id
+			}, basePath),
+			icon: icon ?? resource.icon,
+			target: {
+				kind: "resource",
+				resource: id
+			}
+		}];
+	};
+	switch (item.type) {
+		case "resources": return definition.resources.flatMap(({ id }) => resourceLink(id));
+		case "resource": return item.resource !== void 0 ? resourceLink(item.resource, item.label, item.icon) : [];
+		case "page": {
+			const page = item.page !== void 0 ? definition.pages?.[item.page] : void 0;
+			if (item.page === void 0 || page === void 0) return [];
+			return [{
+				type: "link",
+				key,
+				label: item.label ?? page.label ?? item.page,
+				href: routePath({
+					name: "page",
+					page: item.page
+				}, basePath),
+				icon: item.icon,
+				target: {
+					kind: "page",
+					page: item.page
+				}
+			}];
+		}
+		case "link": return item.url !== void 0 ? [{
+			type: "link",
+			key,
+			label: item.label ?? item.url,
+			href: item.url,
+			icon: item.icon,
+			target: {
+				kind: "url",
+				external: item.external === true
+			}
+		}] : [];
+		case "group": return (item.children ?? []).flatMap((child, index) => toLinks(child, definition, basePath, `${key}.${String(index)}`));
+		default: return [];
+	}
+}
+/**
+* The entries of the main navigation: the `main` menu of the definition, or every resource and
+* page without one. Resources the user can't list (`abilities.viewAny`) and entries of unknown
+* types are left out. Groups keep one level: the links of nested groups join their parent.
+*/
+function getNavigation(definition, basePath) {
+	return (definition.menus?.main ?? [{ type: "resources" }, ...Object.keys(definition.pages ?? {}).map((page) => ({
+		type: "page",
+		page
+	}))]).flatMap((item, index) => {
+		const key = String(index);
+		if (item.type === "separator") return [{
+			type: "separator",
+			key
+		}];
+		if (item.type === "group") {
+			const children = toLinks(item, definition, basePath, key);
+			return children.length > 0 ? [{
+				type: "group",
+				key,
+				label: item.label,
+				children
+			}] : [];
+		}
+		return toLinks(item, definition, basePath, key);
+	});
+}
+/** Whether a link leads to the current route: a resource is current on all of its pages. */
+function isCurrent(target, route) {
+	switch (target.kind) {
+		case "home": return route.name === "home";
+		case "resource": return "resource" in route && route.resource === target.resource;
+		case "page": return route.name === "page" && route.page === target.page;
+		case "url": return false;
+	}
+}
+//#endregion
+export { capitalize, getNavigation, getProfilePath, isCurrent };
+
+//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","names":[],"sources":["../src/navigation.ts"],"sourcesContent":["import { can } from '@panneau/core';\nimport type { Definition, MenuItem } from '@panneau/protocol';\n\nimport { type AppRoute, routePath } from './routes';\n\n/** What a link of the navigation leads to, for its default icon and to know when it is current. */\nexport type NavTarget =\n    | { kind: 'home' }\n    | { kind: 'resource'; resource: string }\n    | { kind: 'page'; page: string }\n    | { kind: 'url'; external: boolean };\n\n/** A link of the navigation. */\nexport interface NavLink {\n    type: 'link';\n    key: string;\n    label: string;\n    href: string;\n    /** A Lucide icon name from the definition (`\"icon\": \"file-text\"`). */\n    icon: string | undefined;\n    target: NavTarget;\n}\n\n/** A titled group of links. */\nexport interface NavGroup {\n    type: 'group';\n    key: string;\n    label: string | undefined;\n    children: NavLink[];\n}\n\nexport interface NavSeparator {\n    type: 'separator';\n    key: string;\n}\n\nexport type NavEntry = NavLink | NavGroup | NavSeparator;\n\n/**\n * The path of the user's profile: the user's item in the resource of users (`user.resource`, or\n * the resource `users`), or `null` when the definition has no such resource.\n */\nexport function getProfilePath(definition: Definition, basePath: string): string | null {\n    const user = definition.user;\n    if (user === undefined || user === null) {\n        return null;\n    }\n    const id = user.resource ?? 'users';\n    const resource = definition.resources.find((candidate) => candidate.id === id);\n    return resource !== undefined\n        ? routePath({ name: 'resource.edit', resource: resource.id, id: user.id }, basePath)\n        : null;\n}\n\n/** The first letter in upper case: resource labels are written in lower case (`pages`). */\nexport function capitalize(label: string, locale?: string): string {\n    return label.charAt(0).toLocaleUpperCase(locale) + label.slice(1);\n}\n\nfunction toLinks(item: MenuItem, definition: Definition, basePath: string, key: string): NavLink[] {\n    const resourceLink = (id: string, label?: string, icon?: string): NavLink[] => {\n        const resource = definition.resources.find((candidate) => candidate.id === id);\n        if (resource === undefined || !can(resource.abilities, 'viewAny')) {\n            return [];\n        }\n        return [\n            {\n                type: 'link',\n                key: `${key}:${id}`,\n                label: label ?? capitalize(resource.label.plural, definition.locale),\n                href: routePath({ name: 'resource.index', resource: id }, basePath),\n                icon: icon ?? resource.icon,\n                target: { kind: 'resource', resource: id },\n            },\n        ];\n    };\n    switch (item.type) {\n        case 'resources':\n            return definition.resources.flatMap(({ id }) => resourceLink(id));\n        case 'resource':\n            return item.resource !== undefined\n                ? resourceLink(item.resource, item.label, item.icon)\n                : [];\n        case 'page': {\n            const page = item.page !== undefined ? definition.pages?.[item.page] : undefined;\n            if (item.page === undefined || page === undefined) {\n                return [];\n            }\n            return [\n                {\n                    type: 'link',\n                    key,\n                    label: item.label ?? page.label ?? item.page,\n                    href: routePath({ name: 'page', page: item.page }, basePath),\n                    icon: item.icon,\n                    target: { kind: 'page', page: item.page },\n                },\n            ];\n        }\n        case 'link':\n            return item.url !== undefined\n                ? [\n                      {\n                          type: 'link',\n                          key,\n                          label: item.label ?? item.url,\n                          href: item.url,\n                          icon: item.icon,\n                          target: { kind: 'url', external: item.external === true },\n                      },\n                  ]\n                : [];\n        case 'group':\n            return (item.children ?? []).flatMap((child, index) =>\n                toLinks(child, definition, basePath, `${key}.${String(index)}`),\n            );\n        default:\n            return [];\n    }\n}\n\n/**\n * The entries of the main navigation: the `main` menu of the definition, or every resource and\n * page without one. Resources the user can't list (`abilities.viewAny`) and entries of unknown\n * types are left out. Groups keep one level: the links of nested groups join their parent.\n */\nexport function getNavigation(definition: Definition, basePath: string): NavEntry[] {\n    const menu: MenuItem[] = definition.menus?.main ?? [\n        { type: 'resources' },\n        ...Object.keys(definition.pages ?? {}).map((page) => ({ type: 'page', page })),\n    ];\n    return menu.flatMap((item, index): NavEntry[] => {\n        const key = String(index);\n        if (item.type === 'separator') {\n            return [{ type: 'separator', key }];\n        }\n        if (item.type === 'group') {\n            const children = toLinks(item, definition, basePath, key);\n            return children.length > 0 ? [{ type: 'group', key, label: item.label, children }] : [];\n        }\n        return toLinks(item, definition, basePath, key);\n    });\n}\n\n/** Whether a link leads to the current route: a resource is current on all of its pages. */\nexport function isCurrent(target: NavTarget, route: AppRoute): boolean {\n    switch (target.kind) {\n        case 'home':\n            return route.name === 'home';\n        case 'resource':\n            return 'resource' in route && route.resource === target.resource;\n        case 'page':\n            return route.name === 'page' && route.page === target.page;\n        case 'url':\n            return false;\n    }\n}\n"],"mappings":"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"}

package/dist/pages/HomePage.d.ts

@@ -0,0 +1,11 @@
+import type { Definition } from '@panneau/protocol';
+export interface HomePageProps {
+    definition: Definition;
+    basePath: string;
+}
+/**
+ * The home page, until the dashboard of 5.x: a welcome, and a card for each resource the user can
+ * list.
+ */
+export declare function HomePage({ definition, basePath }: HomePageProps): import("react").JSX.Element;
+//# sourceMappingURL=HomePage.d.ts.map

package/dist/pages/HomePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.d.ts","sourceRoot":"","sources":["../../src/pages/HomePage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AASpD,MAAM,WAAW,aAAa;IAC1B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,aAAa,+BA4C/D"}

package/dist/pages/HomePage.js

@@ -0,0 +1,111 @@
+import { useDocumentTitle } from "../documentTitle.js";
+import { routePath } from "../routes.js";
+import { capitalize } from "../navigation.js";
+import pages_module_default from "./pages.module.js";
+import { PageHeader } from "./PageHeader.js";
+import { c } from "react/compiler-runtime";
+import { can } from "@panneau/core";
+import { appMessages } from "@panneau/intl";
+import { Icon, getNamedIcon, usePanneauIntl } from "@panneau/ui";
+import { Link } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { List } from "lucide-react";
+//#region src/pages/HomePage.tsx
+/**
+* The home page, until the dashboard of 5.x: a welcome, and a card for each resource the user can
+* list.
+*/
+function HomePage(t0) {
+	const $ = c(17);
+	const { definition, basePath } = t0;
+	const intl = usePanneauIntl();
+	const resources = definition.resources.filter(_temp);
+	const user = definition.user ?? null;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	useDocumentTitle(t1);
+	const t2 = pages_module_default;
+	let t3;
+	if ($[1] !== definition.name) {
+		t3 = /* @__PURE__ */ jsx(PageHeader, { title: definition.name });
+		$[1] = definition.name;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== intl || $[4] !== user) {
+		t4 = user !== null ? /* @__PURE__ */ jsx("p", {
+			className: pages_module_default.intro,
+			children: intl.formatMessage(appMessages.welcome, { name: user.name })
+		}) : null;
+		$[3] = intl;
+		$[4] = user;
+		$[5] = t4;
+	} else t4 = $[5];
+	const t5 = pages_module_default;
+	let t6;
+	if ($[6] !== basePath || $[7] !== definition.locale) {
+		t6 = (resource_0) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
+			href: routePath({
+				name: "resource.index",
+				resource: resource_0.id
+			}, basePath),
+			className: pages_module_default.card,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: pages_module_default.cardIcon,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(Icon, { icon: resource_0.icon !== void 0 ? getNamedIcon(resource_0.icon) : List })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: pages_module_default.cardTitle,
+					children: capitalize(resource_0.label.plural, definition.locale)
+				}),
+				resource_0.description !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: pages_module_default.cardText,
+					children: resource_0.description
+				}) : null
+			]
+		}) }, resource_0.id);
+		$[6] = basePath;
+		$[7] = definition.locale;
+		$[8] = t6;
+	} else t6 = $[8];
+	const t7 = resources.map(t6);
+	let t8;
+	if ($[9] !== t5.cards || $[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx("ul", {
+			className: t5.cards,
+			children: t7
+		});
+		$[9] = t5.cards;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t2.page || $[13] !== t3 || $[14] !== t4 || $[15] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: t2.page,
+			children: [
+				t3,
+				t4,
+				t8
+			]
+		});
+		$[12] = t2.page;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	return t9;
+}
+function _temp(resource) {
+	return can(resource.abilities, "viewAny");
+}
+//#endregion
+export { HomePage };
+
+//# sourceMappingURL=HomePage.js.map

package/dist/pages/HomePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.js","names":["styles","resource","_c","styles"],"sources":["../../src/pages/HomePage.tsx"],"sourcesContent":["import { List } from 'lucide-react';\nimport { Link } from 'react-aria-components';\n\nimport { can } from '@panneau/core';\nimport { appMessages } from '@panneau/intl';\nimport type { Definition } from '@panneau/protocol';\nimport { Icon, getNamedIcon, usePanneauIntl } from '@panneau/ui';\n\nimport { useDocumentTitle } from '../documentTitle';\nimport { capitalize } from '../navigation';\nimport { routePath } from '../routes';\nimport { PageHeader } from './PageHeader';\nimport styles from './pages.module.css';\n\nexport interface HomePageProps {\n    definition: Definition;\n    basePath: string;\n}\n\n/**\n * The home page, until the dashboard of 5.x: a welcome, and a card for each resource the user can\n * list.\n */\nexport function HomePage({ definition, basePath }: HomePageProps) {\n    const intl = usePanneauIntl();\n    const resources = definition.resources.filter((resource) => can(resource.abilities, 'viewAny'));\n    const user = definition.user ?? null;\n    useDocumentTitle([]);\n    return (\n        <div className={styles.page}>\n            <PageHeader title={definition.name} />\n            {user !== null ? (\n                <p className={styles.intro}>\n                    {intl.formatMessage(appMessages.welcome, { name: user.name })}\n                </p>\n            ) : null}\n            <ul className={styles.cards}>\n                {resources.map((resource) => (\n                    <li key={resource.id}>\n                        <Link\n                            href={routePath(\n                                { name: 'resource.index', resource: resource.id },\n                                basePath,\n                            )}\n                            className={styles.card}\n                        >\n                            <span className={styles.cardIcon} aria-hidden=\"true\">\n                                <Icon\n                                    icon={\n                                        resource.icon !== undefined\n                                            ? getNamedIcon(resource.icon)\n                                            : List\n                                    }\n                                />\n                            </span>\n                            <span className={styles.cardTitle}>\n                                {capitalize(resource.label.plural, definition.locale)}\n                            </span>\n                            {resource.description !== undefined ? (\n                                <span className={styles.cardText}>{resource.description}</span>\n                            ) : null}\n                        </Link>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,SAAO,SAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAkB,MAAA,EAAA,YAAA,aAAA;CACrB,MAAA,OAAa,eAAe;CAC5B,MAAA,YAAkB,WAAU,UAAU,OAAQ,KAAgD;CAC9F,MAAA,OAAa,WAAU,QAAV;CAAwB,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACpB,KAAA,CAAA;EAAE,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAnB,iBAAiB,EAAE;CAECF,MAAAA,KAAAG;CAAM,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,MAAA;EAClB,KAAA,oBAAC,YAAD,EAAmB,OAAA,WAAU,KAAK,CAAA;EAAI,EAAA,KAAA,WAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA,EAAA,OAAA,MAAA;EACrC,KAAA,SAAS,OACN,oBAAA,KAAA;GAAc,WAAAA,qBAAM;GACf,UAAA,KAAI,cAAe,YAAW,SAAU,EAAA,MAAQ,KAAI,KAAM,CAAC;EAC5D,CAAA,IAHP;EAIO,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CACOH,MAAAA,KAAAG;CAAM,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,WAAA,QAAA;EACF,MAAA,eACX,oBAAA,MAAA,EAAA,UACI,qBAAC,MAAD;GACU,MAAA,UACF;IAAA,MAAQ;IAAgB,UAAYF,WAAQ;GAAI,GAChD,QACJ;GACW,WAAAE,qBAAM;GALrB,UAAA;IAOI,oBAAA,QAAA;KAAiB,WAAAA,qBAAM;KAAuB,eAAA;KAC1C,UAAA,oBAAC,MAAD,EAEQ,MAAAF,WAAQ,SAAU,KAAA,IACZ,aAAaA,WAAQ,IAClB,IAFT,KAEU,CAAA;IAGf,CAAA;IACP,oBAAA,QAAA;KAAiB,WAAAE,qBAAM;KAClB,UAAA,WAAWF,WAAQ,MAAM,QAAS,WAAU,MAAO;IACjD,CAAA;IACNA,WAAQ,gBAAiB,KAAA,IACtB,oBAAA,QAAA;KAAiB,WAAAE,qBAAM;KAAYF,UAAAA,WAAQ;IAAoB,CAAA,IADlE;GAnBA;EAuBJ,CAAA,EAAA,GAxBIA,WAAQ,EAwBZ;EACR,EAAA,KAAA;EAAA,EAAA,KAAA,WAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CA1BA,MAAA,KAAA,UAAS,IAAK,EA0Bd;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,GAAA,SAAA,EAAA,QAAA,IAAA;EA3BN,KAAA,oBAAA,MAAA;GAAe,WAAAD,GAAM;GAChB,UAAA;EA2BA,CAAA;EAAA,EAAA,KAAA,GAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,GAAA,QAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAnCT,KAAA,qBAAA,OAAA;GAAgB,WAAAA,GAAM;GAAtB,UAAA;IACI;IACC;IAKD;GA6BE;;EAAA,EAAA,MAAA,GAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OApCN;AAoCM;AA1CP,SAAA,MAAA,UAAA;CAAA,OAEyD,IAAI,SAAQ,WAAY,SAAS;AAAC"}

package/dist/pages/ItemPanel.css

@@ -0,0 +1,164 @@
+/* The details of an item next to its list. Beside the list on a wide screen, over it otherwise. */
+
+.panneau-item-panel-panel {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--panneau-z-overlay);
+    display: flex;
+    flex-direction: column;
+    width: min(100%, var(--panneau-item-panel-width, 24rem));
+    background: var(--panneau-item-panel-bg, var(--panneau-color-surface));
+    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
+    box-shadow: var(--panneau-shadow-lg);
+    outline: none;
+}
+
+/* Widened, for previews. */
+.panneau-item-panel-wide {
+    width: min(100%, var(--panneau-item-panel-width-wide, 50%));
+}
+
+.panneau-item-panel-panel:focus-visible {
+    box-shadow:
+        var(--panneau-shadow-lg),
+        inset 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-item-panel-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    padding: var(--panneau-space-4) var(--panneau-space-4) var(--panneau-space-2);
+}
+
+.panneau-item-panel-header-buttons {
+    display: flex;
+    flex: none;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-item-panel-title {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.panneau-item-panel-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-2);
+    padding: 0 var(--panneau-space-4) var(--panneau-space-3);
+    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-item-panel-action {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    min-height: var(--panneau-control-height-sm);
+    padding: 0 var(--panneau-space-3);
+    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-md);
+    color: var(--panneau-color-text);
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    text-decoration: none;
+    outline: none;
+}
+
+.panneau-item-panel-action[data-hovered] {
+    background: var(--panneau-color-hover);
+}
+
+.panneau-item-panel-action[data-focus-visible] {
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-item-panel-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    padding: var(--panneau-space-4);
+    overflow-y: auto;
+}
+
+.panneau-item-panel-tabs {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    min-height: 0;
+}
+
+.panneau-item-panel-tab-panel {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.panneau-item-panel-preview {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+    min-height: 0;
+}
+
+.panneau-item-panel-preview-link {
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-end;
+    gap: var(--panneau-space-1);
+    border-radius: var(--panneau-radius-sm);
+    color: var(--panneau-color-link);
+    font-size: var(--panneau-font-size-sm);
+    text-decoration: none;
+    outline: none;
+}
+
+.panneau-item-panel-preview-link[data-hovered] {
+    text-decoration: underline;
+}
+
+.panneau-item-panel-preview-link[data-focus-visible] {
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+/* The page of the site, as tall as the panel allows. */
+.panneau-item-panel-frame {
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 28rem;
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-md);
+    background: var(--panneau-color-surface);
+}
+
+/* From the `xl` width of the root: beside the list, in the flow of the page. */
+@container panneau-root (min-width: 80rem) {
+    .panneau-item-panel-panel {
+        position: sticky;
+        top: var(--panneau-space-4);
+        z-index: auto;
+        width: auto;
+        max-height: calc(100dvh - 2 * var(--panneau-space-4));
+        min-height: min(40rem, calc(100dvh - 2 * var(--panneau-space-4)));
+        border: var(--panneau-border-width) solid var(--panneau-color-border);
+        border-radius: var(--panneau-item-panel-radius, var(--panneau-radius-lg));
+        box-shadow: var(--panneau-item-panel-shadow, var(--panneau-shadow-md));
+    }
+
+    .panneau-item-panel-wide {
+        width: auto;
+    }
+
+    .panneau-item-panel-panel:focus-visible {
+        box-shadow:
+            var(--panneau-item-panel-shadow, var(--panneau-shadow-md)),
+            0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+    }
+}