@fraczled/sdk 1.30.3 → 1.30.8

package/README.md

@@ -73,6 +73,7 @@ interface EditorConfig {
     hideDefaultPanels?: boolean;
     hiddenPanels?: PanelId[];
     topbarMode?: 'default' | 'custom';
+    newDesignModal?: NewDesignModalConfig;
   };
   customPanels?: CustomSidebarPanel[];
 }
@@ -244,6 +245,66 @@ createFraczledEditor({
 
 Note: `ui.topbarMode = "custom"` is gated by the `topbarActions` plan feature.
 
+### Custom new design modal (SDK only)
+
+You can replace the Create New Design modal with your own UI:
+
+```ts
+createFraczledEditor({
+  apiKey: "YOUR_LICENSE_KEY",
+  projectId: "YOUR_PROJECT_ID",
+  container: document.getElementById("editor"),
+  ui: {
+    newDesignModal: {
+      render: ({ applySizePreset, onClose }) => (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
+          <div className="bg-white rounded-xl p-6 space-y-3">
+            <button
+              onClick={() => {
+                applySizePreset({ name: "Product Card", width: 1200, height: 1200, unit: "px", dpi: 72 });
+                onClose();
+              }}
+            >
+              New Product Card
+            </button>
+          </div>
+        </div>
+      )
+    }
+  }
+});
+```
+
+Note: `ui.newDesignModal.render` is gated by the `newDesignModal` plan feature.
+
+### Custom template sizes (SDK only)
+
+You can override the Social Media / Print size presets shown in the Create New Design modal:
+
+```ts
+createFraczledEditor({
+  apiKey: "YOUR_LICENSE_KEY",
+  projectId: "YOUR_PROJECT_ID",
+  container: document.getElementById("editor"),
+  ui: {
+    newDesignModal: {
+      sizePresets: {
+        social: [
+          { name: "Square Ad", width: 1200, height: 1200, unit: "px", dpi: 72 }
+        ],
+        print: [
+          { name: "Box Sleeve", width: 8, height: 5, unit: "in", dpi: 300, bleed: 0.125 }
+        ]
+      }
+    }
+  }
+});
+```
+
+Notes:
+- `unit` can be `px`, `in`, `mm`, or `pt`. `bleed` and `safeArea` (optional) use the same unit.
+- Size presets are gated by the `templateSizes` plan feature.
+
 ### Hide built-in tabs (SDK only)
 
 You can hide vanilla sidebar tabs in SDK embeds:

package/dist/fraczled-sdk.es.js

@@ -1,6 +1,6 @@
 import "react";
 import "react-dom/client";
-import { S as o, b as p, a as c, d } from "./index-B5pLe-q9.js";
+import { S as o, b as p, a as c, d } from "./index-DDpUxkLl.js";
 export {
   o as Store,
   p as createFraczledEditor,