4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[8513,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollArea"] 50:I[8513,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 51: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 52:T30ca,"use client"; import { useEffect, useId, useRef, useState, type CSSProperties, type TextareaHTMLAttributes, } from "react"; // --------------------------------------------------------------------------- // ProofRise — an autosize textarea that grows like dough proofing rather than // reflowing like a spreadsheet cell. A hidden mirror div (same font, padding // and width as the real textarea) remeasures target content height on every // input event; the wrapper's height is driven by a registered CSS custom // property (`--proof-h`, animatable via @property) so the browser's own // compositor eases it, not React state on a hot path. Grows ease-out-expo in // 180ms; shrinks slower on the same curve (320ms) so the surface never snaps // out from under the cursor; a paste that jumps more than 40px is stretched // to 400ms so it reads as one continuous breath instead of a layout pop. The // live

itself is resized instantly and un-animated with
// overflow hidden — the wrapper is what clips/reveals it — so the caret is
// never blocked mid-rise. Before starting a new rise, the mirror also checks
// whether the caret's own line already sits below the wrapper's current
// (possibly mid-transition) height; if a fast edit has outrun the animation,
// the wrapper snaps instantly to just behind the caret line first, then
// animates the rest, so the caret is never left invisible under the clip.
// A hairline bottom border brightens from --border toward --ns-muted for the
// duration of a rise, via a class toggle, never a canvas or SVG.
// prefers-reduced-motion: all of the above still runs (the target height is
// still computed correctly), it just applies without a transition — the
// standard instant-reflow autosize pattern.
// ---------------------------------------------------------------------------

const GROW_MS = 180;
const SHRINK_MS = 320;
const PASTE_MS = 400;
const PASTE_THRESHOLD_PX = 40;
const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; // ease-out-expo shaped

function clamp(n: number, min: number, max: number) {
  return Math.min(Math.max(n, min), max);
}

function escapeForMirror(s: string) {
  return s
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/\n/g, "<br/>");
}

export interface ProofRiseProps
  extends Omit<
    TextareaHTMLAttributes<HTMLTextAreaElement>,
    "rows" | "style" | "id"
  > {
  /** visible label rendered above the field; omit and pass your own htmlFor/aria-label if you supply one externally */
  label?: string;
  /** minimum height in lines; default 1 */
  minRows?: number;
  /** maximum height in lines before it becomes a normal scrolling textarea; default unbounded */
  maxRows?: number;
  /** id for the textarea + label association; auto-generated if omitted */
  id?: string;
  className?: string;
}

export function ProofRise({
  label,
  minRows = 1,
  maxRows,
  id,
  className = "",
  onChange,
  defaultValue,
  value,
  ...textareaProps
}: ProofRiseProps) {
  const autoId = useId();
  const fieldId = id ?? `textarea-autosize-swell-${autoId}`;
  const wrapRef = useRef<HTMLDivElement>(null);
  const taRef = useRef<HTMLTextAreaElement>(null);
  const mirrorRef = useRef<HTMLDivElement>(null);
  const pasteFlagRef = useRef(false);
  const riseTimerRef = useRef<number | undefined>(undefined);
  const baselineRef = useRef({ oneLine: 24, lineHeight: 20 });
  const boundsRef = useRef({ min: 24, max: Infinity });
  const [reduced, setReduced] = useState(false);

useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const onChangeMq = () => setReduced(mq.matches);
    mq.addEventListener("change", onChangeMq);
    return () => mq.removeEventListener("change", onChangeMq);
  }, []);

useEffect(() => {
    ensureCustomProperty();
  }, []);

