@abraca/nuxt 1.8.2 → 2.0.0

package/dist/runtime/components/docs/ADocsToc.vue

@@ -0,0 +1,194 @@
+<script>
+import theme from "../../theme/content/content-toc";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useRouter, useAppConfig, useNuxtApp } from "#imports";
+import { useComponentUI } from "@nuxt/ui/composables/useComponentUI";
+import { useScrollspy } from "@nuxt/ui/composables/useScrollspy";
+import { useLocale } from "@nuxt/ui/composables/useLocale";
+import { tv } from "@nuxt/ui/utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  trailingIcon: { type: null, required: false },
+  title: { type: String, required: false },
+  color: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  highlightColor: { type: null, required: false },
+  highlightVariant: { type: null, required: false },
+  links: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:open", "move"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "open", "defaultOpen"), emits);
+const { t } = useLocale();
+const router = useRouter();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("contentToc", props);
+const { activeHeadings, updateHeadings } = useScrollspy();
+const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
+  props: {
+    links: Array,
+    level: Number
+  }
+});
+const [DefineTriggerTemplate, ReuseTriggerTemplate] = createReusableTemplate();
+const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentToc || {} })({
+  color: props.color,
+  highlight: props.highlight,
+  highlightVariant: props.highlightVariant,
+  highlightColor: props.highlightColor || props.color
+}));
+function scrollToHeading(id) {
+  const encodedId = encodeURIComponent(id);
+  router.push(`#${encodedId}`);
+  emits("move", id);
+}
+function flattenLinks(links) {
+  return links.flatMap((link) => [link, ...link.children ? flattenLinks(link.children) : []]);
+}
+function flattenLinksWithLevel(links, level = 0) {
+  return links.flatMap((link) => [
+    { link, level },
+    ...link.children ? flattenLinksWithLevel(link.children, level + 1) : []
+  ]);
+}
+const linkHeight = 1.75;
+const indicatorStyle = computed(() => {
+  if (!activeHeadings.value?.length) {
+    return;
+  }
+  const flatLinks = flattenLinks(props.links || []);
+  const activeIndex = flatLinks.findIndex((link) => activeHeadings.value.includes(link.id));
+  return {
+    "--indicator-size": `${linkHeight * activeHeadings.value.length}rem`,
+    "--indicator-position": activeIndex >= 0 ? `${activeIndex * linkHeight}rem` : "0rem"
+  };
+});
+const circuitMaskStyle = computed(() => {
+  if (!props.highlight || props.highlightVariant !== "circuit" || !props.links?.length) {
+    return;
+  }
+  const flatLinks = flattenLinksWithLevel(props.links);
+  const svgUnit = 16;
+  const svgLinkHeight = linkHeight * svgUnit;
+  const svgHeight = flatLinks.length * svgLinkHeight;
+  const x0 = 0.5;
+  const x1 = 10.5;
+  let path = "";
+  let currentX = x0;
+  let y = 0;
+  flatLinks.forEach((item, index) => {
+    const targetX = item.level > 0 ? x1 : x0;
+    const nextY = y + svgLinkHeight;
+    if (index === 0) {
+      path += `M${targetX} ${y}`;
+      currentX = targetX;
+    }
+    if (targetX !== currentX) {
+      path += ` L${targetX} ${y + 6}`;
+      currentX = targetX;
+    }
+    path += ` L${currentX} ${nextY - (index < flatLinks.length - 1 && flatLinks[index + 1]?.level !== item.level ? 6 : 0)}`;
+    y = nextY;
+  });
+  const svgPath = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 ${svgHeight}'><path d='${path}' stroke='black' stroke-width='1' fill='none'/></svg>`);
+  return {
+    width: "0.75rem",
+    height: `${flatLinks.length * linkHeight}rem`,
+    maskImage: `url("data:image/svg+xml,${svgPath}")`
+  };
+});
+const nuxtApp = useNuxtApp();
+nuxtApp.hooks.hook("page:loading:end", () => {
+  const headings = Array.from(document.querySelectorAll("h2, h3"));
+  updateHeadings(headings);
+});
+nuxtApp.hooks.hook("page:transition:finish", () => {
+  const headings = Array.from(document.querySelectorAll("h2, h3"));
+  updateHeadings(headings);
+});
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <DefineListTemplate v-slot="{ links, level }">
+    <ul :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
+      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [uiProp?.item, link.ui?.item] })">
+        <a :href="`#${link.id}`" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+          <slot name="link" :link="link">
+            <span data-slot="linkText" :class="ui.linkText({ class: [uiProp?.linkText, link.ui?.linkText] })">
+              {{ link.text }}
+            </span>
+          </slot>
+        </a>
+
+        <ReuseListTemplate v-if="link.children?.length" :links="link.children" :level="level + 1" />
+      </li>
+    </ul>
+  </DefineListTemplate>
+
+  <DefineTriggerTemplate v-slot="{ open }">
+    <slot name="leading" :open="open" :ui="ui" />
+
+    <span data-slot="title" :class="ui.title({ class: uiProp?.title })">
+      <slot :open="open">{{ title || t('contentToc.title') }}</slot>
+    </span>
+
+    <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+      <slot name="trailing" :open="open" :ui="ui">
+        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+      </slot>
+    </span>
+  </DefineTriggerTemplate>
+
+  <DefineContentTemplate>
+    <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="{ ...indicatorStyle, ...circuitMaskStyle || {} }">
+      <div data-slot="indicatorLine" :class="ui.indicatorLine({ class: uiProp?.indicatorLine })" />
+      <div v-if="indicatorStyle" data-slot="indicatorActive" :class="ui.indicatorActive({ class: uiProp?.indicatorActive })" />
+    </div>
+
+    <slot name="content" :links="links">
+      <ReuseListTemplate :links="links" :level="0" />
+    </slot>
+  </DefineContentTemplate>
+
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
+        <slot name="top" :links="links" />
+      </div>
+
+      <template v-if="links?.length">
+        <CollapsibleTrigger data-slot="trigger" :class="ui.trigger({ class: 'lg:hidden' })">
+          <ReuseTriggerTemplate :open="open" />
+        </CollapsibleTrigger>
+
+        <CollapsibleContent data-slot="content" :class="ui.content({ class: [uiProp?.content, 'lg:hidden'] })">
+          <ReuseContentTemplate />
+        </CollapsibleContent>
+
+        <p data-slot="trigger" :class="ui.trigger({ class: 'hidden lg:flex' })">
+          <ReuseTriggerTemplate :open="open" />
+        </p>
+
+        <div data-slot="content" :class="ui.content({ class: [uiProp?.content, 'hidden lg:flex'] })">
+          <ReuseContentTemplate />
+        </div>
+      </template>
+
+      <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: uiProp?.bottom, body: !!slots.top || !!links?.length })">
+        <slot name="bottom" :links="links" />
+      </div>
+    </div>
+  </CollapsibleRoot>
+</template>

