@fluid-app/portal-core 0.1.16

package/dist/shell/sidebar.mjs

@@ -0,0 +1,364 @@
+"use client";
+import { useIsMobile } from "./use-mobile.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/shell/sidebar.tsx
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": orientation,
+		className: cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		...props
+	});
+}
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-muted animate-pulse rounded-md", className),
+		...props
+	});
+}
+const SIDEBAR_WIDTH = "13rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = React$1.createContext(null);
+function useSidebar() {
+	const context = React$1.useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+const SidebarProvider = React$1.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, viewportWidth, previewMode, useBottomNav: useBottomNavProp = false, className, style, children, ...props }, ref) => {
+	const windowIsMobile = useIsMobile();
+	const isMobile = viewportWidth !== void 0 ? viewportWidth < 768 : windowIsMobile;
+	const isPreviewMode = viewportWidth !== void 0 || !!previewMode;
+	const [openMobile, setOpenMobile] = React$1.useState(false);
+	const [_open, _setOpen] = React$1.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React$1.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+	}, [setOpenProp, open]);
+	const toggleSidebar = React$1.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [
+		isMobile,
+		setOpen,
+		setOpenMobile
+	]);
+	React$1.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				const activeElement = document.activeElement;
+				if (activeElement?.closest(".group\\/composer") || activeElement?.closest("[data-toolbar]") || activeElement?.classList.contains("ProseMirror")) return;
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+	const state = open ? "expanded" : "collapsed";
+	const contextValue = React$1.useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar,
+		isPreviewMode,
+		useBottomNav: useBottomNavProp
+	}), [
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar,
+		isPreviewMode,
+		useBottomNavProp
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				"--sidebar-width": SIDEBAR_WIDTH,
+				"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+				...style
+			},
+			className: cn("group/sidebar-wrapper flex min-h-0 w-full flex-1", className),
+			ref,
+			...props,
+			children
+		})
+	});
+});
+SidebarProvider.displayName = "SidebarProvider";
+const Sidebar = React$1.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+	const { isMobile, state, openMobile, setOpenMobile, isPreviewMode, useBottomNav } = useSidebar();
+	const sidebarWidth = state === "expanded" ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_ICON;
+	if (useBottomNav && isMobile) return null;
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-sidebar text-sidebar-foreground flex w-(--sidebar-width) flex-col rounded-tl-lg", isPreviewMode ? "h-full" : "h-[97vh]", className),
+		ref,
+		...props,
+		children
+	});
+	if (isMobile) {
+		const positionClass = isPreviewMode ? "absolute" : "fixed";
+		return /* @__PURE__ */ jsxs(Fragment, { children: [openMobile && /* @__PURE__ */ jsx("div", {
+			className: cn(positionClass, "inset-0 z-40 bg-black/50"),
+			onClick: () => setOpenMobile(false),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("div", {
+			"data-sidebar": "sidebar",
+			"data-mobile": "true",
+			className: cn(positionClass, "bg-sidebar text-sidebar-foreground top-0 left-0 z-50 h-full w-[--sidebar-width] p-0 transition-transform duration-300 ease-in-out", openMobile ? "translate-x-0" : "-translate-x-full", className),
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			ref,
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})
+		})] });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "group peer bg-sidebar text-sidebar-foreground hidden md:block",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		style: { "--sidebar-width": sidebarWidth },
+		children: [/* @__PURE__ */ jsx("div", { className: cn("relative bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ jsx("div", {
+			className: cn("relative inset-y-0 z-[20] hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", isPreviewMode ? "h-full" : "h-svh", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-sidebar": "sidebar",
+				className: "group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+				children
+			})
+		})]
+	});
+});
+Sidebar.displayName = "Sidebar";
+const SidebarRail = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		"data-sidebar": "rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-[10] hidden w-4 -translate-x-full transition-all ease-linear group-data-[side=left]:-right-[1.375rem] group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		...props
+	});
+});
+SidebarRail.displayName = "SidebarRail";
+const SidebarInset = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { isPreviewMode } = useSidebar();
+	return /* @__PURE__ */ jsx("main", {
+		ref,
+		className: cn("relative flex flex-1 flex-col", isPreviewMode ? "max-h-[calc(100svh-(--spacing(13)))]" : "min-h-svh peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))]", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+		...props
+	});
+});
+SidebarInset.displayName = "SidebarInset";
+const SidebarInput = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		"data-sidebar": "input",
+		className: cn("bg-background focus-visible:ring-sidebar-ring h-8 w-full rounded-md border px-3 text-sm shadow-none focus-visible:ring-2 focus-visible:outline-none", className),
+		...props
+	});
+});
+SidebarInput.displayName = "SidebarInput";
+const SidebarHeader = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarFooter = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarSeparator = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		"data-sidebar": "separator",
+		className: cn("bg-sidebar-border mx-2 w-auto", className),
+		...props
+	});
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarContent = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "content",
+		className: cn("scrollbar-none flex min-h-0 flex-1 flex-col gap-2 overflow-auto rounded group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:pt-3", className),
+		...props
+	});
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarGroup = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:py-0 group-data-[collapsible=icon]:pt-4", className),
+		...props
+	});
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = React$1.forwardRef(({ className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		ref,
+		"data-sidebar": "group-label",
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = React$1.forwardRef(({ className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		"data-sidebar": "group-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarGroupContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "group-content",
+	className: cn("w-full text-sm", className),
+	...props
+}));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const SidebarMenu = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	"data-sidebar": "menu",
+	className: cn("flex w-full min-w-0 flex-col gap-1", className),
+	...props
+}));
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	"data-sidebar": "menu-item",
+	className: cn("group/menu-item relative", className),
+	...props
+}));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-primary hover:text-sidebar-primary-foreground active:bg-sidebar-primary active:text-sidebar-primary-foreground data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground data-[state=open]:hover:bg-sidebar-primary data-[state=open]:hover:text-sidebar-primary-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-primary hover:text-sidebar-primary-foreground",
+			outline: "hover:bg-sidebar-primary hover:text-sidebar-primary-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-primary))]"
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const SidebarMenuButton = React$1.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuAction = React$1.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		"data-sidebar": "menu-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+		...props
+	});
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+const SidebarMenuBadge = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "menu-badge",
+	className: cn("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
+	...props
+}));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const SidebarMenuSkeleton = React$1.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+	const width = React$1.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const SidebarMenuSub = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	"data-sidebar": "menu-sub",
+	className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+	...props
+}));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+const SidebarMenuSubItem = React$1.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	...props
+}));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+const SidebarMenuSubButton = React$1.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		ref,
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+//#endregion
+export { Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, useSidebar };
+
+//# sourceMappingURL=sidebar.mjs.map

