From 518ffd7578dbc74689b5303a35f402bfe081aa91 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sat, 4 Jul 2026 16:46:48 -0400 Subject: docs: gather panel design prototypes into docs/prototypes/ I gathered all five self-contained HTML/CSS design prototypes into one home: the instrument-console pair (moved from assets/), plus the net-panel rescan, sound panel, widget gallery, and waybar redesign (moved out of working/). Added a README index and updated every inbound link: build summary, the instrument-console and audio specs, and todo.org. Also fixed a broken link the earlier sort left in the build summary. It still pointed at the instrument-console spec's old docs/design/ path after the move to docs/specs/. --- ...-07-03-instrument-console-panels-prototype.html | 1359 ++++++++++++++++++++ .../2026-07-03-net-panel-rescan-prototype.html | 251 ++++ .../2026-07-03-panel-widget-gallery-prototype.html | 338 +++++ .../2026-07-03-sound-panel-prototype.html | 417 ++++++ .../2026-07-03-waybar-redesign-prototype.html | 321 +++++ docs/prototypes/README.org | 21 + docs/specs/2026-07-03-audio-panel-spec.org | 4 +- .../2026-07-03-instrument-console-panels-spec.org | 12 +- 8 files changed, 2720 insertions(+), 3 deletions(-) create mode 100644 docs/prototypes/2026-07-03-instrument-console-panels-prototype.html create mode 100644 docs/prototypes/2026-07-03-net-panel-rescan-prototype.html create mode 100644 docs/prototypes/2026-07-03-panel-widget-gallery-prototype.html create mode 100644 docs/prototypes/2026-07-03-sound-panel-prototype.html create mode 100644 docs/prototypes/2026-07-03-waybar-redesign-prototype.html create mode 100644 docs/prototypes/README.org (limited to 'docs') diff --git a/docs/prototypes/2026-07-03-instrument-console-panels-prototype.html b/docs/prototypes/2026-07-03-instrument-console-panels-prototype.html new file mode 100644 index 0000000..0258f20 --- /dev/null +++ b/docs/prototypes/2026-07-03-instrument-console-panels-prototype.html @@ -0,0 +1,1359 @@ + + + + + +Instrument consoles — network + bluetooth + + + + +
+
archsetup · dupre panel family · instrument consoles
+

Network + Bluetooth — the pair

+

Same faceplate, same idioms: lamp rows act on click, hover reveals ✎ rename and the + arm-to-fire ✕, gauges under the console keys (throughput needles on NET, battery fuel + gauges on BT), doctor streams and repairs in the output well. Try the power switch + on BT·01 — everything follows it.

+
+ +
+ + +
+
net·01 — as iterated
+
+
+
+

Join network

+
WPA2 — password required
+ + +
+ + +
+
+
+ +
+
+ + ONLINE + TUNNEL + AIRPLANE + NET·01 + + +
+
+ +
channel
+
+
@Hyatt_WiFi + + -59 dBm · 44 ms
+
172.20.2.108/20 · gw 172.20.0.1 · route wlp170s0
+
+ +
networks+ hidden
+
+ +
tunnels
+
+ +
console
+
+ + +
+ +
+
+ LIVE + HOLD +
+
+
+
+
+
0.1 Mbps
+
RX · DOWN
+
+
+ LIVE + HOLD +
+
+
+
+
+
0.1 Mbps
+
TX · UP
+
+
+
+ +
+ +
+
+
+
+ +
+ + +
+
bt·01 — new, same idioms
+
+
+
+

Pair device

+
confirm the passkey matches the device
+ + +
+ + +
+
+
+ +
+
+ + POWERED + LOW BATT + AIRPLANE + BT·01 + + +
+
+ +
adapter
+
+
intel ax211 + hci0
+
+ discoverable off + · 1 device connected
+
+ +
paired
+
+ +
nearby
+
+ +
console
+
+ + +
+ +
+
+ LIVE +
+
+
+
+
+
72 %
+
LOGI M650
+
+
+ — +
+
+
+
+
+
—
+
NO DEVICE
+
+
+
battery · connected devices
+ +
+ +
+
+
+
+ +
+ + +
+

The bt mapping

