@leavepulse/ui 0.31.1 → 0.32.0

package/src/components/LpDisclosure.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Collapsible "show more" section built on reka Collapsible. The trigger is a
@@ -11,6 +18,7 @@
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
 import { type ComponentPublicInstance, computed, getCurrentInstance, nextTick, ref } from "vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -65,6 +73,11 @@ function onToggle(value: boolean) {
     })
   }
 }
+
+// The disclosure carries a bordered control frame; stacking several into one list means removing the per-item border from the outside.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "overflow-hidden rounded-control border border-line bg-surface-soft",
+)
 </script>
 
 <template>
@@ -72,7 +85,8 @@ function onToggle(value: boolean) {
     ref="root"
     :open="rootOpen"
     :default-open="defaultOpen"
-    class="overflow-hidden rounded-control border border-line bg-surface-soft"
+    :class="rootClass"
+    v-bind="rest"
     @update:open="onToggle"
   >
     <CollapsibleTrigger

package/src/components/LpDropzone.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * A place to put files: drop them, click to browse, or paste from the
@@ -17,6 +24,7 @@
  * the file dialog unreachable without a mouse.
  */
 import { onBeforeUnmount, onMounted, ref } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 import { useReveal } from "../composables/useReveal"
 import LpIcon from "./LpIcon.vue"
 
@@ -173,6 +181,17 @@ onMounted(() => {
 onBeforeUnmount(() => window.removeEventListener("paste", windowPaste))
 
 defineExpose({ browse: () => input.value?.click() })
+
+// The zone is a full-width block with generous padding by default, which is
+// the right shape on a page and the wrong one in a sidebar — `class="w-40"`
+// and `class="py-2"` have to be able to say so. The drag/reveal state classes
+// go through the same merge so there is a single class source on the root.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => [
+  "lp-dropzone relative flex w-full flex-col items-center gap-2 rounded-card px-6 py-8 text-center transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
+  over.value ? "bg-brand-soft" : TONES[props.tone],
+  over.value ? "lp-dropzone--over" : "",
+  props.animate && !revealed.value ? "lp-dropzone--waiting" : "",
+].join(" "))
 </script>
 
 <template>
@@ -180,12 +199,8 @@ defineExpose({ browse: () => input.value?.click() })
     ref="revealAnchor"
     type="button"
     :disabled="disabled"
-    class="lp-dropzone relative flex w-full flex-col items-center gap-2 rounded-card px-6 py-8 text-center transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
-    :class="[
-      over ? 'bg-brand-soft' : TONES[tone],
-      over ? 'lp-dropzone--over' : '',
-      animate && !revealed ? 'lp-dropzone--waiting' : '',
-    ]"
+    :class="rootClass"
+    v-bind="rest"
     @click="input?.click()"
     @paste="onPaste"
     @dragenter.prevent="onDragOver"

package/src/components/LpEmptyState.vue

@@ -1,7 +1,15 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended to
+// it, so opt out of the automatic pass-through that would add it a second
+// time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
-defineProps<{
+const props = defineProps<{
   icon?: string
   title: string
   description?: string
@@ -11,12 +19,22 @@ defineProps<{
    */
   compact?: boolean
 }>()
+
+// The empty state pads itself generously, which is right on a page and wrong
+// inside a small card — `class="py-2"` has to reach the root rather than lose
+// a coin toss with stylesheet order.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "flex flex-col items-center px-6 text-center",
+    props.compact ? "gap-2 py-6" : "gap-3 py-12",
+  ].join(" "),
+)
 </script>
 
 <template>
   <div
-    class="flex flex-col items-center px-6 text-center"
-    :class="compact ? 'gap-2 py-6' : 'gap-3 py-12'"
+    :class="rootClass"
+    v-bind="rest"
   >
     <div
       v-if="icon"

package/src/components/LpFileTree.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * File/folder tree — the kit convention for browsing a hierarchy of files so
@@ -30,6 +37,7 @@ import {
 import LpEmptyState from "./LpEmptyState.vue"
 import LpFileTreeNode from "./LpFileTreeNode.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export type { FileNode } from "./fileTree"
 
@@ -476,10 +484,17 @@ function collapseAll() {
 }
 
 defineExpose({ reveal, expandAll, collapseAll, checkAll, clearChecked, summary })
+
+// The tree fills its container; a consumer giving it a fixed height or width in a split pane must be able to say so.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden",
+)
 </script>
 
 <template>
-  <div v-if="loading" class="flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden">
+  <div v-if="loading"
+    :class="rootClass"
+    v-bind="rest">
     <div
       v-for="n in skeletonRows"
       :key="n"

