@inf-monkeys-tech/monkeys-design 0.4.46 → 0.4.47

package/dist/components/layout/index.mjs

@@ -1,16 +1,3228 @@
-import { useState, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext } from 'react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@radix-ui/react-context-menu';
 
 // src/components/layout/index.tsx
-function cn(...inputs) {
+
+// src/components/base/utils.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasRenderableNode(node) {
+  return node !== void 0 && node !== null && typeof node !== "boolean";
+}
+
+// src/components/base/theme.ts
+var emptyStyles = {};
+var motionBase = "motion-safe:transition motion-safe:duration-300 motion-safe:ease-out";
+var motionInteractive = "motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-out";
+var motionTransform = "motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out";
+var baseSlots = {
+  buttonBase: cn(
+    "group/button inline-flex min-w-0 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium focus-visible:outline-none",
+    "cursor-pointer disabled:!cursor-not-allowed",
+    motionInteractive
+  ),
+  buttonDefault: "border-border bg-background text-foreground hover:bg-accent/60",
+  buttonPrimary: "border-primary/20 bg-primary/10 text-primary hover:bg-primary/15",
+  buttonSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15",
+  buttonWarning: "border-amber-500/30 bg-amber-500/10 text-amber-700 hover:bg-amber-500/15",
+  buttonDanger: "border-destructive/20 bg-destructive/10 text-destructive hover:bg-destructive/15",
+  buttonMuted: "border-border/60 bg-muted/45 text-muted-foreground hover:bg-muted/70 hover:text-foreground",
+  buttonActive: "border-primary/35 bg-primary/10 text-primary",
+  buttonDisabled: "!cursor-not-allowed opacity-60",
+  buttonIconOnly: "w-9 px-0",
+  buttonIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+  buttonLabel: "min-w-0 truncate",
+  badgeBase: cn(
+    "inline-flex max-w-full items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium",
+    motionBase
+  ),
+  badgeDefault: "border-border/60 bg-background text-foreground",
+  badgePrimary: "border-primary/30 bg-primary/10 text-primary",
+  badgeSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700",
+  badgeWarning: "border-amber-500/30 bg-amber-500/10 text-amber-700",
+  badgeDanger: "border-destructive/30 bg-destructive/10 text-destructive",
+  badgeMuted: "border-border/60 bg-muted text-muted-foreground",
+  badgeIcon: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
+  badgeLabel: "min-w-0 truncate",
+  panelRoot: cn(
+    "group relative flex min-w-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background",
+    motionInteractive
+  ),
+  panelInteractive: "cursor-pointer hover:shadow-md",
+  panelSelected: "border-primary/45 bg-primary/5",
+  panelDisabled: "!cursor-not-allowed opacity-60",
+  panelMedia: "shrink-0 overflow-hidden",
+  panelHeader: "min-w-0 p-4",
+  panelTitle: "min-w-0 truncate text-sm font-semibold leading-none text-foreground",
+  panelDescription: "mt-1 text-sm leading-5 text-muted-foreground",
+  panelBody: "min-w-0 px-4 pb-4 text-sm text-foreground",
+  panelBodyStandalone: "pt-4",
+  panelFooter: "shrink-0 border-t border-border/60 px-4 py-3",
+  stateRoot: cn(
+    "flex min-h-48 flex-col items-center justify-center rounded-lg border border-border/70 bg-background px-6 py-10 text-center",
+    motionBase
+  ),
+  stateIcon: "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground motion-safe:animate-in motion-safe:fade-in",
+  stateTitle: "text-sm font-semibold text-foreground",
+  stateDescription: "mt-2 max-w-md text-sm leading-6 text-muted-foreground",
+  stateActions: "mt-5 flex flex-wrap items-center justify-center gap-2",
+  loadingSpinner: "h-5 w-5 animate-spin",
+  fieldRoot: "grid min-w-0 gap-2",
+  fieldLabelRow: "flex min-w-0 items-center justify-between gap-3",
+  fieldLabel: "min-w-0 text-sm font-medium leading-none text-foreground",
+  fieldRequired: "text-destructive",
+  fieldDescription: "text-sm leading-5 text-muted-foreground",
+  fieldMessage: "text-sm leading-5 text-muted-foreground",
+  fieldControl: "min-w-0",
+  controlWrapper: cn(
+    "relative flex min-w-0 items-center rounded-md border border-border bg-background text-foreground focus-within:border-primary/35",
+    motionBase
+  ),
+  controlBase: "min-w-0 flex-1 bg-transparent px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:!cursor-not-allowed",
+  controlInput: "h-9",
+  controlTextarea: "min-h-24 resize-y py-2 leading-6",
+  controlSelect: "h-9 cursor-pointer appearance-none pr-9 disabled:!cursor-not-allowed",
+  controlIcon: "pointer-events-none ml-3 inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground",
+  controlTrailing: "mr-3 inline-flex shrink-0 items-center justify-center text-muted-foreground",
+  controlInvalid: "border-destructive/45 focus-within:border-destructive/60",
+  controlDisabled: "!cursor-not-allowed opacity-60",
+  controlReadOnly: "bg-muted/35",
+  selectChevron: cn(
+    "pointer-events-none absolute right-3 top-1/2 h-2 w-2 -translate-y-1/2 rotate-45 border-b border-r border-current text-muted-foreground",
+    motionTransform
+  ),
+  selectMenu: "absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 max-h-60 origin-top overflow-auto rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg outline-none motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  selectOption: cn(
+    "flex min-h-8 w-full min-w-0 cursor-pointer items-center rounded-sm px-2.5 py-1.5 text-left text-sm text-foreground",
+    motionInteractive
+  ),
+  selectOptionActive: "bg-accent text-accent-foreground",
+  selectOptionSelected: "bg-primary/10 text-primary",
+  selectOptionDisabled: "!cursor-not-allowed opacity-50",
+  selectPlaceholder: "text-muted-foreground",
+  selectNative: "sr-only",
+  switchRoot: "inline-flex min-w-0 cursor-pointer items-start gap-3",
+  switchInput: "sr-only",
+  switchTrack: cn(
+    "relative mt-0.5 inline-flex h-6 w-10 shrink-0 items-center rounded-full border border-border bg-muted focus-within:border-primary/35",
+    motionBase
+  ),
+  switchThumb: cn(
+    "h-4 w-4 translate-x-1 rounded-full bg-background shadow-sm",
+    motionTransform
+  ),
+  switchChecked: "border-primary/40 bg-primary/80 text-primary-foreground",
+  switchDisabled: "!cursor-not-allowed opacity-60",
+  switchContent: "grid min-w-0 gap-1",
+  switchLabel: "text-sm font-medium leading-none text-foreground",
+  switchDescription: "text-sm leading-5 text-muted-foreground",
+  checkboxRoot: "inline-flex min-w-0 cursor-pointer items-start gap-3",
+  checkboxInput: "sr-only",
+  checkboxBox: cn(
+    "mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded border border-border bg-background text-primary focus-within:border-primary/40",
+    motionBase
+  ),
+  checkboxBoxChecked: "border-primary/45 bg-primary text-primary-foreground",
+  checkboxBoxInvalid: "border-destructive/50",
+  checkboxIndicator: "text-[11px] font-bold leading-none",
+  checkboxDisabled: "!cursor-not-allowed opacity-60",
+  checkboxContent: "grid min-w-0 gap-1",
+  checkboxLabel: "text-sm font-medium leading-none text-foreground",
+  checkboxDescription: "text-sm leading-5 text-muted-foreground",
+  radioGroupRoot: "grid min-w-0 gap-2",
+  radioOption: cn(
+    "inline-flex min-w-0 cursor-pointer items-start gap-3 rounded-md border border-border/60 bg-background px-3 py-2 text-sm",
+    motionInteractive,
+    "hover:bg-muted/35"
+  ),
+  radioInput: "sr-only",
+  radioMarker: cn(
+    "mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border bg-background text-primary focus-within:border-primary/40",
+    motionBase
+  ),
+  radioMarkerChecked: "border-primary/50 bg-primary/10",
+  radioIndicator: "h-2 w-2 rounded-full bg-primary",
+  radioOptionDisabled: "!cursor-not-allowed opacity-60 hover:bg-background",
+  radioContent: "grid min-w-0 gap-1",
+  radioLabel: "text-sm font-medium leading-none text-foreground",
+  radioDescription: "text-sm leading-5 text-muted-foreground",
+  dialogRoot: "relative",
+  dialogTrigger: "",
+  dialogTriggerDisabled: "!cursor-not-allowed opacity-60",
+  dialogOverlay: "fixed inset-0 z-50 bg-background/70 backdrop-blur-sm motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  dialogContent: "fixed inset-0 z-50 flex min-h-0 items-center justify-center p-4",
+  dialogPanel: cn(
+    "relative flex max-h-[min(85vh,720px)] w-full max-w-lg min-w-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background text-foreground shadow-xl",
+    "motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-out"
+  ),
+  dialogHeader: "grid min-w-0 gap-1 border-b border-border/60 px-5 py-4",
+  dialogTitle: "min-w-0 pr-8 text-base font-semibold leading-6 text-foreground",
+  dialogDescription: "text-sm leading-6 text-muted-foreground",
+  dialogBody: "min-h-0 min-w-0 overflow-auto px-5 py-4 text-sm text-foreground",
+  dialogFooter: "flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border/60 px-5 py-4",
+  dialogClose: cn(
+    "absolute right-3 top-3 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    motionInteractive
+  ),
+  dropdownRoot: "relative inline-flex min-w-0",
+  dropdownTrigger: "",
+  dropdownTriggerDisabled: "!cursor-not-allowed opacity-60",
+  dropdownMenu: "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-48 overflow-hidden rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  dropdownMenuTop: "bottom-[calc(100%+0.375rem)] top-auto",
+  dropdownMenuEnd: "left-auto right-0",
+  dropdownLabel: "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground",
+  dropdownSeparator: "my-1 h-px bg-border/70",
+  dropdownItem: cn(
+    "flex min-w-0 cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-left text-sm text-foreground hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    motionInteractive
+  ),
+  dropdownItemDanger: "text-destructive hover:bg-destructive/10",
+  dropdownItemDisabled: "!cursor-not-allowed opacity-50 hover:bg-transparent",
+  dropdownItemIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+  dropdownItemContent: "grid min-w-0 flex-1 gap-0.5",
+  dropdownItemLabel: "min-w-0 truncate",
+  dropdownItemDescription: "min-w-0 truncate text-xs leading-4 text-muted-foreground",
+  dropdownItemShortcut: "ml-3 shrink-0 text-xs font-medium text-muted-foreground",
+  tooltipRoot: "relative inline-flex min-w-0",
+  tooltipTrigger: "inline-flex min-w-0",
+  tooltipContent: "pointer-events-none absolute z-50 max-w-xs rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs leading-5 text-popover-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  noticeBase: cn(
+    "flex min-w-0 gap-3 rounded-lg border px-4 py-3 text-sm",
+    motionBase,
+    "motion-safe:animate-in motion-safe:fade-in"
+  ),
+  noticeDefault: "border-border bg-background text-foreground",
+  noticePrimary: "border-primary/25 bg-primary/10 text-primary",
+  noticeSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700",
+  noticeWarning: "border-amber-500/30 bg-amber-500/10 text-amber-700",
+  noticeDanger: "border-destructive/30 bg-destructive/10 text-destructive",
+  noticeMuted: "border-border/60 bg-muted/35 text-muted-foreground",
+  noticeIcon: "mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center motion-safe:animate-in motion-safe:fade-in",
+  noticeTitle: "font-semibold leading-5",
+  noticeDescription: "leading-6",
+  noticeActions: "mt-3 flex flex-wrap items-center gap-2",
+  dividerRoot: cn("shrink-0 border-border/70", motionBase),
+  dividerLabel: "mx-3 shrink-0 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground motion-safe:animate-in motion-safe:fade-in",
+  sectionHeaderRoot: "flex min-w-0 flex-wrap items-start justify-between gap-3 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  sectionHeaderContent: "grid min-w-0 gap-1",
+  sectionHeaderEyebrow: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground",
+  sectionHeaderTitle: "text-base font-semibold leading-6 text-foreground",
+  sectionHeaderDescription: "max-w-2xl text-sm leading-6 text-muted-foreground",
+  sectionHeaderActions: "flex shrink-0 flex-wrap items-center gap-2",
+  tabsRoot: "grid min-w-0 gap-3",
+  tabsList: cn(
+    "inline-flex min-w-0 flex-wrap items-center gap-1 rounded-lg border border-border/70 bg-muted/30 p-1",
+    motionBase
+  ),
+  tabsTrigger: cn(
+    "inline-flex min-w-0 cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-background/70 hover:text-foreground focus-visible:outline-none",
+    motionInteractive
+  ),
+  tabsTriggerActive: "bg-background text-foreground shadow-sm",
+  tabsTriggerDisabled: "!cursor-not-allowed opacity-50 hover:bg-transparent",
+  tabsPanel: "min-w-0 rounded-lg border border-border/70 bg-background p-4 text-sm text-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  segmentedRoot: cn(
+    "inline-flex min-w-0 items-center gap-1 rounded-lg border border-border/70 bg-muted/30 p-1",
+    motionBase
+  ),
+  segmentedItem: cn(
+    "inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-background/70 hover:text-foreground focus-visible:outline-none",
+    motionInteractive
+  ),
+  segmentedItemActive: "bg-background text-foreground shadow-sm",
+  segmentedItemDisabled: "!cursor-not-allowed opacity-50 hover:bg-transparent",
+  progressRoot: "grid min-w-0 gap-2",
+  progressTrack: "h-2 w-full overflow-hidden rounded-full bg-muted",
+  progressIndicator: "h-full rounded-full bg-primary motion-safe:transition-[width] motion-safe:duration-500 motion-safe:ease-out",
+  progressLabelRow: "flex min-w-0 items-center justify-between gap-3",
+  progressLabel: "min-w-0 truncate text-sm font-medium text-foreground",
+  progressValue: "shrink-0 text-xs font-medium text-muted-foreground",
+  skeletonRoot: "relative overflow-hidden rounded-md bg-muted/70",
+  avatarRoot: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-muted text-sm font-semibold text-muted-foreground motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  avatarImage: "h-full w-full object-cover",
+  avatarFallback: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground",
+  avatarStatus: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-muted-foreground motion-safe:animate-pulse",
+  avatarText: "min-w-0 truncate text-sm font-medium text-foreground",
+  toolbarRoot: cn(
+    "flex min-w-0 flex-wrap items-center justify-between gap-3 rounded-lg border border-border/70 bg-background px-4 py-3",
+    motionBase
+  ),
+  toolbarLeading: "flex min-w-0 items-center gap-3",
+  toolbarTitle: "min-w-0 truncate text-sm font-semibold text-foreground",
+  toolbarDescription: "mt-0.5 text-sm leading-5 text-muted-foreground",
+  toolbarContent: "min-w-0 flex-1",
+  toolbarActions: "flex shrink-0 flex-wrap items-center gap-2",
+  breadcrumbRoot: "min-w-0 text-sm text-muted-foreground",
+  breadcrumbList: "flex min-w-0 flex-wrap items-center gap-1.5",
+  breadcrumbItem: "inline-flex min-w-0 items-center gap-1.5",
+  breadcrumbLink: "min-w-0 cursor-pointer truncate text-muted-foreground hover:text-foreground disabled:!cursor-not-allowed disabled:opacity-50 aria-disabled:!cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:text-muted-foreground motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  breadcrumbCurrent: "min-w-0 truncate font-medium text-foreground",
+  breadcrumbSeparator: "shrink-0 text-muted-foreground/70",
+  paginationRoot: "flex min-w-0 flex-wrap items-center justify-between gap-3 text-sm",
+  paginationInfo: "min-w-0 text-muted-foreground",
+  paginationControls: "flex shrink-0 items-center gap-1.5",
+  paginationButton: "inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-md border border-border bg-background px-2.5 text-sm font-medium text-foreground hover:bg-accent/60 disabled:!cursor-not-allowed disabled:opacity-50 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  paginationButtonDisabled: "!cursor-not-allowed opacity-50",
+  paginationPage: "inline-flex h-8 min-w-8 items-center justify-center rounded-md bg-muted/50 px-2.5 text-sm font-medium text-foreground",
+  descriptionListRoot: "grid min-w-0 gap-3 text-sm",
+  descriptionListItem: "grid min-w-0 gap-1 rounded-md border border-border/60 bg-background px-3 py-2 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out hover:shadow-sm",
+  descriptionListTerm: "min-w-0 truncate text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground",
+  descriptionListValue: "min-w-0 text-sm leading-6 text-foreground",
+  accordionRoot: "grid min-w-0 gap-2",
+  accordionItem: "overflow-hidden rounded-lg border border-border/70 bg-background motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  accordionTrigger: "flex w-full min-w-0 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium text-foreground hover:bg-muted/40 disabled:!cursor-not-allowed disabled:opacity-50 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  accordionTriggerIcon: cn(
+    "h-2 w-2 shrink-0 rotate-45 border-b border-r border-current text-muted-foreground",
+    motionTransform
+  ),
+  accordionPanel: "border-t border-border/60 px-4 py-3 text-sm leading-6 text-muted-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  menuTrigger: "inline-flex min-w-0",
+  menuContent: "z-50 min-w-44 overflow-hidden rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg outline-none motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-out",
+  menuLabel: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+  menuSeparator: "-mx-1 my-1 h-px bg-border",
+  menuItem: cn(
+    "relative flex min-h-8 min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:!cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+    motionInteractive
+  ),
+  menuItemDefault: "text-foreground",
+  menuItemPrimary: "text-primary focus:text-primary data-[highlighted]:text-primary",
+  menuItemSuccess: "text-emerald-700 focus:text-emerald-700 data-[highlighted]:text-emerald-700",
+  menuItemWarning: "text-amber-700 focus:text-amber-700 data-[highlighted]:text-amber-700",
+  menuItemDanger: "text-destructive focus:text-destructive data-[highlighted]:text-destructive",
+  menuItemMuted: "text-muted-foreground focus:text-foreground data-[highlighted]:text-foreground",
+  menuItemDisabled: "!cursor-not-allowed opacity-50 data-[disabled]:pointer-events-none",
+  menuItemIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+  menuItemLabel: "min-w-0 flex-1 truncate",
+  menuItemShortcut: "ml-4 shrink-0 text-xs font-medium text-muted-foreground",
+  menuCheckboxIndicator: "absolute left-2 inline-flex h-4 w-4 items-center justify-center text-current",
+  menuRadioIndicator: "absolute left-2 inline-flex h-4 w-4 items-center justify-center text-current",
+  menuSubTrigger: cn(
+    "relative flex min-h-8 min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:!cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+    motionInteractive
+  ),
+  menuSubTriggerIcon: "ml-auto inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground",
+  menuSubContent: "z-50 min-w-40 overflow-hidden rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg outline-none motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-out",
+  tableContainer: cn(
+    "relative min-w-0 overflow-auto rounded-lg border border-border/70 bg-background",
+    motionBase
+  ),
+  tableContainerFooterAttached: "!rounded-b-none !shadow-none",
+  tableRoot: "w-full caption-bottom border-collapse text-sm text-foreground",
+  tableCaption: "mt-3 text-sm text-muted-foreground",
+  tableHeader: "border-b border-border/70 bg-muted/35",
+  tableBody: "[&_tr:last-child]:border-0",
+  tableFooter: "border-t border-border/70 bg-muted/30 font-medium",
+  tableFooterBar: cn(
+    "flex min-w-0 flex-wrap items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-3 text-sm text-muted-foreground shadow-none",
+    motionBase
+  ),
+  tableFooterBarAttached: "-mt-px rounded-t-none border-t border-border/70 shadow-none",
+  tableFooterBarLeading: "flex min-w-0 items-center gap-2",
+  tableFooterBarContent: "min-w-0 flex-1",
+  tableFooterBarActions: "ml-auto flex shrink-0 flex-wrap items-center gap-2",
+  tableRow: cn(
+    "border-b border-border/60 data-[state=selected]:bg-primary/5",
+    motionBase
+  ),
+  tableRowInteractive: "cursor-pointer hover:bg-muted/35",
+  tableRowSelected: "bg-primary/5",
+  tableRowDisabled: "!cursor-not-allowed opacity-60",
+  tableHead: "relative h-11 whitespace-nowrap px-3 py-2 text-left align-middle text-xs font-semibold text-muted-foreground",
+  tableHeadContent: "flex min-w-0 items-center justify-between gap-2",
+  tableHeadMain: "flex min-w-0 items-center gap-2",
+  tableHeadIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground",
+  tableHeadText: "grid min-w-0 gap-0.5",
+  tableHeadLabel: "min-w-0 truncate text-xs font-semibold leading-4 text-foreground",
+  tableHeadDescription: "min-w-0 truncate text-[11px] font-normal leading-4 text-muted-foreground",
+  tableHeadMeta: "shrink-0 text-[11px] font-medium text-muted-foreground",
+  tableHeadActions: "flex shrink-0 items-center gap-1",
+  tableHeadSortButton: cn(
+    "inline-flex min-w-0 cursor-pointer items-center gap-1 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed disabled:opacity-60",
+    motionBase
+  ),
+  tableHeadSortIcon: cn(
+    "inline-flex h-3 w-3 shrink-0 items-center justify-center text-muted-foreground",
+    motionTransform
+  ),
+  tableHeadDragHandle: cn(
+    "inline-flex h-5 w-4 shrink-0 cursor-grab items-center justify-center rounded-sm text-muted-foreground hover:bg-muted active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed disabled:opacity-50",
+    motionBase
+  ),
+  tableHeadResizeHandle: "absolute right-0 top-1/2 h-7 w-2 -translate-y-1/2 cursor-col-resize rounded-sm after:absolute after:left-1/2 after:top-1/2 after:h-5 after:w-px after:-translate-x-1/2 after:-translate-y-1/2 after:bg-border hover:after:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed disabled:opacity-50",
+  tableCell: "px-3 py-2 align-middle text-sm text-foreground",
+  tableCellAlignCenter: "text-center",
+  tableCellAlignRight: "text-right",
+  tableEmptyRow: "border-b border-border/60",
+  tableEmptyCell: "px-4 py-10 text-center",
+  tableEmptyContent: "mx-auto flex max-w-md flex-col items-center justify-center text-center",
+  tableEmptyIcon: "mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-muted text-muted-foreground",
+  tableEmptyTitle: "text-sm font-semibold text-foreground",
+  tableEmptyDescription: "mt-1 text-sm leading-6 text-muted-foreground",
+  tableEmptyActions: "mt-4 flex flex-wrap items-center justify-center gap-2",
+  tableLoadingRow: "border-b border-border/60",
+  tableLoadingCell: "px-3 py-2",
+  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70",
+  layoutRoot: cn(
+    "grid min-w-0 overflow-hidden grid-rows-[auto_minmax(0,1fr)_auto] gap-3 rounded-lg border border-border/70 bg-background p-3 text-foreground",
+    motionBase
+  ),
+  layoutRootFull: "h-full min-h-0",
+  layoutHeader: "min-w-0",
+  layoutBody: "grid min-h-0 min-w-0 overflow-hidden gap-3",
+  layoutSidebar: "min-h-0 min-w-0 overflow-hidden",
+  layoutMain: "min-h-0 min-w-0 overflow-hidden",
+  layoutAside: "min-h-0 min-w-0 overflow-hidden",
+  layoutFooter: "min-w-0",
+  layoutPane: cn(
+    "h-full max-h-full min-h-0 min-w-0 overflow-hidden rounded-lg bg-background text-foreground",
+    motionBase
+  ),
+  layoutPaneScrollable: "overflow-auto",
+  layoutPaneBordered: "border border-border/70",
+  layoutPaneMuted: "bg-muted/25",
+  layoutPaneSoft: "bg-background/95 shadow-sm",
+  layoutPaneTransparent: "bg-transparent shadow-none",
+  layoutSplitRoot: "grid min-h-0 min-w-0 overflow-hidden",
+  layoutSplitHorizontal: "grid-flow-col",
+  layoutSplitVertical: "grid-flow-row",
+  layoutSplitPane: "min-h-0 min-w-0 overflow-hidden",
+  layoutSplitPrimary: "",
+  layoutSplitSecondary: "",
+  layoutResizeHandle: cn(
+    "group/resize relative z-10 flex shrink-0 items-center justify-center bg-transparent text-muted-foreground hover:bg-border/60 active:bg-border/70 focus-visible:bg-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    motionInteractive
+  ),
+  layoutResizeHandleHorizontal: "w-2 cursor-col-resize",
+  layoutResizeHandleVertical: "h-2 cursor-row-resize",
+  layoutResizeHandleDisabled: "cursor-default opacity-60",
+  layoutResizeHandleIndicator: "rounded-full bg-muted-foreground/45 group-hover/resize:bg-primary/70"
+};
+var densitySlots = {
+  compact: {
+    buttonBase: "h-8 px-2.5 text-xs",
+    buttonIconOnly: "h-8 w-8 px-0",
+    badgeBase: "px-1.5 py-0 text-[11px]",
+    panelHeader: "p-3",
+    panelBody: "px-3 pb-3 text-xs",
+    panelBodyStandalone: "pt-3",
+    panelFooter: "px-3 py-2",
+    stateRoot: "min-h-36 px-4 py-7",
+    stateIcon: "mb-3 h-10 w-10",
+    fieldRoot: "gap-1.5",
+    fieldLabel: "text-xs",
+    fieldDescription: "text-xs leading-5",
+    fieldMessage: "text-xs leading-5",
+    controlInput: "h-8 text-xs",
+    controlTextarea: "min-h-20 text-xs",
+    controlSelect: "h-8 text-xs",
+    selectMenu: "text-xs",
+    selectOption: "min-h-7 px-2 py-1 text-xs",
+    switchTrack: "h-5 w-9",
+    switchThumb: "h-3.5 w-3.5",
+    checkboxBox: "h-3.5 w-3.5",
+    checkboxLabel: "text-xs",
+    checkboxDescription: "text-xs leading-5",
+    radioOption: "px-2 py-1.5 text-xs",
+    radioMarker: "h-3.5 w-3.5",
+    radioIndicator: "h-1.5 w-1.5",
+    radioLabel: "text-xs",
+    radioDescription: "text-xs leading-5",
+    dialogPanel: "max-w-md",
+    dialogHeader: "px-4 py-3",
+    dialogTitle: "text-sm leading-5",
+    dialogDescription: "text-xs leading-5",
+    dialogBody: "px-4 py-3 text-xs",
+    dialogFooter: "px-4 py-3",
+    dropdownMenu: "min-w-44 text-xs",
+    dropdownItem: "px-2 py-1.5 text-xs",
+    tooltipContent: "text-[11px] leading-4",
+    noticeBase: "px-3 py-2 text-xs",
+    dividerLabel: "text-[11px]",
+    sectionHeaderRoot: "gap-2",
+    sectionHeaderTitle: "text-sm leading-5",
+    sectionHeaderDescription: "text-xs leading-5",
+    tabsList: "gap-0.5 p-0.5",
+    tabsTrigger: "px-2 py-1 text-xs",
+    tabsPanel: "p-3 text-xs",
+    segmentedRoot: "gap-0.5 p-0.5",
+    segmentedItem: "px-2 py-1 text-xs",
+    progressTrack: "h-1.5",
+    avatarRoot: "text-xs",
+    toolbarRoot: "gap-2 px-3 py-2",
+    toolbarTitle: "text-xs",
+    toolbarDescription: "text-xs leading-5",
+    paginationButton: "h-7 min-w-7 px-2 text-xs",
+    paginationPage: "h-7 min-w-7 px-2 text-xs",
+    descriptionListRoot: "gap-2 text-xs",
+    descriptionListItem: "px-2 py-1.5",
+    descriptionListTerm: "text-[11px]",
+    descriptionListValue: "text-xs leading-5",
+    accordionTrigger: "px-3 py-2 text-xs",
+    accordionPanel: "px-3 py-2 text-xs leading-5",
+    menuContent: "min-w-40 p-0.5 text-xs",
+    menuSubContent: "min-w-36 p-0.5 text-xs",
+    menuLabel: "px-2 py-1 text-[11px]",
+    menuItem: "min-h-7 px-2 py-1 text-xs",
+    menuSubTrigger: "min-h-7 px-2 py-1 text-xs",
+    menuItemShortcut: "text-[11px]",
+    tableHead: "h-9 px-2 py-1.5 text-[11px]",
+    tableCell: "px-2 py-1.5 text-xs",
+    tableHeadLabel: "text-[11px]",
+    tableHeadDescription: "text-[10px] leading-3",
+    tableLoadingCell: "px-2 py-1.5",
+    layoutRoot: "gap-2 p-2",
+    layoutBody: "gap-2",
+    layoutPane: "rounded-md text-xs",
+    layoutResizeHandleHorizontal: "w-1.5",
+    layoutResizeHandleVertical: "h-1.5"
+  },
+  default: {
+    buttonBase: "h-9"
+  },
+  comfortable: {
+    buttonBase: "h-10 px-3.5",
+    buttonIconOnly: "h-10 w-10 px-0",
+    badgeBase: "px-2.5 py-1",
+    panelHeader: "p-5",
+    panelBody: "px-5 pb-5",
+    panelBodyStandalone: "pt-5",
+    panelFooter: "px-5 py-3.5",
+    stateRoot: "min-h-56 px-8 py-12",
+    stateIcon: "mb-5 h-14 w-14",
+    fieldRoot: "gap-2.5",
+    controlInput: "h-10",
+    controlTextarea: "min-h-28",
+    controlSelect: "h-10",
+    selectMenu: "p-1.5",
+    selectOption: "min-h-9 px-3 py-2",
+    switchTrack: "h-7 w-12",
+    switchThumb: "h-5 w-5",
+    checkboxBox: "h-5 w-5",
+    radioOption: "px-4 py-3",
+    radioMarker: "h-5 w-5",
+    radioIndicator: "h-2.5 w-2.5",
+    dialogPanel: "max-w-xl",
+    dialogHeader: "px-6 py-5",
+    dialogBody: "px-6 py-5",
+    dialogFooter: "px-6 py-5",
+    dropdownMenu: "min-w-56",
+    dropdownItem: "px-3 py-2.5",
+    noticeBase: "px-5 py-4",
+    sectionHeaderTitle: "text-lg leading-7",
+    tabsTrigger: "px-3.5 py-2",
+    tabsPanel: "p-5",
+    segmentedItem: "px-3.5 py-2",
+    progressTrack: "h-2.5",
+    toolbarRoot: "px-5 py-4",
+    paginationButton: "h-9 min-w-9 px-3",
+    paginationPage: "h-9 min-w-9 px-3",
+    descriptionListItem: "px-4 py-3",
+    accordionTrigger: "px-5 py-4",
+    accordionPanel: "px-5 py-4",
+    menuContent: "min-w-48 p-1.5",
+    menuSubContent: "min-w-44 p-1.5",
+    menuItem: "min-h-9 px-3 py-2",
+    menuSubTrigger: "min-h-9 px-3 py-2",
+    tableHead: "h-12 px-4 py-3",
+    tableCell: "px-4 py-3",
+    tableLoadingCell: "px-4 py-3",
+    layoutRoot: "gap-4 p-4",
+    layoutBody: "gap-4",
+    layoutPane: "rounded-xl",
+    layoutResizeHandleHorizontal: "w-2.5",
+    layoutResizeHandleVertical: "h-2.5"
+  }
+};
+var radiusSlots = {
+  none: {
+    buttonBase: "rounded-none",
+    badgeBase: "rounded-none",
+    panelRoot: "rounded-none",
+    stateRoot: "rounded-none",
+    stateIcon: "rounded-none",
+    controlWrapper: "rounded-none",
+    selectMenu: "rounded-none",
+    selectOption: "rounded-none",
+    switchTrack: "rounded-none",
+    switchThumb: "rounded-none",
+    checkboxBox: "rounded-none",
+    radioOption: "rounded-none",
+    dialogPanel: "rounded-none",
+    dialogClose: "rounded-none",
+    dropdownMenu: "rounded-none",
+    dropdownItem: "rounded-none",
+    tooltipContent: "rounded-none",
+    noticeBase: "rounded-none",
+    tabsList: "rounded-none",
+    tabsTrigger: "rounded-none",
+    tabsPanel: "rounded-none",
+    segmentedRoot: "rounded-none",
+    segmentedItem: "rounded-none",
+    progressTrack: "rounded-none",
+    progressIndicator: "rounded-none",
+    skeletonRoot: "rounded-none",
+    avatarRoot: "rounded-none",
+    avatarStatus: "rounded-none",
+    toolbarRoot: "rounded-none",
+    paginationButton: "rounded-none",
+    paginationPage: "rounded-none",
+    descriptionListItem: "rounded-none",
+    accordionItem: "rounded-none",
+    menuContent: "rounded-none",
+    menuItem: "rounded-none",
+    menuSubTrigger: "rounded-none",
+    menuSubContent: "rounded-none",
+    tableContainer: "rounded-none",
+    tableEmptyIcon: "rounded-none",
+    tableLoadingSkeleton: "rounded-none",
+    layoutRoot: "rounded-none",
+    layoutPane: "rounded-none"
+  },
+  sm: {
+    buttonBase: "rounded-sm",
+    badgeBase: "rounded-sm",
+    panelRoot: "rounded-sm",
+    stateRoot: "rounded-sm",
+    stateIcon: "rounded-sm",
+    controlWrapper: "rounded-sm",
+    selectMenu: "rounded-sm",
+    selectOption: "rounded-sm",
+    switchTrack: "rounded-sm",
+    switchThumb: "rounded-sm",
+    checkboxBox: "rounded-sm",
+    radioOption: "rounded-sm",
+    dialogPanel: "rounded-sm",
+    dialogClose: "rounded-sm",
+    dropdownMenu: "rounded-sm",
+    dropdownItem: "rounded-sm",
+    tooltipContent: "rounded-sm",
+    noticeBase: "rounded-sm",
+    tabsList: "rounded-sm",
+    tabsTrigger: "rounded-sm",
+    tabsPanel: "rounded-sm",
+    segmentedRoot: "rounded-sm",
+    segmentedItem: "rounded-sm",
+    progressTrack: "rounded-sm",
+    progressIndicator: "rounded-sm",
+    skeletonRoot: "rounded-sm",
+    avatarRoot: "rounded-sm",
+    avatarStatus: "rounded-sm",
+    toolbarRoot: "rounded-sm",
+    paginationButton: "rounded-sm",
+    paginationPage: "rounded-sm",
+    descriptionListItem: "rounded-sm",
+    accordionItem: "rounded-sm",
+    menuContent: "rounded-sm",
+    menuItem: "rounded-sm",
+    menuSubTrigger: "rounded-sm",
+    menuSubContent: "rounded-sm",
+    tableContainer: "rounded-sm",
+    tableEmptyIcon: "rounded-sm",
+    tableLoadingSkeleton: "rounded-sm",
+    layoutRoot: "rounded-sm",
+    layoutPane: "rounded-sm"
+  },
+  md: {},
+  lg: {
+    buttonBase: "rounded-lg",
+    badgeBase: "rounded-lg",
+    panelRoot: "rounded-xl",
+    stateRoot: "rounded-xl",
+    stateIcon: "rounded-xl",
+    controlWrapper: "rounded-lg",
+    selectMenu: "rounded-lg",
+    selectOption: "rounded-md",
+    switchTrack: "rounded-full",
+    switchThumb: "rounded-full",
+    checkboxBox: "rounded-md",
+    radioOption: "rounded-xl",
+    dialogPanel: "rounded-xl",
+    dialogClose: "rounded-lg",
+    dropdownMenu: "rounded-lg",
+    dropdownItem: "rounded-md",
+    tooltipContent: "rounded-md",
+    noticeBase: "rounded-xl",
+    tabsList: "rounded-xl",
+    tabsTrigger: "rounded-lg",
+    tabsPanel: "rounded-xl",
+    segmentedRoot: "rounded-xl",
+    segmentedItem: "rounded-lg",
+    skeletonRoot: "rounded-lg",
+    toolbarRoot: "rounded-xl",
+    descriptionListItem: "rounded-lg",
+    accordionItem: "rounded-xl",
+    menuContent: "rounded-lg",
+    menuItem: "rounded-md",
+    menuSubTrigger: "rounded-md",
+    menuSubContent: "rounded-lg",
+    tableContainer: "rounded-xl",
+    tableEmptyIcon: "rounded-xl",
+    tableLoadingSkeleton: "rounded-lg",
+    layoutRoot: "rounded-xl",
+    layoutPane: "rounded-xl"
+  },
+  xl: {
+    buttonBase: "rounded-xl",
+    badgeBase: "rounded-xl",
+    panelRoot: "rounded-2xl",
+    stateRoot: "rounded-2xl",
+    stateIcon: "rounded-2xl",
+    controlWrapper: "rounded-xl",
+    selectMenu: "rounded-xl",
+    selectOption: "rounded-lg",
+    switchTrack: "rounded-full",
+    switchThumb: "rounded-full",
+    checkboxBox: "rounded-lg",
+    radioOption: "rounded-2xl",
+    dialogPanel: "rounded-2xl",
+    dialogClose: "rounded-xl",
+    dropdownMenu: "rounded-xl",
+    dropdownItem: "rounded-lg",
+    tooltipContent: "rounded-lg",
+    noticeBase: "rounded-2xl",
+    tabsList: "rounded-2xl",
+    tabsTrigger: "rounded-xl",
+    tabsPanel: "rounded-2xl",
+    segmentedRoot: "rounded-2xl",
+    segmentedItem: "rounded-xl",
+    skeletonRoot: "rounded-xl",
+    toolbarRoot: "rounded-2xl",
+    paginationButton: "rounded-xl",
+    paginationPage: "rounded-xl",
+    descriptionListItem: "rounded-xl",
+    accordionItem: "rounded-2xl",
+    menuContent: "rounded-xl",
+    menuItem: "rounded-lg",
+    menuSubTrigger: "rounded-lg",
+    menuSubContent: "rounded-xl",
+    tableContainer: "rounded-2xl",
+    tableEmptyIcon: "rounded-2xl",
+    tableLoadingSkeleton: "rounded-xl",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
+  },
+  full: {
+    buttonBase: "rounded-full",
+    badgeBase: "rounded-full",
+    panelRoot: "rounded-2xl",
+    stateRoot: "rounded-2xl",
+    stateIcon: "rounded-full",
+    controlWrapper: "rounded-full",
+    selectMenu: "rounded-2xl",
+    selectOption: "rounded-full",
+    switchTrack: "rounded-full",
+    switchThumb: "rounded-full",
+    checkboxBox: "rounded-full",
+    radioOption: "rounded-2xl",
+    dialogPanel: "rounded-2xl",
+    dialogClose: "rounded-full",
+    dropdownMenu: "rounded-2xl",
+    dropdownItem: "rounded-full",
+    tooltipContent: "rounded-full",
+    noticeBase: "rounded-2xl",
+    tabsList: "rounded-full",
+    tabsTrigger: "rounded-full",
+    tabsPanel: "rounded-2xl",
+    segmentedRoot: "rounded-full",
+    segmentedItem: "rounded-full",
+    progressTrack: "rounded-full",
+    progressIndicator: "rounded-full",
+    skeletonRoot: "rounded-full",
+    avatarRoot: "rounded-full",
+    avatarStatus: "rounded-full",
+    toolbarRoot: "rounded-2xl",
+    paginationButton: "rounded-full",
+    paginationPage: "rounded-full",
+    descriptionListItem: "rounded-2xl",
+    accordionItem: "rounded-2xl",
+    menuContent: "rounded-2xl",
+    menuItem: "rounded-full",
+    menuSubTrigger: "rounded-full",
+    menuSubContent: "rounded-2xl",
+    tableContainer: "rounded-2xl",
+    tableEmptyIcon: "rounded-full",
+    tableLoadingSkeleton: "rounded-full",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
+  }
+};
+var borderSlots = {
+  none: {
+    buttonBase: "border-transparent",
+    badgeBase: "border-transparent",
+    panelRoot: "border-transparent",
+    panelFooter: "border-transparent",
+    stateRoot: "border-transparent",
+    controlWrapper: "border-transparent",
+    selectMenu: "border-transparent",
+    switchTrack: "border-transparent",
+    checkboxBox: "border-transparent",
+    radioOption: "border-transparent",
+    radioMarker: "border-transparent",
+    dialogPanel: "border-transparent",
+    dialogHeader: "border-transparent",
+    dialogFooter: "border-transparent",
+    dropdownMenu: "border-transparent",
+    tooltipContent: "border-transparent",
+    noticeBase: "border-transparent",
+    dividerRoot: "border-transparent",
+    tabsList: "border-transparent",
+    tabsPanel: "border-transparent",
+    segmentedRoot: "border-transparent",
+    avatarRoot: "border-transparent",
+    toolbarRoot: "border-transparent",
+    paginationButton: "border-transparent",
+    descriptionListItem: "border-transparent",
+    accordionItem: "border-transparent",
+    accordionPanel: "border-transparent",
+    menuContent: "border-transparent",
+    menuSeparator: "bg-transparent",
+    menuSubContent: "border-transparent",
+    tableContainer: "border-transparent",
+    tableHeader: "border-transparent",
+    tableFooter: "border-transparent",
+    tableFooterBar: "border-transparent",
+    tableFooterBarAttached: "border-t border-transparent",
+    tableRow: "border-transparent",
+    tableEmptyRow: "border-transparent",
+    tableLoadingRow: "border-transparent",
+    layoutRoot: "border-transparent",
+    layoutPaneBordered: "border-transparent",
+    layoutResizeHandle: "bg-transparent hover:bg-transparent active:bg-transparent focus-visible:bg-transparent"
+  },
+  subtle: {
+    buttonDefault: "border-border/60",
+    badgeDefault: "border-border/60",
+    panelRoot: "border-border/60",
+    panelFooter: "border-border/60",
+    stateRoot: "border-border/60",
+    controlWrapper: "border-border/60",
+    selectMenu: "border-border/60",
+    switchTrack: "border-border/60",
+    checkboxBox: "border-border/60",
+    radioOption: "border-border/60",
+    radioMarker: "border-border/60",
+    dialogPanel: "border-border/60",
+    dialogHeader: "border-border/60",
+    dialogFooter: "border-border/60",
+    dropdownMenu: "border-border/60",
+    tooltipContent: "border-border/60",
+    noticeDefault: "border-border/60",
+    dividerRoot: "border-border/60",
+    tabsList: "border-border/60",
+    tabsPanel: "border-border/60",
+    segmentedRoot: "border-border/60",
+    avatarRoot: "border-border/60",
+    toolbarRoot: "border-border/60",
+    paginationButton: "border-border/60",
+    descriptionListItem: "border-border/60",
+    accordionItem: "border-border/60",
+    accordionPanel: "border-border/60",
+    menuContent: "border-border/60",
+    menuSeparator: "bg-border/60",
+    menuSubContent: "border-border/60",
+    tableContainer: "border-border/60",
+    tableHeader: "border-border/60",
+    tableFooter: "border-border/60",
+    tableFooterBar: "border-border/60",
+    tableFooterBarAttached: "border-t border-border/60",
+    tableRow: "border-border/50",
+    tableEmptyRow: "border-border/50",
+    tableLoadingRow: "border-border/50",
+    layoutRoot: "border-border/60",
+    layoutPaneBordered: "border-border/60"
+  },
+  solid: {},
+  strong: {
+    buttonDefault: "border-foreground/20",
+    badgeDefault: "border-foreground/20",
+    panelRoot: "border-foreground/20",
+    panelFooter: "border-foreground/20",
+    stateRoot: "border-foreground/20",
+    controlWrapper: "border-foreground/20",
+    selectMenu: "border-foreground/20",
+    switchTrack: "border-foreground/20",
+    checkboxBox: "border-foreground/20",
+    radioOption: "border-foreground/20",
+    radioMarker: "border-foreground/20",
+    dialogPanel: "border-foreground/20",
+    dialogHeader: "border-foreground/15",
+    dialogFooter: "border-foreground/15",
+    dropdownMenu: "border-foreground/20",
+    tooltipContent: "border-foreground/20",
+    noticeDefault: "border-foreground/20",
+    dividerRoot: "border-foreground/20",
+    tabsList: "border-foreground/20",
+    tabsPanel: "border-foreground/20",
+    segmentedRoot: "border-foreground/20",
+    avatarRoot: "border-foreground/20",
+    toolbarRoot: "border-foreground/20",
+    paginationButton: "border-foreground/20",
+    descriptionListItem: "border-foreground/20",
+    accordionItem: "border-foreground/20",
+    accordionPanel: "border-foreground/20",
+    menuContent: "border-foreground/20",
+    menuSeparator: "bg-foreground/15",
+    menuSubContent: "border-foreground/20",
+    tableContainer: "border-foreground/20",
+    tableHeader: "border-foreground/20",
+    tableFooter: "border-foreground/20",
+    tableFooterBar: "border-foreground/20",
+    tableFooterBarAttached: "border-t border-foreground/20",
+    tableRow: "border-foreground/15",
+    tableEmptyRow: "border-foreground/15",
+    tableLoadingRow: "border-foreground/15",
+    layoutRoot: "border-foreground/20",
+    layoutPaneBordered: "border-foreground/20",
+    layoutResizeHandle: "hover:bg-foreground/15 active:bg-foreground/20 focus-visible:bg-foreground/15"
+  }
+};
+var backgroundSlots = {
+  plain: {},
+  muted: {
+    buttonDefault: "bg-muted/20 hover:bg-muted/45",
+    panelRoot: "bg-card",
+    panelFooter: "bg-muted/20",
+    stateRoot: "bg-muted/20",
+    controlWrapper: "bg-background",
+    selectMenu: "bg-background",
+    selectOptionActive: "bg-muted/70 text-foreground",
+    checkboxBox: "bg-background",
+    radioOption: "bg-card hover:bg-muted/45",
+    radioMarker: "bg-background",
+    dialogPanel: "bg-card",
+    dropdownMenu: "bg-background",
+    dropdownItem: "hover:bg-muted/60",
+    tooltipContent: "bg-popover",
+    noticeDefault: "bg-muted/20",
+    tabsList: "bg-muted/35",
+    tabsTriggerActive: "bg-background",
+    tabsPanel: "bg-card",
+    segmentedRoot: "bg-muted/35",
+    segmentedItemActive: "bg-background",
+    progressTrack: "bg-muted/60",
+    skeletonRoot: "bg-muted",
+    toolbarRoot: "bg-card",
+    paginationButton: "bg-background hover:bg-muted/60",
+    paginationPage: "bg-muted/60",
+    descriptionListItem: "bg-card",
+    accordionItem: "bg-card",
+    menuContent: "bg-background",
+    menuItem: "focus:bg-muted/70 data-[highlighted]:bg-muted/70",
+    menuSubTrigger: "focus:bg-muted/70 data-[highlighted]:bg-muted/70 data-[state=open]:bg-muted/70",
+    menuSubContent: "bg-background",
+    tableContainer: "bg-card",
+    tableHeader: "bg-muted/45",
+    tableFooter: "bg-muted/35",
+    tableFooterBar: "bg-muted/30 shadow-none",
+    tableRowInteractive: "cursor-pointer hover:bg-muted/45",
+    tableLoadingSkeleton: "bg-muted",
+    layoutRoot: "bg-card",
+    layoutPane: "bg-card",
+    layoutPaneMuted: "bg-muted/35",
+    layoutResizeHandle: "hover:bg-border/70 active:bg-border/80 focus-visible:bg-border/70"
+  },
+  soft: {
+    buttonDefault: "bg-muted/30 hover:bg-muted/55",
+    panelRoot: "bg-background/95 shadow-sm",
+    stateRoot: "bg-background/95 shadow-sm",
+    controlWrapper: "bg-background/95",
+    selectMenu: "bg-background/95 shadow-xl",
+    selectOptionActive: "bg-muted/60 text-foreground",
+    checkboxBox: "bg-background/95",
+    radioOption: "bg-background/95 shadow-sm hover:bg-muted/35",
+    radioMarker: "bg-background/95",
+    dialogPanel: "bg-background/95 shadow-xl",
+    dropdownMenu: "bg-background/95 shadow-xl",
+    dropdownItem: "hover:bg-muted/55",
+    tooltipContent: "bg-popover shadow-xl",
+    noticeDefault: "bg-background/95 shadow-sm",
+    tabsList: "bg-background/60 shadow-sm",
+    tabsTriggerActive: "bg-background",
+    tabsPanel: "bg-background/95 shadow-sm",
+    segmentedRoot: "bg-background/60 shadow-sm",
+    segmentedItemActive: "bg-background",
+    skeletonRoot: "bg-background/80",
+    toolbarRoot: "bg-background/95 shadow-sm",
+    paginationButton: "bg-background/95 hover:bg-muted/55",
+    descriptionListItem: "bg-background/95 shadow-sm",
+    accordionItem: "bg-background/95 shadow-sm",
+    menuContent: "bg-background/95 shadow-xl",
+    menuItem: "focus:bg-muted/60 data-[highlighted]:bg-muted/60",
+    menuSubTrigger: "focus:bg-muted/60 data-[highlighted]:bg-muted/60 data-[state=open]:bg-muted/60",
+    menuSubContent: "bg-background/95 shadow-xl",
+    tableContainer: "bg-background/95 shadow-sm",
+    tableHeader: "bg-muted/35",
+    tableFooter: "bg-muted/25",
+    tableFooterBar: "bg-muted/25 shadow-none",
+    tableRowInteractive: "cursor-pointer hover:bg-muted/35",
+    tableLoadingSkeleton: "bg-muted/65",
+    layoutRoot: "bg-background/95 shadow-sm",
+    layoutPane: "bg-background/95 shadow-sm",
+    layoutPaneSoft: "bg-background/95 shadow-md"
+  },
+  glass: {
+    buttonBase: "backdrop-blur-md",
+    buttonDefault: "border-white/10 bg-white/[0.08] text-foreground hover:bg-white/[0.14]",
+    badgeDefault: "border-white/10 bg-white/[0.08] text-foreground",
+    panelRoot: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    panelFooter: "border-white/10 bg-white/[0.05]",
+    stateRoot: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    stateIcon: "bg-white/10 text-foreground",
+    controlWrapper: "border-white/10 bg-white/[0.08] text-foreground backdrop-blur-md",
+    selectMenu: "border-white/10 bg-white/[0.10] text-foreground shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-md",
+    selectOption: "text-foreground",
+    selectOptionActive: "bg-white/[0.14] text-foreground",
+    selectOptionSelected: "bg-white/[0.18] text-foreground",
+    switchTrack: "border-white/10 bg-white/[0.12] backdrop-blur-md",
+    checkboxBox: "border-white/10 bg-white/[0.08] backdrop-blur-md",
+    checkboxBoxChecked: "border-white/20 bg-white/[0.22] text-foreground",
+    radioOption: "border-white/10 bg-white/[0.06] backdrop-blur-md hover:bg-white/[0.10]",
+    radioMarker: "border-white/10 bg-white/[0.08] backdrop-blur-md",
+    radioMarkerChecked: "border-white/25 bg-white/[0.16]",
+    dialogOverlay: "bg-background/45 backdrop-blur-md",
+    dialogPanel: "border-white/10 bg-white/[0.08] shadow-2xl backdrop-blur-md",
+    dialogHeader: "border-white/10",
+    dialogFooter: "border-white/10",
+    dropdownMenu: "border-white/10 bg-white/[0.10] text-foreground shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-md",
+    dropdownItem: "text-foreground hover:bg-white/[0.14]",
+    tooltipContent: "border-white/10 bg-white/[0.14] text-foreground shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-md",
+    noticeDefault: "border-white/10 bg-white/[0.08] text-foreground backdrop-blur-md",
+    dividerRoot: "border-white/15",
+    tabsList: "border-white/10 bg-white/[0.08] backdrop-blur-md",
+    tabsTrigger: "text-muted-foreground hover:bg-white/[0.12] hover:text-foreground",
+    tabsTriggerActive: "bg-white/[0.16] text-foreground shadow-none",
+    tabsPanel: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    segmentedRoot: "border-white/10 bg-white/[0.08] backdrop-blur-md",
+    segmentedItem: "text-muted-foreground hover:bg-white/[0.12] hover:text-foreground",
+    segmentedItemActive: "bg-white/[0.16] text-foreground shadow-none",
+    progressTrack: "bg-white/[0.12]",
+    skeletonRoot: "bg-white/[0.16]",
+    avatarRoot: "border-white/10 bg-white/[0.12] text-foreground",
+    avatarFallback: "bg-white/[0.12] text-foreground",
+    avatarStatus: "border-background",
+    toolbarRoot: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    paginationButton: "border-white/10 bg-white/[0.08] text-foreground hover:bg-white/[0.14]",
+    paginationPage: "bg-white/[0.12] text-foreground",
+    descriptionListItem: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    accordionItem: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    accordionPanel: "border-white/10",
+    menuContent: "border-white/10 bg-white/[0.10] text-foreground shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-md",
+    menuSeparator: "bg-white/10",
+    menuItem: "text-foreground focus:bg-white/[0.14] focus:text-foreground data-[highlighted]:bg-white/[0.14] data-[highlighted]:text-foreground",
+    menuSubTrigger: "text-foreground focus:bg-white/[0.14] focus:text-foreground data-[highlighted]:bg-white/[0.14] data-[highlighted]:text-foreground data-[state=open]:bg-white/[0.16]",
+    menuSubContent: "border-white/10 bg-white/[0.10] text-foreground shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-md",
+    tableContainer: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    tableHeader: "border-white/10 bg-white/[0.08]",
+    tableFooter: "border-white/10 bg-white/[0.05]",
+    tableFooterBar: "border-white/10 bg-white/[0.05] shadow-none backdrop-blur-md",
+    tableFooterBarAttached: "border-t border-white/10",
+    tableRow: "border-white/10",
+    tableRowInteractive: "cursor-pointer hover:bg-white/[0.08]",
+    tableHeadLabel: "text-foreground",
+    tableLoadingSkeleton: "bg-white/[0.16]",
+    layoutRoot: "border-white/10 bg-white/[0.05] shadow-none backdrop-blur-md",
+    layoutPane: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    layoutPaneMuted: "bg-white/[0.08]",
+    layoutPaneSoft: "bg-white/[0.10] shadow-none backdrop-blur-md",
+    layoutResizeHandle: "text-foreground/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
+  },
+  dark: {
+    buttonBase: "border-white/15 text-white shadow-lg backdrop-blur",
+    buttonDefault: "bg-black/30 hover:bg-black/[0.45]",
+    buttonPrimary: "border-white/25 bg-white/20 text-white hover:bg-white/25",
+    buttonMuted: "border-white/10 bg-black/20 text-white/70 hover:bg-black/[0.35] hover:text-white",
+    badgeDefault: "border-white/10 bg-white/[0.08] text-white",
+    badgeMuted: "border-white/10 bg-black/20 text-white/70",
+    panelRoot: "border-white/10 bg-slate-950 text-white shadow-none",
+    panelTitle: "text-white",
+    panelDescription: "text-white/65",
+    panelBody: "text-white/85",
+    panelFooter: "border-white/10 bg-white/[0.04]",
+    stateRoot: "border-white/10 bg-slate-950 text-white shadow-none",
+    stateIcon: "bg-white/10 text-white/75",
+    stateTitle: "text-white",
+    stateDescription: "text-white/65",
+    fieldLabel: "text-white",
+    fieldDescription: "text-white/65",
+    fieldMessage: "text-white/65",
+    controlWrapper: "border-white/15 bg-black/30 text-white shadow-lg backdrop-blur focus-within:border-white/35",
+    controlBase: "text-white placeholder:text-white/45",
+    selectChevron: "text-white/65",
+    selectMenu: "border-white/15 bg-slate-950 text-white shadow-2xl",
+    selectOption: "text-white",
+    selectOptionActive: "bg-white/[0.12] text-white",
+    selectOptionSelected: "bg-white/[0.16] text-white",
+    selectPlaceholder: "text-white/45",
+    switchTrack: "border-white/15 bg-black/30 shadow-lg backdrop-blur",
+    switchChecked: "border-white/25 bg-white/25 text-white",
+    switchLabel: "text-white",
+    switchDescription: "text-white/65",
+    checkboxBox: "border-white/15 bg-black/30 text-white shadow-lg backdrop-blur",
+    checkboxBoxChecked: "border-white/25 bg-white/25 text-white",
+    checkboxLabel: "text-white",
+    checkboxDescription: "text-white/65",
+    radioOption: "border-white/10 bg-white/[0.06] text-white hover:bg-white/[0.08]",
+    radioMarker: "border-white/15 bg-black/30 text-white shadow-lg backdrop-blur",
+    radioMarkerChecked: "border-white/25 bg-white/25",
+    radioIndicator: "bg-white",
+    radioLabel: "text-white",
+    radioDescription: "text-white/65",
+    dialogOverlay: "bg-slate-950/75",
+    dialogPanel: "border-white/10 bg-slate-950 text-white shadow-2xl",
+    dialogHeader: "border-white/10",
+    dialogTitle: "text-white",
+    dialogDescription: "text-white/65",
+    dialogBody: "text-white/85",
+    dialogFooter: "border-white/10",
+    dialogClose: "text-white/65 hover:bg-white/[0.08] hover:text-white",
+    dropdownMenu: "border-white/15 bg-slate-950 text-white shadow-2xl",
+    dropdownLabel: "text-white/55",
+    dropdownSeparator: "bg-white/15",
+    dropdownItem: "text-white hover:bg-white/[0.10]",
+    dropdownItemDescription: "text-white/55",
+    dropdownItemShortcut: "text-white/55",
+    tooltipContent: "border-white/15 bg-slate-950 text-white shadow-2xl",
+    noticeDefault: "border-white/10 bg-white/[0.08] text-white",
+    noticeMuted: "border-white/10 bg-black/20 text-white/70",
+    dividerRoot: "border-white/15",
+    dividerLabel: "text-white/55",
+    sectionHeaderEyebrow: "text-white/55",
+    sectionHeaderTitle: "text-white",
+    sectionHeaderDescription: "text-white/65",
+    tabsList: "border-white/10 bg-white/[0.08]",
+    tabsTrigger: "text-white/65 hover:bg-white/[0.12] hover:text-white",
+    tabsTriggerActive: "bg-white/[0.16] text-white shadow-none",
+    tabsPanel: "border-white/10 bg-white/[0.06] text-white",
+    segmentedRoot: "border-white/10 bg-white/[0.08]",
+    segmentedItem: "text-white/65 hover:bg-white/[0.12] hover:text-white",
+    segmentedItemActive: "bg-white/[0.16] text-white shadow-none",
+    progressTrack: "bg-white/[0.12]",
+    progressLabel: "text-white",
+    progressValue: "text-white/65",
+    skeletonRoot: "bg-white/[0.14]",
+    avatarRoot: "border-white/15 bg-white/[0.10] text-white",
+    avatarFallback: "bg-white/[0.10] text-white/75",
+    avatarText: "text-white",
+    avatarStatus: "border-slate-950",
+    toolbarRoot: "border-white/10 bg-white/[0.06] text-white",
+    toolbarTitle: "text-white",
+    toolbarDescription: "text-white/65",
+    breadcrumbLink: "text-white/65 hover:text-white",
+    breadcrumbCurrent: "text-white",
+    breadcrumbSeparator: "text-white/45",
+    paginationInfo: "text-white/65",
+    paginationButton: "border-white/10 bg-white/[0.08] text-white hover:bg-white/[0.14]",
+    paginationPage: "bg-white/[0.14] text-white",
+    descriptionListItem: "border-white/10 bg-white/[0.06]",
+    descriptionListTerm: "text-white/55",
+    descriptionListValue: "text-white",
+    accordionItem: "border-white/10 bg-white/[0.06]",
+    accordionTrigger: "text-white hover:bg-white/[0.08]",
+    accordionPanel: "border-white/10 text-white/70",
+    tableContainer: "border-white/10 bg-slate-950 text-white shadow-none",
+    tableRoot: "text-white",
+    tableHeader: "border-white/10 bg-white/[0.06]",
+    tableFooter: "border-white/10 bg-white/[0.05]",
+    tableFooterBar: "border-white/10 bg-white/[0.05] text-white/65",
+    tableFooterBarAttached: "border-t border-white/10",
+    tableRow: "border-white/10",
+    tableRowInteractive: "cursor-pointer hover:bg-white/[0.06]",
+    tableHead: "text-white/65",
+    tableHeadLabel: "text-white",
+    tableHeadDescription: "text-white/55",
+    tableHeadMeta: "text-white/55",
+    tableHeadIcon: "text-white/55",
+    tableHeadSortIcon: "text-white/55",
+    tableHeadDragHandle: "text-white/55 hover:bg-white/[0.08]",
+    tableHeadResizeHandle: "after:bg-white/20 hover:after:bg-white/60",
+    tableCell: "text-white/85",
+    tableEmptyIcon: "bg-white/10 text-white/65",
+    tableEmptyTitle: "text-white",
+    tableEmptyDescription: "text-white/60",
+    menuContent: "border-white/10 bg-slate-950 text-white shadow-2xl",
+    menuLabel: "text-white/55",
+    menuSeparator: "bg-white/10",
+    menuItem: "text-white focus:bg-white/[0.10] focus:text-white data-[highlighted]:bg-white/[0.10] data-[highlighted]:text-white",
+    menuItemDefault: "text-white",
+    menuItemPrimary: "text-sky-200 focus:text-sky-200 data-[highlighted]:text-sky-200",
+    menuItemSuccess: "text-emerald-200 focus:text-emerald-200 data-[highlighted]:text-emerald-200",
+    menuItemWarning: "text-amber-200 focus:text-amber-200 data-[highlighted]:text-amber-200",
+    menuItemDanger: "text-red-200 focus:text-red-200 data-[highlighted]:text-red-200",
+    menuItemMuted: "text-white/65 focus:text-white data-[highlighted]:text-white",
+    menuItemShortcut: "text-white/45",
+    menuSubTrigger: "text-white focus:bg-white/[0.10] focus:text-white data-[highlighted]:bg-white/[0.10] data-[highlighted]:text-white data-[state=open]:bg-white/[0.12]",
+    menuSubTriggerIcon: "text-white/55",
+    menuSubContent: "border-white/10 bg-slate-950 text-white shadow-2xl",
+    tableLoadingSkeleton: "bg-white/[0.14]",
+    layoutRoot: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPane: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPaneMuted: "bg-white/[0.06]",
+    layoutPaneSoft: "bg-white/[0.08] shadow-none",
+    layoutResizeHandle: "text-white/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
+  }
+};
+var presetDefaults = {
+  default: {
+    density: "default",
+    radius: "md",
+    border: "solid",
+    background: "plain"
+  },
+  admin: {
+    density: "default",
+    radius: "lg",
+    border: "subtle",
+    background: "soft"
+  },
+  monkey: {
+    density: "compact",
+    radius: "md",
+    border: "subtle",
+    background: "muted"
+  },
+  bsd: {
+    density: "default",
+    radius: "lg",
+    border: "subtle",
+    background: "glass"
+  },
+  glass: {
+    density: "default",
+    radius: "xl",
+    border: "subtle",
+    background: "glass"
+  },
+  "hard-edge": {
+    density: "compact",
+    radius: "none",
+    border: "strong",
+    background: "plain"
+  }
+};
+var presetSlots = {
+  admin: {
+    buttonBase: "font-medium",
+    panelRoot: "border-border/70",
+    controlWrapper: "font-medium",
+    tabsTrigger: "font-medium",
+    segmentedItem: "font-medium",
+    toolbarRoot: "border-border/70",
+    tableContainer: "border-border/70",
+    tableFooterBar: "border-border/70",
+    tableHeadLabel: "font-semibold",
+    menuItemLabel: "font-medium"
+  },
+  monkey: {
+    buttonBase: "text-xs",
+    badgeBase: "text-[11px]",
+    fieldLabel: "text-xs",
+    controlBase: "text-xs",
+    selectOption: "text-xs",
+    menuItem: "text-xs",
+    menuSubTrigger: "text-xs",
+    noticeBase: "text-xs",
+    sectionHeaderTitle: "text-sm",
+    tabsTrigger: "text-xs",
+    segmentedItem: "text-xs",
+    toolbarTitle: "text-xs",
+    paginationRoot: "text-xs"
+  },
+  bsd: {
+    buttonPrimary: "border-sky-300/25 bg-sky-300/15 text-sky-50 hover:bg-sky-300/20",
+    badgePrimary: "border-sky-300/25 bg-sky-300/15 text-sky-50",
+    noticePrimary: "border-sky-300/25 bg-sky-300/15 text-sky-50",
+    progressIndicator: "bg-sky-300",
+    avatarStatus: "border-slate-950"
+  },
+  glass: {
+    panelRoot: "shadow-[0_24px_80px_rgba(15,23,42,0.12)]",
+    stateRoot: "shadow-[0_24px_80px_rgba(15,23,42,0.12)]",
+    noticeBase: "shadow-[0_18px_60px_rgba(15,23,42,0.10)]",
+    tabsPanel: "shadow-[0_18px_60px_rgba(15,23,42,0.10)]",
+    toolbarRoot: "shadow-[0_18px_60px_rgba(15,23,42,0.10)]",
+    descriptionListItem: "shadow-[0_12px_40px_rgba(15,23,42,0.08)]",
+    accordionItem: "shadow-[0_12px_40px_rgba(15,23,42,0.08)]"
+  },
+  "hard-edge": {
+    buttonBase: "shadow-none",
+    panelRoot: "shadow-none",
+    stateRoot: "shadow-none",
+    controlWrapper: "shadow-none",
+    selectMenu: "shadow-none",
+    menuContent: "shadow-none",
+    menuSubContent: "shadow-none",
+    noticeBase: "shadow-none",
+    tabsList: "shadow-none",
+    tabsTriggerActive: "shadow-none",
+    tabsPanel: "shadow-none",
+    segmentedRoot: "shadow-none",
+    segmentedItemActive: "shadow-none",
+    toolbarRoot: "shadow-none",
+    descriptionListItem: "shadow-none",
+    accordionItem: "shadow-none"
+  }
+};
+function getPresetDefaults(preset) {
+  return presetDefaults[preset] ?? presetDefaults.default;
+}
+var slotKeys = Object.keys(baseSlots);
+function mergeSlots(...sources) {
+  return slotKeys.reduce((resolved, key) => {
+    resolved[key] = cn(...sources.map((source) => source?.[key]));
+    return resolved;
+  }, {});
+}
+function mergeStyles(...styleSets) {
+  return Object.assign({}, ...styleSets.filter(Boolean));
+}
+function resolveBaseAppearance(appearance) {
+  const preset = appearance?.preset ?? "default";
+  const defaults = getPresetDefaults(preset);
+  const density = appearance?.density ?? defaults.density ?? "default";
+  const radius = appearance?.radius ?? defaults.radius ?? "md";
+  const border = appearance?.border ?? defaults.border ?? "solid";
+  const background = appearance?.background ?? defaults.background ?? "plain";
+  return {
+    preset,
+    density,
+    radius,
+    border,
+    background,
+    styles: mergeStyles(emptyStyles, appearance?.styles),
+    slots: mergeSlots(
+      baseSlots,
+      presetSlots[preset],
+      densitySlots[density],
+      radiusSlots[radius],
+      borderSlots[border],
+      backgroundSlots[background],
+      appearance?.slots
+    )
+  };
+}
+function getBaseButtonToneClassName(theme, tone = "default", active = false) {
+  return cn(
+    tone === "default" && theme.slots.buttonDefault,
+    tone === "primary" && theme.slots.buttonPrimary,
+    tone === "success" && theme.slots.buttonSuccess,
+    tone === "warning" && theme.slots.buttonWarning,
+    tone === "danger" && theme.slots.buttonDanger,
+    tone === "muted" && theme.slots.buttonMuted,
+    active && theme.slots.buttonActive
+  );
+}
+var sizeClassNames = {
+  sm: "h-7 w-7 text-xs",
+  md: "h-9 w-9 text-sm",
+  lg: "h-12 w-12 text-base"
+};
+var statusClassNames = {
+  online: "bg-emerald-500",
+  busy: "bg-amber-500",
+  offline: "bg-muted-foreground",
+  neutral: "bg-muted-foreground"
+};
+function isStatusPreset(status) {
+  return typeof status === "string" && status in statusClassNames;
+}
+function getInitials(name) {
+  if (!name) return void 0;
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return void 0;
+  return words.slice(0, 2).map((word) => word[0]?.toUpperCase()).join("");
+}
+function BaseAvatar({
+  src,
+  alt,
+  name,
+  initials,
+  icon,
+  status,
+  size = "md",
+  appearance,
+  className,
+  classNames,
+  style,
+  children,
+  ...avatarProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const fallback = children ?? initials ?? getInitials(name) ?? icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...avatarProps,
+      className: cn(
+        theme.slots.avatarRoot,
+        sizeClassNames[size],
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.avatar,
+        ...style
+      },
+      title: name,
+      children: [
+        src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt ?? name ?? "",
+            className: cn(theme.slots.avatarImage, classNames?.image)
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: cn(theme.slots.avatarFallback, classNames?.fallback), children: hasRenderableNode(fallback) ? fallback : "?" }),
+        isStatusPreset(status) ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              theme.slots.avatarStatus,
+              statusClassNames[status],
+              classNames?.status
+            )
+          }
+        ) : hasRenderableNode(status) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.avatarStatus, classNames?.status), children: status }) : null
+      ]
+    }
+  );
+}
+function LoadingIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "h-4 w-4 animate-spin",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9",
+            className: "opacity-25",
+            stroke: "currentColor",
+            strokeWidth: "3"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3Z"
+          }
+        )
+      ]
+    }
+  );
+}
+var BaseButton = forwardRef(
+  function BaseButton2({
+    children,
+    label,
+    icon,
+    endIcon,
+    type = "button",
+    title,
+    ariaLabel,
+    tone,
+    active = false,
+    iconOnly = false,
+    disabled = false,
+    loading = false,
+    stopPropagation = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    onClick,
+    "aria-label": nativeAriaLabel,
+    ...buttonProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const resolvedLabel = children ?? label;
+    const labelText = typeof resolvedLabel === "string" ? resolvedLabel : void 0;
+    const resolvedAriaLabel = ariaLabel ?? nativeAriaLabel ?? labelText ?? title ?? (iconOnly ? "Action" : void 0);
+    const resolvedDisabled = disabled || loading;
+    const handleClick = (event) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      if (resolvedDisabled) return;
+      onClick?.(event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...buttonProps,
+        ref,
+        type,
+        title,
+        "aria-label": resolvedAriaLabel,
+        "aria-pressed": active || void 0,
+        "aria-busy": loading || void 0,
+        disabled: resolvedDisabled,
+        className: cn(
+          theme.slots.buttonBase,
+          iconOnly && theme.slots.buttonIconOnly,
+          getBaseButtonToneClassName(theme, tone, active),
+          resolvedDisabled && theme.slots.buttonDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.button,
+          ...active ? theme.styles.buttonActive : void 0,
+          ...resolvedDisabled ? theme.styles.buttonDisabled : void 0,
+          ...style
+        },
+        onClick: handleClick,
+        children: [
+          loading ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.buttonIcon, classNames?.icon), children: /* @__PURE__ */ jsx(LoadingIcon, {}) }) : icon ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.buttonIcon, classNames?.icon), children: icon }) : null,
+          iconOnly ? hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: resolvedLabel }) : null : hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.buttonLabel, classNames?.label), children: resolvedLabel }) : null,
+          !loading && endIcon ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.buttonIcon, classNames?.icon), children: endIcon }) : null
+        ]
+      }
+    );
+  }
+);
+function setRefs(element, ...refs) {
+  refs.forEach((ref) => {
+    if (!ref) return;
+    if (typeof ref === "function") {
+      ref(element);
+      return;
+    }
+    ref.current = element;
+  });
+}
+forwardRef(
+  function BaseCheckbox2({
+    label,
+    description,
+    indeterminate = false,
+    invalid = false,
+    disabled = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    checked,
+    defaultChecked,
+    onChange,
+    "aria-invalid": nativeAriaInvalid,
+    ...checkboxProps
+  }, forwardedRef) {
+    const theme = resolveBaseAppearance(appearance);
+    const inputRef = useRef(null);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+      defaultChecked ?? false
+    );
+    const isControlled = checked !== void 0;
+    const resolvedChecked = Boolean(isControlled ? checked : uncontrolledChecked);
+    const active = indeterminate || resolvedChecked;
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const handleChange = (event) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setUncontrolledChecked(event.currentTarget.checked);
+      }
+      onChange?.(event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          theme.slots.checkboxRoot,
+          disabled && theme.slots.checkboxDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.checkboxRoot,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                theme.slots.checkboxBox,
+                active && theme.slots.checkboxBoxChecked,
+                invalid && theme.slots.checkboxBoxInvalid,
+                classNames?.box
+              ),
+              style: {
+                ...theme.styles.checkboxBox
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...checkboxProps,
+                    ref: (element) => setRefs(element, inputRef, forwardedRef),
+                    type: "checkbox",
+                    disabled,
+                    checked,
+                    defaultChecked,
+                    "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+                    "aria-checked": indeterminate ? "mixed" : resolvedChecked,
+                    className: cn(theme.slots.checkboxInput, classNames?.input),
+                    onChange: handleChange
+                  }
+                ),
+                active ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(theme.slots.checkboxIndicator, classNames?.indicator),
+                    children: indeterminate ? "\u2013" : "\u2713"
+                  }
+                ) : null
+              ]
+            }
+          ),
+          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxs("span", { className: cn(theme.slots.checkboxContent, classNames?.content), children: [
+            hasRenderableNode(label) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.checkboxLabel, classNames?.label), children: label }) : null,
+            hasRenderableNode(description) ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  theme.slots.checkboxDescription,
+                  classNames?.description
+                ),
+                children: description
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+forwardRef(
+  function BaseInput2({
+    icon,
+    trailing,
+    invalid = false,
+    disabled = false,
+    readOnly = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    "aria-invalid": nativeAriaInvalid,
+    ...inputProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          theme.slots.controlWrapper,
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          readOnly && theme.slots.controlReadOnly,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              disabled,
+              readOnly,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              className: cn(
+                theme.slots.controlBase,
+                theme.slots.controlInput,
+                classNames?.control
+              )
+            }
+          ),
+          hasRenderableNode(trailing) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlTrailing, classNames?.trailing), children: trailing }) : null
+        ]
+      }
+    );
+  }
+);
+function normalizeValues(values) {
+  const nextValues = [];
+  const seen = /* @__PURE__ */ new Set();
+  values?.forEach((value) => {
+    if (seen.has(value)) return;
+    seen.add(value);
+    nextValues.push(value);
+  });
+  return nextValues;
+}
+function getNextEnabledIndex(options, currentIndex, direction) {
+  if (!options.length) return -1;
+  const startIndex = currentIndex >= 0 ? currentIndex : 0;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+function getFirstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function getSafeTagCount(maxTagCount, total) {
+  if (maxTagCount === void 0) return total;
+  if (!Number.isFinite(maxTagCount)) return total;
+  return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
+}
+function getDefaultRemoveLabel(option) {
+  return `Remove ${option.value}`;
+}
+forwardRef(
+  function BaseMultiSelect2({
+    options,
+    value,
+    defaultValue,
+    name,
+    placeholder = "Select options",
+    icon,
+    invalid = false,
+    disabled = false,
+    required = false,
+    openForPreview = false,
+    maxTagCount,
+    removeLabel = getDefaultRemoveLabel,
+    emptyLabel = "No options",
+    appearance,
+    className,
+    classNames,
+    style,
+    id,
+    "aria-invalid": nativeAriaInvalid,
+    "aria-label": nativeAriaLabel,
+    "aria-labelledby": nativeAriaLabelledBy,
+    onValueChange,
+    ...rootProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const generatedId = useId();
+    const multiSelectId = id ?? generatedId;
+    const controlId = `${multiSelectId}-control`;
+    const listboxId = `${multiSelectId}-listbox`;
+    const rootRef = useRef(null);
+    const optionList = options ?? [];
+    const forceOpen = openForPreview;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const open = forceOpen || uncontrolledOpen;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      () => normalizeValues(defaultValue)
+    );
+    const [activeIndex, setActiveIndex] = useState(
+      () => getFirstEnabledIndex(optionList)
+    );
+    const isControlled = value !== void 0;
+    const selectedValues = useMemo(
+      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      [isControlled, uncontrolledValue, value]
+    );
+    const selectedValueSet = useMemo(
+      () => new Set(selectedValues),
+      [selectedValues]
+    );
+    const optionByValue = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      optionList.forEach((option) => {
+        if (!map.has(option.value)) {
+          map.set(option.value, option);
+        }
+      });
+      return map;
+    }, [optionList]);
+    const selectedOptions = useMemo(
+      () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
+        (option) => option !== void 0
+      ),
+      [optionByValue, selectedValues]
+    );
+    const firstEnabledIndex = useMemo(
+      () => getFirstEnabledIndex(optionList),
+      [optionList]
+    );
+    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
+    const visibleTagCount = getSafeTagCount(
+      maxTagCount,
+      selectedOptions.length
+    );
+    const visibleOptions = selectedOptions.slice(0, visibleTagCount);
+    const overflowCount = selectedOptions.length - visibleOptions.length;
+    const isPlaceholder = selectedOptions.length === 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const setOpen = (nextOpen) => {
+      if (disabled || forceOpen) return;
+      setUncontrolledOpen(nextOpen);
+      if (nextOpen) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    };
+    useEffect(() => {
+      if (!open || forceOpen) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          setUncontrolledOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, open]);
+    useEffect(() => {
+      if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    }, [activeIndex, resolvedActiveIndex]);
+    const commitValues = (nextValues) => {
+      const normalizedValues = normalizeValues(nextValues);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedValues);
+      }
+      onValueChange?.(normalizedValues);
+    };
+    const toggleOption = (option) => {
+      if (!option || option.disabled || disabled) return;
+      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
+      commitValues(nextValues);
+    };
+    const removeOption = (option) => {
+      if (disabled) return;
+      commitValues(
+        selectedValues.filter((selectedValue) => selectedValue !== option.value)
+      );
+    };
+    const focusOption = (direction) => {
+      const nextIndex = getNextEnabledIndex(
+        optionList,
+        resolvedActiveIndex,
+        direction
+      );
+      if (nextIndex >= 0) {
+        setActiveIndex(nextIndex);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(firstEnabledIndex);
+          return;
+        }
+        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(firstEnabledIndex);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        setOpen(true);
+        for (let index = optionList.length - 1; index >= 0; index -= 1) {
+          if (!optionList[index]?.disabled) {
+            setActiveIndex(index);
+            break;
+          }
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        toggleOption(optionList[resolvedActiveIndex]);
+        return;
+      }
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rootProps,
+        id,
+        ref: setRootRef,
+        className: cn(
+          theme.slots.controlWrapper,
+          "overflow-visible",
+          open && "z-50",
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: controlId,
+              role: "combobox",
+              tabIndex: disabled ? -1 : 0,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              "aria-disabled": disabled || void 0,
+              "aria-required": required || void 0,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "aria-label": nativeAriaLabel,
+              "aria-labelledby": nativeAriaLabelledBy,
+              className: cn(
+                theme.slots.controlBase,
+                "flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
+                disabled && "!cursor-not-allowed",
+                classNames?.control
+              ),
+              onClick: () => setOpen(!open),
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+                    classNames?.tagList
+                  ),
+                  children: [
+                    visibleOptions.map((option) => /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "max-w-40 truncate",
+                                classNames?.tagLabel
+                              ),
+                              children: option.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": removeLabel(option),
+                              disabled,
+                              className: cn(
+                                "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
+                                classNames?.tagRemove
+                              ),
+                              onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                removeOption(option);
+                              },
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                              },
+                              onKeyDown: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "x" })
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    )),
+                    overflowCount > 0 ? /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          "+",
+                          overflowCount
+                        ]
+                      }
+                    ) : null,
+                    isPlaceholder ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 truncate",
+                          theme.slots.selectPlaceholder,
+                          classNames?.placeholder
+                        ),
+                        children: placeholder
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                theme.slots.selectChevron,
+                open && "rotate-[225deg]",
+                classNames?.chevron
+              )
+            }
+          ),
+          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: selectedValue,
+              className: classNames?.hiddenInput
+            },
+            selectedValue
+          )) : null,
+          open ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-labelledby": controlId,
+              className: cn(theme.slots.selectMenu, classNames?.menu),
+              style: theme.styles.selectMenu,
+              children: optionList.length > 0 ? optionList.map((option, index) => {
+                const selected = selectedValueSet.has(option.value);
+                const active = index === resolvedActiveIndex;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled: option.disabled,
+                    className: cn(
+                      theme.slots.selectOption,
+                      "gap-2",
+                      active && theme.slots.selectOptionActive,
+                      selected && theme.slots.selectOptionSelected,
+                      option.disabled && theme.slots.selectOptionDisabled,
+                      classNames?.option
+                    ),
+                    style: {
+                      ...theme.styles.selectOption,
+                      ...active ? theme.styles.selectOptionActive : void 0,
+                      ...selected ? theme.styles.selectOptionSelected : void 0
+                    },
+                    onMouseEnter: () => {
+                      if (!option.disabled) {
+                        setActiveIndex(index);
+                      }
+                    },
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => toggleOption(option),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
+                            selected && "border-primary/40 bg-primary text-primary-foreground",
+                            classNames?.optionIndicator
+                          ),
+                          children: selected ? "\u2713" : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "min-w-0 flex-1 truncate",
+                            classNames?.optionLabel
+                          ),
+                          children: option.label
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "px-2.5 py-2 text-sm text-muted-foreground",
+                    classNames?.empty
+                  ),
+                  children: emptyLabel
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+function findOption(options, value) {
+  if (value === void 0) return void 0;
+  return options.find((option) => option.value === value);
+}
+function getInitialValue(options, defaultValue) {
+  if (typeof defaultValue === "string") {
+    return defaultValue;
+  }
+  return "";
+}
+function getNextEnabledIndex2(options, currentIndex, direction) {
+  if (!options.length) return -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+forwardRef(
+  function BaseSelect2({
+    options,
+    placeholder,
+    icon,
+    invalid = false,
+    disabled = false,
+    openForPreview = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    children,
+    value,
+    defaultValue,
+    onChange,
+    name,
+    id,
+    required,
+    "aria-invalid": nativeAriaInvalid,
+    "aria-label": nativeAriaLabel,
+    "aria-labelledby": nativeAriaLabelledBy,
+    ...selectProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const generatedId = useId();
+    const selectId = id ?? generatedId;
+    const listboxId = `${selectId}-listbox`;
+    const rootRef = useRef(null);
+    const selectRef = useRef(null);
+    const optionList = options ?? [];
+    const isCustomSelect = optionList.length > 0;
+    const forceOpen = openForPreview;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const open = forceOpen || uncontrolledOpen;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      () => getInitialValue(optionList, defaultValue)
+    );
+    const isControlled = value !== void 0;
+    const selectedValue = String(isControlled ? value : uncontrolledValue);
+    const selectedOption = findOption(optionList, selectedValue);
+    const activeIndex = useMemo(() => {
+      const selectedIndex = optionList.findIndex(
+        (option) => option.value === selectedValue && !option.disabled
+      );
+      if (selectedIndex >= 0) return selectedIndex;
+      return optionList.findIndex((option) => !option.disabled);
+    }, [optionList, selectedValue]);
+    const visibleLabel = selectedOption?.label ?? placeholder;
+    const isPlaceholder = !selectedOption;
+    const setSelectRef = (node) => {
+      selectRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    useEffect(() => {
+      if (!open || forceOpen) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          setUncontrolledOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, open]);
+    const notifyChange = (nextValue) => {
+      const selectElement = selectRef.current;
+      if (!selectElement) return;
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLSelectElement.prototype,
+        "value"
+      )?.set;
+      valueSetter?.call(selectElement, nextValue);
+      selectElement.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const commitValue = (nextValue, optionDisabled) => {
+      if (optionDisabled || disabled) return;
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      notifyChange(nextValue);
+      if (!forceOpen) {
+        setUncontrolledOpen(false);
+      }
+    };
+    const focusOption = (direction) => {
+      const currentIndex = activeIndex >= 0 ? activeIndex : 0;
+      const nextIndex = getNextEnabledIndex2(optionList, currentIndex, direction);
+      if (nextIndex >= 0) {
+        commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) {
+          setUncontrolledOpen(true);
+          return;
+        }
+        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!forceOpen) {
+          setUncontrolledOpen((current) => !current);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        setUncontrolledOpen(false);
+      }
+    };
+    if (!isCustomSelect) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            theme.slots.controlWrapper,
+            invalid && theme.slots.controlInvalid,
+            disabled && theme.slots.controlDisabled,
+            classNames?.root,
+            className
+          ),
+          style: {
+            ...theme.styles.control,
+            ...invalid ? theme.styles.controlInvalid : void 0,
+            ...disabled ? theme.styles.controlDisabled : void 0,
+            ...style
+          },
+          children: [
+            hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                ...selectProps,
+                id,
+                ref,
+                name,
+                value,
+                defaultValue,
+                required,
+                disabled,
+                "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+                "aria-label": nativeAriaLabel,
+                "aria-labelledby": nativeAriaLabelledBy,
+                onChange,
+                className: cn(
+                  theme.slots.controlBase,
+                  theme.slots.controlSelect,
+                  classNames?.control
+                ),
+                children: [
+                  hasRenderableNode(placeholder) ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+                  children
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: theme.slots.selectChevron })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: cn(
+          theme.slots.controlWrapper,
+          "overflow-visible",
+          open && "z-50",
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              id: `${selectId}-button`,
+              disabled,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "aria-label": nativeAriaLabel,
+              "aria-labelledby": nativeAriaLabelledBy,
+              className: cn(
+                theme.slots.controlBase,
+                theme.slots.controlSelect,
+                "flex items-center text-left",
+                classNames?.control
+              ),
+              onClick: () => {
+                if (!forceOpen) {
+                  setUncontrolledOpen((current) => !current);
+                }
+              },
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 truncate",
+                    isPlaceholder && theme.slots.selectPlaceholder,
+                    isPlaceholder && classNames?.placeholder
+                  ),
+                  children: visibleLabel
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                theme.slots.selectChevron,
+                open && "rotate-[225deg]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              ...selectProps,
+              ref: setSelectRef,
+              id,
+              name,
+              value: selectedValue,
+              required,
+              disabled,
+              "aria-hidden": "true",
+              tabIndex: -1,
+              className: theme.slots.selectNative,
+              onChange,
+              children: [
+                hasRenderableNode(placeholder) ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+                optionList.map((option) => /* @__PURE__ */ jsx(
+                  "option",
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: typeof option.label === "string" ? option.label : option.value
+                  },
+                  option.value
+                ))
+              ]
+            }
+          ),
+          open ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-labelledby": `${selectId}-button`,
+              className: cn(theme.slots.selectMenu, classNames?.menu),
+              style: theme.styles.selectMenu,
+              children: optionList.map((option, index) => {
+                const selected = option.value === selectedValue;
+                const active = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled: option.disabled,
+                    className: cn(
+                      theme.slots.selectOption,
+                      active && theme.slots.selectOptionActive,
+                      selected && theme.slots.selectOptionSelected,
+                      option.disabled && theme.slots.selectOptionDisabled,
+                      classNames?.option
+                    ),
+                    style: {
+                      ...theme.styles.selectOption,
+                      ...active ? theme.styles.selectOptionActive : void 0,
+                      ...selected ? theme.styles.selectOptionSelected : void 0
+                    },
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => commitValue(option.value, option.disabled),
+                    children: /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })
+                  },
+                  option.value
+                );
+              })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+forwardRef(
+  function BaseSwitch2({
+    label,
+    description,
+    disabled = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    checked,
+    defaultChecked,
+    onChange,
+    ...switchProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+      defaultChecked ?? false
+    );
+    const isControlled = checked !== void 0;
+    const resolvedChecked = isControlled ? checked : uncontrolledChecked;
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setUncontrolledChecked(event.currentTarget.checked);
+      }
+      onChange?.(event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          theme.slots.switchRoot,
+          disabled && theme.slots.switchDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.switchRoot,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                theme.slots.switchTrack,
+                resolvedChecked && theme.slots.switchChecked,
+                classNames?.track
+              ),
+              style: theme.styles.switchTrack,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...switchProps,
+                    ref,
+                    type: "checkbox",
+                    disabled,
+                    checked,
+                    defaultChecked,
+                    onChange: handleChange,
+                    className: cn(theme.slots.switchInput, classNames?.input)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      theme.slots.switchThumb,
+                      resolvedChecked && "translate-x-5",
+                      classNames?.thumb
+                    ),
+                    style: theme.styles.switchThumb
+                  }
+                )
+              ]
+            }
+          ),
+          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxs("span", { className: cn(theme.slots.switchContent, classNames?.content), children: [
+            hasRenderableNode(label) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.switchLabel, classNames?.label), children: label }) : null,
+            hasRenderableNode(description) ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  theme.slots.switchDescription,
+                  classNames?.description
+                ),
+                children: description
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
+var BaseTableContext = createContext(null);
+function useBaseTableContext(appearance) {
+  const context = useContext(BaseTableContext);
+  if (context) {
+    return {
+      ...context,
+      theme: appearance ? resolveBaseAppearance(appearance) : context.theme,
+      appearance: appearance ?? context.appearance
+    };
+  }
+  const theme = resolveBaseAppearance(appearance);
+  return {
+    appearance,
+    theme,
+    setDraggingColumnId: () => {
+    }
+  };
+}
+function toCssSize(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function clampWidth(value, minWidth, maxWidth) {
+  const min = minWidth ?? 48;
+  const max = maxWidth ?? Number.POSITIVE_INFINITY;
+  return Math.min(Math.max(value, min), max);
+}
+function getNextColumnOrder(order, columnId, targetColumnId) {
+  if (!order || columnId === targetColumnId) return void 0;
+  const fromIndex = order.indexOf(columnId);
+  const toIndex = order.indexOf(targetColumnId);
+  if (fromIndex < 0 || toIndex < 0) return void 0;
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+function sortAriaValue(direction) {
+  switch (direction) {
+    case "asc":
+      return "ascending";
+    case "desc":
+      return "descending";
+    default:
+      return void 0;
+  }
+}
+function SortIndicator({
+  direction,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        className,
+        direction === "desc" && "rotate-180",
+        (!direction || direction === "none") && "opacity-45"
+      ),
+      children: "\u25B2"
+    }
+  );
+}
+function DragHandleIcon() {
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "grid gap-0.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
+    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
+    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" })
+  ] });
+}
+forwardRef(function BaseTableHead2({
+  columnId,
+  align = "left",
+  icon,
+  label,
+  description,
+  meta,
+  actions,
+  trailing,
+  sortable,
+  sortDirection = "none",
+  sortLabel,
+  onSort,
+  draggable,
+  dragLabel,
+  resizable,
+  resizeLabel,
+  width,
+  minWidth,
+  maxWidth,
+  appearance,
+  className,
+  classNames,
+  style,
+  children,
+  onDragOver,
+  onDrop,
+  ...headProps
+}, forwardedRef) {
+  const tableContext = useBaseTableContext(appearance);
+  const { theme } = tableContext;
+  const headRef = useRef(null);
+  const setHeadRef = (node) => {
+    headRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+  const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
+  const canDrag = Boolean(
+    columnId && draggable !== false && (draggable || tableContext.columnDragEnabled) && tableContext.columnOrder && tableContext.onColumnOrderChange
+  );
+  const canResize = Boolean(
+    columnId && resizable !== false && (resizable || tableContext.columnResizeEnabled) && tableContext.onColumnSizeChange
+  );
+  const interactiveSort = Boolean(sortable || onSort);
+  const ariaSort = sortAriaValue(sortDirection);
+  const content = hasRenderableNode(label) ? label : children;
+  const usesRichHeader = canDrag || hasRenderableNode(icon) || hasRenderableNode(label) || hasRenderableNode(description) || hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) || interactiveSort;
+  const renderedContent = usesRichHeader ? /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadContent, classNames?.content), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadMain, classNames?.main), children: [
+      canDrag ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          draggable: true,
+          title: dragLabel,
+          "aria-label": dragLabel ?? `Drag column ${columnId}`,
+          className: cn(theme.slots.tableHeadDragHandle, classNames?.dragHandle),
+          onClick: (event) => event.stopPropagation(),
+          onDragStart: (event) => {
+            event.stopPropagation();
+            tableContext.setDraggingColumnId(columnId);
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData(DATA_TRANSFER_COLUMN_TYPE, columnId);
+          },
+          onDragEnd: (event) => {
+            event.stopPropagation();
+            tableContext.setDraggingColumnId(void 0);
+          },
+          children: /* @__PURE__ */ jsx(DragHandleIcon, {})
+        }
+      ) : null,
+      icon ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.tableHeadIcon, classNames?.icon), children: icon }) : null,
+      interactiveSort ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: !onSort,
+          title: sortLabel,
+          className: cn(theme.slots.tableHeadSortButton, classNames?.sortButton),
+          onClick: (event) => {
+            event.stopPropagation();
+            onSort?.(columnId);
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: cn(theme.slots.tableHeadText, classNames?.text), children: [
+              hasRenderableNode(content) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.tableHeadLabel, classNames?.label), children: content }) : null,
+              hasRenderableNode(description) ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    theme.slots.tableHeadDescription,
+                    classNames?.description
+                  ),
+                  children: description
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              SortIndicator,
+              {
+                direction: sortDirection,
+                className: cn(theme.slots.tableHeadSortIcon, classNames?.sortIcon)
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("span", { className: cn(theme.slots.tableHeadText, classNames?.text), children: [
+        hasRenderableNode(content) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.tableHeadLabel, classNames?.label), children: content }) : null,
+        hasRenderableNode(description) ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              theme.slots.tableHeadDescription,
+              classNames?.description
+            ),
+            children: description
+          }
+        ) : null
+      ] })
+    ] }),
+    hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) ? /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadActions, classNames?.actions), children: [
+      hasRenderableNode(meta) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.tableHeadMeta, classNames?.meta), children: meta }) : null,
+      actions,
+      trailing
+    ] }) : null
+  ] }) : children;
+  const handleDragOver = (event) => {
+    onDragOver?.(event);
+    if (!canDrag || !tableContext.draggingColumnId || tableContext.draggingColumnId === columnId) {
+      return;
+    }
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+  const handleDrop = (event) => {
+    onDrop?.(event);
+    if (!canDrag || !columnId) return;
+    const sourceColumnId = tableContext.draggingColumnId || event.dataTransfer.getData(DATA_TRANSFER_COLUMN_TYPE);
+    if (!sourceColumnId || sourceColumnId === columnId) return;
+    const nextOrder = getNextColumnOrder(
+      tableContext.columnOrder,
+      sourceColumnId,
+      columnId
+    );
+    if (nextOrder) {
+      event.preventDefault();
+      tableContext.onColumnOrderChange?.(nextOrder, {
+        columnId: sourceColumnId,
+        targetColumnId: columnId
+      });
+    }
+    tableContext.setDraggingColumnId(void 0);
+  };
+  const handleResizePointerDown = (event) => {
+    if (!canResize || !columnId || !tableContext.onColumnSizeChange) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const currentWidth = typeof controlledWidth === "number" ? controlledWidth : headRef.current?.offsetWidth ?? minWidth ?? 96;
+    const previousWidth = clampWidth(currentWidth, minWidth, maxWidth);
+    const pointerId = event.pointerId;
+    const target = event.currentTarget;
+    target.setPointerCapture?.(pointerId);
+    const handlePointerMove = (moveEvent) => {
+      const nextWidth = clampWidth(
+        previousWidth + moveEvent.clientX - startX,
+        minWidth,
+        maxWidth
+      );
+      tableContext.onColumnSizeChange?.(columnId, nextWidth, {
+        columnId,
+        previousWidth,
+        minWidth,
+        maxWidth
+      });
+    };
+    const cleanup = () => {
+      target.releasePointerCapture?.(pointerId);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", cleanup);
+      window.removeEventListener("pointercancel", cleanup);
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", cleanup);
+    window.addEventListener("pointercancel", cleanup);
+  };
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ...headProps,
+      ref: setHeadRef,
+      scope: headProps.scope ?? "col",
+      "aria-sort": ariaSort,
+      className: cn(
+        theme.slots.tableHead,
+        align === "center" && theme.slots.tableCellAlignCenter,
+        align === "right" && theme.slots.tableCellAlignRight,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.tableHead,
+        width: toCssSize(controlledWidth),
+        minWidth: toCssSize(minWidth),
+        maxWidth: toCssSize(maxWidth),
+        ...style
+      },
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      children: [
+        renderedContent,
+        canResize ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: resizeLabel,
+            "aria-label": resizeLabel ?? `Resize column ${columnId}`,
+            className: cn(theme.slots.tableHeadResizeHandle, classNames?.resizeHandle),
+            onClick: (event) => event.stopPropagation(),
+            onPointerDown: handleResizePointerDown
+          }
+        ) : null
+      ]
+    }
+  );
+});
+forwardRef(
+  function BaseTextarea2({
+    invalid = false,
+    disabled = false,
+    readOnly = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    "aria-invalid": nativeAriaInvalid,
+    ...textareaProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...textareaProps,
+        ref,
+        disabled,
+        readOnly,
+        "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+        className: cn(
+          theme.slots.controlWrapper,
+          theme.slots.controlBase,
+          theme.slots.controlTextarea,
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          readOnly && theme.slots.controlReadOnly,
+          classNames?.control,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        }
+      }
+    );
+  }
+);
+function getTooltipPlacementClassName(placement) {
+  switch (placement) {
+    case "bottom":
+      return "left-1/2 top-[calc(100%+0.5rem)] -translate-x-1/2";
+    case "left":
+      return "right-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2";
+    case "right":
+      return "left-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2";
+    case "top":
+    default:
+      return "bottom-[calc(100%+0.5rem)] left-1/2 -translate-x-1/2";
+  }
+}
+function BaseTooltip({
+  content,
+  children,
+  open,
+  defaultOpen = false,
+  placement = "top",
+  disabled = false,
+  appearance,
+  className,
+  classNames,
+  style,
+  onOpenChange,
+  ...tooltipProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const canShow = !disabled && hasRenderableNode(content);
+  const setOpen = (nextOpen) => {
+    if (!canShow && nextOpen) return;
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...tooltipProps,
+      className: cn(theme.slots.tooltipRoot, classNames?.root, className),
+      style,
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(theme.slots.tooltipTrigger, classNames?.trigger), children }),
+        canShow && isOpen ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "tooltip",
+            className: cn(
+              theme.slots.tooltipContent,
+              getTooltipPlacementClassName(placement),
+              classNames?.content
+            ),
+            style: theme.styles.tooltip,
+            children: content
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var defaultAppearance = {
+  preset: "admin",
+  density: "compact",
+  radius: "lg",
+  border: "subtle",
+  background: "soft"
+};
+var radiusClassNames = {
+  default: "rounded-md",
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-3 w-3",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function MoreIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-4 w-4",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+function getInitials2(name) {
+  if (!name) return "U";
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return "U";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return words.slice(0, 2).map((word) => word[0]).join("").toUpperCase();
+}
+function renderIcon(icon, className) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 shrink-0 items-center justify-center", className), children: icon });
+}
+function getCurrentOptionLabel(selector) {
+  return selector.options.find((option) => option.value === selector.value)?.label ?? selector.value;
+}
+function UserAccountMenuSelector({
+  classNames,
+  menuRadius,
+  selector
+}) {
+  if (selector.visible === false || selector.options.length === 0) return null;
+  const radiusClass = radiusClassNames[menuRadius];
+  const currentLabel = getCurrentOptionLabel(selector);
+  return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenu.SubTrigger,
+      {
+        disabled: selector.disabled,
+        className: cn(
+          "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[state=open]:bg-[hsl(var(--accent))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          radiusClass,
+          classNames?.subTrigger
+        ),
+        children: [
+          renderIcon(selector.icon),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: selector.label }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 max-w-[7rem] truncate text-xs text-[hsl(var(--muted-foreground))]", children: currentLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu.SubContent,
+      {
+        sideOffset: 8,
+        className: cn(
+          "z-50 min-w-40 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          radiusClass,
+          selector.contentWidthClassName,
+          classNames?.subContent
+        ),
+        children: /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxs(
+          DropdownMenu.RadioItem,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            className: cn(
+              "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 pl-8 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+              radiusClass,
+              classNames?.item
+            ),
+            children: [
+              /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              renderIcon(option.icon, classNames?.itemIcon),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+            ]
+          },
+          option.value
+        )) })
+      }
+    ) })
+  ] });
+}
+function UserAccountMenu({
+  align = "end",
+  appearance = defaultAppearance,
+  ariaLabel,
+  className,
+  classNames,
+  contentWidthClassName = "w-56",
+  fallbackName = "User",
+  items = [],
+  menuRadius = "default",
+  selectors = [],
+  side = "bottom",
+  sideOffset = 8,
+  triggerEndIcon,
+  triggerTitle,
+  triggerVariant = "avatar",
+  user
+}) {
+  const displayName = user.name?.trim() || fallbackName;
+  const initials = user.initials ?? getInitials2(displayName);
+  const radiusClass = radiusClassNames[menuRadius];
+  const visibleSelectors = selectors.filter(
+    (selector) => selector.visible !== false && selector.options.length > 0
+  );
+  const visibleItems = items.filter((item) => item.visible !== false);
+  const hasMenuBody = visibleSelectors.length > 0 || visibleItems.length > 0;
+  const avatar = /* @__PURE__ */ jsx(
+    BaseAvatar,
+    {
+      appearance,
+      alt: user.avatarAlt ?? displayName,
+      className: cn("h-8 w-8", classNames?.avatar),
+      initials,
+      name: displayName,
+      size: "sm",
+      src: user.avatarUrl
+    }
+  );
+  const isProfileTrigger = triggerVariant === "profile";
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance,
+        ariaLabel: ariaLabel ?? displayName,
+        className: cn(
+          isProfileTrigger ? "h-auto w-full justify-start rounded-lg border-transparent bg-transparent px-2 py-2 text-left shadow-none transition-all hover:bg-[hsl(var(--muted))]/60" : "h-9 w-9 overflow-visible rounded-full border-transparent bg-transparent p-0 shadow-none transition-all hover:ring-2 hover:ring-[hsl(var(--ring))]/20",
+          className,
+          classNames?.root,
+          classNames?.trigger
+        ),
+        classNames: {
+          icon: "h-8 w-8",
+          label: isProfileTrigger ? "min-w-0 flex-1 text-left" : void 0
+        },
+        endIcon: isProfileTrigger ? triggerEndIcon ?? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
+        icon: avatar,
+        iconOnly: !isProfileTrigger,
+        label: isProfileTrigger ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start", children: [
+          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-sm font-medium leading-none text-[hsl(var(--foreground))]", children: displayName }),
+          user.secondaryText ? /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate text-xs leading-none text-[hsl(var(--muted-foreground))]", children: user.secondaryText }) : null
+        ] }) : void 0,
+        title: triggerTitle ?? displayName,
+        tone: "muted"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu.Content,
+      {
+        align,
+        side,
+        sideOffset,
+        className: cn(
+          "z-50 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          contentWidthClassName,
+          radiusClass,
+          classNames?.content
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            avatar,
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("truncate text-sm font-medium leading-none", classNames?.userName), children: displayName }),
+              user.secondaryText ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "truncate pt-1 text-xs leading-none text-[hsl(var(--muted-foreground))]",
+                    classNames?.secondaryText
+                  ),
+                  children: user.secondaryText
+                }
+              ) : null
+            ] })
+          ] }) }),
+          hasMenuBody ? /* @__PURE__ */ jsx(
+            DropdownMenu.Separator,
+            {
+              className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+            }
+          ) : null,
+          visibleSelectors.map((selector, index) => /* @__PURE__ */ jsx(
+            UserAccountMenuSelector,
+            {
+              classNames,
+              menuRadius,
+              selector
+            },
+            selector.id ?? `selector-${index}`
+          )),
+          visibleSelectors.length > 0 && visibleItems.length > 0 ? /* @__PURE__ */ jsx(
+            DropdownMenu.Separator,
+            {
+              className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+            }
+          ) : null,
+          visibleItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+            item.separatorBefore ? /* @__PURE__ */ jsx(
+              DropdownMenu.Separator,
+              {
+                className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              DropdownMenu.Item,
+              {
+                disabled: item.disabled,
+                onSelect: item.onSelect,
+                className: cn(
+                  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                  radiusClass,
+                  item.tone === "danger" && "text-[hsl(var(--destructive))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--destructive))] focus:text-[hsl(var(--destructive))]",
+                  classNames?.item,
+                  item.tone === "danger" && classNames?.dangerItem
+                ),
+                children: [
+                  renderIcon(item.icon, classNames?.itemIcon),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                  item.shortcut ? /* @__PURE__ */ jsx("span", { className: "ml-3 shrink-0 text-xs text-[hsl(var(--muted-foreground))]", children: item.shortcut }) : null
+                ]
+              }
+            )
+          ] }, item.id))
+        ]
+      }
+    ) })
+  ] });
+}
+function cn2(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
 function NavButton({ active, icon, postfix, onClick, className, children }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
+      className: cn2(
         "flex w-full cursor-pointer select-none items-center gap-2 rounded-xl border p-2 text-xs text-[hsl(var(--foreground))] transition-colors",
         active ? "border-[hsl(var(--input))] bg-[hsl(var(--muted))] font-bold" : "border-transparent hover:border-[hsl(var(--input))]/60 hover:bg-[hsl(var(--muted))]/60",
         className
@@ -40,7 +3252,7 @@ function AppHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: cn(
+      className: cn2(
         "flex h-[72px] w-full shrink-0 items-center justify-between gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]",
         className
       ),
@@ -54,7 +3266,7 @@ function AppHeader({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(
+                  className: cn2(
                     "flex h-8 w-8 items-center justify-center rounded-lg overflow-hidden",
                     logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
                   ),
@@ -70,7 +3282,7 @@ function AppHeader({
           /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsx("div", { className: "inline-flex h-9 items-center gap-1 rounded-md bg-transparent p-1", children: tabs.map((tab) => /* @__PURE__ */ jsx(
             "button",
             {
-              className: cn(
+              className: cn2(
                 "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all",
                 tab.id === activeTab ? "bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] shadow-sm" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))]/50"
               ),
@@ -142,7 +3354,7 @@ function AppSidebar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
+      className: cn2(
         "flex w-[13.7rem] shrink-0 flex-col justify-between gap-[var(--global-spacing,0.75rem)] overflow-y-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-5",
         className
       ),
@@ -151,7 +3363,7 @@ function AppSidebar({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
+              className: cn2(
                 "flex h-8 w-8 items-center justify-center rounded-lg overflow-hidden",
                 logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
               ),
@@ -275,21 +3487,720 @@ function SidebarNavList({ items, activeItemId, onNavigate, defaultExpandedGroups
   ] });
 }
 function AppLayout({ header, sidebar, children, flush = false, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(
+  return /* @__PURE__ */ jsxs("div", { className: cn2(
     "flex h-screen flex-col gap-[var(--global-spacing,0.75rem)] overflow-hidden p-[var(--global-spacing,0.75rem)]",
     className
   ), style: { backgroundColor: "hsl(var(--muted))" }, children: [
-    header,
+    header ? header : null,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 gap-[var(--global-spacing,0.75rem)] overflow-hidden min-h-0", children: [
-      sidebar,
-      /* @__PURE__ */ jsx("main", { className: cn(
+      sidebar ? sidebar : null,
+      /* @__PURE__ */ jsx("main", { className: cn2(
         "flex-1 min-h-0 overflow-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))]",
         !flush && "overflow-y-auto"
       ), children: flush ? children : /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children }) })
     ] })
   ] });
 }
+var NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH = "13.7rem";
+var NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH = "4.25rem";
+var NAVIGATION_LAYOUT_TRANSITION_TIMING = "cubic-bezier(0.22, 1, 0.36, 1)";
+var NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX = 72;
+var NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX = 56;
+var NAVIGATION_LAYOUT_HEADBAR_MAX_HEIGHT_PX = 120;
+var NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX = 64;
+var NAVIGATION_LAYOUT_HEADBAR_BOXED_VERTICAL_PADDING_PX = 12;
+var NAVIGATION_LAYOUT_HEADBAR_COMPACT_VERTICAL_PADDING_PX = 8;
+var NAVIGATION_LAYOUT_HEADBAR_LOGO_DEFAULT_SIZE_PX = 44;
+var NAVIGATION_LAYOUT_HEADBAR_LOGO_COMPACT_SIZE_PX = 36;
+var NAVIGATION_LAYOUT_DEFAULT_APPEARANCE = {
+  preset: "admin",
+  density: "compact",
+  radius: "lg",
+  border: "subtle",
+  background: "soft"
+};
+var NAVIGATION_LAYOUT_MENU_RADIUS_CLASS_MAP = {
+  none: { all: "rounded-none", left: "!rounded-none", right: "!rounded-none" },
+  sm: { all: "rounded-sm", left: "!rounded-l-sm !rounded-r-none", right: "!rounded-l-none !rounded-r-sm" },
+  md: { all: "rounded-md", left: "!rounded-l-md !rounded-r-none", right: "!rounded-l-none !rounded-r-md" },
+  lg: { all: "rounded-lg", left: "!rounded-l-lg !rounded-r-none", right: "!rounded-l-none !rounded-r-lg" },
+  xl: { all: "rounded-xl", left: "!rounded-l-xl !rounded-r-none", right: "!rounded-l-none !rounded-r-xl" },
+  full: { all: "rounded-full", left: "!rounded-l-full !rounded-r-none", right: "!rounded-l-none !rounded-r-full" }
+};
+function clampHeadbarHeight(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX;
+  return Math.min(NAVIGATION_LAYOUT_HEADBAR_MAX_HEIGHT_PX, Math.max(NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX, Math.round(value)));
+}
+function getHeadbarVerticalPaddingPx(heightPx) {
+  return heightPx <= NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX ? NAVIGATION_LAYOUT_HEADBAR_COMPACT_VERTICAL_PADDING_PX : NAVIGATION_LAYOUT_HEADBAR_BOXED_VERTICAL_PADDING_PX;
+}
+function getHeadbarLogoSizePx(heightPx) {
+  return heightPx <= NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX ? NAVIGATION_LAYOUT_HEADBAR_LOGO_COMPACT_SIZE_PX : NAVIGATION_LAYOUT_HEADBAR_LOGO_DEFAULT_SIZE_PX;
+}
+function getHeadbarMenuRadiusClass(menuRadius = "default", part = "all") {
+  if (menuRadius === "default") {
+    if (part === "left") return "rounded-l-lg rounded-r-none";
+    if (part === "right") return "rounded-l-none rounded-r-lg";
+    return "rounded-lg";
+  }
+  return NAVIGATION_LAYOUT_MENU_RADIUS_CLASS_MAP[menuRadius][part];
+}
+function getHeadbarFrameClass(layoutMode = "boxed") {
+  return layoutMode === "full-bleed" ? "relative z-40 grid w-full shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,max-content)_minmax(0,1fr)] items-center gap-4 rounded-none border-b border-x-0 border-t-0 border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]" : "relative z-40 grid w-full shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,max-content)_minmax(0,1fr)] items-center gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]";
+}
+function getHeadbarFrameStyle(layoutMode = "boxed", heightPx) {
+  const verticalPaddingPx = getHeadbarVerticalPaddingPx(heightPx);
+  const style = {
+    height: `${heightPx}px`,
+    minHeight: `${heightPx}px`,
+    paddingTop: `${verticalPaddingPx}px`,
+    paddingBottom: `${verticalPaddingPx}px`
+  };
+  if (layoutMode === "full-bleed") {
+    style.marginLeft = "calc(var(--global-spacing,0.75rem) * -1)";
+    style.marginRight = "calc(var(--global-spacing,0.75rem) * -1)";
+    style.marginTop = "calc(var(--global-spacing,0.75rem) * -1)";
+    style.width = "calc(100% + (var(--global-spacing,0.75rem) * 2))";
+  }
+  return style;
+}
+function getHeadbarNavClass(navPosition = "center") {
+  if (navPosition === "left") return "justify-start";
+  if (navPosition === "right") return "justify-end";
+  return "justify-center";
+}
+function findNavigationRootId(items, activeItemId) {
+  for (const item of items) {
+    if (item.id === activeItemId) return item.id;
+    if (item.children?.some((child) => child.id === activeItemId)) return item.id;
+  }
+  return activeItemId;
+}
+function getNavigationActionTitle(action) {
+  return action.title || (typeof action.label === "string" ? action.label : void 0);
+}
+function NavigationLayoutActionButtons({
+  actions,
+  compact
+}) {
+  if (!actions.length) return null;
+  if (compact) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2", children: actions.map((action) => {
+      const title = getNavigationActionTitle(action);
+      return /* @__PURE__ */ jsx(
+        BaseTooltip,
+        {
+          appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+          content: action.label,
+          placement: "right",
+          children: /* @__PURE__ */ jsx(
+            BaseButton,
+            {
+              appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+              tone: "muted",
+              iconOnly: true,
+              icon: action.icon,
+              onClick: action.onClick,
+              title,
+              ariaLabel: title,
+              className: cn2(
+                "h-10 w-10 rounded-lg border-transparent text-[hsl(var(--muted-foreground))] shadow-none",
+                "hover:-translate-y-0.5 hover:border-[hsl(var(--input))]/80 hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))]",
+                "active:translate-y-0 active:scale-[0.96]"
+              )
+            }
+          )
+        },
+        action.id
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: actions.map((action) => /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+      tone: "muted",
+      icon: action.icon,
+      label: /* @__PURE__ */ jsx("span", { className: "truncate", children: action.label }),
+      onClick: action.onClick,
+      title: getNavigationActionTitle(action),
+      className: cn2(
+        "h-9 w-full justify-start gap-2.5 rounded-lg border-transparent px-3 text-left text-[13px] text-[hsl(var(--muted-foreground))] shadow-none",
+        "hover:-translate-y-0.5 hover:border-[hsl(var(--input))]/80 hover:bg-[hsl(var(--muted))]/70 hover:text-[hsl(var(--foreground))]",
+        "active:translate-y-0 active:scale-[0.985]"
+      )
+    },
+    action.id
+  )) });
+}
+function SidebarNavigationList({
+  activeItemId,
+  items,
+  onNavigate,
+  revealRequest
+}) {
+  const navRef = useRef(null);
+  const [expandedByRoot, setExpandedByRoot] = useState({});
+  const toggleRoot = (id) => {
+    setExpandedByRoot((current) => ({
+      ...current,
+      [id]: !current[id]
+    }));
+  };
+  useEffect(() => {
+    if (!revealRequest) return;
+    setExpandedByRoot((current) => ({
+      ...current,
+      [revealRequest.id]: true
+    }));
+    const frameId = window.requestAnimationFrame(() => {
+      const targetElement = navRef.current?.querySelector(
+        `[data-navigation-sidebar-root-id="${CSS.escape(revealRequest.id)}"]`
+      );
+      if (targetElement instanceof HTMLElement) {
+        targetElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
+      }
+    });
+    return () => window.cancelAnimationFrame(frameId);
+  }, [revealRequest]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex-1 overflow-y-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: [
+    /* @__PURE__ */ jsx("style", { children: `.monkeys-navigation-sidebar-nav::-webkit-scrollbar { display: none; }` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: navRef,
+        className: "monkeys-navigation-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]",
+        children: items.map((item) => {
+          const isGroup = Boolean(item.children?.length);
+          const isExpanded = Boolean(expandedByRoot[item.id]);
+          const isActive = activeItemId === item.id;
+          if (isGroup) {
+            return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
+              /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  icon: item.icon,
+                  onClick: () => toggleRoot(item.id),
+                  postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
+                      style: { transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" },
+                      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                    }
+                  ) }),
+                  children: item.label
+                }
+              ),
+              isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  active: activeItemId === child.id,
+                  onClick: () => onNavigate?.(child.id),
+                  children: child.label
+                },
+                child.id
+              )) }) : null
+            ] }, item.id);
+          }
+          return /* @__PURE__ */ jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsx(NavButton, { active: isActive, icon: item.icon, onClick: () => onNavigate?.(item.id), children: item.label }) }, item.id);
+        })
+      }
+    )
+  ] });
+}
+function SidebarBrand({
+  collapsed,
+  logo,
+  title
+}) {
+  if (!logo) return null;
+  const brandTitle = title ?? logo.title;
+  const logoMark = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn2(
+        "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+        logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+      ),
+      children: logo.url ? /* @__PURE__ */ jsx("img", { src: logo.url, alt: logo.title, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      BaseTooltip,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        content: brandTitle,
+        placement: "right",
+        children: /* @__PURE__ */ jsx(
+          BaseButton,
+          {
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            ariaLabel: typeof brandTitle === "string" ? brandTitle : logo.title,
+            className: "h-10 w-10 rounded-lg border-transparent bg-transparent p-0 shadow-none hover:bg-[hsl(var(--muted))]/60",
+            icon: logoMark,
+            iconOnly: true,
+            onClick: logo.onClick,
+            title: typeof brandTitle === "string" ? brandTitle : logo.title,
+            tone: "muted"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+      ariaLabel: logo.title,
+      className: "h-auto w-full justify-start gap-3 border-transparent bg-transparent p-0 text-left shadow-none hover:bg-transparent",
+      classNames: { icon: "h-9 w-9" },
+      icon: logoMark,
+      label: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-semibold text-[hsl(var(--foreground))]", children: brandTitle }),
+      onClick: logo.onClick,
+      title: typeof brandTitle === "string" ? brandTitle : logo.title,
+      tone: "muted"
+    }
+  );
+}
+function Sidebar({
+  accountMenu,
+  activeItemId,
+  actions = [],
+  collapsed,
+  collapsedAccountMenu,
+  footer,
+  header,
+  items,
+  logo,
+  onCollapsedChange,
+  onNavigate,
+  onRevealRoot,
+  revealRequest,
+  title
+}) {
+  if (collapsed) {
+    const activeRootId = findNavigationRootId(items, activeItemId);
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-2 shadow-sm", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-3 flex shrink-0 justify-center", children: header ?? /* @__PURE__ */ jsx(SidebarBrand, { collapsed: true, logo, title }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex min-h-0 flex-1 flex-col items-center gap-2 overflow-y-auto pb-3",
+          style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+          children: items.map((item) => {
+            const isActive = activeRootId === item.id;
+            return /* @__PURE__ */ jsx(
+              BaseTooltip,
+              {
+                appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+                content: item.label,
+                placement: "right",
+                children: /* @__PURE__ */ jsx(
+                  BaseButton,
+                  {
+                    appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+                    tone: "muted",
+                    active: isActive,
+                    iconOnly: true,
+                    icon: item.icon,
+                    onClick: () => {
+                      onRevealRoot?.(item.id);
+                      onCollapsedChange?.(false);
+                      if (item.children?.length) return;
+                      onNavigate?.(item.id);
+                    },
+                    title: typeof item.label === "string" ? item.label : void 0,
+                    ariaLabel: typeof item.label === "string" ? item.label : item.id,
+                    className: cn2(
+                      "h-10 w-10 rounded-lg border text-[hsl(var(--muted-foreground))] shadow-none",
+                      "hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.96]",
+                      isActive ? "border-[hsl(var(--input))] bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] shadow-sm" : "border-transparent hover:border-[hsl(var(--input))]/80 hover:bg-[hsl(var(--muted))]/70 hover:text-[hsl(var(--foreground))]"
+                    )
+                  }
+                )
+              },
+              item.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "-mx-2 mt-2 border-t border-[hsl(var(--input))] bg-[hsl(var(--background))] px-2 pt-2.5 pb-0.5", children: [
+        /* @__PURE__ */ jsx(NavigationLayoutActionButtons, { actions, compact: true }),
+        collapsedAccountMenu ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-center border-t border-[hsl(var(--input))] pt-2", children: collapsedAccountMenu }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col justify-between gap-0 overflow-y-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-5 pt-5 pb-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 shrink-0", children: header ?? /* @__PURE__ */ jsx(SidebarBrand, { logo, title }) }),
+    /* @__PURE__ */ jsx(
+      SidebarNavigationList,
+      {
+        activeItemId,
+        items,
+        onNavigate,
+        revealRequest
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "-mx-5 mt-2 border-t border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 pt-2.5 pb-1", children: [
+      /* @__PURE__ */ jsx(NavigationLayoutActionButtons, { actions, compact: false }),
+      footer,
+      accountMenu ? /* @__PURE__ */ jsx("div", { className: "mt-2 border-t border-[hsl(var(--input))] pt-2", children: accountMenu }) : null
+    ] })
+  ] });
+}
+function HeadbarChevronIcon({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: cn2("h-4 w-4 shrink-0 transition-transform duration-200", open && "rotate-180"),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function HeadbarNavMenuItem({
+  activeItemId,
+  isActive,
+  item,
+  label,
+  menuButtonRadiusClass,
+  menuContentRadiusClass,
+  menuItemRadiusClass,
+  onNavigate
+}) {
+  const [open, setOpen] = useState(false);
+  const closeTimerRef = useRef(null);
+  const clearCloseTimer = () => {
+    if (!closeTimerRef.current) return;
+    clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  };
+  const openMenu = () => {
+    clearCloseTimer();
+    setOpen(true);
+  };
+  const scheduleCloseMenu = () => {
+    clearCloseTimer();
+    closeTimerRef.current = setTimeout(() => {
+      setOpen(false);
+      closeTimerRef.current = null;
+    }, 120);
+  };
+  useEffect(() => clearCloseTimer, []);
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        active: isActive || open,
+        icon: item.icon,
+        endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open }),
+        label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        onClick: () => setOpen(true),
+        onMouseEnter: openMenu,
+        onMouseLeave: scheduleCloseMenu,
+        className: cn2(
+          "h-9 max-w-[12rem] border-transparent !bg-transparent px-3 text-sm font-medium shadow-none",
+          menuButtonRadiusClass,
+          isActive || open ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
+      {
+        align: "start",
+        sideOffset: 5,
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        onMouseEnter: openMenu,
+        onMouseLeave: scheduleCloseMenu,
+        className: cn2(
+          "z-50 min-w-56 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          menuContentRadiusClass
+        ),
+        children: item.children?.map((child) => /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            className: cn2(
+              "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))]",
+              menuItemRadiusClass,
+              child.id === activeItemId && "bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]"
+            ),
+            onSelect: () => {
+              setOpen(false);
+              onNavigate?.(child.id);
+            },
+            children: [
+              child.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label })
+            ]
+          },
+          child.id
+        ))
+      }
+    ) })
+  ] });
+}
+function HeadbarNav({
+  activeItemId,
+  activeRootId,
+  items,
+  menuRadius,
+  onNavigate
+}) {
+  const menuButtonRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const menuContentRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const menuItemRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-1", children: items.map((item) => {
+    const isActive = activeRootId === item.id || activeItemId === item.id;
+    const label = item.headbarLabel ?? item.label;
+    if (item.children?.length) {
+      return /* @__PURE__ */ jsx(
+        HeadbarNavMenuItem,
+        {
+          activeItemId,
+          isActive,
+          item,
+          label,
+          menuButtonRadiusClass,
+          menuContentRadiusClass,
+          menuItemRadiusClass,
+          onNavigate
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        active: isActive,
+        icon: item.icon,
+        label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        onClick: () => onNavigate?.(item.id),
+        className: cn2(
+          "h-9 max-w-[12rem] border-transparent !bg-transparent px-3 text-sm font-medium shadow-none",
+          menuButtonRadiusClass,
+          isActive ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+        )
+      },
+      item.id
+    );
+  }) });
+}
+function Headbar({
+  activeItemId,
+  activeRootId,
+  actions,
+  accountMenu,
+  extra,
+  layout,
+  logo,
+  navItems,
+  onNavigate
+}) {
+  const heightPx = clampHeadbarHeight(layout?.heightPx);
+  const layoutMode = layout?.layoutMode ?? "boxed";
+  const menuRadius = layout?.menuRadius ?? "default";
+  const logoHeightPx = getHeadbarLogoSizePx(heightPx);
+  const frameStyle = getHeadbarFrameStyle(layoutMode, heightPx);
+  const showBrandTitle = Boolean(layout?.brandTitle);
+  return /* @__PURE__ */ jsxs("header", { className: getHeadbarFrameClass(layoutMode), style: frameStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-start", children: logo ? /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        icon: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn2(
+              "flex items-center justify-center overflow-hidden rounded-lg",
+              logo.url ? "w-auto max-w-[min(22rem,30vw)] bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+            ),
+            style: logo.url ? { height: logoHeightPx } : { width: logoHeightPx, height: logoHeightPx },
+            children: logo.url ? /* @__PURE__ */ jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+          }
+        ),
+        label: showBrandTitle ? /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap text-base font-medium text-[hsl(var(--foreground))]", children: layout?.brandTitle }) : null,
+        ariaLabel: logo.title,
+        title: logo.title,
+        className: "h-auto min-w-0 justify-start border-transparent bg-transparent p-0 shadow-none hover:bg-transparent",
+        classNames: logo.url ? { icon: "!h-auto !w-auto shrink-0" } : void 0,
+        onClick: logo.onClick
+      }
+    ) : null }),
+    /* @__PURE__ */ jsx("div", { className: cn2("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsx(
+      HeadbarNav,
+      {
+        activeItemId,
+        activeRootId,
+        items: navItems,
+        menuRadius,
+        onNavigate
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
+      actions,
+      extra,
+      accountMenu
+    ] })
+  ] });
+}
+function NavigationLayout({
+  activeItemId,
+  activeRootId,
+  allowModeSwitch = false,
+  accountMenu,
+  children,
+  className,
+  collapsedSidebarAccountMenu,
+  collapsedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH,
+  defaultMode = "headbar",
+  defaultSidebarCollapsed = false,
+  expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
+  flush = false,
+  headbarActions,
+  headbarLayout,
+  logo,
+  mode,
+  navItems,
+  onModeChange,
+  onNavigate,
+  onSidebarCollapsedChange,
+  renderHeadbarExtra,
+  sidebarAccountMenu,
+  sidebarFooter,
+  sidebarHeader,
+  switchToHeadbarLabel = "Switch to headbar",
+  switchToSidebarLabel = "Switch to sidebar"
+}) {
+  const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);
+  const [revealRequest, setRevealRequest] = useState(null);
+  const isModeControlled = mode !== void 0;
+  const navigationMode = isModeControlled ? mode : uncontrolledMode;
+  const isHeadbarMode = navigationMode === "headbar";
+  const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
+  useEffect(() => {
+    if (!isModeControlled) {
+      setUncontrolledMode(defaultMode);
+    }
+  }, [defaultMode, isModeControlled]);
+  const setNavigationMode = (nextMode) => {
+    if (!isModeControlled) {
+      setUncontrolledMode(nextMode);
+    }
+    onModeChange?.(nextMode);
+  };
+  const setCollapsed = (collapsed) => {
+    setSidebarCollapsed(collapsed);
+    onSidebarCollapsedChange?.(collapsed);
+  };
+  const navigationActions = [];
+  if (allowModeSwitch) {
+    navigationActions.push({
+      id: "toggle-headbar",
+      label: switchToHeadbarLabel,
+      onClick: () => setNavigationMode("headbar"),
+      icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px] rotate-180", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 9h18" })
+      ] })
+    });
+  }
+  navigationActions.push({
+    id: "toggle-sidebar",
+    label: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+    onClick: () => setCollapsed(!sidebarCollapsed),
+    icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+      /* @__PURE__ */ jsx("path", { d: sidebarCollapsed ? "m14 9 3 3-3 3" : "m16 15-3-3 3-3" })
+    ] })
+  });
+  const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative h-full min-h-0 shrink-0 overflow-hidden transition-[width] duration-260",
+      style: { width: sidebarWidth, transitionTimingFunction: NAVIGATION_LAYOUT_TRANSITION_TIMING },
+      children: /* @__PURE__ */ jsx(
+        Sidebar,
+        {
+          accountMenu: sidebarAccountMenu ?? accountMenu,
+          activeItemId,
+          actions: navigationActions,
+          collapsed: sidebarCollapsed,
+          collapsedAccountMenu: collapsedSidebarAccountMenu ?? accountMenu,
+          footer: sidebarFooter,
+          header: sidebarHeader,
+          items: navItems,
+          logo,
+          onCollapsedChange: setCollapsed,
+          onNavigate,
+          onRevealRoot: (rootId) => setRevealRequest((prev) => ({ id: rootId, nonce: (prev?.nonce ?? 0) + 1 })),
+          revealRequest,
+          title: headbarLayout?.brandTitle
+        }
+      )
+    }
+  );
+  const header = isHeadbarMode ? /* @__PURE__ */ jsx(
+    Headbar,
+    {
+      activeItemId,
+      activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
+      actions: allowModeSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        headbarActions,
+        /* @__PURE__ */ jsx(
+          BaseButton,
+          {
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            tone: "muted",
+            icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsx("path", { d: "m14 9 3 3-3 3" })
+            ] }),
+            label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: switchToSidebarLabel }),
+            onClick: () => setNavigationMode("sidebar"),
+            className: cn2(
+              "h-auto min-w-0 shrink px-3 py-2 text-sm font-medium text-[hsl(var(--muted-foreground))] shadow-none hover:border-[hsl(var(--input))]/70 hover:bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]",
+              getHeadbarMenuRadiusClass(headbarLayout?.menuRadius)
+            )
+          }
+        )
+      ] }) : headbarActions,
+      accountMenu,
+      extra: renderHeadbarExtra,
+      layout: headbarLayout,
+      logo,
+      navItems,
+      onNavigate
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(AppLayout, { header, sidebar, flush, className, children });
+}
 
-export { AppHeader, AppLayout, AppSidebar, NavButton, cn };
+export { AppHeader, AppLayout, AppSidebar, NavButton, NavigationLayout, UserAccountMenu, cn2 as cn };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map