canvu-react 0.3.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Canvu contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,156 @@
+# canvu
+
+`canvu` is a vector-first SVG canvas for the browser with pan, zoom, tools, persistence, plugins, and realtime collaboration.
+
+## Install
+
+```bash
+npm install canvu react react-dom lucide-react
+```
+
+Required peers:
+- `react`
+- `react-dom`
+- `lucide-react`
+
+Optional peers:
+- `@ai-sdk/react`
+- `ai`
+
+## Entry points
+
+| Import | Purpose |
+| --- | --- |
+| `canvu` | Core primitives: camera, scene, SVG renderer, input helpers, shape builders |
+| `canvu/react` | React runtime: `VectorViewport`, `VectorToolbar`, persistence, plugin system |
+| `canvu/plugins/chatbot` | Plug and play chatbot plugin |
+| `canvu/plugins/realtime` | Plug and play realtime collaboration plugin + advanced hooks |
+| `canvu/plugins/tldraw` | tldraw import helpers |
+
+## Quick start
+
+```tsx
+import { useState } from "react";
+import {
+  useVectorCanvasDocument,
+  VectorCanvas,
+  VectorToolbar,
+  VectorViewport,
+} from "canvu/react";
+
+export function Board() {
+  const [toolId, setToolId] = useState("hand");
+  const [toolLocked, setToolLocked] = useState(false);
+  const doc = useVectorCanvasDocument({ persistenceKey: "board.v1" });
+
+  if (!doc.isHydrated) return null;
+
+  return (
+    <VectorCanvas.Root style={{ height: "100dvh", width: "100%" }}>
+      <VectorCanvas.Body>
+        <VectorCanvas.Main>
+          <VectorCanvas.ViewportSurface>
+            <VectorViewport
+              ariaLabel="Board"
+              toolId={toolId}
+              toolLocked={toolLocked}
+              onToolChangeRequest={setToolId}
+              items={doc.items}
+              onItemsChange={doc.onItemsChange}
+              interactive
+              plugins={[]}
+              toolbar={
+                <VectorCanvas.Toolbar>
+                  <VectorToolbar
+                    value={toolId}
+                    onChange={setToolId}
+                    toolLocked={toolLocked}
+                    onToolLockedChange={setToolLocked}
+                    aria-label="Canvas tools"
+                  />
+                </VectorCanvas.Toolbar>
+              }
+            />
+          </VectorCanvas.ViewportSurface>
+        </VectorCanvas.Main>
+      </VectorCanvas.Body>
+    </VectorCanvas.Root>
+  );
+}
+```
+
+## Plugin-first architecture
+
+The recommended React DX is plugin-first:
+
+```tsx
+import { chatbotPlugin } from "canvu/plugins/chatbot";
+import { realtimeCollaborationPlugin } from "canvu/plugins/realtime";
+
+<VectorViewport
+  ariaLabel="Board"
+  items={doc.items}
+  onItemsChange={doc.onItemsChange}
+  toolId={toolId}
+  onToolChangeRequest={setToolId}
+  interactive
+  plugins={[
+    chatbotPlugin({ chatApi: "/api/chat" }),
+    realtimeCollaborationPlugin({
+      url,
+      roomId,
+      peer: {
+        id: peerId,
+        displayName: "Kalmon",
+        color: "#7c3aed",
+        image: avatarUrl,
+      },
+    }),
+  ]}
+/>
+```
+
+No `CanvasPluginHost` is required. The plugin runtime lives inside `VectorViewport`.
+
+## Custom tools
+
+Use `createToolPlugin(...)` for isolated tools.
+
+```tsx
+import { createToolPlugin } from "canvu/react";
+import { Pin } from "lucide-react";
+
+const reviewPinPlugin = createToolPlugin({
+  id: "review-pin",
+  label: "Review",
+  shortcutHint: "R",
+  icon: <Pin aria-hidden />,
+  createItem: ({ id, bounds }) => createReviewPinItem(id, bounds),
+});
+
+<VectorViewport plugins={[reviewPinPlugin]} ... />
+```
+
+If the tool belongs to a larger feature, keep it inside that feature plugin.
+
+## Advanced hooks
+
+Low-level hooks remain public for advanced customization:
+- `useRealtimeSession(...)`
+- `useRealtimeComments(...)`
+- `useCanvuPluginContext()`
+- `useCanvuViewportContext()`
+- `useCanvuDocumentContext()`
+- `useCanvuPluginContribution(...)`
+- `createCanvuPlugin(...)`
+
+Use them for custom plugins and bespoke UIs, not for the common path.
+
+## CSS requirement
+
+The interactive surface must use `touch-action: none` so the browser does not steal gestures.
+
+## Security
+
+`childrenSvg` is injected via `innerHTML`.
+Only pass trusted or sanitized SVG.

