@aham.ro/ui-designer 0.1.5 → 0.1.7

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/README.md CHANGED
@@ -1,18 +1,18 @@
1
- # IAM Designer
1
+ # UI Designer
2
2
 
3
- Vue 3 components for the Aham IAM designer.
3
+ Vue 3 components for the UI designer for IAM systems and email templates.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @aham.ro/iam-designer
8
+ npm install @aham.ro/ui-designer
9
9
  ```
10
10
 
11
11
  ## Usage
12
12
 
13
13
  ```vue
14
14
  <script setup lang="ts">
15
- import { Designer } from '@aham.ro/iam-designer'
15
+ import { Designer } from '@aham.ro/ui-designer'
16
16
  </script>
17
17
 
18
18
  <template>
@@ -0,0 +1,2 @@
1
+ @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200";.ui-designer{--designer-panel:var(--color-panel,#fff);--designer-panel-raised:var(--color-panel-raised,#f5f2ee);--designer-text:var(--color-text,#111);--designer-muted:var(--color-text-muted,#6b7280);--designer-border:var(--color-border,#ece9e4);--designer-shell:var(--color-background,#fafaf9);--designer-primary:var(--color-primary,#2563eb);--designer-space-xs:var(--space-xs,6px);--designer-space-sm:var(--space-sm,10px);--designer-space-md:var(--space-md,14px);--designer-font-xs:var(--font-xs,11px);--designer-font-sm:var(--font-sm,12.5px);--designer-font-lg:var(--font-lg,19px)}.ui-designer [data-overlayscrollbars]{--os-size:6px;--os-padding-perpendicular:2px;--os-track-border-radius:4px;--os-handle-border-radius:4px;--os-handle-bg:color-mix(in srgb, var(--designer-muted) 35%, transparent);--os-handle-bg-hover:var(--designer-muted);--os-handle-bg-active:var(--designer-primary)}.ui-designer [data-overlayscrollbars]>.os-scrollbar-horizontal{display:none}.text-scroller[data-v-8fac895b]{white-space:nowrap;min-width:0;display:block;overflow:hidden}.text-scroller-content[data-v-8fac895b]{text-overflow:ellipsis;vertical-align:top;min-width:100%;display:inline-block;overflow:hidden}.text-scroller.scrolling .text-scroller-content[data-v-8fac895b]{animation:text-scroller-loop-8fac895b var(--scroll-duration) linear;text-overflow:clip}@keyframes text-scroller-loop-8fac895b{0%,15%{transform:translate(0)}85%,to{transform:translateX(calc(-1 * var(--scroll-distance)))}}.component-list[data-v-29d47f96]{border-top:1px solid var(--designer-border);flex-direction:column;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.component-head[data-v-29d47f96]{padding:12px var(--designer-space-sm) 8px;color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;flex:none}.component-content[data-v-29d47f96]{box-sizing:border-box;flex:auto;width:100%;min-width:0;height:0;min-height:0;padding:0 0 12px}.palette-search[data-v-29d47f96]{border:1px solid var(--designer-border);background:var(--designer-shell);color:var(--designer-muted);border-radius:7px;flex:none;align-items:center;gap:7px;margin:0 10px 10px;padding:7px 8px;display:flex}.palette-search input[data-v-29d47f96]{width:100%;min-width:0;color:var(--designer-text);font:inherit;font-size:var(--designer-font-sm);background:0 0;border:0;outline:0}.component-group+.component-group[data-v-29d47f96]{margin-top:14px}.component-groups[data-v-29d47f96]{box-sizing:border-box;width:100%;min-width:0;padding:0 10px}.component-content[data-v-29d47f96] [data-overlayscrollbars-contents]{box-sizing:border-box;width:100%;min-width:0}.component-content[data-v-29d47f96] [data-overlayscrollbars-viewport]{height:100%!important;overflow-y:scroll!important}.group-label[data-v-29d47f96]{color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;padding:0 4px 6px}.component-items[data-v-29d47f96]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;display:grid}.component-item[data-v-29d47f96]{border:1px solid var(--designer-border);background:var(--designer-panel);min-width:0;color:var(--designer-text);font:inherit;font-size:var(--designer-font-xs);text-align:left;cursor:pointer;border-radius:8px;flex-direction:column;align-items:flex-start;gap:5px;padding:7px;line-height:1.2;display:flex}.component-item[data-v-29d47f96]:hover{border-color:color-mix(in srgb, var(--designer-primary) 35%, var(--designer-border));background:var(--designer-panel-raised);transform:translateY(-1px)}.component-icon[data-v-29d47f96]{background:var(--designer-panel-raised);width:20px;height:20px;color:var(--designer-muted);border-radius:6px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.component-item:hover .component-icon[data-v-29d47f96]{color:var(--designer-primary)}.component-label[data-v-29d47f96]{width:100%;max-width:100%}.component-empty[data-v-29d47f96]{color:var(--designer-muted);font-size:var(--designer-font-xs);text-align:center;grid-column:1/-1;padding:10px 4px}[data-overlayscrollbars].component-content[data-v-29d47f96]{flex:auto;height:0;min-height:0}.icon-button[data-v-b3b6390f]{border:1px solid var(--color-border,#ece9e4);border-radius:var(--radius-sm,10px);background-color:var(--color-panel,#fff);width:34px;height:34px;color:var(--color-text-muted,#6b7280);font:inherit;cursor:pointer;justify-content:center;align-items:center;padding:0;line-height:1;transition:color .15s,border-color .15s,background-color .15s;display:inline-flex}.icon-button[data-v-b3b6390f]:hover:not(:disabled){color:var(--color-primary,#2563eb);border-color:var(--color-primary,#2563eb);background-color:var(--color-panel-raised,#f5f2ee)}.icon-button[data-v-b3b6390f]:disabled{opacity:.5;cursor:not-allowed}.more-menu[data-v-923fea1e]{position:relative}.more-button[data-v-923fea1e]{border-radius:var(--radius-xs,6px);background-color:var(--color-panel,#fff);width:32px;height:32px;color:var(--color-text,#111);font:inherit;cursor:pointer;border:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.more-button[aria-expanded=true][data-v-923fea1e]{background-color:var(--color-panel-raised,#f5f2ee)}.dropdown[data-v-923fea1e]{z-index:1000;border:1px solid var(--designer-border,#ece9e4);border-radius:var(--radius-sm,10px);background:var(--designer-panel,#fff);min-width:180px;color:var(--designer-text,#111);font-family:var(--font-base-family,system-ui, sans-serif);padding:4px;position:fixed;box-shadow:0 8px 24px #0000001f}.dropdown .icon[data-v-923fea1e]{letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-feature-settings:"liga";font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;direction:ltr;font-family:Material Symbols Outlined;font-size:20px;font-style:normal;font-weight:400;line-height:1}.menu-item[data-v-923fea1e]{align-items:center;gap:var(--designer-space-sm,10px);border-radius:var(--radius-xs,6px);width:100%;color:var(--designer-text,#111);font:inherit;font-size:var(--designer-font-sm,12.5px);text-align:left;cursor:pointer;background:0 0;border:0;padding:8px 10px;display:flex}.menu-item[data-v-923fea1e]:hover:not(:disabled){background:var(--designer-panel-raised,#f5f2ee)}.menu-item[data-v-923fea1e]:disabled{opacity:.5;cursor:not-allowed}.save-button[data-v-4a359870]{justify-content:center;align-items:center;gap:var(--space-xs,6px);min-height:32px;padding:6px var(--space-sm,10px);border:1px solid var(--color-primary,#2563eb);border-radius:var(--radius-sm,10px);background-color:var(--color-primary,#2563eb);color:var(--color-on-primary,#fff);font:inherit;font-size:var(--font-sm,12.5px);cursor:pointer;font-weight:500;display:inline-flex}.save-button[data-v-4a359870]:disabled{opacity:.6;cursor:not-allowed}.save-button[data-v-4a359870]:hover{background-color:var(--color-primary-hover,#1d4ed8);border-color:var(--color-primary-hover,#1d4ed8)}.spinner[data-v-4a359870]{border:1px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.75s linear infinite save-button-spin-4a359870}@keyframes save-button-spin-4a359870{to{transform:rotate(360deg)}}header[data-v-b6ce5e30]{box-sizing:border-box;width:100%;height:60px;color:var(--designer-text);border-bottom:1px solid var(--designer-border);font-family:var(--font-base-family,inherit);align-items:center;display:flex}.branding[data-v-b6ce5e30]{height:100%;padding:0 var(--designer-space-md);align-items:center;min-width:0;display:flex}.branding .icon[data-v-b6ce5e30]{margin-right:var(--designer-space-xs);font-size:24px}.branding .title[data-v-b6ce5e30]{text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,620px);font-weight:500;font-size:var(--designer-font-lg);overflow:hidden}.subject[data-v-b6ce5e30]{align-items:center;gap:var(--designer-space-sm);min-width:0;height:100%;display:flex}.subject .document-name[data-v-b6ce5e30]{text-overflow:ellipsis;white-space:nowrap;max-width:min(35vw,360px);font-size:var(--designer-font-xs);background-color:var(--color-surface-disabled,color-mix(in srgb, var(--designer-text) 4%, var(--designer-panel)));border-radius:var(--radius-xs,6px);color:var(--color-info,var(--designer-primary));padding:4px 8px;font-weight:500;overflow:hidden}.subject .shared[data-v-b6ce5e30]{color:var(--designer-muted);font-size:var(--designer-font-md);cursor:default}.actions[data-v-b6ce5e30]{height:100%;padding:0 var(--designer-space-md);justify-content:flex-end;align-items:center;gap:var(--designer-space-sm);flex:1;display:flex}.icon[data-v-b6ce5e30]{white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}@media (width<=720px){.subject[data-v-b6ce5e30]{display:none}.actions[data-v-b6ce5e30]{padding-right:var(--designer-space-sm)}}.properties-panel[data-v-d42babf5]{min-height:0;color:var(--designer-text);flex-direction:column;display:flex}.properties-head[data-v-d42babf5]{min-height:52px;padding:0 var(--designer-space-md);border-bottom:1px solid var(--designer-border);font-size:var(--designer-font-sm);align-items:center;gap:8px;display:flex}.property-icon[data-v-d42babf5]{color:var(--designer-primary);font-size:16px}.properties-empty[data-v-d42babf5]{padding:22px var(--designer-space-md);color:var(--designer-muted);font-size:var(--designer-font-sm);line-height:1.5}.layers[data-v-d42babf5]{padding:12px var(--designer-space-md);border-top:1px solid var(--designer-border);margin-top:auto}.layers-title[data-v-d42babf5]{color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.layer-empty[data-v-d42babf5]{color:var(--designer-muted);font-size:var(--designer-font-sm)}.side-info[data-v-31711f81]{border-top:1px solid var(--designer-border);height:auto;color:var(--designer-muted);font-size:var(--designer-font-sm);flex:none;padding:12px 14px 16px}.info-title[data-v-31711f81]{color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.info-row[data-v-31711f81]{align-items:flex-start;gap:8px;line-height:1.4;display:flex}.info-row+.info-row[data-v-31711f81]{margin-top:7px}.info-dot[data-v-31711f81]{background:var(--color-accent-3,#c9973f);border-radius:50%;flex:none;width:7px;height:7px;margin-top:4px}.info-dot.complete[data-v-31711f81]{background:var(--color-success,#5aab72)}.template-list[data-v-927e0835]{box-sizing:border-box;border-bottom:1px solid var(--designer-border);width:100%;min-width:0;min-height:0;padding:12px 0 10px;overflow:hidden}.section-head[data-v-927e0835]{padding:0 var(--designer-space-sm) 8px;color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;display:flex}.section-head button[data-v-927e0835]{border:1px solid var(--designer-border);background:var(--designer-panel);width:19px;height:19px;color:var(--designer-muted);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.section-head button span[data-v-927e0835]{line-height:1;display:block;transform:translateY(-1px)}.template-tabs[data-v-927e0835]{flex-direction:column;flex:auto;width:100%;min-width:0;height:0;min-height:0;display:flex;overflow:hidden}.template-tab[data-v-927e0835]{box-sizing:border-box;width:calc(100% - 13px);min-width:0;color:var(--designer-muted);font:inherit;font-size:var(--designer-font-sm);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:7px;margin:0 6px 3px;padding:10px 9px;display:flex}.template-tab[data-v-927e0835]:last-of-type{margin-bottom:0}.template-tab[data-v-927e0835]:hover,.template-tab.active[data-v-927e0835]{background:var(--designer-panel-raised);color:var(--designer-primary)}.tab-icon[data-v-927e0835]{width:14px;height:14px;color:var(--designer-muted);flex:none;font-size:14px}.tab-label[data-v-927e0835]{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.tab-label-input[data-v-927e0835]{box-sizing:border-box;border:1px solid var(--designer-border);background:var(--designer-shell);width:100%;color:var(--designer-text);font:inherit;border-radius:3px;outline:0;padding:1px 3px}.tab-channel[data-v-927e0835]{border:1px solid var(--designer-border);background:var(--designer-panel);color:var(--designer-muted);text-transform:uppercase;border-radius:4px;flex:none;padding:1px 4px;font-size:9px;line-height:1.1}.tab-version[data-v-927e0835]{color:var(--designer-muted);font-size:var(--designer-font-xs)}.tab-changed[data-v-927e0835]{background:var(--color-warning,#c9973f);border-radius:50%;flex:none;width:5px;height:5px;transform:translateY(1px)}.empty-list[data-v-927e0835]{color:var(--designer-muted);font-size:var(--designer-font-sm);margin:0;padding:10px 15px}[data-overlayscrollbars].template-tabs[data-v-927e0835]{flex:auto;width:100%;height:0;min-height:0}.template-tabs[data-v-927e0835] [data-overlayscrollbars-viewport]{height:100%!important;overflow-y:scroll!important}.template-tabs[data-v-927e0835] [data-overlayscrollbars-contents]{box-sizing:border-box;width:100%;min-width:0;padding:0 6px 8px 0}section[data-v-da3e0d0f]{box-sizing:border-box;flex-direction:column;height:100%;min-height:0;max-height:100vh;display:flex;position:relative;overflow:hidden}.contents[data-v-da3e0d0f]{box-sizing:border-box;flex:auto;height:auto;min-height:0;max-height:none;display:flex;overflow:hidden}.contents aside[data-v-da3e0d0f]{border-right:1px solid var(--designer-border);flex-direction:column;flex:0 0 200px;width:200px;min-height:0;max-height:100%;display:flex;overflow:hidden}.contents .sidebar-panels[data-v-da3e0d0f]{grid-template-rows:var(--screens-height) 9px minmax(0, calc(100% - var(--screens-height) - 9px));flex:1;min-height:0;display:grid}.contents .sidebar-panels>[data-v-da3e0d0f]{min-height:0}.contents .panel-resizer[data-v-da3e0d0f]{border:0;border-top:1px solid color-mix(in srgb, var(--designer-border) 55%, transparent);border-bottom:1px solid color-mix(in srgb, var(--designer-border) 55%, transparent);cursor:row-resize;background:0 0;justify-content:center;align-items:center;width:100%;padding:0;display:flex}.contents .panel-resizer span[data-v-da3e0d0f]{background:var(--designer-border);border-radius:3px;width:28px;height:3px}.contents .panel-resizer:hover span[data-v-da3e0d0f]{background:var(--designer-primary)}.contents .workspace[data-v-da3e0d0f]{flex:1;min-width:0;max-height:100%}.contents .properties[data-v-da3e0d0f]{border-left:1px solid var(--designer-border);flex:0 0 240px;width:240px;min-height:0;max-height:100%;overflow:auto}.container-component[data-v-42c23412]{box-sizing:border-box;min-width:0;color:var(--designer-text,#111)}.empty[data-v-42c23412]{border:1px dashed var(--designer-border,#d9d5cf);min-height:24px;color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.card-component[data-v-b06c1052]{box-sizing:border-box;min-width:0;color:var(--designer-text,#111);background:var(--designer-panel,#fff)}.empty[data-v-b06c1052]{border:1px dashed var(--designer-border,#d9d5cf);min-height:24px;color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.divider-component[data-v-a6e861b8]{width:100%;color:var(--designer-muted,#6b7280);align-items:center;gap:10px;font-size:.8em;display:flex}.divider-component[data-v-a6e861b8]:before,.divider-component[data-v-a6e861b8]:after{background:var(--designer-border,#e5e7eb);content:"";flex:1;height:1px}.layout-component[data-v-be209bd5]{min-width:0}.empty[data-v-be209bd5]{border:1px dashed var(--designer-border,#d9d5cf);color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.layout-ref-component[data-v-d41ee6eb]{min-width:0;padding-top:22px;position:relative}.badge[data-v-d41ee6eb]{color:var(--designer-primary,#2563eb);font-size:.72em;position:absolute;top:0;left:0}.empty[data-v-d41ee6eb]{border:1px dashed var(--designer-border,#d9d5cf);color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.field-component[data-v-c7f2e797]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-c7f2e797]{font-size:.85em;font-weight:600}.label b[data-v-c7f2e797]{color:#dc2626;margin-left:2px}input[data-v-c7f2e797]{box-sizing:border-box;border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;border-radius:7px;padding:9px 10px}.field-component[data-v-b5ed7071]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-b5ed7071]{font-size:.85em;font-weight:600}.label b[data-v-b5ed7071]{color:#dc2626;margin-left:2px}input[data-v-b5ed7071]{box-sizing:border-box;border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;border-radius:7px;padding:9px 10px}.field-component[data-v-ad9dff41]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-ad9dff41]{font-size:.85em;font-weight:600}.label b[data-v-ad9dff41]{color:#dc2626;margin-left:2px}.field-row[data-v-ad9dff41]{justify-content:space-between;gap:8px;display:flex}.field-row a[data-v-ad9dff41]{color:var(--designer-primary,#2563eb);font-size:.85em}input[data-v-ad9dff41]{box-sizing:border-box;border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;border-radius:7px;padding:9px 10px}.field-component[data-v-1914959e]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-1914959e]{font-size:.85em;font-weight:600}.otp-row[data-v-1914959e]{gap:6px;display:flex}.otp-box[data-v-1914959e]{border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);border-radius:6px;width:2em;height:2.3em}.checkbox-component[data-v-3d492d6d]{color:var(--designer-text,#111);cursor:default;align-items:center;gap:8px;display:inline-flex}.checkbox-component input[data-v-3d492d6d]{accent-color:var(--designer-primary,#2563eb)}.submit-button[data-v-9807299a]{width:100%;font:inherit;cursor:pointer;border:0;border-radius:7px;padding:10px 14px}.primary[data-v-9807299a]{background:var(--designer-primary,#2563eb);color:#fff}.secondary[data-v-9807299a]{border:1px solid var(--designer-border,#d9d5cf);color:inherit;background:0 0}.social-button[data-v-3045616f]{border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:9px;padding:9px 14px;display:flex}.social-icon[data-v-3045616f]{color:#fff;border-radius:4px;place-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:inline-grid}.text-link[data-v-8d18edb1]{color:var(--designer-primary,#2563eb);text-decoration:none}.text-link[data-v-8d18edb1]:hover{text-decoration:underline}.heading-component[data-v-1c78b10f]{color:var(--designer-text,#111);margin:0}.sm[data-v-1c78b10f]{font-size:1em}.md[data-v-1c78b10f]{font-size:1.2em}.lg[data-v-1c78b10f]{font-size:1.5em}.xl[data-v-1c78b10f]{font-size:1.9em}.text-component[data-v-3be0c0c9]{color:var(--designer-muted,#6b7280);white-space:pre-wrap;margin:0;line-height:1.5}.image-link[data-v-ecc98881]{max-width:100%;text-decoration:none;display:inline-block}.image-component[data-v-ecc98881]{box-sizing:border-box;background:var(--designer-panel-raised,#f5f2ee);min-height:20px;color:var(--designer-muted,#6b7280);place-items:center;display:grid;overflow:hidden}.image-component img[data-v-ecc98881]{object-fit:cover;width:100%;height:100%;display:block}.alert-component[data-v-bf171873]{border-radius:7px;gap:8px;padding:10px 12px;font-size:.9em;display:flex}.info[data-v-bf171873]{color:#1d4ed8;background:#eff6ff}.success[data-v-bf171873]{color:#047857;background:#ecfdf5}.error[data-v-bf171873]{color:#b91c1c;background:#fef2f2}.content-component[data-v-1c551f9d]{min-width:0}.empty[data-v-1c551f9d]{border:1px dashed var(--designer-border,#d9d5cf);min-height:46px;color:var(--designer-muted,#6b7280);text-align:center;padding:14px}.consent-card[data-v-9008f821]{border:1px solid var(--designer-border,#d9d5cf);border-radius:8px;align-items:center;gap:10px;padding:12px;display:flex}.icon[data-v-9008f821]{color:#15803d;background:#dcfce7;border-radius:50%;place-items:center;width:28px;height:28px;font-weight:700;display:grid}.consent-card div[data-v-9008f821]{gap:3px;display:grid}.consent-card span[data-v-9008f821]{color:var(--designer-muted,#6b7280);font-size:.85em}.scope-list[data-v-cdebac9d]{gap:8px;display:grid}.scope[data-v-cdebac9d]{align-items:center;gap:8px;display:flex}.scope>span[data-v-cdebac9d]:first-child{color:#15803d;font-weight:700}
2
+ /*$vite$:1*/
@@ -1985,7 +1985,7 @@ var Gr = () => {
1985
1985
  function Ei(e, t) {
1986
1986
  return v(), a("section", Ti, [...t[0] ||= [s("<div class=\"properties-head\" data-v-d42babf5><span class=\"property-icon icon\" data-v-d42babf5>radio_button_unchecked</span><strong data-v-d42babf5>No selection</strong></div><div class=\"properties-empty\" data-v-d42babf5>Select an element on the canvas, or add one from the left, to edit its properties here.</div><div class=\"layers\" data-v-d42babf5><div class=\"layers-title\" data-v-d42babf5>Layers</div><div class=\"layer-empty\" data-v-d42babf5>No layers yet.</div></div>", 3)]]);
1987
1987
  }
1988
- var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]]), Oi = { class: "side-info" }, ki = /*#__PURE__*/ $(/* @__PURE__ */ u({
1988
+ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]]), Oi = { class: "side-info" }, ki = { class: "info-title" }, Ai = /*#__PURE__*/ $(/* @__PURE__ */ u({
1989
1989
  __name: "SideInfo",
1990
1990
  props: { items: { default: () => [{
1991
1991
  id: "configure-screen",
@@ -1997,22 +1997,23 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
1997
1997
  complete: !1
1998
1998
  }] } },
1999
1999
  setup(t) {
2000
- return (n, r) => (v(), a("section", Oi, [r[0] ||= o("div", { class: "info-title" }, "Checklist", -1), (v(!0), a(e, null, b(t.items, (e) => (v(), a("div", {
2000
+ let n = P();
2001
+ return (r, i) => (v(), a("section", Oi, [o("div", ki, T(D(n)("checklist", "Checklist")), 1), (v(!0), a(e, null, b(t.items, (e) => (v(), a("div", {
2001
2002
  key: e.id,
2002
2003
  class: "info-row"
2003
2004
  }, [o("span", { class: p(["info-dot", { complete: e.complete }]) }, null, 2), o("span", null, T(e.label), 1)]))), 128))]));
2004
2005
  }
2005
- }), [["__scopeId", "data-v-f439ecfe"]]), Ai = { class: "template-list" }, ji = { class: "section-head" }, Mi = ["title"], Ni = ["aria-label", "title"], Pi = ["onClick"], Fi = {
2006
+ }), [["__scopeId", "data-v-31711f81"]]), ji = { class: "template-list" }, Mi = { class: "section-head" }, Ni = ["title"], Pi = ["aria-label", "title"], Fi = ["onClick"], Ii = {
2006
2007
  class: "tab-icon icon",
2007
2008
  "aria-hidden": "true"
2008
- }, Ii = ["onKeydown", "onBlur"], Li = { class: "tab-channel" }, Ri = { class: "tab-version" }, zi = {
2009
+ }, Li = ["onKeydown", "onBlur"], Ri = { class: "tab-channel" }, zi = { class: "tab-version" }, Bi = {
2009
2010
  key: 2,
2010
2011
  class: "tab-changed",
2011
2012
  "aria-label": "Unsaved changes"
2012
- }, Bi = {
2013
+ }, Vi = {
2013
2014
  key: 0,
2014
2015
  class: "empty-list"
2015
- }, Vi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2016
+ }, Hi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2016
2017
  __name: "TemplateList",
2017
2018
  props: {
2018
2019
  templates: {},
@@ -2043,12 +2044,12 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2043
2044
  }
2044
2045
  return k(() => s.focusedTemplateId, (e) => {
2045
2046
  e && S(e);
2046
- }, { immediate: !0 }), (n, s) => (v(), a("section", Ai, [o("div", ji, [o("span", { title: D(d)("screens", "Screens") }, T(D(d)("screens", "Screens")), 9, Mi), o("button", {
2047
+ }, { immediate: !0 }), (n, s) => (v(), a("section", ji, [o("div", Mi, [o("span", { title: D(d)("screens", "Screens") }, T(D(d)("screens", "Screens")), 9, Ni), o("button", {
2047
2048
  type: "button",
2048
2049
  "aria-label": D(d)("add-screen", "Add screen"),
2049
2050
  title: D(d)("add-screen", "Add screen"),
2050
2051
  onClick: s[0] ||= (e) => u("add")
2051
- }, [...s[4] ||= [o("span", { "aria-hidden": "true" }, "+", -1)]], 8, Ni)]), l(D(qr), {
2052
+ }, [...s[4] ||= [o("span", { "aria-hidden": "true" }, "+", -1)]], 8, Pi)]), l(D(qr), {
2052
2053
  class: "template-tabs",
2053
2054
  options: {
2054
2055
  overflow: {
@@ -2067,7 +2068,7 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2067
2068
  class: p(["template-tab", { active: t.focusedTemplateId ? e.id === t.focusedTemplateId : n === 0 }]),
2068
2069
  onClick: (t) => u("select", e.id)
2069
2070
  }, [
2070
- o("span", Fi, T(e.icon), 1),
2071
+ o("span", Ii, T(e.icon), 1),
2071
2072
  h.value === e.id ? M((v(), a("input", {
2072
2073
  key: 0,
2073
2074
  ref_for: !0,
@@ -2080,7 +2081,7 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2080
2081
  onDblclick: s[3] ||= N(() => {}, ["stop"]),
2081
2082
  onKeydown: [ee(N((t) => w(e), ["prevent"]), ["enter"]), ee(N(E, ["prevent"]), ["esc"])],
2082
2083
  onBlur: (t) => w(e)
2083
- }, null, 40, Ii)), [[O, g.value]]) : (v(), r(Yr, {
2084
+ }, null, 40, Li)), [[O, g.value]]) : (v(), r(Yr, {
2084
2085
  key: 1,
2085
2086
  class: "tab-label",
2086
2087
  onDblclick: N((t) => e.type === "dynamic" && C(e), ["stop"])
@@ -2088,14 +2089,14 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2088
2089
  default: j(() => [c(T(e.name), 1)]),
2089
2090
  _: 2
2090
2091
  }, 1032, ["onDblclick"])),
2091
- o("span", Li, T(e.channel.charAt(0).toUpperCase()), 1),
2092
- o("span", Ri, T(e.version), 1),
2093
- e.changed ? (v(), a("span", zi)) : i("", !0)
2094
- ], 10, Pi))), 128)), t.templates?.length ? i("", !0) : (v(), a("p", Bi, "No screens yet."))]),
2092
+ o("span", Ri, T(e.channel.charAt(0).toUpperCase()), 1),
2093
+ o("span", zi, T(e.version), 1),
2094
+ e.changed ? (v(), a("span", Bi)) : i("", !0)
2095
+ ], 10, Fi))), 128)), t.templates?.length ? i("", !0) : (v(), a("p", Vi, "No screens yet."))]),
2095
2096
  _: 1
