@leavepulse/ui 0.12.0

package/src/components/LpPhoneInput.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+/*
+ * Phone number field — a country picker (flag + dial code) fused with a free-text
+ * number input. Picking a country sets the "+code" prefix; you can also just type
+ * the whole "+…" yourself and the flag follows what you typed (longest dial-code
+ * match wins). The model is the full string ("+380501234567"); a `change` event
+ * also carries the parsed { country, dialCode, number } for forms that want it.
+ *
+ * Deliberately NOT a full phone validator (no libphonenumber) — it stays free
+ * text so any number is allowed; `restrict` only blocks obviously non-phone keys.
+ */
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from "reka-ui"
+import { computed, onMounted, ref } from "vue"
+import { useInputFilter } from "../composables/useInputFilter"
+import { type Country, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
+import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+
+export interface PhoneDetail {
+  /** Matched country, or undefined when the prefix matches none. */
+  country?: Country
+  /** Dial code without "+", e.g. "380". Empty if unknown. */
+  dialCode: string
+  /** National part (digits after the dial code). */
+  number: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Full phone string, e.g. "+380501234567". Bind with v-model. */
+    modelValue?: string
+    /** Restrict the country list (ISO2 codes). Omit for all countries. */
+    only?: string[]
+    /** Default country (ISO2) used when the field is empty. */
+    defaultCountry?: string
+    placeholder?: string
+    disabled?: boolean
+    invalid?: boolean
+    size?: "sm" | "md" | "lg"
+    emptyText?: string
+    searchPlaceholder?: string
+  }>(),
+  {
+    placeholder: "Phone number",
+    size: "md",
+    emptyText: "No country",
+    searchPlaceholder: "Search country…",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  (e: "change", detail: PhoneDetail): void
+}>()
+
+// Phone keys only: digits, "+", spaces and the usual separators. Free typing of
+// "+code" stays possible; letters and junk are blocked at the source.
+const PHONE_CHARS = /[\d+()\-\s]/
+const { onBeforeInput, onPaste } = useInputFilter({ restrict: () => PHONE_CHARS })
+
+// The dial-code table is code-split; it's empty until the lazy chunk resolves.
+// Everything degrades gracefully meanwhile: digits still parse, the flag shows a
+// neutral globe, and the list opens once data arrives.
+const allCountries = ref<Country[]>([])
+
+const countries = computed<Country[]>(() => {
+  if (!props.only?.length) return allCountries.value
+  const set = new Set(props.only.map((c) => c.toUpperCase()))
+  return allCountries.value.filter((c) => set.has(c.iso2))
+})
+
+// Country derived from the current value (flag follows typing). Falls back to
+// the default country while the field is empty.
+const fallback = computed(() => {
+  const iso = props.defaultCountry?.toUpperCase()
+  return iso ? countries.value.find((c) => c.iso2 === iso) : undefined
+})
+const activeCountry = computed<Country | undefined>(
+  () => matchCountryByValue(props.modelValue ?? "", countries.value) ?? fallback.value,
+)
+
+const open = ref(false)
+const query = ref("")
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return countries.value
+  return countries.value.filter(
+    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q.replace(/\D/g, "")),
+  )
+})
+
+function parse(value: string): PhoneDetail {
+  const country = matchCountryByValue(value, countries.value)
+  const digits = value.replace(/[^\d]/g, "")
+  if (country) {
+    return { country, dialCode: country.dial, number: digits.slice(country.dial.length) }
+  }
+  return { country: undefined, dialCode: "", number: digits }
+}
+
+function setValue(value: string) {
+  emit("update:modelValue", value)
+  emit("change", parse(value))
+}
+
+function onInput(e: Event) {
+  setValue((e.target as HTMLInputElement).value)
+}
+
+/**
+ * Pick a country from the list: swap the dial prefix, keep the national number.
+ * If the field had a recognised country, replace just its code; otherwise prefix
+ * the new code onto whatever digits are present.
+ */
+function chooseCountry(c: Country) {
+  const detail = parse(props.modelValue ?? "")
+  const national = detail.number
+  setValue(`+${c.dial}${national ? " " + national : ""}`)
+  open.value = false
+  query.value = ""
+}
+
+// Load the dial-code table on mount (lazy chunk), then seed the default
+// country's "+code" into an empty field so the user starts with the prefix in
+// place — but never clobber a value the consumer already provided.
+onMounted(async () => {
+  allCountries.value = await loadCountries()
+  if (!props.modelValue && fallback.value) {
+    emit("update:modelValue", `+${fallback.value.dial} `)
+  }
+})
+
+const sizeClass = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}
+</script>
+
+<template>
+  <div
+    class="flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring"
+    :class="[
+      sizeClass[size],
+      invalid
+        ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft'
+        : 'border-line focus-within:border-brand',
+      disabled ? 'cursor-not-allowed opacity-55' : '',
+    ]"
+  >
+    <ComboboxRoot
+      v-model:open="open"
+      :ignore-filter="true"
+      :disabled="disabled"
+      class="flex"
+    >
+      <ComboboxAnchor as-child>
+        <ComboboxTrigger
+          type="button"
+          :disabled="disabled"
+          class="flex shrink-0 items-center gap-1 rounded-l-control border-r border-line px-2.5 outline-none hover:bg-white/[0.04] data-[state=open]:bg-white/[0.04]"
+          aria-label="Select country"
+        >
+          <span class="text-base leading-none">{{ activeCountry ? flagEmoji(activeCountry.iso2) : "🌐" }}</span>
+          <LpIcon
+            name="lucide:chevron-down"
+            :size="14"
+            class="text-muted transition-transform data-[state=open]:rotate-180"
+          />
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+
+      <ComboboxPortal>
+        <ComboboxContent
+          position="popper"
+          align="start"
+          :side-offset="6"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-72 overflow-hidden']"
+        >
+          <div class="border-b border-line p-2">
+            <!--
+              Update `query` from the raw DOM event, not reka's ComboboxInput
+              v-model: reka defers the value to nextTick while the list is
+              closed, lagging the first keystroke by one char. (See LpAutocomplete
+              for the same fix.)
+            -->
+            <ComboboxInput
+              :model-value="query"
+              :placeholder="searchPlaceholder"
+              auto-focus
+              class="h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
+              @input="query = ($event.target as HTMLInputElement).value"
+            />
+          </div>
+          <ComboboxViewport class="max-h-56 overflow-y-auto p-1">
+            <ComboboxEmpty class="px-3 py-4 text-center text-sm italic text-muted">
+              {{ emptyText }}
+            </ComboboxEmpty>
+            <ComboboxItem
+              v-for="(c, i) in filtered"
+              :key="c.iso2"
+              :value="c.iso2"
+              :style="{ animationDelay: `${Math.min(i, 12) * 22}ms` }"
+              :class="[OPTION_ITEM, 'gap-2.5']"
+              @select.prevent="chooseCountry(c)"
+            >
+              <span class="text-base leading-none">{{ flagEmoji(c.iso2) }}</span>
+              <span class="min-w-0 flex-1 truncate">{{ c.name }}</span>
+              <span class="shrink-0 text-xs text-muted">+{{ c.dial }}</span>
+            </ComboboxItem>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+
+    <input
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="invalid || undefined"
+      type="tel"
+      inputmode="tel"
+      autocomplete="tel"
+      class="min-w-0 flex-1 bg-transparent px-3 outline-none placeholder:text-muted"
+      @beforeinput="onBeforeInput"
+      @paste="onPaste"
+      @input="onInput"
+    />
+  </div>
+</template>

