@tomny-dev/uzi 0.5.0 → 0.6.0

package/dist/index37.js

@@ -1,35 +1,25 @@
-//#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
+//#region src/components/top-bar/top-bar.module.css
+var topBar = "uzi-top-bar-module__topBar__MJ-7S";
+var topBarStatic = "uzi-top-bar-module__topBarStatic__JvEwt";
+var topBarInner = "uzi-top-bar-module__topBarInner__PBbi8";
+var topBarStart = "uzi-top-bar-module__topBarStart__DrdN2";
+var topBarBrand = "uzi-top-bar-module__topBarBrand__80VV3";
+var topBarBrandContent = "uzi-top-bar-module__topBarBrandContent__O4Uto";
+var topBarCenter = "uzi-top-bar-module__topBarCenter__Kwxg-";
+var topBarCenterGroup = "uzi-top-bar-module__topBarCenterGroup__7Ishp";
+var topBarActions = "uzi-top-bar-module__topBarActions__mgMd8";
+var top_bar_module_default = {
+	topBar,
+	topBarStatic,
+	topBarInner,
+	topBarStart,
+	topBarBrand,
+	topBarBrandContent,
+	topBarCenter,
+	topBarCenterGroup,
+	topBarActions
 };
 //#endregion
-export { appShell, appShellAnimated, appShellBackdrop, appShellBrand, appShellCollapsed, appShellHamburger, appShellMain, appShellOpen, appShellSidebar, appShellSidebarOpen, appShellTopbar, appShellTopbarLeft, appShellTopbarRight, appShellTopbarStart, app_shell_module_default as default };
+export { top_bar_module_default as default, topBar, topBarActions, topBarBrand, topBarBrandContent, topBarCenter, topBarCenterGroup, topBarInner, topBarStart, topBarStatic };
 
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.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":""}
+{"version":3,"file":"index37.js","names":[],"sources":["../src/components/top-bar/top-bar.module.css"],"sourcesContent":[".topBar {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  border-bottom: 1px solid var(--ts-topbar-border, var(--border));\n  background: var(--ts-topbar-bg, color-mix(in srgb, var(--background) 92%, transparent));\n  box-shadow: var(--ts-topbar-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));\n  backdrop-filter: blur(12px);\n}\n\n.topBarStatic {\n  position: relative;\n}\n\n.topBarInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  min-height: 4.25rem;\n  padding: env(safe-area-inset-top, 0) 1rem 0 1rem;\n}\n\n.topBarStart {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.topBarBrand {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  min-width: 0;\n  color: var(--ts-topbar-brand-fg, var(--foreground));\n  text-decoration: none;\n}\n\n.topBarBrandContent {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.topBarCenter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.topBarCenterGroup {\n  display: inline-flex;\n  align-items: center;\n  gap: 1rem;\n  min-width: 0;\n}\n\n.topBarActions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n@media (max-width: 768px) {\n  .topBarInner {\n    min-height: 4rem;\n    gap: 0.75rem;\n    padding-left: max(0.75rem, env(safe-area-inset-left));\n    padding-right: max(0.75rem, env(safe-area-inset-right));\n  }\n\n  .topBarStart {\n    gap: 0.75rem;\n  }\n\n  .topBarActions {\n    gap: 0.5rem;\n  }\n}\n"],"mappings":""}

package/dist/index38.cjs

@@ -1,49 +1,34 @@
-//#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
+//#region src/components/top-bar/top-bar.module.css
+var topBar = "uzi-top-bar-module__topBar__MJ-7S";
+var topBarStatic = "uzi-top-bar-module__topBarStatic__JvEwt";
+var topBarInner = "uzi-top-bar-module__topBarInner__PBbi8";
+var topBarStart = "uzi-top-bar-module__topBarStart__DrdN2";
+var topBarBrand = "uzi-top-bar-module__topBarBrand__80VV3";
+var topBarBrandContent = "uzi-top-bar-module__topBarBrandContent__O4Uto";
+var topBarCenter = "uzi-top-bar-module__topBarCenter__Kwxg-";
+var topBarCenterGroup = "uzi-top-bar-module__topBarCenterGroup__7Ishp";
+var topBarActions = "uzi-top-bar-module__topBarActions__mgMd8";
+var top_bar_module_default = {
+	topBar,
+	topBarStatic,
+	topBarInner,
+	topBarStart,
+	topBarBrand,
+	topBarBrandContent,
+	topBarCenter,
+	topBarCenterGroup,
+	topBarActions
 };
 //#endregion
-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;
+exports.default = top_bar_module_default;
+exports.topBar = topBar;
+exports.topBarActions = topBarActions;
+exports.topBarBrand = topBarBrand;
+exports.topBarBrandContent = topBarBrandContent;
+exports.topBarCenter = topBarCenter;
+exports.topBarCenterGroup = topBarCenterGroup;
+exports.topBarInner = topBarInner;
+exports.topBarStart = topBarStart;
+exports.topBarStatic = topBarStatic;
 
 //# sourceMappingURL=index38.cjs.map

