@leavepulse/ui 0.12.0

package/src/components/LpCommandPalette.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+/*
+ * Command palette (⌘K). A centered dialog with a filter box and a keyboard-
+ * navigable, grouped command list. Built on reka Dialog (focus trap + overlay);
+ * the list nav (↑/↓/Enter) is owned here so the query input keeps focus while
+ * arrows move the highlight — the pattern the LeavePulse frontend palette uses.
+ *
+ * Presentation-only and data-agnostic: the consumer supplies `commands` (a
+ * composable can assemble them from routes/docs/API). Scoring ranks label >
+ * keywords > description; matches are highlighted; the active row scrolls into
+ * view. Open state is v-model:open; a global ⌘K/Ctrl-K toggle is on by default.
+ */
+import {
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+} from "reka-ui"
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import LpIcon from "./LpIcon.vue"
+import LpScrollArea from "./LpScrollArea.vue"
+
+export interface Command {
+  id: string
+  label: string
+  /** Second line under the label. */
+  description?: string
+  icon?: string
+  /** Right-aligned hint, e.g. "⌘P". */
+  shortcut?: string
+  /** Extra search terms not shown but matched against the query. */
+  keywords?: string[]
+  /** Section heading this command sits under. */
+  group?: string
+  disabled?: boolean
+  /**
+   * Hidden from the default (empty-query) list — only surfaces once the user
+   * types something it matches. For rarely-used or destructive actions (prune,
+   * decommission, …) that shouldn't clutter the palette but stay reachable.
+   */
+  hidden?: boolean
+  onSelect?: () => void
+}
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    commands: Command[]
+    placeholder?: string
+    emptyText?: string
+    /** Bind a global ⌘K / Ctrl-K toggle. */
+    hotkey?: boolean
+  }>(),
+  { placeholder: "Type a command or search…", emptyText: "No results", hotkey: true },
+)
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void
+  (e: "select", command: Command): void
+}>()
+
+const query = ref("")
+const selectedIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+const scrollRef = ref<{ viewportEl: HTMLElement | null } | null>(null)
+
+// ── filtering + scoring ──────────────────────────────────────
+// No query → everything (grouped). With a query, score by where it hits:
+// label > keywords > description, then alphabetical. Mirrors the app palette.
+const ranked = computed<Command[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  // Empty query: show everything EXCEPT hidden commands (they only surface once
+  // typed). With a query, hidden commands rank like any other.
+  if (!q) return props.commands.filter((c) => !c.hidden)
+  return props.commands
+    .map((c) => {
+      const label = c.label.toLowerCase().includes(q)
+      const kw = (c.keywords ?? []).some((k) => k.toLowerCase().includes(q))
+      const desc = c.description?.toLowerCase().includes(q) ?? false
+      const score = (label ? 4 : 0) + (kw ? 3 : 0) + (desc ? 2 : 0)
+      return { c, score }
+    })
+    .filter((e) => e.score > 0)
+    .sort((a, b) => b.score - a.score || a.c.label.localeCompare(b.c.label))
+    .map((e) => e.c)
+})
+
+// Group preserving first-seen order; ungrouped commands sit under "".
+const grouped = computed<{ name: string; items: Command[] }[]>(() => {
+  const order: string[] = []
+  const map = new Map<string, Command[]>()
+  for (const c of ranked.value) {
+    const g = c.group ?? ""
+    if (!map.has(g)) {
+      map.set(g, [])
+      order.push(g)
+    }
+    map.get(g)!.push(c)
+  }
+  return order.map((name) => ({ name, items: map.get(name)! }))
+})
+
+// Flat list in render order — what arrow keys walk through.
+const flat = computed(() => grouped.value.flatMap((g) => g.items))
+function flatIndexOf(c: Command): number {
+  return flat.value.indexOf(c)
+}
+
+// ── highlight ────────────────────────────────────────────────
+// Split text around query terms (≥2 chars, longest-first) for <mark> wrapping,
+// without v-html. Multi-word queries highlight each term.
+interface Part {
+  text: string
+  hit: boolean
+}
+function highlight(value: string): Part[] {
+  const terms = [...new Set(query.value.toLowerCase().trim().split(/\s+/).filter((t) => t.length >= 2))].sort(
+    (a, b) => b.length - a.length,
+  )
+  if (!value || terms.length === 0) return value ? [{ text: value, hit: false }] : []
+  const lower = value.toLowerCase()
+  const parts: Part[] = []
+  let i = 0
+  while (i < value.length) {
+    let at = -1
+    let term = ""
+    for (const t of terms) {
+      const found = lower.indexOf(t, i)
+      if (found !== -1 && (at === -1 || found < at || (found === at && t.length > term.length))) {
+        at = found
+        term = t
+      }
+    }
+    if (at === -1) {
+      parts.push({ text: value.slice(i), hit: false })
+      break
+    }
+    if (at > i) parts.push({ text: value.slice(i, at), hit: false })
+    parts.push({ text: value.slice(at, at + term.length), hit: true })
+    i = at + term.length
+  }
+  return parts
+}
+
+// ── selection + keyboard ─────────────────────────────────────
+watch(query, () => (selectedIndex.value = 0))
+watch(
+  () => flat.value.length,
+  (len) => {
+    if (selectedIndex.value >= len) selectedIndex.value = Math.max(0, len - 1)
+  },
+)
+watch([selectedIndex, () => flat.value.map((c) => c.id).join("|")], async () => {
+  await nextTick()
+  scrollSelectedIntoView()
+})
+
+function scrollSelectedIntoView() {
+  const el = scrollRef.value?.viewportEl?.querySelector<HTMLElement>(
+    `[data-cmd-index="${selectedIndex.value}"]`,
+  )
+  el?.scrollIntoView({ block: "nearest" })
+}
+
+function moveDown() {
+  const len = flat.value.length
+  if (len) selectedIndex.value = (selectedIndex.value + 1) % len
+}
+function moveUp() {
+  const len = flat.value.length
+  if (len) selectedIndex.value = (selectedIndex.value - 1 + len) % len
+}
+function runSelected() {
+  run(flat.value[selectedIndex.value])
+}
+
+function run(c: Command | undefined) {
+  if (!c || c.disabled) return
+  emit("select", c)
+  c.onSelect?.()
+  emit("update:open", false)
+}
+
+// Reset + focus when opening; clear on close.
+watch(
+  () => props.open,
+  async (o) => {
+    if (o) {
+      query.value = ""
+      selectedIndex.value = 0
+      await nextTick()
+      inputRef.value?.focus()
+    }
+  },
+)
+
+function onHotkey(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+    e.preventDefault()
+    emit("update:open", !props.open)
+  }
+}
+onMounted(() => {
+  if (props.hotkey) window.addEventListener("keydown", onHotkey)
+})
+onBeforeUnmount(() => window.removeEventListener("keydown", onHotkey))
+</script>
+
+<template>
+  <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogPortal>
+      <DialogOverlay
+        class="fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+      />
+      <DialogContent
+        class="fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] w-[min(92vw,40rem)] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
+        @open-auto-focus.prevent
+      >
+        <DialogTitle class="sr-only">Command palette</DialogTitle>
+        <DialogDescription class="sr-only">Search and run a command.</DialogDescription>
+
+        <!-- Filter -->
+        <div class="flex shrink-0 items-center gap-2.5 border-b border-line px-4">
+          <LpIcon name="lucide:search" :size="18" class="shrink-0 text-muted" />
+          <input
+            ref="inputRef"
+            v-model="query"
+            type="text"
+            :placeholder="placeholder"
+            class="h-12 min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-muted"
+            @keydown.down.prevent="moveDown"
+            @keydown.up.prevent="moveUp"
+            @keydown.enter.prevent="runSelected"
+          />
+          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">esc</kbd>
+        </div>
+
+        <!-- Results -->
+        <LpScrollArea ref="scrollRef" class="min-h-0 flex-1" content-class="p-2">
+          <p v-if="flat.length === 0" class="px-2 py-10 text-center text-sm text-muted">
+            {{ emptyText }}
+          </p>
+
+          <template v-for="group in grouped" :key="group.name">
+            <div
+              v-if="group.name"
+              class="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
+            >
+              {{ group.name }}
+            </div>
+            <button
+              v-for="c in group.items"
+              :key="c.id"
+              type="button"
+              :data-cmd-index="flatIndexOf(c)"
+              :disabled="c.disabled"
+              class="lp-cmd-item flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left text-sm outline-none transition-colors duration-[var(--duration-fast)] disabled:pointer-events-none disabled:opacity-45"
+              :class="flatIndexOf(c) === selectedIndex ? 'bg-brand-soft text-brand' : 'text-ink hover:bg-surface-soft/60'"
+              @click="run(c)"
+              @pointerenter="selectedIndex = flatIndexOf(c)"
+            >
+              <LpIcon v-if="c.icon" :name="c.icon" :size="16" class="shrink-0" />
+              <span class="min-w-0 flex-1">
+                <span class="block truncate font-medium">
+                  <template v-for="(p, pi) in highlight(c.label)" :key="`l${pi}`">
+                    <mark v-if="p.hit" class="rounded-xs bg-brand/25 text-ink">{{ p.text }}</mark>
+                    <template v-else>{{ p.text }}</template>
+                  </template>
+                </span>
+                <span v-if="c.description" class="mt-0.5 block truncate text-xs text-muted">
+                  <template v-for="(p, pi) in highlight(c.description)" :key="`d${pi}`">
+                    <mark v-if="p.hit" class="rounded-xs bg-brand/20 text-ink">{{ p.text }}</mark>
+                    <template v-else>{{ p.text }}</template>
+                  </template>
+                </span>
+              </span>
+              <kbd v-if="c.shortcut" class="shrink-0 text-xs text-muted">{{ c.shortcut }}</kbd>
+            </button>
+          </template>
+        </LpScrollArea>
+
+        <!-- Footer hints -->
+        <div
+          class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted"
+        >
+          <span class="flex items-center gap-1">
+            <kbd class="rounded border border-line px-1 text-[10px]">↑</kbd>
+            <kbd class="rounded border border-line px-1 text-[10px]">↓</kbd>
+            navigate
+          </span>
+          <span class="flex items-center gap-1">
+            <kbd class="rounded border border-line px-1 text-[10px]">↵</kbd>
+            select
+          </span>
+          <span class="ml-auto flex items-center gap-1">
+            <kbd class="rounded border border-line px-1 text-[10px]">esc</kbd>
+            close
+          </span>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<style scoped>
+/* Each result eases in; honours reduced motion. */
+.lp-cmd-item {
+  animation: lp-cmd-in 140ms ease-out both;
+}
+@keyframes lp-cmd-in {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-cmd-item {
+    animation: none;
+  }
+}
+</style>

