@meshagent/meshagent-tailwind 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.5.2]
+- Stability
+
 ## [0.5.1]
 - Stability
 

package/dist/cjs/Chat.js

@@ -26,20 +26,33 @@ var import_meshagent_react = require("@meshagent/meshagent-react");
 var import_ChatThread = require("./ChatThread");
 var import_ChatInput = require("./ChatInput");
 var import_ChatTypingIndicator = require("./ChatTypingIndicator");
-var import_card = require("./components/ui/card");
 function Chat({ room, path, participants }) {
   const {
     messages,
     sendMessage,
-    selectAttachments
+    selectAttachments,
+    attachments,
+    setAttachments
   } = (0, import_meshagent_react.useChat)({ room, path, participants });
   const localParticipantName = room.localParticipant.getAttribute("name");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: "flex flex-col min-h-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardHeader, { className: "border-b flex-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardTitle, { children: "Chat" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatThread.ChatThread, { messages, localParticipantName }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatTypingIndicator.ChatTypingIndicator, { room, path }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatInput.ChatInput, { onSubmit: sendMessage, onFilesSelected: selectAttachments })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ChatThread.ChatThread,
+      {
+        room,
+        messages,
+        localParticipantName
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatTypingIndicator.ChatTypingIndicator, { room, path }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ChatInput.ChatInput,
+      {
+        onSubmit: sendMessage,
+        attachments,
+        onFilesSelected: selectAttachments,
+        setAttachments
+      }
+    )
   ] });
 }

package/dist/cjs/ChatInput.d.ts

@@ -1,7 +1,9 @@
-import { ChatMessage } from "@meshagent/meshagent-react";
+import { ChatMessage, FileUpload } from "@meshagent/meshagent-react";
 interface ChatInputProps {
     onSubmit: (message: ChatMessage) => void;
     onFilesSelected: (files: File[]) => void;
+    attachments: FileUpload[];
+    setAttachments: (attachments: FileUpload[]) => void;
 }
-export declare function ChatInput({ onSubmit }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/ChatInput.js

@@ -32,39 +32,61 @@ __export(ChatInput_exports, {
 });
 module.exports = __toCommonJS(ChatInput_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 var import_uuid = require("uuid");
 var import_meshagent_react = require("@meshagent/meshagent-react");
 var import_button = require("./components/ui/button");
 var import_textarea = require("./components/ui/textarea");
-function ChatInput({ onSubmit }) {
-  const [value, setValue] = React.useState("");
-  const handleSend = () => {
-    const trimmed = value.trim();
-    if (!trimmed) return;
+var import_FileUploader = require("./FileUploader");
+var import_UploadPill = require("./UploadPill");
+function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
+  const [value, setValue] = import_react.default.useState("");
+  const handleSend = (0, import_react.useCallback)(() => {
+    const trimmed2 = value.trim();
+    if (attachments.length === 0 && !trimmed2) {
+      return;
+    }
     onSubmit(new import_meshagent_react.ChatMessage({
       id: (0, import_uuid.v4)(),
-      text: trimmed
+      text: trimmed2,
+      attachments: attachments.map((file) => file.path)
     }));
     setValue("");
-  };
+    setAttachments([]);
+  }, [value, onSubmit, attachments]);
   const onKeyDown = (e) => {
-    if (e.key === "Enter" && e.ctrlKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-t p-3 flex gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_textarea.Textarea,
+  const cancelAttachment = (0, import_react.useCallback)((attachment) => {
+    setAttachments(attachments.filter((f) => f.path !== attachment.path));
+  }, [attachments, setAttachments]);
+  const trimmed = value.trim();
+  const disabled = !trimmed && attachments.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-t py-3 gap-3 flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-0 gap-2 flex-wrap", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_UploadPill.UploadPill,
       {
-        placeholder: "Type a message and press Ctrl+Enter\u2026",
-        className: "flex-1 resize-none h-20",
-        value,
-        onChange: (e) => setValue(e.currentTarget.value),
-        onKeyDown
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: handleSend, disabled: !value.trim(), children: "Send" })
+        attachment,
+        onCancel: cancelAttachment
+      },
+      attachment.path
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-0 gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FileUploader.FileUploader, { onFilesSelected }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_textarea.Textarea,
+        {
+          placeholder: "Type a message and press Enter",
+          className: "flex-1 resize-none h-20",
+          value,
+          onChange: (e) => setValue(e.currentTarget.value),
+          onKeyDown
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: handleSend, disabled, children: "Send" })
+    ] })
   ] });
 }

