@leavepulse/ui 0.43.4 → 0.45.0

package/dist/layout/useLayout.js

@@ -1,5 +1,9 @@
-import { shallowRef, computed, ref } from "vue";
-import { makeLayout, countBlocks, serializeLayout, resizeAt, setActiveTab, deserializeLayout, moveLeaf, removeLeaf, removeBlock, reorderTab, addTab, addLeaf } from "./tree.js";
+import { shallowRef, computed, ref, watch } from "vue";
+import { makeLayout, countBlocks, serializeLayout, resizeAt, setActiveTab, snapshotLayout, restoreLayout, reorderTab, removeBlock, moveLeaf, deserializeLayout, removeLeaf, addTab, addLeaf } from "./tree.js";
+const controllers = /* @__PURE__ */ new WeakMap();
+function layoutController(tree) {
+  return controllers.get(tree);
+}
 function useLayout(options) {
   const limit = options.historyLimit ?? 50;
   const layout = shallowRef(makeLayout(options.initial));
@@ -8,16 +12,36 @@ function useLayout(options) {
   const future = ref([]);
   const canUndo = computed(() => past.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);
-  const snapshot = () => JSON.stringify(serializeLayout(layout.value));
-  function record(mutate) {
-    const before = snapshot();
-    mutate();
+  const snapshot = () => snapshotLayout(layout.value);
+  function push(before) {
+    if (before === snapshot()) return;
     past.value.push(before);
     if (past.value.length > limit) past.value.shift();
     future.value = [];
   }
+  function record(mutate) {
+    const before = snapshot();
+    mutate();
+    push(before);
+  }
+  let resizeStart = null;
+  const controller = {
+    move: (movingId, targetId, side) => record(() => moveLeaf(layout.value, movingId, targetId, side)),
+    removeBlock: (leafId, index) => record(() => removeBlock(layout.value, leafId, index)),
+    reorderTab: (leafId, from, to) => record(() => reorderTab(layout.value, leafId, from, to)),
+    setActive: (leafId, index) => setActiveTab(layout.value, leafId, index),
+    resize: (parent, index, delta) => resizeAt(parent, index, delta),
+    beginResize: () => {
+      resizeStart = snapshot();
+    },
+    endResize: () => {
+      if (resizeStart !== null) push(resizeStart);
+      resizeStart = null;
+    }
+  };
+  watch(layout, (tree) => controllers.set(tree, controller), { immediate: true, flush: "sync" });
   function restore(serialized) {
-    layout.value = deserializeLayout(JSON.parse(serialized));
+    layout.value = restoreLayout(serialized);
   }
   return {
     layout,
@@ -26,15 +50,17 @@ function useLayout(options) {
     canRedo,
     add: (block, side) => record(() => addLeaf(layout.value, block, side)),
     addTab: (leafId, block) => record(() => addTab(layout.value, leafId, block)),
-    setActive: (leafId, index) => setActiveTab(layout.value, leafId, index),
-    reorderTab: (leafId, from, to) => record(() => reorderTab(layout.value, leafId, from, to)),
-    removeBlock: (leafId, index) => record(() => removeBlock(layout.value, leafId, index)),
+    setActive: controller.setActive,
+    reorderTab: controller.reorderTab,
+    removeBlock: controller.removeBlock,
     remove: (leafId) => record(() => removeLeaf(layout.value, leafId)),
-    move: (movingId, targetId, side) => record(() => moveLeaf(layout.value, movingId, targetId, side)),
+    move: controller.move,
     // Resize fires continuously during a divider drag; recording every frame
-    // would flood history, so it mutates without a snapshot. (A consumer that
-    // wants resize in history can wrap a single record() around the gesture.)
-    resize: (parent, index, delta) => resizeAt(parent, index, delta),
+    // would flood history. The canvas brackets its gestures with
+    // beginResize/endResize, which records the whole drag as one step.
+    resize: controller.resize,
+    beginResize: controller.beginResize,
+    endResize: controller.endResize,
     undo: () => {
       const prev = past.value.pop();
       if (prev === void 0) return;
@@ -57,5 +83,6 @@ function useLayout(options) {
   };
 }
 export {
+  layoutController,
   useLayout
 };

package/dist/theme/backdrop.d.ts

@@ -7,3 +7,15 @@ export declare function isBrokenBackdropEngine(nav?: Navigator): boolean;
  * and a no-op outside the browser.
  */
 export declare function detectBackdropFilter(root?: HTMLElement): boolean;
+export declare const GLASS_BACKDROP_ATTR = "data-lp-glass-backdrop";
+/**
+ * Give glass panels a wallpaper to frost where backdrop-filter does not work:
+ * `setGlassBackdrop("url(/bg.jpg) center / cover no-repeat, #0b0f14")`, the
+ * same value the app paints behind itself. `filter` replaces the default blur,
+ * e.g. `"none"` for a wallpaper that was blurred ahead of time, which is
+ * cheaper on an engine that blurs on the CPU. `null` turns it off.
+ */
+export declare function setGlassBackdrop(background: string | null, options?: {
+    filter?: string;
+    root?: HTMLElement;
+}): void;

package/dist/theme/presets.d.ts

@@ -2,7 +2,6 @@ import type { TokenSet } from "./tokens";
 export declare const dark: TokenSet;
 export declare const light: TokenSet;
 export declare const lime: TokenSet;
-export declare const leavepulse: TokenSet;
 export declare const rose: TokenSet;
 export declare const amber: TokenSet;
 export declare const violet: TokenSet;
@@ -11,7 +10,6 @@ export declare const presets: {
     readonly dark: TokenSet;
     readonly light: TokenSet;
     readonly lime: TokenSet;
-    readonly leavepulse: TokenSet;
     readonly rose: TokenSet;
     readonly amber: TokenSet;
     readonly violet: TokenSet;

package/dist/theme/useTheme.d.ts

@@ -1,5 +1,14 @@
 import { type ComputedRef, type DeepReadonly, type Ref } from "vue";
 import { type TokenSet } from "./tokens";
+/** A light/dark pair followed by the operating system's colour scheme. */
+export interface SystemThemes {
+    light: TokenSet;
+    dark: TokenSet;
+}
+/** Whether the OS asks for dark. True where it cannot be asked (server, old engines). */
+export declare function prefersDarkScheme(): boolean;
+/** Every CSS variable a theme sets, in application order. */
+export declare function themeEntries(input: TokenSet): [string, string][];
 export declare function applyTheme(theme: TokenSet, root?: HTMLElement): void;
 /** Point a circular theme reveal expands from (viewport px). */
 export interface RevealOrigin {
@@ -11,31 +20,45 @@ export declare function serializeTheme(theme: TokenSet): string;
 export declare function themeToCssVars(theme: TokenSet): string;
 /** Render a theme as a complete CSS rule (default selector `:root`). */
 export declare function themeToCssRule(theme: TokenSet, selector?: string): string;
-/** Parse + shallow-validate a theme JSON; throws on a malformed shape. */
+export declare function normalizeTheme(raw: Partial<TokenSet> & {
+    name?: string;
+}): TokenSet;
+/** Parse + validate a theme JSON; throws on a malformed shape. */
 export declare function parseTheme(json: string): TokenSet;
 export declare function bootstrapTheme(fallback: TokenSet): TokenSet;
 export declare function cacheTheme(theme: TokenSet): void;
+/** Persist "follow the OS" with the pair it switches between. */
+export declare function cacheSystemThemes(system: SystemThemes): void;
 export declare const THEME_COOKIE = "lp-theme";
 /**
  * Resolve a theme name (as read from the `lp-theme` cookie) against a set of
  * known themes. Returns `null` when the name is absent or unknown, so the caller
  * can fall back to its own default.
  *
- * Server-side counterpart to `cacheTheme`: pair it with `themeToCssRule` to
- * inline the right variables into `<head>` during SSR.
+ * Accepts both a raw and an already-decoded value: frameworks differ on whether
+ * their cookie helpers decode, and a name containing `%` must not throw.
+ * A "follow the OS" cookie resolves to its dark member unless `prefersDark` is
+ * false (pass it from the `Sec-CH-Prefers-Color-Scheme` request header).
  */
-export declare function themeFromCookie(cookieValue: string | null | undefined, themes: readonly TokenSet[]): TokenSet | null;
+export declare function themeFromCookie(cookieValue: string | null | undefined, themes: readonly TokenSet[], options?: {
+    prefersDark?: boolean;
+}): TokenSet | null;
 export interface UseTheme {
     /** The active theme, kept in sync by the kit. Null until hydrated (SSR/first
-     *  paint) — reactive, so a switcher binds straight to it. */
+     *  paint), reactive, so a switcher binds straight to it. */
     current: DeepReadonly<Ref<TokenSet | null>>;
     /** The active theme's name (""="not yet hydrated"). */
     currentName: ComputedRef<string>;
-    /** Set + persist a theme (with the circular reveal if `origin`/transition).
-     *  This is the one call a switcher needs — it updates `current` too. */
+    /** True while the theme follows the OS colour scheme (see setSystem). */
+    system: ComputedRef<boolean>;
+    /** Set + persist a theme (with the circular reveal). Stops following the OS. */
     setTheme: (theme: TokenSet, origin?: RevealOrigin) => void;
-    /** Seed the fallback (used when nothing is cached) and hydrate now. Call once
-     *  at app start (client) — optional; the first useTheme() hydrates anyway. */
+    /**
+     * Follow the OS colour scheme, switching between `themes.light` and
+     * `themes.dark` as it changes. Persisted like any other choice.
+     */
+    setSystem: (themes: SystemThemes, origin?: RevealOrigin) => void;
+    /** Seed the fallback (used when nothing is cached) and hydrate now. */
     init: (fallback: TokenSet) => TokenSet;
     apply: (theme: TokenSet) => void;
     applyWithTransition: (theme: TokenSet, origin?: RevealOrigin) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.43.4",
+  "version": "0.45.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -22,16 +22,21 @@
       "style": "./src/index.css",
       "import": "./dist/index.js"
     },
+    "./icons-all": {
+      "types": "./dist/icons-all.d.ts",
+      "import": "./dist/icons-all.js"
+    },
     "./nuxt": "./src/nuxt.ts",
     "./css": "./src/index.css",
     "./tokens.css": "./src/tokens/tokens.css",
     "./scrollbar.css": "./src/tokens/scrollbar.css",
     "./canvas.css": "./src/canvas.css",
     "./package.json": "./package.json",
-    "./dist/*": {
+    "./dist/*.js": {
       "types": "./dist/*.d.ts",
-      "default": "./dist/*"
-    }
+      "default": "./dist/*.js"
+    },
+    "./dist/*": "./dist/*"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -40,26 +45,30 @@
   "sideEffects": [
     "**/*.css",
     "**/icons.ts",
-    "**/icons.js"
+    "**/icons-all.ts",
+    "**/icons-all.js",
+    "**/chunks/LpIcon-*.js",
+    "**/chunks/icons-*.js"
   ],
   "scripts": {
     "dev": "vite",
     "gen:names": "node scripts/gen-component-names.mjs",
-    "build": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts && vue-tsc --declaration --emitDeclarationOnly --noEmit false -p tsconfig.build.json --outDir dist",
+    "build": "node scripts/gen-component-names.mjs && node scripts/gen-kit-icons.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts && vue-tsc --declaration --emitDeclarationOnly --noEmit false -p tsconfig.build.json --outDir dist",
     "dev:dist": "vite build --watch --config vite.lib.config.ts",
     "prepublishOnly": "npm run build",
     "typecheck": "vue-tsc --noEmit",
     "test": "bun 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"
+    "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"
   },
   "peerDependencies": {
     "@iconify-json/lucide": "^1.2.0",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.5.0",
     "@nuxt/kit": "^3.0.0 || ^4.0.0",
-    "@vueuse/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
     "motion-v": "^2.2.0",
     "reka-ui": "^2.9.0",
     "tailwind-variants": "^3.0.0",
@@ -93,6 +102,7 @@
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
+    "libphonenumber-js": "^1.12.0",
     "vaul-vue": "^0.4.1"
   }
 }

package/src/component-names.ts

@@ -1,9 +1,8 @@
 /* AUTO-GENERATED by scripts/gen-component-names.mjs — do not edit.
  * The full list of kit component names, kept in sync with the component files
- * so the Nuxt module (./nuxt) auto-registers every component including new ones. */
+ * so the Nuxt module (./nuxt) auto-registers every exported component including new ones. */
 export const COMPONENT_NAMES = [
   "LayoutCanvas",
-  "LayoutNode",
   "LpActionBar",
   "LpAddressInput",
   "LpAlert",
@@ -21,22 +20,23 @@ export const COMPONENT_NAMES = [
   "LpColorPicker",
   "LpCommandPalette",
   "LpConfirmDialog",
+  "LpConfirmHost",
   "LpContextMenu",
   "LpDatePicker",
+  "LpDateRangePicker",
   "LpDisclosure",
   "LpDivider",
   "LpDrawer",
   "LpDropdownMenu",
   "LpDropzone",
   "LpEmptyState",
+  "LpFieldNotice",
   "LpFileTree",
-  "LpFileTreeNode",
   "LpFormField",
   "LpIcon",
   "LpImageEditor",
   "LpInfraNode",
   "LpInput",
-  "LpLaneNode",
   "LpLightbox",
   "LpLink",
   "LpLogViewer",
@@ -56,6 +56,7 @@ export const COMPONENT_NAMES = [
   "LpProgress",
   "LpRadio",
   "LpRadioGroup",
+  "LpRangeCalendar",
   "LpRollingText",
   "LpScrollArea",
   "LpSection",
@@ -65,7 +66,6 @@ export const COMPONENT_NAMES = [
   "LpShift",
   "LpShortcutsDialog",
   "LpSidebar",
-  "LpSidebarNav",
   "LpSkeleton",
   "LpSlider",
   "LpSparkline",
@@ -75,13 +75,15 @@ export const COMPONENT_NAMES = [
   "LpTable",
   "LpTableOfContents",
   "LpTabs",
+  "LpTagsInput",
   "LpTextarea",
+  "LpThemeProvider",
   "LpThemeSwitcher",
   "LpTilt",
   "LpTimeField",
   "LpToaster",
   "LpTooltip",
+  "LpTooltipProvider",
   "LpTopologyCanvas",
-  "LpUptimeBar",
-  "LpWaypointEdge"
+  "LpUptimeBar"
 ] as const

package/src/components/ContextMenuItems.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/*
+ * The rows of an LpContextMenu panel, rendering itself for every submenu so
+ * `children` nests to any depth. Internal: not exported.
+ */
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from "reka-ui"
+import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
+
+defineOptions({ name: "ContextMenuItems" })
+
+defineProps<{
+  items: ContextMenuItemDef[]
+  panel: string
+}>()
+
+const ITEM =
+  "group/item flex cursor-pointer select-none items-center gap-2 rounded-md 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"
+const ICON =
+  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
+</script>
+
+<template>
+  <template v-for="(item, i) in items" :key="i">
+    <ContextMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
+
+    <ContextMenuSub v-if="item.children?.length">
+      <ContextMenuSubTrigger
+        :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand data-[state=open]:bg-brand-soft data-[state=open]:text-brand']"
+        :disabled="item.disabled"
+      >
+        <span class="flex items-center gap-2">
+          <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
+          {{ item.label }}
+        </span>
+        <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
+      </ContextMenuSubTrigger>
+      <ContextMenuPortal>
+        <ContextMenuSubContent :collision-padding="8" :class="panel" :side-offset="2" :align-offset="-4">
+          <ContextMenuItems :items="item.children" :panel="panel" />
+        </ContextMenuSubContent>
+      </ContextMenuPortal>
+    </ContextMenuSub>
+
+    <!-- Tick-box item: a real checkbox item, so assistive tech hears its state.
+         `@select.prevent` keeps the menu open, since these come in lists where
+         several are set in one visit. The tick occupies a fixed slot so
+         unticked rows stay aligned with ticked ones. -->
+    <ContextMenuCheckboxItem
+      v-else-if="item.checked !== undefined"
+      :model-value="item.checked"
+      :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand']"
+      :disabled="item.disabled"
+      @select.prevent="item.onSelect?.()"
+    >
+      <span class="flex items-center gap-2">
+        <LpIcon
+          :name="item.checked ? 'lucide:check' : 'lucide:minus'"
+          :size="15"
+          :class="[ICON, item.checked ? '' : 'opacity-25']"
+        />
+        {{ item.label }}
+      </span>
+      <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
+    </ContextMenuCheckboxItem>
+
+    <ContextMenuItem
+      v-else
+      :class="[ITEM, 'justify-between', item.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
+      :disabled="item.disabled"
+      @select="item.onSelect?.()"
+    >
+      <span class="flex items-center gap-2">
+        <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
+        {{ item.label }}
+      </span>
+      <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
+    </ContextMenuItem>
+  </template>
+</template>

package/src/components/LayoutCanvas.vue

@@ -22,7 +22,8 @@ import {
   type Split,
 } from "../layout/tree"
 import type { BlockRegistry } from "../layout/registry"
-import { ref } from "vue"
+import { layoutController, type LayoutController } from "../layout/useLayout"
+import { computed, ref } from "vue"
 
 const props = defineProps<{
   modelValue: Split
@@ -42,13 +43,30 @@ defineSlots<{
 
 const dragId = ref<string | null>(null)
 
+// A tree owned by useLayout() is edited through its controller, so every edit
+// lands in undo history; a bare tree is mutated directly as before.
+const edits = computed<LayoutController>(() => {
+  const tree = props.modelValue
+  return (
+    layoutController(tree) ?? {
+      move: (movingId, targetId, side) => moveLeaf(tree, movingId, targetId, side),
+      removeBlock: (leafId, index) => removeBlock(tree, leafId, index),
+      reorderTab: (leafId, from, to) => reorderTab(tree, leafId, from, to),
+      setActive: (leafId, index) => setActiveTab(tree, leafId, index),
+      resize: (parent, index, delta) => resizeAt(parent, index, delta),
+      beginResize: () => {},
+      endResize: () => {},
+    }
+  )
+})
+
 function onDrop(targetId: string, side: Side) {
-  if (dragId.value) moveLeaf(props.modelValue, dragId.value, targetId, side)
+  if (dragId.value) edits.value.move(dragId.value, targetId, side)
   dragId.value = null
 }
 
 function onResize(parent: Split, index: number, delta: number) {
-  resizeAt(parent, index, delta)
+  edits.value.resize(parent, index, delta)
 }
 </script>
 
@@ -63,10 +81,12 @@ function onResize(parent: Split, index: number, delta: number) {
       @dragstart="(id) => (dragId = id)"
       @dragend="dragId = null"
       @drop="onDrop"
-      @set-active="(leafId, i) => setActiveTab(modelValue, leafId, i)"
-      @remove-block="(leafId, i) => removeBlock(modelValue, leafId, i)"
-      @reorder-tab="(leafId, from, to) => reorderTab(modelValue, leafId, from, to)"
+      @set-active="(leafId, i) => edits.setActive(leafId, i)"
+      @remove-block="(leafId, i) => edits.removeBlock(leafId, i)"
+      @reorder-tab="(leafId, from, to) => edits.reorderTab(leafId, from, to)"
       @resize="onResize"
+      @resize-start="edits.beginResize()"
+      @resize-end="edits.endResize()"
     >
       <template #block="slotProps">
         <slot name="block" v-bind="slotProps" />

package/src/components/LayoutNode.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { Motion } from "motion-v"
-import { computed, ref } from "vue"
+import { Motion, useReducedMotion } from "motion-v"
+import { computed, onBeforeUnmount, ref } from "vue"
 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 },
+)
+
 const props = defineProps<{
   node: LayoutNode
   dragId: string | null
@@ -21,6 +30,8 @@ const emit = defineEmits<{
   (e: "remove-block", leafId: string, index: number): void
   (e: "reorder-tab", leafId: string, from: number, to: number): void
   (e: "resize", parent: Split, index: number, deltaFraction: number): void
+  (e: "resize-start"): void
+  (e: "resize-end"): void
 }>()
 
 // Explicit slot shape so the recursive #block pass-through types cleanly.
@@ -97,10 +108,18 @@ function onDragOver(ev: DragEvent) {
   else hoverSide.value = "center"
 }
 
+let stopSplitter: (() => void) | null = null
+onBeforeUnmount(() => stopSplitter?.())
+
 function startSplitter(ev: PointerEvent, parent: Split, index: number) {
   ev.preventDefault()
-  const host = (ev.currentTarget as HTMLElement).parentElement
+  const handle = ev.currentTarget as HTMLElement
+  const host = handle.parentElement
   if (!host) return
+  // Capture keeps the moves coming when the pointer crosses an iframe or leaves
+  // the window; pointercancel (a touch the browser took over) ends it too.
+  handle.setPointerCapture?.(ev.pointerId)
+  emit("resize-start")
   const rect = host.getBoundingClientRect()
   const horizontal = parent.dir === "row"
   const span = horizontal ? rect.width : rect.height
@@ -114,9 +133,14 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
   const up = () => {
     window.removeEventListener("pointermove", move)
     window.removeEventListener("pointerup", up)
+    window.removeEventListener("pointercancel", up)
+    stopSplitter = null
+    emit("resize-end")
   }
+  stopSplitter = up
   window.addEventListener("pointermove", move)
   window.addEventListener("pointerup", up)
+  window.addEventListener("pointercancel", up)
 }
 </script>
 
@@ -141,6 +165,8 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
         @remove-block="(l, idx) => emit('remove-block', l, idx)"
         @reorder-tab="(l, from, to) => emit('reorder-tab', l, from, to)"
         @resize="(p, idx, d) => emit('resize', p, idx, d)"
+        @resize-start="emit('resize-start')"
+        @resize-end="emit('resize-end')"
       >
         <template #block="slotProps">
           <slot name="block" v-bind="slotProps" />
@@ -168,7 +194,7 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
   <Motion
     v-else-if="leaf"
     :layout="true"
-    :transition="{ type: 'spring', stiffness: 520, damping: 42, mass: 0.9 }"
+    :transition="layoutTransition"
     class="relative flex min-h-0 min-w-0 flex-col"
     :class="{ 'opacity-35': dragId === node.id }"
   >

package/src/components/LpActionBar.vue

@@ -20,7 +20,8 @@
  * 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, nextTick, ref, useSlots, watch } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { useBarStack } from "./actionBar"
 import { CLOSE_ICON } from "./dropdown"
 import LpButton from "./LpButton.vue"
@@ -85,6 +86,7 @@ const props = withDefaults(
     maxWidth?: string
     /** Accessible name for the landmark. Falls back to `title`. */
     ariaLabel?: string
+    labels?: Partial<{ dismiss: string }>
   }>(),
   {
     open: true,
@@ -100,6 +102,7 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
+const text = useLabels("actionBar", { dismiss: "Dismiss" }, () => props.labels)
 
 // The last action is the primary one unless the caller has said otherwise; the
 // rest default to `ghost` so a bar with three buttons still has one obvious
@@ -154,19 +157,39 @@ const stackOffset = computed(() => {
   return offset()
 })
 
+/*
+ * The height is watched, not measured once: a description that wraps after a
+ * 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,
-  async (isOpen) => {
+  (isOpen) => {
+    // Nothing on the server ever unregisters, so registering there would leak
+    // one slot per rendered request into every later page.
+    if (typeof window === "undefined") return
     if (!isOpen) {
       unregister()
       return
     }
     register()
-    await nextTick()
-    if (root.value) setHeight(root.value.getBoundingClientRect().height)
   },
   { 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)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
 </script>
 
 <template>
@@ -186,7 +209,7 @@ watch(
          Reduced motion skips it entirely rather than holding a frame it never
          animated to. -->
     <Transition
-      enter-active-class="animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)]"
+      enter-active-class="animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"
       leave-active-class="animate-[rise-out_var(--duration-fast)_ease_forwards] motion-reduce:animate-none"
     >
       <div
@@ -194,9 +217,9 @@ watch(
         ref="root"
         role="region"
         :aria-label="ariaLabel ?? title"
-        class="pointer-events-none fixed inset-x-0 bottom-0 z-(--z-modal) flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        class="pointer-events-none fixed inset-x-0 bottom-0 flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
         :class="width === 'full' ? '' : 'p-3 sm:p-4'"
-        :style="{ translate: `0 -${stackOffset}px` }"
+        :style="{ translate: `0 -${stackOffset}px`, zIndex: 'calc(var(--z-overlay) - 1)' }"
       >
         <div
           class="lp-skin-panel pointer-events-auto flex items-center gap-3 border-solid bg-surface-overlay"
@@ -261,7 +284,7 @@ watch(
             <button
               v-if="dismissible"
               type="button"
-              aria-label="Dismiss"
+              :aria-label="text.dismiss"
               class="group -mr-1 flex size-8 shrink-0 items-center justify-center rounded-control text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
               @click="dismiss"
             >