2096
2097
  })]));
2097
2098
  }
2098
- }), [["__scopeId", "data-v-927e0835"]]), Hi = { class: "iam-designer" }, Ui = { class: "contents" }, Wi = "aham-ui-designer-screens-height", Gi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2099
+ }), [["__scopeId", "data-v-927e0835"]]), Ui = { class: "ui-designer" }, Wi = { class: "contents" }, Gi = "aham-ui-designer-screens-height", Ki = /*#__PURE__*/ $(/* @__PURE__ */ u({
2099
2100
  __name: "Designer",
2100
2101
  props: {
2101
2102
  value: {},
@@ -2148,13 +2149,13 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2148
2149
  d = !0, document.body.style.cursor = "row-resize", document.addEventListener("pointermove", C), document.addEventListener("pointerup", x), e.currentTarget.setPointerCapture?.(e.pointerId);
2149
2150
  }
2150
2151
  return g(() => {
2151
- let e = Number(localStorage.getItem(Wi));
2152
+ let e = Number(localStorage.getItem(Gi));
2152
2153
  Number.isFinite(e) && (u.value = Math.min(80, Math.max(20, e)));
2153
2154
  }), k(u, (e) => {
2154
- localStorage.setItem(Wi, String(e));
2155
+ localStorage.setItem(Gi, String(e));
2155
2156
  }), h(x), (t, n) => {
2156
2157
  let r = S("Workspace");
2157
- return v(), a("section", Hi, [l(Ci, {
2158
+ return v(), a("section", Ui, [l(Ci, {
2158
2159
  subject: e.options?.subject ?? "",
2159
2160
  shared: e.options?.shared,
2160
2161
  "theme-changeable": e.options?.theme?.changeable,
@@ -2165,14 +2166,14 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2165
2166
  "shared",
2166
2167
  "theme-changeable",
2167
2168
  "more-items"
2168
- ]), o("div", Ui, [
2169
+ ]), o("div", Wi, [
2169
2170
  o("aside", null, [o("div", {
2170
2171
  ref_key: "sidebarPanels",
2171
2172
  ref: i,
2172
2173
  class: "sidebar-panels",
2173
2174
  style: m({ "--screens-height": `${u.value}%` })
2174
2175
  }, [
2175
- l(Vi, {
2176
+ l(Hi, {
2176
2177
  templates: s.value,
2177
2178
  "focused-template-id": c.value,
2178
2179
  onAdd: f,
@@ -2186,7 +2187,7 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2186
2187
  onPointerdown: w
2187
2188
  }, [...n[0] ||= [o("span", { "aria-hidden": "true" }, null, -1)]], 32),
2188
2189
  l(oi)
2189
- ], 4), l(ki, { items: e.options?.checklist }, null, 8, ["items"])]),
2190
+ ], 4), l(Ai, { items: e.options?.checklist }, null, 8, ["items"])]),
2190
2191
  l(r, {
2191
2192
  class: "workspace",
2192
2193
  subject: e.options?.subject ?? ""
@@ -2195,7 +2196,7 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2195
2196
  ])]);
2196
2197
  };
2197
2198
  }
2198
- }), [["__scopeId", "data-v-95006144"]]), Ki = te("checklist", {
2199
+ }), [["__scopeId", "data-v-da3e0d0f"]]), qi = te("checklist", {
2199
2200
  state: () => ({ items: [{
2200
2201
  id: "configure-screen",
2201
2202
  label: "Configure the selected screen",
@@ -2216,7 +2217,7 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2216
2217
  });
2217
2218
  }
2218
2219
  }
2219
- }), qi = te("screens", {
2220
+ }), Ji = te("screens", {
2220
2221
  state: () => ({
2221
2222
  screens: [],
2222
2223
  screen: null
@@ -2251,10 +2252,10 @@ var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]])
2251
2252
  });
2252
2253
  //#endregion
2253
2254
  //#region src/widgets/components/types.ts
2254
- function Ji(e) {
2255
+ function Yi(e) {
2255
2256
  if (e !== void 0 && e !== "") return typeof e == "number" || /^-?\d+(?:\.\d+)?$/.test(String(e)) ? `${e}px` : String(e);
2256
2257
  }
2257
- function Yi(e) {
2258
+ function Xi(e) {
2258
2259
  let t = {};
2259
2260
  for (let n of [
2260
2261
  "width",
@@ -2265,10 +2266,10 @@ function Yi(e) {
2265
2266
  "borderWidth",
2266
2267
  "radius"
2267
2268
  ]) {
2268
- let r = Ji(e[n]);
2269
+ let r = Yi(e[n]);
2269
2270
  r && (t[n === "radius" ? "borderRadius" : n] = r);
2270
2271
  }
2271
- if (e.background && (t.background = e.background), e.layout === "grid" ? (t.display = "grid", t.gridTemplateColumns = e.columns || "1fr 1fr", t.alignItems = e.align || "stretch") : e.layout === "block" ? t.display = "block" : (t.display = "flex", t.flexDirection = e.direction || "column", t.alignItems = e.align || "stretch", t.justifyContent = e.justify || "flex-start"), e.layout !== "block" && e.gap !== void 0 && (t.gap = Ji(e.gap) || "0"), e.borderStyle && e.borderStyle !== "none" && (t.border = `${Ji(e.borderWidth) || "1px"} ${e.borderStyle} ${e.borderColor || "currentColor"}`), e.position) {
2272
+ if (e.background && (t.background = e.background), e.layout === "grid" ? (t.display = "grid", t.gridTemplateColumns = e.columns || "1fr 1fr", t.alignItems = e.align || "stretch") : e.layout === "block" ? t.display = "block" : (t.display = "flex", t.flexDirection = e.direction || "column", t.alignItems = e.align || "stretch", t.justifyContent = e.justify || "flex-start"), e.layout !== "block" && e.gap !== void 0 && (t.gap = Yi(e.gap) || "0"), e.borderStyle && e.borderStyle !== "none" && (t.border = `${Yi(e.borderWidth) || "1px"} ${e.borderStyle} ${e.borderColor || "currentColor"}`), e.position) {
2272
2273
  t.position = e.position;
2273
2274
  for (let n of [
2274
2275
  "left",
@@ -2276,7 +2277,7 @@ function Yi(e) {
2276
2277
  "right",
2277
2278
  "bottom"
2278
2279
  ]) {
2279
- let r = Ji(e[n]);
2280
+ let r = Yi(e[n]);
2280
2281
  r && (t[n] = r);
2281
2282
  }
2282
2283
  }
@@ -2284,7 +2285,7 @@ function Yi(e) {
2284
2285
  }
2285
2286
  //#endregion
2286
2287
  //#region src/widgets/components/Container.vue
2287
- var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2288
+ var Zi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2288
2289
  __name: "Container",
2289
2290
  props: {
2290
2291
  width: {},
@@ -2309,13 +2310,13 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2309
2310
  bottom: {}
2310
2311
  },
2311
2312
  setup(e) {
2312
- let t = e, r = n(() => Yi(t));
2313
+ let t = e, r = n(() => Xi(t));
2313
2314
  return (e, t) => (v(), a("div", {
2314
2315
  class: "container-component",
2315
2316
  style: m(r.value)
2316
2317
  }, [x(e.$slots, "default", {}, () => [t[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
2317
2318
  }
2318
- }), [["__scopeId", "data-v-42c23412"]]), Zi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2319
+ }), [["__scopeId", "data-v-42c23412"]]), Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2319
2320
  __name: "Card",
2320
2321
  props: {
2321
2322
  shadow: {
@@ -2345,7 +2346,7 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2345
2346
  },
2346
2347
  setup(e) {
2347
2348
  let t = e, r = n(() => ({
2348
- ...Yi(t),
2349
+ ...Xi(t),
2349
2350
  boxShadow: t.shadow ? "var(--shadow-soft, 0 8px 24px rgb(0 0 0 / 10%))" : "none"
2350
2351
  }));
2351
2352
  return (e, t) => (v(), a("div", {
@@ -2353,7 +2354,7 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2353
2354
  style: m(r.value)
2354
2355
  }, [x(e.$slots, "default", {}, () => [t[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
2355
2356
  }
2356
- }), [["__scopeId", "data-v-b06c1052"]]), Qi = /* @__PURE__ */ u({
2357
+ }), [["__scopeId", "data-v-b06c1052"]]), $i = /* @__PURE__ */ u({
2357
2358
  __name: "Spacer",
2358
2359
  props: { height: { default: 20 } },
2359
2360
  setup(e) {
@@ -2363,13 +2364,13 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2363
2364
  "aria-hidden": "true"
2364
2365
  }, null, 4));
2365
2366
  }
2366
- }), $i = { class: "divider-component" }, ea = { key: 0 }, ta = /*#__PURE__*/ $(/* @__PURE__ */ u({
2367
+ }), ea = { class: "divider-component" }, ta = { key: 0 }, na = /*#__PURE__*/ $(/* @__PURE__ */ u({
2367
2368
  __name: "Divider",
2368
2369
  props: { label: { default: "or" } },
2369
2370
  setup(e) {
2370
- return (t, n) => (v(), a("div", $i, [e.label ? (v(), a("span", ea, T(e.label), 1)) : i("", !0)]));
2371
+ return (t, n) => (v(), a("div", ea, [e.label ? (v(), a("span", ta, T(e.label), 1)) : i("", !0)]));
2371
2372
  }
2372
- }), [["__scopeId", "data-v-a6e861b8"]]), na = /*#__PURE__*/ $(/* @__PURE__ */ u({
2373
+ }), [["__scopeId", "data-v-a6e861b8"]]), ra = /*#__PURE__*/ $(/* @__PURE__ */ u({
2373
2374
  __name: "Layout",
2374
2375
  props: {
2375
2376
  direction: { default: "column" },
@@ -2388,16 +2389,16 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2388
2389
  style: m(r.value)
2389
2390
  }, [x(e.$slots, "default", {}, () => [t[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
2390
2391
  }
2391
- }), [["__scopeId", "data-v-be209bd5"]]), ra = { class: "layout-ref-component" }, ia = { class: "badge" }, aa = { key: 0 }, oa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2392
+ }), [["__scopeId", "data-v-be209bd5"]]), ia = { class: "layout-ref-component" }, aa = { class: "badge" }, oa = { key: 0 }, sa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2392
2393
  __name: "LayoutRef",
2393
2394
  props: {
2394
2395
  layoutKey: { default: "" },
2395
2396
  label: { default: "Layout" }
2396
2397
  },
2397
2398
  setup(e) {
2398
- return (t, n) => (v(), a("div", ra, [o("div", ia, [c("◆ " + T(e.label), 1), e.layoutKey ? (v(), a("span", aa, " · " + T(e.layoutKey), 1)) : i("", !0)]), x(t.$slots, "default", {}, () => [n[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)]));
2399
+ return (t, n) => (v(), a("div", ia, [o("div", aa, [c("◆ " + T(e.label), 1), e.layoutKey ? (v(), a("span", oa, " · " + T(e.layoutKey), 1)) : i("", !0)]), x(t.$slots, "default", {}, () => [n[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)]));
2399
2400
  }
2400
- }), [["__scopeId", "data-v-d41ee6eb"]]), sa = { class: "field-component" }, ca = { class: "label" }, la = { key: 0 }, ua = ["value", "placeholder"], da = /*#__PURE__*/ $(/* @__PURE__ */ u({
2401
+ }), [["__scopeId", "data-v-d41ee6eb"]]), ca = { class: "field-component" }, la = { class: "label" }, ua = { key: 0 }, da = ["value", "placeholder"], fa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2401
2402
  __name: "EmailInput",
2402
2403
  props: {
2403
2404
  label: { default: "Email" },
@@ -2409,14 +2410,14 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2409
2410
  modelValue: {}
2410
2411
  },
2411
2412
  setup(e) {
2412
- return (t, n) => (v(), a("label", sa, [o("span", ca, [c(T(e.label), 1), e.required ? (v(), a("b", la, "*")) : i("", !0)]), o("input", {
2413
+ return (t, n) => (v(), a("label", ca, [o("span", la, [c(T(e.label), 1), e.required ? (v(), a("b", ua, "*")) : i("", !0)]), o("input", {
2413
2414
  value: e.modelValue,
2414
2415
  type: "email",
2415
2416
  placeholder: e.placeholder,
2416
2417
  readonly: ""
2417
- }, null, 8, ua)]));
2418
+ }, null, 8, da)]));
2418
2419
  }
2419
- }), [["__scopeId", "data-v-c7f2e797"]]), fa = { class: "field-component" }, pa = { class: "label" }, ma = { key: 0 }, ha = ["value", "placeholder"], ga = /*#__PURE__*/ $(/* @__PURE__ */ u({
2420
+ }), [["__scopeId", "data-v-c7f2e797"]]), pa = { class: "field-component" }, ma = { class: "label" }, ha = { key: 0 }, ga = ["value", "placeholder"], _a = /*#__PURE__*/ $(/* @__PURE__ */ u({
2420
2421
  __name: "TextInput",
2421
2422
  props: {
2422
2423
  label: { default: "Full name" },
@@ -2428,14 +2429,14 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2428
2429
  modelValue: {}
2429
2430
  },
2430
2431
  setup(e) {
2431
- return (t, n) => (v(), a("label", fa, [o("span", pa, [c(T(e.label), 1), e.required ? (v(), a("b", ma, "*")) : i("", !0)]), o("input", {
2432
+ return (t, n) => (v(), a("label", pa, [o("span", ma, [c(T(e.label), 1), e.required ? (v(), a("b", ha, "*")) : i("", !0)]), o("input", {
2432
2433
  value: e.modelValue,
2433
2434
  type: "text",
2434
2435
  placeholder: e.placeholder,
2435
2436
  readonly: ""
2436
- }, null, 8, ha)]));
2437
+ }, null, 8, ga)]));
2437
2438
  }
2438
- }), [["__scopeId", "data-v-b5ed7071"]]), _a = { class: "field-component" }, va = { class: "field-row" }, ya = { class: "label" }, ba = { key: 0 }, xa = ["value", "placeholder"], Sa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2439
+ }), [["__scopeId", "data-v-b5ed7071"]]), va = { class: "field-component" }, ya = { class: "field-row" }, ba = { class: "label" }, xa = { key: 0 }, Sa = ["value", "placeholder"], Ca = /*#__PURE__*/ $(/* @__PURE__ */ u({
2439
2440
  __name: "PasswordInput",
2440
2441
  props: {
2441
2442
  label: { default: "Password" },
@@ -2451,7 +2452,7 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2451
2452
  modelValue: {}
2452
2453
  },
2453
2454
  setup(e) {
2454
- return (t, n) => (v(), a("label", _a, [o("span", va, [o("span", ya, [c(T(e.label), 1), e.required ? (v(), a("b", ba, "*")) : i("", !0)]), e.showForgot ? (v(), a("a", {
2455
+ return (t, n) => (v(), a("label", va, [o("span", ya, [o("span", ba, [c(T(e.label), 1), e.required ? (v(), a("b", xa, "*")) : i("", !0)]), e.showForgot ? (v(), a("a", {
2455
2456
  key: 0,
2456
2457
  href: "#",
2457
2458
  onClick: n[0] ||= N(() => {}, ["prevent"])
@@ -2460,9 +2461,9 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2460
2461
  type: "password",
2461
2462
  placeholder: e.placeholder,
2462
2463
  readonly: ""
2463
- }, null, 8, xa)]));
2464
+ }, null, 8, Sa)]));
2464
2465
  }
2465
- }), [["__scopeId", "data-v-ad9dff41"]]), Ca = { class: "field-component" }, wa = { class: "label" }, Ta = { class: "otp-row" }, Ea = /*#__PURE__*/ $(/* @__PURE__ */ u({
2466
+ }), [["__scopeId", "data-v-ad9dff41"]]), wa = { class: "field-component" }, Ta = { class: "label" }, Ea = { class: "otp-row" }, Da = /*#__PURE__*/ $(/* @__PURE__ */ u({
2466
2467
  __name: "OtpInput",
2467
2468
  props: {
2468
2469
  label: { default: "Verification code" },
@@ -2470,12 +2471,12 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2470
2471
  },
2471
2472
  setup(t) {
2472
2473
  let r = t, i = n(() => Array.from({ length: Math.max(1, r.digits) }));
2473
- return (n, r) => (v(), a("div", Ca, [o("span", wa, T(t.label), 1), o("div", Ta, [(v(!0), a(e, null, b(i.value, (e, t) => (v(), a("span", {
2474
+ return (n, r) => (v(), a("div", wa, [o("span", Ta, T(t.label), 1), o("div", Ea, [(v(!0), a(e, null, b(i.value, (e, t) => (v(), a("span", {
2474
2475
  key: t,
2475
2476
  class: "otp-box"
2476
2477
  }))), 128))])]));
2477
2478
  }
2478
- }), [["__scopeId", "data-v-1914959e"]]), Da = { class: "checkbox-component" }, Oa = ["checked"], ka = /*#__PURE__*/ $(/* @__PURE__ */ u({
2479
+ }), [["__scopeId", "data-v-1914959e"]]), Oa = { class: "checkbox-component" }, ka = ["checked"], Aa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2479
2480
  __name: "Checkbox",
2480
2481
  props: {
2481
2482
  label: { default: "Remember me" },
@@ -2486,13 +2487,13 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2486
2487
  modelValue: { type: Boolean }
2487
2488
  },
2488
2489
  setup(e) {
2489
- return (t, n) => (v(), a("label", Da, [o("input", {
2490
+ return (t, n) => (v(), a("label", Oa, [o("input", {
2490
2491
  type: "checkbox",
2491
2492
  checked: e.modelValue ?? e.checked,
2492
2493
  readonly: ""
2493
- }, null, 8, Oa), o("span", null, T(e.label), 1)]));
2494
+ }, null, 8, ka), o("span", null, T(e.label), 1)]));
2494
2495
  }
2495
- }), [["__scopeId", "data-v-3d492d6d"]]), Aa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2496
+ }), [["__scopeId", "data-v-3d492d6d"]]), ja = /*#__PURE__*/ $(/* @__PURE__ */ u({
2496
2497
  __name: "SubmitButton",
2497
2498
  props: {
2498
2499
  text: { default: "Sign in" },
@@ -2504,10 +2505,10 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2504
2505
  class: p(["submit-button", e.style])
2505
2506
  }, T(e.text), 3));
2506
2507
  }
2507
- }), [["__scopeId", "data-v-9807299a"]]), ja = {
2508
+ }), [["__scopeId", "data-v-9807299a"]]), Ma = {
2508
2509
  type: "button",
2509
2510
  class: "social-button"
2510
- }, Ma = /*#__PURE__*/ $(/* @__PURE__ */ u({
2511
+ }, Na = /*#__PURE__*/ $(/* @__PURE__ */ u({
2511
2512
  __name: "SocialButton",
2512
2513
  props: {
2513
2514
  provider: { default: "google" },
@@ -2532,16 +2533,16 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2532
2533
  color: "#111"
2533
2534
  }
2534
2535
  }, i = n(() => r[t.provider]);
2535
- return (t, n) => (v(), a("button", ja, [o("span", {
2536
+ return (t, n) => (v(), a("button", Ma, [o("span", {
2536
2537
  class: "social-icon",
2537
2538
  style: m({ background: i.value.color })
2538
2539
  }, T(i.value.letter), 5), c(T(e.text), 1)]));
2539
2540
  }
2540
- }), [["__scopeId", "data-v-3045616f"]]), Na = [
2541
+ }), [["__scopeId", "data-v-3045616f"]]), Pa = [
2541
2542
  "href",
2542
2543
  "target",
2543
2544
  "rel"
2544
- ], Pa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2545
+ ], Fa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2545
2546
  __name: "TextLink",
2546
2547
  props: {
2547
2548
  text: { default: "Forgot password?" },
@@ -2554,9 +2555,9 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2554
2555
  href: e.href,
2555
2556
  target: e.target,
2556
2557
  rel: e.target === "_blank" ? "noopener noreferrer" : void 0
2557
- }, T(e.text), 9, Na));
2558
+ }, T(e.text), 9, Pa));
2558
2559
  }
2559
- }), [["__scopeId", "data-v-8d18edb1"]]), Fa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2560
+ }), [["__scopeId", "data-v-8d18edb1"]]), Ia = /*#__PURE__*/ $(/* @__PURE__ */ u({
2560
2561
  __name: "Heading",
2561
2562
  props: {
2562
2563
  text: { default: "Welcome back" },
@@ -2569,17 +2570,17 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2569
2570
  _: 1
2570
2571
  }, 8, ["class"]));
2571
2572
  }
