@wyxos/vibe 1.6.29 → 2.0.2

package/src/archive/App.vue

@@ -1,96 +0,0 @@
-<!--<script setup>-->
-<!--import InfiniteMasonry from "./components/InfiniteMasonry.vue";-->
-<!--import {nextTick, onMounted, ref} from "vue";-->
-<!--import pages from './pages.json'-->
-
-<!--const scrollDetails = ref({-->
-<!--  position: 0,-->
-<!--  direction: 'down',-->
-<!--  isEnd: false,-->
-<!--  isStart: true,-->
-<!--  hasShortColumn: false,-->
-<!--});-->
-
-<!--const items = ref([]);-->
-
-<!--const count = ref(30);-->
-
-<!--const scroller = ref();-->
-
-<!--const pageIndex = ref(0);-->
-
-<!--const isLoading = ref(false);-->
-
-<!--const updateItems = (action) => {-->
-<!--  setTimeout(async () => {-->
-<!--    if (action === 'add') {-->
-<!--      if(items.value.length > 3){-->
-<!--        // remove the first page from items-->
-<!--        items.value.splice(0, 1);-->
-<!--      }-->
-
-<!--      items.value.push(pages[pageIndex.value]);-->
-
-<!--      pageIndex.value = pageIndex.value + 1;-->
-
-<!--      await nextTick()-->
-
-<!--      isLoading.value = false;-->
-<!--    } else {-->
-<!--      items.value.splice(-count.value);-->
-
-<!--      isLoading.value = false;-->
-<!--    }-->
-<!--  }, 1000)-->
-<!--}-->
-
-<!--const onScroll = (attributes) => {-->
-<!--  scrollDetails.value = attributes-->
-
-<!--  if (autoLoad.value && attributes.hasShortColumn && !isLoading.value) {-->
-<!--    isLoading.value = true;-->
-
-<!--    updateItems('add');-->
-<!--  }-->
-<!--}-->
-
-<!--const autoLoad = ref(true);-->
-
-<!--onMounted(async () => {-->
-<!--  setTimeout(() => {-->
-<!--    items.value = [pages[pageIndex.value]]-->
-
-<!--    pageIndex.value = pageIndex.value + 1;-->
-<!--  }, 2000)-->
-<!--})-->
-<!--</script>-->
-
-<!--<template>-->
-<!--  <main class="flex flex-col items-center p-4 bg-slate-100 h-screen overflow-hidden">-->
-<!--    <header class="sticky top-0 z-10 bg-slate-100 w-full p-4 flex flex-col items-center gap-4">-->
-<!--      <h1 class="text-2xl font-semibold mb-4">Vue Infinite Masonry</h1>-->
-
-<!--      <p class="text-sm text-gray-500 text-center mb-4">-->
-<!--        🚀 Built by <a href="https://wyxos.com" target="_blank" class="underline hover:text-black">wyxos.com</a> •-->
-<!--        💾 <a href="https://github.com/wyxos/vue-infinite-masonry" target="_blank" class="underline hover:text-black">Source on GitHub</a>-->
-<!--      </p>-->
-
-<!--      <div class="flex flex-col md:flex-row gap-4 items-center">-->
-<!--        <p>Scroll {{ scrollDetails }}</p>-->
-
-<!--        <p>Page: {{ pageIndex }}</p>-->
-
-<!--        <p>Pages in array {{ items.length }}</p>-->
-
-<!--      </div>-->
-<!--    </header>-->
-
-
-<!--    <infinite-masonry-->
-<!--        ref="scroller"-->
-<!--        v-model="items"-->
-<!--        @scroll="onScroll"-->
-<!--        :options="{ gutterY: 50 }"-->
-<!--    />-->
-<!--  </main>-->
-<!--</template>-->

package/src/archive/InfiniteMansonry.spec.ts

@@ -1,10 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { describe, it, expect } from 'vitest'
-
-describe('Example Test', () => {
-  it('should pass a basic truthiness check', () => {
-    expect(true).toBe(true)
-  })
-})

package/src/archive/InfiniteMasonry.vue

