@bramas/simulant-ui 0.1.2 → 0.2.0

package/src/components/ConfigGraphGenerator.tsx

@@ -2,11 +2,13 @@
  * The configuration graph of the current settings: every execution, round by round, up to a
  * depth, generated by the project's graph worker. Shown as a drawing (by default: each node draws
  * its configuration; drag to pan, scroll to zoom, double-click to open a node in the simulator),
- * as a list by depth, or as a tree. The simulator's current path is highlighted.
+ * as a list by depth, or as a tree. The simulator's current path is highlighted. It fills the
+ * space it is given; the selected node is shown, drawn, in a card over the graph.
  */
 import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
 import type { GraphNode, GraphStats, WorkerRequest, WorkerResponse } from '@bramas/simulant-core/lib/config-graph';
-import type { ExecutionLike, ExecutionStatus } from '@bramas/simulant-core/types/project';
+import type { ExecutionLike, ExecutionStatus, RenderTheme } from '@bramas/simulant-core/types/project';
+import { Icon } from './Icon';
 import './ConfigGraphGenerator.css';
 
 export type { ExecutionStatus } from '@bramas/simulant-core/types/project';
@@ -31,10 +33,13 @@ export interface ConfigGraphGeneratorProps<T, ConfigType, ModelType> {
   currentPath?: number[];
   /** Opens a node in the simulator, with the settings the graph was generated for. */
   onOpen?: (settings: T, path: number[]) => void;
+  /** The page's drawing colors: the graph is redrawn when they change. */
+  theme?: RenderTheme;
 }
 
 type View = 'visual' | 'list' | 'tree';
-const HEIGHT = 560;
+/** The preview of the selected node, in CSS pixels. */
+const PREVIEW = 132;
 const EMPTY_STATS: GraphStats = { totalNodes: 0, successNodes: 0, failureNodes: 0, inProgressNodes: 0, maxDepthReached: 0 };
 const STATUS_TEXT = { success: 'success', failure: 'failure', inProgress: 'in progress' } as const;
 const key = (path: number[]) => path.join('-');
@@ -64,10 +69,13 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
   const [pan, setPan] = createSignal({ x: 0, y: 0 });
   const [zoom, setZoom] = createSignal(1);
   const [width, setWidth] = createSignal(1000);
+  const [height, setHeight] = createSignal(560);
 
   let canvas: HTMLCanvasElement | undefined;
   let frame: HTMLDivElement | undefined;
   let worker: Worker | undefined;
+  // Until the user pans or zooms, the graph keeps fitting its frame.
+  let moved = false;
   const radius = props.configRadius || 60;
   const horizontalSpacing = props.horizontalSpacing || 150;
   const verticalSpacing = props.verticalSpacing || 180;
@@ -96,9 +104,9 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     const xs = nodes.map(n => n.x!), ys = nodes.map(n => n.y!);
     const margin = radius + 30;
     const [x0, x1, y0, y1] = [Math.min(...xs) - margin, Math.max(...xs) + margin, Math.min(...ys) - margin, Math.max(...ys) + margin];
-    const z = Math.min(2, width() / (x1 - x0), HEIGHT / (y1 - y0));
+    const z = Math.min(2, width() / (x1 - x0), height() / (y1 - y0));
     setZoom(z);
