@leavepulse/ui 0.77.3 → 0.78.0

package/README.md

@@ -130,6 +130,30 @@ again, nothing remounts). A Forward onto a kit entry still reaches it that
 way, because the entry it starts from belongs to the router. Plain
 `pushState` and `popstate` only, so WebKit (Safari, WebKitGTK) works too.
 
+### Module format
+
+The package is ESM only: `require("@leavepulse/ui")` is not supported. Import
+from the package root; `@leavepulse/ui/dist/*.js` also resolves, for a tool
+that needs one file (the Nuxt module does), and covers `components`,
+`composables`, `layout` and `theme`.
+
+### Catching a misspelt prop
+
+A prop a component does not declare falls through as an attribute with no
+error, so `<LpTooltip text="...">` renders with no tip. `lpPropCheck` warns in
+development, and knows `data-*`, `aria-*` and anything the rendered element
+takes. The Nuxt module installs it in `nuxt dev` (`propCheck: false` turns it off).
+
+```ts
+import { lpPropCheck } from "@leavepulse/ui"
+if (import.meta.env.DEV) app.use(lpPropCheck, { ignore: [/^x-/] })
+```
+
+vue-tsc also skips unknown props by default. `vueCompilerOptions.checkUnknownProps`
+in the app's tsconfig turns that on, but it also reports attributes passed
+through on purpose (`id`, `title`, `aria-*`), so it suits a one-off sweep better
+than a standing gate.
+
 ### Nuxt
 
 ```ts
@@ -231,6 +255,46 @@ bun run dev:dist     # rebuild dist on change (for a linked consumer)
 `release:minor`) bumps the version and pushes the tag; CI tests, builds and
 publishes it.
 
+### Linked views
+
+A monitoring screen shares one selection, one stretch of time and one followed
+trace. `provideLinkedView()` holds them, and each `link*` binder turns them into
+the props and listeners of a component it already has, for `v-bind`:
+
+```ts
+const view = provideLinkedView()
+const canvas = ref()
+const table = linkTable(view, { kind: "server" })
+const graph = linkTopology(view, canvas, { kind: "server" })
+const log = linkLog(view, { kind: "server" })
+const chart = linkChart(view, { times })
+const pipeline = linkPipeline(view, { kind: "deployment", steps })
+```
+
+Picking a row focuses the node and filters the log to its source; a picked log
+line becomes a chart annotation; a clicked trace id fills the log search; the
+chart's window is the time range the log shows; selecting a deployment opens its
+failed steps. A binder with a `kind` answers only to that kind. The log needs
+`selectable` and `link-ids`, a chart `zoomable` or `range-selector` to change
+the range. `useLinkedView()` reads the view from a child; with none provided it
+is private to that panel. The table link holds one row at a time.
+
+### Workspaces, inspector and windows
+
+`useWorkspaces` keeps several named layouts over one `useLayout`; bind
+`spaces.controller.layout` to `LayoutCanvas` as usual. Edits save to the active
+workspace on their own, and `persist` keeps them across visits. A switch clears
+undo: history belongs to one workspace. `LpWorkspaceSwitcher` is the menu for it.
+
+`LpInspector` is the panel beside a table or graph for the selected thing:
+`sections` of facts, `#section-<key>` for editing fields, `#empty` with nothing
+selected. It sits in the layout. On a phone, put it in an `LpDrawer`.
+
+`LpWindow` is a floating panel the page keeps working under: move, resize, dock
+on a screen edge, snap to other windows, `persist` for its place. It stays out
+of the modal stack and under dropdowns; it is not a window manager (no
+minimising, no taskbar).
+
 ### Repeatable form rows
 
 `LpRepeater` supplies add/remove controls and stable row identity. Its slot owns
@@ -268,6 +332,10 @@ objects are edited, reordered or removed. The slot also provides `index`,
 disabled/read-only state, and can be combined with the `trailing` slot. Its
 button text comes from `labels.clear` or the app-wide `input` label scope.
 
