@fraczled/sdk 1.0.2 → 1.0.4

package/README.md

@@ -16,10 +16,7 @@ import { createFraczledEditor } from "@fraczled/sdk";
 const editor = createFraczledEditor({
   apiKey: "YOUR_LICENSE_KEY",
   projectId: "YOUR_PROJECT_ID",
-  container: document.getElementById("editor"),
-  services: {
-    licenseEndpoint: "https://api.fraczled.com/api/license/validate",
-  },
+  container: document.getElementById("editor")
 });
 
 // Listen for changes
@@ -55,7 +52,6 @@ interface EditorConfig {
     settings: DocumentSettings;
   };
   services?: {
-    licenseEndpoint?: string;
     aiEndpoint?: string;
     unsplashProxyBaseUrl?: string;
   };
@@ -67,6 +63,7 @@ interface EditorConfig {
     injectBaseStyles?: boolean;
     showLoader?: boolean;
   };
+  customPanels?: CustomSidebarPanel[];
 }
 ```
 
@@ -76,6 +73,8 @@ By default, the SDK injects the Tailwind CDN and Google Fonts for convenience. F
 set `assets.injectTailwind = false` and provide your own CSS bundle (and optionally your own fonts)
 to avoid relying on external CDNs.
 
+License validation is always handled by https://fraczled.com and requires outbound HTTPS access.
+
 ## License Keys
 
 ### Development Keys (dev\_\*)
@@ -132,6 +131,59 @@ Creates a new editor instance.
 - `select` - Fired when selection changes
 - `export` - Fired when user exports
 
+## Custom Sidebar Panels
+
+You can add your own sidebar tools and panels inside the editor UI. Custom panels render inside the same side panel shell used by built-in tools, and receive access to the `store` and current `state`.
+
+```tsx
+import { createFraczledEditor } from "@fraczled/sdk";
+import { BadgeCheck } from "lucide-react";
+
+const editor = createFraczledEditor({
+  apiKey: "YOUR_LICENSE_KEY",
+  projectId: "YOUR_PROJECT_ID",
+  container: document.getElementById("editor"),
+  customPanels: [
+    {
+      id: "my-product:approvals",
+      label: "Approvals",
+      icon: BadgeCheck,
+      feature: "approvals", // optional entitlement key
+      render: ({ store, state, closePanel, setActivePanel }) => (
+        <div className="space-y-4">
+          <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-600">
+            Selected elements: {state.selection.length}
+          </div>
+          <button
+            className="w-full rounded-lg bg-slate-900 px-3 py-2 text-sm font-semibold text-white"
+            onClick={() =>
+              store.addElement({
+                type: "text",
+                name: "Approved Copy",
+                content: "Approved Copy"
+              })
+            }
+          >
+            Insert Approved Copy
+          </button>
+          <button
+            className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium"
+            onClick={closePanel}
+          >
+            Close
+          </button>
+        </div>
+      )
+    }
+  ]
+});
+```
+
+Notes:
+- `id` must be unique and should not match built-in tool labels (for example, `Design` or `Elements`).
+- `feature` maps to `entitlements.features[feature]` and controls visibility/access based on licensing.
+- `render` is called when the panel is active, so you can wire buttons directly to `store` methods or read from `state`.
+
 ## Support
 
 - Documentation: [fraczled.com/docs](https://fraczled.com/docs)

package/dist/fraczled-sdk.es.js

@@ -1,10 +1,9 @@
 import "react";
 import "react-dom/client";
-import { S as o, b as p, a as c, d } from "./index-B0_rImap.js";
+import { S as o, b as p, a as c, d } from "./index-D13RaDcT.js";
 export {
   o as Store,
   p as createFraczledEditor,
   c as createOurEditorApp,
   d as createStore
 };
-//# sourceMappingURL=fraczled-sdk.es.js.map