@umbra.ui/core 0.2.0 → 0.4.0

package/dist/components/inputs/search/SearchOverlay.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import type { SearchOverlayResult } from "./types";
+import "./theme.css";
+import { MagnifierIcon, ChevronRightIcon } from "@umbra.ui/icons";
+
+const props = defineProps<{
+  modelValue: boolean;
+  query: string;
+  results: SearchOverlayResult[];
+  activeIndex: number;
+  showRecent: boolean;
+  recentLabel?: string;
+  searchLabel?: string;
+  resultsLabel?: string;
+  placeholder?: string;
+  recentEmptyLabel?: string;
+  resultsEmptyLabel?: string;
+  canLoadMore?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: boolean): void;
+  (event: "update:query", value: string): void;
+  (event: "update:activeIndex", value: number): void;
+  (event: "select", value: SearchOverlayResult): void;
+  (event: "load-more"): void;
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const resultsRef = ref<HTMLElement | null>(null);
+const shouldScrollToBottom = ref(false);
+
+const isOpen = computed(() => props.modelValue);
+const searchQuery = computed({
+  get: () => props.query,
+  set: (value) => emit("update:query", value),
+});
+
+const hasResults = computed(() => props.results.length > 0);
+
+const setActiveIndex = (index: number) => {
+  emit("update:activeIndex", index);
+};
+
+const closeOverlay = () => {
+  emit("update:modelValue", false);
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  // Keyboard control mirrors command-palette behavior.
+  if (event.key === "Escape") {
+    event.preventDefault();
+    closeOverlay();
+    return;
+  }
+
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    const maxIndex = props.results.length - 1;
+    if (maxIndex < 0) return;
+    emit("update:activeIndex", Math.min(props.activeIndex + 1, maxIndex));
+    return;
+  }
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    emit("update:activeIndex", Math.max(props.activeIndex - 1, 0));
+    return;
+  }
+
+  if (event.key === "Enter") {
+    event.preventDefault();
+    const result = props.results[props.activeIndex];
+    if (result) {
+      emit("select", result);
+    }
+  }
+};
+
+const focusInput = () => {
+  nextTick(() => {
+    inputRef.value?.focus();
+  });
+};
+
+watch(isOpen, (value) => {
+  if (value) {
+    focusInput();
+  }
+});
+
+watch(
+  () => props.results.length,
+  () => {
+    if (!shouldScrollToBottom.value) return;
+    nextTick(() => {
+      if (resultsRef.value) {
+        // Scroll to newly loaded results after "Load More".
+        resultsRef.value.scrollTo({
+          top: resultsRef.value.scrollHeight,
+          behavior: "smooth",
+        });
+      }
+      shouldScrollToBottom.value = false;
+    });
+  }
+);
+
+const handleLoadMoreClick = () => {
+  // Flag triggers scrolling once results are appended.
+  shouldScrollToBottom.value = true;
+  emit("load-more");
+};
+</script>
+
+<template>
+  <div :class="$style.container">
+    <Teleport to="body">
+      <Transition name="search-overlay">
+        <div v-if="isOpen" :class="$style.overlay" @click="closeOverlay">
+          <div :class="$style.panel" @click.stop>
+            <div
+              :class="[
+                $style.input_header,
+                hasResults && $style.input_header_filled,
+              ]"
+            >
+              <div :class="$style.input_row">
+                <MagnifierIcon size="16" />
+                <input
+                  ref="inputRef"
+                  v-model="searchQuery"
+                  type="text"
+                  :placeholder="placeholder || 'Type to search'"
+                  :class="[$style.input, 'body']"
+                  @keydown="handleKeydown"
+                />
+                <div :class="$style.esc_hint">ESC</div>
+              </div>
+            </div>
+
+            <div v-if="showRecent && hasResults" :class="$style.section_header">
+              <span class="subheadline">{{
+                recentLabel || "Recent Searches"
+              }}</span>
+            </div>
+            <div v-else-if="hasResults" :class="$style.section_header">
+              <span class="callout">
+                <span>Searching all notes for </span>
+                <span :class="$style.search_term"
+                  >"{{ searchQuery.trim() }}"</span
+                >
+              </span>
+              <span :class="['callout']">{{ resultsLabel }}</span>
+            </div>
+
+            <div
+              v-if="results.length > 0"
+              ref="resultsRef"
+              :class="$style.results"
+            >
+              <div
+                v-for="(result, index) in results"
+                :key="result.id"
+                @click="emit('select', result)"
+                @mouseenter="setActiveIndex(index)"
+              >
+                <slot
+                  name="result"
+                  :result="result"
+                  :query="searchQuery"
+                  :isActive="index === activeIndex"
+                />
+              </div>
+            </div>
+            <div v-else-if="!showRecent" :class="$style.empty_state">
+              <span>{{ resultsEmptyLabel || "No matches found." }}</span>
+            </div>
+
+            <button
+              v-if="canLoadMore"
+              type="button"
+              :class="$style.load_more"
+              @click="handleLoadMoreClick"
+            >
+              <span class="subheadline">Load More</span>
+              <ChevronRightIcon size="15" />
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  position: relative;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 3.529rem;
+  background-color: var(--search-overlay-bg);
+  backdrop-filter: var(--search-overlay-blur);
+  -webkit-backdrop-filter: var(--search-overlay-blur);
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.2s ease, backdrop-filter 0.25s ease;
+  z-index: 9000;
+}
+
+.panel {
+  width: min(44.118rem, 90vw);
+  background-color: var(--search-panel-bg);
+  border-radius: 0.706rem;
+  box-shadow: var(--search-panel-shadow);
+  overflow: hidden;
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+:global(.search-overlay-enter-active),
+:global(.search-overlay-leave-active) {
+  transition: opacity 0.2s ease, backdrop-filter 0.25s ease;
+}
+
+:global(.search-overlay-enter-from),
+:global(.search-overlay-leave-to) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:global(.search-overlay-enter-to),
+:global(.search-overlay-leave-from) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:global(.search-overlay-enter-active) .panel,
+:global(.search-overlay-leave-active) .panel {
+  transition: transform 0.25s ease, opacity 0.2s ease;
+}
+
+:global(.search-overlay-enter-from) .panel,
+:global(.search-overlay-leave-to) .panel {
+  transform: translateY(-0.588rem) scale(0.94);
+  opacity: 0;
+}
+
+:global(.search-overlay-enter-to) .panel,
+:global(.search-overlay-leave-from) .panel {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+.input_header {
+  background-color: var(--search-input-header-bg);
+  padding: 0.882rem;
+  transition: background-color 0.2s ease;
+}
+
+.input_header_filled {
+  background-color: var(--search-input-header-filled-bg);
+}
+.input_row {
+  display: flex;
+  align-items: center;
+  gap: 0.471rem;
+  padding: 0.471rem;
+  background-color: var(--search-input-row-bg);
+  border: var(--search-input-row-border);
+  border-radius: 0.471rem;
+  color: var(--search-input-text);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.input_row:has(.input:not(:placeholder-shown)) {
+  background-color: var(--search-input-filled-bg);
+  color: var(--search-input-filled-text);
+}
+
+.input_row:has(.input:not(:placeholder-shown)) .input {
+  color: var(--search-input-filled-text);
+}
+
+.input_row:has(.input:not(:placeholder-shown)) .esc_hint {
+  background-color: var(--search-esc-bg);
+  color: var(--search-esc-text);
+  border: var(--search-esc-border);
+}
+
+.input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--search-input-text);
+  font-size: 0.882rem;
+}
+
+.input::placeholder {
+  color: var(--search-input-placeholder);
+}
+
+.input:focus {
+  outline: none;
+}
+
+.esc_hint {
+  font-size: 0.706rem;
+  color: var(--search-esc-text);
+  border: var(--search-esc-border);
+  border-radius: 0.294rem;
+  padding: 0.235rem 0.471rem;
+  background-color: transparent;
+}
+
+.section_header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.471rem 0.941rem;
+  font-size: 0.706rem;
+  color: var(--search-subheader-text);
+  background-color: var(--search-subheader-bg);
+  border-top: 1px solid var(--search-subheader-border);
+  border-bottom: 1px solid var(--search-subheader-border);
+}
+
+.search_term {
+  color: var(--search-term-text);
+  font-weight: 700;
+  opacity: 1;
+}
+
+.results {
+  max-height: 30rem;
+  overflow-y: auto;
+}
+
+.results_label {
+  opacity: 0.5;
+}
+
+.empty_state {
+  padding: 1.176rem 0.941rem;
+  font-size: 0.824rem;
+  color: var(--search-nothing-text);
+}
+
+.load_more {
+  width: 100%;
+  padding: 0.706rem 0.941rem;
+  background: transparent;
+  background-color: var(--search-load-more-bg);
+  color: var(--search-load-more-text);
+  border: none;
+  border-top: 1px solid var(--search-subheader-border);
+  cursor: pointer;
+  font-size: 0.824rem;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 0.235rem;
+  transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+.load_more:hover {
+  color: var(--search-result-text);
+  background-color: var(--search-load-more-hover-bg);
+}
+</style>

package/dist/components/inputs/search/SearchResultCell.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { SearchOverlayResult, SearchPathSegment } from "./types";
+import "./theme.css";
+import { ChevronRightIcon } from "@umbra.ui/icons";
+
+const props = defineProps<{
+  result: SearchOverlayResult;
+  query: string;
+  isActive?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: "segment-click", value: SearchPathSegment): void;
+}>();
+
+type HighlightSegment = {
+  text: string;
+  isMatch: boolean;
+};
+
+const escapeRegExp = (value: string): string => {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
+// Lightweight markdown stripping to keep snippets readable in search.
+const stripMarkdown = (value: string): string => {
+  return value
+    .replace(/^#\s+.+\n?/m, "")
+    .replace(/^.+\n={3,}\n?/m, "")
+    .replace(/^#{1,6}\s+/gm, "")
+    .replace(/(\*\*|__)(.*?)\1/g, "$2")
+    .replace(/(\*|_)(.*?)\1/g, "$2")
+    .replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1")
+    .replace(/!\[([^\]]*)\]\([^\)]+\)/g, "")
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/```[\s\S]*?```/g, "")
+    .replace(/^>\s+/gm, "")
+    .replace(/^[-*_]{3,}$/gm, "")
+    .replace(/^[\s]*[-*+]\s+/gm, "")
+    .replace(/^[\s]*\d+\.\s+/gm, "")
+    .replace(/\n\s*\n/g, "\n")
+    .trim();
+};
+
+const getTerms = (value: string): string[] => {
+  return value
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .map((term) => term.trim())
+    .filter(Boolean);
+};
+
+// Highlight segments preserve match visibility after markdown stripping.
+const buildHighlightSegments = (
+  text: string,
+  query: string
+): HighlightSegment[] => {
+  const terms = getTerms(query);
+  if (terms.length === 0) {
+    return [{ text, isMatch: false }];
+  }
+
+  const pattern = terms.map((term) => escapeRegExp(term)).join("|");
+  const matcher = new RegExp(`(${pattern})`, "ig");
+  const parts = text.split(matcher);
+
+  return parts
+    .filter((part) => part.length > 0)
+    .map((part) => ({
+      text: part,
+      isMatch: terms.some((term) => part.toLowerCase() === term),
+    }));
+};
+
+const titleSegments = computed(() => {
+  return buildHighlightSegments(stripMarkdown(props.result.title), props.query);
+});
+
+const excerptSegments = computed(() => {
+  return buildHighlightSegments(
+    stripMarkdown(props.result.excerpt),
+    props.query
+  );
+});
+
+// Prefer structured path segments when available for click targets.
+const pathSegments = computed(() => {
+  if (props.result.pathSegments.length > 0) {
+    return props.result.pathSegments;
+  }
+  return props.result.path
+    .split(" > ")
+    .map((part, index) => ({
+      id: `${part}-${index}`,
+      type: "collection" as const,
+      title: part.trim(),
+    }))
+    .filter((segment) => segment.title.length > 0);
+});
+
+const handleSegmentClick = (segment: SearchPathSegment) => {
+  emit("segment-click", segment);
+};
+</script>
+
+<template>
+  <div :class="[$style.container, isActive && $style.container_active]">
+    <div :class="[$style.path, 'subheadline']">
+      <template v-for="(segment, index) in pathSegments" :key="segment.id">
+        <button
+          type="button"
+          :class="$style.path_segment"
+          @click.stop="handleSegmentClick(segment)"
+        >
+          {{ segment.title }}
+        </button>
+        <ChevronRightIcon v-if="index < pathSegments.length - 1" size="12" />
+      </template>
+    </div>
+    <div :class="[$style.title, 'headline']">
+      <span
+        v-for="(segment, index) in titleSegments"
+        :key="`${segment.text}-${index}`"
+        :class="segment.isMatch ? $style.highlight : undefined"
+      >
+        {{ segment.text }}
+      </span>
+    </div>
+    <div v-if="result.excerpt" :class="[$style.excerpt, 'body']">
+      <span
+        v-for="(segment, index) in excerptSegments"
+        :key="`${segment.text}-${index}`"
+        :class="segment.isMatch ? $style.highlight : undefined"
+      >
+        {{ segment.text }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  padding: 0.882rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.235rem;
+  cursor: default;
+  background-color: var(--search-result-bg);
+  border-bottom: 1px solid var(--search-result-border);
+  color: var(--search-result-text);
+}
+
+.container_active {
+  background-color: var(--search-result-active-bg);
+}
+
+.path {
+  display: flex;
+  align-items: center;
+  gap: 0.235rem;
+  color: var(--search-result-secondary-text);
+  opacity: 0.5;
+}
+
+.path_segment {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+}
+
+.path_segment:hover {
+  color: var(--search-path-hover-text);
+  text-decoration-color: var(--search-path-hover-underline);
+}
+
+.title {
+  opacity: 1;
+  color: var(--search-result-text);
+}
+
+.excerpt {
+  opacity: 0.7;
+  color: var(--search-result-text);
+}
+
+.highlight {
+  background-color: var(--search-highlight-bg);
+  color: var(--search-highlight-text);
+  padding-left: 0.118rem;
+  padding-right: 0.118rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-radius: 0.176rem;
+}
+</style>

