Major changes: logic add to panel, local variables, panel histor, users management...

web/src/SyntheticWizard.tsx

@@ -1,11 +1,14 @@
 import { h } from 'preact';
-import { useState, useEffect, useMemo } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 import LuaEditor from './LuaEditor';
+import SearchableSelect from './SearchableSelect';
 import type { InputRef, SignalDef } from './lib/types';
 
 interface Props {
   onClose: () => void;
   onCreated: () => void;
+  // Interface id the wizard was opened from — used to bind panel-scoped signals.
+  currentIfaceId?: string;
 }
 
 interface NodeParam {
@@ -25,6 +28,7 @@ const NODE_TYPES: Array<{ type: string; label: string; params: NodeParam[] }> =
     { label: 'Order (1–8)',      key: 'order', type: 'number', default: '1' },
   ]},
   { type: 'derivative',     label: 'Derivative',      params: [] },
+  { type: 'integrate',      label: 'Integrate',       params: [] },
   { type: 'clamp',          label: 'Clamp',           params: [{ label: 'Min', key: 'min', type: 'number', default: '0' }, { label: 'Max', key: 'max', type: 'number', default: '100' }] },
   { type: 'expr',           label: 'Formula',         params: [{ label: 'Expression (a,b,c,d = inputs)', key: 'expr',   type: 'text', default: 'a * 1.0' }] },
   { type: 'lua',            label: 'Lua Script',      params: [{ label: 'Script (a,b,c,d = inputs)',      key: 'script', type: 'lua',  default: 'return a' }] },
@@ -39,69 +43,16 @@ interface SignalInfo {
   description?: string;
 }
 
-// ── Searchable Selector ──────────────────────────────────────────────────────
-
-function SearchableSelect({
-  value,
-  options,
-  onSelect,
-  placeholder = 'Select…'
-}: {
-  value: string;
-  options: string[];
-  onSelect: (val: string) => void;
-  placeholder?: string;
-}) {
-  const [open, setOpen] = useState(false);
-  const [filter, setFilter] = useState('');
-
-  const filtered = useMemo(() => {
-    const f = filter.toLowerCase();
-    return options.filter(o => o.toLowerCase().includes(f));
-  }, [options, filter]);
-
-  return (
-    <div class="search-select">
-      <div class="search-select-trigger" onClick={() => setOpen(!open)}>
-        {value || <span class="hint">{placeholder}</span>}
-        <span class="search-select-arrow">{open ? '▴' : '▾'}</span>
-      </div>
-      {open && (
-        <div class="search-select-dropdown">
-          <input
-            class="prop-input"
-            autoFocus
-            placeholder="Search…"
-            value={filter}
-            onInput={(e) => setFilter((e.target as HTMLInputElement).value)}
-            onClick={(e) => e.stopPropagation()}
-          />
-          <div class="search-select-list">
-            {filtered.length === 0 && <div class="search-select-item hint">No matches</div>}
-            {filtered.map(opt => (
-              <div
-                key={opt}
-                class={`search-select-item${opt === value ? ' search-select-item-selected' : ''}`}
-                onClick={() => { onSelect(opt); setOpen(false); setFilter(''); }}
-              >
-                {opt}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-      {open && <div class="search-select-backdrop" onClick={() => setOpen(false)} />}
-    </div>
-  );
-}
-
 // ── Main Wizard ──────────────────────────────────────────────────────────────
 
-export default function SyntheticWizard({ onClose, onCreated }: Props) {
+export default function SyntheticWizard({ onClose, onCreated, currentIfaceId }: Props) {
   const [name, setName] = useState('');
   const [inputs, setInputs] = useState<InputRef[]>([{ ds: 'stub', signal: 'sine_1hz' }]);
   const [nodeType, setNodeType] = useState('gain');
   const [params, setParams] = useState<Record<string, string>>({});
+  // Visibility scope. Panel scope requires an interface to bind to, so when the
+  // wizard is opened outside a saved panel it falls back to 'user'.
+  const [visibility, setVisibility] = useState<'panel' | 'user' | 'global'>(currentIfaceId ? 'panel' : 'user');
   const [unit, setUnit] = useState('');
   const [desc, setDesc] = useState('');
   const [dispLow, setDispLow] = useState('0');
@@ -180,6 +131,8 @@ export default function SyntheticWizard({ onClose, onCreated }: Props) {
         displayLow: parseFloat(dispLow) || 0,
         displayHigh: parseFloat(dispHigh) || 100,
       },
+      visibility,
+      ...(visibility === 'panel' && currentIfaceId ? { panel: currentIfaceId } : {}),
     };
 
     setSaving(true);
@@ -222,6 +175,18 @@ export default function SyntheticWizard({ onClose, onCreated }: Props) {
               onInput={(e) => setName((e.target as HTMLInputElement).value)} />
           </div>
 
+          <div class="wizard-field">
+            <label>Visibility</label>
+            <select class="prop-select" value={visibility}
+              onChange={(e) => setVisibility((e.target as HTMLSelectElement).value as any)}>
+              <option value="panel" disabled={!currentIfaceId}>
+                This panel only{currentIfaceId ? '' : ' (save panel first)'}
+              </option>
+              <option value="user">All my panels</option>
+              <option value="global">All panels (global)</option>
+            </select>
+          </div>
+
           <div class="wizard-section-title">Input signals</div>
           {inputs.map((inp, idx) => (
             <div key={idx} class="wizard-field wizard-field-row" style="align-items: flex-end; gap: 0.5rem; margin-bottom: 0.5rem;">