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

package/dist/shell/Sidebar.css

@@ -0,0 +1,313 @@
+/* The sidebar sits on the window's background, like the tab strip of a browser: no surface of its
+ * own, and the current link raised on a surface. Collapsed, it is a rail of icons. */
+
+.panneau-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-4);
+    min-width: 0;
+    height: 100%;
+    padding: var(--panneau-space-3) var(--panneau-space-2);
+}
+
+.panneau-sidebar-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+}
+
+.panneau-sidebar-brand {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+    min-height: var(--panneau-control-height-sm);
+    padding-inline: var(--panneau-space-1);
+    border-radius: var(--panneau-radius-md);
+    color: var(--panneau-color-text);
+    font-weight: var(--panneau-font-weight-bold);
+    text-decoration: none;
+    outline: none;
+}
+
+.panneau-sidebar-logo {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--panneau-radius-md);
+    background: var(--panneau-sidebar-logo-bg, var(--panneau-color-accent));
+    color: var(--panneau-sidebar-logo-color, var(--panneau-color-accent-text));
+    font-size: var(--panneau-font-size-sm);
+    line-height: 1;
+}
+
+.panneau-sidebar-toggle {
+    flex: none;
+    color: var(--panneau-color-text-muted);
+}
+
+/* "Go to…": a button that looks like a search field, with its shortcut. */
+.panneau-sidebar-go-to {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height-sm);
+    padding: 0 var(--panneau-space-2);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-sidebar-link-radius, var(--panneau-radius-md));
+    background: var(--panneau-color-surface);
+    color: var(--panneau-color-text-muted);
+    font: inherit;
+    font-size: var(--panneau-font-size-sm);
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+}
+
+.panneau-sidebar-go-to[data-hovered] {
+    border-color: var(--panneau-color-border-control);
+    color: var(--panneau-color-text);
+}
+
+.panneau-sidebar-go-to[data-focus-visible] {
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-sidebar-go-to-search {
+    flex: none;
+}
+
+.panneau-sidebar-go-to-label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-sidebar-go-to-key {
+    flex: none;
+    padding: 0 var(--panneau-space-1);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-sm);
+    font-family: inherit;
+    font-size: var(--panneau-font-size-xs);
+}
+
+.panneau-sidebar-go-to-icon {
+    flex: none;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-sidebar-nav {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    min-height: 0;
+    overflow-y: auto;
+    /* Room for the focus ring of the links. */
+    margin-inline: calc(-1 * var(--panneau-focus-width));
+    padding-inline: var(--panneau-focus-width);
+}
+
+.panneau-sidebar-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-sidebar-section-label {
+    padding: var(--panneau-space-1) var(--panneau-space-2) 0;
+    color: var(--panneau-color-text-muted);
+    font-size: var(--panneau-font-size-xs);
+    font-weight: var(--panneau-font-weight-medium);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.panneau-sidebar-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-sidebar-separator {
+    width: 100%;
+    margin: 0;
+    border: 0;
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-sidebar-link {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height-sm);
+    padding: 0 var(--panneau-space-2);
+    border: var(--panneau-border-width) solid transparent;
+    border-radius: var(--panneau-sidebar-link-radius, var(--panneau-radius-md));
+    color: var(--panneau-sidebar-link-color, var(--panneau-color-text-muted));
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    transition:
+        background-color var(--panneau-duration),
+        color var(--panneau-duration);
+}
+
+.panneau-sidebar-link[data-hovered] {
+    background: var(--panneau-sidebar-link-hover-bg, var(--panneau-color-hover));
+    color: var(--panneau-sidebar-link-current-color, var(--panneau-color-text));
+}
+
+.panneau-sidebar-link[data-pressed] {
+    background: var(--panneau-color-pressed);
+}
+
+.panneau-sidebar-link[aria-current='page'] {
+    border-color: var(--panneau-sidebar-link-current-border, var(--panneau-color-border));
+    background: var(--panneau-sidebar-link-current-bg, var(--panneau-color-surface));
+    color: var(--panneau-sidebar-link-current-color, var(--panneau-color-text));
+    box-shadow: var(--panneau-sidebar-link-current-shadow, var(--panneau-shadow-sm));
+}
+
+.panneau-sidebar-link[data-focus-visible],
+.panneau-sidebar-brand[data-focus-visible] {
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-sidebar-link-icon {
+    flex: none;
+}
+
+.panneau-sidebar-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-sidebar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    padding-top: var(--panneau-space-3);
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-sidebar-user {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+    padding-inline: var(--panneau-space-1);
+}
+
+.panneau-sidebar-user-link {
+    min-height: var(--panneau-control-height-sm);
+    padding-block: var(--panneau-space-1);
+    border: var(--panneau-border-width) solid transparent;
+    border-radius: var(--panneau-radius-md);
+    color: var(--panneau-color-text);
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+}
+
+/* The profile is a link of the sidebar: the same hover and current states. */
+.panneau-sidebar-user-link[data-hovered] {
+    background: var(--panneau-sidebar-link-hover-bg, var(--panneau-color-hover));
+}
+
+.panneau-sidebar-user-link[aria-current='page'] {
+    border-color: var(--panneau-sidebar-link-current-border, var(--panneau-color-border));
+    background: var(--panneau-sidebar-link-current-bg, var(--panneau-color-surface));
+    box-shadow: var(--panneau-sidebar-link-current-shadow, var(--panneau-shadow-sm));
+}
+
+.panneau-sidebar-user-link[data-focus-visible] {
+    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);
+}
+
+.panneau-sidebar-avatar {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-full);
+    background: var(--panneau-color-surface);
+    color: var(--panneau-color-text);
+    font-size: var(--panneau-font-size-xs);
+    font-weight: var(--panneau-font-weight-bold);
+    object-fit: cover;
+}
+
+.panneau-sidebar-user-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: var(--panneau-line-height-tight);
+}
+
+.panneau-sidebar-user-name {
+    overflow: hidden;
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    text-overflow: ellipsis;
+}
+
+.panneau-sidebar-user-email {
+    overflow: hidden;
+    color: var(--panneau-color-text-muted);
+    font-size: var(--panneau-font-size-xs);
+    text-overflow: ellipsis;
+}
+
+/* The rail: icons only, centered, the labels in tooltips. */
+.panneau-sidebar-collapsed {
+    align-items: center;
+    padding-inline: var(--panneau-space-1);
+}
+
+.panneau-sidebar-collapsed .panneau-sidebar-top,
+.panneau-sidebar-collapsed .panneau-sidebar-footer {
+    flex-direction: column;
+}
+
+.panneau-sidebar-collapsed .panneau-sidebar-brand {
+    flex: none;
+    padding: 0;
+}
+
+.panneau-sidebar-collapsed .panneau-sidebar-label,
+.panneau-sidebar-collapsed .panneau-sidebar-section-label {
+    display: none;
+}
+
+.panneau-sidebar-collapsed .panneau-sidebar-link {
+    justify-content: center;
+    width: var(--panneau-control-height-sm);
+    padding: 0;
+}
+
+.panneau-sidebar-collapsed .panneau-sidebar-list {
+    align-items: center;
+}
+
+.panneau-sidebar-collapsed .panneau-sidebar-user {
+    flex: none;
+    padding: 0;
+}

