@leavepulse/ui 0.69.0 → 0.70.1

package/dist/composables/useSpotlight.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export interface UseSpotlightOptions {
+    /** Switch the effect off without unbinding — the listeners stay, nothing is drawn. */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseSpotlight {
+    /** Attach to the element carrying `.lp-spotlight`. */
+    el: Ref<HTMLElement | null>;
+}
+/** Pointer position relative to a rect, in px, as the CSS custom properties want it. */
+export declare function spotlightPoint(rect: {
+    left: number;
+    top: number;
+}, clientX: number, clientY: number): {
+    x: string;
+    y: string;
+};
+export declare function useSpotlight(options?: UseSpotlightOptions): UseSpotlight;

package/dist/composables/useSpotlight.js

@@ -0,0 +1,53 @@
+import { ref, watch, toValue, onBeforeUnmount } from "vue";
+import { usePointerFrame } from "./usePointerFrame.js";
+function spotlightPoint(rect, clientX, clientY) {
+  return { x: `${Math.round(clientX - rect.left)}px`, y: `${Math.round(clientY - rect.top)}px` };
+}
+function useSpotlight(options = {}) {
+  const el = ref(null);
+  const pointer = usePointerFrame({
+    disabled: options.disabled,
+    paint: (clientX, clientY) => {
+      const node = el.value;
+      if (!node) return;
+      const { x, y } = spotlightPoint(node.getBoundingClientRect(), clientX, clientY);
+      node.style.setProperty("--lp-spot-x", x);
+      node.style.setProperty("--lp-spot-y", y);
+    }
+  });
+  function onMove(event) {
+    if (pointer.move(event)) el.value?.setAttribute("data-lp-spot", "");
+  }
+  function onLeave() {
+    el.value?.removeAttribute("data-lp-spot");
+  }
+  function detach(node) {
+    node.removeEventListener("pointermove", onMove);
+    node.removeEventListener("pointerleave", onLeave);
+    node.removeAttribute("data-lp-spot");
+  }
+  watch(
+    el,
+    (node, previous) => {
+      if (previous) detach(previous);
+      if (!node) return;
+      node.addEventListener("pointermove", onMove, { passive: true });
+      node.addEventListener("pointerleave", onLeave, { passive: true });
+    },
+    { flush: "post" }
+  );
+  watch(
+    () => toValue(options.disabled),
+    (disabled) => {
+      if (disabled) onLeave();
+    }
+  );
+  onBeforeUnmount(() => {
+    if (el.value) detach(el.value);
+  });
+  return { el };
+}
+export {
+  spotlightPoint,
+  useSpotlight
+};

package/dist/composables/useTilt.js

@@ -1,38 +1,48 @@
-import { useReducedMotion } from "motion-v";
 import { computed, toValue, ref } from "vue";
+import { usePointerFrame } from "./usePointerFrame.js";
+import { usePrefersReducedMotion } from "./useReducedMotion.js";
+import { spotlightPoint } from "./useSpotlight.js";
+const TILT_VARS = ["--lp-tilt-x", "--lp-tilt-y", "--lp-spot-x", "--lp-spot-y"];
 function useTilt(source = {}) {
   const options = computed(() => toValue(source));
-  const reduceMotion = useReducedMotion();
+  const reduceMotion = usePrefersReducedMotion();
   const active = ref(false);
-  const nx = ref(0);
-  const ny = ref(0);
+  let target = null;
+  const pointer = usePointerFrame({
+    anyPointer: true,
+    paint: (x, y) => {
+      if (!target || !active.value) return;
+      const r = target.getBoundingClientRect();
+      target.style.setProperty("--lp-tilt-x", ((x - r.left) / r.width * 2 - 1).toFixed(3));
+      target.style.setProperty("--lp-tilt-y", ((y - r.top) / r.height * 2 - 1).toFixed(3));
+      const spot = spotlightPoint(r, x, y);
+      target.style.setProperty("--lp-spot-x", spot.x);
+      target.style.setProperty("--lp-spot-y", spot.y);
+    }
+  });
   function onPointerMove(e) {
-    if (reduceMotion.value) return;
-    const el = e.currentTarget;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    nx.value = (e.clientX - r.left) / r.width * 2 - 1;
-    ny.value = (e.clientY - r.top) / r.height * 2 - 1;
+    if (e.currentTarget instanceof HTMLElement) target = e.currentTarget;
+    pointer.move(e);
   }
   function onPointerEnter() {
     active.value = true;
   }
   function onPointerLeave() {
     active.value = false;
-    nx.value = 0;
-    ny.value = 0;
+    pointer.cancel();
+    for (const name of TILT_VARS) target?.style.removeProperty(name);
   }
   const style = computed(() => {
     if (reduceMotion.value) {
       return { transition: "transform 0.2s ease" };
     }
     const { max = 10, lift = 8, scale = 1.03 } = options.value;
-    const rx = active.value ? -ny.value * max : 0;
-    const ry = active.value ? nx.value * max : 0;
+    const rx = active.value ? `calc(var(--lp-tilt-y, 0) * ${-max}deg)` : "0deg";
+    const ry = active.value ? `calc(var(--lp-tilt-x, 0) * ${max}deg)` : "0deg";
     const z = active.value ? lift : 0;
     const s = active.value ? scale : 1;
     return {
-      transform: `translate3d(0, ${-z}px, 0) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`,
+      transform: `translate3d(0, ${-z}px, 0) rotateX(${rx}) rotateY(${ry}) scale(${s})`,
       transformStyle: "preserve-3d",
       transition: active.value ? "transform 0.12s ease-out" : "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
     };
@@ -41,11 +51,9 @@ function useTilt(source = {}) {
     if (!options.value.glare || reduceMotion.value || !active.value) {
       return { opacity: 0 };
     }
-    const px = (nx.value + 1) * 50;
-    const py = (ny.value + 1) * 50;
     return {
       opacity: 1,
-      background: `radial-gradient(circle at ${px}% ${py}%, rgba(255,255,255,0.35), transparent 55%)`,
+      background: "radial-gradient(circle at var(--lp-spot-x, 50%) var(--lp-spot-y, 50%), rgba(255,255,255,0.35), transparent 55%)",
       transition: "opacity 0.2s ease"
     };
   });

package/dist/composables/useTween.d.ts

@@ -0,0 +1,43 @@
+import { type MaybeRefOrGetter, type ShallowRef } from "vue";
+export interface TweenOptions<T> {
+    /** Travel time in ms. Defaults to `--duration-medium`, read when a tween starts. */
+    duration?: MaybeRefOrGetter<number | undefined>;
+    /** Defaults to the curve of `--ease-emphasized`. */
+    ease?: (t: number) => number;
+    /**
+     * False makes a change land at once. Read at the moment of the change, so a
+     * component can jump while its content is hidden or not yet revealed and
+     * tween once it is on screen.
+     */
+    enabled?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Same content, new object: skip. A source rebuilt by a computed on every
+     * unrelated change would otherwise spend a whole duration of frames tweening
+     * a value into itself.
+     */
+    equal?: (a: T, b: T) => boolean;
+}
+export declare function useTween<T>(source: () => T, mix: (from: T, to: T, t: number) => T, options?: TweenOptions<T>): Readonly<ShallowRef<T>>;
+export declare const lerp: (a: number, b: number, t: number) => number;
+/**
+ * A colour between two, as CSS — any two, `var()` tokens included, since the
+ * browser resolves both ends. Mixed in oklab so a hue change passes through
+ * believable colours instead of the grey a straight RGB blend dips into.
+ */
+export declare const mixColor: (from: string, to: string, t: number) => string;
+/**
+ * A series stretched or squeezed to `count` points along its own length.
+ *
+ * Morphing needs a point for every point: a line going from 12 readings to 30
+ * has nothing to move its 13th to 30th points FROM. Reading the old line at the
+ * new points' relative positions gives them a start on the shape as it was, so
+ * the morph changes heights rather than also redrawing the curve's outline.
+ * A position next to a gap takes the nearer reading, and is a gap only when
+ * both neighbours are.
+ */
+export declare const resample: (values: (number | null)[], count: number) => (number | null)[];
+/**
+ * One series of readings partway to another. A point that is a gap at either
+ * end takes the target's value: there is no height to travel from or to.
+ */
+export declare const mixValues: (from: (number | null)[], to: (number | null)[], t: number) => (number | null)[];

package/dist/composables/useTween.js

@@ -0,0 +1,69 @@
+import { shallowRef, watch, toValue, onScopeDispose } from "vue";
+import { durationToken, prefersReducedMotion, tokenEase } from "./easing.js";
+function useTween(source, mix, options = {}) {
+  const shown = shallowRef(source());
+  let target = shown.value;
+  let frame = 0;
+  const stop = () => {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+  };
+  watch(source, (to) => {
+    if (options.equal?.(target, to)) return;
+    target = to;
+    const ms = toValue(options.duration) ?? durationToken("duration-medium");
+    if (toValue(options.enabled) === false || ms <= 0 || prefersReducedMotion() || typeof requestAnimationFrame === "undefined") {
+      stop();
+      shown.value = to;
+      return;
+    }
+    const from = shown.value;
+    const ease = options.ease ?? tokenEase("ease-emphasized");
+    const started = performance.now();
+    stop();
+    const step = (now) => {
+      const t = Math.min(1, Math.max(0, (now - started) / ms));
+      shown.value = t < 1 ? mix(from, to, ease(t)) : to;
+      frame = t < 1 ? requestAnimationFrame(step) : 0;
+    };
+    frame = requestAnimationFrame(step);
+  });
+  onScopeDispose(stop);
+  return shown;
+}
+const lerp = (a, b, t) => a + (b - a) * t;
+const mixColor = (from, to, t) => {
+  if (from === to || t >= 1) return to;
+  if (t <= 0) return from;
+  return `color-mix(in oklab, ${from}, ${to} ${(t * 100).toFixed(1)}%)`;
+};
+const resample = (values, count) => {
+  const n = values.length;
+  if (n === count) return values;
+  if (!n) return new Array(count).fill(null);
+  return Array.from({ length: count }, (_, i) => {
+    const pos = count <= 1 ? 0 : i * (n - 1) / (count - 1);
+    const lo = Math.floor(pos);
+    const hi = Math.min(n - 1, lo + 1);
+    const a = values[lo];
+    const b = values[hi];
+    const f = pos - lo;
+    if (a == null) return f >= 0.5 ? b : null;
+    if (b == null) return f < 0.5 ? a : null;
+    return lerp(a, b, f);
+  });
+};
+const mixValues = (from, to, t) => {
+  const start = resample(from, to.length);
+  return to.map((v, i) => {
+    const a = start[i];
+    return v == null || a == null ? v : lerp(a, v, t);
+  });
+};
+export {
+  lerp,
+  mixColor,
+  mixValues,
+  resample,
+  useTween
+};

package/dist/composables/useView.d.ts

@@ -0,0 +1,18 @@
+import { type ComputedRef } from "vue";
+export interface LpView {
+    window: Window;
+    document: Document;
+    /** Where overlays teleport to: the frame's body. */
+    portal: HTMLElement;
+}
+export declare function provideView(view: ComputedRef<LpView | null>): void;
+/** The view the calling component renders in; the page itself outside any frame. */
+export declare function useView(): ComputedRef<LpView | null>;
+/** The window to measure and listen on: the frame's inside one, the page's otherwise. */
+export declare function viewWindow(view: LpView | null | undefined): Window;
+export declare function viewDocument(view: LpView | null | undefined): Document;
+/** The `to` of a portal: the frame's body inside one, `body` otherwise. */
+export declare function usePortalTarget(): ComputedRef<HTMLElement | "body">;
+export declare function forwardViewEvents(from: Document, to: Document): () => void;
+/** A layer's outside and Escape handler: ignores what happened in another document. */
+export declare function useOutsideGuard(): (event: Event) => void;

package/dist/composables/useView.js

@@ -0,0 +1,64 @@
+import { inject, computed, provide } from "vue";
+const LP_VIEW = /* @__PURE__ */ Symbol.for("lp-view");
+function provideView(view) {
+  provide(LP_VIEW, view);
+}
+function useView() {
+  return inject(
+    LP_VIEW,
+    computed(() => null)
+  );
+}
+function viewWindow(view) {
+  return view?.window ?? window;
+}
+function viewDocument(view) {
+  return view?.document ?? document;
+}
+function usePortalTarget() {
+  const view = useView();
+  return computed(() => view.value?.portal ?? "body");
+}
+const ORIGIN = "lpViewDocument";
+const FORWARDED = ["pointerdown", "pointerup", "click", "focusin", "keydown"];
+function forwardViewEvents(from, to) {
+  const forward = (event) => {
+    if (event.type === "keydown" && event.key !== "Escape") return;
+    const Copy = event.constructor;
+    const copy = new Copy(event.type, event);
+    copy[ORIGIN] = from;
+    const path = event.composedPath();
+    Object.defineProperty(copy, "target", { value: event.target });
+    copy.composedPath = () => path;
+    to.dispatchEvent(copy);
+  };
+  for (const type of FORWARDED) from.addEventListener(type, forward);
+  return () => {
+    for (const type of FORWARDED) from.removeEventListener(type, forward);
+  };
+}
+function originOf(event) {
+  const detail = event.detail;
+  const inner = detail && typeof detail === "object" && detail.originalEvent ? detail.originalEvent : event;
+  const marked = inner[ORIGIN];
+  if (marked) return marked;
+  const target = inner.target;
+  if (!target || typeof target.nodeType !== "number") return null;
+  return target.nodeType === 9 ? target : target.ownerDocument;
+}
+function useOutsideGuard() {
+  const view = useView();
+  return (event) => {
+    const origin = originOf(event);
+    if (origin && origin !== viewDocument(view.value)) event.preventDefault();
+  };
+}
+export {
+  forwardViewEvents,
+  provideView,
+  useOutsideGuard,
+  usePortalTarget,
+  useView,
+  viewDocument,
+  viewWindow
+};

package/dist/icons-all.js

@@ -1,3 +1,3 @@
 import lucide from "@iconify-json/lucide/icons.json";
-import { a as registerIconCollection } from "./chunks/icons-DVhZ_plB.js";
+import { a as registerIconCollection } from "./chunks/icons-4IywzkHk.js";
 registerIconCollection(lucide);

package/dist/index.d.ts

@@ -191,7 +191,9 @@ export { applyTheme, applyThemeWithTransition, revealTransition, bootstrapTheme,
 export type { RevealOrigin } from "./theme/useTheme";
 export { detectBackdropFilter, GLASS_BACKDROP_ATTR, isBrokenBackdropEngine, NO_BACKDROP_ATTR, setGlassBackdrop } from "./theme/backdrop";
 export { DEFAULT_SURFACE } from "./theme/tokens";
-export { defineTheme } from "./theme/define";
+export { defineTheme, withBrand } from "./theme/define";
+export { STUDIO_BRANDS, STUDIO_CORNERS, STUDIO_MOTION, STUDIO_SIZES, useThemeStudio } from "./theme/studio";
+export type { StudioState, ThemeStudio, ThemeStudioOptions } from "./theme/studio";
 export type { ThemeOverrides } from "./theme/define";
 export type { ColorTokens, DensityTokens, FontTokens, ShapeTokens, SurfaceTokens, TokenSet, } from "./theme/tokens";
 export { amber, dark, light, lime, nord, presets, rose, violet } from "./theme/presets";
@@ -229,12 +231,20 @@ export type { FieldContext, FieldControlState } from "./composables/useField";
 export type { UseInputFilterOptions } from "./composables/useInputFilter";
 export { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing";
 export { useReveal } from "./composables/useReveal";
+export { useRevealedValue } from "./composables/useRevealedValue";
 export { hints, vHint } from "./composables/useHints";
 export type { HintEvent } from "./composables/useHints";
 export { scrollParent, scrollToElement } from "./composables/scroll";
 export type { ScrollParentOptions, ScrollToElementOptions } from "./composables/scroll";
 export { useMediaQuery } from "./composables/useMediaQuery";
+export { usePrefersReducedMotion } from "./composables/useReducedMotion";
+export { useResizeObserver } from "./composables/useResizeObserver";
+export type { UseResizeObserverOptions } from "./composables/useResizeObserver";
+export { usePointerFrame } from "./composables/usePointerFrame";
+export type { PointerFrame, PointerFrameOptions } from "./composables/usePointerFrame";
+export { usePortalTarget, useView, viewDocument, viewWindow, type LpView } from "./composables/useView";
 export type { UseReveal, UseRevealOptions } from "./composables/useReveal";
+export type { UseRevealedValue, UseRevealedValueOptions } from "./composables/useRevealedValue";
 export { useAsyncTask } from "./composables/useAsyncTask";
 export { useRovingFocus } from "./composables/useRovingFocus";
 export type { RovingItem, UseRovingFocusOptions } from "./composables/useRovingFocus";
@@ -260,5 +270,92 @@ export type { SystemThemes, UseTheme } from "./theme/useTheme";
 export { layoutController } from "./layout/useLayout";
 export type { LayoutController } from "./layout/useLayout";
 export { default as LpThemeProvider } from "./components/LpThemeProvider.vue";
+export { default as LpFrame } from "./components/LpFrame.vue";
+export { default as LpThemeStudio } from "./components/LpThemeStudio.vue";
+export type { ThemeStudioLabels, ThemeStudioPart } from "./components/LpThemeStudio.vue";
+export { default as LpThemeStudioSection } from "./components/LpThemeStudioSection.vue";
 export { isInternalHref, resolveLink } from "./components/link";
 export type { LinkTarget, ResolvedLink } from "./components/link";
+export { default as LpRepeater } from "./components/LpRepeater.vue";
+export type { RepeaterItemKey } from "./composables/useRepeater";
+export { default as LpGauge } from "./components/LpGauge.vue";
+export type { GaugeLabels } from "./components/LpGauge.vue";
+export { default as LpQuota } from "./components/LpQuota.vue";
+export type { QuotaLabels } from "./components/LpQuota.vue";
+export { default as LpStatus } from "./components/LpStatus.vue";
+export { default as LpRelativeTime } from "./components/LpRelativeTime.vue";
+export { default as LpActivityLine } from "./components/LpActivityLine.vue";
+export { arcPath, capacityThresholds, meterFraction, toneAt, TONE_COLOR, TONE_SOFT, } from "./components/meter";
+export type { MeterThreshold, MeterTone } from "./components/meter";
+export { TONE_ALIASES, TONES, toneLook, toneOf } from "./components/tone";
+export type { Tone, ToneLook, ToneName } from "./components/tone";
+export { formatAmount, quotaSegments, quotaState } from "./components/quota";
+export type { QuotaPart, QuotaSegment, QuotaState, QuotaUnit } from "./components/quota";
+export { compactNumber, formatBytes } from "./components/format";
+export type { CompactNumberOptions, FormatBytesOptions } from "./components/format";
+export { STATUS_LABELS, STATUS_LOOK } from "./components/status";
+export type { StatusKind, StatusLook } from "./components/status";
+export { formatRelativeTime } from "./components/relativeTime";
+export type { RelativeTime, RelativeTimeOptions, RelativeUnit } from "./components/relativeTime";
+export { default as LpPipeline } from "./components/LpPipeline.vue";
+export type { PipelineLabels } from "./components/LpPipeline.vue";
+export { default as LpStepMark } from "./components/LpStepMark.vue";
+export type { StepMarkStatus } from "./components/LpStepMark.vue";
+export { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed, } from "./components/pipeline";
+export type { PipelineStep, StepStatus } from "./components/pipeline";
+export { default as LpLoader } from "./components/LpLoader.vue";
+export type { LoaderLabels, LoaderSize, LoaderTone, LoaderVariant } from "./components/LpLoader.vue";
+export { useLoadingGate } from "./composables/useLoadingGate";
+export type { LoadingGateOptions } from "./composables/useLoadingGate";
+export { useNow } from "./composables/useNow";
+export type { UseNowOptions } from "./composables/useNow";
+export { default as LpCountdown } from "./components/LpCountdown.vue";
+export type { CountdownLabels } from "./components/LpCountdown.vue";
+export { ceilToSecond, crossedMilestone, DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts, } from "./components/timeSpan";
+export type { TimeFormat, TimePart, TimeSplit, TimeUnit, TimeUnitLabels } from "./components/timeSpan";
+export { default as LpCopyButton } from "./components/LpCopyButton.vue";
+export type { CopyButtonLabels, CopyValue } from "./components/LpCopyButton.vue";
+export { default as LpSecretField } from "./components/LpSecretField.vue";
+export type { SecretFieldLabels } from "./components/LpSecretField.vue";
+export { default as LpDataList } from "./components/LpDataList.vue";
+export type { DataListItem, DataListLabels } from "./components/LpDataList.vue";
+export { default as LpEditable } from "./components/LpEditable.vue";
+export type { EditableLabels } from "./components/LpEditable.vue";
+export { default as LpTruncate } from "./components/LpTruncate.vue";
+export { default as LpCodeDisplay } from "./components/LpCodeDisplay.vue";
+export type { CodeDisplayLabels } from "./components/LpCodeDisplay.vue";
+export { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText";
+export { default as LpHoverCard } from "./components/LpHoverCard.vue";
+export { default as LpIdenticon } from "./components/LpIdenticon.vue";
+export { hashString, identicon, identiconRects, identiconSvg } from "./components/identicon";
+export type { Identicon, IdenticonOptions, IdenticonSvgOptions } from "./components/identicon";
+export { default as LpShaderBackdrop } from "./components/LpShaderBackdrop.vue";
+export { PRESET_NAMES as SHADER_PRESETS } from "./components/shaderBackdrop";
+export type { ShaderPreset } from "./components/shaderBackdrop";
+export { default as LpCollapse } from "./components/LpCollapse.vue";
+export { pseudoLocalize } from "./composables/pseudoLocale";
+export type { PseudoOptions } from "./composables/pseudoLocale";
+export { default as LpTextReveal } from "./components/LpTextReveal.vue";
+export { default as LpShinyText } from "./components/LpShinyText.vue";
+export { default as LpTypewriter } from "./components/LpTypewriter.vue";
+export { default as LpScramble } from "./components/LpScramble.vue";
+export { useScramble } from "./composables/useScramble";
+export type { UseScramble, UseScrambleOptions } from "./composables/useScramble";
+export { useInView } from "./composables/useInView";
+export type { UseInView } from "./composables/useInView";
+export { graphemes, planScramble, randomGlyph, scrambleFrame, seededRandom, settledCells, SCRAMBLE_GLYPHS, } from "./components/scramble";
+export type { ScrambleCell, ScrambleFrameCell, ScrambleOptions } from "./components/scramble";
+export { default as LpDock } from "./components/LpDock.vue";
+export type { DockItem } from "./components/LpDock.vue";
+export { dockSize, magneticOffset } from "./components/dock";
+export { default as LpMasonry } from "./components/LpMasonry.vue";
+export { masonryColumnCount, placeMasonry } from "./components/masonry";
+export type { MasonryColumns, MasonryPlacement } from "./components/masonry";
+export { default as LpRevealOnScroll } from "./components/LpRevealOnScroll.vue";
+export { revealFrom, revealTo, staggerDelay } from "./components/reveal";
+export type { RevealDirection, RevealPreset } from "./components/reveal";
+export { default as LpSpotlight } from "./components/LpSpotlight.vue";
+export { default as LpGlowBorder } from "./components/LpGlowBorder.vue";
+export { default as LpMagnetic } from "./components/LpMagnetic.vue";
+export { spotlightPoint, useSpotlight } from "./composables/useSpotlight";
+export type { UseSpotlight, UseSpotlightOptions } from "./composables/useSpotlight";