@leavepulse/ui 0.77.3 → 0.78.0

package/src/layout/tree.ts

@@ -1,3 +1,4 @@
+import { clamp } from "../composables/clamp"
 import { reactive } from "vue"
 
 /*
@@ -221,11 +222,11 @@ export function moveLeaf(
 ): void {
   if (movingId === targetId) return
   const moving = findLeaf(root, movingId)
-  if (!moving) return
+  // Checked before the cell is detached: with nowhere to land it would be lost.
+  const target = findLeaf(root, targetId)
+  if (!moving || !target) return
 
   if (side === "center") {
-    const target = findLeaf(root, targetId)
-    if (!target) return
     const merged = moving.blocks
     detach(root, movingId)
     target.active = target.blocks.length
@@ -275,23 +276,37 @@ export function serializeLayout(root: Split): SerializedNode {
   return strip(root) as SerializedSplit
 }
 
+const validSize = (size: unknown): number =>
+  typeof size === "number" && Number.isFinite(size) && size > 0 ? size : 1
+
+/*
+ * The data may come from a file or an older version, so nothing about its
+ * shape is taken on trust: a bad size or direction falls back to the default
+ * and a node that cannot be drawn (no tabs, no children, an unknown kind) is
+ * left out, so one damaged cell does not cost the person the whole layout.
+ * Only a root that is no layout at all throws. Block ids are the app's, so an
+ * id that repeats across cells is kept.
+ */
 export function deserializeLayout(data: SerializedNode): Split {
-  const hydrate = (n: SerializedNode): LayoutNode => {
-    if (n.kind === "leaf") {
+  const hydrate = (n: SerializedNode | null | undefined): LayoutNode | null => {
+    if (n?.kind === "leaf") {
       // Accept both the tabbed form and the legacy single-`block` form.
-      const blocks = n.blocks ?? (n.block != null ? [n.block] : [])
-      const active = Math.min(Math.max(n.active ?? 0, 0), Math.max(blocks.length - 1, 0))
-      return { kind: "leaf", id: nid(), blocks, active, size: n.size ?? 1 }
-    }
-    return {
-      kind: "split",
-      id: nid(),
-      dir: n.dir,
-      size: n.size ?? 1,
-      children: n.children.map(hydrate),
+      const listed = Array.isArray(n.blocks) ? n.blocks : n.block != null ? [n.block] : []
+      const blocks = listed.filter((block) => typeof block === "string")
+      if (!blocks.length) return null
+      const wanted = Number.isInteger(n.active) ? n.active : 0
+      const active = clamp(wanted, 0, blocks.length - 1)
+      return { kind: "leaf", id: nid(), blocks, active, size: validSize(n.size) }
     }
+    if (n?.kind !== "split" || !Array.isArray(n.children)) return null
+    const children = n.children.map(hydrate).filter((child) => child !== null)
+    if (!children.length) return null
+    return { kind: "split", id: nid(), dir: n.dir === "col" ? "col" : "row", size: validSize(n.size), children }
   }
-  return reactive(hydrate(data) as Split)
+  if (data?.kind !== "leaf" && data?.kind !== "split") throw new Error("Invalid layout")
+  const root = hydrate(data)
+  if (root?.kind === "split") return reactive(root)
+  return reactive<Split>({ kind: "split", id: nid(), dir: "row", size: 1, children: root ? [root] : [] })
 }
 
 // ── history snapshots ────────────────────────────────────────

package/src/layout/useLayout.ts

@@ -90,6 +90,8 @@ export interface UseLayout {
   serialize: () => unknown
   /** Replace the layout from previously serialized data. */
   hydrate: (data: unknown) => void
+  /** Forget undo and redo, for a layout that replaces this one rather than edits it. */
+  clearHistory: () => void
 }
 
 export function useLayout(options: UseLayoutOptions): UseLayout {
@@ -180,5 +182,9 @@ export function useLayout(options: UseLayoutOptions): UseLayout {
       record(() => {
         layout.value = deserializeLayout(data as Parameters<typeof deserializeLayout>[0])
       }),
+    clearHistory: () => {
+      past.value = []
+      future.value = []
+    },
   }
 }

package/src/layout/useWorkspaces.ts

@@ -0,0 +1,234 @@
+import { computed, getCurrentScope, onScopeDispose, watch, type ComputedRef } from "vue"
+import { useKitStorage, usePersisted } from "../composables/usePersisted"
+import { deserializeLayout, makeLayout, serializeLayout } from "./tree"
+import { useLayout, type UseLayout } from "./useLayout"
+
+/*
+ * useWorkspaces — several named layouts over one useLayout.
+ *
+ * `controller` is the plain useLayout, so a <LayoutCanvas> binds to it as to
+ * any other and never learns workspaces exist. This adds the shelf around it:
+ * the saved layouts, which one is showing, and keeping both across a restart.
+ * Edits land on the active workspace by themselves, debounced, because a
+ * divider drag changes the tree on every frame.
+ *
+ * What comes back from storage or an import goes through `deserializeLayout`,
+ * so a broken record costs that workspace its layout, not the page. Undo
+ * history belongs to one workspace: a switch clears it, or Undo would walk
+ * back into a layout from another one.
+ */
+
+const STORE_VERSION = 1
+const SAVE_DELAY_MS = 300
+const DEFAULT_NAME = "Workspace"
+
+export interface WorkspaceSeed {
+  id?: string
+  name: string
+  blocks: string[]
+}
+
+export interface WorkspaceEntry {
+  id: string
+  name: string
+  layout: unknown
+}
+
+export interface WorkspaceSummary {
+  id: string
+  name: string
+}
+
+/** One workspace as a file: what export gives and import takes. */
+export interface WorkspaceExport {
+  name: string
+  layout: unknown
+}
+
+interface WorkspaceStore {
+  version: number
+  active: string
+  items: WorkspaceEntry[]
+}
+
+export interface UseWorkspacesOptions {
+  /** Block ids of a new or unreadable workspace. */
+  initial: string[]
+  /** The workspaces a first visit starts with. One from `initial` when unset. */
+  defaults?: WorkspaceSeed[]
+  /** Keep them across visits under this key (see `usePersisted`). In memory without one. */
+  persist?: string
+  historyLimit?: number
+}
+
+export interface UseWorkspaces {
+  /** The live layout of the active workspace, for <LayoutCanvas v-model>. */
+  controller: UseLayout
+  workspaces: ComputedRef<WorkspaceSummary[]>
+  activeId: ComputedRef<string>
+  switchTo: (id: string) => void
+  /** Add one and show it. From `blocks`, else from `initial`. Returns its id. */
+  create: (name: string, blocks?: string[]) => string
+  /** Copy a workspace (the active one by default) and show the copy. */
+  duplicate: (id?: string, name?: string) => string | null
+  rename: (id: string, name: string) => void
+  /** The last workspace stays: there is always one to show. */
+  remove: (id: string) => void
+  /** Back to `initial`, for the active workspace. */
+  resetActive: () => void
+  exportWorkspace: (id?: string) => WorkspaceExport | null
+  /** Add a workspace from an export. Null, and nothing added, when it does not read as a layout. */
+  importWorkspace: (data: unknown) => string | null
+  /** Write pending edits now instead of after the debounce. */
+  save: () => void
+}
+
+function isStore(value: unknown): value is WorkspaceStore {
+  const store = value as WorkspaceStore | null
+  if (!store || store.version !== STORE_VERSION || typeof store.active !== "string") return false
+  if (!Array.isArray(store.items) || store.items.length === 0) return false
+  const ids = new Set<string>()
+  for (const item of store.items) {
+    if (!item || typeof item.id !== "string" || typeof item.name !== "string" || ids.has(item.id)) return false
+    ids.add(item.id)
+  }
+  return true
+}
+
+let idCount = 0
+const newId = () => `ws-${Date.now().toString(36)}-${(idCount++).toString(36)}`
+
+export function useWorkspaces(options: UseWorkspacesOptions): UseWorkspaces {
+  const seed = (blocks: string[]) => serializeLayout(makeLayout(blocks))
+  const seeds = options.defaults?.length ? options.defaults : [{ name: DEFAULT_NAME, blocks: options.initial }]
+  const items = seeds.map((s, i) => ({ id: s.id ?? `ws-default-${i}`, name: s.name, layout: seed(s.blocks) }))
+
+  const store = usePersisted<WorkspaceStore>(
+    () => options.persist && `lp-workspaces:${options.persist}`,
+    { version: STORE_VERSION, active: items[0]!.id, items },
+    { validate: isStore },
+  )
+  const controller = useLayout({ initial: options.initial, historyLimit: options.historyLimit })
+
+  const entry = (id: string) => store.value.items.find((item) => item.id === id)
+  const activeId = computed(() => (entry(store.value.active) ? store.value.active : store.value.items[0]!.id))
+  const workspaces = computed(() => store.value.items.map(({ id, name }) => ({ id, name })))
+
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  function save() {
+    clearTimeout(timer)
+    timer = undefined
+    const current = entry(activeId.value)
+    if (!current) return
+    const layout = controller.serialize()
+    if (JSON.stringify(layout) !== JSON.stringify(current.layout)) current.layout = layout
+  }
+
+  function show(id: string) {
+    const target = entry(id)
+    if (!target) return
+    try {
+      controller.hydrate(target.layout)
+    } catch {
+      // Unreadable: this workspace starts over, the others are untouched.
+      controller.reset()
+    }
+    controller.clearHistory()
+  }
+
+  function switchTo(id: string) {
+    if (!entry(id) || id === activeId.value) return
+    save()
+    store.value.active = id
+    show(id)
+  }
+
+  function add(name: string, layout: unknown): string {
+    save()
+    const id = newId()
+    store.value.items.push({ id, name: name.trim() || DEFAULT_NAME, layout })
+    store.value.active = id
+    show(id)
+    return id
+  }
+
+  function duplicate(id = activeId.value, name?: string): string | null {
+    save()
+    const source = entry(id)
+    if (!source) return null
+    return add(name ?? source.name, JSON.parse(JSON.stringify(source.layout)))
+  }
+
+  function rename(id: string, name: string) {
+    const target = entry(id)
+    const trimmed = name.trim()
+    if (target && trimmed) target.name = trimmed
+  }
+
+  function remove(id: string) {
+    if (store.value.items.length <= 1) return
+    const at = store.value.items.findIndex((item) => item.id === id)
+    if (at === -1) return
+    const wasActive = id === activeId.value
+    if (!wasActive) save()
+    store.value.items.splice(at, 1)
+    if (!wasActive) return
+    clearTimeout(timer)
+    const next = store.value.items[Math.min(at, store.value.items.length - 1)]!
+    store.value.active = next.id
+    show(next.id)
+  }
+
+  function exportWorkspace(id = activeId.value): WorkspaceExport | null {
+    save()
+    const source = entry(id)
+    return source ? JSON.parse(JSON.stringify({ name: source.name, layout: source.layout })) : null
+  }
+
+  function importWorkspace(data: unknown): string | null {
+    const candidate = data as WorkspaceExport | null
+    if (!candidate || typeof candidate.name !== "string") return null
+    try {
+      return add(candidate.name, serializeLayout(deserializeLayout(candidate.layout as Parameters<typeof deserializeLayout>[0])))
+    } catch {
+      return null
+    }
+  }
+
+  show(activeId.value)
+
+  watch(
+    () => JSON.stringify(controller.serialize()),
+    () => {
+      clearTimeout(timer)
+      timer = setTimeout(save, SAVE_DELAY_MS)
+    },
+  )
+  // Direct: by now the persisted ref's own watcher has stopped with the scope.
+  const storage = useKitStorage()
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      save()
+      if (options.persist) storage.set(`lp-workspaces:${options.persist}`, JSON.stringify(store.value))
+    })
+  }
+
+  return {
+    controller,
+    workspaces,
+    activeId,
+    switchTo,
+    create: (name, blocks) => add(name, seed(blocks ?? options.initial)),
+    duplicate,
+    rename,
+    remove,
+    resetActive: () => {
+      controller.reset()
+      save()
+    },
+    exportWorkspace,
+    importWorkspace,
+    save,
+  }
+}

