@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/_chunks/mention-suggestion.js

@@ -1,362 +1,365 @@
 "use client";
-import { jsx as i, jsxs as u } from "react/jsx-runtime";
-import { N as v, R as w, m as N, f as g, g as $, h as S, j as R } from "./tiptap.js";
-import { IconFile as I, IconDownload as A } from "@tabler/icons-react";
-import { Icon as x } from "../ui/icon.js";
-import * as d from "react";
-import { createRoot as j } from "react-dom/client";
-import { cn as k } from "../ui/lib/utils.js";
-import { emojiDataLoaders as h } from "../composed/emoji-picker.js";
-function L(e) {
-  return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+import { cn as e } from "../ui/lib/utils.js";
+import { Icon as t } from "../ui/icon.js";
+import { emojiDataLoaders as n } from "../composed/emoji-picker.js";
+import { _ as r, f as i, g as a, p as o, r as s, v as c, y as l } from "./tiptap.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { IconDownload as p, IconFile as m } from "@tabler/icons-react";
+import { createRoot as h } from "react-dom/client";
+//#region src/composed/extensions/file-attachment.tsx
+function g(e) {
+	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-function z({ node: e }) {
-  const r = /^https?:\/\//.test(e.attrs.url) ? e.attrs.url : "#";
-  return /* @__PURE__ */ i(g, { className: "my-ds-02", children: /* @__PURE__ */ u(
-    "a",
-    {
-      href: r,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "inline-flex items-center gap-ds-03 rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-ds-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover",
-      contentEditable: !1,
-      children: [
-        /* @__PURE__ */ i(x, { icon: I, size: "sm", className: "shrink-0 text-surface-fg-subtle" }),
-        /* @__PURE__ */ i("span", { className: "truncate", children: e.attrs.name }),
-        /* @__PURE__ */ u("span", { className: "shrink-0 text-surface-fg-subtle", children: [
-          "(",
-          L(e.attrs.size),
-          ")"
-        ] }),
-        /* @__PURE__ */ i(x, { icon: A, size: "sm", className: "shrink-0 text-surface-fg-subtle" })
-      ]
-    }
-  ) });
+function _({ node: e }) {
+	return /* @__PURE__ */ d(i, {
+		className: "my-ds-02",
+		children: /* @__PURE__ */ f("a", {
+			href: /^https?:\/\//.test(e.attrs.url) ? e.attrs.url : "#",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "inline-flex items-center gap-ds-03 rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-ds-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover",
+			contentEditable: !1,
+			children: [
+				/* @__PURE__ */ d(t, {
+					icon: m,
+					size: "sm",
+					className: "shrink-0 text-surface-fg-subtle"
+				}),
+				/* @__PURE__ */ d("span", {
+					className: "truncate",
+					children: e.attrs.name
+				}),
+				/* @__PURE__ */ f("span", {
+					className: "shrink-0 text-surface-fg-subtle",
+					children: [
+						"(",
+						g(e.attrs.size),
+						")"
+					]
+				}),
+				/* @__PURE__ */ d(t, {
+					icon: p,
+					size: "sm",
+					className: "shrink-0 text-surface-fg-subtle"
+				})
+			]
+		})
+	});
 }
-const O = v.create({
-  name: "fileAttachment",
-  group: "block",
-  atom: !0,
-  addAttributes() {
-    return {
-      url: { default: null },
-      name: { default: "Untitled" },
-      size: { default: 0 }
-    };
-  },
-  parseHTML() {
-    return [{ tag: "div[data-file-attachment]" }];
-  },
-  renderHTML({ HTMLAttributes: e }) {
-    return ["div", N({ "data-file-attachment": "" }, e)];
-  },
-  addNodeView() {
-    return w(z);
-  }
-}), E = (e) => `https://cdn.jsdelivr.net/npm/emoji-datasource-${e}@15.0.1/img/${e}/sheets-256/64.png`, f = 61, m = 61;
-let y = null, c = null;
-async function D(e) {
-  if (y === e && c) return c;
-  const t = await (h[e] ?? h.native)();
-  return c = t.default ?? t, y = e, c;
+var v = r.create({
+	name: "fileAttachment",
+	group: "block",
+	atom: !0,
+	addAttributes() {
+		return {
+			url: { default: null },
+			name: { default: "Untitled" },
+			size: { default: 0 }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "div[data-file-attachment]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["div", c({ "data-file-attachment": "" }, e)];
+	},
+	addNodeView() {
+		return o(_);
+	}
+}), y = (e) => `https://cdn.jsdelivr.net/npm/emoji-datasource-${e}@15.0.1/img/${e}/sheets-256/64.png`, b = null, x = null;
+async function S(e) {
+	if (b === e && x) return x;
+	let t = await (n[e] ?? n.native)();
+	return x = t.default ?? t, b = e, x;
 }
-function W(e, r) {
-  const t = e.emojis[r];
-  if (!t) return null;
-  const s = t.skins[0];
-  return s ? {
-    id: t.id,
-    name: t.name,
-    native: s.native,
-    x: s.x ?? 0,
-    y: s.y ?? 0
-  } : null;
+function C(e, t) {
+	let n = e.emojis[t];
+	if (!n) return null;
+	let r = n.skins[0];
+	return r ? {
+		id: n.id,
+		name: n.name,
+		native: r.native,
+		x: r.x ?? 0,
+		y: r.y ?? 0
+	} : null;
 }
-function C(e, r, t = 8) {
-  const s = Object.values(e.emojis);
-  if (!r)
-    return s.slice(0, t).map((n) => ({
-      id: n.id,
-      name: n.name,
-      native: n.skins[0]?.native ?? "",
-      x: n.skins[0]?.x ?? 0,
-      y: n.skins[0]?.y ?? 0
-    }));
-  const a = r.toLowerCase(), o = [];
-  for (const n of s) {
-    if (o.length >= t) break;
-    (n.id.includes(a) || n.name.toLowerCase().includes(a) || n.keywords?.some((l) => l.includes(a))) && o.push({
-      id: n.id,
-      name: n.name,
-      native: n.skins[0]?.native ?? "",
-      x: n.skins[0]?.x ?? 0,
-      y: n.skins[0]?.y ?? 0
-    });
-  }
-  return o;
+function w(e, t, n = 8) {
+	let r = Object.values(e.emojis);
+	if (!t) return r.slice(0, n).map((e) => ({
+		id: e.id,
+		name: e.name,
+		native: e.skins[0]?.native ?? "",
+		x: e.skins[0]?.x ?? 0,
+		y: e.skins[0]?.y ?? 0
+	}));
+	let i = t.toLowerCase(), a = [];
+	for (let e of r) {
+		if (a.length >= n) break;
+		(e.id.includes(i) || e.name.toLowerCase().includes(i) || e.keywords?.some((e) => e.includes(i))) && a.push({
+			id: e.id,
+			name: e.name,
+			native: e.skins[0]?.native ?? "",
+			x: e.skins[0]?.x ?? 0,
+			y: e.skins[0]?.y ?? 0
+		});
+	}
+	return a;
 }
-function H({ node: e }) {
-  const { native: r, set: t, x: s, y: a } = e.attrs;
-  if (t === "native")
-    return /* @__PURE__ */ i(g, { as: "span", className: "inline", children: /* @__PURE__ */ i("span", { children: r }) });
-  const o = `${100 * f}% ${100 * m}%`, n = `${100 / (f - 1) * s}% ${100 / (m - 1) * a}%`;
-  return /* @__PURE__ */ i(g, { as: "span", className: "inline", children: /* @__PURE__ */ i(
-    "span",
-    {
-      role: "img",
-      "aria-label": r,
-      className: "inline-block h-[1.2em] w-[1.2em] align-text-bottom",
-      style: {
-        backgroundImage: `url(${E(t)})`,
-        backgroundSize: o,
-        backgroundPosition: n
-      }
-    }
-  ) });
+//#endregion
+//#region src/composed/extensions/emoji-node.tsx
+function T({ node: e }) {
+	let { native: t, set: n, x: r, y: a } = e.attrs;
+	if (n === "native") return /* @__PURE__ */ d(i, {
+		as: "span",
+		className: "inline",
+		children: /* @__PURE__ */ d("span", { children: t })
+	});
+	let o = `${100 / 60 * r}% ${100 / 60 * a}%`;
+	return /* @__PURE__ */ d(i, {
+		as: "span",
+		className: "inline",
+		children: /* @__PURE__ */ d("span", {
+			role: "img",
+			"aria-label": t,
+			className: "inline-block h-[1.2em] w-[1.2em] align-text-bottom",
+			style: {
+				backgroundImage: `url(${y(n)})`,
+				backgroundSize: "6100% 6100%",
+				backgroundPosition: o
+			}
+		})
+	});
 }
-const q = v.create({
-  name: "emojiNode",
-  group: "inline",
-  inline: !0,
-  atom: !0,
-  selectable: !1,
-  addAttributes() {
-    return {
-      id: { default: null },
-      native: { default: null },
-      set: { default: "native" },
-      x: { default: 0 },
-      y: { default: 0 }
-    };
-  },
-  renderText({ node: e }) {
-    return e.attrs.native ?? "";
-  },
-  parseHTML() {
-    return [{
-      tag: "span[data-emoji-id]",
-      getAttrs: (e) => {
-        const r = e;
-        return {
-          id: r.getAttribute("data-emoji-id"),
-          set: r.getAttribute("data-emoji-set") ?? "native",
-          x: parseInt(r.getAttribute("data-emoji-x") ?? "0", 10),
-          y: parseInt(r.getAttribute("data-emoji-y") ?? "0", 10),
-          native: r.textContent ?? ""
-        };
-      }
-    }];
-  },
-  renderHTML({ node: e }) {
-    return ["span", {
-      "data-emoji-id": e.attrs.id,
-      "data-emoji-set": e.attrs.set,
-      "data-emoji-x": e.attrs.x,
-      "data-emoji-y": e.attrs.y,
-      role: "img",
-      "aria-label": e.attrs.native
-    }, e.attrs.native ?? ""];
-  },
-  addNodeView() {
-    return w(H);
-  }
+var E = r.create({
+	name: "emojiNode",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	selectable: !1,
+	addAttributes() {
+		return {
+			id: { default: null },
+			native: { default: null },
+			set: { default: "native" },
+			x: { default: 0 },
+			y: { default: 0 }
+		};
+	},
+	renderText({ node: e }) {
+		return e.attrs.native ?? "";
+	},
+	parseHTML() {
+		return [{
+			tag: "span[data-emoji-id]",
+			getAttrs: (e) => {
+				let t = e;
+				return {
+					id: t.getAttribute("data-emoji-id"),
+					set: t.getAttribute("data-emoji-set") ?? "native",
+					x: parseInt(t.getAttribute("data-emoji-x") ?? "0", 10),
+					y: parseInt(t.getAttribute("data-emoji-y") ?? "0", 10),
+					native: t.textContent ?? ""
+				};
+			}
+		}];
+	},
+	renderHTML({ node: e }) {
+		return [
+			"span",
+			{
+				"data-emoji-id": e.attrs.id,
+				"data-emoji-set": e.attrs.set,
+				"data-emoji-x": e.attrs.x,
+				"data-emoji-y": e.attrs.y,
+				role: "img",
+				"aria-label": e.attrs.native
+			},
+			e.attrs.native ?? ""
+		];
+	},
+	addNodeView() {
+		return o(T);
+	}
 });
-function K({ emoji: e, set: r, size: t = "1.2em" }) {
-  return r === "native" ? /* @__PURE__ */ i("span", { style: { fontSize: t }, children: e.native }) : /* @__PURE__ */ i(
-    "span",
-    {
-      role: "img",
-      "aria-label": e.native,
-      className: "inline-block",
-      style: {
-        width: t,
-        height: t,
-        backgroundImage: `url(${E(r)})`,
-        backgroundSize: `${100 * f}% ${100 * m}%`,
-        backgroundPosition: `${100 / (f - 1) * e.x}% ${100 / (m - 1) * e.y}%`
-      }
-    }
-  );
+//#endregion
+//#region src/composed/extensions/emoji-suggestion.tsx
+function D({ emoji: e, set: t, size: n = "1.2em" }) {
+	return t === "native" ? /* @__PURE__ */ d("span", {
+		style: { fontSize: n },
+		children: e.native
+	}) : /* @__PURE__ */ d("span", {
+		role: "img",
+		"aria-label": e.native,
+		className: "inline-block",
+		style: {
+			width: n,
+			height: n,
+			backgroundImage: `url(${y(t)})`,
+			backgroundSize: "6100% 6100%",
+			backgroundPosition: `${100 / 60 * e.x}% ${100 / 60 * e.y}%`
+		}
+	});
 }
-const p = d.forwardRef(
-  ({ items: e, set: r, command: t }, s) => {
-    const [a, o] = d.useState(0);
-    return d.useEffect(() => o(0), [e]), d.useImperativeHandle(s, () => ({
-      onKeyDown: ({ event: n }) => n.key === "ArrowUp" ? (o((l) => (l + e.length - 1) % e.length), !0) : n.key === "ArrowDown" ? (o((l) => (l + 1) % e.length), !0) : n.key === "Enter" ? (e[a] && t(e[a]), !0) : !1
-    })), e.length ? /* @__PURE__ */ i("div", { role: "listbox", "aria-label": "Emoji suggestions", className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((n, l) => /* @__PURE__ */ u(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": l === a,
-        onClick: () => t(n),
-        className: k(
-          "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
-          l === a ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
-        ),
-        children: [
-          /* @__PURE__ */ i(K, { emoji: n, set: r, size: "1.25em" }),
-          /* @__PURE__ */ u("span", { className: "truncate", children: [
-            ":",
-            n.id,
-            ":"
-          ] })
-        ]
-      },
-      n.id
-    )) }) : null;
-  }
-);
-p.displayName = "EmojiList";
-function T(e) {
-  return () => {
-    let r = null, t = null, s = null;
-    return {
-      onStart: (a) => {
-        t = document.createElement("div"), t.style.position = "absolute", t.style.zIndex = "1400";
-        const o = a.clientRect?.();
-        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), document.body.appendChild(t), r = j(t), r.render(
-          /* @__PURE__ */ i(
-            p,
-            {
-              ref: (n) => {
-                s = n;
-              },
-              items: a.items,
-              set: e,
-              command: (n) => a.command(n)
-            }
-          )
-        );
-      },
-      onUpdate: (a) => {
-        if (!r || !t) return;
-        const o = a.clientRect?.();
-        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), r.render(
-          /* @__PURE__ */ i(
-            p,
-            {
-              ref: (n) => {
-                s = n;
-              },
-              items: a.items,
-              set: e,
-              command: (n) => a.command(n)
-            }
-          )
-        );
-      },
-      onKeyDown: (a) => a.event.key === "Escape" ? (t && (r?.unmount(), t.remove(), t = null, r = null), !0) : s?.onKeyDown(a) ?? !1,
-      onExit: () => {
-        t && (r?.unmount(), t.remove(), t = null, r = null);
-      }
-    };
-  };
+var O = u.forwardRef(({ items: t, set: n, command: r }, i) => {
+	let [a, o] = u.useState(0);
+	return u.useEffect(() => o(0), [t]), u.useImperativeHandle(i, () => ({ onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (o((e) => (e + t.length - 1) % t.length), !0) : e.key === "ArrowDown" ? (o((e) => (e + 1) % t.length), !0) : e.key === "Enter" ? (t[a] && r(t[a]), !0) : !1 })), t.length ? /* @__PURE__ */ d("div", {
+		role: "listbox",
+		"aria-label": "Emoji suggestions",
+		className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover",
+		children: t.map((t, i) => /* @__PURE__ */ f("button", {
+			type: "button",
+			role: "option",
+			"aria-selected": i === a,
+			onClick: () => r(t),
+			className: e("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm", i === a ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
+			children: [/* @__PURE__ */ d(D, {
+				emoji: t,
+				set: n,
+				size: "1.25em"
+			}), /* @__PURE__ */ f("span", {
+				className: "truncate",
+				children: [
+					":",
+					t.id,
+					":"
+				]
+			})]
+		}, t.id))
+	}) : null;
+});
+O.displayName = "EmojiList";
+function k(e) {
+	return () => {
+		let t = null, n = null, r = null;
+		return {
+			onStart: (i) => {
+				n = document.createElement("div"), n.style.position = "absolute", n.style.zIndex = "1400";
+				let a = i.clientRect?.();
+				a && (n.style.left = `${a.left}px`, n.style.top = `${a.bottom + 4}px`), document.body.appendChild(n), t = h(n), t.render(/* @__PURE__ */ d(O, {
+					ref: (e) => {
+						r = e;
+					},
+					items: i.items,
+					set: e,
+					command: (e) => i.command(e)
+				}));
+			},
+			onUpdate: (i) => {
+				if (!t || !n) return;
+				let a = i.clientRect?.();
+				a && (n.style.left = `${a.left}px`, n.style.top = `${a.bottom + 4}px`), t.render(/* @__PURE__ */ d(O, {
+					ref: (e) => {
+						r = e;
+					},
+					items: i.items,
+					set: e,
+					command: (e) => i.command(e)
+				}));
+			},
+			onKeyDown: (e) => e.event.key === "Escape" ? (n && (t?.unmount(), n.remove(), n = null, t = null), !0) : r?.onKeyDown(e) ?? !1,
+			onExit: () => {
+				n && (t?.unmount(), n.remove(), n = null, t = null);
+			}
+		};
+	};
 }
-function G(e = "native") {
-  return $.create({
-    name: "emojiSuggestion",
-    addProseMirrorPlugins() {
-      return [
-        S({
-          pluginKey: new R("emojiSuggestion"),
-          editor: this.editor,
-          char: ":",
-          items: async ({ query: r }) => {
-            const t = await D(e);
-            return C(t, r, 8);
-          },
-          command: ({ editor: r, range: t, props: s }) => {
-            const a = s;
-            r.chain().focus().deleteRange(t).insertContent({
-              type: "emojiNode",
-              attrs: { id: a.id, native: a.native, set: e, x: a.x, y: a.y }
-            }).run();
-          },
-          render: T(e)
-        })
-      ];
-    }
-  });
+function A(e = "native") {
+	return a.create({
+		name: "emojiSuggestion",
+		addProseMirrorPlugins() {
+			return [s({
+				pluginKey: new l("emojiSuggestion"),
+				editor: this.editor,
+				char: ":",
+				items: async ({ query: t }) => w(await S(e), t, 8),
+				command: ({ editor: t, range: n, props: r }) => {
+					let i = r;
+					t.chain().focus().deleteRange(n).insertContent({
+						type: "emojiNode",
+						attrs: {
+							id: i.id,
+							native: i.native,
+							set: e,
+							x: i.x,
+							y: i.y
+						}
+					}).run();
+				},
+				render: k(e)
+			})];
+		}
+	});
 }
-const b = d.forwardRef(
-  ({ items: e, command: r }, t) => {
-    const [s, a] = d.useState(0);
-    return d.useEffect(() => a(0), [e]), d.useImperativeHandle(t, () => ({
-      onKeyDown: ({ event: o }) => o.key === "ArrowUp" ? (a((n) => (n + e.length - 1) % e.length), !0) : o.key === "ArrowDown" ? (a((n) => (n + 1) % e.length), !0) : o.key === "Enter" ? (e[s] && r(e[s]), !0) : !1
-    })), e.length ? /* @__PURE__ */ i("div", { role: "listbox", "aria-label": "Mention suggestions", className: "z-popover overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((o, n) => /* @__PURE__ */ u(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": n === s,
-        onClick: () => r(o),
-        className: k(
-          "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
-          n === s ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
-        ),
-        children: [
-          o.avatar ? /* @__PURE__ */ i("img", { src: o.avatar, alt: "", className: "h-ico-md w-ico-md rounded-ds-full object-cover" }) : /* @__PURE__ */ i("span", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-accent-2 text-[10px] font-semibold text-accent-11", children: o.label.charAt(0).toUpperCase() }),
-          /* @__PURE__ */ i("span", { children: o.label })
-        ]
-      },
-      o.id
-    )) }) : null;
-  }
-);
-b.displayName = "MentionList";
-function J(e) {
-  return () => {
-    let r = null, t = null, s = null;
-    return {
-      onStart: (a) => {
-        t = document.createElement("div"), t.style.position = "absolute", t.style.zIndex = "1400";
-        const o = a.clientRect?.();
-        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), document.body.appendChild(t), r = j(t), r.render(
-          /* @__PURE__ */ i(
-            b,
-            {
-              ref: (n) => {
-                s = n;
-              },
-              items: a.items,
-              command: (n) => {
-                a.command({ id: n.id, label: n.label }), e?.(n);
-              }
-            }
-          )
-        );
-      },
-      onUpdate: (a) => {
-        if (!r || !t) return;
-        const o = a.clientRect?.();
-        o && (t.style.left = `${o.left}px`, t.style.top = `${o.bottom + 4}px`), r.render(
-          /* @__PURE__ */ i(
-            b,
-            {
-              ref: (n) => {
-                s = n;
-              },
-              items: a.items,
-              command: (n) => {
-                a.command({ id: n.id, label: n.label }), e?.(n);
-              }
-            }
-          )
-        );
-      },
-      onKeyDown: (a) => a.event.key === "Escape" ? (t && (r?.unmount(), t.remove(), t = null, r = null), !0) : s?.onKeyDown(a) ?? !1,
-      onExit: () => {
-        t && (r?.unmount(), t.remove(), t = null, r = null);
-      }
-    };
-  };
+//#endregion
+//#region src/composed/extensions/mention-suggestion.tsx
+var j = u.forwardRef(({ items: t, command: n }, r) => {
+	let [i, a] = u.useState(0);
+	return u.useEffect(() => a(0), [t]), u.useImperativeHandle(r, () => ({ onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (a((e) => (e + t.length - 1) % t.length), !0) : e.key === "ArrowDown" ? (a((e) => (e + 1) % t.length), !0) : e.key === "Enter" ? (t[i] && n(t[i]), !0) : !1 })), t.length ? /* @__PURE__ */ d("div", {
+		role: "listbox",
+		"aria-label": "Mention suggestions",
+		className: "z-popover overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover",
+		children: t.map((t, r) => /* @__PURE__ */ f("button", {
+			type: "button",
+			role: "option",
+			"aria-selected": r === i,
+			onClick: () => n(t),
+			className: e("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm", r === i ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
+			children: [t.avatar ? /* @__PURE__ */ d("img", {
+				src: t.avatar,
+				alt: "",
+				className: "h-ico-md w-ico-md rounded-ds-full object-cover"
+			}) : /* @__PURE__ */ d("span", {
+				className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-accent-2 text-[10px] font-semibold text-accent-11",
+				children: t.label.charAt(0).toUpperCase()
+			}), /* @__PURE__ */ d("span", { children: t.label })]
+		}, t.id))
+	}) : null;
+});
+j.displayName = "MentionList";
+function M(e) {
+	return () => {
+		let t = null, n = null, r = null;
+		return {
+			onStart: (i) => {
+				n = document.createElement("div"), n.style.position = "absolute", n.style.zIndex = "1400";
+				let a = i.clientRect?.();
+				a && (n.style.left = `${a.left}px`, n.style.top = `${a.bottom + 4}px`), document.body.appendChild(n), t = h(n), t.render(/* @__PURE__ */ d(j, {
+					ref: (e) => {
+						r = e;
+					},
+					items: i.items,
+					command: (t) => {
+						i.command({
+							id: t.id,
+							label: t.label
+						}), e?.(t);
+					}
+				}));
+			},
+			onUpdate: (i) => {
+				if (!t || !n) return;
+				let a = i.clientRect?.();
+				a && (n.style.left = `${a.left}px`, n.style.top = `${a.bottom + 4}px`), t.render(/* @__PURE__ */ d(j, {
+					ref: (e) => {
+						r = e;
+					},
+					items: i.items,
+					command: (t) => {
+						i.command({
+							id: t.id,
+							label: t.label
+						}), e?.(t);
+					}
+				}));
+			},
+			onKeyDown: (e) => e.event.key === "Escape" ? (n && (t?.unmount(), n.remove(), n = null, t = null), !0) : r?.onKeyDown(e) ?? !1,
+			onExit: () => {
+				n && (t?.unmount(), n.remove(), n = null, t = null);
+			}
+		};
+	};
 }
-export {
-  q as E,
-  O as F,
-  J as a,
-  W as b,
-  G as c,
-  D as l
-};
+//#endregion
+export { C as a, S as i, A as n, v as o, E as r, M as t };