@particle-academy/react-fancy 3.1.0 → 3.2.0

package/dist/index.js

@@ -12135,7 +12135,8 @@ function PromptInput({
   placeholder = "Ask anything. Type / for commands, @ for mentions. \u2318/Ctrl+Enter to send.",
   charsPerToken = 4,
   mentionColor,
-  maxHeight = 280
+  maxHeight = 280,
+  aboveInput
 }) {
   const [text, setText] = useState("");
   const [attachments, setAttachments] = useState([]);
@@ -12271,6 +12272,7 @@ function PromptInput({
       onDrop,
       className: `relative rounded-md border transition ${dragOver ? "border-violet-400 bg-violet-50/50 dark:border-violet-600 dark:bg-violet-950/30" : "border-zinc-200 dark:border-zinc-800"} bg-white dark:bg-zinc-900`,
       children: [
+        aboveInput && /* @__PURE__ */ jsx("div", { className: "border-b border-zinc-200 dark:border-zinc-800", children: aboveInput }),
         attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: attachments.map((a) => /* @__PURE__ */ jsxs(
           "span",
           {
@@ -12411,6 +12413,491 @@ function fmtSize(b) {
   if (b < 1024 * 1024) return `${(b / 1024).toFixed(0)} KB`;
   return `${(b / 1024 / 1024).toFixed(1)} MB`;
 }
+function ChatDrawer({
+  tabs,
+  activeTabId,
+  onTabChange,
+  open = true,
+  onToggle,
+  children,
+  minBodyHeight = 140,
+  className
+}) {
+  const handleToggle = useCallback(() => {
+    onToggle?.(!open);
+  }, [onToggle, open]);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: tabs.map((tab, i) => {
+        const active = tab.id === activeTabId;
+        const number = tab.number === null ? null : tab.number ?? i + 1;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onTabChange(tab.id),
+            className: [
+              "group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px] font-medium transition",
+              active ? "border-violet-500 bg-violet-500 text-white" : "border-zinc-200 bg-transparent text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800"
+            ].join(" "),
+            "aria-pressed": active,
+            children: [
+              number !== null && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold",
+                    active ? "bg-white/20 text-white" : "bg-zinc-200 text-zinc-600 group-hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300"
+                  ].join(" "),
+                  children: number
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: tab.label })
+            ]
+          },
+          tab.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggle,
+          "aria-label": open ? "Collapse drawer" : "Expand drawer",
+          "aria-expanded": open,
+          className: "ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: open ? "chevron-down" : "chevron-up",
+              className: "h-3.5 w-3.5"
+            }
+          )
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-2.5 pb-2.5",
+        style: { minHeight: minBodyHeight },
+        children
+      }
+    )
+  ] });
+}
+function defaultKeyOf(item) {
+  if (item && typeof item === "object") {
+    const r = item;
+    if (typeof r.name === "string") return r.name;
+    if (typeof r.id === "string") return r.id;
+  }
+  return String(item);
+}
+function defaultFilter(item, query) {
+  if (!query) return true;
+  return defaultKeyOf(item).toLowerCase().includes(query.toLowerCase());
+}
+function detectTrigger(text, caret, triggerChars) {
+  for (let i = caret - 1; i >= 0; i--) {
+    const ch = text[i];
+    if (ch === void 0) break;
+    if (triggerChars.has(ch)) {
+      if (i === 0 || /\s/.test(text[i - 1])) {
+        return {
+          char: ch,
+          start: i,
+          end: caret,
+          query: text.slice(i + 1, caret)
+        };
+      }
+      return null;
+    }
+    if (/\s/.test(ch)) return null;
+  }
+  return null;
+}
+function InputTag({
+  adapter,
+  triggers,
+  maxItems = 8,
+  placement = "bottom-left",
+  className,
+  style,
+  onPick
+}) {
+  const triggerChars = useMemo(() => new Set(Object.keys(triggers)), [triggers]);
+  const [active, setActive] = useState(null);
+  const [cursor, setCursor] = useState(0);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const stateRef = useRef({ text: "", caretIndex: 0 });
+  const activeRef = useRef(null);
+  const cursorRef = useRef(0);
+  activeRef.current = active;
+  cursorRef.current = cursor;
+  const items = useMemo(() => {
+    if (!active) return [];
+    const cfg2 = triggers[active.char];
+    if (!cfg2) return [];
+    const filter = cfg2.filter ?? defaultFilter;
+    const out = [];
+    for (const item of cfg2.items) {
+      if (filter(item, active.query)) out.push(item);
+      if (out.length >= maxItems) break;
+    }
+    return out;
+  }, [active, triggers, maxItems]);
+  useEffect(() => {
+    return adapter.subscribe((s) => {
+      stateRef.current = s;
+      const next = detectTrigger(s.text, s.caretIndex, triggerChars);
+      setActive((prev) => {
+        if (!prev || !next || prev.char !== next.char || prev.start !== next.start) {
+          setCursor(0);
+        }
+        return next;
+      });
+      if (next) setAnchorRect(adapter.getAnchorRect());
+    });
+  }, [adapter, triggerChars]);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const update = () => setAnchorRect(adapter.getAnchorRect());
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [active, adapter]);
+  useEffect(() => {
+    if (cursor >= items.length) setCursor(Math.max(0, items.length - 1));
+  }, [items.length, cursor]);
+  const pickItem = useCallback(
+    (item) => {
+      const cur = activeRef.current;
+      if (!cur) return;
+      const cfg2 = triggers[cur.char];
+      if (!cfg2) return;
+      const replacement = cfg2.insert(item, cur.query);
+      adapter.replaceRange(cur.start, cur.end, replacement);
+      onPick?.({ triggerChar: cur.char, query: cur.query, item });
+      setActive(null);
+    },
+    [adapter, triggers, onPick]
+  );
+  useEffect(() => {
+    return adapter.onKey((e) => {
+      const cur = activeRef.current;
+      if (!cur) return false;
+      const visible = items;
+      switch (e.key) {
+        case "ArrowDown":
+          if (visible.length === 0) return false;
+          setCursor((c) => (c + 1) % visible.length);
+          return true;
+        case "ArrowUp":
+          if (visible.length === 0) return false;
+          setCursor((c) => (c - 1 + visible.length) % visible.length);
+          return true;
+        case "Enter":
+        case "Tab": {
+          if (visible.length === 0) return false;
+          const idx = Math.min(cursorRef.current, visible.length - 1);
+          pickItem(visible[idx]);
+          return true;
+        }
+        case "Escape":
+          setActive(null);
+          return true;
+        default:
+          return false;
+      }
+    });
+  }, [adapter, items, pickItem]);
+  if (!active || !anchorRect || items.length === 0) return null;
+  const cfg = triggers[active.char];
+  if (!cfg) return null;
+  const popStyle = computePopoverStyle(anchorRect, placement);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listbox",
+      "aria-label": cfg.label ?? `Pick a ${active.char === "/" ? "command" : "mention"}`,
+      className: [
+        "fixed z-50 w-72 overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style: { ...popStyle, ...style },
+      children: [
+        (cfg.label || active.query) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-zinc-100 bg-zinc-50 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950", children: [
+          /* @__PURE__ */ jsx("span", { children: cfg.label ?? labelForChar(active.char) }),
+          active.query && /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] normal-case tracking-normal text-zinc-400", children: [
+            active.char,
+            active.query
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "max-h-60 overflow-y-auto", children: items.map((item, i) => {
+          const renderer = cfg.render ?? ((it) => /* @__PURE__ */ jsx("span", { children: defaultKeyOf(it) }));
+          const active2 = i === cursor;
+          const key = (cfg.keyOf ?? defaultKeyOf)(item);
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "option",
+              "aria-selected": active2,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                pickItem(item);
+              },
+              onMouseEnter: () => setCursor(i),
+              className: [
+                "cursor-pointer px-2 py-1.5 text-[12px]",
+                active2 ? "bg-violet-100 dark:bg-violet-900/30" : "hover:bg-zinc-50 dark:hover:bg-zinc-800"
+              ].join(" "),
+              children: renderer(item, active2)
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+}
+function labelForChar(ch) {
+  if (ch === "/") return "Commands";
+  if (ch === "@") return "Mentions";
+  if (ch === "#") return "Tags";
+  if (ch === ":") return "Emoji";
+  return `Trigger ${ch}`;
+}
+function computePopoverStyle(anchor, placement) {
+  const offset = 4;
+  switch (placement) {
+    case "bottom-right":
+      return { top: anchor.bottom + offset, right: window.innerWidth - anchor.right };
+    case "top-left":
+      return { bottom: window.innerHeight - anchor.top + offset, left: anchor.left };
+    case "top-right":
+      return { bottom: window.innerHeight - anchor.top + offset, right: window.innerWidth - anchor.right };
+    case "bottom-left":
+    default:
+      return { top: anchor.bottom + offset, left: anchor.left };
+  }
+}
+
+// src/components/InputTag/adapters.ts
+function nativeValueSetter(el) {
+  const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const desc = Object.getOwnPropertyDescriptor(proto, "value");
+  if (!desc?.set) return null;
+  return desc.set.bind(el);
+}
+function replaceInValueElement(el, start, end, replacement) {
+  const current = el.value;
+  const next = current.slice(0, start) + replacement + current.slice(end);
+  const setter = nativeValueSetter(el);
+  if (setter) {
+    setter(next);
+  } else {
+    el.value = next;
+  }
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  const caret = start + replacement.length;
+  el.setSelectionRange(caret, caret);
+  el.focus();
+}
+function valueElementAdapter(ref) {
+  return {
+    subscribe(fn) {
+      const handler = () => {
+        const el2 = ref.current;
+        if (!el2) return;
+        fn({
+          text: el2.value,
+          caretIndex: el2.selectionStart ?? el2.value.length
+        });
+      };
+      const el = ref.current;
+      if (el) {
+        el.addEventListener("input", handler);
+        el.addEventListener("click", handler);
+        el.addEventListener("keyup", handler);
+        el.addEventListener("focus", handler);
+      }
+      return () => {
+        const el2 = ref.current;
+        if (el2) {
+          el2.removeEventListener("input", handler);
+          el2.removeEventListener("click", handler);
+          el2.removeEventListener("keyup", handler);
+          el2.removeEventListener("focus", handler);
+        }
+      };
+    },
+    replaceRange(start, end, replacement) {
+      const el = ref.current;
+      if (!el) return;
+      replaceInValueElement(el, start, end, replacement);
+    },
+    getAnchorRect() {
+      const el = ref.current;
+      return el ? el.getBoundingClientRect() : null;
+    },
+    onKey(handler) {
+      const fn = (e) => {
+        if (handler(e)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const el = ref.current;
+      if (el) el.addEventListener("keydown", fn);
+      return () => {
+        const el2 = ref.current;
+        if (el2) el2.removeEventListener("keydown", fn);
+      };
+    }
+  };
+}
+function textareaAdapter(ref) {
+  return valueElementAdapter(ref);
+}
+function inputAdapter(ref) {
+  return valueElementAdapter(ref);
+}
+function contentEditableAdapter(ref) {
+  function caretIndex(el) {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return 0;
+    const range2 = sel.getRangeAt(0).cloneRange();
+    range2.selectNodeContents(el);
+    range2.setEnd(sel.focusNode, sel.focusOffset);
+    return range2.toString().length;
+  }
+  function setCaret(el, index) {
+    const sel = window.getSelection();
+    if (!sel) return;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let remaining = index;
+    let node = walker.nextNode();
+    while (node) {
+      const len = (node.textContent ?? "").length;
+      if (remaining <= len) {
+        const range3 = document.createRange();
+        range3.setStart(node, remaining);
+        range3.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range3);
+        return;
+      }
+      remaining -= len;
+      node = walker.nextNode();
+    }
+    const range2 = document.createRange();
+    range2.selectNodeContents(el);
+    range2.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range2);
+  }
+  return {
+    subscribe(fn) {
+      const handler = () => {
+        const el2 = ref.current;
+        if (!el2) return;
+        fn({ text: el2.textContent ?? "", caretIndex: caretIndex(el2) });
+      };
+      const el = ref.current;
+      if (el) {
+        el.addEventListener("input", handler);
+        el.addEventListener("click", handler);
+        el.addEventListener("keyup", handler);
+        el.addEventListener("focus", handler);
+      }
+      return () => {
+        const el2 = ref.current;
+        if (el2) {
+          el2.removeEventListener("input", handler);
+          el2.removeEventListener("click", handler);
+          el2.removeEventListener("keyup", handler);
+          el2.removeEventListener("focus", handler);
+        }
+      };
+    },
+    replaceRange(start, end, replacement) {
+      const el = ref.current;
+      if (!el) return;
+      const current = el.textContent ?? "";
+      const next = current.slice(0, start) + replacement + current.slice(end);
+      el.textContent = next;
+      setCaret(el, start + replacement.length);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.focus();
+    },
+    getAnchorRect() {
+      const el = ref.current;
+      return el ? el.getBoundingClientRect() : null;
+    },
+    onKey(handler) {
+      const fn = (e) => {
+        if (handler(e)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const el = ref.current;
+      if (el) el.addEventListener("keydown", fn);
+      return () => {
+        const el2 = ref.current;
+        if (el2) el2.removeEventListener("keydown", fn);
+      };
+    }
+  };
+}
+function controlledAdapter(opts) {
+  let listener = null;
+  let keyHandler = null;
+  const installKey = () => {
+    const el = opts.anchorRef.current;
+    if (!el || !keyHandler) return () => {
+    };
+    const fn = (e) => {
+      if (keyHandler && keyHandler(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    el.addEventListener("keydown", fn);
+    return () => el.removeEventListener("keydown", fn);
+  };
+  return {
+    notify(state) {
+      listener?.(state);
+    },
+    subscribe(fn) {
+      listener = fn;
+      return () => {
+        if (listener === fn) listener = null;
+      };
+    },
+    replaceRange(start, end, replacement) {
+      opts.onReplaceRange(start, end, replacement);
+    },
+    getAnchorRect() {
+      const el = opts.anchorRef.current;
+      return el ? el.getBoundingClientRect() : null;
+    },
+    onKey(handler) {
+      keyHandler = handler;
+      const uninstall = installKey();
+      return () => {
+        if (keyHandler === handler) keyHandler = null;
+        uninstall();
+      };
+    }
+  };
+}
 function MagicWand({
   value,
   onValueChange,
@@ -12604,6 +13091,6 @@ function caretRect(ta, start, end) {
   return { x, y };
 }
 
-export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, InputTag, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map