package/src/components/LpFileTreeNode.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * One row of LpFileTree plus its recursively rendered children. Split out so the
@@ -22,6 +29,7 @@ import {
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = defineProps<{
   node: FileNode
@@ -146,12 +154,18 @@ function onActivate() {
   emit("select", props.node)
   if (isDir.value) emit("toggle", props.node)
 }
+
+// A node is a list row whose min-width the consumer may need to release when the tree scrolls horizontally.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "min-w-0",
+)
 </script>
 
 <template>
   <li
     role="treeitem"
-    class="min-w-0"
+    :class="rootClass"
+    v-bind="rest"
     :aria-level="depth + 1"
     :aria-selected="isSelected"
     :aria-expanded="canExpand ? isOpen : undefined"

package/src/components/LpFormField.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Form-control wrapper: label + the control (default slot) + hint/error.
@@ -11,6 +18,7 @@
 import { Label } from "reka-ui"
 import { useId } from "vue"
 import LpShift from "./LpShift.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 defineProps<{
   label?: string
@@ -20,6 +28,11 @@ defineProps<{
 }>()
 
 const id = useId()
+
+// The field stacks label and control with a fixed gap; a denser form needs that gap smaller.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex min-w-0 flex-col gap-1.5",
+)
 </script>
 
 <template>
@@ -28,7 +41,9 @@ const id = useId()
        to `min-width: auto` and so refuse to go narrower than the widest label or
        placeholder inside them — which is how a two-column form ended up wider
        than the phone holding it. -->
-  <div class="flex min-w-0 flex-col gap-1.5">
+  <div
+    :class="rootClass"
+    v-bind="rest">
     <Label v-if="label" :for="id" class="text-sm font-medium text-ink">
       {{ label }}
       <span v-if="required" class="text-danger">*</span>

package/src/components/LpImageEditor.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Straighten-and-crop for a picture on its way to being uploaded.
@@ -23,6 +30,7 @@ import { useZoomPan } from "../composables/useZoomPan"
 import LpButton from "./LpButton.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -364,10 +372,17 @@ const SHORTCUTS = [
 ] as const
 
 defineExpose({ export: exportImage, reset, edited, shortcuts: SHORTCUTS })
+
+// The editor lays out canvas and controls on a fixed gap, which a narrow panel has to tighten.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex flex-col gap-3",
+)
 </script>
 
 <template>
-  <div ref="revealAnchor" class="flex flex-col gap-3">
+  <div ref="revealAnchor"
+    :class="rootClass"
+    v-bind="rest">
     <!-- The frame is the crop. The picture moves under it, which is the
          interaction every avatar cropper already taught people. -->
     <!-- Focusable, because everything here is otherwise a mouse gesture: a

package/src/components/LpLightbox.vue

