@leavepulse/ui 0.71.1 → 0.72.0

package/src/components/LpShift.vue

@@ -25,7 +25,8 @@
  * The mechanism — measure the natural size, pin it in pixels, tween — lives in
  * `useShift`, and LpModal drives its panel with the same composable.
  */
-import { computed } from "vue"
+import { computed, onBeforeUnmount, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
 import { useShift, type ShiftAxis } from "../composables/useShift"
 
 const props = withDefaults(
@@ -43,8 +44,26 @@ const props = withDefaults(
      * canvas), where a tween would fight the thing already animating it.
      */
     disabled?: boolean
+    /**
+     * Which edge the content holds to while the box catches up, for a flex
+     * row. A box pinned to the right (`ml-auto`) grows leftwards, and content
+     * laid out from its left edge throws every unchanged control to the right
+     * for the first frame and slides it back: the controls that did not change
+     * are the ones that jump. `"end"` keeps them where they are and lets the
+     * new one come in from the free side.
+     */
+    anchor?: "start" | "end"
+    /**
+     * Fade the box's own children in and out as they come and go. Without it
+     * the box glides but a control still pops into being as the edge uncovers
+     * it, and one that leaves is gone in a frame while its space closes up.
+     * Only direct children: what a child does inside itself is its own affair,
+     * so a control that changes its label carries the label as its `key` and
+     * is replaced, the old one fading as the new one arrives.
+     */
+    presence?: boolean
   }>(),
-  { axis: "height", disabled: false },
+  { axis: "height", disabled: false, anchor: "start", presence: false },
 )
 
 const { el, tweening, resizing } = useShift({
@@ -67,6 +86,157 @@ const TRANSITION_CLASS: Record<ShiftAxis, string> = {
 }
 const transitionClass = computed(() => TRANSITION_CLASS[props.axis])
 
+/*
+ * Presence. A leaving element is already out of the DOM when the observer
+ * hears of it, so where it stood is read from the last time it was seen: its
+ * offset from the anchored edge, which stays true while the box eases towards
+ * that edge. A clone stands there, out of the flow, and fades.
+ *
+ * What stays but is moved by the change (a title centred in a box that just
+ * lost its subtitle) glides from where it was instead of jumping (FLIP).
+ */
+const PRESENCE_MS = 200
+const MOVE_MS = 160
+const EASE = "cubic-bezier(0.2, 0, 0, 1)"
+const GHOST = "data-lp-shift-ghost"
+
+interface Seen {
+  from: number
+  top: number
+  width: number
+  height: number
+  x: number
+  y: number
+}
+
+const seen = new WeakMap<Element, Seen>()
+let presenceObserver: MutationObserver | undefined
+let rememberTimer: ReturnType<typeof setTimeout> | undefined
+let presenceSize: ResizeObserver | undefined
+
+function rememberSoon(box: HTMLElement, wait = PRESENCE_MS + 80) {
+  clearTimeout(rememberTimer)
+  rememberTimer = setTimeout(() => remember(box), wait)
+}
+
+function elementsOf(box: HTMLElement): Element[] {
+  return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node instanceof SVGElement && !(node instanceof SVGSVGElement)))
+}
+
+function remember(box: HTMLElement) {
+  const outer = box.getBoundingClientRect()
+  for (const node of elementsOf(box)) {
+    const r = node.getBoundingClientRect()
+    seen.set(node, {
+      from: props.anchor === "end" ? outer.right - r.right : r.left - outer.left,
+      top: r.top - outer.top,
+      width: r.width,
+      height: r.height,
+      x: r.left,
+      y: r.top,
+    })
+  }
+}
+
+const offset = () => (props.anchor === "end" ? -6 : 6)
+
+function ghost(box: HTMLElement, node: Element) {
+  const at = seen.get(node)
+  if (!at || !(node instanceof HTMLElement) || node.hasAttribute(GHOST) || at.width === 0) return
+  const copy = node.cloneNode(true) as HTMLElement
+  copy.setAttribute(GHOST, "")
+  copy.setAttribute("aria-hidden", "true")
+  copy.inert = true
+  Object.assign(copy.style, {
+    position: "absolute",
+    top: `${at.top}px`,
+    [props.anchor === "end" ? "right" : "left"]: `${at.from}px`,
+    width: `${at.width}px`,
+    height: `${at.height}px`,
+    margin: "0",
+    pointerEvents: "none",
+  })
+  box.appendChild(copy)
+  copy
+    .animate(
+      [
+        { opacity: 1, transform: "none", filter: "blur(0)" },
+        { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
+      ],
+      { duration: PRESENCE_MS, easing: EASE },
+    )
+    .finished.catch(() => undefined)
+    .finally(() => copy.remove())
+}
+
+function arrive(node: Element) {
+  if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST)) return
+  node.animate(
+    [
+      { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
+      { opacity: 1, transform: "none", filter: "blur(0)" },
+    ],
+    { duration: PRESENCE_MS, delay: 40, easing: EASE, fill: "backwards" },
+  )
+}
+
+function glide(node: Element) {
+  const was = seen.get(node)
+  if (!was || !(node instanceof HTMLElement)) return
+  const now = node.getBoundingClientRect()
+  const dx = was.x - now.left
+  const dy = was.y - now.top
+  if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return
+  node.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration: MOVE_MS, easing: EASE })
+}
+
+watch(
+  [el, () => props.presence && !props.disabled],
+  ([box, on]) => {
+    presenceObserver?.disconnect()
+    presenceObserver = undefined
+    presenceSize?.disconnect()
+    presenceSize = undefined
+    if (!box || !on) return
+    remember(box)
+    presenceObserver = new MutationObserver((records) => {
+      const real = records.filter(
+        (r) =>
+          ![...r.addedNodes, ...r.removedNodes].every((n) => n instanceof Element && n.hasAttribute(GHOST)),
+      )
+      if (real.length && !prefersReducedMotion()) {
+        const added = new Set<Node>()
+        for (const record of real) {
+          record.removedNodes.forEach((node) => node instanceof Element && ghost(box, node))
+          record.addedNodes.forEach((node) => {
+            added.add(node)
+            if (node instanceof Element) arrive(node)
+          })
+        }
+        // Measured in the next frame, which still comes before the paint: by
+        // then the box has taken the classes the change gave it (held to its
+        // edge), and the place an element lands is the one it will keep.
+        const parents = real.map((r) => r.target).filter((t): t is Element => t instanceof Element && !t.hasAttribute(GHOST))
+        requestAnimationFrame(() => {
+          for (const parent of parents) for (const child of parent.children) if (!added.has(child)) glide(child)
+        })
+      }
+      rememberSoon(box)
+    })
+    presenceObserver.observe(box, { childList: true, subtree: true })
+    presenceSize = new ResizeObserver(() => rememberSoon(box, 60))
+    presenceSize.observe(box)
+    void document.fonts?.ready.then(() => rememberSoon(box, 0))
+  },
+  { flush: "post" },
+)
+
+onBeforeUnmount(() => {
+  presenceObserver?.disconnect()
+  presenceSize?.disconnect()
+  clearTimeout(rememberTimer)
+})
+
 defineExpose({ resizing })
 </script>
 
