@leavepulse/ui 0.12.0

package/src/components/LpTable.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import LpCheckbox from "./LpCheckbox.vue"
+import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
+import LpScrollArea from "./LpScrollArea.vue"
+
+export interface TableColumn<Row> {
+  key: string
+  label: string
+  align?: "left" | "right" | "center"
+  width?: string
+  /** Allow clicking the header to sort by this column. */
+  sortable?: boolean
+}
+
+export interface SortState {
+  key: string
+  dir: "asc" | "desc"
+}
+
+type RowKey = string | number
+
+const props = withDefaults(
+  defineProps<{
+    columns: TableColumn<T>[]
+    rows: T[]
+    /** Stable id per row — required for selection; falls back to index otherwise. */
+    rowKey?: keyof T | ((row: T) => RowKey)
+    emptyLabel?: string
+    emptyIcon?: string
+    /** Render a leading checkbox column; selection binds via v-model:selected. */
+    selectable?: boolean
+    /** Selected row keys (v-model:selected). */
+    selected?: RowKey[]
+    /** Active sort (v-model:sort). When set, the parent owns ordering (server
+     *  side); otherwise the table sorts its own rows client-side. */
+    sort?: SortState | null
+    /** Pin the header while the body scrolls. Pair with a height on the wrapper. */
+    stickyHeader?: boolean
+    /** Per-row right-click menu. Return [] (or omit the prop) to disable it for
+     *  a row; the row then keeps the browser's native context menu. */
+    rowMenu?: (row: T) => ContextMenuItemDef[]
+  }>(),
+  {
+    emptyLabel: "Nothing here yet",
+    emptyIcon: "lucide:inbox",
+    selectable: false,
+    selected: () => [],
+    sort: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:selected", value: RowKey[]): void
+  (e: "update:sort", value: SortState | null): void
+  (e: "rowClick", row: T): void
+}>()
+
+function keyFor(row: T, index: number): RowKey {
+  if (typeof props.rowKey === "function") return props.rowKey(row)
+  if (props.rowKey) return row[props.rowKey] as RowKey
+  return index
+}
+
+function alignClass(align?: "left" | "right" | "center"): string {
+  if (align === "right") return "text-right"
+  if (align === "center") return "text-center"
+  return "text-left"
+}
+
+// Resolved right-click menu for a row, or [] when none — keeps the template
+// branch simple and avoids calling rowMenu twice per row.
+function menuFor(row: T): ContextMenuItemDef[] {
+  return props.rowMenu?.(row) ?? []
+}
+
+// ── sorting ──────────────────────────────────────────────────
+// Client-side sort is applied only when the parent doesn't drive `sort` via
+// v-model (server-side). We compare by raw cell value with a stable-ish coerce.
+const displayRows = computed<T[]>(() => {
+  const s = props.sort
+  if (!s) return props.rows
+  const col = props.columns.find((c) => c.key === s.key)
+  if (!col?.sortable) return props.rows
+  const factor = s.dir === "asc" ? 1 : -1
+  return [...props.rows].sort((a, b) => compare(a[s.key], b[s.key]) * factor)
+})
+
+function compare(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0
+  if (a == null) return -1
+  if (b == null) return 1
+  if (typeof a === "number" && typeof b === "number") return a - b
+  return String(a).localeCompare(String(b), undefined, { numeric: true })
+}
+
+function toggleSort(col: TableColumn<T>) {
+  if (!col.sortable) return
+  const s = props.sort
+  // Cycle: none → asc → desc → none, scoped to the clicked column.
+  let next: SortState | null
+  if (!s || s.key !== col.key) next = { key: col.key, dir: "asc" }
+  else if (s.dir === "asc") next = { key: col.key, dir: "desc" }
+  else next = null
+  emit("update:sort", next)
+}
+
+function sortIcon(col: TableColumn<T>): string {
+  if (props.sort?.key !== col.key) return "lucide:chevrons-up-down"
+  return props.sort.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down"
+}
+
+// ── selection ────────────────────────────────────────────────
+const selectedSet = computed(() => new Set(props.selected))
+const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)))
+const allChecked = computed(
+  () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k)),
+)
+const someChecked = computed(
+  () => !allChecked.value && allKeys.value.some((k) => selectedSet.value.has(k)),
+)
+
+function toggleAll(checked: boolean) {
+  emit("update:selected", checked ? [...allKeys.value] : [])
+}
+
+function toggleRow(key: RowKey, checked: boolean) {
+  const next = new Set(selectedSet.value)
+  if (checked) next.add(key)
+  else next.delete(key)
+  emit("update:selected", [...next])
+}
+
+const colSpan = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+
+// With stickyHeader, the overlay scrollbar would otherwise run up under the
+// pinned header. Measure the header height and inset the bar by it so the bar
+// starts below the header. Tracked live (density/content can change it).
+const headEl = ref<HTMLElement | null>(null)
+const headHeight = ref(0)
+let ro: ResizeObserver | undefined
+watch(
+  [headEl, () => props.stickyHeader],
+  ([el, sticky]) => {
+    ro?.disconnect()
+    if (!el || !sticky || typeof ResizeObserver === "undefined") {
+      headHeight.value = 0
+      return
+    }
+    ro = new ResizeObserver(() => {
+      headHeight.value = el.offsetHeight
+    })
+    ro.observe(el)
+    headHeight.value = el.offsetHeight
+  },
+  { immediate: true, flush: "post" },
+)
+onBeforeUnmount(() => ro?.disconnect())
+
+const barInsetTop = computed(() =>
+  props.stickyHeader && headHeight.value ? `${headHeight.value}px` : undefined,
+)
+</script>
+
+<template>
+  <LpScrollArea class="rounded-card border border-line" :bar-inset-top="barInsetTop">
+    <table class="w-full border-collapse text-sm">
+      <thead ref="headEl" :class="stickyHeader ? 'sticky top-0 z-10' : ''">
+        <tr class="border-b border-line bg-surface-soft">
+          <th v-if="selectable" class="w-px px-4 py-3">
+            <LpCheckbox
+              :model-value="allChecked"
+              :indeterminate="someChecked"
+              @update:model-value="toggleAll"
+            />
+          </th>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :style="col.width ? { width: col.width } : undefined"
+            class="px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
+            :class="alignClass(col.align)"
+            :aria-sort="
+              sort?.key === col.key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined
+            "
+          >
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              :class="[
+                col.align === 'right' ? 'flex-row-reverse' : '',
+                sort?.key === col.key ? 'text-ink' : '',
+              ]"
+              @click="toggleSort(col)"
+            >
+              {{ col.label }}
+              <LpIcon
+                :name="sortIcon(col)"
+                :size="13"
+                class="shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]"
+                :class="sort?.key === col.key ? 'opacity-100' : 'opacity-40 group-hover/sort:opacity-70'"
+              />
+            </button>
+            <template v-else>{{ col.label }}</template>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="displayRows.length === 0">
+          <td :colspan="colSpan" class="px-4 py-10 text-center text-muted">
+            <LpIcon :name="emptyIcon" :size="22" class="mx-auto mb-2 opacity-60" />
+            <div>{{ emptyLabel }}</div>
+          </td>
+        </tr>
+        <!-- Each row is wrapped in a right-click menu; with no rowMenu (or an
+             empty result) LpContextMenu is a passthrough and the row keeps the
+             browser's native menu. It renders via as-child, so the DOM stays a
+             bare <tr> either way. -->
+        <LpContextMenu
+          v-for="(row, index) in displayRows"
+          :key="keyFor(row, index)"
+          :items="menuFor(row)"
+        >
+          <tr
+            class="border-b border-line/60 transition-colors last:border-0 hover:bg-surface-soft/60"
+            :class="selectedSet.has(keyFor(row, index)) ? 'bg-brand-soft/40' : ''"
+            @click="emit('rowClick', row)"
+          >
+            <td v-if="selectable" class="w-px px-4 py-3" @click.stop>
+              <LpCheckbox
+                :model-value="selectedSet.has(keyFor(row, index))"
+                @update:model-value="(v) => toggleRow(keyFor(row, index), v)"
+              />
+            </td>
+            <td
+              v-for="col in columns"
+              :key="col.key"
+              class="px-4 py-3 text-ink"
+              :class="alignClass(col.align)"
+            >
+              <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+                {{ row[col.key] }}
+              </slot>
+            </td>
+          </tr>
+        </LpContextMenu>
+      </tbody>
+    </table>
+  </LpScrollArea>
+</template>

