From 7c975b55396201ea4b7a82e219b38e0f647d3ccc Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sat, 26 Sep 2026 21:30:41 +0100
Subject: [PATCH 1/4] feat: Add a table and a command search

Two pieces both products were about to write twice. A table, because a question
asked of sixty rows is a column rather than sixty cards. A command search,
because navigation answers where a screen is and people are looking for a thing.

Neither knows what a skill or a review is: the application hands them rows and
groups.
---
 README.md                        |   4 +-
 src/components/CommandSearch.vue | 228 +++++++++++++++++++++++++++++++
 src/components/Table.vue         |  86 ++++++++++++
 src/index.js                     |   2 +
 4 files changed, 318 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CommandSearch.vue
 create mode 100644 src/components/Table.vue

diff --git a/README.md b/README.md
index 76e967c..c3a5e02 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,8 @@ notices the two products no longer look like one.
 ## What is in it, and what is not
 
 Tokens, and the pieces a screen is assembled from: `Avatar`, `Badge`, `Button`,
-`Card`, `Field`, `Input`, `ItemCard`, `Logo`, `Modal`, `PageHead`, `Select`,
-`Tabs`, `Textarea`, and `CodeGraph`.
+`Card`, `CommandSearch`, `Field`, `Input`, `ItemCard`, `Logo`, `Modal`,
+`PageHead`, `Select`, `Table`, `Tabs`, `Textarea`, and `CodeGraph`. `src/index.js` is the list that is actually true.
 
 Nothing that knows what a workspace, a review or a proposal is. Those belong to
 whichever application has them, and a package that grew to hold them would be
