@leavepulse/ui 0.43.4 → 0.45.0

package/src/layout/useLayout.ts

@@ -1,4 +1,4 @@
-import { computed, ref, shallowRef, type Ref } from "vue"
+import { computed, ref, shallowRef, watch, type Ref } from "vue"
 import {
   addLeaf,
   addTab,
@@ -10,8 +10,10 @@ import {
   removeLeaf,
   reorderTab,
   resizeAt,
+  restoreLayout,
   setActiveTab,
   serializeLayout,
+  snapshotLayout,
   type Side,
   type Split,
 } from "./tree"
@@ -22,13 +24,34 @@ import {
  * tree.ts is a pile of pure-ish mutators; this composable is the ergonomic
  * surface a consumer actually wires to UI: it owns the reactive tree, snapshots
  * every structural edit for undo/redo, and exposes save/load/reset against a
- * serialized form. The canvas calls the same mutators for drag/drop/resize, so
- * those go through `record()` too and land in history.
+ * serialized form. A <LayoutCanvas v-model> bound to this tree finds the
+ * controller through `layoutController`, so drag-move, tab close/reorder and
+ * divider resizes land in history with no extra wiring.
  *
- * History holds serialized snapshots (plain JSON), not live trees, so an undo
- * can't smuggle stale reactive nodes back in.
+ * History holds snapshots (plain JSON with node ids), not live trees, so an
+ * undo can't smuggle stale reactive nodes back in, yet blocks keep their
+ * identity and are not remounted.
  */
 
+/** The edits a canvas performs, routed through history when a controller owns the tree. */
+export interface LayoutController {
+  move: (movingId: string, targetId: string, side: Side) => void
+  removeBlock: (leafId: string, index: number) => void
+  reorderTab: (leafId: string, from: number, to: number) => void
+  setActive: (leafId: string, index: number) => void
+  resize: (parent: Split, index: number, deltaFraction: number) => void
+  /** Bracket a continuous resize gesture so it records one history step. */
+  beginResize: () => void
+  endResize: () => void
+}
+
+const controllers = new WeakMap<Split, LayoutController>()
+
+/** The controller managing `tree`, if a useLayout() owns it. */
+export function layoutController(tree: Split): LayoutController | undefined {
+  return controllers.get(tree)
+}
+
 export interface UseLayoutOptions {
   /** Initial block ids, left-to-right, when no saved layout is loaded. */
   initial: string[]
@@ -57,6 +80,8 @@ export interface UseLayout {
   remove: (leafId: string) => void
   move: (movingId: string, targetId: string, side: Side) => void
   resize: (parent: Split, index: number, deltaFraction: number) => void
+  beginResize: () => void
+  endResize: () => void
   undo: () => void
   redo: () => void
   /** Replace the whole layout from a flat block list. */
@@ -77,19 +102,43 @@ export function useLayout(options: UseLayoutOptions): UseLayout {
   const canUndo = computed(() => past.value.length > 0)
   const canRedo = computed(() => future.value.length > 0)
 
-  const snapshot = () => JSON.stringify(serializeLayout(layout.value))
+  const snapshot = () => snapshotLayout(layout.value)
+
+  function push(before: string) {
+    if (before === snapshot()) return
+    past.value.push(before)
+    if (past.value.length > limit) past.value.shift()
+    future.value = []
+  }
 
   // Capture the pre-edit state, run the structural change, drop any redo branch.
   function record(mutate: () => void) {
     const before = snapshot()
     mutate()
-    past.value.push(before)
-    if (past.value.length > limit) past.value.shift()
-    future.value = []
+    push(before)
+  }
+
+  let resizeStart: string | null = null
+
+  const controller: LayoutController = {
+    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: string) {
-    layout.value = deserializeLayout(JSON.parse(serialized))
+    layout.value = restoreLayout(serialized)
   }
 
   return {
@@ -99,16 +148,17 @@ export function useLayout(options: UseLayoutOptions): UseLayout {
     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 === undefined) return

package/src/nuxt.ts

@@ -11,28 +11,71 @@
  *
  * Options (nuxt.config `leavepulseUi`):
  *   theme        false to skip the theme plugin entirely (default: true)
- *   defaultTheme preset name used when the visitor has no saved theme
+ *   defaultTheme theme name used when the visitor has no saved theme
+ *   themes       path of a module whose default export is the app's own
+ *                TokenSet[] (e.g. "~/themes"), so SSR can paint and fall back
+ *                to custom themes, not only the built-in presets
+ *   link         false to skip providing NuxtLink as the kit's link component
+ *   exclude      component names not to auto-register (e.g. ["LayoutCanvas"]
+ *                when the app has its own component of that name)
+ *   icons        which lucide icons render in the server pass and ship in the
+ *                main bundle: "scan" (default) finds "lucide:*" literals in the
+ *                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.
  */
-import { addComponent, addPlugin, createResolver, defineNuxtModule } from "@nuxt/kit"
+import { readFileSync } from "node:fs"
+import { createRequire } from "node:module"
+import { addComponent, addPlugin, addPluginTemplate, addTemplate, createResolver, defineNuxtModule } from "@nuxt/kit"
 import { COMPONENT_NAMES } from "./component-names"
+import { namesInDirs, subset } from "./iconSubset.mjs"
 
 export interface LeavepulseUiOptions {
   /** Register the SSR theme plugin. Disable to wire theming yourself. */
   theme?: boolean
-  /** Preset name to fall back to when nothing is saved (default "LeavePulse"). */
+  /** Theme name to fall back to when nothing is saved (default "Dark"). */
   defaultTheme?: string
+  /** Module path whose default export is the app's TokenSet[]. */
+  themes?: string
+  /** Provide NuxtLink as the link component for kit navigation (default true). */
+  link?: boolean
+  /** Component names to leave unregistered. */
+  exclude?: string[]
+  /** Lucide icons registered up front (default "scan"). */
+  icons?: "scan" | "all" | "kit" | string[]
+}
+
+function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string): string {
+  if (mode === "kit") return ""
+  if (mode === "all") return 'import "@leavepulse/ui/icons-all"\n'
+  const lucide = JSON.parse(readFileSync(createRequire(import.meta.url).resolve("@iconify-json/lucide/icons.json"), "utf8"))
+  const names = Array.isArray(mode) ? mode.map((n) => n.replace(/^lucide:/, "")) : namesInDirs([srcDir])
+  return `import { registerIconCollection } from "@leavepulse/ui"\nregisterIconCollection(${JSON.stringify(subset(lucide, names))})\n`
 }
 
 export default defineNuxtModule<LeavepulseUiOptions>({
   meta: { name: "@leavepulse/ui", configKey: "leavepulseUi" },
-  defaults: { theme: true },
-  setup(options: LeavepulseUiOptions, nuxt: { options: { runtimeConfig: { public: Record<string, unknown> } } }) {
+  defaults: { theme: true, link: true, icons: "scan" },
+  setup(
+    options: LeavepulseUiOptions,
+    nuxt: {
+      options: {
+        runtimeConfig: { public: Record<string, unknown> }
+        alias: Record<string, string>
+        srcDir: string
+      }
+      hook: (
+        name: "prepare:types",
+        fn: (options: { references: { path: string }[] }) => void,
+      ) => void
+    },
+  ) {
+    const resolver = createResolver(import.meta.url)
+    const skip = new Set(options.exclude ?? [])
     for (const name of COMPONENT_NAMES) {
-      // Point each component at its own dist chunk rather than the barrel
-      // ("@leavepulse/ui"). Importing through the barrel makes the bundler pull
-      // the whole kit; a per-component path lets it ship only the components an
-      // app actually uses (plus their real deps — e.g. @vue-flow only when a
-      // canvas component is used).
+      if (skip.has(name)) continue
+      // Each component's own dist chunk rather than the barrel, so the app
+      // ships only the components it uses (and their real deps).
       addComponent({
         name,
         export: "default",
@@ -40,18 +83,45 @@ export default defineNuxtModule<LeavepulseUiOptions>({
       })
     }
 
+    const icons = iconsPlugin(options.icons, nuxt.options.srcDir)
+    if (icons) {
+      addPluginTemplate({
+        filename: "leavepulse-ui-icons.mjs",
+        mode: "all",
+        getContents: () => `${icons}import { defineNuxtPlugin } from "#app"\nexport default defineNuxtPlugin(() => {})\n`,
+      })
+    }
+
+    if (options.link !== false) {
+      addPlugin({ src: resolver.resolve("./runtime/config.plugin"), mode: "all" })
+    }
+
     if (options.theme === false) return
 
-    // The plugin reads its options from runtimeConfig rather than closing over
-    // them, so they survive the build into the server bundle.
+    const themes = addTemplate({
+      filename: "leavepulse-ui-themes.mjs",
+      getContents: () =>
+        options.themes
+          ? `export { default } from ${JSON.stringify(options.themes)}\n`
+          : "export default []\n",
+    })
+    nuxt.options.alias["#lp-ui-themes"] = themes.dst
+    const themeTypes = addTemplate({
+      filename: "types/leavepulse-ui-themes.d.ts",
+      getContents: () =>
+        'declare module "#lp-ui-themes" {\n  const themes: import("@leavepulse/ui").TokenSet[]\n  export default themes\n}\n',
+    })
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: themeTypes.dst })
+    })
+
+    // Read from runtimeConfig rather than closed over, so the options survive
+    // the build into the server bundle.
     nuxt.options.runtimeConfig.public.leavepulseUi = {
-      ...(nuxt.options.runtimeConfig.public.leavepulseUi ?? {}),
+      ...((nuxt.options.runtimeConfig.public.leavepulseUi as Record<string, unknown> | undefined) ?? {}),
       defaultTheme: options.defaultTheme,
     }
 
-    addPlugin({
-      src: createResolver(import.meta.url).resolve("./runtime/theme.plugin"),
-      mode: "all",
-    })
+    addPlugin({ src: resolver.resolve("./runtime/theme.plugin"), mode: "all" })
   },
 })

package/src/runtime/config.plugin.ts

@@ -0,0 +1,14 @@
+/*
+ * Nuxt runtime plugin: provides the kit configuration app-wide, with NuxtLink
+ * as the link component, so navigation pieces (LpLink, LpButton with `to`,
+ * LpBreadcrumbs, LpSidebar items) navigate client-side without an `as` on
+ * every call site. Registered by the kit's Nuxt module.
+ */
+import { LP_CONFIG, type LpConfig } from "@leavepulse/ui"
+import { NuxtLink } from "#components"
+import { defineNuxtPlugin } from "#imports"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config: LpConfig = { linkComponent: NuxtLink }
+  nuxtApp.vueApp.provide(LP_CONFIG, config)
+})

package/src/runtime/theme.plugin.ts

@@ -1,54 +1,74 @@
 /*
- * Nuxt runtime plugin — paints the user's theme during SSR, so a reload shows
+ * Nuxt runtime plugin: paints the user's theme during SSR, so a reload shows
  * the right colours in the first frame instead of flashing the default.
  *
- * Registered automatically by the kit's Nuxt module; a consuming app needs no
- * plugin of its own. Opt out (or point it at custom themes) via nuxt.config:
+ * Registered automatically by the kit's Nuxt module. Options (nuxt.config):
  *
  *   leavepulseUi: { theme: false }              // no theme handling at all
- *   leavepulseUi: { defaultTheme: "Nord" }      // different fallback preset
+ *   leavepulseUi: { defaultTheme: "Nord" }      // different fallback theme
+ *   leavepulseUi: { themes: "~/themes" }        // module exporting the app's own themes
  *
- * How it avoids the flash: the kit mirrors the chosen theme's NAME into the
- * `lp-theme` cookie (see cacheTheme), which unlike localStorage travels with the
- * request. Here the server reads it, resolves it against the built-in presets,
- * and inlines that theme's CSS variables into <head>. On the client
- * bootstrapTheme() still runs before mount, so a localStorage choice — which
- * holds the full token values, including themes the server cannot name — keeps
- * winning.
+ * The kit mirrors the chosen theme's NAME into the `lp-theme` cookie, which
+ * unlike localStorage travels with the request. The server resolves it against
+ * the built-in presets plus the app's themes and inlines that theme's variables
+ * into <head>. On the client useTheme().init() still restores localStorage,
+ * which holds the full token values and keeps winning.
  */
 // Through the barrel, not "../theme/…": this file is compiled by the consuming
 // app, where the barrel resolves to the same dist instance the components use.
-// A relative path would load a second copy of the theme singleton.
 import {
-  bootstrapTheme,
-  leavepulse,
+  dark,
   presets,
   THEME_COOKIE,
   themeFromCookie,
   themeToCssRule,
+  useTheme,
   type TokenSet,
 } from "@leavepulse/ui"
-import { defineNuxtPlugin, useCookie, useHead, useRuntimeConfig } from "#imports"
+import appThemes from "#lp-ui-themes"
+import {
+  defineNuxtPlugin,
+  useCookie,
+  useHead,
+  useRequestEvent,
+  useRequestHeaders,
+  useRuntimeConfig,
+} from "#imports"
+
+const HINT = "sec-ch-prefers-color-scheme"
 
 export default defineNuxtPlugin(() => {
   const options = (useRuntimeConfig().public.leavepulseUi ?? {}) as {
     defaultTheme?: string
   }
 
-  const themes = Object.values(presets) as TokenSet[]
-  const fallback =
-    themes.find((theme) => theme.name === options.defaultTheme) ?? leavepulse
+  const themes = [...(appThemes as TokenSet[]), ...(Object.values(presets) as TokenSet[])]
+  const fallback = themes.find((theme) => theme.name === options.defaultTheme) ?? dark
 
-  const cookie = useCookie<string | null>(THEME_COOKIE, { readonly: true })
-  const initial = themeFromCookie(cookie.value, themes) ?? fallback
+  // Raw value: themeFromCookie decodes safely itself, a throwing decode here
+  // would turn a malformed cookie into a 500 on every request.
+  const cookie = useCookie<string | null>(THEME_COOKIE, {
+    readonly: true,
+    decode: (value: string) => value,
+  })
+  let prefersDark: boolean | undefined
+  if (import.meta.server) {
+    const hint = useRequestHeaders([HINT])[HINT]
+    if (hint) prefersDark = hint.includes("dark")
+    // Ask the browser for the OS colour scheme from the next request on, so a
+    // visitor following the OS gets the right theme server-side as well.
+    useRequestEvent()?.node.res.setHeader("Accept-CH", "Sec-CH-Prefers-Color-Scheme")
+  }
+  const initial = themeFromCookie(cookie.value, themes, { prefersDark }) ?? fallback
 
   useHead({
+    htmlAttrs: { "data-theme-mode": initial.mode },
     style: [{ id: "lp-ui-theme", innerHTML: themeToCssRule(initial) }],
   })
 
-  // `initial` as the fallback (not the preset default) so a visitor who only
-  // has the cookie keeps the theme the server just painted.
+  // `initial` as the fallback, so a visitor who only has the cookie keeps the
+  // theme the server just painted and the shared state starts from it.
   if (import.meta.client) {
-    bootstrapTheme(initial)
+    useTheme().init(initial)
   }
 })

package/src/theme/backdrop.ts

@@ -49,3 +49,72 @@ export function detectBackdropFilter(
   root.toggleAttribute(NO_BACKDROP_ATTR, !usable)
   return usable
 }
+
+/*
+ * Glass without backdrop-filter. Where the engine cannot blur what lies under
+ * a panel (the flag above), it can still blur an ordinary element, so a panel
+ * can be frosted by painting a blurred copy of what is under it, as long as
+ * that is known. In an app that paints its own wallpaper (a launcher, a shell)
+ * it is: the consumer hands the wallpaper over as a CSS `background` value,
+ * and every `.lp-glass-overlay` draws it, blurred and aligned to the viewport,
+ * beneath its tint. Live content under the panel stays sharp; the wallpaper,
+ * which is most of what glass shows, reads as frosted.
+ *
+ * The copy is placed by the panel's position on screen, which overlays animate
+ * and drawers drag, so while any glass panel is mounted its offset is kept in
+ * CSS variables (`--lp-gx`, `--lp-gy`) once a frame. Nothing runs where the
+ * real blur works or no backdrop was given.
+ */
+export const GLASS_BACKDROP_ATTR = "data-lp-glass-backdrop"
+
+let tracking = 0
+let observer: MutationObserver | undefined
+
+function trackPanels() {
+  const panels = document.querySelectorAll<HTMLElement>(".lp-glass-overlay")
+  for (const panel of panels) {
+    const rect = panel.getBoundingClientRect()
+    const x = `${Math.round(rect.left)}px`
+    const y = `${Math.round(rect.top)}px`
+    if (panel.style.getPropertyValue("--lp-gx") !== x) panel.style.setProperty("--lp-gx", x)
+    if (panel.style.getPropertyValue("--lp-gy") !== y) panel.style.setProperty("--lp-gy", y)
+  }
+  tracking = panels.length ? requestAnimationFrame(trackPanels) : 0
+}
+
+function startTracking() {
+  if (!tracking && document.querySelector(".lp-glass-overlay")) tracking = requestAnimationFrame(trackPanels)
+}
+
+/**
+ * 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 function setGlassBackdrop(
+  background: string | null,
+  options: { filter?: string; root?: HTMLElement } = {},
+): void {
+  if (typeof document === "undefined") return
+  const root = options.root ?? document.documentElement
+  if (!background) {
+    root.removeAttribute(GLASS_BACKDROP_ATTR)
+    root.style.removeProperty("--lp-glass-backdrop")
+    root.style.removeProperty("--lp-glass-backdrop-filter")
+    observer?.disconnect()
+    observer = undefined
+    return
+  }
+  root.setAttribute(GLASS_BACKDROP_ATTR, "")
+  root.style.setProperty("--lp-glass-backdrop", background)
+  if (options.filter) root.style.setProperty("--lp-glass-backdrop-filter", options.filter)
+  else root.style.removeProperty("--lp-glass-backdrop-filter")
+  if (!root.hasAttribute(NO_BACKDROP_ATTR) || typeof MutationObserver === "undefined") return
+  if (!observer) {
+    observer = new MutationObserver(startTracking)
+    observer.observe(document.body, { childList: true, subtree: true })
+  }
+  startTracking()
+}

package/src/theme/presets.ts

@@ -1,4 +1,4 @@
-import type { SurfaceTokens, TokenSet } from "./tokens"
+import type { TokenSet } from "./tokens"
 
 /*
  * Built-in theme presets — plain TokenSet objects (JSON). These ARE the themes;
@@ -14,13 +14,12 @@ const interFont = {
 }
 
 /*
- * NOTE on naming: the exported CONST names are frozen for compatibility (apps
- * import `dark` / `leavepulse` directly), but the display `name` changed —
- * `leavepulse` is now the one called "Dark" (it is the product's dark theme),
- * and this near-black neutral became "Onyx" to free that label up.
+ * The kit's dark theme, a near-black neutral. It was displayed as "Onyx" while
+ * the LeavePulse site theme held the "Dark" label; with that theme gone the
+ * label is back here.
  */
 export const dark: TokenSet = {
-  name: "Onyx",
+  name: "Dark",
   mode: "dark",
   colors: {
     surface: "#080b0d",
@@ -120,63 +119,6 @@ export const lime: TokenSet = {
   },
 }
 
-/*
- * Glass skin — frosted panels with backdrop blur, a faint top-down highlight
- * overlay, a layered drop shadow and an inset highlight line. Opt a theme into
- * it by setting its `surface` axis to this (the LeavePulse site uses it).
- */
-const glassSurface: SurfaceTokens = {
-  borderWidth: "1px",
-  panelBlur: "10px",
-  panelSaturate: "120%",
-  panelOverlay:
-    "linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01))",
-  panelShadow: "0 20px 60px rgba(0, 0, 0, 0.35)",
-  panelInset: "inset 0 1px 0 rgba(255, 255, 255, 0.08)",
-}
-
-/*
- * LeavePulse site theme — the colours the website shipped before the kit
- * migration (deep navy surfaces, cyan brand, teal accent), with the glass skin.
- * Distinct from `dark` (which is a near-black neutral) so the site keeps its
- * look when it switches its CSS-var dictionary over to the kit.
- */
-export const leavepulse: TokenSet = {
-  name: "Dark",
-  mode: "dark",
-  colors: {
-    surface: "#020618",
-    surfaceRaised: "#0b1222",
-    surfaceSoft: "rgba(11, 18, 34, 0.7)",
-    ink: "#f3f6ff",
-    inkInverse: "#0b1222",
-    muted: "#94a3bf",
-    mutedStrong: "#cad5e2",
-    brand: "#00bcff",
-    brandHover: "#19c3ff",
-    brandSoft: "rgba(0, 188, 255, 0.2)",
-    action: "#44c2ad",
-    actionHover: "#56d3be",
-    actionSoft: "rgba(68, 194, 173, 0.14)",
-    accent: "#d36a2c",
-    accentHover: "#da824e",
-    accentSoft: "rgba(211, 106, 44, 0.14)",
-    danger: "#f87171",
-    dangerHover: "#fca5a5",
-    dangerSoft: "rgba(248, 113, 113, 0.14)",
-    line: "#1c2740",
-    lineStrong: "rgba(255, 255, 255, 0.15)",
-    ring: "rgba(0, 188, 255, 0.35)",
-  },
-  shape: { ...sharedShape, radiusControl: 12 },
-  density: { ...sharedDensity },
-  font: {
-    sans: '"Inter", "IBM Plex Sans", "Segoe UI", sans-serif',
-    mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
-  },
-  surface: glassSurface,
-}
-
 export const rose: TokenSet = {
   name: "Rose",
   mode: "dark",
@@ -305,5 +247,5 @@ export const nord: TokenSet = {
   font: { ...interFont },
 }
 
-export const presets = { dark, light, lime, leavepulse, rose, amber, violet, nord } as const
+export const presets = { dark, light, lime, rose, amber, violet, nord } as const
 export type PresetName = keyof typeof presets