@gui-chat-plugin/drawing-game 0.1.1

package/README.md

@@ -0,0 +1,112 @@
+# @gui-chat-plugin/drawing-game
+
+Drawing game plugin for GUI Chat applications. Draw pictures using only primitive shapes through voice/chat instructions, then let AI guess what you drew!
+
+## Features
+
+- Draw with primitive shapes: circle, ellipse, rectangle, triangle, line
+- Fill patterns: solid, hatched, dotted, striped
+- Edit operations: move, undo
+- AI guessing: Let the AI guess what you drew
+
+## Installation
+
+```bash
+yarn add @gui-chat-plugin/drawing-game
+```
+
+## Usage
+
+### Vue Integration
+
+```typescript
+// In src/tools/index.ts
+import DrawingGamePlugin from "@gui-chat-plugin/drawing-game/vue";
+
+const pluginList = [
+  // ... other plugins
+  DrawingGamePlugin,
+];
+
+// In src/main.ts
+import "@gui-chat-plugin/drawing-game/style.css";
+```
+
+### Core-only Usage
+
+```typescript
+import { executeDrawingGame, TOOL_DEFINITION } from "@gui-chat-plugin/drawing-game";
+
+// Start a new game
+const result = await executeDrawingGame(context, { action: "start" });
+
+// Draw a circle
+const result = await executeDrawingGame(context, {
+  action: "circle",
+  x: 50,
+  y: 50,
+  size: 30,
+  color: "blue",
+});
+```
+
+## API
+
+### Actions
+
+| Action | Description |
+|--------|-------------|
+| `start` | Clear canvas and start new game |
+| `circle` | Draw a circle (x, y, size, color, pattern) |
+| `ellipse` | Draw an ellipse (x, y, width, height, color, pattern) |
+| `rectangle` | Draw a rectangle (x, y, width, height, color, pattern) |
+| `triangle` | Draw a triangle (x, y, size, color, pattern) |
+| `line` | Draw a line (x1, y1, x2, y2, color, strokeWidth) |
+| `fill` | Change default fill color |
+| `pattern` | Change default pattern (solid/hatched/dotted/striped) |
+| `move` | Move last shape (dx, dy) |
+| `undo` | Remove last shape |
+| `guess` | AI guesses what the drawing is |
+
+### Position Guide
+
+- **x**: 0=left, 50=center, 100=right
+- **y**: 0=top, 50=center, 100=bottom
+- **size**: 5=tiny, 15=small, 30=medium, 50=large
+
+### Patterns
+
+- `solid` - Normal fill
+- `hatched` - Diagonal lines
+- `dotted` - Dots pattern
+- `striped` - Horizontal stripes
+
+## Test Prompts
+
+Try these prompts to test the plugin:
+
+1. "Let's play the drawing game"
+2. "Draw a big blue circle in the center"
+3. "Add a small red triangle on top"
+4. "Move it a bit to the right"
+5. "Guess what I drew!"
+
+## Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Run Vue demo
+yarn dev
+
+# Build
+yarn build
+
+# Lint
+yarn lint
+```
+
+## License
+
+MIT

package/dist/core/definition.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Drawing Game Tool Definition
+ */
+import type { ToolDefinition } from "gui-chat-protocol";
+export declare const TOOL_NAME = "drawingGame";
+export declare const TOOL_DEFINITION: ToolDefinition;
+export declare const SYSTEM_PROMPT = "You are playing a drawing game. The user will describe what they want to draw, and you must interpret their instructions using ONLY primitive shapes.\n\nAVAILABLE COMMANDS:\n- start: Clear canvas and begin new game\n- circle: Draw a circle (x, y, size, color, pattern)\n- ellipse: Draw an ellipse (x, y, width, height, color, pattern)\n- rectangle: Draw a rectangle (x, y, width, height, color, pattern)\n- triangle: Draw a triangle (x, y, size, color, pattern)\n- line: Draw a line (x1, y1, x2, y2, color, strokeWidth)\n- fill: Change default fill color\n- pattern: Change default pattern (solid/hatched/dotted/striped)\n- move: Move last shape (dx, dy as relative movement)\n- undo: Remove last shape\n- guess: Guess what the drawing is\n\nPOSITION GUIDE (0-100):\n- x: 0=left edge, 50=center, 100=right edge\n- y: 0=top edge, 50=center, 100=bottom edge\n- size: 5=tiny, 15=small, 30=medium, 50=large\n\nPATTERNS:\n- solid: Normal fill\n- hatched: Diagonal lines (\u7DB2\u639B\u3051)\n- dotted: Dots pattern\n- striped: Horizontal stripes\n\nEXAMPLES:\n- \"\u5927\u304D\u306A\u9752\u3044\u4E38\u3092\u4E2D\u592E\u306B\" \u2192 circle x:50, y:50, size:30, color:blue\n- \"\u4E0A\u306B\u5C0F\u3055\u306A\u8D64\u3044\u4E09\u89D2\" \u2192 triangle x:50, y:20, size:15, color:red\n- \"\u7DB2\u639B\u3051\u306E\u56DB\u89D2\" \u2192 rectangle with pattern:hatched\n- \"\u3061\u3087\u3063\u3068\u53F3\u306B\" \u2192 move dx:10, dy:0\n- \"\u5F53\u3066\u3066!\" \u2192 guess\n\nRULES:\n1. Only use primitive shapes - no complex drawings!\n2. Interpret user's natural language into coordinates\n3. When user says \"\u5F53\u3066\u3066\" or \"guess\", call the guess action\n4. Be creative but stick to primitives!";

package/dist/core/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Drawing Game Plugin Core Exports
+ */
+export type { PatternType, Shape, CircleShape, EllipseShape, RectangleShape, TriangleShape, LineShape, GamePhase, DrawingGameData, DrawingGameJsonData, ActionType, DrawingGameArgs, } from "./types";
+export { pluginCore, executeDrawingGame } from "./plugin";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+export { SAMPLES } from "./samples";

package/dist/core/plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Drawing Game Plugin Core
+ */
+import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
+import type { DrawingGameData, DrawingGameJsonData, DrawingGameArgs } from "./types";
+export declare const executeDrawingGame: (context: ToolContext, args: DrawingGameArgs) => Promise<ToolResult<DrawingGameData, DrawingGameJsonData>>;
+export declare const pluginCore: ToolPluginCore<DrawingGameData, DrawingGameJsonData, DrawingGameArgs>;

package/dist/core/samples.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Drawing Game Sample Data
+ */
+import type { ToolSample } from "gui-chat-protocol";
+export declare const SAMPLES: ToolSample[];

package/dist/core/types.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Drawing Game Plugin Types
+ */
+export type PatternType = "solid" | "hatched" | "dotted" | "striped";
+export interface BaseShape {
+    id: string;
+    type: "circle" | "ellipse" | "rectangle" | "triangle" | "line";
+    color: string;
+    pattern: PatternType;
+}
+export interface CircleShape extends BaseShape {
+    type: "circle";
+    x: number;
+    y: number;
+    size: number;
+}
+export interface EllipseShape extends BaseShape {
+    type: "ellipse";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface RectangleShape extends BaseShape {
+    type: "rectangle";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface TriangleShape extends BaseShape {
+    type: "triangle";
+    x: number;
+    y: number;
+    size: number;
+}
+export interface LineShape extends BaseShape {
+    type: "line";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    strokeWidth: number;
+}
+export type Shape = CircleShape | EllipseShape | RectangleShape | TriangleShape | LineShape;
+export type GamePhase = "drawing" | "guessing";
+/** Data for View/Preview components */
+export interface DrawingGameData {
+    shapes: Shape[];
+    defaultColor: string;
+    defaultPattern: PatternType;
+    gamePhase: GamePhase;
+}
+/** Data returned to LLM */
+export interface DrawingGameJsonData {
+    shapeCount: number;
+    gamePhase: GamePhase;
+    lastAction: string;
+    shapeDescriptions?: string[];
+}
+export type ActionType = "start" | "circle" | "ellipse" | "rectangle" | "triangle" | "line" | "fill" | "pattern" | "move" | "undo" | "guess";
+export interface DrawingGameArgs {
+    action: ActionType;
+    x?: number;
+    y?: number;
+    size?: number;
+    width?: number;
+    height?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    strokeWidth?: number;
+    color?: string;
+    pattern?: PatternType;
+    dx?: number;
+    dy?: number;
+}

package/dist/core.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./plugin-Csnn_dZJ.cjs`);exports.SAMPLES=e.r,exports.SYSTEM_PROMPT=e.i,exports.TOOL_DEFINITION=e.a,exports.TOOL_NAME=e.o,exports.executeDrawingGame=e.t,exports.pluginCore=e.n;

