LICENSE is MIT, copyright Georgi Durankiev.
The README is written for a stranger: what the device hides behind
modifier combos and why that needs an app at all, what each of the four
tabs does, how the Leitner drill works, how to build and install it, and
a map of the source with the domain and UI split explained.
It also records the four things someone reading the code would otherwise
have to discover: that the combo table is generated from reference/ and
must never be typed by hand, that Entry.id and STORAGE_KEY are
load-bearing for migrating progress off the old version, that
touch-action:none and window-level pointerup are what make chorded
answers possible, and that the domain is pure specifically so it can be
tested - which is how a real bug in the weighted card pick surfaced.
Screenshots show Explore with nothing held beside the same screen
holding SHIFT: three functions becoming thirty-five, pads turning from
numerals into FIX VEL, 16 VEL, CUE and CHROMA. That pair explains the
app faster than the prose does. Captured headlessly at the phone's real
360x735, which needed the held layer temporarily patched in source and
restored afterwards.
Notes the data comes from the SP-404MK2 reference manual v5.50 and that
this is unofficial and unaffiliated with Roland, and points at the
bundled OFL font licences.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The name was SP-404MK2 layers, which is 16 characters and truncates in
the launcher. It is set in five places, one of which cap sync
regenerates from appName, so all five move together: capacitor.config,
strings.xml, index.html, package.json and CLAUDE.md. reference/ keeps
the old name because it is frozen. appId is untouched - changing it
would make this a different app to Android, meaning a fresh install and
the drill progress on the phone orphaned.
The icon is a 3x3 pad grid with the centre pad lit: the app's own
subject, legible when a launcher masks it to a circle, and in the
settled palette. Three columns rather than the hardware's four so the
cells survive 48px, which I checked at 800% magnification.
scripts/make-icon.mjs draws it with ImageMagick primitives, because
there is no SVG rasteriser here - no Inkscape, no rsvg-convert, and no
SVG delegate in ImageMagick 6. It is in the repo because the icon would
otherwise be 15 binary PNGs with no record of how they were made.
Two things that took a few attempts. The draw commands have to be built
as a real array: three tries in bash collapsed all nine into one
argument, which ImageMagick read as a filename. And the convert calls
need -strip, because without it the pixels are identical between runs
but the bytes are not, so the PNGs churned and the script could not be
shown to be their source. Two consecutive runs are now byte-identical.
Also removed two orphaned Capacitor vectors, 204 lines of gradient
swoosh and grid pattern that nothing referenced once the adaptive icon
pointed at @mipmap and @color.
Icons total 52KB. Built and installed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
RESAMPLE still sat flush against its border after the soft hyphen,
because the type was simply too large for the button. A left-block
button is 35.9px wide, leaving 27.9px of usable text width once the
2px borders and padding are removed; SAMPLE at 8px with .03em tracking
measured ~27.8px.
Key labels drop to 7px with no tracking and 1px side padding, which
gives SAMPLE 6.8px of headroom and REVERSE 2.3px. SHIFT, the longest
label in the six-button bank row, gets flex:1.25 - the hardware makes
that button wider too.
Direction settled: A (manual, light) with the dark counterpart. It will
be implemented in the React port rather than retrofitted onto the
Phase 1 vanilla app, so the UI is only built once.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
RESAMPLE was overflowing its button and REMAIN was touching its
borders. Both lack a space, so unlike PTN EDIT or BPM SYNC they cannot
wrap. Restored the soft hyphens the reference already uses
(RE-SAMPLE, RE-MAIN, RE-VERSE) plus hyphens:manual on the key style.
The screen was faithful to the object but too small for the job it does
here. The circle no longer encloses the display: a 124px circle sits
behind a 168x84 LCD, so it reads as two 20px caps above and below with
no ring around the rectangle. Area goes up 2.4x, enough for the display
to name the layer and list what is on it, or show the card and verdict
when drilling.
Room came from the control rows (-6), knobs (-2), info card (-4) and
tab bar (-4):
8 + 44 + 8 + 525 + 8 + 84 + 8 + 50 = 735
8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525
Pad rows are 43px.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Feedback: direction A (light manual) is right; the control block reads
as busy; the screen should match the real assembly; the dark option was
flat because it had no shadows.
Screen — the hardware's actual arrangement: a black circular housing
with a small rectangular positive LCD inset (dark text on pale
grey-green), status line top and bottom, replacing the ellipse with
floating text.
Control block — grouped as the device is silkscreened (PATTERN
SEQUENCER, SAMPLING, SAMPLE EDIT, BANK), each group a hairline bracket
caption over its row, with 10px between the two blocks and 7px between
groups instead of three undifferentiated rows.
FX buttons are now dark with orange text, as on the unit.
Dark mode replaces Blueprint: A's counterpart with filled bodies and
hard black offset shadows, the panel lighter than the ground so the
shadows read. Blueprint and the current app move to an 'Earlier' page.
Room came from trimming the info card 116->88 and the tab bar 58->54,
so the panel grows 485->517 and pad rows stay at exactly 44px:
8 + 44 + 8 + 517 + 8 + 88 + 8 + 54 = 735
8 + 38 + 8 + 104 + 10 + 140 + 10 + 191 + 8 = 517
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Design inspiration is the Teenage Engineering EP-133 manual: flat fills,
heavy outlines, hard zero-blur offset shadows, one orange accent,
uppercase technical type, monospaced numerals.
Six artboards drawn at the real measured 360x735 with the actual
vertical budget (44px pickers, 485px panel, 116px info, 58px tabs), so
a mockup cannot fit in a way the device won't:
- Current the app as it stands, for comparison
- A Manual light ground, 2px black outlines, black pads
- B Blueprint pure black, 1px white hairlines, no fills
- Specimen type candidates and palette, incl. which orange
Type is identical across both directions so the light/dark choice is
not confounded with the font choice. Green/red drill feedback is
replaced by orange fill vs dashed outline - neither exists in this
palette.
The seeded canvas payload is gitignored; these files are its source.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
