@anvaka/vue-llm 0.1.0

package/dist/vue/components/StoredKeysManager.vue.js

@@ -0,0 +1,223 @@
+import { ref as v, watch as R, onMounted as G, createElementBlock as d, openBlock as c, createElementVNode as s, createCommentVNode as b, Fragment as D, renderList as V, toDisplayString as p, withDirectives as S, withKeys as K, vModelDynamic as U, unref as q, vModelSelect as z, nextTick as J } from "vue";
+import { useLLM as Q } from "../useLLM.js";
+import { DEFAULT_CONFIGS as W } from "../../providers/factory.js";
+import { maskApiKey as X } from "../../core/keyStore.js";
+/* empty css                       */
+import Y from "../../_virtual/_plugin-vue_export-helper.js";
+const Z = { class: "llm-stored-keys-manager" }, I = { class: "llm-manager-header" }, ee = { class: "llm-manager-body" }, te = { class: "llm-scrollable-content" }, le = {
+  key: 0,
+  class: "llm-empty-keys"
+}, se = {
+  key: 1,
+  class: "llm-keys-list"
+}, oe = { class: "llm-key-header" }, ne = { class: "llm-provider-info" }, ie = { class: "llm-provider-header" }, re = { class: "llm-provider-name" }, ae = { class: "llm-stored-date" }, de = {
+  key: 0,
+  class: "llm-service-endpoint"
+}, ce = { class: "llm-key-input-row" }, ue = ["onUpdate:modelValue", "type", "placeholder", "onKeyup", "onBlur"], me = ["onClick", "title"], ve = ["onClick"], pe = {
+  key: 0,
+  class: "llm-key-item"
+}, ye = { class: "llm-key-header" }, fe = { class: "llm-provider-info" }, _e = { class: "llm-provider-header" }, he = ["value", "disabled"], be = { class: "llm-key-input-row" }, Ke = ["type"], we = ["title"], ge = { class: "llm-manager-footer" }, Se = {
+  __name: "StoredKeysManager",
+  emits: ["close", "keysUpdated"],
+  setup(Ne, { emit: P }) {
+    const w = P, _ = W, {
+      getAllStoredKeys: M,
+      getStoredKey: N,
+      storeKey: C,
+      deleteStoredKey: F,
+      hasStoredKey: L
+    } = Q(), y = v({}), r = v({}), a = v({}), f = v(!1), i = v(""), u = v(""), m = v(!1), k = (e) => L(e), h = () => {
+      const e = M(), t = {};
+      for (const [o, l] of Object.entries(e)) {
+        let n = o, g = l.providerType || o;
+        if (l.providerType === "custom")
+          if (l.providerName)
+            n = l.providerName;
+          else if (l.serviceEndpoint)
+            try {
+              n = `Custom (${new URL(l.serviceEndpoint).hostname})`;
+            } catch {
+              n = "Custom Provider";
+            }
+          else
+            n = "Custom Provider";
+        else _[g] && (n = _[g].name);
+        t[o] = {
+          maskedKey: X(l.apiKey),
+          storedAt: l.storedAt,
+          providerType: l.providerType || o,
+          serviceEndpoint: l.serviceEndpoint,
+          providerName: l.providerName,
+          displayName: n
+        }, r.value[o] || (r.value[o] = ""), a.value[o] === void 0 && (a.value[o] = !1);
+      }
+      y.value = t;
+    }, E = (e) => {
+      var o;
+      const t = y.value[e];
+      return (t == null ? void 0 : t.displayName) || ((o = _[e]) == null ? void 0 : o.name) || e;
+    }, O = (e) => new Date(e).toLocaleDateString(), x = (e) => {
+      a.value[e] = !a.value[e], a.value[e] && !r.value[e] && (r.value[e] = N(e) || "");
+    }, A = (e) => {
+      const t = r.value[e];
+      if (!t || !t.trim()) {
+        r.value[e] = "";
+        return;
+      }
+      const o = N(e);
+      if (t !== o) {
+        const l = y.value[e], n = {
+          providerType: l.providerType,
+          ...l.serviceEndpoint && { serviceEndpoint: l.serviceEndpoint },
+          ...l.providerName && { providerName: l.providerName }
+        };
+        C(e, t, n) && (h(), w("keysUpdated"));
+      }
+    }, B = (e) => {
+      r.value[e] = "", a.value[e] = !1;
+    }, H = (e) => {
+      const t = E(e);
+      confirm(`Delete stored API key for ${t}?
+
+This action cannot be undone.`) && F(e) && (h(), w("keysUpdated"));
+    }, $ = () => {
+      if (!i.value || !u.value.trim()) return;
+      const e = i.value === "custom" ? `custom_${Date.now()}_${Math.random().toString(36).substr(2, 9)}` : i.value, t = { providerType: i.value };
+      C(e, u.value, t) && (h(), w("keysUpdated"), i.value = "", u.value = "", m.value = !1, f.value = !1);
+    }, T = () => {
+      i.value = "", u.value = "", m.value = !1, f.value = !1;
+    }, j = () => {
+      f.value = !0, J(() => {
+        const e = document.querySelector(".llm-key-item:last-child");
+        e && e.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      });
+    };
+    return R([i, u], ([e, t]) => {
+      e && t && t.trim() && setTimeout(() => {
+        i.value === e && u.value === t && $();
+      }, 500);
+    }), G(() => {
+      h();
+    }), (e, t) => (c(), d("div", Z, [
+      s("div", I, [
+        t[5] || (t[5] = s("h3", null, "Stored API Keys", -1)),
+        s("button", {
+          class: "llm-btn llm-btn--ghost llm-btn--sm llm-close-btn",
+          onClick: t[0] || (t[0] = (o) => e.$emit("close"))
+        }, "×")
+      ]),
+      s("div", ee, [
+        s("div", te, [
+          Object.keys(y.value).length === 0 && !f.value ? (c(), d("div", le, [...t[6] || (t[6] = [
+            s("p", null, "No API keys stored yet.", -1),
+            s("small", null, "Keys are automatically stored when you save a provider configuration.", -1)
+          ])])) : b("", !0),
+          Object.keys(y.value).length > 0 || f.value ? (c(), d("div", se, [
+            (c(!0), d(D, null, V(y.value, (o, l) => (c(), d("div", {
+              key: l,
+              class: "llm-key-item"
+            }, [
+              s("div", oe, [
+                s("div", ne, [
+                  s("div", ie, [
+                    s("div", re, p(E(l)), 1),
+                    s("span", ae, p(O(o.storedAt)), 1)
+                  ]),
+                  o.serviceEndpoint ? (c(), d("div", de, [
+                    s("small", null, p(o.serviceEndpoint), 1)
+                  ])) : b("", !0),
+                  s("div", ce, [
+                    S(s("input", {
+                      "onUpdate:modelValue": (n) => r.value[l] = n,
+                      type: a.value[l] ? "text" : "password",
+                      class: "llm-form-control llm-key-input-inline",
+                      placeholder: o.maskedKey,
+                      onKeyup: [
+                        K((n) => A(l), ["enter"]),
+                        K((n) => B(l), ["escape"])
+                      ],
+                      onBlur: (n) => A(l)
+                    }, null, 40, ue), [
+                      [U, r.value[l]]
+                    ]),
+                    s("button", {
+                      type: "button",
+                      class: "llm-btn llm-btn--ghost llm-btn--sm",
+                      onClick: (n) => x(l),
+                      title: a.value[l] ? "Hide key" : "Show key"
+                    }, p(a.value[l] ? "Hide" : "Show"), 9, me),
+                    s("button", {
+                      class: "llm-btn llm-btn--sm llm-btn--danger",
+                      onClick: (n) => H(l),
+                      title: "Delete key"
+                    }, " Delete ", 8, ve)
+                  ])
+                ])
+              ])
+            ]))), 128)),
+            f.value ? (c(), d("div", pe, [
+              s("div", ye, [
+                s("div", fe, [
+                  s("div", _e, [
+                    S(s("select", {
+                      "onUpdate:modelValue": t[1] || (t[1] = (o) => i.value = o),
+                      class: "llm-form-control llm-provider-select"
+                    }, [
+                      t[7] || (t[7] = s("option", { value: "" }, "Select provider type...", -1)),
+                      (c(!0), d(D, null, V(q(_), (o, l) => (c(), d("option", {
+                        key: l,
+                        value: l,
+                        disabled: l !== "custom" && k(l)
+                      }, p(o.name) + " " + p(l !== "custom" && k(l) ? "(already stored)" : ""), 9, he))), 128))
+                    ], 512), [
+                      [z, i.value]
+                    ])
+                  ]),
+                  s("div", be, [
+                    S(s("input", {
+                      "onUpdate:modelValue": t[2] || (t[2] = (o) => u.value = o),
+                      type: m.value ? "text" : "password",
+                      class: "llm-form-control llm-key-input-inline",
+                      placeholder: "Enter API key",
+                      onKeyup: [
+                        K($, ["enter"]),
+                        K(T, ["escape"])
+                      ]
+                    }, null, 40, Ke), [
+                      [U, u.value]
+                    ]),
+                    s("button", {
+                      type: "button",
+                      class: "llm-btn llm-btn--ghost llm-btn--sm",
+                      onClick: t[3] || (t[3] = (o) => m.value = !m.value),
+                      title: m.value ? "Hide key" : "Show key"
+                    }, p(m.value ? "Hide" : "Show"), 9, we),
+                    s("button", {
+                      class: "llm-btn llm-btn--sm llm-btn--danger",
+                      onClick: T,
+                      title: "Cancel"
+                    }, " Cancel ")
+                  ])
+                ])
+              ])
+            ])) : b("", !0)
+          ])) : b("", !0)
+        ])
+      ]),
+      s("div", ge, [
+        s("button", {
+          class: "llm-btn llm-btn--secondary",
+          onClick: j
+        }, " Add New Key "),
+        t[8] || (t[8] = s("div", { class: "llm-footer-spacer" }, null, -1)),
+        s("button", {
+          class: "llm-btn llm-btn--ghost",
+          onClick: t[4] || (t[4] = (o) => e.$emit("close"))
+        }, " Close ")
+      ])
+    ]));
+  }
+}, De = /* @__PURE__ */ Y(Se, [["__scopeId", "data-v-dd3230e5"]]);
+export {
+  De as default
+};

