composeai 0.1.3 → 0.1.4

package/dist/index.js

@@ -795,11 +795,11 @@ function EditorShell({
 }) {
   const { classNames, sx, dir } = useComposerContext();
   const isMarkdown = mode === "markdown";
-  const editorClass = multiline ? "composer-editor min-h-[44px] max-h-56 scrollbar-thin overflow-y-auto px-5 py-3.5" : "composer-editor composer-editor--inline h-9 overflow-x-auto overflow-y-hidden whitespace-nowrap px-2 leading-9";
+  const editorClass = multiline ? "composer-editor composer-editor--multiline" : "composer-editor composer-editor--inline";
   const editor = slotProps("editor", editorClass, classNames, sx);
   const editorResolved = resolveSx(sx?.editor);
   const placeholderBase = mirrorEditorPadding(editorResolved);
-  const placeholderClass = multiline ? "composer-placeholder pointer-events-none absolute inset-x-0 top-0 select-none px-5 py-3.5 text-[15px] leading-relaxed text-muted-foreground" : "composer-placeholder pointer-events-none absolute inset-y-0 inset-x-0 select-none px-2 text-[15px] leading-9 text-muted-foreground truncate";
+  const placeholderClass = multiline ? "composer-placeholder composer-placeholder--multiline" : "composer-placeholder composer-placeholder--inline";
   const placeholderProps = slotProps(
     "placeholder",
     placeholderClass,
@@ -813,9 +813,9 @@ function EditorShell({
     "div",
     {
       className: cn(
-        "composer-editor-block relative min-w-0",
+        "composer-editor-block",
         // Inline: the editor block is the flex child that fills the row.
-        !multiline && "flex-1"
+        !multiline && "composer-editor-block--inline"
       ),
       children: isMarkdown ? /* @__PURE__ */ jsx(
         RichTextPlugin,
@@ -837,10 +837,10 @@ function EditorShell({
   if (!multiline) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       header,
-      /* @__PURE__ */ jsxs("div", { className: "composer-inline-row flex items-center gap-1 px-2 py-1.5", children: [
-        toolbar && /* @__PURE__ */ jsx("div", { className: "composer-inline-toolbar flex shrink-0 items-center", children: toolbar }),
+      /* @__PURE__ */ jsxs("div", { className: "composer-inline-row", children: [
+        toolbar && /* @__PURE__ */ jsx("div", { className: "composer-inline-toolbar", children: toolbar }),
         editorBlock,
-        sendButton && /* @__PURE__ */ jsx("div", { className: "composer-inline-send flex shrink-0 items-center", children: sendButton })
+        sendButton && /* @__PURE__ */ jsx("div", { className: "composer-inline-send", children: sendButton })
       ] }),
       /* @__PURE__ */ jsx(HistoryPlugin, {})
     ] });
@@ -848,7 +848,7 @@ function EditorShell({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     header,
     editorBlock,
-    (toolbar || sendButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-2.5", children: [
+    (toolbar || sendButton) && /* @__PURE__ */ jsxs("div", { className: "composer-toolbar-row", children: [
       toolbar ?? /* @__PURE__ */ jsx("span", {}),
       sendButton
     ] }),
@@ -2342,14 +2342,15 @@ function ImageLightbox({ src, alt, onClose }) {
     {
       role: "dialog",
       "aria-modal": "true",
-      className: "fixed inset-0 z-50 flex items-center justify-center p-6",
+      "data-composer-scope": "",
+      className: "composer-lightbox",
       style: tokenStyle,
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             "aria-hidden": true,
-            className: "absolute inset-0 bg-foreground/70 backdrop-blur-sm",
+            className: "composer-lightbox-backdrop",
             onClick: onClose
           }
         ),
@@ -2359,18 +2360,11 @@ function ImageLightbox({ src, alt, onClose }) {
             type: "button",
             onClick: onClose,
             "aria-label": "Close",
-            className: "absolute end-5 top-5 flex h-9 w-9 items-center justify-center rounded-full bg-card text-foreground shadow-soft transition-colors hover:bg-accent",
-            children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" })
+            className: "composer-lightbox-close",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
           }
         ),
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src,
-            alt,
-            className: "relative max-h-[85vh] max-w-[85vw] rounded-lg object-contain shadow-xl"
-          }
-        )
+        /* @__PURE__ */ jsx("img", { src, alt, className: "composer-lightbox-img" })
       ]
     }
   ) });
@@ -2498,16 +2492,16 @@ function MermaidPlugin() {
   if (diagrams.length === 0) return null;
   const preview = slotProps(
     "mermaidPreview",
-    "border-t border-border/60 bg-muted/30 px-4 py-3",
+    "composer-mermaid",
     classNames,
     sx
   );
   return /* @__PURE__ */ jsxs("div", { ...preview, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(SparkleIcon, { className: "h-3 w-3" }),
+    /* @__PURE__ */ jsxs("div", { className: "composer-mermaid-head", children: [
+      /* @__PURE__ */ jsx(SparkleIcon, {}),
       "Diagram preview"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto scrollbar-thin", children: diagrams.map((d) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "composer-mermaid-row", children: diagrams.map((d) => /* @__PURE__ */ jsx(
       DiagramTile,
       {
         diagram: d,
@@ -2532,9 +2526,9 @@ function ConsumerTile({
     content = renderDiagram({ code: diagram.code, language: "mermaid" });
   } catch (err) {
     console.error("[composeai] renderDiagram threw", err);
-    content = /* @__PURE__ */ jsx("div", { className: "flex h-24 w-40 items-center justify-center px-2 text-center text-[10px] text-destructive", children: err instanceof Error ? err.message.slice(0, 80) : "Render failed" });
+    content = /* @__PURE__ */ jsx("div", { className: "composer-mermaid-msg composer-mermaid-msg--error", children: err instanceof Error ? err.message.slice(0, 80) : "Render failed" });
   }
-  return /* @__PURE__ */ jsx("div", { className: "shrink-0 overflow-hidden rounded-lg border border-border bg-card", children: content });
+  return /* @__PURE__ */ jsx("div", { className: "composer-mermaid-tile", children: content });
 }
 function MermaidTile({ diagram }) {
   const { icons } = useComposerContext();
@@ -2581,24 +2575,22 @@ function MermaidTile({ diagram }) {
         type: "button",
         onClick: () => svg && setZoom(true),
         "aria-label": "Zoom diagram",
-        className: "group/dia relative shrink-0 overflow-hidden rounded-lg border border-border bg-card transition-colors hover:border-primary/40",
+        className: "composer-mermaid-tile",
         children: svg ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "h-24 w-40 [&_svg]:h-full [&_svg]:w-full",
+              className: "composer-mermaid-svg",
               dangerouslySetInnerHTML: { __html: svg }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "absolute end-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-foreground/70 text-background opacity-0 transition-opacity group-hover/dia:opacity-100", children: /* @__PURE__ */ jsx(ZoomIcon, { className: "h-3 w-3" }) })
-        ] }) : mermaidMissing ? /* @__PURE__ */ jsx("div", { className: "grid h-24 w-40 place-items-center px-3 text-center text-[11px] leading-snug text-muted-foreground", children: /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: "composer-mermaid-zoom", children: /* @__PURE__ */ jsx(ZoomIcon, {}) })
+        ] }) : mermaidMissing ? /* @__PURE__ */ jsx("div", { className: "composer-mermaid-msg", children: /* @__PURE__ */ jsxs("span", { children: [
           "Install ",
-          /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 font-mono", children: "mermaid" }),
-          " ",
-          "or pass",
-          " ",
-          /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 font-mono", children: "renderDiagram" })
-        ] }) }) : error ? /* @__PURE__ */ jsx("div", { className: "grid h-24 w-40 place-items-center px-2 text-center text-[10px] leading-snug text-destructive", children: /* @__PURE__ */ jsx("span", { children: error.slice(0, 80) }) }) : /* @__PURE__ */ jsx("div", { className: "grid h-24 w-40 place-items-center text-[10px] text-muted-foreground", children: /* @__PURE__ */ jsx("span", { children: "Rendering\u2026" }) })
+          /* @__PURE__ */ jsx("code", { className: "composer-mermaid-code", children: "mermaid" }),
+          " or pass ",
+          /* @__PURE__ */ jsx("code", { className: "composer-mermaid-code", children: "renderDiagram" })
+        ] }) }) : error ? /* @__PURE__ */ jsx("div", { className: "composer-mermaid-msg composer-mermaid-msg--error", children: /* @__PURE__ */ jsx("span", { children: error.slice(0, 80) }) }) : /* @__PURE__ */ jsx("div", { className: "composer-mermaid-msg", children: /* @__PURE__ */ jsx("span", { children: "Rendering\u2026" }) })
       }
     ),
     zoom && svg && /* @__PURE__ */ jsx(
@@ -2637,7 +2629,7 @@ function SlashMenu({
   );
   const menu = slotProps(
     "slashMenu",
-    "z-50 w-72 origin-top animate-slide-up overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-soft",
+    "composer-menu composer-menu--slash",
     classNames,
     sx
   );
@@ -2651,10 +2643,10 @@ function SlashMenu({
       "aria-label": "Slash commands",
       "aria-busy": isLoading || void 0,
       ...menu,
-      children: /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "max-h-72 overflow-y-auto scrollbar-thin py-1", children: [
+      children: /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "composer-menu-list", children: [
         showSkeleton && /* @__PURE__ */ jsx(SlashSkeleton, { rows: 4 }),
         Object.entries(grouped).map(([group, entries]) => /* @__PURE__ */ jsxs("li", { children: [
-          /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: group }),
+          /* @__PURE__ */ jsx("div", { className: "composer-menu-group", children: group }),
           /* @__PURE__ */ jsx("ul", { children: entries.map(({ item, index }) => /* @__PURE__ */ jsxs(
             "li",
             {
@@ -2666,19 +2658,15 @@ function SlashMenu({
                 onSelect(index);
               },
               onMouseEnter: () => onHover(index),
-              className: cn(
-                "flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5 text-sm",
-                selectedIndex === index ? "bg-accent text-accent-foreground" : "text-foreground",
-                classNames?.slashItem
-              ),
+              className: cn("composer-menu-item", classNames?.slashItem),
               style: itemStyle,
               children: [
-                item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: item.icon }),
-                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
-                  /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: item.label }),
-                  item.description && /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: item.description })
+                item.icon && /* @__PURE__ */ jsx("span", { className: "composer-menu-icon", children: item.icon }),
+                /* @__PURE__ */ jsxs("span", { className: "composer-menu-text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "composer-menu-label", children: item.label }),
+                  item.description && /* @__PURE__ */ jsx("span", { className: "composer-menu-desc", children: item.description })
                 ] }),
-                item.shortcut && /* @__PURE__ */ jsx("span", { className: "ms-auto rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
+                item.shortcut && /* @__PURE__ */ jsx("span", { className: "composer-menu-shortcut", children: item.shortcut })
               ]
             },
             item.id
@@ -2689,35 +2677,28 @@ function SlashMenu({
   );
 }
 function SlashSkeleton({ rows = 4 }) {
-  return /* @__PURE__ */ jsxs("li", { "aria-hidden": "true", className: "px-2.5 py-1.5", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-0.5 pb-1.5 pt-0.5", children: /* @__PURE__ */ jsx("span", { className: "block h-2 w-16 animate-pulse rounded bg-muted/70" }) }),
-    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: "flex items-center gap-2.5 rounded-md px-0 py-1.5",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "h-7 w-7 shrink-0 animate-pulse rounded-md bg-muted" }),
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "h-2.5 animate-pulse rounded bg-muted",
-                style: { width: `${50 + i * 19 % 35}%` }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "h-2 animate-pulse rounded bg-muted/70",
-                style: { width: `${30 + i * 13 % 30}%` }
-              }
-            )
-          ] })
-        ]
-      },
-      i
-    )) }),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading commands\u2026" })
+  return /* @__PURE__ */ jsxs("li", { "aria-hidden": "true", className: "composer-skel-row", children: [
+    /* @__PURE__ */ jsx("span", { className: "composer-skel-grouplabel composer-pulse" }),
+    /* @__PURE__ */ jsx("ul", { className: "composer-skel-group", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("li", { className: "composer-skel-line", children: [
+      /* @__PURE__ */ jsx("span", { className: "composer-skel-avatar composer-skel-avatar--square composer-pulse" }),
+      /* @__PURE__ */ jsxs("span", { className: "composer-skel-text", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "composer-skel-bar composer-pulse",
+            style: { width: `${50 + i * 19 % 35}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "composer-skel-bar--sm composer-pulse",
+            style: { width: `${30 + i * 13 % 30}%` }
+          }
+        )
+      ] })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx("span", { className: "composer-sr-only", children: "Loading commands\u2026" })
   ] });
 }
 var MARGIN = 8;
@@ -2884,6 +2865,7 @@ function SmartPopover({ children, gap = 6 }) {
     "div",
     {
       ref,
+      "data-composer-scope": "",
       "data-composer-popover-placement": placement?.bottom !== void 0 ? "above-composer" : "below",
       dir: placement?.rtl ? "rtl" : "ltr",
       style: mergedStyle,
@@ -3033,14 +3015,14 @@ function Avatar({ src, alt, size = 28, className }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-primary/10 text-xs font-semibold text-primary" + (className ? ` ${className}` : ""),
+      className: "composer-avatar" + (className ? ` ${className}` : ""),
       style: { width: size, height: size },
       children: showImage ? /* @__PURE__ */ jsx(
         "img",
         {
           src,
           alt,
-          className: "h-full w-full object-cover",
+          className: "composer-avatar-img",
           onError: () => setErrored(true)
         }
       ) : initial
@@ -3062,12 +3044,7 @@ function MentionMenu({
     );
     if (el) el.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  const menu = slotProps(
-    "mentionMenu",
-    "z-50 w-64 origin-top animate-slide-up overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-soft",
-    classNames,
-    sx
-  );
+  const menu = slotProps("mentionMenu", "composer-menu", classNames, sx);
   const itemStyle = useMemo(() => resolveSx(sx?.mentionItem), [sx]);
   const showSkeleton = isLoading && options.length === 0;
   return /* @__PURE__ */ jsx(
@@ -3078,7 +3055,7 @@ function MentionMenu({
       "aria-label": "Mentions",
       "aria-busy": isLoading || void 0,
       ...menu,
-      children: /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "max-h-72 overflow-y-auto scrollbar-thin py-1", children: [
+      children: /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "composer-menu-list", children: [
         showSkeleton ? /* @__PURE__ */ jsx(MentionSkeleton, { rows: 3 }) : null,
         options.map((item, index) => /* @__PURE__ */ jsxs(
           "li",
@@ -3091,17 +3068,13 @@ function MentionMenu({
               onSelect(index);
             },
             onMouseEnter: () => onHover(index),
-            className: cn(
-              "flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5 text-sm",
-              selectedIndex === index ? "bg-accent text-accent-foreground" : "text-foreground",
-              classNames?.mentionItem
-            ),
+            className: cn("composer-menu-item", classNames?.mentionItem),
             style: itemStyle,
             children: [
-              item.avatarUrl ? /* @__PURE__ */ jsx(Avatar, { src: item.avatarUrl, alt: item.label }) : item.icon ? /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: item.icon }) : /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary", children: item.label.slice(0, 1).toUpperCase() }),
-              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
-                /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: item.label }),
-                item.description && /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: item.description })
+              item.avatarUrl ? /* @__PURE__ */ jsx(Avatar, { src: item.avatarUrl, alt: item.label }) : item.icon ? /* @__PURE__ */ jsx("span", { className: "composer-menu-avatar", children: item.icon }) : /* @__PURE__ */ jsx("span", { className: "composer-menu-avatar", children: item.label.slice(0, 1).toUpperCase() }),
+              /* @__PURE__ */ jsxs("span", { className: "composer-menu-text", children: [
+                /* @__PURE__ */ jsx("span", { className: "composer-menu-label", children: item.label }),
+                item.description && /* @__PURE__ */ jsx("span", { className: "composer-menu-desc", children: item.description })
               ] })
             ]
           },
@@ -3112,34 +3085,27 @@ function MentionMenu({
   );
 }
 function MentionSkeleton({ rows = 3 }) {
-  return /* @__PURE__ */ jsxs("li", { "aria-hidden": "true", className: "px-2.5 py-1.5", children: [
-    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: "flex items-center gap-2.5 rounded-md px-0 py-1.5",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "h-7 w-7 shrink-0 animate-pulse rounded-full bg-muted" }),
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "h-2.5 animate-pulse rounded bg-muted",
-                style: { width: `${60 + i * 17 % 30}%` }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "h-2 animate-pulse rounded bg-muted/70",
-                style: { width: `${35 + i * 23 % 25}%` }
-              }
-            )
-          ] })
-        ]
-      },
-      i
-    )) }),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading suggestions\u2026" })
+  return /* @__PURE__ */ jsxs("li", { "aria-hidden": "true", className: "composer-skel-row", children: [
+    /* @__PURE__ */ jsx("ul", { className: "composer-skel-group", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("li", { className: "composer-skel-line", children: [
+      /* @__PURE__ */ jsx("span", { className: "composer-skel-avatar composer-pulse" }),
+      /* @__PURE__ */ jsxs("span", { className: "composer-skel-text", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "composer-skel-bar composer-pulse",
+            style: { width: `${60 + i * 17 % 30}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "composer-skel-bar--sm composer-pulse",
+            style: { width: `${35 + i * 23 % 25}%` }
+          }
+        )
+      ] })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx("span", { className: "composer-sr-only", children: "Loading suggestions\u2026" })
   ] });
 }
 var MentionOption = class extends MenuOption {
@@ -3366,14 +3332,14 @@ function GhostOverlay({ typed, remainder, multiline }) {
     setContainer(block);
   }, [editor]);
   if (!container) return null;
-  const paddingClass = multiline ? "composer-ghost-overlay--multiline px-5 py-3.5" : "composer-ghost-overlay--inline px-2 leading-9";
+  const paddingClass = multiline ? "composer-ghost-overlay--multiline" : "composer-ghost-overlay--inline";
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
       {
         "aria-hidden": true,
         "data-composer-ghost": "",
-        className: `composer-ghost-overlay pointer-events-none absolute inset-0 select-none ${paddingClass}`,
+        className: `composer-ghost-overlay ${paddingClass}`,
         children: [
           /* @__PURE__ */ jsx("span", { className: "composer-ghost-overlay-typed", "aria-hidden": true, children: typed }),
           /* @__PURE__ */ jsx("span", { className: "composer-ghost-suggestion", children: remainder })
@@ -3405,7 +3371,7 @@ function AttachmentChip({ attachment, onRemove, onZoom }) {
   if (isImage) {
     const chip2 = slotProps(
       "attachmentChip",
-      "group/chip relative h-16 w-16 overflow-hidden rounded-xl border border-border bg-muted",
+      "composer-chip composer-chip--image",
       classNames,
       sx
     );
@@ -3415,23 +3381,23 @@ function AttachmentChip({ attachment, onRemove, onZoom }) {
         {
           src: attachment.previewUrl,
           alt: attachment.name,
-          className: "h-full w-full object-cover"
+          className: "composer-chip-img"
         }
       ),
       isUploading && /* @__PURE__ */ jsx(
         "div",
         {
           "aria-label": "Uploading",
-          className: "absolute inset-0 grid place-items-center bg-foreground/50",
-          children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "h-5 w-5 animate-spin text-background" })
+          className: "composer-chip-overlay composer-chip-overlay--uploading",
+          children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "composer-spin" })
         }
       ),
       isFailed && /* @__PURE__ */ jsx(
         "div",
         {
           "aria-label": "Upload failed",
-          className: "absolute inset-0 grid place-items-center bg-destructive/55",
-          children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-5 w-5 text-destructive-foreground" })
+          className: "composer-chip-overlay composer-chip-overlay--failed",
+          children: /* @__PURE__ */ jsx(WarningIcon, {})
         }
       ),
       !isUploading && !isFailed && /* @__PURE__ */ jsx(
@@ -3440,8 +3406,8 @@ function AttachmentChip({ attachment, onRemove, onZoom }) {
           type: "button",
           onClick: onZoom,
           "aria-label": `Zoom ${attachment.name}`,
-          className: "absolute inset-0 flex items-center justify-center bg-foreground/40 opacity-0 transition-opacity group-hover/chip:opacity-100",
-          children: /* @__PURE__ */ jsx(ZoomIcon, { className: "h-4 w-4 text-background" })
+          className: "composer-chip-zoom",
+          children: /* @__PURE__ */ jsx(ZoomIcon, {})
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3450,8 +3416,9 @@ function AttachmentChip({ attachment, onRemove, onZoom }) {
           type: "button",
           onClick: onRemove,
           "aria-label": `Remove ${attachment.name}`,
-          className: "absolute end-1 top-1 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-background transition-opacity " + (isUploading || isFailed ? "opacity-100" : "opacity-0 group-hover/chip:opacity-100"),
-          children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
+          className: "composer-chip-remove",
+          "data-visible": isUploading || isFailed ? "" : void 0,
+          children: /* @__PURE__ */ jsx(CloseIcon, { strokeWidth: 2.5 })
         }
       )
     ] });