package/src/components/LpTableOfContents.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+/*
+ * On-this-page table of contents with scroll-spy. Data-driven: pass the heading
+ * tree (id + text, optional nested children) and it renders a rail of anchor
+ * links, tracking which section is in view via IntersectionObserver and sliding
+ * a brand indicator to it (motion-v shared layoutId — same feel as Tabs/Sidebar).
+ *
+ * The kit convention for a docs/article TOC so apps stop re-implementing the
+ * observer + active-link math. Clicking a link smooth-scrolls to the heading and
+ * marks it active immediately (so the pill doesn't lag the scroll).
+ */
+import { Motion } from "motion-v"
+import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
+
+export interface TocLink {
+  id: string
+  text: string
+  depth?: number
+  children?: TocLink[]
+}
+
+const props = withDefaults(
+  defineProps<{
+    links: TocLink[]
+    /** Heading shown above the list. */
+    title?: string
+    /** px offset from the top used as the scroll-spy trigger line. */
+    offset?: number
+  }>(),
+  { title: "On this page", offset: 96 },
+)
+
+const activeId = ref<string>("")
+// The id the pointer is hovering (null when not hovering). The indicator bar
+// follows the hovered link, falling back to the scroll-spy active one — same
+// feel as LpTabs/LpSidebar.
+const hoveredId = ref<string | null>(null)
+const pillId = `lp-toc-${useId()}`
+const pillTransition = usePillTransition()
+
+// Which link the bar sits under: hovered wins, else the active (in-view) one.
+const litId = computed(() => hoveredId.value ?? activeId.value)
+
+// Flatten to the ordered list of ids we observe (parents + children).
+function flatIds(links: TocLink[]): string[] {
+  return links.flatMap((l) => [l.id, ...(l.children ? flatIds(l.children) : [])])
+}
+
+let observer: IntersectionObserver | null = null
+
+// While a click-driven smooth scroll is in flight, freeze scroll-spy so the bar
+// doesn't skip through every heading the page passes on the way to the target.
+let spySuppressed = false
+let rafId: number | null = null
+let safetyTimer: ReturnType<typeof setTimeout> | null = null
+
+function setup() {
+  observer?.disconnect()
+  const ids = flatIds(props.links)
+  if (!ids.length) return
+
+  // Track the topmost heading whose top has crossed the offset line. We keep a
+  // set of "currently intersecting" and, on every change, pick the first id in
+  // document order that's visible — falling back to the last one scrolled past.
+  const visible = new Set<string>()
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) {
+        if (e.isIntersecting) visible.add(e.target.id)
+        else visible.delete(e.target.id)
+      }
+      if (spySuppressed) return // ignore intermediate sections during a click-scroll
+      const firstVisible = ids.find((id) => visible.has(id))
+      if (firstVisible) activeId.value = firstVisible
+    },
+    { rootMargin: `-${props.offset}px 0px -70% 0px`, threshold: 0 },
+  )
+
+  for (const id of ids) {
+    const el = document.getElementById(id)
+    if (el) observer.observe(el)
+  }
+  // Seed the initial active id (top-most heading) so the bar isn't empty.
+  if (!activeId.value) activeId.value = ids[0] ?? ""
+}
+
+// Suppress scroll-spy until the smooth scroll settles. The unfreeze isn't on a
+// fixed delay — we watch scrollY frame-by-frame (rAF) and stop the moment the
+// position holds for a full frame. A long safety timeout is only a fallback so
+// spy can never stay frozen forever if the scroll never starts or is cut short.
+function unfreeze() {
+  spySuppressed = false
+  if (rafId != null) cancelAnimationFrame(rafId)
+  if (safetyTimer != null) clearTimeout(safetyTimer)
+  rafId = null
+  safetyTimer = null
+}
+
+function suppressSpyUntilScrollEnds() {
+  spySuppressed = true
+  if (rafId != null) cancelAnimationFrame(rafId)
+  if (safetyTimer != null) clearTimeout(safetyTimer)
+  let last = window.scrollY
+  const tick = () => {
+    const y = window.scrollY
+    if (y === last) {
+      unfreeze() // position held for a frame → scrolling has come to rest
+      return
+    }
+    last = y
+    rafId = requestAnimationFrame(tick)
+  }
+  // Start on the next frame so the first sample isn't the pre-scroll y.
+  rafId = requestAnimationFrame(tick)
+  // Fallback: never stay frozen longer than any scroll could plausibly take.
+  safetyTimer = setTimeout(unfreeze, 1000)
+}
+
+function onClick(id: string, ev: MouseEvent) {
+  const el = document.getElementById(id)
+  if (!el) return
+  ev.preventDefault()
+  activeId.value = id // mark immediately so the bar jumps to the clicked item
+  suppressSpyUntilScrollEnds()
+  el.scrollIntoView({ behavior: "smooth", block: "start" })
+  history.replaceState(null, "", `#${id}`)
+}
+
+onMounted(setup)
+watch(() => props.links, setup, { deep: true })
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  unfreeze()
+})
+</script>
+
+<template>
+  <nav :aria-label="title" class="text-sm">
+    <p class="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
+      {{ title }}
+    </p>
+    <ul class="relative flex flex-col gap-0.5 border-l border-line" @mouseleave="hoveredId = null">
+      <li v-for="link in links" :key="link.id" class="flex flex-col">
+        <a
+          :href="`#${link.id}`"
+          class="relative -ml-px block py-1 pl-3.5 leading-snug transition-colors duration-[var(--duration-fast)]"
+          :class="litId === link.id ? 'text-brand' : 'text-muted hover:text-ink'"
+          @click="onClick(link.id, $event)"
+          @mouseenter="hoveredId = link.id"
+        >
+          <Motion
+            v-if="litId === link.id"
+            :layout-id="pillId"
+            :transition="pillTransition"
+            class="absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
+          />
+          {{ link.text }}
+        </a>
+
+        <ul v-if="link.children?.length" class="flex flex-col gap-0.5">
+          <li v-for="child in link.children" :key="child.id">
+            <a
+              :href="`#${child.id}`"
+              class="relative -ml-px block py-1 pl-7 text-[13px] leading-snug transition-colors duration-[var(--duration-fast)]"
+              :class="litId === child.id ? 'text-brand' : 'text-muted hover:text-ink'"
+              @click="onClick(child.id, $event)"
+              @mouseenter="hoveredId = child.id"
+            >
+              <Motion
+                v-if="litId === child.id"
+                :layout-id="pillId"
+                :transition="pillTransition"
+                class="absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
+              />
+              {{ child.text }}
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>

