@pixldocs/canvas-renderer 0.5.165 → 0.5.168

package/README.md

@@ -8,7 +8,85 @@ Client-side template renderer for Pixldocs — render templates in any web app w
 npm install @pixldocs/canvas-renderer fabric react react-dom
 ```
 
-> **Private package**: Add `//registry.npmjs.org/:_authToken=${NPM_TOKEN}` to your `.npmrc` and configure `NPM_TOKEN` as a build secret.
+> Public package — no auth token or `.npmrc` needed.
+
+---
+
+## Quick Start: Build an App From a Workspace
+
+Got a Pixldocs workspace full of published templates (e.g. social-media posts,
+invitations, certificates)? You can spin up a standalone app that lists and
+renders them with just the **workspace ID** + Pixldocs anon key — no per-template
+wiring needed.
+
+```tsx
+import {
+  listPublishedTemplates,
+  PixldocsRenderer,
+} from '@pixldocs/canvas-renderer';
+
+const SUPABASE_URL = 'https://ttvtjhxjxuxdeybcnjkd.supabase.co';
+const SUPABASE_ANON_KEY = 'eyJ...'; // Pixldocs publishable key (safe in browser)
+const WORKSPACE_ID = 'your-workspace-uuid';
+
+// 1. List all published templates owned by a workspace
+const templates = await listPublishedTemplates({
+  workspaceId: WORKSPACE_ID,
+  supabaseUrl: SUPABASE_URL,
+  supabaseAnonKey: SUPABASE_ANON_KEY,
+  // category: 'social-media',  // optional filter
+});
+
+// templates: [{ id, name, thumbnail_url, category, price, ... }, ...]
+
+// 2. Render a chosen template (form-bound or static)
+const renderer = new PixldocsRenderer({
+  supabaseUrl: SUPABASE_URL,
+  supabaseAnonKey: SUPABASE_ANON_KEY,
+});
+
+const pages = await renderer.renderFromForm({
+  templateId: templates[0].id,
+  sectionState: { /* user inputs (optional for static templates) */ },
+});
+```
+
+### Two ways to source templates
+
+| Approach | Best for | API |
+|----------|----------|-----|
+| **By workspace** | Multi-template apps (template gallery, social-media post maker, certificate maker) — pick from a curated workspace | `listPublishedTemplates({ workspaceId })` |
+| **By form schema** | Single-purpose apps where one form drives many template variants (e.g. BioMaker — one form, many biodata designs) | Resolve directly via `renderFromForm({ templateId, formSchemaId, sectionState })` |
+
+Both work with the same anon key and the same renderer — choose whichever
+matches your product shape.
+
+---
+
+## Templates Catalog API
+
+### `listPublishedTemplates(options)`
+
+Returns every published template belonging to a workspace. Uses public RLS
+(no auth needed beyond the anon key).
+
+```ts
+const templates = await listPublishedTemplates({
+  workspaceId: 'uuid',
+  supabaseUrl: '...',
+  supabaseAnonKey: '...',
+  category: 'social-media',  // optional
+  limit: 200,                 // optional (default 200)
+  offset: 0,                  // optional pagination
+});
+```
+
+Each item: `{ id, name, description, category, thumbnail_url, preview_images, price, download_count, workspace_id, sort_order, created_at, updated_at }`.
+
+### `getPublishedTemplate({ templateId, supabaseUrl, supabaseAnonKey })`
+
+Fetch a single published template's catalog row (without the heavy `config`
+JSON — use the renderer for that).
 
 ---
 

package/dist/{index-B8sm4VZ8.cjs → index-DgX2Y94P.cjs}

