@byline/host-tanstack-start 3.11.2 → 3.11.3

package/dist/admin-shell/chrome/admin-app-bar.js

@@ -6,6 +6,7 @@ import { Button } from "@byline/ui/react";
 import classnames from "classnames";
 import { adminSignOut } from "../../server-fns/auth/index.js";
 import admin_app_bar_module from "./admin-app-bar.module.js";
+import { AdminDrawerToggle } from "./admin-drawer-toggle.js";
 import { Branding } from "./branding.js";
 import { Breadcrumbs } from "./breadcrumbs/breadcrumbs.js";
 import { useBreadcrumbs } from "./breadcrumbs/breadcrumbs-provider.js";
@@ -36,6 +37,7 @@ function AdminAppBar({ user }) {
             /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-admin-app-bar-left', admin_app_bar_module.left),
                 children: [
+                    /*#__PURE__*/ jsx(AdminDrawerToggle, {}),
                     /*#__PURE__*/ jsx(Branding, {}),
                     /*#__PURE__*/ jsx(Breadcrumbs, {
                         homePath: breadCrumbSettings.homePath,

package/dist/admin-shell/chrome/admin-app-bar_module.css

@@ -1,12 +1,13 @@
 :is(.header-_gfkGu, .byline-admin-app-bar) {
   z-index: 50;
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
   background-color: #fff;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   max-width: 100%;
   height: 45px;
-  padding: 1rem;
+  padding: 1rem 1rem 1rem .75rem;
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.75rem;
@@ -17,12 +18,13 @@
 
 :is(:is([data-theme="dark"], .dark) .header-_gfkGu, :is([data-theme="dark"], .dark) .byline-admin-app-bar) {
   background-color: var(--canvas-800);
+  border-bottom-color: var(--canvas-700);
 }
 
 :is(.left-wd7pIB, .byline-admin-app-bar-left) {
   flex: auto;
   align-items: center;
-  gap: 1rem;
+  gap: .5em;
   min-width: 0;
   display: flex;
 }

package/dist/admin-shell/chrome/{drawer-toggle.d.ts → admin-drawer-toggle.d.ts}

@@ -5,4 +5,4 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export declare function DrawerToggle(): import("react").JSX.Element;
+export declare function AdminDrawerToggle(): import("react").JSX.Element;

package/dist/admin-shell/chrome/{drawer-toggle.js → admin-drawer-toggle.js}

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconButton, Tooltip } from "@byline/ui/react";
 import classnames from "classnames";
-import drawer_toggle_module from "./drawer-toggle.module.js";
-import { useAdminMenu } from "./menu-provider.js";
-function DrawerToggle() {
+import admin_drawer_toggle_module from "./admin-drawer-toggle.module.js";
+import { useAdminMenu } from "./admin-menu-provider.js";
+function AdminDrawerToggle() {
     const { toggleDrawer, drawerOpen } = useAdminMenu();
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-admin-drawer-toggle', drawer_toggle_module.root, {
+        className: classnames('byline-admin-drawer-toggle', admin_drawer_toggle_module.root, {
             'byline-admin-drawer-toggle-open': drawerOpen,
-            [drawer_toggle_module.rootOpen]: drawerOpen,
+            [admin_drawer_toggle_module.rootOpen]: drawerOpen,
             'byline-admin-drawer-toggle-closed': !drawerOpen,
-            [drawer_toggle_module.rootClosed]: !drawerOpen
+            [admin_drawer_toggle_module.rootClosed]: !drawerOpen
         }),
         children: /*#__PURE__*/ jsx(Tooltip, {
             text: drawerOpen ? 'Collapse sidebar' : 'Expand sidebar',
@@ -18,7 +18,7 @@ function DrawerToggle() {
             sideOffset: 8,
             children: /*#__PURE__*/ jsx(IconButton, {
                 type: "button",
-                className: classnames('byline-admin-drawer-toggle-button', drawer_toggle_module.button),
+                className: classnames('byline-admin-drawer-toggle-button', admin_drawer_toggle_module.button),
                 variant: "text",
                 intent: "noeffect",
                 square: true,
@@ -54,4 +54,4 @@ function DrawerToggle() {
         })
     });
 }
-export { DrawerToggle };
+export { AdminDrawerToggle };

package/dist/admin-shell/chrome/admin-drawer-toggle.module.js

@@ -0,0 +1,8 @@
+import "./admin-drawer-toggle_module.css";
+const admin_drawer_toggle_module = {
+    root: "root-aOHtxA",
+    rootClosed: "rootClosed-KEQczC",
+    rootOpen: "rootOpen-FN2fv5",
+    button: "button-cm8F79"
+};
+export default admin_drawer_toggle_module;

package/dist/admin-shell/chrome/admin-drawer-toggle_module.css

@@ -0,0 +1,21 @@
+:is(.root-aOHtxA, .byline-admin-drawer-toggle) {
+  z-index: 50;
+  transition: all .3s ease-in-out;
+  position: static;
+  top: 38px;
+}
+
+:is(.rootClosed-KEQczC, .byline-admin-drawer-toggle-closed) {
+  left: 8px;
+}
+
+:is(.rootOpen-FN2fv5, .byline-admin-drawer-toggle-open) {
+  left: 160px;
+}
+
+:is(.button-cm8F79, .byline-admin-drawer-toggle-button) {
+  outline: none;
+  min-width: 36px;
+  height: 36px;
+}
+

package/dist/admin-shell/chrome/{menu-drawer.js → admin-menu-drawer.js}

@@ -9,9 +9,9 @@ import { ActivityIcon, HomeIcon, RolesIcon, SettingsSlidersIcon, Tooltip, UserIc
 import classnames from "classnames";
 import { useSwipeable } from "react-swipeable";
 import { useAbilities } from "../../integrations/abilities.js";
+import admin_menu_drawer_module from "./admin-menu-drawer.module.js";
+import { useAdminMenu } from "./admin-menu-provider.js";
 import { Link } from "./loose-router.js";
-import menu_drawer_module from "./menu-drawer.module.js";
-import { useAdminMenu } from "./menu-provider.js";
 import { PreviewToggle } from "./preview-toggle.js";
 const isActive = (currentPath, linkHref)=>{
     if ('/admin' === linkHref) return '/admin' === currentPath;
@@ -33,6 +33,7 @@ function MenuItem({ to, label, icon, pathname, compact }) {
                 compact ? /*#__PURE__*/ jsx(Tooltip, {
                     text: label,
                     side: "right",
+                    delay: 0,
                     children: iconSpan
                 }) : iconSpan,
                 /*#__PURE__*/ jsx("span", {
@@ -63,23 +64,23 @@ function AdminMenuDrawer() {
     const compact = false === mobile && false === drawerOpen;
     return /*#__PURE__*/ jsx("aside", {
         id: "admin-menu",
-        className: classnames('byline-admin-menu-drawer-aside', menu_drawer_module.aside, {
+        className: classnames('byline-admin-menu-drawer-aside', admin_menu_drawer_module.aside, {
             'byline-admin-menu-drawer-aside-mobile': true === mobile,
-            [menu_drawer_module.asideMobile]: true === mobile,
+            [admin_menu_drawer_module.asideMobile]: true === mobile,
             'byline-admin-menu-drawer-aside-mobile-open': true === mobile && true === drawerOpen,
-            [menu_drawer_module.asideMobileOpen]: true === mobile && true === drawerOpen,
+            [admin_menu_drawer_module.asideMobileOpen]: true === mobile && true === drawerOpen,
             'byline-admin-menu-drawer-aside-mobile-closed': true === mobile && false === drawerOpen,
-            [menu_drawer_module.asideMobileClosed]: true === mobile && false === drawerOpen,
+            [admin_menu_drawer_module.asideMobileClosed]: true === mobile && false === drawerOpen,
             'byline-admin-menu-drawer-aside-desktop': false === mobile,
-            [menu_drawer_module.asideDesktop]: false === mobile,
+            [admin_menu_drawer_module.asideDesktop]: false === mobile,
             'byline-admin-menu-drawer-aside-desktop-open': false === mobile && true === drawerOpen,
-            [menu_drawer_module.asideDesktopOpen]: false === mobile && true === drawerOpen,
+            [admin_menu_drawer_module.asideDesktopOpen]: false === mobile && true === drawerOpen,
             'byline-admin-menu-drawer-aside-desktop-closed': false === mobile && false === drawerOpen,
-            [menu_drawer_module.asideDesktopClosed]: false === mobile && false === drawerOpen
+            [admin_menu_drawer_module.asideDesktopClosed]: false === mobile && false === drawerOpen
         }),
         ...handlers,
         children: /*#__PURE__*/ jsx("nav", {
-            className: classnames('byline-admin-menu-drawer admin-menu-drawer', menu_drawer_module.nav),
+            className: classnames('byline-admin-menu-drawer admin-menu-drawer', admin_menu_drawer_module.nav),
             children: /*#__PURE__*/ jsxs("ul", {
                 children: [
                     /*#__PURE__*/ jsx(MenuItem, {

package/dist/admin-shell/chrome/admin-menu-drawer.module.js

@@ -0,0 +1,12 @@
+import "./admin-menu-drawer_module.css";
+const admin_menu_drawer_module = {
+    aside: "aside-S0dz74",
+    asideMobile: "asideMobile-sXoUdL",
+    asideMobileOpen: "asideMobileOpen-Hz1NlP",
+    asideMobileClosed: "asideMobileClosed-YCzvQ4",
+    asideDesktop: "asideDesktop-uFlpwO",
+    asideDesktopOpen: "asideDesktopOpen-kPyJOg",
+    asideDesktopClosed: "asideDesktopClosed-OPSSfT",
+    nav: "nav-dDjqu7"
+};
+export default admin_menu_drawer_module;

package/dist/admin-shell/chrome/{menu-drawer_module.css → admin-menu-drawer_module.css}

@@ -1,87 +1,87 @@
-:is(.aside-zO2mZZ, .byline-admin-menu-drawer-aside) {
+:is(.aside-S0dz74, .byline-admin-menu-drawer-aside) {
   border-right: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
   background-color: var(--canvas-25);
   z-index: 40;
   flex-direction: column;
-  transition: all .3s ease-in-out;
+  transition: all .2s ease-in-out;
   display: flex;
 }
 
-:is(:is([data-theme="dark"], .dark) .aside-zO2mZZ, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer-aside) {
+:is(:is([data-theme="dark"], .dark) .aside-S0dz74, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer-aside) {
   border-right-color: var(--canvas-700);
   background-color: var(--canvas-800);
 }
 
-:is(.asideMobile-k64Dd_, .byline-admin-menu-drawer-aside-mobile) {
+:is(.asideMobile-sXoUdL, .byline-admin-menu-drawer-aside-mobile) {
   position: fixed;
-  top: 45px;
+  top: 42px;
   bottom: 0;
   left: 0;
 }
 
-:is(.asideMobileOpen-PL5eF1, .byline-admin-menu-drawer-aside-mobile-open) {
+:is(.asideMobileOpen-Hz1NlP, .byline-admin-menu-drawer-aside-mobile-open) {
   width: 210px;
 }
 
-:is(.asideMobileClosed-GnS1qX, .byline-admin-menu-drawer-aside-mobile-closed) {
+:is(.asideMobileClosed-YCzvQ4, .byline-admin-menu-drawer-aside-mobile-closed) {
   width: 0;
   overflow: hidden;
 }
 
-:is(.asideDesktop-Enrzwp, .byline-admin-menu-drawer-aside-desktop) {
+:is(.asideDesktop-uFlpwO, .byline-admin-menu-drawer-aside-desktop) {
   flex-shrink: 0;
   align-self: stretch;
   position: relative;
 }
 
-:is(.asideDesktopOpen-aaA0E_, .byline-admin-menu-drawer-aside-desktop-open) {
+:is(.asideDesktopOpen-kPyJOg, .byline-admin-menu-drawer-aside-desktop-open) {
   width: 210px;
 }
 
-:is(.asideDesktopClosed-S8clHP, .byline-admin-menu-drawer-aside-desktop-closed) {
+:is(.asideDesktopClosed-OPSSfT, .byline-admin-menu-drawer-aside-desktop-closed) {
   width: 60px;
 }
 
-:is(.nav-_d0pIg, .byline-admin-menu-drawer) {
+:is(.nav-dDjqu7, .byline-admin-menu-drawer) {
   max-height: calc(100vh - 60px);
   margin: 0;
   position: sticky;
-  top: 55px;
+  top: 0;
   overflow-y: auto;
 }
 
-:is(.nav-_d0pIg ul, .byline-admin-menu-drawer ul) {
-  margin: 1.4rem .5rem .5rem;
+:is(.nav-dDjqu7 ul, .byline-admin-menu-drawer ul) {
+  margin: .75rem .5rem .5rem;
   padding: 0;
   list-style: none;
 }
 
-:is(.nav-_d0pIg ul li.menu-item, .byline-admin-menu-drawer ul li.menu-item) {
+:is(.nav-dDjqu7 ul li.menu-item, .byline-admin-menu-drawer ul li.menu-item) {
   border-radius: 4px;
   margin: 0;
   transition: all .2s;
 }
 
-:is(.nav-_d0pIg ul li.menu-item .icon, .byline-admin-menu-drawer ul li.menu-item .icon) {
+:is(.nav-dDjqu7 ul li.menu-item .icon, .byline-admin-menu-drawer ul li.menu-item .icon) {
   justify-content: center;
   align-items: center;
   width: 24px;
   display: flex;
 }
 
-:is(.nav-_d0pIg ul li.menu-item .label, .byline-admin-menu-drawer ul li.menu-item .label) {
+:is(.nav-dDjqu7 ul li.menu-item .label, .byline-admin-menu-drawer ul li.menu-item .label) {
   line-height: 0;
 }
 
-:is(.nav-_d0pIg ul li.menu-item.compact .label, .byline-admin-menu-drawer ul li.menu-item.compact .label) {
+:is(.nav-dDjqu7 ul li.menu-item.compact .label, .byline-admin-menu-drawer ul li.menu-item.compact .label) {
   display: none;
 }
 
-:is(.nav-_d0pIg ul li.menu-item.active, .nav-_d0pIg ul li.menu-item:hover, .byline-admin-menu-drawer ul li.menu-item.active, .byline-admin-menu-drawer ul li.menu-item:hover) {
+:is(.nav-dDjqu7 ul li.menu-item.active, .nav-dDjqu7 ul li.menu-item:hover, .byline-admin-menu-drawer ul li.menu-item.active, .byline-admin-menu-drawer ul li.menu-item:hover) {
   background-color: var(--canvas-50);
 }
 
-:is(.nav-_d0pIg ul li.menu-item :is(a, button), .byline-admin-menu-drawer ul li.menu-item :is(a, button)) {
+:is(.nav-dDjqu7 ul li.menu-item :is(a, button), .byline-admin-menu-drawer ul li.menu-item :is(a, button)) {
   color: #111;
   cursor: pointer;
   text-align: left;
@@ -98,40 +98,49 @@
   display: flex;
 }
 
-:is(.nav-_d0pIg ul li.menu-item :is(a, button):disabled, .byline-admin-menu-drawer ul li.menu-item :is(a, button):disabled) {
+:is(.nav-dDjqu7 ul li.menu-item :is(a, button):disabled, .byline-admin-menu-drawer ul li.menu-item :is(a, button):disabled) {
   cursor: not-allowed;
   opacity: .6;
 }
 
-:is(.nav-_d0pIg ul li.menu-item.compact :is(a, button), .byline-admin-menu-drawer ul li.menu-item.compact :is(a, button)) {
+:is(.nav-dDjqu7 ul li.menu-item.compact, .byline-admin-menu-drawer ul li.menu-item.compact) {
+  width: 34px;
+  height: 34px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:is(.nav-dDjqu7 ul li.menu-item.compact :is(a, button), .byline-admin-menu-drawer ul li.menu-item.compact :is(a, button)) {
   justify-content: center;
+  height: 100%;
+  padding: 0;
 }
 
-:is(.nav-_d0pIg ul li.menu-item.active :is(a, button), .byline-admin-menu-drawer ul li.menu-item.active :is(a, button)) {
+:is(.nav-dDjqu7 ul li.menu-item.active :is(a, button), .byline-admin-menu-drawer ul li.menu-item.active :is(a, button)) {
   color: #111;
   text-decoration: none;
 }
 
-:is(.nav-_d0pIg ul li.menu-separator, .byline-admin-menu-drawer ul li.menu-separator) {
+:is(.nav-dDjqu7 ul li.menu-separator, .byline-admin-menu-drawer ul li.menu-separator) {
   background-color: #ddd;
   width: 90%;
   margin: .75rem auto;
   padding-top: .5px;
 }
 
-:is(:is([data-theme="dark"], .dark) .nav-_d0pIg ul li.menu-item :is(a, button), :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item :is(a, button)) {
+:is(:is([data-theme="dark"], .dark) .nav-dDjqu7 ul li.menu-item :is(a, button), :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item :is(a, button)) {
   color: #ddd;
 }
 
-:is(:is([data-theme="dark"], .dark) .nav-_d0pIg ul li.menu-item.active :is(a, button), :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item.active :is(a, button)) {
+:is(:is([data-theme="dark"], .dark) .nav-dDjqu7 ul li.menu-item.active :is(a, button), :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item.active :is(a, button)) {
   color: #fff;
 }
 
-:is(:is([data-theme="dark"], .dark) .nav-_d0pIg ul li.menu-item.active, :is([data-theme="dark"], .dark) .nav-_d0pIg ul li.menu-item:hover, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item.active, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item:hover) {
+:is(:is([data-theme="dark"], .dark) .nav-dDjqu7 ul li.menu-item.active, :is([data-theme="dark"], .dark) .nav-dDjqu7 ul li.menu-item:hover, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item.active, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-item:hover) {
   background-color: oklch(from var(--canvas-700) calc(l * .95) c h);
 }
 
-:is(:is([data-theme="dark"], .dark) .nav-_d0pIg ul li.menu-separator, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-separator) {
+:is(:is([data-theme="dark"], .dark) .nav-dDjqu7 ul li.menu-separator, :is([data-theme="dark"], .dark) .byline-admin-menu-drawer ul li.menu-separator) {
   background-color: #444;
 }
 

package/dist/admin-shell/chrome/content.js

@@ -2,8 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import classnames from "classnames";
+import { useAdminMenu } from "./admin-menu-provider.js";
 import content_module from "./content.module.js";
-import { useAdminMenu } from "./menu-provider.js";
 function Content({ children }) {
     const { mobile, closeDrawer } = useAdminMenu();
     useEffect(()=>{

package/dist/admin-shell/chrome/hamburger.js

@@ -2,8 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "@byline/i18n/react";
 import classnames from "classnames";
+import { useAdminMenu } from "./admin-menu-provider.js";
 import hamburger_module from "./hamburger.module.js";
-import { useAdminMenu } from "./menu-provider.js";
 function Hamburger({ className, color = 'bg-white before:bg-white after:bg-white', activeBorderColor: _activeBorderColor, ...other }) {
     const { toggleDrawer } = useAdminMenu();
     const { t } = useTranslation('byline-admin');

package/dist/admin-shell/chrome/preview-toggle.js

@@ -69,6 +69,7 @@ function PreviewToggle({ compact }) {
                 compact ? /*#__PURE__*/ jsx(Tooltip, {
                     text: label,
                     side: "right",
+                    delay: 0,
                     children: iconSpan
                 }) : iconSpan,
                 /*#__PURE__*/ jsx("span", {

package/dist/routes/create-admin-layout-route.js

@@ -7,10 +7,9 @@ import { I18nProvider } from "@byline/i18n/react";
 import classnames from "classnames";
 import { AdminAppBar } from "../admin-shell/chrome/admin-app-bar.js";
 import admin_layout_module from "../admin-shell/chrome/admin-layout.module.js";
+import { AdminMenuDrawer } from "../admin-shell/chrome/admin-menu-drawer.js";
+import { AdminMenuProvider } from "../admin-shell/chrome/admin-menu-provider.js";
 import { Content } from "../admin-shell/chrome/content.js";
-import { DrawerToggle } from "../admin-shell/chrome/drawer-toggle.js";
-import { AdminMenuDrawer } from "../admin-shell/chrome/menu-drawer.js";
-import { AdminMenuProvider } from "../admin-shell/chrome/menu-provider.js";
 import { RouteError, RouteNotFound } from "../admin-shell/chrome/route-error.js";
 import { RouteProgressBar } from "../admin-shell/chrome/route-progress-bar.js";
 import { buildLocaleDefinitions } from "../i18n/locale-definitions.js";
@@ -71,7 +70,6 @@ function createAdminLayoutRoute(path, opts = {}) {
                                     /*#__PURE__*/ jsxs("main", {
                                         className: classnames('byline-admin-layout-main', admin_layout_module.main),
                                         children: [
-                                            /*#__PURE__*/ jsx(DrawerToggle, {}),
                                             /*#__PURE__*/ jsx(AdminMenuDrawer, {}),
                                             /*#__PURE__*/ jsx(Content, {
                                                 children: /*#__PURE__*/ jsx(Outlet, {})

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.11.2",
+  "version": "3.11.3",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -119,13 +119,13 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/ai": "3.11.2",
-    "@byline/admin": "3.11.2",
-    "@byline/core": "3.11.2",
-    "@byline/auth": "3.11.2",
-    "@byline/ui": "3.11.2",
-    "@byline/client": "3.11.2",
-    "@byline/i18n": "3.11.2"
+    "@byline/admin": "3.11.3",
+    "@byline/auth": "3.11.3",
+    "@byline/ai": "3.11.3",
+    "@byline/ui": "3.11.3",
+    "@byline/client": "3.11.3",
+    "@byline/i18n": "3.11.3",
+    "@byline/core": "3.11.3"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/chrome/admin-app-bar.module.css

@@ -19,24 +19,26 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
+  padding: 1rem 1rem 1rem 0.75rem;
   background-color: #ffffff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
 }
 
 :is([data-theme="dark"], :global(.dark)) .header,
 :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar) {
   background-color: var(--canvas-800);
+  border-bottom-color: var(--canvas-700);
 }
 
 .left,
 :global(.byline-admin-app-bar-left) {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5em;
   flex: 1 1 auto;
   min-width: 0;
 }

package/src/admin-shell/chrome/admin-app-bar.tsx

@@ -16,6 +16,7 @@ import cx from 'classnames'
 
 import { adminSignOut, type CurrentAdminUser } from '../../server-fns/auth/index.js'
 import styles from './admin-app-bar.module.css'
+import { AdminDrawerToggle } from './admin-drawer-toggle.js'
 import { Branding } from './branding.js'
 import { Breadcrumbs } from './breadcrumbs/breadcrumbs.js'
 import { useBreadcrumbs } from './breadcrumbs/breadcrumbs-provider.js'
@@ -53,6 +54,7 @@ export function AdminAppBar({ user }: AdminAppBarProps) {
   return (
     <header className={cx('byline-admin-app-bar', styles.header)}>
       <div className={cx('byline-admin-app-bar-left', styles.left)}>
+        <AdminDrawerToggle />
         <Branding />
         <Breadcrumbs
           homePath={breadCrumbSettings.homePath}

package/src/admin-shell/chrome/{drawer-toggle.module.css → admin-drawer-toggle.module.css}

@@ -6,7 +6,7 @@
 
 .root,
 :global(.byline-admin-drawer-toggle) {
-  position: fixed;
+  position: static;
   top: 38px;
   z-index: 50;
   transition: all 300ms ease-in-out;
@@ -25,6 +25,6 @@
 .button,
 :global(.byline-admin-drawer-toggle-button) {
   outline: none;
-  min-width: 42px;
+  min-width: 36px;
   height: 36px;
 }

package/src/admin-shell/chrome/{drawer-toggle.tsx → admin-drawer-toggle.tsx}

@@ -9,10 +9,10 @@
 import { IconButton, Tooltip } from '@byline/ui/react'
 import cx from 'classnames'
 
-import styles from './drawer-toggle.module.css'
-import { useAdminMenu } from './menu-provider.js'
+import styles from './admin-drawer-toggle.module.css'
+import { useAdminMenu } from './admin-menu-provider.jsx'
 
-export function DrawerToggle() {
+export function AdminDrawerToggle() {
   const { toggleDrawer, drawerOpen } = useAdminMenu()
 
   return (

package/src/admin-shell/chrome/{menu-drawer.module.css → admin-menu-drawer.module.css}

@@ -19,7 +19,7 @@
   border-right: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
   background-color: var(--canvas-25);
   z-index: 40;
-  transition: all 300ms ease-in-out;
+  transition: all 200ms ease-in-out;
 }
 
 :is([data-theme="dark"], :global(.dark)) .aside,
@@ -31,7 +31,7 @@
 .asideMobile,
 :global(.byline-admin-menu-drawer-aside-mobile) {
   position: fixed;
-  top: 45px;
+  top: 42px;
   bottom: 0;
   left: 0;
 }
@@ -67,7 +67,7 @@
 .nav,
 :global(.byline-admin-menu-drawer) {
   position: sticky;
-  top: 55px;
+  top: 0;
   margin: 0;
   max-height: calc(100vh - 60px);
   overflow-y: auto;
@@ -75,7 +75,7 @@
 
 .nav ul,
 :global(.byline-admin-menu-drawer) ul {
-  margin: 1.4rem 0.5rem 0.5rem;
+  margin: 0.75rem 0.5rem 0.5rem;
   padding: 0;
   list-style: none;
   list-style-position: outside;
@@ -137,9 +137,24 @@
   opacity: 0.6;
 }
 
+/* Compact items render as a centered square so the hover/active background
+   (applied to the <li>) reads as a square icon button rather than a wide
+   rectangle. The <li> is the hover target, so it must carry the square size. */
+.nav ul :global(li.menu-item.compact),
+:global(.byline-admin-menu-drawer) ul :global(li.menu-item.compact) {
+  width: 34px;
+  height: 34px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Fill the square and drop the default 7px padding so the icon centers
+   exactly within the <li> hover area. */
 .nav ul :global(li.menu-item.compact) :is(a, button),
 :global(.byline-admin-menu-drawer) ul :global(li.menu-item.compact) :is(a, button) {
   justify-content: center;
+  padding: 0;
+  height: 100%;
 }
 
 .nav ul :global(li.menu-item.active) :is(a, button),

package/src/admin-shell/chrome/{menu-drawer.tsx → admin-menu-drawer.tsx}

@@ -26,11 +26,11 @@ import {
 import cx from 'classnames'
 import { useSwipeable } from 'react-swipeable'
 
-import { useAbilities } from '../../integrations/abilities.js'
+import { useAbilities } from '../../integrations/abilities.jsx'
+import styles from './admin-menu-drawer.module.css'
+import { useAdminMenu } from './admin-menu-provider.jsx'
 import { Link } from './loose-router.js'
-import styles from './menu-drawer.module.css'
-import { useAdminMenu } from './menu-provider.js'
-import { PreviewToggle } from './preview-toggle.js'
+import { PreviewToggle } from './preview-toggle.jsx'
 
 const isActive = (currentPath: string, linkHref: string): boolean => {
   // Root admin highlights only on exact match so it doesn't stay lit on
@@ -58,7 +58,7 @@ function MenuItem({ to, label, icon, pathname, compact }: MenuItemProps) {
     <li className={cx('menu-item', { active: isActive(pathname, to), compact })}>
       <Link to={to}>
         {compact ? (
-          <Tooltip text={label} side="right">
+          <Tooltip text={label} side="right" delay={0}>
             {iconSpan}
           </Tooltip>
         ) : (

package/src/admin-shell/chrome/content.tsx

@@ -13,8 +13,8 @@ import { useEffect } from 'react'
 
 import cx from 'classnames'
 
+import { useAdminMenu } from './admin-menu-provider.jsx'
 import styles from './content.module.css'
-import { useAdminMenu } from './menu-provider.js'
 
 /**
  * Wrapper for the main content area of the admin shell.

package/src/admin-shell/chrome/hamburger.tsx

@@ -5,8 +5,8 @@ import type React from 'react'
 import { useTranslation } from '@byline/i18n/react'
 import cx from 'classnames'
 
+import { useAdminMenu } from './admin-menu-provider.jsx'
 import styles from './hamburger.module.css'
-import { useAdminMenu } from './menu-provider.js'
 
 interface HamburgerProps {
   className?: string

package/src/admin-shell/chrome/preview-toggle.tsx

@@ -107,7 +107,7 @@ export function PreviewToggle({ compact }: PreviewToggleProps) {
         }
       >
         {compact ? (
-          <Tooltip text={label} side="right">
+          <Tooltip text={label} side="right" delay={0}>
             {iconSpan}
           </Tooltip>
         ) : (

package/src/routes/create-admin-layout-route.tsx

@@ -30,10 +30,9 @@ import cx from 'classnames'
 
 import { AdminAppBar } from '../admin-shell/chrome/admin-app-bar.js'
 import layoutStyles from '../admin-shell/chrome/admin-layout.module.css'
+import { AdminMenuDrawer } from '../admin-shell/chrome/admin-menu-drawer.jsx'
+import { AdminMenuProvider } from '../admin-shell/chrome/admin-menu-provider.jsx'
 import { Content } from '../admin-shell/chrome/content.js'
-import { DrawerToggle } from '../admin-shell/chrome/drawer-toggle.js'
-import { AdminMenuDrawer } from '../admin-shell/chrome/menu-drawer.js'
-import { AdminMenuProvider } from '../admin-shell/chrome/menu-provider.js'
 import { RouteError, RouteNotFound } from '../admin-shell/chrome/route-error.js'
 import { RouteProgressBar } from '../admin-shell/chrome/route-progress-bar.js'
 import { buildLocaleDefinitions } from '../i18n/locale-definitions.js'
@@ -107,7 +106,6 @@ export function createAdminLayoutRoute(path: string, opts: AdminLayoutOpts = {})
                   <RouteProgressBar />
                   <AdminAppBar user={user} />
                   <main className={cx('byline-admin-layout-main', layoutStyles.main)}>
-                    <DrawerToggle />
                     <AdminMenuDrawer />
                     <Content>
                       <Outlet />

package/dist/admin-shell/chrome/drawer-toggle.module.js

@@ -1,8 +0,0 @@
-import "./drawer-toggle_module.css";
-const drawer_toggle_module = {
-    root: "root-sFPc6W",
-    rootClosed: "rootClosed-Imq2hs",
-    rootOpen: "rootOpen-TiUCD2",
-    button: "button-VMHDrJ"
-};
-export default drawer_toggle_module;

package/dist/admin-shell/chrome/drawer-toggle_module.css

@@ -1,21 +0,0 @@
-:is(.root-sFPc6W, .byline-admin-drawer-toggle) {
-  z-index: 50;
-  transition: all .3s ease-in-out;
-  position: fixed;
-  top: 38px;
-}
-
-:is(.rootClosed-Imq2hs, .byline-admin-drawer-toggle-closed) {
-  left: 8px;
-}
-
-:is(.rootOpen-TiUCD2, .byline-admin-drawer-toggle-open) {
-  left: 160px;
-}
-
-:is(.button-VMHDrJ, .byline-admin-drawer-toggle-button) {
-  outline: none;
-  min-width: 42px;
-  height: 36px;
-}
-

package/dist/admin-shell/chrome/menu-drawer.module.js

@@ -1,12 +0,0 @@
-import "./menu-drawer_module.css";
-const menu_drawer_module = {
-    aside: "aside-zO2mZZ",
-    asideMobile: "asideMobile-k64Dd_",
-    asideMobileOpen: "asideMobileOpen-PL5eF1",
-    asideMobileClosed: "asideMobileClosed-GnS1qX",
-    asideDesktop: "asideDesktop-Enrzwp",
-    asideDesktopOpen: "asideDesktopOpen-aaA0E_",
-    asideDesktopClosed: "asideDesktopClosed-S8clHP",
-    nav: "nav-_d0pIg"
-};
-export default menu_drawer_module;