@stacksjs/components 0.2.53 → 0.2.63

package/dist/{Sidebar-73vc78as.stx → Sidebar-0jzasrmt.stx}

@@ -4,10 +4,19 @@ export const collapsed = $props.collapsed ?? false
 export const collapsible = $props.collapsible ?? true
 export const width = $props.width || 240
 export const minWidth = $props.minWidth || 64
+export const collapseMode = $props.collapseMode || 'rail'
 export const variant = $props.variant || 'tahoe'
 export const position = $props.position || 'left'
 export const placement = $props.placement || 'fixed'
 export const bordered = $props.bordered ?? true
+export const materialOpacity = $props.materialOpacity ?? (variant === 'desktop' ? 0.78 : 0.7)
+export const materialDarkOpacity = $props.materialDarkOpacity ?? (variant === 'desktop' ? 0.8 : materialOpacity)
+export const materialScheme = $props.materialScheme || 'system'
+export const persistKey = $props.persistKey || ''
+export const shellSelector = $props.shellSelector || ''
+export const widthVar = $props.widthVar || '--stx-sidebar-width'
+export const collapsedClass = $props.collapsedClass || ''
+export const nativeMaterialCollapse = $props.nativeMaterialCollapse ?? (variant === 'desktop' && collapseMode === 'hidden')
 export const className = $props.className || ''
 
 const variantStyles = {
@@ -44,13 +53,13 @@ const variantStyles = {
     slot: 'px-5 py-5',
   },
   desktop: {
-    bg: 'bg-white/42 dark:bg-black/32',
-    border: 'border-white/30 dark:border-white/10',
-    backdrop: 'backdrop-blur-3xl backdrop-saturate-200',
+    bg: 'bg-[#f3f3f1]/48 dark:bg-neutral-950/32',
+    border: 'border-white/15 dark:border-white/10',
+    backdrop: 'backdrop-blur-3xl backdrop-saturate-150',
     tint: false,
     shimmer: true,
-    nav: 'px-4 py-4 space-y-1',
-    slot: 'px-4 py-4',
+    nav: 'px-5 py-2 space-y-1',
+    slot: 'px-5 py-2',
   },
 }
 
@@ -77,7 +86,9 @@ export const containerClasses = [
   className,
 ].filter(Boolean).join(' ')
 
-export const collapseBtnPosition = position === 'left' ? 'right-2' : 'left-2'
+export const collapseBtnPosition = variant === 'desktop'
+  ? (position === 'left' ? 'left-[166px]' : 'right-[166px]')
+  : (position === 'left' ? 'right-2' : 'left-2')
 export const navClasses = style.nav || 'px-3 py-2 space-y-1'
 export const slotClasses = style.slot || 'px-3 py-2'
 </script>
@@ -88,9 +99,18 @@ const collapsedProp = {{ collapsed }}
 const collapsibleProp = {{ collapsible }}
 const widthProp = {{ width }}
 const minWidthProp = {{ minWidth }}
+const collapseModeProp = {{ collapseMode }}
 const sectionsProp = {{ sections }}
 const positionProp = {{ position }}
 const variantProp = {{ variant }}
+const materialOpacityProp = {{ materialOpacity }}
+const materialDarkOpacityProp = {{ materialDarkOpacity }}
+const materialSchemeProp = {{ materialScheme }}
+const persistKeyProp = {{ persistKey }}
+const shellSelectorProp = {{ shellSelector }}
+const widthVarProp = {{ widthVar }}
+const collapsedClassProp = {{ collapsedClass }}
+const nativeMaterialCollapseProp = {{ nativeMaterialCollapse }}
 
 const collapsed = state(collapsedProp)
 const isHovered = state(false)
@@ -98,14 +118,45 @@ const hasNativeSidebar = state(false)
 
 const showExpanded = derived(() => !collapsed() || isHovered())
 const sidebarWidth = derived(() => {
+  if (collapsed() && collapseModeProp === 'hidden') return '0px'
   if (collapsed() && !isHovered()) return `${minWidthProp}px`
   return `${widthProp}px`
 })
 const collapseAriaLabel = derived(() => collapsed() ? 'Expand sidebar' : 'Collapse sidebar')
