clefbase 1.2.4 → 1.3.1

package/dist/cli.js

@@ -34405,7 +34405,7 @@ async function runSitesList(cwd = process.cwd()) {
 }
 
 // package.json
-var version = "1.2.4";
+var version = "1.3.1";
 
 // src/cli/index.ts
 var program2 = new Command();

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { Database, CollectionReference, DocumentReference, Query } from "./db";
 export { Auth } from "./auth";
 export { ClefbaseStorage, StorageReference, BucketReference } from "./storage";
 export type { StorageFile } from "./storage";
+export type { StorageImageStatus } from "./react/StorageImage";
 export { ClefbaseHosting, SiteReference } from "./hosting";
 export type { HostingSite, HostingDeploy, HostingFile, DeployResult, DeployOptions, HostingStatus, DeployStatus, } from "./hosting";
 export type { ClefbaseConfig, ClefbaseDocument, QueryOptions, QueryResult, FilterOperator, WhereClause, WhereValue, AuthUser, AuthSession, AuthResult, } from "./types";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,MAAM,EACN,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,GACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG/E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC/E,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC3D,YAAY,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,GACb,MAAM,WAAW,CAAC;AAGnB,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,MAAM,EACN,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,GACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG/E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC/E,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC3D,YAAY,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,GACb,MAAM,WAAW,CAAC;AAGnB,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,iFAAiF;AACjF,6BAQe;AAPb,kGAAA,WAAW,OAAA;AACX,mGAAA,YAAY,OAAA;AACZ,6FAAA,MAAM,OAAA;AACN,kGAAA,WAAW,OAAA;AACX,8FAAA,OAAO,OAAA;AACP,iGAAA,UAAU,OAAA;AACV,iGAAA,UAAU,OAAA;AAGZ,iFAAiF;AACjF,2BAA+E;AAAtE,8FAAA,QAAQ,OAAA;AAAE,yGAAA,mBAAmB,OAAA;AAAE,uGAAA,iBAAiB,OAAA;AAAE,2FAAA,KAAK,OAAA;AAEhE,iFAAiF;AACjF,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AAEb,iFAAiF;AACjF,qCAA+E;AAAtE,0GAAA,eAAe,OAAA;AAAE,2GAAA,gBAAgB,OAAA;AAAE,0GAAA,eAAe,OAAA;AAG3D,iFAAiF;AACjF,qCAA2D;AAAlD,0GAAA,eAAe,OAAA;AAAE,wGAAA,aAAa,OAAA;AAyBvC,iCAAwC;AAA/B,sGAAA,aAAa,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,iFAAiF;AACjF,6BAQe;AAPb,kGAAA,WAAW,OAAA;AACX,mGAAA,YAAY,OAAA;AACZ,6FAAA,MAAM,OAAA;AACN,kGAAA,WAAW,OAAA;AACX,8FAAA,OAAO,OAAA;AACP,iGAAA,UAAU,OAAA;AACV,iGAAA,UAAU,OAAA;AAGZ,iFAAiF;AACjF,2BAA+E;AAAtE,8FAAA,QAAQ,OAAA;AAAE,yGAAA,mBAAmB,OAAA;AAAE,uGAAA,iBAAiB,OAAA;AAAE,2FAAA,KAAK,OAAA;AAEhE,iFAAiF;AACjF,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AAEb,iFAAiF;AACjF,qCAA+E;AAAtE,0GAAA,eAAe,OAAA;AAAE,2GAAA,gBAAgB,OAAA;AAAE,0GAAA,eAAe,OAAA;AAW3D,iFAAiF;AACjF,qCAA2D;AAAlD,0GAAA,eAAe,OAAA;AAAE,wGAAA,aAAa,OAAA;AAyBvC,iCAAwC;AAA/B,sGAAA,aAAa,OAAA"}

package/dist/react/StorageImage.d.ts

