feat: hive card with SVG, outline, edit sheets and catalog settings (Beute L2)
- lib/hive: frontend port of the hive domain (ops, validator, facts, layout, follow-ups, describe texts, reason texts) running the backend fixtures, API client - hive card on the colony page (same height as Stammdaten): SVG view, accessible outline tree, frame/part sheets with optimistic save, conflict sheet, history with past states, init from template or another colony, inspection draft mode - follow-up toasts prefilling feeding and treatment forms (treatment end only with an open treatment) - settings page "Beutensysteme" (hive-systems:manage) - NumberStepper decimal steps, reactive motion level hook, holo tokens - spec: owner design decision 2026-10-16 (glass hologram, focus mode) The SVG view is the fallback; the 3D scene follows in L3. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
1 parent
0091b3d28b
commit
c608f5d405
87 files changed
+9493
-43
No files matched your search
@@ -376,10 +376,14 @@ Der Zustand der Ansicht (berührtes Teil, offene Zarge, berührtes Rähmchen) li
|
||||
|
||||
### 9.3 Stil
|
||||
|
||||
- **Hintergrund der Karte:** immer ein dunkler „Bildschirm“ (eigene Tokens `--holo-bg`, `--holo-edge`, `--holo-edge-strong`, `--holo-fill`, `--holo-label-bg`, `--holo-label-fg` in `:root` und `.dark`; die Sonne-Sätze kommen ab T5). Ein feines Raster am Boden gibt Halt.
|
||||
- **Teile:** Fläche mit `MeshBasicMaterial`, Deckkraft 0,06–0,12, additiv. Kanten mit drei `<Edges>` in `--holo-edge`. Bloom aus `@react-three/postprocessing` mit hoher Helligkeitsschwelle, sodass nur Kanten, Pegel und gewählte Teile leuchten.
|
||||
- **Rähmchen:** im Ruhezustand nur Oberträger und Umriss als Linien (Deckkraft 0,25). Im Fokus-Modus als Platten mit Kante und einer Tönung je Art. Die Art steht immer auch als Wort im Etikett und in der Liste (T5: Zustand nie nur über Farbe).
|
||||
- **Pegel:** durchsichtiges, leuchtendes Volumen mit einer leicht wogenden Oberfläche (Vertex-Verschiebung mit `sin`, nur bei Bewegung `full`). Etikett „5 l / 3 l“.
|
||||
Inhaber-Entscheidung 2026-10-16 nach Bild-Entwürfen (`.superpowers/mockups/`, Richtung D/E/F, Kalibrierung G/H/I): Die Karte ist eine **randlose, tiefe Holo-Bühne** im warmen App-Rahmen. Qualitätsanspruch: wirkt wie ein Produkt-Render aus einer Keynote, nicht wie eine Linienzeichnung.
|
||||
|
||||
- **Bühne:** füllt die ganze Karte (Titel „Beute“, Stand-Zeile und Knöpfe liegen als Milchglas-Elemente über der Bühne). Tiefes Mitternachtsblau mit Vignette, ein dezentes Waben-Raster als spiegelnder Boden, wenige langsam treibende Lichtpartikel, weiche Lichtquelle von unten.
|
||||
- **Ruhe-Ansicht: alles reines Glas.** Jedes Teil (Dach, Deckel, Dämmung, Folie, Futterzarge, Zargen, Boden, Einlagen) ist klares Glas mit scharfen, blau leuchtenden Kanten (Bloom), leichter Lichtbrechung und Spiegelung. Kein Holz, keine Bienen, keine Farben. Rähmchen sind nur als feine Glas-Umrisse angedeutet, Füllstände nicht sichtbar.
|
||||
- **Fokus-Ansicht:** Das gewählte Teil zeigt seinen **Inhalt**: Futterzarge mit leuchtendem, leicht wogendem goldenem Flüssigfutter und einem Futterteig-Block mit Etiketten „Flüssigfutter 2,5 l von 3 l“, „Futterteig 1 kg“; Verdunster mit Säurepegel; Boden mit Bausperre bzw. Varroa-Schublade; Deckel und Dach mit ihren Zuständen. Zargen zeigen ihre Rähmchen als klare Glasplatten.
|
||||
- **Rähmchen-Look:** Ein Rähmchen bekommt seine Art als Farbe **und** Muster erst, wenn es angehoben (Hover/Tippen) oder ausgewählt ist: Brutwabe bernstein mit verdeckelter Brut-Wabenstruktur, Drohnenwabe dunkleres Bernstein mit gewölbten Zellen, Honigwabe gold glänzend, Pollenwabe orange-gefleckt, Futterwabe hellgold, Mittelwand helles Wachs-Raster, Leerwabe leere Zellen, Baurahmen offener Rahmen, Schied massive Glasplatte. Die Art steht zusätzlich als Wort im Etikett (T5: Zustand nie nur über Farbe).
|
||||
- **Pegel:** leuchtendes, halbtransparentes Volumen mit sanft wogender Oberfläche (nur bei Bewegung `full`).
|
||||
- Eigene Tokens `--holo-*` in `:root` und `.dark`; Sonne-Sätze ab T5.
|
||||
- **Etiketten:** drei `<Html>` mit DOM-Text in `--holo-label-*` (scharf, übersetzbar, gut lesbar). Höchstens drei Etiketten gleichzeitig.
|
||||
- **Sonne-Modus (ab T5, solange es ihn nicht gibt, entfällt dieser Punkt):** kein Bloom, Kanten 2 px in reinem Weiß auf Schwarz, Tönungen der Rähmchen durch Muster ersetzt (Schraffur-Textur je Art), Etiketten 16 px.
|
||||
- **`forced-colors`:** Die Karte zeigt den SVG-Rückfall mit `CanvasText`-Strichen.
|
||||
@@ -389,10 +393,10 @@ Der Zustand der Ansicht (berührtes Teil, offene Zarge, berührtes Rähmchen) li
|
||||
| Aktion | Maus | Touch | Ergebnis |
|
||||
|---|---|---|---|
|
||||
| Teil berühren | Hover | erstes Tippen | Kanten leuchten stärker, Teil hebt sich 8 mm, Etikett mit Namen. Andere Teile bleiben. |
|
||||
| Zarge öffnen | Klick | zweites Tippen | Fokus-Modus: Zarge fliegt nach vorn und wächst auf das 1,4-Fache, andere Teile weichen 300 mm zurück und verblassen auf 0,15. Rähmchen werden zu Platten. Knopf „Zurück“ erscheint. |
|
||||
| Rähmchen berühren (im Fokus) | Hover | erstes Tippen | Rähmchen steigt um 40 % seiner Höhe aus der Zarge, Etikett „R4 · Brutwabe · Name“. |
|
||||
| Teil öffnen (jedes Teil: Zarge, Futterzarge, Boden, Deckel, Dach, Einlage, Verdunster) | Klick | zweites Tippen | Fokus-Modus: Das Teil fliegt aus dem Stapel nach vorn in die Mitte und wird groß (Kamera passt auf das Teil ein). Alle anderen Teile bleiben an ihrem Platz als fast durchsichtiger Schatten der ganzen Beute (Deckkraft ≈ 0,08), damit man sieht, woher das Teil kommt. Das Teil zeigt seinen Inhalt (9.3). Knopf „Zurück“ und der Name des Teils erscheinen. |
|
||||
| Rähmchen berühren (im Fokus einer Zarge) | Hover | erstes Tippen | Rähmchen steigt um 40 % seiner Höhe aus der Zarge und bekommt seinen Rähmchen-Look (Farbe + Muster, 9.3), Etikett „R4 · Brutwabe · Name“. Beim Verlassen sinkt es zurück und wird wieder klares Glas, außer es ist ausgewählt. |
|
||||
| Rähmchen ändern | Klick | zweites Tippen | Sheet „Rähmchen 4“ (`components/ui/sheet.tsx`): Art als `ChoiceGroup` (`components/form/choice-group.tsx`), Name, „Speichern“. Speichert eine Änderung (Quelle `CARD`). |
|
||||
| Teil mit Zustand ändern | Klick auf Futterzarge, Boden, Holzdeckel, Zwischenboden, Verdunster | zweites Tippen | Sheet mit Zustandsfeldern (`NumberStepper` für Pegel, `ChoiceGroup` für `choice`), beim Boden zusätzlich „Bausperre einlegen/entfernen“, bei einer Zarge „Verdunster einsetzen/entfernen“. |
|
||||
| Teil mit Zustand ändern | im Fokus: Klick auf den Inhalt (Pegel, Bausperre …) oder Glas-Knopf „Ändern“ | Tippen | Sheet mit Zustandsfeldern (`NumberStepper` für Pegel, `ChoiceGroup` für `choice`), beim Boden zusätzlich „Bausperre einlegen/entfernen“, bei einer Zarge „Verdunster einsetzen/entfernen“. |
|
||||
| Drehen | Ziehen | Wischen mit einem Finger | Drehung um die Hochachse, ±60°, federt zurück auf die Grundansicht, wenn 4 s nichts passiert. Kein Zoom in der Karte. Senkrechtes Wischen scrollt die Seite. |
|
||||
| Fokus verlassen | Klick ins Leere, Esc | Tippen ins Leere, „Zurück“ | Alles fliegt in den Stapel zurück. |
|
||||
| Umbauen | Knopf „Umbauen“ | dito | Vollbild (9.5). |
|
||||
|
||||
Reference in new issue
Block a user