@dativa-lv/lx-builders 2.1.11 → 2.2.3

package/README.md

@@ -1,3 +1,76 @@
+<h1 align="center">lx/builders</h1>
+
+<p align="center">
+ Declarative <strong>Vue.js 3</strong> tools that transform schemas and configuration into consistent, production-ready user interfaces <a href="https://github.com/dativa-lv/lx-ui">powered by <strong>LX/UI</strong></a>.
+</p>
+<p align="center">
+    JSON Schema in. LX/UI view out.
+</p>
+
+<p align="center">
+    <img alt="NPM Downloads" src="https://img.shields.io/npm/dw/%40dativa-lv%2Flx-builders?color=green" />
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/%40dativa-lv%2Flx-builders?color=green" />
+    <img alt="NPM License" src="https://img.shields.io/npm/l/%40dativa-lv%2Flx-builders?color=white" />
+    <a href="https://github.com/dativa-lv/lx-ui"><img alt="Powered by LX/UI" src="https://img.shields.io/badge/powered%20by-lx%2Fui-0960BC"/></a>
+</p>
+
+<p align="center">
+ <img src="https://img.shields.io/github/package-json/dependency-version/dativa-lv/lx-builders/peer/@dativa-lv/lx-ui" alt="LX/UI Version" />
+  <img src="https://img.shields.io/github/package-json/dependency-version/dativa-lv/lx-ui/peer/vue" alt="Vue.js Version" />
+  <img src="https://img.shields.io/github/package-json/dependency-version/dativa-lv/lx-ui/dev/vite" alt="Vite Version" />
+  <img src="https://img.shields.io/github/package-json/packageManager/dativa-lv/lx-builders?label=package%20manager" alt="Package Manager" />
+</p>
+
 ![lx/builders](https://raw.githubusercontent.com/dativa-lv/lx-builders/main/public/imgs/cover.png)
 
-# lx/builders
+## Play around
+
+Check out our [🌐&nbsp;Form Builder Demo](https://lx-ui.dev/resources/forms/builder) or try the <a href="https://lx-ui.dev/resources/constructor-dashboard">🛠️&nbsp;LxConstructor<sup>(beta)</sup></a> live.
+
+## Design with
+- <a href="https://json-schema.org">🌐&nbsp;JSON Schema</a>
+- <a href="/docs/Constructor.md">ℹ️&nbsp;LxConstructor<sup>(beta)</sup></a>
+
+## Render with
+- <a href="/docs/ViewBuilder.md">ℹ️&nbsp;LxViewBuilder</a>
+- <a href="/docs/FormBuilder.md">ℹ️&nbsp;LxFormBuilder</a>
+- ℹ️&nbsp;LxFilterBuilder
+
+## Get
+
+Get using bun:
+```bash
+bun add '@dativa-lv/lx-builders@latest'
+```
+
+Get using pnpm:
+```bash
+pnpm i '@dativa-lv/lx-builders@latest'
+```
+
+For migration tips refer to [ℹ️&nbsp;Migration Guide](https://github.com/dativa-lv/lx-builders/blob/main/MIGRATION.md)
+
+## Use
+
+Use together with lx/ui library:
+```js
+import { createPinia } from 'pinia';
+import { createLx } from '@dativa-lv/lx-ui';
+import { createLxBuilders } from '@dativa-lv/lx-builders';
+import App from '@/App.vue';
+…
+const myApp = createApp(App);
+myApp.use(createPinia());
+myApp.use(createLx());
+myApp.use(createLxBuilders());
+…
+```
+
+## Develop
+
+```bash
+pnpm i
+pnpm build
+```
+
+Read more about development in [ℹ️&nbsp;Development manual](https://github.com/dativa-lv/lx-builders/blob/main/DEVELOPMENT.md)

package/dist/src/components/FilterBuilder.vue.d.ts

@@ -1,4 +1,4 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, CreateComponentPublicInstanceWithMixins } from 'vue';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Attrs, Slot, ComponentPublicInstance, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ComponentCustomProperties, ShallowUnwrapRef, CreateComponentPublicInstanceWithMixins } from 'vue';
 import { OnCleanup } from '@vue/reactivity';
 declare const _default: DefineComponent<{}, {
     validateModel: typeof validateModel;
@@ -22,9 +22,7 @@ declare const _default: DefineComponent<{}, {
                 $: ComponentInternalInstance;
                 $data: {};
                 $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
-                $attrs: {
-                    [x: string]: unknown;
-                };
+                $attrs: Attrs;
                 $refs: {
                     [x: string]: unknown;
                 } & {
@@ -111,7 +109,7 @@ declare const _default: DefineComponent<{}, {
                 $forceUpdate: () => void;
                 $nextTick: nextTick;
                 $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-            } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "focus" | "invalid" | "$props" | "$emit" | "label" | "iconSet" | "variant" | "customClass" | "texts" | "id" | "modelValue" | "kind" | "description" | "icon" | "tooltip" | "disabled" | "ariaLabel" | "badge" | "badgeIcon" | "badgeType" | "badgeTitle" | "invalidationMessage" | "region" | "renderMode" | "hasShortlistReset" | "hasSelectButton" | "selectStatus"> & ShallowUnwrapRef<{
+            } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "focus" | "invalid" | "$props" | "$emit" | "label" | "iconSet" | "variant" | "customClass" | "texts" | "id" | "modelValue" | "kind" | "description" | "icon" | "tooltip" | "disabled" | "ariaLabel" | "badge" | "badgeIcon" | "badgeType" | "badgeTitle" | "invalidationMessage" | "region" | "renderMode" | "hasShortlistReset" | "hasSelectButton" | "selectStatus"> & {
                 focus: () => void;
                 $emit: (event: "update:modelValue" | "selectAll" | "resetFilters", ...args: any[]) => void;
                 invalid: boolean;
@@ -164,7 +162,7 @@ declare const _default: DefineComponent<{}, {
                     readonly badgeTitle?: string;
                     readonly invalidationMessage?: string;
                 };
-            }> & {} & ComponentCustomProperties & {} & {
+            } & {} & ComponentCustomProperties & {} & {
                 $slots: {
                     customHeader?(_: {
                         invalid: boolean;

package/dist/src/components/constructor/Constructor.vue.d.ts

@@ -17,6 +17,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
     error: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     "update:schema": (...args: any[]) => void;
+    schemaCopy: (...args: any[]) => void;
 }, string, PublicProps, Readonly< ExtractPropTypes<{
     schema: {
         type: ObjectConstructor;
@@ -34,6 +35,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
     onError?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     "onUpdate:schema"?: (...args: any[]) => any;
+    onSchemaCopy?: (...args: any[]) => any;
 }>, {
     modelValue: Record<string, any>;
     texts: Record<string, any>;

package/dist/src/components/constructor/ConstructorPropRenderer.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: DefineComponent<{}, {
     texts: Record<string, any>;
     componentPropsDefinitions: Record<string, any>;
     componentModel: Record<string, any>;
+    navigation: unknown[];
     schemaKey: string;
     componentName?: string;
     searchString?: string;
@@ -14,6 +15,7 @@ declare const _default: DefineComponent<{}, {
         readonly texts?: Record<string, any>;
         readonly componentPropsDefinitions?: Record<string, any>;
         readonly componentModel?: Record<string, any>;
+        readonly navigation?: unknown[];
         readonly schemaKey?: string;
         readonly componentName?: string;
         readonly searchString?: string;

package/dist/src/components/constructor/Panel.vue.d.ts

@@ -32,6 +32,10 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         type: ObjectConstructor;
         default: any;
     };
+    selectedTab: {
+        type: StringConstructor;
+        default: any;
+    };
     texts: {
         type: ObjectConstructor;
         default: () => {};
@@ -51,6 +55,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
     duplicateComponent: (...args: any[]) => void;
     "update:componentProps": (...args: any[]) => void;
     "update:viewLayout": (...args: any[]) => void;
+    "update:selectedTab": (...args: any[]) => void;
 }, string, PublicProps, Readonly< ExtractPropTypes<{
     componentName: {
         type: StringConstructor;
@@ -84,6 +89,10 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         type: ObjectConstructor;
         default: any;
     };
+    selectedTab: {
+        type: StringConstructor;
+        default: any;
+    };
     texts: {
         type: ObjectConstructor;
         default: () => {};
@@ -103,15 +112,17 @@ declare const _default: DefineComponent<ExtractPropTypes<{
     onDuplicateComponent?: (...args: any[]) => any;
     "onUpdate:componentProps"?: (...args: any[]) => any;
     "onUpdate:viewLayout"?: (...args: any[]) => any;
+    "onUpdate:selectedTab"?: (...args: any[]) => any;
 }>, {
     texts: Record<string, any>;
     componentName: string;
     componentPropsDefinitions: Record<string, any>;
     componentModel: Record<string, any>;
+    navigation: unknown[];
     schemaKey: string;
     schemaKeyError: string;
     componentProps: Record<string, any>;
-    navigation: unknown[];
     schemaInfo: Record<string, any>;
+    selectedTab: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/dist/src/components/constructor/PropRendererItem.vue.d.ts

@@ -162,6 +162,7 @@ declare const _default: DefineComponent<{}, {
             iconAttribute?: string;
             hideRemoveAttribute?: string;
             removeEnableByAttribute?: string;
+            removeVisibleByAttribute?: string;
             $props: {
                 readonly texts?: Record<string, any>;
                 readonly id?: string;
@@ -189,6 +190,7 @@ declare const _default: DefineComponent<{}, {
                 readonly iconAttribute?: string;
                 readonly hideRemoveAttribute?: string;
                 readonly removeEnableByAttribute?: string;
+                readonly removeVisibleByAttribute?: string;
             };
         }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -210,7 +212,7 @@ declare const _default: DefineComponent<{}, {
         $forceUpdate: () => void;
         $nextTick: nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute"> & ShallowUnwrapRef<{
+    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
         clearModel: () => any[];
         $emit: (event: "update:modelValue" | "actionClick" | "toolbarActionClick" | "update:selectedValues", ...args: any[]) => void;
         texts: Record<string, any>;
@@ -239,6 +241,7 @@ declare const _default: DefineComponent<{}, {
         iconAttribute?: string;
         hideRemoveAttribute?: string;
         removeEnableByAttribute?: string;
+        removeVisibleByAttribute?: string;
         $props: {
             readonly texts?: Record<string, any>;
             readonly id?: string;
@@ -266,6 +269,7 @@ declare const _default: DefineComponent<{}, {
             readonly iconAttribute?: string;
             readonly hideRemoveAttribute?: string;
             readonly removeEnableByAttribute?: string;
+            readonly removeVisibleByAttribute?: string;
         };
     }> & {} & ComponentCustomProperties & {} & {
         $slots: {
@@ -430,6 +434,7 @@ declare const _default: DefineComponent<{}, {
             iconAttribute?: string;
             hideRemoveAttribute?: string;
             removeEnableByAttribute?: string;
+            removeVisibleByAttribute?: string;
             $props: {
                 readonly texts?: Record<string, any>;
                 readonly id?: string;
@@ -457,6 +462,7 @@ declare const _default: DefineComponent<{}, {
                 readonly iconAttribute?: string;
                 readonly hideRemoveAttribute?: string;
                 readonly removeEnableByAttribute?: string;
+                readonly removeVisibleByAttribute?: string;
             };
         }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -478,7 +484,7 @@ declare const _default: DefineComponent<{}, {
         $forceUpdate: () => void;
         $nextTick: nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute"> & ShallowUnwrapRef<{
+    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
         clearModel: () => any[];
         $emit: (event: "update:modelValue" | "actionClick" | "toolbarActionClick" | "update:selectedValues", ...args: any[]) => void;
         texts: Record<string, any>;
@@ -507,6 +513,7 @@ declare const _default: DefineComponent<{}, {
         iconAttribute?: string;
         hideRemoveAttribute?: string;
         removeEnableByAttribute?: string;
+        removeVisibleByAttribute?: string;
         $props: {
             readonly texts?: Record<string, any>;
             readonly id?: string;
@@ -534,6 +541,7 @@ declare const _default: DefineComponent<{}, {
             readonly iconAttribute?: string;
             readonly hideRemoveAttribute?: string;
             readonly removeEnableByAttribute?: string;
+            readonly removeVisibleByAttribute?: string;
         };
     }> & {} & ComponentCustomProperties & {} & {
         $slots: {
@@ -698,6 +706,7 @@ declare const _default: DefineComponent<{}, {
             iconAttribute?: string;
             hideRemoveAttribute?: string;
             removeEnableByAttribute?: string;
+            removeVisibleByAttribute?: string;
             $props: {
                 readonly texts?: Record<string, any>;
                 readonly id?: string;
@@ -725,6 +734,7 @@ declare const _default: DefineComponent<{}, {
                 readonly iconAttribute?: string;
                 readonly hideRemoveAttribute?: string;
                 readonly removeEnableByAttribute?: string;
+                readonly removeVisibleByAttribute?: string;
             };
         }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -746,7 +756,7 @@ declare const _default: DefineComponent<{}, {
         $forceUpdate: () => void;
         $nextTick: nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute"> & ShallowUnwrapRef<{
+    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
         clearModel: () => any[];
         $emit: (event: "update:modelValue" | "actionClick" | "toolbarActionClick" | "update:selectedValues", ...args: any[]) => void;
         texts: Record<string, any>;
@@ -775,6 +785,7 @@ declare const _default: DefineComponent<{}, {
         iconAttribute?: string;
         hideRemoveAttribute?: string;
         removeEnableByAttribute?: string;
+        removeVisibleByAttribute?: string;
         $props: {
             readonly texts?: Record<string, any>;
             readonly id?: string;
@@ -802,6 +813,7 @@ declare const _default: DefineComponent<{}, {
             readonly iconAttribute?: string;
             readonly hideRemoveAttribute?: string;
             readonly removeEnableByAttribute?: string;
+            readonly removeVisibleByAttribute?: string;
         };
     }> & {} & ComponentCustomProperties & {} & {
         $slots: {

package/dist/styles/lx-constructor.css

@@ -1 +1 @@
-.lx-panel>.panel-side{background-color:var(--color-region);width:var(--aside-size)}.lx-panel>.panel-side .config-header{height:var(--row-size);background-color:var(--color-layout-background);padding:0 .5rem}.lx-panel>.panel-side .config-header>.lx-context-container .popper-wrapper{width:100%}.lx-panel>.panel-side .config-header .header-wrapper{height:var(--row-size);width:100%;display:flex;align-items:center;justify-content:space-between;gap:.25rem}.lx-panel>.panel-side .config-header .header-wrapper>p{color:var(--color-nav-foreground);font-weight:var(--font-weight-bold)}.lx-panel>.panel-side .config-header .header-wrapper>svg{height:1.5rem;fill:var(--color-nav-foreground)}.lx-panel>.panel-side .panel-main>.button-group{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--color-chrome)}.lx-panel>.panel-side .settings-wrapper{padding:.75rem;display:flex;flex-direction:column;gap:.75rem}.lx-panel>.panel-side .panel-main>.button-group>.lx-button{--color-button-secondary-background: var(--color-region-2);--color-button-secondary-text: var(--color-data);--color-button-secondary-icon: var(--color-data);--button-secondary-border: 2px solid transparent}.lx-panel>.panel-side .button-group>.lx-button:first-child:before{position:absolute;content:" ";height:2rem;left:7.75rem;border-right:1px solid var(--color-chrome);opacity:1;transition:opacity .1s ease-out;z-index:0}.lx-panel{position:fixed;top:10vh;z-index:1000;right:0;display:flex;flex-direction:row-reverse}#constructor-overlay{position:absolute;top:0;left:0;width:100%;height:100dvh;z-index:100;pointer-events:none}.highlight{position:absolute;box-sizing:border-box;border:2px solid var(--color-blue);background:transparent;z-index:100;pointer-events:none;transition:left .1s ease-out,top .1s ease-out}.highlight .highlight-toolbar{position:absolute;top:-1.5rem;left:-.125rem;display:flex;background:var(--color-blue);pointer-events:all;height:1.5rem}.highlight .highlight-toolbar>span{padding-inline:.25rem;color:#fff}.highlight .highlight-toolbar .lx-button{--button-ghost-icon-only-height: 1.5rem;--button-ghost-icon-only-width: 1.5rem;--button-ghost-icon-only-min-width: 1.5rem;--color-button-ghost-icon: white;--color-button-ghost-icon-focus: white;--button-ghost-icon-size: 1.25rem}.lx:not(.lx-theme-contrast) .lx-panel .panel-side{--region-border-transparent: 1px solid var(--color-chrome)}.lx.lx-no-transparency .lx-panel .panel-side{--shadow-dropdown: inset 0 0 0 1px var(--color-chrome)}.lx-panel .panel-side{box-shadow:var(--shadow-dropdown)}.lx-panel .panel-main{max-height:70vh;max-width:var(--aside-size);overflow-y:overlay}.lx-panel .panel-main .lx-form-grid .lx-main.lx-compact-sections>.lx-form-section{padding-left:calc(var(--gap-form) / 4);padding-right:calc(var(--gap-form) / 4)}.no-component-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem 1rem}.panel-main .lx-form-grid>.lx-main .lx-row{max-width:calc(var(--aside-size) - 2rem)}.code-display>.code{white-space:pre;font-family:var(--font-family-mono);padding:2rem;grid-column:1 / 3;overflow:auto;background-color:var(--color-region-2);margin:0}.import-switcher{padding-bottom:1rem}.highlight .highlight-toolbar-remove{right:-.125rem;left:unset}.custom-auto-complete-item-with-icon{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;width:100%;height:1.5rem;align-items:center}.custom-auto-complete-item-with-icon p.lx-data{font-weight:400;min-height:0;align-self:center;padding:0;margin:0}.custom-auto-complete-item-with-icon svg{width:1.5rem;height:1.5rem}
+.lx-panel>.panel-side{background-color:var(--color-region);width:var(--aside-size)}.lx-panel>.panel-side .config-header{height:var(--row-size);background-color:var(--color-layout-background);padding:0 .5rem}.lx-panel>.panel-side .config-header>.lx-context-container .popper-wrapper{width:100%}.lx-panel>.panel-side .config-header .header-wrapper{height:var(--row-size);width:100%;display:flex;align-items:center;justify-content:space-between;gap:.25rem}.lx-panel>.panel-side .config-header .header-wrapper>p{color:var(--color-nav-foreground);font-weight:var(--font-weight-bold)}.lx-panel>.panel-side .config-header .header-wrapper>svg{height:1.5rem;fill:var(--color-nav-foreground)}.lx-panel>.panel-side .config-header .lx-dropdown-toggler .header-wrapper:has(p){cursor:pointer}.lx-panel>.panel-side .panel-main>.button-group{display:grid;grid-template-columns:1fr 1fr;border:var(--border-width-1) solid var(--color-chrome);border-right:none}.lx-panel>.panel-side .settings-wrapper{padding:var(--space-0750);display:flex;flex-direction:column;gap:var(--space-0750)}.lx-panel>.panel-side .panel-main>.button-group>.lx-button{--color-button-secondary-background: var(--color-region-2);--color-button-secondary-text: var(--color-data);--color-button-secondary-icon: var(--color-data);--button-secondary-border: var(--border-width-2) solid transparent}.lx-panel>.panel-side .button-group>.lx-button:first-child:after{position:absolute;content:" ";height:2rem;right:0;border-right:var(--border-width-1) solid var(--color-chrome);opacity:1;transition:opacity .1s ease-out;z-index:1}.lx-panel>.panel-side .button-group>.lx-button:first-child:hover:not(.lx-disabled):after{opacity:0}.lx-panel{position:fixed;top:calc(var(--nav-row-size) + 10vh);z-index:1000;right:0;display:flex;flex-direction:row-reverse}#constructor-overlay{position:absolute;top:0;left:0;width:100%;height:100dvh;z-index:100;pointer-events:none}.highlight{position:absolute;box-sizing:border-box;border:var(--border-width-2) solid var(--color-blue);background:transparent;z-index:100;pointer-events:none;transition:left .1s ease-out,top .1s ease-out}.highlight .highlight-toolbar{position:absolute;top:-1.5rem;left:-.125rem;display:flex;background:var(--color-blue);pointer-events:all;height:1.5rem}.highlight .highlight-toolbar>span{padding-inline:var(--space-0250);color:#fff}.highlight .highlight-toolbar .lx-button{--button-ghost-icon-only-height: 1.5rem;--button-ghost-icon-only-width: 1.5rem;--button-ghost-icon-only-min-width: 1.5rem;--color-button-ghost-icon: white;--color-button-ghost-icon-focus: white;--button-ghost-icon-size: 1.25rem}.lx:not(.lx-theme-contrast) .lx-panel .panel-side{--region-border-transparent: var(--border-width-1) solid var(--color-chrome)}.lx.lx-no-transparency .lx-panel .panel-side{--shadow-dropdown: inset 0 0 0 var(--border-width-1) var(--color-chrome)}.lx-panel .panel-side{box-shadow:var(--shadow-dropdown)}.lx-panel .panel-main{max-height:70vh;max-width:var(--aside-size);overflow-y:overlay}.lx-panel .panel-main .lx-form-grid .lx-main.lx-compact-sections>.lx-form-section{padding-left:calc(var(--gap-form) / 4);padding-right:calc(var(--gap-form) / 4)}.no-component-wrapper{padding:var(--space-0250)}.no-component-wrapper>.lx-empty-state-wrapper{width:100%}.panel-main .lx-form-grid>.lx-main .lx-row{max-width:calc(var(--aside-size) - 2rem)}.code-display>.code{white-space:pre;font-family:var(--font-family-mono);padding:var(--space-2000);grid-column:1 / 3;overflow:auto;background-color:var(--color-region-2);margin:0}.import-switcher{padding-bottom:var(--space-1000)}.highlight .highlight-toolbar-remove{right:-.125rem;left:unset}.custom-auto-complete-item-with-icon{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;width:100%;height:1.5rem;align-items:center}.custom-auto-complete-item-with-icon p.lx-data{font-weight:400;min-height:0;align-self:center;padding:0;margin:0}.custom-auto-complete-item-with-icon svg{width:1.5rem;height:1.5rem}.component-add-text{margin-bottom:var(--space-1000)}.lx-panel>.panel-side .config-header.has-selected-element{background-color:var(--color-blue);cursor:pointer}.lx-panel>.panel-side .config-header.has-selected-element:hover{background-color:var(--color-interactive-hover-background)}.lx-panel>.button-side>.lx-button{--color-button-secondary-background: var(--color-nav-background);--color-button-secondary-background-hover: var(--color-interactive-hover-background);--color-button-active-mode-background: var(--color-nav-item-background-selected);--color-button-secondary-icon: var(--color-nav-foreground);--color-button-active-mode-icon: var(--color-nav-item-icon-selected);--button-secondary-border: var(--button-secondary-border-width) solid transparent}.lx-panel>.panel-side .prop-search{border-left:var(--border-width-1) solid var(--color-chrome)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper p{color:var(--color-focus-foreground)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper svg{fill:var(--color-focus-foreground)}