@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/input-CYI1hhGc.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+import { S as Size } from './index-BQANnKs9.js';
+
+interface InputProps extends Omit<React.ComponentProps<"input">, "size">, Pick<StyleAxisProps, "radius" | "border"> {
+    label?: React.ReactNode;
+    required?: boolean;
+    size?: Size;
+    /** Fully rounded. Same as `radius="full"`; `radius` wins when both are set. */
+    rounded?: boolean;
+    startHelperContent?: React.ReactNode;
+    endHelperContent?: React.ReactNode;
+    hintContent?: React.ReactNode;
+    error?: boolean;
+    errorContent?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    /** Leading add-on box. Takes precedence over `startAddOn` when both are set. */
+    startAddOnContent?: React.ReactNode;
+    /** Trailing add-on box. Takes precedence over `endAddOn` when both are set. */
+    endAddOnContent?: React.ReactNode;
+    startAddOn?: string;
+    endAddOn?: string;
+    /**
+     * A control that IS the leading add-on (a button): it fills the segment edge
+     * to edge, takes the field's outer corners and none where it meets the text,
+     * and its focus ring sits on the segment's edges. Takes precedence over
+     * `startAddOnContent` and `startAddOn`.
+     */
+    startAddOnAction?: React.ReactNode;
+    /** The trailing counterpart of `startAddOnAction` (a "Save" or "Use this" button). */
+    endAddOnAction?: React.ReactNode;
+    floatingLabel?: boolean;
+    charLimit?: number;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { Input as I, type InputProps as a };

package/dist/layouts/index.d.ts

@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { ReactNode, ComponentType } from 'react';
-import { d as SidebarNavEntry, c as SidebarLinkComponentProps } from '../types-DtUxK-Am.js';
-export { f as SidebarTopLevelLinkConfig, i as isSidebarGroup } from '../types-DtUxK-Am.js';
-import { a as ListGroup } from '../list.props-x1j3CbcF.js';
-import { C as Color, A as AppName } from '../index-BQANnKs9.js';
-import { a as LogoAssetConfig } from '../app-logo.props-Ct7QBdTd.js';
+import { ReactNode, ComponentType, ComponentProps } from 'react';
+import { d as SidebarNavEntry, c as SidebarLinkComponentProps } from '../types-CkXflqg7.js';
+export { f as SidebarTopLevelLinkConfig, i as isSidebarGroup } from '../types-CkXflqg7.js';
+import { a as ListGroup } from '../list.props-DP_xPTqU.js';
+import { A as AppName, C as Color } from '../index-BQANnKs9.js';
+import { a as LogoAssetConfig, M as MyAccountMenuProps } from '../my-account-menu.props-C7DK71WC.js';
+import { B as Button } from '../button-BxJ7s6sR.js';
+import '../style-axes-DSQ2DGc5.js';
+import '../button-BK-DIR_L.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
 interface WorkspaceSidebarConfig {
     /**
@@ -45,6 +50,8 @@ interface WorkspaceHeaderConfig {
     userName?: string;
     userEmail?: string;
     userProfilePictureUrl?: string;
+    /** The avatar's fill behind the initial, when there is no picture; default `primary`. */
+    avatarColor?: Color;
     /** Avatar status dot; preset tokens or CSS color string — see `resolveColor` in `@/utils/color`. */
     avatarBadgeColor?: Color;
     breadcrumbs?: BreadcrumbItemConfig[];
@@ -121,6 +128,8 @@ interface AccountMenuProps {
     userName?: string;
     userEmail?: string;
     userProfilePictureUrl?: string;
+    /** The avatar's fill behind the initial (the trigger's and the profile card's); default `primary`. */
+    avatarColor?: Color;
     avatarBadgeColor?: Color;
     onLogoutClick?: () => void;
     onProfileCardClick?: () => void;
@@ -133,9 +142,15 @@ interface AccountMenuProps {
     }[];
     currentLanguage?: string;
     additionalItems?: ListGroup[];
+    /** See `MyAccountMenuProps.triggerVariant`; default `avatar`. */
+    triggerVariant?: MyAccountMenuProps["triggerVariant"];
+    /** Menu placement; default `bottom`. */
+    side?: MyAccountMenuProps["side"];
+    /** Menu alignment; default `end`. */
+    align?: MyAccountMenuProps["align"];
 }
 
-declare function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarBadgeColor, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, additionalItems, }: AccountMenuProps): React.JSX.Element | null;
+declare function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarColor, avatarBadgeColor, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, additionalItems, triggerVariant, side, align, }: AccountMenuProps): React.JSX.Element | null;
 
 interface HeaderProps {
     leftContent?: ReactNode;
@@ -156,6 +171,115 @@ interface FooterProps {
 
 declare function Footer({ hidden }: FooterProps): React.JSX.Element;
 
+interface MinimalWorkspaceSidebarState {
+    /**
+     * True while the desktop sidebar is the icon rail (or, with
+     * `hideWhenCollapsed`, hidden). Always false in the mobile sheet.
+     */
+    collapsed: boolean;
+}
+/**
+ * {@link WorkspaceSidebarConfig} without `allowCollapsible` and `variant`: the
+ * sidebar is an icon rail that expands, or, with `hideWhenCollapsed`, hidden
+ * until it is shown.
+ */
+interface MinimalWorkspaceSidebarConfig extends Omit<WorkspaceSidebarConfig, "allowCollapsible" | "variant"> {
+    /**
+     * Region between the logo and the menu, e.g. a "New" button. A function
+     * receives the sidebar state, to render an icon-only version in the rail.
+     */
+    header?: ReactNode | ((state: MinimalWorkspaceSidebarState) => ReactNode);
+    /**
+     * When false the sidebar stays a rail: no expand / collapse buttons, no
+     * click-to-expand, and ⌘/Ctrl+B does nothing. Default true. With
+     * `hideWhenCollapsed` it stays hidden instead.
+     */
+    expandable?: boolean;
+    /**
+     * Collapsed, the sidebar is gone entirely instead of an icon rail: the
+     * content takes the full width. It comes back two ways. Hovering the left
+     * edge of the content shows a strip; resting the pointer there for a
+     * moment, or a click, slides the full sidebar in over the content (a peek),
+     * and it slides out again once the pointer leaves it. A peek is never reported through `onSidebarOpenChange`. A
+     * `MinimalWorkspaceSidebarTrigger` (put it in `topRightContent`), or
+     * ⌘/Ctrl+B, opens it inline beside the content and closes it again, which
+     * is the `sidebarOpen` state. Default false. Not meant to change at
+     * runtime.
+     */
+    hideWhenCollapsed?: boolean;
+    /**
+     * With `hideWhenCollapsed`: whether resting the pointer on the edge peeks
+     * the sidebar (default true), or only a click there does. A pointer parked
+     * at the screen edge while reading is the one gesture a hover reveal cannot
+     * tell from an intentional one; an app whose users mind can turn it off.
+     */
+    peekOnHover?: boolean;
+}
+interface MinimalWorkspaceLayoutLabels {
+    /** Expand button on the collapsed rail. Default "Expand sidebar". */
+    expandSidebar?: string;
+    /** Collapse button beside the expanded logo. Default "Collapse sidebar". */
+    collapseSidebar?: string;
+    /** Menu button in the mobile top bar. Default "Open menu". */
+    openMenu?: string;
+    /**
+     * `MinimalWorkspaceSidebarTrigger` while a `hideWhenCollapsed` sidebar is
+     * hidden. Default "Show sidebar".
+     */
+    showSidebar?: string;
+    /**
+     * `MinimalWorkspaceSidebarTrigger` and the button beside the logo while a
+     * `hideWhenCollapsed` sidebar is showing. Default "Hide sidebar".
+     */
+    hideSidebar?: string;
+}
+/**
+ * Same props as {@link WorkspaceLayoutProps}, minus the header bar and the
+ * status footer: switching is a rename of the component plus, optionally,
+ * `topRightContent`.
+ */
+interface MinimalWorkspaceLayoutProps extends Omit<WorkspaceLayoutProps, "sidebarConfig" | "headerConfig" | "footerConfig" | "hideBreadcrumbs"> {
+    sidebarConfig: MinimalWorkspaceSidebarConfig;
+    /**
+     * Account details for the menu at the bottom of the sidebar. `rightContent`
+     * is used as `topRightContent` when that is unset. `breadcrumbs` and
+     * `collapseBreadcrumbsOnMobile` are ignored: there is no header bar.
+     */
+    headerConfig?: WorkspaceHeaderConfig;
+    /**
+     * Floats over the main content at its top-right corner (desktop); sits at the
+     * end of the top bar on mobile. Any node. It catches pointer events only on
+     * itself, not on the space around it.
+     */
+    topRightContent?: ReactNode;
+    /**
+     * Whether the sidebar starts expanded when uncontrolled. **Defaults to
+     * `false`** (WorkspaceLayout's defaults to `true`).
+     */
+    defaultSidebarOpen?: boolean;
+    /** Accessible names of the layout's own buttons, for translation. */
+    labels?: MinimalWorkspaceLayoutLabels;
+}
+
+/**
+ * Header-less app shell: an icon rail that expands into a labelled sidebar
+ * (or, with `sidebarConfig.hideWhenCollapsed`, a hidden sidebar that peeks
+ * over the content from its left edge and opens inline from a trigger), and
+ * the page content on a canvas beside it. Takes WorkspaceLayout's props; see
+ * {@link MinimalWorkspaceLayoutProps} for the differences.
+ */
+declare function MinimalWorkspaceLayout(props: MinimalWorkspaceLayoutProps): React.JSX.Element;
+
+type MinimalWorkspaceSidebarTriggerProps = Omit<ComponentProps<typeof Button>, "children" | "onClick" | "aria-label" | "aria-expanded" | "aria-controls">;
+/**
+ * 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.
+ */
+declare function MinimalWorkspaceSidebarTrigger({ className, ...props }: MinimalWorkspaceSidebarTriggerProps): React.JSX.Element | null;
+
 interface EntryLayoutProps {
     /**
      * Internal preset key. When set, the left-panel logo defaults to
@@ -189,4 +313,4 @@ interface EntryLayoutProps {
 
 declare function EntryLayout({ appName, children, backgroundImageUrl, heading, darkMode, logo, logoAssets, customRightPanel, disableBackgroundImage, hideLogo, hideFooter, hideRightPanel, }: EntryLayoutProps): React.JSX.Element;
 
-export { AccountMenu, type AccountMenuProps, type BreadcrumbItemConfig, EntryLayout, type EntryLayoutProps, type LanguageOption, SidebarNavEntry, Footer as WorkspaceFooter, type WorkspaceFooterConfig, type FooterProps as WorkspaceFooterProps, Header as WorkspaceHeader, type WorkspaceHeaderConfig, type HeaderProps as WorkspaceHeaderProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceSidebarConfig };
+export { AccountMenu, type AccountMenuProps, type BreadcrumbItemConfig, EntryLayout, type EntryLayoutProps, type LanguageOption, MinimalWorkspaceLayout, type MinimalWorkspaceLayoutLabels, type MinimalWorkspaceLayoutProps, type MinimalWorkspaceSidebarConfig, type MinimalWorkspaceSidebarState, MinimalWorkspaceSidebarTrigger, type MinimalWorkspaceSidebarTriggerProps, SidebarNavEntry, Footer as WorkspaceFooter, type WorkspaceFooterConfig, type FooterProps as WorkspaceFooterProps, Header as WorkspaceHeader, type WorkspaceHeaderConfig, type HeaderProps as WorkspaceHeaderProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceSidebarConfig };

package/dist/layouts/index.js

@@ -3,5 +3,7 @@ import Header from "./workspace-layout/header/header.js";
 import Footer from "./workspace-layout/footer/footer.js";
 import AccountMenu from "./workspace-layout/account-menu/account-menu.js";
 import WorkspaceLayout from "./workspace-layout/workspace-layout.js";
+import MinimalWorkspaceLayout from "./minimal-workspace-layout/minimal-workspace-layout.js";
+import { MinimalWorkspaceSidebarTrigger } from "./minimal-workspace-layout/sidebar-trigger.js";
 import EntryLayout from "./entry-layout/entry-layout.js";
-export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout, isSidebarGroup };
+export { AccountMenu, EntryLayout, MinimalWorkspaceLayout, MinimalWorkspaceSidebarTrigger, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout, isSidebarGroup };

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

@@ -0,0 +1,5 @@
+import { getStrictContext } from "../../core/utils/get-strict-context.js";
+//#region src/layouts/minimal-workspace-layout/minimal-workspace-layout-context.ts
+var [MinimalWorkspaceLayoutContextProvider, useMinimalWorkspaceLayout] = getStrictContext("MinimalWorkspaceLayout");
+//#endregion
+export { MinimalWorkspaceLayoutContextProvider, useMinimalWorkspaceLayout };

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

@@ -0,0 +1,404 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../../components/button/button.js";
+import { SidebarInset, SidebarProvider, useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import Sidebar from "../../components/sidebar/sidebar.js";
+import AccountMenu from "../workspace-layout/account-menu/account-menu.js";
+import { mobileLogo } from "../shared/sidebar-logo.js";
+import { resolveFooterBranding } from "../shared/footer-branding.js";
+import { accountMenuProps } from "../shared/account-menu-props.js";
+import { RailLogo } from "./rail-logo.js";
+import { MinimalWorkspaceLayoutContextProvider } from "./minimal-workspace-layout-context.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "lucide-react";
+//#region src/layouts/minimal-workspace-layout/minimal-workspace-layout.tsx
+var LOGO_HEIGHT = "var(--espd-minimal-workspace-layout-logo-height,3.5rem)";
+/**
+* Clicks on these inside the collapsed rail do their own thing; a click
+* anywhere else in the rail expands it.
+*/
+var INTERACTIVE = "a, button, input, select, textarea, label, summary, [role=button], [role=link], [role=menuitem], [role=checkbox], [role=switch], [tabindex]:not([tabindex='-1']), [data-rail-ignore]";
+/**
+* The reveal that plays right after the rail expands (applied only then, see
+* `revealing`). Menu rows pop in one by one down the menu: each top-level
+* entry gets an index (`--espd-mwl-i`, 60ms apart) and each row within a menu
+* another (`--espd-mwl-j`, 30ms apart, starting one step after its group's
+* header), so a group's children cascade after it. Rows slide
+* in with a small springy overshoot and lose a slight blur; their icons pop a
+* beat later with a twist. Everything waits until the sidebar is about a third
+* open, so labels never show squeezed into the narrow rail. Indexes are capped
+* so a long menu finishes promptly. `--espd-mwl-duration` is the layout's
+* duration (set on the container).
+*/
+var revealMotion = cn("[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(2)]:[--espd-mwl-i:1]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(3)]:[--espd-mwl-i:2]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(4)]:[--espd-mwl-i:3]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(5)]:[--espd-mwl-i:4]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(6)]:[--espd-mwl-i:5]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(7)]:[--espd-mwl-i:6]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(8)]:[--espd-mwl-i:7]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(9)]:[--espd-mwl-i:8]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(10)]:[--espd-mwl-i:9]", "[&_[data-radix-scroll-area-viewport]>div>div>*:nth-child(n+11)]:[--espd-mwl-i:10]", "[&_[data-slot=sidebar-menu-item]:nth-child(1)]:[--espd-mwl-j:1]", "[&_[data-slot=sidebar-menu-item]:nth-child(2)]:[--espd-mwl-j:2]", "[&_[data-slot=sidebar-menu-item]:nth-child(3)]:[--espd-mwl-j:3]", "[&_[data-slot=sidebar-menu-item]:nth-child(4)]:[--espd-mwl-j:4]", "[&_[data-slot=sidebar-menu-item]:nth-child(5)]:[--espd-mwl-j:5]", "[&_[data-slot=sidebar-menu-item]:nth-child(6)]:[--espd-mwl-j:6]", "[&_[data-slot=sidebar-menu-item]:nth-child(7)]:[--espd-mwl-j:7]", "[&_[data-slot=sidebar-menu-item]:nth-child(8)]:[--espd-mwl-j:8]", "[&_[data-slot=sidebar-menu-item]:nth-child(n+9)]:[--espd-mwl-j:9]", "[&_:is([data-slot=sidebar-group]>button,[data-slot=sidebar-menu-item])]:animate-[espd-pop-in_420ms_cubic-bezier(0.34,1.56,0.64,1)_both]", "[&_:is([data-slot=sidebar-group]>button,[data-slot=sidebar-menu-item])]:[animation-delay:calc(var(--espd-mwl-duration)*0.3+var(--espd-mwl-i,0)*60ms+var(--espd-mwl-j,0)*30ms)]!", "[&_:is([data-slot=sidebar-group]>button>svg:first-child,[data-slot=sidebar-menu-item]_a_span>svg:first-child)]:animate-[espd-icon-pop_480ms_cubic-bezier(0.34,1.56,0.64,1)_both]", "[&_:is([data-slot=sidebar-group]>button>svg:first-child,[data-slot=sidebar-menu-item]_a_span>svg:first-child)]:[animation-delay:calc(var(--espd-mwl-duration)*0.3+var(--espd-mwl-i,0)*60ms+var(--espd-mwl-j,0)*30ms+70ms)]!", "[&_[data-slot=minimal-workspace-layout-sidebar-header]]:animate-[espd-pop-in_420ms_cubic-bezier(0.34,1.56,0.64,1)_both]", "[&_[data-slot=minimal-workspace-layout-sidebar-header]]:[animation-delay:calc(var(--espd-mwl-duration)*0.25)]!", "[&_[data-slot=sidebar-footer]]:animate-[espd-fade-in_var(--espd-duration-slow,300ms)_ease-out_both]", "[&_[data-slot=sidebar-footer]]:[animation-delay:calc(var(--espd-mwl-duration)*0.5)]!", "motion-reduce:[&_*]:animate-none!");
+/** Long enough for the last capped row (10 × 60ms + 9 × 30ms after the start delay) to land. */
+var REVEAL_MS = 1800;
+/** How long the pointer may be off a peeking sidebar before it slides out. */
+var PEEK_CLOSE_GRACE_MS = 200;
+/**
+* How long the pointer rests on the edge before the sidebar peeks on its
+* own. Long enough that a pointer passing through to the screen edge does not
+* open it, short enough to feel like a reveal rather than a wait.
+*/
+var PEEK_HOVER_MS = 300;
+/** Ends a slide-out whose `transitionend` never comes (reduced motion). */
+var CLOSE_FALLBACK_MS = 1e3;
+/** Floating content the sidebar owns: its account menu and tooltips render in portals. */
+var PORTAL = "[data-radix-popper-content-wrapper], [data-slot=tooltip-overlay]";
+/**
+* Colours that follow the surface (`--espd-mwl-surface`), shared by the desktop
+* container and the mobile sheet: text, the right border, and the selected and
+* hovered rows (the library's sidebar accent, redefined as a shade of the
+* surface: darker on a light one, lighter on a dark one).
+*/
+var surfaceColours = cn("bg-[var(--espd-mwl-surface)]", "text-[color:var(--espd-minimal-workspace-layout-sidebar-foreground,var(--color-foreground))]", "border-[color:var(--espd-minimal-workspace-layout-sidebar-border-color,color-mix(in_oklab,var(--espd-mwl-surface)_95%,var(--color-foreground)))]", "[--color-sidebar-accent:var(--espd-minimal-workspace-layout-sidebar-accent,color-mix(in_oklab,var(--espd-mwl-surface)_93%,var(--color-foreground)))]", "[--color-sidebar-accent-foreground:var(--espd-minimal-workspace-layout-sidebar-accent-foreground,var(--color-foreground))]", "[&_[data-slot=account-menu-card]:is(:hover,[data-state=open])]:bg-sidebar-accent");
+/**
+* Mobile sheet (rendered in a portal, outside the layout's tree): always the
+* full sidebar, so it takes the expanded surface.
+*/
+var mobileSheetClass = cn("[--espd-mwl-surface:var(--espd-minimal-workspace-layout-sidebar-background-expanded,var(--espd-minimal-workspace-layout-sidebar-background,var(--color-background)))]", surfaceColours);
+/**
+* Desktop sidebar container.
+*
+* Its surface is the page background, so the rail reads as part of the canvas;
+* `--espd-mwl-surface` (private, set here) holds the surface for the current
+* state, and the border and the expanded shadow are mixed from it, so they
+* follow any surface an app sets, light or dark. Also: the layout's own timing
+* for the width and shadow, the double-arrow cursor on the empty parts of the
+* collapsed rail, and rail icons and avatar centred.
+*/
+var sidebarClass = cn("[--espd-mwl-duration:var(--espd-minimal-workspace-layout-duration,450ms)]", "[--espd-mwl-surface:var(--espd-minimal-workspace-layout-sidebar-background,var(--color-background))]", "group-data-[state=expanded]:[--espd-mwl-surface:var(--espd-minimal-workspace-layout-sidebar-background-expanded,var(--espd-minimal-workspace-layout-sidebar-background,var(--color-background)))]", surfaceColours, "[&_[data-slot=sidebar-inner]]:bg-[var(--espd-mwl-surface)] [&_[data-slot=sidebar-inner]]:transition-colors [&_[data-slot=sidebar-inner]]:duration-[inherit]", "group-data-[state=expanded]:shadow-[shadow:var(--espd-minimal-workspace-layout-sidebar-elevation,12px_0_48px_-16px_color-mix(in_oklab,color-mix(in_oklab,var(--espd-mwl-surface)_85%,black)_45%,transparent))]", "transition-[left,right,width,box-shadow] duration-[var(--espd-mwl-duration)] ease-[var(--espd-minimal-workspace-layout-ease,cubic-bezier(0.4,0,0.2,1))] motion-reduce:transition-none", "top-auto h-[var(--espd-minimal-workspace-layout-height,100dvh)]", "group-data-[state=collapsed]:cursor-ew-resize", "group-data-[state=collapsed]:[&_:is(a,button,[role=button],[role=menuitem])]:cursor-pointer", "group-data-[state=collapsed]:[&_[data-slot=sidebar-group]]:items-center", "group-data-[state=collapsed]:[&_[data-slot=sidebar-footer]]:px-1", "group-data-[state=collapsed]:[&_[data-slot=account-menu-card]]:justify-center group-data-[state=collapsed]:[&_[data-slot=account-menu-card]]:p-0.5", "group-data-[state=collapsed]:[&_[data-slot=account-menu-card]>:not(:first-child,.sr-only)]:hidden");
+/**
+* Added to the desktop container with `hideWhenCollapsed`. The sidebar is
+* `collapsible="offcanvas"`, so hidden it already sits off screen with no gap
+* beside it; these cover the states the primitive has no word for. Peeking it
+* is expanded over the content: above the top-right slot (z-20), with the
+* wider shadow, read through the expanded-shadow rule's token. Closing it is
+* still expanded (labels intact) while it slides off screen. Hidden it leaves
+* the tab order; the mode flips to hidden once the slide-out has ended, so
+* that needs no transition.
+*/
+var hiddenSidebarClass = cn("group-data-[sidebar-mode=hidden]/sidebar-wrapper:invisible", "group-data-[sidebar-mode=closing]/sidebar-wrapper:left-[calc(var(--sidebar-width)*-1)]", "group-data-[sidebar-mode=peek]/sidebar-wrapper:z-30 group-data-[sidebar-mode=closing]/sidebar-wrapper:z-30", "group-data-[sidebar-mode=peek]/sidebar-wrapper:[--espd-minimal-workspace-layout-sidebar-elevation:var(--espd-minimal-workspace-layout-sidebar-overlay-elevation,24px_0_96px_-8px_color-mix(in_oklab,color-mix(in_oklab,var(--espd-mwl-surface)_80%,black)_55%,transparent))]");
+/** On the layout: the gap beside the sidebar stays closed while it peeks or slides out. */
+var hiddenGapClass = "data-[sidebar-mode=peek]:[&_[data-slot=sidebar-gap]]:w-0 data-[sidebar-mode=closing]:[&_[data-slot=sidebar-gap]]:w-0";
+/**
+* The hot zone along the content's left edge while the sidebar is hidden: a
+* thin strip in the edge colour appears on hover, and the sidebar peeks once
+* the pointer has rested there for a moment, or at once on a click. The zone
+* is wider than the strip (a token), because the first pixels of a window
+* often belong to the OS: a maximised window pins the cursor on its edge,
+* inside the window manager's resize grip, where the page sees nothing.
+* Mouse-only by design (the trigger and ⌘/Ctrl+B serve the keyboard).
+*/
+var edgeClass = cn("absolute inset-y-0 left-0 z-10 w-[var(--espd-minimal-workspace-layout-edge-hit-width,12px)] cursor-e-resize select-none", "before:absolute before:inset-y-0 before:left-0 before:w-[var(--espd-minimal-workspace-layout-edge-width,3px)] before:bg-[var(--espd-minimal-workspace-layout-edge-color,var(--color-primary))]", "before:opacity-0 before:transition-opacity before:duration-[var(--espd-duration-fast,150ms)] motion-reduce:before:transition-none hover:before:opacity-100");
+function MinimalWorkspaceShell({ appName, logo, logoCollapsed, logoMobile, logoAssets, footerBranding, children, sidebarConfig, headerConfig, topRightContent, labels, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, accountMenuItems, hiddenSidebar }) {
+	const { state, isMobile, setOpen } = useSidebar();
+	const sidebarId = useId();
+	const expandable = sidebarConfig.expandable ?? true;
+	const hide = sidebarConfig.hideWhenCollapsed ?? false;
+	const collapsed = state === "collapsed" && !isMobile;
+	const darkMode = colorTheme === "dark";
+	const LinkComponent = sidebarConfig.linkComponent;
+	const topRight = topRightContent ?? headerConfig?.rightContent;
+	const showLabel = hide ? labels?.showSidebar ?? "Show sidebar" : labels?.expandSidebar ?? "Expand sidebar";
+	const hideLabel = hide ? labels?.hideSidebar ?? "Hide sidebar" : labels?.collapseSidebar ?? "Collapse sidebar";
+	const [triggers, setTriggers] = useState(0);
+	const registerTrigger = useCallback(() => {
+		setTriggers((count) => count + 1);
+		return () => setTriggers((count) => count - 1);
+	}, []);
+	const peekOnHover = sidebarConfig.peekOnHover ?? true;
+	const hoverTimer = useRef(void 0);
+	const cancelHoverPeek = useCallback(() => {
+		if (hoverTimer.current === void 0) return;
+		clearTimeout(hoverTimer.current);
+		hoverTimer.current = void 0;
+	}, []);
+	const { startPeek } = hiddenSidebar;
+	const onEdgePointerEnter = (event) => {
+		if (!peekOnHover || event.pointerType === "touch" || event.pointerType === "pen") return;
+		if (event.buttons !== 0) return;
+		cancelHoverPeek();
+		hoverTimer.current = setTimeout(() => {
+			hoverTimer.current = void 0;
+			startPeek();
+		}, PEEK_HOVER_MS);
+	};
+	useEffect(() => cancelHoverPeek, [cancelHoverPeek]);
+	const { mode, closePeek } = hiddenSidebar;
+	useEffect(() => {
+		if (mode !== "peek" || isMobile) return;
+		const container = document.getElementById(sidebarId);
+		if (!container) return;
+		let entered = false;
+		let timer;
+		const inside = (node) => node instanceof Element && (container.contains(node) || node.closest(PORTAL) !== null);
+		const ownsOpenPopup = () => container.querySelector("[aria-haspopup][aria-expanded=\"true\"]") !== null;
+		const cancel = () => {
+			if (timer === void 0) return;
+			clearTimeout(timer);
+			timer = void 0;
+		};
+		const schedule = () => {
+			timer ?? (timer = setTimeout(closePeek, PEEK_CLOSE_GRACE_MS));
+		};
+		const onPointerOver = (event) => {
+			if (inside(event.target)) {
+				entered = true;
+				cancel();
+			} else if (ownsOpenPopup()) cancel();
+			else if (entered) schedule();
+		};
+		const onPointerLeave = (event) => {
+			if (entered && !inside(event.relatedTarget) && !ownsOpenPopup()) schedule();
+		};
+		const onFocusOut = (event) => {
+			if (event.relatedTarget && !inside(event.relatedTarget) && !ownsOpenPopup()) closePeek();
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "Escape" && !ownsOpenPopup() && !document.querySelector("[data-radix-popper-content-wrapper]")) closePeek();
+		};
+		document.addEventListener("pointerover", onPointerOver);
+		container.addEventListener("pointerleave", onPointerLeave);
+		container.addEventListener("focusout", onFocusOut);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			cancel();
+			document.removeEventListener("pointerover", onPointerOver);
+			container.removeEventListener("pointerleave", onPointerLeave);
+			container.removeEventListener("focusout", onFocusOut);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		mode,
+		isMobile,
+		sidebarId,
+		closePeek
+	]);
+	useEffect(() => {
+		if (mode !== "hidden") return;
+		const active = document.activeElement;
+		if (active instanceof HTMLElement && document.getElementById(sidebarId)?.contains(active)) active.blur();
+	}, [mode, sidebarId]);
+	const [revealing, setRevealing] = useState(false);
+	const wasCollapsed = useRef(collapsed);
+	useLayoutEffect(() => {
+		const expanded = wasCollapsed.current && !collapsed;
+		wasCollapsed.current = collapsed;
+		if (!expanded) {
+			if (collapsed) setRevealing(false);
+			return;
+		}
+		setRevealing(true);
+		const timer = setTimeout(() => setRevealing(false), REVEAL_MS);
+		return () => clearTimeout(timer);
+	}, [collapsed]);
+	const expandFromRail = (event) => {
+		if (!expandable || !collapsed) return;
+		const target = event.target;
+		if (!event.currentTarget.contains(target)) return;
+		if (target.closest(INTERACTIVE)) return;
+		setOpen(true);
+	};
+	const header = typeof sidebarConfig.header === "function" ? sidebarConfig.header({ collapsed }) : sidebarConfig.header;
+	const footerBrandingNode = resolveFooterBranding({
+		footerBranding,
+		appName,
+		hideCompanyBranding: sidebarConfig.hideCompanyBranding,
+		darkMode
+	});
+	const accountMenu = /* @__PURE__ */ jsx(AccountMenu, {
+		...accountMenuProps({
+			headerConfig,
+			onLogoutClick,
+			onProfileCardClick,
+			onColorThemeChange,
+			colorTheme,
+			onLanguageChange,
+			languages,
+			currentLanguage,
+			accountMenuItems
+		}),
+		triggerVariant: "card",
+		side: collapsed ? "right" : "top",
+		align: collapsed ? "end" : "start"
+	});
+	const footer = /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full min-w-0 flex-col gap-2",
+		children: [
+			sidebarConfig.footer,
+			footerBrandingNode,
+			accountMenu
+		]
+	});
+	return /* @__PURE__ */ jsxs(MinimalWorkspaceLayoutContextProvider, {
+		value: {
+			sidebarId,
+			pinned: hiddenSidebar.pinned,
+			expandable,
+			hidden: hide,
+			showLabel,
+			hideLabel,
+			registerTrigger
+		},
+		children: [/* @__PURE__ */ jsx(Sidebar, {
+			id: sidebarId,
+			items: sidebarConfig.items,
+			currentPath: sidebarConfig.currentPath,
+			linkComponent: LinkComponent,
+			focusActiveGroup: sidebarConfig.focusActiveGroup,
+			collapsible: hide ? "offcanvas" : "icon",
+			header: /* @__PURE__ */ jsx(RailLogo, {
+				logo,
+				logoCollapsed,
+				logoAssets,
+				appName,
+				darkMode,
+				indexPath: sidebarConfig.indexPath,
+				linkComponent: LinkComponent,
+				sidebarId,
+				expandable,
+				expandLabel: showLabel,
+				collapseLabel: hideLabel,
+				showCollapse: triggers === 0
+			}),
+			headerHeight: LOGO_HEIGHT,
+			headerClassName: "px-[var(--espd-minimal-workspace-layout-logo-padding,0.75rem)]",
+			beforeContent: header != null ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "minimal-workspace-layout-sidebar-header",
+				className: cn("flex shrink-0 flex-col gap-1 px-2 pb-2", collapsed && "items-center"),
+				children: header
+			}) : void 0,
+			footer,
+			className: cn(sidebarClass, hide && hiddenSidebarClass, revealing && revealMotion),
+			mobileClassName: mobileSheetClass,
+			onClick: hide ? void 0 : expandFromRail
+		}), /* @__PURE__ */ jsxs(SidebarInset, {
+			"data-slot": "minimal-workspace-layout-main",
+			className: "h-[var(--espd-minimal-workspace-layout-height,100dvh)] max-h-[var(--espd-minimal-workspace-layout-height,100dvh)] overflow-hidden bg-[var(--espd-minimal-workspace-layout-content-background,var(--color-background))]",
+			children: [isMobile && /* @__PURE__ */ jsxs("div", {
+				className: "flex h-12 shrink-0 items-center gap-2 border-b border-[color:color-mix(in_oklab,var(--espd-minimal-workspace-layout-content-background,var(--color-background))_90%,var(--color-foreground))] px-2",
+				children: [
+					/* @__PURE__ */ jsx(MobileMenuButton, { label: labels?.openMenu ?? "Open menu" }),
+					mobileLogo({
+						logoMobile,
+						logoAssets,
+						appName,
+						darkMode,
+						indexPath: sidebarConfig.indexPath,
+						linkComponent: LinkComponent
+					}),
+					topRight != null && /* @__PURE__ */ jsx("div", {
+						className: "ml-auto flex items-center gap-2",
+						children: topRight
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "relative min-h-0 flex-1 overflow-hidden",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "minimal-workspace-layout-content",
+						className: "h-full overflow-y-auto",
+						children
+					}),
+					hiddenSidebar.enabled && !isMobile && (mode === "hidden" || mode === "closing") && /* @__PURE__ */ jsx("div", {
+						"data-slot": "minimal-workspace-layout-edge",
+						"aria-hidden": "true",
+						className: edgeClass,
+						onClick: startPeek,
+						onPointerEnter: onEdgePointerEnter,
+						onPointerLeave: cancelHoverPeek
+					}),
+					!isMobile && topRight != null && /* @__PURE__ */ jsx("div", {
+						"data-slot": "minimal-workspace-layout-top-right",
+						className: "pointer-events-none absolute top-[var(--espd-minimal-workspace-layout-top-right-offset-y,0.75rem)] right-[var(--espd-minimal-workspace-layout-top-right-offset-x,1rem)] z-20 flex",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "pointer-events-auto flex items-center gap-2 animate-[espd-fade-in_var(--espd-duration-slow,300ms)_ease-out_both] motion-reduce:animate-none",
+							children: topRight
+						})
+					})
+				]
+			})]
+		})]
+	});
+}
+function MobileMenuButton({ label }) {
+	const { setOpenMobile } = useSidebar();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		hideRingOnHover: true,
+		"aria-label": label,
+		className: "size-9 shrink-0",
+		onClick: () => setOpenMobile(true),
+		children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+	});
+}
+/**
+* Header-less app shell: an icon rail that expands into a labelled sidebar
+* (or, with `sidebarConfig.hideWhenCollapsed`, a hidden sidebar that peeks
+* over the content from its left edge and opens inline from a trigger), and
+* the page content on a canvas beside it. Takes WorkspaceLayout's props; see
+* {@link MinimalWorkspaceLayoutProps} for the differences.
+*/
+function MinimalWorkspaceLayout(props) {
+	const { sidebarConfig, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange } = props;
+	const expandable = sidebarConfig.expandable ?? true;
+	const hide = sidebarConfig.hideWhenCollapsed ?? false;
+	const [internalOpen, setInternalOpen] = useState(defaultSidebarOpen ?? false);
+	const open = sidebarOpen ?? internalOpen;
+	const setOpen = (next) => {
+		if (onSidebarOpenChange) onSidebarOpenChange(next);
+		else setInternalOpen(next);
+	};
+	const [overlay, setOverlay] = useState("none");
+	const [prevOpen, setPrevOpen] = useState(open);
+	if (open !== prevOpen) {
+		setPrevOpen(open);
+		setOverlay(!open && hide && expandable ? "closing" : "none");
+	}
+	const startPeek = useCallback(() => setOverlay("peek"), []);
+	const closePeek = useCallback(() => setOverlay((current) => current === "peek" ? "closing" : current), []);
+	const finishClosing = useCallback(() => setOverlay((current) => current === "closing" ? "none" : current), []);
+	useEffect(() => {
+		if (overlay !== "closing") return;
+		const timer = setTimeout(finishClosing, CLOSE_FALLBACK_MS);
+		return () => clearTimeout(timer);
+	}, [overlay, finishClosing]);
+	const onTransitionEnd = (event) => {
+		if (overlay !== "closing") return;
+		if (event.target.dataset?.slot === "sidebar-container") finishClosing();
+	};
+	const providerOpen = expandable && (open || overlay !== "none");
+	const mode = !hide ? void 0 : !expandable ? "hidden" : open ? "pinned" : overlay === "none" ? "hidden" : overlay;
+	const handleOpenChange = (next) => {
+		if (!expandable) return;
+		if (!hide || overlay === "none") setOpen(next);
+		else if (next) setOpen(true);
+		else if (overlay === "peek") setOverlay("closing");
+	};
+	return /* @__PURE__ */ jsx(SidebarProvider, {
+		"data-slot": "minimal-workspace-layout",
+		"data-sidebar-mode": mode,
+		open: providerOpen,
+		onOpenChange: handleOpenChange,
+		onTransitionEnd,
+		className: cn("min-h-0", "[&_[data-slot=sidebar-gap]]:duration-[var(--espd-minimal-workspace-layout-duration,450ms)] [&_[data-slot=sidebar-gap]]:ease-[var(--espd-minimal-workspace-layout-ease,cubic-bezier(0.4,0,0.2,1))] motion-reduce:[&_[data-slot=sidebar-gap]]:transition-none", hide && hiddenGapClass),
+		style: {
+			"--sidebar-width": "var(--espd-minimal-workspace-layout-sidebar-width, var(--espd-sidebar-width))",
+			"--sidebar-width-collapsed": "var(--espd-minimal-workspace-layout-sidebar-width-collapsed,3.5rem)"
+		},
+		children: /* @__PURE__ */ jsx(MinimalWorkspaceShell, {
+			...props,
+			hiddenSidebar: {
+				enabled: hide && expandable,
+				mode,
+				pinned: expandable && open,
+				startPeek,
+				closePeek
+			}
+		})
+	});
+}
+//#endregion
+export { MinimalWorkspaceLayout as default };