+### Staying in the right window
+
+`tests/realmGuard.test.ts` fails on `instanceof Element`, a bare `new ResizeObserver`, `getComputedStyle` or `document.activeElement`: inside an LpFrame those are another realm's. Use `composables/realm.ts`.
+
 ### Browser regression tests
 
 ```sh

package/dist/assets/{LpCommandPalette-DOIZHw-g.css → LpCommandPalette-DDJKICKh.css}

@@ -5,34 +5,34 @@
  * 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-2880ef37] {
+.lp-cmd-dialog[data-v-04518689] {
   --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-2880ef37] {
+.lp-cmd-split[data-v-04518689] {
   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-2880ef37] {
+.lp-cmd-split .lp-cmd-list[data-v-04518689] {
     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-2880ef37] {
+.lp-cmd-dialog[data-pane="open"][data-v-04518689] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-2880ef37] {
+.lp-cmd-pane[data-v-04518689] {
   width: var(--lp-cmd-pane);
 }
-.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-2880ef37] {
+.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-04518689] {
   width: 100%;
 }
-.lp-cmd-dialog[data-editing][data-v-2880ef37] {
+.lp-cmd-dialog[data-editing][data-v-04518689] {
   width: var(--lp-cmd-list);
   min-height: 0;
 }
@@ -40,43 +40,43 @@
  * 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-2880ef37],
-.lp-cmd-pane-leave-active[data-v-2880ef37] {
+.lp-cmd-pane-enter-active[data-v-04518689],
+.lp-cmd-pane-leave-active[data-v-04518689] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-2880ef37],
-.lp-cmd-pane-leave-to[data-v-2880ef37] {
+.lp-cmd-pane-enter-from[data-v-04518689],
+.lp-cmd-pane-leave-to[data-v-04518689] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-2880ef37] {
+.lp-cmd-para[data-v-04518689] {
   --rise: 4px;
   animation: rise-in 260ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-2880ef37],
-  .lp-cmd-pane-enter-active[data-v-2880ef37],
-  .lp-cmd-pane-leave-active[data-v-2880ef37] {
+.lp-cmd-split[data-v-04518689],
+  .lp-cmd-pane-enter-active[data-v-04518689],
+  .lp-cmd-pane-leave-active[data-v-04518689] {
     transition: none;
 }
-.lp-cmd-para[data-v-2880ef37] {
+.lp-cmd-para[data-v-04518689] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-2880ef37] {
+.lp-cmd-excerpt[data-v-04518689] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-2880ef37] {
+.lp-cmd-item[data-v-04518689] {
   --rise: 3px;
   animation: rise-in 140ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-2880ef37] {
+.lp-cmd-item[data-v-04518689] {
     animation: none;
 }
 }

package/dist/assets/{LpDock-Cbh0wQUv.css → LpDock-Dw82tWVD.css}

@@ -2,16 +2,16 @@
 /* The bar keeps its rest thickness while icons swell: they grow out of it
    (upward, or to the right when vertical) instead of pushing the bar, and
    with it whatever sits next to the bar, around on every pointer move. */
-[data-orientation="horizontal"][data-v-0f41b35e] {
+[data-orientation="horizontal"][data-v-60ed6f1d] {
   height: calc(var(--lp-dock-rest) + 0.75rem + 2px);
 }
-[data-orientation="vertical"][data-v-0f41b35e] {
+[data-orientation="vertical"][data-v-60ed6f1d] {
   width: calc(var(--lp-dock-rest) + 0.75rem + 2px);
 }
 
 /* Size is a custom property the spring writes per frame; the rest size is the
    fallback so the first paint (and touch, and reduced motion) needs no script. */
-.lp-dock-item[data-v-0f41b35e] {
+.lp-dock-item[data-v-60ed6f1d] {
   width: var(--lp-dock-size, var(--lp-dock-rest));
   height: var(--lp-dock-size, var(--lp-dock-rest));
 }

package/dist/assets/{LpDropzone-B_qRq1-R.css → LpDropzone-DNbh_NFJ.css}

@@ -1,9 +1,9 @@
 
-.lp-dropzone__frame rect[data-v-afb08dd3] {
+.lp-dropzone__frame rect[data-v-d6722eb0] {
   stroke: var(--color-line);
   transition: stroke var(--duration-fast) linear;
 }
-.lp-dropzone:hover .lp-dropzone__frame rect[data-v-afb08dd3] {
+.lp-dropzone:hover .lp-dropzone__frame rect[data-v-d6722eb0] {
   stroke: var(--color-line-strong);
 }
 
@@ -12,28 +12,28 @@
    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-afb08dd3] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-d6722eb0] {
   stroke: var(--color-brand);
-  animation: lp-dropzone-ants-afb08dd3 500ms linear infinite;
+  animation: lp-dropzone-ants-d6722eb0 500ms linear infinite;
 }
-@keyframes lp-dropzone-ants-afb08dd3 {
+@keyframes lp-dropzone-ants-d6722eb0 {
 to {
     stroke-dashoffset: -11;
 }
 }
 
 /* The dashes fade in and the block settles up a few pixels. */
-.lp-dropzone[data-v-afb08dd3] {
+.lp-dropzone[data-v-d6722eb0] {
   --rise: 6px;
   animation: rise-in var(--duration-slow) var(--ease-settle) both;
 }
-.lp-dropzone--waiting[data-v-afb08dd3] {
+.lp-dropzone--waiting[data-v-d6722eb0] {
   opacity: 0;
   animation: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-dropzone[data-v-afb08dd3],
-  .lp-dropzone--waiting[data-v-afb08dd3] {
+.lp-dropzone[data-v-d6722eb0],
+  .lp-dropzone--waiting[data-v-d6722eb0] {
     opacity: 1;
     transform: none;
     animation: none;
@@ -41,7 +41,7 @@ to {
 
   /* 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-afb08dd3] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-d6722eb0] {
     animation: none;
 }
 }

package/dist/assets/{LpImageEditor-XM5bAziW.css → LpImageEditor-Bgu20XLs.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-7eb4ac08] {
-  animation: lp-editor-in-7eb4ac08 var(--duration-slow) var(--ease-settle) both;
+.lp-editor__image[data-v-8895a6b2] {
+  animation: lp-editor-in-8895a6b2 var(--duration-slow) var(--ease-settle) both;
 }
-.lp-editor__image--waiting[data-v-7eb4ac08] {
+.lp-editor__image--waiting[data-v-8895a6b2] {
   opacity: 0;
   animation: none;
 }
-@keyframes lp-editor-in-7eb4ac08 {
+@keyframes lp-editor-in-8895a6b2 {
 from {
     opacity: 0;
     scale: 1.04;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-editor__image[data-v-7eb4ac08],
-  .lp-editor__image--waiting[data-v-7eb4ac08] {
+.lp-editor__image[data-v-8895a6b2],
+  .lp-editor__image--waiting[data-v-8895a6b2] {
     opacity: 1;
     scale: 1;
     animation: none;

package/dist/assets/{LpTable-Bv-EcQs7.css → LpTable-CCk0ZHo7.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-d2bafc29],
-.lp-row-leave-active[data-v-d2bafc29] {
+.lp-row-enter-active[data-v-48ad51fc],
+.lp-row-leave-active[data-v-48ad51fc] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-d2bafc29] {
+.lp-row-move[data-v-48ad51fc] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-d2bafc29],
-.lp-row-leave-to[data-v-d2bafc29] {
+.lp-row-enter-from[data-v-48ad51fc],
+.lp-row-leave-to[data-v-48ad51fc] {
   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-d2bafc29] {
+.lp-row-empty.lp-row-leave-active[data-v-48ad51fc] {
   display: none;
 }
 
@@ -54,7 +54,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-d2bafc29] {
+.lp-tick[data-v-48ad51fc] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -66,17 +66,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-d2bafc29] {
+.lp-tick-open[data-v-48ad51fc] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-d2bafc29],
-.lp-tick-cue[data-v-d2bafc29] {
+.lp-tick-hidden[data-v-48ad51fc],
+.lp-tick-cue[data-v-48ad51fc] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-d2bafc29],
-.lp-tick-cue[data-v-d2bafc29]:focus-within {
+tr:hover .lp-tick-cue[data-v-48ad51fc],
+.lp-tick-cue[data-v-48ad51fc]:focus-within {
   opacity: 1;
 }
 
@@ -84,24 +84,24 @@ tr:hover .lp-tick-cue[data-v-d2bafc29],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-d2bafc29] {
+tr:hover .lp-tick-cue[data-v-48ad51fc] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-d2bafc29],
-  .lp-tick-cue[data-v-d2bafc29] {
+.lp-tick-hidden[data-v-48ad51fc],
+  .lp-tick-cue[data-v-48ad51fc] {
     max-width: 0;
     padding-inline: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-d2bafc29],
-  .lp-row-leave-active[data-v-d2bafc29],
-  .lp-row-move[data-v-d2bafc29],
-  .lp-tick[data-v-d2bafc29] {
+.lp-row-enter-active[data-v-48ad51fc],
+  .lp-row-leave-active[data-v-48ad51fc],
+  .lp-row-move[data-v-48ad51fc],
+  .lp-tick[data-v-48ad51fc] {
     transition: none;
 }
 }

package/dist/assets/LpTabs-Bh7a-Bdl.css

@@ -0,0 +1,18 @@
+
+.lp-tab-badge-enter-active[data-v-ef828291],
+.lp-tab-badge-leave-active[data-v-ef828291] {
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    transform var(--duration-fast) var(--ease-emphasized);
+}
+.lp-tab-badge-enter-from[data-v-ef828291],
+.lp-tab-badge-leave-to[data-v-ef828291] {
+  opacity: 0;
+  transform: scale(0.6);
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-tab-badge-enter-active[data-v-ef828291],
+  .lp-tab-badge-leave-active[data-v-ef828291] {
+    transition: none;
+}
+}

package/dist/chunks/AppShellContextNav-C6Ho2mof.js

@@ -0,0 +1,49 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, createTextVNode, toDisplayString } from "vue";
+import { useLinkComponent } from "../composables/useLpConfig.js";
+import { resolveLink } from "../components/link.js";
+const _hoisted_1 = ["aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppShellContextNav",
+  props: {
+    items: {},
+    isActive: { type: Function },
+    label: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const linkComponent = useLinkComponent();
+    function rowOf(item) {
+      const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href });
+      return link ?? { is: "button", props: { type: "button", disabled: item.disabled || void 0 } };
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        "aria-label": props.label,
+        class: "flex shrink-0 gap-1 overflow-x-auto border-b border-line bg-surface px-4 py-1.5 lp-scrollbar-none"
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+          return openBlock(), createBlock(resolveDynamicComponent(rowOf(item).is), mergeProps({
+            key: item.id
+          }, { ref_for: true }, rowOf(item).props, {
+            "aria-current": __props.isActive(item) ? "page" : void 0,
+            class: [
+              "shrink-0 rounded-control px-2.5 py-1 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring",
+              item.disabled ? "cursor-not-allowed opacity-45" : __props.isActive(item) ? "bg-surface-soft text-ink" : "text-muted hover:text-ink"
+            ],
+            onClick: ($event) => emit("select", item)
+          }), {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(item.label), 1)
+            ]),
+            _: 2
+          }, 1040, ["aria-current", "class", "onClick"]);
+        }), 128))
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/ChartRangeSelector-HO0sMMz6.js

@@ -0,0 +1,129 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, withModifiers } from "vue";
+import { startPointerDrag } from "../composables/pointerDrag.js";
+import { lttbIndices, MIN_RANGE_POINTS, clampRange, panRange } from "../components/chartWindow.js";
+const _hoisted_1 = ["width"];
+const _hoisted_2 = ["d"];
+const _hoisted_3 = ["aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "onPointerdown", "onKeydown"];
+const HEIGHT = 36;
+const GRIP = 8;
+const INSET = 2;
+const OUTLINE_POINTS = 120;
+const PAGE_DIVISOR = 10;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartRangeSelector",
+  props: {
+    values: {},
+    count: {},
+    range: {},
+    width: {},
+    labels: {},
+    startLabel: {},
+    endLabel: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const last = computed(() => Math.max(1, props.count - 1));
+    const whole = computed(() => props.range ?? { start: 0, end: props.count - 1 });
+    const toX = (index) => index / last.value * props.width;
+    const toIndex = (x) => x / (props.width || 1) * last.value;
+    const outline = computed(() => {
+      const picked = lttbIndices(props.values, OUTLINE_POINTS);
+      const present = picked.map((i) => props.values[i]);
+      if (present.length < MIN_RANGE_POINTS) return "";
+      const low = Math.min(...present);
+      const high = Math.max(...present);
+      const span = high - low || 1;
+      const room = HEIGHT - INSET * 2;
+      return picked.map((i, n) => `${n ? "L" : "M"}${toX(i).toFixed(1)} ${(HEIGHT - INSET - (present[n] - low) / span * room).toFixed(1)}`).join(" ");
+    });
+    const left = computed(() => toX(whole.value.start));
+    const right = computed(() => toX(whole.value.end));
+    function press(part, event) {
+      if (event.button !== 0) return;
+      const x = event.clientX;
+      const from = whole.value;
+      const { start, end } = from;
+      startPointerDrag(event, {
+        move(e) {
+          const delta = toIndex(e.clientX - x);
+          if (part === "window") emit("change", panRange(from, props.count, delta));
+          else if (part === "start") emit("change", clampRange({ start: Math.min(start + delta, end - 1), end }, props.count));
+          else emit("change", clampRange({ start, end: Math.max(end + delta, start + 1) }, props.count));
+        },
+        end: () => {
+        }
+      });
+    }
+    function onKey(part, event) {
+      const page = Math.max(1, Math.round(props.count / PAGE_DIVISOR));
+      const steps = { ArrowLeft: -1, ArrowDown: -1, ArrowRight: 1, ArrowUp: 1, PageDown: -page, PageUp: page };
+      const step = steps[event.key];
+      const { start, end } = whole.value;
+      if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        const edge = event.key === "Home" ? 0 : props.count - 1;
+        emit("change", clampRange(part === "start" ? { start: Math.min(edge, end - 1), end } : { start, end: Math.max(edge, start + 1) }, props.count));
+        return;
+      }
+      if (!step) return;
+      event.preventDefault();
+      emit("change", clampRange(part === "start" ? { start: Math.min(start + step, end - 1), end } : { start, end: Math.max(end + step, start + 1) }, props.count));
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "relative select-none touch-none",
+        style: normalizeStyle({ height: `${HEIGHT}px`, width: `${__props.width}px` })
+      }, [
+        (openBlock(), createElementBlock("svg", {
+          width: __props.width,
+          height: HEIGHT,
+          class: "absolute inset-0 block",
+          "aria-hidden": "true"
+        }, [
+          createElementVNode("path", {
+            d: outline.value,
+            fill: "none",
+            stroke: "var(--color-line-strong)",
+            "stroke-width": "1"
+          }, null, 8, _hoisted_2)
+        ], 8, _hoisted_1)),
+        createElementVNode("div", {
+          class: "absolute inset-y-0 left-0 bg-surface-soft opacity-70",
+          style: normalizeStyle({ width: `${left.value}px` })
+        }, null, 4),
+        createElementVNode("div", {
+          class: "absolute inset-y-0 right-0 bg-surface-soft opacity-70",
+          style: normalizeStyle({ width: `${Math.max(0, __props.width - right.value)}px` })
+        }, null, 4),
+        createElementVNode("div", {
+          "data-lp-chart-window": "",
+          class: "absolute inset-y-0 cursor-grab border-y border-line-strong active:cursor-grabbing",
+          style: normalizeStyle({ left: `${left.value}px`, width: `${Math.max(1, right.value - left.value)}px` }),
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => press("window", $event))
+        }, null, 36),
+        (openBlock(), createElementBlock(Fragment, null, renderList(["start", "end"], (edge) => {
+          return createElementVNode("div", {
+            key: edge,
+            role: "slider",
+            tabindex: "0",
+            "aria-orientation": "horizontal",
+            "aria-label": edge === "start" ? __props.startLabel : __props.endLabel,
+            "aria-valuemin": edge === "start" ? 0 : whole.value.start + 1,
+            "aria-valuemax": edge === "start" ? whole.value.end - 1 : __props.count - 1,
+            "aria-valuenow": whole.value[edge],
+            "aria-valuetext": __props.labels[whole.value[edge]],
+            class: "absolute inset-y-0 -ml-1 cursor-ew-resize rounded-inner bg-line-strong outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            style: normalizeStyle({ left: `${edge === "start" ? left.value : right.value}px`, width: `${GRIP}px` }),
+            onPointerdown: withModifiers(($event) => press(edge, $event), ["stop"]),
+            onKeydown: ($event) => onKey(edge, $event)
+          }, null, 44, _hoisted_3);
+        }), 64))
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{ContextMenuItems-BXumicbh.js → ContextMenuItems-DmaKSJVv.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, withCtx, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createVNode, unref, withModifiers } from "vue";
 import { DropdownMenuPortal, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItem, ContextMenuPortal, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuSub, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuItem } from "reka-ui";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 import MenuShortcut from "../components/MenuShortcut.vue.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = { class: "flex items-center gap-2" };

package/dist/chunks/{DropzoneLinkField-C-9BCGJn.js → DropzoneLinkField-DXIr0eFz.js}

@@ -1,6 +1,6 @@
 import { defineComponent, useModel, ref, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, normalizeClass, mergeModels } from "vue";
-import { _ as _sfc_main$2 } from "./LpButton-CFb44IjC.js";
-import { _ as _sfc_main$1 } from "./LpInput-Tw-yxT4I.js";
+import { _ as _sfc_main$2 } from "./LpButton-DSHioIfD.js";
+import { _ as _sfc_main$1 } from "./LpInput-DL6HEJdi.js";
 const _hoisted_1 = { class: "flex w-full flex-col gap-1.5" };
 const _hoisted_2 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{FieldWrapper-CORPzo9s.js → FieldWrapper-DnuMTrqW.js}

@@ -1,5 +1,5 @@
 import { defineComponent, useAttrs, ref, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, unref, normalizeClass, withCtx, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "./LpFormField-Ch69Jd-X.js";
+import { _ as _sfc_main$1 } from "./LpFormField-BKYn9dyP.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "FieldWrapper",

package/dist/chunks/IconCloseButton-COZEsa9u.js

@@ -0,0 +1,29 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createVNode, unref } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
+import { CLOSE_ICON } from "../components/dropdown.js";
+const _hoisted_1 = ["aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IconCloseButton",
+  props: {
+    label: {},
+    inline: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: normalizeClass(["group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink", __props.inline ? void 0 : "rounded-inner p-1 focus-visible:ring-2 focus-visible:ring-ring"]),
+        "aria-label": __props.label
+      }, [
+        createVNode(_sfc_main$1, {
+          name: "lucide:x",
+          size: 16,
+          class: normalizeClass(unref(CLOSE_ICON))
+        }, null, 8, ["class"])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LayoutCanvas-CNOAUk7D.js → LayoutCanvas-CZKOltfA.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$1 } from "./LayoutNode-DF5BMN0J.js";
+import { _ as _sfc_main$1 } from "./LayoutNode-D2f7v683.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" };