Block B1 — GOLD UI Component Library LIVE

FreshVibe v9 · 12 chrome components · Visual testbed for operator eyeball and GOLD approval
B0 baseline · B1 components · Live demo

Live Demo — full Panel Manager + 4-edge dock + dev button

Real code from freshvibe-cms. Click the buttons below to add panels. Drag a panel to any edge. Tap { } for the dev panel.
Click the buttons to add panels. The { } dev button mounts at bottom-right.
1. Panel header GOLD01 / 12
Title chip + label + window actions. Split on " · " — first segment is the tag (colored chip), rest is the label.
W-5Heading
Panel body content goes here. The header is sticky at the top.
2. Window chrome GOLD02 / 12
Border + box-shadow + rounded corners. 4-corner resize handles (see #3). Draggable from header.
S-6Section
Chrome = the visual frame around the panel content. Includes header, border, shadow, and rounded corners.
3. Resize handles GOLD03 / 12
4-corner handles. Desktop 14px, mobile 24px (REFLEX-130). Blue dots for visibility.
drag corners to resize
4. Pill dock GOLD04 / 12
4 edges (left/right/top/bottom). Pills park off-screen, slide into view on hover. One active per edge (yellow).
CMS
FES
TRC
AI
5. Bottom dock GOLD05 / 12
Horizontal dock at the bottom edge. Multiple pills inline, with context-specific controls (see #12).
Source
Display
Extras
Save
6. Yellow highlight GOLD06 / 12
The .focused class. Active pill, active state, "this is the one you're working on right now."
FOCUSED · in play · active
inactive
focused (yellow)
inactive
7. Tag shapes GOLD07 / 12
3 shapes: pill (default, 999px), rounded (6px), square (0). Same data, different visual.
Pill (default)
W-1S-2D-3A-4
Rounded (6px)
W-1S-2D-3A-4
Square (0)
W-1S-2D-3A-4
8. Tag colors GOLD08 / 12
6 colors map to subsystems. Instant visual hierarchy.
W Green · App-level (widgets, modules, components)
S Blue · System-level (panel-manager, dock, runtime)
D Orange · Doctrine-level (FvW v8 sections, invariants)
A Purple · AI / VibeCoder
C Yellow · CMS / Dev / Inspector (active state)
R Pink · Runtime / Chrome (chrome itself)
9. Tag logic GOLD09 / 12
Tag is parsed from title. Splits on " · " — first segment is the tag, rest is the label.
panelManager.addPanel({ title: "S-6 · Section" })
S-6Section
panelManager.addPanel({ title: "W-5 · Heading" })
W-5Heading
panelManager.addPanel({ title: "Plain title no separator" })
Plain title no separator
10. Window behaviour GOLD10 / 12
State machine: floating → dock (edge) → pill (collapsed) → active (expanded). 4 corners to grab.
create
→
floating
→
drag to edge
→
docked
→
collapsed
collapsed
→
click pill
→
active (yellow)
→
focus
Try the live demo above. Drag a panel to the right edge → it becomes a pill. Click the pill → it expands.
11. Swipe left/right GOLD11 / 12
Touch swipe to expand/collapse panels. Mobile-friendly. Per operator 2026-07-27 02:24.
‖
→
swipe right → expand
swipe left ← collapse
←
‖
The mobile dock pill becomes the swipe handle. Swipe in either direction to control the docked panel.
12. Context-aware bottom bar GOLD12 / 12
The bottom dock changes based on the active panel context. Different controls for CMS vs Inspector vs AI.
Context: CMS panel active
SourceDisplayExtrasSaveRevert
Context: Inspector active
ElementLayoutStylesLockPin
Context: AI Bundle active
AskHistoryWorkspacesSettingsClear