@leavepulse/ui 0.43.4 → 0.44.0

package/README.md

@@ -6,9 +6,15 @@ JSON token sets), and a composable block-layout canvas.
 
 ## Install
 
-The kit is consumed by the LeavePulse apps via a `file:`/git dependency. It needs
-the peer deps it declares (`vue`, `reka-ui`, `tailwindcss`, `tailwind-variants`,
-`tailwind-merge`, `motion-v`, `@iconify/vue`).
+Published to the public npm registry:
+
+```bash
+npm install @leavepulse/ui
+```
+
+Peer dependencies to install alongside: `vue` 3.5+, `reka-ui` 2.9+, `tailwindcss` 4,
+`tailwind-variants` 3, `motion-v` 2, `@iconify/vue` 5, `@iconify-json/lucide` and
+`@internationalized/date`. `@nuxt/kit` is only needed for the Nuxt module.
 
 ## Usage
 
@@ -32,6 +38,65 @@ import { LpButton, LpModal } from "@leavepulse/ui"
 The kit does **not** ship a precompiled stylesheet — your Tailwind build emits the
 utilities its components use, scoped via the `@source` globs in the CSS entry.
 
+Apps using the topology canvas (`LpTopologyCanvas`) also import its stylesheet:
+
+```css
+@import "@leavepulse/ui/canvas.css";
+```
+
+### Theme before mount (plain Vue)
+
+Themes are JSON token sets applied at runtime. Paint the saved one before the
+app mounts, so the first frame already has the right colours:
+
+```ts
+import { bootstrapTheme, leavepulse, useTheme } from "@leavepulse/ui"
+
+bootstrapTheme(leavepulse)
+createApp(App).mount("#app")
+
+// later, from a switcher or settings page
+useTheme().setTheme(nord)
+useTheme().setSystem({ light, dark: leavepulse }) // follow the OS colour scheme
+```
+
+`LpThemeProvider` applies a theme to one subtree only (a dark sidebar in a light
+app, a live preview).
+
+### App-wide configuration
+
+`provideLpConfig` (or `app.use(lpConfig({...}))`) sets the link component that
+internal links render (`LpLink`, `LpButton` with `to`/`href`, `LpBreadcrumbs`,
+`LpSidebar` items) and overrides the English text the kit renders, per scope:
+
+```ts
+import { RouterLink } from "vue-router"
+import { lpConfig } from "@leavepulse/ui"
+
+app.use(lpConfig({
+  linkComponent: RouterLink,
+  labels: { sidebar: { search: "Suche" }, appShell: { openMenu: "Menü öffnen" } },
+}))
+```
+
+A component's own `labels` prop wins over the configuration.
+
+### Nuxt
+
+```ts
+export default defineNuxtConfig({
+  modules: ["@leavepulse/ui/nuxt"],
+  leavepulseUi: {
+    defaultTheme: "Nord",  // fallback when nothing is saved
+    themes: "~/themes",    // optional: module whose default export is your TokenSet[]
+  },
+})
+```
+
+The module registers every exported component, paints the saved theme during
+SSR (from the `lp-theme` cookie, no flash), and provides `NuxtLink` as the link
+component. `theme: false`, `link: false` and `exclude: ["Name"]` opt out.
+
 ### Native scrollbar skin (opt-in)
 
 `LpScrollArea` skins the scroll it owns. For everything it can't — the page
@@ -51,11 +116,14 @@ Hide a specific scrollbar with the `lp-scrollbar-none` class.
 ## Develop
 
 ```bash
-bun install          # also builds dist via the prepare hook
+bun install
 bun run dev          # live preview/playground on http://127.0.0.1:4500
-bun run build        # type-check + build the library to dist/
+bun test             # unit tests
+bun run build        # type-check + build the library and declarations to dist/
+npm run check:pack   # the tarball has its declarations and every export target
 bun run dev:dist     # rebuild dist on change (for a linked consumer)
 ```
 
-`dist/` is generated, not committed — the `prepare` hook rebuilds it on install so
-any consumer gets a fresh build.
+`dist/` is generated, not committed. Releases: `npm run release` (or
+`release:minor`) bumps the version and pushes the tag; CI tests, builds and
+publishes it.

