@leavepulse/ui 0.12.0 → 0.14.4

package/dist/assets/LpCommandPalette-D315B47-.css

@@ -0,0 +1,16 @@
+
+/* Each result eases in; honours reduced motion. */
+.lp-cmd-item[data-v-d845063e] {
+  animation: lp-cmd-in-d845063e 140ms ease-out both;
+}
+@keyframes lp-cmd-in-d845063e {
+from {
+    opacity: 0;
+    transform: translateY(3px);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-cmd-item[data-v-d845063e] {
+    animation: none;
+}
+}

package/dist/chunks/LayoutCanvas-Dd20boUG.js

@@ -0,0 +1,50 @@
+import { defineComponent, ref, openBlock, createElementBlock, createVNode, unref, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { _ as _sfc_main$1 } from "./LayoutNode-DGpZA9LX.js";
+import { reorderTab, removeBlock, setActiveTab, moveLeaf, resizeAt } from "../layout/tree.js";
+const _hoisted_1 = { class: "flex min-h-0 min-w-0 flex-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LayoutCanvas",
+  props: {
+    modelValue: {},
+    edit: { type: Boolean },
+    registry: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const dragId = ref(null);
+    function onDrop(targetId, side) {
+      if (dragId.value) moveLeaf(props.modelValue, dragId.value, targetId, side);
+      dragId.value = null;
+    }
+    function onResize(parent, index, delta) {
+      resizeAt(parent, index, delta);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          node: __props.modelValue,
+          "drag-id": dragId.value,
+          edit: !!__props.edit,
+          registry: __props.registry,
+          class: "flex-1",
+          onDragstart: _cache[0] || (_cache[0] = (id) => dragId.value = id),
+          onDragend: _cache[1] || (_cache[1] = ($event) => dragId.value = null),
+          onDrop,
+          onSetActive: _cache[2] || (_cache[2] = (leafId, i) => unref(setActiveTab)(__props.modelValue, leafId, i)),
+          onRemoveBlock: _cache[3] || (_cache[3] = (leafId, i) => unref(removeBlock)(__props.modelValue, leafId, i)),
+          onReorderTab: _cache[4] || (_cache[4] = (leafId, from, to) => unref(reorderTab)(__props.modelValue, leafId, from, to)),
+          onResize
+        }, {
+          block: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "block", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          _: 3
+        }, 8, ["node", "drag-id", "edit", "registry"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LayoutNode-DGpZA9LX.js

@@ -0,0 +1,225 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode, normalizeStyle, withCtx, renderSlot, mergeProps, createElementVNode, createCommentVNode, createBlock, unref, withModifiers, toDisplayString } from "vue";
+import { Motion } from "motion-v";
+import { blockTitle } from "../layout/registry.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["onPointerdown"];
+const _hoisted_2 = {
+  key: 1,
+  class: "shrink-0 basis-2.5"
+};
+const _hoisted_3 = ["draggable"];
+const _hoisted_4 = ["onClick", "onDragstart", "onDragover", "onDrop"];
+const _hoisted_5 = { class: "truncate" };
+const _hoisted_6 = ["aria-label", "onClick"];
+const _hoisted_7 = { class: "flex min-h-0 min-w-0 flex-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LayoutNode",
+  props: {
+    node: {},
+    dragId: {},
+    edit: { type: Boolean },
+    registry: {}
+  },
+  emits: ["dragstart", "dragend", "drop", "set-active", "remove-block", "reorder-tab", "resize"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const hoverSide = ref(null);
+    const tabDrag = ref(null);
+    const tabOver = ref(null);
+    function onTabDragStart(index, ev) {
+      tabDrag.value = index;
+      ev.dataTransfer?.setData("text/plain", String(index));
+      if (ev.dataTransfer) ev.dataTransfer.effectAllowed = "move";
+    }
+    function onTabDragOver(index, ev) {
+      if (tabDrag.value === null) return;
+      ev.preventDefault();
+      tabOver.value = index;
+    }
+    function onTabDrop(index) {
+      const from = tabDrag.value;
+      tabDrag.value = null;
+      tabOver.value = null;
+      if (from === null || from === index || !leaf.value) return;
+      emit("reorder-tab", leaf.value.id, from, index);
+    }
+    function onTabDragEnd() {
+      tabDrag.value = null;
+      tabOver.value = null;
+    }
+    const hintInset = {
+      left: "inset-y-0 left-0 right-1/2",
+      right: "inset-y-0 right-0 left-1/2",
+      top: "inset-x-0 top-0 bottom-1/2",
+      bottom: "inset-x-0 bottom-0 top-1/2",
+      center: "inset-[12%]"
+    };
+    const leaf = computed(() => props.node.kind === "leaf" ? props.node : null);
+    const showTabs = computed(() => !!leaf.value && (props.edit || leaf.value.blocks.length > 1));
+    const activeBlock = computed(() => leaf.value?.blocks[leaf.value.active] ?? "");
+    function tabTitle(id) {
+      return props.registry ? blockTitle(props.registry, id) : id;
+    }
+    function tabIcon(id) {
+      return props.registry?.[id]?.icon;
+    }
+    function tabClosable(id) {
+      return props.registry?.[id]?.closable !== false;
+    }
+    function onDragOver(ev) {
+      ev.preventDefault();
+      const el = ev.currentTarget;
+      const r = el.getBoundingClientRect();
+      const px = (ev.clientX - r.left) / r.width;
+      const py = (ev.clientY - r.top) / r.height;
+      const edge = 0.3;
+      if (px < edge) hoverSide.value = "left";
+      else if (px > 1 - edge) hoverSide.value = "right";
+      else if (py < edge) hoverSide.value = "top";
+      else if (py > 1 - edge) hoverSide.value = "bottom";
+      else hoverSide.value = "center";
+    }
+    function startSplitter(ev, parent, index) {
+      ev.preventDefault();
+      const host = ev.currentTarget.parentElement;
+      if (!host) return;
+      const rect = host.getBoundingClientRect();
+      const horizontal = parent.dir === "row";
+      const span = horizontal ? rect.width : rect.height;
+      let last = horizontal ? ev.clientX : ev.clientY;
+      const move = (e) => {
+        const cur = horizontal ? e.clientX : e.clientY;
+        emit("resize", parent, index, (cur - last) / span);
+        last = cur;
+      };
+      const up = () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", up);
+      };
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+    }
+    return (_ctx, _cache) => {
+      const _component_LayoutNode = resolveComponent("LayoutNode", true);
+      return __props.node.kind === "split" ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["flex min-h-0 min-w-0 flex-1", __props.node.dir === "row" ? "flex-row" : "flex-col"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, (child, i) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: child.id
+          }, [
+            createVNode(_component_LayoutNode, {
+              node: child,
+              "drag-id": __props.dragId,
+              edit: __props.edit,
+              registry: __props.registry,
+              style: normalizeStyle({ flexGrow: child.size, flexBasis: "0px" }),
+              onDragstart: _cache[0] || (_cache[0] = (id) => emit("dragstart", id)),
+              onDragend: _cache[1] || (_cache[1] = ($event) => emit("dragend")),
+              onDrop: _cache[2] || (_cache[2] = (t, s) => emit("drop", t, s)),
+              onSetActive: _cache[3] || (_cache[3] = (l, idx) => emit("set-active", l, idx)),
+              onRemoveBlock: _cache[4] || (_cache[4] = (l, idx) => emit("remove-block", l, idx)),
+              onReorderTab: _cache[5] || (_cache[5] = (l, from, to) => emit("reorder-tab", l, from, to)),
+              onResize: _cache[6] || (_cache[6] = (p, idx, d) => emit("resize", p, idx, d))
+            }, {
+              block: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "block", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 3
+            }, 8, ["node", "drag-id", "edit", "registry", "style"]),
+            __props.edit && i < __props.node.children.length - 1 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["group relative z-[6] shrink-0 basis-2.5", __props.node.dir === "row" ? "cursor-col-resize" : "cursor-row-resize"]),
+              onPointerdown: (e) => startSplitter(e, __props.node, i)
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(["absolute inset-0 m-auto rounded-full bg-line transition-colors group-hover:bg-brand", __props.node.dir === "row" ? "h-9 w-0.5" : "h-0.5 w-9"])
+              }, null, 2)
+            ], 42, _hoisted_1)) : i < __props.node.children.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ], 2)) : leaf.value ? (openBlock(), createBlock(unref(Motion), {
+        key: 1,
+        layout: true,
+        transition: { type: "spring", stiffness: 520, damping: 42, mass: 0.9 },
+        class: normalizeClass(["relative flex min-h-0 min-w-0 flex-col", { "opacity-35": __props.dragId === __props.node.id }])
+      }, {
+        default: withCtx(() => [
+          showTabs.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "flex shrink-0 items-center gap-1 overflow-x-auto border-b border-line px-1 py-1",
+            draggable: __props.edit,
+            onDragstart: _cache[7] || (_cache[7] = ($event) => emit("dragstart", __props.node.id)),
+            onDragend: _cache[8] || (_cache[8] = ($event) => (hoverSide.value = null, emit("dragend")))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(leaf.value.blocks, (block, i) => {
+              return openBlock(), createElementBlock("button", {
+                key: block + i,
+                type: "button",
+                draggable: "true",
+                class: normalizeClass(["inline-flex max-w-40 cursor-grab items-center gap-1.5 rounded-control px-2 py-1 text-xs transition-colors active:cursor-grabbing", [
+                  i === leaf.value.active ? "bg-surface-soft text-ink" : "text-muted hover:bg-surface-soft/60 hover:text-ink",
+                  tabDrag.value === i ? "opacity-40" : "",
+                  tabOver.value === i && tabDrag.value !== null && tabDrag.value !== i ? "ring-1 ring-brand" : ""
+                ]]),
+                onClick: ($event) => emit("set-active", __props.node.id, i),
+                onDragstart: withModifiers(($event) => onTabDragStart(i, $event), ["stop"]),
+                onDragover: ($event) => onTabDragOver(i, $event),
+                onDrop: withModifiers(($event) => onTabDrop(i), ["stop"]),
+                onDragend: onTabDragEnd
+              }, [
+                tabIcon(block) ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  name: tabIcon(block),
+                  size: 13
+                }, null, 8, ["name"])) : createCommentVNode("", true),
+                createElementVNode("span", _hoisted_5, toDisplayString(tabTitle(block)), 1),
+                __props.edit && tabClosable(block) ? (openBlock(), createElementBlock("span", {
+                  key: 1,
+                  class: "grid size-3.5 place-items-center rounded-pill text-muted hover:bg-line hover:text-ink",
+                  role: "button",
+                  "aria-label": `Close ${tabTitle(block)}`,
+                  onClick: withModifiers(($event) => emit("remove-block", __props.node.id, i), ["stop"])
+                }, [
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:x",
+                    size: 11
+                  })
+                ], 8, _hoisted_6)) : createCommentVNode("", true)
+              ], 42, _hoisted_4);
+            }), 128))
+          ], 40, _hoisted_3)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "block", {
+              block: activeBlock.value,
+              leafId: __props.node.id,
+              edit: __props.edit
+            })
+          ]),
+          __props.edit && __props.dragId && __props.dragId !== __props.node.id ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "absolute inset-0 z-[5]",
+            onDragover: onDragOver,
+            onDragleave: _cache[9] || (_cache[9] = ($event) => hoverSide.value = null),
+            onDrop: _cache[10] || (_cache[10] = () => {
+              const s = hoverSide.value;
+              hoverSide.value = null;
+              if (s) emit("drop", __props.node.id, s);
+            })
+          }, [
+            hoverSide.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["pointer-events-none absolute rounded-card border-2 border-brand bg-brand/25 transition-all", hintInset[hoverSide.value]])
+            }, null, 2)) : createCommentVNode("", true)
+          ], 32)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpAlert-BAYHDSS1.js