@@ -3459,27 +3426,15 @@ function AttachmentChip({ attachment, onRemove, onZoom }) {
   const KindIcon = attachment.kind === "audio" ? AudioIcon : FileIcon;
   const chip = slotProps(
     "attachmentChip",
-    "group/chip flex items-center gap-2 rounded-xl border bg-card ps-2 pe-1 py-1.5 " + (isFailed ? "border-destructive/60" : "border-border"),
+    "composer-chip composer-chip--file",
     classNames,
     sx
   );
-  return /* @__PURE__ */ jsxs("div", { ...chip, title: titleText, children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "flex h-8 w-8 items-center justify-center rounded-md " + (isFailed ? "bg-destructive/15 text-destructive" : "bg-muted text-muted-foreground"),
-        children: isUploading ? /* @__PURE__ */ jsx(SpinnerIcon, { className: "h-4 w-4 animate-spin" }) : isFailed ? /* @__PURE__ */ jsx(WarningIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(KindIcon, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx("span", { className: "max-w-[160px] truncate text-xs font-medium leading-tight", children: attachment.name }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-[10px] " + (isFailed ? "text-destructive" : "text-muted-foreground"),
-          children: isUploading ? "Uploading\u2026" : isFailed ? attachment.error || "Upload failed" : formatBytes(attachment.size)
-        }
-      )
+  return /* @__PURE__ */ jsxs("div", { ...chip, "data-failed": isFailed ? "" : void 0, title: titleText, children: [
+    /* @__PURE__ */ jsx("span", { className: "composer-chip-icon", "data-failed": isFailed ? "" : void 0, children: isUploading ? /* @__PURE__ */ jsx(SpinnerIcon, { className: "composer-spin" }) : isFailed ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(KindIcon, {}) }),
+    /* @__PURE__ */ jsxs("span", { className: "composer-chip-text", children: [
+      /* @__PURE__ */ jsx("span", { className: "composer-chip-name", children: attachment.name }),
+      /* @__PURE__ */ jsx("span", { className: "composer-chip-meta", "data-failed": isFailed ? "" : void 0, children: isUploading ? "Uploading\u2026" : isFailed ? attachment.error || "Upload failed" : formatBytes(attachment.size) })
     ] }),
     /* @__PURE__ */ jsx(
       "button",
@@ -3487,8 +3442,8 @@ function AttachmentChip({ attachment, onRemove, onZoom }) {
         type: "button",
         onClick: onRemove,
         "aria-label": `Remove ${attachment.name}`,
-        className: "flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3.5 w-3.5" })
+        className: "composer-chip-remove-inline",
+        children: /* @__PURE__ */ jsx(CloseIcon, {})
       }
     )
   ] });
@@ -3499,7 +3454,7 @@ function AttachmentTray() {
   if (attachments.length === 0) return null;
   const tray = slotProps(
     "attachmentTray",
-    "flex flex-wrap gap-2 px-4 pt-3",
+    "composer-attachment-tray",
     classNames,
     sx
   );
@@ -3524,10 +3479,10 @@ function AttachmentTray() {
   ] });
 }
 var sideClasses = {
-  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
-  bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
-  left: "end-full top-1/2 me-2 -translate-y-1/2",
-  right: "start-full top-1/2 ms-2 -translate-y-1/2"
+  top: "composer-tooltip--top",
+  bottom: "composer-tooltip--bottom",
+  left: "composer-tooltip--left",
+  right: "composer-tooltip--right"
 };
 function Tooltip({
   children,
@@ -3565,18 +3520,14 @@ function Tooltip({
       children
     }
   );
-  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "composer-tooltip-wrap", children: [
     trigger,
     open && /* @__PURE__ */ jsx(
       "span",
       {
         id,
         role: "tooltip",
-        className: cn(
-          "absolute z-50 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-md",
-          sideClasses[side],
-          className
-        ),
+        className: cn("composer-tooltip", sideClasses[side], className),
         children: content
       }
     )
@@ -3726,7 +3677,7 @@ function VoiceButton() {
     }
   };
   const isRecording = state === "recording" || state === "starting";
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "composer-voice", children: [
     /* @__PURE__ */ jsx(
       Tooltip,
       {
@@ -3740,17 +3691,16 @@ function VoiceButton() {
             "aria-pressed": isRecording,
             onClick: () => isRecording ? stop() : void start(),
             className: cn(
-              "flex h-8 w-8 items-center justify-center rounded-full transition-colors",
-              isRecording ? "bg-destructive/10 text-destructive ring-1 ring-destructive/40" : "text-muted-foreground hover:bg-accent hover:text-foreground",
+              "composer-toolbar-btn composer-voice-btn",
               classNames?.toolbarButton
             ),
-            children: state === "transcribing" ? /* @__PURE__ */ jsx(VoiceRecordingIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(VoiceIcon, { className: cn("h-4 w-4", isRecording && "animate-pulse") })
+            children: state === "transcribing" ? /* @__PURE__ */ jsx(VoiceRecordingIcon, { className: "composer-spin" }) : /* @__PURE__ */ jsx(VoiceIcon, { className: cn(isRecording && "composer-pulse") })
           }
         )
       }
     ),
-    isRecording && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-[11px] font-mono font-medium tabular-nums text-destructive", children: [
-      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-destructive" }),
+    isRecording && /* @__PURE__ */ jsxs("span", { className: "composer-voice-timer", children: [
+      /* @__PURE__ */ jsx("span", { className: "composer-voice-dot composer-pulse" }),
       formatSeconds(elapsed)
     ] })
   ] });