-    setPan({ x: (width() - (x1 - x0) * z) / 2 - x0 * z, y: (HEIGHT - (y1 - y0) * z) / 2 - y0 * z });
+    setPan({ x: (width() - (x1 - x0) * z) / 2 - x0 * z, y: (height() - (y1 - y0) * z) / 2 - y0 * z });
   };
 
   const generate = () => {
@@ -108,6 +116,7 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     setGraph([]);
     setStats(EMPTY_STATS);
     setGraphSettings({ settings: props.settings });
+    moved = false;
     if (!props.projectName || !props.createWorker) {
       setError('This page has no graph worker.');
       return;
@@ -158,10 +167,17 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     if (s && props.onOpen) props.onOpen(s.settings, node.path);
   };
 
-  // The canvas follows the width of its frame.
+  // The canvas fills its frame.
   onMount(() => {
     if (!frame) return;
-    const observer = new ResizeObserver(entries => setWidth(Math.max(300, Math.floor(entries[0].contentRect.width))));
+    const observer = new ResizeObserver(entries => {
+      const { width: w, height: h } = entries[0].contentRect;
+      // A hidden frame (another view) has no size: keep the last one.
+      if (w <= 0 || h <= 0) return;
+      setWidth(Math.max(300, Math.floor(w)));
+      setHeight(Math.max(240, Math.floor(h)));
+      if (!moved) fit();
+    });
     observer.observe(frame);
     // Scrolling over the graph zooms it instead of scrolling the page: the listener cannot be passive.
     canvas?.addEventListener('wheel', onWheel, { passive: false });
@@ -188,14 +204,16 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     const { x: px, y: py } = pan();
     const z = zoom();
     const w = width();
+    const h = height();
     const highlighted = onPath();
     const sel = selected();
+    const theme = props.theme;
     if (!canvas || view() !== 'visual') return;
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
     const ratio = window.devicePixelRatio || 1;
     canvas.width = w * ratio;
-    canvas.height = HEIGHT * ratio;
+    canvas.height = h * ratio;
     const css = getComputedStyle(canvas);
     const color = (name: string, fallback: string) => css.getPropertyValue(name).trim() || fallback;
     const palette = {
@@ -206,13 +224,13 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     const edge = color('--sim-border', '#ccc'), text = color('--sim-text', '#222'), accent = color('--sim-highlight', '#f5b301');
 
     ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
-    ctx.clearRect(0, 0, w, HEIGHT);
+    ctx.clearRect(0, 0, w, h);
     ctx.save();
     ctx.translate(px, py);
     ctx.scale(z, z);
     const pad = radius * 2;
     const visible = (n: GraphNode) => n.x !== undefined && n.y !== undefined
-      && n.x >= -px / z - pad && n.x <= (w - px) / z + pad && n.y >= -py / z - pad && n.y <= (HEIGHT - py) / z + pad;
+      && n.x >= -px / z - pad && n.x <= (w - px) / z + pad && n.y >= -py / z - pad && n.y <= (h - py) / z + pad;
 
     // Edges, the simulator's path on top.
     for (const pass of [false, true]) {
@@ -253,7 +271,7 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
           ctx.translate(n.x!, n.y!);
           const scale = (radius - 8) / 100;
           ctx.scale(scale, scale);
-          props.drawConfig(ctx, config, session.model, { centerX: 0, centerY: 0, radius: 100, nodeRadius: 10, agentRadius: 5, showNodeLabels: false });
+          props.drawConfig(ctx, config, session.model, { centerX: 0, centerY: 0, radius: 100, nodeRadius: 10, agentRadius: 5, showNodeLabels: false, theme });
           ctx.restore();
         } catch (e) {
           console.error('Error drawing a configuration of the graph:', e);
@@ -282,7 +300,7 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
   const onMove = (e: MouseEvent) => {
     if (drag) {
       const next = { x: e.clientX - drag.x, y: e.clientY - drag.y };
-      if (Math.abs(next.x - pan().x) + Math.abs(next.y - pan().y) > 2) drag.moved = true;
+      if (Math.abs(next.x - pan().x) + Math.abs(next.y - pan().y) > 2) drag.moved = moved = true;
       setPan(next);
     } else if (canvas) {
       canvas.style.cursor = nodeAt(e) ? 'pointer' : 'grab';
@@ -295,6 +313,7 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
   const onWheel = (e: WheelEvent) => {
     if (!canvas) return;
     e.preventDefault();
+    moved = true;
     const rect = canvas.getBoundingClientRect();
     const mx = e.clientX - rect.left, my = e.clientY - rect.top;
     const z = Math.min(Math.max(0.05, zoom() * Math.exp(-e.deltaY * 0.0015)), 5);
@@ -303,8 +322,9 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     setPan({ x: mx - wx * z, y: my - wy * z });
   };
   const zoomBy = (factor: number) => {
+    moved = true;
     const z = Math.min(Math.max(0.05, zoom() * factor), 5);
-    const cx = width() / 2, cy = HEIGHT / 2;
+    const cx = width() / 2, cy = height() / 2;
     const wx = (cx - pan().x) / zoom(), wy = (cy - pan().y) / zoom();
     setZoom(z);
     setPan({ x: cx - wx * z, y: cy - wy * z });
@@ -330,119 +350,157 @@ export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGrap
     );
   };
 
+  /** The selected node's configuration, drawn small. */
+  const Preview = (p: { node: GraphNode }) => {
+    let preview: HTMLCanvasElement | undefined;
+    createEffect(() => {
+      const session = graphExecution();
+      const ctx = preview?.getContext('2d');
+      if (!preview || !ctx || !session || !props.drawConfig) return;
+      const ratio = window.devicePixelRatio || 1;
+      preview.width = preview.height = PREVIEW * ratio;
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+      ctx.clearRect(0, 0, PREVIEW, PREVIEW);
+      try {
+        const config = session.execution.get(p.node.path) as ConfigType;
+        props.drawConfig(ctx, config, session.model, { centerX: PREVIEW / 2, centerY: PREVIEW / 2, radius: PREVIEW * 0.34, nodeRadius: 3, agentRadius: 4, showNodeLabels: false, theme: props.theme });
+      } catch (e) {
+        console.error('Error drawing the selected configuration:', e);
+      }
+    });
+    return <canvas ref={preview} class="cg-preview" style={{ width: `${PREVIEW}px`, height: `${PREVIEW}px` }} />;
+  };
+
   return (
     <div class="config-graph">
-      <div class="cg-controls">
-        <label class="cg-depth">
-          Max Depth (rounds):
-          <input type="number" value={maxDepth()} min="0" max="1000"
-            onInput={e => { const n = e.currentTarget.valueAsNumber; if (Number.isInteger(n) && n >= 0) setMaxDepth(n); }} />
-        </label>
-        <Show when={!isGenerating()} fallback={<button class="sim-ghost" onClick={stop}>Stop</button>}>
-          <button onClick={generate}>Generate Graph</button>
-        </Show>
-        <Show when={graph().length > 0 && !isGenerating()}>
-          <button class="sim-ghost" onClick={exportGraph}>Export JSON</button>
-        </Show>
-        <span class="sim-spacer" style={{ flex: 1 }} />
-        <Show when={graph().length > 0}>
-          <div class="cg-views" role="tablist" aria-label="Graph view">
-            <Show when={props.drawConfig}>
-              <button role="tab" aria-selected={view() === 'visual'} class={view() === 'visual' ? '' : 'sim-ghost'} onClick={() => setView('visual')}>Drawing</button>
-            </Show>
-            <button role="tab" aria-selected={view() === 'list'} class={view() === 'list' ? '' : 'sim-ghost'} onClick={() => setView('list')}>List</button>
-            <button role="tab" aria-selected={view() === 'tree'} class={view() === 'tree' ? '' : 'sim-ghost'} onClick={() => setView('tree')}>Tree</button>
+      <div class="cg-toolbar">
+        <div class="cg-controls">
+          <label class="cg-depth">
+            <span>Max depth</span>
+            <input type="number" value={maxDepth()} min="0" max="1000" aria-label="Max depth (rounds)"
+              onInput={e => { const n = e.currentTarget.valueAsNumber; if (Number.isInteger(n) && n >= 0) setMaxDepth(n); }} />
+            <span class="sim-muted">rounds</span>
+          </label>
+          <Show when={!isGenerating()} fallback={<button class="sim-btn" onClick={stop}><Icon name="stop" size={14} /> Stop</button>}>
+            <button class="sim-primary" onClick={generate}><Icon name="play" size={14} /> Generate graph</button>
+          </Show>
+          <Show when={graph().length > 0 && !isGenerating()}>
+            <button class="sim-ghost" onClick={exportGraph}><Icon name="download" size={14} /> Export JSON</button>
+          </Show>
+          <Show when={stats().totalNodes > 0}>
+            <span class="cg-divider" />
+            <div class="cg-stats" aria-label="Statistics">
+              <span class="sim-chip">{stats().totalNodes} nodes{isGenerating() ? '…' : ''}</span>
+              <span class="sim-chip sim-success">{stats().successNodes} success</span>
+              <span class="sim-chip sim-failure">{stats().failureNodes} failure</span>
+              <span class="sim-chip sim-inProgress">{stats().inProgressNodes} in progress</span>
+              <span class="sim-chip">depth {stats().maxDepthReached}</span>
+            </div>
+          </Show>
+          <span class="sim-spacer" />
+          <Show when={graph().length > 0}>
+            <div class="sim-tabs" role="tablist" aria-label="Graph view">
+              <Show when={props.drawConfig}>
+                <button role="tab" aria-selected={view() === 'visual'} class={view() === 'visual' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => setView('visual')}>Drawing</button>
+              </Show>
+              <button role="tab" aria-selected={view() === 'list'} class={view() === 'list' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => setView('list')}>List</button>
+              <button role="tab" aria-selected={view() === 'tree'} class={view() === 'tree' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => setView('tree')}>Tree</button>
+            </div>
+          </Show>
+        </div>
+        <Show when={stats().failureNodes > 0 || stale()}>
+          <div class="cg-notes">
+            <Show when={stats().failureNodes > 0}><span>The generation stops at the first failure.</span></Show>
+            <Show when={stale()}><span class="cg-stale"><Icon name="alert" size={13} /> Generated for other settings: generate again to follow the current ones.</span></Show>
           </div>
         </Show>
+        <Show when={error()}>
+          <div class="sim-feedback sim-settings-error"><Icon name="alert" /><div>Could not generate the graph: {error()}</div></div>
+        </Show>
       </div>
 
-      <Show when={error()}>
-        <div class="sim-notice sim-error">Could not generate the graph: {error()}</div>
-      </Show>
-
-      <Show when={stats().totalNodes > 0}>
-        <div class="cg-stats" aria-label="Statistics">
-          <span class="sim-chip">{stats().totalNodes} nodes{isGenerating() ? '…' : ''}</span>
-          <span class="sim-chip sim-success">{stats().successNodes} success</span>
-          <span class="sim-chip sim-failure">{stats().failureNodes} failure</span>
-          <span class="sim-chip sim-inProgress">{stats().inProgressNodes} in progress</span>
-          <span class="sim-chip">depth {stats().maxDepthReached}</span>
-          <Show when={stats().failureNodes > 0}>
-            <span class="sim-muted">The generation stops at the first failure.</span>
-          </Show>
-          <Show when={stale()}>
-            <span class="sim-muted">Generated for other settings: generate again to follow the current ones.</span>
-          </Show>
+      <div class="cg-body">
+        <div ref={frame} class="cg-frame" style={{ display: graph().length > 0 && view() === 'visual' ? undefined : 'none' }}>
+          <canvas
+            ref={canvas}
+            class="cg-canvas"
+            style={{ width: `${width()}px`, height: `${height()}px` }}
+            onMouseDown={onDown}
+            onMouseMove={onMove}
+            onMouseUp={onUp}
+            onMouseLeave={() => { drag = null; }}
+            onDblClick={e => { const n = nodeAt(e); if (n) open(n); }}
+          />
+          <div class="cg-zoom">
+            <button class="sim-ghost sim-icon sim-sm" onClick={() => zoomBy(1 / 1.25)} aria-label="Zoom out" title="Zoom out"><Icon name="minus" size={14} /></button>
+            <span class="cg-zoom-value">{Math.round(zoom() * 100)}%</span>
+            <button class="sim-ghost sim-icon sim-sm" onClick={() => zoomBy(1.25)} aria-label="Zoom in" title="Zoom in"><Icon name="plus" size={14} /></button>
+            <span class="cg-zoom-sep" />
+            <button class="sim-ghost sim-sm" onClick={() => { moved = false; fit(); }} title="Show the whole graph"><Icon name="fit" size={14} /> Fit</button>
+          </div>
+          <p class="cg-help">Drag to pan, scroll to zoom. Click a node to select it, double-click to open it in the simulator. The simulator's path is highlighted.</p>
         </div>
-      </Show>
 
-      <Show when={selected()}>
-        {n => (
-          <div class="cg-selection">
-            <span class={`sim-chip sim-${n().status}`}>{STATUS_TEXT[n().status]}</span>
-            <span>path <code>[{n().path.join(', ')}]</code> · round {n().depth} · {n().childrenCount} {n().childrenCount === 1 ? 'child' : 'children'} explored</span>
-            <span class="sim-spacer" style={{ flex: 1 }} />
-            <Show when={props.onOpen}>
-              <button onClick={() => open(n())}>Open in simulator</button>
-            </Show>
-            <button class="sim-ghost sim-icon" onClick={() => setSelected(null)} title="Clear the selection">✕</button>
+        <Show when={graph().length > 0 && view() === 'list'}>
+          <div class="cg-list">
+            <For each={Array.from({ length: stats().maxDepthReached + 1 }, (_, i) => i)}>
+              {depth => {
+                const nodes = () => graph().filter(n => n.depth === depth);
+                return (
+                  <Show when={nodes().length > 0}>
+                    <details open={depth < 3}>
+                      <summary>Round {depth} <span class="sim-muted">({nodes().length} nodes)</span></summary>
+                      <For each={nodes()}>
+                        {n => (
+                          <button class={`cg-list-row cg-${n.status}${onPath().has(key(n.path)) ? ' cg-on-path' : ''}`} onClick={() => setSelected(n)} onDblClick={() => open(n)}>
+                            <code>[{n.path.join(', ')}]</code>
+                            <span>{STATUS_TEXT[n.status]}</span>
+                            <span class="sim-muted">{n.childrenCount} children</span>
+                          </button>
+                        )}
+                      </For>
+                    </details>
+                  </Show>
+                );
+              }}
+            </For>
           </div>
-        )}
-      </Show>
-
-      <div ref={frame} class="cg-frame" style={{ display: graph().length > 0 && view() === 'visual' ? 'block' : 'none' }}>
-        <canvas
-          ref={canvas}
-          class="cg-canvas"
-          style={{ width: `${width()}px`, height: `${HEIGHT}px` }}
-          onMouseDown={onDown}
-          onMouseMove={onMove}
-          onMouseUp={onUp}
-          onMouseLeave={() => { drag = null; }}
-          onDblClick={e => { const n = nodeAt(e); if (n) open(n); }}
-        />
-        <div class="cg-zoom">
-          <button class="sim-ghost sim-icon" onClick={() => zoomBy(1 / 1.25)} title="Zoom out">−</button>
-          <span class="sim-muted">{Math.round(zoom() * 100)}%</span>
-          <button class="sim-ghost sim-icon" onClick={() => zoomBy(1.25)} title="Zoom in">+</button>
-          <button class="sim-ghost" onClick={fit} title="Show the whole graph">Fit</button>
-        </div>
-        <p class="sim-muted cg-help">Drag to pan, scroll to zoom. Click a node to select it, double-click to open it in the simulator. The simulator's path is highlighted.</p>
-      </div>
+        </Show>
 
-      <Show when={graph().length > 0 && view() === 'list'}>
-        <div class="cg-list">
-          <For each={Array.from({ length: stats().maxDepthReached + 1 }, (_, i) => i)}>
-            {depth => {
-              const nodes = () => graph().filter(n => n.depth === depth);
-              return (
-                <Show when={nodes().length > 0}>
-                  <details open={depth < 3}>
-                    <summary>Round {depth} <span class="sim-muted">({nodes().length} nodes)</span></summary>
-                    <For each={nodes()}>
-                      {n => (
-                        <button class={`cg-list-row cg-${n.status}${onPath().has(key(n.path)) ? ' cg-on-path' : ''}`} onClick={() => setSelected(n)} onDblClick={() => open(n)}>
-                          <code>[{n.path.join(', ')}]</code>
-                          <span>{STATUS_TEXT[n.status]}</span>
-                          <span class="sim-muted">{n.childrenCount} children</span>
-                        </button>
-                      )}
-                    </For>
-                  </details>
-                </Show>
-              );
-            }}
-          </For>
-        </div>
-      </Show>
+        <Show when={graph().length > 0 && view() === 'tree'}>
+          <div class="cg-tree"><Tree path={[0]} /></div>
+        </Show>
 
-      <Show when={graph().length > 0 && view() === 'tree'}>
-        <div class="cg-tree"><Tree path={[0]} /></div>
-      </Show>
+        <Show when={graph().length === 0 && !isGenerating() && !error()}>
+          <div class="cg-empty">
+            <Icon name="graph" size={32} />
+            <strong>No graph yet</strong>
+            <span>Generate the graph to see every execution of these settings up to the depth, with the verdict of each configuration.</span>
+            <button class="sim-primary" onClick={generate}><Icon name="play" size={14} /> Generate up to depth {maxDepth()}</button>
+          </div>
+        </Show>
 
-      <Show when={graph().length === 0 && !isGenerating() && !error()}>
-        <p class="sim-muted">Generate the graph to see every execution of these settings up to the depth, with the verdict of each configuration.</p>
-      </Show>
+        <Show when={selected()}>
+          {n => (
+            <div class="cg-selection" role="region" aria-label="Selected configuration">
+              <div class="cg-selection-head">
+                <span class={`sim-chip sim-${n().status}`}>{STATUS_TEXT[n().status]}</span>
+                <span class="sim-spacer" />
+                <button class="sim-ghost sim-icon sim-sm" onClick={() => setSelected(null)} aria-label="Clear the selection" title="Clear the selection"><Icon name="close" size={14} /></button>
+              </div>
+              <Show when={props.drawConfig}><Preview node={n()} /></Show>
+              <dl class="cg-selection-facts">
+                <dt>Path</dt><dd><code>[{n().path.join(', ')}]</code></dd>
+                <dt>Round</dt><dd>{n().depth}</dd>
+                <dt>Explored</dt><dd>{n().childrenCount} {n().childrenCount === 1 ? 'child' : 'children'}</dd>
+              </dl>
+              <Show when={props.onOpen}>
+                <button class="sim-primary sim-sm" onClick={() => open(n())}>Open in simulator</button>
+              </Show>
+            </div>
+          )}
+        </Show>
+      </div>
     </div>
   );
 }

package/src/components/GenericEditor.tsx

@@ -187,32 +187,8 @@ 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'
-        }}
-      >
+    <div class="sim-code-editor">
+      <div ref={gutterRef} class="sim-code-gutter" aria-hidden="true">
         <For each={lineNumbers()}>
           {(lineNumber) => <div>{lineNumber}</div>}
         </For>
@@ -226,21 +202,6 @@ function CodeEditor(props: {
         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'
-        }}
       />
     </div>
   );
@@ -248,6 +209,17 @@ function CodeEditor(props: {
 
 type SetField = (key: string, value: any) => void;
 
+/** A field's label, with its placeholder as a hint. */
+function FieldLabel(props: { field: EditorField }) {
+  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: Extract<EditorField, { type: 'text' | 'textarea' | 'code' }>,
   fieldStore: { [key: string]: any; },
@@ -258,10 +230,7 @@ function renderTextArea(
   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] ?? ''}
@@ -291,7 +260,7 @@ function RenderField(props: {field: EditorField, fieldStore: {[key: string]: any
           {(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]}
@@ -312,13 +281,10 @@ function RenderField(props: {field: EditorField, fieldStore: {[key: string]: any
         <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] ?? ''} 
+                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}
@@ -335,17 +301,17 @@ function RenderField(props: {field: EditorField, fieldStore: {[key: string]: any
             props.setFieldStore
           )}
         </Match>
-        
+
         <Match when={props.field.type === 'boolean' && props.field}>
           {(f) => (
-            <div class="sim-field">
+            <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>
           )}
@@ -355,11 +321,11 @@ function RenderField(props: {field: EditorField, fieldStore: {[key: string]: any
           {(f) => (
             <div class="sim-field">
               <label>
-                {props.field.label}:{' '}
-                <select 
-                  value={props.fieldStore[props.field.key]} 
+                <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' 
+                    typeof props.field.defaultValue === 'number'
                       ? parseFloat(e.currentTarget.value)
                       : e.currentTarget.value
                   )}