@@ -348,11 +348,12 @@ function getCacheKey(element) {
     scaleY: element.scaleY,
     splitByGrapheme: element.splitByGrapheme,
     overflowPolicy: element.overflowPolicy,
-    height: element.overflowPolicy === "auto-shrink" ? element.height : void 0
+    height: element.overflowPolicy === "auto-shrink" ? element.height : void 0,
+    minBoxHeight: element.minBoxHeight,
+    verticalAlign: element.verticalAlign
   });
 }
 function measureTextHeight(element) {
-  var _a;
   if (element.type !== "text") {
     return element.height || 20;
   }
@@ -368,8 +369,8 @@ function measureTextHeight(element) {
     let fontSize = element.fontSize || 16;
     const overflowPolicy = element.overflowPolicy || "grow-and-push";
     if (overflowPolicy === "auto-shrink") {
-      const baseHeight = element.height;
-      const explicitLineCount = Math.max(1, textToMeasure.split("\n").length);
+      const minBoxH = Math.max(0, Number(element.minBoxHeight) || 0);
+      const baseHeight = typeof element.height === "number" ? Math.max(element.height, minBoxH) : minBoxH > 0 ? minBoxH : element.height;
       while (fontSize > 1) {
         const testTb = new fabric__namespace.Textbox(textToMeasure, {
           width: measureWidth,
@@ -383,11 +384,9 @@ function measureTextHeight(element) {
         });
         testTb.initDimensions();
         const textHeight = testTb.height || 0;
-        const renderedLineCount = ((_a = testTb.textLines) == null ? void 0 : _a.length) || 1;
-        const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
         const fitsHeight = !baseHeight || textHeight <= baseHeight;
         const { fitsWidth } = getTextboxWidthFitMetrics(testTb, measureWidth);
-        if (hasNoImplicitWrap && fitsHeight && fitsWidth) break;
+        if (fitsHeight && fitsWidth) break;
         fontSize--;
       }
       const finalTb = new fabric__namespace.Textbox(textToMeasure, {
@@ -402,7 +401,7 @@ function measureTextHeight(element) {
       });
       finalTb.initDimensions();
       const measuredH = (finalTb.height || element.height || 20) * (element.scaleY || 1);
-      const cappedH = typeof baseHeight === "number" ? Math.min(baseHeight * (element.scaleY || 1), measuredH) : measuredH;
+      const cappedH = typeof baseHeight === "number" ? Math.max(baseHeight * (element.scaleY || 1), measuredH) : measuredH;
       heightCache.set(cacheKey, { height: cappedH, timestamp: Date.now() });
       return cappedH;
     }
@@ -5550,6 +5549,54 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     return true;
   });
 }
+const TextboxProto = fabric__namespace.Textbox.prototype;
+if (!TextboxProto.__pixldocsOrigCalcTextHeight) {
+  TextboxProto.__pixldocsOrigCalcTextHeight = TextboxProto.calcTextHeight;
+  TextboxProto.calcTextHeight = function() {
+    const orig = TextboxProto.__pixldocsOrigCalcTextHeight.call(this);
+    this._contentHeight = orig;
+    const min = this.minBoxHeight || 0;
+    return min > orig ? min : orig;
+  };
+}
+if (!TextboxProto.__pixldocsOrigGetTopOffset) {
+  TextboxProto.__pixldocsOrigGetTopOffset = TextboxProto._getTopOffset;
+  TextboxProto._getTopOffset = function() {
+    const baseOffset = TextboxProto.__pixldocsOrigGetTopOffset.call(this);
+    const valign = this.verticalAlign || "top";
+    if (valign === "top") return baseOffset;
+    const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto.__pixldocsOrigCalcTextHeight.call(this);
+    const padding = (this.height || 0) - content;
+    if (padding <= 0) return baseOffset;
+    if (valign === "middle") return baseOffset + padding / 2;
+    if (valign === "bottom") return baseOffset + padding;
+    return baseOffset;
+  };
+}
+if (TextboxProto._getSVGLeftTopOffsets && !TextboxProto.__pixldocsOrigGetSVGLeftTopOffsets) {
+  TextboxProto.__pixldocsOrigGetSVGLeftTopOffsets = TextboxProto._getSVGLeftTopOffsets;
+  TextboxProto._getSVGLeftTopOffsets = function() {
+    const base = TextboxProto.__pixldocsOrigGetSVGLeftTopOffsets.call(this);
+    const valign = this.verticalAlign || "top";
+    if (valign === "top") return base;
+    const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto.__pixldocsOrigCalcTextHeight.call(this);
+    const padding = (this.height || 0) - content;
+    if (padding <= 0) return base;
+    const extra = valign === "middle" ? padding / 2 : padding;
+    return { ...base, textTop: base.textTop + extra };
+  };
+}
+const stateProps = fabric__namespace.Textbox.prototype.stateProperties;
+if (Array.isArray(stateProps)) {
+  if (!stateProps.includes("minBoxHeight")) stateProps.push("minBoxHeight");
+  if (!stateProps.includes("verticalAlign")) stateProps.push("verticalAlign");
+}
+const cacheProps = fabric__namespace.Textbox.prototype.cacheProperties;
+if (Array.isArray(cacheProps)) {
+  if (!cacheProps.includes("minBoxHeight")) cacheProps.push("minBoxHeight");
+  if (!cacheProps.includes("verticalAlign")) cacheProps.push("verticalAlign");
+}
+TextboxProto.__pixldocsTextboxExtended = true;
 const PD_BG_KEY = "__pdBg";
 const PATCHED_KEY = "__pdBgPatched";
 function extractTextBgConfig(element) {
@@ -6369,7 +6416,7 @@ function createText(element) {
           iterationSamples.push(lastIter);
         }
       }
-      if (hasNoImplicitWrap && fitsHeight && fitsWidth) {
+      if (fitsHeight && fitsWidth) {
         breakReason = "fits";
         break;
       }
@@ -6462,7 +6509,15 @@ function createText(element) {
     // formatting tokens (**, __, [c=...], etc). Disable inline edit and steer
     // users to the right-panel text field which exposes the raw markdown.
     editable: !formattingEnabled,
-    ...formattingEnabled ? { styles: parsedStyles } : element.styles ? { styles: element.styles } : {}
+    ...formattingEnabled ? { styles: parsedStyles } : element.styles ? { styles: element.styles } : {},
+    // Vertical sizing extensions (see fabricTextboxExtensions.ts). Apply for
+    // every overflow policy — in auto-shrink mode `minBoxHeight` acts as a
+    // visual floor so the box renders at the user's chosen height even after
+    // the font shrinks to fit. PageCanvas's auto-shrink loop already uses the
+    // same value as a fit-target, so the rendered box and the shrink target
+    // stay in sync (parity with the Use page / EC2 renderer).
+    ...(element.minBoxHeight ?? 0) > 0 ? { minBoxHeight: element.minBoxHeight } : {},
+    verticalAlign: element.verticalAlign || "top"
   });
   textbox.__formattingEnabled = formattingEnabled;
   textbox.initDimensions();
@@ -8057,6 +8112,22 @@ const PageCanvas = react.forwardRef(
             obj.dirty = true;
           }
         }