@@ -3848,7 +3798,7 @@ function AttachmentTypePicker({
   useEffect(() => {
     if (open) setActiveIndex(0);
   }, [open]);
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "composer-attach-picker", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -3875,7 +3825,7 @@ function AttachmentTypePicker({
         onClick: () => setOpen((o) => !o),
         className: triggerClassName,
         style: triggerStyle,
-        children: /* @__PURE__ */ jsx(TriggerIcon, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(TriggerIcon, {})
       }
     ),
     open && /* @__PURE__ */ jsx(
@@ -3886,11 +3836,7 @@ function AttachmentTypePicker({
         role: "menu",
         "aria-label": "Attachment types",
         "data-composer-popover": "open",
-        className: cn(
-          "composer-popover-in absolute bottom-full start-0 z-30 mb-2 min-w-[200px] overflow-hidden",
-          "rounded-xl border border-border bg-popover p-1 text-popover-foreground",
-          "shadow-soft"
-        ),
+        className: "composer-popover-in composer-attach-menu",
         children: types.map((type, index) => {
           const active = index === activeIndex;
           return /* @__PURE__ */ jsxs(
@@ -3902,16 +3848,14 @@ function AttachmentTypePicker({
               role: "menuitem",
               type: "button",
               tabIndex: active ? 0 : -1,
+              "data-active": active ? "" : void 0,
               onMouseEnter: () => setActiveIndex(index),
               onClick: () => pick(index),
-              className: cn(
-                "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-start text-sm transition-colors",
-                active ? "bg-accent text-accent-foreground" : "text-foreground hover:bg-accent/60"
-              ),
+              className: "composer-attach-item",
               children: [
-                type.icon ? /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground", children: type.icon }) : null,
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: type.label }),
-                type.description ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[11px] text-muted-foreground", children: type.description }) : null
+                type.icon ? /* @__PURE__ */ jsx("span", { className: "composer-attach-item-icon", children: type.icon }) : null,
+                /* @__PURE__ */ jsx("span", { className: "composer-attach-item-label", children: type.label }),
+                type.description ? /* @__PURE__ */ jsx("span", { className: "composer-attach-item-desc", children: type.description }) : null
               ]
             },
             type.id
@@ -3921,7 +3865,7 @@ function AttachmentTypePicker({
     )
   ] });
 }
-var TOOLBAR_BTN_BASE = "flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground";
+var TOOLBAR_BTN_BASE = "composer-toolbar-btn";
 function Toolbar({ extras }) {
   const {
     features,
@@ -3940,7 +3884,7 @@ function Toolbar({ extras }) {
   const showFileBtn = attachmentsEnabled && attachmentsConfig.file !== false;
   const showImageBtn = attachmentsEnabled && attachmentsConfig.image !== false;
   const hasTypePicker = showFileBtn && Array.isArray(attachmentsConfig.types) && attachmentsConfig.types.length > 0;
-  const toolbar = slotProps("toolbar", "flex items-center gap-1", classNames, sx);
+  const toolbar = slotProps("toolbar", "composer-toolbar", classNames, sx);
   const toolbarBtn = slotProps("toolbarButton", TOOLBAR_BTN_BASE, classNames, sx);
   return /* @__PURE__ */ jsxs("div", { ...toolbar, children: [
     showFileBtn && !hasTypePicker && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3966,7 +3910,7 @@ function Toolbar({ extras }) {
           "aria-label": "Attach file",
           onClick: () => fileInputRef.current?.click(),
           ...toolbarBtn,
-          children: /* @__PURE__ */ jsx(AttachIcon, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(AttachIcon, {})
         }
       ) })
     ] }),
@@ -4003,7 +3947,7 @@ function Toolbar({ extras }) {
           "aria-label": "Add image",
           onClick: () => imageInputRef.current?.click(),
           ...toolbarBtn,
-          children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(ImageIcon, {})
         }
       ) })
     ] }),