package/dist/components/inputs/search/theme.css

@@ -50,7 +50,7 @@
     0.1
   ); /* blackA6 - border for light mode */
   --search-result-text: #1f2937; /* gray8 - dark text for light mode */
-  --search-result-secondary-text: #6b7280; /* gray5 - secondary text for light mode */
+  --search-result-secondary-text: #1f2937; /* match text for opacity rules */
 
   /* SearchResults icon colors */
   --search-icon-bg: #f3f4f6; /* gray1 - light background for light mode */
@@ -97,6 +97,31 @@
     0,
     0.1
   ); /* blackA8 - lighter overlay for light mode */
+  --search-overlay-blur: blur(8px);
+
+  /* SearchOverlay panel colors */
+  --search-panel-bg: #ffffff;
+  --search-panel-shadow: 0 0.824rem 1.765rem rgba(0, 0, 0, 0.1);
+
+  /* SearchOverlay input colors */
+  --search-input-header-bg: #ffffff;
+  --search-input-header-filled-bg: #f9fafb;
+  --search-input-row-bg: #ffffff;
+  --search-input-row-border: 1px solid #d9d9d9;
+  --search-input-text: #1f2937;
+  --search-input-placeholder: #6b7280;
+  --search-input-filled-bg: #f3f4f6;
+  --search-input-filled-text: #111827;
+  --search-esc-bg: rgba(0, 0, 0, 0.08);
+  --search-esc-text: #6b7280;
+  --search-esc-border: 1px solid rgba(0, 0, 0, 0.12);
+
+  /* SearchOverlay result cell colors */
+  --search-result-active-bg: rgba(0, 0, 0, 0.05);
+  --search-path-hover-text: #1f2937;
+  --search-path-hover-underline: rgba(0, 0, 0, 0.4);
+  --search-highlight-text: #111111;
+  --search-term-text: #1f2937;
 }
 
 /* Dark theme */
