@stacksjs/components 0.2.27 → 0.2.53

package/src/ui/sidebar/Sidebar.stx

@@ -1,219 +1,189 @@
 <script server>
-/**
- * Sidebar Component - macOS Native Style
- *
- * A native-feeling sidebar component that integrates with Craft for true native rendering
- * when running in a Craft desktop environment, with beautiful macOS Tahoe-style fallback
- * for web environments.
- *
- * @example
- * <Sidebar
- *   :sections="sections"
- *   :collapsed="false"
- *   :width="240"
- *   variant="tahoe"
- * >
- *   <template #header>
- *     <SidebarHeader title="My App" />
- *   </template>
- *   <template #footer>
- *     <SidebarFooter />
- *   </template>
- * </Sidebar>
- */
-
-// Props
 export const sections = $props.sections || []
 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 variant = $props.variant || 'tahoe' // 'tahoe' | 'vibrancy' | 'solid' | 'transparent'
-export const position = $props.position || 'left' // 'left' | 'right'
+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 className = $props.className || ''
-export const onCollapse = $props.onCollapse
-export const onSectionToggle = $props.onSectionToggle
-export const onItemClick = $props.onItemClick
-
-// Internal state
-let isHovered = false
-let nativeSidebarId = null
-
-// Check if running in Craft environment with native sidebar enabled
-// When Craft uses --native-sidebar, it sets these flags and we should NOT render the web sidebar
-const hasNativeSidebar = typeof window !== 'undefined' && (
-  window.__craftNativeSidebar === true ||
-  window.craft?.hasNativeSidebar?.() ||
-  (window.webkit?.messageHandlers?.craft && document.body?.dataset?.nativeSidebar === 'true')
-)
-
-// Check if running in Craft environment (may not have native sidebar)
-const isCraft = typeof window !== 'undefined' && window.craft?.isCraft?.()
 
-// Variant styles - macOS Tahoe inspired
-// Native macOS sidebars use vibrancy where desktop background shines through
 const variantStyles = {
   tahoe: {
-    // Translucent with warm tint overlay - desktop shows through
     bg: 'bg-white/70 dark:bg-black/50',
     border: 'border-black/5 dark:border-white/10',
     backdrop: 'backdrop-blur-2xl backdrop-saturate-180',
-    // Warm tint is applied via pseudo-element in template
-    tint: true
+    tint: true,
   },
   vibrancy: {
     bg: 'bg-white/50 dark:bg-black/40',
     border: 'border-white/20 dark:border-white/10',
     backdrop: 'backdrop-blur-3xl backdrop-saturate-200',
-    tint: false
+    tint: false,
   },
   solid: {
     bg: 'bg-stone-100 dark:bg-neutral-900',
     border: 'border-stone-200 dark:border-neutral-800',
     backdrop: '',
-    tint: false
+    tint: false,
   },
   transparent: {
     bg: 'bg-transparent',
     border: 'border-transparent',
     backdrop: '',
-    tint: false
-  }
+    tint: false,
+  },
+  workspace: {
+    bg: 'bg-[#f4f4f3] dark:bg-neutral-950',
+    border: 'border-transparent',
+    backdrop: '',
+    tint: false,
+    nav: 'px-5 py-5 space-y-1',
+    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',
+    tint: false,
+    shimmer: true,
+    nav: 'px-4 py-4 space-y-1',
+    slot: 'px-4 py-4',
+  },
 }
 