diff --git a/src/components/CommandSearch.vue b/src/components/CommandSearch.vue
new file mode 100644
index 0000000..b565bed
--- /dev/null
+++ b/src/components/CommandSearch.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { ArrowUpRight, Loader2, Search, X } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+/**
+ * One field that finds anything, opened from the keyboard.
+ *
+ * Navigation answers "where is that screen". This answers "where is that
+ * thing", which is the question somebody actually has, and the answer is
+ * usually not on the screen they are looking at.
+ *
+ * What the results are is the application's business: it is handed groups of
+ * them, already narrowed, so it can ask a server or filter what it holds. This
+ * owns the field, the keys and the list, because those were written out by hand
+ * in every product that had a search.
+ */
+
+export interface CommandSearchItem {
+  id: string
+  label: string
+  /** A second line, for what the label alone leaves ambiguous. */
+  detail?: string
+}
+
+export interface CommandSearchGroup {
+  id: string
+  label: string
+  items: CommandSearchItem[]
+}
+
+const props = withDefaults(defineProps<{
+  /** The query, so the application can narrow or ask for results itself. */
+  modelValue?: string
+  groups?: CommandSearchGroup[]
+  open?: boolean
+  /** Said above the results, for where the search is looking. */
+  context?: string
+  placeholder?: string
+  /** Waiting on somebody else's answer. */
+  loading?: boolean
+  emptyLabel?: string
+  label?: string
+  class?: string
+}>(), {
+  modelValue: '',
+  groups: () => [],
+  open: false,
+  placeholder: 'Search',
+  loading: false,
+  emptyLabel: 'No matches. Try another name or phrase.',
+  label: 'Search',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+  'update:open': [boolean]
+  select: [CommandSearchItem, string]
+}>()
+
+const active = ref(0)
+const root = ref<HTMLElement>()
+const field = ref<HTMLInputElement>()
+const trigger = ref<HTMLButtonElement>()
+
+// One list under the headings, because the keys move through what is drawn
+// rather than through the shape it is drawn in.
+const flat = computed(() =>
+  props.groups.flatMap(group => group.items.map(item => ({ item, group: group.id }))),
+)
+
+watch(() => props.modelValue, () => { active.value = 0 })
+watch(flat, () => { active.value = Math.min(active.value, Math.max(0, flat.value.length - 1)) })
+watch(() => props.open, async (open) => {
+  if (open) {
+    await nextTick()
+    field.value?.focus()
+  } else {
+    await nextTick()
+    trigger.value?.focus()
+  }
+})
+
+function move(delta: number) {
+  if (flat.value.length) active.value = (active.value + delta + flat.value.length) % flat.value.length
+}
+
+function choose(index = active.value) {
+  const chosen = flat.value[index]
+  if (!chosen) return
+  emit('select', chosen.item, chosen.group)
+  emit('update:open', false)
+}
+
+function indexOf(group: CommandSearchGroup, item: CommandSearchItem) {
+  return flat.value.findIndex(one => one.group === group.id && one.item.id === item.id)
+}
+
+function shortcut(event: KeyboardEvent) {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+    event.preventDefault()
+    emit('update:open', !props.open)
+  }
+}
+
+function outside(event: MouseEvent) {
+  if (props.open && root.value && !event.composedPath().includes(root.value)) {
+    emit('update:open', false)
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', shortcut)
+  document.addEventListener('click', outside, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', shortcut)
+  document.removeEventListener('click', outside, true)
+})
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="cn(
+      'z-50',
+      open
+        ? 'absolute left-1/2 top-1/2 w-[calc(100%-1rem)] max-w-xl -translate-x-1/2 -translate-y-1/2'
+        : 'shrink-0',
+      props.class,
+    )"
+  >
+    <button
+      v-if="!open"
+      ref="trigger"
+      type="button"
+      class="relative rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40"
+      :aria-label="label"
+      title="Search (Ctrl / ⌘ K)"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      @click.stop="$emit('update:open', true)"
+    >
+      <Search class="h-4 w-4" />
+      <span v-if="modelValue" class="absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-primary" />
+    </button>
+
+    <div v-else class="rounded-lg border bg-card shadow-lg">
+      <div class="flex items-center gap-2 px-3">
+        <Loader2 v-if="loading" class="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+        <Search v-else class="h-4 w-4 shrink-0 text-muted-foreground" />
+        <input
+          ref="field"
+          :value="modelValue"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-controls="command-search-results"
+          :aria-expanded="open"
+          :aria-activedescendant="flat.length ? `command-search-${active}` : undefined"
+          :aria-label="label"
+          :placeholder="placeholder"
+          class="h-10 min-w-0 flex-1 bg-transparent text-sm outline-none"
+          @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+          @keydown.down.prevent="move(1)"
+          @keydown.up.prevent="move(-1)"
+          @keydown.enter.prevent="choose()"
+          @keydown.esc.stop.prevent="$emit('update:open', false)"
+        >
+        <button
+          type="button"
+          aria-label="Close search"
+          class="rounded p-1 text-muted-foreground hover:bg-muted"
+          @click="$emit('update:open', false)"
+        >
+          <X class="h-4 w-4" />
+        </button>
+      </div>
+
+      <div class="absolute left-0 right-0 top-full mt-1 overflow-hidden rounded-lg border bg-card shadow-lg">
+        <p v-if="context" class="border-b px-3 py-2 text-xs text-muted-foreground">{{ context }}</p>
+        <ul
+          id="command-search-results"
+          role="listbox"
+          :aria-label="label"
+          class="max-h-[60vh] overflow-y-auto py-1"
+        >
+          <template v-for="group in groups" :key="group.id">
+            <li
+              v-if="group.items.length"
+              role="presentation"
+              class="px-3 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
+            >
+              {{ group.label }}
+            </li>
+            <li
+              v-for="item in group.items"
+              :id="`command-search-${indexOf(group, item)}`"
+              :key="`${group.id}:${item.id}`"
+              role="option"
+              :aria-selected="indexOf(group, item) === active"
+            >
+              <button
+                type="button"
+                tabindex="-1"
+                class="flex w-full items-center gap-3 px-3 py-2 text-left text-sm"
+                :class="indexOf(group, item) === active ? 'bg-muted' : 'hover:bg-muted/50'"
+                @mouseenter="active = indexOf(group, item)"
+                @mousedown.prevent
+                @click="choose(indexOf(group, item))"
+              >
+                <span class="min-w-0 flex-1">
+                  <span class="block truncate">{{ item.label }}</span>
+                  <span v-if="item.detail" class="block truncate text-xs text-muted-foreground">
+                    {{ item.detail }}
+                  </span>
+                </span>
+                <ArrowUpRight class="h-3 w-3 shrink-0 text-muted-foreground" />
+              </button>
+            </li>
+          </template>
+        </ul>
+        <p v-if="!flat.length && !loading" role="status" class="px-3 py-5 text-sm text-muted-foreground">
+          {{ emptyLabel }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 0000000..2dd343d
--- /dev/null
+++ b/src/components/Table.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils'
+
+/**
+ * Rows of the same shape, read down a column.
+ *
+ * A card says everything about one thing. A table says one thing about
+ * everything, which is the question somebody asks of sixty skills or a hundred
+ * files: which of these is set to never, which of them nobody has read yet. In
+ * cards that answer is scattered down the page; in a column it is one glance.
+ *
+ * Cells are slots named after their column, so what a value looks like stays
+ * with the application that knows what it means.
+ */
+
+export interface TableColumn {
+  id: string
+  label: string
+  /** Numbers and controls read better against their own edge. */
+  align?: 'left' | 'right'
+  /** Held to a width, for a column whose content would otherwise set it. */
+  width?: string
+  /** Dropped on a narrow screen, where every column cannot fit. */
+  narrow?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  columns: TableColumn[]
+  rows: Record<string, unknown>[]
+  /** What makes a row itself, so redrawing does not shuffle them. */
+  rowKey?: string | ((row: Record<string, unknown>, index: number) => string)
+  /** A name for whoever is not looking at it. */
+  label?: string
+  /** Tighter rows, for a list somebody scans rather than reads. */
+  dense?: boolean
+  class?: string
+}>(), { rowKey: 'id', dense: false })
+
+const keyOf = (row: Record<string, unknown>, index: number) =>
+  typeof props.rowKey === 'function' ? props.rowKey(row, index) : String(row[props.rowKey] ?? index)
+</script>
+
+<template>
+  <div :class="cn('w-full overflow-x-auto rounded-lg border', props.class)">
+    <table class="w-full border-collapse text-sm">
+      <caption v-if="label" class="sr-only">{{ label }}</caption>
+      <thead>
+        <tr class="border-b bg-muted/30">
+          <th
+            v-for="column in columns"
+            :key="column.id"
+            scope="col"
+            :style="column.width ? { width: column.width } : undefined"
+            :class="cn(
+              'px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground',
+              column.align === 'right' ? 'text-right' : 'text-left',
+              column.narrow && 'hidden sm:table-cell',
+            )"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(row, index) in rows"
+          :key="keyOf(row, index)"
+          class="border-b last:border-0 transition-colors hover:bg-muted/40"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.id"
+            :class="cn(
+              'px-3 align-middle',
+              dense ? 'py-1.5' : 'py-2.5',
+              column.align === 'right' ? 'text-right' : 'text-left',
+              column.narrow && 'hidden sm:table-cell',
+            )"
+          >
+            <slot :name="column.id" :row="row" :index="index">{{ row[column.id] }}</slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/src/index.js b/src/index.js
index 200d570..cab4e6e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,12 +10,14 @@ export { default as Badge } from './components/Badge.vue'
 export { default as Button } from './components/Button.vue'
 export { default as Card } from './components/Card.vue'
 export { default as CodeGraph } from './components/CodeGraph.vue'