@@ -4014,13 +3958,9 @@ function Toolbar({ extras }) {
         type: "button",
         onClick: toggleWeb,
         "aria-pressed": webEnabled,
-        className: cn(
-          "ms-0.5 inline-flex h-8 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium transition-colors",
-          webEnabled ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground",
-          classNames?.toolbarButton
-        ),
+        className: cn("composer-web-btn", classNames?.toolbarButton),
         children: [
-          /* @__PURE__ */ jsx(WebIcon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(WebIcon, {}),
           "Web"
         ]
       }
@@ -4034,7 +3974,7 @@ function SendButton({ canSend, isStreaming, onSend, onStop }) {
   if (isStreaming) {
     const stop = slotProps(
       "stopButton",
-      "inline-flex h-9 w-9 items-center justify-center rounded-full bg-foreground text-background transition-transform hover:scale-105",
+      "composer-send-btn composer-send-btn--stop",
       classNames,
       sx
     );
@@ -4049,17 +3989,9 @@ function SendButton({ canSend, isStreaming, onSend, onStop }) {
         }
       );
     }
-    return /* @__PURE__ */ jsx("button", { type: "button", onClick: onStop, "aria-label": "Stop generating", ...stop, children: /* @__PURE__ */ jsx(StopIcon, { className: "h-3.5 w-3.5 fill-current" }) });
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: onStop, "aria-label": "Stop generating", ...stop, children: /* @__PURE__ */ jsx(StopIcon, {}) });
   }