package/dist/shell/sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.mjs","names":["React"],"sources":["../../src/shell/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport * as React from \"react\";\n\nimport { useIsMobile } from \"./use-mobile\";\n\n// ---------------------------------------------------------------------------\n// Inlined utilities (avoid importing from builder's UI kit)\n// ---------------------------------------------------------------------------\n\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentPropsWithRef<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  decorative?: boolean;\n}) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst SIDEBAR_WIDTH = \"13rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\n// ---------------------------------------------------------------------------\n// Sidebar Context\n// ---------------------------------------------------------------------------\n\ntype SidebarContextValue = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  isPreviewMode: boolean;\n  useBottomNav: boolean;\n};\n\nexport const SidebarContext: React.Context<SidebarContextValue | null> =\n  React.createContext<SidebarContextValue | null>(null);\n\nfunction useSidebar(): SidebarContextValue {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\n// ---------------------------------------------------------------------------\n// SidebarProvider\n// ---------------------------------------------------------------------------\n\nconst SidebarProvider: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    viewportWidth?: number;\n    previewMode?: boolean;\n    useBottomNav?: boolean;\n  } & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    viewportWidth?: number;\n    previewMode?: boolean;\n    useBottomNav?: boolean;\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      viewportWidth,\n      previewMode,\n      useBottomNav: useBottomNavProp = false,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const windowIsMobile = useIsMobile();\n    // Use viewportWidth if provided, otherwise use actual window detection\n    const isMobile =\n      viewportWidth !== undefined ? viewportWidth < 768 : windowIsMobile;\n    // Preview mode is active when viewportWidth is provided\n    const isPreviewMode = viewportWidth !== undefined || !!previewMode;\n    const [openMobile, setOpenMobile] = React.useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value;\n        if (setOpenProp) {\n          setOpenProp(openState);\n        } else {\n          _setOpen(openState);\n        }\n      },\n      [setOpenProp, open],\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          // check if composer is focused - if so, let the composer handle the shortcut\n          const activeElement = document.activeElement;\n          const isComposerFocused =\n            activeElement?.closest(\".group\\\\/composer\") ||\n            activeElement?.closest(\"[data-toolbar]\") ||\n            activeElement?.classList.contains(\"ProseMirror\");\n\n          if (isComposerFocused) {\n            return; // let the composer handle the shortcut\n          }\n\n          event.preventDefault();\n          toggleSidebar();\n        }\n      };\n\n      window.addEventListener(\"keydown\", handleKeyDown);\n      return () => window.removeEventListener(\"keydown\", handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContextValue>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        isPreviewMode,\n        useBottomNav: useBottomNavProp,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        isPreviewMode,\n        useBottomNavProp,\n      ],\n    );\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <div\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH,\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper flex min-h-0 w-full flex-1\",\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      </SidebarContext.Provider>\n    );\n  },\n);\nSidebarProvider.displayName = \"SidebarProvider\";\n\n// ---------------------------------------------------------------------------\n// Sidebar\n// ---------------------------------------------------------------------------\n\nconst Sidebar: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\";\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  } & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\";\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      isMobile,\n      state,\n      openMobile,\n      setOpenMobile,\n      isPreviewMode,\n      useBottomNav,\n    } = useSidebar();\n\n    // Define CSS variables for expanded and collapsed sidebar widths\n    const sidebarWidth =\n      state === \"expanded\" ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_ICON;\n\n    // When bottom nav is active on mobile, hide the sidebar entirely\n    if (useBottomNav && isMobile) {\n      return null;\n    }\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"bg-sidebar text-sidebar-foreground flex w-(--sidebar-width) flex-col rounded-tl-lg\",\n            isPreviewMode ? \"h-full\" : \"h-[97vh]\",\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      );\n    }\n\n    if (isMobile) {\n      // For mobile, render a slide-out sidebar with overlay\n      // Use absolute positioning in preview mode so it stays within the preview container\n      const positionClass = isPreviewMode ? \"absolute\" : \"fixed\";\n      return (\n        <>\n          {/* Overlay - only visible when sidebar is open */}\n          {openMobile && (\n            <div\n              className={cn(positionClass, \"inset-0 z-40 bg-black/50\")}\n              onClick={() => setOpenMobile(false)}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {/* Sidebar - slides in from left */}\n          <div\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className={cn(\n              positionClass,\n              \"bg-sidebar text-sidebar-foreground top-0 left-0 z-50 h-full w-[--sidebar-width] p-0 transition-transform duration-300 ease-in-out\",\n              openMobile ? \"translate-x-0\" : \"-translate-x-full\",\n              className,\n            )}\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            ref={ref}\n            {...props}\n          >\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer bg-sidebar text-sidebar-foreground hidden md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n        style={\n          {\n            \"--sidebar-width\": sidebarWidth,\n          } as React.CSSProperties\n        }\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n          )}\n        />\n        <div\n          className={cn(\n            \"relative inset-y-0 z-[20] hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n            isPreviewMode ? \"h-full\" : \"h-svh\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l\",\n            className,\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\nSidebar.displayName = \"Sidebar\";\n\n// ---------------------------------------------------------------------------\n// SidebarRail\n// ---------------------------------------------------------------------------\n\nconst SidebarRail: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"button\"> & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef<HTMLButtonElement, React.ComponentProps<\"button\">>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          \"hover:after:bg-sidebar-border absolute inset-y-0 z-[10] hidden w-4 -translate-x-full transition-all ease-linear group-data-[side=left]:-right-[1.375rem] group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n          \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n          \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n          \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n          \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n          \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarRail.displayName = \"SidebarRail\";\n\n// ---------------------------------------------------------------------------\n// SidebarInset\n// ---------------------------------------------------------------------------\n\nconst SidebarInset: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"main\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"main\">>(\n  ({ className, ...props }, ref) => {\n    const { isPreviewMode } = useSidebar();\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          \"relative flex flex-1 flex-col\",\n          isPreviewMode\n            ? \"max-h-[calc(100svh-(--spacing(13)))]\"\n            : \"min-h-svh peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))]\",\n          \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarInset.displayName = \"SidebarInset\";\n\n// ---------------------------------------------------------------------------\n// SidebarInput\n// ---------------------------------------------------------------------------\n\nconst SidebarInput: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"input\"> & React.RefAttributes<HTMLInputElement>\n> = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        data-sidebar=\"input\"\n        className={cn(\n          \"bg-background focus-visible:ring-sidebar-ring h-8 w-full rounded-md border px-3 text-sm shadow-none focus-visible:ring-2 focus-visible:outline-none\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarInput.displayName = \"SidebarInput\";\n\n// ---------------------------------------------------------------------------\n// SidebarHeader / Footer\n// ---------------------------------------------------------------------------\n\nconst SidebarHeader: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn(\"flex flex-col gap-2 p-2\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSidebarHeader.displayName = \"SidebarHeader\";\n\nconst SidebarFooter: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn(\"flex flex-col gap-2 p-2\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSidebarFooter.displayName = \"SidebarFooter\";\n\n// ---------------------------------------------------------------------------\n// SidebarSeparator\n// ---------------------------------------------------------------------------\n\nconst SidebarSeparator: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & {\n    orientation?: \"horizontal\" | \"vertical\";\n  } & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    orientation?: \"horizontal\" | \"vertical\";\n  }\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  );\n});\nSidebarSeparator.displayName = \"SidebarSeparator\";\n\n// ---------------------------------------------------------------------------\n// SidebarContent\n// ---------------------------------------------------------------------------\n\nconst SidebarContent: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          \"scrollbar-none flex min-h-0 flex-1 flex-col gap-2 overflow-auto rounded group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:pt-3\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarContent.displayName = \"SidebarContent\";\n\n// ---------------------------------------------------------------------------\n// SidebarGroup\n// ---------------------------------------------------------------------------\n\nconst SidebarGroup: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn(\n          \"relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:py-0 group-data-[collapsible=icon]:pt-4\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarGroup.displayName = \"SidebarGroup\";\n\nconst SidebarGroupLabel: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & {\n    asChild?: boolean;\n  } & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\";\n\nconst SidebarGroupAction: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n  } & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarGroupAction.displayName = \"SidebarGroupAction\";\n\nconst SidebarGroupContent: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarGroupContent.displayName = \"SidebarGroupContent\";\n\n// ---------------------------------------------------------------------------\n// SidebarMenu\n// ---------------------------------------------------------------------------\n\nconst SidebarMenu: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"ul\"> & React.RefAttributes<HTMLUListElement>\n> = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarMenu.displayName = \"SidebarMenu\";\n\nconst SidebarMenuItem: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"li\"> & React.RefAttributes<HTMLLIElement>\n> = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\n\n// ---------------------------------------------------------------------------\n// SidebarMenuButton\n// ---------------------------------------------------------------------------\n\nconst sidebarMenuButtonVariants: (\n  props?:\n    | ({\n        variant?: \"default\" | \"outline\" | null | undefined;\n        size?: \"default\" | \"sm\" | \"lg\" | null | undefined;\n      } & (\n        | {\n            class: ClassValue;\n            className?: never;\n          }\n        | {\n            class?: never;\n            className: ClassValue;\n          }\n        | {\n            class?: never;\n            className?: never;\n          }\n      ))\n    | undefined,\n) => string = cva(\n  \"peer/menu-button ring-sidebar-ring hover:bg-sidebar-primary hover:text-sidebar-primary-foreground active:bg-sidebar-primary active:text-sidebar-primary-foreground data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground data-[state=open]:hover:bg-sidebar-primary data-[state=open]:hover:text-sidebar-primary-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"hover:bg-sidebar-primary hover:text-sidebar-primary-foreground\",\n        outline:\n          \"hover:bg-sidebar-primary hover:text-sidebar-primary-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-primary))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nconst SidebarMenuButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n    isActive?: boolean;\n  } & VariantProps<typeof sidebarMenuButtonVariants> &\n    React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n    isActive?: boolean;\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n\n    return button;\n  },\n);\nSidebarMenuButton.displayName = \"SidebarMenuButton\";\n\n// ---------------------------------------------------------------------------\n// SidebarMenuAction / Badge / Skeleton\n// ---------------------------------------------------------------------------\n\nconst SidebarMenuAction: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n    showOnHover?: boolean;\n  } & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n    showOnHover?: boolean;\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarMenuAction.displayName = \"SidebarMenuAction\";\n\nconst SidebarMenuBadge: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\";\n\nconst SidebarMenuSkeleton: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean;\n  } & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean;\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n});\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\";\n\n// ---------------------------------------------------------------------------\n// SidebarMenuSub\n// ---------------------------------------------------------------------------\n\nconst SidebarMenuSub: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"ul\"> & React.RefAttributes<HTMLUListElement>\n> = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSidebarMenuSub.displayName = \"SidebarMenuSub\";\n\nconst SidebarMenuSubItem: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"li\"> & React.RefAttributes<HTMLLIElement>\n> = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n);\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\";\n\nconst SidebarMenuSubButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean;\n    size?: \"sm\" | \"md\";\n    isActive?: boolean;\n  } & React.RefAttributes<HTMLAnchorElement>\n> = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean;\n    size?: \"sm\" | \"md\";\n    isActive?: boolean;\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\";\n\n// ---------------------------------------------------------------------------\n// Exports\n// ---------------------------------------------------------------------------\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  useSidebar,\n};\n"],"mappings":"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"}

