@leavepulse/ui 0.69.0 → 0.70.1

package/dist/theme/define.d.ts

@@ -10,3 +10,15 @@ export interface ThemeOverrides {
     surface?: Partial<SurfaceTokens>;
 }
 export declare function defineTheme(base: TokenSet | keyof typeof presets, overrides?: ThemeOverrides): TokenSet;
+/**
+ * A theme with one brand colour swapped in, and everything that follows from it
+ * derived to match: the hover shade, the soft fill behind badges and selections,
+ * the focus ring, and the text on a brand button where the theme's own no
+ * longer reads. Lets an app offer "pick your colour" without the
+ * person picking five shades that agree with each other.
+ *
+ *   applyTheme(withBrand(presets.dark, "#ff5ca8"))
+ *
+ * A colour it cannot read leaves the theme as it was.
+ */
+export declare function withBrand(base: TokenSet | keyof typeof presets, color: string): TokenSet;

package/dist/theme/studio.d.ts

@@ -0,0 +1,90 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { TokenSet } from "./tokens";
+import { type RevealOrigin } from "./useTheme";
+export declare const STUDIO_BRANDS: string[];
+export declare const STUDIO_CORNERS: {
+    readonly sharp: {
+        readonly radiusControl: 3;
+        readonly radiusCard: 6;
+    };
+    readonly default: {};
+    readonly round: {
+        readonly radiusControl: 12;
+        readonly radiusCard: 22;
+    };
+};
+export declare const STUDIO_SIZES: {
+    readonly compact: {
+        readonly controlSm: 28;
+        readonly controlMd: 34;
+        readonly controlLg: 40;
+    };
+    readonly default: {};
+    readonly comfortable: {
+        readonly controlSm: 36;
+        readonly controlMd: 42;
+        readonly controlLg: 48;
+    };
+};
+export declare const STUDIO_MOTION: {
+    readonly fast: 0.6;
+    readonly normal: 1;
+    readonly slow: 1.8;
+};
+/** The `theme` of a studio that follows the OS between its `system` pair. */
+export declare const STUDIO_SYSTEM = "system";
+export interface StudioState {
+    /** Name of the base theme in the offered list, or STUDIO_SYSTEM. */
+    theme: string;
+    /** Brand colour over the theme's own; null keeps the theme's. */
+    brand: string | null;
+    corners: keyof typeof STUDIO_CORNERS;
+    size: keyof typeof STUDIO_SIZES;
+    motion: keyof typeof STUDIO_MOTION;
+}
+export interface ThemeStudioOptions {
+    /** Base themes to offer. Defaults to the kit's presets. */
+    themes?: TokenSet[];
+    /** Where the tuning is remembered. One state per key is shared by every caller. */
+    storageKey?: string;
+    /**
+     * Offer "System": the base theme follows the OS colour scheme between these
+     * two (names from `themes`), with the tuning kept on top of either.
+     */
+    system?: {
+        light: string;
+        dark: string;
+    };
+}
+export interface ThemeStudio {
+    state: Ref<StudioState>;
+    themes: ComputedRef<TokenSet[]>;
+    /** The light/dark pair "System" follows, when offered. */
+    system: ComputedRef<{
+        light: TokenSet;
+        dark: TokenSet;
+    } | null>;
+    /** The tuned theme as it is applied. */
+    theme: ComputedRef<TokenSet>;
+    /** The brand in effect: the picked one, else the base theme's. */
+    brand: Ref<string>;
+    /** Anything differs from the defaults. */
+    changed: ComputedRef<boolean>;
+    /** The tuned theme as an app takes it: code that builds it, the stored JSON, a CSS rule. */
+    exported: ComputedRef<{
+        code: string;
+        json: string;
+        css: string;
+    }>;
+    /** Another base theme, revealed from `origin`; brand, corners and size stay. */
+    pickTheme(name: string, origin?: RevealOrigin): void;
+    /** Change the tuning (not the base theme): applied at once, so a drag follows. */
+    tune(patch: Partial<Omit<StudioState, "theme">>): void;
+    reset(origin?: RevealOrigin): void;
+}
+/**
+ * The studio state for `storageKey`, made on first use and shared after. A
+ * later caller's `themes` or `system` fill in what the first one left out:
+ * the page may make the studio before the switcher that offers "System".
+ */
+export declare function useThemeStudio(options?: ThemeStudioOptions): ThemeStudio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.69.0",
+  "version": "0.70.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -59,11 +59,13 @@
     "prepublishOnly": "npm run build",
     "typecheck": "vue-tsc --noEmit",
     "test": "bun test",
