wc-img-ai 0.0.6 → 0.1.0

package/README.md

@@ -1,62 +1,3 @@
 # AI based img-tags
 
-By simply providing an src to an api that does the AI for you, and you can simply get ai-rendered images anywhere you need based on the alt-attribute.
-
-## Browser Compatibility Note
-
-As of the current state of browser implementations, there are known limitations in Safari when extending native HTML elements, such as `<img>`, using Web Components. This may affect the functionality of AI-based img-tags in Safari. For more details, see the related [WebKit bug report](https://bugs.webkit.org/show_bug.cgi?id=182671).
-
-```html
-<img
-  is="ai-image"
-  src="/api/myimage"
-  alt="a sleeping little kitten"
-  data-fallback="https://placekitten.com/12/12"
-/>
-```
-
-## installation
-
-```bash
-pnpm i wc-img-ai
-```
-
-```html
-<script type="module">
-  import "wc-img-ai"
-</script>
-```
-
-The api server itself needs to receive this body and return a string with the url of the image
-
-### Function: POST
-
-This function sends a request to the an API to generate an image based on a given prompt.
-
-#### Request Body Format
-
-- **prompt** (string): The description or prompt based on which the image will be generated.
-- **width** (number): The width of the desired image in pixels.
-- **height** (number): The height of the desired image in pixels.
-
-#### Example Request Body
-
-```json
-{
-  "prompt": "a sleeping little kitten",
-  "width": 300,
-  "height": 300
-}
-```
-
-#### Server Return
-
-it is expected to return a simple string
-
-```json
-"https://example.com/path/to/generated/image.jpg"
-```
-
-#### Demo
-
-Check it out [running](https://john.ro/lab/img-ai) inside an MDX/Astro framework
+WIP

package/dist/wc-img-ai.js

@@ -1,7 +1,898 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var _a;
+const t$3 = globalThis, e$3 = t$3.ShadowRoot && (void 0 === t$3.ShadyCSS || t$3.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
+let n$4 = class n {
+  constructor(t2, e2, o2) {
+    if (this._$cssResult$ = true, o2 !== s$3)
+      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t2, this.t = e2;
+  }
+  get styleSheet() {
+    let t2 = this.o;
+    const s3 = this.t;
+    if (e$3 && void 0 === t2) {
+      const e2 = void 0 !== s3 && 1 === s3.length;
+      e2 && (t2 = o$4.get(s3)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$4.set(s3, t2));
+    }
+    return t2;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const r$5 = (t2) => new n$4("string" == typeof t2 ? t2 : t2 + "", void 0, s$3), i$3 = (t2, ...e2) => {
+  const o2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s3, o3) => e3 + ((t3) => {
+    if (true === t3._$cssResult$)
+      return t3.cssText;
+    if ("number" == typeof t3)
+      return t3;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(s3) + t2[o3 + 1], t2[0]);
+  return new n$4(o2, t2, s$3);
+}, S$1 = (s3, o2) => {
+  if (e$3)
+    s3.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
+  else
+    for (const e2 of o2) {
+      const o3 = document.createElement("style"), n3 = t$3.litNonce;
+      void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s3.appendChild(o3);
+    }
+}, c$3 = e$3 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+  let e2 = "";
+  for (const s3 of t3.cssRules)
+    e2 += s3.cssText;
+  return r$5(e2);
+})(t2) : t2;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: i$2, defineProperty: e$2, getOwnPropertyDescriptor: r$4, getOwnPropertyNames: h$2, getOwnPropertySymbols: o$3, getPrototypeOf: n$3 } = Object, a$1 = globalThis, c$2 = a$1.trustedTypes, l$1 = c$2 ? c$2.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s3) => t2, u$1 = { toAttribute(t2, s3) {
+  switch (s3) {
+    case Boolean:
+      t2 = t2 ? l$1 : null;
+      break;
+    case Object:
+    case Array:
+      t2 = null == t2 ? t2 : JSON.stringify(t2);
+  }
+  return t2;
+}, fromAttribute(t2, s3) {
+  let i2 = t2;
+  switch (s3) {
+    case Boolean:
+      i2 = null !== t2;
+      break;
+    case Number:
+      i2 = null === t2 ? null : Number(t2);
+      break;
+    case Object:
+    case Array:
+      try {
+        i2 = JSON.parse(t2);
+      } catch (t3) {
+        i2 = null;
+      }
+  }
+  return i2;
+} }, f$3 = (t2, s3) => !i$2(t2, s3), y$1 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$3 };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a$1.litPropertyMetadata ?? (a$1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class b extends HTMLElement {
+  static addInitializer(t2) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t2);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t2, s3 = y$1) {
+    if (s3.state && (s3.attribute = false), this._$Ei(), this.elementProperties.set(t2, s3), !s3.noAccessor) {
+      const i2 = Symbol(), r2 = this.getPropertyDescriptor(t2, i2, s3);
+      void 0 !== r2 && e$2(this.prototype, t2, r2);
+    }
+  }
+  static getPropertyDescriptor(t2, s3, i2) {
+    const { get: e2, set: h2 } = r$4(this.prototype, t2) ?? { get() {
+      return this[s3];
+    }, set(t3) {
+      this[s3] = t3;
+    } };
+    return { get() {
+      return e2 == null ? void 0 : e2.call(this);
+    }, set(s4) {
+      const r2 = e2 == null ? void 0 : e2.call(this);
+      h2.call(this, s4), this.requestUpdate(t2, r2, i2);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t2) {
+    return this.elementProperties.get(t2) ?? y$1;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d$1("elementProperties")))
+      return;
+    const t2 = n$3(this);
+    t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d$1("finalized")))
+      return;
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
+      const t3 = this.properties, s3 = [...h$2(t3), ...o$3(t3)];
+      for (const i2 of s3)
+        this.createProperty(i2, t3[i2]);
+    }
+    const t2 = this[Symbol.metadata];
+    if (null !== t2) {
+      const s3 = litPropertyMetadata.get(t2);
+      if (void 0 !== s3)
+        for (const [t3, i2] of s3)
+          this.elementProperties.set(t3, i2);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [t3, s3] of this.elementProperties) {
+      const i2 = this._$Eu(t3, s3);
+      void 0 !== i2 && this._$Eh.set(i2, t3);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s3) {
+    const i2 = [];
+    if (Array.isArray(s3)) {
+      const e2 = new Set(s3.flat(1 / 0).reverse());
+      for (const s4 of e2)
+        i2.unshift(c$3(s4));
+    } else
+      void 0 !== s3 && i2.push(c$3(s3));
+    return i2;
+  }
+  static _$Eu(t2, s3) {
+    const i2 = s3.attribute;
+    return false === i2 ? void 0 : "string" == typeof i2 ? i2 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    var _a2;
+    this._$Eg = new Promise((t2) => this.enableUpdating = t2), this._$AL = /* @__PURE__ */ new Map(), this._$ES(), this.requestUpdate(), (_a2 = this.constructor.l) == null ? void 0 : _a2.forEach((t2) => t2(this));
+  }
+  addController(t2) {
+    var _a2;
+    (this._$E_ ?? (this._$E_ = /* @__PURE__ */ new Set())).add(t2), void 0 !== this.renderRoot && this.isConnected && ((_a2 = t2.hostConnected) == null ? void 0 : _a2.call(t2));
+  }
+  removeController(t2) {
+    var _a2;
+    (_a2 = this._$E_) == null ? void 0 : _a2.delete(t2);
+  }
+  _$ES() {
+    const t2 = /* @__PURE__ */ new Map(), s3 = this.constructor.elementProperties;
+    for (const i2 of s3.keys())
+      this.hasOwnProperty(i2) && (t2.set(i2, this[i2]), delete this[i2]);
+    t2.size > 0 && (this._$Ep = t2);
+  }
+  createRenderRoot() {
+    const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S$1(t2, this.constructor.elementStyles), t2;
+  }
+  connectedCallback() {
+    var _a2;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), (_a2 = this._$E_) == null ? void 0 : _a2.forEach((t2) => {
+      var _a3;
+      return (_a3 = t2.hostConnected) == null ? void 0 : _a3.call(t2);
+    });
+  }
+  enableUpdating(t2) {
+  }
+  disconnectedCallback() {
+    var _a2;
+    (_a2 = this._$E_) == null ? void 0 : _a2.forEach((t2) => {
+      var _a3;
+      return (_a3 = t2.hostDisconnected) == null ? void 0 : _a3.call(t2);
+    });
+  }
+  attributeChangedCallback(t2, s3, i2) {
+    this._$AK(t2, i2);
+  }
+  _$EO(t2, s3) {
+    var _a2;
+    const i2 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i2);
+    if (void 0 !== e2 && true === i2.reflect) {
+      const r2 = (void 0 !== ((_a2 = i2.converter) == null ? void 0 : _a2.toAttribute) ? i2.converter : u$1).toAttribute(s3, i2.type);
+      this._$Em = t2, null == r2 ? this.removeAttribute(e2) : this.setAttribute(e2, r2), this._$Em = null;
+    }
+  }
+  _$AK(t2, s3) {
+    var _a2;
+    const i2 = this.constructor, e2 = i2._$Eh.get(t2);
+    if (void 0 !== e2 && this._$Em !== e2) {
+      const t3 = i2.getPropertyOptions(e2), r2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== ((_a2 = t3.converter) == null ? void 0 : _a2.fromAttribute) ? t3.converter : u$1;
+      this._$Em = e2, this[e2] = r2.fromAttribute(s3, t3.type), this._$Em = null;
+    }
+  }
+  requestUpdate(t2, s3, i2, e2 = false, r2) {
+    if (void 0 !== t2) {
+      if (i2 ?? (i2 = this.constructor.getPropertyOptions(t2)), !(i2.hasChanged ?? f$3)(e2 ? r2 : this[t2], s3))
+        return;
+      this.C(t2, s3, i2);
+    }
+    false === this.isUpdatePending && (this._$Eg = this._$EP());
+  }
+  C(t2, s3, i2) {
+    this._$AL.has(t2) || this._$AL.set(t2, s3), true === i2.reflect && this._$Em !== t2 && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t2);
+  }
+  async _$EP() {
+    this.isUpdatePending = true;
+    try {
+      await this._$Eg;
+    } catch (t3) {
+      Promise.reject(t3);
+    }
+    const t2 = this.scheduleUpdate();
+    return null != t2 && await t2, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var _a2;
+    if (!this.isUpdatePending)
+      return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [t4, s4] of this._$Ep)
+          this[t4] = s4;
+        this._$Ep = void 0;
+      }
+      const t3 = this.constructor.elementProperties;
+      if (t3.size > 0)
+        for (const [s4, i2] of t3)
+          true !== i2.wrapped || this._$AL.has(s4) || void 0 === this[s4] || this.C(s4, this[s4], i2);
+    }
+    let t2 = false;
+    const s3 = this._$AL;
+    try {
+      t2 = this.shouldUpdate(s3), t2 ? (this.willUpdate(s3), (_a2 = this._$E_) == null ? void 0 : _a2.forEach((t3) => {
+        var _a3;
+        return (_a3 = t3.hostUpdate) == null ? void 0 : _a3.call(t3);
+      }), this.update(s3)) : this._$ET();
+    } catch (s4) {
+      throw t2 = false, this._$ET(), s4;
+    }
+    t2 && this._$AE(s3);
+  }
+  willUpdate(t2) {
+  }
+  _$AE(t2) {
+    var _a2;
+    (_a2 = this._$E_) == null ? void 0 : _a2.forEach((t3) => {
+      var _a3;
+      return (_a3 = t3.hostUpdated) == null ? void 0 : _a3.call(t3);
+    }), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
+  }
+  _$ET() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$Eg;
+  }
+  shouldUpdate(t2) {
+    return true;
+  }
+  update(t2) {
+    this._$Ej && (this._$Ej = this._$Ej.forEach((t3) => this._$EO(t3, this[t3]))), this._$ET();
+  }
+  updated(t2) {
+  }
+  firstUpdated(t2) {
+  }
+}
+b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d$1("elementProperties")] = /* @__PURE__ */ new Map(), b[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1 == null ? void 0 : p$1({ ReactiveElement: b }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.0.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2 = globalThis, i$1 = t$2.trustedTypes, s$2 = i$1 ? i$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$1 = "$lit$", h$1 = `lit$${(Math.random() + "").slice(9)}$`, o$2 = "?" + h$1, n$2 = `<${o$2}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), d = "[ 	\n\f\r]", f$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y = (t2) => (i2, ...s3) => ({ _$litType$: t2, strings: i2, values: s3 }), x = y(1), w = Symbol.for("lit-noChange"), T = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), E = r$3.createTreeWalker(r$3, 129);
+function C(t2, i2) {
+  if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
+    throw Error("invalid template strings array");
+  return void 0 !== s$2 ? s$2.createHTML(i2) : i2;
+}
+const P = (t2, i2) => {
+  const s3 = t2.length - 1, o2 = [];
+  let r2, l2 = 2 === i2 ? "<svg>" : "", c2 = f$2;
+  for (let i3 = 0; i3 < s3; i3++) {
+    const s4 = t2[i3];
+    let a2, u2, d2 = -1, y2 = 0;
+    for (; y2 < s4.length && (c2.lastIndex = y2, u2 = c2.exec(s4), null !== u2); )
+      y2 = c2.lastIndex, c2 === f$2 ? "!--" === u2[1] ? c2 = v : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($.test(u2[2]) && (r2 = RegExp("</" + u2[2], "g")), c2 = m) : void 0 !== u2[3] && (c2 = m) : c2 === m ? ">" === u2[0] ? (c2 = r2 ?? f$2, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m : '"' === u2[3] ? g : p) : c2 === g || c2 === p ? c2 = m : c2 === v || c2 === _ ? c2 = f$2 : (c2 = m, r2 = void 0);
+    const x2 = c2 === m && t2[i3 + 1].startsWith("/>") ? " " : "";
+    l2 += c2 === f$2 ? s4 + n$2 : d2 >= 0 ? (o2.push(a2), s4.slice(0, d2) + e$1 + s4.slice(d2) + h$1 + x2) : s4 + h$1 + (-2 === d2 ? i3 : x2);
+  }
+  return [C(t2, l2 + (t2[s3] || "<?>") + (2 === i2 ? "</svg>" : "")), o2];
+};
+class V {
+  constructor({ strings: t2, _$litType$: s3 }, n3) {
+    let r2;
+    this.parts = [];
+    let c2 = 0, a2 = 0;
+    const u2 = t2.length - 1, d2 = this.parts, [f2, v2] = P(t2, s3);
+    if (this.el = V.createElement(f2, n3), E.currentNode = this.el.content, 2 === s3) {
+      const t3 = this.el.content.firstChild;
+      t3.replaceWith(...t3.childNodes);
+    }
+    for (; null !== (r2 = E.nextNode()) && d2.length < u2; ) {
+      if (1 === r2.nodeType) {
+        if (r2.hasAttributes())
+          for (const t3 of r2.getAttributeNames())
+            if (t3.endsWith(e$1)) {
+              const i2 = v2[a2++], s4 = r2.getAttribute(t3).split(h$1), e2 = /([.?@])?(.*)/.exec(i2);
+              d2.push({ type: 1, index: c2, name: e2[2], strings: s4, ctor: "." === e2[1] ? k : "?" === e2[1] ? H : "@" === e2[1] ? I : R }), r2.removeAttribute(t3);
+            } else
+              t3.startsWith(h$1) && (d2.push({ type: 6, index: c2 }), r2.removeAttribute(t3));
+        if ($.test(r2.tagName)) {
+          const t3 = r2.textContent.split(h$1), s4 = t3.length - 1;
+          if (s4 > 0) {
+            r2.textContent = i$1 ? i$1.emptyScript : "";
+            for (let i2 = 0; i2 < s4; i2++)
+              r2.append(t3[i2], l()), E.nextNode(), d2.push({ type: 2, index: ++c2 });
+            r2.append(t3[s4], l());
+          }
+        }
+      } else if (8 === r2.nodeType)
+        if (r2.data === o$2)
+          d2.push({ type: 2, index: c2 });
+        else {
+          let t3 = -1;
+          for (; -1 !== (t3 = r2.data.indexOf(h$1, t3 + 1)); )
+            d2.push({ type: 7, index: c2 }), t3 += h$1.length - 1;
+        }
+      c2++;
+    }
+  }
+  static createElement(t2, i2) {
+    const s3 = r$3.createElement("template");
+    return s3.innerHTML = t2, s3;
+  }
+}
+function N(t2, i2, s3 = t2, e2) {
+  var _a2, _b;
+  if (i2 === w)
+    return i2;
+  let h2 = void 0 !== e2 ? (_a2 = s3._$Co) == null ? void 0 : _a2[e2] : s3._$Cl;
+  const o2 = c$1(i2) ? void 0 : i2._$litDirective$;
+  return (h2 == null ? void 0 : h2.constructor) !== o2 && ((_b = h2 == null ? void 0 : h2._$AO) == null ? void 0 : _b.call(h2, false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s3, e2)), void 0 !== e2 ? (s3._$Co ?? (s3._$Co = []))[e2] = h2 : s3._$Cl = h2), void 0 !== h2 && (i2 = N(t2, h2._$AS(t2, i2.values), h2, e2)), i2;
+}
+class S {
+  constructor(t2, i2) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t2) {
+    const { el: { content: i2 }, parts: s3 } = this._$AD, e2 = ((t2 == null ? void 0 : t2.creationScope) ?? r$3).importNode(i2, true);
+    E.currentNode = e2;
+    let h2 = E.nextNode(), o2 = 0, n3 = 0, l2 = s3[0];
+    for (; void 0 !== l2; ) {
+      if (o2 === l2.index) {
+        let i3;
+        2 === l2.type ? i3 = new M(h2, h2.nextSibling, this, t2) : 1 === l2.type ? i3 = new l2.ctor(h2, l2.name, l2.strings, this, t2) : 6 === l2.type && (i3 = new L(h2, this, t2)), this._$AV.push(i3), l2 = s3[++n3];
+      }
+      o2 !== (l2 == null ? void 0 : l2.index) && (h2 = E.nextNode(), o2++);
+    }
+    return E.currentNode = r$3, e2;
+  }
+  p(t2) {
+    let i2 = 0;
+    for (const s3 of this._$AV)
+      void 0 !== s3 && (void 0 !== s3.strings ? (s3._$AI(t2, s3, i2), i2 += s3.strings.length - 2) : s3._$AI(t2[i2])), i2++;
+  }
+}
+class M {
+  get _$AU() {
+    var _a2;
+    return ((_a2 = this._$AM) == null ? void 0 : _a2._$AU) ?? this._$Cv;
+  }
+  constructor(t2, i2, s3, e2) {
+    this.type = 2, this._$AH = T, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s3, this.options = e2, this._$Cv = (e2 == null ? void 0 : e2.isConnected) ?? true;
+  }
+  get parentNode() {
+    let t2 = this._$AA.parentNode;
+    const i2 = this._$AM;
+    return void 0 !== i2 && 11 === (t2 == null ? void 0 : t2.nodeType) && (t2 = i2.parentNode), t2;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t2, i2 = this) {
+    t2 = N(this, t2, i2), c$1(t2) ? t2 === T || null == t2 || "" === t2 ? (this._$AH !== T && this._$AR(), this._$AH = T) : t2 !== this._$AH && t2 !== w && this._(t2) : void 0 !== t2._$litType$ ? this.g(t2) : void 0 !== t2.nodeType ? this.$(t2) : u(t2) ? this.T(t2) : this._(t2);
+  }
+  k(t2) {
+    return this._$AA.parentNode.insertBefore(t2, this._$AB);
+  }
+  $(t2) {
+    this._$AH !== t2 && (this._$AR(), this._$AH = this.k(t2));
+  }
+  _(t2) {
+    this._$AH !== T && c$1(this._$AH) ? this._$AA.nextSibling.data = t2 : this.$(r$3.createTextNode(t2)), this._$AH = t2;
+  }
+  g(t2) {
+    var _a2;
+    const { values: i2, _$litType$: s3 } = t2, e2 = "number" == typeof s3 ? this._$AC(t2) : (void 0 === s3.el && (s3.el = V.createElement(C(s3.h, s3.h[0]), this.options)), s3);
+    if (((_a2 = this._$AH) == null ? void 0 : _a2._$AD) === e2)
+      this._$AH.p(i2);
+    else {
+      const t3 = new S(e2, this), s4 = t3.u(this.options);
+      t3.p(i2), this.$(s4), this._$AH = t3;
+    }
+  }
+  _$AC(t2) {
+    let i2 = A.get(t2.strings);
+    return void 0 === i2 && A.set(t2.strings, i2 = new V(t2)), i2;
+  }
+  T(t2) {
+    a(this._$AH) || (this._$AH = [], this._$AR());
+    const i2 = this._$AH;
+    let s3, e2 = 0;
+    for (const h2 of t2)
+      e2 === i2.length ? i2.push(s3 = new M(this.k(l()), this.k(l()), this, this.options)) : s3 = i2[e2], s3._$AI(h2), e2++;
+    e2 < i2.length && (this._$AR(s3 && s3._$AB.nextSibling, e2), i2.length = e2);
+  }
+  _$AR(t2 = this._$AA.nextSibling, i2) {
+    var _a2;
+    for ((_a2 = this._$AP) == null ? void 0 : _a2.call(this, false, true, i2); t2 && t2 !== this._$AB; ) {
+      const i3 = t2.nextSibling;
+      t2.remove(), t2 = i3;
+    }
+  }
+  setConnected(t2) {
+    var _a2;
+    void 0 === this._$AM && (this._$Cv = t2, (_a2 = this._$AP) == null ? void 0 : _a2.call(this, t2));
+  }
+}
+class R {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t2, i2, s3, e2, h2) {
+    this.type = 1, this._$AH = T, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = h2, s3.length > 2 || "" !== s3[0] || "" !== s3[1] ? (this._$AH = Array(s3.length - 1).fill(new String()), this.strings = s3) : this._$AH = T;
+  }
+  _$AI(t2, i2 = this, s3, e2) {
+    const h2 = this.strings;
+    let o2 = false;
+    if (void 0 === h2)
+      t2 = N(this, t2, i2, 0), o2 = !c$1(t2) || t2 !== this._$AH && t2 !== w, o2 && (this._$AH = t2);
+    else {
+      const e3 = t2;
+      let n3, r2;
+      for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++)
+        r2 = N(this, e3[s3 + n3], i2, n3), r2 === w && (r2 = this._$AH[n3]), o2 || (o2 = !c$1(r2) || r2 !== this._$AH[n3]), r2 === T ? t2 = T : t2 !== T && (t2 += (r2 ?? "") + h2[n3 + 1]), this._$AH[n3] = r2;
+    }
+    o2 && !e2 && this.O(t2);
+  }
+  O(t2) {
+    t2 === T ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t2 ?? "");
+  }
+}
+class k extends R {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  O(t2) {
+    this.element[this.name] = t2 === T ? void 0 : t2;
+  }
+}
+class H extends R {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  O(t2) {
+    this.element.toggleAttribute(this.name, !!t2 && t2 !== T);
+  }
+}
+class I extends R {
+  constructor(t2, i2, s3, e2, h2) {
+    super(t2, i2, s3, e2, h2), this.type = 5;
+  }
+  _$AI(t2, i2 = this) {
+    if ((t2 = N(this, t2, i2, 0) ?? T) === w)
+      return;
+    const s3 = this._$AH, e2 = t2 === T && s3 !== T || t2.capture !== s3.capture || t2.once !== s3.once || t2.passive !== s3.passive, h2 = t2 !== T && (s3 === T || e2);
+    e2 && this.element.removeEventListener(this.name, this, s3), h2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
+  }
+  handleEvent(t2) {
+    var _a2;
+    "function" == typeof this._$AH ? this._$AH.call(((_a2 = this.options) == null ? void 0 : _a2.host) ?? this.element, t2) : this._$AH.handleEvent(t2);
+  }
+}
+class L {
+  constructor(t2, i2, s3) {
+    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s3;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t2) {
+    N(this, t2);
+  }
+}
+const Z = t$2.litHtmlPolyfillSupport;
+Z == null ? void 0 : Z(V, M), (t$2.litHtmlVersions ?? (t$2.litHtmlVersions = [])).push("3.1.0");
+const j = (t2, i2, s3) => {
+  const e2 = (s3 == null ? void 0 : s3.renderBefore) ?? i2;
+  let h2 = e2._$litPart$;
+  if (void 0 === h2) {
+    const t3 = (s3 == null ? void 0 : s3.renderBefore) ?? null;
+    e2._$litPart$ = h2 = new M(i2.insertBefore(l(), t3), t3, void 0, s3 ?? {});
+  }
+  return h2._$AI(t2), h2;
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let s$1 = class s extends b {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var _a2;
+    const t2 = super.createRenderRoot();
+    return (_a2 = this.renderOptions).renderBefore ?? (_a2.renderBefore = t2.firstChild), t2;
+  }
+  update(t2) {
+    const i2 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = j(i2, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    var _a2;
+    super.connectedCallback(), (_a2 = this._$Do) == null ? void 0 : _a2.setConnected(true);
+  }
+  disconnectedCallback() {
+    var _a2;
+    super.disconnectedCallback(), (_a2 = this._$Do) == null ? void 0 : _a2.setConnected(false);
+  }
+  render() {
+    return w;
+  }
+};
+s$1._$litElement$ = true, s$1["finalized"] = true, (_a = globalThis.litElementHydrateSupport) == null ? void 0 : _a.call(globalThis, { LitElement: s$1 });
+const r$2 = globalThis.litElementPolyfillSupport;
+r$2 == null ? void 0 : r$2({ LitElement: s$1 });
+(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.0.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1 = (t2) => (e2, o2) => {
+  void 0 !== o2 ? o2.addInitializer(() => {
+    customElements.define(t2, e2);
+  }) : customElements.define(t2, e2);
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$1 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$3 }, r$1 = (t2 = o$1, e2, r2) => {
+  const { kind: n3, metadata: i2 } = r2;
+  let s3 = globalThis.litPropertyMetadata.get(i2);
+  if (void 0 === s3 && globalThis.litPropertyMetadata.set(i2, s3 = /* @__PURE__ */ new Map()), s3.set(r2.name, t2), "accessor" === n3) {
+    const { name: o2 } = r2;
+    return { set(r3) {
+      const n4 = e2.get.call(this);
+      e2.set.call(this, r3), this.requestUpdate(o2, n4, t2);
+    }, init(e3) {
+      return void 0 !== e3 && this.C(o2, void 0, t2), e3;
+    } };
+  }
+  if ("setter" === n3) {
+    const { name: o2 } = r2;
+    return function(r3) {
+      const n4 = this[o2];
+      e2.call(this, r3), this.requestUpdate(o2, n4, t2);
+    };
+  }
+  throw Error("Unsupported decorator location: " + n3);
+};
+function n$1(t2) {
+  return (e2, o2) => "object" == typeof o2 ? r$1(t2, e2, o2) : ((t3, e3, o3) => {
+    const r2 = e3.hasOwnProperty(o3);
+    return e3.constructor.createProperty(o3, r2 ? { ...t3, wrapped: true } : t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
+  })(t2, e2, o2);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
+class i {
+  constructor(t2) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t2, e2, i2) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
+  }
+  _$AS(t2, e2) {
+    return this.update(t2, e2);
+  }
+  update(t2, e2) {
+    return this.render(...e2);
+  }
+}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const f$1 = (o2) => void 0 === o2.strings;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const s2 = (i2, t2) => {
+  var _a2;
+  const e2 = i2._$AN;
+  if (void 0 === e2)
+    return false;
+  for (const i3 of e2)
+    (_a2 = i3._$AO) == null ? void 0 : _a2.call(i3, t2, false), s2(i3, t2);
+  return true;
+}, o = (i2) => {
+  let t2, e2;
+  do {
+    if (void 0 === (t2 = i2._$AM))
+      break;
+    e2 = t2._$AN, e2.delete(i2), i2 = t2;
+  } while (0 === (e2 == null ? void 0 : e2.size));
+}, r = (i2) => {
+  for (let t2; t2 = i2._$AM; i2 = t2) {
+    let e2 = t2._$AN;
+    if (void 0 === e2)
+      t2._$AN = e2 = /* @__PURE__ */ new Set();
+    else if (e2.has(i2))
+      break;
+    e2.add(i2), c(t2);
+  }
+};
+function h(i2) {
+  void 0 !== this._$AN ? (o(this), this._$AM = i2, r(this)) : this._$AM = i2;
+}
+function n2(i2, t2 = false, e2 = 0) {
+  const r2 = this._$AH, h2 = this._$AN;
+  if (void 0 !== h2 && 0 !== h2.size)
+    if (t2)
+      if (Array.isArray(r2))
+        for (let i3 = e2; i3 < r2.length; i3++)
+          s2(r2[i3], false), o(r2[i3]);
+      else
+        null != r2 && (s2(r2, false), o(r2));
+    else
+      s2(this, i2);
+}
+const c = (i2) => {
+  i2.type == t.CHILD && (i2._$AP ?? (i2._$AP = n2), i2._$AQ ?? (i2._$AQ = h));
+};
+class f extends i {
+  constructor() {
+    super(...arguments), this._$AN = void 0;
+  }
+  _$AT(i2, t2, e2) {
+    super._$AT(i2, t2, e2), r(this), this.isConnected = i2._$AU;
+  }
+  _$AO(i2, t2 = true) {
+    var _a2, _b;
+    i2 !== this.isConnected && (this.isConnected = i2, i2 ? (_a2 = this.reconnected) == null ? void 0 : _a2.call(this) : (_b = this.disconnected) == null ? void 0 : _b.call(this)), t2 && (s2(this, i2), o(this));
+  }
+  setValue(t2) {
+    if (f$1(this._$Ct))
+      this._$Ct._$AI(t2, this);
+    else {
+      const i2 = [...this._$Ct._$AH];
+      i2[this._$Ci] = t2, this._$Ct._$AI(i2, this, 0);
+    }
+  }
+  disconnected() {
+  }
+  reconnected() {
+  }
+}
+class SpreadPropsDirective extends f {
+  constructor() {
+    super(...arguments);
+    this.prevData = {};
+  }
+  render(_spreadData) {
+    return T;
+  }
+  update(part, [spreadData]) {
+    var _a2;
+    if (this.element !== part.element) {
+      this.element = part.element;
+    }
+    this.host = ((_a2 = part.options) === null || _a2 === void 0 ? void 0 : _a2.host) || this.element;
+    this.apply(spreadData);
+    this.groom(spreadData);
+    this.prevData = { ...spreadData };
+  }
+  apply(data) {
+    if (!data)
+      return;
+    const { prevData, element } = this;
+    for (const key in data) {
+      const value = data[key];
+      if (value === prevData[key]) {
+        continue;
+      }
+      element[key] = value;
+    }
+  }
+  groom(data) {
+    const { prevData, element } = this;
+    if (!prevData)
+      return;
+    for (const key in prevData) {
+      if (!data || !(key in data) && element[key] === prevData[key]) {
+        element[key] = void 0;
+      }
+    }
+  }
+}
+class SpreadEventsDirective extends SpreadPropsDirective {
+  constructor() {
+    super(...arguments);
+    this.eventData = {};
+  }
+  apply(data) {
+    if (!data)
+      return;
+    for (const key in data) {
+      const value = data[key];
+      if (value === this.eventData[key]) {
+        continue;
+      }
+      this.applyEvent(key, value);
+    }
+  }
+  applyEvent(eventName, eventValue) {
+    const { prevData, element } = this;
+    this.eventData[eventName] = eventValue;
+    const prevHandler = prevData[eventName];
+    if (prevHandler) {
+      element.removeEventListener(eventName, this, eventValue);
+    }
+    element.addEventListener(eventName, this, eventValue);
+  }
+  groom(data) {
+    const { prevData, element } = this;
+    if (!prevData)
+      return;
+    for (const key in prevData) {
+      if (!data || !(key in data) && element[key] === prevData[key]) {
+        this.groomEvent(key, prevData[key]);
+      }
+    }
+  }
+  groomEvent(eventName, eventValue) {
+    const { element } = this;
+    delete this.eventData[eventName];
+    element.removeEventListener(eventName, this, eventValue);
+  }
+  handleEvent(event) {
+    const value = this.eventData[event.type];
+    if (typeof value === "function") {
+      value.call(this.host, event);
+    } else {
+      value.handleEvent(event);
+    }
+  }
+  disconnected() {
+    const { eventData, element } = this;
+    for (const key in eventData) {
+      const name = key.slice(1);
+      const value = eventData[key];
+      element.removeEventListener(name, this, value);
+    }
+  }
+  reconnected() {
+    const { eventData, element } = this;
+    for (const key in eventData) {
+      const name = key.slice(1);
+      const value = eventData[key];
+      element.addEventListener(name, this, value);
+    }
+  }
+}
+class SpreadDirective extends SpreadEventsDirective {
+  apply(data) {
+    if (!data)
+      return;
+    const { prevData, element } = this;
+    for (const key in data) {
+      const value = data[key];
+      if (value === prevData[key]) {
+        continue;
+      }
+      const name = key.slice(1);
+      switch (key[0]) {
+        case "@":
+          this.eventData[name] = value;
+          this.applyEvent(name, value);
+          break;
+        case ".":
+          element[name] = value;
+          break;
+        case "?":
+          if (value) {
+            element.setAttribute(name, "");
+          } else {
+            element.removeAttribute(name);
+          }
+          break;
+        default:
+          if (value != null) {
+            element.setAttribute(key, String(value));
+          } else {
+            element.removeAttribute(key);
+          }
+          break;
+      }
+    }
+  }
+  groom(data) {
+    const { prevData, element } = this;
+    if (!prevData)
+      return;
+    for (const key in prevData) {
+      const name = key.slice(1);
+      if (!data || !(key in data) && element[name] === prevData[key]) {
+        switch (key[0]) {
+          case "@":
+            this.groomEvent(name, prevData[key]);
+            break;
+          case ".":
+            element[name] = void 0;
+            break;
+          case "?":
+            element.removeAttribute(name);
+            break;
+          default:
+            element.removeAttribute(key);
+            break;
+        }
+      }
+    }
+  }
+}
+const spread = e(SpreadDirective);
 const getGeneratedImage = async (endpoint, prompt, width, height) => {
   let response;
   try {
-    const r = await fetch(endpoint, {
+    const r2 = await fetch(endpoint, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
@@ -12,71 +903,151 @@ const getGeneratedImage = async (endpoint, prompt, width, height) => {
         height
       })
     });
-    if (!r.ok) {
+    if (!r2.ok) {
       throw new Error("Network response was not ok");
     }
-    response = await r.text();
+    response = await r2.text();
   } catch (error) {
     console.error("There has been a problem with your fetch operation:", error);
   }
   return response;
 };
-class AIImage extends HTMLImageElement {
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let AiImg = class extends s$1 {
+  // Override createRenderRoot to render in the light DOM
+  // createRenderRoot() {
+  //   return this
+  // }
   constructor() {
-    var _a;
     super();
-    this._fallbackSrc = null;
-    this._prompt = null;
-    this._originalSrc = null;
-    this.svgPlaceholder = null;
-    this._endpoint = null;
-    this.ph_w = 256;
-    this.ph_h = 256;
-    this.getGeneratedImage = getGeneratedImage;
-    this.ph_w = Number(super.getAttribute("width")) || 256;
-    this.ph_h = Number(super.getAttribute("height")) || 256;
-    this.svgPlaceholder = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.ph_w} ${this.ph_h}"><rect width="${this.ph_w}" height="${this.ph_h}" fill="#ddd"/></svg>`;
-    this._originalSrc = this.getAttribute("currentSrc");
-    this._prompt = this.getAttribute("alt");
-    this._endpoint = ((_a = super.getAttribute("src")) == null ? void 0 : _a.toString()) || null;
-    this.addEventListener("error", (_event) => {
-      super.src = "data:image/svg+xml;utf8," + encodeURIComponent(this.svgPlaceholder);
-    });
-    super.src = "data:image/svg+xml;utf8," + encodeURIComponent(this.svgPlaceholder);
+    this.fallback = "";
+    this.width = "";
+    this.height = "";
+    this.src = "";
+    this.alt = "";
+    this.imgsrc = "";
+    this.prompt = "";
+    this.imgAttributes = {};
     setTimeout(async () => {
-      if (!this._prompt) {
+      if (!this.prompt) {
+        this.imgsrc = this.fallback;
         return;
       }
-      const openAiResponse = await this.getGeneratedImage(
-        this._endpoint,
-        this._prompt,
-        this.ph_w,
-        this.ph_h
-      );
-      super.src = openAiResponse || this._fallbackSrc || "";
-    }, 1);
+      try {
+        const openAiResponse = await getGeneratedImage(
+          this.src,
+          this.prompt,
+          Number(this.width),
+          Number(this.height)
+        );
+        this.imgsrc = openAiResponse || this.fallback;
+      } catch (error) {
+        console.error("Error fetching AI image:", error);
+        this.imgsrc = this.fallback;
+      }
+    }, 1e3);
   }
