@open-mercato/ui 0.5.1-develop.2996.ce62fd491c → 0.5.1-develop.3036.f02c281f23

package/dist/primitives/popover.js

@@ -14,7 +14,7 @@ const PopoverContent = React.forwardRef(({ className, align = "start", sideOffse
     align,
     sideOffset,
     className: cn(
-      "z-dropdown min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none",
+      "z-tooltip min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

package/dist/primitives/popover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/popover.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport const Popover = PopoverPrimitive.Root\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor\n\nexport const PopoverClose = PopoverPrimitive.Close\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'start', sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-dropdown min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport const Popover = PopoverPrimitive.Root\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor\n\nexport const PopoverClose = PopoverPrimitive.Close\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'start', sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-tooltip min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n"],
   "mappings": ";AAmBI;AAjBJ,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,UAAU;AAEZ,MAAM,UAAU,iBAAiB;AAEjC,MAAM,iBAAiB,iBAAiB;AAExC,MAAM,gBAAgB,iBAAiB;AAEvC,MAAM,eAAe,iBAAiB;AAEtC,MAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,QAAQ,SAAS,aAAa,GAAG,GAAG,MAAM,GAAG,QAC3D,oBAAC,iBAAiB,QAAjB,EACC;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,GACF,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.5.1-develop.2996.ce62fd491c",
+  "version": "0.5.1-develop.3036.f02c281f23",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -134,12 +134,12 @@
     "recharts": "^3.8.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2996.ce62fd491c",
+    "@open-mercato/shared": "0.5.1-develop.3036.f02c281f23",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2996.ce62fd491c",
+    "@open-mercato/shared": "0.5.1-develop.3036.f02c281f23",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { createContext, useContext } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-import { ChevronDown, Search, X } from 'lucide-react'
+import { ChevronDown, ChevronLeft, Search, X } from 'lucide-react'
 import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
 import { Input } from '../primitives/input'
@@ -547,6 +547,25 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       document.cookie = `om_sidebar_collapsed=${collapsed ? '1' : '0'}; path=/; max-age=31536000; samesite=lax`
     } catch { /* cookies disabled — non-critical */ }
   }, [collapsed])
+
+  // Two-level sidebar (Option B): when entering settings/profile mode, force the
+  // main sidebar to collapsed (icons only) so the section sub-nav can sit beside
+  // it; restore the user's previous expansion when returning to the main mode.
+  // Initial ref is 'main' so direct mounts on /backend/settings also auto-collapse.
+  const collapsedBeforeSectionRef = React.useRef<boolean | null>(null)
+  const previousSidebarModeRef = React.useRef<'main' | 'settings' | 'profile'>('main')
+  React.useEffect(() => {
+    const previous = previousSidebarModeRef.current
+    if (previous === 'main' && sidebarMode !== 'main') {
+      collapsedBeforeSectionRef.current = collapsed
+      if (!collapsed) setCollapsed(true)
+    } else if (previous !== 'main' && sidebarMode === 'main' && collapsedBeforeSectionRef.current !== null) {
+      const restoreTo = collapsedBeforeSectionRef.current
+      collapsedBeforeSectionRef.current = null
+      if (collapsed !== restoreTo) setCollapsed(restoreTo)
+    }
+    previousSidebarModeRef.current = sidebarMode
+  }, [sidebarMode, collapsed])
   React.useEffect(() => {
     try { localStorage.setItem('om:sidebarOpenGroups', JSON.stringify(openGroups)) } catch { /* localStorage blocked (private mode) — non-critical */ }
   }, [openGroups])
@@ -584,7 +603,8 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     sections: SectionNavGroup[],
     title: string,
     compact: boolean,
-    hideHeader?: boolean
+    hideHeader?: boolean,
+    hideSearch?: boolean
   ) {
     const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
     const lastVisibleIndex = sortedSections.length - 1
@@ -603,7 +623,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
             </Link>
           </div>
         )}