@@ -83,6 +253,8 @@ defineExpose({ resizing })
         ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
         : '',
       resizing ? 'overflow-hidden' : '',
+      resizing && anchor === 'end' ? 'justify-end' : '',
+      presence ? 'relative' : '',
     ]"
   >
     <slot :resizing="resizing" />

package/src/components/LpSidebar.vue

@@ -13,11 +13,14 @@
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
  */
-import { computed, ref, useId } from "vue"
+import { computed, nextTick, ref, useId } from "vue"
+import { parseCombo, useHotkeys } from "../composables/useHotkeys"
 import { usePersisted } from "../composables/usePersisted"
 import { useLabels } from "../composables/useLpConfig"
 import LpDrawer from "./LpDrawer.vue"
+import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
+import LpTooltip from "./LpTooltip.vue"
 import LpSidebarNav from "./LpSidebarNav.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
 
@@ -50,7 +53,17 @@ const props = withDefaults(
     /** Placeholder for that field (defaults to the `search` label). */
     searchPlaceholder?: string
     /** Text overrides: `nav` names the landmark, `search` the filter field. */
-    labels?: Partial<{ nav: string; search: string }>
+    labels?: Partial<{
+      nav: string
+      search: string
+      pinned: string
+      pin: string
+      unpin: string
+      expand: string
+      compact: string
+      expandRail: string
+      resize: string
+    }>
     /** The query, when the app wants to own it (v-model:search). */
     search?: string
     /** Show a skeleton placeholder instead of the items. */
@@ -126,6 +139,44 @@ const props = withDefaults(
      * see LpSidebarNav for why a tall nav keeps it pinned.
      */
     hoverFollow?: boolean
+    /**
+     * Icons only (v-model:compact): each row's name, count and the pages under
+     * it move into a card beside the icon. With `resizable` the person decides,
+     * and the choice is remembered under `persist`.
+     */
+    compact?: boolean
+    /**
+     * The person sizes the rail: drag its edge (double-click resets), drag it
+     * narrow enough and it folds to icons, and a button and Ctrl+B fold it
+     * outright. One mechanism, not two: a narrow rail that only truncates its
+     * labels is the worst of both, so below a point it becomes the icon rail.
+     */
+    resizable?: boolean
+    /** Rail width bounds while resizing, in px. */
+    minWidth?: number
+    maxWidth?: number
+    /** The key that folds the rail when `resizable`. False turns it off. */
+    compactHotkey?: string | false
+    /**
+     * Rows offer "Pin to top" in their menu, and pinned pages lead the nav
+     * (v-model:pinned, ids; remembered under `persist` when unbound).
+     */
+    pinnable?: boolean
+    pinned?: string[]
+    /** How long the pointer rests on a row with a `preview` before its card opens, in ms. */
+    previewDelay?: number
+    /**
+     * Mark the app as not production: a coloured band along the top of the rail
+     * with the label hanging from it ("staging", "local"). It is there so an
+     * edit on the test copy is not mistaken for one on the real thing; leave it
+     * unset in production.
+     */
+    environment?: string | { label: string; tone?: "warning" | "danger" | "action" | "brand" }
+    /**
+     * The app's hint system (createHintSystem). Rows that name a `hintPage`
+     * then mark unread news on it with a dot, with nothing for the app to wire.
+     */
+    hints?: { unreadNews: (page?: string) => readonly unknown[] }
   }>(),
   {
     skeletonRows: 6,
@@ -136,6 +187,11 @@ const props = withDefaults(
     variant: "rail",
     autoCollapseAfter: 14,
     hoverFollow: false,
+    compact: undefined,
+    minWidth: 180,
+    maxWidth: 420,
+    compactHotkey: "Ctrl+B",
+    previewDelay: 900,
   },
 )
 
@@ -145,15 +201,47 @@ const emit = defineEmits<{
   (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
   (e: "update:search", value: string): void
+  (e: "update:compact", value: boolean): void
+  (e: "update:pinned", ids: string[]): void
 }>()
 
-const text = useLabels("sidebar", { nav: "Sidebar", search: "Search" }, () => props.labels)
+defineSlots<{
+  /** The brand; `compact` says the rail is down to icons. */
+  header?: (props: { compact?: boolean }) => unknown
+  actions?: (props: { compact?: boolean }) => unknown
+  footer?: (props: { compact?: boolean }) => unknown
+  item?: (props: { item: SidebarItem; active: boolean }) => unknown
+}>()
+
+const text = useLabels(
+  "sidebar",
+  {
+    nav: "Sidebar",
+    search: "Search",
+    pinned: "Pinned",
+    pin: "Pin to top",
+    unpin: "Unpin",
+    expand: "Show the pages under it",
+    compact: "Collapse the sidebar",
+    expandRail: "Expand the sidebar",
+    resize: "Drag to resize, double-click to reset",
+  },
+  () => props.labels,
+)
 const placeholder = computed(() => props.searchPlaceholder ?? text.value.search)
 
+function withNews(item: SidebarItem): SidebarItem {
+  const children = item.children?.map(withNews)
+  const pages = item.hintPage === undefined ? [] : Array.isArray(item.hintPage) ? item.hintPage : [item.hintPage]
+  const fresh = !!props.hints && pages.some((p) => props.hints!.unreadNews(p).length > 0)
+  return fresh || children ? { ...item, children, dot: item.dot || fresh } : item
+}
+
 // Normalise both inputs to a single section list.
-const allGroups = computed<SidebarSection[]>(() =>
-  props.sections ?? (props.items ? [{ items: props.items }] : []),
-)
+const allGroups = computed<SidebarSection[]>(() => {
+  const groups = props.sections ?? (props.items ? [{ items: props.items }] : [])
+  return props.hints ? groups.map((g) => ({ ...g, items: g.items.map(withNews) })) : groups
+})
 
 /*
  * The filter query. Controlled through v-model:search when the app wants it —
@@ -179,6 +267,13 @@ function matches(item: SidebarItem, needle: string): boolean {
   return (item.keywords ?? []).some((k) => normalise(k).includes(needle))
 }
 
+/** The item if it matches, with every page under it; else only the pages under it that match. */
+function narrowed(item: SidebarItem, needle: string): SidebarItem | null {
+  if (matches(item, needle)) return item
+  const children = (item.children ?? []).filter((c) => matches(c, needle))
+  return children.length ? { ...item, children } : null
+}
+
 const groups = computed<SidebarSection[]>(() => {
   const needle = normalise(query.value.trim())
   if (!needle) return allGroups.value
@@ -186,7 +281,10 @@ const groups = computed<SidebarSection[]>(() => {
   // under it reads as a section that failed to load rather than one that
   // matched nothing.
   return allGroups.value
-    .map((section) => ({ ...section, items: section.items.filter((i) => matches(i, needle)) }))
+    .map((section) => ({
+      ...section,
+      items: section.items.map((i) => narrowed(i, needle)).filter((i): i is SidebarItem => i !== null),
+    }))
     .filter((section) => section.items.length > 0)
 })
 
@@ -226,7 +324,7 @@ const autoCollapsed = computed<string[]>(() => {
   const limit = props.autoCollapseAfter
   if (!limit || navLength.value <= limit) return []
   return groups.value
-    .filter((g) => g.collapsible && !g.items.some(itemActive))
+    .filter((g) => g.collapsible && !g.items.some((i) => itemActive(i) || !!i.children?.some(itemActive)))
     .map(keyOf)
     .filter(Boolean)
 })
@@ -246,6 +344,117 @@ function toggleSection(key: string, collapsed: boolean) {
   emit("update:collapsed", next)
 }
 
+/*
+ * Compact and width. Bound, the app owns them; unbound, the sidebar keeps them,
+ * across visits under `persist`.
+ */
+const ownCompact = usePersisted<boolean>(() => props.persist && `lp-sidebar:${props.persist}:compact`, false)
+const isCompact = computed(() => props.compact ?? ownCompact.value)
+function setCompact(value: boolean) {
+  ownCompact.value = value
+  emit("update:compact", value)
+}
+
+const ENV_TONE = {
+  warning: "bg-accent text-ink-inverse",
+  danger: "bg-danger text-white",
+  action: "bg-action text-ink-inverse",
+  brand: "bg-brand text-ink-inverse",
+} as const
+const env = computed(() => {
+  const e = props.environment
+  if (!e) return null
+  const { label, tone = "warning" } = typeof e === "string" ? { label: e } : e
+  return { label, tone: ENV_TONE[tone] }
+})
+
+const DEFAULT_WIDTH = 240
+const COMPACT_WIDTH = 64
+const ownWidth = usePersisted<number>(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH)
+const dragging = ref(false)
+
+const railWidth = computed(() => {
+  if (isCompact.value) return `${COMPACT_WIDTH}px`
+  if (props.resizable) return `${ownWidth.value}px`
+  return props.width
+})
+
+/*
+ * Dragging past the narrowest width folds the rail to icons, and dragging a
+ * folded rail out unfolds it: below a point labels only truncate to nothing
+ * useful, and the icon rail is the honest form of "narrow".
+ */
+const FOLD_AT = 132
+function startResize(event: PointerEvent) {
+  if (event.button !== 0) return
+  const handle = event.currentTarget as HTMLElement
+  handle.setPointerCapture(event.pointerId)
+  const from = event.clientX
+  const start = isCompact.value ? COMPACT_WIDTH : ownWidth.value
+  dragging.value = true
+  const move = (e: PointerEvent) => {
+    const wanted = start + (e.clientX - from)
+    if (wanted < FOLD_AT) {
+      // Folded by dragging: the width it unfolds to is the one it had, not
+      // the narrowest the drag passed through on its way down.
+      if (!isCompact.value) setCompact(true)
+      if (start !== COMPACT_WIDTH) ownWidth.value = start
+      return
+    }
+    if (isCompact.value) setCompact(false)
+    ownWidth.value = Math.round(Math.min(props.maxWidth, Math.max(props.minWidth, wanted)))
+  }
+  const stop = () => {
+    dragging.value = false
+    handle.removeEventListener("pointermove", move)
+    handle.removeEventListener("pointerup", stop)
+    handle.removeEventListener("pointercancel", stop)
+  }
+  handle.addEventListener("pointermove", move)
+  handle.addEventListener("pointerup", stop)
+  handle.addEventListener("pointercancel", stop)
+}
+const railEl = ref<HTMLElement | null>(null)
+async function searchFromCompact() {
+  setCompact(false)
+  await nextTick()
+  railEl.value?.querySelector<HTMLInputElement>("input")?.focus()
+}
+
+function resetWidth() {
+  ownWidth.value = DEFAULT_WIDTH
+  setCompact(false)
+}
+
+useHotkeys(() =>
+  props.resizable && props.compactHotkey
+    ? [
+        {
+          ...parseCombo(props.compactHotkey),
+          help: { group: text.value.nav, label: text.value.compact, combo: props.compactHotkey },
+          handler: () => setCompact(!isCompact.value),
+        },
+      ]
+    : [],
+)
+
+/* Pinned pages, by id; unbound they are kept under `persist`. */
+const ownPinned = usePersisted<string[]>(() => props.persist && `lp-sidebar:${props.persist}:pinned`, [], {
+  validate: (value): value is string[] => Array.isArray(value) && value.every((k) => typeof k === "string"),
+})
+const pinnedIds = computed(() => props.pinned ?? ownPinned.value)
+const everyItem = computed(() => allGroups.value.flatMap((g) => g.items.flatMap((i) => [i, ...(i.children ?? [])])))
+const pinnedItems = computed<SidebarItem[]>(() =>
+  props.pinnable
+    ? pinnedIds.value.map((id) => everyItem.value.find((i) => i.id === id)).filter((i): i is SidebarItem => !!i)
+    : [],
+)
+function togglePin(id: string) {
+  const next = pinnedIds.value.includes(id) ? pinnedIds.value.filter((k) => k !== id) : [...pinnedIds.value, id]
+  ownPinned.value = next
+  emit("update:pinned", next)
+}
+
 function activate(item: SidebarItem) {
   if (item.disabled) return
   emit("update:modelValue", item.id)
@@ -291,12 +500,28 @@ defineOptions({ inheritAttrs: false })
 <template>
   <!-- Desktop / always-on rail -->
   <nav
-    class="h-full flex-col gap-1 p-3"
-    :class="[railClass, chromeClass, width ? '' : 'w-60']"
-    :style="width ? { width } : undefined"
+    ref="railEl"
+    class="relative h-full shrink-0 flex-col gap-1"
+    :class="[
+      railClass,
+      chromeClass,
+      isCompact ? 'px-2 py-3' : 'p-3',
+      railWidth ? '' : 'w-60',
+      dragging ? '' : 'transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)] motion-reduce:transition-none',
+    ]"
+    :style="railWidth ? { width: railWidth } : undefined"
+    :data-compact="isCompact || undefined"
     :aria-label="text.nav"
     v-bind="$attrs"
   >
+    <div v-if="env" class="pointer-events-none absolute inset-x-0 top-0 z-20 h-[3px]" :class="env.tone" />
+    <span
+      v-if="env && !isCompact"
+      class="pointer-events-none absolute left-1/2 top-0 z-20 -translate-x-1/2 rounded-b-small px-2 pb-0.5 text-[10px] font-semibold uppercase tracking-wide"
+      :class="env.tone"
+    >
+      {{ env.label }}
+    </span>
     <!-- Rail: edge-to-edge (negative margins cancel the p-3) and h-16 to match
          the app header, so its bottom hairline continues the header's border-b.
          Panel: kept inside the padding — bleeding to the edge would cut across
@@ -305,18 +530,33 @@ defineOptions({ inheritAttrs: false })
       v-if="$slots.header"
       class="mb-3 flex shrink-0 items-center"
       :class="[
-        variant === 'panel' ? 'pb-3' : '-mx-3 -mt-3 h-16 px-3',
+        variant === 'panel' ? 'pb-3' : isCompact ? '-mx-2 -mt-3 h-16 overflow-hidden' : '-mx-3 -mt-3 h-16 px-3',
         divider ? 'border-b border-line' : '',
       ]"
     >
-      <slot name="header" />
+      <div v-if="isCompact" class="flex w-16 shrink-0 justify-center">
+        <slot name="header" :compact="true" />
+      </div>
+      <slot v-else name="header" :compact="false" />
     </div>
 
     <!-- The filter sits between the brand and the nav: it belongs to the list,
          not to the header, and a person reaching for it is already looking at
          the items. -->
+    <!-- Folded, the filter is a button: a field forty pixels wide holds no
+         query, so the rail opens to give it room and puts the caret in it. -->
+    <LpTooltip v-if="searchable && isCompact" :content="placeholder" side="right">
+      <button
+        type="button"
+        class="mb-2 ml-1 grid size-10 shrink-0 place-items-center rounded-control text-muted outline-none transition-colors hover:bg-ink/[0.05] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+        :aria-label="placeholder"
+        @click="searchFromCompact"
+      >
+        <LpIcon name="lucide:search" :size="17" />
+      </button>
+    </LpTooltip>
     <LpInput
-      v-if="searchable"
+      v-if="searchable && !isCompact"
       v-model="query"
       size="sm"
       icon="lucide:search"
@@ -328,6 +568,11 @@ defineOptions({ inheritAttrs: false })
     <LpSidebarNav
       :groups="groups"
       :pill-id="railPillId"
+      :compact="isCompact"
+      :pinnable="pinnable"
+      :pinned="pinnedItems"
+      :preview-delay="previewDelay"
+      :labels="text"
       :item-active="itemActive"
       :loading="loading"
       :skeleton-rows="skeletonRows"
@@ -336,21 +581,57 @@ defineOptions({ inheritAttrs: false })
       :hover-follow="hoverFollow"
       @activate="activate"
       @toggle-section="toggleSection"
+      @toggle-pin="togglePin"
     >
       <template v-if="$slots.item" #item="slotProps">
         <slot name="item" v-bind="slotProps" />
       </template>
     </LpSidebarNav>
 
+    <LpTooltip v-if="resizable" :content="isCompact ? text.expandRail : text.compact" side="right">
+      <button
+        type="button"
+        class="mt-1 flex h-8 shrink-0 items-center gap-2 rounded-control px-3 text-xs text-muted outline-none transition-colors hover:bg-ink/[0.05] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+        :class="isCompact ? 'ml-1 w-10 justify-center px-0' : ''"
+        :aria-label="isCompact ? text.expandRail : text.compact"
+        :aria-pressed="isCompact"
+        @click="setCompact(!isCompact)"
+      >
+        <LpIcon :name="isCompact ? 'lucide:panel-left-open' : 'lucide:panel-left-close'" :size="16" class="shrink-0" />
+        <span v-if="!isCompact" class="truncate">{{ text.compact }}</span>
+      </button>
+    </LpTooltip>
+
     <!-- Actions (search, "new …") sit just above the footer, pinned to the
          bottom of the rail and outside the scroll region — not trailing the
          nav list. -->
-    <div v-if="$slots.actions" class="mt-2 flex shrink-0 flex-col gap-2">
-      <slot name="actions" />
+    <div v-if="$slots.actions" class="mt-2 flex shrink-0 flex-col gap-2" :class="isCompact ? 'w-12 items-center' : ''">
+      <slot name="actions" :compact="isCompact" />
     </div>
 
-    <div v-if="$slots.footer" class="mt-2 shrink-0 border-t border-line pt-3">
-      <slot name="footer" />
+    <div v-if="$slots.footer" class="mt-2 shrink-0 overflow-hidden border-t border-line pt-3">
+      <div v-if="isCompact" class="flex w-12 justify-center">
+        <slot name="footer" :compact="true" />
+      </div>
+      <slot v-else name="footer" :compact="false" />
+    </div>
+
+    <!-- The edge itself is the handle: a few pixels either side of the
+         hairline, a brand line while it is held. -->
+    <div
+      v-if="resizable && variant === 'rail'"
+      role="separator"
+      aria-orientation="vertical"
+      :aria-label="text.resize"
+      :title="text.resize"
+      class="group/resize absolute inset-y-0 -right-1.5 z-10 w-3 cursor-col-resize touch-none"
+      @pointerdown="startResize"
+      @dblclick="resetWidth"
+    >
+      <span
+        class="absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-brand opacity-0 transition-opacity duration-(--duration-fast) group-hover/resize:opacity-60"
+        :class="dragging ? '!opacity-100' : ''"
+      />
     </div>
   </nav>
 
@@ -389,6 +670,10 @@ defineOptions({ inheritAttrs: false })
       <LpSidebarNav
         :groups="groups"
         :pill-id="drawerPillId"
+        :pinnable="pinnable"
+        :pinned="pinnedItems"
+        :preview-delay="previewDelay"
+        :labels="text"
         :item-active="itemActive"
         :loading="loading"
         :skeleton-rows="skeletonRows"
@@ -397,6 +682,7 @@ defineOptions({ inheritAttrs: false })
         :hover-follow="hoverFollow"
         @activate="activate"
         @toggle-section="toggleSection"
+        @toggle-pin="togglePin"
       >
         <template v-if="$slots.item" #item="slotProps">
           <slot name="item" v-bind="slotProps" />