@leavepulse/ui 0.54.0 → 0.55.0

package/README.md

@@ -61,7 +61,9 @@ useTheme().setSystem({ light, dark }) // follow the OS colour scheme
 ```
 
 `LpThemeProvider` applies a theme to one subtree only (a dark sidebar in a light
-app, a live preview).
+app, a live preview). With `transition`, changing its `theme` reveals the new one
+with the same circular transition as the page switch, from where the user last
+pressed. `revealTransition(update, origin)` runs any repaint behind that reveal.
 
 ### App-wide configuration
 

package/dist/chunks/LpThemeProvider-CQ2jC9TA.js

@@ -0,0 +1,69 @@
+import { defineComponent, ref, shallowRef, computed, watch, nextTick, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { t as themeEntries, r as revealTransition } from "./useTheme-2qHG8NEU.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const PRESS_FRESH_MS = 1500;
+let lastPress = null;
+if (typeof window !== "undefined") {
+  window.addEventListener(
+    "pointerdown",
+    (event) => lastPress = { x: event.clientX, y: event.clientY, at: performance.now() },
+    { capture: true, passive: true }
+  );
+}
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpThemeProvider",
+  props: {
+    theme: {},
+    as: { default: "div" },
+    transition: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink");
+    const root = ref(null);
+    const shown = shallowRef(props.theme);
+    const style = computed(() => ({
+      ...Object.fromEntries(themeEntries(shown.value)),
+      colorScheme: shown.value.mode
+    }));
+    function originOf() {
+      if (lastPress && performance.now() - lastPress.at < PRESS_FRESH_MS) return lastPress;
+      const value = root.value;
+      const el = value instanceof HTMLElement ? value : value?.$el;
+      const box = el?.getBoundingClientRect?.();
+      return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : void 0;
+    }
+    watch(
+      () => props.theme,
+      (next) => {
+        if (!props.transition) {
+          shown.value = next;
+          return;
+        }
+        revealTransition(async () => {
+          shown.value = next;
+          await nextTick();
+        }, originOf());
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "root",
+        ref: root,
+        style: style.value,
+        "data-theme-mode": shown.value.mode,
+        class: unref(rootClass)
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["style", "data-theme-mode", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpThemeSwitcher-CPmhYOjX.js → LpThemeSwitcher-Fz85BCRS.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, onMounted, ref, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, toDisplayString, createCommentVNode } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { u as useTheme, p as presets } from "./useTheme-DJm1JSsY.js";
+import { u as useTheme, p as presets } from "./useTheme-2qHG8NEU.js";
 import { _ as _sfc_main$1 } from "./LpContextMenu-EF_90u3g.js";
 import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = ["aria-label", "title"];

package/dist/chunks/{useTheme-DJm1JSsY.js → useTheme-2qHG8NEU.js}

@@ -439,10 +439,10 @@ function applyTheme(theme, root = document.documentElement) {
   root.style.colorScheme = theme.mode;
   detectBackdropFilter(root);
 }
-function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
+function revealTransition(update, origin, durationMs = 480) {
   const doc = document;
   if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
-    applyTheme(theme, root);
+    void update();
     return;
   }
   const x = origin?.x ?? window.innerWidth / 2;
@@ -451,9 +451,9 @@ function applyThemeWithTransition(theme, origin, root = document.documentElement
     Math.max(x, window.innerWidth - x),
     Math.max(y, window.innerHeight - y)
   );
-  const transition = doc.startViewTransition(() => applyTheme(theme, root));
+  const transition = doc.startViewTransition(update);
   transition.ready.then(() => {
-    root.animate(
+    document.documentElement.animate(
       {
         clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`]
       },
@@ -471,6 +471,9 @@ function applyThemeWithTransition(theme, origin, root = document.documentElement
     );
   });
 }
+function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
+  revealTransition(() => applyTheme(theme, root), origin, durationMs);
+}
 function serializeTheme(theme) {
   return JSON.stringify(theme);
 }
