@morscherlab/mld-sdk 0.6.0

package/dist/components/LoadingSpinner.vue.js

@@ -0,0 +1,47 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString } from "vue";
+const _hoisted_1 = { class: "mld-spinner__label" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LoadingSpinner",
+  props: {
+    size: { default: "md" },
+    variant: { default: "primary" },
+    label: { default: "Loading" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "mld-spinner",
+          `mld-spinner--${__props.size}`,
+          `mld-spinner--${__props.variant}`
+        ]),
+        role: "status"
+      }, [
+        _cache[0] || (_cache[0] = createElementVNode("svg", {
+          class: "mld-spinner__svg",
+          fill: "none",
+          viewBox: "0 0 24 24"
+        }, [
+          createElementVNode("circle", {
+            style: { "opacity": "0.25" },
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            "stroke-width": "4"
+          }),
+          createElementVNode("path", {
+            style: { "opacity": "0.75" },
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          })
+        ], -1)),
+        createElementVNode("span", _hoisted_1, toDisplayString(__props.label), 1)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=LoadingSpinner.vue.js.map

package/dist/components/LoadingSpinner.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.vue.js","sources":["../../src/components/LoadingSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\ninterface Props {\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  variant?: 'primary' | 'cta' | 'muted'\n  label?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  size: 'md',\n  variant: 'primary',\n  label: 'Loading',\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mld-spinner',\n      `mld-spinner--${size}`,\n      `mld-spinner--${variant}`,\n    ]\"\n    role=\"status\"\n  >\n    <svg\n      class=\"mld-spinner__svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        style=\"opacity: 0.25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      />\n      <path\n        style=\"opacity: 0.75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n    <span class=\"mld-spinner__label\">{{ label }}</span>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/loading-spinner.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString"],"mappings":";;;;;;;;;;;0BAeEA,mBA4BM,OAAA;AAAA,QA3BH,OAAKC,eAAA;AAAA;0BAA+C,QAAA,IAAI;AAAA,0BAA0B,QAAA,OAAO;AAAA,QAAA;QAK1F,MAAK;AAAA,MAAA;kCAELC,mBAkBM,OAAA;AAAA,UAjBJ,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,QAAA;UAERA,mBAOE,UAAA;AAAA,YANA,OAAA,EAAA,WAAA,OAAA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,mBAIE,QAAA;AAAA,YAHA,OAAA,EAAA,WAAA,OAAA;AAAA,YACA,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;;QAGNA,mBAAmD,QAAnD,YAAmDC,gBAAf,QAAA,KAAK,GAAA,CAAA;AAAA,MAAA;;;;"}

package/dist/components/LoadingSpinner.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./LoadingSpinner.vue.js";
+/* empty css                    */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=LoadingSpinner.vue3.js.map

package/dist/components/LoadingSpinner.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/MoleculeInput.vue.d.ts

@@ -0,0 +1,30 @@
+export interface MoleculeData {
+    smiles: string;
+    molfile: string;
+}
+interface Props {
+    modelValue?: MoleculeData;
+    disabled?: boolean;
+    readonly?: boolean;
+    height?: number;
+    showSmiles?: boolean;
+    placeholder?: string;
+    error?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (message: string) => any;
+    "update:modelValue": (data: MoleculeData | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onError?: ((message: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((data: MoleculeData | undefined) => any) | undefined;
+}>, {
+    error: boolean;
+    disabled: boolean;
+    placeholder: string;
+    readonly: boolean;
+    height: number;
+    showSmiles: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/MoleculeInput.vue.js

@@ -0,0 +1,327 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createTextVNode, toDisplayString, Fragment, createCommentVNode, nextTick } from "vue";
+const _hoisted_1 = {
+  key: 1,
+  class: "mld-molecule-input__error"
+};
+const _hoisted_2 = { class: "mld-molecule-input__actions" };
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = {
+  key: 4,
+  class: "mld-molecule-input__smiles"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MoleculeInput",
+  props: {
+    modelValue: {},
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    height: { default: 300 },
+    showSmiles: { type: Boolean, default: true },
+    placeholder: { default: "Draw a chemical structure" },
+    error: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const containerRef = ref(null);
+    const jsmeInstance = ref(null);
+    const isLoading = ref(true);
+    const loadError = ref(null);
+    const debounceTimer = ref(null);
+    const hasStructure = computed(() => {
+      var _a;
+      return ((_a = props.modelValue) == null ? void 0 : _a.smiles) && props.modelValue.smiles.length > 0;
+    });
+    function getJSMEState() {
+      const win = window;
+      if (!win.__jsmeCallbacks__) {
+        win.__jsmeCallbacks__ = [];
+      }
+      return win;
+    }
+    function waitForJSME() {
+      var _a;
+      const win = getJSMEState();
+      if ((_a = win.JSApplet) == null ? void 0 : _a.JSME) {
+        return Promise.resolve();
+      }
+      if (win.__jsmeLoadPromise__) {
+        return win.__jsmeLoadPromise__;
+      }
+      win.__jsmeLoadPromise__ = new Promise((resolve, reject) => {
+        var _a2, _b;
+        if ((_a2 = win.JSApplet) == null ? void 0 : _a2.JSME) {
+          resolve();
+          return;
+        }
+        const originalOnLoad = win.jsmeOnLoad;
+        win.jsmeOnLoad = () => {
+          var _a3;
+          win.__jsmeLoaded__ = true;
+          originalOnLoad == null ? void 0 : originalOnLoad();
+          (_a3 = win.__jsmeCallbacks__) == null ? void 0 : _a3.forEach((cb) => cb());
+          win.__jsmeCallbacks__ = [];
+          resolve();
+        };
+        (_b = win.__jsmeCallbacks__) == null ? void 0 : _b.push(resolve);
+        const existingScript = document.querySelector("script[data-jsme]");
+        if (existingScript) {
+          const checkReady = setInterval(() => {
+            var _a3, _b2;
+            if ((_a3 = win.JSApplet) == null ? void 0 : _a3.JSME) {
+              clearInterval(checkReady);
+              win.__jsmeLoaded__ = true;
+              (_b2 = win.__jsmeCallbacks__) == null ? void 0 : _b2.forEach((cb) => cb());
+              win.__jsmeCallbacks__ = [];
+              resolve();
+            }
+          }, 100);
+          setTimeout(() => {
+            var _a3;
+            clearInterval(checkReady);
+            if (!win.__jsmeLoaded__ && !((_a3 = win.JSApplet) == null ? void 0 : _a3.JSME)) {
+              reject(new Error("JSME initialization timeout"));
+            }
+          }, 15e3);
+          return;
+        }
+        win.__jsmeLoading__ = true;
+        const script = document.createElement("script");
+        script.src = "https://jsme-editor.github.io/dist/jsme/jsme.nocache.js";
+        script.integrity = "sha384-l6tNzsc/eAJ7uql0dGAcHYI5ANVEV7DrJYjzXp3t13L+3OzLnfpzJO0Uio7mUSjY";
+        script.crossOrigin = "anonymous";
+        script.async = true;
+        script.setAttribute("data-jsme", "true");
+        script.onerror = () => {
+          win.__jsmeLoading__ = false;
+          win.__jsmeLoadPromise__ = void 0;
+          reject(new Error("Failed to load JSME script"));
+        };
+        setTimeout(() => {
+          var _a3;
+          if (!win.__jsmeLoaded__ && !((_a3 = win.JSApplet) == null ? void 0 : _a3.JSME)) {
+            reject(new Error("JSME initialization timeout"));
+          }
+        }, 15e3);
+        document.head.appendChild(script);
+      });
+      return win.__jsmeLoadPromise__;
+    }
+    async function initJSME() {
+      var _a, _b;
+      if (!containerRef.value || props.readonly) return;
+      try {
+        isLoading.value = true;
+        loadError.value = null;
+        await waitForJSME();
+        await nextTick();
+        if (!containerRef.value) return;
+        const win = getJSMEState();
+        if (!((_a = win.JSApplet) == null ? void 0 : _a.JSME)) {
+          throw new Error("JSME library not available after loading");
+        }
+        const editorId = `jsme-${Date.now()}`;
+        containerRef.value.id = editorId;
+        const instance = new win.JSApplet.JSME(
+          editorId,
+          "100%",
+          `${props.height}px`,
+          {
+            options: "query,hydrogens,paste,depict"
+          }
+        );
+        jsmeInstance.value = instance;
+        if ((_b = props.modelValue) == null ? void 0 : _b.molfile) {
+          instance.readMolFile(props.modelValue.molfile);
+        }
+        instance.setCallBack("AfterStructureModified", handleStructureChange);
+        isLoading.value = false;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to load molecule editor";
+        loadError.value = message;
+        emit("error", message);
+        isLoading.value = false;
+      }
+    }
+    function handleStructureChange() {
+      if (debounceTimer.value) {
+        clearTimeout(debounceTimer.value);
+      }
+      debounceTimer.value = setTimeout(() => {
+        if (!jsmeInstance.value) return;
+        const instance = jsmeInstance.value;
+        const smiles = instance.smiles();
+        const molfile = instance.molFile();
+        if (!smiles || smiles.length === 0) {
+          emit("update:modelValue", void 0);
+        } else {
+          emit("update:modelValue", { smiles, molfile });
+        }
+      }, 300);
+    }
+    function clearStructure() {
+      if (jsmeInstance.value) {
+        jsmeInstance.value.reset();
+      }
+      emit("update:modelValue", void 0);
+    }
+    watch(() => props.modelValue, (newValue) => {
+      if (!jsmeInstance.value) return;
+      const instance = jsmeInstance.value;
+      const currentSmiles = instance.smiles();
+      if ((newValue == null ? void 0 : newValue.smiles) !== currentSmiles) {
+        if (newValue == null ? void 0 : newValue.molfile) {
+          instance.readMolFile(newValue.molfile);
+        } else {
+          instance.reset();
+        }
+      }
+    });
+    onMounted(() => {
+      if (!props.readonly) {
+        initJSME();
+      } else {
+        isLoading.value = false;
+      }
+    });
+    onUnmounted(() => {
+      if (debounceTimer.value) {
+        clearTimeout(debounceTimer.value);
+      }
+      jsmeInstance.value = null;
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "mld-molecule-input",
+          __props.disabled ? "mld-molecule-input--disabled" : "",
+          __props.readonly ? "mld-molecule-input--readonly" : "",
+          __props.error ? "mld-molecule-input--error" : ""
+        ])
+      }, [
+        isLoading.value && !__props.readonly ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "mld-molecule-input__skeleton",
+          style: normalizeStyle({ height: `${__props.height}px` })
+        }, [..._cache[0] || (_cache[0] = [
+          createElementVNode("svg", {
+            class: "mld-molecule-input__skeleton-icon",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true"
+          }, [
+            createElementVNode("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+            })
+          ], -1),
+          createElementVNode("span", { class: "mld-molecule-input__skeleton-text" }, "Loading molecule editor...", -1)
+        ])], 4)) : loadError.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          _cache[1] || (_cache[1] = createElementVNode("svg", {
+            class: "mld-molecule-input__error-icon",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true"
+          }, [
+            createElementVNode("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            })
+          ], -1)),
+          createTextVNode(" " + toDisplayString(loadError.value), 1)
+        ])) : __props.readonly ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          hasStructure.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "mld-molecule-input__readonly",
+            style: normalizeStyle({ height: `${__props.height}px` })
+          }, [..._cache[2] || (_cache[2] = [
+            createElementVNode("div", { class: "mld-molecule-input__empty" }, [
+              createElementVNode("svg", {
+                class: "mld-molecule-input__empty-icon",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true"
+              }, [
+                createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+                })
+              ]),
+              createElementVNode("span", { class: "mld-molecule-input__empty-text" }, "Structure defined (readonly)")
+            ], -1)
+          ])], 4)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "mld-molecule-input__empty",
+            style: normalizeStyle({ height: `${__props.height}px` })
+          }, [..._cache[3] || (_cache[3] = [
+            createElementVNode("svg", {
+              class: "mld-molecule-input__empty-icon",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true"
+            }, [
+              createElementVNode("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+              })
+            ], -1),
+            createElementVNode("span", { class: "mld-molecule-input__empty-text" }, "No structure", -1)
+          ])], 4))
+        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+          createElementVNode("div", {
+            ref_key: "containerRef",
+            ref: containerRef,
+            class: "mld-molecule-input__editor",
+            style: normalizeStyle({ height: `${__props.height}px` }),
+            role: "application",
+            "aria-label": "Molecule structure editor"
+          }, null, 4),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("button", {
+              type: "button",
+              class: "mld-molecule-input__action-btn",
+              disabled: !hasStructure.value || __props.disabled,
+              "aria-label": "Clear structure",
+              onClick: clearStructure
+            }, [..._cache[4] || (_cache[4] = [
+              createElementVNode("svg", {
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [
+                createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                })
+              ], -1)
+            ])], 8, _hoisted_3)
+          ])
+        ], 64)),
+        __props.showSmiles && hasStructure.value && !loadError.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mld-molecule-input__smiles-label" }, "SMILES:", -1)),
+          createTextVNode(" " + toDisplayString((_a = __props.modelValue) == null ? void 0 : _a.smiles), 1)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MoleculeInput.vue.js.map

