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:T125a,"use client"; import { Slot, Slottable } from "@radix-ui/react-slot"; import { LoaderCircle } from "lucide-react"; import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/loading-indicator.css"; import "./button.css"; /* Colour, material and press live in button.css keyed on data-variant, so a consumer's utility classes still override them. Raised to press: the button sinks 1px into an inner shade instead of scaling. */ const variants = { default: "", secondary: "", ghost: "", destructive: "", }; const sizes = { sm: "h-8 gap-1.5 rounded-control px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11", md: "h-[var(--control-height)] gap-2 rounded-button px-3.5 text-sm", lg: "h-11 gap-2 rounded-touch px-[18px] text-[15px]", icon: "size-[var(--control-height)] rounded-button p-0", }; export type ButtonProps = ComponentProps<"button"> & { variant?: keyof typeof variants; size?: keyof typeof sizes; asChild?: boolean; /** Shows a spinner over the label and swallows clicks while keeping focus and width. */ loading?: boolean; /** Animate a meaningful label/icon change, such as saving → saved. */ feedbackKey?: string; }; export function Button({ className, variant = "default", size = "md", asChild = false, loading = false, feedbackKey, disabled, "aria-disabled": ariaDisabled, children, onClick, onClickCapture, tabIndex, type = "button", ...props }: ButtonProps) { const Component = asChild ? Slot : "button"; const nativeDisabled = Boolean(disabled); const blocked = nativeDisabled || loading || ariaDisabled === true || ariaDisabled === "true"; return ( { if (blocked && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); } props.onKeyDown?.(event); }} onClickCapture={(event) => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onClick={onClick} > {loading && asChild && ( )} {loading && !asChild && feedbackKey === undefined && ( )} {loading && !asChild && feedbackKey === undefined ? ( {children} ) : feedbackKey !== undefined && !asChild ? ( {loading && ( ) : ( children )} ); } function ButtonFeedback({ stateKey, children, }: { stateKey: string; children: ReactNode; }) { const content = useRef(null); const [initialKey] = useState(stateKey); const [width, setWidth] = useState(); useLayoutEffect(() => { const element = content.current; if (!element) return; const measure = () => setWidth(element.offsetWidth); measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [stateKey]); return ( {children} ); } 54:T2109,"use client"; import { ArrowUp, Paperclip, Square, X } from "lucide-react"; import { useId, useLayoutEffect, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type ReactNode } from "react"; import { Button } from "./button"; import { cn } from "./lib/cn"; import "./shared/prompt-suggestion.css"; import "./prompt-input.css"; export type PromptFile = { id: string; file: File }; const size = (bytes: number) => (bytes < 1024 * 1024 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : `${(bytes / 1024 / 1024).toFixed(1)} MB`); export function PromptInput({ label = "Message", placeholder = "Ask anything", onSubmit, onStop, streaming, disabled, maxLength, suggestions, controls, accept, maxFiles = 4, maxFileSize = 5 * 1024 * 1024, allowFiles = true, className, }: { label?: string; placeholder?: string; onSubmit: (message: { text: string; files: File[] }) => void; /** Called by the Stop button, and by Escape while streaming. */ onStop?: () => void; /** While true the send button becomes Stop and Enter does not send. */ streaming?: boolean; disabled?: boolean; maxLength?: number; /** Starter prompts shown while the input is empty. */ suggestions?: readonly string[]; /** Extra controls on the left of the toolbar, such as a model select. */ controls?: ReactNode; accept?: string; maxFiles?: number; maxFileSize?: number; allowFiles?: boolean; className?: string; }) { const [text, setText] = useState(""), [files, setFiles] = useState([]), [problem, setProblem] = useState(""), [dragging, setDragging] = useState(false); const field = useRef(null); const picker = useRef(null); const [sent, setSent] = useState([]); const history = useRef({ at: -1, draft: "" }); const help = useId(); const counter = useId(); const ready = (text.trim().length > 0 || files.length > 0) && !disabled; useLayoutEffect(() => { const element = field.current; if (!element) return; element.style.height = "auto"; const line = parseFloat(getComputedStyle(element).lineHeight) || 24; element.style.height = `${Math.min(element.scrollHeight, line * 8 + 8)}px`; }, [text]); const add = (incoming: File[]) => { const notes: string[] = []; const next = [...files]; for (const file of incoming) { if (next.length >= maxFiles) { notes.push(`Only ${maxFiles} files can be attached.`); break; } if (file.size > maxFileSize) notes.push(`${file.name} is larger than ${size(maxFileSize)}.`); else if (!next.some((f) => f.file.name === file.name && f.file.size === file.size)) next.push({ id: `${file.name}-${file.size}-${file.lastModified}`, file }); } setFiles(next); setProblem(notes.join(" ")); }; const send = () => { if (!ready || streaming) return; const message = text.trim(); if (message) setSent((list) => [...list, message]); history.current = { at: -1, draft: "" }; onSubmit({ text: message, files: files.map((f) => f.file) }); setText(""); setFiles([]); setProblem(""); }; const keys = (event: KeyboardEvent) => { if (event.nativeEvent.isComposing) return; if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); send(); } else if (event.key === "Escape" && streaming) { event.preventDefault(); onStop?.(); } else if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !event.shiftKey && !event.altKey) { const h = history.current; const area = event.currentTarget; const atEdge = event.key === "ArrowUp" ? area.selectionStart === 0 && area.selectionEnd === 0 : area.selectionStart === text.length; if (!atEdge || (!sent.length && event.key === "ArrowUp")) return; if (event.key === "ArrowUp") { if (h.at === -1) h.draft = text; const to = h.at === -1 ? sent.length - 1 : Math.max(0, h.at - 1); h.at = to; event.preventDefault(); setText(sent[to]); } else if (h.at !== -1) { event.preventDefault(); const to = h.at + 1; h.at = to >= sent.length ? -1 : to; setText(to >= sent.length ? h.draft : sent[to]); } } }; const drop = (event: DragEvent) => { event.preventDefault(); setDragging(false); if (allowFiles && !disabled) add([...event.dataTransfer.files]); }; const near = maxLength !== undefined && text.length > maxLength * 0.8; return (

