@shapesos/clay 0.4.0 → 0.4.1

package/dist/lottie.js

@@ -1,6 +1,6 @@
 import {
   Lottie
-} from "./chunk-UKM5VQKW.js";
+} from "./chunk-BIATJTD4.js";
 import "./chunk-5WRI5ZAA.js";
 export {
   Lottie

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapesos/clay",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "devDependencies": {

package/dist/chunk-2GFOESHR.js

@@ -1,613 +0,0 @@
-import {
-  typographyMixin,
-  typographyTypes
-} from "./chunk-A6DKIFWS.js";
-import {
-  Icon,
-  IconButton
-} from "./chunk-P7NISN4V.js";
-import {
-  colors
-} from "./chunk-6HNZQ2BF.js";
-
-// src/chat/chat-root/chat-root.tsx
-import { useMemo } from "react";
-
-// src/chat/chat-context/chat-context.ts
-import { createContext, useContext } from "react";
-var ChatContext = createContext(null);
-function useChatContext() {
-  const context = useContext(ChatContext);
-  if (!context) {
-    throw new Error("useChatContext must be used within a Chat.Root component");
-  }
-  return context;
-}
-
-// src/chat/chat-root/chat-root-styles.ts
-import styled from "styled-components";
-var RootContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-`;
-
-// src/chat/chat-root/chat-root.tsx
-import { jsx } from "react/jsx-runtime";
-function ChatRoot({
-  messages,
-  onSendMessage,
-  isLoading = false,
-  onStop,
-  onCopyMessage,
-  onThumbUpClick,
-  onThumbDownClick,
-  children
-}) {
-  const contextValue = useMemo(
-    () => ({ messages, onSendMessage, isLoading, onStop, onCopyMessage, onThumbUpClick, onThumbDownClick }),
-    [messages, onSendMessage, isLoading, onStop, onCopyMessage, onThumbUpClick, onThumbDownClick]
-  );
-  return /* @__PURE__ */ jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RootContainer, { children }) });
-}
-
-// src/chat/chat-message-content/chat-message-content.tsx
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-// src/chat/chat-message-content/chat-message-content-styles.ts
-import styled2 from "styled-components";
-var ContentWrapper = styled2.div`
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-  color: ${colors["brown-100"]};
-  word-break: break-word;
-
-  & p {
-    margin: 0;
-  }
-
-  & p + p {
-    margin-top: 8px;
-  }
-
-  & ul,
-  & ol {
-    margin: 4px 0;
-    padding-left: 20px;
-  }
-
-  & a {
-    color: ${colors["brown-100"]};
-    text-decoration: underline;
-  }
-
-  & pre {
-    overflow-x: auto;
-    padding: 8px;
-    margin: 4px 0;
-    background: ${colors["brown-10"]};
-    border: 1px solid ${colors["brown-alpha-12"]};
-    border-radius: 8px;
-  }
-
-  & pre code {
-    padding: 0;
-    background: none;
-    border-radius: 0;
-  }
-
-  & code {
-    padding: 2px 4px;
-    background: ${colors["brown-10"]};
-    border-radius: 4px;
-  }
-
-  & table {
-    border-collapse: collapse;
-    margin: 8px 0;
-    width: 100%;
-  }
-
-  & th,
-  & td {
-    border: 1px solid ${colors["brown-alpha-12"]};
-    padding: 6px 12px;
-    text-align: left;
-  }
-
-  & th {
-    background: ${colors["brown-10"]};
-    font-weight: 600;
-  }
-
-  & blockquote {
-    margin: 4px 0;
-    padding-left: 12px;
-    border-left: 3px solid ${colors["brown-30"]};
-    color: ${colors["brown-70"]};
-  }
-`;
-
-// src/chat/chat-message-content/chat-message-content.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function ChatMessageContent({ content }) {
-  return /* @__PURE__ */ jsx2(ContentWrapper, { children: /* @__PURE__ */ jsx2(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content }) });
-}
-
-// src/chat/chat-message-actions/chat-message-actions.tsx
-import { useCallback as useCallback2 } from "react";
-
-// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
-import { forwardRef, createElement } from "react";
-
-// node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
-var defaultAttributes = {
-  outline: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  },
-  filled: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none"
-  }
-};
-
-// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
-var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component = forwardRef(
-    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes[type],
-        width: size,
-        height: size,
-        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
-        ...type === "filled" ? {
-          fill: color
-        } : {
-          strokeWidth: stroke,
-          stroke: color
-        },
-        ...rest
-      },
-      [
-        title && createElement("title", { key: "svg-title" }, title),
-        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    )
-  );
-  Component.displayName = `${iconNamePascal}`;
-  return Component;
-};
-
-// node_modules/@tabler/icons-react/dist/esm/icons/IconArrowUp.mjs
-var __iconNode = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 11l-6 -6", "key": "svg-1" }], ["path", { "d": "M6 11l6 -6", "key": "svg-2" }]];
-var IconArrowUp = createReactComponent("outline", "arrow-up", "ArrowUp", __iconNode);
-
-// node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
-var __iconNode2 = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
-var IconCheck = createReactComponent("outline", "check", "Check", __iconNode2);
-
-// node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs
-var __iconNode3 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
-var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode3);
-
-// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
-var __iconNode4 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
-var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode4);
-
-// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
-var __iconNode5 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
-var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode5);
-
-// node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs
-var __iconNode6 = [["path", { "d": "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", "key": "svg-0" }]];
-var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "PlayerStopFilled", __iconNode6);
-
-// src/chat/hooks/use-copy-to-clipboard.ts
-import { useState, useCallback, useRef, useEffect } from "react";
-
-// src/utils/clipboard.ts
-function copyToClipboard(text, options) {
-  navigator.clipboard.writeText(text).then(
-    () => options?.onSuccess?.(),
-    (error) => options?.onFailure?.(error)
-  );
-}
-
-// src/chat/hooks/use-copy-to-clipboard.ts
-var RESET_DELAY_MS = 2e3;
-function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  const copy = useCallback((text) => {
-    copyToClipboard(text, {
-      onSuccess: () => {
-        setIsCopied(true);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          setIsCopied(false);
-          timeoutRef.current = null;
-        }, RESET_DELAY_MS);
-      }
-    });
-  }, []);
-  return { isCopied, copy };
-}
-
-// src/chat/chat-message-actions/chat-message-actions-styles.ts
-import styled3 from "styled-components";
-var ActionsContainer = styled3.div`
-  display: flex;
-  gap: 2px;
-  margin-top: 4px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 150ms ease;
-`;
-
-// src/chat/chat-message-actions/chat-message-actions.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function ChatMessageActions({ messageId, content, role, isHelpful }) {
-  const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
-  const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = useCallback2(() => {
-    copy(content);
-    onCopyMessage?.(messageId);
-  }, [content, messageId, copy, onCopyMessage]);
-  const handleThumbUp = useCallback2(() => {
-    onThumbUpClick?.(messageId, isHelpful === true ? null : true);
-  }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = useCallback2(() => {
-    onThumbDownClick?.(messageId, isHelpful === false ? null : false);
-  }, [messageId, isHelpful, onThumbDownClick]);
-  const isAssistant = role === "assistant";
-  const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ jsxs(ActionsContainer, { children: [
-    /* @__PURE__ */ jsx3(
-      IconButton,
-      {
-        icon: isCopied ? IconCheck : IconCopy,
-        onClick: handleCopy,
-        "aria-label": isCopied ? "Copied" : "Copy message"
-      }
-    ),
-    hasFeedback && /* @__PURE__ */ jsx3(
-      IconButton,
-      {
-        icon: IconThumbUp,
-        onClick: handleThumbUp,
-        isSelected: isHelpful === true,
-        "aria-label": "Good response"
-      }
-    ),
-    hasFeedback && /* @__PURE__ */ jsx3(
-      IconButton,
-      {
-        icon: IconThumbDown,
-        onClick: handleThumbDown,
-        isSelected: isHelpful === false,
-        "aria-label": "Bad response"
-      }
-    )
-  ] });
-}
-
-// src/chat/chat-message/chat-message-styles.ts
-import styled4 from "styled-components";
-var MessageRow = styled4.div`
-  display: flex;
-  justify-content: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
-`;
-var MessageContainer = styled4.div`
-  display: flex;
-  flex-direction: column;
-  align-items: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
-  max-width: 90%;
-
-  &:hover ${ActionsContainer} {
-    opacity: 1;
-    pointer-events: auto;
-  }
-`;
-var MessageBubble = styled4.div`
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-  color: ${colors["brown-100"]};
-  background: ${({ $role }) => $role === "user" ? colors.white : "transparent"};
-  padding: ${({ $role }) => $role === "user" ? "12px 16px" : "0"};
-  border-radius: ${({ $role }) => $role === "user" ? "16px" : "0"};
-`;
-
-// src/chat/chat-message/chat-message.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function ChatMessage({ message }) {
-  return /* @__PURE__ */ jsx4(MessageRow, { $role: message.role, children: /* @__PURE__ */ jsxs2(MessageContainer, { $role: message.role, children: [
-    /* @__PURE__ */ jsx4(MessageBubble, { $role: message.role, children: /* @__PURE__ */ jsx4(ChatMessageContent, { content: message.content }) }),
-    /* @__PURE__ */ jsx4(
-      ChatMessageActions,
-      {
-        messageId: message.id,
-        content: message.content,
-        role: message.role,
-        isHelpful: message.isHelpful
-      }
-    )
-  ] }) });
-}
-
-// src/chat/hooks/use-auto-scroll.ts
-import { useRef as useRef2, useState as useState2, useEffect as useEffect2, useLayoutEffect, useCallback as useCallback3 } from "react";
-function useAutoScroll(messageCount) {
-  const scrollContainerRef = useRef2(null);
-  const sentinelRef = useRef2(null);
-  const [isAtBottom, setIsAtBottom] = useState2(true);
-  const prevMessageCountRef = useRef2(messageCount);
-  const hasInitializedRef = useRef2(false);
-  useLayoutEffect(() => {
-    const el = scrollContainerRef.current;
-    if (el) {
-      el.scrollTop = el.scrollHeight;
-    }
-  }, []);
-  useEffect2(() => {
-    if (!hasInitializedRef.current) {
-      hasInitializedRef.current = true;
-      requestAnimationFrame(() => {
-        const el = scrollContainerRef.current;
-        if (el) {
-          el.scrollTop = el.scrollHeight;
-        }
-      });
-    }
-  }, []);
-  useEffect2(() => {
-    const sentinel = sentinelRef.current;
-    const scrollContainer = scrollContainerRef.current;
-    if (!sentinel || !scrollContainer) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsAtBottom(entry.isIntersecting);
-      },
-      { root: scrollContainer, threshold: 0 }
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, []);
-  useEffect2(() => {
-    if (!hasInitializedRef.current) return;
-    if (messageCount > prevMessageCountRef.current) {
-      requestAnimationFrame(() => {
-        const el = scrollContainerRef.current;
-        if (el) {
-          el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-        }
-      });
-    }
-    prevMessageCountRef.current = messageCount;
-  }, [messageCount]);
-  const scrollToBottom = useCallback3(() => {
-    const el = scrollContainerRef.current;
-    if (el) {
-      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-    }
-  }, []);
-  return { scrollContainerRef, sentinelRef, isAtBottom, scrollToBottom };
-}
-
-// src/chat/chat-message-list/chat-message-list-styles.ts
-import styled5 from "styled-components";
-var ListContainer = styled5.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${colors["brown-30"]};
-    border-radius: 3px;
-  }
-`;
-var MessagesList = styled5.div`
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  padding: 0 16px 32px 16px;
-`;
-var ScrollSentinel = styled5.div`
-  flex-shrink: 0;
-  height: 16px;
-`;
-
-// src/chat/chat-message-list/chat-message-list.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function ChatMessageList() {
-  const { messages } = useChatContext();
-  const { scrollContainerRef, sentinelRef } = useAutoScroll(messages.length);
-  return /* @__PURE__ */ jsxs3(ListContainer, { ref: scrollContainerRef, "data-testid": "chat-list-container", children: [
-    /* @__PURE__ */ jsx5(MessagesList, { children: messages.map((message) => /* @__PURE__ */ jsx5(ChatMessage, { message }, message.id)) }),
-    /* @__PURE__ */ jsx5(ScrollSentinel, { ref: sentinelRef, "data-testid": "chat-scroll-sentinel" })
-  ] });
-}
-
-// src/chat/chat-composer/chat-composer.tsx
-import { useState as useState3, useCallback as useCallback4, useRef as useRef3, useEffect as useEffect3 } from "react";
-
-// src/chat/chat-composer/chat-composer-styles.ts
-import styled6 from "styled-components";
-var ComposerContainer = styled6.div`
-  position: relative;
-  background: ${colors.white};
-  border-radius: 12px;
-  box-shadow: 0 0 4px 0 ${colors["brown-alpha-12"]};
-  padding: 8px 0;
-`;
-var TextArea = styled6.textarea`
-  display: block;
-  width: 100%;
-  resize: none;
-  border: none;
-  background: transparent;
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-  color: ${colors["brown-90"]};
-  padding: 4px 46px 4px 16px;
-  min-height: 20px;
-  max-height: 200px;
-  overflow-y: auto;
-  box-sizing: border-box;
-
-  &::placeholder {
-    color: ${colors["brown-60"]};
-  }
-
-  &:focus {
-    outline: none;
-  }
-`;
-var SendButton = styled6.button`
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 30px;
-  height: 30px;
-  border: none;
-  border-radius: 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: ${colors["brown-100"]};
-  color: ${colors.white};
-  transition: background-color 75ms;
-  padding: 0;
-
-  &:disabled {
-    background: ${colors["brown-50"]};
-    cursor: default;
-  }
-`;
-
-// src/chat/chat-composer/chat-composer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function ChatComposer({ placeholder = "Type a message..." }) {
-  const { onSendMessage, isLoading, onStop } = useChatContext();
-  const [value, setValue] = useState3("");
-  const textAreaRef = useRef3(null);
-  const isEmpty = value.trim().length === 0;
-  const resizeTextArea = useCallback4(() => {
-    const el = textAreaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, []);
-  useEffect3(() => {
-    resizeTextArea();
-  }, [value, resizeTextArea]);
-  useEffect3(() => {
-    textAreaRef.current?.focus();
-  }, []);
-  const handleSend = useCallback4(() => {
-    const trimmed = value.trim();
-    if (!trimmed) return;
-    onSendMessage(trimmed);
-    setValue("");
-    requestAnimationFrame(() => textAreaRef.current?.focus());
-  }, [value, onSendMessage]);
-  const handleKeyDown = useCallback4(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSend();
-      }
-    },
-    [handleSend]
-  );
-  const handleChange = useCallback4((e) => {
-    setValue(e.target.value);
-  }, []);
-  const handleButtonClick = useCallback4(() => {
-    if (isLoading && onStop) {
-      onStop();
-    } else {
-      handleSend();
-    }
-  }, [isLoading, onStop, handleSend]);
-  return /* @__PURE__ */ jsxs4(ComposerContainer, { children: [
-    /* @__PURE__ */ jsx6(
-      TextArea,
-      {
-        ref: textAreaRef,
-        value,
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        placeholder,
-        rows: 1
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      SendButton,
-      {
-        onClick: handleButtonClick,
-        disabled: !isLoading && isEmpty,
-        "aria-label": isLoading ? "Stop generating" : "Send message",
-        children: isLoading ? /* @__PURE__ */ jsx6(Icon, { icon: IconPlayerStopFilled, size: 16 }) : /* @__PURE__ */ jsx6(Icon, { icon: IconArrowUp, size: 16 })
-      }
-    )
-  ] });
-}
-
-// src/chat/chat-namespace.ts
-var Chat = {
-  Root: ChatRoot,
-  MessageList: ChatMessageList,
-  Composer: ChatComposer
-};
-
-export {
-  Chat
-};
-/*! Bundled license information:
-
-@tabler/icons-react/dist/esm/defaultAttributes.mjs:
-@tabler/icons-react/dist/esm/createReactComponent.mjs:
-@tabler/icons-react/dist/esm/icons/IconArrowUp.mjs:
-@tabler/icons-react/dist/esm/icons/IconCheck.mjs:
-@tabler/icons-react/dist/esm/icons/IconCopy.mjs:
-@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
-@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
-@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs:
-@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
-  (**
-   * @license @tabler/icons-react v3.37.1 - MIT
-   *
-   * This source code is licensed under the MIT license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-*/
-//# sourceMappingURL=chunk-2GFOESHR.js.map