@gui-chat-plugin/canvas 0.1.0

package/README.md

@@ -0,0 +1,75 @@
+# @gui-chat-plugin/canvas
+
+[![npm version](https://badge.fury.io/js/%40gui-chat-plugin%2Fcanvas.svg)](https://www.npmjs.com/package/@gui-chat-plugin/canvas)
+
+A drawing canvas plugin for [MulmoChat](https://github.com/receptron/MulmoChat).
+
+## Overview
+
+This plugin provides a drawing canvas where users can create drawings, sketches, or diagrams. The AI can then interpret or transform the drawing into other formats.
+
+## Installation
+
+```bash
+yarn add @gui-chat-plugin/canvas
+```
+
+## Dependencies
+
+This plugin requires `vue-drawing-canvas`:
+
+```bash
+yarn add vue-drawing-canvas
+```
+
+## Usage
+
+### Vue Implementation (for MulmoChat)
+
+```typescript
+// In src/tools/index.ts
+import CanvasPlugin from "@gui-chat-plugin/canvas/vue";
+
+const pluginList = [
+  // ... other plugins
+  CanvasPlugin,
+];
+
+// In src/main.ts
+import "@gui-chat-plugin/canvas/style.css";
+```
+
+### Core Only (Framework-agnostic)
+
+```typescript
+import { pluginCore, TOOL_NAME } from "@gui-chat-plugin/canvas";
+```
+
+## Package Exports
+
+| Export | Description |
+|--------|-------------|
+| `@gui-chat-plugin/canvas` | Core (framework-agnostic) |
+| `@gui-chat-plugin/canvas/vue` | Vue implementation |
+| `@gui-chat-plugin/canvas/style.css` | Tailwind CSS styles |
+
+## Test Prompts
+
+1. "I want to draw something"
+2. "Open the drawing canvas"
+3. "Let me sketch an idea"
+4. "Open canvas so I can draw a diagram"
+
+## Development
+
+```bash
+yarn install
+yarn dev        # Start dev server
+yarn build      # Build
+yarn typecheck  # Type check
+yarn lint       # Lint
+```
+
+## License
+
+MIT

package/dist/core/definition.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Canvas Plugin Tool Definition
+ */
+export declare const TOOL_NAME = "openCanvas";
+export declare const TOOL_DEFINITION: {
+    type: "function";
+    name: string;
+    description: string;
+    parameters: {
+        type: "object";
+        properties: {};
+        required: string[];
+    };
+};
+export declare const SYSTEM_PROMPT = "When the user asks 'I want to draw an image.', call openCanvas API to open the canvas.";

package/dist/core/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Canvas Plugin - Core (Framework-agnostic)
+ */
+export type { CanvasArgs, ImageToolData, CanvasDrawingState } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+export { executeOpenCanvas, pluginCore } from "./plugin";

package/dist/core/plugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Canvas Plugin Core (Framework-agnostic)
+ */
+import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
+import type { CanvasArgs, ImageToolData } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+/**
+ * Execute the openCanvas function
+ */
+export declare const executeOpenCanvas: (_context: ToolContext, _args: CanvasArgs) => Promise<ToolResult<ImageToolData>>;
+export declare const pluginCore: ToolPluginCore<ImageToolData, unknown, CanvasArgs>;

package/dist/core/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Canvas Plugin Types
+ */
+/** Canvas takes no arguments */
+export type CanvasArgs = Record<string, never>;
+/** Image data returned by the canvas */
+export interface ImageToolData {
+    imageData: string;
+    prompt: string;
+}
+/** Drawing state for canvas persistence */
+export interface CanvasDrawingState {
+    brushSize?: number;
+    brushColor?: string;
+    canvasWidth?: number;
+    canvasHeight?: number;
+    strokes?: unknown[];
+}

package/dist/core.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="openCanvas",a={type:"function",name:e,description:"Open a drawing canvas for the user to create drawings, sketches, or diagrams.",parameters:{type:"object",properties:{},required:[]}},t=`When the user asks 'I want to draw an image.', call ${e} API to open the canvas.`,n=async(s,o)=>({message:"Drawing canvas opened",instructions:"Tell the user that you are able to turn the drawing into a photographic image, a manga or any other art style.",title:"Drawing Canvas"}),r={toolDefinition:a,execute:n,generatingMessage:"Opening drawing canvas...",isEnabled:()=>!0,systemPrompt:t};exports.SYSTEM_PROMPT=t;exports.TOOL_DEFINITION=a;exports.TOOL_NAME=e;exports.executeOpenCanvas=n;exports.pluginCore=r;

package/dist/core.js

@@ -0,0 +1,27 @@
+const e = "openCanvas", a = {
+  type: "function",
+  name: e,
+  description: "Open a drawing canvas for the user to create drawings, sketches, or diagrams.",
+  parameters: {
+    type: "object",
+    properties: {},
+    required: []
+  }
+}, t = `When the user asks 'I want to draw an image.', call ${e} API to open the canvas.`, n = async (r, s) => ({
+  message: "Drawing canvas opened",
+  instructions: "Tell the user that you are able to turn the drawing into a photographic image, a manga or any other art style.",
+  title: "Drawing Canvas"
+}), o = {
+  toolDefinition: a,
+  execute: n,
+  generatingMessage: "Opening drawing canvas...",
+  isEnabled: () => !0,
+  systemPrompt: t
+};
+export {
+  t as SYSTEM_PROMPT,
+  a as TOOL_DEFINITION,
+  e as TOOL_NAME,
+  n as executeOpenCanvas,
+  o as pluginCore
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core.cjs");exports.SYSTEM_PROMPT=e.SYSTEM_PROMPT;exports.TOOL_DEFINITION=e.TOOL_DEFINITION;exports.TOOL_NAME=e.TOOL_NAME;exports.executeOpenCanvas=e.executeOpenCanvas;exports.pluginCore=e.pluginCore;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Canvas Plugin
+ *
+ * Main entry point - re-exports core module.
+ */
+export * from "./core";

package/dist/index.js

@@ -0,0 +1,8 @@
+import { SYSTEM_PROMPT as T, TOOL_DEFINITION as n, TOOL_NAME as o, executeOpenCanvas as p, pluginCore as r } from "./core.js";
+export {
+  T as SYSTEM_PROMPT,
+  n as TOOL_DEFINITION,
+  o as TOOL_NAME,
+  p as executeOpenCanvas,
+  r as pluginCore
+};

package/dist/style.css

@@ -0,0 +1 @@
+@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-border-style:solid;--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}}}@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-50:oklch(97.1% .013 17.38);--color-red-300:oklch(80.8% .114 19.571);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--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;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}::-webkit-calendar-picker-indicator{line-height:1}:-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}}@layer components;@layer utilities{.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.contents{display:contents}.flex{display:flex}.h-8{height:calc(var(--spacing)*8)}.h-auto{height:auto}.h-full{height:100%}.min-h-\[100px\]{min-height:100px}.min-h-screen{min-height:100vh}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-full{max-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}: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)))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-300{border-color:var(--color-gray-300)}.border-red-300{border-color:var(--color-red-300)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-gray-400{color:var(--color-gray-400)}.text-gray-900{color:var(--color-gray-900)}.text-white{color:var(--color-white)}.shadow{--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)}.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))}@media(hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}}@media(prefers-color-scheme:dark){.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:text-white{color:var(--color-white)}}}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@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}

