calabasas 0.16.0 → 0.17.0

package/dist/index.js

@@ -4733,7 +4733,7 @@ export function useOnlineCount(guildDiscordId: string): number | undefined {
 var emojiPicker = {
   name: "emoji-picker",
   kind: "component",
-  description: "Grid-based emoji picker with custom Discord emojis, Unicode emojis, search, and animated GIF support",
+  description: "Discord-style emoji picker with category sidebar, lazy-loaded custom emojis, Unicode emojis, search, and animated GIF support",
   requiredSyncTypes: ["emojis"],
   requiredShadcnComponents: ["popover", "button"],
   generateReactComponent: () => `"use client";
@@ -4765,11 +4765,64 @@ type EmojiPickerProps = {
   onSelect?: (emoji: EmojiData) => void;
   onChange?: (emojis: EmojiData[]) => void;
   columns?: number;
-  pageSize?: number;
   placeholder?: string;
   className?: string;
 };
 
+/** Category icon SVGs for the sidebar (Discord-style) */
+const CATEGORY_ICONS: Record<string, React.ReactNode> = {
+  "Smileys & Emotion": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-6c.78 2.34 2.72 4 5 4s4.22-1.66 5-4H7zm1-2.5c.83 0 1.5-.67 1.5-1.5S8.83 8.5 8 8.5 6.5 9.17 6.5 10 7.17 11.5 8 11.5zm8 0c.83 0 1.5-.67 1.5-1.5S16.83 8.5 16 8.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5z"/>
+    </svg>
+  ),
+  "People & Body": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-2 0c0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4-4 1.79-4 4zm7.22 4.22L9 14.44l-3.22-3.22L4.37 12.6l4.63 4.63 4.63-4.63-1.41-1.38zM17 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-2 0c0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4-4 1.79-4 4z"/>
+    </svg>
+  ),
+  "Animals & Nature": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M6.05 8.05c-2.73 2.73-2.73 7.15-.02 9.88a6.95 6.95 0 004.95 2.05c.78 0 1.57-.13 2.32-.39-.98-.54-1.86-1.27-2.59-2.17-.35-.43-.66-.89-.93-1.37a6.93 6.93 0 01-.8-4.44c.12-.9.42-1.75.85-2.53a7.06 7.06 0 01-3.78-1.03zm4.97.17c-.36.42-.66.89-.9 1.39-.42.9-.63 1.87-.62 2.87.01.95.23 1.88.66 2.72.23.45.5.87.82 1.24.68.8 1.52 1.42 2.46 1.87 2.13-1.05 3.61-3.15 3.61-5.59 0-2.07-1.01-3.9-2.56-5.05a6.93 6.93 0 00-3.47 1.55zM19.95 2a6.97 6.97 0 00-4.93 2.05 7.1 7.1 0 00-.58.65A8.94 8.94 0 0119 10.72c0 3.4-1.94 6.35-4.77 7.82A8.98 8.98 0 0110 20a8.9 8.9 0 01-5.64-2 6.98 6.98 0 005.64 4 6.97 6.97 0 004.95-2.05c2.73-2.73 2.73-7.17 0-9.9.65-.56 1.2-1.23 1.63-1.99A6.93 6.93 0 0020 4c0-.7-.1-1.38-.3-2h.25z"/>
+    </svg>
+  ),
+  "Food & Drink": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1zm15.03-7c0-4.5-6.77-5-7.52-5s-7.51.5-7.51 5v1h15.03v-1zM1.02 17h15v2h-15v-2z"/>
+    </svg>
+  ),
+  "Travel & Places": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+    </svg>
+  ),
+  "Activities": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
+    </svg>
+  ),
+  "Objects": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/>
+    </svg>
+  ),
+  "Symbols": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+    </svg>
+  ),
+  "Server Emojis": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+    </svg>
+  ),
+  "App Emojis": (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-7-2h2v-4h4v-2h-4V7h-2v4H8v2h4z"/>
+    </svg>
+  ),
+};
+
 /** Curated default Unicode emojis organized by Discord-style categories */
 const DEFAULT_EMOJIS: { category: string; emojis: { codepoint: string; name: string }[] }[] = [
   {
@@ -5153,21 +5206,30 @@ const DEFAULT_EMOJIS: { category: string; emojis: { codepoint: string; name: str
   },
 ];
 
-/** Renders a custom Discord emoji with animated hover behavior */
+const EMOJI_BUTTON_SIZE = 44;
+
+/** Renders a custom Discord emoji — only loads the image when visible */
 function CustomEmoji({
   discordId,
   name,
   animated,
   selected,
   size = 32,
+  visible = true,
 }: {
   discordId: string;
   name: string;
   animated?: boolean;
   selected?: boolean;
   size?: number;
+  visible?: boolean;
 }) {
   const [hovered, setHovered] = useState(false);
+
+  if (!visible) {
+    return <div style={{ width: size, height: size }} />;
+  }
+
   const ext = animated && (hovered || selected) ? "gif" : "png";
   const url = \`https://cdn.discordapp.com/emojis/\${discordId}.\${ext}?size=\${size}&quality=lossless\`;
 
@@ -5186,6 +5248,75 @@ function CustomEmoji({
   );
 }
 
+/** Wraps each emoji button and uses IntersectionObserver to only render content when in view */
+function LazyEmoji({
+  emoji,
+  selected,
+  disabled,
+  onClick,
+  scrollRoot,
+}: {
+  emoji: EmojiData;
+  selected: boolean;
+  disabled: boolean;
+  onClick: () => void;
+  scrollRoot: HTMLDivElement | null;
+}) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { root: scrollRoot, rootMargin: "100px" }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [scrollRoot]);
+
+  return (
+    <button
+      ref={ref}
+      onClick={() => !disabled && onClick()}
+      title={emoji.name}
+      className={cn(
+        "flex items-center justify-center rounded-md transition-colors",
+        selected
+          ? "ring-2 ring-primary bg-accent/50"
+          : "hover:bg-accent",
+        disabled && "opacity-50 cursor-not-allowed"
+      )}
+      style={{ width: EMOJI_BUTTON_SIZE, height: EMOJI_BUTTON_SIZE }}
+    >
+      {emoji.source === "default" ? (
+        visible ? (
+          <span className="text-2xl leading-none">{emoji.id}</span>
+        ) : (
+          <span style={{ width: 28, height: 28 }} />
+        )
+      ) : (
+        <CustomEmoji
+          discordId={emoji.id}
+          name={emoji.name}
+          animated={emoji.animated}
+          selected={selected}
+          size={32}
+          visible={visible}
+        />
+      )}
+    </button>
+  );
+}
+
 export function EmojiPicker({
   guildDiscordId,
   source = "all",
@@ -5194,18 +5325,17 @@ export function EmojiPicker({
   value,
   onSelect,
   onChange,
-  columns = 8,
-  pageSize = 64,
+  columns = 9,
   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 [activeSection, setActiveSection] = useState(0);
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef<HTMLInputElement>(null);
+  const sectionRefs = useRef<Map<number, HTMLDivElement>>(new Map());
 
   const currentSelected = value
     ? selected.filter((e) => value.includes(e.id))
@@ -5225,8 +5355,8 @@ export function EmojiPicker({
     needsApp ? {} : "skip"
   );
 
-  // Build flat emoji list for search and infinite scroll
-  const allEmojis = useMemo(() => {
+  // Build sections
+  const allSections = useMemo(() => {
     const sections: { header: string; items: EmojiData[] }[] = [];
 
     if (needsGuild && guildEmojis && guildEmojis.length > 0) {
@@ -5271,42 +5401,35 @@ export function EmojiPicker({
 
   // Filter by search
   const filtered = useMemo(() => {
-    if (!search) return allEmojis;
+    if (!search) return allSections;
     const q = search.toLowerCase();
-    const flat = allEmojis.flatMap((s) => s.items).filter((e) =>
+    const flat = allSections.flatMap((s) => s.items).filter((e) =>
       e.name.toLowerCase().includes(q)
     );
-    return flat.length > 0 ? [{ header: "", items: flat }] : [];
-  }, [allEmojis, search]);
+    return flat.length > 0 ? [{ header: "Search Results", items: flat }] : [];
+  }, [allSections, search]);
 
-  // Flatten for counting
-  const totalCount = useMemo(
-    () => filtered.reduce((acc, s) => acc + s.items.length, 0),
-    [filtered]
-  );
-
-  // Intersection observer for infinite scroll
+  // Track which section is in view via IntersectionObserver
   useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
+    if (search) return;
+    const container = scrollRef.current;
+    if (!container) return;
 
     const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting && visibleCount < totalCount) {
-          setVisibleCount((prev) => prev + pageSize);
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const idx = Number(entry.target.getAttribute("data-section-index"));
+            if (!isNaN(idx)) setActiveSection(idx);
+          }
         }
       },
-      { root: scrollRef.current, threshold: 0 }
+      { root: container, rootMargin: "-10% 0px -80% 0px", threshold: 0 }
     );
 
-    observer.observe(sentinel);
+    sectionRefs.current.forEach((el) => observer.observe(el));
     return () => observer.disconnect();
-  }, [visibleCount, totalCount, pageSize]);
-
-  // Reset visible count on search change
-  useEffect(() => {
-    setVisibleCount(pageSize);
-  }, [search, pageSize]);
+  }, [filtered, search]);
 
   // Auto-focus search on open
   useEffect(() => {
@@ -5314,9 +5437,17 @@ export function EmojiPicker({
       setTimeout(() => searchRef.current?.focus(), 0);
     } else {
       setSearch("");
+      setActiveSection(0);
     }
   }, [open]);
 
+  const scrollToSection = useCallback((index: number) => {
+    const el = sectionRefs.current.get(index);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
+
   const isSelected = useCallback(
     (id: string) => {
       if (value) return value.includes(id);
@@ -5335,7 +5466,6 @@ export function EmojiPicker({
         return;
       }
 
-      // Multi mode
       const alreadySelected = isSelected(emoji.id);
       let next: EmojiData[];
 
@@ -5360,9 +5490,7 @@ export function EmojiPicker({
 
   const atMax = mode === "multi" && maxCount !== undefined && currentSelected.length >= maxCount;
 
-  // Render grid items with virtual slicing
-  let rendered = 0;
-  const gridStyle = { gridTemplateColumns: \`repeat(\${columns}, 1fr)\` };
+  const gridStyle = { gridTemplateColumns: \`repeat(\${columns}, \${EMOJI_BUTTON_SIZE}px)\` };
 
   // Trigger display
   const renderTrigger = () => {
@@ -5384,7 +5512,6 @@ export function EmojiPicker({
       );
     }
 
-    // Multi mode
     const shown = currentSelected.slice(0, 5);
     const extra = currentSelected.length - shown.length;
     return (
@@ -5425,125 +5552,138 @@ export function EmojiPicker({
           <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"
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex flex-col" style={{ width: columns * EMOJI_BUTTON_SIZE + 52 + 16 }}>
+          {/* Search bar */}
+          <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"
             >
-              <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>
+              <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>
-          )}
+          {/* Main body: sidebar + emoji grid */}
+          <div className="flex">
+            {/* Category sidebar */}
+            {!search && (
+              <div className="flex flex-col items-center gap-0.5 border-r py-1.5 px-1 overflow-y-auto" style={{ maxHeight: 420 }}>
+                {filtered.map((section, i) => (
+                  <button
+                    key={section.header}
+                    onClick={() => scrollToSection(i)}
+                    title={section.header}
+                    className={cn(
+                      "flex items-center justify-center rounded-md w-8 h-8 shrink-0 transition-colors",
+                      activeSection === i
+                        ? "bg-accent text-accent-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                    )}
+                  >
+                    {CATEGORY_ICONS[section.header] ?? (
+                      <span className="text-sm leading-none">
+                        {section.items[0]?.source === "default"
+                          ? section.items[0].id
+                          : "?"}
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
 
-          {filtered.map((section) => {
-            if (rendered >= visibleCount) return null;
+            {/* Scrollable emoji grid */}
+            <div
+              ref={scrollRef}
+              className="overflow-y-auto p-2 flex-1"
+              style={{ maxHeight: 420 }}
+            >
+              {filtered.length === 0 && (
+                <div className="py-8 text-center text-sm text-muted-foreground">
+                  No emojis found
+                </div>
+              )}
 
-            const remaining = visibleCount - rendered;
-            const items = section.items.slice(0, remaining);
-            rendered += items.length;
+              {filtered.map((section, sectionIdx) => (
+                <div
+                  key={section.header || "search-results"}
+                  ref={(el) => {
+                    if (el) sectionRefs.current.set(sectionIdx, el);
+                    else sectionRefs.current.delete(sectionIdx);
+                  }}
+                  data-section-index={sectionIdx}
+                >
+                  {section.header && (
+                    <div className="sticky top-0 z-10 bg-popover px-1 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                      {section.header}
+                    </div>
+                  )}
+                  <div className="grid" style={gridStyle}>
+                    {section.items.map((emoji) => {
+                      const sel = isSelected(emoji.id);
+                      const disabled = !sel && atMax;
 
-            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}
+                      return (
+                        <LazyEmoji
+                          key={\`\${emoji.source}-\${emoji.id}\`}
+                          emoji={emoji}
+                          selected={sel}
+                          disabled={disabled}
+                          onClick={() => handleSelect(emoji)}
+                          scrollRoot={scrollRef.current}
+                        />
+                      );
+                    })}
                   </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>
-            );
-          })}
+              ))}
+            </div>
+          </div>
 
-          {/* Sentinel for infinite scroll */}
-          <div ref={sentinelRef} className="h-1" />
+          {/* 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>
+          )}
         </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>
   );
@@ -5601,6 +5741,652 @@ export const listAppEmojis = query({
 });`
 };
 
+// src/lib/registry/components/role-creator.ts
+var roleCreator = {
+  name: "role-creator",
+  kind: "component",
+  description: "Discord-style role creation dialog with color picker, member assignment, and position ordering",
+  requiredSyncTypes: ["roles", "members"],
+  requiredShadcnComponents: ["dialog", "button", "popover", "command"],
+  generateReactComponent: () => `"use client";
+
+import { useState, useMemo } from "react";
+import { useQuery } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  Check,
+  X,
+  ChevronsUpDown,
+  User,
+  Plus,
+  ChevronUp,
+  ChevronDown,
+} from "lucide-react";
+
+/**
+ * Discord's 20 preset role colors arranged in two rows:
+ * Row 1 — lighter tones, Row 2 — darker counterparts.
+ */
+const PRESET_COLORS: number[] = [
+  0x1abc9c, 0x2ecc71, 0x3498db, 0x9b59b6, 0xe91e63,
+  0xf1c40f, 0xe67e22, 0xe74c3c, 0x95a5a6, 0x607d8b,
+  0x11806a, 0x1f8b4c, 0x206694, 0x71368a, 0xad1457,
+  0xc27c0e, 0xa84300, 0x992d22, 0x979c9f, 0x546e7a,
+];
+
+/** Convert Discord integer color to hex CSS string */
+function colorToHex(color: number): string {
+  if (color === 0) return "#99AAB5";
+  return "#" + color.toString(16).padStart(6, "0");
+}
+
+/** Convert hex string to Discord integer color */
+function hexToColor(hex: string): number {
+  const clean = hex.replace("#", "");
+  const parsed = parseInt(clean, 16);
+  return isNaN(parsed) ? 0 : parsed;
+}
+
+/** Convert Discord integer color to rgba string */
+function colorToRgba(color: number, alpha: number): string {
+  if (color === 0) return \`rgba(153, 170, 181, \${alpha})\`;
+  const r = (color >> 16) & 0xff;
+  const g = (color >> 8) & 0xff;
+  const b = color & 0xff;
+  return \`rgba(\${r}, \${g}, \${b}, \${alpha})\`;
+}
+
+/** Build Discord CDN avatar URL */
+function avatarUrl(
+  userId: string,
+  avatar: string | undefined,
+): string | null {
+  if (!avatar) return null;
+  return \`https://cdn.discordapp.com/avatars/\${userId}/\${avatar}.png?size=32\`;
+}
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type RoleCreatorData = {
+  name: string;
+  color: number;
+  memberIds: string[];
+  position: number;
+};
+
+type RoleCreatorProps = {
+  guildDiscordId: string;
+  defaultMemberIds?: string[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onCreate?: (data: RoleCreatorData) => void;
+  trigger?: React.ReactNode;
+  className?: string;
+};
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function RoleCreator({
+  guildDiscordId,
+  defaultMemberIds = [],
+  open: controlledOpen,
+  onOpenChange,
+  onCreate,
+  trigger,
+  className,
+}: RoleCreatorProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  // Form state
+  const [name, setName] = useState("new role");
+  const [color, setColor] = useState(0);
+  const [customHex, setCustomHex] = useState("");
+  const [usingCustom, setUsingCustom] = useState(false);
+  const [selectedMembers, setSelectedMembers] = useState<string[]>(defaultMemberIds);
+  const [memberPickerOpen, setMemberPickerOpen] = useState(false);
+  const [positionIndex, setPositionIndex] = useState(0);
+
+  // Data
+  const roles = useQuery(api.calabasas.queries.listRolesForCreator, {
+    guildDiscordId,
+  });
+  const members = useQuery(api.calabasas.queries.listMembersForCreator, {
+    guildDiscordId,
+  });
+
+  // Sort roles highest-position first, exclude @everyone
+  const sortedRoles = useMemo(() => {
+    if (!roles) return [];
+    return roles
+      .filter((r) => r.name !== "@everyone")
+      .sort((a, b) => b.position - a.position);
+  }, [roles]);
+
+  // Calculate the position value from the insertion index
+  const calculatedPosition = useMemo(() => {
+    if (sortedRoles.length === 0) return 1;
+    if (positionIndex === 0) return sortedRoles[0].position + 1;
+    if (positionIndex >= sortedRoles.length) return 1;
+    return sortedRoles[positionIndex - 1].position;
+  }, [sortedRoles, positionIndex]);
+
+  const reset = () => {
+    setName("new role");
+    setColor(0);
+    setCustomHex("");
+    setUsingCustom(false);
+    setSelectedMembers(defaultMemberIds);
+    setMemberPickerOpen(false);
+    setPositionIndex(0);
+  };
+
+  const setOpen = (v: boolean) => {
+    if (!v) reset();
+    if (!isControlled) setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+
+  const handleCreate = () => {
+    onCreate?.({
+      name,
+      color,
+      memberIds: selectedMembers,
+      position: calculatedPosition,
+    });
+    setOpen(false);
+  };
+
+  const toggleMember = (userId: string) => {
+    setSelectedMembers((prev) =>
+      prev.includes(userId)
+        ? prev.filter((id) => id !== userId)
+        : [...prev, userId],
+    );
+  };
+
+  const selectPreset = (c: number) => {
+    setColor(c);
+    setUsingCustom(false);
+    setCustomHex("");
+  };
+
+  const moveUp = () => setPositionIndex((i) => Math.max(0, i - 1));
+  const moveDown = () =>
+    setPositionIndex((i) => Math.min(sortedRoles.length, i + 1));
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className={className}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create Role
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-[520px] p-0 gap-0 overflow-hidden">
+        {/* ── Header ──────────────────────────────────────────────── */}
+        <DialogHeader className="px-6 pt-6 pb-2">
+          <DialogTitle>Create Role</DialogTitle>
+          <DialogDescription>
+            Configure the role's appearance, assign members, and set its
+            position in the hierarchy.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* ── Live preview ────────────────────────────────────────── */}
+        <div className="px-6 py-3">
+          <div className="flex items-center gap-3 rounded-lg border bg-muted/40 px-4 py-3">
+            <span
+              className="h-3.5 w-3.5 rounded-full shrink-0 transition-colors duration-200"
+              style={{ backgroundColor: colorToHex(color) }}
+            />
+            <span className="text-sm font-medium truncate">
+              {name || "new role"}
+            </span>
+            <span
+              className="ml-auto text-[11px] font-medium px-2.5 py-0.5 rounded-full transition-colors duration-200"
+              style={{
+                backgroundColor: colorToRgba(color, 0.12),
+                color: colorToHex(color),
+                border: \`1px solid \${colorToRgba(color, 0.25)}\`,
+              }}
+            >
+              Preview
+            </span>
+          </div>
+        </div>
+
+        {/* ── Scrollable body ─────────────────────────────────────── */}
+        <div className="overflow-y-auto max-h-[60vh] px-6 pb-2 space-y-5">
+          {/* ROLE NAME --------------------------------------------------- */}
+          <fieldset>
+            <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+              Role Name
+            </legend>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="new role"
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          </fieldset>
+
+          {/* ROLE COLOR -------------------------------------------------- */}
+          <fieldset>
+            <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+              Role Color
+            </legend>
+
+            {/* Default (no color) toggle */}
+            <button
+              onClick={() => selectPreset(0)}
+              className={cn(
+                "mb-3 inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
+                color === 0
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-input text-muted-foreground hover:bg-accent",
+              )}
+            >
+              <span
+                className="h-4 w-4 rounded-full border-2 transition-colors"
+                style={{
+                  borderColor: "#99AAB5",
+                  backgroundColor: color === 0 ? "#99AAB5" : "transparent",
+                }}
+              />
+              Default
+            </button>
+
+            {/* Preset grid (2 rows of 10) */}
+            <div className="grid grid-cols-10 gap-2 mb-3">
+              {PRESET_COLORS.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => selectPreset(c)}
+                  className={cn(
+                    "h-7 w-7 rounded-full transition-all duration-150 hover:scale-110 focus-visible:outline-none relative",
+                    color === c &&
+                      "ring-2 ring-offset-2 ring-offset-background ring-primary scale-110",
+                  )}
+                  style={{ backgroundColor: colorToHex(c) }}
+                  title={colorToHex(c)}
+                >
+                  {color === c && (
+                    <Check className="h-3 w-3 text-white absolute inset-0 m-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {/* Custom color */}
+            <div className="flex items-center gap-2">
+              <div className="relative">
+                <input
+                  type="color"
+                  value={color !== 0 ? colorToHex(color) : "#000000"}
+                  onChange={(e) => {
+                    const hex = e.target.value;
+                    setColor(hexToColor(hex));
+                    setCustomHex(hex);
+                    setUsingCustom(true);
+                  }}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                />
+                <div
+                  className={cn(
+                    "h-7 w-7 rounded-full border-2 flex items-center justify-center cursor-pointer transition-colors",
+                    usingCustom
+                      ? "border-primary"
+                      : "border-dashed border-muted-foreground/40 hover:border-muted-foreground",
+                  )}
+                  style={
+                    usingCustom && color !== 0
+                      ? { backgroundColor: colorToHex(color), borderStyle: "solid" }
+                      : {}
+                  }
+                >
+                  {!usingCustom && (
+                    <Plus className="h-3 w-3 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+              <input
+                type="text"
+                value={customHex}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  setCustomHex(v);
+                  if (v.match(/^#?[0-9a-fA-F]{6}$/)) {
+                    setColor(hexToColor(v));
+                    setUsingCustom(true);
+                  }
+                }}
+                placeholder="#000000"
+                maxLength={7}
+                className="w-[88px] rounded-md border border-input bg-background px-2 py-1 text-sm font-mono shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            </div>
+          </fieldset>
+
+          {/* ADD MEMBERS ------------------------------------------------- */}
+          <fieldset>
+            <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+              Add Members
+              {selectedMembers.length > 0 && (
+                <span className="ml-1.5 text-[11px] font-normal">
+                  ({selectedMembers.length})
+                </span>
+              )}
+            </legend>
+
+            {/* Selected member chips */}
+            {selectedMembers.length > 0 && (
+              <div className="flex flex-wrap gap-1.5 mb-2">
+                {selectedMembers.map((userId) => {
+                  const member = members?.find(
+                    (m) => m.discordUserId === userId,
+                  );
+                  if (!member) return null;
+                  const url = avatarUrl(member.discordUserId, member.avatar);
+                  return (
+                    <span
+                      key={userId}
+                      className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 text-primary pl-1 pr-1.5 py-0.5 text-xs font-medium"
+                    >
+                      {url ? (
+                        <img
+                          src={url}
+                          alt=""
+                          className="h-4 w-4 rounded-full shrink-0 object-cover"
+                        />
+                      ) : (
+                        <div className="h-4 w-4 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
+                          <User className="h-2.5 w-2.5" />
+                        </div>
+                      )}
+                      {member.displayName ?? member.username}
+                      <button
+                        onClick={() => toggleMember(userId)}
+                        className="rounded-full p-0.5 hover:bg-primary/20 transition-colors"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Member combobox */}
+            <Popover open={memberPickerOpen} onOpenChange={setMemberPickerOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={memberPickerOpen}
+                  className="w-full justify-between font-normal"
+                >
+                  <span className="text-muted-foreground">
+                    Search by name or ID...
+                  </span>
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="Search members..." />
+                  <CommandList>
+                    <CommandEmpty>No members found.</CommandEmpty>
+                    <CommandGroup>
+                      {members?.map((member) => {
+                        const checked = selectedMembers.includes(
+                          member.discordUserId,
+                        );
+                        const url = avatarUrl(
+                          member.discordUserId,
+                          member.avatar,
+                        );
+                        return (
+                          <CommandItem
+                            key={member.discordUserId}
+                            value={\`\${member.discordUserId} \${member.username} \${member.displayName ?? ""} \${member.nick ?? ""}\`}
+                            onSelect={() => toggleMember(member.discordUserId)}
+                          >
+                            {url ? (
+                              <img
+                                src={url}
+                                alt=""
+                                className="mr-2 h-5 w-5 rounded-full shrink-0 object-cover"
+                              />
+                            ) : (
+                              <div className="mr-2 h-5 w-5 rounded-full bg-muted flex items-center justify-center shrink-0">
+                                <User className="h-3 w-3 text-muted-foreground" />
+                              </div>
+                            )}
+                            <span className="truncate">
+                              {member.displayName ?? member.username}
+                            </span>
+                            <Check
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                checked ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </fieldset>
+
+          {/* ROLE POSITION ------------------------------------------------ */}
+          <fieldset>
+            <div className="flex items-center justify-between mb-2">
+              <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                Role Position
+              </legend>
+              <div className="flex items-center gap-0.5">
+                <button
+                  onClick={moveUp}
+                  disabled={positionIndex === 0}
+                  className="rounded-md p-1 hover:bg-accent disabled:opacity-25 disabled:pointer-events-none transition-colors"
+                  title="Move up"
+                >
+                  <ChevronUp className="h-4 w-4" />
+                </button>
+                <button
+                  onClick={moveDown}
+                  disabled={positionIndex >= sortedRoles.length}
+                  className="rounded-md p-1 hover:bg-accent disabled:opacity-25 disabled:pointer-events-none transition-colors"
+                  title="Move down"
+                >
+                  <ChevronDown className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+
+            <div className="max-h-[200px] overflow-y-auto rounded-md border border-input">
+              {sortedRoles.length === 0 && roles !== undefined ? (
+                <>
+                  <NewRoleEntry
+                    name={name}
+                    color={color}
+                  />
+                  <EveryoneEntry />
+                </>
+              ) : sortedRoles.length === 0 ? (
+                <div className="px-3 py-8 text-center text-sm text-muted-foreground">
+                  Loading roles...
+                </div>
+              ) : (
+                <>
+                  {sortedRoles.map((role, i) => (
+                    <div key={role.discordId}>
+                      {positionIndex === i && (
+                        <NewRoleEntry
+                          name={name}
+                          color={color}
+                        />
+                      )}
+                      <div className="flex items-center gap-2.5 px-3 py-2 text-sm">
+                        <span
+                          className="h-3 w-3 rounded-full shrink-0"
+                          style={{ backgroundColor: colorToHex(role.color) }}
+                        />
+                        <span className="truncate flex-1">{role.name}</span>
+                        <span className="text-[11px] tabular-nums text-muted-foreground">
+                          {role.position}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                  {positionIndex >= sortedRoles.length && (
+                    <NewRoleEntry
+                      name={name}
+                      color={color}
+                    />
+                  )}
+                  <EveryoneEntry />
+                </>
+              )}
+            </div>
+          </fieldset>
+        </div>
+
+        {/* ── Footer ──────────────────────────────────────────────── */}
+        <div className="flex items-center justify-end gap-3 border-t px-6 py-4 mt-1">
+          <Button variant="ghost" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={!name.trim()}
+            className="transition-colors duration-200"
+            style={
+              color !== 0
+                ? { backgroundColor: colorToHex(color), color: "#fff" }
+                : undefined
+            }
+          >
+            Create Role
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ── Sub-components ─────────────────────────────────────────────────────────
+
+function NewRoleEntry({ name, color }: { name: string; color: number }) {
+  return (
+    <div className="flex items-center gap-2.5 px-3 py-2 bg-primary/[0.08] border-l-2 border-l-primary">
+      <span
+        className="h-3 w-3 rounded-full shrink-0 transition-colors duration-200"
+        style={{ backgroundColor: colorToHex(color) }}
+      />
+      <span className="text-sm font-medium truncate flex-1">
+        {name || "new role"}
+      </span>
+      <span className="text-[11px] font-semibold text-primary">NEW</span>
+    </div>
+  );
+}
+
+function EveryoneEntry() {
+  return (
+    <div className="flex items-center gap-2.5 px-3 py-2 opacity-40">
+      <span className="h-3 w-3 rounded-full shrink-0 bg-muted-foreground/50" />
+      <span className="text-sm truncate">@everyone</span>
+      <span className="ml-auto text-[11px] tabular-nums">0</span>
+    </div>
+  );
+}
+`,
+  generateConvexQueries: () => `export const listRolesForCreator = query({
+  args: { guildDiscordId: v.string() },
+  returns: v.array(
+    v.object({
+      discordId: v.string(),
+      name: v.string(),
+      color: v.number(),
+      position: v.number(),
+    })
+  ),
+  handler: async (ctx, { guildDiscordId }) => {
+    const roles = await ctx.db
+      .query("calabasasRoles")
+      .withIndex("by_guild", (q) => q.eq("guildDiscordId", guildDiscordId))
+      .collect();
+    return roles.map((r) => ({
+      discordId: r.discordId,
+      name: r.name,
+      color: r.color,
+      position: r.position,
+    }));
+  },
+});
+
+export const listMembersForCreator = query({
+  args: { guildDiscordId: v.string() },
+  returns: v.array(
+    v.object({
+      discordUserId: v.string(),
+      username: v.string(),
+      displayName: v.optional(v.string()),
+      avatar: v.optional(v.string()),
+      nick: v.optional(v.string()),
+    })
+  ),
+  handler: async (ctx, { guildDiscordId }) => {
+    const members = await ctx.db
+      .query("calabasasMembers")
+      .withIndex("by_guild", (q) => q.eq("guildDiscordId", guildDiscordId))
+      .collect();
+    return members.map((m) => ({
+      discordUserId: m.discordUserId,
+      username: m.username,
+      displayName: m.displayName,
+      avatar: m.avatar,
+      nick: m.nick,
+    }));
+  },
+});`
+};
+
 // src/lib/registry/index.ts
 var REGISTRY = [
   channelSelect,
@@ -5614,7 +6400,8 @@ var REGISTRY = [
   channelTree,
   memberRoster,
   useOnlineCount,
-  emojiPicker
+  emojiPicker,
+  roleCreator
 ];
 function getComponent(name) {
   return REGISTRY.find((c) => c.name === name);

package/package.json

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