@ponchia/ui 0.4.1 → 0.6.0

package/connectors/index.js

@@ -0,0 +1,275 @@
+/**
+ * @ponchia/ui/connectors — dependency-free SVG geometry for connecting two
+ * elements (or two points) with a leader line.
+ *
+ * Pure functions only: they take points/rects and return SVG path strings (or
+ * resolved coordinates). They own no DOM, no scales, and no live tracking —
+ * that optional glue lives in `@ponchia/ui/behaviors` (`initConnectors`). This
+ * is the page-coordinate, element-to-element cousin of the figure-coordinate
+ * `@ponchia/ui/annotations` helpers.
+ *
+ *   import { connectRects } from '@ponchia/ui/connectors';
+ *   const { d } = connectRects({ fromRect: a, toRect: b, shape: 'elbow' });
+ *
+ * The public types below are JSDoc `@typedef`s; the shipped `index.d.ts` is
+ * generated from them (and these signatures) by `tsc --emitDeclarationOnly`.
+ *
+ * @typedef {{ x: number, y: number }} Point
+ * @typedef {{ x: number, y: number, width: number, height: number }} Rect
+ * @typedef {'top' | 'right' | 'bottom' | 'left' | 'center'} Side
+ * @typedef {'straight' | 'elbow' | 'curve'} ConnectorShape
+ *
+ * @typedef {object} ConnectorPathOptions
+ * @property {Point} from
+ * @property {Point} to
+ * @property {ConnectorShape} [shape]
+ * @property {number} [curvature] Curve control-point reach along the dominant axis (curve shape). Default 0.5.
+ * @property {number} [mid] Turn position 0..1 along the span (elbow shape). Default 0.5.
+ *
+ * @typedef {object} ConnectRectsOptions
+ * @property {Rect} fromRect
+ * @property {Rect} toRect
+ * @property {Side} [fromSide] Anchor edges. Omit both to auto-pick facing edges from the rects.
+ * @property {Side} [toSide]
+ * @property {ConnectorShape} [shape]
+ * @property {number} [curvature]
+ * @property {number} [mid]
+ *
+ * @typedef {object} ConnectRectsResult
+ * @property {string} d SVG path data.
+ * @property {Point} from
+ * @property {Point} to
+ * @property {number} angle The path's end-tangent at `to` in radians — the direction the path arrives, so rotating an arrowhead at `to` by this points it along the path. Equals the straight `from`→`to` angle for `shape: 'straight'`; axis-aligned for `elbow`/`curve`.
+ */
+
+// Shared scalar/geometry primitives. Exported so the annotations layer composes
+// on the SAME kernel instead of copy-pasting it (the copies had silently
+// diverged — see `clamp`). Low-level helpers; the documented API is the path
+// builders below.
+export const PRECISION = 1000;
+
+export function finite(name, value, fallback) {
+  const v = value ?? fallback;
+  if (!Number.isFinite(v)) throw new TypeError(`${name} must be a finite number`);
+  return v;
+}
+
+export function dimension(name, value, fallback) {
+  const v = finite(name, value, fallback);
+  if (v < 0) throw new RangeError(`${name} must be greater than or equal to 0`);
+  return v;
+}
+
+export function fmt(value) {
+  const rounded = Math.round((Object.is(value, -0) ? 0 : value) * PRECISION) / PRECISION;
+  return String(Object.is(rounded, -0) ? 0 : rounded);
+}
+
+export function point(x, y) {
+  return `${fmt(x)},${fmt(y)}`;
+}
+
+// Guarded form (returns min when the range is inverted) — the reconciled body;
+// connectors only ever calls clamp(v, 0, 1) so this is output-identical here.
+export function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+
+/**
+ * A point on a rect's edge (or centre). `rect` is `{ x, y, width, height }`.
+ * @param {Rect} rect
+ * @param {Side} [side]
+ * @returns {Point}
+ */
+export function anchorPoint(rect, side = 'center') {
+  const x = finite('rect.x', rect?.x, 0);
+  const y = finite('rect.y', rect?.y, 0);
+  const w = dimension('rect.width', rect?.width, 0);
+  const h = dimension('rect.height', rect?.height, 0);
+  switch (side) {
+    case 'top':
+      return { x: x + w / 2, y };
+    case 'bottom':
+      return { x: x + w / 2, y: y + h };
+    case 'left':
+      return { x, y: y + h / 2 };
+    case 'right':
+      return { x: x + w, y: y + h / 2 };
+    case 'center':
+    default:
+      return { x: x + w / 2, y: y + h / 2 };
+  }
+}
+
+/**
+ * Angle (radians) from `from` to `to`.
+ * @param {Point} from
+ * @param {Point} to
+ * @returns {number}
+ */
+export function angleBetween(from, to) {
+  return Math.atan2(
+    finite('to.y', to?.y) - finite('from.y', from?.y),
+    finite('to.x', to?.x) - finite('from.x', from?.x),
+  );
+}
+
+/**
+ * Straight line from `from` to `to`.
+ * @param {Point} from
+ * @param {Point} to
+ * @returns {string}
+ */
+export function straightPath(from, to) {
+  return `M${point(finite('from.x', from?.x), finite('from.y', from?.y))}L${point(
+    finite('to.x', to?.x),
+    finite('to.y', to?.y),
+  )}`;
+}
+
+/**
+ * Right-angle dogleg. Turns on the dominant axis at `mid` (0..1) of the span.
+ * @param {Point} from
+ * @param {Point} to
+ * @param {{ mid?: number }} [opts]
+ * @returns {string}
+ */
+export function elbowPath(from, to, opts = {}) {
+  const fx = finite('from.x', from?.x);
+  const fy = finite('from.y', from?.y);
+  const tx = finite('to.x', to?.x);
+  const ty = finite('to.y', to?.y);
+  const mid = clamp(finite('mid', opts.mid, 0.5), 0, 1);
+  const dx = tx - fx;
+  const dy = ty - fy;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    const mx = fx + dx * mid;
+    return `M${point(fx, fy)}H${fmt(mx)}V${fmt(ty)}H${fmt(tx)}`;
+  }
+  const my = fy + dy * mid;
+  return `M${point(fx, fy)}V${fmt(my)}H${fmt(tx)}V${fmt(ty)}`;
+}
+
+/**
+ * Cubic curve; control points extend along the dominant axis by `curvature`.
+ * @param {Point} from
+ * @param {Point} to
+ * @param {{ curvature?: number }} [opts]
+ * @returns {string}
+ */
+export function curvePath(from, to, opts = {}) {
+  const fx = finite('from.x', from?.x);
+  const fy = finite('from.y', from?.y);
+  const tx = finite('to.x', to?.x);
+  const ty = finite('to.y', to?.y);
+  const k = finite('curvature', opts.curvature, 0.5);
+  const dx = tx - fx;
+  const dy = ty - fy;
+  const horizontal = Math.abs(dx) >= Math.abs(dy);
+  const c1 = horizontal ? { x: fx + dx * k, y: fy } : { x: fx, y: fy + dy * k };
+  const c2 = horizontal ? { x: tx - dx * k, y: ty } : { x: tx, y: ty - dy * k };
+  return `M${point(fx, fy)}C${point(c1.x, c1.y)} ${point(c2.x, c2.y)} ${point(tx, ty)}`;
+}
+
+/**
+ * Build a path between two points by `shape` (`straight` | `elbow` | `curve`).
+ * @param {ConnectorPathOptions} [opts]
+ * @returns {string}
+ */
+export function connectorPath(opts = {}) {
+  const { from, to, shape = 'straight' } = opts;
+  if (shape === 'elbow') return elbowPath(from, to, opts);
+  if (shape === 'curve') return curvePath(from, to, opts);
+  return straightPath(from, to);
+}
+
+/**
+ * A filled triangle arrowhead at `p`, pointing along `angle` (radians).
+ * @param {Point} p
+ * @param {number} angle
+ * @param {number} [size]
+ * @param {number} [spread] Half-angle of the head in radians (default 0.45).
+ *   Smaller is crisper/sharper; must be in (0, π/2).
+ * @returns {string}
+ */
+export function arrowHead(p, angle, size = 8, spread = 0.45) {
+  const px = finite('p.x', p?.x);
+  const py = finite('p.y', p?.y);
+  const a = finite('angle', angle, 0);
+  const s = dimension('size', size, 8);
+  const sp = finite('spread', spread, 0.45);
+  if (sp <= 0 || sp >= Math.PI / 2) throw new RangeError('spread must be in (0, π/2)');
+  const back = a + Math.PI;
+  const p1 = { x: px + Math.cos(back - sp) * s, y: py + Math.sin(back - sp) * s };
+  const p2 = { x: px + Math.cos(back + sp) * s, y: py + Math.sin(back + sp) * s };
+  return `M${point(px, py)}L${point(p1.x, p1.y)}L${point(p2.x, p2.y)}Z`;
+}
+
+/**
+ * A filled dot at `p`.
+ * @param {Point} p
+ * @param {number} [radius]
+ * @returns {string}
+ */
+export function dotMark(p, radius = 3) {
+  const px = finite('p.x', p?.x);
+  const py = finite('p.y', p?.y);
+  const r = dimension('radius', radius, 3);
+  if (r === 0) return '';
+  return `M${point(px, py - r)}A${fmt(r)},${fmt(r)} 0 1 1 ${point(px, py + r)}A${fmt(r)},${fmt(
+    r,
+  )} 0 1 1 ${point(px, py - r)}Z`;
+}
+
+/**
+ * Pick facing edges from the rects' relative centres.
+ * @param {Rect} fromRect
+ * @param {Rect} toRect
+ * @returns {{ from: Side, to: Side }}
+ */
+export function autoSides(fromRect, toRect) {
+  const fc = anchorPoint(fromRect, 'center');
+  const tc = anchorPoint(toRect, 'center');
+  const dx = tc.x - fc.x;
+  const dy = tc.y - fc.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return dx >= 0 ? { from: 'right', to: 'left' } : { from: 'left', to: 'right' };
+  }
+  return dy >= 0 ? { from: 'bottom', to: 'top' } : { from: 'top', to: 'bottom' };
+}
+
+/**
+ * Angle (radians) at which a `shape` path *arrives* at `to` — straight is the
+ * chord; elbow/curve arrive axis-aligned along the dominant axis. Rotate an
+ * end marker by this so it points along the path, not the chord.
+ * @param {Point} from
+ * @param {Point} to
+ * @param {ConnectorShape} [shape]
+ * @returns {number}
+ */
+export function endTangentAngle(from, to, shape = 'straight') {
+  if (shape === 'straight') return angleBetween(from, to);
+  const dx = finite('to.x', to?.x) - finite('from.x', from?.x);
+  const dy = finite('to.y', to?.y) - finite('from.y', from?.y);
+  if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? 0 : Math.PI;
+  return dy >= 0 ? Math.PI / 2 : -Math.PI / 2;
+}
+
+/**
+ * Connect two rects. Resolves anchor points (explicit `fromSide`/`toSide`, else
+ * auto), builds the path, and returns `{ d, from, to, angle }` so the caller can
+ * place an arrowhead/dot at `to` rotated by `angle`.
+ * @param {ConnectRectsOptions} [opts]
+ * @returns {ConnectRectsResult}
+ */
+export function connectRects(opts = {}) {
+  const { fromRect, toRect, shape = 'straight', curvature, mid } = opts;
+  // Honor each side override independently; auto-pick whichever is unset.
+  const auto = autoSides(fromRect, toRect);
+  const sides = { from: opts.fromSide || auto.from, to: opts.toSide || auto.to };
+  const from = anchorPoint(fromRect, sides.from);
+  const to = anchorPoint(toRect, sides.to);
+  const d = connectorPath({ from, to, shape, curvature, mid });
+  return { d, from, to, angle: endTangentAngle(from, to, shape) };
+}

