secret zen mode

repl/src/App.jsx

@@ -108,6 +108,7 @@ function App() {
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
   const [activeFooter, setActiveFooter] = useState('');
+  const [isZen, setIsZen] = useState(false);
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop } = useStrudel({
     initialCode: '// LOADING',
@@ -238,6 +239,8 @@ function App() {
         handleUpdate,
         handleShuffle,
         handleShare,
+        isZen,
+        setIsZen,
       }}
     >
       <div
@@ -248,7 +251,15 @@ function App() {
       >
         {!hideHeader && <Header />}
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
-          <CodeMirror value={code} onChange={handleChangeCode} onViewChanged={setView} />
+          <CodeMirror
+            value={code}
+            onChange={handleChangeCode}
+            onViewChanged={setView}
+            onSelectionChange={(selection) => {
+              // TODO: scroll to selected function in reference
+              // console.log('selectino change', selection.ranges[0].from);
+            }}
+          />
         </section>
         <Footer />
       </div>

repl/src/Footer.jsx

@@ -8,7 +8,7 @@ import { Reference } from './Reference';
 
 export function Footer() {
   // const [activeFooter, setActiveFooter] = useState('console');
-  const { activeFooter, setActiveFooter } = useContext(AppContext);
+  const { activeFooter, setActiveFooter, isZen } = useContext(AppContext);
   const footerContent = useRef();
   const [log, setLog] = useState([]);
 
@@ -65,6 +65,9 @@ export function Footer() {
       {activeFooter === name && <>{children}</>}
     </>
   );
+  if (isZen) {
+    return null;
+  }
   return (
     <footer className="bg-footer z-[20]">
       <div className="flex justify-between px-2">

repl/src/Header.jsx

@@ -22,16 +22,19 @@ export function Header() {
     handleUpdate,
     handleShuffle,
     handleShare,
+    isZen,
+    setIsZen,
   } = useContext(AppContext);
   return (
     <header
       id="header"
       className={cx(
-        'flex-none w-full md:flex text-black justify-between z-[100] text-lg bg-header select-none sticky top-0',
+        'flex-none w-full md:flex text-black justify-between z-[100] text-lg  select-none sticky top-0',
         isEmbedded ? 'h-12 md:h-8' : 'h-25 md:h-14',
+        !isZen && 'bg-header',
       )}
     >
-      <div className="px-4 flex items-center space-x-2 pt-2 md:pt-0 pointer-events-none">
+      <div className="px-4 flex items-center space-x-2 pt-2 md:pt-0 select-none">
         {/*             <img
     src={logo}
     className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full'
@@ -44,12 +47,20 @@ export function Header() {
             'text-white font-bold flex space-x-2',
           )}
         >
-          <div className={cx('mt-[1px]', started && 'animate-spin')}>🌀</div>
+          <div
+            className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
+            onClick={() => setIsZen((z) => !z)}
+          >
+            🌀
+          </div>
+          {!isZen && (
             <div className={cx(started && 'animate-pulse')}>
               <span className="">strudel</span> <span className="text-sm">REPL</span>
             </div>
+          )}
         </h1>
       </div>
+      {!isZen && (
         <div className="flex max-w-full overflow-auto text-white ">
           <button
             onClick={handleTogglePlay}
@@ -123,6 +134,7 @@ export function Header() {
             </button>
           )}
         </div>
+      )}
     </header>
   );
 }

repl/src/Reference.jsx

@@ -1,5 +1,4 @@
 import jsdocJson from '../../doc.json';
-console.log('jsdocJson', jsdocJson);
 const visibleFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => a.meta.filename.localeCompare(b.meta.filename) + a.name.localeCompare(b.name));
@@ -24,7 +23,7 @@ export function Reference() {
           {visibleFunctions.map((entry, i) => (
             <section key={i}>
               <h3 id={`doc-${i}`}>{entry.name}</h3>
-              <small>{entry.meta.filename}</small>
+              {/* <small>{entry.meta.filename}</small> */}
 
               <p dangerouslySetInnerHTML={{ __html: entry.description }}></p>
               {entry.examples?.map((example, j) => (

repl/src/tunes.mjs

@@ -980,3 +980,14 @@ stack(
   ,
   n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
 ).reset("<x@7 x(5,8)>")`;
+
+export const juxUndTollerei = `note("c3 eb3 g3 bb3").palindrome()
+.s('sawtooth')
+.jux(x=>x.rev().color('green').s('sawtooth'))
+.off(1/4, x=>x.add(note("<7 12>/2")).slow(2).late(.005).s('triangle'))
+//.delay(.5)
+.fast(1).cutoff(sine.range(200,2000).slow(8))
+.decay(.05).sustain(0)
+.room(.6)
+.delay(.5).delaytime(.1).delayfeedback(.4)
+.pianoroll()`;