-const collapseIconClass = derived(() => collapsed() ? 'i-hugeicons-sidebar-right' : 'i-hugeicons-sidebar-left')
+
+function applyCollapseEffects(nextCollapsed) {
+  if (persistKeyProp) {
+    try {
+      window.localStorage?.setItem(persistKeyProp, nextCollapsed ? 'true' : 'false')
+    }
+    catch {}
+  }
+
+  if (shellSelectorProp) {
+    document.querySelectorAll(shellSelectorProp).forEach((shell) => {
+      shell.style?.setProperty?.(widthVarProp, nextCollapsed && collapseModeProp === 'hidden' ? '0px' : `${widthProp}px`)
+      if (shell.dataset) shell.dataset.sidebarCollapsed = nextCollapsed ? 'true' : 'false'
+    })
+  }
+
+  document.documentElement.dataset.stxSidebarCollapsed = nextCollapsed ? 'true' : 'false'
+  if (collapsedClassProp) {
+    document.documentElement.classList.toggle(collapsedClassProp, nextCollapsed)
+  }
+
+  if (nativeMaterialCollapseProp) {
+    window.craft?.window?.setWebSidebarCollapsed?.(nextCollapsed).catch?.(() => {})
+  }
+}
+
+function setCollapsed(nextCollapsed, shouldEmit = true) {
+  collapsed.set(nextCollapsed)
+  applyCollapseEffects(nextCollapsed)
+  if (shouldEmit) emit('collapse', nextCollapsed)
+}
 
 function onMouseEnter() {
-  if (collapsed() && collapsibleProp) isHovered.set(true)
+  if (collapsed() && collapsibleProp && collapseModeProp !== 'hidden') isHovered.set(true)
 }
 
 function onMouseLeave() {
@@ -113,8 +164,7 @@ function onMouseLeave() {
 }
 
 function toggleCollapse() {
-  collapsed.set(!collapsed())
-  emit('collapse', collapsed())
+  setCollapsed(!collapsed())
 }
 
 function onSectionToggle(sectionId) {
@@ -125,22 +175,46 @@ function onItemClick(event) {
   emit('itemClick', event.detail)
 }
 
+function isCraftRuntime() {
+  return window.__craftNativeSidebar === true
+    || window.craft?.__craft_bridge_loaded === true
+    || !!window.craft?.window
+    || !!window.webkit?.messageHandlers?.craft
+}
+
 onMount(async () => {
-  hasNativeSidebar.set(
-    window.__craftNativeSidebar === true
-    || window.craft?.hasNativeSidebar?.()
-    || (window.webkit?.messageHandlers?.craft && document.body?.dataset?.nativeSidebar === 'true'),
-  )
-  if (window.craft?.isCraft?.() && window.craft?.components?.createSidebar) {
+  if (persistKeyProp) {
+    try {
+      const saved = window.localStorage?.getItem(persistKeyProp)
+      if (saved === 'true' || saved === 'false') collapsed.set(saved === 'true')
+    }
+    catch {}
+  }
+
+  applyCollapseEffects(collapsed())
+
+  if (variantProp === 'desktop' && isCraftRuntime()) {
+    document.documentElement.classList.add('has-stx-sidebar-material')
+    if (document.body?.dataset) document.body.dataset.sidebarMaterial = 'desktop'
+  }
+
+  hasNativeSidebar.set(isCraftRuntime() && window.craft?.hasNativeSidebar?.() === true)
+
+  const nativeSidebarApi = window.craft?.nativeUI || window.craft?.components
+  if (isCraftRuntime() && nativeSidebarApi?.createSidebar) {
     try {
-      await window.craft.components.createSidebar({
+      const sidebar = await nativeSidebarApi.createSidebar({
         position: positionProp,
         width: widthProp,
         minWidth: minWidthProp,
+        collapseMode: collapseModeProp,
         collapsible: collapsibleProp,
         variant: variantProp,
         material: variantProp === 'desktop' ? 'sidebar' : undefined,
-        backgroundEffect: variantProp === 'desktop' ? 'shimmer' : undefined,
+        backgroundEffect: variantProp === 'desktop' ? 'vibrancy' : undefined,
+        materialOpacity: materialOpacityProp,
+        materialDarkOpacity: materialDarkOpacityProp,
+        materialScheme: materialSchemeProp,
         allowsVibrancy: variantProp === 'desktop' || variantProp === 'vibrancy' || variantProp === 'tahoe',
         sections: sectionsProp.map(s => ({
           id: s.id,
@@ -148,6 +222,7 @@ onMount(async () => {
           items: s.items?.map(i => ({ id: i.id, label: i.label, icon: i.icon, href: i.href, badge: i.badge })),
         })),
       })
+      if (sidebar) hasNativeSidebar.set(true)
     }
     catch (err) {
       console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
@@ -161,7 +236,10 @@ defineExpose({ collapsed, toggle: toggleCollapse })
 <aside
   :show="!hasNativeSidebar()"
   class="{{ containerClasses }} sidebar-container"
-  :style="`width: ${sidebarWidth()}`"
+  data-sidebar-variant="{{ variant }}"
+  data-sidebar-material-scheme="{{ materialScheme }}"
+  :aria-hidden="String(collapsed() && collapseModeProp === 'hidden')"
+  :style="`width: ${sidebarWidth()}; --stx-sidebar-material-opacity: ${materialOpacityProp}; --stx-sidebar-material-dark-opacity: ${materialDarkOpacityProp}`"
   @mouseenter="onMouseEnter()"
   @mouseleave="onMouseLeave()"
   role="navigation"
@@ -171,7 +249,7 @@ defineExpose({ collapsed, toggle: toggleCollapse })
     <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-amber-50/30 via-orange-50/20 to-stone-100/30 dark:from-neutral-800/20 dark:via-neutral-900/10 dark:to-neutral-800/20 mix-blend-overlay"></div>
   @endif
   @if(variantShimmer)
-    <div class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_18%_12%,rgba(255,255,255,0.46),transparent_28%),linear-gradient(120deg,rgba(255,255,255,0.22),rgba(255,255,255,0.04)_42%,rgba(255,255,255,0.18))] dark:bg-[radial-gradient(circle_at_18%_12%,rgba(255,255,255,0.12),transparent_30%),linear-gradient(120deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02)_45%,rgba(255,255,255,0.08))]"></div>
+    <div class="absolute inset-0 pointer-events-none bg-[linear-gradient(112deg,rgba(255,255,255,0.20)_0%,rgba(255,255,255,0.04)_45%,rgba(226,226,222,0.16)_100%)] dark:bg-[linear-gradient(112deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.02)_46%,rgba(255,255,255,0.06)_100%)]"></div>
   @endif
 
   @if($slots.header)
@@ -213,13 +291,15 @@ defineExpose({ collapsed, toggle: toggleCollapse })
 
   @if(collapsible)
     <button
-      :show="showExpanded()"
       type="button"
       class="absolute top-4 {{ collapseBtnPosition }} p-1.5 rounded-lg text-stone-400 hover:text-stone-600 hover:bg-black/5 dark:hover:text-neutral-300 dark:hover:bg-white/10 transition-colors z-20"
       @click="toggleCollapse()"
       :aria-label="collapseAriaLabel()"
+      data-sidebar-collapse
+      data-stx-sidebar-collapse-button
     >
-      <div :class="`${collapseIconClass()} w-5 h-5`"></div>
+      <div :show="!collapsed()" class="i-hugeicons-sidebar-left w-5 h-5"></div>
+      <div :show="collapsed()" class="i-hugeicons-sidebar-right w-5 h-5"></div>
     </button>
   @endif
 </aside>
@@ -229,7 +309,21 @@ defineExpose({ collapsed, toggle: toggleCollapse })
 .overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
 .overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 3px; }
 .overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.25); }
+.sidebar-container[data-sidebar-variant="desktop"] {
+  background-color: rgba(246, 246, 244, var(--stx-sidebar-material-opacity, 0.78));
+  backdrop-filter: blur(24px) saturate(1.08);
+  -webkit-backdrop-filter: blur(24px) saturate(1.08);
+}
+html.has-native-sidebar [data-stx-native-window-controls] {
+  display: none;
+}
+html.has-native-sidebar [data-stx-sidebar-web-chrome] {
+  margin-left: 202px;
+}
 @media (prefers-color-scheme: dark) {
+  .sidebar-container[data-sidebar-variant="desktop"]:not([data-sidebar-material-scheme="light"]) {
+    background-color: rgba(24, 24, 23, var(--stx-sidebar-material-dark-opacity, 0.8));
+  }
   .overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); }
   .overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.25); }
 }

package/dist/{SidebarHeader-7v174a9c.stx → SidebarHeader-ywpmx14d.stx}

@@ -8,6 +8,8 @@ export const searchPlaceholder = $props.searchPlaceholder || 'Search...'
 export const searchValue = $props.searchValue || ''
 export const collapsed = $props.collapsed ?? false
 export const variant = $props.variant || 'tahoe'
+export const showWindowControls = $props.showWindowControls ?? (variant === 'desktop' ? 'auto' : false)
+export const showNavigationControls = $props.showNavigationControls ?? variant === 'desktop'
 
 const headerVariants = {
   workspace: {
@@ -19,10 +21,13 @@ const headerVariants = {
     searchInput: 'w-full rounded-[16px] border border-zinc-200/70 bg-white/70 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-300/80 dark:border-white/10 dark:bg-white/10 dark:text-white',
   },
   desktop: {
-    titlebar: 'h-16 flex items-center justify-between px-4',
+    titlebar: 'h-14 flex items-center gap-5 px-5 border-b border-black/5 dark:border-white/10',
+    chrome: 'flex shrink-0 items-center justify-start gap-5 min-h-7',
+    trafficLight: 'h-3.5 w-3.5 rounded-full shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]',
+    navButton: 'inline-flex h-7 w-7 items-center justify-center rounded-full text-zinc-500/80 transition-colors hover:bg-white/35 hover:text-zinc-900 disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-zinc-500/80 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white',
     logo: 'w-9 h-9 rounded-[12px] bg-black/80 text-white flex items-center justify-center font-semibold text-sm shadow-sm dark:bg-white/14',
-    title: 'text-[17px] font-semibold text-zinc-950 dark:text-white truncate',
-    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
+    title: 'text-[15px] leading-[22px] font-medium text-zinc-950 dark:text-white truncate',
+    subtitle: 'text-xs text-zinc-500 dark:text-zinc-400 truncate',
     searchWrap: 'px-4 pb-4',
     searchInput: 'w-full rounded-[16px] border border-white/40 bg-white/45 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-white/70 dark:border-white/10 dark:bg-white/10 dark:text-white',
   },
@@ -38,24 +43,96 @@ const headerVariants = {
 
 const headerStyle = headerVariants[variant] || headerVariants.default
 export const titlebarClasses = headerStyle.titlebar
+export const chromeClasses = headerStyle.chrome || ''
+export const trafficLightClasses = headerStyle.trafficLight || ''
+export const navButtonClasses = headerStyle.navButton || ''
 export const logoClasses = headerStyle.logo
 export const titleClasses = headerStyle.title
 export const subtitleClasses = headerStyle.subtitle
 export const searchWrapClasses = headerStyle.searchWrap
 export const searchInputClasses = headerStyle.searchInput
+export const hasDesktopChrome = variant === 'desktop' && (showWindowControls || showNavigationControls)
+export const windowControlsClasses = showWindowControls === 'auto' ? 'hidden items-center gap-2' : 'flex items-center gap-2'
 </script>
 
 <script client>
 const emit = defineEmits()
 
+function isCraftRuntime() {
+  return window.__craftNativeSidebar === true
+    || window.craft?.__craft_bridge_loaded === true
+    || !!window.craft?.window
+    || !!window.webkit?.messageHandlers?.craft
+}
+
+function usesCustomWindowControls() {
+  return window.__craftCustomWindowControls === true
+    || document.documentElement.classList.contains('has-custom-window-controls')
+    || document.body?.dataset?.customWindowControls === 'true'
+}
+
+function syncWindowControls() {
+  document.querySelectorAll('[data-stx-native-window-controls]').forEach((element) => {
+    const show = element.dataset.stxNativeWindowControls === 'auto'
+      ? isCraftRuntime() && usesCustomWindowControls()
+      : true
+    element.classList.toggle('hidden', !show)
+    element.classList.toggle('flex', show)
+  })
+}
+
 function onSearchInput(event) {
   emit('search', event.target.value)
 }
+
+function goBack() {
+  window.history.back()
+  emit('back')
+}
+
+function goForward() {
+  window.history.forward()
+  emit('forward')
+}
+
+onMount(() => {
+  syncWindowControls()
+  window.addEventListener('craft:ready', syncWindowControls)
+  window.addEventListener('stx:load', syncWindowControls)
+
+  return () => {
+    window.removeEventListener('craft:ready', syncWindowControls)
+    window.removeEventListener('stx:load', syncWindowControls)
+  }
+})
 </script>
 
 <div class="flex-shrink-0">
   <!-- Title bar area -->
   <div class="{{ titlebarClasses }}">
+    @if(hasDesktopChrome)
+      <div class="{{ chromeClasses }}" data-stx-sidebar-web-chrome>
+        @if(showWindowControls)
+          <div class="{{ windowControlsClasses }}" aria-hidden="true" data-stx-native-window-controls="{{ showWindowControls === 'auto' ? 'auto' : 'always' }}">
+            <span class="{{ trafficLightClasses }} bg-[#ff5f57]"></span>
+            <span class="{{ trafficLightClasses }} bg-[#ffbd2e]"></span>
+            <span class="{{ trafficLightClasses }} bg-[#28c840]"></span>
+          </div>
+        @endif
+
+        @if(showNavigationControls)
+          <div class="flex items-center gap-2">
+            <button type="button" class="{{ navButtonClasses }}" @click="goBack()" aria-label="Go back">
+              <span class="h-5 w-5 i-hugeicons-arrow-left-02" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="{{ navButtonClasses }}" @click="goForward()" aria-label="Go forward">
+              <span class="h-5 w-5 i-hugeicons-arrow-right-02" aria-hidden="true"></span>
+            </button>
+          </div>
+        @endif
+      </div>
+    @endif
+
     @if(!collapsed)
       <div class="flex items-center gap-3 min-w-0">
         <!-- Logo -->

package/dist/{SidebarItem-3y3e8g2t.stx → SidebarItem-h53sgqzz.stx}

@@ -11,20 +11,20 @@ export const variant = $props.variant || 'tahoe'
 
 const itemVariants = {
   workspace: {
-    base: 'flex w-full items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] leading-tight transition-colors duration-150',
+    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2 text-[14px] leading-tight transition-colors duration-150',
     indent: '',
     active: 'bg-[#e7e7e5] text-zinc-950',
     inactive: 'text-zinc-700 hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
     icon: active ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-500',
-    badge: 'ml-auto rounded-full bg-white/70 px-2.5 py-0.5 text-[13px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/70 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
   },
   desktop: {
-    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] leading-tight transition-colors duration-150',
+    base: 'flex w-full items-center gap-3 rounded-[14px] px-3 py-1.5 text-[13.5px] leading-tight transition-colors duration-150',
     indent: '',
-    active: 'bg-white/55 text-zinc-950 shadow-sm ring-1 ring-white/50 dark:bg-white/12 dark:text-white dark:ring-white/10',
-    inactive: 'text-zinc-700 hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400',
-    badge: 'ml-auto rounded-full bg-white/55 px-2.5 py-0.5 text-xs font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+    active: 'bg-[#e8e8e6]/90 text-zinc-950 dark:bg-white/12 dark:text-white',
+    inactive: 'text-zinc-700 hover:bg-white/38 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400',
+    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/72 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
   },
   default: {
     base: 'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-all duration-150',
@@ -41,7 +41,7 @@ const baseItemList = [itemStyle.base, itemStyle.indent]
 const stateClasses = disabled ? 'opacity-50 cursor-not-allowed' : active ? itemStyle.active : itemStyle.inactive
 
 export const itemClasses = [...baseItemList, stateClasses].filter(Boolean).join(' ')
-export const iconClasses = `${icon} w-5 h-5 flex-shrink-0 ${itemStyle.icon}`
+export const iconClasses = `${icon} h-[18px] w-[18px] flex-shrink-0 ${itemStyle.icon}`
 export const badgeClasses = itemStyle.badge
 </script>
 

package/dist/{SidebarSection-z5ey6awe.stx → SidebarSection-npt9h265.stx}

@@ -14,7 +14,7 @@ const headerVariants = {
     hover: 'hover:text-zinc-600 dark:hover:text-zinc-300 cursor-pointer',
   },
   desktop: {
-    base: 'w-full flex items-center gap-2.5 px-3.5 pb-2 pt-4 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
+    base: 'w-full flex items-center gap-2.5 px-3 pb-1.5 pt-3 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
     hover: 'hover:bg-white/25 dark:hover:bg-white/10 cursor-pointer',
   },
   default: {
@@ -26,7 +26,7 @@ const headerVariants = {
 const headerStyle = headerVariants[variant] || headerVariants.default
 const headerClasses = [headerStyle.base, collapsible ? headerStyle.hover : ''].filter(Boolean).join(' ')
 export const headerClassesValue = headerClasses
-export const sectionClasses = variant === 'workspace' || variant === 'desktop' ? 'py-1.5' : 'py-1'
+export const sectionClasses = variant === 'workspace' ? 'py-1.5' : variant === 'desktop' ? 'py-1' : 'py-1'
 export const groupClasses = variant === 'workspace' || variant === 'desktop' ? 'space-y-1 overflow-hidden' : 'mt-1 space-y-0.5 overflow-hidden'
 export const labelClasses = variant === 'workspace' || variant === 'desktop'
   ? 'flex-1 truncate'