@stacksjs/components 0.2.111 → 0.2.112

package/src/ui/sidebar/Sidebar.stx

@@ -0,0 +1,573 @@
+<script server>
+import { resolveSidebarTheme } from './themes'
+
+// Data: [{ id, label, collapsible?, collapsed?, items: [{ id, label, icon,
+// iconColor, image, href, count, active?, disabled?, expanded?, children? }] }]
+export const sections = $props.sections || []
+
+// `theme` is the new name; `variant` is accepted for backwards compatibility.
+export const theme = $props.theme || $props.variant || 'macos'
+export const width = $props.width || 250
+export const position = $props.position || 'left'
+export const placement = $props.placement || 'fixed'
+export const bordered = $props.bordered ?? false
+
+// Collapsing. macOS sidebars hide entirely (toolbar button / drag); legacy
+// themes may collapse to a compact rail instead.
+export const collapsed = $props.collapsed ?? false
+export const collapsible = $props.collapsible ?? true
+export const collapseMode = $props.collapseMode || (theme === 'workspace' || theme === 'desktop' ? 'rail' : 'hidden')
+export const minWidth = $props.minWidth || 64
+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 className = $props.className || ''
+
+// Unique id so the client controller can find this pane even with several
+// sidebars on the page.
+export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36).slice(2, 8)}`
+
+const themeStyle = resolveSidebarTheme(theme)
+export const selectionModel = themeStyle.selection
+export const hasShimmerRim = themeStyle.layers.shimmerRim === true
+export const isFrosted = themeStyle.layers.frosted === true
+export const tintClasses = themeStyle.layers.tint || ''
+export const scrollAreaClasses = themeStyle.scrollArea
+
+const borderSide = position === 'left' ? 'border-r' : 'border-l'
+const borderClasses = bordered ? `${borderSide} border-black/5 dark:border-white/10` : ''
+const placementClasses = {
+  fixed: `fixed inset-y-0 z-50 ${position === 'left' ? 'left-0' : 'right-0'}`,
+  sticky: 'sticky top-0 h-screen',
+  static: 'relative h-full',
+}
+
+export const paneClasses = [
+  placementClasses[placement] || placementClasses.fixed,
+  'flex flex-col overflow-hidden',
+  'transition-[width] duration-300 ease-out',
+  themeStyle.pane,
+  borderClasses,
+  className,
+].filter(Boolean).join(' ')
+
+// Normalized ahead of the loop so template bindings stay simple accessors.
+export const sectionList = sections.map(section => ({
+  id: section.id,
+  label: section.label || '',
+  items: section.items || [],
+  collapsible: section.collapsible !== false,
+  collapsed: section.collapsed === true,
+}))
+
+// State classes the client controller swaps on rows. Kept as data attributes
+// so all behavior lives in one place (the controller below) and themes stay
+// pure data.
+export const activeClasses = themeStyle.item.active
+</script>
+
+<script client>
+const emit = defineEmits()
+const sidebarUidProp = '{{ sidebarUid }}'
+const collapsedProp = {{ collapsed }}
+const collapsibleProp = {{ collapsible }}
+const collapseModeProp = '{{ collapseMode }}'
+const widthProp = {{ width }}
+const minWidthProp = {{ minWidth }}
+const persistKeyProp = '{{ persistKey }}'
+const shellSelectorProp = '{{ shellSelector }}'
+const widthVarProp = '{{ widthVar }}'
+const collapsedClassProp = '{{ collapsedClass }}'
+
+const collapsed = state(collapsedProp)
+const sidebarWidth = derived(() => {
+  if (collapsed()) return collapseModeProp === 'hidden' ? '0px' : `${minWidthProp}px`
+  return `${widthProp}px`
+})
+
+let pane = null
+
+// ---------------------------------------------------------------------------
+// Selection — one row carries data-active="true"; the highlight classes come
+// from the theme (stored on the pane as data-active-class).
+// ---------------------------------------------------------------------------
+
+function activeClassList() {
+  return (pane?.dataset.activeClass || '').split(' ').filter(Boolean)
+}
+
+function setActiveRow(button) {
+  const classes = activeClassList()
+  pane.querySelectorAll('[data-sidebar-item][data-active="true"]').forEach((el) => {
+    el.removeAttribute('data-active')
+    el.classList.remove(...classes)
+  })
+  button.setAttribute('data-active', 'true')
+  button.classList.add(...classes)
+}
+
+// ---------------------------------------------------------------------------
+// Disclosure — rows know their ancestors (data-parents="a/b"). Collapsing a
+// row (or section) marks every descendant with data-collapsed, which the
+// scoped CSS animates to zero height, exactly like AppKit's outline collapse.
+// ---------------------------------------------------------------------------
+
+function syncRowVisibility() {
+  const collapsedIds = new Set()
+  pane.querySelectorAll('[data-sidebar-row][data-expanded="false"]').forEach((row) => {
+    collapsedIds.add(row.dataset.itemId)
+  })
+  pane.querySelectorAll('[data-sidebar-section][data-expanded="false"]').forEach((section) => {
+    section.querySelectorAll('[data-sidebar-row]').forEach((row) => {
+      row.setAttribute('data-collapsed', '')
+    })
+  })
+  pane.querySelectorAll('[data-sidebar-section][data-expanded="true"] [data-sidebar-row]').forEach((row) => {
+    const parents = (row.dataset.parents || '').split('/').filter(Boolean)
+    const hidden = parents.some(id => collapsedIds.has(id))
+    if (hidden) row.setAttribute('data-collapsed', '')
+    else row.removeAttribute('data-collapsed')
+  })
+}
+
+function toggleRowDisclosure(row) {
+  const expanded = row.getAttribute('data-expanded') === 'true'
+  row.setAttribute('data-expanded', String(!expanded))
+  syncRowVisibility()
+  emit('itemToggle', { id: row.dataset.itemId, expanded: !expanded })
+}
+
+function toggleSection(section) {
+  const expanded = section.getAttribute('data-expanded') !== 'false'
+  section.setAttribute('data-expanded', String(!expanded))
+  syncRowVisibility()
+  emit('sectionToggle', section.dataset.sectionId)
+}
+
+// ---------------------------------------------------------------------------
+// Pointer input (event delegation — items and sections stay presentational)
+// ---------------------------------------------------------------------------
+
+function onClick(event) {
+  const chevron = event.target.closest('[data-sidebar-disclosure]')
+  if (chevron) {
+    event.preventDefault()
+    toggleRowDisclosure(chevron.closest('[data-sidebar-row]'))
+    return
+  }
+
+  const sectionHeader = event.target.closest('[data-sidebar-section-header]')
+  if (sectionHeader) {
+    toggleSection(sectionHeader.closest('[data-sidebar-section]'))
+    return
+  }
+
+  const item = event.target.closest('[data-sidebar-item]')
+  if (item && !item.hasAttribute('data-disabled')) {
+    setActiveRow(item)
+    const row = item.closest('[data-sidebar-row]')
+    emit('itemClick', {
+      item: { id: row.dataset.itemId, label: item.dataset.label || '', href: item.getAttribute('href') || '' },
+      event,
+    })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Keyboard — matches macOS source lists: ↑/↓ move the selection over visible
+// rows, ←/→ collapse/expand, Return opens.
+// ---------------------------------------------------------------------------
+
+function visibleItems() {
+  return [...pane.querySelectorAll('[data-sidebar-row]:not([data-collapsed]) [data-sidebar-item]:not([data-disabled])')]
+}
+
+function onKeyDown(event) {
+  const items = visibleItems()
+  if (items.length === 0) return
+  const current = pane.querySelector('[data-sidebar-item][data-active="true"]')
+  const index = items.indexOf(current)
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault()
+    const next = event.key === 'ArrowDown'
+      ? items[Math.min(index + 1, items.length - 1)]
+      : items[Math.max(index - 1, 0)]
+    if (next && next !== current) {
+      setActiveRow(next)
+      next.scrollIntoView({ block: 'nearest' })
+      emit('itemClick', { item: { id: next.closest('[data-sidebar-row]').dataset.itemId, label: next.dataset.label || '', href: next.getAttribute('href') || '' }, event })
+    }
+  }
+  else if ((event.key === 'ArrowRight' || event.key === 'ArrowLeft') && current) {
+    const row = current.closest('[data-sidebar-row]')
+    if (row.querySelector('[data-sidebar-disclosure]')) {
+      const expanded = row.getAttribute('data-expanded') === 'true'
+      if (event.key === 'ArrowRight' ? !expanded : expanded) {
+        event.preventDefault()
+        toggleRowDisclosure(row)
+      }
+    }
+  }
+  else if (event.key === 'Enter' && current) {
+    current.click()
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Overlay scrollbar — a floating thumb that appears while scrolling and fades
+// away, like macOS overlay scrollbars. The native scrollbar is hidden so rows
+// keep their exact insets.
+// ---------------------------------------------------------------------------
+
+function attachOverlayScrollbar(scrollArea, thumb) {
+  let fadeTimer
+
+  function update() {
+    const { scrollTop, scrollHeight, clientHeight } = scrollArea
+    if (scrollHeight <= clientHeight) {
+      thumb.style.opacity = '0'
+      return
+    }
+    const trackHeight = clientHeight - 8
+    const height = Math.max(24, (clientHeight / scrollHeight) * trackHeight)
+    const top = 4 + (scrollTop / (scrollHeight - clientHeight)) * (trackHeight - height)
+    thumb.style.height = `${height}px`
+    thumb.style.transform = `translateY(${top}px)`
+    thumb.style.opacity = '1'
+    clearTimeout(fadeTimer)
+    fadeTimer = setTimeout(() => { thumb.style.opacity = '0' }, 900)
+  }
+
+  scrollArea.addEventListener('scroll', update, { passive: true })
+}
+
+// ---------------------------------------------------------------------------
+// Collapse (sidebar-wide) — persisted, synced to the app shell and to Craft's
+// native web-sidebar material when present.
+// ---------------------------------------------------------------------------
+
+function applyCollapseEffects(nextCollapsed) {
+  if (persistKeyProp) {
+    try { window.localStorage?.setItem(persistKeyProp, String(nextCollapsed)) } catch {}
+  }
+  if (shellSelectorProp) {
+    document.querySelectorAll(shellSelectorProp).forEach((shell) => {
+      shell.style?.setProperty?.(widthVarProp, nextCollapsed && collapseModeProp === 'hidden' ? '0px' : `${widthProp}px`)
+      if (shell.dataset) shell.dataset.sidebarCollapsed = String(nextCollapsed)
+    })
+  }
+  document.documentElement.dataset.stxSidebarCollapsed = String(nextCollapsed)
+  if (collapsedClassProp) document.documentElement.classList.toggle(collapsedClassProp, nextCollapsed)
+  window.craft?.window?.setWebSidebarCollapsed?.(nextCollapsed).catch?.(() => {})
+}
+
+function setCollapsed(nextCollapsed) {
+  collapsed.set(nextCollapsed)
+  applyCollapseEffects(nextCollapsed)
+  emit('collapse', nextCollapsed)
+}
+
+function toggleCollapse() {
+  if (collapsibleProp) setCollapsed(!collapsed())
+}
+
+// ---------------------------------------------------------------------------
+// Appearance — native sidebars follow the OS light/dark appearance. Crosswind
+// dark: utilities are class-based, so mirror prefers-color-scheme onto the
+// root element unless the app manages its own theme (data-theme attribute).
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Key-window tracking — AppKit dims a source-list selection from the accent
+// to a neutral fill the moment the window resigns key. `data-window-key` on
+// the pane drives the two selection rule sets in the scoped CSS above.
+// ---------------------------------------------------------------------------
+
+function trackKeyWindow() {
+  // Driven by real focus/blur events only — never by an initial
+  // `document.hasFocus()` reading. A freshly loaded page, a background tab
+  // that has not been clicked yet, and an embedded webview that does not
+  // report focus at all all answer `false`, which would open the sidebar in
+  // the dimmed non-key state and leave it there. Starting from the key state
+  // and reacting to an actual blur keeps the default correct everywhere and
+  // still dims exactly when AppKit would.
+  window.addEventListener('focus', () => pane.setAttribute('data-window-key', 'true'))
+  window.addEventListener('blur', () => pane.setAttribute('data-window-key', 'false'))
+}
+
+function followSystemAppearance() {
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  function sync() {
+    if (document.documentElement.dataset.theme) return
+    document.documentElement.classList.toggle('dark', media.matches)
+  }
+  sync()
+  media.addEventListener('change', sync)
+}
+
+onMount(() => {
+  pane = document.getElementById(sidebarUidProp)
+  if (!pane) return
+
+  followSystemAppearance()
+  trackKeyWindow()
+
+  if (persistKeyProp) {
+    try {
+      const saved = window.localStorage?.getItem(persistKeyProp)
+      if (saved === 'true' || saved === 'false') collapsed.set(saved === 'true')
+    } catch {}
+  }
+  applyCollapseEffects(collapsed())
+
+  pane.addEventListener('click', onClick)
+  pane.addEventListener('keydown', onKeyDown)
+
+  const scrollArea = pane.querySelector('[data-sidebar-scroll]')
+  const thumb = pane.querySelector('[data-sidebar-scroll-thumb]')
+  if (scrollArea && thumb) attachOverlayScrollbar(scrollArea, thumb)
+
+  // Ensure the initial active row carries the theme's highlight classes.
+  const active = pane.querySelector('[data-sidebar-item][data-active="true"]')
+  if (active) active.classList.add(...activeClassList())
+  syncRowVisibility()
+})
+
+defineExpose({ collapsed, toggle: toggleCollapse })
+</script>
+
+<aside
+  id="{{ sidebarUid }}"
+  data-stx-sidebar
+  data-sidebar-theme="{{ theme }}"
+  data-sidebar-selection="{{ selectionModel }}"
+  @if(isFrosted)data-sidebar-frosted@endif
+  data-window-key="true"
+  data-active-class="{{ activeClasses }}"
+  class="{{ paneClasses }}"
+  :style="`width: ${sidebarWidth()}`"
+  :aria-hidden="String(collapsed() && collapseModeProp === 'hidden')"
+  role="navigation"
+  aria-label="Sidebar"
+  tabindex="0"
+>
+  @if(tintClasses)
+    <div class="absolute inset-0 pointer-events-none {{ tintClasses }}"></div>
+  @endif
+  @if(hasShimmerRim)
+    <div class="stx-sidebar-rim" aria-hidden="true"></div>
+  @endif
+
+  @if($slots.header)
+    <div class="relative z-10 flex-shrink-0">
+      <slot name="header" />
+    </div>
+  @endif
+
+  <div class="relative z-10 min-h-0 flex-1">
+    <div data-sidebar-scroll class="{{ scrollAreaClasses }} h-full stx-sidebar-scroll">
+      @if(sectionList.length > 0)
+        <nav class="flex flex-col">
+          @foreach(sectionList as section)
+            <SidebarSection
+              :id="section.id"
+              :label="section.label"
+              :items="section.items"
+              :collapsible="section.collapsible"
+              :collapsed="section.collapsed"
+              :theme="theme"
+            />
+          @endforeach
+        </nav>
+      @else
+        <slot />
+      @endif
+    </div>
+    <div data-sidebar-scroll-thumb class="stx-sidebar-scroll-thumb" aria-hidden="true"></div>
+  </div>
+
+  @if($slots.footer)
+    <div class="relative z-10 flex-shrink-0">
+      <slot name="footer" />
+    </div>
+  @endif
+</aside>
+
+<style scoped>
+[data-stx-sidebar] {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  outline: none;
+}
+
+/* Liquid Glass edge highlight: a hairline rim that catches light along the
+   pane's edges, with a slow sheen drifting across it. */
+.stx-sidebar-rim {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 5;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.50),
+    inset 1px 0 0 rgba(255, 255, 255, 0.26),
+    inset -1px 0 0 rgba(255, 255, 255, 0.10),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.14);
+}
+.stx-sidebar-rim::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: linear-gradient(
+    115deg,
+    rgba(255, 255, 255, 0.85) 0%,
+    rgba(255, 255, 255, 0.00) 28%,
+    rgba(255, 255, 255, 0.18) 52%,
+    rgba(255, 255, 255, 0.00) 74%,
+    rgba(255, 255, 255, 0.65) 100%
+  );
+  background-size: 250% 250%;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: stx-sidebar-shimmer 10s ease-in-out infinite alternate;
+}
+@keyframes stx-sidebar-shimmer {
+  from { background-position: 0% 0%; }
+  to { background-position: 100% 100%; }
+}
+@media (prefers-color-scheme: dark) {
+  .stx-sidebar-rim {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.18),
+      inset 1px 0 0 rgba(255, 255, 255, 0.10),
+      inset -1px 0 0 rgba(255, 255, 255, 0.05),
+      inset 0 -1px 0 rgba(255, 255, 255, 0.06);
+  }
+  .stx-sidebar-rim::after { opacity: 0.35; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .stx-sidebar-rim::after { animation: none; }
+}
+
+/* Frosted sidebar material. Hand-written CSS on purpose: as the utilities
+   `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the arbitrary values
+   did not survive class extraction in the stx dev server, leaving the pane
+   with `backdrop-filter: none`; an earlier `backdrop-saturate-[1.7]` lost
+   its brackets on the way to the generator, was read as a percentage, and
+   compiled to `saturate(0.017)`, which drained the colour out of the whole
+   backdrop. In a Craft window with webSidebarMaterial the native
+   NSVisualEffectView supplies the real vibrancy; this approximates it
+   everywhere else. */
+[data-sidebar-frosted] {
+  -webkit-backdrop-filter: saturate(180%) blur(50px);
+  backdrop-filter: saturate(180%) blur(50px);
+}
+
+/* ---------------------------------------------------------------------------
+ * Selection, `accent` model (macOS and its derivatives).
+ *
+ * AppKit paints a source-list selection in two states. In a key window the
+ * row takes the system accent and its label, icon, count and disclosure
+ * chevron all turn white; the label also goes semibold. When the window
+ * resigns key the fill drops to a neutral gray and the label stays dark.
+ * Measured from Mail.app: key fill is the accent, non-key fill sits about
+ * 5.5% black over the pane, and the icons desaturate to secondary gray.
+ *
+ * These are attribute rules rather than utility classes because the row's
+ * children have to recolor together, and because the controller toggles
+ * `data-active` on the client — CSS keyed on the attribute keeps the
+ * previously selected row's own icon tint intact when selection moves.
+ * ------------------------------------------------------------------------- */
+[data-sidebar-selection="accent"] {
+  --stx-sidebar-accent: #007aff;
+  --stx-sidebar-selection-idle: rgba(0, 0, 0, 0.055);
+  --stx-sidebar-on-selection: #fff;
+  --stx-sidebar-icon-idle: #8e8e93;
+}
+@media (prefers-color-scheme: dark) {
+  [data-sidebar-selection="accent"] {
+    --stx-sidebar-accent: #0a84ff;
+    --stx-sidebar-selection-idle: rgba(255, 255, 255, 0.11);
+    --stx-sidebar-icon-idle: #98989d;
+  }
+}
+
+/* Per-item tint, published by SidebarItem as a custom property. */
+[data-sidebar-selection="accent"] [data-sidebar-icon] {
+  color: var(--stx-sidebar-icon, currentColor);
+}
+
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] {
+  background: var(--stx-sidebar-accent);
+  color: var(--stx-sidebar-on-selection);
+  font-weight: 590;
+}
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-icon],
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-count],
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-chevron] {
+  color: var(--stx-sidebar-on-selection);
+}
+/* Hover must not lighten the selected row out from under the accent. */
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"]:hover {
+  background: var(--stx-sidebar-accent);
+}
+
+/* Window resigned key: neutral fill, label stays dark, icons desaturate. */
+[data-sidebar-selection="accent"][data-window-key="false"] [data-sidebar-item][data-active="true"] {
+  background: var(--stx-sidebar-selection-idle);
+  font-weight: 590;
+}
+[data-sidebar-selection="accent"][data-window-key="false"] [data-sidebar-icon] {
+  color: var(--stx-sidebar-icon-idle);
+}
+
+/* Rows collapse like AppKit outlines: fixed row height animates to zero.
+   The 32px pitch is the row itself — AppKit leaves no gap, so a run of
+   selected or hovered rows reads as one continuous block. */
+[data-sidebar-row] {
+  height: 32px;
+  transition: height 0.22s ease, opacity 0.16s ease;
+}
+[data-sidebar-row][data-collapsed] {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Disclosure chevron rotates from ▸ to ▾ */
+[data-sidebar-row][data-expanded="true"] [data-sidebar-disclosure] > * {
+  transform: rotate(90deg);
+}
+[data-sidebar-section][data-expanded="false"] [data-sidebar-section-chevron] {
+  transform: rotate(-90deg);
+}
+
+/* Native scrollbar hidden; the floating thumb below takes its place. */
+.stx-sidebar-scroll {
+  scrollbar-width: none;
+}
+.stx-sidebar-scroll::-webkit-scrollbar {
+  display: none;
+}
+.stx-sidebar-scroll-thumb {
+  position: absolute;
+  top: 0;
+  right: 3px;
+  width: 7px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 20;
+}
+@media (prefers-color-scheme: dark) {
+  .stx-sidebar-scroll-thumb { background: rgba(255, 255, 255, 0.35); }
+}
+</style>

package/src/ui/sidebar/SidebarFooter.stx

@@ -0,0 +1,71 @@
+<script server>
+// The bottom strip of a macOS sidebar — e.g. the account row in Music
+// ("Chris Breuer" with an avatar) or custom actions.
+export const theme = $props.theme || $props.variant || 'macos'
+export const avatar = $props.avatar || ''
+export const name = $props.name || ''
+export const detail = $props.detail || ''
+export const actions = $props.actions || [] // [{ id, icon, label }]
+
+export const isMacos = theme === 'macos' || theme === 'tahoe' || theme === 'macos-tahoe' || theme === 'macos-latest'
+
+export const profileClasses = [
+  'flex w-full items-center gap-[8px]',
+  'h-[44px] rounded-[10px] px-[6px]',
+  'text-[13px] font-medium text-black dark:text-white',
+  'transition-colors duration-150',
+  'hover:bg-black/4 active:bg-black/8',
+  'dark:hover:bg-white/6 dark:active:bg-white/12',
+].join(' ')
+
+export const actionClasses = [
+  'grid h-[28px] w-[28px] place-items-center rounded-[7px]',
+  'text-[#3c3c43]/70 dark:text-[#ebebf5]/70',
+  'transition-colors duration-150',
+  'hover:bg-black/5 dark:hover:bg-white/10',
+].join(' ')
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onProfileClick() {
+  emit('profileClick')
+}
+
+function onAction(event) {
+  emit('action', event.target.closest('[data-sidebar-action]')?.dataset.sidebarAction)
+}
+</script>
+
+@if(isMacos)
+  <div class="shrink-0 px-[10px] pb-[8px] pt-[4px]">
+    @if(name)
+      <button type="button" class="{{ profileClasses }}" @click="onProfileClick()">
+        @if(avatar)
+          <img src="{{ avatar }}" alt="" class="h-[30px] w-[30px] rounded-full object-cover shadow-sm" />
+        @else
+          <span class="grid h-[30px] w-[30px] place-items-center rounded-full bg-black/10 text-[13px] font-semibold dark:bg-white/15">{{ name.charAt(0) }}</span>
+        @endif
+        <span class="min-w-0 flex-1 truncate text-left">{{ name }}</span>
+        @if(detail)
+          <span class="shrink-0 text-[12px] text-[#3c3c43]/60 dark:text-[#ebebf5]/60">{{ detail }}</span>
+        @endif
+      </button>
+    @endif
+    @if(actions.length > 0)
+      <div class="flex items-center gap-[4px] pt-[4px]">
+        @foreach(actions as action)
+          <button type="button" class="{{ actionClasses }}" aria-label="{{ action.label }}" data-sidebar-action="{{ action.id }}" @click="onAction($event)">
+            <span class="{{ action.icon }} h-[16px] w-[16px]" aria-hidden="true"></span>
+          </button>
+        @endforeach
+      </div>
+    @endif
+    <slot />
+  </div>
+@else
+  <div class="shrink-0 border-t border-black/5 p-3 dark:border-white/10">
+    <slot />
+  </div>
+@endif