-  static get observedAttributes() {
-    return ["data-fallback"];
+  connectedCallback() {
+    super.connectedCallback();
+    Array.from(this.attributes).forEach((attr) => {
+      if (![
+        "loading",
+        "decoding",
+        "src",
+        "fallback",
+        "prompt",
+        "style",
+        "width",
+        "height"
+      ].includes(attr.name)) {
+        this.imgAttributes[attr.name] = attr.value;
+      }
+      if (attr.name === "width") {
+        this.width = attr.value;
+      }
+      if (attr.name === "height") {
+        this.height = attr.value;
+      }
+    });
   }
-  get src() {
-    return this._originalSrc || "";
+  render() {
+    const hostStyles = {
+      width: `${this.width}px`,
+      height: `${this.height}px`
+    };
+    return x`
+      <style>
+        :host {
+          width: ${hostStyles.width};
+          height: ${hostStyles.height};
+        }
+      </style>
+
+      ${this.imgsrc.length > 0 ? x`
+            <img
+              src=${this.imgsrc}
+              decoding="async"
+              loading="lazy"
+              ${spread(this.imgAttributes)}
+            />
+          ` : ""}
+    `;
   }
-  set src(value) {
-    if (this._originalSrc !== value && this.src !== void 0) {
-      super.src = value;
+};
+AiImg.styles = i$3`
+    :host {
+      display: inline-block;
     }
-  }
-  set fallbackSrc(value) {
-    this._fallbackSrc = value;
-  }
-  attributeChangedCallback(name, _oldValue, newValue) {
-    if (name === "data-fallback") {
-      this.fallbackSrc = newValue;
+
+    img {
+      display: block;
+      -webkit-user-select: none;
+      width: 100%;
+      height: 100%;
+      object-fit: inherit;
+      object-position: inherit;
+      filter: inherit;
+      transform: inherit;
+      transition: inherit;
+      border-radius: inherit;
+      box-shadow: inherit;
+      clip-path: inherit;
     }
-  }
-}
-customElements.define("ai-image", AIImage, { extends: "img" });
+  `;
+__decorateClass([
+  n$1({ type: String })
+], AiImg.prototype, "fallback", 2);
+__decorateClass([
+  n$1({ type: String, reflect: true })
+], AiImg.prototype, "width", 2);
+__decorateClass([
+  n$1({ type: String, reflect: true })
+], AiImg.prototype, "height", 2);
+__decorateClass([
+  n$1({ type: String, reflect: true })
+], AiImg.prototype, "src", 2);
+__decorateClass([
+  n$1({ type: String, reflect: true })
+], AiImg.prototype, "alt", 2);
+__decorateClass([
+  n$1({ type: String, reflect: false })
+], AiImg.prototype, "imgsrc", 2);
+__decorateClass([
+  n$1({ type: String, reflect: true })
+], AiImg.prototype, "prompt", 2);
+AiImg = __decorateClass([
+  t$1("ai-img")
+], AiImg);
 export {
-  AIImage
+  AiImg
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-img-ai",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Use AI to generate images for your img tags.",
   "author": {
     "name": "John Romani",
@@ -34,6 +34,14 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   },
+  "dependencies": {
+    "@lit-labs/observers": "^2.0.2",
+    "@open-wc/lit-helpers": "^0.6.0",
+    "lit": "^3.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

package/types/ai-img.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+export declare class AiImg extends LitElement {
+    fallback: string;
+    width: string;
+    height: string;
+    src: string;
+    alt: string;
+    imgsrc: string;
+    prompt: string;
+    imgAttributes: {
+        [key: string]: string;
+    };
+    connectedCallback(): void;
+    protected constructor();
+    protected render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-img": AiImg;
+    }
+}