@@ -2,7 +2,8 @@
 /*
  * Full-screen image viewer — the Discord-style lightbox: click a thumbnail, the
  * image fills the screen, arrows step through the set, the wheel zooms toward
- * the cursor, dragging pans, and the backdrop or Esc closes it.
+ * the cursor over the picture and pages through the set off it, dragging pans,
+ * and the backdrop or Esc closes it.
  *
  * Built on reka's Dialog so focus trapping, Esc and scroll locking come from the
  * same primitive the rest of the kit's overlays use. The zoom/pan maths lives in
@@ -114,6 +115,57 @@ function go(next: number) {
 const canPrev = computed(() => total.value > 1 && (props.loop || current.value > 0))
 const canNext = computed(() => total.value > 1 && (props.loop || current.value < total.value - 1))
 
+/*
+ * Wheel over the PICTURE zooms; wheel anywhere else in the stage pages.
+ *
+ * The stage is mostly empty space — an image is letterboxed inside it, so the
+ * bands above and below a wide photo are a large part of what the pointer is
+ * actually over. Zooming there is a gesture aimed at nothing, while paging is
+ * what a set of images invites. Over the image itself the old behaviour stands:
+ * that is where "look closer" is unambiguous.
+ *
+ * A zoomed-in image is the exception. Once it is scaled up, the wheel is the
+ * only way back out, and the picture no longer fits its own box — so while
+ * zoomed, the whole stage zooms rather than stranding the viewer at 4x if they
+ * drift off the edge.
+ */
+const wheelAccum = ref(0)
+let wheelTimer: ReturnType<typeof setTimeout> | undefined
+
+/* A mouse notch arrives as one large delta; a trackpad sends a stream of small
+ * ones. Stepping per event would fling a flick through the whole set, so the
+ * deltas accumulate and a step is taken per threshold's worth of travel. */
+const WHEEL_STEP = 60
+
+function onStageWheel(e: WheelEvent) {
+  const overImage = (e.target as HTMLElement | null)?.closest("[data-lightbox-image]")
+  if (overImage || isZoomed.value) {
+    zoom.onWheel(e)
+    return
+  }
+  if (total.value < 2) return
+
+  // The stage does not scroll, so this only stops the PAGE behind the dialog
+  // from taking the gesture.
+  e.preventDefault()
+
+  wheelAccum.value += e.deltaY
+  // Idle between gestures clears the remainder: a half-step left over from one
+  // flick must not add itself to the next one minutes later.
+  clearTimeout(wheelTimer)
+  wheelTimer = setTimeout(() => (wheelAccum.value = 0), 200)
+
+  while (Math.abs(wheelAccum.value) >= WHEEL_STEP) {
+    const dir = wheelAccum.value > 0 ? 1 : -1
+    wheelAccum.value -= dir * WHEEL_STEP
+    if (dir > 0 ? !canNext.value : !canPrev.value) {
+      wheelAccum.value = 0
+      break
+    }
+    go(current.value + dir)
+  }
+}
+
 // Reset the view whenever the image changes — carrying a 4x zoom onto the next
 // picture means landing on a random crop of it.
 watch(
@@ -336,7 +388,7 @@ const ARROW =
           ref="viewport"
           class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"
           :class="isPanning ? 'cursor-grabbing' : isZoomed ? 'cursor-grab' : ''"
-          @wheel="zoom.onWheel"
+          @wheel="onStageWheel"
           @pointerdown="onPointerDown"
           @pointermove="zoom.onPointerMove"
           @pointerup="onPointerUp"

package/src/components/LpLink.vue

@@ -1,5 +1,13 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended to
+// it, so opt out of the automatic pass-through that would add it a second
+// time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { computed, type Component } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -94,6 +102,21 @@ const REVEAL_TRIGGER = {
 const revealClass = computed(
   () => `${REVEAL_BASE} ${REVEAL_TRIGGER[props.revealOn]}`,
 )
+
+// A link is inline text: the gap to its icon and the underline treatment are
+// the parts a consumer restyles, and `class="gap-0"` or `class="no-underline"`
+// must beat the default rather than depend on stylesheet order.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+    colorClass.value,
+    props.variant === "reveal"
+      ? revealClass.value
+      : props.variant === "underline"
+        ? "underline decoration-current/40 hover:decoration-current"
+        : "hover:underline",
+  ].join(" "),
+)
 </script>
 
 <template>
@@ -102,15 +125,8 @@ const revealClass = computed(
     :href="isAnchor ? href : undefined"
     :target="target"
     :rel="rel"
-    class="inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-    :class="[
-      colorClass,
-      variant === 'reveal'
-        ? revealClass
-        : variant === 'underline'
-          ? 'underline decoration-current/40 hover:decoration-current'
-          : 'hover:underline',
-    ]"
+    :class="rootClass"
+    v-bind="rest"
   >
     <slot />
   </component>

package/src/components/LpLogViewer.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended to
+// it, so opt out of the automatic pass-through that would add it a second
+// time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Terminal-flavoured log stream. Monospace rows, a tonal level gutter, optional
@@ -23,6 +30,7 @@ import { useHotkeys } from "../composables/useHotkeys"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal" | "success"
 
@@ -632,14 +640,24 @@ const transitionProps = {
   "leave-to-class": "max-h-0 -translate-y-1 opacity-0",
   "move-class": "transition-transform duration-200 ease-[var(--ease-emphasized)]",
 }
+
+// The viewer draws its own card frame and hides its overflow; a consumer
+// fitting it into a panel that already has a border, or giving it a fixed
+// height, needs those to give way rather than lose to stylesheet order.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed",
+    frozen.value ? "ring-1 ring-brand" : "",
+  ].join(" "),
+)
 </script>
 
 <template>
   <div
     ref="root"
     tabindex="-1"
-    class="relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed"
-    :class="frozen ? 'ring-1 ring-brand' : ''"
+    :class="rootClass"
+    v-bind="rest"
     @pointerenter="hovered = true"
     @pointerleave="hovered = false"
   >

package/src/components/LpMapPicker.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Point picker on a raster tile map — drag to pan, wheel or the buttons to
@@ -17,6 +24,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { type LatLon, OSM_TILES, type TileSource, project, tileUrl, unproject } from "./address"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -536,11 +544,17 @@ defineExpose({ zoomIn: () => zoomBy(1), zoomOut: () => zoomBy(-1), recentre, loc
 
 const CONTROL =
   "flex size-8 items-center justify-center rounded-control bg-black/45 text-white/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+
+// The picker is a bordered box with a fixed frame; a consumer fitting it into a panel of their own needs the border and radius to be overridable.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "relative overflow-hidden rounded-control border border-line bg-surface-soft",
+)
 </script>
 
 <template>
   <div
-    class="relative overflow-hidden rounded-control border border-line bg-surface-soft"
+    :class="rootClass"
+    v-bind="rest"
     :style="{ height }"
   >
     <div