@manyrows/appkit-react 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -10,6 +10,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 // src/AppKit.tsx
 
 // src/runtime.ts
+function isSafeOrigin(url) {
+  const s = (url || "").trim().toLowerCase();
+  if (s.startsWith("https://")) return true;
+  if (s.startsWith("http://localhost") || s.startsWith("http://127.0.0.1") || s.startsWith("http://0.0.0.0")) return true;
+  return false;
+}
 function getManyRowsAppKitRuntime() {
   const w = window;
   if (w.ManyRows?.AppKit?.init) return w.ManyRows.AppKit;
@@ -28,7 +34,14 @@ function ensureScriptLoaded(src, timeoutMs) {
       resolve();
       return;
     }
-    if (document.querySelector(`script[data-manyrows-appkit="true"][src="${src}"]`)) {
+    if (!isSafeOrigin(src)) {
+      reject(new Error(`Refused to load AppKit script from non-HTTPS origin: ${src}`));
+      return;
+    }
+    const existing = Array.from(document.querySelectorAll('script[data-manyrows-appkit="true"]')).find(
+      (el) => el.getAttribute("src") === src
+    );
+    if (existing) {
       resolve();
       return;
     }
@@ -89,9 +102,28 @@ function isProbablyProdBuild() {
   return env === "production";
 }
 function looksLikeLocalhost(url) {
-  const s = (url || "").trim().toLowerCase();
+  const s = (url).trim().toLowerCase();
   return s.startsWith("http://localhost") || s.startsWith("https://localhost") || s.startsWith("http://127.0.0.1") || s.startsWith("https://127.0.0.1") || s.startsWith("http://0.0.0.0") || s.startsWith("https://0.0.0.0");
 }
+function assertSafeURLs(baseURL, src, report) {
+  if (!isSafeOrigin(baseURL)) {
+    report(
+      mkErr("BASE_URL_NOT_ALLOWED_IN_PROD", "baseURL must use HTTPS (or localhost for development).", {
+        baseURL
+      })
+    );
+    return false;
+  }
+  if (!isSafeOrigin(src)) {
+    report(
+      mkErr("SCRIPT_LOAD_FAILED", "Script src must use HTTPS (or localhost for development).", {
+        src
+      })
+    );
+    return false;
+  }
+  return true;
+}
 function isAuthedSnapshot(s) {
   if (!s || typeof s !== "object") return false;
   const status = s.status;
@@ -111,6 +143,7 @@ function AppKitAuthed(props) {
   if (!isAuthenticated) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.fallback ?? null });
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
 }
+var DEFAULT_BASE_URL = "https://app.manyrows.com";
 function mkErr(code, message, details) {
   return { code, message, details };
 }
@@ -134,7 +167,7 @@ function DefaultError({ err }) {
           ": ",
           err.message
         ] }),
