4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T5567,// Mention Input from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { Spinner } from '@/registry/hirael/bases/radix/ui/spinner'; import { composeRefs } from '@/registry/hirael/bases/radix/components/compose-refs'; export interface MentionItem { id: string; /** Inserted after the trigger; keep it free of spaces so the token stays one mention. */ label: string; description?: string; } interface ActiveMention { start: number; trigger: string; query: string; } const MIRROR_PROPS = [ 'box-sizing', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'font-family', 'font-size', 'font-weight', 'font-style', 'letter-spacing', 'line-height', 'text-transform', 'word-spacing', 'text-indent', 'tab-size', 'direction', ] as const; const triggerCharClass = (triggers: string[]) => { return triggers.map((ch) => ch.replace(/[\\\]^-]/g, '\\$&')).join(''); }; export const getMentions = (value: string, trigger: string | string[] = '@'): string[] => { const triggers = Array.isArray(trigger) ? trigger : [trigger]; const re = new RegExp(`(?:^|\\s)[${triggerCharClass(triggers)}]([\\p{L}\\p{N}_.\\-]+)`, 'gu'); const out: string[] = []; let m: RegExpExecArray | null; while ((m = re.exec(value)) !== null) out.push(m[1]); return out; }; const getActiveMention = (text: string, caret: number, triggers: string[]): ActiveMention | null => { for (let i = caret - 1; i >= 0; i--) { const ch = text[i]; if (/\s/.test(ch)) return null; if (triggers.includes(ch)) { if (i === 0 || /\s/.test(text[i - 1])) { return { start: i, trigger: ch, query: text.slice(i + 1, caret) }; } return null; } } return null; }; const measureCaret = (textarea: HTMLTextAreaElement, index: number) => { const style = window.getComputedStyle(textarea); const mirror = document.createElement('div'); for (const prop of MIRROR_PROPS) { mirror.style.setProperty(prop, style.getPropertyValue(prop)); } mirror.style.position = 'absolute'; mirror.style.top = '0'; mirror.style.left = '0'; mirror.style.visibility = 'hidden'; mirror.style.whiteSpace = 'pre-wrap'; mirror.style.overflowWrap = 'break-word'; mirror.style.width = `${textarea.offsetWidth}px`; mirror.textContent = textarea.value.slice(0, index); const marker = document.createElement('span'); marker.textContent = ''; mirror.appendChild(marker); (textarea.parentElement ?? document.body).appendChild(mirror); const rect = { top: marker.offsetTop, left: marker.offsetLeft, height: parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2, }; mirror.remove(); return rect; }; interface Segment { text: string; mention: boolean; } const segmentValue = (value: string, triggers: string[], known: Set): Segment[] => { const re = new RegExp(`(^|\\s)([${triggerCharClass(triggers)}][\\p{L}\\p{N}_.\\-]+)`, 'gu'); const segments: Segment[] = []; let last = 0; let m: RegExpExecArray | null; while ((m = re.exec(value)) !== null) { const start = m.index + m[1].length; const token = m[2]; if (!known.has(token.slice(1).toLowerCase())) continue; if (start > last) segments.push({ text: value.slice(last, start), mention: false }); segments.push({ text: token, mention: true }); last = start + token.length; } if (last < value.length) segments.push({ text: value.slice(last), mention: false }); return segments; }; const metrics = 'min-h-16 w-full rounded-sm border px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap break-words'; interface MentionPosition { top: number; left: number; } interface MentionInputCtx { id: string; listboxId: string; open: boolean; loading: boolean; filteredItems: MentionItem[]; activeIndex: number; activeTrigger: string | undefined; pos: MentionPosition; value: string; segments: Segment[]; disabled?: boolean; placeholder?: string; name?: string; emptyMessage: string; loadingMessage: string; listLabel: string; popupRef: React.RefObject; textareaRef: React.RefObject; backdropRef: React.RefObject; select: (item: MentionItem) => void; setActiveIndex: (index: number) => void; textareaProps: Pick, 'onChange' | 'onSelect' | 'onScroll' | 'onKeyDown' | 'onBlur'>; } const MentionInputContext = React.createContext(null); export const useMentionInput = () => { const ctx = React.useContext(MentionInputContext); if (!ctx) { throw new Error('MentionInput compound parts must be used inside '); } return ctx; }; export interface MentionInputProps extends Omit, 'defaultValue' | 'onChange'> { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; items?: MentionItem[]; onSearch?: (query: string, trigger: string) => Promise; trigger?: string | string[]; placeholder?: string; disabled?: boolean; maxRows?: number; onMention?: (item: MentionItem) => void; emptyMessage?: string; loadingMessage?: string; listLabel?: string; name?: string; } const NO_ITEMS: MentionItem[] = []; const MentionInput = ({ value: valueProp, defaultValue, onValueChange, items = NO_ITEMS, onSearch, trigger = '@', placeholder, disabled, maxRows, onMention, emptyMessage = 'No results.', loadingMessage = 'Searching…', listLabel = 'Mention suggestions', name, className, children, ref, ...props }: MentionInputProps) => { const id = React.useId(); const listboxId = `${id}-listbox`; const triggers = React.useMemo(() => (Array.isArray(trigger) ? trigger : [trigger]), [trigger]); const [internalValue, setInternalValue] = React.useState(defaultValue ?? ''); const value = valueProp ?? internalValue; const setValue = React.useCallback( (next: string) => { if (valueProp === undefined) setInternalValue(next); onValueChange?.(next); }, [valueProp, onValueChange], ); const [mention, setMention] = React.useState(null); const [activeIndex, setActiveIndex] = React.useState(0); const [asyncItems, setAsyncItems] = React.useState([]); const [loading, setLoading] = React.useState(false); const [selectedLabels, setSelectedLabels] = React.useState([]); const [pos, setPos] = React.useState({ top: 0, left: 0 }); const wrapperRef = React.useRef(null); const composedWrapperRef = React.useMemo(() => composeRefs(wrapperRef, ref), [ref]); const textareaRef = React.useRef(null); const backdropRef = React.useRef(null); const popupRef = React.useRef(null); const dismissedRef = React.useRef(false); const focusFrameRef = React.useRef(null); React.useEffect( () => () => { if (focusFrameRef.current !== null) cancelAnimationFrame(focusFrameRef.current); }, [], ); const open = mention !== null && !disabled; const filtered = React.useMemo(() => { if (onSearch) return asyncItems; if (!mention) return []; const q = mention.query.toLowerCase(); return items.filter((it) => it.label.toLowerCase().includes(q) || it.description?.toLowerCase().includes(q)); }, [onSearch, asyncItems, items, mention]); const active = Math.min(activeIndex, Math.max(filtered.length - 1, 0)); const known = React.useMemo(() => { const set = new Set(); for (const it of items) set.add(it.label.toLowerCase()); for (const label of selectedLabels) set.add(label.toLowerCase()); return set; }, [items, selectedLabels]); const segments = React.useMemo(() => segmentValue(value, triggers, known), [value, triggers, known]); const activeQuery = mention?.query; const activeTrigger = mention?.trigger; const onSearchRef = React.useRef(onSearch); React.useEffect(() => { onSearchRef.current = onSearch; }); const queryKey = `${activeTrigger ?? ''}\u0000${activeQuery ?? ''}`; const [lastQueryKey, setLastQueryKey] = React.useState(queryKey); if (lastQueryKey !== queryKey) { setLastQueryKey(queryKey); setActiveIndex(0); } React.useEffect(() => { if (!onSearchRef.current || activeQuery === undefined || activeTrigger === undefined) { return; } let cancelled = false; setLoading(true); const t = setTimeout(() => { onSearchRef.current!(activeQuery, activeTrigger) .catch(() => []) .then((res) => { if (cancelled) return; setAsyncItems(res); setLoading(false); }); }, 200); return () => { cancelled = true; clearTimeout(t); }; }, [activeQuery, activeTrigger]); React.useLayoutEffect(() => { const ta = textareaRef.current; if (!ta) return; ta.style.height = 'auto'; const style = window.getComputedStyle(ta); const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2; const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); const max = maxRows ? lineHeight * maxRows + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + borders : Infinity; ta.style.height = `${Math.min(ta.scrollHeight + borders, max)}px`; ta.style.overflowY = ta.scrollHeight + borders > max ? 'auto' : 'hidden'; const backdrop = backdropRef.current; if (backdrop) { backdrop.scrollTop = ta.scrollTop; backdrop.scrollLeft = ta.scrollLeft; } }, [value, maxRows]); React.useLayoutEffect(() => { if (!mention) return; const ta = textareaRef.current; const wrap = wrapperRef.current; const pop = popupRef.current; if (!ta || !wrap || !pop) return; const caret = measureCaret(ta, mention.start); const caretTop = caret.top - ta.scrollTop; const caretLeft = caret.left - ta.scrollLeft; const popRect = pop.getBoundingClientRect(); const wrapRect = wrap.getBoundingClientRect(); let top = caretTop + caret.height + 4; const spaceBelow = window.innerHeight - (wrapRect.top + top); if (popRect.height > spaceBelow && wrapRect.top + caretTop - popRect.height - 4 > 0) { top = caretTop - popRect.height - 4; } setPos({ top, left: Math.max(0, Math.min(caretLeft, wrap.clientWidth - popRect.width)) }); }, [mention, filtered.length, loading]); React.useEffect(() => { if (!open) return; const close = () => setMention(null); window.addEventListener('resize', close); return () => window.removeEventListener('resize', close); }, [open]); React.useEffect(() => { if (!open) return; const el = document.getElementById(`${id}-option-${active}`); el?.scrollIntoView({ block: 'nearest' }); }, [open, active, id]); const [lastText, setLastText] = React.useState(value); if (value !== lastText) { setLastText(value); setSelectedLabels((prev) => { if (prev.length === 0) return prev; const present = new Set(getMentions(value, triggers).map((m) => m.toLowerCase())); const next = prev.filter((label) => present.has(label.toLowerCase())); return next.length === prev.length ? prev : next; }); } const detect = React.useCallback( (text: string, caret: number) => { const next = dismissedRef.current ? null : getActiveMention(text, caret, triggers); setMention((prev) => { if (prev === null && next === null) return prev; if (prev && next && prev.start === next.start && prev.trigger === next.trigger && prev.query === next.query) { return prev; } return next; }); }, [triggers], ); const select = React.useCallback( (item: MentionItem) => { const ta = textareaRef.current; if (!ta || !mention) return; const caret = ta.selectionStart; const inserted = `${mention.trigger}${item.label} `; const next = value.slice(0, mention.start) + inserted + value.slice(caret); setValue(next); setSelectedLabels((prev) => (prev.includes(item.label) ? prev : [...prev, item.label])); onMention?.(item); setMention(null); const position = mention.start + inserted.length; if (focusFrameRef.current !== null) cancelAnimationFrame(focusFrameRef.current); focusFrameRef.current = requestAnimationFrame(() => { focusFrameRef.current = null; ta.focus(); ta.setSelectionRange(position, position); }); }, [mention, value, setValue, onMention], ); const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (!open) return; // Enter confirming an IME composition must not pick a suggestion. if (e.nativeEvent.isComposing || e.keyCode === 229) return; if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const n = filtered.length; setActiveIndex(n ? (active + (e.key === 'ArrowDown' ? 1 : -1) + n) % n : 0); } else if (e.key === 'Enter' || e.key === 'Tab') { const item = filtered[active]; if (item) { e.preventDefault(); select(item); } } else if (e.key === 'Escape') { e.preventDefault(); dismissedRef.current = true; setMention(null); } }, [open, filtered, active, select], ); const handleChange = React.useCallback( (e: React.ChangeEvent) => { dismissedRef.current = false; setValue(e.target.value); detect(e.target.value, e.target.selectionStart); }, [setValue, detect], ); const handleSelect = React.useCallback( (e: React.SyntheticEvent) => { detect(e.currentTarget.value, e.currentTarget.selectionStart); }, [detect], ); const handleScroll = React.useCallback( (e: React.UIEvent) => { const backdrop = backdropRef.current; if (backdrop) { backdrop.scrollTop = e.currentTarget.scrollTop; backdrop.scrollLeft = e.currentTarget.scrollLeft; } if (open) setMention(null); }, [open], ); const handleBlur = React.useCallback(() => setMention(null), []); const textareaProps = React.useMemo( () => ({ onChange: handleChange, onSelect: handleSelect, onScroll: handleScroll, onKeyDown: handleKeyDown, onBlur: handleBlur, }), [handleChange, handleSelect, handleScroll, handleKeyDown, handleBlur], ); const ctx = React.useMemo( () => ({ id, listboxId, open, loading, filteredItems: filtered, activeIndex: active, activeTrigger, pos, value, segments, disabled, placeholder, name, emptyMessage, loadingMessage, listLabel, popupRef, textareaRef, backdropRef, select, setActiveIndex, textareaProps, }), [ id, listboxId, open, loading, filtered, active, activeTrigger, pos, value, segments, disabled, placeholder, name, emptyMessage, loadingMessage, listLabel, select, textareaProps, ], ); return (

