@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/src/modules/fuzzyMatchLogic/autoCompleteFilter.ts

@@ -1,11 +1,16 @@
 import { Encoder, Index } from 'flexsearch'
-import { score } from './scoring'
+import { matchSorter } from 'match-sorter'
 import type {
   FuzzySearchContext,
   FuzzySearchIndex,
   FuzzySearchPrepareIndexParams,
   FuzzySearchReturnItem,
 } from './types'
+import { fixRuLayout, isRuLayout } from '~/modules/fuzzyMatchLogic/fixLayout'
+import {
+  enrichTokensForIndex,
+  tokenize,
+} from '~/modules/fuzzyMatchLogic/tokenize'
 
 export function makeFuzzySearchIndex(
   params: FuzzySearchPrepareIndexParams,
@@ -30,8 +35,12 @@ export function makeFuzzySearchIndex(
     encoder: encoder,
   })
   params.entries.forEach((entry, idx) => {
-    index.add(idx, entry.displayName || entry.slug)
-    // index.add(idx, enrichTokensForIndex(tokenize(entry.displayName || entry.slug)).join(' '))
+    const newLocal = [
+      ...enrichTokensForIndex(tokenize(entry.displayName)),
+      gluer(entry.displayName),
+    ].join(' ')
+    // index.add(idx, entry.displayName)
+    index.add(idx, newLocal)
   })
   return {
     flexIndex: index,
@@ -43,15 +52,79 @@ export function fuzzySearch(
   needle: string,
   context: FuzzySearchContext,
 ): Array<FuzzySearchReturnItem> {
-  const postFiltrationResults = context.index.flexIndex
-    .searchCache(needle)
-    .map((id) => {
-      return {
-        entry: context.index.entries[id as number]!,
-      }
+  const justDisplayName = context.index.entries
+
+  const attempt = (n: string) => {
+    const tokenizedNeedle = tokenize(n).join(' ')
+    const results = matchSorter(justDisplayName, tokenizedNeedle, {
+      keys: [(item) => tokenize(item.displayName).join(' ')],
+      sorter: (rankedItems) => {
+        return rankedItems.sort((a, b) => {
+          const aFirst = -1
+          const bFirst = 1
+          const { rank: aRank, keyIndex: aKeyIndex } = a
+          const { rank: bRank, keyIndex: bKeyIndex } = b
+          const same = aRank === bRank
+          if (same) {
+            if (aKeyIndex === bKeyIndex) {
+              const aFreq = context.freqGetter?.(a.item.slug) || 0
+              const bFreq = context.freqGetter?.(b.item.slug) || 0
+              if (aFreq === bFreq) {
+                return a.item.displayName.localeCompare(b.item.displayName)
+              }
+
+              return aFreq > bFreq ? aFirst : bFirst
+            } else {
+              return aKeyIndex < bKeyIndex ? aFirst : bFirst
+            }
+          } else {
+            return aRank > bRank ? aFirst : bFirst
+          }
+        })
+        // return sort(rankedItems, (rankedItem) => {
+        //   const { rank } = rankedItem
+        //   const freq = context.freqGetter?.(rankedItem.item.slug) || 0;
+        //   if (rank <= rankings.STARTS_WITH) {
+        //     // or worse
+        //     return ((10 - rank) * 10000 + freq * 1000 + rankedItem.index)
+        //   }
+        //   return ((10 - rank) * 100000 + rankedItem.index)
+        // }, true)
+      },
     })
+    return results.map((r) => ({ entry: r }))
+  }
 
-  // const tokenizedNeedle = tokenize(needle)
+  let lastAttempt = attempt(needle)
+  if (lastAttempt.length === 0 && isRuLayout(needle)) {
+    lastAttempt = attempt(fixRuLayout(needle))
+  }
+  return lastAttempt
+
+  // const attempt = (n: string) => {
+  //   const tokenizedNeedle = tokenize(n)
+  //   const postFiltrationResultsRaw = tokenizedNeedle.flatMap((t) =>
+  //     context.index.flexIndex.searchCache(t).map((id) => {
+  //       return {
+  //         id,
+  //         entry: context.index.entries[id as number]!,
+  //       }
+  //     }),
+  //   )
+
+  //   const postFiltrationResults = postFiltration(
+  //     unique(postFiltrationResultsRaw, (r) => r.id),
+  //     n,
+  //   )
+
+  //   return score(postFiltrationResults, n)
+  // }
+
+  // let lastAttempt = attempt(needle)
+  // if (lastAttempt.length === 0 && isRuLayout(needle)) {
+  //   lastAttempt = attempt(fixRuLayout(needle))
+  // }
+  // return lastAttempt
 
   // const foundTokensByRows = new Map<number, FuzzySearchPreliminaryResult>()
 
@@ -73,9 +146,11 @@ export function fuzzySearch(
 
   // const rawResults = [...foundTokensByRows.values()]
   // const postFiltrationResults = postFiltration(rawResults)
-  return score(postFiltrationResults, needle)
 }
 
+function gluer(displayName: string) {
+  return displayName.toLowerCase().replaceAll(/[^a-z0-9]/g, '')
+}
 // type IndexType = {
 //   title: string;
 //   titleOrig: string;

package/src/modules/fuzzyMatchLogic/features/positionBonus.ts

@@ -0,0 +1,29 @@
+export function positionBonus(
+  needle: string,
+  candidate: string,
+  positionDecayAlpha: number,
+): number {
+  if (needle.length === 0) {
+    return 0
+  }
+
+  const n = needle.toLowerCase()
+  const c = candidate.toLowerCase()
+
+  const idx = c.indexOf(n)
+  if (idx === -1) {
+    // Not a contiguous substring — no bonus.
+    return 0
+  }
+
+  // Prefer earlier matches exponentially.
+  // idx=0 -> 1, idx grows -> 0.
+  const early = Math.exp(-positionDecayAlpha * idx)
+
+  // Only use length as a gentle tie-breaker when the match starts at the same
+  // position (e.g., query "1" matches "env-1" and "env-001" at the same idx).
+  // This avoids reordering results for cases where position differs.
+  const lenFactor = 1 / (1 + Math.max(0, candidate.length - needle.length))
+
+  return early * lenFactor
+}

package/src/modules/fuzzyMatchLogic/features/prefixFracTokenMiddles.ts

@@ -9,7 +9,7 @@ export function prefixFracAcrossTokens(
 ): number {
   const entryTokens = tokenize(entry.displayName)
 
-  const scores = []
+  const scores: Array<number> = []
 
   for (let i = 0, j = 0; i < needleTokens.length && j < entryTokens.length; ) {
     const needleToken = needleTokens[i]!

package/src/modules/fuzzyMatchLogic/postFiltration.ts

@@ -1,5 +1,12 @@
 import { normalize } from './utils'
+import type { Id } from 'flexsearch'
 import type { FuzzySearchInputEntry } from './types'
+import { tokenize } from '~/modules/fuzzyMatchLogic/tokenize'
+
+export type FuzzySearchPostFilterRow = {
+  id: Id
+  entry: FuzzySearchInputEntry
+}
 
 export function isTokensConsequent(
   foundTokens: Array<string>,
@@ -23,6 +30,132 @@ export function isTokensConsequent(
   return foundTokens.length === 0
 }
 
+/**
+ * Post-filter + promote highest-intent matches for the current FlexSearch-based pipeline.
+ *
+ * Rules:
+ * - Always require a basic in-order match.
+ * - For multi-token queries, require exact token matches in-order (so standalone symbols like '#'
+ *   are respected).
+ * - Keep only rows with the maximum number of matched tokens (so "order #" prefers entries
+ *   containing both tokens over entries containing only "order").
+ */
+export function postFiltration(
+  raw: Array<FuzzySearchPostFilterRow>,
+  needle: string,
+): Array<FuzzySearchPostFilterRow> {
+  const needleTokenList = tokenize(needle)
+
+  function matchNeedleTokenAt(
+    entryTokens: Array<string>,
+    startIndex: number,
+    needleToken: string,
+  ): { ok: boolean; nextIndex: number } {
+    if (startIndex >= entryTokens.length) {
+      return { ok: false, nextIndex: startIndex }
+    }
+
+    let remaining = needleToken
+    let j = startIndex
+
+    while (j < entryTokens.length) {
+      const eTok = entryTokens[j]!
+
+      // Entry token fully covers the remaining needle token.
+      if (eTok.startsWith(remaining)) {
+        return { ok: true, nextIndex: j + 1 }
+      }
+
+      // Entry token can consume the next part of the needle token.
+      if (remaining.startsWith(eTok)) {
+        remaining = remaining.slice(eTok.length)
+        j++
+        if (remaining.length === 0) {
+          return { ok: true, nextIndex: j }
+        }
+        continue
+      }
+
+      // Mismatch: once we've started consuming, require consecutive tokens.
+      return { ok: false, nextIndex: startIndex }
+    }
+
+    return { ok: false, nextIndex: startIndex }
+  }
+
+  const passed: Array<FuzzySearchPostFilterRow & { tokenMatches: number }> = []
+
+  for (const row of raw) {
+    const entryTokenList = tokenize(row.entry.displayName)
+    entryTokenList.join('')
+
+    // Baseline filter:
+    // - multi-token query: require exact standalone-token matches in order
+    // - single-token query: allow character-in-order matching (permits env1 -> env-xxx-1)
+    let matchedTokens = 0
+    for (let i = 0, j = 0; i < needleTokenList.length; i++) {
+      const nTok = needleTokenList[i]!
+
+      let matchedThisNeedleToken = false
+      while (j < entryTokenList.length) {
+        const eTok = entryTokenList[j]!
+
+        if (eTok.startsWith(nTok)) {
+          matchedThisNeedleToken = true
+          matchedTokens++
+          j++
+          break
+        }
+
+        // Allow a single needle token (e.g. "abcdev") to be satisfied by multiple
+        // consecutive entry tokens (e.g. "abc" + "dev") by consuming them in order.
+        if (nTok.startsWith(eTok)) {
+          const res = matchNeedleTokenAt(entryTokenList, j, nTok)
+          if (res.ok) {
+            matchedThisNeedleToken = true
+            matchedTokens++
+            j = res.nextIndex
+            break
+          }
+        }
+
+        j++
+      }
+
+      if (!matchedThisNeedleToken) {
+        break
+      }
+    }
+    if (matchedTokens !== needleTokenList.length) {
+      continue
+    }
+
+    // Token coverage: count how many needle tokens match entry tokens in-order.
+    let matched = 0
+    for (
+      let i = 0, j = 0;
+      i < needleTokenList.length && j < entryTokenList.length;
+    ) {
+      const nTok = needleTokenList[i]!
+      const eTok = entryTokenList[j]!
+      if (eTok === nTok) {
+        matched++
+        i++
+        j++
+      } else {
+        j++
+      }
+    }
+
+    passed.push({ ...row, tokenMatches: matched })
+  }
+
+  const maxMatches = passed.reduce((acc, r) => Math.max(acc, r.tokenMatches), 0)
+  return passed
+    .filter((r) => r.tokenMatches === maxMatches)
+    .map(({ id, entry }) => ({ id, entry }))
+}
+
 // export function postFiltration(
 //   raw: Array<FuzzySearchPreliminaryResult>,
 // ): Array<FuzzySearchPreliminaryResult> {

package/src/modules/fuzzyMatchLogic/scoring.ts

@@ -1,3 +1,4 @@
+import { positionBonus } from './features/positionBonus'
 import { prefixFrac } from './features/prefixFrac'
 import type {
   FuzzySearchPreliminaryResult,
@@ -7,6 +8,10 @@ import type {
 const W = {
   prefixFrac: 1.3,
   prefixFracTokenMiddles: 0.1,
+  positionBonus: 0.08,
+  // How fast the bonus decays as the first match appears later in the string.
+  // Higher = harsher penalty for late matches.
+  positionDecayAlpha: 0.08,
 }
 
 export function score(
@@ -23,10 +28,11 @@ export function score(
     // const pfTokens = prefixFracTokenMiddles(entry, foundTokens)
 
     // const tc = tokenCoverage(qTokens, norm);
-    // const pb = positionBonus(q, norm, W.positionDecayAlpha);
+    const pb = positionBonus(needle, norm, W.positionDecayAlpha)
 
     let scoreValue = 0
     scoreValue += W.prefixFrac * pf
+    scoreValue += W.positionBonus * pb
 
     return { entry, score: scoreValue }
   })

package/src/modules/fuzzyMatchLogic/tokenize.ts

@@ -15,10 +15,21 @@ const TOKEN_SPLIT = new RegExp(
 )
 
 export function tokenize(str: string): Array<string> {
-  return str
+  // We mostly split on whitespace/punctuation/symbols, but we also want to keep
+  // certain standalone symbols (like '#') as their own tokens so queries like
+  // "order #" can specifically match entries containing "#".
+  const raw = str
     .split(TOKEN_SPLIT)
     .filter(Boolean)
     .map((s) => s.toLowerCase())
+
+  const symbolTokens = [...str]
+    .filter((c) => /[#]/.test(c))
+    .map((c) => c.toLowerCase())
+
+  // Preserve original ordering as best-effort by appending symbols; for our
+  // current use cases it’s enough that the symbol token exists.
+  return [...raw, ...symbolTokens]
 }
 
 export function enrichTokensForIndex(tokens: Array<string>): Array<string> {

package/src/modules/fuzzyMatchLogic/types.ts

@@ -7,6 +7,7 @@ export interface FuzzySearchInputEntry {
 
 export interface FuzzySearchContext {
   index: FuzzySearchIndex
+  freqGetter?: (slug: string) => number
 }
 
 export interface FuzzySearchIndex {

package/src/modules/gallery/Gallery.tsx

@@ -0,0 +1,317 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight, ImageOff, X } from 'lucide-react'
+import { clamp } from 'radashi'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+import { Button } from '~/ui/button'
+import { Spinner } from '~/ui/spinner'
+import { cn } from '~/lib/utils'
+
+export interface GalleryImage {
+  url: string
+  alt: string
+}
+
+export interface GalleryProps {
+  images: Array<GalleryImage>
+  initialIndex?: number
+  onIndexChange?: (index: number) => void
+  className?: string
+  title?: string
+}
+
+export function Gallery({
+  images,
+  initialIndex = 0,
+  onIndexChange,
+  className,
+  title,
+}: GalleryProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'center' })
+  const [currentIndex, setCurrentIndex] = useState(
+    clamp(initialIndex, 0, images.length - 1),
+  )
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [imageStates, setImageStates] = useState<
+    Record<number, 'loading' | 'loaded' | 'error'>
+  >(() => Object.fromEntries(images.map((_, i) => [i, 'loading'])))
+
+  // Reset image states when images array changes
+  useEffect(() => {
+    setImageStates(Object.fromEntries(images.map((_, i) => [i, 'loading'])))
+  }, [images])
+
+  // Stabilize onIndexChange callback with ref
+  const onIndexChangeRef = useRef(onIndexChange)
+  useEffect(() => {
+    onIndexChangeRef.current = onIndexChange
+  }, [onIndexChange])
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext()
+  }, [emblaApi])
+
+  // Sync current index with embla
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return
+    const index = emblaApi.selectedScrollSnap()
+    setCurrentIndex(index)
+    onIndexChangeRef.current?.(index)
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    onSelect()
+    emblaApi.on('select', onSelect)
+    return () => {
+      emblaApi.off('select', onSelect)
+    }
+  }, [emblaApi, onSelect])
+
+  // Scroll to initial index on mount only
+  useEffect(() => {
+    if (emblaApi && typeof initialIndex === 'number') {
+      emblaApi.scrollTo(initialIndex)
+    }
+  }, [emblaApi, initialIndex])
+
+  // Keyboard navigation
+  useHotkeys(
+    'left',
+    (e) => {
+      e.preventDefault()
+      scrollPrev()
+    },
+    {
+      enabled: images.length > 1,
+      enableOnFormTags: false,
+      preventDefault: true,
+    },
+    [scrollPrev, images.length],
+  )
+  useHotkeys(
+    'right',
+    (e) => {
+      e.preventDefault()
+      scrollNext()
+    },
+    {
+      enabled: images.length > 1,
+      enableOnFormTags: false,
+      preventDefault: true,
+    },
+    [scrollNext, images.length],
+  )
+  useHotkeys(
+    'escape',
+    (e) => {
+      if (isFullscreen) {
+        e.preventDefault()
+        setIsFullscreen(false)
+      }
+    },
+    { enabled: isFullscreen, enableOnFormTags: false, preventDefault: true },
+    [isFullscreen],
+  )
+
+  // Mouse wheel navigation with debouncing
+  useEffect(() => {
+    if (!emblaApi || images.length <= 1) return
+
+    const emblaNode = emblaApi.rootNode()
+
+    let isScrolling = false
+    let scrollTimeout: NodeJS.Timeout
+
+    const handleWheel = (event: WheelEvent) => {
+      // Prevent page scroll when wheeling over gallery
+      event.preventDefault()
+
+      // Skip if already scrolling (debounce)
+      if (isScrolling) return
+
+      // Determine scroll direction
+      const deltaY = event.deltaY
+      const deltaX = event.deltaX
+
+      // Use vertical scroll primarily, fall back to horizontal
+      const delta = Math.abs(deltaY) > Math.abs(deltaX) ? deltaY : deltaX
+
+      if (delta > 0) {
+        // Scroll down/right -> next slide
+        scrollNext()
+      } else if (delta < 0) {
+        // Scroll up/left -> previous slide
+        scrollPrev()
+      }
+
+      // Set cooldown period
+      isScrolling = true
+      clearTimeout(scrollTimeout)
+      scrollTimeout = setTimeout(() => {
+        isScrolling = false
+      }, 300) // 300ms cooldown
+    }
+
+    emblaNode.addEventListener('wheel', handleWheel, { passive: false })
+
+    return () => {
+      emblaNode.removeEventListener('wheel', handleWheel)
+      clearTimeout(scrollTimeout)
+    }
+  }, [emblaApi, scrollNext, scrollPrev, images.length])
+
+  const currentImage = images[currentIndex]
+
+  const handleImageLoad = (index: number) => {
+    setImageStates((prev) => ({ ...prev, [index]: 'loaded' }))
+  }
+
+  const handleImageError = (index: number) => {
+    setImageStates((prev) => ({ ...prev, [index]: 'error' }))
+  }
+
+  // Fullscreen mode
+  if (isFullscreen && currentImage) {
+    const imageState = imageStates[currentIndex]
+    return (
+      <div
+        className="fixed inset-0 z-50 bg-background"
+        role="dialog"
+        aria-label="Fullscreen view"
+      >
+        {imageState === 'error' ? (
+          <div className="flex h-screen w-screen items-center justify-center">
+            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+              <ImageOff className="size-12" />
+              <p className="text-sm">Failed to load image</p>
+            </div>
+          </div>
+        ) : (
+          <div className="h-full w-full overflow-auto p-2">
+            {imageState !== 'loaded' && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Spinner className="size-8" />
+              </div>
+            )}
+            <img
+              src={currentImage.url}
+              alt={currentImage.alt}
+              className="max-w-full h-auto"
+              onLoad={() => handleImageLoad(currentIndex)}
+              onError={() => handleImageError(currentIndex)}
+              style={{ opacity: imageState === 'loaded' ? 1 : 0 }}
+            />
+          </div>
+        )}
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setIsFullscreen(false)}
+          className="absolute top-4 right-4 z-10"
+          aria-label="Exit fullscreen"
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full flex-col min-h-0', className)}>
+      {/* Title Header */}
+      {title && (
+        <div className="px-6 py-4">
+          <h2 className="text-lg font-semibold">{title}</h2>
+        </div>
+      )}
+
+      {/* Carousel Viewport with Peek Effect */}
+      <div className="relative flex-1 min-h-0 overflow-hidden px-4">
+        <div ref={emblaRef} className="h-full overflow-hidden">
+          <div className="flex h-full gap-4">
+            {images.map((image, index) => {
+              const imageState = imageStates[index]
+              // Use 100% width for single image, 85% for multiple (peek effect)
+              const slideWidth = images.length === 1 ? '100%' : '85%'
+              return (
+                <div
+                  key={image.url}
+                  className={cn(
+                    'relative flex min-w-0 items-center justify-center transition-opacity duration-300 h-full',
+                    index !== currentIndex && 'opacity-40',
+                  )}
+                  style={{ flexBasis: slideWidth, flexShrink: 0, flexGrow: 0 }}
+                >
+                  {imageState === 'error' ? (
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <ImageOff className="size-12" />
+                      <p className="text-xs">Failed to load</p>
+                    </div>
+                  ) : (
+                    <>
+                      {imageState !== 'loaded' && (
+                        <div className="absolute inset-0 flex items-center justify-center">
+                          <Spinner className="size-8" />
+                        </div>
+                      )}
+                      <img
+                        src={image.url}
+                        alt={image.alt}
+                        className="max-w-full max-h-full w-auto h-auto object-contain cursor-pointer border border-border/30 rounded"
+                        onClick={() => {
+                          if (index !== currentIndex) {
+                            emblaApi?.scrollTo(index)
+                          }
+                        }}
+                        onLoad={() => handleImageLoad(index)}
+                        onError={() => handleImageError(index)}
+                        style={{ opacity: imageState === 'loaded' ? 1 : 0 }}
+                        role="button"
+                        aria-label={`Navigate to ${image.alt}`}
+                      />
+                    </>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Controls */}
+      <div className="flex items-center justify-center gap-4 py-4">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={scrollPrev}
+          disabled={images.length <= 1}
+          aria-label="Previous screenshot"
+          className="h-12 w-12"
+        >
+          <ChevronLeft className="h-12 w-12" />
+        </Button>
+
+        <div className="text-sm text-muted-foreground" aria-live="polite">
+          {currentIndex + 1} / {images.length}
+        </div>
+
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={scrollNext}
+          disabled={images.length <= 1}
+          aria-label="Next screenshot"
+          className="h-12 w-12"
+        >
+          <ChevronRight className="h-12 w-12" />
+        </Button>
+      </div>
+    </div>
+  )
+}