@penn-libraries/web 1.1.0 → 1.1.1-dev.2

package/dist/components/pennlibs-iiif-img.js

@@ -0,0 +1,289 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pennlibs-fallback-img2.js';
+
+const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
+
+const PIXEL_DENSITIES = [1, 1.5, 2];
+const IIIFImg = /*@__PURE__*/ proxyCustomElement(class IIIFImg extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.
+         * Defines the rectangular portion of the underlying image to return.
+         *
+         * `full`: The full image is returned, without any cropping.
+         *
+         * `square`: A square area where width and height equal the shorter dimension.
+         *
+         * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies
+         * a centered crop based on the source image dimensions and sets the CSS aspect-ratio
+         * property for layout reservation.
+         *
+         * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).
+         *
+         * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.
+         *
+         * @default 'full'
+         */
+        this.region = 'full';
+        /**
+         * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.
+         * Specifies mirroring and clockwise rotation in degrees (0-360).
+         *
+         * `n`: Rotation in degrees only.
+         *
+         * `!n`: Mirror the image vertically, then rotate by n degrees.
+         *
+         * @default '0'
+         */
+        this.rotation = '0';
+        /**
+         * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.
+         * Controls the color delivery mode.
+         *
+         * `default`: The server's default quality.
+         *
+         * `color`: Full color information.
+         *
+         * `gray`: Grayscale rendering.
+         *
+         * `bitonal`: Black and white only.
+         *
+         * @default 'default'
+         */
+        this.quality = 'default';
+        /**
+         * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
+         * or "eager" to load immediately.
+         * @default 'lazy'
+         */
+        this.loading = 'lazy';
+        /**
+         * Whether to display a fallback placeholder image when the IIIF image fails to load.
+         * @default true
+         */
+        this.showFallback = true;
+        this.isLoaded = false;
+        this.hasError = false;
+        this.baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';
+        this.handleLoad = () => {
+            this.isLoaded = true;
+        };
+        this.handleError = () => {
+            this.hasError = true;
+        };
+    }
+    /**
+     * Fetch IIIF image info to get actual dimensions.
+     */
+    async fetchImageInfo() {
+        try {
+            const currentUuid = this.uuid; // Capture current UUID
+            const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;
+            const response = await fetch(infoUrl);
+            if (!response.ok) {
+                console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);
+                return;
+            }
+            const info = await response.json();
+            // Only update dimensions if UUID hasn't changed during fetch
+            // (protects against race conditions if component updates)
+            if (this.uuid === currentUuid) {
+                this.imageDimensions = {
+                    width: info.width,
+                    height: info.height,
+                };
+                this.fetchedUuid = currentUuid;
+            }
+        }
+        catch (error) {
+            console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);
+        }
+    }
+    /**
+     * Check if a region value matches aspect ratio format (e.g., "16:9", "4:3", "3:2").
+     */
+    isAspectRatio(value) {
+        return /^\d+:\d+$/.test(value);
+    }
+    /**
+     * Set CSS custom property for aspect ratio on the host element.
+     */
+    setAspectRatioCss(aspectRatio) {
+        const [widthRatio, heightRatio] = aspectRatio.split(':');
+        this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);
+    }
+    /**
+     * Clear CSS custom property for aspect ratio from the host element.
+     */
+    clearAspectRatioCss() {
+        this.hostElement.style.removeProperty('--aspect-ratio');
+    }
+    /**
+     * Format a number for IIIF percentage values (remove trailing zeros).
+     * IIIF spec requires no trailing zeros per section 4.7.
+     */
+    formatPercent(value) {
+        return value.toFixed(2).replace(/\.?0+$/, '');
+    }
+    /**
+     * Calculate a centered crop region for a given aspect ratio.
+     * Requires actual image dimensions to calculate correctly.
+     * @param aspectRatio - The target aspect ratio (e.g., "3:2" or "2:3")
+     * @returns A IIIF percentage-based region string (e.g., "pct:0,16.67,100,66.67")
+     */
+    calculateCenteredCrop(aspectRatio) {
+        if (!this.imageDimensions) {
+            throw new Error('Image dimensions required for aspect ratio calculation');
+        }
+        const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);
+        const targetRatio = widthRatio / heightRatio;
+        const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;
+        // Determine if we need to crop width or height
+        if (sourceRatio > targetRatio) {
+            // Source is wider than target - crop left and right
+            const widthPercent = (targetRatio / sourceRatio) * 100;
+            const xOffset = (100 - widthPercent) / 2;
+            return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;
+        }
+        else {
+            // Source is taller than target - crop top and bottom
+            const heightPercent = (sourceRatio / targetRatio) * 100;
+            const yOffset = (100 - heightPercent) / 2;
+            return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;
+        }
+    }
+    /**
+     * Get the region parameter for the IIIF URL.
+     */
+    getRegionParam() {
+        // Handle custom aspect ratios
+        let regionParam = this.region || 'full';
+        if (this.isAspectRatio(regionParam)) {
+            // Only apply crop if we have dimensions for the current UUID
+            if (this.imageDimensions && this.fetchedUuid === this.uuid) {
+                regionParam = this.calculateCenteredCrop(regionParam);
+            }
+            else {
+                // Use full image until dimensions are loaded
+                regionParam = 'full';
+            }
+        }
+        return regionParam;
+    }
+    buildIIIFUrl(width, format = 'jpg') {
+        const sizeParam = width ? `${width},` : 'max';
+        const regionParam = this.getRegionParam();
+        return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
+    }
+    generateSrcset(baseWidth, format) {
+        return PIXEL_DENSITIES.map(density => {
+            const width = Math.round(baseWidth * density);
+            const url = this.buildIIIFUrl(width, format);
+            return `${url} ${density}x`;
+        }).join(', ');
+    }
+    handleRegionChange(newValue, oldValue) {
+        // Only process if region actually changed
+        if (newValue === oldValue) {
+            return;
+        }
+        // If new region is an aspect ratio, set CSS and fetch info
+        if (newValue && this.isAspectRatio(newValue)) {
+            this.setAspectRatioCss(newValue);
+            this.fetchImageInfo();
+        }
+        else {
+            // Clear aspect ratio CSS if no longer using aspect ratio format
+            this.clearAspectRatioCss();
+        }
+    }
+    componentDidLoad() {
+        // Set CSS aspect ratio and fetch image info if using aspect ratio format
+        if (this.region && this.isAspectRatio(this.region)) {
+            this.setAspectRatioCss(this.region);
+            this.fetchImageInfo();
+        }
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.observedWidth = Math.round(entry.contentRect.width);
+                    if (this.resizeObserver) {
+                        this.resizeObserver.disconnect();
+                        this.resizeObserver = undefined;
+                    }
+                }
+            });
+            this.resizeObserver.observe(this.hostElement);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    render() {
+        // Show placeholder until we've measured the component width
+        if (!this.observedWidth) {
+            return h("pennlibs-fallback-img", null);
+        }
+        if (this.hasError && this.showFallback) {
+            return (h("div", { class: "fallback-container" }, h("pennlibs-fallback-img", null)));
+        }
+        const imgClasses = {
+            'iiif-img': true,
+            'loaded': this.isLoaded
+        };
+        return (h("picture", null, h("source", { type: "image/webp", srcSet: this.generateSrcset(this.observedWidth, 'webp') }), h("img", { class: imgClasses, src: this.buildIIIFUrl(this.observedWidth, 'jpg'), srcSet: this.generateSrcset(this.observedWidth, 'jpg'), alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "region": ["handleRegionChange"]
+    }; }
+    static get style() { return pennlibsIiifImgCss; }
+}, [257, "pennlibs-iiif-img", {
+        "uuid": [1],
+        "alt": [1],
+        "region": [513],
+        "rotation": [1],
+        "quality": [1],
+        "loading": [1],
+        "showFallback": [4, "show-fallback"],
+        "isLoaded": [32],
+        "hasError": [32],
+        "imageDimensions": [32],
+        "observedWidth": [32]
+    }, undefined, {
+        "region": ["handleRegionChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-iiif-img", "pennlibs-fallback-img"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-iiif-img":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, IIIFImg);
+            }
+            break;
+        case "pennlibs-fallback-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PennlibsIiifImg = IIIFImg;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsIiifImg, defineCustomElement };
+//# sourceMappingURL=pennlibs-iiif-img.js.map
+
+//# sourceMappingURL=pennlibs-iiif-img.js.map

package/dist/components/pennlibs-iiif-img.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-iiif-img.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-iiif-img/pennlibs-iiif-img.css?tag=pennlibs-iiif-img&encapsulation=shadow","src/components/pennlibs-iiif-img/pennlibs-iiif-img.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  align-self: flex-start;\n  aspect-ratio: var(--aspect-ratio, auto);\n}\n\npicture {\n  display: block;\n  line-height: 0;\n}\n\n.iiif-img {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  opacity: 0;\n  filter: blur(5px);\n  transition: opacity 0.15s ease-in, filter 0.15s ease-in;\n}\n\n.iiif-img.loaded {\n  opacity: 1;\n  filter: blur(0);\n}\n\n.fallback-container {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.fallback-container pennlibs-fallback-img {\n  width: 100%;\n  height: 100%;\n}\n\npennlibs-fallback-img {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n","import { Component, h, Prop, State, Element, Watch } from '@stencil/core';\n\ntype ImageFormat = 'jpg' | 'webp';\n\nconst PIXEL_DENSITIES = [1, 1.5, 2] as const;\n\n/**\n * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\n * Measures its own rendered width and automatically generates optimal image sources at\n * multiple pixel densities (1x, 1.5x, 2x) with modern WebP format and JPG fallback support.\n *\n * @component\n * @example\n * <pennlibs-iiif-img\n *   uuid=\"063ff35c-bbdd-4b63-bbdd-6206590e20d5\"\n *   alt=\"\">\n * </pennlibs-iiif-img>\n */\n@Component({\n  tag: 'pennlibs-iiif-img',\n  styleUrl: 'pennlibs-iiif-img.css',\n  shadow: true,\n})\nexport class IIIFImg {\n  private resizeObserver?: ResizeObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.\n   */\n  @Prop() uuid!: string;\n\n  /**\n   * Alternative text that describes the image content for screen readers and when images fail to load.\n   * Use an empty string for purely decorative images.\n   */\n  @Prop() alt!: string;\n\n  /**\n   * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\n   * Defines the rectangular portion of the underlying image to return.\n   *\n   * `full`: The full image is returned, without any cropping.\n   *\n   * `square`: A square area where width and height equal the shorter dimension.\n   *\n   * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies\n   * a centered crop based on the source image dimensions and sets the CSS aspect-ratio\n   * property for layout reservation.\n   *\n   * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n   *\n   * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.\n   *\n   * @default 'full'\n   */\n  @Prop({ reflect: true }) region?: string = 'full';\n\n  /**\n   * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\n   * Specifies mirroring and clockwise rotation in degrees (0-360).\n   * \n   * `n`: Rotation in degrees only.\n   * \n   * `!n`: Mirror the image vertically, then rotate by n degrees.\n   * \n   * @default '0'\n   */\n  @Prop() rotation?: string = '0';\n\n  /**\n   * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\n   * Controls the color delivery mode.\n   * \n   * `default`: The server's default quality.\n   * \n   * `color`: Full color information.\n   * \n   * `gray`: Grayscale rendering.\n   * \n   * `bitonal`: Black and white only.\n   * \n   * @default 'default'\n   */\n  @Prop() quality?: string = 'default';\n\n  /**\n   * Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\n   * or \"eager\" to load immediately.\n   * @default 'lazy'\n   */\n  @Prop() loading?: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * Whether to display a fallback placeholder image when the IIIF image fails to load.\n   * @default true\n   */\n  @Prop() showFallback?: boolean = true;\n\n  @State() isLoaded: boolean = false;\n  @State() hasError: boolean = false;\n  @State() imageDimensions?: { width: number; height: number };\n  @State() observedWidth?: number;\n\n  private fetchedUuid?: string; // Track which UUID these dimensions belong to\n\n  private readonly baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';\n\n  /**\n   * Fetch IIIF image info to get actual dimensions.\n   */\n  private async fetchImageInfo(): Promise<void> {\n    try {\n      const currentUuid = this.uuid; // Capture current UUID\n      const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;\n      const response = await fetch(infoUrl);\n      if (!response.ok) {\n        console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);\n        return;\n      }\n      const info = await response.json();\n\n      // Only update dimensions if UUID hasn't changed during fetch\n      // (protects against race conditions if component updates)\n      if (this.uuid === currentUuid) {\n        this.imageDimensions = {\n          width: info.width,\n          height: info.height,\n        };\n        this.fetchedUuid = currentUuid;\n      }\n    } catch (error) {\n      console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);\n    }\n  }\n\n  /**\n   * Check if a region value matches aspect ratio format (e.g., \"16:9\", \"4:3\", \"3:2\").\n   */\n  private isAspectRatio(value: string): boolean {\n    return /^\\d+:\\d+$/.test(value);\n  }\n\n  /**\n   * Set CSS custom property for aspect ratio on the host element.\n   */\n  private setAspectRatioCss(aspectRatio: string): void {\n    const [widthRatio, heightRatio] = aspectRatio.split(':');\n    this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);\n  }\n\n  /**\n   * Clear CSS custom property for aspect ratio from the host element.\n   */\n  private clearAspectRatioCss(): void {\n    this.hostElement.style.removeProperty('--aspect-ratio');\n  }\n\n  /**\n   * Format a number for IIIF percentage values (remove trailing zeros).\n   * IIIF spec requires no trailing zeros per section 4.7.\n   */\n  private formatPercent(value: number): string {\n    return value.toFixed(2).replace(/\\.?0+$/, '');\n  }\n\n  /**\n   * Calculate a centered crop region for a given aspect ratio.\n   * Requires actual image dimensions to calculate correctly.\n   * @param aspectRatio - The target aspect ratio (e.g., \"3:2\" or \"2:3\")\n   * @returns A IIIF percentage-based region string (e.g., \"pct:0,16.67,100,66.67\")\n   */\n  private calculateCenteredCrop(aspectRatio: string): string {\n    if (!this.imageDimensions) {\n      throw new Error('Image dimensions required for aspect ratio calculation');\n    }\n\n    const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);\n    const targetRatio = widthRatio / heightRatio;\n    const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;\n\n    // Determine if we need to crop width or height\n    if (sourceRatio > targetRatio) {\n      // Source is wider than target - crop left and right\n      const widthPercent = (targetRatio / sourceRatio) * 100;\n      const xOffset = (100 - widthPercent) / 2;\n      return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;\n    } else {\n      // Source is taller than target - crop top and bottom\n      const heightPercent = (sourceRatio / targetRatio) * 100;\n      const yOffset = (100 - heightPercent) / 2;\n      return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;\n    }\n  }\n\n  /**\n   * Get the region parameter for the IIIF URL.\n   */\n  private getRegionParam(): string {\n    // Handle custom aspect ratios\n    let regionParam = this.region || 'full';\n    if (this.isAspectRatio(regionParam)) {\n      // Only apply crop if we have dimensions for the current UUID\n      if (this.imageDimensions && this.fetchedUuid === this.uuid) {\n        regionParam = this.calculateCenteredCrop(regionParam);\n      } else {\n        // Use full image until dimensions are loaded\n        regionParam = 'full';\n      }\n    }\n\n    return regionParam;\n  }\n\n  private buildIIIFUrl(width?: number, format: ImageFormat = 'jpg'): string {\n    const sizeParam = width ? `${width},` : 'max';\n    const regionParam = this.getRegionParam();\n    return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;\n  }\n\n  private generateSrcset(baseWidth: number, format: ImageFormat): string {\n    return PIXEL_DENSITIES.map(density => {\n      const width = Math.round(baseWidth * density);\n      const url = this.buildIIIFUrl(width, format);\n      return `${url} ${density}x`;\n    }).join(', ');\n  }\n\n\n  private handleLoad = () => {\n    this.isLoaded = true;\n  };\n\n  private handleError = () => {\n    this.hasError = true;\n  };\n\n  @Watch('region')\n  handleRegionChange(newValue: string, oldValue: string) {\n    // Only process if region actually changed\n    if (newValue === oldValue) {\n      return;\n    }\n\n    // If new region is an aspect ratio, set CSS and fetch info\n    if (newValue && this.isAspectRatio(newValue)) {\n      this.setAspectRatioCss(newValue);\n      this.fetchImageInfo();\n    } else {\n      // Clear aspect ratio CSS if no longer using aspect ratio format\n      this.clearAspectRatioCss();\n    }\n  }\n\n  componentDidLoad() {\n    // Set CSS aspect ratio and fetch image info if using aspect ratio format\n    if (this.region && this.isAspectRatio(this.region)) {\n      this.setAspectRatioCss(this.region);\n      this.fetchImageInfo();\n    }\n\n    if ('ResizeObserver' in window) {\n      this.resizeObserver = new ResizeObserver(entries => {\n        for (const entry of entries) {\n          this.observedWidth = Math.round(entry.contentRect.width);\n\n          if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = undefined;\n          }\n        }\n      });\n\n      this.resizeObserver.observe(this.hostElement);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n  }\n\n  render() {\n    // Show placeholder until we've measured the component width\n    if (!this.observedWidth) {\n      return <pennlibs-fallback-img />;\n    }\n\n    if (this.hasError && this.showFallback) {\n      return (\n        <div class=\"fallback-container\">\n          <pennlibs-fallback-img />\n        </div>\n      );\n    }\n\n    const imgClasses = {\n      'iiif-img': true,\n      'loaded': this.isLoaded\n    };\n\n    return (\n      <picture>\n        <source\n          type=\"image/webp\"\n          srcSet={this.generateSrcset(this.observedWidth, 'webp')}\n        />\n\n        <img\n          class={imgClasses}\n          src={this.buildIIIFUrl(this.observedWidth, 'jpg')}\n          srcSet={this.generateSrcset(this.observedWidth, 'jpg')}\n          alt={this.alt}\n          loading={this.loading}\n          onLoad={this.handleLoad}\n          onError={this.handleError}\n        />\n      </picture>\n    );\n  }\n}\n"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-13T21:27:12",
+  "timestamp": "2025-11-21T15:30:56",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.1",
@@ -177,9 +177,15 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "pennlibs-iiif-img"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "pennlibs-iiif-img": [
+          "pennlibs-fallback-img"
+        ]
+      }
     },
     {
       "filePath": "src/components/pennlibs-feedback/pennlibs-feedback.tsx",
@@ -457,6 +463,236 @@
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/pennlibs-iiif-img/pennlibs-iiif-img.tsx",
+      "encapsulation": "shadow",
+      "tag": "pennlibs-iiif-img",
+      "readme": "# pennlibs-iiif-img\n\n\n",
+      "docs": "Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\nMeasures its own rendered width and automatically generates optimal image sources at\nmultiple pixel densities (1x, 1.5x, 2x) with modern WebP format and JPG fallback support.",
+      "docsTags": [
+        {
+          "name": "component"
+        },
+        {
+          "name": "example",
+          "text": "<pennlibs-iiif-img\n  uuid=\"063ff35c-bbdd-4b63-bbdd-6206590e20d5\"\n  alt=\"\">\n</pennlibs-iiif-img>"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "alt",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "alt",
+          "reflectToAttr": false,
+          "docs": "Alternative text that describes the image content for screen readers and when images fail to load.\nUse an empty string for purely decorative images.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "loading",
+          "type": "\"eager\" | \"lazy\"",
+          "complexType": {
+            "original": "'lazy' | 'eager'",
+            "resolved": "\"eager\" | \"lazy\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "loading",
+          "reflectToAttr": false,
+          "docs": "Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\nor \"eager\" to load immediately.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'lazy'"
+            }
+          ],
+          "default": "'lazy'",
+          "values": [
+            {
+              "value": "eager",
+              "type": "string"
+            },
+            {
+              "value": "lazy",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "quality",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "quality",
+          "reflectToAttr": false,
+          "docs": "The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\nControls the color delivery mode.\n\n`default`: The server's default quality.\n\n`color`: Full color information.\n\n`gray`: Grayscale rendering.\n\n`bitonal`: Black and white only.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "region",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "region",
+          "reflectToAttr": true,
+          "docs": "The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\nDefines the rectangular portion of the underlying image to return.\n\n`full`: The full image is returned, without any cropping.\n\n`square`: A square area where width and height equal the shorter dimension.\n\n`width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies\na centered crop based on the source image dimensions and sets the CSS aspect-ratio\nproperty for layout reservation.\n\n`x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n\n`pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'full'"
+            }
+          ],
+          "default": "'full'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "rotation",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "rotation",
+          "reflectToAttr": false,
+          "docs": "The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\nSpecifies mirroring and clockwise rotation in degrees (0-360).\n\n`n`: Rotation in degrees only.\n\n`!n`: Mirror the image vertically, then rotate by n degrees.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'0'"
+            }
+          ],
+          "default": "'0'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showFallback",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-fallback",
+          "reflectToAttr": false,
+          "docs": "Whether to display a fallback placeholder image when the IIIF image fails to load.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "uuid",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "uuid",
+          "reflectToAttr": false,
+          "docs": "The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "pennlibs-fallback-img"
+      ],
+      "dependencyGraph": {
+        "pennlibs-iiif-img": [
+          "pennlibs-fallback-img"
+        ]
+      }
     }
   ],
   "typeLibrary": {