-        {!compact && (
+        {!compact && !hideSearch && (
           <Input
             type="text"
             value={navQuery}
@@ -628,13 +648,14 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
         <div data-sidebar-scroll="true" className={`flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? '-ml-2 pl-2' : '-ml-3 pl-3'}`}>
           <nav className="flex flex-col gap-2">
           {sortedSections.map((section, sectionIndex) => {
+            const sectionNavQueryActive = hideSearch ? false : navQueryActive
             const matchesItemQuery = (item: typeof section.items[number]): boolean => {
-              if (!navQueryActive) return true
+              if (!sectionNavQueryActive) return true
               const label = item.labelKey ? t(item.labelKey, item.label) : item.label
               if (matchesQuery(label)) return true
               return Array.isArray(item.children) && item.children.some(matchesItemQuery)
             }
-            const visibleItems = navQueryActive
+            const visibleItems = sectionNavQueryActive
               ? section.items.filter(matchesItemQuery)
               : section.items
             if (visibleItems.length === 0) return null
@@ -646,7 +667,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
               [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
             const filterChildren = (children: typeof section.items | undefined) => {
               if (!children) return [] as typeof section.items
-              if (!navQueryActive) return [...children]
+              if (!sectionNavQueryActive) return [...children]
               return children.filter(matchesItemQuery)
             }
 
@@ -661,7 +682,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                 pathname === child.href ||
                 pathname.startsWith(`${child.href}/`)
               )))
-              const showChildren = childItems.length > 0 && (isOnItemBranch || navQueryActive)
+              const showChildren = childItems.length > 0 && (isOnItemBranch || sectionNavQueryActive)
               const isActive = isOnItemBranch || hasActiveChild
               const base = compact ? 'w-10 h-10 justify-center' : 'w-full py-2 gap-2'
               const spacingStyle = !compact
@@ -731,7 +752,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     )
   }
 
-  function renderSidebar(compact: boolean, hideHeader?: boolean) {
+  function renderSidebar(compact: boolean, hideHeader?: boolean, forceMainOnly?: boolean) {
     if (!isChromeReady && isChromeLoading && resolvedGroups.length === 0) {
       return (
         <div className="flex flex-col min-h-full gap-3" data-testid="backend-chrome-loading">
@@ -768,7 +789,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       )
     }
 
-    if (sidebarMode === 'settings' && resolvedSettingsSections && resolvedSettingsSections.length > 0) {
+    if (!forceMainOnly && sidebarMode === 'settings' && resolvedSettingsSections && resolvedSettingsSections.length > 0) {
       const mergedSettingsSections = mergeSectionGroupsWithInjected(
         resolvedSettingsSections,
         settingsSidebarInjectedMenuItems,
@@ -782,7 +803,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       )
     }
 
-    if (sidebarMode === 'profile' && resolvedProfileSections && resolvedProfileSections.length > 0) {
+    if (!forceMainOnly && sidebarMode === 'profile' && resolvedProfileSections && resolvedProfileSections.length > 0) {
       const mergedProfileSections = mergeSectionGroupsWithInjected(
         resolvedProfileSections,
         profileSidebarInjectedMenuItems,
@@ -1013,9 +1034,49 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     )
   }
 
-  const gridColsClass = effectiveCollapsed
-    ? 'lg:grid-cols-[80px_1fr]'
-    : 'lg:grid-cols-[240px_1fr]'
+  function renderSectionAside() {
+    let sections: SectionNavGroup[] | null = null
+    let title = ''
+    if (sidebarMode === 'settings' && resolvedSettingsSections && resolvedSettingsSections.length > 0) {
+      sections = mergeSectionGroupsWithInjected(
+        resolvedSettingsSections,
+        settingsSidebarInjectedMenuItems,
+        t,
+      )
+      title = settingsSectionTitle ?? t('backend.nav.settings', 'Settings')
+    } else if (sidebarMode === 'profile' && resolvedProfileSections && resolvedProfileSections.length > 0) {
+      sections = mergeSectionGroupsWithInjected(
+        resolvedProfileSections,
+        profileSidebarInjectedMenuItems,
+        t,
+      )
+      title = profileSectionTitle ?? t('backend.nav.profile', 'Profile')
+    }
+    if (!sections) return null
+    return (
+      <div className="flex h-full flex-col gap-2">
+        <Link
+          href="/backend"
+          className="inline-flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
+          data-testid="appshell-section-back-to-main"
+          aria-label={t('backend.nav.backToMain', 'Back to Main')}
+        >
+          <ChevronLeft className="size-4 shrink-0" aria-hidden />
+          <span className="truncate">{title}</span>
+        </Link>
+        <div className="min-h-0 flex-1">
+          {renderSectionSidebar(sections, title, false, true, true)}
+        </div>
+      </div>
+    )
+  }
+
+  const isSectionView =
+    (sidebarMode === 'settings' && !!resolvedSettingsSections && resolvedSettingsSections.length > 0) ||
+    (sidebarMode === 'profile' && !!resolvedProfileSections && resolvedProfileSections.length > 0)
+  const gridColsClass = isSectionView
+    ? (effectiveCollapsed ? 'lg:grid-cols-[80px_240px_1fr]' : 'lg:grid-cols-[240px_240px_1fr]')
+    : (effectiveCollapsed ? 'lg:grid-cols-[80px_1fr]' : 'lg:grid-cols-[240px_1fr]')
   const headerCtxValue = React.useMemo(() => ({
     setBreadcrumb: setHeaderBreadcrumb,
     setTitle: setHeaderTitle,
@@ -1055,10 +1116,10 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
 
   return (
     <HeaderContext.Provider value={headerCtxValue}>
-    <div className={`min-h-svh lg:grid ${gridColsClass}`}>
-      {/* Desktop sidebar */}
-      <aside ref={sidebarAsideRef} className={`${asideClassesBase} ${effectiveCollapsed ? 'px-2' : 'px-3'} hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`} style={{ width: asideWidth }}>
-        {renderSidebar(effectiveCollapsed)}
+    <div className={`min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`}>
+      {/* Desktop main sidebar */}
+      <aside ref={sidebarAsideRef} className={`${asideClassesBase} ${effectiveCollapsed ? 'px-2' : 'px-3'} hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative transition-[width,padding] duration-200 ease-out`} style={{ width: asideWidth }}>
+        {renderSidebar(effectiveCollapsed, false, isSectionView)}
         {/* Scroll affordance — gradient fade + chevron that flips up when the user
             reaches the bottom and disappears when nothing is scrollable. */}
         {sidebarScrollState !== 'none' ? (
@@ -1077,6 +1138,26 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
         ) : null}
       </aside>
 
+      {/* Desktop section sidebar (Option B two-level) — sits beside the main sidebar
+          when the user is on settings/profile routes. Mobile drawer keeps the
+          original swap behavior to fit the narrow width. */}
+      {isSectionView ? (
+        <aside
+          className={`${asideClassesBase} px-3 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`}
+          style={{ width: '240px' }}
+          data-testid="appshell-section-sidebar"
+        >
+          {renderSectionAside()}
+          {/* Static bottom fade — covers the native iOS scroll indicator and signals
+              that the section list is scrollable. Same look as the main sidebar's
+              affordance but without the chevron / scroll-state machinery. */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-background via-background/80 to-transparent"
+          />
+        </aside>
+      ) : null}
+
       <div className="flex min-h-svh flex-col min-w-0">
         <header className="border-b bg-background/80 px-3 lg:px-4 py-2 lg:py-3 flex items-center justify-between gap-2">
           <div

package/src/backend/CrudForm.tsx

@@ -796,6 +796,12 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       const target = resolveInternalNavigationTarget(href)
       if (!target) return
       if (shouldBypassUnsavedChangesGuardRef.current?.(target)) return
+      const baselineSnapshot = dirtyBaselineSnapshotRef.current
+      if (baselineSnapshot && JSON.stringify(valuesRef.current) === baselineSnapshot) {
+        isDirtyRef.current = false
+        setHasUnsavedChanges(false)
+        return
+      }
       event.preventDefault()
       event.stopPropagation()
       if (navigationConfirmPendingRef.current) return

package/src/backend/__tests__/AppShell.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import * as React from 'react'
-import { screen, waitFor } from '@testing-library/react'
+import { screen, waitFor, within } from '@testing-library/react'
 import { AppShell, ApplyBreadcrumb } from '../AppShell'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 
@@ -384,6 +384,158 @@ describe('AppShell', () => {
     }
   })
 
+  describe('two-level sidebar (settings/profile mode)', () => {
+    it('renders main + section sidebars side-by-side when on a settings path', async () => {
+      mockPathname = '/backend/entities/user'
+
+      const { container } = renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={groups}
+          settingsPathPrefixes={['/backend/entities/user']}
+          settingsSections={[
+            {
+              id: 'data-designer',
+              label: 'Data Designer',
+              items: [
+                { id: 'user-entities', label: 'User Entities', href: '/backend/entities/user' },
+              ],
+            },
+          ]}
+        >
+          <div>Settings content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('User Entities')).toBeInTheDocument()
+      })
+
+      const sectionAside = screen.getByTestId('appshell-section-sidebar')
+      expect(sectionAside).toBeInTheDocument()
+      expect(within(sectionAside).getByText('User Entities')).toBeInTheDocument()
+      // Main aside is auto-collapsed (icons only) when on a section path; the
+      // labels live in the `title` tooltip attribute, not as visible text.
+      expect(container.querySelector('a[href="/backend/users"]')).not.toBeNull()
+      expect(container.querySelector('a[href="/backend/roles"]')).not.toBeNull()
+    })
+
+    it('section header renders chevron + title as a single Back-to-Main link', async () => {
+      mockPathname = '/backend/entities/user'
+
+      renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={groups}
+          settingsSectionTitle="Settings"
+          settingsPathPrefixes={['/backend/entities/user']}
+          settingsSections={[
+            {
+              id: 'data-designer',
+              label: 'Data Designer',
+              items: [
+                { id: 'user-entities', label: 'User Entities', href: '/backend/entities/user' },
+              ],
+            },
+          ]}
+        >
+          <div>Settings content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      const backLink = await screen.findByTestId('appshell-section-back-to-main')
+      expect(backLink).toHaveAttribute('href', '/backend')
+      expect(backLink).toHaveAttribute('aria-label', 'Back to Main')
+      expect(backLink.textContent).toContain('Settings')
+    })
+
+    it('does not render a duplicate search input inside the section sidebar', async () => {
+      mockPathname = '/backend/entities/user'
+
+      renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={groups}
+          settingsPathPrefixes={['/backend/entities/user']}
+          settingsSections={[
+            {
+              id: 'data-designer',
+              label: 'Data Designer',
+              items: [
+                { id: 'user-entities', label: 'User Entities', href: '/backend/entities/user' },
+              ],
+            },
+          ]}
+        >
+          <div>Settings content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      const sectionAside = await screen.findByTestId('appshell-section-sidebar')
+      expect(within(sectionAside).queryByLabelText('Search navigation')).toBeNull()
+    })
+
+    it('auto-collapses the main sidebar to 80px when mounting directly on a settings path', async () => {
+      mockPathname = '/backend/entities/user'
+
+      const { container } = renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={groups}
+          settingsPathPrefixes={['/backend/entities/user']}
+          settingsSections={[
+            {
+              id: 'data-designer',
+              label: 'Data Designer',
+              items: [
+                { id: 'user-entities', label: 'User Entities', href: '/backend/entities/user' },
+              ],
+            },
+          ]}
+        >
+          <div>Settings content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        const mainAside = container.querySelector('aside') as HTMLElement | null
+        expect(mainAside).not.toBeNull()
+        expect(mainAside!.style.width).toBe('80px')
+      })
+    })
+
+    it('does not render the section sidebar when on a main route', async () => {
+      mockPathname = '/backend/users'
+
+      renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={groups}
+          settingsPathPrefixes={['/backend/entities/user']}
+          settingsSections={[
+            {
+              id: 'data-designer',
+              label: 'Data Designer',
+              items: [
+                { id: 'user-entities', label: 'User Entities', href: '/backend/entities/user' },
+              ],
+            },
+          ]}
+        >
+          <div>Main content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      expect(screen.queryByTestId('appshell-section-sidebar')).toBeNull()
+      expect(screen.queryByTestId('appshell-section-back-to-main')).toBeNull()
+    })
+  })
+
   it('renders nav icons from iconName when iconMarkup is missing', async () => {
     const previousFetch = global.fetch
     const previousWindowFetch = window.fetch

package/src/primitives/popover.tsx

@@ -22,7 +22,7 @@ export const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-dropdown min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',
+        'z-tooltip min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',
         'data-[state=open]:animate-in data-[state=closed]:animate-out',
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
         'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',