package/dist/camera-BwQjm5oh.d.cts

@@ -0,0 +1,50 @@
+import { R as Rect } from './types-CB0TZZuk.cjs';
+
+type Camera2DOptions = {
+    /** Minimum zoom scale (world units per CSS pixel). */
+    minZoom?: number;
+    /** Maximum zoom scale. */
+    maxZoom?: number;
+};
+/**
+ * 2D camera: pan (`x`, `y`) in **screen space** (CSS pixels) and uniform zoom `zoom`.
+ *
+ * Screen mapping: `screen = world * zoom + cameraOffset`
+ * (world origin maps to `(x, y)` on screen).
+ */
+declare class Camera2D {
+    x: number;
+    y: number;
+    /** Scale: world units per CSS pixel (larger = more zoomed in). */
+    zoom: number;
+    readonly minZoom: number;
+    readonly maxZoom: number;
+    constructor(options?: Camera2DOptions);
+    /**
+     * Converts a point from world coordinates to CSS pixel coordinates relative to the viewport top-left.
+     */
+    worldToScreen(worldX: number, worldY: number): {
+        screenX: number;
+        screenY: number;
+    };
+    /**
+     * Converts a point from CSS pixel coordinates (viewport-relative) to world coordinates.
+     */
+    screenToWorld(screenX: number, screenY: number): {
+        worldX: number;
+        worldY: number;
+    };
+    /**
+     * Sets zoom, clamped to `[minZoom, maxZoom]`, optionally anchoring a screen point so it stays under the cursor.
+     */
+    setZoom(nextZoom: number, anchorScreen?: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Returns the world-space rectangle visible in a viewport of `viewportWidth` x `viewportHeight` CSS pixels.
+     */
+    getVisibleWorldRect(viewportWidth: number, viewportHeight: number): Rect;
+}
+
+export { Camera2D as C, type Camera2DOptions as a };

package/dist/camera-KwCYYPhm.d.ts

@@ -0,0 +1,50 @@
+import { R as Rect } from './types-CB0TZZuk.js';
+
+type Camera2DOptions = {
+    /** Minimum zoom scale (world units per CSS pixel). */
+    minZoom?: number;
+    /** Maximum zoom scale. */
+    maxZoom?: number;
+};
+/**
+ * 2D camera: pan (`x`, `y`) in **screen space** (CSS pixels) and uniform zoom `zoom`.
+ *
+ * Screen mapping: `screen = world * zoom + cameraOffset`
+ * (world origin maps to `(x, y)` on screen).
+ */
+declare class Camera2D {
+    x: number;
+    y: number;
+    /** Scale: world units per CSS pixel (larger = more zoomed in). */
+    zoom: number;
+    readonly minZoom: number;
+    readonly maxZoom: number;
+    constructor(options?: Camera2DOptions);
+    /**
+     * Converts a point from world coordinates to CSS pixel coordinates relative to the viewport top-left.
+     */
+    worldToScreen(worldX: number, worldY: number): {
+        screenX: number;
+        screenY: number;
+    };
+    /**
+     * Converts a point from CSS pixel coordinates (viewport-relative) to world coordinates.
+     */
+    screenToWorld(screenX: number, screenY: number): {
+        worldX: number;
+        worldY: number;
+    };
+    /**
+     * Sets zoom, clamped to `[minZoom, maxZoom]`, optionally anchoring a screen point so it stays under the cursor.
+     */
+    setZoom(nextZoom: number, anchorScreen?: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Returns the world-space rectangle visible in a viewport of `viewportWidth` x `viewportHeight` CSS pixels.
+     */
+    getVisibleWorldRect(viewportWidth: number, viewportHeight: number): Rect;
+}
+
+export { Camera2D as C, type Camera2DOptions as a };

package/dist/chatbot.cjs

@@ -0,0 +1,221 @@
+'use strict';
+
+var react$1 = require('@ai-sdk/react');
+var ai = require('ai');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/plugins/chatbot/message-text.ts
+function getMessageText(message) {
+  const parts = message.parts;
+  if (!parts?.length) return "";
+  return parts.filter((p) => p.type === "text").map((p) => p.text).join("");
+}
+var shell = {
+  position: "absolute",
+  right: 12,
+  bottom: 12,
+  width: 360,
+  maxWidth: "calc(100% - 24px)",
+  maxHeight: "min(420px, 70dvh)",
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: 12,
+  border: "1px solid rgba(0,0,0,0.12)",
+  background: "rgba(255,255,255,0.97)",
+  boxShadow: "0 8px 24px rgba(0,0,0,0.1)",
+  pointerEvents: "auto",
+  overflow: "hidden"
+};
+var header = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "8px 12px",
+  borderBottom: "1px solid #e4e4e7",
+  fontSize: "0.8125rem",
+  fontWeight: 700,
+  color: "#18181b"
+};
+var messagesBox = {
+  flex: 1,
+  minHeight: 0,
+  overflowY: "auto",
+  padding: "10px 12px",
+  fontSize: "0.8125rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var bubble = (role) => ({
+  alignSelf: role === "user" ? "flex-end" : "flex-start",
+  maxWidth: "92%",
+  padding: "8px 10px",
+  borderRadius: 10,
+  background: role === "user" ? "#2563eb" : "#f4f4f5",
+  color: role === "user" ? "#fff" : "#18181b",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+});
+var formStyle = {
+  display: "flex",
+  gap: 8,
+  padding: 8,
+  borderTop: "1px solid #e4e4e7"
+};
+var inputStyle = {
+  flex: 1,
+  minWidth: 0,
+  padding: "8px 10px",
+  borderRadius: 8,
+  border: "1px solid #d4d4d8",
+  fontSize: "0.8125rem",
+  outline: "none"
+};
+var btn = {
+  padding: "8px 12px",
+  borderRadius: 8,
+  border: "none",
+  background: "#18181b",
+  color: "#fff",
+  fontSize: "0.8125rem",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+function ChatbotPluginPanel({
+  chatApi,
+  title = "Assistente"
+}) {
+  const reactId = react.useId();
+  const chatId = react.useMemo(
+    () => `trazo-chatbot-${reactId.replace(/[^a-zA-Z0-9_-]/g, "_")}`,
+    [reactId]
+  );
+  const transport = react.useMemo(
+    () => new ai.DefaultChatTransport({ api: chatApi }),
+    [chatApi]
+  );
+  const { messages, sendMessage, status, error, stop } = react$1.useChat({
+    id: chatId,
+    transport
+  });
+  const [input, setInput] = react.useState("");
+  const [open, setOpen] = react.useState(true);
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const t = input.trim();
+    if (!t || status === "streaming" || status === "submitted") return;
+    void sendMessage({ text: t });
+    setInput("");
+  };
+  if (!open) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        style: {
+          ...btn,
+          position: "absolute",
+          right: 12,
+          bottom: 12,
+          pointerEvents: "auto",
+          borderRadius: 999,
+          padding: "10px 14px"
+        },
+        onClick: () => setOpen(true),
+        children: "Chat"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { style: shell, "aria-label": title, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        (status === "streaming" || status === "submitted") && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void stop(),
+            style: {
+              fontSize: "0.75rem",
+              color: "#71717a",
+              background: "none",
+              border: "none",
+              cursor: "pointer"
+            },
+            children: "Parar"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen(false),
+            style: {
+              fontSize: "0.75rem",
+              color: "#71717a",
+              background: "none",
+              border: "none",
+              cursor: "pointer"
+            },
+            "aria-label": "Fechar chat",
+            children: "\u2212"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: messagesBox, children: [
+      messages.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, color: "#71717a", fontSize: "0.75rem" }, children: [
+        "Mensagens aparecem aqui. O backend deve estar em",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { style: { fontSize: "0.7rem" }, children: chatApi }),
+        "."
+      ] }),
+      messages.map((m) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: bubble(m.role), children: getMessageText(m) }, m.id)),
+      error && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            ...bubble("assistant"),
+            background: "#fef2f2",
+            color: "#b91c1c"
+          },
+          children: error.message
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { style: formStyle, onSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          style: inputStyle,
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          placeholder: "Escreva uma mensagem\u2026",
+          "aria-label": "Mensagem",
+          autoComplete: "off"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "submit",
+          style: btn,
+          disabled: status === "streaming" || status === "submitted",
+          children: "Enviar"
+        }
+      )
+    ] })
+  ] });
+}
+function chatbotPlugin(options) {
+  return {
+    id: "trazo.plugin.chatbot",
+    render: () => /* @__PURE__ */ jsxRuntime.jsx(ChatbotPluginPanel, { ...options })
+  };
+}
+
+exports.ChatbotPluginPanel = ChatbotPluginPanel;
+exports.chatbotPlugin = chatbotPlugin;
+//# sourceMappingURL=chatbot.cjs.map
+//# sourceMappingURL=chatbot.cjs.map

