@mova-ui/react 0.4.7 → 0.4.9

package/registry/imessage-chat.json

@@ -1,7 +1,7 @@
 {
   "id": "imessage-chat",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "imessage-chat.tsx",
   "sourcePath": "ui/cards/imessage-chat.tsx",
   "registryFile": "imessage-chat.json",
@@ -15,5 +15,5 @@
   ],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n/** Original Mova implementation; visual reference documented in docs/provenance/interactive-cards.md. */\nimport * as React from \"react\";\nimport { ArrowUp, RotateCcw, Video } from \"lucide-react\";\n\nexport interface IMessageChatMessage { id: string; text: string; direction: \"incoming\" | \"outgoing\" }\nexport interface IMessageChatProps {\n  name?: string;\n  avatar?: string;\n  deliveryStatus?: string;\n  initialMessages?: IMessageChatMessage[];\n  onSend?: (text: string) => void;\n  onVideoCall?: () => void;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n  style?: React.CSSProperties;\n}\nconst conversation: IMessageChatMessage[] = [\n  { id: \"1\", text: \"Are we still on for Saturday?\", direction: \"incoming\" },\n  { id: \"2\", text: \"Yes! Trail at 9?\", direction: \"outgoing\" },\n  { id: \"3\", text: \"Perfect. I'll bring coffee\", direction: \"incoming\" },\n  { id: \"4\", text: \"The good kind this time\", direction: \"incoming\" },\n  { id: \"5\", text: \"You're the best\", direction: \"outgoing\" },\n];\nexport function IMessageChat({ name = \"Maya Chen\", avatar, deliveryStatus, initialMessages = conversation, onSend, onVideoCall, theme = \"light\", className = \"\", style }: IMessageChatProps = {}) {\n  const [messages, setMessages] = React.useState(initialMessages);\n  const [draft, setDraft] = React.useState(\"\");\n  const [status, setStatus] = React.useState(\"Read\");\n  const thread = React.useRef<HTMLDivElement>(null);\n  const sequence = React.useRef(0);\n  const instanceId = React.useId();\n  React.useEffect(() => { if (thread.current) thread.current.scrollTop = thread.current.scrollHeight; }, [messages]);\n  function send(event: React.FormEvent) {\n    event.preventDefault();\n    const text = draft.trim();\n    if (!text) return;\n    setMessages(current => [...current, { id: `${instanceId}-sent-${++sequence.current}`, text, direction: \"outgoing\" }]);\n    setDraft(\"\"); setStatus(\"Sent\"); onSend?.(text);\n  }\n  return <section className={`mova-imessage ${className}`} data-theme={theme} style={style} aria-label={`Conversation with ${name}`}>\n    <style>{css}</style>\n    <header><span className=\"mic-avatar\">{avatar ? <img src={avatar} alt=\"\" /> : name.split(\" \").map(word => word[0]).slice(0, 2).join(\"\")}</span><div className=\"mic-person\"><strong>{name}</strong><span>iMessage</span></div><button type=\"button\" aria-label=\"Restart conversation\" title=\"Restart conversation\" onClick={() => { setMessages(initialMessages); setStatus(\"Read\"); }}><RotateCcw size={16} /></button>{onVideoCall && <button type=\"button\" aria-label={`Video call ${name}`} onClick={onVideoCall}><Video size={17} /></button>}</header>\n    <div className=\"mic-thread\" ref={thread} role=\"log\" aria-label=\"Messages\" aria-relevant=\"additions\"><div className=\"mic-messages\"><div className=\"mic-time\">Today 9:41 AM</div>{messages.map(message => <div key={message.id} className={`mic-bubble mic-${message.direction}`}>{message.text}</div>)}<div className=\"mic-status\" role=\"status\">{deliveryStatus ?? status}</div></div></div>\n    <form onSubmit={send}><input aria-label=\"Message\" placeholder=\"iMessage\" value={draft} maxLength={2000} onChange={event => setDraft(event.target.value)} /><button type=\"submit\" aria-label=\"Send message\" disabled={!draft.trim()}><ArrowUp size={18} /></button></form>\n  </section>;\n}\nconst css = `\n.mova-imessage{--mic-bg:#fff;--mic-fg:#202124;--mic-muted:#727479;--mic-soft:#f0f0f2;--mic-line:#dfdfe3;box-sizing:border-box;width:300px;max-width:100%;border-radius:24px;background:var(--mic-bg);color:var(--mic-fg);font:400 13px/20px -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;box-shadow:0 1px 3px #0000000a,0 8px 32px -4px #00000010;border:1px solid #88888818;overflow:hidden}\n.mova-imessage[data-theme=dark]{--mic-bg:#1d1d1d;--mic-fg:#f2f2f2;--mic-muted:#a2a2a8;--mic-soft:#313133;--mic-line:#49494c;color-scheme:dark}\n.mova-imessage *{box-sizing:border-box}.mova-imessage button,.mova-imessage input{font:inherit}.mova-imessage button{border:0;cursor:pointer;display:grid;place-items:center;flex:none;background:transparent;color:inherit;width:32px;height:32px;border-radius:50%;transition:background 160ms,transform 160ms}.mova-imessage button:hover{background:var(--mic-soft)}.mova-imessage button:active{transform:scale(.95)}.mova-imessage :focus-visible{outline:2px solid #3478f6;outline-offset:3px}.mova-imessage header{display:flex;gap:10px;align-items:center;padding:16px;border-bottom:1px solid #88888814}.mic-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#c7b0a1;color:#433b37;font-size:11px;font-weight:600;overflow:hidden}.mic-avatar img{width:100%;height:100%;object-fit:cover}.mic-person{flex:1;min-width:0;display:flex;flex-direction:column}.mic-person strong{font-size:15px;font-weight:500;overflow-wrap:anywhere}.mic-person span,.mic-time,.mic-status{font-size:12px;line-height:16px;color:var(--mic-muted)}.mic-thread{height:252px;overflow:auto;padding:12px 16px;overscroll-behavior:contain}.mic-messages{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}.mic-time{align-self:center;margin-bottom:8px}.mic-bubble{max-width:82%;padding:8px 12px;border-radius:18px;overflow-wrap:anywhere;animation:mic-enter 240ms ease-out both}.mic-incoming{align-self:flex-start;background:var(--mic-soft);border-bottom-left-radius:5px}.mic-outgoing{align-self:flex-end;background:#2767f4;color:#fff;border-bottom-right-radius:5px}.mic-status{align-self:flex-end;margin-top:2px}.mova-imessage form{margin:12px 16px 16px;border:1px solid var(--mic-line);border-radius:24px;display:flex;align-items:center;padding:3px;gap:4px}.mova-imessage input{min-width:0;width:100%;border:0;outline:none;background:transparent;color:inherit;padding:4px 8px}.mova-imessage form:focus-within{outline:2px solid #3478f6;outline-offset:2px}.mova-imessage form button{background:#2767f4;color:#fff;width:28px;height:28px}.mova-imessage form button:hover{background:#1759e1}.mova-imessage form button:disabled{background:var(--mic-soft);color:var(--mic-muted);cursor:default}@keyframes mic-enter{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-imessage *{animation:none!important;transition:none!important}}\n`;\n"
