52: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"] 53: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"] 54:T8bd,"use client"; import { X } from "lucide-react"; import { useId, type ComponentProps, type ReactNode } from "react"; import { Button } from "./button"; import { FeedbackIcon, type FeedbackVariant } from "./feedback"; import { cn } from "./lib/cn"; import "./shared/alert.css"; import "./alert.css"; export type AlertProps = Omit, "title"> & { title: ReactNode; variant?: FeedbackVariant; loading?: boolean; action?: ReactNode; onDismiss?: () => void; }; export function Alert({ title, variant = "neutral", loading = false, children, action, onDismiss, className, ...props }: AlertProps) { const titleId = useId(); return (

{title}

{children != null && (

{children}

)} {action != null && (

{action}

)}

{onDismiss && ( )}

); } 55: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} ); } 56:T12db,"use client"; import { Frown, Meh, Smile, ThumbsDown, ThumbsUp } from "lucide-react"; import { useEffect, useId, useRef, useState, type ReactNode } from "react"; import { Alert } from "./alert"; import { Button } from "./button"; import { cn } from "./lib/cn"; import { Textarea } from "./textarea"; import "./shared/tree-panel.css"; import "./feedback-widget.css"; export type FeedbackRating = "good" | "okay" | "bad"; export type FeedbackResult = void | { error?: string }; const faces: { value: FeedbackRating; label: string; icon: ReactNode; prompt: string }[] = [ { value: "bad", label: "Not helpful", icon: , prompt: "What went wrong?" }, { value: "okay", label: "Okay", icon: , prompt: "What would make it better?" }, { value: "good", label: "Helpful", icon: , prompt: "What worked well?" }, ]; const thumbs = [faces[0], faces[2]].map((f, i) => ({ ...f, icon: i === 0 ? : })); /** A short, optional way to tell you how it went. One tap is enough; the comment is a bonus. */ export function FeedbackWidget({ question = "Was this page helpful?", scale = "thumbs", onSubmit, thanks = "Thanks, that helps us improve.", className, }: { question?: string; scale?: "thumbs" | "faces"; onSubmit: (feedback: { rating: FeedbackRating; comment: string }) => Promise | FeedbackResult; thanks?: string; className?: string; }) { const [rating, setRating] = useState(null), [comment, setComment] = useState(""), [pending, setPending] = useState(false), [error, setError] = useState(""), [done, setDone] = useState(false); const group = useId(); const box = useRef(null); const thanksRef = useRef(null); const options = scale === "thumbs" ? thumbs : faces; const chosen = faces.find((f) => f.value === rating); useEffect(() => { if (rating && !done) box.current?.focus({ preventScroll: true }); }, [rating, done]); useEffect(() => { if (done) thanksRef.current?.focus(); }, [done]); const send = async (withComment: boolean) => { if (!rating || pending) return; setPending(true); setError(""); try { const result = await onSubmit({ rating, comment: withComment ? comment.trim() : "" }); if (result && result.error) setError(result.error); else setDone(true); } catch (e) { setError(e instanceof Error ? e.message : "Your feedback could not be sent. Try again."); } finally { setPending(false); } }; if (done) return (

{thanks}

); return (

{question}

{options.map((o) => ( setRating(o.value)} disabled={pending} /> {o.icon} {o.label} ))}

{chosen?.prompt ?? "Tell us more"} (optional)

setComment(e.target.value)} placeholder="Do not include passwords or personal details." />
            </label>
            {error && <Alert variant="error" title={error} />}
            <div className="flex flex-wrap items-center justify-end gap-2">
              <Button variant="ghost" size="sm" disabled={pending} onClick={() => send(false)}>
                Send without a comment
              </Button>
              <Button size="sm" loading={pending} disabled={!comment.trim()} onClick={() => send(true)}>
                {pending ? "Sending…" : "Send feedback"}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
57:T57b,/* Shared by alert.tsx, toast.tsx; each imports it. Edit freely. */
@layer theme, base, components, utilities;

