@leavepulse/ui 0.77.3 → 0.78.0

package/src/components/ChartRangeSelector.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/*
+ * The overview under a long chart: the whole series as one thin line, with the
+ * window the plot shows laid over it. Drag the window to pan, its edges to
+ * resize; each edge is also a slider, so the arrow keys do the same.
+ */
+import { computed } from "vue"
+import { startPointerDrag } from "../composables/pointerDrag"
+import { MIN_RANGE_POINTS, clampRange, lttbIndices, panRange, type ChartRange } from "./chartWindow"
+
+const props = defineProps<{
+  /** The series the overview traces. */
+  values: (number | null)[]
+  /** Points in the data. */
+  count: number
+  /** The current window; null is the whole series. */
+  range: ChartRange | null
+  /** Width of the overview, px. */
+  width: number
+  labels: string[]
+  startLabel: string
+  endLabel: string
+}>()
+
+const emit = defineEmits<{ (e: "change", range: ChartRange | null): void }>()
+
+const HEIGHT = 36
+const GRIP = 8
+const INSET = 2
+/* Points of the outline: a spare line, not a reading. */
+const OUTLINE_POINTS = 120
+const PAGE_DIVISOR = 10
+
+const last = computed(() => Math.max(1, props.count - 1))
+const whole = computed<ChartRange>(() => props.range ?? { start: 0, end: props.count - 1 })
+const toX = (index: number) => (index / last.value) * props.width
+const toIndex = (x: number) => (x / (props.width || 1)) * last.value
+
+const outline = computed(() => {
+  const picked = lttbIndices(props.values, OUTLINE_POINTS)
+  const present = picked.map((i) => props.values[i] as number)
+  if (present.length < MIN_RANGE_POINTS) return ""
+  const low = Math.min(...present)
+  const high = Math.max(...present)
+  const span = high - low || 1
+  const room = HEIGHT - INSET * 2
+  return picked
+    .map((i, n) => `${n ? "L" : "M"}${toX(i).toFixed(1)} ${(HEIGHT - INSET - ((present[n] - low) / span) * room).toFixed(1)}`)
+    .join(" ")
+})
+
+const left = computed(() => toX(whole.value.start))
+const right = computed(() => toX(whole.value.end))
+
+type Part = "start" | "end" | "window"
+
+function press(part: Part, event: PointerEvent) {
+  if (event.button !== 0) return
+  const x = event.clientX
+  const from = whole.value
+  const { start, end } = from
+  startPointerDrag(event, {
+    move(e) {
+      const delta = toIndex(e.clientX - x)
+      if (part === "window") emit("change", panRange(from, props.count, delta))
+      else if (part === "start") emit("change", clampRange({ start: Math.min(start + delta, end - 1), end }, props.count))
+      else emit("change", clampRange({ start, end: Math.max(end + delta, start + 1) }, props.count))
+    },
+    end: () => {},
+  })
+}
+
+function onKey(part: "start" | "end", event: KeyboardEvent) {
+  const page = Math.max(1, Math.round(props.count / PAGE_DIVISOR))
+  const steps: Record<string, number> = { ArrowLeft: -1, ArrowDown: -1, ArrowRight: 1, ArrowUp: 1, PageDown: -page, PageUp: page }
+  const step = steps[event.key]
+  const { start, end } = whole.value
+  if (event.key === "Home" || event.key === "End") {
+    event.preventDefault()
+    const edge = event.key === "Home" ? 0 : props.count - 1
+    emit("change", clampRange(part === "start" ? { start: Math.min(edge, end - 1), end } : { start, end: Math.max(edge, start + 1) }, props.count))
+    return
+  }
+  if (!step) return
+  event.preventDefault()
+  emit("change", clampRange(part === "start" ? { start: Math.min(start + step, end - 1), end } : { start, end: Math.max(end + step, start + 1) }, props.count))
+}
+</script>
+
+<template>
+  <div class="relative select-none touch-none" :style="{ height: `${HEIGHT}px`, width: `${width}px` }">
+    <svg :width="width" :height="HEIGHT" class="absolute inset-0 block" aria-hidden="true">
+      <path :d="outline" fill="none" stroke="var(--color-line-strong)" stroke-width="1" />
+    </svg>
+    <div class="absolute inset-y-0 left-0 bg-surface-soft opacity-70" :style="{ width: `${left}px` }" />
+    <div class="absolute inset-y-0 right-0 bg-surface-soft opacity-70" :style="{ width: `${Math.max(0, width - right)}px` }" />
+    <div
+      data-lp-chart-window
+      class="absolute inset-y-0 cursor-grab border-y border-line-strong active:cursor-grabbing"
+      :style="{ left: `${left}px`, width: `${Math.max(1, right - left)}px` }"
+      @pointerdown="press('window', $event)"
+    />
+    <div
+      v-for="edge in (['start', 'end'] as const)"
+      :key="edge"
+      role="slider"
+      tabindex="0"
+      aria-orientation="horizontal"
+      :aria-label="edge === 'start' ? startLabel : endLabel"
+      :aria-valuemin="edge === 'start' ? 0 : whole.start + 1"
+      :aria-valuemax="edge === 'start' ? whole.end - 1 : count - 1"
+      :aria-valuenow="whole[edge]"
+      :aria-valuetext="labels[whole[edge]]"
+      class="absolute inset-y-0 -ml-1 cursor-ew-resize rounded-inner bg-line-strong outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      :style="{ left: `${edge === 'start' ? left : right}px`, width: `${GRIP}px` }"
+      @pointerdown.stop="press(edge, $event)"
+      @keydown="onKey(edge, $event)"
+    />
+  </div>
+</template>