package/src/components/LpPopover.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from "reka-ui"
+import { POPOVER_PANEL } from "./dropdown"
+
+withDefaults(
+  defineProps<{
+    side?: "top" | "right" | "bottom" | "left"
+    align?: "start" | "center" | "end"
+    sideOffset?: number
+    /** Extra classes for the floating panel (width, padding, overflow). */
+    panelClass?: string
+  }>(),
+  { side: "bottom", align: "center", sideOffset: 6 },
+)
+
+// Controllable open state (v-model:open). Left unbound the popover stays
+// uncontrolled and reka manages open/close on trigger interaction.
+const open = defineModel<boolean>("open")
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open">
+    <PopoverTrigger as-child>
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset"
+        :class="[POPOVER_PANEL, 'z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none', panelClass]"
+      >
+        <slot />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/LpProgress.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ProgressIndicator, ProgressRoot } from "reka-ui"
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{ value?: number; max?: number; tone?: "brand" | "action" | "danger" }>(),
+  { value: 0, max: 100, tone: "brand" },
+)
+
+const pct = computed(() => Math.max(0, Math.min(100, (props.value / props.max) * 100)))
+const bar: Record<string, string> = {
+  brand: "bg-brand",
+  action: "bg-action",
+  danger: "bg-danger",
+}
+</script>
+
+<template>
+  <ProgressRoot
+    :model-value="value"
+    :max="max"
+    class="h-1.5 w-full overflow-hidden rounded-pill bg-surface-soft"
+  >
+    <ProgressIndicator
+      class="h-full rounded-pill transition-[width] duration-slow ease-[var(--ease-emphasized)]"
+      :class="bar[tone]"
+      :style="{ width: `${pct}%` }"
+    />
+  </ProgressRoot>
+</template>

