@leavepulse/ui 0.83.1 → 0.85.0

package/src/components/LpImageEditor.vue

@@ -50,6 +50,18 @@ import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useResizeObserver } from "../composables/useResizeObserver"
 
+/** Wording of the image editor's controls and errors. */
+export type ImageEditorLabels = {
+  rotateLeft: string
+  rotateRight: string
+  zoomIn: string
+  zoomOut: string
+  reset: string
+  canvas: string
+  failed: string
+  cors: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** The picture to work on: a file, or an http(s)/data address. */
@@ -86,12 +98,7 @@ const props = withDefaults(
      * kit cannot reach the consumer's translations. Apps with i18n pass their
      * own strings.
      */
-    labels?: Partial<
-      Record<
-        "rotateLeft" | "rotateRight" | "zoomIn" | "zoomOut" | "reset" | "canvas" | "failed" | "cors",
-        string
-      >
-    >
+    labels?: Partial<ImageEditorLabels>
     /** Fade the picture in when the editor first comes into view. */
     animate?: boolean
   }>(),
@@ -107,7 +114,7 @@ const emit = defineEmits<{
 // mount. An editor inside a dialog that opens a minute later still draws.
 const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animate })
 
-const text = useLabels(
+const text = useLabels<ImageEditorLabels>(
   "imageEditor",
   {
     rotateLeft: "Rotate left",

package/src/components/LpInput.vue

@@ -1,5 +1,10 @@
 <script lang="ts">
 export default { inheritAttrs: false }
+
+/** Wording of the input's clear button. */
+export type InputLabels = {
+  clear: string
+}
 </script>
 
 <script setup lang="ts">
@@ -61,7 +66,7 @@ const props = withDefaults(
     icon?: string
     /** Show an accessible clear button, returning focus to the input. */
     clearable?: boolean
-    labels?: Partial<{ clear: string }>
+    labels?: Partial<InputLabels>
     /**
      * Marks the label with the required indicator. The attribute still reaches
      * the underlying <input> for native validation; this only makes the field
@@ -148,7 +153,7 @@ const field = useFieldControl(() => ({
   required: props.required,
   disabled: props.disabled,
 }))
-const text = useLabels("input", { clear: "Clear" }, () => props.labels)
+const text = useLabels<InputLabels>("input", { clear: "Clear" }, () => props.labels)
 const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && !isAttrOn(attrs.readonly) && !isAttrOn(attrs.readOnly))
 const isInvalidState = computed(() => field.value.invalid)
 const shellClass = computed(() =>

package/src/components/LpInspector.vue

@@ -16,6 +16,14 @@ export interface InspectorSection {
 }
 
 export default { inheritAttrs: false }
+
+/** Wording of the inspector panel. */
+export type InspectorLabels = {
+  close: string
+  empty: string
+  resize: string
+  region: string
+}
 </script>
 
 <script setup lang="ts" generic="T">
@@ -71,14 +79,14 @@ const props = withDefaults(
     closable?: boolean
     /** Unsaved edits: `true` asks before closing, a function asks the app. */
     guard?: CloseGuard
-    labels?: Partial<{ close: string; empty: string; resize: string; region: string }>
+    labels?: Partial<InspectorLabels>
   }>(),
   { side: "right", width: 320, minWidth: 240, maxWidth: 640, closable: true, subject: undefined },
 )
 
 const open = defineModel<boolean>("open", { default: true })
 const slots = useSlots()
-const text = useLabels(
+const text = useLabels<InspectorLabels>(
   "inspector",
   { close: "Close", empty: "Nothing selected", resize: "Resize panel", region: "Details" },
   () => props.labels,

package/src/components/LpKeys.vue

@@ -12,6 +12,7 @@ import { computed } from "vue"
 import { appleModifierLabel, useAppleKeyboard } from "../composables/useHotkeys"
 import { useLabels } from "../composables/useLpConfig"
 import { comboSteps } from "./keys"
+import type { ShortcutsLabels } from "./LpShortcutsDialog.vue"
 
 const props = withDefaults(
   defineProps<{
@@ -24,7 +25,7 @@ const props = withDefaults(
   { size: "md" },
 )
 
-const text = useLabels("shortcuts", { then: "then" })
+const text = useLabels<Pick<ShortcutsLabels, "then">>("shortcuts", { then: "then" })
 const apple = useAppleKeyboard()
 
 const steps = computed(() => (Array.isArray(props.combo) ? [props.combo] : comboSteps(props.combo)))

package/src/components/LpMapPicker.vue

@@ -30,6 +30,15 @@ import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
 import { useResizeObserver } from "../composables/useResizeObserver"
 
+/** Wording of the map picker's controls. */
+export type MapPickerLabels = {
+  zoomIn: string
+  zoomOut: string
+  locate: string
+  recentre: string
+  map: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Picked point. Bind with v-model; undefined leaves the map unpinned. */
@@ -63,7 +72,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{ (e: "update:modelValue", value: LatLon): void }>()
 
-const labelSet = useLabels("mapPicker", {
+const labelSet = useLabels<MapPickerLabels>("mapPicker", {
   zoomIn: "Zoom in",
   zoomOut: "Zoom out",
   locate: "Use my location",

package/src/components/LpMediaGallery.vue

@@ -33,7 +33,16 @@ import LpIcon from "./LpIcon.vue"
 import LpLightbox from "./LpLightbox.vue"
 import VideoThumb from "./VideoThumb.vue"
 
-const DEFAULT_LABELS = {
+/** Wording of the media gallery. `{n}` and `{total}` are replaced. */
+export type MediaGalleryLabels = {
+  gallery: string
+  image: string
+  spoiler: string
+  showSpoiler: string
+  showMore: string
+}
+
+const DEFAULT_LABELS: MediaGalleryLabels = {
   /** Accessible name of the grid. */
   gallery: "Media",
   /** Name of an image without a title; `{n}` and `{total}` are replaced. */
@@ -80,7 +89,7 @@ const props = withDefaults(
      * image without one; it keeps the browser's own menu.
      */
     itemMenu?: (item: LightboxItem, index: number) => ContextMenuItemDef[]
-    labels?: Partial<typeof DEFAULT_LABELS>
+    labels?: Partial<MediaGalleryLabels>
   }>(),
   {
     columns: 3,
@@ -92,7 +101,7 @@ const props = withDefaults(
   },
 )
 
-const text = useLabels("mediaGallery", DEFAULT_LABELS, () => props.labels)
+const text = useLabels<MediaGalleryLabels>("mediaGallery", DEFAULT_LABELS, () => props.labels)
 
 /** `{n}` is the image's position, `{total}` the size of the set. */
 function fill(template: string, n: number, total = 0): string {

package/src/components/LpModal.vue

@@ -41,6 +41,11 @@ import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 const panelRef = ref<HTMLElement | null>(null)
 const { claim, release, layer } = useModalLayer({ element: () => panelRef.value?.parentElement })
 
+/** Wording of the modal's close button. */
+export type ModalLabels = {
+  close: string
+}
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -104,12 +109,12 @@ const props = withDefaults(
      * overlay the app already drives from its route.
      */
     history?: OverlayHistoryMode
-    labels?: Partial<{ close: string }>
+    labels?: Partial<ModalLabels>
   }>(),
   { size: "md", autoFocus: "auto", glass: undefined, dismissible: true, guard: undefined, history: undefined },
 )
 
-const text = useLabels("modal", { close: "Close" }, () => props.labels)
+const text = useLabels<ModalLabels>("modal", { close: "Close" }, () => props.labels)
 
 const frosted = useGlass(() => props.glass)
 

package/src/components/LpModalNav.vue

@@ -26,6 +26,11 @@ export type { SidebarItem, SidebarSection } from "./sidebar"
 
 type Breakpoint = "sm" | "md" | "lg" | "xl"
 
+/** Wording of the modal's section navigation. */
+export type ModalNavLabels = {
+  nav: string
+}
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -74,7 +79,7 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
 }>()
 
-const text = useLabels("modalNav", { nav: "Sections" })
+const text = useLabels<ModalNavLabels>("modalNav", { nav: "Sections" })
 const navName = computed(() => props.navLabel ?? text.value.nav)
 
 const navOpen = ref(false)

package/src/components/LpPagination.vue

@@ -27,6 +27,13 @@ import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
 import { useResizeObserver } from "../composables/useResizeObserver"
 
+/** Wording of the pagination controls. */
+export type PaginationLabels = {
+  nav: string
+  previous: string
+  next: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Current page, 1-based (v-model:page). */
@@ -39,12 +46,12 @@ const props = withDefaults(
     /** Pages shown on each side of the current one in the inner run. */
     siblings?: number
     disabled?: boolean
-    labels?: Partial<Record<"nav" | "previous" | "next", string>>
+    labels?: Partial<PaginationLabels>
   }>(),
   { page: 1, pageSize: 10, siblings: 1 },
 )
 
-const text = useLabels(
+const text = useLabels<PaginationLabels>(
   "pagination",
   { nav: "Pagination", previous: "Previous page", next: "Next page" },
   () => props.labels,

package/src/components/LpPaletteTheme.vue

@@ -8,9 +8,22 @@ import LpThemeProvider from "./LpThemeProvider.vue"
 import LpButton from "./LpButton.vue"
 import LpInput from "./LpInput.vue"
 
+/**
+ * Wording of the theme editor in the command palette. The scope is shared with
+ * `usePaletteTheme`, which names the command after `title`.
+ */
+export type PaletteThemeLabels = {
+  title: string
+  apply: string
+  revert: string
+  sample: string
+  action: string
+  placeholder: string
+}
+
 const props = defineProps<{ studio: PreviewableThemeStudio; hide?: ThemeStudioPart[] }>()
 suppressPaletteDiscovery()
-const text = useLabels("paletteTheme", { title: "Theme", apply: "Apply theme", revert: "Revert draft", sample: "Preview", action: "Continue", placeholder: "A field in this theme" })
+const text = useLabels<PaletteThemeLabels>("paletteTheme", { title: "Theme", apply: "Apply theme", revert: "Revert draft", sample: "Preview", action: "Continue", placeholder: "A field in this theme" })
 const snapshot = ref({ ...props.studio.state.value })
 const state = ref<StudioState>({ ...snapshot.value })
 const preview = computed(() => props.studio.preview(state.value))

package/src/components/LpRepeater.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+/** Wording of the repeater. `{index}` in `remove` is the item's position. */
+export type RepeaterLabels = {
+  add: string
+  remove: string
+  empty: string
+}
+</script>
+
 <script setup lang="ts" generic="T extends object">
 import FieldWrapper from "./FieldWrapper.vue"
 import { nextTick, ref } from "vue"
@@ -20,7 +29,7 @@ const props = defineProps<{
   disabled?: boolean
   /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
   error?: string
-  labels?: Partial<{ add: string; remove: string; empty: string }>
+  labels?: Partial<RepeaterLabels>
 }>()
 const model = defineModel<T[]>({ default: () => [] })
 defineSlots<{
@@ -29,7 +38,7 @@ defineSlots<{
 }>()
 
 const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
-const text = useLabels("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels)
+const text = useLabels<RepeaterLabels>("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels)
 const list = useRepeater({
   value: () => model.value,
   set: (items) => { model.value = items },

package/src/components/LpShortcutsDialog.vue

@@ -27,6 +27,17 @@ import {
 } from "../composables/useHotkeys"
 import { useLabels } from "../composables/useLpConfig"
 
+/**
+ * Wording of the shortcuts dialog. The scope is shared with LpKeys, which reads
+ * `then` (between the steps of a sequence such as "g then i").
+ */
+export type ShortcutsLabels = {
+  title: string
+  conflict: string
+  group: string
+  then: string
+}
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -49,7 +60,7 @@ const props = withDefaults(
   { open: false, groups: () => [], live: false, title: undefined, glass: undefined, history: undefined },
 )
 
-const text = useLabels("shortcuts", {
+const text = useLabels<Omit<ShortcutsLabels, "then">>("shortcuts", {
   title: "Keyboard shortcuts",
   conflict: "Also bound elsewhere: only one of them runs",
   group: "General",

package/src/components/LpSidebar.vue

@@ -28,6 +28,19 @@ import type { SidebarItem, SidebarSection } from "./sidebar"
 
 export type { SidebarItem, SidebarSection } from "./sidebar"
 
+/** Wording of the sidebar's landmark and controls. */
+export type SidebarLabels = {
+  nav: string
+  search: string
+  pinned: string
+  pin: string
+  unpin: string
+  expand: string
+  compact: string
+  expandRail: string
+  resize: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Active item id (v-model). Ignored when `isActive` is provided. */
@@ -55,17 +68,7 @@ const props = withDefaults(
     /** Placeholder for that field (defaults to the `search` label). */
     searchPlaceholder?: string
     /** Text overrides: `nav` names the landmark, `search` the filter field. */
-    labels?: Partial<{
-      nav: string
-      search: string
-      pinned: string
-      pin: string
-      unpin: string
-      expand: string
-      compact: string
-      expandRail: string
-      resize: string
-    }>
+    labels?: Partial<SidebarLabels>
     /** The query, when the app wants to own it (v-model:search). */
     search?: string
     /** Show a skeleton placeholder instead of the items. */
@@ -215,7 +218,7 @@ defineSlots<{
   item?: (props: { item: SidebarItem; active: boolean }) => unknown
 }>()
 
-const text = useLabels(
+const text = useLabels<SidebarLabels>(
   "sidebar",
   {
     nav: "Sidebar",

package/src/components/LpSparkline.vue

@@ -24,6 +24,16 @@ import { useLabels } from "../composables/useLpConfig"
 import { areaPath, extent, linePath, normalise, type Box } from "./chart"
 import { toneLook, type ToneName } from "./tone"
 
+/** Wording of the sparkline's states and trend. */
+export type SparklineLabels = {
+  empty: string
+  up: string
+  down: string
+  flat: string
+  latest: string
+  loading: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Oldest → newest. `null` breaks the line, as in LpChart. */
@@ -74,7 +84,7 @@ const props = withDefaults(
      * says it is an example). Off: the flat stub shows on the tour too.
      */
     sample?: boolean
-    labels?: Partial<Record<"empty" | "up" | "down" | "flat" | "latest" | "loading", string>>
+    labels?: Partial<SparklineLabels>
   }>(),
   { width: 84, height: 24, tone: "brand", smooth: 0.9, animate: true, duration: 900, sample: true },
 )
@@ -184,7 +194,7 @@ const lastPoint = computed(() => {
 const hasData = computed(() => series.value[0].values.some((v) => v != null))
 
 /* A bare <svg> is invisible to a screen reader; say the shape out loud. */
-const text = useLabels(
+const text = useLabels<SparklineLabels>(
   "sparkline",
   {
     empty: "No data",

package/src/components/LpTableOfContents.vue

@@ -23,6 +23,11 @@ export interface TocLink {
   children?: TocLink[]
 }
 
+/** Wording of the table of contents. */
+export type TableOfContentsLabels = {
+  title: string
+}
+
 const props = withDefaults(
   defineProps<{
     links: TocLink[]
@@ -35,7 +40,7 @@ const props = withDefaults(
      * near the top kept the previous section lit under it.
      */
     offset?: number
-    labels?: Partial<{ title: string }>
+    labels?: Partial<TableOfContentsLabels>
     /**
      * The bar glides under the hovered link and springs back on leave (the
      * default), as in LpTabs. False pins it to the section in view: calmer for
@@ -46,7 +51,7 @@ const props = withDefaults(
   { offset: 96, hoverFollow: true },
 )
 
-const text = useLabels("toc", { title: "On this page" }, () => props.labels)
+const text = useLabels<TableOfContentsLabels>("toc", { title: "On this page" }, () => props.labels)
 const heading = computed(() => props.title ?? text.value.title)
 
 // Every level of the tree as one ordered list; depth drives the indent, so

package/src/components/LpThemeSwitcher.vue

@@ -27,6 +27,14 @@ import LpRollingText from "./LpRollingText.vue"
 import LpShift from "./LpShift.vue"
 import LpThemeStudio, { type ThemeStudioPart } from "./LpThemeStudio.vue"
 
+/** Wording of the theme switcher. `{name}` in `trigger` is the current theme. */
+export type ThemeSwitcherLabels = {
+  trigger: string
+  system: string
+  studio: string
+  openStudio: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Active theme NAME (v-model). Falls back to the first theme. */
@@ -66,7 +74,7 @@ const props = withDefaults(
      */
     system?: { light: string | TokenSet; dark: string | TokenSet }
     /** Text overrides. `trigger` may contain `{name}`. */
-    labels?: Partial<{ trigger: string; system: string; studio: string; openStudio: string }>
+    labels?: Partial<ThemeSwitcherLabels>
     /**
      * The right-click menu ends with "Theme studio…", set apart from the
      * themes, which opens LpThemeStudio by the trigger: the theme plus brand
@@ -125,7 +133,7 @@ function keepForTrigger(event: Event) {
   }
 }
 
-const text = useLabels(
+const text = useLabels<ThemeSwitcherLabels>(
   "themeSwitcher",
   {
     trigger: "Theme: {name}. Click to switch, right-click to choose.",

package/src/components/LpToaster.vue

@@ -21,8 +21,15 @@ import LpIcon from "./LpIcon.vue"
 import { toneLook } from "./tone"
 import { nodeWindow, usePortalTarget, useView, viewDocument, viewWindow } from "../composables/useView"
 
-const props = defineProps<{ labels?: Partial<{ dismiss: string; copy: string; copied: string }> }>()
-const text = useLabels("toast", { dismiss: "Dismiss", copy: "Copy message", copied: "Copied" }, () => props.labels)
+/** Wording of a toast's controls. */
+export type ToasterLabels = {
+  dismiss: string
+  copy: string
+  copied: string
+}
+
+const props = defineProps<{ labels?: Partial<ToasterLabels> }>()
+const text = useLabels<ToasterLabels>("toast", { dismiss: "Dismiss", copy: "Copy message", copied: "Copied" }, () => props.labels)
 
 const { queue, dismiss } = useToast()
 

package/src/components/LpTour.vue

@@ -75,12 +75,24 @@ import type { Box } from "../composables/spatialNav"
 import { holeClip, holeOf, panelsAround } from "./tour"
 import { usePortalTarget } from "../composables/useView"
 
+/** Wording of the tour. `{n}` and `{total}` in `progress` are replaced. */
+export type TourLabels = {
+  next: string
+  back: string
+  done: string
+  close: string
+  progress: string
+  perform: string
+  tryIt: string
+  example: string
+}
+
 const props = withDefaults(
   defineProps<{
     steps: TourStep[]
     /** Room around the target inside the lit hole, px. */
     padding?: number
-    labels?: Partial<typeof DEFAULT_LABELS>
+    labels?: Partial<TourLabels>
   }>(),
   { padding: 6 },
 )
@@ -95,7 +107,7 @@ const emit = defineEmits<{
 const open = defineModel<boolean>("open", { default: false })
 const index = defineModel<number>("step", { default: 0 })
 
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS: TourLabels = {
   next: "Next",
   back: "Back",
   done: "Done",
@@ -105,7 +117,7 @@ const DEFAULT_LABELS = {
   tryIt: "Try it: press the highlighted control.",
   example: "This is an example: there are none right now.",
 }
-const labels = useLabels("tour", DEFAULT_LABELS, () => props.labels)
+const labels = useLabels<TourLabels>("tour", DEFAULT_LABELS, () => props.labels)
 
 const WAIT_MS = 800
 const TRY_SETTLE_MS = 120

package/src/components/LpUptimeBar.vue

@@ -22,6 +22,9 @@ import { DEFAULT_UNIT_LABELS, formatTime, toEpoch, type TimeUnitLabels } from ".
 import { UPTIME_SEVERITY, uptimeFigure, uptimeRange, uptimeShare, type UptimeSegment, type UptimeStatus } from "./uptimeBar"
 
 
+/** Wording of the uptime bar: one name per status, plus its own states. */
+export type UptimeBarLabels = Record<UptimeStatus | "empty" | "loading" | "uptime", string>
+
 const props = withDefaults(
   defineProps<{
     /** Oldest → newest. Each entry is one slice of the timeline. */
@@ -48,7 +51,7 @@ const props = withDefaults(
      */
     colors?: Partial<Record<UptimeStatus, string>>
     /** Status names, for the tooltip and screen readers. */
-    labels?: Partial<Record<UptimeStatus | "loading" | "uptime", string>>
+    labels?: Partial<UptimeBarLabels>
     /**
      * 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
@@ -83,7 +86,7 @@ const opacityFor = (status: UptimeStatus): number =>
 const colorFor = (status: UptimeStatus): string =>
   props.colors?.[status] ?? defaultColor[status]
 
-const statusLabel = useLabels(
+const statusLabel = useLabels<UptimeBarLabels>(
   "uptimeBar",
   {
     operational: "Operational",