package/dist/components/MoleculeInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoleculeInput.vue.js","sources":["../../src/components/MoleculeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'\n\nexport interface MoleculeData {\n  smiles: string\n  molfile: string\n}\n\ninterface Props {\n  modelValue?: MoleculeData\n  disabled?: boolean\n  readonly?: boolean\n  height?: number\n  showSmiles?: boolean\n  placeholder?: string\n  error?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n  readonly: false,\n  height: 300,\n  showSmiles: true,\n  placeholder: 'Draw a chemical structure',\n  error: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [data: MoleculeData | undefined]\n  'error': [message: string]\n}>()\n\n// State\nconst containerRef = ref<HTMLDivElement | null>(null)\nconst jsmeInstance = ref<unknown>(null)\nconst isLoading = ref(true)\nconst loadError = ref<string | null>(null)\nconst debounceTimer = ref<ReturnType<typeof setTimeout> | null>(null)\n\n// Computed\nconst hasStructure = computed(() => {\n  return props.modelValue?.smiles && props.modelValue.smiles.length > 0\n})\n\n// Use window-level state to persist across component instances and hot-reloads\ninterface JSMEGlobalState {\n  __jsmeCallbacks__?: Array<() => void>\n  __jsmeLoading__?: boolean\n  __jsmeLoaded__?: boolean\n  __jsmeLoadPromise__?: Promise<void>\n  JSApplet?: { JSME?: new (id: string, width: string, height: string, options?: object) => unknown }\n  jsmeOnLoad?: () => void\n}\n\nfunction getJSMEState(): JSMEGlobalState {\n  const win = window as unknown as JSMEGlobalState\n  if (!win.__jsmeCallbacks__) {\n    win.__jsmeCallbacks__ = []\n  }\n  return win\n}\n\nfunction waitForJSME(): Promise<void> {\n  const win = getJSMEState()\n\n  // Already loaded\n  if (win.JSApplet?.JSME) {\n    return Promise.resolve()\n  }\n\n  // Reuse existing promise if loading\n  if (win.__jsmeLoadPromise__) {\n    return win.__jsmeLoadPromise__\n  }\n\n  win.__jsmeLoadPromise__ = new Promise((resolve, reject) => {\n    // Double-check after promise creation\n    if (win.JSApplet?.JSME) {\n      resolve()\n      return\n    }\n\n    // Set up global callback FIRST (before checking for existing script)\n    const originalOnLoad = win.jsmeOnLoad\n    win.jsmeOnLoad = () => {\n      win.__jsmeLoaded__ = true\n      originalOnLoad?.()\n      win.__jsmeCallbacks__?.forEach(cb => cb())\n      win.__jsmeCallbacks__ = []\n      resolve()\n    }\n\n    // Add to callback queue\n    win.__jsmeCallbacks__?.push(resolve)\n\n    // Check if script already exists\n    const existingScript = document.querySelector('script[data-jsme]')\n    if (existingScript) {\n      // Script exists, poll for JSApplet.JSME (in case jsmeOnLoad already fired)\n      const checkReady = setInterval(() => {\n        if (win.JSApplet?.JSME) {\n          clearInterval(checkReady)\n          win.__jsmeLoaded__ = true\n          win.__jsmeCallbacks__?.forEach(cb => cb())\n          win.__jsmeCallbacks__ = []\n          resolve()\n        }\n      }, 100)\n\n      setTimeout(() => {\n        clearInterval(checkReady)\n        if (!win.__jsmeLoaded__ && !win.JSApplet?.JSME) {\n          reject(new Error('JSME initialization timeout'))\n        }\n      }, 15000)\n      return\n    }\n\n    // Load the script\n    win.__jsmeLoading__ = true\n    const script = document.createElement('script')\n    script.src = 'https://jsme-editor.github.io/dist/jsme/jsme.nocache.js'\n    script.integrity = 'sha384-l6tNzsc/eAJ7uql0dGAcHYI5ANVEV7DrJYjzXp3t13L+3OzLnfpzJO0Uio7mUSjY'\n    script.crossOrigin = 'anonymous'\n    script.async = true\n    script.setAttribute('data-jsme', 'true')\n\n    script.onerror = () => {\n      win.__jsmeLoading__ = false\n      win.__jsmeLoadPromise__ = undefined\n      reject(new Error('Failed to load JSME script'))\n    }\n\n    // Timeout\n    setTimeout(() => {\n      if (!win.__jsmeLoaded__ && !win.JSApplet?.JSME) {\n        reject(new Error('JSME initialization timeout'))\n      }\n    }, 15000)\n\n    document.head.appendChild(script)\n  })\n\n  return win.__jsmeLoadPromise__\n}\n\n// JSME initialization\nasync function initJSME() {\n  if (!containerRef.value || props.readonly) return\n\n  try {\n    isLoading.value = true\n    loadError.value = null\n\n    // Wait for JSME to be ready\n    await waitForJSME()\n\n    // Wait for DOM to be ready\n    await nextTick()\n\n    if (!containerRef.value) return\n\n    // Get JSME constructor from window\n    const win = getJSMEState()\n\n    if (!win.JSApplet?.JSME) {\n      throw new Error('JSME library not available after loading')\n    }\n\n    // Create JSME instance\n    const editorId = `jsme-${Date.now()}`\n    containerRef.value.id = editorId\n\n    const instance = new win.JSApplet.JSME(\n      editorId,\n      '100%',\n      `${props.height}px`,\n      {\n        options: 'query,hydrogens,paste,depict',\n      }\n    )\n\n    jsmeInstance.value = instance\n\n    // Set initial value if provided\n    if (props.modelValue?.molfile) {\n      (instance as { readMolFile: (mol: string) => void }).readMolFile(props.modelValue.molfile)\n    }\n\n    // Set up change callback\n    (instance as { setCallBack: (event: string, callback: () => void) => void }).setCallBack('AfterStructureModified', handleStructureChange)\n\n    isLoading.value = false\n  } catch (err) {\n    const message = err instanceof Error ? err.message : 'Failed to load molecule editor'\n    loadError.value = message\n    emit('error', message)\n    isLoading.value = false\n  }\n}\n\nfunction handleStructureChange() {\n  // Debounce the change event\n  if (debounceTimer.value) {\n    clearTimeout(debounceTimer.value)\n  }\n\n  debounceTimer.value = setTimeout(() => {\n    if (!jsmeInstance.value) return\n\n    const instance = jsmeInstance.value as {\n      smiles: () => string\n      molFile: () => string\n    }\n\n    const smiles = instance.smiles()\n    const molfile = instance.molFile()\n\n    if (!smiles || smiles.length === 0) {\n      emit('update:modelValue', undefined)\n    } else {\n      emit('update:modelValue', { smiles, molfile })\n    }\n  }, 300)\n}\n\nfunction clearStructure() {\n  if (jsmeInstance.value) {\n    (jsmeInstance.value as { reset: () => void }).reset()\n  }\n  emit('update:modelValue', undefined)\n}\n\n// Watch for external value changes\nwatch(() => props.modelValue, (newValue) => {\n  if (!jsmeInstance.value) return\n\n  const instance = jsmeInstance.value as {\n    smiles: () => string\n    readMolFile: (mol: string) => void\n    reset: () => void\n  }\n\n  // Only update if the external value differs from current\n  const currentSmiles = instance.smiles()\n  if (newValue?.smiles !== currentSmiles) {\n    if (newValue?.molfile) {\n      instance.readMolFile(newValue.molfile)\n    } else {\n      instance.reset()\n    }\n  }\n})\n\n// Lifecycle\nonMounted(() => {\n  if (!props.readonly) {\n    initJSME()\n  } else {\n    isLoading.value = false\n  }\n})\n\nonUnmounted(() => {\n  if (debounceTimer.value) {\n    clearTimeout(debounceTimer.value)\n  }\n  jsmeInstance.value = null\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mld-molecule-input',\n      disabled ? 'mld-molecule-input--disabled' : '',\n      readonly ? 'mld-molecule-input--readonly' : '',\n      error ? 'mld-molecule-input--error' : '',\n    ]\"\n  >\n    <!-- Loading state -->\n    <div\n      v-if=\"isLoading && !readonly\"\n      class=\"mld-molecule-input__skeleton\"\n      :style=\"{ height: `${height}px` }\"\n    >\n      <svg\n        class=\"mld-molecule-input__skeleton-icon\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n        />\n      </svg>\n      <span class=\"mld-molecule-input__skeleton-text\">Loading molecule editor...</span>\n    </div>\n\n    <!-- Error state -->\n    <div\n      v-else-if=\"loadError\"\n      class=\"mld-molecule-input__error\"\n    >\n      <svg\n        class=\"mld-molecule-input__error-icon\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n        />\n      </svg>\n      {{ loadError }}\n    </div>\n\n    <!-- Readonly mode - show empty or placeholder -->\n    <template v-else-if=\"readonly\">\n      <div\n        v-if=\"hasStructure\"\n        class=\"mld-molecule-input__readonly\"\n        :style=\"{ height: `${height}px` }\"\n      >\n        <!-- In readonly mode, we just display a placeholder since we don't have SVG rendering -->\n        <div class=\"mld-molecule-input__empty\">\n          <svg\n            class=\"mld-molecule-input__empty-icon\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n            />\n          </svg>\n          <span class=\"mld-molecule-input__empty-text\">Structure defined (readonly)</span>\n        </div>\n      </div>\n      <div\n        v-else\n        class=\"mld-molecule-input__empty\"\n        :style=\"{ height: `${height}px` }\"\n      >\n        <svg\n          class=\"mld-molecule-input__empty-icon\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n          />\n        </svg>\n        <span class=\"mld-molecule-input__empty-text\">No structure</span>\n      </div>\n    </template>\n\n    <!-- Editor mode -->\n    <template v-else>\n      <div\n        ref=\"containerRef\"\n        class=\"mld-molecule-input__editor\"\n        :style=\"{ height: `${height}px` }\"\n        role=\"application\"\n        aria-label=\"Molecule structure editor\"\n      />\n\n      <!-- Actions toolbar -->\n      <div class=\"mld-molecule-input__actions\">\n        <button\n          type=\"button\"\n          class=\"mld-molecule-input__action-btn\"\n          :disabled=\"!hasStructure || disabled\"\n          aria-label=\"Clear structure\"\n          @click=\"clearStructure\"\n        >\n          <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n          </svg>\n        </button>\n      </div>\n    </template>\n\n    <!-- SMILES display -->\n    <div\n      v-if=\"showSmiles && hasStructure && !loadError\"\n      class=\"mld-molecule-input__smiles\"\n    >\n      <span class=\"mld-molecule-input__smiles-label\">SMILES:</span>\n      {{ modelValue?.smiles }}\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/molecule-input.css';\n</style>\n"],"names":["_a","_b","_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_createTextVNode","_Fragment","_toDisplayString"],"mappings":"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"}