package/dist/index38.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index38.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":""}
+{"version":3,"file":"index38.cjs","names":[],"sources":["../src/components/top-bar/top-bar.module.css"],"sourcesContent":[".topBar {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  border-bottom: 1px solid var(--ts-topbar-border, var(--border));\n  background: var(--ts-topbar-bg, color-mix(in srgb, var(--background) 92%, transparent));\n  box-shadow: var(--ts-topbar-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));\n  backdrop-filter: blur(12px);\n}\n\n.topBarStatic {\n  position: relative;\n}\n\n.topBarInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  min-height: 4.25rem;\n  padding: env(safe-area-inset-top, 0) 1rem 0 1rem;\n}\n\n.topBarStart {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.topBarBrand {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  min-width: 0;\n  color: var(--ts-topbar-brand-fg, var(--foreground));\n  text-decoration: none;\n}\n\n.topBarBrandContent {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.topBarCenter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.topBarCenterGroup {\n  display: inline-flex;\n  align-items: center;\n  gap: 1rem;\n  min-width: 0;\n}\n\n.topBarActions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n@media (max-width: 768px) {\n  .topBarInner {\n    min-height: 4rem;\n    gap: 0.75rem;\n    padding-left: max(0.75rem, env(safe-area-inset-left));\n    padding-right: max(0.75rem, env(safe-area-inset-right));\n  }\n\n  .topBarStart {\n    gap: 0.75rem;\n  }\n\n  .topBarActions {\n    gap: 0.5rem;\n  }\n}\n"],"mappings":""}

package/dist/index38.js

@@ -1,150 +1,55 @@
 "use client";
 import { cx } from "./index3.js";
-import { TopBar } from "./index36.js";
-import app_shell_module_default from "./index37.js";
-import { useEffect, useId, useRef, useState } from "react";
+import { ThemeToggleButton } from "./index36.js";
+import top_bar_module_default from "./index37.js";
 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);
-		};
-	}, []);
-	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: [
-			/* @__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"
-						})
-					})
+//#region src/components/top-bar/TopBar.tsx
+function TopBar({ leading, brand, brandHref, brandingLocation = "left", start, center, actions, showThemeToggle = false, themeToggleProps, className, innerClassName, isSticky, sticky = true, children, ...rest }) {
+	const shouldStick = isSticky ?? sticky;
+	const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx("a", {
+		href: brandHref,
+		className: top_bar_module_default.topBarBrand,
+		children: /* @__PURE__ */ jsx("span", {
+			className: top_bar_module_default.topBarBrandContent,
+			children: brand
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: top_bar_module_default.topBarBrand,
+		children: /* @__PURE__ */ jsx("span", {
+			className: top_bar_module_default.topBarBrandContent,
+			children: brand
+		})
+	});
+	return /* @__PURE__ */ jsx("header", {
+		className: cx(top_bar_module_default.topBar, !shouldStick && top_bar_module_default.topBarStatic, className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(top_bar_module_default.topBarInner, innerClassName),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: top_bar_module_default.topBarStart,
+					children: [
+						leading,
+						brandingLocation === "left" && brandNode,
+						start
+					]
 				}),
-				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"
-			}),
-			/* @__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
-			})
-		]
+				brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx("div", {
+					className: top_bar_module_default.topBarCenter,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: top_bar_module_default.topBarCenterGroup,
+						children: [brandingLocation === "center" && brandNode, center ?? children]
+					})
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: top_bar_module_default.topBarActions,
+					children: [showThemeToggle && /* @__PURE__ */ jsx(ThemeToggleButton, { ...themeToggleProps }), actions]
+				})
+			]
+		})
 	});
 }
 //#endregion
-export { AppShell };
+export { TopBar };
 
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","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":"index38.js","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,oBAAC,KAAD;EAAG,MAAM;EAAW,WAAW,uBAAO;YACpC,oBAAC,QAAD;GAAM,WAAW,uBAAO;aAAqB;EAAY,CAAA;CACxD,CAAA,IAEH,oBAAC,OAAD;EAAK,WAAW,uBAAO;YACrB,oBAAC,QAAD;GAAM,WAAW,uBAAO;aAAqB;EAAY,CAAA;CACtD,CAAA;CAGP,OACE,oBAAC,UAAD;EACE,WAAW,GAAG,uBAAO,QAAQ,CAAC,eAAe,uBAAO,cAAc,SAAS;EAC3E,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAW,GAAG,uBAAO,aAAa,cAAc;aAArD;IACE,qBAAC,OAAD;KAAK,WAAW,uBAAO;eAAvB;MACG;MACA,qBAAqB,UAAU;MAC/B;KACE;;IACH,aAAa,qBAAqB,YAAa,UAAU,WACzD,oBAAC,OAAD;KAAK,WAAW,uBAAO;eACrB,qBAAC,OAAD;MAAK,WAAW,uBAAO;gBAAvB,CACG,qBAAqB,YAAY,WACjC,UAAU,QACR;;IACF,CAAA,IACH;IACJ,qBAAC,OAAD;KAAK,WAAW,uBAAO;eAAvB,CACG,mBAAmB,oBAAC,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,GAC7D,OACE;;GACF;;CACC,CAAA;AAEZ"}

