@pooder/vue 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './vue/src/index'
+export {}

package/dist/index.es.js

@@ -0,0 +1,296 @@
+import { defineComponent as v, ref as k, onMounted as A, onBeforeUnmount as M, createElementBlock as p, openBlock as h, createElementVNode as l, computed as T, toDisplayString as $, watch as N, isReactive as P, reactive as E, resolveComponent as V, createCommentVNode as O, Fragment as C, renderList as S, createVNode as y, shallowRef as L } from "vue";
+import { BackgroundTool as W, ImageTool as B, WhiteInkTool as F, DielineTool as H, HoleTool as R, FilmTool as U } from "@pooder/kit";
+import { PooderEditor as j } from "@pooder/core";
+const q = v({
+  name: "CanvasArea",
+  props: {
+    width: {
+      type: Number,
+      required: !0
+    },
+    height: {
+      type: Number,
+      required: !0
+    }
+  },
+  emits: ["init"],
+  setup(t, { emit: o }) {
+    const d = k(null);
+    let s = null;
+    return A(() => {
+      d.value && (d.value.width = t.width, d.value.height = t.height, s = new j(d.value, {
+        width: t.width,
+        height: t.height
+      }), o("init", s));
+    }), M(() => {
+      s && s.destroy();
+    }), {
+      canvasRef: d
+    };
+  }
+}), I = (t, o) => {
+  const d = t.__vccOpts || t;
+  for (const [s, f] of o)
+    d[s] = f;
+  return d;
+}, D = { class: "canvas-area" }, z = { class: "canvas-wrapper" }, G = { ref: "canvasRef" };
+function J(t, o, d, s, f, _) {
+  return h(), p("div", D, [
+    l("div", z, [
+      l("canvas", G, null, 512)
+    ])
+  ]);
+}
+const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-9f998bd0"]]), Q = v({
+  name: "ColorPicker",
+  props: {
+    modelValue: {
+      type: String,
+      default: "#000000"
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(t, { emit: o }) {
+    const d = (r) => {
+      if (!r) return "#000000";
+      const n = String(r);
+      if (n.startsWith("#")) {
+        if (n.length === 9) return n.slice(0, 7);
+        if (n.length === 7) return n;
+        if (n.length === 4) return "#" + n[1] + n[1] + n[2] + n[2] + n[3] + n[3];
+      }
+      if (n.startsWith("rgb")) {
+        const e = n.match(/\d+(\.\d+)?/g);
+        if (e && e.length >= 3) {
+          const u = parseInt(e[0]), i = parseInt(e[1]), c = parseInt(e[2]), g = (b) => {
+            const w = b.toString(16);
+            return w.length === 1 ? "0" + w : w;
+          };
+          return `#${g(u)}${g(i)}${g(c)}`;
+        }
+      }
+      return "#000000";
+    }, s = (r) => {
+      if (!r) return 1;
+      const n = String(r);
+      if (n.startsWith("#"))
+        return n.length === 9 ? parseInt(n.slice(7), 16) / 255 : 1;
+      if (n.startsWith("rgba")) {
+        const e = n.match(/\d+(\.\d+)?/g);
+        if (e && e.length >= 4) return parseFloat(e[3]);
+      }
+      return 1;
+    }, f = T(() => d(t.modelValue)), _ = T(() => Math.round(s(t.modelValue) * 100));
+    return {
+      hexValue: f,
+      alphaValue: _,
+      updateColor: (r) => {
+        const n = r.target.value, e = s(t.modelValue), u = parseInt(n.slice(1, 3), 16), i = parseInt(n.slice(3, 5), 16), c = parseInt(n.slice(5, 7), 16), g = `rgba(${u}, ${i}, ${c}, ${e})`;
+        o("update:modelValue", g), o("change", g);
+      },
+      updateAlpha: (r) => {
+        const n = r.target.value, e = parseInt(n) / 100, u = d(t.modelValue), i = parseInt(u.slice(1, 3), 16), c = parseInt(u.slice(3, 5), 16), g = parseInt(u.slice(5, 7), 16), b = `rgba(${i}, ${c}, ${g}, ${e})`;
+        o("update:modelValue", b), o("change", b);
+      }
+    };
+  }
+}), X = { class: "color-picker" }, Y = ["value"], Z = { class: "alpha-slider-wrap" }, x = ["value"], ee = { class: "alpha-value" };
+function te(t, o, d, s, f, _) {
+  return h(), p("div", X, [
+    l("input", {
+      type: "color",
+      value: t.hexValue,
+      onInput: o[0] || (o[0] = (...m) => t.updateColor && t.updateColor(...m))
+    }, null, 40, Y),
+    l("div", Z, [
+      o[2] || (o[2] = l("span", { class: "alpha-label" }, "A:", -1)),
+      l("input", {
+        type: "range",
+        min: "0",
+        max: "100",
+        step: "1",
+        value: t.alphaValue,
+        onInput: o[1] || (o[1] = (...m) => t.updateAlpha && t.updateAlpha(...m))
+      }, null, 40, x),
+      l("span", ee, $(t.alphaValue) + "%", 1)
+    ])
+  ]);
+}
+const ne = /* @__PURE__ */ I(Q, [["render", te], ["__scopeId", "data-v-ae754a79"]]), oe = v({
+  name: "ToolPanel",
+  components: { ColorPicker: ne },
+  props: {
+    editor: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(t) {
+    const o = k([]), d = () => {
+      t.editor ? o.value = Array.from(t.editor.getExtensions().map((e) => (e.options && !P(e.options) && (e.options = E(e.options)), e))) : o.value = [];
+    };
+    N(() => t.editor, (e) => {
+      d();
+    }, { immediate: !0 });
+    const s = (e, u) => e.schema?.[u];
+    return {
+      extensionList: o,
+      getInputType: (e, u, i) => {
+        const c = s(e, u);
+        if (c && c.type) return c.type;
+        if (typeof i == "boolean") return "checkbox";
+        if (typeof i == "number") return "number";
+        if (typeof i == "string") {
+          const g = u.toLowerCase();
+          return g.includes("color") || g.includes("fill") || g.includes("stroke") || i.startsWith("#") || i.startsWith("rgb") ? "color" : "text";
+        }
+        return "text";
+      },
+      updateOption: (e, u, i) => {
+        e.options && (e.options[String(u)] = i, t.editor && t.editor.updateState((c) => ({ ...c })));
+      },
+      getMinMax: (e, u, i) => {
+        const c = s(e, u);
+        return c ? {
+          min: c.min ?? 0,
+          max: c.max ?? 100,
+          step: c.step ?? 1
+        } : i <= 1 && i >= 0 ? { min: 0, max: 1, step: 0.01 } : { min: 0, max: Math.max(1e3, i * 2), step: 1 };
+      },
+      formatNumber: (e) => typeof e == "number" ? Number.isInteger(e) ? e : e.toFixed(2) : e,
+      getLabel: (e, u) => {
+        const i = s(e, u);
+        return i && i.label ? i.label : u.charAt(0).toUpperCase() + u.slice(1);
+      },
+      getSelectOptions: (e, u) => {
+        const i = s(e, u);
+        return !i || !i.options ? [] : i.options.map((c) => typeof c == "string" ? { label: c, value: c } : c);
+      }
+    };
+  }
+}), se = {
+  key: 0,
+  class: "tool-panel"
+}, re = { key: 0 }, ae = { key: 0 }, ie = ["value", "onChange"], le = ["value"], ue = { key: 1 }, ce = { key: 2 }, de = ["value", "onInput"], pe = { class: "slider-container" }, he = ["min", "max", "step", "value", "onInput"], ge = { class: "slider-value" }, me = { key: 3 }, fe = { class: "switch-wrapper" }, _e = { class: "switch" }, $e = ["checked", "onChange"], be = { key: 4 }, ve = { class: "checkbox-wrapper" }, Ie = ["checked", "onChange"], we = { key: 5 }, Ce = ["value", "onInput"];
+function Se(t, o, d, s, f, _) {
+  const m = V("ColorPicker");
+  return t.editor ? (h(), p("div", se, [
+    (h(!0), p(C, null, S(t.extensionList, (a) => (h(), p("div", {
+      class: "plugin-section",
+      key: a.name
+    }, [
+      l("h3", null, $(a.name), 1),
+      a.options ? (h(), p("div", re, [
+        (h(!0), p(C, null, S(a.options, (r, n) => (h(), p("div", {
+          key: n,
+          class: "config-item"
+        }, [
+          l("label", null, $(t.getLabel(a, String(n))), 1),
+          t.getInputType(a, String(n), r) === "select" ? (h(), p("div", ae, [
+            l("select", {
+              value: r,
+              onChange: (e) => t.updateOption(a, n, e.target.value)
+            }, [
+              (h(!0), p(C, null, S(t.getSelectOptions(a, String(n)), (e) => (h(), p("option", {
+                key: e.value,
+                value: e.value
+              }, $(e.label), 9, le))), 128))
+            ], 40, ie)
+          ])) : t.getInputType(a, String(n), r) === "color" ? (h(), p("div", ue, [
+            y(m, {
+              modelValue: String(r),
+              "onUpdate:modelValue": (e) => t.updateOption(a, n, e)
+            }, null, 8, ["modelValue", "onUpdate:modelValue"])
+          ])) : t.getInputType(a, String(n), r) === "number" ? (h(), p("div", ce, [
+            l("input", {
+              type: "number",
+              value: r,
+              onInput: (e) => t.updateOption(a, n, Number(e.target.value))
+            }, null, 40, de),
+            l("div", pe, [
+              l("input", {
+                type: "range",
+                min: t.getMinMax(a, String(n), r).min,
+                max: t.getMinMax(a, String(n), r).max,
+                step: t.getMinMax(a, String(n), r).step,
+                value: r,
+                onInput: (e) => t.updateOption(a, n, Number(e.target.value))
+              }, null, 40, he),
+              l("span", ge, $(t.formatNumber(r)), 1)
+            ])
+          ])) : t.getInputType(a, String(n), r) === "boolean" ? (h(), p("div", me, [
+            l("div", fe, [
+              l("label", _e, [
+                l("input", {
+                  type: "checkbox",
+                  checked: !!r,
+                  onChange: (e) => t.updateOption(a, n, e.target.checked)
+                }, null, 40, $e),
+                o[0] || (o[0] = l("span", { class: "slider" }, null, -1))
+              ])
+            ])
+          ])) : t.getInputType(a, String(n), r) === "checkbox" ? (h(), p("div", be, [
+            l("div", ve, [
+              l("input", {
+                type: "checkbox",
+                checked: !!r,
+                onChange: (e) => t.updateOption(a, n, e.target.checked)
+              }, null, 40, Ie)
+            ])
+          ])) : (h(), p("div", we, [
+            l("input", {
+              type: "text",
+              value: r,
+              onInput: (e) => t.updateOption(a, n, e.target.value)
+            }, null, 40, Ce)
+          ]))
+        ]))), 128))
+      ])) : O("", !0)
+    ]))), 128))
+  ])) : O("", !0);
+}
+const Ve = /* @__PURE__ */ I(oe, [["render", Se], ["__scopeId", "data-v-97375248"]]), ye = v({
+  name: "PooderEditor",
+  components: {
+    CanvasArea: K,
+    ToolPanel: Ve
+  },
+  props: {
+    width: {
+      type: Number,
+      default: 1200
+    },
+    height: {
+      type: Number,
+      default: 600
+    }
+  },
+  setup(t) {
+    const o = L(null);
+    return {
+      editor: o,
+      onInit: (s) => {
+        s.use(new W()), s.use(new B()), s.use(new F()), s.use(new H()), s.use(new R()), s.use(new U()), o.value = s, console.log(s.getObjects());
+      }
+    };
+  }
+}), Te = { class: "pooder-editor" }, Oe = { class: "center-area" }, ke = { class: "right-panel" };
+function Ae(t, o, d, s, f, _) {
+  const m = V("CanvasArea"), a = V("ToolPanel");
+  return h(), p("div", Te, [
+    l("div", Oe, [
+      y(m, {
+        width: t.width,
+        height: t.height,
+        onInit: t.onInit
+      }, null, 8, ["width", "height", "onInit"])
+    ]),
+    l("div", ke, [
+      y(a, { editor: t.editor }, null, 8, ["editor"])
+    ])
+  ]);
+}
+const Ee = /* @__PURE__ */ I(ye, [["render", Ae], ["__scopeId", "data-v-c3077c4c"]]);
+export {
+  Ee as PooderEditor
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@pooder/kit"),require("@pooder/core")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/kit","@pooder/core"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.PooderVue={},m.Vue,m.PooderKit,m.PooderCore))})(this,(function(m,e,f,b){"use strict";const k=e.defineComponent({name:"CanvasArea",props:{width:{type:Number,required:!0},height:{type:Number,required:!0}},emits:["init"],setup(n,{emit:r}){const p=e.ref(null);let s=null;return e.onMounted(()=>{p.value&&(p.value.width=n.width,p.value.height=n.height,s=new b.PooderEditor(p.value,{width:n.width,height:n.height}),r("init",s))}),e.onBeforeUnmount(()=>{s&&s.destroy()}),{canvasRef:p}}}),V=(n,r)=>{const p=n.__vccOpts||n;for(const[s,g]of r)p[s]=g;return p},B={class:"canvas-area"},I={class:"canvas-wrapper"},N={ref:"canvasRef"};function C(n,r,p,s,g,_){return e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",I,[e.createElementVNode("canvas",N,null,512)])])}const y=V(k,[["render",C],["__scopeId","data-v-9f998bd0"]]),S=e.defineComponent({name:"ColorPicker",props:{modelValue:{type:String,default:"#000000"}},emits:["update:modelValue","change"],setup(n,{emit:r}){const p=a=>{if(!a)return"#000000";const o=String(a);if(o.startsWith("#")){if(o.length===9)return o.slice(0,7);if(o.length===7)return o;if(o.length===4)return"#"+o[1]+o[1]+o[2]+o[2]+o[3]+o[3]}if(o.startsWith("rgb")){const t=o.match(/\d+(\.\d+)?/g);if(t&&t.length>=3){const c=parseInt(t[0]),i=parseInt(t[1]),d=parseInt(t[2]),u=E=>{const $=E.toString(16);return $.length===1?"0"+$:$};return`#${u(c)}${u(i)}${u(d)}`}}return"#000000"},s=a=>{if(!a)return 1;const o=String(a);if(o.startsWith("#"))return o.length===9?parseInt(o.slice(7),16)/255:1;if(o.startsWith("rgba")){const t=o.match(/\d+(\.\d+)?/g);if(t&&t.length>=4)return parseFloat(t[3])}return 1},g=e.computed(()=>p(n.modelValue)),_=e.computed(()=>Math.round(s(n.modelValue)*100));return{hexValue:g,alphaValue:_,updateColor:a=>{const o=a.target.value,t=s(n.modelValue),c=parseInt(o.slice(1,3),16),i=parseInt(o.slice(3,5),16),d=parseInt(o.slice(5,7),16),u=`rgba(${c}, ${i}, ${d}, ${t})`;r("update:modelValue",u),r("change",u)},updateAlpha:a=>{const o=a.target.value,t=parseInt(o)/100,c=p(n.modelValue),i=parseInt(c.slice(1,3),16),d=parseInt(c.slice(3,5),16),u=parseInt(c.slice(5,7),16),E=`rgba(${i}, ${d}, ${u}, ${t})`;r("update:modelValue",E),r("change",E)}}}}),w={class:"color-picker"},T=["value"],O={class:"alpha-slider-wrap"},P=["value"],M={class:"alpha-value"};function A(n,r,p,s,g,_){return e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("input",{type:"color",value:n.hexValue,onInput:r[0]||(r[0]=(...h)=>n.updateColor&&n.updateColor(...h))},null,40,T),e.createElementVNode("div",O,[r[2]||(r[2]=e.createElementVNode("span",{class:"alpha-label"},"A:",-1)),e.createElementVNode("input",{type:"range",min:"0",max:"100",step:"1",value:n.alphaValue,onInput:r[1]||(r[1]=(...h)=>n.updateAlpha&&n.updateAlpha(...h))},null,40,P),e.createElementVNode("span",M,e.toDisplayString(n.alphaValue)+"%",1)])])}const L=V(S,[["render",A],["__scopeId","data-v-ae754a79"]]),W=e.defineComponent({name:"ToolPanel",components:{ColorPicker:L},props:{editor:{type:Object,default:null}},setup(n){const r=e.ref([]),p=()=>{n.editor?r.value=Array.from(n.editor.getExtensions().map(t=>(t.options&&!e.isReactive(t.options)&&(t.options=e.reactive(t.options)),t))):r.value=[]};e.watch(()=>n.editor,t=>{p()},{immediate:!0});const s=(t,c)=>t.schema?.[c];return{extensionList:r,getInputType:(t,c,i)=>{const d=s(t,c);if(d&&d.type)return d.type;if(typeof i=="boolean")return"checkbox";if(typeof i=="number")return"number";if(typeof i=="string"){const u=c.toLowerCase();return u.includes("color")||u.includes("fill")||u.includes("stroke")||i.startsWith("#")||i.startsWith("rgb")?"color":"text"}return"text"},updateOption:(t,c,i)=>{t.options&&(t.options[String(c)]=i,n.editor&&n.editor.updateState(d=>({...d})))},getMinMax:(t,c,i)=>{const d=s(t,c);return d?{min:d.min??0,max:d.max??100,step:d.step??1}:i<=1&&i>=0?{min:0,max:1,step:.01}:{min:0,max:Math.max(1e3,i*2),step:1}},formatNumber:t=>typeof t=="number"?Number.isInteger(t)?t:t.toFixed(2):t,getLabel:(t,c)=>{const i=s(t,c);return i&&i.label?i.label:c.charAt(0).toUpperCase()+c.slice(1)},getSelectOptions:(t,c)=>{const i=s(t,c);return!i||!i.options?[]:i.options.map(d=>typeof d=="string"?{label:d,value:d}:d)}}}}),D={key:0,class:"tool-panel"},F={key:0},q={key:0},j=["value","onChange"],H=["value"],R={key:1},U={key:2},K=["value","onInput"],z={class:"slider-container"},G=["min","max","step","value","onInput"],J={class:"slider-value"},Q={key:3},X={class:"switch-wrapper"},Y={class:"switch"},Z=["checked","onChange"],x={key:4},v={class:"checkbox-wrapper"},ee=["checked","onChange"],te={key:5},ne=["value","onInput"];function oe(n,r,p,s,g,_){const h=e.resolveComponent("ColorPicker");return n.editor?(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.extensionList,l=>(e.openBlock(),e.createElementBlock("div",{class:"plugin-section",key:l.name},[e.createElementVNode("h3",null,e.toDisplayString(l.name),1),l.options?(e.openBlock(),e.createElementBlock("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(a,o)=>(e.openBlock(),e.createElementBlock("div",{key:o,class:"config-item"},[e.createElementVNode("label",null,e.toDisplayString(n.getLabel(l,String(o))),1),n.getInputType(l,String(o),a)==="select"?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("select",{value:a,onChange:t=>n.updateOption(l,o,t.target.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.getSelectOptions(l,String(o)),t=>(e.openBlock(),e.createElementBlock("option",{key:t.value,value:t.value},e.toDisplayString(t.label),9,H))),128))],40,j)])):n.getInputType(l,String(o),a)==="color"?(e.openBlock(),e.createElementBlock("div",R,[e.createVNode(h,{modelValue:String(a),"onUpdate:modelValue":t=>n.updateOption(l,o,t)},null,8,["modelValue","onUpdate:modelValue"])])):n.getInputType(l,String(o),a)==="number"?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("input",{type:"number",value:a,onInput:t=>n.updateOption(l,o,Number(t.target.value))},null,40,K),e.createElementVNode("div",z,[e.createElementVNode("input",{type:"range",min:n.getMinMax(l,String(o),a).min,max:n.getMinMax(l,String(o),a).max,step:n.getMinMax(l,String(o),a).step,value:a,onInput:t=>n.updateOption(l,o,Number(t.target.value))},null,40,G),e.createElementVNode("span",J,e.toDisplayString(n.formatNumber(a)),1)])])):n.getInputType(l,String(o),a)==="boolean"?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",X,[e.createElementVNode("label",Y,[e.createElementVNode("input",{type:"checkbox",checked:!!a,onChange:t=>n.updateOption(l,o,t.target.checked)},null,40,Z),r[0]||(r[0]=e.createElementVNode("span",{class:"slider"},null,-1))])])])):n.getInputType(l,String(o),a)==="checkbox"?(e.openBlock(),e.createElementBlock("div",x,[e.createElementVNode("div",v,[e.createElementVNode("input",{type:"checkbox",checked:!!a,onChange:t=>n.updateOption(l,o,t.target.checked)},null,40,ee)])])):(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("input",{type:"text",value:a,onInput:t=>n.updateOption(l,o,t.target.value)},null,40,ne)]))]))),128))])):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)}const re=V(W,[["render",oe],["__scopeId","data-v-97375248"]]),se=e.defineComponent({name:"PooderEditor",components:{CanvasArea:y,ToolPanel:re},props:{width:{type:Number,default:1200},height:{type:Number,default:600}},setup(n){const r=e.shallowRef(null);return{editor:r,onInit:s=>{s.use(new f.BackgroundTool),s.use(new f.ImageTool),s.use(new f.WhiteInkTool),s.use(new f.DielineTool),s.use(new f.HoleTool),s.use(new f.FilmTool),r.value=s,console.log(s.getObjects())}}}}),ae={class:"pooder-editor"},le={class:"center-area"},ie={class:"right-panel"};function ce(n,r,p,s,g,_){const h=e.resolveComponent("CanvasArea"),l=e.resolveComponent("ToolPanel");return e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",le,[e.createVNode(h,{width:n.width,height:n.height,onInit:n.onInit},null,8,["width","height","onInit"])]),e.createElementVNode("div",ie,[e.createVNode(l,{editor:n.editor},null,8,["editor"])])])}const de=V(se,[["render",ce],["__scopeId","data-v-c3077c4c"]]);m.PooderEditor=de,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/vue/src/PooderEditor.vue.d.ts

@@ -0,0 +1,125 @@
+import { Editor } from '../../core/src/index.ts';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    editor: import('vue').ShallowRef<Editor | null, Editor | null>;
+    onInit: (instance: Editor) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    width: number;
+    height: number;
+}, {}, {
+    CanvasArea: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        width: {
+            type: NumberConstructor;
+            required: true;
+        };
+        height: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>, {
+        canvasRef: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "init"[], "init", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        width: {
+            type: NumberConstructor;
+            required: true;
+        };
+        height: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>> & Readonly<{
+        onInit?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    ToolPanel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        editor: {
+            type: import('vue').PropType<Editor | null>;
+            default: null;
+        };
+    }>, {
+        extensionList: import('vue').Ref<{
+            name: string;
+            priority?: number | undefined;
+            options?: import('../../core/src/index.ts').ExtensionOptions | undefined;
+            schema?: Record<string | number, import('../../core/src/index.ts').OptionSchema> | undefined;
+            enabled?: boolean | undefined;
+            onCreate?: ((editor: Editor) => void) | undefined;
+            onMount?: ((editor: Editor) => void) | undefined;
+            onUpdate?: ((editor: Editor, state: import('../../core/src/index.ts').EditorState) => void) | undefined;
+            onUnmount?: ((editor: Editor) => void) | undefined;
+            onDestroy?: ((editor: Editor) => void) | undefined;
+            commands?: Record<string, import('../../core/src/index.ts').Command> | undefined;
+        }[], import('../../core/src/index.ts').Extension<import('../../core/src/index.ts').ExtensionOptions>[] | {
+            name: string;
+            priority?: number | undefined;
+            options?: import('../../core/src/index.ts').ExtensionOptions | undefined;
+            schema?: Record<string | number, import('../../core/src/index.ts').OptionSchema> | undefined;
+            enabled?: boolean | undefined;
+            onCreate?: ((editor: Editor) => void) | undefined;
+            onMount?: ((editor: Editor) => void) | undefined;
+            onUpdate?: ((editor: Editor, state: import('../../core/src/index.ts').EditorState) => void) | undefined;
+            onUnmount?: ((editor: Editor) => void) | undefined;
+            onDestroy?: ((editor: Editor) => void) | undefined;
+            commands?: Record<string, import('../../core/src/index.ts').Command> | undefined;
+        }[]>;
+        getInputType: (ext: import('../../core/src/index.ts').Extension, key: string, value: any) => string;
+        updateOption: (ext: import('../../core/src/index.ts').Extension, key: string | number, value: any) => void;
+        getMinMax: (ext: import('../../core/src/index.ts').Extension, key: string, val: number) => {
+            min: number;
+            max: number;
+            step: number;
+        };
+        formatNumber: (val: any) => any;
+        getLabel: (ext: import('../../core/src/index.ts').Extension, key: string) => string;
+        getSelectOptions: (ext: import('../../core/src/index.ts').Extension, key: string) => {
+            label: string;
+            value: any;
+        }[];
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        editor: {
+            type: import('vue').PropType<Editor | null>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {
+        editor: Editor | null;
+    }, {}, {
+        ColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            modelValue: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {
+            hexValue: import('vue').ComputedRef<string>;
+            alphaValue: import('vue').ComputedRef<number>;
+            updateColor: (e: Event) => void;
+            updateAlpha: (e: Event) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            modelValue: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{
+            onChange?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }>, {
+            modelValue: string;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/src/components/CanvasArea.vue.d.ts

@@ -0,0 +1,24 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, {
+    canvasRef: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "init"[], "init", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onInit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/src/components/ColorPicker.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    hexValue: import('vue').ComputedRef<string>;
+    alphaValue: import('vue').ComputedRef<number>;
+    updateColor: (e: Event) => void;
+    updateAlpha: (e: Event) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/src/components/ToolPanel.vue.d.ts

@@ -0,0 +1,77 @@
+import { PropType } from 'vue';
+import { Editor, Extension, OptionSchema } from '../../../core/src/index.ts';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    editor: {
+        type: PropType<Editor | null>;
+        default: null;
+    };
+}>, {
+    extensionList: import('vue').Ref<{
+        name: string;
+        priority?: number | undefined;
+        options?: import('../../../core/src/index.ts').ExtensionOptions | undefined;
+        schema?: Record<string | number, OptionSchema> | undefined;
+        enabled?: boolean | undefined;
+        onCreate?: ((editor: Editor) => void) | undefined;
+        onMount?: ((editor: Editor) => void) | undefined;
+        onUpdate?: ((editor: Editor, state: import('../../../core/src/index.ts').EditorState) => void) | undefined;
+        onUnmount?: ((editor: Editor) => void) | undefined;
+        onDestroy?: ((editor: Editor) => void) | undefined;
+        commands?: Record<string, import('../../../core/src/index.ts').Command> | undefined;
+    }[], Extension<import('../../../core/src/index.ts').ExtensionOptions>[] | {
+        name: string;
+        priority?: number | undefined;
+        options?: import('../../../core/src/index.ts').ExtensionOptions | undefined;
+        schema?: Record<string | number, OptionSchema> | undefined;
+        enabled?: boolean | undefined;
+        onCreate?: ((editor: Editor) => void) | undefined;
+        onMount?: ((editor: Editor) => void) | undefined;
+        onUpdate?: ((editor: Editor, state: import('../../../core/src/index.ts').EditorState) => void) | undefined;
+        onUnmount?: ((editor: Editor) => void) | undefined;
+        onDestroy?: ((editor: Editor) => void) | undefined;
+        commands?: Record<string, import('../../../core/src/index.ts').Command> | undefined;
+    }[]>;
+    getInputType: (ext: Extension, key: string, value: any) => string;
+    updateOption: (ext: Extension, key: string | number, value: any) => void;
+    getMinMax: (ext: Extension, key: string, val: number) => {
+        min: number;
+        max: number;
+        step: number;
+    };
+    formatNumber: (val: any) => any;
+    getLabel: (ext: Extension, key: string) => string;
+    getSelectOptions: (ext: Extension, key: string) => {
+        label: string;
+        value: any;
+    }[];
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    editor: {
+        type: PropType<Editor | null>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    editor: Editor | null;
+}, {}, {
+    ColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {
+        hexValue: import('vue').ComputedRef<string>;
+        alphaValue: import('vue').ComputedRef<number>;
+        updateColor: (e: Event) => void;
+        updateAlpha: (e: Event) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }>, {
+        modelValue: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/src/index.d.ts

@@ -0,0 +1,2 @@
+import { default as PooderEditor } from './PooderEditor.vue';
+export { PooderEditor };

package/dist/vue/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/dist/vue.css

@@ -0,0 +1 @@
+.canvas-area[data-v-9f998bd0]{flex:1;background:#e0e0e0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px}.canvas-wrapper[data-v-9f998bd0]{background:#fff;box-shadow:0 0 10px #0000001a}.color-picker[data-v-ae754a79]{display:flex;flex-direction:column}.color-picker input[type=color][data-v-ae754a79]{width:100%;height:30px;padding:0;border:none;cursor:pointer}.alpha-slider-wrap[data-v-ae754a79]{display:flex;align-items:center;margin-top:5px}.alpha-label[data-v-ae754a79]{font-size:12px;color:#666;margin-right:5px;width:15px}.alpha-slider-wrap input[type=range][data-v-ae754a79]{flex:1;margin-right:5px}.alpha-value[data-v-ae754a79]{font-size:12px;color:#666;width:30px;text-align:right}.tool-panel[data-v-97375248]{padding:15px;overflow-x:auto;overflow-y:hidden;height:100%;display:flex;flex-direction:row;background:#f9f9f9}.plugin-section[data-v-97375248]{width:300px;flex-shrink:0;margin-right:20px;border-right:1px solid #eee;padding-right:20px;height:100%;overflow-y:auto}.plugin-section h3[data-v-97375248]{margin-top:0;margin-bottom:15px;font-size:16px;color:#333;border-bottom:2px solid #ddd;padding-bottom:5px}.config-item[data-v-97375248]{margin-bottom:15px}.config-item label[data-v-97375248]{display:block;margin-bottom:5px;font-size:14px;font-weight:500;color:#555}.config-item input[type=text][data-v-97375248],.config-item input[type=number][data-v-97375248],.config-item select[data-v-97375248]{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.config-item input[type=checkbox][data-v-97375248]{transform:scale(1.2)}.checkbox-wrapper[data-v-97375248]{padding:5px 0}.slider-container[data-v-97375248]{display:flex;align-items:center;margin-top:5px}.slider-container input[type=range][data-v-97375248]{flex:1;margin-right:10px}.slider-value[data-v-97375248]{font-size:12px;color:#666;width:35px;text-align:right}.switch-wrapper[data-v-97375248]{padding:5px 0}.switch[data-v-97375248]{position:relative;display:inline-block;width:40px;height:20px}.switch input[data-v-97375248]{opacity:0;width:0;height:0}.slider[data-v-97375248]{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:20px}.slider[data-v-97375248]:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider[data-v-97375248]{background-color:#2196f3}input:checked+.slider[data-v-97375248]:before{transform:translate(20px)}.pooder-editor[data-v-c3077c4c]{display:flex;flex-direction:column;width:100%;height:100%;background:#f0f2f5;box-sizing:border-box}.center-area[data-v-c3077c4c]{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.right-panel[data-v-c3077c4c]{width:100%;height:320px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column;z-index:10}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@pooder/vue",
+  "version": "0.0.2",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/vue.css": "./dist/vue.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "fabric": "^7.0.0",
+    "@pooder/core": "0.0.2",
+    "@pooder/kit": "0.0.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  }
+}