+    "test:browser": "playwright test",
     "release": "npm version patch -m \"chore: release v%s\" && git push --follow-tags",
     "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
     "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags",
     "check:pack": "node scripts/check-pack.mjs",
-    "gen:icons": "node scripts/gen-kit-icons.mjs"
+    "gen:icons": "node scripts/gen-kit-icons.mjs",
+    "gen:meta": "node scripts/gen-preview-meta.mjs"
   },
   "peerDependencies": {
     "@iconify-json/lucide": "^1.2.0",
@@ -84,9 +86,11 @@
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.112",
     "@iconify/vue": "^5.0.1",
+    "@playwright/test": "^1.64.1",
     "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^26.2.0",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/compiler-dom": "3.5.31",
     "motion-v": "^2.2.1",
     "reka-ui": "^2.9.10",
     "shiki": "^4.2.0",
@@ -96,6 +100,7 @@
     "vite": "^7.0.0",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue": "3.5.31",
+    "vue-component-meta": "3.3.5",
     "vue-tsc": "^3.0.0"
   },
   "dependencies": {
@@ -104,6 +109,7 @@
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
     "libphonenumber-js": "^1.12.0",
+    "tailwind-merge": "^3.6.0",
     "vaul-vue": "^0.4.1"
   }
 }

package/src/component-names.ts

