@stacksjs/components 0.2.35 → 0.2.54

package/src/ui/tooltip/Tooltip.stx

@@ -6,7 +6,6 @@ export const className = $props.className || ''
 export const show = $props.show || false
 export const disabled = $props.disabled || false
 
-// Position classes
 const positionClasses = {
   top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
   bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
@@ -14,7 +13,6 @@ const positionClasses = {
   right: 'left-full top-1/2 -translate-y-1/2 ml-2',
 }
 
-// Arrow classes
 const arrowClasses = {
   top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700',
   bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700',
@@ -22,55 +20,51 @@ const arrowClasses = {
   right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700',
 }
 
-export const tooltipClasses = `absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
+export const tooltipClasses = `absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
 export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowClasses[position]}`.trim()
-
-let isVisible = show
-let timeoutId = null
 </script>
 
-<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
-  <!-- Trigger element (slot) -->
-  <div
-    onmouseenter="handleMouseEnter()"
-    onmouseleave="handleMouseLeave()"
-    onfocus="handleMouseEnter()"
-    onblur="handleMouseLeave()"
-  >
-    <slot />
-  </div>
-
-  <!-- Tooltip -->
-  @if(isVisible && !disabled)
-    <div
-      class="{{ tooltipClasses }}"
-      role="tooltip"
-      style="opacity: 1"
-    >
-      {{ content }}
-      <div class="{{ arrowClass }}"></div>
-    </div>
-  @endif
-</div>
-
-<script>
-function handleMouseEnter() {
-  if (disabled) return
+<script client>
+const delay = {{ delay }}
+const isDisabled = {{ disabled }}
+const isVisible = state({{ show }})
+let timeoutId = null
 
+function showTooltip() {
+  if (isDisabled) return
   if (delay > 0) {
-    timeoutId = setTimeout(() => {
-      isVisible = true
-    }, delay)
-  } else {
-    isVisible = true
+    timeoutId = setTimeout(() => isVisible.set(true), delay)
+  }
+  else {
+    isVisible.set(true)
   }
 }
 
-function handleMouseLeave() {
+function hideTooltip() {
   if (timeoutId) {
     clearTimeout(timeoutId)
     timeoutId = null
   }
-  isVisible = false
+  isVisible.set(false)
 }
 </script>
+
+<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
+  <div
+    @mouseenter="showTooltip()"
+    @mouseleave="hideTooltip()"
+    @focusin="showTooltip()"
+    @focusout="hideTooltip()"
+  >
+    <slot />
+  </div>
+
+  <div
+    :show="isVisible() && !{{ disabled }}"
+    class="{{ tooltipClasses }}"
+    role="tooltip"
+  >
+    {{ content }}
+    <div class="{{ arrowClass }}"></div>
+  </div>
+</div>

package/src/ui/transition/Transition.stx

@@ -7,168 +7,96 @@ export const leave = $props.leave || 'transition-opacity duration-200'
 export const leaveFrom = $props.leaveFrom || 'opacity-100'
 export const leaveTo = $props.leaveTo || 'opacity-0'
 export const appear = $props.appear || false
-export const appearFrom = $props.appearFrom || enterFrom
-export const appearTo = $props.appearTo || enterTo
-export const mode = $props.mode || 'in-out' // 'in-out' | 'out-in' | 'default'
 export const duration = $props.duration || 300
 export const delay = $props.delay || 0
 export const preset = $props.preset || ''
-export const onBeforeEnter = $props.onBeforeEnter
-export const onEnter = $props.onEnter
-export const onAfterEnter = $props.onAfterEnter
-export const onBeforeLeave = $props.onBeforeLeave
-export const onLeave = $props.onLeave
-export const onAfterLeave = $props.onAfterLeave
 export const className = $props.className || ''
 
-// Preset transitions
 const presets = {
-  fade: {
-    enter: 'transition-opacity',
-    enterFrom: 'opacity-0',
-    enterTo: 'opacity-100',
-    leave: 'transition-opacity',
-    leaveFrom: 'opacity-100',
-    leaveTo: 'opacity-0',
-  },
-  slide: {
-    enter: 'transition-transform',
-    enterFrom: 'translate-y-2',
-    enterTo: 'translate-y-0',
-    leave: 'transition-transform',
-    leaveFrom: 'translate-y-0',
-    leaveTo: 'translate-y-2',
-  },
-  slideLeft: {
-    enter: 'transition-transform',
-    enterFrom: 'translate-x-full',
-    enterTo: 'translate-x-0',
-    leave: 'transition-transform',
-    leaveFrom: 'translate-x-0',
-    leaveTo: '-translate-x-full',
-  },
-  slideRight: {
-    enter: 'transition-transform',
-    enterFrom: '-translate-x-full',
-    enterTo: 'translate-x-0',
-    leave: 'transition-transform',
-    leaveFrom: 'translate-x-0',
-    leaveTo: 'translate-x-full',
-  },
-  scale: {
-    enter: 'transition-transform',
-    enterFrom: 'scale-95',
-    enterTo: 'scale-100',
-    leave: 'transition-transform',
-    leaveFrom: 'scale-100',
-    leaveTo: 'scale-95',
-  },
-  rotate: {
-    enter: 'transition-transform',
-    enterFrom: 'rotate-12 scale-95',
-    enterTo: 'rotate-0 scale-100',
-    leave: 'transition-transform',
-    leaveFrom: 'rotate-0 scale-100',
-    leaveTo: '-rotate-12 scale-95',
-  },
-  zoom: {
-    enter: 'transition-all',
-    enterFrom: 'scale-0 opacity-0',
-    enterTo: 'scale-100 opacity-100',
-    leave: 'transition-all',
-    leaveFrom: 'scale-100 opacity-100',
-    leaveTo: 'scale-0 opacity-0',
-  },
+  fade: { enter: 'transition-opacity', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'transition-opacity', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
+  slide: { enter: 'transition-transform', enterFrom: 'translate-y-2', enterTo: 'translate-y-0', leave: 'transition-transform', leaveFrom: 'translate-y-0', leaveTo: 'translate-y-2' },
+  slideLeft: { enter: 'transition-transform', enterFrom: 'translate-x-full', enterTo: 'translate-x-0', leave: 'transition-transform', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-full' },
+  slideRight: { enter: 'transition-transform', enterFrom: '-translate-x-full', enterTo: 'translate-x-0', leave: 'transition-transform', leaveFrom: 'translate-x-0', leaveTo: 'translate-x-full' },
+  scale: { enter: 'transition-transform', enterFrom: 'scale-95', enterTo: 'scale-100', leave: 'transition-transform', leaveFrom: 'scale-100', leaveTo: 'scale-95' },
+  rotate: { enter: 'transition-transform', enterFrom: 'rotate-12 scale-95', enterTo: 'rotate-0 scale-100', leave: 'transition-transform', leaveFrom: 'rotate-0 scale-100', leaveTo: '-rotate-12 scale-95' },
+  zoom: { enter: 'transition-all', enterFrom: 'scale-0 opacity-0', enterTo: 'scale-100 opacity-100', leave: 'transition-all', leaveFrom: 'scale-100 opacity-100', leaveTo: 'scale-0 opacity-0' },
 }
 
-// Apply preset if specified
-const presetTransition = preset && presets[preset] ? presets[preset] : {}
-const finalEnter = presetTransition.enter || enter
-const finalEnterFrom = presetTransition.enterFrom || enterFrom
-const finalEnterTo = presetTransition.enterTo || enterTo
-const finalLeave = presetTransition.leave || leave
-const finalLeaveFrom = presetTransition.leaveFrom || leaveFrom
-const finalLeaveTo = presetTransition.leaveTo || leaveTo
+const p = preset && presets[preset] ? presets[preset] : {}
+export const enterClass = p.enter || enter
+export const enterFromClass = p.enterFrom || enterFrom
+export const enterToClass = p.enterTo || enterTo
+export const leaveClass = p.leave || leave
+export const leaveFromClass = p.leaveFrom || leaveFrom
+export const leaveToClass = p.leaveTo || leaveTo
 
-export let isEntering = false
-export let isLeaving = false
-export let shouldRender = show
-export let hasAppeared = false
-
-const transitionClasses = show
-  ? isEntering
-    ? `${finalEnter} ${finalEnterFrom}`
-    : `${finalEnterTo}`
-  : isLeaving
-    ? `${finalLeave} ${finalLeaveFrom}`
-    : `${finalLeaveTo}`
-
-const componentClasses = `${transitionClasses} ${className}`.trim()
-const durationStyle = `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`
+export const durationStyle = `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`
+export const extraClass = className
 </script>
 
-@if(shouldRender)
-  <div class="{{ componentClasses }}" style="{{ durationStyle }}">
-    <slot />
-  </div>
-@endif
-
-<script>
-// Handle transitions with lifecycle callbacks
-if (typeof window !== 'undefined') {
-  let previousShow = show
-
-  // Watch for show changes
-  function checkTransition() {
-    if (show !== previousShow) {
-      if (show && !shouldRender) {
-        // Entering
-        if (onBeforeEnter) onBeforeEnter()
-
-        shouldRender = true
-        isEntering = true
-
-        setTimeout(() => {
-          if (onEnter) onEnter()
-        }, delay)
-
-        setTimeout(() => {
-          isEntering = false
-          if (onAfterEnter) onAfterEnter()
-        }, duration + delay)
-
-      } else if (!show && shouldRender) {
-        // Leaving
-        if (onBeforeLeave) onBeforeLeave()
-
-        isLeaving = true
-
-        setTimeout(() => {
-          if (onLeave) onLeave()
-        }, delay)
-
-        setTimeout(() => {
-          isLeaving = false
-          shouldRender = false
-          if (onAfterLeave) onAfterLeave()
-        }, duration + delay)
-      }
-
-      previousShow = show
-    }
-
-    requestAnimationFrame(checkTransition)
+<script client>
+const emit = defineEmits()
+const showProp = {{ show }}
+const appear = {{ appear }}
+const duration = {{ duration }}
+const delay = {{ delay }}
+const enterClass = {{ enterClass }}
+const enterFromClass = {{ enterFromClass }}
+const enterToClass = {{ enterToClass }}
+const leaveClass = {{ leaveClass }}
+const leaveFromClass = {{ leaveFromClass }}
+const leaveToClass = {{ leaveToClass }}
+const extraClass = {{ extraClass }}
+
+const visible = state(showProp)
+const isEntering = state(appear && showProp)
+const isLeaving = state(false)
+const shouldRender = state(showProp)
+
+const transitionClass = derived(() => {
+  if (visible()) {
+    return isEntering() ? `${enterClass} ${enterFromClass}` : enterToClass
   }
-
-  requestAnimationFrame(checkTransition)
-
-  // Handle initial appear
-  if (appear && show && !hasAppeared) {
-    hasAppeared = true
-    isEntering = true
+  return isLeaving() ? `${leaveClass} ${leaveFromClass}` : leaveToClass
+})
+
+const componentClass = derived(() => `${transitionClass()} ${extraClass}`.trim())
+
+function setShow(next) {
+  if (next === visible()) return
+  if (next) {
+    emit('beforeEnter')
+    shouldRender.set(true)
+    visible.set(true)
+    isEntering.set(true)
+    setTimeout(() => emit('enter'), delay)
     setTimeout(() => {
-      isEntering = false
+      isEntering.set(false)
+      emit('afterEnter')
+    }, duration + delay)
+  }
+  else {
+    emit('beforeLeave')
+    visible.set(false)
+    isLeaving.set(true)
+    setTimeout(() => emit('leave'), delay)
+    setTimeout(() => {
+      isLeaving.set(false)
+      shouldRender.set(false)
+      emit('afterLeave')
     }, duration + delay)
   }
 }
+
+onMount(() => {
+  if (appear && showProp) {
+    setTimeout(() => isEntering.set(false), duration + delay)
+  }
+})
+
+defineExpose({ visible, setShow })
 </script>
+
+<div :show="shouldRender()" :class="componentClass()" style="{{ durationStyle }}">
+  <slot />
+</div>

package/src/ui/video/Video.stx

@@ -31,10 +31,10 @@ export const aspectRatioClass = aspectRatio === '16/9' ? 'aspect-video' : aspect
       class="{{ videoClasses }}"
       src="{{ src }}"
       poster="{{ poster }}"
-      controls="{{ controls }}"
-      autoplay="{{ autoplay }}"
-      loop="{{ loop }}"
-      muted="{{ muted }}"
+      @if(controls)controls@endif
+      @if(autoplay)autoplay@endif
+      @if(loop)loop@endif
+      @if(muted)muted@endif
       preload="{{ preload }}"
       width="{{ width }}"
       height="{{ height }}"

package/src/ui/virtual-list/VirtualList.stx

@@ -3,81 +3,65 @@ export const items = $props.items || []
 export const itemHeight = $props.itemHeight || 50
 export const height = $props.height || 400
 export const overscan = $props.overscan || 3
-export const renderItem = $props.renderItem
 export const className = $props.className || ''
 
-// Calculate visible range
-let scrollTop = 0
-const visibleCount = Math.ceil(height / itemHeight)
-const totalHeight = items.length * itemHeight
+export const totalHeight = items.length * itemHeight
+export const containerClasses = `overflow-auto ${className}`.trim()
+</script>
+
+<script client>
+const items = {{ items }}
+const itemHeight = {{ itemHeight }}
+const height = {{ height }}
+const overscan = {{ overscan }}
+
+const scrollTop = state(0)
 
-// Calculate start and end indices with overscan
-function getVisibleRange() {
-  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan)
-  const endIndex = Math.min(items.length - 1, Math.floor((scrollTop + height) / itemHeight) + overscan)
+const visibleRange = derived(() => {
+  const top = scrollTop()
+  const startIndex = Math.max(0, Math.floor(top / itemHeight) - overscan)
+  const endIndex = Math.min(items.length - 1, Math.floor((top + height) / itemHeight) + overscan)
   return { startIndex, endIndex }
-}
+})
 
-const { startIndex, endIndex } = getVisibleRange()
-const visibleItems = items.slice(startIndex, endIndex + 1)
-const offsetY = startIndex * itemHeight
+const visibleItems = derived(() => {
+  const { startIndex, endIndex } = visibleRange()
+  return items.slice(startIndex, endIndex + 1).map((item, i) => ({
+    item,
+    index: startIndex + i,
+    top: (startIndex + i) * itemHeight,
+  }))
+})
 
-// Handle scroll
-function handleScroll(event) {
+let ticking = false
+function onScroll(event) {
   const target = event.target
-  scrollTop = target.scrollTop
+  if (!ticking) {
+    requestAnimationFrame(() => {
+      scrollTop.set(target.scrollTop)
+      ticking = false
+    })
+    ticking = true
+  }
 }
 
-export const containerClasses = `overflow-auto ${className}`.trim()
-export const innerClasses = `relative`.trim()
-export const itemClasses = `absolute left-0 right-0`.trim()
+defineExpose({ scrollTop, scrollTo: (top) => scrollTop.set(top) })
 </script>
 
 <div
   class="{{ containerClasses }}"
   style="height: {{ height }}px"
-  onscroll="handleScroll(event)"
+  @scroll="onScroll($event)"
 >
-  <div
-    class="{{ innerClasses }}"
-    style="height: {{ totalHeight }}px"
-  >
-    @foreach(item in visibleItems)
-      <div
-        class="{{ itemClasses }}"
-        style="top: {{ (startIndex + $loop.index) * itemHeight }}px; height: {{ itemHeight }}px"
-        data-index="{{ startIndex + $loop.index }}"
-      >
-        @if(renderItem)
-          {!! renderItem(item, startIndex + $loop.index) !!}
-        @else
-          <slot item="{{ item }}" index="{{ startIndex + $loop.index }}" />
-        @endif
-      </div>
-    @endforeach
+  <div class="relative" style="height: {{ totalHeight }}px">
+    <div
+      :for="entry in visibleItems()"
+      :key="entry.index"
+      class="absolute left-0 right-0"
+      :style="`top: ${entry.top}px; height: {{ itemHeight }}px`"
+      :data-index="entry.index"
+    >
+      <slot :item="entry.item" :index="entry.index" />
+    </div>
   </div>
 </div>
-
-<script>
-// Re-render on scroll (simplified reactivity)
-if (typeof window !== 'undefined') {
-  let ticking = false
-
-  function updateVisibleItems() {
-    const range = getVisibleRange()
-    // Trigger re-render by updating visible range
-    // In a real implementation, this would update reactive state
-    ticking = false
-  }
-
-  const scrollContainer = document.querySelector('.overflow-auto')
-  if (scrollContainer) {
-    scrollContainer.addEventListener('scroll', () => {
-      if (!ticking) {
-        window.requestAnimationFrame(updateVisibleItems)
-        ticking = true
-      }
-    })
-  }
-}
-</script>

package/src/ui/virtual-table/VirtualTable.stx

@@ -9,45 +9,63 @@ export const striped = $props.striped || false
 export const hoverable = $props.hoverable ?? true
 export const className = $props.className || ''
 
-// Calculate visible range
-let scrollTop = 0
-const visibleCount = Math.ceil((height - headerHeight) / rowHeight)
-const totalHeight = data.length * rowHeight
+export const totalHeight = data.length * rowHeight
+export const containerClasses = `border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`.trim()
+export const headerClasses = `bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex`.trim()
+export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider`.trim()
+export const bodyClasses = `overflow-auto bg-white dark:bg-gray-900`.trim()
+export const rowClasses = `absolute left-0 right-0 flex border-b border-gray-200 dark:border-gray-700 ${hoverable ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : ''}`.trim()
+export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.trim()
+</script>
 
-function getVisibleRange() {
-  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
-  const endIndex = Math.min(data.length - 1, Math.floor((scrollTop + height - headerHeight) / rowHeight) + overscan)
-  return { startIndex, endIndex }
-}
+<script client>
+const data = {{ data }}
+const columns = {{ columns }}
+const rowHeight = {{ rowHeight }}
+const height = {{ height }}
+const headerHeight = {{ headerHeight }}
+const overscan = {{ overscan }}
+const striped = {{ striped }}
 
-const { startIndex, endIndex } = getVisibleRange()
-const visibleRows = data.slice(startIndex, endIndex + 1)
-const offsetY = startIndex * rowHeight
+const scrollTop = state(0)
 
-function handleScroll(event) {
-  const target = event.target
-  scrollTop = target.scrollTop
-}
+const visibleRows = derived(() => {
+  const top = scrollTop()
+  const startIndex = Math.max(0, Math.floor(top / rowHeight) - overscan)
+  const endIndex = Math.min(data.length - 1, Math.floor((top + height - headerHeight) / rowHeight) + overscan)
+  const out = []
+  for (let i = startIndex; i <= endIndex; i++) {
+    out.push({
+      row: data[i],
+      index: i,
+      top: i * rowHeight,
+      striped: striped && (i % 2 === 1),
+    })
+  }
+  return out
+})
 
-// Get cell value
 function getCellValue(row, column) {
-  if (column.render) {
-    return column.render(row[column.key], row)
-  }
+  if (column.render) return column.render(row[column.key], row)
   return row[column.key]
 }
 
-export const containerClasses = `border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`.trim()
-export const headerClasses = `bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex`.trim()
-export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider`.trim()
-export const bodyClasses = `overflow-auto bg-white dark:bg-gray-900`.trim()
-export const innerClasses = `relative`.trim()
-export const rowClasses = `absolute left-0 right-0 flex border-b border-gray-200 dark:border-gray-700 ${hoverable ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : ''}`.trim()
-export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.trim()
+let ticking = false
+function onScroll(event) {
+  const target = event.target
+  if (!ticking) {
+    requestAnimationFrame(() => {
+      scrollTop.set(target.scrollTop)
+      ticking = false
+    })
+    ticking = true
+  }
+}
+
+defineExpose({ scrollTop })
 </script>
 
 <div class="{{ containerClasses }}">
-  <!-- Header -->
   <div class="{{ headerClasses }}" style="height: {{ headerHeight }}px">
     @foreach(column in columns)
       <div
@@ -59,55 +77,27 @@ export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.
     @endforeach
   </div>
 
-  <!-- Body -->
   <div
     class="{{ bodyClasses }}"
     style="height: {{ height - headerHeight }}px"
-    onscroll="handleScroll(event)"
+    @scroll="onScroll($event)"
   >
-    <div
-      class="{{ innerClasses }}"
-      style="height: {{ totalHeight }}px"
-    >
-      @foreach(row in visibleRows)
+    <div class="relative" style="height: {{ totalHeight }}px">
+      <div
+        :for="entry in visibleRows()"
+        :key="entry.index"
+        :class="entry.striped ? '{{ rowClasses }} bg-gray-50 dark:bg-gray-800' : '{{ rowClasses }}'"
+        :style="`top: ${entry.top}px; height: {{ rowHeight }}px`"
+        :data-index="entry.index"
+      >
         <div
-          class="{{ rowClasses }} {{ striped && ($loop.index % 2 === 1) ? 'bg-gray-50 dark:bg-gray-800' : '' }}"
-          style="top: {{ (startIndex + $loop.index) * rowHeight }}px; height: {{ rowHeight }}px"
-          data-index="{{ startIndex + $loop.index }}"
-        >
-          @foreach(column in columns)
-            <div
-              class="{{ cellClasses }}"
-              style="flex: {{ column.width || 1 }}; min-width: {{ column.minWidth || 'auto' }}"
-            >
-              {!! getCellValue(row, column) !!}
-            </div>
-          @endforeach
-        </div>
-      @endforeach
+          :for="column in columns"
+          :key="column.key"
+          class="{{ cellClasses }}"
+          :style="`flex: ${column.width || 1}; min-width: ${column.minWidth || 'auto'}`"
+          x-html="getCellValue(entry.row, column)"
+        ></div>
+      </div>
     </div>
   </div>
 </div>
-
-<script>
-// Re-render on scroll (simplified reactivity)
-if (typeof window !== 'undefined') {
-  let ticking = false
-
-  function updateVisibleRows() {
-    const range = getVisibleRange()
-    // Trigger re-render
-    ticking = false
-  }
-
-  const bodyContainer = document.querySelector('.overflow-auto')
-  if (bodyContainer) {
-    bodyContainer.addEventListener('scroll', () => {
-      if (!ticking) {
-        window.requestAnimationFrame(updateVisibleRows)
-        ticking = true
-      }
-    })
-  }
-}
-</script>