5f: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"] 60: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/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"],"ItemStyles"] 61: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/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"],"ScrollArea"] 62: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/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"],"ScrollBar"] 63: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"] 64:T25ce,"use client"; import { useEffect, useRef, useState } from "react"; import { motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; const ICON_SWAP = { type: "spring", duration: 0.3, bounce: 0 } as const; // Long enough to notice after the field settles, short enough that the // pencil is back before the next edit. const SAVED_FOR = 1600; export function InlineEdit({ label, value, onSave, placeholder, multiline = false, className, }: { label: string; value: string; onSave: (value: string) => void; placeholder: string; multiline?: boolean; // Typography goes here; the display and the editor share it exactly. className?: string; }) { const reduceMotion = useReducedMotion(); const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(value); const [saved, setSaved] = useState(false); const fieldRef = useRef(null); const buttonRef = useRef(null); const savedTimer = useRef>(undefined); // Keyboard exits hand focus back to the text; a click elsewhere keeps // focus wherever the click put it. const refocus = useRef(false); useEffect(() => () => clearTimeout(savedTimer.current), []); useEffect(() => { if (editing) { const field = fieldRef.current; field?.focus(); // Caret at the end, where most edits start. field?.setSelectionRange(field.value.length, field.value.length); } else if (refocus.current) { refocus.current = false; buttonRef.current?.focus(); } }, [editing]); const start = () => { setDraft(value); setEditing(true); }; const finish = (commit: boolean, keyboard: boolean) => { if (!editing) return; refocus.current = keyboard; setEditing(false); const next = multiline ? draft.trim() : draft.replace(/\s+/g, " ").trim(); if (!commit || next === value) return; onSave(next); setSaved(true); clearTimeout(savedTimer.current); savedTimer.current = setTimeout(() => setSaved(false), SAVED_FOR); }; // Identical box, padding, font and line-height for the display and the // editor, so the swap doesn't move a single glyph. const box = cn( "col-start-1 row-start-1 block w-full rounded-lg py-1 pr-9 pl-2 text-left", multiline ? "whitespace-pre-wrap break-words" : "truncate whitespace-pre", className, ); const empty = value.trim() === ""; return ( // Pulled out by its own padding, so the text lines up with the // surrounding content while the tint still has room to breathe.

{editing && (multiline ? (

setDraft(e.target.value)}
            onBlur={() => finish(true, false)}
            onKeyDown={(e) => {
              // Shift+Enter still adds a line break.
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                finish(true, true);
              } else if (e.key === "Escape") {
                e.preventDefault();
                finish(false, true);
              }
            }}
            className={cn(
              box,
              "h-full resize-none overflow-hidden bg-background text-foreground ring-[1.5px] ring-foreground/25 outline-hidden placeholder:text-muted-foreground",
            )}
          />
        ) : (
          <input
            ref={fieldRef}
            aria-label={label}
            value={draft}
            placeholder={placeholder}
            onChange={(e) => setDraft(e.target.value)}
            onBlur={() => finish(true, false)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                finish(true, true);
              } else if (e.key === "Escape") {
                e.preventDefault();
                finish(false, true);
              }
            }}
            className={cn(
              box,
              "h-full bg-background text-foreground ring-[1.5px] ring-foreground/25 outline-hidden placeholder:text-muted-foreground",
            )}
          />
        ))}

{/* Pencil on hover or focus, a check right after saving. Pinned to the
          first line's height so it stays put as the text grows. */}
      <span
        aria-hidden
        className={cn(
          "pointer-events-none absolute top-1 right-1.5 grid size-6 place-items-center text-muted-foreground",
          editing && "invisible",
        )}
      >
        <SwapIcon
          visible={!saved}
          reduceMotion={reduceMotion}
          className="opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100 group-has-[:focus-visible]:opacity-100"
        >
          <path d="M9.75 3.75 12.25 6.25M3.25 12.75l.6-2.6 6.9-6.9a1.25 1.25 0 0 1 1.77 0l.73.73a1.25 1.25 0 0 1 0 1.77l-6.9 6.9Z" />
        </SwapIcon>
        <SwapIcon visible={saved} reduceMotion={reduceMotion} className="text-foreground">
          <path d="m3.5 8.5 3 3 6-7" />
        </SwapIcon>
      </span>
    </div>
  );
}

export default function InlineEditDemo() {
  const [name, setName] = useState("Ava Moreno");
  const [bio, setBio] = useState(
    "Design engineer. Builds the small interactions nobody notices until they are missing.",
  );
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
  const [showSaved, setShowSaved] = useState(false);

useEffect(() => () => clearTimeout(timer.current), []);

const saved = (apply: () => void) => {
    apply();
    setShowSaved(true);
    clearTimeout(timer.current);
    timer.current = setTimeout(() => setShowSaved(false), SAVED_FOR);
  };

return (
    <section
      aria-label="Profile"
      className="w-[400px] max-w-full rounded-[24px] bg-background p-5 shadow-raised"
    >
      <div className="mb-4 flex items-center justify-between">
        {/* eslint-disable-next-line @next/next/no-img-element -- a tiny local SVG gains nothing from next/image. */}
        <img
          src="/avatars/ava.svg"
          alt=""
          className="size-14 rounded-full bg-[oklch(0.97_0_0)] outline-1 -outline-offset-1 outline-[oklch(0_0_0/0.1)] dark:outline-[oklch(1_0_0/0.1)]"
        />
        <span
          aria-hidden
          className={cn(
            "flex items-center gap-1.5 text-xs text-muted-foreground transition-[opacity,filter,translate] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-[opacity]",
            showSaved
              ? "translate-y-0 opacity-100 blur-[0px] duration-200"
              : "translate-y-0.5 opacity-0 blur-[4px] duration-150 motion-reduce:translate-y-0",
          )}
        >
          <svg
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeLinejoin="round"
            className="size-3.5"
          >
            <path d="m3.5 8.5 3 3 6-7" />
          </svg>
          Saved
        </span>
        <span className="sr-only" aria-live="polite">
          {showSaved ? "Saved" : ""}
        </span>
      </div>
      <InlineEdit
        label="Name"
        value={name}
        placeholder="Add your name"
        onSave={(v) => saved(() => setName(v))}
        className="text-lg leading-7 font-semibold text-foreground"
      />
      <p className="mb-2 text-sm text-muted-foreground">@ava · Lisbon</p>
      <InlineEdit
        label="Bio"
        value={bio}
        placeholder="Add a short bio"
        multiline
        onSave={(v) => saved(() => setBio(v))}
        className="text-[15px] leading-6 text-foreground"
      />
    </section>
  );
}
5e:["$","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","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/inline-edit.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n  const media = window.matchMedia(query);\n  media.addEventListener(\"change\", onChange);\n  return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n  return useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(query).matches,\n    () => false,\n  );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>