@poveste/app 0.12.3 → 0.13.0

package/dist/bundled/components/story/StoryVariantSingleView.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,38 @@
+import { autoSelectsVariant } from "../../util/variant.js";
 import StoryVariantSinglePreviewRemote_default from "./StoryVariantSinglePreviewRemote.js";
 import StoryVariantSinglePreviewNative_default from "./StoryVariantSinglePreviewNative.js";
-import { createBlock, createElementBlock, defineComponent, openBlock } from "@poveste/vendors/vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, shallowRef, watchEffect } from "@poveste/vendors/vue";
 //#region src/app/components/story/StoryVariantSingleView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	class: "poveste-story-variant-single-view h-full flex flex-col",
-	"data-testid": "story-variant-single-view"
-};
 var StoryVariantSingleView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryVariantSingleView",
 	props: {
-		variant: {},
-		story: {}
+		story: {},
+		variant: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const shown = shallowRef(null);
+		watchEffect(() => {
+			const story = props.story;
+			if (story && props.variant) shown.value = {
+				story,
+				variant: props.variant
+			};
+			else if (shown.value && shown.value.story !== story && !autoSelectsVariant(story)) shown.value = null;
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [__props.story.layout?.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["poveste-story-variant-single-view h-full flex flex-col", { invisible: !__props.variant }]),
+				"data-testid": "story-variant-single-view"
+			}, [shown.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [shown.value.story.layout?.iframe === false ? (openBlock(), createBlock(StoryVariantSinglePreviewNative_default, {
 				key: 0,
-				story: __props.story,
-				variant: __props.variant
+				story: shown.value.story,
+				variant: shown.value.variant
 			}, null, 8, ["story", "variant"])) : (openBlock(), createBlock(StoryVariantSinglePreviewRemote_default, {
 				key: 1,
-				story: __props.story,
-				variant: __props.variant
-			}, null, 8, ["story", "variant"]))]);
+				story: shown.value.story,
+				variant: shown.value.variant
+			}, null, 8, ["story", "variant"]))], 64)) : createCommentVNode("", true)], 2);
 		};
 	}
 });

package/dist/bundled/components/story/StoryView.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import { useStoryStore } from "../../stores/story.js";
 import BaseSplitPane_default from "../base/BaseSplitPane.js";
 import { useLayoutStore } from "../../stores/layout.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
+import { autoSelectsVariant } from "../../util/variant.js";
 import StoryDocs_default from "../panel/StoryDocs.js";
 import StorySidePanel_default from "../panel/StorySidePanel.js";
 import StoryViewer_default from "./StoryViewer.js";
@@ -19,7 +20,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props) {
 		const storyStore = useStoryStore();
 		const layoutStore = useLayoutStore();
-		const effectiveStoryOptionsVisible = computed(() => storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible);
+		const effectiveStoryOptionsVisible = computed(() => !!(storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible));
 		const placement = computed(() => layoutStore.settings.storyOptionsPlacement);
 		const splitOrientation = computed(() => placement.value === "bottom" ? "portrait" : "landscape");
 		const splitDefaultSplit = computed(() => placement.value === "bottom" ? 60 : 75);
@@ -29,13 +30,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (value) storyStore.currentStory.lastSelectedVariant = value;
 		}, { immediate: true });
 		watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
