@leavepulse/ui 0.44.0 → 0.45.0

package/src/nuxt.ts

@@ -18,9 +18,17 @@
  *   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, addTemplate, 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. */
@@ -33,17 +41,28 @@ export interface LeavepulseUiOptions {
   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, link: true },
+  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",
@@ -64,6 +83,15 @@ 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" })
     }

package/src/runtime/theme.plugin.ts

@@ -17,7 +17,7 @@
 // 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.
 import {
-  leavepulse,
+  dark,
   presets,
   THEME_COOKIE,
   themeFromCookie,
@@ -43,7 +43,7 @@ export default defineNuxtPlugin(() => {
   }
 
   const themes = [...(appThemes as TokenSet[]), ...(Object.values(presets) as TokenSet[])]
-  const fallback = themes.find((theme) => theme.name === options.defaultTheme) ?? leavepulse
+  const fallback = themes.find((theme) => theme.name === options.defaultTheme) ?? dark
 
   // Raw value: themeFromCookie decodes safely itself, a throwing decode here
   // would turn a malformed cookie into a 500 on every request.

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

package/src/tokens/tokens.css

@@ -256,6 +256,19 @@
     transform: translateY(4px) scale(0.97);
   }
 }
+/* A chip joining a row of chips (tags): grows out of its own centre. */
+@keyframes chip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
+@keyframes chip-out {
+  to {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
 /* Option cascade: items slide in top→down on open. */
 @keyframes option-in {
   from {
@@ -551,6 +564,39 @@
   backdrop-filter: none;
 }
 
+/*
+ * The same glass where the blur does not composite but the app said what lies
+ * behind it (setGlassBackdrop): a blurred copy of that wallpaper, aligned to
+ * the viewport by the panel's offset, sits under a fill a little denser than
+ * the real glass, since only the wallpaper and not the page is softened.
+ */
+:root[data-lp-no-backdrop][data-lp-glass-backdrop] .lp-glass-overlay {
+  background: none;
+  isolation: isolate;
+  overflow: clip;
+}
+
+:root[data-lp-no-backdrop][data-lp-glass-backdrop] .lp-glass-overlay::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: calc(-1 * var(--lp-gx, 0px));
+  top: calc(-1 * var(--lp-gy, 0px));
+  width: 100vw;
+  height: 100vh;
+  /* The tint rides in the same layer: a negative z-index child paints over
+     its stacking context's own background, so a fill on the panel would sit
+     under the wallpaper and vanish. */
+  background:
+    linear-gradient(
+      color-mix(in srgb, var(--color-surface-raised) var(--glass-overlay-fallback-fill, 62%), transparent),
+      color-mix(in srgb, var(--color-surface-raised) var(--glass-overlay-fallback-fill, 62%), transparent)
+    ),
+    var(--lp-glass-backdrop);
+  filter: var(--lp-glass-backdrop-filter, blur(var(--glass-overlay-blur, 28px)) saturate(170%));
+  pointer-events: none;
+}
+
 /* The overlay gradient rides above the base fill but under the content. */
 .lp-skin-panel::before {
   content: "";