+
    +
  • Power switch on the faceplate — flip it: devices drop, gauges die, keys disable, state goes OFF. Flip back: the mouse auto-reconnects. (the switch-placement ask, in console form)
    • +
  • Battery fuel gauges are BT's meters — one per connected device, needle at charge, red under 15% with a LOW BATT badge on the faceplate.
    • +
  • Paired rows toggle on click (connect/disconnect), exactly like tunnels. Hover: ✎ rename (the rename ask), ✕ arm-to-forget.
    • +
  • Nearby rows pair on click — passkey confirm dialog, then the device moves up to PAIRED and connects. SCAN refreshes the neighborhood.
    • +
  • discoverable off in the adapter line is a click-toggle (gold when on).
    • +
  • Disconnect is arm-first on the active row — first click arms in gold ("disconnect? click again"), second fires. Gold, not terracotta: disruptive, not destructive.
    • +
  • NET·01 grew the wifi radio switch (faceplate, same spot as BT's). Airplane mode is system-level: both switches drop, AIRPLANE badges light, and a switch flipped under airplane refuses with the way out. A plugged ethernet cable keeps NET·01 online through it.
    • +
  • DOCTOR does it all here too: adapter → radio → service → powered → devices → audio profile. Tick the degraded-audio switch and run it: it finds HSP, flips to A2DP, verifies the sink followed.
    • +
+
+ + + + + + + +
the audio one needs the headphones connected — click WH-1000XM4 first.
+ +
+
+
+ + + + diff --git a/docs/prototypes/2026-07-03-net-panel-rescan-prototype.html b/docs/prototypes/2026-07-03-net-panel-rescan-prototype.html new file mode 100644 index 0000000..3329cdb --- /dev/null +++ b/docs/prototypes/2026-07-03-net-panel-rescan-prototype.html @@ -0,0 +1,251 @@ + + + + + +Net panel — rescan affordance + + + + +
+
archsetup · dupre panel family · net·01
+

Networks — the rescan affordance

+

Where does a WiFi rescan live, and how does it show it's working? The count "· N in range" is + really a live status field — the natural home for "scanning…". My lean: an explicit ⟳ rescan + action in the engrave line (discoverable, same slot as "+ hidden"), with a flash-and-fade + busy state — the glyph spins, the count breathes, new rows fade in as found. The count is also + click-to-rescan as a shortcut. Use the selector on the right to feel each busy treatment.

+
+ +
+
+
net·01 — networks section
+
+
+
+ + ONLINE + NET·01 +
+
+ +
channel
+
+
@Hyatt_WiFi + + -59 dBm · 44 ms
+
172.20.2.108/20 · gw 172.20.0.1 · route wlp170s0
+
+ +
networks· 5 in range + ⟳ + + + hidden +
+
+ +
+
+
+ +
+
+
busy feedback style
+
+ + + + +
+ +
+ +

The three busy signals

+
    +
  • Spinner — the ⟳ glyph rotates while scanning. The clearest "working" cue; universal.
    • +
  • Count breathe — "· 5 in range" becomes "scanning…" and slow-pulses. Your idea: the status field animates in place, no extra chrome.
    • +
  • Section breathe — the whole list gives a faint gold breath while the scan runs; found rows fade in gold. Ambient, ties the animation to what's changing.
    • +
  • All (recommended) — spinner + count + fade-in together. The section breathe is optional; it can read as busy on a small panel, so it's off in "all" by default and its own option to try.
    • +
+ +

Why an explicit action, not only the count

+
+ Overloading the count as the sole trigger is elegant but a first look doesn't know it's clickable. + An explicit ⟳ rescan in the engrave line is discoverable, sits in the same slot as "+ hidden" + (consistent), and doesn't cost a heavy console key. Keeping the count clickable too gives power users + the shortcut without hiding the affordance. A dedicated RESCAN console key (next to DOCTOR / + SPEED TEST) is the third option — heavier, and rescan is a list action, not a diagnostic, so it fits + the engrave line better. +
+
+
+ + + + diff --git a/docs/prototypes/2026-07-03-panel-widget-gallery-prototype.html b/docs/prototypes/2026-07-03-panel-widget-gallery-prototype.html new file mode 100644 index 0000000..8e642f4 --- /dev/null +++ b/docs/prototypes/2026-07-03-panel-widget-gallery-prototype.html @@ -0,0 +1,338 @@ + + + + + +Panel widget gallery — dupre instrument console + + + +
+
+
archsetup · dupre panel family
+

Widget gallery — the instrument-console kit

+

Every control + display idiom we can build in the dupre faceplate language, all rendering from + the same tokens the net / bt / sound panels use. Controls take input; meters & + gauges show a live analog value; indicators & readouts show state or a number. + Live ones animate. Pick what fits each job — most cost pure CSS; the two that need a real + drawing surface (needle gauge, waveform) are flagged in their notes.

+
+ +

Controls — take input

+
+ +

Meters & gauges — live analog value

+
+ +

Indicators & readouts — state or number

+
+ +
+ + + diff --git a/docs/prototypes/2026-07-03-sound-panel-prototype.html b/docs/prototypes/2026-07-03-sound-panel-prototype.html new file mode 100644 index 0000000..d75f566 --- /dev/null +++ b/docs/prototypes/2026-07-03-sound-panel-prototype.html @@ -0,0 +1,417 @@ + + + + + +Sound — instrument console (pulsemixer) + + + + +
+
archsetup · dupre panel family · instrument consoles
+

Sound — the pulsemixer console

+

Same faceplate as net + bluetooth. The bar's sound glyph opens this. Every sink and + source is a row: click the row body to make it default, drag the fader for its volume, + hit the glyph to mute just it. Each row has a live-signal meter — the device actually + carrying audio dances even when it isn't the default, so you can find the one playing the + meeting and click it. The faceplate switch is the master quick-mute; the mic carries + live · muted · push-to-talk (hold Space). Row 1 of gauges is the volume you set; row 2 is + the stereo VU of the selected output's live signal.

+
+ +
+
+
snd·01 — pulsemixer in console form
+
+ +
+
+ + 󰕾 + PLAYBACK + MUTED + SND·01 + + +
+
+ +
outputs
+
+ +
inputs
+
+ +
mic mode
+
+ + +
+
+ + +
+
+ OUT VOL +
+
+
+
+
+
68 %
+
SPEAKERS
+
+
+ IN VOL +
+
+
+
+
+
54 %
+
BUILT-IN MIC
+
+
+ + +
+
signal · VU peakSPEAKERS
+
L
+
R
+
+ +
+
+
+ +
+

The bar glyph

+
+ 󰕾 normal — speaker + arcs + 󰝟 muted — speaker ✕ + 󰢮 ptt armed +
+

Idiom map (same as net / bt)

+
    +
  • Faceplate switch = master quick-mute — the net wifi / bt power switch, here muting all output. Flip: state → MUTED, lamp red, bar glyph → speaker-✕.
    • +
  • Rows are devices — every sink + source. Click the row body to set default (gold DEF moves); the fader sets that device's volume; the trailing glyph mutes just it.
    • +
  • Per-row signal meter — the 4 bars at the left of each row read that device's live level. A sink can carry a stream without being default, so the one playing lights up — demo: the music is on WH-1000XM4 while Speakers is still default. Click WH-1000XM4 to move to it.
    • +
  • Two meter rows — row 1 = the volume you set (OUT + IN needles); row 2 = the stereo VU (L/R) of the selected output's live signal, red when muted.
    • +
  • Mic = two console keys — one toggles LIVE↔MUTED (the label flips to show the state), the other is PUSH·TALK: the mic sits muted and un-mutes only while Space is held.
    • +
  • Verify-everything — every action re-reads pactl/wpctl state after firing, like net/bt.
    • +
+

Push-to-talk — the one hard part

+
+ Hold-to-talk needs a global key grab under Wayland. Two routes to spec: (a) a Hyprland + bind pair — bindp Space press → unmute, release → re-mute, armed only while PTT + mode is active (so it doesn't steal Space everywhere); or (b) an evdev/libinput + listener reading the key directly. (a) is lighter; (b) survives focus changes but needs + input-group permissions. Feasibility research is phase 1 of the spec. +
+
+
+ + + + diff --git a/docs/prototypes/2026-07-03-waybar-redesign-prototype.html b/docs/prototypes/2026-07-03-waybar-redesign-prototype.html new file mode 100644 index 0000000..3f3e7c1 --- /dev/null +++ b/docs/prototypes/2026-07-03-waybar-redesign-prototype.html @@ -0,0 +1,321 @@ + + + + + +Waybar redesign — dupre instrument console + + + +
+ +
+
archsetup · dupre panel family · waybar
+

Waybar — three ways to spruce it

+

The bar already runs the dupre palette and a gold border. These three push it toward the + instrument-console faceplate language of the net + bluetooth panels — machined + gradient plates, engraved unit labels, glowing status lamps, physical console keys, analog + gauges — dialing the intensity up from left-touch to full console. Same real module set in + each so you're comparing treatment, not content. All three stay inside what GTK3 CSS + (waybar's engine) can actually render.

+
+ + +
+
+
+ + 123 + 󰕰 + instrument-console.el + +
+
+ + 󰤨 + 󰍬 + 󰕾 62% + 󰹇 + 󰃟 + 󰒲 + 󰂯 + 󰻠 8% + 󰔛 24:10 + 󰃭 Fri Jul 3 +
+
+
+
+
current— flat pills, colour-only states. the baseline these three build on.
+ + +
+
+
+ + 123 + + 󰕰 + instrument-console.el + +
+
+ + 󰤨 + + 󰍬 + 󰕾 62% + + 󰹇 + 󰃟 + 󰒲 + 󰂯 + + 󰻠 8% + 󰔛 24:10 + + 󰃭 Fri Jul 3 +
+
+
+
+
variation 1 · faceplate— machined gradient + top highlight, engraved hairline dividers, status lamps on net/bt, cream clock. Nearest to today; drop-in GTK CSS.
+ + +
+
+
+ + 123wksp + 󰕰instrument-console.ellayout · window + +
+
+ + 󰤨CAPTIVEnet + 󰍬󰕾62%sound + 󰹇󰃟󰒲toggles + 󰂯M650bt + 8%cpu + 󰔛24:10timer + Fri Jul 311:23clock +
+
+
+
+
variation 2 · instrument segments— each group a recessed sub-plate with an engraved unit label; a squat needle gauge for cpu. Reads like a row of instruments. Taller; label row costs a few px.
+ + +
+
+
+ + 123 + + 󰕰 + instrument-console.el + +
+
+ + 󰤨 CAPTIVE + + 󰍬 + 󰕾 62% + + 󰹇 + 󰃟 + 󰒲 + 󰂯 72% + + + + + + 󰔛 24:10 + + 󰃭 Fri Jul 3 11:23 EDT +
+
+
+
+
variation 3 · full console— every module a recessed well, physical console keys for toggles (gold when engaged, terracotta when off), twin cpu/mem gauges, cream tabular clock with engraved TZ. Furthest from today; closest to the panels.
+ + +
+
+

What carries over from the panels

+
    +
  • Lamps — the glowing status dot lands on net + bt so health reads at a glance, not just by glyph colour (gold = captive/engaged, green = ok, red = fail, dim = off).
    • +
  • Machined faceplate — the cluster gets the b-face vertical gradient + 1px top highlight + deeper shadow, so it looks milled rather than printed.
    • +
  • Engraved dividers — hairline separators group the right cluster into net · sound · toggles · system · clock, echoing the panels' engraved section rules.
    • +
  • Console keys — the toggles (touchpad, dim, caffeine) borrow .c-btn: gradient fill, inset highlight, gold border when engaged.
    • +
  • Gauges — sysmon becomes a squat needle (or twin needles for cpu/mem), the same instrument the panels use for throughput and battery.
    • +
  • Cream + tabular — the clock and live values shift to cream with tabular-nums, matching the panels' readouts.
    • +
+
+
+

GTK3 translation caveats

+
    +
  • Dividers need real separator modules or per-module borders — waybar can't inject ::before content between modules the way this HTML does.
    • +
  • Lamps render as a small pango glyph (● with colour + text-shadow glow) prepended in each script, or a tiny bordered box widget — both are GTK-safe.
    • +
  • Gauges are the real work: GTK CSS can't draw a rotating needle. Options — a Cairo/GTK drawing area in a custom module, or fake it with a unicode gauge glyph that steps by load band. V2's single gauge is cheaper than V3's twin.
    • +
  • V2's unit labels raise the bar height (the label row). Fine at 54px reserved, but worth eyeballing against the -54 margin strip.
    • +
  • Gradients, inset box-shadow, border colour states, tabular-nums — all already proven in the current stylesheet.
    • +
+
+
+

My read

+
+ Variation 1 (faceplate) is the one I'd ship first: it lands ~80% of the instrument-console feel — lamps, milled plates, engraved grouping, cream clock — for pure CSS plus a lamp glyph in the net/bt scripts. No custom drawing, no height risk. +

+ Variation 3 is the aspirational target once a gauge-drawing module exists (it'd also upgrade the sysmon popup). Variation 2 is the middle path if you want the unit labels' legibility but not the full recessed-well density. They're not exclusive — 1 can grow into 3. +
+
+
+ +
+ + diff --git a/docs/prototypes/README.org b/docs/prototypes/README.org new file mode 100644 index 0000000..9df85cb --- /dev/null +++ b/docs/prototypes/README.org @@ -0,0 +1,21 @@ +#+TITLE: Panel & Waybar Design Prototypes +#+AUTHOR: Craig Jennings + +Self-contained HTML/CSS design prototypes for the instrument-console panel +family and the waybar redesign. Each opens standalone in a browser (no external +assets). These are the normative visual references the specs in [[file:../specs/][docs/specs/]] +point at. + +* Prototypes + +- [[file:2026-07-03-instrument-console-panels-prototype.html][2026-07-03-instrument-console-panels-prototype.html]] — the net + bluetooth + pair; the approved faceplate design that shipped. Normative reference for + [[file:../specs/2026-07-03-instrument-console-panels-spec.org][the instrument-console spec]]. +- [[file:2026-07-03-net-panel-rescan-prototype.html][2026-07-03-net-panel-rescan-prototype.html]] — the manual rescan/scan ⟳ + affordance for the NETWORKS/NEARBY headers (busy-style throbber + list fade). +- [[file:2026-07-03-sound-panel-prototype.html][2026-07-03-sound-panel-prototype.html]] — the audio/pulsemixer console; layout + reference for [[file:../specs/2026-07-03-audio-panel-spec.org][the audio-panel spec]]. +- [[file:2026-07-03-panel-widget-gallery-prototype.html][2026-07-03-panel-widget-gallery-prototype.html]] — the shared instrument-console + widget kit (lamps, engraved sections, console keys, needle gauges). +- [[file:2026-07-03-waybar-redesign-prototype.html][2026-07-03-waybar-redesign-prototype.html]] — three directions for sprucing up + waybar in the dupre instrument-console aesthetic (future work). diff --git a/docs/specs/2026-07-03-audio-panel-spec.org b/docs/specs/2026-07-03-audio-panel-spec.org index 82041ed..5b678a8 100644 --- a/docs/specs/2026-07-03-audio-panel-spec.org +++ b/docs/specs/2026-07-03-audio-panel-spec.org @@ -24,7 +24,7 @@ - [2026-07-03 Fri] DRAFT — stub from the todo.org task "Audio panel spec" (roam ask 2026-07-02) plus the 2026-07-03 waybar/sound design discussion. Written to iterate alongside the prototype - (=working/sound-panel/sound-panel-prototype.html=). Spine is present; the + (=docs/prototypes/2026-07-03-sound-panel-prototype.html=). Spine is present; the Decisions and Design detail get filled in as we go. * Metadata @@ -70,7 +70,7 @@ this shape; audio is the third instrument in the family. * Design sketch -Prototype: =working/sound-panel/sound-panel-prototype.html= (the reference for +Prototype: =docs/prototypes/2026-07-03-sound-panel-prototype.html= (the reference for layout + idioms below). ** Surface (from the prototype) diff --git a/docs/specs/2026-07-03-instrument-console-panels-spec.org b/docs/specs/2026-07-03-instrument-console-panels-spec.org index c0a0c56..2c80aa9 100644 --- a/docs/specs/2026-07-03-instrument-console-panels-spec.org +++ b/docs/specs/2026-07-03-instrument-console-panels-spec.org @@ -13,6 +13,16 @@ :PROPERTIES: :ID: e73877f5-4f5b-4f81-b946-dbaa6145e0d5 :END: +- 2026-07-03 Fri @ 17:35 -0400 :: Post-impl increment (stays IMPLEMENTED): added + a manual rescan/scan ⟳ affordance to both panels — net NETWORKS header + (drives manage.rescan) and bt NEARBY header (drives on_scan / pair-mode + discovery), with the approved "all" busy style (Gtk.Spinner throbber + a + GLib breathe on "scanning…" + a one-shot list fade; no CSS keyframes exist in + this GTK setup). Prototype: archsetup docs/prototypes/2026-07-03-net-panel-rescan-prototype.html. Code shipped + UNCOMMITTED into the dotfiles repo from an archsetup session (cross-project); + handoff at ~/.dotfiles/inbox/2026-07-03-1733-from-archsetup-rescan-handoff.org. + Verified: net 584 + bt 223 unit OK, both AT-SPI smokes green (⟳ present); + live busy-animation feel pending Craig's eyeball. - 2026-07-03 Fri @ 06:49 -0400 :: DOING → IMPLEMENTED: all six phases shipped (net GTK-free layer 81ec9c3, net view 800ef60; bt GTK-free layer 5318b34, bt view 66f03d9; phase-6 dead-code removal f4e688e). Both panels are single-screen @@ -36,7 +46,7 @@ |---------------------+------------------------------------------------------------| | Repos | dotfiles (net/, bluetooth/, themes), archsetup | |---------------------+------------------------------------------------------------| -| Normative reference | [[file:../../assets/2026-07-03-instrument-console-panels-prototype.html][assets/2026-07-03-instrument-console-panels-prototype.html]] | +| Normative reference | [[file:../prototypes/2026-07-03-instrument-console-panels-prototype.html][docs/prototypes/2026-07-03-instrument-console-panels-prototype.html]] | |---------------------+------------------------------------------------------------| * Summary -- cgit v1.2.3