From 07bcaa65a9c35668701acd44f4bc1fed328cb674 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Fri, 6 Sep 2024 00:16:30 -0400
Subject: [PATCH 01/12] create meta params

---
 packages/core/controls.mjs    | 43 +++++++++++++++++++++++++++++++++++
 packages/superdough/synth.mjs |  5 ++--
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 5a2752944..e0057c675 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -73,6 +73,49 @@ export function registerControl(names, ...aliases) {
  */
 export const { s, sound } = registerControl(['s', 'n', 'gain'], 'sound');
 
+/**
+ * generic macro param for a sound synth
+ *
+ * @name z1
+ * @synonyms z
+ * @param {number | Pattern}
+ * @example
+ * n(run(8)).scale("D:pentatonic").s("supersaw").x(".01 .75").release(0.5)
+ *
+ */
+export const { z1, z } = registerControl(['z1', 'z2', 'z3', 'z4'], 'z');
+
+/**
+ * generic macro param for a sound synth
+ *
+ * @name z2
+ * @param {number | Pattern}
+ * @example
+ * n(run(8)).scale("D:pentatonic").s("supersaw").x2("2 .7").release(0.5)
+ *
+ */
+export const { z2 } = registerControl('z2');
+
+/**
+ * generic macro param for a sound synth
+ *
+ * @name z3
+ * @param {number | Pattern}
+ * @example
+ * n(run(8)).scale("D:pentatonic").s("supersaw").x3(".1 .75").release(0.5)
+ *
+ */
+export const { z4 } = registerControl('z3');
+
+/**
+ * generic macro param for a sound synth
+ *
+ * @name x4
+ * @param {number | Pattern}
+ *
+ */
+export const { x4 } = registerControl('z4');
+
 /**
  * Define a custom webaudio node to use as a sound source.
  *
diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs
index 621a6e598..113fb4e5e 100644
--- a/packages/superdough/synth.mjs
+++ b/packages/superdough/synth.mjs
@@ -73,8 +73,9 @@ export function registerSynthSounds() {
     'supersaw',
     (begin, value, onended) => {
       const ac = getAudioContext();
-      let { duration, n, unison = 5, spread = 0.6, detune } = value;
-      detune = detune ?? n ?? 0.18;
+      const {z1, z2, z3} = value;
+      let { duration, n, unison = z2 ?? 5, spread = z3 ?? 0.6, detune, } = value;
+      detune = detune ?? n ?? z1 ?? 0.18;
       const frequency = getFrequencyFromValue(value);
 
       const [attack, decay, sustain, release] = getADSRValues(

From 96802a271cd8bda2eb14cdb76da944dbef977099 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Sun, 13 Oct 2024 23:24:54 -0400
Subject: [PATCH 02/12] feat: menu pinning

---
 website/src/components/Udels/UdelsEditor.jsx  |   4 +-
 website/src/docs/Icon.jsx                     |   2 +-
 website/src/repl/components/ReplEditor.jsx    |   7 +-
 .../src/repl/components/panel/ConsoleTab.jsx  |   2 +-
 website/src/repl/components/panel/Panel.jsx   | 201 +++++++++++-------
 .../src/repl/components/panel/PatternsTab.jsx |   4 +-
 .../src/repl/components/panel/SoundsTab.jsx   |   2 +-
 7 files changed, 139 insertions(+), 83 deletions(-)

diff --git a/website/src/components/Udels/UdelsEditor.jsx b/website/src/components/Udels/UdelsEditor.jsx
index 2d05640f3..47e7a3286 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 { Panel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel, } 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} />
-      <Panel context={context} />
+      <HorizontalPanel context={context}  />
     </div>
   );
 }
diff --git a/website/src/docs/Icon.jsx b/website/src/docs/Icon.jsx
index 48b05d87f..8a58da127 100644
--- a/website/src/docs/Icon.jsx
+++ b/website/src/docs/Icon.jsx
@@ -52,7 +52,7 @@ export function Icon({ type }) {
               d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z"
               clipRule="evenodd"
             />
-          ),
+          ), 
         }[type]
       }
     </svg>
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 83317bf37..f0b11ff42 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 { Panel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { Header } from './Header';
@@ -15,16 +15,17 @@ export default function ReplEditor(Props) {
   const settings = useSettings();
   const { panelPosition } = settings;
 
+
   return (
     <div className="h-full flex flex-col relative">
       <Loader active={pending} />
       <Header context={context} />
       <div className="grow flex relative overflow-hidden">
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-        {panelPosition === 'right' && <Panel context={context} />}
+        {panelPosition === 'right' && <VerticalPanel context={context} />}
       </div>
       <UserFacingErrorMessage error={error} />
-      {panelPosition === 'bottom' && <Panel context={context} />}
+      {panelPosition === 'bottom' && <HorizontalPanel context={context} />}
     </div>
   );
 }
diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index e1bbbe647..02e40e489 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ConsoleTab({ log }) {
   return (
-    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-4">
       <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
 ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
 ███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index a7bb6a83d..fea52786c 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -1,10 +1,9 @@
-import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel/core';
 import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
-import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
-import { setActiveFooter, useSettings } from '../../../settings.mjs';
+import { useCallback, useState } from 'react';
+import { setActiveFooter as setTab, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
@@ -12,33 +11,84 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import useClient from '@src/useClient.mjs';
-
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+import { ChevronLeftIcon } from '@heroicons/react/16/solid';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
-export function Panel({ context }) {
-  const footerContent = useRef();
-  const [log, setLog] = useState([]);
-  const { activeFooter, isZen, panelPosition } = useSettings();
+export function HorizontalPanel({ context }) {
+  const [pinned, setPinned] = useState(true);
+  const settings = useSettings();
+  const tab = settings.activeFooter;
+  return (
+    <PanelNav
+      className={cx(
+        'hover:max-h-[360px] hover:min-h-[360px] flex flex-col overflow-hidden ',
+        pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-8 max-h-8',
+      )}
+    >
+    
+      <div className={cx('group-hover:flex flex-col h-full overflow-auto', pinned ? 'flex' : 'hidden')}>
+        <PanelContent context={context} tab={tab} />
+      </div>
+      <div className="flex justify-between min-h-8 max-h-8">
+        <Tabs setTab={setTab} tab={tab} pinned={pinned} />
+        <PinButton pinned={pinned} setPinned={setPinned} />
+      </div>
+    </PanelNav>
+  );
+}
+
+export function VerticalPanel({ context }) {
+  const [pinned, setPinned] = useState(true);
+  const settings = useSettings();
+  const tab = settings.activeFooter;
+  return (
+    <PanelNav
+      className={cx(
+        'hover:min-w-[600px] hover:max-w-[600px]',
+        pinned ? `min-w-[600px] max-w-[600px]` : ' min-w-8 max-w-8',
+      )}
+    >
+      <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
+        <div className="flex justify-between">
+          <Tabs setTab={setTab} tab={tab} pinned={pinned} />
+          <PinButton pinned={pinned} setPinned={setPinned} />
+        </div>
 
-  useIsomorphicLayoutEffect(() => {
-    if (footerContent.current && activeFooter === 'console') {
-      // scroll log box to bottom when log changes
-      footerContent.current.scrollTop = footerContent.current?.scrollHeight;
-    }
-  }, [log, activeFooter]);
-  useIsomorphicLayoutEffect(() => {
-    if (!footerContent.current) {
-    } else if (activeFooter === 'console') {
-      footerContent.current.scrollTop = footerContent.current?.scrollHeight;
-    } else {
-      footerContent.current.scrollTop = 0;
-    }
-  }, [activeFooter]);
+        <div className="overflow-auto">
+          <PanelContent context={context} tab={tab} />
+        </div>
+      </div>
 
+      <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center  h-full group-hover:hidden ')}>
+        <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
+      </div>
+    </PanelNav>
+  );
+}
+
+const tabNames = {
+  welcome: 'intro',
+  patterns: 'patterns',
+  sounds: 'sounds',
+  console: 'console',
+  reference: 'reference',
+  settings: 'settings',
+};
+if (TAURI) {
+  tabNames.files = 'files';
+}
+
+function PanelNav({ children, className }) {
+  return (
+    <nav aria-label="Settings Menu" className={cx('bg-lineHighlight group transition-all', className)}>
+      {children}
+    </nav>
+  );
+}
+
+function PanelContent({ context, tab }) {
+  const [log, setLog] = useState([]);
   useLogger(
     useCallback((e) => {
       const { message, type, data } = e.detail;
@@ -60,66 +110,71 @@ export function Panel({ context }) {
     }, []),
   );
 
-  const PanelTab = ({ children, name, label }) => (
+  switch (tab) {
+    case tabNames.patterns:
+      return <PatternsTab context={context} />;
+    case tabNames.console:
+      return <ConsoleTab log={log} />;
+    case tabNames.sounds:
+      return <SoundsTab />;
+    case tabNames.reference:
+      return <Reference />;
+    case tabNames.settings:
+      return <SettingsTab started={context.started} />;
+    case tabNames.files:
+      return <FilesTab />;
+    default:
+      return <WelcomeTab context={context} />;
+  }
+}
+
+function PanelTab({ label, isSelected, onClick }) {
+  return (
     <>
       <div
-        onClick={() => setActiveFooter(name)}
+        onClick={onClick}
         className={cx(
           'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-foreground' : 'border-transparent',
+          isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
-        {label || name}
+        {label}
       </div>
-      {activeFooter === name && <>{children}</>}
     </>
   );
-  const client = useClient();
-  if (isZen) {
-    return null;
-  }
-
-  const isActive = activeFooter !== '';
+}
+function Tabs({ setTab, tab }) {
+  return (
+    <div className={cx('flex select-none max-w-full overflow-auto pb-2')}>
+      {Object.keys(tabNames).map((key) => {
+        const val = tabNames[key];
+        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
+      })}
+    </div>
+  );
+}
 
-  let positions = {
-    right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
-    bottom: cx('relative', isActive ? 'h-[360px] min-h-[360px]' : ''),
-  };
-  if (!client) {
-    return null;
-  }
+function PinButton({ pinned, setPinned }) {
   return (
-    <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
-      <div className="flex justify-between px-2">
-        <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
-          <PanelTab name="intro" label="welcome" />
-          <PanelTab name="patterns" />
-          <PanelTab name="sounds" />
-          <PanelTab name="console" />
-          <PanelTab name="reference" />
-          <PanelTab name="settings" />
-          {TAURI && <PanelTab name="files" />}
-        </div>
-        {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel">
-            <XMarkIcon className="w-5 h-5" />
-          </button>
-        )}
-      </div>
-      {activeFooter !== '' && (
-        <div className="relative overflow-hidden">
-          <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
-            {activeFooter === 'intro' && <WelcomeTab context={context} />}
-            {activeFooter === 'patterns' && <PatternsTab context={context} />}
-            {activeFooter === 'console' && <ConsoleTab log={log} />}
-            {activeFooter === 'sounds' && <SoundsTab />}
-            {activeFooter === 'reference' && <Reference />}
-            {activeFooter === 'settings' && <SettingsTab started={context.started} />}
-            {activeFooter === 'files' && <FilesTab />}
-          </div>
-        </div>
+    <button
+      onClick={() => setPinned(!pinned)}
+      className={cx(
+        'text-foreground w-8 h-8 items-center justify-center p-1.5 group-hover:flex',
+        pinned ? 'flex' : 'hidden',
       )}
-    </nav>
+      aria-label="Pin Settings Menu"
+    >
+      <svg
+        stroke="currentColor"
+        fill={'currentColor'}
+        strokeWidth="0"
+        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>
   );
 }
 
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 5e9119b16..bf26c2dc5 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
   const autoResetPatternOnChange = !isUdels();
 
   return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2 pb-4 flex flex-col overflow-hidden max-h-full">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2  flex flex-col overflow-hidden max-h-full">
       <ButtonGroup
         value={patternFilter}
         onChange={(value) => settingsMap.setKey('patternFilter', value)}
@@ -155,7 +155,7 @@ export function PatternsTab({ context }) {
         </div>
       )}
 
-      <section className="flex overflow-y-scroll max-h-full flex-col">
+      <section className="flex overflow-y-scroll max-h-full flex-col pb-4">
         {patternFilter === patternFilterName.user && (
           <PatternButtons
             onClick={(id) =>
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 73e05de3a..27c89326c 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -74,7 +74,7 @@ export function SoundsTab() {
         ></ButtonGroup>
         <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </div>
-      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
+      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal pb-4">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
             <span

From b0d2115f43ff585464f2a1be870a8c1de1298530 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 12:45:55 -0400
Subject: [PATCH 03/12] feat: mobile responsiveness

---
 .../src/repl/components/panel/ConsoleTab.jsx  |  2 +-
 website/src/repl/components/panel/Panel.jsx   | 67 +++++++++++--------
 .../src/repl/components/panel/PatternsTab.jsx |  4 +-
 .../src/repl/components/panel/Reference.jsx   | 42 ++++++------
 .../src/repl/components/panel/SettingsTab.jsx |  2 +-
 .../src/repl/components/panel/SoundsTab.jsx   | 13 ++--
 website/src/settings.mjs                      |  5 +-
 website/src/styles/index.css                  |  1 +
 website/tailwind.config.cjs                   |  1 +
 9 files changed, 78 insertions(+), 59 deletions(-)

diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index 02e40e489..f0fca584c 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ConsoleTab({ log }) {
   return (
-    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-4">
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-2">
       <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
 ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
 ███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index fea52786c..bf67f7253 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -3,7 +3,7 @@ import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
 import { useCallback, useState } from 'react';
-import { setActiveFooter as setTab, useSettings } from '../../../settings.mjs';
+import { setPanelPinned, setActiveFooter as setTab, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
@@ -16,50 +16,56 @@ import { ChevronLeftIcon } from '@heroicons/react/16/solid';
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
 export function HorizontalPanel({ context }) {
-  const [pinned, setPinned] = useState(true);
   const settings = useSettings();
-  const tab = settings.activeFooter;
+  const { isPanelPinned: pinned, activeFooter: tab } = settings;
+  const [isHovered, setIsHovered] = useState(false);
+  const showContent = isHovered || pinned;
+
   return (
     <PanelNav
+      onMouseEnter={(x) => setIsHovered(true)}
+      onMouseLeave={(x) => setIsHovered(false)}
       className={cx(
-        'hover:max-h-[360px] hover:min-h-[360px] flex flex-col overflow-hidden ',
-        pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-8 max-h-8',
+        'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col',
+        pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
       )}
     >
-    
-      <div className={cx('group-hover:flex flex-col h-full overflow-auto', pinned ? 'flex' : 'hidden')}>
-        <PanelContent context={context} tab={tab} />
-      </div>
-      <div className="flex justify-between min-h-8 max-h-8">
+      {showContent && (
+        <div className="flex h-full overflow-auto">
+          <PanelContent context={context} tab={tab} />
+        </div>
+      )}
+      <div className="flex justify-between min-h-10 max-h-10 pr-2 items-center">
         <Tabs setTab={setTab} tab={tab} pinned={pinned} />
-        <PinButton pinned={pinned} setPinned={setPinned} />
+        <PinButton pinned={pinned} setPinned={setPanelPinned} />
       </div>
     </PanelNav>
   );
 }
 
 export function VerticalPanel({ context }) {
-  const [pinned, setPinned] = useState(true);
   const settings = useSettings();
-  const tab = settings.activeFooter;
+  const { isPanelPinned: pinned, activeFooter: tab } = settings;
+  const [isHovered, setIsHovered] = useState(false);
+  const showContent = isHovered || pinned;
+
   return (
     <PanelNav
-      className={cx(
-        'hover:min-w-[600px] hover:max-w-[600px]',
-        pinned ? `min-w-[600px] max-w-[600px]` : ' min-w-8 max-w-8',
-      )}
+      onMouseEnter={(x) => setIsHovered(true)}
+      onMouseLeave={(x) => setIsHovered(false)}
+      className={cx('hover:w-[600px]', pinned ? `w-[600px]` : 'w-8')}
     >
       <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
-        <div className="flex justify-between">
+        <div className="flex justify-between w-full ">
           <Tabs setTab={setTab} tab={tab} pinned={pinned} />
-          <PinButton pinned={pinned} setPinned={setPinned} />
-        </div>
-
-        <div className="overflow-auto">
-          <PanelContent context={context} tab={tab} />
+          <PinButton pinned={pinned} setPinned={setPanelPinned} />
         </div>
+        {showContent && (
+          <div className="overflow-auto">
+            <PanelContent context={context} tab={tab} />
+          </div>
+        )}
       </div>
-
       <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center  h-full group-hover:hidden ')}>
         <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
       </div>
@@ -71,17 +77,21 @@ const tabNames = {
   welcome: 'intro',
   patterns: 'patterns',
   sounds: 'sounds',
-  console: 'console',
   reference: 'reference',
+  console: 'console',
   settings: 'settings',
 };
 if (TAURI) {
   tabNames.files = 'files';
 }
 
-function PanelNav({ children, className }) {
+function PanelNav({ children, className, ...props }) {
   return (
-    <nav aria-label="Settings Menu" className={cx('bg-lineHighlight group transition-all', className)}>
+    <nav
+      aria-label="Settings Menu"
+      className={cx('bg-lineHighlight group transition-all overflow-x-auto', className)}
+      {...props}
+    >
       {children}
     </nav>
   );
@@ -159,7 +169,7 @@ function PinButton({ pinned, setPinned }) {
     <button
       onClick={() => setPinned(!pinned)}
       className={cx(
-        'text-foreground w-8 h-8 items-center justify-center p-1.5 group-hover:flex',
+        '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 Settings Menu"
@@ -168,6 +178,7 @@ function PinButton({ pinned, setPinned }) {
         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"
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index bf26c2dc5..31a82d963 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -77,7 +77,7 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
 
 function ActionButton({ children, onClick, label, labelIsHidden }) {
   return (
-    <button className="hover:opacity-50" onClick={onClick} title={label}>
+    <button className="hover:opacity-50 text-nowrap" onClick={onClick} title={label}>
       {labelIsHidden !== true && label}
       {children}
     </button>
@@ -155,7 +155,7 @@ export function PatternsTab({ context }) {
         </div>
       )}
 
-      <section className="flex overflow-y-scroll max-h-full flex-col pb-4">
+      <section className="flex overflow-y-scroll max-h-full flex-col">
         {patternFilter === patternFilterName.user && (
           <PatternButtons
             onClick={(id) =>
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 6411ea7bc..4a778a84b 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -25,32 +25,34 @@ export function Reference() {
   }, [search]);
 
   return (
-    <div className="flex h-full w-full pt-2 text-foreground overflow-hidden">
-      <div className="w-42 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
-        <div class="w-full ml-2 mb-2 top-0 sticky">
+    <div className="flex h-full w-full p-2 text-foreground overflow-hidden">
+      <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
+        <div class="w-full flex">
           <input
-            className="w-full p-1 bg-background rounded-md"
+            className="w-full p-1 bg-background rounded-md border-none"
             placeholder="Search"
             value={search}
             onInput={(event) => setSearch(event.target.value)}
           />
         </div>
-        {visibleFunctions.map((entry, i) => (
-          <a
-            key={i}
-            className="cursor-pointer block hover:bg-lineHighlight py-1 px-4"
-            onClick={() => {
-              const el = document.getElementById(`doc-${i}`);
-              const container = document.getElementById('reference-container');
-              container.scrollTo(0, el.offsetTop);
-            }}
-          >
-            {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
-          </a>
-        ))}
+        <div className="flex flex-col h-full overflow-y-auto  gap-1.5 bg-background bg-opacity-50  rounded-md">
+          {visibleFunctions.map((entry, i) => (
+            <a
+              key={i}
+              className="cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden  px-1 text-ellipsis"
+              onClick={() => {
+                const el = document.getElementById(`doc-${i}`);
+                const container = document.getElementById('reference-container');
+                container.scrollTo(0, el.offsetTop);
+              }}
+            >
+              {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
+            </a>
+          ))}
+        </div>
       </div>
-      <div className="break-normal w-full h-full overflow-auto pl-4 flex relative" id="reference-container">
-        <div className="prose dark:prose-invert max-w-full pr-4">
+      <div className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden   px-2 flex relative" id="reference-container">
+           <div className='prose dark:prose-invert min-w-full px-1 '>
           <h2>API Reference</h2>
           <p>
             This is the long list functions you can use! Remember that you don't need to remember all of those and that
@@ -78,7 +80,7 @@ export function Reference() {
               ))}
             </section>
           ))}
-        </div>
+      </div>
       </div>
     </div>
   );
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 768af4ffb..6f15b887e 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -105,7 +105,7 @@ export function SettingsTab({ started }) {
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
   return (
-    <div className="text-foreground p-4 space-y-4">
+    <div className="text-foreground p-4 space-y-4 w-full">
       {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 27c89326c..f2b9fbd16 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -1,7 +1,7 @@
 import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
-import React, { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
@@ -53,14 +53,14 @@ export function SoundsTab() {
 
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="w-full ml-2 mb-2 top-0 sticky">
-        <input
-          className="w-full p-1 bg-background rounded-md"
+    
+    <input
+          className="w-full p-1 bg-background rounded-md pb-2"
           placeholder="Search"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
-      </div>
+
       <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}
@@ -74,7 +74,8 @@ export function SoundsTab() {
         ></ButtonGroup>
         <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </div>
-      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal pb-4">
+     
+      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal pb-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
             <span
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index e0e3ee7d2..b16fb6ff9 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -30,7 +30,8 @@ export const defaultSettings = {
   isZen: false,
   soundsFilter: 'all',
   patternFilter: 'community',
-  panelPosition: 'right',
+  panelPosition: 'bottom',
+  isPanelPinned: true,
   userPatterns: '{}',
   audioDeviceName: defaultAudioDeviceName,
   audioEngineTarget: audioEngineTargets.webaudio,
@@ -60,6 +61,7 @@ export function useSettings() {
   return {
     ...state,
     isZen: parseBoolean(state.isZen),
+    isPanelPinned: parseBoolean(state.isPanelPinned),
     isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
     isBracketClosingEnabled: parseBoolean(state.isBracketClosingEnabled),
     isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
@@ -77,6 +79,7 @@ export function useSettings() {
 }
 
 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
+export const setPanelPinned = (isPinned) => settingsMap.setKey('isPanelPinned', isPinned);
 
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
 
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
index e50a54cfb..af02a277d 100644
--- a/website/src/styles/index.css
+++ b/website/src/styles/index.css
@@ -52,6 +52,7 @@
 }
 :root {
   --app-height: 100vh;
+  --app-width: 100vw;
 }
 
 #console-tab {
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index d92d5949c..4c76159e6 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -34,6 +34,7 @@ module.exports = {
       },
       spacing: {
         'app-height': 'var(--app-height)',
+        'app-width': 'var(--app-width)'
       },
       typography(theme) {
         return {

From 8703d684c4beaa23f08c1b3972c77f4002e91018 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 13:01:02 -0400
Subject: [PATCH 04/12] fix: lint

---
 packages/superdough/synth.mjs                   |  4 ++--
 website/src/components/Udels/UdelsEditor.jsx    |  4 ++--
 website/src/docs/Icon.jsx                       |  2 +-
 website/src/docs/MiniRepl.jsx                   |  1 -
 website/src/repl/components/ReplEditor.jsx      |  1 -
 website/src/repl/components/panel/Reference.jsx |  9 ++++++---
 website/src/repl/components/panel/SoundsTab.jsx | 15 +++++++--------
 website/tailwind.config.cjs                     |  2 +-
 8 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs
index 113fb4e5e..51699f984 100644
--- a/packages/superdough/synth.mjs
+++ b/packages/superdough/synth.mjs
@@ -73,8 +73,8 @@ export function registerSynthSounds() {
     'supersaw',
     (begin, value, onended) => {
       const ac = getAudioContext();
-      const {z1, z2, z3} = value;
-      let { duration, n, unison = z2 ?? 5, spread = z3 ?? 0.6, detune, } = value;
+      const { z1, z2, z3 } = value;
+      let { duration, n, unison = z2 ?? 5, spread = z3 ?? 0.6, detune } = value;
       detune = detune ?? n ?? z1 ?? 0.18;
       const frequency = getFrequencyFromValue(value);
 
diff --git a/website/src/components/Udels/UdelsEditor.jsx b/website/src/components/Udels/UdelsEditor.jsx
index 47e7a3286..fe7a1ae48 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 { HorizontalPanel } 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}  />
+      <HorizontalPanel context={context} />
     </div>
   );
 }
diff --git a/website/src/docs/Icon.jsx b/website/src/docs/Icon.jsx
index 8a58da127..48b05d87f 100644
--- a/website/src/docs/Icon.jsx
+++ b/website/src/docs/Icon.jsx
@@ -52,7 +52,7 @@ export function Icon({ type }) {
               d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z"
               clipRule="evenodd"
             />
-          ), 
+          ),
         }[type]
       }
     </svg>
diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx
index ca76c362e..81e7a24a3 100644
--- a/website/src/docs/MiniRepl.jsx
+++ b/website/src/docs/MiniRepl.jsx
@@ -1,7 +1,6 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Icon } from './Icon';
 import { silence, noteToMidi, _mod } from '@strudel/core';
-import { clearHydra } from '@strudel/hydra';
 import { getDrawContext, getPunchcardPainter } from '@strudel/draw';
 import { transpiler } from '@strudel/transpiler';
 import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index f0b11ff42..5a1c2e676 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -15,7 +15,6 @@ export default function ReplEditor(Props) {
   const settings = useSettings();
   const { panelPosition } = settings;
 
-
   return (
     <div className="h-full flex flex-col relative">
       <Loader active={pending} />
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 4a778a84b..078208071 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -51,8 +51,11 @@ export function Reference() {
           ))}
         </div>
       </div>
-      <div className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden   px-2 flex relative" id="reference-container">
-           <div className='prose dark:prose-invert min-w-full px-1 '>
+      <div
+        className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden   px-2 flex relative"
+        id="reference-container"
+      >
+        <div className="prose dark:prose-invert min-w-full px-1 ">
           <h2>API Reference</h2>
           <p>
             This is the long list functions you can use! Remember that you don't need to remember all of those and that
@@ -80,7 +83,7 @@ export function Reference() {
               ))}
             </section>
           ))}
-      </div>
+        </div>
       </div>
     </div>
   );
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index f2b9fbd16..60f5a22d9 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -53,13 +53,12 @@ export function SoundsTab() {
 
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
-    
-    <input
-          className="w-full p-1 bg-background rounded-md pb-2"
-          placeholder="Search"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
+      <input
+        className="w-full p-1 bg-background rounded-md pb-2"
+        placeholder="Search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
 
       <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
@@ -74,7 +73,7 @@ export function SoundsTab() {
         ></ButtonGroup>
         <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </div>
-     
+
       <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal pb-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 4c76159e6..23ae96c3c 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -34,7 +34,7 @@ module.exports = {
       },
       spacing: {
         'app-height': 'var(--app-height)',
-        'app-width': 'var(--app-width)'
+        'app-width': 'var(--app-width)',
       },
       typography(theme) {
         return {

From 2e6a5611845e5d984a338260065ae68562ac2007 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 13:08:39 -0400
Subject: [PATCH 05/12] remove spillover

---
 packages/core/controls.mjs    | 45 +----------------------------------
 packages/superdough/synth.mjs |  7 +++---
 2 files changed, 4 insertions(+), 48 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index e0057c675..e66326dbf 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -73,49 +73,6 @@ export function registerControl(names, ...aliases) {
  */
 export const { s, sound } = registerControl(['s', 'n', 'gain'], 'sound');
 
-/**
- * generic macro param for a sound synth
- *
- * @name z1
- * @synonyms z
- * @param {number | Pattern}
- * @example
- * n(run(8)).scale("D:pentatonic").s("supersaw").x(".01 .75").release(0.5)
- *
- */
-export const { z1, z } = registerControl(['z1', 'z2', 'z3', 'z4'], 'z');
-
-/**
- * generic macro param for a sound synth
- *
- * @name z2
- * @param {number | Pattern}
- * @example
- * n(run(8)).scale("D:pentatonic").s("supersaw").x2("2 .7").release(0.5)
- *
- */
-export const { z2 } = registerControl('z2');
-
-/**
- * generic macro param for a sound synth
- *
- * @name z3
- * @param {number | Pattern}
- * @example
- * n(run(8)).scale("D:pentatonic").s("supersaw").x3(".1 .75").release(0.5)
- *
- */
-export const { z4 } = registerControl('z3');
-
-/**
- * generic macro param for a sound synth
- *
- * @name x4
- * @param {number | Pattern}
- *
- */
-export const { x4 } = registerControl('z4');
-
 /**
  * Define a custom webaudio node to use as a sound source.
  *
@@ -1656,4 +1613,4 @@ export const ar = register('ar', (t, pat) => {
   t = !Array.isArray(t) ? [t] : t;
   const [attack, release = attack] = t;
   return pat.set({ attack, release });
-});
+});
\ No newline at end of file
diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs
index 51699f984..cb556030e 100644
--- a/packages/superdough/synth.mjs
+++ b/packages/superdough/synth.mjs
@@ -73,9 +73,8 @@ export function registerSynthSounds() {
     'supersaw',
     (begin, value, onended) => {
       const ac = getAudioContext();
-      const { z1, z2, z3 } = value;
-      let { duration, n, unison = z2 ?? 5, spread = z3 ?? 0.6, detune } = value;
-      detune = detune ?? n ?? z1 ?? 0.18;
+      let { duration, n, unison = 5, spread = 0.6, detune } = value;
+      detune = detune ?? n ?? 0.18;
       const frequency = getFrequencyFromValue(value);
 
       const [attack, decay, sustain, release] = getADSRValues(
@@ -250,4 +249,4 @@ export function getOscillator(s, t, value) {
       // envGain?.stop(time);
     },
   };
-}
+}
\ No newline at end of file

From 61f070744ae0bbf4c22c1302529a0b8883b72ba1 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 13:09:24 -0400
Subject: [PATCH 06/12] fix: lint

---
 packages/core/controls.mjs    | 2 +-
 packages/superdough/synth.mjs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index e66326dbf..5a2752944 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -1613,4 +1613,4 @@ export const ar = register('ar', (t, pat) => {
   t = !Array.isArray(t) ? [t] : t;
   const [attack, release = attack] = t;
   return pat.set({ attack, release });
-});
\ No newline at end of file
+});
diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs
index cb556030e..621a6e598 100644
--- a/packages/superdough/synth.mjs
+++ b/packages/superdough/synth.mjs
@@ -249,4 +249,4 @@ export function getOscillator(s, t, value) {
       // envGain?.stop(time);
     },
   };
-}
\ No newline at end of file
+}

From 8440fa42ea275f60762383ba4d2ba2c593e88a52 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 13:51:14 -0400
Subject: [PATCH 07/12] remove unessecary hover logic

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

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index bf67f7253..681394b7e 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -18,23 +18,18 @@ const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 export function HorizontalPanel({ context }) {
   const settings = useSettings();
   const { isPanelPinned: pinned, activeFooter: tab } = settings;
-  const [isHovered, setIsHovered] = useState(false);
-  const showContent = isHovered || pinned;
 
   return (
     <PanelNav
-      onMouseEnter={(x) => setIsHovered(true)}
-      onMouseLeave={(x) => setIsHovered(false)}
       className={cx(
         'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col',
         pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
       )}
     >
-      {showContent && (
-        <div className="flex h-full overflow-auto">
-          <PanelContent context={context} tab={tab} />
-        </div>
-      )}
+      <div className="flex h-full overflow-auto">
+        <PanelContent context={context} tab={tab} />
+      </div>
+
       <div className="flex justify-between min-h-10 max-h-10 pr-2 items-center">
         <Tabs setTab={setTab} tab={tab} pinned={pinned} />
         <PinButton pinned={pinned} setPinned={setPanelPinned} />
@@ -46,8 +41,6 @@ export function HorizontalPanel({ context }) {
 export function VerticalPanel({ context }) {
   const settings = useSettings();
   const { isPanelPinned: pinned, activeFooter: tab } = settings;
-  const [isHovered, setIsHovered] = useState(false);
-  const showContent = isHovered || pinned;
 
   return (
     <PanelNav
@@ -60,11 +53,10 @@ export function VerticalPanel({ context }) {
           <Tabs setTab={setTab} tab={tab} pinned={pinned} />
           <PinButton pinned={pinned} setPinned={setPanelPinned} />
         </div>
-        {showContent && (
-          <div className="overflow-auto">
-            <PanelContent context={context} tab={tab} />
-          </div>
-        )}
+
+        <div className="overflow-auto">
+          <PanelContent context={context} tab={tab} />
+        </div>
       </div>
       <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center  h-full group-hover:hidden ')}>
         <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />

From bb4b7dc53337dcbbccd927824aaffb923dec3425 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 15:01:05 -0400
Subject: [PATCH 08/12] fix: vertical breakpoints on mobile

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

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 681394b7e..88a960f95 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -46,7 +46,10 @@ export function VerticalPanel({ context }) {
     <PanelNav
       onMouseEnter={(x) => setIsHovered(true)}
       onMouseLeave={(x) => setIsHovered(false)}
-      className={cx('hover:w-[600px]', pinned ? `w-[600px]` : 'w-8')}
+      className={cx(
+        'lg:hover:min-w-[600px] lg:hover:max-w-[600px] hover:min-w-[300px] hover:max-w-[300px] ',
+        pinned ? `lg:min-w-[600px] min-w-[300px] lg:max-w-[600px] min-max-[300px]` : 'min-w-8',
+      )}
     >
       <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
         <div className="flex justify-between w-full ">
@@ -54,7 +57,7 @@ export function VerticalPanel({ context }) {
           <PinButton pinned={pinned} setPinned={setPanelPinned} />
         </div>
 
-        <div className="overflow-auto">
+        <div className="overflow-auto h-full">
           <PanelContent context={context} tab={tab} />
         </div>
       </div>
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 31a82d963..df6075eb3 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
   const autoResetPatternOnChange = !isUdels();
 
   return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2  flex flex-col overflow-hidden max-h-full">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2  flex flex-col overflow-hidden max-h-full h-full">
       <ButtonGroup
         value={patternFilter}
         onChange={(value) => settingsMap.setKey('patternFilter', value)}
@@ -155,7 +155,7 @@ export function PatternsTab({ context }) {
         </div>
       )}
 
-      <section className="flex overflow-y-scroll max-h-full flex-col">
+      <section className="flex overflow-y-auto max-h-full flex-grow flex-col">
         {patternFilter === patternFilterName.user && (
           <PatternButtons
             onClick={(id) =>

From 0d0cb3fd938c177a74f2cc4114eb6c9f8203d0fe Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 15:05:10 -0400
Subject: [PATCH 09/12] fix: tiny vertical menu

---
 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 88a960f95..db1ab6987 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 }) {
       onMouseLeave={(x) => setIsHovered(false)}
       className={cx(
         'lg:hover:min-w-[600px] lg:hover:max-w-[600px] hover:min-w-[300px] hover:max-w-[300px] ',
-        pinned ? `lg:min-w-[600px] min-w-[300px] lg:max-w-[600px] min-max-[300px]` : 'min-w-8',
+        pinned ? `lg:min-w-[600px] min-w-[300px] lg:max-w-[600px] max-w-[300px]` : 'min-w-8',
       )}
     >
       <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>

From c191471e1e08b44ba2d9c6904ab2d8d4078bd65b Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 15:12:32 -0400
Subject: [PATCH 10/12] better width calc

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

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index db1ab6987..462709025 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -47,8 +47,8 @@ export function VerticalPanel({ context }) {
       onMouseEnter={(x) => setIsHovered(true)}
       onMouseLeave={(x) => setIsHovered(false)}
       className={cx(
-        'lg:hover:min-w-[600px] lg:hover:max-w-[600px] hover:min-w-[300px] hover:max-w-[300px] ',
-        pinned ? `lg:min-w-[600px] min-w-[300px] lg:max-w-[600px] max-w-[300px]` : 'min-w-8',
+        'hover:min-w-[min(600px,80vw)] hover:max-w-[min(600px,80vw)]',
+        pinned ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-8',
       )}
     >
       <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>

From c22c786cf28ddbcf5f7d89746c19fd3032130096 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 15:19:16 -0400
Subject: [PATCH 11/12] welcome width

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

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 462709025..d39693414 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -26,7 +26,7 @@ export function HorizontalPanel({ context }) {
         pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
       )}
     >
-      <div className="flex h-full overflow-auto">
+      <div className="flex h-full overflow-auto ">
         <PanelContent context={context} tab={tab} />
       </div>
 
diff --git a/website/src/repl/components/panel/WelcomeTab.jsx b/website/src/repl/components/panel/WelcomeTab.jsx
index fb41b4714..b7d45bfd8 100644
--- a/website/src/repl/components/panel/WelcomeTab.jsx
+++ b/website/src/repl/components/panel/WelcomeTab.jsx
@@ -5,7 +5,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 
 export function WelcomeTab({ context }) {
   return (
-    <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
+    <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 ">
       <h3>
         <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
       </h3>

From dd171f83205e69556944c23bb01c35c217e6ce9a Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Tue, 15 Oct 2024 13:33:37 -0400
Subject: [PATCH 12/12] panel position height dependent

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

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index d39693414..ce60295e8 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -44,8 +44,6 @@ export function VerticalPanel({ context }) {
 
   return (
     <PanelNav
-      onMouseEnter={(x) => setIsHovered(true)}
-      onMouseLeave={(x) => setIsHovered(false)}
       className={cx(
         'hover:min-w-[min(600px,80vw)] hover:max-w-[min(600px,80vw)]',
         pinned ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-8',
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index b16fb6ff9..00cc46b95 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -30,7 +30,7 @@ export const defaultSettings = {
   isZen: false,
   soundsFilter: 'all',
   patternFilter: 'community',
-  panelPosition: 'bottom',
+  panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom',
   isPanelPinned: true,
   userPatterns: '{}',
   audioDeviceName: defaultAudioDeviceName,