+        if (obj instanceof fabric__namespace.Textbox) {
+          const sy = obj.scaleY ?? 1;
+          if (Math.abs(sy - 1) > 1e-3) {
+            const center = obj.getCenterPoint();
+            const newMinH = Math.max(0, (obj.height ?? 0) * Math.abs(sy));
+            obj.minBoxHeight = newMinH;
+            obj.scaleY = 1;
+            try {
+              obj.initDimensions();
+            } catch {
+            }
+            obj.setPositionByOrigin(center, "center", "center");
+            obj.setCoords();
+            obj.dirty = true;
+          }
+        }
         if (obj.__lockScaleDuringCrop || obj.__cropDrag) {
           obj.set({ scaleX: 1, scaleY: 1 });
           obj.setCoords();
@@ -8633,6 +8704,12 @@ const PageCanvas = react.forwardRef(
               scaleY: finalScaleY,
               transformMatrix: finalAbsoluteMatrix
             };
+            if (obj instanceof fabric__namespace.Textbox) {
+              const baked = obj.minBoxHeight;
+              if (typeof baked === "number" && baked > 0) {
+                elementUpdate.minBoxHeight = baked;
+              }
+            }
             if (sourceElement && sourceElement.opacity !== void 0) {
               elementUpdate.opacity = sourceElement.opacity;
             }
@@ -9344,7 +9421,9 @@ const PageCanvas = react.forwardRef(
                 const resolvedSizeForCompare = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 0, height: typeof element.height === "number" ? element.height : 0 };
                 const fabricText = existingObj.text ?? "";
                 const storeText = element.text ?? "";
-                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // Detect text background + shadow changes so panel edits flow into Fabric.
+                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // Vertical alignment & min box height: panel-driven changes must trigger a re-apply
+                // so _getTopOffset (verticalAlign) and calcTextHeight (minBoxHeight) repaint correctly.
+                (existingObj.verticalAlign ?? "top") !== (element.verticalAlign ?? "top") || Math.abs((existingObj.minBoxHeight ?? 0) - (element.minBoxHeight ?? 0)) > 0.1 || // Detect text background + shadow changes so panel edits flow into Fabric.
                 JSON.stringify({
                   c: element.textBgColor ?? null,
                   p: element.textBgPadding ?? 0,
@@ -9799,7 +9878,7 @@ const PageCanvas = react.forwardRef(
       });
     }, [selectedIds, isActive, ready, elements]);
     const updateFabricObject = (obj, element, skipPositionUpdate = false) => {
-      var _a, _b, _c;
+      var _a, _b;
       const fc = fabricRef.current;
       if (fc && isTransforming(fc)) {
         return;
@@ -10168,7 +10247,8 @@ const PageCanvas = react.forwardRef(
         const fixedWidth = Math.max(storedWidth, 1);
         const splitByGrapheme = overflowPolicy === "auto-shrink" ? false : element.splitByGrapheme ?? element.wordWrap === "break-word";
         if (overflowPolicy === "auto-shrink") {
-          const explicitLineCount = Math.max(1, text.split("\n").length);
+          const minBoxHForShrink = Math.max(0, Number(element.minBoxHeight) || 0);
+          const heightBound = Math.max(rH || 0, minBoxHForShrink);
           while (fontSize > 1) {
             const testTextbox = new fabric__namespace.Textbox(text, {
               width: fixedWidth,
@@ -10178,15 +10258,13 @@ const PageCanvas = react.forwardRef(
               fontStyle: element.fontStyle || "normal",
               lineHeight: element.lineHeight || 1.2,
               charSpacing: element.charSpacing || 0,
-              splitByGrapheme: false
+              splitByGrapheme: element.splitByGrapheme ?? false
             });
             testTextbox.initDimensions();
             const textHeight = testTextbox.height || 0;
-            const renderedLineCount = ((_b = testTextbox.textLines) == null ? void 0 : _b.length) || 1;
-            const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
-            const fitsHeight = rH <= 0 || textHeight <= rH;
+            const fitsHeight = heightBound <= 0 || textHeight <= heightBound;
             const { fitsWidth } = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
-            if (hasNoImplicitWrap && fitsHeight && fitsWidth) {
+            if (fitsHeight && fitsWidth) {
               break;
             }
             fontSize--;
@@ -10257,6 +10335,10 @@ const PageCanvas = react.forwardRef(
           splitByGrapheme,
           text
         });
+        const valign = element.verticalAlign || "top";
+        const minBoxH = Math.max(0, Number(element.minBoxHeight) || 0);
+        obj.verticalAlign = valign;
+        obj.minBoxHeight = minBoxH;
         if (element.formattingEnabled === true) {
           obj.styles = parsedStyles || {};
         } else {
@@ -10279,7 +10361,7 @@ const PageCanvas = react.forwardRef(
           } catch {
           }
           obj.dirty = true;
-          (_c = obj.setCoords) == null ? void 0 : _c.call(obj);
+          (_b = obj.setCoords) == null ? void 0 : _b.call(obj);
           obj.__lastTextBgShadowJson = JSON.stringify({
             c: element.textBgColor ?? null,
             p: element.textBgPadding ?? 0,
@@ -16036,9 +16118,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.165";
+const resolvedPackageVersion = "0.5.168";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.165";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.168";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16164,6 +16246,68 @@ function installUnderlineFix(fab) {
   __underlineFixInstalled = true;
   console.log(`[canvas-renderer] underline-fix monkey patch installed (v${PACKAGE_VERSION})`);
 }
+let __textboxBoxExtensionsInstalled = false;
+function installTextboxBoxExtensions(fab) {
+  var _a;
+  if (__textboxBoxExtensionsInstalled) return;
+  const TextboxProto2 = (_a = fab.Textbox) == null ? void 0 : _a.prototype;
+  if (!TextboxProto2) return;
+  if (TextboxProto2.__pixldocsTextboxExtended) {
+    __textboxBoxExtensionsInstalled = true;
+    return;
+  }
+  if (typeof TextboxProto2.calcTextHeight === "function") {
+    const origCalc = TextboxProto2.calcTextHeight;
+    TextboxProto2.__pixldocsOrigCalcTextHeight = origCalc;
+    TextboxProto2.calcTextHeight = function() {
+      const orig = origCalc.call(this);
+      this._contentHeight = orig;
+      const min = this.minBoxHeight || 0;
+      return min > orig ? min : orig;
+    };
+  }
+  if (typeof TextboxProto2._getTopOffset === "function") {
+    const origTop = TextboxProto2._getTopOffset;
+    TextboxProto2.__pixldocsOrigGetTopOffset = origTop;
+    TextboxProto2._getTopOffset = function() {
+      const baseOffset = origTop.call(this);
+      const valign = this.verticalAlign || "top";
+      if (valign === "top") return baseOffset;
+      const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto2.__pixldocsOrigCalcTextHeight ? TextboxProto2.__pixldocsOrigCalcTextHeight.call(this) : 0;
+      const padding = (this.height || 0) - content;
+      if (padding <= 0) return baseOffset;
+      if (valign === "middle") return baseOffset + padding / 2;
+      if (valign === "bottom") return baseOffset + padding;
+      return baseOffset;
+    };
+  }
+  if (typeof TextboxProto2._getSVGLeftTopOffsets === "function") {
+    const origSvgOffsets = TextboxProto2._getSVGLeftTopOffsets;
+    TextboxProto2.__pixldocsOrigGetSVGLeftTopOffsets = origSvgOffsets;
+    TextboxProto2._getSVGLeftTopOffsets = function() {
+      const base = origSvgOffsets.call(this);
+      const valign = this.verticalAlign || "top";
+      if (valign === "top") return base;
+      const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto2.__pixldocsOrigCalcTextHeight ? TextboxProto2.__pixldocsOrigCalcTextHeight.call(this) : 0;
+      const padding = (this.height || 0) - content;
+      if (padding <= 0) return base;
+      const extra = valign === "middle" ? padding / 2 : padding;
+      return { ...base, textTop: base.textTop + extra };
+    };
+  }
+  const stateProps2 = TextboxProto2.stateProperties;
+  if (Array.isArray(stateProps2)) {
+    if (!stateProps2.includes("minBoxHeight")) stateProps2.push("minBoxHeight");
+    if (!stateProps2.includes("verticalAlign")) stateProps2.push("verticalAlign");
+  }
+  const cacheProps2 = TextboxProto2.cacheProperties;
+  if (Array.isArray(cacheProps2)) {
+    if (!cacheProps2.includes("minBoxHeight")) cacheProps2.push("minBoxHeight");
+    if (!cacheProps2.includes("verticalAlign")) cacheProps2.push("verticalAlign");
+  }
+  TextboxProto2.__pixldocsTextboxExtended = true;
+  __textboxBoxExtensionsInstalled = true;
+}
 function configHasAutoShrinkText(config) {
   var _a;
   if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
@@ -16186,6 +16330,7 @@ class PixldocsRenderer {
     this.config = config;
     this.installRuntimeGlobals();
     installUnderlineFix(fabric__namespace);
+    installTextboxBoxExtensions(fabric__namespace);
     try {
       console.log(`[canvas-renderer] PixldocsRenderer v${PACKAGE_VERSION} initialized`);
     } catch {
@@ -16473,7 +16618,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-aWseupbk.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-Bw2WQNoU.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -18575,7 +18720,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-aWseupbk.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-Bw2WQNoU.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -18781,6 +18926,56 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
     pages: svgResults.map((p) => ({ width: p.width, height: p.height }))
   };
 }
+const SELECT_COLUMNS = "id,name,description,category,thumbnail_url,preview_images,price,download_count,workspace_id,sort_order,created_at,updated_at";
+async function listPublishedTemplates(options) {
+  const { workspaceId, supabaseUrl, supabaseAnonKey, category, limit = 200, offset = 0 } = options;
+  if (!workspaceId) throw new Error("listPublishedTemplates: workspaceId is required");
+  if (!supabaseUrl || !supabaseAnonKey) {
+    throw new Error("listPublishedTemplates: supabaseUrl and supabaseAnonKey are required");
+  }
+  const params = new URLSearchParams({
+    select: SELECT_COLUMNS,
+    workspace_id: `eq.${workspaceId}`,
+    status: "eq.published",
+    order: "sort_order.asc,updated_at.desc",
+    limit: String(limit),
+    offset: String(offset)
+  });
+  if (category) params.set("category", `eq.${category}`);
+  const url = `${supabaseUrl.replace(/\/$/, "")}/rest/v1/templates?${params.toString()}`;
+  const res = await fetch(url, {
+    headers: {
+      apikey: supabaseAnonKey,
+      Authorization: `Bearer ${supabaseAnonKey}`,
+      Accept: "application/json"
+    }
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`listPublishedTemplates failed: ${res.status} ${text}`);
+  }
+  return await res.json();
+}
+async function getPublishedTemplate(options) {
+  const { templateId, supabaseUrl, supabaseAnonKey } = options;
+  const params = new URLSearchParams({
+    select: SELECT_COLUMNS,
+    id: `eq.${templateId}`,
+    status: "eq.published",
+    limit: "1"
+  });
+  const url = `${supabaseUrl.replace(/\/$/, "")}/rest/v1/templates?${params.toString()}`;
+  const res = await fetch(url, {
+    headers: {
+      apikey: supabaseAnonKey,
+      Authorization: `Bearer ${supabaseAnonKey}`,
+      Accept: "application/json"
+    }
+  });
+  if (!res.ok) return null;
+  const rows = await res.json();
+  return rows[0] ?? null;
+}
 function collectImageUrls(config) {
   const urls = [];
   const walk = (nodes) => {
@@ -18901,6 +19096,7 @@ exports.getCanvasForPage = getCanvasForPage;
 exports.getEmbeddedJsPDFFontName = getEmbeddedJsPDFFontName;
 exports.getImageProxyFetchOptions = getImageProxyFetchOptions;
 exports.getProxiedImageUrl = getProxiedImageUrl;
+exports.getPublishedTemplate = getPublishedTemplate;
 exports.getRoundedRectRadii = getRoundedRectRadii;
 exports.getTrianglePoints = getTrianglePoints;
 exports.hasEdgeFade = hasEdgeFade;
@@ -18909,6 +19105,7 @@ exports.isElement = isElement;
 exports.isFontAvailable = isFontAvailable;
 exports.isGroup = isGroup;
 exports.isPrivateUrl = isPrivateUrl;
+exports.listPublishedTemplates = listPublishedTemplates;
 exports.loadGoogleFontCSS = loadGoogleFontCSS;
 exports.normalizeFontFamily = normalizeFontFamily;
 exports.normalizeShapeType = normalizeShapeType;
@@ -18922,4 +19119,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-B8sm4VZ8.cjs.map
+//# sourceMappingURL=index-DgX2Y94P.cjs.map