package/dist/chatbot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/plugins/chatbot/message-text.ts","../src/react/plugins/chatbot/ChatbotPluginPanel.tsx","../src/react/plugins/chatbot/chatbot-plugin.tsx"],"names":["useId","useMemo","DefaultChatTransport","useChat","useState","jsx","jsxs"],"mappings":"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","file":"chatbot.cjs","sourcesContent":["import type { UIMessage } from \"ai\";\n\n/** Flattens text parts from a UI message for simple transcript rendering. */\nexport function getMessageText(message: UIMessage): string {\n\tconst parts = message.parts;\n\tif (!parts?.length) return \"\";\n\treturn parts\n\t\t.filter((p): p is { type: \"text\"; text: string } => p.type === \"text\")\n\t\t.map((p) => p.text)\n\t\t.join(\"\");\n}\n","\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport } from \"ai\";\nimport { type CSSProperties, type FormEvent, useId, useMemo, useState } from \"react\";\nimport { getMessageText } from \"./message-text\";\n\nconst shell: CSSProperties = {\n\tposition: \"absolute\",\n\tright: 12,\n\tbottom: 12,\n\twidth: 360,\n\tmaxWidth: \"calc(100% - 24px)\",\n\tmaxHeight: \"min(420px, 70dvh)\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tborderRadius: 12,\n\tborder: \"1px solid rgba(0,0,0,0.12)\",\n\tbackground: \"rgba(255,255,255,0.97)\",\n\tboxShadow: \"0 8px 24px rgba(0,0,0,0.1)\",\n\tpointerEvents: \"auto\",\n\toverflow: \"hidden\",\n};\n\nconst header: CSSProperties = {\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n\tjustifyContent: \"space-between\",\n\tpadding: \"8px 12px\",\n\tborderBottom: \"1px solid #e4e4e7\",\n\tfontSize: \"0.8125rem\",\n\tfontWeight: 700,\n\tcolor: \"#18181b\",\n};\n\nconst messagesBox: CSSProperties = {\n\tflex: 1,\n\tminHeight: 0,\n\toverflowY: \"auto\",\n\tpadding: \"10px 12px\",\n\tfontSize: \"0.8125rem\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tgap: 8,\n};\n\nconst bubble = (role: string): CSSProperties => ({\n\talignSelf: role === \"user\" ? \"flex-end\" : \"flex-start\",\n\tmaxWidth: \"92%\",\n\tpadding: \"8px 10px\",\n\tborderRadius: 10,\n\tbackground: role === \"user\" ? \"#2563eb\" : \"#f4f4f5\",\n\tcolor: role === \"user\" ? \"#fff\" : \"#18181b\",\n\twhiteSpace: \"pre-wrap\",\n\twordBreak: \"break-word\",\n});\n\nconst formStyle: CSSProperties = {\n\tdisplay: \"flex\",\n\tgap: 8,\n\tpadding: 8,\n\tborderTop: \"1px solid #e4e4e7\",\n};\n\nconst inputStyle: CSSProperties = {\n\tflex: 1,\n\tminWidth: 0,\n\tpadding: \"8px 10px\",\n\tborderRadius: 8,\n\tborder: \"1px solid #d4d4d8\",\n\tfontSize: \"0.8125rem\",\n\toutline: \"none\",\n};\n\nconst btn: CSSProperties = {\n\tpadding: \"8px 12px\",\n\tborderRadius: 8,\n\tborder: \"none\",\n\tbackground: \"#18181b\",\n\tcolor: \"#fff\",\n\tfontSize: \"0.8125rem\",\n\tfontWeight: 600,\n\tcursor: \"pointer\",\n};\n\nexport type ChatbotPluginPanelProps = {\n\t/**\n\t * Chat completions endpoint (your Next route, Express, or external URL).\n\t * Must implement the [AI SDK UI stream protocol](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot).\n\t */\n\tchatApi: string;\n\ttitle?: string;\n};\n\n/**\n * Floating chat panel powered by `useChat` + {@link DefaultChatTransport}.\n */\nexport function ChatbotPluginPanel({\n\tchatApi,\n\ttitle = \"Assistente\",\n}: ChatbotPluginPanelProps) {\n\tconst reactId = useId();\n\t/** Stable across SSR + hydration; `useChat` otherwise generates a random id per environment. */\n\tconst chatId = useMemo(\n\t\t() => `trazo-chatbot-${reactId.replace(/[^a-zA-Z0-9_-]/g, \"_\")}`,\n\t\t[reactId],\n\t);\n\n\tconst transport = useMemo(\n\t\t() => new DefaultChatTransport({ api: chatApi }),\n\t\t[chatApi],\n\t);\n\n\tconst { messages, sendMessage, status, error, stop } = useChat({\n\t\tid: chatId,\n\t\ttransport,\n\t});\n\n\tconst [input, setInput] = useState(\"\");\n\tconst [open, setOpen] = useState(true);\n\n\tconst onSubmit = (e: FormEvent) => {\n\t\te.preventDefault();\n\t\tconst t = input.trim();\n\t\tif (!t || status === \"streaming\" || status === \"submitted\") return;\n\t\tvoid sendMessage({ text: t });\n\t\tsetInput(\"\");\n\t};\n\n\tif (!open) {\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tstyle={{\n\t\t\t\t\t...btn,\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tright: 12,\n\t\t\t\t\tbottom: 12,\n\t\t\t\t\tpointerEvents: \"auto\",\n\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\tpadding: \"10px 14px\",\n\t\t\t\t}}\n\t\t\t\tonClick={() => setOpen(true)}\n\t\t\t>\n\t\t\t\tChat\n\t\t\t</button>\n\t\t);\n\t}\n\n\treturn (\n\t\t<aside style={shell} aria-label={title}>\n\t\t\t<div style={header}>\n\t\t\t\t<span>{title}</span>\n\t\t\t\t<span style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n\t\t\t\t\t{(status === \"streaming\" || status === \"submitted\") && (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => void stop()}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: \"0.75rem\",\n\t\t\t\t\t\t\t\tcolor: \"#71717a\",\n\t\t\t\t\t\t\t\tbackground: \"none\",\n\t\t\t\t\t\t\t\tborder: \"none\",\n\t\t\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tParar\n\t\t\t\t\t\t</button>\n\t\t\t\t\t)}\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={() => setOpen(false)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tfontSize: \"0.75rem\",\n\t\t\t\t\t\t\tcolor: \"#71717a\",\n\t\t\t\t\t\t\tbackground: \"none\",\n\t\t\t\t\t\t\tborder: \"none\",\n\t\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-label=\"Fechar chat\"\n\t\t\t\t\t>\n\t\t\t\t\t\t−\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div style={messagesBox}>\n\t\t\t\t{messages.length === 0 && (\n\t\t\t\t\t<p style={{ margin: 0, color: \"#71717a\", fontSize: \"0.75rem\" }}>\n\t\t\t\t\t\tMensagens aparecem aqui. O backend deve estar em{\" \"}\n\t\t\t\t\t\t<code style={{ fontSize: \"0.7rem\" }}>{chatApi}</code>.\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{messages.map((m) => (\n\t\t\t\t\t<div key={m.id} style={bubble(m.role)}>\n\t\t\t\t\t\t{getMessageText(m)}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t{error && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...bubble(\"assistant\"),\n\t\t\t\t\t\t\tbackground: \"#fef2f2\",\n\t\t\t\t\t\t\tcolor: \"#b91c1c\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{error.message}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<form style={formStyle} onSubmit={onSubmit}>\n\t\t\t\t<input\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\tvalue={input}\n\t\t\t\t\tonChange={(e) => setInput(e.target.value)}\n\t\t\t\t\tplaceholder=\"Escreva uma mensagem…\"\n\t\t\t\t\taria-label=\"Mensagem\"\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\tstyle={btn}\n\t\t\t\t\tdisabled={status === \"streaming\" || status === \"submitted\"}\n\t\t\t\t>\n\t\t\t\t\tEnviar\n\t\t\t\t</button>\n\t\t\t</form>\n\t\t</aside>\n\t);\n}\n","import type { CanvasPlugin } from \"../types\";\nimport {\n\tChatbotPluginPanel,\n\ttype ChatbotPluginPanelProps,\n} from \"./ChatbotPluginPanel\";\n\nexport type ChatbotPluginOptions = ChatbotPluginPanelProps;\n\n/**\n * First-party plugin: floating chat UI using the Vercel AI SDK (`useChat` + HTTP transport).\n * You **must** host a compatible POST endpoint at `chatApi` (see AI SDK UI chat protocol).\n *\n * @example\n * ```tsx\n * <VectorViewport\n *   items={doc.items}\n *   onItemsChange={doc.onItemsChange}\n *   plugins={[chatbotPlugin({ chatApi: \"/api/chat\" })]}\n * />\n * ```\n */\nexport function chatbotPlugin(options: ChatbotPluginOptions): CanvasPlugin {\n\treturn {\n\t\tid: \"trazo.plugin.chatbot\",\n\t\trender: () => <ChatbotPluginPanel {...options} />,\n\t};\n}\n"]}