package/dist/core.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "./plugin-B4TbiRHo.js";
+export { i as SAMPLES, t as SYSTEM_PROMPT, e as TOOL_DEFINITION, r as TOOL_NAME, a as executeDrawingGame, n as pluginCore };

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./plugin-Csnn_dZJ.cjs`);require(`./core.cjs`),exports.SAMPLES=e.r,exports.SYSTEM_PROMPT=e.i,exports.TOOL_DEFINITION=e.a,exports.TOOL_NAME=e.o,exports.default=e.n,exports.pluginCore=e.n,exports.executeDrawingGame=e.t;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * MulmoChat Quiz Plugin
+ *
+ * Default export is the framework-agnostic core.
+ * For Vue implementation, import from "@mulmochat-plugin/quiz/vue"
+ *
+ * @example Default (Core - framework-agnostic)
+ * ```typescript
+ * import { pluginCore, TOOL_NAME, QuizData } from "@mulmochat-plugin/quiz";
+ * ```
+ *
+ * @example Vue implementation
+ * ```typescript
+ * import QuizPlugin from "@mulmochat-plugin/quiz/vue";
+ * import "@mulmochat-plugin/quiz/style.css";
+ * ```
+ */
+export * from "./core/index";
+export { pluginCore as default } from "./core/index";

package/dist/index.js

@@ -0,0 +1,3 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "./plugin-B4TbiRHo.js";
+import "./core.js";
+export { i as SAMPLES, t as SYSTEM_PROMPT, e as TOOL_DEFINITION, r as TOOL_NAME, n as default, n as pluginCore, a as executeDrawingGame };

package/dist/plugin-B4TbiRHo.js

@@ -0,0 +1,327 @@
+//#region src/core/definition.ts
+var e = "drawingGame", t = {
+	type: "function",
+	name: e,
+	description: "A drawing game where you help the user draw pictures using only primitive shapes. The user describes what to draw, and you interpret their instructions into shape commands. At the end, you guess what they drew.",
+	parameters: {
+		type: "object",
+		properties: {
+			action: {
+				type: "string",
+				enum: [
+					"start",
+					"circle",
+					"ellipse",
+					"rectangle",
+					"triangle",
+					"line",
+					"fill",
+					"pattern",
+					"move",
+					"undo",
+					"guess"
+				],
+				description: "The action to perform. start: Clear canvas and start new game. circle/ellipse/rectangle/triangle/line: Draw shapes. fill: Change default fill color. pattern: Change default pattern (solid/hatched/dotted/striped). move: Move the last shape. undo: Remove last shape. guess: Make a guess what the drawing represents."
+			},
+			x: {
+				type: "number",
+				description: "X position (0-100, where 0=left, 50=center, 100=right)"
+			},
+			y: {
+				type: "number",
+				description: "Y position (0-100, where 0=top, 50=center, 100=bottom)"
+			},
+			size: {
+				type: "number",
+				description: "Size for circle/triangle (0-100, where 5=tiny, 15=small, 30=medium, 50=large)"
+			},
+			width: {
+				type: "number",
+				description: "Width for ellipse/rectangle (0-100)"
+			},
+			height: {
+				type: "number",
+				description: "Height for ellipse/rectangle (0-100)"
+			},
+			x1: {
+				type: "number",
+				description: "Start X for line (0-100)"
+			},
+			y1: {
+				type: "number",
+				description: "Start Y for line (0-100)"
+			},
+			x2: {
+				type: "number",
+				description: "End X for line (0-100)"
+			},
+			y2: {
+				type: "number",
+				description: "End Y for line (0-100)"
+			},
+			strokeWidth: {
+				type: "number",
+				description: "Line width (1-10, default 2)"
+			},
+			color: {
+				type: "string",
+				description: "CSS color name or hex (e.g., 'blue', 'red', '#FF5733')"
+			},
+			pattern: {
+				type: "string",
+				enum: [
+					"solid",
+					"hatched",
+					"dotted",
+					"striped"
+				],
+				description: "Fill pattern: solid (normal), hatched (diagonal lines), dotted, striped (horizontal)"
+			},
+			dx: {
+				type: "number",
+				description: "Relative X movement for move action (-100 to 100)"
+			},
+			dy: {
+				type: "number",
+				description: "Relative Y movement for move action (-100 to 100)"
+			}
+		},
+		required: ["action"]
+	}
+}, n = "You are playing a drawing game. The user will describe what they want to draw, and you must interpret their instructions using ONLY primitive shapes.\n\nAVAILABLE COMMANDS:\n- start: Clear canvas and begin new game\n- circle: Draw a circle (x, y, size, color, pattern)\n- ellipse: Draw an ellipse (x, y, width, height, color, pattern)\n- rectangle: Draw a rectangle (x, y, width, height, color, pattern)\n- triangle: Draw a triangle (x, y, size, color, pattern)\n- line: Draw a line (x1, y1, x2, y2, color, strokeWidth)\n- fill: Change default fill color\n- pattern: Change default pattern (solid/hatched/dotted/striped)\n- move: Move last shape (dx, dy as relative movement)\n- undo: Remove last shape\n- guess: Guess what the drawing is\n\nPOSITION GUIDE (0-100):\n- x: 0=left edge, 50=center, 100=right edge\n- y: 0=top edge, 50=center, 100=bottom edge\n- size: 5=tiny, 15=small, 30=medium, 50=large\n\nPATTERNS:\n- solid: Normal fill\n- hatched: Diagonal lines (網掛け)\n- dotted: Dots pattern\n- striped: Horizontal stripes\n\nEXAMPLES:\n- \"大きな青い丸を中央に\" → circle x:50, y:50, size:30, color:blue\n- \"上に小さな赤い三角\" → triangle x:50, y:20, size:15, color:red\n- \"網掛けの四角\" → rectangle with pattern:hatched\n- \"ちょっと右に\" → move dx:10, dy:0\n- \"当てて!\" → guess\n\nRULES:\n1. Only use primitive shapes - no complex drawings!\n2. Interpret user's natural language into coordinates\n3. When user says \"当てて\" or \"guess\", call the guess action\n4. Be creative but stick to primitives!", r = [
+	{
+		name: "Start Game",
+		args: { action: "start" }
+	},
+	{
+		name: "Blue Circle",
+		args: {
+			action: "circle",
+			x: 50,
+			y: 50,
+			size: 25,
+			color: "blue"
+		}
+	},
+	{
+		name: "Red Triangle",
+		args: {
+			action: "triangle",
+			x: 50,
+			y: 25,
+			size: 15,
+			color: "red"
+		}
+	},
+	{
+		name: "Green Rectangle",
+		args: {
+			action: "rectangle",
+			x: 50,
+			y: 75,
+			width: 40,
+			height: 15,
+			color: "green"
+		}
+	},
+	{
+		name: "Yellow Ellipse",
+		args: {
+			action: "ellipse",
+			x: 30,
+			y: 50,
+			width: 20,
+			height: 30,
+			color: "gold"
+		}
+	},
+	{
+		name: "Black Line",
+		args: {
+			action: "line",
+			x1: 10,
+			y1: 90,
+			x2: 90,
+			y2: 90,
+			color: "black",
+			strokeWidth: 3
+		}
+	},
+	{
+		name: "Hatched Pattern",
+		args: {
+			action: "rectangle",
+			x: 70,
+			y: 30,
+			width: 20,
+			height: 20,
+			color: "purple",
+			pattern: "hatched"
+		}
+	},
+	{
+		name: "Move Right",
+		args: {
+			action: "move",
+			dx: 10,
+			dy: 0
+		}
+	},
+	{
+		name: "Undo",
+		args: { action: "undo" }
+	},
+	{
+		name: "Guess!",
+		args: { action: "guess" }
+	}
+], i = () => Math.random().toString(36).substring(2, 9), a = (e, t, n) => Math.max(t, Math.min(n, e)), o = (e) => {
+	let t = e.pattern === "solid" ? "" : ` ${e.pattern}`, n = (e, t) => `${t < 33 ? "top" : t > 66 ? "bottom" : "middle"}-${e < 33 ? "left" : e > 66 ? "right" : "center"}`;
+	switch (e.type) {
+		case "circle": return `${e.size < 15 ? "small" : e.size > 35 ? "large" : "medium"}${t} ${e.color} circle at ${n(e.x, e.y)}`;
+		case "ellipse": return `${t} ${e.color} ellipse at ${n(e.x, e.y)}`;
+		case "rectangle": {
+			let r = Math.abs(e.width - e.height) < 5 ? "square" : "rectangle";
+			return `${t} ${e.color} ${r} at ${n(e.x, e.y)}`;
+		}
+		case "triangle": return `${e.size < 15 ? "small" : e.size > 35 ? "large" : "medium"}${t} ${e.color} triangle at ${n(e.x, e.y)}`;
+		case "line": return `${e.color} line from (${e.x1},${e.y1}) to (${e.x2},${e.y2})`;
+	}
+}, s = async (e, n) => {
+	let { action: r } = n, s = e.currentResult?.data, c = s?.shapes ?? [], l = s?.defaultColor ?? "black", u = s?.defaultPattern ?? "solid", d = s?.gamePhase ?? "drawing", f = n.color ?? l, p = n.pattern ?? u, m, h;
+	switch (r) {
+		case "start":
+			c = [], l = "black", u = "solid", d = "drawing", m = "New drawing game started! Canvas is clear.", h = "The drawing canvas is now clear. Help the user draw by interpreting their descriptions into primitive shapes (circle, ellipse, rectangle, triangle, line). Ask them what they want to draw!";
+			break;
+		case "circle": {
+			let e = a(n.x ?? 50, 0, 100), t = a(n.y ?? 50, 0, 100), r = a(n.size ?? 20, 1, 100), o = {
+				id: i(),
+				type: "circle",
+				x: e,
+				y: t,
+				size: r,
+				color: f,
+				pattern: p
+			};
+			c = [...c, o], m = `Drew a ${f} circle at (${e}, ${t}) with size ${r}`, h = "Circle added. Ask the user what else they want to add or if they want you to guess.";
+			break;
+		}
+		case "ellipse": {
+			let e = a(n.x ?? 50, 0, 100), t = a(n.y ?? 50, 0, 100), r = a(n.width ?? 30, 1, 100), o = a(n.height ?? 20, 1, 100), s = {
+				id: i(),
+				type: "ellipse",
+				x: e,
+				y: t,
+				width: r,
+				height: o,
+				color: f,
+				pattern: p
+			};
+			c = [...c, s], m = `Drew a ${f} ellipse at (${e}, ${t})`, h = "Ellipse added. Ask the user what else they want to add.";
+			break;
+		}
+		case "rectangle": {
+			let e = a(n.x ?? 50, 0, 100), t = a(n.y ?? 50, 0, 100), r = a(n.width ?? 30, 1, 100), o = a(n.height ?? 20, 1, 100), s = {
+				id: i(),
+				type: "rectangle",
+				x: e,
+				y: t,
+				width: r,
+				height: o,
+				color: f,
+				pattern: p
+			};
+			c = [...c, s], m = `Drew a ${f} rectangle at (${e}, ${t})`, h = "Rectangle added. Ask the user what else they want to add.";
+			break;
+		}
+		case "triangle": {
+			let e = a(n.x ?? 50, 0, 100), t = a(n.y ?? 50, 0, 100), r = a(n.size ?? 20, 1, 100), o = {
+				id: i(),
+				type: "triangle",
+				x: e,
+				y: t,
+				size: r,
+				color: f,
+				pattern: p
+			};
+			c = [...c, o], m = `Drew a ${f} triangle at (${e}, ${t}) with size ${r}`, h = "Triangle added. Ask the user what else they want to add.";
+			break;
+		}
+		case "line": {
+			let e = a(n.x1 ?? 20, 0, 100), t = a(n.y1 ?? 50, 0, 100), r = a(n.x2 ?? 80, 0, 100), o = a(n.y2 ?? 50, 0, 100), s = a(n.strokeWidth ?? 2, 1, 10), l = {
+				id: i(),
+				type: "line",
+				x1: e,
+				y1: t,
+				x2: r,
+				y2: o,
+				strokeWidth: s,
+				color: f,
+				pattern: "solid"
+			};
+			c = [...c, l], m = `Drew a ${f} line from (${e}, ${t}) to (${r}, ${o})`, h = "Line added. Ask the user what else they want to add.";
+			break;
+		}
+		case "fill":
+			n.color ? (l = n.color, m = `Default fill color changed to ${n.color}`, h = "Default color updated. Future shapes will use this color unless specified otherwise.") : (m = "No color specified for fill action", h = "Ask the user what color they want to use.");
+			break;
+		case "pattern":
+			n.pattern ? (u = n.pattern, m = `Default pattern changed to ${n.pattern}`, h = "Default pattern updated. Future shapes will use this pattern unless specified otherwise.") : (m = "No pattern specified", h = "Ask the user what pattern they want (solid, hatched, dotted, striped).");
+			break;
+		case "move":
+			if (c.length === 0) m = "No shapes to move", h = "There are no shapes on the canvas yet. Help the user draw something first.";
+			else {
+				let e = n.dx ?? 0, t = n.dy ?? 0, r = c[c.length - 1], i;
+				i = r.type === "line" ? {
+					...r,
+					x1: a(r.x1 + e, 0, 100),
+					y1: a(r.y1 + t, 0, 100),
+					x2: a(r.x2 + e, 0, 100),
+					y2: a(r.y2 + t, 0, 100)
+				} : {
+					...r,
+					x: a(r.x + e, 0, 100),
+					y: a(r.y + t, 0, 100)
+				}, c = [...c.slice(0, -1), i], m = `Moved last shape by (${e}, ${t})`, h = "Shape moved. Ask the user if they want to continue adjusting.";
+			}
+			break;
+		case "undo":
+			c.length === 0 ? (m = "No shapes to undo", h = "The canvas is already empty.") : (c = c.slice(0, -1), m = `Removed last shape. ${c.length} shapes remaining.`, h = "Last shape removed. Ask the user what they want to do next.");
+			break;
+		case "guess": {
+			d = "guessing";
+			let e = c.map(o);
+			m = `Guessing phase! The drawing has ${c.length} shapes.`, h = `Look at the shape descriptions and make your best guess what the user drew. Be creative and fun with your guess! Shape descriptions: ${e.join("; ")}. After guessing, ask the user if you were correct.`;
+			break;
+		}
+		default: m = `Unknown action: ${r}`, h = "Ask the user what they want to do.";
+	}
+	let g = {
+		shapes: c,
+		defaultColor: l,
+		defaultPattern: u,
+		gamePhase: d
+	}, _ = {
+		shapeCount: c.length,
+		gamePhase: d,
+		lastAction: r,
+		...r === "guess" && { shapeDescriptions: c.map(o) }
+	};
+	return {
+		toolName: t.name,
+		message: m,
+		data: g,
+		jsonData: _,
+		instructions: h,
+		updating: r !== "start"
+	};
+}, c = {
+	toolDefinition: t,
+	execute: s,
+	generatingMessage: "Drawing...",
+	isEnabled: () => !0,
+	systemPrompt: n,
+	samples: r
+};
+//#endregion
+export { t as a, n as i, c as n, e as o, r, s as t };

package/dist/plugin-Csnn_dZJ.cjs

@@ -0,0 +1,38 @@
+var e=`drawingGame`,t={type:`function`,name:e,description:`A drawing game where you help the user draw pictures using only primitive shapes. The user describes what to draw, and you interpret their instructions into shape commands. At the end, you guess what they drew.`,parameters:{type:`object`,properties:{action:{type:`string`,enum:[`start`,`circle`,`ellipse`,`rectangle`,`triangle`,`line`,`fill`,`pattern`,`move`,`undo`,`guess`],description:`The action to perform. start: Clear canvas and start new game. circle/ellipse/rectangle/triangle/line: Draw shapes. fill: Change default fill color. pattern: Change default pattern (solid/hatched/dotted/striped). move: Move the last shape. undo: Remove last shape. guess: Make a guess what the drawing represents.`},x:{type:`number`,description:`X position (0-100, where 0=left, 50=center, 100=right)`},y:{type:`number`,description:`Y position (0-100, where 0=top, 50=center, 100=bottom)`},size:{type:`number`,description:`Size for circle/triangle (0-100, where 5=tiny, 15=small, 30=medium, 50=large)`},width:{type:`number`,description:`Width for ellipse/rectangle (0-100)`},height:{type:`number`,description:`Height for ellipse/rectangle (0-100)`},x1:{type:`number`,description:`Start X for line (0-100)`},y1:{type:`number`,description:`Start Y for line (0-100)`},x2:{type:`number`,description:`End X for line (0-100)`},y2:{type:`number`,description:`End Y for line (0-100)`},strokeWidth:{type:`number`,description:`Line width (1-10, default 2)`},color:{type:`string`,description:`CSS color name or hex (e.g., 'blue', 'red', '#FF5733')`},pattern:{type:`string`,enum:[`solid`,`hatched`,`dotted`,`striped`],description:`Fill pattern: solid (normal), hatched (diagonal lines), dotted, striped (horizontal)`},dx:{type:`number`,description:`Relative X movement for move action (-100 to 100)`},dy:{type:`number`,description:`Relative Y movement for move action (-100 to 100)`}},required:[`action`]}},n=`You are playing a drawing game. The user will describe what they want to draw, and you must interpret their instructions using ONLY primitive shapes.
+
+AVAILABLE COMMANDS:
+- start: Clear canvas and begin new game
+- circle: Draw a circle (x, y, size, color, pattern)
+- ellipse: Draw an ellipse (x, y, width, height, color, pattern)
+- rectangle: Draw a rectangle (x, y, width, height, color, pattern)
+- triangle: Draw a triangle (x, y, size, color, pattern)
+- line: Draw a line (x1, y1, x2, y2, color, strokeWidth)
+- fill: Change default fill color
+- pattern: Change default pattern (solid/hatched/dotted/striped)
+- move: Move last shape (dx, dy as relative movement)
+- undo: Remove last shape
+- guess: Guess what the drawing is
+
+POSITION GUIDE (0-100):
+- x: 0=left edge, 50=center, 100=right edge
+- y: 0=top edge, 50=center, 100=bottom edge
+- size: 5=tiny, 15=small, 30=medium, 50=large
+
+PATTERNS:
+- solid: Normal fill
+- hatched: Diagonal lines (網掛け)
+- dotted: Dots pattern
+- striped: Horizontal stripes
+
+EXAMPLES:
+- "大きな青い丸を中央に" → circle x:50, y:50, size:30, color:blue
+- "上に小さな赤い三角" → triangle x:50, y:20, size:15, color:red
+- "網掛けの四角" → rectangle with pattern:hatched
+- "ちょっと右に" → move dx:10, dy:0
+- "当てて!" → guess
+
+RULES:
+1. Only use primitive shapes - no complex drawings!
+2. Interpret user's natural language into coordinates
+3. When user says "当てて" or "guess", call the guess action
+4. Be creative but stick to primitives!`,r=[{name:`Start Game`,args:{action:`start`}},{name:`Blue Circle`,args:{action:`circle`,x:50,y:50,size:25,color:`blue`}},{name:`Red Triangle`,args:{action:`triangle`,x:50,y:25,size:15,color:`red`}},{name:`Green Rectangle`,args:{action:`rectangle`,x:50,y:75,width:40,height:15,color:`green`}},{name:`Yellow Ellipse`,args:{action:`ellipse`,x:30,y:50,width:20,height:30,color:`gold`}},{name:`Black Line`,args:{action:`line`,x1:10,y1:90,x2:90,y2:90,color:`black`,strokeWidth:3}},{name:`Hatched Pattern`,args:{action:`rectangle`,x:70,y:30,width:20,height:20,color:`purple`,pattern:`hatched`}},{name:`Move Right`,args:{action:`move`,dx:10,dy:0}},{name:`Undo`,args:{action:`undo`}},{name:`Guess!`,args:{action:`guess`}}],i=()=>Math.random().toString(36).substring(2,9),a=(e,t,n)=>Math.max(t,Math.min(n,e)),o=e=>{let t=e.pattern===`solid`?``:` ${e.pattern}`,n=(e,t)=>`${t<33?`top`:t>66?`bottom`:`middle`}-${e<33?`left`:e>66?`right`:`center`}`;switch(e.type){case`circle`:return`${e.size<15?`small`:e.size>35?`large`:`medium`}${t} ${e.color} circle at ${n(e.x,e.y)}`;case`ellipse`:return`${t} ${e.color} ellipse at ${n(e.x,e.y)}`;case`rectangle`:{let r=Math.abs(e.width-e.height)<5?`square`:`rectangle`;return`${t} ${e.color} ${r} at ${n(e.x,e.y)}`}case`triangle`:return`${e.size<15?`small`:e.size>35?`large`:`medium`}${t} ${e.color} triangle at ${n(e.x,e.y)}`;case`line`:return`${e.color} line from (${e.x1},${e.y1}) to (${e.x2},${e.y2})`}},s=async(e,n)=>{let{action:r}=n,s=e.currentResult?.data,c=s?.shapes??[],l=s?.defaultColor??`black`,u=s?.defaultPattern??`solid`,d=s?.gamePhase??`drawing`,f=n.color??l,p=n.pattern??u,m,h;switch(r){case`start`:c=[],l=`black`,u=`solid`,d=`drawing`,m=`New drawing game started! Canvas is clear.`,h=`The drawing canvas is now clear. Help the user draw by interpreting their descriptions into primitive shapes (circle, ellipse, rectangle, triangle, line). Ask them what they want to draw!`;break;case`circle`:{let e=a(n.x??50,0,100),t=a(n.y??50,0,100),r=a(n.size??20,1,100),o={id:i(),type:`circle`,x:e,y:t,size:r,color:f,pattern:p};c=[...c,o],m=`Drew a ${f} circle at (${e}, ${t}) with size ${r}`,h=`Circle added. Ask the user what else they want to add or if they want you to guess.`;break}case`ellipse`:{let e=a(n.x??50,0,100),t=a(n.y??50,0,100),r=a(n.width??30,1,100),o=a(n.height??20,1,100),s={id:i(),type:`ellipse`,x:e,y:t,width:r,height:o,color:f,pattern:p};c=[...c,s],m=`Drew a ${f} ellipse at (${e}, ${t})`,h=`Ellipse added. Ask the user what else they want to add.`;break}case`rectangle`:{let e=a(n.x??50,0,100),t=a(n.y??50,0,100),r=a(n.width??30,1,100),o=a(n.height??20,1,100),s={id:i(),type:`rectangle`,x:e,y:t,width:r,height:o,color:f,pattern:p};c=[...c,s],m=`Drew a ${f} rectangle at (${e}, ${t})`,h=`Rectangle added. Ask the user what else they want to add.`;break}case`triangle`:{let e=a(n.x??50,0,100),t=a(n.y??50,0,100),r=a(n.size??20,1,100),o={id:i(),type:`triangle`,x:e,y:t,size:r,color:f,pattern:p};c=[...c,o],m=`Drew a ${f} triangle at (${e}, ${t}) with size ${r}`,h=`Triangle added. Ask the user what else they want to add.`;break}case`line`:{let e=a(n.x1??20,0,100),t=a(n.y1??50,0,100),r=a(n.x2??80,0,100),o=a(n.y2??50,0,100),s=a(n.strokeWidth??2,1,10),l={id:i(),type:`line`,x1:e,y1:t,x2:r,y2:o,strokeWidth:s,color:f,pattern:`solid`};c=[...c,l],m=`Drew a ${f} line from (${e}, ${t}) to (${r}, ${o})`,h=`Line added. Ask the user what else they want to add.`;break}case`fill`:n.color?(l=n.color,m=`Default fill color changed to ${n.color}`,h=`Default color updated. Future shapes will use this color unless specified otherwise.`):(m=`No color specified for fill action`,h=`Ask the user what color they want to use.`);break;case`pattern`:n.pattern?(u=n.pattern,m=`Default pattern changed to ${n.pattern}`,h=`Default pattern updated. Future shapes will use this pattern unless specified otherwise.`):(m=`No pattern specified`,h=`Ask the user what pattern they want (solid, hatched, dotted, striped).`);break;case`move`:if(c.length===0)m=`No shapes to move`,h=`There are no shapes on the canvas yet. Help the user draw something first.`;else{let e=n.dx??0,t=n.dy??0,r=c[c.length-1],i;i=r.type===`line`?{...r,x1:a(r.x1+e,0,100),y1:a(r.y1+t,0,100),x2:a(r.x2+e,0,100),y2:a(r.y2+t,0,100)}:{...r,x:a(r.x+e,0,100),y:a(r.y+t,0,100)},c=[...c.slice(0,-1),i],m=`Moved last shape by (${e}, ${t})`,h=`Shape moved. Ask the user if they want to continue adjusting.`}break;case`undo`:c.length===0?(m=`No shapes to undo`,h=`The canvas is already empty.`):(c=c.slice(0,-1),m=`Removed last shape. ${c.length} shapes remaining.`,h=`Last shape removed. Ask the user what they want to do next.`);break;case`guess`:{d=`guessing`;let e=c.map(o);m=`Guessing phase! The drawing has ${c.length} shapes.`,h=`Look at the shape descriptions and make your best guess what the user drew. Be creative and fun with your guess! Shape descriptions: ${e.join(`; `)}. After guessing, ask the user if you were correct.`;break}default:m=`Unknown action: ${r}`,h=`Ask the user what they want to do.`}let g={shapes:c,defaultColor:l,defaultPattern:u,gamePhase:d},_={shapeCount:c.length,gamePhase:d,lastAction:r,...r===`guess`&&{shapeDescriptions:c.map(o)}};return{toolName:t.name,message:m,data:g,jsonData:_,instructions:h,updating:r!==`start`}},c={toolDefinition:t,execute:s,generatingMessage:`Drawing...`,isEnabled:()=>!0,systemPrompt:n,samples:r};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/style.css

@@ -0,0 +1,3 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@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-100:oklch(93.6% .032 17.717);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-blue-50:oklch(97% .014 254.604);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--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-blue-900:oklch(37.9% .146 265.522);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-700:oklch(49.6% .265 301.924);--color-pink-100:oklch(94.8% .028 342.258);--color-pink-500:oklch(65.6% .241 354.308);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--container-3xl:48rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--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-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-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{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.m-4{margin:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-block{display:inline-block}.aspect-square{aspect-ratio:1}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-full{width:100%;height:100%}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-\[600px\]{height:600px}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[300px\]{min-height:300px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-24{width:calc(var(--spacing) * 24)}.w-48{width:calc(var(--spacing) * 48)}.w-\[100px\]{width:100px}.w-\[137px\]{width:137px}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[85\%\]{max-width:85%}.max-w-\[200px\]{max-width:200px}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.animate-pulse{animation:var(--animate-pulse)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.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-\[\#3d3d5c\]{border-color:#3d3d5c}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-600{border-color:var(--color-gray-600)}.border-green-900{border-color:var(--color-green-900)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-300{border-color:var(--color-slate-300)}.border-transparent{border-color:#0000}.bg-\[\#1a1a2e\]{background-color:#1a1a2e}.bg-\[\#2d2d44\]{background-color:#2d2d44}.bg-\[\#3d3d5c\]{background-color:#3d3d5c}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-black{background-color:var(--color-black)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-900{background-color:var(--color-blue-900)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-green-400{background-color:var(--color-green-400)}.bg-green-600{background-color:var(--color-green-600)}.bg-green-700{background-color:var(--color-green-700)}.bg-green-800{background-color:var(--color-green-800)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-red-100{background-color:var(--color-red-100)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-purple-100{--tw-gradient-from:var(--color-purple-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-purple-500{--tw-gradient-from:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-pink-100{--tw-gradient-to:var(--color-pink-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-pink-500{--tw-gradient-to:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-\[10px\]{padding:10px}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--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))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--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)}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#f0f0f0\]{color:#f0f0f0}.text-amber-600{color:var(--color-amber-600)}.text-blue-400{color:var(--color-blue-400)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-green-600{color:var(--color-green-600)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-purple-700{color:var(--color-purple-700)}.text-red-700{color:var(--color-red-700)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-800{color:var(--color-slate-800)}.text-white{color:var(--color-white)}.opacity-10{opacity:.1}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px 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)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.hover\:border-blue-400:hover{border-color:var(--color-blue-400)}.hover\:bg-blue-200:hover{background-color:var(--color-blue-200)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-green-500:hover{background-color:var(--color-green-500)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-indigo-200:hover{background-color:var(--color-indigo-200)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-100:disabled{background-color:var(--color-gray-100)}.disabled\:bg-gray-400:disabled{background-color:var(--color-gray-400)}@media (width>=64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}body{margin:calc(var(--spacing) * 0);background-color:var(--color-gray-100);padding:calc(var(--spacing) * 5);font-family:var(--font-sans)}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
+/*$vite$:1*/

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

@@ -0,0 +1,7 @@
+import type { ToolResult } from "gui-chat-protocol";
+type __VLS_Props = {
+    result: ToolResult;
+};
+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,8 @@
+import type { ToolResult } from "gui-chat-protocol";
+type __VLS_Props = {
+    selectedResult: ToolResult;
+    sendTextMessage: (text?: string) => void;
+};
+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/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Drawing Game Plugin - Vue Implementation
+ */
+import "../style.css";
+import type { ToolPlugin } from "gui-chat-protocol/vue";
+import type { DrawingGameData, DrawingGameJsonData, DrawingGameArgs } from "../core/types";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+export declare const plugin: ToolPlugin<DrawingGameData, DrawingGameJsonData, DrawingGameArgs>;
+export type { PatternType, Shape, CircleShape, EllipseShape, RectangleShape, TriangleShape, LineShape, GamePhase, DrawingGameData, DrawingGameJsonData, ActionType, DrawingGameArgs, } from "../core/types";
+export { pluginCore, executeDrawingGame } from "../core/plugin";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "../core/definition";
+export { SAMPLES } from "../core/samples";
+export { View, Preview };
+declare const _default: {
+    plugin: ToolPlugin<DrawingGameData, DrawingGameJsonData, DrawingGameArgs, import("gui-chat-protocol/vue").InputHandler, Record<string, unknown>>;
+};
+export default _default;

package/dist/vue.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./plugin-Csnn_dZJ.cjs`);let t=require(`vue`);var n={class:`size-full overflow-hidden p-4 bg-slate-100 flex flex-col items-center`},r={key:0,class:`w-full max-w-2xl`},i={class:`flex items-center justify-between mb-4`},a={class:`flex items-center gap-4 text-sm text-slate-600`},o={class:`bg-white rounded-lg shadow-lg overflow-hidden border-2 border-slate-300`},s=[`viewBox`],c={class:`opacity-10`},l=[`x1`,`x2`],u=[`y1`,`y2`],d=[`cx`,`cy`,`r`,`fill`,`stroke`],f=[`cx`,`cy`,`rx`,`ry`,`fill`,`stroke`],p=[`x`,`y`,`width`,`height`,`fill`,`stroke`],m=[`points`,`fill`,`stroke`],h=[`x1`,`y1`,`x2`,`y2`,`stroke`,`stroke-width`],g={class:`mt-4 text-center text-sm text-slate-500`},_={key:0},v={key:1},y={key:2},b=500,x=(0,t.defineComponent)({__name:`View`,props:{selectedResult:{},sendTextMessage:{type:Function}},setup(e){let x=e,S=(0,t.ref)(null);(0,t.watch)(()=>x.selectedResult,e=>{e?.toolName===`drawingGame`&&e.data&&(S.value=e.data)},{immediate:!0,deep:!0});let C=e=>e/100*b,w=e=>e.type===`line`?`none`:e.pattern===`solid`?e.color:`url(#pattern-${e.pattern})`,T=e=>e.pattern===`solid`?``:`color: ${e.color}`,E=e=>{let t=C(e.x),n=C(e.y),r=C(e.size)/2,i=n-r,a=n+r*.5;return`${t},${i} ${t-r*.866},${a} ${t+r*.866},${a}`};return(e,x)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[S.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,r,[(0,t.createElementVNode)(`div`,i,[x[0]||=(0,t.createElementVNode)(`h2`,{class:`text-xl font-bold text-slate-800`},`Drawing Game`,-1),(0,t.createElementVNode)(`div`,a,[(0,t.createElementVNode)(`span`,null,`Shapes: `+(0,t.toDisplayString)(S.value.shapes.length),1),(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)(S.value.gamePhase===`guessing`?`text-amber-600 font-semibold`:``)},(0,t.toDisplayString)(S.value.gamePhase===`guessing`?`Guessing!`:`Drawing`),3)])]),(0,t.createElementVNode)(`div`,o,[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{viewBox:`0 0 ${b} ${b}`,class:`w-full aspect-square`,style:{background:`white`}},[x[1]||=(0,t.createStaticVNode)(`<defs><pattern id="pattern-hatched" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="8" stroke="currentColor" stroke-width="2"></line></pattern><pattern id="pattern-dotted" patternUnits="userSpaceOnUse" width="10" height="10"><circle cx="5" cy="5" r="2" fill="currentColor"></circle></pattern><pattern id="pattern-striped" patternUnits="userSpaceOnUse" width="10" height="10"><line x1="0" y1="5" x2="10" y2="5" stroke="currentColor" stroke-width="3"></line></pattern></defs>`,1),(0,t.createElementVNode)(`g`,c,[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(9,e=>(0,t.createElementVNode)(`line`,{key:`v-${e}`,x1:e*50,y1:`0`,x2:e*50,y2:b,stroke:`#999`,"stroke-width":`1`},null,8,l)),64)),((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(9,e=>(0,t.createElementVNode)(`line`,{key:`h-${e}`,x1:`0`,y1:e*50,x2:b,y2:e*50,stroke:`#999`,"stroke-width":`1`},null,8,u)),64))]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(S.value.shapes,e=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:e.id},[e.type===`circle`?((0,t.openBlock)(),(0,t.createElementBlock)(`circle`,{key:0,cx:C(e.x),cy:C(e.y),r:C(e.size)/2,fill:w(e),stroke:e.color,"stroke-width":`2`,style:(0,t.normalizeStyle)(T(e))},null,12,d)):e.type===`ellipse`?((0,t.openBlock)(),(0,t.createElementBlock)(`ellipse`,{key:1,cx:C(e.x),cy:C(e.y),rx:C(e.width)/2,ry:C(e.height)/2,fill:w(e),stroke:e.color,"stroke-width":`2`,style:(0,t.normalizeStyle)(T(e))},null,12,f)):e.type===`rectangle`?((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:2,x:C(e.x)-C(e.width)/2,y:C(e.y)-C(e.height)/2,width:C(e.width),height:C(e.height),fill:w(e),stroke:e.color,"stroke-width":`2`,style:(0,t.normalizeStyle)(T(e))},null,12,p)):e.type===`triangle`?((0,t.openBlock)(),(0,t.createElementBlock)(`polygon`,{key:3,points:E(e),fill:w(e),stroke:e.color,"stroke-width":`2`,style:(0,t.normalizeStyle)(T(e))},null,12,m)):e.type===`line`?((0,t.openBlock)(),(0,t.createElementBlock)(`line`,{key:4,x1:C(e.x1),y1:C(e.y1),x2:C(e.x2),y2:C(e.y2),stroke:e.color,"stroke-width":e.strokeWidth*2,"stroke-linecap":`round`},null,8,h)):(0,t.createCommentVNode)(``,!0)],64))),128))],8,s))]),(0,t.createElementVNode)(`div`,g,[S.value.shapes.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,_,` Say something like "draw a big blue circle in the center" `)):S.value.gamePhase===`drawing`?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,v,` Keep adding shapes or say "guess!" when done `)):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,y,` Waiting for the guess... `))])])):(0,t.createCommentVNode)(``,!0)]))}}),S={class:`p-3 bg-amber-50 rounded-md`},C={key:0,class:`flex flex-col gap-2`},w={class:`bg-white rounded border border-slate-200 overflow-hidden`},T={viewBox:`0 0 100 100`,class:`w-full aspect-square`},E=[`cx`,`cy`,`r`,`fill`,`stroke`],D=[`cx`,`cy`,`rx`,`ry`,`fill`],O=[`x`,`y`,`width`,`height`,`fill`],k=[`points`,`fill`],A=[`x1`,`y1`,`x2`,`y2`,`stroke`],j={class:`text-center`},M={class:`inline-block bg-amber-500 text-white text-xs font-bold py-1 px-3 rounded-full`},N=(0,t.defineComponent)({__name:`Preview`,props:{result:{}},setup(e){let n=e,r=(0,t.computed)(()=>n.result.data),i=e=>{let t=e.x,n=e.y,r=e.size/2,i=n-r,a=n+r*.5;return`${t},${i} ${t-r*.866},${a} ${t+r*.866},${a}`};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,S,[r.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,C,[n[0]||=(0,t.createElementVNode)(`div`,{class:`text-sm font-semibold text-slate-800 text-center`},` Drawing Game `,-1),(0,t.createElementVNode)(`div`,w,[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,T,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(r.value.shapes,e=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:e.id},[e.type===`circle`?((0,t.openBlock)(),(0,t.createElementBlock)(`circle`,{key:0,cx:e.x,cy:e.y,r:e.size/2,fill:e.color,stroke:e.color,"stroke-width":`0.5`},null,8,E)):e.type===`ellipse`?((0,t.openBlock)(),(0,t.createElementBlock)(`ellipse`,{key:1,cx:e.x,cy:e.y,rx:e.width/2,ry:e.height/2,fill:e.color},null,8,D)):e.type===`rectangle`?((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:2,x:e.x-e.width/2,y:e.y-e.height/2,width:e.width,height:e.height,fill:e.color},null,8,O)):e.type===`triangle`?((0,t.openBlock)(),(0,t.createElementBlock)(`polygon`,{key:3,points:i(e),fill:e.color},null,8,k)):e.type===`line`?((0,t.openBlock)(),(0,t.createElementBlock)(`line`,{key:4,x1:e.x1,y1:e.y1,x2:e.x2,y2:e.y2,stroke:e.color,"stroke-width":`1`},null,8,A)):(0,t.createCommentVNode)(``,!0)],64))),128))]))]),(0,t.createElementVNode)(`div`,j,[(0,t.createElementVNode)(`span`,M,(0,t.toDisplayString)(r.value.shapes.length)+` shapes `,1)])])):(0,t.createCommentVNode)(``,!0)]))}}),P={...e.n,viewComponent:x,previewComponent:N},F={plugin:P};exports.Preview=N,exports.SAMPLES=e.r,exports.SYSTEM_PROMPT=e.i,exports.TOOL_DEFINITION=e.a,exports.TOOL_NAME=e.o,exports.View=x,exports.default=F,exports.executeDrawingGame=e.t,exports.plugin=P,exports.pluginCore=e.n;

