@goplasmatic/datalogic-ui 4.0.20 → 5.0.0

package/dist/styles.css

@@ -6,42 +6,43 @@
  */
 
 .logic-editor {
-  /* Light theme (default) */
-  --bg-primary: #f5f5f5;
+  /* Light theme (default) — zinc-leaning neutrals */
+  --bg-primary: #fafafa;
   --bg-secondary: #ffffff;
-  --bg-tertiary: #fafafa;
-  --bg-hover: #f0f0f0;
-  --bg-active: #e8e8e8;
+  --bg-tertiary: #f6f6f7;
+  --bg-hover: #f0f0f1;
+  --bg-active: #e8e8ea;
 
-  --text-primary: #333333;
-  --text-secondary: #555555;
-  --text-tertiary: #666666;
-  --text-muted: #999999;
-  --text-placeholder: #aaaaaa;
+  --text-primary: #18181b;
+  --text-secondary: #3f3f46;
+  --text-tertiary: #71717a;
+  --text-muted: #a1a1aa;
+  --text-placeholder: #c4c4c7;
 
-  --border-primary: #e0e0e0;
-  --border-secondary: #dddddd;
-  --border-light: #eeeeee;
+  --border-primary: rgba(0, 0, 0, 0.10);
+  --border-secondary: rgba(0, 0, 0, 0.06);
+  --border-light: rgba(0, 0, 0, 0.04);
 
-  --accent-blue: #3b82f6;
-  --accent-blue-light: #dbeafe;
+  --accent-blue: #6366f1;
+  --accent-blue-light: #e0e7ff;
+  --accent-blue-hover: #4f46e5;
 
   --accent-amber: #f59e0b;
   --accent-amber-light: #fef3c7;
 
   /* Status colors */
-  --success-bg: #d1fae5;
-  --success-text: #059669;
+  --success-bg: #ecfdf5;
+  --success-text: #047857;
   --success-border: #a7f3d0;
 
-  --error-bg: #fee2e2;
-  --error-bg-light: #fef2f2;
-  --error-bg-lighter: #fff5f5;
+  --error-bg: #fef2f2;
+  --error-bg-light: #fff7f7;
+  --error-bg-lighter: #fffafa;
   --error-text: #dc2626;
   --error-border: #fecaca;
 
-  --warning-bg: #fef3c7;
-  --warning-text: #d97706;
+  --warning-bg: #fffbeb;
+  --warning-text: #b45309;
   --warning-border: #fde68a;
 
   /* Syntax highlighting */
@@ -53,10 +54,10 @@
   --syntax-bracket: #24292f;
   --syntax-punctuation: #24292f;
 
-  /* Node colors - these stay consistent */
+  /* Node colors */
   --node-bg: #ffffff;
-  --node-shadow: rgba(0, 0, 0, 0.1);
-  --node-shadow-hover: rgba(0, 0, 0, 0.15);
+  --node-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
 
   /* Code background */
   --code-bg: #f8f9fa;
@@ -79,7 +80,26 @@
   --debug-value-array: #7c3aed;
   --debug-value-null: #6b7280;
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  /* Radius scale */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  /* Shadow elevation scale (layered: ambient + key) */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10);
+
+  /* Motion */
+  --motion-fast: 120ms;
+  --motion-base: 180ms;
+  --motion-slow: 260ms;
+  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Focus ring */
+  --focus-ring: 0 0 0 2px var(--accent-blue);
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   line-height: 1.5;
   font-weight: 400;
   color: var(--text-primary);
@@ -87,6 +107,7 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'cv11', 'ss01';
 }
 
 .logic-editor *,
