@leavepulse/ui 0.29.5 → 0.30.1

package/src/components/LpDisclosure.vue

@@ -9,7 +9,7 @@
  * shown content isn't left below the fold.
  */
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
-import { type ComponentPublicInstance, nextTick, ref } from "vue"
+import { type ComponentPublicInstance, computed, getCurrentInstance, nextTick, ref } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 const props = withDefaults(
@@ -33,6 +33,21 @@ const props = withDefaults(
 
 const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
 
+/*
+ * Vue casts an absent Boolean prop to `false`, so `open` alone cannot say whether
+ * the caller controls this block. Passing that `false` straight to reka pins the
+ * block shut: it reads a controlled-closed collapsible, and the trigger stops
+ * doing anything at all — `defaultOpen` never gets a say. So control is decided
+ * by whether the attribute was actually handed to us, and the uncontrolled case
+ * passes `undefined`, which is what reka checks for.
+ */
+const instance = getCurrentInstance()
+const controlled = computed(() => {
+  const raw = instance?.vnode.props
+  return Boolean(raw && ("open" in raw || "onUpdate:open" in raw))
+})
+const rootOpen = computed(() => (controlled.value ? props.open : undefined))
+
 // reka's CollapsibleRoot renders a real element but exposes it as a component
 // instance, so reach through $el for the DOM node we scroll into view.
 const root = ref<ComponentPublicInstance | null>(null)
@@ -55,7 +70,7 @@ function onToggle(value: boolean) {
 <template>
   <CollapsibleRoot
     ref="root"
-    :open="open"
+    :open="rootOpen"
     :default-open="defaultOpen"
     class="overflow-hidden rounded-control border border-line bg-surface-soft"
     @update:open="onToggle"

package/src/components/LpLogViewer.vue

@@ -18,6 +18,7 @@ import {
   watch,
 } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
+import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
@@ -344,14 +345,10 @@ function fmtTime(time?: number | string): string {
 }
 
 // ── row context menu ─────────────────────────────────────────────────
-async function copy(text: string) {
-  try {
-    await navigator.clipboard?.writeText(text)
-  } catch {
-    // Clipboard can reject (insecure context / denied permission); swallow —
-    // the menu action is best-effort and shouldn't throw into the UI.
-  }
-}
+// A menu item closes the menu as it runs, leaving nothing on screen to say the
+// copy happened — so unlike LpCodeBlock's button, this one announces itself.
+const { copy: writeClipboard } = useClipboard()
+const copy = (text: string) => writeClipboard(text, { toast: "Copied to clipboard" })
 
 // The whole line as one copyable string: "time LEVEL [source] message".
 function lineText(line: LogLine): string {

package/src/components/LpSidebar.vue

@@ -56,6 +56,26 @@ const props = withDefaults(
      * flush, header-less look.
      */
     divider?: boolean
+    /**
+     * Where this nav lives.
+     *
+     * `rail` is the app shell's edge: one hairline on the inner side, square
+     * corners, the raised shell background.
+     *
+     * `panel` is a nav that sits inside a page next to the content it drives —
+     * a settings index, a table picker. It is a card: boxed on all four sides
+     * and rounded. Without it the rail's single border reads as a stray line
+     * down the middle of the page, and a consumer cannot cancel it with a class
+     * of their own.
+     */
+    variant?: "rail" | "panel"
+    /**
+     * Rail width. A plain `class` cannot set it — the component's own `w-60`
+     * wins, and the kit does not merge conflicting Tailwind classes — so the
+     * width is a prop. Any CSS length; a page-embedded nav usually wants to
+     * match the column it lives in.
+     */
+    width?: string
     /**
      * Which collapsible groups are folded away (v-model:collapsed). Leave it
      * unbound to let the sidebar fold long navs on its own — see
@@ -82,6 +102,7 @@ const props = withDefaults(
     responsive: false,
     mobileBreakpoint: "md",
     divider: true,
+    variant: "rail",
     autoCollapseAfter: 14,
   },
 )
@@ -170,6 +191,15 @@ const railClass = computed(() =>
   props.responsive ? RAIL_VISIBILITY[props.mobileBreakpoint] : "flex",
 )
 
+// Chrome is per variant, not per consumer: a `class` cannot cancel a border the
+// component already put on (the kit does not merge conflicting Tailwind classes),
+// so the two looks are spelled out here instead.
+const chromeClass = computed(() =>
+  props.variant === "panel"
+    ? "rounded-card border border-line bg-surface-raised"
+    : "border-r border-line bg-surface-raised",
+)
+
 // This component has a fragment root (the desktop <nav> + the mobile drawer), so
 // Vue can't auto-inherit a consumer-passed `class`. Take attrs over manually and
 // land them on the desktop rail (where a layout class like `shrink-0` belongs).
@@ -179,17 +209,23 @@ defineOptions({ inheritAttrs: false })
 <template>
   <!-- Desktop / always-on rail -->
   <nav
-    class="h-full w-60 flex-col gap-1 border-r border-line bg-surface-raised p-3"
-    :class="railClass"
+    class="h-full flex-col gap-1 p-3"
+    :class="[railClass, chromeClass, width ? '' : 'w-60']"
+    :style="width ? { width } : undefined"
     aria-label="Sidebar"
     v-bind="$attrs"
   >
-    <!-- Edge-to-edge (negative margins cancel the rail p-3) and h-16 to match the
-         app header, so its bottom hairline continues the header's border-b. -->
+    <!-- Rail: edge-to-edge (negative margins cancel the p-3) and h-16 to match
+         the app header, so its bottom hairline continues the header's border-b.
+         Panel: kept inside the padding — bleeding to the edge would cut across
+         the rounded corners. -->
     <div
       v-if="$slots.header"
-      class="-mx-3 -mt-3 mb-3 flex h-16 shrink-0 items-center px-3"
-      :class="divider ? 'border-b border-line' : ''"
+      class="mb-3 flex shrink-0 items-center"
+      :class="[
+        variant === 'panel' ? 'pb-3' : '-mx-3 -mt-3 h-16 px-3',
+        divider ? 'border-b border-line' : '',
+      ]"
     >
       <slot name="header" />
     </div>

package/src/components/actionBar.ts

@@ -0,0 +1,73 @@
+import { onScopeDispose, ref } from "vue"
+
+/*
+ * Shared stack for LpActionBar.
+ *
+ * Two bars are not a contrived case: a cookie notice sits on a first visit
+ * while the page underneath is a form, and the moment that form is edited the
+ * unsaved-changes bar wants the same strip of screen. Both are fixed to the
+ * bottom, both are translucent, so they landed on top of each other and the
+ * text of one showed through the other.
+ *
+ * Each open bar registers here and gets back a live index. The bar offsets
+ * itself by the heights of everything below it, so they stack upwards in the
+ * order they opened — the oldest at the bottom, the newest above it, which is
+ * also the order a person met them in.
+ *
+ * The registry is pinned to a global symbol for the same reason the toast queue
+ * is: a barrel import and a deep import can resolve to two module instances,
+ * and two registries would be no registry at all.
+ */
+
+export interface BarEntry {
+  id: number
+  /** Measured height in px, reported by the bar once it is on screen. */
+  height: number
+}
+
+const STATE_KEY = Symbol.for("@leavepulse/ui:action-bar-stack")
+type GlobalWithStack = typeof globalThis & {
+  [STATE_KEY]?: { bars: ReturnType<typeof ref<BarEntry[]>>; nextId: number }
+}
+const g = globalThis as GlobalWithStack
+const state = (g[STATE_KEY] ??= { bars: ref<BarEntry[]>([]), nextId: 0 })
+
+/** Gap between stacked bars, matching the padding the bar sits in. */
+export const STACK_GAP = 8
+
+/**
+ * Registers a bar for as long as the calling scope lives. `setHeight` reports
+ * the measured height; `offset()` returns how far up this bar should sit —
+ * the total height of every bar that opened before it.
+ */
+export function useBarStack() {
+  const id = state.nextId++
+  const bars = state.bars as ReturnType<typeof ref<BarEntry[]>>
+
+  function register() {
+    if (!bars.value!.some((b) => b.id === id)) {
+      bars.value = [...bars.value!, { id, height: 0 }]
+    }
+  }
+
+  function unregister() {
+    bars.value = bars.value!.filter((b) => b.id !== id)
+  }
+
+  function setHeight(height: number) {
+    bars.value = bars.value!.map((b) => (b.id === id ? { ...b, height } : b))
+  }
+
+  /** Sum of the heights below this one, plus a gap for each. */
+  function offset(): number {
+    const i = bars.value!.findIndex((b) => b.id === id)
+    if (i <= 0) return 0
+    return bars.value!
+      .slice(0, i)
+      .reduce((total, b) => total + b.height + STACK_GAP, 0)
+  }
+
+  onScopeDispose(unregister)
+
+  return { register, unregister, setHeight, offset, bars }
+}

package/src/components/color.ts

@@ -0,0 +1,257 @@
+/*
+ * Colour conversion for LpColorPicker — kept out of the component so the maths
+ * is testable on its own and reusable by anything that has to meet a colour
+ * halfway (a swatch list, a theme editor, a chart legend).
+ *
+ * The picker works in HSV, not HSL: a saturation/value rectangle under a hue
+ * rail is the shape everybody already knows from design tools, and it is the
+ * one where dragging in a straight line does what the eye expects. HSL's
+ * lightness axis collapses to white and black at both ends of the rectangle,
+ * which wastes half the area on colours nobody is aiming for.
+ *
+ * Alpha travels alongside as 0..1 and is dropped from the output when it is
+ * fully opaque — "#3b82f6" rather than "#3b82f6ff", since the short form is
+ * what a person pastes into a stylesheet.
+ */
+
+/** Hue 0..360, saturation/value 0..1, alpha 0..1. */
+export interface Hsv {
+  h: number
+  s: number
+  v: number
+  a: number
+}
+
+/** Channels 0..255, alpha 0..1. */
+export interface Rgb {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+/** The string shapes a caller can hand the picker, and ask back out of it. */
+export type ColorFormat = "hex" | "rgb" | "hsl"
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
+
+/** Wraps rather than clamps: hue is a circle, and 370° is 10°, not 360°. */
+export function normalizeHue(h: number): number {
+  const wrapped = h % 360
+  return wrapped < 0 ? wrapped + 360 : wrapped
+}
+
+export function clampHsv(c: Hsv): Hsv {
+  return {
+    h: normalizeHue(c.h),
+    s: clamp(c.s, 0, 1),
+    v: clamp(c.v, 0, 1),
+    a: clamp(c.a, 0, 1),
+  }
+}
+
+export function hsvToRgb({ h, s, v, a }: Hsv): Rgb {
+  const hue = normalizeHue(h) / 60
+  const c = v * s
+  const x = c * (1 - Math.abs((hue % 2) - 1))
+  const m = v - c
+  // Sextant of the colour wheel; each one puts c/x/0 in a different order.
+  const [r, g, b] = (
+    [
+      [c, x, 0],
+      [x, c, 0],
+      [0, c, x],
+      [0, x, c],
+      [x, 0, c],
+      [c, 0, x],
+    ] as const
+  )[Math.floor(hue) % 6]
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+    a: clamp(a, 0, 1),
+  }
+}
+
+export function rgbToHsv({ r, g, b, a }: Rgb): Hsv {
+  const rn = r / 255
+  const gn = g / 255
+  const bn = b / 255
+  const max = Math.max(rn, gn, bn)
+  const min = Math.min(rn, gn, bn)
+  const d = max - min
+
+  let h = 0
+  if (d !== 0) {
+    if (max === rn) h = 60 * (((gn - bn) / d) % 6)
+    else if (max === gn) h = 60 * ((bn - rn) / d + 2)
+    else h = 60 * ((rn - gn) / d + 4)
+  }
+
+  return {
+    h: normalizeHue(h),
+    s: max === 0 ? 0 : d / max,
+    v: max,
+    a: clamp(a, 0, 1),
+  }
+}
+
+const hex2 = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0")
+
+/** "#rrggbb", or "#rrggbbaa" when the colour is not fully opaque. */
+export function rgbToHex({ r, g, b, a }: Rgb): string {
+  const base = `#${hex2(r)}${hex2(g)}${hex2(b)}`
+  return a >= 1 ? base : base + hex2(a * 255)
+}
+
+/**
+ * Parses #rgb / #rgba / #rrggbb / #rrggbbaa, with or without the leading `#`.
+ * Returns null for anything it doesn't recognise, so a half-typed value in the
+ * hex field can be left alone instead of snapping the picker to black.
+ */
+export function parseHex(input: string): Rgb | null {
+  const s = input.trim().replace(/^#/, "")
+  if (!/^[0-9a-f]+$/i.test(s)) return null
+
+  // The 3/4-digit forms double each digit: "f80" is "ff8800".
+  const expand = (hex: string) =>
+    hex.length <= 4 ? hex.split("").map((ch) => ch + ch) : (hex.match(/.{2}/g) ?? [])
+
+  const parts = expand(s)
+  if (s.length !== 3 && s.length !== 4 && s.length !== 6 && s.length !== 8) return null
+
+  const [r, g, b, alpha] = parts.map((p) => parseInt(p, 16))
+  return { r, g, b, a: alpha === undefined ? 1 : alpha / 255 }
+}
+
+/**
+ * Parses a colour a person might paste: hex (3/4/6/8 digits, `#` optional),
+ * rgb()/rgba() and hsl()/hsla() in both the comma and the space/slash forms,
+ * percentages, hue in deg/turn/rad/grad, brackets optional, and a bare triple
+ * of numbers read as rgb. A round-trip through a caller's storage therefore
+ * comes back the colour it went in as, whatever shape it was stored in.
+ *
+ * Named colours ("rebeccapurple") and the newer spaces (lab, oklch, color())
+ * are out of scope: resolving those needs the browser's own parser, and a
+ * component that silently handled some and not others would be worse than one
+ * that is clear about what it takes.
+ */
+export function parseColor(input: string): Rgb | null {
+  const s = input.trim()
+  if (!s) return null
+  if (s.startsWith("#") || /^[0-9a-f]{3,8}$/i.test(s)) return parseHex(s)
+
+  // Brackets optional, and a bare triple of numbers is taken as rgb. What gets
+  // pasted into a colour field is rarely canonical CSS: it comes off a design
+  // tool as "rgb 59 130 246", out of a spreadsheet as "59, 130, 246", or with
+  // the closing bracket lost to a sloppy selection. All of them name a colour
+  // unambiguously, and refusing them would be pedantry at the user's expense.
+  const fn = s.match(/^(rgba?|hsla?)\s*\(?([^)]*)\)?$/i) ?? (
+    /^[\d.,\s/%]+$/.test(s) ? ([null, "rgb", s] as unknown as RegExpMatchArray) : null
+  )
+  if (!fn) return null
+
+  // Both the legacy comma form and the modern space form, with an optional
+  // "/ alpha" — the two shapes browsers themselves accept.
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean)
+  if (parts.length < 3) return null
+
+  // `deg` is the default unit and `turn`/`rad`/`grad` are the others CSS allows
+  // for a hue; parseFloat drops the suffix, so only turn/rad/grad need scaling.
+  const num = (t: string) => parseFloat(t)
+  const angle = (t: string) => {
+    const n = parseFloat(t)
+    if (/turn$/i.test(t)) return n * 360
+    if (/rad$/i.test(t)) return (n * 180) / Math.PI
+    if (/grad$/i.test(t)) return n * 0.9
+    return n
+  }
+  const alpha = parts[3] === undefined ? 1 : parts[3].endsWith("%") ? num(parts[3]) / 100 : num(parts[3])
+  if (Number.isNaN(alpha)) return null
+
+  if (fn[1].toLowerCase().startsWith("rgb")) {
+    const [r, g, b] = parts.slice(0, 3).map((t) => (t.endsWith("%") ? (num(t) / 100) * 255 : num(t)))
+    if ([r, g, b].some(Number.isNaN)) return null
+    return { r: Math.round(clamp(r, 0, 255)), g: Math.round(clamp(g, 0, 255)), b: Math.round(clamp(b, 0, 255)), a: clamp(alpha, 0, 1) }
+  }
+
+  const h = angle(parts[0])
+  const sl = num(parts[1]) / 100
+  const l = num(parts[2]) / 100
+  if ([h, sl, l].some(Number.isNaN)) return null
+  return hslToRgb(h, clamp(sl, 0, 1), clamp(l, 0, 1), clamp(alpha, 0, 1))
+}
+
+function hslToRgb(h: number, s: number, l: number, a: number): Rgb {
+  // HSL→HSV, then reuse the one conversion that already exists.
+  const v = l + s * Math.min(l, 1 - l)
+  return hsvToRgb({ h, s: v === 0 ? 0 : 2 * (1 - l / v), v, a })
+}
+
+/** HSV→HSL, for the hsl() output format. Saturation/lightness come back 0..1. */
+export function hsvToHsl({ h, s, v }: Hsv): { h: number; s: number; l: number } {
+  const l = v * (1 - s / 2)
+  const denom = Math.min(l, 1 - l)
+  return { h: normalizeHue(h), s: denom === 0 ? 0 : (v - l) / denom, l }
+}
+
+/** The colour as a CSS string in the requested format. */
+export function formatColor(c: Hsv, format: ColorFormat): string {
+  const rgb = hsvToRgb(c)
+  const a = Math.round(clamp(c.a, 0, 1) * 100) / 100
+
+  if (format === "hex") return rgbToHex(rgb)
+  if (format === "rgb") {
+    return a >= 1
+      ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+      : `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`
+  }
+
+  const { h, s, l } = hsvToHsl(c)
+  const hh = Math.round(h)
+  const ss = Math.round(s * 100)
+  const ll = Math.round(l * 100)
+  return a >= 1 ? `hsl(${hh}, ${ss}%, ${ll}%)` : `hsla(${hh}, ${ss}%, ${ll}%, ${a})`
+}
+
+/** Always opaque — for the swatch behind an alpha checkerboard, and for rails. */
+export function opaqueCss(c: Hsv): string {
+  const { r, g, b } = hsvToRgb({ ...c, a: 1 })
+  return `rgb(${r}, ${g}, ${b})`
+}
+
+/**
+ * Whether dark ink reads better than light on this colour, by WCAG relative
+ * luminance. The picker uses it for the check mark on a selected swatch, which
+ * otherwise disappears into a pale preset.
+ */
+export function isLight(c: Hsv): boolean {
+  const { r, g, b } = hsvToRgb(c)
+  const lin = (n: number) => {
+    const x = n / 255
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4
+  }
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b) > 0.35
+}
+
+/**
+ * A neutral starting palette. Kit tokens are deliberately NOT used here: these
+ * are values a user picks *for their own data* (a tag, a calendar category),
+ * which must stay put when the app's theme changes — a preset that shifted with
+ * the theme would silently restyle everything already saved with it.
+ */
+export const DEFAULT_SWATCHES = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#22c55e",
+  "#10b981",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#ec4899",
+  "#64748b",
+  "#111827",
+] as const

package/src/composables/useClipboard.ts

@@ -0,0 +1,107 @@
+import { onScopeDispose, ref } from "vue"
+import { useToast } from "./useToast"
+
+/*
+ * "Copy this text, tell the person it worked, and don't throw if it didn't."
+ *
+ * Four components had grown their own version of this — LpCodeBlock with a
+ * `copied` flag on a 1400ms timer, LpLogViewer with a silent swallow, the
+ * colour picker with another — each wrapping `navigator.clipboard.writeText`
+ * in a try/catch and each disagreeing about what the user should see. Copying
+ * is never the task a person came to do; it is a step inside one, so the thing
+ * that matters is the answer arriving and nothing blowing up on the way.
+ *
+ * Why every call is allowed to fail: the Clipboard API needs a secure context
+ * and, in some browsers, a permission. It is absent over plain http, rejects
+ * outside a user gesture, and is missing entirely in a non-DOM test runner. A
+ * copy that cannot happen is a disappointment, not an exception, and a rejected
+ * promise reaching a component means an unhandled rejection in the console of
+ * an app that did nothing wrong.
+ *
+ * The `copied` flag is here because the other half of the feedback is the
+ * button itself: a tick that replaces the copy icon for a moment reads faster
+ * than any message, and the two are complementary rather than alternatives.
+ */
+
+/** How long `copied` stays true — long enough to read, short enough to not linger. */
+const COPIED_MS = 1400
+
+export interface CopyOptions {
+  /**
+   * Toast to raise on success. `false` (the default) stays silent, for callers
+   * whose button already shows the tick and would otherwise say it twice.
+   */
+  toast?: string | false
+  /**
+   * Toast to raise when the copy fails. Defaults to silence for the same
+   * reason the kit's other best-effort paths are silent: a copy that didn't
+   * happen is usually obvious, and a scary red box over a blocked clipboard
+   * helps nobody. Pass a string where losing the copy actually costs something.
+   */
+  errorToast?: string | false
+}
+
+export interface UseClipboard {
+  /**
+   * True for a moment after a successful copy. Bind it to swap a copy icon for
+   * a tick:
+   *
+   * ```vue
+   * <LpIcon :name="copied ? 'lucide:check' : 'lucide:copy'" />
+   * ```
+   */
+  copied: import("vue").Ref<boolean>
+  /**
+   * Writes `text` to the clipboard. Resolves true on success, false when the
+   * clipboard was unavailable or refused — it never rejects, so `await copy(x)`
+   * is safe to call bare from an event handler.
+   */
+  copy: (text: string, options?: CopyOptions) => Promise<boolean>
+}
+
+/**
+ * Clipboard writes with optional toast feedback.
+ *
+ * ```ts
+ * const { copy, copied } = useClipboard()
+ * copy(hex)                                  // silent; bind `copied` to a tick
+ * copy(hex, { toast: "Copied #3b82f6" })     // says so
+ * ```
+ *
+ * Defaults are per-call rather than per-instance: one component often copies
+ * several things for different reasons — a menu item that should announce
+ * itself, a button that shows its own tick — and hoisting the choice to the
+ * composable would force those to agree.
+ */
+export function useClipboard(): UseClipboard {
+  const copied = ref(false)
+  const { success, error } = useToast()
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  async function copy(text: string, options: CopyOptions = {}): Promise<boolean> {
+    const { toast = false, errorToast = false } = options
+    try {
+      // Optional-chained: `navigator.clipboard` is undefined, not throwing, on
+      // an insecure origin, and that should take the same path as a rejection.
+      await navigator.clipboard?.writeText(text)
+      // A missing API resolves `undefined` rather than rejecting, so confirm
+      // the write was actually possible before claiming it happened.
+      if (!navigator.clipboard) throw new Error("clipboard unavailable")
+
+      copied.value = true
+      clearTimeout(timer)
+      timer = setTimeout(() => (copied.value = false), COPIED_MS)
+      if (toast) success(toast)
+      return true
+    } catch {
+      if (errorToast) error(errorToast)
+      return false
+    }
+  }
+
+  // The reset outlives a component that unmounts inside the window — a menu
+  // that copies and closes is the ordinary case, not the exotic one.
+  onScopeDispose(() => clearTimeout(timer))
+
+  return { copied, copy }
+}

package/src/index.ts

@@ -21,6 +21,8 @@ export type {
   NominatimOptions,
   TileSource,
 } from "./components/address"
+export { default as LpActionBar } from "./components/LpActionBar.vue"
+export type { ActionBarAction } from "./components/LpActionBar.vue"
 export { default as LpAlert } from "./components/LpAlert.vue"
 export { default as LpAppShell } from "./components/LpAppShell.vue"
 export { default as LpAutocomplete } from "./components/LpAutocomplete.vue"
@@ -44,6 +46,23 @@ export type { ChartAxis, ChartPoint, ChartSeries } 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 { default as LpColorPicker } from "./components/LpColorPicker.vue"
+export type { ColorPickerLabels } from "./components/LpColorPicker.vue"
+export {
+  clampHsv,
+  DEFAULT_SWATCHES,
+  formatColor,
+  hsvToHsl,
+  hsvToRgb,
+  isLight,
+  normalizeHue,
+  opaqueCss,
+  parseColor,
+  parseHex,
+  rgbToHex,
+  rgbToHsv,
+} from "./components/color"
+export type { ColorFormat, Hsv, Rgb } from "./components/color"
 export { default as LpCommandPalette } from "./components/LpCommandPalette.vue"
 export type { Command } from "./components/LpCommandPalette.vue"
 export { default as LpConfirmDialog } from "./components/LpConfirmDialog.vue"
@@ -204,6 +223,8 @@ export type { PresetName } from "./theme/presets"
 export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from "./theme/config"
 export type { UiConfig } from "./theme/config"
 
+export { useClipboard } from "./composables/useClipboard"
+export type { CopyOptions, UseClipboard } from "./composables/useClipboard"
 export { useHotkeys, isAppleKeyboard, appleModifierLabel } from "./composables/useHotkeys"
 export type { HotkeyBinding } from "./composables/useHotkeys"
 export { useInputFilter } from "./composables/useInputFilter"