@leavepulse/ui 0.12.0

package/src/components/LpThemeSwitcher.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+/*
+ * Theme switcher. The kit convention for theming, so consumers stop hand-rolling
+ * their own. Default behaviour mirrors LeaveHosting: LEFT-click cycles to the
+ * next theme in the list (with the circular-reveal transition from the click
+ * point); RIGHT-click opens a menu to pick any theme directly. Fully data-driven
+ * and configurable — pass your own `themes`, bind `v-model` to the active name,
+ * and pick how the trigger looks.
+ *
+ * Applying + caching goes through useTheme() so every kit component re-skins live
+ * and the choice survives a reload (anti-flash bootstrap). The component never
+ * fetches; it just drives the theme engine.
+ */
+import { computed, onMounted } from "vue"
+import { presets } from "../theme/presets"
+import type { TokenSet } from "../theme/tokens"
+import { useTheme } from "../theme/useTheme"
+import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Active theme NAME (v-model). Falls back to the first theme. */
+    modelValue?: string
+    /** Themes to offer. Defaults to all built-in presets. */
+    themes?: TokenSet[]
+    /**
+     * Trigger style:
+     *  - "swatch" (default): a square showing the active theme's brand colour.
+     *  - "icon": a sun/moon icon following the active theme's mode.
+     *  - "pill": swatch + the theme name in a pill (always shows the label).
+     */
+    variant?: "swatch" | "icon" | "pill"
+    /** Show the active theme's name next to the trigger (forced on for "pill"). */
+    showLabel?: boolean
+    /**
+     * Default theme applied on mount when nothing is cached yet — the theme NAME
+     * (must be in `themes`) or a TokenSet. Lets a consuming app pick its default
+     * declaratively (<LpThemeSwitcher :default="'Violet'">) with no separate
+     * bootstrap plugin; a previously saved choice still wins over it.
+     */
+    default?: string | TokenSet
+    /** Animate theme changes with the circular reveal. On by default. */
+    transition?: boolean
+    size?: "sm" | "md" | "lg"
+    "aria-label"?: string
+  }>(),
+  {
+    variant: "swatch",
+    transition: true,
+    size: "md",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", name: string): void
+  (e: "change", theme: TokenSet): void
+}>()
+
+const theme = useTheme()
+
+const list = computed<TokenSet[]>(() =>
+  props.themes && props.themes.length ? props.themes : Object.values(presets),
+)
+// Active theme name: an explicit modelValue wins (controlled use); otherwise the
+// kit's self-managed `currentName` (so a consumer needs NO ref/bootstrap — the
+// kit remembers the theme like an i18n locale). Falls back to the first theme.
+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
+// on a first visit / cleared storage. Resolving a name goes through the offered
+// list, so <LpThemeSwitcher :default="'Violet'"> just works.
+onMounted(() => {
+  if (props.default == null) return
+  const fallback =
+    typeof props.default === "string"
+      ? list.value.find((t) => t.name === props.default)
+      : props.default
+  if (fallback) theme.init(fallback)
+})
+
+const SIZES = { sm: "size-7", md: "size-8", lg: "size-9" } as const
+const ICON_SIZE = { sm: 15, md: 16, lg: 18 } as const
+
+const wantsLabel = computed(() => props.showLabel || props.variant === "pill")
+
+// Apply a theme through the kit's self-managed setter (it persists + updates
+// the shared `current`), then notify. The reveal animates from the click point.
+function applyTheme(t: TokenSet, ev?: MouseEvent) {
+  if (props.transition) {
+    theme.setTheme(t, ev ? { x: ev.clientX, y: ev.clientY } : undefined)
+  } else {
+    theme.apply(t)
+  }
+  emit("update:modelValue", t.name)
+  emit("change", t)
+}
+
+// Left-click → next theme in the list (wraps), revealing from the click point.
+function cycle(ev: MouseEvent) {
+  const arr = list.value
+  if (!arr.length) return
+  const i = arr.findIndex((t) => t.name === activeName.value)
+  const next = arr[(i + 1) % arr.length]
+  if (next) applyTheme(next, ev)
+}
+
+// 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) => ({
+    label: t.name,
+    icon:
+      t.name === activeName.value
+        ? "lucide:check"
+        : t.mode === "dark"
+          ? "lucide:moon"
+          : "lucide:sun",
+    onSelect: () => applyTheme(t),
+  })),
+)
+
+const triggerLabel = computed(
+  () => props["aria-label"] ?? `Theme: ${activeName.value}. Click to switch, right-click to choose.`,
+)
+</script>
+
+<template>
+  <LpContextMenu :items="menu">
+    <button
+      type="button"
+      :aria-label="triggerLabel"
+      :title="triggerLabel"
+      class="inline-flex items-center gap-2 rounded-control border border-line bg-surface-raised px-1.5 text-ink outline-none transition-colors hover:border-line-strong focus-visible:ring-2 focus-visible:ring-ring"
+      :class="wantsLabel ? 'py-1 pr-2.5' : ''"
+      @click="cycle"
+    >
+      <!-- swatch: brand over surface, hinting the theme at a glance -->
+      <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 }"
+      >
+        <span
+          class="size-3 rounded-full"
+          :style="{ background: active?.colors.brand }"
+        />
+      </span>
+      <!-- icon: sun/moon by mode -->
+      <span v-else class="grid shrink-0 place-items-center" :class="SIZES[size]">
+        <LpIcon
+          :name="active?.mode === 'dark' ? 'lucide:moon' : 'lucide:sun'"
+          :size="ICON_SIZE[size]"
+        />
+      </span>
+
+      <span v-if="wantsLabel" class="text-sm font-medium">{{ activeName }}</span>
+    </button>
+  </LpContextMenu>
+</template>

