@leavepulse/ui 0.44.0 → 0.45.0

package/src/components/LayoutNode.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { Motion } from "motion-v"
+import { Motion, useReducedMotion } from "motion-v"
 import { computed, onBeforeUnmount, ref } from "vue"
 import type { LayoutNode, Leaf, Side, Split } from "../layout/tree"
 import type { BlockRegistry } from "../layout/registry"
 import { blockTitle } from "../layout/registry"
 import LpIcon from "./LpIcon.vue"
 
+// Same spring as LpTabs' panel height; instant under reduced motion, which
+// motion-v does not apply on its own.
+const reduceMotion = useReducedMotion()
+const layoutTransition = computed(() =>
+  reduceMotion.value
+    ? { duration: 0 }
+    : { type: "spring" as const, stiffness: 520, damping: 42, mass: 0.9 },
+)
+
 const props = defineProps<{
   node: LayoutNode
   dragId: string | null
@@ -185,7 +194,7 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
   <Motion
     v-else-if="leaf"
     :layout="true"
-    :transition="{ type: 'spring', stiffness: 520, damping: 42, mass: 0.9 }"
+    :transition="layoutTransition"
     class="relative flex min-h-0 min-w-0 flex-col"
     :class="{ 'opacity-35': dragId === node.id }"
   >

package/src/components/LpActionBar.vue

@@ -209,7 +209,7 @@ onBeforeUnmount(() => observer?.disconnect())
          Reduced motion skips it entirely rather than holding a frame it never
          animated to. -->
     <Transition
-      enter-active-class="animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)]"
+      enter-active-class="animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"
       leave-active-class="animate-[rise-out_var(--duration-fast)_ease_forwards] motion-reduce:animate-none"
     >
       <div

package/src/components/LpAutocomplete.vue

@@ -263,6 +263,7 @@ function clear() {
 
     <ComboboxPortal>
       <ComboboxContent
+        :collision-padding="8"
         position="popper"
         :side-offset="6"
         :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden']"

package/src/components/LpAvatar.vue

@@ -98,12 +98,12 @@ onMounted(() => {
 <template>
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
     <AvatarRoot :class="rootClass" :style="sizeStyle" v-bind="rest">
-      <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
+      <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
       <AvatarFallback>{{ initials }}</AvatarFallback>
     </AvatarRoot>
   </LpContextMenu>
   <AvatarRoot v-else :class="rootClass" :style="sizeStyle" v-bind="rest">
-    <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
+    <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
     <AvatarFallback>{{ initials }}</AvatarFallback>
   </AvatarRoot>
 </template>

package/src/components/LpButton.vue

@@ -13,7 +13,7 @@ import { resolveLink, type LinkTarget } from "./link"
 
 const button = tv({
   base: [
-    "inline-flex select-none items-center justify-center gap-2 font-semibold",
+    "inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-semibold",
     "rounded-control transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
     // tactile press: dips slightly on click, springs back on release.
     "active:scale-[0.97] motion-reduce:active:scale-100",

package/src/components/LpChart.vue

@@ -49,6 +49,7 @@ import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpShift from "./LpShift.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { backgroundOf, downloadFile, fileStem, resolveCssColor, svgToPng, toCsv, type CsvOptions } from "./exportData"
 
 export interface ChartText {
   [key: string]: string
@@ -56,6 +57,15 @@ export interface ChartText {
   rightAxis: string
   /** Prefix of the keyboard readout, before the point's label. */
   point: string
+  /** Header of the label column in a CSV export. */
+  xColumn: string
+}
+
+export interface ChartExportOptions {
+  /** File name without extension. Defaults to the title. */
+  filename?: string
+  /** Return the data without offering a download. */
+  download?: boolean
 }
 
 /** What was under the pointer when a point was clicked or right-clicked. */
@@ -144,7 +154,7 @@ const props = withDefaults(
 
 const strings = useLabels<ChartText>(
   "chart",
-  { empty: "No data", rightAxis: "Measured on the right axis", point: "Point" },
+  { empty: "No data", rightAxis: "Measured on the right axis", point: "Point", xColumn: "Label" },
   () => props.text,
 )
 
@@ -1012,6 +1022,74 @@ const readout = computed(() =>
     : "",
 )
 
+// ── export ─────────────────────────────────────
+// Every series, hidden ones included: what a reader toggled off for a closer
+// look is still part of the data they asked to take away.
+const svgEl = ref<SVGSVGElement | null>(null)
+
+function exportCsv(options: ChartExportOptions & CsvOptions = {}): string {
+  const rows = labels.value.map((label, i) => ({ label, i }))
+  const csv = toCsv(rows, [
+    { key: "label", label: strings.value.xColumn },
+    ...allSeries.value.map((s) => ({ key: s.id, label: s.name, value: (r: { i: number }) => s.values[r.i] })),
+  ], options)
+  if (options.download !== false) {
+    downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.csv`, csv, "text/csv;charset=utf-8")
+  }
+  return csv
+}
+
+/*
+ * The plot as a picture, in the theme it is shown in. The legend and title are
+ * HTML, so they are painted onto the canvas separately, in the page's font; the
+ * SVG travels with its computed colours inlined, because an SVG drawn as an
+ * image cannot see the page's custom properties.
+ */
+async function exportPng(options: ChartExportOptions & { scale?: number; background?: string } = {}): Promise<Blob | null> {
+  const svg = svgEl.value
+  if (!svg || typeof document === "undefined") return null
+  const style = getComputedStyle(root.value ?? svg)
+  const font = style.fontFamily
+  const ink = style.getPropertyValue("--color-ink").trim() || style.color
+  const muted = style.getPropertyValue("--color-muted-strong").trim() || style.color
+  const legend = props.showLegend && allSeries.value.length > 1 ? visible.value : []
+  const blob = await svgToPng(svg, {
+    scale: options.scale,
+    padding: 16,
+    background: options.background ?? backgroundOf(root.value),
+    header: (ctx) => {
+      let y = 0
+      if (props.title) {
+        ctx.font = `500 14px ${font}`
+        ctx.fillStyle = ink
+        ctx.textBaseline = "top"
+        ctx.fillText(props.title, 0, y)
+        y += 22
+      }
+      if (legend.length) {
+        ctx.font = `12px ${font}`
+        ctx.textBaseline = "middle"
+        let x = 0
+        for (const s of legend) {
+          ctx.fillStyle = resolveCssColor(s.color, root.value ?? svg)
+          ctx.beginPath()
+          ctx.arc(x + 4, y + 8, 4, 0, Math.PI * 2)
+          ctx.fill()
+          ctx.fillStyle = muted
+          ctx.fillText(s.name, x + 14, y + 8)
+          x += 14 + ctx.measureText(s.name).width + 16
+        }
+        y += 24
+      }
+      return y ? y + 8 : 0
+    },
+  })
+  if (options.download !== false) downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.png`, blob)
+  return blob
+}
+
+defineExpose({ exportCsv, exportPng })
+
 // The chart fills its container's width and sets its own gap between plot and legend — both are layout decisions the page makes, not the chart.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex w-full flex-col gap-3",
@@ -1083,6 +1161,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 
         <svg
           v-else-if="width > 0"
+          ref="svgEl"
           :width="width"
           :height="height"
           class="overflow-visible touch-none select-none"

package/src/components/LpColorPicker.vue

@@ -36,7 +36,8 @@ import {
   PopoverRoot,
   PopoverTrigger,
 } from "reka-ui"
-import { computed, ref, watch } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
 import { useFieldControl } from "../composables/useField"
 import {
   clampHsv,
@@ -53,6 +54,7 @@ import { useClipboard } from "../composables/useClipboard"
 import { POPOVER_PANEL } from "./dropdown"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
 
 /**
  * Every user-facing string the picker renders on its own — the menu items, the
@@ -554,9 +556,28 @@ async function pasteColor() {
  * emit the picker would display rgb() while the app still stored hex, and the
  * next thing to read that value would disagree with the screen.
  */
+/*
+ * A format switch rewrites the whole text in place ("#3b82f6" becomes
+ * "rgb(59 130 246)"), so the new value rolls in over the field the way the
+ * kit's other changing labels do. An <input> cannot animate its own text, so
+ * a rolling copy lies over it for the length of the roll; it only ever moves
+ * on a format switch, never while a colour is being dragged.
+ */
+const ROLL_MS = 320
+const rollText = ref(current.value)
+const rolling = ref(false)
+let rollTimer: ReturnType<typeof setTimeout> | undefined
+
 function setFormat(f: ColorFormat) {
   if (activeFormat.value === f) return
+  rollText.value = inputValue.value
   activeFormat.value = f
+  if (!prefersReducedMotion()) {
+    rolling.value = true
+    void nextTick(() => (rollText.value = current.value))
+    if (rollTimer) clearTimeout(rollTimer)
+    rollTimer = setTimeout(() => (rolling.value = false), ROLL_MS + 40)
+  }
   typed.value = null
   emit("update:modelValue", current.value)
   emit("change", current.value)
@@ -654,6 +675,7 @@ defineExpose({ open })
 
     <PopoverPortal>
       <PopoverContent
+        :collision-padding="8"
         :side="side"
         :align="align"
         :side-offset="6"
@@ -748,6 +770,15 @@ defineExpose({ open })
                 class="size-4 shrink-0 rounded-[5px] border border-line"
                 :style="{ backgroundColor: previewCss }"
               />
+              <span class="relative flex min-w-0 flex-1 items-center">
+              <LpRollingText
+                v-show="rolling"
+                :value="rollText"
+                :duration="ROLL_MS"
+                align="start"
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 font-mono text-xs text-ink"
+              />
               <input
                 :value="inputValue"
                 :disabled="disabled"
@@ -756,10 +787,12 @@ defineExpose({ open })
                 autocomplete="off"
                 :aria-label="l.value"
                 class="min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted"
+                :class="rolling ? 'text-transparent' : ''"
                 @input="onInput"
                 @keydown.enter="commitTyped"
                 @blur="onInputBlur"
               />
+              </span>
             </div>
 
             <!-- Recent sits ABOVE the presets because it is the row that

package/src/components/LpCommandPalette.vue

@@ -181,6 +181,12 @@ const props = withDefaults(
      * so a stored history never resurrects a command that has gone away.
      */
     recent?: string[]
+    /**
+     * Let the palette keep the history itself, in localStorage under this key:
+     * every top-level command run is remembered, newest first. Ignored while
+     * `recent` is bound, which stays the way to store it somewhere else.
+     */
+    recentKey?: string
     /** How many recent commands to surface. */
     recentLimit?: number
     /** Headings the palette adds itself. */
@@ -351,6 +357,31 @@ function onTab(event: KeyboardEvent) {
   enter({ id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions })
 }
 
+/*
+ * A mode holds the command it was entered through, and a static `children`
+ * list is a snapshot of that moment. When the app rebuilds its commands (a
+ * theme list whose tick follows the active theme), the open mode is matched
+ * to the new commands by id along its path and takes their children, so a
+ * `keepOpen` pick inside it shows its own effect.
+ */
+watch(
+  () => props.commands,
+  (commands) => {
+    if (!trail.value.length) return
+    let level: Command[] = commands
+    const next: Command[] = []
+    for (const step of trail.value) {
+      const fresh = level.find((c) => c.id === step.id)
+      if (!fresh) return
+      next.push(fresh)
+      level = Array.isArray(fresh.children) ? fresh.children : []
+    }
+    trail.value = next
+    const last = next[next.length - 1]
+    if (last && Array.isArray(last.children)) modeItems.value = last.children
+  },
+)
+
 function enter(c: Command) {
   trailState.value = [...trailState.value, { query: query.value, selectedId: selectedId.value }]
   trail.value = [...trail.value, c]
@@ -498,11 +529,36 @@ const fetched = computed<Command[]>(() => {
  * Only on the root's empty query: once someone types, or drills into a mode,
  * relevance is the better order and a duplicated row is just noise.
  */
+const RECENT_KEEP = 20
+const ownRecent = ref<string[]>([])
+watch(
+  () => props.recentKey,
+  (key) => {
+    if (!key || typeof localStorage === "undefined") return
+    try {
+      const stored: unknown = JSON.parse(localStorage.getItem(key) ?? "[]")
+      ownRecent.value = Array.isArray(stored) ? stored.filter((v): v is string => typeof v === "string") : []
+    } catch {
+      ownRecent.value = []
+    }
+  },
+  { immediate: true },
+)
+function remember(id: string) {
+  const key = props.recentKey
+  if (!key || props.recent) return
+  ownRecent.value = [id, ...ownRecent.value.filter((v) => v !== id)].slice(0, RECENT_KEEP)
+  try {
+    localStorage.setItem(key, JSON.stringify(ownRecent.value))
+  } catch {}
+}
+const recentIds = computed(() => props.recent ?? (props.recentKey ? ownRecent.value : []))
+
 const recentItems = computed<Command[]>(() => {
-  if (mode.value || query.value.trim() || !props.recent?.length) return []
+  if (mode.value || query.value.trim() || !recentIds.value.length) return []
   const byId = new Map(props.commands.map((c) => [c.id, c]))
   const out: Command[] = []
-  for (const id of props.recent) {
+  for (const id of recentIds.value) {
     const c = byId.get(id)
     if (c && !c.disabled && !out.includes(c)) out.push(c)
     if (out.length >= props.recentLimit) break
@@ -590,6 +646,18 @@ const paragraphs = computed(() =>
     .filter(Boolean),
 )
 
+/*
+ * The row's description heads the pane only when it says something the body
+ * does not: a command whose full text opens with its description (or is it)
+ * would otherwise print the same sentences twice, once small and once large.
+ */
+const paneDescription = computed(() => {
+  const description = active.value?.description?.trim()
+  if (!description) return undefined
+  const body = paragraphs.value.join(" ")
+  return body.startsWith(description) ? undefined : description
+})
+
 /** Stagger between paragraphs, capped so a long section does not trickle in. */
 const STAGGER_MS = 45
 const STAGGER_MAX = 10
@@ -768,11 +836,16 @@ function run(c: Command | undefined) {
     return
   }
   emit("run", c.id, c)
+  if (!mode.value) remember(c.id)
   if (c.keepOpen) {
     // Back to the top of a fresh list: the query that found this command is
     // spent, and leaving it would hide whatever the action just changed.
     query.value = ""
-    select(0)
+    // Inside a mode the highlight stays on what was just picked, so trying
+    // themes one after another is a matter of the arrow keys; at the root the
+    // list it came from is gone and the top is the honest place to land.
+    if (mode.value) void nextTick(() => select(Math.max(0, flat.value.findIndex((x) => x.id === c.id))))
+    else select(0)
     inputRef.value?.focus()
     return
   }
@@ -1045,8 +1118,8 @@ useHotkeys(() =>
                       <LpIcon v-if="active.icon" :name="active.icon" :size="16" class="shrink-0 text-muted" />
                       <h3 class="min-w-0 text-base font-semibold">{{ active.label }}</h3>
                     </div>
-                    <p v-if="active.description" class="lp-cmd-para mt-0.5 text-xs text-muted">
-                      {{ active.description }}
+                    <p v-if="paneDescription" class="lp-cmd-para mt-0.5 text-xs text-muted">
+                      {{ paneDescription }}
                     </p>
                     <p
                       v-for="(para, i) in paragraphs"
@@ -1066,9 +1139,10 @@ useHotkeys(() =>
           </Transition>
         </div>
 
-        <!-- Footer hints -->
+        <!-- Footer hints. Keyboard-only, so a touch screen without a keyboard
+             gets the row back for results. -->
         <div
-          class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted"
+          class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden"
         >
           <span class="flex items-center gap-1">
             <kbd class="rounded border border-line px-1 text-[10px]">↑</kbd>

package/src/components/LpContextMenu.vue

@@ -87,7 +87,7 @@ function returnFocus(event: Event) {
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal v-if="items.length">
-      <ContextMenuContent :class="PANEL" @close-auto-focus="returnFocus">
+      <ContextMenuContent :collision-padding="8" :class="PANEL" @close-auto-focus="returnFocus">
         <ContextMenuItems :items="items" :panel="PANEL" />
       </ContextMenuContent>
     </ContextMenuPortal>

package/src/components/LpDatePicker.vue

@@ -25,6 +25,7 @@ import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
 import LpCalendar from "./LpCalendar.vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
 import LpTimeField from "./LpTimeField.vue"
 
 const props = withDefaults(
@@ -145,9 +146,12 @@ const showClear = computed(() => props.clearable && !!props.modelValue && !field
           ]"
         >
           <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
-          <span class="min-w-0 flex-1 truncate" :class="display ? '' : 'text-muted'">
-            {{ display || placeholder }}
-          </span>
+          <LpRollingText
+            :value="display || placeholder || ''"
+            align="start"
+            class="min-w-0 flex-1"
+            :class="display ? '' : 'text-muted'"
+          />
           <span v-if="showClear" class="w-[15px] shrink-0" aria-hidden="true" />
           <LpIcon
             name="lucide:chevron-down"
@@ -158,6 +162,7 @@ const showClear = computed(() => props.clearable && !!props.modelValue && !field
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent
+          :collision-padding="8"
           :side-offset="6"
           align="start"
           :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"