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

package/README.md

@@ -1,8 +1,10 @@
 # @panneau/app
 
-The Panneau admin panel: the app entry (`createPanneauApp`), and the shell, routes and pages to come.
+The Panneau admin panel: the app entry (`createPanneauApp`), the shell with its sidebar, and the pages of resources.
 
-The shell is a placeholder until Phase 2 of the [roadmap](../../docs/roadmap.md): it loads the definition, lists the resources and follows the client routes. The entry contract below is stable: see [decisions/0019](../../docs/decisions/0019-app-entry.md).
+The shell is a first version, for Phase 2 of the [roadmap](../../docs/roadmap.md): a sidebar from the `main` menu of the definition, collapsible to a rail of icons (Ctrl+\\ or ⌘+\\), the page on a raised panel, a drawer on small screens, and the home, list, create, edit and plugin pages, built with `@panneau/lists`, `@panneau/forms` and `@panneau/actions`. The show route opens the item's details in a panel next to its list, with its preview when its resource has one: a component of a plugin (`previews`) or its page on the site in an iframe ([decisions/0028](../../docs/decisions/0028-item-panel.md)). **Go to…** (⌘K or Ctrl+K, or its button in the sidebar) opens a command palette: recent items, navigation, "New {resource}", the `commands` of plugins, the app's actions, and the results of the server's search, grouped by resource; an item opens its form ([decisions/0029](../../docs/decisions/0029-go-to-palette.md)). "Search in" narrows it to one resource, until Backspace in the empty field ([decisions/0030](../../docs/decisions/0030-search-parameters-and-scope.md)). Leaving a form with unsaved changes asks first, by a link or by going back or forward. The tab is named after the page, and focus moves to the title of each new page, for screen readers. The entry contract below is stable: see [decisions/0019](../../docs/decisions/0019-app-entry.md).
+
+Try it with `npm run playground` at the root of the repository: the whole app on the mock backend of `@panneau/protocol` (`?theme=flat` for a flat frame).
 
 ```ts
 // resources/js/panneau.tsx
@@ -20,9 +22,9 @@ The page writes the boot config next to the root element ([protocol.md](../../do
 </script>
 ```
 
-| Export         | Content                                                                                            |
-| -------------- | -------------------------------------------------------------------------------------------------- |
-| `@panneau/app` | `createPanneauApp()`, the `<Panneau>` component, `readBootConfig()` and the types of their options |
+| Export         | Content                                                                                                                               |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `@panneau/app` | `createPanneauApp()`, the `<Panneau>` component, `readBootConfig()` and the types of their options, the component tokens of the shell |
 
 ## Setup
 
@@ -33,7 +35,32 @@ npm install --save-dev vite @vitejs/plugin-react
 
 - Add `@vitejs/plugin-react` to the Vite config, and the entry to its inputs.
 - The entry imports no CSS and no theme: packages import their own styles, and themes come from plugins.
+- Named icons (`"icon": "users"` in the definition) are Lucide icons, each loaded when shown. Pass `iconLoader` to load fewer, or `null` for none.
 - Without `adapter`, the app uses the Laravel preset of the REST adapter (`@panneau/data/laravel`) on `apiBaseUrl`.
 - When the API answers `401` (or `419` from Laravel), the app sends the browser to the login URL. Pass `onUnauthorized` to do something else.
 
+## Theming the shell
+
+The frame reads component tokens ([decisions/0024](../../docs/decisions/0024-theme-model.md)), which a theme sets like those of `@panneau/ui` once `@panneau/app` is imported:
+
+| Tokens                   | What they style                                                                                  |
+| ------------------------ | ------------------------------------------------------------------------------------------------ |
+| `--panneau-shell-*`      | The window's background (`bg`), the inset of the page (`inset`) and its panel (`panel-*`)        |
+| `--panneau-item-panel-*` | The widths (normal and widened), background, radius and shadow of the panel of an item's details |
+| `--panneau-sidebar-*`    | The width (expanded and collapsed), background and border of the sidebar, its links and its logo |
+
+```ts
+import { defineTheme } from '@panneau/ui';
+
+// A flat frame: the sidebar on a surface, and the page flush against it.
+export const flatTheme = defineTheme({
+    tokens: {
+        'panneau-shell-inset': '0',
+        'panneau-shell-panel-radius': '0',
+        'panneau-sidebar-bg': 'var(--panneau-color-surface)',
+        'panneau-sidebar-border': 'var(--panneau-border-width) solid var(--panneau-color-border)',
+    },
+});
+```
+
 The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md).