+  "content": "\"use client\";\n\"use client\";\n\n/** Original Mova implementation; visual reference documented in docs/provenance/interactive-cards.md. */\n/** Header/send icons: Heroicons (outline), Copyright (c) Tailwind Labs, Inc. MIT License. */\nimport * as React from \"react\";\nimport { Video } from \"lucide-react\";\n\nexport interface IMessageChatMessage { id: string; text: string; direction: \"incoming\" | \"outgoing\" }\nexport interface IMessageChatProps {\n  name?: string;\n  avatar?: string;\n  deliveryStatus?: string;\n  initialMessages?: IMessageChatMessage[];\n  onSend?: (text: string) => void;\n  onAudioCall?: () => void;\n  onVideoCall?: () => void;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n  style?: React.CSSProperties;\n}\nconst conversation: IMessageChatMessage[] = [\n  { id: \"1\", text: \"Are we still on for Saturday?\", direction: \"incoming\" },\n  { id: \"2\", text: \"Yes! Trail at 9?\", direction: \"outgoing\" },\n  { id: \"3\", text: \"Perfect. I'll bring coffee\", direction: \"incoming\" },\n  { id: \"4\", text: \"The good kind this time\", direction: \"incoming\" },\n  { id: \"5\", text: \"You're the best\", direction: \"outgoing\" },\n];\nconst defaultAvatar = \"https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=64&h=64\";\nconst replies = [\"Love that\", \"See you there!\", \"Haha deal\", \"Bringing snacks too\"];\n\nexport function IMessageChat({ name = \"Maya Chen\", avatar = defaultAvatar, deliveryStatus, initialMessages = conversation, onSend, onAudioCall, onVideoCall, theme = \"light\", className = \"\", style }: IMessageChatProps = {}) {\n  const [messages, setMessages] = React.useState(initialMessages);\n  const [draft, setDraft] = React.useState(\"\");\n  const [status, setStatus] = React.useState(\"Read\");\n  const [statusPhase, setStatusPhase] = React.useState<\"stable\" | \"exit\" | \"enter\">(\"stable\");\n  const [receiptAfter, setReceiptAfter] = React.useState(initialMessages[initialMessages.length - 1]?.id);\n  const [newMessages, setNewMessages] = React.useState<Set<string>>(() => new Set());\n  const [receiptNew, setReceiptNew] = React.useState(false);\n  const [typing, setTyping] = React.useState(false);\n  const [tooltip, setTooltip] = React.useState({ text: \"\", visible: false, width: 0, x: 0 });\n  const [pressed, setPressed] = React.useState<string>();\n  const thread = React.useRef<HTMLDivElement>(null);\n  const input = React.useRef<HTMLInputElement>(null);\n  const statusText = React.useRef<HTMLSpanElement>(null);\n  const tooltipText = React.useRef<HTMLSpanElement>(null);\n  const actions = React.useRef<HTMLSpanElement>(null);\n  const tooltipTrigger = React.useRef<HTMLButtonElement | null>(null);\n  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([]);\n  const pressTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const pressStarted = React.useRef(0);\n  const initiallyScrolled = React.useRef(false);\n  const sequence = React.useRef(0);\n  const replyIndex = React.useRef(0);\n  const instanceId = React.useId();\n  const tooltipId = `${instanceId}-tooltip`;\n\n  function clearTimers() {\n    timers.current.forEach(clearTimeout);\n    timers.current = [];\n  }\n  function later(callback: () => void, delay: number) {\n    timers.current.push(setTimeout(callback, delay));\n  }\n  React.useEffect(() => () => { clearTimers(); clearTimeout(pressTimer.current); }, []);\n  React.useEffect(() => {\n    if (!thread.current) return;\n    const reduced = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    thread.current.scrollTo({ top: thread.current.scrollHeight, behavior: !initiallyScrolled.current || reduced ? \"auto\" : \"smooth\" });\n    initiallyScrolled.current = true;\n  }, [messages, typing]);\n  React.useLayoutEffect(() => {\n    if (statusPhase !== \"enter\") return;\n    // Flush the incoming position before transitioning the new receipt into place.\n    void statusText.current?.offsetHeight;\n    setStatusPhase(\"stable\");\n  }, [statusPhase]);\n  React.useLayoutEffect(() => {\n    if (!tooltip.visible || !tooltipText.current || !tooltipTrigger.current || !actions.current) return;\n    const width = Math.ceil(tooltipText.current.scrollWidth + 24);\n    const group = actions.current.getBoundingClientRect();\n    const trigger = tooltipTrigger.current.getBoundingClientRect();\n    const x = Math.min(trigger.left - group.left + trigger.width / 2 - width / 2, group.width + 6 - width);\n    setTooltip(current => current.width === width && current.x === x ? current : { ...current, width, x });\n  }, [tooltip.text, tooltip.visible]);\n\n  function showTooltip(event: React.SyntheticEvent<HTMLButtonElement>, text: string) {\n    tooltipTrigger.current = event.currentTarget;\n    setTooltip(current => ({ ...current, text, visible: true }));\n  }\n  function hideTooltip() { setTooltip(current => ({ ...current, visible: false })); }\n  function press(event: React.PointerEvent<HTMLButtonElement>) {\n    if (event.pointerType === \"mouse\") return;\n    clearTimeout(pressTimer.current);\n    pressStarted.current = performance.now();\n    setPressed(event.currentTarget.dataset.press);\n    event.currentTarget.setPointerCapture(event.pointerId);\n  }\n  function releasePress() {\n    pressTimer.current = setTimeout(() => setPressed(undefined), Math.max(0, 150 - (performance.now() - pressStarted.current)));\n  }\n  function finishAnimation(id: string, event: React.AnimationEvent) {\n    if (event.animationName !== \"mic-pop\") return;\n    setNewMessages(current => { const next = new Set(current); next.delete(id); return next; });\n  }\n  function send(event: React.FormEvent) {\n    event.preventDefault();\n    const text = draft.trim();\n    if (!text) return;\n    clearTimers();\n    const id = `${instanceId}-sent-${++sequence.current}`;\n    setTyping(false);\n    setMessages(current => [...current, { id, text, direction: \"outgoing\" }]);\n    setNewMessages(current => new Set(current).add(id));\n    setReceiptAfter(id);\n    setReceiptNew(true);\n    setStatus(\"Delivered\");\n    setStatusPhase(\"stable\");\n    setDraft(\"\");\n    later(() => {\n      setStatusPhase(\"exit\");\n      later(() => { setStatus(\"Read\"); setStatusPhase(\"enter\"); }, 150);\n    }, 1200);\n    later(() => setTyping(true), 1800);\n    later(() => {\n      setTyping(false);\n      const replyId = `${instanceId}-reply-${++sequence.current}`;\n      const reply = replies[replyIndex.current++ % replies.length];\n      setMessages(current => [...current, { id: replyId, text: reply, direction: \"incoming\" }]);\n      setNewMessages(current => new Set(current).add(replyId));\n    }, 3400);\n    onSend?.(text);\n  }\n  const receipt = <div key=\"receipt\" className={`mic-status${receiptNew ? \" mic-new\" : \"\"}`} role=\"status\" onAnimationEnd={event => { if (event.animationName === \"mic-pop\") setReceiptNew(false); }}><span ref={statusText} className={`mic-text-swap${statusPhase === \"exit\" ? \" mic-exit\" : statusPhase === \"enter\" ? \" mic-enter-start\" : \"\"}`}>{deliveryStatus ?? status}</span></div>;\n  const contents: React.ReactNode[] = [<div key=\"timestamp\" className=\"mic-time\">Today 9:41 AM</div>];\n  messages.forEach(message => {\n    contents.push(<div key={message.id} className={`mic-bubble mic-${message.direction}${newMessages.has(message.id) ? \" mic-new\" : \"\"}`} onAnimationEnd={event => finishAnimation(message.id, event)}>{message.text}</div>);\n    if (message.id === receiptAfter) contents.push(receipt);\n  });\n  if (!messages.length) contents.push(receipt);\n  if (typing) contents.push(<div key=\"typing\" className=\"mic-bubble mic-incoming mic-typing mic-new\" aria-label={`${name.split(\" \")[0]} is typing`}><i /><i /><i /></div>);\n  return <section className={`mova-imessage ${className}`} data-theme={theme} style={style} aria-label={`Conversation with ${name}`}>\n    <style>{css}</style>\n    <header><span className=\"mic-avatar\">{avatar ? <img src={avatar} alt={name} width={32} height={32} /> : name.split(\" \").map(word => word[0]).slice(0, 2).join(\"\")}</span><div className=\"mic-person\"><strong>{name}</strong><span>iMessage</span></div><span className=\"mic-actions\" ref={actions} onPointerLeave={hideTooltip}>\n      <button type=\"button\" className=\"mic-icon\" aria-label=\"Audio call\" aria-describedby={tooltipId} data-press=\"audio\" data-pressed={pressed === \"audio\"} onPointerDown={press} onPointerUp={releasePress} onPointerCancel={releasePress} onPointerEnter={event => showTooltip(event, \"Audio call\")} onFocus={event => showTooltip(event, \"Audio call\")} onBlur={hideTooltip} onClick={() => { hideTooltip(); onAudioCall?.(); }}><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.25\" aria-hidden=\"true\"><path d=\"M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z\" /></svg></button>\n      {onVideoCall && <button type=\"button\" className=\"mic-icon\" aria-label={`Video call ${name}`} aria-describedby={tooltipId} data-press=\"video\" data-pressed={pressed === \"video\"} onPointerDown={press} onPointerUp={releasePress} onPointerCancel={releasePress} onPointerEnter={event => showTooltip(event, \"Video call\")} onFocus={event => showTooltip(event, \"Video call\")} onBlur={hideTooltip} onClick={() => { hideTooltip(); onVideoCall(); }}><Video size={16} /></button>}\n      <span className=\"mic-tooltip\" id={tooltipId} role=\"tooltip\" aria-hidden={!tooltip.visible} data-show={tooltip.visible} style={{ width: tooltip.width, \"--mic-tooltip-x\": `${tooltip.x}px` } as React.CSSProperties}><span ref={tooltipText}>{tooltip.text}</span></span>\n    </span></header>\n    <div className=\"mic-divider\" aria-hidden=\"true\" />\n    <div className=\"mic-thread\" ref={thread} role=\"log\" aria-label=\"Messages\" aria-live=\"polite\" aria-relevant=\"additions\"><div className=\"mic-messages\">{contents}</div></div>\n    <form onSubmit={send}><label className=\"mic-field\"><input ref={input} type=\"text\" aria-label=\"Message\" placeholder=\"iMessage\" autoComplete=\"off\" value={draft} maxLength={2000} onChange={event => setDraft(event.target.value)} /><button type=\"submit\" className={`mic-send${draft.trim() ? \" mic-ready\" : \"\"}`} aria-label=\"Send\" aria-disabled={!draft.trim()} data-press=\"send\" data-pressed={pressed === \"send\"} onPointerDown={press} onPointerUp={releasePress} onPointerCancel={releasePress} onClick={() => input.current?.focus()}><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.25\" aria-hidden=\"true\"><path d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\" /></svg></button></label></form>\n  </section>;\n}\nconst css = `\n.mova-imessage{--mic-bg:#fff;--mic-fg:#0d0d0d;--mic-muted:#6c6c6c;--mic-chip:rgba(0,0,0,.04);--mic-bubble-in:rgba(0,0,0,.05);--mic-bubble-out:#1c5ffb;--mic-input-line:rgba(0,0,0,.14);--mic-input-focus:#585858;--mic-divider:rgba(0,0,0,.0392);--mic-tooltip-bg:#fff;--mic-tooltip-fg:#2f2f2f;box-sizing:border-box;width:300px;max-width:100%;display:flex;flex-direction:column;border-radius:24px;background:var(--mic-bg);color:var(--mic-fg);font:400 13px/20px \"Inter Variable\",Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;letter-spacing:0;box-shadow:0 0 0 1px #0000000a,0 8px 32px -4px #0000000f,0 1px 3px #0000000a;overflow:hidden;-webkit-font-smoothing:antialiased}\n.mova-imessage[data-theme=dark]{--mic-bg:#1d1d1d;--mic-fg:#f2f2f2;--mic-muted:rgba(202,202,202,.7);--mic-chip:rgba(255,255,255,.07);--mic-bubble-in:rgba(255,255,255,.08);--mic-bubble-out:#2f6bff;--mic-input-line:rgba(255,255,255,.14);--mic-input-focus:#a5a5a5;--mic-divider:rgba(255,255,255,.0392);--mic-tooltip-bg:#262626;--mic-tooltip-fg:#f2f2f2;color-scheme:dark}\n.mova-imessage *{box-sizing:border-box}.mova-imessage button,.mova-imessage input{font:inherit;letter-spacing:inherit}.mova-imessage button{padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mova-imessage button:is(:active,[data-pressed=true]){transform:scale(.95)}.mova-imessage :focus-visible:not(input){outline:none;box-shadow:0 0 0 2px var(--mic-bg),0 0 0 4px var(--mic-fg)}.mova-imessage header{display:flex;gap:12px;align-items:center;padding:16px;position:relative;z-index:2}.mic-avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#c7b0a1;color:#433b37;font-size:12.8px;font-weight:500;line-height:1;overflow:hidden}.mic-avatar img{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover;outline:1px solid #00000014;outline-offset:-1px}.mova-imessage[data-theme=dark] .mic-avatar img{outline-color:#ffffff14}.mic-person{flex:1;min-width:0;display:flex;flex-direction:column}.mic-person strong{font-size:15px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mic-person>span,.mic-time,.mic-status{font-size:12px;line-height:16px;color:var(--mic-muted)}.mic-actions{position:relative;display:inline-flex;flex:none;gap:4px;margin-right:-6px}.mova-imessage .mic-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--mic-muted);transition:transform 150ms cubic-bezier(.22,1,.36,1),background-color 150ms cubic-bezier(.22,1,.36,1)}@media(hover:hover) and (pointer:fine){.mova-imessage .mic-icon:hover{background:var(--mic-chip)}}.mic-tooltip{position:absolute;top:calc(100% + 8px);left:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;translate:var(--mic-tooltip-x,0px) 0;scale:.98;transform-origin:50% 0;padding:8px 12px;border-radius:8px;background:var(--mic-tooltip-bg);color:var(--mic-tooltip-fg);font-size:12px;line-height:16px;white-space:nowrap;box-shadow:0 0 0 1px #0000000f,0 2px 6px #0000000d,0 4px 42px #0000000f;opacity:0;pointer-events:none;z-index:3;transition:opacity 50ms ease-out,scale 50ms ease-out,translate 160ms cubic-bezier(.22,1,.36,1),width 160ms cubic-bezier(.22,1,.36,1)}.mic-tooltip[data-show=true]{opacity:1;scale:1;transition:opacity 150ms ease-out 80ms,scale 150ms ease-out 80ms,translate 160ms cubic-bezier(.22,1,.36,1),width 160ms cubic-bezier(.22,1,.36,1)}.mic-tooltip>span{white-space:nowrap}.mic-divider{height:1px;flex:none;background:linear-gradient(90deg,transparent,var(--mic-divider) 20%,var(--mic-divider) 80%,transparent)}.mic-thread{box-sizing:content-box;height:228px;display:flex;flex-direction:column;overflow-y:auto;padding:12px 16px;scrollbar-width:none;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);mask-image:linear-gradient(to bottom,transparent,#000 16px)}.mic-thread::-webkit-scrollbar{display:none}.mic-messages{margin-top:auto;display:flex;flex-direction:column;gap:2px}.mic-time{align-self:center;margin-bottom:8px}.mic-bubble{box-sizing:content-box;max-width:78%;padding:8px 12px;border-radius:18px;font-size:13px;line-height:20px;overflow-wrap:anywhere;text-wrap:pretty;transition:border-radius 250ms cubic-bezier(.22,1,.36,1)}.mic-incoming{align-self:flex-start;background:var(--mic-bubble-in);border-bottom-left-radius:6px;transform-origin:0 100%}.mic-outgoing{align-self:flex-end;background:var(--mic-bubble-out);color:#fff;border-bottom-right-radius:6px;transform-origin:100% 100%}.mic-incoming:has(+.mic-incoming){border-bottom-left-radius:18px}.mic-outgoing:has(+.mic-outgoing){border-bottom-right-radius:18px}.mic-incoming+.mic-outgoing,.mic-outgoing+.mic-incoming,.mic-status+.mic-bubble{margin-top:6px}.mic-status{align-self:flex-end;padding:2px 4px 0 0;transform-origin:100% 0}.mic-new{animation:mic-pop 500ms cubic-bezier(.34,1.36,.64,1) both,mic-fade 400ms cubic-bezier(.22,1,.36,1) both}@keyframes mic-pop{from{transform:translateY(8px) scale(.92)}to{transform:none}}@keyframes mic-fade{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}.mic-bubble.mic-typing{display:flex;align-items:center;gap:4px;padding:14px 12px}.mic-typing i{width:6px;height:6px;border-radius:50%;background:var(--mic-muted);animation:mic-typing 1200ms ease-in-out infinite}.mic-typing i:nth-child(2){animation-delay:180ms}.mic-typing i:nth-child(3){animation-delay:360ms}@keyframes mic-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}.mic-text-swap{display:inline-block;transform:translateY(0);filter:blur(0);opacity:1;transition:transform 150ms ease-in-out,filter 150ms ease-in-out,opacity 150ms ease-in-out;will-change:transform,filter,opacity}.mic-text-swap.mic-exit{transform:translateY(-4px);filter:blur(2px);opacity:0}.mic-text-swap.mic-enter-start{transform:translateY(4px);filter:blur(2px);opacity:0;transition:none}.mova-imessage form{padding:8px 16px 16px;margin:0}.mic-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 4px 0 14px;border-radius:40px;background:var(--mic-bg);box-shadow:inset 0 0 0 1px var(--mic-input-line);transition:box-shadow 120ms ease;cursor:text}.mic-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--mic-input-focus)}.mova-imessage input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;color:var(--mic-fg);font-size:13px;line-height:20px}.mova-imessage input::placeholder{color:var(--mic-muted)}.mova-imessage .mic-send{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--mic-chip);color:var(--mic-muted);transition:transform 150ms cubic-bezier(.22,1,.36,1),background-color 150ms cubic-bezier(.22,1,.36,1),color 150ms cubic-bezier(.22,1,.36,1)}.mova-imessage .mic-send[aria-disabled=true]{cursor:default}.mova-imessage .mic-send.mic-ready{background:var(--mic-bubble-out);color:#fff}@media(prefers-reduced-motion:reduce){.mova-imessage *{animation:none!important;transition:none!important}.mova-imessage .mic-typing i{opacity:.6}.mova-imessage button:is(:active,[data-pressed=true]){transform:none}}\n`;\n"
 }