package/dist/cjs/ChatThread.d.ts

@@ -1,6 +1,7 @@
-import { Element } from "@meshagent/meshagent";
+import { Element, RoomClient } from "@meshagent/meshagent";
 export declare function timeAgo(iso: string): string;
-export declare function ChatThread({ messages, localParticipantName }: {
+export declare function ChatThread({ room, messages, localParticipantName }: {
+    room: RoomClient;
     messages: Element[];
     localParticipantName: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/ChatThread.js

@@ -33,7 +33,8 @@ __export(ChatThread_exports, {
 });
 module.exports = __toCommonJS(ChatThread_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_lucide_react = require("lucide-react");
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_rehype_sanitize = __toESM(require("rehype-sanitize"));
@@ -51,6 +52,9 @@ function formatDateTime(iso) {
     timeZoneName: "short"
   }).format(date);
 }
+function isImageFilename(filename) {
+  return /\.(jpe?g|png|gif|bmp|webp|avif|svg)$/i.test(filename);
+}
 function timeAgo(iso) {
   const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
   const date = new Date(iso);
@@ -66,28 +70,80 @@ function timeAgo(iso) {
   if (Math.abs(minutes) >= 1) return rtf.format(minutes, "minute");
   return rtf.format(seconds, "second");
 }
-function ChatThread({ messages, localParticipantName }) {
-  const bottomRef = React.useRef(null);
-  React.useEffect(() => {
+function ChatThread({ room, messages, localParticipantName }) {
+  const bottomRef = import_react.default.useRef(null);
+  (0, import_react.useEffect)(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex-shrink-1 basis-0 overflow-y-auto p-4 space-y-4", children: [
-    messages.map((message) => {
-      const mine = localParticipantName == message.getAttribute("author_name");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("flex flex-col max-w-prose items-start gap-1", { "justify-end": mine, "justify-start": !mine }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-0.5 text-xs text-muted-foreground", children: [
-          "By ",
-          message.getAttribute("author_name"),
-          " at ",
-          timeAgo(message.getAttribute("created_at"))
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatBubble, { text: message.getAttribute("text"), mine }, message.id)
-      ] }, message.id);
-    }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col flex-1 flex-shrink-1 basis-0 overflow-y-auto p-4 space-y-4", children: [
+    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ChatMessage,
+      {
+        room,
+        message,
+        localParticipantName
+      },
+      message.id
+    )),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: bottomRef })
   ] });
 }
+function ChatImage({ room, path, alt }) {
+  const [url, setUrl] = import_react.default.useState("");
+  (0, import_react.useEffect)(() => {
+    room.storage.downloadUrl(path).then(setUrl);
+  }, [path]);
+  return url === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: url, alt, className: "max-h-48 max-w-full rounded-lg" });
+}
+function ChatMessage({ room, message, localParticipantName }) {
+  const mine = localParticipantName == message.getAttribute("author_name");
+  const attachments = (message.children ?? []).filter((child) => child.tagName === "file");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("flex flex-col max-w-prose gap-1", { "items-end self-end": mine, "items-start self-start": !mine }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-0.5 text-xs text-muted-foreground", children: [
+      "By ",
+      message.getAttribute("author_name"),
+      " at ",
+      timeAgo(message.getAttribute("created_at"))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatBubble, { text: message.getAttribute("text"), mine }, message.id),
+    attachments && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("flex flex-wrap gap-2 mt-2", { "text-right": mine }), children: attachments.map((attachment) => {
+      const path = attachment.getAttribute("path") || "";
+      const isImage = isImageFilename(path);
+      const filename = path.split("/").pop();
+      if (isImage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ChatImage,
+          {
+            room,
+            path,
+            alt: filename || "Image Attachment"
+          },
+          attachment.id
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            room.storage.downloadUrl(path).then((url) => window.open(url, "_blank"));
+          },
+          className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2 cursor-pointer hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          rel: "noopener noreferrer",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-sm font-medium leading-none", children: filename }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Download, { className: "inline-block mr-1" })
+          ]
+        },
+        attachment.id
+      );
+    }) })
+  ] });
+}
 function ChatBubble({ text, mine }) {
+  if (!text || text.trim() === "") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)(
     "rounded-lg px-4 py-2 text-sm max-w-prose whitespace-pre-wrap",
     {
@@ -100,8 +156,9 @@ function ChatBubble({ text, mine }) {
       remarkPlugins: [import_remark_gfm.default],
       rehypePlugins: [import_rehype_sanitize.default, import_rehype_highlight.default],
       components: {
-        p: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props, className: "mb-2 last:mb-0" }),
-        code: ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "my-2 overflow-x-auto rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { ...props, className, children }) })
+        pre: ({ node, className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { ...props, className: (0, import_utils.cn)("overflow-x-auto rounded-lg", className), children }),
+        p: ({ node, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props, className: "mb-2 last:mb-0", children }),
+        code: ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { ...props, className, children })
       },
       children: text
     }

