Merge remote-tracking branch 'origin/main' into clip-support-floats

website/src/pages/functions/value-modifiers.mdx

@@ -139,6 +139,10 @@ This group of functions allows to modify the value of events.
 
 <JsDoc client:idle name="Pattern.range2" h={0} />
 
+## ratio
+
+<JsDoc client:idle name="Pattern.ratio" h={0} />
+
 # Custom Parameters
 
 You can also create your own parameters:

website/src/repl/Footer.jsx

@@ -364,7 +364,8 @@ const fontFamilyOptions = {
 };
 
 function SettingsTab({ scheduler }) {
-  const { theme, keybindings, isLineNumbersDisplayed, fontSize, fontFamily } = useSettings();
+  const { theme, keybindings, isLineNumbersDisplayed, isAutoCompletionEnabled, fontSize, fontFamily } = useSettings();
+
   return (
     <div className="text-foreground p-4 space-y-4">
       {/* <FormItem label="Tempo">
@@ -406,7 +407,7 @@ function SettingsTab({ scheduler }) {
           />
         </FormItem>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <FormItem label="Keybindings">
           <ButtonGroup
             value={keybindings}
@@ -419,6 +420,11 @@ function SettingsTab({ scheduler }) {
           onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
           value={isLineNumbersDisplayed}
         />
+        <Checkbox
+          label="Enable auto-completion"
+          onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
+          value={isAutoCompletionEnabled}
+        />
       </div>
       <FormItem label="Reset Settings">
         <button

website/src/repl/Repl.jsx

@@ -105,7 +105,7 @@ export function Repl({ embedded = false }) {
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
 
-  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
+  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed, isAutoCompletionEnabled } = useSettings();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
@@ -272,6 +272,7 @@ export function Repl({ embedded = false }) {
             value={code}
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
+            isAutoCompletionEnabled={isAutoCompletionEnabled}
             fontSize={fontSize}
             fontFamily={fontFamily}
             onChange={handleChangeCode}

website/src/settings.mjs

@@ -5,6 +5,7 @@ export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
   isLineNumbersDisplayed: true,
+  isAutoCompletionEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -21,6 +22,7 @@ export function useSettings() {
     ...state,
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
     isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
+    isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
     fontSize: Number(state.fontSize),
   };
 }