@shapesos/clay 0.13.1 → 0.15.0

package/dist/index.cjs

@@ -16591,6 +16591,7 @@ __export(src_exports, {
   BlockContext: () => BlockContext,
   BlockServices: () => BlockServices,
   Button: () => Button2,
+  CHAT_STATUS: () => CHAT_STATUS,
   ChartArtifact: () => ChartArtifact,
   ChatContext: () => ChatContext,
   ChatMessage: () => ChatMessage,
@@ -16604,6 +16605,14 @@ __export(src_exports, {
   KeyboardShortcut: () => KeyboardShortcut,
   Lottie: () => Lottie,
   MESSAGE_ROLE: () => MESSAGE_ROLE,
+  MouseGrid: () => MouseGrid,
+  PromptInput: () => PromptInput,
+  PromptInputFooter: () => PromptInputFooter,
+  PromptInputSubmit: () => PromptInputSubmit,
+  PromptInputTextarea: () => PromptInputTextarea,
+  PromptInputTools: () => PromptInputTools,
+  Suggestion: () => Suggestion,
+  Suggestions: () => Suggestions,
   TableArtifact: () => TableArtifact,
   TextArea: () => TextArea,
   TextBlockService: () => TextBlockService,
@@ -16635,7 +16644,7 @@ init_colors();
 var fontFamilies = {
   /** Geist — primary UI font for body text, labels, headings, and display. */
   GEIST: "Geist",
-  /** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */
+  /** Crimson Pro — editorial/serif font, mostly italic. Used for decorative headings and pull quotes. */
   CRIMSON_PRO: "Crimson Pro"
 };
 var typographyTypes = {
@@ -16675,14 +16684,16 @@ var typographyTypes = {
   GEIST_HEADING_L_BOLD: "GEIST_HEADING_L_BOLD",
   // Geist Display Large (36px)
   GEIST_DISPLAY_L_MEDIUM: "GEIST_DISPLAY_L_MEDIUM",
-  // Crimson Pro Body Small (16px)
-  CRIMSON_PRO_BODY_S_LIGHT: "CRIMSON_PRO_BODY_S_LIGHT",
-  // Crimson Pro Body Medium (18px)
-  CRIMSON_PRO_BODY_M_LIGHT: "CRIMSON_PRO_BODY_M_LIGHT",
-  // Crimson Pro Heading Medium (24px)
-  CRIMSON_PRO_HEADING_M_MEDIUM: "CRIMSON_PRO_HEADING_M_MEDIUM",
-  // Crimson Pro Display Extra Large (46px)
-  CRIMSON_PRO_DISPLAY_XL_REGULAR: "CRIMSON_PRO_DISPLAY_XL_REGULAR"
+  // Crimson Pro Body Small (16px, italic)
+  CRIMSON_PRO_BODY_S_LIGHT_ITALIC: "CRIMSON_PRO_BODY_S_LIGHT_ITALIC",
+  // Crimson Pro Body Medium (18px, italic)
+  CRIMSON_PRO_BODY_M_LIGHT_ITALIC: "CRIMSON_PRO_BODY_M_LIGHT_ITALIC",
+  // Crimson Pro Heading Medium (24px, italic)
+  CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC: "CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC",
+  // Crimson Pro Display Large (40px, upright)
+  CRIMSON_PRO_DISPLAY_L_REGULAR: "CRIMSON_PRO_DISPLAY_L_REGULAR",
+  // Crimson Pro Display Extra Large (46px, italic)
+  CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC: "CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC"
 };
 var typographyStyles = {
   // Geist Label Caption (12px)
@@ -16877,8 +16888,8 @@ var typographyStyles = {
     lineHeight: 44,
     letterSpacing: -0.72
   },
-  // Crimson Pro Body Small (16px)
-  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {
+  // Crimson Pro Body Small (16px, italic)
+  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 16,
     fontWeight: 300,
@@ -16886,8 +16897,8 @@ var typographyStyles = {
     letterSpacing: -0.32,
     fontStyle: "italic"
   },
-  // Crimson Pro Body Medium (18px)
-  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {
+  // Crimson Pro Body Medium (18px, italic)
+  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 18,
     fontWeight: 300,
@@ -16895,8 +16906,8 @@ var typographyStyles = {
     letterSpacing: 0,
     fontStyle: "italic"
   },
-  // Crimson Pro Heading Medium (24px)
-  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {
+  // Crimson Pro Heading Medium (24px, italic)
+  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 24,
     fontWeight: 400,
@@ -16904,8 +16915,16 @@ var typographyStyles = {
     letterSpacing: -0.48,
     fontStyle: "italic"
   },
-  // Crimson Pro Display Extra Large (46px)
-  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {
+  // Crimson Pro Display Large (40px, upright)
+  [typographyTypes.CRIMSON_PRO_DISPLAY_L_REGULAR]: {
+    fontFamily: fontFamilies.CRIMSON_PRO,
+    fontSize: 40,
+    fontWeight: 300,
+    lineHeight: 48,
+    letterSpacing: -1.6
+  },
+  // Crimson Pro Display Extra Large (46px, italic)
+  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 46,
     fontWeight: 400,
@@ -17149,6 +17168,59 @@ var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
+var intentStyles = {
+  secondary: ({ $isSelected }) => import_styled_components2.css`
+    background: ${$isSelected ? colors["brown-40"] : "transparent"};
+    color: ${colors["brown-100"]};
+
+    &:hover:not(:disabled) {
+      background: ${$isSelected ? colors["brown-40"] : colors["brown-20"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-40"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: transparent;
+    }
+  `,
+  primary: () => import_styled_components2.css`
+    background: ${colors["brown-100"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: ${colors["brown-20"]};
+    }
+  `,
+  error: () => import_styled_components2.css`
+    background: ${colors["red-500"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:disabled {
+      color: ${colors["red-200"]};
+      background: ${colors["red-100"]};
+    }
+  `
+};
 var Button = import_styled_components2.default.button`
   display: inline-flex;
   align-items: center;
@@ -17156,22 +17228,12 @@ var Button = import_styled_components2.default.button`
   padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
   border: none;
   border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
-  background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
-  color: ${colors["brown-100"]};
   cursor: pointer;
   transition: background-color 100ms ease;
 
-  &:hover {
-    background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
-  }
-
-  &:active {
-    background: ${colors["brown-40"]};
-  }
+  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}
 
   &:disabled {
-    color: ${colors["brown-50"]};
-    background: transparent;
     cursor: not-allowed;
   }
 `;
@@ -17186,6 +17248,7 @@ var IconButton = (0, import_react4.forwardRef)(function IconButton2({
   icon,
   size = "small",
   variant = "short",
+  intent = "secondary",
   isSelected = false,
   disabled = false,
   onClick,
@@ -17205,6 +17268,7 @@ var IconButton = (0, import_react4.forwardRef)(function IconButton2({
       as,
       $size: size,
       $variant: variant,
+      $intent: intent,
       $isSelected: isSelected,
       disabled,
       onClick: disabled ? void 0 : onClick,
@@ -18785,148 +18849,634 @@ function useBlockContext() {
   return (0, import_react16.useContext)(BlockContext) ?? {};
 }
 
-// src/components/chat/chat-message/chat-message.tsx
-var import_react20 = require("react");
-
-// src/components/chat/hooks/copy-message-text.ts
-function copyMessageText(message) {
-  const parts = [];
-  for (const block of message.blocks) {
-    const service = BlockServices[block.type];
-    if (!service) continue;
-    if (!service.toClipboardText) continue;
-    const text2 = service.toClipboardText(block);
-    if (text2) parts.push(text2);
-  }
-  if (parts.length === 0) return message.fallbackText;
-  return parts.join("\n\n");
-}
-
-// src/components/chat/chat-message-actions/chat-message-actions.tsx
+// src/components/ai-elements/prompt-input/prompt-input.tsx
 var import_react19 = require("react");
 
-// src/components/chat/chat-context/chat-context.ts
+// src/components/button/button.tsx
 var import_react17 = require("react");
-var ChatContext = (0, import_react17.createContext)(null);
-function useChatContext() {
-  const context = (0, import_react17.useContext)(ChatContext);
-  if (!context) {
-    throw new Error("useChatContext must be used within a Chat.Root component");
-  }
-  return context;
-}
 
-// src/components/chat/hooks/use-copy-to-clipboard.ts
-var import_react18 = require("react");
+// src/components/button/button-styles.ts
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+init_colors();
 
-// src/utils/clipboard.ts
-function copyToClipboard(text2, options) {
-  navigator.clipboard.writeText(text2).then(
-    () => options?.onSuccess?.(),
-    (error) => options?.onFailure?.(error)
-  );
+// src/components/button/constants.ts
+var BUTTON_VARIANT = {
+  SOLID: "solid",
+  OUTLINE: "outline",
+  GHOST: "ghost"
+};
+var BUTTON_SIZE = {
+  XS: "xs",
+  S: "s",
+  M: "m"
+};
+var BUTTON_INTENT = {
+  PRIMARY: "primary",
+  ERROR: "error"
+};
+var ICON_POSITION = {
+  LEADING: "leading",
+  TRAILING: "trailing"
+};
+
+// src/components/button/button-styles.ts
+var intentColors = {
+  [BUTTON_INTENT.PRIMARY]: {
+    base: colors["brown-100"],
+    hover: colors["brown-90"],
+    disabledBg: colors["brown-20"],
+    disabledText: colors["brown-50"],
+    subtleHover: colors["brown-20"],
+    border: colors["brown-40"],
+    disabledBorder: colors["brown-20"]
+  },
+  [BUTTON_INTENT.ERROR]: {
+    base: colors["red-500"],
+    hover: colors["red-600"],
+    disabledBg: colors["red-100"],
+    disabledText: colors["red-200"],
+    subtleHover: colors["red-50"],
+    border: colors["red-200"],
+    disabledBorder: colors["red-100"]
+  }
+};
+var sizeValues = {
+  [BUTTON_SIZE.XS]: { padding: "6px 10px", borderRadius: "8px", gap: "4px" },
+  [BUTTON_SIZE.S]: { padding: "8px 12px", borderRadius: "10px", gap: "6px" },
+  [BUTTON_SIZE.M]: { padding: "10px 14px", borderRadius: "10px", gap: "6px" }
+};
+function sizeMixin({ $size }) {
+  const s = sizeValues[$size];
+  return import_styled_components5.css`
+    padding: ${s.padding};
+    border-radius: ${s.borderRadius};
+    gap: ${s.gap};
+  `;
 }
+var variantColorMap = {
+  [BUTTON_VARIANT.SOLID]: (c) => ({
+    background: c.base,
+    color: colors.white,
+    border: "none",
+    hoverBg: c.hover,
+    disabledBg: c.disabledBg,
+    disabledColor: c.disabledText
+  }),
+  [BUTTON_VARIANT.OUTLINE]: (c) => ({
+    background: colors.white,
+    color: c.base,
+    border: `1px solid ${c.border}`,
+    hoverBg: c.subtleHover,
+    disabledColor: c.disabledText,
+    disabledBorder: c.disabledBorder
+  }),
+  [BUTTON_VARIANT.GHOST]: (c) => ({
+    background: "transparent",
+    color: c.base,
+    border: "none",
+    hoverBg: c.subtleHover,
+    disabledColor: c.disabledText
+  })
+};
+function variantMixin({
+  $variant,
+  $intent
+}) {
+  const v = variantColorMap[$variant](intentColors[$intent]);
+  return import_styled_components5.css`
+    background: ${v.background};
+    color: ${v.color};
+    border: ${v.border};
 
-// src/components/chat/hooks/use-copy-to-clipboard.ts
-var RESET_DELAY_MS = 2e3;
-function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = (0, import_react18.useState)(false);
-  const timeoutRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  const copy = (0, import_react18.useCallback)((text2) => {
-    copyToClipboard(text2, {
-      onSuccess: () => {
-        setIsCopied(true);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          setIsCopied(false);
-          timeoutRef.current = null;
-        }, RESET_DELAY_MS);
-      }
-    });
-  }, []);
-  return { isCopied, copy };
+    &:hover:not(:disabled) {
+      background: ${v.hoverBg};
+    }
+
+    &:disabled {
+      color: ${v.disabledColor};
+      ${v.disabledBg ? `background: ${v.disabledBg};` : ""}
+      ${v.disabledBorder ? `border-color: ${v.disabledBorder};` : ""}
+    }
+  `;
 }
+var StyledButton = import_styled_components5.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
 
-// src/components/chat/constants.ts
-var MESSAGE_ROLE = {
-  USER: "user",
-  ASSISTANT: "assistant"
-};
+  &:disabled {
+    cursor: not-allowed;
+  }
 
-// src/components/chat/chat-message-actions/chat-message-actions-styles.ts
-var import_styled_components5 = __toESM(require("styled-components"), 1);
-var FADE_DURATION_MS = 150;
-var ANIMATE_DURATION_MS = 200;
-var ActionsContainer = import_styled_components5.default.div`
-  display: flex;
-  opacity: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? 1 : 0};
-  pointer-events: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? "auto" : "none"};
-  transition: opacity ${FADE_DURATION_MS}ms ease;
-`;
-var AnimatedAction = import_styled_components5.default.div`
-  display: flex;
-  overflow: hidden;
-  max-width: ${({ $visible }) => $visible ? "40px" : "0"};
-  opacity: ${({ $visible }) => $visible ? 1 : 0};
-  transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;
+  ${sizeMixin}
+  ${variantMixin}
 `;
 
-// src/components/chat/chat-message-actions/chat-message-actions.tsx
+// src/components/button/button.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-function ChatMessageActions({ className, messageId, content: content2, role, isHelpful }) {
-  const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
-  const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = (0, import_react19.useCallback)(() => {
-    copy(content2);
-    onCopyMessage?.(messageId);
-  }, [content2, messageId, copy, onCopyMessage]);
-  const handleThumbUp = (0, import_react19.useCallback)(() => {
-    onThumbUpClick?.(messageId, isHelpful === true ? null : true);
-  }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = (0, import_react19.useCallback)(() => {
-    onThumbDownClick?.(messageId, isHelpful === false ? null : false);
-  }, [messageId, isHelpful, onThumbDownClick]);
-  const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
-  const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ActionsContainer, { $role: role, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      IconButton,
-      {
-        icon: isCopied ? IconCheck : IconCopy,
-        onClick: handleCopy,
-        "aria-label": isCopied ? "Copied" : "Copy message"
-      }
-    ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      IconButton,
-      {
-        icon: IconThumbUp,
-        onClick: handleThumbUp,
-        isSelected: isHelpful === true,
-        "aria-label": "Good response"
-      }
-    ) }),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      IconButton,
-      {
-        icon: IconThumbDown,
-        onClick: handleThumbDown,
-        isSelected: isHelpful === false,
-        "aria-label": "Bad response"
-      }
-    ) })
-  ] });
+var Button2 = (0, import_react17.forwardRef)(function Button3({
+  children,
+  variant = BUTTON_VARIANT.SOLID,
+  intent = BUTTON_INTENT.PRIMARY,
+  size = BUTTON_SIZE.M,
+  icon,
+  iconPosition = ICON_POSITION.LEADING,
+  disabled = false,
+  onClick,
+  className,
+  "aria-label": ariaLabel
+}, ref) {
+  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon, size: 16 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    StyledButton,
+    {
+      ref,
+      type: "button",
+      $variant: variant,
+      $intent: intent,
+      $size: size,
+      disabled,
+      onClick: disabled ? void 0 : onClick,
+      className,
+      "aria-label": ariaLabel,
+      children: [
+        iconPosition === ICON_POSITION.LEADING && iconElement,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children }),
+        iconPosition === ICON_POSITION.TRAILING && iconElement
+      ]
+    }
+  );
+});
+
+// src/components/text-area/text-area.tsx
+var import_react18 = require("react");
+
+// src/utils/merge-refs.ts
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
+// src/components/text-area/text-area-styles.ts
+var import_styled_components6 = __toESM(require("styled-components"), 1);
+init_colors();
+var StyledTextArea = import_styled_components6.default.textarea`
+  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
+  color: ${colors["brown-100"]};
+  border: none;
+  outline: none;
+  resize: none;
+  width: 100%;
+  background: transparent;
+  vertical-align: bottom;
+  max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : "none"};
+  overflow-y: ${({ $maxHeight }) => $maxHeight ? "auto" : "hidden"};
+
+  &::placeholder {
+    color: ${colors["brown-50"]};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+// src/components/text-area/text-area.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TextArea = (0, import_react18.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
+  const internalRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useLayoutEffect)(() => {
+    const el = internalRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  }, [value2]);
+  const handleChange = (0, import_react18.useCallback)(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    StyledTextArea,
+    {
+      ref: mergeRefs(internalRef, externalRef),
+      value: value2,
+      onChange: handleChange,
+      placeholder,
+      $maxHeight: maxHeight,
+      rows,
+      autoFocus,
+      onKeyDown,
+      disabled,
+      className
+    }
+  );
+});
+
+// src/components/ai-elements/prompt-input/types.ts
+var CHAT_STATUS = {
+  /** Idle / ready to submit. */
+  READY: "ready",
+  /** The last submission errored — the button shows a retry affordance. */
+  ERROR: "error"
+};
+
+// src/components/ai-elements/prompt-input/prompt-input.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var PromptInput = ({ className, onSubmit, disabled, children, ...props }) => {
+  const handleSubmit = (0, import_react19.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (disabled) {
+        return;
+      }
+      const textarea = event.currentTarget.querySelector("textarea");
+      const text2 = textarea?.value ?? "";
+      if (!text2.trim()) {
+        return;
+      }
+      onSubmit({ text: text2 }, event);
+    },
+    [disabled, onSubmit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "form",
+    {
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-xl border bg-background shadow-lg shadow-foreground/5",
+        className
+      ),
+      onSubmit: handleSubmit,
+      ...props,
+      children
+    }
+  );
+};
+var PromptInputTextarea = (0, import_react19.forwardRef)(
+  function PromptInputTextarea2({ className, onKeyDown, placeholder = "What would you like to know?", ...props }, ref) {
+    const handleKeyDown = (0, import_react19.useCallback)(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+          event.preventDefault();
+          event.currentTarget.form?.requestSubmit();
+        }
+      },
+      [onKeyDown]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("py-3", className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TextArea, { ref, className: "px-4", onKeyDown: handleKeyDown, placeholder, ...props }) });
+  }
+);
+var PromptInputFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("flex items-center justify-between gap-1 px-4 pb-3", className), ...props });
+var PromptInputTools = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("flex min-w-0 items-center gap-1", className), ...props });
+var PromptInputSubmit = ({
+  label = "Submit",
+  status = CHAT_STATUS.READY,
+  disabled,
+  className
+}) => {
+  const handleClick = (0, import_react19.useCallback)((event) => {
+    event.currentTarget.form?.requestSubmit();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    Button2,
+    {
+      intent: status === CHAT_STATUS.ERROR ? BUTTON_INTENT.ERROR : BUTTON_INTENT.PRIMARY,
+      size: BUTTON_SIZE.XS,
+      className,
+      disabled,
+      onClick: handleClick,
+      children: label
+    }
+  );
+};
+
+// src/components/ai-elements/mouse-grid/mouse-grid.tsx
+var import_react20 = require("react");
+
+// src/utils/prefers-reduced-motion.ts
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+}
+
+// src/components/ai-elements/mouse-grid/mouse-grid.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function MouseGrid({ glowColor, colorCycleMs = 4e3, autoDrift = false } = {}) {
+  const layerRef = (0, import_react20.useRef)(null);
+  const glowRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
+    const driftEnabled = autoDrift && !prefersReducedMotion();
+    let raf = 0;
+    let driftRaf = 0;
+    let lastDriftTime = 0;
+    let clientX = 0;
+    let clientY = 0;
+    let pointerInside = false;
+    let centerX = 0;
+    let centerY = 0;
+    let hasCenter = false;
+    function setCenter(x, y) {
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      centerX = x;
+      centerY = y;
+      hasCenter = true;
+      layer.style.setProperty("--vibe-mx", `${x}px`);
+      layer.style.setProperty("--vibe-my", `${y}px`);
+    }
+    function flush() {
+      raf = 0;
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      if (driftEnabled && !pointerInside) {
+        return;
+      }
+      const rect = layer.getBoundingClientRect();
+      setCenter(clientX - rect.left, clientY - rect.top);
+    }
+    function onMove(event) {
+      clientX = event.clientX;
+      clientY = event.clientY;
+      const layer = layerRef.current;
+      if (layer) {
+        const rect = layer.getBoundingClientRect();
+        pointerInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+      }
+      if (pointerInside) {
+        stopDrift();
+      } else {
+        startDrift();
+      }
+      if (raf) {
+        return;
+      }
+      raf = requestAnimationFrame(flush);
+    }
+    function onPointerLeave() {
+      pointerInside = false;
+      startDrift();
+    }
+    function drift(time2) {
+      const delta = lastDriftTime ? time2 - lastDriftTime : 16.67;
+      lastDriftTime = time2;
+      driftRaf = requestAnimationFrame(drift);
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      const { width: width2, height: height2 } = layer.getBoundingClientRect();
+      if (!hasCenter) {
+        centerX = width2 / 2;
+        centerY = height2 / 2;
+      }
+      const targetX = width2 * (0.5 + 0.32 * Math.sin(time2 * 37e-5) + 0.12 * Math.sin(time2 * 91e-5));
+      const targetY = height2 * (0.5 + 0.32 * Math.cos(time2 * 41e-5) + 0.12 * Math.sin(time2 * 11e-4));
+      const alpha = 1 - Math.exp(-25e-4 * delta);
+      setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);
+    }
+    function startDrift() {
+      if (!driftEnabled || driftRaf) {
+        return;
+      }
+      lastDriftTime = 0;
+      driftRaf = requestAnimationFrame(drift);
+    }
+    function stopDrift() {
+      if (driftRaf) {
+        cancelAnimationFrame(driftRaf);
+        driftRaf = 0;
+      }
+    }
+    window.addEventListener("mousemove", onMove, { passive: true });
+    document.documentElement.addEventListener("mouseleave", onPointerLeave);
+    startDrift();
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      document.documentElement.removeEventListener("mouseleave", onPointerLeave);
+      if (raf) {
+        cancelAnimationFrame(raf);
+      }
+      stopDrift();
+    };
+  }, [autoDrift]);
+  const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];
+  const glowColorsKey = JSON.stringify(colorList);
+  (0, import_react20.useEffect)(() => {
+    const glow = glowRef.current;
+    if (!glow) {
+      return;
+    }
+    const colors2 = JSON.parse(glowColorsKey).filter(Boolean);
+    const staticColor = colors2[0];
+    if (staticColor) {
+      glow.style.setProperty("--vibe-glow-color", staticColor);
+    }
+    const clearColor = () => glow.style.removeProperty("--vibe-glow-color");
+    if (colors2.length < 2 || prefersReducedMotion()) {
+      return staticColor ? clearColor : void 0;
+    }
+    let index2 = 0;
+    const raf = requestAnimationFrame(() => glow.style.setProperty("--vibe-glow-cycle", `${colorCycleMs}ms`));
+    const timer = setInterval(() => {
+      index2 = (index2 + 1) % colors2.length;
+      glow.style.setProperty("--vibe-glow-color", colors2[index2]);
+    }, colorCycleMs);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearInterval(timer);
+      glow.style.removeProperty("--vibe-glow-cycle");
+      clearColor();
+    };
+  }, [glowColorsKey, colorCycleMs]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: layerRef, "aria-hidden": "true", className: "vibe-mouse-grid-layer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "vibe-mouse-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref: glowRef, className: "vibe-mouse-glow" })
+  ] });
+}
+
+// src/components/ai-elements/suggestion/suggestion.tsx
+var import_react21 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Suggestions = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex flex-wrap items-center justify-center gap-3", className), ...props });
+var Suggestion = ({ suggestion, onClick, className, children, ...props }) => {
+  const handleClick = (0, import_react21.useCallback)(() => onClick?.(suggestion), [onClick, suggestion]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn(
+        "cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40",
+        className
+      ),
+      ...props,
+      children: children ?? suggestion
+    }
+  );
+};
+
+// src/components/chat/chat-message/chat-message.tsx
+var import_react25 = require("react");
+
+// src/components/chat/hooks/copy-message-text.ts
+function copyMessageText(message) {
+  const parts = [];
+  for (const block of message.blocks) {
+    const service = BlockServices[block.type];
+    if (!service) continue;
+    if (!service.toClipboardText) continue;
+    const text2 = service.toClipboardText(block);
+    if (text2) parts.push(text2);
+  }
+  if (parts.length === 0) return message.fallbackText;
+  return parts.join("\n\n");
+}
+
+// src/components/chat/chat-message-actions/chat-message-actions.tsx
+var import_react24 = require("react");
+
+// src/components/chat/chat-context/chat-context.ts
+var import_react22 = require("react");
+var ChatContext = (0, import_react22.createContext)(null);
+function useChatContext() {
+  const context = (0, import_react22.useContext)(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a Chat.Root component");
+  }
+  return context;
+}
+
+// src/components/chat/hooks/use-copy-to-clipboard.ts
+var import_react23 = require("react");
+
+// src/utils/clipboard.ts
+function copyToClipboard(text2, options) {
+  navigator.clipboard.writeText(text2).then(
+    () => options?.onSuccess?.(),
+    (error) => options?.onFailure?.(error)
+  );
+}
+
+// src/components/chat/hooks/use-copy-to-clipboard.ts
+var RESET_DELAY_MS = 2e3;
+function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = (0, import_react23.useState)(false);
+  const timeoutRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const copy = (0, import_react23.useCallback)((text2) => {
+    copyToClipboard(text2, {
+      onSuccess: () => {
+        setIsCopied(true);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+          setIsCopied(false);
+          timeoutRef.current = null;
+        }, RESET_DELAY_MS);
+      }
+    });
+  }, []);
+  return { isCopied, copy };
+}
+
+// src/components/chat/constants.ts
+var MESSAGE_ROLE = {
+  USER: "user",
+  ASSISTANT: "assistant"
+};
+
+// src/components/chat/chat-message-actions/chat-message-actions-styles.ts
+var import_styled_components7 = __toESM(require("styled-components"), 1);
+var FADE_DURATION_MS = 150;
+var ANIMATE_DURATION_MS = 200;
+var ActionsContainer = import_styled_components7.default.div`
+  display: flex;
+  opacity: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? 1 : 0};
+  pointer-events: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? "auto" : "none"};
+  transition: opacity ${FADE_DURATION_MS}ms ease;
+`;
+var AnimatedAction = import_styled_components7.default.div`
+  display: flex;
+  overflow: hidden;
+  max-width: ${({ $visible }) => $visible ? "40px" : "0"};
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;
+`;
+
+// src/components/chat/chat-message-actions/chat-message-actions.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function ChatMessageActions({ className, messageId, content: content2, role, isHelpful }) {
+  const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
+  const { isCopied, copy } = useCopyToClipboard();
+  const handleCopy = (0, import_react24.useCallback)(() => {
+    copy(content2);
+    onCopyMessage?.(messageId);
+  }, [content2, messageId, copy, onCopyMessage]);
+  const handleThumbUp = (0, import_react24.useCallback)(() => {
+    onThumbUpClick?.(messageId, isHelpful === true ? null : true);
+  }, [messageId, isHelpful, onThumbUpClick]);
+  const handleThumbDown = (0, import_react24.useCallback)(() => {
+    onThumbDownClick?.(messageId, isHelpful === false ? null : false);
+  }, [messageId, isHelpful, onThumbDownClick]);
+  const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
+  const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ActionsContainer, { $role: role, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      IconButton,
+      {
+        icon: isCopied ? IconCheck : IconCopy,
+        onClick: handleCopy,
+        "aria-label": isCopied ? "Copied" : "Copy message"
+      }
+    ),
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      IconButton,
+      {
+        icon: IconThumbUp,
+        onClick: handleThumbUp,
+        isSelected: isHelpful === true,
+        "aria-label": "Good response"
+      }
+    ) }),
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      IconButton,
+      {
+        icon: IconThumbDown,
+        onClick: handleThumbDown,
+        isSelected: isHelpful === false,
+        "aria-label": "Bad response"
+      }
+    ) })
+  ] });
 }
 
 // src/components/chat/chat-message/chat-message-styles.ts
