@leavepulse/ui 0.70.1 → 0.71.1

package/src/components/LpTable.vue

@@ -5,7 +5,10 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAttrs, watch } from "vue"
+import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAttrs, useId, watch } from "vue"
+import { suppressPaletteDiscovery, usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
+import { menuPaletteCommands } from "./commandPalette"
+import LpDataList from "./LpDataList.vue"
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpEmptyState from "./LpEmptyState.vue"
@@ -157,6 +160,8 @@ type RowKey = string | number
 
 const props = withDefaults(
   defineProps<{
+    /** Publish loaded rows and existing row actions to the enclosing command scope. */
+    palette?: false | { id?: string; label?: string; labelKey?: keyof T }
     columns: TableColumn<T>[]
     /** The rows, for a table that holds its data. Ignored when `load` is set. */
     rows?: T[]
@@ -245,7 +250,7 @@ const props = withDefaults(
      */
     allMatching?: boolean
   }>(),
-  {
+  { palette: undefined,
     rows: () => [],
     pageSize: 25,
     skeletonRows: 5,
@@ -1075,6 +1080,34 @@ onBeforeUnmount(() => {
 const barInsetTop = computed(() =>
   props.stickyHeader && headHeight.value ? `${headHeight.value}px` : undefined,
 )
+
+const paletteScope = usePaletteScope()
+const paletteId = useId()
+suppressPaletteDiscovery()
+usePaletteCommands(() => {
+  if (props.palette === false) return []
+  const name = props.palette?.label ?? attrs["aria-label"] as string | undefined
+  if (!name) return []
+  const id = `${paletteScope?.id}/${props.palette?.id ?? paletteId}`
+  return [{
+    id, label: name, icon: "lucide:table", children: [
+      ...menuPaletteCommands(tableMenu(), `${id}/table`),
+      ...displayRows.value.map((row, index) => {
+        const menu = resolveRowMenu(props.rowMenu?.(row))
+        const rowId = `${id}/row/${keyFor(row, index)}`
+        const labelKey = props.palette && props.palette.labelKey || props.columns[0]?.key
+        return {
+          id: rowId, label: menu.title ?? String(labelKey ? row[labelKey] ?? keyFor(row, index) : keyFor(row, index)),
+          description: menu.subtitle, icon: menu.icon ?? "lucide:rows-3", image: menu.image,
+          onSelect: () => emit("rowClick", row), actions: menuPaletteCommands(menu.items, rowId),
+          previewComponent: { setup: () => () => h(LpDataList, { items: props.columns.map(column => ({
+            label: column.label, value: typeof row[column.key] === "object" ? null : String(row[column.key] ?? ""),
+          })) }) },
+        }
+      }),
+    ],
+  }]
+}, { automatic: true })
 </script>
 
 <template>

package/src/components/LpTableOfContents.vue

@@ -12,7 +12,7 @@
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
-import { scrollParent } from "../composables/scroll"
+import { atScrollEnd, scrollParent } from "../composables/scroll"
 import { usePillTransition } from "../composables/usePillTransition"
 
 export interface TocLink {
@@ -112,9 +112,7 @@ function setup() {
     const line = Math.max(props.offset, view / 4)
     for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id
     const scrolled = scroller ? scroller.scrollTop : window.scrollY
-    const end = scroller
-      ? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2
-      : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2
+    const end = atScrollEnd(headings[0])
     if (scrolled > 0 && end) current = headings[headings.length - 1]!.id
     activeId.value = current
   }

package/src/components/LpTabs.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
 import { computed, nextTick, ref, useId, watch } from "vue"
@@ -152,6 +153,12 @@ function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
   if (target instanceof HTMLElement) target.blur()
 }
+
+const paletteScope = usePaletteScope()
+usePaletteCommands(() => props.items.map(item => ({
+  id: `${paletteScope?.id}/tabs/${pillId}/${item.value}`, label: props.label ? `${props.label}: ${item.label}` : item.label,
+  icon: item.icon, disabled: item.disabled, onSelect: () => select(item.value),
+})), { automatic: true })
 </script>
 
 <template>

package/src/components/LpTagsInput.vue

@@ -13,6 +13,7 @@ export type TagsInputLabels = {
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Free-form list of short values: emails, labels, hostnames. Typing a
  * delimiter or Enter turns the text into a tag, a paste is split into many,
@@ -56,6 +57,8 @@ import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: string[]
     placeholder?: string
     /** Characters (or a RegExp) that end a tag while typing and split a paste. */
@@ -99,7 +102,7 @@ const props = withDefaults(
     /** Box height and text size, as LpInput. */
     size?: "sm" | "md" | "lg"
   }>(),
-  {
+  { palette: undefined,
     modelValue: () => [],
     delimiter: () => [",", "\n", "\t"],
     duplicates: "reject",
@@ -424,6 +427,8 @@ const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
 // the page) is not "outside" for this layer.
 const guardOutside = useOutsideGuard()
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: undefined, hint: undefined, error: undefined }) })
 </script>
 
 <template>

package/src/components/LpTextarea.vue

@@ -3,12 +3,15 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useAttrs } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
   modelValue?: string
   placeholder?: string
   rows?: number
@@ -22,7 +25,7 @@ const props = defineProps<{
    * the <textarea> for native validation.
    */
   required?: boolean
-}>()
+}>(), { palette: undefined })
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
@@ -53,6 +56,8 @@ const textareaClass = computed(() =>
     hasField.value ? "" : (attrs.class as string),
   ),
 )
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: undefined, hint: undefined, error: undefined }) })
 </script>
 
 <template>

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/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 ?? "."
+}