-// Get current variant style
-function getVariantStyle() {
-  return variantStyles[variant] || variantStyles.tahoe
+const style = variantStyles[variant] || variantStyles.tahoe
+export const variantTint = style.tint
+export const variantShimmer = style.shimmer
+const borderSide = position === 'left' ? 'border-r' : 'border-l'
+const borderClasses = bordered ? `${borderSide} ${style.border}` : ''
+const positionClass = position === 'left' ? 'left-0' : 'right-0'
+const placementClasses = {
+  fixed: `fixed inset-y-0 z-50 ${positionClass}`,
+  sticky: 'sticky top-0 h-screen',
+  static: 'relative h-full',
 }
 
-// Calculate sidebar width
-function getSidebarWidth() {
-  if (collapsed && !isHovered) {
-    return `${minWidth}px`
-  }
-  return `${width}px`
-}
+export const containerClasses = [
+  placementClasses[placement] || placementClasses.fixed,
+  'flex flex-col',
+  'transition-all duration-300 ease-out',
+  'overflow-hidden',
+  style.bg,
+  style.backdrop,
+  borderClasses,
+  className,
+].filter(Boolean).join(' ')
 
-// Check if showing expanded content
-function showExpanded() {
-  return !collapsed || isHovered
-}
+export const collapseBtnPosition = 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>
 
-// Initialize Craft native sidebar if available
-async function initNativeSidebar() {
-  if (isCraft && window.craft?.components?.createSidebar) {
-    try {
-      const config = {
-        position,
-        width,
-        minWidth,
-        collapsible,
-        sections: sections.map(section => ({
-          id: section.id,
-          label: section.label,
-          items: section.items?.map(item => ({
-            id: item.id,
-            label: item.label,
-            icon: item.icon,
-            href: item.href,
-            badge: item.badge
-          }))
-        }))
-      }
-      nativeSidebarId = await window.craft.components.createSidebar(config)
-    } catch (err) {
-      console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
-    }
-  }
-}
+<script client>
+const emit = defineEmits()
+const collapsedProp = {{ collapsed }}
+const collapsibleProp = {{ collapsible }}
+const widthProp = {{ width }}
+const minWidthProp = {{ minWidth }}
+const sectionsProp = {{ sections }}
+const positionProp = {{ position }}
+const variantProp = {{ variant }}
 
-// Handle collapse toggle
-function handleCollapseToggle() {
-  if (onCollapse) {
-    onCollapse(!collapsed)
-  }
-}
+const collapsed = state(collapsedProp)
+const isHovered = state(false)
+const hasNativeSidebar = state(false)
 
-// Handle mouse enter/leave for hover expand
-function handleMouseEnter() {
-  if (collapsed && collapsible) {
-    isHovered = true
-  }
-}
+const showExpanded = derived(() => !collapsed() || isHovered())
+const sidebarWidth = derived(() => {
+  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 handleMouseLeave() {
-  isHovered = false
+function onMouseEnter() {
+  if (collapsed() && collapsibleProp) isHovered.set(true)
 }
 
-// Handle section toggle
-function handleSectionToggle(sectionId) {
-  if (onSectionToggle) {
-    onSectionToggle(sectionId)
-  }
+function onMouseLeave() {
+  isHovered.set(false)
 }
 
-// Handle item click
-function handleItemClick(item, event) {
-  if (onItemClick) {
-    onItemClick(item, event)
-  }
+function toggleCollapse() {
+  collapsed.set(!collapsed())
+  emit('collapse', collapsed())
 }
 
-// Build container classes
-const style = getVariantStyle()
+function onSectionToggle(sectionId) {
+  emit('sectionToggle', sectionId)
+}
 
-// Build border classes properly for Tailwind
-function getBorderClasses() {
-  if (!bordered) return ''
-  const borderSide = position === 'left' ? 'border-r' : 'border-l'
-  return `${borderSide} ${style.border}`
+function onItemClick(event) {
+  emit('itemClick', event.detail)
 }
 
-const containerClasses = [
-  'fixed inset-y-0 z-50 flex flex-col',
-  'transition-all duration-300 ease-out',
-  'overflow-hidden', // Contain the tint overlay
-  style.bg,
-  style.backdrop,
-  getBorderClasses(),
-  position === 'left' ? 'left-0' : 'right-0',
-  className
-].filter(Boolean).join(' ')
+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) {
+    try {
+      await window.craft.components.createSidebar({
+        position: positionProp,
+        width: widthProp,
+        minWidth: minWidthProp,
+        collapsible: collapsibleProp,
+        variant: variantProp,
+        material: variantProp === 'desktop' ? 'sidebar' : undefined,
+        backgroundEffect: variantProp === 'desktop' ? 'shimmer' : undefined,
+        allowsVibrancy: variantProp === 'desktop' || variantProp === 'vibrancy' || variantProp === 'tahoe',
+        sections: sectionsProp.map(s => ({
+          id: s.id,
+          label: s.label,
+          items: s.items?.map(i => ({ id: i.id, label: i.label, icon: i.icon, href: i.href, badge: i.badge })),
+        })),
+      })
+    }
+    catch (err) {
+      console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
+    }
+  }
+})
 
-// Initialize native sidebar on mount
-if (typeof window !== 'undefined') {
-  initNativeSidebar()
-}
+defineExpose({ collapsed, toggle: toggleCollapse })
 </script>
 
-<!-- Only render web sidebar when NOT running in Craft native sidebar mode -->
-@if(!hasNativeSidebar)
 <aside
+  :show="!hasNativeSidebar()"
   class="{{ containerClasses }} sidebar-container"
-  style="width: {{ getSidebarWidth() }}"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
+  :style="`width: ${sidebarWidth()}`"
+  @mouseenter="onMouseEnter()"
+  @mouseleave="onMouseLeave()"
   role="navigation"
   aria-label="Sidebar navigation"
 >
-  <!-- Warm tint overlay for macOS Tahoe effect - desktop shows through -->
-  @if(style.tint)
+  @if(variantTint)
     <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>
+  @endif
 
-  <!-- Header slot -->
   @if($slots.header)
     <div class="flex-shrink-0 relative z-10">
       <slot name="header" />
     </div>
   @endif
 
-  <!-- Main content area with sections -->
   <div class="flex-1 overflow-y-auto overflow-x-hidden relative z-10">
     @if(sections.length > 0)
-      <nav class="px-3 py-2 space-y-1">
-        @foreach(sections as section)
+      <nav class="{{ navClasses }}">
+        @foreach(section in sections)
           <SidebarSection
             :id="section.id"
             :label="section.label"
@@ -222,67 +192,45 @@ if (typeof window !== 'undefined') {
             :expanded="section.expanded !== false"
             :collapsible="section.collapsible !== false"
             :showLabel="showExpanded()"
-            @toggle="handleSectionToggle(section.id)"
-            @itemClick="handleItemClick"
+            :variant="variant"
+            @toggle="onSectionToggle(section.id)"
+            @itemClick="onItemClick($event)"
           />
         @endforeach
       </nav>
     @else
-      <!-- Default slot for custom content -->
-      <div class="px-3 py-2">
+      <div class="{{ slotClasses }}">
         <slot />
       </div>
     @endif
   </div>
 
-  <!-- Footer slot -->
   @if($slots.footer)
     <div class="flex-shrink-0 relative z-10">
       <slot name="footer" />
     </div>
   @endif
 
-  <!-- Collapse toggle button -->
-  @if(collapsible && showExpanded())
+  @if(collapsible)
     <button
+      :show="showExpanded()"
       type="button"
-      class="absolute top-4 {{ position === 'left' ? 'right-2' : 'left-2' }} 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="handleCollapseToggle"
-      aria-label="{{ collapsed ? 'Expand sidebar' : 'Collapse sidebar' }}"
+      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()"
     >
-      <div class="{{ collapsed ? 'i-hugeicons-sidebar-right' : 'i-hugeicons-sidebar-left' }} w-5 h-5"></div>
+      <div :class="`${collapseIconClass()} w-5 h-5`"></div>
     </button>
   @endif
 </aside>
-@endif
 
 <style scoped>
-/* Smooth scrollbar styling for macOS feel */
-.overflow-y-auto::-webkit-scrollbar {
-  width: 6px;
-}
-
-.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);
-}
-
-/* Dark mode scrollbar */
+.overflow-y-auto::-webkit-scrollbar { width: 6px; }
+.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); }
 @media (prefers-color-scheme: dark) {
-  .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);
-  }
+  .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); }
 }
 </style>

