@leavepulse/ui 0.75.0 → 0.76.0

package/dist/composables/overlayHistory.js

@@ -0,0 +1,237 @@
+const KEY = "__lpOverlay";
+const SETTLE_MS = 300;
+const STATE_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:overlay-history");
+const g = globalThis;
+const fresh = {
+  router: null,
+  replaying: false,
+  popping: null,
+  installed: false,
+  live: [],
+  closed: /* @__PURE__ */ new Map(),
+  dead: /* @__PURE__ */ new Map(),
+  silent: 0,
+  waiting: [],
+  href: "",
+  serial: 0,
+  internal: false,
+  settle: 0
+};
+const s = g[STATE_KEY] ??= fresh;
+function markOf(state) {
+  if (!state || typeof state !== "object") return null;
+  const mark = state[KEY];
+  if (!mark || typeof mark !== "object") return null;
+  const { token, depth } = mark;
+  return typeof token === "string" && typeof depth === "number" ? { token, depth } : null;
+}
+function pathOf(href) {
+  try {
+    return new URL(href, location.href).pathname;
+  } catch {
+    return href;
+  }
+}
+function own(run) {
+  s.internal = true;
+  try {
+    return run();
+  } finally {
+    s.internal = false;
+  }
+}
+function silentGo(delta) {
+  if (delta === 0) return;
+  s.silent++;
+  mute();
+  own(() => history.go(delta));
+}
+function whenSettled(run) {
+  if (s.silent > 0) s.waiting.push(run);
+  else run();
+}
+function flushWaiting() {
+  if (s.silent > 0) return;
+  const queued = s.waiting.splice(0);
+  for (const run of queued) run();
+}
+function current() {
+  return markOf(history.state);
+}
+function onTop() {
+  const top = s.live[s.live.length - 1];
+  return !!top && current()?.token === top.token;
+}
+function leavePage() {
+  const gone = s.live.splice(0);
+  for (const item of gone.reverse()) {
+    bury(item);
+    item.entry.navigated?.();
+  }
+  s.closed.clear();
+}
+function handlePop(event) {
+  const before = s.href;
+  s.href = location.href;
+  if (s.silent > 0) {
+    s.silent--;
+    if (before === location.href) event.stopImmediatePropagation();
+    flushWaiting();
+    return;
+  }
+  window.clearTimeout(s.settle);
+  const sameAddress = before === location.href;
+  const mark = markOf(event.state);
+  const at = mark ? s.live.findIndex((item) => item.token === mark.token) : -1;
+  if (at >= 0) {
+    closeAbove(at);
+    if (sameAddress) event.stopImmediatePropagation();
+    return;
+  }
+  const reopen = mark ? s.closed.get(mark.token) : void 0;
+  if (reopen && sameAddress) {
+    event.stopImmediatePropagation();
+    if (reopen.entry.alive && reopen.entry.forward?.()) {
+      s.closed.delete(reopen.token);
+      s.live.push(reopen);
+      return;
+    }
+    silentGo(-1);
+    return;
+  }
+  if (mark && (s.dead.has(mark.token) || reopen)) {
+    if (sameAddress) event.stopImmediatePropagation();
+    if (!sameAddress) {
+      silentGo(-mark.depth);
+      return;
+    }
+    const depth = mark.depth;
+    own(() => history.forward());
+    s.settle = window.setTimeout(() => {
+      if (markOf(history.state)?.token === mark.token) silentGo(-depth);
+      else mute();
+    }, SETTLE_MS);
+    return;
+  }
+  if (s.live.length === 0) return;
+  if (sameAddress) {
+    closeAbove(-1);
+    event.stopImmediatePropagation();
+  } else if (pathOf(before) !== pathOf(location.href)) {
+    leavePage();
+  }
+}
+const DEAD_LIMIT = 200;
+function bury(item) {
+  s.dead.set(item.token, item);
+  if (s.dead.size > DEAD_LIMIT) s.dead.delete(s.dead.keys().next().value);
+}
+function closeAbove(index) {
+  const popped = s.live.splice(index + 1);
+  for (const item of popped.reverse()) {
+    s.closed.set(item.token, item);
+    if (item.entry.alive) item.entry.back();
+  }
+}
+function onPop(event) {
+  if (s.replaying) return;
+  s.popping = { muted: !!s.router && !s.router.listening, before: s.href };
+  handlePop(event);
+  if (event.cancelBubble) {
+    s.popping = null;
+    mute();
+  }
+}
+function afterPop(event) {
+  if (s.replaying || !s.popping) return;
+  const { muted, before } = s.popping;
+  s.popping = null;
+  if (muted && before !== location.href) replay(event.state);
+  mute();
+}
+function replay(state) {
+  if (!s.router) return;
+  s.router.listening = true;
+  s.replaying = true;
+  try {
+    window.dispatchEvent(new PopStateEvent("popstate", { state }));
+  } finally {
+    s.replaying = false;
+  }
+}
+function mute() {
+  if (s.popping) return;
+  if (s.router) s.router.listening = !(current() || s.silent > 0);
+}
+function setHistoryRouter(router) {
+  if (s.router && s.router !== router) s.router.listening = true;
+  s.router = router;
+  if (typeof window === "undefined") return;
+  window.removeEventListener("popstate", afterPop);
+  window.addEventListener("popstate", afterPop);
+  mute();
+}
+function install() {
+  if (s.installed || typeof window === "undefined") return;
+  s.installed = true;
+  s.href = location.href;
+  window.addEventListener("popstate", onPop, { capture: true });
+  window.removeEventListener("popstate", afterPop);
+  window.addEventListener("popstate", afterPop);
+  const push = history.pushState.bind(history);
+  const replace = history.replaceState.bind(history);
+  history.pushState = function(data, unused, url) {
+    const before = location.href;
+    push(data, unused, url);
+    s.href = location.href;
+    if (s.internal) return;
+    s.closed.clear();
+    if (pathOf(before) !== pathOf(location.href)) leavePage();
+    mute();
+  };
+  history.replaceState = function(data, unused, url) {
+    const mark = s.internal ? null : current();
+    const keep = mark && data && typeof data === "object" && !markOf(data) ? { ...data, [KEY]: mark } : data;
+    replace(keep, unused, url);
+    s.href = location.href;
+  };
+}
+function pushEntry(entry) {
+  if (typeof window === "undefined") return;
+  install();
+  whenSettled(() => {
+    if (!entry.alive) return;
+    const token = `${Date.now().toString(36)}-${(s.serial++).toString(36)}`;
+    const depth = (current()?.depth ?? 0) + 1;
+    const base = history.state && typeof history.state === "object" ? history.state : {};
+    own(() => history.pushState({ ...base, [KEY]: { token, depth } }, "", location.href));
+    s.href = location.href;
+    s.closed.clear();
+    s.live.push({ entry, token, depth });
+    mute();
+  });
+}
+function dropEntry(entry) {
+  const at = s.live.findIndex((item) => item.entry === entry);
+  if (at === -1) return;
+  const positioned = onTop();
+  const removed = s.live.splice(at);
+  if (positioned) {
+    silentGo(-removed.length);
+    return;
+  }
+  for (const item of removed) bury(item);
+}
+function isLive(entry) {
+  return s.live.some((item) => item.entry === entry);
+}
+function liveEntries() {
+  return s.live.length;
+}
+export {
+  dropEntry,
+  isLive,
+  liveEntries,
+  pushEntry,
+  setHistoryRouter
+};

