@tomny-dev/uzi 0.5.0 → 0.6.0

package/dist/index39.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index39.cjs","names":[],"sources":["../src/components/app-shell/AppShell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { TopBar, type TopBarProps } from \"../top-bar/TopBar\";\nimport styles from \"./app-shell.module.css\";\n\nconst DESKTOP_BREAKPOINT = 960;\n\nfunction getIsDesktop() {\n  if (typeof window === \"undefined\") return false;\n  return window.innerWidth >= DESKTOP_BREAKPOINT;\n}\n\nexport type AppShellProps = {\n  /** Primary page content rendered in the main area. */\n  children: ReactNode;\n  /** Sidebar navigation or custom content. */\n  sidebar: ReactNode;\n  /** Brand element rendered next to the hamburger (text or JSX). */\n  brand?: ReactNode;\n  /** Optional brand href; when provided the brand renders as an anchor. */\n  brandHref?: string;\n  /** Optional content after the brand on the left side of the top bar. */\n  topbarStart?: ReactNode;\n  /** Optional content aligned to the right side of the top bar. */\n  topbarEnd?: ReactNode;\n  /** Optional built-in theme toggle for the top bar. */\n  showThemeToggle?: boolean;\n  themeToggleProps?: TopBarProps[\"themeToggleProps\"];\n  topBarBrandingLocation?: TopBarProps[\"brandingLocation\"];\n  /** Custom class names for styling overrides. */\n  className?: string;\n  sidebarClassName?: string;\n  topbarClassName?: string;\n  mainClassName?: string;\n  /** Sets the sidebar width (e.g., `260`, `\"18rem\"`). */\n  sidebarWidth?: number | string;\n  /**\n   * Closes the sidebar on mobile whenever this value changes.\n   * Useful for reacting to route/pathname changes.\n   */\n  closeSidebarOnChangeKey?: unknown;\n  /** Label for the hamburger button (aria-label). */\n  hamburgerLabel?: string;\n  /** Optional callback fired whenever the sidebar open state changes. */\n  onSidebarToggle?: (open: boolean) => void;\n};\n\n/**\n  * Responsive application shell with a collapsible sidebar and sticky top bar.\n  *\n  * - Sidebar opens by default on desktop, collapses on mobile.\n  * - Closes on outside click/scroll/touch when in mobile mode.\n  * - Provides optional hook to close the sidebar when a prop value changes\n  *   (e.g., route transitions).\n  */\nexport function AppShell({\n  children,\n  sidebar,\n  brand,\n  brandHref,\n  topbarStart,\n  topbarEnd,\n  showThemeToggle = false,\n  themeToggleProps,\n  topBarBrandingLocation = \"left\",\n  className,\n  sidebarClassName,\n  topbarClassName,\n  mainClassName,\n  sidebarWidth,\n  closeSidebarOnChangeKey,\n  hamburgerLabel = \"Toggle navigation\",\n  onSidebarToggle,\n}: AppShellProps) {\n  const [isDesktop, setIsDesktop] = useState(false);\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n  const [transitionsReady, setTransitionsReady] = useState(false);\n  const prevIsDesktopRef = useRef(false);\n  const closeKeyRef = useRef(closeSidebarOnChangeKey);\n\n  const sidebarRef = useRef<HTMLElement | null>(null);\n  const hamburgerRef = useRef<HTMLButtonElement | null>(null);\n  const mainRef = useRef<HTMLElement | null>(null);\n  const sidebarId = useId();\n\n  useEffect(() => {\n    const desktop = getIsDesktop();\n    setIsDesktop(desktop);\n    setSidebarOpen(desktop);\n    prevIsDesktopRef.current = desktop;\n    const transitionFrame = window.requestAnimationFrame(() => {\n      setTransitionsReady(true);\n    });\n\n    const handleResize = () => {\n      const nowDesktop = getIsDesktop();\n      setIsDesktop(nowDesktop);\n      if (nowDesktop !== prevIsDesktopRef.current) {\n        setSidebarOpen(nowDesktop);\n        prevIsDesktopRef.current = nowDesktop;\n      }\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.cancelAnimationFrame(transitionFrame);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  // Close the sidebar when clicking outside or scrolling on mobile.\n  useEffect(() => {\n    if (isDesktop || !sidebarOpen) return;\n\n    const mainElement = mainRef.current;\n    const closeSidebar = () => setSidebarOpen(false);\n\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node | null;\n      if (!target) return;\n      if (sidebarRef.current?.contains(target)) return;\n      if (hamburgerRef.current?.contains(target)) return;\n      closeSidebar();\n    };\n\n    const timeoutId = window.setTimeout(() => {\n      document.addEventListener(\"pointerdown\", onPointerDown);\n      window.addEventListener(\"scroll\", closeSidebar, { passive: true });\n      mainElement?.addEventListener(\"scroll\", closeSidebar, { passive: true });\n      document.addEventListener(\"touchmove\", closeSidebar, { passive: true });\n    }, 10);\n\n    return () => {\n      window.clearTimeout(timeoutId);\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      window.removeEventListener(\"scroll\", closeSidebar);\n      mainElement?.removeEventListener(\"scroll\", closeSidebar);\n      document.removeEventListener(\"touchmove\", closeSidebar);\n    };\n  }, [sidebarOpen, isDesktop]);\n\n  // Allow consumers to request a mobile sidebar close when a value changes (e.g., pathname).\n  useEffect(() => {\n    if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {\n      setSidebarOpen(false);\n    }\n    closeKeyRef.current = closeSidebarOnChangeKey;\n  }, [closeSidebarOnChangeKey, isDesktop]);\n\n  useEffect(() => {\n    onSidebarToggle?.(sidebarOpen);\n  }, [sidebarOpen, onSidebarToggle]);\n\n  const toggleSidebar = () => setSidebarOpen((open) => !open);\n\n  const sidebarWidthValue =\n    sidebarWidth === undefined\n      ? undefined\n      : typeof sidebarWidth === \"number\"\n        ? `${sidebarWidth}px`\n        : sidebarWidth;\n\n  const shellStyle: CSSProperties | undefined = sidebarWidthValue\n    ? { [\"--app-shell-sidebar-width\" as string]: sidebarWidthValue }\n    : undefined;\n\n  const shellClasses = cx(\n    styles.appShell,\n    transitionsReady && styles.appShellAnimated,\n    sidebarOpen ? styles.appShellOpen : styles.appShellCollapsed,\n    className,\n  );\n\n  const sidebarClasses = cx(\n    styles.appShellSidebar,\n    sidebarOpen && styles.appShellSidebarOpen,\n    sidebarClassName,\n  );\n\n  return (\n    <div\n      className={shellClasses}\n      style={shellStyle}\n      data-app-shell\n      data-desktop={isDesktop ? \"true\" : \"false\"}\n      data-sidebar-open={sidebarOpen ? \"true\" : \"false\"}\n    >\n      <TopBar\n        className={cx(styles.appShellTopbar, topbarClassName)}\n        leading={\n          <button\n            ref={hamburgerRef}\n            type=\"button\"\n            className={styles.appShellHamburger}\n            onClick={toggleSidebar}\n            aria-label={hamburgerLabel}\n            aria-expanded={sidebarOpen}\n            aria-controls={sidebarId}\n          >\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M3 6h18M3 12h18M3 18h18\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n        }\n        brand={brand}\n        brandHref={brandHref}\n        brandingLocation={topBarBrandingLocation}\n        start={topbarStart}\n        actions={topbarEnd}\n        showThemeToggle={showThemeToggle}\n        themeToggleProps={themeToggleProps}\n      />\n      {!isDesktop && sidebarOpen && (\n        <div\n          className={styles.appShellBackdrop}\n          onClick={() => setSidebarOpen(false)}\n          onTouchStart={() => setSidebarOpen(false)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <aside ref={sidebarRef} id={sidebarId} className={sidebarClasses} aria-label=\"Sidebar navigation\">\n        {sidebar}\n      </aside>\n      <main ref={mainRef} className={cx(styles.appShellMain, mainClassName)}>\n        {children}\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index39.cjs","names":[],"sources":["../src/components/top-bar/TopBar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport {\n  ThemeToggleButton,\n  type ThemeToggleButtonProps,\n} from \"../theme-toggle-button/ThemeToggleButton\";\nimport styles from \"./top-bar.module.css\";\n\nexport type TopBarProps = HTMLAttributes<HTMLElement> & {\n  leading?: ReactNode;\n  brand?: ReactNode;\n  brandHref?: string;\n  brandingLocation?: \"left\" | \"center\";\n  /** Content rendered after the brand in the left region (e.g. breadcrumbs, search). */\n  start?: ReactNode;\n  /** Content rendered in the center region. */\n  center?: ReactNode;\n  actions?: ReactNode;\n  showThemeToggle?: boolean;\n  themeToggleProps?: ThemeToggleButtonProps;\n  innerClassName?: string;\n  isSticky?: boolean;\n  sticky?: boolean;\n};\n\nexport function TopBar({\n  leading,\n  brand,\n  brandHref,\n  brandingLocation = \"left\",\n  start,\n  center,\n  actions,\n  showThemeToggle = false,\n  themeToggleProps,\n  className,\n  innerClassName,\n  isSticky,\n  sticky = true,\n  children,\n  ...rest\n}: TopBarProps) {\n  const shouldStick = isSticky ?? sticky;\n  const brandNode = !brand ? null : brandHref ? (\n    <a href={brandHref} className={styles.topBarBrand}>\n      <span className={styles.topBarBrandContent}>{brand}</span>\n    </a>\n  ) : (\n    <div className={styles.topBarBrand}>\n      <span className={styles.topBarBrandContent}>{brand}</span>\n    </div>\n  );\n\n  return (\n    <header\n      className={cx(styles.topBar, !shouldStick && styles.topBarStatic, className)}\n      {...rest}\n    >\n      <div className={cx(styles.topBarInner, innerClassName)}>\n        <div className={styles.topBarStart}>\n          {leading}\n          {brandingLocation === \"left\" && brandNode}\n          {start}\n        </div>\n        {(brandNode && brandingLocation === \"center\") || center || children ? (\n          <div className={styles.topBarCenter}>\n            <div className={styles.topBarCenterGroup}>\n              {brandingLocation === \"center\" && brandNode}\n              {center ?? children}\n            </div>\n          </div>\n        ) : null}\n        <div className={styles.topBarActions}>\n          {showThemeToggle && <ThemeToggleButton {...themeToggleProps} />}\n          {actions}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,OAAO,EACrB,SACA,OACA,WACA,mBAAmB,QACnB,OACA,QACA,SACA,kBAAkB,OAClB,kBACA,WACA,gBACA,UACA,SAAS,MACT,UACA,GAAG,QACW;CACd,MAAM,cAAc,YAAY;CAChC,MAAM,YAAY,CAAC,QAAQ,OAAO,YAChC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EAAG,MAAM;EAAW,WAAW,uBAAA,QAAO;YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,uBAAA,QAAO;aAAqB;EAAY,CAAA;CACxD,CAAA,IAEH,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,uBAAA,QAAO;YACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,uBAAA,QAAO;aAAqB;EAAY,CAAA;CACtD,CAAA;CAGP,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,WAAW,WAAA,GAAG,uBAAA,QAAO,QAAQ,CAAC,eAAe,uBAAA,QAAO,cAAc,SAAS;EAC3E,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW,WAAA,GAAG,uBAAA,QAAO,aAAa,cAAc;aAArD;IACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,uBAAA,QAAO;eAAvB;MACG;MACA,qBAAqB,UAAU;MAC/B;KACE;;IACH,aAAa,qBAAqB,YAAa,UAAU,WACzD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW,uBAAA,QAAO;eACrB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAW,uBAAA,QAAO;gBAAvB,CACG,qBAAqB,YAAY,WACjC,UAAU,QACR;;IACF,CAAA,IACH;IACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,uBAAA,QAAO;eAAvB,CACG,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAAA,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,GAC7D,OACE;;GACF;;CACC,CAAA;AAEZ"}

