@leavepulse/ui 0.83.0 → 0.85.0

package/dist/locales/uk.d.ts

@@ -0,0 +1,165 @@
+import type { AddressLabels } from "../components/address";
+import type { CalendarLabels } from "../components/calendar";
+import type { PaletteLabels } from "../components/LpCommandPalette.vue";
+import type { NOTIFICATION_LABELS } from "../components/notifications";
+import type { StatusLabels } from "../components/status";
+import type { TimeUnitLabels } from "../components/timeSpan";
+import type { CloseGuardLabels } from "../composables/useCloseGuard";
+import type { PaletteControlLabels } from "../composables/usePaletteCommands";
+import type { HintExampleLabels } from "../components/HintSampleTag.vue";
+import type { ActionBarLabels } from "../components/LpActionBar.vue";
+import type { ActivityLineLabels } from "../components/LpActivityLine.vue";
+import type { AppShellLabels } from "../components/LpAppShell.vue";
+import type { AutocompleteLabels } from "../components/LpAutocomplete.vue";
+import type { BadgeLabels } from "../components/LpBadge.vue";
+import type { BottomNavLabels } from "../components/LpBottomNav.vue";
+import type { BreadcrumbsLabels } from "../components/LpBreadcrumbs.vue";
+import type { ButtonLabels } from "../components/LpButton.vue";
+import type { ChartText } from "../components/LpChart.vue";
+import type { CodeBlockLabels } from "../components/LpCodeBlock.vue";
+import type { CodeDisplayLabels } from "../components/LpCodeDisplay.vue";
+import type { ColorPickerLabels } from "../components/LpColorPicker.vue";
+import type { ConfirmLabels } from "../components/LpConfirmDialog.vue";
+import type { ContextSwitcherLabels } from "../components/LpContextSwitcher.vue";
+import type { CopyButtonLabels } from "../components/LpCopyButton.vue";
+import type { CountdownLabels } from "../components/LpCountdown.vue";
+import type { DataListLabels } from "../components/LpDataList.vue";
+import type { DatePickerLabels } from "../components/LpDatePicker.vue";
+import type { DateRangePickerLabels } from "../components/LpDateRangePicker.vue";
+import type { DrawerLabels } from "../components/LpDrawer.vue";
+import type { DropzoneLabels } from "../components/LpDropzone.vue";
+import type { EditableLabels } from "../components/LpEditable.vue";
+import type { FileTreeLabels } from "../components/LpFileTree.vue";
+import type { GaugeLabels } from "../components/LpGauge.vue";
+import type { HintLayerLabels } from "../components/LpHintLayer.vue";
+import type { HintsLabels } from "../components/LpHints.vue";
+import type { ImageEditorLabels } from "../components/LpImageEditor.vue";
+import type { InputLabels } from "../components/LpInput.vue";
+import type { InspectorLabels } from "../components/LpInspector.vue";
+import type { LightboxLabels } from "../components/LpLightbox.vue";
+import type { LoaderLabels } from "../components/LpLoader.vue";
+import type { LogInspectorLabels } from "../components/LpLogInspector.vue";
+import type { LogViewerLabels } from "../components/LpLogViewer.vue";
+import type { MapPickerLabels } from "../components/LpMapPicker.vue";
+import type { MediaGalleryLabels } from "../components/LpMediaGallery.vue";
+import type { ModalLabels } from "../components/LpModal.vue";
+import type { ModalNavLabels } from "../components/LpModalNav.vue";
+import type { NumberFieldLabels } from "../components/LpNumberField.vue";
+import type { PaginationLabels } from "../components/LpPagination.vue";
+import type { PaletteThemeLabels } from "../components/LpPaletteTheme.vue";
+import type { PasswordInputLabels } from "../components/LpPasswordInput.vue";
+import type { PhoneInputLabels } from "../components/LpPhoneInput.vue";
+import type { PieText } from "../components/LpPie.vue";
+import type { PipelineLabels } from "../components/LpPipeline.vue";
+import type { QuotaLabels } from "../components/LpQuota.vue";
+import type { RangeCalendarLabels } from "../components/LpRangeCalendar.vue";
+import type { RepeaterLabels } from "../components/LpRepeater.vue";
+import type { SecretFieldLabels } from "../components/LpSecretField.vue";
+import type { SelectLabels } from "../components/LpSelect.vue";
+import type { ShortcutsLabels } from "../components/LpShortcutsDialog.vue";
+import type { SidebarLabels } from "../components/LpSidebar.vue";
+import type { SparklineLabels } from "../components/LpSparkline.vue";
+import type { TableLabels } from "../components/LpTable.vue";
+import type { TableOfContentsLabels } from "../components/LpTableOfContents.vue";
+import type { TagsInputLabels } from "../components/LpTagsInput.vue";
+import type { ThemeStudioLabels } from "../components/LpThemeStudio.vue";
+import type { ThemeSwitcherLabels } from "../components/LpThemeSwitcher.vue";
+import type { ToasterLabels } from "../components/LpToaster.vue";
+import type { TopologyLabels } from "../components/LpTopologyCanvas.vue";
+import type { TourLabels } from "../components/LpTour.vue";
+import type { UptimeBarLabels } from "../components/LpUptimeBar.vue";
+import type { VideoCompressLabels } from "../components/LpVideoCompress.vue";
+import type { VideoPlayerLabels } from "../components/LpVideoPlayer.vue";
+import type { VideoTrimLabels } from "../components/LpVideoTrim.vue";
+import type { WindowLabels } from "../components/LpWindow.vue";
+import type { WorkspaceSwitcherLabels } from "../components/LpWorkspaceSwitcher.vue";
+/**
+ * Every declared key of a labels type, required, and nothing else: an index
+ * signature (`[key: string]: string`) is dropped so a misspelt key is an
+ * excess-property error instead of being silently accepted.
+ */
+export type FullLabels<T> = {
+    [K in keyof T as string extends K ? never : K]-?: string;
+};
+/** One full label set per scope: the shape of a complete language pack. */
+export interface KitLabels {
+    actionBar: FullLabels<ActionBarLabels>;
+    activityLine: FullLabels<ActivityLineLabels>;
+    addressInput: FullLabels<AddressLabels>;
+    appShell: FullLabels<AppShellLabels>;
+    autocomplete: FullLabels<AutocompleteLabels>;
+    badge: FullLabels<BadgeLabels>;
+    bottomNav: FullLabels<BottomNavLabels>;
+    breadcrumbs: FullLabels<BreadcrumbsLabels>;
+    button: FullLabels<ButtonLabels>;
+    calendar: FullLabels<CalendarLabels>;
+    chart: FullLabels<ChartText>;
+    closeGuard: FullLabels<CloseGuardLabels>;
+    codeBlock: FullLabels<CodeBlockLabels>;
+    codeDisplay: FullLabels<CodeDisplayLabels>;
+    colorPicker: FullLabels<ColorPickerLabels>;
+    confirm: FullLabels<ConfirmLabels>;
+    contextSwitcher: FullLabels<ContextSwitcherLabels>;
+    copyButton: FullLabels<CopyButtonLabels>;
+    countdown: FullLabels<CountdownLabels>;
+    dataList: FullLabels<DataListLabels>;
+    datePicker: FullLabels<DatePickerLabels>;
+    dateRangePicker: FullLabels<DateRangePickerLabels>;
+    drawer: FullLabels<DrawerLabels>;
+    dropzone: FullLabels<DropzoneLabels>;
+    editable: FullLabels<EditableLabels & {
+        required: string;
+    }>;
+    fileTree: FullLabels<FileTreeLabels>;
+    gauge: FullLabels<GaugeLabels>;
+    hintExample: FullLabels<HintExampleLabels>;
+    hintLayer: FullLabels<HintLayerLabels>;
+    hints: FullLabels<HintsLabels>;
+    imageEditor: FullLabels<ImageEditorLabels>;
+    input: FullLabels<InputLabels>;
+    inspector: FullLabels<InspectorLabels>;
+    lightbox: FullLabels<LightboxLabels>;
+    loader: FullLabels<LoaderLabels>;
+    logInspector: FullLabels<LogInspectorLabels>;
+    logViewer: FullLabels<LogViewerLabels>;
+    mapPicker: FullLabels<MapPickerLabels>;
+    mediaGallery: FullLabels<MediaGalleryLabels>;
+    modal: FullLabels<ModalLabels>;
+    modalNav: FullLabels<ModalNavLabels>;
+    /** The deprecated keys of `NotificationLabels` are no longer read, so not required. */
+    notifications: FullLabels<typeof NOTIFICATION_LABELS>;
+    numberField: FullLabels<NumberFieldLabels>;
+    pagination: FullLabels<PaginationLabels>;
+    palette: FullLabels<PaletteLabels>;
+    paletteControl: FullLabels<PaletteControlLabels>;
+    paletteTheme: FullLabels<PaletteThemeLabels>;
+    passwordInput: FullLabels<PasswordInputLabels>;
+    phoneInput: FullLabels<PhoneInputLabels>;
+    pie: FullLabels<PieText>;
+    pipeline: FullLabels<PipelineLabels>;
+    quota: FullLabels<QuotaLabels>;
+    rangeCalendar: FullLabels<RangeCalendarLabels>;
+    repeater: FullLabels<RepeaterLabels>;
+    secretField: FullLabels<SecretFieldLabels>;
+    select: FullLabels<SelectLabels>;
+    shortcuts: FullLabels<ShortcutsLabels>;
+    sidebar: FullLabels<SidebarLabels>;
+    sparkline: FullLabels<SparklineLabels>;
+    status: FullLabels<StatusLabels>;
+    table: FullLabels<TableLabels>;
+    tagsInput: FullLabels<TagsInputLabels>;
+    themeStudio: FullLabels<ThemeStudioLabels>;
+    themeSwitcher: FullLabels<ThemeSwitcherLabels>;
+    time: FullLabels<TimeUnitLabels>;
+    toast: FullLabels<ToasterLabels>;
+    toc: FullLabels<TableOfContentsLabels>;
+    topology: FullLabels<TopologyLabels>;
+    tour: FullLabels<TourLabels>;
+    uptimeBar: FullLabels<UptimeBarLabels>;
+    videoCompress: FullLabels<VideoCompressLabels>;
+    videoPlayer: FullLabels<VideoPlayerLabels>;
+    videoTrim: FullLabels<VideoTrimLabels>;
+    window: FullLabels<WindowLabels>;
+    workspaces: FullLabels<WorkspaceSwitcherLabels>;
+}
+export declare const uk: KitLabels;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.83.0",
+  "version": "0.85.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -37,7 +37,10 @@
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
     },
