@leavepulse/ui 0.77.2 → 0.78.0

package/src/components/LpSelect.vue

@@ -16,6 +16,8 @@ export type SelectLabels = {
 </script>
 
 <script setup lang="ts" generic="V extends SelectValue = string">
+import IconCloseButton from "./IconCloseButton.vue"
+import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * One select to rule them all — built on reka-ui Combobox.
@@ -37,7 +39,7 @@ import {
   ComboboxViewport,
 } from "reka-ui"
 import { computed, nextTick, reactive, ref, useAttrs, useId, watch } from "vue"
-import { useFieldBlur, useFieldControl } from "../composables/useField"
+import { useFieldBlur, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
@@ -45,8 +47,8 @@ import LpIcon from "./LpIcon.vue"
 import OptionContent from "./OptionContent.vue"
 import LpRollingText from "./LpRollingText.vue"
 import type { LpOptionBase, OptionSelection } from "./options"
-import { fitChips, toggledValues } from "./select"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { evictOldest, fitChips, toggledValues } from "./select"
+import { nodeWindow, useOutsideGuard, usePortalTarget } from "../composables/useView"
 import { useResizeObserver } from "../composables/useResizeObserver"
 
 export type SelectValue = string | number
@@ -105,11 +107,7 @@ const props = withDefaults(
 )
 
 /* The text steps with the height, as in every other kit field: a small select beside a small input read a size larger. */
-const SIZE_HEIGHT = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-} as const
+const SIZE_HEIGHT = CONTROL_SIZE
 const anchorHeight = computed(() => SIZE_HEIGHT[props.size])
 
 const field = useFieldControl(() => ({
@@ -189,7 +187,38 @@ async function openFromKeyboard(event: KeyboardEvent) {
   const items = panel?.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])')
   const selected = panel?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
   const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0])
-  target?.focus()
+  // Something else may have kept the list shut: nothing to move into then.
+  if (isOpen.value) target?.focus()
+}
+
+/*
+ * reka reads the arrow keys from the search box. A list without one takes focus
+ * on an option, where its own handling put focus straight back on the option
+ * the list opened on, so that was all a keyboard could ever pick. Taken here,
+ * ahead of it.
+ */
+const LIST_KEYS = ["ArrowDown", "ArrowUp", "Home", "End", "Enter"]
+
+function moveInList(event: KeyboardEvent) {
+  if (props.searchable || serverSide.value || !LIST_KEYS.includes(event.key)) return
+  const list = event.currentTarget as HTMLElement
+  const items = Array.from(list.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])'))
+  if (!items.length) return
+  event.preventDefault()
+  event.stopPropagation()
+  const at = items.indexOf(list.ownerDocument.activeElement as HTMLElement)
+  if (event.key === "Enter") {
+    items[at]?.click()
+    return
+  }
+  const last = items.length - 1
+  const next = {
+    ArrowDown: at === last ? 0 : at + 1,
+    ArrowUp: at <= 0 ? last : at - 1,
+    Home: 0,
+    End: last,
+  }[event.key]
+  items[next ?? 0]?.focus()
 }
 
 // Leaving the field, not moving between its parts: the trigger and the list