@@ -4,6 +4,7 @@
 export const COMPONENT_NAMES = [
   "LayoutCanvas",
   "LpActionBar",
+  "LpActivityLine",
   "LpAddressInput",
   "LpAlert",
   "LpAppShell",
@@ -17,34 +18,49 @@ export const COMPONENT_NAMES = [
   "LpChart",
   "LpCheckbox",
   "LpCodeBlock",
+  "LpCodeDisplay",
+  "LpCollapse",
   "LpColorPicker",
   "LpCommandPalette",
   "LpConfirmDialog",
   "LpConfirmHost",
   "LpContextMenu",
+  "LpCopyButton",
+  "LpCountdown",
+  "LpDataList",
   "LpDatePicker",
   "LpDateRangePicker",
   "LpDisclosure",
   "LpDivider",
+  "LpDock",
   "LpDrawer",
   "LpDropdownMenu",
   "LpDropzone",
+  "LpEditable",
   "LpEmptyState",
   "LpFieldNotice",
   "LpFileTree",
   "LpFormField",
+  "LpFrame",
+  "LpGauge",
+  "LpGlowBorder",
   "LpHintExample",
   "LpHintLayer",
   "LpHints",
+  "LpHoverCard",
   "LpIcon",
+  "LpIdenticon",
   "LpImageEditor",
   "LpInfraNode",
   "LpInput",
   "LpKeys",
   "LpLightbox",
   "LpLink",
+  "LpLoader",
   "LpLogViewer",
+  "LpMagnetic",
   "LpMapPicker",
+  "LpMasonry",
   "LpMediaGallery",
   "LpModal",
   "LpModalNav",
@@ -61,25 +77,37 @@ export const COMPONENT_NAMES = [
   "LpPasswordInput",
   "LpPhoneInput",
   "LpPie",
+  "LpPipeline",
   "LpPopover",
   "LpProgress",
+  "LpQuota",
   "LpRadio",
   "LpRadioGroup",
   "LpRangeCalendar",
   "LpRangeSlider",
+  "LpRelativeTime",
+  "LpRepeater",
+  "LpRevealOnScroll",
   "LpRollingText",
+  "LpScramble",
   "LpScrollArea",
+  "LpSecretField",
   "LpSection",
   "LpSegmented",
   "LpSelect",
   "LpServiceNode",
+  "LpShaderBackdrop",
   "LpShift",
+  "LpShinyText",
   "LpShortcutsDialog",
   "LpSidebar",
   "LpSkeleton",
   "LpSlider",
   "LpSparkline",
+  "LpSpotlight",
   "LpStat",
+  "LpStatus",
+  "LpStepMark",
   "LpStepper",
   "LpSwap",
   "LpSwitch",
@@ -87,8 +115,11 @@ export const COMPONENT_NAMES = [
   "LpTableOfContents",
   "LpTabs",
   "LpTagsInput",
+  "LpTextReveal",
   "LpTextarea",
   "LpThemeProvider",
+  "LpThemeStudio",
+  "LpThemeStudioSection",
   "LpThemeSwitcher",
   "LpTilt",
   "LpTimeField",
@@ -97,6 +128,8 @@ export const COMPONENT_NAMES = [
   "LpTooltipProvider",
   "LpTopologyCanvas",
   "LpTour",
+  "LpTruncate",
+  "LpTypewriter",
   "LpUptimeBar",
   "LpVideoBackdrop"
 ] as const

package/src/components/AttentionDot.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+// The caller's `class` is merged into the dot's own rather than appended.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * The small dot on a tab or a segment that says "something behind this wants
+ * a look". Internal: LpTabs and LpSegmented both draw it, on the icon's corner
+ * when there is an icon to sit on, otherwise after the label. Decorative; the
+ * thing it marks says why in its own words.
+ */
+import { useMergedAttrs } from "../composables/useMergedClass"
+
+const props = defineProps<{
+  /** On the corner of the icon it rides on (the icon's box is `relative`), rather than after the label. */
+  corner?: boolean
+}>()
+
+const { class: dotClass, attrs: rest } = useMergedAttrs(() =>
+  `rounded-full bg-accent ${props.corner ? "absolute -right-1 -top-0.5 size-2" : "relative z-10 size-1.5 self-start"}`,
+)
+</script>
+
+<template>
+  <span aria-hidden="true" :class="dotClass" v-bind="rest" />
+</template>

package/src/components/ContextMenuItems.vue

@@ -28,6 +28,7 @@ import {
   DropdownMenuSubTrigger,
 } from "reka-ui"
 import { computed } from "vue"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import MenuShortcut from "./MenuShortcut.vue"
@@ -66,6 +67,8 @@ const PRIMITIVES = {
 } as const
 
 const P = computed(() => PRIMITIVES[props.kind])
+const portalTo = usePortalTarget()
+const guardOutside = useOutsideGuard()
 
 const ITEM =
   "group/item flex cursor-pointer select-none items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
@@ -89,8 +92,8 @@ const ICON =
         </span>
         <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
       </component>
-      <component :is="P.Portal">
-        <component :is="P.SubContent" :collision-padding="8" :class="panel" :side-offset="2" :align-offset="-4">
+      <component :is="P.Portal" :to="portalTo">
+        <component :is="P.SubContent" @interact-outside="guardOutside" @focus-outside="guardOutside" @escape-key-down="guardOutside" :collision-padding="8" :class="panel" :side-offset="2" :align-offset="-4">
           <ContextMenuItems :items="item.children" :panel="panel" :kind="kind" />
         </component>
       </component>

package/src/components/FieldWrapper.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue"
+import type { FieldNoticeOptions } from "../composables/useFieldNotice"
+import LpFormField from "./LpFormField.vue"
+
+defineOptions({ inheritAttrs: false })
+defineProps<{
+  wrapped: boolean
+  id?: string
+  label?: string
+  hint?: string
+  error?: string
+  required?: boolean
+}>()
+
+const attrs = useAttrs()
+const field = ref<InstanceType<typeof LpFormField> | null>(null)
+defineExpose({
+  notify: (text: string, options?: FieldNoticeOptions) => field.value?.notify?.(text, options),
+  clearNotice: () => field.value?.clearNotice?.(),
+})
+</script>
+
+<template>
+  <component
+    :is="wrapped ? LpFormField : 'div'"
+    ref="field"
+    :id="wrapped ? id : undefined"
+    :label="wrapped ? label : undefined"
+    :hint="wrapped ? hint : undefined"
+    :error="wrapped ? error : undefined"
+    :required="wrapped ? required : undefined"
+    :class="wrapped ? attrs.class : 'contents'"
+    :style="wrapped ? attrs.style : undefined"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/LayoutNode.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import { Motion, useReducedMotion } from "motion-v"
+import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, ref } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
 import type { LayoutNode, Leaf, Side, Split } from "../layout/tree"
 import type { BlockRegistry } from "../layout/registry"
 import { blockTitle } from "../layout/registry"
 import LpIcon from "./LpIcon.vue"
 
-// Same spring as LpTabs' panel height; instant under reduced motion, which
-// motion-v does not apply on its own.
-const reduceMotion = useReducedMotion()
-const layoutTransition = computed(() =>
-  reduceMotion.value
-    ? { duration: 0 }
-    : { type: "spring" as const, stiffness: 520, damping: 42, mass: 0.9 },
-)
+// The kit's layout spring, the same as LpTabs' panel height; instant under
+// reduced motion, which motion-v does not apply on its own.
+const layoutTransition = usePillTransition("layout")
 
 const props = defineProps<{
   node: LayoutNode

package/src/components/LegendSwatch.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/*
+ * A series' colour in a chart legend: a dot that swells while its legend
+ * entry (the nearest `group`) is hovered. Internal; LpChart and LpPie draw
+ * their legends with it so the two keep reading as one family.
+ */
+defineProps<{ color: string }>()
+</script>
+
+<template>
+  <span
+    class="size-2 shrink-0 rounded-full transition-transform duration-fast group-hover:scale-125"
+    :style="{ backgroundColor: color }"
+  />
+</template>

package/src/components/LoaderMark.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/*
+ * The drawing inside LpLoader: one of the three indicators plus its text.
+ * Internal — it exists so LpLoader can show the same mark on its own and as a
+ * placeholder swapped with content without writing it out twice. Its root
+ * takes the class and attributes LpLoader merged for it.
+ */
+import type { LoaderSize, LoaderVariant } from "./LpLoader.vue"
+
+defineProps<{
+  variant: LoaderVariant
+  size: LoaderSize
+  track: boolean
+  label?: string
+  /** What a screen reader hears when there is no visible label. */
+  spoken: string
+}>()
+
+const SPINNER = { inline: "size-[1em]", sm: "size-3.5", md: "size-5", lg: "size-8" }
+const DOT = { inline: "size-[0.25em]", sm: "size-1.5", md: "size-2", lg: "size-2.5" }
+const BAR = { inline: "h-[0.2em]", sm: "h-0.5", md: "h-[3px]", lg: "h-1" }
+</script>
+
+<template>
+  <span role="status">
+    <template v-if="variant === 'bar'">
+      <span v-if="label" class="text-xs text-muted">{{ label }}</span>
+      <span class="lp-loader-bar relative block w-full overflow-hidden rounded-pill bg-current/15" :class="BAR[size]" aria-hidden="true">
+        <span class="lp-sweep absolute inset-y-0 left-0 w-2/5 rounded-pill bg-current" />
+      </span>
+    </template>
+    <template v-else>
+      <svg v-if="variant === 'spinner'" viewBox="0 0 24 24" fill="none" class="lp-loader-spin shrink-0" :class="SPINNER[size]" aria-hidden="true">
+        <circle v-if="track" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" opacity="0.2" />
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+      <span v-else class="inline-flex shrink-0 items-center gap-[0.3em]" aria-hidden="true">
+        <span
+          v-for="i in 3"
+          :key="i"
+          class="lp-loader-dot rounded-full bg-current"
+          :class="DOT[size]"
+          :style="{ animationDelay: `${(i - 1) * 160}ms` }"
+        />
+      </span>
+      <span v-if="label" class="text-sm text-muted">{{ label }}</span>
+    </template>
+    <span v-if="!label" class="sr-only">{{ spoken }}</span>
+  </span>
+</template>
+
+<style>
+/*
+ * Unscoped, namespaced under lp-loader: the keyframes are named in the
+ * elements' own `animation`, which a scoped stylesheet would rename.
+ */
+.lp-loader-spin {
+  animation: lp-loader-spin 0.8s linear infinite;
+}
+@keyframes lp-loader-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Each dot swells and brightens in turn: a wave that reads as "still going". */
+.lp-loader-dot {
+  animation: lp-loader-dot 0.96s var(--ease-emphasized, ease-in-out) infinite both;
+}
+@keyframes lp-loader-dot {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* The bar's run is the kit's sweep (.lp-sweep in tokens.css), the same one
+   LpActivityLine draws: it enters past one edge and leaves past the other,
+   so the bar never sits still and never looks full. */
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-loader-spin,
+  .lp-loader-dot,
+  .lp-loader-bar {
+    animation: lp-loader-breathe 1.6s ease-in-out infinite;
+    transform: none;
+  }
+  .lp-loader-dot { opacity: 1; }
+  @keyframes lp-loader-breathe {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+}
+</style>

package/src/components/LpActionBar.vue

@@ -20,12 +20,15 @@
  * name rather than `alertdialog` — it is a landmark you can Tab into, not a
  * thing demanding an answer before anything else can happen.
  */
-import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import { useBarStack } from "./actionBar"
 import { CLOSE_ICON } from "./dropdown"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
+import { usePortalTarget } from "../composables/useView"
+import { useResizeObserver } from "../composables/useResizeObserver"
 
 export interface ActionBarAction {
   label: string
@@ -170,8 +173,6 @@ const stackOffset = computed(() => {
  * rotation, or content swapped while the bar is up, changes it, and the bars
  * above would overlap this one.
  */
-let observer: ResizeObserver | null = null
-
 watch(
   () => props.open,
   (isOpen) => {
@@ -187,17 +188,10 @@ watch(
   { immediate: true },
 )
 
-watch(root, (el) => {
-  observer?.disconnect()
-  observer = null
-  if (!el) return
-  setHeight(el.getBoundingClientRect().height)
-  if (typeof ResizeObserver === "undefined") return
-  observer = new ResizeObserver(() => setHeight(el.getBoundingClientRect().height))
-  observer.observe(el)
-})
+useResizeObserver(root, (_, el) => setHeight(el.getBoundingClientRect().height), { immediate: true })
 
-onBeforeUnmount(() => observer?.disconnect())
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
 </script>
 
 <template>
@@ -207,7 +201,7 @@ onBeforeUnmount(() => observer?.disconnect())
        ancestor instead, and the kit is full of such ancestors (any panel with a
        blur). Declaring it next to the form it belongs to should not decide
        where on screen it lands. -->
-  <Teleport to="body">
+  <Teleport :to="portalTo">
     <!-- `forwards` on the way out, because the leave animation finishing is not
          the same moment as the element leaving. `rise-out` is a bare `to {}`, so
          once it ends the element snaps back to opacity 1 at its resting
@@ -280,12 +274,10 @@ onBeforeUnmount(() => observer?.disconnect())
                 :hotkey="action.hotkey"
                 @click="run(action)"
               >
-                <LpIcon
-                  v-if="action.loading"
-                  name="lucide:loader-circle"
-                  :size="15"
-                  class="animate-spin"
-                />
+                <!-- At once: it takes the icon's place, which a delay would
+                     leave empty. Left announced, since nothing else tells a
+                     screen reader the action is under way. -->
+                <LpLoader v-if="action.loading" size="inline" :delay="0" class="text-[15px]" />
                 <LpIcon v-else-if="action.icon" :name="action.icon" :size="15" />
                 {{ action.label }}
               </LpButton>