wc-img-ai 0.3.0 → 0.3.1

package/README.md

@@ -41,20 +41,21 @@ pnpm add wc-img-ai
 | `src`       | —         | A ready image URL (or data URL). When set, the component acts as a plain `<img>` and never calls the endpoint. Use it when you already have the image. Highest priority. |
 | `endpoint`  | —         | Your server route. Receives the POST below.                                 |
 | `prompt`    | —         | Description used to generate the image.                                     |
-| `image-id`  | ✅ yes    | Storage handle. Provide a known id to fetch a stored image; the server sets it on the element when a new image is minted. |
+| `image-id`  | on mint   | Storage handle. Provide a known id to fetch a stored image; the server sets it on the element when a new image is minted. |
 | `llm`       | —         | Provider/model hint forwarded to the endpoint (e.g. `gemini`, `openai`).    |
-| `ratio`     | —         | Aspect ratio forwarded to the endpoint (e.g. `16:9`, `4:1`).                |
+| `ratio`     | —         | Aspect ratio forwarded to the endpoint (e.g. `16:9`, `4:1`). With `width`, it derives the effective height. |
 | `fallback`  | —         | Image URL shown if nothing resolves. If omitted, a 1×1 transparent PNG is used. |
 | `width`     | ✅ yes    | Intrinsic width (like `<img width>`) — used for the box aspect-ratio and sent to the endpoint. |
-| `height`    | ✅ yes    | Intrinsic height (like `<img height>`).                                     |
+| `height`    | —         | Optional intrinsic height (like `<img height>`); derived when omitted and `width`/`ratio` are set. |
 | `alt`       | ✅ yes    | Alt text, passed to the inner `<img>`.                                       |
 
 ### Sizing & styling — just like a native `<img>`
 
-Set `width`/`height` and style with `class`/CSS; you rarely need inline
-`style`. `width`/`height` become the inner image's content attributes, so the
-browser reserves the box from their aspect-ratio (no layout shift) while CSS
-controls the displayed size:
+Set `width` plus `ratio`, or the native-image-compatible `width`/`height` pair,
+and style with `class`/CSS; you rarely need inline `style`. The effective
+dimensions become the inner image's content attributes, so the browser reserves
+the box from their aspect-ratio (no layout shift) while CSS controls the
+displayed size:
 
 ```html
 <!-- full-width 3:1 banner, rounded, no layout shift -->
@@ -62,6 +63,15 @@ controls the displayed size:
         class="block w-full rounded-xl"></ai-img>
 ```
 
+When `ratio` and `width` are set, `height` is optional and the component derives
+it. An explicit `height` remains authoritative for callers that need an exact
+output box:
+
+```html
+<ai-img endpoint="/api/img" prompt="…" width="1536" ratio="3:1"
+        class="block w-full rounded-xl"></ai-img>
+```
+
 Visual properties bridge the shadow boundary via `inherit`, so utility classes
 like `rounded-xl`, `object-cover`, `shadow-lg` on `<ai-img>` style the image.
 Any other attribute (e.g. `loading`) is passed through to the inner `<img>`.

package/dist/wc-img-ai.js

