@bramas/simulant-ui 0.1.1 → 0.2.0

package/src/components/Icon.tsx

@@ -0,0 +1,76 @@
+/** The interface's icons: inline strokes on a 24-unit grid, in the current text color. */
+import type { JSX } from 'solid-js';
+
+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" /></>,
+} satisfies Record<string, () => JSX.Element>;
+
+export type IconName = keyof typeof PATHS;
+
+export function Icon(props: { name: IconName; size?: number; class?: string }) {
+  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/src/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/src/components/SettingsLibrary.tsx

@@ -5,6 +5,7 @@
  */
 import { For, Show, createSignal } from 'solid-js';
 import type { PredefinedSetting } from '@bramas/simulant-core/types/project';
+import { Icon } from './Icon';
 
 export type SavedSetting = { name: string; settings: any; path?: number[] };
 
@@ -47,15 +48,16 @@ export function SettingsLibrary(props: SettingsLibraryProps) {
       <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>
@@ -70,14 +72,14 @@ export function SettingsLibrary(props: SettingsLibraryProps) {
         </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/src/components/Splitter.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 interface SplitterProps {
+  /** `vertical`: a bar between columns, dragged sideways; `horizontal`: between rows. */
+  orientation: 'vertical' | 'horizontal';
+  /** The size of the panel being resized when the drag starts. */
+  value: number;
+  direction?: 1 | -1;
+  onChange: (size: number) => void;
+  /** Called when the drag ends (to remember the size). */
+  onCommit?: () => void;
+  onReset?: () => void;
+  label: string;
+}
+
+export function Splitter(props: SplitterProps) {
+  let start: { at: number; value: number } | undefined;
+  const [dragging, setDragging] = createSignal(false);
+  const at = (e: PointerEvent) => 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/src/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/src/components/StateInspector.tsx

@@ -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, type JSX } from 'solid-js';
+import { For, Show, createEffect, createSignal, type JSX } from 'solid-js';
 import type { InspectedState } from '@bramas/simulant-core/types/project';
 import './StateInspector.css';
 
@@ -11,6 +11,8 @@ export interface StateInspectorProps {
   state: InspectedState;
   /** The agent selected on the canvas: shown expanded and highlighted. */
   selected?: number | null;
+  /** Selects an agent (opening its row). */
+  onSelect?: (id: number) => void;
   onClearSelection?: () => void;
 }
 
@@ -70,8 +72,37 @@ export function StateInspector(props: StateInspectorProps) {
     </For>
   );
 
+  // 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: HTMLDivElement | undefined;
+  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: number, path: string, selected: boolean) => {
+    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" data-state={JSON.stringify(props.state)}>
+    <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" />
@@ -81,7 +112,7 @@ export function StateInspector(props: StateInspectorProps) {
         <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}>
@@ -91,7 +122,7 @@ export function StateInspector(props: StateInspectorProps) {
             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/src/components/theme.ts

@@ -0,0 +1,33 @@
+/**
+ * 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';
+import type { RenderTheme } from '@bramas/simulant-core/types/project';
+
+export type { RenderTheme } from '@bramas/simulant-core/types/project';
+
+/** 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: MediaQueryListEvent) => 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: Element | undefined, dark: boolean): RenderTheme {
+  const css = element ? getComputedStyle(element) : undefined;
+  const token = (name: string, light: string, darkValue: string) => 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'),
+  };
+}