@@ -0,0 +1,77 @@
+import React, { type ImgHTMLAttributes } from "react";
+import type { ClefbaseStorage } from "../storage";
+export type StorageImageStatus = "loading" | "loaded" | "error";
+export interface StorageImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> {
+    /**
+     * The ClefbaseStorage instance returned by `getStorage(app)`.
+     */
+    storage: ClefbaseStorage;
+    /**
+     * Path inside the default bucket, e.g. `"avatars/user-123.jpg"`.
+     * Mutually exclusive with `bucket` + `path`.
+     */
+    src?: string;
+    /**
+     * Named bucket to read from. Pair with `path`.
+     */
+    bucket?: string;
+    /**
+     * File path inside `bucket`.
+     */
+    path?: string;
+    /**
+     * Shown while the download URL is being resolved.
+     * Accepts a URL string or any React node.
+     */
+    placeholder?: React.ReactNode | string;
+    /**
+     * Shown when the URL cannot be resolved or the image fails to load.
+     * Accepts a URL string or any React node.
+     */
+    fallback?: React.ReactNode | string;
+    /**
+     * Called with the resolved download URL once ready.
+     */
+    onResolve?: (url: string) => void;
+    /**
+     * Called if URL resolution or image loading fails.
+     */
+    onError?: (err: unknown) => void;
+    /**
+     * Called whenever the loading status changes.
+     */
+    onStatusChange?: (status: StorageImageStatus) => void;
+}
+/**
+ * A drop-in replacement for `<img>` that resolves Clefbase storage paths to
+ * authenticated download URLs automatically.
+ *
+ * @example — default bucket
+ * ```tsx
+ * const storage = getStorage(app);
+ *
+ * <StorageImage
+ *   storage={storage}
+ *   src="avatars/user-123.jpg"
+ *   alt="User avatar"
+ *   width={64}
+ *   height={64}
+ *   style={{ borderRadius: "50%" }}
+ * />
+ * ```
+ *
+ * @example — named bucket
+ * ```tsx
+ * <StorageImage
+ *   storage={storage}
+ *   bucket="media"
+ *   path="products/shoe.webp"
+ *   alt="Product photo"
+ *   placeholder={<Spinner />}
+ *   fallback={<img src="/no-image.svg" alt="Not found" />}
+ * />
+ * ```
+ */
+export declare const StorageImage: React.ForwardRefExoticComponent<StorageImageProps & React.RefAttributes<HTMLImageElement>>;
+export default StorageImage;
+//# sourceMappingURL=StorageImage.d.ts.map

