@leavepulse/ui 0.70.0 → 0.71.0

package/src/components/LpThemeStudio.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { usePaletteTheme } from "../theme/palette"
 /*
  * The theme, tuned in place: a base theme, any brand colour, corners, control
  * size and motion speed, all applied live, and the result ready to take away
@@ -102,8 +103,9 @@ const TILE =
   "flex min-w-0 flex-col items-center gap-1 rounded-control p-1.5 text-[11px] text-muted transition-colors duration-(--duration-fast) hover:bg-surface-soft hover:text-ink"
 const SWATCH = "relative size-8 overflow-hidden rounded-full ring-2 transition-[box-shadow] duration-(--duration-fast)"
 
-const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K) =>
-  (value: string) => studio.tune({ [key]: value } as Partial<StudioState>)
+const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K, value: string) => studio.tune({ [key]: value } as Partial<StudioState>)
+
+usePaletteTheme(() => studio ?? undefined)
 </script>
 
 <template>
@@ -171,7 +173,7 @@ const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K) =>
         :model-value="state.corners"
         size="sm"
         :options="[{ value: 'sharp', label: text.sharp }, { value: 'default', label: text.default }, { value: 'round', label: text.round }]"
-        @update:model-value="tuneTo('corners')"
+        @update:model-value="tuneTo('corners', $event)"
       />
     </LpThemeStudioSection>
 
@@ -180,7 +182,7 @@ const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K) =>
         :model-value="state.size"
         size="sm"
         :options="[{ value: 'compact', label: text.compact }, { value: 'default', label: text.default }, { value: 'comfortable', label: text.comfortable }]"
-        @update:model-value="tuneTo('size')"
+        @update:model-value="tuneTo('size', $event)"
       />
     </LpThemeStudioSection>
 
@@ -189,7 +191,7 @@ const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K) =>
         :model-value="state.motion"
         size="sm"
         :options="[{ value: 'fast', label: text.fast }, { value: 'normal', label: text.normal }, { value: 'slow', label: text.slow }]"
-        @update:model-value="tuneTo('motion')"
+        @update:model-value="tuneTo('motion', $event)"
       />
     </LpThemeStudioSection>
 

package/src/components/LpThemeSwitcher.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { usePaletteTheme } from "../theme/palette"
 /*
  * Theme switcher. The kit convention for theming, so consumers stop hand-rolling
  * their own. Default behaviour mirrors LeaveHosting: LEFT-click cycles to the
@@ -298,6 +299,8 @@ const labelName = computed(() =>
 const triggerLabel = computed(
   () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value),
 )
+
+usePaletteTheme(() => tuner ?? undefined)
 </script>
 
 <template>

package/src/components/LpTimeField.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Time-of-day field: hour and minute segments, typed or stepped with the arrow
  * keys (reka TimeField). The model is "HH:mm" (v-model), the same shape a
@@ -26,6 +27,8 @@ import LpIcon from "./LpIcon.vue"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     /** Selected time "HH:mm" (v-model). */
     modelValue?: string
     disabled?: boolean
@@ -38,7 +41,7 @@ const props = withDefaults(
     /** Show the clock icon at the start of the field. */
     icon?: boolean
   }>(),
-  { size: "md", hourCycle: 24, icon: true },
+  { palette: undefined, size: "md", hourCycle: 24, icon: true },
 )
 
 const emit = defineEmits<{
@@ -84,6 +87,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     field.value.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
   ].join(" "),
 )
+
+usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid })
 </script>
 
 <template>

package/src/components/LpTooltip.vue

@@ -120,6 +120,27 @@ const PassThrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 
 const target = { x: 0, y: 0 }
 const offset = ref({ x: 0, y: 0 })
