@leavepulse/ui 0.43.3 → 0.44.0

package/src/composables/useZoomPan.ts

@@ -1,4 +1,4 @@
-import { computed, ref, type ComputedRef, type CSSProperties, type Ref } from "vue"
+import { computed, ref, toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter, type Ref } from "vue"
 
 /*
  * useZoomPan — zoom + pan for a single element inside a viewport, the way an
@@ -15,8 +15,8 @@ import { computed, ref, type ComputedRef, type CSSProperties, type Ref } from "v
 export interface UseZoomPanOptions {
   /** Smallest allowed scale. Default 1 (fit — never shrink past the viewport). */
   min?: number
-  /** Largest allowed scale. Default 8. */
-  max?: number
+  /** Largest allowed scale. Default 8. Read on every change, so it may be a getter. */
+  max?: MaybeRefOrGetter<number | undefined>
   /** Multiplier per wheel notch. Default 1.15. */
   step?: number
   /** Scale that a double-click/tap toggles to, from `min`. Default 2. */
@@ -62,7 +62,7 @@ export interface UseZoomPan {
 
 export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
   const min = options.min ?? 1
-  const max = options.max ?? 8
+  const maxOf = () => toValue(options.max) ?? 8
   const step = options.step ?? 1.15
   const zoomedScale = options.zoomedScale ?? 2
 
@@ -104,7 +104,7 @@ export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
 
   /** Zoom to `next`, holding the viewport-relative point `px,py` in place. */
   function zoomAbout(next: number, px: number, py: number) {
-    const clamped = clamp(next, min, max)
+    const clamped = clamp(next, min, maxOf())
     if (clamped === scale.value) return
     // Where the cursor sits in content space before the change; solving for the
     // same content point after gives the translate that keeps it under the
@@ -215,7 +215,7 @@ export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
 
   function setView(view: { x: number; y: number; scale?: number }) {
     if (view.scale !== undefined) {
-      scale.value = Math.min(max, Math.max(min, view.scale))
+      scale.value = Math.min(maxOf(), Math.max(min, view.scale))
     }
     x.value = view.x
     y.value = view.y

package/src/index.ts

@@ -36,6 +36,7 @@ export { default as LpCalendar } from "./components/LpCalendar.vue"
 export { default as LpCard } from "./components/LpCard.vue"
 export { default as LpChart } from "./components/LpChart.vue"
 export type { ChartPointEvent } from "./components/LpChart.vue"
+export type { ChartText } from "./components/LpChart.vue"
 export {
   CHART_PALETTE,
   axisTicks,
@@ -43,9 +44,12 @@ export {
   niceScale,
 } from "./components/chart"
 export type { ChartAxis, ChartPoint, ChartSeries } from "./components/chart"
+export { chartSummary, markerIndex } from "./components/chart"
+export type { ChartMarker, ChartThreshold } from "./components/chart"
 export { default as LpCheckbox } from "./components/LpCheckbox.vue"
 export { default as LpCodeBlock } from "./components/LpCodeBlock.vue"
 export type { CodeLang } from "./components/codeHighlight"
+export { tokenizeLines } from "./components/codeHighlight"
 export { default as LpColorPicker } from "./components/LpColorPicker.vue"
 export type { ColorPickerLabels } from "./components/LpColorPicker.vue"
 export {
@@ -65,9 +69,13 @@ export {
 export type { ColorFormat, Hsv, Rgb } from "./components/color"
 export { default as LpCommandPalette } from "./components/LpCommandPalette.vue"
 export type { Command, PaletteLabels } from "./components/LpCommandPalette.vue"
-export { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./components/commandSearch"
+export { parseCommandQuery, rankCommandItems } from "./components/commandSearch"
 export type { CommandSearchTerms, SearchableCommand } from "./components/commandSearch"
 export { default as LpConfirmDialog } from "./components/LpConfirmDialog.vue"
+export type { ConfirmLabels } from "./components/LpConfirmDialog.vue"
+export { default as LpConfirmHost } from "./components/LpConfirmHost.vue"
+export { confirm, useConfirm } from "./components/confirm"
+export type { ConfirmOptions } from "./components/confirm"
 export { default as LpContextMenu } from "./components/LpContextMenu.vue"
 export type { ContextMenuItemDef } from "./components/LpContextMenu.vue"
 export { default as LpDatePicker } from "./components/LpDatePicker.vue"
@@ -80,6 +88,7 @@ export { default as LpDropzone } from "./components/LpDropzone.vue"
 export { default as LpEmptyState } from "./components/LpEmptyState.vue"
 export { default as LpFileTree } from "./components/LpFileTree.vue"
 export type { FileTreeSummary } from "./components/LpFileTree.vue"
+export type { FileTreeLabels } from "./components/LpFileTree.vue"
 export type { CheckState, FileNode, NodeStats } from "./components/fileTree"
 export {
   ancestorIds,
@@ -100,11 +109,13 @@ export { default as LpInfraNode } from "./components/LpInfraNode.vue"
 export type { InfraNodeData } from "./components/LpInfraNode.vue"
 export { default as LpInput } from "./components/LpInput.vue"
 export { default as LpLightbox } from "./components/LpLightbox.vue"
+export type { LightboxLabels } from "./components/LpLightbox.vue"
 export type { LightboxItem } from "./components/lightbox"
 export { fileNameOf } from "./components/lightbox"
 export { default as LpLink } from "./components/LpLink.vue"
 export { default as LpLogViewer } from "./components/LpLogViewer.vue"
 export type { LogLevel, LogLine } from "./components/LpLogViewer.vue"
+export type { LogViewerLabels } from "./components/LpLogViewer.vue"
 export { default as LpMediaGallery } from "./components/LpMediaGallery.vue"
 export { default as LpModal } from "./components/LpModal.vue"
 export { default as LpModalNav } from "./components/LpModalNav.vue"
@@ -121,11 +132,12 @@ export { default as LpPagination } from "./components/LpPagination.vue"
 export { default as LpPasswordInput } from "./components/LpPasswordInput.vue"
 export { default as LpPie } from "./components/LpPie.vue"
 export type { SliceEvent } from "./components/LpPie.vue"
+export type { PieText } from "./components/LpPie.vue"
 export { resolveSlices } from "./components/chart"
 export type { PieSlice, ResolvedSlice } from "./components/chart"
 export { default as LpPhoneInput } from "./components/LpPhoneInput.vue"
 export type { PhoneDetail } from "./components/LpPhoneInput.vue"
-export { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries"
+export { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries"
 export type { Country } from "./components/countries"
 export { default as LpPopover } from "./components/LpPopover.vue"
 export { default as LpProgress } from "./components/LpProgress.vue"
@@ -154,6 +166,8 @@ export type { Step } from "./components/LpStepper.vue"
 export { default as LpSwitch } from "./components/LpSwitch.vue"
 export { default as LpTable } from "./components/LpTable.vue"
 export type { SortState, TableColumn, TablePage, TableQuery } from "./components/LpTable.vue"
+export type { TableLabels } from "./components/LpTable.vue"
+export { compareValues } from "./components/tableSort"
 export { default as LpTableOfContents } from "./components/LpTableOfContents.vue"
 export type { TocLink } from "./components/LpTableOfContents.vue"
 export { default as LpTabs } from "./components/LpTabs.vue"
@@ -163,6 +177,7 @@ export { default as LpThemeSwitcher } from "./components/LpThemeSwitcher.vue"
 export { default as LpTilt } from "./components/LpTilt.vue"
 export { default as LpToaster } from "./components/LpToaster.vue"
 export { default as LpTooltip } from "./components/LpTooltip.vue"
+export { default as LpTooltipProvider } from "./components/LpTooltipProvider.vue"
 export { default as LpTopologyCanvas } from "./components/LpTopologyCanvas.vue"
 export type {
   CanvasViewport,
@@ -237,9 +252,16 @@ export {
   mergeShortcutGroups,
 } from "./composables/useHotkeys"
 export type { HotkeyBinding, HotkeyHelp, ShortcutEntry, ShortcutGroup } from "./composables/useHotkeys"
+export { matchesHotkey, useAppleKeyboard } from "./composables/useHotkeys"
+export { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth"
+export type { ModalLayer, ModalLayerOptions } from "./components/modalDepth"
 export { provideGlass, useGlass } from "./composables/useGlass"
+export { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig"
+export type { LabelScope, LpConfig } from "./composables/useLpConfig"
 export { useMergedClass, useMergedAttrs, mergeClass } from "./composables/useMergedClass"
-export { useInputFilter } from "./composables/useInputFilter"
+export { anchorPattern, stripDisallowed, useInputFilter } from "./composables/useInputFilter"
+export { LP_FIELD, fieldMessageId, provideField, useField, useFieldControl } from "./composables/useField"
+export type { FieldContext, FieldControlState } from "./composables/useField"
 export type { UseInputFilterOptions } from "./composables/useInputFilter"
 export { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing"
 export { useReveal } from "./composables/useReveal"
@@ -265,3 +287,16 @@ export type {
   ToastOptions,
   ToastVariant,
 } from "./composables/useToast"
+export type { ToastPromiseMessages } from "./composables/useToast"
+export {
+  cacheSystemThemes,
+  normalizeTheme,
+  prefersDarkScheme,
+  themeEntries,
+} from "./theme/useTheme"
+export type { SystemThemes, UseTheme } from "./theme/useTheme"
+export { layoutController } from "./layout/useLayout"
+export type { LayoutController } from "./layout/useLayout"
+export { default as LpThemeProvider } from "./components/LpThemeProvider.vue"
+export { isInternalHref, resolveLink } from "./components/link"
+export type { LinkTarget, ResolvedLink } from "./components/link"

package/src/layout/tree.ts

@@ -37,6 +37,13 @@ export type LayoutNode = Leaf | Split
 let uid = 0
 const nid = () => `lp-n${uid++}`
 
+// Keep fresh ids clear of ids restored from a snapshot.
+function claimId(id: string): string {
+  const n = /^lp-n(\d+)$/.exec(id)
+  if (n) uid = Math.max(uid, Number(n[1]) + 1)
+  return id
+}
+
 function leaf(block: string): Leaf {
   return { kind: "leaf", id: nid(), blocks: [block], active: 0, size: 1 }
 }
@@ -286,3 +293,26 @@ export function deserializeLayout(data: SerializedNode): Split {
   }
   return reactive(hydrate(data) as Split)
 }
+
+// ── history snapshots ────────────────────────────────────────
+// Like serializeLayout, but keeping node ids: restoring an undo step with
+// fresh ids remounted every block and threw away its local state.
+type SnapshotNode =
+  | { kind: "leaf"; id: string; blocks: string[]; active: number; size: number }
+  | { kind: "split"; id: string; dir: Dir; size: number; children: SnapshotNode[] }
+
+export function snapshotLayout(root: Split): string {
+  const strip = (n: LayoutNode): SnapshotNode =>
+    n.kind === "leaf"
+      ? { kind: "leaf", id: n.id, blocks: [...n.blocks], active: n.active, size: n.size }
+      : { kind: "split", id: n.id, dir: n.dir, size: n.size, children: n.children.map(strip) }
+  return JSON.stringify(strip(root))
+}
+
+export function restoreLayout(snapshot: string): Split {
+  const hydrate = (n: SnapshotNode): LayoutNode =>
+    n.kind === "leaf"
+      ? { kind: "leaf", id: claimId(n.id), blocks: [...n.blocks], active: n.active, size: n.size }
+      : { kind: "split", id: claimId(n.id), dir: n.dir, size: n.size, children: n.children.map(hydrate) }
+  return reactive(hydrate(JSON.parse(snapshot) as SnapshotNode) as Split)
+}

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,52 @@
  *
  * 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)
  */
-import { addComponent, addPlugin, createResolver, defineNuxtModule } from "@nuxt/kit"
+import { addComponent, addPlugin, addTemplate, createResolver, defineNuxtModule } from "@nuxt/kit"
 import { COMPONENT_NAMES } from "./component-names"
 
 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[]
 }
 
 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 },
+  setup(
+    options: LeavepulseUiOptions,
+    nuxt: {
+      options: {
+        runtimeConfig: { public: Record<string, unknown> }
+        alias: Record<string, 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 +64,36 @@ export default defineNuxtModule<LeavepulseUiOptions>({
       })
     }
 
+    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,
   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) ?? leavepulse
 
-  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)
   }
 })