From 67f34572a9901c0c22c0c26a2fc16e27bce1ecfc Mon Sep 17 00:00:00 2001
From: babayaga <cgoflyn@gmai.com>
Date: Tue, 30 Dec 2025 09:14:15 +0100
Subject: [PATCH] library resources

---
 packages/imagetools_3/astroViteConfigs.js     |   8 +-
 .../src/components/RelativeGallery.astro      |   2 +-
 .../src/components/RelativeImage.astro        | 121 ++++++++++--------
 3 files changed, 71 insertions(+), 60 deletions(-)

diff --git a/packages/imagetools_3/astroViteConfigs.js b/packages/imagetools_3/astroViteConfigs.js
index 841e04a..613ad89 100644
--- a/packages/imagetools_3/astroViteConfigs.js
+++ b/packages/imagetools_3/astroViteConfigs.js
@@ -1,12 +1,12 @@
 export default {
-  "environment": "dev",
+  "environment": "build",
   "isSsrBuild": false,
   "projectBase": "",
   "publicDir": "C:\\Users\\zx\\Desktop\\polymech\\library.polymech\\public\\",
   "rootDir": "C:\\Users\\zx\\Desktop\\polymech\\library.polymech\\",
-  "mode": "dev",
-  "outDir": "dist",
-  "assetsDir": "/_astro",
+  "mode": "production",
+  "outDir": "C:\\Users\\zx\\Desktop\\polymech\\library.polymech\\dist\\",
+  "assetsDir": "_astro",
   "sourcemap": false,
   "assetFileNames": "/_astro/[name]@[width].[hash][extname]"
 }
\ No newline at end of file
diff --git a/packages/polymech/src/components/RelativeGallery.astro b/packages/polymech/src/components/RelativeGallery.astro
index 04a598c..58f23b3 100644
--- a/packages/polymech/src/components/RelativeGallery.astro
+++ b/packages/polymech/src/components/RelativeGallery.astro
@@ -5,7 +5,7 @@ import fs from "node:fs";
 import { glob } from "glob";
 import { globBase, pathInfo } from "@polymech/commons";
 import { GalleryImage } from "@/base/images.js";