+export { default as CommandSearch } from './components/CommandSearch.vue'
 export { default as Field } from './components/Field.vue'
 export { default as Input } from './components/Input.vue'
 export { default as ItemCard } from './components/ItemCard.vue'
 export { default as PageHead } from './components/PageHead.vue'
 export { default as Select } from './components/Select.vue'
 export { default as SearchableSelect } from './components/SearchableSelect.vue'
+export { default as Table } from './components/Table.vue'
 export { default as Tabs } from './components/Tabs.vue'
 export { default as Textarea } from './components/Textarea.vue'
 export { default as ListInput } from './components/ListInput.vue'

From 180f8eb1181ad254c34f4006e25fdc07bf27d106 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sat, 26 Sep 2026 22:14:05 +0100
Subject: [PATCH 2/4] fix: Run the table at the density every other table runs
 at

---
 src/components/Table.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index 2dd343d..74aadf9 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -52,7 +52,7 @@ const keyOf = (row: Record<string, unknown>, index: number) =>
             scope="col"
             :style="column.width ? { width: column.width } : undefined"
             :class="cn(
-              'px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground',
+              'px-2.5 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground',
               column.align === 'right' ? 'text-right' : 'text-left',
               column.narrow && 'hidden sm:table-cell',
             )"
@@ -71,8 +71,8 @@ const keyOf = (row: Record<string, unknown>, index: number) =>
             v-for="column in columns"
             :key="column.id"
             :class="cn(