@@ -1,218 +0,0 @@
-<script setup>
-import {computed, nextTick, onMounted, onUnmounted, ref, watchEffect} from "vue";
-
-const scrollPosition = ref(0);
-const scrollDirection = ref('down');
-
-const defaultOptions = {
-  sizes: {
-    1: {min: 0,},
-    2: {min: 401,},
-    4: {min: 801,},
-    6: {min: 1201,},
-    8: {min: 1601,},
-    10: {min: 2001,},
-  },
-  gutterX: 10,
-  gutterY: 10,
-  cellPadding: {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  }
-};
-
-const mergedOptions = computed(() => ({
-  ...defaultOptions,
-  ...props.options,
-  sizes: props.options?.sizes ?? defaultOptions.sizes
-}));
-
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    required: true
-  },
-  options: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const columnsCount = ref(7);
-
-const internalColumnHeights = ref([]);
-
-const maximumHeight = computed(() => Math.max(...internalColumnHeights.value));
-
-const container = ref(null);
-
-const layouts = ref([]); // contains { id, top, left, width, height, src }
-
-watchEffect(() => {
-  if (!container.value) return;
-
-  const scrollbarWidth = getScrollbarWidth(); // ← add this
-  const containerWidth = container.value.offsetWidth - scrollbarWidth;
-  const totalGutterX = (columnsCount.value - 1) * mergedOptions.value.gutterX;
-  const colWidth = Math.floor((containerWidth - totalGutterX) / columnsCount.value);
-  const colHeights = Array(columnsCount.value).fill(0);
-
-  const flatItems = props.modelValue.flatMap(p => p.items);
-  layouts.value = flatItems.map((item, index) => {
-    const columnIndex = index % columnsCount.value;
-    const scaledHeight = Math.round((item.height / item.width) * colWidth);
-    const top = colHeights[columnIndex];
-    const left = columnIndex * (colWidth + mergedOptions.value.gutterX);
-
-    // update cumulative column height
-    colHeights[columnIndex] += scaledHeight + mergedOptions.value.gutterY;
-
-    return {
-      ...item,
-      width: colWidth,
-      height: scaledHeight,
-      top,
-      left
-    };
-  });
-
-  internalColumnHeights.value = colHeights;
-});
-
-const visibleItems = computed(() => {
-  const scroll = scrollPosition.value;
-  const viewHeight = container.value?.offsetHeight || 0;
-
-  return layouts.value.filter(item => {
-    return (
-        item.top + item.height >= scroll - 200 &&
-        item.top <= scroll + viewHeight + 200
-    );
-  });
-});
-
-const getScrollbarWidth = () => {
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.overflow = 'scroll';
-  outer.style.msOverflowStyle = 'scrollbar'; // for IE
-  outer.style.position = 'absolute';
-  outer.style.top = '-9999px';
-  outer.style.width = '100px';
-  document.body.appendChild(outer);
-
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-
-  document.body.removeChild(outer);
-  return scrollbarWidth;
-};
-
-const emit = defineEmits(['update:modelValue', 'scroll']);
-
-const onScroll = () => {
-  const el = container.value;
-  if (!el) return;
-
-  const scroll = el.scrollTop;
-  const viewHeight = el.clientHeight;
-  const contentHeight = el.scrollHeight;
-
-  const threshold = 50; // pixels from bottom (you can tweak this)
-
-  scrollDirection.value = scroll > scrollPosition.value ? 'down' : 'up';
-  scrollPosition.value = scroll;
-
-  const isEnd = scroll + viewHeight >= contentHeight - threshold;
-  const isStart = scroll <= threshold;
-
-  const viewportBottom = scroll + viewHeight;
-  const hasShortColumn = internalColumnHeights.value.some(height => height < viewportBottom - 50);
-
-  emit('scroll', {
-    position: scroll,
-    direction: scrollDirection.value,
-    isEnd,
-    isStart,
-    hasShortColumn
-  });
-};
-
-const onResize = () => {
-  const scrollbarWidth = getScrollbarWidth();
-  const containerWidth = container.value.offsetWidth - scrollbarWidth;
-  columnsCount.value = 0;
-
-  const sizes = mergedOptions.value.sizes;
-
-  const sortedSizes = Object.entries(sizes).sort(
-      (a, b) => a[1].min - b[1].min
-  );
-
-  for (const [columns, { min }] of sortedSizes) {
-    if (containerWidth >= min) {
-      columnsCount.value = Number(columns);
-    }
-  }
-};
-
-const getCellPosition = (item) => {
-  return {
-    top: item.top + 'px',
-    left: item.left + 'px',
-    width: item.width + 'px',
-    height: item.height + 'px'
-  }
-}
-
-const remove = () => {
-
-}
-
-const restore = () => {
-
-}
-
-defineExpose({
-  remove,
-  restore
-})
-
-onMounted(async () => {
-  await nextTick(); // wait for DOM to render and size
-  onResize(); // now has proper width
-  container.value?.addEventListener('scroll', onScroll);
-  window.addEventListener('resize', onResize);
-});
-
-onUnmounted(() => {
-  if (container.value) {
-    container.value.removeEventListener('scroll', onScroll);
-  }
-
-  window.removeEventListener('resize', onResize);
-})
-</script>
-
-<template>
-  <div ref="container" class="overflow-auto flex-1 h-full w-full">
-    <div :style="{ height: `${maximumHeight}px` }" class="relative w-full">
-      <template v-for="item in visibleItems" :key="item.id">
-        <slot name="cell" :item="item" :get-cell-position="getCellPosition">
-          <div
-              class="absolute bg-slate-200 rounded-lg shadow-lg"
-              :style="getCellPosition(item)"
-          >
-            <img :src="item.src" class="w-full h-auto"/>
-          </div>
-        </slot>
-      </template>
-    </div>
-  </div>
-</template>

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/calculateLayout.ts