package/dist/components/MoleculeInput.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./MoleculeInput.vue.js";
+/* empty css                   */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MoleculeInput.vue3.js.map

package/dist/components/MoleculeInput.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoleculeInput.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/MultiSelect.vue.d.ts

@@ -0,0 +1,19 @@
+import { MultiSelectOption, MultiSelectSize } from '../types';
+interface Props {
+    modelValue: (string | number)[];
+    options: MultiSelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    maxSelections?: number;
+    size?: MultiSelectSize;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number)[]) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: MultiSelectSize;
+    placeholder: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/MultiSelect.vue.js

@@ -0,0 +1,109 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "mld-multi-select__placeholder"
+};
+const _hoisted_2 = {
+  class: "mld-multi-select__options",
+  role: "group"
+};
+const _hoisted_3 = ["aria-checked", "disabled", "onClick", "onKeydown"];
+const _hoisted_4 = { class: "mld-multi-select__chip-label" };
+const _hoisted_5 = {
+  key: 0,
+  class: "mld-multi-select__chip-check",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "mld-multi-select__summary"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MultiSelect",
+  props: {
+    modelValue: {},
+    options: {},
+    placeholder: { default: "Select options..." },
+    disabled: { type: Boolean, default: false },
+    maxSelections: {},
+    size: { default: "md" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const canSelectMore = computed(() => {
+      if (props.maxSelections === void 0) return true;
+      return props.modelValue.length < props.maxSelections;
+    });
+    function isSelected(value) {
+      return props.modelValue.includes(value);
+    }
+    function toggleOption(option) {
+      if (props.disabled || option.disabled) return;
+      if (isSelected(option.value)) {
+        emit("update:modelValue", props.modelValue.filter((v) => v !== option.value));
+      } else if (canSelectMore.value) {
+        emit("update:modelValue", [...props.modelValue, option.value]);
+      }
+    }
+    function handleKeydown(event, option) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggleOption(option);
+      }
+    }
+    const selectedLabels = computed(() => {
+      return props.modelValue.map((v) => {
+        var _a;
+        return (_a = props.options.find((o) => o.value === v)) == null ? void 0 : _a.label;
+      }).filter(Boolean);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "mld-multi-select",
+          `mld-multi-select--${__props.size}`,
+          __props.disabled ? "mld-multi-select--disabled" : ""
+        ])
+      }, [
+        __props.modelValue.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+            return openBlock(), createElementBlock("button", {
+              key: String(option.value),
+              type: "button",
+              role: "checkbox",
+              "aria-checked": isSelected(option.value),
+              disabled: __props.disabled || option.disabled || !isSelected(option.value) && !canSelectMore.value,
+              class: normalizeClass([
+                "mld-multi-select__chip",
+                `mld-multi-select__chip--${__props.size}`,
+                isSelected(option.value) ? "mld-multi-select__chip--active" : "",
+                option.disabled ? "mld-multi-select__chip--disabled" : "",
+                !isSelected(option.value) && !canSelectMore.value ? "mld-multi-select__chip--disabled" : ""
+              ]),
+              onClick: ($event) => toggleOption(option),
+              onKeydown: ($event) => handleKeydown($event, option)
+            }, [
+              createElementVNode("span", _hoisted_4, toDisplayString(option.label), 1),
+              isSelected(option.value) ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[0] || (_cache[0] = [
+                createElementVNode("path", { d: "M20 6 9 17l-5-5" }, null, -1)
+              ])])) : createCommentVNode("", true)
+            ], 42, _hoisted_3);
+          }), 128))
+        ]),
+        __props.modelValue.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(selectedLabels.value.join(", ")), 1)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MultiSelect.vue.js.map

