@underverse-ui/underverse 1.0.76 → 1.0.77

package/dist/index.d.cts

@@ -215,6 +215,7 @@ interface EmojiPickerProps {
     showCategoryNav?: boolean;
     columns?: number;
     maxHeight?: string;
+    chrome?: "standalone" | "embedded";
 }
 declare const EmojiPicker: React__default.FC<EmojiPickerProps>;
 

package/dist/index.d.ts

@@ -215,6 +215,7 @@ interface EmojiPickerProps {
     showCategoryNav?: boolean;
     columns?: number;
     maxHeight?: string;
+    chrome?: "standalone" | "embedded";
 }
 declare const EmojiPicker: React__default.FC<EmojiPickerProps>;
 

package/dist/index.js

@@ -3760,7 +3760,8 @@ var EmojiPicker = ({
   showSearch = true,
   showCategoryNav = true,
   columns = 9,
-  maxHeight = "20rem"
+  maxHeight = "20rem",
+  chrome = "standalone"
 }) => {
   const t = useSmartTranslations("UEditor");
   const [search, setSearch] = useState5("");
@@ -3771,6 +3772,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 = useMemo3(() => {
     if (!search.trim()) return EMOJI_LIST;
     const query = search.toLowerCase();
@@ -3810,7 +3816,6 @@ var EmojiPicker = ({
   useEffect3(() => {
     isUserScrolling.current = true;
   }, []);
-  const gridColsClass = `grid-cols-${columns}`;
   const renderEmojiCategory = (category, assignRef2 = false) => /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -3819,7 +3824,7 @@ var EmojiPicker = ({
       } : void 0,
       children: [
         /* @__PURE__ */ jsx12("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__ */ jsx12("div", { className: cn("grid gap-1", gridColsClass), children: category.emojis.map((emoji) => /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx12("div", { className: "grid gap-1", style: gridStyle, children: category.emojis.map((emoji) => /* @__PURE__ */ jsx12(
           EmojiGridButton,
           {
             emoji: emoji.emoji,
@@ -3852,50 +3857,60 @@ var EmojiPicker = ({
       isUserScrolling.current = true;
     }, 500);
   };
-  return /* @__PURE__ */ jsxs7("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__ */ jsx12("div", { className: "shrink-0 border-b bg-muted/30 p-3", children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx12(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx12(
-        "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__ */ jsxs7(
+    "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__ */ jsx12(
-        "button",
-        {
-          type: "button",
-          onClick: () => setSearch(""),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsx12(X2, { className: "h-4 w-4" })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx12("div", { ref: scrollContainerRef, className: "shrink overflow-y-auto px-3 py-2", style: { height: maxHeight }, children: search ? searchResultContent : /* @__PURE__ */ jsx12("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => renderEmojiCategory(category, true)) }) }),
-    !search && showCategoryNav && /* @__PURE__ */ jsx12("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] || Smile;
-      return /* @__PURE__ */ jsx12(
-        "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__ */ jsx12("div", { className: cn("shrink-0 border-b p-3", isEmbedded ? "bg-transparent" : "bg-muted/30"), children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx12(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx12(
+            "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__ */ jsx12(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium", children: category.name }), children: /* @__PURE__ */ jsx12("span", { className: "inline-flex", children: /* @__PURE__ */ jsx12(IconComponent, { className: "h-5 w-5" }) }) })
-        },
-        category.id
-      );
-    }) })
-  ] });
+          search && /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSearch(""),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx12(X2, { className: "h-4 w-4" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx12("div", { ref: scrollContainerRef, className: "shrink overflow-y-auto px-3 py-2", style: { height: maxHeight }, children: search ? searchResultContent : /* @__PURE__ */ jsx12("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => renderEmojiCategory(category, true)) }) }),
+        !search && showCategoryNav && /* @__PURE__ */ jsx12("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] || Smile;
+          return /* @__PURE__ */ jsx12(
+            "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__ */ jsx12(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium", children: category.name }), children: /* @__PURE__ */ jsx12("span", { className: "inline-flex", children: /* @__PURE__ */ jsx12(IconComponent, { className: "h-5 w-5" }) }) })
+            },
+            category.id
+          );
+        }) })
+      ]
+    }
+  );
 };
 var EmojiPicker_default = EmojiPicker;
 
@@ -23762,7 +23777,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 // src/components/UEditor/emoji-picker.tsx
 import { jsx as jsx79 } from "react/jsx-runtime";
 var EmojiPicker2 = ({ onSelect }) => {
-  return /* @__PURE__ */ jsx79(EmojiPicker, { onEmojiSelect: onSelect });
+  return /* @__PURE__ */ jsx79(EmojiPicker, { onEmojiSelect: onSelect, chrome: "embedded" });
 };
 
 // src/components/UEditor/typography-options.ts
@@ -24291,6 +24306,7 @@ var EditorToolbar = ({
     /* @__PURE__ */ jsx80(
       DropdownMenu,
       {
+        contentClassName: "p-0 overflow-hidden",
         trigger: /* @__PURE__ */ jsx80(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.emoji"), children: /* @__PURE__ */ jsx80(Smile3, { className: "w-4 h-4" }) }),
         children: /* @__PURE__ */ jsx80(