@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/components/Form/Number/index.vue.d.ts

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    /**
+     * When true, an empty input emits `undefined`. The placeholder defaults to
+     * "Auto" if no explicit placeholder is given.
+     */
+    nullable?: boolean;
+    /**
+     * If true, the model is only updated on `change` (blur / Enter), matching
+     * Vue's `v-model.lazy` behavior. Defaults to eager (per-keystroke).
+     */
+    lazy?: boolean;
+    hideLabel?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+    select: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Form/Radio/index.d.vue.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     id: string;
-    label: string;
+    label?: string;
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/components/Form/Radio/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bk-form-label">
+    <div v-if="label" class="bk-form-label">
       {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
     </div>
     <div :class="{ 'bk-radio-inline': inline }">
@@ -23,7 +23,7 @@
 <script setup>
 defineProps({
   id: { type: String, required: true },
-  label: { type: String, required: true },
+  label: { type: String, required: false },
   options: { type: Array, required: true },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/editor/components/Form/Radio/index.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     id: string;
-    label: string;
+    label?: string;
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/components/Form/RadioBox/index.d.vue.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    value: string;
+    name: string;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+    required?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Form/RadioBox/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <label
+    class="_bk_flex _bk_items-start _bk_gap-5 _bk_cursor-pointer _bk_p-10 _bk_border _bk_border-mono-200 _bk_min-w-0 _bk_hover:bg-mono-50 _bk_hover:border-mono-400 _bk_rounded"
+    :class="{
+  '_bk_border-accent-600! _bk_outline-4 _bk_outline-accent-200 _bk_bg-accent-50!': isSelected,
+  '_bk_opacity-50 _bk_cursor-not-allowed! _bk_hover:bg-transparent! _bk_hover:border-mono-200!': disabled
+}"
+  >
+    <span class="bk-radio">
+      <input v-model="selected" type="radio" :value :name :disabled :required />
+      <span />
+    </span>
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div class="_bk_truncate _bk_font-semibold _bk_text-base">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div
+        v-if="$slots.description || description"
+        class="_bk_text-sm _bk_text-mono-500 _bk_mt-2"
+      >
+        <slot name="description">{{ description }}</slot>
+      </div>
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  value: { type: String, required: true },
+  name: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false }
+});
+const selected = defineModel({ type: String });
+const isSelected = computed(() => selected.value === props.value);
+</script>

package/dist/runtime/editor/components/Form/RadioBox/index.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    value: string;
+    name: string;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+    required?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Form/RadioTabs/index.vue

@@ -35,3 +35,58 @@ defineProps({
 });
 const value = defineModel({ type: String });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-radio-tabs {
+  display: flex;
+  overflow: hidden;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1);
+}
+:is(.bk .bk-radio-tabs) label {
+  position: relative;
+  flex: 1;
+  cursor: pointer;
+  text-align: center;
+}
+:is(:is(.bk .bk-radio-tabs) label):not(:last-child) {
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 1px;
+  border-right-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1);
+}
+:is(:is(.bk .bk-radio-tabs) label) input {
+  pointer-events: none;
+  position: absolute;
+  opacity: 0%;
+}
+:is(:is(.bk .bk-radio-tabs) label) span {
+  display: block;
+  padding-inline: 5px;
+  padding-top: 10px;
+  padding-bottom: 9px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  white-space: nowrap;
+  color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1);
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+}
+:is(:is(.bk .bk-radio-tabs) label):has(input:checked) span {
+  background-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1);
+  color: white;
+}
+:is(:is(.bk .bk-radio-tabs) label):not(:has(input:checked)):hover span {
+  background-color: rgb(var(--bk-scheme-light, var(--bk-theme-accent-100)) / 1);
+}
+:is(:is(.bk .bk-radio-tabs) label):has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 50%;
+}
+</style>

package/dist/runtime/editor/components/Form/Search/index.d.vue.ts

