@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/layouts/minimal-workspace-layout/rail-logo.js

@@ -0,0 +1,90 @@
+import { cn } from "../../utils/cn.js";
+import Tooltip from "../../components/tooltip/tooltip.js";
+import { Button } from "../../components/button/button.js";
+import { useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import { linkLogo, renderLogoForState } from "../shared/sidebar-logo.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+//#region src/layouts/minimal-workspace-layout/rail-logo.tsx
+/** Every motion in the layout runs on the same clock. */
+var DURATION = "var(--espd-minimal-workspace-layout-duration,450ms)";
+/**
+* Keeps any logo inside its box: images and SVGs scale down to the box's height
+* and width instead of overflowing it.
+*/
+var fitLogo = "flex h-full w-full min-w-0 items-center overflow-hidden *:flex *:h-full *:max-w-full *:min-w-0 *:items-center [&_img]:max-h-full [&_img]:max-w-full [&_img]:object-contain [&_svg]:max-h-full [&_svg]:max-w-full";
+var toggleButton = "size-8 shrink-0 text-[color:var(--espd-minimal-workspace-layout-sidebar-foreground,var(--color-foreground))] [&_svg]:transition-transform [&_svg]:duration-[var(--espd-duration-fast,150ms)] motion-reduce:[&_svg]:transition-none";
+/**
+* The logo box at the top of the sidebar.
+*
+* Collapsed: the minimal logo, swapped on hover (or keyboard focus) for an
+* expand button in the same spot. Expanded: the full logo, left-aligned and
+* clipped to the box, with a collapse button on the right. Both logos stay
+* mounted and crossfade, so the swap never reflows the box.
+*/
+function RailLogo({ indexPath, linkComponent, sidebarId, expandable, expandLabel, collapseLabel, showCollapse = true, ...sources }) {
+	const { state, isMobile, setOpen } = useSidebar();
+	const collapsed = state === "collapsed" && !isMobile;
+	const minimal = linkLogo(renderLogoForState({
+		...sources,
+		collapsed: true
+	}), indexPath, linkComponent);
+	const full = linkLogo(renderLogoForState({
+		...sources,
+		collapsed: false
+	}), indexPath, linkComponent);
+	const layer = (node, visible, className) => /* @__PURE__ */ jsx("div", {
+		className: cn("absolute inset-0 flex items-center py-2 transition-[opacity,scale,visibility] ease-[var(--espd-minimal-workspace-layout-ease,cubic-bezier(0.4,0,0.2,1))] motion-reduce:transition-none", visible ? "opacity-100 scale-100" : "invisible opacity-0 scale-95", className),
+		style: { transitionDuration: DURATION },
+		children: /* @__PURE__ */ jsx("div", {
+			className: fitLogo,
+			children: node
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "minimal-workspace-layout-logo",
+		"data-state": collapsed ? "collapsed" : "expanded",
+		className: "group/logo relative flex h-full w-full min-w-0 items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative h-full min-w-0 flex-1",
+				children: [layer(minimal, collapsed, cn("justify-center [&>div]:justify-center [&>div>*]:w-full [&>div>*]:justify-center", expandable && "group-hover/logo:opacity-0 group-hover/logo:scale-90 group-has-[button:focus-visible]/logo:opacity-0")), layer(full, !collapsed, "justify-start")]
+			}),
+			expandable && collapsed && /* @__PURE__ */ jsx(Tooltip, {
+				content: expandLabel,
+				side: "right",
+				sideOffset: 8,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon",
+					hideRingOnHover: true,
+					"aria-label": expandLabel,
+					"aria-expanded": false,
+					"aria-controls": sidebarId,
+					onClick: () => setOpen(true),
+					className: cn(toggleButton, "absolute top-1/2 left-1/2 -translate-1/2 opacity-0 scale-90 transition-[opacity,scale] duration-[var(--espd-duration-fast,150ms)]", "group-hover/logo:opacity-100 group-hover/logo:scale-100 focus-visible:opacity-100 focus-visible:scale-100", "hover:[&_svg]:translate-x-0.5"),
+					children: /* @__PURE__ */ jsx(PanelLeftOpen, {})
+				})
+			}),
+			expandable && showCollapse && !collapsed && !isMobile && /* @__PURE__ */ jsx(Tooltip, {
+				content: collapseLabel,
+				side: "right",
+				sideOffset: 8,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon",
+					hideRingOnHover: true,
+					"aria-label": collapseLabel,
+					"aria-expanded": true,
+					"aria-controls": sidebarId,
+					onClick: () => setOpen(false),
+					className: cn(toggleButton, "animate-[espd-fade-in_var(--espd-duration-normal,200ms)_ease-out_both] motion-reduce:animate-none", "hover:[&_svg]:-translate-x-0.5"),
+					style: { animationDelay: `calc(${DURATION} / 2)` },
+					children: /* @__PURE__ */ jsx(PanelLeftClose, {})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { DURATION, RailLogo };

package/dist/layouts/minimal-workspace-layout/sidebar-trigger.js

@@ -0,0 +1,42 @@
+import { cn } from "../../utils/cn.js";
+import Tooltip from "../../components/tooltip/tooltip.js";
+import { Button } from "../../components/button/button.js";
+import { useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import { useMinimalWorkspaceLayout } from "./minimal-workspace-layout-context.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+//#region src/layouts/minimal-workspace-layout/sidebar-trigger.tsx
+/**
+* A button that opens the sidebar inline and closes it again: the app's own
+* handle on a `hideWhenCollapsed` sidebar, usually placed in `topRightContent`
+* (it also expands and collapses the icon rail). Must render inside
+* `MinimalWorkspaceLayout`. Renders nothing when the sidebar is not
+* `expandable`, and on mobile, where the top bar has its own menu button.
+*/
+function MinimalWorkspaceSidebarTrigger({ className, ...props }) {
+	const { isMobile, setOpen } = useSidebar();
+	const { sidebarId, pinned, expandable, showLabel, hideLabel, registerTrigger } = useMinimalWorkspaceLayout();
+	useEffect(() => registerTrigger(), [registerTrigger]);
+	if (!expandable || isMobile) return null;
+	const label = pinned ? hideLabel : showLabel;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		side: "bottom",
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			hideRingOnHover: true,
+			"data-sidebar": "trigger",
+			"aria-label": label,
+			"aria-expanded": pinned,
+			"aria-controls": sidebarId,
+			className: cn("size-9 shrink-0", className),
+			onClick: () => setOpen(!pinned),
+			...props,
+			children: pinned ? /* @__PURE__ */ jsx(PanelLeftClose, {}) : /* @__PURE__ */ jsx(PanelLeftOpen, {})
+		})
+	});
+}
+//#endregion
+export { MinimalWorkspaceSidebarTrigger };

package/dist/layouts/shared/account-menu-props.js

@@ -0,0 +1,21 @@
+//#region src/layouts/shared/account-menu-props.ts
+/** Maps a layout's account-related props onto `AccountMenu`'s. */
+function accountMenuProps({ headerConfig, accountMenuItems, ...rest }) {
+	return {
+		userName: headerConfig?.userName,
+		userEmail: headerConfig?.userEmail,
+		userProfilePictureUrl: headerConfig?.userProfilePictureUrl,
+		avatarColor: headerConfig?.avatarColor,
+		avatarBadgeColor: headerConfig?.avatarBadgeColor,
+		onLogoutClick: rest.onLogoutClick,
+		onProfileCardClick: rest.onProfileCardClick,
+		onColorThemeChange: rest.onColorThemeChange,
+		colorTheme: rest.colorTheme,
+		onLanguageChange: rest.onLanguageChange,
+		languages: rest.languages,
+		currentLanguage: rest.currentLanguage,
+		additionalItems: accountMenuItems
+	};
+}
+//#endregion
+export { accountMenuProps };

package/dist/layouts/shared/footer-branding.js

@@ -0,0 +1,34 @@
+import { useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import AppLogo from "../../common/app-logo/app-logo.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/shared/footer-branding.tsx
+function EspressifFooterBranding({ darkMode }) {
+	const { state } = useSidebar();
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://www.espressif.com/",
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "no-underline flex justify-center w-full opacity-25 transition-opacity duration-500 ease-in-out hover:opacity-100",
+		"aria-label": "Espressif",
+		children: /* @__PURE__ */ jsx(AppLogo, {
+			width: 120,
+			darkMode,
+			minimal: state === "collapsed"
+		})
+	});
+}
+/**
+* Footer branding precedence:
+*   1. Explicit `footerBranding` prop (ReactNode | false) wins.
+*   2. Otherwise, show the Espressif default only when an internal `appName`
+*      is set AND `hideCompanyBranding` is not true.
+*   3. Otherwise, nothing.
+*/
+function resolveFooterBranding({ footerBranding, appName, hideCompanyBranding, darkMode }) {
+	if (footerBranding === false) return null;
+	if (footerBranding !== void 0) return footerBranding;
+	if (appName && hideCompanyBranding !== true) return /* @__PURE__ */ jsx(EspressifFooterBranding, { darkMode });
+	return null;
+}
+//#endregion
+export { EspressifFooterBranding, resolveFooterBranding };