-        err.details !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        err.details !== void 0 && !isProbablyProdBuild() ? /* @__PURE__ */ jsxRuntime.jsx(
           "pre",
           {
             style: {
@@ -154,14 +187,16 @@ function DefaultError({ err }) {
 function AppKit(props) {
   const autoId = React.useId();
   const containerId = props.containerId ?? `manyrows-appkit-${autoId.replace(/[:]/g, "")}`;
+  const resolvedBaseURL = props.baseURL?.trim() || DEFAULT_BASE_URL;
+  const resolvedSrc = props.src?.trim() || `${resolvedBaseURL}/appkit/assets/appkit.js`;
   const hasChildren = React__default.default.Children.count(props.children) > 0;
   const initKey = React.useMemo(
     () => [
       containerId,
       props.workspace,
       props.appId,
-      props.baseURL ?? "",
-      props.src ?? "",
+      resolvedBaseURL,
+      resolvedSrc,
       props.runtimeMinVersion ?? "",
       props.runtimeExactVersion ?? "",
       props.allowDevEnvInProd ? "1" : "0",
@@ -172,8 +207,8 @@ function AppKit(props) {
       containerId,
       props.workspace,
       props.appId,
-      props.baseURL,
-      props.src,
+      resolvedBaseURL,
+      resolvedSrc,
       props.runtimeMinVersion,
       props.runtimeExactVersion,
       props.allowDevEnvInProd,
@@ -182,6 +217,7 @@ function AppKit(props) {
     ]
   );
   const handleRef = React.useRef(null);
+  const [handle, setHandle] = React.useState(null);
   const [status, setStatus] = React.useState("idle");
   const [lastError, setLastError] = React.useState(null);
   const [readyInfo, setReadyInfo] = React.useState(null);
@@ -193,6 +229,7 @@ function AppKit(props) {
     setReadyInfo(null);
     setSnapshot(null);
     handleRef.current = null;
+    setHandle(null);
     const report = (err) => {
       setLastError(err);
       setStatus("error");
@@ -211,22 +248,21 @@ function AppKit(props) {
         );
         return;
       }
+      if (!assertSafeURLs(resolvedBaseURL, resolvedSrc, report)) return;
       const prod = isProbablyProdBuild();
-      if (prod && props.blockLocalhostBaseURLInProd !== false && props.baseURL && looksLikeLocalhost(props.baseURL)) {
+      if (prod && props.blockLocalhostBaseURLInProd !== false && looksLikeLocalhost(resolvedBaseURL)) {
         report(
           mkErr(
             "BASE_URL_NOT_ALLOWED_IN_PROD",
             "localhost baseURL is not allowed in production builds.",
-            { baseURL: props.baseURL }
+            { baseURL: resolvedBaseURL }
           )
         );
         return;
       }
       try {
-        const timeoutMs = props.timeoutMs ?? (props.src ? 4e3 : 2500);
-        if (props.src) {
-          await ensureScriptLoaded(props.src, timeoutMs);
-        }
+        const timeoutMs = props.timeoutMs ?? 4e3;
+        await ensureScriptLoaded(resolvedSrc, timeoutMs);
         const start = Date.now();
         while (!getManyRowsAppKitRuntime() && Date.now() - start < timeoutMs) {
           if (cancelled) return;
@@ -236,9 +272,9 @@ function AppKit(props) {
         if (!api) {
           report(
             mkErr(
-              props.src ? "SCRIPT_TIMEOUT" : "RUNTIME_NOT_FOUND",
-              props.src ? `AppKit runtime not found after loading script: ${props.src}` : "AppKit runtime not found.",
-              { src: props.src }
+              "SCRIPT_TIMEOUT",
+              `AppKit runtime not found after loading script: ${resolvedSrc}`,
+              { src: resolvedSrc }
             )
           );
           return;
@@ -278,15 +314,15 @@ function AppKit(props) {
             return;
           }
         }
-        const handle = api.init({
+        const h = api.init({
           containerId,
           workspace: props.workspace.trim(),
           appId: props.appId.trim(),
-          baseURL: props.baseURL,
+          baseURL: resolvedBaseURL,
           theme: props.theme,
           silent: props.silent,
           throwOnError: props.throwOnError,
-          // ✅ If host provides children, hide runtime default authed UI.
+          // If host provides children, hide runtime default authed UI.
           // Runtime will still render login / errors / forbidden screens as normal.
           renderAuthed: hasChildren ? (() => null) : void 0,
           onReady: (info) => {
@@ -309,7 +345,8 @@ function AppKit(props) {
             report(mkErr("RUNTIME_ERROR", "AppKit runtime error.", e));
           }
         });
-        handleRef.current = handle ?? null;
+        handleRef.current = h ?? null;
+        setHandle(h ?? null);
       } catch (e) {
         report(mkErr("SCRIPT_LOAD_FAILED", "Failed to load AppKit script.", { error: e }));
       }
@@ -327,52 +364,52 @@ function AppKit(props) {
       } catch {
       }
       handleRef.current = null;
+      setHandle(null);
     };
   }, [initKey]);
   const showLoading = status === "loading" && !props.hideLoadingUI;
   const showError = status === "error" && !!lastError && !props.hideErrorUI;
   const ctx = React.useMemo(() => {
-    const h = handleRef.current;
     return {
       status,
       error: lastError,
       readyInfo,
       snapshot,
       isAuthenticated: isAuthedSnapshot(snapshot),
-      handle: h,
+      handle,
       refresh: () => {
         try {
-          h?.refresh?.();
+          handle?.refresh?.();
         } catch {
         }
       },
       logout: async () => {
         try {
-          await h?.logout?.();
+          await handle?.logout?.();
         } catch {
         }
       },
       setToken: (tok) => {
         try {
-          h?.setToken?.(tok);
+          handle?.setToken?.(tok);
         } catch {
         }
       },
       destroy: () => {
         try {
-          h?.destroy?.();
+          handle?.destroy?.();
         } catch {
         }
       },
       info: () => {
         try {
-          return h?.info?.() ?? null;
+          return handle?.info?.() ?? null;
         } catch {
           return null;
         }
       }
     };
-  }, [status, lastError, readyInfo, snapshot]);
+  }, [status, lastError, readyInfo, snapshot, handle]);
   return /* @__PURE__ */ jsxRuntime.jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.className, style: props.style, children: [
     showLoading && props.loading ? props.loading : null,
     showError && lastError ? props.errorUI ? props.errorUI(lastError) : /* @__PURE__ */ jsxRuntime.jsx(DefaultError, { err: lastError }) : null,
@@ -813,9 +850,3831 @@ function ProfileModal({
   );
 }
 
+// src/hooks.ts
+function useUser() {
+  const { snapshot } = useAppKit();
+  return snapshot?.appData?.account ?? null;
+}
+function useProject() {
+  const { snapshot } = useAppKit();
+  return snapshot?.appData?.project ?? null;
+}
+function useRoles() {
+  const { snapshot } = useAppKit();
+  return snapshot?.appData?.project?.roles ?? [];
+}
+function usePermissions() {
+  const { snapshot } = useAppKit();
+  return snapshot?.appData?.project?.permissions ?? [];
+}
+function usePermission(permission) {
+  const perms = usePermissions();
+  return perms.includes(permission);
+}
+function useRole(role) {
+  const roles = useRoles();
+  return roles.includes(role);
+}
+function useFeatureFlags() {
+  const { snapshot } = useAppKit();
+  return snapshot?.appData?.featureFlags ?? [];
+}
+function useFeatureFlag(key) {
+  const flags = useFeatureFlags();
+  const flag = flags.find((f) => f.key === key);
+  return flag?.enabled ?? false;
+}
+function useConfig() {
+  const { snapshot } = useAppKit();
+  return snapshot?.appData?.config ?? [];
+}
+function useConfigValue(key, fallback) {
+  const config = useConfig();
+  const entry = config.find((c) => c.key === key);
+  return entry?.value !== void 0 ? entry.value : fallback;
+}
+function useToken() {
+  const { snapshot } = useAppKit();
+  return snapshot?.jwtToken ?? null;
+}
+
+// src/appResource.ts
+var cache = /* @__PURE__ */ new Map();
+var CACHE_TTL = 5 * 60 * 1e3;
+var inflight = /* @__PURE__ */ new Map();
+async function fetchAppResource(workspaceBaseURL, appId) {
+  const key = `${workspaceBaseURL}|${appId}`;
+  const cached = cache.get(key);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) return cached.data;
+  const pending = inflight.get(key);
+  if (pending) return pending;
+  const p = fetch(`${workspaceBaseURL}/apps/${appId}`).then((res) => {
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.json();
+  }).then((data) => {
+    const rawImages = data.imagesBaseURL || null;
+    const rawFiles = data.filesBaseURL || null;
+    const result = {
+      imagesBaseURL: rawImages && isSafeOrigin(rawImages) ? rawImages : null,
+      filesBaseURL: rawFiles && isSafeOrigin(rawFiles) ? rawFiles : null
+    };
+    cache.set(key, { data: result, fetchedAt: Date.now() });
+    inflight.delete(key);
+    return result;
+  }).catch((err) => {
+    inflight.delete(key);
+    throw err;
+  });
+  inflight.set(key, p);
+  return p;
+}
+
+// src/images/config.ts
+function useImagesConfig() {
+  const { snapshot } = useAppKit();
+  const [imagesBaseURL, setImagesBaseURL] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const fetchedRef = React.useRef("");
+  const retryCountRef = React.useRef(0);
+  const maxRetries = 3;
+  const retryDelayMs = 5e3;
+  const workspaceBaseURL = snapshot?.workspaceBaseURL;
+  const appId = snapshot?.appId;
+  React.useEffect(() => {
+    const cacheKey = workspaceBaseURL && appId ? `${workspaceBaseURL}|${appId}` : "";
+    if (fetchedRef.current !== cacheKey) {
+      fetchedRef.current = "";
+      retryCountRef.current = 0;
+    }
+  }, [workspaceBaseURL, appId]);
+  React.useEffect(() => {
+    if (!workspaceBaseURL || !appId) {
+      setLoading(false);
+      return;
+    }
+    const cacheKey = `${workspaceBaseURL}|${appId}`;
+    if (fetchedRef.current === cacheKey) return;
+    let cancelled = false;
+    let retryTimer = null;
+    setLoading(true);
+    setError(null);
+    const doFetch = () => {
+      fetchAppResource(workspaceBaseURL, appId).then((data) => {
+        if (cancelled) return;
+        setImagesBaseURL(data.imagesBaseURL);
+        setLoading(false);
+        fetchedRef.current = cacheKey;
+        retryCountRef.current = 0;
+      }).catch((err) => {
+        if (cancelled) return;
+        retryCountRef.current += 1;
+        if (retryCountRef.current < maxRetries) {
+          retryTimer = setTimeout(doFetch, retryDelayMs);
+        } else {
+          setError(err.message);
+          setLoading(false);
+        }
+      });
+    };
+    doFetch();
+    return () => {
+      cancelled = true;
+      if (retryTimer != null) clearTimeout(retryTimer);
+    };
+  }, [workspaceBaseURL, appId]);
+  return { imagesBaseURL, loading, error };
+}
+
+// src/images/api.ts
+function headers(jwt) {
+  return { Authorization: `Bearer ${jwt}` };
+}
+function apiBase(p) {
+  return `${p.imagesBaseURL}/api/${encodeURIComponent(p.appId)}`;
+}
+async function listImages(p, opts) {
+  const url = new URL(`${apiBase(p)}/images`);
+  if (opts?.page != null) url.searchParams.set("page", String(opts.page));
+  if (opts?.pageSize != null)
+    url.searchParams.set("pageSize", String(opts.pageSize));
+  if (opts?.q) url.searchParams.set("q", opts.q);
+  if (opts?.refType) url.searchParams.set("refType", opts.refType);
+  if (opts?.refId) url.searchParams.set("refId", opts.refId);
+  const res = await fetch(url.toString(), { headers: headers(p.jwtToken) });
+  if (!res.ok) throw new Error(`List images failed: HTTP ${res.status}`);
+  return res.json();
+}
+async function getImage(p, imageId) {
+  const res = await fetch(`${apiBase(p)}/images/${encodeURIComponent(imageId)}`, {
+    headers: headers(p.jwtToken)
+  });
+  if (!res.ok) throw new Error(`Get image failed: HTTP ${res.status}`);
+  return res.json();
+}
+function uploadImage(p, opts, onProgress, signal) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", `${apiBase(p)}/upload`);
+    xhr.setRequestHeader("Authorization", `Bearer ${p.jwtToken}`);
+    if (signal) {
+      signal.addEventListener("abort", () => xhr.abort(), { once: true });
+    }
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable && onProgress) {
+        const pct = Math.round(e.loaded / e.total * 100);
+        onProgress(pct, e.loaded, e.total);
+      }
+    };
+    xhr.onload = () => {
+      let body = null;
+      try {
+        body = JSON.parse(xhr.responseText);
+      } catch {
+      }
+      resolve({ status: xhr.status, body });
+    };
+    xhr.onerror = () => reject(new Error("Upload network error"));
+    xhr.onabort = () => reject(new Error("Upload aborted"));
+    const fd = new FormData();
+    fd.append("file", opts.file);
+    fd.append("title", opts.title);
+    if (opts.description) fd.append("description", opts.description);
+    if (opts.variants) fd.append("variants", opts.variants);
+    if (opts.refType) fd.append("refType", opts.refType);
+    if (opts.refId) fd.append("refId", opts.refId);
+    xhr.send(fd);
+  });
+}
+async function updateImage(p, imageId, opts) {
+  const res = await fetch(`${apiBase(p)}/images/${encodeURIComponent(imageId)}`, {
+    method: "POST",
+    headers: { ...headers(p.jwtToken), "Content-Type": "application/json" },
+    body: JSON.stringify(opts)
+  });
+  if (!res.ok) throw new Error(`Update image failed: HTTP ${res.status}`);
+}
+async function deleteImage(p, imageId) {
+  const res = await fetch(`${apiBase(p)}/images/${encodeURIComponent(imageId)}`, {
+    method: "DELETE",
+    headers: headers(p.jwtToken)
+  });
+  if (!res.ok) throw new Error(`Delete image failed: HTTP ${res.status}`);
+}
+
+// src/images/useImages.ts
+function useImages(opts) {
+  const { snapshot } = useAppKit();
+  const { imagesBaseURL, loading: configLoading } = useImagesConfig();
+  const [images, setImages] = React.useState([]);
+  const [page, setPageState] = React.useState(opts?.page ?? 0);
+  const [pageSize] = React.useState(opts?.pageSize ?? 50);
+  const [total, setTotal] = React.useState(0);
+  const [pageCount, setPageCount] = React.useState(0);
+  const [query, setQueryState] = React.useState(opts?.q ?? "");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const fetchIdRef = React.useRef(0);
+  const enabled = opts?.enabled !== false;
+  const jwtToken = snapshot?.jwtToken;
+  const appId = snapshot?.appId;
+  const available = !!imagesBaseURL;
+  const refType = opts?.refType;
+  const refId = opts?.refId;
+  const doFetch = React.useCallback(() => {
+    if (!imagesBaseURL || !appId || !jwtToken || !enabled) return;
+    const id = ++fetchIdRef.current;
+    setLoading(true);
+    setError(null);
+    listImages(
+      { imagesBaseURL, appId, jwtToken },
+      { page, pageSize, q: query || void 0, refType, refId }
+    ).then((res) => {
+      if (id !== fetchIdRef.current) return;
+      setImages(res.images ?? []);
+      setTotal(res.total);
+      setPageCount(res.pageCount);
+      setLoading(false);
+    }).catch((err) => {
+      if (id !== fetchIdRef.current) return;
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [imagesBaseURL, appId, jwtToken, page, pageSize, query, refType, refId, enabled]);
+  React.useEffect(() => {
+    doFetch();
+    return () => {
+      fetchIdRef.current++;
+    };
+  }, [doFetch]);
+  const setPage = React.useCallback((p) => setPageState(p), []);
+  const setQuery = React.useCallback((q) => {
+    setQueryState(q);
+    setPageState(0);
+  }, []);
+  const removeImage = React.useCallback(
+    async (imageId) => {
+      if (!imagesBaseURL || !appId || !jwtToken) return;
+      await deleteImage({ imagesBaseURL, appId, jwtToken }, imageId);
+      doFetch();
+    },
+    [imagesBaseURL, appId, jwtToken, doFetch]
+  );
+  const doUpdateImage = React.useCallback(
+    async (imageId, updateOpts) => {
+      if (!imagesBaseURL || !appId || !jwtToken) return;
+      await updateImage(
+        { imagesBaseURL, appId, jwtToken },
+        imageId,
+        updateOpts
+      );
+      doFetch();
+    },
+    [imagesBaseURL, appId, jwtToken, doFetch]
+  );
+  return {
+    images,
+    page,
+    pageSize,
+    total,
+    pageCount,
+    loading: loading || configLoading,
+    error,
+    refetch: doFetch,
+    setPage,
+    setQuery,
+    available,
+    removeImage,
+    updateImage: doUpdateImage
+  };
+}
+var IDLE = {
+  status: "idle",
+  progress: 0,
+  bytesUploaded: 0,
+  bytesTotal: 0,
+  error: null
+};
+function useImageUpload() {
+  const { snapshot } = useAppKit();
+  const { imagesBaseURL } = useImagesConfig();
+  const [progress, setProgress] = React.useState(IDLE);
+  const abortRef = React.useRef(null);
+  const jwtToken = snapshot?.jwtToken;
+  const appId = snapshot?.appId;
+  const available = !!imagesBaseURL;
+  React.useEffect(() => {
+    if (!jwtToken && progress.status === "uploading") {
+      abortRef.current?.abort();
+    }
+  }, [jwtToken, progress.status]);
+  const upload = React.useCallback(
+    async (opts) => {
+      if (!imagesBaseURL || !appId || !jwtToken) {
+        setProgress({
+          ...IDLE,
+          status: "error",
+          error: "Images service not available"
+        });
+        return;
+      }
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setProgress({
+        status: "uploading",
+        progress: 0,
+        bytesUploaded: 0,
+        bytesTotal: opts.file.size,
+        error: null
+      });
+      try {
+        const result = await uploadImage(
+          { imagesBaseURL, appId, jwtToken },
+          opts,
+          (pct, loaded, total) => {
+            setProgress((prev) => ({
+              ...prev,
+              progress: pct,
+              bytesUploaded: loaded,
+              bytesTotal: total
+            }));
+          },
+          controller.signal
+        );
+        if (result.status === 204) {
+          setProgress({
+            status: "success",
+            progress: 100,
+            bytesUploaded: opts.file.size,
+            bytesTotal: opts.file.size,
+            error: null
+          });
+        } else if (result.status === 409) {
+          setProgress({
+            status: "conflict",
+            progress: 100,
+            bytesUploaded: opts.file.size,
+            bytesTotal: opts.file.size,
+            error: result.body?.message || "An image with identical content already exists",
+            existingImageId: result.body?.imageId
+          });
+        } else if (result.status === 413) {
+          throw new Error("File exceeds 4MB limit");
+        } else if (result.status === 415) {
+          throw new Error(
+            "Unsupported file type. Allowed: PNG, JPEG, GIF, WEBP, AVIF"
+          );
+        } else if (result.status === 429) {
+          throw new Error(result.body?.message || "Storage limit reached");
+        } else {
+          throw new Error(`Upload failed: HTTP ${result.status}`);
+        }
+      } catch (err) {
+        if (err.message === "Upload aborted") return;
+        setProgress({
+          status: "error",
+          progress: 0,
+          bytesUploaded: 0,
+          bytesTotal: opts.file.size,
+          error: err.message || "Upload failed"
+        });
+      }
+    },
+    [imagesBaseURL, appId, jwtToken]
+  );
+  const cancel = React.useCallback(() => {
+    abortRef.current?.abort();
+    setProgress(IDLE);
+  }, []);
+  const reset = React.useCallback(() => {
+    setProgress(IDLE);
+  }, []);
+  return { upload, cancel, progress, reset, available };
+}
+function useImage(imageId, opts) {
+  const { snapshot } = useAppKit();
+  const { imagesBaseURL, loading: configLoading } = useImagesConfig();
+  const [image, setImage] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const fetchIdRef = React.useRef(0);
+  const enabled = opts?.enabled !== false;
+  const jwtToken = snapshot?.jwtToken;
+  const appId = snapshot?.appId;
+  const available = !!imagesBaseURL;
+  const doFetch = React.useCallback(() => {
+    if (!imagesBaseURL || !appId || !jwtToken || !imageId || !enabled) return;
+    const id = ++fetchIdRef.current;
+    setLoading(true);
+    setError(null);
+    getImage({ imagesBaseURL, appId, jwtToken }, imageId).then((res) => {
+      if (id !== fetchIdRef.current) return;
+      setImage(res);
+      setLoading(false);
+    }).catch((err) => {
+      if (id !== fetchIdRef.current) return;
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [imagesBaseURL, appId, jwtToken, imageId, enabled]);
+  React.useEffect(() => {
+    doFetch();
+    return () => {
+      fetchIdRef.current++;
+    };
+  }, [doFetch]);
+  return {
+    image,
+    loading: loading || configLoading,
+    error,
+    refetch: doFetch,
+    available
+  };
+}
+var FONT = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var ACCEPT_DEFAULT = "image/png,image/jpeg,image/gif,image/webp,image/avif";
+var MAX_SIZE_DEFAULT = 4 * 1024 * 1024;
+var VARIANT_PRESETS = [
+  { key: "sq200", label: "sq200", desc: "Thumbnail (200x200)", required: true },
+  { key: "sq400", label: "sq400", desc: "Square (400x400)" },
+  { key: "w400", label: "w400", desc: "Small (400w)" },
+  { key: "w800", label: "w800", desc: "Medium (800w)" },
+  { key: "w1200", label: "w1200", desc: "Large (1200w)" },
+  { key: "w1600", label: "w1600", desc: "Retina (1600w)" },
+  { key: "w1920", label: "w1920", desc: "Full HD (1920w)" }
+];
+var DEFAULT_VARIANTS = /* @__PURE__ */ new Set(["sq200", "w400", "w800"]);
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function parseVariants(csv) {
+  if (!csv) return new Set(DEFAULT_VARIANTS);
+  return new Set(csv.split(",").map((s) => s.trim()).filter(Boolean));
+}
+function ImageUploader({
+  onUpload,
+  onError,
+  defaultTitle,
+  defaultDescription = "",
+  variants: variantsProp,
+  showFields = true,
+  showVariantPicker = false,
+  accept = ACCEPT_DEFAULT,
+  maxSize = MAX_SIZE_DEFAULT,
+  refType,
+  refId,
+  className,
+  style,
+  label = "Drop an image here or click to select",
+  disabled = false
+}) {
+  const { upload, cancel, progress, reset, available } = useImageUpload();
+  const fileInputRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const [title, setTitle] = React.useState(defaultTitle ?? "");
+  const [description, setDescription] = React.useState(defaultDescription);
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const [validationError, setValidationError] = React.useState(null);
+  const [selectedVariants, setSelectedVariants] = React.useState(
+    () => parseVariants(variantsProp)
+  );
+  const [previewURL, setPreviewURL] = React.useState(null);
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
+  const [showSuccess, setShowSuccess] = React.useState(false);
+  React.useEffect(() => {
+    if (!selectedFile) {
+      setPreviewURL(null);
+      return;
+    }
+    const url = URL.createObjectURL(selectedFile);
+    setPreviewURL(url);
+    return () => URL.revokeObjectURL(url);
+  }, [selectedFile]);
+  const handleFile = React.useCallback(
+    (file) => {
+      setValidationError(null);
+      if (file.size > maxSize) {
+        setValidationError(
+          `File too large (${(file.size / 1024 / 1024).toFixed(1)}MB). Max ${(maxSize / 1024 / 1024).toFixed(0)}MB.`
+        );
+        return;
+      }
+      setSelectedFile(file);
+      if (!title) {
+        setTitle(file.name.replace(/\.[^.]+$/, ""));
+      }
+    },
+    [maxSize, title]
+  );
+  const handleDrop = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+  const toggleVariant = React.useCallback((key) => {
+    setSelectedVariants((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      next.add("sq200");
+      return next;
+    });
+  }, []);
+  const handleSubmit = React.useCallback(async () => {
+    if (!selectedFile || !title.trim()) return;
+    reset();
+    const variantCsv = showVariantPicker ? Array.from(selectedVariants).join(",") : variantsProp;
+    const opts = {
+      file: selectedFile,
+      title: title.trim(),
+      description: description.trim() || void 0,
+      variants: variantCsv,
+      refType,
+      refId
+    };
+    await upload(opts);
+  }, [selectedFile, title, description, variantsProp, showVariantPicker, selectedVariants, refType, refId, upload, reset]);
+  const prevStatus = React.useRef(progress.status);
+  React.useEffect(() => {
+    if (prevStatus.current === progress.status) return;
+    prevStatus.current = progress.status;
+    if (progress.status === "success") {
+      setSelectedFile(null);
+      setTitle(defaultTitle ?? "");
+      setDescription(defaultDescription);
+      setShowSuccess(true);
+      onUpload?.();
+    }
+    if (progress.status === "conflict") {
+      setSelectedFile(null);
+      setTitle(defaultTitle ?? "");
+      setDescription(defaultDescription);
+    }
+    if (progress.status === "error" && progress.error) {
+      onError?.(progress.error);
+    }
+  }, [progress.status, progress.error, onUpload, onError, defaultTitle, defaultDescription]);
+  React.useEffect(() => {
+    if (!showSuccess) return;
+    const t = setTimeout(() => setShowSuccess(false), 4e3);
+    return () => clearTimeout(t);
+  }, [showSuccess]);
+  if (!available) return null;
+  const isUploading = progress.status === "uploading";
+  const isDisabled = disabled || isUploading;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { fontFamily: FONT, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onDragEnter: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragLeave: () => setDragOver(false),
+        onDrop: handleDrop,
+        onClick: () => !isDisabled && fileInputRef.current?.click(),
+        style: {
+          border: `2px dashed ${dragOver ? "#1976d2" : "#ccc"}`,
+          borderRadius: 8,
+          padding: "24px 16px",
+          textAlign: "center",
+          cursor: isDisabled ? "default" : "pointer",
+          backgroundColor: dragOver ? "#e3f2fd" : "#fafafa",
+          transition: "all 0.15s ease",
+          opacity: isDisabled ? 0.6 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              style: { display: "none" },
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) handleFile(file);
+                e.target.value = "";
+              }
+            }
+          ),
+          !selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#999", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginBottom: 6 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, color: "#666" }, children: selectedFile ? selectedFile.name : label }),
+          selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "#999", marginTop: 4 }, children: [
+            (selectedFile.size / 1024).toFixed(0),
+            " KB"
+          ] })
+        ]
+      }
+    ),
+    previewURL && selectedFile && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          borderRadius: 8,
+          overflow: "hidden",
+          backgroundColor: "#f5f5f5",
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: previewURL,
+            alt: title || selectedFile.name,
+            style: {
+              maxWidth: "100%",
+              maxHeight: 300,
+              objectFit: "contain",
+              display: "block",
+              margin: "0 auto"
+            }
+          }
+        )
+      }
+    ),
+    validationError && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { color: "#d32f2f", fontSize: 13, marginTop: 8 },
+        children: validationError
+      }
+    ),
+    showFields && selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Title",
+          value: title,
+          onChange: (e) => setTitle(e.target.value),
+          disabled: isDisabled,
+          maxLength: 250,
+          style: {
+            padding: "8px 12px",
+            borderRadius: 6,
+            border: "1px solid #ddd",
+            fontSize: 14,
+            fontFamily: FONT,
+            outline: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Description (optional)",
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          disabled: isDisabled,
+          maxLength: 500,
+          style: {
+            padding: "8px 12px",
+            borderRadius: 6,
+            border: "1px solid #ddd",
+            fontSize: 14,
+            fontFamily: FONT,
+            outline: "none"
+          }
+        }
+      )
+    ] }),
+    showVariantPicker && selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowAdvanced(!showAdvanced),
+          style: {
+            background: "none",
+            border: "none",
+            padding: 0,
+            fontSize: 13,
+            color: "#666",
+            cursor: "pointer",
+            fontFamily: FONT,
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              display: "inline-block",
+              transition: "transform 0.15s ease",
+              transform: showAdvanced ? "rotate(90deg)" : "rotate(0deg)",
+              fontSize: 10
+            }, children: "\u25B6" }),
+            "Advanced"
+          ]
+        }
+      ),
+      showAdvanced && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#888", marginBottom: 6 }, children: "Variants:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: VARIANT_PRESETS.map((v) => {
+          const active = selectedVariants.has(v.key);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => !v.required && toggleVariant(v.key),
+              disabled: isDisabled || v.required,
+              title: v.desc,
+              style: {
+                padding: "4px 10px",
+                borderRadius: 12,
+                border: active ? "1px solid #1976d2" : "1px solid #ccc",
+                backgroundColor: active ? "#e3f2fd" : "#fff",
+                color: active ? "#1976d2" : "#666",
+                fontSize: 12,
+                fontFamily: FONT,
+                cursor: v.required ? "default" : isDisabled ? "default" : "pointer",
+                opacity: isDisabled ? 0.6 : v.required ? 0.8 : 1
+              },
+              children: v.label
+            },
+            v.key
+          );
+        }) })
+      ] })
+    ] }),
+    isUploading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "#666", marginBottom: 4 }, children: [
+        "Uploading... \u2014 ",
+        Math.round(progress.progress),
+        "%",
+        progress.bytesTotal > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " \xB7 ",
+          formatSize(progress.bytesUploaded),
+          " / ",
+          formatSize(progress.bytesTotal)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: "#e0e0e0",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: `${progress.progress}%`,
+                height: "100%",
+                backgroundColor: "#1976d2",
+                transition: "width 0.2s ease"
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleSubmit,
+          disabled: isDisabled || !title.trim(),
+          style: {
+            padding: "8px 20px",
+            borderRadius: 6,
+            border: "none",
+            backgroundColor: isDisabled ? "#bbb" : "#1976d2",
+            color: "#fff",
+            fontSize: 14,
+            fontFamily: FONT,
+            cursor: isDisabled ? "default" : "pointer",
+            fontWeight: 500
+          },
+          children: "Upload"
+        }
+      ),
+      isUploading && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: cancel,
+          style: {
+            padding: "8px 16px",
+            borderRadius: 6,
+            border: "1px solid #ddd",
+            backgroundColor: "#fff",
+            fontSize: 14,
+            fontFamily: FONT,
+            cursor: "pointer",
+            color: "#666"
+          },
+          children: "Cancel"
+        }
+      )
+    ] }),
+    progress.status === "error" && progress.error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#d32f2f", fontSize: 13, marginTop: 8 }, children: progress.error }),
+    progress.status === "conflict" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: "10px 14px",
+          borderRadius: 8,
+          backgroundColor: "#fff3e0",
+          border: "1px solid #ffcc80",
+          color: "#e65100",
+          fontSize: 13,
+          fontFamily: FONT,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: progress.error || "An image with identical content already exists" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => reset(),
+              style: {
+                background: "none",
+                border: "none",
+                color: "#e65100",
+                cursor: "pointer",
+                fontSize: 16,
+                lineHeight: 1,
+                padding: "0 2px"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    ),
+    showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: "10px 14px",
+          borderRadius: 8,
+          backgroundColor: "#e8f5e9",
+          border: "1px solid #a5d6a7",
+          color: "#2e7d32",
+          fontSize: 13,
+          fontFamily: FONT,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Image uploaded successfully" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setShowSuccess(false),
+              style: {
+                background: "none",
+                border: "none",
+                color: "#2e7d32",
+                cursor: "pointer",
+                fontSize: 16,
+                lineHeight: 1,
+                padding: "0 2px"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function pickVariant(variants, opts) {
+  if (!variants || variants.length === 0) return null;
+  if (opts.variant) {
+    const exact = variants.find((v) => v.variant === opts.variant);
+    if (exact) return exact;
+  }
+  if (!opts.width && !opts.height) {
+    return variants.find((v) => v.variant === "orig") || variants[0];
+  }
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  const targetW = (opts.width || 0) * dpr;
+  const targetH = (opts.height || 0) * dpr;
+  const targetMax = Math.max(targetW, targetH);
+  const candidates = variants.filter((v) => v.width > 0).sort((a, b) => a.width - b.width);
+  if (candidates.length === 0) return variants[0];
+  for (const v of candidates) {
+    if (v.width >= targetMax) return v;
+  }
+  return candidates[candidates.length - 1];
+}
+function buildSrcSet(variants) {
+  const widthVariants = variants.filter(
+    (v) => v.objectURL && v.width > 0 && v.variant !== "orig"
+  );
+  if (widthVariants.length <= 1) return void 0;
+  return widthVariants.sort((a, b) => a.width - b.width).map((v) => `${v.objectURL} ${v.width}w`).join(", ");
+}
+function MrImage({
+  image,
+  width,
+  height,
+  variant: variantName,
+  alt,
+  className,
+  style,
+  loading = "lazy",
+  objectFit = "cover",
+  sizes,
+  onLoad,
+  onError
+}) {
+  const chosen = React.useMemo(
+    () => pickVariant(image.variants, { width, height, variant: variantName }),
+    [image.variants, width, height, variantName]
+  );
+  const srcSet = React.useMemo(() => {
+    if (variantName) return void 0;
+    return buildSrcSet(image.variants);
+  }, [image.variants, variantName]);
+  const [loaded, setLoaded] = React.useState(false);
+  const url = chosen?.objectURL;
+  React.useEffect(() => {
+    setLoaded(false);
+  }, [url]);
+  if (!chosen?.objectURL) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className,
+        role: "img",
+        "aria-label": alt ?? image.title,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f0f0f0",
+          color: "#bbb",
+          width,
+          height,
+          maxWidth: "100%",
+          ...style
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: chosen.objectURL,
+      srcSet,
+      sizes,
+      alt: alt ?? image.title,
+      width,
+      height,
+      className,
+      loading,
+      onLoad: () => {
+        setLoaded(true);
+        onLoad?.();
+      },
+      onError,
+      style: {
+        objectFit,
+        maxWidth: "100%",
+        opacity: loaded ? 1 : 0,
+        transition: "opacity 0.2s ease",
+        backgroundColor: loaded ? void 0 : "#f0f0f0",
+        ...style
+      }
+    }
+  );
+}
+var FONT2 = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var VARIANT_DESCRIPTIONS = {
+  orig: "Original upload",
+  sq200: "Thumbnail (200x200)",
+  sq400: "Square (400x400)",
+  w400: "Small (400w)",
+  w800: "Medium (800w)",
+  w1200: "Large (1200w)",
+  w1600: "Retina (1600w)",
+  w1920: "Full HD (1920w)"
+};
+function describeVariant(name) {
+  if (VARIANT_DESCRIPTIONS[name]) return VARIANT_DESCRIPTIONS[name];
+  const sqMatch = name.match(/^sq(\d+)$/);
+  if (sqMatch) return `Square (${sqMatch[1]}x${sqMatch[1]})`;
+  const wMatch = name.match(/^w(\d+)$/);
+  if (wMatch) return `Width ${wMatch[1]}px`;
+  return name;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function isSafeURL(url) {
+  return url.startsWith("https://") || url.startsWith("http://localhost");
+}
+function sanitizeFilename(name) {
+  return name.replace(/[/\\:*?"<>|\x00-\x1f]/g, "_");
+}
+function preferredVariant(variants) {
+  const prefs = ["w1600", "w800", "w400", "orig"];
+  for (const p of prefs) {
+    const v = variants.find((v2) => v2.variant === p);
+    if (v) return v;
+  }
+  return variants[0];
+}
+function ImageDetails({
+  image,
+  onClose,
+  onEdit,
+  onDelete,
+  className,
+  style
+}) {
+  const [selected, setSelected] = React.useState(
+    () => preferredVariant(image.variants)
+  );
+  const [copiedField, setCopiedField] = React.useState(null);
+  const sortedVariants = React.useMemo(
+    () => [...image.variants].sort((a, b) => {
+      if (a.variant === "orig") return -1;
+      if (b.variant === "orig") return 1;
+      return a.width - b.width;
+    }),
+    [image.variants]
+  );
+  const copyText = React.useCallback((text, field) => {
+    navigator.clipboard?.writeText(text).then(() => {
+      setCopiedField(field);
+      setTimeout(() => setCopiedField(null), 1200);
+    }).catch(() => {
+    });
+  }, []);
+  const handleDownload = React.useCallback(async () => {
+    if (!selected?.objectURL) return;
+    try {
+      const res = await fetch(selected.objectURL);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const ext = selected.format || selected.content_type?.split("/")[1] || "jpg";
+      a.download = sanitizeFilename(`${image.title}-${selected.variant}.${ext}`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch {
+      if (isSafeURL(selected.objectURL)) {
+        window.open(selected.objectURL, "_blank");
+      }
+    }
+  }, [selected, image.title]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0,0,0,0.5)"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className,
+          style: {
+            backgroundColor: "#fff",
+            borderRadius: 12,
+            maxWidth: 720,
+            width: "95vw",
+            maxHeight: "90vh",
+            overflow: "auto",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+            fontFamily: FONT2,
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 20px 12px",
+                  borderBottom: "1px solid #eee"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 16 }, children: image.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: 22,
+                        cursor: "pointer",
+                        color: "#666",
+                        lineHeight: 1,
+                        padding: "4px 8px"
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px 20px", textAlign: "center" }, children: selected?.objectURL && /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: selected.objectURL,
+                alt: image.title,
+                style: {
+                  maxWidth: "100%",
+                  maxHeight: 500,
+                  borderRadius: 6,
+                  objectFit: "contain"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0 20px 12px", display: "flex", flexWrap: "wrap", gap: 6 }, children: sortedVariants.map((v) => {
+              const active = v.variant === selected.variant;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setSelected(v),
+                  style: {
+                    padding: "4px 12px",
+                    borderRadius: 14,
+                    border: active ? "1px solid #1976d2" : "1px solid #ddd",
+                    backgroundColor: active ? "#e3f2fd" : "#fff",
+                    color: active ? "#1976d2" : "#555",
+                    fontSize: 12,
+                    fontFamily: FONT2,
+                    cursor: "pointer"
+                  },
+                  title: describeVariant(v.variant),
+                  children: [
+                    v.variant,
+                    v.size_bytes > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.6, marginLeft: 4 }, children: formatBytes(v.size_bytes) })
+                  ]
+                },
+                v.variant
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "0 20px 16px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, fontSize: 13 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(MetaItem, { label: "Size", value: formatBytes(selected.size_bytes) }),
+                selected.width > 0 && /* @__PURE__ */ jsxRuntime.jsx(MetaItem, { label: "Dimensions", value: `${selected.width} x ${selected.height}` }),
+                /* @__PURE__ */ jsxRuntime.jsx(MetaItem, { label: "Format", value: selected.format || selected.content_type }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  MetaItem,
+                  {
+                    label: "ID",
+                    value: image.imageId.slice(0, 12) + "...",
+                    onClick: () => copyText(image.imageId, "id"),
+                    actionLabel: copiedField === "id" ? "Copied" : "Copy"
+                  }
+                ),
+                selected?.objectURL && /* @__PURE__ */ jsxRuntime.jsx(
+                  MetaItem,
+                  {
+                    label: "URL",
+                    value: new URL(selected.objectURL).pathname.split("/").pop() || "...",
+                    onClick: () => copyText(selected.objectURL, "url"),
+                    actionLabel: copiedField === "url" ? "Copied" : "Copy"
+                  }
+                )
+              ] }),
+              image.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 10, fontSize: 13, color: "#666" }, children: image.description }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 6, fontSize: 12, color: "#999" }, children: [
+                "Uploaded ",
+                new Date(image.uploadedAt).toLocaleDateString()
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  padding: "12px 20px 16px",
+                  borderTop: "1px solid #eee",
+                  gap: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                    onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => onEdit(image),
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT2,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Edit"
+                      }
+                    ),
+                    onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => onDelete(image),
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ffcdd2",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT2,
+                          cursor: "pointer",
+                          color: "#d32f2f"
+                        },
+                        children: "Delete"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                    selected?.objectURL && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      isSafeURL(selected.objectURL) && /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: selected.objectURL,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: {
+                            padding: "6px 14px",
+                            borderRadius: 6,
+                            border: "1px solid #ddd",
+                            backgroundColor: "#fff",
+                            fontSize: 13,
+                            fontFamily: FONT2,
+                            cursor: "pointer",
+                            color: "#333",
+                            textDecoration: "none",
+                            display: "inline-flex",
+                            alignItems: "center"
+                          },
+                          children: "Open"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: handleDownload,
+                          style: {
+                            padding: "6px 14px",
+                            borderRadius: 6,
+                            border: "1px solid #ddd",
+                            backgroundColor: "#fff",
+                            fontSize: 13,
+                            fontFamily: FONT2,
+                            cursor: "pointer",
+                            color: "#333"
+                          },
+                          children: "Download"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fafafa",
+                          fontSize: 13,
+                          fontFamily: FONT2,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Close"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function MetaItem({
+  label,
+  value,
+  onClick,
+  actionLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "3px 10px",
+        borderRadius: 10,
+        backgroundColor: "#f5f5f5",
+        color: "#555",
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#888" }, children: [
+          label,
+          ":"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "monospace" }, children: value }),
+        onClick && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#1976d2",
+              cursor: "pointer",
+              fontSize: 11,
+              padding: "0 2px",
+              fontFamily: FONT2
+            },
+            children: actionLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var FONT3 = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var SKELETON_STYLE_ID = "mr-skeleton-keyframes";
+function useSkeletonStyle() {
+  React.useEffect(() => {
+    if (document.getElementById(SKELETON_STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = SKELETON_STYLE_ID;
+    style.textContent = "@keyframes mr-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}";
+    document.head.appendChild(style);
+  }, []);
+}
+function ImagePicker({
+  onSelect,
+  onClose,
+  mode = "inline",
+  pageSize = 20,
+  showSearch = true,
+  searchPlaceholder = "Search images...",
+  selectedImageId,
+  columns = 4,
+  showActions = false,
+  refType,
+  refId,
+  refreshSignal,
+  className,
+  style
+}) {
+  const {
+    images,
+    page,
+    pageCount,
+    total,
+    loading,
+    error,
+    setPage,
+    setQuery,
+    refetch,
+    available,
+    removeImage,
+    updateImage: updateImage2
+  } = useImages({ pageSize, refType, refId });
+  useSkeletonStyle();
+  const [searchInput, setSearchInput] = React.useState("");
+  const [activeTile, setActiveTile] = React.useState(null);
+  const [detailImage, setDetailImage] = React.useState(null);
+  const [editImage, setEditImage] = React.useState(null);
+  const [editTitle, setEditTitle] = React.useState("");
+  const [editDesc, setEditDesc] = React.useState("");
+  const [editSaving, setEditSaving] = React.useState(false);
+  const [deleteConfirm, setDeleteConfirm] = React.useState(null);
+  const [deleting, setDeleting] = React.useState(false);
+  const [actionError, setActionError] = React.useState(null);
+  React.useEffect(() => {
+    const timer = setTimeout(() => setQuery(searchInput), 300);
+    return () => clearTimeout(timer);
+  }, [searchInput, setQuery]);
+  const prevSignal = React.useRef(refreshSignal);
+  React.useEffect(() => {
+    if (refreshSignal != null && refreshSignal !== prevSignal.current) {
+      prevSignal.current = refreshSignal;
+      refetch();
+    }
+  }, [refreshSignal, refetch]);
+  React.useEffect(() => {
+    if (!activeTile) return;
+    const handler = () => setActiveTile(null);
+    document.addEventListener("click", handler);
+    return () => document.removeEventListener("click", handler);
+  }, [activeTile]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose?.();
+    },
+    [onClose]
+  );
+  const handleDelete = React.useCallback(
+    async (img) => {
+      setDeleting(true);
+      setActionError(null);
+      try {
+        await removeImage(img.imageId);
+        setDeleteConfirm(null);
+        setDetailImage(null);
+      } catch (err) {
+        setActionError(err.message || "Delete failed");
+      } finally {
+        setDeleting(false);
+      }
+    },
+    [removeImage]
+  );
+  const handleEditSave = React.useCallback(async () => {
+    if (!editImage || !editTitle.trim()) return;
+    setEditSaving(true);
+    setActionError(null);
+    try {
+      await updateImage2(editImage.imageId, {
+        title: editTitle.trim(),
+        description: editDesc.trim() || void 0
+      });
+      setEditImage(null);
+    } catch (err) {
+      setActionError(err.message || "Update failed");
+    } finally {
+      setEditSaving(false);
+    }
+  }, [editImage, editTitle, editDesc, updateImage2]);
+  const openEdit = React.useCallback((img) => {
+    setEditTitle(img.title);
+    setEditDesc(img.description || "");
+    setEditImage(img);
+    setDetailImage(null);
+    setActionError(null);
+  }, []);
+  const openDelete = React.useCallback((img) => {
+    setDeleteConfirm(img);
+    setDetailImage(null);
+    setActionError(null);
+  }, []);
+  if (!available) return null;
+  const skeletonCount = Math.min(pageSize, 8);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        fontFamily: FONT3,
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        ...!mode || mode === "inline" ? style : {}
+      },
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, position: "relative" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: searchPlaceholder,
+                value: searchInput,
+                onChange: (e) => setSearchInput(e.target.value),
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  paddingRight: searchInput ? 32 : 12,
+                  borderRadius: 6,
+                  border: "1px solid #ddd",
+                  fontSize: 14,
+                  fontFamily: FONT3,
+                  outline: "none",
+                  boxSizing: "border-box"
+                }
+              }
+            ),
+            searchInput && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setSearchInput(""),
+                style: {
+                  position: "absolute",
+                  right: 6,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  background: "none",
+                  border: "none",
+                  fontSize: 16,
+                  cursor: "pointer",
+                  color: "#999",
+                  lineHeight: 1,
+                  padding: "2px 4px"
+                },
+                children: "\xD7"
+              }
+            )
+          ] }),
+          mode === "modal" && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onClose,
+              style: {
+                background: "none",
+                border: "none",
+                fontSize: 20,
+                cursor: "pointer",
+                padding: "4px 8px",
+                color: "#666",
+                lineHeight: 1
+              },
+              children: "\xD7"
+            }
+          )
+        ] }),
+        actionError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#d32f2f", fontSize: 13, padding: "4px 0" }, children: actionError }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${columns}, 1fr)`,
+              gap: 8
+            },
+            children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  aspectRatio: "1",
+                  borderRadius: 6,
+                  backgroundColor: "#f0f0f0",
+                  animation: "mr-skeleton-pulse 1.5s ease-in-out infinite"
+                }
+              },
+              i
+            ))
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 20, color: "#d32f2f", fontSize: 14 }, children: error }),
+        !loading && !error && images.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "40px 20px", color: "#999" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "36",
+              height: "36",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { opacity: 0.4, marginBottom: 8 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 500, color: "#666" }, children: "No images yet" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, marginTop: 4 }, children: searchInput ? "Try a different search term" : "Upload an image to get started" })
+        ] }),
+        !loading && images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${columns}, 1fr)`,
+              gap: 8
+            },
+            children: images.map((img) => {
+              const isSelected = img.imageId === selectedImageId;
+              const isActive = activeTile === img.imageId;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    borderRadius: 6,
+                    overflow: "hidden",
+                    border: isSelected ? "2px solid #1976d2" : "2px solid transparent",
+                    transition: "border-color 0.15s ease",
+                    aspectRatio: "1"
+                  },
+                  onMouseEnter: () => setActiveTile(img.imageId),
+                  onMouseLeave: () => setActiveTile(null),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        onClick: () => {
+                          if (showActions && !isActive) {
+                            setActiveTile(img.imageId);
+                          } else {
+                            onSelect?.(img);
+                          }
+                        },
+                        style: {
+                          cursor: "pointer",
+                          width: "100%",
+                          height: "100%"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          MrImage,
+                          {
+                            image: img,
+                            variant: "sq200",
+                            style: {
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover",
+                              display: "block"
+                            },
+                            alt: img.title
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          bottom: 0,
+                          left: 0,
+                          right: 0,
+                          padding: "16px 6px 4px",
+                          background: "linear-gradient(transparent, rgba(0,0,0,0.5))",
+                          color: "#fff",
+                          fontSize: 11,
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          pointerEvents: "none"
+                        },
+                        children: img.title
+                      }
+                    ),
+                    showActions && isActive && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          display: "flex",
+                          alignItems: "flex-end",
+                          justifyContent: "center",
+                          gap: 6,
+                          padding: "8px 8px 24px",
+                          background: "linear-gradient(transparent 30%, rgba(0,0,0,0.55))"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { label: "Info", onClick: () => setDetailImage(img) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { label: "Edit", onClick: () => openEdit(img) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ActionBtn, { label: "Del", onClick: () => openDelete(img), color: "#ff8a80" })
+                        ]
+                      }
+                    )
+                  ]
+                },
+                img.imageId
+              );
+            })
+          }
+        ),
+        pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 12,
+              fontSize: 14
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  disabled: page <= 0,
+                  onClick: () => setPage(page - 1),
+                  style: {
+                    padding: "4px 12px",
+                    borderRadius: 4,
+                    border: "1px solid #ddd",
+                    background: page <= 0 ? "#f5f5f5" : "#fff",
+                    cursor: page <= 0 ? "default" : "pointer",
+                    fontFamily: FONT3,
+                    fontSize: 13,
+                    color: page <= 0 ? "#bbb" : "#333"
+                  },
+                  children: "Prev"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#666", fontSize: 13 }, children: [
+                "Page ",
+                page + 1,
+                " of ",
+                pageCount,
+                " \xB7 ",
+                total,
+                " image",
+                total !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  disabled: page >= pageCount - 1,
+                  onClick: () => setPage(page + 1),
+                  style: {
+                    padding: "4px 12px",
+                    borderRadius: 4,
+                    border: "1px solid #ddd",
+                    background: page >= pageCount - 1 ? "#f5f5f5" : "#fff",
+                    cursor: page >= pageCount - 1 ? "default" : "pointer",
+                    fontFamily: FONT3,
+                    fontSize: 13,
+                    color: page >= pageCount - 1 ? "#bbb" : "#333"
+                  },
+                  children: "Next"
+                }
+              )
+            ]
+          }
+        ),
+        detailImage && /* @__PURE__ */ jsxRuntime.jsx(
+          ImageDetails,
+          {
+            image: detailImage,
+            onClose: () => setDetailImage(null),
+            onEdit: showActions ? openEdit : void 0,
+            onDelete: showActions ? openDelete : void 0
+          }
+        ),
+        editImage && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 1e4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "rgba(0,0,0,0.4)"
+            },
+            onClick: (e) => {
+              if (e.target === e.currentTarget && !editSaving) setEditImage(null);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#fff",
+                  borderRadius: 10,
+                  padding: 20,
+                  maxWidth: 400,
+                  width: "90vw",
+                  fontFamily: FONT3
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 15, marginBottom: 12 }, children: "Edit Image" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Title",
+                        value: editTitle,
+                        onChange: (e) => setEditTitle(e.target.value),
+                        disabled: editSaving,
+                        maxLength: 250,
+                        style: {
+                          padding: "8px 12px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          fontSize: 14,
+                          fontFamily: FONT3,
+                          outline: "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Description (optional)",
+                        value: editDesc,
+                        onChange: (e) => setEditDesc(e.target.value),
+                        disabled: editSaving,
+                        maxLength: 500,
+                        style: {
+                          padding: "8px 12px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          fontSize: 14,
+                          fontFamily: FONT3,
+                          outline: "none"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setEditImage(null),
+                        disabled: editSaving,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT3,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: handleEditSave,
+                        disabled: editSaving || !editTitle.trim(),
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "none",
+                          backgroundColor: editSaving || !editTitle.trim() ? "#bbb" : "#1976d2",
+                          color: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT3,
+                          cursor: editSaving ? "default" : "pointer"
+                        },
+                        children: editSaving ? "Saving..." : "Save"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        deleteConfirm && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 1e4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "rgba(0,0,0,0.4)"
+            },
+            onClick: (e) => {
+              if (e.target === e.currentTarget && !deleting) setDeleteConfirm(null);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#fff",
+                  borderRadius: 10,
+                  padding: 20,
+                  maxWidth: 360,
+                  width: "90vw",
+                  fontFamily: FONT3
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 15, marginBottom: 8 }, children: "Delete Image" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, color: "#555", marginBottom: 16 }, children: [
+                    "Delete \u201C",
+                    deleteConfirm.title,
+                    "\u201D? This removes all variants and cannot be undone."
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setDeleteConfirm(null),
+                        disabled: deleting,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT3,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => handleDelete(deleteConfirm),
+                        disabled: deleting,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "none",
+                          backgroundColor: deleting ? "#bbb" : "#d32f2f",
+                          color: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT3,
+                          cursor: deleting ? "default" : "pointer"
+                        },
+                        children: deleting ? "Deleting..." : "Delete"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  if (mode === "modal") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0,0,0,0.4)"
+        },
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onClose?.();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "#fff",
+              borderRadius: 12,
+              padding: 20,
+              maxWidth: 640,
+              width: "90vw",
+              maxHeight: "80vh",
+              overflow: "auto",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+              ...style
+            },
+            children: content
+          }
+        )
+      }
+    );
+  }
+  return content;
+}
+function ActionBtn({
+  label,
+  onClick,
+  color
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      style: {
+        padding: "6px 12px",
+        borderRadius: 4,
+        border: "none",
+        backgroundColor: "rgba(255,255,255,0.2)",
+        color: color || "#fff",
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: "pointer",
+        fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        minHeight: 32,
+        backdropFilter: "blur(4px)"
+      },
+      children: label
+    }
+  );
+}
+function useFilesConfig() {
+  const { snapshot } = useAppKit();
+  const [filesBaseURL, setFilesBaseURL] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const fetchedRef = React.useRef("");
+  const retryCountRef = React.useRef(0);
+  const maxRetries = 3;
+  const retryDelayMs = 5e3;
+  const workspaceBaseURL = snapshot?.workspaceBaseURL;
+  const appId = snapshot?.appId;
+  React.useEffect(() => {
+    const cacheKey = workspaceBaseURL && appId ? `${workspaceBaseURL}|${appId}` : "";
+    if (fetchedRef.current !== cacheKey) {
+      fetchedRef.current = "";
+      retryCountRef.current = 0;
+    }
+  }, [workspaceBaseURL, appId]);
+  React.useEffect(() => {
+    if (!workspaceBaseURL || !appId) {
+      setLoading(false);
+      return;
+    }
+    const cacheKey = `${workspaceBaseURL}|${appId}`;
+    if (fetchedRef.current === cacheKey) return;
+    let cancelled = false;
+    let retryTimer = null;
+    setLoading(true);
+    setError(null);
+    const doFetch = () => {
+      fetchAppResource(workspaceBaseURL, appId).then((data) => {
+        if (cancelled) return;
+        setFilesBaseURL(data.filesBaseURL);
+        setLoading(false);
+        fetchedRef.current = cacheKey;
+        retryCountRef.current = 0;
+      }).catch((err) => {
+        if (cancelled) return;
+        retryCountRef.current += 1;
+        if (retryCountRef.current < maxRetries) {
+          retryTimer = setTimeout(doFetch, retryDelayMs);
+        } else {
+          setError(err.message);
+          setLoading(false);
+        }
+      });
+    };
+    doFetch();
+    return () => {
+      cancelled = true;
+      if (retryTimer != null) clearTimeout(retryTimer);
+    };
+  }, [workspaceBaseURL, appId]);
+  return { filesBaseURL, loading, error };
+}
+
+// src/files/api.ts
+function headers2(jwt) {
+  return { Authorization: `Bearer ${jwt}` };
+}
+function apiBase2(p) {
+  return `${p.filesBaseURL}/api/${encodeURIComponent(p.appId)}`;
+}
+async function listFiles(p, opts) {
+  const url = new URL(`${apiBase2(p)}/files`);
+  if (opts?.page != null) url.searchParams.set("page", String(opts.page));
+  if (opts?.pageSize != null)
+    url.searchParams.set("pageSize", String(opts.pageSize));
+  if (opts?.q) url.searchParams.set("q", opts.q);
+  if (opts?.refType) url.searchParams.set("refType", opts.refType);
+  if (opts?.refId) url.searchParams.set("refId", opts.refId);
+  const res = await fetch(url.toString(), { headers: headers2(p.jwtToken) });
+  if (!res.ok) throw new Error(`List files failed: HTTP ${res.status}`);
+  return res.json();
+}
+async function getFile(p, fileId) {
+  const res = await fetch(`${apiBase2(p)}/files/${encodeURIComponent(fileId)}`, {
+    headers: headers2(p.jwtToken)
+  });
+  if (!res.ok) throw new Error(`Get file failed: HTTP ${res.status}`);
+  return res.json();
+}
+function uploadFile(p, opts, onProgress, signal) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", `${apiBase2(p)}/files/upload`);
+    xhr.setRequestHeader("Authorization", `Bearer ${p.jwtToken}`);
+    if (signal) {
+      signal.addEventListener("abort", () => xhr.abort(), { once: true });
+    }
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable && onProgress) {
+        const pct = Math.round(e.loaded / e.total * 100);
+        onProgress(pct, e.loaded, e.total);
+      }
+    };
+    xhr.onload = () => {
+      let body = null;
+      try {
+        body = JSON.parse(xhr.responseText);
+      } catch {
+      }
+      resolve({ status: xhr.status, body });
+    };
+    xhr.onerror = () => reject(new Error("Upload network error"));
+    xhr.onabort = () => reject(new Error("Upload aborted"));
+    const fd = new FormData();
+    fd.append("file", opts.file);
+    fd.append("title", opts.title);
+    if (opts.description) fd.append("description", opts.description);
+    if (opts.refType) fd.append("refType", opts.refType);
+    if (opts.refId) fd.append("refId", opts.refId);
+    xhr.send(fd);
+  });
+}
+async function updateFile(p, fileId, opts) {
+  const res = await fetch(`${apiBase2(p)}/files/${encodeURIComponent(fileId)}`, {
+    method: "POST",
+    headers: { ...headers2(p.jwtToken), "Content-Type": "application/json" },
+    body: JSON.stringify(opts)
+  });
+  if (!res.ok) throw new Error(`Update file failed: HTTP ${res.status}`);
+}
+async function deleteFile(p, fileId) {
+  const res = await fetch(`${apiBase2(p)}/files/${encodeURIComponent(fileId)}`, {
+    method: "DELETE",
+    headers: headers2(p.jwtToken)
+  });
+  if (!res.ok) throw new Error(`Delete file failed: HTTP ${res.status}`);
+}
+
+// src/files/useFiles.ts
+function useFiles(opts) {
+  const { snapshot } = useAppKit();
+  const { filesBaseURL, loading: configLoading } = useFilesConfig();
+  const [files, setFiles] = React.useState([]);
+  const [page, setPageState] = React.useState(opts?.page ?? 0);
+  const [pageSize] = React.useState(opts?.pageSize ?? 50);
+  const [total, setTotal] = React.useState(0);
+  const [pageCount, setPageCount] = React.useState(0);
+  const [query, setQueryState] = React.useState(opts?.q ?? "");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const fetchIdRef = React.useRef(0);
+  const enabled = opts?.enabled !== false;
+  const jwtToken = snapshot?.jwtToken;
+  const appId = snapshot?.appId;
+  const available = !!filesBaseURL;
+  const refType = opts?.refType;
+  const refId = opts?.refId;
+  const doFetch = React.useCallback(() => {
+    if (!filesBaseURL || !appId || !jwtToken || !enabled) return;
+    const id = ++fetchIdRef.current;
+    setLoading(true);
+    setError(null);
+    listFiles(
+      { filesBaseURL, appId, jwtToken },
+      { page, pageSize, q: query || void 0, refType, refId }
+    ).then((res) => {
+      if (id !== fetchIdRef.current) return;
+      setFiles(res.files ?? []);
+      setTotal(res.total);
+      setPageCount(res.pageCount);
+      setLoading(false);
+    }).catch((err) => {
+      if (id !== fetchIdRef.current) return;
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [filesBaseURL, appId, jwtToken, page, pageSize, query, refType, refId, enabled]);
+  React.useEffect(() => {
+    doFetch();
+    return () => {
+      fetchIdRef.current++;
+    };
+  }, [doFetch]);
+  const setPage = React.useCallback((p) => setPageState(p), []);
+  const setQuery = React.useCallback((q) => {
+    setQueryState(q);
+    setPageState(0);
+  }, []);
+  const removeFile = React.useCallback(
+    async (fileId) => {
+      if (!filesBaseURL || !appId || !jwtToken) return;
+      await deleteFile({ filesBaseURL, appId, jwtToken }, fileId);
+      doFetch();
+    },
+    [filesBaseURL, appId, jwtToken, doFetch]
+  );
+  const doUpdateFile = React.useCallback(
+    async (fileId, updateOpts) => {
+      if (!filesBaseURL || !appId || !jwtToken) return;
+      await updateFile(
+        { filesBaseURL, appId, jwtToken },
+        fileId,
+        updateOpts
+      );
+      doFetch();
+    },
+    [filesBaseURL, appId, jwtToken, doFetch]
+  );
+  return {
+    files,
+    page,
+    pageSize,
+    total,
+    pageCount,
+    loading: loading || configLoading,
+    error,
+    refetch: doFetch,
+    setPage,
+    setQuery,
+    available,
+    removeFile,
+    updateFile: doUpdateFile
+  };
+}
+function useFile(fileId, opts) {
+  const { snapshot } = useAppKit();
+  const { filesBaseURL, loading: configLoading } = useFilesConfig();
+  const [file, setFile] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const fetchIdRef = React.useRef(0);
+  const enabled = opts?.enabled !== false;
+  const jwtToken = snapshot?.jwtToken;
+  const appId = snapshot?.appId;
+  const available = !!filesBaseURL;
+  const doFetch = React.useCallback(() => {
+    if (!filesBaseURL || !appId || !jwtToken || !fileId || !enabled) return;
+    const id = ++fetchIdRef.current;
+    setLoading(true);
+    setError(null);
+    getFile({ filesBaseURL, appId, jwtToken }, fileId).then((res) => {
+      if (id !== fetchIdRef.current) return;
+      setFile(res);
+      setLoading(false);
+    }).catch((err) => {
+      if (id !== fetchIdRef.current) return;
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [filesBaseURL, appId, jwtToken, fileId, enabled]);
+  React.useEffect(() => {
+    doFetch();
+    return () => {
+      fetchIdRef.current++;
+    };
+  }, [doFetch]);
+  return {
+    file,
+    loading: loading || configLoading,
+    error,
+    refetch: doFetch,
+    available
+  };
+}
+var IDLE2 = {
+  status: "idle",
+  progress: 0,
+  bytesUploaded: 0,
+  bytesTotal: 0,
+  error: null
+};
+function useFileUpload() {
+  const { snapshot } = useAppKit();
+  const { filesBaseURL } = useFilesConfig();
+  const [progress, setProgress] = React.useState(IDLE2);
+  const abortRef = React.useRef(null);
+  const jwtToken = snapshot?.jwtToken;
+  const appId = snapshot?.appId;
+  const available = !!filesBaseURL;
+  React.useEffect(() => {
+    if (!jwtToken && progress.status === "uploading") {
+      abortRef.current?.abort();
+    }
+  }, [jwtToken, progress.status]);
+  const upload = React.useCallback(
+    async (opts) => {
+      if (!filesBaseURL || !appId || !jwtToken) {
+        setProgress({
+          ...IDLE2,
+          status: "error",
+          error: "Files service not available"
+        });
+        return;
+      }
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setProgress({
+        status: "uploading",
+        progress: 0,
+        bytesUploaded: 0,
+        bytesTotal: opts.file.size,
+        error: null
+      });
+      try {
+        const result = await uploadFile(
+          { filesBaseURL, appId, jwtToken },
+          opts,
+          (pct, loaded, total) => {
+            setProgress((prev) => ({
+              ...prev,
+              progress: pct,
+              bytesUploaded: loaded,
+              bytesTotal: total
+            }));
+          },
+          controller.signal
+        );
+        if (result.status === 204) {
+          setProgress({
+            status: "success",
+            progress: 100,
+            bytesUploaded: opts.file.size,
+            bytesTotal: opts.file.size,
+            error: null
+          });
+        } else if (result.status === 409) {
+          setProgress({
+            status: "conflict",
+            progress: 100,
+            bytesUploaded: opts.file.size,
+            bytesTotal: opts.file.size,
+            error: result.body?.message || "A file with identical content already exists",
+            existingFileId: result.body?.fileId
+          });
+        } else if (result.status === 413) {
+          throw new Error("File exceeds 10MB limit");
+        } else if (result.status === 415) {
+          throw new Error(
+            "Unsupported file type. Allowed: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, CSV, TXT, ZIP, GZ, JSON, XML"
+          );
+        } else if (result.status === 429) {
+          throw new Error(result.body?.message || "Storage limit reached");
+        } else {
+          throw new Error(`Upload failed: HTTP ${result.status}`);
+        }
+      } catch (err) {
+        if (err.message === "Upload aborted") return;
+        setProgress({
+          status: "error",
+          progress: 0,
+          bytesUploaded: 0,
+          bytesTotal: opts.file.size,
+          error: err.message || "Upload failed"
+        });
+      }
+    },
+    [filesBaseURL, appId, jwtToken]
+  );
+  const cancel = React.useCallback(() => {
+    abortRef.current?.abort();
+    setProgress(IDLE2);
+  }, []);
+  const reset = React.useCallback(() => {
+    setProgress(IDLE2);
+  }, []);
+  return { upload, cancel, progress, reset, available };
+}
+var FONT4 = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var ACCEPT_DEFAULT2 = "application/pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.csv,text/plain,.zip,.gz,application/json,.xml";
+var MAX_SIZE_DEFAULT2 = 10 * 1024 * 1024;
+function formatSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileUploader({
+  onUpload,
+  onError,
+  defaultTitle,
+  defaultDescription = "",
+  showFields = true,
+  accept = ACCEPT_DEFAULT2,
+  maxSize = MAX_SIZE_DEFAULT2,
+  refType,
+  refId,
+  className,
+  style,
+  label = "Drop a file here or click to select",
+  disabled = false
+}) {
+  const { upload, cancel, progress, reset, available } = useFileUpload();
+  const fileInputRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const [title, setTitle] = React.useState(defaultTitle ?? "");
+  const [description, setDescription] = React.useState(defaultDescription);
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const [validationError, setValidationError] = React.useState(null);
+  const [showSuccess, setShowSuccess] = React.useState(false);
+  const handleFile = React.useCallback(
+    (file) => {
+      setValidationError(null);
+      if (file.size > maxSize) {
+        setValidationError(
+          `File too large (${(file.size / 1024 / 1024).toFixed(1)}MB). Max ${(maxSize / 1024 / 1024).toFixed(0)}MB.`
+        );
+        return;
+      }
+      setSelectedFile(file);
+      if (!title) {
+        setTitle(file.name.replace(/\.[^.]+$/, ""));
+      }
+    },
+    [maxSize, title]
+  );
+  const handleDrop = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+  const handleSubmit = React.useCallback(async () => {
+    if (!selectedFile || !title.trim()) return;
+    reset();
+    const opts = {
+      file: selectedFile,
+      title: title.trim(),
+      description: description.trim() || void 0,
+      refType,
+      refId
+    };
+    await upload(opts);
+  }, [selectedFile, title, description, refType, refId, upload, reset]);
+  const prevStatus = React.useRef(progress.status);
+  React.useEffect(() => {
+    if (prevStatus.current === progress.status) return;
+    prevStatus.current = progress.status;
+    if (progress.status === "success") {
+      setSelectedFile(null);
+      setTitle(defaultTitle ?? "");
+      setDescription(defaultDescription);
+      setShowSuccess(true);
+      onUpload?.();
+    }
+    if (progress.status === "conflict") {
+      setSelectedFile(null);
+      setTitle(defaultTitle ?? "");
+      setDescription(defaultDescription);
+    }
+    if (progress.status === "error" && progress.error) {
+      onError?.(progress.error);
+    }
+  }, [progress.status, progress.error, onUpload, onError, defaultTitle, defaultDescription]);
+  React.useEffect(() => {
+    if (!showSuccess) return;
+    const t = setTimeout(() => setShowSuccess(false), 4e3);
+    return () => clearTimeout(t);
+  }, [showSuccess]);
+  if (!available) return null;
+  const isUploading = progress.status === "uploading";
+  const isDisabled = disabled || isUploading;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { fontFamily: FONT4, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onDragEnter: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragLeave: () => setDragOver(false),
+        onDrop: handleDrop,
+        onClick: () => !isDisabled && fileInputRef.current?.click(),
+        style: {
+          border: `2px dashed ${dragOver ? "#1976d2" : "#ccc"}`,
+          borderRadius: 8,
+          padding: "24px 16px",
+          textAlign: "center",
+          cursor: isDisabled ? "default" : "pointer",
+          backgroundColor: dragOver ? "#e3f2fd" : "#fafafa",
+          transition: "all 0.15s ease",
+          opacity: isDisabled ? 0.6 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              style: { display: "none" },
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) handleFile(file);
+                e.target.value = "";
+              }
+            }
+          ),
+          !selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#999", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginBottom: 6 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+          ] }),
+          selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#666", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginBottom: 6 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, color: "#666" }, children: selectedFile ? selectedFile.name : label }),
+          selectedFile && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#999", marginTop: 4 }, children: formatSize2(selectedFile.size) })
+        ]
+      }
+    ),
+    validationError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#d32f2f", fontSize: 13, marginTop: 8 }, children: validationError }),
+    showFields && selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Title",
+          value: title,
+          onChange: (e) => setTitle(e.target.value),
+          disabled: isDisabled,
+          maxLength: 250,
+          style: {
+            padding: "8px 12px",
+            borderRadius: 6,
+            border: "1px solid #ddd",
+            fontSize: 14,
+            fontFamily: FONT4,
+            outline: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Description (optional)",
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          disabled: isDisabled,
+          maxLength: 500,
+          style: {
+            padding: "8px 12px",
+            borderRadius: 6,
+            border: "1px solid #ddd",
+            fontSize: 14,
+            fontFamily: FONT4,
+            outline: "none"
+          }
+        }
+      )
+    ] }),
+    isUploading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "#666", marginBottom: 4 }, children: [
+        "Uploading... \u2014 ",
+        Math.round(progress.progress),
+        "%",
+        progress.bytesTotal > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " \xB7 ",
+          formatSize2(progress.bytesUploaded),
+          " / ",
+          formatSize2(progress.bytesTotal)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: "#e0e0e0",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: `${progress.progress}%`,
+                height: "100%",
+                backgroundColor: "#1976d2",
+                transition: "width 0.2s ease"
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleSubmit,
+          disabled: isDisabled || !title.trim(),
+          style: {
+            padding: "8px 20px",
+            borderRadius: 6,
+            border: "none",
+            backgroundColor: isDisabled ? "#bbb" : "#1976d2",
+            color: "#fff",
+            fontSize: 14,
+            fontFamily: FONT4,
+            cursor: isDisabled ? "default" : "pointer",
+            fontWeight: 500
+          },
+          children: "Upload"
+        }
+      ),
+      isUploading && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: cancel,
+          style: {
+            padding: "8px 16px",
+            borderRadius: 6,
+            border: "1px solid #ddd",
+            backgroundColor: "#fff",
+            fontSize: 14,
+            fontFamily: FONT4,
+            cursor: "pointer",
+            color: "#666"
+          },
+          children: "Cancel"
+        }
+      )
+    ] }),
+    progress.status === "error" && progress.error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#d32f2f", fontSize: 13, marginTop: 8 }, children: progress.error }),
+    progress.status === "conflict" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: "10px 14px",
+          borderRadius: 8,
+          backgroundColor: "#fff3e0",
+          border: "1px solid #ffcc80",
+          color: "#e65100",
+          fontSize: 13,
+          fontFamily: FONT4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: progress.error || "A file with identical content already exists" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => reset(),
+              style: {
+                background: "none",
+                border: "none",
+                color: "#e65100",
+                cursor: "pointer",
+                fontSize: 16,
+                lineHeight: 1,
+                padding: "0 2px"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    ),
+    showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: "10px 14px",
+          borderRadius: 8,
+          backgroundColor: "#e8f5e9",
+          border: "1px solid #a5d6a7",
+          color: "#2e7d32",
+          fontSize: 13,
+          fontFamily: FONT4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "File uploaded successfully" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setShowSuccess(false),
+              style: {
+                background: "none",
+                border: "none",
+                color: "#2e7d32",
+                cursor: "pointer",
+                fontSize: 16,
+                lineHeight: 1,
+                padding: "0 2px"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var FONT5 = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+function formatBytes2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var FORMAT_LABELS = {
+  pdf: "PDF",
+  doc: "Word",
+  docx: "Word",
+  xls: "Excel",
+  xlsx: "Excel",
+  ppt: "PowerPoint",
+  pptx: "PowerPoint",
+  csv: "CSV",
+  txt: "Text",
+  zip: "ZIP",
+  gz: "GZip",
+  json: "JSON",
+  xml: "XML"
+};
+function formatLabel(format) {
+  return FORMAT_LABELS[format.toLowerCase()] || format.toUpperCase();
+}
+function isSafeURL2(url) {
+  return url.startsWith("https://") || url.startsWith("http://localhost");
+}
+function sanitizeFilename2(name) {
+  return name.replace(/[/\\:*?"<>|\x00-\x1f]/g, "_");
+}
+function FileDetails({
+  file,
+  onClose,
+  onEdit,
+  onDelete,
+  className,
+  style
+}) {
+  const [copiedField, setCopiedField] = React.useState(null);
+  const copyText = React.useCallback((text, field) => {
+    navigator.clipboard?.writeText(text).then(() => {
+      setCopiedField(field);
+      setTimeout(() => setCopiedField(null), 1200);
+    }).catch(() => {
+    });
+  }, []);
+  const handleDownload = React.useCallback(async () => {
+    if (!file.objectURL) return;
+    try {
+      const res = await fetch(file.objectURL);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = sanitizeFilename2(file.originalName || `${file.title}.${file.ext}`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch {
+      if (isSafeURL2(file.objectURL)) {
+        window.open(file.objectURL, "_blank");
+      }
+    }
+  }, [file]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0,0,0,0.5)"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className,
+          style: {
+            backgroundColor: "#fff",
+            borderRadius: 12,
+            maxWidth: 600,
+            width: "95vw",
+            maxHeight: "90vh",
+            overflow: "auto",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+            fontFamily: FONT5,
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 20px 12px",
+                  borderBottom: "1px solid #eee"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { format: file.format }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 16 }, children: file.title })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: 22,
+                        cursor: "pointer",
+                        color: "#666",
+                        lineHeight: 1,
+                        padding: "4px 8px"
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, fontSize: 13 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(MetaItem2, { label: "Format", value: formatLabel(file.format) }),
+                /* @__PURE__ */ jsxRuntime.jsx(MetaItem2, { label: "Size", value: formatBytes2(file.sizeBytes) }),
+                /* @__PURE__ */ jsxRuntime.jsx(MetaItem2, { label: "Type", value: file.contentType }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  MetaItem2,
+                  {
+                    label: "ID",
+                    value: file.fileId.slice(0, 12) + "...",
+                    onClick: () => copyText(file.fileId, "id"),
+                    actionLabel: copiedField === "id" ? "Copied" : "Copy"
+                  }
+                ),
+                file.objectURL && /* @__PURE__ */ jsxRuntime.jsx(
+                  MetaItem2,
+                  {
+                    label: "URL",
+                    value: new URL(file.objectURL).pathname.split("/").pop() || "...",
+                    onClick: () => copyText(file.objectURL, "url"),
+                    actionLabel: copiedField === "url" ? "Copied" : "Copy"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, fontSize: 13, color: "#555" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: "#888" }, children: "File:" }),
+                " ",
+                file.originalName
+              ] }),
+              file.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, fontSize: 13, color: "#666" }, children: file.description }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 6, fontSize: 12, color: "#999" }, children: [
+                "Uploaded ",
+                new Date(file.uploadedAt).toLocaleDateString()
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  padding: "12px 20px 16px",
+                  borderTop: "1px solid #eee",
+                  gap: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                    onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => onEdit(file),
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT5,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Edit"
+                      }
+                    ),
+                    onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => onDelete(file),
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ffcdd2",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT5,
+                          cursor: "pointer",
+                          color: "#d32f2f"
+                        },
+                        children: "Delete"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                    file.objectURL && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      isSafeURL2(file.objectURL) && /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: file.objectURL,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: {
+                            padding: "6px 14px",
+                            borderRadius: 6,
+                            border: "1px solid #ddd",
+                            backgroundColor: "#fff",
+                            fontSize: 13,
+                            fontFamily: FONT5,
+                            cursor: "pointer",
+                            color: "#333",
+                            textDecoration: "none",
+                            display: "inline-flex",
+                            alignItems: "center"
+                          },
+                          children: "Open"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: handleDownload,
+                          style: {
+                            padding: "6px 14px",
+                            borderRadius: 6,
+                            border: "1px solid #ddd",
+                            backgroundColor: "#fff",
+                            fontSize: 13,
+                            fontFamily: FONT5,
+                            cursor: "pointer",
+                            color: "#333"
+                          },
+                          children: "Download"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fafafa",
+                          fontSize: 13,
+                          fontFamily: FONT5,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Close"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function FileIcon({ format }) {
+  const colors = {
+    pdf: "#d32f2f",
+    doc: "#1565c0",
+    docx: "#1565c0",
+    xls: "#2e7d32",
+    xlsx: "#2e7d32",
+    ppt: "#e65100",
+    pptx: "#e65100",
+    csv: "#2e7d32",
+    json: "#6a1b9a",
+    xml: "#6a1b9a",
+    txt: "#616161",
+    zip: "#795548",
+    gz: "#795548"
+  };
+  const color = colors[format.toLowerCase()] || "#757575";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        width: 32,
+        height: 32,
+        borderRadius: 6,
+        backgroundColor: color,
+        color: "#fff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 10,
+        fontWeight: 700,
+        fontFamily: FONT5,
+        flexShrink: 0,
+        textTransform: "uppercase"
+      },
+      children: format.slice(0, 4)
+    }
+  );
+}
+function MetaItem2({
+  label,
+  value,
+  onClick,
+  actionLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "3px 10px",
+        borderRadius: 10,
+        backgroundColor: "#f5f5f5",
+        color: "#555",
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#888" }, children: [
+          label,
+          ":"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "monospace" }, children: value }),
+        onClick && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#1976d2",
+              cursor: "pointer",
+              fontSize: 11,
+              padding: "0 2px",
+              fontFamily: FONT5
+            },
+            children: actionLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var FONT6 = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var SKELETON_STYLE_ID2 = "mr-file-skeleton-keyframes";
+function useSkeletonStyle2() {
+  React.useEffect(() => {
+    if (document.getElementById(SKELETON_STYLE_ID2)) return;
+    const style = document.createElement("style");
+    style.id = SKELETON_STYLE_ID2;
+    style.textContent = "@keyframes mr-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}";
+    document.head.appendChild(style);
+  }, []);
+}
+function formatBytes3(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var FORMAT_COLORS = {
+  pdf: "#d32f2f",
+  doc: "#1565c0",
+  docx: "#1565c0",
+  xls: "#2e7d32",
+  xlsx: "#2e7d32",
+  ppt: "#e65100",
+  pptx: "#e65100",
+  csv: "#2e7d32",
+  json: "#6a1b9a",
+  xml: "#6a1b9a",
+  txt: "#616161",
+  zip: "#795548",
+  gz: "#795548"
+};
+function FilePicker({
+  onSelect,
+  onClose,
+  mode = "inline",
+  pageSize = 20,
+  showSearch = true,
+  searchPlaceholder = "Search files...",
+  selectedFileId,
+  showActions = false,
+  refType,
+  refId,
+  refreshSignal,
+  className,
+  style
+}) {
+  const {
+    files,
+    page,
+    pageCount,
+    total,
+    loading,
+    error,
+    setPage,
+    setQuery,
+    refetch,
+    available,
+    removeFile,
+    updateFile: updateFile2
+  } = useFiles({ pageSize, refType, refId });
+  useSkeletonStyle2();
+  const [searchInput, setSearchInput] = React.useState("");
+  const [activeRow, setActiveRow] = React.useState(null);
+  const [detailFile, setDetailFile] = React.useState(null);
+  const [editFile, setEditFile] = React.useState(null);
+  const [editTitle, setEditTitle] = React.useState("");
+  const [editDesc, setEditDesc] = React.useState("");
+  const [editSaving, setEditSaving] = React.useState(false);
+  const [deleteConfirm, setDeleteConfirm] = React.useState(null);
+  const [deleting, setDeleting] = React.useState(false);
+  const [actionError, setActionError] = React.useState(null);
+  React.useEffect(() => {
+    const timer = setTimeout(() => setQuery(searchInput), 300);
+    return () => clearTimeout(timer);
+  }, [searchInput, setQuery]);
+  const prevSignal = React.useRef(refreshSignal);
+  React.useEffect(() => {
+    if (refreshSignal != null && refreshSignal !== prevSignal.current) {
+      prevSignal.current = refreshSignal;
+      refetch();
+    }
+  }, [refreshSignal, refetch]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose?.();
+    },
+    [onClose]
+  );
+  const handleDelete = React.useCallback(
+    async (f) => {
+      setDeleting(true);
+      setActionError(null);
+      try {
+        await removeFile(f.fileId);
+        setDeleteConfirm(null);
+        setDetailFile(null);
+      } catch (err) {
+        setActionError(err.message || "Delete failed");
+      } finally {
+        setDeleting(false);
+      }
+    },
+    [removeFile]
+  );
+  const handleEditSave = React.useCallback(async () => {
+    if (!editFile || !editTitle.trim()) return;
+    setEditSaving(true);
+    setActionError(null);
+    try {
+      await updateFile2(editFile.fileId, {
+        title: editTitle.trim(),
+        description: editDesc.trim() || void 0
+      });
+      setEditFile(null);
+    } catch (err) {
+      setActionError(err.message || "Update failed");
+    } finally {
+      setEditSaving(false);
+    }
+  }, [editFile, editTitle, editDesc, updateFile2]);
+  const openEdit = React.useCallback((f) => {
+    setEditTitle(f.title);
+    setEditDesc(f.description || "");
+    setEditFile(f);
+    setDetailFile(null);
+    setActionError(null);
+  }, []);
+  const openDelete = React.useCallback((f) => {
+    setDeleteConfirm(f);
+    setDetailFile(null);
+    setActionError(null);
+  }, []);
+  if (!available) return null;
+  const skeletonCount = Math.min(pageSize, 6);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        fontFamily: FONT6,
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        ...!mode || mode === "inline" ? style : {}
+      },
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, position: "relative" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: searchPlaceholder,
+                value: searchInput,
+                onChange: (e) => setSearchInput(e.target.value),
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  paddingRight: searchInput ? 32 : 12,
+                  borderRadius: 6,
+                  border: "1px solid #ddd",
+                  fontSize: 14,
+                  fontFamily: FONT6,
+                  outline: "none",
+                  boxSizing: "border-box"
+                }
+              }
+            ),
+            searchInput && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setSearchInput(""),
+                style: {
+                  position: "absolute",
+                  right: 6,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  background: "none",
+                  border: "none",
+                  fontSize: 16,
+                  cursor: "pointer",
+                  color: "#999",
+                  lineHeight: 1,
+                  padding: "2px 4px"
+                },
+                children: "\xD7"
+              }
+            )
+          ] }),
+          mode === "modal" && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onClose,
+              style: {
+                background: "none",
+                border: "none",
+                fontSize: 20,
+                cursor: "pointer",
+                padding: "4px 8px",
+                color: "#666",
+                lineHeight: 1
+              },
+              children: "\xD7"
+            }
+          )
+        ] }),
+        actionError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#d32f2f", fontSize: 13, padding: "4px 0" }, children: actionError }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              height: 48,
+              borderRadius: 6,
+              backgroundColor: "#f0f0f0",
+              animation: "mr-skeleton-pulse 1.5s ease-in-out infinite"
+            }
+          },
+          i
+        )) }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 20, color: "#d32f2f", fontSize: 14 }, children: error }),
+        !loading && !error && files.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "40px 20px", color: "#999" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "36",
+              height: "36",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { opacity: 0.4, marginBottom: 8 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 500, color: "#666" }, children: "No files yet" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, marginTop: 4 }, children: searchInput ? "Try a different search term" : "Upload a file to get started" })
+        ] }),
+        !loading && files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: files.map((f) => {
+          const isSelected = f.fileId === selectedFileId;
+          const isActive = activeRow === f.fileId;
+          const fmtColor = FORMAT_COLORS[f.format.toLowerCase()] || "#757575";
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onMouseEnter: () => setActiveRow(f.fileId),
+              onMouseLeave: () => setActiveRow(null),
+              onClick: () => onSelect?.(f),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "8px 12px",
+                borderRadius: 6,
+                border: isSelected ? "1px solid #1976d2" : "1px solid #eee",
+                backgroundColor: isSelected ? "#e3f2fd" : isActive ? "#fafafa" : "#fff",
+                cursor: "pointer",
+                transition: "all 0.1s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: 36,
+                      height: 36,
+                      borderRadius: 6,
+                      backgroundColor: fmtColor,
+                      color: "#fff",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 10,
+                      fontWeight: 700,
+                      flexShrink: 0,
+                      textTransform: "uppercase"
+                    },
+                    children: f.format.slice(0, 4)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: 14,
+                        fontWeight: 500,
+                        color: "#222",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: f.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: "#888",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: [
+                        f.originalName,
+                        " \xB7 ",
+                        formatBytes3(f.sizeBytes)
+                      ]
+                    }
+                  )
+                ] }),
+                showActions && isActive && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: { display: "flex", gap: 4, flexShrink: 0 },
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(RowActionBtn, { label: "Info", onClick: () => setDetailFile(f) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(RowActionBtn, { label: "Edit", onClick: () => openEdit(f) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(RowActionBtn, { label: "Del", onClick: () => openDelete(f), color: "#d32f2f" })
+                    ]
+                  }
+                )
+              ]
+            },
+            f.fileId
+          );
+        }) }),
+        pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 12,
+              fontSize: 14
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  disabled: page <= 0,
+                  onClick: () => setPage(page - 1),
+                  style: {
+                    padding: "4px 12px",
+                    borderRadius: 4,
+                    border: "1px solid #ddd",
+                    background: page <= 0 ? "#f5f5f5" : "#fff",
+                    cursor: page <= 0 ? "default" : "pointer",
+                    fontFamily: FONT6,
+                    fontSize: 13,
+                    color: page <= 0 ? "#bbb" : "#333"
+                  },
+                  children: "Prev"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#666", fontSize: 13 }, children: [
+                "Page ",
+                page + 1,
+                " of ",
+                pageCount,
+                " \xB7 ",
+                total,
+                " file",
+                total !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  disabled: page >= pageCount - 1,
+                  onClick: () => setPage(page + 1),
+                  style: {
+                    padding: "4px 12px",
+                    borderRadius: 4,
+                    border: "1px solid #ddd",
+                    background: page >= pageCount - 1 ? "#f5f5f5" : "#fff",
+                    cursor: page >= pageCount - 1 ? "default" : "pointer",
+                    fontFamily: FONT6,
+                    fontSize: 13,
+                    color: page >= pageCount - 1 ? "#bbb" : "#333"
+                  },
+                  children: "Next"
+                }
+              )
+            ]
+          }
+        ),
+        detailFile && /* @__PURE__ */ jsxRuntime.jsx(
+          FileDetails,
+          {
+            file: detailFile,
+            onClose: () => setDetailFile(null),
+            onEdit: showActions ? openEdit : void 0,
+            onDelete: showActions ? openDelete : void 0
+          }
+        ),
+        editFile && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 1e4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "rgba(0,0,0,0.4)"
+            },
+            onClick: (e) => {
+              if (e.target === e.currentTarget && !editSaving) setEditFile(null);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#fff",
+                  borderRadius: 10,
+                  padding: 20,
+                  maxWidth: 400,
+                  width: "90vw",
+                  fontFamily: FONT6
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 15, marginBottom: 12 }, children: "Edit File" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Title",
+                        value: editTitle,
+                        onChange: (e) => setEditTitle(e.target.value),
+                        disabled: editSaving,
+                        maxLength: 250,
+                        style: {
+                          padding: "8px 12px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          fontSize: 14,
+                          fontFamily: FONT6,
+                          outline: "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Description (optional)",
+                        value: editDesc,
+                        onChange: (e) => setEditDesc(e.target.value),
+                        disabled: editSaving,
+                        maxLength: 500,
+                        style: {
+                          padding: "8px 12px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          fontSize: 14,
+                          fontFamily: FONT6,
+                          outline: "none"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setEditFile(null),
+                        disabled: editSaving,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT6,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: handleEditSave,
+                        disabled: editSaving || !editTitle.trim(),
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "none",
+                          backgroundColor: editSaving || !editTitle.trim() ? "#bbb" : "#1976d2",
+                          color: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT6,
+                          cursor: editSaving ? "default" : "pointer"
+                        },
+                        children: editSaving ? "Saving..." : "Save"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        deleteConfirm && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 1e4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "rgba(0,0,0,0.4)"
+            },
+            onClick: (e) => {
+              if (e.target === e.currentTarget && !deleting) setDeleteConfirm(null);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#fff",
+                  borderRadius: 10,
+                  padding: 20,
+                  maxWidth: 360,
+                  width: "90vw",
+                  fontFamily: FONT6
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 15, marginBottom: 8 }, children: "Delete File" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, color: "#555", marginBottom: 16 }, children: [
+                    "Delete \u201C",
+                    deleteConfirm.title,
+                    "\u201D? This cannot be undone."
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setDeleteConfirm(null),
+                        disabled: deleting,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "1px solid #ddd",
+                          backgroundColor: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT6,
+                          cursor: "pointer",
+                          color: "#333"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => handleDelete(deleteConfirm),
+                        disabled: deleting,
+                        style: {
+                          padding: "6px 14px",
+                          borderRadius: 6,
+                          border: "none",
+                          backgroundColor: deleting ? "#bbb" : "#d32f2f",
+                          color: "#fff",
+                          fontSize: 13,
+                          fontFamily: FONT6,
+                          cursor: deleting ? "default" : "pointer"
+                        },
+                        children: deleting ? "Deleting..." : "Delete"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  if (mode === "modal") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0,0,0,0.4)"
+        },
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onClose?.();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "#fff",
+              borderRadius: 12,
+              padding: 20,
+              maxWidth: 640,
+              width: "90vw",
+              maxHeight: "80vh",
+              overflow: "auto",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+              ...style
+            },
+            children: content
+          }
+        )
+      }
+    );
+  }
+  return content;
+}
+function RowActionBtn({
+  label,
+  onClick,
+  color
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      style: {
+        padding: "4px 10px",
+        borderRadius: 4,
+        border: "1px solid #e0e0e0",
+        backgroundColor: "#fff",
+        color: color || "#555",
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: "pointer",
+        fontFamily: FONT6
+      },
+      children: label
+    }
+  );
+}
+
 exports.AppKit = AppKit;
 exports.AppKitAuthed = AppKitAuthed;
+exports.FileDetails = FileDetails;
+exports.FilePicker = FilePicker;
+exports.FileUploader = FileUploader;
+exports.ImageDetails = ImageDetails;
+exports.ImagePicker = ImagePicker;
+exports.ImageUploader = ImageUploader;
+exports.MrImage = MrImage;
 exports.UserButton = UserButton;
 exports.useAppKit = useAppKit;
+exports.useConfig = useConfig;
+exports.useConfigValue = useConfigValue;
+exports.useFeatureFlag = useFeatureFlag;
+exports.useFeatureFlags = useFeatureFlags;
+exports.useFile = useFile;
+exports.useFileUpload = useFileUpload;
+exports.useFiles = useFiles;
+exports.useImage = useImage;
+exports.useImageUpload = useImageUpload;
+exports.useImages = useImages;
+exports.usePermission = usePermission;
+exports.usePermissions = usePermissions;
+exports.useProject = useProject;
+exports.useRole = useRole;
+exports.useRoles = useRoles;
+exports.useToken = useToken;
+exports.useUser = useUser;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map