Added files generated by Claude, prompted by sdk based on the md files

static/components/EnvelopeEditor.js

@@ -0,0 +1,74 @@
+import { h, computed } from 'vue';
+import { ShapeEditor } from './ShapeEditor.js';
+
+// Default shapes used when toggling a section on for the first time.
+function defaultShape(section) {
+    switch (section) {
+        case 'A': return { length: 10, start: 0, z: 1, coords: [{ x: 1, y: 10, z: 1, isSharp: false }] };
+        case 'S': return { length: 10, start: 0, z: 1, coords: [{ x: 1, y: 100, z: 1, isSharp: false }] };
+        case 'R': return { length: 5,  start: 0, z: 1, coords: [{ x: 1, y: 0,   z: 1, isSharp: false }] };
+        default:  return { length: 1,  start: 0, z: 1, coords: [] };
+    }
+}
+
+// Co-dependence:
+// - Attack ending y=0 → disable S and R
+// - S absent → R disabled
+function attackEndsAtZero(shape) {
+    if (!shape?.coords?.length) return false;
+    return shape.coords[shape.coords.length - 1].y === 0;
+}
+
+export const EnvelopeEditor = {
+    props: ['basicProperties', 'onChange'],
+    setup(props) {
+        function toggle(section) {
+            const bp = props.basicProperties;
+            if (bp[section]) {
+                bp[section] = null;
+            } else {
+                bp[section] = defaultShape(section);
+            }
+            props.onChange?.();
+        }
+
+        return () => {
+            const bp = props.basicProperties;
+            if (!bp) return null;
+
+            const aZero = attackEndsAtZero(bp.A);
+            const sDisabled = aZero;
+            const rDisabled = aZero || !bp.S;
+
+            function section(key, label, disabled) {
+                const active = !!bp[key];
+                return h('div', { class: 'se-envelope-section' }, [
+                    h('div', { class: 'se-envelope-toggle' }, [
+                        h('input', {
+                            type: 'checkbox',
+                            id: `env-${key}`,
+                            checked: active,
+                            disabled,
+                            onChange: () => !disabled && toggle(key),
+                        }),
+                        h('label', { for: `env-${key}` }, label),
+                    ]),
+                    active
+                        ? h('div', { class: disabled ? 'se-envelope-disabled' : null }, [
+                            h(ShapeEditor, {
+                                shape: bp[key],
+                                onChange: props.onChange,
+                            }),
+                          ])
+                        : null,
+                ]);
+            }
+
+            return h('div', null, [
+                section('A', 'Attack',  false),
+                section('S', 'Sustain', sDisabled),
+                section('R', 'Release', rDisabled),
+            ]);
+        };
+    },
+};