@threadlabs/looma 0.4.0 → 0.5.0

package/vue/UiEditorInsertTableGrid.vue

@@ -0,0 +1,210 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
+    let list = Array.isArray(items) ? items.slice() : [];
+    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
+    if (sort.length > 0) {
+      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
+        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
+        : item;
+      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
+      list.sort((a, b) => {
+        for (const key of sort) {
+          const descending = key.startsWith("-");
+          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
+          if (order !== 0) return descending ? -order : order;
+        }
+        return 0;
+      });
+    }
+    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+  },
+};
+
+const props = withDefaults(defineProps<{
+  headerRow?: boolean | null;
+  maxCols?: number | null;
+  maxRows?: number | null;
+  open?: boolean | null;
+}>(), {
+  headerRow: false,
+  maxCols: 8,
+  maxRows: 8,
+  open: false,
+});
+const emit = defineEmits<{
+  "insert": [detail: { readonly rows: number; readonly cols: number; readonly withHeaderRow: boolean }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_cells = ref<any>([]);
+const state_rows = ref<any>(8);
+const state_cols = ref<any>(8);
+const state_hint = ref<any>("");
+const state_withHeaderRow = ref<any>(false);
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"insert":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "insert": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger((detail as Record<string, unknown>)["rows"]) && Number.isInteger((detail as Record<string, unknown>)["cols"]) && typeof (detail as Record<string, unknown>)["withHeaderRow"] === "boolean" && Object.keys(detail as object).every((key) => ["rows","cols","withHeaderRow"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  if (name === "cells") return state_cells.value;
+  if (name === "rows") return state_rows.value;
+  if (name === "cols") return state_cols.value;
+  if (name === "hint") return state_hint.value;
+  if (name === "withHeaderRow") return state_withHeaderRow.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "cells") { state_cells.value = value; return true; }
+  if (name === "rows") { state_rows.value = value; return true; }
+  if (name === "cols") { state_cols.value = value; return true; }
+  if (name === "hint") { state_hint.value = value; return true; }
+  if (name === "withHeaderRow") { state_withHeaderRow.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <div data-component="ui-editor-insert-table-grid" v-bind="$attrs" :hidden="hn.attr(!hn.t(props.open))" ref="root"><p class="hint">{{ hn.text(state_hint) }}</p><div class="grid" role="group" aria-label="Table dimensions" :style="{ '--ui-editor-table-grid-rows': hn.text(state_rows), '--ui-editor-table-grid-cols': hn.text(state_cols) }"><template v-for="(cell, index) in hn.shape(state_cells, undefined, [], undefined)" :key="(cell)?.key"><button type="button" class="cell" :data-row="hn.attr((cell)?.row)" :data-col="hn.attr((cell)?.col)" :aria-label="hn.enumerated((cell)?.label)" :aria-pressed="hn.enumerated((cell)?.selected)" :class="{ 'selected': hn.t((cell)?.selected) }"></button></template></div><label class="header"><input type="checkbox" :checked.prop="(state_withHeaderRow) as any" :ref="(element) => { refs['header'] = element as Element }"> Header row</label><button type="button" class="insert" :ref="(element) => { refs['insert'] = element as Element }">Insert table</button></div>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-insert-table-grid"] {
+      padding: var(--ui-space-3, 12px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    }
+
+    .hint {
+      margin: 0 0 var(--ui-space-2, 8px);
+      font-size: var(--ui-text-sm, 0.875rem);
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
+      grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+      gap: 2px;
+      margin-bottom: var(--ui-space-2, 8px);
+    }
+
+    .cell {
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: 2px;
+      background: var(--ui-surface, #fff);
+      cursor: pointer;
+    }
+
+    .cell.selected {
+      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+    }
+
+    .header {
+      display: block;
+      margin-bottom: var(--ui-space-2, 8px);
+      font-size: var(--ui-text-sm, 0.875rem);
+      cursor: pointer;
+    }
+
+    [data-component~="ui-editor-insert-table-grid"] .insert {
+      width: 100%;
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-sm, 4px);
+      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      color: var(--ui-accent-contrast, #fff);
+      font-size: var(--ui-text-sm, 0.875rem);
+      cursor: pointer;
+    }
+
+    [data-component~="ui-editor-insert-table-grid"] .insert:hover {
+      filter: brightness(1.05);
+    }
+
+    [data-component~="ui-editor-insert-table-grid"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiEditorMentionMenu.d.ts

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    anchorRect?: {
+        readonly left?: number;
+        readonly top?: number;
+        readonly right?: number;
+        readonly bottom?: number;
+        readonly x?: number;
+        readonly y?: number;
+        readonly width?: number;
+        readonly height?: number;
+    } | null;
+    items?: readonly ({
+        readonly id: string;
+        readonly label: string;
+        readonly detail?: string;
+        readonly initials?: string;
+    })[] | null;
+    loading?: boolean | null;
+    open?: boolean | null;
+    query?: string | null;
+    selectedIndex?: number | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (detail: {
+        readonly index: number;
+    }) => any;
+    highlight: (detail: {
+        readonly index: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((detail: {
+        readonly index: number;
+    }) => any) | undefined;
+    onHighlight?: ((detail: {
+        readonly index: number;
+    }) => any) | undefined;
+}>, {
+    open: boolean | null;
+    query: string | null;
+    loading: boolean | null;
+    selectedIndex: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorMentionMenu.js

@@ -0,0 +1,2 @@
+import { t as UiEditorMentionMenu_default } from "./chunks/UiEditorMentionMenu.js";
+export { UiEditorMentionMenu_default as default };

package/vue/UiEditorMentionMenu.vue

@@ -0,0 +1,284 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-editor-mention-menu/ui-editor-mention-menu.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  n: (v: unknown): number | undefined => typeof v === "number" && v === v ? v : undefined,
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+  call: (fn: string, ...args: unknown[]): any => {
+    if (fn === "format") {
+      let index = 1;
+      return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : undefined;
+    }
+    const n = args.map(hn.n);
+    if (n.some((value) => value === undefined)) return undefined;
+    const v = n as number[];
+    switch (fn) {
+      case "abs": return v.length === 1 ? Math.abs(v[0]!) : undefined;
+      case "round": return v.length === 1 ? Math.round(v[0]!) : undefined;
+      case "min": return v.length > 0 ? Math.min(...v) : undefined;
+      case "max": return v.length > 0 ? Math.max(...v) : undefined;
+      case "clamp": return v.length === 3 ? Math.min(Math.max(v[0]!, v[1]!), v[2]!) : undefined;
+    }
+    return undefined;
+  },
+  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
+    let list = Array.isArray(items) ? items.slice() : [];
+    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
+    if (sort.length > 0) {
+      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
+        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
+        : item;
+      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
+      list.sort((a, b) => {
+        for (const key of sort) {
+          const descending = key.startsWith("-");
+          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
+          if (order !== 0) return descending ? -order : order;
+        }
+        return 0;
+      });
+    }
+    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+  },
+};
+
+const props = withDefaults(defineProps<{
+  anchorRect?: { readonly left?: number; readonly top?: number; readonly right?: number; readonly bottom?: number; readonly x?: number; readonly y?: number; readonly width?: number; readonly height?: number } | null;
+  items?: readonly ({ readonly id: string; readonly label: string; readonly detail?: string; readonly initials?: string })[] | null;
+  loading?: boolean | null;
+  open?: boolean | null;
+  query?: string | null;
+  selectedIndex?: number | null;
+}>(), {
+  loading: false,
+  open: false,
+  query: "",
+  selectedIndex: 0,
+});
+const emit = defineEmits<{
+  "highlight": [detail: { readonly index: number }];
+  "select": [detail: { readonly index: number }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_visible = ref<any>(false);
+const state_rows = ref<any>([]);
+const state_searching = ref<any>(false);
+const state_active = ref<any>(0);
+const state_prefix = ref<any>("ui-editor-mention-menu");
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"highlight":{"bubbles":true,"composed":true,"cancelable":false},"select":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "highlight": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger((detail as Record<string, unknown>)["index"]) && Object.keys(detail as object).every((key) => ["index"].includes(key))),
+    "select": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger((detail as Record<string, unknown>)["index"]) && Object.keys(detail as object).every((key) => ["index"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  if (name === "visible") return state_visible.value;
+  if (name === "rows") return state_rows.value;
+  if (name === "searching") return state_searching.value;
+  if (name === "active") return state_active.value;
+  if (name === "prefix") return state_prefix.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "visible") { state_visible.value = value; return true; }
+  if (name === "rows") { state_rows.value = value; return true; }
+  if (name === "searching") { state_searching.value = value; return true; }
+  if (name === "active") { state_active.value = value; return true; }
+  if (name === "prefix") { state_prefix.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <div data-component="ui-editor-mention-menu" role="listbox" aria-label="Mention a person" v-bind="$attrs" :aria-busy="hn.enumerated(props.loading)" :hidden="hn.attr(!hn.t(state_visible))" ref="root"><div class="header"><span>People</span><span class="hint">Type after @ to search</span></div><template v-if="hn.t(state_searching)"><div class="loading" role="status">Searching…</div></template><template v-if="hn.t(!hn.t(state_searching))"><ul class="list" role="presentation"><template v-for="(row, index) in hn.shape(state_rows, undefined, [], undefined)" :key="index"><li class="item" role="option" :id="hn.attr(hn.call('format', '%s-option-%s', state_prefix, index))" :aria-selected="hn.enumerated((index === state_active))" :data-index="hn.attr(index)" :class="{ 'active': hn.t((index === state_active)) }"><span class="avatar" aria-hidden="true">{{ hn.text((row)?.initials) }}</span><span class="body"><span class="label">{{ hn.text((row)?.label) }}</span><template v-if="hn.t((row)?.detail)"><span class="detail">{{ hn.text((row)?.detail) }}</span></template></span></li></template></ul></template></div>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-mention-menu"] {
+      user-select: none;
+    }
+
+    [data-component~="ui-editor-mention-menu"] {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-xl, 1rem);
+      box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ui-space-3, 12px);
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      color: var(--ui-text-secondary, #4b5563);
+      border-bottom: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-semibold, 600);
+    }
+
+    .hint {
+      overflow: hidden;
+      color: var(--ui-text-muted, #6b7280);
+      font-weight: var(--ui-font-normal, 400);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .list {
+      max-height: 280px;
+      padding: var(--ui-space-1, 4px) 0;
+      margin: 0;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      list-style: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
+      gap: var(--ui-space-3, 12px);
+      cursor: pointer;
+    }
+
+    .item.active {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
+      border-radius: 999px;
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-semibold, 600);
+    }
+
+    .body {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+    }
+
+    .label,
+    .detail {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label {
+      color: var(--ui-text-primary, #111827);
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-medium, 500);
+    }
+
+    .detail,
+    .loading {
+      color: var(--ui-text-muted, #6b7280);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+    }
+
+    .loading {
+      min-height: 44px;
+      padding: var(--ui-space-3, 12px);
+    }
+
+    @media (max-width: 767px) {
+      [data-component~="ui-editor-mention-menu"] {
+        border-bottom: 0;
+        border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+      }
+
+      .list {
+        max-height: calc(60dvh - 48px);
+      }
+    }
+
+    [data-component~="ui-editor-mention-menu"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiEditorSlashMenu.d.ts

@@ -0,0 +1,41 @@
+type __VLS_Props = {
+    anchorRect?: {
+        readonly left?: number;
+        readonly top?: number;
+        readonly right?: number;
+        readonly bottom?: number;
+        readonly x?: number;
+        readonly y?: number;
+        readonly width?: number;
+        readonly height?: number;
+    } | null;
+    items?: readonly ({
+        readonly title: string;
+        readonly description: string;
+        readonly icon: string;
+    })[] | null;
+    open?: boolean | null;
+    query?: string | null;
+    selectedIndex?: number | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (detail: {
+        readonly index: number;
+    }) => any;
+    highlight: (detail: {
+        readonly index: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((detail: {
+        readonly index: number;
+    }) => any) | undefined;
+    onHighlight?: ((detail: {
+        readonly index: number;
+    }) => any) | undefined;
+}>, {
+    open: boolean | null;
+    query: string | null;
+    selectedIndex: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorSlashMenu.js

@@ -0,0 +1,2 @@
+import { t as UiEditorSlashMenu_default } from "./chunks/UiEditorSlashMenu.js";
+export { UiEditorSlashMenu_default as default };