package/src/components/IconCloseButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/*
+ * The small x of the kit. On a panel it has a target of its own and a focus
+ * ring; `inline`, inside a field, it sits flush and the field holds the focus.
+ */
+import LpIcon from "./LpIcon.vue"
+import { CLOSE_ICON } from "./dropdown"
+
+defineProps<{ label: string; inline?: boolean }>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
+    :class="inline ? undefined : 'rounded-inner p-1 focus-visible:ring-2 focus-visible:ring-ring'"
+    :aria-label="label"
+  >
+    <LpIcon name="lucide:x" :size="16" :class="CLOSE_ICON" />
+  </button>
+</template>

package/src/components/LayoutCanvas.vue

@@ -10,6 +10,9 @@
  * the consumer owns content. Pass a `registry` for tab titles/icons.
  *
  * The tree is plain serializable data (see layout/tree.ts).
+ *
+ * Rearranging cells is native drag and drop, which touch browsers do not
+ * reliably start, so on a phone or tablet a layout can be used but not rebuilt.
  */
 import LayoutNode from "./LayoutNode.vue"
 import {

package/src/components/LayoutNode.vue

@@ -2,6 +2,7 @@
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, ref } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
+import { startPointerDrag } from "../composables/pointerDrag"
 import type { LayoutNode, Leaf, Side, Split } from "../layout/tree"
 import type { BlockRegistry } from "../layout/registry"
 import { blockTitle } from "../layout/registry"
@@ -108,35 +109,26 @@ let stopSplitter: (() => void) | null = null
 onBeforeUnmount(() => stopSplitter?.())
 
 function startSplitter(ev: PointerEvent, parent: Split, index: number) {
-  ev.preventDefault()
   const handle = ev.currentTarget as HTMLElement
   const host = handle.parentElement
   if (!host) return
-  // Capture keeps the moves coming when the pointer crosses an iframe or leaves
-  // the window; pointercancel (a touch the browser took over) ends it too.
-  handle.setPointerCapture?.(ev.pointerId)
   emit("resize-start")
-  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.removeEventListener("pointercancel", up)
-    stopSplitter = null
-    emit("resize-end")
-  }
-  stopSplitter = up
-  window.addEventListener("pointermove", move)
-  window.addEventListener("pointerup", up)
-  window.addEventListener("pointercancel", up)
+  stopSplitter = startPointerDrag(ev, {
+    move(e) {
+      const cur = horizontal ? e.clientX : e.clientY
+      // Measured per move: the container can resize during the drag.
+      const rect = host.getBoundingClientRect()
+      const span = horizontal ? rect.width : rect.height
+      if (span > 0) emit("resize", parent, index, (cur - last) / span)
+      last = cur
+    },
+    end() {
+      stopSplitter = null
+      emit("resize-end")
+    },
+  })
 }
 </script>
 
