@chaibuilder/sdk 4.0.0-beta.4 → 4.0.0-beta.7

package/README.md

@@ -1,77 +1,102 @@
-# Chai Builder - Open Source Tailwind Builder
+# Chai Builder - Open Source React Website Builder
 
-Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder.
-It allows you to create web pages visually by dragging and dropping elements onto the canvas.
-It is a simple React component that renders a full-fledged visual builder into any React application.
+[![npm version](https://img.shields.io/npm/v/@chaibuilder/sdk.svg)](https://www.npmjs.com/package/@chaibuilder/sdk)
+[![License](https://img.shields.io/npm/l/@chaibuilder/sdk.svg)](https://github.com/chaibuilder/chaibuilder-sdk/blob/main/LICENSE)
 
-Docs: https://docs.chaibuilder.com/
+Chai Builder is a **full open-source React website builder** that empowers developers to create stunning web pages visually using drag-and-drop functionality. Built with React and Tailwind CSS, it seamlessly integrates into your existing projects.
 
-Demo: https://chaibuilder-sdk.vercel.app/
+✨ **Latest Version:** `4.0.0-beta.8`
+
+🚀 **Out-of-the-box support for:**
+
+- **Next.js 16**
+- **Tailwind CSS v3+**
+
+📚 **[Documentation](https://docs.chaibuilder.com/)** | 🎨 **[Live Demo](https://chaibuilder-sdk.vercel.app/)**
 
 ![CHAI BUILDER](https://fldwljgzcktqnysdkxnn.supabase.co/storage/v1/object/public/dam-assets/assets/chai-builder.jpg)
 
+## ✨ Features
+
+- 🎨 **Visual Drag & Drop Builder** - Create pages visually without writing code
+- ⚛️ **React-First** - Built as a React component for seamless integration
+- 🎯 **Tailwind CSS Powered** - Leverage the full power of Tailwind CSS v3+
+- 🚀 **Next.js 16 Ready** - Full support for the latest Next.js features
+- 🔧 **Two Flexible Modes** - Use as a core builder component or as a complete Next.js website builder
+- 📦 **Extensible** - Add custom blocks and components
+- 💾 **Data Control** - Full control over how and where you save your data
+- 🎭 **Framework Agnostic Rendering** - Render blocks in any React application
+
 ---
 
-### Manual installation:
+## 📦 Packages
 
-Step 1: Install the packages
+Chai Builder is available in two packages:
 
-```bash
-npm install @chaibuilder/sdk
-```
+---
 
-Step 2: Add a custom tailwind config.
-Create a new file: `tailwind.chaibuilder.config.ts`. <br /> Pass the path to your source files.
+### `@chaibuilder/sdk` - Core Builder
 
-```tsx
-import { getChaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";
-export default getChaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);
-```
+**For any React application**
 
-Step 3: Create a new `chaibuilder.tailwind.css`
+The core builder package that can be integrated as a standard React component into any React application. Perfect for building custom page builders and visual editors.
 
-```css
-@config "./tailwind.chaibuilder.config.ts";
+**Core Features:**
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+- 🎨 **Drag & Drop React Builder** - Visual builder component for React
+- 🔧 **Extensible API** - Add custom layouts with ease
+- 🪝 **Inner Hooks** - Exposed hooks to create custom layouts
+- 📦 **Custom Blocks** - Register custom blocks and block settings
+- 🎛️ **Custom Panels** - Add your own custom panels
+- 🔗 **Data Binding** - Built-in data-binding support
+- 🌍 **i18n Support** - Internationalization ready
+- 🤖 **AI Panel** - AI integration (no backend required)
+- 🧩 **Partial Blocks** - Reusable header, footer components
+- 🎨 **Theme System** - Customizable theming
+- 🎯 **Design Tokens** - Design system integration
+- 📄 **Import HTML** - Import existing HTML content
 
-Step 4: Add the builder to your page.
+📚 **[View Documentation](https://docs.chaibuilder.com/)**
 
-```tsx
-import "./chaibuilder.tailwind.css";
-import "@chaibuilder/sdk/styles";
-import { loadWebBlocks } from "@chaibuilder/sdk/web-blocks";
-import { ChaiBuilderEditor } from "@/core/main";
+---
 
-loadWebBlocks();
+### `@chaibuilder/next` - Next.js Website Builder
 
-const BuilderFullPage = () => {
-  return (
-    <ChaiBuilderEditor
-      blocks={[{ _type: "Heading", _id: "a", content: "This is a heading", styles: "#styles:,text-3xl font-bold" }]}
-      onSave={async ({ blocks, providers, brandingOptions }) => {
-        console.log(blocks, providers, brandingOptions);
-        return true;
-      }}
-    />
-  );
-};
-```
+**For public content-heavy sites**
+
+A more powerful Next.js-specific implementation designed for blogs, marketing sites, documentation, and any public-facing content. Built with **SSG (Static Site Generation) + ISR (Incremental Static Regeneration)** for optimal performance.
+
+**All Core Features Plus:**
+
+- 📄 **Page Types** - Define custom page types with specific layouts
+- 📚 **Collections** - Manage content collections (blogs, products, portfolios)
+- 🖼️ **Media Manager** - Built-in media manager with image editor
+- 🤖 **AI Assistant** - Create and edit UI components and content with AI
+- 🔍 **SEO & JSON-LD** - Advanced SEO features with structured data
+- 🌐 **Multilingual** - Full multilingual support
+- 👁️ **Preview Mode** - Live preview before publishing
+- 📝 **Revisions & Compare** - Version control with comparison tools
+- 📚 **Library Blocks** - Shared block library across projects
+- 👥 **Multi-User Support** - Collaborative editing with multiple users
+- 🔒 **Page Lock** - Prevent conflicts with page locking
+- � **CMS Integration** - Connect to any headless CMS
+- �🔐 **BYO Stack** - Bring Your Own Auth, Database (Postgres), and Storage
+
+🚀 **Get Started:** [Next.js + Supabase Starter](https://github.com/chaibuilder/chaibuilder-next-supabase-starter) (Work in Progress)
+
+---
 
-### Render the blocks on your page.
+## 🎯 Use Cases
 
-```tsx
-export default () => {
-  return <RenderChaiBlocks blocks={blocks} />;
-};
-```
+- **Landing Pages** - Build beautiful landing pages with ease
+- **Marketing Websites** - Create and update marketing content visually
+- **Content Management** - Empower non-technical users to create pages
+- **Rapid Prototyping** - Quickly prototype and iterate on designs
+- **White-Label Solutions** - Build page builders into your SaaS products
 
 ---
 
-## Support
+## 🤝 Support
 
 If you like the project, you can assist us in expanding. ChaiBuilder is a collaborative endeavor crafted by developers in their free time. We value every contribution, no matter how modest, as each one represents a significant step forward in various ways, particularly in fueling our drive to enhance this tool continually.
 

package/dist/{2SSKDMRQ-CopJgtZb.cjs → 2SSKDMRQ-DDOgISWg.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AP7HFJJL-DYxDgaOs.cjs"),t=require("./index-C0-pgg_p.cjs");var u=r=>{const[o,n]=e.createLocalStorage({prefix:"TanstackQueryDevtools"}),a=t.getPreferredColorScheme(),c=t.createMemo(()=>{const l=r.theme||o.theme_preference||e.THEME_PREFERENCE;return l!=="system"?l:a()});return t.createComponent(e.QueryDevtoolsContext.Provider,{value:r,get children(){return t.createComponent(e.PiPProvider,{disabled:!0,localStore:o,setLocalStore:n,get children(){return t.createComponent(e.ThemeContext.Provider,{value:c,get children(){return t.createComponent(e.ParentPanel,{get children(){return t.createComponent(e.ContentView,{localStore:o,setLocalStore:n,get onClose(){return r.onClose},showPanelViewOnly:!0})}})}})}})}})},s=u;exports.default=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AP7HFJJL-tcAhVllC.cjs"),t=require("./index-BwH1mRm_.cjs");var u=r=>{const[o,n]=e.createLocalStorage({prefix:"TanstackQueryDevtools"}),a=t.getPreferredColorScheme(),c=t.createMemo(()=>{const l=r.theme||o.theme_preference||e.THEME_PREFERENCE;return l!=="system"?l:a()});return t.createComponent(e.QueryDevtoolsContext.Provider,{value:r,get children(){return t.createComponent(e.PiPProvider,{disabled:!0,localStore:o,setLocalStore:n,get children(){return t.createComponent(e.ThemeContext.Provider,{value:c,get children(){return t.createComponent(e.ParentPanel,{get children(){return t.createComponent(e.ContentView,{localStore:o,setLocalStore:n,get onClose(){return r.onClose},showPanelViewOnly:!0})}})}})}})}})},s=u;exports.default=s;

package/dist/{2SSKDMRQ-Difo_1pg.js → 2SSKDMRQ-hL7THuKW.js}

@@ -1,5 +1,5 @@
-import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./AP7HFJJL-BPuPBqj4.js";
-import { w as h, x as v, y as e } from "./index-Dno42B0a.js";
+import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./AP7HFJJL-BsLQ13V_.js";
+import { w as h, x as v, y as e } from "./index-B7eWP_hB.js";
 var C = (r) => {
   const [t, o] = s({
     prefix: "TanstackQueryDevtools"

package/dist/{AP7HFJJL-BPuPBqj4.js → AP7HFJJL-BsLQ13V_.js}

@@ -1,7 +1,7 @@
 var xs = Object.defineProperty;
 var $s = (e, t, n) => t in e ? xs(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var Re = (e, t, n) => $s(e, typeof t != "symbol" ? t + "" : t, n);
-import { z as $e, C as B, D as ft, F as H, x as P, y as m, G as No, H as ve, S as K, I as _, J as k, K as U, M as F, N as Cs, O as ur, Q as Ce, R as V, U as Qn, V as Yn, W as gt, X as T, Y as Ss, Z as Ut, _ as _t, $ as qe, a0 as ks, a1 as Rt, a2 as Bt, a3 as Es, a4 as Ds, a5 as En, a6 as As, a7 as Ht, a8 as Ho, a9 as Ms, aa as Ts, ab as W, ac as Vr, ad as Fs, ae as Is, af as cr, ag as Os, ah as Ls, ai as Hn, aj as Ps, ak as qs, al as ie, am as _s, an as Rs } from "./index-Dno42B0a.js";
+import { z as $e, C as B, D as ft, F as H, x as P, y as m, G as No, H as ve, S as K, I as _, J as k, K as U, M as F, N as Cs, O as ur, Q as Ce, R as V, U as Qn, V as Yn, W as gt, X as T, Y as Ss, Z as Ut, _ as _t, $ as qe, a0 as ks, a1 as Rt, a2 as Bt, a3 as Es, a4 as Ds, a5 as En, a6 as As, a7 as Ht, a8 as Ho, a9 as Ms, aa as Ts, ab as W, ac as Vr, ad as Fs, ae as Is, af as cr, ag as Os, ah as Ls, ai as Hn, aj as Ps, ak as qs, al as ie, am as _s, an as Rs } from "./index-B7eWP_hB.js";
 var zs = (e) => e != null, Ks = (e) => e.filter(zs);
 function Bs(e) {
   return (...t) => {