@mks2508/sidebar-headless 0.3.1 → 0.4.0

package/dist/MobileOptimizations.css

@@ -0,0 +1,570 @@
+/**
+ * Mobile Optimizations CSS
+ *
+ * This file contains CSS optimizations for mobile devices,
+ * specifically targeting iOS Safari and Android Chrome.
+ * Updated for 2025 with modern viewport units and safe area handling.
+ *
+ * CRITICAL: iOS 26 Safari has major bugs with fixed/sticky positioning.
+ * This file includes workarounds for these issues.
+ *
+ * Known iOS 26 Issues (as of December 2025):
+ * - Fixed elements shift when address bar shrinks/expands
+ * - visualViewport.offsetTop doesn't reset after keyboard dismissal
+ * - 100dvh creates gaps at bottom for overlays
+ * - position: fixed breaks after keyboard interaction
+ *
+ * @fileoverview Mobile-first CSS optimizations for bottom navigation
+ * @author v0
+ * @version 2.0.0 - iOS 26 compatibility update
+ */
+
+/* ============================================
+   CSS Custom Properties for Mobile Navigation
+   ============================================ */
+
+:root {
+  /* Navigation dimensions */
+  --mobile-nav-height: 4.5rem; /* 72px - optimal touch target */
+  --mobile-nav-padding-x: 1rem;
+  --mobile-nav-padding-y: 0.5rem;
+  --mobile-nav-gap: 0.25rem;
+
+  /* Safe area handling for notched devices */
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+
+  /* Touch target sizes (WCAG 2.2 Level AAA) */
+  --touch-target-min: 44px;
+  --touch-target-optimal: 48px;
+
+  /* Glassmorphism properties */
+  --glass-blur: 20px;
+  --glass-saturation: 180%;
+  --glass-bg-light: rgba(255, 255, 255, 0.72);
+  --glass-bg-dark: rgba(17, 17, 17, 0.72);
+  --glass-border-light: rgba(255, 255, 255, 0.18);
+  --glass-border-dark: rgba(255, 255, 255, 0.08);
+
+  /* Animation timing */
+  --nav-transition-duration: 200ms;
+  --nav-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* iOS 26 Safari workaround: extra padding for floating bar */
+  --ios26-bottom-offset: 0px;
+}
+
+/* ============================================
+   iOS 26 Safari Critical Workarounds
+   ============================================
+   
+   iOS 26 has major bugs with position: fixed elements:
+   1. Elements shift when scrolling and address bar changes
+   2. After keyboard dismissal, visualViewport doesn't reset
+   3. 100dvh doesn't cover full screen in some cases
+   
+   The workaround from Apple's own website:
+   - Use a wrapper with fixed positioning
+   - Apply 100vh to inner content
+   - This creates proper stacking under the floating URL bar
+*/
+
+/* Detect iOS Safari using feature queries */
+@supports (-webkit-touch-callout: none) {
+  /* 
+   * iOS 26 Safari Fix:
+   * Move scroll from window to body to prevent fixed element drift.
+   * This is the most reliable workaround as of iOS 26.1
+   */
+  html.ios-safari-fix {
+    height: 100%;
+    height: 100dvh;
+    overflow: hidden;
+  }
+
+  html.ios-safari-fix body {
+    height: 100%;
+    height: 100dvh;
+    overflow: auto;
+    overscroll-behavior: contain;
+    /* Prevent momentum scroll affecting fixed elements */
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* ============================================
+   Modern Viewport Units Support
+   ============================================ */
+
+/**
+ * Dynamic Viewport Height (dvh) - Adjusts as browser UI appears/disappears
+ * Small Viewport Height (svh) - Minimum viewport when browser UI is visible
+ * Large Viewport Height (lvh) - Maximum viewport when browser UI is hidden
+ *
+ * IMPORTANT for iOS 26:
+ * - dvh has inconsistent behavior after keyboard dismissal
+ * - svh is more reliable for bottom navigation
+ * - Consider using 100% with proper parent height chains
+ */
+
+/* Fallback for older browsers (iOS < 15.4) */
+@supports not (height: 100dvh) {
+  .mobile-nav-container {
+    bottom: 0;
+    /* iOS 11.0-11.2 legacy support */
+    bottom: constant(safe-area-inset-bottom);
+  }
+}
+
+/* Modern browsers with dynamic viewport units */
+@supports (height: 100dvh) {
+  .mobile-nav-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+/* ============================================
+   Base Mobile Navigation Styles
+   ============================================ */
+
+.mobile-nav-root {
+  /* Positioning - using fixed with iOS 26 considerations */
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+
+  /* Safe area padding for notched devices */
+  padding-bottom: var(--safe-area-bottom);
+  padding-left: var(--safe-area-left);
+  padding-right: var(--safe-area-right);
+
+  /* 
+   * iOS 26 Fix: Force GPU layer to prevent drift
+   * translateZ(0) creates a new stacking context and compositing layer
+   */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+
+  /* Hardware acceleration hints */
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+
+  /* 
+   * iOS 26 Fix: contain property helps isolate layout
+   * This prevents the element from being affected by parent layout changes
+   */
+  contain: layout style;
+}
+
+/*
+ * Alternative iOS 26 workaround using sticky positioning
+ * Some developers report sticky works better than fixed in iOS 26
+ * Uncomment if fixed positioning continues to have issues
+ */
+.mobile-nav-root--sticky-fallback {
+  position: sticky;
+  bottom: 0;
+  /* Sticky requires a positioned ancestor or viewport */
+}
+
+/* ============================================
+   Glassmorphism Effect
+   ============================================ */
+
+.mobile-nav-glass {
+  /* Glassmorphism background */
+  background: var(--glass-bg-light);
+
+  /* 
+   * Backdrop blur with vendor prefix for Safari
+   * Note: backdrop-filter can cause performance issues on older devices
+   */
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+
+  /* Border for depth perception */
+  border-top: 1px solid var(--glass-border-light);
+
+  /* Text rendering optimization */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Dark mode glassmorphism */
+.dark .mobile-nav-glass,
+[data-theme="dark"] .mobile-nav-glass {
+  background: var(--glass-bg-dark);
+  border-top-color: var(--glass-border-dark);
+}
+
+/* Fallback for browsers without backdrop-filter support */
+@supports not (backdrop-filter: blur(1px)) {
+  .mobile-nav-glass {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  .dark .mobile-nav-glass,
+  [data-theme="dark"] .mobile-nav-glass {
+    background: rgba(17, 17, 17, 0.95);
+  }
+}
+
+/* ============================================
+   Navigation List Styles
+   ============================================ */
+
+.mobile-nav-list {
+  /* Flexbox layout */
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  /* Dimensions */
+  height: var(--mobile-nav-height);
+  width: 100%;
+  max-width: 100%;
+
+  /* Padding */
+  padding: var(--mobile-nav-padding-y) var(--mobile-nav-padding-x);
+
+  /* Reset list styles */
+  list-style: none;
+  margin: 0;
+}
+
+/* ============================================
+   Navigation Item Styles
+   ============================================ */
+
+.mobile-nav-item {
+  /* Flexbox centering */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mobile-nav-gap);
+
+  /* Touch target (minimum 44x44px per WCAG 2.2) */
+  min-width: var(--touch-target-min);
+  min-height: var(--touch-target-min);
+  padding: 0.5rem 0.75rem;
+
+  /* Reset button/anchor styles */
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+
+  /* Typography - 16px minimum to prevent iOS zoom on focus */
+  font-size: 0.75rem; /* 12px for labels */
+  line-height: 1;
+
+  /* Transition */
+  transition: color var(--nav-transition-duration) var(--nav-transition-easing), transform
+    var(--nav-transition-duration) var(--nav-transition-easing);
+
+  /* Prevent text selection on touch */
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* Prevent double-tap zoom */
+  touch-action: manipulation;
+
+  /* Remove tap highlight on mobile */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Active/pressed state */
+.mobile-nav-item:active {
+  transform: scale(0.95);
+}
+
+/* Focus visible for accessibility (keyboard navigation) */
+.mobile-nav-item:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 0.5rem;
+}
+
+/* Icon container */
+.mobile-nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+}
+
+/* Label text */
+.mobile-nav-label {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 4rem;
+}
+
+/* ============================================
+   iOS Safari Specific Fixes (All versions)
+   ============================================ */
+
+@supports (-webkit-touch-callout: none) {
+  .mobile-nav-root {
+    /* Prevent rubber-banding effect on the nav */
+    overscroll-behavior: none;
+
+    /* Ensure proper stacking above Safari's UI */
+    position: fixed;
+    bottom: 0;
+  }
+
+  /* Spacer component to prevent content from going under navigation */
+  .mobile-nav-spacer {
+    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
+    /* Add extra space for iOS 26 floating bar when needed */
+    padding-bottom: var(--ios26-bottom-offset);
+  }
+}
+
+/* ============================================
+   iOS 26+ Specific Workarounds
+   ============================================
+   
+   These are specifically for iOS 26 Safari bugs.
+   The main issues are:
+   1. Fixed elements drift when address bar shrinks
+   2. visualViewport doesn't reset after keyboard
+   3. 100dvh doesn't account for floating tab bar
+*/
+
+/* 
+ * iOS 26 Detection Hack:
+ * iOS 26 introduced the floating tab bar which affects layout.
+ * We use a combination of feature detection and JS-added classes.
+ */
+
+/* When JS detects iOS 26, it adds this class to html */
+html.ios-26-fix .mobile-nav-root {
+  /* 
+   * Apple's workaround: Use a pseudo-element that extends beyond
+   * the visible area to account for the floating bar
+   */
+  position: fixed;
+  bottom: 0;
+}
+
+html.ios-26-fix .mobile-nav-root::after {
+  content: "";
+  position: absolute;
+  bottom: calc(-1 * var(--safe-area-bottom) - 20px);
+  left: 0;
+  right: 0;
+  height: calc(var(--safe-area-bottom) + 20px);
+  background: inherit;
+  -webkit-backdrop-filter: inherit;
+  backdrop-filter: inherit;
+}
+
+/* 
+ * Alternative: Force recalculation on scroll
+ * This class is toggled by JS when scroll events occur
+ */
+.mobile-nav-root--ios26-scroll-fix {
+  /* Trigger repaint */
+  transform: translateZ(0) translateY(0);
+}
+
+/* ============================================
+   Android Chrome Specific Fixes
+   ============================================ */
+
+@supports not (-webkit-touch-callout: none) {
+  .mobile-nav-root {
+    /* Android uses standard fixed positioning well */
+    bottom: 0;
+  }
+
+  /* Android gesture navigation safe area */
+  .mobile-nav-spacer {
+    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
+  }
+}
+
+/* ============================================
+   Keyboard Visibility Handling
+   ============================================
+   
+   iOS 26 Bug: After keyboard dismissal, fixed elements
+   remain offset. This requires JS intervention.
+*/
+
+/* When keyboard is visible, optionally hide nav */
+html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
+  transform: translateY(100%);
+  transition: transform 0.2s ease-out;
+}
+
+/* Force reset after keyboard dismissal (JS adds this class) */
+html.keyboard-dismissed .mobile-nav-root {
+  /* Force layout recalculation */
+  transform: translateZ(0);
+  animation: ios26-reset 0.01s forwards;
+}
+
+@keyframes ios26-reset {
+  from {
+    transform: translateZ(0) translateY(0.01px);
+  }
+  to {
+    transform: translateZ(0) translateY(0);
+  }
+}
+
+/* ============================================
+   Reduced Motion Support
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .mobile-nav-item {
+    transition: none;
+  }
+
+  .mobile-nav-item:active {
+    transform: none;
+  }
+
+  html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
+    transition: none;
+  }
+}
+
+/* ============================================
+   High Contrast Mode Support
+   ============================================ */
+
+@media (prefers-contrast: high) {
+  .mobile-nav-glass {
+    background: Canvas;
+    border-top: 2px solid CanvasText;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .mobile-nav-item {
+    color: CanvasText;
+  }
+
+  .mobile-nav-item:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* ============================================
+   Landscape Orientation Adjustments
+   ============================================ */
+
+@media (orientation: landscape) and (max-height: 500px) {
+  :root {
+    --mobile-nav-height: 3.5rem;
+  }
+
+  .mobile-nav-label {
+    display: none;
+  }
+
+  .mobile-nav-item {
+    padding: 0.25rem 0.5rem;
+  }
+}
+
+/* ============================================
+   Foldable/Dual Screen Support
+   ============================================ */
+
+@media (horizontal-viewport-segments: 2) {
+  .mobile-nav-root {
+    width: 100%;
+  }
+
+  .mobile-nav-list {
+    /* Adjust for fold in the middle */
+    padding-left: max(var(--mobile-nav-padding-x), env(fold-left, 0px));
+    padding-right: max(var(--mobile-nav-padding-x), env(fold-right, 0px));
+  }
+}
+
+/* Samsung Galaxy Fold specific */
+@media (min-width: 280px) and (max-width: 320px) {
+  .mobile-nav-list {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+/* ============================================
+   Very Small Screens (older devices)
+   ============================================ */
+
+@media (max-width: 320px) {
+  :root {
+    --mobile-nav-height: 4rem;
+    --mobile-nav-padding-x: 0.5rem;
+  }
+
+  .mobile-nav-label {
+    font-size: 0.625rem;
+    max-width: 3rem;
+  }
+}
+
+/* ============================================
+   Print Styles
+   ============================================ */
+
+@media print {
+  .mobile-nav-root,
+  .mobile-nav-spacer {
+    display: none !important;
+  }
+}
+
+/* ============================================
+   Utility Classes
+   ============================================ */
+
+/* Hide visually but keep accessible to screen readers */
+.mobile-nav-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip to content link for keyboard users */
+.mobile-nav-skip-link {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  padding: 0.5rem 1rem;
+  background: var(--glass-bg-light);
+  border-radius: 0.5rem;
+  transition: top 0.2s;
+}
+
+.mobile-nav-skip-link:focus {
+  top: 0.5rem;
+}

package/dist/components/Sidebar/SidebarToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarToggle.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAgD,MAAM,iBAAiB,CAAA;AAoEvG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,aAAa,qIA6EzB,CAAA"}
+{"version":3,"file":"SidebarToggle.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAgD,MAAM,iBAAiB,CAAA;AAuBvG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,aAAa,qIA6EzB,CAAA"}

package/dist/hooks/use-liquid-glass.d.ts

@@ -13,6 +13,26 @@ interface LocalVisualConfig {
 }
 type GeometryConfig = LocalGeometryConfig;
 type VisualConfig = LocalVisualConfig;
+export interface DefaultFilterAttributes {
+    red: {
+        xChannelSelector: string;
+        yChannelSelector: string;
+        scale: number;
+    };
+    green: {
+        xChannelSelector: string;
+        yChannelSelector: string;
+        scale: number;
+    };
+    blue: {
+        xChannelSelector: string;
+        yChannelSelector: string;
+        scale: number;
+    };
+    gaussianBlur: {
+        stdDeviation: number;
+    };
+}
 /**
  * Hook genérico para crear efectos liquid glass
  *
@@ -20,6 +40,9 @@ type VisualConfig = LocalVisualConfig;
  * Genera un displacement map SVG y atributos de filtro usando la librería @liquid-svg-glass/core.
  * Memoiza el resultado para evitar recalcular en cada render.
  *
+ * NOTE: This is an optional feature. If @liquid-svg-glass/core is not installed,
+ * this hook will return empty/default values.
+ *
  * @example
  * ```tsx
  * const glass = useLiquidGlass(
@@ -31,10 +54,10 @@ type VisualConfig = LocalVisualConfig;
  * ```
  */
 export declare function useLiquidGlass(geometry: GeometryConfig, visual: VisualConfig, enableChromaticAberration?: boolean): {
-    dataUri: any;
-    filterAttributes: any;
-    chromaticAberrationSVG: any;
-    calculatedGeometry: any;
+    dataUri: string;
+    filterAttributes: DefaultFilterAttributes;
+    chromaticAberrationSVG: null;
+    calculatedGeometry: null;
 };
 export {};
 //# sourceMappingURL=use-liquid-glass.d.ts.map

package/dist/hooks/use-liquid-glass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-liquid-glass.d.ts","sourceRoot":"","sources":["../../src/hooks/use-liquid-glass.ts"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,UAAU,iBAAiB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,KAAK,cAAc,GAAG,mBAAmB,CAAA;AACzC,KAAK,YAAY,GAAG,iBAAiB,CAAA;AAUrC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,YAAY,EACpB,yBAAyB,UAAQ;;;;;EAiClC"}
+{"version":3,"file":"use-liquid-glass.d.ts","sourceRoot":"","sources":["../../src/hooks/use-liquid-glass.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,UAAU,iBAAiB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,KAAK,cAAc,GAAG,mBAAmB,CAAA;AACzC,KAAK,YAAY,GAAG,iBAAiB,CAAA;AAGrC,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE;QAAE,gBAAgB,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1E,KAAK,EAAE;QAAE,gBAAgB,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,IAAI,EAAE;QAAE,gBAAgB,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3E,YAAY,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAA;CACvC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,YAAY,EACpB,yBAAyB,UAAQ;;;;;EAqClC"}

package/dist/hooks/use-sidebar-liquid-glass.d.ts

@@ -34,10 +34,10 @@ import { type SidebarLiquidPreset, type SidebarLiquidConfig } from '@/lib/liquid
  * ```
  */
 export declare function useSidebarLiquidGlass(preset: SidebarLiquidPreset, overrides?: Partial<SidebarLiquidConfig>): {
-    dataUri: any;
-    filterAttributes: any;
-    chromaticAberrationSVG: any;
-    calculatedGeometry: any;
+    dataUri: string;
+    filterAttributes: import("./use-liquid-glass").DefaultFilterAttributes;
+    chromaticAberrationSVG: null;
+    calculatedGeometry: null;
     containerRef: import("react").RefObject<HTMLElement | null>;
     preset: SidebarLiquidPreset;
     config: {