@mova-ui/react 0.4.6 → 0.4.7

package/registry/gradient-shimmer.json

@@ -1,7 +1,7 @@
 {
   "id": "gradient-shimmer",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "file": "hover-scale-word.tsx",
   "registryFile": "hover-scale-word.json",
   "exports": [

package/registry/imessage-chat.json

@@ -0,0 +1,19 @@
+{
+  "id": "imessage-chat",
+  "tier": "free",
+  "version": "0.4.7",
+  "file": "imessage-chat.tsx",
+  "sourcePath": "ui/cards/imessage-chat.tsx",
+  "registryFile": "imessage-chat.json",
+  "exports": [
+    "IMessageChat",
+    "IMessageChatMessage",
+    "IMessageChatProps"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "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"
+}

package/registry/inertia-skid-stop.json

@@ -1,7 +1,7 @@
 {
   "id": "inertia-skid-stop",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "file": "liquid-dots.tsx",
   "sourcePath": "ui/loading/liquid-dots.tsx",
   "registryFile": "liquid-dots.json",

package/registry/liquid-glass-sheet.json

@@ -0,0 +1,18 @@
+{
+  "id": "liquid-glass-sheet",
+  "tier": "free",
+  "version": "0.4.7",
+  "file": "liquid-glass-sheet.tsx",
+  "sourcePath": "ui/cards/liquid-glass-sheet.tsx",
+  "registryFile": "liquid-glass-sheet.json",
+  "exports": [
+    "LiquidGlassSheet",
+    "LiquidGlassSheetProps"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "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"
+}

package/registry/mac-terminal.json

@@ -1,7 +1,7 @@
 {
   "id": "mac-terminal",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "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.6",
+  "version": "0.4.7",
   "file": "magnetic-slide-btn.tsx",
   "sourcePath": "components/css-animations/yui-components/UiKitTrios.tsx",
   "registryFile": "magnetic-slide-btn.json",