-			if (!storyStore.currentVariant) {
-				if (storyStore.currentStory?.lastSelectedVariant) {
-					setVariant(storyStore.currentStory.lastSelectedVariant.id);
-					return;
-				}
-				if (storyStore.currentStory?.variants.length === 1) setVariant(storyStore.currentStory.variants[0].id);
-			}
+			if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) setVariant((storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]).id);
 		}, { immediate: true });
 		function setVariant(variantId) {
 			router.replace({
@@ -70,14 +65,15 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				standalone: "",
 				class: "md:p-12 w-full md:max-w-[600px] lg:max-w-[800px] xl:max-w-[900px]",
 				onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop())
-			}, null, 8, ["story"])], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer_default, { key: 1 })) : !effectiveStoryOptionsVisible.value ? (openBlock(), createBlock(StoryViewer_default, { key: 2 })) : (openBlock(), createBlock(BaseSplitPane_default, {
-				key: 3,
+			}, null, 8, ["story"])], 512)) : (openBlock(), createBlock(BaseSplitPane_default, {
+				key: 1,
 				"save-id": `story-main-${placement.value}`,
 				orientation: splitOrientation.value,
 				min: 30,
 				max: 95,
 				"default-split": splitDefaultSplit.value,
 				"show-divider": false,
+				"show-last": !unref(isMobile) && effectiveStoryOptionsVisible.value,
 				class: "h-full"
 			}, {
 				first: withCtx(() => [createVNode(StoryViewer_default)]),
@@ -86,7 +82,8 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, 8, [
 				"save-id",
 				"orientation",
-				"default-split"
+				"default-split",
+				"show-last"
 			]))]));
 		};
 	}

package/dist/bundled/sandbox.js

