@leavepulse/ui 0.69.0 → 0.70.0

package/src/composables/useTilt.ts

@@ -1,5 +1,7 @@
-import { useReducedMotion } from "motion-v"
 import { computed, ref, toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter, type Ref } from "vue"
+import { usePointerFrame } from "./usePointerFrame"
+import { usePrefersReducedMotion } from "./useReducedMotion"
+import { spotlightPoint } from "./useSpotlight"
 
 /*
  * useTilt — pointer-reactive 3D tilt for a "tactile" surface (a card, a tile, a
@@ -8,9 +10,14 @@ import { computed, ref, toValue, type ComputedRef, type CSSProperties, type Mayb
  *
  * Bind the returned handlers to the element and the returned `style` to it (it
  * needs a shared `perspective` on an ANCESTOR — see LpTilt, which supplies one).
- * Rotation eases to rest via CSS transition; the handlers only write the target
- * transform, so there's no rAF loop. SSR-safe (no window access at setup) and
- * collapses to a flat, no-tilt style when the OS prefers reduced motion.
+ * Rotation eases to rest via CSS transition. The pointer is not reactive
+ * state: once per animation frame (usePointerFrame, shared with LpMagnetic and
+ * the spotlight) its position is written to custom properties on the element,
+ * `--lp-tilt-x`/`--lp-tilt-y` from -1 to 1 for the lean and the spotlight's own
+ * `--lp-spot-x`/`--lp-spot-y` for the glare, and the style reads them. It
+ * re-renders on enter and leave, not on every move. SSR-safe (no window access
+ * at setup) and collapses to a flat, no-tilt style when the OS prefers reduced
+ * motion.
  */
 export interface UseTiltOptions {
   /** Max rotation toward the pointer, in degrees (per axis). Default 10. */
@@ -35,22 +42,33 @@ export interface UseTilt {
   active: Ref<boolean>
 }
 
+const TILT_VARS = ["--lp-tilt-x", "--lp-tilt-y", "--lp-spot-x", "--lp-spot-y"]
+
 export function useTilt(source: MaybeRefOrGetter<UseTiltOptions> = {}): UseTilt {
   const options = computed(() => toValue(source))
-  const reduceMotion = useReducedMotion()
+  const reduceMotion = usePrefersReducedMotion()
 
   const active = ref(false)
-  // Pointer position within the element, normalized to [-1, 1] from center.
-  const nx = ref(0)
-  const ny = ref(0)
+  // The element the handlers are bound to, learnt from the events themselves.
+  let target: HTMLElement | null = null
+
+  const pointer = usePointerFrame({
+    anyPointer: true,
+    paint: (x, y) => {
+      if (!target || !active.value) return
+      const r = target.getBoundingClientRect()
+      // Pointer position within the element, normalized to [-1, 1] from center.
+      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: PointerEvent): void {
-    if (reduceMotion.value) return
-    const el = e.currentTarget as HTMLElement | null
-    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(): void {
@@ -59,8 +77,8 @@ export function useTilt(source: MaybeRefOrGetter<UseTiltOptions> = {}): UseTilt
 
   function onPointerLeave(): void {
     active.value = false
-    nx.value = 0
-    ny.value = 0
+    pointer.cancel()
+    for (const name of TILT_VARS) target?.style.removeProperty(name)
   }
 
   const style = computed<CSSProperties>(() => {
@@ -71,12 +89,12 @@ export function useTilt(source: MaybeRefOrGetter<UseTiltOptions> = {}): UseTilt
     // horizontal one. Only tilt while active so it rests flat when the pointer
     // leaves (nx/ny are already zeroed on leave).
     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"
@@ -88,12 +106,11 @@ export function useTilt(source: MaybeRefOrGetter<UseTiltOptions> = {}): UseTilt
     if (!options.value.glare || reduceMotion.value || !active.value) {
       return { opacity: 0 }
     }
-    // Bright spot tracks the pointer; map [-1,1] → [0%,100%].
-    const px = (nx.value + 1) * 50
-    const py = (ny.value + 1) * 50
+    // Bright spot tracks the pointer, at the spotlight's own position
+    // properties, which the tilting element carries and the glare inherits.
     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/src/composables/useTween.ts

@@ -0,0 +1,149 @@
+import { onScopeDispose, shallowRef, toValue, watch, type MaybeRefOrGetter, type ShallowRef } from "vue"
+import { durationToken, prefersReducedMotion, tokenEase } from "./easing"
+
+/*
+ * A value that travels to its new state instead of jumping there.
+ *
+ * Charts draw from data, and data changes wholesale: a poll returns new numbers,
+ * a filter drops a category. Rendering straight from it redraws the shape on
+ * the next frame, and the reader sees a different picture rather than the same
+ * picture changing — which is the one thing a chart refreshing in place has to
+ * convey. No browser interpolates a path's `d` between two arbitrary shapes, so
+ * the DATA is what moves: this holds a displayed copy and steps it toward the
+ * source every frame, and the component draws from the copy.
+ *
+ * The caller supplies the mix, because only it knows what "halfway" means for
+ * its data — a pie matches slices by label and lets new ones open from nothing,
+ * a line resamples to a new point count. The mix is handed whatever is
+ * DISPLAYED as its starting point, not the previous target, so a change that
+ * lands mid-flight carries on from where the shape actually is instead of
+ * snapping back to restart.
+ *
+ * The first value is shown as is: arrival belongs to the component's own
+ * entrance (useReveal), and this only animates what comes after it.
+ */
+
+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 function useTween<T>(
+  source: () => T,
+  mix: (from: T, to: T, t: number) => T,
+  options: TweenOptions<T> = {},
+): Readonly<ShallowRef<T>> {
+  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: number) => {
+      // rAF stamps the frame's start, which can precede the watcher by a few ms.
+      const t = Math.min(1, Math.max(0, (now - started) / ms))
+      // The last frame is the target itself, not a mix that rounds near it, so
+      // whatever the mix carried for the journey (ghosts, resampled points)
+      // is gone once it lands.
+      shown.value = t < 1 ? mix(from, to, ease(t)) : to
+      frame = t < 1 ? requestAnimationFrame(step) : 0
+    }
+    frame = requestAnimationFrame(step)
+  })
+
+  onScopeDispose(stop)
+
+  return shown
+}
+
+export const lerp = (a: number, b: number, t: number): number => a + (b - a) * t
+
+/**
+ * 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 const mixColor = (from: string, to: string, t: number): string => {
+  if (from === to || t >= 1) return to
+  if (t <= 0) return from
+  return `color-mix(in oklab, ${from}, ${to} ${(t * 100).toFixed(1)}%)`
+}
+
+/**
+ * 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 const resample = (values: (number | null)[], count: number): (number | null)[] => {
+  const n = values.length
+  if (n === count) return values
+  if (!n) return new Array<number | null>(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)
+  })
+}
+
+/**
+ * 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 const mixValues = (
+  from: (number | null)[],
+  to: (number | null)[],
+  t: number,
+): (number | null)[] => {
+  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)
+  })
+}

package/src/composables/useView.ts

@@ -0,0 +1,93 @@
+import { computed, inject, provide, type ComputedRef, type InjectionKey } from "vue"
+
+/*
+ * Which window a component lives in. Almost always the page's own, but inside
+ * an LpFrame it is the frame's: a document of its own with its own width, so
+ * a breakpoint, an overlay and a click outside are all measured there.
+ * Everything in the kit that reaches for the screen (media queries, portals,
+ * the viewport size, page-wide listeners) asks here instead of the globals,
+ * and so stays inside the frame it was rendered in.
+ */
+export interface LpView {
+  window: Window
+  document: Document
+  /** Where overlays teleport to: the frame's body. */
+  portal: HTMLElement
+}
+
+const LP_VIEW: InjectionKey<ComputedRef<LpView | null>> = Symbol.for("lp-view")
+
+export function provideView(view: ComputedRef<LpView | null>): void {
+  provide(LP_VIEW, view)
+}
+
+/** The view the calling component renders in; the page itself outside any frame. */
+export function useView(): ComputedRef<LpView | null> {
+  return inject(
+    LP_VIEW,
+    computed(() => null),
+  )
+}
+
+/** The window to measure and listen on: the frame's inside one, the page's otherwise. */
+export function viewWindow(view: LpView | null | undefined): Window {
+  return view?.window ?? window
+}
+
+export function viewDocument(view: LpView | null | undefined): Document {
+  return view?.document ?? document
+}
+
+/** The `to` of a portal: the frame's body inside one, `body` otherwise. */
+export function usePortalTarget(): ComputedRef<HTMLElement | "body"> {
+  const view = useView()
+  return computed(() => view.value?.portal ?? "body")
+}
+
+/*
+ * reka's layers listen for "outside" presses, focus and Escape on the
+ * document that was current when they were set up, which inside an LpFrame
+ * is still the page's: a click on the page closed a menu open in the frame,
+ * while a click or Escape inside the frame never reached the layer at all.
+ * The frame forwards those events from its document to the page's, marked
+ * with where they came from, and every kit layer drops the ones from a
+ * document other than its own (useOutsideGuard).
+ */
+const ORIGIN = "lpViewDocument"
+type Marked = Event & { [ORIGIN]?: Document }
+
+const FORWARDED = ["pointerdown", "pointerup", "click", "focusin", "keydown"] as const
+
+export function forwardViewEvents(from: Document, to: Document): () => void {
+  const forward = (event: Event) => {
+    if (event.type === "keydown" && (event as KeyboardEvent).key !== "Escape") return
+    const Copy = event.constructor as new (type: string, init: Event) => Event
+    const copy = new Copy(event.type, event) as Marked
+    copy[ORIGIN] = from
+    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: Event): Document | null {
+  const detail = (event as CustomEvent<{ originalEvent?: Event }>).detail
+  const inner = detail && typeof detail === "object" && detail.originalEvent ? detail.originalEvent : event
+  const marked = (inner as Marked)[ORIGIN]
+  if (marked) return marked
+  const target = inner.target as Node | null
+  // Not `instanceof`: a node of the frame is another realm's Node.
+  if (!target || typeof target.nodeType !== "number") return null
+  return target.nodeType === 9 ? (target as Document) : target.ownerDocument
+}
+
+/** A layer's outside and Escape handler: ignores what happened in another document. */
+export function useOutsideGuard(): (event: Event) => void {
+  const view = useView()
+  return (event) => {
+    const origin = originOf(event)
+    if (origin && origin !== viewDocument(view.value)) event.preventDefault()
+  }
+}

package/src/index.css

@@ -14,6 +14,7 @@
  */
 @import "./tokens/tokens.css";
 @import "./tokens/utilities.css";
+@import "./tokens/effects.css";
 
 @source "./components";
 @source "./composables";

package/src/index.ts

@@ -307,7 +307,9 @@ export {
 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,
@@ -368,12 +370,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"
@@ -411,5 +421,137 @@ 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"
+
+// ── Status and data (group: status) ──
+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"
+
+// ── Processes (group: process) ──
+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"
+
+// ── Fields and text (group: fields) ──
+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"
+
+// ── Overlays and look (group: looks) ──
+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"
+
+// ── Text effects (group: text) ──
+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"
+
+// ── Layout and card effects (group: layout) ──
+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"