frontend: Fokusmarke bekommt einen eigenen Strahlenkranz in Petrol

Der mit der Cursor-Zeile geteilte Ring war zu leise — „das erkennt man zu wenig"
(Nutzer). Damit fällt auch die in D32 als Preis notierte Zweideutigkeit weg: Sie
war das Zugeständnis für die Sparsamkeit, und wenn die Sparsamkeit nicht
funktioniert, ist das Zugeständnis nicht mehr zu rechtfertigen.

Gebaut wie der gelbe Kranz aus D28 (Schein nach außen, Füllung bleibt dem
Status, kein Blinken, `z-index:2` gegen das Abschneiden durch später gemalte
Geschwister) — aber in PETROL, nicht in Gelb. Die Frage stand ausdrücklich im
Raum; die Antwort ist nein, weil die beiden Verschiedenes bedeuten und
gleichzeitig auftreten: Gelb ist eine stehende Tatsache über den Plan („seit
deinem letzten Besuch live gegangen"), Petrol ein Zuruf („schau jetzt hierhin").
Im Pad-Betrieb ist die Kombination der Normalfall — man zeigt auf das, was sich
geändert hat. Wären beide gelb, könnte ein Knoten nicht beides sagen.

Der Schein ist helles Teal (#14B8A6), der Ring dunkles Petrol. Die erste Fassung
nahm für beides `--or` und wirkte trotz identischer Geometrie leiser als das
Gelb. Der Grund ist nicht Geschmack: Ein dunkler Schein auf weißem Grund liest
sich als Schatten, ein heller als Licht.

Gegen die Stationspunkte des günstigsten Pfads (D18) geprüft statt angenommen —
zwei Marken gezielt auf Pfad-Endknoten (mit Punkt), eine daneben (ohne): Der
Kranz sitzt eng am Knoten und hat einen harten Ring, der Stationspunkt ist ein
großer blasser Fleck ohne Rand. Verwechseln kann man das nicht.

Kombinationen ausbuchstabiert, weil sie real vorkommen: `focusmark.current`
(Tinte innen, Teal außen) und `fresh.focusmark` (Petrol-Ring innen, Gelb außen —
zwei Scheine nach außen gehen nicht). Letztere steht nach der ersten: gleiche
Spezifität, und bei allen drei sollen Zuruf und Neuheit gewinnen.

SPEC §9 und D32 nachgezogen.
This commit is contained in:
mhoennig
2026-07-30 13:51:36 +02:00
parent 1a82771239
commit 953277ab83
4 changed files with 88 additions and 12 deletions
+45
View File
@@ -1284,3 +1284,48 @@ Rahmen neu laden, verlöre man bei jedem Diagramm-Update die Schreibmarke im Pad
**Haltung daraus:** Der Rahmen ist zum **Mitlesen** gut; für längeres Schreiben **Haltung daraus:** Der Rahmen ist zum **Mitlesen** gut; für längeres Schreiben
ist der eigene Tab die verlässliche Fläche, solange das Cookie nicht ist der eigene Tab die verlässliche Fläche, solange das Cookie nicht
serverseitig auf `SameSite=None` steht. serverseitig auf `SameSite=None` steht.
**Nachtrag zu D32 — eigener Strahlenkranz in Petrol statt geteilter Ring.**
Der geteilte Ring mit der Cursor-Zeile war zu leise: „Das erkennt man zu wenig"
(Nutzer). Damit fällt die oben als Preis notierte Zweideutigkeit weg — sie war
das Zugeständnis für die Sparsamkeit, und wenn die Sparsamkeit nicht funktioniert,
ist das Zugeständnis auch nicht mehr zu rechtfertigen.
Gebaut wie der gelbe Kranz aus D28 (Schein nach außen, Füllung bleibt dem Status,
kein Blinken, `z-index:2` gegen das Abschneiden durch später gemalte
Geschwister) — aber **in Petrol, nicht in Gelb**. Die Frage stand ausdrücklich im
Raum („oder würdest du dafür auch das gelbe Leuchten nehmen?"), und die Antwort
ist nein:
- Die beiden bedeuten Verschiedenes und treten **gleichzeitig** auf. Gelb ist eine
stehende Tatsache über den Plan („seit deinem letzten Besuch live gegangen"),
Petrol ein Zuruf („schau jetzt hierhin"). Im Pad-Betrieb ist die Kombination der
Normalfall — man zeigt auf das, was sich geändert hat. Wären beide gelb, könnte
ein Knoten nicht beides sagen, und bei einem gelben Knoten wüsste niemand mehr,
welche der beiden Aussagen gemeint ist. Das wäre genau die Verwechslung, die
dieser Nachtrag behebt, nur mit der anderen Farbe.
- Die Farblogik ist schon vergeben: Petrol ist im Diagramm die Farbe für
Interaktion und Aufmerksamkeit (Fokusring, Alt-Ring, „scharf"-Ring, günstigster
Pfad — D18), Gelb die für Status-Neuigkeit. D15 gab Petrol nur für die
**Gate-Codierung** auf, nicht als Signalfarbe.
**Der Schein ist helles Teal (`#14B8A6`), der Ring dunkles Petrol (`--or`).**
Die erste Fassung nahm für beides `--or` und wirkte trotz identischer Geometrie
leiser als der gelbe Kranz. Der Grund ist nicht Geschmack: Ein **dunkler** Schein
auf weißem Grund liest sich als Schatten, ein **heller** als Licht. Reichweite
kommt daher vom hellen Teal, die Zuordnung zur Akzentfarbe vom dunklen Ring
(3 px, damit er gegen den helleren Schein besteht).
**Gegen die Stationspunkte geprüft, nicht angenommen.** Der günstigste Pfad legt
blasse Petrol-Punkte hinter die Endknoten (D18) — ein petrolfarbener Kranz hätte
damit verschwimmen können. Deshalb wurden zwei Marken gezielt auf Pfad-Endknoten
gesetzt (mit Punkt) und eine daneben (ohne): Der Kranz sitzt eng am Knoten und
hat einen harten Ring, der Stationspunkt ist ein großer blasser Fleck ohne Rand.
Sie sind auseinanderzuhalten.
Kombinationen sind ausbuchstabiert, weil sie real vorkommen: `focusmark.current`
(Tinte innen, Teal außen) und `fresh.focusmark` (Petrol-Ring innen, Gelb außen —
zwei Scheine nach außen gehen nicht, einer muss der Ring sein). Die Regel für
`fresh.focusmark` steht **nach** der für `focusmark.current`: gleiche Spezifität,
und wenn alles drei zutrifft, sollen Zuruf und Neuheit gewinnen, nicht die eigene
Cursor-Zeile.
+12 -8
View File
@@ -397,17 +397,21 @@ verknüpft (siehe D25):
Druck. Druck.
### Fokusmarke im Diagramm (`!!!`, §1) ### Fokusmarke im Diagramm (`!!!`, §1)
Ein mit `!!!` markierter Knoten trägt **dieselbe Hervorhebung wie die Ein mit `!!!` markierter Knoten trägt einen **Strahlenkranz in Petrol**
Cursor-Zeile** (weißer Halo + Ring in Tinte) und wird ins Bild geholt — bewusst kräftiger Ring in `--or` (`#0F766E`) plus leuchtender Schein in hellem Teal
kein eigenes Aussehen: Es gibt nur einen Begriff „hier schauen", und ein (`#14B8A6`) — und wird ins Bild geholt. Gebaut wie der gelbe Kranz für „neu in
dritter Ring neben Fokusrahmen, Strahlenkranz (§9) und Cursor-Ring wäre ein Produktion" (§9): Schein nach **außen**, damit die Knotenfüllung dem Status (§4)
Zeichen zu viel. gehört und lesbar bleibt. Kein Blinken.
- **Die Farbe trägt die Bedeutung:** Gelb heißt „seit deinem letzten Besuch live
gegangen" (eine stehende Tatsache), Petrol heißt „jemand zeigt gerade hierauf"
(ein Zuruf). Beides kann zugleich zutreffen und muss darum unterscheidbar
bleiben; trifft es zusammen, wird der Ring petrol und der Schein gelb.
- Trifft die Marke mit der **Cursor-Zeile** zusammen, liegt der Tinte-Ring innen
und der Schein außen — die eigene Cursor-Position und der fremde Zuruf bleiben
so auseinanderzuhalten.
- Ins Bild geholt wird nur, wenn sich die Marke **ändert** — sonst zöge das - Ins Bild geholt wird nur, wenn sich die Marke **ändert** — sonst zöge das
Diagramm bei jedem Neubau den Blick zurück und man könnte nicht wegscrollen. Diagramm bei jedem Neubau den Blick zurück und man könnte nicht wegscrollen.
- Weil `!!!` im Text steht, sehen **alle** dieselbe Stelle. Der Unterschied zur
eigenen Cursor-Zeile ist im Bild nicht zu erkennen; für Screenreader benennt
das `aria-label` die Marke ausdrücklich.
- Wie die Cursor-Zeile erscheint sie **nicht** im Druck und **nicht** im - Wie die Cursor-Zeile erscheint sie **nicht** im Druck und **nicht** im
Grafikexport: Sie sagt „schau jetzt hierhin", nicht „so ist der Plan". Grafikexport: Sie sagt „schau jetzt hierhin", nicht „so ist der Plan".
+7 -2
View File
@@ -177,8 +177,13 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
Schreibmarke im Pad. **Umhängen im DOM lädt jeden `<iframe>` neu** — wer Schreibmarke im Pad. **Umhängen im DOM lädt jeden `<iframe>` neu** — wer
Container um `#srcArea` herum neu aufbaut, wirft die Pad-Sitzung weg. Container um `#srcArea` herum neu aufbaut, wirft die Pad-Sitzung weg.
- Fokusmarke `!!!` (D32, SPEC §1): Parser setzt `focus`, Renderer die Klasse - Fokusmarke `!!!` (D32, SPEC §1): Parser setzt `focus`, Renderer die Klasse
`focusmark`, CSS teilt die Regel mit `.node.current` (ein Begriff „hier `focusmark`, CSS gibt ihr einen **eigenen Strahlenkranz in Petrol** (Nachtrag zu
schauen"). Erkannt **nur alleinstehend**`(^|\s)!!!(?=\s|$)`, bewusst ohne D32; der geteilte Ring mit `.current` war zu leise). Schein in **hellem** Teal
`#14B8A6`, Ring in dunklem `--or`: ein dunkler Schein auf Weiß liest sich als
Schatten, ein heller als Licht. Wie bei `.fresh` braucht die Regel `z-index:2`,
sonst schneidet ein später gemaltes Geschwister den Kranz ab (D28). Die
Kombinationen `focusmark.current` und `fresh.focusmark` sind ausbuchstabiert;
letztere steht bewusst **danach** (gleiche Spezifität). Erkannt **nur alleinstehend**`(^|\s)!!!(?=\s|$)`, bewusst ohne
Lookbehind (Safari erst ab 16.4), sonst verlöre `Achtung!!!` seine Lookbehind (Safari erst ab 16.4), sonst verlöre `Achtung!!!` seine
Ausrufezeichen. Extraktion **nach** den Tags; der Kommentar fällt vorher weg, Ausrufezeichen. Extraktion **nach** den Tags; der Kommentar fällt vorher weg,
eine Marke hinter `%%` wirkt also nicht. `revealFocusMark()` scrollt **nur bei eine Marke hinter `%%` wirkt also nicht. `revealFocusMark()` scrollt **nur bei
+24 -2
View File
@@ -536,8 +536,24 @@
nur einen Begriff hier schauen", und ein dritter Ring neben Fokusring, nur einen Begriff hier schauen", und ein dritter Ring neben Fokusring,
Strahlenkranz und Cursor-Ring wäre ein Zeichen zu viel. Der Unterschied Strahlenkranz und Cursor-Ring wäre ein Zeichen zu viel. Der Unterschied
steht im `aria-label`. */ steht im `aria-label`. */
#out .node.current, #out .node.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
#out .node.focusmark{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)} /* Fokusmarke `!!!` (SPEC §1, D32): **Strahlenkranz in Petrol**, nach dem Muster
der Neuheiten-Markierung (D28), nur in der Akzentfarbe der App statt in Gelb.
Der geteilte Ring mit der Cursor-Zeile war zu leise das erkennt man zu
wenig" (Nutzer) , und ein Ring allein wächst beim Zoomen nicht mit dem
Blickbedürfnis. Der Kranz löst zugleich die in D32 hingenommene Schwäche:
Cursor-Zeile (Tinte, innen) und fremde Marke (Petrol, außen) sind jetzt
unterscheidbar. Kein Blinken (WCAG 2.2.2/2.3.1, vgl. D28), und `z-index`,
weil der Schein AUSSERHALB der Knotenbox liegt ohne ihn malt jedes später
kommende Geschwister seinen Hintergrund darüber und schneidet ihn ab. */
/* Der Schein ist **helles** Teal (#14B8A6), nicht das dunkle Petrol des Rings:
Ein dunkler Schein auf weißem Grund liest sich als Schatten, ein heller als
Licht deshalb wirkte die erste Fassung leiser als der gelbe Kranz aus D28,
obwohl die Geometrie dieselbe war. Der Ring bleibt dunkles Petrol und ordnet
die Marke der Akzentfarbe zu; das Leuchten macht die Reichweite. */
#out .node.focusmark{box-shadow:0 0 0 3px var(--or),0 0 20px 7px rgba(20,184,166,.85);z-index:2}
/* Beides zugleich: Cursor-Zeile innen (Tinte), fremde Marke außen (Petrol). */
#out .node.focusmark.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink),0 0 20px 7px rgba(20,184,166,.85)}
/* Neu in Produktion seit dem letzten Besuch (D28): gelber Strahlenkranz um den /* Neu in Produktion seit dem letzten Besuch (D28): gelber Strahlenkranz um den
Knoten. Bewusst ein Schein nach AUSSEN statt Farbe im Knoten die Füllung Knoten. Bewusst ein Schein nach AUSSEN statt Farbe im Knoten die Füllung
gehört dem Status (SPEC §4) und bleibt lesbar. Kein Blinken: WCAG 2.2.2/2.3.1 gehört dem Status (SPEC §4) und bleibt lesbar. Kein Blinken: WCAG 2.2.2/2.3.1
@@ -549,6 +565,12 @@
#out .node.fresh{box-shadow:0 0 0 2px #FACC15,0 0 16px 5px rgba(234,179,8,.65);z-index:2} #out .node.fresh{box-shadow:0 0 0 2px #FACC15,0 0 16px 5px rgba(234,179,8,.65);z-index:2}
/* Beides zugleich: Cursor-Zeile innen (Tinte), Neuheit außen (gelb). */ /* Beides zugleich: Cursor-Zeile innen (Tinte), Neuheit außen (gelb). */
#out .node.fresh.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink),0 0 18px 6px rgba(234,179,8,.65)} #out .node.fresh.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink),0 0 18px 6px rgba(234,179,8,.65)}
/* Neu in Produktion UND jemand zeigt darauf: Ring in Petrol (der bewusste
Zuruf, innen), Kranz in Gelb (die stehende Nachricht, außen). Zwei Scheine
nach außen gingen nicht einer muss der Ring sein. Steht bewusst **nach**
`.node.focusmark.current`: gleiche Spezifität (drei Klassen), und wenn alles
drei zutrifft, soll Zuruf + Neuheit gewinnen, nicht die eigene Cursor-Zeile. */
#out .node.fresh.focusmark{box-shadow:0 0 0 3px var(--or),0 0 20px 7px rgba(234,179,8,.65);z-index:2}
/* Alt gedrückt = Sprung-Geste scharf: Cursor an allen Knoten, Petrol-Ring am /* Alt gedrückt = Sprung-Geste scharf: Cursor an allen Knoten, Petrol-Ring am
Knoten unter dem Zeiger. Auf verlinkten Knoten ist das die einzige Knoten unter dem Zeiger. Auf verlinkten Knoten ist das die einzige
Rückmeldung, weil dort der einfache Klick dem Link gehört (D25). */ Rückmeldung, weil dort der einfache Klick dem Link gehört (D25). */