package/src/components/LpToaster.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+/*
+ * Mount once near the app root. Renders the shared toast queue on the top
+ * z-layer (--z-toast) — above modals on purpose. Minimalist look: icon + text
+ * + a countdown progress bar. Colors come from tokens, so it follows the theme.
+ */
+import {
+  ToastDescription,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport,
+} from "reka-ui"
+import { onBeforeUnmount, ref, watch } from "vue"
+import { useToast, type ToastItem } from "../composables/useToast"
+import { CLOSE_ICON } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+
+const { queue, dismiss } = useToast()
+
+// Toasts that are playing their exit animation. We don't splice them out of the
+// queue immediately on close — that would unmount before `toast-out` can run.
+// Instead we flip `open` to false (reka sets data-state=closed → the keyframe
+// plays), then drop the toast for real once `animationend` fires. A safety
+// timer removes it even if the animationend event is missed (e.g. tab hidden).
+const closing = ref<Set<number>>(new Set())
+
+function beginClose(id: number) {
+  if (closing.value.has(id)) return
+  closing.value = new Set(closing.value).add(id)
+  // Fallback slightly longer than the 140ms toast-out duration.
+  window.setTimeout(() => finishClose(id), 220)
+}
+
+function finishClose(id: number) {
+  if (!closing.value.has(id)) return
+  const next = new Set(closing.value)
+  next.delete(id)
+  closing.value = next
+  dismiss(id)
+}
+
+function onAnimEnd(e: AnimationEvent, id: number) {
+  // Only the exit keyframe should trigger removal, not toast-in.
+  if (e.animationName === "toast-out") finishClose(id)
+}
+
+const variantIcon: Record<ToastItem["variant"], string> = {
+  info: "lucide:info",
+  success: "lucide:circle-check",
+  warning: "lucide:triangle-alert",
+  error: "lucide:circle-x",
+}
+
+// One token color drives icon + progress per variant.
+const variantColor: Record<ToastItem["variant"], string> = {
+  info: "text-brand",
+  success: "text-action",
+  warning: "text-accent",
+  error: "text-danger",
+}
+const variantBar: Record<ToastItem["variant"], string> = {
+  info: "bg-brand",
+  success: "bg-action",
+  warning: "bg-accent",
+  error: "bg-danger",
+}
+
+// reka pauses its own auto-dismiss timer while a toast is hovered/focused; mirror
+// that on the visual bar by carrying each toast's dismissAt forward over the
+// paused span, so the countdown matches when it actually closes.
+const pausedAt = new Map<number, number>()
+
+// Ticking clock so the progress bar animates smoothly. Runs only while there's
+// at least one auto-dismissing toast on screen — no idle interval otherwise.
+const now = ref(Date.now())
+let timer: ReturnType<typeof setInterval> | null = null
+
+function startTimer() {
+  if (timer === null) timer = setInterval(() => (now.value = Date.now()), 80)
+}
+function stopTimer() {
+  if (timer !== null) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+watch(
+  () => queue.length,
+  () => {
+    // Drop pause state for toasts that have left the queue (e.g. dismissed
+    // while hovered) so the map can't grow unbounded over a long session.
+    for (const id of pausedAt.keys()) {
+      if (!queue.some((t) => t.id === id)) pausedAt.delete(id)
+    }
+    // Same for the closing set — a toast evicted by the queue cap or clear()
+    // leaves without an animationend, so prune dead ids here.
+    if (closing.value.size) {
+      const live = new Set([...closing.value].filter((id) => queue.some((t) => t.id === id)))
+      if (live.size !== closing.value.size) closing.value = live
+    }
+    if (queue.some((t) => t.dismissAt !== null)) startTimer()
+    else stopTimer()
+  },
+  { immediate: true },
+)
+onBeforeUnmount(stopTimer)
+
+function onPause(t: ToastItem) {
+  pausedAt.set(t.id, now.value)
+}
+function onResume(t: ToastItem) {
+  const since = pausedAt.get(t.id)
+  if (since !== undefined && t.dismissAt !== null) {
+    t.dismissAt += Date.now() - since
+  }
+  pausedAt.delete(t.id)
+}
+
+function progress(t: ToastItem): number {
+  if (!t.dismissAt || t.duration <= 0) return 0
+  // While paused, freeze the bar at the moment hover started.
+  const at = pausedAt.get(t.id) ?? now.value
+  const remaining = t.dismissAt - at
+  return Math.max(0, Math.min(100, (remaining / t.duration) * 100))
+}
+
+async function runClick(t: ToastItem) {
+  if (t.onClick) {
+    await t.onClick()
+    beginClose(t.id)
+  }
+}
+
+async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[number]) {
+  await action.onClick()
+  beginClose(t.id)
+}
+</script>
+
+<template>
+  <ToastProvider>
+    <ToastRoot
+      v-for="t in queue"
+      :key="t.id"
+      :open="!closing.has(t.id)"
+      :duration="t.duration"
+      class="pointer-events-auto relative overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel data-[state=open]:animate-[toast-in_200ms_var(--ease-emphasized)] data-[state=closed]:animate-[toast-out_140ms_ease]"
+      :class="{ 'cursor-pointer': t.onClick }"
+      @update:open="(open) => !open && beginClose(t.id)"
+      @animationend="(e: AnimationEvent) => onAnimEnd(e, t.id)"
+      @pause="onPause(t)"
+      @resume="onResume(t)"
+      @click="runClick(t)"
+    >
+      <div class="flex items-start gap-3 p-3.5">
+        <LpIcon
+          :name="variantIcon[t.variant]"
+          :size="18"
+          class="mt-0.5 shrink-0"
+          :class="variantColor[t.variant]"
+        />
+        <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+          <ToastTitle v-if="t.title" class="text-sm font-semibold text-ink">
+            {{ t.title }}
+          </ToastTitle>
+          <ToastDescription class="break-words text-xs text-muted">
+            {{ t.message }}
+          </ToastDescription>
+
+          <div
+            v-if="t.actions?.length"
+            class="mt-2 flex flex-wrap gap-2"
+            @click.stop
+          >
+            <button
+              v-for="(action, i) in t.actions"
+              :key="i"
+              type="button"
+              class="rounded-control border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+              @click="runAction(t, action)"
+            >
+              {{ action.label }}
+            </button>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
+          aria-label="Dismiss"
+          @click.stop="beginClose(t.id)"
+        >
+          <LpIcon
+            name="lucide:x"
+            :size="16"
+            :class="CLOSE_ICON"
+          />
+        </button>
+      </div>
+
+      <!-- Countdown progress bar -->
+      <div
+        v-if="t.dismissAt"
+        class="absolute inset-x-0 bottom-0 h-0.5 origin-left transition-transform duration-100 ease-linear motion-reduce:transition-none"
+        :class="variantBar[t.variant]"
+        :style="{ transform: `scaleX(${progress(t) / 100})` }"
+      />
+    </ToastRoot>
+
+    <ToastViewport
+      class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
+    />
+  </ToastProvider>
+</template>

package/src/components/LpTooltip.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "reka-ui"
+import { PANEL_SURFACE, TOOLTIP_ANIM } from "./dropdown"
+
+defineProps<{ content?: string; sideOffset?: number }>()
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="200">
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent
+          :side-offset="sideOffset ?? 6"
+          :class="[PANEL_SURFACE, TOOLTIP_ANIM, 'z-(--z-tooltip) px-2.5 py-1.5 text-xs text-ink']"
+        >
+          <slot name="content">{{ content }}</slot>
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>