@simple-builder/react 1.4.2 → 1.5.1

package/dist/{build-container-client-D2ZD6IEH.css → build-container-client-YWNDWXO2.css}

@@ -543,6 +543,9 @@
   .sb\:w-px {
     width: 1px;
   }
+  .sb\:w-screen {
+    width: 100vw;
+  }
   .sb\:max-w-3xl {
     max-width: var(--sb-container-3xl);
   }

package/dist/{builder-content-H75SR7I7.mjs → builder-content-FTTWEFTK.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-ZJYB6LEV.mjs';
-import { BuildContainer } from './chunk-QSAIF4GO.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-5C63BZJZ.mjs';
+import { BuildContainer } from './chunk-TWEX2YSZ.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{builder-content-7ZRYWXPN.js → builder-content-QH2VX65W.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk7FWFM2TR_js = require('./chunk-7FWFM2TR.js');
-var chunk63LNKQZD_js = require('./chunk-63LNKQZD.js');
+var chunk6TXJMYOX_js = require('./chunk-6TXJMYOX.js');
+var chunk37KLYH3L_js = require('./chunk-37KLYH3L.js');
 var React2 = require('react');
 
 function _interopNamespace(e) {
@@ -25,17 +25,17 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 var BuilderHeader = () => {
-  const { save } = chunk7FWFM2TR_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb:grid sb:grid-cols-3 sb:gap-4 sb:items-center sb:p-2 sb:shadow-lg sb:sticky sb:inset-x-0 sb:top-0 sb:bg-background sb:z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb:flex sb:gap-4 sb:items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunk7FWFM2TR_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunk6TXJMYOX_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb:grid sb:grid-cols-3 sb:gap-4 sb:items-center sb:p-2 sb:shadow-lg sb:sticky sb:inset-x-0 sb:top-0 sb:bg-background sb:z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb:flex sb:gap-4 sb:items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunk6TXJMYOX_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunk7FWFM2TR_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunk6TXJMYOX_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunk7FWFM2TR_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunk63LNKQZD_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunk6TXJMYOX_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunk37KLYH3L_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{builder-content-NFFJ4NAB.css → builder-content-V2MDRHJI.css}

@@ -543,6 +543,9 @@
   .sb\:w-px {
     width: 1px;
   }
+  .sb\:w-screen {
+    width: 100vw;
+  }
   .sb\:max-w-3xl {
     max-width: var(--sb-container-3xl);
   }

package/dist/{chunk-63LNKQZD.js → chunk-37KLYH3L.js}

@@ -30,41 +30,53 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 
 // src/lib/builder.ts
-var builder = /* @__PURE__ */ (() => {
-  const components = [];
-  return {
-    register: (component, config) => {
-      if (components.find(({ name }) => name === config.name)) {
-        console.log(
-          `[simple-builder]: Component ${config.name} already registered.`
-        );
-        return;
-      }
-      components.push({
-        component,
-        ...config
-      });
-    },
-    getComponents: () => components,
-    getComponent: (name) => {
-      return components.find((c) => c.name === name);
-    },
-    bindComponent: ({ content, ...block }, edit) => {
-      const component = components.find(({ name }) => name === block.component);
-      if (!component) {
-        throw new Error(
-          `[simple-builder]: Component ${block.component} not found`
-        );
-      }
-      const Element = React3.createElement(component.component, {
-        key: block.id,
-        builder: { id: block.id, content, edit },
-        ...block.props
-      });
-      return Element;
+var Builder = class _Builder {
+  static instance;
+  components = [];
+  constructor() {
+  }
+  static getInstance() {
+    if (!_Builder.instance) {
+      _Builder.instance = new _Builder();
     }
-  };
-})();
+    return _Builder.instance;
+  }
+  register(component, config) {
+    if (this.components.find(({ name }) => name === config.name)) {
+      console.log(
+        `[simple-builder]: Component ${config.name} already registered.`
+      );
+      return;
+    }
+    this.components.push({
+      component,
+      ...config
+    });
+  }
+  getComponents() {
+    return this.components;
+  }
+  getComponent(name) {
+    return this.components.find((c) => c.name === name);
+  }
+  bindComponent({ content, ...block }, edit) {
+    const component = this.components.find(
+      ({ name }) => name === block.component
+    );
+    if (!component) {
+      throw new Error(
+        `[simple-builder]: Component ${block.component} not found`
+      );
+    }
+    const Element = React3.createElement(component.component, {
+      key: block.id,
+      builder: { id: block.id, content, edit: !!edit },
+      ...block.props
+    });
+    return Element;
+  }
+};
+var builder = Builder.getInstance();
 var Image = (props) => {
   if (typeof NextImage__default.default !== "undefined") {
     return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.default, { ...props });
@@ -133,13 +145,13 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-JAITVVDD.js')
+  () => import('./build-container-client-EJNKMHTC.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;
   const items = Array.isArray(content) ? content : content?.[name] || [];
   if (!edit) {
-    return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
+    return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { key: item.id, styles: item.styles }, builder.bindComponent(item, edit)));
   }
   return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Suspense, { fallback: /* @__PURE__ */ React3__namespace.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3__namespace.createElement(BuildContainerInner, { ...props }));
 };

package/dist/{chunk-ZJYB6LEV.mjs → chunk-5C63BZJZ.mjs}

@@ -1,4 +1,4 @@
-import { cn, builder, insertAt } from './chunk-QSAIF4GO.mjs';
+import { cn, builder, insertAt } from './chunk-TWEX2YSZ.mjs';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';

package/dist/{chunk-X5MZZBYC.mjs → chunk-5X4LY7OW.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-QSAIF4GO.mjs';
+import { BuildContainer } from './chunk-TWEX2YSZ.mjs';
 import * as React from 'react';
 import { lazy } from 'react';
 
@@ -15,6 +15,6 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = lazy(() => import('./builder-content-H75SR7I7.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-FTTWEFTK.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-7FWFM2TR.js → chunk-6TXJMYOX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk63LNKQZD_js = require('./chunk-63LNKQZD.js');
+var chunk37KLYH3L_js = require('./chunk-37KLYH3L.js');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
@@ -57,7 +57,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunk63LNKQZD_js.builder.getComponent(name);
+      const component = chunk37KLYH3L_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -79,7 +79,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => chunk63LNKQZD_js.insertAt(content2, index, entry));
+        setContent((content2) => chunk37KLYH3L_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -89,7 +89,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunk63LNKQZD_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunk37KLYH3L_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -254,7 +254,7 @@ var Button = React__namespace.forwardRef(
     return /* @__PURE__ */ React__namespace.createElement(
       Comp,
       {
-        className: chunk63LNKQZD_js.cn(buttonVariants({ variant, size, className })),
+        className: chunk37KLYH3L_js.cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }

package/dist/{chunk-JFWIO2AR.js → chunk-LPP77IMH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk63LNKQZD_js = require('./chunk-63LNKQZD.js');
+var chunk37KLYH3L_js = require('./chunk-37KLYH3L.js');
 var React = require('react');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var StaticContent = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(
-    chunk63LNKQZD_js.BuildContainer,
+    chunk37KLYH3L_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-7ZRYWXPN.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-QH2VX65W.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/{chunk-QSAIF4GO.mjs → chunk-TWEX2YSZ.mjs}

@@ -6,41 +6,53 @@ import { extendTailwindMerge } from 'tailwind-merge';
 import { createTV } from 'tailwind-variants';
 
 // src/lib/builder.ts
-var builder = /* @__PURE__ */ (() => {
-  const components = [];
-  return {
-    register: (component, config) => {
-      if (components.find(({ name }) => name === config.name)) {
-        console.log(
-          `[simple-builder]: Component ${config.name} already registered.`
-        );
-        return;
-      }
-      components.push({
-        component,
-        ...config
-      });
-    },
-    getComponents: () => components,
-    getComponent: (name) => {
-      return components.find((c) => c.name === name);
-    },
-    bindComponent: ({ content, ...block }, edit) => {
-      const component = components.find(({ name }) => name === block.component);
-      if (!component) {
-        throw new Error(
-          `[simple-builder]: Component ${block.component} not found`
-        );
-      }
-      const Element = createElement(component.component, {
-        key: block.id,
-        builder: { id: block.id, content, edit },
-        ...block.props
-      });
-      return Element;
+var Builder = class _Builder {
+  static instance;
+  components = [];
+  constructor() {
+  }
+  static getInstance() {
+    if (!_Builder.instance) {
+      _Builder.instance = new _Builder();
+    }
+    return _Builder.instance;
+  }
+  register(component, config) {
+    if (this.components.find(({ name }) => name === config.name)) {
+      console.log(
+        `[simple-builder]: Component ${config.name} already registered.`
+      );
+      return;
     }
-  };
-})();
+    this.components.push({
+      component,
+      ...config
+    });
+  }
+  getComponents() {
+    return this.components;
+  }
+  getComponent(name) {
+    return this.components.find((c) => c.name === name);
+  }
+  bindComponent({ content, ...block }, edit) {
+    const component = this.components.find(
+      ({ name }) => name === block.component
+    );
+    if (!component) {
+      throw new Error(
+        `[simple-builder]: Component ${block.component} not found`
+      );
+    }
+    const Element = createElement(component.component, {
+      key: block.id,
+      builder: { id: block.id, content, edit: !!edit },
+      ...block.props
+    });
+    return Element;
+  }
+};
+var builder = Builder.getInstance();
 var Image = (props) => {
   if (typeof NextImage !== "undefined") {
     return /* @__PURE__ */ React3.createElement(NextImage, { ...props });
@@ -109,13 +121,13 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-6S55GQVT.mjs')
+  () => import('./build-container-client-6TC2IEII.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;
   const items = Array.isArray(content) ? content : content?.[name] || [];
   if (!edit) {
-    return items.map((item) => /* @__PURE__ */ React3.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
+    return items.map((item) => /* @__PURE__ */ React3.createElement(DesignWrapper, { key: item.id, styles: item.styles }, builder.bindComponent(item, edit)));
   }
   return /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: /* @__PURE__ */ React3.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3.createElement(BuildContainerInner, { ...props }));
 };

package/dist/index.css

@@ -543,6 +543,9 @@
   .sb\:w-px {
     width: 1px;
   }
+  .sb\:w-screen {
+    width: 100vw;
+  }
   .sb\:max-w-3xl {
     max-width: var(--sb-container-3xl);
   }

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createElement } from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
@@ -36,12 +37,17 @@ type BuildContainerProps$1 = {
     };
 };
 
-declare const builder: {
-    register: (component: any, config: Omit<Component, "component">) => void;
-    getComponents: () => Component[];
-    getComponent: (name: string) => Component | undefined;
-    bindComponent: ({ content, ...block }: ContentItem, edit?: boolean) => React.FunctionComponentElement<any>;
-};
+declare class Builder {
+    private static instance;
+    private components;
+    private constructor();
+    static getInstance(): Builder;
+    register(component: Component["component"], config: Omit<Component, "component">): void;
+    getComponents(): Component[];
+    getComponent(name: string): Component | undefined;
+    bindComponent({ content, ...block }: ContentItem, edit?: boolean): ReturnType<typeof createElement>;
+}
+declare const builder: Builder;
 
 type StaticContentProps = {
     content?: BuilderContent$1;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createElement } from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
@@ -36,12 +37,17 @@ type BuildContainerProps$1 = {
     };
 };
 
-declare const builder: {
-    register: (component: any, config: Omit<Component, "component">) => void;
-    getComponents: () => Component[];
-    getComponent: (name: string) => Component | undefined;
-    bindComponent: ({ content, ...block }: ContentItem, edit?: boolean) => React.FunctionComponentElement<any>;
-};
+declare class Builder {
+    private static instance;
+    private components;
+    private constructor();
+    static getInstance(): Builder;
+    register(component: Component["component"], config: Omit<Component, "component">): void;
+    getComponents(): Component[];
+    getComponent(name: string): Component | undefined;
+    bindComponent({ content, ...block }: ContentItem, edit?: boolean): ReturnType<typeof createElement>;
+}
+declare const builder: Builder;
 
 type StaticContentProps = {
     content?: BuilderContent$1;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkJFWIO2AR_js = require('./chunk-JFWIO2AR.js');
-var chunk63LNKQZD_js = require('./chunk-63LNKQZD.js');
+var chunkLPP77IMH_js = require('./chunk-LPP77IMH.js');
+var chunk37KLYH3L_js = require('./chunk-37KLYH3L.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkJFWIO2AR_js.BuilderContent; }
+  get: function () { return chunkLPP77IMH_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkJFWIO2AR_js.StaticContent; }
+  get: function () { return chunkLPP77IMH_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunk63LNKQZD_js.BuildContainer; }
+  get: function () { return chunk37KLYH3L_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunk63LNKQZD_js.builder; }
+  get: function () { return chunk37KLYH3L_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-X5MZZBYC.mjs';
-export { BuildContainer, builder } from './chunk-QSAIF4GO.mjs';
+export { BuilderContent, StaticContent } from './chunk-5X4LY7OW.mjs';
+export { BuildContainer, builder } from './chunk-TWEX2YSZ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -59,7 +59,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.4.2"
+    "@simple-builder/server": "1.5.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",