@leavepulse/ui 0.29.5 → 0.30.1

package/dist/components/LpActionBar.vue.d.ts

@@ -0,0 +1,84 @@
+export interface ActionBarAction {
+    label: string;
+    /** Leading icon (any name LpIcon takes). */
+    icon?: string;
+    /** Mirrors LpButton's variants; the default reads as the primary action. */
+    variant?: "solid" | "action" | "outline" | "soft" | "ghost" | "muted" | "light" | "danger";
+    disabled?: boolean;
+    /** Shows a spinner in place of the icon and blocks repeat clicks. */
+    loading?: boolean;
+    onClick?: () => void | Promise<void>;
+}
+type __VLS_Props = {
+    /** Shown or not (v-model:open, or a plain :open). */
+    open?: boolean;
+    /** Lead line — "You have unsaved changes". */
+    title?: string;
+    /** Second line, quieter. Long explanations belong here, not in the title. */
+    description?: string;
+    /** Leading icon. Omit for a bar that is purely text + buttons. */
+    icon?: string;
+    /**
+     * Buttons on the right, in reading order. The LAST one is the primary and
+     * gets the solid treatment unless it says otherwise — the confirming action
+     * sits closest to the edge the thumb and the eye finish on.
+     */
+    actions?: ActionBarAction[];
+    /** Adds a "✕" that emits `dismiss`. For notices, not for decisions. */
+    dismissible?: boolean;
+    /**
+     * Tone. `danger` for a destructive pending action; the default stays neutral
+     * because most of these bars are routine and a page edged in red for every
+     * unsaved field trains people to ignore red.
+     */
+    variant?: "default" | "danger";
+    /**
+     * How wide the bar runs.
+     *
+     * "contained" (the default) keeps it to the width of its own content, up to
+     * a cap, and centres it: a bar carrying six words and two buttons has no
+     * business spanning a 1920px display, and stretching it puts the buttons a
+     * screen away from the field you were editing.
+     *
+     * "full" spans the viewport edge to edge — for a cookie notice, which reads
+     * as part of the page frame rather than as a message about one thing on it.
+     * Its CONTENTS are still capped and centred, so the buttons stay beside the
+     * text instead of being flung to the far corner.
+     */
+    width?: "contained" | "full";
+    /**
+     * Cap for the bar (or, when `width="full"`, for the row inside it). Any CSS
+     * length. Defaults to a comfortable measure for a line of text and two or
+     * three buttons — wider for `full`, whose job is to span the page and whose
+     * contents therefore sit on the page's own measure, not a card's.
+     */
+    maxWidth?: string;
+    /** Accessible name for the landmark. Falls back to `title`. */
+    ariaLabel?: string;
+};
+declare var __VLS_18: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_18) => any;
+} & {
+    actions?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:open": (value: boolean) => any;
+    dismiss: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDismiss?: (() => any) | undefined;
+}>, {
+    width: "contained" | "full";
+    open: boolean;
+    variant: "default" | "danger";
+    actions: ActionBarAction[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpActionBar.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpActionBar-BlvtGB2P.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-BJk3b-u4.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-DnocEJAu.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCodeBlock.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpCodeBlock-rS_6mO3D.js";
+import { _ as _sfc_main } from "../chunks/LpCodeBlock-BWX1KZwk.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpColorPicker.vue.d.ts

@@ -0,0 +1,124 @@
+import { ColorFormat } from './color';
+import { ContextMenuItemDef } from './LpContextMenu.vue';
+/**
+ * Every user-facing string the picker renders on its own — the menu items, the
+ * "Recent" heading, and the accessible names the area, rails and text field
+ * carry. Apps with i18n pass their translations in; the English defaults keep
+ * the component usable bare. Without this an app in another language would
+ * still announce "Saturation and brightness" to a screen reader.
+ */
+export interface ColorPickerLabels {
+    saturation?: string;
+    hue?: string;
+    opacity?: string;
+    value?: string;
+    recent?: string;
+    copyHex?: string;
+    copyRgb?: string;
+    copyHsl?: string;
+    paste?: string;
+    /** Submenu title for the "show the value as…" format switch. */
+    formatAs?: string;
+    format_hex?: string;
+    format_rgb?: string;
+    format_hsl?: string;
+    /** Read out as the area's value, with {s} and {v} as whole percentages. */
+    saturationValueText?: string;
+}
+type __VLS_Props = {
+    /** The colour as a CSS string (v-model). Hex, rgb()/rgba() or hsl()/hsla(). */
+    modelValue?: string;
+    /** Shape of the emitted string. Parsing accepts all three either way. */
+    format?: ColorFormat;
+    /** Show the alpha rail and emit a colour carrying its alpha. */
+    alpha?: boolean;
+    /** Preset colours under the rails. Pass [] to drop the row entirely. */
+    swatches?: readonly string[];
+    /** Hide the hex/CSS text field (leaves the field, rails and presets). */
+    hideInput?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    /** Trigger text beside the swatch. Defaults to the colour's own value. */
+    label?: string;
+    /** Accessible name for the trigger when it carries no visible text. */
+    ariaLabel?: string;
+    /** Popover side, as LpPopover. */
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    /**
+     * Right-click menu on the trigger. Copy-as-hex/rgb/hsl and paste are built
+     * in — the thing a person actually wants from a colour swatch is to take
+     * the value somewhere else, and reading it off the trigger by hand is how
+     * a hex ends up mistyped. These come first; `menuItems` is appended below a
+     * separator. Pass `menu="none"` to drop the built-ins and keep only yours.
+     */
+    menu?: "default" | "none";
+    /** Extra right-click items, appended after the built-in ones. */
+    menuItems?: ContextMenuItemDef[];
+    /**
+     * Remember the colours picked here and offer them back as a "Recent" row.
+     * A person who tints one tag reaches for the same colour on the next one,
+     * and the presets cannot know it. Off by default: history is a per-person
+     * convenience, and a component that wrote to storage uninvited would be a
+     * surprise in a form that is meant to be stateless.
+     */
+    recent?: boolean;
+    /**
+     * Storage key for that history, so two pickers can share a list or keep
+     * separate ones (e.g. "lp.color.tag" vs "lp.color.calendar").
+     */
+    recentKey?: string;
+    /** How many recent colours to keep. */
+    recentLimit?: number;
+    /** Translations for the strings the picker renders itself. */
+    labels?: ColorPickerLabels;
+    /**
+     * Toast raised after a successful copy, with `{value}` standing in for the
+     * colour. `false` copies silently — for a page that already confirms it, or
+     * one where a toast per copy would be noise. Translate it via `labels`
+     * rather than here if the rest of your strings go through i18n.
+     */
+    copyToast?: string | false;
+};
+declare var __VLS_56: {
+    color: string;
+    hsv: {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_56) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    open: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    format: ColorFormat;
+    align: "start" | "center" | "end";
+    modelValue: string;
+    side: "top" | "right" | "bottom" | "left";
+    alpha: boolean;
+    swatches: readonly string[];
+    recent: boolean;
+    recentKey: string;
+    recentLimit: number;
+    copyToast: string | false;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpColorPicker.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpColorPicker-CFC6iaNK.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpDisclosure.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDisclosure-BnwP4Q-b.js";
+import { _ as _sfc_main } from "../chunks/LpDisclosure-C1_YkMrd.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLogViewer-CVaGfTF_.js";
+import { _ as _sfc_main } from "../chunks/LpLogViewer-TSRyt3t9.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.d.ts

@@ -65,18 +65,18 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
 } & {
     clear: () => any;
     select: (item: NotificationItem) => any;
+    dismiss: (id: string) => any;
     markRead: (id: string) => any;
     markUnread: (id: string) => any;
     markAllRead: () => any;
-    dismiss: (id: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
     onSelect?: ((item: NotificationItem) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDismiss?: ((id: string) => any) | undefined;
     onMarkRead?: ((id: string) => any) | undefined;
     onMarkUnread?: ((id: string) => any) | undefined;
     onMarkAllRead?: (() => any) | undefined;
-    onDismiss?: ((id: string) => any) | undefined;
 }>, {
     items: NotificationItem[];
     maxBadge: number;

package/dist/components/LpSidebar.vue.d.ts

@@ -35,6 +35,26 @@ type __VLS_Props = {
      * 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
@@ -90,6 +110,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:collapsed"?: ((keys: string[]) => any) | undefined;
 }>, {
+    variant: "rail" | "panel";
     skeletonRows: number;
     skeletonHeader: boolean;
     responsive: boolean;

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-C_Mr-JPI.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-CWSbczWi.js";
 export {
   _sfc_main as default
 };

package/dist/components/actionBar.d.ts

@@ -0,0 +1,19 @@
+export interface BarEntry {
+    id: number;
+    /** Measured height in px, reported by the bar once it is on screen. */
+    height: number;
+}
+/** Gap between stacked bars, matching the padding the bar sits in. */
+export declare 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 declare function useBarStack(): {
+    register: () => void;
+    unregister: () => void;
+    setHeight: (height: number) => void;
+    offset: () => number;
+    bars: import('vue').Ref<BarEntry[] | undefined, BarEntry[] | undefined>;
+};

package/dist/components/actionBar.js

@@ -0,0 +1,31 @@
+import { ref, onScopeDispose } from "vue";
+const STATE_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:action-bar-stack");
+const g = globalThis;
+const state = g[STATE_KEY] ??= { bars: ref([]), nextId: 0 };
+const STACK_GAP = 8;
+function useBarStack() {
+  const id = state.nextId++;
+  const bars = state.bars;
+  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) {
+    bars.value = bars.value.map((b) => b.id === id ? { ...b, height } : b);
+  }
+  function offset() {
+    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 };
+}
+export {
+  STACK_GAP,
+  useBarStack
+};

package/dist/components/color.d.ts

@@ -0,0 +1,65 @@
+/** 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";
+/** Wraps rather than clamps: hue is a circle, and 370° is 10°, not 360°. */
+export declare function normalizeHue(h: number): number;
+export declare function clampHsv(c: Hsv): Hsv;
+export declare function hsvToRgb({ h, s, v, a }: Hsv): Rgb;
+export declare function rgbToHsv({ r, g, b, a }: Rgb): Hsv;
+/** "#rrggbb", or "#rrggbbaa" when the colour is not fully opaque. */
+export declare function rgbToHex({ r, g, b, a }: Rgb): string;
+/**
+ * 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 declare function parseHex(input: string): Rgb | null;
+/**
+ * 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 declare function parseColor(input: string): Rgb | null;
+/** HSV→HSL, for the hsl() output format. Saturation/lightness come back 0..1. */
+export declare function hsvToHsl({ h, s, v }: Hsv): {
+    h: number;
+    s: number;
+    l: number;
+};
+/** The colour as a CSS string in the requested format. */
+export declare function formatColor(c: Hsv, format: ColorFormat): string;
+/** Always opaque — for the swatch behind an alpha checkerboard, and for rails. */
+export declare function opaqueCss(c: Hsv): string;
+/**
+ * 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 declare function isLight(c: Hsv): boolean;
+/**
+ * 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 declare const DEFAULT_SWATCHES: readonly ["#ef4444", "#f97316", "#f59e0b", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#6366f1", "#8b5cf6", "#ec4899", "#64748b", "#111827"];

package/dist/components/color.js

@@ -0,0 +1,158 @@
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+function normalizeHue(h) {
+  const wrapped = h % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+function clampHsv(c) {
+  return {
+    h: normalizeHue(c.h),
+    s: clamp(c.s, 0, 1),
+    v: clamp(c.v, 0, 1),
+    a: clamp(c.a, 0, 1)
+  };
+}
+function hsvToRgb({ h, s, v, a }) {
+  const hue = normalizeHue(h) / 60;
+  const c = v * s;
+  const x = c * (1 - Math.abs(hue % 2 - 1));
+  const m = v - c;
+  const [r, g, b] = [
+    [c, x, 0],
+    [x, c, 0],
+    [0, c, x],
+    [0, x, c],
+    [x, 0, c],
+    [c, 0, x]
+  ][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)
+  };
+}
+function rgbToHsv({ r, g, b, a }) {
+  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) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+function rgbToHex({ r, g, b, a }) {
+  const base = `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+  return a >= 1 ? base : base + hex2(a * 255);
+}
+function parseHex(input) {
+  const s = input.trim().replace(/^#/, "");
+  if (!/^[0-9a-f]+$/i.test(s)) return null;
+  const expand = (hex) => 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 === void 0 ? 1 : alpha / 255 };
+}
+function parseColor(input) {
+  const s = input.trim();
+  if (!s) return null;
+  if (s.startsWith("#") || /^[0-9a-f]{3,8}$/i.test(s)) return parseHex(s);
+  const fn = s.match(/^(rgba?|hsla?)\s*\(?([^)]*)\)?$/i) ?? (/^[\d.,\s/%]+$/.test(s) ? [null, "rgb", s] : null);
+  if (!fn) return null;
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const num = (t) => parseFloat(t);
+  const angle = (t) => {
+    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] === void 0 ? 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, s, l, a) {
+  const v = l + s * Math.min(l, 1 - l);
+  return hsvToRgb({ h, s: v === 0 ? 0 : 2 * (1 - l / v), v, a });
+}
+function hsvToHsl({ h, s, v }) {
+  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 };
+}
+function formatColor(c, format) {
+  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})`;
+}
+function opaqueCss(c) {
+  const { r, g, b } = hsvToRgb({ ...c, a: 1 });
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function isLight(c) {
+  const { r, g, b } = hsvToRgb(c);
+  const lin = (n) => {
+    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;
+}
+const DEFAULT_SWATCHES = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#22c55e",
+  "#10b981",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#ec4899",
+  "#64748b",
+  "#111827"
+];
+export {
+  DEFAULT_SWATCHES,
+  clampHsv,
+  formatColor,
+  hsvToHsl,
+  hsvToRgb,
+  isLight,
+  normalizeHue,
+  opaqueCss,
+  parseColor,
+  parseHex,
+  rgbToHex,
+  rgbToHsv
+};

package/dist/composables/useClipboard.d.ts

@@ -0,0 +1,46 @@
+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 declare function useClipboard(): UseClipboard;

package/dist/composables/useClipboard.js

@@ -0,0 +1,28 @@
+import { ref, onScopeDispose } from "vue";
+import { useToast } from "./useToast.js";
+const COPIED_MS = 1400;
+function useClipboard() {
+  const copied = ref(false);
+  const { success, error } = useToast();
+  let timer;
+  async function copy(text, options = {}) {
+    const { toast = false, errorToast = false } = options;
+    try {
+      await navigator.clipboard?.writeText(text);
+      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;
+    }
+  }
+  onScopeDispose(() => clearTimeout(timer));
+  return { copied, copy };
+}
+export {
+  useClipboard
+};