Monorepo for Aesthetic.Computer
aesthetic.computer
notepat: move m4l/os/drum into dedicated OS bar row
They were pinned to y=0 in the top bar and anchored to waveBtn, crowding
wave/oct and contesting hit areas with the mini-piano strip — which is
why they felt like they weren't linking. The OS_BAR slot (y=33–45) was
already reserved by the layout, just unused. Builders now position into
that row with responsive padding/labels; paint functions fill the box
directly instead of compensating for top-bar placement.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+63
-102
+63
-102
system/public/aesthetic.computer/disks/notepat.mjs
+63
-102
system/public/aesthetic.computer/disks/notepat.mjs
···
4648
4648
}
4649
4649
4650
4650
abletonBtn?.paint((btn) => {
4651
-
ink(btn.down ? [52, 48, 90] : [30, 28, 62]).box(
4652
-
btn.box.x,
4653
-
btn.box.y + 3,
4654
-
btn.box.w,
4655
-
btn.box.h - 3,
4656
-
);
4651
+
ink(btn.down ? [52, 48, 90] : [30, 28, 62]).box(btn.box);
4657
4652
if (btn.over && !btn.down) {
4658
-
ink(255, 255, 255, 24).box(
4659
-
btn.box.x,
4660
-
btn.box.y + 3,
4661
-
btn.box.w,
4662
-
btn.box.h - 3,
4663
-
);
4664
-
ink(150, 175, 255, 160).box(
4665
-
btn.box.x,
4666
-
btn.box.y + 3,
4667
-
btn.box.w,
4668
-
btn.box.h - 3,
4669
-
"outline",
4670
-
);
4653
+
ink(255, 255, 255, 24).box(btn.box);
4654
+
ink(150, 175, 255, 160).box(btn.box, "outline");
4671
4655
}
4672
4656
ink(90, 120, 210).line(
4673
4657
btn.box.x + btn.box.w,
4674
-
btn.box.y + 3,
4658
+
btn.box.y,
4675
4659
btn.box.x + btn.box.w,
4676
4660
btn.box.y + btn.box.h - 1,
4677
4661
);
4678
4662
ink(btn.down ? [235, 240, 255] : [175, 205, 255]).write(
4679
-
"m4l",
4680
-
{ x: btn.box.x + 3, y: btn.box.y + 5 },
4663
+
abletonBtn.label || "m4l",
4664
+
{ x: btn.box.x + TOGGLE_BTN_PADDING_X, y: btn.box.y + TOGGLE_BTN_PADDING_Y },
4681
4665
undefined, undefined, false, "MatrixChunky8"
4682
4666
);
4683
4667
});
4684
4668
4685
4669
osBtn?.paint((btn) => {
4686
-
ink(btn.down ? [20, 70, 70] : [10, 45, 45]).box(
4687
-
btn.box.x,
4688
-
btn.box.y + 3,
4689
-
btn.box.w,
4690
-
btn.box.h - 3,
4691
-
);
4670
+
ink(btn.down ? [20, 70, 70] : [10, 45, 45]).box(btn.box);
4692
4671
if (btn.over && !btn.down) {
4693
-
ink(255, 255, 255, 24).box(
4694
-
btn.box.x,
4695
-
btn.box.y + 3,
4696
-
btn.box.w,
4697
-
btn.box.h - 3,
4698
-
);
4699
-
ink(100, 255, 255, 140).box(
4700
-
btn.box.x,
4701
-
btn.box.y + 3,
4702
-
btn.box.w,
4703
-
btn.box.h - 3,
4704
-
"outline",
4705
-
);
4672
+
ink(255, 255, 255, 24).box(btn.box);
4673
+
ink(100, 255, 255, 140).box(btn.box, "outline");
4706
4674
}
4707
4675
ink(70, 160, 160).line(
4708
4676
btn.box.x + btn.box.w,
4709
-
btn.box.y + 3,
4677
+
btn.box.y,
4710
4678
btn.box.x + btn.box.w,
4711
4679
btn.box.y + btn.box.h - 1,
4712
4680
);
4713
4681
ink(btn.down ? [220, 255, 255] : [120, 255, 255]).write(
4714
-
"os",
4715
-
{ x: btn.box.x + 3, y: btn.box.y + 5 },
4682
+
osBtn.label || "os",
4683
+
{ x: btn.box.x + TOGGLE_BTN_PADDING_X, y: btn.box.y + TOGGLE_BTN_PADDING_Y },
4716
4684
undefined, undefined, false, "MatrixChunky8"
4717
4685
);
4718
4686
});
···
4720
4688
drumBtn?.paint((btn) => {
4721
4689
const base = drumMode ? [90, 30, 30] : [30, 20, 40];
4722
4690
const bright = drumMode ? [220, 110, 110] : [120, 120, 180];
4723
-
ink(btn.down ? [140, 60, 60] : base).box(
4724
-
btn.box.x,
4725
-
btn.box.y + 3,
4726
-
btn.box.w,
4727
-
btn.box.h - 3,
4728
-
);
4691
+
ink(btn.down ? [140, 60, 60] : base).box(btn.box);
4729
4692
if (btn.over && !btn.down) {
4730
-
ink(255, 255, 255, 24).box(
4731
-
btn.box.x,
4732
-
btn.box.y + 3,
4733
-
btn.box.w,
4734
-
btn.box.h - 3,
4735
-
);
4736
-
ink(255, 160, 160, 140).box(
4737
-
btn.box.x,
4738
-
btn.box.y + 3,
4739
-
btn.box.w,
4740
-
btn.box.h - 3,
4741
-
"outline",
4742
-
);
4693
+
ink(255, 255, 255, 24).box(btn.box);
4694
+
ink(255, 160, 160, 140).box(btn.box, "outline");
4743
4695
}
4744
4696
ink(bright).line(
4745
4697
btn.box.x + btn.box.w,
4746
-
btn.box.y + 3,
4698
+
btn.box.y,
4747
4699
btn.box.x + btn.box.w,
4748
4700
btn.box.y + btn.box.h - 1,
4749
4701
);
4750
4702
ink(btn.down ? [255, 220, 220] : bright).write(
4751
-
"drm",
4752
-
{ x: btn.box.x + 3, y: btn.box.y + 5 },
4703
+
drumBtn.label || "drm",
4704
+
{ x: btn.box.x + TOGGLE_BTN_PADDING_X, y: btn.box.y + TOGGLE_BTN_PADDING_Y },
4753
4705
undefined, undefined, false, "MatrixChunky8"
4754
4706
);
4755
4707
});
···
8364
8316
octBtn.isNarrow = isNarrow;
8365
8317
}
8366
8318
8367
-
function buildAbletonButton({ ui }) {
8368
-
const margin = 4;
8369
-
const labelWidth = 3 * 6;
8370
-
const buttonWidth = labelWidth + margin * 2;
8371
-
const buttonHeight = 10 + margin * 2 - 1 + 2;
8372
-
const waveX = waveBtn?.box?.x ?? 9999;
8373
-
abletonBtn = new ui.Button(
8374
-
waveX - buttonWidth - 3,
8375
-
0,
8376
-
buttonWidth,
8377
-
buttonHeight,
8378
-
);
8319
+
// OS bar (m4l / os / drum) — dedicated row below the secondary bar so the
8320
+
// top bar stays uncluttered. Buttons are right-aligned and chain leftward;
8321
+
// when the screen is narrow they collapse widths/labels so they still fit.
8322
+
const OS_BAR_BTN_GAP = 3;
8323
+
const OS_BAR_RIGHT_MARGIN = 4;
8324
+
8325
+
function osBarButtonMetrics({ screen }) {
8326
+
const isNarrow = screen.width < 240;
8327
+
const isVeryNarrow = screen.width < 180;
8328
+
const padX = isVeryNarrow ? 2 : isNarrow ? 3 : 4;
8329
+
const glyph = 6;
8330
+
return {
8331
+
isNarrow,
8332
+
isVeryNarrow,
8333
+
padX,
8334
+
glyph,
8335
+
y: OS_BAR_TOP + 1,
8336
+
h: OS_BAR_HEIGHT - 2,
8337
+
labels: {
8338
+
ableton: "m4l",
8339
+
os: "os",
8340
+
drum: isNarrow ? "drm" : "drum",
8341
+
},
8342
+
};
8343
+
}
8344
+
8345
+
function buildAbletonButton({ ui, screen }) {
8346
+
const m = osBarButtonMetrics({ screen });
8347
+
const w = m.labels.ableton.length * m.glyph + m.padX * 2;
8348
+
const x = screen.width - OS_BAR_RIGHT_MARGIN - w;
8349
+
abletonBtn = new ui.Button(x, m.y, w, m.h);
8379
8350
abletonBtn.id = "ableton-button";
8351
+
abletonBtn.label = m.labels.ableton;
8380
8352
}
8381
8353
8382
-
function buildOsButton({ ui }) {
8383
-
const margin = 4;
8384
-
const labelWidth = 2 * 6;
8385
-
const buttonWidth = labelWidth + margin * 2;
8386
-
const buttonHeight = 10 + margin * 2 - 1 + 2;
8387
-
const abletonX = abletonBtn?.box?.x ?? waveBtn?.box?.x ?? 9999;
8388
-
osBtn = new ui.Button(
8389
-
abletonX - buttonWidth - 3,
8390
-
0,
8391
-
buttonWidth,
8392
-
buttonHeight,
8393
-
);
8354
+
function buildOsButton({ ui, screen }) {
8355
+
const m = osBarButtonMetrics({ screen });
8356
+
const w = m.labels.os.length * m.glyph + m.padX * 2;
8357
+
const anchorX = abletonBtn?.box?.x ?? (screen.width - OS_BAR_RIGHT_MARGIN);
8358
+
osBtn = new ui.Button(anchorX - w - OS_BAR_BTN_GAP, m.y, w, m.h);
8394
8359
osBtn.id = "os-button";
8360
+
osBtn.label = m.labels.os;
8395
8361
}
8396
8362
8397
-
function buildDrumButton({ ui }) {
8398
-
const margin = 4;
8399
-
const labelWidth = 3 * 6; // "drm"
8400
-
const buttonWidth = labelWidth + margin * 2;
8401
-
const buttonHeight = 10 + margin * 2 - 1 + 2;
8402
-
const osX = osBtn?.box?.x ?? abletonBtn?.box?.x ?? waveBtn?.box?.x ?? 9999;
8403
-
drumBtn = new ui.Button(
8404
-
osX - buttonWidth - 3,
8405
-
0,
8406
-
buttonWidth,
8407
-
buttonHeight,
8408
-
);
8363
+
function buildDrumButton({ ui, screen }) {
8364
+
const m = osBarButtonMetrics({ screen });
8365
+
const w = m.labels.drum.length * m.glyph + m.padX * 2;
8366
+
const anchorX =
8367
+
osBtn?.box?.x ?? abletonBtn?.box?.x ?? (screen.width - OS_BAR_RIGHT_MARGIN);
8368
+
drumBtn = new ui.Button(anchorX - w - OS_BAR_BTN_GAP, m.y, w, m.h);
8409
8369
drumBtn.id = "drum-button";
8370
+
drumBtn.label = m.labels.drum;
8410
8371
}
8411
8372
8412
8373
// Build metronome controls and toggle buttons with responsive layout