@tarunachyutuni/images 2.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @tarunachyutuni/images@2.0.0 build C:\Users\Tarun\lumina\packages\images
+> tsc
+

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    loading?: "lazy" | "eager";
+    decoding?: "async" | "sync";
+    className?: string;
+    sizes?: string;
+    srcSet?: string;
+}
+export interface ImageOptimization {
+    format: "webp" | "avif" | "jpeg" | "png";
+    quality: number;
+    width: number;
+    height?: number;
+}
+export interface ResponsiveImageSet {
+    breakpoints: {
+        width: number;
+        src: string;
+    }[];
+    alt: string;
+    sizes: string;
+}
+export declare const IMAGE_FORMATS: {
+    readonly webp: {
+        readonly mime: "image/webp";
+        readonly ext: ".webp";
+    };
+    readonly avif: {
+        readonly mime: "image/avif";
+        readonly ext: ".avif";
+    };
+    readonly jpeg: {
+        readonly mime: "image/jpeg";
+        readonly ext: ".jpg";
+    };
+    readonly png: {
+        readonly mime: "image/png";
+        readonly ext: ".png";
+    };
+};
+export declare class ImageAgent {
+    generateSrcSet(baseUrl: string, widths?: number[]): string;
+    generateSizes(breakpoints: {
+        minWidth: string;
+        size: string;
+    }[]): string;
+    generateAltText(imageUrl: string, context?: string): Promise<string>;
+    optimizeImage(src: string, optimization: ImageOptimization): string;
+    generatePlaceholder(width: number, height: number, text?: string): string;
+    generateBlurHash(width: number, height: number): string;
+    validateImageProps(props: ImageProps): {
+        valid: boolean;
+        issues: string[];
+    };
+    responsiveSet(baseUrl: string, aspectRatio?: string): ResponsiveImageSet;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;CAKhB,CAAC;AAEX,qBAAa,UAAU;IACrB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,GAAE,MAAM,EAAsC,GAAG,MAAM;IAI7F,aAAa,CAAC,WAAW,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,MAAM;IAIlE,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAI1E,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,GAAG,MAAM;IAMnE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM;IAQzE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;IASvD,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAc3E,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,GAAE,MAAe,GAAG,kBAAkB;CAajF"}

package/dist/index.js

@@ -0,0 +1,64 @@
+// =============================================================================
+// @tarunachyutuni/images — Intelligent Image Handling
+// =============================================================================
+export const IMAGE_FORMATS = {
+    webp: { mime: "image/webp", ext: ".webp" },
+    avif: { mime: "image/avif", ext: ".avif" },
+    jpeg: { mime: "image/jpeg", ext: ".jpg" },
+    png: { mime: "image/png", ext: ".png" },
+};
+export class ImageAgent {
+    generateSrcSet(baseUrl, widths = [320, 640, 768, 1024, 1280, 1920]) {
+        return widths.map((w) => `${baseUrl}?w=${w} ${w}w`).join(", ");
+    }
+    generateSizes(breakpoints) {
+        return breakpoints.map((b) => `${b.minWidth} ${b.size}`).join(", ");
+    }
+    async generateAltText(imageUrl, context) {
+        return context ?? "Image description";
+    }
+    optimizeImage(src, optimization) {
+        const { format, quality, width } = optimization;
+        if (src.includes("?"))
+            return `${src}&fm=${format === "jpeg" ? "jpg" : format}&q=${quality}&w=${width}`;
+        return `${src}?fm=${format === "jpeg" ? "jpg" : format}&q=${quality}&w=${width}`;
+    }
+    generatePlaceholder(width, height, text) {
+        return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" fill="%23f5f5f5">
+        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="system-ui" font-size="14" fill="%23999">${text ?? `${width}×${height}`}</text>
+      </svg>`)}`;
+    }
+    generateBlurHash(width, height) {
+        return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+        <filter id="blur"><feGaussianBlur stdDeviation="20"/></filter>
+        <rect width="100%" height="100%" fill="#e2e8f0" filter="url(#blur)"/>
+      </svg>`)}`;
+    }
+    validateImageProps(props) {
+        const issues = [];
+        if (!props.alt || props.alt.length < 5) {
+            issues.push("Alt text too short — should be descriptive");
+        }
+        if (!props.width || !props.height) {
+            issues.push("Missing width/height — causes layout shift (CLS)");
+        }
+        if (!props.loading || props.loading !== "lazy") {
+            issues.push("Consider loading='lazy' for below-fold images");
+        }
+        return { valid: issues.length === 0, issues };
+    }
+    responsiveSet(baseUrl, aspectRatio = "16/9") {
+        return {
+            breakpoints: [
+                { width: 320, src: `${baseUrl}?w=320` },
+                { width: 640, src: `${baseUrl}?w=640` },
+                { width: 768, src: `${baseUrl}?w=768` },
+                { width: 1024, src: `${baseUrl}?w=1024` },
+                { width: 1280, src: `${baseUrl}?w=1280` },
+            ],
+            alt: "",
+            sizes: "(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, 1280px",
+        };
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tarunachyutuni/images",
+  "version": "2.0.0",
+  "description": "Images package for Lumina",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist-index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@tarunachyutuni/types": "2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,101 @@
+// =============================================================================
+// @tarunachyutuni/images — Intelligent Image Handling
+// =============================================================================
+
+export interface ImageProps {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "sync";
+  className?: string;
+  sizes?: string;
+  srcSet?: string;
+}
+
+export interface ImageOptimization {
+  format: "webp" | "avif" | "jpeg" | "png";
+  quality: number;
+  width: number;
+  height?: number;
+}
+
+export interface ResponsiveImageSet {
+  breakpoints: { width: number; src: string }[];
+  alt: string;
+  sizes: string;
+}
+
+export const IMAGE_FORMATS = {
+  webp: { mime: "image/webp", ext: ".webp" },
+  avif: { mime: "image/avif", ext: ".avif" },
+  jpeg: { mime: "image/jpeg", ext: ".jpg" },
+  png: { mime: "image/png", ext: ".png" },
+} as const;
+
+export class ImageAgent {
+  generateSrcSet(baseUrl: string, widths: number[] = [320, 640, 768, 1024, 1280, 1920]): string {
+    return widths.map((w) => `${baseUrl}?w=${w} ${w}w`).join(", ");
+  }
+
+  generateSizes(breakpoints: { minWidth: string; size: string }[]): string {
+    return breakpoints.map((b) => `${b.minWidth} ${b.size}`).join(", ");
+  }
+
+  async generateAltText(imageUrl: string, context?: string): Promise<string> {
+    return context ?? "Image description";
+  }
+
+  optimizeImage(src: string, optimization: ImageOptimization): string {
+    const { format, quality, width } = optimization;
+    if (src.includes("?")) return `${src}&fm=${format === "jpeg" ? "jpg" : format}&q=${quality}&w=${width}`;
+    return `${src}?fm=${format === "jpeg" ? "jpg" : format}&q=${quality}&w=${width}`;
+  }
+
+  generatePlaceholder(width: number, height: number, text?: string): string {
+    return `data:image/svg+xml,${encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" fill="%23f5f5f5">
+        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="system-ui" font-size="14" fill="%23999">${text ?? `${width}×${height}`}</text>
+      </svg>`
+    )}`;
+  }
+
+  generateBlurHash(width: number, height: number): string {
+    return `data:image/svg+xml,${encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+        <filter id="blur"><feGaussianBlur stdDeviation="20"/></filter>
+        <rect width="100%" height="100%" fill="#e2e8f0" filter="url(#blur)"/>
+      </svg>`
+    )}`;
+  }
+
+  validateImageProps(props: ImageProps): { valid: boolean; issues: string[] } {
+    const issues: string[] = [];
+    if (!props.alt || props.alt.length < 5) {
+      issues.push("Alt text too short — should be descriptive");
+    }
+    if (!props.width || !props.height) {
+      issues.push("Missing width/height — causes layout shift (CLS)");
+    }
+    if (!props.loading || props.loading !== "lazy") {
+      issues.push("Consider loading='lazy' for below-fold images");
+    }
+    return { valid: issues.length === 0, issues };
+  }
+
+  responsiveSet(baseUrl: string, aspectRatio: string = "16/9"): ResponsiveImageSet {
+    return {
+      breakpoints: [
+        { width: 320, src: `${baseUrl}?w=320` },
+        { width: 640, src: `${baseUrl}?w=640` },
+        { width: 768, src: `${baseUrl}?w=768` },
+        { width: 1024, src: `${baseUrl}?w=1024` },
+        { width: 1280, src: `${baseUrl}?w=1280` },
+      ],
+      alt: "",
+      sizes: "(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, 1280px",
+    };
+  }
+}
+

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": { "outDir": "./dist", "rootDir": "./src" },
+  "include": ["src/**/*"]
+}