package/dist/vue/Preview.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ToolResult } from "gui-chat-protocol/vue";
+import type { ImageToolData } from "../core/types";
+type __VLS_Props = {
+    result: ToolResult<ImageToolData>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/View.vue.d.ts

@@ -0,0 +1,12 @@
+import type { ToolResult } from "gui-chat-protocol/vue";
+import type { ImageToolData } from "../core/types";
+type __VLS_Props = {
+    selectedResult: ToolResult<ImageToolData> | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateResult: (result: ToolResult<ImageToolData, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdateResult?: ((result: ToolResult<ImageToolData, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Canvas Plugin - Vue Implementation
+ */
+import "../style.css";
+import type { ToolPlugin } from "gui-chat-protocol/vue";
+import type { CanvasArgs, ImageToolData } from "../core/types";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+export declare const plugin: ToolPlugin<ImageToolData, unknown, CanvasArgs>;
+export type { CanvasArgs, ImageToolData, CanvasDrawingState } from "../core/types";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT, executeOpenCanvas, pluginCore, } from "../core/plugin";
+export { View, Preview };
+declare const _default: {
+    plugin: ToolPlugin<ImageToolData, unknown, CanvasArgs, import("gui-chat-protocol/vue").InputHandler, Record<string, unknown>>;
+};
+export default _default;

package/dist/vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./core.cjs"),e=require("vue"),V=require("vue-drawing-canvas"),T={class:"w-full h-full flex flex-col bg-white"},O={class:"flex-shrink-0 p-4 border-b bg-gray-50"},B={class:"flex items-center justify-between gap-4"},D={class:"flex items-center gap-4"},F={class:"flex items-center gap-2"},$={class:"flex gap-1"},j=["onClick"],I={class:"flex items-center gap-2"},L={class:"flex-1 p-4 overflow-hidden"},x=e.defineComponent({__name:"View",props:{selectedResult:{}},emits:["updateResult"],setup(u,{emit:f}){const l=u,N=f,n=e.ref(null),p=e.ref(""),r=e.ref(5),s=e.ref("#000000"),h=e.ref([]),i=e.ref(800),c=e.ref(600),w=e.ref(0),b=()=>{if(l.selectedResult?.viewState?.drawingState){const t=l.selectedResult.viewState.drawingState;r.value=t.brushSize||5,s.value=t.brushColor||"#000000",i.value=t.canvasWidth||800,c.value=t.canvasHeight||600,t.strokes?h.value=t.strokes:h.value=[]}else h.value=[]};b();const R=async()=>{if(n.value)try{n.value.undo(),setTimeout(v,50)}catch(t){console.warn("Undo operation failed:",t)}},S=async()=>{if(n.value)try{n.value.redo(),setTimeout(v,50)}catch(t){console.warn("Redo operation failed:",t)}},M=()=>{if(n.value)try{n.value.reset(),v()}catch(t){console.warn("Clear operation failed:",t)}},_=()=>{v()},v=async()=>{if(n.value&&l.selectedResult)try{const t=await n.value.save(),a={strokes:n.value.getAllStrokes(),brushSize:r.value,brushColor:s.value,canvasWidth:i.value,canvasHeight:c.value},m={...l.selectedResult,data:{prompt:l.selectedResult.data?.prompt||"",imageData:t},viewState:{drawingState:a}};N("updateResult",m)}catch(t){console.error("Failed to save drawing state:",t)}};e.watch(()=>l.selectedResult,()=>{b()},{immediate:!1}),e.watch([r,s],()=>{v()}),e.watch([i,c],()=>{w.value++});const g=()=>{const t=n.value?.$el?.parentElement;if(t){const o=t.getBoundingClientRect(),a=o.width-64,m=o.height-64,y=Math.max(300,Math.min(600,Math.floor(a))),k=Math.max(200,Math.min(400,Math.floor(m)));(y!==i.value||k!==c.value)&&(i.value=y,c.value=k)}};return e.onMounted(async()=>{await e.nextTick(),g(),window.addEventListener("resize",g)}),e.onUnmounted(()=>{window.removeEventListener("resize",g)}),(t,o)=>(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",O,[e.createElementVNode("div",B,[e.createElementVNode("div",D,[e.createElementVNode("div",F,[e.createElementVNode("div",$,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList([2,5,10,20],a=>e.createElementVNode("button",{key:a,onClick:m=>r.value=a,class:e.normalizeClass(["w-8 h-8 rounded border-2 transition-colors",r.value===a?"border-blue-500 bg-blue-100":"border-gray-300 bg-white hover:bg-gray-50"])},[e.createElementVNode("div",{class:e.normalizeClass("bg-gray-800 rounded-full mx-auto"),style:e.normalizeStyle({width:Math.max(2,a*1)+"px",height:Math.max(2,a*1)+"px"})},null,4)],10,j)),64))])]),e.createElementVNode("div",I,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[0]||(o[0]=a=>s.value=a),type:"color",class:"w-12 h-8 rounded border border-gray-300"},null,512),[[e.vModelText,s.value]])])]),e.createElementVNode("div",{class:"flex items-center gap-1"},[e.createElementVNode("button",{onClick:R,class:"w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",title:"Undo"}," ↩ "),e.createElementVNode("button",{onClick:S,class:"w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",title:"Redo"}," ↪ "),e.createElementVNode("button",{onClick:M,class:"w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50",title:"Clear"}," 🗑 ")])])]),e.createElementVNode("div",L,[(e.openBlock(),e.createBlock(e.unref(V),{ref_key:"canvasRef",ref:n,key:`${u.selectedResult?.uuid||"default"}-${w.value}`,image:p.value,"onUpdate:image":o[1]||(o[1]=a=>p.value=a),width:i.value,height:c.value,"stroke-type":"dash","line-cap":"round","line-join":"round","fill-shape":!1,eraser:!1,lineWidth:r.value,color:s.value,"background-color":"#FFFFFF","background-image":void 0,watermark:void 0,"initial-image":h.value,saveAs:"png",styles:{border:"1px solid #ddd",borderRadius:"8px"},lock:!1,onMouseup:_,onTouchend:_},null,8,["image","width","height","lineWidth","color","initial-image"]))])]))}}),P={class:"min-h-[100px] flex items-center justify-center"},W=["src"],z={key:1,class:"text-gray-400 text-sm"},E=e.defineComponent({__name:"Preview",props:{result:{}},setup(u){return(f,l)=>(e.openBlock(),e.createElementBlock("div",P,[u.result.data?.imageData?(e.openBlock(),e.createElementBlock("img",{key:0,src:u.result.data.imageData,class:"max-w-full h-auto rounded",alt:"Canvas drawing"},null,8,W)):(e.openBlock(),e.createElementBlock("div",z,"No drawing yet"))]))}}),C={...d.pluginCore,viewComponent:x,previewComponent:E},H={plugin:C};exports.SYSTEM_PROMPT=d.SYSTEM_PROMPT;exports.TOOL_DEFINITION=d.TOOL_DEFINITION;exports.TOOL_NAME=d.TOOL_NAME;exports.executeOpenCanvas=d.executeOpenCanvas;exports.pluginCore=d.pluginCore;exports.Preview=E;exports.View=x;exports.default=H;exports.plugin=C;

package/dist/vue.js

@@ -0,0 +1,207 @@
+import { pluginCore as $ } from "./core.js";
+import { SYSTEM_PROMPT as ue, TOOL_DEFINITION as ve, TOOL_NAME as he, executeOpenCanvas as ge } from "./core.js";
+import { defineComponent as M, ref as n, watch as w, onMounted as O, nextTick as W, onUnmounted as j, createElementBlock as g, openBlock as u, createElementVNode as t, Fragment as H, renderList as L, normalizeClass as S, normalizeStyle as N, withDirectives as U, vModelText as V, createBlock as z, unref as B } from "vue";
+import I from "vue-drawing-canvas";
+const P = { class: "w-full h-full flex flex-col bg-white" }, A = { class: "flex-shrink-0 p-4 border-b bg-gray-50" }, K = { class: "flex items-center justify-between gap-4" }, Y = { class: "flex items-center gap-4" }, q = { class: "flex items-center gap-2" }, G = { class: "flex gap-1" }, J = ["onClick"], Q = { class: "flex items-center gap-2" }, X = { class: "flex-1 p-4 overflow-hidden" }, Z = /* @__PURE__ */ M({
+  __name: "View",
+  props: {
+    selectedResult: {}
+  },
+  emits: ["updateResult"],
+  setup(v, { emit: b }) {
+    const r = v, T = b, s = n(null), x = n(""), l = n(5), i = n("#000000"), m = n([]), c = n(800), d = n(600), y = n(0), _ = () => {
+      if (r.selectedResult?.viewState?.drawingState) {
+        const e = r.selectedResult.viewState.drawingState;
+        l.value = e.brushSize || 5, i.value = e.brushColor || "#000000", c.value = e.canvasWidth || 800, d.value = e.canvasHeight || 600, e.strokes ? m.value = e.strokes : m.value = [];
+      } else
+        m.value = [];
+    };
+    _();
+    const D = async () => {
+      if (s.value)
+        try {
+          s.value.undo(), setTimeout(h, 50);
+        } catch (e) {
+          console.warn("Undo operation failed:", e);
+        }
+    }, E = async () => {
+      if (s.value)
+        try {
+          s.value.redo(), setTimeout(h, 50);
+        } catch (e) {
+          console.warn("Redo operation failed:", e);
+        }
+    }, F = () => {
+      if (s.value)
+        try {
+          s.value.reset(), h();
+        } catch (e) {
+          console.warn("Clear operation failed:", e);
+        }
+    }, k = () => {
+      h();
+    }, h = async () => {
+      if (s.value && r.selectedResult)
+        try {
+          const e = await s.value.save(), a = {
+            strokes: s.value.getAllStrokes(),
+            brushSize: l.value,
+            brushColor: i.value,
+            canvasWidth: c.value,
+            canvasHeight: d.value
+          }, f = {
+            ...r.selectedResult,
+            data: {
+              prompt: r.selectedResult.data?.prompt || "",
+              imageData: e
+            },
+            viewState: {
+              drawingState: a
+            }
+          };
+          T("updateResult", f);
+        } catch (e) {
+          console.error("Failed to save drawing state:", e);
+        }
+    };
+    w(
+      () => r.selectedResult,
+      () => {
+        _();
+      },
+      { immediate: !1 }
+    ), w([l, i], () => {
+      h();
+    }), w([c, d], () => {
+      y.value++;
+    });
+    const p = () => {
+      const e = s.value?.$el?.parentElement;
+      if (e) {
+        const o = e.getBoundingClientRect(), a = o.width - 64, f = o.height - 64, C = Math.max(300, Math.min(600, Math.floor(a))), R = Math.max(200, Math.min(400, Math.floor(f)));
+        (C !== c.value || R !== d.value) && (c.value = C, d.value = R);
+      }
+    };
+    return O(async () => {
+      await W(), p(), window.addEventListener("resize", p);
+    }), j(() => {
+      window.removeEventListener("resize", p);
+    }), (e, o) => (u(), g("div", P, [
+      t("div", A, [
+        t("div", K, [
+          t("div", Y, [
+            t("div", q, [
+              t("div", G, [
+                (u(), g(H, null, L([2, 5, 10, 20], (a) => t("button", {
+                  key: a,
+                  onClick: (f) => l.value = a,
+                  class: S([
+                    "w-8 h-8 rounded border-2 transition-colors",
+                    l.value === a ? "border-blue-500 bg-blue-100" : "border-gray-300 bg-white hover:bg-gray-50"
+                  ])
+                }, [
+                  t("div", {
+                    class: S("bg-gray-800 rounded-full mx-auto"),
+                    style: N({
+                      width: Math.max(2, a * 1) + "px",
+                      height: Math.max(2, a * 1) + "px"
+                    })
+                  }, null, 4)
+                ], 10, J)), 64))
+              ])
+            ]),
+            t("div", Q, [
+              U(t("input", {
+                "onUpdate:modelValue": o[0] || (o[0] = (a) => i.value = a),
+                type: "color",
+                class: "w-12 h-8 rounded border border-gray-300"
+              }, null, 512), [
+                [V, i.value]
+              ])
+            ])
+          ]),
+          t("div", { class: "flex items-center gap-1" }, [
+            t("button", {
+              onClick: D,
+              class: "w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",
+              title: "Undo"
+            }, " ↩ "),
+            t("button", {
+              onClick: E,
+              class: "w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",
+              title: "Redo"
+            }, " ↪ "),
+            t("button", {
+              onClick: F,
+              class: "w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50",
+              title: "Clear"
+            }, " 🗑 ")
+          ])
+        ])
+      ]),
+      t("div", X, [
+        (u(), z(B(I), {
+          ref_key: "canvasRef",
+          ref: s,
+          key: `${v.selectedResult?.uuid || "default"}-${y.value}`,
+          image: x.value,
+          "onUpdate:image": o[1] || (o[1] = (a) => x.value = a),
+          width: c.value,
+          height: d.value,
+          "stroke-type": "dash",
+          "line-cap": "round",
+          "line-join": "round",
+          "fill-shape": !1,
+          eraser: !1,
+          lineWidth: l.value,
+          color: i.value,
+          "background-color": "#FFFFFF",
+          "background-image": void 0,
+          watermark: void 0,
+          "initial-image": m.value,
+          saveAs: "png",
+          styles: {
+            border: "1px solid #ddd",
+            borderRadius: "8px"
+          },
+          lock: !1,
+          onMouseup: k,
+          onTouchend: k
+        }, null, 8, ["image", "width", "height", "lineWidth", "color", "initial-image"]))
+      ])
+    ]));
+  }
+}), ee = { class: "min-h-[100px] flex items-center justify-center" }, te = ["src"], ae = {
+  key: 1,
+  class: "text-gray-400 text-sm"
+}, se = /* @__PURE__ */ M({
+  __name: "Preview",
+  props: {
+    result: {}
+  },
+  setup(v) {
+    return (b, r) => (u(), g("div", ee, [
+      v.result.data?.imageData ? (u(), g("img", {
+        key: 0,
+        src: v.result.data.imageData,
+        class: "max-w-full h-auto rounded",
+        alt: "Canvas drawing"
+      }, null, 8, te)) : (u(), g("div", ae, "No drawing yet"))
+    ]));
+  }
+}), oe = {
+  ...$,
+  viewComponent: Z,
+  previewComponent: se
+}, ie = { plugin: oe };
+export {
+  se as Preview,
+  ue as SYSTEM_PROMPT,
+  ve as TOOL_DEFINITION,
+  he as TOOL_NAME,
+  Z as View,
+  ie as default,
+  ge as executeOpenCanvas,
+  oe as plugin,
+  $ as pluginCore
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@gui-chat-plugin/canvas",
+  "version": "0.1.0",
+  "description": "Drawing canvas plugin for GUIChat",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src demo"
+  },
+  "peerDependencies": {
+    "gui-chat-protocol": "^0.0.1",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "vue-drawing-canvas": "^1.0.14"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^17.0.0",
+    "gui-chat-protocol": "^0.0.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vue": "^3.5.27",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.2.2"
+  },
+  "keywords": [
+    "guichat",
+    "plugin",
+    "canvas",
+    "drawing"
+  ],
+  "license": "MIT"
+}