@mccustomapps/helaui 0.1.10 → 0.1.12

package/README.md

@@ -216,7 +216,7 @@ import '@mccustomapps/helaui/rain-background.css';
 const rain = new RainBackground();
 ```
 
-**Next.js (App Router)** — use a Client Component. `RainBackground` already mounts itself on `document.body`; do not insert `rain.element` a second time.
+**Next.js (App Router)** — use a Client Component. `RainBackground` already mounts itself on `document.body`; do **not** call `insertBefore` / `appendChild` on `rain.element` a second time.
 
 ```tsx
 'use client';
@@ -227,7 +227,7 @@ import '@mccustomapps/helaui/rain-background.css';
 
 export function HelaRain() {
   useEffect(() => {
-    const rain = new RainBackground();
+    const rain = new RainBackground({ zIndex: 0 });
     return () => rain.destroy();
   }, []);
 
@@ -241,7 +241,7 @@ export function HelaRain() {
 |---|---|---|---|
 | `images` | `string[]` | built-in artwork | Image URLs |
 | `density` | `number` | `28` | Number of particles |
-| `minSize` / `maxSize` | `number` | `28` | Particle width in pixels |
+| `minSize` / `maxSize` | `number` | `28` / `72` | Particle width in pixels |
 | `minDuration` / `maxDuration` | `number` | `8` / `18` | Fall duration in seconds |
 | `target` | `HTMLElement` | `document.body` | Mount container |
 | `zIndex` | `number` | `0` | Stacking order |

package/dist/index.cjs

@@ -405,16 +405,43 @@ function pick(items) {
   return items[Math.floor(Math.random() * items.length)];
 }
 function toImageUrl(source) {
-  return typeof source === "string" ? source : source.src;
+  if (typeof source === "string") return source;
+  if (source && typeof source === "object") {
+    const value = source;
+    if (typeof value.src === "string") return value.src;
+    if (typeof value.default === "string") return value.default;
+    if (value.default && typeof value.default === "object" && value.default !== null) {
+      const nested = value.default;
+      if (typeof nested.src === "string") return nested.src;
+    }
+  }
+  throw new Error("RainBackground image must be a URL string.");
+}
+function toDisplayUrl(source, cache) {
+  const existing = cache.get(source);
+  if (existing) return existing;
+  if (!source.startsWith("data:")) return source;
+  const comma = source.indexOf(",");
+  if (comma === -1) return source;
+  const header = source.slice(0, comma);
+  const data = source.slice(comma + 1);
+  const mime = header.match(/^data:([^;,]+)/i)?.[1] ?? "image/png";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  const url = URL.createObjectURL(new Blob([bytes], { type: mime }));
+  cache.set(source, url);
+  return url;
 }
 var RainBackground = class {
   element;
+  objectUrls = [];
   constructor(options = {}) {
     const {
       images = [...BUILTIN_RAIN_IMAGES],
       density = 28,
       minSize = 28,
-      maxSize = 28,
+      maxSize = 72,
       minDuration = 8,
       maxDuration = 18,
       target = document.body,
@@ -427,8 +454,11 @@ var RainBackground = class {
     this.element.className = "helaui-rain-background";
     this.element.setAttribute("aria-hidden", "true");
     this.element.style.zIndex = String(zIndex);
+    const urlCache = /* @__PURE__ */ new Map();
+    const resolved = images.map((image) => toDisplayUrl(toImageUrl(image), urlCache));
+    this.objectUrls.push(...new Set(urlCache.values()));
     for (let index = 0; index < density; index += 1) {
-      this.element.appendChild(this.createDrop(images, minSize, maxSize, minDuration, maxDuration));
+      this.element.appendChild(this.createDrop(resolved, minSize, maxSize, minDuration, maxDuration));
     }
     target.prepend(this.element);
   }
@@ -436,9 +466,16 @@ var RainBackground = class {
     const drop = document.createElement("div");
     const duration = randomBetween(minDuration, maxDuration);
     const size = randomBetween(minSize, maxSize);
-    const src = toImageUrl(pick(images));
+    const src = pick(images);
+    const img = document.createElement("img");
+    img.className = "helaui-rain-background__image";
+    img.src = src;
+    img.alt = "";
+    img.draggable = false;
+    img.decoding = "async";
+    img.loading = "eager";
+    img.setAttribute("fetchpriority", "high");
     drop.className = "helaui-rain-background__drop";
-    drop.style.backgroundImage = `url(${JSON.stringify(src)})`;
     drop.style.setProperty("--helaui-rain-x", `${randomBetween(0, 100)}%`);
     drop.style.setProperty("--helaui-rain-size", `${size}px`);
     drop.style.setProperty("--helaui-rain-duration", `${duration.toFixed(2)}s`);
@@ -446,11 +483,14 @@ var RainBackground = class {
     drop.style.setProperty("--helaui-rain-rotation", `${randomBetween(-35, 35).toFixed(1)}deg`);
     drop.style.setProperty("--helaui-rain-spin", `${randomBetween(90, 360).toFixed(0)}deg`);
     drop.style.setProperty("--helaui-rain-drift", `${randomBetween(-40, 40).toFixed(0)}px`);
+    drop.appendChild(img);
     return drop;
   }
   /** Removes the background from the DOM. */
   destroy() {
     this.element.remove();
+    for (const url of this.objectUrls) URL.revokeObjectURL(url);
+    this.objectUrls.length = 0;
   }
 };
 var DEFAULT_RAIN_IMAGES = ["fritter.png", "swirl.png", "kokis.png", "leaf.png"];

package/dist/index.d.cts

@@ -162,6 +162,7 @@ interface RainBackgroundOptions {
 /** Full-screen animated background with falling image particles. */
 declare class RainBackground {
     readonly element: HTMLDivElement;
+    private readonly objectUrls;
     constructor(options?: RainBackgroundOptions);
     private createDrop;
     /** Removes the background from the DOM. */

package/dist/index.d.ts

@@ -162,6 +162,7 @@ interface RainBackgroundOptions {
 /** Full-screen animated background with falling image particles. */
 declare class RainBackground {
     readonly element: HTMLDivElement;
+    private readonly objectUrls;
     constructor(options?: RainBackgroundOptions);
     private createDrop;
     /** Removes the background from the DOM. */

package/dist/index.js

@@ -352,16 +352,43 @@ function pick(items) {
   return items[Math.floor(Math.random() * items.length)];
 }
 function toImageUrl(source) {
-  return typeof source === "string" ? source : source.src;
+  if (typeof source === "string") return source;
+  if (source && typeof source === "object") {
+    const value = source;
+    if (typeof value.src === "string") return value.src;
+    if (typeof value.default === "string") return value.default;
+    if (value.default && typeof value.default === "object" && value.default !== null) {
+      const nested = value.default;
+      if (typeof nested.src === "string") return nested.src;
+    }
+  }
+  throw new Error("RainBackground image must be a URL string.");
+}
+function toDisplayUrl(source, cache) {
+  const existing = cache.get(source);
+  if (existing) return existing;
+  if (!source.startsWith("data:")) return source;
+  const comma = source.indexOf(",");
+  if (comma === -1) return source;
+  const header = source.slice(0, comma);
+  const data = source.slice(comma + 1);
+  const mime = header.match(/^data:([^;,]+)/i)?.[1] ?? "image/png";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  const url = URL.createObjectURL(new Blob([bytes], { type: mime }));
+  cache.set(source, url);
+  return url;
 }
 var RainBackground = class {
   element;
+  objectUrls = [];
   constructor(options = {}) {
     const {
       images = [...BUILTIN_RAIN_IMAGES],
       density = 28,
       minSize = 28,
-      maxSize = 28,
+      maxSize = 72,
       minDuration = 8,
       maxDuration = 18,
       target = document.body,
@@ -374,8 +401,11 @@ var RainBackground = class {
     this.element.className = "helaui-rain-background";
     this.element.setAttribute("aria-hidden", "true");
     this.element.style.zIndex = String(zIndex);
+    const urlCache = /* @__PURE__ */ new Map();
+    const resolved = images.map((image) => toDisplayUrl(toImageUrl(image), urlCache));
+    this.objectUrls.push(...new Set(urlCache.values()));
     for (let index = 0; index < density; index += 1) {
-      this.element.appendChild(this.createDrop(images, minSize, maxSize, minDuration, maxDuration));
+      this.element.appendChild(this.createDrop(resolved, minSize, maxSize, minDuration, maxDuration));
     }
     target.prepend(this.element);
   }
@@ -383,9 +413,16 @@ var RainBackground = class {
     const drop = document.createElement("div");
     const duration = randomBetween(minDuration, maxDuration);
     const size = randomBetween(minSize, maxSize);
-    const src = toImageUrl(pick(images));
+    const src = pick(images);
+    const img = document.createElement("img");
+    img.className = "helaui-rain-background__image";
+    img.src = src;
+    img.alt = "";
+    img.draggable = false;
+    img.decoding = "async";
+    img.loading = "eager";
+    img.setAttribute("fetchpriority", "high");
     drop.className = "helaui-rain-background__drop";
-    drop.style.backgroundImage = `url(${JSON.stringify(src)})`;
     drop.style.setProperty("--helaui-rain-x", `${randomBetween(0, 100)}%`);
     drop.style.setProperty("--helaui-rain-size", `${size}px`);
     drop.style.setProperty("--helaui-rain-duration", `${duration.toFixed(2)}s`);
@@ -393,11 +430,14 @@ var RainBackground = class {
     drop.style.setProperty("--helaui-rain-rotation", `${randomBetween(-35, 35).toFixed(1)}deg`);
     drop.style.setProperty("--helaui-rain-spin", `${randomBetween(90, 360).toFixed(0)}deg`);
     drop.style.setProperty("--helaui-rain-drift", `${randomBetween(-40, 40).toFixed(0)}px`);
+    drop.appendChild(img);
     return drop;
   }
   /** Removes the background from the DOM. */
   destroy() {
     this.element.remove();
+    for (const url of this.objectUrls) URL.revokeObjectURL(url);
+    this.objectUrls.length = 0;
   }
 };
 var DEFAULT_RAIN_IMAGES = ["fritter.png", "swirl.png", "kokis.png", "leaf.png"];

package/dist/rain-background.css

@@ -17,9 +17,14 @@
   animation: helaui-rain-fall var(--helaui-rain-duration, 10s) linear infinite;
   animation-delay: var(--helaui-rain-delay, 0s);
   transform: rotate(var(--helaui-rain-rotation, 0deg));
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+}
+
+.helaui-rain-background__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
 }
 
 @keyframes helaui-rain-fall {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mccustomapps/helaui",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "HelaUI components with Sinhala font support",
   "author": "mccustomapps",
   "license": "MIT",