package/src/components/LpRadio.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { RadioGroupIndicator, RadioGroupItem } from "reka-ui"
+
+// A single radio item with a slot for rich content (icon, badges, multi-line).
+// Must be placed inside an <LpRadioGroup> (or a reka-ui RadioGroupRoot), which
+// owns the selected value. The default slot replaces the plain label.
+defineProps<{ value: string; label?: string; disabled?: boolean }>()
+</script>
+
+<template>
+  <label
+    class="group inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
+    :class="disabled && 'cursor-not-allowed opacity-55'"
+  >
+    <RadioGroupItem
+      :value="value"
+      :disabled="disabled"
+      class="flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+    >
+      <RadioGroupIndicator
+        class="flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]"
+      >
+        <span class="size-2 rounded-full bg-brand" />
+      </RadioGroupIndicator>
+    </RadioGroupItem>
+    <slot>{{ label }}</slot>
+  </label>
+</template>

package/src/components/LpRadioGroup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui"
+
+export interface RadioOption {
+  value: string
+  label: string
+}
+
+// `options` renders simple {value,label} rows. For rich items (icons, badges,
+// multi-line) pass <LpRadio> children in the default slot instead — they share
+// the same RadioGroupRoot, so selection still flows through v-model.
+defineProps<{ modelValue?: string; options?: RadioOption[]; disabled?: boolean }>()
+defineEmits<{ (e: "update:modelValue", value: string): void }>()
+</script>
+
+<template>
+  <RadioGroupRoot
+    :model-value="modelValue"
+    :disabled="disabled"
+    class="flex flex-col gap-2"
+    @update:model-value="(v) => $emit('update:modelValue', v as string)"
+  >
+    <slot>
+      <label
+        v-for="opt in options"
+        :key="opt.value"
+        class="group inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
+      >
+        <RadioGroupItem
+          :value="opt.value"
+          class="flex size-[18px] items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+        >
+          <RadioGroupIndicator
+            class="flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]"
+          >
+            <span class="size-2 rounded-full bg-brand" />
+          </RadioGroupIndicator>
+        </RadioGroupItem>
+        {{ opt.label }}
+      </label>
+    </slot>
+  </RadioGroupRoot>
+</template>

