@riverbankcms/sdk 0.4.0 → 0.4.2

package/dist/client/rendering/client.mjs

@@ -329,121 +329,46 @@ var LinkNode = ({
   return /* @__PURE__ */ jsx8("a", { href, ...rest, children });
 };
 
-// ../media-core/dist/chunk-JAKU4BKA.mjs
-var DEFAULT_BASE_PATH = "/api/img";
-var formatNumber = (value) => Number.isInteger(value) ? value.toString() : value.toFixed(6).replace(/0+$/, "").replace(/\.$/, "");
-var addParam = (search, key, value) => {
-  if (value === void 0) return;
-  switch (key) {
-    case "fpX":
-      search.set("fp-x", formatNumber(value));
-      break;
-    case "fpY":
-      search.set("fp-y", formatNumber(value));
-      break;
-    case "rect": {
-      const rect = value;
-      if (!rect) break;
-      search.set("rect", rect.map(formatNumber).join(","));
-      break;
-    }
-    case "autoFormat":
-      if (value) {
-        search.append("auto", "format");
-      }
-      break;
-    case "invert":
-      search.set("invert", value ? "true" : "false");
-      break;
-    default:
-      search.set(
-        key,
-        typeof value === "number" ? formatNumber(value) : String(value)
-      );
-  }
-};
-var ORDER = [
-  "w",
-  "h",
-  "dpr",
-  "fit",
-  "crop",
-  "fpX",
-  "fpY",
-  "rect",
-  "q",
-  "fm",
-  "autoFormat",
-  "bg",
-  "flip",
-  "or",
-  "pad",
-  "blur",
-  "sharp",
-  "invert",
-  "sat",
-  "cs"
-];
-var getImageUrl = (asset, params = {}, basePath = DEFAULT_BASE_PATH) => {
-  const trimmedBase = basePath.endsWith("/") ? basePath.slice(0, Math.max(basePath.length - 1, 0)) : basePath;
-  const path = `${trimmedBase}/${encodeURIComponent(asset.id)}`;
-  const searchParams = new URLSearchParams();
-  ORDER.forEach((key) => {
-    addParam(searchParams, key, params[key]);
-  });
-  const query = searchParams.toString();
-  return query ? `${path}?${query}` : path;
-};
-
-// ../blocks/src/system/runtime/utils/api-url.ts
-function resolveMultiEnvDashboardUrl() {
-  const env = process.env.RIVERBANK_ENV;
-  if (!env) return null;
-  const envKey = `RIVERBANK_${env.toUpperCase()}_DASHBOARD_URL`;
-  const dashboardUrl = process.env[envKey];
-  if (dashboardUrl) {
-    return dashboardUrl.replace(/\/$/, "");
-  }
-  return null;
-}
-function getCmsApiUrl() {
-  const multiEnvDashboard = resolveMultiEnvDashboardUrl();
-  if (multiEnvDashboard) {
-    return `${multiEnvDashboard}/api`;
-  }
-  const builderApiUrl = process.env.NEXT_PUBLIC_BUILDER_API_URL;
-  if (builderApiUrl) {
-    return builderApiUrl.replace(/\/$/, "");
-  }
-  const dashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL;
-  if (dashboardUrl) {
-    const base = dashboardUrl.replace(/\/$/, "");
-    return `${base}/api`;
-  }
-  const legacyApiUrl = process.env.NEXT_PUBLIC_CMS_API_URL;
-  if (legacyApiUrl) {
-    return legacyApiUrl.replace(/\/$/, "");
-  }
-  throw new Error(
-    "Dashboard URL not configured. Either:\n  1. Set RIVERBANK_ENV with RIVERBANK_LOCAL_DASHBOARD_URL / RIVERBANK_REMOTE_DASHBOARD_URL\n  2. Set NEXT_PUBLIC_BUILDER_API_URL (SDK sites)\n  3. Set NEXT_PUBLIC_DASHBOARD_URL (frontend app)"
-  );
+// ../media-core/dist/chunk-ZBK775TB.mjs
+function getDirectImageUrl(supabaseUrl, storagePath, storageBucket = "media", options) {
+  const baseUrl = supabaseUrl.replace(/\/$/, "");
+  const encodedPath = storagePath.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+  const isSvg = storagePath.toLowerCase().endsWith(".svg");
+  if (options && !isSvg && (options.width || options.height)) {
+    const params = new URLSearchParams();
+    if (options.width) params.set("width", String(options.width));
+    if (options.height) params.set("height", String(options.height));
+    if (options.quality) params.set("quality", String(options.quality));
+    if (options.resize) params.set("resize", options.resize);
+    return `${baseUrl}/storage/v1/render/image/public/${storageBucket}/${encodedPath}?${params.toString()}`;
+  }
+  return `${baseUrl}/storage/v1/object/public/${storageBucket}/${encodedPath}`;
 }
 
 // ../blocks/src/system/runtime/nodes/media.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
+function getSupabaseUrl() {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  if (!url) {
+    throw new Error(
+      "NEXT_PUBLIC_SUPABASE_URL is not configured. Set it to your Supabase project URL (e.g., https://xxx.supabase.co)"
+    );
+  }
+  return url.replace(/\/$/, "");
+}
 var debugMediaNodeLog = (...args) => {
   if (typeof window !== "undefined" && window.__DEBUG_MEDIA_NODE__) {
     console.log("[MediaNode]", ...args);
   }
 };
-var MediaNode = ({ value, className, style, previewKey }) => {
+var MediaNode = ({ value, className, style }) => {
   if (!value) return null;
   if (value.type === "video") {
     const src = value.src;
     if (!src) return null;
     return /* @__PURE__ */ jsx9("video", { className, style, src, autoPlay: true, muted: true, loop: true, playsInline: true, "aria-label": value.alt ?? "" });
   }
-  const imageUrl = resolveImageUrl(value, { previewKey });
+  const imageUrl = resolveImageUrl(value);
   if (!imageUrl) {
     return /* @__PURE__ */ jsx9(
       "div",
@@ -454,56 +379,36 @@ var MediaNode = ({ value, className, style, previewKey }) => {
       }
     );
   }
-  const isCrossOrigin = typeof window !== "undefined" && imageUrl.startsWith("http") && !imageUrl.startsWith(window.location.origin);
-  const isApiRoute = imageUrl.includes("/api/img") || imageUrl.includes("/api/public/img");
-  const crossOriginMode = isCrossOrigin && isApiRoute ? "use-credentials" : isCrossOrigin ? "anonymous" : void 0;
+  const hotspotStyle = value.transform?.hotspot ? { objectPosition: `${value.transform.hotspot.x * 100}% ${value.transform.hotspot.y * 100}%` } : void 0;
   return /* @__PURE__ */ jsx9(
     "img",
     {
       src: imageUrl,
       alt: value.alt ?? "",
       className,
-      style,
-      loading: "lazy",
-      crossOrigin: crossOriginMode
+      style: mergeStyles(style, hotspotStyle),
+      loading: "lazy"
     }
   );
 };
-function resolveImageUrl(value, options = {}) {
+function resolveImageUrl(value) {
   if (value.type !== "image") return void 0;
-  const params = {};
-  const rect = value.transform?.rect;
-  const hotspot = value.transform?.hotspot;
-  if (rect && Array.isArray(rect) && rect.length === 4) {
-    params.rect = rect.join(",");
-  }
-  if (hotspot && typeof hotspot.x === "number" && typeof hotspot.y === "number") {
-    const x2 = clamp(hotspot.x);
-    const y2 = clamp(hotspot.y);
-    params.hotspot = `${x2.toFixed(4)},${y2.toFixed(4)}`;
-  }
   debugMediaNodeLog("resolveImageUrl input", {
     assetId: value.assetId,
+    storagePath: value.storagePath,
     src: value.src,
-    type: value.type,
-    hasPreviewKey: !!options.previewKey
+    type: value.type
   });
-  if (value.assetId) {
-    const cmsApiBase = getCmsApiUrl();
-    const basePath = `${cmsApiBase}/public/img`;
-    let resolved = getImageUrl({ id: value.assetId }, params, basePath);
-    if (options.previewKey) {
-      const separator = resolved.includes("?") ? "&" : "?";
-      resolved = `${resolved}${separator}preview_key=${encodeURIComponent(options.previewKey)}`;
-    }
-    debugMediaNodeLog("resolve:asset-id", {
-      assetId: value.assetId,
-      cmsApiBase,
-      basePath,
-      resolvedUrl: resolved,
-      hasPreviewKey: !!options.previewKey
+  if (value.storagePath && value.storagePath.length > 0) {
+    const supabaseUrl = getSupabaseUrl();
+    const bucket = value.storageBucket ?? "media";
+    const directUrl = getDirectImageUrl(supabaseUrl, value.storagePath, bucket);
+    debugMediaNodeLog("resolve:direct-supabase", {
+      storagePath: value.storagePath,
+      bucket,
+      directUrl
     });
-    return resolved;
+    return directUrl;
   }
   if (typeof value.src === "string" && value.src.length > 0) {
     debugMediaNodeLog("resolve:explicit-src", { src: value.src });
@@ -512,9 +417,6 @@ function resolveImageUrl(value, options = {}) {
   debugMediaNodeLog("resolve:fallback-url", { fallbackUrl: value.url ?? null });
   return value.url ?? void 0;
 }
-function clamp(v2, min2 = 0, max2 = 1) {
-  return Math.min(Math.max(v2, min2), max2);
-}
 
 // ../blocks/src/system/runtime/nodes/form.server.tsx
 import { jsx as jsx10, jsxs } from "react/jsx-runtime";
@@ -1157,6 +1059,42 @@ var EventListingSSR = ({
 
 // ../blocks/src/system/runtime/hooks/useEventPagination.ts
 import { useState, useCallback, useRef } from "react";
+
+// ../blocks/src/system/runtime/utils/api-url.ts
+function resolveMultiEnvDashboardUrl() {
+  const env = process.env.RIVERBANK_ENV;
+  if (!env) return null;
+  const envKey = `RIVERBANK_${env.toUpperCase()}_DASHBOARD_URL`;
+  const dashboardUrl = process.env[envKey];
+  if (dashboardUrl) {
+    return dashboardUrl.replace(/\/$/, "");
+  }
+  return null;
+}
+function getCmsApiUrl() {
+  const multiEnvDashboard = resolveMultiEnvDashboardUrl();
+  if (multiEnvDashboard) {
+    return `${multiEnvDashboard}/api`;
+  }
+  const builderApiUrl = process.env.NEXT_PUBLIC_BUILDER_API_URL;
+  if (builderApiUrl) {
+    return builderApiUrl.replace(/\/$/, "");
+  }
+  const dashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL;
+  if (dashboardUrl) {
+    const base = dashboardUrl.replace(/\/$/, "");
+    return `${base}/api`;
+  }
+  const legacyApiUrl = process.env.NEXT_PUBLIC_CMS_API_URL;
+  if (legacyApiUrl) {
+    return legacyApiUrl.replace(/\/$/, "");
+  }
+  throw new Error(
+    "Dashboard URL not configured. Either:\n  1. Set RIVERBANK_ENV with RIVERBANK_LOCAL_DASHBOARD_URL / RIVERBANK_REMOTE_DASHBOARD_URL\n  2. Set NEXT_PUBLIC_BUILDER_API_URL (SDK sites)\n  3. Set NEXT_PUBLIC_DASHBOARD_URL (frontend app)"
+  );
+}
+
+// ../blocks/src/system/runtime/hooks/useEventPagination.ts
 function useEventPagination({
   siteId,
   initialEvents = [],
@@ -9762,7 +9700,7 @@ var oppositeAlignmentMap = {
   start: "end",
   end: "start"
 };
-function clamp2(start, value, end) {
+function clamp(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -10115,7 +10053,7 @@ var arrow = (options) => ({
     const min$1 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset4 = clamp2(min$1, center, max2);
+    const offset4 = clamp(min$1, center, max2);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset4 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
@@ -10412,14 +10350,14 @@ var shift = function(options) {
         const maxSide = mainAxis === "y" ? "bottom" : "right";
         const min2 = mainAxisCoord + overflow[minSide];
         const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp2(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
         const min2 = crossAxisCoord + overflow[minSide];
         const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp2(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state,