@gui-chat-plugin/canvas 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/core.cjs CHANGED
@@ -1 +1 @@
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;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./plugin-CwoU2oDe.cjs`);exports.SYSTEM_PROMPT=e.r,exports.TOOL_DEFINITION=e.i,exports.TOOL_NAME=e.a,exports.executeOpenCanvas=e.t,exports.pluginCore=e.n;
package/dist/core.js CHANGED
@@ -1,27 +1,2 @@
1
- const e = "openCanvas", a = {
2
- type: "function",
3
- name: e,
4
- description: "Open a drawing canvas for the user to create drawings, sketches, or diagrams.",
5
- parameters: {
6
- type: "object",
7
- properties: {},
8
- required: []
9
- }
10
- }, t = `When the user asks 'I want to draw an image.', call ${e} API to open the canvas.`, n = async (r, s) => ({
11
- message: "Drawing canvas opened",
12
- instructions: "Tell the user that you are able to turn the drawing into a photographic image, a manga or any other art style.",
13
- title: "Drawing Canvas"
14
- }), o = {
15
- toolDefinition: a,
16
- execute: n,
17
- generatingMessage: "Opening drawing canvas...",
18
- isEnabled: () => !0,
19
- systemPrompt: t
20
- };
21
- export {
22
- t as SYSTEM_PROMPT,
23
- a as TOOL_DEFINITION,
24
- e as TOOL_NAME,
25
- n as executeOpenCanvas,
26
- o as pluginCore
27
- };
1
+ import { a as e, i as t, n, r, t as i } from "./plugin-Orl-pw1H.js";
2
+ export { r as SYSTEM_PROMPT, t as TOOL_DEFINITION, e as TOOL_NAME, i as executeOpenCanvas, n as pluginCore };
package/dist/index.cjs CHANGED
@@ -1 +1 @@
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;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./plugin-CwoU2oDe.cjs`);require(`./core.cjs`),exports.SYSTEM_PROMPT=e.r,exports.TOOL_DEFINITION=e.i,exports.TOOL_NAME=e.a,exports.executeOpenCanvas=e.t,exports.pluginCore=e.n;
package/dist/index.d.ts CHANGED
@@ -3,4 +3,4 @@
3
3
  *
4
4
  * Main entry point - re-exports core module.
5
5
  */