@@ -1,5 +1,6 @@
 import { isDark } from "./util/dark.js";
 import { PREVIEW_SETTINGS_REQUEST, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "./util/const.js";
+import { occupant } from "./util/occupant.js";
 import { previewDarkClasses, resolvePreviewDark } from "./util/color-scheme.js";
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from "./util/preview-settings.js";
 import GenericMountStory_default from "./components/story/GenericMountStory.js";
@@ -9,7 +10,7 @@ import { createStateBridge } from "./util/state-bridge.js";
 import { toRawDeep } from "./util/state.js";
 import { isBenignResizeObserverEvent } from "./util/uncaught.js";
 import { usePreferredDark } from "@poveste/vendors/vue-use";
-import { computed, createApp, h, onMounted, ref, watch } from "@poveste/vendors/vue";
+import { computed, createApp, h, onMounted, ref, watch, watchEffect } from "@poveste/vendors/vue";
 import { createPinia } from "@poveste/vendors/pinia";
 import { files, onUpdate } from "virtual:$poveste-stories";
 import { parseQuery } from "@poveste/vendors/vue-router";
@@ -18,6 +19,10 @@ import { reportStoryError } from "@poveste/shared";
 var query = parseQuery(window.location.search);
 var storyId = ref(typeof query.storyId === "string" ? query.storyId : null);
 var variantId = ref(typeof query.variantId === "string" ? query.variantId : null);
+watchEffect(() => {
+	occupant.storyId = storyId.value;
+	occupant.variantId = variantId.value;
+});
 var file = ref(null);
 function resolveFile(list = files) {
 	const found = list.find((f) => f.id === storyId.value);

package/dist/bundled/util/events.js

@@ -1,4 +1,5 @@
 import { EVENT_SEND } from "./const.js";
+import { occupant } from "./occupant.js";
 //#region src/app/util/events.ts
 async function logEvent(name, argument) {
 	const event = {
@@ -7,7 +8,9 @@ async function logEvent(name, argument) {
 	};
 	if (location.href.includes("__sandbox")) window.parent?.postMessage({
 		type: EVENT_SEND,
-		event
+		event,
+		storyId: occupant.storyId,
+		variantId: occupant.variantId
 	});
 	else {
 		const { useEventsStore } = await import("../stores/events.js");

package/dist/bundled/util/highlighter.js

@@ -1,4 +1,5 @@
-import { createHighlighter } from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 //#region src/app/util/highlighter.ts
 /**
 * Shiki is meant to be used as a singleton: each instance carries its own WASM
@@ -9,10 +10,16 @@ import { createHighlighter } from "shiki";
 * The langs and themes are fixed, so one shared instance is always correct.
 */
 var highlighterPromise;
+/**
+* `shiki/core`, not `shiki`: the latter is the full-bundle entry and ships every
+* grammar and theme whatever the options ask for — 10 MB a book (#304). The
+* dynamic imports are the interface, not a lazy-loading choice.
+*/
 function getHighlighter() {
-	highlighterPromise ??= createHighlighter({
-		langs: ["html", "jsx"],
-		themes: ["github-light", "github-dark"]
+	highlighterPromise ??= createHighlighterCore({
+		langs: [import("shiki/langs/html.mjs"), import("shiki/langs/jsx.mjs")],
+		themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+		engine: createOnigurumaEngine(import("shiki/wasm"))
 	}).catch((e) => {
 		highlighterPromise = void 0;
 		throw e;

package/dist/bundled/util/occupant.js

@@ -0,0 +1,16 @@
+//#region src/app/util/occupant.ts
+/**
+* What the sandbox realm is currently showing.
+*
+* The realm is reused: a `SANDBOX_RETARGET` hands it another story rather than
+* booting a new document, so a message can outlive the occupant that queued it.
+* Every message `sandbox.ts` posts already carries these ids for that reason;
+* this module exists so `logEvent` — which posts from wherever a story calls it,
+* not from `sandbox.ts` — can carry them too (#328).
+*/
+var occupant = {
+	storyId: null,
+	variantId: null
+};
+//#endregion
+export { occupant };

package/dist/bundled/util/variant.js

@@ -1,6 +1,17 @@
 import { computed } from "@poveste/vendors/vue";
 import { useRoute } from "@poveste/vendors/vue-router";
 //#region src/app/util/variant.ts
+/**
+* Whether opening this story will put a variant in the route by itself.
+*
+* `StoryView` resolves the variant one tick after the story, so anything that
+* has to tell "a variant is on its way" from "this story is waiting for the
+* reader to pick one" needs the same answer it will give — hence one predicate
+* rather than two copies of the condition (#328).
+*/
+function autoSelectsVariant(story) {
+	return !!story && (!!story.lastSelectedVariant || story.variants.length === 1);
+}
 function useCurrentVariantRoute(variant) {
 	const route = useRoute();
 	return {
@@ -15,4 +26,4 @@ function useCurrentVariantRoute(variant) {
 	};
 }
 //#endregion
-export { useCurrentVariantRoute };
+export { autoSelectsVariant, useCurrentVariantRoute };

package/dist/style.css

@@ -174,10 +174,6 @@
   .bind-col-size {
     grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
   }
-  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
-    min-width: 280px;
-    height: 100%;
-  }
   .v-popper {
     line-height: 0;
   }
@@ -278,6 +274,10 @@
     inherits: false;
     initial-value: solid;
   }
+  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
+    min-width: 280px;
+    height: 100%;
+  }
   .v-popper {
     line-height: 0;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan",
@@ -38,14 +38,14 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "dependencies": {
-    "@fontsource/noto-sans-display": "^5.3.0",
-    "@poveste/controls": "^0.12.3",
-    "@poveste/shared": "^0.12.3",
-    "@poveste/vendors": "^0.12.3",
+    "@poveste/controls": "^0.13.0",
+    "@poveste/shared": "^0.13.0",
+    "@poveste/vendors": "^0.13.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0"
   },
   "devDependencies": {
+    "@fontsource/noto-sans-display": "^5.3.0",
     "@iconify-json/carbon": "^1.2.25",
     "@iconify-json/fluent": "1.2.56",
     "@iconify-json/mdi": "^1.2.3",

package/src/__tests__/font.spec.ts

@@ -1,8 +1,8 @@
-import { readFileSync } from 'node:fs'
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { describe, expect, it } from 'vitest'
 // @ts-expect-error plain script, no types
-import { FONT_PACKAGE, generateFontCss } from '../../scripts/font.mjs'
+import { FONT_PACKAGE, generateFontCss, referencedFiles } from '../../scripts/font.mjs'
 
 // Vitest runs from the package root, and stubs `?raw` CSS imports to empty.
 // Newlines are normalised: the shipped sheet is checked in, so a Windows
@@ -13,6 +13,52 @@ const read = (path: string) => readFileSync(join(process.cwd(), path), 'utf8').r
 const shipped = read('src/app/style/font.css')
 const upstream = read(join('node_modules', FONT_PACKAGE, 'index.css'))
 
+describe('the vendored files', () => {
+  // The sheet and the files are one artifact now that the package is a
+  // devDependency: a book asking for a face that is not on disk renders the
+  // fallback, and nothing else would say so (#306).
+  it('ships every file the sheet asks for', () => {
+    const missing = referencedFiles(shipped).filter(file => !existsSync(join(process.cwd(), 'src/app/style/fonts', file)))
+
+    expect(missing).toEqual([])
+  })
+
+  // The other direction: a subset upstream drops or renames leaves a file the
+  // sheet no longer names, and `files: ['dist', 'src']` would publish it.
+  it('ships nothing the sheet does not ask for', () => {
+    const named = new Set([...referencedFiles(shipped), 'LICENSE'])
+    const orphans = readdirSync(join(process.cwd(), 'src/app/style/fonts')).filter(file => !named.has(file))
+
+    expect(orphans).toEqual([])
+  })
+
+  it('asks for at least one, so a sheet that references nothing is not a pass', () => {
+    expect(referencedFiles(shipped).length).toBeGreaterThan(0)
+  })
+
+  // SIL OFL requires the notice to travel with the font.
+  it('carries the licence the font is under', () => {
+    expect(read('src/app/style/fonts/LICENSE')).toContain('SIL Open Font License')
+  })
+
+  // Vendoring froze these bytes. A Fontsource patch that fixes hinting or adds
+  // a glyph keeps the filenames and unicode-ranges, so the sheet comparison
+  // below stays green while the files it names are stale — the property that
+  // installing the package used to provide for free.
+  it('matches upstream byte for byte, since a bump no longer ships itself', () => {
+    const stale = referencedFiles(shipped).filter(file => !readFileSync(join(process.cwd(), 'src/app/style/fonts', file))
+      .equals(readFileSync(join(process.cwd(), 'node_modules', FONT_PACKAGE, 'files', file))))
+
+    expect(stale).toEqual([])
+  })
+
+  // `read`, not `readFileSync`: the licence is checked in, so a Windows
+  // checkout hands it back with CRLF against the LF of the installed copy.
+  it('carries upstream\'s own licence text, not a copy that has drifted', () => {
+    expect(read('src/app/style/fonts/LICENSE')).toBe(read(join('node_modules', FONT_PACKAGE, 'LICENSE')))
+  })
+})
+
 describe('the bundled app face', () => {
   it('matches the installed package, so a bump cannot go unnoticed', () => {
     expect(shipped).toBe(generateFontCss(upstream))

package/src/app/App.vue

@@ -107,6 +107,15 @@ onMounted(() => {
 
 const commandStore = useCommandStore()
 const layoutStore = useLayoutStore()
+
+/*
+ * Coerced once, because the pane prop and the heading below have to be exact
+ * complements. A stored settings object written before a key existed leaves it
+ * `undefined`, which a Boolean prop reads as its `true` default while `!` reads
+ * as `false` — so both the real header and its stand-in rendered, giving the
+ * page two `h1`s and two banners (#596).
+ */
+const storyListVisible = computed(() => !!layoutStore.settings.storyListVisible)
 </script>
 
 <template>
@@ -152,58 +161,59 @@ const layoutStore = useLayoutStore()
         </main>
       </div>
 
-      <BaseSplitPane
-        v-else-if="layoutStore.settings.storyListVisible"
-        save-id="main-horiz"
-        :min="5"
-        :max="50"
-        :default-split="15"
-        class="h-full"
-      >
-        <template #first>
-          <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right">
-            <AppHeader class="flex-none" />
-            <nav
-              aria-label="Stories"
-              class="flex-1 flex flex-col min-h-0"
-            >
-              <StoryList
-                :tree="tree"
-                :stories="stories"
-                class="flex-1"
-              />
-            </nav>
-          </div>
-        </template>
-
-        <template #last>
-          <main class="flex flex-col h-full">
-            <TopBar
-              @layout="isLayoutOpen = true"
-              @search="isSearchOpen = true"
-            />
-            <RouterView class="flex-1 min-h-0" />
-          </main>
-        </template>
-      </BaseSplitPane>
       <template v-else>
         <!--
-          The story list is hidden in this layout, and `AppHeader` went with it —
-          taking the page's only `h1` and its banner. A heading has to exist in
-          every layout, and it has to sit inside a landmark, so this branch
-          carries its own (#310).
+          With the story list hidden `AppHeader` goes with it, taking the page's
+          only `h1` and its banner. A heading has to exist in every layout, and
+          it has to sit inside a landmark, so this stands in for it (#310).
         -->
-        <header class="sr-only">
+        <header
+          v-if="!storyListVisible"
+          class="sr-only"
+        >
           <h1>{{ povesteConfig.theme?.title ?? 'Poveste' }}</h1>
         </header>
 
-        <main class="h-full flex flex-col">
-          <TopBar
-            @layout="isLayoutOpen = true"
-            @search="isSearchOpen = true"
-          />
-          <RouterView class="flex-1 min-h-0" />
-        </main>
+        <!--
+          One split pane whether or not the story list is showing. Two branches
+          each carrying their own `RouterView` moved the whole view in the tree
+          when the list was toggled, cold-booting the sandbox under it — the same
+          remount #328 removed from sidebar clicks (#596).
+        -->
+        <BaseSplitPane
+          save-id="main-horiz"
+          :min="5"
+          :max="50"
+          :default-split="15"
+          :show-first="storyListVisible"
+          class="h-full"
+        >
+          <template #first>
+            <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right">
+              <AppHeader class="flex-none" />
+              <nav
+                aria-label="Stories"
+                class="flex-1 flex flex-col min-h-0"
+              >
+                <StoryList
+                  :tree="tree"
+                  :stories="stories"
+                  class="flex-1"
+                />
+              </nav>
+            </div>
+          </template>
+
+          <template #last>
+            <main class="flex flex-col h-full">
+              <TopBar
+                @layout="isLayoutOpen = true"
+                @search="isSearchOpen = true"
+              />
+              <RouterView class="flex-1 min-h-0" />
+            </main>
+          </template>
+        </BaseSplitPane>
       </template>
 
       <LayoutModal

package/src/app/components/base/BaseSplitPane.vue

@@ -48,6 +48,34 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+
+  /**
+   * Whether the first pane exists at all.
+   *
+   * Dropping it here rather than at the call site keeps the other slot at one
+   * position in the tree, so a layout that sometimes has nothing to put beside
+   * its content does not remount that content when it gains or loses the pane
+   * (#328). A `v-if` inside this component leaves a comment placeholder, so the
+   * surviving pane keeps its index and Vue patches it rather than rebuilding it;
+   * a `v-if` at the call site, choosing between a pane and a bare element, is
+   * what does not.
+   */
+  showFirst: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * The same for the last pane — see `showFirst` (#596).
+   *
+   * At most one of the two is meant to be false. Both false renders an empty
+   * box that still persists a split, which is a caller mistake rather than a
+   * mode this component supports.
+   */
+  showLast: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits({
@@ -66,36 +94,48 @@ watch(() => props.split, (value) => {
   immediate: true,
 })
 
-if (props.saveId) {
-  const storageKey = `${SAVE_PREFIX}-split-pane-${props.saveId}`
+/*
+ * The key follows `saveId`, which callers build from reactive state —
+ * `story-main-${placement}` changes when the reader moves the options pane.
+ * Reading it once at setup only looked right while a layout change happened to
+ * remount this component; hiding a pane instead of replacing it removed that,
+ * and a stale key writes one placement's split over the other's (#596).
+ */
+const storageKey = computed(() => props.saveId ? `${SAVE_PREFIX}-split-pane-${props.saveId}` : null)
+
+watch(storageKey, (key) => {
+  if (!key) {
+    return
+  }
 
-  const savedValue = localStorage.getItem(storageKey)
+  const savedValue = localStorage.getItem(key)
+  let parsedValue
   if (savedValue != null) {
-    let parsedValue
     try {
       parsedValue = JSON.parse(savedValue)
     }
     catch (e) {
       console.error(e)
     }
-
-    if (typeof parsedValue === 'number') {
-      currentSplit.value = parsedValue
-    }
   }
 
-  watch(currentSplit, (value) => {
-    localStorage.setItem(storageKey, JSON.stringify(value))
-  })
+  // A key with nothing behind it means this layout has never been sized, so it
+  // starts from its own default rather than keeping the previous layout's.
+  currentSplit.value = typeof parsedValue === 'number' ? parsedValue : props.defaultSplit
+}, {
+  immediate: true,
+})
 
-  watch(currentSplit, (value) => {
-    if (value !== props.split) {
-      emit('update:split', value)
-    }
-  }, {
-    immediate: true,
-  })
-}
+watch(currentSplit, (value) => {
+  if (storageKey.value) {
+    localStorage.setItem(storageKey.value, JSON.stringify(value))
+  }
+  if (value !== props.split) {
+    emit('update:split', value)
+  }
+}, {
+  immediate: true,
+})
 
 const boundSplit = computed(() => {
   if (currentSplit.value < props.min) {
@@ -109,13 +149,27 @@ const boundSplit = computed(() => {
   }
 })
 
-const leftStyle = computed(() => ({
-  [props.orientation === 'landscape' ? 'width' : 'height']: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%`,
-}))
+const axis = computed(() => props.orientation === 'landscape' ? 'width' : 'height')
 
-const rightStyle = computed(() => ({
-  [props.orientation === 'landscape' ? 'width' : 'height']: props.fixed ? null : `${100 - boundSplit.value}%`,
-}))
+/** Whether there are two panes to divide, drag between, or share the axis. */
+const hasBothPanes = computed(() => props.showFirst && props.showLast)
+
+// A sole pane takes the axis whichever half it is, and loses the `flex-none` /
+// `flex-1` modifiers below that only mean something against a sibling — the
+// `fixed` case included, where a pixel width would pin it beside dead space.
+const leftStyle = computed(() => {
+  if (!hasBothPanes.value) {
+    return { [axis.value]: '100%' }
+  }
+  return { [axis.value]: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%` }
+})
+
+const rightStyle = computed(() => {
+  if (!hasBothPanes.value) {
+    return { [axis.value]: '100%' }
+  }
+  return { [axis.value]: props.fixed ? null : `${100 - boundSplit.value}%` }
+})
 
 const dragging = ref(false)
 let startPosition = 0
@@ -157,6 +211,15 @@ function dragEnd() {
   removeDragListeners()
 }
 
+// The dragger goes with the boundary, but the listeners are on `window` and
+// this component now outlives the toggle that removed it — so a drag in flight
+// would otherwise keep writing a split for a divider that is no longer there.
+watch(hasBothPanes, (both) => {
+  if (!both && dragging.value) {
+    dragEnd()
+  }
+})
+
 function removeDragListeners() {
   window.removeEventListener('mousemove', dragMove)
   window.removeEventListener('mouseup', dragEnd)
@@ -179,17 +242,19 @@ onUnmounted(() => {
     }"
   >
     <div
+      v-if="showFirst"
       class="relative top-0 left-0 z-20"
       :class="{
         'pointer-events-none': dragging,
-        'border-r border-gray-300/30 dark:border-gray-800': orientation === 'landscape' && showDivider,
-        'flex-none': fixed,
+        'border-r border-gray-300/30 dark:border-gray-800': orientation === 'landscape' && showDivider && hasBothPanes,
+        'flex-none': fixed && hasBothPanes,
       }"
       :style="leftStyle"
     >
       <slot name="first" />
 
       <div
+        v-if="hasBothPanes"
         class="dragger absolute z-100 hover:bg-primary-500/50 transition-colors duration-150 delay-150"
         :class="{
           'top-0 bottom-0 cursor-ew-resize': orientation === 'landscape',
@@ -201,11 +266,12 @@ onUnmounted(() => {
       />
     </div>
     <div
+      v-if="showLast"
       class="relative bottom-0 right-0"
       :class="{
         'pointer-events-none': dragging,
-        'border-t border-gray-300/30 dark:border-gray-800': orientation === 'portrait' && showDivider,
-        'flex-1': fixed,
+        'border-t border-gray-300/30 dark:border-gray-800': orientation === 'portrait' && showDivider && hasBothPanes,
+        'flex-1': fixed && hasBothPanes,
       }"
       :style="rightStyle"
     >