feat(panels): build the rail panels on one UiPanel

The Data, Authoring, Weather, Recent Imagery, Context, CCTV, Street Level
and Radio panels each wrote the same frame by hand. They are now one kit
component, UiPanel, with a title, badge/actions/default slots and
v-model:collapsed, drawing Core's panel markup and classes beside the kit's;
props cover the differences (sideways, glow, scroll, railScroller, tag,
toggleWords). RailPanel binds it to the panel chrome store: v-panel-state
writes its state classes at once, and its button's clicks reach PanelChrome.
UiPanelToggle is the collapse button UiPanel and PanelCollapseButton share.

UiPanel's collapsed drives the button and ui-panel--collapsed
only; the owner hides the body by writing the root's collapsed class, since
the rails measure a panel in the task that opens it. PanelCollapseButton
takes startCollapsed instead of initial and initialTitle, so a button shows
its state's glyph and words before startup presents the panel. Titles render
through t() instead of data-i18n, and the unused "Expand panel" string is
pruned. v-panel-state redraws the presented state after a re-render, in
case a root's class binding ever changes.

docs/VUE-MIGRATION.md

@@ -36,14 +36,20 @@ one-panel rule too. Share links continue to record which panels are open.
 
 ## Component kit
 
-`src/ui/kit/` holds the generic components: `UiRail`, `UiTooltip`, `UiIcon`
-and `UiButton` so far, with more (`UiPanel`, `UiSegmented`, `UiSelect` and
-so on) joining as the controls they serve are converted. Names, props,
+`src/ui/kit/` holds the generic components: `UiRail`, `UiTooltip`, `UiIcon`,
+`UiButton` and `UiPanel` so far, with more (`UiSegmented`, `UiSelect` and
+so on) joining as the controls they serve are converted. One component
+serves every use of a control, with props for the differences (`UiPanel`'s
+`sideways`, `glow`, `scroll`), rather than a copy per panel. Names, props,
 events and class names follow Halfpixel's `ui-vue` kit so the two can merge
 later, but the components are written for this repository and styled by its
 existing stylesheet and custom properties; a kit class such as
 `ui-button--icon` carries no Core style yet, and a converted control keeps
 its own classes beside it. They contain no application state.
+`UiPanel` takes ui-vue's `title`, slots and `v-model:collapsed`, but its
+`collapsed` drives only the button and `ui-panel--collapsed`: the panel's
+owner hides the body by writing the root's `collapsed` class at once, and
+there is no `closable`, since Core's panels collapse rather than close.
 
 Controls share one skin, so every panel reads the same. Every scrolling
 surface carries the kit's `.ui-scroll` (ui-vue's name), which draws the thin
@@ -64,8 +70,10 @@ a feature supplying only its accent.
    when a view needs one, mirroring state an owner already publishes, so
    there is never a second owner of the same state.
 2. **Rail.** `PanelChrome` enforces one panel per side; the panel store
-   mirrors each side's panels and the rail renders from it. Each panel's
-   collapse button (`PanelCollapseButton`), the dock tray toggles and the
+   mirrors each side's panels and the rail renders from it. The rail panels
+   are `RailPanel`s: the kit's `UiPanel` drawing Core's panel markup, bound to the `gev-panel-chrome`
+   store, with their titles rendered by `t()` rather than `data-i18n`. Each panel's
+   collapse button, the dock tray toggles and the
    dock pins render the open and pinned state PanelChrome presents to the
    `gev-panel-chrome` store, and their clicks call it there. Each panel's
    root draws its own state from there too (`v-panel-state`: `collapsed`,
@@ -75,7 +83,8 @@ a feature supplying only its accent.
    watcher, not on Vue's next render, because the rails measure a panel in
    the same task that opens or closes it. Done.
 3. **Panels.** Each template and its wiring become a component, keeping ids,
-   classes, `data-i18n` text and CSS. The page places each view with a
+   classes and CSS; text a template renders with `t()` drops its `data-i18n`
+   marker. The page places each view with a
    `.gev-view` host (`display: contents`), and `mountApplicationViews()`
    (`src/ui/views/index.js`) renders the view into it before the page is
    translated and wired. `createApplication()` calls it too, removing the

docs/panel-surfaces.md

@@ -25,7 +25,6 @@ surface. Keep the header and any outward popup outside the scrolling body:
         class="panel-surface-control"
         target="example-panel"
         :name="t('Example')"
-        initial="−"
       />
     </header>
     <div data-panel-body data-rail-scroller>
@@ -90,10 +89,15 @@ Do not copy the rail example's `.panel-collapse-btn` class into the dock:
 existing dock rules intentionally hide that class. The generic surface skin
 does not replace the dock's disclosure policy.
 
-`PanelCollapseButton` (`src/ui/rail/`) renders a panel's collapse button
-(`.panel-collapse-btn`) from the open state `PanelChrome` presents to the
-`gev-panel-chrome` store, and its click asks `PanelChrome` to toggle the
-panel through `setPanelCollapsed`. `PanelChrome` collects the buttons'
+A panel with Core's standard header (glow, title, badges, divider, actions
+and collapse button) is a `RailPanel` (`src/ui/rail/`): the kit's `UiPanel`
+bound to the `gev-panel-chrome` store, with its state classes drawn by
+`v-panel-state` and its button's click asking `PanelChrome` to toggle it.
+A panel with its own header uses `PanelCollapseButton`, which renders the
+collapse button (`.panel-collapse-btn`) from the open state `PanelChrome`
+presents to that store; until then, both show their `startCollapsed` state,
+which should match the markup's `collapsed` class.
+Either way, the click reaches `PanelChrome`'s `setPanelCollapsed`. `PanelChrome` collects the buttons'
 targets at initialization and binds each panel's Escape. For additions
 present at startup, keep those hooks and the existing chrome lifecycle. A
 dynamically mounted panel must own its disclosure: its own state, button and