@@ -128,9 +153,14 @@
   ); /* Original dark mode value */
 
   /* SearchResults subheader colors */
-  --search-subheader-bg: #5a5a5a; /* Original dark mode value */
-  --search-subheader-border: rgba(0, 0, 0, 0.25); /* Original dark mode value */
-  --search-subheader-text: #eeeeee; /* Original dark mode value */
+  --search-subheader-bg: #606060; /* Updated dark mode value */
+  --search-subheader-border: rgba(
+    255,
+    255,
+    255,
+    0.15
+  ); /* Updated dark mode value */
+  --search-subheader-text: #b4b4b4; /* Updated dark mode value */
 
   /* SearchResults result colors */
   --search-result-bg: #484848; /* Original dark mode value */
@@ -146,8 +176,8 @@
     255,
     0.12
   ); /* Original dark mode value */
-  --search-result-text: #eeeeee; /* Original dark mode value */
-  --search-result-secondary-text: #b4b4b4; /* Original dark mode value */
+  --search-result-text: #ffffff; /* Updated dark mode value */
+  --search-result-secondary-text: #ffffff; /* Updated dark mode value */
 
   /* SearchResults icon colors */
   --search-icon-bg: #48484a; /* Original dark mode value */
@@ -165,23 +195,38 @@
   --search-nothing-text: #eeeeee; /* Original dark mode value */
 
   /* SearchResults load more colors */