package/src/nuxt.ts

@@ -23,6 +23,8 @@
  *                app's source, "all" registers the whole set, "kit" only the
  *                kit's own, or a list of names. Anything else still renders,
  *                from a lazily loaded chunk of the bundled collection.
+ *   propCheck    false to skip the dev warning for an unknown prop on a kit
+ *                component (default: on in `nuxt dev`, never in a build)
  */
 import { readFileSync } from "node:fs"
 import { createRequire } from "node:module"
@@ -43,6 +45,8 @@ export interface LeavepulseUiOptions {
   exclude?: string[]
   /** Lucide icons registered up front (default "scan"). */
   icons?: "scan" | "all" | "kit" | string[]
+  /** Warn in `nuxt dev` about an unknown prop on a kit component (default true). */
+  propCheck?: boolean
 }
 
 function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string): string {
@@ -55,7 +59,7 @@ function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string): string
 
 export default defineNuxtModule<LeavepulseUiOptions>({
   meta: { name: "@leavepulse/ui", configKey: "leavepulseUi" },
-  defaults: { theme: true, link: true, icons: "scan" },
+  defaults: { theme: true, link: true, icons: "scan", propCheck: true },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
     const skip = new Set(options.exclude ?? [])
@@ -79,6 +83,10 @@ export default defineNuxtModule<LeavepulseUiOptions>({
       })
     }
 
+    if (nuxt.options.dev && options.propCheck !== false) {
+      addPlugin({ src: resolver.resolve("./runtime/propCheck.plugin"), mode: "client" })
+    }
+
     if (options.link !== false) {
       addPlugin({ src: resolver.resolve("./runtime/config.plugin"), mode: "all" })
     }

package/src/runtime/propCheck.plugin.ts

@@ -0,0 +1,10 @@
+/*
+ * Nuxt runtime plugin: warns in `nuxt dev` about an unknown prop on a kit
+ * component. Registered by the kit's Nuxt module, never in a build.
+ */
+import { lpPropCheck } from "@leavepulse/ui"
+import { defineNuxtPlugin } from "#imports"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(lpPropCheck)
+})