package/src/ui/sidebar/SidebarFooter.stx

@@ -1,40 +1,54 @@
 <script server>
-/**
- * SidebarFooter Component
- *
- * A footer component for the sidebar with quick actions and settings.
- *
- * @example
- * <SidebarFooter
- *   :showSettings="true"
- *   :showThemeToggle="true"
- *   settingsHref="/settings"
- * />
- */
-
-// Props
 export const showSettings = $props.showSettings ?? true
 export const showThemeToggle = $props.showThemeToggle ?? true
 export const settingsHref = $props.settingsHref || '/settings'
 export const settingsLabel = $props.settingsLabel || 'Settings'
 export const collapsed = $props.collapsed ?? false
-export const onThemeToggle = $props.onThemeToggle
-
-// Quick action items
 export const actions = $props.actions || []
+export const variant = $props.variant || 'tahoe'
+
+const footerVariants = {
+  workspace: {
+    container: 'p-5 space-y-2',
+    action: 'flex-1 flex items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] text-zinc-700 transition-colors hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: 'w-5 h-5 text-zinc-500 dark:text-zinc-400',
+  },
+  desktop: {
+    container: 'p-4 space-y-2',
+    action: 'flex-1 flex items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] text-zinc-700 transition-colors hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: 'w-5 h-5 text-zinc-500 dark:text-zinc-400',
+  },
+  default: {
+    container: 'border-t border-black/5 dark:border-white/10 p-3 space-y-2',
+    action: 'flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10 transition-colors',
+    icon: 'w-4 h-4',
+  },
+}
+
+const footerStyle = footerVariants[variant] || footerVariants.default
+export const footerClasses = footerStyle.container
+export const actionClasses = footerStyle.action
+export const footerIconClasses = footerStyle.icon
+export const settingsIconClasses = `i-hugeicons-settings-02 ${footerStyle.icon}`
+export const themeButtonClasses = variant === 'workspace' || variant === 'desktop'
+  ? 'p-3 rounded-[16px] text-zinc-500 hover:text-zinc-900 hover:bg-white/50 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-white/10 transition-colors'
+  : 'p-2 rounded-lg text-black/50 hover:text-black/80 hover:bg-black/5 dark:text-white/50 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors'
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onThemeToggle() {
+  document.documentElement.classList.toggle('dark')
+  emit('themeToggle')
+}
 
