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

flowfile/web/static/assets/NodeDesigner-5f53be3f.css

@@ -0,0 +1,1429 @@
+
+.component-palette .panel-content[data-v-7eeb4ea6] {
+  padding: 0.5rem;
+}
+.component-item[data-v-7eeb4ea6] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.25rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: grab;
+  transition: all 0.2s;
+}
+.component-item[data-v-7eeb4ea6]:hover {
+  background: var(--bg-hover);
+  border-color: var(--primary-color);
+}
+.component-item i[data-v-7eeb4ea6] {
+  width: 20px;
+  text-align: center;
+  color: var(--primary-color);
+}
+.component-item span[data-v-7eeb4ea6] {
+  font-size: 0.8125rem;
+}
+
+.section-card[data-v-17318956] {
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  margin-bottom: 0.75rem;
+  background: var(--bg-secondary);
+}
+.section-card.selected[data-v-17318956] {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+}
+.section-header[data-v-17318956] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  gap: 0.5rem;
+}
+.section-fields[data-v-17318956] {
+  display: flex;
+  gap: 0.75rem;
+  flex: 1;
+}
+.section-field[data-v-17318956] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+.section-field label[data-v-17318956] {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+.section-name-input[data-v-17318956],
+.section-title-input[data-v-17318956] {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--input-bg, #fff);
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  width: 100%;
+}
+.section-name-input[data-v-17318956] {
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.75rem;
+}
+.section-title-input[data-v-17318956] {
+  font-weight: 500;
+}
+.section-name-input[data-v-17318956]:focus,
+.section-title-input[data-v-17318956]:focus {
+  outline: none;
+  border-color: var(--primary-color, #4a6cf7);
+  box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.1);
+}
+.btn-icon[data-v-17318956] {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+}
+.btn-icon[data-v-17318956]:hover {
+  background: var(--bg-hover);
+  color: var(--danger-color);
+}
+.section-components[data-v-17318956] {
+  padding: 0.5rem;
+  min-height: 60px;
+}
+.component-card[data-v-17318956] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.25rem;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.component-card[data-v-17318956]:hover {
+  border-color: var(--primary-color);
+}
+.component-card.selected[data-v-17318956] {
+  border-color: var(--primary-color);
+  background: rgba(var(--primary-rgb), 0.05);
+}
+.component-preview[data-v-17318956] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.component-preview i[data-v-17318956] {
+  color: var(--primary-color);
+}
+.component-label[data-v-17318956] {
+  font-weight: 500;
+}
+.component-type[data-v-17318956] {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+.btn-remove[data-v-17318956] {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.component-card:hover .btn-remove[data-v-17318956] {
+  opacity: 1;
+}
+.drop-zone[data-v-17318956] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  border: 2px dashed var(--border-color);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+.drop-zone i[data-v-17318956] {
+  margin-bottom: 0.25rem;
+}
+
+.property-form[data-v-7ea3df75] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+.component-type-badge[data-v-7ea3df75] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-background-secondary, #f3f4f6);
+  border-radius: var(--border-radius-md, 6px);
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-primary, #374151);
+}
+.component-type-badge i[data-v-7ea3df75] {
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+}
+.property-group[data-v-7ea3df75] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.property-editor[data-v-7ea3df75] {
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  padding: 1rem;
+  background: var(--bg-secondary, #f8f9fa);
+}
+.property-group-title[data-v-7ea3df75] {
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-bottom: var(--spacing-2, 0.5rem);
+  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
+}
+.property-row[data-v-7ea3df75] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 0.25rem);
+}
+.property-row.checkbox-row[data-v-7ea3df75] {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.property-label[data-v-7ea3df75] {
+  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] {
+  color: var(--color-danger, #ef4444);
+}
+.property-input[data-v-7ea3df75] {
+  width: 100%;
+  padding: var(--spacing-2, 0.5rem);
+  font-size: var(--font-size-sm, 0.875rem);
+  border: 1px solid var(--color-border-primary, #d1d5db);
+  border-radius: var(--border-radius-md, 6px);
+  background-color: var(--color-background-primary, #ffffff);
+  color: var(--color-text-primary, #374151);
+  transition: border-color var(--transition-fast, 0.15s);
+}
+.property-input[data-v-7ea3df75]:focus {
+  outline: none;
+  border-color: var(--input-border-focus, #4a6cf7);
+}
+.property-checkbox[data-v-7ea3df75] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--primary-color, #4a6cf7);
+}
+.no-selection[data-v-7ea3df75] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--color-text-secondary, #6b7280);
+  text-align: center;
+}
+.no-selection i[data-v-7ea3df75] {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.5;
+}
+.no-selection p[data-v-7ea3df75] {
+  margin: 0;
+  font-size: var(--font-size-sm, 0.875rem);
+}
+.field-hint[data-v-7ea3df75] {
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-text-secondary, #6b7280);
+  margin-top: 0.25rem;
+}
+.action-section[data-v-7ea3df75] {
+  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] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background: var(--primary-color, #4a6cf7);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius-md, 6px);
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: var(--font-weight-medium, 500);
+  cursor: pointer;
+  transition: background var(--transition-fast, 0.15s);
+}
+.action-btn[data-v-7ea3df75]:hover {
+  background: var(--primary-color-hover, #3d5bd9);
+}
+.action-btn i[data-v-7ea3df75] {
+  font-size: 0.875rem;
+}
+
+.help-section[data-v-5991e8aa] {
+  margin-bottom: 1.5rem;
+}
+.help-section[data-v-5991e8aa]:last-child {
+  margin-bottom: 0;
+}
+.help-section h4[data-v-5991e8aa] {
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.help-section h5[data-v-5991e8aa] {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.help-section p[data-v-5991e8aa] {
+  margin: 0 0 0.75rem 0;
+  color: var(--text-secondary, #6c757d);
+  line-height: 1.6;
+  font-size: 0.875rem;
+}
+.help-list[data-v-5991e8aa] {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+}
+.help-list li[data-v-5991e8aa] {
+  margin-bottom: 0.375rem;
+  line-height: 1.5;
+}
+.help-list code[data-v-5991e8aa] {
+  background: var(--bg-secondary, #f8f9fa);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+}
+.help-code[data-v-5991e8aa] {
+  display: block;
+  background: #282c34;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+.help-code code[data-v-5991e8aa] {
+  color: #abb2bf;
+  white-space: pre;
+}
+.help-code-small[data-v-5991e8aa] {
+  display: block;
+  background: #282c34;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.75rem;
+  overflow-x: auto;
+  margin: 0;
+}
+.help-code-small code[data-v-5991e8aa] {
+  color: #abb2bf;
+  white-space: pre;
+}
+.help-note[data-v-5991e8aa] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--color-accent-subtle, #ecfeff);
+  border-radius: 6px;
+  border-left: 3px solid var(--color-accent, #0891b2);
+  margin-top: 0.75rem !important;
+}
+.help-note i[data-v-5991e8aa] {
+  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);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+}
+.pattern-grid[data-v-5991e8aa] {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-top: 0.75rem;
+}
+.pattern-item[data-v-5991e8aa] {
+  background: var(--bg-secondary, #f8f9fa);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
+.shortcuts-grid[data-v-5991e8aa] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.shortcut[data-v-5991e8aa] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6c757d);
+}
+.shortcut kbd[data-v-5991e8aa] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .help-note[data-v-5991e8aa] {
+  background: rgba(8, 145, 178, 0.1);
+}
+[data-theme="dark"] .help-note code[data-v-5991e8aa] {
+  background: rgba(0, 0, 0, 0.2);
+}
+[data-theme="dark"] .help-list code[data-v-5991e8aa] {
+  background: var(--color-background-tertiary, #0f3460);
+}
+
+.code-editor-section[data-v-7bd9927f] {
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  padding: 1.25rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+}
+.code-editor-header[data-v-7bd9927f] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+.code-editor-header h4[data-v-7bd9927f] {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.help-btn[data-v-7bd9927f] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--color-accent, #0891b2);
+  border: none;
+  border-radius: 4px;
+  color: white;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.help-btn[data-v-7bd9927f]:hover {
+  background: var(--color-accent-hover, #0e7490);
+}
+.help-btn i[data-v-7bd9927f] {
+  font-size: 0.875rem;
+}
+.code-hint[data-v-7bd9927f] {
+  margin: 0 0 1rem 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #6c757d);
+  line-height: 1.5;
+}
+.code-hint code[data-v-7bd9927f] {
+  background: var(--card-bg, #ffffff);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  font-family: "Fira Code", "Monaco", monospace;
+}
+.code-editor-wrapper[data-v-7bd9927f] {
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.code-preview[data-v-9323159f] {
+  background: #282c34;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.code-preview pre[data-v-9323159f] {
+  margin: 0;
+  padding: 1rem;
+}
+.code-preview code[data-v-9323159f] {
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+  color: #abb2bf;
+  white-space: pre;
+}
+
+.modal-header-error[data-v-a56bfe3f] {
+  background: #fef2f2;
+  border-bottom-color: #fecaca;
+}
+.modal-header-error .modal-title[data-v-a56bfe3f] {
+  color: #dc2626;
+}
+.modal-header-error .modal-title i[data-v-a56bfe3f] {
+  margin-right: 0.5rem;
+}
+.validation-intro[data-v-a56bfe3f] {
+  margin: 0 0 1rem 0;
+  color: var(--text-secondary);
+}
+.validation-errors-list[data-v-a56bfe3f] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.validation-error-item[data-v-a56bfe3f] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+.validation-error-item[data-v-a56bfe3f]:last-child {
+  border-bottom: none;
+}
+.validation-error-item i[data-v-a56bfe3f] {
+  color: #dc2626;
+  margin-top: 0.125rem;
+}
+
+.loading-indicator[data-v-ab27c047] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: var(--text-secondary);
+}
+.loading-indicator i[data-v-ab27c047] {
+  font-size: 1.25rem;
+}
+.empty-nodes[data-v-ab27c047] {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+.empty-nodes i[data-v-ab27c047] {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+.empty-nodes p[data-v-ab27c047] {
+  margin: 0;
+}
+.empty-hint[data-v-ab27c047] {
+  font-size: 0.8125rem;
+  margin-top: 0.5rem !important;
+}
+.nodes-grid[data-v-ab27c047] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+}
+.node-card[data-v-ab27c047] {
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  overflow: hidden;
+}
+.node-card[data-v-ab27c047]:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+.node-card-header[data-v-ab27c047] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+.node-card-header i[data-v-ab27c047] {
+  color: var(--primary-color);
+}
+.node-name[data-v-ab27c047] {
+  font-weight: 600;
+  font-size: 0.9375rem;
+}
+.node-card-body[data-v-ab27c047] {
+  padding: 0.75rem 1rem;
+}
+.node-category[data-v-ab27c047] {
+  display: inline-block;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 0.125rem 0.5rem;
+  background: var(--primary-color);
+  color: white;
+  border-radius: 3px;
+  margin-bottom: 0.5rem;
+}
+.node-description[data-v-ab27c047] {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+.node-card-footer[data-v-ab27c047] {
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+.node-file[data-v-ab27c047] {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-family: "Fira Code", "Monaco", monospace;
+}
+.node-code-view[data-v-ab27c047] {
+  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 .modal-title[data-v-ab27c047] {
+  color: #dc2626;
+}
+.modal-header-error .modal-title i[data-v-ab27c047] {
+  margin-right: 0.5rem;
+}
+.delete-warning[data-v-ab27c047] {
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+.btn-danger[data-v-ab27c047] {
+  background: #dc2626;
+  color: white;
+}
+.btn-danger[data-v-ab27c047]:hover:not(:disabled) {
+  background: #b91c1c;
+}
+
+.modal-xl[data-v-865a257f] {
+  max-width: 900px;
+}
+
+/* Tabs */
+.help-tabs[data-v-865a257f] {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0;
+}
+.help-tab[data-v-865a257f] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-bottom: -1px;
+}
+.help-tab[data-v-865a257f]:hover {
+  color: var(--text-primary, #1a1a2e);
+  background: var(--bg-secondary, #f8f9fa);
+}
+.help-tab.active[data-v-865a257f] {
+  color: var(--color-accent, #0891b2);
+  border-bottom-color: var(--color-accent, #0891b2);
+}
+.help-tab i[data-v-865a257f] {
+  font-size: 0.875rem;
+}
+
+/* Tab content */
+.tab-panel h4[data-v-865a257f] {
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.tab-panel h4[data-v-865a257f]:not(:first-child) {
+  margin-top: 1.5rem;
+}
+.tab-panel p[data-v-865a257f] {
+  margin: 0 0 1rem 0;
+  color: var(--text-secondary, #6c757d);
+  line-height: 1.6;
+  font-size: 0.875rem;
+}
+
+/* Feature grid */
+.feature-grid[data-v-865a257f] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.feature-card[data-v-865a257f] {
+  padding: 1rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  text-align: center;
+}
+.feature-icon[data-v-865a257f] {
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-accent-subtle, #ecfeff);
+  border-radius: 50%;
+  color: var(--color-accent, #0891b2);
+  font-size: 1.25rem;
+}
+.feature-card h5[data-v-865a257f] {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.feature-card p[data-v-865a257f] {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #6c757d);
+}
+
+/* Steps list */
+.steps-list[data-v-865a257f] {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+}
+.steps-list li[data-v-865a257f] {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+.steps-list strong[data-v-865a257f] {
+  color: var(--text-primary, #1a1a2e);
+}
+
+/* Layout diagram */
+.layout-diagram[data-v-865a257f] {
+  display: grid;
+  grid-template-columns: 150px 1fr 200px;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.layout-box[data-v-865a257f] {
+  padding: 1rem;
+  border: 2px dashed var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  text-align: center;
+}
+.layout-box.palette[data-v-865a257f] {
+  background: rgba(99, 102, 241, 0.05);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+.layout-box.canvas[data-v-865a257f] {
+  background: rgba(8, 145, 178, 0.05);
+  border-color: rgba(8, 145, 178, 0.3);
+}
+.layout-box.properties[data-v-865a257f] {
+  background: rgba(16, 185, 129, 0.05);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+.layout-label[data-v-865a257f] {
+  display: block;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary, #1a1a2e);
+}
+.layout-box p[data-v-865a257f] {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+/* Help list */
+.help-list[data-v-865a257f] {
+  margin: 0 0 1rem 0;
+  padding-left: 1.5rem;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+}
+.help-list li[data-v-865a257f] {
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+.help-list strong[data-v-865a257f] {
+  color: var(--text-primary, #1a1a2e);
+}
+
+/* Component list */
+.component-list[data-v-865a257f] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.component-item[data-v-865a257f] {
+  display: flex;
+  gap: 1rem;
+  padding: 0.75rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+}
+.component-icon[data-v-865a257f] {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  color: var(--color-accent, #0891b2);
+  flex-shrink: 0;
+}
+.component-info[data-v-865a257f] {
+  flex: 1;
+  min-width: 0;
+}
+.component-info h5[data-v-865a257f] {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.component-info p[data-v-865a257f] {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.8125rem;
+}
+.component-info code[data-v-865a257f] {
+  font-size: 0.75rem;
+  color: var(--color-accent, #0891b2);
+  font-family: "Fira Code", "Monaco", monospace;
+}
+
+/* Code blocks */
+.help-code[data-v-865a257f] {
+  display: block;
+  background: #282c34;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  margin: 0.5rem 0 1rem 0;
+}
+.help-code code[data-v-865a257f] {
+  color: #abb2bf;
+  white-space: pre;
+}
+
+/* Shortcuts grid */
+.shortcuts-grid[data-v-865a257f] {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+.shortcut[data-v-865a257f] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #6c757d);
+  padding: 0.5rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border-radius: 4px;
+}
+.shortcut kbd[data-v-865a257f] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding: 0.125rem 0.375rem;
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Tip cards */
+.tip-card[data-v-865a257f] {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border-radius: 6px;
+  margin-bottom: 0.75rem;
+}
+.tip-icon[data-v-865a257f] {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+}
+.tip-icon.success[data-v-865a257f] {
+  background: var(--color-success-light, #d1fae5);
+  color: var(--color-success, #10b981);
+}
+.tip-icon.warning[data-v-865a257f] {
+  background: var(--color-warning-light, #fef3c7);
+  color: var(--color-warning, #f59e0b);
+}
+.tip-content h5[data-v-865a257f] {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+.tip-content p[data-v-865a257f] {
+  margin: 0;
+  font-size: 0.8125rem;
+}
+
+/* Dark mode */
+[data-theme="dark"] .layout-box.palette[data-v-865a257f] {
+  background: rgba(99, 102, 241, 0.1);
+}
+[data-theme="dark"] .layout-box.canvas[data-v-865a257f] {
+  background: rgba(8, 145, 178, 0.1);
+}
+[data-theme="dark"] .layout-box.properties[data-v-865a257f] {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.icon-selector[data-v-5e08bde1] {
+  position: relative;
+}
+.icon-label[data-v-5e08bde1] {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary, #6b7280);
+  display: block;
+  margin-bottom: 0.25rem;
+}
+.icon-selector-content[data-v-5e08bde1] {
+  position: relative;
+}
+.current-icon[data-v-5e08bde1] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color, #d1d5db);
+  border-radius: 4px;
+  background: var(--input-bg, #ffffff);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+.current-icon[data-v-5e08bde1]:hover {
+  border-color: var(--primary-color, #4a6cf7);
+}
+.icon-preview[data-v-5e08bde1] {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+.icon-name[data-v-5e08bde1] {
+  flex: 1;
+  font-size: 0.875rem;
+  color: var(--text-primary, #374151);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dropdown-arrow[data-v-5e08bde1] {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #6b7280);
+}
+.icon-dropdown[data-v-5e08bde1] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 0.25rem;
+  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);
+  z-index: 1000;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.upload-section[data-v-5e08bde1] {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+.upload-btn[data-v-5e08bde1] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  background: var(--bg-secondary, #f3f4f6);
+  border: 1px dashed var(--border-color, #d1d5db);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.upload-btn[data-v-5e08bde1]:hover {
+  background: var(--bg-tertiary, #e5e7eb);
+  border-color: var(--primary-color, #4a6cf7);
+  color: var(--primary-color, #4a6cf7);
+}
+.icons-section[data-v-5e08bde1] {
+  padding: 0.5rem;
+}
+.section-title[data-v-5e08bde1] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+  padding: 0 0.25rem;
+}
+.icons-grid[data-v-5e08bde1] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 0.5rem;
+}
+.icon-option[data-v-5e08bde1] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.icon-option[data-v-5e08bde1]:hover {
+  background: var(--bg-secondary, #f3f4f6);
+}
+.icon-option.selected[data-v-5e08bde1] {
+  border-color: var(--primary-color, #4a6cf7);
+  background: rgba(74, 108, 247, 0.1);
+}
+.icon-img[data-v-5e08bde1] {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+.icon-filename[data-v-5e08bde1] {
+  font-size: 0.625rem;
+  color: var(--text-secondary, #6b7280);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.delete-icon-btn[data-v-5e08bde1] {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--danger-color, #ef4444);
+  color: white;
+  font-size: 0.625rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-option:hover .delete-icon-btn[data-v-5e08bde1] {
+  opacity: 1;
+}
+.delete-icon-btn[data-v-5e08bde1]:hover {
+  background: var(--danger-color-hover, #dc2626);
+}
+.backdrop[data-v-5e08bde1] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+/**
+ * Node Designer specific styles
+ * Uses design tokens from the main styling system
+ */
+
+/* Panel styles - specific to Node Designer */
+.panel[data-v-1c613876] {
+  background: var(--card-bg);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+.panel-header[data-v-1c613876] {
+  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] {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+}
+.panel-content[data-v-1c613876] {
+  padding: var(--spacing-4);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  height: 0;
+}
+
+/* Node Designer specific layout */
+.node-designer-container[data-v-1c613876] {
+  display: flex;
+  height: 100%;
+  background-color: var(--color-background-secondary);
+}
+.node-designer-sidebar[data-v-1c613876] {
+  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] {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+}
+.node-designer-properties[data-v-1c613876] {
+  width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border-primary);
+  background-color: var(--color-background-primary);
+  overflow-y: auto;
+}
+
+/* Component list styles
+   Note: .component-list is currently unused, .component-item is used. */
+.component-list[data-v-1c613876] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.component-item[data-v-1c613876] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-border-light);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-fast);
+}
+.component-item[data-v-1c613876]:hover {
+  background-color: var(--color-background-hover);
+}
+.component-item[data-v-1c613876]:last-child {
+  border-bottom: none;
+}
+.component-icon[data-v-1c613876] {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+}
+
+/* Property editor styles */
+.property-group[data-v-1c613876] {
+  margin-bottom: var(--spacing-4);
+}
+.property-group-title[data-v-1c613876] {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--spacing-2);
+  padding-bottom: var(--spacing-1);
+  border-bottom: 1px solid var(--color-border-light);
+}
+.property-row[data-v-1c613876] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin-bottom: var(--spacing-3);
+}
+.property-label[data-v-1c613876] {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+.property-input[data-v-1c613876] {
+  width: 100%;
+  padding: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
+  transition: border-color var(--transition-fast);
+}
+.property-input[data-v-1c613876]:focus {
+  outline: none;
+  border-color: var(--input-border-focus);
+}
+
+/* Validation message styles */
+.validation-message[data-v-1c613876] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--spacing-2);
+}
+.validation-message.is-error[data-v-1c613876] {
+  background-color: var(--color-danger-light);
+  color: var(--color-danger);
+  border: 1px solid var(--color-danger);
+}
+.validation-message.is-warning[data-v-1c613876] {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning);
+  border: 1px solid var(--color-warning);
+}
+.validation-message.is-success[data-v-1c613876] {
+  background-color: var(--color-success-light);
+  color: var(--color-success);
+  border: 1px solid var(--color-success);
+}
+.node-designer-container[data-v-1c613876] {
+  padding: 1rem;
+  height: 100vh;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.page-header[data-v-1c613876] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-shrink: 0;
+}
+.header-left[data-v-1c613876] {
+  display: flex;
+  flex-direction: column;
+}
+.page-title[data-v-1c613876] {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.page-description[data-v-1c613876] {
+  margin: 0.25rem 0 0 0;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+.header-actions[data-v-1c613876] {
+  display: flex;
+  gap: 0.5rem;
+}
+.designer-layout[data-v-1c613876] {
+  display: grid;
+  grid-template-columns: 200px 1fr 280px;
+  gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+/* Design Canvas */
+.design-canvas .panel-content[data-v-1c613876] {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding-bottom: 3rem;
+}
+.metadata-section h4[data-v-1c613876] {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.form-grid[data-v-1c613876] {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+.form-field[data-v-1c613876] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.form-field label[data-v-1c613876] {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.form-input[data-v-1c613876] {
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--input-bg);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+.form-input[data-v-1c613876]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+}
+.icon-field[data-v-1c613876] {
+  grid-column: span 2;
+}
+
+/* Sections */
+.sections-area[data-v-1c613876] {
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  padding: 1rem;
+  background: var(--bg-secondary, #f8f9fa);
+}
+.sections-header[data-v-1c613876] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+.sections-header h4[data-v-1c613876] {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.add-section-btn[data-v-1c613876] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  background: #4a6cf7;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.add-section-btn[data-v-1c613876]:hover {
+  background: #3d5bd9;
+}
+.add-section-btn i[data-v-1c613876] {
+  font-size: 0.75rem;
+}
+.empty-sections[data-v-1c613876] {
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-secondary);
+}
+.empty-sections i[data-v-1c613876] {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+.empty-sections p[data-v-1c613876] {
+  margin: 0;
+}