calabasas 0.15.0 → 0.16.0

package/dist/BotList-gmtf52xh.js

@@ -0,0 +1,165 @@
+import {
+  build_default,
+  relativeTime
+} from "./index-8gymgyxd.js";
+import"./index-tre7d3f1.js";
+import {
+  __toESM
+} from "./index-sdksp5px.js";
+import {
+  Box_default,
+  Text
+} from "./index-4rn9k8et.js";
+import {
+  cliApi,
+  require_jsx_dev_runtime,
+  useQuery
+} from "./convex-1z1jsz1n.js";
+import"./index-vmy4gfe1.js";
+
+// src/components/StatusBadge.tsx
+var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
+var STATUS_CONFIG = {
+  connected: { color: "green", dot: "●" },
+  connecting: { color: "yellow", dot: "●" },
+  error: { color: "red", dot: "●" },
+  disconnected: { color: "gray", dot: "●" }
+};
+function StatusBadge({ status, width = 0 }) {
+  const config = STATUS_CONFIG[status];
+  const label = `${config.dot} ${status}`;
+  const padded = width > 0 ? label.padEnd(width) : label;
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        color: config.color,
+        children: config.dot
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        children: padded.slice(1)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/BotList.tsx
+var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
+function BotList({
+  apiKey,
+  selectedIndex,
+  onSelect
+}) {
+  const bots = useQuery(cliApi.listBots, { apiKey });
+  if (bots === undefined) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+          color: "cyan",
+          children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(build_default, {
+            type: "dots"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+          children: " Loading bots..."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (bots.length === 0) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+      children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        dimColor: true,
+        children: "No bots found. Run `calabasas bot add` to create one."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const COL = { name: 30, status: 16, appId: 22, env: 8, last: 16 };
+  function truncate(str, max) {
+    if (str.length <= max)
+      return str.padEnd(max);
+    return str.slice(0, max - 1) + "…";
+  }
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+          bold: true,
+          children: [
+            "  ",
+            "Name".padEnd(COL.name),
+            "Status".padEnd(COL.status),
+            "Discord App ID".padEnd(COL.appId),
+            "Env".padEnd(COL.env),
+            "Last Connected"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      bots.map((bot, i) => {
+        const isSelected = selectedIndex === i;
+        return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+          flexDirection: "column",
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+              children: [
+                /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                  color: isSelected ? "cyan" : undefined,
+                  children: isSelected ? "→ " : "  "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                  bold: isSelected,
+                  children: truncate(bot.name, COL.name)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(StatusBadge, {
+                  status: bot.status,
+                  width: COL.status
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                  dimColor: true,
+                  children: bot.discordAppId.padEnd(COL.appId)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                  dimColor: true,
+                  children: bot.environment.padEnd(COL.env)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                  dimColor: true,
+                  children: relativeTime(bot.lastConnectedAt)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            bot.errorMessage && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+              marginLeft: 4,
+              children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                color: "red",
+                dimColor: true,
+                children: [
+                  "└",
+                  " ",
+                  bot.errorMessage
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            !bot.errorMessage && bot.disconnectReason && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+              marginLeft: 4,
+              children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+                dimColor: true,
+                children: [
+                  "└",
+                  " ",
+                  bot.disconnectReason
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, bot._id, true, undefined, this);
+      })
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  BotList
+};
+
+;

package/dist/dashboard-y75f0avj.js

@@ -0,0 +1,235 @@
+import {
+  LogViewer
+} from "./index-b0cp0nch.js";
+import {
+  getConvexUrl,
+  resolveEnv,
+  resolvePlatformApiKey
+} from "./index-a8vtmtf9.js";
+import {
+  build_default,
+  formatLatency,
+  formatNumber
+} from "./index-8gymgyxd.js";
+import"./index-tre7d3f1.js";
+import {
+  __toESM
+} from "./index-sdksp5px.js";
+import {
+  BotList
+} from "./BotList-gmtf52xh.js";
+import {
+  Box_default,
+  Text,
+  render_default,
+  use_app_default,
+  use_input_default
+} from "./index-4rn9k8et.js";
+import {
+  ConvexProvider,
+  cliApi,
+  createConvexClient,
+  require_jsx_dev_runtime,
+  useQuery
+} from "./convex-1z1jsz1n.js";
+import {
+  require_react
+} from "./index-vmy4gfe1.js";
+
+// src/components/Dashboard.tsx
+var import_react2 = __toESM(require_react(), 1);
+
+// src/components/Header.tsx
+var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
+function Header({
+  botCount,
+  env
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Box_default, {
+    marginBottom: 1,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        bold: true,
+        color: "magenta",
+        children: "calabasas"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        dimColor: true,
+        children: " v0.1.12"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        dimColor: true,
+        children: " · "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        children: [
+          botCount,
+          " bot",
+          botCount !== 1 ? "s" : ""
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        dimColor: true,
+        children: " · "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        color: env === "dev" ? "yellow" : "green",
+        children: env
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        dimColor: true,
+        children: " · Press "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        bold: true,
+        children: "q"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        dimColor: true,
+        children: " to quit"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/StatsPanel.tsx
+var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
+var ONE_HOUR = 60 * 60 * 1000;
+function StatsPanel({
+  apiKey,
+  botId
+}) {
+  const stats = useQuery(cliApi.botStats, {
+    apiKey,
+    botId,
+    since: Date.now() - ONE_HOUR
+  });
+  if (stats === undefined) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+          color: "cyan",
+          children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(build_default, {
+            type: "dots"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+          children: " Loading stats..."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+    gap: 2,
+    marginBottom: 1,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        dimColor: true,
+        children: "Events (1h):"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        bold: true,
+        children: formatNumber(stats.total)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        color: "green",
+        children: [
+          formatNumber(stats.success),
+          " ok"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        color: "red",
+        children: [
+          formatNumber(stats.failed),
+          " failed"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        dimColor: true,
+        children: [
+          "avg ",
+          formatLatency(stats.avgLatencyMs)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/Dashboard.tsx
+var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
+function Dashboard({
+  apiKey,
+  env
+}) {
+  const { exit } = use_app_default();
+  const [selectedIndex, setSelectedIndex] = import_react2.useState(0);
+  const bots = useQuery(cliApi.listBots, { apiKey });
+  const botCount = bots?.length ?? 0;
+  const selectedBot = bots?.[selectedIndex];
+  use_input_default(import_react2.useCallback((input, key) => {
+    if (input === "q") {
+      exit();
+      return;
+    }
+    if ((input === "j" || key.downArrow) && botCount > 0) {
+      setSelectedIndex((i) => Math.min(i, botCount - 1) === botCount - 1 ? 0 : i + 1);
+    }
+    if ((input === "k" || key.upArrow) && botCount > 0) {
+      setSelectedIndex((i) => i === 0 ? botCount - 1 : i - 1);
+    }
+  }, [botCount, exit]));
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Header, {
+        botCount,
+        env
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(BotList, {
+        apiKey,
+        selectedIndex
+      }, undefined, false, undefined, this),
+      selectedBot && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+        flexDirection: "column",
+        marginTop: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(StatsPanel, {
+            apiKey,
+            botId: selectedBot._id
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(LogViewer, {
+            apiKey,
+            botId: selectedBot._id
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/commands/dashboard.tsx
+var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
+async function dashboard(options) {
+  const env = resolveEnv(options);
+  const resolved = resolvePlatformApiKey({}, env);
+  if (!resolved) {
+    console.log("Not logged in. Run `calabasas login` first.");
+    return;
+  }
+  const apiKey = resolved.key;
+  const convexUrl = getConvexUrl(env);
+  const client = createConvexClient(convexUrl);
+  const { waitUntilExit } = render_default(/* @__PURE__ */ jsx_dev_runtime4.jsxDEV(ConvexProvider, {
+    client,
+    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Dashboard, {
+      apiKey,
+      env
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this));
+  await waitUntilExit();
+  await client.close();
+}
+export {
+  dashboard
+};

package/dist/index.js

@@ -2204,7 +2204,7 @@ export default defineCalabasas({
     members: false,  // Sync members (calabasasMembers table) - requires privileged intent
   },
 
-  // Custom event handlers - events forwarded to your discord:receive mutation
+  // Custom event handlers - events forwarded to your calabasas/discord:receive mutation
   events: {
     // Enable events you want to receive (all fields included)
     // messageCreate: true,
@@ -2573,13 +2573,13 @@ async function generate(options) {
    export { ${syncExports.join(", ")} } from "./calabasas/_generated/sync";
 
 3. Add CALABASAS_SECRET to your Convex environment variables
-4. Create your event handler in convex/discord.ts
+4. Create your event handler in convex/calabasas/discord.ts
 5. Run \`calabasas push\` to sync config with Calabasas`, "Next steps");
   } else {
     p5.note(`1. Add CALABASAS_SECRET to your Convex environment variables
-2. Create your handler in convex/discord.ts:
+2. Create your handler in convex/calabasas/discord.ts:
 
-   import { handleDiscordEvent } from "./calabasas/_generated/discord";
+   import { handleDiscordEvent } from "./_generated/discord";
 
    export const receive = handleDiscordEvent({
      messageCreate: async (ctx, event) => {
@@ -4729,6 +4729,878 @@ export function useOnlineCount(guildDiscordId: string): number | undefined {
 });`
 };
 
+// src/lib/registry/components/emoji-picker.ts
+var emojiPicker = {
+  name: "emoji-picker",
+  kind: "component",
+  description: "Grid-based emoji picker with custom Discord emojis, Unicode emojis, search, and animated GIF support",
+  requiredSyncTypes: ["emojis"],
+  requiredShadcnComponents: ["popover", "button"],
+  generateReactComponent: () => `"use client";
+
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { useQuery } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type EmojiData = {
+  id: string;
+  name: string;
+  animated?: boolean;
+  source: "guild" | "application" | "default";
+};
+
+type EmojiPickerProps = {
+  guildDiscordId?: string;
+  source?: "all" | "guild" | "application" | "default";
+  mode?: "single" | "multi";
+  maxCount?: number;
+  value?: string[];
+  onSelect?: (emoji: EmojiData) => void;
+  onChange?: (emojis: EmojiData[]) => void;
+  columns?: number;
+  pageSize?: number;
+  placeholder?: string;
+  className?: string;
+};
+
+/** Curated default Unicode emojis organized by Discord-style categories */
+const DEFAULT_EMOJIS: { category: string; emojis: { codepoint: string; name: string }[] }[] = [
+  {
+    category: "Smileys & Emotion",
+    emojis: [
+      { codepoint: "\uD83D\uDE00", name: "grinning face" },
+      { codepoint: "\uD83D\uDE03", name: "grinning face with big eyes" },
+      { codepoint: "\uD83D\uDE04", name: "grinning face with smiling eyes" },
+      { codepoint: "\uD83D\uDE01", name: "beaming face with smiling eyes" },
+      { codepoint: "\uD83D\uDE06", name: "grinning squinting face" },
+      { codepoint: "\uD83D\uDE05", name: "grinning face with sweat" },
+      { codepoint: "\uD83E\uDD23", name: "rolling on the floor laughing" },
+      { codepoint: "\uD83D\uDE02", name: "face with tears of joy" },
+      { codepoint: "\uD83D\uDE42", name: "slightly smiling face" },
+      { codepoint: "\uD83D\uDE09", name: "winking face" },
+      { codepoint: "\uD83D\uDE0A", name: "smiling face with smiling eyes" },
+      { codepoint: "\uD83D\uDE07", name: "smiling face with halo" },
+      { codepoint: "\uD83E\uDD70", name: "smiling face with hearts" },
+      { codepoint: "\uD83D\uDE0D", name: "smiling face with heart eyes" },
+      { codepoint: "\uD83E\uDD29", name: "star struck" },
+      { codepoint: "\uD83D\uDE18", name: "face blowing a kiss" },
+      { codepoint: "\uD83D\uDE0B", name: "face savoring food" },
+      { codepoint: "\uD83D\uDE1B", name: "face with tongue" },
+      { codepoint: "\uD83D\uDE1C", name: "winking face with tongue" },
+      { codepoint: "\uD83E\uDD2A", name: "zany face" },
+      { codepoint: "\uD83D\uDE1D", name: "squinting face with tongue" },
+      { codepoint: "\uD83E\uDD11", name: "money mouth face" },
+      { codepoint: "\uD83E\uDD17", name: "hugging face" },
+      { codepoint: "\uD83E\uDD2D", name: "face with hand over mouth" },
+      { codepoint: "\uD83E\uDD2B", name: "shushing face" },
+      { codepoint: "\uD83E\uDD14", name: "thinking face" },
+      { codepoint: "\uD83E\uDD10", name: "zipper mouth face" },
+      { codepoint: "\uD83E\uDD28", name: "face with raised eyebrow" },
+      { codepoint: "\uD83D\uDE10", name: "neutral face" },
+      { codepoint: "\uD83D\uDE11", name: "expressionless face" },
+      { codepoint: "\uD83D\uDE36", name: "face without mouth" },
+      { codepoint: "\uD83D\uDE0F", name: "smirking face" },
+      { codepoint: "\uD83D\uDE12", name: "unamused face" },
+      { codepoint: "\uD83D\uDE44", name: "face with rolling eyes" },
+      { codepoint: "\uD83D\uDE2C", name: "grimacing face" },
+      { codepoint: "\uD83E\uDD25", name: "lying face" },
+      { codepoint: "\uD83D\uDE0C", name: "relieved face" },
+      { codepoint: "\uD83D\uDE14", name: "pensive face" },
+      { codepoint: "\uD83D\uDE2A", name: "sleepy face" },
+      { codepoint: "\uD83E\uDD24", name: "drooling face" },
+      { codepoint: "\uD83D\uDE34", name: "sleeping face" },
+      { codepoint: "\uD83D\uDE37", name: "face with medical mask" },
+      { codepoint: "\uD83E\uDD12", name: "face with thermometer" },
+      { codepoint: "\uD83E\uDD15", name: "face with head bandage" },
+      { codepoint: "\uD83E\uDD22", name: "nauseated face" },
+      { codepoint: "\uD83E\uDD2E", name: "face vomiting" },
+      { codepoint: "\uD83E\uDD75", name: "hot face" },
+      { codepoint: "\uD83E\uDD76", name: "cold face" },
+      { codepoint: "\uD83E\uDD74", name: "woozy face" },
+      { codepoint: "\uD83D\uDE35", name: "face with crossed out eyes" },
+      { codepoint: "\uD83E\uDD2F", name: "exploding head" },
+      { codepoint: "\uD83D\uDE0E", name: "smiling face with sunglasses" },
+      { codepoint: "\uD83E\uDD73", name: "partying face" },
+      { codepoint: "\uD83D\uDE1F", name: "worried face" },
+      { codepoint: "\uD83D\uDE15", name: "confused face" },
+      { codepoint: "\uD83D\uDE22", name: "crying face" },
+      { codepoint: "\uD83D\uDE2D", name: "loudly crying face" },
+      { codepoint: "\uD83D\uDE24", name: "face with steam from nose" },
+      { codepoint: "\uD83D\uDE20", name: "angry face" },
+      { codepoint: "\uD83D\uDE21", name: "pouting face" },
+      { codepoint: "\uD83E\uDD2C", name: "face with symbols on mouth" },
+      { codepoint: "\uD83D\uDC7F", name: "angry face with horns" },
+      { codepoint: "\uD83D\uDC80", name: "skull" },
+      { codepoint: "\uD83D\uDCA9", name: "pile of poo" },
+      { codepoint: "\uD83E\uDD21", name: "clown face" },
+      { codepoint: "\uD83D\uDC7B", name: "ghost" },
+      { codepoint: "\uD83D\uDC7D", name: "alien" },
+      { codepoint: "\uD83E\uDD16", name: "robot" },
+      { codepoint: "\uD83D\uDE3A", name: "grinning cat" },
+      { codepoint: "\uD83D\uDE3B", name: "smiling cat with heart eyes" },
+      { codepoint: "\uD83D\uDC8B", name: "kiss mark" },
+      { codepoint: "\uD83D\uDCAF", name: "hundred points" },
+      { codepoint: "\uD83D\uDCA2", name: "anger symbol" },
+      { codepoint: "\uD83D\uDCA5", name: "collision" },
+      { codepoint: "\uD83D\uDCAB", name: "dizzy" },
+      { codepoint: "\uD83D\uDCA6", name: "sweat droplets" },
+      { codepoint: "❤️", name: "red heart" },
+      { codepoint: "\uD83E\uDDE1", name: "orange heart" },
+      { codepoint: "\uD83D\uDC9B", name: "yellow heart" },
+      { codepoint: "\uD83D\uDC9A", name: "green heart" },
+      { codepoint: "\uD83D\uDC99", name: "blue heart" },
+      { codepoint: "\uD83D\uDC9C", name: "purple heart" },
+      { codepoint: "\uD83D\uDDA4", name: "black heart" },
+      { codepoint: "\uD83E\uDD0D", name: "white heart" },
+      { codepoint: "\uD83D\uDC94", name: "broken heart" },
+    ],
+  },
+  {
+    category: "People & Body",
+    emojis: [
+      { codepoint: "\uD83D\uDC4B", name: "waving hand" },
+      { codepoint: "\uD83E\uDD1A", name: "raised back of hand" },
+      { codepoint: "✋", name: "raised hand" },
+      { codepoint: "\uD83D\uDD96", name: "vulcan salute" },
+      { codepoint: "\uD83D\uDC4C", name: "ok hand" },
+      { codepoint: "\uD83E\uDD0C", name: "pinched fingers" },
+      { codepoint: "✌️", name: "victory hand" },
+      { codepoint: "\uD83E\uDD1E", name: "crossed fingers" },
+      { codepoint: "\uD83E\uDD1F", name: "love you gesture" },
+      { codepoint: "\uD83E\uDD18", name: "sign of the horns" },
+      { codepoint: "\uD83E\uDD19", name: "call me hand" },
+      { codepoint: "\uD83D\uDC48", name: "backhand index pointing left" },
+      { codepoint: "\uD83D\uDC49", name: "backhand index pointing right" },
+      { codepoint: "\uD83D\uDC46", name: "backhand index pointing up" },
+      { codepoint: "\uD83D\uDC47", name: "backhand index pointing down" },
+      { codepoint: "☝️", name: "index pointing up" },
+      { codepoint: "\uD83D\uDC4D", name: "thumbs up" },
+      { codepoint: "\uD83D\uDC4E", name: "thumbs down" },
+      { codepoint: "✊", name: "raised fist" },
+      { codepoint: "\uD83D\uDC4A", name: "oncoming fist" },
+      { codepoint: "\uD83E\uDD1B", name: "left facing fist" },
+      { codepoint: "\uD83E\uDD1C", name: "right facing fist" },
+      { codepoint: "\uD83D\uDC4F", name: "clapping hands" },
+      { codepoint: "\uD83D\uDE4C", name: "raising hands" },
+      { codepoint: "\uD83D\uDC50", name: "open hands" },
+      { codepoint: "\uD83E\uDD32", name: "palms up together" },
+      { codepoint: "\uD83E\uDD1D", name: "handshake" },
+      { codepoint: "\uD83D\uDE4F", name: "folded hands" },
+      { codepoint: "\uD83D\uDCAA", name: "flexed biceps" },
+      { codepoint: "\uD83E\uDDBE", name: "mechanical arm" },
+      { codepoint: "\uD83D\uDC40", name: "eyes" },
+      { codepoint: "\uD83D\uDC41️", name: "eye" },
+      { codepoint: "\uD83D\uDC45", name: "tongue" },
+      { codepoint: "\uD83D\uDC44", name: "mouth" },
+      { codepoint: "\uD83E\uDDE0", name: "brain" },
+      { codepoint: "\uD83D\uDC76", name: "baby" },
+      { codepoint: "\uD83E\uDDD1", name: "person" },
+      { codepoint: "\uD83D\uDC66", name: "boy" },
+      { codepoint: "\uD83D\uDC67", name: "girl" },
+    ],
+  },
+  {
+    category: "Animals & Nature",
+    emojis: [
+      { codepoint: "\uD83D\uDC36", name: "dog face" },
+      { codepoint: "\uD83D\uDC31", name: "cat face" },
+      { codepoint: "\uD83D\uDC2D", name: "mouse face" },
+      { codepoint: "\uD83D\uDC39", name: "hamster" },
+      { codepoint: "\uD83D\uDC30", name: "rabbit face" },
+      { codepoint: "\uD83E\uDD8A", name: "fox" },
+      { codepoint: "\uD83D\uDC3B", name: "bear" },
+      { codepoint: "\uD83D\uDC3C", name: "panda" },
+      { codepoint: "\uD83D\uDC28", name: "koala" },
+      { codepoint: "\uD83D\uDC2F", name: "tiger face" },
+      { codepoint: "\uD83E\uDD81", name: "lion" },
+      { codepoint: "\uD83D\uDC2E", name: "cow face" },
+      { codepoint: "\uD83D\uDC37", name: "pig face" },
+      { codepoint: "\uD83D\uDC38", name: "frog" },
+      { codepoint: "\uD83D\uDC35", name: "monkey face" },
+      { codepoint: "\uD83D\uDE48", name: "see no evil monkey" },
+      { codepoint: "\uD83D\uDE49", name: "hear no evil monkey" },
+      { codepoint: "\uD83D\uDE4A", name: "speak no evil monkey" },
+      { codepoint: "\uD83D\uDC14", name: "chicken" },
+      { codepoint: "\uD83D\uDC27", name: "penguin" },
+      { codepoint: "\uD83D\uDC26", name: "bird" },
+      { codepoint: "\uD83E\uDD85", name: "eagle" },
+      { codepoint: "\uD83E\uDD86", name: "duck" },
+      { codepoint: "\uD83E\uDD89", name: "owl" },
+      { codepoint: "\uD83D\uDC3A", name: "wolf" },
+      { codepoint: "\uD83D\uDC17", name: "boar" },
+      { codepoint: "\uD83D\uDC34", name: "horse face" },
+      { codepoint: "\uD83E\uDD84", name: "unicorn" },
+      { codepoint: "\uD83D\uDC1D", name: "honeybee" },
+      { codepoint: "\uD83D\uDC1B", name: "bug" },
+      { codepoint: "\uD83E\uDD8B", name: "butterfly" },
+      { codepoint: "\uD83D\uDC0C", name: "snail" },
+      { codepoint: "\uD83D\uDC19", name: "octopus" },
+      { codepoint: "\uD83D\uDC20", name: "tropical fish" },
+      { codepoint: "\uD83D\uDC2C", name: "dolphin" },
+      { codepoint: "\uD83D\uDC33", name: "spouting whale" },
+      { codepoint: "\uD83E\uDD88", name: "shark" },
+      { codepoint: "\uD83D\uDC0A", name: "crocodile" },
+      { codepoint: "\uD83D\uDC09", name: "dragon" },
+      { codepoint: "\uD83C\uDF38", name: "cherry blossom" },
+      { codepoint: "\uD83C\uDF39", name: "rose" },
+      { codepoint: "\uD83C\uDF3A", name: "hibiscus" },
+      { codepoint: "\uD83C\uDF3B", name: "sunflower" },
+      { codepoint: "\uD83C\uDF32", name: "evergreen tree" },
+      { codepoint: "\uD83C\uDF35", name: "cactus" },
+      { codepoint: "\uD83C\uDF40", name: "four leaf clover" },
+      { codepoint: "\uD83C\uDF41", name: "maple leaf" },
+      { codepoint: "\uD83C\uDF42", name: "fallen leaf" },
+      { codepoint: "\uD83C\uDF43", name: "leaf fluttering in wind" },
+    ],
+  },
+  {
+    category: "Food & Drink",
+    emojis: [
+      { codepoint: "\uD83C\uDF4E", name: "red apple" },
+      { codepoint: "\uD83C\uDF4A", name: "tangerine" },
+      { codepoint: "\uD83C\uDF4B", name: "lemon" },
+      { codepoint: "\uD83C\uDF4C", name: "banana" },
+      { codepoint: "\uD83C\uDF49", name: "watermelon" },
+      { codepoint: "\uD83C\uDF47", name: "grapes" },
+      { codepoint: "\uD83C\uDF53", name: "strawberry" },
+      { codepoint: "\uD83E\uDED0", name: "blueberries" },
+      { codepoint: "\uD83C\uDF51", name: "peach" },
+      { codepoint: "\uD83C\uDF52", name: "cherries" },
+      { codepoint: "\uD83E\uDD51", name: "avocado" },
+      { codepoint: "\uD83C\uDF55", name: "pizza" },
+      { codepoint: "\uD83C\uDF54", name: "hamburger" },
+      { codepoint: "\uD83C\uDF5F", name: "french fries" },
+      { codepoint: "\uD83C\uDF2D", name: "hot dog" },
+      { codepoint: "\uD83C\uDF7F", name: "popcorn" },
+      { codepoint: "\uD83C\uDF69", name: "doughnut" },
+      { codepoint: "\uD83C\uDF6A", name: "cookie" },
+      { codepoint: "\uD83C\uDF82", name: "birthday cake" },
+      { codepoint: "\uD83C\uDF70", name: "shortcake" },
+      { codepoint: "\uD83E\uDDC1", name: "cupcake" },
+      { codepoint: "\uD83C\uDF6B", name: "chocolate bar" },
+      { codepoint: "\uD83C\uDF6C", name: "candy" },
+      { codepoint: "☕", name: "hot beverage" },
+      { codepoint: "\uD83C\uDF75", name: "teacup without handle" },
+      { codepoint: "\uD83C\uDF7A", name: "beer mug" },
+      { codepoint: "\uD83C\uDF7B", name: "clinking beer mugs" },
+      { codepoint: "\uD83E\uDD42", name: "clinking glasses" },
+      { codepoint: "\uD83C\uDF77", name: "wine glass" },
+      { codepoint: "\uD83E\uDDC3", name: "beverage box" },
+    ],
+  },
+  {
+    category: "Travel & Places",
+    emojis: [
+      { codepoint: "\uD83D\uDE97", name: "automobile" },
+      { codepoint: "\uD83D\uDE95", name: "taxi" },
+      { codepoint: "\uD83D\uDE80", name: "rocket" },
+      { codepoint: "✈️", name: "airplane" },
+      { codepoint: "\uD83D\uDE81", name: "helicopter" },
+      { codepoint: "\uD83D\uDE82", name: "locomotive" },
+      { codepoint: "\uD83D\uDEA2", name: "ship" },
+      { codepoint: "\uD83C\uDFE0", name: "house" },
+      { codepoint: "\uD83C\uDFE2", name: "office building" },
+      { codepoint: "\uD83C\uDFF0", name: "castle" },
+      { codepoint: "\uD83D\uDDFC", name: "Tokyo tower" },
+      { codepoint: "\uD83D\uDDFD", name: "Statue of Liberty" },
+      { codepoint: "⛪", name: "church" },
+      { codepoint: "\uD83C\uDF0D", name: "globe showing Europe Africa" },
+      { codepoint: "\uD83C\uDF0E", name: "globe showing Americas" },
+      { codepoint: "\uD83C\uDF0F", name: "globe showing Asia Australia" },
+      { codepoint: "\uD83C\uDF0B", name: "volcano" },
+      { codepoint: "\uD83C\uDFD4️", name: "snow capped mountain" },
+      { codepoint: "⛰️", name: "mountain" },
+      { codepoint: "\uD83C\uDFD6️", name: "beach with umbrella" },
+      { codepoint: "\uD83C\uDF05", name: "sunrise" },
+      { codepoint: "\uD83C\uDF04", name: "sunrise over mountains" },
+      { codepoint: "\uD83C\uDF20", name: "shooting star" },
+      { codepoint: "\uD83C\uDF87", name: "sparkler" },
+      { codepoint: "\uD83C\uDF86", name: "fireworks" },
+      { codepoint: "\uD83C\uDF08", name: "rainbow" },
+      { codepoint: "⛈️", name: "cloud with lightning and rain" },
+      { codepoint: "❄️", name: "snowflake" },
+      { codepoint: "☀️", name: "sun" },
+      { codepoint: "\uD83C\uDF19", name: "crescent moon" },
+      { codepoint: "⭐", name: "star" },
+      { codepoint: "\uD83C\uDF1F", name: "glowing star" },
+      { codepoint: "\uD83D\uDCA7", name: "droplet" },
+      { codepoint: "\uD83D\uDD25", name: "fire" },
+    ],
+  },
+  {
+    category: "Activities",
+    emojis: [
+      { codepoint: "⚽", name: "soccer ball" },
+      { codepoint: "\uD83C\uDFC0", name: "basketball" },
+      { codepoint: "\uD83C\uDFC8", name: "american football" },
+      { codepoint: "⚾", name: "baseball" },
+      { codepoint: "\uD83C\uDFBE", name: "tennis" },
+      { codepoint: "\uD83C\uDFD0", name: "volleyball" },
+      { codepoint: "\uD83C\uDFB1", name: "pool 8 ball" },
+      { codepoint: "\uD83C\uDFD3", name: "ping pong" },
+      { codepoint: "\uD83C\uDFAE", name: "video game" },
+      { codepoint: "\uD83D\uDD79️", name: "joystick" },
+      { codepoint: "\uD83C\uDFB2", name: "game die" },
+      { codepoint: "\uD83E\uDDE9", name: "puzzle piece" },
+      { codepoint: "\uD83C\uDFAF", name: "bullseye" },
+      { codepoint: "\uD83C\uDFB3", name: "bowling" },
+      { codepoint: "\uD83C\uDFAA", name: "circus tent" },
+      { codepoint: "\uD83C\uDFAD", name: "performing arts" },
+      { codepoint: "\uD83C\uDFA8", name: "artist palette" },
+      { codepoint: "\uD83C\uDFAC", name: "clapper board" },
+      { codepoint: "\uD83C\uDFA4", name: "microphone" },
+      { codepoint: "\uD83C\uDFA7", name: "headphone" },
+      { codepoint: "\uD83C\uDFB5", name: "musical note" },
+      { codepoint: "\uD83C\uDFB6", name: "musical notes" },
+      { codepoint: "\uD83C\uDFB9", name: "musical keyboard" },
+      { codepoint: "\uD83C\uDFB8", name: "guitar" },
+      { codepoint: "\uD83E\uDD41", name: "drum" },
+      { codepoint: "\uD83C\uDFAA", name: "circus tent" },
+      { codepoint: "\uD83C\uDFC6", name: "trophy" },
+      { codepoint: "\uD83E\uDD47", name: "1st place medal" },
+      { codepoint: "\uD83E\uDD48", name: "2nd place medal" },
+      { codepoint: "\uD83E\uDD49", name: "3rd place medal" },
+      { codepoint: "\uD83C\uDFC5", name: "sports medal" },
+      { codepoint: "\uD83C\uDF96️", name: "military medal" },
+      { codepoint: "\uD83C\uDF97️", name: "reminder ribbon" },
+      { codepoint: "\uD83C\uDF81", name: "wrapped gift" },
+      { codepoint: "\uD83C\uDF88", name: "balloon" },
+      { codepoint: "\uD83C\uDF89", name: "party popper" },
+      { codepoint: "\uD83C\uDF8A", name: "confetti ball" },
+    ],
+  },
+  {
+    category: "Objects",
+    emojis: [
+      { codepoint: "⌚", name: "watch" },
+      { codepoint: "\uD83D\uDCF1", name: "mobile phone" },
+      { codepoint: "\uD83D\uDCBB", name: "laptop" },
+      { codepoint: "⌨️", name: "keyboard" },
+      { codepoint: "\uD83D\uDDA5️", name: "desktop computer" },
+      { codepoint: "\uD83D\uDDA8️", name: "printer" },
+      { codepoint: "\uD83D\uDDB1️", name: "computer mouse" },
+      { codepoint: "\uD83D\uDCBE", name: "floppy disk" },
+      { codepoint: "\uD83D\uDCBF", name: "optical disk" },
+      { codepoint: "\uD83D\uDCF7", name: "camera" },
+      { codepoint: "\uD83D\uDCF9", name: "video camera" },
+      { codepoint: "\uD83C\uDFA5", name: "movie camera" },
+      { codepoint: "\uD83D\uDCFA", name: "television" },
+      { codepoint: "\uD83D\uDCFB", name: "radio" },
+      { codepoint: "\uD83D\uDD14", name: "bell" },
+      { codepoint: "\uD83D\uDCE3", name: "megaphone" },
+      { codepoint: "\uD83D\uDCA1", name: "light bulb" },
+      { codepoint: "\uD83D\uDD26", name: "flashlight" },
+      { codepoint: "\uD83D\uDCDA", name: "books" },
+      { codepoint: "\uD83D\uDCD6", name: "open book" },
+      { codepoint: "\uD83D\uDCDD", name: "memo" },
+      { codepoint: "✏️", name: "pencil" },
+      { codepoint: "\uD83D\uDCCE", name: "paperclip" },
+      { codepoint: "\uD83D\uDCCC", name: "pushpin" },
+      { codepoint: "\uD83D\uDD11", name: "key" },
+      { codepoint: "\uD83D\uDD12", name: "locked" },
+      { codepoint: "\uD83D\uDD13", name: "unlocked" },
+      { codepoint: "\uD83D\uDD27", name: "wrench" },
+      { codepoint: "\uD83D\uDD28", name: "hammer" },
+      { codepoint: "⚙️", name: "gear" },
+      { codepoint: "\uD83E\uDDF2", name: "magnet" },
+      { codepoint: "\uD83D\uDC8E", name: "gem stone" },
+      { codepoint: "\uD83E\uDDEA", name: "test tube" },
+      { codepoint: "\uD83D\uDC8A", name: "pill" },
+      { codepoint: "\uD83E\uDE79", name: "adhesive bandage" },
+    ],
+  },
+  {
+    category: "Symbols",
+    emojis: [
+      { codepoint: "❤️", name: "red heart" },
+      { codepoint: "✅", name: "check mark button" },
+      { codepoint: "❌", name: "cross mark" },
+      { codepoint: "⭕", name: "hollow red circle" },
+      { codepoint: "❗", name: "red exclamation mark" },
+      { codepoint: "❓", name: "red question mark" },
+      { codepoint: "⚠️", name: "warning" },
+      { codepoint: "\uD83D\uDD34", name: "red circle" },
+      { codepoint: "\uD83D\uDFE0", name: "orange circle" },
+      { codepoint: "\uD83D\uDFE1", name: "yellow circle" },
+      { codepoint: "\uD83D\uDFE2", name: "green circle" },
+      { codepoint: "\uD83D\uDD35", name: "blue circle" },
+      { codepoint: "\uD83D\uDFE3", name: "purple circle" },
+      { codepoint: "⚫", name: "black circle" },
+      { codepoint: "⚪", name: "white circle" },
+      { codepoint: "\uD83D\uDD36", name: "large orange diamond" },
+      { codepoint: "\uD83D\uDD37", name: "large blue diamond" },
+      { codepoint: "➕", name: "plus" },
+      { codepoint: "➖", name: "minus" },
+      { codepoint: "➗", name: "divide" },
+      { codepoint: "✖️", name: "multiply" },
+      { codepoint: "♻️", name: "recycling symbol" },
+      { codepoint: "\uD83D\uDCB2", name: "heavy dollar sign" },
+      { codepoint: "©️", name: "copyright" },
+      { codepoint: "®️", name: "registered" },
+      { codepoint: "™️", name: "trade mark" },
+      { codepoint: "\uD83C\uDFF3️", name: "white flag" },
+      { codepoint: "\uD83C\uDFF4", name: "black flag" },
+      { codepoint: "\uD83D\uDEA9", name: "triangular flag" },
+      { codepoint: "\uD83C\uDF8C", name: "crossed flags" },
+    ],
+  },
+];
+
+/** Renders a custom Discord emoji with animated hover behavior */
+function CustomEmoji({
+  discordId,
+  name,
+  animated,
+  selected,
+  size = 32,
+}: {
+  discordId: string;
+  name: string;
+  animated?: boolean;
+  selected?: boolean;
+  size?: number;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const ext = animated && (hovered || selected) ? "gif" : "png";
+  const url = \`https://cdn.discordapp.com/emojis/\${discordId}.\${ext}?size=\${size}&quality=lossless\`;
+
+  return (
+    <img
+      src={url}
+      alt={name}
+      title={name}
+      width={size}
+      height={size}
+      loading="lazy"
+      className="object-contain"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    />
+  );
+}
+
+export function EmojiPicker({
+  guildDiscordId,
+  source = "all",
+  mode = "single",
+  maxCount,
+  value,
+  onSelect,
+  onChange,
+  columns = 8,
+  pageSize = 64,
+  placeholder = "Pick emoji...",
+  className,
+}: EmojiPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<EmojiData[]>([]);
+  const [visibleCount, setVisibleCount] = useState(pageSize);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const currentSelected = value
+    ? selected.filter((e) => value.includes(e.id))
+    : selected;
+
+  // Determine which data sources to fetch
+  const needsGuild = source === "all" || source === "guild";
+  const needsApp = source === "all" || source === "application";
+  const needsDefault = source === "all" || source === "default";
+
+  const guildEmojis = useQuery(
+    api.calabasas.queries.listGuildEmojis,
+    needsGuild && guildDiscordId ? { guildDiscordId } : "skip"
+  );
+  const appEmojis = useQuery(
+    api.calabasas.queries.listAppEmojis,
+    needsApp ? {} : "skip"
+  );
+
+  // Build flat emoji list for search and infinite scroll
+  const allEmojis = useMemo(() => {
+    const sections: { header: string; items: EmojiData[] }[] = [];
+
+    if (needsGuild && guildEmojis && guildEmojis.length > 0) {
+      sections.push({
+        header: "Server Emojis",
+        items: guildEmojis.map((e) => ({
+          id: e.discordId,
+          name: e.name,
+          animated: e.animated,
+          source: "guild" as const,
+        })),
+      });
+    }
+
+    if (needsApp && appEmojis && appEmojis.length > 0) {
+      sections.push({
+        header: "App Emojis",
+        items: appEmojis.map((e) => ({
+          id: e.discordId,
+          name: e.name,
+          animated: e.animated,
+          source: "application" as const,
+        })),
+      });
+    }
+
+    if (needsDefault) {
+      for (const cat of DEFAULT_EMOJIS) {
+        sections.push({
+          header: cat.category,
+          items: cat.emojis.map((e) => ({
+            id: e.codepoint,
+            name: e.name,
+            source: "default" as const,
+          })),
+        });
+      }
+    }
+
+    return sections;
+  }, [guildEmojis, appEmojis, needsGuild, needsApp, needsDefault]);
+
+  // Filter by search
+  const filtered = useMemo(() => {
+    if (!search) return allEmojis;
+    const q = search.toLowerCase();
+    const flat = allEmojis.flatMap((s) => s.items).filter((e) =>
+      e.name.toLowerCase().includes(q)
+    );
+    return flat.length > 0 ? [{ header: "", items: flat }] : [];
+  }, [allEmojis, search]);
+
+  // Flatten for counting
+  const totalCount = useMemo(
+    () => filtered.reduce((acc, s) => acc + s.items.length, 0),
+    [filtered]
+  );
+
+  // Intersection observer for infinite scroll
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && visibleCount < totalCount) {
+          setVisibleCount((prev) => prev + pageSize);
+        }
+      },
+      { root: scrollRef.current, threshold: 0 }
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [visibleCount, totalCount, pageSize]);
+
+  // Reset visible count on search change
+  useEffect(() => {
+    setVisibleCount(pageSize);
+  }, [search, pageSize]);
+
+  // Auto-focus search on open
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    } else {
+      setSearch("");
+    }
+  }, [open]);
+
+  const isSelected = useCallback(
+    (id: string) => {
+      if (value) return value.includes(id);
+      return currentSelected.some((e) => e.id === id);
+    },
+    [value, currentSelected]
+  );
+
+  const handleSelect = useCallback(
+    (emoji: EmojiData) => {
+      if (mode === "single") {
+        setSelected([emoji]);
+        onSelect?.(emoji);
+        onChange?.([emoji]);
+        setOpen(false);
+        return;
+      }
+
+      // Multi mode
+      const alreadySelected = isSelected(emoji.id);
+      let next: EmojiData[];
+
+      if (alreadySelected) {
+        next = currentSelected.filter((e) => e.id !== emoji.id);
+      } else {
+        if (maxCount && currentSelected.length >= maxCount) return;
+        next = [...currentSelected, emoji];
+      }
+
+      setSelected(next);
+      onSelect?.(emoji);
+      onChange?.(next);
+    },
+    [mode, maxCount, currentSelected, isSelected, onSelect, onChange]
+  );
+
+  const handleClear = useCallback(() => {
+    setSelected([]);
+    onChange?.([]);
+  }, [onChange]);
+
+  const atMax = mode === "multi" && maxCount !== undefined && currentSelected.length >= maxCount;
+
+  // Render grid items with virtual slicing
+  let rendered = 0;
+  const gridStyle = { gridTemplateColumns: \`repeat(\${columns}, 1fr)\` };
+
+  // Trigger display
+  const renderTrigger = () => {
+    if (currentSelected.length === 0) return placeholder;
+
+    if (mode === "single" && currentSelected.length === 1) {
+      const emoji = currentSelected[0];
+      if (emoji.source === "default") {
+        return <span className="text-xl">{emoji.id}</span>;
+      }
+      return (
+        <CustomEmoji
+          discordId={emoji.id}
+          name={emoji.name}
+          animated={emoji.animated}
+          selected
+          size={20}
+        />
+      );
+    }
+
+    // Multi mode
+    const shown = currentSelected.slice(0, 5);
+    const extra = currentSelected.length - shown.length;
+    return (
+      <span className="flex items-center gap-1">
+        {shown.map((emoji) =>
+          emoji.source === "default" ? (
+            <span key={emoji.id} className="text-base">{emoji.id}</span>
+          ) : (
+            <CustomEmoji
+              key={emoji.id}
+              discordId={emoji.id}
+              name={emoji.name}
+              animated={emoji.animated}
+              selected
+              size={18}
+            />
+          )
+        )}
+        {extra > 0 && (
+          <span className="text-xs text-muted-foreground ml-1">
+            +{extra}
+          </span>
+        )}
+      </span>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-[280px] justify-between", className)}
+        >
+          {renderTrigger()}
+          <span className="ml-2 text-lg opacity-50">\uD83D\uDE00</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[352px] p-0" align="start">
+        {/* Search */}
+        <div className="flex items-center gap-2 border-b px-3 py-2">
+          <svg
+            className="h-4 w-4 shrink-0 opacity-50"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            ref={searchRef}
+            type="text"
+            placeholder="Search emojis..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          />
+          {search && (
+            <button
+              onClick={() => setSearch("")}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* Scrollable emoji grid */}
+        <div
+          ref={scrollRef}
+          className="max-h-[400px] overflow-y-auto p-2"
+        >
+          {filtered.length === 0 && (
+            <div className="py-8 text-center text-sm text-muted-foreground">
+              No emojis found
+            </div>
+          )}
+
+          {filtered.map((section) => {
+            if (rendered >= visibleCount) return null;
+
+            const remaining = visibleCount - rendered;
+            const items = section.items.slice(0, remaining);
+            rendered += items.length;
+
+            return (
+              <div key={section.header || "search-results"}>
+                {section.header && (
+                  <div className="sticky top-0 z-10 bg-popover px-1 py-1.5 text-xs font-semibold text-muted-foreground">
+                    {section.header}
+                  </div>
+                )}
+                <div className="grid gap-0.5" style={gridStyle}>
+                  {items.map((emoji) => {
+                    const sel = isSelected(emoji.id);
+                    const disabled = !sel && atMax;
+
+                    return (
+                      <button
+                        key={\`\${emoji.source}-\${emoji.id}\`}
+                        onClick={() => !disabled && handleSelect(emoji)}
+                        title={emoji.name}
+                        className={cn(
+                          "flex items-center justify-center rounded-md p-1 h-9 w-full transition-colors",
+                          sel
+                            ? "ring-2 ring-primary bg-accent/50"
+                            : "hover:bg-accent",
+                          disabled && "opacity-50 cursor-not-allowed"
+                        )}
+                      >
+                        {emoji.source === "default" ? (
+                          <span className="text-xl leading-none">{emoji.id}</span>
+                        ) : (
+                          <CustomEmoji
+                            discordId={emoji.id}
+                            name={emoji.name}
+                            animated={emoji.animated}
+                            selected={sel}
+                            size={28}
+                          />
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Sentinel for infinite scroll */}
+          <div ref={sentinelRef} className="h-1" />
+        </div>
+
+        {/* Multi-select footer */}
+        {mode === "multi" && (
+          <div className="flex items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground">
+            <span>
+              Selected: {currentSelected.length}
+              {maxCount !== undefined && \` / \${maxCount}\`}
+            </span>
+            {currentSelected.length > 0 && (
+              <button
+                onClick={handleClear}
+                className="text-xs text-muted-foreground hover:text-foreground underline"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+`,
+  generateConvexQueries: () => `export const listGuildEmojis = query({
+  args: { guildDiscordId: v.string() },
+  returns: v.array(
+    v.object({
+      discordId: v.string(),
+      name: v.string(),
+      animated: v.boolean(),
+      available: v.boolean(),
+    })
+  ),
+  handler: async (ctx, { guildDiscordId }) => {
+    const emojis = await ctx.db
+      .query("calabasasEmojis")
+      .withIndex("by_guild", (q) => q.eq("guildDiscordId", guildDiscordId))
+      .collect();
+    return emojis
+      .filter((e) => e.available)
+      .map((e) => ({
+        discordId: e.discordId,
+        name: e.name,
+        animated: e.animated,
+        available: e.available,
+      }));
+  },
+});
+
+export const listAppEmojis = query({
+  args: {},
+  returns: v.array(
+    v.object({
+      discordId: v.string(),
+      name: v.string(),
+      animated: v.boolean(),
+      available: v.boolean(),
+    })
+  ),
+  handler: async (ctx) => {
+    const emojis = await ctx.db
+      .query("calabasasAppEmojis")
+      .collect();
+    return emojis
+      .filter((e) => e.available)
+      .map((e) => ({
+        discordId: e.discordId,
+        name: e.name,
+        animated: e.animated,
+        available: e.available,
+      }));
+  },
+});`
+};
+
 // src/lib/registry/index.ts
 var REGISTRY = [
   channelSelect,
@@ -4741,7 +5613,8 @@ var REGISTRY = [
   memberCard,
   channelTree,
   memberRoster,
-  useOnlineCount
+  useOnlineCount,
+  emojiPicker
 ];
 function getComponent(name) {
   return REGISTRY.find((c) => c.name === name);
@@ -4764,6 +5637,8 @@ function parseEnabledSyncTypes(configPath) {
       enabled.add("members");
     if (/presence:\s*true/.test(syncContent))
       enabled.add("presence");
+    if (/emojis:\s*true/.test(syncContent))
+      enabled.add("emojis");
   }
   return enabled;
 }
@@ -4925,7 +5800,15 @@ const count = ${camel}("123456789");`;
         "member-card"
       ]);
       const isDisplay = displayComponents.has(firstInstalled.name);
-      if (isDisplay) {
+      const isEmojiPicker = firstInstalled.name === "emoji-picker";
+      if (isEmojiPicker) {
+        usage = `import { ${pascal} } from "@/components/calabasas/${firstInstalled.name}";
+
+<${pascal}
+  guildDiscordId="123456789"
+  onSelect={(emoji) => console.log(emoji)}
+/>`;
+      } else if (isDisplay) {
         const propsMap = {
           "role-badge": `  guildDiscordId="123456789"
   roleIds={["role_id_1", "role_id_2"]}`,
@@ -5329,7 +6212,7 @@ async function botList(options) {
     const React = reactModule.default ?? reactModule;
     const { render } = await import("./index-4rn9k8et.js");
     const { createConvexClient, ConvexProvider } = await import("./convex-1z1jsz1n.js");
-    const { BotList } = await import("./BotList-pbt2yxmj.js");
+    const { BotList } = await import("./BotList-gmtf52xh.js");
     const convexUrl = getConvexUrl(env);
     const client = createConvexClient(convexUrl);
     const { waitUntilExit } = render(React.createElement(ConvexProvider, {
@@ -5359,7 +6242,8 @@ Your Discord bots:
     console.log(`${statusDot} ${pc.bold(bot.name)}`);
     console.log(`   ${pc.dim("ID:")} ${bot._id}`);
     console.log(`   ${pc.dim("Discord App:")} ${bot.discordAppId}`);
-    console.log(`   ${pc.dim("Status:")} ${statusColor(bot.status)}`);
+    const statusText = (bot.status === "disconnected" || bot.status === "error") && bot.disconnectReason ? `${statusColor(bot.status)} ${pc.dim("—")} ${pc.dim(bot.disconnectReason)}` : statusColor(bot.status);
+    console.log(`   ${pc.dim("Status:")} ${statusText}`);
     console.log(`   ${pc.dim("Env:")} ${bot.environment}`);
     console.log("");
   }
@@ -6149,7 +7033,7 @@ Run ${pc3.cyan("`calabasas init`")} first.`);
 
 // src/index.ts
 var dashboard = async (...args) => {
-  const mod = await import("./dashboard-jhqez8y6.js");
+  const mod = await import("./dashboard-y75f0avj.js");
   return mod.dashboard(args[0]);
 };
 var logs = async (...args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "calabasas",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "CLI for Calabasas - Discord Gateway as a Service for Convex",
   "type": "module",
   "bin": {