package/dist/chatbot.d.cts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CanvasPlugin } from './types-D1ftVsOQ.cjs';
+import 'react';
+import './types-CB0TZZuk.cjs';
+import './camera-BwQjm5oh.cjs';
+
+type ChatbotPluginPanelProps = {
+    /**
+     * Chat completions endpoint (your Next route, Express, or external URL).
+     * Must implement the [AI SDK UI stream protocol](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot).
+     */
+    chatApi: string;
+    title?: string;
+};
+/**
+ * Floating chat panel powered by `useChat` + {@link DefaultChatTransport}.
+ */
+declare function ChatbotPluginPanel({ chatApi, title, }: ChatbotPluginPanelProps): react_jsx_runtime.JSX.Element;
+
+type ChatbotPluginOptions = ChatbotPluginPanelProps;
+/**
+ * First-party plugin: floating chat UI using the Vercel AI SDK (`useChat` + HTTP transport).
+ * You **must** host a compatible POST endpoint at `chatApi` (see AI SDK UI chat protocol).
+ *
+ * @example
+ * ```tsx
+ * <VectorViewport
+ *   items={doc.items}
+ *   onItemsChange={doc.onItemsChange}
+ *   plugins={[chatbotPlugin({ chatApi: "/api/chat" })]}
+ * />
+ * ```
+ */
+declare function chatbotPlugin(options: ChatbotPluginOptions): CanvasPlugin;
+
+export { type ChatbotPluginOptions, ChatbotPluginPanel, type ChatbotPluginPanelProps, chatbotPlugin };