2572
- }), [["__scopeId", "data-v-1c78b10f"]]), Ia = { class: "text-component" }, La = /*#__PURE__*/ $(/* @__PURE__ */ u({
2573
+ }), [["__scopeId", "data-v-1c78b10f"]]), La = { class: "text-component" }, Ra = /*#__PURE__*/ $(/* @__PURE__ */ u({
2573
2574
  __name: "Text",
2574
2575
  props: { text: { default: "Enter your details to continue." } },
2575
2576
  setup(e) {
2576
- return (t, n) => (v(), a("p", Ia, T(e.text), 1));
2577
+ return (t, n) => (v(), a("p", La, T(e.text), 1));
2577
2578
  }
2578
- }), [["__scopeId", "data-v-3be0c0c9"]]), Ra = [
2579
+ }), [["__scopeId", "data-v-3be0c0c9"]]), za = [
2579
2580
  "href",
2580
2581
  "target",
2581
2582
  "rel"
2582
- ], za = ["src", "alt"], Ba = { key: 1 }, Va = ["src", "alt"], Ha = { key: 1 }, Ua = /*#__PURE__*/ $(/* @__PURE__ */ u({
2583
+ ], Ba = ["src", "alt"], Va = { key: 1 }, Ha = ["src", "alt"], Ua = { key: 1 }, Wa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2583
2584
  __name: "Image",
2584
2585
  props: {
2585
2586
  src: { default: "" },
@@ -2610,7 +2611,7 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2610
2611
  key: 0,
2611
2612
  src: e.src,
2612
2613
  alt: e.alt
2613
- }, null, 8, za)) : (v(), a("span", Ba, T(e.alt), 1))], 4)], 8, Ra)) : (v(), a("div", {
2614
+ }, null, 8, Ba)) : (v(), a("span", Va, T(e.alt), 1))], 4)], 8, za)) : (v(), a("div", {
2614
2615
  key: 1,
2615
2616
  class: "image-component",
2616
2617
  style: m(i.value)
@@ -2618,36 +2619,36 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2618
2619
  key: 0,
2619
2620
  src: e.src,
2620
2621
  alt: e.alt
2621
- }, null, 8, Va)) : (v(), a("span", Ha, T(e.alt), 1))], 4));
2622
+ }, null, 8, Ha)) : (v(), a("span", Ua, T(e.alt), 1))], 4));
2622
2623
  }