@@ -1,194 +0,0 @@
-import type {LayoutOptions, MasonryItem, ProcessedMasonryItem} from './types'
-
-let __cachedScrollbarWidth: number | null = null
-
-function getScrollbarWidth(): number {
-    if (__cachedScrollbarWidth != null) return __cachedScrollbarWidth
-    const div = document.createElement('div')
-    div.style.visibility = 'hidden'
-    div.style.overflow = 'scroll'
-    ;(div.style as any).msOverflowStyle = 'scrollbar'
-    div.style.width = '100px'
-    div.style.height = '100px'
-    document.body.appendChild(div)
-
-    const inner = document.createElement('div')
-    inner.style.width = '100%'
-    div.appendChild(inner)
-
-    const scrollbarWidth = div.offsetWidth - inner.offsetWidth
-    document.body.removeChild(div)
-    __cachedScrollbarWidth = scrollbarWidth
-    return scrollbarWidth
-}
-
-export default function calculateLayout(
-    items: MasonryItem[],
-    container: HTMLElement,
-    columnCount: number,
-    options: LayoutOptions = {}
-): ProcessedMasonryItem[] {
-    const {
-        gutterX = 0,
-        gutterY = 0,
-        header = 0,
-        footer = 0,
-        paddingLeft = 0,
-        paddingRight = 0,
-        sizes = {
-            base: 1,
-            sm: 2,
-            md: 3,
-            lg: 4,
-            xl: 5,
-            '2xl': 6
-        },
-        placement = 'masonry'
-    } = options
-
-    let cssPaddingLeft = 0
-    let cssPaddingRight = 0
-    try {
-        if (container && container.nodeType === 1 && typeof window !== 'undefined' && window.getComputedStyle) {
-            const styles = window.getComputedStyle(container)
-            cssPaddingLeft = parseFloat(styles.paddingLeft) || 0
-            cssPaddingRight = parseFloat(styles.paddingRight) || 0
-        }
-    } catch {
-        // noop
-    }
-
-    const effectivePaddingLeft = (paddingLeft || 0) + cssPaddingLeft
-    const effectivePaddingRight = (paddingRight || 0) + cssPaddingRight
-
-    const measuredScrollbarWidth = container.offsetWidth - container.clientWidth
-    const scrollbarWidth = measuredScrollbarWidth > 0 ? measuredScrollbarWidth + 2 : getScrollbarWidth() + 2
-
-    const usableWidth = container.offsetWidth - scrollbarWidth - effectivePaddingLeft - effectivePaddingRight
-    const totalGutterX = gutterX * (columnCount - 1)
-    const columnWidth = Math.floor((usableWidth - totalGutterX) / columnCount)
-
-    const baseHeights = items.map((item) => {
-        const originalWidth = item.width
-        const originalHeight = item.height
-        const imageHeight = Math.round((columnWidth * originalHeight) / originalWidth)
-        return imageHeight + footer + header
-    })
-
-    if (placement === 'sequential-balanced') {
-        const n = baseHeights.length
-        if (n === 0) return []
-
-        const addWithGutter = (currentSum: number, itemsInGroup: number, nextHeight: number) => {
-            return currentSum + (itemsInGroup > 0 ? gutterY : 0) + nextHeight
-        }
-
-        let low = Math.max(...baseHeights)
-        let high = baseHeights.reduce((sum, h) => sum + h, 0) + gutterY * Math.max(0, n - 1)
-
-        const canPartition = (cap: number) => {
-            let groups = 1
-            let sum = 0
-            let count = 0
-            for (let i = 0; i < n; i++) {
-                const h = baseHeights[i]
-                const next = addWithGutter(sum, count, h)
-                if (next <= cap) {
-                    sum = next
-                    count++
-                } else {
-                    groups++
-                    sum = h
-                    count = 1
-                    if (h > cap) return false
-                    if (groups > columnCount) return false
-                }
-            }
-            return groups <= columnCount
-        }
-
-        while (low < high) {
-            const mid = Math.floor((low + high) / 2)
-            if (canPartition(mid)) high = mid
-            else low = mid + 1
-        }
-        const cap = high
-
-        const starts = new Array<number>(columnCount).fill(0)
-        let groupIndex = columnCount - 1
-        let sum = 0
-        let count = 0
-        for (let i = n - 1; i >= 0; i--) {
-            const h = baseHeights[i]
-            const needAtLeast = i < groupIndex
-            const canFit = addWithGutter(sum, count, h) <= cap
-            if (!canFit || needAtLeast) {
-                starts[groupIndex] = i + 1
-                groupIndex--
-                sum = h
-                count = 1
-            } else {
-                sum = addWithGutter(sum, count, h)
-                count++
-            }
-        }
-        starts[0] = 0
-
-        const processedItems: ProcessedMasonryItem[] = []
-        const tops = new Array<number>(columnCount).fill(0)
-        for (let col = 0; col < columnCount; col++) {
-            const start = starts[col]
-            const end = col + 1 < columnCount ? starts[col + 1] : n
-            const left = col * (columnWidth + gutterX)
-            for (let i = start; i < end; i++) {
-                const item = items[i]
-                const newItem: ProcessedMasonryItem = {
-                    ...(item as any),
-                    columnWidth,
-                    imageHeight: 0,
-                    columnHeight: 0,
-                    left: 0,
-                    top: 0
-                }
-                newItem.imageHeight = baseHeights[i] - (footer + header)
-                newItem.columnHeight = baseHeights[i]
-                newItem.left = left
-                newItem.top = tops[col]
-                tops[col] += newItem.columnHeight + (i + 1 < end ? gutterY : 0)
-                processedItems.push(newItem)
-            }
-        }
-        return processedItems
-    }
-
-    const columnHeights = new Array<number>(columnCount).fill(0)
-    const processedItems: ProcessedMasonryItem[] = []
-
-    for (let index = 0; index < items.length; index++) {
-        const item = items[index]
-        const newItem: ProcessedMasonryItem = {
-            ...(item as any),
-            columnWidth: 0,
-            imageHeight: 0,
-            columnHeight: 0,
-            left: 0,
-            top: 0
-        }
-
-        const col = columnHeights.indexOf(Math.min(...columnHeights))
-        const originalWidth = item.width
-        const originalHeight = item.height
-
-        newItem.columnWidth = columnWidth
-        newItem.left = col * (columnWidth + gutterX)
-        newItem.imageHeight = Math.round((columnWidth * originalHeight) / originalWidth)
-        newItem.columnHeight = newItem.imageHeight + footer + header
-        newItem.top = columnHeights[col]
-
-        columnHeights[col] += newItem.columnHeight + gutterY
-
-        processedItems.push(newItem)
-    }
-
-    return processedItems
-}