package/dist/composables/useOverlayHistory.d.ts

@@ -0,0 +1,45 @@
+import { type MaybeRefOrGetter } from "vue";
+import { type HistoryRouter } from "./overlayHistory";
+export type OverlayHistoryMode = boolean | "reopen";
+export interface ProvideOverlayHistoryOptions {
+    /**
+     * The app's router, so a Back or Forward that only closes an overlay does
+     * not reach it as a navigation (vue-router: the router instance). Its
+     * popstate listener runs before the kit's, so without this it sees each of
+     * those steps as a visit to the page it is already on: guards and
+     * `afterEach` run again and the route object is replaced, though nothing
+     * remounts. One router per page; the latest one given is used.
+     */
+    router?: HistoryRouter;
+}
+/** Turn browser history on for every overlay below the calling component. */
+export declare function provideOverlayHistory(mode?: MaybeRefOrGetter<OverlayHistoryMode>, options?: ProvideOverlayHistoryOptions): void;
+export interface OverlayHistoryOptions {
+    /** The overlay's own `history` prop; `undefined` follows `provideOverlayHistory`. */
+    mode: () => OverlayHistoryMode | undefined;
+    open: () => boolean;
+    /** Back left the entry: close the way the overlay's own ways out do. */
+    close: () => Promise<unknown>;
+    /** Forward under `"reopen"`: ask the app to open it again (`update:open` true). */
+    reopen: () => void;
+    /** The page went to another path: close without asking, the place it belonged to is gone. */
+    navigated: () => void;
+}
+/** Wire an overlay's `open` to a history entry. */
+export declare function useOverlayHistory(options: OverlayHistoryOptions): void;
+export interface StepHistoryOptions {
+    /** The component's own `history` prop; `undefined` follows the overlay it sits in. */
+    mode: () => boolean | undefined;
+    /** Show this value without recording it. */
+    set: (value: string) => void;
+    /** Whether the value can still be shown (the tab exists and is enabled). */
+    has: (value: string) => boolean;
+}
+/**
+ * Steps inside an overlay (a tab switch) as history entries. Outside an overlay
+ * it is off unless asked for: a page's own tabs belong in its URL, where the
+ * app's router already keeps them.
+ */
+export declare function useStepHistory(options: StepHistoryOptions): {
+    record: (from: string, to: string) => void;
+};

