@mkbabb/glass-ui 0.3.0 → 2.1.0

package/src/components/custom/search/FuzzySearch.vue

@@ -1,589 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, nextTick } from "vue";
-import { Search, X, Maximize2, Minimize2 } from "lucide-vue-next";
-import { fuzzyMatch } from "./composables/fuzzySearchIndex";
-import type { FuzzySearchState, SearchableItem, SearchResult } from "./composables/types";
-
-const props = withDefaults(
-    defineProps<{
-        state: FuzzySearchState;
-        variant?: "sidebar" | "floating";
-        placeholder?: string;
-        typeLabel?: (item: SearchableItem) => string;
-    }>(),
-    {
-        variant: "sidebar",
-        placeholder: "Search\u2026",
-    },
-);
-
-const inputRef = ref<HTMLInputElement | null>(null);
-const resultsRef = ref<HTMLElement | null>(null);
-const modalInputRef = ref<HTMLInputElement | null>(null);
-
-// Scroll selected result into view
-watch(
-    () => props.state.selectedIndex.value,
-    () => {
-        nextTick(() => {
-            const container = props.state.isExpanded.value
-                ? document.querySelector(".fuzzy-search-modal-results")
-                : resultsRef.value;
-            const el = container?.querySelector(".is-selected");
-            el?.scrollIntoView({ block: "nearest" });
-        });
-    },
-);
-
-// Auto-focus input when opened
-watch(
-    () => props.state.isOpen.value,
-    (open) => {
-        if (open) nextTick(() => inputRef.value?.focus());
-    },
-);
-
-// Focus modal input when expanded
-watch(
-    () => props.state.isExpanded.value,
-    (expanded) => {
-        if (expanded) nextTick(() => modalInputRef.value?.focus());
-    },
-);
-
-function focus() {
-    inputRef.value?.focus();
-}
-
-defineExpose({ focus });
-
-function resultLabel(r: SearchResult): string {
-    return r.item.label || r.item.text.slice(0, 120);
-}
-
-function getTypeLabel(r: SearchResult): string {
-    if (props.typeLabel) return props.typeLabel(r.item);
-    return r.item.type ?? "";
-}
-
-/**
- * Highlight matched characters using fuzzy match indices.
- * Re-runs fuzzyMatch on the display label for precise positions.
- */
-function highlightFuzzy(text: string, query: string): string {
-    if (!query.trim() || !text) return escapeHtml(text);
-
-    const tokens = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
-    const textLc = text.toLowerCase();
-    const matchSet = new Set<number>();
-
-    for (const token of tokens) {
-        const m = fuzzyMatch(token, textLc);
-        if (m) {
-            for (const idx of m.matches) matchSet.add(idx);
-        }
-    }
-
-    if (matchSet.size === 0) return escapeHtml(text);
-
-    const chars = [...text];
-    const parts: string[] = [];
-    let i = 0;
-
-    while (i < chars.length) {
-        if (matchSet.has(i)) {
-            let j = i;
-            while (j < chars.length && matchSet.has(j)) j++;
-            parts.push(`<mark>${escapeHtml(chars.slice(i, j).join(""))}</mark>`);
-            i = j;
-        } else {
-            parts.push(escapeHtml(chars[i]));
-            i++;
-        }
-    }
-
-    return parts.join("");
-}
-
-function escapeHtml(s: string): string {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-</script>
-
-<template>
-    <div class="fuzzy-search" :class="`fuzzy-search--${variant}`">
-        <!-- Inline input -->
-        <div class="fuzzy-search-input-wrap">
-            <Search class="fuzzy-search-icon" />
-            <input
-                ref="inputRef"
-                type="text"
-                class="fuzzy-search-input"
-                :placeholder="placeholder"
-                :value="state.query.value"
-                @input="state.query.value = ($event.target as HTMLInputElement).value"
-                @keydown="state.onKeydown"
-                @focus="state.isOpen.value = true"
-            />
-            <button
-                v-if="state.query.value && state.results.value.length > 0"
-                class="fuzzy-search-action-btn"
-                @click="state.toggleExpanded()"
-                :title="state.isExpanded.value ? 'Collapse' : 'Expand'"
-            >
-                <Maximize2 v-if="!state.isExpanded.value" class="h-3 w-3" />
-                <Minimize2 v-else class="h-3 w-3" />
-            </button>
-            <button
-                v-if="state.query.value"
-                class="fuzzy-search-action-btn"
-                @click="state.close()"
-                title="Clear search"
-            >
-                <X class="h-3 w-3" />
-            </button>
-        </div>
-
-        <!-- Inline dropdown (non-expanded) -->
-        <Transition name="fuzzy-search-dropdown">
-            <div
-                v-if="state.isOpen.value && !state.isExpanded.value && state.results.value.length > 0"
-                ref="resultsRef"
-                class="fuzzy-search-results"
-            >
-                <button
-                    v-for="(r, i) in state.results.value"
-                    :key="`${r.item.id}-${r.item.type}-${i}`"
-                    class="fuzzy-search-result"
-                    :class="{ 'is-selected': i === state.selectedIndex.value }"
-                    @click="state.selectResult(r)"
-                    @mouseenter="state.selectedIndex.value = i"
-                >
-                    <span v-if="getTypeLabel(r)" class="fuzzy-search-badge" :data-type="r.item.type">
-                        {{ getTypeLabel(r) }}
-                    </span>
-                    <span
-                        class="fuzzy-search-label"
-                        v-html="highlightFuzzy(resultLabel(r), state.query.value)"
-                    />
-                </button>
-            </div>
-        </Transition>
-
-        <!-- Backdrop for inline dropdown (floating variant only) -->
-        <div
-            v-if="variant === 'floating' && state.isOpen.value && !state.isExpanded.value && state.results.value.length > 0"
-            class="fuzzy-search-backdrop"
-            @click="state.close()"
-        />
-
-        <!-- Expanded modal -->
-        <Teleport to="body">
-            <Transition name="fuzzy-search-modal">
-                <div
-                    v-if="state.isExpanded.value"
-                    class="fuzzy-search-modal-overlay"
-                    @click.self="state.toggleExpanded()"
-                >
-                    <div class="fuzzy-search-modal" @click.stop>
-                        <!-- Modal header -->
-                        <div class="fuzzy-search-modal-header">
-                            <Search class="fuzzy-search-modal-icon" />
-                            <input
-                                ref="modalInputRef"
-                                type="text"
-                                class="fuzzy-search-modal-input"
-                                :placeholder="placeholder"
-                                :value="state.query.value"
-                                @input="state.query.value = ($event.target as HTMLInputElement).value"
-                                @keydown="state.onKeydown"
-                            />
-                            <button
-                                class="fuzzy-search-action-btn"
-                                @click="state.toggleExpanded()"
-                                title="Collapse"
-                            >
-                                <Minimize2 class="h-3.5 w-3.5" />
-                            </button>
-                            <button
-                                class="fuzzy-search-action-btn"
-                                @click="state.close()"
-                                title="Close"
-                            >
-                                <X class="h-3.5 w-3.5" />
-                            </button>
-                        </div>
-
-                        <!-- Modal results -->
-                        <div class="fuzzy-search-modal-results" v-if="state.results.value.length > 0">
-                            <button
-                                v-for="(r, i) in state.results.value"
-                                :key="`modal-${r.item.id}-${r.item.type}-${i}`"
-                                class="fuzzy-search-result fuzzy-search-modal-result"
-                                :class="{ 'is-selected': i === state.selectedIndex.value }"
-                                @click="state.selectResult(r)"
-                                @mouseenter="state.selectedIndex.value = i"
-                            >
-                                <span v-if="getTypeLabel(r)" class="fuzzy-search-badge" :data-type="r.item.type">
-                                    {{ getTypeLabel(r) }}
-                                </span>
-                                <span
-                                    class="fuzzy-search-label"
-                                    v-html="highlightFuzzy(resultLabel(r), state.query.value)"
-                                />
-                            </button>
-                        </div>
-                        <div v-else class="fuzzy-search-modal-empty">
-                            No results
-                        </div>
-
-                        <!-- Modal footer -->
-                        <div class="fuzzy-search-modal-footer">
-                            <span class="fuzzy-search-modal-hint">
-                                <kbd>&uarr;</kbd><kbd>&darr;</kbd> navigate
-                            </span>
-                            <span class="fuzzy-search-modal-hint">
-                                <kbd>&crarr;</kbd> select
-                            </span>
-                            <span class="fuzzy-search-modal-hint">
-                                <kbd>esc</kbd> close
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </Transition>
-        </Teleport>
-    </div>
-</template>
-
-<style scoped>
-.fuzzy-search {
-    position: relative;
-}
-
-.fuzzy-search-input-wrap {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    border: 1.5px solid color-mix(in srgb, var(--border) 60%, transparent);
-    border-radius: var(--radius-pill);
-    background: color-mix(in srgb, var(--muted) 30%, transparent);
-    padding: 0.35rem 0.625rem;
-    transition:
-        border-color var(--duration-fast) var(--ease-standard),
-        background var(--duration-fast) var(--ease-standard),
-        box-shadow var(--duration-fast) var(--ease-standard);
-}
-
-.fuzzy-search-input-wrap:focus-within {
-    border-color: color-mix(in srgb, var(--ring) 40%, transparent);
-    background: var(--background);
-    box-shadow: var(--focus-ring-shadow);
-}
-
-.fuzzy-search-icon {
-    width: 0.8rem;
-    height: 0.8rem;
-    flex-shrink: 0;
-    color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
-}
-
-.fuzzy-search-input {
-    flex: 1;
-    min-width: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: 0.78rem;
-    color: var(--foreground);
-    font-family: inherit;
-}
-
-.fuzzy-search-input::placeholder {
-    color: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
-}
-
-.fuzzy-search-action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.15rem;
-    border: none;
-    background: none;
-    color: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
-    cursor: pointer;
-    border-radius: var(--radius-sm);
-    transition: color var(--duration-fast), background var(--duration-fast);
-}
-
-.fuzzy-search-action-btn:hover {
-    color: var(--foreground);
-    background: color-mix(in srgb, var(--muted) 50%, transparent);
-}
-
-/* ── Inline dropdown ───────────────────────────────────── */
-.fuzzy-search-results {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    right: 0;
-    z-index: var(--z-popover);
-    max-height: 50vh;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    background: color-mix(in srgb, var(--background) 97%, transparent);
-    backdrop-filter: blur(12px);
-    border: 1.5px solid var(--border);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-md);
-    padding: 0.25rem;
-}
-
-.fuzzy-search-result {
-    display: flex;
-    align-items: baseline;
-    gap: 0.375rem;
-    width: 100%;
-    padding: 0.35rem 0.5rem;
-    border: none;
-    background: none;
-    cursor: pointer;
-    text-align: left;
-    border-radius: var(--radius-sm);
-    transition: background var(--duration-instant) var(--ease-standard);
-}
-
-.fuzzy-search-result:hover,
-.fuzzy-search-result.is-selected {
-    background: color-mix(in srgb, var(--muted) 50%, transparent);
-}
-
-.fuzzy-search-badge {
-    flex-shrink: 0;
-    font-size: 0.6rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    padding: 0.1rem 0.3rem;
-    border-radius: var(--radius-sm);
-    background: var(--muted);
-    color: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
-    line-height: 1;
-}
-
-.fuzzy-search-label {
-    flex: 1;
-    min-width: 0;
-    font-size: 0.875rem;
-    color: color-mix(in srgb, var(--foreground) 85%, transparent);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1.4;
-}
-
-.fuzzy-search-label :deep(mark) {
-    background: hsl(50 100% 60% / 0.35);
-    color: inherit;
-    border-radius: var(--radius-sm);
-    padding: 0 1px;
-}
-
-.fuzzy-search-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: calc(var(--z-popover) - 5);
-}
-
-/* ── Sidebar variant ───────────────────────────────────── */
-.fuzzy-search--sidebar {
-    margin-bottom: 0.5rem;
-}
-
-/* ── Floating variant ──────────────────────────────────── */
-.fuzzy-search--floating .fuzzy-search-input-wrap {
-    border: none;
-    border-radius: 0;
-    background: transparent;
-    padding: 0;
-}
-
-.fuzzy-search--floating .fuzzy-search-input {
-    font-size: 1rem;
-}
-
-.fuzzy-search--floating .fuzzy-search-results {
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-    top: 100%;
-    max-height: 60vh;
-}
-
-/* ── Inline dropdown transition ────────────────────────── */
-.fuzzy-search-dropdown-enter-active,
-.fuzzy-search-dropdown-leave-active {
-    transition:
-        opacity var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-out-expo);
-}
-
-.fuzzy-search-dropdown-enter-from,
-.fuzzy-search-dropdown-leave-to {
-    opacity: 0;
-    transform: translateY(-4px);
-}
-
-/* ── Modal overlay + panel ─────────────────────────────── */
-.fuzzy-search-modal-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: var(--z-modal);
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: min(12vh, 6rem);
-    background: color-mix(in srgb, var(--background) 55%, transparent);
-    backdrop-filter: blur(6px);
-}
-
-.fuzzy-search-modal {
-    width: min(36rem, calc(100vw - 2rem));
-    max-height: 70vh;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--radius-xl);
-    border: 1.5px solid var(--border);
-    background: var(--background);
-    box-shadow: var(--shadow-xl);
-    overflow: hidden;
-}
-
-.fuzzy-search-modal-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 0.875rem;
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
-}
-
-.fuzzy-search-modal-icon {
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-    color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
-}
-
-.fuzzy-search-modal-input {
-    flex: 1;
-    min-width: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: 1rem;
-    color: var(--foreground);
-    font-family: inherit;
-}
-
-.fuzzy-search-modal-input::placeholder {
-    color: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
-}
-
-.fuzzy-search-modal-results {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    padding: 0.375rem;
-}
-
-.fuzzy-search-modal-result {
-    padding: 0.5rem 0.625rem;
-}
-
-.fuzzy-search-modal-result .fuzzy-search-badge {
-    font-size: 0.65rem;
-    padding: 0.125rem 0.375rem;
-}
-
-.fuzzy-search-modal-result .fuzzy-search-label {
-    font-size: 1rem;
-}
-
-.fuzzy-search-modal-empty {
-    padding: 2rem 1rem;
-    text-align: center;
-    color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
-    font-size: 1rem;
-}
-
-.fuzzy-search-modal-footer {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.5rem 0.875rem;
-    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
-}
-
-.fuzzy-search-modal-hint {
-    font-size: 0.875rem;
-    font-family: var(--font-mono, monospace);
-    color: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.fuzzy-search-modal-hint kbd {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.25rem;
-    height: 1.125rem;
-    padding: 0 0.25rem;
-    border-radius: var(--radius-sm);
-    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
-    background: color-mix(in srgb, var(--muted) 40%, transparent);
-    font-size: 0.6rem;
-    line-height: 1;
-}
-
-/* ── Modal transition ──────────────────────────────────── */
-.fuzzy-search-modal-enter-active {
-    transition: opacity 0.2s var(--ease-standard);
-}
-
-.fuzzy-search-modal-enter-active .fuzzy-search-modal {
-    transition:
-        opacity 0.2s var(--ease-standard),
-        transform 0.25s var(--ease-out-expo);
-}
-
-.fuzzy-search-modal-leave-active {
-    transition: opacity var(--duration-fast) var(--ease-standard);
-}
-
-.fuzzy-search-modal-leave-active .fuzzy-search-modal {
-    transition:
-        opacity var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-in);
-}
-
-.fuzzy-search-modal-enter-from {
-    opacity: 0;
-}
-
-.fuzzy-search-modal-enter-from .fuzzy-search-modal {
-    opacity: 0;
-    transform: scale(0.96) translateY(-8px);
-}
-
-.fuzzy-search-modal-leave-to {
-    opacity: 0;
-}
-
-.fuzzy-search-modal-leave-to .fuzzy-search-modal {
-    opacity: 0;
-    transform: scale(0.97) translateY(-4px);
-}
-</style>

package/src/components/custom/search/SearchBar.vue

@@ -1,44 +0,0 @@
-<template>
-    <component
-        :is="tag"
-        :class="cn('input-bar', $attrs.class as string)"
-    >
-        <component :is="icon ?? Search" class="w-3.5 h-3.5 text-muted-foreground shrink-0" />
-        <input
-            ref="inputRef"
-            :value="modelValue"
-            :placeholder="placeholder"
-            class="input-bar-field"
-            @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-        />
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { ref, type Component } from "vue";
-import { Search } from "lucide-vue-next";
-import { cn } from "../../../utils";
-
-const props = withDefaults(
-    defineProps<{
-        modelValue?: string;
-        placeholder?: string;
-        icon?: Component;
-        tag?: string;
-    }>(),
-    {
-        modelValue: "",
-        placeholder: "Search\u2026",
-        tag: "div",
-    },
-);
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string];
-}>();
-
-const inputRef = ref<HTMLInputElement | null>(null);
-
-defineExpose({ inputRef });
-</script>