@fraczled/sdk 1.0.3 → 1.0.4

package/README.md

@@ -63,6 +63,7 @@ interface EditorConfig {
     injectBaseStyles?: boolean;
     showLoader?: boolean;
   };
+  customPanels?: CustomSidebarPanel[];
 }
 ```
 
@@ -130,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,6 +1,6 @@
 import "react";
 import "react-dom/client";
-import { S as o, b as p, a as c, d } from "./index-B7nKcvyh.js";
+import { S as o, b as p, a as c, d } from "./index-D13RaDcT.js";
 export {
   o as Store,
   p as createFraczledEditor,