@leavepulse/ui 0.29.5 → 0.30.0

package/dist/chunks/LpColorPicker-CFC6iaNK.js

@@ -0,0 +1,491 @@
+import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createElementBlock, createCommentVNode, Fragment, renderList, renderSlot } from "vue";
+import { PopoverRoot, PopoverAnchor, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
+import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight, clampHsv } from "../components/color.js";
+import { useClipboard } from "../composables/useClipboard.js";
+import { POPOVER_PANEL } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-B6WBLleS.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["disabled", "aria-label"];
+const _hoisted_2 = { class: "min-w-0 flex-1 truncate font-mono text-xs text-muted-strong" };
+const _hoisted_3 = { class: "flex flex-col gap-3" };
+const _hoisted_4 = ["tabindex", "aria-label", "aria-valuetext"];
+const _hoisted_5 = ["aria-label", "aria-valuenow", "tabindex"];
+const _hoisted_6 = ["aria-label", "aria-valuenow", "tabindex"];
+const _hoisted_7 = {
+  key: 1,
+  "data-lp-ring-owner": "",
+  class: "flex h-(--size-control-sm) items-center gap-2 overflow-hidden rounded-control border border-line bg-surface-soft px-2 transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring"
+};
+const _hoisted_8 = ["value", "disabled", "aria-label"];
+const _hoisted_9 = {
+  key: 0,
+  class: "text-[11px] font-medium uppercase tracking-wide text-muted"
+};
+const _hoisted_10 = ["disabled", "aria-label", "aria-pressed", "onClick"];
+const CHECKERBOARD = "repeating-conic-gradient(var(--color-line-strong) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpColorPicker",
+  props: {
+    modelValue: { default: "#3b82f6" },
+    format: { default: "hex" },
+    alpha: { type: Boolean, default: false },
+    swatches: { default: () => DEFAULT_SWATCHES },
+    hideInput: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    size: { default: "md" },
+    label: {},
+    ariaLabel: {},
+    side: { default: "bottom" },
+    align: { default: "start" },
+    menu: {},
+    menuItems: {},
+    recent: { type: Boolean, default: false },
+    recentKey: { default: "lp.color.recent" },
+    recentLimit: { default: 8 },
+    labels: {},
+    copyToast: { type: [String, Boolean], default: "Copied {value}" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function fill(tpl, vars) {
+      return tpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? ""));
+    }
+    const l = computed(() => ({
+      saturation: props.labels?.saturation ?? "Saturation and brightness",
+      hue: props.labels?.hue ?? "Hue",
+      opacity: props.labels?.opacity ?? "Opacity",
+      value: props.labels?.value ?? "Colour value",
+      recent: props.labels?.recent ?? "Recent",
+      copyHex: props.labels?.copyHex ?? "Copy hex",
+      copyRgb: props.labels?.copyRgb ?? "Copy rgb",
+      copyHsl: props.labels?.copyHsl ?? "Copy hsl",
+      paste: props.labels?.paste ?? "Paste colour",
+      formatAs: props.labels?.formatAs ?? "Show as",
+      format_hex: props.labels?.format_hex ?? "HEX",
+      format_rgb: props.labels?.format_rgb ?? "RGB",
+      format_hsl: props.labels?.format_hsl ?? "HSL",
+      saturationValueText: props.labels?.saturationValueText ?? "saturation {s}%, brightness {v}%"
+    }));
+    const { copy } = useClipboard();
+    const open = ref(false);
+    const hsv = ref({ h: 217, s: 0.76, v: 0.96, a: 1 });
+    function adopt(value) {
+      const rgb = parseColor(value ?? "");
+      if (!rgb) return;
+      const next = rgbToHsv(rgb);
+      if (next.s === 0) next.h = hsv.value.h;
+      if (next.v === 0) next.s = hsv.value.s;
+      hsv.value = next;
+    }
+    adopt(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (v !== current.value) adopt(v);
+      }
+    );
+    const activeFormat = ref(props.format);
+    watch(() => props.format, (f) => activeFormat.value = f);
+    const current = computed(
+      () => formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, activeFormat.value)
+    );
+    function set(patch, commit = false) {
+      if (props.disabled) return;
+      hsv.value = clampHsv({ ...hsv.value, ...patch });
+      emit("update:modelValue", current.value);
+      if (commit) emit("change", current.value);
+    }
+    function trackPointer(e, onMove) {
+      if (props.disabled) return;
+      if (e.button !== 0) return;
+      e.preventDefault();
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const at = (ev) => {
+        const x = rect.width === 0 ? 0 : (ev.clientX - rect.left) / rect.width;
+        const y = rect.height === 0 ? 0 : (ev.clientY - rect.top) / rect.height;
+        onMove(Math.min(1, Math.max(0, x)), Math.min(1, Math.max(0, y)));
+      };
+      el.setPointerCapture(e.pointerId);
+      at(e);
+      const move = (ev) => at(ev);
+      const up = () => {
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerup", up);
+        el.removeEventListener("pointercancel", up);
+        emit("change", current.value);
+      };
+      el.addEventListener("pointermove", move);
+      el.addEventListener("pointerup", up);
+      el.addEventListener("pointercancel", up);
+    }
+    const onFieldPointer = (e) => trackPointer(e, (x, y) => set({ s: x, v: 1 - y }));
+    const onHuePointer = (e) => trackPointer(e, (x) => set({ h: x * 360 }));
+    const onAlphaPointer = (e) => trackPointer(e, (x) => set({ a: x }));
+    function step(e, axis) {
+      const big = e.shiftKey;
+      const k = e.key;
+      const arrows = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+      if (!arrows.includes(k)) return;
+      e.preventDefault();
+      const dx = (k === "ArrowRight" ? 1 : k === "ArrowLeft" ? -1 : 0) * (big ? 10 : 1);
+      const dy = (k === "ArrowUp" ? 1 : k === "ArrowDown" ? -1 : 0) * (big ? 10 : 1);
+      if (axis === "h") {
+        if (k === "Home") return set({ h: 0 }, true);
+        if (k === "End") return set({ h: 359 }, true);
+        return set({ h: hsv.value.h + (dx || dy) }, true);
+      }
+      if (axis === "a") {
+        if (k === "Home") return set({ a: 0 }, true);
+        if (k === "End") return set({ a: 1 }, true);
+        return set({ a: hsv.value.a + (dx || dy) / 100 }, true);
+      }
+      if (k === "Home") return set({ s: 0 }, true);
+      if (k === "End") return set({ s: 1 }, true);
+      set({ s: hsv.value.s + dx / 100, v: hsv.value.v + dy / 100 }, true);
+    }
+    const typed = ref(null);
+    const inputValue = computed(() => typed.value ?? current.value);
+    function onInput(e) {
+      const value = e.target.value;
+      typed.value = value;
+      const rgb = parseColor(value);
+      if (!rgb) return;
+      const next = rgbToHsv(rgb);
+      if (next.s === 0) next.h = hsv.value.h;
+      if (next.v === 0) next.s = hsv.value.s;
+      set(props.alpha ? next : { ...next, a: 1 }, true);
+    }
+    function onInputBlur() {
+      typed.value = null;
+    }
+    function pickSwatch(value) {
+      const rgb = parseColor(value);
+      if (!rgb) return;
+      typed.value = null;
+      set(rgbToHsv(rgb), true);
+    }
+    function isActiveSwatch(value) {
+      const rgb = parseColor(value);
+      return !!rgb && formatColor(rgbToHsv(rgb), "hex") === formatColor({ ...hsv.value, a: 1 }, "hex");
+    }
+    function tickClass(value) {
+      const rgb = parseColor(value);
+      return rgb && isLight(rgbToHsv(rgb)) ? "text-black" : "text-white";
+    }
+    const triggerSize = {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm"
+    };
+    const previewCss = computed(() => formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, "rgb"));
+    const hueCss = computed(() => `hsl(${Math.round(hsv.value.h)}, 100%, 50%)`);
+    const alphaRampStart = computed(() => formatColor({ ...hsv.value, a: 0 }, "rgb"));
+    const fieldCss = computed(() => opaqueCss({ ...hsv.value, s: 1, v: 1 }));
+    const fieldStyle = computed(() => ({
+      background: [
+        "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))",
+        "linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+        fieldCss.value
+      ].join(", ")
+    }));
+    function storage() {
+      try {
+        if (typeof window === "undefined") return null;
+        return window.localStorage;
+      } catch {
+        return null;
+      }
+    }
+    function readRecent() {
+      const s = storage();
+      if (!s) return [];
+      try {
+        const raw = JSON.parse(s.getItem(props.recentKey) ?? "[]");
+        return Array.isArray(raw) ? raw.filter((v) => typeof v === "string" && !!parseColor(v)).slice(0, props.recentLimit) : [];
+      } catch {
+        return [];
+      }
+    }
+    const recentColors = ref(props.recent ? readRecent() : []);
+    function remember(value) {
+      if (!props.recent) return;
+      const key = formatColor({ ...hsv.value, a: 1 }, "hex");
+      const without = recentColors.value.filter(
+        (c) => formatColor(rgbToHsv(parseColor(c) ?? { r: 0, g: 0, b: 0, a: 1 }), "hex") !== key
+      );
+      recentColors.value = [value, ...without].slice(0, props.recentLimit);
+      try {
+        storage()?.setItem(props.recentKey, JSON.stringify(recentColors.value));
+      } catch {
+      }
+    }
+    watch(open, (isOpen, was) => {
+      if (was && !isOpen) remember(current.value);
+    });
+    const swatchRows = computed(
+      () => [
+        {
+          key: "recent",
+          heading: l.value.recent,
+          colors: props.recent ? recentColors.value : [],
+          cols: "grid-cols-8",
+          size: "size-6"
+        },
+        {
+          key: "presets",
+          heading: "",
+          colors: [...props.swatches],
+          cols: "grid-cols-6",
+          size: "size-7"
+        }
+      ].filter((r) => r.colors.length)
+    );
+    function onPanelOpen(e) {
+      e.preventDefault();
+      e.currentTarget?.focus?.({ preventScroll: true });
+    }
+    function copyAs(fmt) {
+      const text = formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, fmt);
+      const toast = props.copyToast;
+      void copy(text, { toast: toast === false ? false : fill(toast, { value: text }) });
+    }
+    async function pasteColor() {
+      try {
+        const text = await navigator.clipboard.readText();
+        const rgb = parseColor(text);
+        if (!rgb) return;
+        typed.value = null;
+        const next = rgbToHsv(rgb);
+        set(props.alpha ? next : { ...next, a: 1 }, true);
+      } catch {
+      }
+    }
+    function setFormat(f) {
+      if (activeFormat.value === f) return;
+      activeFormat.value = f;
+      typed.value = null;
+      emit("update:modelValue", current.value);
+      emit("change", current.value);
+    }
+    const menuItems = computed(() => {
+      const own = props.menuItems ?? [];
+      if (props.menu === "none") return own;
+      const builtin = [
+        { label: l.value.copyHex, icon: "lucide:copy", onSelect: () => copyAs("hex") },
+        { label: l.value.copyRgb, icon: "lucide:copy", onSelect: () => copyAs("rgb") },
+        { label: l.value.copyHsl, icon: "lucide:copy", onSelect: () => copyAs("hsl") },
+        { label: l.value.paste, icon: "lucide:clipboard", onSelect: pasteColor },
+        {
+          // Ticks rather than a plain list: this is a setting with a current value,
+          // and the menu should say which one is on without being opened twice.
+          label: l.value.formatAs,
+          icon: "lucide:code",
+          separatorBefore: true,
+          children: ["hex", "rgb", "hsl"].map((f) => ({
+            label: l.value[`format_${f}`],
+            checked: activeFormat.value === f,
+            onSelect: () => setFormat(f)
+          }))
+        }
+      ];
+      return own.length ? [...builtin, { ...own[0], separatorBefore: true }, ...own.slice(1)] : builtin;
+    });
+    __expose({ open });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopoverRoot), {
+        open: open.value,
+        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event)
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(PopoverAnchor), { class: "block w-full" }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, { items: menuItems.value }, {
+                default: withCtx(() => [
+                  createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+                    default: withCtx(() => [
+                      createElementVNode("button", {
+                        type: "button",
+                        disabled: __props.disabled,
+                        "aria-label": __props.ariaLabel,
+                        class: normalizeClass(["group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55", [
+                          triggerSize[__props.size],
+                          __props.invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
+                        ]])
+                      }, [
+                        createElementVNode("span", {
+                          class: "relative size-5 shrink-0 overflow-hidden rounded-md",
+                          style: normalizeStyle({ background: CHECKERBOARD })
+                        }, [
+                          createElementVNode("span", {
+                            class: "block size-full",
+                            style: normalizeStyle({ backgroundColor: previewCss.value })
+                          }, null, 4),
+                          _cache[4] || (_cache[4] = createElementVNode("span", { class: "pointer-events-none absolute inset-0 rounded-md ring-1 ring-inset ring-line" }, null, -1))
+                        ], 4),
+                        createElementVNode("span", _hoisted_2, toDisplayString(__props.label ?? current.value), 1),
+                        createVNode(_sfc_main$2, {
+                          name: "lucide:chevron-down",
+                          size: 15,
+                          class: "shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180"
+                        })
+                      ], 10, _hoisted_1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["items"])
+            ]),
+            _: 1
+          }),
+          createVNode(unref(PopoverPortal), null, {
+            default: withCtx(() => [
+              createVNode(unref(PopoverContent), {
+                side: __props.side,
+                align: __props.align,
+                "side-offset": 6,
+                class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) w-64 select-none rounded-card p-3 outline-none"]),
+                onOpenAutoFocus: onPanelOpen
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, { items: menuItems.value }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_3, [
+                        createElementVNode("div", {
+                          role: "slider",
+                          tabindex: __props.disabled ? -1 : 0,
+                          "aria-label": l.value.saturation,
+                          "aria-valuetext": fill(l.value.saturationValueText, { s: Math.round(hsv.value.s * 100), v: Math.round(hsv.value.v * 100) }),
+                          class: "relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-control outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                          style: normalizeStyle(fieldStyle.value),
+                          onPointerdown: onFieldPointer,
+                          onKeydown: _cache[0] || (_cache[0] = ($event) => step($event, "sv"))
+                        }, [
+                          createElementVNode("span", {
+                            class: "pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
+                            style: normalizeStyle({
+                              left: `${hsv.value.s * 100}%`,
+                              top: `${(1 - hsv.value.v) * 100}%`,
+                              backgroundColor: previewCss.value
+                            })
+                          }, null, 4)
+                        ], 44, _hoisted_4),
+                        createElementVNode("div", {
+                          role: "slider",
+                          "aria-label": l.value.hue,
+                          "aria-valuemin": 0,
+                          "aria-valuemax": 360,
+                          "aria-valuenow": Math.round(hsv.value.h),
+                          tabindex: __props.disabled ? -1 : 0,
+                          class: "relative h-3 w-full cursor-pointer touch-none rounded-pill outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                          style: { "background": "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)" },
+                          onPointerdown: onHuePointer,
+                          onKeydown: _cache[1] || (_cache[1] = ($event) => step($event, "h"))
+                        }, [
+                          createElementVNode("span", {
+                            class: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
+                            style: normalizeStyle({ left: `${hsv.value.h / 360 * 100}%`, backgroundColor: hueCss.value })
+                          }, null, 4)
+                        ], 40, _hoisted_5),
+                        __props.alpha ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          role: "slider",
+                          "aria-label": l.value.opacity,
+                          "aria-valuemin": 0,
+                          "aria-valuemax": 100,
+                          "aria-valuenow": Math.round(hsv.value.a * 100),
+                          tabindex: __props.disabled ? -1 : 0,
+                          class: "relative h-3 w-full cursor-pointer touch-none rounded-pill outline-none ring-1 ring-inset ring-line focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                          style: normalizeStyle({ background: CHECKERBOARD }),
+                          onPointerdown: onAlphaPointer,
+                          onKeydown: _cache[2] || (_cache[2] = ($event) => step($event, "a"))
+                        }, [
+                          createElementVNode("div", {
+                            class: "absolute inset-0 overflow-hidden rounded-pill",
+                            style: normalizeStyle({ backgroundImage: `linear-gradient(to right, ${alphaRampStart.value}, ${unref(opaqueCss)(hsv.value)})` })
+                          }, null, 4),
+                          createElementVNode("span", {
+                            class: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
+                            style: normalizeStyle({ left: `${hsv.value.a * 100}%`, backgroundColor: previewCss.value })
+                          }, null, 4)
+                        ], 44, _hoisted_6)) : createCommentVNode("", true),
+                        !__props.hideInput ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                          createElementVNode("span", {
+                            class: "size-4 shrink-0 rounded-[5px] border border-line",
+                            style: normalizeStyle({ backgroundColor: previewCss.value })
+                          }, null, 4),
+                          createElementVNode("input", {
+                            value: inputValue.value,
+                            disabled: __props.disabled,
+                            spellcheck: "false",
+                            autocapitalize: "off",
+                            autocomplete: "off",
+                            "aria-label": l.value.value,
+                            class: "min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted",
+                            onInput,
+                            onBlur: onInputBlur
+                          }, null, 40, _hoisted_8)
+                        ])) : createCommentVNode("", true),
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(swatchRows.value, (row) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: row.key,
+                            class: "flex flex-col gap-1.5"
+                          }, [
+                            row.heading ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(row.heading), 1)) : createCommentVNode("", true),
+                            createElementVNode("div", {
+                              class: normalizeClass(["grid gap-1.5", row.cols])
+                            }, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(row.colors, (c) => {
+                                return openBlock(), createElementBlock("button", {
+                                  key: c,
+                                  type: "button",
+                                  disabled: __props.disabled,
+                                  "aria-label": c,
+                                  "aria-pressed": isActiveSwatch(c),
+                                  class: normalizeClass(["relative flex items-center justify-center overflow-hidden rounded-md outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95", row.size]),
+                                  style: normalizeStyle({ background: CHECKERBOARD }),
+                                  onClick: ($event) => pickSwatch(c)
+                                }, [
+                                  createElementVNode("span", {
+                                    class: "absolute inset-0",
+                                    style: normalizeStyle({ backgroundColor: c })
+                                  }, null, 4),
+                                  _cache[5] || (_cache[5] = createElementVNode("span", { class: "pointer-events-none absolute inset-0 rounded-md ring-1 ring-inset ring-line" }, null, -1)),
+                                  isActiveSwatch(c) ? (openBlock(), createBlock(_sfc_main$2, {
+                                    key: 0,
+                                    name: "lucide:check",
+                                    size: 13,
+                                    class: normalizeClass(["relative", tickClass(c)])
+                                  }, null, 8, ["class"])) : createCommentVNode("", true)
+                                ], 14, _hoisted_10);
+                              }), 128))
+                            ], 2)
+                          ]);
+                        }), 128)),
+                        renderSlot(_ctx.$slots, "default", {
+                          color: current.value,
+                          hsv: hsv.value
+                        })
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["items"])
+                ]),
+                _: 3
+              }, 8, ["side", "align", "class"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["open"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpDisclosure-BnwP4Q-b.js → LpDisclosure-C1_YkMrd.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString, nextTick } from "vue";
+import { defineComponent, getCurrentInstance, computed, ref, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString, nextTick } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = { class: "min-w-0 flex-1 text-left" };
@@ -16,6 +16,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    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 : void 0);
     const root = ref(null);
     function onToggle(value) {
       emit("update:open", value);
@@ -30,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(CollapsibleRoot), {
         ref_key: "root",
         ref: root,
-        open: __props.open,
+        open: rootOpen.value,
         "default-open": __props.defaultOpen,
         class: "overflow-hidden rounded-control border border-line bg-surface-soft",
         "onUpdate:open": onToggle

package/dist/chunks/{LpLogViewer-CVaGfTF_.js → LpLogViewer-TSRyt3t9.js}

@@ -1,5 +1,6 @@
 import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createVNode, Transition, withCtx, toDisplayString, createCommentVNode, normalizeStyle, createElementVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, createTextVNode } from "vue";
 import { prefersReducedMotion } from "../composables/easing.js";
+import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { _ as _sfc_main$3 } from "./LpContextMenu-B6WBLleS.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
@@ -202,12 +203,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return time;
     }
