motion-brew 0.1.0 → 0.1.1

package/dist/bill-list.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   BillList
-} from "./chunk-W46CBUFX.js";
+} from "./chunk-KE563QS4.js";
 import "./chunk-PKM6B4JJ.js";
 import "./chunk-OS6REIBR.js";
 import "./chunk-2QCWELWT.js";

package/dist/{chunk-HJINEW5T.js → chunk-COKBF5PG.js}

@@ -2373,7 +2373,7 @@ var MessageComposer = React.forwardRef(function MessageComposer2({
       initial: still ? false : { opacity: 0, y: 18, filter: "blur(8px)" },
       animate: appear ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
       transition: { duration: 0.6, ease: GLIDE },
-      className: cn("relative w-[600px] max-w-full text-[#242423]", className),
+      className: cn("@container relative w-[600px] max-w-full text-[#242423]", className),
       children: [
         /* @__PURE__ */ jsxs6(
           motion7.div,
@@ -2402,7 +2402,7 @@ var MessageComposer = React.forwardRef(function MessageComposer2({
                       role: "toolbar",
                       "aria-label": "Formatting",
                       ...enter(0.08),
-                      className: "mb-1 flex flex-wrap items-center gap-0.5 rounded-[18px] bg-[#f1f1ef] p-1",
+                      className: "mb-1 flex items-center gap-0.5 rounded-[18px] bg-[#f1f1ef] p-1",
                       children: [
                         /* @__PURE__ */ jsxs6("div", { className: "relative", "data-pop": `${id}-style`, children: [
                           /* @__PURE__ */ jsxs6(
@@ -2499,88 +2499,90 @@ var MessageComposer = React.forwardRef(function MessageComposer2({
                             }
                           ) })
                         ] }),
-                        divider,
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Bold",
-                            toggle: true,
-                            on: format.bold,
-                            still,
-                            onClick: () => exec("bold"),
-                            children: /* @__PURE__ */ jsx7(BoldIcon, { className: "size-4", strokeWidth: 2.5 })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Italic",
-                            toggle: true,
-                            on: format.italic,
-                            still,
-                            onClick: () => exec("italic"),
-                            children: /* @__PURE__ */ jsx7(ItalicIcon, { className: "size-4", strokeWidth: 2.25 })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Underline",
-                            toggle: true,
-                            on: format.underline,
-                            still,
-                            onClick: () => exec("underline"),
-                            children: /* @__PURE__ */ jsx7(UnderlineIcon, { className: "size-4", strokeWidth: 2.25 })
-                          }
-                        ),
-                        divider,
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Bulleted list",
-                            toggle: true,
-                            on: format.ul,
-                            still,
-                            onClick: () => lines((ed) => toggleList(ed, "ul")),
-                            children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(List, { className: "size-4", strokeWidth: 2.25 }) })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Numbered list",
-                            toggle: true,
-                            on: format.ol,
-                            still,
-                            onClick: () => lines((ed) => toggleList(ed, "ol")),
-                            children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(ListOrdered, { className: "size-4", strokeWidth: 2.25 }) })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Quote",
-                            toggle: true,
-                            on: format.quote,
-                            still,
-                            onClick: () => lines(
-                              (ed) => setBlock(ed, format.quote ? "p" : "blockquote")
-                            ),
-                            children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(TextQuote, { className: "size-4", strokeWidth: 2.25 }) })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx7(
-                          Tool,
-                          {
-                            label: "Code block",
-                            toggle: true,
-                            on: format.code,
-                            still,
-                            onClick: () => lines((ed) => setBlock(ed, format.code ? "p" : "pre")),
-                            children: /* @__PURE__ */ jsx7(TerminalIcon, { className: "size-4", strokeWidth: 2.25 })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx7("span", { className: "flex-1" }),
+                        /* @__PURE__ */ jsxs6("div", { className: "-my-1 flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden @max-[34rem]:[mask-image:linear-gradient(to_right,black_80%,transparent)]", children: [
+                          divider,
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Bold",
+                              toggle: true,
+                              on: format.bold,
+                              still,
+                              onClick: () => exec("bold"),
+                              children: /* @__PURE__ */ jsx7(BoldIcon, { className: "size-4", strokeWidth: 2.5 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Italic",
+                              toggle: true,
+                              on: format.italic,
+                              still,
+                              onClick: () => exec("italic"),
+                              children: /* @__PURE__ */ jsx7(ItalicIcon, { className: "size-4", strokeWidth: 2.25 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Underline",
+                              toggle: true,
+                              on: format.underline,
+                              still,
+                              onClick: () => exec("underline"),
+                              children: /* @__PURE__ */ jsx7(UnderlineIcon, { className: "size-4", strokeWidth: 2.25 })
+                            }
+                          ),
+                          divider,
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Bulleted list",
+                              toggle: true,
+                              on: format.ul,
+                              still,
+                              onClick: () => lines((ed) => toggleList(ed, "ul")),
+                              children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(List, { className: "size-4", strokeWidth: 2.25 }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Numbered list",
+                              toggle: true,
+                              on: format.ol,
+                              still,
+                              onClick: () => lines((ed) => toggleList(ed, "ol")),
+                              children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(ListOrdered, { className: "size-4", strokeWidth: 2.25 }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Quote",
+                              toggle: true,
+                              on: format.quote,
+                              still,
+                              onClick: () => lines(
+                                (ed) => setBlock(ed, format.quote ? "p" : "blockquote")
+                              ),
+                              children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(TextQuote, { className: "size-4", strokeWidth: 2.25 }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Code block",
+                              toggle: true,
+                              on: format.code,
+                              still,
+                              onClick: () => lines((ed) => setBlock(ed, format.code ? "p" : "pre")),
+                              children: /* @__PURE__ */ jsx7(TerminalIcon, { className: "size-4", strokeWidth: 2.25 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7("span", { className: "w-4 shrink-0 @min-[34rem]:hidden", "aria-hidden": true })
+                        ] }),
                         /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: (!empty || files.length > 0) && /* @__PURE__ */ jsx7(
                           motion7.span,
                           {

package/dist/{chunk-SZAHSOSQ.js → chunk-GYDTIVOY.js}

@@ -517,7 +517,7 @@ var PromptInput = React.forwardRef(
       }
     };
     const tool = "flex h-9 cursor-pointer items-center gap-1.5 rounded-full text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400";
-    return /* @__PURE__ */ jsxs2("div", { ref, className: cn("relative w-[560px] max-w-full", className), children: [
+    return /* @__PURE__ */ jsxs2("div", { ref, className: cn("@container relative w-[560px] max-w-full", className), children: [
       /* @__PURE__ */ jsx3(AnimatePresence, { children: working && !still && /* @__PURE__ */ jsxs2(
         motion3.div,
         {
@@ -810,15 +810,17 @@ var PromptInput = React.forwardRef(
                 {
                   type: "button",
                   "aria-pressed": web,
+                  "aria-label": "Web search",
                   onClick: () => setWeb((w) => !w),
                   className: cn(
                     tool,
-                    "px-3",
+                    // Icon only on a narrow card, so the send button stays inside.
+                    "w-9 justify-center @[28rem]:w-auto @[28rem]:px-3",
                     web ? "bg-[#242423] text-white dark:bg-white dark:text-zinc-900" : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-white/8"
                   ),
                   children: [
                     /* @__PURE__ */ jsx3(EarthIcon, { className: "size-4", strokeWidth: 2 }),
-                    "Search"
+                    /* @__PURE__ */ jsx3("span", { className: "hidden @[28rem]:inline", children: "Search" })
                   ]
                 }
               ),

package/dist/{chunk-W46CBUFX.js → chunk-KE563QS4.js}

@@ -338,7 +338,7 @@ var BillList = React.forwardRef(function BillList2({ title = "Coming up", bills:
               animate: shown ? { opacity: 1, scale: 1, filter: "blur(0px)" } : void 0,
               transition: { ...POP, opacity: { duration: 0.25, delay: HEAD_AT[2] }, filter: { duration: 0.3, delay: HEAD_AT[2] }, delay: HEAD_AT[2] },
               style: { transformOrigin: "right center" },
-              className: "relative shrink-0",
+              className: "relative z-20 shrink-0",
               onKeyDown: onMenuKey,
               children: [
                 /* @__PURE__ */ jsxs(

package/dist/{chunk-6FTC5OQF.js → chunk-PFEHD3A2.js}

@@ -8,9 +8,6 @@ import {
 import {
   BookmarkIcon
 } from "./chunk-VIR5NV5W.js";
-import {
-  CircleCheckIcon
-} from "./chunk-YU6B7YRO.js";
 import {
   UserPlusIcon
 } from "./chunk-SKEE23KW.js";
@@ -72,6 +69,34 @@ function Stat({ stat, value, run, still, delay }) {
     /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-zinc-500 dark:text-zinc-400", children: stat.label })
   ] });
 }
+var SEAL = (() => {
+  const pts = [];
+  for (let i = 0; i < 144; i++) {
+    const t = i / 144 * Math.PI * 2;
+    const r = 8.7 + 0.8 * Math.cos(12 * t);
+    pts.push(`${(10 + r * Math.cos(t)).toFixed(2)} ${(10 + r * Math.sin(t)).toFixed(2)}`);
+  }
+  return `M${pts.join("L")}Z`;
+})();
+function VerifiedBadge({ shown, still }) {
+  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": "Verified", className: "inline-grid size-[18px] shrink-0 place-items-center", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", className: "size-full", children: [
+    /* @__PURE__ */ jsx("path", { d: SEAL, fill: "#2563eb" }),
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        d: "M6.3 10.4 8.8 12.8 13.8 7.8",
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        initial: still ? false : { pathLength: 0 },
+        animate: shown ? { pathLength: 1 } : void 0,
+        transition: { duration: 0.35, delay: 0.6, ease: EASE }
+      }
+    )
+  ] }) });
+}
 var ProfileCard = React.forwardRef(function ProfileCard2({
   name = "Lena Hartmann",
   role = "Brand and motion designer",
@@ -243,7 +268,7 @@ var ProfileCard = React.forwardRef(function ProfileCard2({
           ),
           /* @__PURE__ */ jsxs(motion.div, { ...reveal(0), className: "mt-3 flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx("h3", { className: "truncate text-xl font-semibold tracking-tight", children: name }),
-            verified && /* @__PURE__ */ jsx("span", { className: "text-[#3b82f6]", "aria-label": "Verified", role: "img", children: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-[18px]", active: hover, strokeWidth: 2.25 }) })
+            verified && /* @__PURE__ */ jsx(VerifiedBadge, { shown, still })
           ] }),
           /* @__PURE__ */ jsxs(motion.p, { ...reveal(1), className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [
             /* @__PURE__ */ jsx("span", { children: role }),

package/dist/{chunk-SVK4MQMV.js → chunk-RWUARRFZ.js}

@@ -201,7 +201,7 @@ var DeployStreak = React.forwardRef(
                       /* @__PURE__ */ jsx(
                         motion.span,
                         {
-                          className: "size-full rounded-full",
+                          className: "absolute inset-0 rounded-full",
                           style: {
                             backgroundColor: done ? color : "rgba(36,36,35,0.08)"
                           },

package/dist/{chunk-5IAO5YQA.js → chunk-YLSWBUDC.js}

@@ -185,7 +185,7 @@ var PrivacyBanner = React.forwardRef(function PrivacyBanner2({
       animate: shown ? { opacity: 1, y: 0 } : void 0,
       transition: { ...SPRING, layout: still ? { duration: 0 } : SPRING },
       className: cn(
-        "w-[400px] max-w-full overflow-hidden rounded-3xl bg-white p-6 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        "@container w-[400px] max-w-full overflow-hidden rounded-3xl bg-white p-6 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
         className
       ),
       style: { borderRadius: 24 },
@@ -298,14 +298,14 @@ var PrivacyBanner = React.forwardRef(function PrivacyBanner2({
               },
               "panel"
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-2", children: [
               /* @__PURE__ */ jsx(
                 motion.button,
                 {
                   type: "button",
                   onClick: () => custom ? finish("save") : setCustom(true),
                   whileTap: still ? void 0 : { scale: 0.96 },
-                  className: "shrink-0 whitespace-nowrap relative h-10 cursor-pointer overflow-hidden rounded-full px-4 text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.05] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-100 dark:hover:bg-white/[0.06]",
+                  className: "order-last w-full shrink-0 whitespace-nowrap relative h-10 cursor-pointer overflow-hidden rounded-full px-4 text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.05] @[20rem]:order-none @[20rem]:w-auto focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-100 dark:hover:bg-white/[0.06]",
                   children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
                     motion.span,
                     {
@@ -320,14 +320,14 @@ var PrivacyBanner = React.forwardRef(function PrivacyBanner2({
                   ) })
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden flex-1 @[20rem]:block" }),
               /* @__PURE__ */ jsx(
                 motion.button,
                 {
                   type: "button",
                   onClick: () => finish("reject"),
                   whileTap: still ? void 0 : { scale: 0.96 },
-                  className: "shrink-0 whitespace-nowrap h-10 cursor-pointer rounded-full bg-[#242423]/[0.06] px-4 text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:text-zinc-100",
+                  className: "flex-1 shrink-0 whitespace-nowrap h-10 cursor-pointer rounded-full bg-[#242423]/[0.06] px-4 @[20rem]:flex-none text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:text-zinc-100",
                   children: "Reject all"
                 }
               ),
@@ -337,7 +337,7 @@ var PrivacyBanner = React.forwardRef(function PrivacyBanner2({
                   type: "button",
                   onClick: () => finish("accept"),
                   whileTap: still ? void 0 : { scale: 0.96 },
-                  className: "shrink-0 whitespace-nowrap group/accept flex h-10 cursor-pointer items-center gap-1.5 overflow-hidden rounded-full bg-[#242423] pl-4 pr-3.5 text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-zinc-100 dark:text-[#242423]",
+                  className: "flex-1 justify-center shrink-0 whitespace-nowrap group/accept flex h-10 cursor-pointer items-center gap-1.5 overflow-hidden rounded-full bg-[#242423] pl-4 pr-3.5 @[20rem]:flex-none text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-zinc-100 dark:text-[#242423]",
                   children: [
                     "Accept all",
                     /* @__PURE__ */ jsxs("span", { className: "relative size-4 overflow-hidden", children: [

package/dist/deploy-streak.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   DeployStreak
-} from "./chunk-SVK4MQMV.js";
+} from "./chunk-RWUARRFZ.js";
 import "./chunk-YVYYDPE2.js";
 import "./chunk-2TQSHVXA.js";
 export {

package/dist/index.js

@@ -97,10 +97,10 @@ import {
 } from "./chunk-DR4DUSNF.js";
 import {
   PrivacyBanner
-} from "./chunk-5IAO5YQA.js";
+} from "./chunk-YLSWBUDC.js";
 import {
   ProfileCard
-} from "./chunk-6FTC5OQF.js";
+} from "./chunk-PFEHD3A2.js";
 import {
   ProfileMenu
 } from "./chunk-3RKCLFY5.js";
@@ -112,7 +112,7 @@ import {
 } from "./chunk-USRMXCZD.js";
 import {
   PromptInput
-} from "./chunk-SZAHSOSQ.js";
+} from "./chunk-GYDTIVOY.js";
 import {
   OrbitCard
 } from "./chunk-TAFVHTWV.js";
@@ -147,7 +147,7 @@ import {
 } from "./chunk-HYSXVKZB.js";
 import {
   MessageComposer
-} from "./chunk-HJINEW5T.js";
+} from "./chunk-COKBF5PG.js";
 import "./chunk-LBRMNY72.js";
 import "./chunk-H2JOCJWM.js";
 import {
@@ -230,7 +230,7 @@ import {
 } from "./chunk-6WSY725U.js";
 import {
   DeployStreak
-} from "./chunk-SVK4MQMV.js";
+} from "./chunk-RWUARRFZ.js";
 import {
   DepthCarousel
 } from "./chunk-SBDTC4UY.js";
@@ -303,7 +303,7 @@ import {
 } from "./chunk-RP22J4NX.js";
 import {
   BillList
-} from "./chunk-W46CBUFX.js";
+} from "./chunk-KE563QS4.js";
 import "./chunk-PKM6B4JJ.js";
 import "./chunk-OS6REIBR.js";
 import "./chunk-2QCWELWT.js";

package/dist/message-composer.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   MessageComposer
-} from "./chunk-HJINEW5T.js";
+} from "./chunk-COKBF5PG.js";
 import "./chunk-LBRMNY72.js";
 import "./chunk-H2JOCJWM.js";
 import "./chunk-LNBTWX4J.js";

package/dist/privacy-banner.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   PrivacyBanner
-} from "./chunk-5IAO5YQA.js";
+} from "./chunk-YLSWBUDC.js";
 import "./chunk-2TQSHVXA.js";
 export {
   PrivacyBanner

package/dist/profile-card.js

@@ -1,11 +1,10 @@
 "use client";
 import {
   ProfileCard
-} from "./chunk-6FTC5OQF.js";
+} from "./chunk-PFEHD3A2.js";
 import "./chunk-EEQ2WHTN.js";
 import "./chunk-WFWO2EIW.js";
 import "./chunk-VIR5NV5W.js";
-import "./chunk-YU6B7YRO.js";
 import "./chunk-SKEE23KW.js";
 import "./chunk-JHT6RCGY.js";
 import "./chunk-2TQSHVXA.js";

package/dist/prompt-input.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   PromptInput
-} from "./chunk-SZAHSOSQ.js";
+} from "./chunk-GYDTIVOY.js";
 import "./chunk-H2JOCJWM.js";
 import "./chunk-2IMPUH4H.js";
 import "./chunk-7FQ4XU7E.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-brew",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Animated React components: spring physics, magnetic and tilt effects, GSAP timelines, WebGL and AI interface elements. Tailwind CSS v4.",
   "homepage": "https://motion-brew.com",
   "keywords": [