package/dist/vue.js

@@ -0,0 +1,215 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "./plugin-B4TbiRHo.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createStaticVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, watch as y } from "vue";
+//#region src/vue/View.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "size-full overflow-hidden p-4 bg-slate-100 flex flex-col items-center" }, x = {
+	key: 0,
+	class: "w-full max-w-2xl"
+}, S = { class: "flex items-center justify-between mb-4" }, C = { class: "flex items-center gap-4 text-sm text-slate-600" }, w = { class: "bg-white rounded-lg shadow-lg overflow-hidden border-2 border-slate-300" }, T = ["viewBox"], E = { class: "opacity-10" }, D = ["x1", "x2"], O = ["y1", "y2"], k = [
+	"cx",
+	"cy",
+	"r",
+	"fill",
+	"stroke"
+], A = [
+	"cx",
+	"cy",
+	"rx",
+	"ry",
+	"fill",
+	"stroke"
+], j = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"fill",
+	"stroke"
+], M = [
+	"points",
+	"fill",
+	"stroke"
+], N = [
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"stroke",
+	"stroke-width"
+], P = { class: "mt-4 text-center text-sm text-slate-500" }, F = { key: 0 }, I = { key: 1 }, L = { key: 2 }, R = 500, z = /* @__PURE__ */ f({
+	__name: "View",
+	props: {
+		selectedResult: {},
+		sendTextMessage: { type: Function }
+	},
+	setup(e) {
+		let t = e, n = g(null);
+		y(() => t.selectedResult, (e) => {
+			e?.toolName === "drawingGame" && e.data && (n.value = e.data);
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		let r = (e) => e / 100 * R, i = (e) => e.type === "line" ? "none" : e.pattern === "solid" ? e.color : `url(#pattern-${e.pattern})`, a = (e) => e.pattern === "solid" ? "" : `color: ${e.color}`, s = (e) => {
+			let t = r(e.x), n = r(e.y), i = r(e.size) / 2, a = n - i, o = n + i * .5;
+			return `${t},${a} ${t - i * .866},${o} ${t + i * .866},${o}`;
+		};
+		return (e, t) => (h(), l("div", b, [n.value ? (h(), l("div", x, [
+			u("div", S, [t[0] ||= u("h2", { class: "text-xl font-bold text-slate-800" }, "Drawing Game", -1), u("div", C, [u("span", null, "Shapes: " + v(n.value.shapes.length), 1), u("span", { class: p(n.value.gamePhase === "guessing" ? "text-amber-600 font-semibold" : "") }, v(n.value.gamePhase === "guessing" ? "Guessing!" : "Drawing"), 3)])]),
+			u("div", w, [(h(), l("svg", {
+				viewBox: `0 0 ${R} ${R}`,
+				class: "w-full aspect-square",
+				style: { background: "white" }
+			}, [
+				t[1] ||= d("<defs><pattern id=\"pattern-hatched\" patternUnits=\"userSpaceOnUse\" width=\"8\" height=\"8\" patternTransform=\"rotate(45)\"><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\"></line></pattern><pattern id=\"pattern-dotted\" patternUnits=\"userSpaceOnUse\" width=\"10\" height=\"10\"><circle cx=\"5\" cy=\"5\" r=\"2\" fill=\"currentColor\"></circle></pattern><pattern id=\"pattern-striped\" patternUnits=\"userSpaceOnUse\" width=\"10\" height=\"10\"><line x1=\"0\" y1=\"5\" x2=\"10\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"3\"></line></pattern></defs>", 1),
+				u("g", E, [(h(), l(o, null, _(9, (e) => u("line", {
+					key: `v-${e}`,
+					x1: e * 50,
+					y1: "0",
+					x2: e * 50,
+					y2: R,
+					stroke: "#999",
+					"stroke-width": "1"
+				}, null, 8, D)), 64)), (h(), l(o, null, _(9, (e) => u("line", {
+					key: `h-${e}`,
+					x1: "0",
+					y1: e * 50,
+					x2: R,
+					y2: e * 50,
+					stroke: "#999",
+					"stroke-width": "1"
+				}, null, 8, O)), 64))]),
+				(h(!0), l(o, null, _(n.value.shapes, (e) => (h(), l(o, { key: e.id }, [e.type === "circle" ? (h(), l("circle", {
+					key: 0,
+					cx: r(e.x),
+					cy: r(e.y),
+					r: r(e.size) / 2,
+					fill: i(e),
+					stroke: e.color,
+					"stroke-width": "2",
+					style: m(a(e))
+				}, null, 12, k)) : e.type === "ellipse" ? (h(), l("ellipse", {
+					key: 1,
+					cx: r(e.x),
+					cy: r(e.y),
+					rx: r(e.width) / 2,
+					ry: r(e.height) / 2,
+					fill: i(e),
+					stroke: e.color,
+					"stroke-width": "2",
+					style: m(a(e))
+				}, null, 12, A)) : e.type === "rectangle" ? (h(), l("rect", {
+					key: 2,
+					x: r(e.x) - r(e.width) / 2,
+					y: r(e.y) - r(e.height) / 2,
+					width: r(e.width),
+					height: r(e.height),
+					fill: i(e),
+					stroke: e.color,
+					"stroke-width": "2",
+					style: m(a(e))
+				}, null, 12, j)) : e.type === "triangle" ? (h(), l("polygon", {
+					key: 3,
+					points: s(e),
+					fill: i(e),
+					stroke: e.color,
+					"stroke-width": "2",
+					style: m(a(e))
+				}, null, 12, M)) : e.type === "line" ? (h(), l("line", {
+					key: 4,
+					x1: r(e.x1),
+					y1: r(e.y1),
+					x2: r(e.x2),
+					y2: r(e.y2),
+					stroke: e.color,
+					"stroke-width": e.strokeWidth * 2,
+					"stroke-linecap": "round"
+				}, null, 8, N)) : c("", !0)], 64))), 128))
+			], 8, T))]),
+			u("div", P, [n.value.shapes.length === 0 ? (h(), l("span", F, " Say something like \"draw a big blue circle in the center\" ")) : n.value.gamePhase === "drawing" ? (h(), l("span", I, " Keep adding shapes or say \"guess!\" when done ")) : (h(), l("span", L, " Waiting for the guess... "))])
+		])) : c("", !0)]));
+	}
+}), B = { class: "p-3 bg-amber-50 rounded-md" }, V = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, H = { class: "bg-white rounded border border-slate-200 overflow-hidden" }, U = {
+	viewBox: "0 0 100 100",
+	class: "w-full aspect-square"
+}, W = [
+	"cx",
+	"cy",
+	"r",
+	"fill",
+	"stroke"
+], G = [
+	"cx",
+	"cy",
+	"rx",
+	"ry",
+	"fill"
+], K = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"fill"
+], q = ["points", "fill"], J = [
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"stroke"
+], Y = { class: "text-center" }, X = { class: "inline-block bg-amber-500 text-white text-xs font-bold py-1 px-3 rounded-full" }, Z = /* @__PURE__ */ f({
+	__name: "Preview",
+	props: { result: {} },
+	setup(e) {
+		let t = e, n = s(() => t.result.data), r = (e) => {
+			let t = e.x, n = e.y, r = e.size / 2, i = n - r, a = n + r * .5;
+			return `${t},${i} ${t - r * .866},${a} ${t + r * .866},${a}`;
+		};
+		return (e, t) => (h(), l("div", B, [n.value ? (h(), l("div", V, [
+			t[0] ||= u("div", { class: "text-sm font-semibold text-slate-800 text-center" }, " Drawing Game ", -1),
+			u("div", H, [(h(), l("svg", U, [(h(!0), l(o, null, _(n.value.shapes, (e) => (h(), l(o, { key: e.id }, [e.type === "circle" ? (h(), l("circle", {
+				key: 0,
+				cx: e.x,
+				cy: e.y,
+				r: e.size / 2,
+				fill: e.color,
+				stroke: e.color,
+				"stroke-width": "0.5"
+			}, null, 8, W)) : e.type === "ellipse" ? (h(), l("ellipse", {
+				key: 1,
+				cx: e.x,
+				cy: e.y,
+				rx: e.width / 2,
+				ry: e.height / 2,
+				fill: e.color
+			}, null, 8, G)) : e.type === "rectangle" ? (h(), l("rect", {
+				key: 2,
+				x: e.x - e.width / 2,
+				y: e.y - e.height / 2,
+				width: e.width,
+				height: e.height,
+				fill: e.color
+			}, null, 8, K)) : e.type === "triangle" ? (h(), l("polygon", {
+				key: 3,
+				points: r(e),
+				fill: e.color
+			}, null, 8, q)) : e.type === "line" ? (h(), l("line", {
+				key: 4,
+				x1: e.x1,
+				y1: e.y1,
+				x2: e.x2,
+				y2: e.y2,
+				stroke: e.color,
+				"stroke-width": "1"
+			}, null, 8, J)) : c("", !0)], 64))), 128))]))]),
+			u("div", Y, [u("span", X, v(n.value.shapes.length) + " shapes ", 1)])
+		])) : c("", !0)]));
+	}
+}), Q = {
+	...n,
+	viewComponent: z,
+	previewComponent: Z
+}, $ = { plugin: Q };
+//#endregion
+export { Z as Preview, i as SAMPLES, t as SYSTEM_PROMPT, e as TOOL_DEFINITION, r as TOOL_NAME, z as View, $ as default, a as executeDrawingGame, Q as plugin, n as pluginCore };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@gui-chat-plugin/drawing-game",
+  "version": "0.1.1",
+  "description": "Drawing game plugin - draw with primitives and let AI guess",
+  "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": {
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "eslint": "^10.1.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.4.0",
+    "openai": "^6.16.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.3",
+    "vue": "^3.5.31",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.2.6"
+  },
+  "keywords": [
+    "guichat",
+    "plugin",
+    "drawing",
+    "game",
+    "svg",
+    "primitives"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "gui-chat-protocol": "^0.0.4"
+  }
+}