cleanup

packages/core/repl.mjs

@@ -147,7 +147,6 @@ export function repl({
 
   // set pattern methods that use this repl via closure
   const injectPatternMethods = () => {
-    
     Pattern.prototype.p = function (id) {
       if (typeof id === 'string' && (id.startsWith('_') || id.endsWith('_'))) {
         // allows muting a pattern x with x_ or _x

website/src/repl/components/button/action-button.jsx

@@ -8,27 +8,36 @@ export function ActionButton({ children, label, labelIsHidden, className, ...but
     </button>
   );
 }
-export function ActionInput({ label, className, ...inputProps }) {
+
+export function SpecialActionButton(props) {
+  const { className, ...buttonProps } = props;
+
   return (
-    <label className={cx("hover:opacity-50 cursor-pointer text-nowrap w-fit", className)}>
-      <input
-        style={{ display: 'none' }}
-        {...inputProps}
-      />
-      {label}
+    <ActionButton
+      {...buttonProps}
+      className={cx('bg-background p-2 max-w-[300px] rounded-md hover:opacity-50', className)}
+    />
+  );
+}
+
+export function ActionInput({ label, className, ...props }) {
+  return (
+    <label className={cx('inline-flex items-center cursor-pointer', className)}>
+      <input {...props} className="sr-only peer" />
+
+      <span className="inline-flex items-center transition-opacity peer-hover:opacity-60 peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500">
+        {label}
+      </span>
     </label>
   );
 }
 
-export function SpecialActionButton(props) {
-  const { className, ...buttonProps } = props
-
-  return <ActionButton {...buttonProps} className={cx("bg-background p-2 max-w-[300px] rounded-md hover:opacity-50", className)} />
-
+export function SpecialActionInput({ className, ...props }) {
+  return (
+    <ActionInput
+      {...props}
+      className={className}
+      label={<span className="bg-background p-2 max-w-[300px] rounded-md">{props.label}</span>}
+    />
+  );
 }
-export function SpecialActionInput(props) {
-  const { className, ...inputProps } = props
-  return <ActionInput {...inputProps} className={cx("bg-background p-2  max-w-[300px] rounded-md hover:opacity-50", className)} />
-}
-
-

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

@@ -3,37 +3,27 @@ import { useSettings, storeStartupScript } from '../../../settings.mjs';
 import { SpecialActionInput } from '../button/action-button';
 
 async function importScript(script) {
-    const reader = new FileReader()
-    reader.readAsText(script)
+  const reader = new FileReader();
+  reader.readAsText(script);
 
-    reader.onload = () => {
-        const text = reader.result;
-        console.info(text)
-        storeStartupScript(text)
-
-    };
-
-    reader.onerror = () => {
-        errorLogger(new Error('failed to import prebake script'), 'ImportPrebakeScriptButton')
-    }
+  reader.onload = () => {
+    const text = reader.result;
+    storeStartupScript(text);
+  };
 
+  reader.onerror = () => {
+    errorLogger(new Error('failed to import prebake script'), 'importScript');
+  };
 }
 export function ImportPrebakeScriptButton() {
-    const settings = useSettings();
+  const settings = useSettings();
 
-    return <SpecialActionInput type="file"
-        label="import prebake script"
-        accept=".strudel, .txt"
-        onChange={(e) => importScript(e.target.files[0])} />
-
-    // return <label className="hover:opacity-50 cursor-pointer">
-    //     <input
-    //         style={{ display: 'none' }}
-    //         type="file"
-    //         // multiple
-    //         accept=".strudel, .txt"
-    //         onChange={(e) => importScript(e.target.files[0])}
-    //     />
-    //     import prebake script
-    // </label>
-}
+  return (
+    <SpecialActionInput
+      type="file"
+      label="import prebake script"
+      accept=".strudel"
+      onChange={(e) => importScript(e.target.files[0])}
+    />
+  );
+}

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

@@ -127,7 +127,7 @@ function PanelContent({ context, tab }) {
     case tabNames.reference:
       return <Reference />;
     case tabNames.settings:
-      return <SettingsTab started={context.started} context={context} />;
+      return <SettingsTab started={context.started} />;
     case tabNames.files:
       return <FilesTab />;
     default:

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

@@ -83,7 +83,7 @@ function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternFilter, patternAutoStart, } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
   return (
     <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">

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

@@ -88,7 +88,7 @@ const fontFamilyOptions = {
 
 const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?';
 
-export function SettingsTab({ started,context }) {
+export function SettingsTab({ started }) {
   const {
     theme,
     keybindings,
@@ -208,7 +208,6 @@ export function SettingsTab({ started,context }) {
         </FormItem>
       </div>
       <ImportPrebakeScriptButton />
-      {/* <SpecialActionButton label="edit startup script" onClick={() => context.editStartupScript(startupScript)}></SpecialActionButton> */}
       <FormItem label="Keybindings">
         <ButtonGroup
           value={keybindings}

website/src/repl/prebake.mjs

@@ -1,4 +1,4 @@
-import { Pattern,  noteToMidi, valueToMidi } from '@strudel/core';
+import { Pattern, noteToMidi, valueToMidi } from '@strudel/core';
 import { aliasBank, registerSynthSounds, registerZZFXSounds, samples } from '@strudel/webaudio';
 import { registerSamplesFromDB } from './idbutils.mjs';
 import './piano.mjs';
@@ -11,9 +11,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 const baseCDN = 'https://strudel.b-cdn.net';
 
 export async function prebake() {
-
   // const settings = settingsMap.get()
-  
 
   // const prebakeScript = settings.startupScript || '';
   // await  evaluate(prebakeScript);

website/src/repl/useReplContext.jsx

@@ -84,9 +84,10 @@ export function useReplContext() {
       pattern: silence,
       drawTime,
       drawContext,
-      prebake: async () => Promise.all([modulesLoading, presets,]).then(() => {
-        return evaluate(startupScript ?? '')
-      }),
+      prebake: async () =>
+        Promise.all([modulesLoading, presets]).then(() => {
+          return evaluate(startupScript ?? '');
+        }),
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
@@ -202,7 +203,6 @@ export function useReplContext() {
     }
   };
 
-
   const handleEvaluate = () => {
     editorRef.current.evaluate();
   };