package/src/theme/studio.ts

@@ -1,4 +1,4 @@
-import { computed, ref, shallowRef, watch, watchEffect, type ComputedRef, type Ref } from "vue"
+import { computed, getCurrentScope, onScopeDispose, ref, shallowRef, watch, watchEffect, type ComputedRef, type Ref } from "vue"
 import { usePersisted } from "../composables/usePersisted"
 import { defineTheme, withBrand } from "./define"
 import { presets } from "./presets"
@@ -110,10 +110,12 @@ function create(key: string, config: Ref<Omit<ThemeStudioOptions, "storageKey">>
     const dark = pair && themes.value.find((t) => t.name === pair.dark)
     return light && dark ? { light, dark } : null
   })
-  const prefersDark = ref(typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches)
-  if (typeof window !== "undefined") {
-    window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", (e) => (prefersDark.value = e.matches))
-  }
+  const scheme = typeof window === "undefined" ? undefined : window.matchMedia?.("(prefers-color-scheme: dark)")
+  const prefersDark = ref(!!scheme?.matches)
+  const onScheme = (e: MediaQueryListEvent) => (prefersDark.value = e.matches)
+  scheme?.addEventListener("change", onScheme)
+  // A studio opened and closed again left its listener on the page.
+  if (getCurrentScope()) onScopeDispose(() => scheme?.removeEventListener("change", onScheme))
   const engine = useTheme()
   const defaults = (): StudioState => ({
     theme: engine.currentName.value || themes.value[0]?.name || "",

package/src/theme/useTheme.ts

@@ -36,7 +36,9 @@ type Cached = { theme: TokenSet; system?: undefined } | { system: SystemThemes;
 // ── self-managed theme state (singleton) ─────────────────────────────────
 // The kit owns the active theme, like an i18n locale, so every consumer shares
 // one source of truth. Lazily hydrated from the cache on the client; on the
-// server `current` stays null.
+// server `current` stays null and `init` writes nothing, because this module
+// outlives a request and one visitor's theme must not reach the next. A server
+// renders from `themeFromCookie` + `themeToCssRule`; the setters are client-only.
 const _current = shallowRef<TokenSet | null>(null)
 const _system = shallowRef<SystemThemes | null>(null)
 let _hydrated = false
@@ -182,22 +184,31 @@ export function revealTransition(
   update: () => void | Promise<void>,
   origin?: RevealOrigin,
   durationMs = 480,
+  page: Document = document,
 ): void {
-  const doc = document as ViewTransitionDocument
-  if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
+  const doc = page as ViewTransitionDocument
+  const win = page.defaultView ?? window
+  if (typeof doc.startViewTransition !== "function" || prefersReducedMotion(win)) {
     void update()
     return
   }
 
-  const x = origin?.x ?? window.innerWidth / 2
-  const y = origin?.y ?? window.innerHeight / 2
+  const x = origin?.x ?? win.innerWidth / 2
+  const y = origin?.y ?? win.innerHeight / 2
   // Radius that reaches the farthest viewport corner from the origin.
   const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
-    Math.max(y, window.innerHeight - y),
+    Math.max(x, win.innerWidth - x),
+    Math.max(y, win.innerHeight - y),
   )
 
   const transition = doc.startViewTransition(update)
+  /*
+   * `ready` rejects when there will be nothing to animate: a newer transition
+   * replaced this one (the browser skips it by itself, and its `update` still
+   * runs, so quick switches land in order) or the page went hidden. An `update`
+   * that throws still reports, through `finished`.
+   */
+  const skipped = () => {}
   transition.ready.then(() => {
     // Animate the OLD snapshot shrinking to a point, revealing the (already
     // repainted) live page underneath through the growing hole. Clipping the
@@ -205,13 +216,13 @@ export function revealTransition(
     // theme before the circle starts, which read as the theme "changing twice".
     // The pseudo-elements belong to the document element whatever was updated,
     // so the animation always targets it.
-    document.documentElement.animate(
+    page.documentElement.animate(
       {
         clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`],
       },
       {
         duration: durationMs,
-        easing: easingToken("ease-emphasized"),
+        easing: easingToken("ease-emphasized", undefined, page),
         // Hold the fully-shrunk circle after the keyframes end. Without it the
         // old snapshot snaps back to its default (un-clipped) state for the one
         // frame between animation-end and the browser tearing down the
@@ -221,7 +232,7 @@ export function revealTransition(
         pseudoElement: "::view-transition-old(root)",
       },
     )
-  })
+  }, skipped)
 }
 
 /*
@@ -235,7 +246,7 @@ export function applyThemeWithTransition(
   root: HTMLElement = document.documentElement,
   durationMs = 480,
 ): void {
-  revealTransition(() => applyTheme(theme, root), origin, durationMs)
+  revealTransition(() => applyTheme(theme, root), origin, durationMs, root.ownerDocument)
 }
 
 export function serializeTheme(theme: TokenSet): string {
@@ -279,12 +290,72 @@ export function normalizeTheme(raw: Partial<TokenSet> & { name?: string }): Toke
   }
 }
 
-/** Parse + validate a theme JSON; throws on a malformed shape. */
+const THEME_NAME_MAX = 64
+/* Past the 9999 a pill radius is spelt with: beyond that a size is a typo, not a design. */
+const THEME_SIZE_MAX = 99_999
+/* A value goes into a stylesheet as text (themeToCssRule), so it must not be able to leave its declaration. */
+const CSS_BREAKOUT = /[{}<>]/
+const CSS_URL = /url\([^()]*\)/g
+
+function cssValueProblem(value: unknown): string | null {
+  if (typeof value !== "string" || !value.trim()) return "must be a non-empty string"
+  // A `;` belongs inside a data: url, and nowhere else in a value.
+  if (CSS_BREAKOUT.test(value) || value.replace(CSS_URL, "").includes(";")) return "is not a single CSS value"
+  return null
+}
+
+function sizeProblem(value: unknown): string | null {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "must be a finite number"
+  if (value < 0 || value > THEME_SIZE_MAX) return `must be between 0 and ${THEME_SIZE_MAX}`
+  return null
+}
+
+function axisProblem(
+  axis: string,
+  values: unknown,
+  keys: object,
+  check: (value: unknown) => string | null,
+): string | null {
+  if (values === undefined) return null
+  if (!values || typeof values !== "object") return `${axis} must be an object`
+  for (const key of Object.keys(keys)) {
+    const value = (values as Record<string, unknown>)[key]
+    if (value === undefined) continue
+    const problem = check(value)
+    if (problem) return `${axis}.${key} ${problem}`
+  }
+  return null
+}
+
+/*
+ * What is wrong with a theme read from storage or a file, or null. Types stop
+ * at the JSON boundary: `radiusCard: "huge"` would reach the page as `hugepx`.
+ * A token that is simply missing is fine: normalizeTheme fills it, which is how
+ * a theme saved before that token existed keeps working.
+ */
+export function themeProblem(raw: Partial<TokenSet>): string | null {
+  const { name, mode } = raw as { name?: unknown; mode?: unknown }
+  if (name !== undefined && (typeof name !== "string" || !name.trim() || name.length > THEME_NAME_MAX)) {
+    return `name must be 1 to ${THEME_NAME_MAX} characters`
+  }
+  if (mode !== undefined && mode !== "light" && mode !== "dark") return 'mode must be "light" or "dark"'
+  return (
+    axisProblem("colors", raw.colors, COLOR_VARS, cssValueProblem) ??
+    axisProblem("shape", raw.shape, SHAPE_VARS, sizeProblem) ??
+    axisProblem("density", raw.density, DENSITY_VARS, sizeProblem) ??
+    axisProblem("font", raw.font, FONT_VARS, cssValueProblem) ??
+    axisProblem("surface", raw.surface, SURFACE_VARS, cssValueProblem)
+  )
+}
+
+/** Parse + validate a theme JSON; throws on a malformed shape or a bad token value. */
 export function parseTheme(json: string): TokenSet {
   const raw = JSON.parse(json) as Partial<TokenSet>
   if (!raw || typeof raw !== "object" || !raw.colors || !raw.shape || !raw.density) {
     throw new Error("Invalid theme: missing colors/shape/density")
   }
+  const problem = themeProblem(raw)
+  if (problem) throw new Error(`Invalid theme: ${problem}`)
   return normalizeTheme(raw)
 }
 
@@ -321,7 +392,8 @@ export function cacheSystemThemes(system: SystemThemes): void {
 /*
  * SSR handoff. localStorage is invisible to the server, so the theme NAME rides
  * along in a cookie and the server resolves it against the themes it knows
- * (see themeFromCookie). "Follow the OS" is stored as `system:<light>|<dark>`.
+ * (see themeFromCookie). "Follow the OS" is stored as `system:<light>|<dark>`,
+ * each name encoded on its own so a `|` in a name stays part of that name.
  */
 export const THEME_COOKIE = "lp-theme"
 const SYSTEM_PREFIX = "system:"
@@ -329,7 +401,7 @@ const SYSTEM_PREFIX = "system:"
 const COOKIE_MAX_AGE = 60 * 60 * 24 * 365
 
 function systemCookieValue(system: SystemThemes): string {
-  return `${SYSTEM_PREFIX}${system.light.name}|${system.dark.name}`
+  return `${SYSTEM_PREFIX}${encodeURIComponent(system.light.name)}|${encodeURIComponent(system.dark.name)}`
 }
 
 function writeThemeCookie(value: string): void {
@@ -368,7 +440,8 @@ export function themeFromCookie(
     if (value.startsWith(SYSTEM_PREFIX)) {
       const [lightName = "", darkName = ""] = value.slice(SYSTEM_PREFIX.length).split("|")
       const wanted = options.prefersDark === false ? lightName : darkName
-      const found = find(wanted)
+      // Raw too: a cookie from before the names were encoded.
+      const found = find(safeDecode(wanted)) ?? find(wanted)
       if (found) return found
       continue
     }
@@ -427,6 +500,7 @@ export function useTheme(): UseTheme {
       _current.value = theme
     },
     init: (fallback: TokenSet) => {
+      if (typeof window === "undefined") return fallback
       _fallback = fallback
       hydrateOnce()
       if (!_current.value) _current.value = bootstrapTheme(fallback)

package/src/tokens/tokens.css

@@ -173,6 +173,8 @@
    for it, and below the toasts one on a toast's own button (the error
    toast's copy) opened underneath the toast stacked above it. */
 @theme {
+  /* The app shell's header, rail and bars over a page that scrolls under them. */
+  --z-sticky: 40;
   --z-dropdown: 50;
   --z-overlay: 100;
   --z-modal: 110;
@@ -823,7 +825,12 @@
    CSS transitions/animate-pulse used across the kit collapse to a near-instant
    state change — content still mounts/unmounts, it just doesn't travel. This is
    the CSS half; motion-v springs (Tabs/Layout) opt out in JS via
-   usePrefersReducedMotion() (usePillTransition). */
+   usePrefersReducedMotion() (usePillTransition).
+
+   Global on purpose, and part of this stylesheet's contract: it also covers the
+   host app's own elements, so an app that imports the kit's CSS gets reduced
+   motion for free. An animation that must keep running (a status spinner) sets
+   its own `animation-duration` with `!important` in a later layer. */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

package/dist/assets/LpTabs-CJ0rYQbx.css

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