Update docstring and add an example

packages/codemirror/codemirror.mjs

@@ -24,7 +24,6 @@ import { sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { activateTheme, initTheme, theme } from './themes.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
 import { updateWidgets, widgetPlugin } from './widget.mjs';
-import { jumpToCharacter } from './labelJump.mjs';
 
 export { toggleBlockComment, toggleBlockCommentByLine, toggleComment, toggleLineComment } from '@codemirror/commands';
 
@@ -120,14 +119,6 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
             preventDefault: true,
             run: () => onStop?.(),
           },
-          {
-            key: 'Alt-w',
-            run: (view) => jumpToCharacter(view, '$', 1),
-          },
-          {
-            key: 'Alt-q',
-            run: (view) => jumpToCharacter(view, '$', -1),
-          },
           /* {
             key: 'Ctrl-Shift-.',
             run: () => (onPanic ? onPanic() : onStop?.()),

packages/codemirror/labelJump.mjs

@@ -1,31 +0,0 @@
-import { EditorSelection } from '@codemirror/state';
-import { SearchCursor } from '@codemirror/search';
-
-export function jumpToCharacter(view, character, direction = 1) {
-  const { state, dispatch } = view;
-  const pos = state.selection.main.head;
-  const cursor = new SearchCursor(state.doc, character);
-
-  let characterPositions = [];
-  let jumpPos;
-  while (!cursor.next().done) {
-    characterPositions.push(cursor.value.to);
-  }
-  if (!characterPositions.length) {
-    return false;
-  }
-  if (direction > 0) {
-    jumpPos = characterPositions.find((x) => x > pos + 1) ?? characterPositions.at(0); // Loop back around for convenience
-  } else {
-    jumpPos = characterPositions.reverse().find((x) => x < pos + 1) ?? characterPositions.at(0);
-  }
-
-  if (jumpPos == null) {
-    return false;
-  }
-  dispatch({
-    selection: EditorSelection.cursor(jumpPos - 1),
-    scrollIntoView: true,
-  });
-  return true;
-}

packages/core/controls.mjs

@@ -3076,3 +3076,15 @@ export const bmod = (config) => pure({}).bmod(config);
 export const { transient } = registerControl(['transient', 'transsustain']);
 
 export const { FXrelease, FXrel, FXr, fxr } = registerControl('FXrelease', 'FXrel', 'FXr', 'fxr');
+
+/**
+ * Input audio device to be used as a sound source in a pattern
+ *
+ * @name input
+ * @param {string | number | Pattern} input Name or index of the input audio device to use
+ * @example
+ * // Please be careful about feedback!
+ * input("1 2").gain(0.5)
+ *   .stretch(0.5).lfo({ s: 0.5 })
+ */
+export const { input } = registerControl('input');

packages/superdough/nodePools.mjs

@@ -7,13 +7,11 @@ This program is free software: you can redistribute it and/or modify it under th
 
 const nodePools = new Map();
 const POOL_KEY = Symbol('nodePoolKey');
+const IS_WORKLET_DEAD = Symbol('nodePoolIsWorkletDead');
+const MAX_POOL_SIZE = 64;
 
 export const isPoolable = (node) => !!node[POOL_KEY];
 
-const getNodeTime = (node) => {
-  return node.context?.currentTime ?? 0;
-};
-
 const getParams = (node) => {
   const params = new Set();
   node.parameters?.forEach((param) => params.add(param));
@@ -40,43 +38,34 @@ export const releaseNodeToPool = (node) => {
     // not reusable
     return;
   }
+  if (node[IS_WORKLET_DEAD]) {
+    // Worklet already terminated, don't pool it
+    return;
+  }
   const key = node[POOL_KEY];
   if (key == null) return;
-  const now = getNodeTime(node);
+  const now = node.context?.currentTime ?? 0;
   getParams(node).forEach((param) => param.cancelScheduledValues(now));
   const pool = nodePools.get(key) ?? [];
-  pool.push(new WeakRef(node));
-  nodePools.set(key, pool);
+  if (pool.length < MAX_POOL_SIZE) {
+    pool.push(new WeakRef(node));
+    nodePools.set(key, pool);
+  }
 };
 