package/dist/components/MultiSelect.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.vue.js","sources":["../../src/components/MultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { MultiSelectOption, MultiSelectSize } from '../types'\n\ninterface Props {\n  modelValue: (string | number)[]\n  options: MultiSelectOption[]\n  placeholder?: string\n  disabled?: boolean\n  maxSelections?: number\n  size?: MultiSelectSize\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  placeholder: 'Select options...',\n  disabled: false,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: (string | number)[]]\n}>()\n\nconst canSelectMore = computed(() => {\n  if (props.maxSelections === undefined) return true\n  return props.modelValue.length < props.maxSelections\n})\n\nfunction isSelected(value: string | number): boolean {\n  return props.modelValue.includes(value)\n}\n\nfunction toggleOption(option: MultiSelectOption) {\n  if (props.disabled || option.disabled) return\n\n  if (isSelected(option.value)) {\n    emit('update:modelValue', props.modelValue.filter(v => v !== option.value))\n  } else if (canSelectMore.value) {\n    emit('update:modelValue', [...props.modelValue, option.value])\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent, option: MultiSelectOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    toggleOption(option)\n  }\n}\n\nconst selectedLabels = computed(() => {\n  return props.modelValue\n    .map(v => props.options.find(o => o.value === v)?.label)\n    .filter(Boolean)\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mld-multi-select',\n      `mld-multi-select--${size}`,\n      disabled ? 'mld-multi-select--disabled' : '',\n    ]\"\n  >\n    <div\n      v-if=\"modelValue.length === 0\"\n      class=\"mld-multi-select__placeholder\"\n    >\n      {{ placeholder }}\n    </div>\n\n    <div class=\"mld-multi-select__options\" role=\"group\">\n      <button\n        v-for=\"option in options\"\n        :key=\"String(option.value)\"\n        type=\"button\"\n        role=\"checkbox\"\n        :aria-checked=\"isSelected(option.value)\"\n        :disabled=\"disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)\"\n        :class=\"[\n          'mld-multi-select__chip',\n          `mld-multi-select__chip--${size}`,\n          isSelected(option.value) ? 'mld-multi-select__chip--active' : '',\n          option.disabled ? 'mld-multi-select__chip--disabled' : '',\n          !isSelected(option.value) && !canSelectMore ? 'mld-multi-select__chip--disabled' : '',\n        ]\"\n        @click=\"toggleOption(option)\"\n        @keydown=\"handleKeydown($event, option)\"\n      >\n        <span class=\"mld-multi-select__chip-label\">{{ option.label }}</span>\n        <svg\n          v-if=\"isSelected(option.value)\"\n          class=\"mld-multi-select__chip-check\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </button>\n    </div>\n\n    <div\n      v-if=\"modelValue.length > 0\"\n      class=\"mld-multi-select__summary\"\n    >\n      {{ selectedLabels.join(', ') }}\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/multi-select.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createElementVNode","_Fragment","_renderList","_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAMd,UAAM,OAAO;AAIb,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI,MAAM,kBAAkB,OAAW,QAAO;AAC9C,aAAO,MAAM,WAAW,SAAS,MAAM;AAAA,IACzC,CAAC;AAED,aAAS,WAAW,OAAiC;AACnD,aAAO,MAAM,WAAW,SAAS,KAAK;AAAA,IACxC;AAEA,aAAS,aAAa,QAA2B;AAC/C,UAAI,MAAM,YAAY,OAAO,SAAU;AAEvC,UAAI,WAAW,OAAO,KAAK,GAAG;AAC5B,aAAK,qBAAqB,MAAM,WAAW,OAAO,OAAK,MAAM,OAAO,KAAK,CAAC;AAAA,MAC5E,WAAW,cAAc,OAAO;AAC9B,aAAK,qBAAqB,CAAC,GAAG,MAAM,YAAY,OAAO,KAAK,CAAC;AAAA,MAC/D;AAAA,IACF;AAEA,aAAS,cAAc,OAAsB,QAA2B;AACtE,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAA;AACN,qBAAa,MAAM;AAAA,MACrB;AAAA,IACF;AAEA,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,MAAM,WACV,IAAI,CAAA,MAAA;;AAAK,2BAAM,QAAQ,KAAK,CAAA,MAAK,EAAE,UAAU,CAAC,MAArC,mBAAwC;AAAA,OAAK,EACtD,OAAO,OAAO;AAAA,IACnB,CAAC;;0BAICA,mBAsDM,OAAA;AAAA,QArDH,OAAKC,eAAA;AAAA;+BAAyD,QAAA,IAAI;AAAA,UAAU,QAAA,WAAQ,+BAAA;AAAA,QAAA;;QAO7E,QAAA,WAAW,WAAM,kBADzBD,mBAKM,OALN,YAKME,gBADD,QAAA,WAAW,GAAA,CAAA;QAGhBC,mBAgCM,OAhCN,YAgCM;AAAA,4BA/BJH,mBA8BSI,UAAA,MAAAC,WA7BU,QAAA,SAAO,CAAjB,WAAM;gCADfL,mBA8BS,UAAA;AAAA,cA5BN,KAAK,OAAO,OAAO,KAAK;AAAA,cACzB,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,gBAAc,WAAW,OAAO,KAAK;AAAA,cACrC,UAAU,QAAA,YAAY,OAAO,YAAQ,CAAM,WAAW,OAAO,KAAK,MAAM,cAAA;AAAA,cACxE,OAAKC,eAAA;AAAA;2CAA6E,QAAA,IAAI;AAAA,gBAAc,WAAW,OAAO,KAAK,IAAA,mCAAA;AAAA,gBAAqD,OAAO,WAAQ,qCAAA;AAAA,gBAAuD,CAAA,WAAW,OAAO,KAAK,MAAM,cAAA,QAAa,qCAAA;AAAA,cAAA;cAOhS,SAAK,CAAA,WAAE,aAAa,MAAM;AAAA,cAC1B,WAAO,CAAA,WAAE,cAAc,QAAQ,MAAM;AAAA,YAAA;cAEtCE,mBAAoE,QAApE,YAAoED,gBAAtB,OAAO,KAAK,GAAA,CAAA;AAAA,cAElD,WAAW,OAAO,KAAK,KAD/BI,UAAA,GAAAN,mBAWM,OAXN,YAWM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,gBADJG,mBAA4B,QAAA,EAAtB,GAAE,kBAAA,GAAiB,MAAA,EAAA;AAAA,cAAA;;;;QAMvB,QAAA,WAAW,SAAM,KADzBG,aAAAN,mBAKM,OALN,YAKME,gBADD,eAAA,MAAe,KAAI,IAAA,CAAA,GAAA,CAAA;;;;;"}

package/dist/components/MultiSelect.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./MultiSelect.vue.js";
+/* empty css                 */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MultiSelect.vue3.js.map

package/dist/components/MultiSelect.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/NumberInput.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    modelValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    error: boolean;
+    disabled: boolean;
+    size: "sm" | "md" | "lg";
+    step: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;