{children ?? ( <> )}

); }; type MentionInputTextareaProps = Omit< React.ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'name' | 'placeholder' | 'disabled' >; /** The consumer's handler runs first; the part's own is skipped once the event is default-prevented. */ const chainHandlers = (theirs: ((event: E) => void) | undefined, ours: ((event: E) => void) | undefined) => (event: E) => { theirs?.(event); if (!event.defaultPrevented) ours?.(event); }; const MentionInputTextarea = ({ className, ref, onChange, onSelect, onScroll, onKeyDown, onBlur, ...props }: MentionInputTextareaProps) => { const { id, listboxId, open, filteredItems, activeIndex, value, segments, disabled, placeholder, name, backdropRef, textareaRef, textareaProps, } = useMentionInput(); const composedRef = React.useMemo(() => composeRefs(textareaRef, ref), [textareaRef, ref]); return ( <>

{segments.map((seg, i) => ( {seg.text} ))} {''}

</>
  );
};

const MentionInputList = ({ className, style, children, ref, ...props }: React.ComponentProps<'div'>) => {
  const ctx = useMentionInput();
  const composedRef = React.useMemo(() => composeRefs(ctx.popupRef, ref), [ctx.popupRef, ref]);

if (!ctx.open) return null;

return (
    <div
      ref={composedRef}
      id={ctx.listboxId}
      role="listbox"
      aria-label={ctx.listLabel}
      data-slot="mention-input-list"
      style={{ ...style, top: ctx.pos.top, left: ctx.pos.left }}
      className={cn(
        'absolute z-50 max-h-60 w-64 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
        className,
      )}
      {...props}
    >
      {children ??
        (ctx.loading ? (
          <div
            data-slot="mention-input-loading"
            className="flex items-center gap-2 px-2 py-2 text-xs text-muted-foreground"
          >
            <Spinner />
            {ctx.loadingMessage}
          </div>
        ) : ctx.filteredItems.length === 0 ? (
          <div data-slot="mention-input-empty" className="px-2 py-2 text-xs text-muted-foreground">
            {ctx.emptyMessage}
          </div>
        ) : (
          ctx.filteredItems.map((item, i) => <MentionInputItem key={item.id} item={item} index={i} />)
        ))}
    </div>
  );
};