package/dist/index39.cjs

@@ -1,150 +1,55 @@
 "use client";
 const require_cx = require("./index4.cjs");
-const require_TopBar = require("./index37.cjs");
-const require_app_shell_module = require("./index38.cjs");
-let react = require("react");
+const require_ThemeToggleButton = require("./index37.cjs");
+const require_top_bar_module = require("./index38.cjs");
 let react_jsx_runtime = require("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] = (0, react.useState)(false);
-	const [sidebarOpen, setSidebarOpen] = (0, react.useState)(false);
-	const [transitionsReady, setTransitionsReady] = (0, react.useState)(false);
-	const prevIsDesktopRef = (0, react.useRef)(false);
-	const closeKeyRef = (0, react.useRef)(closeSidebarOnChangeKey);
-	const sidebarRef = (0, react.useRef)(null);
-	const hamburgerRef = (0, react.useRef)(null);
-	const mainRef = (0, react.useRef)(null);
-	const sidebarId = (0, react.useId)();
-	(0, react.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);
-		};
-	}, []);
-	(0, react.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]);
-	(0, react.useEffect)(() => {
-		if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) setSidebarOpen(false);
-		closeKeyRef.current = closeSidebarOnChangeKey;
-	}, [closeSidebarOnChangeKey, isDesktop]);
-	(0, react.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 = require_cx.cx(require_app_shell_module.default.appShell, transitionsReady && require_app_shell_module.default.appShellAnimated, sidebarOpen ? require_app_shell_module.default.appShellOpen : require_app_shell_module.default.appShellCollapsed, className);
-	const sidebarClasses = require_cx.cx(require_app_shell_module.default.appShellSidebar, sidebarOpen && require_app_shell_module.default.appShellSidebarOpen, sidebarClassName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: shellClasses,
-		style: shellStyle,
-		"data-app-shell": true,
-		"data-desktop": isDesktop ? "true" : "false",
-		"data-sidebar-open": sidebarOpen ? "true" : "false",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TopBar.TopBar, {
-				className: require_cx.cx(require_app_shell_module.default.appShellTopbar, topbarClassName),
-				leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					ref: hamburgerRef,
-					type: "button",
-					className: require_app_shell_module.default.appShellHamburger,
-					onClick: toggleSidebar,
-					"aria-label": hamburgerLabel,
-					"aria-expanded": sidebarOpen,
-					"aria-controls": sidebarId,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						viewBox: "0 0 24 24",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							d: "M3 6h18M3 12h18M3 18h18",
-							stroke: "currentColor",
-							strokeWidth: "2.5",
-							strokeLinecap: "round"
-						})
-					})
+//#region src/components/top-bar/TopBar.tsx
+function TopBar({ leading, brand, brandHref, brandingLocation = "left", start, center, actions, showThemeToggle = false, themeToggleProps, className, innerClassName, isSticky, sticky = true, children, ...rest }) {
+	const shouldStick = isSticky ?? sticky;
+	const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: brandHref,
+		className: require_top_bar_module.default.topBarBrand,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_top_bar_module.default.topBarBrandContent,
+			children: brand
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_top_bar_module.default.topBarBrand,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_top_bar_module.default.topBarBrandContent,
+			children: brand
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+		className: require_cx.cx(require_top_bar_module.default.topBar, !shouldStick && require_top_bar_module.default.topBarStatic, className),
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_cx.cx(require_top_bar_module.default.topBarInner, innerClassName),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_top_bar_module.default.topBarStart,
+					children: [
+						leading,
+						brandingLocation === "left" && brandNode,
+						start
+					]
 				}),
-				brand,
-				brandHref,
-				brandingLocation: topBarBrandingLocation,
-				start: topbarStart,
-				actions: topbarEnd,
-				showThemeToggle,
-				themeToggleProps
-			}),
-			!isDesktop && sidebarOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_app_shell_module.default.appShellBackdrop,
-				onClick: () => setSidebarOpen(false),
-				onTouchStart: () => setSidebarOpen(false),
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-				ref: sidebarRef,
-				id: sidebarId,
-				className: sidebarClasses,
-				"aria-label": "Sidebar navigation",
-				children: sidebar
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-				ref: mainRef,
-				className: require_cx.cx(require_app_shell_module.default.appShellMain, mainClassName),
-				children
-			})
-		]
+				brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_top_bar_module.default.topBarCenter,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_top_bar_module.default.topBarCenterGroup,
+						children: [brandingLocation === "center" && brandNode, center ?? children]
+					})
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_top_bar_module.default.topBarActions,
+					children: [showThemeToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeToggleButton.ThemeToggleButton, { ...themeToggleProps }), actions]
+				})
+			]
+		})
 	});
 }
 //#endregion
-exports.AppShell = AppShell;
+exports.TopBar = TopBar;
 
 //# sourceMappingURL=index39.cjs.map