@leavepulse/ui 0.77.3 → 0.78.0

package/dist/composables/useField.js

@@ -1,4 +1,5 @@
-import { useId, computed, provide, onScopeDispose, inject } from "vue";
+import { useId, computed, provide, inject, useAttrs, onScopeDispose } from "vue";
+import { isElement } from "./realm.js";
 const LP_FIELD = /* @__PURE__ */ Symbol.for("lp-field");
 function provideField(context) {
   provide(LP_FIELD, context);
@@ -9,6 +10,13 @@ function useField() {
 function fieldMessageId(id) {
   return `${id}-message`;
 }
+function mergeDescribedBy(...ids) {
+  const all = ids.flatMap((id) => typeof id === "string" ? id.split(/\s+/) : []).filter(Boolean);
+  return [...new Set(all)].join(" ") || void 0;
+}
+function isAttrOn(value) {
+  return !!value || value === "";
+}
 function useFieldControl(own) {
   const outer = useField();
   const generated = useId();
@@ -41,7 +49,7 @@ function useFieldControl(own) {
 }
 function focusLeft(event) {
   const next = event.relatedTarget;
-  return !(next instanceof Node && event.currentTarget?.contains(next));
+  return !(isElement(next) && event.currentTarget?.contains(next));
 }
 function useFieldBlur(blur) {
   const partId = `lp-field-${useId()}`;
@@ -62,11 +70,28 @@ function useFieldBlur(blur) {
   onScopeDispose(() => cancelPending?.());
   return { partId, onFocusOut };
 }
+function fieldWrapperBinds(wrapped, field, props, attrs) {
+  const { label, hint, error, required } = props;
+  return { wrapped, id: field.id, label, hint, error, required, class: attrs.class, style: attrs.style };
+}
+function useAttrsField(state) {
+  const attrs = useAttrs();
+  const field = useFieldControl(() => ({
+    wrapped: false,
+    id: typeof attrs.id === "string" ? attrs.id : void 0,
+    ...state()
+  }));
+  return { attrs, field };
+}
 export {
   LP_FIELD,
   fieldMessageId,
+  fieldWrapperBinds,
   focusLeft,
+  isAttrOn,
+  mergeDescribedBy,
   provideField,
+  useAttrsField,
   useField,
   useFieldBlur,
   useFieldControl

package/dist/composables/useFitScale.js

@@ -1,3 +1,4 @@
+import { nodeWindow } from "./realm.js";
 import { ref, onMounted, watch, onBeforeUnmount } from "vue";
 function useFitScale(box, content, min = 0.6) {
   const scale = ref(1);
@@ -15,7 +16,9 @@ function useFitScale(box, content, min = 0.6) {
   function observe() {
     observer?.disconnect();
     if (typeof ResizeObserver === "undefined") return;
-    observer = new ResizeObserver(measure);
+    const el = box.value ?? content.value;
+    if (!el) return measure();
+    observer = new (nodeWindow(el)).ResizeObserver(measure);
     if (box.value) observer.observe(box.value);
     if (content.value) observer.observe(content.value);
     measure();

package/dist/composables/useFormDraft.d.ts

@@ -22,6 +22,12 @@ export interface UseFormDraftOptions<T> {
     maxAgeMs?: number;
     /** Skip the write without tearing the composable out of the component. */
     disabled?: MaybeRefOrGetter<boolean>;
+    /**
+     * Accept a stored value or reject it. The envelope's version follows the
+     * kit, not this form: a draft written before the form changed shape needs
+     * this to be turned away. A rejected draft reads as no draft.
+     */
+    validate?: (value: unknown) => value is T;
 }
 export interface UseFormDraft<T> {
     /**
@@ -40,8 +46,13 @@ export interface UseFormDraft<T> {
      * what to do with each field, because only it knows the form's shape.
      */
     read: () => T | null;
-    /** Forget the draft. Call after applying it, and after a successful save. */
-    discard: () => void;
+    /**
+     * Forget the draft. Call after applying it, and after a successful save.
+     * With no argument it acts on the key as it is now; a callback that may
+     * outlive the subject (an awaited save) passes the key it started under, so
+     * it cannot delete the draft of whatever the form moved on to.
+     */
+    discard: (key?: string) => void;
     /** Write now, ignoring `dirty` and a pending draft. For "save and come back to this later". */
     save: () => void;
 }

package/dist/composables/useFormDraft.js

@@ -7,13 +7,18 @@ function useFormDraft(options) {
   const hasDraft = ref(false);
   const savedAt = ref(null);
   const maxAge = options.maxAgeMs ?? WEEK_MS;
+  function normalizeKey(key) {
+    return String(key || "").trim();
+  }
   function currentKey() {
-    return String(toValue(options.key) || "").trim();
+    return normalizeKey(toValue(options.key));
   }
   function fresh(parsed) {
-    if (!parsed || parsed.version !== ENVELOPE_VERSION) return false;
-    if (maxAge <= 0) return true;
-    return !(Date.now() - Date.parse(parsed.savedAt) > maxAge);
+    if (!parsed || parsed.version !== ENVELOPE_VERSION || !("value" in Object(parsed))) return false;
+    const stamp = typeof parsed.savedAt === "string" ? Date.parse(parsed.savedAt) : Number.NaN;
+    if (Number.isNaN(stamp)) return false;
+    if (options.validate && !options.validate(parsed.value)) return false;
+    return maxAge <= 0 || Math.abs(Date.now() - stamp) <= maxAge;
   }
   function read() {
     const key = currentKey();
@@ -44,11 +49,14 @@ function useFormDraft(options) {
       })
     );
   }
-  function discard() {
-    const key = currentKey();
-    hasDraft.value = false;
-    savedAt.value = null;
-    if (key) store.remove(key);
+  function discard(key) {
+    const current = currentKey();
+    const target = typeof key === "string" ? normalizeKey(key) : current;
+    if (target === current) {
+      hasDraft.value = false;
+      savedAt.value = null;
+    }
+    if (target) store.remove(target);
   }
   function save() {
     write(toValue(options.value));

package/dist/composables/useHintSystem.js

@@ -1,5 +1,6 @@
 import { shallowRef, provide, onBeforeUnmount, reactive, computed, inject, watch } from "vue";
 import { anyModalOpen } from "../components/modalDepth.js";
+import { isTextEntry } from "./textEntry.js";
 import { hints } from "./useHints.js";
 const HINT_SIGNALS = {
   /** A context menu was opened (right click or long press). */
@@ -154,8 +155,7 @@ function hintSummary(records, features, page) {
   };
 }
 function typing() {
-  const el = document.activeElement;
-  return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLElement && el.isContentEditable;
+  return isTextEntry(document.activeElement, { inputType: () => true });
 }
 function createHintSystem(options) {
   const timing = { ...DEFAULT_TIMING, ...options.timing };

package/dist/composables/useHotkeys.js

@@ -1,5 +1,8 @@
 import { shallowReactive, ref, computed, toValue, onMounted, getCurrentInstance, onBeforeUnmount } from "vue";
 import { topModalElement } from "../components/modalDepth.js";
+import { isDev } from "./devWarn.js";
+import { isNode } from "./realm.js";
+import { isTextEntry } from "./textEntry.js";
 const isAppleKeyboard = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || "");
 function useAppleKeyboard() {
   const apple = ref(false);
@@ -12,24 +15,6 @@ function appleModifierLabel(key, apple = isAppleKeyboard) {
   if (key === "Alt") return "⌥";
   return key;
 }
-const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
-  "text",
-  "search",
-  "email",
-  "number",
-  "password",
-  "tel",
-  "url"
-]);
-function isTextEntry(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  if (target.isContentEditable) return true;
-  if (target instanceof HTMLTextAreaElement) return true;
-  if (target instanceof HTMLInputElement) {
-    return TEXT_INPUT_TYPES.has(target.type);
-  }
-  return false;
-}
 const MODIFIER_KEYS = /* @__PURE__ */ new Set(["control", "meta", "shift", "alt"]);
 function matchesHotkey(event, binding) {
   if (binding.key === void 0) return false;
@@ -102,11 +87,11 @@ const mounted = state.mounted;
 function inScope(target, scope) {
   const el = toValue(scope);
   if (!el) return true;
-  const node = target instanceof Node ? target : null;
-  return !!node && (el === node || el.contains(node));
+  return isNode(target) && (el === target || el.contains(target));
 }
-function topLayer() {
-  const layers = document.querySelectorAll("[data-dismissable-layer]");
+function topLayer(origin) {
+  const doc = isNode(origin) ? origin.ownerDocument ?? document : document;
+  const layers = doc.querySelectorAll("[data-dismissable-layer]");
   return layers[layers.length - 1] ?? null;
 }
 function insideOf(entry, layer) {
@@ -126,7 +111,7 @@ function snapshot(event) {
 }
 function eligible(event) {
   const inTextEntry = isTextEntry(event.target);
-  const blocker = event.key === "Escape" ? topLayer() : topModalElement();
+  const blocker = event.key === "Escape" ? topLayer(event.target) : topModalElement();
   const entries = [...mounted].sort(
     (a, b) => Number(toValue(b.priority) || 0) - Number(toValue(a.priority) || 0) || b.order - a.order
   );
@@ -165,6 +150,7 @@ function flushHeld() {
 function onKeydown(event) {
   if (event.isComposing || event.defaultPrevented) return;
   if (pressed.length && MODIFIER_KEYS.has(event.key.toLowerCase())) return;
+  if (pressed.length && event.repeat) return;
   if (pressed.length && event.key === "Escape") {
     resetSequence();
   }
@@ -216,7 +202,7 @@ function useHotkeys(bindings, options = {}) {
     order: ++state.order,
     host: () => {
       const el = instance?.vnode.el;
-      return el instanceof Node ? el : null;
+      return isNode(el) ? el : null;
     }
   };
   onMounted(() => {
@@ -230,11 +216,11 @@ function useHotkeys(bindings, options = {}) {
   });
   onBeforeUnmount(() => {
     mounted.delete(entry);
+    resetSequence();
     if (!mounted.size && state.listening) {
       window.removeEventListener("keydown", onKeydown);
       window.removeEventListener("blur", resetSequence);
       state.listening = false;
-      resetSequence();
     }
   });
 }
@@ -297,13 +283,6 @@ const hotkeyConflicts = computed(
   )
 );
 const warned = /* @__PURE__ */ new Set();
-function isDev() {
-  try {
-    return process.env.NODE_ENV !== "production";
-  } catch {
-    return false;
-  }
-}
 function warnConflicts() {
   if (!isDev()) return;
   for (const conflict of hotkeyConflicts.value) {

package/dist/composables/useInView.js

@@ -1,3 +1,4 @@
+import { nodeWindow } from "./realm.js";
 import { ref, watch, onBeforeUnmount } from "vue";
 function useInView(options = {}) {
   const el = ref(null);
@@ -17,7 +18,7 @@ function useInView(options = {}) {
       observer?.disconnect();
       observer = null;
       if (!node || typeof IntersectionObserver === "undefined") return sync();
-      observer = new IntersectionObserver(
+      observer = new (nodeWindow(node)).IntersectionObserver(
         (entries) => {
           intersecting.value = entries.some((entry) => entry.isIntersecting);
           sync();

package/dist/composables/useInputFilter.js

@@ -1,4 +1,5 @@
 import { computed, toValue } from "vue";
+import { isElement } from "./realm.js";
 function anchorPattern(p) {
   if (p instanceof RegExp) return new RegExp(`^(?:${p.source})$`, p.flags.replace(/[gy]/g, ""));
   return new RegExp(`^(?:${p})$`);
@@ -49,12 +50,13 @@ function useInputFilter(options = {}) {
   function sanitize(target) {
     const re = restrict.value;
     if (!re) return false;
-    if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return false;
-    const { text, caret } = stripDisallowed(target.value, re, target.selectionStart ?? target.value.length);
-    if (text === target.value) return false;
-    target.value = text;
+    if (!isElement(target) || !["INPUT", "TEXTAREA"].includes(target.tagName)) return false;
+    const field = target;
+    const { text, caret } = stripDisallowed(field.value, re, field.selectionStart ?? field.value.length);
+    if (text === field.value) return false;
+    field.value = text;
     try {
-      target.setSelectionRange(caret, caret);
+      field.setSelectionRange(caret, caret);
     } catch {
     }
     return true;

package/dist/composables/useInputMask.js

@@ -1,4 +1,5 @@
 import { computed, toValue } from "vue";
+import { isElement } from "./realm.js";
 const DEFAULT_MASK_TOKENS = {
   "0": /\d/,
   a: new RegExp("\\p{L}", "u"),
@@ -115,6 +116,7 @@ function maskDelete(value, caret, direction, options) {
   chars.splice(index, 1);
   return applyMask(chars.join(""), { ...options, caret: index, fromRaw: true });
 }
+const isInput = (target) => isElement(target) && target.tagName === "INPUT";
 function useInputMask(options) {
   const spec = computed(() => {
     const mask = toValue(options.mask);
@@ -138,7 +140,7 @@ function useInputMask(options) {
   function onBeforeInput(event) {
     const s = spec.value;
     const el = event.target;
-    if (!s || event.isComposing || !(el instanceof HTMLInputElement)) return;
+    if (!s || event.isComposing || !isInput(el)) return;
     const backward = event.inputType === "deleteContentBackward";
     if (!backward && event.inputType !== "deleteContentForward") return;
     const start = el.selectionStart;
@@ -153,11 +155,11 @@ function useInputMask(options) {
     commit(el, applyMask(el.value, { ...s, caret: el.selectionStart ?? el.value.length }));
   }
   function onInput(event) {
-    if (event.isComposing || !(event.target instanceof HTMLInputElement)) return;
+    if (event.isComposing || !isInput(event.target)) return;
     reformat(event.target);
   }
   function onCompositionEnd(event) {
-    if (event.target instanceof HTMLInputElement) reformat(event.target);
+    if (isInput(event.target)) reformat(event.target);
   }
   return { active: computed(() => !!spec.value), format, onBeforeInput, onInput, onCompositionEnd };
 }

package/dist/composables/useLinkedView.d.ts

@@ -0,0 +1,97 @@
+import { type MaybeRefOrGetter, type Ref, type ShallowRef } from "vue";
+import type { ChartAnnotation } from "../components/chart";
+import type { ChartRange } from "../components/chartWindow";
+import { type LogId, type LogTimeRange } from "../components/logTools";
+import { type PipelineStep } from "../components/pipeline";
+export type LinkedId = string | number;
+export interface LinkedEntity {
+    id: LinkedId;
+    kind?: string;
+}
+/** A point of interest on the shared timeline, such as a log line. */
+export interface LinkedMoment {
+    time: number | string;
+    label: string;
+}
+export interface LinkedView {
+    entity: ShallowRef<LinkedEntity | null>;
+    timeRange: ShallowRef<LogTimeRange | null>;
+    moment: ShallowRef<LinkedMoment | null>;
+    traceId: Ref<string | null>;
+    select(entity: LinkedEntity | null): void;
+    clear(): void;
+}
+export declare function createLinkedView(): LinkedView;
+/** Shares a view with everything below the calling component. */
+export declare function provideLinkedView(view?: LinkedView): LinkedView;
+/** The view provided above; a private one with none, so a panel works alone. */
+export declare function useLinkedView(): LinkedView;
+interface LinkOptions {
+    /** The sort of entity this component shows. Unset answers to any. */
+    kind?: string;
+}
+/** v-bind for LpTable: single selection, whatever the table's `selected` held before. */
+export declare function linkTable(view: LinkedView, options?: LinkOptions): import("vue").ComputedRef<{
+    selected: LinkedId[];
+    "onUpdate:selected": (keys: LinkedId[]) => void;
+}>;
+/** What linkTopology drives: LpTopologyCanvas's exposed `focusNode`. */
+export interface LinkedCanvas {
+    focusNode(id: string, options?: {
+        keepFocus?: boolean;
+    }): Promise<boolean>;
+}
+/** v-bind for LpTopologyCanvas; `canvas` is its template ref, focused on a selection from elsewhere. */
+export declare function linkTopology(view: LinkedView, canvas: Ref<LinkedCanvas | null>, options?: LinkOptions): import("vue").ComputedRef<{
+    onNodeSelect: (id: string) => void;
+}>;
+export interface LinkLogOptions extends LinkOptions {
+    /** The log sources of an entity. Defaults to its id. */
+    sourcesOf?: (entity: LinkedEntity) => string[];
+}
+/**
+ * v-bind for LpLogViewer. The filters the selection and the trace set stay
+ * local, so the viewer's own chips and search box go on working; typing over a
+ * followed trace stops following it. Picking a line marks it on the timeline.
+ */
+export declare function linkLog(view: LinkedView, options?: LinkLogOptions): import("vue").ComputedRef<{
+    sources: string[];
+    search: string;
+    highlight: string;
+    filterMatches: boolean;
+    timeRange: LogTimeRange | undefined;
+    "onUpdate:sources": (next: string[]) => string[];
+    "onUpdate:search": (next: string) => void;
+    onSelect: ({ line }: {
+        line: {
+            time?: number | string;
+            message: string;
+        };
+    }) => void;
+    onIdClick: ({ value }: {
+        kind: LogId["kind"];
+        value: string;
+    }) => string;
+}>;
+export interface LinkChartOptions {
+    /** The time of each point, oldest first, in step with the chart's `labels`. */
+    times: MaybeRefOrGetter<readonly (number | string)[]>;
+    /** The chart's own annotations, kept beside the linked one. */
+    annotations?: MaybeRefOrGetter<readonly ChartAnnotation[] | undefined>;
+}
+/** v-bind for LpChart: the shared time range is its window, the marked moment an annotation. */
+export declare function linkChart(view: LinkedView, options: LinkChartOptions): import("vue").ComputedRef<{
+    range: ChartRange | null;
+    annotations: ChartAnnotation[];
+    "onUpdate:range": (next: ChartRange | null) => void;
+}>;
+export interface LinkPipelineOptions extends LinkOptions {
+    /** The steps on show; a getter, as they usually follow the selection. */
+    steps: MaybeRefOrGetter<readonly PipelineStep[]>;
+}
+/** v-bind for LpPipeline: selecting opens what failed, and the rows stay the reader's to toggle. */
+export declare function linkPipeline(view: LinkedView, options: LinkPipelineOptions): import("vue").ComputedRef<{
+    expanded: string[];
+    "onUpdate:expanded": (next: string[]) => string[];
+}>;
+export {};

package/dist/composables/useLinkedView.js

@@ -0,0 +1,139 @@
+import { shallowRef, ref, computed, toValue, watch, provide, inject } from "vue";
+import { inTimeRange, nearestByTime } from "../components/logTools.js";
+import { stepKey } from "../components/pipeline.js";
+function createLinkedView() {
+  const entity = shallowRef(null);
+  const timeRange = shallowRef(null);
+  const moment = shallowRef(null);
+  const traceId = ref(null);
+  return {
+    entity,
+    timeRange,
+    moment,
+    traceId,
+    // The same thing again is no change, so a binder echoing a selection back
+    // (a focused node reports itself selected) cannot start a loop.
+    select(next) {
+      const now = entity.value;
+      if (next?.id !== now?.id || next?.kind !== now?.kind) entity.value = next;
+    },
+    clear() {
+      entity.value = null;
+      timeRange.value = null;
+      moment.value = null;
+      traceId.value = null;
+    }
+  };
+}
+const LP_LINKED_VIEW = /* @__PURE__ */ Symbol.for("lp-linked-view");
+function provideLinkedView(view = createLinkedView()) {
+  provide(LP_LINKED_VIEW, view);
+  return view;
+}
+function useLinkedView() {
+  return inject(LP_LINKED_VIEW, null) ?? createLinkedView();
+}
+const answersTo = (entity, kind) => !!entity && (kind === void 0 || entity.kind === kind);
+function linkTable(view, options = {}) {
+  return computed(() => {
+    const entity = view.entity.value;
+    const current = answersTo(entity, options.kind) ? entity.id : null;
+    return {
+      selected: current === null ? [] : [current],
+      "onUpdate:selected": (keys) => {
+        const picked = keys.find((key) => key !== current) ?? keys[0];
+        view.select(picked === void 0 ? null : { id: picked, kind: options.kind });
+      }
+    };
+  });
+}
+function linkTopology(view, canvas, options = {}) {
+  watch(
+    view.entity,
+    (entity) => {
+      if (answersTo(entity, options.kind)) void canvas.value?.focusNode(String(entity.id), { keepFocus: true });
+    },
+    { flush: "post" }
+  );
+  return computed(() => ({
+    onNodeSelect: (id) => view.select({ id, kind: options.kind })
+  }));
+}
+function linkLog(view, options = {}) {
+  const sourcesOf = options.sourcesOf ?? ((entity) => [String(entity.id)]);
+  const sources = shallowRef([]);
+  const search = ref("");
+  watch(view.entity, (entity) => sources.value = answersTo(entity, options.kind) ? sourcesOf(entity) : []);
+  watch(view.traceId, (id, old) => {
+    if (id !== null) search.value = id;
+    else if (search.value === old) search.value = "";
+  });
+  return computed(() => ({
+    sources: sources.value,
+    search: search.value,
+    // A viewer with no toolbar reads its term from here instead.
+    highlight: search.value,
+    // A search only marks its hits; a followed trace is meant to leave just its lines.
+    filterMatches: view.traceId.value !== null,
+    timeRange: view.timeRange.value ?? void 0,
+    "onUpdate:sources": (next) => sources.value = next,
+    "onUpdate:search": (next) => {
+      search.value = next;
+      if (next !== view.traceId.value) view.traceId.value = null;
+    },
+    onSelect: ({ line }) => {
+      view.moment.value = line.time === void 0 ? null : { time: line.time, label: line.message };
+    },
+    onIdClick: ({ value }) => view.traceId.value = value
+  }));
+}
+function linkChart(view, options) {
+  const rows = computed(() => toValue(options.times).map((time) => ({ time })));
+  return computed(() => {
+    const times = toValue(options.times);
+    const last = times.length - 1;
+    const shared = view.timeRange.value;
+    const moment = view.moment.value;
+    const onChart = !!moment && last >= 0 && inTimeRange(moment.time, { from: times[0], to: times[last] });
+    const range = shared && last >= 0 ? {
+      start: shared.from === void 0 ? 0 : Math.max(0, nearestByTime(rows.value, shared.from)),
+      end: shared.to === void 0 ? last : Math.max(0, nearestByTime(rows.value, shared.to))
+    } : null;
+    return {
+      range,
+      annotations: [
+        ...toValue(options.annotations) ?? [],
+        ...onChart ? [{ at: nearestByTime(rows.value, moment.time), label: moment.label }] : []
+      ],
+      "onUpdate:range": (next) => {
+        view.timeRange.value = next && { from: times[next.start], to: times[next.end] };
+      }
+    };
+  });
+}
+function linkPipeline(view, options) {
+  const expanded = shallowRef([]);
+  const failedKeys = () => toValue(options.steps).flatMap((step, index) => step.status === "failed" ? [stepKey(step, index)] : []);
+  watch(
+    [view.entity, () => failedKeys().join("\0")],
+    ([entity]) => {
+      if (!answersTo(entity, options.kind)) return;
+      expanded.value = [.../* @__PURE__ */ new Set([...expanded.value, ...failedKeys()])];
+    },
+    { flush: "post" }
+  );
+  return computed(() => ({
+    expanded: expanded.value,
+    "onUpdate:expanded": (next) => expanded.value = next
+  }));
+}
+export {
+  createLinkedView,
+  linkChart,
+  linkLog,
+  linkPipeline,
+  linkTable,
+  linkTopology,
+  provideLinkedView,
+  useLinkedView
+};

package/dist/composables/useOptimisticToggle.d.ts

@@ -13,7 +13,9 @@ type ToggleEmit = {
  * Shared by LpSwitch and LpCheckbox so a setting saved from either behaves
  * the same.
  */
-export declare function useOptimisticToggle(action: () => ((value: boolean) => unknown) | undefined, emit: ToggleEmit): {
+export declare function useOptimisticToggle(action: () => ((value: boolean) => unknown) | undefined, emit: ToggleEmit, 
+/** Puts back what a boolean cannot say: a checkbox's mixed state. */
+rolledBack?: () => void): {
     pending: import("vue").Ref<boolean, boolean>;
     set: (value: boolean) => Promise<void>;
 };

package/dist/composables/useOptimisticToggle.js

@@ -1,6 +1,6 @@
 import { getCurrentInstance, ref } from "vue";
 import { useToast } from "./useToast.js";
-function useOptimisticToggle(action, emit) {
+function useOptimisticToggle(action, emit, rolledBack) {
   const toast = useToast();
   const instance = getCurrentInstance();
   const pending = ref(false);
@@ -15,6 +15,7 @@ function useOptimisticToggle(action, emit) {
       emit("done", value);
     } catch (error) {
       emit("update:modelValue", !value);
+      rolledBack?.();
       if (instance?.vnode.props?.onError) emit("error", error);
       else toast.error(error instanceof Error ? error : String(error));
     } finally {

package/dist/composables/useOverlayHistory.d.ts

@@ -26,6 +26,13 @@ export interface OverlayHistoryOptions {
     navigated: () => void;
 }
 /** Wire an overlay's `open` to a history entry. */
+/** The wiring of an overlay driven by a v-model: closing asks its guard first. */
+export declare function useModelOverlayHistory(options: {
+    mode: OverlayHistoryOptions["mode"];
+    open: () => boolean;
+    setOpen: (open: boolean) => void;
+    allowClose: () => Promise<boolean>;
+}): void;
 export declare function useOverlayHistory(options: OverlayHistoryOptions): void;
 export interface StepHistoryOptions {
     /** The component's own `history` prop; `undefined` follows the overlay it sits in. */

package/dist/composables/useOverlayHistory.js

@@ -1,11 +1,24 @@
-import { inject, computed, toValue, watch, onBeforeUnmount, provide, nextTick } from "vue";
-import { isLive, pushEntry, dropEntry, setHistoryRouter } from "./overlayHistory.js";
+import { inject, onBeforeUnmount, provide, computed, toValue, watch, nextTick } from "vue";
+import { isLive, dropEntry, setHistoryRouter, pushEntry } from "./overlayHistory.js";
 const MODE = /* @__PURE__ */ Symbol("lp-overlay-history");
 const SCOPE = /* @__PURE__ */ Symbol("lp-overlay-history-scope");
 function provideOverlayHistory(mode = true, options = {}) {
   provide(MODE, mode);
   if (options.router) setHistoryRouter(options.router);
 }
+function useModelOverlayHistory(options) {
+  useOverlayHistory({
+    mode: options.mode,
+    open: options.open,
+    close: async () => {
+      if (!await options.allowClose()) return false;
+      options.setOpen(false);
+      return true;
+    },
+    reopen: () => options.setOpen(true),
+    navigated: () => options.setOpen(false)
+  });
+}
 function useOverlayHistory(options) {
   const inherited = inject(MODE, false);
   const mode = computed(() => options.mode() ?? toValue(inherited));
@@ -79,6 +92,7 @@ function useStepHistory(options) {
 }
 export {
   provideOverlayHistory,
+  useModelOverlayHistory,
   useOverlayHistory,
   useStepHistory
 };