{ event.preventDefault(); send(); }} onDragOver={(event) => { if (!allowFiles || disabled) return; event.preventDefault(); setDragging(true); }} onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragging(false); }} onDrop={drop} > {!!suggestions?.length && !text && !files.length && (

{suggestions.map((s) => ( ))}

)}

{files.length > 0 && (

{file.name} {size(file.size)}

)}

{
            setText(event.target.value);
            history.current.at = -1;
          }}
          onKeyDown={keys}
        />
        <div data-slot="prompt-toolbar">
          <div className="flex min-w-0 items-center gap-1">
            {allowFiles && (
              <>
                <input ref={picker} type="file" multiple accept={accept} hidden onChange={(event: ChangeEvent<HTMLInputElement>) => { add([...(event.target.files ?? [])]); event.target.value = ""; }} />
                <Button type="button" variant="ghost" size="icon" aria-label="Attach files" disabled={disabled || files.length >= maxFiles} onClick={() => picker.current?.click()}>
                  <Paperclip aria-hidden="true" />
                </Button>
              </>
            )}
            {controls}
          </div>
          <div className="flex items-center gap-2">
            {near && (
              <span id={counter} className="text-xs tabular-nums text-muted-foreground" aria-live="polite">
                {text.length} / {maxLength}
              </span>
            )}
            {streaming ? (
              <Button type="button" size="icon" aria-label="Stop generating" onClick={onStop}>
                <Square aria-hidden="true" className="fill-current" />
              </Button>
            ) : (
              <Button type="submit" size="icon" aria-label="Send message" disabled={!ready}>
                <ArrowUp aria-hidden="true" />
              </Button>
            )}
          </div>
        </div>
      </div>
      <p id={help} className="flex min-h-4 flex-wrap justify-between gap-x-3 text-[11px] text-muted-foreground">
        <span>
          Enter to send · Shift+Enter for a new line{sent.length ? " · ↑ for previous" : ""}
          {streaming ? " · Esc to stop" : ""}
        </span>
        {problem && <span role="alert" className="text-danger">{problem}</span>}
      </p>
    </form>
  );
}
55:T136e,/* button.tsx's styles; it imports this file. Edit freely. */
@layer theme, base, components, utilities;