package/dist/Panneau.css

@@ -0,0 +1,19 @@
+.panneau-panneau-root {
+    min-height: 100dvh;
+}
+
+/* Loading, a definition that failed to load, and an ended session: centered in the window. */
+.panneau-panneau-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--panneau-space-3);
+    min-height: 100dvh;
+    padding: var(--panneau-space-4);
+    text-align: center;
+}
+
+.panneau-panneau-state p {
+    margin: 0;
+}

package/dist/Panneau.d.ts

@@ -2,6 +2,7 @@ import { QueryClient } from '@tanstack/react-query';
 import { type PanneauPlugin } from '@panneau/core';
 import { type DataAdapter } from '@panneau/data';
 import type { BootConfig } from '@panneau/protocol';
+import { type NamedIconLoader } from '@panneau/ui';
 /** What `onUnauthorized` receives. */
 export interface UnauthorizedContext {
     /**
@@ -21,6 +22,11 @@ export interface PanneauProps {
     plugins?: readonly PanneauPlugin[];
     /** The TanStack Query client. Defaults to a new one. */
     queryClient?: QueryClient;
+    /**
+     * Loads the Lucide icons that the definition names (`"icon": "users"`). Defaults to every
+     * Lucide icon, each one in its own chunk, loaded when shown. `null` shows no named icons.
+     */
+    iconLoader?: NamedIconLoader | null;
     /**
      * Called once when the API answers that the user isn't authenticated (`401`, or `419` with the
      * Laravel adapter). The app then shows that the session ended. Defaults to sending the browser
@@ -35,5 +41,5 @@ export interface PanneauProps {
  * It uses the definition inlined in the boot config, or fetches it, then renders the shell. When
  * the API answers that the user isn't authenticated, it calls `onUnauthorized`.
  */
-export declare function Panneau({ config, adapter, plugins, queryClient, onUnauthorized, }: PanneauProps): import("react").JSX.Element;
+export declare function Panneau({ config, adapter, plugins, queryClient, iconLoader, onUnauthorized, }: PanneauProps): import("react").JSX.Element;
 //# sourceMappingURL=Panneau.d.ts.map

package/dist/Panneau.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panneau.d.ts","sourceRoot":"","sources":["../src/Panneau.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiC,MAAM,uBAAuB,CAAC;AAGnF,OAAO,EAAE,KAAK,aAAa,EAAwC,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,sCAAsC;AACtC,MAAM,WAAW,mBAAmB;IAChC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,4BAA4B;AAC5B,MAAM,WAAW,YAAY;IACzB,kGAAkG;IAClG,MAAM,EAAE,UAAU,CAAC;IACnB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IACnC,wDAAwD;IACxD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC3D;AA0ED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACpB,MAAM,EACN,OAAO,EACP,OAAY,EACZ,WAAW,EACX,cAAgC,GACnC,EAAE,YAAY,+BAyBd"}
+{"version":3,"file":"Panneau.d.ts","sourceRoot":"","sources":["../src/Panneau.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiC,MAAM,uBAAuB,CAAC;AAGnF,OAAO,EACH,KAAK,aAAa,EAKrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAU,KAAK,eAAe,EAAwC,MAAM,aAAa,CAAC;AASjG,sCAAsC;AACtC,MAAM,WAAW,mBAAmB;IAChC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,4BAA4B;AAC5B,MAAM,WAAW,YAAY;IACzB,kGAAkG;IAClG,MAAM,EAAE,UAAU,CAAC;IACnB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IACnC,wDAAwD;IACxD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC3D;AAiHD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACpB,MAAM,EACN,OAAO,EACP,OAAY,EACZ,WAAW,EACX,UAA6B,EAC7B,cAAgC,GACnC,EAAE,YAAY,+BA0Bd"}

package/dist/Panneau.js

@@ -1,11 +1,18 @@
+import Panneau_module_default from "./Panneau.module.js";
+import { usePreference } from "./preferences.js";
+import { COLOR_SCHEMES } from "./shell/Sidebar.js";
 import { Shell } from "./Shell.js";
 import { createSessionState, getLoginUrl, watchUnauthorized } from "./unauthorized.js";
 import { useEffect, useState, useSyncExternalStore } from "react";
+import { c } from "react/compiler-runtime";
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-import { PanneauProvider, createHistoryRouter } from "@panneau/core";
+import { PanneauProvider, createHistoryRouter, createPluginRegistry, resolveTheme } from "@panneau/core";
 import { isApiError } from "@panneau/data";
 import { createLaravelAdapter } from "@panneau/data/laravel";
 import { DataAdapterProvider, definitionQueryOptions } from "@panneau/data/query";
+import { appMessages } from "@panneau/intl";
+import { Button, PanneauRoot, Spinner, usePanneauIntl } from "@panneau/ui";
+import { lucideIconLoader } from "@panneau/ui/named-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Panneau.tsx
 function redirectToLogin({ loginUrl }) {
@@ -14,47 +21,146 @@ function redirectToLogin({ loginUrl }) {
 function createQueryClient() {
 	return new QueryClient({ defaultOptions: { queries: { retry: (failureCount, error) => !(isApiError(error) && error.status < 500) && failureCount < 3 } } });
 }
-function Content({ config, adapter, plugins, session, onUnauthorized }) {
+function Content({ config, adapter, plugins, iconLoader, session, onUnauthorized }) {
 	const [router] = useState(createHistoryRouter);
 	const definitionQuery = useQuery({
 		...definitionQueryOptions(adapter),
 		initialData: config.definition
 	});
 	const signedOut = useSyncExternalStore(session.subscribe, session.isSignedOut);
-	const loginUrl = getLoginUrl(definitionQuery.data, config);
+	const [colorScheme, setColorScheme] = usePreference("color-scheme", COLOR_SCHEMES);
+	const definition = definitionQuery.data;
+	const loginUrl = getLoginUrl(definition, config);
 	useEffect(() => {
 		if (signedOut) onUnauthorized({ loginUrl });
 	}, [signedOut]);
-	if (signedOut) return /* @__PURE__ */ jsxs("div", {
-		role: "alert",
-		children: [/* @__PURE__ */ jsx("p", { children: "Your session has ended." }), loginUrl !== null ? /* @__PURE__ */ jsx("a", {
-			href: loginUrl,
-			children: "Log in"
-		}) : null]
+	const scheme = colorScheme ?? definition?.theme?.colorScheme ?? "light";
+	return /* @__PURE__ */ jsx(PanneauRoot, {
+		theme: definition !== void 0 ? resolveTheme(definition.theme, createPluginRegistry(plugins).themes) : null,
+		colorScheme: scheme,
+		locale: definition?.locale ?? config.locale,
+		iconLoader,
+		className: Panneau_module_default.root,
+		children: signedOut ? /* @__PURE__ */ jsx(SessionEnded, { loginUrl }) : definition === void 0 ? /* @__PURE__ */ jsx(Loading, {
+			isError: definitionQuery.isError,
+			onRetry: () => void definitionQuery.refetch()
+		}) : /* @__PURE__ */ jsx(PanneauProvider, {
+			plugins,
+			definition,
+			router,
+			children: /* @__PURE__ */ jsx(Shell, {
+				definition,
+				basePath: config.basePath,
+				colorScheme: scheme,
+				onColorSchemeChange: setColorScheme
+			})
+		})
 	});
-	if (definitionQuery.data === void 0) {
-		if (definitionQuery.isError) return /* @__PURE__ */ jsxs("div", {
+}
+function SessionEnded(t0) {
+	const $ = c(10);
+	const { loginUrl } = t0;
+	const intl = usePanneauIntl();
+	let t1;
+	if ($[0] !== intl) {
+		t1 = intl.formatMessage(appMessages.sessionEnded);
+		$[0] = intl;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", { children: t1 });
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== intl || $[5] !== loginUrl) {
+		t3 = loginUrl !== null ? /* @__PURE__ */ jsx("a", {
+			href: loginUrl,
+			children: intl.formatMessage(appMessages.logIn)
+		}) : null;
+		$[4] = intl;
+		$[5] = loginUrl;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
 			role: "alert",
-			children: [/* @__PURE__ */ jsx("p", { children: "The admin panel could not be loaded." }), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => void definitionQuery.refetch(),
-				children: "Try again"
-			})]
-		});
-		return /* @__PURE__ */ jsx("p", {
-			role: "status",
-			children: "Loading…"
+			className: Panneau_module_default.state,
+			children: [t2, t3]
 		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+function Loading(t0) {
+	const $ = c(16);
+	const { isError, onRetry } = t0;
+	const intl = usePanneauIntl();
+	if (isError) {
+		let t1;
+		if ($[0] !== intl) {
+			t1 = intl.formatMessage(appMessages.loadError);
+			$[0] = intl;
+			$[1] = t1;
+		} else t1 = $[1];
+		let t2;
+		if ($[2] !== t1) {
+			t2 = /* @__PURE__ */ jsx("p", { children: t1 });
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		let t3;
+		if ($[4] !== intl) {
+			t3 = intl.formatMessage(appMessages.retry);
+			$[4] = intl;
+			$[5] = t3;
+		} else t3 = $[5];
+		let t4;
+		if ($[6] !== onRetry || $[7] !== t3) {
+			t4 = /* @__PURE__ */ jsx(Button, {
+				onPress: onRetry,
+				children: t3
+			});
+			$[6] = onRetry;
+			$[7] = t3;
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== t2 || $[10] !== t4) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: Panneau_module_default.state,
+				children: [t2, t4]
+			});
+			$[9] = t2;
+			$[10] = t4;
+			$[11] = t5;
+		} else t5 = $[11];
+		return t5;
 	}
-	return /* @__PURE__ */ jsx(PanneauProvider, {
-		plugins,
-		definition: definitionQuery.data,
-		router,
-		children: /* @__PURE__ */ jsx(Shell, {
-			definition: definitionQuery.data,
-			basePath: config.basePath
-		})
-	});
+	let t1;
+	if ($[12] !== intl) {
+		t1 = intl.formatMessage(appMessages.loading);
+		$[12] = intl;
+		$[13] = t1;
+	} else t1 = $[13];
+	let t2;
+	if ($[14] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: Panneau_module_default.state,
+			children: /* @__PURE__ */ jsx(Spinner, {
+				showLabel: true,
+				label: t1
+			})
+		});
+		$[14] = t1;
+		$[15] = t2;
+	} else t2 = $[15];
+	return t2;
 }
 /**
 * The Panneau admin panel, for a React app that renders it itself. `createPanneauApp()` mounts it
@@ -63,7 +169,7 @@ function Content({ config, adapter, plugins, session, onUnauthorized }) {
 * It uses the definition inlined in the boot config, or fetches it, then renders the shell. When
 * the API answers that the user isn't authenticated, it calls `onUnauthorized`.
 */
-function Panneau({ config, adapter, plugins = [], queryClient, onUnauthorized = redirectToLogin }) {
+function Panneau({ config, adapter, plugins = [], queryClient, iconLoader = lucideIconLoader, onUnauthorized = redirectToLogin }) {
 	const [state] = useState(() => {
 		const session = createSessionState();
 		return {
@@ -80,6 +186,7 @@ function Panneau({ config, adapter, plugins = [], queryClient, onUnauthorized =
 				config,
 				adapter: state.adapter,
 				plugins,
+				iconLoader,
 				session: state.session,
 				onUnauthorized
 			})

package/dist/Panneau.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panneau.js","names":[],"sources":["../src/Panneau.tsx"],"sourcesContent":["import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';\nimport { useEffect, useState, useSyncExternalStore } from 'react';\n\nimport { type PanneauPlugin, PanneauProvider, createHistoryRouter } from '@panneau/core';\nimport { type DataAdapter, isApiError } from '@panneau/data';\nimport { createLaravelAdapter } from '@panneau/data/laravel';\nimport { DataAdapterProvider, definitionQueryOptions } from '@panneau/data/query';\nimport type { BootConfig } from '@panneau/protocol';\n\nimport { Shell } from './Shell';\nimport { createSessionState, getLoginUrl, watchUnauthorized } from './unauthorized';\n\n/** What `onUnauthorized` receives. */\nexport interface UnauthorizedContext {\n    /**\n     * Where to send the user: `auth.loginUrl` of the definition in `external` auth mode, or the\n     * `loginUrl` of the boot config before the definition is loaded. `null` when there is none, or\n     * in `panneau` auth mode, where the login page is part of the app.\n     */\n    loginUrl: string | null;\n}\n\n/** Props of `<Panneau>`. */\nexport interface PanneauProps {\n    /** The boot config, validated (`readBootConfig()`, or `validateBootConfig()` of the protocol). */\n    config: BootConfig;\n    /** The data adapter. Defaults to `createLaravelAdapter({ baseUrl: config.apiBaseUrl })`. */\n    adapter?: DataAdapter;\n    /** Plugins: field types, pages, locales, themes… */\n    plugins?: readonly PanneauPlugin[];\n    /** The TanStack Query client. Defaults to a new one. */\n    queryClient?: QueryClient;\n    /**\n     * Called once when the API answers that the user isn't authenticated (`401`, or `419` with the\n     * Laravel adapter). The app then shows that the session ended. Defaults to sending the browser\n     * to `loginUrl` when there is one.\n     */\n    onUnauthorized?: (context: UnauthorizedContext) => void;\n}\n\nfunction redirectToLogin({ loginUrl }: UnauthorizedContext) {\n    if (loginUrl !== null) {\n        window.location.assign(loginUrl);\n    }\n}\n\nfunction createQueryClient(): QueryClient {\n    return new QueryClient({\n        defaultOptions: {\n            queries: {\n                // Client errors (401, 403, 404, 422…) don't change on retry.\n                retry: (failureCount, error) =>\n                    !(isApiError(error) && error.status < 500) && failureCount < 3,\n            },\n        },\n    });\n}\n\nfunction Content({\n    config,\n    adapter,\n    plugins,\n    session,\n    onUnauthorized,\n}: Required<Pick<PanneauProps, 'config' | 'adapter' | 'onUnauthorized'>> & {\n    plugins: readonly PanneauPlugin[];\n    session: ReturnType<typeof createSessionState>;\n}) {\n    const [router] = useState(createHistoryRouter);\n    const definitionQuery = useQuery({\n        ...definitionQueryOptions(adapter),\n        initialData: config.definition,\n    });\n    const signedOut = useSyncExternalStore(session.subscribe, session.isSignedOut);\n    const loginUrl = getLoginUrl(definitionQuery.data, config);\n\n    useEffect(() => {\n        if (signedOut) {\n            onUnauthorized({ loginUrl });\n        }\n        // Only when the session ends: `loginUrl` and the callback are read at that time.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [signedOut]);\n\n    if (signedOut) {\n        return (\n            <div role=\"alert\">\n                <p>Your session has ended.</p>\n                {loginUrl !== null ? <a href={loginUrl}>Log in</a> : null}\n            </div>\n        );\n    }\n    if (definitionQuery.data === undefined) {\n        if (definitionQuery.isError) {\n            return (\n                <div role=\"alert\">\n                    <p>The admin panel could not be loaded.</p>\n                    <button type=\"button\" onClick={() => void definitionQuery.refetch()}>\n                        Try again\n                    </button>\n                </div>\n            );\n        }\n        return <p role=\"status\">Loading…</p>;\n    }\n    return (\n        <PanneauProvider plugins={plugins} definition={definitionQuery.data} router={router}>\n            <Shell definition={definitionQuery.data} basePath={config.basePath} />\n        </PanneauProvider>\n    );\n}\n\n/**\n * The Panneau admin panel, for a React app that renders it itself. `createPanneauApp()` mounts it\n * in an element of the page. The adapter and the query client are read on the first render.\n *\n * It uses the definition inlined in the boot config, or fetches it, then renders the shell. When\n * the API answers that the user isn't authenticated, it calls `onUnauthorized`.\n */\nexport function Panneau({\n    config,\n    adapter,\n    plugins = [],\n    queryClient,\n    onUnauthorized = redirectToLogin,\n}: PanneauProps) {\n    const [state] = useState(() => {\n        const session = createSessionState();\n        return {\n            session,\n            adapter: watchUnauthorized(\n                adapter ?? createLaravelAdapter({ baseUrl: config.apiBaseUrl }),\n                session,\n            ),\n            queryClient: queryClient ?? createQueryClient(),\n        };\n    });\n    return (\n        <QueryClientProvider client={state.queryClient}>\n            <DataAdapterProvider adapter={state.adapter}>\n                <Content\n                    config={config}\n                    adapter={state.adapter}\n                    plugins={plugins}\n                    session={state.session}\n                    onUnauthorized={onUnauthorized}\n                />\n            </DataAdapterProvider>\n        </QueryClientProvider>\n    );\n}\n"],"mappings":";;;;;;;;;;AAwCA,SAAS,gBAAgB,EAAE,YAAiC;CACxD,IAAI,aAAa,MACb,OAAO,SAAS,OAAO,QAAQ;AAEvC;AAEA,SAAS,oBAAiC;CACtC,OAAO,IAAI,YAAY,EACnB,gBAAgB,EACZ,SAAS,EAEL,QAAQ,cAAc,UAClB,EAAE,WAAW,KAAK,KAAK,MAAM,SAAS,QAAQ,eAAe,EACrE,EACJ,EACJ,CAAC;AACL;AAEA,SAAS,QAAQ,EACb,QACA,SACA,SACA,SACA,kBAID;CACC,MAAM,CAAC,UAAU,SAAS,mBAAmB;CAC7C,MAAM,kBAAkB,SAAS;EAC7B,GAAG,uBAAuB,OAAO;EACjC,aAAa,OAAO;CACxB,CAAC;CACD,MAAM,YAAY,qBAAqB,QAAQ,WAAW,QAAQ,WAAW;CAC7E,MAAM,WAAW,YAAY,gBAAgB,MAAM,MAAM;CAEzD,gBAAgB;EACZ,IAAI,WACA,eAAe,EAAE,SAAS,CAAC;CAInC,GAAG,CAAC,SAAS,CAAC;CAEd,IAAI,WACA,OACI,qBAAC,OAAD;EAAK,MAAK;EAAV,UAAA,CACI,oBAAC,KAAD,EAAA,UAAG,0BAA0B,CAAA,GAC5B,aAAa,OAAO,oBAAC,KAAD;GAAG,MAAM;GAAU,UAAA;EAAS,CAAA,IAAI,IACpD;;CAGb,IAAI,gBAAgB,SAAS,KAAA,GAAW;EACpC,IAAI,gBAAgB,SAChB,OACI,qBAAC,OAAD;GAAK,MAAK;GAAV,UAAA,CACI,oBAAC,KAAD,EAAA,UAAG,uCAAuC,CAAA,GAC1C,oBAAC,UAAD;IAAQ,MAAK;IAAS,eAAe,KAAK,gBAAgB,QAAQ;IAAE,UAAA;GAE5D,CAAA,CACP;;EAGb,OAAO,oBAAC,KAAD;GAAG,MAAK;GAAS,UAAA;EAAW,CAAA;CACvC;CACA,OACI,oBAAC,iBAAD;EAA0B;EAAS,YAAY,gBAAgB;EAAc;EACzE,UAAA,oBAAC,OAAD;GAAO,YAAY,gBAAgB;GAAM,UAAU,OAAO;EAAS,CAAA;CACtD,CAAA;AAEzB;;;;;;;;AASA,SAAgB,QAAQ,EACpB,QACA,SACA,UAAU,CAAA,GACV,aACA,iBAAiB,mBACJ;CACb,MAAM,CAAC,SAAS,eAAe;EAC3B,MAAM,UAAU,mBAAmB;EACnC,OAAO;GACH;GACA,SAAS,kBACL,WAAW,qBAAqB,EAAE,SAAS,OAAO,WAAW,CAAC,GAC9D,OACJ;GACA,aAAa,eAAe,kBAAkB;EAClD;CACJ,CAAC;CACD,OACI,oBAAC,qBAAD;EAAqB,QAAQ,MAAM;EAC/B,UAAA,oBAAC,qBAAD;GAAqB,SAAS,MAAM;GAChC,UAAA,oBAAC,SAAD;IACY;IACR,SAAS,MAAM;IACN;IACT,SAAS,MAAM;IACC;GAAe,CAAA;EAElB,CAAA;CACJ,CAAA;AAE7B"}
+{"version":3,"file":"Panneau.js","names":["loginUrl","onRetry","styles","_c"],"sources":["../src/Panneau.tsx"],"sourcesContent":["import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';\nimport { useEffect, useState, useSyncExternalStore } from 'react';\n\nimport {\n    type PanneauPlugin,\n    PanneauProvider,\n    createHistoryRouter,\n    createPluginRegistry,\n    resolveTheme,\n} from '@panneau/core';\nimport { type DataAdapter, isApiError } from '@panneau/data';\nimport { createLaravelAdapter } from '@panneau/data/laravel';\nimport { DataAdapterProvider, definitionQueryOptions } from '@panneau/data/query';\nimport { appMessages } from '@panneau/intl';\nimport type { BootConfig } from '@panneau/protocol';\nimport { Button, type NamedIconLoader, PanneauRoot, Spinner, usePanneauIntl } from '@panneau/ui';\nimport { lucideIconLoader } from '@panneau/ui/named-icons';\n\nimport styles from './Panneau.module.css';\nimport { Shell } from './Shell';\nimport { usePreference } from './preferences';\nimport { COLOR_SCHEMES } from './shell/Sidebar';\nimport { createSessionState, getLoginUrl, watchUnauthorized } from './unauthorized';\n\n/** What `onUnauthorized` receives. */\nexport interface UnauthorizedContext {\n    /**\n     * Where to send the user: `auth.loginUrl` of the definition in `external` auth mode, or the\n     * `loginUrl` of the boot config before the definition is loaded. `null` when there is none, or\n     * in `panneau` auth mode, where the login page is part of the app.\n     */\n    loginUrl: string | null;\n}\n\n/** Props of `<Panneau>`. */\nexport interface PanneauProps {\n    /** The boot config, validated (`readBootConfig()`, or `validateBootConfig()` of the protocol). */\n    config: BootConfig;\n    /** The data adapter. Defaults to `createLaravelAdapter({ baseUrl: config.apiBaseUrl })`. */\n    adapter?: DataAdapter;\n    /** Plugins: field types, pages, locales, themes… */\n    plugins?: readonly PanneauPlugin[];\n    /** The TanStack Query client. Defaults to a new one. */\n    queryClient?: QueryClient;\n    /**\n     * Loads the Lucide icons that the definition names (`\"icon\": \"users\"`). Defaults to every\n     * Lucide icon, each one in its own chunk, loaded when shown. `null` shows no named icons.\n     */\n    iconLoader?: NamedIconLoader | null;\n    /**\n     * Called once when the API answers that the user isn't authenticated (`401`, or `419` with the\n     * Laravel adapter). The app then shows that the session ended. Defaults to sending the browser\n     * to `loginUrl` when there is one.\n     */\n    onUnauthorized?: (context: UnauthorizedContext) => void;\n}\n\nfunction redirectToLogin({ loginUrl }: UnauthorizedContext) {\n    if (loginUrl !== null) {\n        window.location.assign(loginUrl);\n    }\n}\n\nfunction createQueryClient(): QueryClient {\n    return new QueryClient({\n        defaultOptions: {\n            queries: {\n                // Client errors (401, 403, 404, 422…) don't change on retry.\n                retry: (failureCount, error) =>\n                    !(isApiError(error) && error.status < 500) && failureCount < 3,\n            },\n        },\n    });\n}\n\nfunction Content({\n    config,\n    adapter,\n    plugins,\n    iconLoader,\n    session,\n    onUnauthorized,\n}: Required<Pick<PanneauProps, 'config' | 'adapter' | 'onUnauthorized'>> & {\n    plugins: readonly PanneauPlugin[];\n    iconLoader: NamedIconLoader | null;\n    session: ReturnType<typeof createSessionState>;\n}) {\n    const [router] = useState(createHistoryRouter);\n    const definitionQuery = useQuery({\n        ...definitionQueryOptions(adapter),\n        initialData: config.definition,\n    });\n    const signedOut = useSyncExternalStore(session.subscribe, session.isSignedOut);\n    const [colorScheme, setColorScheme] = usePreference('color-scheme', COLOR_SCHEMES);\n    const definition = definitionQuery.data;\n    const loginUrl = getLoginUrl(definition, config);\n\n    useEffect(() => {\n        if (signedOut) {\n            onUnauthorized({ loginUrl });\n        }\n        // Only when the session ends: `loginUrl` and the callback are read at that time.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [signedOut]);\n\n    const scheme = colorScheme ?? definition?.theme?.colorScheme ?? 'light';\n    return (\n        <PanneauRoot\n            theme={\n                definition !== undefined\n                    ? resolveTheme(definition.theme, createPluginRegistry(plugins).themes)\n                    : null\n            }\n            colorScheme={scheme}\n            locale={definition?.locale ?? config.locale}\n            iconLoader={iconLoader}\n            className={styles.root}\n        >\n            {signedOut ? (\n                <SessionEnded loginUrl={loginUrl} />\n            ) : definition === undefined ? (\n                <Loading\n                    isError={definitionQuery.isError}\n                    onRetry={() => void definitionQuery.refetch()}\n                />\n            ) : (\n                <PanneauProvider plugins={plugins} definition={definition} router={router}>\n                    <Shell\n                        definition={definition}\n                        basePath={config.basePath}\n                        colorScheme={scheme}\n                        onColorSchemeChange={setColorScheme}\n                    />\n                </PanneauProvider>\n            )}\n        </PanneauRoot>\n    );\n}\n\nfunction SessionEnded({ loginUrl }: { loginUrl: string | null }) {\n    const intl = usePanneauIntl();\n    return (\n        <div role=\"alert\" className={styles.state}>\n            <p>{intl.formatMessage(appMessages.sessionEnded)}</p>\n            {loginUrl !== null ? (\n                <a href={loginUrl}>{intl.formatMessage(appMessages.logIn)}</a>\n            ) : null}\n        </div>\n    );\n}\n\nfunction Loading({ isError, onRetry }: { isError: boolean; onRetry: () => void }) {\n    const intl = usePanneauIntl();\n    if (isError) {\n        return (\n            <div role=\"alert\" className={styles.state}>\n                <p>{intl.formatMessage(appMessages.loadError)}</p>\n                <Button onPress={onRetry}>{intl.formatMessage(appMessages.retry)}</Button>\n            </div>\n        );\n    }\n    return (\n        <div className={styles.state}>\n            <Spinner showLabel label={intl.formatMessage(appMessages.loading)} />\n        </div>\n    );\n}\n\n/**\n * The Panneau admin panel, for a React app that renders it itself. `createPanneauApp()` mounts it\n * in an element of the page. The adapter and the query client are read on the first render.\n *\n * It uses the definition inlined in the boot config, or fetches it, then renders the shell. When\n * the API answers that the user isn't authenticated, it calls `onUnauthorized`.\n */\nexport function Panneau({\n    config,\n    adapter,\n    plugins = [],\n    queryClient,\n    iconLoader = lucideIconLoader,\n    onUnauthorized = redirectToLogin,\n}: PanneauProps) {\n    const [state] = useState(() => {\n        const session = createSessionState();\n        return {\n            session,\n            adapter: watchUnauthorized(\n                adapter ?? createLaravelAdapter({ baseUrl: config.apiBaseUrl }),\n                session,\n            ),\n            queryClient: queryClient ?? createQueryClient(),\n        };\n    });\n    return (\n        <QueryClientProvider client={state.queryClient}>\n            <DataAdapterProvider adapter={state.adapter}>\n                <Content\n                    config={config}\n                    adapter={state.adapter}\n                    plugins={plugins}\n                    iconLoader={iconLoader}\n                    session={state.session}\n                    onUnauthorized={onUnauthorized}\n                />\n            </DataAdapterProvider>\n        </QueryClientProvider>\n    );\n}\n"],"mappings":"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"}

package/dist/Panneau.module.js

@@ -0,0 +1,12 @@
+import "./Panneau.css";
+//#region src/Panneau.module.css
+var root = "panneau-panneau-root";
+var state = "panneau-panneau-state";
+var Panneau_module_default = {
+	root,
+	state
+};
+//#endregion
+export { Panneau_module_default as default, root, state };
+
+//# sourceMappingURL=Panneau.module.js.map

package/dist/Panneau.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panneau.module.js","names":[],"sources":["../src/Panneau.module.css"],"sourcesContent":[".root {\n    min-height: 100dvh;\n}\n\n/* Loading, a definition that failed to load, and an ended session: centered in the window. */\n.state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-3);\n    min-height: 100dvh;\n    padding: var(--panneau-space-4);\n    text-align: center;\n}\n\n.state p {\n    margin: 0;\n}\n"],"mappings":""}

package/dist/Shell.d.ts

@@ -1,11 +1,16 @@
 import type { Definition } from '@panneau/protocol';
+import type { ColorSchemePreference } from './shell/Sidebar';
 export interface ShellProps {
     definition: Definition;
     basePath: string;
+    colorScheme: ColorSchemePreference;
+    onColorSchemeChange: (scheme: ColorSchemePreference) => void;
 }
 /**
- * Placeholder of the app shell: the site name, the resources, and the title of the current route.
- * The real shell (layout, menus, pages) comes in Phase 2.
+ * The app shell: the layout with its sidebar, and the page of the current route. Links go
+ * through the history of the browser without reloading the page, and actions run through the
+ * adapter, refreshing what their result changed. Leaving a page with unsaved changes, by a link
+ * or by going back or forward, asks first.
  */
-export declare function Shell({ definition, basePath }: ShellProps): import("react").JSX.Element;
+export declare function Shell({ definition, basePath, colorScheme, onColorSchemeChange }: ShellProps): import("react").JSX.Element;
 //# sourceMappingURL=Shell.d.ts.map

package/dist/Shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shell.d.ts","sourceRoot":"","sources":["../src/Shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CACpB;AA6BD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAiCzD"}
+{"version":3,"file":"Shell.d.ts","sourceRoot":"","sources":["../src/Shell.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,mBAAmB,CAAC;AAWpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,qBAAqB,CAAC;IACnC,mBAAmB,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChE;AAuFD;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,UAAU,+BAmD3F"}