-              'px-3 align-middle',
-              dense ? 'py-1.5' : 'py-2.5',
+              'px-2.5 align-middle',
+              dense ? 'py-1' : 'py-1.5',
               column.align === 'right' ? 'text-right' : 'text-left',
               column.narrow && 'hidden sm:table-cell',
             )"

From 069a5333820f71dd995a3280f09fa1275267c961 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 10:58:45 +0100
Subject: [PATCH 3/4] docs(release): Prepare 0.3.0

---
 CHANGELOG.md | 14 ++++++++++++++
 package.json |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ad331d..0965212 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-09-27
+
+Two pieces both products were about to write twice. Everything from 0.2.0 keeps
+working unchanged.
+
+### Added
+
+- `Table`, because a question asked of sixty rows is a column rather than sixty
+  cards. Cells are slots named after their column, so what a value looks like
+  stays with the application that knows what it means
+- `CommandSearch`, the field that finds anything, opened from the keyboard. It
+  owns the field, the keys and the list; the application hands it groups of
+  results it has already narrowed
+
 ## [0.2.0] - 2026-09-01
 
 The components the dashboard kept for itself, so both surfaces can share one
diff --git a/package.json b/package.json
index 6f6d932..b386cc1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sourceant/design",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "SourceAnt design system: tokens, primitives, and the graph renderer",
   "license": "MIT",
   "type": "module",

From 1a403b636a89429423cbcb530a85213bd94fc08c Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 17:11:45 +0100
Subject: [PATCH 4/4] refactor: Rename CommandSearch to GlobalSearch

It is a global search, not a command palette. Both new components lost the
paragraphs explaining why they exist.
---
 CHANGELOG.md                                  | 12 +++----
 README.md                                     |  4 +--
 .../{CommandSearch.vue => GlobalSearch.vue}   | 33 ++++++++-----------
 src/components/Table.vue                      |  5 ---
 src/index.js                                  |  2 +-
 5 files changed, 20 insertions(+), 36 deletions(-)
 rename src/components/{CommandSearch.vue => GlobalSearch.vue} (86%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0965212..f0ba3b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,17 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.3.0] - 2026-09-27
 
-Two pieces both products were about to write twice. Everything from 0.2.0 keeps
-working unchanged.
+Everything from 0.2.0 keeps working unchanged.
 
 ### Added
 
-- `Table`, because a question asked of sixty rows is a column rather than sixty
-  cards. Cells are slots named after their column, so what a value looks like
-  stays with the application that knows what it means
-- `CommandSearch`, the field that finds anything, opened from the keyboard. It
-  owns the field, the keys and the list; the application hands it groups of
-  results it has already narrowed
+- `Table`, with cells as slots named after their column
+- `GlobalSearch`, a search field opened with Ctrl or Cmd K, handed groups of
+  results the application has already narrowed
 
 ## [0.2.0] - 2026-09-01
 
diff --git a/README.md b/README.md
index c3a5e02..abca897 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,8 @@ notices the two products no longer look like one.
 ## What is in it, and what is not
 
 Tokens, and the pieces a screen is assembled from: `Avatar`, `Badge`, `Button`,
-`Card`, `CommandSearch`, `Field`, `Input`, `ItemCard`, `Logo`, `Modal`,
-`PageHead`, `Select`, `Table`, `Tabs`, `Textarea`, and `CodeGraph`. `src/index.js` is the list that is actually true.
+`Card`, `Field`, `Input`, `ItemCard`, `Logo`, `Modal`,
+`GlobalSearch`, `PageHead`, `Select`, `Table`, `Tabs`, `Textarea`, and `CodeGraph`. `src/index.js` is the list that is actually true.
 
 Nothing that knows what a workspace, a review or a proposal is. Those belong to
 whichever application has them, and a package that grew to hold them would be
diff --git a/src/components/CommandSearch.vue b/src/components/GlobalSearch.vue
similarity index 86%
rename from src/components/CommandSearch.vue
rename to src/components/GlobalSearch.vue
index b565bed..fa8c543 100644
--- a/src/components/CommandSearch.vue
+++ b/src/components/GlobalSearch.vue
@@ -3,36 +3,29 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { ArrowUpRight, Loader2, Search, X } from 'lucide-vue-next'
 import { cn } from '../lib/utils'
 
