@leavepulse/ui 0.43.4 → 0.44.0

package/src/components/LpTableOfContents.vue

@@ -11,6 +11,7 @@
  */
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { usePillTransition } from "../composables/usePillTransition"
 
 export interface TocLink {
@@ -23,14 +24,29 @@ export interface TocLink {
 const props = withDefaults(
   defineProps<{
     links: TocLink[]
-    /** Heading shown above the list. */
+    /** Heading shown above the list (defaults to the `title` label). */
     title?: string
     /** px offset from the top used as the scroll-spy trigger line. */
     offset?: number
+    labels?: Partial<{ title: string }>
   }>(),
-  { title: "On this page", offset: 96 },
+  { offset: 96 },
 )
 
+const text = useLabels("toc", { title: "On this page" }, () => props.labels)
+const heading = computed(() => props.title ?? text.value.title)
+
+// Every level of the tree as one ordered list; depth drives the indent, so
+// links nested deeper than two levels render instead of vanishing.
+interface TocRow {
+  link: TocLink
+  depth: number
+}
+function flatten(links: TocLink[], depth = 0): TocRow[] {
+  return links.flatMap((link) => [{ link, depth }, ...flatten(link.children ?? [], depth + 1)])
+}
+const rows = computed(() => flatten(props.links))
+
 const activeId = ref<string>("")
 // The id the pointer is hovering (null when not hovering). The indicator bar
 // follows the hovered link, falling back to the scroll-spy active one — same
@@ -97,13 +113,28 @@ function unfreeze() {
   safetyTimer = null
 }
 
-function suppressSpyUntilScrollEnds() {
+/*
+ * The element that actually scrolls to the heading. Inside an app shell that is
+ * a scroll region, not the window, and watching window.scrollY there saw no
+ * movement and unfroze on the first frame.
+ */
+function scrollerOf(el: HTMLElement): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node)
+    if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node
+  }
+  return null
+}
+
+function suppressSpyUntilScrollEnds(target: HTMLElement) {
   spySuppressed = true
   if (rafId != null) cancelAnimationFrame(rafId)
   if (safetyTimer != null) clearTimeout(safetyTimer)
-  let last = window.scrollY
+  const scroller = scrollerOf(target)
+  const position = () => (scroller ? scroller.scrollTop : window.scrollY)
+  let last = position()
   const tick = () => {
-    const y = window.scrollY
+    const y = position()
     if (y === last) {
       unfreeze() // position held for a frame → scrolling has come to rest
       return
@@ -122,9 +153,11 @@ function onClick(id: string, ev: MouseEvent) {
   if (!el) return
   ev.preventDefault()
   activeId.value = id // mark immediately so the bar jumps to the clicked item
-  suppressSpyUntilScrollEnds()
+  suppressSpyUntilScrollEnds(el)
   el.scrollIntoView({ behavior: "smooth", block: "start" })
-  history.replaceState(null, "", `#${id}`)
+  // Keep the router's own state: replacing it with null broke scroll
+  // restoration and back/forward bookkeeping in vue-router apps.
+  history.replaceState(history.state, "", `#${id}`)
 }
 
 onMounted(setup)
@@ -136,16 +169,21 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <nav :aria-label="title" class="text-sm">
+  <nav :aria-label="heading" class="text-sm">
     <p class="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
-      {{ title }}
+      {{ heading }}
     </p>
     <ul class="relative flex flex-col gap-0.5 border-l border-line" @mouseleave="hoveredId = null">
-      <li v-for="link in links" :key="link.id" class="flex flex-col">
+      <li v-for="{ link, depth } in rows" :key="link.id" class="flex flex-col">
         <a
           :href="`#${link.id}`"
-          class="relative -ml-px block py-1 pl-3.5 leading-snug transition-colors duration-[var(--duration-fast)]"
-          :class="litId === link.id ? 'text-brand' : 'text-muted hover:text-ink'"
+          class="relative -ml-px block py-1 leading-snug transition-colors duration-[var(--duration-fast)]"
+          :class="[
+            depth > 0 ? 'text-[13px]' : '',
+            litId === link.id ? 'text-brand' : 'text-muted hover:text-ink',
+          ]"
+          :style="{ paddingLeft: `${0.875 + depth * 0.875}rem` }"
+          :aria-current="activeId === link.id ? 'location' : undefined"
           @click="onClick(link.id, $event)"
           @mouseenter="hoveredId = link.id"
         >
@@ -157,26 +195,6 @@ onBeforeUnmount(() => {
           />
           {{ link.text }}
         </a>
-
-        <ul v-if="link.children?.length" class="flex flex-col gap-0.5">
-          <li v-for="child in link.children" :key="child.id">
-            <a
-              :href="`#${child.id}`"
-              class="relative -ml-px block py-1 pl-7 text-[13px] leading-snug transition-colors duration-[var(--duration-fast)]"
-              :class="litId === child.id ? 'text-brand' : 'text-muted hover:text-ink'"
-              @click="onClick(child.id, $event)"
-              @mouseenter="hoveredId = child.id"
-            >
-              <Motion
-                v-if="litId === child.id"
-                :layout-id="pillId"
-                :transition="pillTransition"
-                class="absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
-              />
-              {{ child.text }}
-            </a>
-          </li>
-        </ul>
       </li>
     </ul>
   </nav>

package/src/components/LpTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Motion, useReducedMotion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
-import { computed, ref, useId } from "vue"
+import { computed, ref, useId, watch } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 
@@ -12,9 +12,11 @@ export interface TabItem {
   icon?: string
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     modelValue?: string
+    /** Initially active tab when `v-model` is not bound (default: the first). */
+    defaultValue?: string
     items: TabItem[]
     /**
      * "contained" (default) wraps the triggers in a bordered, filled bar.
@@ -31,7 +33,22 @@ withDefaults(
   }>(),
   { variant: "contained", accent: false, block: false },
 )
-defineEmits<{ (e: "update:modelValue", value: string): void }>()
+const emit = defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+// Held here rather than left to reka, so the active marker follows the active
+// tab in uncontrolled use too: reading the prop alone left it unmarked.
+const current = ref(props.modelValue ?? props.defaultValue ?? props.items[0]?.value)
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value !== undefined) current.value = value
+  },
+)
+
+function select(value: string) {
+  if (props.modelValue === undefined) current.value = value
+  emit("update:modelValue", value)
+}
 
 // The pill sits under the hovered tab, falling back to the active one
 // (UAProject header behaviour). motion-v shared layoutId animates the move.
@@ -80,8 +97,8 @@ function releaseFocusAfterPointer(event: PointerEvent) {
 
 <template>
   <TabsRoot
-    :model-value="modelValue"
-    @update:model-value="(v) => $emit('update:modelValue', v as string)"
+    :model-value="current"
+    @update:model-value="(v) => select(v as string)"
   >
     <TabsList
       class="gap-1"
@@ -109,7 +126,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
         <!-- Active marker: a bottom bar in "underline", a filled pill otherwise.
              Both slide between tabs via the shared motion layoutId. -->
         <Motion
-          v-if="pillUnder(item.value, modelValue)"
+          v-if="pillUnder(item.value, current)"
           :layout-id="pillId"
           :transition="pillTransition"
           :class="variant === 'underline'

package/src/components/LpTextarea.vue

@@ -1,5 +1,11 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { mergeClass } from "../composables/useMergedClass"
 import LpFormField from "./LpFormField.vue"
 
 const props = defineProps<{
@@ -21,25 +27,57 @@ const props = defineProps<{
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
+
+// class/style lay out the field when there is one, and style the <textarea>
+// when it stands alone; every other attr (name, maxlength, autofocus, @blur…)
+// belongs to the <textarea> itself.
+const attrs = useAttrs()
+const textareaAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs
+  return rest
+})
+
+const field = useFieldControl(() => ({
+  wrapped: hasField.value,
+  hasMessage: !!props.error || !!props.hint,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid || !!props.error,
+  required: props.required,
+  disabled: props.disabled,
+}))
+
+const textareaClass = computed(() =>
+  mergeClass(
+    "w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
+    field.value.invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line",
+    hasField.value ? "" : (attrs.class as string),
+  ),
+)
 </script>
 
 <template>
   <component
     :is="hasField ? LpFormField : 'div'"
+    :id="hasField ? field.id : undefined"
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
     :required="hasField ? required : undefined"
-    :class="hasField ? undefined : 'contents'"
+    :class="hasField ? attrs.class : 'contents'"
+    :style="hasField ? attrs.style : undefined"
   >
     <textarea
+      v-bind="textareaAttrs"
+      :id="field.id"
       :value="modelValue"
       :placeholder="placeholder"
       :rows="rows ?? 4"
-      :disabled="disabled"
-      :required="required || undefined"
-      class="w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
-      :class="(invalid || error) ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line'"
+      :disabled="field.disabled"
+      :required="field.required || undefined"
+      :aria-invalid="field.invalid || undefined"
+      :aria-describedby="field.describedBy"
+      :class="textareaClass"
+      :style="hasField ? undefined : (attrs.style as never)"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
     />
   </component>

package/src/components/LpThemeProvider.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Applies a theme to a subtree instead of the whole page: a dark sidebar in a
+ * light app, a live preview of a theme being edited, an embedded widget that
+ * keeps its own look. Every token is declared on this element, derived ones
+ * included, so kit components inside re-skin while the page around them keeps
+ * the global theme. Nothing is persisted; this is presentation only.
+ */
+import { computed, type Component } from "vue"
+import type { TokenSet } from "../theme/tokens"
+import { themeEntries } from "../theme/useTheme"
+import { useMergedAttrs } from "../composables/useMergedClass"
+
+const props = withDefaults(
+  defineProps<{
+    theme: TokenSet
+    /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
+    as?: string | Component
+  }>(),
+  { as: "div" },
+)
+
+// Paints its own surface and text so the scoped theme reads as one; a class
+// like `bg-transparent` overrides that.
+const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink")
+
+const style = computed(() => ({
+  ...Object.fromEntries(themeEntries(props.theme)),
+  colorScheme: props.theme.mode,
+}))
+</script>
+
+<template>
+  <component :is="as" :style="style" :data-theme-mode="theme.mode" :class="rootClass" v-bind="rest">
+    <slot />
+  </component>
+</template>

package/src/components/LpThemeSwitcher.vue

@@ -12,6 +12,7 @@
  * fetches; it just drives the theme engine.
  */
 import { computed, onMounted, ref } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { presets } from "../theme/presets"
 import type { TokenSet } from "../theme/tokens"
 import { useTheme } from "../theme/useTheme"
@@ -51,6 +52,13 @@ const props = withDefaults(
     transition?: boolean
     size?: "sm" | "md" | "lg"
     "aria-label"?: string
+    /**
+     * Offer a "System" entry in the menu that follows the OS colour scheme,
+     * switching between these two themes (names from `themes`, or TokenSets).
+     */
+    system?: { light: string | TokenSet; dark: string | TokenSet }
+    /** Text overrides. `trigger` may contain `{name}`. */
+    labels?: Partial<{ trigger: string; system: string }>
   }>(),
   {
     variant: "swatch",
@@ -66,6 +74,12 @@ const emit = defineEmits<{
 
 const theme = useTheme()
 
+const text = useLabels(
+  "themeSwitcher",
+  { trigger: "Theme: {name}. Click to switch, right-click to choose.", system: "System" },
+  () => props.labels,
+)
+
 const list = computed<TokenSet[]>(() =>
   props.themes && props.themes.length ? props.themes : Object.values(presets),
 )
@@ -75,9 +89,6 @@ const list = computed<TokenSet[]>(() =>
 const activeName = computed(
   () => props.modelValue ?? (theme.currentName.value || list.value[0]?.name || ""),
 )
-const active = computed<TokenSet | undefined>(
-  () => list.value.find((t) => t.name === activeName.value) ?? list.value[0],
-)
 
 // Apply the consumer's default on mount when nothing is cached yet. init()
 // hydrates from the cache first (a saved choice wins), so this only takes effect
@@ -140,18 +151,49 @@ function cycle(ev: MouseEvent) {
 // Right-click menu: every theme, the active one checked. A circular-reveal from
 // the (saved) click point isn't available here, so the menu picks reveal from
 // the trigger centre via applyWithTransition's default origin.
-const menu = computed<ContextMenuItemDef[]>(() =>
-  list.value.map((t) => ({
+function resolve(t: string | TokenSet): TokenSet | undefined {
+  return typeof t === "string" ? list.value.find((x) => x.name === t) : t
+}
+
+const systemPair = computed(() => {
+  if (!props.system) return null
+  const light = resolve(props.system.light)
+  const dark = resolve(props.system.dark)
+  return light && dark ? { light, dark } : null
+})
+
+function followSystem() {
+  const pair = systemPair.value
+  if (!pair) return
+  theme.setSystem(pair)
+  const next = theme.current.value as TokenSet | null
+  if (next) {
+    emit("update:modelValue", next.name)
+    emit("change", next)
+  }
+}
+
+const menu = computed<ContextMenuItemDef[]>(() => {
+  const following = theme.system.value
+  const items: ContextMenuItemDef[] = list.value.map((t) => ({
     label: t.name,
     icon:
-      t.name === activeName.value
+      !following && t.name === activeName.value
         ? "lucide:check"
         : t.mode === "dark"
           ? "lucide:moon"
           : "lucide:sun",
     onSelect: () => applyTheme(t),
-  })),
-)
+  }))
+  if (systemPair.value) {
+    items.unshift({
+      label: text.value.system,
+      icon: following ? "lucide:check" : "lucide:monitor",
+      onSelect: followSystem,
+    })
+  }
+  return items
+})
 
 /*
  * The theme the SERVER rendered is not necessarily the one the client restores:
@@ -176,7 +218,7 @@ const labelName = computed(() =>
 )
 
 const triggerLabel = computed(
-  () => props["aria-label"] ?? `Theme: ${labelName.value}. Click to switch, right-click to choose.`,
+  () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value),
 )
 </script>
 
@@ -197,23 +239,28 @@ const triggerLabel = computed(
       "
       @click="cycle"
     >
-      <!-- swatch: brand over surface, hinting the theme at a glance -->
+      <!-- swatch: brand over surface, read from the applied variables rather
+           than the theme object, so the server's render (painted from the
+           cookie) and the client's agree without a hydration patch -->
       <span
         v-if="variant !== 'icon'"
         class="grid shrink-0 place-items-center rounded-control border border-line/60"
         :class="SIZES[size]"
-        :style="{ background: active?.colors.surface }"
+        style="background: var(--color-surface)"
       >
-        <span
-          class="size-3 rounded-full"
-          :style="{ background: active?.colors.brand }"
-        />
+        <span class="size-3 rounded-full" style="background: var(--color-brand)" />
       </span>
-      <!-- icon: sun/moon by mode -->
+      <!-- icon: sun/moon by mode, chosen by CSS from the applied theme's mode -->
       <span v-else class="grid shrink-0 place-items-center" :class="SIZES[size]">
         <LpIcon
-          :name="active?.mode === 'dark' ? 'lucide:moon' : 'lucide:sun'"
+          name="lucide:moon"
+          :size="ICON_SIZE[size]"
+          class="in-data-[theme-mode=light]:hidden"
+        />
+        <LpIcon
+          name="lucide:sun"
           :size="ICON_SIZE[size]"
+          class="hidden in-data-[theme-mode=light]:block"
         />
       </span>
 

package/src/components/LpTilt.vue

@@ -31,12 +31,12 @@ const props = withDefaults(
   { max: 10, lift: 8, scale: 1.03, glare: false, perspective: 900 },
 )
 
-const tilt = useTilt({
+const tilt = useTilt(() => ({
   max: props.max,
   lift: props.lift,
   scale: props.scale,
   glare: props.glare,
-})
+}))
 
 const stageStyle = computed(() => ({ perspective: `${props.perspective}px` }))
 </script>

package/src/components/LpTimeField.vue

@@ -13,6 +13,7 @@
 import { Time } from "@internationalized/date"
 import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
 import { computed } from "vue"
+import { useFieldControl } from "../composables/useField"
 import LpIcon from "./LpIcon.vue"
 
 const props = withDefaults(
@@ -50,6 +51,12 @@ function onUpdate(next: unknown) {
   emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`)
 }
 
+const field = useFieldControl(() => ({
+  wrapped: false,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+
 const shellSize = {
   sm: "h-(--size-control-sm) text-xs",
   md: "h-(--size-control-md) text-sm",
@@ -64,16 +71,20 @@ const shellSize = {
     :hour-cycle="hourCycle"
     :locale="locale"
     granularity="minute"
-    :disabled="disabled"
+    :disabled="field.disabled"
+    :aria-invalid="field.invalid || undefined"
+    :aria-describedby="field.describedBy"
     class="flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
     :class="[
       shellSize[size],
-      invalid ? 'border-danger focus-within:ring-danger-soft' : 'border-line focus-within:border-brand',
+      field.invalid ? 'border-danger focus-within:ring-danger-soft' : 'border-line focus-within:border-brand',
     ]"
     @update:model-value="onUpdate"
   >
     <LpIcon v-if="icon" name="lucide:clock" :size="15" class="mr-1.5 shrink-0 text-muted" />
-    <template v-for="item in segments" :key="item.part">
+    <!-- Indexed keys: in 12-hour mode the segments hold two "literal" parts
+         (the ":" and the space before AM/PM), which a key by part repeats. -->
+    <template v-for="(item, i) in segments" :key="i">
       <TimeFieldInput v-if="item.part === 'literal'" :part="item.part" class="text-muted">
         {{ item.value }}
       </TimeFieldInput>