package/dist/cjs/ChatTypingIndicator.js

@@ -22,15 +22,14 @@ __export(ChatTypingIndicator_exports, {
 });
 module.exports = __toCommonJS(ChatTypingIndicator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_lucide_react = require("lucide-react");
 var import_meshagent_react = require("@meshagent/meshagent-react");
 function ChatTypingIndicator({ room, path }) {
   const { typing } = (0, import_meshagent_react.useRoomIndicators)({ room, path });
   return typing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
     [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_lucide_react.Circle,
+      "span",
       {
-        className: "w-2 h-2 text-gray-500",
+        className: `inline-block w-2 h-2 bg-current rounded-full`,
         style: {
           animation: "typingBounce 0.6s ease-in-out infinite",
           animationDelay: `${index * 0.2}s`

package/dist/cjs/FileUploader.js

@@ -25,10 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_button = require("./components/ui/button");
-function FileUploader({
-  onFilesSelected,
-  accept = ""
-}) {
+function FileUploader({ onFilesSelected, accept = "" }) {
   const inputRef = (0, import_react.useRef)(null);
   const handleButtonClick = () => inputRef.current?.click();
   const handleFileChange = (e) => {

package/dist/cjs/UploadPill.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FileUpload } from "@meshagent/meshagent-react";
+export interface UploadPillProps {
+    attachment: FileUpload;
+    onCancel: (attachment: FileUpload) => void;
+}
+export declare function UploadPill({ attachment, onCancel }: UploadPillProps): React.ReactElement;

package/dist/cjs/UploadPill.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var UploadPill_exports = {};
+__export(UploadPill_exports, {
+  UploadPill: () => UploadPill
+});
+module.exports = __toCommonJS(UploadPill_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_progress = require("./components/ui/progress");
+var import_lucide_react = require("lucide-react");
+function UploadPill({ attachment, onCancel }) {
+  const [progress, setProgress] = (0, import_react.useState)(0);
+  const handleCancel = (0, import_react.useCallback)(() => onCancel(attachment), [attachment, onCancel]);
+  (0, import_react.useEffect)(() => {
+    const onChange = () => setProgress(
+      Math.round(attachment.bytesUploaded * 100 / attachment.size)
+    );
+    attachment.on("status", onChange);
+    return () => attachment.off("status", onChange);
+  }, [attachment]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-sm font-medium leading-none", children: attachment.filename }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleCancel,
+        "aria-label": "Cancel upload",
+        className: "rounded-full p-1 transition-colors hover:bg-muted-foreground/20 focus:outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_progress.Progress,
+      {
+        value: progress,
+        className: "absolute left-0 bottom-0 h-0.5 w-full rounded-full bg-muted-foreground/20"
+      }
+    )
+  ] });
+}
+;

package/dist/cjs/components/ui/progress.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+export declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ui/progress.js

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var progress_exports = {};
+__export(progress_exports, {
+  Progress: () => Progress
+});
+module.exports = __toCommonJS(progress_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
+var import_utils = require("@/lib/utils");
+function Progress({ className, value, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: (0, import_utils.cn)(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-primary h-full w-full flex-1 transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}

package/dist/esm/Chat.js

@@ -3,21 +3,34 @@ import { useChat } from "@meshagent/meshagent-react";
 import { ChatThread } from "./ChatThread";
 import { ChatInput } from "./ChatInput";
 import { ChatTypingIndicator } from "./ChatTypingIndicator";
-import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card";
 function Chat({ room, path, participants }) {
   const {
     messages,
     sendMessage,
-    selectAttachments
+    selectAttachments,
+    attachments,
+    setAttachments
   } = useChat({ room, path, participants });
   const localParticipantName = room.localParticipant.getAttribute("name");
-  return /* @__PURE__ */ jsxs(Card, { className: "flex flex-col min-h-0", children: [
-    /* @__PURE__ */ jsx(CardHeader, { className: "border-b flex-0", children: /* @__PURE__ */ jsx(CardTitle, { children: "Chat" }) }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
-      /* @__PURE__ */ jsx(ChatThread, { messages, localParticipantName }),
-      /* @__PURE__ */ jsx(ChatTypingIndicator, { room, path }),
-      /* @__PURE__ */ jsx(ChatInput, { onSubmit: sendMessage, onFilesSelected: selectAttachments })
-    ] })
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
+    /* @__PURE__ */ jsx(
+      ChatThread,
+      {
+        room,
+        messages,
+        localParticipantName
+      }
+    ),
+    /* @__PURE__ */ jsx(ChatTypingIndicator, { room, path }),
+    /* @__PURE__ */ jsx(
+      ChatInput,
+      {
+        onSubmit: sendMessage,
+        attachments,
+        onFilesSelected: selectAttachments,
+        setAttachments
+      }
+    )
   ] });
 }
 export {

package/dist/esm/ChatInput.d.ts

@@ -1,7 +1,9 @@
-import { ChatMessage } from "@meshagent/meshagent-react";
+import { ChatMessage, FileUpload } from "@meshagent/meshagent-react";
 interface ChatInputProps {
     onSubmit: (message: ChatMessage) => void;
     onFilesSelected: (files: File[]) => void;
+    attachments: FileUpload[];
+    setAttachments: (attachments: FileUpload[]) => void;
 }
-export declare function ChatInput({ onSubmit }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/ChatInput.js

@@ -1,38 +1,60 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React, { useCallback } from "react";
 import { v4 as uuidV4 } from "uuid";
 import { ChatMessage } from "@meshagent/meshagent-react";
 import { Button } from "./components/ui/button";
 import { Textarea } from "./components/ui/textarea";
-function ChatInput({ onSubmit }) {
+import { FileUploader } from "./FileUploader";
+import { UploadPill } from "./UploadPill";
+function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
   const [value, setValue] = React.useState("");
-  const handleSend = () => {
-    const trimmed = value.trim();
-    if (!trimmed) return;
+  const handleSend = useCallback(() => {
+    const trimmed2 = value.trim();
+    if (attachments.length === 0 && !trimmed2) {
+      return;
+    }
     onSubmit(new ChatMessage({
       id: uuidV4(),
-      text: trimmed
+      text: trimmed2,
+      attachments: attachments.map((file) => file.path)
     }));
     setValue("");
-  };
+    setAttachments([]);
+  }, [value, onSubmit, attachments]);
   const onKeyDown = (e) => {
-    if (e.key === "Enter" && e.ctrlKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "border-t p-3 flex gap-3", children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
+  const cancelAttachment = useCallback((attachment) => {
+    setAttachments(attachments.filter((f) => f.path !== attachment.path));
+  }, [attachments, setAttachments]);
+  const trimmed = value.trim();
+  const disabled = !trimmed && attachments.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: "border-t py-3 gap-3 flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-0 gap-2 flex-wrap", children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+      UploadPill,
       {
-        placeholder: "Type a message and press Ctrl+Enter\u2026",
-        className: "flex-1 resize-none h-20",
-        value,
-        onChange: (e) => setValue(e.currentTarget.value),
-        onKeyDown
-      }
-    ),
-    /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled: !value.trim(), children: "Send" })
+        attachment,
+        onCancel: cancelAttachment
+      },
+      attachment.path
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-0 gap-3", children: [
+      /* @__PURE__ */ jsx(FileUploader, { onFilesSelected }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          placeholder: "Type a message and press Enter",
+          className: "flex-1 resize-none h-20",
+          value,
+          onChange: (e) => setValue(e.currentTarget.value),
+          onKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled, children: "Send" })
+    ] })
   ] });
 }
 export {

package/dist/esm/ChatThread.d.ts

@@ -1,6 +1,7 @@
-import { Element } from "@meshagent/meshagent";
+import { Element, RoomClient } from "@meshagent/meshagent";
 export declare function timeAgo(iso: string): string;
-export declare function ChatThread({ messages, localParticipantName }: {
+export declare function ChatThread({ room, messages, localParticipantName }: {
+    room: RoomClient;
     messages: Element[];
     localParticipantName: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/ChatThread.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { Download } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
@@ -17,6 +18,9 @@ function formatDateTime(iso) {
     timeZoneName: "short"
   }).format(date);
 }
+function isImageFilename(filename) {
+  return /\.(jpe?g|png|gif|bmp|webp|avif|svg)$/i.test(filename);
+}
 function timeAgo(iso) {
   const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
   const date = new Date(iso);
@@ -32,28 +36,80 @@ function timeAgo(iso) {
   if (Math.abs(minutes) >= 1) return rtf.format(minutes, "minute");
   return rtf.format(seconds, "second");
 }
-function ChatThread({ messages, localParticipantName }) {
+function ChatThread({ room, messages, localParticipantName }) {
   const bottomRef = React.useRef(null);
-  React.useEffect(() => {
+  useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex-shrink-1 basis-0 overflow-y-auto p-4 space-y-4", children: [
-    messages.map((message) => {
-      const mine = localParticipantName == message.getAttribute("author_name");
-      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col max-w-prose items-start gap-1", { "justify-end": mine, "justify-start": !mine }), children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-0.5 text-xs text-muted-foreground", children: [
-          "By ",
-          message.getAttribute("author_name"),
-          " at ",
-          timeAgo(message.getAttribute("created_at"))
-        ] }),
-        /* @__PURE__ */ jsx(ChatBubble, { text: message.getAttribute("text"), mine }, message.id)
-      ] }, message.id);
-    }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 flex-shrink-1 basis-0 overflow-y-auto p-4 space-y-4", children: [
+    messages.map((message) => /* @__PURE__ */ jsx(
+      ChatMessage,
+      {
+        room,
+        message,
+        localParticipantName
+      },
+      message.id
+    )),
     /* @__PURE__ */ jsx("div", { ref: bottomRef })
   ] });
 }