package/dist/layouts/shared/sidebar-logo.js

@@ -0,0 +1,59 @@
+import { useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import AppLogo from "../../common/app-logo/app-logo.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/shared/sidebar-logo.tsx
+/**
+* The sidebar logo for one state. Precedence: the `logo*` node for that state,
+* then `logoAssets`, then the `appName` preset; `null` when none is given.
+*/
+function renderLogoForState({ logo, logoCollapsed, logoAssets, appName, darkMode, collapsed }) {
+	const nodeOverride = collapsed ? logoCollapsed ?? logo : logo;
+	if (nodeOverride !== void 0) return nodeOverride;
+	if (logoAssets) return /* @__PURE__ */ jsx(AppLogo, {
+		logo: logoAssets,
+		darkMode,
+		minimal: collapsed
+	});
+	if (appName) return /* @__PURE__ */ jsx(AppLogo, {
+		name: appName,
+		darkMode,
+		minimal: collapsed
+	});
+	return null;
+}
+/** Wraps a logo in the app's link to `indexPath` when both are given. */
+function linkLogo(node, indexPath, LinkComponent) {
+	if (node === null || node === void 0) return null;
+	if (indexPath && LinkComponent) return /* @__PURE__ */ jsx(LinkComponent, {
+		to: indexPath,
+		className: "no-underline",
+		children: node
+	});
+	return node;
+}
+function SidebarLogo({ indexPath, linkComponent, ...sources }) {
+	const { state, isMobile } = useSidebar();
+	return linkLogo(renderLogoForState({
+		...sources,
+		collapsed: state === "collapsed" && !isMobile
+	}), indexPath, linkComponent);
+}
+/**
+* Mobile top-bar logo: `logoMobile`, else a 24px minimal `AppLogo` from
+* `logoAssets` or the `appName` preset, linked to `indexPath`.
+*/
+function mobileLogo({ logoMobile, logoAssets, appName, darkMode, indexPath, linkComponent }) {
+	return linkLogo(logoMobile ?? (logoAssets ? /* @__PURE__ */ jsx(AppLogo, {
+		logo: logoAssets,
+		darkMode,
+		minimal: true,
+		width: 24
+	}) : appName ? /* @__PURE__ */ jsx(AppLogo, {
+		name: appName,
+		darkMode,
+		minimal: true,
+		width: 24
+	}) : null), indexPath, linkComponent);
+}
+//#endregion
+export { SidebarLogo, linkLogo, mobileLogo, renderLogoForState };

package/dist/layouts/workspace-layout/account-menu/account-menu.js

@@ -5,14 +5,15 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Check, Globe, LogOut, Palette } from "lucide-react";
 //#region src/layouts/workspace-layout/account-menu/account-menu.tsx