interface MentionInputItemProps extends Omit<React.ComponentProps<'div'>, 'children'> {
  item: MentionItem;
  index: number;
  children?: React.ReactNode;
}

const MentionInputItem = ({
  item,
  index,
  className,
  children,
  onMouseDown,
  onClick,
  onMouseMove,
  ...props
}: MentionInputItemProps) => {
  const ctx = useMentionInput();
  const active = index === ctx.activeIndex;

return (
    <div
      id={`${ctx.id}-option-${index}`}
      role="option"
      aria-selected={active}
      data-slot="mention-input-item"
      data-active={active || undefined}
      onMouseDown={(e) => {
        onMouseDown?.(e);
        if (e.defaultPrevented) return;
        e.preventDefault();
      }}
      onClick={(e) => {
        onClick?.(e);
        if (e.defaultPrevented) return;
        ctx.select(item);
      }}
      onMouseMove={(e) => {
        onMouseMove?.(e);
        if (e.defaultPrevented) return;
        ctx.setActiveIndex(index);
      }}
      className={cn(
        'flex cursor-default flex-col gap-0.5 rounded-sm px-2 py-1.5',
        active && 'bg-accent text-accent-foreground',
        className,
      )}
      {...props}
    >
      {children ?? (
        <>
          <bdi className="text-sm leading-none">
            {ctx.activeTrigger}
            {item.label}
          </bdi>
          {item.description && <span className="truncate text-xs text-muted-foreground">{item.description}</span>}
        </>
      )}
    </div>
  );
};

export { MentionInput, MentionInputTextarea, MentionInputList, MentionInputItem };
4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@hirael","registryDependencies":["https://hirael.com/r/compose-refs.json","https://hirael.com/r/spinner.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/hirael/bases/radix/components/mention-input.tsx","content":"$51","type":"registry:component","target":"components/mention-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>