-    "./dist/*": "./dist/*"
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*"
+    }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -117,6 +120,7 @@
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
     "libphonenumber-js": "^1.12.0",
+    "mediabunny": "^1.65.2",
     "tailwind-merge": "^3.6.0",
     "vaul-vue": "^0.4.1"
   }

package/src/component-names.ts

@@ -140,6 +140,7 @@ export const COMPONENT_NAMES = [
   "LpTypewriter",
   "LpUptimeBar",
   "LpVideoBackdrop",
+  "LpVideoCompress",
   "LpVideoPlayer",
   "LpVideoTrim",
   "LpWindow",

package/src/components/HintSampleTag.vue

@@ -6,9 +6,14 @@
  */
 import { useLabels } from "../composables/useLpConfig"
 
-const props = defineProps<{ labels?: Partial<{ badge: string }> }>()
+/** Wording of the example tag. */
+export type HintExampleLabels = {
+  badge: string
+}
 
-const labels = useLabels("hintExample", { badge: "Example" }, () => props.labels)
+const props = defineProps<{ labels?: Partial<HintExampleLabels> }>()
+
+const labels = useLabels<HintExampleLabels>("hintExample", { badge: "Example" }, () => props.labels)
 </script>
 
 <template>

package/src/components/LpActionBar.vue

@@ -50,6 +50,11 @@ export interface ActionBarAction {
   hotkey?: string
 }
 
+/** Wording of the action bar's own controls. */
+export type ActionBarLabels = {
+  dismiss: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Shown or not (v-model:open, or a plain :open). */
@@ -97,7 +102,7 @@ const props = withDefaults(
     maxWidth?: string
     /** Accessible name for the landmark. Falls back to `title`. */
     ariaLabel?: string
-    labels?: Partial<{ dismiss: string }>
+    labels?: Partial<ActionBarLabels>
   }>(),
   {
     open: true,
@@ -113,7 +118,7 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
-const text = useLabels("actionBar", { dismiss: "Dismiss" }, () => props.labels)
+const text = useLabels<ActionBarLabels>("actionBar", { dismiss: "Dismiss" }, () => props.labels)
 
 // The last action is the primary one unless the caller has said otherwise; the
 // rest default to `ghost` so a bar with three buttons still has one obvious

package/src/components/LpActivityLine.vue

@@ -25,6 +25,11 @@ import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { meterFraction, TONE_COLOR, type MeterTone } from "./meter"
 
+/** Wording of the activity line. */
+export type ActivityLineLabels = {
+  busy: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Work is in flight. Going false finishes the line and fades it out. */
@@ -46,12 +51,12 @@ const props = withDefaults(
      * line at all: a flash of activity for a 90 ms request is noise.
      */
     delay?: number
-    labels?: Partial<{ busy: string }>
+    labels?: Partial<ActivityLineLabels>
   }>(),
   { active: true, value: null, max: 100, tone: "brand", placement: "top", height: 2, delay: 150 },
 )
 
-const text = useLabels("activityLine", { busy: "Loading" }, () => props.labels)
+const text = useLabels<ActivityLineLabels>("activityLine", { busy: "Loading" }, () => props.labels)
 
 /*
  * Whether it is up at all is the same question LpLoader answers, so it is

package/src/components/LpAppShell.vue

@@ -3,6 +3,15 @@
 // appended to it, so opt out of the automatic pass-through that would add it
 // a second time, unmerged.
 export default { inheritAttrs: false }
+
+/** Wording of the shell's own controls and landmarks. */
+export type AppShellLabels = {
+  openMenu: string
+  skipToContent: string
+  backToTop: string
+  aside: string
+  contextNav: string
+}
 </script>
 
 <script setup lang="ts">
@@ -151,7 +160,7 @@ const props = withDefaults(
     /** Loading skeleton for the nav. */
     loading?: boolean
     /** Text overrides: the burger's name and the skip link. */
-    labels?: Partial<{ openMenu: string; skipToContent: string; backToTop: string; aside: string; contextNav: string }>
+    labels?: Partial<AppShellLabels>
     /** Icon-only rail (v-model:compact). Forwarded to LpSidebar. */
     compact?: boolean
     /** The person sizes the rail and folds it to icons. Forwarded to LpSidebar. */
@@ -292,7 +301,7 @@ const pageTitle = computed(() => {
 // Its own state when the app does not bind it: the shell's burger must open
 // the drawer either way. v-model:open still controls it from outside.
 const drawerOpen = defineModel<boolean>("open", { default: false })
-const text = useLabels(
+const text = useLabels<AppShellLabels>(
   "appShell",
   { openMenu: "Open menu", skipToContent: "Skip to content", backToTop: "Back to top", aside: "Details", contextNav: "In this section" },
   () => props.labels,

package/src/components/LpBadge.vue

@@ -2,6 +2,11 @@
 // The root class is merged with the consumer's (useMergedClass), so the raw
 // `class` must not also land on the span unmerged.
 export default { inheritAttrs: false }
+
+/** Wording of the badge's remove button. */
+export type BadgeLabels = {
+  remove: string
+}
 </script>
 
 <script setup lang="ts">
@@ -94,7 +99,7 @@ defineSlots<{
   remove?: () => unknown
 }>()
 
-const text = useLabels("badge", { remove: "Remove" })
+const text = useLabels<BadgeLabels>("badge", { remove: "Remove" })
 
 const classes = useMergedClass(() => badge({ tone: props.tone, size: props.size, removable: props.removable }))
 

package/src/components/LpBottomNav.vue

@@ -19,6 +19,12 @@ import LpTabFace from "./LpTabFace.vue"
 import type { SidebarItem } from "./sidebar"
 import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "./tabs"
 
+/** Wording of the bottom navigation. */
+export type BottomNavLabels = {
+  nav: string
+  more: string
+}
+
 const props = withDefaults(
   defineProps<{
     items: SidebarItem[]
@@ -34,7 +40,7 @@ const props = withDefaults(
     /** The id of what "More" opens, while it is in the page. */
     moreControls?: string
     label?: string
-    labels?: Partial<{ nav: string; more: string }>
+    labels?: Partial<BottomNavLabels>
   }>(),
   { more: false, moreActive: false, moreExpanded: false },
 )
@@ -44,7 +50,7 @@ const emit = defineEmits<{
   (e: "more"): void
 }>()
 
-const text = useLabels("bottomNav", { nav: "Main", more: "More" }, () => props.labels)
+const text = useLabels<BottomNavLabels>("bottomNav", { nav: "Main", more: "More" }, () => props.labels)
 const linkComponent = useLinkComponent()
 const pillTransition = usePillTransition()
 const markerId = `lp-bottom-nav-${useId()}`

package/src/components/LpBreadcrumbs.vue

@@ -24,6 +24,11 @@ export interface Crumb {
   icon?: string
 }
 
+/** Wording of the breadcrumb landmark. */
+export type BreadcrumbsLabels = {
+  nav: string
+}
+
 const props = defineProps<{
   items: Crumb[]
   /**
@@ -31,11 +36,11 @@ const props = defineProps<{
    * link component from provideLpConfig and other hrefs a plain <a>.
    */
   as?: string | Component
-  labels?: Partial<{ nav: string }>
+  labels?: Partial<BreadcrumbsLabels>
 }>()
 defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
 
-const text = useLabels("breadcrumbs", { nav: "Breadcrumb" }, () => props.labels)
+const text = useLabels<BreadcrumbsLabels>("breadcrumbs", { nav: "Breadcrumb" }, () => props.labels)
 const linkComponent = useLinkComponent()
 
 function linkOf(item: Crumb) {

package/src/components/LpButton.vue

@@ -2,6 +2,11 @@
 // The consumer's `class` is merged into the root's own rather than appended,
 // so `class="h-12"` or `class="px-6"` beats the size's defaults.
 export default { inheritAttrs: false }
+
+/** Wording of the button's menu group. */
+export type ButtonLabels = {
+  group: string
+}
 </script>
 
 <script setup lang="ts">
@@ -133,7 +138,7 @@ const props = withDefaults(
     hotkey?: string
     /** The key reference's section for `hotkey`. */
     hotkeyGroup?: string
-    labels?: Partial<{ group: string }>
+    labels?: Partial<ButtonLabels>
   }>(),
   { palette: undefined, type: "button" },
 )
@@ -145,7 +150,7 @@ const emit = defineEmits<{
   (e: "error", error: unknown): void
 }>()
 
-const labels = useLabels("button", { group: "Actions" }, () => props.labels)
+const labels = useLabels<ButtonLabels>("button", { group: "Actions" }, () => props.labels)
 const toast = useToast()
 const attrs = useAttrs()
 const instance = getCurrentInstance()

package/src/components/LpCodeBlock.vue

@@ -29,6 +29,17 @@ import LpCopyButton from "./LpCopyButton.vue"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
+/** Wording of the code block. `{n}` in `lines` is the line count. */
+export type CodeBlockLabels = {
+  unlock: string
+  lock: string
+  copy: string
+  copied: string
+  imports: string
+  details: string
+  lines: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** The code (v-model when editable). */
@@ -50,7 +61,7 @@ const props = withDefaults(
     height?: string
     /** Auto-collapse a leading import/package block (no markers needed). */
     foldImports?: boolean
-    labels?: Partial<Record<"unlock" | "lock" | "copy" | "copied" | "imports" | "details" | "lines", string>>
+    labels?: Partial<CodeBlockLabels>
   }>(),
   {
     lang: "plain",
@@ -68,7 +79,7 @@ const emit = defineEmits<{
   (e: "update:locked", value: boolean): void
 }>()
 
-const text = useLabels(
+const text = useLabels<CodeBlockLabels>(
   "codeBlock",
   {
     unlock: "Unlock to edit",

package/src/components/LpContextSwitcher.vue

@@ -17,6 +17,12 @@ import LpIcon from "./LpIcon.vue"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 import type { AppContext } from "./sidebar"
 
+/** Wording of the context switcher. `{label}` is the current context. */
+export type ContextSwitcherLabels = {
+  switch: string
+  title: string
+}
+
 const props = withDefaults(
   defineProps<{
     contexts: AppContext[]
@@ -24,14 +30,14 @@ const props = withDefaults(
     modelValue?: string
     /** The icon rail: the trigger is a square with the icon or an initial. */
     compact?: boolean
-    labels?: Partial<{ switch: string; title: string }>
+    labels?: Partial<ContextSwitcherLabels>
   }>(),
   { compact: false },
 )
 
 const emit = defineEmits<{ (e: "update:modelValue", id: string): void }>()
 
-const text = useLabels("contextSwitcher", { switch: "{label}, switch", title: "Switch to" }, () => props.labels)
+const text = useLabels<ContextSwitcherLabels>("contextSwitcher", { switch: "{label}, switch", title: "Switch to" }, () => props.labels)
 
 const current = computed(() => props.contexts.find((c) => c.id === props.modelValue) ?? props.contexts[0])
 const initial = computed(() => [...(current.value?.label ?? "")][0] ?? "")

package/src/components/LpDrawer.vue

@@ -7,6 +7,11 @@ import { ref as sharedRef, type Ref } from "vue"
 const EDGE_KEY = Symbol.for("@leavepulse/ui:drawer-edge-owner")
 type GlobalWithEdge = typeof globalThis & { [EDGE_KEY]?: Ref<symbol | null> }
 const edgeOwner = ((globalThis as GlobalWithEdge)[EDGE_KEY] ??= sharedRef<symbol | null>(null))
+
+/** Wording of the drawer's close button. */
+export type DrawerLabels = {
+  close: string
+}
 </script>
 
 <script setup lang="ts">
@@ -142,7 +147,7 @@ const props = withDefaults(
      * overlay the app already drives from its route.
      */
     history?: OverlayHistoryMode
-    labels?: Partial<{ close: string }>
+    labels?: Partial<DrawerLabels>
   }>(),
   {
     history: undefined,
@@ -159,7 +164,7 @@ const props = withDefaults(
 )
 
 const frosted = useGlass(() => props.glass)
-const text = useLabels("drawer", { close: "Close" }, () => props.labels)
+const text = useLabels<DrawerLabels>("drawer", { close: "Close" }, () => props.labels)
 
 const emit = defineEmits<{
   (e: "update:open", value: boolean): void

package/src/components/LpDropzone.vue

@@ -48,6 +48,15 @@ import { inTextField } from "../composables/textEntry"
 import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
 
 
+/** Wording of the dropzone's link entry. */
+export type DropzoneLabels = {
+  orLink: string
+  placeholder: string
+  done: string
+  keys: string
+  invalid: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Same syntax as the input's: "image/*", ".yaml,.yml". */
@@ -89,7 +98,7 @@ const props = withDefaults(
      * "or a link". Arrives as the `link` event.
      */
     links?: boolean
-    labels?: Partial<{ orLink: string; placeholder: string; done: string; keys: string; invalid: string }>
+    labels?: Partial<DropzoneLabels>
   }>(),
   {
     accept: "",
@@ -120,7 +129,7 @@ const emit = defineEmits<{
   (e: "link", url: string): void
 }>()
 
-const labels = useLabels(
+const labels = useLabels<DropzoneLabels>(
   "dropzone",
   {
     orLink: "or a link",

package/src/components/LpHintExample.vue

@@ -32,14 +32,14 @@
  */
 import { computed, watch } from "vue"
 import { hints } from "../composables/useHints"
-import HintSampleTag from "./HintSampleTag.vue"
+import HintSampleTag, { type HintExampleLabels } from "./HintSampleTag.vue"
 import LpCollapse from "./LpCollapse.vue"
 
 const props = defineProps<{
   /** The hint id this stands in for, as in `v-hint`, or several for a sample with parts. */
   hint: string | string[]
   inline?: boolean
-  labels?: Partial<{ badge: string }>
+  labels?: Partial<HintExampleLabels>
 }>()
 
 const ids = computed(() => (Array.isArray(props.hint) ? props.hint : [props.hint]))

package/src/components/LpHintLayer.vue

@@ -24,6 +24,12 @@ import LpBadge from "./LpBadge.vue"
 import LpButton from "./LpButton.vue"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
+/** Wording of a hint note. */
+export type HintLayerLabels = {
+  gotIt: string
+  badge: string
+}
+
 const props = withDefaults(
   defineProps<{
     /** Ids to mark, most important first. */
@@ -31,15 +37,15 @@ const props = withDefaults(
     notes: Record<string, HintNote>
     /** At most this many dots at once, so a page full of news stays calm. */
     limit?: number
-    labels?: Partial<typeof DEFAULT_LABELS>
+    labels?: Partial<HintLayerLabels>
   }>(),
   { limit: 3 },
 )
 
 const emit = defineEmits<{ (e: "read", id: string): void }>()
 
-const DEFAULT_LABELS = { gotIt: "Got it", badge: "New" }
-const labels = useLabels("hintLayer", DEFAULT_LABELS, () => props.labels)
+const DEFAULT_LABELS: HintLayerLabels = { gotIt: "Got it", badge: "New" }
+const labels = useLabels<HintLayerLabels>("hintLayer", DEFAULT_LABELS, () => props.labels)
 
 const OPEN_DELAY_MS = 350
 

package/src/components/LpHints.vue

@@ -16,12 +16,26 @@ import LpActionBar, { type ActionBarAction } from "./LpActionBar.vue"
 import LpHintLayer from "./LpHintLayer.vue"
 import LpTour from "./LpTour.vue"
 
+/** Wording of the hint offers. `{page}` is the page's name. */
+export type HintsLabels = {
+  tourTitle: string
+  tourText: string
+  assignedTitle: string
+  assignedText: string
+  newsTitle: string
+  show: string
+  notNow: string
+  never: string
+  gotIt: string
+  noThanks: string
+}
+
 const props = defineProps<{
   system: HintSystem
-  labels?: Partial<typeof DEFAULT_LABELS>
+  labels?: Partial<HintsLabels>
 }>()
 
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS: HintsLabels = {
   tourTitle: "New to {page}?",
   tourText: "A one-minute look at what you can do here.",
   assignedTitle: "You were asked to look at {page}",
@@ -33,7 +47,7 @@ const DEFAULT_LABELS = {
   gotIt: "Got it",
   noThanks: "No thanks",
 }
-const labels = useLabels("hints", DEFAULT_LABELS, () => props.labels)
+const labels = useLabels<HintsLabels>("hints", DEFAULT_LABELS, () => props.labels)
 
 provideHintSystem(props.system)