@mova-ui/react 0.4.7 → 0.4.8

package/registry/floating-diamonds.json

@@ -1,7 +1,7 @@
 {
   "id": "floating-diamonds",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "floating-diamonds.tsx",
   "sourcePath": "ui/loading/floating-diamonds.tsx",
   "registryFile": "floating-diamonds.json",

package/registry/floating-label-input.json

@@ -1,7 +1,7 @@
 {
   "id": "floating-label-input",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "floating-label-input.tsx",
   "registryFile": "floating-label-input.json",
   "exports": [

package/registry/fluid-bars.json

@@ -1,7 +1,7 @@
 {
   "id": "fluid-bars",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "fluid-bars.tsx",
   "sourcePath": "ui/loading/fluid-bars.tsx",
   "registryFile": "fluid-bars.json",

package/registry/fluid-diamond.json

@@ -1,7 +1,7 @@
 {
   "id": "fluid-diamond",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "fluid-diamond.tsx",
   "sourcePath": "ui/loading/fluid-diamond.tsx",
   "registryFile": "fluid-diamond.json",

package/registry/fluid-dot-orbit.json

@@ -1,7 +1,7 @@
 {
   "id": "fluid-dot-orbit",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "fluid-dot-orbit.tsx",
   "sourcePath": "ui/loading/fluid-dot-orbit.tsx",
   "registryFile": "fluid-dot-orbit.json",

package/registry/fluid-skeleton.json

@@ -1,7 +1,7 @@
 {
   "id": "fluid-skeleton",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "fluid-skeleton.tsx",
   "sourcePath": "ui/loading/fluid-skeleton.tsx",
   "registryFile": "fluid-skeleton.json",

package/registry/focus-blur.json

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

package/registry/form-submit-button.json

@@ -1,7 +1,7 @@
 {
   "id": "form-submit-button",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "form-submit-button.tsx",
   "registryFile": "form-submit-button.json",
   "exports": [

package/registry/french-doors-3d.json

@@ -1,7 +1,7 @@
 {
   "id": "french-doors-3d",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "french-doors-3d.tsx",
   "registryFile": "french-doors-3d.json",
   "exports": [

package/registry/gear-tooth-step.json

@@ -1,7 +1,7 @@
 {
   "id": "gear-tooth-step",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "gear-tooth-step.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
   "registryFile": "gear-tooth-step.json",

package/registry/gears.json

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

package/registry/gelatin-wobble.json

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

package/registry/geometric-iris-shutter.json

@@ -1,7 +1,7 @@
 {
   "id": "geometric-iris-shutter",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "geometric-iris-shutter.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "geometric-iris-shutter.json",

package/registry/glassmorphic-card.json

@@ -1,7 +1,7 @@
 {
   "id": "glassmorphic-card",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "glassmorphic-card.tsx",
   "sourcePath": "ui/loading/glassmorphic-card.tsx",
   "registryFile": "glassmorphic-card.json",

package/registry/glow-button.json

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

package/registry/glow-text.json

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

package/registry/gooey-popover.json

@@ -1,7 +1,7 @@
 {
   "id": "gooey-popover",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "gooey-popover.tsx",
   "sourcePath": "ui/patterns/gooey-popover.tsx",
   "registryFile": "gooey-popover.json",

package/registry/gradient-arc.json

@@ -1,7 +1,7 @@
 {
   "id": "gradient-arc",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "gradient-arc.tsx",
   "sourcePath": "ui/loading/gradient-arc.tsx",
   "registryFile": "gradient-arc.json",

package/registry/gradient-shimmer.json

@@ -1,7 +1,7 @@
 {
   "id": "gradient-shimmer",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "gradient-shimmer.tsx",
   "registryFile": "gradient-shimmer.json",
   "exports": [

package/registry/grid-dots.json

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

package/registry/haptic-ring.json

@@ -1,7 +1,7 @@
 {
   "id": "haptic-ring",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "haptic-ring.tsx",
   "sourcePath": "ui/loading/haptic-ring.tsx",
   "registryFile": "haptic-ring.json",

package/registry/heartbeat.json

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

package/registry/hex-lattice-draw.json

@@ -1,7 +1,7 @@
 {
   "id": "hex-lattice-draw",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "hex-lattice-draw.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "hex-lattice-draw.json",

package/registry/hexagon-spinner.json

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

package/registry/hourglass.json

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

package/registry/hover-lift-char.json

@@ -1,7 +1,7 @@
 {
   "id": "hover-lift-char",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "hover-lift-char.tsx",
   "registryFile": "hover-lift-char.json",
   "exports": [

package/registry/hover-lift-word.json

@@ -1,7 +1,7 @@
 {
   "id": "hover-lift-word",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "hover-lift-word.tsx",
   "registryFile": "hover-lift-word.json",
   "exports": [

package/registry/hover-link-card.json

@@ -1,7 +1,7 @@
 {
   "id": "hover-link-card",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "hover-link-card.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
   "registryFile": "hover-link-card.json",

package/registry/hover-scale-char.json

@@ -1,7 +1,7 @@
 {
   "id": "hover-scale-char",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "hover-scale-char.tsx",
   "registryFile": "hover-scale-char.json",
   "exports": [

package/registry/hover-scale-word.json

@@ -1,7 +1,7 @@
 {
   "id": "hover-scale-word",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "hover-scale-word.tsx",
   "registryFile": "hover-scale-word.json",
   "exports": [

package/registry/imessage-chat.json

@@ -1,7 +1,7 @@
 {
   "id": "imessage-chat",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "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.8",
   "file": "liquid-dots.tsx",
   "sourcePath": "ui/loading/liquid-dots.tsx",
   "registryFile": "liquid-dots.json",