61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T2f3a,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import type { KeyboardEvent, MouseEvent } from "react"; import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react"; import { X as Xmark } from "lucide-react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./tag-input.module.css"; export interface TagInputProps { label: string; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; placeholder?: string; description?: string; id?: string; } /** Changed words rise in and unblur while unchanged words hold still. Assistive tech reads the plain copy. */ function MotionText({ text }: { text: string }) { const reduced = useReducedMotion(); const words = text.split(" "); return <>{text}; } /** Helper copy: the row opens its height on a spring, then the words settle in. */ function FieldMessage({ id, text, className }: { id?: string; text?: string; className?: string }) { return {text ? : null}; } /** The row tracks the measured copy, so a longer message that wraps opens its next line instead of snapping. */ function MessageRow({ id, text, className }: { id?: string; text: string; className?: string }) { const reduced = useReducedMotion(); const copyRef = useRef(null); const [height, setHeight] = useState("auto"); useEffect(() => { const node = copyRef.current; if (!node || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(([entry]) => setHeight(entry?.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight)); observer.observe(node); return () => observer.disconnect(); }, []); // Reduced motion mounts the row at full height: a zero-duration open would still paint one collapsed frame. return ; } /** * Tags keep the field still: a new tag blurs in where its text was typed while the caret glides aside, a removed tag * leaves its slot and the rest glide in, and the shell follows wrapped rows on a spring. Backspace or the arrow keys * pick a tag first, a ring glides to it, and the next Backspace removes it. */ export function TagInput({ label, value, defaultValue = [], onValueChange, placeholder = "Add a tag", description, id }: TagInputProps) { const generatedId = useId(); const inputId = id ?? generatedId; const hintId = description ? `${inputId}-description` : undefined; const [internal, setInternal] = useState(defaultValue); const [draft, setDraft] = useState(""); const [picked, setPicked] = useState(null); const [notice, setNotice] = useState(""); const reduced = useReducedMotion(); const [scope, animate] = useAnimate(); const contentRef = useRef(null); const inputRef = useRef(null); const ringRef = useRef(null); const ringAt = useRef(""); // The shell follows its wrapped rows on a spring instead of jumping when a tag starts or leaves a line. const [height, setHeight] = useState("auto"); const tags = value ?? internal; const active = picked !== null && tags.includes(picked) ? picked : null; useEffect(() => { const node = contentRef.current; if (!node || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(() => setHeight(node.offsetHeight)); observer.observe(node); return () => observer.disconnect(); }, []); // The ring measures the picked tag's resting box, glides between picks, and fades in place when the pick clears. useLayoutEffect(() => { const ring = ringRef.current; const node = active === null ? null : contentRef.current?.querySelector(`[data-tag="${CSS.escape(active)}"]`); if (!ring) return; // It leaves on the same curve as a removed tag, so a picked tag and its ring fade out as one piece. if (!node) { if (ringAt.current) animate(ring, reduced ? { opacity: 0 } : { opacity: 0, scale: .9 }, { duration: reduced ? 0 : motionTokens.duration.instant, ease: [...motionTokens.ease.standard] }); ringAt.current = ""; return; } const box = { x: node.offsetLeft, y: node.offsetTop, width: node.offsetWidth, height: node.offsetHeight }; const at = Object.values(box).join(" "); if (at === ringAt.current) return; // A ring that is still fading from the last pick glides on to the next one, so quick Backspaces read as one motion. if (!reduced && (ringAt.current || Number(getComputedStyle(ring).opacity) > .02)) animate(ring, { ...box, opacity: 1, scale: 1 }, { ...motionTokens.spring.morph, opacity: { duration: motionTokens.duration.fast } }); else animate(ring, { ...box, opacity: [0, 1], scale: [reduced ? 1 : .9, 1] }, reduced ? { duration: 0, opacity: { duration: motionTokens.duration.instant } } : { duration: 0, opacity: { duration: motionTokens.duration.fast }, scale: motionTokens.spring.snappy }); ringAt.current = at; }); function say(message: string) { setNotice(previous => previous === message ? `${message}\u00a0` : message); } function update(next: string[]) { if (value === undefined) setInternal(next); onValueChange?.(next); } function pick(tag: string | null) { setPicked(tag); if (tag !== null) say(`${tag} selected. Press Backspace to remove it.`); } function add() { const tag = draft.trim(); if (!tag) return; const existing = tags.find(item => item.toLowerCase() === tag.toLowerCase()); // A duplicate pulses the tag that already exists, so the ignored Enter still gets an answer. if (existing) { const node = scope.current?.querySelector(`[data-tag="${CSS.escape(existing)}"]`); if (node && !reduced) animate(node, { scale: [1, 1.06, 1] }, { duration: motionTokens.duration.standard + motionTokens.duration.instant, ease: [...motionTokens.ease.inOut] }); say(`${existing} is already added`); return; } update([...tags, tag]); setDraft(""); setPicked(null); say(`Added ${tag}`); } function remove(tag: string) { update(tags.filter(item => item !== tag)); setPicked(null); say(`Removed ${tag}`); inputRef.current?.focus(); } function onKeyDown(event: KeyboardEvent) { const { key, currentTarget: input } = event; const atStart = input.selectionStart === 0 && input.selectionEnd === 0; const index = active === null ? tags.length : tags.indexOf(active); let handled = true; if (key === "Enter" || key === ",") add(); else if ((key === "Backspace" || key === "Delete") && active !== null) remove(active); else if (key === "Backspace" && atStart && tags.length) pick(tags[tags.length - 1]!); else if (key === "ArrowLeft" && (atStart || active !== null) && index > 0) pick(tags[index - 1]!); else if (key === "ArrowRight" && active !== null) pick(tags[index + 1] ?? null); else if (key === "Escape" && active !== null) pick(null); else handled = false; if (handled) event.preventDefault(); } // A click on a tag picks it without taking focus from the field. The remove button keeps its own press. function onTagPointer(event: MouseEvent, tag?: string) { if ((event.target as HTMLElement).closest("button")) return; if (!tag) { event.preventDefault(); return; } pick(active === tag ? null : tag); inputRef.current?.focus(); } const move = reduced ? { duration: 0 } : motionTokens.spring.morph; const glide = reduced ? { duration: 0 } : motionTokens.spring.smooth; return