useEffect(() => {
    const measure = (skipAnimation: boolean, paste: boolean) => {
      const ta = taRef.current;
      const mirror = mirrorRef.current;
      const wrap = wrapRef.current;
      if (!ta || !mirror || !wrap) return;

// baseline: one line's height + the pure line-height increment, used
      // to derive min/max bounds and the "is the caret behind the clip"
      // guard below. Cheap enough to redo every measure — it only touches
      // an offscreen mirror, never triggers a real paint until we assign
      // the wrapper height at the end.
      const cs = getComputedStyle(ta);
      let lineHeight = parseFloat(cs.lineHeight);
      if (Number.isNaN(lineHeight)) lineHeight = parseFloat(cs.fontSize) * 1.5;
      mirror.textContent = " ";
      const oneLine = mirror.scrollHeight || lineHeight;
      baselineRef.current = { oneLine, lineHeight };
      const min = oneLine + Math.max(0, minRows - 1) * lineHeight;
      const max = maxRows
        ? oneLine + Math.max(0, maxRows - 1) * lineHeight
        : Infinity;
      boundsRef.current = { min, max };

// the live textarea matches its content instantly and never animates,
      // so the caret is only ever hidden by the wrapper's clip during a rise
      // — never by the textarea's own overflow. Below maxRows that overflow
      // stays hidden (there's nothing to scroll, content always fits); past
      // it the content genuinely exceeds the capped height, so the textarea
      // gets its own scrollbar rather than silently clipping unreachable
      // lines and the caret along with them.
      ta.style.overflowY = natural > max ? "auto" : "hidden";
      ta.style.height = `${total}px`;

if (skipAnimation || reduced) {
        wrap.style.transitionDuration = "0ms";
        wrap.style.setProperty("--proof-h", `${total}px`);
        void wrap.offsetHeight;
        return;
      }

let h0 = parseFloat(getComputedStyle(wrap).height);
      if (!Number.isFinite(h0)) h0 = total;

// a fast edit (or an animation still catching up) can leave the
      // caret's own line below the wrapper's current clipped height —
      // snap instantly to just behind that line first so the caret is
      // never invisible for the length of a rise, then animate the rest
      if (caretBottom - h0 > lineHeight + 2) {
        const snap = Math.min(total, caretBottom - lineHeight);
        wrap.style.transitionDuration = "0ms";
        wrap.style.setProperty("--proof-h", `${snap}px`);
        void wrap.offsetHeight;
        h0 = snap;
      }

const growing = total > h0 + 0.5;
      const shrinking = total < h0 - 0.5;
      let dur = GROW_MS;
      if (shrinking) dur = SHRINK_MS;
      else if (growing && paste && total - h0 > PASTE_THRESHOLD_PX) {
        dur = PASTE_MS;
      }

wrap.style.transitionDuration = `${dur}ms`;
      wrap.style.setProperty("--proof-h", `${total}px`);

// first paint: sizes to the initial value with no transition
    measure(true, false);

const ta = taRef.current;
    const wrap = wrapRef.current;
    if (!ta || !wrap) return;

const handleInput = () => {
      const wasPaste = pasteFlagRef.current;
      pasteFlagRef.current = false;
      measure(false, wasPaste);
    };
    const handlePaste = () => {
      pasteFlagRef.current = true;
    };

ta.addEventListener("input", handleInput);
    ta.addEventListener("paste", handlePaste);

// a container resize can change how the value wraps; resnap instantly —
    // not a rise, just keeping the true content height honest
    const ro = new ResizeObserver(() => measure(true, false));
    ro.observe(ta);

return () => {
      ta.removeEventListener("input", handleInput);
      ta.removeEventListener("paste", handlePaste);
      ro.disconnect();
      window.clearTimeout(riseTimerRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [reduced, minRows, maxRows]);

// controlled `value` changes (not driven by the field's own input event)
  // still need to be measured — e.g. a parent clearing the field on submit
  useEffect(() => {
    if (value === undefined) return;
    const ta = taRef.current;
    if (!ta) return;
    const evt = new Event("input", { bubbles: true });
    ta.dispatchEvent(evt);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);

const sharedFont =
    "w-full resize-none bg-transparent px-3.5 py-2.5 font-sans text-sm leading-relaxed text-foreground";

return (
    <div className={className}>
      <style>{`
@property --proof-h {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.ns-proof-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-bottom-width: 1px;
  height: var(--proof-h);
  transition-property: --proof-h, border-color;
  transition-timing-function: ${EASE};
  transition-duration: ${GROW_MS}ms;
}
.ns-proof-wrap.ns-proof-rising {
  border-color: var(--ns-muted);
}
.ns-proof-wrap:focus-within {
  border-color: var(--ns-accent);
}
.ns-proof-textarea {
  display: block;
  outline: none;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ns-proof-wrap {
    transition-duration: 0ms;
  }
}
`}</style>

{label ? (
        <label
          htmlFor={fieldId}
          className="mb-1.5 block text-xs text-ns-muted"
        >
          {label}
        </label>
      ) : null}

<div
        ref={wrapRef}
        className="ns-proof-wrap bg-background"
        // a sane one-row default painted before the measuring effect ever
        // runs — otherwise --proof-h's registered 0px initial value collapses
        // the field for a frame on first paint. The effect overwrites this
        // with the precisely measured height immediately, unanimated.
        style={{ ["--proof-h" as string]: "2.75rem" } as CSSProperties}
      >
        <textarea
          ref={taRef}
          id={fieldId}
          rows={1}
          className={`ns-proof-textarea ${sharedFont} placeholder:text-ns-muted/70`}
          defaultValue={defaultValue}
          value={value}
          onChange={onChange}
          {...textareaProps}
        />
        <div
          ref={mirrorRef}
          aria-hidden
          className={`ns-proof-textarea pointer-events-none absolute inset-x-0 top-0 select-none whitespace-pre-wrap break-words ${sharedFont}`}
          style={{ visibility: "hidden", height: "auto" }}
        />
      </div>
    </div>
  );
}
4c:["$","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":[null,["$","$L4d",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L4f",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L4f",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L4f",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/core/textarea-autosize-swell/component.tsx","content":"$52","type":"registry:ui","target":"components/ui/textarea-autosize-swell.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>