@leavepulse/ui 0.71.1 → 0.71.2

package/src/components/format.ts

@@ -78,14 +78,39 @@ const COMPACT_UNITS: readonly (readonly [number, string])[] = [
   [1e12, "T"],
 ]
 
+/*
+ * The unit word and the gap before it as the locale writes them: "тыс." with a
+ * no-break space in Russian, "K" glued on in English. Taken from Intl's compact
+ * notation rather than a table, so any locale reads its own.
+ */
+const compactSuffixes = new Map<string, string>()
+
+function compactSuffix(locale: string, step: number): string {
+  const key = `${locale}|${step}`
+  let found = compactSuffixes.get(key)
+  if (found === undefined) {
+    const parts = numberFormat(locale, { notation: "compact", compactDisplay: "short" }).formatToParts(COMPACT_UNITS[step][0])
+    const at = parts.findIndex((p) => p.type === "compact")
+    found = at < 0 ? COMPACT_UNITS[step][1] : (parts[at - 1]?.type === "literal" ? parts[at - 1].value : "") + parts[at].value
+    compactSuffixes.set(key, found)
+  }
+  return found
+}
+
 export interface CompactNumberOptions {
   /**
    * Writes the decimal separator the locale's way ("1,2k" in Russian). The
    * k/M/B/T suffixes stay: Intl's own compact notation changes the shape of
-   * the figure per locale ("1,2 тыс."), which a tick label or a rolling
-   * counter cannot absorb. Unset keeps a plain "." whatever the browser says.
+   * the figure per locale ("1,2 тыс."), which a tick label cannot absorb.
+   * Unset keeps a plain "." whatever the browser says.
    */
   locale?: string
+  /**
+   * With a locale, write the unit as that locale does: "11,9 тыс." in Russian.
+   * For a figure read on its own (a stat tile, a counter), where "11,9k" looks
+   * foreign; not for axis ticks, where the longer word crowds the axis.
+   */
+  words?: boolean
   /** Places for a figure below a thousand (12.25). Default 2. */
   plainDecimals?: number
   /** Places once a unit is in play (1.2k). Default 1. */
@@ -98,7 +123,8 @@ export interface CompactNumberOptions {
 }
 
 /**
- * A figure shortened with k/M/B/T: 1 200 → "1.2k", 3 400 000 → "3.4M".
+ * A figure shortened with k/M/B/T: 1 200 → "1.2k", 3 400 000 → "3.4M"; with
+ * `words` and a locale in that locale's own words, "1,2 тыс." in Russian.
  *
  * The unit is picked by what will PRINT, not by the raw size: 999 950 at one
  * place rounds to "1000k", which reads as the next unit up, so it becomes
@@ -106,7 +132,7 @@ export interface CompactNumberOptions {
  */
 export function compactNumber(value: number, options: CompactNumberOptions = {}): string {
   if (!Number.isFinite(value)) return String(value)
-  const { locale, plainDecimals = 2, decimals = 1, fixed = false } = options
+  const { locale, plainDecimals = 2, decimals = 1, fixed = false, words = false } = options
   const abs = Math.abs(value)
   let i = COMPACT_UNITS.length - 1
   while (i > 0 && abs < COMPACT_UNITS[i][0]) i--
@@ -132,7 +158,7 @@ export function compactNumber(value: number, options: CompactNumberOptions = {})
           maximumFractionDigits: places,
           useGrouping: false,
         }).format(scaled)
-  return `${number}${COMPACT_UNITS[i][1]}`
+  return `${number}${words && locale !== undefined && i > 0 ? compactSuffix(locale, i) : COMPACT_UNITS[i][1]}`
 }
 
 /**

package/src/composables/usePaletteCommands.ts

@@ -31,6 +31,9 @@ function numbered(entries: readonly PaletteRegistration[]): Command[] {
   for (const entry of entries) {
     for (const command of entry.commands()) {
       if (!entry.automatic) {
+        // Two mounts of one component (a header switcher and its phone twin)
+        // register the same command: it is one command, listed once.
+        if (manual.has(command.id)) continue
         manual.add(command.id)
         out.push(command)
         continue

package/src/composables/useReveal.ts

@@ -1,6 +1,5 @@
 import { onBeforeUnmount, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
 import { prefersReducedMotion } from "./easing"
-import { atScrollEnd } from "./scroll"
 
 /*
  * "Has this element actually been SEEN yet?"
@@ -60,7 +59,13 @@ export interface UseReveal {
 }
 
 export function useReveal(options: UseRevealOptions = {}): UseReveal {
-  const { threshold = 0.25, rootMargin = "0px 0px -10% 0px" } = options
+  /*
+   * No margin by default. Shrinking the viewport from below meant whatever sat
+   * in the bottom strip of the screen showed its starting state (a 0, an empty
+   * bar) while plainly on screen, which reads as "no data" rather than as an
+   * entrance yet to come; a quarter of the element in view is arrival enough.
+   */
+  const { threshold = 0.25, rootMargin = "0px" } = options
 
   const el = ref<Element | null>(null)
   // SSR has no viewport to intersect with, and no animation runs there either;
