51: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"] 52: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"] 53:T1684,"use client"; import { useId, useState } from "react"; import { Label } from "./label"; import { cn } from "./lib/cn"; import "./mention-input.css"; export type MentionOption = { id: string; label: string; kind: "person" | "channel"; }; function tokenFor(option: MentionOption) { return `${option.kind === "channel" ? "#" : "@"}${option.label}`; } function queryAt(value: string, caret: number) { const match = value.slice(0, caret).match(/(^|\s)([@#])([^@#\n]*)$/); if (!match) return null; return { kind: match[2] === "#" ? "channel" as const : "person" as const, text: match[3] ?? "", start: caret - (match[3]?.length ?? 0) - 1 }; } export function MentionInput({ label, value, defaultValue = "", options, onValueChange, placeholder = "Write a note, @someone or #channel", disabled, name, id, className, }: { label: string; value?: string; defaultValue?: string; options: readonly MentionOption[]; onValueChange?: (value: string, mentions: MentionOption[]) => void; placeholder?: string; disabled?: boolean; name?: string; id?: string; className?: string; }) { const generated = useId(); const fieldId = id ?? generated; const listId = `${fieldId}-mentions`; const [local, setLocal] = useState(defaultValue); const [caret, setCaret] = useState(0); const [active, setActive] = useState(0); const text = value ?? local; const query = queryAt(text, caret); const matches = query ? options.filter((option) => option.kind === query.kind && option.label.toLowerCase().includes(query.text.trim().toLowerCase())).slice(0, 6) : []; const open = matches.length > 0; function mentionsIn(next: string) { return options.filter((option) => next.includes(tokenFor(option))); } function commit(next: string, nextCaret: number) { if (value == null) setLocal(next); setCaret(nextCaret); onValueChange?.(next, mentionsIn(next)); } function insert(option: MentionOption) { if (!query) return; const token = `${tokenFor(option)} `; const next = `${text.slice(0, query.start)}${token}${text.slice(caret)}`; const nextCaret = query.start + token.length; commit(next, nextCaret); setActive(0); } return (

{label}

setCaret(event.currentTarget.selectionStart)}
          onChange={(event) => commit(event.currentTarget.value, event.currentTarget.selectionStart)}
          onKeyDown={(event) => {
            const point = event.currentTarget.selectionStart;
            if (open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
              event.preventDefault();
              setActive((index) => (event.key === "ArrowDown" ? Math.min(matches.length - 1, index + 1) : Math.max(0, index - 1)));
              return;
            }
            if (open && event.key === "Enter" && matches[active]) {
              event.preventDefault();
              insert(matches[active]);
              return;
            }
            if (open && event.key === "Escape") {
              event.preventDefault();
              setCaret(point);
              commit(`${text.slice(0, point)} ${text.slice(point)}`, point + 1);
              return;
            }
            if (event.key === "Backspace") {
              const hit = options
                .map((option) => ({ option, token: tokenFor(option) }))
                .filter((item) => text.slice(0, point).endsWith(item.token))
                .sort((a, b) => b.token.length - a.token.length)[0];
              if (hit) {
                event.preventDefault();
                const next = `${text.slice(0, point - hit.token.length)}${text.slice(point)}`;
                commit(next, point - hit.token.length);
              }
            }
          }}
        />
        {open && (
          <div id={listId} role="listbox" data-slot="mention-menu" aria-label="Mentions" className="absolute top-[calc(100%+0.25rem)] left-0 z-20 w-full p-1">
            {matches.map((option, index) => (
              <button
                key={option.id}
                id={`${listId}-${option.id}`}
                type="button"
                role="option"
                aria-selected={index === active}
                data-highlighted={index === active || undefined}
                className="flex h-[var(--control-height)] w-full items-center justify-between rounded-surface px-2 text-left text-sm font-medium outline-none data-[highlighted]:bg-muted"
                onMouseDown={(event) => event.preventDefault()}
                onMouseEnter={() => setActive(index)}
                onClick={() => insert(option)}
              >
                <span>{tokenFor(option)}</span>
                <span className="text-xs font-normal text-muted-foreground">{option.kind === "channel" ? "Channel" : "Person"}</span>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"inline-block max-w-full text-sm leading-5 font-medium [overflow-wrap:anywhere]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/mention-input.tsx","content":"$53","type":"registry:ui","target":"components/ui/mention-input.tsx"},{"path":"ui/mention-input.css","content":"/* mention-input.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"mention-menu\"] {\n    border: 1px solid var(--border);\n    border-radius: var(--radius-overlay);\n  }\n}\n\n[data-slot=\"mention-menu\"] {\n  background-color: var(--elevated-glass);\n  border-color: color-mix(in srgb, var(--edge-light) 45%, var(--border));\n  backdrop-filter: blur(var(--blur-overlay));\n  box-shadow:\n    var(--shadow-overlay),\n    0 0 40px var(--edge-glow),\n    inset 0 1px 0 var(--edge-light);\n}\n","type":"registry:file","target":"components/ui/mention-input.css"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>