package/dist/vue/index.js

@@ -0,0 +1,17 @@
+import { LLMPlugin as r, LLM_CLIENT_SYMBOL as o, LLM_CONFIG_SYMBOL as t, LLM_KEYSTORE_SYMBOL as a, createLLM as M } from "./plugin.js";
+import { createDefaultConfig as l, useLLM as d } from "./useLLM.js";
+import { default as S } from "./components/ProviderSelector.vue.js";
+import { default as m } from "./components/LLMConfigModal.vue.js";
+import { default as s } from "./components/StoredKeysManager.vue.js";
+export {
+  m as LLMConfigModal,
+  r as LLMPlugin,
+  o as LLM_CLIENT_SYMBOL,
+  t as LLM_CONFIG_SYMBOL,
+  a as LLM_KEYSTORE_SYMBOL,
+  S as ProviderSelector,
+  s as StoredKeysManager,
+  l as createDefaultConfig,
+  M as createLLM,
+  d as useLLM
+};

package/dist/vue/plugin.js

@@ -0,0 +1,26 @@
+import { LLMClient as L } from "../core/LLMClient.js";
+import { ConfigStore as c } from "../core/configStore.js";
+import { KeyStore as i } from "../core/keyStore.js";
+import { LocalStorageAdapter as l } from "../core/storageAdapter.js";
+const S = Symbol("LLM_CLIENT"), a = Symbol("LLM_CONFIG"), m = Symbol("LLM_KEYSTORE");
+function s(e = {}) {
+  const o = e.namespace || "llm", t = e.storageAdapter || new l(o), r = new c({ storageAdapter: t }), n = new i(t);
+  return { client: new L({ configStore: r, logger: e.logger }), configStore: r, keyStore: n };
+}
+const y = {
+  install(e, o = {}) {
+    const { client: t, configStore: r, keyStore: n } = s(o);
+    if (e.provide(S, t), e.provide(a, r), e.provide(m, n), o.autoInit)
+      try {
+        t.ensureInitialized();
+      } catch {
+      }
+  }
+};
+export {
+  y as LLMPlugin,
+  S as LLM_CLIENT_SYMBOL,
+  a as LLM_CONFIG_SYMBOL,
+  m as LLM_KEYSTORE_SYMBOL,
+  s as createLLM
+};