@layer components {
  [data-slot="feedback-message"] {
    display: block;
    animation: caliper-fade-in var(--duration-normal) var(--ease-out);
  }
  :is([data-slot="alert"], [data-slot="toast"])[data-variant="success"]
    [data-slot="feedback-icon"] {
    background: var(--success-subtle);
    color: var(--success);
  }
  :is([data-slot="alert"], [data-slot="toast"])[data-variant="warning"]
    [data-slot="feedback-icon"] {
    background: var(--warning-subtle);
    color: var(--warning);
  }
  :is([data-slot="alert"], [data-slot="toast"])[data-variant="error"]
    [data-slot="feedback-icon"] {
    background: var(--destructive-subtle);
    color: var(--destructive);
  }
  @container (max-width: 22rem) {
    [data-slot="feedback-copy"] {
      display: contents;
    }
    [data-slot="feedback-title"] {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      padding-top: 0.25rem;
    }
    [data-slot="feedback-description"],
    [data-slot="feedback-action"] {
      grid-column: 1 / -1;
      margin-top: 0;
    }
    [data-slot="feedback-description"] {
      grid-row: 2;
    }
    [data-slot="feedback-action"] {
      grid-row: 3;
    }
  }

@media (prefers-reduced-motion: reduce) {
    [data-slot="feedback-message"] {
      animation: none;
    }
  }
}
58:T465,/* alert.tsx's styles; it imports this file. Edit freely. */
@layer theme, base, components, utilities;

@layer components {
  [data-slot="alert"] {
    container-type: inline-size;
    opacity: 1;
    transform: translateY(0);
    transition-property: opacity, transform, display;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out);
    transition-behavior: allow-discrete;
  }
  [data-slot="alert"][hidden] {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--duration-fast);
  }
  @starting-style {
    [data-slot="alert"]:not([hidden]) {
      opacity: 0;
      transform: translateY(var(--motion-enter-distance));
    }
  }
  @container (max-width: 22rem) {
    [data-slot="alert"] > [data-slot="button"] {
      grid-column: 3;
      grid-row: 1;
    }
  }

@media (prefers-reduced-motion: reduce) {
    [data-slot="alert"] {
      transition: none;
      transform: none !important;
    }
    @starting-style {
      [data-slot="alert"]:not([hidden]) {
        opacity: 1;
        transform: none;
      }
    }
  }
}
59: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);
  }
}
5a:T497,/* feedback-widget.tsx's styles; it imports this file. Edit freely. */
@layer theme, base, components, utilities;

@layer components {
  [data-slot="rate"] {
    position: relative;
  }
  [data-slot="rate"] input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  [data-slot="rate"] > span {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--muted-foreground);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  [data-slot="rate"] > span svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  [data-slot="rate"]:hover input:not(:checked) + span {
    background: var(--muted);
    color: var(--foreground);
  }
  [data-slot="rate"] input:checked + span {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background);
  }
  [data-slot="rate"] input:focus-visible + span {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
}
5b:T519,/* Shared by combobox.tsx, input.tsx, select-menu.tsx, select.tsx, textarea.tsx; each imports it. Edit freely. */
@layer theme, base, components, utilities;