@@ -0,0 +1,69 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { tv } from "tailwind-variants";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "min-w-0" };
+const _hoisted_2 = {
+  key: 0,
+  class: "font-semibold text-ink"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpAlert",
+  props: {
+    variant: { default: "info" },
+    title: {},
+    icon: {}
+  },
+  setup(__props) {
+    const alert = tv({
+      base: "flex gap-3 rounded-card border p-4 text-sm",
+      variants: {
+        variant: {
+          info: "border-line bg-surface-soft text-ink",
+          success: "border-action/30 bg-action/10 text-ink",
+          warning: "border-accent/30 bg-accent/10 text-ink",
+          danger: "border-danger/30 bg-danger/10 text-ink"
+        }
+      },
+      defaultVariants: { variant: "info" }
+    });
+    const ICONS = {
+      info: "lucide:info",
+      success: "lucide:circle-check",
+      warning: "lucide:triangle-alert",
+      danger: "lucide:octagon-alert"
+    };
+    const ICON_TONE = {
+      info: "text-brand",
+      success: "text-action",
+      warning: "text-accent",
+      danger: "text-danger"
+    };
+    const props = __props;
+    const classes = computed(() => alert({ variant: props.variant }));
+    const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"]);
+    const iconTone = computed(() => ICON_TONE[props.variant ?? "info"]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(classes.value),
+        role: "alert"
+      }, [
+        createVNode(_sfc_main$1, {
+          name: resolvedIcon.value,
+          size: 18,
+          class: normalizeClass(["mt-0.5 shrink-0", iconTone.value])
+        }, null, 8, ["name", "class"]),
+        createElementVNode("div", _hoisted_1, [
+          __props.title ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["text-muted-strong", __props.title ? "mt-0.5" : ""])
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpAppShell-C22642JK.js

@@ -0,0 +1,170 @@
+import { defineComponent, computed, watch, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, createBlock } from "vue";
+import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
+import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-CTUdtX7W.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: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };
+const _hoisted_4 = { class: "truncate text-lg font-semibold" };
+const _hoisted_5 = {
+  key: 0,
+  class: "ml-auto flex items-center gap-2"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "min-h-0 flex-1 overflow-hidden"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpAppShell",
+  props: {
+    items: {},
+    sections: {},
+    modelValue: {},
+    path: {},
+    isActive: {},
+    title: {},
+    open: { type: Boolean },
+    mobileBreakpoint: { default: "lg" },
+    divider: { type: Boolean, default: true },
+    contentClass: { default: "mx-auto w-full max-w-6xl" },
+    fullBleed: { type: Boolean },
+    loading: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:open", "select"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const flatItems = computed(
+      () => props.sections ? props.sections.flatMap((s) => s.items) : props.items ?? []
+    );
+    function defaultActive(item) {
+      if (props.path == null) return item.id === props.modelValue;
+      if (item.id === "/") return props.path === "/";
+      return props.path === item.id || props.path.startsWith(`${item.id}/`);
+    }
+    const activeTest = computed(() => props.isActive ?? defaultActive);
+    const pageTitle = computed(() => {
+      if (props.title != null) return props.title;
+      const test = activeTest.value;
+      const match = [...flatItems.value].sort((a, b) => b.id.length - a.id.length).find((item) => test(item));
+      return match?.label ?? "";
+    });
+    const drawerOpen = computed({
+      get: () => props.open ?? false,
+      set: (v) => emit("update:open", v)
+    });
+    watch(
+      () => props.path,
+      () => {
+        if (drawerOpen.value) emit("update:open", false);
+      }
+    );
+    function onSelect(item) {
+      emit("select", item);
+    }
+    function onModel(id) {
+      emit("update:modelValue", id);
+    }
+    const burgerHidden = {
+      sm: "sm:hidden",
+      md: "md:hidden",
+      lg: "lg:hidden",
+      xl: "xl:hidden"
+    };
+    const burgerClass = computed(() => burgerHidden[props.mobileBreakpoint]);
+    const _openDrawer = () => emit("update:open", true);
+    __expose({ openDrawer: _openDrawer });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          "model-value": __props.modelValue,
+          items: __props.items,
+          sections: __props.sections,
+          "is-active": activeTest.value,
+          open: drawerOpen.value,
+          responsive: "",
+          "edge-open": "",
+          "mobile-breakpoint": __props.mobileBreakpoint,
+          divider: __props.divider,
+          loading: __props.loading,
+          class: "shrink-0",
+          "onUpdate:modelValue": onModel,
+          "onUpdate:open": _cache[0] || (_cache[0] = (v) => emit("update:open", v)),
+          onSelect
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.logo ? {
+            name: "header",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "logo")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["sidebar-actions"] ? {
+            name: "actions",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "sidebar-actions")
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots["sidebar-footer"] ? {
+            name: "footer",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "sidebar-footer")
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots["sidebar-item"] ? {
+            name: "item",
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "sidebar-item", normalizeProps(guardReactiveProps(slotProps)))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["model-value", "items", "sections", "is-active", "open", "mobile-breakpoint", "divider", "loading"]),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("header", _hoisted_3, [
+            createVNode(_sfc_main$2, {
+              class: normalizeClass(burgerClass.value),
+              variant: "ghost",
+              size: "sm",
+              square: "",
+              "aria-label": "Open menu",
+              onClick: _cache[1] || (_cache[1] = ($event) => emit("update:open", true))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$3, {
+                  name: "lucide:menu",
+                  size: 18
+                })
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            renderSlot(_ctx.$slots, "header-title", {}, () => [
+              createElementVNode("h1", _hoisted_4, toDisplayString(pageTitle.value), 1)
+            ]),
+            _ctx.$slots["header-actions"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              renderSlot(_ctx.$slots, "header-actions")
+            ])) : createCommentVNode("", true)
+          ]),
+          __props.fullBleed ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "default")
+          ])) : (openBlock(), createBlock(_sfc_main$4, {
+            key: 1,
+            class: "min-h-0 flex-1",
+            "content-class": `px-4 py-6 md:px-6 ${__props.contentClass}`
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["content-class"]))
+        ]),
+        renderSlot(_ctx.$slots, "overlays")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};