@@ -0,0 +1,88 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { FormSearchItem } from './types.js';
+export type { FormSearchItem };
+type __VLS_Props = {
+    /** Form `id` attribute, also used as `for=` on the label. */
+    id: string;
+    /** Field label shown above the input. */
+    label?: string;
+    /** Optional small description shown under the input. */
+    description?: string;
+    /** Marks the field as required (asterisk + form validation). */
+    required?: boolean;
+    /** Disables the input and prevents the dropdown from opening. */
+    disabled?: boolean;
+    /**
+     * Items to search/render. In `'fzf'` mode this is the full candidate
+     * list; in `'async'` mode it should already be filtered by the caller.
+     */
+    items: FormSearchItem[];
+    /** Input placeholder. */
+    placeholder?: string;
+    /** Leading icon. Defaults to `bk_mdi_search`. */
+    icon?: BlokkliIcon;
+    /** Async-only: shows a spinner inside the input while truthy. */
+    loading?: boolean;
+    /** Render results as a flat list with no group headers. */
+    disableGrouping?: boolean;
+    /**
+     * `'fzf'` (default) — component runs `Fzf` over `items` itself, populates
+     * `positions` for each match, and shows the full list (locale-sorted) when
+     * the query is empty.
+     *
+     * `'async'` — component renders `items` as-is, with no internal filtering.
+     */
+    mode?: 'fzf' | 'async';
+    /**
+     * Custom selector for fzf. Defaults to `(item) => item.label`.
+     */
+    fzfSelector?: (item: FormSearchItem) => string;
+    /**
+     * When set, the component renders a "selected" chip (label + clear
+     * button) instead of the search input. The clear button emits `clear`
+     * so the consumer can reset its own state and switch back to search
+     * mode. Useful for select-style consumers (e.g. picking a single link).
+     */
+    selectedLabel?: string;
+};
+type __VLS_ModelProps = {
+    'query'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_21: {
+    item: any;
+    isFocused: boolean;
+    query: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    select: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (args_0: FormSearchItem) => any;
+    clear: () => any;
+    "update:query": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((args_0: FormSearchItem) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:query"?: ((value: string) => any) | undefined;
+}>, {
+    description: string;
+    icon: BlokkliIcon;
+    mode: "fzf" | "async";
+    placeholder: string;
+    loading: boolean;
+    selectedLabel: string;
+    disableGrouping: boolean;
+    fzfSelector: (item: FormSearchItem) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Form/Search/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div
+    ref="wrapperEl"
+    class="_bk_relative"
+    :class="{ '_bk_pointer-events-none': disabled }"
+    @focusin="isFocused = true"
+    @focusout="onFocusOut"
+  >
+    <label v-if="label" class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </label>
+
+    <div
+      v-if="selectedLabel"
+      class="_bk_flex _bk_items-center _bk_gap-5 _bk_h-[46px] _bk_px-10 _bk_bg-mono-50 _bk_text-mono-950 _bk_border _bk_border-mono-200"
+      :class="{ '_bk_opacity-50': disabled }"
+    >
+      <Icon :name="icon ?? 'bk_mdi_search'" class="_bk_size-20 _bk_text-mono-500" />
+      <span class="_bk_flex-1 _bk_truncate _bk_text-sm _bk_font-medium">
+        {{ selectedLabel }}
+      </span>
+      <button
+        type="button"
+        class="_bk_flex _bk_items-center _bk_justify-center _bk_p-3 _bk_text-mono-500 _bk_hover:bg-mono-200 _bk_hover:text-mono-900 _bk_[&_svg]:size-15 _bk_[&_svg]:fill-current _bk_rounded-full"
+        :title="$t('formSearchClear', 'Clear')"
+        :disabled
+        @click="$emit('clear')"
+      >
+        <Icon name="bk_mdi_close" />
+      </button>
+    </div>
+
+    <div
+      v-else
+      class="_bk_relative _bk_h-[46px] _bk_focus-within:z-[5000]"
+      :class="{ '_bk_opacity-50': disabled }"
+    >
+      <div
+        class="_bk_overflow-hidden _bk_bg-white _bk_rounded"
+        :class="{ '_bk_ring-4 _bk_ring-accent-700': isFocused }"
+      >
+        <div class="_bk_group/search _bk_relative">
+          <Icon
+            :name="icon ?? 'bk_mdi_search'"
+            class="_bk_absolute _bk_top-1/2 _bk_left-10 _bk_-translate-y-1/2 _bk_pointer-events-none _bk_[&_svg]:size-20 _bk_[&_svg]:fill-mono-500 _bk_group-focus-within/search:[&_svg]:fill-accent-700"
+          />
+          <input
+            :id
+            ref="inputEl"
+            v-model="query"
+            type="text"
+            class="bk-form-input _bk_pl-[35px]! _bk_focus:ring-0!"
+            autocomplete="off"
+            :placeholder
+            :required
+            :disabled
+            :class="{
+  '_bk_rounded-b-none': showDropdown
+}"
+            @keydown="onKeyDown"
+          />
+          <Icon
+            v-if="mode === 'async' && loading"
+            name="spinner"
+            class="_bk_absolute _bk_top-1/2 _bk_right-10 _bk_-translate-y-1/2 _bk_animate-spin _bk_pointer-events-none _bk_[&_svg]:size-20 _bk_[&_svg]:fill-mono-500"
+          />
+        </div>
+
+        <div
+          v-if="showDropdown"
+          ref="resultsEl"
+          class="bk-scrollbar-light _bk_bg-white _bk_overflow-y-auto _bk_overscroll-contain _bk_border-t _bk_border-t-mono-300 _bk_max-h-[400px]"
+        >
+          <div
+            v-if="mode === 'async' && loading && filteredItems.length === 0"
+            class="_bk_text-mono-500 _bk_text-sm _bk_py-15 _bk_text-center"
+          >
+            {{ $t("loading", "Loading", { more: true }) }}
+          </div>
+          <div
+            v-else-if="filteredItems.length === 0"
+            class="_bk_text-mono-500 _bk_text-sm _bk_py-15 _bk_text-center"
+          >
+            {{ $t("formSearchNoResults", "No results.") }}
+          </div>
+          <template v-else>
+            <div v-for="group in grouped" :key="group.category">
+              <div
+                v-if="!disableGrouping && group.category"
+                class="_bk_text-xs _bk_font-semibold _bk_text-mono-600 _bk_uppercase _bk_px-10 _bk_py-8 _bk_bg-mono-50"
+              >
+                {{ group.category }}
+              </div>
+              <button
+                v-for="indexed in group.items"
+                :key="indexed.value.key"
+                type="button"
+                class="bk-form-search-result _bk_w-full _bk_px-10 _bk_py-8 _bk_bg-transparent _bk_border-0 _bk_cursor-pointer _bk_text-base _bk_text-left _bk_text-mono-950 _bk_font-medium _bk_overflow-hidden _bk_hover:bg-accent-50 _bk_hover:text-accent-700 _bk_[&_.bk-highlight]:line-clamp-2"
+                :class="{
+  '_bk_bg-accent-50! _bk_text-accent-700!': focusedIndex === indexed.flatIndex
+}"
+                @mousedown.prevent
+                @click="onSelect(indexed.value)"
+                @mouseenter="focusedIndex = indexed.flatIndex"
+              >
+                <slot
+                  :item="indexed.value"
+                  :is-focused="focusedIndex === indexed.flatIndex"
+                  :query="query"
+                >
+                  <Highlight
+                    :text="indexed.value.label"
+                    :positions="indexed.value.positions"
+                    tag="span"
+                  />
+                  <span
+                    v-if="indexed.value.description"
+                    class="_bk_block _bk_text-xs _bk_mt-2 _bk_truncate _bk_font-normal _bk_text-mono-600"
+                  >
+                    {{ indexed.value.description }}
+                  </span>
+                </slot>
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  ref,
+  shallowRef,
+  useBlokkli,
+  useTemplateRef,
+  watch
+} from "#imports";
+import { Highlight, Icon } from "#blokkli/editor/components";
+import { loadFzf } from "#blokkli/editor/libraries/fzf";
+import { modulo } from "#blokkli/editor/helpers/math";
+const props = defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: false },
+  description: { type: String, required: false, default: void 0 },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  items: { type: Array, required: true },
+  placeholder: { type: String, required: false, default: void 0 },
+  icon: { type: null, required: false, default: void 0 },
+  loading: { type: Boolean, required: false, default: false },
+  disableGrouping: { type: Boolean, required: false, default: false },
+  mode: { type: String, required: false, default: "fzf" },
+  fzfSelector: { type: Function, required: false, default: void 0 },
+  selectedLabel: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["select", "clear"]);
+const query = defineModel("query", { type: String, ...{ default: "" } });
+const { $t } = useBlokkli();
+const wrapperEl = useTemplateRef("wrapperEl");
+const inputEl = useTemplateRef("inputEl");
+const isFocused = ref(false);
+const focusedIndex = ref(-1);
+const resultsEl = useTemplateRef("resultsEl");
+const fzf = shallowRef(null);
+async function rebuildFzf() {
+  if (props.mode !== "fzf") {
+    fzf.value = null;
+    return;
+  }
+  const { Fzf } = await loadFzf();
+  const selector = props.fzfSelector ?? ((item) => item.label);
+  fzf.value = new Fzf(props.items, { selector });
+}
+onMounted(rebuildFzf);
+watch(() => [props.mode, props.items, props.fzfSelector], rebuildFzf);
+const filteredItems = computed(() => {
+  if (props.mode === "async") {
+    return props.items;
+  }
+  const q = query.value.trim();
+  if (!q) {
+    return [...props.items].sort(
+      (a, b) => a.label.localeCompare(b.label, void 0, { sensitivity: "base" })
+    );
+  }
+  if (!fzf.value) {
+    const lower = q.toLowerCase();
+    return props.items.filter(
+      (item) => item.label.toLowerCase().includes(lower)
+    );
+  }
+  return fzf.value.find(q).map((entry) => ({
+    ...entry.item,
+    positions: Array.from(entry.positions)
+  }));
+});
+const grouped = computed(() => {
+  let buckets;
+  if (props.disableGrouping) {
+    buckets = [{ category: "", items: filteredItems.value }];
+  } else {
+    const otherLabel = $t("formSearchOther", "Other");
+    const map = /* @__PURE__ */ new Map();
+    for (const item of filteredItems.value) {
+      const cat = item.category || otherLabel;
+      if (!map.has(cat)) map.set(cat, []);
+      map.get(cat).push(item);
+    }
+    buckets = [...map.entries()].sort(
+      ([a], [b]) => a.localeCompare(b, void 0, { sensitivity: "base" })
+    ).map(([category, items]) => ({ category, items }));
+  }
+  let flatIndex = 0;
+  return buckets.map(({ category, items }) => ({
+    category,
+    items: items.map((value) => ({ value, flatIndex: flatIndex++ }))
+  }));
+});
+const flatItems = computed(
+  () => grouped.value.flatMap((g) => g.items.map((i) => i.value))
+);
+const showDropdown = computed(() => {
+  if (props.disabled || !isFocused.value) return false;
+  if (filteredItems.value.length > 0) return true;
+  if (props.mode === "async") {
+    return props.loading || query.value.trim().length > 0;
+  }
+  return false;
+});
+watch(filteredItems, () => {
+  focusedIndex.value = -1;
+});
+watch(focusedIndex, (idx) => {
+  if (idx < 0) return;
+  const items = resultsEl.value?.querySelectorAll(".bk-form-search-result");
+  const child = items?.[idx];
+  child?.scrollIntoView({ block: "nearest", inline: "nearest" });
+});
+function onSelect(item) {
+  emit("select", item);
+  query.value = "";
+  inputEl.value?.blur();
+}
+function onFocusOut(e) {
+  if (e.relatedTarget instanceof Node && wrapperEl.value?.contains(e.relatedTarget)) {
+    return;
+  }
+  isFocused.value = false;
+}
+function onKeyDown(e) {
+  const len = flatItems.value.length;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    inputEl.value?.blur();
+    return;
+  }
+  if (!len) return;
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    focusedIndex.value = focusedIndex.value < 0 ? 0 : modulo(focusedIndex.value + 1, len);
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    focusedIndex.value = focusedIndex.value < 0 ? len - 1 : modulo(focusedIndex.value - 1, len);
+  } else if (e.key === "Enter") {
+    e.preventDefault();
+    const idx = focusedIndex.value < 0 ? 0 : focusedIndex.value;
+    const item = flatItems.value[idx];
+    if (item) onSelect(item);
+  }
+}
+defineExpose({
+  focus: () => inputEl.value?.focus(),
+  select: () => inputEl.value?.select()
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-form-search-result + .bk-form-search-result {
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-100) / 1);
+}
+</style>