-// Audio worklets are given a grace period to survive (`return true`) after
-// being released. This concludes at time `end + 0.5`. We test here whether we are
-// within some safe distance of that (`end + 0.45`) and if so, permit the node to be
-// released. This helps to prevent race conditions between node termination and node
-// re-use
-const isNodeAlive = (node) => {
-  // Skip check if node is not a worklet
-  if (!(node instanceof AudioWorkletNode)) return true;
-  const now = getNodeTime(node);
-  const end = node?.parameters?.get('end').value ?? 0;
-  return now < end + 0.45;
-};
+export const markWorkletAsDead = (worklet) => (worklet[IS_WORKLET_DEAD] = true);
 
 // Attempt to get node from the pool. If this fails, fall back
 // to building it with the factory
 export const getNodeFromPool = (key, factory) => {
   const pool = nodePools.get(key) ?? [];
   let node;
-  let found = false;
   while (pool.length) {
     const ref = pool.pop();
     node = ref?.deref();
-    if (node != null && isNodeAlive(node)) {
-      found = true;
-      break;
-    }
+    if (node != null && !node[IS_WORKLET_DEAD]) break;
   }
-  if (!found) {
+  if (node == null || node[IS_WORKLET_DEAD]) {
     node = factory();
   }
   node[POOL_KEY] = key;

packages/superdough/superdough.mjs

@@ -14,9 +14,11 @@ import {
   createFilter,
   effectSend,
   gainNode,
+  getADSRValues,
   getCompressor,
   getDistortion,
   getLfo,
+  getParamADSR,
   getWorklet,
   releaseAudioNode,
   webAudioTimeout,
@@ -176,6 +178,19 @@ export const getAudioDevices = async () => {
   return devicesMap;
 };
 
+let AUDIO_INPUTS;
+export const getAudioInputs = async () => {
+  await navigator.mediaDevices.getUserMedia({ audio: true });
+  let mediaDevices = await navigator.mediaDevices.enumerateDevices();
+  mediaDevices = mediaDevices.filter((device) => device.kind === 'audioinput' && device.deviceId !== 'default');
+  const devicesMap = new Map();
+  devicesMap.set(DEFAULT_AUDIO_DEVICE_NAME, '');
+  mediaDevices.forEach((device) => {
+    devicesMap.set(device.label, device.deviceId);
+  });
+  return devicesMap;
+};
+
 let defaultDefaultValues = {
   s: 'triangle',
   gain: 0.8,
@@ -254,6 +269,7 @@ export function loadWorklets() {
   return workletsLoading;
 }
 
+let AUDIO_OUTPUTS;
 // this function should be called on first user interaction (to avoid console warning)
 export async function initAudio(options = {}) {
   const {
@@ -274,8 +290,8 @@ export async function initAudio(options = {}) {
 
   if (audioDeviceName != null && audioDeviceName != DEFAULT_AUDIO_DEVICE_NAME) {
     try {
-      const devices = await getAudioDevices();
-      const id = devices.get(audioDeviceName);
+      AUDIO_OUTPUTS = await getAudioDevices();
+      const id = AUDIO_OUTPUTS.get(audioDeviceName);
       const isValidID = (id ?? '').length > 0;
       if (audioCtx.sinkId !== id && isValidID) {
         await audioCtx.setSinkId(id);
@@ -316,6 +332,51 @@ export async function initAudioOnFirstClick(options) {
   return audioReady;
 }
 
+const CACHED_INPUTS = {};
+export async function getInput(input) {
+  let sourceNode = CACHED_INPUTS[input];
+  if (sourceNode === undefined) {
+    const ac = getAudioContext();
+    if (!AUDIO_INPUTS) {
+      AUDIO_INPUTS = await getAudioInputs();
+    }
+    const available = Array.from(AUDIO_INPUTS.keys());
+    // Convert numerical inputs to their corresponding device name
+    const deviceName = typeof input === 'number' ? available[input] : input;
+    const inputId = AUDIO_INPUTS.get(deviceName);
+    if (inputId === undefined) {
+      throw new Error(`[superdough] input "${input}" not found. Available inputs: ${available.join(', ')}`);
+    }
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        deviceId: { exact: inputId },
+        channelCount: { ideal: 2 },
+        sampleRate: { ideal: ac.sampleRate },
+        echoCancellation: false,
+        noiseSuppression: false,
+        autoGainControl: false,
+        latency: { ideal: 0.01 },
+      },
+    });
+    sourceNode = ac.createMediaStreamSource(stream);
+    CACHED_INPUTS[input] = sourceNode;
+  }
+  return sourceNode;
+}
+
+async function getInputHandle(input, value, start, end) {
+  const inputNode = await getInput(input);
+  const envGain = gainNode(0);
+  inputNode.connect(envGain);
+  const [attack, decay, sustain, release] = getADSRValues(
+    [value.attack, value.decay, value.sustain, value.release],
+    'linear',
+    [0.001, 0.05, 0.6, 0.01],
+  );
+  getParamADSR(envGain.gain, attack, decay, sustain, release, 0, 1, start, end, 'linear');
+  return { inputNode, envGain };
+}
+
 let controller;
 export function getSuperdoughAudioController() {
   if (controller == null) {
@@ -408,9 +469,9 @@ function mapChannelNumbers(channels) {
 }
 
 class Chain {
-  constructor(head) {
-    this.audioNodes = [head];
-    this.tails = [head];
+  constructor() {
+    this.audioNodes = [];
+    this.tails = [];
   }
   connect(...nodes) {
     nodes.forEach((node) => {
@@ -497,6 +558,7 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)
     fft = getDefaultValue('fft'), // fftSize 0 - 10
     FX = [],
     FXrelease,
+    input,
   } = value;
 
   delaytime = delaytime ?? cycleToSeconds(delaysync, cps);
@@ -539,11 +601,28 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)
     value.s = s;
   }
 
+  const chain = new Chain(); // connection manager which tracks audio nodes for releasing
+
   // get source AudioNode
   let sourceNode;
   if (source) {
     sourceNode = source(t, value, hapDuration, cps);
     nodes.main['source'] = [sourceNode];
+  } else if (input) {
+    const { inputNode, envGain } = await getInputHandle(input, value, t, end);
+    sourceNode = envGain;
+    webAudioTimeout(
+      ac,
+      () => {
+        chain.releaseNodes();
+        activeSoundSources.delete(chainID);
+        // We disconnect inputNode instead of releasing it
+        // because we want inputs to persist
+        inputNode.disconnect(envGain);
+      },
+      t,
+      endWithRelease,
+    );
   } else if (getSound(s)) {
     const { onTrigger } = getSound(s);
 
@@ -579,7 +658,7 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)
     return;
   }
 
-  const chain = new Chain(sourceNode); // connection manager which tracks audio nodes for releasing
+  chain.connect(sourceNode);
   FX = [...FX, value]; // run through the FX chain and then run through all FX outside of it as well
   for (let [idx, fx] of Object.entries(FX)) {
     const key = idx == FX.length - 1 ? 'main' : idx;

packages/superdough/synth.mjs

@@ -18,7 +18,7 @@ import {
 } from './helpers.mjs';
 import { logger } from './logger.mjs';
 import { getNoiseMix, getNoiseOscillator } from './noise.mjs';
-import { getNodeFromPool, releaseNodeToPool } from './nodePools.mjs';
+import { getNodeFromPool, markWorkletAsDead, releaseNodeToPool } from './nodePools.mjs';
 
 const waveforms = ['triangle', 'square', 'sawtooth', 'sine', 'user', 'one'];
 const waveformAliases = [
@@ -185,6 +185,10 @@ export function registerSynthSounds() {
         param.setValueAtTime(target, now);
       });
       o.port.postMessage({ type: 'initialize' });
+      o.port.onmessage = (e) => {
+        if (e.data.type === 'died') markWorkletAsDead(o);
+        o.port.onmessage = null;
+      };
       const gainAdjustment = 1 / Math.sqrt(voices);
       getPitchEnvelope(o.parameters.get('detune'), value, begin, holdend);
       const vibratoHandle = getVibratoOscillator(o.parameters.get('detune'), value, begin);

packages/superdough/wavetable.mjs

@@ -11,7 +11,7 @@ import {
   webAudioTimeout,
   releaseAudioNode,
 } from './helpers.mjs';
-import { getNodeFromPool, releaseNodeToPool } from './nodePools.mjs';
+import { getNodeFromPool, markWorkletAsDead, releaseNodeToPool } from './nodePools.mjs';
 import { logger } from './logger.mjs';
 
 export const Warpmode = Object.freeze({
@@ -251,6 +251,10 @@ export async function onTriggerSynth(t, value, onended, tables, cps, frameLen) {
     param.setValueAtTime(target, now);
   });
   source.port.postMessage({ type: 'initialize', payload });
+  source.port.onmessage = (e) => {
+    if (e.data.type === 'died') markWorkletAsDead(source);
+    source.port.onmessage = null;
+  };
   if (ac.currentTime > t) {
     logger(`[wavetable] still loading sound "${s}:${n}"`, 'highlight');
     return;

packages/superdough/worklets.mjs

@@ -463,6 +463,7 @@ registerProcessor('distort-processor', DistortProcessor);
 class SuperSawOscillatorProcessor extends AudioWorkletProcessor {
   constructor() {
     super();
+    this.isAlive = true; // used internally to prevent multiple death messages
     this.port.onmessage = (e) => {
       const { type, payload } = e.data || {};
       if (type === 'initialize') {
@@ -478,16 +479,16 @@ class SuperSawOscillatorProcessor extends AudioWorkletProcessor {
     return [
       {
         name: 'begin',
-        defaultValue: -1,
+        defaultValue: 0,
         max: Number.POSITIVE_INFINITY,
-        min: -1,
+        min: 0,
       },
 
       {
         name: 'end',
-        defaultValue: -1,
+        defaultValue: 0,
         max: Number.POSITIVE_INFINITY,
-        min: -1,
+        min: 0,
       },
 
       {
@@ -522,17 +523,16 @@ class SuperSawOscillatorProcessor extends AudioWorkletProcessor {
     ];
   }
   process(_input, outputs, params) {
-    const begin = params.begin[0];
-    const end = params.end[0];
-    const beginDefined = begin >= 0;
-    const endDefined = end >= 0;
-    // We give a 0.5s grace period (for node pooling) before termination
-    const shouldTerminate = endDefined && currentTime >= end + 0.5;
-    const ended = endDefined && currentTime >= end;
-    const notStarted = currentTime <= begin;
-    if (shouldTerminate) {
+    if (currentTime >= params.end[0] + 0.5) {
+      // Outside of grace period - should terminate
+      if (this.isAlive) {
+        this.port.postMessage({ type: 'died' });
+        this.isAlive = false;
+      }
       return false;
-    } else if (ended || notStarted || !beginDefined) {
+    }
+    if (currentTime >= params.end[0] || currentTime <= params.begin[0]) {
+      // Inside of grace period or not yet started
       return true;
     }
     const output = outputs[0];
@@ -1148,8 +1148,8 @@ const tablesCache = {};
 class WavetableOscillatorProcessor extends AudioWorkletProcessor {
   static get parameterDescriptors() {
     return [
-      { name: 'begin', defaultValue: -1, min: -1, max: Number.POSITIVE_INFINITY },
-      { name: 'end', defaultValue: -1, min: -1, max: Number.POSITIVE_INFINITY },
+      { name: 'begin', defaultValue: 0, min: 0, max: Number.POSITIVE_INFINITY },
+      { name: 'end', defaultValue: 0, min: 0, max: Number.POSITIVE_INFINITY },
       { name: 'frequency', defaultValue: 440, min: Number.EPSILON },
       { name: 'detune', defaultValue: 0 },
       { name: 'freqspread', defaultValue: 0.18, min: 0 },
@@ -1164,6 +1164,7 @@ class WavetableOscillatorProcessor extends AudioWorkletProcessor {
 
   constructor(options) {
     super(options);
+    this.isAlive = true; // used internally to prevent multiple death messages
     this.port.onmessage = (e) => {
       const { type, payload } = e.data || {};
       if (type === 'initialize') {
@@ -1331,17 +1332,16 @@ class WavetableOscillatorProcessor extends AudioWorkletProcessor {
   }
 
   process(_inputs, outputs, parameters) {
-    const begin = parameters.begin[0];
-    const end = parameters.end[0];
-    const beginDefined = begin >= 0;
-    const endDefined = end >= 0;
-    // We give a 0.5s grace period (for node pooling) before termination
-    const shouldTerminate = endDefined && currentTime >= end + 0.5;
-    const ended = endDefined && currentTime >= end;
-    const notStarted = currentTime <= begin;
-    if (shouldTerminate) {
+    if (currentTime >= parameters.end[0] + 0.5) {
+      // Outside of grace period - should terminate
+      if (this.isAlive) {
+        this.port.postMessage({ type: 'died' });
+        this.isAlive = false;
+      }
       return false;
-    } else if (ended || notStarted || !beginDefined) {
+    }
+    if (currentTime >= parameters.end[0] || currentTime <= parameters.begin[0]) {
+      // Inside of grace period or not yet started
       return true;
     }
     const outL = outputs[0][0];

test/__snapshots__/examples.test.mjs.snap

@@ -5484,6 +5484,19 @@ exports[`runs examples > example "inhabit" example index 1 1`] = `
 ]
 `;
 
+exports[`runs examples > example "input" example index 0 1`] = `
+[
+  "[ 0/1 → 1/2 | input:1 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 1/2 → 1/1 | input:2 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 1/1 → 3/2 | input:1 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 3/2 → 2/1 | input:2 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 2/1 → 5/2 | input:1 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 5/2 → 3/1 | input:2 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 3/1 → 7/2 | input:1 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+  "[ 7/2 → 4/1 | input:2 gain:0.5 stretch:0.5 lfo:{0:{control:stretch sync:0.5} __ids:{}} ]",
+]
+`;
+
 exports[`runs examples > example "inside" example index 0 1`] = `
 [
   "[ 0/1 → 1/8 | note:D3 ]",

website/src/metadata_parser.js

@@ -1,4 +1,4 @@
-const ALLOW_MANY = ['by', 'url', 'genre', 'license', 'tag'];
+const ALLOW_MANY = ['by', 'url', 'genre', 'license'];
 
 export function getMetadata(raw_code) {
   if (raw_code == null) {

website/src/pages/learn/faq.mdx

@@ -19,14 +19,6 @@ While there is no charge there are some caveats, e.g.:
 - the source code must stay free, i.e. you cannot distribute strudel or tidal as part of projects with incompatible licenses - see the [license](https://www.gnu.org/licenses/agpl-3.0.en.html) for details.
 - the contributed examples and tracks are also separately licensed, and must not e.g. be used to train AI models without permission.
 
-## How do I try out the latest features?
-
-The main, stable strudel website is [strudel.cc](https://strudel.cc/). There is also [warm.strudel.cc](https://warm.strudel.cc), known as "warm strudel", which has the latest development features. You might find warm strudel has bug fixes and features that the main website doesn't, but it will often be less stable and probably not suitable for important performances.
-
-Alternatively, you can run strudel locally to try out the latest features. You can find development-oriented [instructions for that here](https://codeberg.org/uzu/strudel/src/branch/main/CONTRIBUTING.md#project-setup).
-
-You can see the [latest changes here](https://codeberg.org/uzu/strudel/pulls?q=&type=all&sort=recentupdate&state=closed&labels=&milestone=0&project=0&assignee=0&poster=0), as 'pull requests'.
-
 ## How to record or export audio?
 
 Strudel is not a digital audio workstation and does not operate following the same principles shared by most traditional audio softwares. However, there are multiple ways to record the audio -- and video -- output of Strudel:

website/src/repl/components/panel/PatternsTab.jsx

@@ -18,7 +18,6 @@ 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';
 
 export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
@@ -29,12 +28,12 @@ export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
     if (!isNaN(date)) {
       title = date.toLocaleDateString();
     } else {
-      title = pattern.id || 'unnamed';
+      title = 'unnamed';
     }
   }
 
   const author = Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous';
-  return <>{`${title} by ${author.slice(0, 100)}`.slice(0, 60)}</>;
+  return <>{`${pattern.id}: ${title} by ${author.slice(0, 100)}`.slice(0, 60)}</>;
 }
 
 function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
@@ -80,115 +79,73 @@ const updateCodeWindow = (context, patternData, reset = false) => {
   context.handleUpdate(patternData, reset);
 };
 
-export function PatternsTab({ context }) {
-  const [search, setSearch] = useState('');
+function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternAutoStart } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
-
-  const visiblePatterns = useMemo(() => {
-    if (!search) {
-      return userPatterns;
-    }
-    return Object.fromEntries(
-      Object.entries(userPatterns).filter(([_key, pattern]) => {
-        const meta = getMetadata(pattern.code);
-
-        // Search for specific meta keys
-        const searchLowercaseTrimmed = search.trim().toLowerCase();
-        if (searchLowercaseTrimmed.includes(':')) {
-          const [metaKey, metaSearch] = searchLowercaseTrimmed.split(/:\s*/);
-          if (metaKey !== undefined && metaSearch !== undefined && metaKey in meta) {
-            const metaValues = meta[metaKey];
-            if (Array.isArray(metaValues)) {
-              return metaValues.some((metaValue) => metaValue.toLowerCase().includes(metaSearch));
-            } else if (typeof metaValues === 'string') {
-              return metaValues.toLowerCase().includes(metaSearch);
-            } else {
-              return false;
-            }
-          }
-        }
-        const title = meta.title ? meta.title : 'unnamed';
-        const authors = meta.by ? meta.by : ['anonymous'];
-        const tags = meta.tag ? meta.tag : [];
-        return (
-          title.toLowerCase().includes(searchLowercaseTrimmed) ||
-          authors.some((author) => author.toLowerCase().includes(searchLowercaseTrimmed)) ||
-          tags.some((tag) => tag.toLowerCase().includes(searchLowercaseTrimmed))
-        );
-      }),
-    );
-  }, [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="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="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 h-full bg-background p-2 rounded-md">
+        {/* {patternFilter === patternFilterName.user && ( */}
+        <PatternButtons
+          onClick={(id) => {
+            updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
 
-        <div className="overflow-auto h-full bg-background p-2 rounded-md">
-          {/* {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={userPatterns}
+          started={context.started}
+          activePattern={activePattern}
+          viewingPatternID={viewingPatternID}
+        />
+        {/* )} */}
       </div>
     </div>
   );
@@ -275,3 +232,28 @@ function PublicPatterns({ context }) {
   }
   return <LatestPatterns context={context} />;
 }
+
+export function PatternsTab({ context }) {
+  const { patternFilter } = useSettings();
+
+  return (
+    <div className="px-4 w-full text-foreground  space-y-2  flex flex-col overflow-hidden max-h-full h-full">
+      <UserPatterns context={context} />
+    </div>
+  );
+  /* return (
+    <div className="px-4 w-full text-foreground  space-y-2  flex flex-col overflow-hidden max-h-full h-full">
+      <ButtonGroup
+        value={patternFilter}
+        onChange={(value) => settingsMap.setKey('patternFilter', value)}
+        items={patternFilterName}
+      ></ButtonGroup>
+
+      {patternFilter === patternFilterName.user ? (
+        <UserPatterns context={context} />
+      ) : (
+        <PublicPatterns context={context} />
+      )}
+    </div>
+  ); */
+}

website/src/repl/components/panel/Reference.jsx

@@ -55,7 +55,7 @@ export function Reference() {
   return (
     <div className="flex h-full w-full p-2 overflow-hidden">
       <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
-        <div className="w-full flex">
+        <div class="w-full flex">
           <Textbox className="w-full" placeholder="Search" value={search} onChange={setSearch} />
         </div>
         <div className="flex flex-col h-full overflow-y-auto  gap-1.5 bg-background bg-opacity-50  rounded-md">