package/dist/shell/Sidebar.d.ts

@@ -0,0 +1,29 @@
+import type { Definition } from '@panneau/protocol';
+import { type AppRoute } from '../routes';
+/** The color schemes the user can pick, in the order of the button. */
+export declare const COLOR_SCHEMES: readonly ["light", "dark", "auto"];
+export type ColorSchemePreference = (typeof COLOR_SCHEMES)[number];
+export interface SidebarProps {
+    definition: Definition;
+    basePath: string;
+    route: AppRoute;
+    /** Only icons, with the labels in tooltips. */
+    collapsed?: boolean;
+    /** Collapses or expands the sidebar. Without it, the sidebar has no such button. */
+    onToggle?: () => void;
+    /** Closes the sidebar, when it is a drawer on a small screen. */
+    onClose?: () => void;
+    /** Called after a link is followed, to close a drawer. */
+    onNavigate?: () => void;
+    colorScheme: ColorSchemePreference;
+    onColorSchemeChange: (scheme: ColorSchemePreference) => void;
+    /** Opens the "Go to…" palette. Without it, the sidebar has no such button. */
+    onGoTo?: () => void;
+    className?: string;
+}
+/**
+ * The main navigation, as a column: the site, the links of the `main` menu of the definition, and
+ * the user. Collapsed, it is a rail of icons, as in the sidebars of recent browsers.
+ */
+export declare function Sidebar({ definition, basePath, route, collapsed, onToggle, onClose, onNavigate, colorScheme, onColorSchemeChange, onGoTo, className, }: SidebarProps): import("react").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/Sidebar.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAoBpD,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAGrD,uEAAuE;AACvE,eAAO,MAAM,aAAa,oCAAqC,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAqBnE,MAAM,WAAW,YAAY;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,QAAQ,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,qBAAqB,CAAC;IACnC,mBAAmB,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACpB,UAAU,EACV,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,SAAS,GACZ,EAAE,YAAY,+BAyMd"}

