@shapesos/clay 0.13.0 → 0.14.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,
@@ -18658,6 +18722,18 @@ var TextBlockWrapper = import_styled_components4.default.div`
     margin-block: 4px;
   }
 
+  & ul {
+    list-style-type: disc;
+  }
+
+  & ul ul {
+    list-style-type: circle;
+  }
+
+  & ul ul ul {
+    list-style-type: square;
+  }
+
   & ol {
     list-style-type: decimal;
   }
@@ -18773,136 +18849,517 @@ 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,
+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");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function MouseGrid({ glowColor } = {}) {
+  const layerRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
+    let raf = 0;
+    let clientX = 0;
+    let clientY = 0;
+    function flush() {
+      raf = 0;
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      const rect = layer.getBoundingClientRect();
+      layer.style.setProperty("--vibe-mx", `${clientX - rect.left}px`);
+      layer.style.setProperty("--vibe-my", `${clientY - rect.top}px`);
+    }
+    function onMove(event) {
+      clientX = event.clientX;
+      clientY = event.clientY;
+      if (raf) {
+        return;
+      }
+      raf = requestAnimationFrame(flush);
+    }
+    window.addEventListener("mousemove", onMove, { passive: true });
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      if (raf) {
+        cancelAnimationFrame(raf);
+      }
+    };
+  }, []);
+  const glowStyle = glowColor ? { "--vibe-glow-color": glowColor } : void 0;
+  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", { className: "vibe-mouse-glow", style: glowStyle })
+  ] });
+}
+
+// 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-full 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"
@@ -18912,9 +19369,9 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
 }
 
 // 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"};
 
@@ -18923,7 +19380,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"};
@@ -18931,7 +19388,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"};
@@ -18950,12 +19407,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,
@@ -18968,57 +19425,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%",
@@ -19035,11 +19503,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};
@@ -19051,7 +19519,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,
@@ -19066,17 +19534,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,
@@ -19168,8 +19636,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,
@@ -19199,8 +19667,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,
@@ -19213,81 +19681,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();
@@ -19358,165 +19751,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,
@@ -19532,6 +19766,7 @@ var Button2 = (0, import_react24.forwardRef)(function Button3({
   BlockContext,
   BlockServices,
   Button,
+  CHAT_STATUS,
   ChartArtifact,
   ChatContext,
   ChatMessage,
@@ -19545,6 +19780,14 @@ var Button2 = (0, import_react24.forwardRef)(function Button3({
   KeyboardShortcut,
   Lottie,
   MESSAGE_ROLE,
+  MouseGrid,
+  PromptInput,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+  Suggestion,
+  Suggestions,
   TableArtifact,
   TextArea,
   TextBlockService,