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

package/dist/shell/AppLayout.js

@@ -0,0 +1,365 @@
+import { routePath } from "../routes.js";
+import { cx } from "../cx.js";
+import { usePreference } from "../preferences.js";
+import AppLayout_module_default from "./AppLayout.module.js";
+import { Sidebar } from "./Sidebar.js";
+import { GoTo } from "./GoTo.js";
+import { useEffect, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { appMessages } from "@panneau/intl";
+import { IconButton, useCommandShortcut, usePanneauIntl, usePortalContainer } from "@panneau/ui";
+import { Dialog, Link, Modal, ModalOverlay } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, Search } from "lucide-react";
+//#region src/shell/AppLayout.tsx
+var CONTENT_ID = "panneau-content";
+var SIDEBAR_STATES = ["expanded", "collapsed"];
+function isEditable(target) {
+	return target instanceof HTMLElement && (target.isContentEditable || [
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(target.tagName));
+}
+/** Whether two routes are the same list, with or without the panel of an item. */
+function isSameList(a, b) {
+	return (a.name === "resource.index" || a.name === "resource.show") && (b.name === "resource.index" || b.name === "resource.show") && a.resource === b.resource;
+}
+/**
+* Where focus goes when the route changes, so that screen readers announce the new page: its
+* title, or the page itself without one. Closing the panel of an item goes back to the item's
+* link in the list; opening it is left to the panel.
+*/
+function focusPage(main, previous, route, basePath) {
+	if (isSameList(previous, route)) {
+		if (previous.name === "resource.show" && route.name === "resource.index") {
+			const href = routePath(previous, basePath);
+			[...main.querySelectorAll("a[href]")].find((candidate) => {
+				const value = candidate.getAttribute("href") ?? "";
+				return value === href || value.startsWith(`${href}?`);
+			})?.focus();
+		}
+		return;
+	}
+	main.scrollTop = 0;
+	window.scrollTo({ top: 0 });
+	const heading = main.querySelector("h1");
+	if (heading !== null && !heading.hasAttribute("tabindex")) heading.tabIndex = -1;
+	(heading ?? main).focus({ preventScroll: true });
+}
+/**
+* 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.
+*/
+function AppLayout(t0) {
+	const $ = c(73);
+	const { definition, basePath, route, colorScheme, onColorSchemeChange, children } = t0;
+	const intl = usePanneauIntl();
+	const portalContainer = usePortalContainer();
+	const [sidebar, setSidebar] = usePreference("sidebar", SIDEBAR_STATES);
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const [goToOpen, setGoToOpen] = useState(false);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setGoToOpen(_temp);
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== goToOpen) {
+		t2 = { isOpen: goToOpen };
+		$[1] = goToOpen;
+		$[2] = t2;
+	} else t2 = $[2];
+	useCommandShortcut(t1, t2);
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			setDrawerOpen(false);
+			setGoToOpen(true);
+		};
+		$[3] = t3;
+	} else t3 = $[3];
+	const openGoTo = t3;
+	const collapsed = sidebar === "collapsed";
+	let t4;
+	if ($[4] !== collapsed || $[5] !== setSidebar) {
+		t4 = () => setSidebar(collapsed ? "expanded" : "collapsed");
+		$[4] = collapsed;
+		$[5] = setSidebar;
+		$[6] = t4;
+	} else t4 = $[6];
+	const toggle = t4;
+	const main = useRef(null);
+	const previousRoute = useRef(null);
+	let t5;
+	if ($[7] !== route) {
+		t5 = JSON.stringify(route);
+		$[7] = route;
+		$[8] = t5;
+	} else t5 = $[8];
+	const routeKey = t5;
+	let t6;
+	let t7;
+	if ($[9] !== basePath || $[10] !== routeKey) {
+		t6 = () => {
+			const next = JSON.parse(routeKey);
+			const previous = previousRoute.current;
+			previousRoute.current = next;
+			if (previous === null || main.current === null) return;
+			const element = main.current;
+			const frame = window.requestAnimationFrame(() => focusPage(element, previous, next, basePath));
+			return () => window.cancelAnimationFrame(frame);
+		};
+		t7 = [routeKey, basePath];
+		$[9] = basePath;
+		$[10] = routeKey;
+		$[11] = t6;
+		$[12] = t7;
+	} else {
+		t6 = $[11];
+		t7 = $[12];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[13] !== toggle) {
+		t8 = () => {
+			const onKeyDown = (event) => {
+				if (event.key === "\\" && (event.metaKey || event.ctrlKey) && !event.altKey && !isEditable(event.target)) {
+					event.preventDefault();
+					toggle();
+				}
+			};
+			window.addEventListener("keydown", onKeyDown);
+			return () => window.removeEventListener("keydown", onKeyDown);
+		};
+		$[13] = toggle;
+		$[14] = t8;
+	} else t8 = $[14];
+	useEffect(t8);
+	let t9;
+	if ($[15] !== basePath || $[16] !== colorScheme || $[17] !== definition || $[18] !== onColorSchemeChange || $[19] !== route) {
+		t9 = {
+			definition,
+			basePath,
+			route,
+			colorScheme,
+			onColorSchemeChange,
+			onGoTo: openGoTo
+		};
+		$[15] = basePath;
+		$[16] = colorScheme;
+		$[17] = definition;
+		$[18] = onColorSchemeChange;
+		$[19] = route;
+		$[20] = t9;
+	} else t9 = $[20];
+	const sidebarProps = t9;
+	const t10 = collapsed && AppLayout_module_default.collapsed;
+	let t11;
+	if ($[21] !== t10) {
+		t11 = cx(AppLayout_module_default.layout, t10);
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== intl) {
+		t12 = intl.formatMessage(appMessages.skipToContent);
+		$[23] = intl;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = /* @__PURE__ */ jsx("a", {
+			href: `#${CONTENT_ID}`,
+			className: AppLayout_module_default.skipLink,
+			children: t12
+		});
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== intl) {
+		t14 = intl.formatMessage(appMessages.openMenu);
+		$[27] = intl;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = () => setDrawerOpen(true);
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== drawerOpen || $[31] !== t14) {
+		t16 = /* @__PURE__ */ jsx(IconButton, {
+			icon: Menu,
+			label: t14,
+			"aria-expanded": drawerOpen,
+			onPress: t15
+		});
+		$[30] = drawerOpen;
+		$[31] = t14;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== basePath) {
+		t17 = routePath({ name: "home" }, basePath);
+		$[33] = basePath;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== definition.name || $[36] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Link, {
+			href: t17,
+			className: AppLayout_module_default.topBarName,
+			children: definition.name
+		});
+		$[35] = definition.name;
+		$[36] = t17;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== intl) {
+		t19 = intl.formatMessage(appMessages.goTo);
+		$[38] = intl;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== t19) {
+		t20 = /* @__PURE__ */ jsx(IconButton, {
+			icon: Search,
+			label: t19,
+			"aria-haspopup": "dialog",
+			className: AppLayout_module_default.topBarSearch,
+			onPress: openGoTo
+		});
+		$[40] = t19;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t16 || $[43] !== t18 || $[44] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("header", {
+			className: AppLayout_module_default.topBar,
+			children: [
+				t16,
+				t18,
+				t20
+			]
+		});
+		$[42] = t16;
+		$[43] = t18;
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== collapsed || $[47] !== sidebarProps || $[48] !== toggle) {
+		t22 = /* @__PURE__ */ jsx("aside", {
+			className: AppLayout_module_default.sidebar,
+			children: /* @__PURE__ */ jsx(Sidebar, {
+				...sidebarProps,
+				collapsed,
+				onToggle: toggle
+			})
+		});
+		$[46] = collapsed;
+		$[47] = sidebarProps;
+		$[48] = toggle;
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== children) {
+		t23 = /* @__PURE__ */ jsx("main", {
+			ref: main,
+			id: CONTENT_ID,
+			tabIndex: -1,
+			className: AppLayout_module_default.main,
+			children: /* @__PURE__ */ jsx("div", {
+				className: AppLayout_module_default.panel,
+				children
+			})
+		});
+		$[50] = children;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== basePath || $[53] !== collapsed || $[54] !== colorScheme || $[55] !== definition || $[56] !== goToOpen || $[57] !== onColorSchemeChange || $[58] !== toggle) {
+		t24 = /* @__PURE__ */ jsx(GoTo, {
+			definition,
+			basePath,
+			isOpen: goToOpen,
+			onOpenChange: setGoToOpen,
+			sidebarCollapsed: collapsed,
+			onToggleSidebar: toggle,
+			colorScheme,
+			onColorSchemeChange
+		});
+		$[52] = basePath;
+		$[53] = collapsed;
+		$[54] = colorScheme;
+		$[55] = definition;
+		$[56] = goToOpen;
+		$[57] = onColorSchemeChange;
+		$[58] = toggle;
+		$[59] = t24;
+	} else t24 = $[59];
+	let t25;
+	if ($[60] !== drawerOpen || $[61] !== intl || $[62] !== portalContainer || $[63] !== sidebarProps) {
+		t25 = portalContainer !== null ? /* @__PURE__ */ jsx(ModalOverlay, {
+			isOpen: drawerOpen,
+			onOpenChange: setDrawerOpen,
+			isDismissable: true,
+			className: AppLayout_module_default.backdrop,
+			UNSTABLE_portalContainer: portalContainer,
+			children: /* @__PURE__ */ jsx(Modal, {
+				className: AppLayout_module_default.drawer,
+				children: /* @__PURE__ */ jsx(Dialog, {
+					"aria-label": intl.formatMessage(appMessages.navigation),
+					className: AppLayout_module_default.drawerDialog,
+					children: /* @__PURE__ */ jsx(Sidebar, {
+						...sidebarProps,
+						onClose: () => setDrawerOpen(false),
+						onNavigate: () => setDrawerOpen(false)
+					})
+				})
+			})
+		}) : null;
+		$[60] = drawerOpen;
+		$[61] = intl;
+		$[62] = portalContainer;
+		$[63] = sidebarProps;
+		$[64] = t25;
+	} else t25 = $[64];
+	let t26;
+	if ($[65] !== t11 || $[66] !== t13 || $[67] !== t21 || $[68] !== t22 || $[69] !== t23 || $[70] !== t24 || $[71] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
+			className: t11,
+			children: [
+				t13,
+				t21,
+				t22,
+				t23,
+				t24,
+				t25
+			]
+		});
+		$[65] = t11;
+		$[66] = t13;
+		$[67] = t21;
+		$[68] = t22;
+		$[69] = t23;
+		$[70] = t24;
+		$[71] = t25;
+		$[72] = t26;
+	} else t26 = $[72];
+	return t26;
+}
+function _temp(open) {
+	return !open;
+}
+//#endregion
+export { AppLayout };
+
+//# sourceMappingURL=AppLayout.js.map