package/dist/index39.js

@@ -1,45 +1,35 @@
-//#region src/components/sidebar-nav/sidebar-nav.module.css
-var sidebarNav = "uzi-sidebar-nav-module__sidebarNav__eUI5c";
-var sidebarNavCollapsed = "uzi-sidebar-nav-module__sidebarNavCollapsed__xTM9s";
-var header = "uzi-sidebar-nav-module__header__Y4NLy";
-var footer = "uzi-sidebar-nav-module__footer__GjWky";
-var sections = "uzi-sidebar-nav-module__sections__mXuGQ";
-var section = "uzi-sidebar-nav-module__section__yjtCY";
-var sectionItems = "uzi-sidebar-nav-module__sectionItems__tNcph";
-var sectionLabel = "uzi-sidebar-nav-module__sectionLabel__Wx94m";
-var item = "uzi-sidebar-nav-module__item__uMHkJ";
-var itemWithoutIcon = "uzi-sidebar-nav-module__itemWithoutIcon__7gzPd";
-var itemActive = "uzi-sidebar-nav-module__itemActive__wBbiS";
-var itemCollapsed = "uzi-sidebar-nav-module__itemCollapsed__jLJN-";
-var itemDisabled = "uzi-sidebar-nav-module__itemDisabled__Yf8Il";
-var icon = "uzi-sidebar-nav-module__icon__tyrUg";
-var itemBody = "uzi-sidebar-nav-module__itemBody__wI0iy";
-var labelRow = "uzi-sidebar-nav-module__labelRow__D8sEJ";
-var label = "uzi-sidebar-nav-module__label__A-nt6";
-var description = "uzi-sidebar-nav-module__description__Xf3Si";
-var badge = "uzi-sidebar-nav-module__badge__-hnFd";
-var sidebar_nav_module_default = {
-	sidebarNav,
-	sidebarNavCollapsed,
-	header,
-	footer,
-	sections,
-	section,
-	sectionItems,
-	sectionLabel,
-	item,
-	itemWithoutIcon,
-	itemActive,
-	itemCollapsed,
-	itemDisabled,
-	icon,
-	itemBody,
-	labelRow,
-	label,
-	description,
-	badge
+//#region src/components/app-shell/app-shell.module.css
+var appShell = "uzi-app-shell-module__appShell__S0cVI";
+var appShellAnimated = "uzi-app-shell-module__appShellAnimated__-CRIl";
+var appShellOpen = "uzi-app-shell-module__appShellOpen__1rZUl";
+var appShellCollapsed = "uzi-app-shell-module__appShellCollapsed__fSasN";
+var appShellTopbar = "uzi-app-shell-module__appShellTopbar__rgXsW";
+var appShellTopbarLeft = "uzi-app-shell-module__appShellTopbarLeft__-EVuB";
+var appShellTopbarStart = "uzi-app-shell-module__appShellTopbarStart__XXQpq";
+var appShellTopbarRight = "uzi-app-shell-module__appShellTopbarRight__l1G57";
+var appShellBrand = "uzi-app-shell-module__appShellBrand__TXwyN";
+var appShellHamburger = "uzi-app-shell-module__appShellHamburger__BciFA";
+var appShellSidebar = "uzi-app-shell-module__appShellSidebar__oY7uj";
+var appShellMain = "uzi-app-shell-module__appShellMain__eHP2r";
+var appShellBackdrop = "uzi-app-shell-module__appShellBackdrop__y31xs";
+var appShellSidebarOpen = "uzi-app-shell-module__appShellSidebarOpen__Z5AIo";
+var app_shell_module_default = {
+	appShell,
+	appShellAnimated,
+	appShellOpen,
+	appShellCollapsed,
+	appShellTopbar,
+	appShellTopbarLeft,
+	appShellTopbarStart,
+	appShellTopbarRight,
+	appShellBrand,
+	appShellHamburger,
+	appShellSidebar,
+	appShellMain,
+	appShellBackdrop,
+	appShellSidebarOpen
 };
 //#endregion
-export { badge, sidebar_nav_module_default as default, description, footer, header, icon, item, itemActive, itemBody, itemCollapsed, itemDisabled, itemWithoutIcon, label, labelRow, section, sectionItems, sectionLabel, sections, sidebarNav, sidebarNavCollapsed };
+export { appShell, appShellAnimated, appShellBackdrop, appShellBrand, appShellCollapsed, appShellHamburger, appShellMain, appShellOpen, appShellSidebar, appShellSidebarOpen, appShellTopbar, appShellTopbarLeft, appShellTopbarRight, appShellTopbarStart, app_shell_module_default as default };
 
 //# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.js","names":[],"sources":["../src/components/sidebar-nav/sidebar-nav.module.css"],"sourcesContent":[".sidebarNav {\n  --sidebar-nav-icon-size: 18px;\n  --sidebar-nav-icon-size-mobile: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: stretch;\n  min-height: 0;\n}\n\n.sidebarNavCollapsed {\n  gap: 10px;\n}\n\n.header,\n.footer {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.footer {\n  margin-top: auto;\n  padding-top: 12px;\n  border-top: 1px solid var(--border);\n}\n\n.sections {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionItems {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionLabel {\n  padding: 0 10px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n  opacity: 0.75;\n}\n\n.item {\n  color: var(--foreground);\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 10px 12px 10px 10px;\n  border-radius: 10px;\n  text-decoration: none;\n  font-size: 14px;\n  display: grid;\n  grid-template-columns: var(--sidebar-nav-icon-size) minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  line-height: 1.2;\n  transition: background 120ms ease, color 120ms ease;\n}\n\n.item.itemWithoutIcon {\n  grid-template-columns: minmax(0, 1fr);\n}\n\nbutton.item {\n  font-family: inherit;\n  cursor: pointer;\n}\n\n.item:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.item:hover {\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n}\n\n.item.itemActive {\n  background: color-mix(in srgb, var(--primary) 18%, transparent);\n  color: var(--foreground);\n  font-weight: 700;\n}\n\n.itemCollapsed {\n  grid-template-columns: 1fr;\n  justify-items: center;\n  padding-right: 10px;\n  padding-left: 10px;\n}\n\n.itemDisabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.icon {\n  width: var(--sidebar-nav-icon-size);\n  height: var(--sidebar-nav-icon-size);\n  min-width: var(--sidebar-nav-icon-size);\n  color: var(--muted-foreground);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n.icon > * {\n  width: 100% !important;\n  height: 100% !important;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.icon :where(svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n  stroke: currentColor;\n}\n\n.item.itemActive .icon {\n  color: var(--primary);\n}\n\n.itemBody {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 3px;\n  overflow: hidden;\n}\n\n.labelRow {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--muted-foreground);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid var(--border);\n  background: color-mix(in srgb, var(--foreground) 4%, transparent);\n  color: var(--muted-foreground);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n@media (max-width: 960px) {\n  .sidebarNav {\n    gap: 10px;\n  }\n\n  .sections {\n    gap: 12px;\n  }\n\n  .sectionItems {\n    gap: 6px;\n  }\n\n  .item {\n    padding: 9px 10px 9px 8px;\n    border-radius: 9px;\n    font-size: 14px;\n    grid-template-columns: var(--sidebar-nav-icon-size-mobile) minmax(0, 1fr);\n    column-gap: 8px;\n  }\n\n  .icon {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n    min-width: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .icon :where(svg) {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .description {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .item {\n    padding: 8px 9px 8px 7px;\n    font-size: 13px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index39.js","names":[],"sources":["../src/components/app-shell/app-shell.module.css"],"sourcesContent":[".appShell {\n  display: grid;\n  grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.appShellAnimated {\n  transition: grid-template-columns 200ms ease;\n}\n\n.appShell.appShellOpen {\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n}\n\n.appShell.appShellCollapsed {\n  grid-template-columns: 0 1fr;\n}\n\n.appShellTopbar {\n  --ts-topbar-bg: var(--surface-topbar, color-mix(in srgb, var(--background) 92%, transparent));\n  --ts-topbar-border: var(--border);\n  --ts-topbar-brand-fg: var(--foreground);\n  grid-column: 1 / -1;\n  min-height: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top));\n  padding-left: 0;\n  padding-right: 0;\n  box-shadow: none;\n}\n\n.appShellTopbarLeft {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.appShellTopbarStart {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.appShellTopbarRight {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.appShellTopbarRight > * {\n  min-width: 0;\n}\n\n.appShellBrand {\n  font-size: 26px;\n  color: var(--foreground);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.appShellHamburger {\n  background: transparent;\n  border: none;\n  padding: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n\n.appShellHamburger:hover {\n  background: var(--accent);\n}\n\n.appShellHamburger:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.appShellHamburger svg {\n  width: 28px;\n  height: 28px;\n}\n\n.appShellSidebar {\n  border-right: 1px solid var(--border);\n  background: var(--panel);\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.appShellAnimated .appShellSidebar {\n  transition: transform 200ms ease, opacity 200ms ease;\n}\n\n.appShell.appShellCollapsed .appShellSidebar {\n  transform: translateX(-110%);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.appShellMain {\n  overflow-y: auto;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.appShellBackdrop {\n  display: none;\n}\n\n@media (max-width: 960px) {\n  .appShellBackdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 14;\n  }\n\n  .appShell {\n    --app-shell-topbar-height: 56px;\n    grid-template-columns: 1fr;\n    grid-template-rows: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top)) 1fr;\n  }\n\n  .appShell.appShellOpen,\n  .appShell.appShellCollapsed {\n    grid-template-columns: 1fr;\n  }\n\n  .appShellSidebar {\n    display: block;\n    position: fixed;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    left: 0;\n    bottom: 0;\n    width: var(--app-shell-sidebar-width, 240px);\n    max-width: 80vw;\n    background: var(--panel);\n    padding: 16px 12px;\n    transform: translateX(-105%);\n    z-index: 15;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\n  }\n\n  .appShellSidebar.appShellSidebarOpen {\n    transform: translateX(0);\n  }\n\n  .appShellTopbar {\n    padding-left: max(12px, env(safe-area-inset-left));\n    padding-right: max(12px, env(safe-area-inset-right));\n    gap: 10px;\n  }\n\n  .appShellTopbarLeft {\n    gap: 10px;\n    flex: 1;\n  }\n\n  .appShellTopbarStart {\n    min-width: 0;\n  }\n\n  .appShellTopbarRight {\n    gap: 6px;\n  }\n\n  .appShellBrand {\n    font-size: 24px;\n    max-width: 50vw;\n  }\n\n  .appShellHamburger {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n  }\n\n  .appShellHamburger svg {\n    width: 24px;\n    height: 24px;\n  }\n}\n\n@media (max-width: 640px) {\n  .appShellTopbar {\n    gap: 8px;\n  }\n\n  .appShellBrand {\n    font-size: 22px;\n    max-width: 34vw;\n  }\n\n  .appShellTopbarRight {\n    max-width: 44vw;\n  }\n}\n\n@media (max-width: 480px) {\n  .appShellBrand {\n    font-size: 20px;\n    max-width: 30vw;\n  }\n}\n"],"mappings":""}

package/dist/index40.cjs

@@ -1,64 +1,49 @@
-//#region src/components/sidebar-nav/sidebar-nav.module.css
-var sidebarNav = "uzi-sidebar-nav-module__sidebarNav__eUI5c";
-var sidebarNavCollapsed = "uzi-sidebar-nav-module__sidebarNavCollapsed__xTM9s";
-var header = "uzi-sidebar-nav-module__header__Y4NLy";
-var footer = "uzi-sidebar-nav-module__footer__GjWky";
-var sections = "uzi-sidebar-nav-module__sections__mXuGQ";
-var section = "uzi-sidebar-nav-module__section__yjtCY";
-var sectionItems = "uzi-sidebar-nav-module__sectionItems__tNcph";
-var sectionLabel = "uzi-sidebar-nav-module__sectionLabel__Wx94m";
-var item = "uzi-sidebar-nav-module__item__uMHkJ";
-var itemWithoutIcon = "uzi-sidebar-nav-module__itemWithoutIcon__7gzPd";
-var itemActive = "uzi-sidebar-nav-module__itemActive__wBbiS";
-var itemCollapsed = "uzi-sidebar-nav-module__itemCollapsed__jLJN-";
-var itemDisabled = "uzi-sidebar-nav-module__itemDisabled__Yf8Il";
-var icon = "uzi-sidebar-nav-module__icon__tyrUg";
-var itemBody = "uzi-sidebar-nav-module__itemBody__wI0iy";
-var labelRow = "uzi-sidebar-nav-module__labelRow__D8sEJ";
-var label = "uzi-sidebar-nav-module__label__A-nt6";
-var description = "uzi-sidebar-nav-module__description__Xf3Si";
-var badge = "uzi-sidebar-nav-module__badge__-hnFd";
-var sidebar_nav_module_default = {
-	sidebarNav,
-	sidebarNavCollapsed,
-	header,
-	footer,
-	sections,
-	section,
-	sectionItems,
-	sectionLabel,
-	item,
-	itemWithoutIcon,
-	itemActive,
-	itemCollapsed,
-	itemDisabled,
-	icon,
-	itemBody,
-	labelRow,
-	label,
-	description,
-	badge
+//#region src/components/app-shell/app-shell.module.css
+var appShell = "uzi-app-shell-module__appShell__S0cVI";
+var appShellAnimated = "uzi-app-shell-module__appShellAnimated__-CRIl";
+var appShellOpen = "uzi-app-shell-module__appShellOpen__1rZUl";
+var appShellCollapsed = "uzi-app-shell-module__appShellCollapsed__fSasN";
+var appShellTopbar = "uzi-app-shell-module__appShellTopbar__rgXsW";
+var appShellTopbarLeft = "uzi-app-shell-module__appShellTopbarLeft__-EVuB";
+var appShellTopbarStart = "uzi-app-shell-module__appShellTopbarStart__XXQpq";
+var appShellTopbarRight = "uzi-app-shell-module__appShellTopbarRight__l1G57";
+var appShellBrand = "uzi-app-shell-module__appShellBrand__TXwyN";
+var appShellHamburger = "uzi-app-shell-module__appShellHamburger__BciFA";
+var appShellSidebar = "uzi-app-shell-module__appShellSidebar__oY7uj";
+var appShellMain = "uzi-app-shell-module__appShellMain__eHP2r";
+var appShellBackdrop = "uzi-app-shell-module__appShellBackdrop__y31xs";
+var appShellSidebarOpen = "uzi-app-shell-module__appShellSidebarOpen__Z5AIo";
+var app_shell_module_default = {
+	appShell,
+	appShellAnimated,
+	appShellOpen,
+	appShellCollapsed,
+	appShellTopbar,
+	appShellTopbarLeft,
+	appShellTopbarStart,
+	appShellTopbarRight,
+	appShellBrand,
+	appShellHamburger,
+	appShellSidebar,
+	appShellMain,
+	appShellBackdrop,
+	appShellSidebarOpen
 };
 //#endregion
-exports.badge = badge;
-exports.default = sidebar_nav_module_default;
-exports.description = description;
-exports.footer = footer;
-exports.header = header;
-exports.icon = icon;
-exports.item = item;
-exports.itemActive = itemActive;
-exports.itemBody = itemBody;
-exports.itemCollapsed = itemCollapsed;
-exports.itemDisabled = itemDisabled;
-exports.itemWithoutIcon = itemWithoutIcon;
-exports.label = label;
-exports.labelRow = labelRow;
-exports.section = section;
-exports.sectionItems = sectionItems;
-exports.sectionLabel = sectionLabel;
-exports.sections = sections;
-exports.sidebarNav = sidebarNav;
-exports.sidebarNavCollapsed = sidebarNavCollapsed;
+exports.appShell = appShell;
+exports.appShellAnimated = appShellAnimated;
+exports.appShellBackdrop = appShellBackdrop;
+exports.appShellBrand = appShellBrand;
+exports.appShellCollapsed = appShellCollapsed;
+exports.appShellHamburger = appShellHamburger;
+exports.appShellMain = appShellMain;
+exports.appShellOpen = appShellOpen;
+exports.appShellSidebar = appShellSidebar;
+exports.appShellSidebarOpen = appShellSidebarOpen;
+exports.appShellTopbar = appShellTopbar;
+exports.appShellTopbarLeft = appShellTopbarLeft;
+exports.appShellTopbarRight = appShellTopbarRight;
+exports.appShellTopbarStart = appShellTopbarStart;
+exports.default = app_shell_module_default;
 
 //# sourceMappingURL=index40.cjs.map

package/dist/index40.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index40.cjs","names":[],"sources":["../src/components/sidebar-nav/sidebar-nav.module.css"],"sourcesContent":[".sidebarNav {\n  --sidebar-nav-icon-size: 18px;\n  --sidebar-nav-icon-size-mobile: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: stretch;\n  min-height: 0;\n}\n\n.sidebarNavCollapsed {\n  gap: 10px;\n}\n\n.header,\n.footer {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.footer {\n  margin-top: auto;\n  padding-top: 12px;\n  border-top: 1px solid var(--border);\n}\n\n.sections {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionItems {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionLabel {\n  padding: 0 10px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n  opacity: 0.75;\n}\n\n.item {\n  color: var(--foreground);\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 10px 12px 10px 10px;\n  border-radius: 10px;\n  text-decoration: none;\n  font-size: 14px;\n  display: grid;\n  grid-template-columns: var(--sidebar-nav-icon-size) minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  line-height: 1.2;\n  transition: background 120ms ease, color 120ms ease;\n}\n\n.item.itemWithoutIcon {\n  grid-template-columns: minmax(0, 1fr);\n}\n\nbutton.item {\n  font-family: inherit;\n  cursor: pointer;\n}\n\n.item:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.item:hover {\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n}\n\n.item.itemActive {\n  background: color-mix(in srgb, var(--primary) 18%, transparent);\n  color: var(--foreground);\n  font-weight: 700;\n}\n\n.itemCollapsed {\n  grid-template-columns: 1fr;\n  justify-items: center;\n  padding-right: 10px;\n  padding-left: 10px;\n}\n\n.itemDisabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.icon {\n  width: var(--sidebar-nav-icon-size);\n  height: var(--sidebar-nav-icon-size);\n  min-width: var(--sidebar-nav-icon-size);\n  color: var(--muted-foreground);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n.icon > * {\n  width: 100% !important;\n  height: 100% !important;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.icon :where(svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n  stroke: currentColor;\n}\n\n.item.itemActive .icon {\n  color: var(--primary);\n}\n\n.itemBody {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 3px;\n  overflow: hidden;\n}\n\n.labelRow {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--muted-foreground);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid var(--border);\n  background: color-mix(in srgb, var(--foreground) 4%, transparent);\n  color: var(--muted-foreground);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n@media (max-width: 960px) {\n  .sidebarNav {\n    gap: 10px;\n  }\n\n  .sections {\n    gap: 12px;\n  }\n\n  .sectionItems {\n    gap: 6px;\n  }\n\n  .item {\n    padding: 9px 10px 9px 8px;\n    border-radius: 9px;\n    font-size: 14px;\n    grid-template-columns: var(--sidebar-nav-icon-size-mobile) minmax(0, 1fr);\n    column-gap: 8px;\n  }\n\n  .icon {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n    min-width: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .icon :where(svg) {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .description {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .item {\n    padding: 8px 9px 8px 7px;\n    font-size: 13px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index40.cjs","names":[],"sources":["../src/components/app-shell/app-shell.module.css"],"sourcesContent":[".appShell {\n  display: grid;\n  grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.appShellAnimated {\n  transition: grid-template-columns 200ms ease;\n}\n\n.appShell.appShellOpen {\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n}\n\n.appShell.appShellCollapsed {\n  grid-template-columns: 0 1fr;\n}\n\n.appShellTopbar {\n  --ts-topbar-bg: var(--surface-topbar, color-mix(in srgb, var(--background) 92%, transparent));\n  --ts-topbar-border: var(--border);\n  --ts-topbar-brand-fg: var(--foreground);\n  grid-column: 1 / -1;\n  min-height: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top));\n  padding-left: 0;\n  padding-right: 0;\n  box-shadow: none;\n}\n\n.appShellTopbarLeft {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.appShellTopbarStart {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.appShellTopbarRight {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.appShellTopbarRight > * {\n  min-width: 0;\n}\n\n.appShellBrand {\n  font-size: 26px;\n  color: var(--foreground);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.appShellHamburger {\n  background: transparent;\n  border: none;\n  padding: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n\n.appShellHamburger:hover {\n  background: var(--accent);\n}\n\n.appShellHamburger:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.appShellHamburger svg {\n  width: 28px;\n  height: 28px;\n}\n\n.appShellSidebar {\n  border-right: 1px solid var(--border);\n  background: var(--panel);\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.appShellAnimated .appShellSidebar {\n  transition: transform 200ms ease, opacity 200ms ease;\n}\n\n.appShell.appShellCollapsed .appShellSidebar {\n  transform: translateX(-110%);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.appShellMain {\n  overflow-y: auto;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.appShellBackdrop {\n  display: none;\n}\n\n@media (max-width: 960px) {\n  .appShellBackdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 14;\n  }\n\n  .appShell {\n    --app-shell-topbar-height: 56px;\n    grid-template-columns: 1fr;\n    grid-template-rows: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top)) 1fr;\n  }\n\n  .appShell.appShellOpen,\n  .appShell.appShellCollapsed {\n    grid-template-columns: 1fr;\n  }\n\n  .appShellSidebar {\n    display: block;\n    position: fixed;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    left: 0;\n    bottom: 0;\n    width: var(--app-shell-sidebar-width, 240px);\n    max-width: 80vw;\n    background: var(--panel);\n    padding: 16px 12px;\n    transform: translateX(-105%);\n    z-index: 15;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\n  }\n\n  .appShellSidebar.appShellSidebarOpen {\n    transform: translateX(0);\n  }\n\n  .appShellTopbar {\n    padding-left: max(12px, env(safe-area-inset-left));\n    padding-right: max(12px, env(safe-area-inset-right));\n    gap: 10px;\n  }\n\n  .appShellTopbarLeft {\n    gap: 10px;\n    flex: 1;\n  }\n\n  .appShellTopbarStart {\n    min-width: 0;\n  }\n\n  .appShellTopbarRight {\n    gap: 6px;\n  }\n\n  .appShellBrand {\n    font-size: 24px;\n    max-width: 50vw;\n  }\n\n  .appShellHamburger {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n  }\n\n  .appShellHamburger svg {\n    width: 24px;\n    height: 24px;\n  }\n}\n\n@media (max-width: 640px) {\n  .appShellTopbar {\n    gap: 8px;\n  }\n\n  .appShellBrand {\n    font-size: 22px;\n    max-width: 34vw;\n  }\n\n  .appShellTopbarRight {\n    max-width: 44vw;\n  }\n}\n\n@media (max-width: 480px) {\n  .appShellBrand {\n    font-size: 20px;\n    max-width: 30vw;\n  }\n}\n"],"mappings":""}

package/dist/index40.js

@@ -1,174 +1,150 @@
 "use client";
 import { cx } from "./index3.js";
-import sidebar_nav_module_default from "./index39.js";
-import { useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/sidebar-nav/SidebarNav.tsx
-var isActivePrefix = (item, path) => {
-	if (item.active !== void 0) return item.active;
-	if (!item.href) return false;
-	if (!path) return false;
-	if (item.href === "/") return path === "/";
-	return path.startsWith(item.href);
-};
-var isActiveExact = (item, path) => {
-	if (item.active !== void 0) return item.active;
-	if (!item.href) return false;
-	if (!path) return false;
-	if (item.href === "/") return path === "/";
-	const normalizedHref = item.href.endsWith("/") ? item.href.slice(0, -1) : item.href;
-	return normalizedHref === path || path.startsWith(`${normalizedHref}/`);
-};
-var isNaturalPrefixMatch = (href, path) => {
-	if (href === "/") return path === "/";
-	return path.startsWith(href);
-};
-var isNaturalExactMatch = (href, path) => {
-	if (href === "/") return path === "/";
-	return (href.endsWith("/") ? href.slice(0, -1) : href) === path;
-};
-var hrefLength = (href) => href.endsWith("/") ? href.length - 1 : href.length;
-var findMostSpecific = (items, currentPath) => {
-	const result = /* @__PURE__ */ new Set();
-	if (!currentPath) return result;
-	const matchingItems = items.filter((item) => {
-		if (item.disabled || !item.href) return false;
-		return item.exact ? isNaturalExactMatch(item.href, currentPath) : isNaturalPrefixMatch(item.href, currentPath);
-	});
-	if (matchingItems.length === 0) return result;
-	let maxLen = 0;
-	for (const item of matchingItems) {
-		if (!item.href) continue;
-		const len = hrefLength(item.href);
-		if (len > maxLen) maxLen = len;
-	}
-	for (const item of matchingItems) {
-		if (!item.href) continue;
-		if (hrefLength(item.href) === maxLen) result.add(item.href);
-	}
-	return result;
-};
-function SidebarNav({ items = [], sections, currentPath, getIsActive, matchStrategy = "prefix", onItemClick, header, footer, ariaLabel = "Sidebar navigation", collapsed = false, iconSize, className, itemClassName, sectionClassName }) {
-	const resolvedSections = useMemo(() => {
-		return sections?.length ? sections : [{
-			id: "default",
-			items
-		}];
-	}, [sections, items]);
-	const allItems = useMemo(() => resolvedSections.flatMap((section) => section.items), [resolvedSections]);
-	const defaultIsActiveFn = useMemo(() => {
-		if (matchStrategy === "most-specific") {
-			const mostSpecificHrefs = findMostSpecific(allItems, currentPath);
-			return (item) => {
-				if (item.active !== void 0) return item.active;
-				if (!item.href) return false;
-				return mostSpecificHrefs.has(item.href);
-			};
-		} else return (item, path) => {
-			if (item.active !== void 0) return item.active;
-			if (item.exact) return isActiveExact(item, path);
-			return isActivePrefix(item, path);
+import { TopBar } from "./index38.js";
+import app_shell_module_default from "./index39.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-shell/AppShell.tsx
+var DESKTOP_BREAKPOINT = 960;
+function getIsDesktop() {
+	if (typeof window === "undefined") return false;
+	return window.innerWidth >= DESKTOP_BREAKPOINT;
+}
+/**
+* Responsive application shell with a collapsible sidebar and sticky top bar.
+*
+* - Sidebar opens by default on desktop, collapses on mobile.
+* - Closes on outside click/scroll/touch when in mobile mode.
+* - Provides optional hook to close the sidebar when a prop value changes
+*   (e.g., route transitions).
+*/
+function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, showThemeToggle = false, themeToggleProps, topBarBrandingLocation = "left", className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel = "Toggle navigation", onSidebarToggle }) {
+	const [isDesktop, setIsDesktop] = useState(false);
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+	const [transitionsReady, setTransitionsReady] = useState(false);
+	const prevIsDesktopRef = useRef(false);
+	const closeKeyRef = useRef(closeSidebarOnChangeKey);
+	const sidebarRef = useRef(null);
+	const hamburgerRef = useRef(null);
+	const mainRef = useRef(null);
+	const sidebarId = useId();
+	useEffect(() => {
+		const desktop = getIsDesktop();
+		setIsDesktop(desktop);
+		setSidebarOpen(desktop);
+		prevIsDesktopRef.current = desktop;
+		const transitionFrame = window.requestAnimationFrame(() => {
+			setTransitionsReady(true);
+		});
+		const handleResize = () => {
+			const nowDesktop = getIsDesktop();
+			setIsDesktop(nowDesktop);
+			if (nowDesktop !== prevIsDesktopRef.current) {
+				setSidebarOpen(nowDesktop);
+				prevIsDesktopRef.current = nowDesktop;
+			}
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.cancelAnimationFrame(transitionFrame);
+			window.removeEventListener("resize", handleResize);
 		};
-	}, [
-		matchStrategy,
-		allItems,
-		currentPath
-	]);
-	const resolvedGetIsActive = getIsActive ?? defaultIsActiveFn;
-	const style = iconSize !== void 0 ? { ["--sidebar-nav-icon-size"]: typeof iconSize === "number" ? `${iconSize}px` : iconSize } : void 0;
-	return /* @__PURE__ */ jsxs("nav", {
-		className: cx(sidebar_nav_module_default.sidebarNav, collapsed && sidebar_nav_module_default.sidebarNavCollapsed, className),
-		"aria-label": ariaLabel,
-		style,
+	}, []);
+	useEffect(() => {
+		if (isDesktop || !sidebarOpen) return;
+		const mainElement = mainRef.current;
+		const closeSidebar = () => setSidebarOpen(false);
+		const onPointerDown = (e) => {
+			const target = e.target;
+			if (!target) return;
+			if (sidebarRef.current?.contains(target)) return;
+			if (hamburgerRef.current?.contains(target)) return;
+			closeSidebar();
+		};
+		const timeoutId = window.setTimeout(() => {
+			document.addEventListener("pointerdown", onPointerDown);
+			window.addEventListener("scroll", closeSidebar, { passive: true });
+			mainElement?.addEventListener("scroll", closeSidebar, { passive: true });
+			document.addEventListener("touchmove", closeSidebar, { passive: true });
+		}, 10);
+		return () => {
+			window.clearTimeout(timeoutId);
+			document.removeEventListener("pointerdown", onPointerDown);
+			window.removeEventListener("scroll", closeSidebar);
+			mainElement?.removeEventListener("scroll", closeSidebar);
+			document.removeEventListener("touchmove", closeSidebar);
+		};
+	}, [sidebarOpen, isDesktop]);
+	useEffect(() => {
+		if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) setSidebarOpen(false);
+		closeKeyRef.current = closeSidebarOnChangeKey;
+	}, [closeSidebarOnChangeKey, isDesktop]);
+	useEffect(() => {
+		onSidebarToggle?.(sidebarOpen);
+	}, [sidebarOpen, onSidebarToggle]);
+	const toggleSidebar = () => setSidebarOpen((open) => !open);
+	const sidebarWidthValue = sidebarWidth === void 0 ? void 0 : typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
+	const shellStyle = sidebarWidthValue ? { ["--app-shell-sidebar-width"]: sidebarWidthValue } : void 0;
+	const shellClasses = cx(app_shell_module_default.appShell, transitionsReady && app_shell_module_default.appShellAnimated, sidebarOpen ? app_shell_module_default.appShellOpen : app_shell_module_default.appShellCollapsed, className);
+	const sidebarClasses = cx(app_shell_module_default.appShellSidebar, sidebarOpen && app_shell_module_default.appShellSidebarOpen, sidebarClassName);
+	return /* @__PURE__ */ jsxs("div", {
+		className: shellClasses,
+		style: shellStyle,
+		"data-app-shell": true,
+		"data-desktop": isDesktop ? "true" : "false",
+		"data-sidebar-open": sidebarOpen ? "true" : "false",
 		children: [
-			header ? /* @__PURE__ */ jsx("div", {
-				className: sidebar_nav_module_default.header,
-				children: header
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: sidebar_nav_module_default.sections,
-				children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", {
-					className: cx(sidebar_nav_module_default.section, sectionClassName),
-					children: [section.label && !collapsed ? /* @__PURE__ */ jsx("div", {
-						className: sidebar_nav_module_default.sectionLabel,
-						children: section.label
-					}) : null, /* @__PURE__ */ jsx("div", {
-						className: sidebar_nav_module_default.sectionItems,
-						children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx(SidebarNavEntry, {
-							item,
-							active: resolvedGetIsActive(item, currentPath),
-							collapsed,
-							itemClassName,
-							onItemClick
-						}, `${section.id ?? sectionIndex}-${item.href ?? item.title ?? itemIndex}`))
-					})]
-				}, section.id ?? `section-${sectionIndex}`))
+			/* @__PURE__ */ jsx(TopBar, {
+				className: cx(app_shell_module_default.appShellTopbar, topbarClassName),
+				leading: /* @__PURE__ */ jsx("button", {
+					ref: hamburgerRef,
+					type: "button",
+					className: app_shell_module_default.appShellHamburger,
+					onClick: toggleSidebar,
+					"aria-label": hamburgerLabel,
+					"aria-expanded": sidebarOpen,
+					"aria-controls": sidebarId,
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M3 6h18M3 12h18M3 18h18",
+							stroke: "currentColor",
+							strokeWidth: "2.5",
+							strokeLinecap: "round"
+						})
+					})
+				}),
+				brand,
+				brandHref,
+				brandingLocation: topBarBrandingLocation,
+				start: topbarStart,
+				actions: topbarEnd,
+				showThemeToggle,
+				themeToggleProps
+			}),
+			!isDesktop && sidebarOpen && /* @__PURE__ */ jsx("div", {
+				className: app_shell_module_default.appShellBackdrop,
+				onClick: () => setSidebarOpen(false),
+				onTouchStart: () => setSidebarOpen(false),
+				"aria-hidden": "true"
 			}),
-			footer ? /* @__PURE__ */ jsx("div", {
-				className: sidebar_nav_module_default.footer,
-				children: footer
-			}) : null
+			/* @__PURE__ */ jsx("aside", {
+				ref: sidebarRef,
+				id: sidebarId,
+				className: sidebarClasses,
+				"aria-label": "Sidebar navigation",
+				children: sidebar
+			}),
+			/* @__PURE__ */ jsx("main", {
+				ref: mainRef,
+				className: cx(app_shell_module_default.appShellMain, mainClassName),
+				children
+			})
 		]
 	});
 }
-function SidebarNavEntry({ item, active, collapsed, itemClassName, onItemClick }) {
-	const rel = item.rel ?? (item.target === "_blank" ? "noreferrer" : void 0);
-	const title = item.title ?? (typeof item.label === "string" ? item.label : void 0);
-	const hasIcon = Boolean(item.icon);
-	const classes = cx(sidebar_nav_module_default.item, !hasIcon && sidebar_nav_module_default.itemWithoutIcon, active && sidebar_nav_module_default.itemActive, collapsed && sidebar_nav_module_default.itemCollapsed, item.disabled && sidebar_nav_module_default.itemDisabled, itemClassName);
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [hasIcon ? /* @__PURE__ */ jsx("span", {
-		className: sidebar_nav_module_default.icon,
-		children: item.icon
-	}) : null, !collapsed ? /* @__PURE__ */ jsxs("span", {
-		className: sidebar_nav_module_default.itemBody,
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: sidebar_nav_module_default.labelRow,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: sidebar_nav_module_default.label,
-				children: item.label
-			}), item.badge && /* @__PURE__ */ jsx("span", {
-				className: sidebar_nav_module_default.badge,
-				children: item.badge
-			})]
-		}), item.description ? /* @__PURE__ */ jsx("span", {
-			className: sidebar_nav_module_default.description,
-			children: item.description
-		}) : null]
-	}) : null] });
-	const handleClick = () => {
-		if (item.disabled) return;
-		item.onClick?.();
-		onItemClick?.(item);
-	};
-	if (!item.href) return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: classes,
-		"aria-current": active ? "page" : void 0,
-		"aria-disabled": item.disabled ? "true" : void 0,
-		disabled: item.disabled,
-		title: collapsed ? title : void 0,
-		onClick: handleClick,
-		children: content
-	});
-	if (item.disabled) return /* @__PURE__ */ jsx("div", {
-		className: classes,
-		"aria-current": active ? "page" : void 0,
-		"aria-disabled": "true",
-		title: collapsed ? title : void 0,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("a", {
-		className: classes,
-		href: item.href,
-		target: item.target,
-		rel,
-		"aria-current": active ? "page" : void 0,
-		title: collapsed ? title : void 0,
-		onClick: handleClick,
-		children: content
-	});
-}
 //#endregion
-export { SidebarNav };
+export { AppShell };
 
 //# sourceMappingURL=index40.js.map