@developer_tribe/react-builder 1.0.3 → 1.0.5

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

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

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

@@ -1,21 +1,8 @@
 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;
+import { type MockOSContextValue, type RouteStackItem, type RouteType, useMockOSContext } from './MockOSContextBase';
+export type { RouteType, RouteStackItem, MockOSContextValue };
+export { useMockOSContext };
 interface MockOSProviderProps {
     children: ReactNode;
     defaultRoute?: RouteType;
@@ -32,5 +19,4 @@ interface MockOSProviderProps {
     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 {};
+export declare function MockOSProvider({ children, defaultRoute, appName, statusBarHeight, statusBarBackgroundColor, statusBarPlatform, statusBarIsDark, navBarHeight, navBarBackgroundColor, navBarPlatform, navBarNavigationBarType, navBarIsDark, }: MockOSProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { PermissionType } from '../managers/mockPermissionManager';
+export type RouteType = 'launchscreen' | 'app' | '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[];
+}
+/**
+ * Keep this module "pure" (no imports from mockOS/components or app components),
+ * so consumers can import `useMockOSContext` without creating circular deps in bundlers.
+ */
+export declare const MockOSContext: import("react").Context<MockOSContextValue | null>;
+export declare const useMockOSContext: () => MockOSContextValue | null;

package/dist/mockOS/index.d.ts

@@ -1,5 +1,6 @@
-export { MockOSProvider, useMockOSContext } from './context/MockOSContext';
-export type { MockOSContextValue, RouteType, RouteStackItem, } from './context/MockOSContext';
+export { MockOSProvider } from './context/MockOSContext';
+export { useMockOSContext } from './context/MockOSContextBase';
+export type { MockOSContextValue, RouteType, RouteStackItem, } from './context/MockOSContextBase';
 export { MockOSRouter } from './components/MockOSRouter';
 export { MockPermissionManager } from './managers/mockPermissionManager';
 export type { PermissionType, PermissionStatus, } from './managers/mockPermissionManager';

package/dist/modals/BenefitEditModal.d.ts

@@ -0,0 +1,13 @@
+import type { PaywallBenefitValue } from '../paywall/types/benefits';
+type BenefitEditModalProps = {
+    benefitKey: string;
+    benefitValue: PaywallBenefitValue;
+    index: number;
+    onSave: (next: {
+        key: string;
+        value: PaywallBenefitValue;
+    }) => void;
+    onClose: () => void;
+};
+export declare function BenefitEditModal({ benefitKey, benefitValue, index, onSave, onClose, }: BenefitEditModalProps): import("react/jsx-runtime").JSX.Element;
+export default BenefitEditModal;

package/dist/modals/BenefitPresetsModal.d.ts

@@ -0,0 +1,9 @@
+import type { PaywallBenefits } from '../paywall/types/benefits';
+type BenefitPresetsModalProps = {
+    current: PaywallBenefits;
+    onReplace: (next: PaywallBenefits) => void;
+    onMerge: (next: PaywallBenefits) => void;
+    onClose: () => void;
+};
+export declare function BenefitPresetsModal({ current, onReplace, onMerge, onClose, }: BenefitPresetsModalProps): import("react/jsx-runtime").JSX.Element;
+export default BenefitPresetsModal;

package/dist/modals/IconPickerModal.d.ts

@@ -0,0 +1,9 @@
+import { type IconsType } from '../types/Icons';
+type IconPickerModalProps = {
+    value?: IconsType;
+    onSelect: (icon: IconsType) => void;
+    onClose: () => void;
+    onClear?: () => void;
+};
+export declare function IconPickerModal({ value, onSelect, onClose, onClear, }: IconPickerModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modals/MockableFeatureModal.d.ts

@@ -0,0 +1,6 @@
+type MockableFeatureModalProps = {
+    featureKey: string;
+    onClose: () => void;
+};
+export declare function MockableFeatureModal({ featureKey, onClose, }: MockableFeatureModalProps): import("react/jsx-runtime").JSX.Element;
+export default MockableFeatureModal;

package/dist/modals/ProductEditModal.d.ts

@@ -0,0 +1,9 @@
+import type { Product } from '../paywall/types/paywall-types';
+type ProductEditModalProps = {
+    product: Product;
+    index: number;
+    onSave: (patch: Partial<Product>) => void;
+    onClose: () => void;
+};
+export declare function ProductEditModal({ product, index, onSave, onClose, }: ProductEditModalProps): import("react/jsx-runtime").JSX.Element;
+export default ProductEditModal;

package/dist/modals/ProductPresetsModal.d.ts

@@ -0,0 +1,9 @@
+import type { Product } from '../paywall/types/paywall-types';
+type ProductPresetsModalProps = {
+    current: Product[];
+    onReplace: (next: Product[]) => void;
+    onAppend: (next: Product[]) => void;
+    onClose: () => void;
+};
+export declare function ProductPresetsModal({ current, onReplace, onAppend, onClose, }: ProductPresetsModalProps): import("react/jsx-runtime").JSX.Element;
+export default ProductPresetsModal;

package/dist/modals/index.d.ts

@@ -2,4 +2,10 @@ export { default as Modal } from './Modal';
 export { AddComponentModal } from './AddComponentModal';
 export { DeviceSelectorModal } from './DeviceSelectorModal';
 export { ColorModal } from './ColorModal';
+export { IconPickerModal } from './IconPickerModal';
 export { LocalicationModal } from './LocalicationModal';
+export { MockableFeatureModal } from './MockableFeatureModal';
+export { ProductEditModal } from './ProductEditModal';
+export { ProductPresetsModal } from './ProductPresetsModal';
+export { BenefitEditModal } from './BenefitEditModal';
+export { BenefitPresetsModal } from './BenefitPresetsModal';

package/dist/pages/ProjectPage.d.ts

@@ -1,4 +1,4 @@
-import { Project, ProjectColors } from '..';
+import type { Project, ProjectColors } from '../types/Project';
 import { AppConfig } from '../types/PreviewConfig';
 import type { LogLevel } from '../types/Project';
 export type ProjectPageProps = {
@@ -7,5 +7,6 @@ export type ProjectPageProps = {
     appConfig?: AppConfig;
     logLevel?: LogLevel;
     projectColors?: ProjectColors;
+    name: string;
 };
-export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, projectColors, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, projectColors, name, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { Node } from '../..';
+import type { Node } from '../../types/Node';
 type BuilderPanelProps = {
     data: Node;
     setData: (data: Node) => void;

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

@@ -1,7 +1,8 @@
-import { Node } from '../..';
+import React from 'react';
+import type { Node } from '../../types/Node';
 type SideToolProps = {
     data: Node;
-    setData: (data: Node) => void;
+    setData: React.Dispatch<React.SetStateAction<Node>>;
 };
 export declare function SideTool({ data, setData }: SideToolProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/paywall/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { usePaywallCounter } from './usePaywallCounter';
+export { useCloseStatusPaywall } from './useCloseStatusPaywall';
+export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
+export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
+export { useDiscountRate } from './useDiscountRate';

package/dist/paywall/hooks/useCalculateLocalizedPrice.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export declare function useCalculateLocalizedPrice(): string;

package/dist/paywall/hooks/useCarouselOptionsSeperator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ *
+ * NOTE: name kept as `Seperator` to match existing external API usage.
+ */
+export declare function useCarouselOptionsSeperator(): string;

package/dist/paywall/hooks/useCloseStatusPaywall.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export declare function useCloseStatusPaywall(): boolean;

package/dist/paywall/hooks/useDiscountRate.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export declare function useDiscountRate(): number;

package/dist/paywall/hooks/usePaywallCounter.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export declare function usePaywallCounter(): number;

package/dist/paywall/types/benefits.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Benefits are a simple key/value map used by paywall UIs to show feature bullets,
+ * trial metadata, headlines, etc.
+ *
+ * We keep the value type primitive so it serializes cleanly and is easy to mock.
+ */
+export type PaywallBenefitValue = string | number | boolean;
+export type PaywallBenefits = Record<string, PaywallBenefitValue>;
+export type PaywallBenefitEntry = {
+    key: string;
+    value: PaywallBenefitValue;
+};
+export declare function benefitMapToEntries(map: PaywallBenefits | undefined): PaywallBenefitEntry[];
+export declare function benefitEntriesToMap(entries: Array<PaywallBenefitEntry | null | undefined> | undefined): PaywallBenefits;

package/dist/paywall/types/paywall-types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Simple paywall-related types.
+ *
+ * We keep this intentionally small and runtime-agnostic.
+ *
+ * Product fields are based on the common shape returned by `react-native-iap`
+ * calls like `getProducts()` / `getSubscriptions()`.
+ * See: `https://www.npmjs.com/package/react-native-iap`
+ */
+export type { PaywallBenefits, PaywallBenefitValue } from './benefits';
+/**
+ * Minimal "product" representation (compatible with `react-native-iap` product-ish objects).
+ *
+ * Note: `react-native-iap` has slightly different fields per platform/product type.
+ * This is the common subset most paywalls need.
+ */
+export interface Product {
+    /** iOS: `productId`, Android: `productId` */
+    productId: string;
+    /** Display name / title from the store (when available). */
+    title?: string;
+    /** Description from the store (when available). */
+    description?: string;
+    /**
+     * Localized formatted price (e.g. "$4.99", "€9,99").
+     * In `react-native-iap` this is typically `localizedPrice`.
+     */
+    localizedPrice?: string;
+    /**
+     * Raw price string from the store (often numeric string).
+     * In `react-native-iap` this is typically `price`.
+     */
+    price?: string;
+    /** Currency code (e.g. "USD", "EUR"). */
+    currency?: string;
+}
+/**
+ * A simple paywall model you can store/serialize.
+ */
+export interface PaywallModel {
+    product: Product[];
+    benefits: import('./benefits').PaywallBenefits;
+}

package/dist/store.d.ts

@@ -2,11 +2,17 @@ import type { Device } from './types/Device';
 import { type AppConfig } from './types/PreviewConfig';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
+import type { Product } from './paywall/types/paywall-types';
+import type { PaywallBenefits, PaywallBenefitValue } from './paywall/types/benefits';
 type RenderStore = {
+    projectName: string;
+    setProjectName: (name: string) => void;
     copiedNode: Node | null;
     setCopiedNode: (node: Node | null) => void;
     current: Node | null;
     setCurrent: (node: Node | null) => void;
+    forceRender: number;
+    incForceRender: () => void;
     device: Device;
     setDevice: (device: Device) => void;
     appConfig: AppConfig;
@@ -15,6 +21,18 @@ type RenderStore = {
     setProjectColors: (projectColors?: ProjectColors) => void;
     previewMode: boolean;
     setPreviewMode: (previewMode: boolean) => void;
+    products: Product[];
+    addProduct: () => void;
+    removeProduct: (index: number) => void;
+    updateProduct: (index: number, patch: Partial<Product>) => void;
+    setProducts: (products: Product[]) => void;
+    clearProducts: () => void;
+    benefits: PaywallBenefits;
+    setBenefits: (benefits: PaywallBenefits) => void;
+    clearBenefits: () => void;
+    upsertBenefit: (key: string, value: PaywallBenefitValue) => void;
+    removeBenefit: (key: string) => void;
+    renameBenefit: (fromKey: string, toKey: string) => void;
     logs: LogEntry[];
     logLevel: LogLevel;
     setLogLevel: (level: LogLevel) => void;
@@ -24,5 +42,17 @@ type RenderStore = {
     }) => void;
     clearLogs: () => void;
 };
-export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand/vanilla").StoreApi<RenderStore>>;
+export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<RenderStore>, "setState" | "persist"> & {
+    setState(partial: RenderStore | Partial<RenderStore> | ((state: RenderStore) => RenderStore | Partial<RenderStore>), replace?: false | undefined): unknown;
+    setState(state: RenderStore | ((state: RenderStore) => RenderStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RenderStore, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: RenderStore) => void) => () => void;
+        onFinishHydration: (fn: (state: RenderStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<RenderStore, unknown, unknown>>;
+    };
+}>;
 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;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:100%;display:flex;overflow:hidden}.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:200px;border-right:1px solid #e5e7eb;overflow:auto}.split-right{position:relative;flex:1 1 45%;min-width:450px;max-height:calc(100vh + 60px);padding:16px;padding-bottom:120px;overflow:auto}.split-right__controls{position:absolute;top:12px;z-index:2;display:flex;margin-bottom:12px}.split-third{flex:1 1 25%;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}.mobile-panel-toggle{display:none;padding:0 16px 12px;gap:8px}.mobile-panel-toggle__button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}.mobile-panel-toggle__button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.mobile-panel-toggle__button--active{background:#111827;color:#fff;border-color:#111827;box-shadow:0 6px 16px rgba(0,0,0,.15)}.mobile-panel-toggle__icon{width:18px;height:12px;display:inline-flex}.mobile-panel-toggle__icon svg{width:100%;height:100%}.mobile-panel-toggle__label{line-height:1}.split-panel__close{display:none;position:absolute;top:12px;right:12px;border:none;border-radius:8px;background:rgba(0,0,0,.7);color:#fff;padding:6px 16px;font-weight:600;cursor:pointer;z-index:5}.editor-container__overlay{display:none}@media(max-width: 1000px){.editor-container{position:relative;min-height:calc(100vh - 60px);flex-direction:column}.split-left,.split-third{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#f3f4f6;box-shadow:0 25px 60px rgba(0,0,0,.15);transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none;z-index:4}.split-left{transform:translate3d(-100%, 0, 0)}.split-third{transform:translate3d(100%, 0, 0)}.split-left.is-open,.split-third.is-open{opacity:1;pointer-events:auto;transform:translate3d(0, 0, 0)}.split-right{flex:1 1 auto;min-width:0;min-height:calc(100vh - 120px);padding:16px;padding-bottom:120px;position:relative}.mobile-panel-toggle{display:flex}.split-panel__close{display:inline-flex}.editor-container__overlay{display:block;position:absolute;inset:0;background:rgba(17,24,39,.35);border:none;padding:0;margin:0;cursor:pointer;z-index:3}}@media(max-width: 900px){.split-right__controls{top:12px;z-index:5;padding-bottom:12px}.split-right__controls .side-tool{width: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__list-item{flex:1 1 220px;min-width:220px}.builder__button{position:relative;display:flex;align-items:stretch}.builder__button>.builder__button-link{flex:1;min-width:0;display:flex;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:4px;height:40px;line-height:37px;padding:0 4px;margin:0;background:#2563eb;color:#fff;font-size:clamp(11px,1.3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.builder__sort-controls{display:flex;flex-direction:column;gap:4px}.builder__sort-button{width:32px;height:18px;border:none;border-radius:4px;background:#f3f4f6;color:#6b7280;font-size:14px;cursor:pointer;line-height:1;box-shadow:inset 0 0 0 1px #e5e7eb;padding:0}.builder__sort-button:disabled{opacity:.4;cursor:not-allowed}.builder__button-condition{position:absolute;bottom:-10px;font-size:8px}.builder__node{background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:6px}.builder__node-type{margin:0 0 8px 0;font-weight:600}.builder__children{position:relative;display:flex;flex-direction:column;gap:16px}.builder__children>:not(:first-child){margin-left:16px}.builder__children::before{content:"";position:absolute;left:6px;top:24px;bottom:0;width:1px;background:#e5e7eb}.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}.side-tool{display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:4px;border:1px solid #e5e7eb;font-size:11px;max-width:220px}.side-tool select{width:100%;font-size:11px;padding:4px 6px}.side-tool .debug-button{border-radius:0;width:100%;justify-content:center}.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}@media(max-width: 1400px){.special-category-section__fields--box{grid-template-columns:minmax(0, 1fr);grid-template-areas:"top" "left" "right" "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__toggle{display:flex;flex-direction:column;gap:6px;padding:0 8px}.color-modal__toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#111827;cursor:pointer}.color-modal__toggle-input{width:16px;height:16px;accent-color:#2563eb}.color-modal__toggle-description{margin:0;font-size:12px;color:#6b7280}.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}
+*,*::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:100%;display:flex;overflow:hidden}.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:200px;border-right:1px solid #e5e7eb;overflow:auto}.split-right{position:relative;display:flex;flex-direction:column;flex:1 1 45%;width:100%;height:auto;max-height:calc(100vh - 120px);overflow:auto;padding:16px;background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto}.split-right>*{position:relative;z-index:1}.split-third{flex:1 1 25%;border-right:1px solid #e5e7eb;overflow:auto;overflow-x:hidden;max-height:calc(100vh - 120px)}.stage{background:#fff;border:1px solid #e5e7eb;border-radius:4px;align-self:center;border:1px solid hsl(220,13.0434782609%,80.9803921569%);box-shadow:0 18px 50px rgba(0,0,0,.16),0 6px 16px rgba(0,0,0,.1);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)}.rb-node-selected{border:1px solid #2684ff}.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}.mobile-panel-toggle{display:none;padding:0 16px 12px;gap:8px}.mobile-panel-toggle__button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}.mobile-panel-toggle__button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.mobile-panel-toggle__button--active{background:#111827;color:#fff;border-color:#111827;box-shadow:0 6px 16px rgba(0,0,0,.15)}.mobile-panel-toggle__icon{width:18px;height:12px;display:inline-flex}.mobile-panel-toggle__icon svg{width:100%;height:100%}.mobile-panel-toggle__label{line-height:1}.split-panel__close{display:none;position:absolute;top:12px;right:12px;border:none;border-radius:8px;background:rgba(0,0,0,.7);color:#fff;padding:6px 16px;font-weight:600;cursor:pointer;z-index:5}.editor-container__overlay{display:none}@media(max-width: 1000px){.editor-container{position:relative;min-height:calc(100vh - 60px);flex-direction:column}.split-left,.split-third{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#f3f4f6;box-shadow:0 25px 60px rgba(0,0,0,.15);transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none;z-index:4}.split-left{transform:translate3d(-100%, 0, 0)}.split-third{transform:translate3d(100%, 0, 0)}.split-left.is-open,.split-third.is-open{opacity:1;pointer-events:auto;transform:translate3d(0, 0, 0)}.split-right{flex:1 1 auto;min-width:0;min-height:calc(100vh - 120px);padding:16px;padding-bottom:120px;position:relative}.mobile-panel-toggle{display:flex}.split-panel__close{display:inline-flex}.editor-container__overlay{display:block;position:absolute;inset:0;background:rgba(17,24,39,.35);border:none;padding:0;margin:0;cursor:pointer;z-index:3}}@media(max-width: 900px){.split-right__controls{top:12px;z-index:5;padding-bottom:12px}.split-right__controls .side-tool{width:100%}}.screen-preview{position:relative;width:100%;height:100%}.rb-loading-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;background:hsla(0,0%,100%,.55);backdrop-filter:blur(1px)}.rb-loading{position:relative;top:-20%;width:min(320px,70vw);max-width:360px;opacity:.95}.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__list-item{flex:1 1 220px;min-width:220px}.builder__button{position:relative;display:flex;align-items:stretch}.builder__button>.builder__button-link{flex:1;min-width:0;display:flex;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:4px;height:40px;line-height:37px;padding:0 4px;margin:0;background:#2563eb;color:#fff;font-size:clamp(11px,1.3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.builder__sort-controls{display:flex;flex-direction:column;gap:4px}.builder__sort-button{width:32px;height:18px;border:none;border-radius:4px;background:#f3f4f6;color:#6b7280;font-size:14px;cursor:pointer;line-height:1;box-shadow:inset 0 0 0 1px #e5e7eb;padding:0}.builder__sort-button:disabled{opacity:.4;cursor:not-allowed}.builder__button-condition{position:absolute;bottom:-10px;font-size:8px}.builder__node{background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:6px}.builder__node-type{margin:0 0 8px 0;font-weight:600}.builder__children{position:relative;display:flex;flex-direction:column;gap:16px}.builder__children>:not(:first-child){margin-left:16px}.builder__children::before{content:"";position:absolute;left:6px;top:24px;bottom:0;width:1px;background:#e5e7eb}.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}.side-tool-container{position:absolute;top:0;left:0;z-index:5}.side-tool select{width:100%;font-size:11px;padding:4px 6px}.side-tool .debug-button{border-radius:0;width:100%;justify-content:center}.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:grid;gap:12px;grid-template-columns:repeat(2, minmax(0, 1fr))}@media(max-width: 1400px){.attributes-editor__size-grid{grid-template-columns:minmax(0, 1fr)}}.attributes-editor__size-grid-item{min-width:0}.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}.attributes-editor__mockable{margin-bottom:16px;padding:12px 16px;border-radius:8px;border:1px solid #eee;background:#fff}.attributes-editor__mockable-title{margin:0 0 8px 0;font-weight:700}.attributes-editor__mockable-table{width:100%;border-collapse:collapse}.attributes-editor__mockable-row+.attributes-editor__mockable-row{border-top:1px solid #eee}.attributes-editor__mockable-name{padding:8px 0;font-weight:600;text-transform:capitalize}.attributes-editor__mockable-action{padding:8px 0;text-align:right}.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}@media(max-width: 1400px){.special-category-section__fields--box{grid-template-columns:minmax(0, 1fr);grid-template-areas:"top" "left" "right" "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__toggle{display:flex;flex-direction:column;gap:6px;padding:0 8px}.color-modal__toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#111827;cursor:pointer}.color-modal__toggle-input{width:16px;height:16px;accent-color:#2563eb}.color-modal__toggle-description{margin:0;font-size:12px;color:#6b7280}.color-modal__link-button{border:none;background:none;color:#2563eb;font-weight:600;font-size:13px;cursor:pointer;padding:4px 8px}.color-modal__add-color{position:relative;display:inline-flex;align-items:center}.color-modal__add-color-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0;margin:0}.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{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}.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}.mockable-feature-modal{width:min(520px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.mockable-feature-modal__body{min-height:120px}.product-edit-modal{width:min(640px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.product-edit-modal__body{display:flex;flex-direction:column;gap:12px}.product-edit-modal__textarea{min-height:90px;padding:8px;resize:vertical}.product-presets-modal{width:min(960px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.product-presets-modal__body{display:flex;flex-direction:column;gap:16px}.product-presets-modal__section-title{margin:0;font-weight:700}.product-presets-modal__muted{margin:6px 0 0;opacity:.7}.product-presets-modal__grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:12px;margin-top:12px}.product-presets-modal__card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:8px}.product-presets-modal__card-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.product-presets-modal__card-title{margin:0;font-weight:700}.product-presets-modal__card-count{margin:0;opacity:.7;font-size:12px}.product-presets-modal__card-list{margin:0;padding-left:18px}.product-presets-modal__card-item{font-size:12px;word-break:break-word}.product-presets-modal__actions{display:flex;gap:8px;margin-top:8px}.benefit-edit-modal{width:min(640px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.benefit-edit-modal__body{display:flex;flex-direction:column;gap:12px}.benefit-presets-modal{width:min(960px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.benefit-presets-modal__body{display:flex;flex-direction:column;gap:16px}.benefit-presets-modal__section-title{margin:0;font-weight:700}.benefit-presets-modal__muted{margin:6px 0 0;opacity:.7}.benefit-presets-modal__grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:12px;margin-top:12px}.benefit-presets-modal__card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:8px}.benefit-presets-modal__card-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.benefit-presets-modal__card-title{margin:0;font-weight:700}.benefit-presets-modal__card-count{margin:0;opacity:.7;font-size:12px}.benefit-presets-modal__card-list{margin:0;padding-left:18px}.benefit-presets-modal__card-item{font-size:12px;word-break:break-word}.benefit-presets-modal__actions{display:flex;gap:8px;margin-top:8px}.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}.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);--embla-dot-color: var(--detail-medium-contrast);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:max(2.6rem,var(--embla-dot-size, 1.4rem) + 1.2rem);height:max(2.6rem,var(--embla-dot-size, 1.4rem) + 1.2rem);display:flex;align-items:center;border-radius:50%}.embla__dot:after{background-color:var(--embla-dot-color);width:var(--embla-dot-size, 1.4rem);height:var(--embla-dot-size, 1.4rem);border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected{--embla-dot-color: 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/Icons.d.ts

@@ -0,0 +1,2 @@
+export declare const Icons: readonly ["activity", "activity-heart", "alert-circle", "alert-triangle", "anchor", "archive", "arrow-down", "arrow-left", "arrow-narrow-down-left", "arrow-narrow-up-right", "arrow-right", "arrow-right-smooth", "asterisk-01", "asterisk-02", "at-sign", "award", "battery-charging", "bell-01", "bell-02", "bell-ringing-02", "bookmark", "bookmark-add", "bookmark-check", "bookmark-minus", "bookmark-x", "bubble", "building-01", "building-02", "building-03", "building-04", "building-05", "building-06", "building-07", "building-08", "building-09", "camera", "camera-01", "camera-steel", "check", "check-circle", "check-circle-bold", "check-circle-broken", "check-done-01", "check-done-02", "check-heart", "check-square", "check-square-broken", "check-verified-01", "check-verified-02", "check-verified-03", "checkbox", "checkv", "chevron-down", "chevron-down2", "chevron-left", "chevron-left-2", "chevron-right", "chevron-right-empty", "chevron-right-smooth", "chevron-up", "circle", "clock", "clock-fast-forward", "close", "close-circle", "cloud-01", "cloud-blank-01", "cloud-blank-02", "coin", "coins-02", "colors", "copy-01", "copy-02", "copy-03", "copy-04", "copy-05", "copy-06", "copy-07", "corner-down-right", "crypto-bold", "delete-icon", "diamond", "dice-3", "divide-01", "divide-02", "divide-03", "document-check-bold", "dots-circle", "dots-grid", "dots-horizontal", "dots-vertical", "download-01", "download-02", "download-03", "edit-03", "edit-04", "edit-05", "element-3", "ellipse-127", "exclaimation-circle", "eye-off-line", "face-smile", "file-04", "file-05", "file-check-02", "file-plus-01", "file-shield-02", "filter-funnel-01", "flag-03", "flash", "folder", "folder-plus", "gallery", "globe-01", "globe-04", "globe-bold", "guard", "headphones-01", "headphones-02", "headset-bold", "heart", "heart-bold", "help-circle", "home-2", "home-line", "hourglass-02", "image", "image-01", "image-03", "inbox-01", "inbox-arrow-down", "info-circle", "keyboard-line", "lamp-charge", "layer", "light", "like-dislike", "lock-03", "logout", "magicpen", "mail", "mail-01", "marker", "medal-star", "menu", "menu-04", "message-circle-01", "message-plus-circle", "message-question-circle", "message-text-circle-01", "message-text-square-02", "message-x-square", "microphone-02", "microphone-slash", "mirror", "moon-01", "moon-bold", "mouse-circle", "move", "notification", "notification-fill", "notification-text", "pdf-01", "pencil-01", "phone", "phone-01", "phone-arrow-down-left", "phone-arrow-up-right", "phone-hang-up", "phone-hangup2", "phone-incoming-01", "phone-outgoing-01", "phone-plus", "phone-x", "plus", "plus-circle", "printer", "question-mark-circle", "refresh-ccw-01", "refresh-cw-01", "refresh-cw-04", "refresh-right-square-bold", "remove-circle", "repeat-04", "repeat-bold", "ruler-pen", "search", "search-lg", "search-md", "search-refraction", "send-01", "send-02", "send-diagonal", "setting-2", "settings", "settings-02", "settings-04", "settings-2", "settings-cog", "share-01", "share-03", "share-04", "share-05", "share-06", "share-bold", "shield-01", "shield-bold", "solar-check", "speaker", "speaker-wave", "speedometer-03", "star", "star-rounded", "sun", "target-03", "text-input", "translate", "trash", "trash-02", "trash-03", "trash-04", "trush-square-bold", "unlimited", "user-circle", "user-jogging", "user-plus-01", "user-square", "user-x-01", "user-x-02", "user2", "users-02", "users-speaker", "verify", "voice-cricle", "x-circle", "x-close", "x-sm", "zap"];
+export type IconsType = (typeof Icons)[number];

package/dist/types/Project.d.ts

@@ -13,6 +13,11 @@ export interface ProjectColors {
 export interface ProjectBase<T> {
     name: string;
     version: string;
+    /**
+     * Optional classification used by built-in samples.
+     * (Does not conflict with `data.type`, which is the node/component type.)
+     */
+    type?: 'paywall' | 'onboard' | 'other';
     data: T;
     appConfig?: AppConfig;
     projectColors?: ProjectColors;

package/dist/utils/analyseNode.d.ts

@@ -1,8 +1,5 @@
 import { Node, NodeDefaultAttribute } from '../types/Node';
-export declare function isNodeNullOrUndefined<T = NodeDefaultAttribute>(node: Node<T>): boolean;
-export declare function isNodeString<T = NodeDefaultAttribute>(node: Node<T>): boolean;
-export declare function isNodeArray<T = NodeDefaultAttribute>(node: Node<T>): boolean;
-export declare function isEmptyObject<T = NodeDefaultAttribute>(node: Node<T>): boolean;
+export { isEmptyObject, isNodeArray, isNodeNullOrUndefined, isNodeString, } from './nodeGuards';
 export declare function analyseNode(node: Node<NodeDefaultAttribute>): {
     valid: boolean;
     message?: string;

package/dist/utils/analyseNodeByPatterns.d.ts

@@ -0,0 +1,16 @@
+import type { Node, NodeDefaultAttribute } from '../types/Node';
+export type AnalyseResultWithPath = {
+    valid: boolean;
+    message?: string;
+    path?: string;
+};
+/**
+ * Validates a Node tree against the generated component patterns:
+ * - Enforces `pattern.children` including "never"
+ * - Validates `attributes` against `pattern.attributes` (+ custom `types`)
+ *
+ * Notes:
+ * - Null/undefined children are considered "no children" and are allowed even
+ *   when patterns expect some kind of children.
+ */
+export declare function analyseNodeByPatterns(node: Node<NodeDefaultAttribute>): AnalyseResultWithPath;

package/dist/utils/analyseNodeStructural.d.ts

@@ -0,0 +1,11 @@
+import type { Node, NodeDefaultAttribute } from '../types/Node';
+export type AnalyseResult = {
+    valid: boolean;
+    message?: string;
+};
+/**
+ * Structural validation only:
+ * - Ensures the input is a valid Node union recursively (null/string/array/object)
+ * - Does NOT validate against component patterns.
+ */
+export declare function analyseNodeStructural(node: Node<NodeDefaultAttribute>): AnalyseResult;

package/dist/utils/extractImageStyle.d.ts

@@ -1,3 +1,4 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
-export declare function extractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;
+import { ExtractViewStyleOptions } from './extractViewStyle';
+export declare function extractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;

package/dist/utils/extractViewStyle.d.ts

@@ -2,9 +2,8 @@ import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated
 import type { NodeData } from '../types/Node';
 import type { AppConfig } from '../types/PreviewConfig';
 import type { ProjectColors } from '../types/Project';
-type ExtractViewStyleOptions = {
+export type ExtractViewStyleOptions = {
     appConfig?: AppConfig;
     projectColors?: ProjectColors;
 };
 export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;
-export {};

package/dist/utils/findNodeByKeyNested.d.ts

@@ -0,0 +1,2 @@
+import type { Node, NodeData } from '../types/Node';
+export declare function findNodeByKeyNested(node: Node, key: string): NodeData | null;

package/dist/utils/nodeGuards.d.ts

@@ -0,0 +1,5 @@
+import type { Node, NodeDefaultAttribute } from '../types/Node';
+export declare function isNodeNullOrUndefined<T = NodeDefaultAttribute>(node: Node<T>): boolean;
+export declare function isNodeString<T = NodeDefaultAttribute>(node: Node<T>): boolean;
+export declare function isNodeArray<T = NodeDefaultAttribute>(node: Node<T>): boolean;
+export declare function isEmptyObject<T = NodeDefaultAttribute>(node: Node<T>): boolean;

package/dist/utils/novaToJson.d.ts

@@ -1,3 +1,8 @@
 import { Node } from '../types/Node';
 import { ProjectBase } from '../types/Project';
+/**
+ * @deprecated Legacy converter for old "nova" onboard JSON formats.
+ * The built-in samples are now shipped in the new `Project<Node>` format,
+ * so this should no longer be needed in normal usage.
+ */
 export declare function novaToJson(nova: ProjectBase<unknown>): Node;