From 62bf9abed336c4638bc5a2f760e74ec1b2f942e1 Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Mon, 19 Jan 2026 09:52:49 -0800
Subject: [PATCH 01/35] Add retrig option for LFOs

---
 packages/core/controls.mjs         | 4 +++-
 packages/superdough/modulators.mjs | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 834d963c3..a5a1c0a12 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -3046,6 +3046,7 @@ registerSubControls('lfo', [
   ['skew', 'sk'],
   ['curve', 'cu'],
   ['sync', 's'],
+  ['retrig', 'rt'],
   ['fxi'],
 ]);
 registerSubControls('env', [
@@ -3132,13 +3133,14 @@ Pattern.prototype.modulate = function (type, config, idPat) {
  * @param {string | Pattern} [config.control] Node to modulate. Aliases: c
  * @param {string | Pattern} [config.subControl] Sub-control name to append to the control key. Aliases: sc
  * @param {number | Pattern} [config.rate] Modulation rate. Aliases: r
+ * @param {number | Pattern} [config.sync] Tempo-synced modulation rate. Aliases: s
  * @param {number | Pattern} [config.depth] Relative modulation depth. Aliases: dep, dr
  * @param {number | Pattern} [config.depthabs] Absolute modulation depth. Aliases: da
  * @param {number | Pattern} [config.dcoffset] DC offset / bias for the waveform. Aliases: dc
  * @param {number | Pattern} [config.shape] Shape index. Aliases: sh
  * @param {number | Pattern} [config.skew] Skew amount. Aliases: sk
  * @param {number | Pattern} [config.curve] Exponential curve amount. Aliases: cu
- * @param {number | Pattern} [config.sync] Tempo-synced modulation rate. Aliases: s
+ * @param {number | Pattern} [config.retrig] If > 0.5, the LFO will retrigger on each event. Aliases: rt
  * @param {number | Pattern} [config.fxi] FX index to target
  * @param {string | Pattern} id ID to use for this modulator
  * @returns Pattern
diff --git a/packages/superdough/modulators.mjs b/packages/superdough/modulators.mjs
index 05674baa0..76fc4c7fd 100644
--- a/packages/superdough/modulators.mjs
+++ b/packages/superdough/modulators.mjs
@@ -98,6 +98,7 @@ export const connectLFO = (id, params, nodeTracker) => {
     fxi = 'main',
     depth = 1,
     depthabs,
+    retrig = 0,
     ...filteredParams
   } = params;
   const { targetParams, paramName } = getTargetParamsForControl(control, nodeTracker[fxi], subControl);
@@ -109,7 +110,7 @@ export const connectLFO = (id, params, nodeTracker) => {
   const modParams = {
     ...filteredParams,
     frequency: sync !== undefined ? sync * cps : rate,
-    time: cycle / cps,
+    time: retrig > 0.5 ? 0 : cycle / cps,
     depth: depthValue,
     min,
     max,

From 38b7bcb3d288562424e797f0ccc41111fb5a3773 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Mon, 19 Jan 2026 23:00:14 +0100
Subject: [PATCH 02/35] style tweaks

---
 .../repl/components/button/action-button.jsx  |  9 +--
 .../components/incrementor/Incrementor.jsx    |  2 +-
 .../components/panel/AudioDeviceSelector.jsx  |  4 +-
 .../panel/AudioEngineTargetSelector.jsx       |  6 +-
 .../src/repl/components/panel/ExportTab.jsx   |  7 +--
 website/src/repl/components/panel/Forms.jsx   |  2 +-
 .../src/repl/components/panel/PatternsTab.jsx |  2 +-
 .../src/repl/components/panel/Reference.jsx   |  2 +-
 .../src/repl/components/panel/SelectInput.jsx | 20 -------
 .../src/repl/components/panel/SettingsTab.jsx | 57 +++++++++++++++----
 .../src/repl/components/panel/SoundsTab.jsx   |  2 +-
 .../src/repl/components/textbox/Textbox.jsx   | 14 -----
 12 files changed, 62 insertions(+), 65 deletions(-)
 delete mode 100644 website/src/repl/components/panel/SelectInput.jsx
 delete mode 100644 website/src/repl/components/textbox/Textbox.jsx

diff --git a/website/src/repl/components/button/action-button.jsx b/website/src/repl/components/button/action-button.jsx
index de674b696..846d36c7e 100644
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@@ -13,16 +13,13 @@ export function SpecialActionButton(props) {
   const { className, ...buttonProps } = props;
 
   return (
-    <ActionButton
-      {...buttonProps}
-      className={cx('bg-background p-2 max-w-[300px] rounded-md hover:opacity-50', className)}
-    />
+    <ActionButton {...buttonProps} className={cx('bg-background p-2 max-w-[300px] hover:opacity-50', className)} />
   );
 }
 
 export function ActionInput({ label, className, ...props }) {
   return (
-    <label className={cx('inline-flex items-center cursor-pointer', className)}>
+    <label className={cx('inline-flex items-center cursor-pointer ', className)}>
       <input {...props} className="sr-only peer" />
 
       <span className="inline-flex items-center peer-hover:opacity-50">{label}</span>
@@ -35,7 +32,7 @@ export function SpecialActionInput({ className, ...props }) {
     <ActionInput
       {...props}
       className={className}
-      label={<span className="bg-background p-2 max-w-[300px] rounded-md">{props.label}</span>}
+      label={<span className="bg-background p-2 max-w-[300px]">{props.label}</span>}
     />
   );
 }
diff --git a/website/src/repl/components/incrementor/Incrementor.jsx b/website/src/repl/components/incrementor/Incrementor.jsx
index 0645580da..8fdfd4921 100644
--- a/website/src/repl/components/incrementor/Incrementor.jsx
+++ b/website/src/repl/components/incrementor/Incrementor.jsx
@@ -1,4 +1,4 @@
-import { Textbox } from '../textbox/Textbox';
+import { Textbox } from '@src/repl/components/panel/SettingsTab';
 import cx from '@src/cx.mjs';
 
 function IncButton({ children, className, ...buttonProps }) {
diff --git a/website/src/repl/components/panel/AudioDeviceSelector.jsx b/website/src/repl/components/panel/AudioDeviceSelector.jsx
index 288ffc0a5..1e41ed660 100644
--- a/website/src/repl/components/panel/AudioDeviceSelector.jsx
+++ b/website/src/repl/components/panel/AudioDeviceSelector.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { SelectInput } from './SelectInput';
+import { SelectInputDuplicate } from '@src/repl/components/panel/SettingsTab';
 import { getAudioDevices } from '@strudel/webaudio';
 
 const initdevices = new Map();
@@ -29,7 +29,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange, isDisabled }) {
     options.set(deviceName, deviceName);
   });
   return (
-    <SelectInput
+    <SelectInputDuplicate
       isDisabled={isDisabled}
       options={options}
       onClick={onClick}
diff --git a/website/src/repl/components/panel/AudioEngineTargetSelector.jsx b/website/src/repl/components/panel/AudioEngineTargetSelector.jsx
index ecf5d8175..b428a59be 100644
--- a/website/src/repl/components/panel/AudioEngineTargetSelector.jsx
+++ b/website/src/repl/components/panel/AudioEngineTargetSelector.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { audioEngineTargets } from '../../../settings.mjs';
-import { SelectInput } from './SelectInput';
+import { SelectInputDuplicate } from '@src/repl/components/panel/SettingsTab';
 
 // Allows the user to select an audio interface for Strudel to play through
 export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
@@ -12,8 +12,8 @@ export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
     [audioEngineTargets.osc, audioEngineTargets.osc],
   ]);
   return (
-    <div className=" flex flex-col gap-1">
-      <SelectInput isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />
+    <div className="flex flex-col gap-1">
+      <SelectInputDuplicate isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />
       {target === audioEngineTargets.osc && (
         <div>
           <p className="text-sm italic">
diff --git a/website/src/repl/components/panel/ExportTab.jsx b/website/src/repl/components/panel/ExportTab.jsx
index cbb132e44..071d8d695 100644
--- a/website/src/repl/components/panel/ExportTab.jsx
+++ b/website/src/repl/components/panel/ExportTab.jsx
@@ -1,10 +1,7 @@
-import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import cx from '@src/cx.mjs';
-import NumberInput from '@src/repl/components/NumberInput';
-import { useEffect, useState } from 'react';
-import { Textbox } from '../textbox/Textbox';
+import { useState } from 'react';
+import { Textbox } from '@src/repl/components/panel/SettingsTab';
 import { getAudioContext } from '@strudel/webaudio';
-import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index 4cb73a469..79c17e453 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -13,7 +13,7 @@ export function ButtonGroup({ value, onChange, items }) {
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',
-            value === key ? 'border-foreground' : 'border-transparent',
+            value === key ? 'border-foreground' : 'border-background',
           )}
         >
           {label.toLowerCase()}
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index c72ebaa30..d0e54e34e 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -18,7 +18,7 @@ import { Pagination } from '../pagination/Pagination.jsx';
 import { useState } from 'react';
 import { useDebounce } from '../usedebounce.jsx';
 import cx from '@src/cx.mjs';
-import { Textbox } from '../textbox/Textbox.jsx';
+import { Textbox } from '@src/repl/components/panel/SettingsTab.jsx';
 
 export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index f8132066a..40712bfa9 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -1,7 +1,7 @@
 import { memo, useEffect, useMemo, useState, Fragment } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
-import { Textbox } from '../textbox/Textbox';
+import { Textbox } from '@src/repl/components/panel/SettingsTab';
 
 const isValid = ({ name, description }) => name && !name.startsWith('_') && !!description;
 
diff --git a/website/src/repl/components/panel/SelectInput.jsx b/website/src/repl/components/panel/SelectInput.jsx
deleted file mode 100644
index b47809671..000000000
--- a/website/src/repl/components/panel/SelectInput.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void, isDisabled: boolean
-export function SelectInput({ value, options, onChange, onClick, isDisabled }) {
-  return (
-    <select
-      disabled={isDisabled}
-      onClick={onClick}
-      className="p-2 bg-background rounded-md text-foreground  border-foreground"
-      value={value ?? ''}
-      onChange={(e) => onChange(e.target.value)}
-    >
-      {options.size == 0 && <option value={value}>{`${value ?? 'select an option'}`}</option>}
-      {Array.from(options.keys()).map((id) => (
-        <option key={id} className="bg-background" value={id}>
-          {options.get(id)}
-        </option>
-      ))}
-    </select>
-  );
-}
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 7f488c544..3baeec225 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -1,6 +1,5 @@
 import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs';
 import { themes } from '@strudel/codemirror';
-import { Textbox } from '../textbox/Textbox.jsx';
 import { confirmAndReloadPage, isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
@@ -10,22 +9,60 @@ import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@
 import { SpecialActionButton } from '../button/action-button.jsx';
 import { ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
 
+function cx(...classes) {
+  // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}
+
+const inputClass =
+  'bg-background text-sm border rounded-0 text-foreground border-foreground placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
+
+export function Textbox({ onChange, className, ...inputProps }) {
+  return (
+    <input className={cx('p-2', inputClass, className)} onChange={(e) => onChange(e.target.value)} {...inputProps} />
+  );
+}
+
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
     <label>
-      <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
+      <input
+        className={cx(
+          'bg-background text-sm border  border-foreground focus:outline-none focus:ring-0 focus:border-foreground',
+        )}
+        disabled={disabled}
+        type="checkbox"
+        checked={value}
+        onChange={onChange}
+      />
       {' ' + label}
     </label>
   );
 }
 
-function SelectInput({ value, options, onChange }) {
+//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void, isDisabled: boolean
+export function SelectInputDuplicate({ value, options, onChange, onClick, isDisabled }) {
   return (
     <select
-      className="p-2 bg-background rounded-md text-foreground  border-foreground"
-      value={value}
+      disabled={isDisabled}
+      onClick={onClick}
+      className={cx('p-2', inputClass)}
+      value={value ?? ''}
       onChange={(e) => onChange(e.target.value)}
     >
+      {options.size == 0 && <option value={value}>{`${value ?? 'select an option'}`}</option>}
+      {Array.from(options.keys()).map((id) => (
+        <option key={id} className="bg-background" value={id}>
+          {options.get(id)}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function SelectInput({ value, options, onChange }) {
+  return (
+    <select className={cx('p-2', inputClass)} value={value} onChange={(e) => onChange(e.target.value)}>
       {Object.entries(options).map(([k, label]) => (
         <option key={k} className="bg-background" value={k}>
           {label}
@@ -37,9 +74,9 @@ function SelectInput({ value, options, onChange }) {
 
 function NumberSlider({ value, onChange, step = 1, ...rest }) {
   return (
-    <div className="flex space-x-2 gap-1">
+    <div className="flex space-x-2 gap-1 overflow-hidden">
       <input
-        className="p-2 grow"
+        className="p-2 grow accent-foreground"
         type="range"
         value={value}
         step={step}
@@ -50,7 +87,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
         type="number"
         value={value}
         step={step}
-        className="w-16 bg-background rounded-md"
+        className={cx('w-16', inputClass)}
         onChange={(e) => onChange(Number(e.target.value))}
       />
     </div>
@@ -60,7 +97,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
 function FormItem({ label, children, sublabel }) {
   return (
     <div className="grid gap-2">
-      <label>{label}</label>
+      <label className="text-sm">{label}</label>
       {children}
     </div>
   );
@@ -178,7 +215,7 @@ export function SettingsTab({ started }) {
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 font-sans">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <FormItem label="Font Family">
           <SelectInput
             options={fontFamilyOptions}
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 5a7df5ba9..406442cd2 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -5,7 +5,7 @@ import { useMemo, useRef, useState } from 'react';
 import { settingsMap, soundFilterType, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
-import { Textbox } from '../textbox/Textbox.jsx';
+import { Textbox } from '@src/repl/components/panel/SettingsTab.jsx';
 import { ActionButton } from '../button/action-button.jsx';
 import { confirmDialog } from '@src/repl/util.mjs';
 import { clearIDB, userSamplesDBConfig } from '@src/repl/idbutils.mjs';
diff --git a/website/src/repl/components/textbox/Textbox.jsx b/website/src/repl/components/textbox/Textbox.jsx
deleted file mode 100644
index 6c3bc3283..000000000
--- a/website/src/repl/components/textbox/Textbox.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import cx from '@src/cx.mjs';
-
-export function Textbox({ onChange, className, ...inputProps }) {
-  return (
-    <input
-      className={cx(
-        'p-2 bg-background rounded-md  border-foreground text-foreground placeholder-foreground',
-        className,
-      )}
-      onChange={(e) => onChange(e.target.value)}
-      {...inputProps}
-    />
-  );
-}

From de83805fd9570b3d0cfdec407220d4dacb53ae81 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 00:06:44 +0100
Subject: [PATCH 03/35] add muted theme color + use it for inputs and tags

---
 packages/codemirror/themes/CutiePi.mjs        |  3 ++-
 packages/codemirror/themes/algoboy.mjs        |  1 +
 packages/codemirror/themes/androidstudio.mjs  |  2 ++
 packages/codemirror/themes/archBtw.mjs        |  1 +
 packages/codemirror/themes/atomone.mjs        |  2 ++
 packages/codemirror/themes/aura.mjs           |  2 ++
 packages/codemirror/themes/bbedit.mjs         |  2 ++
 packages/codemirror/themes/blackscreen.mjs    |  3 ++-
 packages/codemirror/themes/bluescreen.mjs     |  3 ++-
 .../codemirror/themes/bluescreenlight.mjs     |  1 +
 packages/codemirror/themes/darcula.mjs        |  2 ++
 packages/codemirror/themes/dracula.mjs        |  2 ++
 packages/codemirror/themes/duotoneDark.mjs    |  2 ++
 packages/codemirror/themes/eclipse.mjs        |  2 ++
 packages/codemirror/themes/fruitDaw.mjs       |  1 +
 packages/codemirror/themes/githubDark.mjs     |  2 ++
 packages/codemirror/themes/githubLight.mjs    |  2 ++
 packages/codemirror/themes/green-text.mjs     |  1 +
 packages/codemirror/themes/gruvboxDark.mjs    |  2 ++
 packages/codemirror/themes/gruvboxLight.mjs   |  2 ++
 packages/codemirror/themes/materialDark.mjs   |  2 ++
 packages/codemirror/themes/materialLight.mjs  |  4 +++-
 packages/codemirror/themes/monokai.mjs        |  2 ++
 packages/codemirror/themes/noctisLilac.mjs    |  2 ++
 packages/codemirror/themes/nord.mjs           |  2 ++
 packages/codemirror/themes/red-text.mjs       |  1 +
 packages/codemirror/themes/solarizedDark.mjs  |  2 ++
 packages/codemirror/themes/solarizedLight.mjs |  2 ++
 packages/codemirror/themes/sonic-pink.mjs     |  1 +
 packages/codemirror/themes/strudel-theme.mjs  |  1 +
 packages/codemirror/themes/sublime.mjs        |  2 ++
 packages/codemirror/themes/teletext.mjs       |  3 ++-
 .../codemirror/themes/tokioNightStorm.mjs     |  6 ++++--
 packages/codemirror/themes/tokyoNight.mjs     |  6 ++++--
 packages/codemirror/themes/tokyoNightDay.mjs  |  2 ++
 packages/codemirror/themes/vscodeDark.mjs     |  2 ++
 packages/codemirror/themes/vscodeLight.mjs    |  2 ++
 packages/codemirror/themes/whitescreen.mjs    |  3 ++-
 packages/codemirror/themes/xcodeLight.mjs     |  2 ++
 website/src/repl/Repl.css                     | 12 ------------
 website/src/repl/components/panel/Forms.jsx   |  6 +++---
 .../src/repl/components/panel/Reference.jsx   | 10 +++++-----
 .../src/repl/components/panel/SettingsTab.jsx |  4 ++--
 website/tailwind.config.cjs                   | 19 ++++++++++---------
 44 files changed, 95 insertions(+), 41 deletions(-)

diff --git a/packages/codemirror/themes/CutiePi.mjs b/packages/codemirror/themes/CutiePi.mjs
index 64b38eaa7..4d0e768c0 100644
--- a/packages/codemirror/themes/CutiePi.mjs
+++ b/packages/codemirror/themes/CutiePi.mjs
@@ -17,10 +17,11 @@ export const settings = {
   background: 'white',
   lineBackground: 'transparent',
   foreground: deepPurple,
+  muted: deepPurple + '50',
   caret: '#797977',
   selection: yellowPink,
   selectionMatch: '#2B323D',
-  gutterBackground: grey,
+  gutterBackground: pinkAccent,
   gutterForeground: lightGrey,
   gutterBorder: 'transparent',
   lineHighlight: pinkAccent,
diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs
index 049ed596d..5eb90ff79 100644
--- a/packages/codemirror/themes/algoboy.mjs
+++ b/packages/codemirror/themes/algoboy.mjs
@@ -31,6 +31,7 @@ const palette = palettes['Sour Watermelon B'];
 export const settings = {
   background: palette[3],
   foreground: palette[1],
+  muted: palette[1] + '50',
   caret: palette[0],
   selection: palette[0],
   selectionMatch: palette[1],
diff --git a/packages/codemirror/themes/androidstudio.mjs b/packages/codemirror/themes/androidstudio.mjs
index 77c16c331..35b5b7464 100644
--- a/packages/codemirror/themes/androidstudio.mjs
+++ b/packages/codemirror/themes/androidstudio.mjs
@@ -8,6 +8,7 @@ export const settings = {
   background: '#282b2e',
   lineBackground: '#282b2e99',
   foreground: '#a9b7c6',
+  muted: '#a9b7c650',
   caret: '#00FF00',
   selection: '#343739',
   selectionMatch: '#343739',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#282b2e',
     foreground: '#a9b7c6',
+    muted: '#a9b7c650',
     caret: '#00FF00',
     selection: '#4e5254',
     selectionMatch: '#4e5254',
diff --git a/packages/codemirror/themes/archBtw.mjs b/packages/codemirror/themes/archBtw.mjs
index 87546569c..3bc5684ea 100644
--- a/packages/codemirror/themes/archBtw.mjs
+++ b/packages/codemirror/themes/archBtw.mjs
@@ -12,6 +12,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[1],
+  muted: hex[2],
   selection: hex[2],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/atomone.mjs b/packages/codemirror/themes/atomone.mjs
index ab9cd3607..bc7a3254a 100644
--- a/packages/codemirror/themes/atomone.mjs
+++ b/packages/codemirror/themes/atomone.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: '#272C35',
   lineBackground: '#272C3599',
   foreground: 'hsl(220, 14%, 71%)',
+  muted: 'hsl(220, 14%, 41%)',
   caret: '#797977',
   selection: '#ffffff30',
   selectionMatch: '#2B323D',
@@ -25,6 +26,7 @@ export default createTheme({
   settings: {
     background: '#272C35',
     foreground: '#9d9b97',
+    muted: 'hsl(220, 14%, 41%)',
     caret: '#797977',
     selection: '#3d4c64',
     selectionMatch: '#3d4c64',
diff --git a/packages/codemirror/themes/aura.mjs b/packages/codemirror/themes/aura.mjs
index b42a5839b..08bb5ea24 100644
--- a/packages/codemirror/themes/aura.mjs
+++ b/packages/codemirror/themes/aura.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#21202e',
   lineBackground: '#21202e99',
   foreground: '#edecee',
+  muted: '#edecee50',
   caret: '#a277ff',
   selection: '#3d375e7f',
   selectionMatch: '#3d375e7f',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#21202e',
     foreground: '#edecee',
+    muted: '#edecee50',
     caret: '#a277ff',
     selection: '#5a51898f',
     selectionMatch: '#5a51898f',
diff --git a/packages/codemirror/themes/bbedit.mjs b/packages/codemirror/themes/bbedit.mjs
index 535bf9eaa..0555ac1a4 100644
--- a/packages/codemirror/themes/bbedit.mjs
+++ b/packages/codemirror/themes/bbedit.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#FFFFFF',
   lineBackground: '#FFFFFF99',
   foreground: '#000000',
+  muted: '#00000050',
   caret: '#FBAC52',
   selection: '#FFD420',
   selectionMatch: '#FFD420',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#FFFFFF',
     foreground: '#000000',
+    muted: '#00000050',
     caret: '#FBAC52',
     selection: '#FFD420',
     selectionMatch: '#FFD420',
diff --git a/packages/codemirror/themes/blackscreen.mjs b/packages/codemirror/themes/blackscreen.mjs
index 2c45df11b..462dc200b 100644
--- a/packages/codemirror/themes/blackscreen.mjs
+++ b/packages/codemirror/themes/blackscreen.mjs
@@ -2,7 +2,8 @@ import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
-  foreground: 'white', // whats that?
+  foreground: 'white',
+  muted: '#ffffff50',
   caret: 'white',
   selection: '#ffffff20',
   selectionMatch: '#036dd626',
diff --git a/packages/codemirror/themes/bluescreen.mjs b/packages/codemirror/themes/bluescreen.mjs
index 97d165c9d..a3b9648d8 100644
--- a/packages/codemirror/themes/bluescreen.mjs
+++ b/packages/codemirror/themes/bluescreen.mjs
@@ -3,7 +3,8 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#051DB5',
   lineBackground: '#051DB550',
-  foreground: 'white', // whats that?
+  foreground: 'white',
+  muted: '#ffffff50',
   caret: 'white',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#036dd626',
diff --git a/packages/codemirror/themes/bluescreenlight.mjs b/packages/codemirror/themes/bluescreenlight.mjs
index 031a3da33..7e10659fa 100644
--- a/packages/codemirror/themes/bluescreenlight.mjs
+++ b/packages/codemirror/themes/bluescreenlight.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[2],
+  muted: hex[3],
   selection: hex[3],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/darcula.mjs b/packages/codemirror/themes/darcula.mjs
index ead66e663..ee510764b 100644
--- a/packages/codemirror/themes/darcula.mjs
+++ b/packages/codemirror/themes/darcula.mjs
@@ -9,6 +9,7 @@ export const settings = {
   background: '#242424',
   lineBackground: '#24242499',
   foreground: '#f8f8f2',
+  muted: '#f8f8f250',
   caret: '#FFFFFF',
   selection: 'rgba(255, 255, 255, 0.1)',
   selectionMatch: 'rgba(255, 255, 255, 0.2)',
@@ -23,6 +24,7 @@ export default createTheme({
   settings: {
     background: '#242424',
     foreground: '#f8f8f2',
+    muted: '#f8f8f250',
     caret: '#FFFFFF',
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
diff --git a/packages/codemirror/themes/dracula.mjs b/packages/codemirror/themes/dracula.mjs
index bdd9617de..514b63719 100644
--- a/packages/codemirror/themes/dracula.mjs
+++ b/packages/codemirror/themes/dracula.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: '#282a36',
   lineBackground: '#282a3699',
   foreground: '#f8f8f2',
+  muted: '#f8f8f250',
   caret: '#f8f8f0',
   selection: 'rgba(255, 255, 255, 0.1)',
   selectionMatch: 'rgba(255, 255, 255, 0.2)',
@@ -27,6 +28,7 @@ export default createTheme({
   settings: {
     background: '#282a36',
     foreground: '#f8f8f2',
+    muted: '#f8f8f250',
     caret: '#f8f8f0',
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
diff --git a/packages/codemirror/themes/duotoneDark.mjs b/packages/codemirror/themes/duotoneDark.mjs
index f54973e85..72e07cd66 100644
--- a/packages/codemirror/themes/duotoneDark.mjs
+++ b/packages/codemirror/themes/duotoneDark.mjs
@@ -10,6 +10,7 @@ export const settings = {
   background: '#2a2734',
   lineBackground: '#2a273499',
   foreground: '#eeebff',
+  muted: '#eeebff50',
   caret: '#ffad5c',
   selection: 'rgba(255, 255, 255, 0.1)',
   gutterBackground: '#2a2734',
@@ -22,6 +23,7 @@ export default createTheme({
   settings: {
     background: '#2a2734',
     foreground: '#6c6783',
+    muted: '#eeebff50',
     caret: '#ffad5c',
     selection: '#9a86fd',
     selectionMatch: '#9a86fd',
diff --git a/packages/codemirror/themes/eclipse.mjs b/packages/codemirror/themes/eclipse.mjs
index 8082b59da..8c3671eb7 100644
--- a/packages/codemirror/themes/eclipse.mjs
+++ b/packages/codemirror/themes/eclipse.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#fff',
   lineBackground: '#ffffff99',
   foreground: '#000',
+  muted: '#00000050',
   caret: '#FFFFFF',
   selection: '#d7d4f0',
   selectionMatch: '#d7d4f0',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#fff',
     foreground: '#000',
+    muted: '#00000050',
     caret: '#FFFFFF',
     selection: '#d7d4f0',
     selectionMatch: '#d7d4f0',
diff --git a/packages/codemirror/themes/fruitDaw.mjs b/packages/codemirror/themes/fruitDaw.mjs
index c9e557796..68b7857e7 100644
--- a/packages/codemirror/themes/fruitDaw.mjs
+++ b/packages/codemirror/themes/fruitDaw.mjs
@@ -23,6 +23,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[10],
+  muted: hex[7],
   selection: hex[8],
   selectionMatch: hex[0],
   gutterBackground: hex[3],
diff --git a/packages/codemirror/themes/githubDark.mjs b/packages/codemirror/themes/githubDark.mjs
index 477e7d7b8..3b11eac38 100644
--- a/packages/codemirror/themes/githubDark.mjs
+++ b/packages/codemirror/themes/githubDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#0d1117',
   lineBackground: '#0d111799',
   foreground: '#c9d1d9',
+  muted: '#c9d1d950',
   caret: '#c9d1d9',
   selection: '#003d73',
   selectionMatch: '#003d73',
@@ -16,6 +17,7 @@ export default createTheme({
   settings: {
     background: '#0d1117',
     foreground: '#c9d1d9',
+    muted: '#c9d1d950',
     caret: '#c9d1d9',
     selection: '#003d73',
     selectionMatch: '#003d73',
diff --git a/packages/codemirror/themes/githubLight.mjs b/packages/codemirror/themes/githubLight.mjs
index 2ccec93b6..26b1d5725 100644
--- a/packages/codemirror/themes/githubLight.mjs
+++ b/packages/codemirror/themes/githubLight.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#fff',
   lineBackground: '#ffffff99',
   foreground: '#24292e',
+  muted: '#24292e50',
   selection: '#BBDFFF',
   selectionMatch: '#BBDFFF',
   gutterBackground: '#fff',
@@ -17,6 +18,7 @@ export default createTheme({
   settings: {
     background: '#fff',
     foreground: '#24292e',
+    muted: '#24292e50',
     selection: '#BBDFFF',
     selectionMatch: '#BBDFFF',
     gutterBackground: '#fff',
diff --git a/packages/codemirror/themes/green-text.mjs b/packages/codemirror/themes/green-text.mjs
index 08c7a4bbe..7d3a47fb2 100644
--- a/packages/codemirror/themes/green-text.mjs
+++ b/packages/codemirror/themes/green-text.mjs
@@ -13,6 +13,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[2],
+  muted: hex[2] + '50',
   selection: hex[4],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/gruvboxDark.mjs b/packages/codemirror/themes/gruvboxDark.mjs
index 67d8bffc1..2cc9274e1 100644
--- a/packages/codemirror/themes/gruvboxDark.mjs
+++ b/packages/codemirror/themes/gruvboxDark.mjs
@@ -10,6 +10,7 @@ export const settings = {
   background: '#282828',
   lineBackground: '#28282899',
   foreground: '#ebdbb2',
+  muted: '#ebdbb250',
   caret: '#ebdbb2',
   selection: '#bdae93',
   selectionMatch: '#bdae93',
@@ -23,6 +24,7 @@ export default createTheme({
   settings: {
     background: '#282828',
     foreground: '#ebdbb2',
+    muted: '#ebdbb250',
     caret: '#ebdbb2',
     selection: '#b99d555c',
     selectionMatch: '#b99d555c',
diff --git a/packages/codemirror/themes/gruvboxLight.mjs b/packages/codemirror/themes/gruvboxLight.mjs
index 5d4b4ec01..8e529b21d 100644
--- a/packages/codemirror/themes/gruvboxLight.mjs
+++ b/packages/codemirror/themes/gruvboxLight.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: '#fbf1c7',
   lineBackground: '#fbf1c799',
   foreground: '#3c3836',
+  muted: '#3c383650',
   caret: '#af3a03',
   selection: '#ebdbb2',
   selectionMatch: '#bdae93',
@@ -25,6 +26,7 @@ export default createTheme({
   settings: {
     background: '#fbf1c7',
     foreground: '#3c3836',
+    muted: '#3c383650',
     caret: '#af3a03',
     selection: '#bdae9391',
     selectionMatch: '#bdae9391',
diff --git a/packages/codemirror/themes/materialDark.mjs b/packages/codemirror/themes/materialDark.mjs
index f13412885..0c4ef0545 100644
--- a/packages/codemirror/themes/materialDark.mjs
+++ b/packages/codemirror/themes/materialDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#212121',
   lineBackground: '#21212199',
   foreground: '#bdbdbd',
+  muted: '#bdbdbd50',
   caret: '#a0a4ae',
   selection: '#d7d4f0',
   selectionMatch: '#d7d4f0',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#212121',
     foreground: '#bdbdbd',
+    muted: '#bdbdbd50',
     caret: '#a0a4ae',
     selection: '#d7d4f063',
     selectionMatch: '#d7d4f063',
diff --git a/packages/codemirror/themes/materialLight.mjs b/packages/codemirror/themes/materialLight.mjs
index d2598c649..798842bf2 100644
--- a/packages/codemirror/themes/materialLight.mjs
+++ b/packages/codemirror/themes/materialLight.mjs
@@ -5,7 +5,8 @@ export const settings = {
   light: true,
   background: '#FAFAFA',
   lineBackground: '#FAFAFA99',
-  foreground: '#90A4AE',
+  foreground: '#6182B8',
+  muted: '#6182B850',
   caret: '#272727',
   selection: '#80CBC440',
   selectionMatch: '#FAFAFA',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#FAFAFA',
     foreground: '#90A4AE',
+    muted: '#6182B850',
     caret: '#272727',
     selection: '#80CBC440',
     selectionMatch: '#80CBC440',
diff --git a/packages/codemirror/themes/monokai.mjs b/packages/codemirror/themes/monokai.mjs
index 294b946b5..926e38219 100644
--- a/packages/codemirror/themes/monokai.mjs
+++ b/packages/codemirror/themes/monokai.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#272822',
   lineBackground: '#27282299',
   foreground: '#FFFFFF',
+  muted: '#FFFFFF50',
   caret: '#FFFFFF',
   selection: '#49483E',
   selectionMatch: '#49483E',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#272822',
     foreground: '#FFFFFF',
+    muted: '#FFFFFF50',
     caret: '#FFFFFF',
     selection: '#49483E',
     selectionMatch: '#49483E',
diff --git a/packages/codemirror/themes/noctisLilac.mjs b/packages/codemirror/themes/noctisLilac.mjs
index b11c6b40b..398043394 100644
--- a/packages/codemirror/themes/noctisLilac.mjs
+++ b/packages/codemirror/themes/noctisLilac.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#f2f1f8',
   lineBackground: '#f2f1f899',
   foreground: '#0c006b',
+  muted: '#0c006b50',
   caret: '#5c49e9',
   selection: '#d5d1f2',
   selectionMatch: '#d5d1f2',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#f2f1f8',
     foreground: '#0c006b',
+    muted: '#0c006b50',
     caret: '#5c49e9',
     selection: '#d5d1f2',
     selectionMatch: '#d5d1f2',
diff --git a/packages/codemirror/themes/nord.mjs b/packages/codemirror/themes/nord.mjs
index ce96bca57..efa4b6bf5 100644
--- a/packages/codemirror/themes/nord.mjs
+++ b/packages/codemirror/themes/nord.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#2e3440',
   lineBackground: '#2e344099',
   foreground: '#FFFFFF',
+  muted: '#FFFFFF50',
   caret: '#FFFFFF',
   selection: '#3b4252',
   selectionMatch: '#e5e9f0',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#2e3440',
     foreground: '#FFFFFF',
+    muted: '#FFFFFF50',
     caret: '#FFFFFF',
     selection: '#00000073',
     selectionMatch: '#00000073',
diff --git a/packages/codemirror/themes/red-text.mjs b/packages/codemirror/themes/red-text.mjs
index 44dda5dc0..5ba9d2152 100644
--- a/packages/codemirror/themes/red-text.mjs
+++ b/packages/codemirror/themes/red-text.mjs
@@ -13,6 +13,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[2],
+  muted: hex[2] + '50',
   selection: hex[4],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/solarizedDark.mjs b/packages/codemirror/themes/solarizedDark.mjs
index c6b645f7a..6848b537e 100644
--- a/packages/codemirror/themes/solarizedDark.mjs
+++ b/packages/codemirror/themes/solarizedDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#002b36',
   lineBackground: '#002b3699',
   foreground: '#93a1a1',
+  muted: '#93a1a150',
   caret: '#839496',
   selection: '#173541',
   selectionMatch: '#aafe661a',
@@ -45,6 +46,7 @@ export default createTheme({
   settings: {
     background: c.background,
     foreground: c.foreground,
+    muted: c.muted,
     caret: c.cursor,
     selection: c.selection,
     selectionMatch: c.selection,
diff --git a/packages/codemirror/themes/solarizedLight.mjs b/packages/codemirror/themes/solarizedLight.mjs
index b6828ff6c..0a0c61a12 100644
--- a/packages/codemirror/themes/solarizedLight.mjs
+++ b/packages/codemirror/themes/solarizedLight.mjs
@@ -8,6 +8,7 @@ export const settings = {
   background: '#fdf6e3',
   lineBackground: '#fdf6e399',
   foreground: '#657b83',
+  muted: '#657b8350',
   caret: '#586e75',
   selection: '#dfd9c8',
   selectionMatch: '#dfd9c8',
@@ -19,6 +20,7 @@ export const settings = {
 const c = {
   background: '#FDF6E3',
   foreground: '#657B83',
+  muted: '#657b8350',
   selection: '#EEE8D5',
   selectionMatch: '#EEE8D5',
   cursor: '#657B83',
diff --git a/packages/codemirror/themes/sonic-pink.mjs b/packages/codemirror/themes/sonic-pink.mjs
index 5a19555ab..19c5e5e87 100644
--- a/packages/codemirror/themes/sonic-pink.mjs
+++ b/packages/codemirror/themes/sonic-pink.mjs
@@ -13,6 +13,7 @@ export const settings = {
   background: '#000000',
   lineBackground: 'transparent',
   foreground: hex[4],
+  muted: hex[6],
   selection: hex[6],
   gutterBackground: hex[0],
   gutterForeground: hex[5],
diff --git a/packages/codemirror/themes/strudel-theme.mjs b/packages/codemirror/themes/strudel-theme.mjs
index 7c4a3a919..658a682f1 100644
--- a/packages/codemirror/themes/strudel-theme.mjs
+++ b/packages/codemirror/themes/strudel-theme.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#222',
   lineBackground: '#22222299',
   foreground: '#fff',
+  muted: '#ffffff50',
   caret: '#ffcc00',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#036dd626',
diff --git a/packages/codemirror/themes/sublime.mjs b/packages/codemirror/themes/sublime.mjs
index 068b9bac9..111f1e505 100644
--- a/packages/codemirror/themes/sublime.mjs
+++ b/packages/codemirror/themes/sublime.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#303841',
   lineBackground: '#30384199',
   foreground: '#FFFFFF',
+  muted: '#FFFFFF50',
   caret: '#FBAC52',
   selection: '#4C5964',
   selectionMatch: '#3A546E',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#303841',
     foreground: '#FFFFFF',
+    muted: '#FFFFFF50',
     caret: '#FBAC52',
     selection: '#4C5964',
     selectionMatch: '#3A546E',
diff --git a/packages/codemirror/themes/teletext.mjs b/packages/codemirror/themes/teletext.mjs
index 7857cb133..280eda979 100644
--- a/packages/codemirror/themes/teletext.mjs
+++ b/packages/codemirror/themes/teletext.mjs
@@ -9,7 +9,8 @@ let colorD = '#f8fc55';
 
 export const settings = {
   background: '#000000',
-  foreground: colorA, // whats that?
+  foreground: colorA,
+  muted: colorA + '50',
   caret: colorC,
   selection: colorD,
   selectionMatch: colorA,
diff --git a/packages/codemirror/themes/tokioNightStorm.mjs b/packages/codemirror/themes/tokioNightStorm.mjs
index be973d52f..ab940da01 100644
--- a/packages/codemirror/themes/tokioNightStorm.mjs
+++ b/packages/codemirror/themes/tokioNightStorm.mjs
@@ -4,7 +4,8 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#24283b',
   lineBackground: '#24283b99',
-  foreground: '#7982a9',
+  foreground: '#f9f2f9',
+  muted: '#f9f2f950',
   caret: '#c0caf5',
   selection: '#6f7bb630',
   selectionMatch: '#1f2335',
@@ -18,7 +19,8 @@ export default createTheme({
   theme: 'dark',
   settings: {
     background: '#24283b',
-    foreground: '#7982a9',
+    foreground: '#f9f2f9',
+    muted: '#f9f2f950',
     caret: '#c0caf5',
     selection: '#6f7bb630',
     selectionMatch: '#343b5f',
diff --git a/packages/codemirror/themes/tokyoNight.mjs b/packages/codemirror/themes/tokyoNight.mjs
index c325b4ad7..29a656676 100644
--- a/packages/codemirror/themes/tokyoNight.mjs
+++ b/packages/codemirror/themes/tokyoNight.mjs
@@ -4,7 +4,8 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#1a1b26',
   lineBackground: '#1a1b2699',
-  foreground: '#787c99',
+  foreground: '#f8fcf9',
+  muted: '#f8fcf950',
   caret: '#c0caf5',
   selection: '#515c7e40',
   selectionMatch: '#16161e',
@@ -18,7 +19,8 @@ export default createTheme({
   theme: 'dark',
   settings: {
     background: '#1a1b26',
-    foreground: '#787c99',
+    foreground: '#f8fcf9',
+    muted: '#f8fcf950',
     caret: '#c0caf5',
     selection: '#515c7e40',
     selectionMatch: '#16161e',
diff --git a/packages/codemirror/themes/tokyoNightDay.mjs b/packages/codemirror/themes/tokyoNightDay.mjs
index 1cd58a412..a8f5f75b0 100644
--- a/packages/codemirror/themes/tokyoNightDay.mjs
+++ b/packages/codemirror/themes/tokyoNightDay.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#e1e2e7',
   lineBackground: '#e1e2e799',
   foreground: '#3760bf',
+  muted: '#3760bf50',
   caret: '#3760bf',
   selection: '#99a7df',
   selectionMatch: '#99a7df',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#e1e2e7',
     foreground: '#3760bf',
+    muted: '#3760bf50',
     caret: '#3760bf',
     selection: '#99a7df',
     selectionMatch: '#99a7df',
diff --git a/packages/codemirror/themes/vscodeDark.mjs b/packages/codemirror/themes/vscodeDark.mjs
index 703790fd5..9ccc4d078 100644
--- a/packages/codemirror/themes/vscodeDark.mjs
+++ b/packages/codemirror/themes/vscodeDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#1e1e1e',
   lineBackground: '#1e1e1e99',
   foreground: '#fff',
+  muted: '#ffffff50',
   caret: '#c6c6c6',
   selection: '#6199ff2f',
   selectionMatch: '#72a1ff59',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#1e1e1e',
     foreground: '#fff',
+    muted: '#ffffff50',
     caret: '#c6c6c6',
     selection: '#6199ff2f',
     selectionMatch: '#72a1ff59',
diff --git a/packages/codemirror/themes/vscodeLight.mjs b/packages/codemirror/themes/vscodeLight.mjs
index 9a7345114..71817e8a6 100644
--- a/packages/codemirror/themes/vscodeLight.mjs
+++ b/packages/codemirror/themes/vscodeLight.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#ffffff',
   lineBackground: '#ffffff50',
   foreground: '#383a42',
+  muted: '#383a4250',
   caret: '#000',
   selection: '#add6ff',
   selectionMatch: '#a8ac94',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#ffffff',
     foreground: '#383a42',
+    muted: '#383a4250',
     caret: '#000',
     selection: '#add6ff',
     selectionMatch: '#a8ac94',
diff --git a/packages/codemirror/themes/whitescreen.mjs b/packages/codemirror/themes/whitescreen.mjs
index a2937c380..fa034fb80 100644
--- a/packages/codemirror/themes/whitescreen.mjs
+++ b/packages/codemirror/themes/whitescreen.mjs
@@ -2,7 +2,8 @@ import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'white',
-  foreground: 'black', // whats that?
+  foreground: 'black',
+  muted: '#00000050',
   caret: 'black',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#ffffff26',
diff --git a/packages/codemirror/themes/xcodeLight.mjs b/packages/codemirror/themes/xcodeLight.mjs
index 8977c133e..b2c857988 100644
--- a/packages/codemirror/themes/xcodeLight.mjs
+++ b/packages/codemirror/themes/xcodeLight.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#fff',
   lineBackground: '#ffffff99',
   foreground: '#3D3D3D',
+  muted: '#3D3D3D50',
   selection: '#BBDFFF',
   selectionMatch: '#BBDFFF',
   gutterBackground: '#fff',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#fff',
     foreground: '#3D3D3D',
+    muted: '#3D3D3D50',
     selection: '#BBDFFF',
     selectionMatch: '#BBDFFF',
     gutterBackground: '#fff',
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index b5cd34d81..a00600ae6 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -1,15 +1,3 @@
-:root {
-  --background: #222;
-  --lineBackground: #22222299;
-  --foreground: #fff;
-  --caret: #ffcc00;
-  --selection: rgba(128, 203, 196, 0.5);
-  --selectionMatch: #036dd626;
-  --lineHighlight: #00000050;
-  --gutterBackground: transparent;
-  --gutterForeground: #8a919966;
-}
-
 .darken::before {
   content: ' ';
   position: fixed;
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index 79c17e453..1837bfcfc 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -2,18 +2,18 @@ import cx from '@src/cx.mjs';
 
 export function ButtonGroup({ value, onChange, items }) {
   return (
-    <div className="flex max-w-lg">
+    <div className="flex max-w-lg space-x-0">
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
           id={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b h-8 whitespace-nowrap',
+            'px-2 border-b-2 h-8 whitespace-nowrap bg-background',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',
-            value === key ? 'border-foreground' : 'border-background',
+            value === key ? 'border-foreground' : 'border-transparent',
           )}
         >
           {label.toLowerCase()}
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 40712bfa9..9c98cbad4 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -128,14 +128,14 @@ export const Reference = memo(function Reference() {
         {selectedTag && (
           <div className="w-72">
             <span
-              className="text-foreground border-2 border-gray-500 px-1 py-0.5 my-2 rounded-md cursor-pointer font-sans"
+              className="text-foreground border border-muted px-1 py-0.5 my-2 cursor-pointer font-sans"
               onClick={onSearchTagFilterClick}
             >
               {selectedTag}
             </span>
           </div>
         )}
-        <div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50 rounded-md">
+        <div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50">
           {searchVisibleFunctions.map((entry, i) => (
             <Fragment key={`entry-${entry.name}`}>
               <a
@@ -174,8 +174,8 @@ export const Reference = memo(function Reference() {
                 <span key={t}>
                   <a
                     className={[
-                      'select-none text-white border-2 border-gray-500 px-1 py-0.5 my-2 cursor-pointer text-sm/8 rounded-md no-underline font-sans',
-                      `${selectedTag === t ? 'bg-gray-500 text-black' : ''}`,
+                      'select-none text-white border border-muted px-1 py-0.5 my-2 cursor-pointer text-sm/8 no-underline font-sans',
+                      `${selectedTag === t ? 'bg-muted text-foreground' : ''}`,
                     ].join(' ')}
                     onClick={() => toggleTag(t)}
                   >
@@ -191,7 +191,7 @@ export const Reference = memo(function Reference() {
                   {entry.name}
                 </h3>
                 {entry.tags && (
-                  <span className="ml-2 text-xs text-gray-400 border-2 border-gray-500 rounded-md px-1 py-0.5">
+                  <span className="ml-2 text-xs text-foreground border border-muted px-1 py-0.5">
                     {entry.tags.join(', ')}
                   </span>
                 )}
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 3baeec225..d7f005efb 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -15,7 +15,7 @@ function cx(...classes) {
 }
 
 const inputClass =
-  'bg-background text-sm border rounded-0 text-foreground border-foreground placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
+  'bg-background text-sm border rounded-0 text-foreground border-muted placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
 
 export function Textbox({ onChange, className, ...inputProps }) {
   return (
@@ -28,7 +28,7 @@ function Checkbox({ label, value, onChange, disabled = false }) {
     <label>
       <input
         className={cx(
-          'bg-background text-sm border  border-foreground focus:outline-none focus:ring-0 focus:border-foreground',
+          'bg-background text-sm border border-muted focus:outline-none focus:ring-0 focus:border-foreground',
         )}
         disabled={disabled}
         type="checkbox"
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 2b840995c..0b523747d 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -24,6 +24,7 @@ module.exports = {
         background: 'var(--background)',
         lineBackground: 'var(--lineBackground)',
         foreground: 'var(--foreground)',
+        muted: 'var(--muted)',
         caret: 'var(--caret)',
         selection: 'var(--selection)',
         selectionMatch: 'var(--selectionMatch)',
@@ -46,28 +47,28 @@ module.exports = {
               'code::after': {
                 content: 'none',
               },
-              color: 'var(--foreground)',
+              color: 'var(--foreground) !important',
               a: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h1: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h2: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h3: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h4: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               pre: {
-                color: 'var(--foreground)',
-                background: 'var(--background)',
+                color: 'var(--foreground) !important',
+                background: 'var(--background) !important',
               },
               code: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
             },
           },

From afac1f62ca313462e4e0a46415f04af549d10268 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 00:59:43 +0100
Subject: [PATCH 04/35] fix: adapt color-theme attribute on root based on theme

---
 packages/codemirror/themes.mjs              | 1 +
 packages/codemirror/themes/CutiePi.mjs      | 1 +
 website/src/components/HeadCommon.astro     | 1 +
 website/src/components/HeadCommonNext.astro | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
index 1a523b391..dd561d30b 100644
--- a/packages/codemirror/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -198,6 +198,7 @@ export function activateTheme(name) {
   const themeSettings = settings[name] || settings.strudelTheme;
   // set css variables
   themeStyle.innerHTML = `:root {
+      color-scheme: ${themeSettings.light ? 'light' : 'dark'};
       ${Object.entries(themeSettings)
         // important to override fallback
         .map(([key, value]) => `--${key}: ${value} !important;`)
diff --git a/packages/codemirror/themes/CutiePi.mjs b/packages/codemirror/themes/CutiePi.mjs
index 4d0e768c0..f535a2dad 100644
--- a/packages/codemirror/themes/CutiePi.mjs
+++ b/packages/codemirror/themes/CutiePi.mjs
@@ -25,6 +25,7 @@ export const settings = {
   gutterForeground: lightGrey,
   gutterBorder: 'transparent',
   lineHighlight: pinkAccent,
+  light: true,
 };
 
 export default createTheme({
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index fe8d34bb2..550222e44 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -33,6 +33,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 <!-- the following variables are just a fallback to make sure everything is readable without JS -->
 <style is:global>
   :root {
+    color-scheme: dark;
     --background: #222;
     --lineBackground: #22222299;
     --foreground: #fff;
diff --git a/website/src/components/HeadCommonNext.astro b/website/src/components/HeadCommonNext.astro
index 1f878bac0..f477cd8f0 100644
--- a/website/src/components/HeadCommonNext.astro
+++ b/website/src/components/HeadCommonNext.astro
@@ -32,6 +32,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 <!-- the following variables are just a fallback to make sure everything is readable without JS -->
 <style is:global>
   :root {
+    color-scheme: dark;
     --background: #222;
     --lineBackground: #22222299;
     --foreground: #fff;

From b75ca193a292bcb9d0827c957b45a67069a34dda Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 01:01:20 +0100
Subject: [PATCH 05/35] fix: font sizes

---
 website/src/repl/components/panel/SettingsTab.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index d7f005efb..c9f6ac23d 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -25,7 +25,7 @@ export function Textbox({ onChange, className, ...inputProps }) {
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
-    <label>
+    <label className="text-sm">
       <input
         className={cx(
           'bg-background text-sm border border-muted focus:outline-none focus:ring-0 focus:border-foreground',
@@ -96,7 +96,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
 
 function FormItem({ label, children, sublabel }) {
   return (
-    <div className="grid gap-2">
+    <div className="grid gap-2 text-sm">
       <label className="text-sm">{label}</label>
       {children}
     </div>

From 7e34069021317746abeccbffd6ee1708e05c51d6 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 01:06:07 +0100
Subject: [PATCH 06/35] fix more font sizes

---
 website/src/repl/components/button/action-button.jsx | 2 +-
 website/src/repl/components/panel/ConsoleTab.jsx     | 2 +-
 website/src/repl/components/panel/Forms.jsx          | 2 +-
 website/src/repl/components/panel/Panel.jsx          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/src/repl/components/button/action-button.jsx b/website/src/repl/components/button/action-button.jsx
index 846d36c7e..f413a1e97 100644
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ActionButton({ children, label, labelIsHidden, className, ...buttonProps }) {
   return (
-    <button className={cx('hover:opacity-50 text-nowrap w-fit', className)} title={label} {...buttonProps}>
+    <button className={cx('hover:opacity-50 text-nowrap w-fit text-sm ', className)} title={label} {...buttonProps}>
       {labelIsHidden !== true && label}
       {children}
     </button>
diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index c6a2403a5..a80442548 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -7,7 +7,7 @@ export function ConsoleTab() {
   const log = useStore($strudel_log_history);
   const { fontFamily } = useSettings();
   return (
-    <div id="console-tab" className="break-all w-full  first-line:text-sm p-2  h-full" style={{ fontFamily }}>
+    <div id="console-tab" className="break-all w-full text-sm p-2  h-full" style={{ fontFamily }}>
       <div className="bg-background h-full w-full overflow-auto space-y-1 p-2 rounded-md">
         {log.map((l, i) => {
           const message = linkify(l.message);
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index 1837bfcfc..9bb4f331c 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ButtonGroup({ value, onChange, items }) {
   return (
-    <div className="flex max-w-lg space-x-0">
+    <div className="flex max-w-lg space-x-0 text-sm">
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index cfe90ae30..8fc6d4a8e 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -145,7 +145,7 @@ function PanelTab({ label, isSelected, onClick }) {
       <button
         onClick={onClick}
         className={cx(
-          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
+          'h-8 px-2 text-sm text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
           isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >

From 83d542d06a623e930ac4fd7a0b8661800861db96 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 22:13:03 +0100
Subject: [PATCH 07/35] proper strudel icon + toggle menu from top bar

---
 website/src/repl/components/Header.jsx        | 65 ++++++-------------
 .../src/repl/components/icons/StrudelIcon.jsx | 13 ++++
 website/src/repl/components/panel/Panel.jsx   | 42 ++++--------
 3 files changed, 48 insertions(+), 72 deletions(-)
 create mode 100644 website/src/repl/components/icons/StrudelIcon.jsx

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index ca4e1ecf9..29895deaf 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -1,8 +1,10 @@
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import cx from '@src/cx.mjs';
-import { useSettings, setIsZen } from '../../settings.mjs';
+import { useSettings, setIsZen, setIsPanelOpened } from '../../settings.mjs';
+import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
 import '../Repl.css';
+import { Bars3Icon } from '@heroicons/react/16/solid';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
@@ -11,13 +13,13 @@ export function Header({ context, embedded = false }) {
   const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
     context;
   const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
-  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings();
+  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily, isPanelOpen } = useSettings();
 
   return (
     <header
       id="header"
       className={cx(
-        'flex-none text-black  z-[100] text-lg select-none h-20 md:h-14',
+        'flex-none text-black  z-[100] text-lg select-none h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
         isEmbedded ? 'flex' : 'md:flex',
@@ -47,7 +49,9 @@ export function Header({ context, embedded = false }) {
               }
             }}
           >
-            <span className="block text-foreground rotate-90">꩜</span>
+            <span className="block text-foreground rotate-90">
+              <StrudelIcon className="w-5 h-5 fill-foreground" />
+            </span>
           </div>
           {!isZen && (
             <div className="space-x-2">
@@ -63,19 +67,15 @@ export function Header({ context, embedded = false }) {
         </h1>
       </div>
       {!isZen && !isButtonRowHidden && (
-        <div className="flex max-w-full overflow-auto text-foreground px-1 md:px-2">
+        <div className="flex max-w-full overflow-auto text-foreground px-2">
           <button
             onClick={handleTogglePlay}
             title={started ? 'stop' : 'play'}
-            className={cx(
-              !isEmbedded ? 'p-2' : 'px-2',
-              'hover:opacity-50',
-              !started && !isCSSAnimationDisabled && 'animate-pulse',
-            )}
+            className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
           >
             {!pending ? (
               <span className={cx('flex items-center space-x-2')}>
-                {started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
+                {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
                 {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
               </span>
             ) : (
@@ -86,29 +86,16 @@ export function Header({ context, embedded = false }) {
             onClick={handleEvaluate}
             title="update"
             className={cx(
-              'flex items-center space-x-1',
-              !isEmbedded ? 'p-2' : 'px-2',
+              'flex items-center space-x-1 px-2',
               !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
             )}
           >
             {!isEmbedded && <span>update</span>}
           </button>
-          {/* !isEmbedded && (
-            <button
-              title="shuffle"
-              className="hover:opacity-50 p-2 flex items-center space-x-1"
-              onClick={handleShuffle}
-            >
-              <span> shuffle</span>
-            </button>
-          ) */}
           {!isEmbedded && (
             <button
               title="share"
-              className={cx(
-                'cursor-pointer hover:opacity-50 flex items-center space-x-1',
-                !isEmbedded ? 'p-2' : 'px-2',
-              )}
+              className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
               onClick={handleShare}
             >
               <span>share</span>
@@ -123,26 +110,16 @@ export function Header({ context, embedded = false }) {
               <span>learn</span>
             </a>
           )}
-          {/* {isEmbedded && (
-            <button className={cx('hover:opacity-50 px-2')}>
-              <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
-                🚀
-              </a>
+          {!isEmbedded && (
+            <button
+              title="share"
+              className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
+              onClick={() => setIsPanelOpened(!isPanelOpen)}
+            >
+              <span>menu</span>
+              <Bars3Icon className="w-5 h-5" />
             </button>
           )}
-          {isEmbedded && (
-            <button className={cx('hover:opacity-50 px-2')}>
-              <a
-                onClick={() => {
-                  window.location.href = initialUrl;
-                  window.location.reload();
-                }}
-                title="Reset"
-              >
-                💔
-              </a>
-            </button>
-          )} */}
         </div>
       )}
     </header>
diff --git a/website/src/repl/components/icons/StrudelIcon.jsx b/website/src/repl/components/icons/StrudelIcon.jsx
new file mode 100644
index 000000000..37df91685
--- /dev/null
+++ b/website/src/repl/components/icons/StrudelIcon.jsx
@@ -0,0 +1,13 @@
+// Source: https://commons.wikimedia.org/wiki/File:CHAM_PUNCTUATION_SPIRAL.svg
+// License: SIL Open Font License, Version 1.1. The license text is available at https://openfontlicense.org/open-font-license-official-text/
+export function StrudelIcon({ className = '' }) {
+  return (
+    <svg className={className} width="100%" height="100%" viewBox="0 0 213 213">
+      <g>
+        <g id="_1" serif:id="1">
+          <path d="M199.905,102.467c-0,17.959 -3.695,33.45 -11.078,46.468c-7.369,13.024 -17.9,23.079 -31.586,30.173c-13.673,7.093 -29.994,10.64 -48.961,10.64c-19.964,0 -37.183,-3.874 -51.66,-11.617c-14.482,-7.749 -25.592,-18.775 -33.334,-33.103c-7.749,-14.322 -11.617,-31.407 -11.617,-51.248l17.143,-0c-0,16.95 3.187,31.503 9.561,43.666c6.373,12.15 15.485,21.48 27.346,27.989c11.874,6.509 26.061,9.766 42.561,9.766c15.485,0 28.798,-2.898 39.94,-8.687c11.154,-5.789 19.693,-14.11 25.624,-24.956c5.943,-10.858 8.918,-23.812 8.918,-38.86c-0,-20.85 -5.5,-37.202 -16.5,-49.063c-11,-11.874 -26.344,-17.811 -46.031,-17.811c-17.515,-0 -31.266,4.883 -41.251,14.649c-9.991,9.767 -14.983,23.337 -14.983,40.711c-0,15.781 4.015,28.13 12.054,37.035c8.031,8.893 19.07,13.339 33.103,13.339c12.452,0 22.186,-3.431 29.196,-10.306c7.023,-6.888 10.538,-16.333 10.538,-28.348c-0,-10.281 -2.57,-18.415 -7.711,-24.416c-5.14,-6.014 -12.413,-9.021 -21.82,-9.021c-7.813,-0 -13.93,2.178 -18.351,6.528c-4.407,4.337 -6.605,10.197 -6.605,17.579c0,1.44 0.064,2.815 0.206,4.112c4.485,-7.363 11.141,-11.051 19.97,-11.051c5.5,-0 9.875,1.561 13.133,4.678c3.27,3.103 4.909,7.324 4.909,12.67c-0,5.796 -1.966,10.506 -5.886,14.136c-3.906,3.617 -9.265,5.423 -16.063,5.423c-8.533,-0 -15.337,-2.814 -20.407,-8.456c-5.076,-5.654 -7.607,-13.114 -7.607,-22.386c-0,-11.135 3.431,-19.957 10.306,-26.472c6.888,-6.528 16.121,-9.792 27.706,-9.792c13.467,0 24.03,4.164 31.689,12.491c7.672,8.327 11.515,19.584 11.515,33.771c-0,16.057 -4.884,28.753 -14.65,38.089c-9.767,9.343 -23.195,14.008 -40.274,14.008c-12.594,-0 -23.491,-2.603 -32.692,-7.814c-9.188,-5.204 -16.243,-12.625 -21.178,-22.257c-4.921,-9.625 -7.376,-21.023 -7.376,-34.182c0,-14.342 2.93,-26.64 8.79,-36.907c5.873,-10.281 14.271,-18.203 25.187,-23.774c10.93,-5.584 23.928,-8.379 38.989,-8.379c16.359,0 30.469,3.258 42.33,9.767c11.874,6.515 20.985,15.819 27.346,27.911c6.374,12.08 9.561,26.518 9.561,43.307Zm-86.408,-6.939c-7.235,-0 -11.867,4.491 -13.904,13.467c2.756,3.033 6.528,4.549 11.308,4.549c7.659,0 11.489,-3.11 11.489,-9.329c-0,-2.757 -0.797,-4.89 -2.39,-6.4c-1.581,-1.523 -3.746,-2.287 -6.503,-2.287Z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 8fc6d4a8e..765ae649f 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -42,36 +42,24 @@ export function HorizontalPanel({ context }) {
 export function VerticalPanel({ context }) {
   const settings = useSettings();
   const { activeFooter: tab, isPanelOpen } = settings;
-
+  if (!isPanelOpen) {
+    return;
+  }
   return (
     <PanelNav
       settings={settings}
       className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
     >
-      {isPanelOpen ? (
-        <div className={cx('flex flex-col h-full')}>
-          <div className="flex justify-between w-full ">
-            <Tabs setTab={setTab} tab={tab} />
-            <PanelActionButton settings={settings} />
-          </div>
-
-          <div className="overflow-auto h-full">
-            <PanelContent context={context} tab={tab} />
-          </div>
+      <div className={cx('flex flex-col h-full')}>
+        <div className="flex justify-between w-full ">
+          <Tabs setTab={setTab} tab={tab} />
+          <PanelActionButton settings={settings} />
         </div>
-      ) : (
-        <button
-          onClick={(e) => {
-            setIsPanelOpened(true);
-          }}
-          aria-label="open menu panel"
-          className={cx(
-            'flex flex-col hover:bg-lineBackground items-center cursor-pointer justify-center w-full  h-full',
-          )}
-        >
-          <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
-        </button>
-      )}
+
+        <div className="overflow-auto h-full">
+          <PanelContent context={context} tab={tab} />
+        </div>
+      </div>
     </PanelNav>
   );
 }
@@ -207,12 +195,10 @@ function CloseButton({ onClick }) {
   return (
     <button
       onClick={onClick}
-      className={cx(
-        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
-      )}
+      className={cx('text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-0 mr-2')}
       aria-label="Close Menu"
     >
-      <XMarkIcon />
+      <XMarkIcon className="w-7 h-7" />
     </button>
   );
 }

From 3d3130e8801729be0f34aaf08c314a887e7dd050 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 22:19:32 +0100
Subject: [PATCH 08/35] fine tune

---
 website/src/repl/components/Header.jsx      | 2 +-
 website/src/repl/components/panel/Panel.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 29895deaf..21d05c0e9 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -113,7 +113,7 @@ export function Header({ context, embedded = false }) {
           {!isEmbedded && (
             <button
               title="share"
-              className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
+              className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 pl-2 pr-1')}
               onClick={() => setIsPanelOpened(!isPanelOpen)}
             >
               <span>menu</span>
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 765ae649f..50fb07f55 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -195,10 +195,10 @@ function CloseButton({ onClick }) {
   return (
     <button
       onClick={onClick}
-      className={cx('text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-0 mr-2')}
+      className={cx('text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-0 mr-0.5')}
       aria-label="Close Menu"
     >
-      <XMarkIcon className="w-7 h-7" />
+      <XMarkIcon className="w-6 h-6" />
     </button>
   );
 }

From 4f14ff00d5a739df1099eef674050ff51503fabf Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 22:29:16 +0100
Subject: [PATCH 09/35] responsiveness

---
 website/src/repl/components/Header.jsx      | 10 +++++-----
 website/src/repl/components/panel/Panel.jsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 21d05c0e9..7a4259bf0 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -19,14 +19,14 @@ export function Header({ context, embedded = false }) {
     <header
       id="header"
       className={cx(
-        'flex-none text-black  z-[100] text-lg select-none h-10',
+        'flex-none text-black  z-[100] text-sm select-none min-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
-        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
-        isEmbedded ? 'flex' : 'md:flex',
+        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full justify-between',
+        isEmbedded ? 'flex' : 'sm:flex',
       )}
       style={{ fontFamily }}
     >
-      <div className="px-4 flex space-x-2 md:pt-0 select-none">
+      <div className="px-4 pt-1 flex space-x-2 md:pt-0 select-none">
         <h1
           onClick={() => {
             if (isEmbedded) window.open(window.location.href.replace('embed', ''));
@@ -67,7 +67,7 @@ export function Header({ context, embedded = false }) {
         </h1>
       </div>
       {!isZen && !isButtonRowHidden && (
-        <div className="flex max-w-full overflow-auto text-foreground px-2">
+        <div className="flex max-w-full overflow-auto text-foreground px-2 h-10 justify-end">
           <button
             onClick={handleTogglePlay}
             title={started ? 'stop' : 'play'}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 50fb07f55..652d11985 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -48,7 +48,7 @@ export function VerticalPanel({ context }) {
   return (
     <PanelNav
       settings={settings}
-      className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
+      className={cx(isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
     >
       <div className={cx('flex flex-col h-full')}>
         <div className="flex justify-between w-full ">

From 60b5024f63b7bd30af0705bf86d8c61a400ec853 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 23:06:04 +0100
Subject: [PATCH 10/35] remove panel hover + optimize bottom panel

---
 website/src/repl/components/Header.jsx        | 191 +++++++++---------
 website/src/repl/components/panel/Panel.jsx   |  55 ++---
 .../src/repl/components/panel/SettingsTab.jsx |   8 -
 .../src/repl/components/panel/WelcomeTab.jsx  |   4 +-
 website/src/settings.mjs                      |   1 -
 5 files changed, 121 insertions(+), 138 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 7a4259bf0..4ff8bb0d6 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -13,115 +13,122 @@ export function Header({ context, embedded = false }) {
   const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
     context;
   const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
-  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily, isPanelOpen } = useSettings();
+  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily, isPanelOpen, panelPosition } = useSettings();
 
   return (
     <header
       id="header"
       className={cx(
-        'flex-none text-black  z-[100] text-sm select-none min-h-10',
+        'flex-none text-black z-[100] text-sm select-none min-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full justify-between',
-        isEmbedded ? 'flex' : 'sm:flex',
+        'flex items-center',
       )}
       style={{ fontFamily }}
     >
-      <div className="px-4 pt-1 flex space-x-2 md:pt-0 select-none">
-        <h1
-          onClick={() => {
-            if (isEmbedded) window.open(window.location.href.replace('embed', ''));
-          }}
-          className={cx(
-            isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
-            'text-foreground font-bold flex space-x-2 items-center',
-          )}
-        >
-          <div
-            className={cx(
-              'mt-[1px]',
-              started && !isCSSAnimationDisabled && 'animate-spin',
-              'cursor-pointer text-blue-500',
-              isZen && 'fixed top-2 right-4',
-            )}
+      <div className={cx(isEmbedded ? 'flex' : 'sm:flex', 'w-full sm:justify-between')}>
+        <div className="px-3 pt-1 flex space-x-2 sm:pt-0 select-none">
+          <h1
             onClick={() => {
-              if (!isEmbedded) {
-                setIsZen(!isZen);
-              }
+              if (isEmbedded) window.open(window.location.href.replace('embed', ''));
             }}
-          >
-            <span className="block text-foreground rotate-90">
-              <StrudelIcon className="w-5 h-5 fill-foreground" />
-            </span>
-          </div>
-          {!isZen && (
-            <div className="space-x-2">
-              <span className="">strudel</span>
-              <span className="text-sm font-medium">REPL</span>
-              {!isEmbedded && isButtonRowHidden && (
-                <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
-                  DOCS
-                </a>
-              )}
-            </div>
-          )}
-        </h1>
-      </div>
-      {!isZen && !isButtonRowHidden && (
-        <div className="flex max-w-full overflow-auto text-foreground px-2 h-10 justify-end">
-          <button
-            onClick={handleTogglePlay}
-            title={started ? 'stop' : 'play'}
-            className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
-          >
-            {!pending ? (
-              <span className={cx('flex items-center space-x-2')}>
-                {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
-                {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
-              </span>
-            ) : (
-              <>loading...</>
-            )}
-          </button>
-          <button
-            onClick={handleEvaluate}
-            title="update"
             className={cx(
-              'flex items-center space-x-1 px-2',
-              !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
+              isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
+              'text-foreground font-bold flex space-x-2 items-center',
             )}
           >
-            {!isEmbedded && <span>update</span>}
-          </button>
-          {!isEmbedded && (
-            <button
-              title="share"
-              className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
-              onClick={handleShare}
+            <div
+              className={cx(
+                'mt-[1px]',
+                started && !isCSSAnimationDisabled && 'animate-spin',
+                'cursor-pointer text-blue-500',
+                isZen && 'fixed top-2 right-4',
+              )}
+              onClick={() => {
+                if (!isEmbedded) {
+                  setIsZen(!isZen);
+                }
+              }}
             >
-              <span>share</span>
-            </button>
-          )}
-          {!isEmbedded && (
-            <a
-              title="learn"
-              href={`${baseNoTrailing}/workshop/getting-started/`}
-              className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
-            >
-              <span>learn</span>
-            </a>
-          )}
-          {!isEmbedded && (
-            <button
-              title="share"
-              className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 pl-2 pr-1')}
-              onClick={() => setIsPanelOpened(!isPanelOpen)}
-            >
-              <span>menu</span>
-              <Bars3Icon className="w-5 h-5" />
-            </button>
-          )}
+              <span className="block text-foreground rotate-90">
+                <StrudelIcon className="w-5 h-5 fill-foreground" />
+              </span>
+            </div>
+            {!isZen && (
+              <div className="space-x-2">
+                <span className="">strudel</span>
+                <span className="text-sm font-medium">REPL</span>
+                {!isEmbedded && isButtonRowHidden && (
+                  <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
+                    DOCS
+                  </a>
+                )}
+              </div>
+            )}
+          </h1>
         </div>
-      )}
+        {!isZen && !isButtonRowHidden && (
+          <div className="flex max-w-full overflow-auto text-foreground px-3 h-10">
+            <button
+              onClick={handleTogglePlay}
+              title={started ? 'stop' : 'play'}
+              className={cx('hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
+            >
+              {!pending ? (
+                <span className={cx('flex items-center space-x-2')}>
+                  {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
+                  {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
+                </span>
+              ) : (
+                <>loading...</>
+              )}
+            </button>
+            <button
+              onClick={handleEvaluate}
+              title="update"
+              className={cx(
+                'flex items-center space-x-1 px-2',
+                !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
+              )}
+            >
+              {!isEmbedded && <span>update</span>}
+            </button>
+            {!isEmbedded && (
+              <button
+                title="share"
+                className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
+                onClick={handleShare}
+              >
+                <span>share</span>
+              </button>
+            )}
+            {!isEmbedded && (
+              <a
+                title="learn"
+                href={`${baseNoTrailing}/workshop/getting-started/`}
+                className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
+              >
+                <span>learn</span>
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+      <div>
+        {!isEmbedded && !isZen && panelPosition === 'right' && (
+          <button
+            title="share"
+            className={cx(
+              'cursor-pointer hover:opacity-50 flex items-center space-x-1 pr-3 text-foreground',
+              // isPanelOpen && 'opacity-0',
+            )}
+            onClick={() => setIsPanelOpened(!isPanelOpen)}
+          >
+            {/* <span>menu</span> */}
+            <Bars3Icon className="w-5 h-5" />
+          </button>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 652d11985..a02e7a2f5 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -14,27 +14,25 @@ import ExportTab from './ExportTab';
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
 export function HorizontalPanel({ context }) {
-  const settings = useSettings();
-  const { isPanelOpen, activeFooter: tab } = settings;
-
+  const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
     <PanelNav
-      settings={settings}
-      className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}
+      className={cx(
+        isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
+        'overflow-hidden flex flex-col relative ',
+      )}
     >
+      <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center">
+        <Tabs setTab={setTab} tab={tab} />
+      </div>
+      <div className="absolute right-0 top-1">
+        <PanelActionButton />
+      </div>
       {isPanelOpen && (
         <div className="flex h-full overflow-auto pr-10 ">
           <PanelContent context={context} tab={tab} />
         </div>
       )}
-
-      <div className="absolute right-4 pt-4">
-        <PanelActionButton settings={settings} />
-      </div>
-
-      <div className="flex  justify-between min-h-12 max-h-12 grid-cols-2 items-center">
-        <Tabs setTab={setTab} tab={tab} />
-      </div>
     </PanelNav>
   );
 }
@@ -53,7 +51,7 @@ export function VerticalPanel({ context }) {
       <div className={cx('flex flex-col h-full')}>
         <div className="flex justify-between w-full ">
           <Tabs setTab={setTab} tab={tab} />
-          <PanelActionButton settings={settings} />
+          {/* <PanelActionButton settings={settings} /> */}
         </div>
 
         <div className="overflow-auto h-full">
@@ -77,8 +75,8 @@ if (TAURI) {
   tabNames.files = 'files';
 }
 
-function PanelNav({ children, className, settings, ...props }) {
-  const isHoverBehavior = settings.togglePanelTrigger === 'hover';
+function PanelNav({ children, className, ...props }) {
+  const settings = useSettings();
   return (
     <nav
       onClick={() => {
@@ -86,16 +84,6 @@ function PanelNav({ children, className, settings, ...props }) {
           setIsPanelOpened(true);
         }
       }}
-      onMouseEnter={() => {
-        if (isHoverBehavior && !settings.isPanelOpen) {
-          setIsPanelOpened(true);
-        }
-      }}
-      onMouseLeave={() => {
-        if (isHoverBehavior && !settings.isPanelPinned) {
-          setIsPanelOpened(false);
-        }
-      }}
       aria-label="Menu Panel"
       className={cx('bg-lineHighlight group overflow-x-auto', className)}
       {...props}
@@ -142,27 +130,24 @@ function PanelTab({ label, isSelected, onClick }) {
     </>
   );
 }
-function Tabs({ setTab, tab, className }) {
+function Tabs({ className }) {
+  const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
     <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
-        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
+        return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
       })}
     </div>
   );
 }
 
-function PanelActionButton({ settings }) {
-  const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings;
-  const isHoverBehavior = togglePanelTrigger === 'hover';
+function PanelActionButton() {
+  const settings = useSettings();
+  const { isPanelOpen } = settings;
   if (!isPanelOpen) {
     return;
   }
-
-  if (isHoverBehavior) {
-    return <PinButton pinned={isPanelPinned} />;
-  }
   return <CloseButton onClick={() => setIsPanelOpened(false)} />;
 }
 
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index c9f6ac23d..7999f44fd 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -144,7 +144,6 @@ export function SettingsTab({ started }) {
     panelPosition,
     audioDeviceName,
     audioEngineTarget,
-    togglePanelTrigger,
     maxPolyphony,
     multiChannelOrbits,
     isTabIndentationEnabled,
@@ -256,13 +255,6 @@ export function SettingsTab({ started }) {
           items={{ bottom: 'Bottom', right: 'Right' }}
         ></ButtonGroup>
       </FormItem>
-      <FormItem label="Open Panel on:                       ">
-        <ButtonGroup
-          value={togglePanelTrigger}
-          onChange={(value) => settingsMap.setKey('togglePanelTrigger', value)}
-          items={{ click: 'Click', hover: 'Hover' }}
-        />
-      </FormItem>
       <FormItem label="More Settings">
         <Checkbox
           label="Enable bracket matching"
diff --git a/website/src/repl/components/panel/WelcomeTab.jsx b/website/src/repl/components/panel/WelcomeTab.jsx
index 7f0ee70ab..671da4b7e 100644
--- a/website/src/repl/components/panel/WelcomeTab.jsx
+++ b/website/src/repl/components/panel/WelcomeTab.jsx
@@ -7,7 +7,7 @@ export function WelcomeTab({ context }) {
   const { fontFamily } = useSettings();
   return (
     <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 " style={{ fontFamily }}>
-      <h3>꩜ welcome</h3>
+      <h3>welcome</h3>
       <p>
         You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music
         pieces in the browser! It is free and open-source and made for beginners and experts alike. To get started:
@@ -30,7 +30,7 @@ export function WelcomeTab({ context }) {
         </a>{' '}
         to ask any questions, give feedback or just say hello.
       </p>
-      <h3>꩜ about</h3>
+      <h3>about</h3>
       <p>
         strudel is a JavaScript version of{' '}
         <a href="https://tidalcycles.org/" target="_blank">
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 8ec7d455a..65c142683 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -43,7 +43,6 @@ export const defaultSettings = {
   panelPosition: 'right',
   isPanelPinned: false,
   isPanelOpen: true,
-  togglePanelTrigger: 'click', //click | hover
   userPatterns: '{}',
   prebakeScript: '',
   audioEngineTarget: audioEngineTargets.webaudio,

From 35a3e32238127bb55467a6913e77298b78113159 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 23:08:31 +0100
Subject: [PATCH 11/35] no bg on button group

---
 website/src/repl/components/panel/Forms.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index 9bb4f331c..11c893356 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -9,7 +9,7 @@ export function ButtonGroup({ value, onChange, items }) {
           id={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b-2 h-8 whitespace-nowrap bg-background',
+            'px-2 border-b-2 h-8 whitespace-nowrap',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',

From bce6ffde0804e1cf266bd62faa97a276df864b9d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 23:36:09 +0100
Subject: [PATCH 12/35] cleanup + tweak bottom panel style

---
 .astro/settings.json                          |  5 ++
 website/src/repl/components/panel/Panel.jsx   | 67 +++++--------------
 .../src/repl/components/panel/PatternsTab.jsx |  2 +-
 3 files changed, 21 insertions(+), 53 deletions(-)
 create mode 100644 .astro/settings.json

diff --git a/.astro/settings.json b/.astro/settings.json
new file mode 100644
index 000000000..bf82959bd
--- /dev/null
+++ b/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+	"devToolbar": {
+		"enabled": false
+	}
+}
\ No newline at end of file
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index a02e7a2f5..dcec29bec 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -13,6 +13,17 @@ import ExportTab from './ExportTab';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
+function PanelCloseButton() {
+  const { isPanelOpen } = useSettings();
+  return (
+    isPanelOpen && (
+      <button onClick={() => setIsPanelOpened(false)} className={cx('text-foreground px-2')} aria-label="Close Menu">
+        <XMarkIcon className="w-6 h-6" />
+      </button>
+    )
+  );
+}
+
 export function HorizontalPanel({ context }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
@@ -24,12 +35,10 @@ export function HorizontalPanel({ context }) {
     >
       <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center">
         <Tabs setTab={setTab} tab={tab} />
-      </div>
-      <div className="absolute right-0 top-1">
-        <PanelActionButton />
+        <PanelCloseButton />
       </div>
       {isPanelOpen && (
-        <div className="flex h-full overflow-auto pr-10 ">
+        <div className="flex h-full overflow-auto w-full">
           <PanelContent context={context} tab={tab} />
         </div>
       )}
@@ -51,7 +60,7 @@ export function VerticalPanel({ context }) {
       <div className={cx('flex flex-col h-full')}>
         <div className="flex justify-between w-full ">
           <Tabs setTab={setTab} tab={tab} />
-          {/* <PanelActionButton settings={settings} /> */}
+          <PanelCloseButton />
         </div>
 
         <div className="overflow-auto h-full">
@@ -133,7 +142,7 @@ function PanelTab({ label, isSelected, onClick }) {
 function Tabs({ className }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
+    <div className={cx('flex select-none max-w-full overflow-auto', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
@@ -141,49 +150,3 @@ function Tabs({ className }) {
     </div>
   );
 }
-
-function PanelActionButton() {
-  const settings = useSettings();
-  const { isPanelOpen } = settings;
-  if (!isPanelOpen) {
-    return;
-  }
-  return <CloseButton onClick={() => setIsPanelOpened(false)} />;
-}
-
-function PinButton({ pinned }) {
-  return (
-    <button
-      onClick={() => setPanelPinned(!pinned)}
-      className={cx(
-        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
-        pinned ? 'flex' : 'hidden',
-      )}
-      aria-label="Pin Menu Panel"
-    >
-      <svg
-        stroke="currentColor"
-        fill={'currentColor'}
-        strokeWidth="0"
-        className="w-full h-full"
-        opacity={pinned ? 1 : '.3'}
-        viewBox="0 0 16 16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"></path>
-      </svg>
-    </button>
-  );
-}
-
-function CloseButton({ onClick }) {
-  return (
-    <button
-      onClick={onClick}
-      className={cx('text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-0 mr-0.5')}
-      aria-label="Close Menu"
-    >
-      <XMarkIcon className="w-6 h-6" />
-    </button>
-  );
-}
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index d0e54e34e..4fadd9dfd 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -172,7 +172,7 @@ export function PatternsTab({ context }) {
           />
         </div>
 
-        <div className="overflow-auto h-full bg-background p-2 rounded-md">
+        <div className="overflow-auto h-full bg-background p-2">
           {/* {patternFilter === patternFilterName.user && ( */}
           <PatternButtons
             onClick={(id) => {

From e3abdd41c025c44490835bcd5e7757eaa5bb998a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 00:03:19 +0100
Subject: [PATCH 13/35] make panel toggle floating

---
 website/src/repl/components/Header.jsx      | 26 +++---------------
 website/src/repl/components/ReplEditor.jsx  |  7 +++--
 website/src/repl/components/panel/Panel.jsx | 30 ++++++++++++++++++---
 3 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 4ff8bb0d6..19e7b8fad 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -1,19 +1,16 @@
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import cx from '@src/cx.mjs';
-import { useSettings, setIsZen, setIsPanelOpened } from '../../settings.mjs';
+import { useSettings, setIsZen } from '../../settings.mjs';
 import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
 import '../Repl.css';
-import { Bars3Icon } from '@heroicons/react/16/solid';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
-export function Header({ context, embedded = false }) {
-  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
-    context;
-  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
-  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily, isPanelOpen, panelPosition } = useSettings();
+export function Header({ context, isEmbedded = false }) {
+  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
+  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings();
 
   return (
     <header
@@ -114,21 +111,6 @@ export function Header({ context, embedded = false }) {
           </div>
         )}
       </div>
-      <div>
-        {!isEmbedded && !isZen && panelPosition === 'right' && (
-          <button
-            title="share"
-            className={cx(
-              'cursor-pointer hover:opacity-50 flex items-center space-x-1 pr-3 text-foreground',
-              // isPanelOpen && 'opacity-0',
-            )}
-            onClick={() => setIsPanelOpened(!isPanelOpen)}
-          >
-            {/* <span>menu</span> */}
-            <Bars3Icon className="w-5 h-5" />
-          </button>
-        )}
-      </div>
     </header>
   );
 }
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 23ceb122b..03cf89f14 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel, VerticalPanel, PanelToggle } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { Header } from './Header';
@@ -14,14 +14,17 @@ export default function ReplEditor(Props) {
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
   const { panelPosition, isZen } = settings;
+  const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location;
 
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <Header context={context} />
+      <Header context={context} isEmbedded={isEmbedded} />
+
       <div className="grow flex relative overflow-hidden">
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
         {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
+        <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
       </div>
       <UserFacingErrorMessage error={error} />
       {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index dcec29bec..fb41c3306 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -8,7 +8,7 @@ import { SoundsTab } from './SoundsTab';
 import { useLogger } from '../useLogger';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/16/solid';
 import ExportTab from './ExportTab';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
@@ -17,7 +17,11 @@ function PanelCloseButton() {
   const { isPanelOpen } = useSettings();
   return (
     isPanelOpen && (
-      <button onClick={() => setIsPanelOpened(false)} className={cx('text-foreground px-2')} aria-label="Close Menu">
+      <button
+        onClick={() => setIsPanelOpened(false)}
+        className={cx('px-4 py-2 text-foreground hover:opacity-50')}
+        aria-label="Close Menu"
+      >
         <XMarkIcon className="w-6 h-6" />
       </button>
     )
@@ -142,7 +146,7 @@ function PanelTab({ label, isSelected, onClick }) {
 function Tabs({ className }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('flex select-none max-w-full overflow-auto', className)}>
+    <div className={cx('flex select-none max-w-full overflow-auto items-center', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
@@ -150,3 +154,23 @@ function Tabs({ className }) {
     </div>
   );
 }
+
+export function PanelToggle({ isEmbedded, isZen }) {
+  const { panelPosition, isPanelOpen } = useSettings();
+  return (
+    !isEmbedded &&
+    !isZen &&
+    panelPosition === 'right' && (
+      <button
+        title="share"
+        className={cx(
+          'top-0 px-4 py-2 bg-background right-0 absolute z-[1000] cursor-pointer hover:opacity-50 flex justify-center items-center space-x-1 text-foreground ',
+          isPanelOpen && 'hidden',
+        )}
+        onClick={() => setIsPanelOpened(!isPanelOpen)}
+      >
+        <Bars3Icon className="w-6 h-6" />
+      </button>
+    )
+  );
+}

From 5f8d028d4fc1ef654697bdc75c68f4d23c8119c6 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 00:04:18 +0100
Subject: [PATCH 14/35] cleanup

---
 website/src/repl/components/panel/Panel.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index fb41c3306..fa5a2b93e 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -1,5 +1,5 @@
 import cx from '@src/cx.mjs';
-import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
+import { setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';

From 84e4dde3d786bdc5b5f6fb0e433e7be88a3e4a83 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 00:15:00 +0100
Subject: [PATCH 15/35] mini tweaks

---
 website/src/repl/components/panel/Panel.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index fa5a2b93e..0eaa9b397 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -164,7 +164,7 @@ export function PanelToggle({ isEmbedded, isZen }) {
       <button
         title="share"
         className={cx(
-          'top-0 px-4 py-2 bg-background right-0 absolute z-[1000] cursor-pointer hover:opacity-50 flex justify-center items-center space-x-1 text-foreground ',
+          'absolute top-0 right-3  rounded-0  px-2 py-2 bg-background z-[1000] cursor-pointer hover:opacity-80 flex justify-center items-center space-x-1 text-foreground ',
           isPanelOpen && 'hidden',
         )}
         onClick={() => setIsPanelOpened(!isPanelOpen)}

From cb46dd7840b8b27a28e13b9995a698015d211c87 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 01:31:25 +0100
Subject: [PATCH 16/35] make it crunchier: border borders, less padding

---
 packages/codemirror/themes/strudel-theme.mjs  |   2 +-
 website/src/repl/components/Code.jsx          |   2 +-
 website/src/repl/components/Header.jsx        |   2 +-
 .../repl/components/button/action-button.jsx  |   2 +-
 .../src/repl/components/panel/ConsoleTab.jsx  |   6 +-
 .../src/repl/components/panel/ExportTab.jsx   |   2 +-
 website/src/repl/components/panel/Forms.jsx   |   2 +-
 website/src/repl/components/panel/Panel.jsx   |  21 +--
 .../src/repl/components/panel/PatternsTab.jsx | 125 +++++++++---------
 .../src/repl/components/panel/Reference.jsx   |  13 +-
 .../src/repl/components/panel/SettingsTab.jsx |   2 +-
 .../src/repl/components/panel/SoundsTab.jsx   |   8 +-
 .../src/repl/components/panel/WelcomeTab.jsx  |   2 +-
 13 files changed, 96 insertions(+), 93 deletions(-)

diff --git a/packages/codemirror/themes/strudel-theme.mjs b/packages/codemirror/themes/strudel-theme.mjs
index 658a682f1..58c675638 100644
--- a/packages/codemirror/themes/strudel-theme.mjs
+++ b/packages/codemirror/themes/strudel-theme.mjs
@@ -5,7 +5,7 @@ export const settings = {
   background: '#222',
   lineBackground: '#22222299',
   foreground: '#fff',
-  muted: '#ffffff50',
+  muted: '#8a919966',
   caret: '#ffcc00',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#036dd626',
diff --git a/website/src/repl/components/Code.jsx b/website/src/repl/components/Code.jsx
index 8481cc272..e8cccb86f 100644
--- a/website/src/repl/components/Code.jsx
+++ b/website/src/repl/components/Code.jsx
@@ -8,7 +8,7 @@ export function Code(Props) {
 
   return (
     <section
-      className={'text-gray-100 cursor-text pb-0 overflow-auto grow'}
+      className={'text-gray-100 cursor-text pb-0 overflow-auto grow z-10'}
       id="code"
       ref={(el) => {
         containerRef.current = el;
diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 19e7b8fad..e113cea0a 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -16,7 +16,7 @@ export function Header({ context, isEmbedded = false }) {
     <header
       id="header"
       className={cx(
-        'flex-none text-black z-[100] text-sm select-none min-h-10',
+        'border-b border-muted flex-none text-black z-[100] text-sm select-none min-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full justify-between',
         'flex items-center',
diff --git a/website/src/repl/components/button/action-button.jsx b/website/src/repl/components/button/action-button.jsx
index f413a1e97..846d36c7e 100644
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ActionButton({ children, label, labelIsHidden, className, ...buttonProps }) {
   return (
-    <button className={cx('hover:opacity-50 text-nowrap w-fit text-sm ', className)} title={label} {...buttonProps}>
+    <button className={cx('hover:opacity-50 text-nowrap w-fit', className)} title={label} {...buttonProps}>
       {labelIsHidden !== true && label}
       {children}
     </button>
diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index a80442548..64981937f 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -7,8 +7,10 @@ export function ConsoleTab() {
   const log = useStore($strudel_log_history);
   const { fontFamily } = useSettings();
   return (
-    <div id="console-tab" className="break-all w-full text-sm p-2  h-full" style={{ fontFamily }}>
-      <div className="bg-background h-full w-full overflow-auto space-y-1 p-2 rounded-md">
+    <div id="console-tab" className="break-all w-full h-full" style={{ fontFamily }}>
+      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md">
+        {' '}
+        {/* bg-background */}
         {log.map((l, i) => {
           const message = linkify(l.message);
           const color = l.data?.hap?.value?.color;
diff --git a/website/src/repl/components/panel/ExportTab.jsx b/website/src/repl/components/panel/ExportTab.jsx
index 071d8d695..c074f095a 100644
--- a/website/src/repl/components/panel/ExportTab.jsx
+++ b/website/src/repl/components/panel/ExportTab.jsx
@@ -45,7 +45,7 @@ export default function ExportTab(Props) {
 
   return (
     <>
-      <div className="text-foreground w-full p-4 space-y-4">
+      <div className="text-foreground w-full space-y-4 p-4">
         <FormItem label="File name" disabled={exporting}>
           <Textbox
             onBlur={(e) => {
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index 11c893356..e4a3c15f5 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ButtonGroup({ value, onChange, items }) {
   return (
-    <div className="flex max-w-lg space-x-0 text-sm">
+    <div className="flex max-w-lg space-x-0">
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 0eaa9b397..7e7ae86cd 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -19,7 +19,7 @@ function PanelCloseButton() {
     isPanelOpen && (
       <button
         onClick={() => setIsPanelOpened(false)}
-        className={cx('px-4 py-2 text-foreground hover:opacity-50')}
+        className={cx('px-4 py-1 text-foreground hover:opacity-50')}
         aria-label="Close Menu"
       >
         <XMarkIcon className="w-6 h-6" />
@@ -34,15 +34,15 @@ export function HorizontalPanel({ context }) {
     <PanelNav
       className={cx(
         isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
-        'overflow-hidden flex flex-col relative ',
+        'overflow-hidden flex flex-col relative',
       )}
     >
-      <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center">
+      <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center border-b border-muted">
         <Tabs setTab={setTab} tab={tab} />
         <PanelCloseButton />
       </div>
       {isPanelOpen && (
-        <div className="flex h-full overflow-auto w-full">
+        <div className="w-full h-full overflow-hidden">
           <PanelContent context={context} tab={tab} />
         </div>
       )}
@@ -59,10 +59,13 @@ export function VerticalPanel({ context }) {
   return (
     <PanelNav
       settings={settings}
-      className={cx(isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
+      className={cx(
+        'border-l border-muted',
+        isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
+      )}
     >
       <div className={cx('flex flex-col h-full')}>
-        <div className="flex justify-between w-full ">
+        <div className="flex justify-between w-full border-b border-muted">
           <Tabs setTab={setTab} tab={tab} />
           <PanelCloseButton />
         </div>
@@ -134,7 +137,7 @@ function PanelTab({ label, isSelected, onClick }) {
       <button
         onClick={onClick}
         className={cx(
-          'h-8 px-2 text-sm text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
+          'h-8 px-2 text-sm text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
           isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
@@ -146,7 +149,7 @@ function PanelTab({ label, isSelected, onClick }) {
 function Tabs({ className }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('flex select-none max-w-full overflow-auto items-center', className)}>
+    <div className={cx('w-full flex select-none max-w-full overflow-auto items-center', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
@@ -164,7 +167,7 @@ export function PanelToggle({ isEmbedded, isZen }) {
       <button
         title="share"
         className={cx(
-          'absolute top-0 right-3  rounded-0  px-2 py-2 bg-background z-[1000] cursor-pointer hover:opacity-80 flex justify-center items-center space-x-1 text-foreground ',
+          'absolute top-0.5 right-3  rounded-0  px-2 py-2 bg-background z-[1000] cursor-pointer hover:opacity-80 flex justify-center items-center space-x-1 text-foreground ',
           isPanelOpen && 'hidden',
         )}
         onClick={() => setIsPanelOpened(!isPanelOpen)}
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 4fadd9dfd..2fc0f67d9 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -43,7 +43,7 @@ function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
       className={cx(
         'mr-4 hover:opacity-50 cursor-pointer block',
         showOutline && 'outline outline-1',
-        showHiglight && 'bg-selection',
+        showHiglight && 'ring-selection',
       )}
       onClick={onClick}
     >
@@ -57,7 +57,7 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
   const viewingPatternData = parseJSON(viewingPatternStore);
   const viewingPatternID = viewingPatternData.id;
   return (
-    <div className="">
+    <div className="p-2">
       {Object.values(patterns)
         .reverse()
         .map((pattern) => {
@@ -124,71 +124,68 @@ export function PatternsTab({ context }) {
   }, [search, viewingPatternStore]);
 
   return (
-    <div className="px-4 w-full text-foreground  space-y-2  flex flex-col overflow-hidden max-h-full h-full">
-      <div className="w-full flex">
-        <Textbox className="w-full" placeholder="Search" value={search} onChange={setSearch} />
+    <div className="w-full h-full text-foreground flex flex-col overflow-hidden">
+      <Textbox className="w-full border-0" placeholder="Search" value={search} onChange={setSearch} />
+      <div className="px-2 shrink-0 py-2 space-x-4 flex max-w-full overflow-x-auto border-y border-muted">
+        <ActionButton
+          label="new"
+          onClick={() => {
+            const { data } = userPattern.createAndAddToDB();
+            updateCodeWindow(context, data);
+          }}
+        />
+        <ActionButton
+          label="duplicate"
+          onClick={() => {
+            const { data } = userPattern.duplicate(viewingPatternData);
+            updateCodeWindow(context, data);
+          }}
+        />
+        <ActionButton
+          label="delete"
+          onClick={() => {
+            const { data } = userPattern.delete(viewingPatternID);
+            updateCodeWindow(context, { ...data, collection: userPattern.collection });
+          }}
+        />
+        <label className="hover:opacity-50 cursor-pointer">
+          <input
+            style={{ display: 'none' }}
+            type="file"
+            multiple
+            accept="text/plain,text/x-markdown,application/json"
+            onChange={(e) => importPatterns(e.target.files)}
+          />
+          import
+        </label>
+        <ActionButton label="export" onClick={exportPatterns} />
+
+        <ActionButton
+          label="delete-all"
+          onClick={() => {
+            const { data } = userPattern.clearAll();
+            updateCodeWindow(context, data);
+          }}
+        />
       </div>
-      <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">
-        <div className="pr-4 space-x-4  flex max-w-full overflow-x-auto">
-          <ActionButton
-            label="new"
-            onClick={() => {
-              const { data } = userPattern.createAndAddToDB();
-              updateCodeWindow(context, data);
-            }}
-          />
-          <ActionButton
-            label="duplicate"
-            onClick={() => {
-              const { data } = userPattern.duplicate(viewingPatternData);
-              updateCodeWindow(context, data);
-            }}
-          />
-          <ActionButton
-            label="delete"
-            onClick={() => {
-              const { data } = userPattern.delete(viewingPatternID);
-              updateCodeWindow(context, { ...data, collection: userPattern.collection });
-            }}
-          />
-          <label className="hover:opacity-50 cursor-pointer">
-            <input
-              style={{ display: 'none' }}
-              type="file"
-              multiple
-              accept="text/plain,text/x-markdown,application/json"
-              onChange={(e) => importPatterns(e.target.files)}
-            />
-            import
-          </label>
-          <ActionButton label="export" onClick={exportPatterns} />
 
-          <ActionButton
-            label="delete-all"
-            onClick={() => {
-              const { data } = userPattern.clearAll();
-              updateCodeWindow(context, data);
-            }}
-          />
-        </div>
+      <div className="overflow-auto">
+        {/* bg-background */}
+        {/* {patternFilter === patternFilterName.user && ( */}
+        <PatternButtons
+          onClick={(id) => {
+            updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
 
-        <div className="overflow-auto h-full bg-background p-2">
-          {/* {patternFilter === patternFilterName.user && ( */}
-          <PatternButtons
-            onClick={(id) => {
-              updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
-
-              if (context.started && activePattern === id) {
-                context.handleEvaluate();
-              }
-            }}
-            patterns={visiblePatterns}
-            started={context.started}
-            activePattern={activePattern}
-            viewingPatternID={viewingPatternID}
-          />
-          {/* )} */}
-        </div>
+            if (context.started && activePattern === id) {
+              context.handleEvaluate();
+            }
+          }}
+          patterns={visiblePatterns}
+          started={context.started}
+          activePattern={activePattern}
+          viewingPatternID={viewingPatternID}
+        />
+        {/* )} */}
       </div>
     </div>
   );
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 9c98cbad4..5b297853f 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -112,11 +112,12 @@ export const Reference = memo(function Reference() {
   }, [selectedFunction]);
 
   return (
-    <div className="flex h-full w-full p-2 overflow-hidden">
-      <div className="h-full text-foreground flex flex-col gap-3 w-1/3 ">
+    <div className="flex h-full w-full overflow-hidden">
+      <div className="h-full text-foreground flex flex-col w-1/3  border-r border-muted">
+        {/* bg-background */}
         <div className="w-full flex">
           <Textbox
-            className="w-full"
+            className="w-full border-0 border-b border-muted"
             placeholder="Search"
             value={search}
             onChange={(e) => {
@@ -128,14 +129,14 @@ export const Reference = memo(function Reference() {
         {selectedTag && (
           <div className="w-72">
             <span
-              className="text-foreground border border-muted px-1 py-0.5 my-2 cursor-pointer font-sans"
+              className="text-foreground border border-muted border-t-0 border-l-0 px-1 py-0.5 my-2 cursor-pointer font-sans"
               onClick={onSearchTagFilterClick}
             >
               {selectedTag}
             </span>
           </div>
         )}
-        <div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50">
+        <div className="flex flex-col h-full py-2 overflow-y-auto gap-1.5 bg-opacity-50">
           {searchVisibleFunctions.map((entry, i) => (
             <Fragment key={`entry-${entry.name}`}>
               <a
@@ -161,7 +162,7 @@ export const Reference = memo(function Reference() {
         className="break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
         id="reference-container"
       >
-        <div className="prose dark:prose-invert min-w-full px-1 ">
+        <div className="prose dark:prose-invert min-w-full px-1 text-sm">
           <h2>API Reference</h2>
           <p className="font-sans text-md">
             This is the long list of functions you can use. Remember that you don't need to remember all of those and
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 7999f44fd..69d4bb60a 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -154,7 +154,7 @@ export function SettingsTab({ started }) {
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
   return (
-    <div className="text-foreground p-4 space-y-4 w-full" style={{ fontFamily }}>
+    <div className="p-4 text-foreground space-y-4 w-full" style={{ fontFamily }}>
       {canChangeAudioDevice && (
         <FormItem label="Audio Output Device">
           <AudioDeviceSelector
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 406442cd2..7b8d154db 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -77,10 +77,10 @@ export function SoundsTab() {
     numRef.current = 0;
   });
   return (
-    <div id="sounds-tab" className="px-4 flex gap-2 flex-col w-full h-full text-foreground">
-      <Textbox placeholder="Search" value={search} onChange={(v) => setSearch(v)} />
+    <div id="sounds-tab" className="flex flex-col w-full h-full text-foreground">
+      <Textbox placeholder="Search" className="border-0" value={search} onChange={(v) => setSearch(v)} />
 
-      <div className=" flex shrink-0 flex-wrap">
+      <div className="flex shrink-0 flex-wrap border-y border-muted">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -114,7 +114,7 @@ export function SoundsTab() {
         />
       )}
 
-      <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal bg-background p-2 rounded-md">
+      <div className="min-h-0 max-h-full grow overflow-auto break-normal p-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
             <span
diff --git a/website/src/repl/components/panel/WelcomeTab.jsx b/website/src/repl/components/panel/WelcomeTab.jsx
index 671da4b7e..9d78edf85 100644
--- a/website/src/repl/components/panel/WelcomeTab.jsx
+++ b/website/src/repl/components/panel/WelcomeTab.jsx
@@ -6,7 +6,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 export function WelcomeTab({ context }) {
   const { fontFamily } = useSettings();
   return (
-    <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 " style={{ fontFamily }}>
+    <div className="prose dark:prose-invert min-w-full py-4 font-sans px-4 text-sm" style={{ fontFamily }}>
       <h3>welcome</h3>
       <p>
         You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music

From 9fc084b291487a1a54f52252bd14a659bce51aed Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 22:47:15 +0100
Subject: [PATCH 17/35] tweaks: consistent font sizes and row heights, persist
 selected reference tag, add wrap prop to ButtonGroup

---
 website/src/repl/components/Header.jsx        |  2 +-
 .../repl/components/button/action-button.jsx  |  2 +-
 website/src/repl/components/panel/Forms.jsx   |  6 +-
 website/src/repl/components/panel/Panel.jsx   |  2 +-
 .../src/repl/components/panel/PatternsTab.jsx | 26 +++----
 .../src/repl/components/panel/Reference.jsx   | 73 +++++++++++--------
 .../src/repl/components/panel/SettingsTab.jsx |  8 +-
 .../src/repl/components/panel/SoundsTab.jsx   |  3 +-
 website/src/settings.mjs                      |  1 +
 9 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index e113cea0a..faef01856 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -69,7 +69,7 @@ export function Header({ context, isEmbedded = false }) {
             <button
               onClick={handleTogglePlay}
               title={started ? 'stop' : 'play'}
-              className={cx('hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
+              className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
             >
               {!pending ? (
                 <span className={cx('flex items-center space-x-2')}>
diff --git a/website/src/repl/components/button/action-button.jsx b/website/src/repl/components/button/action-button.jsx
index 846d36c7e..245cf961e 100644
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ActionButton({ children, label, labelIsHidden, className, ...buttonProps }) {
   return (
-    <button className={cx('hover:opacity-50 text-nowrap w-fit', className)} title={label} {...buttonProps}>
+    <button className={cx('hover:opacity-50 text-xs text-nowrap w-fit', className)} title={label} {...buttonProps}>
       {labelIsHidden !== true && label}
       {children}
     </button>
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index e4a3c15f5..8b4e8c0fe 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -1,15 +1,15 @@
 import cx from '@src/cx.mjs';
 
-export function ButtonGroup({ value, onChange, items }) {
+export function ButtonGroup({ value, onChange, items, wrap = false }) {
   return (
-    <div className="flex max-w-lg space-x-0">
+    <div className={cx('flex max-w-lg space-x-0 text-xs', wrap && 'flex-wrap')}>
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
           id={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b-2 h-8 whitespace-nowrap',
+            'px-2 border-b-2 h-8 whitespace-nowrap border-box max-h-8 hover:opacity-50',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 7e7ae86cd..78bd8a784 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -137,7 +137,7 @@ function PanelTab({ label, isSelected, onClick }) {
       <button
         onClick={onClick}
         className={cx(
-          'h-8 px-2 text-sm text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
+          'h-8 px-2 text-xs text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
           isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 2fc0f67d9..3423c57ab 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -8,7 +8,7 @@ import {
   useViewingPatternData,
   userPattern,
 } from '../../../user_pattern_utils.mjs';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
@@ -123,10 +123,11 @@ export function PatternsTab({ context }) {
     );
   }, [search, viewingPatternStore]);
 
+  const importRef = useRef();
   return (
     <div className="w-full h-full text-foreground flex flex-col overflow-hidden">
-      <Textbox className="w-full border-0" placeholder="Search" value={search} onChange={setSearch} />
-      <div className="px-2 shrink-0 py-2 space-x-4 flex max-w-full overflow-x-auto border-y border-muted">
+      <Textbox className="w-full border-0" placeholder="Search..." value={search} onChange={setSearch} />
+      <div className="px-2 shrink-0 h-8 space-x-4 flex max-w-full overflow-x-auto border-y border-muted">
         <ActionButton
           label="new"
           onClick={() => {
@@ -148,16 +149,15 @@ export function PatternsTab({ context }) {
             updateCodeWindow(context, { ...data, collection: userPattern.collection });
           }}
         />
-        <label className="hover:opacity-50 cursor-pointer">
-          <input
-            style={{ display: 'none' }}
-            type="file"
-            multiple
-            accept="text/plain,text/x-markdown,application/json"
-            onChange={(e) => importPatterns(e.target.files)}
-          />
-          import
-        </label>
+        <input
+          ref={importRef}
+          style={{ display: 'none' }}
+          type="file"
+          multiple
+          accept="text/plain,text/x-markdown,application/json"
+          onChange={(e) => importPatterns(e.target.files)}
+        />
+        <ActionButton label="import" onClick={() => importRef.current.click()} />
         <ActionButton label="export" onClick={exportPatterns} />
 
         <ActionButton
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 5b297853f..7bea07afa 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useState, Fragment } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
 import { Textbox } from '@src/repl/components/panel/SettingsTab';
+import { settingsMap, useSettings } from '@src/settings.mjs';
 
 const isValid = ({ name, description }) => name && !name.startsWith('_') && !!description;
 
@@ -37,6 +38,19 @@ const availableFunctions = (() => {
   return functions.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 })();
 
+const tagCounts = {};
+// const tagOptions = { all: `all (${availableFunctions.length})` };
+const tagOptions = { all: `all` };
+for (const doc of availableFunctions) {
+  (doc.tags || ['untagged']).forEach((t) => {
+    if (typeof t === 'string' && t) {
+      tagCounts[t] = (tagCounts[t] || 0) + 1;
+      //tagOptions[t] = `${t} (${tagCounts[t]})`;
+      tagOptions[t] = t;
+    }
+  });
+}
+
 const getInnerText = (html) => {
   var div = document.createElement('div');
   div.innerHTML = html;
@@ -45,40 +59,38 @@ const getInnerText = (html) => {
 
 export const Reference = memo(function Reference() {
   const [search, setSearch] = useState('');
-  const [selectedTag, setSelectedTag] = useState(null);
   const [selectedFunction, setSelectedFunction] = useState(null);
+  const { referenceTag } = useSettings();
 
   const toggleTag = (tag) => {
-    if (selectedTag === tag) {
-      setSelectedTag(null);
+    if (referenceTag === tag) {
+      setReferenceTag('all');
     } else {
-      setSelectedTag(tag);
+      setReferenceTag(tag);
     }
   };
 
   const searchVisibleFunctions = useMemo(() => {
     return availableFunctions.filter((entry) => {
-      if (selectedTag) {
-        if (!(entry.tags || ['untagged']).includes(selectedTag)) {
+      if (referenceTag && referenceTag !== 'all') {
+        if (!(entry.tags || ['untagged']).includes(referenceTag)) {
           return false;
         }
       }
-
       if (!search) {
         return true;
       }
-
       const lowerCaseSearch = search.toLowerCase();
       return (
         entry.name.toLowerCase().includes(lowerCaseSearch) ||
         (entry.synonyms?.some((s) => s.toLowerCase().includes(lowerCaseSearch)) ?? false)
       );
     });
-  }, [search, selectedTag]);
+  }, [search, referenceTag]);
 
   const detailVisibleFunctions = useMemo(() => {
     return searchVisibleFunctions.filter((x) => {
-      if (selectedTag === null) {
+      if (referenceTag === null || referenceTag === 'all') {
         if (search) {
           return true;
         }
@@ -87,19 +99,10 @@ export const Reference = memo(function Reference() {
         return true;
       }
     });
-  }, [searchVisibleFunctions, selectedFunction, selectedTag]);
-
-  const tagCounts = {};
-  for (const doc of availableFunctions) {
-    (doc.tags || ['untagged']).forEach((t) => {
-      if (typeof t === 'string' && t) {
-        tagCounts[t] = (tagCounts[t] || 0) + 1;
-      }
-    });
-  }
+  }, [searchVisibleFunctions, selectedFunction, referenceTag]);
 
   const onSearchTagFilterClick = () => {
-    setSelectedTag(null);
+    setReferenceTag('all');
     setSelectedFunction(null);
   };
 
@@ -111,6 +114,8 @@ export const Reference = memo(function Reference() {
     }
   }, [selectedFunction]);
 
+  let setReferenceTag = (value) => settingsMap.setKey('referenceTag', value);
+
   return (
     <div className="flex h-full w-full overflow-hidden">
       <div className="h-full text-foreground flex flex-col w-1/3  border-r border-muted">
@@ -118,30 +123,35 @@ export const Reference = memo(function Reference() {
         <div className="w-full flex">
           <Textbox
             className="w-full border-0 border-b border-muted"
-            placeholder="Search"
+            placeholder="Search..."
             value={search}
             onChange={(e) => {
               setSelectedFunction(null);
+              setReferenceTag('all');
               setSearch(e);
             }}
           />
         </div>
-        {selectedTag && (
+
+        {/* <div className="flex shrink-0 flex-wrap w-full overflow-auto border-y border-muted">
+          <ButtonGroup wrap value={referenceTag} onChange={setReferenceTag} items={tagOptions}></ButtonGroup>
+        </div> */}
+        {referenceTag && referenceTag !== 'all' && (
           <div className="w-72">
             <span
               className="text-foreground border border-muted border-t-0 border-l-0 px-1 py-0.5 my-2 cursor-pointer font-sans"
               onClick={onSearchTagFilterClick}
             >
-              {selectedTag}
+              {referenceTag}
             </span>
           </div>
         )}
-        <div className="flex flex-col h-full py-2 overflow-y-auto gap-1.5 bg-opacity-50">
+        <div className="h-full p-2 overflow-y-auto bg-opacity-50">
           {searchVisibleFunctions.map((entry, i) => (
             <Fragment key={`entry-${entry.name}`}>
               <a
                 className={
-                  'cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis ' +
+                  'cursor-pointer hover:opacity-50 text-ellipsis block' +
                   (entry.name === selectedFunction ? 'bg-lineHighlight font-bold' : '')
                 }
                 onClick={() => {
@@ -159,7 +169,7 @@ export const Reference = memo(function Reference() {
         </div>
       </div>
       <div
-        className="break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
+        className="w-2/3 break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
         id="reference-container"
       >
         <div className="prose dark:prose-invert min-w-full px-1 text-sm">
@@ -169,6 +179,7 @@ export const Reference = memo(function Reference() {
             that you can already make music with a small set of functions!
           </p>
           <div>
+            {/* <ButtonGroup wrap value={referenceTag} onChange={setReferenceTag} items={tagOptions}/>*/}
             {Object.entries(tagCounts)
               .sort(([a], [b]) => a.localeCompare(b))
               .map(([t, count]) => (
@@ -176,7 +187,7 @@ export const Reference = memo(function Reference() {
                   <a
                     className={[
                       'select-none text-white border border-muted px-1 py-0.5 my-2 cursor-pointer text-sm/8 no-underline font-sans',
-                      `${selectedTag === t ? 'bg-muted text-foreground' : ''}`,
+                      `${referenceTag === t ? 'bg-muted text-foreground' : ''}`,
                     ].join(' ')}
                     onClick={() => toggleTag(t)}
                   >
@@ -188,7 +199,7 @@ export const Reference = memo(function Reference() {
           {detailVisibleFunctions.map((entry, i) => (
             <section key={i} className="font-sans">
               <div className="flex flex-row items-center mt-8 justify-between">
-                <h3 className="font-mono my-0" id={`doc-${entry.name}`}>
+                <h3 className="font-mono my-0 pt-4" id={`doc-${entry.name}`}>
                   {entry.name}
                 </h3>
                 {entry.tags && (
@@ -202,7 +213,7 @@ export const Reference = memo(function Reference() {
                   Synonyms: <code>{entry.synonyms_text}</code>
                 </p>
               )}
-              {/* <small>{entry.meta.filename}</small> */}
+
               <p dangerouslySetInnerHTML={{ __html: entry.description }}></p>
               <ul>
                 {entry.params?.map(({ name, type, description }, i) => (
@@ -212,7 +223,7 @@ export const Reference = memo(function Reference() {
                 ))}
               </ul>
               {entry.examples?.map((example, j) => (
-                <pre className="bg-background" key={j}>
+                <pre className="bg-background border border-muted" key={j}>
                   {example}
                 </pre>
               ))}
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 69d4bb60a..113873a55 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -15,17 +15,17 @@ function cx(...classes) {
 }
 
 const inputClass =
-  'bg-background text-sm border rounded-0 text-foreground border-muted placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
+  'bg-background text-xs h-8 max-h-8 border border-box rounded-0 text-foreground border-muted placeholder-muted focus:outline-none focus:ring-0 focus:border-foreground';
 
 export function Textbox({ onChange, className, ...inputProps }) {
   return (
-    <input className={cx('p-2', inputClass, className)} onChange={(e) => onChange(e.target.value)} {...inputProps} />
+    <input className={cx('px-2', inputClass, className)} onChange={(e) => onChange(e.target.value)} {...inputProps} />
   );
 }
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
-    <label className="text-sm">
+    <label className="text-xs">
       <input
         className={cx(
           'bg-background text-sm border border-muted focus:outline-none focus:ring-0 focus:border-foreground',
@@ -96,7 +96,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
 
 function FormItem({ label, children, sublabel }) {
   return (
-    <div className="grid gap-2 text-sm">
+    <div className="grid gap-2 text-xs">
       <label className="text-sm">{label}</label>
       {children}
     </div>
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 7b8d154db..0a856f811 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -78,10 +78,11 @@ export function SoundsTab() {
   });
   return (
     <div id="sounds-tab" className="flex flex-col w-full h-full text-foreground">
-      <Textbox placeholder="Search" className="border-0" value={search} onChange={(v) => setSearch(v)} />
+      <Textbox placeholder="Search..." className="border-0" value={search} onChange={(v) => setSearch(v)} />
 
       <div className="flex shrink-0 flex-wrap border-y border-muted">
         <ButtonGroup
+          wrap
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
           items={{
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 65c142683..16175efb1 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -38,6 +38,7 @@ export const defaultSettings = {
   latestCode: '',
   isZen: false,
   soundsFilter: soundFilterType.ALL,
+  referenceTag: 'all',
   patternFilter: 'community',
   // panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom', //FIX: does not work on astro
   panelPosition: 'right',

From cf999462b72b3045f2a8c3de4445e0ca22c6bd27 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 23:02:14 +0100
Subject: [PATCH 18/35] fix: export tab placeholder color

---
 website/src/repl/components/panel/ExportTab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/ExportTab.jsx b/website/src/repl/components/panel/ExportTab.jsx
index c074f095a..1e953def2 100644
--- a/website/src/repl/components/panel/ExportTab.jsx
+++ b/website/src/repl/components/panel/ExportTab.jsx
@@ -56,7 +56,7 @@ export default function ExportTab(Props) {
             }}
             disabled={exporting}
             placeholder="Leave empty to use current date"
-            className={cx('placeholder:opacity-50', exporting && 'opacity-50 border-opacity-50')}
+            className={cx('placeholder-muted', exporting && 'opacity-50 border-opacity-50')}
             value={downloadName ?? ''}
           />
         </FormItem>

From 9a10cac8e939ff79490aeecd3edfca992512d16a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 23:07:49 +0100
Subject: [PATCH 19/35] fix bottom panel

---
 website/src/repl/components/panel/Panel.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 78bd8a784..3dd53cf4a 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -33,16 +33,16 @@ export function HorizontalPanel({ context }) {
   return (
     <PanelNav
       className={cx(
-        isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
+        isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-8 max-h-8',
         'overflow-hidden flex flex-col relative',
       )}
     >
-      <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center border-b border-muted">
+      <div className="flex justify-between min-h-8 max-h-8 grid-cols-2 items-center border-t border-muted">
         <Tabs setTab={setTab} tab={tab} />
         <PanelCloseButton />
       </div>
       {isPanelOpen && (
-        <div className="w-full h-full overflow-hidden">
+        <div className="w-full h-full overflow-auto border-t border-muted">
           <PanelContent context={context} tab={tab} />
         </div>
       )}

From bcce1fa68a5c3487eb995be6e21d3c163e90f063 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 23:38:25 +0100
Subject: [PATCH 20/35] make move sidepanel one layer up, so tabs are at the
 top and the toggle doesn't float

---
 website/src/repl/components/Header.jsx        |  2 ++
 website/src/repl/components/ReplEditor.jsx    | 10 +++++-----
 .../src/repl/components/icons/SidebarIcon.jsx | 19 +++++++++++++++++++
 website/src/repl/components/panel/Panel.jsx   | 12 ++++++------
 4 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 website/src/repl/components/icons/SidebarIcon.jsx

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index faef01856..92255b990 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -4,6 +4,7 @@ import cx from '@src/cx.mjs';
 import { useSettings, setIsZen } from '../../settings.mjs';
 import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
 import '../Repl.css';
+import { PanelToggle } from '@src/repl/components/panel/Panel';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
@@ -108,6 +109,7 @@ export function Header({ context, isEmbedded = false }) {
                 <span>learn</span>
               </a>
             )}
+            <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
           </div>
         )}
       </div>
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 03cf89f14..fa75e56e2 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -19,12 +19,12 @@ export default function ReplEditor(Props) {
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <Header context={context} isEmbedded={isEmbedded} />
-
-      <div className="grow flex relative overflow-hidden">
-        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+      <div className="grow flex justify-stretch w-full relative overflow-hidden">
+        <div className="flex flex-col grow overflow-hidden">
+          <Header context={context} isEmbedded={isEmbedded} />
+          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+        </div>
         {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
-        <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
       </div>
       <UserFacingErrorMessage error={error} />
       {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
diff --git a/website/src/repl/components/icons/SidebarIcon.jsx b/website/src/repl/components/icons/SidebarIcon.jsx
new file mode 100644
index 000000000..07966a2ab
--- /dev/null
+++ b/website/src/repl/components/icons/SidebarIcon.jsx
@@ -0,0 +1,19 @@
+export function SidebarIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-panel-right-icon lucide-panel-right"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M15 3v18" />
+    </svg>
+  );
+}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 3dd53cf4a..df6478fb6 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -19,7 +19,7 @@ function PanelCloseButton() {
     isPanelOpen && (
       <button
         onClick={() => setIsPanelOpened(false)}
-        className={cx('px-4 py-1 text-foreground hover:opacity-50')}
+        className={cx('px-2 py-0 text-foreground hover:opacity-50')}
         aria-label="Close Menu"
       >
         <XMarkIcon className="w-6 h-6" />
@@ -60,7 +60,7 @@ export function VerticalPanel({ context }) {
     <PanelNav
       settings={settings}
       className={cx(
-        'border-l border-muted',
+        'border-l border-muted shrink-0',
         isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
       )}
     >
@@ -137,7 +137,7 @@ function PanelTab({ label, isSelected, onClick }) {
       <button
         onClick={onClick}
         className={cx(
-          'h-8 px-2 text-xs text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
+          'h-10 px-2 text-sm border-t-2 border-t-transparent text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
           isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
@@ -149,7 +149,7 @@ function PanelTab({ label, isSelected, onClick }) {
 function Tabs({ className }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('w-full flex select-none max-w-full overflow-auto items-center', className)}>
+    <div className={cx('w-full flex select-none max-w-full h-10 overflow-auto items-center', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
@@ -167,12 +167,12 @@ export function PanelToggle({ isEmbedded, isZen }) {
       <button
         title="share"
         className={cx(
-          'absolute top-0.5 right-3  rounded-0  px-2 py-2 bg-background z-[1000] cursor-pointer hover:opacity-80 flex justify-center items-center space-x-1 text-foreground ',
+          'ml-4 rounded-0 cursor-pointer hover:opacity-80 flex justify-center items-center space-x-1 text-foreground ',
           isPanelOpen && 'hidden',
         )}
         onClick={() => setIsPanelOpened(!isPanelOpen)}
       >
-        <Bars3Icon className="w-6 h-6" />
+        <Bars3Icon className="w-5 h-5" />
       </button>
     )
   );

From a052def314928b4146887b0cc84e2281bab2f6bf Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 00:35:04 +0100
Subject: [PATCH 21/35] piping hot (main menu in footer) + border around panel
 toggle

---
 website/src/repl/components/Header.jsx      | 116 +++++++++++---------
 website/src/repl/components/ReplEditor.jsx  |   4 +-
 website/src/repl/components/panel/Panel.jsx |  25 +++--
 3 files changed, 84 insertions(+), 61 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 92255b990..1ed8915c0 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -5,6 +5,7 @@ import { useSettings, setIsZen } from '../../settings.mjs';
 import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
 import '../Repl.css';
 import { PanelToggle } from '@src/repl/components/panel/Panel';
+import { PlayIcon, StopIcon } from '@heroicons/react/16/solid';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
@@ -17,15 +18,16 @@ export function Header({ context, isEmbedded = false }) {
     <header
       id="header"
       className={cx(
-        'border-b border-muted flex-none text-black z-[100] text-sm select-none min-h-10',
+        'border-b border-muted flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
-        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full justify-between',
+        // isZen ? 'h-12 w-8 fixed top-0 left-0' : 'h-10 sticky top-0 w-full justify-between',
+        isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
         'flex items-center',
       )}
       style={{ fontFamily }}
     >
-      <div className={cx(isEmbedded ? 'flex' : 'sm:flex', 'w-full sm:justify-between')}>
-        <div className="px-3 pt-1 flex space-x-2 sm:pt-0 select-none">
+      <div className={cx('flex w-full flex-wrap justify-between')}>
+        <div className="px-3 py-1 flex space-x-2 select-none">
           <h1
             onClick={() => {
               if (isEmbedded) window.open(window.location.href.replace('embed', ''));
@@ -56,59 +58,18 @@ export function Header({ context, isEmbedded = false }) {
               <div className="space-x-2">
                 <span className="">strudel</span>
                 <span className="text-sm font-medium">REPL</span>
-                {!isEmbedded && isButtonRowHidden && (
+                {/* !isEmbedded && isButtonRowHidden && (
                   <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
                     DOCS
                   </a>
-                )}
+                ) */}
               </div>
             )}
           </h1>
         </div>
         {!isZen && !isButtonRowHidden && (
-          <div className="flex max-w-full overflow-auto text-foreground px-3 h-10">
-            <button
-              onClick={handleTogglePlay}
-              title={started ? 'stop' : 'play'}
-              className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
-            >
-              {!pending ? (
-                <span className={cx('flex items-center space-x-2')}>
-                  {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
-                  {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
-                </span>
-              ) : (
-                <>loading...</>
-              )}
-            </button>
-            <button
-              onClick={handleEvaluate}
-              title="update"
-              className={cx(
-                'flex items-center space-x-1 px-2',
-                !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
-              )}
-            >
-              {!isEmbedded && <span>update</span>}
-            </button>
-            {!isEmbedded && (
-              <button
-                title="share"
-                className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
-                onClick={handleShare}
-              >
-                <span>share</span>
-              </button>
-            )}
-            {!isEmbedded && (
-              <a
-                title="learn"
-                href={`${baseNoTrailing}/workshop/getting-started/`}
-                className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
-              >
-                <span>learn</span>
-              </a>
-            )}
+          <div className="flex grow justify-end">
+            {/* <MainMenu isEmbedded={isEmbedded} context={context} /> */}
             <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
           </div>
         )}
@@ -116,3 +77,60 @@ export function Header({ context, isEmbedded = false }) {
     </header>
   );
 }
+
+export function Footer({ context, isEmbedded = false }) {
+  return (
+    <div className="border-t border-muted bg-lineHighlight">
+      <MainMenu context={context} isEmbedded={isEmbedded} />
+    </div>
+  );
+}
+
+function MainMenu({ context, isEmbedded = false }) {
+  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
+  const { isCSSAnimationDisabled } = useSettings();
+  return (
+    <div className="flex text-sm max-w-full shrink-0 overflow-hidden text-foreground px-2 h-10">
+      <button
+        onClick={handleTogglePlay}
+        title={started ? 'stop' : 'play'}
+        className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
+      >
+        {/* {!pending ? ( */}
+        <span className={cx('flex items-center space-x-2')}>
+          {/* {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />} */}
+          {started ? <StopIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
+          {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
+        </span>
+        {/* ) : (
+          <>loading...</>
+        )} */}
+      </button>
+      <button
+        onClick={handleEvaluate}
+        title="update"
+        className={cx('flex items-center space-x-1 px-2', !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50')}
+      >
+        {!isEmbedded && <span>update</span>}
+      </button>
+      {!isEmbedded && (
+        <button
+          title="share"
+          className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
+          onClick={handleShare}
+        >
+          <span>share</span>
+        </button>
+      )}
+      {!isEmbedded && (
+        <a
+          title="learn"
+          href={`${baseNoTrailing}/workshop/getting-started/`}
+          className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
+        >
+          <span>learn</span>
+        </a>
+      )}
+    </div>
+  );
+}
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index fa75e56e2..639647d61 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -2,7 +2,7 @@ import Loader from '@src/repl/components/Loader';
 import { HorizontalPanel, VerticalPanel, PanelToggle } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
-import { Header } from './Header';
+import { Footer, Header } from './Header';
 import { useSettings } from '@src/settings.mjs';
 
 // type Props = {
@@ -23,9 +23,11 @@ export default function ReplEditor(Props) {
         <div className="flex flex-col grow overflow-hidden">
           <Header context={context} isEmbedded={isEmbedded} />
           <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+          {/* <Footer context={context} isEmbedded={isEmbedded} /> */}
         </div>
         {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
       </div>
+      <Footer context={context} isEmbedded={isEmbedded} />
       <UserFacingErrorMessage error={error} />
       {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
     </div>
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index df6478fb6..bca283ae7 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -19,7 +19,7 @@ function PanelCloseButton() {
     isPanelOpen && (
       <button
         onClick={() => setIsPanelOpened(false)}
-        className={cx('px-2 py-0 text-foreground hover:opacity-50')}
+        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50')}
         aria-label="Close Menu"
       >
         <XMarkIcon className="w-6 h-6" />
@@ -60,17 +60,17 @@ export function VerticalPanel({ context }) {
     <PanelNav
       settings={settings}
       className={cx(
-        'border-l border-muted shrink-0',
+        //'border-l border-muted shrink-0',
+        'border-0 border-muted shrink-0',
         isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
       )}
     >
       <div className={cx('flex flex-col h-full')}>
-        <div className="flex justify-between w-full border-b border-muted">
+        <div className="flex justify-between w-full border-b border-muted min-h-10 max-h-10">
           <Tabs setTab={setTab} tab={tab} />
           <PanelCloseButton />
         </div>
-
-        <div className="overflow-auto h-full">
+        <div className="overflow-auto h-full border-l border-muted">
           <PanelContent context={context} tab={tab} />
         </div>
       </div>
@@ -149,7 +149,12 @@ function PanelTab({ label, isSelected, onClick }) {
 function Tabs({ className }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('w-full flex select-none max-w-full h-10 overflow-auto items-center', className)}>
+    <div
+      className={cx(
+        'px-2 border-l border-muted w-full flex select-none max-w-full h-10 max-h-10 min-h-10 overflow-auto items-center',
+        className,
+      )}
+    >
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
@@ -166,13 +171,11 @@ export function PanelToggle({ isEmbedded, isZen }) {
     panelPosition === 'right' && (
       <button
         title="share"
-        className={cx(
-          'ml-4 rounded-0 cursor-pointer hover:opacity-80 flex justify-center items-center space-x-1 text-foreground ',
-          isPanelOpen && 'hidden',
-        )}
+        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50', isPanelOpen && 'hidden')}
         onClick={() => setIsPanelOpened(!isPanelOpen)}
       >
-        <Bars3Icon className="w-5 h-5" />
+        {/* <span>menu</span> */}
+        <Bars3Icon className="w-6 h-6" />
       </button>
     )
   );

From 139b5376fc3ce9d252d4bed658d9865012e4718a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 01:16:22 +0100
Subject: [PATCH 22/35] rebrand hide button row to hide footer

---
 website/src/repl/components/ReplEditor.jsx        | 4 ++--
 website/src/repl/components/panel/SettingsTab.jsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 639647d61..d2981d2a4 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -13,7 +13,7 @@ export default function ReplEditor(Props) {
   const { context, ...editorProps } = Props;
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
-  const { panelPosition, isZen } = settings;
+  const { panelPosition, isZen, isButtonRowHidden } = settings;
   const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location;
 
   return (
@@ -27,7 +27,7 @@ export default function ReplEditor(Props) {
         </div>
         {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
       </div>
-      <Footer context={context} isEmbedded={isEmbedded} />
+      {!isButtonRowHidden && <Footer context={context} isEmbedded={isEmbedded} />}
       <UserFacingErrorMessage error={error} />
       {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
     </div>
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 113873a55..f9733b354 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -323,7 +323,7 @@ export function SettingsTab({ started }) {
           value={isSyncEnabled}
         />
         <Checkbox
-          label="Hide top buttons"
+          label="Hide footer"
           onChange={(cbEvent) => settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)}
           value={isButtonRowHidden}
         />

From 784b9c08ec28ccae7ec0f7d53fae13273632c225 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 01:16:57 +0100
Subject: [PATCH 23/35] copmuted settings

---
 website/src/settings.mjs | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 16175efb1..7c0ec25ff 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -2,6 +2,7 @@ import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel/core';
 import { isUdels } from './repl/util.mjs';
+import { computed } from 'nanostores';
 
 export const audioEngineTargets = {
   webaudio: 'webaudio',
@@ -64,11 +65,7 @@ const settings_key = `strudel-settings${instance > 0 ? instance : ''}`;
 
 export const settingsMap = persistentMap(settings_key, defaultSettings);
 
-export const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
-
-export function useSettings() {
-  const state = useStore(settingsMap);
-
+export const $settings = computed(settingsMap, (state) => {
   const userPatterns = JSON.parse(state.userPatterns);
   Object.keys(userPatterns).forEach((key) => {
     const data = userPatterns[key];
@@ -105,6 +102,12 @@ export function useSettings() {
         ? true
         : parseBoolean(state.patternAutoStart),
   };
+});
+
+export const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
+
+export function useSettings() {
+  return useStore($settings);
 }
 
 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);

From a87daf3d21b14cda8527c4ee04645c46cdad0144 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 01:31:23 +0100
Subject: [PATCH 24/35] fix: patterns tab performance

---
 website/src/repl/components/panel/PatternsTab.jsx |  9 ++++-----
 website/src/user_pattern_utils.mjs                | 11 ++++-------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 3423c57ab..44b280fb3 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -53,8 +53,7 @@ function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
 }
 
 function PatternButtons({ patterns, activePattern, onClick, started }) {
-  const viewingPatternStore = useViewingPatternData();
-  const viewingPatternData = parseJSON(viewingPatternStore);
+  const viewingPatternData = useViewingPatternData();
   const viewingPatternID = viewingPatternData.id;
   return (
     <div className="p-2">
@@ -83,8 +82,8 @@ const updateCodeWindow = (context, patternData, reset = false) => {
 export function PatternsTab({ context }) {
   const [search, setSearch] = useState('');
   const activePattern = useActivePattern();
-  const viewingPatternStore = useViewingPatternData();
-  const viewingPatternData = parseJSON(viewingPatternStore);
+  const viewingPatternData = useViewingPatternData();
+
   const { userPatterns, patternAutoStart } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
 
@@ -121,7 +120,7 @@ export function PatternsTab({ context }) {
         );
       }),
     );
-  }, [search, viewingPatternStore]);
+  }, [search, userPatterns]);
 
   const importRef = useRef();
   return (
diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs
index f087c69e0..8c452ee8d 100644
--- a/website/src/user_pattern_utils.mjs
+++ b/website/src/user_pattern_utils.mjs
@@ -1,4 +1,4 @@
-import { atom } from 'nanostores';
+import { atom, computed } from 'nanostores';
 import { useStore } from '@nanostores/react';
 import { logger } from '@strudel/core';
 import { nanoid } from 'nanoid';
@@ -36,12 +36,9 @@ export let $viewingPatternData = sessionAtom('viewingPatternData', {
   created_at: Date.now(),
 });
 
-export const getViewingPatternData = () => {
-  return parseJSON($viewingPatternData.get());
-};
-export const useViewingPatternData = () => {
-  return useStore($viewingPatternData);
-};
+const $viewingPatterns = computed($viewingPatternData, (state) => parseJSON(state));
+export const useViewingPatternData = () => useStore($viewingPatterns);
+export const getViewingPatternData = () => $viewingPatterns.get();
 
 export const setViewingPatternData = (data) => {
   $viewingPatternData.set(JSON.stringify(data));

From e9ea0bc7cca57bb3eb4a5844894215721bd5fcd8 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 01:32:04 +0100
Subject: [PATCH 25/35] fix: typo

---
 website/src/repl/components/panel/Reference.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 7bea07afa..fcd6151b2 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -228,7 +228,7 @@ export const Reference = memo(function Reference() {
                 </pre>
               ))}
             </section>
-          )) || <p className="font-sans">Searcb or select a tag to get started.</p>}
+          )) || <p className="font-sans">Search or select a tag to get started.</p>}
           {detailVisibleFunctions.length > 0 && <div className="h-screen" />}
         </div>
       </div>

From f9ed71fbf85186b5c2bd3c8984088c876a3b2bb3 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 01:35:19 +0100
Subject: [PATCH 26/35] fix: import sounds font size

---
 website/src/repl/components/panel/SoundsTab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 0a856f811..dcabce6f5 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -166,7 +166,7 @@ export function SoundsTab() {
           );
         })}
         {!soundEntries.length && soundsFilter === 'importSounds' ? (
-          <div className="prose dark:prose-invert min-w-full pt-2 pb-8 px-4">
+          <div className="prose dark:prose-invert min-w-full text-sm">
             <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
             <p>
               To import sounds into strudel, they must be contained{' '}

From 3364b9f05fc8ed98188e36eb6a94302442cc9905 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 10:12:16 +0100
Subject: [PATCH 27/35] keep it simple stupid

---
 .../repl/components/EmbeddedReplEditor.jsx    |   4 +-
 website/src/repl/components/Header.jsx        | 136 -------------
 website/src/repl/components/ReplEditor.jsx    |  19 +-
 website/src/repl/components/panel/Panel.jsx   | 181 ++++++++++++++++--
 .../src/repl/components/panel/SettingsTab.jsx |   2 +-
 5 files changed, 179 insertions(+), 163 deletions(-)
 delete mode 100644 website/src/repl/components/Header.jsx

diff --git a/website/src/repl/components/EmbeddedReplEditor.jsx b/website/src/repl/components/EmbeddedReplEditor.jsx
index 74db2c655..100d5ad95 100644
--- a/website/src/repl/components/EmbeddedReplEditor.jsx
+++ b/website/src/repl/components/EmbeddedReplEditor.jsx
@@ -2,7 +2,7 @@ import Loader from '@src/repl/components/Loader';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
-import { Header } from './Header';
+import { MainPanel } from './panel/Panel';
 
 // type Props = {
 //  context: replcontext,
@@ -14,7 +14,7 @@ export default function EmbeddedReplEditor(Props) {
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <Header context={context} embedded={true} />
+      <MainPanel context={context} embedded={true} />
       <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
       <div className="grow flex relative overflow-hidden">
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
deleted file mode 100644
index 1ed8915c0..000000000
--- a/website/src/repl/components/Header.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
-import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
-import cx from '@src/cx.mjs';
-import { useSettings, setIsZen } from '../../settings.mjs';
-import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
-import '../Repl.css';
-import { PanelToggle } from '@src/repl/components/panel/Panel';
-import { PlayIcon, StopIcon } from '@heroicons/react/16/solid';
-
-const { BASE_URL } = import.meta.env;
-const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
-
-export function Header({ context, isEmbedded = false }) {
-  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
-  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings();
-
-  return (
-    <header
-      id="header"
-      className={cx(
-        'border-b border-muted flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
-        !isZen && !isEmbedded && 'bg-lineHighlight',
-        // isZen ? 'h-12 w-8 fixed top-0 left-0' : 'h-10 sticky top-0 w-full justify-between',
-        isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
-        'flex items-center',
-      )}
-      style={{ fontFamily }}
-    >
-      <div className={cx('flex w-full flex-wrap justify-between')}>
-        <div className="px-3 py-1 flex space-x-2 select-none">
-          <h1
-            onClick={() => {
-              if (isEmbedded) window.open(window.location.href.replace('embed', ''));
-            }}
-            className={cx(
-              isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
-              'text-foreground font-bold flex space-x-2 items-center',
-            )}
-          >
-            <div
-              className={cx(
-                'mt-[1px]',
-                started && !isCSSAnimationDisabled && 'animate-spin',
-                'cursor-pointer text-blue-500',
-                isZen && 'fixed top-2 right-4',
-              )}
-              onClick={() => {
-                if (!isEmbedded) {
-                  setIsZen(!isZen);
-                }
-              }}
-            >
-              <span className="block text-foreground rotate-90">
-                <StrudelIcon className="w-5 h-5 fill-foreground" />
-              </span>
-            </div>
-            {!isZen && (
-              <div className="space-x-2">
-                <span className="">strudel</span>
-                <span className="text-sm font-medium">REPL</span>
-                {/* !isEmbedded && isButtonRowHidden && (
-                  <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
-                    DOCS
-                  </a>
-                ) */}
-              </div>
-            )}
-          </h1>
-        </div>
-        {!isZen && !isButtonRowHidden && (
-          <div className="flex grow justify-end">
-            {/* <MainMenu isEmbedded={isEmbedded} context={context} /> */}
-            <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
-          </div>
-        )}
-      </div>
-    </header>
-  );
-}
-
-export function Footer({ context, isEmbedded = false }) {
-  return (
-    <div className="border-t border-muted bg-lineHighlight">
-      <MainMenu context={context} isEmbedded={isEmbedded} />
-    </div>
-  );
-}
-
-function MainMenu({ context, isEmbedded = false }) {
-  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
-  const { isCSSAnimationDisabled } = useSettings();
-  return (
-    <div className="flex text-sm max-w-full shrink-0 overflow-hidden text-foreground px-2 h-10">
-      <button
-        onClick={handleTogglePlay}
-        title={started ? 'stop' : 'play'}
-        className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
-      >
-        {/* {!pending ? ( */}
-        <span className={cx('flex items-center space-x-2')}>
-          {/* {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />} */}
-          {started ? <StopIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
-          {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
-        </span>
-        {/* ) : (
-          <>loading...</>
-        )} */}
-      </button>
-      <button
-        onClick={handleEvaluate}
-        title="update"
-        className={cx('flex items-center space-x-1 px-2', !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50')}
-      >
-        {!isEmbedded && <span>update</span>}
-      </button>
-      {!isEmbedded && (
-        <button
-          title="share"
-          className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
-          onClick={handleShare}
-        >
-          <span>share</span>
-        </button>
-      )}
-      {!isEmbedded && (
-        <a
-          title="learn"
-          href={`${baseNoTrailing}/workshop/getting-started/`}
-          className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
-        >
-          <span>learn</span>
-        </a>
-      )}
-    </div>
-  );
-}
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index d2981d2a4..fe2e00acd 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -1,8 +1,7 @@
-import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel, VerticalPanel, PanelToggle } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
+import Loader from '@src/repl/components/Loader';
+import { HorizontalPanel, MainPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
-import { Footer, Header } from './Header';
 import { useSettings } from '@src/settings.mjs';
 
 // type Props = {
@@ -13,23 +12,23 @@ export default function ReplEditor(Props) {
   const { context, ...editorProps } = Props;
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
-  const { panelPosition, isZen, isButtonRowHidden } = settings;
+  const { panelPosition, isZen } = settings;
   const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location;
 
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <div className="grow flex justify-stretch w-full relative overflow-hidden">
-        <div className="flex flex-col grow overflow-hidden">
-          <Header context={context} isEmbedded={isEmbedded} />
+      <div className="flex flex-col grow overflow-hidden">
+        {/* <MainPanel context={context} isEmbedded={isEmbedded} className="hidden sm:block" /> */}
+        <MainPanel context={context} isEmbedded={isEmbedded} />
+        <div className="flex overflow-hidden">
           <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-          {/* <Footer context={context} isEmbedded={isEmbedded} /> */}
+          {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
         </div>
-        {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
       </div>
-      {!isButtonRowHidden && <Footer context={context} isEmbedded={isEmbedded} />}
       <UserFacingErrorMessage error={error} />
       {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+      {/* <MainPanel context={context} isEmbedded={isEmbedded} className="block sm:hidden" /> */}
     </div>
   );
 }
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index bca283ae7..b34568d39 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -1,18 +1,161 @@
+import { Bars3Icon, PlayIcon, StopIcon, XMarkIcon } from '@heroicons/react/16/solid';
 import cx from '@src/cx.mjs';
-import { setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
+import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
+import { useSettings, setIsZen, setIsPanelOpened, setActiveFooter as setTab } from '../../../settings.mjs';
+import '../../Repl.css';
+import { useLogger } from '../useLogger';
 import { ConsoleTab } from './ConsoleTab';
+import ExportTab from './ExportTab';
 import { FilesTab } from './FilesTab';
+import { PatternsTab } from './PatternsTab';
 import { Reference } from './Reference';
 import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
-import { useLogger } from '../useLogger';
 import { WelcomeTab } from './WelcomeTab';
-import { PatternsTab } from './PatternsTab';
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/16/solid';
-import ExportTab from './ExportTab';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+
+export function LogoButton({ context, isEmbedded }) {
+  const { started } = context;
+  const { isZen, isCSSAnimationDisabled, fontFamily } = useSettings();
+  return (
+    <div
+      className={cx(
+        'mt-[1px]',
+        started && !isCSSAnimationDisabled && 'animate-spin',
+        'cursor-pointer text-blue-500',
+        isZen && 'fixed top-2 right-4',
+      )}
+      onClick={() => {
+        if (!isEmbedded) {
+          setIsZen(!isZen);
+        }
+      }}
+    >
+      <span className="block text-foreground rotate-90">
+        <StrudelIcon className="w-5 h-5 fill-foreground" />
+      </span>
+    </div>
+  );
+}
+
+export function MainPanel({ context, isEmbedded = false, className }) {
+  const { isZen, isButtonRowHidden, fontFamily } = useSettings();
+  return (
+    <nav
+      id="header"
+      className={cx(
+        //'border-t sm:border-b sm:border-t-0 border-muted',
+        'border-b border-muted',
+        'flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
+        !isZen && !isEmbedded && 'bg-lineHighlight',
+        // isZen ? 'h-12 w-8 fixed top-0 left-0' : 'h-10 sticky top-0 w-full justify-between',
+        isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
+        'flex items-center',
+        className,
+      )}
+      style={{ fontFamily }}
+    >
+      <div className={cx('flex w-full justify-between')}>
+        {' '}
+        {/*flex-wrap*/}
+        <div className="px-3 py-1 flex space-x-2 select-none">
+          <h1
+            onClick={() => {
+              if (isEmbedded) window.open(window.location.href.replace('embed', ''));
+            }}
+            className={cx(
+              isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
+              'text-foreground font-bold flex space-x-2 items-center',
+            )}
+          >
+            <LogoButton context={context} isEmbedded={isEmbedded} />
+            {!isZen && (
+              <div className="space-x-2 flex items-baseline">
+                <span className="hidden sm:block">strudel</span>
+                <span className="text-sm font-medium hidden sm:block">REPL</span>
+                {/* !isEmbedded && isButtonRowHidden && (
+                  <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
+                    DOCS
+                  </a>
+                ) */}
+              </div>
+            )}
+          </h1>
+        </div>
+        {!isZen && (
+          <div className="flex grow justify-end">
+            {!isButtonRowHidden && <MainMenu isEmbedded={isEmbedded} context={context} />}
+            {/* className="hidden sm:flex" */}
+            <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export function Footer({ context, isEmbedded = false }) {
+  return (
+    <div className="border-t border-muted bg-lineHighlight block lg:hidden">
+      {/* block lg:hidden */}
+      <MainMenu context={context} isEmbedded={isEmbedded} />
+    </div>
+  );
+}
+
+function MainMenu({ context, isEmbedded = false, className }) {
+  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
+  const { isCSSAnimationDisabled } = useSettings();
+  return (
+    <div className={cx('flex text-sm max-w-full shrink-0 overflow-hidden text-foreground px-2 h-10', className)}>
+      <button
+        onClick={handleTogglePlay}
+        title={started ? 'stop' : 'play'}
+        className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
+      >
+        {/* {!pending ? ( */}
+        <span className={cx('flex items-center space-x-2')}>
+          {/* {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />} */}
+          {started ? <StopIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
+          {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
+        </span>
+        {/* ) : (
+          <>loading...</>
+        )} */}
+      </button>
+      <button
+        onClick={handleEvaluate}
+        title="update"
+        className={cx('flex items-center space-x-1 px-2', !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50')}
+      >
+        {!isEmbedded && <span>update</span>}
+      </button>
+      {!isEmbedded && (
+        <button
+          title="share"
+          className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
+          onClick={handleShare}
+        >
+          <span>share</span>
+        </button>
+      )}
+      {!isEmbedded && (
+        <a
+          title="learn"
+          href={`${baseNoTrailing}/workshop/getting-started/`}
+          className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
+        >
+          <span>learn</span>
+        </a>
+      )}
+    </div>
+  );
+}
+
 function PanelCloseButton() {
   const { isPanelOpen } = useSettings();
   return (
@@ -33,13 +176,13 @@ export function HorizontalPanel({ context }) {
   return (
     <PanelNav
       className={cx(
-        isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-8 max-h-8',
+        isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
         'overflow-hidden flex flex-col relative',
       )}
     >
-      <div className="flex justify-between min-h-8 max-h-8 grid-cols-2 items-center border-t border-muted">
-        <Tabs setTab={setTab} tab={tab} />
+      <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center border-t border-muted">
         <PanelCloseButton />
+        <Tabs setTab={setTab} tab={tab} />
       </div>
       {isPanelOpen && (
         <div className="w-full h-full overflow-auto border-t border-muted">
@@ -61,14 +204,21 @@ export function VerticalPanel({ context }) {
       settings={settings}
       className={cx(
         //'border-l border-muted shrink-0',
-        'border-0 border-muted shrink-0',
-        isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
+        'border-0 border-muted shrink-0 h-full overflow-hidden',
+        isPanelOpen
+          ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]`
+            `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]`
+          : 'min-w-12 max-w-12',
       )}
     >
       <div className={cx('flex flex-col h-full')}>
-        <div className="flex justify-between w-full border-b border-muted min-h-10 max-h-10">
-          <Tabs setTab={setTab} tab={tab} />
+        <div className="flex justify-between w-full overflow-hidden border-b border-muted min-h-10 max-h-10">
+          {/* <div className="block sm:hidden text-foreground px-3 py-2 border-l border-muted">
+            <LogoButton context={context} />
+          </div> */}
           <PanelCloseButton />
+          <Tabs setTab={setTab} tab={tab} />
+          {/* <PanelCloseButton /> */}
         </div>
         <div className="overflow-auto h-full border-l border-muted">
           <PanelContent context={context} tab={tab} />
@@ -101,7 +251,7 @@ function PanelNav({ children, className, ...props }) {
         }
       }}
       aria-label="Menu Panel"
-      className={cx('bg-lineHighlight group overflow-x-auto', className)}
+      className={cx('h-full bg-lineHighlight group overflow-x-auto', className)}
       {...props}
     >
       {children}
@@ -171,10 +321,13 @@ export function PanelToggle({ isEmbedded, isZen }) {
     panelPosition === 'right' && (
       <button
         title="share"
-        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50', isPanelOpen && 'hidden')}
+        className={cx(
+          'border-l border-muted px-2 py-0 text-foreground hover:opacity-50' /* , isPanelOpen && 'hidden' */,
+        )}
         onClick={() => setIsPanelOpened(!isPanelOpen)}
       >
         {/* <span>menu</span> */}
+        {/* isPanelOpen ? <XMarkIcon className="w-6 h-6" /> : <Bars3Icon className="w-6 h-6" /> */}
         <Bars3Icon className="w-6 h-6" />
       </button>
     )
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index f9733b354..d29534468 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -323,7 +323,7 @@ export function SettingsTab({ started }) {
           value={isSyncEnabled}
         />
         <Checkbox
-          label="Hide footer"
+          label="Hide action buttons"
           onChange={(cbEvent) => settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)}
           value={isButtonRowHidden}
         />

From 1d887e81ef033eb0dae8c20d3cfb6b69684df95a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:18:59 +0100
Subject: [PATCH 28/35] fix: h-full

---
 website/src/repl/components/ReplEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index fe2e00acd..9ddd50c7d 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -21,7 +21,7 @@ export default function ReplEditor(Props) {
       <div className="flex flex-col grow overflow-hidden">
         {/* <MainPanel context={context} isEmbedded={isEmbedded} className="hidden sm:block" /> */}
         <MainPanel context={context} isEmbedded={isEmbedded} />
-        <div className="flex overflow-hidden">
+        <div className="flex overflow-hidden h-full">
           <Code containerRef={containerRef} editorRef={editorRef} init={init} />
           {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
         </div>

From 107a3acd3a208207382142266700c1947fd7511e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:24:04 +0100
Subject: [PATCH 29/35] rename panel components + fix borders

---
 website/src/components/Udels/UdelsEditor.jsx |  4 ++--
 website/src/repl/components/ReplEditor.jsx   |  6 +++---
 website/src/repl/components/panel/Panel.jsx  | 17 ++++++++---------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/website/src/components/Udels/UdelsEditor.jsx b/website/src/components/Udels/UdelsEditor.jsx
index f58ac5fc7..b89576351 100644
--- a/website/src/components/Udels/UdelsEditor.jsx
+++ b/website/src/components/Udels/UdelsEditor.jsx
@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel } from '@src/repl/components/panel/Panel';
+import { BottomPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
@@ -20,7 +20,7 @@ export default function UdelsEditor(Props) {
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
       </div>
       <UserFacingErrorMessage error={error} />
-      <HorizontalPanel context={context} />
+      <BottomPanel context={context} />
     </div>
   );
 }
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 9ddd50c7d..437475e61 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -1,6 +1,6 @@
 import { Code } from '@src/repl/components/Code';
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel, MainPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
+import { BottomPanel, MainPanel, RightPanel } from '@src/repl/components/panel/Panel';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { useSettings } from '@src/settings.mjs';
 
@@ -23,11 +23,11 @@ export default function ReplEditor(Props) {
         <MainPanel context={context} isEmbedded={isEmbedded} />
         <div className="flex overflow-hidden h-full">
           <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-          {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
+          {!isZen && panelPosition === 'right' && <RightPanel context={context} />}
         </div>
       </div>
       <UserFacingErrorMessage error={error} />
-      {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+      {!isZen && panelPosition === 'bottom' && <BottomPanel context={context} />}
       {/* <MainPanel context={context} isEmbedded={isEmbedded} className="block sm:hidden" /> */}
     </div>
   );
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index b34568d39..1c12ebc35 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -162,7 +162,7 @@ function PanelCloseButton() {
     isPanelOpen && (
       <button
         onClick={() => setIsPanelOpened(false)}
-        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50')}
+        className={cx('px-2 py-0 text-foreground hover:opacity-50')}
         aria-label="Close Menu"
       >
         <XMarkIcon className="w-6 h-6" />
@@ -171,7 +171,7 @@ function PanelCloseButton() {
   );
 }
 
-export function HorizontalPanel({ context }) {
+export function BottomPanel({ context }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
     <PanelNav
@@ -182,7 +182,7 @@ export function HorizontalPanel({ context }) {
     >
       <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center border-t border-muted">
         <PanelCloseButton />
-        <Tabs setTab={setTab} tab={tab} />
+        <Tabs setTab={setTab} tab={tab} className={cx(isPanelOpen && 'border-l border-muted')} />
       </div>
       {isPanelOpen && (
         <div className="w-full h-full overflow-auto border-t border-muted">
@@ -193,7 +193,7 @@ export function HorizontalPanel({ context }) {
   );
 }
 
-export function VerticalPanel({ context }) {
+export function RightPanel({ context }) {
   const settings = useSettings();
   const { activeFooter: tab, isPanelOpen } = settings;
   if (!isPanelOpen) {
@@ -203,8 +203,7 @@ export function VerticalPanel({ context }) {
     <PanelNav
       settings={settings}
       className={cx(
-        //'border-l border-muted shrink-0',
-        'border-0 border-muted shrink-0 h-full overflow-hidden',
+        'border-l border-muted shrink-0 h-full overflow-hidden',
         isPanelOpen
           ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]`
             `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]`
@@ -217,10 +216,10 @@ export function VerticalPanel({ context }) {
             <LogoButton context={context} />
           </div> */}
           <PanelCloseButton />
-          <Tabs setTab={setTab} tab={tab} />
+          <Tabs setTab={setTab} tab={tab} className="border-l border-muted" />
           {/* <PanelCloseButton /> */}
         </div>
-        <div className="overflow-auto h-full border-l border-muted">
+        <div className="overflow-auto h-full">
           <PanelContent context={context} tab={tab} />
         </div>
       </div>
@@ -301,7 +300,7 @@ function Tabs({ className }) {
   return (
     <div
       className={cx(
-        'px-2 border-l border-muted w-full flex select-none max-w-full h-10 max-h-10 min-h-10 overflow-auto items-center',
+        'px-2 w-full flex select-none max-w-full h-10 max-h-10 min-h-10 overflow-auto items-center',
         className,
       )}
     >

From 8e5ca57eddadba1f3781b81cca1604d351dec10d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:29:03 +0100
Subject: [PATCH 30/35] cleanup + pending state

---
 website/src/repl/components/panel/Panel.jsx | 35 +++------------------
 1 file changed, 4 insertions(+), 31 deletions(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 1c12ebc35..f08860d3b 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -48,11 +48,9 @@ export function MainPanel({ context, isEmbedded = false, className }) {
     <nav
       id="header"
       className={cx(
-        //'border-t sm:border-b sm:border-t-0 border-muted',
         'border-b border-muted',
         'flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
-        // isZen ? 'h-12 w-8 fixed top-0 left-0' : 'h-10 sticky top-0 w-full justify-between',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
         'flex items-center',
         className,
@@ -60,8 +58,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
       style={{ fontFamily }}
     >
       <div className={cx('flex w-full justify-between')}>
-        {' '}
-        {/*flex-wrap*/}
         <div className="px-3 py-1 flex space-x-2 select-none">
           <h1
             onClick={() => {
@@ -77,11 +73,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
               <div className="space-x-2 flex items-baseline">
                 <span className="hidden sm:block">strudel</span>
                 <span className="text-sm font-medium hidden sm:block">REPL</span>
-                {/* !isEmbedded && isButtonRowHidden && (
-                  <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
-                    DOCS
-                  </a>
-                ) */}
               </div>
             )}
           </h1>
@@ -89,7 +80,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
         {!isZen && (
           <div className="flex grow justify-end">
             {!isButtonRowHidden && <MainMenu isEmbedded={isEmbedded} context={context} />}
-            {/* className="hidden sm:flex" */}
             <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
           </div>
         )}
@@ -101,7 +91,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
 export function Footer({ context, isEmbedded = false }) {
   return (
     <div className="border-t border-muted bg-lineHighlight block lg:hidden">
-      {/* block lg:hidden */}
       <MainMenu context={context} isEmbedded={isEmbedded} />
     </div>
   );
@@ -117,15 +106,10 @@ function MainMenu({ context, isEmbedded = false, className }) {
         title={started ? 'stop' : 'play'}
         className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
       >
-        {/* {!pending ? ( */}
         <span className={cx('flex items-center space-x-2')}>
-          {/* {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />} */}
           {started ? <StopIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
-          {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
+          {!isEmbedded && <span>{pending ? '...' : started ? 'stop' : 'play'}</span>}
         </span>
-        {/* ) : (
-          <>loading...</>
-        )} */}
       </button>
       <button
         onClick={handleEvaluate}
@@ -204,20 +188,13 @@ export function RightPanel({ context }) {
       settings={settings}
       className={cx(
         'border-l border-muted shrink-0 h-full overflow-hidden',
-        isPanelOpen
-          ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]`
-            `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]`
-          : 'min-w-12 max-w-12',
+        isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
       )}
     >
       <div className={cx('flex flex-col h-full')}>
         <div className="flex justify-between w-full overflow-hidden border-b border-muted min-h-10 max-h-10">
-          {/* <div className="block sm:hidden text-foreground px-3 py-2 border-l border-muted">
-            <LogoButton context={context} />
-          </div> */}
           <PanelCloseButton />
           <Tabs setTab={setTab} tab={tab} className="border-l border-muted" />
-          {/* <PanelCloseButton /> */}
         </div>
         <div className="overflow-auto h-full">
           <PanelContent context={context} tab={tab} />
@@ -319,14 +296,10 @@ export function PanelToggle({ isEmbedded, isZen }) {
     !isZen &&
     panelPosition === 'right' && (
       <button
-        title="share"
-        className={cx(
-          'border-l border-muted px-2 py-0 text-foreground hover:opacity-50' /* , isPanelOpen && 'hidden' */,
-        )}
+        title="menu"
+        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50')}
         onClick={() => setIsPanelOpened(!isPanelOpen)}
       >
-        {/* <span>menu</span> */}
-        {/* isPanelOpen ? <XMarkIcon className="w-6 h-6" /> : <Bars3Icon className="w-6 h-6" /> */}
         <Bars3Icon className="w-6 h-6" />
       </button>
     )

From 4993ec4cbf1bdb2f9fa19c23207686b232f6fecb Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:40:35 +0100
Subject: [PATCH 31/35] fix: console scroll to bottom on change + more logs +
 dont wrap

---
 website/src/repl/components/panel/ConsoleTab.jsx | 13 +++++++++++--
 website/src/repl/components/useLogger.jsx        |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index 64981937f..54a8ff549 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -2,13 +2,21 @@ import cx from '@src/cx.mjs';
 import { useSettings } from '../../../settings.mjs';
 import { useStore } from '@nanostores/react';
 import { $strudel_log_history } from '../useLogger';
+import { useEffect, useRef } from 'react';
 
 export function ConsoleTab() {
   const log = useStore($strudel_log_history);
   const { fontFamily } = useSettings();
+  const scrollRef = useRef();
+  // scroll to bottom when log changes
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [log]);
   return (
     <div id="console-tab" className="break-all w-full h-full" style={{ fontFamily }}>
-      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md">
+      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md" ref={scrollRef}>
         {' '}
         {/* bg-background */}
         {log.map((l, i) => {
@@ -18,12 +26,13 @@ export function ConsoleTab() {
             <div
               key={l.id}
               className={cx(
+                'whitespace-nowrap',
                 l.type === 'error' ? 'text-background bg-foreground' : 'text-foreground',
                 l.type === 'highlight' && 'underline',
               )}
               style={color ? { color } : {}}
             >
-              <span dangerouslySetInnerHTML={{ __html: message }} />
+              <span dangerouslySetInnerHTML={{ __html: message }} className="whitespace-nowrap" />
               {l.count ? ` (${l.count})` : ''}
             </div>
           );
diff --git a/website/src/repl/components/useLogger.jsx b/website/src/repl/components/useLogger.jsx
index fdd56606d..4a87ac075 100644
--- a/website/src/repl/components/useLogger.jsx
+++ b/website/src/repl/components/useLogger.jsx
@@ -21,7 +21,7 @@ function getUpdatedLog(log, event) {
   } else {
     log = log.concat([{ message, type, id, data }]);
   }
-  return log.slice(-20);
+  return log.slice(-40);
 }
 
 export function useLogger() {

From 6e61f3cdb6aeabfff90488535afd85c505867e59 Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Thu, 22 Jan 2026 13:52:57 -0600
Subject: [PATCH 32/35] Make default alignment configurable

---
 packages/core/pattern.mjs | 193 ++++++++++++++++++++------------------
 1 file changed, 104 insertions(+), 89 deletions(-)

diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index b7a047bfc..8a2e82c77 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -1055,91 +1055,88 @@ function _composeOp(a, b, func) {
   return func(a, b);
 }
 
-// Make composers
-(function () {
-  // pattern composers
-  const composers = {
-    set: [(a, b) => b],
-    keep: [(a) => a],
-    keepif: [(a, b) => (b ? a : undefined)],
+// pattern composers
+const COMPOSERS = {
+  set: [(a, b) => b],
+  keep: [(a) => a],
+  keepif: [(a, b) => (b ? a : undefined)],
 
-    // numerical functions
-    /**
-     *
-     * Assumes a pattern of numbers. Adds the given number to each item in the pattern.
-     * @name add
-     * @memberof Pattern
-     * @tags math
-     * @example
-     * // Here, the triad 0, 2, 4 is shifted by different amounts
-     * n("0 2 4".add("<0 3 4 0>")).scale("C:major")
-     * // Without add, the equivalent would be:
-     * // n("<[0 2 4] [3 5 7] [4 6 8] [0 2 4]>").scale("C:major")
-     * @example
-     * // You can also use add with notes:
-     * note("c3 e3 g3".add("<0 5 7 0>"))
-     * // Behind the scenes, the notes are converted to midi numbers:
-     * // note("48 52 55".add("<0 5 7 0>"))
-     */
-    add: [numeralArgs((a, b) => a + b)], // support string concatenation
-    /**
-     *
-     * Like add, but the given numbers are subtracted.
-     * @name sub
-     * @memberof Pattern
-     * @tags math
-     * @example
-     * n("0 2 4".sub("<0 1 2 3>")).scale("C4:minor")
-     * // See add for more information.
-     */
-    sub: [numeralArgs((a, b) => a - b)],
-    /**
-     *
-     * Multiplies each number by the given factor.
-     * @name mul
-     * @memberof Pattern
-     * @tags math
-     * @example
-     * "<1 1.5 [1.66, <2 2.33>]>*4".mul(150).freq()
-     */
-    mul: [numeralArgs((a, b) => a * b)],
-    /**
-     *
-     * Divides each number by the given factor.
-     * @name div
-     * @memberof Pattern
-     * @tags math
-     */
-    div: [numeralArgs((a, b) => a / b)],
-    mod: [numeralArgs(_mod)],
-    pow: [numeralArgs(Math.pow)],
-    log2: [numeralArgs(Math.log2)],
-    band: [numeralArgs((a, b) => a & b)],
-    bor: [numeralArgs((a, b) => a | b)],
-    bxor: [numeralArgs((a, b) => a ^ b)],
-    blshift: [numeralArgs((a, b) => a << b)],
-    brshift: [numeralArgs((a, b) => a >> b)],
+  // numerical functions
+  /**
+   *
+   * Assumes a pattern of numbers. Adds the given number to each item in the pattern.
+   * @name add
+   * @memberof Pattern
+   * @tags math
+   * @example
+   * // Here, the triad 0, 2, 4 is shifted by different amounts
+   * n("0 2 4".add("<0 3 4 0>")).scale("C:major")
+   * // Without add, the equivalent would be:
+   * // n("<[0 2 4] [3 5 7] [4 6 8] [0 2 4]>").scale("C:major")
+   * @example
+   * // You can also use add with notes:
+   * note("c3 e3 g3".add("<0 5 7 0>"))
+   * // Behind the scenes, the notes are converted to midi numbers:
+   * // note("48 52 55".add("<0 5 7 0>"))
+   */
+  add: [numeralArgs((a, b) => a + b)], // support string concatenation
+  /**
+   *
+   * Like add, but the given numbers are subtracted.
+   * @name sub
+   * @memberof Pattern
+   * @tags math
+   * @example
+   * n("0 2 4".sub("<0 1 2 3>")).scale("C4:minor")
+   * // See add for more information.
+   */
+  sub: [numeralArgs((a, b) => a - b)],
+  /**
+   *
+   * Multiplies each number by the given factor.
+   * @name mul
+   * @memberof Pattern
+   * @tags math
+   * @example
+   * "<1 1.5 [1.66, <2 2.33>]>*4".mul(150).freq()
+   */
+  mul: [numeralArgs((a, b) => a * b)],
+  /**
+   *
+   * Divides each number by the given factor.
+   * @name div
+   * @memberof Pattern
+   * @tags math
+   */
+  div: [numeralArgs((a, b) => a / b)],
+  mod: [numeralArgs(_mod)],
+  pow: [numeralArgs(Math.pow)],
+  log2: [numeralArgs(Math.log2)],
+  band: [numeralArgs((a, b) => a & b)],
+  bor: [numeralArgs((a, b) => a | b)],
+  bxor: [numeralArgs((a, b) => a ^ b)],
+  blshift: [numeralArgs((a, b) => a << b)],
+  brshift: [numeralArgs((a, b) => a >> b)],
 
-    // TODO - force numerical comparison if both look like numbers?
-    lt: [(a, b) => a < b],
-    gt: [(a, b) => a > b],
-    lte: [(a, b) => a <= b],
-    gte: [(a, b) => a >= b],
-    eq: [(a, b) => a == b],
-    eqt: [(a, b) => a === b],
-    ne: [(a, b) => a != b],
-    net: [(a, b) => a !== b],
-    and: [(a, b) => a && b],
-    or: [(a, b) => a || b],
+  // TODO - force numerical comparison if both look like numbers?
+  lt: [(a, b) => a < b],
+  gt: [(a, b) => a > b],
+  lte: [(a, b) => a <= b],
+  gte: [(a, b) => a >= b],
+  eq: [(a, b) => a == b],
+  eqt: [(a, b) => a === b],
+  ne: [(a, b) => a != b],
+  net: [(a, b) => a !== b],
+  and: [(a, b) => a && b],
+  or: [(a, b) => a || b],
 
-    //  bitwise ops
-    func: [(a, b) => b(a)],
-  };
-
-  const hows = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Reset', 'Restart', 'Poly'];
+  //  bitwise ops
+  func: [(a, b) => b(a)],
+};
 
+const _setupAlignments = () => {
   // generate methods to do what and how
-  for (const [what, [op, preprocess]] of Object.entries(composers)) {
+  for (const [what, [op, preprocess]] of Object.entries(COMPOSERS)) {
     // make plain version, e.g. pat._add(value) adds that plain value
     // to all the values in pat
     Pattern.prototype['_' + what] = function (value) {
@@ -1148,16 +1145,18 @@ function _composeOp(a, b, func) {
 
     // make patternified monster version
     Object.defineProperty(Pattern.prototype, what, {
+      // Set to configurable so we can update if the default alignment changes
+      configurable: true,
       // a getter that returns a function, so 'pat' can be
       // accessed by closures that are methods of that function..
       get: function () {
         const pat = this;
 
         // wrap the 'in' function as default behaviour
-        const wrapper = (...other) => pat[what]['in'](...other);
+        const wrapper = (...other) => pat[what][DEFAULT_ALIGNMENT](...other);
 
         // add methods to that function for each behaviour
-        for (const how of hows) {
+        for (const how of ALIGNMENTS) {
           wrapper[how.toLowerCase()] = function (...other) {
             var howpat = pat;
             other = sequence(other);
@@ -1182,15 +1181,23 @@ function _composeOp(a, b, func) {
         return wrapper;
       },
     });
-
-    // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
-    for (const how of hows) {
-      Pattern.prototype[how.toLowerCase()] = function (...args) {
-        return this.set[how.toLowerCase()](args);
-      };
-    }
   }
+};
 
+let DEFAULT_ALIGNMENT = 'in';
+const ALIGNMENTS = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Reset', 'Restart', 'Poly'];
+const ALIGNMENT_KEYS = ALIGNMENTS.map((how) => how.toLowerCase());
+
+// Make composers
+(function () {
+  _setupAlignments();
+
+  // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
+  for (const how of ALIGNMENTS) {
+    Pattern.prototype[how.toLowerCase()] = function (...args) {
+      return this.set[how.toLowerCase()](args);
+    };
+  }
   // binary composers
   /**
    * Applies the given structure to the pattern:
@@ -1249,6 +1256,14 @@ function _composeOp(a, b, func) {
   };
 })();
 
+export const setDefaultAlignment = (alignment) => {
+  alignment = alignment?.toLowerCase();
+  if (DEFAULT_ALIGNMENT !== alignment && ALIGNMENT_KEYS.includes(alignment)) {
+    DEFAULT_ALIGNMENT = alignment;
+    _setupAlignments();
+  }
+};
+
 // aliases
 export const polyrhythm = stack;
 export const pr = stack;

From d79d122f685832710a4221782a37ce292129a9ab Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Thu, 22 Jan 2026 14:08:26 -0600
Subject: [PATCH 33/35] Add docstring and example

---
 packages/core/pattern.mjs                 | 14 +++++++++++
 test/__snapshots__/examples.test.mjs.snap | 29 +++++++++++++++++++++++
 vitest.setup.mjs                          |  2 ++
 3 files changed, 45 insertions(+)

diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index 8a2e82c77..c9b14891e 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -1256,6 +1256,20 @@ const ALIGNMENT_KEYS = ALIGNMENTS.map((how) => how.toLowerCase());
   };
 })();
 
+/**
+ * Sets the default [alignment](https://strudel.cc/technical-manual/alignment/) to be used by Strudel.
+ * The default default alignment is `in`, meaning that patterns to the left will (typically) dictate
+ * the event timings when combined with patterns to the right. By changing alignment to `out`, the opposite
+ * will happen. With `mix`, they will combine their event timings.
+ *
+ * Note that we say the _default_ alignment, because alignments can also be set explicitly with calls like
+ * `add.mix`, `set.squeeze`, etc.
+ *
+ * @param {string} name Default alignment to use. Options: 'in', 'out', 'mix', 'squeeze', 'squeezeout', 'reset', 'restart', 'poly'
+ * @example
+ * setDefaultAlignment('mix') // also try 'in', 'out', 'squeeze', etc.
+ * s("saw").vel("1 0.5").note("F A C E").delay("0 0.2 0.3")
+ */
 export const setDefaultAlignment = (alignment) => {
   alignment = alignment?.toLowerCase();
   if (DEFAULT_ALIGNMENT !== alignment && ALIGNMENT_KEYS.includes(alignment)) {
diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index 284f18557..1713993bc 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -10874,6 +10874,35 @@ exports[`runs examples > example "seqPLoop" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "setDefaultAlignment" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 1/4 → 1/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 1/3 → 1/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 1/2 → 2/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 2/3 → 3/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 3/4 → 1/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+  "[ 1/1 → 5/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 5/4 → 4/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 4/3 → 3/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 3/2 → 5/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 5/3 → 7/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 7/4 → 2/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+  "[ 2/1 → 9/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 9/4 → 7/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 7/3 → 5/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 5/2 → 8/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 8/3 → 11/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 11/4 → 3/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+  "[ 3/1 → 13/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 13/4 → 10/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 10/3 → 7/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 7/2 → 11/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 11/3 → 15/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 15/4 → 4/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+]
+`;
+
 exports[`runs examples > example "setGainCurve" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | s:bd gain:0.5 ]",
diff --git a/vitest.setup.mjs b/vitest.setup.mjs
index ea965df6d..654aab42d 100644
--- a/vitest.setup.mjs
+++ b/vitest.setup.mjs
@@ -1,7 +1,9 @@
 import { afterEach } from 'vitest';
 import { useRNG } from './packages/core/signal.mjs';
+import { setDefaultAlignment } from './packages/core/pattern.mjs';
 
 afterEach(() => {
   // Avoid bleed between tests
   useRNG('legacy');
+  setDefaultAlignment('in');
 });

From 0001d9c27bb4ab7eccef31eab90ee4d84c539ce0 Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Thu, 22 Jan 2026 14:24:45 -0600
Subject: [PATCH 34/35] Change name to setDefaultJoin

---
 packages/core/pattern.mjs                 | 17 ++++++++---------
 test/__snapshots__/examples.test.mjs.snap |  2 +-
 vitest.setup.mjs                          |  4 ++--
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index c9b14891e..df9990982 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -1257,20 +1257,19 @@ const ALIGNMENT_KEYS = ALIGNMENTS.map((how) => how.toLowerCase());
 })();
 
 /**
- * Sets the default [alignment](https://strudel.cc/technical-manual/alignment/) to be used by Strudel.
- * The default default alignment is `in`, meaning that patterns to the left will (typically) dictate
- * the event timings when combined with patterns to the right. By changing alignment to `out`, the opposite
- * will happen. With `mix`, they will combine their event timings.
+ * Sets the default method of combining events from two patterns (aka [alignment](https://strudel.cc/technical-manual/alignment/)) in Strudel.
+ * The default method is 'in', meaning that patterns to the left will (typically) dictate the event timings when combined with patterns to the right.
+ * By changing alignment to 'out', the opposite will happen. With 'mix', they will combine their event timings.
  *
- * Note that we say the _default_ alignment, because alignments can also be set explicitly with calls like
- * `add.mix`, `set.squeeze`, etc.
+ * Note that we say the _default_ method, because alignments can also be set explicitly with calls like
+ * 'add.mix', 'set.squeeze', etc.
  *
- * @param {string} name Default alignment to use. Options: 'in', 'out', 'mix', 'squeeze', 'squeezeout', 'reset', 'restart', 'poly'
+ * @param {string} method Default join method to use. Options: 'in', 'out', 'mix', 'squeeze', 'squeezeout', 'reset', 'restart', 'poly'
  * @example
- * setDefaultAlignment('mix') // also try 'in', 'out', 'squeeze', etc.
+ * setDefaultJoin('mix') // also try 'in', 'out', 'squeeze', etc.
  * s("saw").vel("1 0.5").note("F A C E").delay("0 0.2 0.3")
  */
-export const setDefaultAlignment = (alignment) => {
+export const setDefaultJoin = (alignment) => {
   alignment = alignment?.toLowerCase();
   if (DEFAULT_ALIGNMENT !== alignment && ALIGNMENT_KEYS.includes(alignment)) {
     DEFAULT_ALIGNMENT = alignment;
diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index 1713993bc..4d2675308 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -10874,7 +10874,7 @@ exports[`runs examples > example "seqPLoop" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "setDefaultAlignment" example index 0 1`] = `
+exports[`runs examples > example "setDefaultJoin" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | s:saw velocity:1 note:F delay:0 ]",
   "[ 1/4 → 1/3 | s:saw velocity:1 note:A delay:0 ]",
diff --git a/vitest.setup.mjs b/vitest.setup.mjs
index 654aab42d..7b582a458 100644
--- a/vitest.setup.mjs
+++ b/vitest.setup.mjs
@@ -1,9 +1,9 @@
 import { afterEach } from 'vitest';
 import { useRNG } from './packages/core/signal.mjs';
-import { setDefaultAlignment } from './packages/core/pattern.mjs';
+import { setDefaultJoin } from './packages/core/pattern.mjs';
 
 afterEach(() => {
   // Avoid bleed between tests
   useRNG('legacy');
-  setDefaultAlignment('in');
+  setDefaultJoin('in');
 });

From f99b13efc27727dace0e1bcb690543cceae5ae00 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 21:46:48 +0100
Subject: [PATCH 35/35] fix: zen mode lost border

---
 website/src/repl/components/panel/Panel.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index f08860d3b..3b4dd5482 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -48,9 +48,8 @@ export function MainPanel({ context, isEmbedded = false, className }) {
     <nav
       id="header"
       className={cx(
-        'border-b border-muted',
         'flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
-        !isZen && !isEmbedded && 'bg-lineHighlight',
+        !isZen && !isEmbedded && 'border-b border-muted bg-lineHighlight',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
         'flex items-center',
         className,