@leavepulse/ui 0.29.5 → 0.30.0

package/dist/chunks/LpActionBar-CxmBZpGu.js

@@ -0,0 +1,173 @@
+import { defineComponent, useSlots, computed, ref, watch, nextTick, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, toDisplayString, Fragment, renderList, createTextVNode, unref } from "vue";
+import { useBarStack } from "../components/actionBar.js";
+import { CLOSE_ICON } from "../components/dropdown.js";
+import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  key: 1,
+  class: "min-w-0 flex-1"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "truncate text-sm font-medium text-ink"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "truncate text-xs text-muted"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "flex-1"
+};
+const _hoisted_6 = { class: "flex shrink-0 items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpActionBar",
+  props: {
+    open: { type: Boolean, default: true },
+    title: {},
+    description: {},
+    icon: {},
+    actions: { default: () => [] },
+    dismissible: { type: Boolean },
+    variant: { default: "default" },
+    width: { default: "contained" },
+    maxWidth: {},
+    ariaLabel: {}
+  },
+  emits: ["update:open", "dismiss"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const resolvedActions = computed(
+      () => props.actions.map((a, i) => ({
+        ...a,
+        variant: a.variant ?? (i === props.actions.length - 1 ? props.variant === "danger" ? "danger" : "solid" : "ghost")
+      }))
+    );
+    const hasBody = computed(() => !!props.title || !!props.description || !!slots.default);
+    const maxWidth = computed(() => props.maxWidth ?? (props.width === "full" ? "72rem" : "36rem"));
+    function run(action) {
+      if (action.disabled || action.loading) return;
+      void action.onClick?.();
+    }
+    function dismiss() {
+      emit("dismiss");
+      emit("update:open", false);
+    }
+    const root = ref(null);
+    const { register, unregister, setHeight, offset, bars } = useBarStack();
+    const stackOffset = computed(() => {
+      void bars.value;
+      return offset();
+    });
+    watch(
+      () => props.open,
+      async (isOpen) => {
+        if (!isOpen) {
+          unregister();
+          return;
+        }
+        register();
+        await nextTick();
+        if (root.value) setHeight(root.value.getBoundingClientRect().height);
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(Transition, {
+          "enter-active-class": "animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)]",
+          "leave-active-class": "animate-[rise-out_var(--duration-fast)_ease]"
+        }, {
+          default: withCtx(() => [
+            __props.open ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "root",
+              ref: root,
+              role: "region",
+              "aria-label": __props.ariaLabel ?? __props.title,
+              class: normalizeClass(["pointer-events-none fixed inset-x-0 bottom-0 z-(--z-modal) flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", __props.width === "full" ? "" : "p-3 sm:p-4"]),
+              style: normalizeStyle({ translate: `0 -${stackOffset.value}px` })
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(["lp-skin-panel pointer-events-auto flex items-center gap-3 border-solid bg-surface-overlay", [
+                  // A full-width bar is the page's own furniture: square, edge to
+                  // edge, and only its top border drawn, so it reads as a frame
+                  // rather than as a card that happens to be very wide.
+                  __props.width === "full" ? "w-full justify-center border-x-0 border-b-0 px-4 py-3 sm:px-6" : "w-full rounded-card px-4 py-3",
+                  __props.variant === "danger" ? "border-danger/40" : "border-line"
+                ]]),
+                style: normalizeStyle(__props.width === "full" ? void 0 : { maxWidth: maxWidth.value })
+              }, [
+                createElementVNode("div", {
+                  class: "flex w-full items-center gap-3",
+                  style: normalizeStyle({ maxWidth: maxWidth.value })
+                }, [
+                  __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                    key: 0,
+                    name: __props.icon,
+                    size: 18,
+                    class: normalizeClass(["shrink-0", __props.variant === "danger" ? "text-danger" : "text-brand"])
+                  }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                  hasBody.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                    renderSlot(_ctx.$slots, "default", {}, () => [
+                      __props.title ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+                      __props.description ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+                    ])
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_5)),
+                  createElementVNode("div", _hoisted_6, [
+                    renderSlot(_ctx.$slots, "actions", {}, () => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedActions.value, (action, i) => {
+                        return openBlock(), createBlock(_sfc_main$2, {
+                          key: i,
+                          variant: action.variant,
+                          size: "sm",
+                          disabled: action.disabled || action.loading,
+                          onClick: ($event) => run(action)
+                        }, {
+                          default: withCtx(() => [
+                            action.loading ? (openBlock(), createBlock(_sfc_main$1, {
+                              key: 0,
+                              name: "lucide:loader-circle",
+                              size: 15,
+                              class: "animate-spin"
+                            })) : action.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                              key: 1,
+                              name: action.icon,
+                              size: 15
+                            }, null, 8, ["name"])) : createCommentVNode("", true),
+                            createTextVNode(" " + toDisplayString(action.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["variant", "disabled", "onClick"]);
+                      }), 128))
+                    ]),
+                    __props.dismissible ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      "aria-label": "Dismiss",
+                      class: "group -mr-1 flex size-8 shrink-0 items-center justify-center rounded-control text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                      onClick: dismiss
+                    }, [
+                      createVNode(_sfc_main$1, {
+                        name: "lucide:x",
+                        size: 16,
+                        class: normalizeClass(unref(CLOSE_ICON))
+                      }, null, 8, ["class"])
+                    ])) : createCommentVNode("", true)
+                  ])
+                ], 4)
+              ], 6)
+            ], 14, _hoisted_1)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpAppShell-BJk3b-u4.js → LpAppShell-DnocEJAu.js}

@@ -3,7 +3,7 @@ import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-D8xyKXcF.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-C_Mr-JPI.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-CWSbczWi.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpCodeBlock-rS_6mO3D.js → LpCodeBlock-BWX1KZwk.js}

@@ -1,4 +1,5 @@
-import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, createVNode, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
+import { defineComponent, computed, reactive, watch, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, createVNode, unref, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
+import { useClipboard } from "../composables/useClipboard.js";
 import { tokenizeLine } from "../components/codeHighlight.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = { class: "overflow-hidden rounded-card border border-line bg-surface font-mono text-xs" };
@@ -130,15 +131,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showHeader = computed(
       () => Boolean(props.title || props.lang !== "plain" || props.copyable || props.lockToggle)
     );
-    const copied = ref(false);
-    async function copy() {
-      try {
-        await navigator.clipboard.writeText(copyText.value);
-        copied.value = true;
-        window.setTimeout(() => copied.value = false, 1400);
-      } catch {
-      }
-    }
+    const { copied, copy: writeClipboard } = useClipboard();
+    const copy = () => writeClipboard(copyText.value);
     function toggleLock() {
       emit("update:locked", !props.locked);
     }
@@ -168,13 +162,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 1,
               type: "button",
               class: "group/copy flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-              "aria-label": copied.value ? "Copied" : "Copy code",
+              "aria-label": unref(copied) ? "Copied" : "Copy code",
               onClick: copy
             }, [
               createVNode(_sfc_main$1, {
-                name: copied.value ? "lucide:check" : "lucide:copy",
+                name: unref(copied) ? "lucide:check" : "lucide:copy",
                 size: 13,
-                class: normalizeClass(copied.value ? "text-action" : "")
+                class: normalizeClass(unref(copied) ? "text-action" : "")
               }, null, 8, ["name", "class"])
             ], 8, _hoisted_7)) : createCommentVNode("", true)
           ])