50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tb4a6,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { Cancel01Icon, Menu01Icon, SidebarLeftIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import * as stylex from "@stylexjs/stylex"; import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react"; import type { ComponentProps, ReactNode } from "react"; import { flushSync } from "react-dom"; import { Button } from "@/components/primitives/button"; import type { ButtonProps } from "@/components/primitives/button"; import { Separator } from "@/components/primitives/separator"; import type { SeparatorProps } from "@/components/primitives/separator"; import { Sheet, SheetContent, SheetDescription, SheetTitle, } from "@/components/primitives/sheet"; import { Skeleton } from "@/components/primitives/skeleton"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/primitives/tooltip"; import { scrollFade } from "@/lib/constella/scroll-fade"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles, visuallyHidden } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, media, motion, opacities, radii, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const sidebarSides = ["left", "right"] as const; const sidebarCollapsibles = ["offcanvas", "icon", "none"] as const; const sidebarMenuButtonSizes = ["sm", "default", "lg"] as const; const sidebarMenuButtonVariants = ["default", "outline"] as const; const sidebarSectionDirections = ["forward", "back"] as const; type SidebarSide = (typeof sidebarSides)[number]; type SidebarCollapsible = (typeof sidebarCollapsibles)[number]; type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number]; type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number]; type SidebarSectionDirection = (typeof sidebarSectionDirections)[number]; type Styled = Omit & { sx?: Sx; }; interface SidebarContextValue { changeSection: ( direction: SidebarSectionDirection, update: () => void | Promise ) => void; isMobile: boolean; open: boolean; openMobile: boolean; sectionChanging: boolean; setOpen: (open: boolean) => void; setOpenMobile: (open: boolean) => void; state: "collapsed" | "expanded"; toggleSidebar: () => void; } const SidebarContext = createContext(null); function useSidebar() { const context = use(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider."); } return context; } // Inside the mobile sheet, where the trigger closes it. const InSheetContext = createContext(false); // `collapsing` from the moment an icon sidebar starts to narrow; `rail` once it has, // so until then the full layout stays and the width clips it. Tooltips point away // from the window's edge. const RailContext = createContext<{ collapsing: boolean; rail: boolean; tooltipSide: "left" | "right"; }>({ collapsing: false, rail: false, tooltipSide: "right" }); // The trigger's own view-transition name while the section changes, so it holds still // instead of sliding out and back in with the header. const TriggerNameContext = createContext(null); // Toggles without the animation: a keyboard action is too frequent to animate. const KeyboardToggleContext = createContext<(() => void) | null>(null); // Tells a row's button whether its label is cut off, so its tooltip can show it whole. const LabelContext = createContext<((truncated: boolean) => void) | null>(null); // The media token is a full at-rule; matchMedia takes only its query. const desktopQuery = media.md.slice("@media ".length); function subscribe(onChange: () => void) { const query = window.matchMedia(desktopQuery); query.addEventListener("change", onChange); return () => { query.removeEventListener("change", onChange); }; } // Without transition types the slide can't tell forward from back, and without // `match-element` two sidebars would share a name, so those browsers swap at once. function supportsSectionChange() { return ( CSS.supports("selector(:active-view-transition-type(a))") && CSS.supports("view-transition-name: match-element") ); } function useIsMobile() { return useSyncExternalStore( subscribe, () => !window.matchMedia(desktopQuery).matches, () => false ); } // Measured, so a label that fits never shows faded. Faded until then: the server // can't measure, and a long label must never paint hard-clipped. function useTruncated(enabled: boolean) { const ref = useRef(null); const report = use(LabelContext); const [truncated, setTruncated] = useState(enabled); useLayoutEffect(() => { const node = ref.current; function measure() { const next = enabled && node !== null && node.scrollWidth > node.clientWidth; setTruncated(next); report?.(next); } measure(); // Its box changes width with the sidebar, and its text on a rename. const resize = new ResizeObserver(measure); const content = new MutationObserver(measure); if (node !== null) { resize.observe(node); content.observe(node, { characterData: true, childList: true, subtree: true, }); } return () => { resize.disconnect(); content.disconnect(); }; }, [enabled, report]); return { ref, truncated }; } // Its own provider's `changeSection`, or one the app started with the same types, like a // router's; `sidebar-scoped` marks a provider's own, so other sidebars on the page stay put. const inSectionChange = ":is([data-section-change] *, :root:active-view-transition-type(sidebar-forward, sidebar-back):not(:active-view-transition-type(sidebar-scoped)) *)"; // Toggled from the keyboard: too frequent to animate. const fromKeyboard = ":is([data-instant] *)"; // The collapsed selectors outrank it, so each close duration pairs with it to stay at once. const iconOnly = ":is([data-slot='sidebar'][data-collapsible='icon'] *)"; const expandingContent = ":is([data-slot='sidebar'][data-expanding] [data-slot='sidebar-content'] *)"; const fadeIn = stylex.keyframes({ from: { opacity: 0 } }); const inContentIconOnly = ":is([data-slot='sidebar'][data-collapsible='icon'] [data-slot='sidebar-content'] *)"; const inRail = ":is([data-slot='sidebar'][data-rail] *)"; const highlighted = ":is([data-active])"; const pressable = ":not(:disabled, [aria-disabled='true'])"; const rtl = ":is([dir='rtl'] *)"; const triggerHovered = ":is([data-slot='sidebar-trigger']:hover *)"; const triggerFocused = ":is([data-slot='sidebar-trigger']:focus-visible *)"; // The whole row answers the pointer, so reaching for its action keeps it lit, and so // does an open menu from it. const item = "[data-slot='sidebar-menu-item']"; // Its own attribute, not `data-slot`: a menu trigger rendering the action writes its slot over it. const action = "[data-sidebar-menu-action]"; // Its own children only, so a sub-row doesn't light its parent. const ownHover = `${item}:has(> :not([data-slot='sidebar-menu-sub']):hover)`; const ownFocus = `${item}:has(> :focus-visible)`; const rowHovered = `:is(${ownHover} > *)`; // The action's menu only: the row's own tooltip writes the same attribute. const actionOpen = `${item}:has(> ${action}[data-popup-open])`; // Or the row's own popup, as a menu's trigger: its tooltip also writes `data-popup-open`, // and a collapsible's trigger is expanded without one. const rowOpen = `:is(${actionOpen} > *, [aria-haspopup][aria-expanded='true'])`; const idle = ":not([data-active])"; const rowFill = { default: "transparent", [media.hover]: { default: "transparent", [`${rowHovered}${idle}`]: colors.fillSubtle, [`${rowOpen}${idle}`]: colors.fillSubtle, [highlighted]: colors.fill, }, [`${rowOpen}${idle}`]: colors.fillSubtle, [`:active${pressable}${idle}`]: colors.fillSubtle, [highlighted]: colors.fill, }; // An inset shadow, not a second fill, so hover stacks on the current row's `fill` and still fades. const lit = `inset 0 0 0 100vmax ${colors.fillSubtle}`; const unlit = "inset 0 0 0 100vmax transparent"; // The label fades out before the row's end, or before an action drawn over it: // the action's width and inset, less the row's padding. const actionRoom = `(${sizes.controlXs} + ${space.xxs} - ${space.xs})`; const fadeAtEdge = (to: string) => `linear-gradient(to ${to}, black calc(100% - ${space.lg}), transparent)`; const fadeBeforeAction = (to: string) => `linear-gradient(to ${to}, black calc(100% - ${actionRoom} - ${space.md}), transparent calc(100% - ${actionRoom}))`; const withAction = `${item}:has(> ${action})`; // Whenever the action is drawn: always unless it waits for hover, and while its row is // hovered, focused or has its menu open. const actionShown = `:is(${item}:has(> ${action}:not([data-show-on-hover])) *, ${withAction}${ownFocus} *, ${actionOpen} *)`; const actionHovered = `:is(${withAction}${ownHover} *)`; const styles = stylex.create({ wrapper: { display: "flex", minHeight: "100svh", width: "100%", }, // In the flow and sticky, so it sits beside the content and fills the window's height. sidebar: { // On the column, not its full-width inside, so the edge stays drawn while the width moves. borderInlineEndColor: colors.borderSubtle, borderInlineEndStyle: "solid", borderInlineEndWidth: strokes.border, color: colors.textPrimary, // Rows size to it, so they narrow with the width instead of being cut at its edge. containerType: "inline-size", display: { default: "none", [media.md]: "block" }, flexShrink: 0, height: "100svh", insetBlockStart: 0, // Lets a sub-menu's height fold with the width. interpolateSize: "allow-keywords", maxHeight: "100%", overflow: "hidden", position: "sticky", transitionDuration: { default: durations.sidebar, ":is([data-collapsible])": durations.sidebarExit, [fromKeyboard]: "0s", [`:is([data-collapsible])${fromKeyboard}`]: "0s", [media.reducedMotion]: "0s", }, transitionProperty: "width", transitionTimingFunction: easings.inOut, width: sizes.sidebar, }, offcanvas: { borderInlineEndWidth: 0, borderInlineStartWidth: 0, width: 0 }, sidebarRight: { borderInlineEndWidth: 0, borderInlineStartColor: colors.borderSubtle, borderInlineStartStyle: "solid", borderInlineStartWidth: strokes.border, }, icon: { width: sizes.sidebarIcon }, // Keeps its full width while the sidebar narrows, so its content is clipped, not reflowed. inner: { backgroundColor: colors.sidebar, display: "flex", flexDirection: "column", height: "100%", position: "relative", // Inside the column's border. width: { default: `calc(${sizes.sidebar} - ${strokes.border})`, [inRail]: `calc(${sizes.sidebarIcon} - ${strokes.border})`, }, }, innerRight: { marginInlineStart: "auto" }, static: { backgroundColor: colors.sidebar, color: colors.textPrimary, display: "flex", flexDirection: "column", height: "100%", width: sizes.sidebar, }, sheet: { backgroundColor: colors.sidebar, width: sizes.sidebar, }, main: { backgroundColor: colors.background, display: "flex", flex: 1, flexDirection: "column", minWidth: 0, position: "relative", }, rail: { backgroundColor: "transparent", borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineEndWidth: 0, borderInlineStartWidth: 0, cursor: "ew-resize", insetBlockEnd: 0, insetBlockStart: 0, // On the edge that meets the page, whichever side the sidebar is on. insetInlineEnd: { default: `calc(-1 * ${space.xs})`, ":is([data-side='right'] *)": "auto", }, insetInlineStart: { default: "auto", ":is([data-side='right'] *)": `calc(-1 * ${space.xs})`, }, paddingBlockEnd: 0, paddingBlockStart: 0, paddingInlineEnd: 0, paddingInlineStart: 0, position: "absolute", width: space.md, zIndex: 1, "::after": { backgroundColor: { default: "transparent", [media.hover]: { default: "transparent", ":hover": colors.border }, }, content: "''", insetBlockEnd: 0, insetBlockStart: 0, insetInlineStart: `calc(50% - ${strokes.border})`, position: "absolute", transitionDuration: durations.hover, transitionProperty: "background-color", width: strokes.indicator, }, }, triggerName: (name: string) => ({ viewTransitionName: { default: null, [inSectionChange]: name }, }), // Named only while its own sidebar changes section; base.css slides the snapshots. swap: { viewTransitionClass: { default: null, [inSectionChange]: "sidebar-swap" }, viewTransitionName: { default: null, [inSectionChange]: "match-element" }, }, // The page's header height, so the two line up across the edge. header: { alignItems: "center", display: "flex", flexShrink: 0, gap: space.xxs, height: sizes.header, // Alone in the rail, the trigger keeps to the start, on the rows' icon column. justifyContent: "space-between", paddingInlineEnd: space.xs, paddingInlineStart: space.xs, }, headerActions: { alignItems: "center", display: "flex", flexShrink: 0, gap: space.xxs, }, footer: { display: "flex", flexDirection: "column", gap: space.xs, paddingBlockEnd: space.xs, paddingBlockStart: space.xs, paddingInlineEnd: space.xs, paddingInlineStart: space.xs, }, content: { display: "flex", flex: 1, flexDirection: "column", gap: space.md, minHeight: 0, overflowX: "hidden", overflowY: { default: "auto", [iconOnly]: "hidden" }, paddingBlockEnd: space.xs, paddingInlineEnd: space.xs, paddingInlineStart: space.xs, }, separator: { marginInlineEnd: space.xs, marginInlineStart: space.xs, width: "auto", }, group: { display: "flex", flexDirection: "column", minWidth: 0, position: "relative", width: "100%", }, // Folds away with the width, rather than leaving the rows below to jump up when it goes. groupLabel: { alignItems: "center", color: colors.textSecondary, display: "flex", flexShrink: 0, height: sizes.controlXs, marginBlockStart: { default: 0, [iconOnly]: `calc(-1 * ${sizes.controlXs})`, }, // Fades out at its end like a row's label, not cut off. maskImage: { default: null, ":is([data-truncated])": fadeAtEdge("right"), [`:is([data-truncated])${rtl}`]: fadeAtEdge("left"), }, opacity: { default: 1, [iconOnly]: 0 }, overflow: "hidden", paddingInlineEnd: space.xs, paddingInlineStart: space.xs, transitionDuration: { default: durations.sidebar, [iconOnly]: durations.sidebarExit, [fromKeyboard]: "0s", [`${iconOnly}${fromKeyboard}`]: "0s", [media.reducedMotion]: "0s", }, transitionProperty: "margin, opacity", transitionTimingFunction: easings.inOut, whiteSpace: "nowrap", }, action: { alignItems: "center", // Stays lit while its menu is open, as a button's trigger does. backgroundColor: { default: "transparent", ":is([data-popup-open])": colors.fillSubtle, [media.hover]: { default: "transparent", ":hover": colors.fillSubtle, ":is([data-popup-open])": colors.fillSubtle, }, }, borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineEndWidth: 0, borderInlineStartWidth: 0, // Concentric with the row: its radius less the inset it sits at. borderStartStartRadius: radii.xs, borderStartEndRadius: radii.xs, borderEndStartRadius: radii.xs, borderEndEndRadius: radii.xs, color: colors.textSecondary, cursor: "pointer", display: { default: "flex", [inRail]: "none" }, height: sizes.controlXs, insetInlineEnd: space.xxs, justifyContent: "center", paddingBlockEnd: 0, paddingBlockStart: 0, paddingInlineEnd: 0, paddingInlineStart: 0, position: "absolute", transitionDuration: durations.hover, transitionProperty: "background-color, opacity", transitionTimingFunction: "ease", width: sizes.controlXs, }, groupAction: { insetBlockStart: 0, }, groupContent: { width: "100%", }, menu: { display: "flex", flexDirection: "column", // Apart by a hairline, so a hovered row's fill never merges into the current one. gap: space.xxxs, listStyleType: "none", marginBlockEnd: 0, marginBlockStart: 0, minWidth: 0, paddingInlineStart: 0, width: "100%", }, menuItem: { position: "relative", }, // In the content it fades with the width, as it has no icon to keep in the rail; the // header's stays, so its logo holds where the rail's mark takes over. expandedOnly: { // Mounted as the rail opens, it fades in with the labels instead of starting whole. animationDuration: durations.sidebar, animationName: { default: null, [expandingContent]: fadeIn }, animationTimingFunction: easings.inOut, display: "flex", flexDirection: "column", minWidth: 0, opacity: { default: 1, [inContentIconOnly]: 0 }, transitionDuration: { default: durations.sidebar, [iconOnly]: durations.sidebarExit, [fromKeyboard]: "0s", [`${iconOnly}${fromKeyboard}`]: "0s", [media.reducedMotion]: "0s", }, transitionProperty: "opacity", transitionTimingFunction: easings.inOut, }, button: { alignItems: "center", backgroundColor: rowFill, borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineEndWidth: 0, borderInlineStartWidth: 0, borderStartStartRadius: radii.sm, borderStartEndRadius: radii.sm, borderEndStartRadius: radii.sm, borderEndEndRadius: radii.sm, boxShadow: { default: null, [highlighted]: { default: unlit, [media.hover]: { default: unlit, [rowHovered]: lit, [rowOpen]: lit }, [rowOpen]: lit, }, }, color: colors.textPrimary, cursor: "pointer", display: "flex", fontWeight: fontWeights.regular, gap: space.xs, height: sizes.controlMd, opacity: { default: 1, ":is(:disabled, [aria-disabled='true'])": opacities.disabled, }, overflow: "hidden", paddingBlockEnd: 0, paddingBlockStart: 0, paddingInlineEnd: space.xs, paddingInlineStart: space.xs, textAlign: "start", textDecorationLine: "none", transitionDuration: durations.hover, transitionProperty: "background-color, box-shadow", transitionTimingFunction: "ease", whiteSpace: "nowrap", width: { default: `min(100%, 100cqi - 2 * ${space.xs})`, [inRail]: sizes.controlMd, }, }, // Room on the end for a badge. buttonWithEnd: { paddingInlineEnd: { default: `calc(${space.xs} + ${sizes.controlXs} + ${space.xxs})`, [inRail]: space.xs, }, }, buttonOutline: { backgroundColor: colors.background, boxShadow: `0 0 0 ${strokes.border} ${colors.border}`, }, buttonSm: { height: sizes.controlSm, }, buttonLg: { height: { default: sizes.media, [inRail]: sizes.controlMd }, paddingInlineEnd: { default: space.xs, [inRail]: 0 }, paddingInlineStart: { default: space.xs, [inRail]: 0 }, }, // Stays put while the sidebar's edge passes over it; the rail's narrow button hides it. label: { // One mounted as the rail opens (a brand's name) fades in like the rest, not whole. animationDuration: durations.sidebar, animationName: { default: null, ":is([data-slot='sidebar'][data-expanding] *)": fadeIn, }, animationTimingFunction: easings.inOut, flexGrow: 1, maskImage: { default: null, ":is([data-truncated])": fadeAtEdge("right"), [`:is([data-truncated])${rtl}`]: fadeAtEdge("left"), [actionShown]: fadeBeforeAction("right"), [`${actionShown}${rtl}`]: fadeBeforeAction("left"), [media.hover]: { [actionHovered]: fadeBeforeAction("right"), [`${actionHovered}${rtl}`]: fadeBeforeAction("left"), }, }, minWidth: 0, // On the width's own clock, so it's gone just as the edge reaches the icons. opacity: { default: 1, [iconOnly]: 0 }, overflow: "hidden", transitionDuration: { default: durations.sidebar, [iconOnly]: durations.sidebarExit, [fromKeyboard]: "0s", [`${iconOnly}${fromKeyboard}`]: "0s", [media.reducedMotion]: "0s", }, transitionProperty: "opacity", transitionTimingFunction: easings.inOut, whiteSpace: "nowrap", }, // Drawn while its row is pointed at or focused, and kept in the layout when hidden, // so the label's width never moves. kbd: { display: { default: "flex", [inRail]: "none" }, flexShrink: 0, opacity: { default: 0, [`:is(${ownFocus} *)`]: 1, [media.hover]: { default: 0, [`:is(${ownHover} *)`]: 1, }, }, transitionDuration: durations.hover, transitionProperty: "opacity", transitionTimingFunction: "ease", }, menuAction: { insetBlockStart: `calc((${sizes.controlMd} - ${sizes.controlXs}) / 2)`, }, // Shown while its row is hovered or focused, or while its menu is open; always on touch. onHover: { opacity: { default: 1, [media.hover]: { default: 0, [`:is(${ownHover} *, ${ownFocus} *)`]: 1, ":is([data-popup-open])": 1, }, }, }, badge: { alignItems: "center", color: colors.textSecondary, display: { default: "flex", [inRail]: "none" }, fontVariantNumeric: "tabular-nums", fontWeight: fontWeights.medium, height: sizes.controlXs, insetBlockStart: `calc((${sizes.controlMd} - ${sizes.controlXs}) / 2)`, insetInlineEnd: space.xxs, justifyContent: "center", minWidth: sizes.controlXs, paddingInlineEnd: space.xxs, paddingInlineStart: space.xxs, pointerEvents: "none", position: "absolute", userSelect: "none", }, skeleton: { alignItems: "center", display: "flex", gap: space.xs, height: sizes.controlMd, paddingInlineEnd: space.xs, paddingInlineStart: space.xs, }, skeletonIcon: { flexShrink: 0, height: sizes.icon, width: sizes.icon, }, skeletonText: { flex: 1, height: sizes.icon, }, sub: { borderInlineStartColor: colors.borderSubtle, borderInlineStartStyle: "solid", borderInlineStartWidth: strokes.border, display: "flex", flexDirection: "column", gap: space.xxxs, // Folds shut with the width, so the rows under it close up in the same motion. height: { default: "auto", [iconOnly]: 0 }, listStyleType: "none", marginBlockEnd: 0, marginBlockStart: 0, marginInlineEnd: `calc(${space.xs} - ${space.xxxs})`, // Under the parent row's icon. marginInlineStart: `calc(${space.xs} + ${sizes.icon} / 2)`, minWidth: 0, opacity: { default: 1, [iconOnly]: 0 }, overflow: "clip", overflowClipMargin: space.xxs, paddingBlockEnd: { default: space.xxxs, [iconOnly]: 0 }, paddingBlockStart: { default: space.xxxs, [iconOnly]: 0 }, paddingInlineEnd: 0, paddingInlineStart: `calc(${space.xs} - ${space.xxxs})`, transitionDuration: { default: durations.sidebar, [iconOnly]: durations.sidebarExit, [fromKeyboard]: "0s", [`${iconOnly}${fromKeyboard}`]: "0s", [media.reducedMotion]: "0s", }, transitionProperty: "height, padding-block, opacity", transitionTimingFunction: easings.inOut, }, subButton: { alignItems: "center", backgroundColor: { default: "transparent", [media.hover]: { default: "transparent", [`:hover${pressable}`]: colors.fillSubtle, [highlighted]: colors.fill, }, [`:active${pressable}`]: colors.fillSubtle, [highlighted]: colors.fill, }, borderStartStartRadius: radii.sm, borderStartEndRadius: radii.sm, borderEndStartRadius: radii.sm, borderEndEndRadius: radii.sm, color: colors.textPrimary, display: "flex", gap: space.xs, height: sizes.controlSm, overflow: "hidden", paddingInlineEnd: space.xs, paddingInlineStart: space.xs, textDecorationLine: "none", transitionDuration: durations.hover, transitionProperty: "background-color", transitionTimingFunction: "ease", whiteSpace: "nowrap", }, // The rail's mark and the icon share one cell, and cross-fade as the trigger is pointed at. markStack: { display: "inline-grid", }, markLayer: { display: "flex", gridArea: "1 / 1", transitionDuration: { default: durations.hover, // Keyboard focus never animates. [triggerFocused]: "0s", }, transitionProperty: { default: "opacity, scale, filter", [media.reducedMotion]: "opacity", }, transitionTimingFunction: easings.crossfade, }, // The outgoing layer shrinks and softens, so the two never double-expose. markIdle: { filter: { default: "none", [triggerFocused]: `blur(${motion.crossfadeTextBlur})`, [media.hover]: { default: "none", [triggerHovered]: `blur(${motion.crossfadeTextBlur})`, }, }, opacity: { default: 1, [triggerFocused]: 0, [media.hover]: { default: 1, [triggerHovered]: 0 }, }, scale: { default: 1, [triggerFocused]: motion.popoverScale, [media.hover]: { default: 1, [triggerHovered]: motion.popoverScale }, }, }, markActive: { filter: { default: `blur(${motion.crossfadeTextBlur})`, [triggerFocused]: "none", [media.hover]: { default: `blur(${motion.crossfadeTextBlur})`, [triggerHovered]: "none", }, }, opacity: { default: 0, [triggerFocused]: 1, [media.hover]: { default: 0, [triggerHovered]: 1 }, }, scale: { default: motion.popoverScale, [triggerFocused]: 1, [media.hover]: { default: motion.popoverScale, [triggerHovered]: 1 }, }, }, }); /** Holds the open state, toggles on ⌘B / Ctrl+B, and lays the sidebar out beside its inset. */ function SidebarProvider({ defaultOpen = true, onOpenChange, open: openProp, sx, ...props }: Styled> & { defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; open?: boolean; }) { const isMobile = useIsMobile(); const [openMobile, setOpenMobile] = useState(false); const [ownOpen, setOwnOpen] = useState(defaultOpen); // A count, so a change started mid-slide isn't unnamed when the first one ends. const [sectionChanges, setSectionChanges] = useState(0); // Whether the last toggle came from ⌘B / Ctrl+B. const [instant, setInstant] = useState(false); const open = openProp ?? ownOpen; const setOpen = useCallback( (next: boolean) => { setInstant(false); if (onOpenChange) { onOpenChange(next); } else { setOwnOpen(next); } }, [onOpenChange] ); const toggleSidebar = useCallback(() => { if (isMobile) { setOpenMobile(!openMobile); } else { setOpen(!open); } }, [isMobile, open, openMobile, setOpen]); const toggleFromKeyboard = useCallback(() => { toggleSidebar(); setInstant(true); }, [toggleSidebar]); const changeSection = useCallback( ( direction: SidebarSectionDirection, update: () => void | Promise ) => { if (!supportsSectionChange()) { void update(); return; } flushSync(() => { setSectionChanges((count) => count + 1); }); const transition = document.startViewTransition({ types: [`sidebar-${direction}`, "sidebar-scoped"], update: async () => { await flushSync(update); }, }); // `finished` rejects when `update` does; the names come off either way. async function settle() { await Promise.allSettled([transition.finished]); setSectionChanges((count) => count - 1); } void settle(); }, [] ); useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "b" && (event.metaKey || event.ctrlKey)) { event.preventDefault(); toggleFromKeyboard(); } } window.addEventListener("keydown", onKeyDown); return () => { window.removeEventListener("keydown", onKeyDown); }; }, [toggleFromKeyboard]); const context = useMemo( () => ({ changeSection, isMobile, open, openMobile, sectionChanging: sectionChanges > 0, setOpen, setOpenMobile, state: open ? "expanded" : "collapsed", toggleSidebar, }), [ changeSection, isMobile, open, openMobile, sectionChanges, setOpen, toggleSidebar, ] ); return ( {/* One group, so once a row's tooltip is open, the next opens at once. */}

); } function Sidebar({ children, collapsible = "offcanvas", side = "left", sx, ...props }: Styled, "ref">> & { collapsible?: SidebarCollapsible; side?: SidebarSide; }) { const { isMobile, openMobile, sectionChanging, setOpenMobile, state } = useSidebar(); const desktop = useRef(null); const isCollapsed = state === "collapsed"; const [settled, setSettled] = useState(isCollapsed); // Settles once the width transition ends; with none running (reduced motion) at once. useEffect(() => { const running = desktop.current?.getAnimations() ?? []; let cancelled = false; async function settle() { await Promise.allSettled( running.map(async (animation) => await animation.finished) ); // The next toggle cancels this run, and its own run settles it. Any other end, like the // column unmounting for the sheet, still settles, so the rail never waits on it. if (!cancelled) { setSettled(isCollapsed); } } void settle(); return () => { cancelled = true; }; }, [isCollapsed]); const collapsing = isCollapsed && collapsible === "icon"; const rail = collapsing && settled; const tooltipSide: "left" | "right" = side === "right" ? "left" : "right"; const railState = useMemo( () => ({ collapsing, rail, tooltipSide }), [collapsing, rail, tooltipSide] ); // On the sidebar itself, not the provider, so it reaches into the mobile sheet's portal. const sectionChange = sectionChanging ? "" : undefined; const triggerName = `sidebar-trigger${useId()}`; if (collapsible === "none") { return (

{children}

); } if (isMobile) { return ( Sidebar Displays the mobile sidebar. {children} ); } return (

{children}

); } /** * Collapses the sidebar, or opens it as a sheet on narrow screens; inside the sheet it * closes it. Its children default to `SidebarTriggerIcon`; `kbd` follows the label in its * tooltip. */ function SidebarTrigger({ "aria-label": ariaLabel, children, kbd, onClick, size = "icon", sx, variant = "ghost", ...props }: ButtonProps & { kbd?: ReactNode }) { const { isMobile, open, setOpenMobile, toggleSidebar } = useSidebar(); const inSheet = use(InSheetContext); const name = use(TriggerNameContext); const triggerSx = [name !== null && styles.triggerName(name), sx]; const toggleFromKeyboard = use(KeyboardToggleContext); const { rail, tooltipSide } = use(RailContext); if (inSheet) { return ( ); } let label = open ? "Collapse sidebar" : "Expand sidebar"; if (isMobile) { label = "Open sidebar"; } return ( { onClick?.(event); // Enter or Space: a keyboard toggle, so it skips the animation. if (event.detail === 0 && toggleFromKeyboard) { toggleFromKeyboard(); } else { toggleSidebar(); } }} size={size} sx={triggerSx} variant={variant} {...props} > {children ?? } } /> {ariaLabel ?? label} {kbd} ); } /** The trigger's glyph for where it is: close in the mobile sheet, a menu below 768px, the sidebar otherwise. */ function SidebarTriggerIcon() { const { isMobile } = useSidebar(); let icon = SidebarLeftIcon; if (use(InSheetContext)) { icon = Cancel01Icon; } else if (isMobile) { icon = Menu01Icon; } return ; } /** * A mark, like your logo, that stands in for `SidebarTriggerIcon` in the icon rail until * the trigger is pointed at or focused. Anywhere else it's the icon. */ function SidebarTriggerMark({ children }: { children: ReactNode }) { if (!use(RailContext).rail) { return ; } return ( {children} ); } function Glyph({ icon }: { icon: typeof SidebarLeftIcon }) { return ( ); } /** A strip on the sidebar's edge that toggles it, for the pointer only. */ function SidebarRail({ sx, ...props }: Styled>) { const { toggleSidebar } = useSidebar(); return (