package/src/components/LpScrollArea.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/*
+ * Drawn overlay scrollbar (reka ScrollArea). Floats over content — never
+ * reserves layout width, so the viewport doesn't jump. Thin at rest, a touch
+ * thicker on hover; fades in/out (reka Presence keeps it mounted through the
+ * exit animation). Rounded only on the OUTER edge — the side flush to the wall
+ * stays square. Themed via tokens; native scroll/keyboard/touch preserved.
+ */
+import { computed, ref } from "vue"
+import {
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from "reka-ui"
+
+// `fade` softens the top/bottom edges to hint more content.
+// `contentClass` styles the scrollable CONTENT container (the viewport's inner
+// wrapper) — put list layout here (display:grid / gap / padding), not on the
+// component root, since items live inside reka's viewport.
+// `barInsetTop` (any CSS length) pulls the vertical scrollbar down by that much,
+// so it doesn't run under a sticky header pinned at the top of the viewport.
+const props = defineProps<{
+  fade?: boolean
+  contentClass?: string
+  barInsetTop?: string
+}>()
+
+// Re-emit the native scroll event of the underlying viewport so consumers that
+// drive scroll-following (e.g. log tails) can track position. The listener is
+// bound on ScrollAreaViewport, whose `$attrs` reka forwards onto the scrollable
+// element itself.
+defineEmits<{ scroll: [event: Event] }>()
+
+// Expose the scrollable viewport element so callers can read/write scrollTop
+// (auto-scroll to bottom, "is at bottom" checks). reka's ScrollAreaViewport
+// exposes it as `viewportElement`.
+const viewportRef = ref<{ viewportElement?: HTMLElement } | null>(null)
+const viewportEl = computed<HTMLElement | null>(
+  () => viewportRef.value?.viewportElement ?? null,
+)
+defineExpose({ viewportEl })
+
+const barFade =
+  "data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=hidden]:animate-[fade-out_240ms_ease]"
+</script>
+
+<template>
+  <ScrollAreaRoot class="relative overflow-hidden" type="hover" :scroll-hide-delay="500">
+    <ScrollAreaViewport
+      ref="viewportRef"
+      class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
+      :class="fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : ''"
+      @scroll.passive="$emit('scroll', $event)"
+    >
+      <div :class="contentClass">
+        <slot />
+      </div>
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      orientation="vertical"
+      class="group flex w-1 touch-none select-none p-px transition-[width] duration-[var(--duration-fast)] hover:w-1.5"
+      :class="barFade"
+      :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
+    >
+      <ScrollAreaThumb
+        class="flex-1 rounded-l-pill bg-brand/40 transition-colors group-hover:bg-brand"
+      />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaScrollbar
+      orientation="horizontal"
+      class="group flex h-1 flex-col touch-none select-none p-px transition-[height] duration-[var(--duration-fast)] hover:h-1.5"
+      :class="barFade"
+    >
+      <ScrollAreaThumb
+        class="flex-1 rounded-t-pill bg-brand/40 transition-colors group-hover:bg-brand"
+      />
+    </ScrollAreaScrollbar>
+  </ScrollAreaRoot>
+</template>

package/src/components/LpSegmented.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+/*
+ * Segmented control — a compact bar of mutually-exclusive options with a sliding
+ * pill marking the selection (iOS-style). Built on reka ToggleGroup for the
+ * roving-focus/keyboard wiring; the pill rides motion-v's shared layoutId, the
+ * same trick as LpTabs/LpPagination. Use it for short option sets (2–5) where a
+ * full Tabs bar is too heavy — view switches, density toggles, on/off-ish picks.
+ */
+import { Motion } from "motion-v"
+import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui"
+import { useId } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
+import LpIcon from "./LpIcon.vue"
+
+export interface SegmentedOption {
+  value: string
+  label?: string
+  /** Optional iconify name shown before the label (or alone, icon-only). */
+  icon?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    options: SegmentedOption[]
+    size?: "sm" | "md"
+    /** Stretch to fill the container with equal-width segments. */
+    block?: boolean
+    disabled?: boolean
+  }>(),
+  { size: "md", block: false },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+}>()
+
+// reka types the payload as AcceptableValue|AcceptableValue[]; in single mode it's
+// the chosen string (or "" on deselect). We keep a value selected — clicking the
+// active segment again shouldn't clear it — so ignore the deselect-to-empty.
+function onChange(v: unknown) {
+  if (typeof v === "string" && v) emit("update:modelValue", v)
+}
+
+const sizeCls = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+}
+
+const pillId = `lp-segmented-${useId()}`
+const pillTransition = usePillTransition()
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :model-value="modelValue"
+    type="single"
+    :disabled="disabled"
+    :rovingFocus="true"
+    class="inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1"
+    :class="[sizeCls[size], block ? 'flex w-full' : '']"
+    @update:model-value="onChange"
+  >
+    <ToggleGroupItem
+      v-for="opt in options"
+      :key="opt.value"
+      :value="opt.value"
+      :aria-label="opt.label ? undefined : opt.value"
+      class="relative inline-flex h-full items-center justify-center gap-1.5 rounded-md px-3 font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
+      :class="block ? 'flex-1' : ''"
+    >
+      <!-- Sliding pill behind the active segment. -->
+      <Motion
+        v-if="opt.value === modelValue"
+        :layout-id="pillId"
+        :transition="pillTransition"
+        class="absolute inset-0 z-0 rounded-md border border-line bg-surface-raised shadow-sm"
+      />
+      <LpIcon v-if="opt.icon" :name="opt.icon" :size="14" class="relative z-10 shrink-0" />
+      <span v-if="opt.label" class="relative z-10">{{ opt.label }}</span>
+    </ToggleGroupItem>
+  </ToggleGroupRoot>
+</template>