-  --search-load-more-bg: rgba(
-    255,
-    255,
-    255,
-    0.1
-  ); /* Original dark mode value */
-  --search-load-more-hover-bg: rgba(
-    255,
-    255,
-    255,
-    0.1
-  ); /* Original dark mode value */
-  --search-load-more-text: #eeeeee; /* Original dark mode value */
+  --search-load-more-bg: #606060; /* Updated dark mode value */
+  --search-load-more-hover-bg: #6e6e6e; /* Updated dark mode value */
+  --search-load-more-text: #b4b4b4; /* Updated dark mode value */
 
   /* SearchResults highlight colors */
-  --search-highlight-bg: rgba(255, 214, 10, 0.5); /* Original dark mode value */
+  --search-highlight-bg: #f6eeb4; /* Updated dark mode value */
 
   /* SearchResults overlay colors */
-  --search-overlay-bg: rgba(0, 0, 0, 0.7); /* Original dark mode value */
+  --search-overlay-bg: rgba(17, 17, 17, 0.6); /* Updated dark mode value */
+  --search-overlay-blur: blur(10px);
+
+  /* SearchOverlay panel colors */
+  --search-panel-bg: #3a3a3a; /* Updated dark mode value */
+  --search-panel-shadow: 0 0.824rem 1.765rem rgba(0, 0, 0, 0.4);
+
+  /* SearchOverlay input colors */
+  --search-input-header-bg: #484848;
+  --search-input-header-filled-bg: #606060;
+  --search-input-row-bg: #4a4a4a;
+  --search-input-row-border: 1px solid #ffffff;
+  --search-input-text: #ffffff;
+  --search-input-placeholder: #b4b4b4;
+  --search-input-filled-bg: #b4b4b4;
+  --search-input-filled-text: #000000;
+  --search-esc-bg: #7b7b7b;
+  --search-esc-text: #ffffff;
+  --search-esc-border: 1px solid #6e6e6e;
+
+  /* SearchOverlay result cell colors */
+  --search-result-active-bg: rgba(255, 255, 255, 0.12);
+  --search-path-hover-text: #ffffff;
+  --search-path-hover-underline: rgba(255, 255, 255, 0.7);
+  --search-highlight-text: #111111;
+  --search-term-text: #ffffff;
 }