2623
- }), [["__scopeId", "data-v-ecc98881"]]), Wa = { "aria-hidden": "true" }, Ga = /*#__PURE__*/ $(/* @__PURE__ */ u({
2624
+ }), [["__scopeId", "data-v-ecc98881"]]), Ga = { "aria-hidden": "true" }, Ka = /*#__PURE__*/ $(/* @__PURE__ */ u({
2624
2625
  __name: "Alert",
2625
2626
  props: {
2626
2627
  tone: { default: "info" },
2627
2628
  text: { default: "Check your inbox for the reset link." }
2628
2629
  },
2629
2630
  setup(e) {
2630
- return (t, n) => (v(), a("div", { class: p(["alert-component", e.tone]) }, [o("span", Wa, T(e.tone === "error" ? "⚠" : e.tone === "success" ? "✓" : "ⓘ"), 1), o("span", null, T(e.text), 1)], 2));
2631
+ return (t, n) => (v(), a("div", { class: p(["alert-component", e.tone]) }, [o("span", Ga, T(e.tone === "error" ? "⚠" : e.tone === "success" ? "✓" : "ⓘ"), 1), o("span", null, T(e.text), 1)], 2));
2631
2632
  }
2632
- }), [["__scopeId", "data-v-bf171873"]]), Ka = { class: "content-component" }, qa = { class: "empty" }, Ja = /*#__PURE__*/ $(/* @__PURE__ */ u({
2633
+ }), [["__scopeId", "data-v-bf171873"]]), qa = { class: "content-component" }, Ja = { class: "empty" }, Ya = /*#__PURE__*/ $(/* @__PURE__ */ u({
2633
2634
  __name: "Content",
2634
2635
  props: { note: { default: "Page content goes here" } },
2635
2636
  setup(e) {
2636
- return (t, n) => (v(), a("div", Ka, [x(t.$slots, "default", {}, () => [o("div", qa, T(e.note), 1)], !0)]));
2637
+ return (t, n) => (v(), a("div", qa, [x(t.$slots, "default", {}, () => [o("div", Ja, T(e.note), 1)], !0)]));
2637
2638
  }
2638
- }), [["__scopeId", "data-v-1c551f9d"]]), Ya = { class: "consent-card" }, Xa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2639
+ }), [["__scopeId", "data-v-1c551f9d"]]), Xa = { class: "consent-card" }, Za = /*#__PURE__*/ $(/* @__PURE__ */ u({
2639
2640
  __name: "ConsentCard",
2640
2641
  props: {
2641
2642
  appName: { default: "Acme Analytics" },
2642
2643
  requestedBy: { default: "acme.io" }
2643
2644
  },
2644
2645
  setup(e) {
2645
- return (t, n) => (v(), a("div", Ya, [n[0] ||= o("span", {
2646
+ return (t, n) => (v(), a("div", Xa, [n[0] ||= o("span", {
2646
2647
  class: "icon",
2647
2648
  "aria-hidden": "true"
2648
2649
  }, "✓", -1), o("div", null, [o("strong", null, T(e.appName), 1), o("span", null, "wants to access your account · " + T(e.requestedBy), 1)])]));
2649
2650
  }
2650
- }), [["__scopeId", "data-v-9008f821"]]), Za = { class: "scope-list" }, Qa = /*#__PURE__*/ $(/* @__PURE__ */ u({
2651
+ }), [["__scopeId", "data-v-9008f821"]]), Qa = { class: "scope-list" }, $a = /*#__PURE__*/ $(/* @__PURE__ */ u({
2651
2652
  __name: "ScopeList",
2652
2653
  props: { scopes: { default: () => [
2653
2654
  "Read your profile",
@@ -2656,11 +2657,11 @@ var Xi = /*#__PURE__*/ $(/* @__PURE__ */ u({
2656
2657
  ] } },
2657
2658
  setup(t) {
2658
2659
  let r = t, i = n(() => Array.isArray(r.scopes) ? r.scopes : r.scopes.split("\n").filter(Boolean));
2659
- return (t, n) => (v(), a("div", Za, [(v(!0), a(e, null, b(i.value, (e) => (v(), a("div", {
2660
+ return (t, n) => (v(), a("div", Qa, [(v(!0), a(e, null, b(i.value, (e) => (v(), a("div", {
2660
2661
  key: e,
2661
2662
  class: "scope"
2662
2663
  }, [n[0] ||= o("span", { "aria-hidden": "true" }, "✓", -1), o("span", null, T(e), 1)]))), 128))]));
2663
2664
  }
2664
2665
  }), [["__scopeId", "data-v-cdebac9d"]]);
2665
2666
  //#endregion
2666
- export { Ga as Alert, Zi as Card, ka as Checkbox, Xa as ConsentCard, Xi as Container, Ja as Content, Gi as Designer, ta as Divider, da as EmailInput, Fa as Heading, Ua as Image, na as Layout, oa as LayoutRef, Ea as OtpInput, Sa as PasswordInput, Qa as ScopeList, Ma as SocialButton, Qi as Spacer, Aa as SubmitButton, La as Text, ga as TextInput, Pa as TextLink, Yr as TextScroller, Ki as useChecklistStore, qi as useScreensStore };
2667
+ export { Ka as Alert, Qi as Card, Aa as Checkbox, Za as ConsentCard, Zi as Container, Ya as Content, Ki as Designer, na as Divider, fa as EmailInput, Ia as Heading, Wa as Image, ra as Layout, sa as LayoutRef, Da as OtpInput, Ca as PasswordInput, $a as ScopeList, Na as SocialButton, $i as Spacer, ja as SubmitButton, Ra as Text, _a as TextInput, Fa as TextLink, Yr as TextScroller, qi as useChecklistStore, Ji as useScreensStore };
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@aham.ro/ui-designer",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "Vue components for the UI designer for IAM and email templates.",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"
8
8
  ],
9
- "main": "./dist/iam-designer.js",
10
- "module": "./dist/iam-designer.js",
9
+ "main": "./dist/ui-designer.js",
10
+ "module": "./dist/ui-designer.js",
11
11
  "types": "./dist/index.d.ts",
12
12
  "exports": {
13
13
  ".": {
14
14
  "types": "./dist/index.d.ts",
15
- "import": "./dist/iam-designer.js"
15
+ "import": "./dist/ui-designer.js"
16
16
  },
17
- "./style.css": "./dist/iam-designer.css",
18
- "./designer.css": "./dist/iam-designer.css"
17
+ "./style.css": "./dist/ui-designer.css",
18
+ "./designer.css": "./dist/ui-designer.css"
19
19
  },
20
20
  "scripts": {
21
21
  "dev": "vite",
@@ -1,2 +0,0 @@
1
- @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200";.iam-designer{--designer-panel:var(--color-panel,#fff);--designer-panel-raised:var(--color-panel-raised,#f5f2ee);--designer-text:var(--color-text,#111);--designer-muted:var(--color-text-muted,#6b7280);--designer-border:var(--color-border,#ece9e4);--designer-shell:var(--color-background,#fafaf9);--designer-primary:var(--color-primary,#2563eb);--designer-space-xs:var(--space-xs,6px);--designer-space-sm:var(--space-sm,10px);--designer-space-md:var(--space-md,14px);--designer-font-xs:var(--font-xs,11px);--designer-font-sm:var(--font-sm,12.5px);--designer-font-lg:var(--font-lg,19px)}.iam-designer [data-overlayscrollbars]{--os-size:6px;--os-padding-perpendicular:2px;--os-track-border-radius:4px;--os-handle-border-radius:4px;--os-handle-bg:color-mix(in srgb, var(--designer-muted) 35%, transparent);--os-handle-bg-hover:var(--designer-muted);--os-handle-bg-active:var(--designer-primary)}.iam-designer [data-overlayscrollbars]>.os-scrollbar-horizontal{display:none}.text-scroller[data-v-8fac895b]{white-space:nowrap;min-width:0;display:block;overflow:hidden}.text-scroller-content[data-v-8fac895b]{text-overflow:ellipsis;vertical-align:top;min-width:100%;display:inline-block;overflow:hidden}.text-scroller.scrolling .text-scroller-content[data-v-8fac895b]{animation:text-scroller-loop-8fac895b var(--scroll-duration) linear;text-overflow:clip}@keyframes text-scroller-loop-8fac895b{0%,15%{transform:translate(0)}85%,to{transform:translateX(calc(-1 * var(--scroll-distance)))}}.component-list[data-v-29d47f96]{border-top:1px solid var(--designer-border);flex-direction:column;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.component-head[data-v-29d47f96]{padding:12px var(--designer-space-sm) 8px;color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;flex:none}.component-content[data-v-29d47f96]{box-sizing:border-box;flex:auto;width:100%;min-width:0;height:0;min-height:0;padding:0 0 12px}.palette-search[data-v-29d47f96]{border:1px solid var(--designer-border);background:var(--designer-shell);color:var(--designer-muted);border-radius:7px;flex:none;align-items:center;gap:7px;margin:0 10px 10px;padding:7px 8px;display:flex}.palette-search input[data-v-29d47f96]{width:100%;min-width:0;color:var(--designer-text);font:inherit;font-size:var(--designer-font-sm);background:0 0;border:0;outline:0}.component-group+.component-group[data-v-29d47f96]{margin-top:14px}.component-groups[data-v-29d47f96]{box-sizing:border-box;width:100%;min-width:0;padding:0 10px}.component-content[data-v-29d47f96] [data-overlayscrollbars-contents]{box-sizing:border-box;width:100%;min-width:0}.component-content[data-v-29d47f96] [data-overlayscrollbars-viewport]{height:100%!important;overflow-y:scroll!important}.group-label[data-v-29d47f96]{color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;padding:0 4px 6px}.component-items[data-v-29d47f96]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;display:grid}.component-item[data-v-29d47f96]{border:1px solid var(--designer-border);background:var(--designer-panel);min-width:0;color:var(--designer-text);font:inherit;font-size:var(--designer-font-xs);text-align:left;cursor:pointer;border-radius:8px;flex-direction:column;align-items:flex-start;gap:5px;padding:7px;line-height:1.2;display:flex}.component-item[data-v-29d47f96]:hover{border-color:color-mix(in srgb, var(--designer-primary) 35%, var(--designer-border));background:var(--designer-panel-raised);transform:translateY(-1px)}.component-icon[data-v-29d47f96]{background:var(--designer-panel-raised);width:20px;height:20px;color:var(--designer-muted);border-radius:6px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.component-item:hover .component-icon[data-v-29d47f96]{color:var(--designer-primary)}.component-label[data-v-29d47f96]{width:100%;max-width:100%}.component-empty[data-v-29d47f96]{color:var(--designer-muted);font-size:var(--designer-font-xs);text-align:center;grid-column:1/-1;padding:10px 4px}[data-overlayscrollbars].component-content[data-v-29d47f96]{flex:auto;height:0;min-height:0}.icon-button[data-v-b3b6390f]{border:1px solid var(--color-border,#ece9e4);border-radius:var(--radius-sm,10px);background-color:var(--color-panel,#fff);width:34px;height:34px;color:var(--color-text-muted,#6b7280);font:inherit;cursor:pointer;justify-content:center;align-items:center;padding:0;line-height:1;transition:color .15s,border-color .15s,background-color .15s;display:inline-flex}.icon-button[data-v-b3b6390f]:hover:not(:disabled){color:var(--color-primary,#2563eb);border-color:var(--color-primary,#2563eb);background-color:var(--color-panel-raised,#f5f2ee)}.icon-button[data-v-b3b6390f]:disabled{opacity:.5;cursor:not-allowed}.more-menu[data-v-923fea1e]{position:relative}.more-button[data-v-923fea1e]{border-radius:var(--radius-xs,6px);background-color:var(--color-panel,#fff);width:32px;height:32px;color:var(--color-text,#111);font:inherit;cursor:pointer;border:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.more-button[aria-expanded=true][data-v-923fea1e]{background-color:var(--color-panel-raised,#f5f2ee)}.dropdown[data-v-923fea1e]{z-index:1000;border:1px solid var(--designer-border,#ece9e4);border-radius:var(--radius-sm,10px);background:var(--designer-panel,#fff);min-width:180px;color:var(--designer-text,#111);font-family:var(--font-base-family,system-ui, sans-serif);padding:4px;position:fixed;box-shadow:0 8px 24px #0000001f}.dropdown .icon[data-v-923fea1e]{letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-feature-settings:"liga";font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;direction:ltr;font-family:Material Symbols Outlined;font-size:20px;font-style:normal;font-weight:400;line-height:1}.menu-item[data-v-923fea1e]{align-items:center;gap:var(--designer-space-sm,10px);border-radius:var(--radius-xs,6px);width:100%;color:var(--designer-text,#111);font:inherit;font-size:var(--designer-font-sm,12.5px);text-align:left;cursor:pointer;background:0 0;border:0;padding:8px 10px;display:flex}.menu-item[data-v-923fea1e]:hover:not(:disabled){background:var(--designer-panel-raised,#f5f2ee)}.menu-item[data-v-923fea1e]:disabled{opacity:.5;cursor:not-allowed}.save-button[data-v-4a359870]{justify-content:center;align-items:center;gap:var(--space-xs,6px);min-height:32px;padding:6px var(--space-sm,10px);border:1px solid var(--color-primary,#2563eb);border-radius:var(--radius-sm,10px);background-color:var(--color-primary,#2563eb);color:var(--color-on-primary,#fff);font:inherit;font-size:var(--font-sm,12.5px);cursor:pointer;font-weight:500;display:inline-flex}.save-button[data-v-4a359870]:disabled{opacity:.6;cursor:not-allowed}.save-button[data-v-4a359870]:hover{background-color:var(--color-primary-hover,#1d4ed8);border-color:var(--color-primary-hover,#1d4ed8)}.spinner[data-v-4a359870]{border:1px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.75s linear infinite save-button-spin-4a359870}@keyframes save-button-spin-4a359870{to{transform:rotate(360deg)}}header[data-v-b6ce5e30]{box-sizing:border-box;width:100%;height:60px;color:var(--designer-text);border-bottom:1px solid var(--designer-border);font-family:var(--font-base-family,inherit);align-items:center;display:flex}.branding[data-v-b6ce5e30]{height:100%;padding:0 var(--designer-space-md);align-items:center;min-width:0;display:flex}.branding .icon[data-v-b6ce5e30]{margin-right:var(--designer-space-xs);font-size:24px}.branding .title[data-v-b6ce5e30]{text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,620px);font-weight:500;font-size:var(--designer-font-lg);overflow:hidden}.subject[data-v-b6ce5e30]{align-items:center;gap:var(--designer-space-sm);min-width:0;height:100%;display:flex}.subject .document-name[data-v-b6ce5e30]{text-overflow:ellipsis;white-space:nowrap;max-width:min(35vw,360px);font-size:var(--designer-font-xs);background-color:var(--color-surface-disabled,color-mix(in srgb, var(--designer-text) 4%, var(--designer-panel)));border-radius:var(--radius-xs,6px);color:var(--color-info,var(--designer-primary));padding:4px 8px;font-weight:500;overflow:hidden}.subject .shared[data-v-b6ce5e30]{color:var(--designer-muted);font-size:var(--designer-font-md);cursor:default}.actions[data-v-b6ce5e30]{height:100%;padding:0 var(--designer-space-md);justify-content:flex-end;align-items:center;gap:var(--designer-space-sm);flex:1;display:flex}.icon[data-v-b6ce5e30]{white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}@media (width<=720px){.subject[data-v-b6ce5e30]{display:none}.actions[data-v-b6ce5e30]{padding-right:var(--designer-space-sm)}}.properties-panel[data-v-d42babf5]{min-height:0;color:var(--designer-text);flex-direction:column;display:flex}.properties-head[data-v-d42babf5]{min-height:52px;padding:0 var(--designer-space-md);border-bottom:1px solid var(--designer-border);font-size:var(--designer-font-sm);align-items:center;gap:8px;display:flex}.property-icon[data-v-d42babf5]{color:var(--designer-primary);font-size:16px}.properties-empty[data-v-d42babf5]{padding:22px var(--designer-space-md);color:var(--designer-muted);font-size:var(--designer-font-sm);line-height:1.5}.layers[data-v-d42babf5]{padding:12px var(--designer-space-md);border-top:1px solid var(--designer-border);margin-top:auto}.layers-title[data-v-d42babf5]{color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.layer-empty[data-v-d42babf5]{color:var(--designer-muted);font-size:var(--designer-font-sm)}.side-info[data-v-f439ecfe]{border-top:1px solid var(--designer-border);height:auto;color:var(--designer-muted);font-size:var(--designer-font-sm);flex:none;padding:12px 14px 16px}.info-title[data-v-f439ecfe]{color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.info-row[data-v-f439ecfe]{align-items:flex-start;gap:8px;line-height:1.4;display:flex}.info-row+.info-row[data-v-f439ecfe]{margin-top:7px}.info-dot[data-v-f439ecfe]{background:var(--color-accent-3,#c9973f);border-radius:50%;flex:none;width:7px;height:7px;margin-top:4px}.info-dot.complete[data-v-f439ecfe]{background:var(--color-success,#5aab72)}.template-list[data-v-927e0835]{box-sizing:border-box;border-bottom:1px solid var(--designer-border);width:100%;min-width:0;min-height:0;padding:12px 0 10px;overflow:hidden}.section-head[data-v-927e0835]{padding:0 var(--designer-space-sm) 8px;color:var(--designer-muted);font-size:var(--designer-font-xs);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;display:flex}.section-head button[data-v-927e0835]{border:1px solid var(--designer-border);background:var(--designer-panel);width:19px;height:19px;color:var(--designer-muted);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.section-head button span[data-v-927e0835]{line-height:1;display:block;transform:translateY(-1px)}.template-tabs[data-v-927e0835]{flex-direction:column;flex:auto;width:100%;min-width:0;height:0;min-height:0;display:flex;overflow:hidden}.template-tab[data-v-927e0835]{box-sizing:border-box;width:calc(100% - 13px);min-width:0;color:var(--designer-muted);font:inherit;font-size:var(--designer-font-sm);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:7px;margin:0 6px 3px;padding:10px 9px;display:flex}.template-tab[data-v-927e0835]:last-of-type{margin-bottom:0}.template-tab[data-v-927e0835]:hover,.template-tab.active[data-v-927e0835]{background:var(--designer-panel-raised);color:var(--designer-primary)}.tab-icon[data-v-927e0835]{width:14px;height:14px;color:var(--designer-muted);flex:none;font-size:14px}.tab-label[data-v-927e0835]{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.tab-label-input[data-v-927e0835]{box-sizing:border-box;border:1px solid var(--designer-border);background:var(--designer-shell);width:100%;color:var(--designer-text);font:inherit;border-radius:3px;outline:0;padding:1px 3px}.tab-channel[data-v-927e0835]{border:1px solid var(--designer-border);background:var(--designer-panel);color:var(--designer-muted);text-transform:uppercase;border-radius:4px;flex:none;padding:1px 4px;font-size:9px;line-height:1.1}.tab-version[data-v-927e0835]{color:var(--designer-muted);font-size:var(--designer-font-xs)}.tab-changed[data-v-927e0835]{background:var(--color-warning,#c9973f);border-radius:50%;flex:none;width:5px;height:5px;transform:translateY(1px)}.empty-list[data-v-927e0835]{color:var(--designer-muted);font-size:var(--designer-font-sm);margin:0;padding:10px 15px}[data-overlayscrollbars].template-tabs[data-v-927e0835]{flex:auto;width:100%;height:0;min-height:0}.template-tabs[data-v-927e0835] [data-overlayscrollbars-viewport]{height:100%!important;overflow-y:scroll!important}.template-tabs[data-v-927e0835] [data-overlayscrollbars-contents]{box-sizing:border-box;width:100%;min-width:0;padding:0 6px 8px 0}section[data-v-95006144]{box-sizing:border-box;flex-direction:column;height:100%;min-height:0;max-height:100vh;display:flex;position:relative;overflow:hidden}.contents[data-v-95006144]{box-sizing:border-box;flex:auto;height:auto;min-height:0;max-height:none;display:flex;overflow:hidden}.contents aside[data-v-95006144]{border-right:1px solid var(--designer-border);flex-direction:column;flex:0 0 200px;width:200px;min-height:0;max-height:100%;display:flex;overflow:hidden}.contents .sidebar-panels[data-v-95006144]{grid-template-rows:var(--screens-height) 9px minmax(0, calc(100% - var(--screens-height) - 9px));flex:1;min-height:0;display:grid}.contents .sidebar-panels>[data-v-95006144]{min-height:0}.contents .panel-resizer[data-v-95006144]{border:0;border-top:1px solid color-mix(in srgb, var(--designer-border) 55%, transparent);border-bottom:1px solid color-mix(in srgb, var(--designer-border) 55%, transparent);cursor:row-resize;background:0 0;justify-content:center;align-items:center;width:100%;padding:0;display:flex}.contents .panel-resizer span[data-v-95006144]{background:var(--designer-border);border-radius:3px;width:28px;height:3px}.contents .panel-resizer:hover span[data-v-95006144]{background:var(--designer-primary)}.contents .workspace[data-v-95006144]{flex:1;min-width:0;max-height:100%}.contents .properties[data-v-95006144]{border-left:1px solid var(--designer-border);flex:0 0 240px;width:240px;min-height:0;max-height:100%;overflow:auto}.container-component[data-v-42c23412]{box-sizing:border-box;min-width:0;color:var(--designer-text,#111)}.empty[data-v-42c23412]{border:1px dashed var(--designer-border,#d9d5cf);min-height:24px;color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.card-component[data-v-b06c1052]{box-sizing:border-box;min-width:0;color:var(--designer-text,#111);background:var(--designer-panel,#fff)}.empty[data-v-b06c1052]{border:1px dashed var(--designer-border,#d9d5cf);min-height:24px;color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.divider-component[data-v-a6e861b8]{width:100%;color:var(--designer-muted,#6b7280);align-items:center;gap:10px;font-size:.8em;display:flex}.divider-component[data-v-a6e861b8]:before,.divider-component[data-v-a6e861b8]:after{background:var(--designer-border,#e5e7eb);content:"";flex:1;height:1px}.layout-component[data-v-be209bd5]{min-width:0}.empty[data-v-be209bd5]{border:1px dashed var(--designer-border,#d9d5cf);color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.layout-ref-component[data-v-d41ee6eb]{min-width:0;padding-top:22px;position:relative}.badge[data-v-d41ee6eb]{color:var(--designer-primary,#2563eb);font-size:.72em;position:absolute;top:0;left:0}.empty[data-v-d41ee6eb]{border:1px dashed var(--designer-border,#d9d5cf);color:var(--designer-muted,#6b7280);text-align:center;padding:12px}.field-component[data-v-c7f2e797]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-c7f2e797]{font-size:.85em;font-weight:600}.label b[data-v-c7f2e797]{color:#dc2626;margin-left:2px}input[data-v-c7f2e797]{box-sizing:border-box;border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;border-radius:7px;padding:9px 10px}.field-component[data-v-b5ed7071]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-b5ed7071]{font-size:.85em;font-weight:600}.label b[data-v-b5ed7071]{color:#dc2626;margin-left:2px}input[data-v-b5ed7071]{box-sizing:border-box;border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;border-radius:7px;padding:9px 10px}.field-component[data-v-ad9dff41]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-ad9dff41]{font-size:.85em;font-weight:600}.label b[data-v-ad9dff41]{color:#dc2626;margin-left:2px}.field-row[data-v-ad9dff41]{justify-content:space-between;gap:8px;display:flex}.field-row a[data-v-ad9dff41]{color:var(--designer-primary,#2563eb);font-size:.85em}input[data-v-ad9dff41]{box-sizing:border-box;border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;border-radius:7px;padding:9px 10px}.field-component[data-v-1914959e]{color:var(--designer-text,#111);gap:6px;display:grid}.label[data-v-1914959e]{font-size:.85em;font-weight:600}.otp-row[data-v-1914959e]{gap:6px;display:flex}.otp-box[data-v-1914959e]{border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);border-radius:6px;width:2em;height:2.3em}.checkbox-component[data-v-3d492d6d]{color:var(--designer-text,#111);cursor:default;align-items:center;gap:8px;display:inline-flex}.checkbox-component input[data-v-3d492d6d]{accent-color:var(--designer-primary,#2563eb)}.submit-button[data-v-9807299a]{width:100%;font:inherit;cursor:pointer;border:0;border-radius:7px;padding:10px 14px}.primary[data-v-9807299a]{background:var(--designer-primary,#2563eb);color:#fff}.secondary[data-v-9807299a]{border:1px solid var(--designer-border,#d9d5cf);color:inherit;background:0 0}.social-button[data-v-3045616f]{border:1px solid var(--designer-border,#d9d5cf);background:var(--designer-panel,#fff);width:100%;color:inherit;font:inherit;cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:9px;padding:9px 14px;display:flex}.social-icon[data-v-3045616f]{color:#fff;border-radius:4px;place-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:inline-grid}.text-link[data-v-8d18edb1]{color:var(--designer-primary,#2563eb);text-decoration:none}.text-link[data-v-8d18edb1]:hover{text-decoration:underline}.heading-component[data-v-1c78b10f]{color:var(--designer-text,#111);margin:0}.sm[data-v-1c78b10f]{font-size:1em}.md[data-v-1c78b10f]{font-size:1.2em}.lg[data-v-1c78b10f]{font-size:1.5em}.xl[data-v-1c78b10f]{font-size:1.9em}.text-component[data-v-3be0c0c9]{color:var(--designer-muted,#6b7280);white-space:pre-wrap;margin:0;line-height:1.5}.image-link[data-v-ecc98881]{max-width:100%;text-decoration:none;display:inline-block}.image-component[data-v-ecc98881]{box-sizing:border-box;background:var(--designer-panel-raised,#f5f2ee);min-height:20px;color:var(--designer-muted,#6b7280);place-items:center;display:grid;overflow:hidden}.image-component img[data-v-ecc98881]{object-fit:cover;width:100%;height:100%;display:block}.alert-component[data-v-bf171873]{border-radius:7px;gap:8px;padding:10px 12px;font-size:.9em;display:flex}.info[data-v-bf171873]{color:#1d4ed8;background:#eff6ff}.success[data-v-bf171873]{color:#047857;background:#ecfdf5}.error[data-v-bf171873]{color:#b91c1c;background:#fef2f2}.content-component[data-v-1c551f9d]{min-width:0}.empty[data-v-1c551f9d]{border:1px dashed var(--designer-border,#d9d5cf);min-height:46px;color:var(--designer-muted,#6b7280);text-align:center;padding:14px}.consent-card[data-v-9008f821]{border:1px solid var(--designer-border,#d9d5cf);border-radius:8px;align-items:center;gap:10px;padding:12px;display:flex}.icon[data-v-9008f821]{color:#15803d;background:#dcfce7;border-radius:50%;place-items:center;width:28px;height:28px;font-weight:700;display:grid}.consent-card div[data-v-9008f821]{gap:3px;display:grid}.consent-card span[data-v-9008f821]{color:var(--designer-muted,#6b7280);font-size:.85em}.scope-list[data-v-cdebac9d]{gap:8px;display:grid}.scope[data-v-cdebac9d]{align-items:center;gap:8px;display:flex}.scope>span[data-v-cdebac9d]:first-child{color:#15803d;font-weight:700}
2
- /*$vite$:1*/