-    async function copy(text) {
-      try {
-        await navigator.clipboard?.writeText(text);
-      } catch {
-      }
-    }
+    const { copy: writeClipboard } = useClipboard();
+    const copy = (text) => writeClipboard(text, { toast: "Copied to clipboard" });
     function lineText(line) {
       return [fmtTime(line.time), line.level?.toUpperCase(), line.source && `[${line.source}]`, line.message].filter(Boolean).join(" ");
     }

package/dist/chunks/{LpSidebar-C_Mr-JPI.js → LpSidebar-CWSbczWi.js}

@@ -34,6 +34,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     mobileBreakpoint: { default: "md" },
     edgeOpen: { type: Boolean },
     divider: { type: Boolean, default: true },
+    variant: { default: "rail" },
+    width: {},
     collapsed: {},
     autoCollapseAfter: { default: 14 }
   },
@@ -85,15 +87,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const railClass = computed(
       () => props.responsive ? RAIL_VISIBILITY[props.mobileBreakpoint] : "flex"
     );
+    const chromeClass = computed(
+      () => props.variant === "panel" ? "rounded-card border border-line bg-surface-raised" : "border-r border-line bg-surface-raised"
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("nav", mergeProps({
-          class: ["h-full w-60 flex-col gap-1 border-r border-line bg-surface-raised p-3", railClass.value],
+          class: ["h-full flex-col gap-1 p-3", [railClass.value, chromeClass.value, __props.width ? "" : "w-60"]],
+          style: __props.width ? { width: __props.width } : void 0,
           "aria-label": "Sidebar"
         }, _ctx.$attrs), [
           _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["-mx-3 -mt-3 mb-3 flex h-16 shrink-0 items-center px-3", __props.divider ? "border-b border-line" : ""])
+            class: normalizeClass(["mb-3 flex shrink-0 items-center", [
+              __props.variant === "panel" ? "pb-3" : "-mx-3 -mt-3 h-16 px-3",
+              __props.divider ? "border-b border-line" : ""
+            ]])
           }, [
             renderSlot(_ctx.$slots, "header")
           ], 2)) : createCommentVNode("", true),

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];