package/dist/runtime/components/docs/ADocsToc.vue.d.ts

@@ -0,0 +1,117 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    as: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    trailingIcon: {
+        type: null;
+        required: false;
+    };
+    title: {
+        type: StringConstructor;
+        required: false;
+    };
+    color: {
+        type: null;
+        required: false;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    highlightColor: {
+        type: null;
+        required: false;
+    };
+    highlightVariant: {
+        type: null;
+        required: false;
+    };
+    links: {
+        type: ArrayConstructor;
+        required: false;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+    ui: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    open: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    move: (...args: any[]) => void;
+    "update:open": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    trailingIcon: {
+        type: null;
+        required: false;
+    };
+    title: {
+        type: StringConstructor;
+        required: false;
+    };
+    color: {
+        type: null;
+        required: false;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    highlightColor: {
+        type: null;
+        required: false;
+    };
+    highlightVariant: {
+        type: null;
+        required: false;
+    };
+    links: {
+        type: ArrayConstructor;
+        required: false;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+    ui: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    open: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>> & Readonly<{
+    onMove?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}>, {
+    as: any;
+    open: boolean;
+    highlight: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/dist/runtime/components/editor/ADocLinkPopover.vue

@@ -29,11 +29,7 @@ const dropdownItems = computed(() => [[
 function pick() {
   pickDoc().then((result) => {
     if (!result) return;
-    const { id, label } = result;
-    const isEmpty = props.editor.state.selection.empty;
-    let chain = props.editor.chain().focus().extendMarkRange("link").setLink({ href: `/doc/${id}` });
-    if (isEmpty) chain = chain.insertContent({ type: "text", text: label });
-    chain.run();
+    props.editor.chain().focus().insertDocLink({ docId: result.id }).run();
   });
 }
 </script>

package/dist/runtime/components/editor/AEditorRedoButton.d.vue.ts

@@ -0,0 +1,26 @@
+/**
+ * <AEditorRedoButton>
+ *
+ * Standalone redo button bound to a TipTap editor.
+ *
+ * Usage:
+ *   <AEditorRedoButton :editor="editor" />
+ */
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor | null | undefined;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
+    color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
+    icon?: string;
+    tooltip?: string | false;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
+    icon: string;
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
+    tooltip: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AEditorRedoButton.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { useTiptapHistory } from "../../composables/useTiptapHistory";
+const props = defineProps({
+  editor: { type: null, required: true },
+  size: { type: String, required: false, default: "xs" },
+  variant: { type: String, required: false, default: "ghost" },
+  color: { type: String, required: false, default: "neutral" },
+  icon: { type: String, required: false, default: "i-lucide-redo" },
+  tooltip: { type: [String, Boolean], required: false, default: "Redo" }
+});
+const { canRedo, redo } = useTiptapHistory(() => props.editor ?? null);
+</script>
+
+<template>
+  <UTooltip
+    v-if="tooltip"
+    :text="tooltip"
+    :content="{ side: 'bottom' }"
+  >
+    <UButton
+      :icon="icon"
+      :size="size"
+      :variant="variant"
+      :color="color"
+      :disabled="!canRedo"
+      @click="redo"
+    />
+  </UTooltip>
+  <UButton
+    v-else
+    :icon="icon"
+    :size="size"
+    :variant="variant"
+    :color="color"
+    :disabled="!canRedo"
+    @click="redo"
+  />
+</template>

package/dist/runtime/components/editor/AEditorRedoButton.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * <AEditorRedoButton>
+ *
+ * Standalone redo button bound to a TipTap editor.
+ *
+ * Usage:
+ *   <AEditorRedoButton :editor="editor" />
+ */
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor | null | undefined;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
+    color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
+    icon?: string;
+    tooltip?: string | false;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
+    icon: string;
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
+    tooltip: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AEditorUndoButton.d.vue.ts

@@ -0,0 +1,26 @@
+/**
+ * <AEditorUndoButton>
+ *
+ * Standalone undo button bound to a TipTap editor. Drop it in any toolbar.
+ *
+ * Usage:
+ *   <AEditorUndoButton :editor="editor" />
+ */
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor | null | undefined;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
+    color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
+    icon?: string;
+    tooltip?: string | false;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
+    icon: string;
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
+    tooltip: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AEditorUndoButton.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { useTiptapHistory } from "../../composables/useTiptapHistory";
+const props = defineProps({
+  editor: { type: null, required: true },
+  size: { type: String, required: false, default: "xs" },
+  variant: { type: String, required: false, default: "ghost" },
+  color: { type: String, required: false, default: "neutral" },
+  icon: { type: String, required: false, default: "i-lucide-undo" },
+  tooltip: { type: [String, Boolean], required: false, default: "Undo" }
+});
+const { canUndo, undo } = useTiptapHistory(() => props.editor ?? null);
+</script>
+
+<template>
+  <UTooltip
+    v-if="tooltip"
+    :text="tooltip"
+    :content="{ side: 'bottom' }"
+  >
+    <UButton
+      :icon="icon"
+      :size="size"
+      :variant="variant"
+      :color="color"
+      :disabled="!canUndo"
+      @click="undo"
+    />
+  </UTooltip>
+  <UButton
+    v-else
+    :icon="icon"
+    :size="size"
+    :variant="variant"
+    :color="color"
+    :disabled="!canUndo"
+    @click="undo"
+  />
+</template>

package/dist/runtime/components/editor/AEditorUndoButton.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * <AEditorUndoButton>
+ *
+ * Standalone undo button bound to a TipTap editor. Drop it in any toolbar.
+ *
+ * Usage:
+ *   <AEditorUndoButton :editor="editor" />
+ */
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor | null | undefined;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
+    color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
+    icon?: string;
+    tooltip?: string | false;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
+    icon: string;
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
+    tooltip: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AIconPickerPopover.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    modelValue: string;
+    open: boolean;
+    options?: string[];
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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/components/editor/AIconPickerPopover.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
+import { LUCIDE_ICON_NAMES } from "../../utils/lucideIcons";
+const BATCH_SIZE = 80;
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  open: { type: Boolean, required: true },
+  options: { type: Array, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:open"]);
+const search = ref("");
+const loadedCount = ref(BATCH_SIZE);
+const sentinel = ref(null);
+const scrollContainer = ref(null);
+const sourceIcons = computed(
+  () => props.options?.length ? props.options : LUCIDE_ICON_NAMES
+);
+const filteredIcons = computed(() => {
+  if (!search.value) return sourceIcons.value;
+  const q = search.value.toLowerCase();
+  return sourceIcons.value.filter((n) => n.includes(q));
+});
+const visibleIcons = computed(
+  () => filteredIcons.value.slice(0, loadedCount.value)
+);
+const hasMore = computed(() => loadedCount.value < filteredIcons.value.length);
+watch(search, () => {
+  loadedCount.value = BATCH_SIZE;
+  scrollContainer.value?.scrollTo(0, 0);
+});
+let observer = null;
+function setupObserver() {
+  observer?.disconnect();
+  if (!sentinel.value) return;
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting && hasMore.value) {
+        loadedCount.value += BATCH_SIZE;
+      }
+    },
+    { root: scrollContainer.value, threshold: 0 }
+  );
+  observer.observe(sentinel.value);
+}
+watch(sentinel, () => setupObserver());
+watch(() => props.open, async (open) => {
+  if (open) {
+    loadedCount.value = BATCH_SIZE;
+    search.value = "";
+    await nextTick();
+    searchInput.value?.$el?.querySelector("input")?.focus();
+    await nextTick();
+    setupObserver();
+  } else {
+    observer?.disconnect();
+  }
+});
+onBeforeUnmount(() => observer?.disconnect());
+function selectIcon(name) {
+  emit("update:modelValue", name);
+  emit("update:open", false);
+}
+const searchInput = ref(null);
+</script>
+
+<template>
+  <UPopover
+    :open="open"
+    :content="{ align: 'start' }"
+    @update:open="$emit('update:open', $event)"
+  >
+    <slot />
+    <template #content>
+      <div class="w-72 p-2 flex flex-col gap-2">
+        <UInput
+          ref="searchInput"
+          v-model="search"
+          size="sm"
+          placeholder="Search icons…"
+          icon="i-lucide-search"
+        />
+        <div
+          ref="scrollContainer"
+          class="max-h-64 overflow-y-auto overflow-x-hidden"
+        >
+          <div class="grid grid-cols-8 gap-0.5">
+            <UTooltip
+              v-for="name in visibleIcons"
+              :key="name"
+              :text="name"
+            >
+              <button
+                class="size-8 flex items-center justify-center rounded cursor-pointer hover:bg-(--ui-bg-elevated)"
+                :class="modelValue === name ? 'bg-(--ui-bg-accented)' : ''"
+                @click="selectIcon(name)"
+              >
+                <UIcon
+                  :name="`i-lucide-${name}`"
+                  class="size-4"
+                />
+              </button>
+            </UTooltip>
+          </div>
+          <div
+            v-if="hasMore"
+            ref="sentinel"
+            class="h-4"
+          />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/editor/AIconPickerPopover.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    modelValue: string;
+    open: boolean;
+    options?: string[];
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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;
+    };
+};