package/dist/react/StorageImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageImage.d.ts","sourceRoot":"","sources":["../../src/react/StorageImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAIlD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACxD;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC;IAEzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,YAAY,4FAuKxB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/react/StorageImage.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StorageImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// ─── StorageImage ─────────────────────────────────────────────────────────────
+/**
+ * A drop-in replacement for `<img>` that resolves Clefbase storage paths to
+ * authenticated download URLs automatically.
+ *
+ * @example — default bucket
+ * ```tsx
+ * const storage = getStorage(app);
+ *
+ * <StorageImage
+ *   storage={storage}
+ *   src="avatars/user-123.jpg"
+ *   alt="User avatar"
+ *   width={64}
+ *   height={64}
+ *   style={{ borderRadius: "50%" }}
+ * />
+ * ```
+ *
+ * @example — named bucket
+ * ```tsx
+ * <StorageImage
+ *   storage={storage}
+ *   bucket="media"
+ *   path="products/shoe.webp"
+ *   alt="Product photo"
+ *   placeholder={<Spinner />}
+ *   fallback={<img src="/no-image.svg" alt="Not found" />}
+ * />
+ * ```
+ */
+exports.StorageImage = (0, react_1.forwardRef)(function StorageImage({ storage, src, bucket, path, placeholder, fallback, onResolve, onError, onStatusChange, alt = "", ...imgProps }, ref) {
+    // Resolve the URL synchronously where possible (_directUrl is pure/sync)
+    // to avoid an async waterfall that exhausts the browser's per-host
+    // connection pool (typically 6 connections) when many cards mount at once.
+    const getDirectUrl = () => {
+        try {
+            if (bucket && path)
+                return storage._directUrl(bucket, path);
+            if (src)
+                return storage._directUrl(storage["_defaultBucket"] ?? "default", src);
+            return null;
+        }
+        catch {
+            return null;
+        }
+    };
+    const initialUrl = getDirectUrl();
+    const [resolvedUrl, setResolvedUrl] = (0, react_1.useState)(initialUrl);
+    const [status, setStatus] = (0, react_1.useState)(initialUrl ? "loaded" : "loading");
+    // Keep a ref to the latest callbacks so the effect closure stays stable.
+    const onResolveRef = (0, react_1.useRef)(onResolve);
+    const onErrorRef = (0, react_1.useRef)(onError);
+    const onStatusRef = (0, react_1.useRef)(onStatusChange);
+    onResolveRef.current = onResolve;
+    onErrorRef.current = onError;
+    onStatusRef.current = onStatusChange;
+    // Determine the key that uniquely identifies the requested file.
+    const fileKey = bucket && path ? `${bucket}::${path}` : src ?? null;
+    (0, react_1.useEffect)(() => {
+        // If we already resolved synchronously, notify callers and skip the
+        // async effect entirely — no extra network round-trip needed.
+        if (initialUrl) {
+            onResolveRef.current?.(initialUrl);
+            return;
+        }
+        if (!fileKey)
+            return;
+        let cancelled = false;
+        setStatus("loading");
+        onStatusRef.current?.("loading");
+        const resolve = async () => {
+            try {
+                let url;
+                if (bucket && path) {
+                    url = storage.bucket(bucket).ref(path).getDownloadURL
+                        ? await storage.bucket(bucket).ref(path).getDownloadURL()
+                        : storage._directUrl(bucket, path);
+                }
+                else if (src) {
+                    url = await storage.ref(src).getDownloadURL();
+                }
+                else {
+                    throw new Error("StorageImage: provide either `src` or both `bucket` + `path`.");
+                }
+                if (cancelled)
+                    return;
+                setResolvedUrl(url);
+                onResolveRef.current?.(url);
+                // status moves to "loaded" in the <img> onLoad handler below
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setStatus("error");
+                onStatusRef.current?.("error");
+                onErrorRef.current?.(err);
+            }
+        };
+        resolve();
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fileKey]);
+    // ── Render helpers ────────────────────────────────────────────────────────
+    const handleLoad = () => {
+        setStatus("loaded");
+        onStatusRef.current?.("loaded");
+    };
+    const handleImgError = (e) => {
+        setStatus("error");
+        onStatusRef.current?.("error");
+        onErrorRef.current?.(e);
+    };
+    // Show placeholder while resolving URL
+    if (status === "loading" && !resolvedUrl) {
+        if (placeholder === undefined) {
+            // Invisible img keeps layout stable
+            return ((0, jsx_runtime_1.jsx)("img", { ...imgProps, ref: ref, src: "", alt: alt, style: { ...imgProps.style, visibility: "hidden" } }));
+        }
+        if (typeof placeholder === "string") {
+            return ((0, jsx_runtime_1.jsx)("img", { ...imgProps, ref: ref, src: placeholder, alt: alt }));
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: placeholder });
+    }
+    // Show fallback on error
+    if (status === "error" || !resolvedUrl) {
+        if (fallback === undefined) {
+            return ((0, jsx_runtime_1.jsx)("img", { ...imgProps, ref: ref, src: "", alt: alt, style: { ...imgProps.style, visibility: "hidden" } }));
+        }
+        if (typeof fallback === "string") {
+            return (0, jsx_runtime_1.jsx)("img", { ...imgProps, ref: ref, src: fallback, alt: alt });
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
+    }
+    // Resolved — render the real image.
+    // `loading="lazy"` defers off-screen fetches so the browser never
+    // saturates its per-host connection pool (typically 6) when many
+    // cards render simultaneously. Callers may override with loading="eager".
+    return ((0, jsx_runtime_1.jsx)("img", { loading: "lazy", ...imgProps, ref: ref, src: resolvedUrl, alt: alt, onLoad: handleLoad, onError: handleImgError }));
+});
+exports.StorageImage.displayName = "StorageImage";
+exports.default = exports.StorageImage;
+//# sourceMappingURL=StorageImage.js.map

package/dist/react/StorageImage.js.map

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

package/dist/vue/StorageImage.d.ts

