lupine.components 1.1.58 → 1.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.58",
+  "version": "1.1.60",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from './redirect';
 export * from './resizable-splitter';
 export * from './select-angle-component';
 export * from './select-with-title';
+export * from './slide-page-component';
 export * from './slide-tab-component';
 export * from './spinner';
 export * from './stars-component';

package/src/components/mobile-components/mobile-side-menu.tsx

@@ -244,7 +244,6 @@ export const MobileSideMenu = (props: { children: VNode<any>; autoExtend?: boole
       overflowY: 'auto',
       transform: 'translateX(-100%)',
       boxShadow: 'var(--cover-box-shadow)',
-      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '0',
       'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '0',
     },
     [MediaQueryRange.TabletAbove]: {

package/src/components/notice-message.tsx

@@ -57,7 +57,6 @@ export class NotificationMessage {
       padding: '0 10px',
       zIndex: 'var(--layer-notice)',
       pointerEvents: 'none',
-      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
       'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
       '>div': {
         pointerEvents: 'auto',

package/src/components/slide-page-component-demo.tsx

@@ -0,0 +1,364 @@
+import { DemoStory } from '../demo/demo-types';
+import { SlidePageComponent, SlidePageProps } from './slide-page-component';
+
+const samplePages = [
+  {
+    id: 'page-1',
+    title: 'Explore Lupine Framework',
+    link: 'https://github.com/uuware/lupine.js',
+    target: '_blank',
+    content: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          padding: '28px 32px',
+          boxSizing: 'border-box',
+          background: 'linear-gradient(135deg, #091e3a 0%, #173865 50%, #2b6cb0 100%)',
+          color: '#ffffff',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+            <span
+              style={{
+                fontSize: '11px',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                padding: '3px 10px',
+                borderRadius: '12px',
+                background: 'rgba(2, 132, 199, 0.45)',
+                border: '1px solid rgba(56, 189, 248, 0.5)',
+                color: '#e0f2fe',
+              }}
+            >
+              🔗 Clickable Card (With Link)
+            </span>
+          </div>
+          <h2 style={{ margin: '0 0 8px 0', fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em' }}>
+            Explore Lupine.js Architecture
+          </h2>
+          <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.5', color: '#cbd5e1', maxWidth: '520px' }}>
+            A lightweight, high-performance TypeScript full-stack framework with zero-re-render DOM updates and native mobile navigation.
+          </p>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '16px' }}>
+          <span
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              fontSize: '13px',
+              fontWeight: 600,
+              padding: '6px 14px',
+              borderRadius: '8px',
+              backgroundColor: '#38bdf8',
+              color: '#0f172a',
+            }}
+          >
+            Visit GitHub Repository ↗
+          </span>
+          <span style={{ fontSize: '12px', color: '#94a3b8' }}>Click anywhere on this slide to open</span>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 'page-2',
+    title: 'Reactive DOM Performance',
+    // No link: behaves as a normal card
+    content: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          padding: '28px 32px',
+          boxSizing: 'border-box',
+          background: 'linear-gradient(135deg, #18181b 0%, #27272a 60%, #3f3f46 100%)',
+          color: '#ffffff',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+            <span
+              style={{
+                fontSize: '11px',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                padding: '3px 10px',
+                borderRadius: '12px',
+                background: 'rgba(161, 161, 170, 0.25)',
+                border: '1px solid rgba(212, 212, 216, 0.35)',
+                color: '#f4f4f5',
+              }}
+            >
+              📄 Normal Card (No Link)
+            </span>
+          </div>
+          <h2 style={{ margin: '0 0 8px 0', fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em' }}>
+            Direct DOM Updates & State Isolation
+          </h2>
+          <p style={{ margin: '0 0 16px 0', fontSize: '14px', lineHeight: '1.5', color: '#d4d4d8' }}>
+            Standard non-clickable presentation card showcasing core reactive capabilities:
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+          <div
+            style={{
+              padding: '8px 14px',
+              borderRadius: '8px',
+              background: 'rgba(255, 255, 255, 0.08)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+            }}
+          >
+            <div style={{ fontSize: '16px', fontWeight: 700, color: '#38bdf8' }}>⚡ 0ms</div>
+            <div style={{ fontSize: '11px', color: '#a1a1aa' }}>Re-render overhead</div>
+          </div>
+          <div
+            style={{
+              padding: '8px 14px',
+              borderRadius: '8px',
+              background: 'rgba(255, 255, 255, 0.08)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+            }}
+          >
+            <div style={{ fontSize: '16px', fontWeight: 700, color: '#4ade80' }}>🎯 CSS &</div>
+            <div style={{ fontSize: '11px', color: '#a1a1aa' }}>Scoped namespace</div>
+          </div>
+          <div
+            style={{
+              padding: '8px 14px',
+              borderRadius: '8px',
+              background: 'rgba(255, 255, 255, 0.08)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+            }}
+          >
+            <div style={{ fontSize: '16px', fontWeight: 700, color: '#fbbf24' }}>📱 60fps</div>
+            <div style={{ fontSize: '11px', color: '#a1a1aa' }}>Native touch snap</div>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 'page-3',
+    title: 'Component Pool & Widgets',
+    link: '#component-pool',
+    content: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          padding: '28px 32px',
+          boxSizing: 'border-box',
+          background: 'linear-gradient(135deg, #064e3b 0%, #047857 55%, #059669 100%)',
+          color: '#ffffff',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+            <span
+              style={{
+                fontSize: '11px',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                padding: '3px 10px',
+                borderRadius: '12px',
+                background: 'rgba(16, 185, 129, 0.35)',
+                border: '1px solid rgba(110, 231, 183, 0.5)',
+                color: '#d1fae5',
+              }}
+            >
+              🔗 Clickable Card (With Link)
+            </span>
+          </div>
+          <h2 style={{ margin: '0 0 8px 0', fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em' }}>
+            Slide Tab & Slide Page Suite
+          </h2>
+          <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.5', color: '#a7f3d0', maxWidth: '520px' }}>
+            Standardized components built on top of native CSS scroll-snap with automated indicators and gesture support.
+          </p>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '16px' }}>
+          <span
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              fontSize: '13px',
+              fontWeight: 600,
+              padding: '6px 14px',
+              borderRadius: '8px',
+              backgroundColor: '#6ee7b7',
+              color: '#064e3b',
+            }}
+          >
+            Explore Components ↗
+          </span>
+          <span style={{ fontSize: '12px', color: '#d1fae5' }}>Click to navigate internal link</span>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 'page-4',
+    title: 'Customizable Slide Options',
+    // No link: behaves as a normal card
+    content: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          padding: '28px 32px',
+          boxSizing: 'border-box',
+          background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #7c3aed 100%)',
+          color: '#ffffff',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+            <span
+              style={{
+                fontSize: '11px',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                padding: '3px 10px',
+                borderRadius: '12px',
+                background: 'rgba(196, 181, 253, 0.25)',
+                border: '1px solid rgba(221, 214, 254, 0.4)',
+                color: '#f5f3ff',
+              }}
+            >
+              📄 Normal Card (No Link)
+            </span>
+          </div>
+          <h2 style={{ margin: '0 0 8px 0', fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em' }}>
+            Configurable Controls & Hooks
+          </h2>
+          <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.5', color: '#ddd6fe', maxWidth: '540px' }}>
+            Configure autoplay duration, dot indicators, arrow toggles, hover pause, or take programmatic control via hook moveTo(), setIndex(), and setPause().
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <span style={{ fontSize: '12px', color: '#c4b5fd' }}>
+            💡 Tip: Hovering over any slide automatically pauses the autoplay cycle.
+          </span>
+        </div>
+      </div>
+    ),
+  },
+];
+
+export const slidePageDemo: DemoStory<SlidePageProps> = {
+  id: 'slide-page-demo',
+  text: 'Slide Page',
+  args: {
+    pages: samplePages,
+    autoplay: true,
+    interval: 4000,
+    showDots: true,
+    showArrows: true,
+    pauseOnHover: true,
+  },
+  argTypes: {
+    autoplay: {
+      control: 'boolean',
+      description: 'Automatically rotate slides at a set interval',
+    },
+    interval: {
+      control: 'number',
+      description: 'Autoplay rotation interval in milliseconds',
+    },
+    showDots: {
+      control: 'boolean',
+      description: 'Display navigation dot indicators at the bottom',
+    },
+    showArrows: {
+      control: 'boolean',
+      description: 'Display left and right arrow buttons',
+    },
+    pauseOnHover: {
+      control: 'boolean',
+      description: 'Pause autoplay rotation when mouse hovers over slide',
+    },
+  },
+  render: (args: SlidePageProps) => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%', maxWidth: '800px' }}>
+        <div
+          style={{
+            height: '240px',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            border: 'var(--primary-border, 1px solid rgba(60, 60, 67, 0.15))',
+            borderRadius: '16px',
+            overflow: 'hidden',
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
+            position: 'relative',
+          }}
+        >
+          <SlidePageComponent {...args} />
+        </div>
+        <div
+          style={{
+            padding: '12px 16px',
+            borderRadius: '8px',
+            background: 'var(--bg-container, #f2f2f7)',
+            fontSize: '13px',
+            color: 'var(--text-secondary, #64748b)',
+            lineHeight: '1.5',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4px',
+          }}
+        >
+          <div>
+            <strong>Interactive behavior:</strong> Items with <code>link</code> are rendered as clickable elements (e.g. Slide 1 & Slide 3) with pointer cursor and hover states. Items without <code>link</code> (Slide 2 & Slide 4) render as standard content cards.
+          </div>
+        </div>
+      </div>
+    );
+  },
+  code: `import { SlidePageComponent } from 'lupine.components';
+
+const pages = [
+  {
+    title: 'Slide with Link',
+    link: 'https://example.com',
+    target: '_blank',
+    content: <div>Clickable Slide Content</div>,
+  },
+  {
+    title: 'Regular Slide Card',
+    content: <div>Standard Non-Clickable Card Content</div>,
+  },
+];
+
+<SlidePageComponent
+  pages={pages}
+  autoplay={true}
+  interval={4000}
+  showDots={true}
+  showArrows={true}
+/>
+`,
+};

package/src/components/slide-page-component.tsx

@@ -0,0 +1,777 @@
+import { CssProps, RefProps, VNode, bindGlobalStyle } from 'lupine.components';
+
+export interface SlidePageHookProps {
+  moveTo?: (index: number) => void;
+  getIndex?: () => number;
+  setIndex?: (index: number) => void;
+  setPause?: (pause: boolean) => void;
+  isPaused?: () => boolean;
+  togglePause?: () => boolean;
+  next?: () => void;
+  prev?: () => void;
+}
+
+export interface SlidePageItemProps {
+  id?: string;
+  title?: string;
+  content: VNode<any> | any;
+  link?: string;
+  target?: string;
+  onClick?: (event: any, page: SlidePageItemProps, index: number) => void;
+}
+
+export type SlidePageItem = SlidePageItemProps;
+
+export interface SlidePageProps {
+  pages: SlidePageItemProps[];
+  hook?: SlidePageHookProps;
+  initialIndex?: number;
+  index?: number;
+  autoplay?: boolean;
+  interval?: number;
+  showDots?: boolean;
+  dotsPosition?: 'inside' | 'outside';
+  showArrows?: boolean;
+  pause?: boolean;
+  pauseOnHover?: boolean;
+  pauseOnClick?: boolean;
+  pauseOnInteraction?: boolean;
+  draggable?: boolean;
+  onChange?: (index: number, page: SlidePageItemProps) => void;
+  class?: string;
+  style?: CssProps;
+  dotClass?: string;
+  height?: string;
+}
+
+export const SlidePageComponent = (props: SlidePageProps) => {
+  if (!props.pages || props.pages.length === 0) {
+    return null;
+  }
+
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    width: '100%',
+    height: props.height || '100%',
+    minHeight: '160px',
+    overflow: 'hidden',
+    position: 'relative',
+    boxSizing: 'border-box',
+
+    '.slide-page-c-list': {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      width: '100%',
+      height: '100%',
+      scrollSnapType: 'x mandatory',
+      scrollBehavior: 'smooth',
+      WebkitOverflowScrolling: 'touch',
+      boxSizing: 'border-box',
+      scrollbarWidth: 'none',
+      cursor: 'grab',
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      touchAction: 'pan-y pinch-zoom',
+      '&::-webkit-scrollbar': { display: 'none' },
+      '&.is-dragging': {
+        cursor: 'grabbing',
+        scrollSnapType: 'none !important',
+        scrollBehavior: 'auto !important',
+      },
+    },
+
+    '.slide-page-c-item': {
+      width: '100%',
+      minWidth: '100%',
+      maxWidth: '100%',
+      flexShrink: 0,
+      height: '100%',
+      overflowY: 'auto',
+      position: 'relative',
+      scrollSnapAlign: 'start',
+      scrollSnapStop: 'always',
+      boxSizing: 'border-box',
+      cursor: 'default',
+      display: 'flex',
+      flexDirection: 'column',
+      scrollbarWidth: 'none',
+      WebkitOverflowScrolling: 'touch',
+      '&::-webkit-scrollbar': { display: 'none' },
+    },
+
+    '.slide-page-c-item.slide-page-c-item-link': {
+      cursor: 'pointer',
+      textDecoration: 'none',
+      color: 'inherit',
+      transition: 'opacity 0.2s ease, transform 0.2s ease',
+      WebkitTapHighlightColor: 'transparent',
+      '&:hover': {
+        opacity: 0.95,
+      },
+      '&:active': {
+        transform: 'scale(0.995)',
+        opacity: 0.88,
+      },
+    },
+
+    '.slide-page-c-arrow': {
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: '32px',
+      height: '32px',
+      borderRadius: '50%',
+      backgroundColor: 'var(--secondary-bg-color)',
+      border: '1px solid var(--secondary-border-color)',
+      color: 'var(--primary-color)',
+      fontFamily: 'monospace',
+      fontSize: '22px',
+      lineHeight: '1',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      zIndex: 10,
+      backdropFilter: 'blur(8px)',
+      WebkitBackdropFilter: 'blur(8px)',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      transition: 'all 0.2s ease',
+      userSelect: 'none',
+      WebkitTapHighlightColor: 'transparent',
+      padding: '0',
+      outline: 'none',
+      '&:hover': {
+        transform: 'translateY(-50%) scale(1.08)',
+        opacity: 0.92,
+      },
+      '&:active': {
+        transform: 'translateY(-50%) scale(0.96)',
+      },
+    },
+    '.slide-page-c-arrow-prev': {
+      left: '12px',
+    },
+    '.slide-page-c-arrow-next': {
+      right: '12px',
+    },
+
+    '.slide-page-c-dots': {
+      position: 'absolute',
+      bottom: '12px',
+      left: '0',
+      right: '0',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '8px',
+      zIndex: 10,
+      pointerEvents: 'auto',
+    },
+
+    '.slide-page-c-dots.dots-outside': {
+      position: 'relative',
+      bottom: 'auto',
+      marginTop: '10px',
+      marginBottom: '4px',
+    },
+
+    '.slide-page-c-dot': {
+      cursor: 'pointer',
+      width: '8px',
+      height: '8px',
+      borderRadius: '4px',
+      backgroundColor: 'var(--secondary-color)',
+      opacity: 0.5,
+      transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+      WebkitTapHighlightColor: 'transparent',
+      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.15)',
+    },
+
+    '.slide-page-c-dot.active': {
+      width: '24px',
+      borderRadius: '4px',
+      backgroundColor: 'var(--primary-accent-color)',
+      opacity: 1,
+      boxShadow: '0 2px 6px rgba(2, 132, 199, 0.4)',
+    },
+
+    '.slide-page-c-dot:hover': {
+      backgroundColor: 'var(--primary-accent-color)',
+      opacity: 0.85,
+    },
+  };
+
+  bindGlobalStyle('slide-page-c-box', css);
+
+  const ref: RefProps = {};
+  let slideIndex = props.initialIndex ?? props.index ?? 0;
+  if (slideIndex < 0 || slideIndex >= props.pages.length) {
+    slideIndex = 0;
+  }
+
+  let manualScroll = false;
+  let scrollEndTimer: any = null;
+  let loopTimer: any = null;
+  let isHovered = false;
+  let isUserPaused = props.pause || false;
+
+  const autoplay = props.autoplay ?? true;
+  const interval = props.interval || 4000;
+
+  const resetSlides = (index: number) => {
+    const dots = ref.$all?.('.slide-page-c-dot');
+    if (dots) {
+      for (let i = 0; i < dots.length; i++) {
+        dots[i].classList.toggle('active', i === index);
+      }
+    }
+    if (props.onChange && props.pages[index]) {
+      props.onChange(index, props.pages[index]);
+    }
+  };
+
+  const pauseAutoplay = (userPaused: boolean = false) => {
+    if (loopTimer) {
+      clearTimeout(loopTimer);
+      loopTimer = null;
+    }
+    if (scrollEndTimer) {
+      clearTimeout(scrollEndTimer);
+      scrollEndTimer = null;
+    }
+    if (userPaused) {
+      isUserPaused = true;
+    }
+  };
+
+  const canHover = () => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false;
+    return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+  };
+
+  const scheduleAutoplay = (customDelay?: number) => {
+    if (loopTimer) {
+      clearTimeout(loopTimer);
+      loopTimer = null;
+    }
+    if (!autoplay || props.pages.length <= 1 || isUserPaused) {
+      return;
+    }
+    const container = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    // If container is not yet connected or has width <= 0 (e.g. parent tab hidden),
+    // do not abandon autoplay; poll every 1s until visible again
+    if (!container || !container.isConnected || container.clientWidth <= 0) {
+      loopTimer = setTimeout(() => scheduleAutoplay(), 1000);
+      return;
+    }
+    // If user is currently dragging or touching, wait and retry
+    if (isPointerDown || isTouching || isDragging || isInteracting) {
+      loopTimer = setTimeout(() => scheduleAutoplay(), 1500);
+      return;
+    }
+    // If hovered on a device with hover support, pause temporarily and check back
+    if (isHovered && props.pauseOnHover !== false && canHover()) {
+      loopTimer = setTimeout(() => scheduleAutoplay(), 2500);
+      return;
+    }
+    const delay = customDelay !== undefined ? customDelay : interval;
+    loopTimer = setTimeout(() => {
+      autoNextSlide();
+    }, delay);
+  };
+
+  const autoNextSlide = () => {
+    const container = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (!container || !container.isConnected || container.clientWidth <= 0) {
+      scheduleAutoplay(1000);
+      return;
+    }
+    if (
+      isUserPaused ||
+      isPointerDown ||
+      isTouching ||
+      isDragging ||
+      isInteracting
+    ) {
+      scheduleAutoplay(1500);
+      return;
+    }
+    if (isHovered && props.pauseOnHover !== false && canHover()) {
+      scheduleAutoplay(2500);
+      return;
+    }
+
+    const nextIndex = (slideIndex + 1) % props.pages.length;
+    moveSlide(nextIndex);
+  };
+
+  let isPointerDown = false;
+  let isTouching = false;
+  let isDragging = false;
+  let isInteracting = false;
+  let wasDragging = false;
+  let startX = 0;
+  let startY = 0;
+  let lastX = 0;
+  let startScrollLeft = 0;
+  let pointerDownTime = 0;
+
+  const drawerScrollStop = () => {
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (!drawer) return;
+    const width = drawer.clientWidth;
+    if (width <= 0) {
+      scheduleAutoplay(1000);
+      return;
+    }
+    const currentScrollIndex = Math.round(drawer.scrollLeft / width);
+    if (currentScrollIndex !== slideIndex && currentScrollIndex >= 0 && currentScrollIndex < props.pages.length) {
+      slideIndex = currentScrollIndex;
+      resetSlides(slideIndex);
+    }
+    if (
+      !isPointerDown &&
+      !isTouching &&
+      !isDragging &&
+      !isInteracting &&
+      !isUserPaused
+    ) {
+      scheduleAutoplay();
+    }
+  };
+
+  const drawerScroll = () => {
+    if (isPointerDown || isTouching || isDragging || isInteracting) {
+      pauseAutoplay(false);
+      return;
+    }
+    if (manualScroll) return;
+    pauseAutoplay(false);
+    if (scrollEndTimer) clearTimeout(scrollEndTimer);
+    scrollEndTimer = setTimeout(() => {
+      drawerScrollStop();
+    }, 120);
+  };
+
+  const moveSlide = (targetIndex: number) => {
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (!drawer) {
+      scheduleAutoplay(1000);
+      return;
+    }
+    const width = drawer.clientWidth;
+    if (width <= 0) {
+      scheduleAutoplay(1000);
+      return;
+    }
+
+    if (props.pages.length > 0) {
+      targetIndex = (targetIndex + props.pages.length) % props.pages.length;
+    }
+    manualScroll = true;
+    slideIndex = targetIndex;
+    resetSlides(slideIndex);
+
+    drawer.scrollTo({
+      left: targetIndex * width,
+      behavior: 'smooth',
+    });
+
+    setTimeout(() => {
+      manualScroll = false;
+      isInteracting = false;
+      if (
+        !isPointerDown &&
+        !isTouching &&
+        !isDragging &&
+        !isUserPaused
+      ) {
+        scheduleAutoplay();
+      }
+    }, 350);
+  };
+
+  const handleStart = (clientX: number, clientY: number, pointerId?: number) => {
+    if (props.draggable === false) return;
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (!drawer) return;
+
+    isPointerDown = true;
+    isTouching = true;
+    isInteracting = true;
+    isDragging = false;
+    wasDragging = false;
+    startX = clientX;
+    startY = clientY;
+    lastX = clientX;
+    startScrollLeft = drawer.scrollLeft;
+    pointerDownTime = Date.now();
+
+    // Immediately freeze/pause autoplay while pressing down
+    pauseAutoplay(false);
+  };
+
+  const handleMove = (clientX: number, clientY: number, e?: any) => {
+    if (!isPointerDown && !isTouching) return;
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (!drawer) return;
+
+    lastX = clientX;
+    const deltaX = clientX - startX;
+    const deltaY = clientY - startY;
+
+    // Immediately freeze/pause autoplay while sliding
+    pauseAutoplay(false);
+
+    if (!isDragging) {
+      // Highly responsive drag detection (2px threshold)
+      if (Math.abs(deltaX) > 2) {
+        isDragging = true;
+        wasDragging = true;
+        manualScroll = true;
+        if (e && e.pointerId !== undefined) {
+          try {
+            drawer.setPointerCapture?.(e.pointerId);
+          } catch { }
+        }
+        drawer.classList.add('is-dragging');
+        drawer.style.scrollSnapType = 'none';
+        drawer.style.scrollBehavior = 'auto';
+      }
+    }
+
+    if (isDragging) {
+      if (e && e.cancelable) e.preventDefault();
+      drawer.scrollLeft = startScrollLeft - deltaX;
+    }
+  };
+
+  const handleEnd = (clientX?: number, e?: any) => {
+    if (!isPointerDown && !isTouching) return;
+    isPointerDown = false;
+    isTouching = false;
+
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (!drawer) return;
+
+    if (isDragging) {
+      isDragging = false;
+      drawer.classList.remove('is-dragging');
+      drawer.style.scrollSnapType = 'x mandatory';
+      drawer.style.scrollBehavior = 'smooth';
+      if (e && e.pointerId !== undefined) {
+        try {
+          drawer.releasePointerCapture?.(e.pointerId);
+        } catch { }
+      }
+
+      const finalX = clientX !== undefined ? clientX : lastX;
+      const deltaX = finalX - startX;
+      const elapsed = Math.max(Date.now() - pointerDownTime, 1);
+      const velocity = Math.abs(deltaX) / elapsed;
+      const width = drawer.clientWidth || 1;
+
+      if (Math.abs(deltaX) > width * 0.15 || velocity > 0.25) {
+        const direction = deltaX < 0 ? 1 : -1;
+        moveSlide(slideIndex + direction);
+      } else {
+        moveSlide(slideIndex);
+      }
+    } else {
+      // Clean tap without drag
+      if (props.pauseOnClick) {
+        props.hook?.togglePause ? props.hook.togglePause() : (isUserPaused = !isUserPaused);
+      }
+    }
+
+    setTimeout(() => {
+      wasDragging = false;
+      manualScroll = false;
+      isInteracting = false;
+      // Resume autoplay after releasing if not user paused
+      if (!isPointerDown && !isTouching && !isUserPaused) {
+        scheduleAutoplay();
+      }
+    }, 120);
+  };
+
+  if (props.hook) {
+    props.hook.moveTo = moveSlide;
+    props.hook.setIndex = moveSlide;
+    props.hook.getIndex = () => slideIndex;
+    props.hook.isPaused = () => isUserPaused;
+    props.hook.setPause = (inPause: boolean) => {
+      isUserPaused = inPause;
+      if (inPause) {
+        pauseAutoplay(true);
+      } else {
+        scheduleAutoplay();
+      }
+    };
+    props.hook.togglePause = () => {
+      const next = !isUserPaused;
+      props.hook?.setPause?.(next);
+      return next;
+    };
+    props.hook.next = () => moveSlide(slideIndex + 1);
+    props.hook.prev = () => moveSlide(slideIndex - 1);
+  }
+
+  const handleMouseEnter = () => {
+    if (props.pauseOnHover !== false && canHover()) {
+      isHovered = true;
+      pauseAutoplay(false);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    isHovered = false;
+    if (
+      !isPointerDown &&
+      !isTouching &&
+      !isDragging &&
+      !isInteracting &&
+      !isUserPaused
+    ) {
+      scheduleAutoplay();
+    }
+  };
+
+  let resizeObserver: ResizeObserver | null = null;
+  let intersectionObserver: IntersectionObserver | null = null;
+  let watchdogTimer: any = null;
+
+  const wakeUpAutoplay = () => {
+    isPointerDown = false;
+    isTouching = false;
+    isDragging = false;
+    isInteracting = false;
+    isHovered = false;
+    if (autoplay && !isUserPaused) {
+      scheduleAutoplay(400);
+    }
+  };
+
+  ref.onLoad = async () => {
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (drawer) {
+      drawer.addEventListener('scrollend', drawerScrollStop);
+
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.contentRect.width > 0) {
+              if (autoplay && !isUserPaused && !loopTimer) {
+                scheduleAutoplay(400);
+              }
+            }
+          }
+        });
+        resizeObserver.observe(drawer);
+      }
+
+      if (typeof IntersectionObserver !== 'undefined') {
+        intersectionObserver = new IntersectionObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              if (autoplay && !isUserPaused && !loopTimer) {
+                scheduleAutoplay(400);
+              }
+            }
+          }
+        });
+        intersectionObserver.observe(drawer);
+      }
+    }
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('focus', wakeUpAutoplay);
+      window.addEventListener('updateTheme', wakeUpAutoplay);
+      window.addEventListener('theme-bg-change', wakeUpAutoplay);
+      window.addEventListener('id-photo-theme-changed', wakeUpAutoplay);
+      window.addEventListener('id-photo-tab-switched', wakeUpAutoplay);
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible') {
+          wakeUpAutoplay();
+        }
+      });
+    }
+
+    // Watchdog timer: every 8s ensure rotation hasn't stalled unexpectedly
+    watchdogTimer = setInterval(() => {
+      if (autoplay && !isUserPaused && !loopTimer) {
+        scheduleAutoplay();
+      }
+    }, 8000);
+
+    resetSlides(slideIndex);
+    if (slideIndex > 0) {
+      setTimeout(() => {
+        moveSlide(slideIndex);
+      }, 50);
+    }
+    scheduleAutoplay();
+  };
+
+  ref.onUnload = async () => {
+    const drawer = ref.$?.('.slide-page-c-list') as HTMLElement | undefined;
+    if (drawer) {
+      drawer.removeEventListener('scrollend', drawerScrollStop);
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (intersectionObserver) {
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
+    }
+    if (watchdogTimer) {
+      clearInterval(watchdogTimer);
+      watchdogTimer = null;
+    }
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('focus', wakeUpAutoplay);
+      window.removeEventListener('updateTheme', wakeUpAutoplay);
+      window.removeEventListener('theme-bg-change', wakeUpAutoplay);
+      window.removeEventListener('id-photo-theme-changed', wakeUpAutoplay);
+      window.removeEventListener('id-photo-tab-switched', wakeUpAutoplay);
+      document.removeEventListener('visibilitychange', wakeUpAutoplay);
+    }
+    pauseAutoplay(false);
+  };
+
+  const handleItemClick = (event: any, page: SlidePageItemProps, index: number) => {
+    if (wasDragging) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (page.onClick) {
+      page.onClick(event, page, index);
+    }
+  };
+
+  return (
+    <section
+      class={`slide-page-c-box ${props.class || ''}`}
+      ref={ref}
+      css={props.style}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        class="slide-page-c-list no-scrollbar-container"
+        onScroll={drawerScroll}
+        onPointerDown={(e: any) => {
+          if (e.button !== undefined && e.button !== 0) return;
+          handleStart(e.clientX, e.clientY, e.pointerId);
+        }}
+        onPointerMove={(e: any) => handleMove(e.clientX, e.clientY, e)}
+        onPointerUp={(e: any) => handleEnd(e.clientX, e)}
+        onPointerCancel={(e: any) => handleEnd(e.clientX, e)}
+        onTouchStart={(e: any) => {
+          if (e.touches && e.touches[0]) {
+            handleStart(e.touches[0].clientX, e.touches[0].clientY);
+          }
+        }}
+        onTouchMove={(e: any) => {
+          if (e.touches && e.touches[0]) {
+            handleMove(e.touches[0].clientX, e.touches[0].clientY, e);
+          }
+        }}
+        onTouchEnd={(e: any) => {
+          const t = e.changedTouches?.[0];
+          handleEnd(t ? t.clientX : undefined, e);
+        }}
+        onTouchCancel={(e: any) => {
+          const t = e.changedTouches?.[0];
+          handleEnd(t ? t.clientX : undefined, e);
+        }}
+        onMouseDown={(e: any) => {
+          if (e.button !== 0) return;
+          handleStart(e.clientX, e.clientY);
+        }}
+      >
+        {props.pages.map((page, index) => {
+          if (page.link) {
+            return (
+              <a
+                class={`slide-page-c-item slide-page-c-item-link ${page.id ? `slide-page-item-${page.id}` : ''}`}
+                href={page.link}
+                target={page.target || '_self'}
+                title={page.title}
+                onClick={(event: any) => handleItemClick(event, page, index)}
+              >
+                {page.content}
+              </a>
+            );
+          }
+          return (
+            <div
+              class={`slide-page-c-item ${page.id ? `slide-page-item-${page.id}` : ''}`}
+              title={page.title}
+              onClick={(event: any) => handleItemClick(event, page, index)}
+            >
+              {page.content}
+            </div>
+          );
+        })}
+      </div>
+
+      {props.showArrows && props.pages.length > 1 && (
+        <>
+          <button
+            type="button"
+            class="slide-page-c-arrow slide-page-c-arrow-prev"
+            aria-label="Previous slide"
+            onClick={(e: any) => {
+              e.preventDefault();
+              e.stopPropagation();
+              moveSlide(slideIndex - 1);
+              scheduleAutoplay(interval);
+            }}
+          >
+            ‹
+          </button>
+          <button
+            type="button"
+            class="slide-page-c-arrow slide-page-c-arrow-next"
+            aria-label="Next slide"
+            onClick={(e: any) => {
+              e.preventDefault();
+              e.stopPropagation();
+              moveSlide(slideIndex + 1);
+              scheduleAutoplay(interval);
+            }}
+          >
+            ›
+          </button>
+        </>
+      )}
+
+      {props.showDots !== false && props.pages.length > 1 && (
+        <div class={`slide-page-c-dots ${props.dotsPosition === 'outside' ? 'dots-outside' : ''} ${props.dotClass || ''}`}>
+          {props.pages.map((page, index) => (
+            <div
+              class={`slide-page-c-dot ${index === slideIndex ? 'active' : ''}`}
+              title={page.title || `Page ${index + 1}`}
+              onClick={(event: any) => {
+                event.preventDefault();
+                event.stopPropagation();
+                moveSlide(index);
+                scheduleAutoplay(interval);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+};

package/src/components/slide-tab-component.tsx

@@ -35,8 +35,8 @@ export const SlideTabComponent = (props: SlideTabProps) => {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: 'var(--card-bg, #ffffff)',
-      borderBottom: '0.5px solid var(--card-border, rgba(60, 60, 67, 0.15))',
+      backgroundColor: 'var(--primary-bg-color)',
+      borderBottom: '1px solid var(--secondary-border-color)',
       padding: '10px 16px 8px 16px',
       overflowX: 'auto',
       WebkitOverflowScrolling: 'touch',
@@ -59,8 +59,8 @@ export const SlideTabComponent = (props: SlideTabProps) => {
       borderRadius: '20px',
       fontSize: '13px',
       fontWeight: 600,
-      color: 'var(--text-secondary, #8e8e93)',
-      backgroundColor: 'var(--bg-container, #f2f2f7)',
+      color: 'var(--secondary-color)',
+      backgroundColor: 'var(--secondary-bg-color)',
       whiteSpace: 'nowrap',
       transition: 'all 0.18s ease',
       WebkitTapHighlightColor: 'transparent',
@@ -73,7 +73,7 @@ export const SlideTabComponent = (props: SlideTabProps) => {
       },
     },
     '.slide-tab-c-nav-item.active': {
-      backgroundColor: 'var(--primary-accent-color, #0284c7)',
+      backgroundColor: 'var(--primary-accent-color)',
       color: '#ffffff',
       boxShadow: '0 2px 8px rgba(2, 132, 199, 0.35)',
     },

package/src/demo/demo-frame-helper.tsx

@@ -54,6 +54,7 @@ import { searchInputDemo } from '../component-pool/search-input';
 import { hEditorDemo } from '../component-pool/h-editor';
 import { pagingLinkDemo } from '../components/paging-link-demo';
 import { slideTabDemo } from '../components/slide-tab-component-demo';
+import { slidePageDemo } from '../components/slide-page-component-demo';
 import { qrcodeDemo } from '../component-pool/qrcode';
 import { iEditorDemo } from '../component-pool/i-editor';
 import { youtubePlayerDemo } from '../component-pool/youtube-player';
@@ -336,6 +337,12 @@ export class DemoFrameHelper {
           url: '',
           js: () => this.addPanel(slideTabDemo.text, <DemoPage story={slideTabDemo} />),
         },
+        {
+          id: slidePageDemo.id,
+          text: slidePageDemo.text,
+          url: '',
+          js: () => this.addPanel(slidePageDemo.text, <DemoPage story={slidePageDemo} />),
+        },
         {
           id: pagingLinkDemo.id,
           text: pagingLinkDemo.text,

package/src/demo/demo-registry.ts

@@ -52,6 +52,7 @@ import { searchInputDemo } from '../component-pool/search-input';
 import { pagingLinkDemo } from '../components/paging-link-demo';
 import { hEditorDemo } from '../component-pool/h-editor';
 import { slideTabDemo } from '../components/slide-tab-component-demo';
+import { slidePageDemo } from '../components/slide-page-component-demo';
 import { qrcodeDemo } from '../component-pool/qrcode';
 import { iEditorDemo } from '../component-pool/i-editor';
 import { youtubePlayerDemo } from '../component-pool/youtube-player';
@@ -125,6 +126,7 @@ export const demoRegistry: Record<string, DemoStory<any>> = {
   [pagingLinkDemo.id]: pagingLinkDemo,
   [hEditorDemo.id]: hEditorDemo,
   [slideTabDemo.id]: slideTabDemo,
+  [slidePageDemo.id]: slidePageDemo,
   [qrcodeDemo.id]: qrcodeDemo,
   [iEditorDemo.id]: iEditorDemo,
   [youtubePlayerDemo.id]: youtubePlayerDemo,

package/src/frames/responsive-frame.tsx

@@ -38,7 +38,6 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     margin: '0 auto',
     overflowX: 'hidden',
     ...(!props.noSafeAreaTop ? {
-      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
       'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
     } : {}),
     '.frame-top-menu': {

package/src/frames/slider-frame-demo.tsx

@@ -24,6 +24,7 @@ export const sliderFrameDemo: DemoStory<any> = {
   text: 'Slider Frame Demo',
   args: {
     direction: 'right',
+    addBottomSafearea: false,
   },
   argTypes: {
     direction: {
@@ -31,6 +32,10 @@ export const sliderFrameDemo: DemoStory<any> = {
       options: ['right', 'bottom'],
       description: 'Direction the slider enters from',
     },
+    addBottomSafearea: {
+      control: 'boolean',
+      description: 'Add safe area padding at bottom',
+    },
   },
   render: (args) => {
     const sliderHook: SliderFrameHookProps = {};
@@ -54,6 +59,7 @@ export const sliderFrameDemo: DemoStory<any> = {
               let close: SliderHelperCloseProps;
               close = await SliderHelper.show({
                 direction: args.direction,
+                addBottomSafearea: args.addBottomSafearea,
                 children: (
                   <HeaderWithBackFrame title='Slider Helper Inner Page' onBack={() => close()}>
                     <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
@@ -71,7 +77,12 @@ export const sliderFrameDemo: DemoStory<any> = {
         </div>
 
         {/* The SliderFrame is placed here but initially hidden */}
-        <SliderFrame hook={sliderHook} direction={args.direction} defaultContent='' />
+        <SliderFrame
+          hook={sliderHook}
+          direction={args.direction}
+          addBottomSafearea={args.addBottomSafearea}
+          defaultContent=''
+        />
       </div>
     );
   },

package/src/frames/slider-frame.tsx

@@ -16,7 +16,7 @@ import { MediaQueryMaxWidth, VNode, stopPropagation } from 'lupine.components';
 import { SliderHelper, SliderHelperCloseProps } from './slider-helper';
 
 export type SliderFrameHookProps = {
-  load?: (children: VNode<any>) => void;
+  load?: (children: VNode<any>, addBottomSafearea?: boolean) => void;
   close?: (event: Event) => void;
   isOpened?: () => boolean;
 };
@@ -27,18 +27,20 @@ export type SliderFrameProps = {
   hook?: SliderFrameHookProps;
   afterClose?: () => void | Promise<void>;
   maxWidth?: string;
+  addBottomSafearea?: boolean;
 };
 export const SliderFrame = (props: SliderFrameProps) => {
   let closeSlider: SliderHelperCloseProps | undefined;
   let opened = false;
 
   if (props.hook) {
-    props.hook.load = (children) => {
+    props.hook.load = (children, addBottomSafearea) => {
       opened = true;
       SliderHelper.show({
         direction: props.direction || 'right',
         children,
         maxWidth: props.maxWidth,
+        addBottomSafearea: typeof addBottomSafearea === 'boolean' ? addBottomSafearea : (props.addBottomSafearea ?? false),
         closeEvent: () => {
           opened = false;
           closeSlider = undefined;

package/src/frames/slider-helper.tsx

@@ -16,6 +16,7 @@ export type SliderHelperShowProps = {
   className?: string;
   contentClassName?: string;
   mountTarget?: HTMLElement;
+  addBottomSafearea?: boolean;
 };
 
 export class SliderHelper {
@@ -29,6 +30,7 @@ export class SliderHelper {
     className = '',
     contentClassName = '',
     mountTarget,
+    addBottomSafearea = false,
   }: SliderHelperShowProps): Promise<SliderHelperCloseProps> {
     const base = document.createElement('div');
     const isHorizontal = direction === 'left' || direction === 'right';
@@ -157,8 +159,12 @@ export class SliderHelper {
         transform: startTransform,
         transition: 'transform 0.4s ease-in-out',
         // trick: to put two padding-top properties
-        'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '0',
         'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '0',
+        ...(addBottomSafearea
+          ? {
+              'padding-bottom': isSafeAreaSupported() ? 'env(safe-area-inset-bottom)' : '0',
+            }
+          : {}),
         ...contentCss,
         '&::-webkit-scrollbar': {
           display: 'none',

package/src/frames/top-frame.tsx

@@ -28,7 +28,6 @@ export const TopFrame = async ({
       // trick: to put two padding-top properties
       ...(!noSafeAreaTop
         ? {
-          'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
           'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
         }
         : {}),