-/**
- * One field that finds anything, opened from the keyboard.
+/** One field that finds anything, opened with Ctrl or Cmd K.
  *
- * Navigation answers "where is that screen". This answers "where is that
- * thing", which is the question somebody actually has, and the answer is
- * usually not on the screen they are looking at.
- *
- * What the results are is the application's business: it is handed groups of
- * them, already narrowed, so it can ask a server or filter what it holds. This
- * owns the field, the keys and the list, because those were written out by hand
- * in every product that had a search.
+ * Results are handed in, already narrowed, so the application decides what is
+ * searchable. This owns the field, the keys and the list.
  */
 
-export interface CommandSearchItem {
+export interface GlobalSearchItem {
   id: string
   label: string
   /** A second line, for what the label alone leaves ambiguous. */
   detail?: string
 }
 
-export interface CommandSearchGroup {
+export interface GlobalSearchGroup {
   id: string
   label: string
-  items: CommandSearchItem[]
+  items: GlobalSearchItem[]
 }
 
 const props = withDefaults(defineProps<{
   /** The query, so the application can narrow or ask for results itself. */
   modelValue?: string
-  groups?: CommandSearchGroup[]
+  groups?: GlobalSearchGroup[]
   open?: boolean
   /** Said above the results, for where the search is looking. */
   context?: string
@@ -55,7 +48,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
   'update:modelValue': [string]
   'update:open': [boolean]
-  select: [CommandSearchItem, string]
+  select: [GlobalSearchItem, string]
 }>()
 
 const active = ref(0)
@@ -92,7 +85,7 @@ function choose(index = active.value) {
   emit('update:open', false)
 }
 
-function indexOf(group: CommandSearchGroup, item: CommandSearchItem) {
+function indexOf(group: GlobalSearchGroup, item: GlobalSearchItem) {
   return flat.value.findIndex(one => one.group === group.id && one.item.id === item.id)
 }
 
@@ -154,9 +147,9 @@ onUnmounted(() => {
           :value="modelValue"
           role="combobox"
           aria-autocomplete="list"
-          aria-controls="command-search-results"
+          aria-controls="global-search-results"
           :aria-expanded="open"
-          :aria-activedescendant="flat.length ? `command-search-${active}` : undefined"
+          :aria-activedescendant="flat.length ? `global-search-${active}` : undefined"
           :aria-label="label"
           :placeholder="placeholder"
           class="h-10 min-w-0 flex-1 bg-transparent text-sm outline-none"
@@ -179,7 +172,7 @@ onUnmounted(() => {
       <div class="absolute left-0 right-0 top-full mt-1 overflow-hidden rounded-lg border bg-card shadow-lg">
         <p v-if="context" class="border-b px-3 py-2 text-xs text-muted-foreground">{{ context }}</p>
         <ul
-          id="command-search-results"
+          id="global-search-results"
           role="listbox"
           :aria-label="label"
           class="max-h-[60vh] overflow-y-auto py-1"
@@ -194,7 +187,7 @@ onUnmounted(() => {
             </li>
             <li
               v-for="item in group.items"
-              :id="`command-search-${indexOf(group, item)}`"
+              :id="`global-search-${indexOf(group, item)}`"
               :key="`${group.id}:${item.id}`"
               role="option"
               :aria-selected="indexOf(group, item) === active"
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 74aadf9..99cfa05 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -4,11 +4,6 @@ import { cn } from '../lib/utils'
 /**
  * Rows of the same shape, read down a column.
  *
- * A card says everything about one thing. A table says one thing about
- * everything, which is the question somebody asks of sixty skills or a hundred
- * files: which of these is set to never, which of them nobody has read yet. In
- * cards that answer is scattered down the page; in a column it is one glance.
- *
  * Cells are slots named after their column, so what a value looks like stays
  * with the application that knows what it means.
  */
diff --git a/src/index.js b/src/index.js
index cab4e6e..471aa31 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,7 +10,7 @@ export { default as Badge } from './components/Badge.vue'
 export { default as Button } from './components/Button.vue'
 export { default as Card } from './components/Card.vue'
 export { default as CodeGraph } from './components/CodeGraph.vue'
-export { default as CommandSearch } from './components/CommandSearch.vue'
+export { default as GlobalSearch } from './components/GlobalSearch.vue'
 export { default as Field } from './components/Field.vue'
 export { default as Input } from './components/Input.vue'
 export { default as ItemCard } from './components/ItemCard.vue'