package/dist/assets/{LpCommandPalette-B-0Est4Z.css → LpCommandPalette-DCP5g2ik.css}

@@ -5,81 +5,81 @@
  * pane from its right edge as it grows. Animating the columns themselves made
  * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-dialog[data-v-89a89377] {
+.lp-cmd-dialog[data-v-7fa6825e] {
   --lp-cmd-list: min(92vw, 40rem);
   --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
   width: var(--lp-cmd-list);
 }
-.lp-cmd-split[data-v-89a89377] {
+.lp-cmd-split[data-v-7fa6825e] {
   transition:
     width 300ms var(--ease-emphasized, ease),
     min-height 300ms var(--ease-emphasized, ease);
 }
 @media (min-width: 768px) {
-.lp-cmd-split .lp-cmd-list[data-v-89a89377] {
+.lp-cmd-split .lp-cmd-list[data-v-7fa6825e] {
     flex: 0 0 auto;
     /* the dialog's 1px border on each side */
     width: calc(var(--lp-cmd-list) - 2px);
 }
-.lp-cmd-dialog[data-pane="open"][data-v-89a89377] {
+.lp-cmd-dialog[data-pane="open"][data-v-7fa6825e] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-89a89377] {
+.lp-cmd-pane[data-v-7fa6825e] {
   width: var(--lp-cmd-pane);
 }
 /*
  * The pane rides in from the right edge while the dialog opens up to it, and
  * leaves the same way, for as long as the dialog takes to close over it.
  */
-.lp-cmd-pane-enter-active[data-v-89a89377],
-.lp-cmd-pane-leave-active[data-v-89a89377] {
+.lp-cmd-pane-enter-active[data-v-7fa6825e],
+.lp-cmd-pane-leave-active[data-v-7fa6825e] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-89a89377],
-.lp-cmd-pane-leave-to[data-v-89a89377] {
+.lp-cmd-pane-enter-from[data-v-7fa6825e],
+.lp-cmd-pane-leave-to[data-v-7fa6825e] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-89a89377] {
-  animation: lp-cmd-para-in-89a89377 260ms ease-out both;
+.lp-cmd-para[data-v-7fa6825e] {
+  animation: lp-cmd-para-in-7fa6825e 260ms ease-out both;
 }
-@keyframes lp-cmd-para-in-89a89377 {
+@keyframes lp-cmd-para-in-7fa6825e {
 from {
     opacity: 0;
     transform: translateY(4px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-89a89377],
-  .lp-cmd-pane-enter-active[data-v-89a89377],
-  .lp-cmd-pane-leave-active[data-v-89a89377] {
+.lp-cmd-split[data-v-7fa6825e],
+  .lp-cmd-pane-enter-active[data-v-7fa6825e],
+  .lp-cmd-pane-leave-active[data-v-7fa6825e] {
     transition: none;
 }
-.lp-cmd-para[data-v-89a89377] {
+.lp-cmd-para[data-v-7fa6825e] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-89a89377] {
+.lp-cmd-excerpt[data-v-7fa6825e] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-89a89377] {
-  animation: lp-cmd-in-89a89377 140ms ease-out both;
+.lp-cmd-item[data-v-7fa6825e] {
+  animation: lp-cmd-in-7fa6825e 140ms ease-out both;
 }
-@keyframes lp-cmd-in-89a89377 {
+@keyframes lp-cmd-in-7fa6825e {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-89a89377] {
+.lp-cmd-item[data-v-7fa6825e] {
     animation: none;
 }
 }

package/dist/assets/{LpDropzone-BBoWvi-J.css → LpDropzone-i4BdMi1H.css}

@@ -1,9 +1,9 @@
 
-.lp-dropzone__frame rect[data-v-5e560a6d] {
+.lp-dropzone__frame rect[data-v-6f6d375e] {
   stroke: var(--color-line);
   transition: stroke var(--duration-fast) linear;
 }
-.lp-dropzone:hover .lp-dropzone__frame rect[data-v-5e560a6d] {
+.lp-dropzone:hover .lp-dropzone__frame rect[data-v-6f6d375e] {
   stroke: var(--color-line-strong);
 }
 
@@ -12,33 +12,33 @@
    with every other thing on it; under a drag it is the answer to "can I let go
    here". One dash period per cycle, so the travel is continuous rather than
    jumping back at the seam. */
-.lp-dropzone--over .lp-dropzone__frame rect[data-v-5e560a6d] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-6f6d375e] {
   stroke: var(--color-brand);
-  animation: lp-dropzone-ants-5e560a6d 500ms linear infinite;
+  animation: lp-dropzone-ants-6f6d375e 500ms linear infinite;
 }
-@keyframes lp-dropzone-ants-5e560a6d {
+@keyframes lp-dropzone-ants-6f6d375e {
 to {
     stroke-dashoffset: -11;
 }
 }
 
 /* The dashes fade in and the block settles up a few pixels. */
-.lp-dropzone[data-v-5e560a6d] {
-  animation: lp-dropzone-in-5e560a6d var(--duration-slow) var(--ease-settle) both;
+.lp-dropzone[data-v-6f6d375e] {
+  animation: lp-dropzone-in-6f6d375e var(--duration-slow) var(--ease-settle) both;
 }
-.lp-dropzone--waiting[data-v-5e560a6d] {
+.lp-dropzone--waiting[data-v-6f6d375e] {
   opacity: 0;
   animation: none;
 }
-@keyframes lp-dropzone-in-5e560a6d {
+@keyframes lp-dropzone-in-6f6d375e {
 from {
     opacity: 0;
     transform: translateY(6px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-dropzone[data-v-5e560a6d],
-  .lp-dropzone--waiting[data-v-5e560a6d] {
+.lp-dropzone[data-v-6f6d375e],
+  .lp-dropzone--waiting[data-v-6f6d375e] {
     opacity: 1;
     transform: none;
     animation: none;
@@ -46,7 +46,7 @@ from {
 
   /* The ants stop, the colour stays: the brand stroke is what says "drop
      here", and it says it standing still. */
-.lp-dropzone--over .lp-dropzone__frame rect[data-v-5e560a6d] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-6f6d375e] {
     animation: none;
 }
 }

package/dist/assets/{LpImageEditor-Ct7Y3aNu.css → LpImageEditor-CbMA82g8.css}

@@ -2,22 +2,22 @@
 /* The picture settles into the frame instead of appearing in it. Scale rather
    than a slide: the frame is the fixed thing here and the image lives inside
    it, so anything that moved would read as a crop that had shifted. */
-.lp-editor__image[data-v-a19a8cf6] {
-  animation: lp-editor-in-a19a8cf6 var(--duration-slow) var(--ease-settle) both;
+.lp-editor__image[data-v-b510205a] {
+  animation: lp-editor-in-b510205a var(--duration-slow) var(--ease-settle) both;
 }
-.lp-editor__image--waiting[data-v-a19a8cf6] {
+.lp-editor__image--waiting[data-v-b510205a] {
   opacity: 0;
   animation: none;
 }
-@keyframes lp-editor-in-a19a8cf6 {
+@keyframes lp-editor-in-b510205a {
 from {
     opacity: 0;
     scale: 1.04;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-editor__image[data-v-a19a8cf6],
-  .lp-editor__image--waiting[data-v-a19a8cf6] {
+.lp-editor__image[data-v-b510205a],
+  .lp-editor__image--waiting[data-v-b510205a] {
     opacity: 1;
     scale: 1;
     animation: none;

package/dist/assets/{LpShortcutsDialog-C6YoQ8_M.css → LpShortcutsDialog-ChUyU7oV.css}

@@ -1,12 +1,12 @@
 
 /* Two columns where there is room: the list is long enough that one column
    pushes the last group off a laptop screen. */
-.shortcut-groups[data-v-8af3bafc] {
+.shortcut-groups[data-v-b7784bfc] {
   display: grid;
   gap: 18px;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 }
-.shortcut-group h3[data-v-8af3bafc] {
+.shortcut-group h3[data-v-b7784bfc] {
   margin: 0 0 6px;
   color: var(--color-muted);
   font-size: 0.7rem;
@@ -14,31 +14,31 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-.shortcut-group dl[data-v-8af3bafc] {
+.shortcut-group dl[data-v-b7784bfc] {
   display: flex;
   flex-direction: column;
   gap: 1px;
   margin: 0;
 }
-.shortcut-row[data-v-8af3bafc] {
+.shortcut-row[data-v-b7784bfc] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 5px 0;
 }
-.shortcut-row dt[data-v-8af3bafc] {
+.shortcut-row dt[data-v-b7784bfc] {
   color: var(--color-ink);
   font-size: 0.82rem;
   min-width: 0;
 }
-.shortcut-row dd[data-v-8af3bafc] {
+.shortcut-row dd[data-v-b7784bfc] {
   display: flex;
   flex-shrink: 0;
   gap: 3px;
   margin: 0;
 }
-kbd[data-v-8af3bafc] {
+kbd[data-v-b7784bfc] {
   display: inline-flex;
   min-width: 20px;
   align-items: center;

package/dist/assets/{LpSkeleton-D7xU8IPV.css → LpSkeleton-H3Z5dEIk.css}

@@ -22,7 +22,10 @@
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-skeleton-item {
+  /* Repeats the descendant form: it outranks a bare class, and grouped items
+     kept pulsing under reduced motion. */
+.lp-skeleton-item,
+  .lp-skeleton .lp-skeleton-item {
     animation: none;
     opacity: 0.75;
 }

package/dist/assets/{LpTable-BgPLJOXa.css → LpTable-DDQNdf86.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-e0bb036b],
-.lp-row-leave-active[data-v-e0bb036b] {
+.lp-row-enter-active[data-v-ebce6d15],
+.lp-row-leave-active[data-v-ebce6d15] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-e0bb036b] {
+.lp-row-move[data-v-ebce6d15] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-e0bb036b],
-.lp-row-leave-to[data-v-e0bb036b] {
+.lp-row-enter-from[data-v-ebce6d15],
+.lp-row-leave-to[data-v-ebce6d15] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-e0bb036b] {
+.lp-row-empty.lp-row-leave-active[data-v-ebce6d15] {
   display: none;
 }
 
@@ -50,9 +50,9 @@
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-e0bb036b],
-  .lp-row-leave-active[data-v-e0bb036b],
-  .lp-row-move[data-v-e0bb036b] {
+.lp-row-enter-active[data-v-ebce6d15],
+  .lp-row-leave-active[data-v-ebce6d15],
+  .lp-row-move[data-v-ebce6d15] {
     transition: none;
 }
 }

package/dist/chunks/ContextMenuItems-CrfeNPWT.js

@@ -0,0 +1,123 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, createCommentVNode, withCtx, createVNode, normalizeClass, createElementVNode, createTextVNode, toDisplayString, withModifiers } from "vue";
+import { ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuPortal, ContextMenuSubContent, ContextMenuCheckboxItem, ContextMenuItem } from "reka-ui";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = { class: "flex items-center gap-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-xs text-muted"
+};
+const _hoisted_4 = { class: "flex items-center gap-2" };
+const _hoisted_5 = {
+  key: 0,
+  class: "text-xs text-muted"
+};
+const ITEM = "group/item flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft";
+const ICON = "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContextMenuItems" },
+  __name: "ContextMenuItems",
+  props: {
+    items: {},
+    panel: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_ContextMenuItems = resolveComponent("ContextMenuItems", true);
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
+        return openBlock(), createElementBlock(Fragment, { key: i }, [
+          item.separatorBefore ? (openBlock(), createBlock(unref(ContextMenuSeparator), {
+            key: 0,
+            class: "my-1 h-px bg-line"
+          })) : createCommentVNode("", true),
+          item.children?.length ? (openBlock(), createBlock(unref(ContextMenuSub), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(unref(ContextMenuSubTrigger), {
+                class: normalizeClass([ITEM, "justify-between text-ink data-[highlighted]:text-brand data-[state=open]:bg-brand-soft data-[state=open]:text-brand"]),
+                disabled: item.disabled
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("span", _hoisted_1, [
+                    item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                      key: 0,
+                      name: item.icon,
+                      size: 15,
+                      class: normalizeClass(ICON)
+                    }, null, 8, ["name"])) : createCommentVNode("", true),
+                    createTextVNode(" " + toDisplayString(item.label), 1)
+                  ]),
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:chevron-right",
+                    size: 14,
+                    class: "text-muted"
+                  })
+                ]),
+                _: 2
+              }, 1032, ["class", "disabled"]),
+              createVNode(unref(ContextMenuPortal), null, {
+                default: withCtx(() => [
+                  createVNode(unref(ContextMenuSubContent), {
+                    class: normalizeClass(__props.panel),
+                    "side-offset": 2,
+                    "align-offset": -4
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_ContextMenuItems, {
+                        items: item.children,
+                        panel: __props.panel
+                      }, null, 8, ["items", "panel"])
+                    ]),
+                    _: 2
+                  }, 1032, ["class"])
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            _: 2
+          }, 1024)) : item.checked !== void 0 ? (openBlock(), createBlock(unref(ContextMenuCheckboxItem), {
+            key: 2,
+            "model-value": item.checked,
+            class: normalizeClass([ITEM, "justify-between text-ink data-[highlighted]:text-brand"]),
+            disabled: item.disabled,
+            onSelect: withModifiers(($event) => item.onSelect?.(), ["prevent"])
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_2, [
+                createVNode(_sfc_main$1, {
+                  name: item.checked ? "lucide:check" : "lucide:minus",
+                  size: 15,
+                  class: normalizeClass([ICON, item.checked ? "" : "opacity-25"])
+                }, null, 8, ["name", "class"]),
+                createTextVNode(" " + toDisplayString(item.label), 1)
+              ]),
+              item.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_3, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)
+            ]),
+            _: 2
+          }, 1032, ["model-value", "class", "disabled", "onSelect"])) : (openBlock(), createBlock(unref(ContextMenuItem), {
+            key: 3,
+            class: normalizeClass([ITEM, "justify-between", item.danger ? "text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger" : "text-ink data-[highlighted]:text-brand"]),
+            disabled: item.disabled,
+            onSelect: ($event) => item.onSelect?.()
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_4, [
+                item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  name: item.icon,
+                  size: 15,
+                  class: normalizeClass(ICON)
+                }, null, 8, ["name"])) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(item.label), 1)
+              ]),
+              item.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_5, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)
+            ]),
+            _: 2
+          }, 1032, ["class", "disabled", "onSelect"]))
+        ], 64);
+      }), 128);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LayoutCanvas-Dd20boUG.js → LayoutCanvas-D-jPOAvg.js}

@@ -1,6 +1,7 @@
-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";
+import { defineComponent, ref, computed, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { _ as _sfc_main$1 } from "./LayoutNode-D8Xy9N-o.js";
+import { resizeAt, setActiveTab, reorderTab, removeBlock, moveLeaf } from "../layout/tree.js";
+import { layoutController } from "../layout/useLayout.js";
 const _hoisted_1 = { class: "flex min-h-0 min-w-0 flex-1" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutCanvas",
@@ -13,12 +14,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const dragId = ref(null);
+    const edits = computed(() => {
+      const tree = props.modelValue;
+      return layoutController(tree) ?? {
+        move: (movingId, targetId, side) => moveLeaf(tree, movingId, targetId, side),
+        removeBlock: (leafId, index) => removeBlock(tree, leafId, index),
+        reorderTab: (leafId, from, to) => reorderTab(tree, leafId, from, to),
+        setActive: (leafId, index) => setActiveTab(tree, leafId, index),
+        resize: (parent, index, delta) => resizeAt(parent, index, delta),
+        beginResize: () => {
+        },
+        endResize: () => {
+        }
+      };
+    });
     function onDrop(targetId, side) {
-      if (dragId.value) moveLeaf(props.modelValue, dragId.value, targetId, side);
+      if (dragId.value) edits.value.move(dragId.value, targetId, side);
       dragId.value = null;
     }
     function onResize(parent, index, delta) {
-      resizeAt(parent, index, delta);
+      edits.value.resize(parent, index, delta);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -31,10 +46,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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
+          onSetActive: _cache[2] || (_cache[2] = (leafId, i) => edits.value.setActive(leafId, i)),
+          onRemoveBlock: _cache[3] || (_cache[3] = (leafId, i) => edits.value.removeBlock(leafId, i)),
+          onReorderTab: _cache[4] || (_cache[4] = (leafId, from, to) => edits.value.reorderTab(leafId, from, to)),
+          onResize,
+          onResizeStart: _cache[5] || (_cache[5] = ($event) => edits.value.beginResize()),
+          onResizeEnd: _cache[6] || (_cache[6] = ($event) => edits.value.endResize())
         }, {
           block: withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "block", normalizeProps(guardReactiveProps(slotProps)))

package/dist/chunks/{LayoutNode-DGpZA9LX.js → LayoutNode-D8Xy9N-o.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode, normalizeStyle, withCtx, renderSlot, mergeProps, createElementVNode, createCommentVNode, createBlock, unref, withModifiers, toDisplayString } from "vue";
+import { defineComponent, ref, computed, onBeforeUnmount, 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";
@@ -20,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     edit: { type: Boolean },
     registry: {}
   },
-  emits: ["dragstart", "dragend", "drop", "set-active", "remove-block", "reorder-tab", "resize"],
+  emits: ["dragstart", "dragend", "drop", "set-active", "remove-block", "reorder-tab", "resize", "resize-start", "resize-end"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -80,10 +80,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       else if (py > 1 - edge) hoverSide.value = "bottom";
       else hoverSide.value = "center";
     }
+    let stopSplitter = null;
+    onBeforeUnmount(() => stopSplitter?.());
     function startSplitter(ev, parent, index) {
       ev.preventDefault();
-      const host = ev.currentTarget.parentElement;
+      const handle = ev.currentTarget;
+      const host = handle.parentElement;
       if (!host) return;
+      handle.setPointerCapture?.(ev.pointerId);
+      emit("resize-start");
       const rect = host.getBoundingClientRect();
       const horizontal = parent.dir === "row";
       const span = horizontal ? rect.width : rect.height;
@@ -96,9 +101,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const up = () => {
         window.removeEventListener("pointermove", move);
         window.removeEventListener("pointerup", up);
+        window.removeEventListener("pointercancel", up);
+        stopSplitter = null;
+        emit("resize-end");
       };
+      stopSplitter = up;
       window.addEventListener("pointermove", move);
       window.addEventListener("pointerup", up);
+      window.addEventListener("pointercancel", up);
     }
     return (_ctx, _cache) => {
       const _component_LayoutNode = resolveComponent("LayoutNode", true);
@@ -122,7 +132,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               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))
+              onResize: _cache[6] || (_cache[6] = (p, idx, d) => emit("resize", p, idx, d)),
+              onResizeStart: _cache[7] || (_cache[7] = ($event) => emit("resize-start")),
+              onResizeEnd: _cache[8] || (_cache[8] = ($event) => emit("resize-end"))
             }, {
               block: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "block", mergeProps({ ref_for: true }, slotProps))
@@ -151,8 +163,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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")))
+            onDragstart: _cache[9] || (_cache[9] = ($event) => emit("dragstart", __props.node.id)),
+            onDragend: _cache[10] || (_cache[10] = ($event) => (hoverSide.value = null, emit("dragend")))
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(leaf.value.blocks, (block, i) => {
               return openBlock(), createElementBlock("button", {
@@ -202,8 +214,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 1,
             class: "absolute inset-0 z-[5]",
             onDragover: onDragOver,
-            onDragleave: _cache[9] || (_cache[9] = ($event) => hoverSide.value = null),
-            onDrop: _cache[10] || (_cache[10] = () => {
+            onDragleave: _cache[11] || (_cache[11] = ($event) => hoverSide.value = null),
+            onDrop: _cache[12] || (_cache[12] = () => {
               const s = hoverSide.value;
               hoverSide.value = null;
               if (s) emit("drop", __props.node.id, s);