package/src/components/LpConfirmDialog.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Confirmation dialog built on LpModal. Resolves an action via confirm/cancel.
+import LpButton from "./LpButton.vue"
+import LpModal from "./LpModal.vue"
+
+withDefaults(
+  defineProps<{
+    open?: boolean
+    title?: string
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    danger?: boolean
+  }>(),
+  { confirmLabel: "Confirm", cancelLabel: "Cancel" },
+)
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void
+  (e: "confirm"): void
+  (e: "cancel"): void
+}>()
+
+function confirm() {
+  emit("confirm")
+  emit("update:open", false)
+}
+function cancel() {
+  emit("cancel")
+  emit("update:open", false)
+}
+</script>
+
+<template>
+  <LpModal
+    :open="open"
+    :title="title"
+    :description="description"
+    @update:open="(v) => $emit('update:open', v)"
+  >
+    <slot />
+    <template #footer>
+      <LpButton variant="ghost" @click="cancel">{{ cancelLabel }}</LpButton>
+      <LpButton :variant="danger ? 'danger' : 'solid'" @click="confirm">
+        {{ confirmLabel }}
+      </LpButton>
+    </template>
+  </LpModal>
+</template>

package/src/components/LpContextMenu.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+/*
+ * Right-click context menu (reka ContextMenu). Same item shape as
+ * LpDropdownMenu, plus nested submenus (`children`) and a shortcut hint. The
+ * trigger is whatever you put in the default slot — right-clicking it (or
+ * long-press on touch) opens the menu at the pointer. Shares the floating-panel
+ * surface + option-row look with the rest of the kit via dropdown.ts.
+ */
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "reka-ui"
+import { computed } from "vue"
+import { POPOVER_PANEL } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+
+export interface ContextMenuItemDef {
+  label: string
+  icon?: string
+  /** Right-aligned hint, e.g. "⌘C". */
+  shortcut?: string
+  danger?: boolean
+  disabled?: boolean
+  separatorBefore?: boolean
+  onSelect?: () => void
+  /** Nested submenu. When present, onSelect is ignored. */
+  children?: ContextMenuItemDef[]
+}
+
+const props = defineProps<{ items: ContextMenuItemDef[] }>()
+
+// With no items, render just the trigger slot — no reka machinery — so the
+// element keeps the browser's native context menu. Lets callers wrap
+// unconditionally and pass [] to opt out per element.
+const enabled = computed(() => props.items.length > 0)
+
+const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
+const ITEM =
+  "group/item flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
+const ICON =
+  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
+</script>
+
+<template>
+  <slot v-if="!enabled" />
+
+  <ContextMenuRoot v-else>
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent :class="PANEL">
+        <template v-for="(item, i) in items" :key="i">
+          <ContextMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
+
+          <!-- Submenu branch -->
+          <ContextMenuSub v-if="item.children?.length">
+            <ContextMenuSubTrigger
+              :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand data-[state=open]:bg-brand-soft data-[state=open]:text-brand']"
+            >
+              <span class="flex items-center gap-2">
+                <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
+                {{ item.label }}
+              </span>
+              <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
+            </ContextMenuSubTrigger>
+            <ContextMenuPortal>
+              <ContextMenuSubContent :class="PANEL" :side-offset="2" :align-offset="-4">
+                <template v-for="(sub, j) in item.children" :key="j">
+                  <ContextMenuSeparator v-if="sub.separatorBefore" class="my-1 h-px bg-line" />
+                  <ContextMenuItem
+                    :class="[ITEM, 'justify-between', sub.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
+                    :disabled="sub.disabled"
+                    @select="sub.onSelect?.()"
+                  >
+                    <span class="flex items-center gap-2">
+                      <LpIcon v-if="sub.icon" :name="sub.icon" :size="15" :class="ICON" />
+                      {{ sub.label }}
+                    </span>
+                    <kbd v-if="sub.shortcut" class="text-xs text-muted">{{ sub.shortcut }}</kbd>
+                  </ContextMenuItem>
+                </template>
+              </ContextMenuSubContent>
+            </ContextMenuPortal>
+          </ContextMenuSub>
+
+          <!-- Leaf item -->
+          <ContextMenuItem
+            v-else
+            :class="[ITEM, 'justify-between', item.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
+            :disabled="item.disabled"
+            @select="item.onSelect?.()"
+          >
+            <span class="flex items-center gap-2">
+              <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
+              {{ item.label }}
+            </span>
+            <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
+          </ContextMenuItem>
+        </template>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>