@@ -614,14 +617,15 @@ export {
   light as l,
   prefersDarkScheme as m,
   nord as n,
-  setGlassBackdrop as o,
+  rose as o,
   presets as p,
-  themeFromCookie as q,
-  rose as r,
+  setGlassBackdrop as q,
+  revealTransition as r,
   serializeTheme as s,
   themeEntries as t,
   useTheme as u,
-  themeToCssRule as v,
-  themeToCssVars as w,
-  violet as x
+  themeFromCookie as v,
+  themeToCssRule as w,
+  themeToCssVars as x,
+  violet as y
 };

package/dist/components/LpThemeProvider.vue.d.ts

@@ -6,12 +6,17 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     theme: TokenSet;
     /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
     as?: string | Component;
+    /** Reveal a change of `theme` with the circular transition. */
+    transition?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     theme: TokenSet;
     /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
     as?: string | Component;
+    /** Reveal a change of `theme` with the circular transition. */
+    transition?: boolean;
 }> & Readonly<{}>, {
     as: string | Component;
+    transition: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/components/LpThemeProvider.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeProvider-Be4r2TQX.js";
+import { _ as _sfc_main } from "../chunks/LpThemeProvider-CQ2jC9TA.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-CPmhYOjX.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-Fz85BCRS.js";
 export {
   _sfc_main as default
 };

package/dist/index.d.ts

@@ -168,7 +168,7 @@ export { blockTitle, defineBlocks } from "./layout/registry";
 export type { BlockDef, BlockRegistry } from "./layout/registry";
 export { useLayout } from "./layout/useLayout";
 export type { UseLayout, UseLayoutOptions } from "./layout/useLayout";
-export { applyTheme, applyThemeWithTransition, bootstrapTheme, parseTheme, serializeTheme, THEME_COOKIE, themeFromCookie, themeToCssRule, themeToCssVars, useTheme, } from "./theme/useTheme";
+export { applyTheme, applyThemeWithTransition, revealTransition, bootstrapTheme, parseTheme, serializeTheme, THEME_COOKIE, themeFromCookie, themeToCssRule, themeToCssVars, useTheme, } from "./theme/useTheme";
 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";

package/dist/index.js

@@ -100,7 +100,7 @@ import { _ as _71 } from "./chunks/LpTabs-BMSBB78h.js";
 import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _74 } from "./chunks/LpThemeSwitcher-CPmhYOjX.js";
+import { _ as _74 } from "./chunks/LpThemeSwitcher-Fz85BCRS.js";
 import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _76 } from "./chunks/LpToaster-DTtWuKvq.js";
 import { _ as _77 } from "./chunks/LpTooltip-CXVKcOXT.js";
