@leavepulse/ui 0.16.2 → 0.17.1

package/src/components/LpNotificationBell.vue

@@ -31,6 +31,22 @@ export interface NotificationItem {
   read?: boolean
 }
 
+/**
+ * Every user-facing string the bell renders on its own. Apps with i18n pass
+ * their translations in; the English defaults keep the component usable bare.
+ * Without this the header/row menus would be hardcoded English in every locale.
+ */
+export interface NotificationLabels {
+  title?: string
+  markAllRead?: string
+  markAsRead?: string
+  markAsUnread?: string
+  open?: string
+  dismiss?: string
+  empty?: string
+  ariaLabel?: string
+}
+
 const props = withDefaults(
   defineProps<{
     items?: NotificationItem[]
@@ -43,10 +59,30 @@ const props = withDefaults(
     maxBadge?: number
     /** Right-click menu items; overrides the built-in quick actions. */
     menuItems?: ContextMenuItemDef[]
+    /** Translations for the strings the bell renders itself. */
+    labels?: NotificationLabels
+    /**
+     * Formats `item.createdAt` for display. Defaults to a compact English
+     * relative time ("just now", "5m", "3h"); pass your own to localise it.
+     */
+    formatTime?: (iso: string) => string
   }>(),
   { items: () => [], maxBadge: 9 },
 )
 
+// Single lookup for every label, so the template never repeats the fallbacks.
+// `title` stays a top-level prop for compatibility and wins over labels.title.
+const l = computed(() => ({
+  title: props.title ?? props.labels?.title ?? "Notifications",
+  markAllRead: props.labels?.markAllRead ?? "Mark all read",
+  markAsRead: props.labels?.markAsRead ?? "Mark as read",
+  markAsUnread: props.labels?.markAsUnread ?? "Mark as unread",
+  open: props.labels?.open ?? "Open",
+  dismiss: props.labels?.dismiss ?? "Dismiss",
+  empty: props.emptyLabel ?? props.labels?.empty ?? "No notifications",
+  ariaLabel: props.labels?.ariaLabel ?? props.labels?.title ?? "Notifications",
+}))
+
 // Popover open state. A defineModel (not a plain `open` prop) gives a local
 // fallback, so the bell still opens when the consumer only listens to
 // @update:open without binding :open — otherwise the popover is stuck in
@@ -77,7 +113,7 @@ const hasUnread = computed(() => unread.value > 0)
 const contextMenu = computed<ContextMenuItemDef[]>(() =>
   props.menuItems ?? [
     {
-      label: "Mark all read",
+      label: l.value.markAllRead,
       icon: "lucide:check-check",
       disabled: !hasUnread.value,
       onSelect: () => emit("markAllRead"),
@@ -97,26 +133,26 @@ function rowMenu(item: NotificationItem): ContextMenuItemDef[] {
   const actions: ContextMenuItemDef[] = []
   if (item.read) {
     actions.push({
-      label: "Mark as unread",
+      label: l.value.markAsUnread,
       icon: "lucide:dot",
       onSelect: () => emit("markUnread", item.id),
     })
   } else {
     actions.push({
-      label: "Mark as read",
+      label: l.value.markAsRead,
       icon: "lucide:check",
       onSelect: () => emit("markRead", item.id),
     })
   }
   if (item.link) {
     actions.push({
-      label: "Open",
+      label: l.value.open,
       icon: "lucide:external-link",
       onSelect: () => emit("select", item),
     })
   }
   actions.push({
-    label: "Dismiss",
+    label: l.value.dismiss,
     icon: "lucide:x",
     danger: true,
     separatorBefore: true,
@@ -126,8 +162,10 @@ function rowMenu(item: NotificationItem): ContextMenuItemDef[] {
 }
 
 // Compact relative time ("just now", "5m", "3h", "2d"); falls back to a date.
+// A `formatTime` prop takes over entirely — that's the localisation seam.
 function timeAgo(iso?: string): string {
   if (!iso) return ""
+  if (props.formatTime) return props.formatTime(iso)
   const then = new Date(iso).getTime()
   if (Number.isNaN(then)) return ""
   const secs = Math.max(0, Math.round((Date.now() - then) / 1000))
@@ -160,7 +198,7 @@ function timeAgo(iso?: string): string {
           variant="ghost"
           size="sm"
           class="relative"
-          aria-label="Notifications"
+          :aria-label="l.ariaLabel"
           @click="open = !open"
         >
           <LpIcon name="lucide:bell" :size="18" />
@@ -176,14 +214,14 @@ function timeAgo(iso?: string): string {
     </template>
 
     <header class="flex items-center justify-between gap-2 px-3 py-2.5">
-      <span class="text-sm font-semibold">{{ title ?? "Notifications" }}</span>
+      <span class="text-sm font-semibold">{{ l.title }}</span>
       <button
         v-if="hasUnread"
         type="button"
         class="rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
         @click="emit('markAllRead')"
       >
-        Mark all read
+        {{ l.markAllRead }}
       </button>
     </header>
 
@@ -194,7 +232,7 @@ function timeAgo(iso?: string): string {
     <LpEmptyState
       v-else-if="!items.length"
       icon="lucide:bell-off"
-      :title="emptyLabel ?? 'No notifications'"
+      :title="l.empty"
       class="px-3 py-10"
     />
 

package/src/components/LpScrollArea.vue

@@ -59,7 +59,13 @@ const barFade =
 </script>
 
 <template>
-  <ScrollAreaRoot class="relative overflow-hidden" type="hover" :scroll-hide-delay="500">
+  <!-- A flex column, not a plain block: the viewport below sizes itself with
+       `flex-1 min-h-0` rather than `height:100%`. A percentage height resolves
+       against the root's own height, which in the common case — a root stretched
+       by `flex-1` inside a capped panel — is itself content-derived, so the
+       viewport grew to the full content height and scrolled nothing while the
+       root clipped the overflow. -->
+  <ScrollAreaRoot class="relative flex flex-col overflow-hidden" type="hover" :scroll-hide-delay="500">
     <!-- The bar itself is a pointer target far wider than it looks: the visible
          rail is the thumb, sized below, while the track pads it out to a
          grabbable strip. A 4px-wide hit area is near-impossible to catch with a
@@ -94,7 +100,7 @@ const barFade =
 
     <ScrollAreaViewport
       ref="viewportRef"
-      class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
+      class="w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0"
       :class="[
         instant ? '' : 'scroll-smooth motion-reduce:scroll-auto',
         fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : '',

package/src/components/LpThemeSwitcher.vue

@@ -24,6 +24,13 @@ const props = withDefaults(
     modelValue?: string
     /** Themes to offer. Defaults to all built-in presets. */
     themes?: TokenSet[]
+    /**
+     * Themes the LEFT-click cycles through — names from `themes`, or TokenSets.
+     * Defaults to the full list (cycle everything). Pass two, e.g.
+     * `:cycle-themes="['Dark', 'Light']"`, for a quick dark/light toggle while
+     * the right-click menu still offers every theme.
+     */
+    cycleThemes?: (string | TokenSet)[]
     /**
      * Trigger style:
      *  - "swatch" (default): a square showing the active theme's brand colour.
@@ -106,9 +113,24 @@ function applyTheme(t: TokenSet, ev?: MouseEvent) {
   emit("change", t)
 }
 
-// Left-click → next theme in the list (wraps), revealing from the click point.
+// The left-click rotation, which can be narrower than the offered `themes` —
+// names resolve against that list. Falls back to the full list, so a switcher
+// with no `cycleThemes` keeps cycling everything as before.
+const cycleList = computed<TokenSet[]>(() => {
+  if (!props.cycleThemes?.length) return list.value
+  const resolved = props.cycleThemes
+    .map((t) =>
+      typeof t === "string" ? list.value.find((x) => x.name === t) : t,
+    )
+    .filter((t): t is TokenSet => Boolean(t))
+  return resolved.length ? resolved : list.value
+})
+
+// Left-click → next theme in the rotation (wraps), revealing from the click
+// point. When the active theme is outside the rotation (picked from the
+// right-click menu), findIndex gives -1 and we land on its first entry.
 function cycle(ev: MouseEvent) {
-  const arr = list.value
+  const arr = cycleList.value
   if (!arr.length) return
   const i = arr.findIndex((t) => t.name === activeName.value)
   const next = arr[(i + 1) % arr.length]

package/src/components/address.ts

@@ -0,0 +1,250 @@
+/*
+ * Postal-address types, tile maths and the pluggable geocoder behind
+ * LpAddressInput / LpMapPicker.
+ *
+ * Nothing here is bound to a particular service: the component takes a
+ * `GeocodeProvider` and a `TileSource`, and the Nominatim/OSM pair below is
+ * only the default. Swap either for a self-hosted instance, a paid provider or
+ * a stub in tests without touching the components.
+ */
+
+export interface LatLon {
+  lat: number
+  lon: number
+}
+
+export interface AddressValue {
+  /** Street and house number, e.g. "Baker Street 221B". */
+  line: string
+  /** Apartment, suite, floor — only shown when LpAddressInput asks for it. */
+  line2?: string
+  city: string
+  postalCode: string
+  /** ISO 3166-1 alpha-2, uppercase — same shape LpPhoneInput uses. */
+  country: string
+  /** Set once a point is picked on the map or a suggestion carries one. */
+  lat?: number
+  lon?: number
+}
+
+export function emptyAddress(): AddressValue {
+  return { line: "", city: "", postalCode: "", country: "" }
+}
+
+export interface AddressSuggestion {
+  /** Text to put in the field that asked for it. */
+  value: string
+  label: string
+  /** Fuller context — the whole formatted address, shown under the label. */
+  description?: string
+  /** Parsed parts, as much as the provider resolved. */
+  address: Partial<AddressValue>
+  lat?: number
+  lon?: number
+}
+
+/** Which field is being completed — providers can bias results accordingly. */
+export type AddressField = "line" | "city" | "postalCode"
+
+export interface GeocodeQuery {
+  /** Restrict to a country (ISO2) when the form already has one. */
+  country?: string
+  /** Preferred result language, as an Accept-Language value. */
+  language?: string
+  limit?: number
+  signal?: AbortSignal
+}
+
+export interface GeocodeProvider {
+  search(term: string, field: AddressField, query?: GeocodeQuery): Promise<AddressSuggestion[]>
+  /** Point → address. Undefined when the point resolves to nothing. */
+  reverse(lat: number, lon: number, query?: GeocodeQuery): Promise<AddressSuggestion | undefined>
+}
+
+export interface NominatimOptions {
+  /** Base URL of a Nominatim instance, no trailing slash. */
+  endpoint?: string
+  language?: string
+  /**
+   * Public Nominatim asks for an identifying UA and rate-limits hard; browsers
+   * won't let us set User-Agent, so this rides along as `email` instead, which
+   * their usage policy accepts. Point `endpoint` at your own instance for
+   * anything busier than a settings form.
+   */
+  email?: string
+}
+
+interface NominatimAddress {
+  road?: string
+  house_number?: string
+  city?: string
+  town?: string
+  village?: string
+  municipality?: string
+  postcode?: string
+  country_code?: string
+}
+
+interface NominatimResult {
+  display_name: string
+  name?: string
+  lat?: string
+  lon?: string
+  address?: NominatimAddress
+}
+
+const NOMINATIM_ENDPOINT = "https://nominatim.openstreetmap.org"
+
+export function createNominatimProvider(options: NominatimOptions = {}): GeocodeProvider {
+  const endpoint = options.endpoint ?? NOMINATIM_ENDPOINT
+
+  function common(query: GeocodeQuery | undefined, params: URLSearchParams) {
+    params.set("format", "jsonv2")
+    params.set("addressdetails", "1")
+    if (options.email) params.set("email", options.email)
+    if (query?.country) params.set("countrycodes", query.country.toLowerCase())
+  }
+
+  async function get<T>(path: string, params: URLSearchParams, query?: GeocodeQuery): Promise<T> {
+    const language = query?.language ?? options.language
+    const res = await fetch(`${endpoint}${path}?${params}`, {
+      signal: query?.signal,
+      headers: language ? { "Accept-Language": language } : undefined,
+    })
+    if (!res.ok) throw new Error(`geocoder responded ${res.status}`)
+    return (await res.json()) as T
+  }
+
+  return {
+    async search(term, field, query) {
+      const params = new URLSearchParams({ q: term, limit: String(query?.limit ?? 6) })
+      common(query, params)
+      const results = await get<NominatimResult[]>("/search", params, query)
+      return results.map((result) => toSuggestion(result, field))
+    },
+
+    async reverse(lat, lon, query) {
+      const params = new URLSearchParams({ lat: String(lat), lon: String(lon) })
+      common(query, params)
+      // countrycodes is a /search filter; on /reverse it does nothing but is
+      // rejected by stricter instances, so drop it here.
+      params.delete("countrycodes")
+      const result = await get<NominatimResult | { error: unknown }>("/reverse", params, query)
+      if (!result || "error" in result) return undefined
+      return toSuggestion(result, "line")
+    },
+  }
+}
+
+function toSuggestion(result: NominatimResult, field: AddressField): AddressSuggestion {
+  const parts = result.address ?? {}
+  const city = parts.city || parts.town || parts.village || parts.municipality || ""
+  const street = [parts.road, parts.house_number].filter(Boolean).join(" ")
+  const address: Partial<AddressValue> = {
+    line: street || undefined,
+    city: city || undefined,
+    postalCode: parts.postcode || undefined,
+    country: parts.country_code ? parts.country_code.toUpperCase() : undefined,
+  }
+  const lat = result.lat ? Number(result.lat) : undefined
+  const lon = result.lon ? Number(result.lon) : undefined
+
+  // The value is whatever the asking field wants; the full display name always
+  // rides along as context so two similar streets stay tellable apart.
+  const value =
+    field === "city"
+      ? city || result.name || result.display_name
+      : field === "postalCode"
+        ? parts.postcode || ""
+        : street || result.name || result.display_name
+
+  return { value, label: value || result.display_name, description: result.display_name, address, lat, lon }
+}
+
+/**
+ * Every user-facing string in LpAddressInput, so an app can translate it
+ * without the kit taking an i18n dependency. Pass a partial — anything absent
+ * keeps the English default.
+ */
+export interface AddressLabels {
+  line: string
+  linePlaceholder: string
+  secondLine: string
+  secondLinePlaceholder: string
+  city: string
+  cityPlaceholder: string
+  postalCode: string
+  postalCodePlaceholder: string
+  country: string
+  countryPlaceholder: string
+  countrySearch: string
+  pickOnMap: string
+  mapTitle: string
+  mapHint: string
+  use: string
+  cancel: string
+  searching: string
+  noSuggestions: string
+  nothingHere: string
+}
+
+/** Formats an address the way a shipping label would read. */
+export function formatAddress(value: AddressValue, countryName?: string): string {
+  const locality = [value.postalCode, value.city].filter(Boolean).join(" ")
+  return [value.line, locality, countryName ?? value.country].filter(Boolean).join(", ")
+}
+
+export interface TileSource {
+  /** Template with {z}/{x}/{y}, plus optional {s} for a subdomain. */
+  url: string
+  /** Rendered under the map — most tile terms require crediting the source. */
+  attribution?: string
+  subdomains?: string[]
+  minZoom?: number
+  maxZoom?: number
+  /** Edge length of one tile in CSS pixels. Default 256. */
+  tileSize?: number
+}
+
+export const OSM_TILES: TileSource = {
+  url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+  attribution: "© OpenStreetMap contributors",
+  minZoom: 1,
+  maxZoom: 19,
+}
+
+export function tileUrl(source: TileSource, z: number, x: number, y: number): string {
+  const subdomains = source.subdomains
+  const subdomain = subdomains?.length ? subdomains[Math.abs(x + y) % subdomains.length] : ""
+  return source.url
+    .replace("{s}", subdomain)
+    .replace("{z}", String(z))
+    .replace("{x}", String(x))
+    .replace("{y}", String(y))
+}
+
+/*
+ * Web Mercator, the projection every {z}/{x}/{y} tile scheme uses. `project`
+ * gives world pixels at a zoom level (world edge = tileSize * 2^zoom), which is
+ * the space the map does all its panning arithmetic in.
+ */
+export const MAX_LATITUDE = 85.05112878
+
+export function project(lat: number, lon: number, zoom: number, tileSize = 256) {
+  const size = tileSize * 2 ** zoom
+  const clamped = Math.max(-MAX_LATITUDE, Math.min(MAX_LATITUDE, lat))
+  const sin = Math.sin((clamped * Math.PI) / 180)
+  return {
+    x: ((lon + 180) / 360) * size,
+    y: (0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)) * size,
+  }
+}
+
+export function unproject(x: number, y: number, zoom: number, tileSize = 256) {
+  const size = tileSize * 2 ** zoom
+  const n = Math.PI - (2 * Math.PI * y) / size
+  return {
+    lat: (180 / Math.PI) * Math.atan(Math.sinh(n)),
+    lon: (x / size) * 360 - 180,
+  }
+}