@underverse-ui/underverse 1.0.76 → 1.0.77

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.76",
+  "version": "1.0.77",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -3945,7 +3945,8 @@ var EmojiPicker = ({
   showSearch = true,
   showCategoryNav = true,
   columns = 9,
-  maxHeight = "20rem"
+  maxHeight = "20rem",
+  chrome = "standalone"
 }) => {
   const t = useSmartTranslations("UEditor");
   const [search, setSearch] = (0, import_react6.useState)("");
@@ -3956,6 +3957,11 @@ var EmojiPicker = ({
   const resolvedSearchPlaceholder = searchPlaceholder ?? t("emojiPicker.searchPlaceholder");
   const resolvedEmptyText = emptyText ?? t("emojiPicker.noResults");
   const resolvedEmptyHint = emptyHint ?? t("emojiPicker.tryDifferentSearch");
+  const resolvedColumns = Math.max(1, Math.floor(columns));
+  const isEmbedded = chrome === "embedded";
+  const gridStyle = {
+    gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`
+  };
   const filteredCategories = (0, import_react6.useMemo)(() => {
     if (!search.trim()) return EMOJI_LIST;
     const query = search.toLowerCase();
@@ -3995,7 +4001,6 @@ var EmojiPicker = ({
   (0, import_react6.useEffect)(() => {
     isUserScrolling.current = true;
   }, []);
-  const gridColsClass = `grid-cols-${columns}`;
   const renderEmojiCategory = (category, assignRef2 = false) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
@@ -4004,7 +4009,7 @@ var EmojiPicker = ({
       } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "sticky top-0 z-10 bg-card py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: category.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("grid gap-1", gridColsClass), children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid gap-1", style: gridStyle, children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           EmojiGridButton,
           {
             emoji: emoji.emoji,
@@ -4037,50 +4042,60 @@ var EmojiPicker = ({
       isUserScrolling.current = true;
     }, 500);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex max-h-128 w-96 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl", className), children: [
-    showSearch && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 border-b bg-muted/30 p-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "input",
-        {
-          type: "text",
-          placeholder: resolvedSearchPlaceholder,
-          value: search,
-          onChange: (e) => setSearch(e.target.value),
-          className: cn(
-            "w-full rounded-lg border border-border bg-background py-2 pl-9 pr-9 text-sm",
-            "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
-          )
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex max-h-128 w-96 flex-col overflow-hidden",
+        isEmbedded ? "bg-transparent" : "rounded-2xl border border-border bg-card shadow-xl",
+        className
       ),
-      search && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => setSearch(""),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: scrollContainerRef, className: "shrink overflow-y-auto px-3 py-2", style: { height: maxHeight }, children: search ? searchResultContent : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => renderEmojiCategory(category, true)) }) }),
-    !search && showCategoryNav && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex shrink-0 items-center justify-around border-t bg-muted/30 px-2 py-2", children: EMOJI_LIST.map((category) => {
-      const IconComponent = CATEGORY_ICONS[category.id] || import_lucide_react4.Smile;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleCategoryClick(category.id),
-          className: cn(
-            "rounded-lg p-2 transition-colors",
-            activeCategory === category.id ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+      children: [
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("shrink-0 border-b p-3", isEmbedded ? "bg-transparent" : "bg-muted/30"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "input",
+            {
+              type: "text",
+              placeholder: resolvedSearchPlaceholder,
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: cn(
+                "w-full rounded-lg border border-border bg-background py-2 pl-9 pr-9 text-sm",
+                "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
+              )
+            }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs font-medium", children: category.name }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComponent, { className: "h-5 w-5" }) }) })
-        },
-        category.id
-      );
-    }) })
-  ] });
+          search && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSearch(""),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: scrollContainerRef, className: "shrink overflow-y-auto px-3 py-2", style: { height: maxHeight }, children: search ? searchResultContent : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => renderEmojiCategory(category, true)) }) }),
+        !search && showCategoryNav && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("flex shrink-0 items-center justify-around border-t px-2 py-2", isEmbedded ? "bg-transparent" : "bg-muted/30"), children: EMOJI_LIST.map((category) => {
+          const IconComponent = CATEGORY_ICONS[category.id] || import_lucide_react4.Smile;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleCategoryClick(category.id),
+              className: cn(
+                "rounded-lg p-2 transition-colors",
+                activeCategory === category.id ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs font-medium", children: category.name }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComponent, { className: "h-5 w-5" }) }) })
+            },
+            category.id
+          );
+        }) })
+      ]
+    }
+  );
 };
 var EmojiPicker_default = EmojiPicker;
 
@@ -23882,7 +23897,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 // src/components/UEditor/emoji-picker.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var EmojiPicker2 = ({ onSelect }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EmojiPicker, { onEmojiSelect: onSelect });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EmojiPicker, { onEmojiSelect: onSelect, chrome: "embedded" });
 };
 
 // src/components/UEditor/typography-options.ts
@@ -24411,6 +24426,7 @@ var EditorToolbar = ({
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       DropdownMenu,
       {
+        contentClassName: "p-0 overflow-hidden",
         trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.emoji"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.Smile, { className: "w-4 h-4" }) }),
         children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(