@@ -219,7 +248,9 @@ function onListFocusOut(event: FocusEvent) {
  * The trigger's name. reka hard-codes aria-label="Show popup" on it, which hid
  * the field's label and the chosen value; aria-labelledby outranks aria-label,
  * so inside a labelled field the name is the label plus the value. On its own,
- * the consumer's aria-label, else the value or placeholder.
+ * the consumer's aria-label plus the value, else the value or placeholder: the
+ * name has to hold the text the button shows, or a voice user who says what
+ * they see ("click Alpha") cannot reach it (WCAG 2.5.3).
  */
 const attrs = useAttrs()
 const valueId = `lp-select-${useId()}-value`
@@ -227,7 +258,7 @@ const valueText = computed(() => (chips.value.length ? chipNames.value : display
 const triggerName = computed(() =>
   field.value.labelId
     ? { "aria-labelledby": `${field.value.labelId} ${valueId}`, "aria-label": undefined }
-    : { "aria-label": (attrs["aria-label"] as string | undefined) ?? valueText.value },
+    : { "aria-label": [attrs["aria-label"] as string | undefined, valueText.value].filter(Boolean).join(", ") },
 )
 
 // reka's Combobox forbids an empty-string item value (it reserves "" for
@@ -281,6 +312,7 @@ const filtered = computed(() => {
 type Shown = { label: string; hint?: string; image?: string; icon?: string }
 
 const remembered = reactive(new Map<SelectValue, Shown>())
+const REMEMBERED_LIMIT = 500
 
 function fromOption(o: SelectOption<V>): Shown {
   return { label: o.label, hint: o.description, image: o.image, icon: o.icon }
@@ -291,6 +323,7 @@ function remember(values: readonly SelectValue[]) {
     const o = props.options.find((x) => x.value === v)
     if (o) remembered.set(v, fromOption(o))
   }
+  evictOldest(remembered, new Set(values), REMEMBERED_LIMIT)
 }
 
 const modelList = computed<V[]>(() => {
@@ -355,7 +388,7 @@ function measure() {
   if (!row || !probe) return
   const kids = Array.from(probe.children) as HTMLElement[]
   const more = kids.pop()
-  const gap = Number.parseFloat(getComputedStyle(probe).columnGap) || 0
+  const gap = Number.parseFloat(nodeWindow(probe).getComputedStyle(probe).columnGap) || 0
   fit.value = fitChips(
     kids.map((k) => k.offsetWidth),
     row.clientWidth,
@@ -365,6 +398,9 @@ function measure() {
 }
 
 useResizeObserver(chipRow, () => measure())
+// The chips can change width while the row keeps its own: a web font arriving,
+// a theme. The probe is as wide as they are, so it notices.
+useResizeObserver(probeRow, () => measure())
 watch(chips, () => void nextTick(measure), { flush: "post", deep: true })
 
 const shownChips = computed(() => chips.value.slice(0, fit.value))
@@ -451,7 +487,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
         @keydown="openFromKeyboard"
         v-bind="triggerName"
         :aria-invalid="field.invalid || undefined"
-        :aria-describedby="field.describedBy"
+        :aria-describedby="mergeDescribedBy(rootAttrs['aria-describedby'], field.describedBy)"
         class="flex min-w-0 flex-1 items-center gap-2 outline-none"
       >
         <!-- Several picks read as chips (picture + name) that collapse into
@@ -527,20 +563,13 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
           </LpRollingText>
         </template>
       </ComboboxTrigger>
-      <button
+      <IconCloseButton
         v-if="clearable && hasValue && !field.disabled"
-        type="button"
-        class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
-        :aria-label="labels.clear"
+        inline
+        :label="labels.clear"
         @pointerdown.prevent
         @click="clear"
-      >
-        <LpIcon
-          name="lucide:x"
-          :size="16"
-          class="transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"
-        />
-      </button>
+      />
       <!-- A second way in for the pointer only: the main trigger already owns
            focus and the accessible name, so this one stays out of the tab order
            and the accessibility tree. -->
@@ -565,6 +594,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       <ComboboxContent
         :data-lp-field-part="partId"
         @focusout="onListFocusOut"
+        @keydown.capture="moveInList"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         position="popper"

package/src/components/LpShaderBackdrop.vue

@@ -35,6 +35,8 @@ export default { inheritAttrs: false }
  * - Unmounting releases the GL context, so a page that mounts and unmounts
  *   backdrops does not run into the browser's limit on live contexts.
  */
+import { clamp } from "../composables/clamp"
+import { nodeWindow } from "../composables/useView"
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { parseColor } from "./color"
 import { approach, frameDue, FRAGMENT_HEADER, PRESETS, tooSlow, VERTEX_SHADER, type ShaderPreset, type Vec3 } from "./shaderBackdrop"
@@ -95,7 +97,7 @@ const weakEngine = typeof navigator !== "undefined" && isBrokenBackdropEngine()
 const fallbackStyle = computed(() => ({ background: PRESETS[props.preset].fallback, opacity: Math.min(1, clamp01(props.intensity) * 1.15) }))
 
 function clamp01(n: number) {
-  return Math.max(0, Math.min(1, n))
+  return clamp(n, 0, 1)
 }
 
 // ── Theme colours ───────────────────────────────────────────────────────────
@@ -115,10 +117,10 @@ let paint: CanvasRenderingContext2D | null = null
 function tokenColor(name: string): Vec3 {
   if (!probe || !root.value) return [0, 0, 0]
   probe.style.color = `var(--color-${name})`
-  const css = getComputedStyle(probe).color
+  const css = nodeWindow(probe).getComputedStyle(probe).color
   const rgb = parseColor(css)
   if (rgb) return [rgb.r / 255, rgb.g / 255, rgb.b / 255]
-  paint ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true })
+  paint ??= probe.ownerDocument.createElement("canvas").getContext("2d", { willReadFrequently: true })
   if (!paint) return [0, 0, 0]
   paint.clearRect(0, 0, 1, 1)
   paint.fillStyle = "#000"
@@ -204,7 +206,7 @@ let pixelRatio = 1
 function sizeCanvas() {
   const el = canvas.value
   if (!el) return
-  const dpr = Math.min(weakEngine ? 1 : 2, window.devicePixelRatio || 1)
+  const dpr = Math.min(weakEngine ? 1 : 2, nodeWindow(el).devicePixelRatio || 1)
   pixelRatio = dpr * PRESETS[props.preset].scale
   const w = Math.max(1, Math.round(el.clientWidth * pixelRatio))
   const h = Math.max(1, Math.round(el.clientHeight * pixelRatio))
@@ -351,16 +353,17 @@ useResizeObserver(root, () => {
 })
 
 onMounted(() => {
-  probe = document.createElement("span")
+  const page = root.value?.ownerDocument ?? document
+  probe = page.createElement("span")
   probe.style.display = "none"
   root.value?.appendChild(probe)
 
   // Themes are applied as variables and attributes on <html>; a scheme switch can also come from the OS.
-  themeObserver = new MutationObserver(() => {
+  themeObserver = new (nodeWindow(page).MutationObserver)(() => {
     if (gl) refreshPalette()
   })
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] })
-  schemeQuery = window.matchMedia?.("(prefers-color-scheme: dark)")
+  themeObserver.observe(page.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] })
+  schemeQuery = nodeWindow(page).matchMedia?.("(prefers-color-scheme: dark)")
   schemeQuery?.addEventListener("change", refreshPalette)
 
   if (wantGl.value) start()
@@ -391,7 +394,7 @@ watch(
       }
       drawFrame()
       shown.value = true
-    }, durationToken("duration-medium"))
+    }, durationToken("duration-medium", undefined, root.value ?? undefined))
   },
 )
 watch(

package/src/components/LpShift.vue

@@ -25,6 +25,7 @@
  * The mechanism — measure the natural size, pin it in pixels, tween — lives in
  * `useShift`, and LpModal drives its panel with the same composable.
  */
+import { isElement, isHTMLElement, nodeWindow } from "../composables/useView"
 import { computed, onBeforeUnmount, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useShift, type ShiftAxis } from "../composables/useShift"
@@ -99,6 +100,7 @@ const transitionClass = computed(() => TRANSITION_CLASS[props.axis])
 const PRESENCE_MS = 200
 const MOVE_MS = 160
 const EASE = "cubic-bezier(0.2, 0, 0, 1)"
+const SVG_NS = "http://www.w3.org/2000/svg"
 const GHOST = "data-lp-shift-ghost"
 
 interface Seen {
@@ -120,7 +122,7 @@ function rememberSoon(box: HTMLElement, wait = PRESENCE_MS + 80) {
 }
 
 function elementsOf(box: HTMLElement): Element[] {
-  return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node instanceof SVGElement && !(node instanceof SVGSVGElement)))
+  return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node.namespaceURI === SVG_NS && node.localName !== "svg"))
 }
 
 function remember(box: HTMLElement) {
@@ -142,7 +144,7 @@ function remember(box: HTMLElement) {
 // override that animation's transform, and the marker would pop instead of
 // sliding.
 function inFlow(node: Element): boolean {
-  const position = getComputedStyle(node).position
+  const position = nodeWindow(node).getComputedStyle(node).position
   return position !== "absolute" && position !== "fixed"
 }
 
@@ -150,7 +152,7 @@ function inFlow(node: Element): boolean {
 // actions, a list re-keyed after a reload) is not a change anyone sees, so the
 // pair is left alone rather than flashing out and in.
 function signature(node: Node): string | undefined {
-  return node instanceof Element ? node.outerHTML : undefined
+  return isElement(node) ? node.outerHTML : undefined
 }
 
 function unchanged(records: MutationRecord[]): Set<Node> {
@@ -172,7 +174,7 @@ const offset = () => (props.anchor === "end" ? -6 : 6)
 
 function ghost(box: HTMLElement, node: Element) {
   const at = seen.get(node)
-  if (!at || !at.flow || !(node instanceof HTMLElement) || node.hasAttribute(GHOST) || at.width === 0) return
+  if (!at || !at.flow || !isHTMLElement(node) || node.hasAttribute(GHOST) || at.width === 0) return
   const copy = node.cloneNode(true) as HTMLElement
   copy.setAttribute(GHOST, "")
   copy.setAttribute("aria-hidden", "true")
@@ -207,7 +209,7 @@ function ghost(box: HTMLElement, node: Element) {
 }
 
 function arrive(node: Element) {
-  if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST) || !inFlow(node)) return
+  if (!isHTMLElement(node) || node.hasAttribute(GHOST) || !inFlow(node)) return
   node.animate(
     [
       { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
@@ -219,7 +221,7 @@ function arrive(node: Element) {
 
 function glide(node: Element) {
   const was = seen.get(node)
-  if (!was || !(node instanceof HTMLElement)) return
+  if (!was || !isHTMLElement(node)) return
   const now = node.getBoundingClientRect()
   const dx = was.x - now.left
   const dy = was.y - now.top
@@ -236,25 +238,26 @@ watch(
     presenceSize = undefined
     if (!box || !on) return
     remember(box)
-    presenceObserver = new MutationObserver((records) => {
+    const win = nodeWindow(box)
+    presenceObserver = new win.MutationObserver((records) => {
       const real = records.filter(
         (r) =>
-          ![...r.addedNodes, ...r.removedNodes].every((n) => n instanceof Element && n.hasAttribute(GHOST)),
+          ![...r.addedNodes, ...r.removedNodes].every((n) => isElement(n) && n.hasAttribute(GHOST)),
       )
-      if (real.length && !prefersReducedMotion()) {
+      if (real.length && !prefersReducedMotion(win)) {
         const added = new Set<Node>()
         const same = unchanged(real)
         for (const record of real) {
-          record.removedNodes.forEach((node) => node instanceof Element && !same.has(node) && ghost(box, node))
+          record.removedNodes.forEach((node) => isElement(node) && !same.has(node) && ghost(box, node))
           record.addedNodes.forEach((node) => {
             added.add(node)
-            if (node instanceof Element && !same.has(node)) arrive(node)
+            if (isElement(node) && !same.has(node)) 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))
+        const parents = real.map((r) => r.target).filter((t): t is Element => isElement(t) && !t.hasAttribute(GHOST))
         requestAnimationFrame(() => {
           for (const parent of parents) for (const child of parent.children) if (!added.has(child)) glide(child)
         })
@@ -262,9 +265,9 @@ watch(
       rememberSoon(box)
     })
     presenceObserver.observe(box, { childList: true, subtree: true })
-    presenceSize = new ResizeObserver(() => rememberSoon(box, 60))
+    presenceSize = new win.ResizeObserver(() => rememberSoon(box, 60))
     presenceSize.observe(box)
-    void document.fonts?.ready.then(() => rememberSoon(box, 0))
+    void box.ownerDocument.fonts?.ready.then(() => rememberSoon(box, 0))
   },
   { flush: "post" },
 )
@@ -274,7 +277,7 @@ watch(
 // resize, every child glides from where it was last seen.
 watch(resizing, (now) => {
   const box = el.value
-  if (!now || !box || !presenceObserver || prefersReducedMotion()) return
+  if (!now || !box || !presenceObserver || prefersReducedMotion(nodeWindow(box))) return
   requestAnimationFrame(() => {
     for (const child of box.children) if (!child.hasAttribute(GHOST)) glide(child)
   })

package/src/components/LpSidebar.vue

@@ -13,8 +13,10 @@
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
  */
-import { computed, nextTick, ref, useId } from "vue"
+import { clamp } from "../composables/clamp"
+import { computed, nextTick, onBeforeUnmount, ref, useId } from "vue"
 import { parseCombo, useHotkeys } from "../composables/useHotkeys"
+import { startPointerDrag } from "../composables/pointerDrag"
 import { usePersisted } from "../composables/usePersisted"
 import { useLabels } from "../composables/useLpConfig"
 import LpDrawer from "./LpDrawer.vue"
@@ -123,7 +125,7 @@ const props = withDefaults(
     persist?: string
     /**
      * Fold collapsible groups automatically once the nav has more than this
-     * many rows, counting headings and items alike.
+     * many rows, counting headings, items and the pages under them alike.
      *
      * The reason is the reader, not the pixels: a short nav is taken in at a
      * glance, a long one has to be searched, and searching a list you did not
@@ -310,9 +312,12 @@ const ownCollapsed = usePersisted<string[] | null>(
   { validate: (value): value is string[] | null => value === null || (Array.isArray(value) && value.every((k) => typeof k === "string")) },
 )
 
-/** Headings + items: what the eye actually has to walk past. */
-const navLength = computed(
-  () => groups.value.reduce((n, g) => n + g.items.length + (g.title ? 1 : 0), 0),
+/** Headings, items and their pages: what the eye actually has to walk past. */
+const navLength = computed(() =>
+  groups.value.reduce(
+    (n, g) => n + (g.title ? 1 : 0) + g.items.reduce((rows, i) => rows + 1 + (i.children?.length ?? 0), 0),
+    0,
+  ),
 )
 
 /*
@@ -340,7 +345,9 @@ function toggleSection(key: string, collapsed: boolean) {
   const next = collapsed
     ? [...new Set([...collapsedKeys.value, key])]
     : collapsedKeys.value.filter((k) => k !== key)
-  ownCollapsed.value = next
+  // A bound value is the app's: storing it too would surface a stale choice
+  // the day the binding goes. The same goes for compact and pins below.
+  if (props.collapsed === undefined) ownCollapsed.value = next
   emit("update:collapsed", next)
 }
 
@@ -351,7 +358,7 @@ function toggleSection(key: string, collapsed: boolean) {
 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
+  if (props.compact === undefined) ownCompact.value = value
   emit("update:compact", value)
 }
 
@@ -370,12 +377,20 @@ const env = computed(() => {
 
 const DEFAULT_WIDTH = 240
 const COMPACT_WIDTH = 64
-const ownWidth = usePersisted<number>(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH)
+const ownWidth = usePersisted<number>(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH, {
+  validate: (value): value is number => typeof value === "number" && Number.isFinite(value),
+})
 const dragging = ref(false)
 
+/*
+ * The bounds apply to what is drawn, not to what is kept: a width remembered
+ * under other bounds fits today's, and comes back if they widen again.
+ */
+const boundedWidth = (width: number) => clamp(width, props.minWidth, props.maxWidth)
+
 const railWidth = computed(() => {
   if (isCompact.value) return `${COMPACT_WIDTH}px`
-  if (props.resizable) return `${ownWidth.value}px`
+  if (props.resizable) return `${boundedWidth(ownWidth.value)}px`
   return props.width
 })
 
@@ -385,34 +400,32 @@ const railWidth = computed(() => {
  * useful, and the icon rail is the honest form of "narrow".
  */
 const FOLD_AT = 132
+let stopResize: (() => void) | null = null
+onBeforeUnmount(() => stopResize?.())
+
 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
+  const start = isCompact.value ? COMPACT_WIDTH : boundedWidth(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)
+  stopResize = startPointerDrag(event, {
+    move(e) {
+      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(boundedWidth(wanted))
+    },
+    end() {
+      dragging.value = false
+      stopResize = null
+    },
+  })
 }
 const railEl = ref<HTMLElement | null>(null)
 async function searchFromCompact() {
@@ -451,7 +464,7 @@ const pinnedItems = computed<SidebarItem[]>(() =>
 )
 function togglePin(id: string) {
   const next = pinnedIds.value.includes(id) ? pinnedIds.value.filter((k) => k !== id) : [...pinnedIds.value, id]
-  ownPinned.value = next
+  if (props.pinned === undefined) ownPinned.value = next
   emit("update:pinned", next)
 }
 
@@ -495,6 +508,32 @@ const chromeClass = computed(() =>
 // Vue can't auto-inherit a consumer-passed `class`. Take attrs over manually and
 // land them on the desktop rail (where a layout class like `shrink-0` belongs).
 defineOptions({ inheritAttrs: false })
+
+// The rail and the drawer draw the same list and the same search over it.
+const navBinds = computed(() => ({
+  groups: groups.value,
+  pinnable: props.pinnable,
+  pinned: pinnedItems.value,
+  previewDelay: props.previewDelay,
+  labels: text.value,
+  itemActive,
+  loading: props.loading,
+  skeletonRows: props.skeletonRows,
+  skeletonHeader: props.skeletonHeader,
+  collapsedKeys: collapsedKeys.value,
+  hoverFollow: props.hoverFollow,
+  onActivate: activate,
+  onToggleSection: toggleSection,
+  onTogglePin: togglePin,
+}))
+const searchField = computed(() => ({
+  size: "sm" as const,
+  icon: "lucide:search",
+  clearable: true,
+  class: "mb-2 shrink-0",
+  placeholder: placeholder.value,
+  "aria-label": placeholder.value,
+}))
 </script>
 
 <template>
@@ -558,30 +597,12 @@ defineOptions({ inheritAttrs: false })
     <LpInput
       v-if="searchable && !isCompact"
       v-model="query"
-      size="sm"
-      icon="lucide:search"
-      clearable
-      class="mb-2 shrink-0"
-      :placeholder="placeholder"
-      :aria-label="placeholder"
+      v-bind="searchField"
     />
     <LpSidebarNav
-      :groups="groups"
+      v-bind="navBinds"
       :pill-id="railPillId"
       :compact="isCompact"
-      :pinnable="pinnable"
-      :pinned="pinnedItems"
-      :preview-delay="previewDelay"
-      :labels="text"
-      :item-active="itemActive"
-      :loading="loading"
-      :skeleton-rows="skeletonRows"
-      :skeleton-header="skeletonHeader"
-      :collapsed-keys="collapsedKeys"
-      :hover-follow="hoverFollow"
-      @activate="activate"
-      @toggle-section="toggleSection"
-      @toggle-pin="togglePin"
     >
       <template v-if="$slots.item" #item="slotProps">
         <slot name="item" v-bind="slotProps" />
@@ -660,29 +681,11 @@ defineOptions({ inheritAttrs: false })
       <LpInput
         v-if="searchable"
         v-model="query"
-        size="sm"
-        icon="lucide:search"
-        clearable
-        class="mb-2 shrink-0"
-        :placeholder="placeholder"
-        :aria-label="placeholder"
+        v-bind="searchField"
       />
       <LpSidebarNav
-        :groups="groups"
+        v-bind="navBinds"
         :pill-id="drawerPillId"
-        :pinnable="pinnable"
-        :pinned="pinnedItems"
-        :preview-delay="previewDelay"
-        :labels="text"
-        :item-active="itemActive"
-        :loading="loading"
-        :skeleton-rows="skeletonRows"
-        :skeleton-header="skeletonHeader"
-        :collapsed-keys="collapsedKeys"
-        :hover-follow="hoverFollow"
-        @activate="activate"
-        @toggle-section="toggleSection"
-        @toggle-pin="togglePin"
       >
         <template v-if="$slots.item" #item="slotProps">
           <slot name="item" v-bind="slotProps" />

package/src/components/LpSidebarNav.vue

@@ -149,7 +149,8 @@ let typedAt = 0
 function onKey(event: KeyboardEvent) {
   const box = event.currentTarget as HTMLElement
   const list = [...box.querySelectorAll<HTMLElement>("[data-lp-nav-row]")].filter((r) => r.offsetParent !== null)
-  const at = list.indexOf(document.activeElement as HTMLElement)
+  // The rows' own document: inside an LpFrame the page's only knows the iframe.
+  const at = list.indexOf(box.ownerDocument.activeElement as HTMLElement)
   if (at < 0) return
   const row = list[at]!
   const go = (i: number) => {
@@ -270,7 +271,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         @activate="activate"
       />
     </div>
-    <template v-for="(section, si) in groups" :key="si">
+    <template v-for="(section, si) in groups" :key="sectionKey(section) || si">
     <!-- Compact, a group that folds is one icon: its pages open in the card
          beside it, as a page's own pages do. A hundred initials in a column
          would be no nav at all. -->

package/src/components/LpSidebarRow.vue

@@ -9,6 +9,7 @@
  * sidebar it is the row's name (and the pages under it), since the row shows
  * only an icon; with a `preview` it is a glance at the page before going there.
  */
+import { clamp } from "../composables/clamp"
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { useLocale } from "../composables/useLocale"
@@ -164,7 +165,7 @@ const delay = computed(() => (props.compact && !props.item.preview ? 250 : props
             <span
               v-if="typeof item.busy === 'number'"
               class="block h-full rounded-pill bg-brand transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)]"
-              :style="{ width: `${Math.round(Math.min(1, Math.max(0, item.busy)) * 100)}%` }"
+              :style="{ width: `${Math.round(clamp(item.busy, 0, 1) * 100)}%` }"
             />
             <span v-else class="lp-sweep absolute inset-y-0 left-0 w-2/5 rounded-pill bg-brand" />
           </span>