@leavepulse/ui 0.12.0

package/src/components/LayoutNode.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { Motion } from "motion-v"
+import { computed, ref } from "vue"
+import type { LayoutNode, Leaf, Side, Split } from "../layout/tree"
+import type { BlockRegistry } from "../layout/registry"
+import { blockTitle } from "../layout/registry"
+import LpIcon from "./LpIcon.vue"
+
+const props = defineProps<{
+  node: LayoutNode
+  dragId: string | null
+  edit: boolean
+  registry?: BlockRegistry
+}>()
+
+const emit = defineEmits<{
+  (e: "dragstart", id: string): void
+  (e: "dragend"): void
+  (e: "drop", targetId: string, side: Side): void
+  (e: "set-active", leafId: string, index: number): void
+  (e: "remove-block", leafId: string, index: number): void
+  (e: "reorder-tab", leafId: string, from: number, to: number): void
+  (e: "resize", parent: Split, index: number, deltaFraction: number): void
+}>()
+
+// Explicit slot shape so the recursive #block pass-through types cleanly.
+defineSlots<{
+  block(props: { block: string; leafId: string; edit: boolean }): unknown
+}>()
+
+const hoverSide = ref<Side | null>(null)
+
+// Tab reordering is ALWAYS available (independent of edit mode). `tabDrag` holds
+// the index of the tab being dragged within this cell; `tabOver` the index it's
+// hovering, so we can show an insertion cue. Reordering stays inside the cell.
+const tabDrag = ref<number | null>(null)
+const tabOver = ref<number | null>(null)
+
+function onTabDragStart(index: number, ev: DragEvent) {
+  tabDrag.value = index
+  // Mark as a move so the OS cursor is right; data is unused (in-cell only).
+  ev.dataTransfer?.setData("text/plain", String(index))
+  if (ev.dataTransfer) ev.dataTransfer.effectAllowed = "move"
+}
+function onTabDragOver(index: number, ev: DragEvent) {
+  if (tabDrag.value === null) return
+  ev.preventDefault()
+  tabOver.value = index
+}
+function onTabDrop(index: number) {
+  const from = tabDrag.value
+  tabDrag.value = null
+  tabOver.value = null
+  if (from === null || from === index || !leaf.value) return
+  emit("reorder-tab", leaf.value.id, from, index)
+}
+function onTabDragEnd() {
+  tabDrag.value = null
+  tabOver.value = null
+}
+
+const hintInset: Record<Side, string> = {
+  left: "inset-y-0 left-0 right-1/2",
+  right: "inset-y-0 right-0 left-1/2",
+  top: "inset-x-0 top-0 bottom-1/2",
+  bottom: "inset-x-0 bottom-0 top-1/2",
+  center: "inset-[12%]",
+}
+
+// A leaf shows its tab bar when it actually stacks tabs, or always in edit mode
+// (so a single-block cell still has a draggable handle + a close affordance).
+const leaf = computed(() => (props.node.kind === "leaf" ? (props.node as Leaf) : null))
+const showTabs = computed(() => !!leaf.value && (props.edit || leaf.value.blocks.length > 1))
+const activeBlock = computed(() => leaf.value?.blocks[leaf.value.active] ?? "")
+
+function tabTitle(id: string): string {
+  return props.registry ? blockTitle(props.registry, id) : id
+}
+function tabIcon(id: string): string | undefined {
+  return props.registry?.[id]?.icon
+}
+function tabClosable(id: string): boolean {
+  return props.registry?.[id]?.closable !== false
+}
+
+function onDragOver(ev: DragEvent) {
+  ev.preventDefault()
+  const el = ev.currentTarget as HTMLElement
+  const r = el.getBoundingClientRect()
+  const px = (ev.clientX - r.left) / r.width
+  const py = (ev.clientY - r.top) / r.height
+  const edge = 0.3
+  if (px < edge) hoverSide.value = "left"
+  else if (px > 1 - edge) hoverSide.value = "right"
+  else if (py < edge) hoverSide.value = "top"
+  else if (py > 1 - edge) hoverSide.value = "bottom"
+  else hoverSide.value = "center"
+}
+
+function startSplitter(ev: PointerEvent, parent: Split, index: number) {
+  ev.preventDefault()
+  const host = (ev.currentTarget as HTMLElement).parentElement
+  if (!host) return
+  const rect = host.getBoundingClientRect()
+  const horizontal = parent.dir === "row"
+  const span = horizontal ? rect.width : rect.height
+  let last = horizontal ? ev.clientX : ev.clientY
+
+  const move = (e: PointerEvent) => {
+    const cur = horizontal ? e.clientX : e.clientY
+    emit("resize", parent, index, (cur - last) / span)
+    last = cur
+  }
+  const up = () => {
+    window.removeEventListener("pointermove", move)
+    window.removeEventListener("pointerup", up)
+  }
+  window.addEventListener("pointermove", move)
+  window.addEventListener("pointerup", up)
+}
+</script>
+
+<template>
+  <!-- Container: children + splitters between them -->
+  <div
+    v-if="node.kind === 'split'"
+    class="flex min-h-0 min-w-0 flex-1"
+    :class="node.dir === 'row' ? 'flex-row' : 'flex-col'"
+  >
+    <template v-for="(child, i) in node.children" :key="child.id">
+      <LayoutNode
+        :node="child"
+        :drag-id="dragId"
+        :edit="edit"
+        :registry="registry"
+        :style="{ flexGrow: child.size, flexBasis: '0px' }"
+        @dragstart="(id) => emit('dragstart', id)"
+        @dragend="emit('dragend')"
+        @drop="(t, s) => emit('drop', t, s)"
+        @set-active="(l, idx) => emit('set-active', l, idx)"
+        @remove-block="(l, idx) => emit('remove-block', l, idx)"
+        @reorder-tab="(l, from, to) => emit('reorder-tab', l, from, to)"
+        @resize="(p, idx, d) => emit('resize', p, idx, d)"
+      >
+        <template #block="slotProps">
+          <slot name="block" v-bind="slotProps" />
+        </template>
+      </LayoutNode>
+      <div
+        v-if="edit && i < node.children.length - 1"
+        class="group relative z-[6] shrink-0 basis-2.5"
+        :class="node.dir === 'row' ? 'cursor-col-resize' : 'cursor-row-resize'"
+        @pointerdown="(e) => startSplitter(e, node as Split, i)"
+      >
+        <span
+          class="absolute inset-0 m-auto rounded-full bg-line transition-colors group-hover:bg-brand"
+          :class="node.dir === 'row' ? 'h-9 w-0.5' : 'h-0.5 w-9'"
+        />
+      </div>
+      <div
+        v-else-if="i < node.children.length - 1"
+        class="shrink-0 basis-2.5"
+      />
+    </template>
+  </div>
+
+  <!-- Leaf: a tab stack. Header (tabs) + the active block's content. -->
+  <Motion
+    v-else-if="leaf"
+    :layout="true"
+    :transition="{ type: 'spring', stiffness: 520, damping: 42, mass: 0.9 }"
+    class="relative flex min-h-0 min-w-0 flex-col"
+    :class="{ 'opacity-35': dragId === node.id }"
+  >
+    <!-- Tab bar. The bar itself is the cell's move-handle (edit only); each tab
+         is independently draggable to reorder within the cell — always. -->
+    <div
+      v-if="showTabs"
+      class="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-line px-1 py-1"
+      :draggable="edit"
+      @dragstart="emit('dragstart', node.id)"
+      @dragend="(hoverSide = null), emit('dragend')"
+    >
+      <button
+        v-for="(block, i) in leaf.blocks"
+        :key="block + i"
+        type="button"
+        draggable="true"
+        class="inline-flex max-w-40 cursor-grab items-center gap-1.5 rounded-control px-2 py-1 text-xs transition-colors active:cursor-grabbing"
+        :class="[
+          i === leaf.active
+            ? 'bg-surface-soft text-ink'
+            : 'text-muted hover:bg-surface-soft/60 hover:text-ink',
+          tabDrag === i ? 'opacity-40' : '',
+          tabOver === i && tabDrag !== null && tabDrag !== i ? 'ring-1 ring-brand' : '',
+        ]"
+        @click="emit('set-active', node.id, i)"
+        @dragstart.stop="onTabDragStart(i, $event)"
+        @dragover="onTabDragOver(i, $event)"
+        @drop.stop="onTabDrop(i)"
+        @dragend="onTabDragEnd"
+      >
+        <LpIcon v-if="tabIcon(block)" :name="tabIcon(block)!" :size="13" />
+        <span class="truncate">{{ tabTitle(block) }}</span>
+        <span
+          v-if="edit && tabClosable(block)"
+          class="grid size-3.5 place-items-center rounded-pill text-muted hover:bg-line hover:text-ink"
+          role="button"
+          :aria-label="`Close ${tabTitle(block)}`"
+          @click.stop="emit('remove-block', node.id, i)"
+        >
+          <LpIcon name="lucide:x" :size="11" />
+        </span>
+      </button>
+    </div>
+
+    <!-- Active block content. -->
+    <div class="flex min-h-0 min-w-0 flex-1">
+      <slot
+        name="block"
+        :block="activeBlock"
+        :leaf-id="node.id"
+        :edit="edit"
+      />
+    </div>
+
+    <!-- Drop zones (edit + something being dragged that isn't this cell). -->
+    <div
+      v-if="edit && dragId && dragId !== node.id"
+      class="absolute inset-0 z-[5]"
+      @dragover="onDragOver"
+      @dragleave="hoverSide = null"
+      @drop="
+        () => {
+          const s = hoverSide
+          hoverSide = null
+          if (s) emit('drop', node.id, s)
+        }
+      "
+    >
+      <div
+        v-if="hoverSide"
+        class="pointer-events-none absolute rounded-card border-2 border-brand bg-brand/25 transition-all"
+        :class="hintInset[hoverSide]"
+      />
+    </div>
+  </Motion>
+</template>

package/src/components/LpAlert.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants"
+import { computed } from "vue"
+import LpIcon from "./LpIcon.vue"
+
+const alert = tv({
+  base: "flex gap-3 rounded-card border p-4 text-sm",
+  variants: {
+    variant: {
+      info: "border-line bg-surface-soft text-ink",
+      success: "border-action/30 bg-action/10 text-ink",
+      warning: "border-accent/30 bg-accent/10 text-ink",
+      danger: "border-danger/30 bg-danger/10 text-ink",
+    },
+  },
+  defaultVariants: { variant: "info" },
+})
+
+type AlertVariants = VariantProps<typeof alert>
+
+const ICONS: Record<NonNullable<AlertVariants["variant"]>, string> = {
+  info: "lucide:info",
+  success: "lucide:circle-check",
+  warning: "lucide:triangle-alert",
+  danger: "lucide:octagon-alert",
+}
+
+const ICON_TONE: Record<NonNullable<AlertVariants["variant"]>, string> = {
+  info: "text-brand",
+  success: "text-action",
+  warning: "text-accent",
+  danger: "text-danger",
+}
+
+const props = withDefaults(
+  defineProps<{
+    variant?: AlertVariants["variant"]
+    title?: string
+    icon?: string
+  }>(),
+  { variant: "info" },
+)
+
+const classes = computed(() => alert({ variant: props.variant }))
+const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"])
+const iconTone = computed(() => ICON_TONE[props.variant ?? "info"])
+</script>
+
+<template>
+  <div :class="classes" role="alert">
+    <LpIcon :name="resolvedIcon" :size="18" :class="['mt-0.5 shrink-0', iconTone]" />
+    <div class="min-w-0">
+      <p v-if="title" class="font-semibold text-ink">{{ title }}</p>
+      <div :class="['text-muted-strong', title ? 'mt-0.5' : '']">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/LpAppShell.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+/*
+ * Full application shell: a fixed-height (h-dvh) flex frame holding the side
+ * navigation rail, a top header bar, and a single scrollable main region.
+ *
+ * It owns the things every product's cabinet/console layout was re-implementing
+ * by hand — and getting subtly wrong:
+ *  - the rail is full viewport height and never scrolls with the page (only
+ *    `main` scrolls, via LpScrollArea), so the sidebar footer stays pinned;
+ *  - a responsive burger that drives LpSidebar's mobile drawer;
+ *  - a default `isActive` (path prefix-match) and a default page title derived
+ *    from the nav items, so the header title and the active pill never drift.
+ *
+ * Everything product-specific goes through slots: #logo (brand in the rail
+ * header), #sidebar-actions / #sidebar-footer (pass-through to LpSidebar),
+ * #header-actions (right side of the top bar — bell, search, theme switch),
+ * #header-title (override the computed title), and the default slot (page body).
+ * Overlays that aren't part of the frame (command palette, toaster) live in the
+ * host next to <LpAppShell>.
+ */
+import { computed, ref, watch } from "vue"
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpScrollArea from "./LpScrollArea.vue"
+import LpSidebar from "./LpSidebar.vue"
+import type { SidebarItem, SidebarSection } from "./sidebar"
+
+export type { SidebarItem, SidebarSection } from "./sidebar"
+
+const props = withDefaults(
+  defineProps<{
+    /** Flat items, or sections for grouped nav. Forwarded to LpSidebar. */
+    items?: SidebarItem[]
+    sections?: SidebarSection[]
+    /** Active item id (v-model) when not using a custom `isActive`. */
+    modelValue?: string
+    /**
+     * The current route path. Enables the built-in prefix-match active test and
+     * the derived page title without the host wiring its own `isActive`. Pass
+     * `route.path`. Ignored when a custom `isActive` is provided.
+     */
+    path?: string
+    /**
+     * Custom active test (router-driven nav). Overrides `path`/`modelValue`.
+     */
+    isActive?: (item: SidebarItem) => boolean
+    /** Override the header title. Falls back to the active item's label. */
+    title?: string
+    /** Mobile drawer open state (v-model:open). */
+    open?: boolean
+    /** Tailwind breakpoint below which the rail becomes a drawer. */
+    mobileBreakpoint?: "sm" | "md" | "lg" | "xl"
+    /** Show the brand/header divider in the rail. */
+    divider?: boolean
+    /** Max content width inside main (Tailwind class), or null to fill. */
+    contentClass?: string
+    /**
+     * Full-bleed main: render the page slot directly into main with NO
+     * scroll-area wrapper and NO padding, so the page owns the whole region
+     * (for a canvas / map / graph that fills the viewport and pans internally).
+     */
+    fullBleed?: boolean
+    /** Loading skeleton for the nav. */
+    loading?: boolean
+  }>(),
+  {
+    mobileBreakpoint: "lg",
+    divider: true,
+    contentClass: "mx-auto w-full max-w-6xl",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", id: string): void
+  (e: "update:open", value: boolean): void
+  (e: "select", item: SidebarItem): void
+}>()
+
+// Normalise items/sections to a flat list for the title computation.
+const flatItems = computed<SidebarItem[]>(() =>
+  props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? []),
+)
+
+// Default active test: exact match for "/", prefix match (on a segment
+// boundary) otherwise — so "/billing" doesn't light up on "/billing-x".
+function defaultActive(item: SidebarItem): boolean {
+  if (props.path == null) return item.id === props.modelValue
+  if (item.id === "/") return props.path === "/"
+  return props.path === item.id || props.path.startsWith(`${item.id}/`)
+}
+const activeTest = computed(() => props.isActive ?? defaultActive)
+
+// Header title: explicit prop wins; else the longest-matching active item's
+// label (longest so nested routes resolve to their own entry, not a parent).
+const pageTitle = computed(() => {
+  if (props.title != null) return props.title
+  const test = activeTest.value
+  const match = [...flatItems.value]
+    .sort((a, b) => b.id.length - a.id.length)
+    .find((item) => test(item))
+  return match?.label ?? ""
+})
+
+// Mobile drawer: also close it on every path change, so href/select navigation
+// from a nav item dismisses it.
+const drawerOpen = computed({
+  get: () => props.open ?? false,
+  set: (v) => emit("update:open", v),
+})
+watch(
+  () => props.path,
+  () => {
+    if (drawerOpen.value) emit("update:open", false)
+  },
+)
+
+function onSelect(item: SidebarItem) {
+  emit("select", item)
+}
+function onModel(id: string) {
+  emit("update:modelValue", id)
+}
+
+const burgerHidden: Record<NonNullable<typeof props.mobileBreakpoint>, string> = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+}
+const burgerClass = computed(() => burgerHidden[props.mobileBreakpoint])
+
+// Expose the burger trigger so a host can omit its own header entirely.
+const _openDrawer = () => emit("update:open", true)
+defineExpose({ openDrawer: _openDrawer })
+</script>
+
+<template>
+  <div class="flex h-dvh overflow-hidden bg-surface text-ink">
+    <LpSidebar
+      :model-value="modelValue"
+      :items="items"
+      :sections="sections"
+      :is-active="activeTest"
+      :open="drawerOpen"
+      responsive
+      edge-open
+      :mobile-breakpoint="mobileBreakpoint"
+      :divider="divider"
+      :loading="loading"
+      class="shrink-0"
+      @update:model-value="onModel"
+      @update:open="(v) => emit('update:open', v)"
+      @select="onSelect"
+    >
+      <template v-if="$slots.logo" #header>
+        <slot name="logo" />
+      </template>
+      <template v-if="$slots['sidebar-actions']" #actions>
+        <slot name="sidebar-actions" />
+      </template>
+      <template v-if="$slots['sidebar-footer']" #footer>
+        <slot name="sidebar-footer" />
+      </template>
+      <template v-if="$slots['sidebar-item']" #item="slotProps">
+        <slot name="sidebar-item" v-bind="slotProps" />
+      </template>
+    </LpSidebar>
+
+    <!-- Main column: header + the single scroll region. -->
+    <div class="flex min-w-0 flex-1 flex-col">
+      <header
+        class="flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6"
+      >
+        <LpButton
+          :class="burgerClass"
+          variant="ghost"
+          size="sm"
+          square
+          aria-label="Open menu"
+          @click="emit('update:open', true)"
+        >
+          <LpIcon name="lucide:menu" :size="18" />
+        </LpButton>
+
+        <slot name="header-title">
+          <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
+        </slot>
+
+        <div v-if="$slots['header-actions']" class="ml-auto flex items-center gap-2">
+          <slot name="header-actions" />
+        </div>
+      </header>
+
+      <!-- full-bleed: page owns the whole region (canvas/map); otherwise the
+           single scroll region with padding. -->
+      <div v-if="fullBleed" class="min-h-0 flex-1 overflow-hidden">
+        <slot />
+      </div>
+      <LpScrollArea
+        v-else
+        class="min-h-0 flex-1"
+        :content-class="`px-4 py-6 md:px-6 ${contentClass}`"
+      >
+        <slot />
+      </LpScrollArea>
+    </div>
+
+    <slot name="overlays" />
+  </div>
+</template>