@developer_tribe/react-builder 1.0.7 → 1.0.8
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/styles.css +1 -1
- package/package.json +1 -1
- package/src/components/BottomBar.tsx +45 -45
- package/src/pages/ProjectPage.tsx +46 -46
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:hsl(var(--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, 220 14.3% 95.9%))}.page-bg{background:hsl(var(--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, 220 8.9% 46.1%));border-radius:8px;background:hsl(var(--card, 0 0% 100%));cursor:pointer;font-weight:600;color:hsl(var(--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, 220.9 39.3% 11%)/0.04)}.btn-add:hover{border-color:hsl(var(--muted-foreground, 220 8.9% 46.1%));transform:translateY(-1px);box-shadow:0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%)/0.1)}.split-left{scrollbar-width:thin;scrollbar-color:hsl(var(--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, 220 13% 91%));overflow:auto}.split-right{position:relative;display:flex;flex-direction:column;flex:1 1 45%;width:100%;height:auto;max-height:calc(100vh - 120px);overflow:auto;padding:16px;background-image:var(--rb-canvas-bg, none);background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto}.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, 220 13% 91%));overflow:auto;overflow-x:hidden;max-height:calc(100vh - 120px)}.stage{background:hsl(var(--card, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:4px;align-self:center;border:1px solid hsl(var(--border, 220 13% 91%));box-shadow:0 18px 50px hsl(var(--foreground, 220.9 39.3% 11%)/0.16),0 6px 16px hsl(var(--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, 220.9 39.3% 11%)/0.25);border-radius:8px}.stage .scroll-container{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, 220.9 39.3% 11%)/0.25) rgba(0,0,0,0)}.rb-node-selected{border:1px solid hsl(var(--primary, 221.2 83.2% 53.3%))}.app-header{position:sticky;top:0;z-index:10;background:hsl(var(--card, 0 0% 100%));border-bottom:1px solid hsl(var(--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, 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, 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, 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, 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, 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, 220 13% 91%));margin:0 4px}.breadcrumb__link{color:hsl(var(--foreground, 220.9 39.3% 11%));text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:hsl(var(--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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 221.2 83.2% 53.3%));outline-offset:2px}.mobile-panel-toggle__button--active{background:hsl(var(--foreground, 220.9 39.3% 11%));color:hsl(var(--card, 0 0% 100%));border-color:hsl(var(--foreground, 220.9 39.3% 11%));box-shadow:0 6px 16px hsl(var(--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, 220.9 39.3% 11%)/0.7);color:hsl(var(--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, 220 14.3% 95.9%));box-shadow:0 25px 60px hsl(var(--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;padding-bottom:120px;position:relative}.mobile-panel-toggle{display:flex}.split-panel__close{display:inline-flex}.editor-container__overlay{display:block;position:absolute;inset:0;background:hsl(var(--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, 0 0% 100%)/0.55);backdrop-filter:blur(1px)}.rb-loading{position:relative;top:-20%;width:min(320px,70vw);max-width:360px;opacity:.95}.builder{display:flex;flex-direction:column;gap:12px}.builder__breadcrumbs{display:flex;flex-direction:row;gap:8px}.builder__breadcrumb{color:hsl(var(--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, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:4px;height:40px;line-height:37px;padding:0 4px;margin:0;background:hsl(var(--primary, 221.2 83.2% 53.3%));color:hsl(var(--card, 0 0% 100%));font-size:clamp(11px,1.3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.builder__sort-controls{display:flex;flex-direction:column;gap:4px}.builder__sort-button{width:32px;height:18px;border:none;border-radius:4px;background:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 220 13% 91%));padding:0}.builder__sort-button:disabled{opacity:.4;cursor:not-allowed}.builder__button-condition{position:absolute;bottom:-10px;font-size:8px}.builder__node{background:hsl(var(--card, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:4px;padding:6px}.builder__node-type{margin:0 0 8px 0;font-weight:600}.builder__children{position:relative;display:flex;flex-direction:column;gap:16px}.builder__children>:not(:first-child){margin-left:16px}.builder__children::before{content:"";position:absolute;left:6px;top:24px;bottom:0;width:1px;background:hsl(var(--border, 220 13% 91%))}.builder__text,.builder__placeholder{color:hsl(var(--muted-foreground, 220 8.9% 46.1%));font-size:12px}.editor-controls{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}.editor-section{background:hsl(var(--card, 0 0% 100%));border:1px solid hsl(var(--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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));cursor:pointer;transition:background .2s ease,box-shadow .2s ease}.btn:hover{background:hsl(var(--background, 220 14.3% 95.9%));box-shadow:0 6px 16px hsl(var(--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, 220 13% 91%));border-radius:8px;background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220 13% 91%));box-shadow:0 0 0 3px hsl(var(--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, 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, 220 13% 91%));background:hsl(var(--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, 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, 221.2 83.2% 53.3%)/0.3)}.builder-checkbox__native:checked+.builder-checkbox__control{background:linear-gradient(135deg, hsl(var(--foreground, 220.9 39.3% 11%)), hsl(var(--primary, 221.2 83.2% 53.3%)));border-color:rgba(0,0,0,0);box-shadow:0 6px 14px hsl(var(--primary, 221.2 83.2% 53.3%)/0.35)}.builder-checkbox__native:checked+.builder-checkbox__control::after{border-color:hsl(var(--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, 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, 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, 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, 0 0% 100%));border-color:hsl(var(--border, 220 13% 91%)) hsl(var(--border, 220 13% 91%)) hsl(var(--card, 0 0% 100%)) hsl(var(--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, 220 14.3% 95.9%));border-bottom:1px solid hsl(var(--border, 220 13% 91%))}.editor-header__title{color:hsl(var(--foreground, 220.9 39.3% 11%));font-weight:600}.editor-header__devices{scrollbar-width:thin;scrollbar-color:hsl(var(--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, 220 13% 91%));border-radius:6px;background:hsl(var(--card, 0 0% 100%));color:hsl(var(--foreground, 220.9 39.3% 11%));cursor:pointer;font-size:12px}.editor-device-button.editor-device-button--selected{border-color:hsl(var(--foreground, 220.9 39.3% 11%))}.editor-device-button img{position:absolute;bottom:4px;right:4px;width:16px;height:16px}.editor-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}.editor-button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:120px;padding:0 12px;border:1px solid hsl(var(--border, 220 13% 91%));border-radius:6px;background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 0 0% 100%)/0.95);border-color:hsl(var(--foreground, 220.9 39.3% 11%)/0.15);box-shadow:0 2px 4px hsl(var(--foreground, 220.9 39.3% 11%)/0.08)}.debug-button:hover{background:hsl(var(--card, 0 0% 100%));border-color:hsl(var(--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, 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, 220 13% 91%));background:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 221.2 83.2% 53.3%));color:hsl(var(--card, 0 0% 100%));font-size:18px;line-height:1}.builder__add-button:hover{border-color:hsl(var(--border, 220 13% 91%));background:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 220 13% 91%));background:hsl(var(--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, 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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220.9 39.3% 11%));color:hsl(var(--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, 220 13% 91%));background:hsl(var(--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, 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}.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, 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, 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, 220.9 39.3% 11%));color:hsl(var(--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, 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, 220 13% 91%));border-radius:8px;padding:12px;margin-bottom:16px;background:hsl(var(--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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220.9 39.3% 11%));color:hsl(var(--card, 0 0% 100%));border-color:hsl(var(--foreground, 220.9 39.3% 11%))}.special-category-section__description{margin:8px 0 0;color:hsl(var(--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, 220.9 39.3% 11%))}.mockos-screen--home{padding:20px;background-color:hsl(var(--background, 220 14.3% 95.9%))}.mockos-screen--onboard{padding:20px;background-color:hsl(var(--card, 0 0% 100%))}.mockos-screen--subscription{padding:20px;background-color:hsl(var(--card, 0 0% 100%))}.mockos-screen__title{font-size:32px;font-weight:bold;color:hsl(var(--foreground, 220.9 39.3% 11%));margin-bottom:16px}.mockos-screen__subtitle{font-size:16px;color:hsl(var(--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, 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, 221.2 83.2% 53.3%));color:hsl(var(--card, 0 0% 100%))}.mockos-screen__plan--basic{background-color:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 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, 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, 0 0% 100%));text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rb-bottom-bar{position:fixed;left:50%;transform:translateX(-66%);bottom:10px;z-index:200;height:50px;border-radius:24px;background-color:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220 13% 91%));box-shadow:0 8px 20px hsl(var(--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, 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, 221.2 83.2% 53.3%));background:hsl(var(--primary, 221.2 83.2% 53.3%));background:color-mix(in srgb, hsl(var(--primary, 221.2 83.2% 53.3%)), transparent 92%);box-shadow:0 0 18px hsl(var(--primary, 221.2 83.2% 53.3%)/0.28)}.rb-bottom-bar__button--preview.is-active{box-shadow:0 0 0 3px hsl(var(--primary, 221.2 83.2% 53.3%)/0.18),0 0 26px hsl(var(--primary, 221.2 83.2% 53.3%)/0.35)}.rb-bottom-bar__button:focus-visible{outline:none;box-shadow:0 0 0 3px hsl(var(--primary, 221.2 83.2% 53.3%)/0.18),0 0 18px hsl(var(--primary, 221.2 83.2% 53.3%)/0.22)}.rb-bottom-bar__button+.rb-bottom-bar__button{border-left:1px solid hsl(var(--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, 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, 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, 221.2 83.2% 53.3%));text-shadow:0 0 12px hsl(var(--primary, 221.2 83.2% 53.3%)/0.25)}.rb-bottom-bar__lang+.rb-bottom-bar__lang{border-left:1px solid hsl(var(--border, 220 13% 91%));margin-left:8px;padding-left:14px}.modal{position:fixed;inset:0;z-index:10000}.modal__overlay{position:absolute;inset:0;background:hsl(var(--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, 0 0% 100%));border-radius:12px;box-shadow:0 10px 30px hsl(var(--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, 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, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 10px 20px hsl(var(--foreground, 220.9 39.3% 11%)/0.05)}.add-component-modal__group-title{font-size:14px;font-weight:600;color:hsl(var(--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, 220 13% 91%));border-radius:10px;background:hsl(var(--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, 221.2 83.2% 53.3%));box-shadow:0 10px 25px hsl(var(--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, 220 14.3% 95.9%));border:1px dashed hsl(var(--border, 220 13% 91%));display:flex;align-items:center;justify-content:center;color:hsl(var(--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, 220.9 39.3% 11%))}.add-component-modal__empty{margin:12px 0;padding:16px;border:1px dashed hsl(var(--border, 220 13% 91%));border-radius:10px;color:hsl(var(--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, 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, 220.9 39.3% 11%)/0.1)}.color-modal__selected-label{margin:0;font-size:12px;color:hsl(var(--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, 220.9 39.3% 11%));cursor:pointer}.color-modal__toggle-input{width:16px;height:16px;accent-color:hsl(var(--primary, 221.2 83.2% 53.3%))}.color-modal__toggle-description{margin:0;font-size:12px;color:hsl(var(--muted-foreground, 220 8.9% 46.1%))}.color-modal__link-button{border:none;background:none;color:hsl(var(--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, 220 8.9% 46.1%))}.color-modal__swatch{border:1px solid hsl(var(--border, 220 13% 91%));border-radius:8px;padding:8px;background:hsl(var(--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, 220.9 39.3% 11%));box-shadow:0 0 0 1px hsl(var(--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, 220.9 39.3% 11%)/0.1)}.color-modal__swatch-label{font-size:12px;font-weight:600;color:hsl(var(--foreground, 220.9 39.3% 11%))}.color-modal__swatch-value{font-size:11px;color:hsl(var(--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, 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, 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__editor{flex:1;min-height:0;overflow:auto;border:1px solid hsl(var(--border, 220 13% 91%));border-radius:8px;background:hsl(var(--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(640px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.product-edit-modal__body{display:flex;flex-direction:column;gap:12px}.product-edit-modal__textarea{min-height:90px;padding:8px;resize:vertical}.product-presets-modal{width:min(960px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.product-presets-modal__body{display:flex;flex-direction:column;gap:16px}.product-presets-modal__section-title{margin:0;font-weight:700}.product-presets-modal__muted{margin:6px 0 0;opacity:.7}.product-presets-modal__grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:12px;margin-top:12px}.product-presets-modal__card{border:1px solid hsl(var(--border, 220 13% 91%));border-radius:12px;padding:12px;background:hsl(var(--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, 220 13% 91%));border-radius:12px;padding:12px;background:hsl(var(--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}.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom}.embla__slide{transform:translate3d(0, 0, 0);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{flex-wrap:wrap;margin-right:0;height:50px;margin:0 auto}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);--embla-dot-color: var(--detail-medium-contrast);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:max(2.6rem,var(--embla-dot-size, 1.4rem) + 1.2rem);height:max(2.6rem,var(--embla-dot-size, 1.4rem) + 1.2rem);display:flex;align-items:center;border-radius:50%}.embla__dot:after{background-color:var(--embla-dot-color);width:var(--embla-dot-size, 1.4rem);height:var(--embla-dot-size, 1.4rem);border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected{--embla-dot-color: var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}
|
|
1
|
+
*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:hsl(var(--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, 220 14.3% 95.9%))}.page-bg{background:hsl(var(--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, 220 8.9% 46.1%));border-radius:8px;background:hsl(var(--card, 0 0% 100%));cursor:pointer;font-weight:600;color:hsl(var(--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, 220.9 39.3% 11%)/0.04)}.btn-add:hover{border-color:hsl(var(--muted-foreground, 220 8.9% 46.1%));transform:translateY(-1px);box-shadow:0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%)/0.1)}.split-left{scrollbar-width:thin;scrollbar-color:hsl(var(--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, 220 13% 91%));overflow:auto}.split-right{position:relative;display:flex;flex-direction:column;flex:1 1 45%;width:100%;height:auto;max-height:calc(100vh - 120px);overflow:auto;padding:16px;background-image:var(--rb-canvas-bg, none);background-size:cover;background-position:center;background-repeat:repeat;background-size:500px auto}.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, 220 13% 91%));overflow:auto;overflow-x:hidden;max-height:calc(100vh - 120px)}.stage{background:hsl(var(--card, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:4px;align-self:center;border:1px solid hsl(var(--border, 220 13% 91%));box-shadow:0 18px 50px hsl(var(--foreground, 220.9 39.3% 11%)/0.16),0 6px 16px hsl(var(--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, 220.9 39.3% 11%)/0.25);border-radius:8px}.stage .scroll-container{scrollbar-width:thin;scrollbar-color:hsl(var(--foreground, 220.9 39.3% 11%)/0.25) rgba(0,0,0,0)}.rb-node-selected{border:1px solid hsl(var(--primary, 221.2 83.2% 53.3%))}.app-header{position:sticky;top:0;z-index:10;background:hsl(var(--card, 0 0% 100%));border-bottom:1px solid hsl(var(--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, 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, 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, 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, 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, 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, 220 13% 91%));margin:0 4px}.breadcrumb__link{color:hsl(var(--foreground, 220.9 39.3% 11%));text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:hsl(var(--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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 221.2 83.2% 53.3%));outline-offset:2px}.mobile-panel-toggle__button--active{background:hsl(var(--foreground, 220.9 39.3% 11%));color:hsl(var(--card, 0 0% 100%));border-color:hsl(var(--foreground, 220.9 39.3% 11%));box-shadow:0 6px 16px hsl(var(--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, 220.9 39.3% 11%)/0.7);color:hsl(var(--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, 220 14.3% 95.9%));box-shadow:0 25px 60px hsl(var(--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;padding-bottom:120px;position:relative}.mobile-panel-toggle{display:flex}.split-panel__close{display:inline-flex}.editor-container__overlay{display:block;position:absolute;inset:0;background:hsl(var(--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, 0 0% 100%)/0.55);backdrop-filter:blur(1px)}.rb-loading{position:relative;top:-20%;width:min(320px,70vw);max-width:360px;opacity:.95}.builder{display:flex;flex-direction:column;gap:12px}.builder__breadcrumbs{display:flex;flex-direction:row;gap:8px}.builder__breadcrumb{color:hsl(var(--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, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:4px;height:40px;line-height:37px;padding:0 4px;margin:0;background:hsl(var(--primary, 221.2 83.2% 53.3%));color:hsl(var(--card, 0 0% 100%));font-size:clamp(11px,1.3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.builder__sort-controls{display:flex;flex-direction:column;gap:4px}.builder__sort-button{width:32px;height:18px;border:none;border-radius:4px;background:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 220 13% 91%));padding:0}.builder__sort-button:disabled{opacity:.4;cursor:not-allowed}.builder__button-condition{position:absolute;bottom:-10px;font-size:8px}.builder__node{background:hsl(var(--card, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:4px;padding:6px}.builder__node-type{margin:0 0 8px 0;font-weight:600}.builder__children{position:relative;display:flex;flex-direction:column;gap:16px}.builder__children>:not(:first-child){margin-left:16px}.builder__children::before{content:"";position:absolute;left:6px;top:24px;bottom:0;width:1px;background:hsl(var(--border, 220 13% 91%))}.builder__text,.builder__placeholder{color:hsl(var(--muted-foreground, 220 8.9% 46.1%));font-size:12px}.editor-controls{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}.editor-section{background:hsl(var(--card, 0 0% 100%));border:1px solid hsl(var(--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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));cursor:pointer;transition:background .2s ease,box-shadow .2s ease}.btn:hover{background:hsl(var(--background, 220 14.3% 95.9%));box-shadow:0 6px 16px hsl(var(--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, 220 13% 91%));border-radius:8px;background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220 13% 91%));box-shadow:0 0 0 3px hsl(var(--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, 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, 220 13% 91%));background:hsl(var(--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, 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, 221.2 83.2% 53.3%)/0.3)}.builder-checkbox__native:checked+.builder-checkbox__control{background:linear-gradient(135deg, hsl(var(--foreground, 220.9 39.3% 11%)), hsl(var(--primary, 221.2 83.2% 53.3%)));border-color:rgba(0,0,0,0);box-shadow:0 6px 14px hsl(var(--primary, 221.2 83.2% 53.3%)/0.35)}.builder-checkbox__native:checked+.builder-checkbox__control::after{border-color:hsl(var(--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, 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, 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, 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, 0 0% 100%));border-color:hsl(var(--border, 220 13% 91%)) hsl(var(--border, 220 13% 91%)) hsl(var(--card, 0 0% 100%)) hsl(var(--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, 220 14.3% 95.9%));border-bottom:1px solid hsl(var(--border, 220 13% 91%))}.editor-header__title{color:hsl(var(--foreground, 220.9 39.3% 11%));font-weight:600}.editor-header__devices{scrollbar-width:thin;scrollbar-color:hsl(var(--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, 220 13% 91%));border-radius:6px;background:hsl(var(--card, 0 0% 100%));color:hsl(var(--foreground, 220.9 39.3% 11%));cursor:pointer;font-size:12px}.editor-device-button.editor-device-button--selected{border-color:hsl(var(--foreground, 220.9 39.3% 11%))}.editor-device-button img{position:absolute;bottom:4px;right:4px;width:16px;height:16px}.editor-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}.editor-button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:120px;padding:0 12px;border:1px solid hsl(var(--border, 220 13% 91%));border-radius:6px;background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 0 0% 100%)/0.95);border-color:hsl(var(--foreground, 220.9 39.3% 11%)/0.15);box-shadow:0 2px 4px hsl(var(--foreground, 220.9 39.3% 11%)/0.08)}.debug-button:hover{background:hsl(var(--card, 0 0% 100%));border-color:hsl(var(--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, 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, 220 13% 91%));background:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 221.2 83.2% 53.3%));color:hsl(var(--card, 0 0% 100%));font-size:18px;line-height:1}.builder__add-button:hover{border-color:hsl(var(--border, 220 13% 91%));background:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 220 13% 91%));background:hsl(var(--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, 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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220.9 39.3% 11%));color:hsl(var(--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, 220 13% 91%));background:hsl(var(--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, 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}.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, 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, 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, 220.9 39.3% 11%));color:hsl(var(--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, 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, 220 13% 91%));border-radius:8px;padding:12px;margin-bottom:16px;background:hsl(var(--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, 220 13% 91%));background:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220.9 39.3% 11%));color:hsl(var(--card, 0 0% 100%));border-color:hsl(var(--foreground, 220.9 39.3% 11%))}.special-category-section__description{margin:8px 0 0;color:hsl(var(--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, 220.9 39.3% 11%))}.mockos-screen--home{padding:20px;background-color:hsl(var(--background, 220 14.3% 95.9%))}.mockos-screen--onboard{padding:20px;background-color:hsl(var(--card, 0 0% 100%))}.mockos-screen--subscription{padding:20px;background-color:hsl(var(--card, 0 0% 100%))}.mockos-screen__title{font-size:32px;font-weight:bold;color:hsl(var(--foreground, 220.9 39.3% 11%));margin-bottom:16px}.mockos-screen__subtitle{font-size:16px;color:hsl(var(--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, 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, 221.2 83.2% 53.3%));color:hsl(var(--card, 0 0% 100%))}.mockos-screen__plan--basic{background-color:hsl(var(--background, 220 14.3% 95.9%));color:hsl(var(--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, 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, 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, 0 0% 100%));text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rb-bottom-bar{position:fixed;left:50%;transform:translateX(-66%);bottom:10px;z-index:200;height:50px;border-radius:24px;background-color:hsl(var(--card, 0 0% 100%));color:hsl(var(--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, 220 13% 91%));box-shadow:0 8px 20px hsl(var(--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, 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, 221.2 83.2% 53.3%));background:hsl(var(--primary, 221.2 83.2% 53.3%));background:color-mix(in srgb, hsl(var(--primary, 221.2 83.2% 53.3%)), transparent 92%);box-shadow:0 0 10px hsl(var(--primary, 221.2 83.2% 53.3%)/0.18)}.rb-bottom-bar__button+.rb-bottom-bar__button{border-left:1px solid hsl(var(--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, 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, 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, 221.2 83.2% 53.3%));text-shadow:0 0 12px hsl(var(--primary, 221.2 83.2% 53.3%)/0.25)}.rb-bottom-bar__lang+.rb-bottom-bar__lang{border-left:1px solid hsl(var(--border, 220 13% 91%));margin-left:8px;padding-left:14px}.modal{position:fixed;inset:0;z-index:10000}.modal__overlay{position:absolute;inset:0;background:hsl(var(--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, 0 0% 100%));border-radius:12px;box-shadow:0 10px 30px hsl(var(--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, 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, 0 0% 100%));border:1px solid hsl(var(--border, 220 13% 91%));border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 10px 20px hsl(var(--foreground, 220.9 39.3% 11%)/0.05)}.add-component-modal__group-title{font-size:14px;font-weight:600;color:hsl(var(--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, 220 13% 91%));border-radius:10px;background:hsl(var(--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, 221.2 83.2% 53.3%));box-shadow:0 10px 25px hsl(var(--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, 220 14.3% 95.9%));border:1px dashed hsl(var(--border, 220 13% 91%));display:flex;align-items:center;justify-content:center;color:hsl(var(--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, 220.9 39.3% 11%))}.add-component-modal__empty{margin:12px 0;padding:16px;border:1px dashed hsl(var(--border, 220 13% 91%));border-radius:10px;color:hsl(var(--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, 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, 220.9 39.3% 11%)/0.1)}.color-modal__selected-label{margin:0;font-size:12px;color:hsl(var(--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, 220.9 39.3% 11%));cursor:pointer}.color-modal__toggle-input{width:16px;height:16px;accent-color:hsl(var(--primary, 221.2 83.2% 53.3%))}.color-modal__toggle-description{margin:0;font-size:12px;color:hsl(var(--muted-foreground, 220 8.9% 46.1%))}.color-modal__link-button{border:none;background:none;color:hsl(var(--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, 220 8.9% 46.1%))}.color-modal__swatch{border:1px solid hsl(var(--border, 220 13% 91%));border-radius:8px;padding:8px;background:hsl(var(--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, 220.9 39.3% 11%));box-shadow:0 0 0 1px hsl(var(--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, 220.9 39.3% 11%)/0.1)}.color-modal__swatch-label{font-size:12px;font-weight:600;color:hsl(var(--foreground, 220.9 39.3% 11%))}.color-modal__swatch-value{font-size:11px;color:hsl(var(--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, 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, 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__editor{flex:1;min-height:0;overflow:auto;border:1px solid hsl(var(--border, 220 13% 91%));border-radius:8px;background:hsl(var(--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(640px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.product-edit-modal__body{display:flex;flex-direction:column;gap:12px}.product-edit-modal__textarea{min-height:90px;padding:8px;resize:vertical}.product-presets-modal{width:min(960px,100vw - 32px);max-height:90vh;padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.product-presets-modal__body{display:flex;flex-direction:column;gap:16px}.product-presets-modal__section-title{margin:0;font-weight:700}.product-presets-modal__muted{margin:6px 0 0;opacity:.7}.product-presets-modal__grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:12px;margin-top:12px}.product-presets-modal__card{border:1px solid hsl(var(--border, 220 13% 91%));border-radius:12px;padding:12px;background:hsl(var(--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, 220 13% 91%));border-radius:12px;padding:12px;background:hsl(var(--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}.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom}.embla__slide{transform:translate3d(0, 0, 0);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{flex-wrap:wrap;margin-right:0;height:50px;margin:0 auto}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);--embla-dot-color: var(--detail-medium-contrast);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:max(2.6rem,var(--embla-dot-size, 1.4rem) + 1.2rem);height:max(2.6rem,var(--embla-dot-size, 1.4rem) + 1.2rem);display:flex;align-items:center;border-radius:50%}.embla__dot:after{background-color:var(--embla-dot-color);width:var(--embla-dot-size, 1.4rem);height:var(--embla-dot-size, 1.4rem);border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected{--embla-dot-color: var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}
|
package/package.json
CHANGED
|
@@ -26,7 +26,7 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
|
|
|
26
26
|
const colorIcon: IconsType = 'colors';
|
|
27
27
|
|
|
28
28
|
const { appConfig, setAppConfig, previewMode, setPreviewMode } =
|
|
29
|
-
useRenderStore(s => ({
|
|
29
|
+
useRenderStore((s) => ({
|
|
30
30
|
appConfig: s.appConfig,
|
|
31
31
|
setAppConfig: s.setAppConfig,
|
|
32
32
|
previewMode: s.previewMode,
|
|
@@ -53,9 +53,9 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
|
|
|
53
53
|
<>
|
|
54
54
|
<div className={['rb-bottom-bar', className].filter(Boolean).join(' ')}>
|
|
55
55
|
<button
|
|
56
|
-
type=
|
|
56
|
+
type="button"
|
|
57
57
|
className={`rb-bottom-bar__button${themeIsActive ? ' is-active' : ''}`}
|
|
58
|
-
aria-label=
|
|
58
|
+
aria-label="Theme"
|
|
59
59
|
aria-pressed={themeIsActive}
|
|
60
60
|
onClick={() =>
|
|
61
61
|
setAppConfig({
|
|
@@ -64,85 +64,85 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
|
|
|
64
64
|
})
|
|
65
65
|
}
|
|
66
66
|
>
|
|
67
|
-
<Icon iconType={themeIcon} size={20} color=
|
|
67
|
+
<Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
|
|
68
68
|
</button>
|
|
69
69
|
|
|
70
70
|
<button
|
|
71
|
-
type=
|
|
71
|
+
type="button"
|
|
72
72
|
className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
|
|
73
73
|
rtlIsActive ? ' is-active' : ''
|
|
74
74
|
}`}
|
|
75
|
-
aria-label=
|
|
75
|
+
aria-label="RTL"
|
|
76
76
|
aria-pressed={rtlIsActive}
|
|
77
77
|
onClick={() =>
|
|
78
78
|
setAppConfig({ ...appConfig, isRtl: !(appConfig.isRtl ?? false) })
|
|
79
79
|
}
|
|
80
80
|
>
|
|
81
|
-
<Icon iconType={rtlIcon} size={18} color=
|
|
82
|
-
<span className=
|
|
81
|
+
<Icon iconType={rtlIcon} size={18} color="currentColor" alt="" />
|
|
82
|
+
<span className="rb-bottom-bar__rtl-text">RTL</span>
|
|
83
83
|
</button>
|
|
84
84
|
|
|
85
85
|
<button
|
|
86
|
-
type=
|
|
86
|
+
type="button"
|
|
87
87
|
className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
|
|
88
88
|
previewIsActive ? ' is-active' : ''
|
|
89
89
|
}`}
|
|
90
|
-
aria-label=
|
|
90
|
+
aria-label="Magic cursor tool"
|
|
91
91
|
aria-pressed={previewIsActive}
|
|
92
92
|
onClick={() => setPreviewMode(!previewMode)}
|
|
93
93
|
>
|
|
94
94
|
<Icon
|
|
95
95
|
iconType={magicCursorIcon}
|
|
96
96
|
size={20}
|
|
97
|
-
color=
|
|
98
|
-
alt=
|
|
97
|
+
color="currentColor"
|
|
98
|
+
alt=""
|
|
99
99
|
/>
|
|
100
100
|
</button>
|
|
101
101
|
|
|
102
102
|
<button
|
|
103
|
-
type=
|
|
103
|
+
type="button"
|
|
104
104
|
className={`rb-bottom-bar__button${isDebugOpen ? ' is-active' : ''}`}
|
|
105
|
-
aria-label=
|
|
105
|
+
aria-label="Debug"
|
|
106
106
|
aria-pressed={isDebugOpen}
|
|
107
107
|
onClick={() => setIsDebugOpen(true)}
|
|
108
108
|
>
|
|
109
|
-
<Icon iconType={debugIcon} size={20} color=
|
|
109
|
+
<Icon iconType={debugIcon} size={20} color="currentColor" alt="" />
|
|
110
110
|
</button>
|
|
111
111
|
|
|
112
112
|
<button
|
|
113
|
-
type=
|
|
113
|
+
type="button"
|
|
114
114
|
className={`rb-bottom-bar__button${
|
|
115
115
|
isLocalizationOpen ? ' is-active' : ''
|
|
116
116
|
}`}
|
|
117
|
-
aria-label=
|
|
117
|
+
aria-label="Localization"
|
|
118
118
|
aria-pressed={isLocalizationOpen}
|
|
119
119
|
onClick={() => setIsLocalizationOpen(true)}
|
|
120
120
|
>
|
|
121
121
|
<Icon
|
|
122
122
|
iconType={localizationIcon}
|
|
123
123
|
size={20}
|
|
124
|
-
color=
|
|
125
|
-
alt=
|
|
124
|
+
color="currentColor"
|
|
125
|
+
alt=""
|
|
126
126
|
/>
|
|
127
127
|
</button>
|
|
128
128
|
|
|
129
129
|
<button
|
|
130
|
-
type=
|
|
130
|
+
type="button"
|
|
131
131
|
className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
|
|
132
|
-
aria-label=
|
|
132
|
+
aria-label="Color"
|
|
133
133
|
aria-pressed={isColorsOpen}
|
|
134
134
|
onClick={() => setIsColorsOpen(true)}
|
|
135
135
|
>
|
|
136
|
-
<Icon iconType={colorIcon} size={20} color=
|
|
136
|
+
<Icon iconType={colorIcon} size={20} color="currentColor" alt="" />
|
|
137
137
|
</button>
|
|
138
138
|
|
|
139
|
-
<div className=
|
|
139
|
+
<div className="rb-bottom-bar__spacer" />
|
|
140
140
|
|
|
141
|
-
<div className=
|
|
142
|
-
{languages.map(language => (
|
|
141
|
+
<div className="rb-bottom-bar__langs" aria-label="Language">
|
|
142
|
+
{languages.map((language) => (
|
|
143
143
|
<button
|
|
144
144
|
key={language}
|
|
145
|
-
type=
|
|
145
|
+
type="button"
|
|
146
146
|
className={`rb-bottom-bar__lang${
|
|
147
147
|
activeLanguage === language ? ' is-active' : ''
|
|
148
148
|
}`}
|
|
@@ -175,38 +175,38 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
|
|
|
175
175
|
{isDebugOpen && (
|
|
176
176
|
<Modal
|
|
177
177
|
onClose={() => setIsDebugOpen(false)}
|
|
178
|
-
ariaLabelledBy=
|
|
179
|
-
className=
|
|
180
|
-
contentClassName=
|
|
178
|
+
ariaLabelledBy="debug-json-editor-title"
|
|
179
|
+
className="modal--large modal--scrollable"
|
|
180
|
+
contentClassName="localication-modal__content"
|
|
181
181
|
>
|
|
182
|
-
<div className=
|
|
183
|
-
<div className=
|
|
184
|
-
<h3 id=
|
|
182
|
+
<div className="modal__header localication-modal__header">
|
|
183
|
+
<div className="localication-modal__header-main">
|
|
184
|
+
<h3 id="debug-json-editor-title" className="modal__title">
|
|
185
185
|
Debug JSON
|
|
186
186
|
</h3>
|
|
187
|
-
<p className=
|
|
187
|
+
<p className="localication-modal__description">
|
|
188
188
|
Inspect and edit raw node JSON.
|
|
189
189
|
</p>
|
|
190
190
|
</div>
|
|
191
191
|
<button
|
|
192
|
-
type=
|
|
193
|
-
className=
|
|
192
|
+
type="button"
|
|
193
|
+
className="editor-button"
|
|
194
194
|
onClick={() => setIsDebugOpen(false)}
|
|
195
195
|
>
|
|
196
196
|
Close
|
|
197
197
|
</button>
|
|
198
198
|
</div>
|
|
199
|
-
<div className=
|
|
199
|
+
<div className="localication-modal__body">
|
|
200
200
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
201
201
|
<Checkbox
|
|
202
|
-
label=
|
|
202
|
+
label="Preview mode"
|
|
203
203
|
checked={previewMode}
|
|
204
204
|
onChange={setPreviewMode}
|
|
205
205
|
/>
|
|
206
206
|
<Checkbox
|
|
207
|
-
label=
|
|
207
|
+
label="Dark Mode"
|
|
208
208
|
checked={appConfig.theme === 'dark'}
|
|
209
|
-
onChange={checked =>
|
|
209
|
+
onChange={(checked) =>
|
|
210
210
|
setAppConfig({
|
|
211
211
|
...appConfig,
|
|
212
212
|
theme: checked ? 'dark' : 'light',
|
|
@@ -214,24 +214,24 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
|
|
|
214
214
|
}
|
|
215
215
|
/>
|
|
216
216
|
<Checkbox
|
|
217
|
-
label=
|
|
217
|
+
label="Is RTL"
|
|
218
218
|
checked={appConfig.isRtl ?? false}
|
|
219
|
-
onChange={checked =>
|
|
219
|
+
onChange={(checked) =>
|
|
220
220
|
setAppConfig({ ...appConfig, isRtl: checked })
|
|
221
221
|
}
|
|
222
222
|
/>
|
|
223
223
|
</div>
|
|
224
224
|
<div
|
|
225
|
-
className=
|
|
225
|
+
className="localication-modal__editor"
|
|
226
226
|
style={{ marginTop: 12 }}
|
|
227
227
|
>
|
|
228
228
|
<JsonTextEditor
|
|
229
|
-
rootName=
|
|
229
|
+
rootName="node"
|
|
230
230
|
value={data ?? {}}
|
|
231
|
-
onChange={next =>
|
|
231
|
+
onChange={(next) =>
|
|
232
232
|
setData(analyseAndProccess(next as Node) as Node)
|
|
233
233
|
}
|
|
234
|
-
className=
|
|
234
|
+
className="localication-modal__json-editor"
|
|
235
235
|
/>
|
|
236
236
|
</div>
|
|
237
237
|
</div>
|
|
@@ -53,7 +53,7 @@ export function ProjectPage({
|
|
|
53
53
|
setProjectName,
|
|
54
54
|
products,
|
|
55
55
|
benefits,
|
|
56
|
-
} = useRenderStore(s => ({
|
|
56
|
+
} = useRenderStore((s) => ({
|
|
57
57
|
current: s.current,
|
|
58
58
|
setCurrent: s.setCurrent,
|
|
59
59
|
setProjectColors: s.setProjectColors,
|
|
@@ -77,7 +77,7 @@ export function ProjectPage({
|
|
|
77
77
|
// Extra warning for deleting the root node (editorData)
|
|
78
78
|
if (nodeToDelete === editorData) {
|
|
79
79
|
const shouldDeleteRoot = window.confirm(
|
|
80
|
-
'You are about to delete the root component. This will clear the entire screen. Continue?'
|
|
80
|
+
'You are about to delete the root component. This will clear the entire screen. Continue?',
|
|
81
81
|
);
|
|
82
82
|
if (!shouldDeleteRoot) return;
|
|
83
83
|
setEditorData(null);
|
|
@@ -103,7 +103,7 @@ export function ProjectPage({
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
|
-
[editorData, current]
|
|
106
|
+
[editorData, current],
|
|
107
107
|
);
|
|
108
108
|
|
|
109
109
|
useEffect(() => {
|
|
@@ -144,7 +144,7 @@ export function ProjectPage({
|
|
|
144
144
|
}, [isMobile]);
|
|
145
145
|
|
|
146
146
|
const toggleMobilePanel = (panel: 'builder' | 'attributes') => {
|
|
147
|
-
setMobilePanel(prev => (prev === panel ? null : panel));
|
|
147
|
+
setMobilePanel((prev) => (prev === panel ? null : panel));
|
|
148
148
|
};
|
|
149
149
|
|
|
150
150
|
const closeMobilePanels = () => {
|
|
@@ -184,7 +184,7 @@ export function ProjectPage({
|
|
|
184
184
|
const showLoading = editorData === null || !minLoadingDelayDone;
|
|
185
185
|
|
|
186
186
|
return (
|
|
187
|
-
<div className=
|
|
187
|
+
<div className="container-full">
|
|
188
188
|
<EditorHeader
|
|
189
189
|
onSaveProject={() => {
|
|
190
190
|
logger.info('ProjectPage', 'save project', { name: project.name });
|
|
@@ -207,65 +207,65 @@ export function ProjectPage({
|
|
|
207
207
|
/>
|
|
208
208
|
{isMobile && (
|
|
209
209
|
<div
|
|
210
|
-
className=
|
|
211
|
-
role=
|
|
212
|
-
aria-label=
|
|
210
|
+
className="mobile-panel-toggle"
|
|
211
|
+
role="group"
|
|
212
|
+
aria-label="Editor panels"
|
|
213
213
|
>
|
|
214
214
|
<button
|
|
215
|
-
type=
|
|
215
|
+
type="button"
|
|
216
216
|
className={`mobile-panel-toggle__button${mobilePanel === 'builder' ? ' mobile-panel-toggle__button--active' : ''}`}
|
|
217
|
-
aria-label=
|
|
217
|
+
aria-label="Toggle builder panel"
|
|
218
218
|
aria-expanded={mobilePanel === 'builder'}
|
|
219
|
-
aria-controls=
|
|
219
|
+
aria-controls="split-left-panel"
|
|
220
220
|
onClick={() => toggleMobilePanel('builder')}
|
|
221
221
|
>
|
|
222
|
-
<span className=
|
|
223
|
-
<svg viewBox=
|
|
222
|
+
<span className="mobile-panel-toggle__icon" aria-hidden="true">
|
|
223
|
+
<svg viewBox="0 0 16 12" role="presentation" focusable="false">
|
|
224
224
|
<path
|
|
225
|
-
d=
|
|
226
|
-
stroke=
|
|
227
|
-
strokeWidth=
|
|
228
|
-
strokeLinecap=
|
|
229
|
-
fill=
|
|
225
|
+
d="M1 1h14M1 6h14M1 11h14"
|
|
226
|
+
stroke="currentColor"
|
|
227
|
+
strokeWidth="2"
|
|
228
|
+
strokeLinecap="round"
|
|
229
|
+
fill="none"
|
|
230
230
|
/>
|
|
231
231
|
</svg>
|
|
232
232
|
</span>
|
|
233
|
-
<span className=
|
|
233
|
+
<span className="mobile-panel-toggle__label">Builder</span>
|
|
234
234
|
</button>
|
|
235
235
|
<button
|
|
236
|
-
type=
|
|
236
|
+
type="button"
|
|
237
237
|
className={`mobile-panel-toggle__button${mobilePanel === 'attributes' ? ' mobile-panel-toggle__button--active' : ''}`}
|
|
238
|
-
aria-label=
|
|
238
|
+
aria-label="Toggle attributes panel"
|
|
239
239
|
aria-expanded={mobilePanel === 'attributes'}
|
|
240
|
-
aria-controls=
|
|
240
|
+
aria-controls="split-attributes-panel"
|
|
241
241
|
onClick={() => toggleMobilePanel('attributes')}
|
|
242
242
|
>
|
|
243
|
-
<span className=
|
|
244
|
-
<svg viewBox=
|
|
243
|
+
<span className="mobile-panel-toggle__icon" aria-hidden="true">
|
|
244
|
+
<svg viewBox="0 0 16 12" role="presentation" focusable="false">
|
|
245
245
|
<path
|
|
246
|
-
d=
|
|
247
|
-
stroke=
|
|
248
|
-
strokeWidth=
|
|
249
|
-
strokeLinecap=
|
|
250
|
-
fill=
|
|
246
|
+
d="M1 1h14M1 6h14M1 11h14"
|
|
247
|
+
stroke="currentColor"
|
|
248
|
+
strokeWidth="2"
|
|
249
|
+
strokeLinecap="round"
|
|
250
|
+
fill="none"
|
|
251
251
|
/>
|
|
252
252
|
</svg>
|
|
253
253
|
</span>
|
|
254
|
-
<span className=
|
|
254
|
+
<span className="mobile-panel-toggle__label">Attributes</span>
|
|
255
255
|
</button>
|
|
256
256
|
</div>
|
|
257
257
|
)}
|
|
258
|
-
<div className=
|
|
258
|
+
<div className="editor-container">
|
|
259
259
|
<div
|
|
260
|
-
id=
|
|
260
|
+
id="split-left-panel"
|
|
261
261
|
className={`split-left${leftPanelIsOpen ? ' is-open' : ''}`}
|
|
262
262
|
aria-hidden={isMobile && !leftPanelIsOpen}
|
|
263
263
|
>
|
|
264
264
|
{isMobile && (
|
|
265
265
|
<button
|
|
266
|
-
type=
|
|
267
|
-
className=
|
|
268
|
-
aria-label=
|
|
266
|
+
type="button"
|
|
267
|
+
className="split-panel__close"
|
|
268
|
+
aria-label="Close builder panel"
|
|
269
269
|
onClick={closeMobilePanels}
|
|
270
270
|
>
|
|
271
271
|
Close
|
|
@@ -285,10 +285,10 @@ export function ProjectPage({
|
|
|
285
285
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
286
286
|
['--rb-canvas-bg' as any]: `url(${backgroundImage})`,
|
|
287
287
|
}}
|
|
288
|
-
className=
|
|
288
|
+
className="split-right"
|
|
289
289
|
>
|
|
290
290
|
{showLoading && (
|
|
291
|
-
<div className=
|
|
291
|
+
<div className="rb-loading-overlay" aria-busy="true">
|
|
292
292
|
<LoadingComponent />
|
|
293
293
|
</div>
|
|
294
294
|
)}
|
|
@@ -310,15 +310,15 @@ export function ProjectPage({
|
|
|
310
310
|
{/* BOTOM BAR */}
|
|
311
311
|
<BottomBar data={editorData} setData={setEditorData} />
|
|
312
312
|
<div
|
|
313
|
-
id=
|
|
313
|
+
id="split-attributes-panel"
|
|
314
314
|
className={`split-third${attributesPanelIsOpen ? ' is-open' : ''}`}
|
|
315
315
|
aria-hidden={isMobile && !attributesPanelIsOpen}
|
|
316
316
|
>
|
|
317
317
|
{isMobile && (
|
|
318
318
|
<button
|
|
319
|
-
type=
|
|
320
|
-
className=
|
|
321
|
-
aria-label=
|
|
319
|
+
type="button"
|
|
320
|
+
className="split-panel__close"
|
|
321
|
+
aria-label="Close attributes panel"
|
|
322
322
|
onClick={closeMobilePanels}
|
|
323
323
|
>
|
|
324
324
|
Close
|
|
@@ -327,7 +327,7 @@ export function ProjectPage({
|
|
|
327
327
|
<AttributesEditorPanel
|
|
328
328
|
attributes={editorData}
|
|
329
329
|
projectColors={resolvedProjectColors}
|
|
330
|
-
onChange={data => {
|
|
330
|
+
onChange={(data) => {
|
|
331
331
|
setEditorData(data);
|
|
332
332
|
let nodeKey: string | undefined = undefined;
|
|
333
333
|
if (
|
|
@@ -341,16 +341,16 @@ export function ProjectPage({
|
|
|
341
341
|
logger.verbose(
|
|
342
342
|
'ProjectPage',
|
|
343
343
|
'attributes change',
|
|
344
|
-
nodeKey ? { nodeKey } : undefined
|
|
344
|
+
nodeKey ? { nodeKey } : undefined,
|
|
345
345
|
);
|
|
346
346
|
}}
|
|
347
347
|
/>
|
|
348
348
|
</div>
|
|
349
349
|
{isMobile && mobilePanel && (
|
|
350
350
|
<button
|
|
351
|
-
type=
|
|
352
|
-
className=
|
|
353
|
-
aria-label=
|
|
351
|
+
type="button"
|
|
352
|
+
className="editor-container__overlay"
|
|
353
|
+
aria-label="Close active panel"
|
|
354
354
|
onClick={closeMobilePanels}
|
|
355
355
|
/>
|
|
356
356
|
)}
|