@@ -203,12 +195,12 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
       @dragstart="emit('dragstart', node.id)"
       @dragend="(hoverSide = null), emit('dragend')"
     >
-      <button
+      <!-- Tab and close are neighbours: a button inside a button is invalid and
+           never reached by the keyboard. -->
+      <div
         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="inline-flex max-w-40 items-center rounded-control text-xs transition-colors"
         :class="[
           i === leaf.active
             ? 'bg-surface-soft text-ink'
@@ -216,24 +208,31 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
           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
+        <button
+          type="button"
+          draggable="true"
+          :aria-current="i === leaf.active ? 'true' : undefined"
+          class="inline-flex min-w-0 cursor-grab items-center gap-1.5 rounded-control px-2 py-1 outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing"
+          @click="emit('set-active', node.id, i)"
+          @dragstart.stop="onTabDragStart(i, $event)"
+          @dragend="onTabDragEnd"
+        >
+          <LpIcon v-if="tabIcon(block)" :name="tabIcon(block)!" :size="13" />
+          <span class="truncate">{{ tabTitle(block) }}</span>
+        </button>
+        <button
           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"
+          type="button"
+          class="mr-1 grid size-3.5 shrink-0 place-items-center rounded-pill text-muted outline-none hover:bg-line hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           :aria-label="`Close ${tabTitle(block)}`"
-          @click.stop="emit('remove-block', node.id, i)"
+          @click="emit('remove-block', node.id, i)"
         >
           <LpIcon name="lucide:x" :size="11" />
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
 
     <!-- Active block content. -->

package/src/components/LpActivityLine.vue

@@ -17,6 +17,7 @@ export default { inheritAttrs: false }
  * finishes its run before fading, so "done" is seen rather than the line just
  * vanishing mid-way.
  */
+import { useView } from "../composables/useView"
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { durationToken, prefersReducedMotion } from "../composables/easing"
 import { useLoadingGate } from "../composables/useLoadingGate"
@@ -61,8 +62,9 @@ const text = useLabels("activityLine", { busy: "Loading" }, () => props.labels)
  * idle → running → (gate closes) → finishing → idle. `finishing` is the run to
  * the end and the fade after it; then the element is gone.
  */
+const view = useView()
 const gated = useLoadingGate(() => props.active, {
-  delay: () => (prefersReducedMotion() ? 0 : props.delay),
+  delay: () => (prefersReducedMotion(view.value?.window) ? 0 : props.delay),
   minVisible: 300,
 })
 const phase = ref<"idle" | "running" | "finishing">("idle")
@@ -79,7 +81,7 @@ watch(
     if (phase.value === "idle") return
     phase.value = "finishing"
     // The run to the end (slow), then the fade (medium), then gone.
-    const hold = prefersReducedMotion() ? 0 : durationToken("duration-medium") * 3
+    const hold = prefersReducedMotion(view.value?.window) ? 0 : durationToken("duration-medium", undefined, view.value?.document) * 3
     doneTimer = setTimeout(() => (phase.value = "idle"), hold)
   },
   { immediate: true },

package/src/components/LpAddressInput.vue

@@ -41,7 +41,7 @@ import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 import LpModal from "./LpModal.vue"
 import LpSelect from "./LpSelect.vue"
-import { useFieldControl } from "../composables/useField"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -301,10 +301,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
   <div
     role="group"
     :aria-labelledby="field.labelId"
-    :aria-describedby="field.describedBy"
     :aria-invalid="field.invalid || undefined"
     :class="rootClass"
-    v-bind="rest">
+    v-bind="rest"
+    :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)">
     <LpFormField :label="text.line">
       <!-- Typing is the fast path and stands on its own; the map is one button
            away for when an address is easier pointed at than spelled. -->