{label}

{ if (event.target === event.currentTarget) inputRef.current?.focus(); }}> {!draft && !tags.length && } {tags.map(tag => onTagPointer(event)} onClick={event => onTagPointer(event, tag)} initial={reduced ? { opacity: 0 } : { opacity: 0, scale: .9, filter: `blur(${motionTokens.blur.soft}px)` }} animate={{ opacity: 1, scale: 1, filter: "blur(0px)", transitionEnd: { filter: "none" } }} exit={reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .9, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }} transition={reduced ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.morph, layout: move, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, filter: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }}>{tag})} { setDraft(event.currentTarget.value); setPicked(null); }} onKeyDown={onKeyDown} onBlur={() => { add(); setPicked(null); }} placeholder={tags.length ? "" : placeholder} aria-describedby={hintId} />

{notice}

; } 64:T12aa,/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */ /* The field fills its column, so a new tag never widens it or re-centers it inside a centered layout. */ .field { display: grid; width: 100%; min-width: 0; } .field label { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 500; } /* The shell animates its height to .content, which carries the wrapping rows. The ring contracts onto the border on focus. */ .control { box-sizing: content-box; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: 0 0 0 6px transparent; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); } @media (hover: hover) and (pointer: fine) { .control:hover:not(:focus-within) { border-color: var(--border-strong); } } .control:focus-within { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--focus-ring); outline: 2px solid transparent; outline-offset: 2px; } /* Equal 7px padding makes one row fill the minimum height exactly, so existing tags hold their line when a second row opens. */ .content { position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px; min-height: calc(var(--control-height-md) - 2px); box-sizing: border-box; padding: 7px; cursor: text; } .tag { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 28px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 4px 0 9px; background: var(--surface-muted); color: var(--foreground); font-size: var(--text-sm); white-space: nowrap; cursor: default; } .tag button { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); } @media (hover: hover) and (pointer: fine) { .tag button:hover { background: var(--surface); color: var(--foreground); } } .tag button:focus-visible { background: var(--surface); color: var(--foreground); outline: none; box-shadow: inset 0 0 0 1.5px var(--focus-ring); } /* Quick press, spring release. */ .tag button:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); } .content input { flex: 1 1 100px; min-width: 80px; min-height: 28px; box-sizing: border-box; border: 0; padding: 0 5px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); } .content input:focus, .content input:focus-visible { outline: none; } .content input::placeholder { color: transparent; } /* The visible placeholder is drawn here so it can rise in when the last tag leaves. The native one stays for assistive tech. Inset matches the content and input padding. */ .placeholder { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; padding: 0 12px; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; pointer-events: none; } /* The pick ring rides above the pills and sizes itself to the picked tag, so it can glide between tags without scaling its border. */ .ring { position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent-subtle); opacity: 0; pointer-events: none; } /* A resting tag is not a stacking context (its filter ends at none), so its label and button sit above the ring while its fill stays below. */ .tagLabel, .tag button { position: relative; z-index: 2; } .tag[data-picked] button { color: var(--foreground); } /* The row's space is padding inside the clipped slot, so the height animates from a true zero. */ .messageSlot { display: block; overflow: hidden; } .hint { display: block; padding-top: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); } /* Words are measured against this box when they pop out to leave, so it must be the positioned parent. */ .words { position: relative; display: block; } .word { display: inline-block; white-space: pre; } .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .control, .tag button { transition: none; } .tag button:active { transform: none; } } 60:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/components/tag-input/tag-input.tsx","content":"$63","type":"registry:component","target":"@components/arc/tag-input/tag-input.tsx"},{"path":"registry/components/tag-input/tag-input.module.css","content":"$64","type":"registry:component","target":"@components/arc/tag-input/tag-input.module.css"}],"className":"h-[70svh] min-h-80"}]]}]