@layer components {
  [data-slot="button"] {
    transition-property: background-color, color, border-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }

/* Button material. Raised to press: a lit top edge and a small lift; the
     press travels 1px down and swaps the lift for an inner shade. Only
     translate animates (release on the settle curve); shadows swap. */
  [data-slot="button"] {
    --b-bg: var(--raised);
    --b-bg-hover: var(--raised-hover);
    --b-bg-press: var(--raised-press);
    --b-fg: var(--foreground);
    --b-shadow: var(--shadow-raised);
    --b-shadow-press: var(--shadow-raised-press);
    background-color: var(--b-bg);
    color: var(--b-fg);
    box-shadow: var(--b-shadow);
    transition-property: background-color, color, border-color, translate;
    transition-duration:
      var(--duration-fast), var(--duration-fast), var(--duration-fast),
      var(--duration-normal);
    transition-timing-function:
      var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle);
  }
  [data-slot="button"][data-variant="default"] {
    --b-bg: var(--accent);
    --b-bg-hover: var(--accent-hover);
    --b-bg-press: var(--accent-press);
    --b-fg: var(--accent-foreground);
    --b-shadow: var(--shadow-accent);
    --b-shadow-press: var(--shadow-accent-press);
  }
  [data-slot="button"][data-variant="destructive"] {
    --b-bg: var(--danger-fill);
    --b-bg-hover: var(--danger-fill-hover);
    --b-bg-press: var(--danger-fill-press);
    --b-fg: var(--danger-fill-foreground);
    --b-shadow: var(--shadow-danger);
    --b-shadow-press: var(--shadow-danger-press);
  }
  [data-slot="button"][data-variant="ghost"] {
    --b-bg: transparent;
    --b-bg-hover: var(--muted);
    --b-bg-press: var(--muted);
    --b-fg: var(--muted-foreground);
    --b-shadow: none;
    --b-shadow-press: none;
  }
  @media (hover: hover) {
    [data-slot="button"]:hover {
      background-color: var(--b-bg-hover);
    }
    [data-slot="button"][data-variant="ghost"]:hover {
      color: var(--foreground);
    }
  }
  [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not(
      [aria-busy="true"]
    ) {
    translate: 0 var(--motion-press-travel);
    background-color: var(--b-bg-press);
    box-shadow: var(--b-shadow-press);
    transition-duration:
      var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms;
    transition-timing-function: var(--ease-out);
  }
  [data-slot="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
    background-color: var(--sunken);
    color: var(--muted-foreground);
    box-shadow: inset 0 0 0 1px var(--border);
  }
  [data-slot="button"][data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not(
      [aria-busy="true"]
    ) {
    background-color: transparent;
    box-shadow: none;
  }
  /* Loading keeps the exact width: the label stays in flow but invisible. */
  [data-slot="button-label"] {
    display: inline-flex;
    align-items: center;
    gap: inherit;
  }
  /* Opacity, not visibility, so the label still names the button. */
  [data-slot="button-label"][data-hidden="true"] {
    opacity: 0;
  }
  [data-slot="button-busy"] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }
  [data-slot="button-feedback"] {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    overflow: clip;
    transition: width var(--duration-normal) var(--ease-out);
  }
  [data-slot="button-feedback-label"] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: inherit;
    width: max-content;
  }
  [data-slot="button-feedback-label"][data-enter="true"] {
    animation: caliper-feedback-enter var(--duration-normal) var(--ease-out);
  }