package/dist/shell/use-mobile.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-CKQMccvm.cjs");
+let react = require("react");
+//#region src/shell/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+const TABLET_BREAKPOINT = 1024;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobile;
+}
+function useIsTablet() {
+	const [isTablet, setIsTablet] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const mql = window.matchMedia(`(min-width: ${MOBILE_BREAKPOINT}px) and (max-width: ${TABLET_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsTablet(window.innerWidth >= MOBILE_BREAKPOINT && window.innerWidth < TABLET_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsTablet(window.innerWidth >= MOBILE_BREAKPOINT && window.innerWidth < TABLET_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isTablet;
+}
+function useIsMobileOrTablet() {
+	const [isMobileOrTablet, setIsMobileOrTablet] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobileOrTablet;
+}
+//#endregion
+exports.useIsMobile = useIsMobile;
+exports.useIsMobileOrTablet = useIsMobileOrTablet;
+exports.useIsTablet = useIsTablet;
+
+//# sourceMappingURL=use-mobile.cjs.map

package/dist/shell/use-mobile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.cjs","names":[],"sources":["../../src/shell/use-mobile.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\nconst TABLET_BREAKPOINT = 1024;\n\nexport function useIsMobile(): boolean {\n  const [isMobile, setIsMobile] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\nexport function useIsTablet(): boolean {\n  const [isTablet, setIsTablet] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(\n      `(min-width: ${MOBILE_BREAKPOINT}px) and (max-width: ${TABLET_BREAKPOINT - 1}px)`,\n    );\n    const onChange = () => {\n      setIsTablet(\n        window.innerWidth >= MOBILE_BREAKPOINT &&\n          window.innerWidth < TABLET_BREAKPOINT,\n      );\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsTablet(\n      window.innerWidth >= MOBILE_BREAKPOINT &&\n        window.innerWidth < TABLET_BREAKPOINT,\n    );\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isTablet;\n}\n\nexport function useIsMobileOrTablet(): boolean {\n  const [isMobileOrTablet, setIsMobileOrTablet] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobileOrTablet;\n}\n"],"mappings":";;;;AAEA,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAE1B,SAAgB,cAAuB;CACrC,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAiC,MAAM;AAExD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,EAAE,KAAK;EACxE,MAAM,iBAAiB;AACrB,eAAY,OAAO,aAAa,kBAAkB;;AAEpD,MAAI,iBAAiB,UAAU,SAAS;AACxC,cAAY,OAAO,aAAa,kBAAkB;AAClD,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,cAAuB;CACrC,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAiC,MAAM;AAExD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,MAAM,OAAO,WACjB,eAAe,kBAAkB,sBAAsB,oBAAoB,EAAE,KAC9E;EACD,MAAM,iBAAiB;AACrB,eACE,OAAO,cAAc,qBACnB,OAAO,aAAa,kBACvB;;AAEH,MAAI,iBAAiB,UAAU,SAAS;AACxC,cACE,OAAO,cAAc,qBACnB,OAAO,aAAa,kBACvB;AACD,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,sBAA+B;CAC7C,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAAyC,MAAM;AAExE,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,EAAE,KAAK;EACxE,MAAM,iBAAiB;AACrB,uBAAoB,OAAO,aAAa,kBAAkB;;AAE5D,MAAI,iBAAiB,UAAU,SAAS;AACxC,sBAAoB,OAAO,aAAa,kBAAkB;AAC1D,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO"}

package/dist/shell/use-mobile.d.cts

@@ -0,0 +1,7 @@
+//#region src/shell/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+declare function useIsTablet(): boolean;
+declare function useIsMobileOrTablet(): boolean;
+//#endregion
+export { useIsMobile, useIsMobileOrTablet, useIsTablet };
+//# sourceMappingURL=use-mobile.d.cts.map

package/dist/shell/use-mobile.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.cts","names":[],"sources":["../../src/shell/use-mobile.ts"],"mappings":";iBAKgB,WAAA,CAAA;AAAA,iBAgBA,WAAA,CAAA;AAAA,iBAwBA,mBAAA,CAAA"}

package/dist/shell/use-mobile.d.mts

@@ -0,0 +1,7 @@
+//#region src/shell/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+declare function useIsTablet(): boolean;
+declare function useIsMobileOrTablet(): boolean;
+//#endregion
+export { useIsMobile, useIsMobileOrTablet, useIsTablet };
+//# sourceMappingURL=use-mobile.d.mts.map

package/dist/shell/use-mobile.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.mts","names":[],"sources":["../../src/shell/use-mobile.ts"],"mappings":";iBAKgB,WAAA,CAAA;AAAA,iBAgBA,WAAA,CAAA;AAAA,iBAwBA,mBAAA,CAAA"}

package/dist/shell/use-mobile.mjs

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+//#region src/shell/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+const TABLET_BREAKPOINT = 1024;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobile;
+}
+function useIsTablet() {
+	const [isTablet, setIsTablet] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(min-width: ${MOBILE_BREAKPOINT}px) and (max-width: ${TABLET_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsTablet(window.innerWidth >= MOBILE_BREAKPOINT && window.innerWidth < TABLET_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsTablet(window.innerWidth >= MOBILE_BREAKPOINT && window.innerWidth < TABLET_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isTablet;
+}
+function useIsMobileOrTablet() {
+	const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobileOrTablet;
+}
+//#endregion
+export { useIsMobile, useIsMobileOrTablet, useIsTablet };
+
+//# sourceMappingURL=use-mobile.mjs.map

package/dist/shell/use-mobile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.mjs","names":[],"sources":["../../src/shell/use-mobile.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\nconst TABLET_BREAKPOINT = 1024;\n\nexport function useIsMobile(): boolean {\n  const [isMobile, setIsMobile] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\nexport function useIsTablet(): boolean {\n  const [isTablet, setIsTablet] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(\n      `(min-width: ${MOBILE_BREAKPOINT}px) and (max-width: ${TABLET_BREAKPOINT - 1}px)`,\n    );\n    const onChange = () => {\n      setIsTablet(\n        window.innerWidth >= MOBILE_BREAKPOINT &&\n          window.innerWidth < TABLET_BREAKPOINT,\n      );\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsTablet(\n      window.innerWidth >= MOBILE_BREAKPOINT &&\n        window.innerWidth < TABLET_BREAKPOINT,\n    );\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isTablet;\n}\n\nexport function useIsMobileOrTablet(): boolean {\n  const [isMobileOrTablet, setIsMobileOrTablet] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobileOrTablet;\n}\n"],"mappings":";;AAEA,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAE1B,SAAgB,cAAuB;CACrC,MAAM,CAAC,UAAU,eAAe,SAAkB,MAAM;AAExD,iBAAgB;EACd,MAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,EAAE,KAAK;EACxE,MAAM,iBAAiB;AACrB,eAAY,OAAO,aAAa,kBAAkB;;AAEpD,MAAI,iBAAiB,UAAU,SAAS;AACxC,cAAY,OAAO,aAAa,kBAAkB;AAClD,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,cAAuB;CACrC,MAAM,CAAC,UAAU,eAAe,SAAkB,MAAM;AAExD,iBAAgB;EACd,MAAM,MAAM,OAAO,WACjB,eAAe,kBAAkB,sBAAsB,oBAAoB,EAAE,KAC9E;EACD,MAAM,iBAAiB;AACrB,eACE,OAAO,cAAc,qBACnB,OAAO,aAAa,kBACvB;;AAEH,MAAI,iBAAiB,UAAU,SAAS;AACxC,cACE,OAAO,cAAc,qBACnB,OAAO,aAAa,kBACvB;AACD,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,sBAA+B;CAC7C,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,MAAM;AAExE,iBAAgB;EACd,MAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,EAAE,KAAK;EACxE,MAAM,iBAAiB;AACrB,uBAAoB,OAAO,aAAa,kBAAkB;;AAE5D,MAAI,iBAAiB,UAAU,SAAS;AACxC,sBAAoB,OAAO,aAAa,kBAAkB;AAC1D,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO"}