package/registry/inertia-skid-stop.json

@@ -1,7 +1,7 @@
 {
   "id": "inertia-skid-stop",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "inertia-skid-stop.tsx",
   "sourcePath": "components/css-animations/whimsical/YuiPhysicsExperiments.tsx",
   "registryFile": "inertia-skid-stop.json",

package/registry/infinity-path.json

@@ -1,7 +1,7 @@
 {
   "id": "infinity-path",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "infinity-path.tsx",
   "sourcePath": "ui/loading/infinity-path.tsx",
   "registryFile": "infinity-path.json",

package/registry/input-focus-glow.json

@@ -1,7 +1,7 @@
 {
   "id": "input-focus-glow",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "input-focus-glow.tsx",
   "registryFile": "input-focus-glow.json",
   "exports": [

package/registry/inset-action-button.json

@@ -1,7 +1,7 @@
 {
   "id": "inset-action-button",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "inset-action-button.tsx",
   "registryFile": "inset-action-button.json",
   "exports": [

package/registry/inset-button.json

@@ -1,7 +1,7 @@
 {
   "id": "inset-button",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "inset-button.tsx",
   "sourcePath": "ui/hover/inset-button.tsx",
   "registryFile": "inset-button.json",

package/registry/intersecting-rings.json

@@ -1,7 +1,7 @@
 {
   "id": "intersecting-rings",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "intersecting-rings.tsx",
   "sourcePath": "ui/loading/intersecting-rings.tsx",
   "registryFile": "intersecting-rings.json",

package/registry/ios-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "ios-spinner",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "ios-spinner.tsx",
   "sourcePath": "ui/loading/ios-spinner.tsx",
   "registryFile": "ios-spinner.json",

package/registry/kinetic-metronome-tick.json

@@ -1,7 +1,7 @@
 {
   "id": "kinetic-metronome-tick",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "kinetic-metronome-tick.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "kinetic-metronome-tick.json",

package/registry/kinetic-tension-capsule.json

@@ -1,7 +1,7 @@
 {
   "id": "kinetic-tension-capsule",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "kinetic-tension-capsule.tsx",
   "sourcePath": "components/css-animations/whimsical/KineticTensionCapsule.tsx",
   "registryFile": "kinetic-tension-capsule.json",

package/registry/light-dark-morph.json

@@ -1,7 +1,7 @@
 {
   "id": "light-dark-morph",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "light-dark-morph.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
   "registryFile": "light-dark-morph.json",

package/registry/like-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "like-toggle",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "like-toggle.tsx",
   "registryFile": "like-toggle.json",
   "exports": [

package/registry/line-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "line-spinner",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "line-spinner.tsx",
   "sourcePath": "ui/loading/line-spinner.tsx",
   "registryFile": "line-spinner.json",

package/registry/liquid-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "liquid-dots",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "liquid-dots.tsx",
   "sourcePath": "ui/loading/liquid-dots.tsx",
   "registryFile": "liquid-dots.json",

package/registry/liquid-glass-sheet.json

@@ -1,7 +1,7 @@
 {
   "id": "liquid-glass-sheet",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "liquid-glass-sheet.tsx",
   "sourcePath": "ui/cards/liquid-glass-sheet.tsx",
   "registryFile": "liquid-glass-sheet.json",
@@ -9,10 +9,8 @@
     "LiquidGlassSheet",
     "LiquidGlassSheetProps"
   ],
-  "dependencies": [
-    "lucide-react"
-  ],
+  "dependencies": [],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n/** Original Mova implementation; visual reference documented in docs/provenance/interactive-cards.md. */\nimport * as React from \"react\";\nimport { Check, Copy, Heart, Link, Play, Share2, X } from \"lucide-react\";\n\nexport interface LiquidGlassSheetProps {\n  title?: string; subtitle?: string; backgroundImage?: string; link?: string;\n  defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; onSaveChange?: (saved: boolean) => void;\n  onPlay?: () => void; onShare?: () => void;\n  theme?: \"light\" | \"dark\"; className?: string; style?: React.CSSProperties;\n}\nexport function LiquidGlassSheet({ title = \"Autumn forest\", subtitle = \"Liquid glass sheet\", backgroundImage, link = \"https://mova-ui.com\", defaultOpen = true, onOpenChange, onSaveChange, onPlay, onShare, theme = \"light\", className = \"\", style }: LiquidGlassSheetProps = {}) {\n  const [open, setOpen] = React.useState(defaultOpen);\n  const [saved, setSaved] = React.useState(false);\n  const [status, setStatus] = React.useState(\"\");\n  const [drag, setDrag] = React.useState(0);\n  const start = React.useRef<number | null>(null);\n  const trigger = React.useRef<HTMLButtonElement>(null);\n  const panel = React.useRef<HTMLElement>(null);\n  const titleId = React.useId();\n  const wasOpened = React.useRef(false);\n  function changeOpen(value: boolean) { setOpen(value); setDrag(0); onOpenChange?.(value); if (!value) trigger.current?.focus(); }\n  React.useEffect(() => { if (open && wasOpened.current) panel.current?.querySelector<HTMLButtonElement>(\"button\")?.focus(); wasOpened.current = true; }, [open]);\n  async function copy() {\n    try { await navigator.clipboard.writeText(link); setStatus(\"Link copied\"); }\n    catch { setStatus(\"Copy unavailable. Select the link below.\"); }\n  }\n  function keys(event: React.KeyboardEvent<HTMLElement>) {\n    if (event.key === \"Escape\") { event.preventDefault(); changeOpen(false); }\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      const buttons = Array.from(panel.current?.querySelectorAll<HTMLButtonElement>(\"button\") ?? []);\n      const at = buttons.indexOf(document.activeElement as HTMLButtonElement);\n      event.preventDefault(); buttons[(at + (event.key === \"ArrowDown\" ? 1 : -1) + buttons.length) % buttons.length]?.focus();\n    }\n  }\n  return <section className={`mova-glass-sheet ${className}`} data-theme={theme} style={{ ...style, ...(backgroundImage ? { backgroundImage: `url(${JSON.stringify(backgroundImage)})` } : {}) }} aria-label={title}>\n    <style>{css}</style><div className=\"mgs-forest\" aria-hidden=\"true\"><i /><i /><i /><i /><i /><i /></div>\n    <button type=\"button\" className=\"mgs-trigger\" ref={trigger} aria-expanded={open} aria-controls={`${titleId}-sheet`} onClick={() => changeOpen(!open)}>{open ? \"Close sheet\" : \"Open sheet\"}</button>\n    {open && <section className=\"mgs-panel\" ref={panel} id={`${titleId}-sheet`} aria-labelledby={titleId} onKeyDown={keys} style={{ transform: `translateY(${drag}px)` }}>\n      <div className=\"mgs-grab\" onPointerDown={event => { start.current = event.clientY; event.currentTarget.setPointerCapture(event.pointerId); }} onPointerMove={event => { if (start.current !== null) setDrag(Math.max(0, event.clientY - start.current)); }} onPointerUp={() => { start.current = null; if (drag > 60) changeOpen(false); else setDrag(0); }} onPointerCancel={() => { start.current = null; setDrag(0); }} aria-hidden=\"true\"><span /></div>\n      <header><div><h2 id={titleId}>{title}</h2><p>{subtitle}</p></div><button type=\"button\" className=\"mgs-close\" aria-label=\"Close sheet\" onClick={() => changeOpen(false)}><X size={15} /></button></header>\n      <button type=\"button\" className=\"mgs-row\" onClick={() => { onPlay?.(); setStatus(\"Preview selected\"); }}><Play size={16} /><span>Play preview</span></button>\n      <button type=\"button\" className=\"mgs-row\" onClick={() => { onShare?.(); if (!onShare) void copy(); else setStatus(\"Share selected\"); }}><Share2 size={16} /><span>Share</span></button>\n      <button type=\"button\" className=\"mgs-row\" aria-pressed={saved} onClick={() => { setSaved(!saved); onSaveChange?.(!saved); }} >{saved ? <Check size={16} /> : <Heart size={16} />}<span>{saved ? \"Saved to favorites\" : \"Save to favorites\"}</span></button>\n      <button type=\"button\" className=\"mgs-row\" onClick={() => void copy()}><Link size={16} /><span>{status === \"Link copied\" ? status : \"Copy link\"}</span><Copy size={14} /></button>\n      {status && <p className=\"mgs-status\" role=\"status\">{status}{status.startsWith(\"Copy unavailable\") && <input aria-label=\"Link to copy\" readOnly value={link} onFocus={event => event.currentTarget.select()} />}</p>}\n    </section>}\n  </section>;\n}\nconst css = `\n.mova-glass-sheet{box-sizing:border-box;position:relative;width:320px;max-width:100%;height:380px;isolation:isolate;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 68% 10%,#d6b85a44,transparent 50%),linear-gradient(160deg,#687349,#293e26 45%,#8a5c2f);background-size:cover;background-position:center;color:white;font:400 13px/20px -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;box-shadow:0 8px 32px #00000018}.mova-glass-sheet *{box-sizing:border-box}.mgs-forest{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.75;background:radial-gradient(ellipse at 65% 12%,#f4d57388,transparent 40%),radial-gradient(ellipse at 20% 70%,#8d633199,transparent 40%)}.mgs-forest i{position:absolute;top:-10%;bottom:-10%;width:12px;background:linear-gradient(90deg,#16251c,#35402c,#1b291f);transform:rotate(-8deg);left:10%;box-shadow:25px 0 60px #13261f55}.mgs-forest i:nth-child(2){left:29%;width:20px;transform:rotate(8deg)}.mgs-forest i:nth-child(3){left:48%;width:8px}.mgs-forest i:nth-child(4){left:68%;width:24px;transform:rotate(5deg)}.mgs-forest i:nth-child(5){left:91%;width:18px}.mgs-forest i:nth-child(6){left:80%;width:5px;opacity:.7}.mova-glass-sheet button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}.mova-glass-sheet button:focus-visible{outline:2px solid #fff;outline-offset:-3px}.mgs-trigger{position:absolute;top:24px;left:50%;transform:translateX(-50%);border:1px solid #ffffff60!important;background:#ffffff20!important;backdrop-filter:blur(10px);padding:10px 20px;border-radius:22px;white-space:nowrap;box-shadow:inset 0 1px #ffffff60,0 3px 10px #0002}.mgs-panel{position:absolute;left:8px;right:8px;bottom:8px;max-height:calc(100% - 82px);overflow:auto;border:1px solid #ffffff50;border-radius:28px;padding:0 8px 8px;background:#43513966;backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 1px #ffffffa0,inset 0 -1px 1px #ffffff40,0 20px 44px #0004;animation:mgs-enter 300ms cubic-bezier(.2,.8,.2,1);transition:transform 180ms ease-out}.mgs-grab{height:24px;display:grid;place-items:center;touch-action:none;cursor:grab}.mgs-grab span{width:36px;height:5px;border-radius:5px;background:#ffffffb0}.mgs-panel header{display:flex;align-items:center;padding:0 12px 8px;gap:8px}.mgs-panel header>div{flex:1;min-width:0}.mgs-panel h2{margin:0;font-size:16px;line-height:22px;font-weight:500;overflow-wrap:anywhere}.mgs-panel header p{margin:0;opacity:.85;font-size:12px}.mgs-close{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;flex:none}.mgs-row{display:flex;align-items:center;text-align:left;gap:10px;width:100%;min-height:42px;border-radius:15px;padding:10px!important;transition:background 160ms}.mgs-row span{flex:1;min-width:0;overflow-wrap:anywhere}.mgs-row svg{flex:none}.mgs-row:hover,.mgs-row:focus-visible,.mgs-close:hover{background:#ffffff26}.mgs-status{font-size:11px;margin:4px 12px;line-height:16px}.mgs-status input{width:100%;background:#0004;color:#fff;border:1px solid #fff8;border-radius:4px;padding:4px;font:inherit}@keyframes mgs-enter{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.mova-glass-sheet *{animation:none!important;transition:none!important}}@media(prefers-reduced-transparency:reduce){.mgs-panel{background:#3c4a35;backdrop-filter:none}}\n`;\n"
+  "content": "\"use client\";\n\"use client\";\n\n/** Original Mova implementation; visual reference documented in docs/provenance/interactive-cards.md. */\nimport * as React from \"react\";\n\nexport interface LiquidGlassSheetProps {\n  title?: string;\n  subtitle?: string;\n  backgroundImage?: string;\n  link?: string;\n  linkLabel?: string;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onSaveChange?: (saved: boolean) => void;\n  /** Reserved for applications that previously supplied this callback. */\n  onPlay?: () => void;\n  onShare?: () => void;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst FOREST_IMAGE = \"https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?auto=format&fit=crop&q=80&w=800\";\nconst DEFAULT_LINK = \"https://liquid-glass-react-studio.vercel.app/components\";\n\n/* The red and green channels encode the surface normal of a rounded pane.\n * Its narrow curved rim bends the backdrop more strongly than its flat face. */\nfunction refractionMap(width: number, height: number, radius: number, depth: number) {\n  const resolution = Math.min(1, 280 / Math.max(width, height));\n  const w = Math.max(8, Math.round(width * resolution));\n  const h = Math.max(8, Math.round(height * resolution));\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = w;\n  canvas.height = h;\n  const context = canvas.getContext(\"2d\");\n  if (!context) return \"\";\n  const pixels = context.createImageData(w, h);\n  const halfW = w / 2, halfH = h / 2;\n  const corner = Math.min(radius * resolution, halfW - 1, halfH - 1);\n  const rimWidth = Math.max(3, (4 + depth / 100 * Math.min(w, h) * .42) * resolution);\n  const distance = (x: number, y: number) => {\n    const qx = Math.abs(x) - halfW + corner;\n    const qy = Math.abs(y) - halfH + corner;\n    return Math.hypot(Math.max(0, qx), Math.max(0, qy)) + Math.min(0, Math.max(qx, qy)) - corner;\n  };\n  for (let index = 0; index < w * h; index++) {\n    const x = index % w + .5 - halfW;\n    const y = Math.floor(index / w) + .5 - halfH;\n    const d = distance(x, y);\n    let red = 128, green = 128;\n    if (d <= .5) {\n      const edge = Math.pow(1 - Math.min(1, Math.max(0, -d) / rimWidth), .72);\n      const curved = edge * edge * (3 - 2 * edge);\n      const dx = distance(x + 1, y) - distance(x - 1, y);\n      const dy = distance(x, y + 1) - distance(x, y - 1);\n      const length = Math.hypot(dx, dy) || 1;\n      const face = .18 * (1 - curved);\n      red = Math.round(128 + 127 * (dx / length * curved + x / halfW * face));\n      green = Math.round(128 + 127 * (dy / length * curved + y / halfH * face));\n    }\n    pixels.data.set([Math.max(0, Math.min(255, red)), Math.max(0, Math.min(255, green)), 128, 255], index * 4);\n  }\n  context.putImageData(pixels, 0, 0);\n  return canvas.toDataURL(\"image/png\");\n}\n\nfunction GlassMaterial({ id, width, height, radius, depth, refraction, dispersion, liquidity }: {\n  id: string; width: number; height: number; radius: number; depth: number;\n  refraction: number; dispersion: number; liquidity: number;\n}) {\n  const [map, setMap] = React.useState(\"\");\n  React.useEffect(() => { setMap(refractionMap(width, height, radius, depth)); }, [width, height, radius, depth]);\n  const bend = refraction / 100 * .36;\n  const spread = bend * dispersion / 100 * .4;\n  const wobble = liquidity / 100 * .06;\n  const channelMap = wobble > .002 ? \"warped\" : \"normal\";\n  return <svg width=\"0\" height=\"0\" style={{ position: \"absolute\" }} aria-hidden=\"true\" focusable=\"false\">\n    <filter id={id} x=\"-.08\" y=\"-.08\" width=\"1.16\" height=\"1.16\" filterUnits=\"objectBoundingBox\" primitiveUnits=\"objectBoundingBox\" colorInterpolationFilters=\"sRGB\">\n      {map && <>\n        <feImage href={map} x=\"0\" y=\"0\" width=\"1\" height=\"1\" preserveAspectRatio=\"none\" result=\"normal\" />\n        {wobble > .002 && <><feTurbulence type=\"fractalNoise\" baseFrequency=\".012 .016\" numOctaves={1} seed={7} result=\"noise\" /><feDisplacementMap in=\"normal\" in2=\"noise\" scale={wobble} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"warped\" /></>}\n        <feDisplacementMap in=\"SourceGraphic\" in2={channelMap} scale={Math.max(0, bend - spread)} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"red\" />\n        <feColorMatrix in=\"red\" type=\"matrix\" values=\"1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0\" result=\"redOnly\" />\n        <feDisplacementMap in=\"SourceGraphic\" in2={channelMap} scale={bend} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"green\" />\n        <feColorMatrix in=\"green\" type=\"matrix\" values=\"0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0\" result=\"greenOnly\" />\n        <feDisplacementMap in=\"SourceGraphic\" in2={channelMap} scale={bend + spread * 1.15} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"blue\" />\n        <feColorMatrix in=\"blue\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0\" result=\"blueOnly\" />\n        <feComposite in=\"redOnly\" in2=\"greenOnly\" operator=\"arithmetic\" k2=\"1\" k3=\"1\" result=\"redGreen\" />\n        <feComposite in=\"redGreen\" in2=\"blueOnly\" operator=\"arithmetic\" k2=\"1\" k3=\"1\" />\n      </>}\n    </filter>\n  </svg>;\n}\n\nfunction Icon({ kind, className = \"\", strokeWidth = 2.25, draw = false }: { kind: \"share\" | \"save\" | \"check\" | \"globe\" | \"copy\"; className?: string; strokeWidth?: number; draw?: boolean }) {\n  const paths = {\n    share: \"M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z\",\n    save: \"M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z\",\n    check: \"M5.25 12.7033 9.40385 17.37 18.75 6.87\",\n    globe: \"M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418\",\n    copy: \"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\",\n  };\n  return <svg className={`mgs-icon ${className}`} width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={strokeWidth} aria-hidden=\"true\"><path className={draw ? \"mgs-tick\" : undefined} pathLength={kind === \"check\" ? 1 : undefined} d={paths[kind]} /></svg>;\n}\n\nasync function copyText(text: string) {\n  // Synchronous selection also works in embedded previews without Clipboard API permission.\n  const previous = document.activeElement as HTMLElement | null;\n  const textarea = document.createElement(\"textarea\");\n  textarea.value = text;\n  textarea.readOnly = true;\n  Object.assign(textarea.style, { position: \"fixed\", top: \"0\", left: \"0\", opacity: \"0\", pointerEvents: \"none\" });\n  document.body.append(textarea);\n  textarea.select();\n  let copied = false;\n  try { copied = document.execCommand(\"copy\"); } catch { /* Try the modern API below. */ }\n  textarea.remove();\n  previous?.focus({ preventScroll: true });\n  if (copied) return true;\n  try { await navigator.clipboard.writeText(text); return true; } catch { return false; }\n}\n\nexport function LiquidGlassSheet({ title = \"Autumn forest\", subtitle = \"Liquid glass sheet\", backgroundImage = FOREST_IMAGE, link = DEFAULT_LINK, linkLabel = \"liquid-glass-react-studio\", defaultOpen = true, onOpenChange, onSaveChange, onShare, theme = \"light\", className = \"\", style }: LiquidGlassSheetProps = {}) {\n  const [open, setOpen] = React.useState(defaultOpen);\n  const [mounted, setMounted] = React.useState(defaultOpen);\n  const [saved, setSaved] = React.useState(false);\n  const [status, setStatus] = React.useState<\"idle\" | \"copied\" | \"failed\">(\"idle\");\n  const [touched, setTouched] = React.useState(false);\n  const [highlight, setHighlight] = React.useState<number | null>(null);\n  const [drag, setDrag] = React.useState(0);\n  const [dragging, setDragging] = React.useState(false);\n  const [closing, setClosing] = React.useState(false);\n  const trigger = React.useRef<HTMLButtonElement>(null);\n  const list = React.useRef<HTMLDivElement>(null);\n  const dragStart = React.useRef<number | null>(null);\n  const dragOffset = React.useRef(0);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const closeTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const frames = React.useRef<number[]>([]);\n  const attempt = React.useRef(0);\n  const id = `mgs-${React.useId().replace(/:/g, \"\")}`;\n  const wasOpened = React.useRef(false);\n  React.useEffect(() => {\n    if (open && wasOpened.current) list.current?.querySelector<HTMLButtonElement>(\"button\")?.focus({ preventScroll: true });\n    wasOpened.current = true;\n  }, [open]);\n  React.useEffect(() => () => { clearTimeout(timer.current); clearTimeout(closeTimer.current); frames.current.forEach(cancelAnimationFrame); attempt.current++; }, []);\n  function changeOpen(next: boolean) {\n    if (next === open) return;\n    clearTimeout(closeTimer.current);\n    if (next) { setMounted(true); setClosing(false); }\n    else { setClosing(true); setHighlight(null); closeTimer.current = setTimeout(() => { setMounted(false); setClosing(false); }, 350); }\n    setOpen(next); setDrag(0); dragOffset.current = 0; dragStart.current = null; setDragging(false);\n    onOpenChange?.(next);\n    if (!next) requestAnimationFrame(() => trigger.current?.focus({ preventScroll: true }));\n  }\n  async function copy() {\n    const current = ++attempt.current;\n    clearTimeout(timer.current);\n    frames.current.forEach(cancelAnimationFrame);\n    const copied = await copyText(link);\n    if (current !== attempt.current) return;\n    setTouched(true); setStatus(\"idle\");\n    frames.current = [requestAnimationFrame(() => {\n      frames.current.push(requestAnimationFrame(() => {\n        if (current !== attempt.current) return;\n        setStatus(copied ? \"copied\" : \"failed\");\n        timer.current = setTimeout(() => setStatus(\"idle\"), copied ? 1800 : 1400);\n      }));\n    })];\n  }\n  function keys(event: React.KeyboardEvent<HTMLElement>) {\n    if (!open) return;\n    if (event.key === \"Escape\") { event.preventDefault(); changeOpen(false); return; }\n    if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n    const buttons = Array.from(list.current?.querySelectorAll<HTMLButtonElement>(\"button\") ?? []);\n    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    event.preventDefault();\n    buttons[(index + (event.key === \"ArrowDown\" ? 1 : -1) + buttons.length) % buttons.length]?.focus();\n  }\n  function endDrag(cancelled = false) {\n    if (dragStart.current === null) return;\n    dragStart.current = null; setDragging(false);\n    if (!cancelled && dragOffset.current > 90) changeOpen(false);\n    dragOffset.current = 0; setDrag(0);\n  }\n  const copied = status === \"copied\", failed = status === \"failed\";\n  const filterStyle = { \"--mgs-pane-filter\": `url(#${id}-pane)`, \"--mgs-trigger-filter\": `url(#${id}-trigger)` } as React.CSSProperties;\n  return <section className={`mova-glass-sheet${open ? \" is-open\" : \"\"} ${className}`} data-theme={theme} onKeyDown={keys} style={{ ...filterStyle, backgroundImage: `url(${JSON.stringify(backgroundImage)})`, ...style }} aria-label={title}>\n    <style>{css}</style>\n    <GlassMaterial id={`${id}-pane`} width={304} height={244} radius={28} depth={30} refraction={78} dispersion={42} liquidity={6} />\n    <GlassMaterial id={`${id}-trigger`} width={132} height={44} radius={22} depth={26} refraction={60} dispersion={30} liquidity={4} />\n    <div className={`mgs-scrim mgs-t-modal${open ? \" is-open\" : \"\"}${closing ? \" is-closing\" : \"\"}`} onClick={() => changeOpen(false)} aria-hidden=\"true\" />\n    <button type=\"button\" className=\"mgs-trigger\" ref={trigger} aria-label=\"Open sheet\" aria-expanded={open} aria-controls={`${id}-sheet`} aria-hidden={open} tabIndex={open ? -1 : 0} onClick={() => changeOpen(true)}><span>Open sheet</span></button>\n    <div className={`mgs-sheet${dragging ? \" is-dragging\" : \"\"}`} role=\"dialog\" aria-labelledby={`${id}-title`} aria-hidden={!open} inert={!open} id={`${id}-sheet`} style={{ \"--drag\": `${drag}px` } as React.CSSProperties}>\n      <div className=\"mgs-glass\" data-open={open} />\n      <div className=\"mgs-t-panel-slide mgs-panel\" data-open={open}>\n        {mounted && <div className=\"mgs-body\">\n          <button type=\"button\" className=\"mgs-grab\" aria-label=\"Drag down to close\" onPointerDown={event => { event.currentTarget.setPointerCapture(event.pointerId); dragStart.current = event.clientY; setDragging(true); }} onPointerMove={event => {\n            if (dragStart.current === null) return;\n            const delta = event.clientY - dragStart.current;\n            dragOffset.current = delta >= 0 ? delta : -Math.pow(-delta, .6) * 2;\n            setDrag(dragOffset.current);\n          }} onPointerUp={() => endDrag()} onPointerCancel={() => endDrag(true)} onClick={event => { if (event.detail === 0) changeOpen(false); }}><span /></button>\n          <header className=\"mgs-head\"><h2 id={`${id}-title`} className=\"mgs-title\">{title}</h2><p className=\"mgs-meta\">{subtitle}</p></header>\n          <div className=\"mgs-list\" ref={list} onMouseLeave={() => setHighlight(null)}>\n            <span className=\"mgs-hl\" style={{ transform: `translateY(${(highlight ?? 0) * 44}px)`, opacity: highlight === null ? 0 : 1 }} />\n            <button type=\"button\" className=\"mgs-row\" onMouseEnter={() => setHighlight(0)} onFocus={() => setHighlight(0)} onBlur={() => setHighlight(null)} onClick={() => { onShare?.(); changeOpen(false); }}><Icon kind=\"share\" /><span className=\"mgs-label\">Share</span></button>\n            <button type=\"button\" className={`mgs-row${saved ? \" mgs-saved\" : \"\"}`} aria-pressed={saved} onMouseEnter={() => setHighlight(1)} onFocus={() => setHighlight(1)} onBlur={() => setHighlight(null)} onClick={() => { setSaved(!saved); onSaveChange?.(!saved); }}><span className=\"mgs-slot\"><Icon kind=\"save\" className=\"mgs-icon-a\" /><Icon kind=\"check\" className=\"mgs-icon-b\" strokeWidth={3} /></span><span className=\"mgs-label\">{saved ? \"Saved\" : \"Save\"}</span></button>\n            <div className={`mgs-linkrow${copied ? \" is-copied\" : \"\"}${failed ? \" is-failed\" : \"\"}`} onMouseEnter={() => setHighlight(2)} onFocus={() => setHighlight(2)} onBlur={() => setHighlight(null)}>\n              <button type=\"button\" className=\"mgs-row mgs-linkmain\" aria-label={copied ? \"Link copied\" : failed ? \"Copy blocked\" : \"Copy link\"} onClick={() => void copy()}><span className=\"mgs-slot\"><Icon kind=\"globe\" className=\"mgs-icon-a\" /><Icon kind=\"check\" className=\"mgs-icon-b\" strokeWidth={3} draw /></span><span key={status} className={`mgs-label${touched ? \" mgs-label-anim\" : \"\"}`}>{copied ? \"Link copied\" : failed ? \"Copy blocked\" : linkLabel}</span></button>\n              <button type=\"button\" className=\"mgs-copy\" aria-label=\"Copy link\" onClick={() => void copy()}><Icon kind=\"copy\" /></button>\n            </div>\n          </div>\n        </div>}\n      </div>\n    </div>\n    <span className=\"mgs-status\" role=\"status\" aria-live=\"polite\">{copied ? \"Link copied\" : failed ? \"Copy blocked\" : \"\"}</span>\n  </section>;\n}\n\nconst css = `\n.mova-glass-sheet{\n  --panel-open-dur: 400ms;\n  --panel-close-dur: 350ms;\n  --panel-translate-y: 100px;\n  --panel-blur: 2px;\n  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --modal-open-dur: 250ms;\n  --modal-close-dur: 150ms;\n  --modal-scale: 0.96;\n  --modal-scale-close: 0.96;\n  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --scrim-dur:150ms;\n  --hl-dur:250ms;\n  --hl-ease:cubic-bezier(0.22,1,0.36,1);\n  --icon-dur:250ms;\n  --press-scale:0.97;\n  --press-dur:150ms;\n  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);\n  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);\n  --mgs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --mgs-ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);\n  --mgs-press: 160ms;\n}\n\n.mova-glass-sheet{position:relative;box-sizing:border-box;width:320px;max-width:100%;height:360px;font:400 13px/20px Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;border-radius:24px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 8px 32px -4px rgba(0,0,0,.06),0 1px 3px 0 rgba(0,0,0,.04);color:#fff}\n.mova-glass-sheet :is(button,a){font:inherit;color:inherit;text-decoration:none}\n.mova-glass-sheet :where(button){border:0;background:none;padding:0;cursor:pointer}\n.mgs-scrim{position:absolute;inset:0;background:rgba(0,0,0,.28)}\n\n/* ───────── Compact iOS 26 glass trigger (44px full-round capsule) ───────── */\n.mova-glass-sheet .mgs-trigger{\n  position:absolute;\n  left:50%;\n  bottom:28px;\n  translate:-50% 0;\n  isolation:isolate;\n  overflow:hidden;\n  box-sizing:border-box;\n  width:auto;\n  height:44px;\n  padding:0 22px;\n  border-radius:999px;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  white-space:nowrap;\n  color:#fff;\n  font-size:15px;\n  line-height:20px;\n  font-weight:600;\n  letter-spacing:-0.01em;\n  text-shadow:0 1px 2px rgb(0 0 0 / 0.25);\n  background:rgb(255 255 255 / 0.10);\n  -webkit-backdrop-filter:var(--mgs-trigger-filter) blur(2px) saturate(170%);\n  backdrop-filter:var(--mgs-trigger-filter) blur(2px) saturate(170%);\n  box-shadow:\n    inset 1.5px 1.5px 0.5px -0.5px rgb(255 255 255 / 0.12),\n    inset -1px -1px 0.5px -0.5px rgb(255 255 255 / 0.04),\n    inset 0 0 0 1px rgb(255 255 255 / 0.18),\n    0 0 0 0.5px rgb(255 255 255 / 0.22),\n    0 8px 24px rgb(0 0 0 / 0.18);\n  transition:\n    transform 380ms var(--ease-spring),\n    box-shadow var(--mgs-press) var(--mgs-ease-out),\n    opacity var(--scrim-dur) var(--ease-smooth-out);\n}\n.mgs-trigger::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  z-index:-1;\n  border-radius:inherit;\n  pointer-events:none;\n  background:radial-gradient(70% 55% at 69.8% 30.2%, rgb(255 255 255 / 0.035) 0%, transparent 46%);\n  mix-blend-mode:plus-lighter;\n  opacity:0;\n  transition:opacity 240ms var(--mgs-ease-out);\n}\n.mgs-trigger:hover::before{opacity:1}\n.mgs-trigger::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  z-index:-1;\n  border-radius:inherit;\n  pointer-events:none;\n  background:radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.48) 22%, rgb(255 255 255 / 0.1) 48%, transparent 65%);\n  mix-blend-mode:plus-lighter;\n  opacity:0;\n  transform:scale(0.65);\n  transition:opacity var(--mgs-press) var(--mgs-ease-out), transform var(--mgs-press) var(--mgs-ease-out);\n}\n.mgs-trigger:active{transform:scale(0.94)}\n.mgs-trigger:active::before{opacity:1}\n.mgs-trigger:active::after{opacity:0.110;transform:scale(1)}\n.mova-glass-sheet.is-open .mgs-trigger{opacity:0;pointer-events:none}\n\n@supports not (backdrop-filter: url(#mgs-filter)){\n  .mova-glass-sheet .mgs-trigger{\n    -webkit-backdrop-filter:blur(25px) saturate(160%) brightness(1.06);\n    backdrop-filter:blur(25px) saturate(160%) brightness(1.06);\n    background:linear-gradient(145deg, rgb(255 255 255 / 0.015) 0%, rgb(255 255 255 / 0.004) 45%, rgb(255 255 255 / 0.096) 100%);\n    box-shadow:\n      inset 2px 2px 1px -0.5px rgb(255 255 255 / 0.066),\n      inset -1.5px -1.5px 1px -0.5px rgb(255 255 255 / 0.025),\n      inset 0 0 0 1.2px rgb(255 255 255 / 0.224),\n      0 20px 48px rgb(0 0 0 / 0.24);\n  }\n  .mgs-trigger::before{opacity:0.75}\n}\n@media (prefers-reduced-transparency: reduce){\n  .mova-glass-sheet .mgs-trigger{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(255 255 255 / 0.88);color:#111;text-shadow:none}\n}\n\n/* ───────── Sheet ───────── */\n.mgs-sheet{position:absolute;left:8px;right:8px;bottom:8px;height:244px;border-radius:28px;transform:translateY(var(--drag,0px));transition:transform var(--panel-open-dur) var(--panel-ease);touch-action:none;pointer-events:none}\n.mova-glass-sheet.is-open .mgs-sheet{pointer-events:auto}\n.mgs-panel{position:absolute;inset:0}\n.mgs-sheet.is-dragging{transition:none!important}\n\n/* ───────── REAL LIQUID GLASS MATERIAL ───────── */\n.mgs-glass{\n  position:absolute;\n  inset:0;\n  isolation:isolate;\n  overflow:hidden;\n  border-radius:28px;\n  corner-shape:squircle;\n  pointer-events:none;\n  background:rgb(255 255 255 / 0.080);\n  -webkit-backdrop-filter:var(--mgs-pane-filter) blur(3px) saturate(160%);\n  backdrop-filter:var(--mgs-pane-filter) blur(3px) saturate(160%);\n  box-shadow:\n    inset 1.5px 1.5px 0.5px -0.5px rgb(255 255 255 / 0.055),\n    inset -1px -1px 0.5px -0.5px rgb(255 255 255 / 0.018),\n    inset 0 0 0 1.2px rgb(255 255 255 / 0.140),\n    0 0 0 0.5px rgb(255 255 255 / 0.22),\n    0 18px 40px rgb(0 0 0 / 0.2);\n  transform:translateY(var(--panel-translate-y));\n  opacity:0;\n  transition:\n    transform var(--panel-close-dur) var(--panel-ease),\n    opacity var(--panel-close-dur) var(--panel-ease),\n    box-shadow var(--mgs-press) var(--mgs-ease-out);\n}\n.mgs-glass[data-open=\"true\"]{\n  transform:none;\n  opacity:1;\n  transition:\n    transform var(--panel-open-dur) var(--panel-ease),\n    opacity var(--panel-open-dur) var(--panel-ease),\n    box-shadow var(--mgs-press) var(--mgs-ease-out);\n}\n.mgs-glass::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  z-index:-1;\n  border-radius:inherit;\n  pointer-events:none;\n  background:radial-gradient(70% 55% at 69.8% 30.2%, rgb(255 255 255 / 0.035) 0%, transparent 46%);\n  mix-blend-mode:plus-lighter;\n  opacity:0;\n  transition:opacity 240ms var(--mgs-ease-out);\n}\n.mgs-sheet:hover .mgs-glass::before{opacity:1}\n.mgs-glass::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  z-index:-1;\n  border-radius:inherit;\n  pointer-events:none;\n  background:radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.48) 22%, rgb(255 255 255 / 0.1) 48%, transparent 65%);\n  mix-blend-mode:plus-lighter;\n  opacity:0;\n  transform:scale(0.65);\n  transition:opacity var(--mgs-press) var(--mgs-ease-out), transform var(--mgs-press) var(--mgs-ease-out);\n}\n.mgs-sheet:active .mgs-glass::before{opacity:1}\n.mgs-sheet:active .mgs-glass::after{opacity:0.110;transform:scale(1)}\n\n@supports not (backdrop-filter: url(#mgs-filter)){\n  .mgs-glass{\n    -webkit-backdrop-filter:blur(25px) saturate(160%) brightness(1.06);\n    backdrop-filter:blur(25px) saturate(160%) brightness(1.06);\n    background:linear-gradient(145deg, rgb(255 255 255 / 0.015) 0%, rgb(255 255 255 / 0.004) 45%, rgb(255 255 255 / 0.096) 100%);\n    box-shadow:\n      inset 2px 2px 1px -0.5px rgb(255 255 255 / 0.066),\n      inset -1.5px -1.5px 1px -0.5px rgb(255 255 255 / 0.025),\n      inset 0 0 0 1.2px rgb(255 255 255 / 0.224),\n      0 20px 48px rgb(0 0 0 / 0.24);\n  }\n  .mgs-glass::before{opacity:0.75}\n}\n@media (prefers-reduced-transparency: reduce){\n  .mgs-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(255 255 255 / 0.88)}\n}\n\n/* ───────── Body / grabber / header ───────── */\n.mgs-body{position:relative;padding:0 8px 8px}\n.mgs-grab{display:flex;justify-content:center;width:100%;height:24px;align-items:center;cursor:grab;touch-action:none}\n.mgs-grab:is(:active,.is-pressed){cursor:grabbing}\n.mgs-grab span{width:36px;height:5px;border-radius:5px;background:rgba(255,255,255,.7)}\n.mgs-head{padding:0 12px 8px}\n.mgs-title{margin:0;font-size:16px;line-height:22px;font-weight:500}\n.mgs-meta{margin:0;font-size:12px;line-height:16px;color:rgba(255,255,255,.85)}\n\n/* ───────── List / rows / highlight ───────── */\n.mgs-list{position:relative;display:flex;flex-direction:column;margin-top:4px}\n.mgs-hl{position:absolute;left:0;right:0;top:0;height:44px;border-radius:16px;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:0;transition:transform var(--hl-dur) var(--hl-ease),opacity var(--hl-dur) var(--hl-ease);pointer-events:none}\n.mgs-row{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 10px;border-radius:16px;font-size:13px;line-height:20px;text-align:left;width:100%;outline:none}\n.mgs-row .mgs-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.mgs-row:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.9)}\n.mgs-row .mgs-icon{flex:none}\n.mgs-slot{position:relative;width:16px;height:16px;flex:none}\n.mgs-slot .mgs-icon{position:absolute;inset:0;transition:opacity var(--icon-dur) ease-in-out,transform var(--icon-dur) ease-in-out,filter var(--icon-dur) ease-in-out}\n.mgs-slot .mgs-icon-b{opacity:0;transform:scale(.25);filter:blur(2px)}\n.mgs-saved .mgs-slot .mgs-icon-a{opacity:0;transform:scale(.25);filter:blur(2px)}\n.mgs-saved .mgs-slot .mgs-icon-b{opacity:1;transform:scale(1);filter:blur(0)}\n\n/* ───────── Link row ───────── */\n.mgs-linkrow{position:relative;display:flex;align-items:center;height:44px;border-radius:16px}\n.mgs-linkrow .mgs-row{flex:1;min-width:0;width:auto;padding-right:6px}\n\n/* the link itself: soft flash when copied, shake when blocked */\n.mgs-linkmain{cursor:pointer;transition:transform 380ms var(--ease-spring)}\n.mgs-linkmain:active{transform:scale(var(--press-scale))}\n.mgs-linkrow.is-copied .mgs-linkmain{animation:mgs-row-flash 700ms var(--mgs-ease-out)}\n.mgs-linkrow.is-failed .mgs-linkmain{animation:mgs-copy-shake 420ms var(--mgs-ease-out)}\n\n/* link icon: globe -> drawn checkmark */\n.mgs-linkrow.is-copied .mgs-linkmain .mgs-slot .mgs-icon-a{opacity:0;transform:scale(.25) rotate(-25deg);filter:blur(2px)}\n.mgs-linkrow.is-copied .mgs-linkmain .mgs-slot .mgs-icon-b{opacity:1;transform:scale(1);filter:blur(0)}\n.mgs-tick{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 380ms var(--mgs-ease-out)}\n.mgs-linkrow.is-copied .mgs-linkmain .mgs-tick{stroke-dashoffset:0;transition-delay:140ms}\n\n/* corner copy icon: static, no copied/failed animation */\n.mgs-linkrow .mgs-copy{\n  position:relative;\n  display:grid;\n  place-items:center;\n  flex:none;\n  width:32px;\n  height:32px;\n  margin-right:6px;\n  border-radius:11px;\n  corner-shape:squircle;\n  outline:none;\n  color:rgba(255,255,255,.85);\n  background:transparent;\n}\n@media (hover: hover) and (pointer: fine){\n  .mgs-linkrow .mgs-copy:hover{background:rgba(255,255,255,.18);color:#fff}\n}\n.mgs-linkrow .mgs-copy:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.9)}\n\n/* label swaps with a soft blur-in */\n.mgs-label-anim{animation:mgs-label-in 320ms var(--mgs-ease-out)}\n\n@keyframes mgs-copy-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}\n@keyframes mgs-label-in{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}\n@keyframes mgs-row-flash{0%{background:rgba(255,255,255,.26)}100%{background:rgba(255,255,255,0)}}\n\n/* ───────── Motion helpers ───────── */\n.mgs-t-panel-slide{transform:translateY(var(--panel-translate-y));opacity:0;filter:blur(var(--panel-blur));pointer-events:none;transition:transform var(--panel-close-dur) var(--panel-ease),opacity var(--panel-close-dur) var(--panel-ease),filter var(--panel-close-dur) var(--panel-ease)}\n.mgs-t-panel-slide[data-open=\"true\"]{transform:translateY(0);opacity:1;filter:none;pointer-events:auto;transition:transform var(--panel-open-dur) var(--panel-ease),opacity var(--panel-open-dur) var(--panel-ease),filter var(--panel-open-dur) var(--panel-ease)}\n.mgs-t-modal{transform-origin:center;transform:scale(var(--modal-scale));opacity:0;pointer-events:none;transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease)}\n.mgs-t-modal.is-open{transform:scale(1);opacity:1;pointer-events:auto}\n.mgs-t-modal.is-closing{transform:scale(var(--modal-scale-close));opacity:0;pointer-events:none;transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease)}\n@media (prefers-reduced-motion:reduce){\n  .mgs-sheet,.mgs-t-panel-slide,.mgs-t-modal,.mgs-hl,.mgs-scrim,.mgs-trigger,.mgs-trigger::before,.mgs-trigger::after,.mgs-slot .mgs-icon,.mgs-glass,.mgs-glass::before,.mgs-glass::after,.mgs-linkmain,.mgs-tick{transition:none!important}\n  .mgs-label-anim,.mgs-linkrow.is-copied .mgs-linkmain,.mgs-linkrow.is-failed .mgs-linkmain{animation:none!important}\n}\n\n.mgs-icon-play{translate:1px 0}.mgs-icon-heart{translate:0 1px}\n\n.mova-glass-sheet :where(button,[role=\"button\"],[role=\"tab\"],[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"option\"],[role=\"switch\"],summary,.t-pressable){-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}\n\n.mova-glass-sheet *{box-sizing:border-box}.mgs-trigger:focus-visible,.mgs-grab:focus-visible{outline:2px solid #fff;outline-offset:-3px}.mgs-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n`;\n"
 }

package/registry/mac-terminal.json

@@ -1,7 +1,7 @@
 {
   "id": "mac-terminal",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "mac-terminal.tsx",
   "sourcePath": "ui/loading/mac-terminal.tsx",
   "registryFile": "mac-terminal.json",

package/registry/magnetic-button.json

@@ -1,7 +1,7 @@
 {
   "id": "magnetic-button",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "magnetic-button.tsx",
   "sourcePath": "ui/hover/magnetic-button.tsx",
   "registryFile": "magnetic-button.json",

package/registry/magnetic-disks.json

@@ -1,7 +1,7 @@
 {
   "id": "magnetic-disks",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "magnetic-disks.tsx",
   "sourcePath": "components/css-animations/whimsical/WhimsicalVariations.tsx",
   "registryFile": "magnetic-disks.json",

package/registry/magnetic-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "magnetic-dots",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "magnetic-dots.tsx",
   "sourcePath": "ui/loading/magnetic-dots.tsx",
   "registryFile": "magnetic-dots.json",

package/registry/magnetic-slide-btn.json

@@ -1,7 +1,7 @@
 {
   "id": "magnetic-slide-btn",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "file": "magnetic-slide-btn.tsx",
   "sourcePath": "components/css-animations/yui-components/UiKitTrios.tsx",
   "registryFile": "magnetic-slide-btn.json",