[data-slot="button"][aria-busy="true"] {
    pointer-events: none;
  }
  [data-slot="button"][data-action-phase="error"] {
    color: var(--danger);
  }

@media (prefers-reduced-motion: reduce) {
    [data-slot="button"],
    [data-slot="button-feedback"] {
      transition: none;
    }
    [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not(
        [aria-busy="true"]
      ) {
      translate: none;
    }
    [data-slot="button-feedback-label"],
    [data-slot="button-feedback-label"][data-enter="true"] {
      animation: none;
    }
  }

/* Toggle: pressed is recessed, as a toggled tool in a button group is. */
  /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */
  [data-slot="button"][data-variant="ghost"][data-toggle][aria-pressed="true"] {
    --b-bg: var(--sunken);
    --b-bg-hover: var(--sunken);
    --b-bg-press: var(--sunken);
    --b-fg: var(--foreground);
    --b-shadow: var(--shadow-sunken);
    --b-shadow-press: var(--shadow-sunken);
  }
}
56:T90a,/* prompt-input.tsx's styles; it imports this file. Edit freely. */
@layer theme, base, components, utilities;

@layer components {
  [data-slot="prompt-box"] {
    border: 1px solid color-mix(in srgb, var(--muted-foreground) 55%, transparent);
    border-radius: var(--radius-overlay, 12px);
    background: var(--background);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  [data-slot="prompt-box"]:hover {
    border-color: var(--muted-foreground);
  }
  [data-slot="prompt-box"]:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  }
  [data-slot="prompt-input"][data-dragging="true"] [data-slot="prompt-box"] {
    border-style: dashed;
    border-color: var(--foreground);
    background: var(--surface);
  }
  [data-slot="prompt-field"] {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem 0.25rem;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: var(--foreground);
    resize: none;
    outline: none;
    overflow-y: auto;
  }
  [data-slot="prompt-field"]::placeholder {
    color: var(--muted-foreground);
  }
  [data-slot="prompt-toolbar"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.5rem;
  }
  [data-slot="prompt-file"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 1.75rem;
    padding: 0 0.25rem 0 0.625rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    animation: caliper-chip-in var(--duration-normal) var(--ease-out);
  }
  [data-slot="prompt-file"] button {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    color: var(--muted-foreground);
    outline: none;
  }
  [data-slot="prompt-file"] button:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  [data-slot="prompt-file"] button:focus-visible {
    outline: 2px solid var(--ring);
  }
  [data-slot="prompt-file"] svg {
    width: 0.75rem;
    height: 0.75rem;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-slot="prompt-file"] {
      transition: none;
      animation: none;
    }
  }
}
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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","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","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","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/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.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/prompt-input.tsx","content":"$54","type":"registry:ui","target":"components/ui/prompt-input.tsx"},{"path":"ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"loading-indicator\"] {\n    animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"loading-indicator\"] {\n      animation: none;\n    }\n  }\n}\n","type":"registry:file","target":"components/ui/shared/loading-indicator.css"},{"path":"ui/button.css","content":"$55","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/shared/prompt-suggestion.css","content":"/* Shared by blog-grid.tsx, changelog-feed.tsx, prediction-market.tsx, prompt-input.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"prompt-suggestion\"] {\n    padding: 0.375rem 0.75rem;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    font-size: 0.8125rem;\n    color: var(--muted-foreground);\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--ease-out),\n      color var(--duration-fast) var(--ease-out);\n  }\n  [data-slot=\"prompt-suggestion\"]:hover:not(:disabled) {\n    background: var(--muted);\n    color: var(--foreground);\n  }\n  [data-slot=\"prompt-suggestion\"]:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n}\n","type":"registry:file","target":"components/ui/shared/prompt-suggestion.css"},{"path":"ui/prompt-input.css","content":"$56","type":"registry:file","target":"components/ui/prompt-input.css"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>