calabasas 0.16.0 → 0.16.1

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>
   );

package/package.json

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