@mulmochat-plugin/generate-image 0.1.3 → 0.2.0

package/dist/core/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * MulmoChat GenerateImage Plugin - Core (Framework-agnostic)
+ *
+ * This module exports the core plugin logic without UI components.
+ * Import from "@mulmochat-plugin/generate-image" or "@mulmochat-plugin/generate-image/core"
+ */
+export type { BackendType, ToolContextApp, ToolContext, ToolResult, ToolResultComplete, JsonSchemaProperty, ToolDefinition, StartApiResponse, ToolSample, InputHandler, FileInputHandler, ClipboardImageInputHandler, UrlInputHandler, TextInputHandler, FileUploadConfig, ConfigValue, ConfigFieldSchema, PluginConfigSchema, ViewComponentProps, PreviewComponentProps, ToolPluginCore, ImageToolData, GenerateImageArgs, ImageGenerationConfigValue, } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SAMPLES, createUploadedImageResult, executeGenerateImage, pluginCore, } from "./plugin";

package/dist/core/plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * MulmoChat GenerateImage Plugin Core (Framework-agnostic)
+ *
+ * Contains the plugin logic without UI components.
+ * Can be used by any framework (Vue, React, etc.)
+ */
+import type { ToolPluginCore, ToolContext, ToolResult, ToolDefinition, ToolSample, ImageToolData, GenerateImageArgs } from "./types";
+export declare const TOOL_NAME = "generateImage";
+export declare const TOOL_DEFINITION: ToolDefinition;
+export declare const SAMPLES: ToolSample[];
+/**
+ * Create a ToolResult for an uploaded image file
+ */
+export declare function createUploadedImageResult(imageData: string, fileName: string, prompt: string): ToolResult<ImageToolData, never>;
+export declare const executeGenerateImage: (context: ToolContext, args: GenerateImageArgs) => Promise<ToolResult<ImageToolData, never>>;
+export declare const pluginCore: ToolPluginCore<ImageToolData, never, GenerateImageArgs>;

package/dist/core/types.d.ts

