@bramas/simulant-ui 0.1.1 → 0.2.0

package/dist/components/GenericEditor.jsx

@@ -96,53 +96,28 @@ function CodeEditor(props) {
             }
         }
     };
-    return (<div style={{
-            display: 'grid',
-            'grid-template-columns': '3.5em minmax(0, 1fr)',
-            border: '1px solid #c9d2dc',
-            'border-radius': '6px',
-            overflow: 'hidden',
-            'background-color': '#f8fafc'
-        }}>
-      <div ref={gutterRef} aria-hidden="true" style={{
-            'font-family': 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
-            'font-size': '0.9em',
-            'line-height': '1.5',
-            padding: '0.75em 0.5em',
-            'text-align': 'right',
-            color: '#6b7280',
-            'background-color': '#eef2f7',
-            'border-right': '1px solid #d7dee7',
-            overflow: 'hidden',
-            'user-select': 'none'
-        }}>
+    return (<div class="sim-code-editor">
+      <div ref={gutterRef} class="sim-code-gutter" aria-hidden="true">
         <For each={lineNumbers()}>
           {(lineNumber) => <div>{lineNumber}</div>}
         </For>
       </div>
-      <textarea ref={textareaRef} value={props.value} onInput={(event) => props.onInput(event.currentTarget.value)} onKeyDown={handleKeyDown} onScroll={syncScroll} placeholder={props.placeholder} rows={props.rows ?? 12} spellcheck={false} style={{
-            width: '100%',
-            margin: '0',
-            border: 'none',
-            outline: 'none',
-            resize: 'vertical',
-            padding: '0.75em',
-            'background-color': '#fcfdff',
-            color: '#17202a',
-            'font-family': 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
-            'font-size': '0.9em',
-            'line-height': '1.5',
-            'white-space': 'pre',
-            'tab-size': '2'
-        }}/>
+      <textarea ref={textareaRef} value={props.value} onInput={(event) => props.onInput(event.currentTarget.value)} onKeyDown={handleKeyDown} onScroll={syncScroll} placeholder={props.placeholder} rows={props.rows ?? 12} spellcheck={false}/>
     </div>);
 }