@@ -0,0 +1,101 @@
+/**
+ * StorageImage for Vue 3 — plain TypeScript, no SFC compiler needed.
+ *
+ * Place at: src/vue/StorageImage.ts
+ *
+ * @example
+ * import { StorageImage } from "clefbase/vue";
+ *
+ * // Template usage:
+ * <StorageImage :storage="storage" src="avatars/user-123.jpg" alt="Avatar" />
+ *
+ * // Named bucket + slots:
+ * <StorageImage :storage="storage" bucket="media" path="photo.webp" alt="Photo">
+ *   <template #placeholder><Spinner /></template>
+ *   <template #fallback><img src="/no-image.svg" alt="" /></template>
+ * </StorageImage>
+ */
+import { type PropType } from "vue";
+import type { ClefbaseStorage } from "../storage";
+export type StorageImageStatus = "loading" | "loaded" | "error";
+export declare const StorageImage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** The ClefbaseStorage instance returned by `getStorage(app)`. */
+    storage: {
+        type: PropType<ClefbaseStorage>;
+        required: true;
+    };
+    /**
+     * Path inside the default bucket, e.g. `"avatars/user-123.jpg"`.
+     * Mutually exclusive with `bucket` + `path`.
+     */
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Named bucket to read from. Pair with `path`. */
+    bucket: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** File path inside `bucket`. */
+    path: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Alt text forwarded to the underlying <img>. */
+    alt: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** Emitted with the resolved download URL once ready. */
+    resolve: (_url: string) => true;
+    /** Emitted if URL resolution or image loading fails. */
+    error: (_err: unknown) => true;
+    /** Emitted whenever the loading status changes. */
+    "status-change": (_status: StorageImageStatus) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** The ClefbaseStorage instance returned by `getStorage(app)`. */
+    storage: {
+        type: PropType<ClefbaseStorage>;
+        required: true;
+    };
+    /**
+     * Path inside the default bucket, e.g. `"avatars/user-123.jpg"`.
+     * Mutually exclusive with `bucket` + `path`.
+     */
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Named bucket to read from. Pair with `path`. */
+    bucket: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** File path inside `bucket`. */
+    path: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Alt text forwarded to the underlying <img>. */
+    alt: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onError?: ((_err: unknown) => any) | undefined;
+    onResolve?: ((_url: string) => any) | undefined;
+    "onStatus-change"?: ((_status: StorageImageStatus) => any) | undefined;
+}>, {
+    src: string;
+    bucket: string;
+    path: string;
+    alt: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default StorageImage;
+//# sourceMappingURL=StorageImage.d.ts.map

package/dist/vue/StorageImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageImage.d.ts","sourceRoot":"","sources":["../../src/vue/StorageImage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,eAAO,MAAM,YAAY;IAMrB,kEAAkE;;cAEhD,QAAQ,CAAC,eAAe,CAAC;;;IAG3C;;;OAGG;;;;;IAKH,mDAAmD;;;;;IAKnD,iCAAiC;;;;;IAKjC,kDAAkD;;;;;;;;;;IAQlD,yDAAyD;oBACzC,MAAM;IACtB,wDAAwD;kBAC1C,OAAO;IACrB,mDAAmD;+BACxB,kBAAkB;;IApC7C,kEAAkE;;cAEhD,QAAQ,CAAC,eAAe,CAAC;;;IAG3C;;;OAGG;;;;;IAKH,mDAAmD;;;;;IAKnD,iCAAiC;;;;;IAKjC,kDAAkD;;;;;;;;;;;;;;4EAuGpD,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/vue/StorageImage.js

@@ -0,0 +1,138 @@
+"use strict";
+/**
+ * StorageImage for Vue 3 — plain TypeScript, no SFC compiler needed.
+ *
+ * Place at: src/vue/StorageImage.ts
+ *
+ * @example
+ * import { StorageImage } from "clefbase/vue";
+ *
+ * // Template usage:
+ * <StorageImage :storage="storage" src="avatars/user-123.jpg" alt="Avatar" />
+ *
+ * // Named bucket + slots:
+ * <StorageImage :storage="storage" bucket="media" path="photo.webp" alt="Photo">
+ *   <template #placeholder><Spinner /></template>
+ *   <template #fallback><img src="/no-image.svg" alt="" /></template>
+ * </StorageImage>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StorageImage = void 0;
+const vue_1 = require("vue");
+exports.StorageImage = (0, vue_1.defineComponent)({
+    name: "StorageImage",
+    inheritAttrs: false,
+    props: {
+        /** The ClefbaseStorage instance returned by `getStorage(app)`. */
+        storage: {
+            type: Object,
+            required: true,
+        },
+        /**
+         * Path inside the default bucket, e.g. `"avatars/user-123.jpg"`.
+         * Mutually exclusive with `bucket` + `path`.
+         */
+        src: {
+            type: String,
+            default: undefined,
+        },
+        /** Named bucket to read from. Pair with `path`. */
+        bucket: {
+            type: String,
+            default: undefined,
+        },
+        /** File path inside `bucket`. */
+        path: {
+            type: String,
+            default: undefined,
+        },
+        /** Alt text forwarded to the underlying <img>. */
+        alt: {
+            type: String,
+            default: "",
+        },
+    },
+    emits: {
+        /** Emitted with the resolved download URL once ready. */
+        resolve: (_url) => true,
+        /** Emitted if URL resolution or image loading fails. */
+        error: (_err) => true,
+        /** Emitted whenever the loading status changes. */
+        "status-change": (_status) => true,
+    },
+    setup(props, { attrs, slots, emit }) {
+        const resolvedUrl = (0, vue_1.ref)(null);
+        const status = (0, vue_1.ref)("loading");
+        let cancelled = false;
+        async function resolveUrl() {
+            cancelled = true; // cancel any in-flight request
+            cancelled = false;
+            resolvedUrl.value = null;
+            status.value = "loading";
+            emit("status-change", "loading");
+            // Snapshot cancellation flag for this call's closure
+            const thisCancelled = () => cancelled;
+            try {
+                let url;
+                if (props.bucket && props.path) {
+                    url = await props.storage
+                        .bucket(props.bucket)
+                        .ref(props.path)
+                        .getDownloadURL();
+                }
+                else if (props.src) {
+                    url = await props.storage.ref(props.src).getDownloadURL();
+                }
+                else {
+                    throw new Error("StorageImage: provide either `src` or both `bucket` + `path`.");
+                }
+                if (thisCancelled())
+                    return;
+                resolvedUrl.value = url;
+                emit("resolve", url);
+                // status → "loaded" is set in the img onLoad handler
+            }
+            catch (err) {
+                if (thisCancelled())
+                    return;
+                status.value = "error";
+                emit("status-change", "error");
+                emit("error", err);
+            }
+        }
+        (0, vue_1.watch)(() => [props.src, props.bucket, props.path], () => resolveUrl(), { immediate: true });
+        (0, vue_1.onUnmounted)(() => {
+            cancelled = true;
+        });
+        function handleLoad() {
+            status.value = "loaded";
+            emit("status-change", "loaded");
+        }
+        function handleError(e) {
+            status.value = "error";
+            emit("status-change", "error");
+            emit("error", e);
+        }
+        return () => {
+            if (status.value === "loading" && !resolvedUrl.value) {
+                return slots.placeholder
+                    ? slots.placeholder()
+                    : (0, vue_1.h)("img", { ...attrs, src: "", alt: props.alt, style: "visibility:hidden" });
+            }
+            if (status.value === "error" || !resolvedUrl.value) {
+                return slots.fallback
+                    ? slots.fallback()
+                    : (0, vue_1.h)("img", { ...attrs, src: "", alt: props.alt, style: "visibility:hidden" });
+            }
+            return (0, vue_1.h)("img", {
+                ...attrs,
+                src: resolvedUrl.value,
+                alt: props.alt,
+                onLoad: handleLoad,
+                onError: handleError,
+            });
+        };
+    },
+});
+exports.default = exports.StorageImage;
+//# sourceMappingURL=StorageImage.js.map