package/dist/vue/useLLM.js

@@ -0,0 +1,137 @@
+import { inject as f, ref as c } from "vue";
+import { LLM_CLIENT_SYMBOL as U, LLM_CONFIG_SYMBOL as Y, LLM_KEYSTORE_SYMBOL as B } from "./plugin.js";
+import { createProvider as D } from "../providers/factory.js";
+function S() {
+  const o = f(U), i = f(Y), n = f(B);
+  if (!o || !i)
+    throw new Error("LLM not provided. Did you install the LLMPlugin?");
+  const u = c(!1), a = c(""), l = c("");
+  async function g(e, t = {}) {
+    u.value = !0, a.value = "", l.value = "";
+    try {
+      return await o.stream({ messages: e, ...t }, (s) => {
+        a.value = s.fullContent || "", l.value = s.fullThinking || "";
+      });
+    } finally {
+      u.value = !1;
+    }
+  }
+  function p() {
+    return i.getEnabledConfigs();
+  }
+  function m() {
+    const e = i.listConfigs();
+    return Object.entries(e).filter(([t, r]) => r && r.provider && r.baseUrl).map(([t, r]) => ({ id: t, ...r }));
+  }
+  function C() {
+    return i.getActiveConfig();
+  }
+  function d() {
+    return i.getActiveProviderId();
+  }
+  function v(e) {
+    return i.setActiveProviderId(e), !0;
+  }
+  function L(e, t) {
+    const r = i.saveConfig(e, t);
+    if (r && t.apiKey && t.provider && n) {
+      const s = t.provider === "custom" ? e : t.provider, w = {
+        providerType: t.provider,
+        ...t.provider === "custom" && t.baseUrl && { serviceEndpoint: t.baseUrl },
+        ...t.provider === "custom" && t.name && { providerName: t.name }
+      };
+      n.set(s, t.apiKey, w);
+    }
+    return r;
+  }
+  function b(e) {
+    return i.deleteConfig(e);
+  }
+  function M(e) {
+    const t = i.getConfig(e);
+    return t ? (t.enabled = !0, i.saveConfig(e, t)) : !1;
+  }
+  function A(e) {
+    const t = i.getConfig(e);
+    if (!t) return !1;
+    t.enabled = !1;
+    const r = i.saveConfig(e, t);
+    return d() === e && v(null), r;
+  }
+  async function I(e, t) {
+    return D(e, t).discoverModels();
+  }
+  async function K(e) {
+    return o.testConnection(e);
+  }
+  async function h() {
+    return o.refresh();
+  }
+  function P(e) {
+    return (n == null ? void 0 : n.get(e)) || null;
+  }
+  function y(e) {
+    return (n == null ? void 0 : n.has(e)) || !1;
+  }
+  function E() {
+    return (n == null ? void 0 : n.getAll()) || {};
+  }
+  function O(e, t, r = {}) {
+    return (n == null ? void 0 : n.set(e, t, r)) || !1;
+  }
+  function T(e) {
+    return (n == null ? void 0 : n.delete(e)) || !1;
+  }
+  function _(e) {
+    return (n == null ? void 0 : n.meta(e)) || null;
+  }
+  return {
+    // Core objects
+    client: o,
+    configStore: i,
+    keyStore: n,
+    // Streaming
+    stream: g,
+    isStreaming: u,
+    streamContent: a,
+    streamThinking: l,
+    // Config management
+    getEnabledConfigs: p,
+    getAllConfigs: m,
+    getActiveConfig: C,
+    getActiveProviderId: d,
+    setActiveProviderId: v,
+    saveConfig: L,
+    deleteConfig: b,
+    enableProvider: M,
+    disableProvider: A,
+    getAvailableModels: I,
+    testConnection: K,
+    refresh: h,
+    // Key management
+    getStoredKey: P,
+    hasStoredKey: y,
+    getAllStoredKeys: E,
+    storeKey: O,
+    deleteStoredKey: T,
+    getStoredKeyMeta: _
+  };
+}
+function F(o) {
+  return {
+    name: "",
+    provider: o,
+    baseUrl: "",
+    apiKey: "",
+    model: "",
+    temperature: 0.7,
+    maxTokens: 4096,
+    enableThinking: !1,
+    enabled: !0,
+    configuredAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+export {
+  F as createDefaultConfig,
+  S as useLLM
+};

package/dist/vue-llm.css

@@ -0,0 +1 @@
+.llm-provider-selector[data-v-9fd186c2]{font-size:var(--llm-font-size-sm, .85rem)}.llm-provider-select[data-v-9fd186c2]{padding:var(--llm-spacing-xs, .25rem) var(--llm-spacing-sm, .5rem);border:1px solid var(--llm-border, #444);border-radius:var(--llm-radius-sm, 4px);background:var(--llm-bg, #111);color:var(--llm-text, #ddd);font-family:inherit;font-size:inherit;cursor:pointer;min-width:120px;max-width:180px}.llm-provider-select[data-v-9fd186c2]:focus{outline:none;border-color:var(--llm-accent, #6c7cff)}.llm-provider-select[data-v-9fd186c2]:hover{border-color:var(--llm-border-hover, #666)}.config-option[data-v-9fd186c2]{font-style:italic;border-top:1px solid var(--llm-border, #444)}.llm-stored-keys-manager[data-v-dd3230e5]{background:var(--llm-bg, #181a1f);border-radius:var(--llm-radius-md, 8px);max-height:80vh;display:flex;flex-direction:column;color:var(--llm-text, #e6e8ea)}.llm-manager-header[data-v-dd3230e5]{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--llm-border, #33383f);flex-shrink:0}.llm-manager-header h3[data-v-dd3230e5]{margin:0;font-size:1.25rem;font-weight:600;color:var(--llm-text, #e6e8ea)}.llm-close-btn[data-v-dd3230e5]{font-size:1.5rem;line-height:1}.llm-close-btn[data-v-dd3230e5]:hover{opacity:.7}.llm-manager-body[data-v-dd3230e5]{flex:1;overflow:hidden;min-height:0;display:flex;flex-direction:column}.llm-scrollable-content[data-v-dd3230e5]{flex:1;overflow-y:auto;padding:1.5rem;min-height:0}.llm-empty-keys[data-v-dd3230e5]{text-align:center;padding:2rem 1rem;color:var(--llm-text-dim, #9aa0a6)}.llm-empty-keys p[data-v-dd3230e5]{margin:0 0 .5rem;font-size:1rem;font-weight:500}.llm-empty-keys small[data-v-dd3230e5]{font-size:.9rem;opacity:.7}.llm-keys-list[data-v-dd3230e5]{margin-bottom:1rem}.llm-key-item[data-v-dd3230e5]{border:1px solid var(--llm-border, #33383f);border-radius:var(--llm-radius-sm, 6px);margin-bottom:.75rem;background:var(--llm-bg-soft, #1f2228);overflow:hidden}.llm-key-header[data-v-dd3230e5]{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem}.llm-provider-info[data-v-dd3230e5]{flex:1;display:flex;flex-direction:column;gap:.5rem}.llm-provider-header[data-v-dd3230e5]{display:flex;justify-content:space-between;align-items:center}.llm-provider-name[data-v-dd3230e5]{font-weight:600;font-size:.9rem;color:var(--llm-text, #e6e8ea)}.llm-service-endpoint[data-v-dd3230e5]{margin-top:.25rem}.llm-service-endpoint small[data-v-dd3230e5]{color:var(--llm-text-dim, #9aa0a6);font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.75rem}.llm-provider-select[data-v-dd3230e5]{font-weight:600;font-size:.9rem;min-width:200px}.llm-key-input-row[data-v-dd3230e5]{display:flex;gap:.5rem;align-items:center}.llm-key-input-inline[data-v-dd3230e5]{flex:1;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.8rem;padding:.4rem .6rem}.llm-stored-date[data-v-dd3230e5]{font-size:.75rem;color:var(--llm-text-dim, #9aa0a6)}.llm-manager-footer[data-v-dd3230e5]{display:flex;align-items:center;gap:.5rem;padding:1.5rem;border-top:1px solid var(--llm-border, #33383f);flex-shrink:0}.llm-footer-spacer[data-v-dd3230e5]{flex:1}.llm-btn[data-v-dd3230e5]{padding:.5rem 1rem;border-radius:var(--llm-radius-sm, 4px);border:1px solid var(--llm-border, #33383f);background:var(--llm-bg-soft, #1f2228);color:var(--llm-text, #e6e8ea);cursor:pointer;font-size:var(--llm-font-size-sm, .85rem);transition:all .15s ease}.llm-btn[data-v-dd3230e5]:hover:not(:disabled){border-color:var(--llm-border-hover, #4b525c);background:var(--llm-bg-mute, #242830)}.llm-btn--sm[data-v-dd3230e5]{padding:.25rem .5rem;font-size:var(--llm-font-size-xs, .75rem)}.llm-btn--secondary[data-v-dd3230e5]{background:var(--llm-bg-mute, #242830);border-color:var(--llm-accent, #6366f1);color:var(--llm-accent, #6366f1)}.llm-btn--ghost[data-v-dd3230e5]{background:transparent;border-color:transparent}.llm-btn--ghost[data-v-dd3230e5]:hover:not(:disabled){background:var(--llm-bg-mute, #242830)}.llm-btn--danger[data-v-dd3230e5]{background:var(--llm-error, #ef4444);border-color:var(--llm-error, #ef4444);color:#fff}.llm-form-control[data-v-dd3230e5]{width:100%;padding:.5rem .75rem;border:1px solid var(--llm-border, #33383f);border-radius:var(--llm-radius-sm, 4px);background:var(--llm-bg, #181a1f);color:var(--llm-text, #e6e8ea);font-size:var(--llm-font-size-sm, .85rem)}.llm-form-control[data-v-dd3230e5]:focus{outline:none;border-color:var(--llm-accent, #6366f1)}@media(max-width:768px){.llm-manager-header[data-v-dd3230e5],.llm-manager-footer[data-v-dd3230e5],.llm-scrollable-content[data-v-dd3230e5]{padding:1rem}.llm-key-header[data-v-dd3230e5]{flex-direction:column;align-items:stretch;gap:1rem;padding:.75rem}.llm-key-input-row[data-v-dd3230e5]{flex-direction:column;align-items:stretch}.llm-provider-select[data-v-dd3230e5]{min-width:auto}}@media(max-width:480px){.llm-manager-header h3[data-v-dd3230e5]{font-size:1.1rem}}.llm-modal-overlay[data-v-a26b0717]{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.llm-modal[data-v-a26b0717]{background:var(--llm-bg, #181a1f);border:2px solid var(--llm-border, #33383f);border-radius:var(--llm-radius-md, 8px);width:90%;max-width:700px;max-height:90%;position:relative;display:flex;flex-direction:column;color:var(--llm-text, #e6e8ea)}.llm-modal-header[data-v-a26b0717]{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--llm-border, #33383f);flex-shrink:0}.llm-modal-header h2[data-v-a26b0717]{margin:0;color:var(--llm-text, #e6e8ea);font-size:1.25rem}.llm-close-btn[data-v-a26b0717]{font-size:1.5rem;line-height:1}.llm-close-btn[data-v-a26b0717]:hover{opacity:.7}.llm-modal-body[data-v-a26b0717]{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}.llm-btn[data-v-a26b0717]{padding:.5rem 1rem;border-radius:var(--llm-radius-sm, 4px);border:1px solid var(--llm-border, #33383f);background:var(--llm-bg-soft, #1f2228);color:var(--llm-text, #e6e8ea);cursor:pointer;font-size:var(--llm-font-size-sm, .85rem);transition:all .15s ease}.llm-btn[data-v-a26b0717]:hover:not(:disabled){border-color:var(--llm-border-hover, #4b525c);background:var(--llm-bg-mute, #242830)}.llm-btn[data-v-a26b0717]:disabled{opacity:.5;cursor:not-allowed}.llm-btn--sm[data-v-a26b0717]{padding:.25rem .5rem;font-size:var(--llm-font-size-xs, .75rem)}.llm-btn--primary[data-v-a26b0717]{background:var(--llm-accent, #6366f1);border-color:var(--llm-accent, #6366f1);color:var(--llm-bg, #181a1f)}.llm-btn--primary[data-v-a26b0717]:hover:not(:disabled){filter:brightness(1.1)}.llm-btn--secondary[data-v-a26b0717]{background:var(--llm-bg-mute, #242830);border-color:var(--llm-accent, #6366f1);color:var(--llm-accent, #6366f1)}.llm-btn--ghost[data-v-a26b0717]{background:transparent;border-color:transparent}.llm-btn--ghost[data-v-a26b0717]:hover:not(:disabled){background:var(--llm-bg-mute, #242830)}.llm-btn--danger[data-v-a26b0717]{background:var(--llm-error, #ef4444);border-color:var(--llm-error, #ef4444);color:#fff}.llm-btn--danger[data-v-a26b0717]:hover:not(:disabled){filter:brightness(1.1)}.llm-form-control[data-v-a26b0717]{width:100%;padding:.5rem .75rem;border:1px solid var(--llm-border, #33383f);border-radius:var(--llm-radius-sm, 4px);background:var(--llm-bg, #181a1f);color:var(--llm-text, #e6e8ea);font-size:var(--llm-font-size-sm, .85rem)}.llm-form-control[data-v-a26b0717]:focus{outline:none;border-color:var(--llm-accent, #6366f1)}.llm-form-control[data-v-a26b0717]:disabled{opacity:.6;cursor:not-allowed}.llm-provider-list[data-v-a26b0717]{margin-bottom:2rem;padding-bottom:1.5rem}.llm-provider-list[data-v-a26b0717]:not(:last-child){border-bottom:1px solid var(--llm-border, #33383f)}.llm-provider-list h3[data-v-a26b0717]{margin:0 0 1rem;color:var(--llm-text, #e6e8ea);font-size:1rem}.llm-provider-item[data-v-a26b0717]{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid var(--llm-border, #33383f);border-radius:var(--llm-radius-sm, 4px);margin-bottom:.5rem;background:var(--llm-bg-soft, #1f2228);cursor:pointer;transition:all .15s ease;position:relative}.llm-provider-item[data-v-a26b0717]:hover{background:var(--llm-bg-mute, #242830);border-color:var(--llm-border-hover, #4b525c)}.llm-provider-item.active[data-v-a26b0717]{border-color:var(--llm-accent, #6366f1);background:var(--llm-bg, #181a1f);box-shadow:0 0 0 1px var(--llm-border, #33383f)}.llm-provider-item.disabled[data-v-a26b0717]{opacity:.6;cursor:not-allowed}.llm-provider-info[data-v-a26b0717]{flex:1}.llm-provider-name-row[data-v-a26b0717]{display:flex;align-items:center;margin-bottom:.25rem}.llm-provider-name[data-v-a26b0717]{font-weight:500;color:var(--llm-text, #e6e8ea);font-size:.95rem}.llm-active-badge[data-v-a26b0717],.llm-judge-badge[data-v-a26b0717]{position:absolute;top:-12px;background:var(--llm-accent, #6366f1);color:var(--llm-bg, #181a1f);font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;z-index:1}.llm-active-badge[data-v-a26b0717]{left:16px}.llm-judge-badge[data-v-a26b0717]{left:80px}.llm-disabled-badge[data-v-a26b0717]{background:var(--llm-border, #33383f);color:var(--llm-text, #e6e8ea);font-size:.65rem;font-weight:500;padding:.1rem .4rem;border-radius:2px;margin-left:.5rem;text-transform:uppercase}.llm-provider-details-row[data-v-a26b0717]{display:flex;align-items:center;gap:.75rem}.llm-test-status-btn[data-v-a26b0717]{background:none;border:1px solid var(--llm-border, #33383f);color:var(--llm-text, #e6e8ea);font-size:.7rem;font-weight:500;padding:.25rem .5rem;border-radius:3px;cursor:pointer;transition:all .15s ease;min-width:60px;text-align:center}.llm-test-status-btn.llm-test-default[data-v-a26b0717]:hover:not(:disabled){background:var(--llm-bg-mute, #242830);border-color:var(--llm-accent, #6366f1)}.llm-test-status-btn.llm-test-testing[data-v-a26b0717]{border-color:var(--llm-border-hover, #4b525c)}.llm-test-status-btn.llm-test-success[data-v-a26b0717]{border-color:var(--llm-success, #10b981);color:var(--llm-success, #10b981)}.llm-test-status-btn.llm-test-failed[data-v-a26b0717]{border-color:var(--llm-error, #ef4444);color:var(--llm-error, #ef4444)}.llm-provider-details[data-v-a26b0717]{font-size:.8rem;color:var(--llm-text-dim, #9aa0a6);flex:1}.llm-provider-actions[data-v-a26b0717]{display:flex;gap:.5rem;align-items:center}.llm-form-grid[data-v-a26b0717]{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}.llm-field-label[data-v-a26b0717]{margin-bottom:0;white-space:nowrap;color:var(--llm-text, #e6e8ea);font-size:var(--llm-font-size-sm, .85rem)}.llm-api-key-field[data-v-a26b0717]{display:flex;flex-direction:column}.llm-api-key-input-row[data-v-a26b0717]{display:flex;gap:.5rem;align-items:stretch}.llm-api-key-input-row .llm-form-control[data-v-a26b0717]{flex:1}.llm-api-key-field .llm-security-note[data-v-a26b0717]{margin-top:.5rem}.llm-model-selector[data-v-a26b0717]{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap}.llm-model-selector .llm-form-control[data-v-a26b0717]{flex:1}.llm-refresh-btn[data-v-a26b0717]{min-width:4rem;flex-shrink:0}.llm-model-error[data-v-a26b0717]{width:100%;font-size:.75rem;color:var(--llm-error, #ef4444)}.llm-thinking-toggle[data-v-a26b0717]{display:block;width:100%;margin-top:.5rem}.llm-temperature-field[data-v-a26b0717]{display:flex;flex-direction:column}.llm-field-note[data-v-a26b0717]{display:block;margin-top:.5rem;font-size:.75rem;color:var(--llm-text-dim, #9aa0a6);font-style:italic}.llm-checkbox-label[data-v-a26b0717]{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:500;color:var(--llm-text, #e6e8ea);font-size:var(--llm-font-size-sm, .85rem)}.llm-checkbox[data-v-a26b0717]{width:1rem;height:1rem;cursor:pointer}.llm-security-note[data-v-a26b0717]{display:block;font-size:.75rem;color:var(--llm-text-dim, #9aa0a6)}.llm-modal-footer[data-v-a26b0717]{display:flex;align-items:center;gap:.5rem;padding:1.5rem;border-top:1px solid var(--llm-border, #33383f);flex-shrink:0}.llm-footer-spacer[data-v-a26b0717]{flex:1}.llm-empty-state[data-v-a26b0717]{text-align:center;padding:2rem;color:var(--llm-text-dim, #9aa0a6)}.llm-empty-state p[data-v-a26b0717]{margin:.5rem 0;font-size:.9rem}.llm-keys-manager-overlay[data-v-a26b0717]{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1001}.llm-keys-manager-content[data-v-a26b0717]{width:90%;max-width:600px;max-height:80vh;border:2px solid var(--llm-border, #33383f);border-radius:var(--llm-radius-md, 8px);overflow:hidden}@media(max-width:768px){.llm-modal[data-v-a26b0717]{width:95%;margin:1rem}.llm-modal-body[data-v-a26b0717],.llm-modal-header[data-v-a26b0717],.llm-modal-footer[data-v-a26b0717]{padding:1rem}.llm-provider-item[data-v-a26b0717]{flex-direction:column;align-items:stretch;gap:.75rem;padding:.75rem}.llm-provider-actions[data-v-a26b0717]{width:100%;justify-content:flex-end}.llm-form-grid[data-v-a26b0717]{grid-template-columns:1fr;gap:.5rem}.llm-field-label[data-v-a26b0717]{padding-top:0;margin-top:.5rem}.llm-active-badge[data-v-a26b0717],.llm-judge-badge[data-v-a26b0717]{top:-8px;font-size:.55rem;padding:.15rem .4rem}.llm-judge-badge[data-v-a26b0717]{left:66px}}@media(max-width:480px){.llm-modal[data-v-a26b0717]{width:98%;margin:.5rem}.llm-modal-body[data-v-a26b0717],.llm-modal-header[data-v-a26b0717],.llm-modal-footer[data-v-a26b0717]{padding:.75rem}}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@anvaka/vue-llm",
+  "version": "0.1.0",
+  "description": "Browser-only LLM client with provider adapters and Vue 3 components",
+  "type": "module",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./vue": {
+      "import": "./dist/vue/index.js",
+      "default": "./dist/vue/index.js"
+    },
+    "./providers": {
+      "import": "./dist/providers/index.js",
+      "default": "./dist/providers/index.js"
+    },
+    "./styles/variables.css": "./src/styles/variables.css",
+    "./styles/components.css": "./src/styles/components.css"
+    
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.2.0"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ]
+}

package/src/styles/components.css

@@ -0,0 +1,15 @@
+.llm-btn { 
+  padding: var(--llm-spacing-xs, 0.25rem) var(--llm-spacing-sm, 0.5rem);
+  background: transparent; 
+  border: 1px solid var(--llm-border, #444);
+  border-radius: var(--llm-radius-sm, 4px);
+  color: var(--llm-text, #ddd);
+}
+.llm-btn:hover { border-color: var(--llm-border-hover, #666); }
+.llm-input {
+  padding: var(--llm-spacing-xs, 0.25rem) var(--llm-spacing-sm, 0.5rem);
+  border: 1px solid var(--llm-border, #444);
+  border-radius: var(--llm-radius-sm, 4px);
+  background: var(--llm-bg, #111);
+  color: var(--llm-text, #ddd);
+}

package/src/styles/variables.css

@@ -0,0 +1,70 @@
+/**
+ * @anvaka/vue-llm CSS Variables
+ * 
+ * Override these in your app to customize the look of LLM components.
+ * All components use these variables with sensible defaults.
+ */
+:root {
+  /* Background colors */
+  --llm-bg: #181a1f;
+  --llm-bg-soft: #1f2228;
+  --llm-bg-mute: #242830;
+
+  /* Text colors */
+  --llm-text: #e6e8ea;
+  --llm-text-dim: #9aa0a6;
+
+  /* Border colors */
+  --llm-border: #33383f;
+  --llm-border-hover: #4b525c;
+
+  /* Accent/primary color */
+  --llm-accent: #6366f1;
+  --llm-accent-contrast: #ffffff;
+
+  /* Status colors */
+  --llm-error: #ef4444;
+  --llm-warn: #f59e0b;
+  --llm-success: #10b981;
+
+  /* Typography */
+  --llm-font-size-xs: 0.7rem;
+  --llm-font-size-sm: 0.85rem;
+  --llm-font-size-base: 1rem;
+
+  /* Spacing */
+  --llm-spacing-xs: 0.25rem;
+  --llm-spacing-sm: 0.5rem;
+  --llm-spacing-md: 0.75rem;
+  --llm-spacing-lg: 1rem;
+
+  /* Border radius */
+  --llm-radius-sm: 4px;
+  --llm-radius-md: 6px;
+  --llm-radius-lg: 8px;
+}
+
+/* Light theme support */
+html[data-theme='light'],
+[data-theme='light'] {
+  --llm-bg: #ffffff;
+  --llm-bg-soft: #f5f7fa;
+  --llm-bg-mute: #eef1f5;
+  --llm-text: #1d2125;
+  --llm-text-dim: #5e6b77;
+  --llm-border: #d3d8df;
+  --llm-border-hover: #b5bcc5;
+}
+
+/* Respect system preference */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme='dark']) {
+    --llm-bg: #ffffff;
+    --llm-bg-soft: #f5f7fa;
+    --llm-bg-mute: #eef1f5;
+    --llm-text: #1d2125;
+    --llm-text-dim: #5e6b77;
+    --llm-border: #d3d8df;
+    --llm-border-hover: #b5bcc5;
+  }
+}