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,85 +47,94 @@ export function Header() {
             'text-white font-bold flex space-x-2',
           )}
         >
-          <div className={cx('mt-[1px]', started && 'animate-spin')}>🌀</div>
+          <div
-          <div className={cx(started && 'animate-pulse')}>
+            className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
-            <span className="">strudel</span> <span className="text-sm">REPL</span>
+            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>
-      <div className="flex max-w-full overflow-auto text-white ">
+      {!isZen && (
-        <button
+        <div className="flex max-w-full overflow-auto text-white ">
-          onClick={handleTogglePlay}
-          className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:text-tertiary', !started && 'animate-pulse')}
-        >
-          {!pending ? (
-            <span className={cx('flex items-center space-x-1', isEmbedded ? 'w-16' : 'w-16')}>
-              {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
-              <span>{started ? 'stop' : 'play'}</span>
-            </span>
-          ) : (
-            <>loading...</>
-          )}
-        </button>
-        <button
-          onClick={handleUpdate}
-          className={cx(
-            'flex items-center space-x-1',
-            !isEmbedded ? 'p-2' : 'px-2',
-            !isDirty || !activeCode ? 'opacity-50' : 'hover:text-tertiary',
-          )}
-        >
-          <CommandLineIcon className="w-5 h-5" />
-          <span>update</span>
-        </button>
-        {!isEmbedded && (
-          <button className="hover:text-tertiary p-2 flex items-center space-x-1" onClick={handleShuffle}>
-            <SparklesIcon className="w-5 h-5" />
-            <span> shuffle</span>
-          </button>
-        )}
-        {!isEmbedded && (
-          <a
-            href="./tutorial"
-            className={cx('hover:text-tertiary flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
-          >
-            <AcademicCapIcon className="w-5 h-5" />
-            <span>learn</span>
-          </a>
-        )}
-        {!isEmbedded && (
           <button
-            className={cx(
+            onClick={handleTogglePlay}
-              'cursor-pointer hover:text-tertiary flex items-center space-x-1',
+            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:text-tertiary', !started && 'animate-pulse')}
-              !isEmbedded ? 'p-2' : 'px-2',
-            )}
-            onClick={handleShare}
           >
-            <LinkIcon className="w-5 h-5" />
+            {!pending ? (
-            <span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
+              <span className={cx('flex items-center space-x-1', isEmbedded ? 'w-16' : 'w-16')}>
+                {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
+                <span>{started ? 'stop' : 'play'}</span>
+              </span>
+            ) : (
+              <>loading...</>
+            )}
           </button>
-        )}
+          <button
-        {isEmbedded && (
+            onClick={handleUpdate}
-          <button className={cx('hover:text-tertiary px-2')}>
+            className={cx(
-            <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
+              'flex items-center space-x-1',
-              🚀 open
+              !isEmbedded ? 'p-2' : 'px-2',
-            </a>
+              !isDirty || !activeCode ? 'opacity-50' : 'hover:text-tertiary',
+            )}
+          >
+            <CommandLineIcon className="w-5 h-5" />
+            <span>update</span>
           </button>
-        )}
+          {!isEmbedded && (
-        {isEmbedded && (
+            <button className="hover:text-tertiary p-2 flex items-center space-x-1" onClick={handleShuffle}>
-          <button className={cx('hover:text-tertiary px-2')}>
+              <SparklesIcon className="w-5 h-5" />
+              <span> shuffle</span>
+            </button>
+          )}
+          {!isEmbedded && (
             <a
-              onClick={() => {
+              href="./tutorial"
-                window.location.href = initialUrl;
+              className={cx('hover:text-tertiary flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
-                window.location.reload();
-              }}
-              title="Reset"
             >
-              💔 reset
+              <AcademicCapIcon className="w-5 h-5" />
+              <span>learn</span>
             </a>
-          </button>
+          )}
-        )}
+          {!isEmbedded && (
-      </div>
+            <button
+              className={cx(
+                'cursor-pointer hover:text-tertiary flex items-center space-x-1',
+                !isEmbedded ? 'p-2' : 'px-2',
+              )}
+              onClick={handleShare}
+            >
+              <LinkIcon className="w-5 h-5" />
+              <span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
+            </button>
+          )}
+          {isEmbedded && (
+            <button className={cx('hover:text-tertiary px-2')}>
+              <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
+                🚀 open
+              </a>
+            </button>
+          )}
+          {isEmbedded && (
+            <button className={cx('hover:text-tertiary px-2')}>
+              <a
+                onClick={() => {
+                  window.location.href = initialUrl;
+                  window.location.reload();
+                }}
+                title="Reset"
+              >
+                💔 reset
+              </a>
+            </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()`;