-  const send = slotProps(
-    "sendButton",
-    [
-      "inline-flex h-9 w-9 items-center justify-center rounded-full transition-all",
-      canSend ? "bg-foreground text-background shadow-sm hover:scale-105" : "bg-muted text-muted-foreground/60"
-    ],
-    classNames,
-    sx
-  );
+  const send = slotProps("sendButton", "composer-send-btn", classNames, sx);
   if (slots.sendButton) {
     const Slot = slots.sendButton;
     return /* @__PURE__ */ jsx(
@@ -4080,14 +4012,14 @@ function SendButton({ canSend, isStreaming, onSend, onStop }) {
       disabled: !canSend,
       "aria-label": "Send message",
       ...send,
-      children: /* @__PURE__ */ jsx(SendIcon, { className: "h-4 w-4", strokeWidth: 2.5 })
+      children: /* @__PURE__ */ jsx(SendIcon, { strokeWidth: 2.5 })
     }
   );
 }
 function noop() {
 }
 function Key({ children }) {
-  return /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border bg-card px-1 py-0.5 font-mono text-[10px]", children });
+  return /* @__PURE__ */ jsx("kbd", { className: "composer-kbd", children });
 }
 function formatShortcut(spec) {
   const parts = spec.split("+").map((s) => s.trim().toLowerCase()).filter(Boolean);
@@ -4178,19 +4110,14 @@ function HintBar({ hint }) {
     ] });
   }, [focusShortcut]);
   if (!hint) return null;
