@leavepulse/ui 0.12.0 → 0.14.4

package/dist/layout/registry.js

@@ -0,0 +1,10 @@
+function defineBlocks(blocks) {
+  return blocks;
+}
+function blockTitle(registry, id) {
+  return registry[id]?.title ?? id;
+}
+export {
+  blockTitle,
+  defineBlocks
+};

package/dist/layout/tree.js

@@ -0,0 +1,192 @@
+import { reactive } from "vue";
+let uid = 0;
+const nid = () => `lp-n${uid++}`;
+function leaf(block) {
+  return { kind: "leaf", id: nid(), blocks: [block], active: 0, size: 1 };
+}
+function makeLayout(blocks) {
+  return reactive({
+    kind: "split",
+    id: nid(),
+    dir: "row",
+    size: 1,
+    children: blocks.map(leaf)
+  });
+}
+function findParent(node, childId) {
+  for (const c of node.children) {
+    if (c.id === childId) return node;
+    if (c.kind === "split") {
+      const r = findParent(c, childId);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+function findLeaf(node, id) {
+  if (node.kind === "leaf") return node.id === id ? node : null;
+  for (const c of node.children) {
+    const r = findLeaf(c, id);
+    if (r) return r;
+  }
+  return null;
+}
+function countLeaves(node) {
+  if (node.kind === "leaf") return 1;
+  return node.children.reduce((s, c) => s + countLeaves(c), 0);
+}
+function countBlocks(node) {
+  if (node.kind === "leaf") return node.blocks.length;
+  return node.children.reduce((s, c) => s + countBlocks(c), 0);
+}
+function detach(root, id) {
+  const parent = findParent(root, id);
+  if (!parent) return;
+  const idx = parent.children.findIndex((c) => c.id === id);
+  parent.children.splice(idx, 1);
+  collapse(root, parent);
+}
+function collapse(root, parent) {
+  if (parent === root || parent.children.length !== 1) return;
+  const grand = findParent(root, parent.id);
+  if (!grand) return;
+  const only = parent.children[0];
+  only.size = parent.size;
+  const pIdx = grand.children.findIndex((c) => c.id === parent.id);
+  grand.children.splice(pIdx, 1, only);
+}
+function removeLeaf(root, id) {
+  if (countLeaves(root) <= 1) return;
+  detach(root, id);
+}
+function removeBlock(root, leafId, index) {
+  const target = findLeaf(root, leafId);
+  if (!target || index < 0 || index >= target.blocks.length) return;
+  if (target.blocks.length > 1) {
+    target.blocks.splice(index, 1);
+    if (target.active >= target.blocks.length) target.active = target.blocks.length - 1;
+    return;
+  }
+  if (countBlocks(root) <= 1) return;
+  detach(root, leafId);
+}
+function addLeaf(root, block, side = "right") {
+  const targetId = root.children[root.children.length - 1]?.id;
+  if (!targetId) {
+    root.children.push(leaf(block));
+    return;
+  }
+  if (side === "center") {
+    addTab(root, targetId, block);
+    return;
+  }
+  insertBeside(root, leaf(block), targetId, side);
+}
+function addTab(root, leafId, block) {
+  const target = findLeaf(root, leafId);
+  if (!target) return;
+  target.blocks.push(block);
+  target.active = target.blocks.length - 1;
+}
+function setActiveTab(root, leafId, index) {
+  const target = findLeaf(root, leafId);
+  if (!target || index < 0 || index >= target.blocks.length) return;
+  target.active = index;
+}
+function reorderTab(root, leafId, from, to) {
+  const target = findLeaf(root, leafId);
+  if (!target) return;
+  const n = target.blocks.length;
+  if (from < 0 || from >= n || to < 0 || to >= n || from === to) return;
+  const activeBlock = target.blocks[target.active];
+  const [moved] = target.blocks.splice(from, 1);
+  target.blocks.splice(to, 0, moved);
+  target.active = target.blocks.indexOf(activeBlock);
+}
+function insertBeside(root, moving, targetId, side) {
+  const parent = findParent(root, targetId);
+  if (!parent) return;
+  const idx = parent.children.findIndex((c) => c.id === targetId);
+  const target = parent.children[idx];
+  const wantDir = side === "left" || side === "right" ? "row" : "col";
+  const before = side === "left" || side === "top";
+  if (parent.dir === wantDir) {
+    moving.size = target.size / 2;
+    target.size = target.size / 2;
+    parent.children.splice(before ? idx : idx + 1, 0, moving);
+  } else {
+    const wrap = {
+      kind: "split",
+      id: nid(),
+      dir: wantDir,
+      size: target.size,
+      children: before ? [{ ...moving, size: 1 }, { ...target, size: 1 }] : [{ ...target, size: 1 }, { ...moving, size: 1 }]
+    };
+    parent.children.splice(idx, 1, wrap);
+  }
+}
+function moveLeaf(root, movingId, targetId, side) {
+  if (movingId === targetId) return;
+  const moving = findLeaf(root, movingId);
+  if (!moving) return;
+  if (side === "center") {
+    const target = findLeaf(root, targetId);
+    if (!target) return;
+    const merged = moving.blocks;
+    detach(root, movingId);
+    target.active = target.blocks.length;
+    target.blocks.push(...merged);
+    return;
+  }
+  detach(root, movingId);
+  moving.size = 1;
+  insertBeside(root, moving, targetId, side);
+}
+function resizeAt(parent, index, deltaFraction) {
+  const a = parent.children[index];
+  const b = parent.children[index + 1];
+  if (!a || !b) return;
+  const total = a.size + b.size;
+  const min = total * 0.12;
+  const na = Math.max(min, Math.min(total - min, a.size + deltaFraction * total));
+  a.size = na;
+  b.size = total - na;
+}
+function serializeLayout(root) {
+  const strip = (n) => n.kind === "leaf" ? { kind: "leaf", blocks: [...n.blocks], active: n.active, size: n.size } : { kind: "split", dir: n.dir, size: n.size, children: n.children.map(strip) };
+  return strip(root);
+}
+function deserializeLayout(data) {
+  const hydrate = (n) => {
+    if (n.kind === "leaf") {
+      const blocks = n.blocks ?? (n.block != null ? [n.block] : []);
+      const active = Math.min(Math.max(n.active ?? 0, 0), Math.max(blocks.length - 1, 0));
+      return { kind: "leaf", id: nid(), blocks, active, size: n.size ?? 1 };
+    }
+    return {
+      kind: "split",
+      id: nid(),
+      dir: n.dir,
+      size: n.size ?? 1,
+      children: n.children.map(hydrate)
+    };
+  };
+  return reactive(hydrate(data));
+}
+export {
+  addLeaf,
+  addTab,
+  countBlocks,
+  countLeaves,
+  deserializeLayout,
+  findLeaf,
+  findParent,
+  makeLayout,
+  moveLeaf,
+  removeBlock,
+  removeLeaf,
+  reorderTab,
+  resizeAt,
+  serializeLayout,
+  setActiveTab
+};

package/dist/layout/useLayout.js

@@ -0,0 +1,61 @@
+import { shallowRef, computed, ref } from "vue";
+import { makeLayout, countBlocks, serializeLayout, resizeAt, setActiveTab, deserializeLayout, moveLeaf, removeLeaf, removeBlock, reorderTab, addTab, addLeaf } from "./tree.js";
+function useLayout(options) {
+  const limit = options.historyLimit ?? 50;
+  const layout = shallowRef(makeLayout(options.initial));
+  const count = computed(() => countBlocks(layout.value));
+  const past = ref([]);
+  const future = ref([]);
+  const canUndo = computed(() => past.value.length > 0);
+  const canRedo = computed(() => future.value.length > 0);
+  const snapshot = () => JSON.stringify(serializeLayout(layout.value));
+  function record(mutate) {
+    const before = snapshot();
+    mutate();
+    past.value.push(before);
+    if (past.value.length > limit) past.value.shift();
+    future.value = [];
+  }
+  function restore(serialized) {
+    layout.value = deserializeLayout(JSON.parse(serialized));
+  }
+  return {
+    layout,
+    count,
+    canUndo,
+    canRedo,
+    add: (block, side) => record(() => addLeaf(layout.value, block, side)),
+    addTab: (leafId, block) => record(() => addTab(layout.value, leafId, block)),
+    setActive: (leafId, index) => setActiveTab(layout.value, leafId, index),
+    reorderTab: (leafId, from, to) => record(() => reorderTab(layout.value, leafId, from, to)),
+    removeBlock: (leafId, index) => record(() => removeBlock(layout.value, leafId, index)),
+    remove: (leafId) => record(() => removeLeaf(layout.value, leafId)),
+    move: (movingId, targetId, side) => record(() => moveLeaf(layout.value, movingId, targetId, side)),
+    // Resize fires continuously during a divider drag; recording every frame
+    // would flood history, so it mutates without a snapshot. (A consumer that
+    // wants resize in history can wrap a single record() around the gesture.)
+    resize: (parent, index, delta) => resizeAt(parent, index, delta),
+    undo: () => {
+      const prev = past.value.pop();
+      if (prev === void 0) return;
+      future.value.push(snapshot());
+      restore(prev);
+    },
+    redo: () => {
+      const next = future.value.pop();
+      if (next === void 0) return;
+      past.value.push(snapshot());
+      restore(next);
+    },
+    reset: (blocks) => record(() => {
+      layout.value = makeLayout(blocks ?? options.initial);
+    }),
+    serialize: () => serializeLayout(layout.value),
+    hydrate: (data) => record(() => {
+      layout.value = deserializeLayout(data);
+    })
+  };
+}
+export {
+  useLayout
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.12.0",
+  "version": "0.14.4",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -26,7 +26,9 @@
     "./css": "./src/index.css",
     "./tokens.css": "./src/tokens/tokens.css",
     "./scrollbar.css": "./src/tokens/scrollbar.css",
-    "./canvas.css": "./src/canvas.css"
+    "./canvas.css": "./src/canvas.css",
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
@@ -58,7 +60,6 @@
     "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^3.0.0",
     "tailwindcss": "^4.0.0",
-    "vaul-vue": "^0.4.0",
     "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
@@ -80,6 +81,7 @@
     "typescript": "^5.6.3",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^5.0.2",
+    "vite-plugin-lib-inject-css": "^2.2.2",
     "vue": "3.5.31",
     "vue-tsc": "^3.0.0"
   },

package/src/component-names.ts

@@ -58,6 +58,7 @@ export const COMPONENT_NAMES = [
   "LpTabs",
   "LpTextarea",
   "LpThemeSwitcher",
+  "LpTilt",
   "LpToaster",
   "LpTooltip",
   "LpTopologyCanvas",

package/src/components/LpContextMenu.vue

@@ -34,12 +34,22 @@ export interface ContextMenuItemDef {
   children?: ContextMenuItemDef[]
 }
 
-const props = defineProps<{ items: ContextMenuItemDef[] }>()
+const props = defineProps<{
+  items: ContextMenuItemDef[]
+  /**
+   * Keep the reka menu mounted even while `items` is momentarily empty. Use when
+   * the items are resolved on the right-click itself (e.g. a list that figures
+   * out which row was clicked): without this the trigger would still be in
+   * native-menu mode on that first click and swallow it.
+   */
+  always?: boolean
+}>()
 
 // With no items, render just the trigger slot — no reka machinery — so the
 // element keeps the browser's native context menu. Lets callers wrap
-// unconditionally and pass [] to opt out per element.
-const enabled = computed(() => props.items.length > 0)
+// unconditionally and pass [] to opt out per element. `always` overrides this so
+// a late-populated menu is ready on the very first click.
+const enabled = computed(() => props.always || props.items.length > 0)
 
 const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
 const ITEM =
@@ -55,7 +65,7 @@ const ICON =
     <ContextMenuTrigger as-child>
       <slot />
     </ContextMenuTrigger>
-    <ContextMenuPortal>
+    <ContextMenuPortal v-if="items.length">
       <ContextMenuContent :class="PANEL">
         <template v-for="(item, i) in items" :key="i">
           <ContextMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />

package/src/components/LpDrawer.vue

@@ -73,6 +73,14 @@ const props = withDefaults(
      * meaningful for left/right drawers.
      */
     edgeOpen?: boolean
+    /**
+     * Tailwind breakpoint above which the edge strip is disabled. Edge
+     * swipe-to-open only makes sense on mobile: the strip listens for
+     * touch/pen pointers only, so on a desktop it can never open the drawer
+     * but still overlays the screen edge and swallows clicks. Pass the same
+     * breakpoint at which the host switches to the drawer (LpSidebar does).
+     */
+    edgeBreakpoint?: "sm" | "md" | "lg" | "xl"
     /** Width (px) of the edge grab strip. */
     edgeSize?: number
     /** Fraction (0–1) of the panel width the pull must reach to open on release. */
@@ -287,6 +295,19 @@ const edgeStripStyle = computed(() => {
     ? { right: "0", width: w }
     : { left: "0", width: w }
 })
+
+// The strip must only exist below the host's mobile breakpoint. It is hidden
+// with the same Tailwind breakpoint classes the rest of the mobile logic
+// (LpSidebar rail, burger) uses — no JS media query needed.
+const EDGE_STRIP_HIDDEN: Record<NonNullable<typeof props.edgeBreakpoint>, string> = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+}
+const edgeStripClass = computed(() =>
+  props.edgeBreakpoint ? EDGE_STRIP_HIDDEN[props.edgeBreakpoint] : "",
+)
 </script>
 
 <template>
@@ -296,6 +317,7 @@ const edgeStripStyle = computed(() => {
     <div
       ref="edgeStrip"
       class="fixed inset-y-0 z-(--z-overlay) touch-none"
+      :class="edgeStripClass"
       :style="edgeStripStyle"
       aria-hidden="true"
     />
@@ -380,9 +402,15 @@ const edgeStripStyle = computed(() => {
              no-drag wiring on the OUTER element so vaul still sees one content
              container (overlay scroll lives one level in); padding moves to the
              scroll content so the bar floats at the panel edge. -->
+        <!-- select-text (arbitrary + important): vaul injects a global
+             `[data-vaul-drawer]{user-select:none}` rule for pointer devices to
+             stop a swipe-drag from selecting text. That also kills legitimate
+             selection/Ctrl+C in the body (e.g. log lines), so we override it back
+             to selectable here. Drag-to-dismiss still starts on the handle/header
+             and empty space, not on this text. -->
         <div
           v-no-drag-controls="noDragControls"
-          class="flex min-h-0 min-w-0 flex-1 flex-col"
+          class="flex min-h-0 min-w-0 flex-1 flex-col [-webkit-user-select:text]! [user-select:text]!"
           :data-vaul-no-drag="noDragContent ? '' : undefined"
         >
           <!-- min-w-0 on the body + scroll content so a wide child (e.g. a log