@developer_tribe/react-builder 0.1.32 → 1.0.2

package/dist/mockOS/components/MockLaunchScreenComponent.d.ts

@@ -0,0 +1,6 @@
+interface MockLaunchScreenComponentProps {
+    appName: string;
+    onAppClick: () => void;
+}
+export declare function MockLaunchScreenComponent({ appName, onAppClick, }: MockLaunchScreenComponentProps): import("react/jsx-runtime").JSX.Element;
+export default MockLaunchScreenComponent;

package/dist/mockOS/components/MockOSRouter.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface MockOSRouterProps {
+    children?: ReactNode;
+    childrenBelongTo?: 'launchscreen' | 'home' | 'onboard' | 'subscription';
+    appName?: string;
+}
+export declare function MockOSRouter({ children, childrenBelongTo, appName, }: MockOSRouterProps): import("react/jsx-runtime").JSX.Element;
+export default MockOSRouter;

package/dist/mockOS/components/PermissionModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PermissionType } from '../managers/mockPermissionManager';
+interface PermissionModalProps {
+    permission: PermissionType | string;
+    onAllow: () => void;
+    onDeny: () => void;
+}
+export declare const PermissionModal: React.FC<PermissionModalProps>;
+export {};

package/dist/mockOS/context/MockOSContext.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import type { PermissionType } from '../managers/mockPermissionManager';
+import type { Device } from '../../types/Device';
+export type RouteType = 'launchscreen' | 'home' | 'onboard' | 'subscription';
+export interface RouteStackItem {
+    route: RouteType;
+    timestamp: number;
+}
+export interface MockOSContextValue {
+    isEnabled: boolean;
+    permission: PermissionType | string | null;
+    setPermission: (permission: PermissionType | string | null) => void;
+    currentRoute: RouteType;
+    navigation: (route: RouteType) => void;
+    goBack: () => boolean;
+    navigationStack: RouteStackItem[];
+}
+export declare const useMockOSContext: () => MockOSContextValue | null;
+interface MockOSProviderProps {
+    children: ReactNode;
+    defaultRoute?: RouteType;
+    appName?: string;
+    statusBarHeight: number;
+    statusBarBackgroundColor: string;
+    statusBarPlatform: Device['platform'];
+    statusBarIsDark: boolean;
+    navBarHeight: number;
+    navBarBackgroundColor: string;
+    navBarPlatform: Device['platform'];
+    navBarNavigationBarType: Device['navigationBarType'];
+    navBarIsDark: boolean;
+    insetLeft: number;
+    insetRight: number;
+}
+export declare function MockOSProvider({ children, defaultRoute, appName, statusBarHeight, statusBarBackgroundColor, statusBarPlatform, statusBarIsDark, navBarHeight, navBarBackgroundColor, navBarPlatform, navBarNavigationBarType, navBarIsDark, insetLeft, insetRight, }: MockOSProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/mockOS/hooks/useMockNavigation.d.ts

@@ -0,0 +1,3 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+import { MockNavigationManager } from '../managers/navigationManager';
+export declare function useMockNavigation(context: MockOSContextValue | null): MockNavigationManager;

package/dist/mockOS/hooks/useMockPermission.d.ts

@@ -0,0 +1,3 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+import { MockPermissionManager } from '../managers/mockPermissionManager';
+export declare function useMockPermission(context: MockOSContextValue | null): MockPermissionManager;

package/dist/mockOS/index.d.ts

@@ -0,0 +1,9 @@
+export { MockOSProvider, useMockOSContext } from './context/MockOSContext';
+export type { MockOSContextValue, RouteType, RouteStackItem, } from './context/MockOSContext';
+export { MockOSRouter } from './components/MockOSRouter';
+export { MockPermissionManager } from './managers/mockPermissionManager';
+export type { PermissionType, PermissionStatus, } from './managers/mockPermissionManager';
+export { MockNavigationManager } from './managers/navigationManager';
+export type { NavigationDestination, NavigationStackItem, } from './managers/navigationManager';
+export { useMockPermission } from './hooks/useMockPermission';
+export { useMockNavigation } from './hooks/useMockNavigation';

package/dist/mockOS/managers/mockPermissionManager.d.ts

@@ -0,0 +1,10 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+export type PermissionType = 'camera' | 'microphone' | 'location' | 'notifications' | 'photos' | 'contacts' | 'att';
+export type PermissionStatus = 'granted' | 'denied' | 'not-determined';
+export declare class MockPermissionManager {
+    private context;
+    constructor(context: MockOSContextValue | null);
+    requestPermission(permission: PermissionType | string): PermissionStatus;
+    checkPermission(permission: PermissionType | string): PermissionStatus;
+    openSettings(): void;
+}

package/dist/mockOS/managers/navigationManager.d.ts

@@ -0,0 +1,17 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+export type NavigationDestination = 'home' | 'subscriptions' | 'launchApp' | 'settings' | 'profile';
+export interface NavigationStackItem {
+    destination: NavigationDestination;
+    timestamp: number;
+}
+export declare class MockNavigationManager {
+    private context;
+    private stack;
+    constructor(context: MockOSContextValue | null);
+    goToHome(): void;
+    goToSubscriptions(): void;
+    goToLaunchApp(): void;
+    goBack(): boolean;
+    getStack(): NavigationStackItem[];
+    clearStack(): void;
+}

package/dist/modals/AddComponentModal.d.ts

@@ -0,0 +1,8 @@
+type AddComponentModalProps = {
+    allowedChildTypes: string[];
+    parentType?: string | null;
+    onSelect: (type: string) => void;
+    onClose: () => void;
+};
+export declare function AddComponentModal({ allowedChildTypes, parentType, onSelect, onClose, }: AddComponentModalProps): import("react/jsx-runtime").JSX.Element;
+export default AddComponentModal;

package/dist/modals/ColorModal.d.ts

@@ -0,0 +1,9 @@
+type ColorModalProps = {
+    value?: string;
+    projectColors?: string[];
+    onSelect: (color: string) => void;
+    onClose: () => void;
+    onClear: () => void;
+};
+export declare function ColorModal({ value, projectColors, onSelect, onClose, onClear, }: ColorModalProps): import("react/jsx-runtime").JSX.Element;
+export default ColorModal;

package/dist/modals/DeviceSelectorModal.d.ts

@@ -0,0 +1,9 @@
+import { Device } from '../types/Device';
+type DeviceSelectorModalProps = {
+    devices: Device[];
+    selectedDevice: Device | null;
+    onSelect: (device: Device) => void;
+    onClose: () => void;
+};
+export declare function DeviceSelectorModal({ devices, selectedDevice, onSelect, onClose, }: DeviceSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+export default DeviceSelectorModal;

package/dist/modals/LocalicationModal.d.ts

@@ -0,0 +1,8 @@
+import { Localication } from '../types/PreviewConfig';
+type LocalicationModalProps = {
+    data: Localication;
+    onChange: (next: Localication) => void;
+    onClose: () => void;
+};
+export declare function LocalicationModal({ data, onChange, onClose, }: LocalicationModalProps): import("react/jsx-runtime").JSX.Element;
+export default LocalicationModal;

package/dist/modals/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type ModalProps = {
+    onClose: () => void;
+    ariaLabelledBy?: string;
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+};
+export declare function Modal({ onClose, ariaLabelledBy, children, className, contentClassName, closeOnOverlayClick, closeOnEsc, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/modals/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Modal } from './Modal';
+export { AddComponentModal } from './AddComponentModal';
+export { DeviceSelectorModal } from './DeviceSelectorModal';
+export { ColorModal } from './ColorModal';
+export { LocalicationModal } from './LocalicationModal';

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';
+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,22 @@
 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;
+    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;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;-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-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 #6b7280;border-radius:8px;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:hsl(220,8.9361702128%,36.0784313725%);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 10%;min-width:0;border-right:1px solid #e5e7eb;overflow:auto}.split-right{position:relative;flex:1 1 45%;max-height:calc(100vh + 60px);padding:16px;padding-bottom:120px;overflow:auto}.split-right__controls{position:sticky;top:12px;z-index:2;display:flex;margin-bottom:12px}.split-third{flex:1 1 25%;min-width:450px;border-right:1px solid #e5e7eb;overflow:auto;max-height:calc(100vh - 120px)}.split-right-background{position:absolute;top:0;left:0;right:0;bottom:0;height:calc(100vh + 60px);background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto;opacity:.2;z-index:0;pointer-events:none}.stage-wrapper{display:flex;justify-content:center;background:rgba(0,0,0,0);padding:16px;position:relative;z-index:1}.stage{background:#fff;border:1px solid #e5e7eb;border-radius:4px;border:1px solid #e5e7eb;overflow:hidden}.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:flex;align-items:center;gap:12px;font-size:12px;color:#6b7280}.breadcrumb__back{display:inline-flex;align-items:center;gap:4px;padding:0;border:none;background:none;color:#111827;font-weight:600;cursor:pointer;transition:color .2s ease}.breadcrumb__back:hover,.breadcrumb__back:focus-visible{color:#2563eb;outline:none}.breadcrumb__back-icon{font-size:14px;line-height:1}.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__item--clickable{cursor:pointer}.breadcrumb__separator{color:#e5e7eb;margin:0 4px}.breadcrumb__link{color:#111827;text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:#6b7280}.device-status-bar{position:relative;z-index:100}.device-navigation-bar{position:relative;z-index:100}.builder{display:flex;flex-direction:column;gap:12px}.builder__breadcrumbs{display:flex;flex-direction:row;gap:8px}.builder__breadcrumb{color:#6b7280;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;background:#2563eb;color:#fff}.builder__button-label{font-size:13px;font-weight:600}.builder__button-condition{font-size:10px}.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:#6b7280;font-size:12px}.editor-controls{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}.editor-section{background:#fff;border:1px solid #e5e7eb;border-radius:8px;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:8px;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-checkbox{display:inline-flex;flex-direction:column;gap:4px}.builder-checkbox__label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:#111827;font-weight:600;position:relative;user-select:none}.builder-checkbox__native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.builder-checkbox__control{width:20px;height:20px;border-radius:6px;border:2px solid #e5e7eb;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;box-shadow:0 2px 6px rgba(15,23,42,.12)}.builder-checkbox__control::after{content:"";width:6px;height:12px;border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0);transform:rotate(45deg) scale(0);transform-origin:center;transition:transform .2s ease,border-color .2s ease}.builder-checkbox__label:hover .builder-checkbox__control{transform:translateY(-1px)}.builder-checkbox__native:focus-visible+.builder-checkbox__control{box-shadow:0 0 0 3px rgba(79,70,229,.3)}.builder-checkbox__native:checked+.builder-checkbox__control{background:linear-gradient(135deg, #1f2937, #4f46e5);border-color:rgba(0,0,0,0);box-shadow:0 6px 14px rgba(79,70,229,.35)}.builder-checkbox__native:checked+.builder-checkbox__control::after{border-color:#fff;transform:rotate(45deg) scale(1)}.builder-checkbox__text{font-size:14px;line-height:1.4}.builder-checkbox__helper{font-size:12px;color:#6b7280;margin-left:30px}.builder-checkbox--disabled{opacity:.6}.builder-checkbox--disabled .builder-checkbox__label{cursor:not-allowed}.editor-tabs{display:flex;gap:8px;border-bottom:1px solid #e5e7eb}.editor-tab{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;display:inline-flex;align-items:center;white-space:nowrap}.editor-tab__label{display:inline-flex;align-items:center;white-space:nowrap;line-height:1.2;font-size:clamp(.85rem,.9rem + .2vw,1rem)}.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:#f3f4f6;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}.debug-button{min-width:auto;height:auto;padding:4px 12px;font-size:12px;line-height:1.2;border-radius:999px;background:hsla(0,0%,100%,.95);border-color:rgba(15,23,42,.15);box-shadow:0 2px 4px rgba(15,23,42,.08)}.debug-button:hover{background:#fff;border-color:rgba(15,23,42,.3)}.editor-button:disabled{opacity:.6;cursor:default}.editor-save-button,.editor-save-previewconfig-button{color:#000;font-weight:600;font-size:12px}.builder__add-button{width:100%;margin-top:12px;min-height:52px;border-style:dashed;border-color:#cbd5f5;background:#f8fafc;color:#0f172a;font-weight:600;gap:10px;transition:border-color .2s ease,background .2s ease,color .2s ease}.builder__add-button-icon{display:inline-flex;width:28px;height:28px;border-radius:999px;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-size:18px;line-height:1}.builder__add-button:hover{border-color:#94a3b8;background:#eef2ff;color:#111827}.attributes-editor__component-meta{margin-bottom:20px;padding:12px 16px;border-radius:8px;border:1px solid #eee;background:#f8f8f8}.attributes-editor__component-title,.attributes-editor__field-label{margin:0;font-weight:700}.attributes-editor__component-title{font-size:18px;text-transform:capitalize}.attributes-editor__component-description{margin:6px 0 0;font-size:14px;color:#555}.attributes-editor__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.attributes-editor__tab-button{padding:6px 12px;border-radius:6px;border:1px solid #ddd;background:#fff;color:#222;cursor:pointer;font-weight:600;transition:background .15s ease,color .15s ease}.attributes-editor__tab-button:disabled{opacity:.4;cursor:default}.attributes-editor__tab-button--active{background:#222;color:#fff}.attributes-editor__field-wrapper{position:relative;margin-bottom:16px;display:flex;flex-direction:column;gap:4px;width:100%}.attributes-editor__field-wrapper--boolean{flex-direction:row;align-items:center;gap:8px}.attributes-editor__field-label{font-size:14px}.attributes-editor__empty-state{padding:8px;opacity:.7}.attributes-editor__size-grid{display:flex;gap:12px;flex-wrap:wrap}.attributes-editor__size-grid-item{flex:1;min-width:140px;max-width:220px}.attributes-editor__size-field{display:flex;gap:6px;align-items:center;width:100%}.attributes-editor__size-field-input{flex:1;min-width:0;height:36px;line-height:36px}.attributes-editor__size-field-select{flex:0 0 72px;min-width:60px;height:36px;line-height:36px;padding-inline:6px}.field-info-tooltip{position:relative}.field-info-tooltip__trigger{position:absolute;top:0;right:0;font-size:11px;line-height:1.2;color:#666;cursor:pointer;font-weight:600;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;background:rgba(0,0,0,0);border:none;padding:0;font-family:inherit;display:inline-flex;align-items:center;gap:4px}.field-info-tooltip__trigger:focus-visible{outline:2px solid rgba(17,24,39,.4);outline-offset:2px}.field-info-tooltip__bubble{position:absolute;top:50%;right:100%;transform:translate(-8px, -50%);background:#111;color:#fff;padding:6px 10px;border-radius:4px;font-size:12px;line-height:1.4;width:220px;text-align:left;box-shadow:0 6px 16px rgba(0,0,0,.2);z-index:20;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.field-info-tooltip__bubble--visible{opacity:1;transform:translate(-12px, -50%)}.special-category-section{border:1px solid #e0e0e0;border-radius:8px;padding:12px;margin-bottom:16px;background:#fdfdfd}.special-category-section__header{display:flex;justify-content:space-between;align-items:center;gap:8px}.special-category-section__title{margin:0;font-weight:700}.special-category-section__toggle{border:1px solid #ddd;background:#fff;color:#222;border-radius:4px;padding:4px 10px;cursor:pointer;font-weight:600;transition:background .15s ease,color .15s ease,border-color .15s ease}.special-category-section__toggle[data-active=true]{background:#222;color:#fff;border-color:#222}.special-category-section__description{margin:8px 0 0;color:#666;font-size:13px;padding-bottom:16px}.special-category-section__fields{display:grid;gap:8px;margin-top:12px}.special-category-section__fields--box{grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-areas:"top top" "left right" "bottom bottom"}.special-category-section__fields--box>.field-info-tooltip:has([data-field-slot=top]){grid-area:top}.special-category-section__fields--box>.field-info-tooltip:has([data-field-slot=left]){grid-area:left}.special-category-section__fields--box>.field-info-tooltip:has([data-field-slot=right]){grid-area:right}.special-category-section__fields--box>.field-info-tooltip:has([data-field-slot=bottom]){grid-area:bottom}.special-category-section__field{min-width:0}.special-category-section__placeholder{margin-top:8px;font-style:italic;opacity:.7}.mockos-router{width:100%;height:100%;position:relative}.mockos-screen{width:100%;height:100%}.mockos-screen--center{display:flex;flex-direction:column;align-items:center;justify-content:center}.mockos-screen--launchscreen{background-color:#000}.mockos-screen--home{padding:20px;background-color:#f5f5f5}.mockos-screen--onboard{padding:20px;background-color:#fff}.mockos-screen--subscription{padding:20px;background-color:#fff}.mockos-screen__title{font-size:32px;font-weight:bold;color:#000;margin-bottom:16px}.mockos-screen__subtitle{font-size:16px;color:#666}.mockos-screen__heading{font-size:24px;font-weight:bold;margin-bottom:20px}.mockos-screen__text{font-size:16px;color:#333;margin-bottom:12px}.mockos-screen__plan{padding:16px;border-radius:8px;text-align:center;margin-bottom:12px}.mockos-screen__plan--premium{background-color:#007aff;color:#fff}.mockos-screen__plan--basic{background-color:#e5e5e5;color:#333}.mockos-launcher{width:100%;height:100%;padding:40px 20px;display:flex;flex-direction:column}.mockos-launcher__grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;padding:20px}.mockos-launcher__app{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(0,0,0,0);border:none;cursor:pointer;padding:8px;border-radius:12px;transition:background-color .2s}.mockos-launcher__app:hover{background-color:hsla(0,0%,100%,.1)}.mockos-launcher__app:active{transform:scale(0.95)}.mockos-launcher__app-icon{width:60px;height:60px;border-radius:13px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3)}.mockos-launcher__app-icon svg{width:100%;height:100%;display:block}.mockos-launcher__app-name{font-size:12px;color:#fff;text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal{position:fixed;inset:0;z-index:10000}.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:0}.modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);width:min(960px,100vw - 40px);max-height:calc(100vh - 120px);display:flex;flex-direction:column;overflow:hidden;z-index:1}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e5e7eb;gap:12px}.modal__title{margin:0;font-size:16px;font-weight:700}.add-component-modal{display:flex;flex-direction:column;height:100%}.add-component-modal__body{flex:1;overflow-y:auto;padding-bottom:24px}.add-component-modal__section{padding:0 24px;margin-bottom:24px}.add-component-modal__section:first-of-type{margin-top:24px}.add-component-modal__section-title{font-size:16px;font-weight:600;margin-bottom:12px}.add-component-modal__toggle{display:flex;align-items:center;gap:12px;margin:0 24px 24px;padding:12px 0;font-weight:500;user-select:none}.add-component-modal__toggle input{width:18px;height:18px}.add-component-modal__group{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 10px 20px rgba(15,23,42,.05)}.add-component-modal__group-title{font-size:14px;font-weight:600;color:#6b7280;margin-bottom:12px}.add-component-modal__grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:12px;overflow:auto}.add-component-modal__card{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#f3f4f6;cursor:pointer;text-align:left;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;color:inherit}.add-component-modal__card:hover{border-color:#2563eb;box-shadow:0 10px 25px rgba(37,99,235,.15);transform:translateY(-2px)}.add-component-modal__thumbnail{width:100%;aspect-ratio:4/3;border-radius:8px;background:#f3f4f6;border:1px dashed #e5e7eb;display:flex;align-items:center;justify-content:center;color:#2563eb;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.add-component-modal__title{font-weight:600;color:#111827}.add-component-modal__empty{margin:12px 0;padding:16px;border:1px dashed #e5e7eb;border-radius:10px;color:#6b7280;font-size:14px;text-align:center}.device-selector-modal{padding-bottom:24px}.device-selector-modal__grid{padding:24px;display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:12px;overflow:auto}.device-selector-modal__grid .editor-device-button{height:80px;min-width:unset}.color-modal{width:min(520px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.color-modal__selected{display:flex;align-items:center;justify-content:space-between;background:#f3f4f6;border-radius:8px;padding:12px 16px}.color-modal__selected-info{display:flex;align-items:center;gap:12px}.color-modal__selected-preview{width:32px;height:32px;border-radius:6px;border:1px solid rgba(0,0,0,.1)}.color-modal__selected-label{margin:0;font-size:12px;color:#6b7280}.color-modal__selected-value{margin:0;font-weight:600}.color-modal__link-button{border:none;background:none;color:#2563eb;font-weight:600;font-size:13px;cursor:pointer;padding:4px 8px}.color-section{display:flex;flex-direction:column;gap:8px}.color-section__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.color-section__title{margin:0;font-weight:600}.color-section__swatches{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:8px}.color-section__empty{margin:0;font-size:12px;color:#6b7280}.color-modal__swatch{border:1px solid #e5e7eb;border-radius:8px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.color-modal__swatch--active{border-color:#111827;box-shadow:0 0 0 1px #111827 inset}.color-modal__swatch-preview{width:100%;height:32px;border-radius:6px}.color-modal__swatch-preview--light{border:1px solid rgba(0,0,0,.1)}.color-modal__swatch-label{font-size:12px;font-weight:600;color:#111827}.color-modal__swatch-value{font-size:11px;color:#6b7280}.color-modal__input{display:none}.localication-modal__content{width:calc(100vw - 32px);height:calc(100vh - 32px);max-width:1600px;max-height:calc(100vh - 32px);padding:0;display:flex;flex-direction:column}.localication-modal__header{padding:16px 24px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:16px}.localication-modal__header-main{flex:1;display:flex;flex-direction:column;gap:4px}.localication-modal__description{margin:0;font-size:13px;color:#6b7280}.localication-modal__body{flex:1;min-height:0;padding:24px;display:flex;flex-direction:column;gap:16px;overflow:auto}.localication-modal__editor{flex:1;min-height:0;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;background:#f3f4f6}.localication-modal__json-editor{height:100%;width:100%;display:block;padding:12px;overflow:auto}.modal--scrollable .localication-modal__content{overflow:hidden}.modal--scrollable .localication-modal__body{overflow:auto}.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);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{flex-wrap:wrap;margin-right:0;height:50px;margin:0 auto}.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;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/patterns.d.ts

@@ -1,4 +1,26 @@
 import type { NodeDefaultAttribute } from '../types/Node';
+export type AttributeMeta = {
+    label?: string;
+    description?: string;
+    category?: 'style' | 'container' | 'other' | string;
+    specialCategory?: 'padding' | 'margin' | 'offset' | null | string;
+    sort?: number;
+    preferedScale?: 's' | 'vs' | 'f' | '%' | '' | string;
+};
+export type SpecialCategoryMeta = {
+    label?: string;
+    description?: string;
+    category?: 'style' | 'container' | 'other' | string;
+    sort?: number;
+};
+type PatternMeta = {
+    label?: string;
+    description?: string;
+    attributes?: Record<string, AttributeMeta>;
+    specialCategories?: Record<string, SpecialCategoryMeta>;
+    desiredParent?: string[];
+    desiredChildren?: string[];
+};
 type Pattern = {
     schemaVersion: number;
     allowUnknownAttributes: boolean;
@@ -10,9 +32,11 @@ type Pattern = {
     };
     defaults?: NodeDefaultAttribute;
     types?: Record<string, Record<string, string | string[]>>;
+    meta?: PatternMeta;
 };
 export declare function getPatternByType(type?: string | null): Pattern | undefined;
 export declare function getAttributeSchema(type?: string | null): Record<string, string | string[]> | undefined;
+export declare function getAttributeMeta(type?: string | null): Record<string, AttributeMeta> | undefined;
 /** Returns defaults block (if any) for a given component type */
 export declare function getDefaultsForType(type?: string | null): NodeDefaultAttribute | undefined;
 /**

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.32",
+  "version": "1.0.2",
   "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",
+    "@rollup/plugin-url": "^8.0.2",
     "@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",
@@ -58,7 +58,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"
@@ -67,8 +77,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

@@ -4,7 +4,13 @@ import { ensureDir } from './ensureDir.js';
 import { formatWithPrettier } from './formatWithPrettier.js';
 
 // Helpers
-const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
+const isPrimitive = t =>
+  t === 'string' ||
+  t === 'number' ||
+  t === 'boolean' ||
+  t === 'color' ||
+  t === 'size';
+const toTsPrimitive = t => (t === 'color' || t === 'size' ? 'string' : t);
 const getArrayItem = t =>
   typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
 // Convert a property name like "animation" or "on-press" to PascalCase
@@ -24,9 +30,11 @@ function tsTypeFromAttributeType(
   propertyName,
   registerEnumAlias
 ) {
+  if (attrType === 'never') return 'never';
   if (attrType === 'string') return 'string';
   if (attrType === 'number') return 'number';
   if (attrType === 'boolean') return 'boolean';
+  if (attrType === 'color') return 'string';
   if (Array.isArray(attrType)) {
     const rawMembers = attrType;
     if (rawMembers.length === 0) return 'string';
@@ -48,11 +56,11 @@ function tsTypeFromAttributeType(
   if (typeof attrType === 'string') {
     const item = getArrayItem(attrType);
     if (item) {
-      if (isPrimitive(item)) return `${item}[]`;
+      if (isPrimitive(item)) return `${toTsPrimitive(item)}[]`;
       // Custom type array
       return `${item}Generated[]`;
     }
-    if (isPrimitive(attrType)) return attrType;
+    if (isPrimitive(attrType)) return toTsPrimitive(attrType);
     // Custom object type
     return `${attrType}Generated`;
   }