+/** A field's label, with its placeholder as a hint. */
+function FieldLabel(props) {
+    const hint = () => 'placeholder' in props.field ? props.field.placeholder : undefined;
+    return (<span class="sim-field-label">
+      {props.field.label}
+      {hint() && <span class="sim-field-hint">{hint()}</span>}
+    </span>);
+}
 function renderTextArea(field, fieldStore, setFieldStore) {
     const isCodeEditor = field.type === 'code';
     return (<div class="sim-field sim-field-wide">
       <label>
-        {field.label}:{' '}
-        {'placeholder' in field && field.placeholder && (<span class="sim-muted">({field.placeholder})</span>)}
+        <FieldLabel field={field}/>
         {isCodeEditor ? (<CodeEditor value={fieldStore[field.key] ?? ''} onInput={(value) => setFieldStore(field.key, value)} placeholder={'placeholder' in field ? field.placeholder : undefined} rows={'rows' in field && field.rows ? field.rows : 12}/>) : (<textarea value={fieldStore[field.key] ?? ''} onInput={(e) => setFieldStore(field.key, e.currentTarget.value)} placeholder={'placeholder' in field ? field.placeholder : undefined} rows={'rows' in field && field.rows ? field.rows : 4} spellcheck={field.type === 'textarea' ? field.spellcheck : false}/>)}
       </label>
     </div>);
@@ -152,7 +127,7 @@ function RenderField(props) {
         <Match when={props.field.type === 'number' && props.field}>
           {(f) => (<div class="sim-field">
               <label>
-                {f().label}:{' '}
+                <span class="sim-field-label">{f().label}</span>
                 <input type="number" value={props.fieldStore[props.field.key]} onInput={(e) => {
                 // An empty or partial number is not a value yet: wait for the next keystroke.
                 const n = e.currentTarget.valueAsNumber;
@@ -166,8 +141,7 @@ function RenderField(props) {
         <Match when={props.field.type === 'text' && props.field && !('multiline' in props.field && props.field.multiline)}>
           <div class="sim-field sim-field-wide">
             <label>
-              {props.field.label}:{' '}
-              {'placeholder' in props.field && props.field.placeholder && (<span class="sim-muted">({props.field.placeholder})</span>)}
+              <FieldLabel field={props.field}/>
               <input type="text" value={props.fieldStore[props.field.key] ?? ''} onInput={(e) => props.setFieldStore(props.field.key, e.currentTarget.value)} placeholder={'placeholder' in props.field ? props.field.placeholder : undefined} pattern={'pattern' in props.field ? props.field.pattern : undefined} spellcheck={false}/>
             </label>
           </div>
@@ -176,12 +150,12 @@ function RenderField(props) {
         <Match when={props.field.type === 'code' || props.field.type === 'textarea' || (props.field.type === 'text' && 'multiline' in props.field && props.field.multiline)}>
           {renderTextArea(props.field, props.fieldStore, props.setFieldStore)}
         </Match>
-        
+
         <Match when={props.field.type === 'boolean' && props.field}>
-          {(f) => (<div class="sim-field">
+          {(f) => (<div class="sim-field sim-field-check">
               <label>
                 <input type="checkbox" checked={props.fieldStore[props.field.key]} onInput={(e) => props.setFieldStore(props.field.key, e.currentTarget.checked)}/>
-                {' '}{props.field.label}
+                {f().label}
               </label>
             </div>)}
         </Match>
@@ -189,7 +163,7 @@ function RenderField(props) {
         <Match when={props.field.type === 'select' && props.field}>
           {(f) => (<div class="sim-field">
               <label>
-                {props.field.label}:{' '}
+                <span class="sim-field-label">{f().label}</span>
                 <select value={props.fieldStore[props.field.key]} onInput={(e) => props.setFieldStore(props.field.key, typeof props.field.defaultValue === 'number'
                 ? parseFloat(e.currentTarget.value)
                 : e.currentTarget.value)}>

package/dist/components/Icon.jsx

@@ -0,0 +1,54 @@
+const PATHS = {
+    first: () => <><path d="M18 19 9 12l9-7z"/><path d="M6 5v14"/></>,
+    last: () => <><path d="m6 5 9 7-9 7z"/><path d="M18 5v14"/></>,
+    previous: () => <path d="m15 18-6-6 6-6"/>,
+    next: () => <path d="m9 18 6-6-6-6"/>,
+    play: () => <path d="M7 4.5v15l12-7.5z"/>,
+    pause: () => <><path d="M8 5v14"/><path d="M16 5v14"/></>,
+    link: () => <><path d="M10 13.5a4.5 4.5 0 0 0 6.4.4l2.8-2.8a4.5 4.5 0 0 0-6.4-6.4l-1.3 1.3"/><path d="M14 10.5a4.5 4.5 0 0 0-6.4-.4l-2.8 2.8a4.5 4.5 0 0 0 6.4 6.4l1.3-1.3"/></>,
+    sun: () => <><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4"/></>,
+    moon: () => <path d="M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a6.8 6.8 0 0 0 10.7 10.7z"/>,
+    grid: () => <><rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/></>,
+    branch: () => <><circle cx="6" cy="5.5" r="2"/><circle cx="6" cy="18.5" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 7.5v9"/><path d="M18 10c0 4-6 3.5-11 7"/></>,
+    close: () => <path d="M6 6l12 12M18 6 6 18"/>,
+    trash: () => <><path d="M4.5 7h15"/><path d="M9.5 7V4.8h5V7"/><path d="M6.5 7l.9 12.2h9.2L17.5 7"/></>,
+    download: () => <><path d="M12 4v11"/><path d="m7.5 10.5 4.5 4.5 4.5-4.5"/><path d="M5 19.5h14"/></>,
+    reset: () => <><path d="M4 12a8 8 0 1 0 2.5-5.8L4 8.5"/><path d="M4 4v4.5h4.5"/></>,
+    keyboard: () => <><rect x="2.5" y="6" width="19" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M8 14h8"/></>,
+    file: () => <><path d="M14 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8z"/><path d="M14 3.5V8h4.5"/></>,
+    sliders: () => <><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></>,
+    bookmark: () => <path d="M7 3.5h10a1 1 0 0 1 1 1v16l-6-4-6 4v-16a1 1 0 0 1 1-1z"/>,
+    graph: () => <><circle cx="12" cy="5" r="2.2"/><circle cx="5.5" cy="18.5" r="2.2"/><circle cx="18.5" cy="18.5" r="2.2"/><path d="M10.8 6.9 6.7 16.6M13.2 6.9l4.1 9.7"/></>,
+    ring: () => <><circle cx="12" cy="12" r="7.5"/><circle cx="12" cy="4.5" r="2" fill="currentColor"/><circle cx="18.5" cy="15.8" r="1.4"/><circle cx="5.5" cy="15.8" r="1.4"/></>,
+    layers: () => <><path d="m12 3.5 8.5 4.5-8.5 4.5L3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5"/><path d="m3.5 16 8.5 4.5 8.5-4.5"/></>,
+    chevronDown: () => <path d="m6 9 6 6 6-6"/>,
+    chevronRight: () => <path d="m9 6 6 6-6 6"/>,
+    check: () => <path d="m5 12.5 4.5 4.5L19 7.5"/>,
+    alert: () => <><path d="M12 3.5 2.5 20h19z"/><path d="M12 10v4.5M12 17.2h.01"/></>,
+    info: () => <><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5.5M12 7.8h.01"/></>,
+    minus: () => <path d="M5 12h14"/>,
+    plus: () => <path d="M12 5v14M5 12h14"/>,
+    fit: () => <><path d="M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15"/></>,
+    inspect: () => <><path d="M4 6h16M4 12h10M4 18h7"/><circle cx="17.5" cy="16.5" r="2.5"/><path d="m19.3 18.3 1.7 1.7"/></>,
+    stop: () => <rect x="6" y="6" width="12" height="12" rx="2"/>,
+    dock: () => <><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M14 4.5v15"/></>,
+    dockLeft: () => <><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M9 4.5v15"/><path d="M5.5 8h1.5M5.5 11h1.5"/></>,
+    dockRight: () => <><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M15 4.5v15"/><path d="M17 8h1.5M17 11h1.5"/></>,
+    dockBottom: () => <><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M3.5 14h17"/><path d="M7 17h4"/></>,
+    dice: () => <><rect x="4" y="4" width="16" height="16" rx="3.5"/><circle cx="8.6" cy="8.6" r="1.25" fill="currentColor" stroke="none"/><circle cx="15.4" cy="8.6" r="1.25" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.25" fill="currentColor" stroke="none"/><circle cx="8.6" cy="15.4" r="1.25" fill="currentColor" stroke="none"/><circle cx="15.4" cy="15.4" r="1.25" fill="currentColor" stroke="none"/></>,
+    grip: () => <><circle cx="9" cy="6" r="1.2" fill="currentColor"/><circle cx="15" cy="6" r="1.2" fill="currentColor"/><circle cx="9" cy="12" r="1.2" fill="currentColor"/><circle cx="15" cy="12" r="1.2" fill="currentColor"/><circle cx="9" cy="18" r="1.2" fill="currentColor"/><circle cx="15" cy="18" r="1.2" fill="currentColor"/></>,
+};
+export function Icon(props) {
+    return (<svg class={`sim-svg${props.class ? ` ${props.class}` : ''}`} width={props.size ?? 16} height={props.size ?? 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      {PATHS[props.name]()}
+    </svg>);
+}
+/** The Simulant mark: agents on a ring. */
+export function Logo() {
+    return (<svg class="sim-logo" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" opacity="0.35"/>
+      <circle cx="12" cy="4" r="3" fill="var(--sim-accent)"/>
+      <circle cx="18.9" cy="16" r="2.2" fill="currentColor"/>
+      <circle cx="5.1" cy="16" r="2.2" fill="currentColor" opacity="0.6"/>
+    </svg>);
+}

package/dist/components/ModelView.css

@@ -1,7 +1,6 @@
 /**
  * The model view: facts on the left, the declarations as written on the right (tokens and code
- * lines from simulator.css and AlgorithmViewer.css). The blocks are not <article>s: Pico gives an
- * article's <header> negative margins, which pushed the header over the block's border.
+ * lines from simulator.css and AlgorithmViewer.css).
  */
 
 .model-view {
@@ -19,8 +18,9 @@
 
 .mv-intro h2 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   font-family: var(--sim-mono);
+  letter-spacing: -0.01em;
 }
 
 .mv-chips {
@@ -93,8 +93,8 @@
 }
 
 .mv-facts dt {
-  font-size: 0.8rem;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 500;
   color: var(--sim-muted);
   padding-top: 0.12rem;
 }
@@ -248,11 +248,11 @@
 
 .mv-sources {
   position: sticky;
-  top: 0.75rem;
+  top: 0;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
-  max-height: calc(100vh - 1.5rem);
+  max-height: calc(100vh - var(--sim-topbar-h) - var(--sim-statusbar-h) - 2 * var(--sim-gap));
   min-width: 0;
 }
 
@@ -272,8 +272,8 @@
   gap: 0.35rem;
   font-family: var(--sim-mono);
   font-size: 0.75rem;
-  padding: 0.1rem 0.5rem;
-  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+  border-radius: 6px;
   border: 1px solid var(--sim-border);
   background: var(--sim-surface);
   color: var(--sim-text);
@@ -320,7 +320,7 @@
 }
 
 .mv-kind {
-  font-family: var(--pico-font-family, system-ui, sans-serif);
+  font-family: var(--sim-font);
   font-size: 0.68rem;
   font-weight: 600;
   text-transform: uppercase;
@@ -360,7 +360,7 @@
 }
 
 .sim-app button.mv-defs-head .sim-muted {
-  font-family: var(--pico-font-family, system-ui, sans-serif);
+  font-family: var(--sim-font);
   font-size: 0.8rem;
 }
 
@@ -478,7 +478,7 @@
   flex-direction: column;
   align-items: flex-end;
   padding: 0 0.6rem 0 0.4rem;
-  font-family: var(--pico-font-family, system-ui, sans-serif);
+  font-family: var(--sim-font);
   font-size: 0.7rem;
   line-height: 1.35;
   text-align: right;
@@ -505,9 +505,9 @@
 }
 
 .sim-app button.mv-lean-button {
-  font-size: 0.75rem !important;
-  --pico-form-element-spacing-vertical: 0.05rem;
-  --pico-form-element-spacing-horizontal: 0.5rem;
+  height: 24px;
+  font-size: 12px;
+  padding: 0 8px;
 }
 
 .mv-source .algorithm-line.mv-to-lean {

package/dist/components/SettingsLibrary.jsx

@@ -4,6 +4,7 @@
  * shared as a link, and saved settings can be deleted. The current settings are saved by name.
  */
 import { For, Show, createSignal } from "solid-js";
+import { Icon } from "./Icon.jsx";
 /** `N=10 · site=3`; long values are shortened. */
 function summary(settings) {
     if (!settings || typeof settings !== 'object')
@@ -28,15 +29,16 @@ export function SettingsLibrary(props) {
       <div class="sim-entry-text">
         <span class="sim-entry-name">{p.s.name}</span>
         <span class="sim-muted">
+          <Show when={same(p.s.settings, props.current)}><span class="sim-entry-badge">current · </span></Show>
           {summary(p.s.settings)}
           <Show when={p.s.path && p.s.path.length > 1}> · {p.s.path.length - 1} steps</Show>
         </span>
       </div>
       <div class="sim-entry-actions">
-        <button class="sim-ghost" onClick={() => props.onLoad(p.s)}>Load</button>
-        <button class="sim-ghost sim-icon" title="Copy a link to these settings" onClick={() => props.onShare(p.s)}>Share</button>
+        <button class="sim-btn sim-sm" onClick={() => props.onLoad(p.s)}>Load</button>
+        <button class="sim-ghost sim-icon sim-sm" aria-label="Copy a link to these settings" title="Copy a link to these settings" onClick={() => props.onShare(p.s)}><Icon name="link" size={14}/></button>
         <Show when={p.deletable}>
-          <button class="sim-ghost sim-icon sim-danger" title="Delete" onClick={() => props.onDelete(p.s.name)}>Delete</button>
+          <button class="sim-ghost sim-icon sim-sm sim-danger" aria-label={`Delete ${p.s.name}`} title="Delete" onClick={() => props.onDelete(p.s.name)}><Icon name="trash" size={14}/></button>
         </Show>
       </div>
     </li>);
@@ -48,14 +50,14 @@ export function SettingsLibrary(props) {
         </ul>
       </Show>
       <h4>Saved in this browser</h4>
-      <Show when={props.saved.length > 0} fallback={<p class="sim-muted">Nothing saved yet: save the current settings and path below.</p>}>
+      <Show when={props.saved.length > 0} fallback={<p class="sim-library-empty">Nothing saved yet: name the current settings and path below to keep them.</p>}>
         <ul class="sim-entries">
           <For each={props.saved}>{(s) => <Entry s={s} deletable={true}/>}</For>
         </ul>
       </Show>
       <form class="sim-save" onSubmit={save}>
         <input type="text" placeholder="Name the current settings and path" value={name()} onInput={e => setName(e.currentTarget.value)} aria-label="Name of the saved settings"/>
-        <button type="submit" disabled={!name().trim()}>Save</button>
+        <button type="submit" class="sim-primary" disabled={!name().trim()}><Icon name="bookmark" size={14}/> Save</button>
       </form>
     </div>);
 }

package/dist/components/Splitter.jsx

@@ -0,0 +1,28 @@
+/**
+ * A draggable separator between two panels. It reports the size its panel would take,
+ * `value` plus the pointer's travel (reversed by `direction: -1` for a panel on the far side);
+ * the owner clamps it. A double click restores the default size.
+ */
+import { createSignal } from "solid-js";
+export function Splitter(props) {
+    let start;
+    const [dragging, setDragging] = createSignal(false);
+    const at = (e) => props.orientation === 'vertical' ? e.clientX : e.clientY;
+    const cursor = () => props.orientation === 'vertical' ? 'sim-resizing' : 'sim-resizing-rows';
+    const end = () => {
+        if (!start)
+            return;
+        start = undefined;
+        setDragging(false);
+        document.documentElement.classList.remove(cursor());
+        props.onCommit?.();
+    };
+    return (<div class={`sim-splitter sim-splitter-${props.orientation}${dragging() ? ' sim-dragging' : ''}`} role="separator" aria-orientation={props.orientation} aria-label={props.label} title="Drag to resize; double-click to reset" onPointerDown={e => {
+            e.preventDefault();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            start = { at: at(e), value: props.value };
+            setDragging(true);
+            document.documentElement.classList.add(cursor());
+        }} onPointerMove={e => { if (start)
+        props.onChange(start.value + (props.direction ?? 1) * (at(e) - start.at)); }} onPointerUp={end} onPointerCancel={end} onDblClick={() => props.onReset?.()}/>);
+}

package/dist/components/StateInspector.css

@@ -1,46 +1,50 @@
-/* The state inspector: the configuration as expandable trees (tokens in simulator.css). */
+/* The state inspector: the configuration as expandable trees, inside its panel (tokens in simulator.css). */
 
 .state-inspector {
-  margin-top: 0.75rem;
   text-align: left;
   font-family: var(--sim-mono);
-  font-size: 12.5px;
-  background-color: var(--sim-surface);
+  font-size: 12px;
   color: var(--sim-text);
-  border: 1px solid var(--sim-border);
-  border-radius: var(--sim-radius);
-  padding: 0.6rem 0.85rem;
+}
+
+.si-section {
+  padding: 4px 0;
 }
 
 .si-section + .si-section {
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
+  margin-top: 4px;
+  padding-top: 8px;
   border-top: 1px solid var(--sim-border);
 }
 
 .state-inspector h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.8rem;
+  margin: 0 0 4px;
+  padding: 0 4px;
+  min-height: 24px;
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.06em;
   color: var(--sim-muted);
-  font-family: var(--pico-font-family, system-ui, sans-serif);
+  font-family: var(--sim-font);
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .state-inspector h4.si-inline {
   display: inline;
   margin: 0;
+  padding: 0;
 }
 
 .si-row {
   display: flex;
   align-items: baseline;
-  gap: 0.4rem;
-  line-height: 1.55;
+  gap: 6px;
+  padding: 1px 4px;
+  line-height: 1.65;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -48,7 +52,7 @@
 
 .si-clickable {
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: 5px;
 }
 
 .si-clickable:hover {
@@ -59,13 +63,14 @@
   display: inline-block;
   width: 1em;
   flex-shrink: 0;
-  color: var(--sim-muted);
+  color: var(--sim-faint);
+  font-size: 10px;
 }
 
 .si-children {
-  margin-left: 1.1em;
-  border-left: 1px dotted var(--sim-border);
-  padding-left: 0.4em;
+  margin-left: 11px;
+  border-left: 1px solid var(--sim-border);
+  padding-left: 6px;
 }
 
 .si-key {
@@ -74,7 +79,7 @@
 
 .si-key::after {
   content: ':';
-  color: var(--sim-muted);
+  color: var(--sim-faint);
 }
 
 .si-summary,
@@ -91,14 +96,17 @@
 .si-compound { color: var(--sim-text); }
 
 .si-agent {
-  border-radius: 4px;
-  border-left: 3px solid transparent;
-  padding-left: 0.2rem;
+  border-radius: 6px;
+  scroll-margin: 8px;
 }
 
 .si-agent.si-selected {
-  border-left-color: var(--sim-highlight);
-  background-color: var(--sim-highlight-soft);
+  background-color: var(--sim-accent-soft);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sim-accent) 40%, transparent);
+}
+
+.si-agent.si-selected > .si-row:hover {
+  background-color: transparent;
 }
 
 .si-agent.si-hidden .si-agent-name,
@@ -112,11 +120,12 @@
 }
 
 .si-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
   flex-shrink: 0;
   align-self: center;
+  box-shadow: 0 0 0 2px var(--sim-surface);
 }
 
 .si-agent-name {
@@ -128,9 +137,26 @@
 }
 
 .state-inspector .si-clear {
-  font-size: 0.72rem;
-  --pico-form-element-spacing-vertical: 0;
-  --pico-form-element-spacing-horizontal: 0.45rem;
+  height: 22px;
+  font-size: 11.5px;
   text-transform: none;
   letter-spacing: 0;
 }
+
+/* In a wide panel (below the configuration), the world, the agents and the parameters side by side. */
+@container (min-width: 720px) {
+  .state-inspector {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+    align-items: start;
+    gap: 0 16px;
+  }
+
+  .si-section + .si-section {
+    margin-top: 0;
+    padding-top: 4px;
+    padding-left: 16px;
+    border-top: none;
+    border-left: 1px solid var(--sim-border);
+  }
+}

package/dist/components/StateInspector.jsx

@@ -3,7 +3,7 @@
  * component fields, public state, memory) and the parameters, as trees whose nodes expand. What
  * is expanded is kept while stepping through the execution.
  */
-import { For, Show, createSignal } from "solid-js";
+import { For, Show, createEffect, createSignal } from "solid-js";
 import "./StateInspector.css";
 const isTree = (v) => typeof v === 'object' && v !== null && (Array.isArray(v) ? v.length > 0 : Object.keys(v).length > 0);
 /** A short one-line form of a value. */
@@ -52,7 +52,40 @@ export function StateInspector(props) {
     const Fields = (p) => (<For each={Object.entries(p.value)} fallback={<div class="si-empty">nothing</div>}>
       {([k, v]) => <Node name={k} value={v} path={`${p.path}/${k}`} depth={1}/>}
     </For>);
-    return (<div class="state-inspector" data-state={JSON.stringify(props.state)}>
+    // An agent selected elsewhere (on the canvas, in the algorithm) is brought into view, within
+    // the inspector's scrolling panel only: the page itself does not move.
+    let root;
+    createEffect(() => {
+        const id = props.selected;
+        if (id === null || id === undefined)
+            return;
+        queueMicrotask(() => {
+            const row = root?.querySelector(`[data-agent="${id}"]`);
+            const pane = root?.parentElement;
+            if (!row || !pane)
+                return;
+            const r = row.getBoundingClientRect(), v = pane.getBoundingClientRect();
+            if (r.top < v.top)
+                pane.scrollTop += r.top - v.top - 8;
+            else if (r.bottom > v.bottom)
+                pane.scrollTop += Math.min(r.bottom - v.bottom + 8, r.top - v.top - 8);
+        });
+    });
+    /** A row opens its agent and selects it; a second click folds it again. */
+    const clickAgent = (id, path, selected) => {
+        if (selected) {
+            setOpen(o => ({ ...o, [path]: false }));
+            props.onClearSelection?.();
+        }
+        else if (isOpen(path, false)) {
+            toggle(path, false);
+        }
+        else {
+            toggle(path, false);
+            props.onSelect?.(id);
+        }
+    };
+    return (<div class="state-inspector" ref={root} data-state={JSON.stringify(props.state)}>
       <div class="si-section">
         <h4>World</h4>
         <Fields value={props.state.world} path="world"/>
@@ -62,7 +95,7 @@ export function StateInspector(props) {
         <h4>
           Agents
           <Show when={props.selected !== null && props.selected !== undefined}>
-            <button class="si-clear" onClick={() => props.onClearSelection?.()}>Clear selection</button>
+            <button class="sim-ghost sim-sm si-clear" onClick={() => props.onClearSelection?.()}>Clear selection</button>
           </Show>
         </h4>
         <For each={props.state.agents}>
@@ -71,7 +104,7 @@ export function StateInspector(props) {
             const selected = () => props.selected === agent.id;
             const expanded = () => selected() || isOpen(path, false);
             return (<div class={`si-agent si-${agent.status}${selected() ? ' si-selected' : ''}`} data-agent={agent.id}>
-                <div class="si-row si-clickable" onClick={() => toggle(path, false)}>
+                <div class="si-row si-clickable" onClick={() => clickAgent(agent.id, path, selected())}>
                   <span class="si-toggle">{expanded() ? '▾' : '▸'}</span>
                   <span class="si-swatch" style={{ 'background-color': agent.color }}/>
                   <span class="si-agent-name">{agent.name}</span>

package/dist/components/theme.js

@@ -0,0 +1,28 @@
+/**
+ * The page's theme, for what is drawn on canvases: renderers receive these colors (read from the
+ * stylesheet's tokens) so that drawings follow the light or dark theme.
+ */
+import { createSignal, onCleanup } from "solid-js";
+/** Whether the system prefers dark colors, following its changes. */
+export function createSystemDark() {
+    const query = typeof window !== 'undefined' ? window.matchMedia?.('(prefers-color-scheme: dark)') : undefined;
+    const [dark, setDark] = createSignal(!!query?.matches);
+    const onChange = (e) => setDark(e.matches);
+    query?.addEventListener?.('change', onChange);
+    onCleanup(() => query?.removeEventListener?.('change', onChange));
+    return dark;
+}
+/** The drawing colors under `element` (the stylesheet's tokens), for the given theme. */
+export function renderTheme(element, dark) {
+    const css = element ? getComputedStyle(element) : undefined;
+    const token = (name, light, darkValue) => css?.getPropertyValue(name).trim() || (dark ? darkValue : light);
+    return {
+        dark,
+        background: token('--sim-stage', '#ffffff', '#121214'),
+        foreground: token('--sim-text', '#18181b', '#ececee'),
+        muted: token('--sim-stage-muted', '#71717a', '#909098'),
+        line: token('--sim-stage-line', '#a1a1aa', '#4c4c53'),
+        accent: token('--sim-accent', '#5b62c9', '#8b90ec'),
+        danger: token('--sim-failure', '#d1242f', '#f85149'),
+    };
+}