@developer_tribe/react-builder 1.2.44 → 1.2.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DeviceButton.d.ts +2 -1
- package/dist/index.cjs.js +28 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +28 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.web.cjs.js +3 -3
- package/dist/index.web.cjs.js.map +1 -1
- package/dist/index.web.esm.js +3 -3
- package/dist/index.web.esm.js.map +1 -1
- package/dist/modals/CreateDeviceModal.d.ts +8 -0
- package/dist/product-base/periodLocalizationKeys.d.ts +16 -0
- package/dist/store/customDeviceStore.d.ts +21 -0
- package/dist/store.d.ts +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/assets/.DS_Store +0 -0
- package/src/assets/meta.json +1 -1
- package/src/build-components/FormCheckbox/FormCheckbox.tsx +2 -0
- package/src/build-components/Text/Text.tsx +2 -3
- package/src/components/DeviceButton.tsx +34 -1
- package/src/components/EditorHeader.tsx +22 -4
- package/src/modals/CreateDeviceModal.tsx +264 -0
- package/src/modals/DeviceSelectorModal.tsx +44 -7
- package/src/product-base/extractIOSParams.ts +10 -4
- package/src/product-base/periodLocalizationKeys.ts +46 -0
- package/src/store/customDeviceStore.ts +38 -0
- package/src/styles/components/_editor-shell.scss +12 -2
- package/src/styles/index.scss +1 -0
- package/src/styles/modals/_create-device.scss +113 -0
- package/src/utils/__special_exceptions.ts +8 -0
- package/src/utils/analyseNodeByPatterns.ts +8 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Device } from '../types/Device';
|
|
2
|
+
type CreateDeviceModalProps = {
|
|
3
|
+
onClose: () => void;
|
|
4
|
+
onSuccess: (device: Device) => void;
|
|
5
|
+
deviceToEdit?: Device;
|
|
6
|
+
};
|
|
7
|
+
export declare function CreateDeviceModal({ onClose, onSuccess, deviceToEdit, }: CreateDeviceModalProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default CreateDeviceModal;
|
|
@@ -42,3 +42,19 @@ export declare function parseBillingPeriod(iso8601: string): {
|
|
|
42
42
|
* @example "MONTH" → "month"
|
|
43
43
|
*/
|
|
44
44
|
export declare function convertIOSPeriodUnit(iosUnit?: string): 'day' | 'week' | 'month' | 'year';
|
|
45
|
+
/**
|
|
46
|
+
* iOS'un döndüğü ham period değerlerini semantik olarak normalize eder.
|
|
47
|
+
*
|
|
48
|
+
* iOS bazen "WEEK" yerine "DAY" + 7, "MONTH" yerine "DAY" + 30 döndürür.
|
|
49
|
+
* Bu fonksiyon bu ham değerleri doğru semantic period'a çevirir.
|
|
50
|
+
*
|
|
51
|
+
* @example normalizeIOSPeriod('DAY', 7) → { unit: 'week', value: 1 }
|
|
52
|
+
* @example normalizeIOSPeriod('DAY', 14) → { unit: 'week', value: 2 }
|
|
53
|
+
* @example normalizeIOSPeriod('DAY', 30) → { unit: 'month', value: 1 }
|
|
54
|
+
* @example normalizeIOSPeriod('DAY', 365) → { unit: 'year', value: 1 }
|
|
55
|
+
* @example normalizeIOSPeriod('MONTH', 1) → { unit: 'month', value: 1 }
|
|
56
|
+
*/
|
|
57
|
+
export declare function normalizeIOSPeriod(iosUnit: string | undefined, iosValue: number | undefined): {
|
|
58
|
+
unit: 'day' | 'week' | 'month' | 'year';
|
|
59
|
+
value: number;
|
|
60
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Device } from '../types/Device';
|
|
2
|
+
interface CustomDeviceState {
|
|
3
|
+
customDevices: Device[];
|
|
4
|
+
addCustomDevice: (device: Device) => void;
|
|
5
|
+
removeCustomDevice: (name: string) => void;
|
|
6
|
+
updateCustomDevice: (name: string, updatedDevice: Device) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const useCustomDeviceStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CustomDeviceState>, "setState" | "persist"> & {
|
|
9
|
+
setState(partial: CustomDeviceState | Partial<CustomDeviceState> | ((state: CustomDeviceState) => CustomDeviceState | Partial<CustomDeviceState>), replace?: false | undefined): unknown;
|
|
10
|
+
setState(state: CustomDeviceState | ((state: CustomDeviceState) => CustomDeviceState), replace: true): unknown;
|
|
11
|
+
persist: {
|
|
12
|
+
setOptions: (options: Partial<import("zustand/middleware").PersistOptions<CustomDeviceState, CustomDeviceState, unknown>>) => void;
|
|
13
|
+
clearStorage: () => void;
|
|
14
|
+
rehydrate: () => Promise<void> | void;
|
|
15
|
+
hasHydrated: () => boolean;
|
|
16
|
+
onHydrate: (fn: (state: CustomDeviceState) => void) => () => void;
|
|
17
|
+
onFinishHydration: (fn: (state: CustomDeviceState) => void) => () => void;
|
|
18
|
+
getOptions: () => Partial<import("zustand/middleware").PersistOptions<CustomDeviceState, CustomDeviceState, unknown>>;
|
|
19
|
+
};
|
|
20
|
+
}>;
|
|
21
|
+
export {};
|
package/dist/store.d.ts
CHANGED
|
@@ -98,7 +98,7 @@ type RenderStore = {
|
|
|
98
98
|
localizationApiConfig?: LocalizationApiConfig;
|
|
99
99
|
setLocalizationApiConfig: (config?: LocalizationApiConfig) => void;
|
|
100
100
|
};
|
|
101
|
-
export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand
|
|
101
|
+
export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand").StoreApi<RenderStore>, "setState" | "persist"> & {
|
|
102
102
|
setState(partial: RenderStore | Partial<RenderStore> | ((state: RenderStore) => RenderStore | Partial<RenderStore>), replace?: false | undefined): unknown;
|
|
103
103
|
setState(state: RenderStore | ((state: RenderStore) => RenderStore), replace: true): unknown;
|
|
104
104
|
persist: {
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--rb-background: 220 14.3% 95.9%;--rb-foreground: 220.9 39.3% 11%;--rb-card: 0 0% 100%;--rb-card-foreground: 220.9 39.3% 11%;--rb-muted: 220 14.3% 95.9%;--rb-muted-foreground: 220 8.9% 46.1%;--rb-primary: 221.2 83.2% 53.3%;--rb-primary-foreground: 0 0% 100%;--rb-destructive: 0 84.2% 60.2%;--rb-destructive-foreground: 0 0% 100%;--rb-border: 220 13% 91%;color-scheme:light}.dark{--rb-background: 222.2 84% 4.9%;--rb-foreground: 210 40% 98%;--rb-card: 222.2 84% 4.9%;--rb-card-foreground: 210 40% 98%;--rb-muted: 217.2 32.6% 17.5%;--rb-muted-foreground: 215 20.2% 65.1%;--rb-primary: 217.2 91.2% 59.8%;--rb-primary-foreground: 222.2 84% 4.9%;--rb-destructive: 0 62.8% 30.6%;--rb-destructive-foreground: 210 40% 98%;--rb-border: 217.2 32.6% 17.5%;color-scheme:dark}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--rb-background: 222.2 84% 4.9%;--rb-foreground: 210 40% 98%;--rb-card: 222.2 84% 4.9%;--rb-card-foreground: 210 40% 98%;--rb-muted: 217.2 32.6% 17.5%;--rb-muted-foreground: 215 20.2% 65.1%;--rb-primary: 217.2 91.2% 59.8%;--rb-primary-foreground: 222.2 84% 4.9%;--rb-destructive: 0 62.8% 30.6%;--rb-destructive-foreground: 210 40% 98%;--rb-border: 217.2 32.6% 17.5%;color-scheme:dark}}*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.page-bg{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:16px}.btn-add{height:120px;border:2px dashed hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));border-radius:8px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));transition:border-color .2s ease,transform .1s ease,box-shadow .2s ease;box-shadow:0 1px 2px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.04)}.btn-add:hover{border-color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));transform:translateY(-1px);box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.1)}.split-left{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;max-height:calc(100vh - 120px);padding-bottom:80px}.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-image:var(--rb-canvas-bg, none);background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto;padding-bottom:120px}.split-right>*{position:relative;z-index:1}.dark .split-right{--rb-canvas-bg: none !important}.split-third{flex:1 1 25%;border-right:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;overflow-x:hidden;max-height:calc(100vh - 120px)}.stage{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;align-self:center;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));box-shadow:0 18px 50px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.16),0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25);border-radius:8px}.stage .scroll-container{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.app-header{position:sticky;top:0;z-index:10;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}.app-header a{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));text-decoration:none}.app-header__brand{font-weight:700}.app-header__nav{display:flex;gap:16px}.warning{color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-size:12px;font-weight:600;margin-bottom:16px}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.breadcrumb__back{display:inline-flex;align-items:center;gap:4px;padding:0;border:none;background:none;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-weight:600;cursor:pointer;transition:color .2s ease}.breadcrumb__back:hover,.breadcrumb__back:focus-visible{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));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:hsl(var(--border, var(--rb-border, 220 13% 91%)));margin:0 4px}.breadcrumb__link{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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 hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));outline-offset:2px}.mobile-panel-toggle__button--active{background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.7);color:hsl(var(--card, var(--rb-card, 0 0% 100%)));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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));box-shadow:0 25px 60px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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;position:relative}.mobile-panel-toggle{display:flex}.split-panel__close{display:inline-flex}.editor-container__overlay{display:block;position:absolute;inset:0;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.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:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.55);backdrop-filter:blur(1px)}.rb-loading{position:relative;top:-20%;width:min(320px,70vw);max-width:360px;opacity:.95}.rb-empty-preview{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.rb-empty-preview__card{width:min(320px,100% - 32px);padding:14px 16px;border-radius:8px;border:1px dashed hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.72);backdrop-filter:blur(1px);text-align:center}.rb-empty-preview__title{font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:4px}.rb-empty-preview__hint{font-size:13px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.builder{display:flex;flex-direction:column;gap:12px}.builder__breadcrumbs{display:flex;flex-direction:row;gap:8px}.builder__breadcrumb{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;height:40px;line-height:37px;padding:0 4px;margin:0;background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));font-size:clamp(11px,1.3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:none;text-align:left}.builder__button-actions{position:relative;display:flex;align-items:stretch}.builder__button-actions-trigger{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;height:40px;width:40px;display:inline-flex;align-items:center;justify-content:center;border:none;margin-left:4px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));cursor:pointer;box-shadow:inset 0 0 0 1px hsl(var(--border, var(--rb-border, 220 13% 91%)))}.builder__button-actions-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;padding:6px;margin:0;list-style:none;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-radius:4px;box-shadow:0 10px 25px rgba(0,0,0,.15);border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));z-index:20}.builder__button-actions-item{width:100%;text-align:left;border:none;background:rgba(0,0,0,0);padding:8px 10px;border-radius:4px;cursor:pointer;font-size:12px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.builder__button-actions-item:hover{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.builder__button-actions-item:disabled{opacity:.5;cursor:not-allowed}.builder__button-actions-item--danger{color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))}.builder__sort-controls{display:flex;flex-direction:column;gap:4px}.builder__sort-button{width:32px;height:18px;border:none;border-radius:4px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));font-size:14px;cursor:pointer;line-height:1;box-shadow:inset 0 0 0 1px hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:0}.builder__sort-button:disabled{opacity:.4;cursor:not-allowed}.builder__button-condition{position:absolute;bottom:-10px;font-size:8px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding-left:16px;padding-right:4px}.builder__node{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;padding:6px;box-shadow:none}.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>.builder__button:first-child:has(.builder__sort-controls)~*{margin-left:48px}.builder__children::before{content:"";position:absolute;left:6px;top:24px;bottom:0;width:1px;background:hsl(var(--border, var(--rb-border, 220 13% 91%)))}.builder__button-condition-text{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.builder__button-children-count{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));white-space:nowrap}.builder__text,.builder__placeholder{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));font-size:12px}.rb-project-debug{display:flex;width:100%;height:calc(100vh - 60px);overflow:hidden;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.rb-project-debug__json{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.rb-project-debug__json::-webkit-scrollbar{width:8px;height:4px}.rb-project-debug__json{flex:0 0 34%;min-width:320px;max-width:640px;border-right:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;padding:16px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.rb-project-debug__preview{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.rb-project-debug__preview::-webkit-scrollbar{width:8px;height:4px}.rb-project-debug__preview{position:relative;flex:1 1 auto;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center;background-image:var(--rb-canvas-bg, none);background-position:center;background-repeat:repeat;background-size:500px auto}.dark .rb-project-debug__preview{--rb-canvas-bg: none !important}.rb-project-debug__error{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.rb-project-debug__error::-webkit-scrollbar{width:8px;height:4px}.rb-project-debug__error{flex:0 0 32%;min-width:280px;max-width:520px;border-left:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;padding:16px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.rb-project-debug__title{margin:0 0 4px 0;font-size:16px;font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-project-debug__error-block{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;padding:12px;margin:0 0 12px 0;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.rb-project-debug__error-label{font-size:12px;font-weight:800;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin:0 0 4px 0}.rb-project-debug__error-pre{margin:0;padding:4px;border-radius:4px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:11px;line-height:1.45;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:220px}.rb-project-debug__meta{margin:0 0 12px 0;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.rb-project-debug__meta-label{font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-project-debug__toolbar{display:flex;gap:4px;align-items:center;margin:0 0 12px 0}.rb-project-debug__toolbar .editor-button{min-width:0;height:34px;padding:0 12px}.rb-project-debug__below-name{margin:0 0 12px 0}.rb-project-debug__error-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px 0}.rb-project-debug__error-head .rb-project-debug__title{margin:0}.rb-project-debug__error-head .editor-button{min-width:0;height:34px;padding:0 12px}.rb-project-validation__actions{display:flex;gap:4px;align-items:center}.rb-project-validation__actions .editor-button{min-width:0;height:34px;padding:0 12px}.rb-project-debug__code{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;line-height:1.5;white-space:pre;overflow:auto;max-height:calc(100vh - 60px - 160px);background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.rb-project-debug__code-editor{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;width:100%;margin:0;padding:12px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;line-height:1.5;white-space:pre;overflow:auto;resize:vertical;min-height:220px;max-height:calc(100vh - 60px - 160px);background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-project-debug__json-error{margin:4px 0 0 0;font-size:12px;line-height:1.35;color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-weight:600;word-break:break-word}.rb-project-validation__error{margin:0 0 12px 0;font-size:13px;line-height:1.4;color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-weight:600}.rb-project-validation__error--render{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.rb-project-validation__error-label{font-weight:800}@media(max-width: 1000px){.rb-project-debug{flex-direction:column;height:calc(100vh - 60px)}.rb-project-debug__json{flex:0 0 auto;width:100%;min-width:0;max-width:none;border-right:none;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));max-height:45%}.rb-project-debug__preview{flex:1 1 auto;width:100%;min-height:0}.rb-project-debug__error{flex:0 0 auto;width:100%;min-width:0;max-width:none;border-left:none;border-top:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));max-height:40%}}.editor-controls{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}.editor-section{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer;transition:background .2s ease,box-shadow .2s ease}.btn:hover{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.06)}.input{display:inline-flex;align-items:center;height:32px;padding:0 8px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:hsl(var(--border, var(--rb-border, 220 13% 91%)));box-shadow:0 0 0 3px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.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 hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.3)}.builder-checkbox__native:checked+.builder-checkbox__control{background:linear-gradient(135deg, hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))), hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))));border-color:rgba(0,0,0,0);box-shadow:0 6px 14px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.35)}.builder-checkbox__native:checked+.builder-checkbox__control::after{border-color:hsl(var(--card, var(--rb-card, 0 0% 100%)));transform:rotate(45deg) scale(1)}.builder-checkbox__text{font-size:14px;line-height:1.4}.builder-checkbox__helper{font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)))}.editor-tab{cursor:pointer;border:1px solid rgba(0,0,0,0);border-top-left-radius:4px;border-top-right-radius:4px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--border, var(--rb-border, 220 13% 91%))) hsl(var(--border, var(--rb-border, 220 13% 91%))) hsl(var(--card, var(--rb-card, 0 0% 100%))) hsl(var(--border, var(--rb-border, 220 13% 91%)))}.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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)))}.editor-header__title{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-weight:600}.editor-header__devices{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:6px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer;font-size:12px}.editor-device-button.editor-device-button--selected{border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.editor-device-button span{position:absolute;bottom:4px;right:4px;background-color:hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));border-radius:50%;display:block;width:22px;height:22px;overflow:hidden}.editor-device-button img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:11px;max-height:11px;width:auto;height:auto}.editor-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}.editor-actions-dropdown{position:relative;display:inline-flex;align-items:center}.editor-actions-dropdown__trigger{min-width:auto;gap:8px}.editor-actions-dropdown__caret{font-size:16px;line-height:1;opacity:.8}.editor-actions-dropdown__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:220px;padding:6px;margin:0;list-style:none;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}.editor-actions-dropdown__submenu-root{position:relative}.editor-actions-dropdown__submenu-root::after{content:"";position:absolute;top:0;right:100%;width:12px;height:100%}.editor-actions-dropdown__submenu{display:none;position:absolute;top:0;right:100%;z-index:21;min-width:240px;max-height:320px;overflow:auto;padding:6px;margin:0;list-style:none;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}.editor-actions-dropdown__submenu-root:hover>.editor-actions-dropdown__submenu,.editor-actions-dropdown__submenu-root:focus-within>.editor-actions-dropdown__submenu{display:block}.editor-actions-dropdown__submenu-caret{margin-left:auto;font-size:14px;line-height:1;opacity:.7}.editor-actions-dropdown__item{width:100%;display:flex;align-items:center;justify-content:flex-start;height:36px;padding:0 10px;border:1px solid rgba(0,0,0,0);border-radius:8px;background:rgba(0,0,0,0);color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer;font-size:12px;font-weight:600;text-align:left}.editor-actions-dropdown__item--compact{height:32px;font-weight:500}.editor-actions-dropdown__item:hover{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.12)}.editor-actions-dropdown__item:disabled{opacity:.5;cursor:default}.editor-actions-dropdown__item:focus-visible{outline:2px solid hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));outline-offset:2px}.editor-button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:120px;padding:0 12px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:6px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer}.debug-button{min-width:auto;height:auto;padding:4px 12px;font-size:12px;line-height:1.2;border-radius:999px;background:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.95);border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.15);box-shadow:0 2px 4px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.08)}.debug-button:hover{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.3)}.editor-button:disabled{opacity:.6;cursor:default}.editor-save-button,.editor-save-previewconfig-button{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-weight:600;font-size:12px}.builder__add-button{width:100%;margin-top:12px;min-height:52px;border-style:dashed;border-color:hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));font-size:18px;line-height:1}.builder__add-button:hover{border-color:hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.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:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)))}.attributes-editor__mockable-name{padding:8px 0;font-weight:600;text-transform:capitalize}.attributes-editor__mockable-action{padding:8px 0;text-align:right}.attributes-editor__picker-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:6px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:6px 10px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer}.attributes-editor__picker-button-left{display:flex;align-items:center;gap:8px;min-width:0}.attributes-editor__picker-button-label{font-weight:600}.attributes-editor__picker-button-label--fill{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attributes-editor__picker-button-open{font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));flex:0 0 auto}.attributes-editor__font-modal{display:grid;gap:16px}.attributes-editor__font-modal-header{display:flex;align-items:center;gap:8px}.attributes-editor__font-modal-title{margin:0;font-weight:700}.attributes-editor__font-modal-spacer{flex:1}.attributes-editor__font-modal-note{font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.attributes-editor__font-modal-error{font-size:12px;color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))}.attributes-editor__font-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:8px;max-height:60vh;overflow:auto;padding-right:4px}.attributes-editor__font-option{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:6px 10px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer}.attributes-editor__font-option:disabled{opacity:.6;cursor:not-allowed}.attributes-editor__font-option--active{border:2px solid hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.attributes-editor__font-option-name{font-size:12px;font-weight:600;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.attributes-editor__font-option--active .attributes-editor__font-option-name{font-weight:700}.attributes-editor__font-option-status{font-size:11px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));flex:0 0 auto}.attributes-editor-panel{padding:16px}.field-info-tooltip{position:relative}.field-info-tooltip__trigger{position:absolute;top:0;right:0;font-size:11px;line-height:1.2;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.4);outline-offset:2px}.field-info-tooltip__bubble{position:absolute;top:50%;right:100%;transform:translate(-8px, -50%);background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));padding:6px 10px;border-radius:4px;font-size:12px;line-height:1.4;width:220px;text-align:left;box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;padding:12px;margin-bottom:16px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.special-category-section__description{margin:8px 0 0;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.mockos-screen--home{padding:20px;background-color:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.mockos-screen--onboard{padding:20px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-screen--subscription{padding:20px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-screen__title{font-size:32px;font-weight:bold;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:16px}.mockos-screen__subtitle{font-size:16px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-screen__heading{font-size:24px;font-weight:bold;margin-bottom:20px}.mockos-screen__text{font-size:16px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:12px}.mockos-screen__plan{padding:16px;border-radius:8px;text-align:center;margin-bottom:12px}.mockos-screen__plan--premium{background-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-screen__plan--basic{background-color:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.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:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.3)}.mockos-launcher__app-icon svg{width:100%;height:100%;display:block}.mockos-launcher__app-name{font-size:12px;color:hsl(var(--card, var(--rb-card, 0 0% 100%)));text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mockos-modal-overlay{position:absolute;inset:0;display:flex;z-index:9999;background-color:rgba(0, 0, 0, var(--mockos-overlay-alpha, 0.5))}.mockos-modal-overlay--ios{--mockos-overlay-alpha: 0.4}.mockos-modal-overlay--android{--mockos-overlay-alpha: 0.5}.mockos-modal-overlay--center{align-items:center;justify-content:center;padding:20px}.mockos-modal-overlay--bottom{align-items:flex-end;justify-content:stretch;padding:0}.mockos-permission-modal{width:100%}.mockos-permission-modal--ios{max-width:270px;overflow:hidden;border-radius:14px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.95);backdrop-filter:blur(20px)}.mockos-permission-modal--android{max-width:280px;border-radius:4px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)));box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)}.mockos-permission-modal__content{padding:20px 16px}.mockos-permission-modal__content--center{text-align:center}.mockos-permission-modal__title{font-size:17px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:8px;line-height:1.3}.mockos-permission-modal__title--android{font-size:20px;font-weight:500;margin-bottom:16px;line-height:1.2}.mockos-permission-modal__message{font-size:13px;line-height:1.4;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-permission-modal__message--android{font-size:16px;line-height:1.5}.mockos-permission-modal__actions{display:flex}.mockos-permission-modal__actions--ios{border-top:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.65)}.mockos-permission-modal__actions--android{padding:8px 8px 8px 0;justify-content:flex-end;gap:8px}.mockos-permission-modal__button{background:rgba(0,0,0,0);border:none;cursor:pointer;font:inherit}.mockos-permission-modal__button--ios{flex:1;padding:11px 0;font-size:17px;font-weight:400;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.mockos-permission-modal__actions--ios .mockos-permission-modal__button--ios:first-child{border-right:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.65)}.mockos-permission-modal__button--bold{font-weight:600}.mockos-permission-modal__button--android{padding:8px 16px;font-size:14px;font-weight:500;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.mockos-permission-modal__button--deny{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-permission-modal__button--allow{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.mockos-subscription-sheet{width:100%;border-top-left-radius:16px;border-top-right-radius:16px;overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom));transform:translateY(0);background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-subscription-sheet--ios{background-color:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.96);backdrop-filter:blur(20px);box-shadow:0 -12px 30px rgba(0,0,0,.18),0 -2px 6px rgba(0,0,0,.08)}.mockos-subscription-sheet--android{box-shadow:0 -10px 20px rgba(0,0,0,.22),0 -2px 6px rgba(0,0,0,.14)}.mockos-subscription-sheet__handle{width:44px;height:5px;border-radius:999px;background-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.18);margin:10px auto 0}.mockos-subscription-sheet__content{padding:14px 16px 10px}.mockos-subscription-sheet__content--ios{padding:10px 16px 10px;text-align:center}.mockos-subscription-sheet__top-actions{display:flex;justify-content:flex-end;margin-bottom:6px}.mockos-subscription-sheet__android-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.mockos-subscription-sheet__close{width:28px;height:28px;border-radius:999px;border:none;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.06);color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.55);font-size:18px;line-height:28px;cursor:pointer}.mockos-subscription-sheet__title{font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.mockos-subscription-sheet__title--ios{font-size:15px;margin-bottom:8px;line-height:1.3;letter-spacing:.2px}.mockos-subscription-sheet__title--android{font-size:16px}.mockos-subscription-sheet__subtitle{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));line-height:1.5}.mockos-subscription-sheet__subtitle--ios{font-size:13px;line-height:1.4}.mockos-subscription-sheet__subtitle--android{margin-top:8px;font-size:14px}.mockos-subscription-sheet__card{margin-top:12px;padding:10px 12px;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.04);text-align:left}.mockos-subscription-sheet__card--ios{border-radius:12px}.mockos-subscription-sheet__card--android{margin-top:14px;border-radius:10px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.7)}.mockos-subscription-sheet__row{display:flex;align-items:center;gap:10px}.mockos-subscription-sheet__row--space-between{justify-content:space-between}.mockos-subscription-sheet__icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(88, 86, 214, 0.22));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.7)}.mockos-subscription-sheet__meta{flex:1;min-width:0}.mockos-subscription-sheet__meta--android{min-width:0}.mockos-subscription-sheet__product-id{font-size:14px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.9);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockos-subscription-sheet__meta-subtitle{margin-top:2px;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))/0.95)}.mockos-subscription-sheet__price{font-size:13px;font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.86)}.mockos-subscription-sheet__actions{display:flex}.mockos-subscription-sheet__actions--ios{border-top:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.6)}.mockos-subscription-sheet__actions--android{padding:10px 12px 12px;justify-content:flex-end;gap:8px}.mockos-subscription-sheet__action{background:rgba(0,0,0,0);border:none;cursor:pointer;font:inherit}.mockos-subscription-sheet__action--ios{flex:1;padding:13px 0;font-size:17px;font-weight:400;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.mockos-subscription-sheet__actions--ios .mockos-subscription-sheet__action--ios:first-child{border-right:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.6)}.mockos-subscription-sheet__action--bold{font-weight:600}.mockos-subscription-sheet__action--android{padding:10px 16px;font-size:14px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.mockos-subscription-sheet__action--cancel{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-subscription-sheet__action--primary{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.12);border-radius:999px;font-weight:700}.rb-bottom-bar{position:fixed;left:50%;transform:translateX(-76%);bottom:10px;z-index:200;height:50px;border-radius:24px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 10px;gap:10px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));box-shadow:0 8px 20px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.08)}.rb-bottom-bar__button{appearance:none;border:none;background:rgba(0,0,0,0);padding:8px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.rb-bottom-bar__button.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));background:color-mix(in srgb, hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))), transparent 92%);box-shadow:0 0 10px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.18)}.rb-bottom-bar__button+.rb-bottom-bar__button{border-left:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding-left:14px;margin-left:4px}.rb-bottom-bar__button--rtl{gap:6px;padding-right:10px}.rb-bottom-bar__rtl-text{font-size:12px;font-weight:700;letter-spacing:.3px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-bottom-bar__spacer{flex:1 1 auto}.rb-bottom-bar__langs{display:inline-flex;align-items:center;gap:0;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-bottom-bar__lang{appearance:none;border:none;background:rgba(0,0,0,0);padding:6px 6px;cursor:pointer;font-size:12px;font-weight:700;text-transform:lowercase;color:inherit}.rb-bottom-bar__lang.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));text-shadow:0 0 12px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.25)}.rb-bottom-bar__lang+.rb-bottom-bar__lang{border-left:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));margin-left:8px;padding-left:14px}.onboard__separator{height:1px;width:100%}.rb-webview{position:relative;overflow:hidden}.rb-webview__overlay{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.rb-webview__loader{width:var(--rb-webview-loader-size, 30px);height:var(--rb-webview-loader-size, 30px);border-radius:50%;border:var(--rb-webview-loader-border-width, 3px) solid rgba(0,0,0,0);border-top-color:currentColor;animation:rb-webview-spin var(--rb-webview-loader-duration, 1s) linear infinite}@keyframes rb-webview-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.rb-webview__frame-wrapper{display:flex;flex-direction:column;position:relative}.rb-webview__frame-inner{flex:1;min-height:0;position:relative}.rb-webview__frame{width:100%;height:100%;border:none;transition:opacity .3s ease-in-out}.rb-checkbox{display:flex;align-items:flex-start}.rb-checkbox__box{flex-shrink:0;display:flex;justify-content:center;align-items:center;margin-top:2px;transition:all .2s}.rb-checkbox__label{flex:1}.modal{position:fixed;inset:0;z-index:10000}.modal__overlay{position:absolute;inset:0;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.4);z-index:0}.modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-radius:12px;box-shadow:0 10px 30px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));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:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 10px 20px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.05)}.add-component-modal__group-title{font-size:14px;font-weight:600;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));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:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));box-shadow:0 10px 25px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.15);transform:translateY(-2px)}.add-component-modal__thumbnail{width:100%;aspect-ratio:4/3;border-radius:8px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));border:1px dashed hsl(var(--border, var(--rb-border, 220 13% 91%)));display:flex;align-items:center;justify-content:center;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.add-component-modal__title{font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.add-component-modal__empty{margin:12px 0;padding:16px;border:1px dashed hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.1)}.color-modal__selected-label{margin:0;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer}.color-modal__toggle-input{width:16px;height:16px;accent-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.color-modal__toggle-description{margin:0;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.color-modal__link-button{border:none;background:none;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));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:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.color-modal__swatch{border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;padding:8px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));box-shadow:0 0 0 1px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))) inset}.color-modal__swatch-preview{width:100%;height:32px;border-radius:6px}.color-modal__swatch-preview--light{border:1px solid hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.1)}.color-modal__swatch-label{font-size:12px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.color-modal__swatch-value{font-size:11px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));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:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.localication-modal__body{flex:1;min-height:0;padding:24px;display:flex;flex-direction:column;gap:16px;overflow:auto}.localication-modal__controls{display:flex;flex-direction:column;gap:12px}.localication-modal__editor{flex:1;min-height:0;overflow:auto;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.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(800px,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:140px;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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:12px;padding:12px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:12px;padding:12px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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}.inspect-modal__content{width:calc(100vw - 32px);height:calc(100vh - 64px);max-width:900px;max-height:calc(100vh - 64px);padding:0;display:flex;flex-direction:column}.inspect-modal__header{padding:16px 24px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)))}.inspect-modal__tabs{display:flex;gap:0;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:0 24px}.inspect-modal__tab{all:unset;cursor:pointer;padding:8px 16px;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));border-bottom:2px solid rgba(0,0,0,0);transition:color .15s,border-color .15s}.inspect-modal__tab:hover{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.inspect-modal__tab.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));border-bottom-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.inspect-modal__body{flex:1;min-height:0;overflow:auto;padding:24px}.inspect-modal__empty{margin:0;font-size:13px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.inspect-modal__section-title{margin:16px 0 8px;font-size:13px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.inspect-modal__section-title:first-child{margin-top:0}.inspect-modal__table-wrap{display:flex;flex-direction:column}.inspect-modal__table{width:100%;border-collapse:collapse;font-size:12px}.inspect-modal__table th{text-align:left;padding:6px 8px;font-weight:600;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));white-space:nowrap}.inspect-modal__table td{padding:6px 8px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));vertical-align:top;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.inspect-modal__table tr:last-child td{border-bottom:none}.inspect-modal__cell-key{font-family:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",monospace;font-size:11px;word-break:break-all;max-width:320px}.inspect-modal__cell-key--nested{padding-left:24px}.inspect-modal__cell-value{font-family:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",monospace;font-size:11px;word-break:break-all;display:flex;align-items:center;gap:4px}.inspect-modal__badge{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;font-weight:500;white-space:nowrap}.inspect-modal__badge--default{background:hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.inspect-modal__badge--custom{background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--primary-foreground, var(--rb-primary-foreground, 0 0% 100%)))}.inspect-modal__color-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));flex-shrink:0}.inspect-modal__separator-row td{font-weight:600;font-size:13px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));padding-top:16px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)))}.prompt-manager-modal__content{width:calc(100vw - 32px);height:calc(100vh - 32px);max-width:1400px;max-height:calc(100vh - 32px);padding:0;display:flex;flex-direction:column}.prompt-manager-modal__header{padding:16px 24px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));display:flex;align-items:center;justify-content:space-between}.prompt-manager-modal__tabs{display:flex;padding:0 24px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.prompt-manager-modal__tab{padding:16px 24px;font-size:14px;font-weight:500;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));background:none;border:none;border-bottom:2px solid rgba(0,0,0,0);cursor:pointer;transition:all .2s ease}.prompt-manager-modal__tab:hover{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.prompt-manager-modal__tab.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));border-bottom-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.prompt-manager-modal__body{flex:1;min-height:0;padding:24px;display:flex;flex-direction:column;overflow:hidden}.prompt-manager-modal__editor-wrap{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}.prompt-manager-modal__toolbar{display:flex;align-items:center;justify-content:space-between}.prompt-manager-modal__editor{flex:1;width:100%;height:100%;resize:none;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;padding:16px;font-family:"ui-monospace","SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;font-size:13px;line-height:1.5;background:hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));outline:none}.prompt-manager-modal__editor:focus{border-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));box-shadow:0 0 0 2px color-mix(in srgb, hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))), transparent 90%)}.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}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}
|
|
1
|
+
:root{--rb-background: 220 14.3% 95.9%;--rb-foreground: 220.9 39.3% 11%;--rb-card: 0 0% 100%;--rb-card-foreground: 220.9 39.3% 11%;--rb-muted: 220 14.3% 95.9%;--rb-muted-foreground: 220 8.9% 46.1%;--rb-primary: 221.2 83.2% 53.3%;--rb-primary-foreground: 0 0% 100%;--rb-destructive: 0 84.2% 60.2%;--rb-destructive-foreground: 0 0% 100%;--rb-border: 220 13% 91%;color-scheme:light}.dark{--rb-background: 222.2 84% 4.9%;--rb-foreground: 210 40% 98%;--rb-card: 222.2 84% 4.9%;--rb-card-foreground: 210 40% 98%;--rb-muted: 217.2 32.6% 17.5%;--rb-muted-foreground: 215 20.2% 65.1%;--rb-primary: 217.2 91.2% 59.8%;--rb-primary-foreground: 222.2 84% 4.9%;--rb-destructive: 0 62.8% 30.6%;--rb-destructive-foreground: 210 40% 98%;--rb-border: 217.2 32.6% 17.5%;color-scheme:dark}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--rb-background: 222.2 84% 4.9%;--rb-foreground: 210 40% 98%;--rb-card: 222.2 84% 4.9%;--rb-card-foreground: 210 40% 98%;--rb-muted: 217.2 32.6% 17.5%;--rb-muted-foreground: 215 20.2% 65.1%;--rb-primary: 217.2 91.2% 59.8%;--rb-primary-foreground: 222.2 84% 4.9%;--rb-destructive: 0 62.8% 30.6%;--rb-destructive-foreground: 210 40% 98%;--rb-border: 217.2 32.6% 17.5%;color-scheme:dark}}*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.page-bg{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:16px}.btn-add{height:120px;border:2px dashed hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));border-radius:8px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));transition:border-color .2s ease,transform .1s ease,box-shadow .2s ease;box-shadow:0 1px 2px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.04)}.btn-add:hover{border-color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));transform:translateY(-1px);box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.1)}.split-left{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;max-height:calc(100vh - 120px);padding-bottom:80px}.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-image:var(--rb-canvas-bg, none);background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto;padding-bottom:120px}.split-right>*{position:relative;z-index:1}.dark .split-right{--rb-canvas-bg: none !important}.split-third{flex:1 1 25%;border-right:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;overflow-x:hidden;max-height:calc(100vh - 120px)}.stage{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;align-self:center;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));box-shadow:0 18px 50px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.16),0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25);border-radius:8px}.stage .scroll-container{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.app-header{position:sticky;top:0;z-index:10;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}.app-header a{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));text-decoration:none}.app-header__brand{font-weight:700}.app-header__nav{display:flex;gap:16px}.warning{color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-size:12px;font-weight:600;margin-bottom:16px}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.breadcrumb__back{display:inline-flex;align-items:center;gap:4px;padding:0;border:none;background:none;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-weight:600;cursor:pointer;transition:color .2s ease}.breadcrumb__back:hover,.breadcrumb__back:focus-visible{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));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:hsl(var(--border, var(--rb-border, 220 13% 91%)));margin:0 4px}.breadcrumb__link{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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 hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));outline-offset:2px}.mobile-panel-toggle__button--active{background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.7);color:hsl(var(--card, var(--rb-card, 0 0% 100%)));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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));box-shadow:0 25px 60px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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;position:relative}.mobile-panel-toggle{display:flex}.split-panel__close{display:inline-flex}.editor-container__overlay{display:block;position:absolute;inset:0;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.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:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.55);backdrop-filter:blur(1px)}.rb-loading{position:relative;top:-20%;width:min(320px,70vw);max-width:360px;opacity:.95}.rb-empty-preview{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.rb-empty-preview__card{width:min(320px,100% - 32px);padding:14px 16px;border-radius:8px;border:1px dashed hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.72);backdrop-filter:blur(1px);text-align:center}.rb-empty-preview__title{font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:4px}.rb-empty-preview__hint{font-size:13px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.builder{display:flex;flex-direction:column;gap:12px}.builder__breadcrumbs{display:flex;flex-direction:row;gap:8px}.builder__breadcrumb{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;height:40px;line-height:37px;padding:0 4px;margin:0;background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));font-size:clamp(11px,1.3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:none;text-align:left}.builder__button-actions{position:relative;display:flex;align-items:stretch}.builder__button-actions-trigger{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;height:40px;width:40px;display:inline-flex;align-items:center;justify-content:center;border:none;margin-left:4px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));cursor:pointer;box-shadow:inset 0 0 0 1px hsl(var(--border, var(--rb-border, 220 13% 91%)))}.builder__button-actions-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;padding:6px;margin:0;list-style:none;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-radius:4px;box-shadow:0 10px 25px rgba(0,0,0,.15);border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));z-index:20}.builder__button-actions-item{width:100%;text-align:left;border:none;background:rgba(0,0,0,0);padding:8px 10px;border-radius:4px;cursor:pointer;font-size:12px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.builder__button-actions-item:hover{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.builder__button-actions-item:disabled{opacity:.5;cursor:not-allowed}.builder__button-actions-item--danger{color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))}.builder__sort-controls{display:flex;flex-direction:column;gap:4px}.builder__sort-button{width:32px;height:18px;border:none;border-radius:4px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));font-size:14px;cursor:pointer;line-height:1;box-shadow:inset 0 0 0 1px hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:0}.builder__sort-button:disabled{opacity:.4;cursor:not-allowed}.builder__button-condition{position:absolute;bottom:-10px;font-size:8px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding-left:16px;padding-right:4px}.builder__node{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;padding:6px;box-shadow:none}.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>.builder__button:first-child:has(.builder__sort-controls)~*{margin-left:48px}.builder__children::before{content:"";position:absolute;left:6px;top:24px;bottom:0;width:1px;background:hsl(var(--border, var(--rb-border, 220 13% 91%)))}.builder__button-condition-text{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.builder__button-children-count{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));white-space:nowrap}.builder__text,.builder__placeholder{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));font-size:12px}.rb-project-debug{display:flex;width:100%;height:calc(100vh - 60px);overflow:hidden;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.rb-project-debug__json{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.rb-project-debug__json::-webkit-scrollbar{width:8px;height:4px}.rb-project-debug__json{flex:0 0 34%;min-width:320px;max-width:640px;border-right:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;padding:16px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.rb-project-debug__preview{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.rb-project-debug__preview::-webkit-scrollbar{width:8px;height:4px}.rb-project-debug__preview{position:relative;flex:1 1 auto;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center;background-image:var(--rb-canvas-bg, none);background-position:center;background-repeat:repeat;background-size:500px auto}.dark .rb-project-debug__preview{--rb-canvas-bg: none !important}.rb-project-debug__error{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.25) rgba(0,0,0,0)}.rb-project-debug__error::-webkit-scrollbar{width:8px;height:4px}.rb-project-debug__error{flex:0 0 32%;min-width:280px;max-width:520px;border-left:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));overflow:auto;padding:16px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.rb-project-debug__title{margin:0 0 4px 0;font-size:16px;font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-project-debug__error-block{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;padding:12px;margin:0 0 12px 0;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.rb-project-debug__error-label{font-size:12px;font-weight:800;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin:0 0 4px 0}.rb-project-debug__error-pre{margin:0;padding:4px;border-radius:4px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:11px;line-height:1.45;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:220px}.rb-project-debug__meta{margin:0 0 12px 0;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.rb-project-debug__meta-label{font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-project-debug__toolbar{display:flex;gap:4px;align-items:center;margin:0 0 12px 0}.rb-project-debug__toolbar .editor-button{min-width:0;height:34px;padding:0 12px}.rb-project-debug__below-name{margin:0 0 12px 0}.rb-project-debug__error-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px 0}.rb-project-debug__error-head .rb-project-debug__title{margin:0}.rb-project-debug__error-head .editor-button{min-width:0;height:34px;padding:0 12px}.rb-project-validation__actions{display:flex;gap:4px;align-items:center}.rb-project-validation__actions .editor-button{min-width:0;height:34px;padding:0 12px}.rb-project-debug__code{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;line-height:1.5;white-space:pre;overflow:auto;max-height:calc(100vh - 60px - 160px);background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.rb-project-debug__code-editor{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:4px;width:100%;margin:0;padding:12px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;line-height:1.5;white-space:pre;overflow:auto;resize:vertical;min-height:220px;max-height:calc(100vh - 60px - 160px);background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-project-debug__json-error{margin:4px 0 0 0;font-size:12px;line-height:1.35;color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-weight:600;word-break:break-word}.rb-project-validation__error{margin:0 0 12px 0;font-size:13px;line-height:1.4;color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-weight:600}.rb-project-validation__error--render{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.rb-project-validation__error-label{font-weight:800}@media(max-width: 1000px){.rb-project-debug{flex-direction:column;height:calc(100vh - 60px)}.rb-project-debug__json{flex:0 0 auto;width:100%;min-width:0;max-width:none;border-right:none;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));max-height:45%}.rb-project-debug__preview{flex:1 1 auto;width:100%;min-height:0}.rb-project-debug__error{flex:0 0 auto;width:100%;min-width:0;max-width:none;border-left:none;border-top:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));max-height:40%}}.editor-controls{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}.editor-section{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer;transition:background .2s ease,box-shadow .2s ease}.btn:hover{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.06)}.input{display:inline-flex;align-items:center;height:32px;padding:0 8px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:hsl(var(--border, var(--rb-border, 220 13% 91%)));box-shadow:0 0 0 3px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.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 hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.3)}.builder-checkbox__native:checked+.builder-checkbox__control{background:linear-gradient(135deg, hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))), hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))));border-color:rgba(0,0,0,0);box-shadow:0 6px 14px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.35)}.builder-checkbox__native:checked+.builder-checkbox__control::after{border-color:hsl(var(--card, var(--rb-card, 0 0% 100%)));transform:rotate(45deg) scale(1)}.builder-checkbox__text{font-size:14px;line-height:1.4}.builder-checkbox__helper{font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)))}.editor-tab{cursor:pointer;border:1px solid rgba(0,0,0,0);border-top-left-radius:4px;border-top-right-radius:4px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--border, var(--rb-border, 220 13% 91%))) hsl(var(--border, var(--rb-border, 220 13% 91%))) hsl(var(--card, var(--rb-card, 0 0% 100%))) hsl(var(--border, var(--rb-border, 220 13% 91%)))}.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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)))}.editor-header__title{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-weight:600}.editor-header__devices{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:6px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer;font-size:12px}.editor-device-button.editor-device-button--selected{border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.editor-device-button__platform{position:absolute;bottom:4px;right:4px;background-color:hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));border-radius:50%;display:block;width:22px;height:22px;overflow:hidden}.editor-device-button__platform img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:11px;max-height:11px;width:auto;height:auto}.editor-device-button__edit{transition:opacity .2s ease,transform .2s ease}.editor-device-button__edit:hover{opacity:1 !important;transform:scale(1.1)}.editor-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}.editor-actions-dropdown{position:relative;display:inline-flex;align-items:center}.editor-actions-dropdown__trigger{min-width:auto;gap:8px}.editor-actions-dropdown__caret{font-size:16px;line-height:1;opacity:.8}.editor-actions-dropdown__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:220px;padding:6px;margin:0;list-style:none;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}.editor-actions-dropdown__submenu-root{position:relative}.editor-actions-dropdown__submenu-root::after{content:"";position:absolute;top:0;right:100%;width:12px;height:100%}.editor-actions-dropdown__submenu{display:none;position:absolute;top:0;right:100%;z-index:21;min-width:240px;max-height:320px;overflow:auto;padding:6px;margin:0;list-style:none;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}.editor-actions-dropdown__submenu-root:hover>.editor-actions-dropdown__submenu,.editor-actions-dropdown__submenu-root:focus-within>.editor-actions-dropdown__submenu{display:block}.editor-actions-dropdown__submenu-caret{margin-left:auto;font-size:14px;line-height:1;opacity:.7}.editor-actions-dropdown__item{width:100%;display:flex;align-items:center;justify-content:flex-start;height:36px;padding:0 10px;border:1px solid rgba(0,0,0,0);border-radius:8px;background:rgba(0,0,0,0);color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer;font-size:12px;font-weight:600;text-align:left}.editor-actions-dropdown__item--compact{height:32px;font-weight:500}.editor-actions-dropdown__item:hover{background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.12)}.editor-actions-dropdown__item:disabled{opacity:.5;cursor:default}.editor-actions-dropdown__item:focus-visible{outline:2px solid hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));outline-offset:2px}.editor-button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:120px;padding:0 12px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:6px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer}.debug-button{min-width:auto;height:auto;padding:4px 12px;font-size:12px;line-height:1.2;border-radius:999px;background:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.95);border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.15);box-shadow:0 2px 4px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.08)}.debug-button:hover{background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.3)}.editor-button:disabled{opacity:.6;cursor:default}.editor-save-button,.editor-save-previewconfig-button{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-weight:600;font-size:12px}.builder__add-button{width:100%;margin-top:12px;min-height:52px;border-style:dashed;border-color:hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));font-size:18px;line-height:1}.builder__add-button:hover{border-color:hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.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:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)))}.attributes-editor__mockable-name{padding:8px 0;font-weight:600;text-transform:capitalize}.attributes-editor__mockable-action{padding:8px 0;text-align:right}.attributes-editor__picker-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:6px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:6px 10px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer}.attributes-editor__picker-button-left{display:flex;align-items:center;gap:8px;min-width:0}.attributes-editor__picker-button-label{font-weight:600}.attributes-editor__picker-button-label--fill{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attributes-editor__picker-button-open{font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));flex:0 0 auto}.attributes-editor__font-modal{display:grid;gap:16px}.attributes-editor__font-modal-header{display:flex;align-items:center;gap:8px}.attributes-editor__font-modal-title{margin:0;font-weight:700}.attributes-editor__font-modal-spacer{flex:1}.attributes-editor__font-modal-note{font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.attributes-editor__font-modal-error{font-size:12px;color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))}.attributes-editor__font-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:8px;max-height:60vh;overflow:auto;padding-right:4px}.attributes-editor__font-option{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:6px 10px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));cursor:pointer}.attributes-editor__font-option:disabled{opacity:.6;cursor:not-allowed}.attributes-editor__font-option--active{border:2px solid hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.attributes-editor__font-option-name{font-size:12px;font-weight:600;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.attributes-editor__font-option--active .attributes-editor__font-option-name{font-weight:700}.attributes-editor__font-option-status{font-size:11px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));flex:0 0 auto}.attributes-editor-panel{padding:16px}.field-info-tooltip{position:relative}.field-info-tooltip__trigger{position:absolute;top:0;right:0;font-size:11px;line-height:1.2;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.4);outline-offset:2px}.field-info-tooltip__bubble{position:absolute;top:50%;right:100%;transform:translate(-8px, -50%);background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));padding:6px 10px;border-radius:4px;font-size:12px;line-height:1.4;width:220px;text-align:left;box-shadow:0 6px 16px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;padding:12px;margin-bottom:16px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.special-category-section__description{margin:8px 0 0;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.mockos-screen--home{padding:20px;background-color:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.mockos-screen--onboard{padding:20px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-screen--subscription{padding:20px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-screen__title{font-size:32px;font-weight:bold;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:16px}.mockos-screen__subtitle{font-size:16px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-screen__heading{font-size:24px;font-weight:bold;margin-bottom:20px}.mockos-screen__text{font-size:16px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:12px}.mockos-screen__plan{padding:16px;border-radius:8px;text-align:center;margin-bottom:12px}.mockos-screen__plan--premium{background-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-screen__plan--basic{background-color:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.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:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.3)}.mockos-launcher__app-icon svg{width:100%;height:100%;display:block}.mockos-launcher__app-name{font-size:12px;color:hsl(var(--card, var(--rb-card, 0 0% 100%)));text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mockos-modal-overlay{position:absolute;inset:0;display:flex;z-index:9999;background-color:rgba(0, 0, 0, var(--mockos-overlay-alpha, 0.5))}.mockos-modal-overlay--ios{--mockos-overlay-alpha: 0.4}.mockos-modal-overlay--android{--mockos-overlay-alpha: 0.5}.mockos-modal-overlay--center{align-items:center;justify-content:center;padding:20px}.mockos-modal-overlay--bottom{align-items:flex-end;justify-content:stretch;padding:0}.mockos-permission-modal{width:100%}.mockos-permission-modal--ios{max-width:270px;overflow:hidden;border-radius:14px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.95);backdrop-filter:blur(20px)}.mockos-permission-modal--android{max-width:280px;border-radius:4px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)));box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)}.mockos-permission-modal__content{padding:20px 16px}.mockos-permission-modal__content--center{text-align:center}.mockos-permission-modal__title{font-size:17px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));margin-bottom:8px;line-height:1.3}.mockos-permission-modal__title--android{font-size:20px;font-weight:500;margin-bottom:16px;line-height:1.2}.mockos-permission-modal__message{font-size:13px;line-height:1.4;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-permission-modal__message--android{font-size:16px;line-height:1.5}.mockos-permission-modal__actions{display:flex}.mockos-permission-modal__actions--ios{border-top:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.65)}.mockos-permission-modal__actions--android{padding:8px 8px 8px 0;justify-content:flex-end;gap:8px}.mockos-permission-modal__button{background:rgba(0,0,0,0);border:none;cursor:pointer;font:inherit}.mockos-permission-modal__button--ios{flex:1;padding:11px 0;font-size:17px;font-weight:400;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.mockos-permission-modal__actions--ios .mockos-permission-modal__button--ios:first-child{border-right:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.65)}.mockos-permission-modal__button--bold{font-weight:600}.mockos-permission-modal__button--android{padding:8px 16px;font-size:14px;font-weight:500;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.mockos-permission-modal__button--deny{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-permission-modal__button--allow{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.mockos-subscription-sheet{width:100%;border-top-left-radius:16px;border-top-right-radius:16px;overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom));transform:translateY(0);background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)))}.mockos-subscription-sheet--ios{background-color:hsl(var(--card, var(--rb-card, 0 0% 100%))/0.96);backdrop-filter:blur(20px);box-shadow:0 -12px 30px rgba(0,0,0,.18),0 -2px 6px rgba(0,0,0,.08)}.mockos-subscription-sheet--android{box-shadow:0 -10px 20px rgba(0,0,0,.22),0 -2px 6px rgba(0,0,0,.14)}.mockos-subscription-sheet__handle{width:44px;height:5px;border-radius:999px;background-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.18);margin:10px auto 0}.mockos-subscription-sheet__content{padding:14px 16px 10px}.mockos-subscription-sheet__content--ios{padding:10px 16px 10px;text-align:center}.mockos-subscription-sheet__top-actions{display:flex;justify-content:flex-end;margin-bottom:6px}.mockos-subscription-sheet__android-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.mockos-subscription-sheet__close{width:28px;height:28px;border-radius:999px;border:none;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.06);color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.55);font-size:18px;line-height:28px;cursor:pointer}.mockos-subscription-sheet__title{font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.mockos-subscription-sheet__title--ios{font-size:15px;margin-bottom:8px;line-height:1.3;letter-spacing:.2px}.mockos-subscription-sheet__title--android{font-size:16px}.mockos-subscription-sheet__subtitle{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));line-height:1.5}.mockos-subscription-sheet__subtitle--ios{font-size:13px;line-height:1.4}.mockos-subscription-sheet__subtitle--android{margin-top:8px;font-size:14px}.mockos-subscription-sheet__card{margin-top:12px;padding:10px 12px;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.04);text-align:left}.mockos-subscription-sheet__card--ios{border-radius:12px}.mockos-subscription-sheet__card--android{margin-top:14px;border-radius:10px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.7)}.mockos-subscription-sheet__row{display:flex;align-items:center;gap:10px}.mockos-subscription-sheet__row--space-between{justify-content:space-between}.mockos-subscription-sheet__icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(88, 86, 214, 0.22));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.7)}.mockos-subscription-sheet__meta{flex:1;min-width:0}.mockos-subscription-sheet__meta--android{min-width:0}.mockos-subscription-sheet__product-id{font-size:14px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.9);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockos-subscription-sheet__meta-subtitle{margin-top:2px;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))/0.95)}.mockos-subscription-sheet__price{font-size:13px;font-weight:700;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.86)}.mockos-subscription-sheet__actions{display:flex}.mockos-subscription-sheet__actions--ios{border-top:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.6)}.mockos-subscription-sheet__actions--android{padding:10px 12px 12px;justify-content:flex-end;gap:8px}.mockos-subscription-sheet__action{background:rgba(0,0,0,0);border:none;cursor:pointer;font:inherit}.mockos-subscription-sheet__action--ios{flex:1;padding:13px 0;font-size:17px;font-weight:400;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.mockos-subscription-sheet__actions--ios .mockos-subscription-sheet__action--ios:first-child{border-right:.5px solid hsl(var(--border, var(--rb-border, 220 13% 91%))/0.6)}.mockos-subscription-sheet__action--bold{font-weight:600}.mockos-subscription-sheet__action--android{padding:10px 16px;font-size:14px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.mockos-subscription-sheet__action--cancel{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.mockos-subscription-sheet__action--primary{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.12);border-radius:999px;font-weight:700}.rb-bottom-bar{position:fixed;left:50%;transform:translateX(-76%);bottom:10px;z-index:200;height:50px;border-radius:24px;background-color:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 10px;gap:10px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));box-shadow:0 8px 20px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.08)}.rb-bottom-bar__button{appearance:none;border:none;background:rgba(0,0,0,0);padding:8px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.rb-bottom-bar__button.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));background:color-mix(in srgb, hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))), transparent 92%);box-shadow:0 0 10px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.18)}.rb-bottom-bar__button+.rb-bottom-bar__button{border-left:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding-left:14px;margin-left:4px}.rb-bottom-bar__button--rtl{gap:6px;padding-right:10px}.rb-bottom-bar__rtl-text{font-size:12px;font-weight:700;letter-spacing:.3px;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-bottom-bar__spacer{flex:1 1 auto}.rb-bottom-bar__langs{display:inline-flex;align-items:center;gap:0;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.rb-bottom-bar__lang{appearance:none;border:none;background:rgba(0,0,0,0);padding:6px 6px;cursor:pointer;font-size:12px;font-weight:700;text-transform:lowercase;color:inherit}.rb-bottom-bar__lang.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));text-shadow:0 0 12px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.25)}.rb-bottom-bar__lang+.rb-bottom-bar__lang{border-left:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));margin-left:8px;padding-left:14px}.onboard__separator{height:1px;width:100%}.rb-webview{position:relative;overflow:hidden}.rb-webview__overlay{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.rb-webview__loader{width:var(--rb-webview-loader-size, 30px);height:var(--rb-webview-loader-size, 30px);border-radius:50%;border:var(--rb-webview-loader-border-width, 3px) solid rgba(0,0,0,0);border-top-color:currentColor;animation:rb-webview-spin var(--rb-webview-loader-duration, 1s) linear infinite}@keyframes rb-webview-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.rb-webview__frame-wrapper{display:flex;flex-direction:column;position:relative}.rb-webview__frame-inner{flex:1;min-height:0;position:relative}.rb-webview__frame{width:100%;height:100%;border:none;transition:opacity .3s ease-in-out}.rb-checkbox{display:flex;align-items:flex-start}.rb-checkbox__box{flex-shrink:0;display:flex;justify-content:center;align-items:center;margin-top:2px;transition:all .2s}.rb-checkbox__label{flex:1}.modal{position:fixed;inset:0;z-index:10000}.modal__overlay{position:absolute;inset:0;background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.4);z-index:0}.modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:hsl(var(--card, var(--rb-card, 0 0% 100%)));border-radius:12px;box-shadow:0 10px 30px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/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 hsl(var(--border, var(--rb-border, 220 13% 91%)));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:hsl(var(--card, var(--rb-card, 0 0% 100%)));border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 10px 20px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.05)}.add-component-modal__group-title{font-size:14px;font-weight:600;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));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:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));box-shadow:0 10px 25px hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))/0.15);transform:translateY(-2px)}.add-component-modal__thumbnail{width:100%;aspect-ratio:4/3;border-radius:8px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));border:1px dashed hsl(var(--border, var(--rb-border, 220 13% 91%)));display:flex;align-items:center;justify-content:center;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.add-component-modal__title{font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.add-component-modal__empty{margin:12px 0;padding:16px;border:1px dashed hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:10px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));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:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));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 hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.1)}.color-modal__selected-label{margin:0;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));cursor:pointer}.color-modal__toggle-input{width:16px;height:16px;accent-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.color-modal__toggle-description{margin:0;font-size:12px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.color-modal__link-button{border:none;background:none;color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));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:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.color-modal__swatch{border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;padding:8px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));box-shadow:0 0 0 1px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))) inset}.color-modal__swatch-preview{width:100%;height:32px;border-radius:6px}.color-modal__swatch-preview--light{border:1px solid hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%))/0.1)}.color-modal__swatch-label{font-size:12px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.color-modal__swatch-value{font-size:11px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.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 hsl(var(--border, var(--rb-border, 220 13% 91%)));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:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.localication-modal__body{flex:1;min-height:0;padding:24px;display:flex;flex-direction:column;gap:16px;overflow:auto}.localication-modal__controls{display:flex;flex-direction:column;gap:12px}.localication-modal__editor{flex:1;min-height:0;overflow:auto;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.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(800px,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:140px;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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:12px;padding:12px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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 hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:12px;padding:12px;background:hsl(var(--card, var(--rb-card, 0 0% 100%)));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}.inspect-modal__content{width:calc(100vw - 32px);height:calc(100vh - 64px);max-width:900px;max-height:calc(100vh - 64px);padding:0;display:flex;flex-direction:column}.inspect-modal__header{padding:16px 24px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)))}.inspect-modal__tabs{display:flex;gap:0;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));padding:0 24px}.inspect-modal__tab{all:unset;cursor:pointer;padding:8px 16px;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));border-bottom:2px solid rgba(0,0,0,0);transition:color .15s,border-color .15s}.inspect-modal__tab:hover{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.inspect-modal__tab.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));border-bottom-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.inspect-modal__body{flex:1;min-height:0;overflow:auto;padding:24px}.inspect-modal__empty{margin:0;font-size:13px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.inspect-modal__section-title{margin:16px 0 8px;font-size:13px;font-weight:600;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.inspect-modal__section-title:first-child{margin-top:0}.inspect-modal__table-wrap{display:flex;flex-direction:column}.inspect-modal__table{width:100%;border-collapse:collapse;font-size:12px}.inspect-modal__table th{text-align:left;padding:6px 8px;font-weight:600;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));white-space:nowrap}.inspect-modal__table td{padding:6px 8px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));vertical-align:top;color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.inspect-modal__table tr:last-child td{border-bottom:none}.inspect-modal__cell-key{font-family:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",monospace;font-size:11px;word-break:break-all;max-width:320px}.inspect-modal__cell-key--nested{padding-left:24px}.inspect-modal__cell-value{font-family:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",monospace;font-size:11px;word-break:break-all;display:flex;align-items:center;gap:4px}.inspect-modal__badge{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;font-weight:500;white-space:nowrap}.inspect-modal__badge--default{background:hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)))}.inspect-modal__badge--custom{background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));color:hsl(var(--primary-foreground, var(--rb-primary-foreground, 0 0% 100%)))}.inspect-modal__color-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));flex-shrink:0}.inspect-modal__separator-row td{font-weight:600;font-size:13px;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));padding-top:16px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)))}.prompt-manager-modal__content{width:calc(100vw - 32px);height:calc(100vh - 32px);max-width:1400px;max-height:calc(100vh - 32px);padding:0;display:flex;flex-direction:column}.prompt-manager-modal__header{padding:16px 24px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));display:flex;align-items:center;justify-content:space-between}.prompt-manager-modal__tabs{display:flex;padding:0 24px;border-bottom:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))}.prompt-manager-modal__tab{padding:16px 24px;font-size:14px;font-weight:500;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));background:none;border:none;border-bottom:2px solid rgba(0,0,0,0);cursor:pointer;transition:all .2s ease}.prompt-manager-modal__tab:hover{color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.prompt-manager-modal__tab.is-active{color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));border-bottom-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.prompt-manager-modal__body{flex:1;min-height:0;padding:24px;display:flex;flex-direction:column;overflow:hidden}.prompt-manager-modal__editor-wrap{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}.prompt-manager-modal__toolbar{display:flex;align-items:center;justify-content:space-between}.prompt-manager-modal__editor{flex:1;width:100%;height:100%;resize:none;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));border-radius:8px;padding:16px;font-family:"ui-monospace","SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;font-size:13px;line-height:1.5;background:hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));outline:none}.prompt-manager-modal__editor:focus{border-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));box-shadow:0 0 0 2px color-mix(in srgb, hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%))), transparent 90%)}.create-device-modal{width:100%;max-width:480px}.create-device-modal .modal__body{padding:16px;display:flex;flex-direction:column;gap:12px}.create-device-form__group{display:flex;flex-direction:column;gap:4px}.create-device-form__row{display:flex;gap:12px}.create-device-form__row>*{flex:1}.create-device-form__label{font-size:12px;font-weight:600;color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));text-transform:uppercase;letter-spacing:.5px}.create-device-form__error{color:hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));font-size:11px;margin-top:2px}.create-device-form__footer{margin-top:12px;display:flex;justify-content:flex-end}.editor-input{height:36px;padding:0 10px;border-radius:6px;border:1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)));background:hsl(var(--card, var(--rb-card, 0 0% 100%)));color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));font-family:inherit;font-size:14px;width:100%;transition:border-color .2s ease,box-shadow .2s ease}.editor-input:focus{outline:none;border-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));box-shadow:0 0 0 3px hsl(var(--rb-primary)/0.15)}.editor-input::placeholder{color:hsl(var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)));opacity:.5}select.editor-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:24px}.editor-button--primary{background:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));color:hsl(var(--card, var(--rb-card, 0 0% 100%)));font-weight:600;border-color:hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)))}.editor-button--primary:hover{background:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));border-color:hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)))}.device-selector-modal__search-container{padding:0 16px;margin-top:16px;margin-bottom:8px;display:flex;gap:12px;align-items:center}.device-selector-modal__search-container .editor-input{flex:1}.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}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}
|
package/package.json
CHANGED
package/src/.DS_Store
ADDED
|
Binary file
|
|
Binary file
|
package/src/assets/meta.json
CHANGED
|
@@ -70,6 +70,7 @@ function validationArrayToRules(validation: string[] | undefined): {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
/** FormCheckbox wraps Checkbox with RHF; UI and styling come from Checkbox. */
|
|
73
|
+
/* eslint-disable react/prop-types */
|
|
73
74
|
export function FormCheckbox({ node }: FormCheckboxComponentProps) {
|
|
74
75
|
useLogRender('FormCheckbox');
|
|
75
76
|
node = useNode(node);
|
|
@@ -104,3 +105,4 @@ export function FormCheckbox({ node }: FormCheckboxComponentProps) {
|
|
|
104
105
|
/>
|
|
105
106
|
);
|
|
106
107
|
}
|
|
108
|
+
/* eslint-enable react/prop-types */
|
|
@@ -40,10 +40,9 @@ export function Text({ node }: TextComponentProps) {
|
|
|
40
40
|
}, [localize, keyOrText, translateCounter]);
|
|
41
41
|
|
|
42
42
|
const styleBag = node.attributes?.styles as unknown as
|
|
43
|
-
| { adjustsFontSizeToFit?: boolean
|
|
43
|
+
| { adjustsFontSizeToFit?: boolean }
|
|
44
44
|
| undefined;
|
|
45
45
|
const adjustsFontSizeToFit = styleBag?.adjustsFontSizeToFit ?? false;
|
|
46
|
-
const showEllipsis = styleBag?.showEllipsis ?? false;
|
|
47
46
|
const numberOfLines = (node.attributes as any)?.numberOfLines;
|
|
48
47
|
|
|
49
48
|
useLayoutEffect(() => {
|
|
@@ -118,7 +117,7 @@ export function Text({ node }: TextComponentProps) {
|
|
|
118
117
|
}
|
|
119
118
|
|
|
120
119
|
return next;
|
|
121
|
-
}, [
|
|
120
|
+
}, [autoFontSizePx, numberOfLines, adjustsFontSizeToFit]);
|
|
122
121
|
|
|
123
122
|
const style = useMergedStyle(
|
|
124
123
|
useMergedStyle(textStyle, extraStyle),
|
|
@@ -13,6 +13,7 @@ type DeviceButtonProps = {
|
|
|
13
13
|
onSelect: (device: Device) => void;
|
|
14
14
|
isFavorite?: boolean;
|
|
15
15
|
onToggleFavorite?: (device: Device, e: React.MouseEvent) => void;
|
|
16
|
+
onEdit?: (device: Device, e: React.MouseEvent) => void;
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
export function DeviceButton({
|
|
@@ -21,6 +22,7 @@ export function DeviceButton({
|
|
|
21
22
|
onSelect,
|
|
22
23
|
isFavorite,
|
|
23
24
|
onToggleFavorite,
|
|
25
|
+
onEdit,
|
|
24
26
|
}: DeviceButtonProps) {
|
|
25
27
|
const platformIcon = platformIcons[device.platform];
|
|
26
28
|
const aspect =
|
|
@@ -74,10 +76,41 @@ export function DeviceButton({
|
|
|
74
76
|
{device.name} <br />
|
|
75
77
|
{device.width}×{device.height} ({aspect})
|
|
76
78
|
{platformIcon && (
|
|
77
|
-
<span>
|
|
79
|
+
<span className="editor-device-button__platform">
|
|
78
80
|
<img src={platformIcon} alt="" aria-hidden="true" />
|
|
79
81
|
</span>
|
|
80
82
|
)}
|
|
83
|
+
{onEdit && (
|
|
84
|
+
<span
|
|
85
|
+
className="editor-device-button__edit"
|
|
86
|
+
onClick={(e) => {
|
|
87
|
+
e.stopPropagation();
|
|
88
|
+
onEdit(device, e);
|
|
89
|
+
}}
|
|
90
|
+
title="Edit device"
|
|
91
|
+
style={{
|
|
92
|
+
position: 'absolute',
|
|
93
|
+
bottom: 4,
|
|
94
|
+
left: 4,
|
|
95
|
+
cursor: 'pointer',
|
|
96
|
+
opacity: 0.5,
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
99
|
+
<svg
|
|
100
|
+
width="12"
|
|
101
|
+
height="12"
|
|
102
|
+
viewBox="0 0 24 24"
|
|
103
|
+
fill="none"
|
|
104
|
+
stroke="currentColor"
|
|
105
|
+
strokeWidth="2"
|
|
106
|
+
strokeLinecap="round"
|
|
107
|
+
strokeLinejoin="round"
|
|
108
|
+
>
|
|
109
|
+
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|
110
|
+
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|
111
|
+
</svg>
|
|
112
|
+
</span>
|
|
113
|
+
)}
|
|
81
114
|
</button>
|
|
82
115
|
);
|
|
83
116
|
}
|
|
@@ -11,6 +11,7 @@ import { DeviceSelectorModal } from '../modals/DeviceSelectorModal';
|
|
|
11
11
|
import { toast } from 'react-toastify';
|
|
12
12
|
import { getSamples } from '../assets/samples/getSamples';
|
|
13
13
|
import type { Project } from '../types/Project';
|
|
14
|
+
import { useCustomDeviceStore } from '../store/customDeviceStore';
|
|
14
15
|
|
|
15
16
|
const devices = getDevices();
|
|
16
17
|
interface EditorHeaderProps {
|
|
@@ -53,14 +54,31 @@ export function EditorHeader({
|
|
|
53
54
|
toggleFavoriteDevice: s.toggleFavoriteDevice,
|
|
54
55
|
}));
|
|
55
56
|
|
|
57
|
+
const { customDevices } = useCustomDeviceStore();
|
|
56
58
|
const headerDevices = useMemo(() => {
|
|
59
|
+
// 1. Get all potential devices
|
|
60
|
+
const allAvailable = [...customDevices, ...devices];
|
|
61
|
+
|
|
62
|
+
// 2. Filter favorites
|
|
57
63
|
const favs = favoriteDevices
|
|
58
|
-
.map((name) =>
|
|
64
|
+
.map((name) => allAvailable.find((d) => d.name === name))
|
|
59
65
|
.filter((d): d is Device => d !== undefined);
|
|
60
66
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
67
|
+
// 3. Get others (custom first, then default)
|
|
68
|
+
const others = allAvailable.filter(
|
|
69
|
+
(d) => !favoriteDevices.includes(d.name),
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Combine and limit to 5
|
|
73
|
+
const top5 = [...favs, ...others].slice(0, 5);
|
|
74
|
+
|
|
75
|
+
// If selected device is not in the top 5, append it at the end
|
|
76
|
+
if (selectedDevice && !top5.some((d) => d.name === selectedDevice.name)) {
|
|
77
|
+
return [...top5, selectedDevice];
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return top5;
|
|
81
|
+
}, [favoriteDevices, customDevices, selectedDevice]);
|
|
64
82
|
|
|
65
83
|
const sortedSamples = useMemo(() => {
|
|
66
84
|
const weight = (t?: Project['type']) => {
|