-function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarBadgeColor, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, additionalItems }) {
+function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarColor, avatarBadgeColor, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, additionalItems, triggerVariant, side, align }) {
 	const menuItems = useMemo(() => {
 		const groups = [];
 		if (userName || userEmail) {
 			const profileCard = /* @__PURE__ */ jsx(ProfileCard, {
 				name: userName,
 				email: userEmail,
-				imageUrl: userProfilePictureUrl
+				imageUrl: userProfilePictureUrl,
+				avatarColor
 			}, "profile");
 			groups.push({
 				id: "profile",
@@ -85,6 +86,7 @@ function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarBadgeCo
 		userName,
 		userEmail,
 		userProfilePictureUrl,
+		avatarColor,
 		onProfileCardClick,
 		onColorThemeChange,
 		colorTheme,
@@ -99,9 +101,13 @@ function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarBadgeCo
 		name: userName,
 		email: userEmail,
 		imageUrl: userProfilePictureUrl,
+		avatarColor,
 		badgeColor: avatarBadgeColor,
 		menuItems,
-		minWidth: "220px"
+		minWidth: "220px",
+		triggerVariant,
+		side,
+		align
 	});
 }
 //#endregion

package/dist/layouts/workspace-layout/footer/footer.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/layouts/workspace-layout/footer/footer.tsx
 function Footer({ hidden = false }) {
 	return /* @__PURE__ */ jsx("footer", {
-		className: cn("bg-sidebar", hidden ? "h-[var(--espd-hidden-footer-height)]" : "h-[var(--espd-footer-height)]"),
+		className: cn("bg-sidebar", hidden ? "h-[var(--espd-workspace-layout-hidden-footer-height,var(--espd-hidden-footer-height))]" : "h-[var(--espd-workspace-layout-footer-height,var(--espd-footer-height))]"),
 		children: !hidden && /* @__PURE__ */ jsx("div", {
 			className: "text-[10px] text-muted-foreground h-full flex items-center justify-center tracking-normal",
 			children: /* @__PURE__ */ jsx(FooterCard, {})

package/dist/layouts/workspace-layout/header/header.js

@@ -12,7 +12,7 @@ function Header({ leftContent, rightContent, endContent, showSidebarTrigger = fa
 		style: {
 			left: isMobile ? 0 : `calc(${sidebarWidth})`,
 			width: isMobile ? "100%" : `calc(100% - ${sidebarWidth})`,
-			height: "var(--espd-header-height)"
+			height: "var(--espd-shell-header-height,var(--espd-header-height))"
 		},
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full items-center gap-3 pr-4",

package/dist/layouts/workspace-layout/workspace-layout.js

@@ -1,101 +1,49 @@
-import { SidebarInset, SidebarProvider, useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import { SidebarInset, SidebarProvider } from "../../core/animate-ui/components/radix/sidebar.js";
 import Sidebar from "../../components/sidebar/sidebar.js";
-import AppLogo from "../../common/app-logo/app-logo.js";
 import Header from "./header/header.js";
 import Footer from "./footer/footer.js";
 import AccountMenu from "./account-menu/account-menu.js";
 import WorkspaceBreadcrumbs from "./breadcrumbs/workspace-breadcrumbs.js";
 import { deriveBreadcrumbs } from "./breadcrumbs/derive-breadcrumbs.js";
+import { SidebarLogo, mobileLogo } from "../shared/sidebar-logo.js";
+import { resolveFooterBranding } from "../shared/footer-branding.js";
+import { accountMenuProps } from "../shared/account-menu-props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layouts/workspace-layout/workspace-layout.tsx
-function renderLogoForState({ logo, logoCollapsed, logoAssets, appName, darkMode, collapsed }) {
-	const nodeOverride = collapsed ? logoCollapsed ?? logo : logo;
-	if (nodeOverride !== void 0) return nodeOverride;
-	if (logoAssets) return /* @__PURE__ */ jsx(AppLogo, {
-		logo: logoAssets,
-		darkMode,
-		minimal: collapsed
-	});
-	if (appName) return /* @__PURE__ */ jsx(AppLogo, {
-		name: appName,
-		darkMode,
-		minimal: collapsed
-	});
-	return null;
-}
-function SidebarLogo({ logo, logoCollapsed, logoAssets, appName, darkMode, indexPath, linkComponent: LinkComponent }) {
-	const { state, isMobile } = useSidebar();
-	const node = renderLogoForState({
-		logo,
-		logoCollapsed,
-		logoAssets,
-		appName,
-		darkMode,
-		collapsed: state === "collapsed" && !isMobile
-	});
-	if (node === null) return null;
-	if (indexPath && LinkComponent) return /* @__PURE__ */ jsx(LinkComponent, {
-		to: indexPath,
-		className: "no-underline",
-		children: node
-	});
-	return node;
-}
-function EspressifFooterBranding({ darkMode }) {
-	const { state } = useSidebar();
-	return /* @__PURE__ */ jsx("a", {
-		href: "https://www.espressif.com/",
-		target: "_blank",
-		rel: "noopener noreferrer",
-		className: "no-underline flex justify-center w-full opacity-25 transition-opacity duration-500 ease-in-out hover:opacity-100",
-		"aria-label": "Espressif",
-		children: /* @__PURE__ */ jsx(AppLogo, {
-			width: 120,
-			darkMode,
-			minimal: state === "collapsed"
-		})
-	});
-}
+var HEADER_HEIGHT = "var(--espd-shell-header-height, var(--espd-header-height))";
+var FOOTER_HEIGHT = "var(--espd-workspace-layout-footer-height, var(--espd-footer-height))";
+var HIDDEN_FOOTER_HEIGHT = "var(--espd-workspace-layout-hidden-footer-height, var(--espd-hidden-footer-height))";
 function WorkspaceLayout({ appName, logo, logoCollapsed, logoMobile, logoAssets, footerBranding, children, sidebarConfig, headerConfig, footerConfig, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, accountMenuItems, hideBreadcrumbs }) {
 	const SidebarLinkComp = sidebarConfig.linkComponent;
 	const hideFooter = footerConfig?.hidden ?? false;
 	const darkMode = colorTheme === "dark";
-	const contentHeight = hideFooter ? "calc(100vh - var(--espd-header-height) - var(--espd-hidden-footer-height))" : "calc(100vh - var(--espd-header-height) - var(--espd-footer-height))";
+	const contentHeight = hideFooter ? `calc(100vh - ${HEADER_HEIGHT} - ${HIDDEN_FOOTER_HEIGHT})` : `calc(100vh - ${HEADER_HEIGHT} - ${FOOTER_HEIGHT})`;
 	const breadcrumbItems = hideBreadcrumbs ? [] : headerConfig?.breadcrumbs ?? deriveBreadcrumbs(sidebarConfig.items, sidebarConfig.currentPath, sidebarConfig.indexPath);
-	const mobileLogoNode = logoMobile ?? (logoAssets ? /* @__PURE__ */ jsx(AppLogo, {
-		logo: logoAssets,
-		darkMode,
-		minimal: true,
-		width: 24
-	}) : appName ? /* @__PURE__ */ jsx(AppLogo, {
-		name: appName,
+	const mobileLogo$1 = mobileLogo({
+		logoMobile,
+		logoAssets,
+		appName,
 		darkMode,
-		minimal: true,
-		width: 24
-	}) : null);
-	const mobileLogo = mobileLogoNode && sidebarConfig.indexPath ? /* @__PURE__ */ jsx(SidebarLinkComp, {
-		to: sidebarConfig.indexPath,
-		className: "no-underline",
-		children: mobileLogoNode
-	}) : mobileLogoNode;
+		indexPath: sidebarConfig.indexPath,
+		linkComponent: SidebarLinkComp
+	});
 	const headerLeftContent = breadcrumbItems.length > 0 ? /* @__PURE__ */ jsx(WorkspaceBreadcrumbs, {
 		items: breadcrumbItems,
 		linkComponent: SidebarLinkComp,
 		collapseOnMobile: headerConfig?.collapseBreadcrumbsOnMobile ?? false
 	}) : null;
-	let footerBrandingNode = null;
-	if (footerBranding === false) footerBrandingNode = null;
-	else if (footerBranding !== void 0) footerBrandingNode = footerBranding;
-	else if (appName && sidebarConfig.hideCompanyBranding !== true) footerBrandingNode = /* @__PURE__ */ jsx(EspressifFooterBranding, { darkMode });
+	const footerBrandingNode = resolveFooterBranding({
+		footerBranding,
+		appName,
+		hideCompanyBranding: sidebarConfig.hideCompanyBranding,
+		darkMode
+	});
 	const sidebarFooter = sidebarConfig.footer != null || footerBrandingNode != null ? /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2 w-full",
 		children: [sidebarConfig.footer, footerBrandingNode]
 	}) : void 0;
-	const accountMenu = /* @__PURE__ */ jsx(AccountMenu, {
-		userName: headerConfig?.userName,
-		userEmail: headerConfig?.userEmail,
-		userProfilePictureUrl: headerConfig?.userProfilePictureUrl,
-		avatarBadgeColor: headerConfig?.avatarBadgeColor,
+	const accountMenu = /* @__PURE__ */ jsx(AccountMenu, { ...accountMenuProps({
+		headerConfig,
 		onLogoutClick,
 		onProfileCardClick,
 		onColorThemeChange,
@@ -103,8 +51,8 @@ function WorkspaceLayout({ appName, logo, logoCollapsed, logoMobile, logoAssets,
 		onLanguageChange,
 		languages,
 		currentLanguage,
-		additionalItems: accountMenuItems
-	});
+		accountMenuItems
+	}) });
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		open: sidebarOpen,
 		defaultOpen: defaultSidebarOpen,
@@ -121,7 +69,7 @@ function WorkspaceLayout({ appName, logo, logoCollapsed, logoMobile, logoAssets,
 				indexPath: sidebarConfig.indexPath,
 				linkComponent: SidebarLinkComp
 			}),
-			headerHeight: "var(--espd-header-height)",
+			headerHeight: HEADER_HEIGHT,
 			footer: sidebarFooter,
 			linkComponent: SidebarLinkComp,
 			collapsible: sidebarConfig.allowCollapsible ? "icon" : "none",
@@ -135,12 +83,12 @@ function WorkspaceLayout({ appName, logo, logoCollapsed, logoMobile, logoAssets,
 					rightContent: headerConfig?.rightContent,
 					endContent: accountMenu,
 					showSidebarTrigger: sidebarConfig.allowCollapsible,
-					mobileLogo
+					mobileLogo: mobileLogo$1
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "flex flex-1 flex-col gap-4 bg-sidebar",
 					style: {
-						paddingTop: "var(--espd-header-height)",
+						paddingTop: HEADER_HEIGHT,
 						height: contentHeight
 					},
 					children: /* @__PURE__ */ jsx("main", {

package/dist/{list.props-x1j3CbcF.d.ts → list.props-DP_xPTqU.d.ts}

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { C as Color, S as Size } from './index-BQANnKs9.js';
+import { d as DensityProps } from './style-axes-DSQ2DGc5.js';
 
 type ListItemVariant = Color;
 type ListItemSize = Size;
@@ -72,7 +73,7 @@ interface ListGroup {
     /** Extra classes for this group's label heading. */
     labelClassName?: string;
 }
-interface ListProps {
+interface ListProps extends DensityProps {
     items: ListGroup[];
     role?: ListRole;
     showSeparators?: boolean;

package/dist/markdown/index.d.ts

@@ -0,0 +1,11 @@
+export { MarkdownContent, MarkdownContentProps } from '../components/markdown-content/index.js';
+export { Code, CodeProps } from '../components/code/index.js';
+export { CodeEditor, CodeEditorProps } from '../components/code-editor/index.js';
+export { MonospaceContent, MonospaceContentProps } from '../components/monospace-content/index.js';
+import 'react';
+import '../style-axes-DSQ2DGc5.js';
+import '../alert.props-CcKo49Rb.js';
+import '../index-BQANnKs9.js';
+import '../variant-D81RhpbR.js';
+import '../icon-avatar.props-RYtw2eSW.js';
+import '../icon-text-action-card.props-B2ggncUK.js';

package/dist/markdown/index.js

@@ -0,0 +1,5 @@
+import { Code } from "../core/animate-ui/components/animate/code.js";
+import { MonospaceContent } from "../components/monospace-content/monospace-content.js";
+import { MarkdownContent } from "../components/markdown-content/markdown-content.js";
+import { CodeEditor } from "../components/code-editor/code-editor.js";
+export { Code, CodeEditor, MarkdownContent, MonospaceContent };

package/dist/my-account-menu.props-C7DK71WC.d.ts

@@ -0,0 +1,67 @@
+import { A as AppName, C as Color } from './index-BQANnKs9.js';
+import { ReactNode } from 'react';
+import { a as ListGroup } from './list.props-DP_xPTqU.js';
+
+/** A single logo image asset. */
+interface LogoAsset {
+    src: string;
+    width: number;
+    height: number;
+    /** Optional per-asset alt text; falls back to the component-level `alt` prop. */
+    alt?: string;
+}
+/** Light/dark variant pair. `dark` falls back to `light` when omitted. */
+interface LogoVariantSet {
+    light: LogoAsset;
+    dark?: LogoAsset;
+}
+/**
+ * Nested asset config for `AppLogo`. Consumers pass this to render their own
+ * images without adding a preset to the internal registry.
+ *
+ * Selection rule at render time:
+ *   `(minimal ? (config.minimal ?? config.full) : config.full).(dark ?? light)`
+ */
+interface LogoAssetConfig {
+    full: LogoVariantSet;
+    /** Icon-only variant used when the sidebar collapses or on mobile. Falls back to `full`. */
+    minimal?: LogoVariantSet;
+}
+interface AppLogoProps {
+    /** Internal preset key. Ignored when `logo` is set. */
+    name?: AppName;
+    /** Custom asset config. When set, `name` and the internal preset registry are ignored. */
+    logo?: LogoAssetConfig;
+    alt?: string;
+    darkMode?: boolean;
+    minimal?: boolean;
+    /** Override the rendered width. Height scales proportionally from the selected asset. */
+    width?: number;
+}
+
+interface MyAccountMenuProps {
+    name?: string;
+    email?: string;
+    imageUrl?: string;
+    /** Passed to `Menu` content; default `200px` */
+    minWidth?: string | number;
+    menuItems: ListGroup[];
+    /** The avatar's fill behind the initial, when there is no picture; default `primary`. */
+    avatarColor?: Color;
+    /** Status dot color; ignored when `badgeIcon` is set */
+    badgeColor?: Color;
+    /** When set, shown instead of a color dot (`badgeColor` is not applied) */
+    badgeIcon?: ReactNode;
+    /**
+     * `avatar` (default): a round avatar button. `card`: a full-width row with the
+     * avatar, name and email, for sidebars. The text clips rather than wraps, so a
+     * narrow container shows the avatar alone.
+     */
+    triggerVariant?: "avatar" | "card";
+    /** Menu placement; default `bottom`. */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Menu alignment; default `end`. */
+    align?: "start" | "center" | "end";
+}
+
+export type { AppLogoProps as A, LogoAsset as L, MyAccountMenuProps as M, LogoAssetConfig as a, LogoVariantSet as b };

package/dist/page-container.props-JutTvKFq.d.ts

@@ -0,0 +1,48 @@
+import { ComponentType, ReactNode } from 'react';
+
+type PageContainerMaxWidth = "sm" | "md" | "lg" | "xl";
+interface GoBackLinkData {
+    show?: boolean;
+    label?: string;
+    href?: string;
+    /** Applied to the wrapper around the back link when `show` is true. */
+    className?: string;
+    /** When set with a non-empty `href`, renders this component instead of the default `onBack` handler. */
+    linkComponent?: ComponentType<{
+        to: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+interface PageContainerProps {
+    maxWidth?: PageContainerMaxWidth;
+    heading?: string | ReactNode;
+    actions?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    /** When true, omits the top margin (`mt-[72px]`) reserved for a fixed workspace header. */
+    noGutters?: boolean;
+    /** When true, adds elevation shadow to the sticky header region. */
+    elevateHeading?: boolean;
+    /**
+     * When true, keeps the header region pinned below the `md` breakpoint (768px) too.
+     * By default it is pinned only from `md` up and scrolls away with the content on
+     * phones, where a pinned header would take a large share of the screen.
+     */
+    stickyHeadingOnMobile?: boolean;
+    /**
+     * Below the `md` breakpoint (768px), slides the header back in, pinned at the top,
+     * when the user scrolls up by a short distance, and slides it away again on the
+     * next scroll down. Keyboard focus moving into the header also reveals it.
+     * Ignored when {@link stickyHeadingOnMobile} is set, since the header is then
+     * always pinned. Has no effect from `md` up, where the header is always pinned.
+     * Set it to `false` to let the header scroll away for good on phones.
+     *
+     * @default true
+     */
+    revealHeadingOnScrollUp?: boolean;
+    goBackLinkData?: GoBackLinkData;
+    onBack?: () => void;
+}
+
+export type { GoBackLinkData as G, PageContainerMaxWidth as P, PageContainerProps as a };