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:T14e4,/** * Spectrum UI — MetalPromptBar * * An AI prompt bar whose send button wears a live liquid-metal ring painted by * `metal-fx` (Jakub Antalík, MIT, https://metal.jakubantalik.com). The chips * beside it are passed to MetalFx as reflection targets, so in dark mode they * pick up a soft mirrored glint of the ring — the composer from the metal-fx * showcase, wired for React state: auto-growing textarea, Enter to send, * Shift+Enter for newlines, and a disabled send state while empty. * * Dependencies: metal-fx, lucide-react, @/lib/utils * * @example * ask(text)} /> */ 'use client'; import * as React from 'react'; import { MetalFx, type MetalFxPreset } from 'metal-fx'; import { ArrowUp, Paperclip } from 'lucide-react'; import { cn } from '@/lib/utils'; import { useSurfaceTheme, type SurfaceTheme } from '@/components/spectrumui/use-surface-theme'; export interface MetalPromptBarProps { /** Placeholder for the empty composer. Default "Build anything…" */ placeholder?: string; /** Pills shown bottom-left; each one reflects the metal ring in dark mode. Default ["Agent", "Auto"] */ chips?: string[]; /** Metal palette for the send ring. Default "chromatic" */ preset?: MetalFxPreset; /** "auto" follows a `.dark`/`.light` class on , then the OS. Default "auto" */ theme?: SurfaceTheme; /** Fires with the trimmed text on Enter or the send button; the field clears afterwards */ onSubmit?: (text: string) => void; /** Fires when a chip is clicked */ onChipClick?: (chip: string) => void; /** Max textarea rows before it scrolls. Default 6 */ maxRows?: number; className?: string; } export function MetalPromptBar({ placeholder = 'Build anything…', chips = ['Agent', 'Auto'], preset = 'chromatic', theme = 'auto', onSubmit, onChipClick, maxRows = 6, className, }: MetalPromptBarProps) { const resolved = useSurfaceTheme(theme); const [text, setText] = React.useState(''); const textareaRef = React.useRef(null); // Stable refs per chip so MetalFx can paint reflections onto them const chipRefs = React.useMemo( () => chips.map(() => React.createRef()), [chips], ); const canSend = text.trim().length > 0; const resize = (el: HTMLTextAreaElement) => { el.style.height = '0px'; const line = parseFloat(getComputedStyle(el).lineHeight) || 24; el.style.height = `${Math.min(el.scrollHeight, line * maxRows)}px`; }; const submit = () => { if (!canSend) return; onSubmit?.(text.trim()); setText(''); const el = textareaRef.current; if (el) { el.value = ''; resize(el); } }; return (

{
          setText(event.target.value);
          resize(event.target);
        }}
        onKeyDown={(event) => {
          if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
            event.preventDefault();
            submit();
          }
        }}
        className="block w-full resize-none bg-transparent px-1 pt-1 text-[15px] leading-6 text-neutral-900 outline-hidden placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-500"
      />
      <div className="mt-2 flex items-center gap-2">
        <button
          type="button"
          aria-label="Attach"
          className="flex size-9 items-center justify-center rounded-full border border-black/8 text-neutral-600 transition-colors hover:bg-black/4 dark:border-white/10 dark:text-neutral-300 dark:hover:bg-white/6"
        >
          <Paperclip className="size-4" />
        </button>
        {chips.map((chip, index) => (
          <button
            key={chip}
            ref={chipRefs[index]}
            type="button"
            onClick={() => onChipClick?.(chip)}
            className="h-9 rounded-full border border-black/8 px-3.5 text-[13px] font-medium text-neutral-700 transition-colors hover:bg-black/4 dark:border-white/10 dark:text-neutral-200 dark:hover:bg-white/6"
          >
            {chip}
          </button>
        ))}
        <span className="ms-auto hidden text-xs text-neutral-400 sm:block dark:text-neutral-500">
          Enter to send
        </span>
        <MetalFx
          variant="circle"
          preset={preset}
          theme={resolved}
          reflectionTargets={chipRefs}
          className={cn('inline-flex', !canSend && 'opacity-70')}
        >
          <button
            type="button"
            aria-label="Send"
            disabled={!canSend}
            onClick={submit}
            className="flex size-9 items-center justify-center rounded-full text-neutral-900 transition-transform active:scale-95 disabled:cursor-not-allowed dark:text-white"
          >
            <ArrowUp className="size-4" />
          </button>
        </MetalFx>
      </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","metal-fx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/metal-fx","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":"metal-fx"}]]}]}],["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/use-surface-theme"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/spectrumui/metal-prompt-bar.tsx","content":"$53","type":"registry:component","target":"components/spectrumui/metal-prompt-bar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>