@@ -111,8 +111,8 @@ import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
-import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/useTheme-DJm1JSsY.js";
-import { D, G, N, T, b as b2, c as c2, d, e, f, g, h, i as i2, l, j, n, k, m, r, o, t, q, v, w, u, x } from "./chunks/useTheme-DJm1JSsY.js";
+import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/useTheme-2qHG8NEU.js";
+import { D, G, N, T, b as b2, c as c2, d, e, f, g, h, i as i2, l, j, n, k, m, r, o, q, t, v, w, x, u, y } from "./chunks/useTheme-2qHG8NEU.js";
 import { useClipboard } from "./composables/useClipboard.js";
 import { activeShortcuts, appleModifierLabel, findHotkeyConflicts, hotkeyConflicts, hotkeySteps, isAppleKeyboard, matchesHotkey, mergeShortcutGroups, pendingHotkey, sequenceProgress, useAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth.js";
@@ -137,7 +137,7 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _81 } from "./chunks/LpThemeProvider-Be4r2TQX.js";
+import { _ as _81 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -399,10 +399,11 @@ export {
   resolveCssColor,
   resolveLink,
   resolveSlices,
+  r as revealTransition,
   rgbToHex,
   rgbToHsv,
   ringWindow,
-  r as rose,
+  o as rose,
   sameRange,
   seamProgress,
   seamReached,
@@ -411,7 +412,7 @@ export {
   serializeLayout,
   serializeTheme,
   setActiveTab,
-  o as setGlassBackdrop,
+  q as setGlassBackdrop,
   sortNodes,
   splitTags,
   stepMatch,
@@ -420,9 +421,9 @@ export {
   subtreeSize,
   svgToPng,
   t as themeEntries,
-  q as themeFromCookie,
-  v as themeToCssRule,
-  w as themeToCssVars,
+  v as themeFromCookie,
+  w as themeToCssRule,
+  x as themeToCssVars,
   tileUrl,
   toCsv,
   toRecentItem,
@@ -459,5 +460,5 @@ export {
   useTilt,
   useToast,
   useZoomPan,
-  x as violet
+  y as violet
 };

package/dist/theme/useTheme.d.ts

@@ -15,6 +15,7 @@ export interface RevealOrigin {
     x: number;
     y: number;
 }
+export declare function revealTransition(update: () => void | Promise<void>, origin?: RevealOrigin, durationMs?: number): void;
 export declare function applyThemeWithTransition(theme: TokenSet, origin?: RevealOrigin, root?: HTMLElement, durationMs?: number): void;
 export declare function serializeTheme(theme: TokenSet): string;
 export declare function themeToCssVars(theme: TokenSet): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpThemeProvider.vue

@@ -1,4 +1,16 @@
 <script lang="ts">
+// The last press anywhere on the page: a theme change triggered by a toggle
+// reveals from the toggle the user just pressed.
+const PRESS_FRESH_MS = 1500
+let lastPress: { x: number; y: number; at: number } | null = null
+if (typeof window !== "undefined") {
+  window.addEventListener(
+    "pointerdown",
+    (event) => (lastPress = { x: event.clientX, y: event.clientY, at: performance.now() }),
+    { capture: true, passive: true },
+  )
+}
+
 export default { inheritAttrs: false }
 </script>
 
@@ -9,10 +21,14 @@ export default { inheritAttrs: false }
  * keeps its own look. Every token is declared on this element, derived ones
  * included, so kit components inside re-skin while the page around them keeps
  * the global theme. Nothing is persisted; this is presentation only.
+ *
+ * With `transition`, a change of `theme` repaints the subtree behind the same
+ * circular reveal the global theme switch uses, growing from where the user
+ * last pressed, or from the subtree's centre.
  */
-import { computed, type Component } from "vue"
+import { computed, nextTick, ref, shallowRef, watch, type Component, type ComponentPublicInstance } from "vue"
 import type { TokenSet } from "../theme/tokens"
-import { themeEntries } from "../theme/useTheme"
+import { revealTransition, themeEntries, type RevealOrigin } from "../theme/useTheme"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -20,22 +36,49 @@ const props = withDefaults(
     theme: TokenSet
     /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
     as?: string | Component
+    /** Reveal a change of `theme` with the circular transition. */
+    transition?: boolean
   }>(),
-  { as: "div" },
+  { as: "div", transition: false },
 )
 
 // Paints its own surface and text so the scoped theme reads as one; a class
 // like `bg-transparent` overrides that.
 const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink")
 
+const root = ref<HTMLElement | ComponentPublicInstance | null>(null)
+const shown = shallowRef(props.theme)
+
 const style = computed(() => ({
-  ...Object.fromEntries(themeEntries(props.theme)),
-  colorScheme: props.theme.mode,
+  ...Object.fromEntries(themeEntries(shown.value)),
+  colorScheme: shown.value.mode,
 }))
+
+function originOf(): RevealOrigin | undefined {
+  if (lastPress && performance.now() - lastPress.at < PRESS_FRESH_MS) return lastPress
+  const value = root.value
+  const el = value instanceof HTMLElement ? value : (value?.$el as Element | undefined)
+  const box = el?.getBoundingClientRect?.()
+  return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : undefined
+}
+
+watch(
+  () => props.theme,
+  (next) => {
+    if (!props.transition) {
+      shown.value = next
+      return
+    }
+    revealTransition(async () => {
+      shown.value = next
+      await nextTick()
+    }, originOf())
+  },
+)
 </script>
 
 <template>
-  <component :is="as" :style="style" :data-theme-mode="theme.mode" :class="rootClass" v-bind="rest">
+  <component :is="as" ref="root" :style="style" :data-theme-mode="shown.mode" :class="rootClass" v-bind="rest">
     <slot />
   </component>
 </template>

package/src/index.ts

@@ -245,6 +245,7 @@ export type { UseLayout, UseLayoutOptions } from "./layout/useLayout"
 export {
   applyTheme,
   applyThemeWithTransition,
+  revealTransition,
   bootstrapTheme,
   parseTheme,
   serializeTheme,

package/src/theme/useTheme.ts

@@ -167,30 +167,28 @@ export interface RevealOrigin {
 }
 
 type ViewTransitionDocument = Document & {
-  startViewTransition?: (cb: () => void) => { ready: Promise<void>; finished: Promise<void> }
+  startViewTransition?: (cb: () => void | Promise<void>) => { ready: Promise<void>; finished: Promise<void> }
 }
 
 /*
- * Apply a theme with the "circular reveal" transition — a clip-path circle
- * grows from `origin` (usually the toggle button's centre), repainting the page
- * underneath. Uses the View Transitions API; falls back to a plain applyTheme
- * when it's unsupported or the user prefers reduced motion (so behaviour is
- * identical, just without the animation). The actual token write still happens
- * through applyTheme, so this stays a thin wrapper — no duplicated var logic.
+ * Run `update` behind a "circular reveal": a clip-path circle grows from
+ * `origin` (viewport px, the centre when omitted) and shows the repainted page
+ * underneath. Only what `update` changed looks different, so repainting one
+ * subtree reveals just that subtree. Uses the View Transitions API and falls
+ * back to a plain update when it's unsupported or the user prefers reduced
+ * motion. `update` may be async (a framework flush); the snapshot waits for it.
  */
-export function applyThemeWithTransition(
-  theme: TokenSet,
+export function revealTransition(
+  update: () => void | Promise<void>,
   origin?: RevealOrigin,
-  root: HTMLElement = document.documentElement,
   durationMs = 480,
 ): void {
   const doc = document as ViewTransitionDocument
   if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
-    applyTheme(theme, root)
+    void update()
     return
   }
 
-  // Centre of the viewport is the default origin if no click point is given.
   const x = origin?.x ?? window.innerWidth / 2
   const y = origin?.y ?? window.innerHeight / 2
   // Radius that reaches the farthest viewport corner from the origin.
@@ -199,13 +197,15 @@ export function applyThemeWithTransition(
     Math.max(y, window.innerHeight - y),
   )
 
-  const transition = doc.startViewTransition(() => applyTheme(theme, root))
+  const transition = doc.startViewTransition(update)
   transition.ready.then(() => {
     // Animate the OLD snapshot shrinking to a point, revealing the (already
     // repainted) live page underneath through the growing hole. Clipping the
     // old layer — not growing the new one — avoids a one-frame flash of the new
     // theme before the circle starts, which read as the theme "changing twice".
-    root.animate(
+    // The pseudo-elements belong to the document element whatever was updated,
+    // so the animation always targets it.
+    document.documentElement.animate(
       {
         clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`],
       },
@@ -224,6 +224,20 @@ export function applyThemeWithTransition(
   })
 }
 
+/*
+ * Apply a theme with the circular reveal, usually from the toggle button's
+ * centre. `root` scopes the theme to a subtree; the reveal still runs on the
+ * document, since that is where the transition snapshots live.
+ */
+export function applyThemeWithTransition(
+  theme: TokenSet,
+  origin?: RevealOrigin,
+  root: HTMLElement = document.documentElement,
+  durationMs = 480,
+): void {
+  revealTransition(() => applyTheme(theme, root), origin, durationMs)
+}
+
 export function serializeTheme(theme: TokenSet): string {
   return JSON.stringify(theme)
 }

package/dist/chunks/LpThemeProvider-Be4r2TQX.js

@@ -1,35 +0,0 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
-import { t as themeEntries } from "./useTheme-DJm1JSsY.js";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpThemeProvider",
-  props: {
-    theme: {},
-    as: { default: "div" }
-  },
-  setup(__props) {
-    const props = __props;
-    const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink");
-    const style = computed(() => ({
-      ...Object.fromEntries(themeEntries(props.theme)),
-      colorScheme: props.theme.mode
-    }));
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
-        style: style.value,
-        "data-theme-mode": __props.theme.mode,
-        class: unref(rootClass)
-      }, unref(rest)), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16, ["style", "data-theme-mode", "class"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};