fix: bugs and browser warnings

Author: olliethedev

README.md

@@ -286,6 +286,7 @@ For more detailed documentation read the [docs](https://uibuilder.app/)
 - The `componentRegistry` is now passed as a prop to the `UIBuilder` component instead of being defined in a standalone file.
 - Removed the script used to generate component schema definitions. This approach proved problematic to maintain and didn't function correctly for complex components or varying project setups. Component schema definitions should now be manually created or generated using project-specific tooling if desired.
 - `pagePropsForm` prop added to `UIBuilder` to allow customization of the form used for editing page-level (root layer) properties.
+- Made `layer-store` local storage persistence optional and configurable via props.
 
 
 ### v0.0.2
@@ -323,11 +324,15 @@ npm run test
 - [ ] Add tiptap editor for markdown content
 - [ ] Add global variables for component props
 - [ ] Add Blocks. Reusable component blocks that can be used in multiple pages
+- [ ] Move component schemas to separate shadcn registry to keep main registry light
+- [ ] Move prop form field components (overrides) to separate shadcn registry to keep main registry light
 - [ ] Add data sources to component layers (ex, getUser() binds prop user.name)
 - [ ] Add event handlers to component layers (onClick, onSubmit, etc)
 - [ ] React native support
 - [ ] Update to React 19
 - [ ] Update to latest Shadcn/ui + Tailwind CSS v4
+- [ ] Update to new AutoForm when stable
+- [ ] Update to Zod v4 (when stable) for native json schema conversion to enforce safety in layer props
 
 ## Contributing
 

__tests__/component-registry.test.tsx

@@ -3,8 +3,7 @@
 import {
   generateFieldOverrides
 } from "@/lib/ui-builder/store/editor-utils";
-import { RegistryEntry } from "@/lib/ui-builder/store/editor-store";
-import { ComponentLayer } from '@/components/ui/ui-builder/types';
+import { ComponentLayer, RegistryEntry } from '@/components/ui/ui-builder/types';
 import { FieldConfigItem } from "@/components/ui/auto-form/types";
 import { complexComponentDefinitions } from "@/lib/ui-builder/registry/complex-component-definitions";
 import { primitiveComponentDefinitions } from "@/lib/ui-builder/registry/primitive-component-definitions";

__tests__/layer-store.test.tsx

@@ -149,7 +149,7 @@ describe('LayerStore', () => {
       expect(result.current.pages).toHaveLength(2);
       const duplicatedPage = result.current.pages[1];
       expect(duplicatedPage.type).toBe('_page_');
-      expect(duplicatedPage.name).toBe('Page 1');
+      expect(duplicatedPage.name).toBe('Page 1 (Copy)');
       expect(result.current.selectedPageId).toBe(duplicatedPage.id);
     });
 

__tests__/layer-utils.test.tsx

@@ -448,7 +448,7 @@ describe("Layer Utils", () => {
         ],
       };
 
-      const duplicatedLayer = duplicateWithNewIdsAndName(originalLayer);
+      const duplicatedLayer = duplicateWithNewIdsAndName(originalLayer, true);
 
       expect(duplicatedLayer.id).not.toBe(originalLayer.id);
       expect(duplicatedLayer.name).toBe(`${originalLayer.name} (Copy)`);
@@ -460,7 +460,7 @@ describe("Layer Utils", () => {
         duplicatedLayer.children.forEach((child, index) => {
           expect(child.id).not.toBe((originalLayer.children![index] as ComponentLayer).id);
           expect(child.name).toBe(
-          `${(originalLayer.children![index] as ComponentLayer).name} (Copy)`
+          `${(originalLayer.children![index] as ComponentLayer).name}`
         );
         expect(child.type).toBe((originalLayer.children![index] as ComponentLayer).type);
         expect(child.props).toEqual((originalLayer.children![index] as ComponentLayer).props);
@@ -537,15 +537,15 @@ describe("Layer Utils", () => {
       const duplicatedChild = duplicatedLayer.children![0] as ComponentLayer;
       expect(duplicatedChild.id).not.toBe((originalLayer.children![0] as ComponentLayer).id);
       expect(duplicatedChild.name).toBe(
-        `${(originalLayer.children![0] as ComponentLayer).name} (Copy)`
+        `${(originalLayer.children![0] as ComponentLayer).name}`
       );
 
       const duplicatedDeepChild = duplicatedChild.children![0] as ComponentLayer;
       expect(duplicatedDeepChild.id).not.toBe(
         ((originalLayer.children![0] as ComponentLayer).children![0] as ComponentLayer).id
       );
       expect(duplicatedDeepChild.name).toBe(
-        `${((originalLayer.children![0] as ComponentLayer).children![0] as ComponentLayer).name} (Copy)`
+        `${((originalLayer.children![0] as ComponentLayer).children![0] as ComponentLayer).name}`
       );
     });
 

__tests__/layers-panel.test.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import LayersPanel from "@/components/ui/ui-builder/internal/layers-panel";
 import { useLayerStore} from "@/lib/ui-builder/store/layer-store";
-import { ComponentLayer } from '@/components/ui/ui-builder/types';
-import { RegistryEntry, useEditorStore } from "@/lib/ui-builder/store/editor-store";
+import { ComponentLayer, RegistryEntry } from '@/components/ui/ui-builder/types';
+import { useEditorStore } from "@/lib/ui-builder/store/editor-store";
 import { z } from "zod";
 
 // Mock dependencies

__tests__/props-panel.test.tsx

@@ -6,9 +6,9 @@ import PropsPanel from "@/components/ui/ui-builder/internal/props-panel";
 import {
   useLayerStore,
 } from "@/lib/ui-builder/store/layer-store";
-import { ComponentLayer } from '@/components/ui/ui-builder/types';
+import { RegistryEntry, ComponentLayer } from '@/components/ui/ui-builder/types';
 import { z } from "zod";
-import { RegistryEntry, useEditorStore } from "@/lib/ui-builder/store/editor-store";
+import { useEditorStore } from "@/lib/ui-builder/store/editor-store";
 
 // Mock dependencies
 jest.mock("../lib/ui-builder/store/layer-store", () => ({
@@ -132,7 +132,7 @@ describe("PropsPanel", () => {
   });
 
   const renderPropsPanel = () => {
-    const { container } = render(<PropsPanel className="test-class" />);
+    const { container } = render(<PropsPanel className="test-class" pagePropsForm={<div>Page Props Form</div>} />);
     return { container };
   };
 
@@ -185,7 +185,7 @@ describe("PropsPanel", () => {
       const selectedLayer = { id: 'layer1', type: 'Button', props: {} };
       mockFindLayerById.mockReturnValue(selectedLayer);
 
-      render(<PropsPanel />);
+      render(<PropsPanel pagePropsForm={<div>Page Props Form</div>} />);
 
       const deleteButton = screen.getByText('Delete Component');
       fireEvent.click(deleteButton);
@@ -197,7 +197,7 @@ describe("PropsPanel", () => {
       const selectedLayer = { id: 'layer1', type: 'Button', props: {} };
       mockFindLayerById.mockReturnValue(selectedLayer);
 
-      render(<PropsPanel />);
+      render(<PropsPanel pagePropsForm={<div>Page Props Form</div>} />);
 
       const duplicateButton = screen.getByText('Duplicate Component');
       fireEvent.click(duplicateButton);
@@ -206,7 +206,7 @@ describe("PropsPanel", () => {
     });
 
     it("should render the form", async () => {
-      const { container } = render(<PropsPanel />);
+      const { container } = render(<PropsPanel pagePropsForm={<div>Page Props Form</div>} />);
       await waitFor(() => {
         expect(container.querySelector('form')).toBeInTheDocument();
         expect(container.querySelector('input[name="label"]')).toBeInTheDocument();
@@ -306,7 +306,7 @@ describe("PropsPanel", () => {
     });
 
     it("should render the form", async () => {
-      const { container } = render(<PropsPanel />);
+      const { container } = render(<PropsPanel pagePropsForm={<div>Page Props Form</div>} />);
       await waitFor(() => {
         expect(container.querySelector('form')).toBeInTheDocument();
         expect(container.querySelector('input[name="label"]')).toBeInTheDocument();

app/platform/simple-builder.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import React from "react";
 import UIBuilder from "@/components/ui/ui-builder";
 import { complexComponentDefinitions } from "@/lib/ui-builder/registry/complex-component-definitions";
 import { primitiveComponentDefinitions } from "@/lib/ui-builder/registry/primitive-component-definitions";
 
-export function SimpleBuilder() {
+export const SimpleBuilder = () => {
   return (
     <UIBuilder
+      persistLayerStore={true}
       componentRegistry={{
         ...complexComponentDefinitions,
         ...primitiveComponentDefinitions,

components/ui/ui-builder/index.tsx

@@ -1,3 +1,8 @@
+/** 
+ * Learn more about the UI Builder:
+ * https://github.com/olliethedev/ui-builder 
+*/
+
 "use client";
 
 import React, { useEffect, useState, useMemo } from "react";
@@ -35,27 +40,38 @@ interface UIBuilderProps {
   onChange?: (pages: ComponentLayer[]) => void;
   componentRegistry: ComponentRegistry;
   panelConfig?: PanelConfig;
+  persistLayerStore?: boolean;
 }
 
 const UIBuilder = ({
   initialLayers,
   onChange,
   componentRegistry,
-  panelConfig = defaultPanelConfig(true),
+  panelConfig: userPanelConfig,
+  persistLayerStore = true,
 }: UIBuilderProps) => {
   const layerStore = useStore(useLayerStore, (state) => state);
   const editorStore = useStore(useEditorStore, (state) => state);
 
+
   const [editorStoreInitialized, setEditorStoreInitialized] = useState(false);
   const [layerStoreInitialized, setLayerStoreInitialized] = useState(false);
 
+  // Memoize the default panel configuration.
+  // The dependency array is empty because defaultPanelConfig is called with a constant 'true'.
+  const memoizedDefaultPanelConfig = useMemo(() => defaultPanelConfig(true), []);
+
+  // Use user-provided config if available, otherwise use the memoized default.
+  const currentPanelConfig = userPanelConfig || memoizedDefaultPanelConfig;
+
+
   // Effect 1: Initialize Editor Store with registry and page form props
   useEffect(() => {
     if (editorStore && componentRegistry && !editorStoreInitialized) {
-      editorStore.initializeRegistry(componentRegistry);
+      editorStore.initialize(componentRegistry, persistLayerStore);
       setEditorStoreInitialized(true);
     }
-  }, [editorStore, componentRegistry, editorStoreInitialized]);
+  }, [editorStore, componentRegistry, editorStoreInitialized, persistLayerStore]);
 
   // Effect 2: Conditionally initialize Layer Store *after* Editor Store is initialized
   useEffect(() => {
@@ -91,7 +107,7 @@ const UIBuilder = ({
   const layout = isLoading ? (
     <LoadingSkeleton />
   ) : (
-    <MainLayout panelConfig={panelConfig} />
+    <MainLayout panelConfig={currentPanelConfig} />
   );
 
   return (

components/ui/ui-builder/internal/children-searchable-select.tsx

@@ -5,7 +5,7 @@ import { X as XIcon, ChevronsUpDown } from "lucide-react";
 import {
   useLayerStore,
 } from "@/lib/ui-builder/store/layer-store";
-import { ComponentLayer } from '../types';
+import { ComponentLayer } from '@/components/ui/ui-builder/types';
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { AddComponentsPopover } from "@/components/ui/ui-builder/internal/add-component-popover";