@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/sidebar/Sidebar.stx

@@ -1,476 +0,0 @@
-<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 hasShimmerRim = themeStyle.layers.shimmerRim === 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).
-// ---------------------------------------------------------------------------
-
-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()
-
-  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-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; }
-}
-
-/* Rows collapse like AppKit outlines: fixed row height animates to zero. */
-[data-sidebar-row] {
-  height: 32px; /* 30px row + 2px gap */
-  padding-bottom: 2px;
-  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

@@ -1,71 +0,0 @@
-<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

package/src/ui/sidebar/SidebarHeader.stx

@@ -1,103 +0,0 @@
-<script server>
-// The window-chrome strip at the top of a macOS sidebar: traffic lights on
-// the left, floating "Liquid Glass" toolbar buttons on the right, and the
-// whole strip acts as a window drag region inside a Craft window.
-export const theme = $props.theme || $props.variant || 'macos'
-export const showWindowControls = $props.showWindowControls ?? true
-export const actions = $props.actions || [] // [{ id, icon, label }]
-export const title = $props.title || ''
-export const subtitle = $props.subtitle || ''
-export const logo = $props.logo || ''
-export const showSearch = $props.showSearch ?? false
-export const searchPlaceholder = $props.searchPlaceholder || 'Search'
-
-export const isMacos = theme === 'macos' || theme === 'tahoe' || theme === 'macos-tahoe' || theme === 'macos-latest'
-
-// Traffic lights: 13px circles, 7px apart, inset ~21px — measured on
-// macOS Tahoe. Colors are Apple's exact stoplight values.
-export const trafficLightClasses = 'h-[13px] w-[13px] rounded-full shadow-[inset_0_0_1px_rgba(0,0,0,0.2)]'
-
-// Floating toolbar button: a 34px glass circle that brightens on hover.
-export const toolbarButtonClasses = [
-  'grid h-[34px] w-[34px] place-items-center rounded-full',
-  'bg-white/55 dark:bg-white/10',
-  'backdrop-blur-xl',
-  'shadow-[0_1px_4px_rgba(0,0,0,0.12),inset_0_0.5px_0_rgba(255,255,255,0.6)]',
-  'text-[#3c3c43]/75 dark:text-[#ebebf5]/75',
-  'transition-colors duration-150',
-  'hover:bg-white/80 dark:hover:bg-white/20',
-  'active:bg-white/95 dark:active:bg-white/25',
-].join(' ')
-</script>
-
-<script client>
-const emit = defineEmits()
-
-function onAction(event) {
-  emit('action', event.currentTarget?.dataset?.sidebarAction || event.target.closest('[data-sidebar-action]')?.dataset.sidebarAction)
-}
-
-function onSearchInput(event) {
-  emit('search', event.target.value)
-}
-
-function onWindowControl(action) {
-  const api = window.craft?.window
-  if (action === 'close') api?.close?.()
-  if (action === 'minimize') api?.minimize?.()
-  if (action === 'zoom') (api?.maximize || api?.zoom)?.call(api)
-  emit('windowControl', action)
-}
-</script>
-
-@if(isMacos)
-  <div class="flex h-[52px] shrink-0 items-center justify-between pl-[21px] pr-[10px] [-webkit-app-region:drag]">
-    @if(showWindowControls)
-      <div class="group/lights flex items-center gap-[7px] [-webkit-app-region:no-drag]">
-        <button type="button" class="{{ trafficLightClasses }} bg-[#ff5f57]" aria-label="Close window" @click="onWindowControl('close')"></button>
-        <button type="button" class="{{ trafficLightClasses }} bg-[#febc2e]" aria-label="Minimize window" @click="onWindowControl('minimize')"></button>
-        <button type="button" class="{{ trafficLightClasses }} bg-[#28c840]" aria-label="Zoom window" @click="onWindowControl('zoom')"></button>
-      </div>
-    @else
-      <span></span>
-    @endif
-
-    <div class="flex items-center gap-[8px] [-webkit-app-region:no-drag]">
-      @foreach(actions as action)
-        <button type="button" class="{{ toolbarButtonClasses }}" 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
-      <slot name="actions" />
-    </div>
-  </div>
-
-  @if(showSearch)
-    <div class="shrink-0 px-[10px] pb-[6px]">
-      <div class="relative">
-        <span class="i-f7-search absolute left-[8px] top-1/2 h-[13px] w-[13px] -translate-y-1/2 text-[#3c3c43]/50 dark:text-[#ebebf5]/50" aria-hidden="true"></span>
-        <input
-          type="text"
-          placeholder="{{ searchPlaceholder }}"
-          class="h-[28px] w-full rounded-[8px] border-0 bg-black/5 pl-[26px] pr-[8px] text-[13px] text-black placeholder:text-[#3c3c43]/50 focus:outline-none focus:ring-2 focus:ring-[#0088ff]/60 dark:bg-white/10 dark:text-white dark:placeholder:text-[#ebebf5]/50"
-          @input="onSearchInput($event)"
-        />
-      </div>
-    </div>
-  @endif
-@else
-  <div class="flex h-13 items-center gap-3 border-b border-black/5 px-4 dark:border-white/10">
-    @if(logo)
-      <img src="{{ logo }}" alt="{{ title }}" class="h-8 w-8 rounded-lg object-cover" />
-    @endif
-    <div class="min-w-0">
-      @if(title)
-        <div class="truncate text-sm font-semibold text-black/90 dark:text-white">{{ title }}</div>
-      @endif
-      @if(subtitle)
-        <div class="truncate text-xs text-black/50 dark:text-white/50">{{ subtitle }}</div>
-      @endif
-    </div>
-    <slot name="actions" />
-  </div>
-@endif