+function ChatImage({ room, path, alt }) {
+  const [url, setUrl] = React.useState("");
+  useEffect(() => {
+    room.storage.downloadUrl(path).then(setUrl);
+  }, [path]);
+  return url === "" ? null : /* @__PURE__ */ jsx("img", { src: url, alt, className: "max-h-48 max-w-full rounded-lg" });
+}
+function ChatMessage({ room, message, localParticipantName }) {
+  const mine = localParticipantName == message.getAttribute("author_name");
+  const attachments = (message.children ?? []).filter((child) => child.tagName === "file");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col max-w-prose gap-1", { "items-end self-end": mine, "items-start self-start": !mine }), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-0.5 text-xs text-muted-foreground", children: [
+      "By ",
+      message.getAttribute("author_name"),
+      " at ",
+      timeAgo(message.getAttribute("created_at"))
+    ] }),
+    /* @__PURE__ */ jsx(ChatBubble, { text: message.getAttribute("text"), mine }, message.id),
+    attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2 mt-2", { "text-right": mine }), children: attachments.map((attachment) => {
+      const path = attachment.getAttribute("path") || "";
+      const isImage = isImageFilename(path);
+      const filename = path.split("/").pop();
+      if (isImage) {
+        return /* @__PURE__ */ jsx(
+          ChatImage,
+          {
+            room,
+            path,
+            alt: filename || "Image Attachment"
+          },
+          attachment.id
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            room.storage.downloadUrl(path).then((url) => window.open(url, "_blank"));
+          },
+          className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2 cursor-pointer hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          rel: "noopener noreferrer",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium leading-none", children: filename }),
+            /* @__PURE__ */ jsx(Download, { className: "inline-block mr-1" })
+          ]
+        },
+        attachment.id
+      );
+    }) })
+  ] });
+}
 function ChatBubble({ text, mine }) {
+  if (!text || text.trim() === "") {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
   return /* @__PURE__ */ jsx("div", { className: cn(
     "rounded-lg px-4 py-2 text-sm max-w-prose whitespace-pre-wrap",
     {
@@ -66,8 +122,9 @@ function ChatBubble({ text, mine }) {
       remarkPlugins: [remarkGfm],
       rehypePlugins: [rehypeSanitize, rehypeHighlight],
       components: {
-        p: ({ node, ...props }) => /* @__PURE__ */ jsx("p", { ...props, className: "mb-2 last:mb-0" }),
-        code: ({ className, children, ...props }) => /* @__PURE__ */ jsx("pre", { className: "my-2 overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsx("code", { ...props, className, children }) })
+        pre: ({ node, className, children, ...props }) => /* @__PURE__ */ jsx("pre", { ...props, className: cn("overflow-x-auto rounded-lg", className), children }),
+        p: ({ node, children, ...props }) => /* @__PURE__ */ jsx("p", { ...props, className: "mb-2 last:mb-0", children }),
+        code: ({ className, children, ...props }) => /* @__PURE__ */ jsx("code", { ...props, className, children })
       },
       children: text
     }

package/dist/esm/ChatTypingIndicator.js

@@ -1,13 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Circle } from "lucide-react";
 import { useRoomIndicators } from "@meshagent/meshagent-react";
 function ChatTypingIndicator({ room, path }) {
   const { typing } = useRoomIndicators({ room, path });
   return typing ? /* @__PURE__ */ jsxs("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
     [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
-      Circle,
+      "span",
       {
-        className: "w-2 h-2 text-gray-500",
+        className: `inline-block w-2 h-2 bg-current rounded-full`,
         style: {
           animation: "typingBounce 0.6s ease-in-out infinite",
           animationDelay: `${index * 0.2}s`

package/dist/esm/FileUploader.js

@@ -2,10 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Plus } from "lucide-react";
 import { Button } from "./components/ui/button";
-function FileUploader({
-  onFilesSelected,
-  accept = ""
-}) {
+function FileUploader({ onFilesSelected, accept = "" }) {
   const inputRef = useRef(null);
   const handleButtonClick = () => inputRef.current?.click();
   const handleFileChange = (e) => {

package/dist/esm/UploadPill.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FileUpload } from "@meshagent/meshagent-react";
+export interface UploadPillProps {
+    attachment: FileUpload;
+    onCancel: (attachment: FileUpload) => void;
+}
+export declare function UploadPill({ attachment, onCancel }: UploadPillProps): React.ReactElement;

package/dist/esm/UploadPill.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { Progress } from "./components/ui/progress";
+import { X } from "lucide-react";
+function UploadPill({ attachment, onCancel }) {
+  const [progress, setProgress] = useState(0);
+  const handleCancel = useCallback(() => onCancel(attachment), [attachment, onCancel]);
+  useEffect(() => {
+    const onChange = () => setProgress(
+      Math.round(attachment.bytesUploaded * 100 / attachment.size)
+    );
+    attachment.on("status", onChange);
+    return () => attachment.off("status", onChange);
+  }, [attachment]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium leading-none", children: attachment.filename }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCancel,
+        "aria-label": "Cancel upload",
+        className: "rounded-full p-1 transition-colors hover:bg-muted-foreground/20 focus:outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Progress,
+      {
+        value: progress,
+        className: "absolute left-0 bottom-0 h-0.5 w-full rounded-full bg-muted-foreground/20"
+      }
+    )
+  ] });
+}
+;
+export {
+  UploadPill
+};

package/dist/esm/components/ui/progress.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+export declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ui/progress.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "@/lib/utils";
+function Progress({ className, value, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-primary h-full w-full flex-1 transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+export {
+  Progress
+};

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-ease:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-gray-500:oklch(55.1% .027 264.364);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.relative{position:relative}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.my-2{margin-block:calc(var(--spacing)*2)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-0\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.field-sizing-content{field-sizing:content}.aspect-square{aspect-ratio:1}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-full{width:100%;height:100%}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-20{height:calc(var(--spacing)*20)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-16{min-height:calc(var(--spacing)*16)}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-full{width:100%}.max-w-prose{max-width:65ch}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-0{flex:0}.flex-1{flex:1}.flex-shrink-1{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-0{flex-basis:calc(var(--spacing)*0)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.resize-none{resize:none}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-input{border-color:var(--input)}.bg-accent{background-color:var(--accent)}.bg-background{background-color:var(--background)}.bg-card{background-color:var(--card)}.bg-destructive{background-color:var(--destructive)}.bg-muted{background-color:var(--muted)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-0{padding:calc(var(--spacing)*0)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-6{padding-block:calc(var(--spacing)*6)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-card-foreground{color:var(--card-foreground)}.text-current{color:currentColor}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-600{color:var(--color-red-600)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow,.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled=true] *){pointer-events:none}.group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled=true] *){opacity:.5}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--primary)}.selection\:bg-primary::selection{background-color:var(--primary)}.selection\:text-primary-foreground ::selection{color:var(--primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.last\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/60:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-destructive\/60:is(.dark *){background-color:color-mix(in oklab,var(--destructive)60%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}@media (hover:hover){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}#root{max-width:1280px;min-height:100vh;margin:0 auto;padding:0 2rem}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-ease:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-600:oklch(44.6% .03 256.802);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.absolute{position:absolute}.relative{position:relative}.static{position:static}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mr-1{margin-right:calc(var(--spacing)*1)}.mb-0\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.field-sizing-content{field-sizing:content}.aspect-square{aspect-ratio:1}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-full{width:100%;height:100%}.h-0\.5{height:calc(var(--spacing)*.5)}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-20{height:calc(var(--spacing)*20)}.h-full{height:100%}.max-h-48{max-height:calc(var(--spacing)*48)}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-16{min-height:calc(var(--spacing)*16)}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-prose{max-width:65ch}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-0{flex:0}.flex-1{flex:1}.flex-shrink-1{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-0{flex-basis:calc(var(--spacing)*0)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-input{border-color:var(--input)}.bg-accent{background-color:var(--accent)}.bg-background{background-color:var(--background)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-card{background-color:var(--card)}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--destructive)}.bg-muted{background-color:var(--muted)}.bg-muted-foreground\/20{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/20{background-color:color-mix(in oklab,var(--muted-foreground)20%,transparent)}}.bg-primary,.bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab,var(--primary)20%,transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.pr-1{padding-right:calc(var(--spacing)*1)}.pl-3{padding-left:calc(var(--spacing)*3)}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-card-foreground{color:var(--card-foreground)}.text-current{color:currentColor}.text-gray-600{color:var(--color-gray-600)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-600{color:var(--color-red-600)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow,.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled=true] *){pointer-events:none}.group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled=true] *){opacity:.5}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--primary)}.selection\:bg-primary::selection{background-color:var(--primary)}.selection\:text-primary-foreground ::selection{color:var(--primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.last\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-muted-foreground\/20:hover{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted-foreground\/20:hover{background-color:color-mix(in oklab,var(--muted-foreground)20%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/60:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-destructive\/60:is(.dark *){background-color:color-mix(in oklab,var(--destructive)60%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}@media (hover:hover){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}#root{max-width:1280px;min-height:100vh;margin:0 auto;padding:0 2rem}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meshagent/meshagent-tailwind",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "description": "Meshagent Tailwind Components",
     "homepage": "https://github.com/meshagent/meshagent-tailwind",
     "scripts": {
@@ -30,12 +30,14 @@
         "CHANGELOG.md"
     ],
     "dependencies": {
-        "@meshagent/meshagent": "^0.5.1",
-        "@meshagent/meshagent-react": "^0.5.1",
+        "@meshagent/meshagent": "^0.5.2",
+        "@meshagent/meshagent-react": "^0.5.2",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "esbuild-plugin-alias": "^0.2.1",
         "lucide-react": "^0.525.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -70,4 +72,4 @@
         "typescript-eslint": "^8.34.1",
         "vite": "^7.0.0"
     }
-}
+}