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

web/src/PropertiesPane.tsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 import type { Widget, Interface } from './lib/types';
 
 interface Props {
@@ -21,17 +21,25 @@ function Field({ label, children }: { label: string; children: any }) {
 }
 
 function TextInput({ value, onCommit }: { value: string; onCommit: (v: string) => void }) {
-  const [local, setLocal] = useState(value);
+  const [local, setLocal] = useState(value || '');
+
   // Sync when external value changes (e.g. different widget selected)
-  if (local !== value && document.activeElement?.tagName !== 'INPUT') {
-    setLocal(value);
-  }
+  useEffect(() => {
+    setLocal(value || '');
+  }, [value]);
+
   return (
     <input
       class="prop-input"
       value={local}
       onInput={(e) => setLocal((e.target as HTMLInputElement).value)}
       onChange={(e) => onCommit((e.target as HTMLInputElement).value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          onCommit((e.target as HTMLInputElement).value);
+          (e.target as HTMLInputElement).blur();
+        }
+      }}
     />
   );
 }
@@ -79,31 +87,37 @@ export default function PropertiesPane({ selected, multiCount, iface, onChange,
         <div class="props-body">
           {/* Canvas-level properties */}
           <div class="props-section">
-            <div class="props-section-title">Canvas</div>
+            <div class="props-section-title">{iface.kind === 'plot' ? 'Plot panel' : 'Canvas'}</div>
             <Field label="Name">
               <TextInput
                 value={iface.name}
                 onCommit={(v) => onIfaceChange({ ...iface, name: v })}
               />
             </Field>
-            <Field label="Width">
-              <input
-                class="prop-input prop-input-num"
-                type="number"
-                value={iface.w}
-                min={100}
-                onChange={(e) => onIfaceChange({ ...iface, w: parseInt((e.target as HTMLInputElement).value, 10) || iface.w })}
-              />
-            </Field>
-            <Field label="Height">
-              <input
-                class="prop-input prop-input-num"
-                type="number"
-                value={iface.h}
-                min={100}
-                onChange={(e) => onIfaceChange({ ...iface, h: parseInt((e.target as HTMLInputElement).value, 10) || iface.h })}
-              />
-            </Field>
+            {/* Plot panels fill the viewport via the split layout — fixed px size
+                is not meaningful, so width/height are hidden. */}
+            {iface.kind !== 'plot' && (
+              <div>
+                <Field label="Width">
+                  <input
+                    class="prop-input prop-input-num"
+                    type="number"
+                    value={iface.w}
+                    min={100}
+                    onChange={(e) => onIfaceChange({ ...iface, w: parseInt((e.target as HTMLInputElement).value, 10) || iface.w })}
+                  />
+                </Field>
+                <Field label="Height">
+                  <input
+                    class="prop-input prop-input-num"
+                    type="number"
+                    value={iface.h}
+                    min={100}
+                    onChange={(e) => onIfaceChange({ ...iface, h: parseInt((e.target as HTMLInputElement).value, 10) || iface.h })}
+                  />
+                </Field>
+              </div>
+            )}
           </div>
 
           {w && (
@@ -253,6 +267,23 @@ export default function PropertiesPane({ selected, multiCount, iface, onChange,
                       <option value="true">Yes</option>
                     </select>
                   </Field>
+                  <Field label="Action">
+                    <div class="prop-field-col">
+                      <select
+                        class="prop-input"
+                        value={w.options['action'] ?? ''}
+                        onChange={(e) => setOpt('action', (e.target as HTMLSelectElement).value)}
+                      >
+                        <option value="">(none)</option>
+                        {(iface.logic?.nodes ?? [])
+                          .filter(n => n.kind === 'trigger.button')
+                          .map(n => (
+                            <option key={n.id} value={n.params.name ?? ''}>{n.params.name || '(unnamed)'}</option>
+                          ))}
+                      </select>
+                      <span class="prop-hint">Fires a Button trigger node (define flows in the Logic tab)</span>
+                    </div>
+                  </Field>
                 </div>
               )}