-  const hintProps = slotProps(
-    "hint",
-    "text-center text-[11px] text-muted-foreground",
-    classNames,
-    sx
-  );
+  const hintProps = slotProps("hint", "composer-hint", classNames, sx);
   return /* @__PURE__ */ jsx("p", { ...hintProps, children: hint === true ? /* @__PURE__ */ jsxs(Fragment, { children: [
     "AI can make mistakes \u2014 verify important info.",
-    defaultShortcuts ? /* @__PURE__ */ jsxs("span", { className: "hidden sm:inline", children: [
+    defaultShortcuts ? /* @__PURE__ */ jsxs("span", { className: "composer-hint-sm", children: [
       " ",
       defaultShortcuts
     ] }) : null,
-    focusHint ? /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: focusHint }) : null
+    focusHint ? /* @__PURE__ */ jsx("span", { className: "composer-hint-md", children: focusHint }) : null
   ] }) : hint });
 }
 var DEFAULT_MAX = 3;
@@ -4221,35 +4148,20 @@ function QuickPrompts({ prompts }) {
     prompts.onSelect?.(prompt);
     runPrompt(prompt, behavior);
   };
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Quick prompts", className: "composer-prompts", children: display.map((p) => /* @__PURE__ */ jsxs(
+    "button",
     {
-      role: "group",
-      "aria-label": "Quick prompts",
-      className: "flex flex-wrap items-center gap-2 px-1 pb-1",
-      children: display.map((p) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleClick(p),
-          title: p,
-          className: cn(
-            "group inline-flex max-w-full items-center gap-1.5 rounded-full",
-            "border border-border bg-card/60 px-3 py-1.5 text-xs",
-            "text-muted-foreground backdrop-blur transition-all",
-            "hover:-translate-y-px hover:border-primary/40 hover:bg-card",
-            "hover:text-foreground hover:shadow-sm",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(SparkleIcon, { className: "h-3 w-3 shrink-0 text-primary opacity-70 group-hover:opacity-100" }),
-            /* @__PURE__ */ jsx("span", { className: "truncate", style: { maxWidth: "32ch" }, children: p })
-          ]
-        },
-        p
-      ))
-    }
-  );
+      type: "button",
+      onClick: () => handleClick(p),
+      title: p,
+      className: "composer-prompt",
+      children: [
+        /* @__PURE__ */ jsx(SparkleIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "composer-prompt-text", style: { maxWidth: "32ch" }, children: p })
+      ]
+    },
+    p
+  )) });
 }
 function useComposerHandle(ref, onSubmit) {
   const [editor] = useLexicalComposerContext();
@@ -4399,7 +4311,7 @@ var Composer = forwardRef(function Composer2(props, ref) {
     if (!derived && !tokens) return void 0;
     return tokensToStyle({ ...derived, ...tokens });
   }, [color, tokens]);
-  const root = slotProps("root", "space-y-2", classNames, sx);
+  const root = slotProps("root", "composer-root", classNames, sx);
   const rootStyle = useMemo(
     () => ({ ...tokenStyle, ...root.style, ...style }),
     [tokenStyle, root.style, style]
@@ -4427,6 +4339,7 @@ var Composer = forwardRef(function Composer2(props, ref) {
         "div",
         {
           dir,
+          "data-composer-scope": "",
           className: cn(root.className, className),
           style: Object.keys(rootStyle).length ? rootStyle : void 0,
           children: [
@@ -4483,16 +4396,7 @@ function ComposerCard({
   multiline
 }) {
   const { webEnabled, isDraggingFiles, classNames, sx } = useComposerContext();
-  const card = slotProps(
-    "card",
-    [
-      "group relative border border-border bg-card shadow-soft transition-all focus-within:border-primary/40 focus-within:shadow-glow",
-      webEnabled && "ring-1 ring-primary/20",
-      isDraggingFiles && "ring-2 ring-primary/60"
-    ],
-    classNames,
-    sx
-  );
+  const card = slotProps("card", "composer-card", classNames, sx);
   const initialConfig = useMemo(
     () => ({
       namespace: "composeai",
@@ -4510,6 +4414,8 @@ function ComposerCard({
     {
       "data-composer-root": "",
       "data-composer-inline": multiline ? void 0 : "",
+      "data-composer-web": webEnabled ? "" : void 0,
+      "data-composer-dragging": isDraggingFiles ? "" : void 0,
       ...card,
       children: [
         /* @__PURE__ */ jsx(
@@ -4517,7 +4423,7 @@ function ComposerCard({
           {
             "aria-hidden": true,
             "data-composer-overlay": "",
-            className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity group-focus-within:opacity-100",
+            className: "composer-overlay-glow",
             style: {
               background: "linear-gradient(135deg, hsl(var(--primary)/0.08) 0%, transparent 40%, hsl(var(--primary)/0.06) 100%)"
             }
@@ -4528,7 +4434,7 @@ function ComposerCard({
           {
             "aria-hidden": true,
             "data-composer-overlay": "",
-            className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-primary/5 text-sm font-medium text-primary backdrop-blur-[1px]",
+            className: "composer-overlay-drop",
             children: "Drop to attach"
           }
         ),
@@ -4727,14 +4633,14 @@ function MermaidSlot() {
 function SuggestionRow({ items, onSelect, className }) {
   const { icons } = useComposerContext();
   const { sparkle: SparkleIcon } = icons;
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap justify-center gap-2", className), children: items.map((s) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn("composer-suggestions", className), children: items.map((s) => /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick: () => onSelect(s),
-      className: "group inline-flex items-center gap-1.5 rounded-full border border-border bg-card/60 px-3.5 py-1.5 text-xs text-muted-foreground backdrop-blur transition-all hover:-translate-y-px hover:border-primary/40 hover:bg-card hover:text-foreground hover:shadow-sm",
+      className: "composer-suggestion",
       children: [
-        /* @__PURE__ */ jsx(SparkleIcon, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
+        /* @__PURE__ */ jsx(SparkleIcon, {}),
         s
       ]
     },