-var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_styled_components8 = __toESM(require("styled-components"), 1);
 init_colors();
-var MessageRow = import_styled_components6.default.div`
+var MessageRow = import_styled_components8.default.div`
   display: flex;
   justify-content: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
 
@@ -18935,7 +19485,7 @@ var MessageRow = import_styled_components6.default.div`
     pointer-events: auto;
   }
 `;
-var MessageContainer = import_styled_components6.default.div`
+var MessageContainer = import_styled_components8.default.div`
   display: flex;
   flex-direction: column;
   align-items: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
@@ -18943,7 +19493,7 @@ var MessageContainer = import_styled_components6.default.div`
   width: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "auto" : "100%"};
   gap: 12px;
 `;
-var MessageBubble = import_styled_components6.default.div`
+var MessageBubble = import_styled_components8.default.div`
   ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
   background: ${({ $role }) => $role === MESSAGE_ROLE.USER ? colors.white : "transparent"};
@@ -18962,12 +19512,12 @@ var MessageBubble = import_styled_components6.default.div`
 `;
 
 // src/components/chat/chat-message/chat-message.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  const clipboardText = (0, import_react20.useMemo)(() => copyMessageText(message), [message]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(MessageContainer, { $role: message.role, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageBubble, { $role: message.role, "data-testid": "message-bubble", children: message.blocks.map((block, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Block, { block }, index2)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const clipboardText = (0, import_react25.useMemo)(() => copyMessageText(message), [message]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MessageContainer, { $role: message.role, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MessageBubble, { $role: message.role, "data-testid": "message-bubble", children: message.blocks.map((block, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Block, { block }, index2)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       ChatMessageActions,
       {
         messageId: message.id,
@@ -18980,57 +19530,68 @@ function ChatMessage({ message }) {
 }
 
 // src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
-var import_styled_components7 = __toESM(require("styled-components"), 1);
+var import_styled_components9 = __toESM(require("styled-components"), 1);
 init_colors();
 
 // src/components/keyboard-shortcut/types.ts
 var KEYBOARD_SHORTCUT_VARIANTS = {
-  /** Outlined keys with a subtle border — use on dark backgrounds. */
+  /** Outlined keys with a subtle border + light glyph — for dark surfaces / app chrome. Default. */
   OUTLINED: "outlined",
-  /** Filled keys with a solid background — use for emphasis or light backgrounds. */
+  /** Filled keys with a solid background — for emphasis. */
   FILLED: "filled"
 };
 
 // src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
 var variantStyles = {
-  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components7.css`
+  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components9.css`
     border: 1px solid ${colors["white-alpha-40"]};
     color: ${colors["brown-10"]};
   `,
-  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components7.css`
+  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components9.css`
     background: ${colors["brown-80"]};
     color: ${colors["brown-10"]};
   `
 };
-var Wrapper = import_styled_components7.default.div`
+var adaptiveStyles = {
+  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components9.css`
+    border: 1px solid color-mix(in oklch, currentColor 40%, transparent);
+    color: currentColor;
+  `,
+  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components9.css`
+    background: color-mix(in oklch, currentColor 12%, transparent);
+    color: currentColor;
+  `
+};
+var Wrapper = import_styled_components9.default.div`
   display: inline-flex;
   align-items: center;
   gap: 2px;
 `;
-var Key = import_styled_components7.default.kbd`
+var Key = import_styled_components9.default.kbd`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 2px;
   border-radius: 6px;
-  ${({ $variant }) => variantStyles[$variant]};
+  ${({ $variant, $adaptive }) => ($adaptive ? adaptiveStyles : variantStyles)[$variant]};
 `;
 
 // src/components/keyboard-shortcut/keyboard-shortcut.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function KeyboardShortcut({
   keys,
   variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
+  adaptive = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Key, { $variant: variant, $adaptive: adaptive, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
 }
 
 // src/components/keyboard-shortcut/icons/icon-ctrl.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function IconCtrl(props) {
   const { width: width2 = 24, height: height2 = 24, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "text",
     {
       x: "50%",
@@ -19047,11 +19608,11 @@ function IconCtrl(props) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_react22 = require("react");
+var import_react27 = require("react");
 
 // src/components/lottie/lottie-styles.ts
-var import_styled_components8 = __toESM(require("styled-components"), 1);
-var LottieContainer = import_styled_components8.default.div`
+var import_styled_components10 = __toESM(require("styled-components"), 1);
+var LottieContainer = import_styled_components10.default.div`
   display: inline-flex;
   width: ${({ $width }) => typeof $width === "number" ? `${$width}px` : $width};
   height: ${({ $height }) => typeof $height === "number" ? `${$height}px` : $height};
@@ -19063,7 +19624,7 @@ var LottieContainer = import_styled_components8.default.div`
 `;
 
 // src/components/lottie/use-lottie.ts
-var import_react21 = require("react");
+var import_react26 = require("react");
 var import_lottie_web = __toESM(require_lottie(), 1);
 function useLottie({
   animationData: animationData2,
@@ -19078,17 +19639,17 @@ function useLottie({
   onLoopComplete,
   onEnterFrame
 }) {
-  const containerRef = (0, import_react21.useRef)(null);
-  const animationRef = (0, import_react21.useRef)(null);
-  const onAnimationLoadedRef = (0, import_react21.useRef)(onAnimationLoaded);
-  const onCompleteRef = (0, import_react21.useRef)(onComplete);
-  const onLoopCompleteRef = (0, import_react21.useRef)(onLoopComplete);
-  const onEnterFrameRef = (0, import_react21.useRef)(onEnterFrame);
+  const containerRef = (0, import_react26.useRef)(null);
+  const animationRef = (0, import_react26.useRef)(null);
+  const onAnimationLoadedRef = (0, import_react26.useRef)(onAnimationLoaded);
+  const onCompleteRef = (0, import_react26.useRef)(onComplete);
+  const onLoopCompleteRef = (0, import_react26.useRef)(onLoopComplete);
+  const onEnterFrameRef = (0, import_react26.useRef)(onEnterFrame);
   onAnimationLoadedRef.current = onAnimationLoaded;
   onCompleteRef.current = onComplete;
   onLoopCompleteRef.current = onLoopComplete;
   onEnterFrameRef.current = onEnterFrame;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!containerRef.current) return;
     const anim = import_lottie_web.default.loadAnimation({
       container: containerRef.current,
@@ -19180,8 +19741,8 @@ function createLottieRef(animationRef) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Lottie = (0, import_react22.forwardRef)(function Lottie2({
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Lottie = (0, import_react27.forwardRef)(function Lottie2({
   animationData: animationData2,
   autoplay,
   loop,
@@ -19211,8 +19772,8 @@ var Lottie = (0, import_react22.forwardRef)(function Lottie2({
     onLoopComplete,
     onEnterFrame
   });
-  (0, import_react22.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  (0, import_react27.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     LottieContainer,
     {
       ref: containerRef,
@@ -19225,81 +19786,6 @@ var Lottie = (0, import_react22.forwardRef)(function Lottie2({
   );
 });
 
-// src/components/text-area/text-area.tsx
-var import_react23 = require("react");
-
-// src/utils/merge-refs.ts
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    }
-  };
-}
-
-// src/components/text-area/text-area-styles.ts
-var import_styled_components9 = __toESM(require("styled-components"), 1);
-init_colors();
-var StyledTextArea = import_styled_components9.default.textarea`
-  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
-  color: ${colors["brown-100"]};
-  border: none;
-  outline: none;
-  resize: none;
-  width: 100%;
-  background: transparent;
-  vertical-align: bottom;
-  max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : "none"};
-  overflow-y: ${({ $maxHeight }) => $maxHeight ? "auto" : "hidden"};
-
-  &::placeholder {
-    color: ${colors["brown-50"]};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-// src/components/text-area/text-area.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var TextArea = (0, import_react23.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
-  const internalRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useLayoutEffect)(() => {
-    const el = internalRef.current;
-    if (el) {
-      el.style.height = "auto";
-      el.style.height = `${el.scrollHeight}px`;
-    }
-  }, [value2]);
-  const handleChange = (0, import_react23.useCallback)(
-    (e) => {
-      onChange(e.target.value);
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    StyledTextArea,
-    {
-      ref: mergeRefs(internalRef, externalRef),
-      value: value2,
-      onChange: handleChange,
-      placeholder,
-      $maxHeight: maxHeight,
-      rows,
-      autoFocus,
-      onKeyDown,
-      disabled,
-      className
-    }
-  );
-});
-
 // src/utils/parse-markdown-table.ts
 function parseCells(line) {
   const trimmed = line.trim();
@@ -19370,165 +19856,6 @@ function convertTableToCSV(table) {
   const dataRows = table.rows.map((row) => row.map(escapeCsvField).join(","));
   return [headerRow, ...dataRows].join("\r\n");
 }
-
-// src/components/button/button.tsx
-var import_react24 = require("react");
-
-// src/components/button/button-styles.ts
-var import_styled_components10 = __toESM(require("styled-components"), 1);
-init_colors();
-
-// src/components/button/constants.ts
-var BUTTON_VARIANT = {
-  SOLID: "solid",
-  OUTLINE: "outline",
-  GHOST: "ghost"
-};
-var BUTTON_SIZE = {
-  XS: "xs",
-  S: "s",
-  M: "m"
-};
-var BUTTON_INTENT = {
-  PRIMARY: "primary",
-  ERROR: "error"
-};
-var ICON_POSITION = {
-  LEADING: "leading",
-  TRAILING: "trailing"
-};
-
-// src/components/button/button-styles.ts
-var intentColors = {
-  [BUTTON_INTENT.PRIMARY]: {
-    base: colors["brown-100"],
-    hover: colors["brown-90"],
-    disabledBg: colors["brown-20"],
-    disabledText: colors["brown-50"],
-    subtleHover: colors["brown-20"],
-    border: colors["brown-40"],
-    disabledBorder: colors["brown-20"]
-  },
-  [BUTTON_INTENT.ERROR]: {
-    base: colors["red-500"],
-    hover: colors["red-600"],
-    disabledBg: colors["red-100"],
-    disabledText: colors["red-200"],
-    subtleHover: colors["red-50"],
-    border: colors["red-200"],
-    disabledBorder: colors["red-100"]
-  }
-};
-var sizeValues = {
-  [BUTTON_SIZE.XS]: { padding: "6px 10px", borderRadius: "8px", gap: "4px" },
-  [BUTTON_SIZE.S]: { padding: "8px 12px", borderRadius: "10px", gap: "6px" },
-  [BUTTON_SIZE.M]: { padding: "10px 14px", borderRadius: "10px", gap: "6px" }
-};
-function sizeMixin({ $size }) {
-  const s = sizeValues[$size];
-  return import_styled_components10.css`
-    padding: ${s.padding};
-    border-radius: ${s.borderRadius};
-    gap: ${s.gap};
-  `;
-}
-var variantColorMap = {
-  [BUTTON_VARIANT.SOLID]: (c) => ({
-    background: c.base,
-    color: colors.white,
-    border: "none",
-    hoverBg: c.hover,
-    disabledBg: c.disabledBg,
-    disabledColor: c.disabledText
-  }),
-  [BUTTON_VARIANT.OUTLINE]: (c) => ({
-    background: colors.white,
-    color: c.base,
-    border: `1px solid ${c.border}`,
-    hoverBg: c.subtleHover,
-    disabledColor: c.disabledText,
-    disabledBorder: c.disabledBorder
-  }),
-  [BUTTON_VARIANT.GHOST]: (c) => ({
-    background: "transparent",
-    color: c.base,
-    border: "none",
-    hoverBg: c.subtleHover,
-    disabledColor: c.disabledText
-  })
-};
-function variantMixin({
-  $variant,
-  $intent
-}) {
-  const v = variantColorMap[$variant](intentColors[$intent]);
-  return import_styled_components10.css`
-    background: ${v.background};
-    color: ${v.color};
-    border: ${v.border};
-
-    &:hover:not(:disabled) {
-      background: ${v.hoverBg};
-    }
-
-    &:disabled {
-      color: ${v.disabledColor};
-      ${v.disabledBg ? `background: ${v.disabledBg};` : ""}
-      ${v.disabledBorder ? `border-color: ${v.disabledBorder};` : ""}
-    }
-  `;
-}
-var StyledButton = import_styled_components10.default.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  ${sizeMixin}
-  ${variantMixin}
-`;
-
-// src/components/button/button.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Button2 = (0, import_react24.forwardRef)(function Button3({
-  children,
-  variant = BUTTON_VARIANT.SOLID,
-  intent = BUTTON_INTENT.PRIMARY,
-  size = BUTTON_SIZE.M,
-  icon,
-  iconPosition = ICON_POSITION.LEADING,
-  disabled = false,
-  onClick,
-  className,
-  "aria-label": ariaLabel
-}, ref) {
-  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon, size: 16 }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    StyledButton,
-    {
-      ref,
-      type: "button",
-      $variant: variant,
-      $intent: intent,
-      $size: size,
-      disabled,
-      onClick: disabled ? void 0 : onClick,
-      className,
-      "aria-label": ariaLabel,
-      children: [
-        iconPosition === ICON_POSITION.LEADING && iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children }),
-        iconPosition === ICON_POSITION.TRAILING && iconElement
-      ]
-    }
-  );
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArtifactCopyAsImageButton,
@@ -19544,6 +19871,7 @@ var Button2 = (0, import_react24.forwardRef)(function Button3({
   BlockContext,
   BlockServices,
   Button,
+  CHAT_STATUS,
   ChartArtifact,
   ChatContext,
   ChatMessage,
@@ -19557,6 +19885,14 @@ var Button2 = (0, import_react24.forwardRef)(function Button3({
   KeyboardShortcut,
   Lottie,
   MESSAGE_ROLE,
+  MouseGrid,
+  PromptInput,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+  Suggestion,
+  Suggestions,
   TableArtifact,
   TextArea,
   TextBlockService,