package/css/analytical.css

@@ -0,0 +1,21 @@
+/* ==========================================================================
+   analytical — convenience roll-up of the opt-in analytical-primitive layers.
+
+   Import this one file instead of the seven leaves when you're building
+   analytical / generated-report UI:
+
+     @import '@ponchia/ui';
+     @import '@ponchia/ui/css/analytical.css';
+
+   Add @ponchia/ui/css/dataviz.css for the chart colour palette (legend swatches
+   fall back to the accent without it) and @ponchia/ui/css/report.css for the
+   document grammar as needed — those are separate concerns, kept opt-in.
+   ========================================================================== */
+
+@import url('./annotations.css') layer(bronto);
+@import url('./legend.css') layer(bronto);
+@import url('./marks.css') layer(bronto);
+@import url('./connectors.css') layer(bronto);
+@import url('./spotlight.css') layer(bronto);
+@import url('./crosshair.css') layer(bronto);
+@import url('./selection.css') layer(bronto);

package/css/annotations.css

@@ -0,0 +1,292 @@
+/* ==========================================================================
+   annotations — opt-in SVG callouts for analytical figures.
+
+   Bronto-native take on the subject / connector / note grammar: SVG-first,
+   no runtime dependency, no authoring handles. Import only beside charts,
+   reports, or generated figures that need explicit callouts.
+   ========================================================================== */
+
+.ui-annotation {
+  --annotation-color: var(--accent);
+  --annotation-line: var(--line-strong);
+  --annotation-note-bg: var(--panel);
+  --annotation-subject-fill: color-mix(in srgb, var(--annotation-color) 8%, transparent);
+  --annotation-stroke-width: 1.5;
+
+  color: var(--annotation-color);
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  overflow: visible;
+}
+
+.ui-annotation--muted {
+  --annotation-color: var(--text-dim);
+  --annotation-line: var(--line);
+}
+
+.ui-annotation--accent {
+  --annotation-color: var(--accent);
+  --annotation-line: var(--line-strong);
+}
+
+.ui-annotation--success {
+  --annotation-color: var(--success);
+}
+
+.ui-annotation--warning {
+  --annotation-color: var(--warning);
+}
+
+.ui-annotation--danger {
+  --annotation-color: var(--danger);
+}
+
+.ui-annotation--info {
+  --annotation-color: var(--info);
+}
+
+.ui-annotation__subject,
+.ui-annotation__connector,
+.ui-annotation__connector-end,
+.ui-annotation__note-line,
+.ui-annotation__badge {
+  vector-effect: non-scaling-stroke;
+}
+
+.ui-annotation__subject {
+  fill: var(--annotation-subject-fill);
+  stroke: var(--annotation-color);
+  stroke-linejoin: miter;
+  stroke-width: var(--annotation-stroke-width);
+}
+
+.ui-annotation__connector,
+.ui-annotation__note-line {
+  fill: none;
+  stroke: var(--annotation-line);
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-opacity: 0.86;
+  stroke-width: var(--annotation-stroke-width);
+}
+
+.ui-annotation__connector-end {
+  fill: var(--annotation-line);
+  stroke: none;
+}
+
+.ui-annotation__note {
+  color: var(--text-soft);
+  fill: currentColor;
+}
+
+.ui-annotation__note > rect {
+  fill: var(--annotation-note-bg);
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.ui-annotation__title {
+  fill: var(--text);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0;
+  paint-order: stroke fill;
+  stroke: var(--annotation-note-bg);
+  stroke-linejoin: round;
+  stroke-width: 3;
+  text-transform: uppercase;
+}
+
+.ui-annotation__label {
+  fill: var(--text-soft);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
+  paint-order: stroke fill;
+  stroke: var(--annotation-note-bg);
+  stroke-linejoin: round;
+  stroke-width: 3;
+}
+
+.ui-annotation__badge {
+  fill: var(--annotation-note-bg);
+  stroke: var(--annotation-color);
+  stroke-width: var(--annotation-stroke-width);
+}
+
+.ui-annotation--label .ui-annotation__subject,
+.ui-annotation--badge .ui-annotation__connector,
+.ui-annotation--badge .ui-annotation__note-line {
+  display: none;
+}
+
+.ui-annotation--callout .ui-annotation__note-line,
+.ui-annotation--elbow .ui-annotation__note-line,
+.ui-annotation--curve .ui-annotation__note-line {
+  stroke: var(--annotation-color);
+}
+
+.ui-annotation--elbow .ui-annotation__connector {
+  stroke-linejoin: bevel;
+}
+
+.ui-annotation--curve .ui-annotation__connector {
+  stroke-linecap: round;
+}
+
+.ui-annotation--circle .ui-annotation__subject {
+  stroke-dasharray: 0.01 4;
+  stroke-linecap: round;
+}
+
+.ui-annotation--rect .ui-annotation__subject {
+  stroke-dasharray: 5 3;
+}
+
+.ui-annotation--threshold .ui-annotation__subject {
+  fill: none;
+  stroke: var(--annotation-color);
+  stroke-dasharray: 6 4;
+}
+
+.ui-annotation--badge .ui-annotation__subject {
+  fill: var(--annotation-color);
+}
+
+.ui-annotation--badge .ui-annotation__badge {
+  fill: var(--annotation-color);
+}
+
+.ui-annotation--badge .ui-annotation__title,
+.ui-annotation--badge .ui-annotation__label {
+  fill: var(--button-text);
+  stroke: none;
+}
+
+.ui-annotation--bracket .ui-annotation__subject,
+.ui-annotation--compare .ui-annotation__subject,
+.ui-annotation--axis .ui-annotation__subject,
+.ui-annotation--timeline .ui-annotation__subject {
+  fill: none;
+  stroke: var(--annotation-color);
+  stroke-linecap: square;
+}
+
+.ui-annotation--band .ui-annotation__subject {
+  fill: var(--annotation-subject-fill);
+  stroke: var(--annotation-color);
+  stroke-dasharray: 5 3;
+}
+
+.ui-annotation--slope .ui-annotation__subject {
+  fill: none;
+  stroke: var(--annotation-color);
+  stroke-linecap: round;
+}
+
+.ui-annotation--cluster .ui-annotation__subject {
+  fill: var(--annotation-subject-fill);
+  stroke: var(--annotation-color);
+  stroke-dasharray: 0.01 5;
+  stroke-linecap: round;
+}
+
+.ui-annotation--evidence .ui-annotation__badge {
+  fill: var(--annotation-note-bg);
+  stroke: var(--annotation-color);
+}
+
+.ui-annotation--evidence .ui-annotation__title {
+  fill: var(--annotation-color);
+  stroke: none;
+}
+
+.ui-annotation--focus {
+  --annotation-stroke-width: 2;
+  --annotation-subject-fill: color-mix(in srgb, var(--annotation-color) 14%, transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ui-annotation--draw .ui-annotation__connector,
+  .ui-annotation--draw .ui-annotation__note-line {
+    animation: uiAnnotationDraw var(--duration-slow, 600ms) var(--ease-out, ease-out) both;
+    animation-delay: var(--annotation-delay, 0ms);
+    stroke-dasharray: var(--annotation-dash, 360);
+    stroke-dashoffset: var(--annotation-dash, 360);
+  }
+
+  .ui-annotation--draw .ui-annotation__subject,
+  .ui-annotation--draw .ui-annotation__badge {
+    animation: uiAnnotationSubjectReveal var(--duration-slow, 600ms) var(--ease-out, ease-out) both;
+    animation-delay: var(--annotation-delay, 0ms);
+  }
+
+  .ui-annotation--reveal .ui-annotation__note {
+    animation: uiAnnotationReveal var(--duration-slow, 600ms) var(--ease-out, ease-out) both;
+    animation-delay: var(--annotation-delay, 0ms);
+  }
+
+  .ui-annotation--pulse .ui-annotation__subject,
+  .ui-annotation--pulse .ui-annotation__badge {
+    animation: uiAnnotationPulse 1.6s var(--ease-out, ease-out) infinite;
+    animation-delay: var(--annotation-delay, 0ms);
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+}
+
+@keyframes uiAnnotationDraw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes uiAnnotationSubjectReveal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes uiAnnotationReveal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes uiAnnotationPulse {
+  50% {
+    opacity: 0.62;
+    transform: scale(1.06);
+  }
+}
+
+@media print {
+  .ui-annotation__subject,
+  .ui-annotation__connector,
+  .ui-annotation__note,
+  .ui-annotation__note-line,
+  .ui-annotation__badge {
+    animation: none !important;
+    opacity: 1;
+    stroke-dashoffset: 0;
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ui-annotation {
+    --annotation-color: CanvasText;
+    --annotation-line: CanvasText;
+    --annotation-note-bg: Canvas;
+    --annotation-subject-fill: Canvas;
+  }
+}

package/css/app.css

@@ -6,7 +6,7 @@
 .ui-app-shell {
   display: grid;
   grid-template-columns: var(--app-rail, 14rem) minmax(0, 1fr);
-  min-block-size: 100vh;
+  min-block-size: 100dvh;
 }
 
 .ui-app-shell--full {
@@ -24,7 +24,7 @@
   padding: var(--space-md);
   position: sticky;
   inset-block-start: 0;
-  block-size: 100vh;
+  block-size: 100svh;
   overflow-y: auto;
 }
 
@@ -34,6 +34,7 @@
   display: flex;
   font-family: var(--display);
   font-size: 1.05rem;
+  font-weight: var(--display-weight);
   gap: 0.5rem;
   letter-spacing: var(--tracking-wide);
   padding: 0.35rem 0.5rem;
@@ -87,18 +88,33 @@
   inline-size: 0.34rem;
 }
 
-.ui-app-nav a:hover {
-  background: var(--bg-accent);
-  color: var(--text);
+@media (hover: hover) {
+  .ui-app-nav a:hover {
+    background: var(--bg-accent);
+    color: var(--text);
+  }
 }
 
-.ui-app-nav a.is-active {
+/* Current page honours BOTH the `.is-active` class and `aria-current` — the
+   sibling `.ui-sitenav` signals current-page with `aria-current="page"`, so the
+   app-shell nav now accepts the same programmatic cue (author it for AT, not
+   just the visual class — C19). */
+.ui-app-nav a.is-active,
+.ui-app-nav a[aria-current]:not([aria-current='false']) {
   background: var(--accent-soft);
   border-inline-start-color: var(--accent);
   color: var(--accent-text);
 }
 
-.ui-app-nav a.is-active::before {
+@media (pointer: coarse) {
+  .ui-app-nav a {
+    min-block-size: 2.9rem;
+    padding-inline: 0.9rem;
+  }
+}
+
+.ui-app-nav a.is-active::before,
+.ui-app-nav a[aria-current]:not([aria-current='false'])::before {
   opacity: 1;
 }
 
@@ -153,6 +169,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: 1.1rem;
+  font-weight: var(--display-weight);
   letter-spacing: var(--tracking-wide);
   margin: 0;
   text-transform: uppercase;
@@ -207,6 +224,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: 0.95rem;
+  font-weight: var(--display-weight);
   letter-spacing: var(--tracking-wide);
   margin: 0;
   text-transform: uppercase;
@@ -230,11 +248,7 @@
    permanent admin-shell alias (grouped on the canonical rules there —
    identical output). Nothing app-specific left to define here. */
 
-/* --- Mobile rail collapse --- */
-
-.ui-app-rail__toggle {
-  display: none;
-}
+/* --- Mobile rail: collapses to a horizontal scrolling strip --- */
 
 @media (max-width: 880px) {
   .ui-app-shell {
@@ -254,6 +268,15 @@
     display: none;
   }
 
+  /* The rail is flex-row here, so the base `margin-block-start: auto` (which
+     pushed account to the bottom in the column layout) is inert and account can
+     scroll off. Push it to the inline end instead so sign-out stays reachable.
+     (layout review C21.) */
+  .ui-app-rail__account {
+    margin-block-start: 0;
+    margin-inline-start: auto;
+  }
+
   .ui-app-nav {
     grid-auto-flow: column;
     gap: 0.15rem;
@@ -269,11 +292,18 @@
     white-space: nowrap;
   }
 
-  .ui-app-nav a.is-active {
+  .ui-app-nav a.is-active,
+  .ui-app-nav a[aria-current]:not([aria-current='false']) {
     border-inline-start: 0;
     border-block-end-color: var(--accent);
   }
 
+  /* No --app-rail-height token exists, so drop the redundant second sticky;
+     only the horizontal rail stays pinned. */
+  .ui-app-topbar {
+    position: static;
+  }
+
   .ui-app-content {
     padding: var(--space-md);
   }