@leavepulse/ui 0.77.2 → 0.78.0

package/src/components/LpTour.vue

@@ -67,7 +67,7 @@ import { hints } from "../composables/useHints"
 import { useHotkeys } from "../composables/useHotkeys"
 import { useLabels } from "../composables/useLpConfig"
 import { useMediaQuery } from "../composables/useMediaQuery"
-import { useView, viewDocument, viewWindow } from "../composables/useView"
+import { isElement, useView, viewDocument, viewWindow } from "../composables/useView"
 import { scrollToElement } from "../composables/scroll"
 import { PANEL_SURFACE } from "./dropdown"
 import TourCard from "./TourCard.vue"
@@ -160,7 +160,7 @@ const reference = {
 }
 const last = computed(() => index.value >= props.steps.length - 1)
 const progress = computed(() => labels.value.progress.replace("{n}", String(index.value + 1)).replace("{total}", String(props.steps.length)))
-const smooth = () => !prefersReducedMotion()
+const smooth = () => !prefersReducedMotion(win())
 
 function resolve(raw: TourStep["target"]): Element | null {
   if (!raw) return null
@@ -194,7 +194,7 @@ function controlRadius(): number {
   const probe = doc().createElement("div")
   probe.style.cssText = "position:absolute;visibility:hidden;border-top-left-radius:var(--radius-control)"
   doc().body.append(probe)
-  const px = parseFloat(getComputedStyle(probe).borderTopLeftRadius)
+  const px = parseFloat(win().getComputedStyle(probe).borderTopLeftRadius)
   probe.remove()
   return Number.isFinite(px) ? px : 8
 }
@@ -241,7 +241,7 @@ function glideTo(el: Element | null) {
   target.value = el
   gliding.value = true
   clearTimeout(glide)
-  glide = window.setTimeout(() => (gliding.value = false), durationToken("duration-medium") + 40)
+  glide = window.setTimeout(() => (gliding.value = false), durationToken("duration-medium", undefined, doc()) + 40)
 }
 
 function measure() {
@@ -367,12 +367,14 @@ function dismiss() {
 
 function onTargetClick(event: Event) {
   if (!step.value?.try || !target.value) return
-  if (event.target instanceof Node && target.value.contains(event.target)) setTimeout(next, TRY_SETTLE_MS)
+  if (isElement(event.target) && target.value.contains(event.target)) setTimeout(next, TRY_SETTLE_MS)
 }
 
 watch(
   open,
   (value) => {
+    // The server has no page to walk, and this runs there on setup.
+    if (typeof document === "undefined") return
     if (value) {
       direction = 1
       box.value = null

package/src/components/LpTruncate.vue

@@ -25,6 +25,7 @@ export default { inheritAttrs: false }
  *
  * A truncated value becomes focusable, so the tip is reachable by keyboard too.
  */
+import { nodeWindow } from "../composables/useView"
 import { computed, nextTick, onMounted, ref, watch } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useResizeObserver } from "../composables/useResizeObserver"
@@ -57,8 +58,8 @@ const drawn = ref(props.text)
 
 let canvas: CanvasRenderingContext2D | null = null
 function measurer(el: HTMLElement): (s: string) => number {
-  canvas ??= document.createElement("canvas").getContext("2d")
-  const style = getComputedStyle(el)
+  canvas ??= el.ownerDocument.createElement("canvas").getContext("2d")
+  const style = nodeWindow(el).getComputedStyle(el)
   // Built from the longhands: Firefox leaves the `font` shorthand empty in
   // computed styles.
   if (canvas) canvas.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
@@ -86,7 +87,7 @@ useResizeObserver(box, () => measure())
 onMounted(() => {
   measure()
   // Web fonts land after mount and change every width.
-  void document.fonts?.ready.then(() => measure())
+  void box.value?.ownerDocument.fonts?.ready.then(() => measure())
 })
 watch(
   () => [props.text, props.lines, props.middle, props.tail],

package/src/components/LpTypewriter.vue

@@ -29,6 +29,7 @@ export default { inheritAttrs: false }
  * is on screen and pauses while it is off screen or the tab is hidden. Under
  * reduced motion whole strings appear and swap without typing.
  */
+import { isElement } from "../composables/useView"
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useInView } from "../composables/useInView"
@@ -95,7 +96,7 @@ const idle = computed(() => state.value.phase === "holding" || state.value.phase
 const { el: revealEl, revealed } = useReveal({ immediate: () => props.play !== undefined })
 const { el: viewEl, inView } = useInView()
 const setRoot = (node: unknown) => {
-  const element = node instanceof Element ? node : null
+  const element = isElement(node) ? node : null
   revealEl.value = element
   viewEl.value = element
 }

package/src/components/LpVideoBackdrop.vue

@@ -32,8 +32,11 @@ export default { inheritAttrs: false }
  * loop decodes one stream. Both play the same `src`: a URL the media element
  * fetches by range, or an object URL of a file already in memory.
  */
+import { clamp } from "../composables/clamp"
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { easeTravel, prefersReducedMotion } from "../composables/easing"
+import { usePrefersReducedMotion } from "../composables/useReducedMotion"
+import { useView } from "../composables/useView"
 import { useInView } from "../composables/useInView"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { isNativeLoop, planLoop, seamProgress, seamReached } from "./videoBackdrop"
@@ -101,7 +104,12 @@ const throttle = ref(1)
  */
 const SLOWEST_RATE = 1 / 16
 
-const reducedMotion = ref(prefersReducedMotion())
+// Read now as well: the live query reports only after mount, and a first paint
+// must not start a video the viewer asked not to see.
+const view = useView()
+const reducedMotion = ref(prefersReducedMotion(view.value?.window))
+const liveMotion = usePrefersReducedMotion()
+watch(liveMotion, (reduced) => (reducedMotion.value = reduced))
 /*
  * Unseen: the tab is hidden or the backdrop is off screen. A video decoding
  * frames under the fold spends as much as one in view, and a page of them
@@ -305,21 +313,11 @@ watch(
   },
 )
 
-function onMotionChange(event: MediaQueryListEvent) {
-  reducedMotion.value = event.matches
-}
-let motionQuery: MediaQueryList | null = null
-
-onMounted(() => {
-  applyRate()
-  motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
-  motionQuery.addEventListener("change", onMotionChange)
-})
+onMounted(applyRate)
 
 onBeforeUnmount(() => {
   if (frame) cancelAnimationFrame(frame)
   if (ramp) cancelAnimationFrame(ramp)
-  motionQuery?.removeEventListener("change", onMotionChange)
 })
 
 function layerStyle(index: 0 | 1) {
@@ -380,7 +378,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     </div>
     <div
       class="absolute inset-0 bg-black transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
-      :style="{ opacity: Math.min(1, Math.max(0, dim)) }"
+      :style="{ opacity: clamp(dim, 0, 1) }"
     />
   </div>
 </template>

package/src/components/LpWindow.vue

@@ -0,0 +1,373 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A floating panel over the page that the page keeps working under: a log
+ * tail beside a dashboard, a console, a reference next to a form. Move it by
+ * its title bar, resize it by its edges, drop it on a screen edge to dock it.
+ *
+ *   <LpWindow v-model:open="logs" title="Logs" persist="logs">
+ *     <LpLogViewer :lines="lines" />
+ *   </LpWindow>
+ *
+ * Different from the neighbours on purpose:
+ * - LpModal and LpDrawer take the page away until they close; this does not:
+ *   no scrim, no focus trap, and it stays out of the modal stack.
+ * - LpLayoutCanvas tiles blocks into a page; a window sits over one.
+ *
+ * Not a window manager: no minimising, no taskbar. Raising, docking and
+ * snapping are what it takes for a few panels to live together.
+ *
+ * Geometry is kept apart from what is applied. A window saved on a wide screen
+ * is fitted to a smaller one, and gets its own place back on the wide one.
+ *
+ * Keyboard: the title bar takes focus; arrows move, Shift+arrows resize, Enter
+ * fills the view, Escape anywhere in the window closes it.
+ */
+import IconCloseButton from "./IconCloseButton.vue"
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from "vue"
+import { startPointerDrag } from "../composables/pointerDrag"
+import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
+import { useGlass } from "../composables/useGlass"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { usePersisted } from "../composables/usePersisted"
+import { usePrefersReducedMotion } from "../composables/useReducedMotion"
+import { usePortalTarget, useView, viewWindow } from "../composables/useView"
+import {
+  WINDOW_DOCKS,
+  clampRect,
+  dockAt,
+  dockedRect,
+  isWindowRect,
+  resizeRect,
+  snapRect,
+  useWindowLayer,
+  type WindowDock,
+  type WindowEdge,
+  type WindowRect,
+  type WindowViewport,
+} from "../composables/windowing"
+import { CLOSE_ICON } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+
+const DEFAULT_SIZE = { width: 420, height: 320 }
+const KEY_STEP = 16
+const SNAP_THRESHOLD = 8
+/** How near a screen edge the pointer must come to offer a dock. */
+const DOCK_EDGE = 12
+const EDGES: WindowEdge[] = ["n", "s", "e", "w", "ne", "nw", "se", "sw"]
+const EDGE_CLASS: Record<WindowEdge, string> = {
+  n: "inset-x-2 -top-1 h-2 cursor-ns-resize",
+  s: "inset-x-2 -bottom-1 h-2 cursor-ns-resize",
+  e: "inset-y-2 -right-1 w-2 cursor-ew-resize",
+  w: "inset-y-2 -left-1 w-2 cursor-ew-resize",
+  ne: "-right-1 -top-1 size-3 cursor-nesw-resize",
+  nw: "-left-1 -top-1 size-3 cursor-nwse-resize",
+  se: "-bottom-1 -right-1 size-3 cursor-nwse-resize",
+  sw: "-bottom-1 -left-1 size-3 cursor-nesw-resize",
+}
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    /** Accessible name for a window without a visible `title`. */
+    ariaLabel?: string
+    /** Where it first opens, and at what size. Centred when unset. */
+    defaultRect?: Partial<WindowRect>
+    minWidth?: number
+    minHeight?: number
+    /** Share of the view (0–1) a docked side takes. */
+    dockFraction?: number
+    resizable?: boolean
+    /** Offer docking when dragged to a screen edge. */
+    dockable?: boolean
+    /** Pull toward the view's edges and other windows while moving. */
+    snap?: boolean
+    closable?: boolean
+    /** Remember place, size and dock under this key, across visits (see `usePersisted`). */
+    persist?: string
+    /** Something would be lost by closing: `true` asks first, a function asks the app. */
+    guard?: CloseGuard
+    /** Frosted glass instead of a solid panel. Unset follows `provideGlass`. */
+    glass?: boolean
+    labels?: Partial<{ close: string; move: string }>
+  }>(),
+  {
+    minWidth: 240,
+    minHeight: 160,
+    dockFraction: 0.5,
+    resizable: true,
+    dockable: true,
+    snap: true,
+    closable: true,
+    glass: undefined,
+  },
+)
+
+const open = defineModel<boolean>("open", { default: false })
+const emit = defineEmits<{
+  /** After a move, resize or dock ends: where the window now stands. */
+  (e: "change", value: { rect: WindowRect; dock: WindowDock | null }): void
+}>()
+
+const text = useLabels("window", { close: "Close", move: "Move window" }, () => props.labels)
+const frosted = useGlass(() => props.glass)
+const portalTo = usePortalTarget()
+const view = useView()
+const titleId = useId()
+
+interface Placement {
+  rect: WindowRect | null
+  dock: WindowDock | null
+}
+const validPlacement = (value: unknown): value is Placement => {
+  const saved = value as Placement | null
+  return (
+    !!saved &&
+    (saved.rect === null || isWindowRect(saved.rect)) &&
+    (saved.dock === null || WINDOW_DOCKS.includes(saved.dock))
+  )
+}
+const placement = usePersisted<Placement>(() => props.persist && `lp-window:${props.persist}`, { rect: null, dock: null }, {
+  validate: validPlacement,
+})
+
+const viewport = shallowRef<WindowViewport>({ width: 0, height: 0 })
+const bounds = computed(() => ({ minWidth: props.minWidth, minHeight: props.minHeight }))
+
+function firstRect(): WindowRect {
+  const width = props.defaultRect?.width ?? DEFAULT_SIZE.width
+  const height = props.defaultRect?.height ?? DEFAULT_SIZE.height
+  return {
+    x: props.defaultRect?.x ?? Math.round((viewport.value.width - width) / 2),
+    y: props.defaultRect?.y ?? Math.round((viewport.value.height - height) / 2),
+    width,
+    height,
+  }
+}
+
+/* What is drawn; `placement` keeps what was asked for. */
+const applied = computed<WindowRect>(() => {
+  const { rect, dock } = placement.value
+  if (dock) return dockedRect(dock, viewport.value, props.dockFraction)
+  return clampRect(rect ?? firstRect(), viewport.value, bounds.value)
+})
+
+const layer = useWindowLayer(() => (open.value ? applied.value : null))
+const panel = ref<HTMLElement | null>(null)
+const moving = ref(false)
+const offeredDock = ref<WindowDock | null>(null)
+const ghost = computed(() => (offeredDock.value ? dockedRect(offeredDock.value, viewport.value, props.dockFraction) : null))
+
+function measure() {
+  const win = viewWindow(view.value)
+  viewport.value = { width: win.innerWidth, height: win.innerHeight }
+}
+
+// Teleported on the client only: the server has no view to place it in.
+const mounted = ref(false)
+onMounted(() => (mounted.value = true))
+
+function commit() {
+  emit("change", { rect: applied.value, dock: placement.value.dock })
+}
+
+let stopDrag: (() => void) | null = null
+
+function onTitlePointerDown(event: PointerEvent) {
+  if (event.button !== 0 || (event.target as Element).closest?.("button, a, input")) return
+  layer.raise()
+  const startX = event.clientX
+  const startY = event.clientY
+  const { dock } = placement.value
+  // Leaving a dock restores the window's own size, under the pointer.
+  const start = dock ? { ...(placement.value.rect ?? firstRect()), x: startX - KEY_STEP, y: startY - KEY_STEP } : applied.value
+  let dragged = false
+  moving.value = true
+  stopDrag = startPointerDrag(event, {
+    move: (ev) => {
+      dragged = true
+      const moved = { ...start, x: start.x + ev.clientX - startX, y: start.y + ev.clientY - startY }
+      const snapped = props.snap ? snapRect(moved, viewport.value, layer.others(), SNAP_THRESHOLD) : moved
+      placement.value = { rect: clampRect(snapped, viewport.value, bounds.value), dock: null }
+      offeredDock.value = props.dockable ? dockAt(ev.clientX, ev.clientY, viewport.value, DOCK_EDGE) : null
+    },
+    end: (completed) => {
+      moving.value = false
+      stopDrag = null
+      const chosen = offeredDock.value
+      offeredDock.value = null
+      if (completed && chosen) placement.value = { rect: placement.value.rect, dock: chosen }
+      if (dragged) commit()
+    },
+  })
+}
+
+function onEdgePointerDown(event: PointerEvent, edge: WindowEdge) {
+  if (event.button !== 0) return
+  layer.raise()
+  const start = applied.value
+  const startX = event.clientX
+  const startY = event.clientY
+  moving.value = true
+  stopDrag = startPointerDrag(event, {
+    move: (ev) => {
+      const rect = resizeRect(start, edge, ev.clientX - startX, ev.clientY - startY, viewport.value, bounds.value)
+      placement.value = { rect, dock: null }
+    },
+    end: () => {
+      moving.value = false
+      stopDrag = null
+      commit()
+    },
+  })
+}
+
+function toggleFull() {
+  if (!props.dockable) return
+  placement.value = { rect: placement.value.rect ?? applied.value, dock: placement.value.dock === "full" ? null : "full" }
+  commit()
+}
+
+function onTitleKeydown(event: KeyboardEvent) {
+  if (event.target !== event.currentTarget) return
+  if (event.key === "Enter") {
+    event.preventDefault()
+    toggleFull()
+    return
+  }
+  const dx = event.key === "ArrowRight" ? KEY_STEP : event.key === "ArrowLeft" ? -KEY_STEP : 0
+  const dy = event.key === "ArrowDown" ? KEY_STEP : event.key === "ArrowUp" ? -KEY_STEP : 0
+  if (!dx && !dy) return
+  event.preventDefault()
+  const rect = applied.value
+  const next = event.shiftKey && props.resizable
+    ? resizeRect(rect, "se", dx, dy, viewport.value, bounds.value)
+    : { ...rect, x: rect.x + dx, y: rect.y + dy }
+  placement.value = { rect: clampRect(next, viewport.value, bounds.value), dock: null }
+  commit()
+}
+
+const { allowClose } = useCloseGuard(() => props.guard, () => open.value)
+
+async function close() {
+  if (await allowClose()) open.value = false
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== "Escape" || !props.closable || event.defaultPrevented) return
+  event.preventDefault()
+  void close()
+}
+
+defineExpose({ close, raise: () => layer.raise() })
+
+let returnTo: HTMLElement | null = null
+
+watch(
+  [open, mounted],
+  async ([isOpen, ready], _, onCleanup) => {
+    if (!ready) return
+    if (!isOpen) {
+      stopDrag?.()
+      layer.release()
+      returnTo?.focus?.({ preventScroll: true })
+      returnTo = null
+      return
+    }
+    const win = viewWindow(view.value)
+    measure()
+    win.addEventListener("resize", measure)
+    onCleanup(() => win.removeEventListener("resize", measure))
+    layer.raise()
+    returnTo = win.document.activeElement as HTMLElement | null
+    await nextTick()
+    panel.value?.focus({ preventScroll: true })
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  stopDrag?.()
+  layer.release()
+})
+
+const reduced = usePrefersReducedMotion()
+const animate = computed(() => !moving.value && !reduced.value)
+const { class: panelClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "fixed flex min-h-0 min-w-0 flex-col rounded-card border border-line shadow-panel outline-none",
+    frosted.value ? "lp-glass-overlay" : "bg-surface-raised",
+    placement.value.dock === "full" ? "rounded-none" : "",
+  ].join(" "),
+)
+
+const px = (rect: WindowRect) => ({
+  left: `${rect.x}px`,
+  top: `${rect.y}px`,
+  width: `${rect.width}px`,
+  height: `${rect.height}px`,
+})
+</script>
+
+<template>
+  <Teleport v-if="mounted && open" :to="portalTo">
+    <div
+      v-if="ghost"
+      data-lp-window-ghost
+      class="pointer-events-none fixed rounded-card border-2 border-brand bg-brand/10"
+      :style="{ ...px(ghost), zIndex: layer.z.value }"
+    />
+    <section
+      v-bind="rest"
+      ref="panel"
+      role="dialog"
+      aria-modal="false"
+      :aria-label="title ? undefined : ariaLabel"
+      :aria-labelledby="title ? titleId : undefined"
+      tabindex="-1"
+      :class="panelClass"
+      :data-dock="placement.dock ?? undefined"
+      :style="{
+        ...px(applied),
+        zIndex: layer.z.value,
+        transition: animate ? 'left var(--duration-fast), top var(--duration-fast), width var(--duration-fast), height var(--duration-fast)' : 'none',
+      }"
+      @pointerdown.capture="layer.raise()"
+      @focusin="layer.raise()"
+      @keydown="onKeydown"
+    >
+      <header
+        tabindex="0"
+        :aria-label="`${text.move}: ${title ?? ariaLabel ?? ''}`"
+        class="flex shrink-0 cursor-move touch-none select-none items-center gap-2 rounded-t-card px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        @pointerdown="onTitlePointerDown"
+        @dblclick="toggleFull"
+        @keydown="onTitleKeydown"
+      >
+        <span :id="titleId" class="min-w-0 flex-1 truncate text-sm font-semibold text-ink">
+          <slot name="title">{{ title }}</slot>
+        </span>
+        <slot name="actions" />
+        <IconCloseButton v-if="closable" :label="text.close" @click="close" />
+      </header>
+      <div class="min-h-0 min-w-0 flex-1 overflow-auto">
+        <slot :close="close" />
+      </div>
+      <template v-if="resizable">
+        <div
+          v-for="edge in EDGES"
+          :key="edge"
+          aria-hidden="true"
+          :data-lp-window-edge="edge"
+          class="absolute touch-none"
+          :class="EDGE_CLASS[edge]"
+          @pointerdown="onEdgePointerDown($event, edge)"
+        />
+      </template>
+    </section>
+  </Teleport>
+</template>

package/src/components/LpWorkspaceSwitcher.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/*
+ * The menu for useWorkspaces: which layout is showing, the others, and making,
+ * copying, renaming and deleting them.
+ *
+ *   const spaces = useWorkspaces({ initial: ["logs", "chart"], persist: "main" })
+ *   <LpWorkspaceSwitcher :workspaces="spaces" />
+ *   <LayoutCanvas v-model="spaces.controller.layout.value" :blocks="blocks" />
+ *
+ * Only the menu: an app with its own place for this (the palette, a settings
+ * page) calls useWorkspaces directly and leaves this out.
+ */
+import { computed, nextTick, ref } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import type { UseWorkspaces } from "../layout/useWorkspaces"
+import LpButton from "./LpButton.vue"
+import LpDropdownMenu, { type MenuItem } from "./LpDropdownMenu.vue"
+import LpInput from "./LpInput.vue"
+import LpModal from "./LpModal.vue"
+
+const props = defineProps<{
+  workspaces: UseWorkspaces
+  labels?: Partial<{
+    menu: string
+    create: string
+    duplicate: string
+    rename: string
+    remove: string
+    name: string
+    save: string
+    cancel: string
+    required: string
+  }>
+}>()
+
+const text = useLabels(
+  "workspaces",
+  {
+    menu: "Workspaces",
+    create: "New workspace",
+    duplicate: "Duplicate",
+    rename: "Rename",
+    remove: "Delete",
+    name: "Name",
+    save: "Save",
+    cancel: "Cancel",
+    required: "Enter a name",
+  },
+  () => props.labels,
+)
+
+const activeName = computed(() => {
+  const { workspaces, activeId } = props.workspaces
+  return workspaces.value.find((space) => space.id === activeId.value)?.name ?? ""
+})
+
+const naming = ref<"create" | "rename" | null>(null)
+const draft = ref("")
+const tried = ref(false)
+const nameError = computed(() => (tried.value && !draft.value.trim() ? text.value.required : undefined))
+
+async function ask(mode: "create" | "rename") {
+  // After the menu has let go of focus, so the dialog's own focus is the one that stays.
+  await nextTick()
+  draft.value = mode === "rename" ? activeName.value : ""
+  tried.value = false
+  naming.value = mode
+}
+
+function confirm() {
+  tried.value = true
+  const name = draft.value.trim()
+  if (!name) return
+  if (naming.value === "create") props.workspaces.create(name)
+  else props.workspaces.rename(props.workspaces.activeId.value, name)
+  naming.value = null
+}
+
+const items = computed<MenuItem[]>(() => {
+  const spaces = props.workspaces
+  return [
+    ...spaces.workspaces.value.map((space) => ({
+      label: space.name,
+      icon: space.id === spaces.activeId.value ? "lucide:check" : undefined,
+      onSelect: () => spaces.switchTo(space.id),
+    })),
+    { label: text.value.create, icon: "lucide:plus", separatorBefore: true, onSelect: () => void ask("create") },
+    { label: text.value.duplicate, icon: "lucide:copy", onSelect: () => void spaces.duplicate() },
+    { label: text.value.rename, icon: "lucide:pencil", onSelect: () => void ask("rename") },
+    {
+      label: text.value.remove,
+      icon: "lucide:trash-2",
+      danger: true,
+      disabled: spaces.workspaces.value.length <= 1,
+      onSelect: () => spaces.remove(spaces.activeId.value),
+    },
+  ]
+})
+</script>
+
+<template>
+  <LpDropdownMenu :items="items" :palette="false">
+    <template #trigger>
+      <LpButton variant="ghost" size="sm" :aria-label="`${text.menu}: ${activeName}`">{{ activeName }}</LpButton>
+    </template>
+  </LpDropdownMenu>
+  <LpModal :open="naming !== null" :title="naming === 'create' ? text.create : text.rename" size="sm" @update:open="naming = null">
+    <form id="lp-workspace-name" @submit.prevent="confirm">
+      <LpInput v-model="draft" :label="text.name" :error="nameError" />
+    </form>
+    <template #footer>
+      <LpButton variant="ghost" @click="naming = null">{{ text.cancel }}</LpButton>
+      <LpButton type="submit" form="lp-workspace-name">{{ text.save }}</LpButton>
+    </template>
+  </LpModal>
+</template>

package/src/components/PickerField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAttrs } from "vue"
-import { useFieldBlur, type useFieldControl } from "../composables/useField"
+import { mergeDescribedBy, useFieldBlur, type useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import { PICKER_CLEAR, PICKER_PRESET, PICKER_PRESETS, PICKER_SIZE, PICKER_TRIGGER, pickerTone } from "./calendar"
 import LpIcon from "./LpIcon.vue"
@@ -36,7 +36,7 @@ const attrs = useAttrs()
           type="button"
           :disabled="field.disabled"
           :aria-invalid="field.invalid || undefined"
-          :aria-describedby="field.describedBy"
+          :aria-describedby="mergeDescribedBy(attrs['aria-describedby'], field.describedBy)"
           :class="[PICKER_TRIGGER, PICKER_SIZE[size], pickerTone(field.invalid)]"
         >
           <LpIcon :name="icon" :size="16" class="shrink-0 text-muted" />

package/src/components/SliderRail.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+/* The track of a slider and the filled part of it, one thumb or two. */
+import { SliderRange, SliderTrack } from "reka-ui"
+</script>
+
+<template>
+  <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
+    <SliderRange class="absolute h-full rounded-pill bg-brand" />
+  </SliderTrack>
+</template>

package/src/components/address.ts

@@ -1,3 +1,5 @@
+import { clamp } from "../composables/clamp"
+
 /*
  * Postal-address types, tile maths and the pluggable geocoder behind
  * LpAddressInput / LpMapPicker.
@@ -232,7 +234,7 @@ export const MAX_LATITUDE = 85.05112878
 
 export function project(lat: number, lon: number, zoom: number, tileSize = 256) {
   const size = tileSize * 2 ** zoom
-  const clamped = Math.max(-MAX_LATITUDE, Math.min(MAX_LATITUDE, lat))
+  const clamped = clamp(lat, -MAX_LATITUDE, MAX_LATITUDE)
   const sin = Math.sin((clamped * Math.PI) / 180)
   return {
     x: ((lon + 180) / 360) * size,