package/src/components/LpTabs.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { Motion, useReducedMotion } from "motion-v"
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
+import { computed, ref, useId } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
+import LpIcon from "./LpIcon.vue"
+
+export interface TabItem {
+  value: string
+  label: string
+  /** Optional iconify name (e.g. "lucide:palette"), shown left of the label. */
+  icon?: string
+}
+
+withDefaults(
+  defineProps<{
+    modelValue?: string
+    items: TabItem[]
+    /**
+     * "contained" (default) wraps the triggers in a bordered, filled bar.
+     * "plain" drops the container chrome — a flat row of tabs with only the
+     * sliding pill marking the active one (for nav bars over a custom surface).
+     */
+    variant?: "contained" | "plain"
+    /** Tint the active pill + label with the brand colour (nav-bar style). */
+    accent?: boolean
+    /** Stretch the bar to full width with equal-share triggers. */
+    block?: boolean
+  }>(),
+  { variant: "contained", accent: false, block: false },
+)
+defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+// The pill sits under the hovered tab, falling back to the active one
+// (UAProject header behaviour). motion-v shared layoutId animates the move.
+// The id must be unique per instance — a shared constant makes the pill fly
+// between separate LpTabs on the same page.
+const pillId = `lp-tab-indicator-${useId()}`
+const hovered = ref<string | null>(null)
+
+// Pill move spring (snaps to instant under reduced motion); shared with the
+// other pill-indicator components.
+const pillTransition = usePillTransition()
+
+// Panel height spring: when the active #panel differs in height, the wrapper
+// grows/shrinks smoothly instead of snapping. Same feel as the drag layout in
+// LayoutNode; collapses to instant under reduced motion.
+const reduceMotion = useReducedMotion()
+const panelLayoutTransition = computed(() =>
+  reduceMotion.value
+    ? { duration: 0 }
+    : { type: "spring" as const, stiffness: 520, damping: 42, mass: 0.9 },
+)
+
+function pillUnder(value: string, active?: string): boolean {
+  return hovered.value ? hovered.value === value : active === value
+}
+</script>
+
+<template>
+  <TabsRoot
+    :model-value="modelValue"
+    @update:model-value="(v) => $emit('update:modelValue', v as string)"
+  >
+    <TabsList
+      class="gap-1"
+      :class="[
+        block ? 'flex w-full' : 'inline-flex',
+        variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
+      ]"
+      @pointerleave="hovered = null"
+    >
+      <TabsTrigger
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+        class="relative inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        :class="[
+          block ? 'flex-1' : '',
+          accent ? 'data-[state=active]:text-brand' : 'data-[state=active]:text-ink',
+          hovered === item.value ? 'text-ink' : 'text-muted',
+        ]"
+        @pointerenter="hovered = item.value"
+      >
+        <Motion
+          v-if="pillUnder(item.value, modelValue)"
+          :layout-id="pillId"
+          :transition="pillTransition"
+          class="absolute inset-0 z-0 rounded-md shadow-sm"
+          :class="accent
+            ? 'border border-brand/35 bg-brand/12'
+            : 'border border-line bg-surface-raised'"
+        />
+        <LpIcon v-if="item.icon" :name="item.icon" :size="14" class="relative z-10" />
+        <span class="relative z-10">{{ item.label }}</span>
+      </TabsTrigger>
+    </TabsList>
+
+    <!-- Animated panels: only rendered if a per-item #panel slot is provided.
+         The Motion wrapper layout-animates its height so switching to a taller
+         or shorter panel grows/shrinks smoothly instead of snapping. -->
+    <Motion
+      v-if="$slots.panel"
+      :layout="true"
+      :transition="panelLayoutTransition"
+      class="mt-3 overflow-hidden"
+    >
+      <TabsContent
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+        class="outline-none data-[state=active]:animate-[tab-in_200ms_var(--ease-emphasized)]"
+      >
+        <slot name="panel" :value="item.value" />
+      </TabsContent>
+    </Motion>
+
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/LpTextarea.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import LpFormField from "./LpFormField.vue"
+
+const props = defineProps<{
+  modelValue?: string
+  placeholder?: string
+  rows?: number
+  invalid?: boolean
+  disabled?: boolean
+  label?: string
+  hint?: string
+  error?: string
+}>()
+
+defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
+</script>
+
+<template>
+  <component
+    :is="hasField ? LpFormField : 'div'"
+    :label="hasField ? label : undefined"
+    :hint="hasField ? hint : undefined"
+    :error="hasField ? error : undefined"
+    :class="hasField ? undefined : 'contents'"
+  >
+    <textarea
+      :value="modelValue"
+      :placeholder="placeholder"
+      :rows="rows ?? 4"
+      :disabled="disabled"
+      class="w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
+      :class="(invalid || error) ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line'"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+  </component>
+</template>