package/src/components/LpDatePicker.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/*
+ * Date field + calendar popover. The model is an ISO date string ("YYYY-MM-DD",
+ * v-model), same as LpCalendar (which it embeds). The trigger shows a formatted
+ * date; picking a day fills the field and closes the popover. Clearable, with
+ * min/max + isDisabled forwarded to the calendar. Themed like the other inputs.
+ */
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
+import { computed, ref } from "vue"
+import { POPOVER_PANEL } from "./dropdown"
+import LpCalendar from "./LpCalendar.vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected date "YYYY-MM-DD" (v-model). */
+    modelValue?: string
+    placeholder?: string
+    min?: string
+    max?: string
+    isDisabled?: (iso: string) => boolean
+    clearable?: boolean
+    disabled?: boolean
+    invalid?: boolean
+    size?: "sm" | "md" | "lg"
+    /** Intl format for the displayed date. */
+    format?: Intl.DateTimeFormatOptions
+  }>(),
+  {
+    placeholder: "Pick a date",
+    size: "md",
+    format: () => ({ year: "numeric", month: "short", day: "numeric" }),
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | undefined): void
+}>()
+
+const open = ref(false)
+
+const display = computed(() => {
+  if (!props.modelValue) return ""
+  // Parse as local midnight so the formatted day can't drift across a timezone.
+  const [y, m, d] = props.modelValue.split("-").map(Number)
+  if (!y || !m || !d) return props.modelValue
+  return new Intl.DateTimeFormat(undefined, props.format).format(new Date(y, m - 1, d))
+})
+
+const shellSize = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}
+
+function onPick(v: string | undefined) {
+  emit("update:modelValue", v)
+  open.value = false
+}
+
+function clear() {
+  emit("update:modelValue", undefined)
+}
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open">
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        :disabled="disabled"
+        class="group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+        :class="[
+          shellSize[size],
+          invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+        ]"
+      >
+        <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
+        <span class="min-w-0 flex-1 truncate" :class="display ? '' : 'text-muted'">
+          {{ display || placeholder }}
+        </span>
+        <span
+          v-if="clearable && modelValue && !disabled"
+          role="button"
+          tabindex="-1"
+          aria-label="Clear"
+          class="shrink-0 text-muted transition-colors hover:text-ink"
+          @click.stop="clear"
+          @keydown.enter.stop="clear"
+        >
+          <LpIcon name="lucide:x" :size="15" />
+        </span>
+        <LpIcon
+          name="lucide:chevron-down"
+          :size="15"
+          class="shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180"
+        />
+      </button>
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        :side-offset="6"
+        align="start"
+        :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"
+      >
+        <LpCalendar
+          :model-value="modelValue"
+          :min="min"
+          :max="max"
+          :is-disabled="isDisabled"
+          class="border-0 bg-transparent"
+          @update:model-value="onPick"
+        />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/LpDisclosure.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/*
+ * Collapsible "show more" section built on reka Collapsible. The trigger is a
+ * full-width row with a chevron that rotates open; the body animates its height
+ * via the collapsible-down/up keyframes (driven by reka's content-height var).
+ *
+ * `scrollIntoView` opts the block into auto-revealing itself: when it opens, the
+ * root is smoothly scrolled into the nearest scroll container so the freshly
+ * shown content isn't left below the fold.
+ */
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
+import { type ComponentPublicInstance, nextTick, ref } from "vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Controlled open state. Omit to let the component own it (with `defaultOpen`). */
+    open?: boolean
+    defaultOpen?: boolean
+    /** Trigger label (or use the #trigger slot for richer content). */
+    label?: string
+    /** Optional iconify name shown left of the label. */
+    icon?: string
+    /**
+     * On open, smooth-scroll the block to the top of the nearest scroll
+     * container so its content isn't left below the fold. Fires immediately,
+     * in parallel with the expand.
+     */
+    scrollIntoView?: boolean
+  }>(),
+  { defaultOpen: false, scrollIntoView: false },
+)
+
+const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
+
+// reka's CollapsibleRoot renders a real element but exposes it as a component
+// instance, so reach through $el for the DOM node we scroll into view.
+const root = ref<ComponentPublicInstance | null>(null)
+
+function onToggle(value: boolean) {
+  emit("update:open", value)
+  if (value && props.scrollIntoView) {
+    // Scroll immediately, in parallel with the expand. nextTick only waits for
+    // reka to flip data-state; the header's position is stable while the body
+    // grows, so pinning the block's top to the viewport top with a smooth scroll
+    // feels instant and reveals the content as it animates open.
+    nextTick(() => {
+      const el = root.value?.$el as HTMLElement | undefined
+      el?.scrollIntoView({ behavior: "smooth", block: "start" })
+    })
+  }
+}
+</script>
+
+<template>
+  <CollapsibleRoot
+    ref="root"
+    :open="open"
+    :default-open="defaultOpen"
+    class="overflow-hidden rounded-control border border-line bg-surface-soft"
+    @update:open="onToggle"
+  >
+    <CollapsibleTrigger
+      class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
+      <span class="min-w-0 flex-1 text-left">
+        <slot name="trigger">{{ label }}</slot>
+      </span>
+      <LpIcon
+        name="lucide:chevron-down"
+        :size="16"
+        class="text-muted transition-transform duration-[var(--duration-fast)] group-data-[state=open]:rotate-180"
+      />
+    </CollapsibleTrigger>
+
+    <CollapsibleContent
+      class="group/content overflow-hidden data-[state=open]:animate-[collapsible-down_260ms_var(--ease-emphasized)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-emphasized)]"
+    >
+      <!--
+        The height animation lives on the wrapper; the inner panel fades + drifts
+        up so the content eases in rather than snapping at full opacity. The slide
+        is short (4px) and runs slightly behind the expand for a settled feel.
+      -->
+      <div
+        class="grid gap-2.5 px-3 pt-1 pb-3.5 group-data-[state=open]/content:animate-[disclosure-body-in_300ms_var(--ease-emphasized)] motion-reduce:animate-none"
+      >
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>