@goplasmatic/dataflow-ui 2.1.1 → 2.1.2

package/dist/dataflow-ui.css

@@ -1311,6 +1311,1631 @@ svg.react-flow__connectionline {
     width: 60px;
   }
 }
+/* ==========================================================================
+   Properties Panel Styles
+   ========================================================================== */
+
+/* Floating properties panel - overlays on top of the diagram */
+.properties-panel {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  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);
+  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;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+.properties-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-light, #f0f0f0);
+  background: var(--bg-tertiary, #f8f9fa);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-header {
+  border-bottom-color: var(--border-color, #3e3e3e);
+  background: var(--bg-tertiary, #252525);
+}
+
+.properties-panel-header-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.properties-panel-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-title {
+  color: var(--text-primary, #e0e0e0);
+}
+
+.properties-panel-category {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--text-tertiary, #999);
+}
+
+.properties-panel-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--text-tertiary, #999);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.properties-panel-close:hover {
+  background: var(--bg-hover, #e8e8e8);
+  color: var(--text-primary, #1a1a1a);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-close:hover {
+  background: var(--bg-hover, #3e3e3e);
+  color: var(--text-primary, #e0e0e0);
+}
+
+/* ==========================================================================
+   Sections
+   ========================================================================== */
+
+.properties-panel-section {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-light, #f0f0f0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-section {
+  border-bottom-color: var(--border-color, #3e3e3e);
+}
+
+.properties-panel-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary, #999);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.properties-panel-section-icon {
+  font-size: 14px;
+}
+
+/* Collapsible section */
+.properties-panel-section--collapsible {
+  padding: 0;
+}
+
+.properties-panel-section-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary, #999);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.properties-panel-section-toggle:hover {
+  background: var(--bg-hover, #f5f5f5);
+  color: var(--text-secondary, #666);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-section-toggle:hover {
+  background: var(--bg-hover, #3e3e3e);
+  color: var(--text-secondary, #aaa);
+}
+
+.properties-panel-section-toggle svg {
+  flex-shrink: 0;
+}
+
+.properties-panel-section-content {
+  padding: 0 16px 16px;
+}
+
+/* ==========================================================================
+   Help Section
+   ========================================================================== */
+
+.help-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.help-summary {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary, #666);
+  line-height: 1.5;
+}
+
+.logic-editor[data-theme="dark"] .help-summary {
+  color: var(--text-secondary, #aaa);
+}
+
+.help-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.help-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  border-radius: 4px;
+}
+
+.help-badge code {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+}
+
+.help-badge-arity {
+  background: var(--dl-info-bg, #eff6ff);
+  color: var(--dl-info, #3b82f6);
+}
+
+.logic-editor[data-theme="dark"] .help-badge-arity {
+  background: rgba(59, 130, 246, 0.15);
+  color: #60a5fa;
+}
+
+.help-badge-return {
+  background: var(--dl-success-bg, #f0fdf4);
+  color: var(--dl-success, #22c55e);
+}
+
+.logic-editor[data-theme="dark"] .help-badge-return {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.help-examples-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 0;
+  font-size: 12px;
+  color: var(--dl-primary, #3b82f6);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.help-examples-toggle:hover {
+  color: var(--dl-primary-dark, #2563eb);
+}
+
+.logic-editor[data-theme="dark"] .help-examples-toggle {
+  color: #60a5fa;
+}
+
+.logic-editor[data-theme="dark"] .help-examples-toggle:hover {
+  color: #93c5fd;
+}
+
+.help-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.help-example {
+  padding: 10px;
+  background: var(--dl-bg-subtle, #f8f9fa);
+  border: 1px solid var(--dl-border-light, #f0f0f0);
+  border-radius: 6px;
+}
+
+.logic-editor[data-theme="dark"] .help-example {
+  background: #1e1e1e;
+  border-color: #3e3e3e;
+}
+
+.help-example-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.help-example-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dl-text-secondary, #666);
+}
+
+.logic-editor[data-theme="dark"] .help-example-title {
+  color: #aaa;
+}
+
+.help-example-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--dl-text-tertiary, #999);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.help-example-copy:hover {
+  background: var(--dl-bg-hover, #e8e8e8);
+  color: var(--dl-text-primary, #1a1a1a);
+}
+
+.logic-editor[data-theme="dark"] .help-example-copy {
+  color: #888;
+}
+
+.logic-editor[data-theme="dark"] .help-example-copy:hover {
+  background: #3e3e3e;
+  color: #e0e0e0;
+}
+
+.help-example-code {
+  margin: 0;
+  padding: 8px;
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-size: 11px;
+  line-height: 1.5;
+  background: var(--dl-bg-code, #fff);
+  border: 1px solid var(--dl-border-light, #f0f0f0);
+  border-radius: 4px;
+  overflow-x: auto;
+  color: var(--text-primary, #1a1a1a);
+}
+
+.logic-editor[data-theme="dark"] .help-example-code {
+  background: #121212;
+  border-color: #3e3e3e;
+  color: #e0e0e0;
+}
+
+.help-example-code code {
+  font-family: inherit;
+}
+
+.help-example-data,
+.help-example-result,
+.help-example-error {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.help-example-label {
+  color: var(--dl-text-tertiary, #999);
+  flex-shrink: 0;
+}
+
+.help-example-data code,
+.help-example-result code {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  color: var(--dl-text-primary, #1a1a1a);
+}
+
+.logic-editor[data-theme="dark"] .help-example-data code,
+.logic-editor[data-theme="dark"] .help-example-result code {
+  color: #e0e0e0;
+}
+
+.help-example-error code {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  color: var(--dl-error, #ef4444);
+}
+
+.logic-editor[data-theme="dark"] .help-example-error code {
+  color: #f87171;
+}
+
+.help-example-note {
+  margin-top: 6px;
+  font-size: 11px;
+  font-style: italic;
+  color: var(--dl-text-tertiary, #999);
+}
+
+.help-notes {
+  padding-top: 8px;
+  border-top: 1px solid var(--dl-border-light, #f0f0f0);
+}
+
+.logic-editor[data-theme="dark"] .help-notes {
+  border-top-color: #3e3e3e;
+}
+
+.help-notes-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dl-text-tertiary, #999);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.help-notes-list {
+  margin: 0;
+  padding-left: 16px;
+  font-size: 12px;
+  color: var(--dl-text-secondary, #666);
+  line-height: 1.6;
+}
+
+.logic-editor[data-theme="dark"] .help-notes-list {
+  color: #aaa;
+}
+
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+.properties-panel-footer {
+  margin-top: auto;
+  padding: 16px;
+  border-top: 1px solid var(--border-light, #f0f0f0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-footer {
+  border-top-color: var(--border-color, #3e3e3e);
+}
+
+.properties-panel-delete {
+  width: 100%;
+  padding: 10px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #ef4444;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-delete {
+  background: #451a1a;
+  border-color: #7f1d1d;
+}
+
+.properties-panel-delete:hover {
+  background: #fee2e2;
+  border-color: #ef4444;
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-delete:hover {
+  background: #5c2424;
+}
+
+/* ==========================================================================
+   Empty State
+   ========================================================================== */
+
+.properties-panel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.properties-panel-empty-title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary, #666);
+}
+
+.properties-panel-empty-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-tertiary, #999);
+  line-height: 1.5;
+}
+
+.properties-panel-empty-divider {
+  width: 100%;
+  height: 1px;
+  margin: 24px 0;
+  background: var(--border-light, #f0f0f0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-empty-divider {
+  background: var(--border-color, #3e3e3e);
+}
+
+.properties-panel-quick-add-title {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary, #666);
+}
+
+.properties-panel-quick-add {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.properties-panel-quick-add-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: var(--text-primary, #1a1a1a);
+  background: var(--bg-tertiary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-quick-add-btn {
+  color: var(--text-primary, #e0e0e0);
+  background: var(--bg-tertiary, #252525);
+  border-color: var(--border-color, #3e3e3e);
+}
+
+.properties-panel-quick-add-btn:hover {
+  background: var(--bg-hover, #f0f0f0);
+  border-color: var(--border-color, #d0d0d0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-quick-add-btn:hover {
+  background: var(--bg-hover, #3e3e3e);
+}
+
+.properties-panel-quick-add-btn svg {
+  color: var(--text-tertiary, #999);
+}
+
+/* ============================================================================
+   Arguments Section
+   ============================================================================ */
+
+.arguments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.argument-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: var(--bg-tertiary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+}
+
+.logic-editor[data-theme="dark"] .argument-item {
+  background: var(--bg-tertiary, #252525);
+  border-color: var(--border-color, #3e3e3e);
+}
+
+.argument-index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary, #888);
+  background: var(--bg-secondary, #f0f0f0);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.logic-editor[data-theme="dark"] .argument-index {
+  background: var(--bg-secondary, #1e1e1e);
+  color: var(--text-tertiary, #888);
+}
+
+.argument-value {
+  flex: 1;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  color: var(--text-primary, #1a1a1a);
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.argument-value:hover {
+  background: var(--bg-hover, #e8e8e8);
+}
+
+.logic-editor[data-theme="dark"] .argument-value {
+  color: var(--text-primary, #e0e0e0);
+}
+
+.logic-editor[data-theme="dark"] .argument-value:hover {
+  background: var(--bg-hover, #3e3e3e);
+}
+
+.argument-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: var(--text-tertiary, #888);
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.argument-remove:hover {
+  color: var(--color-error, #dc3545);
+  background: var(--bg-hover, #e8e8e8);
+}
+
+.logic-editor[data-theme="dark"] .argument-remove:hover {
+  background: var(--bg-hover, #3e3e3e);
+}
+
+.arguments-empty {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--text-tertiary, #888);
+  text-align: center;
+  background: var(--bg-tertiary, #f8f9fa);
+  border: 1px dashed var(--border-color, #e0e0e0);
+  border-radius: 6px;
+}
+
+.logic-editor[data-theme="dark"] .arguments-empty {
+  background: var(--bg-tertiary, #252525);
+  border-color: var(--border-color, #3e3e3e);
+}
+
+.arguments-add-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-primary, #2563eb);
+  background: transparent;
+  border: 1px dashed var(--color-primary, #2563eb);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, border-style 0.15s;
+}
+
+.arguments-add-btn:hover {
+  background: var(--color-primary-light, rgba(37, 99, 235, 0.08));
+  border-style: solid;
+}
+
+.logic-editor[data-theme="dark"] .arguments-add-btn {
+  color: var(--color-primary, #60a5fa);
+  border-color: var(--color-primary, #60a5fa);
+}
+
+.logic-editor[data-theme="dark"] .arguments-add-btn:hover {
+  background: var(--color-primary-light, rgba(96, 165, 250, 0.1));
+}
+
+.arguments-hint {
+  margin-top: 8px;
+  padding: 6px 8px;
+  font-size: 11px;
+  color: var(--text-tertiary, #888);
+  background: var(--bg-tertiary, #f8f9fa);
+  border-radius: 4px;
+}
+
+.logic-editor[data-theme="dark"] .arguments-hint {
+  background: var(--bg-tertiary, #252525);
+}
+
+/* Inline literal inputs */
+.argument-literal-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.argument-input {
+  width: 100%;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  color: var(--text-primary, #1a1a1a);
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-color, #d0d0d0);
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.argument-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.argument-input:hover:not(:focus) {
+  border-color: var(--border-color-dark, #c0c0c0);
+}
+
+.logic-editor[data-theme="dark"] .argument-input {
+  color: var(--text-primary, #e0e0e0);
+  background: var(--bg-primary, #121212);
+  border-color: var(--border-color, #4e4e4e);
+}
+
+.logic-editor[data-theme="dark"] .argument-input:focus {
+  border-color: var(--color-primary, #60a5fa);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+.logic-editor[data-theme="dark"] .argument-input:hover:not(:focus) {
+  border-color: var(--border-color-dark, #5e5e5e);
+}
+
+/* Number input specific */
+.argument-input--number {
+  -moz-appearance: textfield;
+}
+
+.argument-input--number::-webkit-outer-spin-button,
+.argument-input--number::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* String input specific */
+.argument-input--string::placeholder {
+  color: var(--text-muted, #aaa);
+  font-style: italic;
+}
+
+/* Boolean and null select */
+.argument-input--boolean,
+.argument-input--null {
+  cursor: pointer;
+  /* Remove all native select styling */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  /* Custom dropdown arrow - use shorthand to override base class */
+  background: var(--bg-primary, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
+  padding-right: 28px;
+}
+
+/* Remove IE dropdown arrow */
+.argument-input--boolean::-ms-expand,
+.argument-input--null::-ms-expand {
+  display: none;
+}
+
+.logic-editor[data-theme="dark"] .argument-input--boolean,
+.logic-editor[data-theme="dark"] .argument-input--null {
+  background: var(--bg-primary, #121212) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
+}
+
+/* Complex value link button */
+.argument-value--complex {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  color: var(--color-primary, #2563eb);
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-color, #d0d0d0);
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.argument-value--complex:hover {
+  background: var(--bg-hover, #f5f5f5);
+  border-color: var(--color-primary, #2563eb);
+}
+
+.argument-value--complex svg {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.logic-editor[data-theme="dark"] .argument-value--complex {
+  color: var(--color-primary, #60a5fa);
+  background: var(--bg-primary, #121212);
+  border-color: var(--border-color, #4e4e4e);
+}
+
+.logic-editor[data-theme="dark"] .argument-value--complex:hover {
+  background: var(--bg-hover, #2a2a2a);
+  border-color: var(--color-primary, #60a5fa);
+}
+
+/* Readonly literal display */
+.argument-input--readonly {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  color: var(--text-secondary, #666);
+  background: var(--bg-tertiary, #f5f5f5);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+}
+
+.logic-editor[data-theme="dark"] .argument-input--readonly {
+  color: var(--text-secondary, #aaa);
+  background: var(--bg-tertiary, #252525);
+  border-color: var(--border-color, #3e3e3e);
+}
+
+/* ==========================================================================
+   Operator List (Empty State with Full Operator Selection)
+   ========================================================================== */
+
+.properties-panel-search {
+  position: relative;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-light, #f0f0f0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-search {
+  border-bottom-color: var(--border-color, #3e3e3e);
+}
+
+.properties-panel-search-icon {
+  position: absolute;
+  left: 28px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-tertiary, #999);
+  pointer-events: none;
+}
+
+.properties-panel-search-input {
+  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;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.properties-panel-search-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+.properties-panel-search-input::placeholder {
+  color: var(--text-tertiary, #999);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-search-input {
+  color: var(--text-primary, #e0e0e0);
+  background: var(--bg-tertiary, #252525);
+  border-color: var(--border-color, #3e3e3e);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-search-input:focus {
+  border-color: var(--color-primary, #60a5fa);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
+}
+
+.properties-panel-operators-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+/* Category styling - reset the block display from header category */
+.properties-panel-operators-list .properties-panel-category {
+  display: block;
+  margin-top: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+.properties-panel-category-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary, #666);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.properties-panel-category-header:hover {
+  background: var(--bg-hover, #f5f5f5);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-category-header:hover {
+  background: var(--bg-hover, #3e3e3e);
+}
+
+.properties-panel-category-header svg {
+  flex-shrink: 0;
+  color: var(--text-tertiary, #999);
+}
+
+.properties-panel-category-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.properties-panel-category-label {
+  flex: 1;
+  text-align: left;
+}
+
+.properties-panel-category-count {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-tertiary, #999);
+  padding: 2px 6px;
+  background: var(--bg-tertiary, #f0f0f0);
+  border-radius: 10px;
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-category-count {
+  background: var(--bg-tertiary, #2e2e2e);
+}
+
+.properties-panel-category-items {
+  padding: 4px 8px 8px 24px;
+}
+
+.properties-panel-operator-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--text-primary, #1a1a1a);
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.properties-panel-operator-item:hover {
+  background: var(--bg-hover, #f0f0f0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-operator-item {
+  color: var(--text-primary, #e0e0e0);
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-operator-item:hover {
+  background: var(--bg-hover, #3e3e3e);
+}
+
+.properties-panel-operator-name {
+  flex: 1;
+  text-align: left;
+  font-weight: 500;
+}
+
+.properties-panel-operator-symbol {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 11px;
+  color: var(--text-tertiary, #999);
+  padding: 2px 6px;
+  background: var(--bg-tertiary, #f5f5f5);
+  border-radius: 4px;
+}
+
+.logic-editor[data-theme="dark"] .properties-panel-operator-symbol {
+  background: var(--bg-tertiary, #2e2e2e);
+}
+
+/* ==========================================================================
+   Mobile Bottom Sheet
+   ========================================================================== */
+
+@media (max-width: 1024px) {
+  .properties-panel {
+    position: fixed;
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 52px; /* above mobile nav tab bar */
+    width: 100%;
+    height: 45%;
+    max-height: 340px;
+    border-radius: 12px 12px 0 0;
+    border: none;
+    border-top: 1px solid var(--border-color, #e0e0e0);
+    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
+    z-index: 200;
+  }
+
+  .logic-editor[data-theme="dark"] .properties-panel {
+    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
+  }
+
+  .properties-panel-close {
+    width: 44px;
+    height: 44px;
+  }
+
+  .properties-panel-section-toggle {
+    min-height: 44px;
+  }
+
+  .properties-panel-operator-item {
+    min-height: 44px;
+    padding: 8px 12px;
+  }
+
+  .properties-panel-category-header {
+    min-height: 44px;
+  }
+
+  .properties-panel-quick-add-btn {
+    min-height: 44px;
+  }
+
+  .properties-panel-delete {
+    min-height: 44px;
+  }
+
+  .arguments-add-btn {
+    min-height: 44px;
+  }
+
+  .argument-remove {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+/* Landscape mobile: panel on the right side instead of bottom sheet */
+@media (max-width: 1024px) and (orientation: landscape) {
+  .properties-panel {
+    position: fixed;
+    top: 44px; /* below the header */
+    left: auto;
+    right: 0;
+    bottom: 40px; /* above landscape mobile nav tab bar (40px in landscape) */
+    width: 280px;
+    height: auto;
+    max-height: none;
+    border-radius: 0;
+    border: none;
+    border-left: 1px solid var(--border-color, #e0e0e0);
+    border-top: none;
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+  }
+
+  .logic-editor[data-theme="dark"] .properties-panel {
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.35);
+  }
+}
+/* ==========================================================================
+   Panel Input Styles
+   ========================================================================== */
+
+/* Field Container */
+.panel-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.panel-field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dl-text-secondary, #666);
+}
+
+.panel-field-required {
+  color: var(--dl-error, #ef4444);
+  margin-left: 2px;
+}
+
+.panel-field-help {
+  font-size: 11px;
+  color: var(--dl-text-tertiary, #999);
+  line-height: 1.4;
+}
+
+/* ==========================================================================
+   Base Input Styles
+   ========================================================================== */
+
+.panel-input {
+  width: 100%;
+  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;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  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));
+}
+
+.panel-input:disabled {
+  background: var(--dl-bg-disabled, #f5f5f5);
+  color: var(--dl-text-disabled, #aaa);
+  cursor: not-allowed;
+}
+
+.panel-input::placeholder {
+  color: var(--dl-text-placeholder, #bbb);
+}
+
+.panel-input-error {
+  border-color: var(--dl-error, #ef4444);
+}
+
+.panel-input-error:focus {
+  box-shadow: 0 0 0 3px var(--dl-error-alpha, rgba(239, 68, 68, 0.15));
+}
+
+.panel-input-error-message {
+  font-size: 11px;
+  color: var(--dl-error, #ef4444);
+  margin-top: 4px;
+}
+
+.panel-input-unsupported {
+  padding: 8px;
+  font-size: 12px;
+  color: var(--dl-warning, #f59e0b);
+  background: var(--dl-warning-bg, #fffbeb);
+  border-radius: 4px;
+}
+
+/* ==========================================================================
+   Text Area
+   ========================================================================== */
+
+.panel-input-textarea {
+  resize: vertical;
+  min-height: 60px;
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+}
+
+/* ==========================================================================
+   Number Input
+   ========================================================================== */
+
+.panel-input-number {
+  -moz-appearance: textfield;
+}
+
+.panel-input-number::-webkit-outer-spin-button,
+.panel-input-number::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* ==========================================================================
+   Boolean Input (Toggle)
+   ========================================================================== */
+
+.panel-input-boolean {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.panel-input-checkbox {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.panel-input-toggle {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background: var(--dl-bg-toggle-off, #d1d5db);
+  border-radius: 10px;
+  transition: background 0.2s;
+}
+
+.panel-input-toggle::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s;
+}
+
+.panel-input-checkbox:checked + .panel-input-toggle {
+  background: var(--dl-primary, #3b82f6);
+}
+
+.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:disabled + .panel-input-toggle {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+   Select Input
+   ========================================================================== */
+
+.panel-input-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.panel-input-select {
+  appearance: none;
+  padding-right: 28px;
+  cursor: pointer;
+}
+
+.panel-input-select:disabled {
+  cursor: not-allowed;
+}
+
+.panel-input-select-arrow {
+  position: absolute;
+  right: 10px;
+  font-size: 10px;
+  color: var(--dl-text-tertiary, #999);
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   Path Input
+   ========================================================================== */
+
+.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;
+  overflow: hidden;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.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));
+}
+
+.panel-input-path-prefix {
+  padding: 8px 0 8px 10px;
+  font-size: 13px;
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  color: var(--dl-text-tertiary, #999);
+  user-select: none;
+}
+
+.panel-input-path {
+  border: none;
+  padding-left: 4px;
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+}
+
+.panel-input-path:focus {
+  box-shadow: none;
+}
+
+/* ==========================================================================
+   Path Array Input
+   ========================================================================== */
+
+.panel-input-path-array {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.panel-input-path-segment {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.panel-input-segment {
+  flex: 1;
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+}
+
+.panel-input-segment-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--dl-text-tertiary, #999);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.panel-input-segment-remove:hover {
+  background: var(--dl-error-bg, #fef2f2);
+  color: var(--dl-error, #ef4444);
+}
+
+.panel-input-segment-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.panel-input-add-segment {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--dl-primary, #3b82f6);
+  background: transparent;
+  border: 1px dashed var(--dl-border, #e0e0e0);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.panel-input-add-segment:hover {
+  background: var(--dl-primary-bg, #eff6ff);
+  border-color: var(--dl-primary, #3b82f6);
+}
+
+.panel-input-add-segment:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.panel-input-path-preview {
+  font-size: 11px;
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  color: var(--dl-text-tertiary, #999);
+  padding: 4px 0;
+}
+
+/* ==========================================================================
+   Expression Input
+   ========================================================================== */
+
+.panel-input-expression {
+  padding: 10px 12px;
+  background: var(--dl-bg-subtle, #f8f9fa);
+  border: 1px dashed var(--dl-border, #e0e0e0);
+  border-radius: 6px;
+}
+
+.panel-input-expression.disabled {
+  opacity: 0.6;
+}
+
+.panel-input-expression-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.panel-input-expression-icon {
+  color: var(--dl-primary, #3b82f6);
+  flex-shrink: 0;
+}
+
+.panel-input-expression-summary {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  color: var(--dl-text-primary, #1a1a1a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panel-input-expression-empty {
+  color: var(--dl-text-placeholder, #bbb);
+  font-style: italic;
+}
+
+.panel-input-expression-hint {
+  font-size: 10px;
+  color: var(--dl-text-tertiary, #999);
+  margin-top: 6px;
+}
+
+/* ==========================================================================
+   JSON Input
+   ========================================================================== */
+
+.panel-input-json-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-input-json {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* ==========================================================================
+   Panel Renderer
+   ========================================================================== */
+
+.panel-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ==========================================================================
+   Section Styles
+   ========================================================================== */
+
+.panel-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dl-text-secondary, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--dl-border-light, #f0f0f0);
+  margin-bottom: 12px;
+}
+
+.panel-section-header.collapsible {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+}
+
+.panel-section-header.collapsible:hover {
+  color: var(--dl-text-primary, #1a1a1a);
+}
+
+.panel-section-header.collapsible:focus {
+  outline: none;
+  color: var(--dl-primary, #3b82f6);
+}
+
+.panel-section-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dl-text-tertiary, #999);
+}
+
+.panel-section-title {
+  flex: 1;
+}
+
+.panel-section-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ==========================================================================
+   Panel Hints
+   ========================================================================== */
+
+.panel-hint {
+  display: flex;
+  gap: 10px;
+  padding: 12px;
+  background: var(--dl-bg-subtle, #f8f9fa);
+  border-radius: 8px;
+  border: 1px solid var(--dl-border-light, #f0f0f0);
+}
+
+.panel-hint-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.panel-hint-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.panel-hint-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dl-text-secondary, #666);
+  margin-bottom: 4px;
+}
+
+.panel-hint-description {
+  font-size: 12px;
+  color: var(--dl-text-tertiary, #999);
+  line-height: 1.4;
+}
+
+.panel-hint-description code {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-size: 11px;
+  background: var(--dl-bg-code, #e8e8e8);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+/* Chainable hint */
+.panel-hint-chainable {
+  background: var(--dl-info-bg, #eff6ff);
+  border-color: var(--dl-info-border, #bfdbfe);
+}
+
+/* Context variables hint */
+.panel-hint-context {
+  background: var(--dl-success-bg, #f0fdf4);
+  border-color: var(--dl-success-border, #bbf7d0);
+}
+
+.panel-context-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.panel-context-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.panel-context-example {
+  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-size: 11px;
+  background: var(--dl-bg-code, rgba(0, 0, 0, 0.06));
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--dl-text-primary, #1a1a1a);
+  display: inline-block;
+  width: fit-content;
+}
+
+.panel-context-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dl-text-secondary, #666);
+}
+
+.panel-context-description {
+  font-size: 11px;
+  color: var(--dl-text-tertiary, #999);
+}
 /* ============================================
    CSS Variables - Debug Colors
    ============================================ */