Flowfile 0.5.3__py3-none-any.whl → 0.5.4__py3-none-any.whl

flowfile/web/static/assets/{NodeDesigner-5f53be3f.css → NodeDesigner-94cd4dd3.css}

@@ -157,12 +157,12 @@
   margin-bottom: 0.25rem;
 }
 
-.property-form[data-v-7ea3df75] {
+.property-form[data-v-30942683] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-.component-type-badge[data-v-7ea3df75] {
+.component-type-badge[data-v-30942683] {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -173,22 +173,22 @@
   font-weight: var(--font-weight-medium, 500);
   color: var(--color-text-primary, #374151);
 }
-.component-type-badge i[data-v-7ea3df75] {
+.component-type-badge i[data-v-30942683] {
   color: var(--color-text-secondary, #6b7280);
   font-size: 0.875rem;
 }
-.property-group[data-v-7ea3df75] {
+.property-group[data-v-30942683] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3, 0.75rem);
 }
-.property-editor[data-v-7ea3df75] {
+.property-editor[data-v-30942683] {
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 8px;
   padding: 1rem;
   background: var(--bg-secondary, #f8f9fa);
 }
-.property-group-title[data-v-7ea3df75] {
+.property-group-title[data-v-30942683] {
   font-size: var(--font-size-xs, 0.75rem);
   font-weight: var(--font-weight-semibold, 600);
   color: var(--color-text-secondary, #6b7280);
@@ -197,25 +197,25 @@
   padding-bottom: var(--spacing-2, 0.5rem);
   border-bottom: 1px solid var(--color-border-light, #e5e7eb);
 }
-.property-row[data-v-7ea3df75] {
+.property-row[data-v-30942683] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1, 0.25rem);
 }
-.property-row.checkbox-row[data-v-7ea3df75] {
+.property-row.checkbox-row[data-v-30942683] {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
-.property-label[data-v-7ea3df75] {
+.property-label[data-v-30942683] {
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-medium, 500);
   color: var(--color-text-secondary, #6b7280);
 }
-.required[data-v-7ea3df75] {
+.required[data-v-30942683] {
   color: var(--color-danger, #ef4444);
 }
-.property-input[data-v-7ea3df75] {
+.property-input[data-v-30942683] {
   width: 100%;
   padding: var(--spacing-2, 0.5rem);
   font-size: var(--font-size-sm, 0.875rem);
@@ -225,17 +225,17 @@
   color: var(--color-text-primary, #374151);
   transition: border-color var(--transition-fast, 0.15s);
 }
-.property-input[data-v-7ea3df75]:focus {
+.property-input[data-v-30942683]:focus {
   outline: none;
   border-color: var(--input-border-focus, #4a6cf7);
 }
-.property-checkbox[data-v-7ea3df75] {
+.property-checkbox[data-v-30942683] {
   width: 18px;
   height: 18px;
   cursor: pointer;
   accent-color: var(--primary-color, #4a6cf7);
 }
-.no-selection[data-v-7ea3df75] {
+.no-selection[data-v-30942683] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -244,28 +244,28 @@
   color: var(--color-text-secondary, #6b7280);
   text-align: center;
 }
-.no-selection i[data-v-7ea3df75] {
+.no-selection i[data-v-30942683] {
   font-size: 2rem;
   margin-bottom: 0.75rem;
   opacity: 0.5;
 }
-.no-selection p[data-v-7ea3df75] {
+.no-selection p[data-v-30942683] {
   margin: 0;
   font-size: var(--font-size-sm, 0.875rem);
 }
-.field-hint[data-v-7ea3df75] {
+.field-hint[data-v-30942683] {
   font-size: var(--font-size-xs, 0.75rem);
   color: var(--color-text-secondary, #6b7280);
   margin-top: 0.25rem;
 }
-.action-section[data-v-7ea3df75] {
+.action-section[data-v-30942683] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   padding-top: var(--spacing-4, 1rem);
   border-top: 1px solid var(--color-border-light, #e5e7eb);
 }
-.action-btn[data-v-7ea3df75] {
+.action-btn[data-v-30942683] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -280,83 +280,83 @@
   cursor: pointer;
   transition: background var(--transition-fast, 0.15s);
 }
-.action-btn[data-v-7ea3df75]:hover {
+.action-btn[data-v-30942683]:hover {
   background: var(--primary-color-hover, #3d5bd9);
 }
-.action-btn i[data-v-7ea3df75] {
+.action-btn i[data-v-30942683] {
   font-size: 0.875rem;
 }
 
-.help-section[data-v-5991e8aa] {
+.help-section[data-v-3a89a078] {
   margin-bottom: 1.5rem;
 }
-.help-section[data-v-5991e8aa]:last-child {
+.help-section[data-v-3a89a078]:last-child {
   margin-bottom: 0;
 }
-.help-section h4[data-v-5991e8aa] {
+.help-section h4[data-v-3a89a078] {
   margin: 0 0 0.75rem 0;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary, #1a1a2e);
 }
-.help-section h5[data-v-5991e8aa] {
+.help-section h5[data-v-3a89a078] {
   margin: 0 0 0.5rem 0;
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--text-primary, #1a1a2e);
 }
-.help-section p[data-v-5991e8aa] {
+.help-section p[data-v-3a89a078] {
   margin: 0 0 0.75rem 0;
   color: var(--text-secondary, #6c757d);
   line-height: 1.6;
   font-size: 0.875rem;
 }
-.help-list[data-v-5991e8aa] {
+.help-list[data-v-3a89a078] {
   margin: 0.5rem 0;
   padding-left: 1.5rem;
   color: var(--text-secondary, #6c757d);
   font-size: 0.875rem;
 }
-.help-list li[data-v-5991e8aa] {
+.help-list li[data-v-3a89a078] {
   margin-bottom: 0.375rem;
   line-height: 1.5;
 }
-.help-list code[data-v-5991e8aa] {
+.help-list code[data-v-3a89a078] {
   background: var(--bg-secondary, #f8f9fa);
   padding: 0.125rem 0.375rem;
   border-radius: 3px;
-  font-family: "Fira Code", "Monaco", monospace;
+  font-family: var(--font-family-mono);
   font-size: 0.8125rem;
 }
-.help-code[data-v-5991e8aa] {
+.help-code[data-v-3a89a078] {
   display: block;
-  background: #282c34;
+  background: var(--color-code-bg);
   padding: 0.75rem 1rem;
   border-radius: 6px;
-  font-family: "Fira Code", "Monaco", monospace;
+  font-family: var(--font-family-mono);
   font-size: 0.8125rem;
   overflow-x: auto;
   margin: 0.5rem 0;
 }
-.help-code code[data-v-5991e8aa] {
-  color: #abb2bf;
+.help-code code[data-v-3a89a078] {
+  color: var(--color-code-text);
   white-space: pre;
 }
-.help-code-small[data-v-5991e8aa] {
+.help-code-small[data-v-3a89a078] {
   display: block;
-  background: #282c34;
+  background: var(--color-code-bg);
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
-  font-family: "Fira Code", "Monaco", monospace;
+  font-family: var(--font-family-mono);
   font-size: 0.75rem;
   overflow-x: auto;
   margin: 0;
 }
-.help-code-small code[data-v-5991e8aa] {
-  color: #abb2bf;
+.help-code-small code[data-v-3a89a078] {
+  color: var(--color-code-text);
   white-space: pre;
 }
-.help-note[data-v-5991e8aa] {
+.help-note[data-v-3a89a078] {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
@@ -366,43 +366,43 @@
   border-left: 3px solid var(--color-accent, #0891b2);
   margin-top: 0.75rem !important;
 }
-.help-note i[data-v-5991e8aa] {
+.help-note i[data-v-3a89a078] {
   color: var(--color-accent, #0891b2);
   flex-shrink: 0;
   margin-top: 0.125rem;
 }
-.help-note code[data-v-5991e8aa] {
-  background: rgba(255, 255, 255, 0.5);
+.help-note code[data-v-3a89a078] {
+  background: var(--color-white-alpha-40);
   padding: 0.125rem 0.375rem;
   border-radius: 3px;
-  font-family: "Fira Code", "Monaco", monospace;
+  font-family: var(--font-family-mono);
   font-size: 0.8125rem;
 }
-.pattern-grid[data-v-5991e8aa] {
+.pattern-grid[data-v-3a89a078] {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   margin-top: 0.75rem;
 }
-.pattern-item[data-v-5991e8aa] {
+.pattern-item[data-v-3a89a078] {
   background: var(--bg-secondary, #f8f9fa);
   padding: 0.75rem;
   border-radius: 6px;
   border: 1px solid var(--border-color, #e0e0e0);
 }
-.shortcuts-grid[data-v-5991e8aa] {
+.shortcuts-grid[data-v-3a89a078] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.shortcut[data-v-5991e8aa] {
+.shortcut[data-v-3a89a078] {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.875rem;
   color: var(--text-secondary, #6c757d);
 }
-.shortcut kbd[data-v-5991e8aa] {
+.shortcut kbd[data-v-3a89a078] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -414,17 +414,17 @@
   font-family: inherit;
   font-size: 0.75rem;
   font-weight: 500;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-xs);
 }
 
 /* Dark mode adjustments */
-[data-theme="dark"] .help-note[data-v-5991e8aa] {
-  background: rgba(8, 145, 178, 0.1);
+[data-theme="dark"] .help-note[data-v-3a89a078] {
+  background: var(--color-focus-ring-accent);
 }
-[data-theme="dark"] .help-note code[data-v-5991e8aa] {
-  background: rgba(0, 0, 0, 0.2);
+[data-theme="dark"] .help-note code[data-v-3a89a078] {
+  background: var(--color-black-alpha-20);
 }
-[data-theme="dark"] .help-list code[data-v-5991e8aa] {
+[data-theme="dark"] .help-list code[data-v-3a89a078] {
   background: var(--color-background-tertiary, #0f3460);
 }
 
@@ -489,42 +489,42 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-.code-preview[data-v-9323159f] {
-  background: #282c34;
-  border-radius: 4px;
+.code-preview[data-v-f74c8de3] {
+  background: var(--color-code-bg);
+  border-radius: var(--border-radius-sm);
   overflow-x: auto;
 }
-.code-preview pre[data-v-9323159f] {
+.code-preview pre[data-v-f74c8de3] {
   margin: 0;
   padding: 1rem;
 }
-.code-preview code[data-v-9323159f] {
-  font-family: "Fira Code", "Monaco", monospace;
+.code-preview code[data-v-f74c8de3] {
+  font-family: var(--font-family-mono);
   font-size: 0.8125rem;
-  color: #abb2bf;
+  color: var(--color-code-text);
   white-space: pre;
 }
 
-.modal-header-error[data-v-a56bfe3f] {
-  background: #fef2f2;
-  border-bottom-color: #fecaca;
+.modal-header-error[data-v-bf9df753] {
+  background: var(--color-danger-light);
+  border-bottom-color: var(--color-danger);
 }
-.modal-header-error .modal-title[data-v-a56bfe3f] {
-  color: #dc2626;
+.modal-header-error .modal-title[data-v-bf9df753] {
+  color: var(--color-danger-hover);
 }
-.modal-header-error .modal-title i[data-v-a56bfe3f] {
+.modal-header-error .modal-title i[data-v-bf9df753] {
   margin-right: 0.5rem;
 }
-.validation-intro[data-v-a56bfe3f] {
+.validation-intro[data-v-bf9df753] {
   margin: 0 0 1rem 0;
   color: var(--text-secondary);
 }
-.validation-errors-list[data-v-a56bfe3f] {
+.validation-errors-list[data-v-bf9df753] {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.validation-error-item[data-v-a56bfe3f] {
+.validation-error-item[data-v-bf9df753] {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
@@ -532,15 +532,15 @@
   border-bottom: 1px solid var(--border-color);
   color: var(--text-primary);
 }
-.validation-error-item[data-v-a56bfe3f]:last-child {
+.validation-error-item[data-v-bf9df753]:last-child {
   border-bottom: none;
 }
-.validation-error-item i[data-v-a56bfe3f] {
-  color: #dc2626;
+.validation-error-item i[data-v-bf9df753] {
+  color: var(--color-danger-hover);
   margin-top: 0.125rem;
 }
 
-.loading-indicator[data-v-ab27c047] {
+.loading-indicator[data-v-fca09e8f] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -548,32 +548,32 @@
   padding: 2rem;
   color: var(--text-secondary);
 }
-.loading-indicator i[data-v-ab27c047] {
+.loading-indicator i[data-v-fca09e8f] {
   font-size: 1.25rem;
 }
-.empty-nodes[data-v-ab27c047] {
+.empty-nodes[data-v-fca09e8f] {
   text-align: center;
   padding: 3rem;
   color: var(--text-secondary);
 }
-.empty-nodes i[data-v-ab27c047] {
+.empty-nodes i[data-v-fca09e8f] {
   font-size: 3rem;
   margin-bottom: 1rem;
   opacity: 0.5;
 }
-.empty-nodes p[data-v-ab27c047] {
+.empty-nodes p[data-v-fca09e8f] {
   margin: 0;
 }
-.empty-hint[data-v-ab27c047] {
+.empty-hint[data-v-fca09e8f] {
   font-size: 0.8125rem;
   margin-top: 0.5rem !important;
 }
-.nodes-grid[data-v-ab27c047] {
+.nodes-grid[data-v-fca09e8f] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1rem;
 }
-.node-card[data-v-ab27c047] {
+.node-card[data-v-fca09e8f] {
   background: var(--card-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
@@ -581,12 +581,12 @@
   transition: all 0.2s;
   overflow: hidden;
 }
-.node-card[data-v-ab27c047]:hover {
+.node-card[data-v-fca09e8f]:hover {
   border-color: var(--primary-color);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
-.node-card-header[data-v-ab27c047] {
+.node-card-header[data-v-fca09e8f] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -594,69 +594,69 @@
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border-color);
 }
-.node-card-header i[data-v-ab27c047] {
+.node-card-header i[data-v-fca09e8f] {
   color: var(--primary-color);
 }
-.node-name[data-v-ab27c047] {
+.node-name[data-v-fca09e8f] {
   font-weight: 600;
   font-size: 0.9375rem;
 }
-.node-card-body[data-v-ab27c047] {
+.node-card-body[data-v-fca09e8f] {
   padding: 0.75rem 1rem;
 }
-.node-category[data-v-ab27c047] {
+.node-category[data-v-fca09e8f] {
   display: inline-block;
   font-size: 0.6875rem;
   font-weight: 500;
   text-transform: uppercase;
   padding: 0.125rem 0.5rem;
   background: var(--primary-color);
-  color: white;
+  color: var(--color-text-inverse);
   border-radius: 3px;
   margin-bottom: 0.5rem;
 }
-.node-description[data-v-ab27c047] {
+.node-description[data-v-fca09e8f] {
   margin: 0;
   font-size: 0.8125rem;
   color: var(--text-secondary);
   line-height: 1.4;
 }
-.node-card-footer[data-v-ab27c047] {
+.node-card-footer[data-v-fca09e8f] {
   padding: 0.5rem 1rem;
   border-top: 1px solid var(--border-color);
   background: var(--bg-secondary);
 }
-.node-file[data-v-ab27c047] {
+.node-file[data-v-fca09e8f] {
   font-size: 0.75rem;
   color: var(--text-secondary);
-  font-family: "Fira Code", "Monaco", monospace;
+  font-family: var(--font-family-mono);
 }
-.node-code-view[data-v-ab27c047] {
+.node-code-view[data-v-fca09e8f] {
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid var(--border-color, #3a3a4a);
 }
-.modal-header-error[data-v-ab27c047] {
-  background: #fef2f2;
-  border-bottom-color: #fecaca;
+.modal-header-error[data-v-fca09e8f] {
+  background: var(--color-danger-light);
+  border-bottom-color: var(--color-danger);
 }
-.modal-header-error .modal-title[data-v-ab27c047] {
-  color: #dc2626;
+.modal-header-error .modal-title[data-v-fca09e8f] {
+  color: var(--color-danger-hover);
 }
-.modal-header-error .modal-title i[data-v-ab27c047] {
+.modal-header-error .modal-title i[data-v-fca09e8f] {
   margin-right: 0.5rem;
 }
-.delete-warning[data-v-ab27c047] {
-  color: #dc2626;
+.delete-warning[data-v-fca09e8f] {
+  color: var(--color-danger-hover);
   font-size: 0.875rem;
   margin-top: 0.5rem;
 }
-.btn-danger[data-v-ab27c047] {
-  background: #dc2626;
-  color: white;
+.btn-danger[data-v-fca09e8f] {
+  background: var(--color-danger-hover);
+  color: var(--color-text-inverse);
 }
-.btn-danger[data-v-ab27c047]:hover:not(:disabled) {
-  background: #b91c1c;
+.btn-danger[data-v-fca09e8f]:hover:not(:disabled) {
+  background: var(--color-danger-dark);
 }
 
 .modal-xl[data-v-865a257f] {
@@ -962,20 +962,20 @@
   background: rgba(16, 185, 129, 0.1);
 }
 
-.icon-selector[data-v-5e08bde1] {
+.icon-selector[data-v-638bee77] {
   position: relative;
 }
-.icon-label[data-v-5e08bde1] {
+.icon-label[data-v-638bee77] {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary, #6b7280);
   display: block;
   margin-bottom: 0.25rem;
 }
-.icon-selector-content[data-v-5e08bde1] {
+.icon-selector-content[data-v-638bee77] {
   position: relative;
 }
-.current-icon[data-v-5e08bde1] {
+.current-icon[data-v-638bee77] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -986,15 +986,15 @@
   cursor: pointer;
   transition: border-color 0.2s;
 }
-.current-icon[data-v-5e08bde1]:hover {
+.current-icon[data-v-638bee77]:hover {
   border-color: var(--primary-color, #4a6cf7);
 }
-.icon-preview[data-v-5e08bde1] {
+.icon-preview[data-v-638bee77] {
   width: 24px;
   height: 24px;
   object-fit: contain;
 }
-.icon-name[data-v-5e08bde1] {
+.icon-name[data-v-638bee77] {
   flex: 1;
   font-size: 0.875rem;
   color: var(--text-primary, #374151);
@@ -1002,11 +1002,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dropdown-arrow[data-v-5e08bde1] {
+.dropdown-arrow[data-v-638bee77] {
   font-size: 0.75rem;
   color: var(--text-secondary, #6b7280);
 }
-.icon-dropdown[data-v-5e08bde1] {
+.icon-dropdown[data-v-638bee77] {
   position: absolute;
   top: 100%;
   left: 0;
@@ -1015,16 +1015,16 @@
   background: var(--bg-primary, #ffffff);
   border: 1px solid var(--border-color, #d1d5db);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
   z-index: 1000;
   max-height: 300px;
   overflow-y: auto;
 }
-.upload-section[data-v-5e08bde1] {
+.upload-section[data-v-638bee77] {
   padding: 0.75rem;
   border-bottom: 1px solid var(--border-color, #e5e7eb);
 }
-.upload-btn[data-v-5e08bde1] {
+.upload-btn[data-v-638bee77] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1039,15 +1039,15 @@
   cursor: pointer;
   transition: all 0.2s;
 }
-.upload-btn[data-v-5e08bde1]:hover {
+.upload-btn[data-v-638bee77]:hover {
   background: var(--bg-tertiary, #e5e7eb);
   border-color: var(--primary-color, #4a6cf7);
   color: var(--primary-color, #4a6cf7);
 }
-.icons-section[data-v-5e08bde1] {
+.icons-section[data-v-638bee77] {
   padding: 0.5rem;
 }
-.section-title[data-v-5e08bde1] {
+.section-title[data-v-638bee77] {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--text-secondary, #6b7280);
@@ -1056,12 +1056,12 @@
   margin-bottom: 0.5rem;
   padding: 0 0.25rem;
 }
-.icons-grid[data-v-5e08bde1] {
+.icons-grid[data-v-638bee77] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   gap: 0.5rem;
 }
-.icon-option[data-v-5e08bde1] {
+.icon-option[data-v-638bee77] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1073,19 +1073,19 @@
   cursor: pointer;
   transition: all 0.2s;
 }
-.icon-option[data-v-5e08bde1]:hover {
+.icon-option[data-v-638bee77]:hover {
   background: var(--bg-secondary, #f3f4f6);
 }
-.icon-option.selected[data-v-5e08bde1] {
+.icon-option.selected[data-v-638bee77] {
   border-color: var(--primary-color, #4a6cf7);
-  background: rgba(74, 108, 247, 0.1);
+  background: var(--color-focus-ring-button);
 }
-.icon-img[data-v-5e08bde1] {
+.icon-img[data-v-638bee77] {
   width: 32px;
   height: 32px;
   object-fit: contain;
 }
-.icon-filename[data-v-5e08bde1] {
+.icon-filename[data-v-638bee77] {
   font-size: 0.625rem;
   color: var(--text-secondary, #6b7280);
   text-align: center;
@@ -1094,7 +1094,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-.delete-icon-btn[data-v-5e08bde1] {
+.delete-icon-btn[data-v-638bee77] {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -1103,8 +1103,8 @@
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: var(--danger-color, #ef4444);
-  color: white;
+  background: var(--color-danger);
+  color: var(--color-text-inverse);
   font-size: 0.625rem;
   cursor: pointer;
   opacity: 0;
@@ -1113,13 +1113,13 @@
   align-items: center;
   justify-content: center;
 }
-.icon-option:hover .delete-icon-btn[data-v-5e08bde1] {
+.icon-option:hover .delete-icon-btn[data-v-638bee77] {
   opacity: 1;
 }
-.delete-icon-btn[data-v-5e08bde1]:hover {
-  background: var(--danger-color-hover, #dc2626);
+.delete-icon-btn[data-v-638bee77]:hover {
+  background: var(--color-danger-hover);
 }
-.backdrop[data-v-5e08bde1] {
+.backdrop[data-v-638bee77] {
   position: fixed;
   top: 0;
   left: 0;
@@ -1133,7 +1133,7 @@
  */
 
 /* Panel styles - specific to Node Designer */
-.panel[data-v-1c613876] {
+.panel[data-v-3db2802e] {
   background: var(--card-bg);
   border: 1px solid var(--color-border-primary);
   border-radius: var(--border-radius-lg);
@@ -1142,13 +1142,13 @@
   overflow: hidden;
   min-height: 0;
 }
-.panel-header[data-v-1c613876] {
+.panel-header[data-v-3db2802e] {
   padding: var(--spacing-3) var(--spacing-4);
   border-bottom: 1px solid var(--color-border-primary);
   flex-shrink: 0;
   background-color: var(--color-background-secondary);
 }
-.panel-header h3[data-v-1c613876] {
+.panel-header h3[data-v-3db2802e] {
   margin: 0;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
@@ -1156,7 +1156,7 @@
   letter-spacing: 0.05em;
   color: var(--color-text-secondary);
 }
-.panel-content[data-v-1c613876] {
+.panel-content[data-v-3db2802e] {
   padding: var(--spacing-4);
   overflow-y: auto;
   flex: 1;
@@ -1165,24 +1165,24 @@
 }
 
 /* Node Designer specific layout */
-.node-designer-container[data-v-1c613876] {
+.node-designer-container[data-v-3db2802e] {
   display: flex;
   height: 100%;
   background-color: var(--color-background-secondary);
 }
-.node-designer-sidebar[data-v-1c613876] {
+.node-designer-sidebar[data-v-3db2802e] {
   width: 280px;
   flex-shrink: 0;
   border-right: 1px solid var(--color-border-primary);
   background-color: var(--color-background-primary);
   overflow-y: auto;
 }
-.node-designer-canvas[data-v-1c613876] {
+.node-designer-canvas[data-v-3db2802e] {
   flex: 1;
   min-width: 0;
   position: relative;
 }
-.node-designer-properties[data-v-1c613876] {
+.node-designer-properties[data-v-3db2802e] {
   width: 320px;
   flex-shrink: 0;
   border-left: 1px solid var(--color-border-primary);
@@ -1192,12 +1192,12 @@
 
 /* Component list styles
    Note: .component-list is currently unused, .component-item is used. */
-.component-list[data-v-1c613876] {
+.component-list[data-v-3db2802e] {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.component-item[data-v-1c613876] {
+.component-item[data-v-3db2802e] {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
@@ -1208,13 +1208,13 @@
   color: var(--color-text-primary);
   transition: background-color var(--transition-fast);
 }
-.component-item[data-v-1c613876]:hover {
+.component-item[data-v-3db2802e]:hover {
   background-color: var(--color-background-hover);
 }
-.component-item[data-v-1c613876]:last-child {
+.component-item[data-v-3db2802e]:last-child {
   border-bottom: none;
 }
-.component-icon[data-v-1c613876] {
+.component-icon[data-v-3db2802e] {
   width: 24px;
   height: 24px;
   display: flex;
@@ -1224,10 +1224,10 @@
 }
 
 /* Property editor styles */
-.property-group[data-v-1c613876] {
+.property-group[data-v-3db2802e] {
   margin-bottom: var(--spacing-4);
 }
-.property-group-title[data-v-1c613876] {
+.property-group-title[data-v-3db2802e] {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-secondary);
@@ -1237,18 +1237,18 @@
   padding-bottom: var(--spacing-1);
   border-bottom: 1px solid var(--color-border-light);
 }
-.property-row[data-v-1c613876] {
+.property-row[data-v-3db2802e] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
   margin-bottom: var(--spacing-3);
 }
-.property-label[data-v-1c613876] {
+.property-label[data-v-3db2802e] {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
 }
-.property-input[data-v-1c613876] {
+.property-input[data-v-3db2802e] {
   width: 100%;
   padding: var(--spacing-2);
   font-size: var(--font-size-sm);
@@ -1258,13 +1258,13 @@
   color: var(--color-text-primary);
   transition: border-color var(--transition-fast);
 }
-.property-input[data-v-1c613876]:focus {
+.property-input[data-v-3db2802e]:focus {
   outline: none;
   border-color: var(--input-border-focus);
 }
 
 /* Validation message styles */
-.validation-message[data-v-1c613876] {
+.validation-message[data-v-3db2802e] {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-2);
@@ -1273,22 +1273,22 @@
   font-size: var(--font-size-sm);
   margin-bottom: var(--spacing-2);
 }
-.validation-message.is-error[data-v-1c613876] {
+.validation-message.is-error[data-v-3db2802e] {
   background-color: var(--color-danger-light);
   color: var(--color-danger);
   border: 1px solid var(--color-danger);
 }
-.validation-message.is-warning[data-v-1c613876] {
+.validation-message.is-warning[data-v-3db2802e] {
   background-color: var(--color-warning-light);
   color: var(--color-warning);
   border: 1px solid var(--color-warning);
 }
-.validation-message.is-success[data-v-1c613876] {
+.validation-message.is-success[data-v-3db2802e] {
   background-color: var(--color-success-light);
   color: var(--color-success);
   border: 1px solid var(--color-success);
 }
-.node-designer-container[data-v-1c613876] {
+.node-designer-container[data-v-3db2802e] {
   padding: 1rem;
   height: 100vh;
   max-height: 100vh;
@@ -1297,32 +1297,32 @@
   overflow: hidden;
   box-sizing: border-box;
 }
-.page-header[data-v-1c613876] {
+.page-header[data-v-3db2802e] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   flex-shrink: 0;
 }
-.header-left[data-v-1c613876] {
+.header-left[data-v-3db2802e] {
   display: flex;
   flex-direction: column;
 }
-.page-title[data-v-1c613876] {
+.page-title[data-v-3db2802e] {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
 }
-.page-description[data-v-1c613876] {
+.page-description[data-v-3db2802e] {
   margin: 0.25rem 0 0 0;
   color: var(--text-secondary);
   font-size: 0.875rem;
 }
-.header-actions[data-v-1c613876] {
+.header-actions[data-v-3db2802e] {
   display: flex;
   gap: 0.5rem;
 }
-.designer-layout[data-v-1c613876] {
+.designer-layout[data-v-3db2802e] {
   display: grid;
   grid-template-columns: 200px 1fr 280px;
   gap: 1rem;
@@ -1333,33 +1333,33 @@
 }
 
 /* Design Canvas */
-.design-canvas .panel-content[data-v-1c613876] {
+.design-canvas .panel-content[data-v-3db2802e] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   padding-bottom: 3rem;
 }
-.metadata-section h4[data-v-1c613876] {
+.metadata-section h4[data-v-3db2802e] {
   margin: 0 0 0.75rem 0;
   font-size: 0.9375rem;
   font-weight: 600;
 }
-.form-grid[data-v-1c613876] {
+.form-grid[data-v-3db2802e] {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
 }
-.form-field[data-v-1c613876] {
+.form-field[data-v-3db2802e] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
-.form-field label[data-v-1c613876] {
+.form-field label[data-v-3db2802e] {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary);
 }
-.form-input[data-v-1c613876] {
+.form-input[data-v-3db2802e] {
   padding: 0.5rem;
   border: 1px solid var(--border-color);
   border-radius: 4px;
@@ -1367,22 +1367,22 @@
   color: var(--text-primary);
   font-size: 0.875rem;
 }
-.form-input[data-v-1c613876]:focus {
+.form-input[data-v-3db2802e]:focus {
   outline: none;
   border-color: var(--primary-color);
 }
-.icon-field[data-v-1c613876] {
+.icon-field[data-v-3db2802e] {
   grid-column: span 2;
 }
 
 /* Sections */
-.sections-area[data-v-1c613876] {
+.sections-area[data-v-3db2802e] {
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 8px;
   padding: 1rem;
   background: var(--bg-secondary, #f8f9fa);
 }
-.sections-header[data-v-1c613876] {
+.sections-header[data-v-3db2802e] {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1390,40 +1390,40 @@
   padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--border-color, #e0e0e0);
 }
-.sections-header h4[data-v-1c613876] {
+.sections-header h4[data-v-3db2802e] {
   margin: 0;
   font-size: 0.9375rem;
   font-weight: 600;
 }
-.add-section-btn[data-v-1c613876] {
+.add-section-btn[data-v-3db2802e] {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   padding: 0.5rem 1rem;
-  background: #4a6cf7;
-  color: white;
+  background: var(--color-button-primary);
+  color: var(--color-text-inverse);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--border-radius-sm);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background var(--transition-fast);
 }
-.add-section-btn[data-v-1c613876]:hover {
-  background: #3d5bd9;
+.add-section-btn[data-v-3db2802e]:hover {
+  background: var(--color-button-primary-hover);
 }
-.add-section-btn i[data-v-1c613876] {
+.add-section-btn i[data-v-3db2802e] {
   font-size: 0.75rem;
 }
-.empty-sections[data-v-1c613876] {
+.empty-sections[data-v-3db2802e] {
   text-align: center;
   padding: 2rem;
   color: var(--text-secondary);
 }
-.empty-sections i[data-v-1c613876] {
+.empty-sections i[data-v-3db2802e] {
   font-size: 2rem;
   margin-bottom: 0.5rem;
 }
-.empty-sections p[data-v-1c613876] {
+.empty-sections p[data-v-3db2802e] {
   margin: 0;
 }