@leavepulse/ui 0.28.1 → 0.28.2

package/src/components/LpProgress.vue

@@ -97,17 +97,29 @@ const props = withDefaults(
  * gap to the other end. Interpolating here and handing both the same number
  * keeps them exactly level, because there is only one number.
  */
-const eased = ref(props.animateOnMount ? 0 : 1)
+/*
+ * `shown` is the position on screen, and it is the thing that is animated —
+ * not a phase that something else multiplies by.
+ *
+ * The earlier shape kept an eased 0..1 and derived the position from it and a
+ * `from` captured in the watcher. That could not work: `from` was read off a
+ * computed over `props.value`, so by the time the watcher ran it already
+ * reported the DESTINATION, and every sweep after the first interpolated from
+ * the answer to the answer. The entrance still animated, which is what made
+ * the bug look like a decision — the bar filled beautifully once and jumped
+ * forever after.
+ *
+ * Animating the position directly removes the question. Wherever the bar is is
+ * where the next sweep starts, including one that interrupts another midway.
+ */
+const shown = ref(props.animateOnMount ? 0 : props.value)
 let raf = 0
 
-/* Where the current sweep began, so one interrupted mid-way continues from the
-   arc's present position rather than snapping back to empty. */
-let from = props.animateOnMount ? 0 : props.value
-
-const runSweep = (ms: number) => {
+const runSweep = (to: number, ms: number) => {
   if (raf) cancelAnimationFrame(raf)
-  if (prefersReducedMotion() || ms <= 0) {
-    eased.value = 1
+  const from = shown.value
+  if (prefersReducedMotion() || ms <= 0 || from === to) {
+    shown.value = to
     return
   }
   const t0 = performance.now()
@@ -115,7 +127,7 @@ const runSweep = (ms: number) => {
     const t = Math.min(1, (now - t0) / ms)
     // The kit's shared curve — the same function LpNumberFlow eases on, so the
     // arc and the counter agree by construction rather than by comment.
-    eased.value = easeOut(t)
+    shown.value = from + (to - from) * easeOut(t)
     raf = t < 1 ? requestAnimationFrame(step) : 0
   }
   raf = requestAnimationFrame(step)
@@ -140,22 +152,19 @@ const bindReveal = (instance: unknown) => {
   revealAnchor.value = (instance as { $el?: Element } | null)?.$el ?? null
 }
 
-watch(revealed, (visible) => {
-  if (visible && props.animateOnMount) runSweep(props.duration)
-}, { immediate: true })
-
-/* A later change re-runs the sweep from where it stands, so the ring eases to
-   its new value instead of jumping. */
 watch(
-  () => [props.value, props.max],
-  () => {
-    from = shown.value
-    runSweep(props.duration)
+  revealed,
+  (visible) => {
+    if (visible && props.animateOnMount) runSweep(props.value, props.duration)
   },
+  { immediate: true },
 )
 
-/** The value both the arc and the counter render: one interpolation, one truth. */
-const shown = computed(() => from + (props.value - from) * eased.value)
+/* A later change eases to the new value from wherever the bar stands. */
+watch(
+  () => [props.value, props.max],
+  () => runSweep(props.value, props.duration),
+)
 
 const pct = computed(() =>
   Math.max(0, Math.min(100, (shown.value / props.max) * 100)),

package/src/composables/useHotkeys.ts

@@ -111,9 +111,38 @@ function matches(event: KeyboardEvent, binding: HotkeyBinding): boolean {
  * may come and go with the state that owns them — a getter is the point, not a
  * formality.
  */
-export function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>) {
+export interface UseHotkeysOptions {
+  /**
+   * Only act while the focus is inside this element.
+   *
+   * The default is the whole window, which is right for a command palette and
+   * wrong for a control: two of the same component on one page would both
+   * answer the same key, and a control beside a form would answer keys aimed
+   * at the form. Scoping it here rather than in each component because every
+   * one of them was about to write the same `document.activeElement` check and
+   * decline by hand.
+   *
+   * Undefined or null means the window, so the palette case stays the default.
+   */
+  scope?: MaybeRefOrGetter<HTMLElement | null | undefined>
+}
+
+export function useHotkeys(
+  bindings: MaybeRefOrGetter<HotkeyBinding[]>,
+  options: UseHotkeysOptions = {},
+) {
+  function inScope(target: EventTarget | null): boolean {
+    const el = toValue(options.scope)
+    if (!el) return true
+    const node = target instanceof Node ? target : null
+    // The element itself counts: a focusable canvas holds the focus without
+    // containing anything that could.
+    return !!node && (el === node || el.contains(node))
+  }
+
   function onKeydown(event: KeyboardEvent) {
     if (event.isComposing) return
+    if (!inScope(event.target)) return
     const inTextEntry = isTextEntry(event.target)
     for (const binding of toValue(bindings)) {
       if (inTextEntry && !binding.allowInInput) continue

package/src/composables/useZoomPan.ts

@@ -25,6 +25,23 @@ export interface UseZoomPanOptions {
 
 export interface UseZoomPan {
   scale: Ref<number>
+  /**
+   * Pan offset in CONTENT pixels — what `style` puts inside `translate()`,
+   * before the scale magnifies it. Exposed because anything that has to know
+   * *which part* is visible needs the number, not the CSS string: an exporter
+   * writing the cropped region, a minimap drawing the viewport rectangle, a
+   * caller restoring a saved position. Parsing it back out of `transform` is
+   * the alternative, and that breaks the moment this composable changes how it
+   * composes the transform.
+   */
+  offset: ComputedRef<{ x: number; y: number }>
+  /**
+   * Put the view somewhere — restoring a saved position, or carrying one
+   * through a change that re-frames the content. Clamped like any other pan,
+   * so a caller cannot place the content off the viewport. Omitting `scale`
+   * keeps the current one.
+   */
+  setView: (view: { x: number; y: number; scale?: number }) => void
   /** True once zoomed past the minimum — the point at which panning matters. */
   zoomed: ComputedRef<boolean>
   /** True while a drag is in flight, so the caller can swap the cursor. */
@@ -194,8 +211,21 @@ export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
     transition: panning.value || pinchStartDistance > 0 ? "none" : undefined,
   }))
 
+  const offset = computed(() => ({ x: x.value, y: y.value }))
+
+  function setView(view: { x: number; y: number; scale?: number }) {
+    if (view.scale !== undefined) {
+      scale.value = Math.min(max, Math.max(min, view.scale))
+    }
+    x.value = view.x
+    y.value = view.y
+    clampPan()
+  }
+
   return {
     scale,
+    offset,
+    setView,
     zoomed,
     panning,
     style,

package/src/index.ts

@@ -55,6 +55,7 @@ export { default as LpDivider } from "./components/LpDivider.vue"
 export { default as LpDrawer } from "./components/LpDrawer.vue"
 export { default as LpDropdownMenu } from "./components/LpDropdownMenu.vue"
 export type { MenuItem } from "./components/LpDropdownMenu.vue"
+export { default as LpDropzone } from "./components/LpDropzone.vue"
 export { default as LpEmptyState } from "./components/LpEmptyState.vue"
 export { default as LpFileTree } from "./components/LpFileTree.vue"
 export type { FileTreeSummary } from "./components/LpFileTree.vue"
@@ -73,6 +74,7 @@ export {
 } from "./components/fileTree"
 export { default as LpFormField } from "./components/LpFormField.vue"
 export { default as LpIcon } from "./components/LpIcon.vue"
+export { default as LpImageEditor } from "./components/LpImageEditor.vue"
 export { default as LpInfraNode } from "./components/LpInfraNode.vue"
 export type { InfraNodeData } from "./components/LpInfraNode.vue"
 export { default as LpInput } from "./components/LpInput.vue"