@@ -100,40 +121,41 @@
 }
 
 .logic-editor[data-theme="dark"] {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #242424;
-  --bg-tertiary: #2a2a2a;
-  --bg-hover: #333333;
-  --bg-active: #404040;
-
-  --text-primary: #e5e5e5;
-  --text-secondary: #cccccc;
-  --text-tertiary: #b3b3b3;
-  --text-muted: #888888;
-  --text-placeholder: #666666;
-
-  --border-primary: #404040;
-  --border-secondary: #4a4a4a;
-  --border-light: #333333;
-
-  --accent-blue: #60a5fa;
-  --accent-blue-light: #1e3a5f;
+  --bg-primary: #0c0c0d;
+  --bg-secondary: #161618;
+  --bg-tertiary: #1c1c1f;
+  --bg-hover: #242427;
+  --bg-active: #2c2c30;
+
+  --text-primary: #fafafa;
+  --text-secondary: #d4d4d8;
+  --text-tertiary: #a1a1aa;
+  --text-muted: #71717a;
+  --text-placeholder: #52525b;
+
+  --border-primary: rgba(255, 255, 255, 0.10);
+  --border-secondary: rgba(255, 255, 255, 0.06);
+  --border-light: rgba(255, 255, 255, 0.04);
+
+  --accent-blue: #818cf8;
+  --accent-blue-light: #1e1b4b;
+  --accent-blue-hover: #a5b4fc;
 
   --accent-amber: #fbbf24;
-  --accent-amber-light: #451a03;
+  --accent-amber-light: #422006;
 
   /* Status colors - darker variants */
-  --success-bg: #064e3b;
+  --success-bg: #052e1c;
   --success-text: #6ee7b7;
   --success-border: #065f46;
 
-  --error-bg: #450a0a;
-  --error-bg-light: #3f0a0a;
-  --error-bg-lighter: #350a0a;
+  --error-bg: #2c0a0c;
+  --error-bg-light: #240a0c;
+  --error-bg-lighter: #1a0a0c;
   --error-text: #fca5a5;
   --error-border: #7f1d1d;
 
-  --warning-bg: #451a03;
+  --warning-bg: #2a1c05;
   --warning-text: #fcd34d;
   --warning-border: #78350f;
 
@@ -147,9 +169,9 @@
   --syntax-punctuation: #c9d1d9;
 
   /* Node colors */
-  --node-bg: #2d2d2d;
-  --node-shadow: rgba(0, 0, 0, 0.3);
-  --node-shadow-hover: rgba(0, 0, 0, 0.4);
+  --node-bg: #18181b;
+  --node-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --node-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
 
   /* Code background */
   --code-bg: #1f1f1f;
@@ -171,6 +193,11 @@
   --debug-value-string: #86efac;
   --debug-value-array: #d8b4fe;
   --debug-value-null: #9ca3af;
+
+  /* Dark mode shadow tweaks */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.6);
 }
 /*
  * ReactFlow base styles - bundled locally so they're included in the library's styles.css
@@ -1095,6 +1122,57 @@ svg.react-flow__connectionline {
   color: var(--text-tertiary, #888);
   text-align: center;
 }
+.dl-tooltip-wrap {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dl-tooltip {
+  pointer-events: none;
+  z-index: 9999;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 280px;
+  padding: 5px 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: 0.1px;
+  white-space: nowrap;
+  color: #fafafa;
+  background: rgba(20, 20, 22, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-sm, 6px);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.16);
+  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dl-tooltip-label {
+  color: inherit;
+}
+
+.dl-tooltip-shortcut {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 5px;
+  height: 16px;
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(250, 250, 250, 0.65);
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 3px;
+}
+
+/* Don't show tooltips on touch / no-hover devices */
+@media (hover: none), (pointer: coarse) {
+  .dl-tooltip {
+    display: none;
+  }
+}
 /* Inline variant (used in toolbar) */
 .dl-debugger-controls--inline {
   display: flex;
@@ -1325,20 +1403,13 @@ svg.react-flow__connectionline {
   bottom: 8px;
   width: 280px;
   z-index: 50;
-  background: var(--bg-secondary, #ffffff);
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
   overflow: hidden;
 }
 
-/* Dark mode */
-.logic-editor[data-theme="dark"] .properties-panel {
-  background: var(--bg-secondary, #1e1e1e);
-  border-color: var(--border-color, #3e3e3e);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
 .properties-panel-content {
   display: flex;
   flex-direction: column;
@@ -1397,10 +1468,17 @@ svg.react-flow__connectionline {
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   color: var(--text-tertiary, #999);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background var(--motion-fast) var(--ease-out),
+              color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
+}
+
+.properties-panel-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
 .properties-panel-close:hover {
@@ -1746,26 +1824,24 @@ svg.react-flow__connectionline {
   padding: 10px 16px;
   font-size: 13px;
   font-weight: 500;
-  color: #ef4444;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 6px;
+  color: var(--error-text);
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.logic-editor[data-theme="dark"] .properties-panel-delete {
-  background: #451a1a;
-  border-color: #7f1d1d;
+  transition: background var(--motion-fast) var(--ease-out),
+              border-color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
 }
 
 .properties-panel-delete:hover {
-  background: #fee2e2;
-  border-color: #ef4444;
+  background: var(--error-bg-light);
+  border-color: var(--error-text);
 }
 
-.logic-editor[data-theme="dark"] .properties-panel-delete:hover {
-  background: #5c2424;
+.properties-panel-delete:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--error-text);
 }
 
 /* ==========================================================================
@@ -2182,17 +2258,18 @@ svg.react-flow__connectionline {
   width: 100%;
   padding: 8px 12px 8px 32px;
   font-size: 13px;
-  color: var(--text-primary, #1a1a1a);
-  background: var(--bg-tertiary, #f8f9fa);
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 6px;
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--radius-sm);
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
 }
 
 .properties-panel-search-input:focus {
-  border-color: var(--color-primary, #2563eb);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+  border-color: var(--accent-blue);
+  box-shadow: var(--focus-ring);
 }
 
 .properties-panel-search-input::placeholder {
@@ -2449,18 +2526,19 @@ svg.react-flow__connectionline {
   padding: 8px 10px;
   font-size: 13px;
   font-family: inherit;
-  color: var(--dl-text-primary, #1a1a1a);
-  background: var(--dl-bg-input, #fff);
-  border: 1px solid var(--dl-border, #e0e0e0);
-  border-radius: 6px;
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--radius-sm);
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
   box-sizing: border-box;
 }
 
 .panel-input:focus {
-  border-color: var(--dl-primary, #3b82f6);
-  box-shadow: 0 0 0 3px var(--dl-primary-alpha, rgba(59, 130, 246, 0.15));
+  border-color: var(--accent-blue);
+  box-shadow: var(--focus-ring);
 }
 
 .panel-input:disabled {
@@ -2559,15 +2637,15 @@ svg.react-flow__connectionline {
 }
 
 .panel-input-checkbox:checked + .panel-input-toggle {
-  background: var(--dl-primary, #3b82f6);
+  background: var(--accent-blue);
 }
 
 .panel-input-checkbox:checked + .panel-input-toggle::after {
   transform: translateX(16px);
 }
 
-.panel-input-checkbox:focus + .panel-input-toggle {
-  box-shadow: 0 0 0 3px var(--dl-primary-alpha, rgba(59, 130, 246, 0.15));
+.panel-input-checkbox:focus-visible + .panel-input-toggle {
+  box-shadow: var(--focus-ring);
 }
 
 .panel-input-checkbox:disabled + .panel-input-toggle {
@@ -2610,16 +2688,17 @@ svg.react-flow__connectionline {
 .panel-input-path-wrapper {
   display: flex;
   align-items: center;
-  background: var(--dl-bg-input, #fff);
-  border: 1px solid var(--dl-border, #e0e0e0);
-  border-radius: 6px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--radius-sm);
   overflow: hidden;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
 }
 
 .panel-input-path-wrapper:focus-within {
-  border-color: var(--dl-primary, #3b82f6);
-  box-shadow: 0 0 0 3px var(--dl-primary-alpha, rgba(59, 130, 246, 0.15));
+  border-color: var(--accent-blue);
+  box-shadow: var(--focus-ring);
 }
 
 .panel-input-path-prefix {
@@ -2963,24 +3042,25 @@ svg.react-flow__connectionline {
    ============================================ */
 
 .dl-node {
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   border: 2px solid;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: inherit;
   font-size: 13px;
   width: 100%;
   box-sizing: border-box;
-  box-shadow: 0 2px 6px var(--node-shadow);
-  transition: box-shadow 0.2s, transform 0.1s;
+  box-shadow: var(--node-shadow);
+  transition: box-shadow var(--motion-base) var(--ease-out),
+              transform var(--motion-fast) var(--ease-out);
   background: var(--node-bg) !important;
   position: relative;
 }
 
 .dl-node:hover {
-  box-shadow: 0 4px 12px var(--node-shadow-hover);
+  box-shadow: var(--node-shadow-hover);
 }
 
 .dl-node.selected {
-  box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
+  box-shadow: 0 0 0 2px var(--accent-blue), var(--node-shadow-hover);
 }
 
 /* ============================================
@@ -3063,7 +3143,7 @@ svg.react-flow__connectionline {
 
 .vertical-cell-header {
   padding: 4px 10px;
-  border-radius: 6px 6px 0 0;
+  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
   color: white;
   display: flex;
   align-items: center;
@@ -3285,7 +3365,7 @@ svg.react-flow__connectionline {
 
 .structure-node-header {
   padding: 6px 12px;
-  border-radius: 6px 6px 0 0;
+  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
   color: white;
   display: flex;
   align-items: center;
@@ -3462,11 +3542,11 @@ svg.react-flow__connectionline {
   margin-top: 4px;
   background: var(--debug-popover-bg);
   color: var(--debug-popover-text);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 8px 12px;
   font-size: 11px;
   z-index: 1000;
-  box-shadow: 0 4px 12px var(--debug-popover-shadow);
+  box-shadow: var(--shadow-md);
   min-width: 150px;
   max-width: 300px;
   max-height: 200px;
@@ -3698,11 +3778,11 @@ svg.react-flow__connectionline {
   position: absolute;
   background: var(--debug-popover-bg);
   color: var(--debug-popover-text);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 10px 12px;
   font-size: 11px;
   z-index: 9999;
-  box-shadow: 0 4px 16px var(--debug-popover-shadow);
+  box-shadow: var(--shadow-lg);
   min-width: 180px;
   max-width: 280px;
   pointer-events: auto;
@@ -3926,7 +4006,7 @@ svg.react-flow__connectionline {
   height: 100%;
   position: relative;
   background: var(--bg-tertiary);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -3957,13 +4037,11 @@ svg.react-flow__connectionline {
   background: var(--bg-secondary, #ffffff);
   flex-shrink: 0;
   gap: 10px;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.logic-editor-toolbar::-webkit-scrollbar {
-  display: none;
+  /* Desktop: visible overflow so tooltips on toolbar buttons aren't clipped.
+     Horizontal-scroll behavior is scoped to the mobile breakpoint below. */
+  overflow: visible;
+  position: relative;
+  z-index: 2;
 }
 
 .logic-editor[data-theme="dark"] .logic-editor-toolbar {
@@ -3975,7 +4053,7 @@ svg.react-flow__connectionline {
   flex: 1;
 }
 
-.logic-editor-toolbar .dl-preserve-structure-toggle {
+.logic-editor-toolbar .dl-templating-toggle {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -3987,7 +4065,7 @@ svg.react-flow__connectionline {
   flex-shrink: 0;
 }
 
-.logic-editor-toolbar .dl-preserve-structure-toggle input[type="checkbox"] {
+.logic-editor-toolbar .dl-templating-toggle input[type="checkbox"] {
   margin: 0;
   cursor: pointer;
 }
@@ -4002,10 +4080,12 @@ svg.react-flow__connectionline {
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   color: var(--text-secondary, #666);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background var(--motion-fast) var(--ease-out),
+              color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
   flex-shrink: 0;
 }
 
@@ -4014,6 +4094,11 @@ svg.react-flow__connectionline {
   color: var(--text-primary, #1a1a1a);
 }
 
+.dl-toolbar-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
 .dl-toolbar-btn:disabled {
   opacity: 0.35;
   cursor: not-allowed;
@@ -4042,23 +4127,95 @@ svg.react-flow__connectionline {
   text-align: center;
   color: var(--text-tertiary);
   pointer-events: none;
+  max-width: 420px;
+  width: calc(100% - 32px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+
+.logic-editor-empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-lg);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 2px;
 }
 
 .logic-editor-empty p {
   margin: 0;
-  font-size: 16px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
 
 .logic-editor-empty-hint {
-  margin-top: 8px !important;
+  margin-top: 0 !important;
   font-size: 13px !important;
+  font-weight: 400 !important;
+  color: var(--text-muted) !important;
+  max-width: 320px;
+}
+
+.logic-editor-empty-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 4px;
+  pointer-events: auto;
+}
+
+.logic-editor-empty-chips-label {
+  font-size: 11px;
+  font-weight: 600;
   color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 4px;
+}
+
+.logic-editor-empty-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-family: inherit;
+  font-weight: 500;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background var(--motion-fast) var(--ease-out),
+              border-color var(--motion-fast) var(--ease-out),
+              color var(--motion-fast) var(--ease-out),
+              box-shadow var(--motion-fast) var(--ease-out);
+}
+
+.logic-editor-empty-chip:hover {
+  background: var(--accent-blue-light);
+  border-color: var(--accent-blue);
+  color: var(--accent-blue);
+}
+
+.logic-editor-empty-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
 /* ReactFlow overrides */
 .logic-editor .react-flow__controls {
-  box-shadow: 0 2px 8px var(--node-shadow);
-  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -4112,6 +4269,15 @@ svg.react-flow__connectionline {
   .logic-editor-toolbar {
     padding: 0 8px;
     gap: 6px;
+    /* Restore horizontal scrolling on narrow viewports where buttons can overflow */
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .logic-editor-toolbar::-webkit-scrollbar {
+    display: none;
   }
 
   .logic-editor-toolbar-spacer {
@@ -4123,7 +4289,7 @@ svg.react-flow__connectionline {
     height: 40px;
   }
 
-  .dl-preserve-structure-toggle span {
+  .dl-templating-toggle span {
     font-size: 11px;
   }
 
@@ -4194,10 +4360,10 @@ svg.react-flow__connectionline {
   z-index: 1000;
   min-width: 180px;
   max-width: 280px;
-  background: var(--bg-primary, #ffffff);
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
   padding: 4px 0;
   font-size: 13px;
   outline: none;