Monorepo for Aesthetic.Computer
aesthetic.computer
notepat-remote: uniform pixel-perfect gaps
Grid inset bumped to bezel+1 so the bg gap between bezel and outer
pads is 2px — matching the 2px gap between adjacent pads. Previously
the bezel-to-pad gap was 1px while pad-to-pad was 2px, which is the
"off by a pixel" look. Resting pad outlines dropped (they were
stacking on top of the gap + bezel, triple-layering the edges);
held pads keep their accent-color outline glow.
+23
-16
+23
-16
system/public/aesthetic.computer/disks/notepat-remote.mjs
+23
-16
system/public/aesthetic.computer/disks/notepat-remote.mjs
···
486
486
const cols = 4;
487
487
const rows = 6;
488
488
const octaveGap = 2;
489
-
// colEdges span W exactly (last cell absorbs any horizontal
490
-
// rounding remainder).
489
+
const bezel = 2; // visible bezel thickness
490
+
const gridInset = 3; // bezel + 1px bg so cell-gap-to-bezel matches pad-gap-between (both 2px)
491
+
// colEdges span the inner area (inside bezel + 1px bg) exactly; last
492
+
// cell absorbs any horizontal rounding remainder.
493
+
const innerW = W - gridInset * 2;
494
+
const innerH = H - gridInset * 2;
491
495
const colEdges = [];
492
-
for (let c = 0; c <= cols; c += 1) colEdges.push(floor((c * W) / cols));
496
+
for (let c = 0; c <= cols; c += 1) colEdges.push(gridInset + floor((c * innerW) / cols));
493
497
// rowHeights distribute the available vertical space evenly and
494
498
// absorb the leftover px into the first few rows so the grid ends
495
-
// flush with H — otherwise we'd leave a few dead pixels at the
496
-
// bottom edge. Octave gap is inserted between row 2 and row 3.
497
-
const avail = H - octaveGap;
499
+
// flush with (H - gridInset). Octave gap is inserted between row 2
500
+
// and row 3.
501
+
const avail = innerH - octaveGap;
498
502
const rowBase = floor(avail / rows);
499
503
const rowRem = avail - rowBase * rows;
500
504
const rowHeights = [];
501
505
for (let r = 0; r < rows; r += 1) rowHeights.push(rowBase + (r < rowRem ? 1 : 0));
502
-
const rowEdges = [0];
506
+
const rowEdges = [gridInset];
503
507
for (let r = 0; r < rows; r += 1) {
504
508
const gap = r === 3 ? octaveGap : 0;
505
509
rowEdges.push(rowEdges[r] + rowHeights[r] + gap);
···
588
592
const ph = max(1, b.h - gap * 2);
589
593
590
594
ink(...fill).box(px, py, pw, ph, "fill");
591
-
// Pad border: darker shade of fill, or bright accent when held.
592
-
const borderColor = held && focused ? accent : [
593
-
floor(fill[0] * 0.5),
594
-
floor(fill[1] * 0.5),
595
-
floor(fill[2] * 0.5),
596
-
];
597
-
ink(...borderColor).box(px, py, pw, ph, "outline");
595
+
// Held pads get a bright accent outline; resting pads are flat
596
+
// (the 2px bg gap between cells is the separator). Stacking an
597
+
// outline on every pad doubled up against the neighbor's gap
598
+
// and the device bezel, making edges read as "off by a pixel".
599
+
if (held && focused) {
600
+
ink(...accent).box(px, py, pw, ph, "outline");
601
+
}
598
602
599
603
// Main label = keyboard key you actually press. Note name is
600
604
// secondary — the QWERTY letter is what turns the pad into a
···
654
658
// muted rose rather than a stark gray.
655
659
if (focused) {
656
660
const chrome = liveTrackColor || [150, 80, 110];
661
+
// Divider runs the full inner width (skipping the bezel columns so
662
+
// the horizontal & vertical chrome meet cleanly at the corners).
657
663
const barY = rowEdges[3] - octaveGap;
658
-
ink(...chrome).box(0, barY, W, octaveGap, "fill");
659
-
for (let i = 0; i < 2; i += 1) {
664
+
ink(...chrome).box(bezel, barY, W - bezel * 2, octaveGap, "fill");
665
+
// 2px bezel as two concentric 1px outlines.
666
+
for (let i = 0; i < bezel; i += 1) {
660
667
ink(...chrome).box(i, i, W - i * 2, H - i * 2, "outline");
661
668
}
662
669
}
system/public/m4l/notepat.com.amxd
system/public/m4l/notepat.com.amxd
This is a binary file and will not be displayed.