package/src/components/LpServiceNode.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * Custom Vue Flow node for a SERVICE inside a host frame on LpTopologyCanvas.
+ * Smaller than LpInfraNode (a host). Coloured by kind (service/database/infra).
+ * depends_on edges connect these across host frames. Tailwind utilities only
+ * (no scoped CSS) so styles reach consumer apps via @source.
+ */
+import { Handle, Position } from "@vue-flow/core"
+import { computed } from "vue"
+
+export interface ServiceNodeData {
+  name: string
+  kind?: string // service | database | infra
+  stack?: string
+  /** Fade the node back (search miss / not part of the focused node's graph). */
+  dimmed?: boolean
+}
+
+const props = defineProps<{ data: ServiceNodeData; selected?: boolean }>()
+
+const kindVar: Record<string, string> = {
+  service: "var(--color-brand)",
+  database: "var(--color-accent)",
+  infra: "var(--color-muted-strong)",
+}
+const accent = computed(() => kindVar[props.data.kind ?? "service"] ?? "var(--color-brand)")
+const kindIcon: Record<string, string> = {
+  service: "◇",
+  database: "⛁",
+  infra: "⬡",
+}
+const icon = computed(() => kindIcon[props.data.kind ?? "service"] ?? "◇")
+</script>
+
+<template>
+  <div
+    class="flex w-[132px] items-center gap-1.5 rounded-control border bg-surface-soft px-2 py-1.5 transition-[border-color,opacity]"
+    :class="[
+      selected ? 'border-[var(--accent)]' : 'border-line',
+      data.dimmed ? 'opacity-30' : 'opacity-100',
+    ]"
+    :style="{ '--accent': accent }"
+  >
+    <Handle
+      type="target"
+      :position="Position.Left"
+      class="!size-1.5 !border !border-[var(--accent)] !bg-surface"
+    />
+    <Handle
+      type="source"
+      :position="Position.Right"
+      class="!size-1.5 !border !border-[var(--accent)] !bg-surface"
+    />
+    <span class="text-[11px] text-[var(--accent)]">{{ icon }}</span>
+    <span class="flex-1 truncate text-[11px] font-medium text-ink">{{ data.name }}</span>
+  </div>
+</template>