package/dist/shell/Sidebar.js

@@ -0,0 +1,225 @@
+import { routePath } from "../routes.js";
+import { getNavigation, getProfilePath, isCurrent } from "../navigation.js";
+import { cx } from "../cx.js";
+import Sidebar_module_default from "./Sidebar.module.js";
+import { appMessages } from "@panneau/intl";
+import { Icon, IconButton, Tooltip, getNamedIcon, isApplePlatform, usePanneauIntl } from "@panneau/ui";
+import { Button as Button$1, Link } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink, File, House, Link2, List, Monitor, Moon, PanelLeftClose, PanelLeftOpen, Search, Sun, X } from "lucide-react";
+//#region src/shell/Sidebar.tsx
+/** The color schemes the user can pick, in the order of the button. */
+var COLOR_SCHEMES = [
+	"light",
+	"dark",
+	"auto"
+];
+var SCHEME_ICONS = {
+	light: Sun,
+	dark: Moon,
+	auto: Monitor
+};
+function defaultIcon(target) {
+	switch (target.kind) {
+		case "home": return House;
+		case "resource": return List;
+		case "page": return File;
+		case "url": return target.external ? ExternalLink : Link2;
+	}
+}
+/**
+* The main navigation, as a column: the site, the links of the `main` menu of the definition, and
+* the user. Collapsed, it is a rail of icons, as in the sidebars of recent browsers.
+*/
+function Sidebar({ definition, basePath, route, collapsed = false, onToggle, onClose, onNavigate, colorScheme, onColorSchemeChange, onGoTo, className }) {
+	const intl = usePanneauIntl();
+	const home = {
+		type: "link",
+		key: "home",
+		label: intl.formatMessage(appMessages.home),
+		href: routePath({ name: "home" }, basePath),
+		icon: void 0,
+		target: { kind: "home" }
+	};
+	const entries = getNavigation(definition, basePath);
+	const sections = [{
+		key: "home",
+		links: [home]
+	}];
+	entries.forEach((entry) => {
+		const last = sections.at(-1);
+		if (entry.type === "link") {
+			if (last === void 0 || last.label !== void 0 || last.key === "home") sections.push({
+				key: entry.key,
+				links: [entry]
+			});
+			else last.links.push(entry);
+		} else if (entry.type === "group") sections.push({
+			key: entry.key,
+			label: entry.label,
+			links: entry.children
+		});
+		else sections.push({
+			key: `separator-${entry.key}`,
+			links: []
+		});
+	});
+	const renderLink = (link) => {
+		const current = isCurrent(link.target, route);
+		const external = link.target.kind === "url" && link.target.external;
+		const element = /* @__PURE__ */ jsxs(Link, {
+			href: link.href,
+			target: external ? "_blank" : void 0,
+			rel: external ? "noopener noreferrer" : void 0,
+			"aria-current": current ? "page" : void 0,
+			"aria-label": collapsed ? link.label : void 0,
+			className: Sidebar_module_default.link,
+			onPress: onNavigate,
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: link.icon !== void 0 ? getNamedIcon(link.icon) : defaultIcon(link.target),
+				size: "md",
+				className: Sidebar_module_default.linkIcon
+			}), /* @__PURE__ */ jsx("span", {
+				className: Sidebar_module_default.label,
+				children: link.label
+			})]
+		});
+		return /* @__PURE__ */ jsx("li", { children: collapsed ? /* @__PURE__ */ jsx(Tooltip, {
+			content: link.label,
+			placement: "end",
+			delay: 300,
+			children: element
+		}) : element }, link.key);
+	};
+	const user = definition.user ?? null;
+	const profilePath = getProfilePath(definition, basePath);
+	const currentPath = route.name !== "not-found" ? routePath(route, basePath) : null;
+	const userContent = user !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [user.avatarUrl !== void 0 ? /* @__PURE__ */ jsx("img", {
+		src: user.avatarUrl,
+		alt: "",
+		className: Sidebar_module_default.avatar
+	}) : /* @__PURE__ */ jsx("span", {
+		className: Sidebar_module_default.avatar,
+		"aria-hidden": "true",
+		children: user.name.charAt(0).toLocaleUpperCase(definition.locale)
+	}), /* @__PURE__ */ jsxs("span", {
+		className: cx(Sidebar_module_default.label, Sidebar_module_default.userText),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: Sidebar_module_default.userName,
+			children: user.name
+		}), user.email !== void 0 ? /* @__PURE__ */ jsx("span", {
+			className: Sidebar_module_default.userEmail,
+			children: user.email
+		}) : null]
+	})] }) : null;
+	const apple = isApplePlatform();
+	const shortcut = apple ? "⌘K" : "Ctrl+K";
+	const keyShortcuts = apple ? "Meta+K" : "Control+K";
+	const nextScheme = COLOR_SCHEMES[(COLOR_SCHEMES.indexOf(colorScheme) + 1) % COLOR_SCHEMES.length] ?? "light";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(Sidebar_module_default.sidebar, collapsed && Sidebar_module_default.collapsed, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: Sidebar_module_default.top,
+				children: [
+					/* @__PURE__ */ jsxs(Link, {
+						href: routePath({ name: "home" }, basePath),
+						className: Sidebar_module_default.brand,
+						"aria-label": collapsed ? definition.name : void 0,
+						onPress: onNavigate,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: Sidebar_module_default.logo,
+							"aria-hidden": "true",
+							children: definition.name.charAt(0).toLocaleUpperCase(definition.locale)
+						}), /* @__PURE__ */ jsx("span", {
+							className: Sidebar_module_default.label,
+							children: definition.name
+						})]
+					}),
+					onToggle !== void 0 ? /* @__PURE__ */ jsx(IconButton, {
+						icon: collapsed ? PanelLeftOpen : PanelLeftClose,
+						label: intl.formatMessage(collapsed ? appMessages.expandSidebar : appMessages.collapseSidebar),
+						"aria-expanded": !collapsed,
+						size: "sm",
+						className: Sidebar_module_default.toggle,
+						onPress: onToggle
+					}) : null,
+					onClose !== void 0 ? /* @__PURE__ */ jsx(IconButton, {
+						icon: X,
+						label: intl.formatMessage(appMessages.closeMenu),
+						size: "sm",
+						className: Sidebar_module_default.toggle,
+						onPress: onClose
+					}) : null
+				]
+			}),
+			onGoTo !== void 0 ? collapsed ? /* @__PURE__ */ jsx(IconButton, {
+				icon: Search,
+				label: `${intl.formatMessage(appMessages.goTo)} (${shortcut})`,
+				"aria-haspopup": "dialog",
+				"aria-keyshortcuts": keyShortcuts,
+				size: "sm",
+				className: Sidebar_module_default.goToIcon,
+				onPress: onGoTo
+			}) : /* @__PURE__ */ jsxs(Button$1, {
+				"aria-haspopup": "dialog",
+				"aria-keyshortcuts": keyShortcuts,
+				className: Sidebar_module_default.goTo,
+				onPress: onGoTo,
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon: Search,
+						size: "sm",
+						className: Sidebar_module_default.goToSearch
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: Sidebar_module_default.goToLabel,
+						children: intl.formatMessage(appMessages.goTo)
+					}),
+					/* @__PURE__ */ jsx("kbd", {
+						className: Sidebar_module_default.goToKey,
+						children: shortcut
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": intl.formatMessage(appMessages.navigation),
+				className: Sidebar_module_default.nav,
+				children: sections.map((section) => section.links.length === 0 ? /* @__PURE__ */ jsx("hr", { className: Sidebar_module_default.separator }, section.key) : /* @__PURE__ */ jsxs("div", {
+					className: Sidebar_module_default.section,
+					children: [section.label !== void 0 ? /* @__PURE__ */ jsx("span", {
+						className: Sidebar_module_default.sectionLabel,
+						"aria-hidden": collapsed,
+						children: section.label
+					}) : null, /* @__PURE__ */ jsx("ul", {
+						className: Sidebar_module_default.list,
+						children: section.links.map(renderLink)
+					})]
+				}, section.key))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Sidebar_module_default.footer,
+				children: [user !== null ? profilePath !== null ? /* @__PURE__ */ jsx(Link, {
+					href: profilePath,
+					className: cx(Sidebar_module_default.user, Sidebar_module_default.userLink),
+					"aria-label": collapsed ? intl.formatMessage(appMessages.profile, { name: user.name }) : void 0,
+					"aria-current": currentPath === profilePath ? "page" : void 0,
+					onPress: onNavigate,
+					children: userContent
+				}) : /* @__PURE__ */ jsx("div", {
+					className: Sidebar_module_default.user,
+					children: userContent
+				}) : null, /* @__PURE__ */ jsx(IconButton, {
+					icon: SCHEME_ICONS[colorScheme],
+					label: intl.formatMessage(appMessages.colorScheme, { scheme: colorScheme }),
+					size: "sm",
+					onPress: () => onColorSchemeChange(nextScheme)
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { COLOR_SCHEMES, Sidebar };
+
+//# sourceMappingURL=Sidebar.js.map

package/dist/shell/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","names":["styles","_Fragment","Button"],"sources":["../../src/shell/Sidebar.tsx"],"sourcesContent":["import {\n    ExternalLink,\n    File,\n    House,\n    Link2,\n    List,\n    Monitor,\n    Moon,\n    PanelLeftClose,\n    PanelLeftOpen,\n    Search,\n    Sun,\n    X,\n} from 'lucide-react';\nimport { Button, Link } from 'react-aria-components';\n\nimport { appMessages } from '@panneau/intl';\nimport type { Definition } from '@panneau/protocol';\nimport {\n    Icon,\n    IconButton,\n    type IconComponent,\n    Tooltip,\n    getNamedIcon,\n    isApplePlatform,\n    usePanneauIntl,\n} from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport {\n    type NavEntry,\n    type NavLink,\n    type NavTarget,\n    getNavigation,\n    getProfilePath,\n    isCurrent,\n} from '../navigation';\nimport { type AppRoute, routePath } from '../routes';\nimport styles from './Sidebar.module.css';\n\n/** The color schemes the user can pick, in the order of the button. */\nexport const COLOR_SCHEMES = ['light', 'dark', 'auto'] as const;\nexport type ColorSchemePreference = (typeof COLOR_SCHEMES)[number];\n\nconst SCHEME_ICONS: Record<ColorSchemePreference, IconComponent> = {\n    light: Sun,\n    dark: Moon,\n    auto: Monitor,\n};\n\nfunction defaultIcon(target: NavTarget): IconComponent {\n    switch (target.kind) {\n        case 'home':\n            return House;\n        case 'resource':\n            return List;\n        case 'page':\n            return File;\n        case 'url':\n            return target.external ? ExternalLink : Link2;\n    }\n}\n\nexport interface SidebarProps {\n    definition: Definition;\n    basePath: string;\n    route: AppRoute;\n    /** Only icons, with the labels in tooltips. */\n    collapsed?: boolean;\n    /** Collapses or expands the sidebar. Without it, the sidebar has no such button. */\n    onToggle?: () => void;\n    /** Closes the sidebar, when it is a drawer on a small screen. */\n    onClose?: () => void;\n    /** Called after a link is followed, to close a drawer. */\n    onNavigate?: () => void;\n    colorScheme: ColorSchemePreference;\n    onColorSchemeChange: (scheme: ColorSchemePreference) => void;\n    /** Opens the \"Go to…\" palette. Without it, the sidebar has no such button. */\n    onGoTo?: () => void;\n    className?: string;\n}\n\n/**\n * The main navigation, as a column: the site, the links of the `main` menu of the definition, and\n * the user. Collapsed, it is a rail of icons, as in the sidebars of recent browsers.\n */\nexport function Sidebar({\n    definition,\n    basePath,\n    route,\n    collapsed = false,\n    onToggle,\n    onClose,\n    onNavigate,\n    colorScheme,\n    onColorSchemeChange,\n    onGoTo,\n    className,\n}: SidebarProps) {\n    const intl = usePanneauIntl();\n    const home: NavLink = {\n        type: 'link',\n        key: 'home',\n        label: intl.formatMessage(appMessages.home),\n        href: routePath({ name: 'home' }, basePath),\n        icon: undefined,\n        target: { kind: 'home' },\n    };\n    const entries = getNavigation(definition, basePath);\n    // Groups and the links between separators each get their own list.\n    const sections: { key: string; label?: string; links: NavLink[] }[] = [\n        { key: 'home', links: [home] },\n    ];\n    entries.forEach((entry: NavEntry) => {\n        const last = sections.at(-1);\n        if (entry.type === 'link') {\n            if (last === undefined || last.label !== undefined || last.key === 'home') {\n                sections.push({ key: entry.key, links: [entry] });\n            } else {\n                last.links.push(entry);\n            }\n        } else if (entry.type === 'group') {\n            sections.push({ key: entry.key, label: entry.label, links: entry.children });\n        } else {\n            sections.push({ key: `separator-${entry.key}`, links: [] });\n        }\n    });\n\n    const renderLink = (link: NavLink) => {\n        const current = isCurrent(link.target, route);\n        const external = link.target.kind === 'url' && link.target.external;\n        const element = (\n            <Link\n                href={link.href}\n                target={external ? '_blank' : undefined}\n                rel={external ? 'noopener noreferrer' : undefined}\n                aria-current={current ? 'page' : undefined}\n                aria-label={collapsed ? link.label : undefined}\n                className={styles.link}\n                onPress={onNavigate}\n            >\n                <Icon\n                    icon={\n                        link.icon !== undefined ? getNamedIcon(link.icon) : defaultIcon(link.target)\n                    }\n                    size=\"md\"\n                    className={styles.linkIcon}\n                />\n                <span className={styles.label}>{link.label}</span>\n            </Link>\n        );\n        return (\n            <li key={link.key}>\n                {collapsed ? (\n                    <Tooltip content={link.label} placement=\"end\" delay={300}>\n                        {element}\n                    </Tooltip>\n                ) : (\n                    element\n                )}\n            </li>\n        );\n    };\n\n    const user = definition.user ?? null;\n    // The user's profile, when the definition has the resource of users\n    const profilePath = getProfilePath(definition, basePath);\n    const currentPath = route.name !== 'not-found' ? routePath(route, basePath) : null;\n    const userContent =\n        user !== null ? (\n            <>\n                {user.avatarUrl !== undefined ? (\n                    <img src={user.avatarUrl} alt=\"\" className={styles.avatar} />\n                ) : (\n                    <span className={styles.avatar} aria-hidden=\"true\">\n                        {user.name.charAt(0).toLocaleUpperCase(definition.locale)}\n                    </span>\n                )}\n                <span className={cx(styles.label, styles.userText)}>\n                    <span className={styles.userName}>{user.name}</span>\n                    {user.email !== undefined ? (\n                        <span className={styles.userEmail}>{user.email}</span>\n                    ) : null}\n                </span>\n            </>\n        ) : null;\n    const apple = isApplePlatform();\n    const shortcut = apple ? '⌘K' : 'Ctrl+K';\n    const keyShortcuts = apple ? 'Meta+K' : 'Control+K';\n    const nextScheme =\n        COLOR_SCHEMES[(COLOR_SCHEMES.indexOf(colorScheme) + 1) % COLOR_SCHEMES.length] ?? 'light';\n\n    return (\n        <div className={cx(styles.sidebar, collapsed && styles.collapsed, className)}>\n            <div className={styles.top}>\n                <Link\n                    href={routePath({ name: 'home' }, basePath)}\n                    className={styles.brand}\n                    aria-label={collapsed ? definition.name : undefined}\n                    onPress={onNavigate}\n                >\n                    <span className={styles.logo} aria-hidden=\"true\">\n                        {definition.name.charAt(0).toLocaleUpperCase(definition.locale)}\n                    </span>\n                    <span className={styles.label}>{definition.name}</span>\n                </Link>\n                {onToggle !== undefined ? (\n                    <IconButton\n                        icon={collapsed ? PanelLeftOpen : PanelLeftClose}\n                        label={intl.formatMessage(\n                            collapsed ? appMessages.expandSidebar : appMessages.collapseSidebar,\n                        )}\n                        aria-expanded={!collapsed}\n                        size=\"sm\"\n                        className={styles.toggle}\n                        onPress={onToggle}\n                    />\n                ) : null}\n                {onClose !== undefined ? (\n                    <IconButton\n                        icon={X}\n                        label={intl.formatMessage(appMessages.closeMenu)}\n                        size=\"sm\"\n                        className={styles.toggle}\n                        onPress={onClose}\n                    />\n                ) : null}\n            </div>\n            {onGoTo !== undefined ? (\n                collapsed ? (\n                    <IconButton\n                        icon={Search}\n                        label={`${intl.formatMessage(appMessages.goTo)} (${shortcut})`}\n                        aria-haspopup=\"dialog\"\n                        aria-keyshortcuts={keyShortcuts}\n                        size=\"sm\"\n                        className={styles.goToIcon}\n                        onPress={onGoTo}\n                    />\n                ) : (\n                    <Button\n                        aria-haspopup=\"dialog\"\n                        aria-keyshortcuts={keyShortcuts}\n                        className={styles.goTo}\n                        onPress={onGoTo}\n                    >\n                        <Icon icon={Search} size=\"sm\" className={styles.goToSearch} />\n                        <span className={styles.goToLabel}>\n                            {intl.formatMessage(appMessages.goTo)}\n                        </span>\n                        <kbd className={styles.goToKey}>{shortcut}</kbd>\n                    </Button>\n                )\n            ) : null}\n            <nav aria-label={intl.formatMessage(appMessages.navigation)} className={styles.nav}>\n                {sections.map((section) =>\n                    section.links.length === 0 ? (\n                        <hr key={section.key} className={styles.separator} />\n                    ) : (\n                        <div key={section.key} className={styles.section}>\n                            {section.label !== undefined ? (\n                                <span className={styles.sectionLabel} aria-hidden={collapsed}>\n                                    {section.label}\n                                </span>\n                            ) : null}\n                            <ul className={styles.list}>{section.links.map(renderLink)}</ul>\n                        </div>\n                    ),\n                )}\n            </nav>\n            <div className={styles.footer}>\n                {user !== null ? (\n                    profilePath !== null ? (\n                        <Link\n                            href={profilePath}\n                            className={cx(styles.user, styles.userLink)}\n                            aria-label={\n                                collapsed\n                                    ? intl.formatMessage(appMessages.profile, { name: user.name })\n                                    : undefined\n                            }\n                            aria-current={currentPath === profilePath ? 'page' : undefined}\n                            onPress={onNavigate}\n                        >\n                            {userContent}\n                        </Link>\n                    ) : (\n                        <div className={styles.user}>{userContent}</div>\n                    )\n                ) : null}\n                <IconButton\n                    icon={SCHEME_ICONS[colorScheme]}\n                    label={intl.formatMessage(appMessages.colorScheme, { scheme: colorScheme })}\n                    size=\"sm\"\n                    onPress={() => onColorSchemeChange(nextScheme)}\n                />\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/shell/Sidebar.module.js

@@ -0,0 +1,60 @@
+import "./Sidebar.css";
+//#region src/shell/Sidebar.module.css
+var sidebar = "panneau-sidebar";
+var top = "panneau-sidebar-top";
+var brand = "panneau-sidebar-brand";
+var logo = "panneau-sidebar-logo";
+var toggle = "panneau-sidebar-toggle";
+var goTo = "panneau-sidebar-go-to";
+var goToSearch = "panneau-sidebar-go-to-search";
+var goToLabel = "panneau-sidebar-go-to-label";
+var goToKey = "panneau-sidebar-go-to-key";
+var goToIcon = "panneau-sidebar-go-to-icon";
+var nav = "panneau-sidebar-nav";
+var section = "panneau-sidebar-section";
+var sectionLabel = "panneau-sidebar-section-label";
+var list = "panneau-sidebar-list";
+var separator = "panneau-sidebar-separator";
+var link = "panneau-sidebar-link";
+var linkIcon = "panneau-sidebar-link-icon";
+var label = "panneau-sidebar-label";
+var footer = "panneau-sidebar-footer";
+var user = "panneau-sidebar-user";
+var userLink = "panneau-sidebar-user-link";
+var avatar = "panneau-sidebar-avatar";
+var userText = "panneau-sidebar-user-text";
+var userName = "panneau-sidebar-user-name";
+var userEmail = "panneau-sidebar-user-email";
+var collapsed = "panneau-sidebar-collapsed";
+var Sidebar_module_default = {
+	sidebar,
+	top,
+	brand,
+	logo,
+	toggle,
+	goTo,
+	goToSearch,
+	goToLabel,
+	goToKey,
+	goToIcon,
+	nav,
+	section,
+	sectionLabel,
+	list,
+	separator,
+	link,
+	linkIcon,
+	label,
+	footer,
+	user,
+	userLink,
+	avatar,
+	userText,
+	userName,
+	userEmail,
+	collapsed
+};
+//#endregion
+export { avatar, brand, collapsed, Sidebar_module_default as default, footer, goTo, goToIcon, goToKey, goToLabel, goToSearch, label, link, linkIcon, list, logo, nav, section, sectionLabel, separator, sidebar, toggle, top, user, userEmail, userLink, userName, userText };
+
+//# sourceMappingURL=Sidebar.module.js.map