@tightknitai/block-kitchen 0.8.3 → 0.8.4

package/dist/index.cjs

@@ -4,10 +4,10 @@ var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var lucideReact = require('lucide-react');
 var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var slackBlockKitValidator = require('@tightknitai/slack-block-kit-validator');
 var nanoid = require('nanoid');
@@ -53,6 +53,35 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // src/components/block-kitchen.tsx
+function makeEmojiHook(byName) {
+  return (data, parse) => {
+    const entry = byName.get(data.name);
+    if (entry) {
+      if (entry.url) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: entry.url,
+            alt: `:${data.name}:`,
+            title: `:${data.name}:`,
+            className: "bk-custom-emoji",
+            style: {
+              display: "inline-block",
+              width: "1.25em",
+              height: "1.25em",
+              verticalAlign: "-0.25em",
+              objectFit: "contain"
+            }
+          }
+        );
+      }
+      if (entry.alias) {
+        return parse({ name: entry.alias, unicode: data.unicode, skin_tone: data.skin_tone });
+      }
+    }
+    return parse(data);
+  };
+}
 var defaultPalette = [
   {
     name: "Agents",
@@ -1549,50 +1578,63 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
+var EMPTY = {
+  customEmojis: [],
+  byName: /* @__PURE__ */ new Map()
+};
+var CustomEmojiContext = React.createContext(EMPTY);
+function CustomEmojiProvider({ customEmojis, children }) {
+  const value = React.useMemo(() => {
+    if (!customEmojis || customEmojis.length === 0) {
+      return EMPTY;
+    }
+    const byName = /* @__PURE__ */ new Map();
+    for (const emoji of customEmojis) {
+      byName.set(emoji.name, emoji);
+    }
+    return { customEmojis, byName };
+  }, [customEmojis]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CustomEmojiContext.Provider, { value, children });
+}
+function useCustomEmojis() {
+  return React.useContext(CustomEmojiContext);
+}
 
 // src/lib/error-grouping.ts
 function toValidatorSurface(surface) {
   return surface === "app_home" ? "home" : surface;
 }
-function extractBlockIndex(path) {
-  if (!path || path === "(root)") {
-    return null;
-  }
-  const match = /^\/(\d+)(?:\/|$)/.exec(path);
-  if (!match) {
-    return null;
+var BLOCK_PREFIX = /^blocks\[(\d+)\]/;
+function extractBlockIndex(raw) {
+  const match = BLOCK_PREFIX.exec(raw);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function toBlockMessage(raw) {
+  const rest = raw.replace(BLOCK_PREFIX, "");
+  if (rest.startsWith(":")) {
+    return rest.replace(/^:\s*/, "");
   }
-  return Number.parseInt(match[1], 10);
+  return rest.replace(/^\./, "");
 }
-function stripBlockPrefix(path) {
-  return path.replace(/^\/\d+/, "") || "(root)";
+function toGeneralMessage(raw) {
+  return raw.startsWith("(root)") ? raw.replace(/^\(root\):?\s*/, "") : raw;
 }
 function groupValidatorErrors(errors, blocks) {
   const byBlockId = /* @__PURE__ */ new Map();
   const general = [];
   for (const raw of errors) {
-    const space = raw.indexOf(" ");
-    const path = space === -1 ? "(root)" : raw.slice(0, space);
-    const message = space === -1 ? raw : raw.slice(space + 1);
-    const idx = extractBlockIndex(path);
+    const idx = extractBlockIndex(raw);
     if (idx === null || idx >= blocks.length) {
-      general.push(raw);
+      general.push(toGeneralMessage(raw));
       continue;
     }
     const id = blocks[idx].id;
-    const friendly = formatMessage(stripBlockPrefix(path), message);
     const bucket = byBlockId.get(id) ?? [];
-    bucket.push(friendly);
+    bucket.push(toBlockMessage(raw));
     byBlockId.set(id, bucket);
   }
   return { byBlockId, general, total: errors.length };
 }
-function formatMessage(relativePath, message) {
-  if (relativePath === "" || relativePath === "(root)") {
-    return message;
-  }
-  return `${relativePath}: ${message}`;
-}
 
 // src/lib/url-safety.ts
 var SAFE_LINK_PROTOCOLS = /^(https?|ircs?|mailto|tel|sms|xmpp)$/i;
@@ -1712,10 +1754,47 @@ function toSlackBlocks(blocks) {
   });
 }
 
+// src/lib/validation-sanitize.ts
+var VALIDATION_EMOJI_PLACEHOLDER = "white_check_mark";
+function rewriteEmojiNames(value) {
+  if (Array.isArray(value)) {
+    let changed = false;
+    const next = value.map((item) => {
+      const rewritten = rewriteEmojiNames(item);
+      if (rewritten !== item) {
+        changed = true;
+      }
+      return rewritten;
+    });
+    return changed ? next : value;
+  }
+  if (value !== null && typeof value === "object") {
+    const source = value;
+    let changed = false;
+    const next = {};
+    for (const key of Object.keys(source)) {
+      const rewritten = rewriteEmojiNames(source[key]);
+      next[key] = rewritten;
+      if (rewritten !== source[key]) {
+        changed = true;
+      }
+    }
+    if (next.type === "emoji" && typeof next.name === "string" && next.name !== VALIDATION_EMOJI_PLACEHOLDER) {
+      next.name = VALIDATION_EMOJI_PLACEHOLDER;
+      changed = true;
+    }
+    return changed ? next : value;
+  }
+  return value;
+}
+function stripCustomEmojiForValidation(blocks) {
+  return blocks.map((block) => rewriteEmojiNames(block));
+}
+
 // src/state/use-block-kit-validation.ts
 var DEBOUNCE_MS = 150;
 function computeValidation(blocks, surface) {
-  const payload = toSlackBlocks(blocks.map((b) => b.block));
+  const payload = stripCustomEmojiForValidation(toSlackBlocks(blocks.map((b) => b.block)));
   const result = slackBlockKitValidator.validateBlockKit(payload, {
     target: "blocks",
     surface: toValidatorSurface(surface)
@@ -3561,52 +3640,55 @@ function ContextEditor({ block, onChange }) {
       {
         label: "Items",
         help: "Shown in a horizontal row, usually as footnote-style content. Slack supports up to 10 items.",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: elements.map((el, idx) => {
-          if (el.type === "mrkdwn" || el.type === "plain_text") {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              TextItemCard,
-              {
-                index: idx,
-                element: el,
-                onChange: (next) => updateAt(idx, () => next),
-                onRemove: () => removeAt(idx)
-              },
-              idx
-            );
-          }
-          if (el.type === "image" && "image_url" in el) {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              ImageItemCard,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          elements.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-md border border-dashed bg-muted/20 px-3 py-2 text-xs text-muted-foreground", children: "No items yet \u2014 a context block needs at least one. Add text or an image below, or delete the block if you don't need it." }) : null,
+          elements.map((el, idx) => {
+            if (el.type === "mrkdwn" || el.type === "plain_text") {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TextItemCard,
+                {
+                  index: idx,
+                  element: el,
+                  onChange: (next) => updateAt(idx, () => next),
+                  onRemove: () => removeAt(idx)
+                },
+                idx
+              );
+            }
+            if (el.type === "image" && "image_url" in el) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ImageItemCard,
+                {
+                  index: idx,
+                  element: el,
+                  onChange: (next) => updateAt(idx, () => next),
+                  onRemove: () => removeAt(idx)
+                },
+                idx
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                index: idx,
-                element: el,
-                onChange: (next) => updateAt(idx, () => next),
-                onRemove: () => removeAt(idx)
+                className: "flex items-center justify-between rounded border bg-muted/30 px-2 py-1.5 text-xs text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Item not editable in the visual builder" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Remove item",
+                      onClick: () => removeAt(idx),
+                      className: "text-muted-foreground hover:text-destructive",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+                    }
+                  )
+                ]
               },
               idx
             );
-          }
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "flex items-center justify-between rounded border bg-muted/30 px-2 py-1.5 text-xs text-muted-foreground",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Item not editable in the visual builder" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Remove item",
-                    onClick: () => removeAt(idx),
-                    className: "text-muted-foreground hover:text-destructive",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
-                  }
-                )
-              ]
-            },
-            idx
-          );
-        }) })
+          })
+        ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
@@ -3745,12 +3827,423 @@ function ImageItemCard({
 function DividerEditor() {
   return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "A horizontal line that separates content. This block has no options to configure." });
 }