@@ -68,16 +73,10 @@ export function useReveal(options: UseRevealOptions = {}): UseReveal {
   const revealed = ref(typeof window === "undefined")
 
   let observer: IntersectionObserver | null = null
-  let edge: IntersectionObserver | null = null
-  let onScroll: (() => void) | null = null
 
   function stop() {
     observer?.disconnect()
     observer = null
-    edge?.disconnect()
-    edge = null
-    if (onScroll) window.removeEventListener("scroll", onScroll, true)
-    onScroll = null
   }
 
   function reveal() {
@@ -110,28 +109,6 @@ export function useReveal(options: UseRevealOptions = {}): UseReveal {
         { threshold, rootMargin },
       )
       observer.observe(node)
-
-      /*
-       * The margin shrinks the viewport from below, so the last element of a
-       * page sits in that strip for good: there is no more scroll to lift it
-       * out, and its count-up never started (a figure at the bottom of a
-       * dashboard stayed at 0). On screen with nowhere left to scroll is an
-       * arrival too.
-       */
-      let onScreen = false
-      const check = () => {
-        if (onScreen && atScrollEnd(node)) reveal()
-      }
-      edge = new IntersectionObserver(
-        (entries) => {
-          onScreen = entries.some((entry) => entry.isIntersecting)
-          check()
-        },
-        { threshold },
-      )
-      edge.observe(node)
-      onScroll = check
-      window.addEventListener("scroll", onScroll, { capture: true, passive: true })
     },
     { immediate: true, flush: "post" },
   )

package/src/index.ts

@@ -308,7 +308,7 @@ 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, withBrand } from "./theme/define"
-export { STUDIO_BRANDS, STUDIO_CORNERS, STUDIO_MOTION, STUDIO_SIZES, useThemeStudio } from "./theme/studio"
+export { STUDIO_BRANDS, STUDIO_CORNERS, STUDIO_MOTION, STUDIO_SIZES, STUDIO_SYSTEM, useThemeStudio } from "./theme/studio"
 export type { StudioState, ThemeStudio, ThemeStudioOptions } from "./theme/studio"
 export type { ThemeOverrides } from "./theme/define"
 export type {

package/src/theme/palette.ts

@@ -1,19 +1,21 @@
 import { defineAsyncComponent, defineComponent, h, toValue, type MaybeRefOrGetter } from "vue"
 import { usePaletteCommands, usePaletteScope, type PaletteScope } from "../composables/usePaletteCommands"
 import type { PreviewableThemeStudio, ThemeStudio } from "./studio"
+import type { ThemeStudioPart } from "../components/LpThemeStudio.vue"
 import { useLabels } from "../composables/useLpConfig"
 
 const Editor = defineAsyncComponent(() => import("../components/LpPaletteTheme.vue"))
 
 /** Registers the studio itself; no second list of theme options in the app. */
-export function usePaletteTheme(studio: MaybeRefOrGetter<ThemeStudio | undefined>, options: { id?: string; label?: string; scope?: PaletteScope } = {}) {
+/** `hide` leaves out the same studio rows the app hides in its own studio. */
+export function usePaletteTheme(studio: MaybeRefOrGetter<ThemeStudio | undefined>, options: { id?: string; label?: string; scope?: PaletteScope; hide?: ThemeStudioPart[] } = {}) {
   const scope = options.scope ?? usePaletteScope()
   const text = useLabels("paletteTheme", { title: "Theme" })
   const currentStudio = () => {
     const current = toValue(studio)
     return current && "preview" in current && typeof current.preview === "function" ? current as PreviewableThemeStudio : undefined
   }
-  const preview = defineComponent({ setup: () => () => currentStudio() ? h(Editor, { studio: currentStudio()! }) : null })
+  const preview = defineComponent({ setup: () => () => currentStudio() ? h(Editor, { studio: currentStudio()!, hide: options.hide }) : null })
   usePaletteCommands(() => {
     const current = currentStudio()
     if (!current) return []

package/dist/assets/LpTabs-CO3EcsNV.css

@@ -1,18 +0,0 @@
-
-.lp-tab-badge-enter-active[data-v-2c920d5a],
-.lp-tab-badge-leave-active[data-v-2c920d5a] {
-  transition:
-    opacity var(--duration-fast) var(--ease-emphasized),
-    transform var(--duration-fast) var(--ease-emphasized);
-}
-.lp-tab-badge-enter-from[data-v-2c920d5a],
-.lp-tab-badge-leave-to[data-v-2c920d5a] {
-  opacity: 0;
-  transform: scale(0.6);
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-tab-badge-enter-active[data-v-2c920d5a],
-  .lp-tab-badge-leave-active[data-v-2c920d5a] {
-    transition: none;
-}
-}