package/dist/shell/AppLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.js","names":["Menu","drawerOpen","Search","openGoTo","collapsed","toggle","main","CONTENT_ID","children","definition","basePath","goToOpen","setGoToOpen","colorScheme","onColorSchemeChange","setDrawerOpen","portalContainer","_c","styles"],"sources":["../../src/shell/AppLayout.tsx"],"sourcesContent":["import { Menu, Search } from 'lucide-react';\nimport { type ReactNode, useEffect, useRef, useState } from 'react';\nimport { Dialog, Link, Modal, ModalOverlay } from 'react-aria-components';\n\nimport { appMessages } from '@panneau/intl';\nimport type { Definition } from '@panneau/protocol';\nimport { IconButton, useCommandShortcut, usePanneauIntl, usePortalContainer } from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport { usePreference } from '../preferences';\nimport { type AppRoute, routePath } from '../routes';\nimport styles from './AppLayout.module.css';\nimport { GoTo } from './GoTo';\nimport { type ColorSchemePreference, Sidebar } from './Sidebar';\n\nconst CONTENT_ID = 'panneau-content';\nconst SIDEBAR_STATES = ['expanded', 'collapsed'] as const;\n\nexport interface AppLayoutProps {\n    definition: Definition;\n    basePath: string;\n    route: AppRoute;\n    colorScheme: ColorSchemePreference;\n    onColorSchemeChange: (scheme: ColorSchemePreference) => void;\n    children?: ReactNode;\n}\n\nfunction isEditable(target: EventTarget | null): boolean {\n    return (\n        target instanceof HTMLElement &&\n        (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))\n    );\n}\n\n/** Whether two routes are the same list, with or without the panel of an item. */\nfunction isSameList(a: AppRoute, b: AppRoute): boolean {\n    return (\n        (a.name === 'resource.index' || a.name === 'resource.show') &&\n        (b.name === 'resource.index' || b.name === 'resource.show') &&\n        a.resource === b.resource\n    );\n}\n\n/**\n * Where focus goes when the route changes, so that screen readers announce the new page: its\n * title, or the page itself without one. Closing the panel of an item goes back to the item's\n * link in the list; opening it is left to the panel.\n */\nfunction focusPage(main: HTMLElement, previous: AppRoute, route: AppRoute, basePath: string) {\n    if (isSameList(previous, route)) {\n        if (previous.name === 'resource.show' && route.name === 'resource.index') {\n            const href = routePath(previous, basePath);\n            const link = [...main.querySelectorAll<HTMLAnchorElement>('a[href]')].find(\n                (candidate) => {\n                    const value = candidate.getAttribute('href') ?? '';\n                    return value === href || value.startsWith(`${href}?`);\n                },\n            );\n            link?.focus();\n        }\n        return;\n    }\n    main.scrollTop = 0;\n    window.scrollTo({ top: 0 });\n    const heading = main.querySelector<HTMLElement>('h1');\n    if (heading !== null && !heading.hasAttribute('tabindex')) {\n        heading.tabIndex = -1;\n    }\n    (heading ?? main).focus({ preventScroll: true });\n}\n\n/**\n * The frame of the app. From the `lg` width of the Panneau root (64rem): the sidebar on the\n * window's background and the page on a raised panel, like the vertical tabs of recent browsers.\n * The sidebar collapses to a rail of icons (with its button, or Ctrl+\\ / ⌘+\\), and the browser\n * remembers it. On a smaller screen: a bar at the top, whose button opens the sidebar as a drawer.\n * When the route changes, focus moves to the title of the new page, and the page scrolls to the\n * top.\n */\nexport function AppLayout({\n    definition,\n    basePath,\n    route,\n    colorScheme,\n    onColorSchemeChange,\n    children,\n}: AppLayoutProps) {\n    const intl = usePanneauIntl();\n    const portalContainer = usePortalContainer();\n    const [sidebar, setSidebar] = usePreference('sidebar', SIDEBAR_STATES);\n    const [drawerOpen, setDrawerOpen] = useState(false);\n    const [goToOpen, setGoToOpen] = useState(false);\n    useCommandShortcut(() => setGoToOpen((open) => !open), { isOpen: goToOpen });\n    const openGoTo = () => {\n        setDrawerOpen(false);\n        setGoToOpen(true);\n    };\n    const collapsed = sidebar === 'collapsed';\n    const toggle = () => setSidebar(collapsed ? 'expanded' : 'collapsed');\n\n    const main = useRef<HTMLElement>(null);\n    const previousRoute = useRef<AppRoute | null>(null);\n    const routeKey = JSON.stringify(route);\n    useEffect(() => {\n        const next = JSON.parse(routeKey) as AppRoute;\n        const previous = previousRoute.current;\n        previousRoute.current = next;\n        // The first page keeps the focus where the browser put it\n        if (previous === null || main.current === null) {\n            return undefined;\n        }\n        const element = main.current;\n        // After the page renders, and after a dialog that navigated gave focus back\n        const frame = window.requestAnimationFrame(() =>\n            focusPage(element, previous, next, basePath),\n        );\n        return () => window.cancelAnimationFrame(frame);\n    }, [routeKey, basePath]);\n\n    useEffect(() => {\n        const onKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === '\\\\' &&\n                (event.metaKey || event.ctrlKey) &&\n                !event.altKey &&\n                !isEditable(event.target)\n            ) {\n                event.preventDefault();\n                toggle();\n            }\n        };\n        window.addEventListener('keydown', onKeyDown);\n        return () => window.removeEventListener('keydown', onKeyDown);\n    });\n\n    const sidebarProps = {\n        definition,\n        basePath,\n        route,\n        colorScheme,\n        onColorSchemeChange,\n        onGoTo: openGoTo,\n    };\n\n    return (\n        <div className={cx(styles.layout, collapsed && styles.collapsed)}>\n            <a href={`#${CONTENT_ID}`} className={styles.skipLink}>\n                {intl.formatMessage(appMessages.skipToContent)}\n            </a>\n            <header className={styles.topBar}>\n                <IconButton\n                    icon={Menu}\n                    label={intl.formatMessage(appMessages.openMenu)}\n                    aria-expanded={drawerOpen}\n                    onPress={() => setDrawerOpen(true)}\n                />\n                <Link href={routePath({ name: 'home' }, basePath)} className={styles.topBarName}>\n                    {definition.name}\n                </Link>\n                <IconButton\n                    icon={Search}\n                    label={intl.formatMessage(appMessages.goTo)}\n                    aria-haspopup=\"dialog\"\n                    className={styles.topBarSearch}\n                    onPress={openGoTo}\n                />\n            </header>\n            <aside className={styles.sidebar}>\n                <Sidebar {...sidebarProps} collapsed={collapsed} onToggle={toggle} />\n            </aside>\n            <main ref={main} id={CONTENT_ID} tabIndex={-1} className={styles.main}>\n                <div className={styles.panel}>{children}</div>\n            </main>\n            <GoTo\n                definition={definition}\n                basePath={basePath}\n                isOpen={goToOpen}\n                onOpenChange={setGoToOpen}\n                sidebarCollapsed={collapsed}\n                onToggleSidebar={toggle}\n                colorScheme={colorScheme}\n                onColorSchemeChange={onColorSchemeChange}\n            />\n            {portalContainer !== null ? (\n                <ModalOverlay\n                    isOpen={drawerOpen}\n                    onOpenChange={setDrawerOpen}\n                    isDismissable\n                    className={styles.backdrop}\n                    UNSTABLE_portalContainer={portalContainer}\n                >\n                    <Modal className={styles.drawer}>\n                        <Dialog\n                            aria-label={intl.formatMessage(appMessages.navigation)}\n                            className={styles.drawerDialog}\n                        >\n                            <Sidebar\n                                {...sidebarProps}\n                                onClose={() => setDrawerOpen(false)}\n                                onNavigate={() => setDrawerOpen(false)}\n                            />\n                        </Dialog>\n                    </Modal>\n                </ModalOverlay>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/shell/AppLayout.module.js

@@ -0,0 +1,36 @@
+import "./AppLayout.css";
+//#region src/shell/AppLayout.module.css
+var layout = "panneau-app-layout-layout";
+var topBar = "panneau-app-layout-top-bar";
+var topBarSearch = "panneau-app-layout-top-bar-search";
+var topBarName = "panneau-app-layout-top-bar-name";
+var sidebar = "panneau-app-layout-sidebar";
+var main = "panneau-app-layout-main";
+var panel = "panneau-app-layout-panel";
+var backdrop = "panneau-app-layout-backdrop";
+var fade = "panneau-app-layout-fade";
+var drawer = "panneau-app-layout-drawer";
+var slide = "panneau-app-layout-slide";
+var drawerDialog = "panneau-app-layout-drawer-dialog";
+var skipLink = "panneau-app-layout-skip-link";
+var collapsed = "panneau-app-layout-collapsed";
+var AppLayout_module_default = {
+	layout,
+	topBar,
+	topBarSearch,
+	topBarName,
+	sidebar,
+	main,
+	panel,
+	backdrop,
+	fade,
+	drawer,
+	slide,
+	drawerDialog,
+	skipLink,
+	collapsed
+};
+//#endregion
+export { backdrop, collapsed, AppLayout_module_default as default, drawer, drawerDialog, fade, layout, main, panel, sidebar, skipLink, slide, topBar, topBarName, topBarSearch };
+
+//# sourceMappingURL=AppLayout.module.js.map

package/dist/shell/AppLayout.module.js.map

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

package/dist/shell/GoTo.d.ts

@@ -0,0 +1,20 @@
+import type { Definition } from '@panneau/protocol';
+import { type ColorSchemePreference } from './Sidebar';
+export interface GoToProps {
+    definition: Definition;
+    basePath: string;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    sidebarCollapsed: boolean;
+    onToggleSidebar: () => void;
+    colorScheme: ColorSchemePreference;
+    onColorSchemeChange: (scheme: ColorSchemePreference) => void;
+}
+/**
+ * The "Go to…" palette of the app (decision 0029): recent items, navigation, "New {resource}",
+ * the commands of plugins, the app's actions, then the results of the server's search, grouped by
+ * resource. An item opens its edit form. "Search in" narrows the palette to the results of one
+ * resource, 20 of them, until Backspace in the empty field.
+ */
+export declare function GoTo({ definition, basePath, isOpen, onOpenChange, sidebarCollapsed, onToggleSidebar, colorScheme, onColorSchemeChange, }: GoToProps): import("react").JSX.Element;
+//# sourceMappingURL=GoTo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GoTo.d.ts","sourceRoot":"","sources":["../../src/shell/GoTo.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,mBAAmB,CAAC;AAepE,OAAO,EAAiB,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAWtE,MAAM,WAAW,SAAS;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,qBAAqB,CAAC;IACnC,mBAAmB,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChE;AAkCD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACjB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,mBAAmB,GACtB,EAAE,SAAS,+BAsPX"}