+const tipBody = ref<HTMLElement | null>(null)
+
+/* reka's own collision padding, which the follow offset would otherwise undo. */
+const EDGE = 8
+
+/*
+ * reka keeps the tip inside the window for the box it was placed against; the
+ * follow offset is added after that, so near the right edge a wide tip (an
+ * uptime slice with its breakdown) slid half off screen. The offset is held to
+ * the room the window has on each side of where reka put the tip.
+ */
+function inView(x: number): number {
+  const panel = tipBody.value?.parentElement
+  if (!panel) return x
+  const rect = panel.getBoundingClientRect()
+  const placed = rect.left - offset.value.x
+  const width = panel.ownerDocument.defaultView?.innerWidth ?? window.innerWidth
+  const min = EDGE - placed
+  const max = width - EDGE - rect.width - placed
+  return max < min ? x : Math.min(max, Math.max(min, x))
+}
 
 /*
  * The spring constants come from the kit's shared "float" feel — the same ones
@@ -172,6 +193,7 @@ const onPointerMove = (e: PointerEvent) => {
   const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0
   const dir = props.side === "bottom" ? -1 : 1
   target.y = e.clientY - (rect.top + rect.height / 2) + half * dir
+  target.x = inView(target.x)
   // Without motion the tip goes straight to the reading instead of trailing.
   if (prefersReducedMotion()) {
     offset.value = { x: target.x, y: target.y }
@@ -272,7 +294,7 @@ const guardOutside = useOutsideGuard()
           ]"
           :style="followCursor ? { translate: `${offset.x}px ${offset.y}px` } : undefined"
         >
-          <slot name="content">{{ content }}</slot>
+          <div ref="tipBody"><slot name="content">{{ content }}</slot></div>
         </TooltipContent>
       </TooltipPortal>
     </TooltipRoot>

package/src/components/LpUptimeBar.vue

@@ -3,27 +3,24 @@
 // appended to it, so opt out of the automatic pass-through that would add it
 // a second time, unmerged.
 export default { inheritAttrs: false }
+export type { UptimeEvent, UptimeSegment, UptimeStatus } from "./uptimeBar"
 </script>
 
 <script setup lang="ts">
 import { computed, ref } from "vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
 import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpSwap from "./LpSwap.vue"
 import LpTooltip from "./LpTooltip.vue"
 import { TONES } from "./tone"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
+import { useLocale } from "../composables/useLocale"
+import { DEFAULT_UNIT_LABELS, formatTime, toEpoch, type TimeUnitLabels } from "./timeSpan"
+import { UPTIME_SEVERITY, uptimeFigure, uptimeRange, uptimeShare, type UptimeSegment, type UptimeStatus } from "./uptimeBar"
 
-export type UptimeStatus = "operational" | "degraded" | "down" | "maintenance" | "empty"
-
-export interface UptimeSegment {
-  /** Health of this slice. `empty` renders a faded placeholder (no data). */
-  status: UptimeStatus
-  /** Optional rich tooltip body; falls back to a humanised status. */
-  label?: string
-}
 
 const props = withDefaults(
   defineProps<{
@@ -35,6 +32,13 @@ const props = withDefaults(
     endLabel?: string
     /** Show the computed uptime % above the bar. */
     showUptime?: boolean
+    /**
+     * The uptime figure, when the app has a more exact one than the slices
+     * (a server that counted every minute). Otherwise it is worked out from
+     * the slices: their `durations`, else their spans, else their count.
+     */
+    uptime?: number | null
+    locale?: string
     /** Override the headline shown next to the uptime %. */
     title?: string
     /**
@@ -44,7 +48,7 @@ const props = withDefaults(
      */
     colors?: Partial<Record<UptimeStatus, string>>
     /** Status names, for the tooltip and screen readers. */
-    labels?: Partial<Record<UptimeStatus | "loading", string>>
+    labels?: Partial<Record<UptimeStatus | "loading" | "uptime", string>>
     /**
      * The history is on its way. The row of ticks pulses in place of the
      * slices (as many as `segments` already holds, else `skeletonSlices`) at
@@ -88,26 +92,18 @@ const statusLabel = useLabels(
     maintenance: "Maintenance",
     empty: "No data",
     loading: "Loading",
+    uptime: "uptime",
   },
   () => props.labels,
 )
 
 const skeletonCount = computed(() => props.segments.length || props.skeletonSlices)
 
-// Uptime counts only slices with data; operational + maintenance are "up".
-const uptimePct = computed(() => {
-  const tracked = props.segments.filter((s) => s.status !== "empty")
-  if (!tracked.length) return null
-  const up = tracked.filter((s) => s.status === "operational" || s.status === "maintenance").length
-  return (up / tracked.length) * 100
-})
+const locale = useLocale(() => props.locale)
+const units = useLabels<TimeUnitLabels>("time", DEFAULT_UNIT_LABELS)
+
+const uptimePct = computed(() => (props.uptime ?? null) !== null ? props.uptime! : uptimeShare(props.segments))
 
-/*
- * Places actually needed, so trailing zeros stay trimmed: 100 rather than
- * 100.00, 99.9 rather than 99.90. The counter needs a fixed count per render —
- * it cannot "trim" mid-roll without changing the row's shape — so it is derived
- * from the value instead of hard-coded at two.
- */
 /*
  * The gap is drawn INSIDE each slice, not between slices.
  *
@@ -136,7 +132,24 @@ const tip = computed(() => {
   if (i == null) return null
   const seg = props.segments[i]
   if (!seg) return null
-  return { status: seg.status, text: seg.label ?? statusLabel.value[seg.status] }
+  return {
+    status: seg.status,
+    text: seg.label ?? statusLabel.value[seg.status],
+    range: seg.start !== undefined ? uptimeRange(seg.start, seg.end, locale.value) : "",
+    parts: UPTIME_SEVERITY.filter((st) => (seg.durations?.[st] ?? 0) > 0).map((st) => ({
+      status: st,
+      text: statusLabel.value[st],
+      time: formatTime(seg.durations![st]!, "units", units.value, 2),
+    })),
+    events: (seg.events ?? []).slice(0, 4).map((e) => ({
+      status: e.status ?? seg.status,
+      text: e.text,
+      at: e.at !== undefined && Number.isFinite(toEpoch(e.at))
+        ? new Intl.DateTimeFormat(locale.value, { hour: "2-digit", minute: "2-digit" }).format(toEpoch(e.at))
+        : "",
+    })),
+    more: Math.max(0, (seg.events?.length ?? 0) - 4),
+  }
 })
 
 /*
@@ -165,12 +178,7 @@ function onSlotKeydown(e: KeyboardEvent, i: number) {
   slots.value[next]?.focus()
 }
 
-const uptimeDecimals = computed(() => {
-  const v = uptimePct.value
-  if (v == null) return 0
-  const trimmed = Number(v.toFixed(2))
-  return Number.isInteger(trimmed) ? 0 : String(trimmed).split(".")[1].length
-})
+const figure = computed(() => (uptimePct.value == null ? null : uptimeFigure(uptimePct.value)))
 
 // The bar sets its own gap between the strip and its caption, which a compact status row has to close.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
@@ -210,13 +218,32 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     </LpSkeleton>
     <LpTooltip v-else :delay="80" follow-cursor side="top" :disabled="hovered === null">
       <template #content>
-        <span v-if="tip" class="flex items-center gap-1.5">
-          <span
-            class="size-1.5 shrink-0 rounded-full"
-            :style="{ backgroundColor: colorFor(tip.status) }"
-          />
-          <LpRollingText :value="tip.text" :duration="180" align="start" />
-        </span>
+        <LpShift v-if="tip" axis="both" class="flex">
+          <span class="flex min-w-36 flex-col gap-1">
+            <span class="flex items-center gap-1.5">
+              <span
+                class="size-1.5 shrink-0 rounded-full transition-colors duration-[var(--duration-fast)]"
+                :style="{ backgroundColor: colorFor(tip.status) }"
+              />
+              <LpRollingText :value="tip.text" :duration="180" align="start" class="font-medium" />
+            </span>
+            <LpRollingText v-if="tip.range" :value="tip.range" :duration="180" align="start" class="text-[0.7rem] opacity-70 tabular-nums" />
+            <span v-if="tip.parts.length > 1 || (tip.parts.length === 1 && tip.parts[0].status !== tip.status)" class="mt-0.5 flex flex-col gap-0.5">
+              <span v-for="part in tip.parts" :key="part.status" class="flex items-center gap-1.5 tabular-nums">
+                <span class="size-1.5 shrink-0 rounded-full" :style="{ backgroundColor: colorFor(part.status) }" />
+                <span class="flex-1">{{ part.text }}</span>
+                <LpRollingText :value="part.time" :duration="180" align="end" class="opacity-80" />
+              </span>
+            </span>
+            <span v-if="tip.events.length" class="mt-0.5 flex flex-col gap-0.5 border-t border-current/15 pt-1">
+              <span v-for="(event, n) in tip.events" :key="n" class="flex items-baseline gap-1.5">
+                <LpRollingText v-if="event.at" :value="event.at" :duration="180" align="start" class="shrink-0 tabular-nums opacity-70" />
+                <LpRollingText :value="event.text" :duration="180" align="start" wrap />
+              </span>
+              <span v-if="tip.more" class="opacity-70">+{{ tip.more }}</span>
+            </span>
+          </span>
+        </LpShift>
       </template>
 
       <!--
@@ -235,7 +262,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           type="button"
           class="lp-uptime__slot min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
           :tabindex="i === tabStop ? 0 : -1"
-          :aria-label="seg.label ?? statusLabel[seg.status]"
+          :aria-label="[seg.label ?? statusLabel[seg.status], seg.start !== undefined ? uptimeRange(seg.start, seg.end, locale) : ''].filter(Boolean).join(', ')"
           @pointerenter="hovered = i"
           @focus="focusIndex = i; hovered = i"
           @blur="hovered === i && (hovered = null)"
@@ -275,13 +302,14 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           class="inline-block h-[0.9em] w-8 align-middle"
         />
         <LpNumberFlow
-          v-else-if="uptimePct != null"
-          :value="uptimePct"
-          :decimals="uptimeDecimals"
+          v-else-if="figure"
+          :value="figure.value"
+          :decimals="figure.decimals"
+          grouped
           suffix="%"
         />
         <template v-else>—</template>
-        <span class="text-muted"> uptime</span>
+        <span class="ml-1 text-muted">{{ statusLabel.uptime }}</span>
       </span>
       <span class="h-px flex-1 bg-line" />
       <span class="shrink-0">{{ endLabel }}</span>

package/src/components/PalettePreviewBoundary.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
+suppressPaletteDiscovery()
+</script>
+<template><div data-lp-command-preview class="contents"><slot /></div></template>

package/src/components/PickerField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAttrs } from "vue"
-import type { useFieldControl } from "../composables/useField"
+import { useFieldBlur, type useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import { PICKER_CLEAR, PICKER_PRESET, PICKER_PRESETS, PICKER_SIZE, PICKER_TRIGGER, pickerTone } from "./calendar"
 import LpIcon from "./LpIcon.vue"
@@ -21,13 +21,14 @@ withDefaults(defineProps<{
   presetsClass: string
 }>(), { size: "md" })
 const open = defineModel<boolean>("open")
-defineEmits<{ clear: [] }>()
+const emit = defineEmits<{ clear: []; blur: [event: FocusEvent] }>()
+const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event))
 const attrs = useAttrs()
 </script>
 
 <template>
-  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
-    <LpPopover v-model:open="open" align="start" panel-class="flex w-auto max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 sm:flex-row">
+  <div :data-lp-field-part="partId" @focusout="onFocusOut" :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
+    <LpPopover v-model:open="open" :data-lp-field-part="partId" @focusout="onFocusOut" align="start" panel-class="flex w-auto max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 sm:flex-row">
       <template #trigger>
         <button
           v-bind="{ ...attrs, class: undefined, style: undefined }"

package/src/components/commandPalette.ts

@@ -1,4 +1,15 @@
 import { applyQueryFilters, parsePaletteQuery, type CommandSearchTerms, type HighlightPart, type SearchableCommand } from "./commandSearch"
+import type { Command } from "./LpCommandPalette.vue"
+import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+
+/** The same action definitions serve a row menu and the command palette. */
+export function menuPaletteCommands(items: ContextMenuItemDef[], prefix: string): Command[] {
+  return items.map((item, index) => ({
+    id: `${prefix}/${index}`, label: item.label, icon: item.icon, disabled: item.disabled,
+    onSelect: item.onSelect, keepOpen: item.checked !== undefined,
+    children: item.children ? menuPaletteCommands(item.children, `${prefix}/${index}`) : undefined,
+  }))
+}
 
 /*
  * The parts of LpCommandPalette that are plain logic, kept out of the SFC so
@@ -7,6 +18,7 @@ import { applyQueryFilters, parsePaletteQuery, type CommandSearchTerms, type Hig
 
 /** The fields of a command that decide whether the preview pane opens for it. */
 export interface PreviewableCommand {
+  previewComponent?: unknown
   preview?: string
   excerpt?: string
   noPreview?: boolean
@@ -23,9 +35,18 @@ export function commandHasPreview<T extends PreviewableCommand>(
 ): boolean {
   if (!command || command.noPreview) return false
   if (options.hasPreview) return options.hasPreview(command)
-  return options.slot || !!(command.preview || command.excerpt)
+  return options.slot || !!(command.previewComponent || command.preview || command.excerpt)
 }
 
+export const PALETTE_MODES = {
+  people: { prefix: "@", label: "People", icon: "lucide:users" },
+  channels: { prefix: "#", label: "Channels", icon: "lucide:hash" },
+  roles: { prefix: "&", label: "Roles", icon: "lucide:shield" },
+  commands: { prefix: ">", label: "Commands", icon: "lucide:terminal" },
+  help: { prefix: "?", label: "Help", icon: "lucide:circle-help" },
+} as const
+export type PaletteMode = keyof typeof PALETTE_MODES
+
 /** One line of LpPaletteFacts: what it is, and what it is set to now. */
 export interface PaletteFact {
   /** Text, or the preview slot's `highlight(text)` to mark the query. */

package/src/components/commandSearch.ts

@@ -72,7 +72,7 @@ function score(command: SearchableCommand, terms: CommandSearchTerms): number {
   return total
 }
 
-export function rankCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): T[] {
+function rankExact<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): T[] {
   return items
     .map((command) => ({ command, score: score(command, terms) }))
     .filter((entry) => entry.score > 0)
@@ -80,6 +80,28 @@ export function rankCommandItems<T extends SearchableCommand>(items: T[], terms:
     .map((entry) => entry.command)
 }
 
+const LATIN_KEYS = "`qwertyuiop[]asdfghjkl;'zxcvbnm,."
+const CYRILLIC_KEYS = "ёйцукенгшщзхъфывапролджэячсмитьбю"
+const LAYOUT_KEYS = new Map([...LATIN_KEYS].flatMap((key, i) => [[key, CYRILLIC_KEYS[i]!], [CYRILLIC_KEYS[i]!, key]]))
+
+export function swapCommandLayout(value: string): string {
+  return [...value].map(char => {
+    const replacement = LAYOUT_KEYS.get(char.toLowerCase())
+    return replacement ? char === char.toUpperCase() ? replacement.toUpperCase() : replacement : char
+  }).join("")
+}
+
+export function searchCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): { items: T[]; terms: string[] } {
+  const exact = rankExact(items, terms)
+  if (exact.length || !terms.include.length) return { items: exact, terms: terms.include }
+  const alternate = { include: terms.include.map(swapCommandLayout), exclude: terms.exclude, groups: terms.groups }
+  return { items: rankExact(items, alternate), terms: alternate.include }
+}
+
+export function rankCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): T[] {
+  return searchCommandItems(items, terms).items
+}
+
 /**
  * A query as a fetcher receives it. `text` is what a remote search should be
  * sent: the positive words and phrases, in the case they were typed, without

package/src/components/format.ts

@@ -134,3 +134,13 @@ export function compactNumber(value: number, options: CompactNumberOptions = {})
         }).format(scaled)
   return `${number}${COMPACT_UNITS[i][1]}`
 }
+
+/**
+ * The character a locale writes between the whole and the fractional part:
+ * "." in English, "," in Russian and German. A counter that splits a grouped
+ * figure into columns has to find the fraction by this mark, not by ".",
+ * because in German "." is the thousands separator.
+ */
+export function decimalMark(locale?: string): string {
+  return numberFormat(locale, {}).formatToParts(1.5).find((p) => p.type === "decimal")?.value ?? "."
+}

package/src/components/uptimeBar.ts

@@ -0,0 +1,98 @@
+/*
+ * The arithmetic behind LpUptimeBar, kept pure so the corners are tested
+ * without a DOM: what share of the time was up, how that figure is printed,
+ * and how a slice's span reads in its tooltip.
+ */
+import { toEpoch } from "./timeSpan"
+
+export type UptimeStatus = "operational" | "degraded" | "down" | "maintenance" | "empty"
+
+export type UptimeMoment = Date | string | number
+
+/** Something that happened inside a slice: a restart, a deploy, an alert. */
+export interface UptimeEvent {
+  text: string
+  at?: UptimeMoment
+  status?: UptimeStatus
+}
+
+export interface UptimeSegment {
+  /** Health of this slice. `empty` renders a faded placeholder (no data). */
+  status: UptimeStatus
+  /** Optional rich tooltip body; falls back to a humanised status. */
+  label?: string
+  /** When the slice begins and ends. Shown in the tooltip, and weights the uptime figure. */
+  start?: UptimeMoment
+  end?: UptimeMoment
+  /**
+   * Time spent in each state inside the slice, in ms. With it the figure
+   * counts real time rather than slices (one bad minute in a day no longer
+   * costs the whole day), and the tooltip says how long each state lasted.
+   */
+  durations?: Partial<Record<Exclude<UptimeStatus, "empty">, number>>
+  /** What happened in the slice, a line each in the tooltip. */
+  events?: UptimeEvent[]
+}
+
+const UP: ReadonlySet<UptimeStatus> = new Set(["operational", "maintenance"])
+
+/** Worst first: the order a tooltip lists the time a slice spent in each state. */
+export const UPTIME_SEVERITY: readonly Exclude<UptimeStatus, "empty">[] = ["down", "degraded", "maintenance", "operational"]
+
+function span(seg: UptimeSegment): number | null {
+  if (seg.start === undefined || seg.end === undefined) return null
+  const ms = toEpoch(seg.end) - toEpoch(seg.start)
+  return Number.isFinite(ms) && ms > 0 ? ms : null
+}
+
+/**
+ * Percent of the tracked time that was up (operational or planned
+ * maintenance). Slices with `durations` count their real minutes; the rest
+ * count by their span when every one of them has a span, and as one slice
+ * each otherwise. Empty slices are not tracked. Null when nothing is.
+ */
+export function uptimeShare(segments: readonly UptimeSegment[]): number | null {
+  const tracked = segments.filter((s) => s.status !== "empty")
+  const bySpan = tracked.every((s) => s.durations || span(s) !== null)
+  let up = 0
+  let total = 0
+  for (const seg of tracked) {
+    if (seg.durations) {
+      for (const [status, ms] of Object.entries(seg.durations)) {
+        if (!ms || ms < 0) continue
+        total += ms
+        if (UP.has(status as UptimeStatus)) up += ms
+      }
+      continue
+    }
+    const weight = bySpan ? (span(seg) ?? 0) : 1
+    total += weight
+    if (UP.has(seg.status)) up += weight
+  }
+  return total > 0 ? (up / total) * 100 : null
+}
+
+/**
+ * The figure and its decimal places: trailing zeros trimmed (100, 99.9), and
+ * never rounded up to 100 while some time was down — 99.999 prints as 99.99,
+ * because "100%" over an outage reads as no outage at all.
+ */
+export function uptimeFigure(pct: number): { value: number; decimals: number } {
+  let value = Number(pct.toFixed(2))
+  if (pct < 100 && value >= 100) value = 99.99
+  const decimals = Number.isInteger(value) ? 0 : String(value).split(".")[1].length
+  return { value, decimals }
+}
+
+/** "26 Oct, 12:00 – 12:15", the date written once when both ends share a day. */
+export function uptimeRange(start: UptimeMoment, end: UptimeMoment | undefined, locale?: string): string {
+  const from = toEpoch(start)
+  if (!Number.isFinite(from)) return ""
+  const full = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" })
+  if (end === undefined) return full.format(from)
+  const to = toEpoch(end)
+  if (!Number.isFinite(to)) return full.format(from)
+  const sameDay = new Date(from).toDateString() === new Date(to).toDateString()
+  const tail = sameDay ? new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit" }) : full
+  return `${full.format(from)} – ${tail.format(to)}`
+}

package/src/composables/scroll.ts

@@ -26,6 +26,17 @@ export function scrollParent(el: Element | null | undefined, { axis = "y", self
   return null
 }
 
+/**
+ * Whether `el`'s scroller (or the page) has no more room to scroll down.
+ * `slack` absorbs the pixel a rounded-up scrollHeight can sit above the sum.
+ */
+export function atScrollEnd(el: Element | null | undefined, slack = 2): boolean {
+  if (!el) return false
+  const box = scrollParent(el) ?? (el.ownerDocument.scrollingElement as HTMLElement | null)
+  if (!box) return true
+  return box.scrollTop + box.clientHeight >= box.scrollHeight - slack
+}
+
 export interface ScrollToElementOptions {
   /** `nearest` scrolls only when the element is out of view. */
   block?: "nearest" | "center" | "start"

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, inject, provide, useId, type ComputedRef, type InjectionKey } from "vue"
+import { computed, inject, onScopeDispose, provide, useId, type ComputedRef, type InjectionKey } from "vue"
 import type { FieldNoticeOptions } from "./useFieldNotice"
 
 /*
@@ -9,6 +9,10 @@ import type { FieldNoticeOptions } from "./useFieldNotice"
  */
 export interface FieldContext {
   id: string
+  /** Human-readable name shared by controls and contextual commands. */
+  label?: string
+  hint?: string
+  error?: string
   /** Id of the visible label, for controls a `<label for>` cannot name (groups). */
   labelId?: string
   describedBy?: string
@@ -74,6 +78,9 @@ export function useFieldControl(
     return {
       id: state.id ?? field?.id,
       labelId: field?.labelId,
+      label: field?.label,
+      hint: field?.hint,
+      error: field?.error,
       describedBy: field?.describedBy,
       invalid: !!state.invalid || !!field?.invalid,
       required: !!state.required || !!field?.required,
@@ -93,3 +100,28 @@ export function focusLeft(event: FocusEvent): boolean {
   const next = event.relatedTarget
   return !(next instanceof Node && (event.currentTarget as Node | null)?.contains(next))
 }
+
+/** Trigger and portalled content share a boundary for the control's public blur. */
+export function useFieldBlur(blur: (event: FocusEvent) => void) {
+  const partId = `lp-field-${useId()}`
+  let cancelPending: (() => void) | undefined
+  const inside = (target: EventTarget | null) =>
+    !!(target as Element | null)?.closest?.(`[data-lp-field-part="${partId}"]`)
+
+  function onFocusOut(event: FocusEvent) {
+    cancelPending?.()
+    if (inside(event.relatedTarget)) return
+    if (event.relatedTarget) return blur(event)
+    // A removed calendar cell can lose focus before its trigger gets it back.
+    const doc = (event.target as Node).ownerDocument!
+    const view = doc.defaultView!
+    const frame = view.requestAnimationFrame(() => {
+      cancelPending = undefined
+      if (!inside(doc.activeElement)) blur(event)
+    })
+    cancelPending = () => view.cancelAnimationFrame(frame)
+  }
+
+  onScopeDispose(() => cancelPending?.())
+  return { partId, onFocusOut }
+}