package/dist/composables/useOverlayHistory.js

@@ -0,0 +1,84 @@
+import { inject, computed, toValue, watch, onBeforeUnmount, provide, nextTick } from "vue";
+import { isLive, pushEntry, dropEntry, setHistoryRouter } 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 useOverlayHistory(options) {
+  const inherited = inject(MODE, false);
+  const mode = computed(() => options.mode() ?? toValue(inherited));
+  const entry = {
+    alive: true,
+    back: () => {
+      void options.close().then(
+        () => nextTick(() => {
+          if (entry.alive && options.open() && !isLive(entry)) pushEntry(entry);
+        })
+      );
+    },
+    forward: () => {
+      if (mode.value !== "reopen") return false;
+      options.reopen();
+      void nextTick(() => {
+        if (!options.open() && isLive(entry)) dropEntry(entry);
+      });
+      return true;
+    },
+    navigated: () => {
+      if (options.open()) options.navigated();
+    }
+  };
+  watch(
+    () => [options.open(), mode.value !== false],
+    ([open, enabled]) => {
+      if (open && enabled) {
+        if (!isLive(entry)) pushEntry(entry);
+      } else if (isLive(entry)) {
+        dropEntry(entry);
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    entry.alive = false;
+    if (isLive(entry)) dropEntry(entry);
+  });
+  provide(SCOPE, { active: () => mode.value !== false && options.open() && isLive(entry) });
+}
+function useStepHistory(options) {
+  const scope = inject(SCOPE, null);
+  const enabled = () => {
+    const own = options.mode();
+    if (own === false) return false;
+    if (scope) return scope.active();
+    return own === true;
+  };
+  const entries = [];
+  function record(from, to) {
+    if (from === to || !enabled()) return;
+    const entry = {
+      alive: true,
+      back: () => options.set(from),
+      forward: () => {
+        if (!enabled() || !options.has(to)) return false;
+        options.set(to);
+        return true;
+      }
+    };
+    entries.splice(0, entries.length, ...entries.filter(isLive), entry);
+    pushEntry(entry);
+  }
+  onBeforeUnmount(() => {
+    for (const entry of entries) entry.alive = false;
+    const first = entries.find(isLive);
+    if (first) dropEntry(first);
+  });
+  return { record };
+}
+export {
+  provideOverlayHistory,
+  useOverlayHistory,
+  useStepHistory
+};

package/dist/index.d.ts

@@ -219,6 +219,9 @@ export type { UseGamepadNavOptions } from "./composables/useGamepadNav";
 export { focusableIn, nextInDirection } from "./composables/spatialNav";
 export type { Box, Direction } from "./composables/spatialNav";
 export { provideGlass, useGlass } from "./composables/useGlass";
+export { provideOverlayHistory, useOverlayHistory, useStepHistory } from "./composables/useOverlayHistory";
+export type { OverlayHistoryMode, OverlayHistoryOptions, ProvideOverlayHistoryOptions, StepHistoryOptions } from "./composables/useOverlayHistory";
+export type { HistoryRouter } from "./composables/overlayHistory";
 export { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig";
 export type { KitStorage, LabelScope, LpConfig } from "./composables/useLpConfig";
 export { browserStorage, useKitStorage, usePersisted } from "./composables/usePersisted";

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-CNOAUk7D.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Al3HT5ey.js";
+import { _ as _2 } from "./chunks/LpAddressInput-De_LTYM7.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DRGgh89B.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BP1ld7-S.js";
 import { _ as _5 } from "./chunks/LpAlert-n5XPAZfv.js";
-import { _ as _6 } from "./chunks/LpAppShell-CpSSm5WT.js";
+import { _ as _6 } from "./chunks/LpAppShell-Cpy_t1U_.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DOu7FN5P.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cg6Az3wz.js";
 import { _ as _9 } from "./chunks/LpBadge-wUYLN4U9.js";
@@ -30,8 +30,8 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-DY2VjDji.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-DvSZTJ4N.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-CphJR6Q9.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-QSJ0zl63.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-rx2tCjwk.js";
 import { _ as _21 } from "./chunks/LpDatePicker-CA0QTfBC.js";
@@ -40,7 +40,7 @@ import { _ as _23 } from "./chunks/LpRangeCalendar-CYYUYqJ7.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-Cpa7Hc5T.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-RRamxbLV.js";
+import { _ as _26 } from "./chunks/LpDrawer-DQZixOqJ.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-Dl7Z4ZhS.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-EQHiRYhG.js";
@@ -59,8 +59,8 @@ import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
 import { _ as _37 } from "./chunks/LpLogViewer-D25jM2_I.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-Bkram-MO.js";
-import { _ as _39 } from "./chunks/LpModal-BnjZ2iem.js";
-import { _ as _40 } from "./chunks/LpModalNav-DQpV2kdn.js";
+import { _ as _39 } from "./chunks/LpModal-C0tGg_D_.js";
+import { _ as _40 } from "./chunks/LpModalNav-iDDtT9c1.js";
 import { _ as _41 } from "./chunks/LpNotificationBell-3244LUVc.js";
 import { _ as _42 } from "./chunks/LpNumberField-e0IBkWU1.js";
 import { _ as _43 } from "./chunks/LpTimeField-BawSVsmt.js";
@@ -86,7 +86,7 @@ import { _ as _60 } from "./chunks/LpShift-CCq7dofl.js";
 import { _ as _61 } from "./chunks/LpSwap-C96c0LWh.js";
 import { _ as _62 } from "./chunks/LpHintExample-9Py0wc-L.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _63 } from "./chunks/LpSidebar-BoNLKgh-.js";
+import { _ as _63 } from "./chunks/LpSidebar-D6zO8vLm.js";
 import { _ as _64 } from "./chunks/LpContextSwitcher-Dwh6dyID.js";
 import { _ as _65 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _66 } from "./chunks/LpSlider-DxYoCJJO.js";
@@ -134,6 +134,7 @@ import { anyModalOpen, topModalElement, useModalLayer } from "./components/modal
 import { useGamepadNav } from "./composables/useGamepadNav.js";
 import { focusableIn, nextInDirection } from "./composables/spatialNav.js";
 import { provideGlass, useGlass } from "./composables/useGlass.js";
+import { provideOverlayHistory, useOverlayHistory, useStepHistory } from "./composables/useOverlayHistory.js";
 import { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig.js";
 import { browserStorage, useKitStorage, usePersisted } from "./composables/usePersisted.js";
 import { useCloseGuard } from "./composables/useCloseGuard.js";
@@ -571,6 +572,7 @@ export {
   provideGlass,
   provideHintSystem,
   provideLpConfig,
+  provideOverlayHistory,
   pseudoLocalize,
   pushRecent,
   quotaSegments,
@@ -670,6 +672,7 @@ export {
   useModalLayer,
   useNow,
   useOptimisticToggle,
+  useOverlayHistory,
   usePaintSelect,
   usePaletteCommands,
   u3 as usePaletteTheme,
@@ -685,6 +688,7 @@ export {
   useSettled,
   useShift,
   useSpotlight,
+  useStepHistory,
   useTableFilterChoice,
   u as useTheme,
   u2 as useThemeStudio,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -101,6 +101,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue": "3.5.31",
     "vue-component-meta": "3.3.5",
+    "vue-router": "4.6.4",
     "vue-tsc": "^3.0.0"
   },
   "dependencies": {

package/src/components/LpConfirmDialog.vue

@@ -5,6 +5,7 @@ import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpModal from "./LpModal.vue"
+import type { OverlayHistoryMode } from "../composables/useOverlayHistory"
 
 export type ConfirmLabels = {
   confirm: string
@@ -54,9 +55,11 @@ const props = withDefaults(
     action?: () => unknown
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    /** Browser history for the dialog, passed to LpModal. Follows `provideOverlayHistory` when unset. */
+    history?: OverlayHistoryMode
     labels?: Partial<ConfirmLabels>
   }>(),
-  { glass: undefined },
+  { glass: undefined, history: undefined },
 )
 
 const emit = defineEmits<{
@@ -128,6 +131,7 @@ function dismiss(open: boolean) {
 <template>
   <LpModal
     :glass="glass"
+    :history="history"
     :open="open"
     :title="title"
     :description="description"

package/src/components/LpDrawer.vue

@@ -37,6 +37,7 @@ import { CLOSE_ICON } from "./dropdown"
 import { prefersReducedMotion } from "../composables/easing"
 import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
 import { useGlass } from "../composables/useGlass"
+import { useOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 import { useLabels } from "../composables/useLpConfig"
 import { usePersisted } from "../composables/usePersisted"
 import LpIcon from "./LpIcon.vue"
@@ -132,9 +133,17 @@ const props = withDefaults(
     glass?: boolean
     /** Accessible name for a drawer without a visible `title`. */
     ariaLabel?: string
+    /**
+     * Browser Back closes it, and opening it adds a history entry. Unset
+     * follows `provideOverlayHistory` (off without one); `"reopen"` also
+     * opens it again on Forward; `false` keeps it out of history, for an
+     * overlay the app already drives from its route.
+     */
+    history?: OverlayHistoryMode
     labels?: Partial<{ close: string }>
   }>(),
   {
+    history: undefined,
     side: "right",
     size: "sm",
     dismissible: true,
@@ -214,6 +223,18 @@ async function requestClose() {
 // ways out do. Handed to the body and footer slots, and exposed.
 defineExpose({ close: requestClose })
 
+useOverlayHistory({
+  mode: () => props.history,
+  open: () => !!props.open,
+  close: async () => {
+    if (!(await allowClose())) return false
+    emit("update:open", false)
+    return true
+  },
+  reopen: () => emit("update:open", true),
+  navigated: () => emit("update:open", false),
+})
+
 // The header's close button is vaul's own and would slide the panel away at
 // once; with a guard it asks first and closes through the same path as above.
 function guardClose(event: MouseEvent) {

package/src/components/LpModal.vue

@@ -11,6 +11,7 @@ import {
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
 import { useGlass } from "../composables/useGlass"
+import { useOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 import { useLabels } from "../composables/useLpConfig"
 import { useShift } from "../composables/useShift"
 import { useModalLayer } from "./modalDepth"
@@ -93,9 +94,16 @@ const props = withDefaults(
      * form's state, `:guard="form.dirty"`. See `useCloseGuard`.
      */
     guard?: CloseGuard
+    /**
+     * Browser Back closes it, and opening it adds a history entry. Unset
+     * follows `provideOverlayHistory` (off without one); `"reopen"` also
+     * opens it again on Forward; `false` keeps it out of history, for an
+     * overlay the app already drives from its route.
+     */
+    history?: OverlayHistoryMode
     labels?: Partial<{ close: string }>
   }>(),
-  { size: "md", autoFocus: "auto", glass: undefined, dismissible: true, guard: undefined },
+  { size: "md", autoFocus: "auto", glass: undefined, dismissible: true, guard: undefined, history: undefined },
 )
 
 const text = useLabels("modal", { close: "Close" }, () => props.labels)
@@ -120,6 +128,18 @@ async function onOpenChange(next: boolean) {
 function close() {
   void onOpenChange(false)
 }
+
+useOverlayHistory({
+  mode: () => props.history,
+  open: () => !!props.open,
+  close: async () => {
+    if (!(await allowClose())) return false
+    emit("update:open", false)
+    return true
+  },
+  reopen: () => emit("update:open", true),
+  navigated: () => emit("update:open", false),
+})
 defineExpose({ close })
 
 function onEscape(event: KeyboardEvent) {

package/src/components/LpShortcutsDialog.vue

@@ -18,6 +18,7 @@
 import { computed } from "vue"
 import LpKeys from "./LpKeys.vue"
 import LpModal from "./LpModal.vue"
+import type { OverlayHistoryMode } from "../composables/useOverlayHistory"
 import {
   activeShortcuts,
   mergeShortcutGroups,
@@ -36,6 +37,8 @@ const props = withDefaults(
     description?: string
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    /** Browser history for the dialog, passed to LpModal. Follows `provideOverlayHistory` when unset. */
+    history?: OverlayHistoryMode
     /**
      * A key that toggles the reference, e.g. "F1". Bound only while the dialog
      * is mounted, also inside inputs and over other overlays, and the browser's
@@ -43,7 +46,7 @@ const props = withDefaults(
      */
     hotkey?: string
   }>(),
-  { open: false, groups: () => [], live: false, title: undefined, glass: undefined },
+  { open: false, groups: () => [], live: false, title: undefined, glass: undefined, history: undefined },
 )
 
 const text = useLabels("shortcuts", {
@@ -75,6 +78,7 @@ useHotkeys(() =>
 <template>
   <LpModal
     :glass="props.glass"
+    :history="props.history"
     :open="props.open"
     size="lg"
     :title="props.title ?? text.title"

package/src/components/LpTabs.vue

@@ -4,6 +4,7 @@ import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
 import { computed, nextTick, ref, useId, watch } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
+import { useStepHistory } from "../composables/useOverlayHistory"
 import { prefersReducedMotion } from "../composables/easing"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpSkeleton from "./LpSkeleton.vue"
@@ -65,8 +66,16 @@ const props = withDefaults(
      * icon keep their label.
      */
     compact?: boolean
+    /**
+     * Record each switch as a browser history entry, so Back returns to the
+     * previous tab. Unset follows the overlay the tabs sit in (a modal or a
+     * drawer with history on, see `provideOverlayHistory`) and is off
+     * elsewhere: a page's own tabs belong in its URL. `false` opts out inside
+     * an overlay, `true` opts in on a page that keeps no URL of its own.
+     */
+    history?: boolean
   }>(),
-  { variant: "contained", accent: false, block: false, hoverFollow: true, compact: false },
+  { variant: "contained", accent: false, block: false, hoverFollow: true, compact: false, history: undefined },
 )
 
 const bottom = computed(() => props.variant === "bottom")
@@ -110,11 +119,26 @@ watch(current, () => {
   })
 })
 
-function select(value: string) {
+function show(value: string) {
   if (props.modelValue === undefined) current.value = value
   emit("update:modelValue", value)
 }
 
+const { record } = useStepHistory({
+  mode: () => props.history,
+  set: show,
+  has: (value) => props.items.some((item) => item.value === value && !item.disabled),
+})
+
+function select(value: string) {
+  const from = current.value
+  show(value)
+  // Recorded once the switch took: a bound value the app refused is not a step.
+  void nextTick(() => {
+    if (from !== undefined && current.value === value) record(from, value)
+  })
+}
+
 // The pill sits under the hovered tab, falling back to the active one
 // (UAProject header behaviour). motion-v shared layoutId animates the move.
 // The id must be unique per instance — a shared constant makes the pill fly