@developer_tribe/react-builder 0.1.31 → 1.0.1

package/dist/pages/ProjectPage.d.ts

@@ -0,0 +1,11 @@
+import { Project } from '..';
+import { AppConfig } from '../types/PreviewConfig';
+import type { LogLevel } from '../types/Project';
+export type Tab = 'builder' | 'preview' | 'debug';
+export type ProjectPageProps = {
+    project: Project;
+    onSaveProject: (project: Project) => void;
+    appConfig?: AppConfig;
+    logLevel?: LogLevel;
+};
+export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/tabs/BuilderTab.d.ts

@@ -0,0 +1,9 @@
+import { Node } from '../..';
+type BuilderTabProps = {
+    data: Node;
+    setData: (data: Node) => void;
+    current: Node;
+    setCurrent: (current: Node) => void;
+};
+export declare function BuilderTab({ data, setData, current, setCurrent, }: BuilderTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/tabs/DebugTab.d.ts

@@ -0,0 +1,7 @@
+import { Node } from '../..';
+type DebugTabProps = {
+    data: Node;
+    setData: (data: Node) => void;
+};
+export declare function DebugTab({ data, setData }: DebugTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/tabs/PreviewTab.d.ts

@@ -0,0 +1,3 @@
+type PreviewTabProps = {};
+export declare function PreviewTab({}: PreviewTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/store.d.ts

@@ -1,25 +1,24 @@
 import type { Device } from './types/Device';
-import type { Localication } from './types/PreviewConfig';
-import { ScreenStyle } from './RenderPage';
+import { type AppConfig } from './types/PreviewConfig';
+import { Node } from './types/Node';
+import type { LogEntry, LogLevel } from './types/Project';
 type RenderStore = {
+    copiedNode: Node | null;
+    setCopiedNode: (node: Node | null) => void;
     device: Device;
-    localication: Localication | null;
-    defaultLanguage?: string;
-    baseSize: {
-        width: number;
-        height: number;
-    };
-    theme: 'dark' | 'light';
-    screenStyle: ScreenStyle;
-    setBaseSize: (baseSize: {
-        width: number;
-        height: number;
-    }) => void;
     setDevice: (device: Device) => void;
-    setLocalication: (localication: Localication | null) => void;
-    setDefaultLanguage: (defaultLanguage?: string) => void;
-    setTheme: (theme: 'dark' | 'light') => void;
-    setScreenStyle: (screenStyle: ScreenStyle) => void;
+    appConfig: AppConfig;
+    setAppConfig: (appConfig: AppConfig) => void;
+    renderCount: number;
+    forceRender: () => void;
+    logs: LogEntry[];
+    logLevel: LogLevel;
+    setLogLevel: (level: LogLevel) => void;
+    addLog: (entry: Omit<LogEntry, 'id' | 'timestamp'> & {
+        id?: string;
+        timestamp?: number;
+    }) => void;
+    clearLogs: () => void;
 };
 export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand/vanilla").StoreApi<RenderStore>>;
 export {};

package/dist/styles.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{font-family:inherit}input,button{font-size:100%}p{margin:0;padding:0}.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom;margin-left:calc(var(--slide-spacing)*-1)}.embla__slide{transform:translate3d(0, 0, 0);flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-right:0;height:50px}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%}.embla__dot:after{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected:after{box-shadow:inset 0 0 0 .2rem var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}
+*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{font-family:inherit}input,button{font-size:100%}p{margin:0;padding:0}html,body,#root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif}.editor-container{height:100vh;width:100vw;display:flex;overflow:hidden}.editor-panel-builder{padding:4px 8px}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1 1 auto;background:#f3f4f6}.page-bg{background:#f3f4f6}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:16px}.btn-add{height:120px;border:2px dashed #9ca3af;border-radius:12px;background:#fff;cursor:pointer;font-weight:600;color:#111827;transition:border-color .2s ease,transform .1s ease,box-shadow .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}.btn-add:hover{border-color:rgb(127.7932960894,136.7877094972,152.2067039106);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.1)}.split-left{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) rgba(0,0,0,0)}.split-left::-webkit-scrollbar{width:8px;height:4px}.split-left{flex:1 1 30%;min-width:0;border-right:1px solid #e5e7eb;overflow:auto}.split-right{position:relative;flex:1 1 45%;min-width:0;max-height:calc(100vh - 120px);overflow:auto}.split-third{flex:1 1 25%;min-width:0;border-right:1px solid #e5e7eb;overflow:auto;max-height:calc(100vh - 120px)}.split-right-background{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto;opacity:.2}.stage-wrapper{display:flex;justify-content:center;background:#f3f4f6;padding:16px}.stage{background:#fff;border:1px solid #e5e7eb;border-radius:4px;border:1px solid #e5e7eb}.stage .scroll-container::-webkit-scrollbar{width:8px;height:8px}.stage .scroll-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.stage .scroll-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:8px}.stage .scroll-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) rgba(0,0,0,0)}.app-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e5e7eb;height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}.app-header a{color:#111827;text-decoration:none}.app-header__brand{font-weight:700}.app-header__nav{display:flex;gap:16px}.warning{color:#ef4444;font-size:12px;font-weight:600;margin-bottom:16px}.breadcrumb{display:block;font-size:12px;color:#9ca3af}.breadcrumb__list{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:8px}.breadcrumb__item{display:inline-flex;align-items:center}.breadcrumb__separator{color:#e5e7eb;margin:0 4px}.breadcrumb__link{color:#111827;text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:#9ca3af}.editor-controls{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}.editor-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}.form-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:12px;margin-bottom:12px}.form-actions{display:flex;gap:12px;margin-top:16px}.btn{padding:8px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;transition:background .2s ease,box-shadow .2s ease}.btn:hover{background:#f9fafb;box-shadow:0 6px 16px rgba(0,0,0,.06)}.input{display:inline-flex;align-items:center;height:32px;padding:0 8px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#111827;font:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:hsl(220,13.0434782609%,82.9803921569%);box-shadow:0 0 0 3px rgba(0,0,0,.04)}.input--color{padding:0;width:40px;height:28px;border-radius:6px;cursor:pointer}.input--color::-webkit-color-swatch-wrapper{padding:0}.input--color::-webkit-color-swatch{border:none;border-radius:4px}.input--color::-moz-color-swatch{border:none;border-radius:4px}.builder{display:flex;flex-direction:column;gap:12px}.builder__breadcrumbs{display:flex;flex-direction:row;gap:8px}.builder__breadcrumb{color:#9ca3af;font-size:12px}.builder__current{font-weight:600}.builder__list{display:flex;flex-wrap:wrap;gap:8px}.builder__button{background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:12px 12px;font-size:14px;background:#6495ed;color:#fff;cursor:pointer}.builder__node{background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:12px}.builder__node-type{margin:0 0 8px 0;font-weight:600}.builder__children{display:flex;flex-direction:column;gap:8px}.builder__text,.builder__placeholder{color:#9ca3af;font-size:12px}.editor-tabs{display:flex;gap:8px;border-bottom:1px solid #e5e7eb}.editor-tab{padding:8px 12px;cursor:pointer;border:1px solid rgba(0,0,0,0);border-top-left-radius:4px;border-top-right-radius:4px;color:#111827;padding:8px 12px}.editor-tab--active{background:#fff;border-color:#e5e7eb #e5e7eb #fff #e5e7eb}.editor-panels{padding:12px}.editor-panels.editor-panels-debug{padding:0}.jer-editor-container{padding-left:0 !important;padding-right:0 !important}.editor-panel{display:none}.editor-panel--active{display:block}.editor-header{display:flex;align-items:center;gap:12px;padding:0 16px;height:60px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.editor-header__title{color:#111827;font-weight:600}.editor-header__devices{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) rgba(0,0,0,0)}.editor-header__devices::-webkit-scrollbar{width:8px;height:4px}.editor-header__devices{display:flex;flex-direction:row;align-items:stretch;gap:8px;overflow:auto;height:60px;padding:4px}.editor-device-button{position:relative;min-width:160px;height:100%;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#111827;cursor:pointer;font-size:12px}.editor-device-button.editor-device-button--selected{border-color:#000}.editor-device-button img{position:absolute;bottom:4px;right:4px;width:16px;height:16px}.editor-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}.editor-button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:120px;padding:0 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#111827;cursor:pointer}.editor-button:disabled{opacity:.6;cursor:default}.editor-save-button,.editor-save-previewconfig-button{color:#000;font-weight:600;font-size:12px}.editor-modal{position:fixed;inset:0;z-index:1000}.editor-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}.editor-modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:min(960px,100vw - 40px);max-height:calc(100vh - 120px);display:flex;flex-direction:column}.editor-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5e7eb}.editor-device-grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:12px;overflow:auto}.editor-device-grid .editor-device-button{height:80px;min-width:unset}.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom;margin-left:calc(var(--slide-spacing)*-1)}.embla__slide{transform:translate3d(0, 0, 0);flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-right:0;height:50px}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%}.embla__dot:after{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected:after{box-shadow:inset 0 0 0 .2rem var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}

package/dist/types/PreviewConfig.d.ts

@@ -1,7 +1,5 @@
-import { TargetedScreenSize } from './TargetedScreenSize';
-export interface PreviewConfig {
+export interface AppConfig {
     theme: 'light' | 'dark';
-    screenSize: TargetedScreenSize;
     isRtl: boolean;
     screenStyle: {
         light: {
@@ -17,7 +15,12 @@ export interface PreviewConfig {
     };
     localication: Localication;
     defaultLanguage?: string;
+    baseSize: {
+        width: number;
+        height: number;
+    };
 }
+export declare const defaultAppConfig: AppConfig;
 export type Localication = {
     [key: string]: {
         [key: string]: string;

package/dist/types/Project.d.ts

@@ -1,10 +1,20 @@
 import { Node } from '../types/Node';
-import { PreviewConfig } from './PreviewConfig';
+import { AppConfig } from './PreviewConfig';
 export interface ProjectBase<T> {
     name: string;
     version: string;
     data: T;
-    previewConfig?: PreviewConfig;
+    appConfig?: AppConfig;
 }
 export interface Project extends ProjectBase<Node> {
 }
+export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
+export type LogSource = string;
+export interface LogEntry {
+    id: string;
+    timestamp: number;
+    level: LogLevel;
+    source: LogSource;
+    message: string;
+    payload?: unknown;
+}

package/dist/utils/copyNode.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '../types/Node';
+export declare function copyNode(node: Node): void;

package/dist/utils/logger.d.ts

@@ -0,0 +1,11 @@
+import type { LogLevel, LogSource } from '../types/Project';
+export declare const logger: {
+    setLevel(level: LogLevel): void;
+    log(level: LogLevel, source: LogSource, message: string, payload?: unknown): void;
+    verbose(source: LogSource, message: string, payload?: unknown): void;
+    info(source: LogSource, message: string, payload?: unknown): void;
+    warn(source: LogSource, message: string, payload?: unknown): void;
+    error(source: LogSource, message: string, payload?: unknown): void;
+    clear(): void;
+};
+export type { LogLevel };

package/dist/utils/useLogRender.d.ts

@@ -0,0 +1 @@
+export declare function useLogRender(sourceName: string, payload?: unknown): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.31",
+  "version": "1.0.1",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",
@@ -27,24 +27,24 @@
   "bin": {
     "builder": "./scripts/public/bin.js"
   },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
-  },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.36.0",
     "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@svgr/rollup": "^8.1.0",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.4.0",
+    "json-edit-react": "^1.29.0",
+    "lottie-react": "^2.4.1",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
     "rimraf": "^6.0.1",
@@ -57,7 +57,17 @@
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1",
     "use-sync-external-store": "^1.6.0",
-    "yargs": "^18.0.0"
+    "yargs": "^18.0.0",
+    "zustand": "^5.0.8"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "react-router-dom": ">=6.0.0"
+  },
+  "optionalDependencies": {
+    "embla-carousel-react": ">=8.6.0",
+    "json-edit-react": ">=1.29.0"
   },
   "engines": {
     "node": ">=18"
@@ -66,8 +76,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@rollup/plugin-json": "^6.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "zustand": "^5.0.8"
+    "axios": "^1.12.2"
   }
 }

package/scripts/prebuild/utils/createBuildComponentsIndex.js

@@ -18,7 +18,21 @@ export async function createBuildComponentsIndex(validated, paths) {
 
   const patternsExport = `export { patterns } from './patterns.generated';`;
 
-  const sections = [renderNodeExport, patternsExport, exportLines]
+  // Export array of all component names derived from pattern.type
+  const allComponentNames = validated
+    .map(({ patternJson }) => patternJson?.pattern?.type)
+    .filter(t => typeof t === 'string');
+  const allcomponentNamesExport =
+    `export const allcomponentNames = [\n  ` +
+    allComponentNames.map(t => JSON.stringify(t)).join(', ') +
+    `\n] as const;`;
+
+  const sections = [
+    renderNodeExport,
+    patternsExport,
+    allcomponentNamesExport,
+    exportLines,
+  ]
     .filter(Boolean)
     .join('\n\n');
 

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -7,15 +7,43 @@ import { formatWithPrettier } from './formatWithPrettier.js';
 const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
 const getArrayItem = t =>
   typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
+// Convert a property name like "animation" or "on-press" to PascalCase
+const toPascalCase = s =>
+  String(s)
+    .replace(/([A-Z]+)/g, ' $1')
+    .split(/[^a-zA-Z0-9]+|\s+/)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
 
 // Convert attribute type spec to TS type. Supports enum arrays, primitives, CustomType, and CustomType[]
-function tsTypeFromAttributeType(attrType, allTypes) {
+// If an enum array is detected, "registerEnumAlias" will be called to create an exported alias
+function tsTypeFromAttributeType(
+  attrType,
+  allTypes,
+  propertyName,
+  registerEnumAlias
+) {
   if (attrType === 'string') return 'string';
   if (attrType === 'number') return 'number';
   if (attrType === 'boolean') return 'boolean';
   if (Array.isArray(attrType)) {
-    const literals = attrType.map(v => JSON.stringify(v)).join(' | ');
-    return literals.length > 0 ? literals : 'string';
+    const rawMembers = attrType;
+    if (rawMembers.length === 0) return 'string';
+    const hasNull = rawMembers.some(v => v === 'null');
+    const nonNullMembers = rawMembers.filter(v => v !== 'null');
+    const nonNullLiteralMembers = nonNullMembers.map(v => JSON.stringify(v));
+
+    // Only null specified
+    if (hasNull && nonNullLiteralMembers.length === 0) return 'null';
+
+    if (typeof registerEnumAlias === 'function' && propertyName) {
+      const alias = registerEnumAlias(propertyName, nonNullLiteralMembers);
+      return hasNull ? `${alias} | null` : alias;
+    }
+    // Fallback if no registrar provided
+    const baseUnion = nonNullLiteralMembers.join(' | ');
+    return hasNull ? `${baseUnion} | null` : baseUnion;
   }
   if (typeof attrType === 'string') {
     const item = getArrayItem(attrType);
@@ -44,11 +72,36 @@ export async function createGeneratedProps(
   const attributes = pattern.attributes || {};
   const allTypes = patternJson.types || {};
 
+  // Collect option type aliases for any enum arrays encountered across attributes and custom types
+  const optionAliases = new Map(); // name -> union (string like `'a' | 'b'`)
+  const registerEnumAlias = (propName, literalMembers) => {
+    const base = `${toPascalCase(propName)}OptionType`;
+    const union = literalMembers.join(' | ');
+    if (!optionAliases.has(base)) {
+      optionAliases.set(base, union);
+      return base;
+    }
+    const existing = optionAliases.get(base);
+    if (existing === union) return base;
+    let i = 2;
+    // find a non-conflicting alias name
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const candidate = `${base}${i}`;
+      if (!optionAliases.has(candidate)) {
+        optionAliases.set(candidate, union);
+        return candidate;
+      }
+      if (optionAliases.get(candidate) === union) return candidate;
+      i += 1;
+    }
+  };
+
   // Emit custom type interfaces if present
   const customTypeEntries = Object.entries(allTypes);
   const customTypeBlocks = customTypeEntries.map(([typeName, schema]) => {
     const fields = Object.entries(schema).map(([k, t]) => {
-      const tsType = tsTypeFromAttributeType(t, allTypes);
+      const tsType = tsTypeFromAttributeType(t, allTypes, k, registerEnumAlias);
       return `  ${k}?: ${tsType};`;
     });
     return (
@@ -59,7 +112,7 @@ export async function createGeneratedProps(
   });
 
   const attributeLines = Object.entries(attributes).map(([key, t]) => {
-    const tsType = tsTypeFromAttributeType(t, allTypes);
+    const tsType = tsTypeFromAttributeType(t, allTypes, key, registerEnumAlias);
     return `    ${key}?: ${tsType};`;
   });
 
@@ -81,6 +134,12 @@ export async function createGeneratedProps(
     // Re-export a component props helper to avoid repeating the local type in each component file
     `import type { NodeData } from '../../types/Node';\n` +
     `\n` +
+    // Export per-property option types for enum arrays
+    (optionAliases.size
+      ? Array.from(optionAliases.entries())
+          .map(([name, union]) => `export type ${name} = ${union};`)
+          .join('\n') + '\n\n'
+      : '') +
     (customTypeBlocks.length ? customTypeBlocks.join('\n') + '\n' : '') +
     `\n` +
     `export interface ${componentName}PropsGenerated {\n` +

package/src/AttributesEditor.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 import { isNodeString } from './utils/analyseNode';
+import { useLogRender } from './utils/useLogRender';
 import {
   getAttributeSchema,
   getTypeSchema,
@@ -306,6 +307,7 @@ function Field({
 }
 
 export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
+  useLogRender('AttributesEditor');
   if (!node || isNodeString(node)) return null;
   const data = node as NodeData<NodeDefaultAttribute>;
   const schema = getAttributeSchema(data?.type) ?? {};

package/src/DeviceMockFrame.tsx

@@ -1,29 +1,18 @@
 import React from 'react';
-import { Device } from './types/Device';
+import { useRenderStore } from './store';
+import { useLogRender } from './utils/useLogRender';
 
 type DeviceMockFrameProps = {
-  width: number;
-  height: number;
-  isRtl: boolean;
-  screenStyle: {
-    light: { backgroundColor: string; color: string };
-    dark: { backgroundColor: string; color: string };
-  };
-  theme: 'dark' | 'light';
   children: React.ReactNode;
-  device: Device;
 };
 
-export function DeviceMockFrame({
-  width,
-  height,
-  isRtl,
-  screenStyle,
-  theme,
-  children,
-  device,
-}: DeviceMockFrameProps) {
-  const isDark = theme === 'dark';
+export function DeviceMockFrame({ children }: DeviceMockFrameProps) {
+  useLogRender('DeviceMockFrame');
+  const { appConfig, device } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    device: s.device,
+  }));
+  const isDark = appConfig.theme === 'dark';
   const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
     0, 0, 0, 0,
   ];
@@ -58,22 +47,24 @@ export function DeviceMockFrame({
       <div
         className="stage"
         style={{
-          width: width,
-          height: height,
-          minWidth: width,
-          maxWidth: width,
-          minHeight: height,
-          maxHeight: height,
+          width: device.width,
+          height: device.height,
+          minWidth: device.width,
+          maxWidth: device.width,
+          minHeight: device.height,
+          maxHeight: device.height,
           overflow: 'hidden',
           position: 'relative',
           padding: 4,
-          direction: isRtl ? 'rtl' : 'ltr',
+          direction: appConfig.isRtl ? 'rtl' : 'ltr',
           backgroundColor:
-            theme === 'dark'
-              ? screenStyle.dark.backgroundColor
-              : screenStyle.light.backgroundColor,
+            appConfig.theme === 'dark'
+              ? appConfig.screenStyle.dark.backgroundColor
+              : appConfig.screenStyle.light.backgroundColor,
           color:
-            theme === 'dark' ? screenStyle.dark.color : screenStyle.light.color,
+            appConfig.theme === 'dark'
+              ? appConfig.screenStyle.dark.color
+              : appConfig.screenStyle.light.color,
           display: 'flex',
           flexDirection: 'column',
           borderRadius: device.radius ?? 0,

package/src/RenderPage.tsx

@@ -1,33 +1,18 @@
-import { Localication } from './types/PreviewConfig';
-import { TargetedScreenSize } from './types/TargetedScreenSize';
 import { DeviceMockFrame } from './DeviceMockFrame';
 import { Node } from './types/Node';
 import { RenderNode } from './build-components';
-import { Device } from './types/Device';
-import { useEffect } from 'react';
 import { useRenderStore } from './store';
+import { useLogRender } from './utils/useLogRender';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
 };
 type RenderPageProps = {
   data: Node;
-  isRtl: boolean;
-  screenStyle: ScreenStyle;
-  theme: 'dark' | 'light';
-  localication: Localication;
-  defaultLanguage?: string;
-  device: Device;
 };
-export function RenderPage({
-  data,
-  theme,
-  isRtl,
-  screenStyle,
-  localication,
-  defaultLanguage,
-  device,
-}: RenderPageProps) {
+export function RenderPage({ data }: RenderPageProps) {
+  useLogRender('RenderPage');
+  const { device } = useRenderStore((s) => ({ device: s.device }));
   const screenPreviewHeight = 800;
   // The calculation is correct for maintaining the aspect ratio of the target screen size.
   // It scales the width proportionally to a fixed preview height.
@@ -35,30 +20,8 @@ export function RenderPage({
   const height = screenPreviewHeight;
   const width = (height * device.width) / device.height;
 
-  useEffect(() => {
-    const {
-      setDevice,
-      setLocalication,
-      setDefaultLanguage,
-      setTheme,
-      setScreenStyle,
-    } = useRenderStore.getState();
-    setDevice(device);
-    setLocalication(localication);
-    setDefaultLanguage(defaultLanguage);
-    setTheme(theme);
-    setScreenStyle(screenStyle);
-  }, [device, localication, defaultLanguage, theme, screenStyle]);
-
   return (
-    <DeviceMockFrame
-      width={width}
-      height={height}
-      isRtl={isRtl}
-      screenStyle={screenStyle}
-      theme={theme}
-      device={device}
-    >
+    <DeviceMockFrame>
       <RenderNode node={data} />
     </DeviceMockFrame>
   );

package/src/assets/images/android.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 502.857 502.857" xml:space="preserve">
+<g>
+	<path style="fill:#57C927;" d="M115.428,155.433v217.664c0,17,10.208,30.336,27.704,30.336h22.84c-0.784,0-2.544,5.768-2.544,8.6
+		v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648c0-2.832-3.088-8.6-3.848-8.6h55.712
+		c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176c16.592,0,32.032-13.064,32.032-29.176v-61.648
+		c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336V155.433H113.596H115.428z"/>
+	<path style="fill:#57C927;" d="M59.428,158.977c-16.568,0-32,13.072-32,29.176v124.92c0,16.112,15.432,29.176,32,29.176
+		c16.56,0,32-13.064,32-29.176V188.161C91.428,172.049,75.988,158.977,59.428,158.977z"/>
+	<path style="fill:#57C927;" d="M320.3,42.057l5.584-8.192l5.592-8.096l12.456-18.2c1.56-2.256,0.912-5.264-1.384-6.744
+		c-2.272-1.512-5.416-0.88-6.904,1.36l-19.016,27.704l-5.72,8.344c-18.072-6.832-38.208-10.64-59.48-10.64
+		c-21.224,0-41.4,3.816-59.472,10.64l-5.688-8.336l-5.624-8.184l-13.36-19.512c-1.544-2.248-4.648-2.84-6.952-1.36
+		c-2.28,1.488-2.912,4.496-1.392,6.744l12.448,18.208l5.592,8.104l5.616,8.168c-42.432,19.24-71.144,57.368-71.144,97.368h279.96
+		C391.412,99.433,362.708,61.305,320.3,42.057z M191.436,100.593c-8.312,0-15.008-6.536-15.008-14.608s6.696-14.576,15.008-14.576
+		c8.288,0,15,6.504,15,14.576S199.732,100.593,191.436,100.593z M311.436,100.593c-8.304,0-15.016-6.536-15.016-14.608
+		s6.712-14.576,15.016-14.576c8.288,0,15,6.504,15,14.576S319.724,100.593,311.436,100.593z"/>
+</g>
+<path style="fill:#1CB71C;" d="M60.852,224.193c-12.472,0-25.424-11.768-33.424-30.432v119.32c0,16.112,15.432,29.176,32,29.176
+	c16.56,0,32-13.064,32-29.176V199.985C83.428,214.977,71.86,224.193,60.852,224.193z"/>
+<path style="fill:#57C927;" d="M443.428,158.977c-16.568,0-32,13.072-32,29.176v124.92c0,16.112,15.432,29.176,32,29.176
+	c16.56,0,32-13.064,32-29.176V188.161C475.428,172.049,459.988,158.977,443.428,158.977z"/>
+<g>
+	<path style="fill:#1CB71C;" d="M444.852,224.193c-12.472,0-25.424-11.768-33.424-30.432v119.32c0,16.112,15.432,29.176,32,29.176
+		c16.56,0,32-13.064,32-29.176V199.985C467.428,214.977,455.86,224.193,444.852,224.193z"/>
+	<path style="fill:#1CB71C;" d="M251.428,179.337c-63.28,0-120-7.32-136-17.712v211.472c0,17,10.208,30.336,27.704,30.336h22.84
+		c-0.784,0-2.544,5.768-2.544,8.6v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648
+		c0-2.832-3.088-8.6-3.848-8.6h55.712c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176
+		c16.592,0,32.032-13.064,32.032-29.176v-61.648c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336v-211.48
+		C371.428,172.009,314.716,179.337,251.428,179.337z"/>
+	<path style="fill:#1CB71C;" d="M326.436,85.977c0,8.072-6.712,14.608-15,14.608c-8.304,0-15.016-6.536-15.016-14.608
+		c0-4.376,2.008-8.24,5.136-10.912c-15.816-2.64-32.64-4.088-50.128-4.088s-34.304,1.448-50.128,4.088
+		c3.136,2.664,5.144,6.536,5.144,10.912c0,8.072-6.712,14.608-15,14.608c-8.312,0-15.008-6.536-15.008-14.608
+		c0-2.064,0.456-4.024,1.248-5.808c-23.984,6.304-44.592,15.504-60.144,26.808c-3.92,10.296-6.088,24.456-6.088,32.456h279.96
+		c0-8-2.168-22.152-6.08-32.44c-15.544-11.32-36.16-20.536-60.128-26.84C325.988,81.937,326.436,83.921,326.436,85.977z"/>
+</g>
+<path style="fill:#049E42;" d="M251.428,262.817c-53.896,0-104-10.632-136-28.056v138.336c0,17,10.208,30.336,27.704,30.336h22.84
+	c-0.784,0-2.544,5.768-2.544,8.6v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648
+	c0-2.832-3.088-8.6-3.848-8.6h55.712c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176
+	c16.592,0,32.032-13.064,32.032-29.176v-61.648c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336V234.761
+	C355.428,252.193,305.324,262.817,251.428,262.817z"/>
+</svg>

package/src/assets/images/apple.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 496.412 496.412" xml:space="preserve">
+<path d="M317.222,80.584C333.414,59.696,345.686,30.152,341.246,0c-26.472,1.84-57.384,18.768-75.432,40.832
+	c-16.456,20-29.976,49.728-24.688,78.608C270.054,120.344,299.91,103.008,317.222,80.584z"/>
+<path style="fill:#1B546B;" d="M445.838,166.544c-25.4-31.872-61.12-50.344-94.848-50.344c-44.512,0-63.352,21.312-94.264,21.312
+	c-31.896,0-56.12-21.248-94.624-21.248c-37.832,0-78.112,23.12-103.64,62.64C22.574,234.576,28.694,339.2,86.894,428.336
+	c20.808,31.904,48.592,67.744,84.952,68.072c32.36,0.32,41.488-20.752,85.336-20.992c43.832-0.256,52.16,21.264,84.456,20.896
+	c36.384-0.288,65.712-40.016,86.512-71.92c14.912-22.848,20.48-34.376,32.056-60.184
+	C376.014,332.184,362.518,212.488,445.838,166.544z"/>
+<path d="M394.774,228.08c-63.632,51.52-153.592,83.712-253.44,83.712c-35.776,0-70.288-4.144-102.768-11.808
+	c5.496,41.808,21.16,86.736,48.336,128.344c20.808,31.904,48.592,67.744,84.952,68.072c32.36,0.32,41.488-20.752,85.336-20.992
+	c43.832-0.256,52.16,21.264,84.456,20.896c36.384-0.288,65.712-40.016,86.512-71.92c14.912-22.848,20.48-34.376,32.056-60.184
+	C402.966,342.44,378.454,280.176,394.774,228.08z"/>
+</svg>

package/src/assets/samples/carousel-sample.json

@@ -1,9 +1,8 @@
 {
   "name": "carousel-sample",
   "version": "1.0.0",
-  "previewConfig": {
-    "theme": "light",
-    "screenSize": { "width": 375, "height": 812 }
+  "appConfig": {
+    "theme": "light"
   },
   "data": {
     "type": "carouselProvider",