package/dist/chatbot.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CanvasPlugin } from './types--ALu1mF-.js';
+import 'react';
+import './types-CB0TZZuk.js';
+import './camera-KwCYYPhm.js';
+
+type ChatbotPluginPanelProps = {
+    /**
+     * Chat completions endpoint (your Next route, Express, or external URL).
+     * Must implement the [AI SDK UI stream protocol](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot).
+     */
+    chatApi: string;
+    title?: string;
+};
+/**
+ * Floating chat panel powered by `useChat` + {@link DefaultChatTransport}.
+ */
+declare function ChatbotPluginPanel({ chatApi, title, }: ChatbotPluginPanelProps): react_jsx_runtime.JSX.Element;
+
+type ChatbotPluginOptions = ChatbotPluginPanelProps;
+/**
+ * First-party plugin: floating chat UI using the Vercel AI SDK (`useChat` + HTTP transport).
+ * You **must** host a compatible POST endpoint at `chatApi` (see AI SDK UI chat protocol).
+ *
+ * @example
+ * ```tsx
+ * <VectorViewport
+ *   items={doc.items}
+ *   onItemsChange={doc.onItemsChange}
+ *   plugins={[chatbotPlugin({ chatApi: "/api/chat" })]}
+ * />
+ * ```
+ */
+declare function chatbotPlugin(options: ChatbotPluginOptions): CanvasPlugin;
+
+export { type ChatbotPluginOptions, ChatbotPluginPanel, type ChatbotPluginPanelProps, chatbotPlugin };