@layer components {
  @media (hover: hover) {
    :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):hover:enabled:not(:focus-visible):not([aria-invalid="true"]) {
      box-shadow: var(--shadow-field-hover);
    }
  }
  :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):focus-visible {
    outline: none;
    box-shadow: var(--shadow-field-focus);
    transition: none;
  }
  :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"])[aria-invalid="true"] {
    box-shadow: var(--shadow-field-invalid);
  }
  :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"])[aria-invalid="true"]:focus-visible {
    box-shadow:
      var(--shadow-field-invalid),
      0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);
  }
  :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):disabled {
    background-color: var(--sunken);
    box-shadow: var(--shadow-field-quiet);
    color: var(--muted-foreground);
  }
  :is([data-slot="input"], [data-slot="textarea"])[readonly] {
    background-color: var(--sunken);
    box-shadow: var(--shadow-field-quiet);
  }
}
51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/alert.tsx","content":"$54","type":"registry:ui","target":"components/ui/alert.tsx"},{"path":"ui/button.tsx","content":"$55","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"ui/feedback.tsx","content":"import { CircleCheck, CircleX, Info, LoaderCircle, TriangleAlert } from \"lucide-react\";\nimport \"./feedback.css\";\n\nexport type FeedbackVariant = \"neutral\" | \"success\" | \"warning\" | \"error\";\n\nconst icons = {\n  neutral: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleX,\n};\n\nexport function FeedbackIcon({\n  variant,\n  loading = false,\n}: {\n  variant: FeedbackVariant;\n  loading?: boolean;\n}) {\n  const Icon = loading ? LoaderCircle : icons[variant];\n  return (\n    <span data-slot=\"feedback-icon\" aria-hidden=\"true\">\n      <span data-slot=\"feedback-symbol\" key={loading ? \"loading\" : variant}>\n        <Icon data-slot={loading ? \"loading-indicator\" : undefined} />\n      </span>\n    </span>\n  );\n}\n","type":"registry:ui","target":"components/ui/feedback.tsx"},{"path":"ui/feedback-widget.tsx","content":"$56","type":"registry:ui","target":"components/ui/feedback-widget.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/textarea.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/input-2.css\";\nimport \"./textarea.css\";\n\n/** A recessed multi-line field that grows with the draft from 3 to 8 lines, then scrolls. */\nexport function Textarea({ className, ...props }: ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"block min-h-[88px] max-h-[200px] w-full min-w-0 resize-none rounded-button px-3 py-[9px] text-base leading-[22px] text-foreground outline-none [field-sizing:content] placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm md:leading-[22px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"components/ui/textarea.tsx"},{"path":"ui/shared/alert.css","content":"$57","type":"registry:file","target":"components/ui/shared/alert.css"},{"path":"ui/alert.css","content":"$58","type":"registry:file","target":"components/ui/alert.css"},{"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":"$59","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/feedback.css","content":"/* feedback.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"feedback-icon\"] {\n    display: flex;\n    width: 2rem;\n    height: 2rem;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--radius-surface);\n    background: var(--muted);\n    color: var(--muted-foreground);\n    transition:\n      color var(--duration-fast) var(--ease-out),\n      background-color var(--duration-fast) var(--ease-out);\n  }\n  [data-slot=\"feedback-symbol\"] {\n    display: flex;\n    animation: caliper-feedback-symbol-enter var(--duration-normal) var(--ease-out);\n  }\n  [data-slot=\"feedback-icon\"] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"feedback-icon\"] {\n      transition: none;\n      transform: none !important;\n    }\n    [data-slot=\"feedback-symbol\"] {\n      animation: none;\n    }\n  }\n}\n","type":"registry:file","target":"components/ui/feedback.css"},{"path":"ui/shared/tree-panel.css","content":"/* Shared by agent-activity.tsx, approvals.tsx, audit-trail.tsx, booking-pill.tsx, comment-thread.tsx, control-center.tsx, feedback-widget.tsx, file-diff.tsx, file-tree.tsx, fixtures.tsx, inbox-sidebar.tsx, marketing-sections.tsx, page-parts.tsx, timeline.tsx, todo-list.tsx, tool-result.tsx, tree-view.tsx, workspace-sidebar.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"tree-panel\"] {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--duration-travel) var(--ease-settle);\n  }\n  [data-slot=\"tree-panel\"][data-open] {\n    grid-template-rows: 1fr;\n  }\n  [data-slot=\"tree-panel\"] > div {\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"tree-panel\"] {\n      transition-duration: 400ms;\n    }\n  }\n}\n","type":"registry:file","target":"components/ui/shared/tree-panel.css"},{"path":"ui/feedback-widget.css","content":"$5a","type":"registry:file","target":"components/ui/feedback-widget.css"},{"path":"ui/shared/input-2.css","content":"$5b","type":"registry:file","target":"components/ui/shared/input-2.css"},{"path":"ui/textarea.css","content":"/* textarea.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"textarea\"] {\n    transition-property: background-color, color, border-color;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-out);\n  }\n\n  /* Recessed to fill. One ring for every field: 3:1 at rest, darker on\n     hover, a 2px ember ring with a soft halo on focus, danger when invalid.\n     Disabled and read-only drop into the sunken fill and stay legible. */\n  [data-slot=\"textarea\"] {\n    border: 0;\n    background-color: var(--field);\n    box-shadow: var(--shadow-field);\n    transition: box-shadow var(--duration-fast) var(--ease-out);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"textarea\"] {\n      transition: none;\n    }\n  }\n}\n","type":"registry:file","target":"components/ui/textarea.css"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>