@@ -0,0 +1,241 @@
+/**
+ * MulmoChat Plugin Core Types (Framework-agnostic)
+ *
+ * These types can be used by any framework implementation (Vue, React, etc.)
+ */
+/**
+ * Backend types that plugins can declare they use.
+ * App layer manages actual provider/model settings for each type.
+ */
+export type BackendType = "textLLM" | "imageGen" | "audio" | "search" | "browse" | "map" | "mulmocast";
+/**
+ * App interface provided to plugins via context.app
+ * Contains backend functions and config accessors
+ */
+export interface ToolContextApp extends Record<string, (...args: any[]) => any> {
+    getConfig: <T = unknown>(key: string) => T | undefined;
+    setConfig: (key: string, value: unknown) => void;
+}
+/**
+ * Context passed to plugin execute function
+ */
+export interface ToolContext {
+    currentResult?: ToolResult<unknown> | null;
+    app?: ToolContextApp;
+}
+/**
+ * Result returned from plugin execution
+ */
+export interface ToolResult<T = unknown, J = unknown> {
+    toolName?: string;
+    uuid?: string;
+    message: string;
+    title?: string;
+    jsonData?: J;
+    instructions?: string;
+    instructionsRequired?: boolean;
+    updating?: boolean;
+    cancelled?: boolean;
+    data?: T;
+    viewState?: Record<string, unknown>;
+}
+/**
+ * Complete tool result with required fields
+ */
+export interface ToolResultComplete<T = unknown, J = unknown> extends ToolResult<T, J> {
+    toolName: string;
+    uuid: string;
+}
+/**
+ * JSON Schema property definition for tool parameters
+ */
+export interface JsonSchemaProperty {
+    type?: string;
+    description?: string;
+    enum?: string[];
+    items?: JsonSchemaProperty;
+    minimum?: number;
+    maximum?: number;
+    minItems?: number;
+    maxItems?: number;
+    properties?: Record<string, JsonSchemaProperty>;
+    required?: string[];
+    additionalProperties?: boolean;
+    oneOf?: JsonSchemaProperty[];
+    [key: string]: unknown;
+}
+/**
+ * Tool definition for OpenAI-compatible function calling
+ */
+export interface ToolDefinition {
+    type: "function";
+    name: string;
+    description: string;
+    parameters?: {
+        type: "object";
+        properties: Record<string, JsonSchemaProperty>;
+        required: string[];
+        additionalProperties?: boolean;
+    };
+}
+/**
+ * API response from server start endpoint
+ */
+export interface StartApiResponse {
+    hasOpenAIApiKey?: boolean;
+    hasAnthropicApiKey?: boolean;
+    hasGoogleApiKey?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Sample arguments for testing
+ */
+export interface ToolSample {
+    name: string;
+    args: Record<string, unknown>;
+}
+/**
+ * File input handler
+ */
+export interface FileInputHandler {
+    type: "file";
+    acceptedTypes: string[];
+    handleInput: (fileData: string, fileName: string) => ToolResult<unknown, unknown>;
+}
+/**
+ * Clipboard image input handler
+ */
+export interface ClipboardImageInputHandler {
+    type: "clipboard-image";
+    handleInput: (imageData: string) => ToolResult<unknown, unknown>;
+}
+/**
+ * URL input handler
+ */
+export interface UrlInputHandler {
+    type: "url";
+    patterns?: string[];
+    handleInput: (url: string) => ToolResult<unknown, unknown>;
+}
+/**
+ * Text input handler
+ */
+export interface TextInputHandler {
+    type: "text";
+    patterns?: string[];
+    handleInput: (text: string) => ToolResult<unknown, unknown>;
+}
+/**
+ * Union of all input handler types
+ */
+export type InputHandler = FileInputHandler | ClipboardImageInputHandler | UrlInputHandler | TextInputHandler;
+/**
+ * Legacy file upload config (for backward compatibility)
+ * @deprecated Use InputHandler instead
+ */
+export interface FileUploadConfig {
+    acceptedTypes: string[];
+    handleUpload: (fileData: string, fileName: string, ...args: unknown[]) => ToolResult<unknown, unknown>;
+}
+export type ConfigValue = string | number | boolean | string[];
+interface BaseFieldSchema {
+    label: string;
+    description?: string;
+    required?: boolean;
+}
+export interface StringFieldSchema extends BaseFieldSchema {
+    type: "string";
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+}
+export interface NumberFieldSchema extends BaseFieldSchema {
+    type: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export interface BooleanFieldSchema extends BaseFieldSchema {
+    type: "boolean";
+}
+export interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SelectFieldSchema extends BaseFieldSchema {
+    type: "select";
+    options: SelectOption[];
+}
+export interface MultiSelectFieldSchema extends BaseFieldSchema {
+    type: "multiselect";
+    options: SelectOption[];
+    minItems?: number;
+    maxItems?: number;
+}
+export type ConfigFieldSchema = StringFieldSchema | NumberFieldSchema | BooleanFieldSchema | SelectFieldSchema | MultiSelectFieldSchema;
+/**
+ * Plugin configuration schema (JSON Schema based)
+ */
+export interface PluginConfigSchema {
+    key: string;
+    defaultValue: ConfigValue;
+    schema: ConfigFieldSchema;
+}
+/**
+ * Standard props for View components
+ */
+export interface ViewComponentProps<T = unknown, J = unknown> {
+    selectedResult: ToolResultComplete<T, J>;
+    sendTextMessage: (text?: string) => void;
+    onUpdateResult?: (result: Partial<ToolResult<T, J>>) => void;
+    pluginConfigs?: Record<string, unknown>;
+}
+/**
+ * Standard props for Preview components
+ */
+export interface PreviewComponentProps<T = unknown, J = unknown> {
+    result: ToolResultComplete<T, J>;
+    isSelected?: boolean;
+    onSelect?: () => void;
+}
+/**
+ * Core plugin interface - framework agnostic
+ * Does not include UI components
+ */
+export interface ToolPluginCore<T = unknown, J = unknown, A extends object = object> {
+    toolDefinition: ToolDefinition;
+    execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
+    generatingMessage: string;
+    waitingMessage?: string;
+    uploadMessage?: string;
+    isEnabled: (startResponse?: StartApiResponse | null) => boolean;
+    delayAfterExecution?: number;
+    systemPrompt?: string;
+    inputHandlers?: InputHandler[];
+    /** @deprecated Use inputHandlers instead */
+    fileUpload?: FileUploadConfig;
+    /** New JSON Schema based config (framework-agnostic) */
+    configSchema?: PluginConfigSchema;
+    samples?: ToolSample[];
+    backends?: BackendType[];
+}
+/** Image tool data stored in result.data */
+export interface ImageToolData {
+    imageData: string;
+    prompt?: string;
+}
+/** Arguments passed to the generateImage tool */
+export interface GenerateImageArgs {
+    prompt: string;
+}
+/** Configuration value for image generation backend */
+export interface ImageGenerationConfigValue {
+    backend: "gemini" | "openai" | "comfyui";
+    styleModifier?: string;
+    geminiModel?: "gemini-2.5-flash-image" | "gemini-3-pro-image-preview";
+    openaiModel?: "gpt-image-1" | "gpt-image-1.5" | "gpt-image-1-mini";
+}
+export {};

package/dist/core.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="generateImage",i={type:"function",name:t,description:"Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",parameters:{type:"object",properties:{prompt:{type:"string",description:"A detailed prompt describing the image to generate"}},required:["prompt"]}},o=[{name:"Sunset Beach",args:{imageData:"https://picsum.photos/id/28/800/600",prompt:"A beautiful sunset over a calm ocean beach with palm trees"}},{name:"Mountain Lake",args:{imageData:"https://picsum.photos/id/29/800/600",prompt:"A serene mountain lake surrounded by pine trees and snow-capped peaks"}},{name:"City Skyline",args:{imageData:"https://picsum.photos/id/43/800/600",prompt:"A modern city skyline at night with glowing skyscrapers"}},{name:"Forest Path",args:{imageData:"https://picsum.photos/id/15/800/600",prompt:"A winding path through an enchanted forest with sunlight filtering through the leaves"}}];function s(e,a,n){return{toolName:t,data:{imageData:e,prompt:n},message:"",title:a}}const r=async(e,a)=>{const{prompt:n}=a;return e.app?.generateImage?e.app.generateImage(n):{message:"generateImage function not available"}},p={toolDefinition:i,execute:r,generatingMessage:"Generating image...",isEnabled:()=>!0,fileUpload:{acceptedTypes:["image/png","image/jpeg"],handleUpload:s},systemPrompt:`When you are talking about places, objects, people, movies, books and other things, you MUST use the ${t} API to draw pictures to make the conversation more engaging.`,backends:["imageGen"],samples:o};exports.SAMPLES=o;exports.TOOL_DEFINITION=i;exports.TOOL_NAME=t;exports.createUploadedImageResult=s;exports.executeGenerateImage=r;exports.pluginCore=p;

package/dist/core.js

@@ -0,0 +1,77 @@
+const n = "generateImage", s = {
+  type: "function",
+  name: n,
+  description: "Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",
+  parameters: {
+    type: "object",
+    properties: {
+      prompt: {
+        type: "string",
+        description: "A detailed prompt describing the image to generate"
+      }
+    },
+    required: ["prompt"]
+  }
+}, i = [
+  {
+    name: "Sunset Beach",
+    args: {
+      imageData: "https://picsum.photos/id/28/800/600",
+      prompt: "A beautiful sunset over a calm ocean beach with palm trees"
+    }
+  },
+  {
+    name: "Mountain Lake",
+    args: {
+      imageData: "https://picsum.photos/id/29/800/600",
+      prompt: "A serene mountain lake surrounded by pine trees and snow-capped peaks"
+    }
+  },
+  {
+    name: "City Skyline",
+    args: {
+      imageData: "https://picsum.photos/id/43/800/600",
+      prompt: "A modern city skyline at night with glowing skyscrapers"
+    }
+  },
+  {
+    name: "Forest Path",
+    args: {
+      imageData: "https://picsum.photos/id/15/800/600",
+      prompt: "A winding path through an enchanted forest with sunlight filtering through the leaves"
+    }
+  }
+];
+function o(e, t, a) {
+  return {
+    toolName: n,
+    data: { imageData: e, prompt: a },
+    message: "",
+    title: t
+  };
+}
+const p = async (e, t) => {
+  const { prompt: a } = t;
+  return e.app?.generateImage ? e.app.generateImage(a) : { message: "generateImage function not available" };
+}, r = {
+  toolDefinition: s,
+  execute: p,
+  generatingMessage: "Generating image...",
+  isEnabled: () => !0,
+  fileUpload: {
+    acceptedTypes: ["image/png", "image/jpeg"],
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleUpload: o
+  },
+  systemPrompt: `When you are talking about places, objects, people, movies, books and other things, you MUST use the ${n} API to draw pictures to make the conversation more engaging.`,
+  backends: ["imageGen"],
+  samples: i
+};
+export {
+  i as SAMPLES,
+  s as TOOL_DEFINITION,
+  n as TOOL_NAME,
+  o as createUploadedImageResult,
+  p as executeGenerateImage,
+  r as pluginCore
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@mulmochat-plugin/ui-image"),o="generateImage",i={type:"function",name:o,description:"Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",parameters:{type:"object",properties:{prompt:{type:"string",description:"A detailed prompt describing the image to generate"}},required:["prompt"]}},p=[{name:"Sunset Beach",args:{imageData:"https://picsum.photos/id/28/800/600",prompt:"A beautiful sunset over a calm ocean beach with palm trees"}},{name:"Mountain Lake",args:{imageData:"https://picsum.photos/id/29/800/600",prompt:"A serene mountain lake surrounded by pine trees and snow-capped peaks"}},{name:"City Skyline",args:{imageData:"https://picsum.photos/id/43/800/600",prompt:"A modern city skyline at night with glowing skyscrapers"}},{name:"Forest Path",args:{imageData:"https://picsum.photos/id/15/800/600",prompt:"A winding path through an enchanted forest with sunlight filtering through the leaves"}}],c=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(t){const n=t,a=e.ref(null);return e.watch(()=>n.selectedResult,s=>{s?.toolName===o&&s.data&&(a.value=s)},{immediate:!0,deep:!0}),(s,h)=>a.value?(e.openBlock(),e.createBlock(e.unref(r.ImageView),{key:0,selectedResult:a.value},null,8,["selectedResult"])):e.createCommentVNode("",!0)}}),m=e.defineComponent({__name:"Preview",props:{result:{}},setup(t){return(n,a)=>(e.openBlock(),e.createBlock(e.unref(r.ImagePreview),{result:t.result},null,8,["result"]))}}),u=async(t,n)=>{const{prompt:a}=n;return t.app?.generateImage?t.app.generateImage(a):{message:"generateImage function not available"}};function l(t,n,a){return{toolName:o,data:{imageData:t,prompt:a},message:"",title:n}}const g={toolDefinition:i,execute:u,generatingMessage:"Generating image...",isEnabled:()=>!0,viewComponent:c,previewComponent:m,fileUpload:{acceptedTypes:["image/png","image/jpeg"],handleUpload:l},systemPrompt:`When you are talking about places, objects, people, movies, books and other things, you MUST use the ${o} API to draw pictures to make the conversation more engaging.`,backends:["imageGen"],samples:p},d={plugin:g};exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./core.cjs");exports.SAMPLES=e.SAMPLES;exports.TOOL_DEFINITION=e.TOOL_DEFINITION;exports.TOOL_NAME=e.TOOL_NAME;exports.createUploadedImageResult=e.createUploadedImageResult;exports.default=e.pluginCore;exports.executeGenerateImage=e.executeGenerateImage;exports.pluginCore=e.pluginCore;

package/dist/index.d.ts

@@ -1,12 +1,19 @@
 /**
- * MulmoChat Plugin
+ * MulmoChat GenerateImage Plugin
  *
- * See package.json for plugin details.
+ * Default export is the framework-agnostic core.
+ * For Vue implementation, import from "@mulmochat-plugin/generate-image/vue"
+ *
+ * @example Default (Core - framework-agnostic)
+ * ```typescript
+ * import { pluginCore, TOOL_NAME, ImageToolData } from "@mulmochat-plugin/generate-image";
+ * ```
+ *
+ * @example Vue implementation
+ * ```typescript
+ * import GenerateImagePlugin from "@mulmochat-plugin/generate-image/vue";
+ * import "@mulmochat-plugin/generate-image/style.css";
+ * ```
  */
-import "./style.css";
-import type { ToolPlugin } from "./common";
-declare const _default: {
-    plugin: ToolPlugin;
-};
-export default _default;
-export type { ImageGenerationConfigValue } from "./plugin/types";
+export * from "./core";
+export { pluginCore as default } from "./core";

package/dist/index.js

@@ -1,104 +1,10 @@
-import { defineComponent as o, ref as m, watch as c, createBlock as r, createCommentVNode as u, openBlock as i, unref as p } from "vue";
-import { ImageView as g, ImagePreview as l } from "@mulmochat-plugin/ui-image";
-const s = "generateImage", d = {
-  type: "function",
-  name: s,
-  description: "Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",
-  parameters: {
-    type: "object",
-    properties: {
-      prompt: {
-        type: "string",
-        description: "A detailed prompt describing the image to generate"
-      }
-    },
-    required: ["prompt"]
-  }
-}, h = [
-  {
-    name: "Sunset Beach",
-    args: {
-      imageData: "https://picsum.photos/id/28/800/600",
-      prompt: "A beautiful sunset over a calm ocean beach with palm trees"
-    }
-  },
-  {
-    name: "Mountain Lake",
-    args: {
-      imageData: "https://picsum.photos/id/29/800/600",
-      prompt: "A serene mountain lake surrounded by pine trees and snow-capped peaks"
-    }
-  },
-  {
-    name: "City Skyline",
-    args: {
-      imageData: "https://picsum.photos/id/43/800/600",
-      prompt: "A modern city skyline at night with glowing skyscrapers"
-    }
-  },
-  {
-    name: "Forest Path",
-    args: {
-      imageData: "https://picsum.photos/id/15/800/600",
-      prompt: "A winding path through an enchanted forest with sunlight filtering through the leaves"
-    }
-  }
-], f = /* @__PURE__ */ o({
-  __name: "View",
-  props: {
-    selectedResult: {},
-    sendTextMessage: { type: Function }
-  },
-  emits: ["updateResult"],
-  setup(e) {
-    const a = e, t = m(null);
-    return c(
-      () => a.selectedResult,
-      (n) => {
-        n?.toolName === s && n.data && (t.value = n);
-      },
-      { immediate: !0, deep: !0 }
-    ), (n, b) => t.value ? (i(), r(p(g), {
-      key: 0,
-      selectedResult: t.value
-    }, null, 8, ["selectedResult"])) : u("", !0);
-  }
-}), y = /* @__PURE__ */ o({
-  __name: "Preview",
-  props: {
-    result: {}
-  },
-  setup(e) {
-    return (a, t) => (i(), r(p(l), { result: e.result }, null, 8, ["result"]));
-  }
-}), _ = async (e, a) => {
-  const { prompt: t } = a;
-  return e.app?.generateImage ? e.app.generateImage(t) : { message: "generateImage function not available" };
-};
-function k(e, a, t) {
-  return {
-    toolName: s,
-    data: { imageData: e, prompt: t },
-    message: "",
-    title: a
-  };
-}
-const v = {
-  toolDefinition: d,
-  execute: _,
-  generatingMessage: "Generating image...",
-  isEnabled: () => !0,
-  viewComponent: f,
-  previewComponent: y,
-  fileUpload: {
-    acceptedTypes: ["image/png", "image/jpeg"],
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    handleUpload: k
-  },
-  systemPrompt: `When you are talking about places, objects, people, movies, books and other things, you MUST use the ${s} API to draw pictures to make the conversation more engaging.`,
-  backends: ["imageGen"],
-  samples: h
-}, A = { plugin: v };
+import { SAMPLES as r, TOOL_DEFINITION as t, TOOL_NAME as l, createUploadedImageResult as o, pluginCore as u, executeGenerateImage as I, pluginCore as O } from "./core.js";
 export {
-  A as default
+  r as SAMPLES,
+  t as TOOL_DEFINITION,
+  l as TOOL_NAME,
+  o as createUploadedImageResult,
+  u as default,
+  I as executeGenerateImage,
+  O as pluginCore
 };

package/dist/style.css

@@ -1 +1 @@
-@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --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-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --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-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --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-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --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-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --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-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --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-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --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: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:--theme(--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:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--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:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}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{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}: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: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,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-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]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}body{@apply m-0 p-5 font-sans bg-gray-100;}
+@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-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-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--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-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-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-white:#fff;--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-medium:500;--radius-md:.375rem;--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{.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.block{display:block}.contents{display:contents}.flex{display:flex}.h-\[400px\]{height:400px}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[200px\]{max-width:200px}.cursor-pointer{cursor:pointer}.flex-wrap{flex-wrap:wrap}.gap-2{gap:calc(var(--spacing)*2)}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-indigo-200{border-color:var(--color-indigo-200)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.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-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.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-indigo-700{color:var(--color-indigo-700)}.text-white{color:var(--color-white)}.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)}.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))}@media(hover:hover){.hover\:border-indigo-300:hover{border-color:var(--color-indigo-300)}.hover\:bg-indigo-200:hover{background-color:var(--color-indigo-200)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:ring-\[3px\]:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-indigo-500\/10:focus{--tw-ring-color:#625fff1a}@supports (color:color-mix(in lab,red,red)){.focus\:ring-indigo-500\/10:focus{--tw-ring-color:color-mix(in oklab,var(--color-indigo-500)10%,transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}body{margin:calc(var(--spacing)*0);background-color:var(--color-gray-100);padding:calc(var(--spacing)*5);font-family:var(--font-sans)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/{plugin → vue}/Preview.vue.d.ts

@@ -1,5 +1,4 @@
-import type { ToolResult } from "../common";
-import type { ImageToolData } from "./types";
+import type { ToolResult, ImageToolData } from "./types";
 type __VLS_Props = {
     result: ToolResult<ImageToolData>;
 };

package/dist/{plugin → vue}/View.vue.d.ts

@@ -1,5 +1,4 @@
-import type { ToolResult } from "../common";
-import type { ImageToolData } from "./types";
+import type { ToolResult, ImageToolData } from "./types";
 type __VLS_Props = {
     selectedResult: ToolResult<ImageToolData>;
     sendTextMessage: (text?: string) => void;

package/dist/vue/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * MulmoChat GenerateImage Plugin - Vue Implementation
+ *
+ * Full Vue plugin with UI components.
+ * Import from "@mulmochat-plugin/generate-image/vue"
+ */
+import "../style.css";
+import type { ToolPlugin, ImageToolData, GenerateImageArgs } from "./types";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+/**
+ * GenerateImage plugin instance with Vue components
+ */
+export declare const plugin: ToolPlugin<ImageToolData, never, GenerateImageArgs>;
+export type { ToolPlugin, ToolPluginConfig } from "./types";
+export type { BackendType, ToolContextApp, ToolContext, ToolResult, ToolResultComplete, JsonSchemaProperty, ToolDefinition, StartApiResponse, ToolSample, InputHandler, FileUploadConfig, ConfigValue, ConfigFieldSchema, PluginConfigSchema, ViewComponentProps, PreviewComponentProps, ToolPluginCore, ImageToolData, GenerateImageArgs, ImageGenerationConfigValue, } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SAMPLES, createUploadedImageResult, executeGenerateImage, pluginCore, } from "../core/plugin";
+export { View, Preview };
+declare const _default: {
+    plugin: ToolPlugin<ImageToolData, never, GenerateImageArgs>;
+};
+export default _default;

package/dist/vue/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * MulmoChat Plugin Vue Types
+ *
+ * Vue-specific types that extend the core plugin interface.
+ */
+import type { Component } from "vue";
+import type { ToolPluginCore } from "../core/types";
+type VueComponent = Component<any>;
+/**
+ * Legacy Vue component-based config
+ * @deprecated Use PluginConfigSchema instead
+ */
+export interface ToolPluginConfig {
+    key: string;
+    defaultValue: unknown;
+    component: VueComponent;
+}
+/**
+ * Vue plugin interface - extends core with Vue components
+ */
+export interface ToolPlugin<T = unknown, J = unknown, A extends object = object> extends ToolPluginCore<T, J, A> {
+    /** Vue component for full view */
+    viewComponent?: VueComponent;
+    /** Vue component for preview/thumbnail */
+    previewComponent?: VueComponent;
+    /**
+     * Legacy Vue component-based config (for backward compatibility)
+     * @deprecated Use configSchema instead
+     */
+    config?: ToolPluginConfig;
+}
+export type { BackendType, ToolContextApp, ToolContext, ToolResult, ToolResultComplete, JsonSchemaProperty, ToolDefinition, StartApiResponse, ToolSample, InputHandler, FileInputHandler, ClipboardImageInputHandler, UrlInputHandler, TextInputHandler, FileUploadConfig, ConfigValue, ConfigFieldSchema, PluginConfigSchema, ViewComponentProps, PreviewComponentProps, ToolPluginCore, ImageToolData, GenerateImageArgs, ImageGenerationConfigValue, } from "../core/types";

package/dist/vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./core.cjs"),e=require("vue"),l=require("@mulmochat-plugin/ui-image"),s=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(n){const o=n,u=e.ref(null);return e.watch(()=>o.selectedResult,r=>{r?.toolName===t.TOOL_NAME&&r.data&&(u.value=r)},{immediate:!0,deep:!0}),(r,p)=>u.value?(e.openBlock(),e.createBlock(e.unref(l.ImageView),{key:0,selectedResult:u.value},null,8,["selectedResult"])):e.createCommentVNode("",!0)}}),a=e.defineComponent({__name:"Preview",props:{result:{}},setup(n){return(o,u)=>(e.openBlock(),e.createBlock(e.unref(l.ImagePreview),{result:n.result},null,8,["result"]))}}),c={...t.pluginCore,viewComponent:s,previewComponent:a},i={plugin:c};exports.SAMPLES=t.SAMPLES;exports.TOOL_DEFINITION=t.TOOL_DEFINITION;exports.TOOL_NAME=t.TOOL_NAME;exports.createUploadedImageResult=t.createUploadedImageResult;exports.executeGenerateImage=t.executeGenerateImage;exports.pluginCore=t.pluginCore;exports.Preview=a;exports.View=s;exports.default=i;exports.plugin=c;

package/dist/vue.js

@@ -0,0 +1,49 @@
+import { TOOL_NAME as l, pluginCore as c } from "./core.js";
+import { SAMPLES as P, TOOL_DEFINITION as T, createUploadedImageResult as V, executeGenerateImage as h } from "./core.js";
+import { defineComponent as s, ref as m, watch as p, createBlock as n, createCommentVNode as i, openBlock as u, unref as a } from "vue";
+import { ImageView as d, ImagePreview as _ } from "@mulmochat-plugin/ui-image";
+const f = /* @__PURE__ */ s({
+  __name: "View",
+  props: {
+    selectedResult: {},
+    sendTextMessage: { type: Function }
+  },
+  emits: ["updateResult"],
+  setup(r) {
+    const o = r, e = m(null);
+    return p(
+      () => o.selectedResult,
+      (t) => {
+        t?.toolName === l && t.data && (e.value = t);
+      },
+      { immediate: !0, deep: !0 }
+    ), (t, w) => e.value ? (u(), n(a(d), {
+      key: 0,
+      selectedResult: e.value
+    }, null, 8, ["selectedResult"])) : i("", !0);
+  }
+}), g = /* @__PURE__ */ s({
+  __name: "Preview",
+  props: {
+    result: {}
+  },
+  setup(r) {
+    return (o, e) => (u(), n(a(_), { result: r.result }, null, 8, ["result"]));
+  }
+}), v = {
+  ...c,
+  viewComponent: f,
+  previewComponent: g
+}, N = { plugin: v };
+export {
+  g as Preview,
+  P as SAMPLES,
+  T as TOOL_DEFINITION,
+  l as TOOL_NAME,
+  f as View,
+  V as createUploadedImageResult,
+  N as default,
+  h as executeGenerateImage,
+  v as plugin,
+  c as pluginCore
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmochat-plugin/generate-image",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Image generation plugin for MulmoChat",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,6 +12,16 @@
       "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": [

package/dist/common/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * MulmoChat Plugin Common
- *
- * Shared types and utilities for building MulmoChat plugins.
- * Import from "@mulmochat-plugin/generate-image/common" or copy to your plugin.
- */
-export type { ToolContext, ToolResult, ToolPlugin, ToolDefinition, JsonSchemaProperty, StartApiResponse, FileUploadConfig, ToolPluginConfig, ToolSample, } from "./types";

package/dist/common/types.d.ts

@@ -1,137 +0,0 @@
-/**
- * MulmoChat Plugin Common Types
- *
- * Core interfaces for building MulmoChat plugins.
- * These types are plugin-agnostic and can be used by any plugin implementation.
- */
-import type { Component } from "vue";
-/**
- * Backend types that plugins can declare they use.
- * App layer manages actual provider/model settings for each type.
- */
-export type BackendType = "textLLM" | "imageGen" | "audio" | "search" | "browse" | "map" | "mulmocast";
-/**
- * Context passed to plugin execute function
- */
-export interface ToolContext {
-    currentResult?: ToolResult<unknown> | null;
-    userPreferences?: Record<string, unknown>;
-    getPluginConfig?: <T = unknown>(key: string) => T | undefined;
-    /** Backend API functions provided by the host app */
-    app?: Record<string, (...args: any[]) => any>;
-}
-/**
- * Result returned from plugin execution
- */
-export interface ToolResult<T = unknown, J = unknown> {
-    toolName?: string;
-    uuid?: string;
-    message: string;
-    title?: string;
-    jsonData?: J;
-    instructions?: string;
-    instructionsRequired?: boolean;
-    updating?: boolean;
-    cancelled?: boolean;
-    data?: T;
-    viewState?: Record<string, unknown>;
-}
-/**
- * JSON Schema property definition for tool parameters
- */
-export interface JsonSchemaProperty {
-    type?: string;
-    description?: string;
-    enum?: string[];
-    items?: JsonSchemaProperty;
-    minimum?: number;
-    maximum?: number;
-    minItems?: number;
-    maxItems?: number;
-    properties?: Record<string, JsonSchemaProperty>;
-    required?: string[];
-    additionalProperties?: boolean;
-    oneOf?: JsonSchemaProperty[];
-    [key: string]: unknown;
-}
-/**
- * API response from server start endpoint
- */
-export interface StartApiResponse {
-    hasOpenAIApiKey?: boolean;
-    hasAnthropicApiKey?: boolean;
-    hasGoogleApiKey?: boolean;
-    [key: string]: unknown;
-}
-/**
- * Tool definition for OpenAI-compatible function calling
- */
-export interface ToolDefinition {
-    type: "function";
-    name: string;
-    description: string;
-    parameters?: {
-        type: "object";
-        properties: Record<string, JsonSchemaProperty>;
-        required: string[];
-        additionalProperties?: boolean;
-    };
-}
-/**
- * File upload configuration
- */
-export interface FileUploadConfig {
-    acceptedTypes: string[];
-    handleUpload: (fileData: string, fileName: string, ...args: unknown[]) => ToolResult<unknown, unknown>;
-}
-/**
- * Plugin configuration
- */
-export interface ToolPluginConfig {
-    key: string;
-    defaultValue: unknown;
-    component: Component;
-}
-/**
- * Sample arguments for testing
- */
-export interface ToolSample {
-    name: string;
-    args: Record<string, unknown>;
-}
-/**
- * Main plugin interface
- * @template T - Type of data stored in result.data
- * @template J - Type of data stored in result.jsonData
- * @template A - Type of arguments passed to execute
- */
-export interface ToolPlugin<T = unknown, J = unknown, A extends object = object> {
-    /** Tool definition for LLM function calling */
-    toolDefinition: ToolDefinition;
-    /** Execute the plugin with given context and arguments */
-    execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
-    /** Message shown while generating */
-    generatingMessage: string;
-    /** Message shown while waiting for user action */
-    waitingMessage?: string;
-    /** Message shown during file upload */
-    uploadMessage?: string;
-    /** Check if plugin is enabled based on server capabilities */
-    isEnabled: (startResponse?: StartApiResponse | null) => boolean;
-    /** Delay in ms after execution before proceeding */
-    delayAfterExecution?: number;
-    /** Vue component for full view */
-    viewComponent?: Component;
-    /** Vue component for preview/thumbnail */
-    previewComponent?: Component;
-    /** System prompt additions for this plugin */
-    systemPrompt?: string;
-    /** Optional file upload configuration */
-    fileUpload?: FileUploadConfig;
-    /** Optional plugin-specific configuration */
-    config?: ToolPluginConfig;
-    /** Optional sample arguments for testing */
-    samples?: ToolSample[];
-    /** Backend types this plugin uses (e.g., ["textLLM", "imageGen"]) */
-    backends?: BackendType[];
-}

package/dist/plugin/index.d.ts

@@ -1,19 +0,0 @@
-/**
- * MulmoChat GenerateImage Plugin
- *
- * A plugin for generating images using AI backends.
- *
- * @example Basic usage
- * ```typescript
- * import { plugin } from "@mulmochat-plugin/generate-image";
- * import "@mulmochat-plugin/generate-image/style.css";
- * // Use plugin directly
- * ```
- */
-import type { ToolPlugin, ToolResult } from "../common";
-import type { ImageToolData, GenerateImageArgs } from "./types";
-export declare function createUploadedImageResult(imageData: string, fileName: string, prompt: string): ToolResult<ImageToolData, never>;
-/**
- * GenerateImage plugin instance
- */
-export declare const plugin: ToolPlugin<ImageToolData, never, GenerateImageArgs>;

package/dist/plugin/samples.d.ts

@@ -1,5 +0,0 @@
-/**
- * Sample data for GenerateImage plugin demo
- */
-import type { ToolSample } from "../common";
-export declare const SAMPLES: ToolSample[];

package/dist/plugin/tools.d.ts

@@ -1,19 +0,0 @@
-/**
- * GenerateImage Tool Definition
- */
-export declare const TOOL_NAME = "generateImage";
-export declare const TOOL_DEFINITION: {
-    type: "function";
-    name: string;
-    description: string;
-    parameters: {
-        type: "object";
-        properties: {
-            prompt: {
-                type: string;
-                description: string;
-            };
-        };
-        required: string[];
-    };
-};

package/dist/plugin/types.d.ts

@@ -1,16 +0,0 @@
-/**
- * GenerateImage Types
- */
-/** Re-export from ui-image for convenience */
-export type { ImageToolData } from "@mulmochat-plugin/ui-image";
-/** Arguments passed to the generateImage tool */
-export interface GenerateImageArgs {
-    prompt: string;
-}
-/** Configuration value for image generation backend */
-export interface ImageGenerationConfigValue {
-    backend: "gemini" | "openai" | "comfyui";
-    styleModifier?: string;
-    geminiModel?: "gemini-2.5-flash-image" | "gemini-3-pro-image-preview";
-    openaiModel?: "gpt-image-1" | "gpt-image-1.5" | "gpt-image-1-mini";
-}