6
- export * from "./core";
6
+ export * from "./core/index";
package/dist/index.js CHANGED
@@ -1,8 +1,3 @@
1
- import { SYSTEM_PROMPT as T, TOOL_DEFINITION as n, TOOL_NAME as o, executeOpenCanvas as p, pluginCore as r } from "./core.js";
2
- export {
3
- T as SYSTEM_PROMPT,
4
- n as TOOL_DEFINITION,
5
- o as TOOL_NAME,
6
- p as executeOpenCanvas,
7
- r as pluginCore
8
- };
1
+ import { a as e, i as t, n, r, t as i } from "./plugin-Orl-pw1H.js";
2
+ import "./core.js";
3
+ export { r as SYSTEM_PROMPT, t as TOOL_DEFINITION, e as TOOL_NAME, i as executeOpenCanvas, n as pluginCore };
@@ -0,0 +1 @@
1
+ var e=`openCanvas`,t={type:`function`,name:e,description:`Open a drawing canvas for the user to create drawings, sketches, or diagrams.`,parameters:{type:`object`,properties:{},required:[]}},n=`When the user asks 'I want to draw an image.', call ${e} API to open the canvas.`,r=async(e,t)=>({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`}),i={toolDefinition:t,execute:r,generatingMessage:`Opening drawing canvas...`,isEnabled:()=>!0,systemPrompt:n};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
@@ -0,0 +1,23 @@
1
+ //#region src/core/definition.ts
2
+ var e = "openCanvas", t = {
3
+ type: "function",
4
+ name: e,
5
+ description: "Open a drawing canvas for the user to create drawings, sketches, or diagrams.",
6
+ parameters: {
7
+ type: "object",
8
+ properties: {},
9
+ required: []
10
+ }
11
+ }, n = `When the user asks 'I want to draw an image.', call ${e} API to open the canvas.`, r = async (e, t) => ({
12
+ message: "Drawing canvas opened",
13
+ instructions: "Tell the user that you are able to turn the drawing into a photographic image, a manga or any other art style.",
14
+ title: "Drawing Canvas"
15
+ }), i = {
16
+ toolDefinition: t,
17
+ execute: r,
18
+ generatingMessage: "Opening drawing canvas...",
19
+ isEnabled: () => !0,
20
+ systemPrompt: n
21
+ };
22
+ //#endregion
23
+ export { e as a, t as i, i as n, n as r, r as t };
package/dist/style.css CHANGED
@@ -1 +1,3 @@
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-medium:500;--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-24{min-height:calc(var(--spacing)*24)}.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-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-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-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.pt-2{padding-top:calc(var(--spacing)*2)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.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-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)}.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}
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ @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;-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}::-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 (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (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-24{min-height:calc(var(--spacing) * 24)}.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}
3
+ /*$vite$:1*/
@@ -2,7 +2,6 @@ import type { ToolResult } from "gui-chat-protocol/vue";
2
2
  import type { ImageToolData } from "../core/types";
3
3
  type __VLS_Props = {
4
4
  selectedResult: ToolResult<ImageToolData> | null;
5
- sendTextMessage?: (text: string) => void;
6
5
  };
7
6
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
8
7
  updateResult: (result: ToolResult<ImageToolData, unknown>) => any;
package/dist/vue.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./core.cjs"),e=require("vue"),T=require("vue-drawing-canvas"),M={class:"w-full h-full flex flex-col bg-white"},B={class:"flex-shrink-0 p-4 border-b bg-gray-50"},O={class:"flex items-center justify-between gap-4"},F={class:"flex items-center gap-4"},D={class:"flex items-center gap-2"},I={class:"flex gap-1"},$=["onClick"],L={class:"flex items-center gap-2"},j={class:"flex-1 p-4 overflow-hidden"},A={class:"flex-shrink-0 px-4 pt-2 pb-4 flex gap-2 border-t bg-gray-50"},P=["onClick"],k=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(v,{emit:p}){const n=v,C=p,E=[{label:"Ghibli",prompt:"Convert this drawing into a Studio Ghibli style image using editImage."},{label:"Ukiyoe",prompt:"Convert this drawing into a Japanese Ukiyo-e woodblock print style using editImage."},{label:"Suibokuga",prompt:"Convert this drawing into a Japanese Suibokuga ink wash painting style using editImage."},{label:"American Comic",prompt:"Convert this drawing into a classic American superhero comic book style using editImage — bold ink outlines, flat vivid colors, halftone shading, and dynamic composition typical of mid-20th century American comics."}],S=t=>{n.sendTextMessage?.(t)},o=e.ref(null),f=e.ref(""),l=e.ref(5),s=e.ref("#000000"),m=e.ref([]),i=e.ref(800),c=e.ref(600),b=e.ref(0),w=()=>{if(n.selectedResult?.viewState?.drawingState){const t=n.selectedResult.viewState.drawingState;l.value=t.brushSize||5,s.value=t.brushColor||"#000000",i.value=t.canvasWidth||800,c.value=t.canvasHeight||600,t.strokes?m.value=t.strokes:m.value=[]}else m.value=[]};w();const N=async()=>{if(o.value)try{o.value.undo(),setTimeout(g,50)}catch(t){console.warn("Undo operation failed:",t)}},R=async()=>{if(o.value)try{o.value.redo(),setTimeout(g,50)}catch(t){console.warn("Redo operation failed:",t)}},V=()=>{if(o.value)try{o.value.reset(),g()}catch(t){console.warn("Clear operation failed:",t)}},y=()=>{g()},g=async()=>{if(o.value&&n.selectedResult)try{const t=await o.value.save(),a={strokes:o.value.getAllStrokes(),brushSize:l.value,brushColor:s.value,canvasWidth:i.value,canvasHeight:c.value},d={...n.selectedResult,data:{prompt:n.selectedResult.data?.prompt||"",imageData:t},viewState:{drawingState:a}};C("updateResult",d)}catch(t){console.error("Failed to save drawing state:",t)}};e.watch(()=>n.selectedResult,()=>{w()},{immediate:!1}),e.watch([l,s],()=>{g()}),e.watch([i,c],()=>{b.value++});const h=()=>{const t=o.value?.$el?.parentElement;if(t){const r=t.getBoundingClientRect(),a=Math.floor(r.width)-32,d=Math.floor(a*9/16);(a!==i.value||d!==c.value)&&(i.value=a,c.value=d)}};return e.onMounted(async()=>{await e.nextTick(),h(),window.addEventListener("resize",h)}),e.onUnmounted(()=>{window.removeEventListener("resize",h)}),(t,r)=>(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",B,[e.createElementVNode("div",O,[e.createElementVNode("div",F,[e.createElementVNode("div",D,[e.createElementVNode("div",I,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList([2,5,10,20],a=>e.createElementVNode("button",{key:a,onClick:d=>l.value=a,class:e.normalizeClass(["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"])},[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,$)),64))])]),e.createElementVNode("div",L,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[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:N,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:R,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:V,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",j,[(e.openBlock(),e.createBlock(e.unref(T),{ref_key:"canvasRef",ref:o,key:`${v.selectedResult?.uuid||"default"}-${b.value}`,image:f.value,"onUpdate:image":r[1]||(r[1]=a=>f.value=a),width:i.value,height:c.value,"stroke-type":"dash","line-cap":"round","line-join":"round","fill-shape":!1,eraser:!1,lineWidth:l.value,color:s.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:y,onTouchend:y},null,8,["image","width","height","lineWidth","color","initial-image"]))]),e.createElementVNode("div",A,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(E,a=>e.createElementVNode("button",{key:a.label,onClick:d=>S(a.prompt),class:"px-4 py-1.5 rounded border-2 border-gray-300 bg-white hover:bg-gray-50 text-sm font-medium transition-colors"},e.toDisplayString(a.label),9,P)),64))])]))}}),U={class:"min-h-24 flex items-center justify-center"},W=["src"],z={key:1,class:"text-gray-400 text-sm"},_=e.defineComponent({__name:"Preview",props:{result:{}},setup(v){return(p,n)=>(e.openBlock(),e.createElementBlock("div",U,[v.result.data?.imageData?(e.openBlock(),e.createElementBlock("img",{key:0,src:v.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"))]))}}),x={...u.pluginCore,viewComponent:k,previewComponent:_},H={plugin:x};exports.SYSTEM_PROMPT=u.SYSTEM_PROMPT;exports.TOOL_DEFINITION=u.TOOL_DEFINITION;exports.TOOL_NAME=u.TOOL_NAME;exports.executeOpenCanvas=u.executeOpenCanvas;exports.pluginCore=u.pluginCore;exports.Preview=_;exports.View=k;exports.default=H;exports.plugin=x;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=require(`./plugin-CwoU2oDe.cjs`);let l=require(`vue`),u=require(`vue-drawing-canvas`);u=s(u);var d={class:`w-full h-full flex flex-col bg-white`},f={class:`flex-shrink-0 p-4 border-b bg-gray-50`},p={class:`flex items-center justify-between gap-4`},m={class:`flex items-center gap-4`},h={class:`flex items-center gap-2`},g={class:`flex gap-1`},_=[`onClick`],v={class:`flex items-center gap-2`},y={class:`flex-1 p-4 overflow-hidden`},b=(0,l.defineComponent)({__name:`View`,props:{selectedResult:{}},emits:[`updateResult`],setup(e,{emit:t}){let n=e,r=t,i=(0,l.ref)(null),a=(0,l.ref)(``),o=(0,l.ref)(5),s=(0,l.ref)(`#000000`),c=(0,l.ref)([]),b=(0,l.ref)(800),x=(0,l.ref)(600),S=(0,l.ref)(0),C=()=>{if(n.selectedResult?.viewState?.drawingState){let e=n.selectedResult.viewState.drawingState;o.value=e.brushSize||5,s.value=e.brushColor||`#000000`,b.value=e.canvasWidth||800,x.value=e.canvasHeight||600,e.strokes?c.value=e.strokes:c.value=[]}else c.value=[]};C();let w=async()=>{if(i.value)try{i.value.undo(),setTimeout(O,50)}catch(e){console.warn(`Undo operation failed:`,e)}},T=async()=>{if(i.value)try{i.value.redo(),setTimeout(O,50)}catch(e){console.warn(`Redo operation failed:`,e)}},E=()=>{if(i.value)try{i.value.reset(),O()}catch(e){console.warn(`Clear operation failed:`,e)}},D=()=>{O()},O=async()=>{if(i.value&&n.selectedResult)try{let e=await i.value.save(),t={strokes:i.value.getAllStrokes(),brushSize:o.value,brushColor:s.value,canvasWidth:b.value,canvasHeight:x.value};r(`updateResult`,{...n.selectedResult,data:{prompt:n.selectedResult.data?.prompt||``,imageData:e},viewState:{drawingState:t}})}catch(e){console.error(`Failed to save drawing state:`,e)}};(0,l.watch)(()=>n.selectedResult,()=>{C()},{immediate:!1}),(0,l.watch)([o,s],()=>{O()}),(0,l.watch)([b,x],()=>{S.value++});let k=()=>{let e=i.value?.$el?.parentElement;if(e){let t=e.getBoundingClientRect(),n=Math.floor(t.width),r=Math.floor(n*9/16);(n!==b.value||r!==x.value)&&(b.value=n,x.value=r)}};return(0,l.onMounted)(async()=>{await(0,l.nextTick)(),k(),window.addEventListener(`resize`,k)}),(0,l.onUnmounted)(()=>{window.removeEventListener(`resize`,k)}),(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,d,[(0,l.createElementVNode)(`div`,f,[(0,l.createElementVNode)(`div`,p,[(0,l.createElementVNode)(`div`,m,[(0,l.createElementVNode)(`div`,h,[(0,l.createElementVNode)(`div`,g,[((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)([2,5,10,20],e=>(0,l.createElementVNode)(`button`,{key:e,onClick:t=>o.value=e,class:(0,l.normalizeClass)([`w-8 h-8 rounded border-2 transition-colors`,o.value===e?`border-blue-500 bg-blue-100`:`border-gray-300 bg-white hover:bg-gray-50`])},[(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)(`bg-gray-800 rounded-full mx-auto`),style:(0,l.normalizeStyle)({width:Math.max(2,e*1)+`px`,height:Math.max(2,e*1)+`px`})},null,4)],10,_)),64))])]),(0,l.createElementVNode)(`div`,v,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`color`,class:`w-12 h-8 rounded border border-gray-300`},null,512),[[l.vModelText,s.value]])])]),(0,l.createElementVNode)(`div`,{class:`flex items-center gap-1`},[(0,l.createElementVNode)(`button`,{onClick:w,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50`,title:`Undo`},``),(0,l.createElementVNode)(`button`,{onClick:T,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50`,title:`Redo`},``),(0,l.createElementVNode)(`button`,{onClick:E,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50`,title:`Clear`},` 🗑 `)])])]),(0,l.createElementVNode)(`div`,y,[((0,l.openBlock)(),(0,l.createBlock)((0,l.unref)(u.default),{ref_key:`canvasRef`,ref:i,key:`${e.selectedResult?.uuid||`default`}-${S.value}`,image:a.value,"onUpdate:image":n[1]||=e=>a.value=e,width:b.value,height:x.value,"stroke-type":`dash`,"line-cap":`round`,"line-join":`round`,"fill-shape":!1,eraser:!1,lineWidth:o.value,color:s.value,"background-color":`#FFFFFF`,"background-image":void 0,watermark:void 0,"initial-image":c.value,saveAs:`png`,styles:{border:`1px solid #ddd`,borderRadius:`8px`},lock:!1,onMouseup:D,onTouchend:D},null,8,[`image`,`width`,`height`,`lineWidth`,`color`,`initial-image`]))])]))}}),x={class:`min-h-24 flex items-center justify-center`},S=[`src`],C={key:1,class:`text-gray-400 text-sm`},w=(0,l.defineComponent)({__name:`Preview`,props:{result:{}},setup(e){return(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,x,[e.result.data?.imageData?((0,l.openBlock)(),(0,l.createElementBlock)(`img`,{key:0,src:e.result.data.imageData,class:`max-w-full h-auto rounded`,alt:`Canvas drawing`},null,8,S)):((0,l.openBlock)(),(0,l.createElementBlock)(`div`,C,`No drawing yet`))]))}}),T={...c.n,viewComponent:b,previewComponent:w},E={plugin:T};exports.Preview=w,exports.SYSTEM_PROMPT=c.r,exports.TOOL_DEFINITION=c.i,exports.TOOL_NAME=c.a,exports.View=b,exports.default=E,exports.executeOpenCanvas=c.t,exports.plugin=T,exports.pluginCore=c.n;
package/dist/vue.js CHANGED
@@ -1,222 +1,167 @@
1
- import { pluginCore as O } from "./core.js";
2
- import { SYSTEM_PROMPT as he, TOOL_DEFINITION as me, TOOL_NAME as pe, executeOpenCanvas as be } from "./core.js";
3
- import { defineComponent as M, ref as n, watch as f, onMounted as U, nextTick as j, onUnmounted as A, openBlock as r, createElementBlock as g, createElementVNode as a, Fragment as C, renderList as S, normalizeClass as R, normalizeStyle as W, withDirectives as L, vModelText as N, createBlock as V, unref as z, toDisplayString as B } from "vue";
4
- import H from "vue-drawing-canvas";
5
- const P = { class: "w-full h-full flex flex-col bg-white" }, G = { class: "flex-shrink-0 p-4 border-b bg-gray-50" }, J = { class: "flex items-center justify-between gap-4" }, K = { class: "flex items-center gap-4" }, Y = { class: "flex items-center gap-2" }, q = { class: "flex gap-1" }, Q = ["onClick"], X = { class: "flex items-center gap-2" }, Z = { class: "flex-1 p-4 overflow-hidden" }, ee = { class: "flex-shrink-0 px-4 pt-2 pb-4 flex gap-2 border-t bg-gray-50" }, te = ["onClick"], ae = /* @__PURE__ */ M({
6
- __name: "View",
7
- props: {
8
- selectedResult: {},
9
- sendTextMessage: { type: Function }
10
- },
11
- emits: ["updateResult"],
12
- setup(h, { emit: w }) {
13
- const s = h, T = w, D = [
14
- { label: "Ghibli", prompt: "Convert this drawing into a Studio Ghibli style image using editImage." },
15
- { label: "Ukiyoe", prompt: "Convert this drawing into a Japanese Ukiyo-e woodblock print style using editImage." },
16
- { label: "Suibokuga", prompt: "Convert this drawing into a Japanese Suibokuga ink wash painting style using editImage." },
17
- { label: "American Comic", prompt: "Convert this drawing into a classic American superhero comic book style using editImage — bold ink outlines, flat vivid colors, halftone shading, and dynamic composition typical of mid-20th century American comics." }
18
- ], F = (e) => {
19
- s.sendTextMessage?.(e);
20
- }, o = n(null), y = n(""), l = n(5), c = n("#000000"), p = n([]), d = n(800), u = n(600), x = n(0), k = () => {
21
- if (s.selectedResult?.viewState?.drawingState) {
22
- const e = s.selectedResult.viewState.drawingState;
23
- l.value = e.brushSize || 5, c.value = e.brushColor || "#000000", d.value = e.canvasWidth || 800, u.value = e.canvasHeight || 600, e.strokes ? p.value = e.strokes : p.value = [];
24
- } else
25
- p.value = [];
26
- };
27
- k();
28
- const E = async () => {
29
- if (o.value)
30
- try {
31
- o.value.undo(), setTimeout(m, 50);
32
- } catch (e) {
33
- console.warn("Undo operation failed:", e);
34
- }
35
- }, $ = async () => {
36
- if (o.value)
37
- try {
38
- o.value.redo(), setTimeout(m, 50);
39
- } catch (e) {
40
- console.warn("Redo operation failed:", e);
41
- }
42
- }, I = () => {
43
- if (o.value)
44
- try {
45
- o.value.reset(), m();
46
- } catch (e) {
47
- console.warn("Clear operation failed:", e);
48
- }
49
- }, _ = () => {
50
- m();
51
- }, m = async () => {
52
- if (o.value && s.selectedResult)
53
- try {
54
- const e = await o.value.save(), t = {
55
- strokes: o.value.getAllStrokes(),
56
- brushSize: l.value,
57
- brushColor: c.value,
58
- canvasWidth: d.value,
59
- canvasHeight: u.value
60
- }, v = {
61
- ...s.selectedResult,
62
- data: {
63
- prompt: s.selectedResult.data?.prompt || "",
64
- imageData: e
65
- },
66
- viewState: {
67
- drawingState: t
68
- }
69
- };
70
- T("updateResult", v);
71
- } catch (e) {
72
- console.error("Failed to save drawing state:", e);
73
- }
74
- };
75
- f(
76
- () => s.selectedResult,
77
- () => {
78
- k();
79
- },
80
- { immediate: !1 }
81
- ), f([l, c], () => {
82
- m();
83
- }), f([d, u], () => {
84
- x.value++;
85
- });
86
- const b = () => {
87
- const e = o.value?.$el?.parentElement;
88
- if (e) {
89
- const i = e.getBoundingClientRect(), t = Math.floor(i.width) - 32, v = Math.floor(t * 9 / 16);
90
- (t !== d.value || v !== u.value) && (d.value = t, u.value = v);
91
- }
92
- };
93
- return U(async () => {
94
- await j(), b(), window.addEventListener("resize", b);
95
- }), A(() => {
96
- window.removeEventListener("resize", b);
97
- }), (e, i) => (r(), g("div", P, [
98
- a("div", G, [
99
- a("div", J, [
100
- a("div", K, [
101
- a("div", Y, [
102
- a("div", q, [
103
- (r(), g(C, null, S([2, 5, 10, 20], (t) => a("button", {
104
- key: t,
105
- onClick: (v) => l.value = t,
106
- class: R([
107
- "w-8 h-8 rounded border-2 transition-colors",
108
- l.value === t ? "border-blue-500 bg-blue-100" : "border-gray-300 bg-white hover:bg-gray-50"
109
- ])
110
- }, [
111
- a("div", {
112
- class: R("bg-gray-800 rounded-full mx-auto"),
113
- style: W({
114
- width: Math.max(2, t * 1) + "px",
115
- height: Math.max(2, t * 1) + "px"
116
- })
117
- }, null, 4)
118
- ], 10, Q)), 64))
119
- ])
120
- ]),
121
- a("div", X, [
122
- L(a("input", {
123
- "onUpdate:modelValue": i[0] || (i[0] = (t) => c.value = t),
124
- type: "color",
125
- class: "w-12 h-8 rounded border border-gray-300"
126
- }, null, 512), [
127
- [N, c.value]
128
- ])
129
- ])
130
- ]),
131
- a("div", { class: "flex items-center gap-1" }, [
132
- a("button", {
133
- onClick: E,
134
- class: "w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",
135
- title: "Undo"
136
- }, " ↩ "),
137
- a("button", {
138
- onClick: $,
139
- class: "w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",
140
- title: "Redo"
141
- }, ""),
142
- a("button", {
143
- onClick: I,
144
- class: "w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50",
145
- title: "Clear"
146
- }, " 🗑 ")
147
- ])
148
- ])
149
- ]),
150
- a("div", Z, [
151
- (r(), V(z(H), {
152
- ref_key: "canvasRef",
153
- ref: o,
154
- key: `${h.selectedResult?.uuid || "default"}-${x.value}`,
155
- image: y.value,
156
- "onUpdate:image": i[1] || (i[1] = (t) => y.value = t),
157
- width: d.value,
158
- height: u.value,
159
- "stroke-type": "dash",
160
- "line-cap": "round",
161
- "line-join": "round",
162
- "fill-shape": !1,
163
- eraser: !1,
164
- lineWidth: l.value,
165
- color: c.value,
166
- "background-color": "#FFFFFF",
167
- "background-image": void 0,
168
- watermark: void 0,
169
- "initial-image": p.value,
170
- saveAs: "png",
171
- styles: {
172
- border: "1px solid #ddd",
173
- borderRadius: "8px"
174
- },
175
- lock: !1,
176
- onMouseup: _,
177
- onTouchend: _
178
- }, null, 8, ["image", "width", "height", "lineWidth", "color", "initial-image"]))
179
- ]),
180
- a("div", ee, [
181
- (r(), g(C, null, S(D, (t) => a("button", {
182
- key: t.label,
183
- onClick: (v) => F(t.prompt),
184
- class: "px-4 py-1.5 rounded border-2 border-gray-300 bg-white hover:bg-gray-50 text-sm font-medium transition-colors"
185
- }, B(t.label), 9, te)), 64))
186
- ])
187
- ]));
188
- }
189
- }), oe = { class: "min-h-24 flex items-center justify-center" }, se = ["src"], ne = {
190
- key: 1,
191
- class: "text-gray-400 text-sm"
192
- }, ie = /* @__PURE__ */ M({
193
- __name: "Preview",
194
- props: {
195
- result: {}
196
- },
197
- setup(h) {
198
- return (w, s) => (r(), g("div", oe, [
199
- h.result.data?.imageData ? (r(), g("img", {
200
- key: 0,
201
- src: h.result.data.imageData,
202
- class: "max-w-full h-auto rounded",
203
- alt: "Canvas drawing"
204
- }, null, 8, se)) : (r(), g("div", ne, "No drawing yet"))
205
- ]));
206
- }
207
- }), re = {
208
- ...O,
209
- viewComponent: ae,
210
- previewComponent: ie
211
- }, ue = { plugin: re };
212
- export {
213
- ie as Preview,
214
- he as SYSTEM_PROMPT,
215
- me as TOOL_DEFINITION,
216
- pe as TOOL_NAME,
217
- ae as View,
218
- ue as default,
219
- be as executeOpenCanvas,
220
- re as plugin,
221
- O as pluginCore
222
- };
1
+ import { a as e, i as t, n, r, t as i } from "./plugin-Orl-pw1H.js";
2
+ import { Fragment as a, createBlock as o, createElementBlock as s, createElementVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, ref as g, renderList as _, unref as v, vModelText as y, watch as b, withDirectives as x } from "vue";
3
+ import S from "vue-drawing-canvas";
4
+ //#region src/vue/View.vue?vue&type=script&setup=true&lang.ts
5
+ var C = { class: "w-full h-full flex flex-col bg-white" }, w = { class: "flex-shrink-0 p-4 border-b bg-gray-50" }, T = { class: "flex items-center justify-between gap-4" }, E = { class: "flex items-center gap-4" }, D = { class: "flex items-center gap-2" }, O = { class: "flex gap-1" }, k = ["onClick"], A = { class: "flex items-center gap-2" }, j = { class: "flex-1 p-4 overflow-hidden" }, M = /* @__PURE__ */ l({
6
+ __name: "View",
7
+ props: { selectedResult: {} },
8
+ emits: ["updateResult"],
9
+ setup(e, { emit: t }) {
10
+ let n = e, r = t, i = g(null), l = g(""), M = g(5), N = g("#000000"), P = g([]), F = g(800), I = g(600), L = g(0), R = () => {
11
+ if (n.selectedResult?.viewState?.drawingState) {
12
+ let e = n.selectedResult.viewState.drawingState;
13
+ M.value = e.brushSize || 5, N.value = e.brushColor || "#000000", F.value = e.canvasWidth || 800, I.value = e.canvasHeight || 600, e.strokes ? P.value = e.strokes : P.value = [];
14
+ } else P.value = [];
15
+ };
16
+ R();
17
+ let z = async () => {
18
+ if (i.value) try {
19
+ i.value.undo(), setTimeout(U, 50);
20
+ } catch (e) {
21
+ console.warn("Undo operation failed:", e);
22
+ }
23
+ }, B = async () => {
24
+ if (i.value) try {
25
+ i.value.redo(), setTimeout(U, 50);
26
+ } catch (e) {
27
+ console.warn("Redo operation failed:", e);
28
+ }
29
+ }, V = () => {
30
+ if (i.value) try {
31
+ i.value.reset(), U();
32
+ } catch (e) {
33
+ console.warn("Clear operation failed:", e);
34
+ }
35
+ }, H = () => {
36
+ U();
37
+ }, U = async () => {
38
+ if (i.value && n.selectedResult) try {
39
+ let e = await i.value.save(), t = {
40
+ strokes: i.value.getAllStrokes(),
41
+ brushSize: M.value,
42
+ brushColor: N.value,
43
+ canvasWidth: F.value,
44
+ canvasHeight: I.value
45
+ };
46
+ r("updateResult", {
47
+ ...n.selectedResult,
48
+ data: {
49
+ prompt: n.selectedResult.data?.prompt || "",
50
+ imageData: e
51
+ },
52
+ viewState: { drawingState: t }
53
+ });
54
+ } catch (e) {
55
+ console.error("Failed to save drawing state:", e);
56
+ }
57
+ };
58
+ b(() => n.selectedResult, () => {
59
+ R();
60
+ }, { immediate: !1 }), b([M, N], () => {
61
+ U();
62
+ }), b([F, I], () => {
63
+ L.value++;
64
+ });
65
+ let W = () => {
66
+ let e = i.value?.$el?.parentElement;
67
+ if (e) {
68
+ let t = e.getBoundingClientRect(), n = Math.floor(t.width), r = Math.floor(n * 9 / 16);
69
+ (n !== F.value || r !== I.value) && (F.value = n, I.value = r);
70
+ }
71
+ };
72
+ return p(async () => {
73
+ await u(), W(), window.addEventListener("resize", W);
74
+ }), m(() => {
75
+ window.removeEventListener("resize", W);
76
+ }), (t, n) => (h(), s("div", C, [c("div", w, [c("div", T, [c("div", E, [c("div", D, [c("div", O, [(h(), s(a, null, _([
77
+ 2,
78
+ 5,
79
+ 10,
80
+ 20
81
+ ], (e) => c("button", {
82
+ key: e,
83
+ onClick: (t) => M.value = e,
84
+ class: d(["w-8 h-8 rounded border-2 transition-colors", M.value === e ? "border-blue-500 bg-blue-100" : "border-gray-300 bg-white hover:bg-gray-50"])
85
+ }, [c("div", {
86
+ class: d("bg-gray-800 rounded-full mx-auto"),
87
+ style: f({
88
+ width: Math.max(2, e * 1) + "px",
89
+ height: Math.max(2, e * 1) + "px"
90
+ })
91
+ }, null, 4)], 10, k)), 64))])]), c("div", A, [x(c("input", {
92
+ "onUpdate:modelValue": n[0] ||= (e) => N.value = e,
93
+ type: "color",
94
+ class: "w-12 h-8 rounded border border-gray-300"
95
+ }, null, 512), [[y, N.value]])])]), c("div", { class: "flex items-center gap-1" }, [
96
+ c("button", {
97
+ onClick: z,
98
+ class: "w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",
99
+ title: "Undo"
100
+ }, ""),
101
+ c("button", {
102
+ onClick: B,
103
+ class: "w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50",
104
+ title: "Redo"
105
+ }, " "),
106
+ c("button", {
107
+ onClick: V,
108
+ class: "w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50",
109
+ title: "Clear"
110
+ }, " 🗑 ")
111
+ ])])]), c("div", j, [(h(), o(v(S), {
112
+ ref_key: "canvasRef",
113
+ ref: i,
114
+ key: `${e.selectedResult?.uuid || "default"}-${L.value}`,
115
+ image: l.value,
116
+ "onUpdate:image": n[1] ||= (e) => l.value = e,
117
+ width: F.value,
118
+ height: I.value,
119
+ "stroke-type": "dash",
120
+ "line-cap": "round",
121
+ "line-join": "round",
122
+ "fill-shape": !1,
123
+ eraser: !1,
124
+ lineWidth: M.value,
125
+ color: N.value,
126
+ "background-color": "#FFFFFF",
127
+ "background-image": void 0,
128
+ watermark: void 0,
129
+ "initial-image": P.value,
130
+ saveAs: "png",
131
+ styles: {
132
+ border: "1px solid #ddd",
133
+ borderRadius: "8px"
134
+ },
135
+ lock: !1,
136
+ onMouseup: H,
137
+ onTouchend: H
138
+ }, null, 8, [
139
+ "image",
140
+ "width",
141
+ "height",
142
+ "lineWidth",
143
+ "color",
144
+ "initial-image"
145
+ ]))])]));
146
+ }
147
+ }), N = { class: "min-h-24 flex items-center justify-center" }, P = ["src"], F = {
148
+ key: 1,
149
+ class: "text-gray-400 text-sm"
150
+ }, I = /* @__PURE__ */ l({
151
+ __name: "Preview",
152
+ props: { result: {} },
153
+ setup(e) {
154
+ return (t, n) => (h(), s("div", N, [e.result.data?.imageData ? (h(), s("img", {
155
+ key: 0,
156
+ src: e.result.data.imageData,
157
+ class: "max-w-full h-auto rounded",
158
+ alt: "Canvas drawing"
159
+ }, null, 8, P)) : (h(), s("div", F, "No drawing yet"))]));
160
+ }
161
+ }), L = {
162
+ ...n,
163
+ viewComponent: M,
164
+ previewComponent: I
165
+ }, R = { plugin: L };
166
+ //#endregion
167
+ export { I as Preview, r as SYSTEM_PROMPT, t as TOOL_DEFINITION, e as TOOL_NAME, M as View, R as default, i as executeOpenCanvas, L as plugin, n as pluginCore };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gui-chat-plugin/canvas",
3
- "version": "0.3.3",
3
+ "version": "0.3.4",
4
4
  "description": "Drawing canvas plugin for GUIChat",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -41,20 +41,21 @@
41
41
  "vue-drawing-canvas": "^1.0.14"
42
42
  },
43
43
  "devDependencies": {
44
- "@tailwindcss/vite": "^4.1.18",
45
- "@typescript-eslint/eslint-plugin": "^8.53.0",
46
- "@typescript-eslint/parser": "^8.53.0",
47
- "@vitejs/plugin-vue": "^6.0.3",
48
- "eslint": "^9.39.2",
49
- "eslint-plugin-vue": "^10.6.2",
50
- "globals": "^17.0.0",
51
- "gui-chat-protocol": "^0.0.3",
52
- "tailwindcss": "^4.1.18",
44
+ "@eslint/js": "^10.0.1",
45
+ "@tailwindcss/vite": "^4.2.2",
46
+ "@typescript-eslint/eslint-plugin": "^8.58.0",
47
+ "@typescript-eslint/parser": "^8.58.0",
48
+ "@vitejs/plugin-vue": "^6.0.5",
49
+ "eslint": "^10.1.0",
50
+ "eslint-plugin-vue": "^10.8.0",
51
+ "globals": "^17.4.0",
52
+ "gui-chat-protocol": "^0.0.4",
53
+ "tailwindcss": "^4.2.2",
53
54
  "typescript": "~5.9.3",
54
- "vite": "^7.3.1",
55
- "vue": "^3.5.27",
56
- "vue-eslint-parser": "^10.2.0",
57
- "vue-tsc": "^3.2.2"
55
+ "vite": "^8.0.3",
56
+ "vue": "^3.5.31",
57
+ "vue-eslint-parser": "^10.4.0",
58
+ "vue-tsc": "^3.2.6"
58
59
  },
59
60
  "keywords": [
60
61
  "guichat",