@@ -947,6 +947,19 @@ const RESERVED_ATTRS = /* @__PURE__ */ new Set([
 const placeholder = (width, height) => "data:image/svg+xml;utf8," + encodeURIComponent(
   `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><rect width="${width}" height="${height}" fill="#ddd"/></svg>`
 );
+const dimensionsFor = (width, height, ratio) => {
+  const ratioMatch = ratio.match(/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/);
+  const ratioWidth = Number(ratioMatch == null ? void 0 : ratioMatch[1]);
+  const ratioHeight = Number(ratioMatch == null ? void 0 : ratioMatch[2]);
+  const numericWidth = Number(width);
+  if (!height && Number.isFinite(numericWidth) && numericWidth > 0 && Number.isFinite(ratioWidth) && ratioWidth > 0 && Number.isFinite(ratioHeight) && ratioHeight > 0) {
+    return {
+      width,
+      height: String(Math.round(numericWidth * (ratioHeight / ratioWidth)))
+    };
+  }
+  return { width, height };
+};
 const _AiImg = class _AiImg extends s$1 {
   constructor() {
     super(...arguments);
@@ -987,6 +1000,7 @@ const _AiImg = class _AiImg extends s$1 {
   }
   start() {
     this.collectPassThroughAttributes();
+    const dimensions = dimensionsFor(this.width, this.height, this.ratio);
     if (this.src) {
       this.resolvedUrl = this.src;
       this.settle(this.src);
@@ -996,7 +1010,7 @@ const _AiImg = class _AiImg extends s$1 {
       this.settleFallback();
       return;
     }
-    this.imgsrc = placeholder(this.width, this.height);
+    this.imgsrc = placeholder(dimensions.width || "1", dimensions.height || "1");
     this.classList.add("spin");
     void this.resolve();
   }
@@ -1008,11 +1022,12 @@ const _AiImg = class _AiImg extends s$1 {
     }
   }
   async resolve() {
+    const dimensions = dimensionsFor(this.width, this.height, this.ratio);
     const result = await resolveImage(this.endpoint, {
       prompt: this.prompt,
       imageId: this.imageId,
-      width: Number(this.width) || void 0,
-      height: Number(this.height) || void 0,
+      width: Number(dimensions.width) || void 0,
+      height: Number(dimensions.height) || void 0,
       llm: this.llm,
       ratio: this.ratio
     });
@@ -1022,6 +1037,7 @@ const _AiImg = class _AiImg extends s$1 {
     }
     if (result.id && result.id !== this.imageId) {
       this.imageId = result.id;
+      this.setAttribute("image-id", result.id);
     }
     this.dispatchEvent(
       new CustomEvent("ai-image", {
@@ -1044,12 +1060,13 @@ const _AiImg = class _AiImg extends s$1 {
     this.settle(this.fallback || TRANSPARENT_PIXEL);
   }
   render() {
+    const dimensions = dimensionsFor(this.width, this.height, this.ratio);
     return x`
       <img
         src=${this.imgsrc}
         alt=${this.alt}
-        width=${this.width || T}
-        height=${this.height || T}
+        width=${dimensions.width || T}
+        height=${dimensions.height || T}
         decoding="async"
         @error=${this.onImgError}
         ${spread(this.imgAttributes)}
@@ -1102,7 +1119,7 @@ __decorateClass([
   n$1({ type: String })
 ], AiImg.prototype, "prompt", 2);
 __decorateClass([
-  n$1({ type: String, attribute: "image-id", reflect: true })
+  n$1({ type: String, attribute: "image-id" })
 ], AiImg.prototype, "imageId", 2);
 __decorateClass([
   n$1({ type: String })
@@ -1117,7 +1134,7 @@ __decorateClass([
   n$1({ type: String, reflect: true })
 ], AiImg.prototype, "width", 2);
 __decorateClass([
-  n$1({ type: String, reflect: true })
+  n$1({ type: String })
 ], AiImg.prototype, "height", 2);
 __decorateClass([
   n$1({ type: String, reflect: true })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-img-ai",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Use AI to generate images for your img tags.",
   "author": {
     "name": "John Romani",

package/types/ai-img.d.ts

@@ -10,11 +10,11 @@ export declare class AiImg extends LitElement {
     endpoint: string;
     /** Description used to generate the image (omit when fetching a known id). */
     prompt: string;
-    /** Storage handle. Reflected: set by the server when a new image is minted. */
+    /** Storage handle. Reflected after the server mints a new image. */
     imageId: string;
     /** Provider/model hint forwarded to the endpoint (e.g. "gemini", "openai"). */
     llm: string;
-    /** Aspect ratio forwarded to the endpoint (e.g. "16:9", "4:1"). */
+    /** Aspect ratio forwarded to the endpoint and used to derive an omitted height. */
     ratio: string;
     /** Shown when the image cannot be resolved (otherwise a 1x1 transparent PNG). */
     fallback: string;