package/dist/vue/StorageImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageImage.js","sourceRoot":"","sources":["../../src/vue/StorageImage.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;GAgBG;;;AAEH,6BAOa;AAKA,QAAA,YAAY,GAAG,IAAA,qBAAe,EAAC;IAC1C,IAAI,EAAE,cAAc;IAEpB,YAAY,EAAE,KAAK;IAEnB,KAAK,EAAE;QACL,kEAAkE;QAClE,OAAO,EAAE;YACP,IAAI,EAAE,MAAmC;YACzC,QAAQ,EAAE,IAAI;SACf;QACD;;;WAGG;QACH,GAAG,EAAE;YACH,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;SACnB;QACD,mDAAmD;QACnD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;SACnB;QACD,iCAAiC;QACjC,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;SACnB;QACD,kDAAkD;QAClD,GAAG,EAAE;YACH,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;KACF;IAED,KAAK,EAAE;QACL,yDAAyD;QACzD,OAAO,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI;QAC/B,wDAAwD;QACxD,KAAK,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI;QAC9B,mDAAmD;QACnD,eAAe,EAAE,CAAC,OAA2B,EAAE,EAAE,CAAC,IAAI;KACvD;IAED,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;QACjC,MAAM,WAAW,GAAG,IAAA,SAAG,EAAgB,IAAI,CAAC,CAAC;QAC7C,MAAM,MAAM,GAAG,IAAA,SAAG,EAAqB,SAAS,CAAC,CAAC;QAClD,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,KAAK,UAAU,UAAU;YACvB,SAAS,GAAG,IAAI,CAAC,CAAC,+BAA+B;YACjD,SAAS,GAAG,KAAK,CAAC;YAElB,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC;YACzB,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;YAEjC,qDAAqD;YACrD,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC;YAEtC,IAAI,CAAC;gBACH,IAAI,GAAW,CAAC;gBAEhB,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;oBAC/B,GAAG,GAAG,MAAM,KAAK,CAAC,OAAO;yBACtB,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;yBACpB,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;yBACf,cAAc,EAAE,CAAC;gBACtB,CAAC;qBAAM,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC;oBACrB,GAAG,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC5D,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;gBACJ,CAAC;gBAED,IAAI,aAAa,EAAE;oBAAE,OAAO;gBAC5B,WAAW,CAAC,KAAK,GAAG,GAAG,CAAC;gBACxB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;gBACrB,qDAAqD;YACvD,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,aAAa,EAAE;oBAAE,OAAO;gBAC5B,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC;gBACvB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC/B,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QAED,IAAA,WAAK,EACH,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAU,EACpD,GAAG,EAAE,CAAC,UAAU,EAAE,EAClB,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAC;QAEF,IAAA,iBAAW,EAAC,GAAG,EAAE;YACf,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,SAAS,UAAU;YACjB,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC;YACxB,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;QAClC,CAAC;QAED,SAAS,WAAW,CAAC,CAAQ;YAC3B,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC/B,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;gBACrD,OAAO,KAAK,CAAC,WAAW;oBACtB,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE;oBACrB,CAAC,CAAC,IAAA,OAAC,EAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC;YAClF,CAAC;YAED,IAAI,MAAM,CAAC,KAAK,KAAK,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;gBACnD,OAAO,KAAK,CAAC,QAAQ;oBACnB,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE;oBAClB,CAAC,CAAC,IAAA,OAAC,EAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC;YAClF,CAAC;YAED,OAAO,IAAA,OAAC,EAAC,KAAK,EAAE;gBACd,GAAG,KAAK;gBACR,GAAG,EAAE,WAAW,CAAC,KAAK;gBACtB,GAAG,EAAE,KAAK,CAAC,GAAG;gBACd,MAAM,EAAE,UAAU;gBAClB,OAAO,EAAE,WAAW;aACrB,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,kBAAe,oBAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clefbase",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "description": "Firebase-style SDK and CLI for Clefbase — database, auth, storage, and hosting",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,11 @@
       "require": "./dist/index.js",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "require": "./dist/react/StorageImage.js",
+      "import": "./dist/react/StorageImage.js",
+      "types": "./dist/react/StorageImage.d.ts"
     }
   },
   "files": [
@@ -40,7 +45,7 @@
     "firebase-alternative",
     "cli"
   ],
-  "author": "",
+  "author": "Cleforyx",
   "license": "MIT",
   "dependencies": {
     "form-data": "^4.0.0",
@@ -49,13 +54,22 @@
   "devDependencies": {
     "@types/inquirer": "^9.0.9",
     "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
     "esbuild": "^0.21.0",
     "typescript": "^5.0.0"
   },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
   "optionalDependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
     "inquirer": "^9.2.23",
     "ora": "^8.0.1"
   }
-}
+}