package/src/components/CodeTabs.vue

@@ -1,158 +0,0 @@
-<template>
-  <div class="bg-slate-900 rounded-lg overflow-hidden shadow-xl">
-    <!-- Tabs -->
-    <div class="flex items-center gap-1 bg-slate-800/50 px-4 py-2 border-b border-slate-700">
-      <button
-        v-for="tab in tabs"
-        :key="tab"
-        @click="activeTab = tab"
-        class="px-4 py-2 text-sm font-medium rounded-md transition-colors"
-        :class="activeTab === tab 
-          ? 'bg-slate-700 text-white' 
-          : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'"
-      >
-        {{ tab.toUpperCase() }}
-      </button>
-      <div class="flex-1"></div>
-      <button
-        @click="copyCode"
-        class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors flex items-center gap-2"
-        :title="copied ? 'Copied!' : 'Copy code'"
-      >
-        <i :class="copied ? 'fas fa-check' : 'fas fa-copy'"></i>
-        <span>{{ copied ? 'Copied' : 'Copy' }}</span>
-      </button>
-    </div>
-
-    <!-- Code Content -->
-    <div class="relative">
-      <pre class="p-4 overflow-x-auto text-sm"><code :class="`language-${activeTab} hljs`" v-html="highlightedCode"></code></pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import hljs from 'highlight.js/lib/core'
-import javascript from 'highlight.js/lib/languages/javascript'
-import xml from 'highlight.js/lib/languages/xml'
-import css from 'highlight.js/lib/languages/css'
-import 'highlight.js/styles/tokyo-night-dark.css'
-
-// Register languages
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('js', javascript)
-hljs.registerLanguage('xml', xml)
-hljs.registerLanguage('html', xml)
-hljs.registerLanguage('vue', xml) // Vue uses XML/HTML highlighting
-hljs.registerLanguage('css', css)
-
-const props = defineProps<{
-  html?: string
-  js?: string
-  vue?: string
-  css?: string
-}>()
-
-const activeTab = ref<'html' | 'js' | 'vue' | 'css'>('vue')
-const copied = ref(false)
-
-const tabs = computed(() => {
-  const available: ('html' | 'js' | 'vue' | 'css')[] = []
-  if (props.html) available.push('html')
-  if (props.js) available.push('js')
-  if (props.vue) available.push('vue')
-  if (props.css) available.push('css')
-  return available
-})
-
-const currentCode = computed(() => {
-  switch (activeTab.value) {
-    case 'html': return props.html || ''
-    case 'js': return props.js || ''
-    case 'vue': return props.vue || ''
-    case 'css': return props.css || ''
-  }
-})
-
-const highlightedCode = computed(() => {
-  if (!currentCode.value) return ''
-  
-  try {
-    // Map tab names to highlight.js language names
-    const langMap: Record<string, string> = {
-      'vue': 'xml',
-      'html': 'xml',
-      'js': 'javascript',
-      'css': 'css'
-    }
-    
-    const lang = langMap[activeTab.value] || activeTab.value
-    const result = hljs.highlight(currentCode.value, { language: lang })
-    return result.value
-  } catch (error) {
-    console.error('Highlighting error:', error)
-    return escapeHtml(currentCode.value)
-  }
-})
-
-function escapeHtml(text: string): string {
-  const div = document.createElement('div')
-  div.textContent = text
-  return div.innerHTML
-}
-
-async function copyCode() {
-  try {
-    await navigator.clipboard.writeText(currentCode.value)
-    copied.value = true
-    setTimeout(() => {
-      copied.value = false
-    }, 2000)
-  } catch (err) {
-    console.error('Failed to copy:', err)
-  }
-}
-
-// Set initial tab to first available
-watch(() => tabs.value, (newTabs) => {
-  if (newTabs.length > 0 && !newTabs.includes(activeTab.value)) {
-    activeTab.value = newTabs[0]
-  }
-}, { immediate: true })
-</script>
-
-<style scoped>
-code {
-  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
-  line-height: 1.6;
-}
-
-pre {
-  max-height: 500px;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-
-pre code {
-  display: block;
-}
-
-pre::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-pre::-webkit-scrollbar-track {
-  background: #1e293b;
-}
-
-pre::-webkit-scrollbar-thumb {
-  background: #475569;
-  border-radius: 4px;
-}
-
-pre::-webkit-scrollbar-thumb:hover {
-  background: #64748b;
-}
-</style>