-import { resolveImagePath } from "@/utils/path-resolution";
+import { resolveImagePath } from "../utils/path-resolution";
 
 export interface Props {
   images?: GalleryImage[];
diff --git a/packages/polymech/src/components/RelativeImage.astro b/packages/polymech/src/components/RelativeImage.astro
index ba28b26..8c92ab4 100644
--- a/packages/polymech/src/components/RelativeImage.astro
+++ b/packages/polymech/src/components/RelativeImage.astro
@@ -1,7 +1,6 @@
 ---
 import { Img } from "imagetools/components";
-import { resolveImagePath } from '@/utils/path-resolution';
-
+import { resolveImagePath } from "../utils/path-resolution";
 export interface Props {
   src: string;
   alt: string;
@@ -10,12 +9,12 @@ export interface Props {
   class?: string;
   entryPath?: string;
   lightbox?: boolean;
-  preset?: 'small' | 'medium' | 'large';
+  preset?: "small" | "medium" | "large";
   [key: string]: any;
 }
 
-const { 
-  src, 
+const {
+  src,
   alt,
   width,
   height,
@@ -24,22 +23,33 @@ const {
   objectFit,
   loading,
   sizes,
-  class: className, 
-  entryPath, 
+  class: className,
+  entryPath,
   lightbox = true,
   preset,
   ...rest
 } = Astro.props;
 
 const resolvedSrc = resolveImagePath(src, entryPath, Astro.url);
-const imgProps = { alt, width, height, format, placeholder, objectFit, loading, sizes };
-Object.keys(imgProps).forEach(key => imgProps[key] === undefined && delete imgProps[key]);
+const imgProps = {
+  alt,
+  width,
+  height,
+  format,
+  placeholder,
+  objectFit,
+  loading,
+  sizes,
+};
+Object.keys(imgProps).forEach(
+  (key) => imgProps[key] === undefined && delete imgProps[key],
+);
 
 // Define preset styles
 const presetStyles = {
   small: "flex justify-center my-4 mx-auto w-[200px]",
-  medium: "flex justify-center my-4 mx-auto w-[600px]", 
-  large: "flex justify-center my-4 mx-auto w-[800px]"
+  medium: "flex justify-center my-4 mx-auto w-[600px]",
+  large: "flex justify-center my-4 mx-auto w-[800px]",
 };
 
 const containerClass = preset ? presetStyles[preset] : "w-full h-full";
@@ -47,54 +57,53 @@ const buttonClass = preset ? "w-full h-full" : "w-full h-full";
 const imgClass = preset ? "w-full h-auto object-contain" : "";
 ---
 
-{preset ? (
-  <div class={containerClass}>
-    <button 
-      class:list={[buttonClass, { 'lightbox-enabled': lightbox }]}
-    >
-      <Img 
-        src={resolvedSrc} 
+{
+  preset ? (
+    <div class={containerClass}>
+      <button class:list={[buttonClass, { "lightbox-enabled": lightbox }]}>
+        <Img
+          src={resolvedSrc}
+          {...imgProps}
+          attributes={{
+            img: {
+              class:
+                [imgClass, className].filter(Boolean).join(" ") || undefined,
+            },
+          }}
+        />
+      </button>
+    </div>
+  ) : (
+    <button class:list={["w-full h-full", { "lightbox-enabled": lightbox }]}>
+      <Img
+        src={resolvedSrc}
         {...imgProps}
         attributes={{
-        img: {
-          class: [imgClass, className].filter(Boolean).join(' ') || undefined
-        }    
-      }
-      } />
+          img: {
+            ...(className && { class: className }),
+          },
+        }}
+      />
     </button>
-  </div>
-) : (
-  <button 
-    class:list={["w-full h-full", { 'lightbox-enabled': lightbox }]}
-  >
-    <Img 
-      src={resolvedSrc} 
-      {...imgProps}
-      attributes={{
-      img: {
-        ...(className && { class: className })
-      }    
-    }
-    } />
-  </button>
-)}
+  )
+}
 
 <script define:vars={{ lightbox, preset }}>
-  const button = preset 
-    ? document.currentScript.previousElementSibling.querySelector('button')
+  const button = preset
+    ? document.currentScript.previousElementSibling.querySelector("button")
     : document.currentScript.previousElementSibling;
 
   function getHighestResSrc(img) {
     let highestResSrc = img.src;
-    const srcset = img.getAttribute('srcset');
+    const srcset = img.getAttribute("srcset");
 
     if (srcset) {
       let maxWidth = 0;
-      srcset.split(',').forEach(s => {
+      srcset.split(",").forEach((s) => {
         const parts = s.trim().split(/\s+/);
         const url = parts[0];
         const widthStr = parts[1];
-        if (widthStr && widthStr.endsWith('w')) {
+        if (widthStr && widthStr.endsWith("w")) {
           const width = parseInt(widthStr.slice(0, -1), 10);
           if (width > maxWidth) {
             maxWidth = width;
@@ -105,30 +114,32 @@ const imgClass = preset ? "w-full h-auto object-contain" : "";
     }
     return highestResSrc;
   }
-  
-  button.addEventListener('click', (event) => {
+
+  button.addEventListener("click", (event) => {
     if (!lightbox) return;
 
-    const triggerImage = event.currentTarget.querySelector('img');
+    const triggerImage = event.currentTarget.querySelector("img");
     if (!triggerImage) return;
 
-    const allImages = Array.from(document.querySelectorAll('.lightbox-enabled img')).map(img => ({
+    const allImages = Array.from(
+      document.querySelectorAll(".lightbox-enabled img"),
+    ).map((img) => ({
       src: getHighestResSrc(img),
-      alt: img.getAttribute('alt')
+      alt: img.getAttribute("alt"),
     }));
-    
+
     const triggerSrc = getHighestResSrc(triggerImage);
-    const currentIndex = allImages.findIndex(img => img.src === triggerSrc);
+    const currentIndex = allImages.findIndex((img) => img.src === triggerSrc);
 
     if (currentIndex === -1) return;
 
-    const lightboxEvent = new CustomEvent('open-lightbox', {
+    const lightboxEvent = new CustomEvent("open-lightbox", {
       detail: {
         images: allImages,
-        currentIndex: currentIndex
-      }
+        currentIndex: currentIndex,
+      },
     });
-    
+
     window.dispatchEvent(lightboxEvent);
   });
 </script>