-// Handle theme toggle
-function handleThemeToggle() {
-  if (onThemeToggle) {
-    onThemeToggle()
-  } else {
-    // Default theme toggle behavior
-    document.documentElement.classList.toggle('dark')
-  }
+function onActionClick(index) {
+  emit('actionClick', index)
 }
 </script>
 
-<div class="border-t border-black/5 dark:border-white/10 p-3 space-y-2">
+<div class="{{ footerClasses }}">
   <!-- Custom actions slot -->
   <slot />
 
@@ -45,21 +59,21 @@ function handleThemeToggle() {
         @if(action.href)
           <a
             href="{{ action.href }}"
-            class="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+            class="{{ actionClasses }}"
           >
             @if(action.icon)
-              <div class="{{ action.icon }} w-4 h-4"></div>
+              <div class="{{ action.icon }} {{ footerIconClasses }}"></div>
             @endif
             <span>{{ action.label }}</span>
           </a>
         @else
           <button
             type="button"
-            class="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
-            @click="action.onClick"
+            class="{{ actionClasses }}"
+            @click="onActionClick({{ $loop.index }})"
           >
             @if(action.icon)
-              <div class="{{ action.icon }} w-4 h-4"></div>
+              <div class="{{ action.icon }} {{ footerIconClasses }}"></div>
             @endif
             <span>{{ action.label }}</span>
           </button>
@@ -69,8 +83,8 @@ function handleThemeToggle() {
       @if(showThemeToggle)
         <button
           type="button"
-          class="p-2 rounded-lg text-black/50 hover:text-black/80 hover:bg-black/5 dark:text-white/50 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors"
-          @click="handleThemeToggle"
+          class="{{ themeButtonClasses }}"
+          @click="onThemeToggle()"
           aria-label="Toggle dark mode"
         >
           <div class="i-hugeicons-moon-02 w-4 h-4 dark:hidden"></div>
@@ -84,9 +98,9 @@ function handleThemeToggle() {
   @if(showSettings)
     <a
       href="{{ settingsHref }}"
-      class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors duration-150 text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10"
+      class="{{ actionClasses }}"
     >
-      <div class="i-hugeicons-settings-02 w-5 h-5 text-black/50 dark:text-white/50"></div>
+      <div class="{{ settingsIconClasses }}"></div>
       @if(!collapsed)
         <span>{{ settingsLabel }}</span>
       @endif