+
+// src/lib/emoji-data.ts
+var TONE_CODEPOINT_TO_SKIN_TONE = {
+  "1F3FB": 2,
+  "1F3FC": 3,
+  "1F3FD": 4,
+  "1F3FE": 5,
+  "1F3FF": 6
+};
+var CATEGORY_ORDER = [
+  "Smileys & Emotion",
+  "People & Body",
+  "Animals & Nature",
+  "Food & Drink",
+  "Travel & Places",
+  "Activities",
+  "Objects",
+  "Symbols",
+  "Flags"
+];
+function codepointsToGlyph(unified) {
+  return unified.split("-").map((cp) => {
+    const n = Number.parseInt(cp, 16);
+    return Number.isFinite(n) ? String.fromCodePoint(n) : "";
+  }).join("");
+}
+function unifiedToUnicode(unified) {
+  return unified.toLowerCase();
+}
+function composeTextEmoji(name, skinTone) {
+  if (skinTone && skinTone >= 2 && skinTone <= 6) {
+    return `:${name}::skin-tone-${skinTone}:`;
+  }
+  return `:${name}:`;
+}
+function buildEmojiIndex(raw) {
+  const all = [];
+  const byName = /* @__PURE__ */ new Map();
+  const byUnified = /* @__PURE__ */ new Map();
+  for (const r of raw) {
+    if (!CATEGORY_ORDER.includes(r.category)) {
+      continue;
+    }
+    const shortNames = r.short_names?.length ? r.short_names : [r.short_name];
+    const skinUnified = {};
+    if (r.skin_variations) {
+      for (const [toneKey, variation] of Object.entries(r.skin_variations)) {
+        const skinTone = TONE_CODEPOINT_TO_SKIN_TONE[toneKey];
+        if (skinTone && variation?.unified) {
+          skinUnified[skinTone] = variation.unified;
+        }
+      }
+    }
+    const datum = {
+      name: shortNames[0],
+      shortNames,
+      unified: r.unified,
+      category: r.category,
+      sortOrder: r.sort_order,
+      skinUnified
+    };
+    all.push(datum);
+    byUnified.set(r.unified.toUpperCase(), datum);
+    for (const sn of shortNames) {
+      if (!byName.has(sn)) {
+        byName.set(sn, datum);
+      }
+    }
+  }
+  all.sort((a, b) => a.sortOrder - b.sortOrder);
+  const byCategory = CATEGORY_ORDER.map((category) => ({
+    category,
+    emoji: all.filter((e) => e.category === category)
+  })).filter((group) => group.emoji.length > 0);
+  return { all, byName, byUnified, byCategory };
+}
+var indexPromise = null;
+var cachedIndex = null;
+async function loadEmojiIndex() {
+  if (cachedIndex) {
+    return cachedIndex;
+  }
+  if (!indexPromise) {
+    indexPromise = import('emoji-datasource/emoji.json').then((mod) => {
+      const raw = mod.default ?? mod;
+      cachedIndex = buildEmojiIndex(raw);
+      return cachedIndex;
+    }).catch((err) => {
+      indexPromise = null;
+      throw err;
+    });
+  }
+  return indexPromise;
+}
+function getEmojiIndex() {
+  return cachedIndex;
+}
+
+// src/lib/emoji-recents.ts
+var STORAGE_KEY = "bk:emoji-recents";
+var SKIN_TONE_KEY = "bk:emoji-skin-tone";
+var MAX_RECENTS = 24;
+function readEmojiSkinTone() {
+  try {
+    const raw = globalThis.localStorage?.getItem(SKIN_TONE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const n = Number.parseInt(raw, 10);
+    return n >= 2 && n <= 6 ? n : null;
+  } catch {
+    return null;
+  }
+}
+function writeEmojiSkinTone(skinTone) {
+  try {
+    if (skinTone && skinTone >= 2 && skinTone <= 6) {
+      globalThis.localStorage?.setItem(SKIN_TONE_KEY, String(skinTone));
+    } else {
+      globalThis.localStorage?.removeItem(SKIN_TONE_KEY);
+    }
+  } catch {
+  }
+}
+function readEmojiRecents() {
+  try {
+    const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter((n) => typeof n === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function pushEmojiRecent(name) {
+  const next = [name, ...readEmojiRecents().filter((n) => n !== name)].slice(0, MAX_RECENTS);
+  try {
+    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(next));
+  } catch {
+  }
+  return next;
+}
+var SKIN_TONES = [
+  { tone: null, label: "Default", swatch: "\u270B" },
+  { tone: 2, label: "Light", swatch: "\u270B\u{1F3FB}" },
+  { tone: 3, label: "Medium-light", swatch: "\u270B\u{1F3FC}" },
+  { tone: 4, label: "Medium", swatch: "\u270B\u{1F3FD}" },
+  { tone: 5, label: "Medium-dark", swatch: "\u270B\u{1F3FE}" },
+  { tone: 6, label: "Dark", swatch: "\u270B\u{1F3FF}" }
+];
+function EmojiPicker({
+  onSelect,
+  autoFocus = true
+}) {
+  const { customEmojis } = useCustomEmojis();
+  const [index, setIndex] = React.useState(null);
+  const [loadError, setLoadError] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [skinTone, setSkinTone] = React.useState(() => readEmojiSkinTone());
+  const [recents, setRecents] = React.useState(() => readEmojiRecents());
+  const searchRef = React.useRef(null);
+  React.useEffect(() => {
+    let active = true;
+    loadEmojiIndex().then((idx) => {
+      if (active) {
+        setIndex(idx);
+      }
+    }).catch(() => {
+      if (active) {
+        setLoadError(true);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  React.useEffect(() => {
+    if (autoFocus) {
+      searchRef.current?.focus();
+    }
+  }, [autoFocus]);
+  const customByName = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const e of customEmojis) {
+      map.set(e.name, e);
+    }
+    return map;
+  }, [customEmojis]);
+  const customImageEmoji = React.useMemo(() => customEmojis.filter((e) => e.url), [customEmojis]);
+  const handlePick = (selection) => {
+    setRecents(pushEmojiRecent(selection.name));
+    onSelect(selection);
+  };
+  const handleSkinTone = (tone) => {
+    setSkinTone(tone);
+    writeEmojiSkinTone(tone);
+  };
+  const sections = React.useMemo(() => {
+    if (!index) {
+      return [];
+    }
+    const trimmed = query.trim().toLowerCase();
+    if (trimmed) {
+      const standard = index.all.filter((d) => d.shortNames.some((sn) => sn.includes(trimmed))).slice(0, 120).map((datum) => ({ datum }));
+      const custom = customImageEmoji.filter((e) => e.name.toLowerCase().includes(trimmed)).map((custom2) => ({ custom: custom2 }));
+      return [{ key: "search", title: "Search results", emoji: [...custom, ...standard] }];
+    }
+    const out = [];
+    if (recents.length > 0) {
+      const recentEmoji = recents.map((name) => {
+        const custom = customByName.get(name);
+        if (custom?.url) {
+          return { custom };
+        }
+        const datum = index.byName.get(name);
+        return datum ? { datum } : null;
+      }).filter((e) => e !== null);
+      if (recentEmoji.length > 0) {
+        out.push({ key: "recents", title: "Frequently used", emoji: recentEmoji });
+      }
+    }
+    if (customImageEmoji.length > 0) {
+      out.push({ key: "custom", title: "Custom", emoji: customImageEmoji.map((custom) => ({ custom })) });
+    }
+    for (const group of index.byCategory) {
+      out.push({ key: group.category, title: group.category, emoji: group.emoji.map((datum) => ({ datum })) });
+    }
+    return out;
+  }, [index, query, recents, customByName, customImageEmoji]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bk-emoji-picker flex w-[320px] max-w-[90vw] flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          ref: searchRef,
+          value: query,
+          placeholder: "Search emoji\u2026",
+          "aria-label": "Search emoji",
+          onChange: (e) => setQuery(e.target.value),
+          className: "h-8"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SkinToneSelector, { value: skinTone, onChange: handleSkinTone })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 overflow-y-auto pr-1", children: loadError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-xs text-muted-foreground", children: "Couldn't load emoji." }) : !index ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-xs text-muted-foreground", children: "Loading emoji\u2026" }) : sections.every((s) => s.emoji.length === 0) ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-xs text-muted-foreground", children: "No emoji found." }) : sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-background px-1 py-1 text-[11px] font-medium text-muted-foreground", children: section.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-8 gap-0.5", children: section.emoji.map(
+        (entry, i) => entry.custom ? /* @__PURE__ */ jsxRuntime.jsx(
+          CustomEmojiButton,
+          {
+            emoji: entry.custom,
+            onPick: handlePick
+          },
+          `${section.key}-${entry.custom.name}-${i}`
+        ) : entry.datum ? /* @__PURE__ */ jsxRuntime.jsx(
+          StandardEmojiButton,
+          {
+            datum: entry.datum,
+            skinTone,
+            onPick: handlePick
+          },
+          `${section.key}-${entry.datum.name}-${i}`
+        ) : null
+      ) })
+    ] }, section.key)) })
+  ] });
+}
+function resolveStandard(datum, skinTone) {
+  const tonedUnified = skinTone ? datum.skinUnified[skinTone] : void 0;
+  return {
+    name: datum.name,
+    unicode: unifiedToUnicode(tonedUnified ?? datum.unified),
+    src: null,
+    skinTone: tonedUnified ? skinTone : null
+  };
+}
+var emojiButtonClass = "flex h-8 w-8 cursor-pointer items-center justify-center rounded text-lg leading-none hover:bg-accent";
+function StandardEmojiButton({
+  datum,
+  skinTone,
+  onPick
+}) {
+  const tonedUnified = skinTone && datum.skinUnified[skinTone] || datum.unified;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: emojiButtonClass,
+      title: `:${datum.name}:`,
+      "aria-label": datum.name,
+      onClick: () => onPick(resolveStandard(datum, skinTone)),
+      children: codepointsToGlyph(tonedUnified)
+    }
+  );
+}
+function CustomEmojiButton({ emoji, onPick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: emojiButtonClass,
+      title: `:${emoji.name}:`,
+      "aria-label": emoji.name,
+      onClick: () => onPick({ name: emoji.name, unicode: null, src: emoji.url, skinTone: null }),
+      children: emoji.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: emoji.url, alt: `:${emoji.name}:`, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px]", children: [
+        ":",
+        emoji.name,
+        ":"
+      ] })
+    }
+  );
+}
+function SkinToneSelector({ value, onChange }) {
+  const [open, setOpen] = React.useState(false);
+  const active = SKIN_TONES.find((t) => t.tone === value) ?? SKIN_TONES[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Skin tone: ${active.label}`,
+        title: `Skin tone: ${active.label}`,
+        className: "flex h-8 w-8 items-center justify-center rounded border text-lg leading-none hover:bg-accent",
+        onClick: () => setOpen((o) => !o),
+        children: active.swatch
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 z-20 mt-1 flex gap-0.5 rounded-md border bg-background p-1 shadow-md", children: SKIN_TONES.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t.label,
+        title: t.label,
+        className: cn(emojiButtonClass, value === t.tone && "bg-accent"),
+        onClick: () => {
+          onChange(t.tone);
+          setOpen(false);
+        },
+        children: t.swatch
+      },
+      t.label
+    )) })
+  ] });
+}
+function EmojiPickerButton({
+  onSelect,
+  className,
+  label = "Insert emoji",
+  align = "start"
+}) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        className: cn(
+          "flex h-7 w-7 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Smile, { className: "h-3.5 w-3.5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align, className: "w-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmojiPicker,
+      {
+        onSelect: (selection) => {
+          onSelect(selection);
+          setOpen(false);
+        }
+      }
+    ) })
+  ] });
+}
+function EmojiTextInsertButton({
+  targetRef,
+  value,
+  onChange,
+  className,
+  align = "end"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EmojiPickerButton,
+    {
+      align,
+      label: "Insert emoji",
+      className,
+      onSelect: (sel) => {
+        const el = targetRef.current;
+        const insert = composeTextEmoji(sel.name, sel.skinTone ?? void 0);
+        const start = el?.selectionStart ?? value.length;
+        const end = el?.selectionEnd ?? value.length;
+        const next = value.slice(0, start) + insert + value.slice(end);
+        onChange(next);
+        requestAnimationFrame(() => {
+          if (el) {
+            const caret = start + insert.length;
+            el.focus();
+            el.setSelectionRange(caret, caret);
+          }
+        });
+      }
+    }
+  );
+}
 var HEADER_MAX = 150;
 var HEADER_LEVELS = [1, 2, 3, 4];
 function HeaderEditor({ block, onChange }) {
   const text = block.text?.text ?? "";
   const remaining = HEADER_MAX - text.length;
   const level = block.level;
+  const inputRef = React.useRef(null);
+  const setText = (next) => onChange({ ...block, text: { type: "plain_text", text: next, emoji: true } });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
@@ -3758,23 +4251,20 @@ function HeaderEditor({ block, onChange }) {
         label: "Heading text",
         help: `Plain text only. ${remaining} characters remaining.`,
         htmlFor: "header-text",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "header-text",
-            value: text,
-            maxLength: HEADER_MAX,
-            placeholder: "e.g. Weekly roundup",
-            onChange: (e) => onChange({
-              ...block,
-              text: {
-                type: "plain_text",
-                text: e.target.value,
-                emoji: true
-              }
-            })
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              ref: inputRef,
+              id: "header-text",
+              value: text,
+              maxLength: HEADER_MAX,
+              placeholder: "e.g. Weekly roundup",
+              onChange: (e) => setText(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(EmojiTextInsertButton, { targetRef: inputRef, value: text, onChange: setText, className: "shrink-0 border" })
+        ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Level", help: "Optional. Builder-only extension; Slack's API ignores this value.", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4637,22 +5127,29 @@ function CheckboxField({
   ] });
 }
 function MarkdownEditor({ block, onChange }) {
+  const textRef = React.useRef(null);
+  const text = block.text ?? "";
+  const setText = (next) => onChange({ ...block, text: next });
   return /* @__PURE__ */ jsxRuntime.jsx(
     EditorField,
     {
       label: "Markdown",
       help: "Standard markdown with GFM: **bold**, _italic_, lists, tables, ```code```, [links](url).",
       htmlFor: "markdown-text",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Textarea,
-        {
-          id: "markdown-text",
-          value: block.text ?? "",
-          rows: 8,
-          placeholder: "e.g. **Roadmap**\\n\\n- Item one\\n- Item two",
-          onChange: (e) => onChange({ ...block, text: e.target.value })
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            ref: textRef,
+            id: "markdown-text",
+            value: text,
+            rows: 8,
+            placeholder: "e.g. **Roadmap**\\n\\n- Item one\\n- Item two",
+            onChange: (e) => setText(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(EmojiTextInsertButton, { targetRef: textRef, value: text, onChange: setText, className: "mt-1 shrink-0 border" })
+      ] })
     }
   );
 }
@@ -4747,6 +5244,26 @@ function PlanEditor({ block, onChange }) {
   ] });
 }
 
+// src/lib/emoji-resolve.ts
+function makeEmojiImportResolver(customByName, index = getEmojiIndex()) {
+  return (el) => {
+    const name = el.name ?? "";
+    const skinTone = el.skin_tone ?? null;
+    const custom = customByName.get(name);
+    if (custom?.url) {
+      return { name, src: custom.url, unicode: null, skinTone };
+    }
+    const lookupName = custom?.alias ?? name;
+    const datum = index?.byName.get(lookupName);
+    let unicode = el.unicode ?? null;
+    if (!unicode && datum) {
+      const toned = skinTone ? datum.skinUnified[skinTone] : void 0;
+      unicode = unifiedToUnicode(toned ?? datum.unified);
+    }
+    return { name, src: null, unicode, skinTone };
+  };
+}
+
 // src/lib/rich-text-tiptap.ts
 var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
   "rich_text_section",
@@ -4754,7 +5271,7 @@ var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
   "rich_text_quote",
   "rich_text_preformatted"
 ]);
-var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link"]);
+var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji"]);
 var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "code"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
@@ -4801,16 +5318,22 @@ function scanInlines(inlines, where, out) {
     }
   });
 }
-function richTextToProseMirror(block) {
+var defaultEmojiResolver = (el) => ({
+  name: el.name ?? "",
+  src: null,
+  unicode: el.unicode ?? null,
+  skinTone: el.skin_tone ?? null
+});
+function richTextToProseMirror(block, resolveEmoji = defaultEmojiResolver) {
   const content = [];
   const listsByIndent = /* @__PURE__ */ new Map();
   for (const el of block.elements ?? []) {
     if (el.type === "rich_text_list") {
-      appendRichTextList(el, content, listsByIndent);
+      appendRichTextList(el, content, listsByIndent, resolveEmoji);
       continue;
     }
     listsByIndent.clear();
-    const node = blockElementToPM(el);
+    const node = blockElementToPM(el, resolveEmoji);
     if (node) {
       content.push(node);
     }
@@ -4820,12 +5343,12 @@ function richTextToProseMirror(block) {
     content: content.length > 0 ? content : [{ type: "paragraph" }]
   };
 }
-function appendRichTextList(el, topLevel, listsByIndent) {
+function appendRichTextList(el, topLevel, listsByIndent, resolveEmoji) {
   const indent = el.indent ?? 0;
   const listType = el.style === "ordered" ? "orderedList" : "bulletList";
   const items = (el.elements ?? []).map((section) => ({
     type: "listItem",
-    content: [{ type: "paragraph", content: inlinesToPM(section.elements ?? []) }]
+    content: [{ type: "paragraph", content: inlinesToPM(section.elements ?? [], resolveEmoji) }]
   }));
   for (const k of Array.from(listsByIndent.keys())) {
     if (k > indent) {
@@ -4851,11 +5374,11 @@ function appendRichTextList(el, topLevel, listsByIndent) {
   const parentLastItem = parent.content[parent.content.length - 1];
   parentLastItem.content = [...parentLastItem.content ?? [], list];
 }
-function blockElementToPM(el) {
+function blockElementToPM(el, resolveEmoji) {
   if (el.type === "rich_text_section") {
     return {
       type: "paragraph",
-      content: inlinesToPM(el.elements ?? [])
+      content: inlinesToPM(el.elements ?? [], resolveEmoji)
     };
   }
   if (el.type === "rich_text_quote") {
@@ -4864,7 +5387,7 @@ function blockElementToPM(el) {
       content: [
         {
           type: "paragraph",
-          content: inlinesToPM(el.elements ?? [])
+          content: inlinesToPM(el.elements ?? [], resolveEmoji)
         }
       ]
     };
@@ -4879,7 +5402,7 @@ function blockElementToPM(el) {
   }
   return null;
 }
-function inlinesToPM(inlines) {
+function inlinesToPM(inlines, resolveEmoji) {
   const out = [];
   for (const inline of inlines) {
     if (inline.type === "text") {
@@ -4888,6 +5411,12 @@ function inlinesToPM(inlines) {
       }
       const marks = styleToMarks(inline.style);
       out.push({ type: "text", text: inline.text, marks });
+    } else if (inline.type === "emoji") {
+      const attrs = resolveEmoji(inline);
+      if (!attrs.name) {
+        continue;
+      }
+      out.push({ type: "emoji", attrs });
     } else if (inline.type === "link") {
       const link = inline;
       const text = link.text || link.url || "";
@@ -5005,6 +5534,19 @@ function flattenList(listNode, indent, out) {
 function proseMirrorInlinesToRichTextElements(nodes) {
   const out = [];
   for (const node of nodes) {
+    if (node.type === "emoji") {
+      const name = String(node.attrs?.name ?? "");
+      if (!name) {
+        continue;
+      }
+      const emoji = { type: "emoji", name };
+      const skinTone = node.attrs?.skinTone;
+      if (typeof skinTone === "number" && skinTone >= 2 && skinTone <= 6) {
+        emoji.skin_tone = skinTone;
+      }
+      out.push(emoji);
+      continue;
+    }
     if (node.type !== "text" || !node.text) {
       continue;
     }
@@ -5075,6 +5617,49 @@ function sameStyle(a, b) {
   }
   return ak.every((k, i) => k === bk[i]);
 }
+function EmojiNodeView({ node }) {
+  const { name, src, unicode } = node.attrs;
+  const label = `:${name}:`;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt: label,
+      style: {
+        display: "inline-block",
+        width: "1.25em",
+        height: "1.25em",
+        verticalAlign: "-0.25em",
+        objectFit: "contain"
+      }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, role: "img", children: unicode ? codepointsToGlyph(unicode) : label }) });
+}
+var EmojiNode = react.Node.create({
+  name: "emoji",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      name: { default: "" },
+      src: { default: null },
+      unicode: { default: null },
+      skinTone: { default: null }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-emoji]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const name = HTMLAttributes.name ?? "";
+    return ["span", react.mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(EmojiNodeView);
+  }
+});
 var BLOCK_ELEMENT_LABEL = {
   rich_text_section: "Section",
   rich_text_list: "List",
@@ -5413,15 +5998,34 @@ function InlineFields({
   }
   if (kind === "emoji") {
     const emoji = element;
-    return /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Name", help: "Emoji shortcode without colons, e.g. wave", htmlFor: `${idPrefix}-emoji`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
       {
-        id: `${idPrefix}-emoji`,
-        value: emoji.name ?? "",
-        placeholder: "e.g. wave",
-        onChange: (e) => onChange({ ...emoji, name: e.target.value })
+        label: "Name",
+        help: "Pick from the emoji list, or type a shortcode (without colons).",
+        htmlFor: `${idPrefix}-emoji`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: `${idPrefix}-emoji`,
+              value: emoji.name ?? "",
+              placeholder: "e.g. wave",
+              onChange: (e) => onChange({ ...emoji, name: e.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EmojiPickerButton,
+            {
+              align: "end",
+              label: "Pick emoji",
+              className: "shrink-0 border",
+              onSelect: (sel) => onChange({ ...emoji, name: sel.name, skin_tone: sel.skinTone ?? void 0, unicode: void 0 })
+            }
+          )
+        ] })
       }
-    ) });
+    );
   }
   if (kind === "user") {
     const user = element;
@@ -5632,6 +6236,20 @@ function LossyBanner({ reasons }) {
 }
 function RichTextWysiwygEditor({ block, onChange }) {
   const lastEmittedRef = React.useRef(null);
+  const { byName: customByName } = useCustomEmojis();
+  const [emojiIndex, setEmojiIndex] = React.useState(null);
+  React.useEffect(() => {
+    let active = true;
+    loadEmojiIndex().then((idx) => active && setEmojiIndex(idx)).catch(() => {
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  const resolveEmoji = React.useMemo(
+    () => makeEmojiImportResolver(customByName, emojiIndex),
+    [customByName, emojiIndex]
+  );
   const handleUpdate = React.useCallback(
     (editor2) => {
       const next = proseMirrorToRichText(editor2.getJSON());
@@ -5646,6 +6264,7 @@ function RichTextWysiwygEditor({ block, onChange }) {
         heading: false,
         horizontalRule: false
       }),
+      EmojiNode,
       Link__default.default.configure({
         openOnClick: false,
         autolink: true,
@@ -5662,7 +6281,7 @@ function RichTextWysiwygEditor({ block, onChange }) {
         HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
       })
     ],
-    content: richTextToProseMirror(block),
+    content: richTextToProseMirror(block, resolveEmoji),
     editorProps: {
       attributes: {
         class: "bk-rich-editor min-h-[120px] rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_p]:my-1 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:pl-5 [&_li]:my-0 [&_pre]:bg-muted [&_pre]:rounded [&_pre]:p-2 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground"
@@ -5677,10 +6296,10 @@ function RichTextWysiwygEditor({ block, onChange }) {
     if (lastEmittedRef.current && JSON.stringify(lastEmittedRef.current) === JSON.stringify(block)) {
       return;
     }
-    editor.commands.setContent(richTextToProseMirror(block), {
+    editor.commands.setContent(richTextToProseMirror(block, resolveEmoji), {
       emitUpdate: false
     });
-  }, [block, editor]);
+  }, [block, editor, resolveEmoji]);
   if (!editor) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[120px] rounded-md border border-input bg-background" });
   }
@@ -5729,6 +6348,16 @@ function Toolbar({ editor }) {
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(LinkPopover, { editor }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EmojiPickerButton,
+      {
+        align: "start",
+        onSelect: (sel) => editor.chain().focus().insertContent({
+          type: "emoji",
+          attrs: { name: sel.name, src: sel.src, unicode: sel.unicode, skinTone: sel.skinTone }
+        }).run()
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
@@ -5927,6 +6556,8 @@ function defaultImage() {
 function SectionEditor({ block, onChange }) {
   const text = block.text?.text ?? "";
   const accessoryKind = detectAccessory(block.accessory);
+  const textRef = React.useRef(null);
+  const setText = (next) => onChange({ ...block, text: { type: "mrkdwn", text: next } });
   const setAccessoryKind = (next) => {
     if (next === accessoryKind) {
       return;
@@ -5950,19 +6581,20 @@ function SectionEditor({ block, onChange }) {
         label: "Text",
         help: "Supports *bold*, _italic_, ~strike~, `code`, and <url|link> formatting.",
         htmlFor: "section-text",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Textarea,
-          {
-            id: "section-text",
-            value: text,
-            rows: 4,
-            placeholder: "e.g. Welcome to the channel! Ping <@U123> with any questions.",
-            onChange: (e) => onChange({
-              ...block,
-              text: { type: "mrkdwn", text: e.target.value }
-            })
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Textarea,
+            {
+              ref: textRef,
+              id: "section-text",
+              value: text,
+              rows: 4,
+              placeholder: "e.g. Welcome to the channel! Ping <@U123> with any questions.",
+              onChange: (e) => setText(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(EmojiTextInsertButton, { targetRef: textRef, value: text, onChange: setText, className: "mt-1 shrink-0 border" })
+        ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/20 p-3", children: [
@@ -6003,19 +6635,22 @@ function ButtonAccessoryFields({ button, onChange }) {
   const url = button.url ?? "";
   const value = button.value ?? "";
   const style = button.style === "primary" || button.style === "danger" ? button.style : "default";
+  const labelRef = React.useRef(null);
+  const setLabel = (next) => onChange({ ...button, text: { type: "plain_text", text: next, emoji: true } });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: "section-acc-btn-label", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
-      {
-        id: "section-acc-btn-label",
-        value: label,
-        placeholder: "e.g. Learn more",
-        onChange: (e) => onChange({
-          ...button,
-          text: { type: "plain_text", text: e.target.value, emoji: true }
-        })
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: "section-acc-btn-label", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          ref: labelRef,
+          id: "section-acc-btn-label",
+          value: label,
+          placeholder: "e.g. Learn more",
+          onChange: (e) => setLabel(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(EmojiTextInsertButton, { targetRef: labelRef, value: label, onChange: setLabel, className: "shrink-0 border" })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
@@ -7570,6 +8205,7 @@ function BlockKitchen(props) {
     initialBlocks,
     onChange,
     previewHooks,
+    customEmojis,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
@@ -7613,6 +8249,13 @@ function BlockKitchen(props) {
   const [previewSurface, setPreviewSurface] = React.useState(allowedSurfaces[0]);
   const [activePaletteVariantId, setActivePaletteVariantId] = React.useState(null);
   const isMobile = useIsMobile();
+  const mergedPreviewHooks = React.useMemo(() => {
+    if (!customEmojis || customEmojis.length === 0) {
+      return previewHooks;
+    }
+    const byName = new Map(customEmojis.map((emoji) => [emoji.name, emoji]));
+    return { emoji: makeEmojiHook(byName), ...previewHooks };
+  }, [customEmojis, previewHooks]);
   const validation = useBlockKitValidation(blocks, "message");
   const sensors = core.useSensors(
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
@@ -7662,7 +8305,7 @@ function BlockKitchen(props) {
   }, []);
   const activePaletteVariant = activePaletteVariantId ? variantById.get(activePaletteVariantId) : null;
   const blockPayloads = blocks.map((b) => b.block);
-  return /* @__PURE__ */ jsxRuntime.jsx(BrandThemeScope, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(BrandThemeScope, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(CustomEmojiProvider, { customEmojis, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
     {
       sensors,
@@ -7708,7 +8351,7 @@ function BlockKitchen(props) {
               {
                 blocks,
                 workspaceName,
-                previewHooks,
+                previewHooks: mergedPreviewHooks,
                 previewTheme,
                 previewSurface,
                 errorsByBlockId: validation.byBlockId,
@@ -7784,7 +8427,7 @@ function BlockKitchen(props) {
         )
       ]
     }
-  ) }) });
+  ) }) }) });
 }
 var UNCATEGORIZED = "Other";
 function TemplateThumbnail({ blocks, theme }) {