@poveste/app 0.5.1 → 0.5.3

package/dist/app/style/sandbox.css

@@ -1,8 +1,11 @@
 @import '@poveste/controls/dist/index.es.css';
 
+/* Lets the toolbar's preview background show through. Not `!important`: this
+   file is wrapped in `@layer poveste-defaults` so consumer rules outrank it,
+   and an important declaration would invert that. */
 html,
 body {
-  background: transparent !important;
+  background: transparent;
 }
 
 body {

package/dist/bundled/app.css

@@ -113,11 +113,11 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-270b4ce8] {
-  color: var(--v0884d9dc);
+.bind-icon-color[data-v-74c04c7c] {
+  color: var(--v2e50e6e6);
 }
-.bind-preview-bg[data-v-270b4ce8] {
-  background-color: var(--v233de319);
+.bind-preview-bg[data-v-74c04c7c] {
+  background-color: var(--v7d5058c5);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {

package/dist/bundled/components/panel/StoryControls.vue_vue_type_script_setup_true_lang.js

@@ -45,7 +45,7 @@ var StoryControls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					"slot-name": "controls",
 					variant: __props.variant,
 					story: __props.story,
-					class: "__poveste-render-custom-controls __histoire-render-custom-controls flex-none",
+					class: "__poveste-controls-slot __poveste-render-custom-controls __histoire-render-custom-controls flex-none",
 					onReady: _cache[0] || (_cache[0] = ($event) => ready.value = true)
 				}, null, 8, ["variant", "story"])) : hasInitState.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(ControlsComponentState_default, {
 					class: "flex-none my-2",

package/dist/bundled/components/story/StoryVariantGridItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default from "./StoryVariantGridItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/app/components/story/StoryVariantGridItem.vue
-var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-270b4ce8"]]);
+var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-74c04c7c"]]);
 //#endregion
 export { StoryVariantGridItem_default as default };

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

@@ -1,7 +1,7 @@
 import { povesteConfig } from "../../util/config.js";
 import { useStoryStore } from "../../stores/story.js";
 import { useScrollOnActive } from "../../util/scroll.js";
-import { usePreviewDark } from "../../util/color-scheme.js";
+import { previewDarkClasses, usePreviewDark } from "../../util/color-scheme.js";
 import { getContrastColor } from "../../util/preview-settings.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import ToolbarNewTab_default from "../toolbar/ToolbarNewTab.js";
@@ -34,8 +34,8 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	emits: { resize: (_width, _height) => true },
 	setup(__props, { emit: __emit }) {
 		useCssVars((_ctx) => ({
-			"v0884d9dc": unref(variant).iconColor,
-			"v233de319": unref(settings).backgroundColor
+			"v2e50e6e6": unref(variant).iconColor,
+			"v7d5058c5": unref(settings).backgroundColor
 		}));
 		const props = __props;
 		const emit = __emit;
@@ -126,7 +126,7 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 					variant: unref(variant),
 					story: __props.story,
 					dir: unref(settings).textDirection,
-					class: normalizeClass({ [unref(povesteConfig).theme.darkClass]: unref(previewDark) }),
+					class: normalizeClass(unref(previewDark) ? unref(previewDarkClasses)() : void 0),
 					onReady
 				}, null, 8, [
 					"variant",

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

@@ -1,6 +1,6 @@
 import { povesteConfig } from "../../util/config.js";
 import { useStoryStore } from "../../stores/story.js";
-import { usePreviewDark } from "../../util/color-scheme.js";
+import { previewDarkClasses, usePreviewDark } from "../../util/color-scheme.js";
 import { getContrastColor } from "../../util/preview-settings.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import GenericRenderStory_default from "./GenericRenderStory.js";
@@ -47,10 +47,7 @@ var StoryVariantSinglePreviewNative_vue_vue_type_script_setup_true_lang_default
 					key: `${__props.story.id}-${__props.variant.id}`,
 					variant: __props.variant,
 					story: __props.story,
-					class: normalizeClass(["h-full", {
-						[unref(povesteConfig).sandboxDarkClass]: unref(previewDark),
-						[unref(povesteConfig).theme.darkClass]: unref(previewDark)
-					}]),
+					class: normalizeClass(["h-full", unref(previewDark) ? unref(previewDarkClasses)() : void 0]),
 					dir: unref(settings).textDirection,
 					onReady
 				}, null, 8, [

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

@@ -1,4 +1,4 @@
-import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "../../util/const.js";
+import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "../../util/const.js";
 import { trackWindow } from "../../util/keyboard.js";
 import { useStoryStore } from "../../stores/story.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
@@ -23,7 +23,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		const settings = usePreviewSettingsStore().currentSettings;
 		const iframe = ref();
 		function syncState() {
-			if (iframe.value && props.variant.previewReady) iframe.value.contentWindow.postMessage({
+			if (iframe.value?.contentWindow && props.variant.previewReady) iframe.value.contentWindow.postMessage({
 				type: STATE_SYNC,
 				state: toRawDeep(props.variant.state, true)
 			});
@@ -54,6 +54,9 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 				case SANDBOX_READY:
 					setPreviewReady();
 					break;
+				case PREVIEW_SETTINGS_REQUEST:
+					syncSettings();
+					break;
 				case SANDBOX_HEIGHT: if (typeof event.data.h === "number") {
 					const next = Math.max(40, event.data.h);
 					if (next !== reportedHeight.value) reportedHeight.value = next;
@@ -86,7 +89,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 			stopTrackKeyboard?.();
 		});
 		function syncSettings() {
-			if (iframe.value) iframe.value.contentWindow.postMessage({
+			if (iframe.value?.contentWindow) iframe.value.contentWindow.postMessage({
 				type: PREVIEW_SETTINGS_SYNC,
 				settings: toRaw(settings)
 			});

package/dist/bundled/sandbox.js

@@ -1,7 +1,6 @@
-import { povesteConfig } from "./util/config.js";
 import { isDark } from "./util/dark.js";
-import { SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "./util/const.js";
-import { resolvePreviewDark } from "./util/color-scheme.js";
+import { PREVIEW_SETTINGS_REQUEST, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "./util/const.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";
 import { mapFile } from "./util/mapping.js";
@@ -19,14 +18,14 @@ var query = parseQuery(window.location.search);
 var file = ref(mapFile(files.find((f) => f.id === query.storyId)));
 var storedSettings = loadStoredPreviewSettings();
 if (storedSettings) applyPreviewSettings(storedSettings);
+if (window.parent && window.parent !== window) window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin);
 var prefersDark = usePreferredDark();
 var previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value));
 var darkClassTargets = [document.documentElement, document.querySelector("#app")];
 watch(previewDark, (value) => {
 	for (const el of darkClassTargets) {
 		if (!el) continue;
-		el.classList.toggle(povesteConfig.sandboxDarkClass, value);
-		el.classList.toggle(povesteConfig.theme.darkClass, value);
+		for (const className of previewDarkClasses()) el.classList.toggle(className, value);
 	}
 }, { immediate: true });
 var app = createApp({

package/dist/bundled/util/color-scheme.js

@@ -31,5 +31,15 @@ function usePreviewDark(settings) {
 	const prefersDark = usePreferredDark();
 	return computed(() => resolvePreviewDark(settings.colorScheme, prefersDark.value, isDark.value));
 }
+/**
+* Classes the story root carries in dark mode, identical on all three render
+* paths. The deprecated `sandboxDarkClass` is emitted only when a book sets it
+* (#126).
+*/
+function previewDarkClasses() {
+	const { darkClass } = povesteConfig.theme;
+	const legacy = povesteConfig.sandboxDarkClass;
+	return [.../* @__PURE__ */ new Set([darkClass, legacy])].filter((name) => !!name);
+}
 //#endregion
-export { defaultPreviewColorScheme, resolvePreviewDark, usePreviewDark };
+export { defaultPreviewColorScheme, previewDarkClasses, resolvePreviewDark, usePreviewDark };

package/dist/bundled/util/const.js

@@ -3,6 +3,7 @@ var STATE_SYNC = "__poveste:state-sync";
 var SANDBOX_READY = "__poveste:sandbox-ready";
 var EVENT_SEND = "__poveste:event";
 var PREVIEW_SETTINGS_SYNC = "__poveste:preview-settings-sync";
+var PREVIEW_SETTINGS_REQUEST = "__poveste:preview-settings-request";
 var SANDBOX_HEIGHT = "__poveste:sandbox-height";
 //#endregion
-export { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC };
+export { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -30,9 +30,9 @@
   "dependencies": {
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.5.1",
-    "@poveste/shared": "^0.5.1",
-    "@poveste/vendors": "^0.5.1"
+    "@poveste/controls": "^0.5.3",
+    "@poveste/shared": "^0.5.3",
+    "@poveste/vendors": "^0.5.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",

package/src/__tests__/color-scheme.spec.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest'
+
+// `util/config` re-exports a virtual module Vite generates from the book's own
+// config, so the tests supply it directly.
+const config: { theme: { darkClass?: string }, sandboxDarkClass?: string } = { theme: {} }
+
+vi.mock('../app/util/config', () => ({
+  get povesteConfig() {
+    return config
+  },
+}))
+
+// Touches browser storage on import; unrelated to the pure function under test.
+vi.mock('../app/util/dark', () => ({ isDark: { value: false } }))
+
+const { previewDarkClasses } = await import('../app/util/color-scheme')
+
+function darkClassesFor({ darkClass = 'dark', sandboxDarkClass }: { darkClass?: string, sandboxDarkClass?: string }) {
+  config.theme = { darkClass }
+  config.sandboxDarkClass = sandboxDarkClass
+  return previewDarkClasses()
+}
+
+describe('previewDarkClasses', () => {
+  it('returns the theme class for a book that configures neither', () => {
+    expect(darkClassesFor({})).toEqual(['dark'])
+  })
+
+  // #126: the deprecated option used to default to `dark` and be emitted here
+  // too, which is what made the three render paths disagree.
+  it('returns the theme class alone when only it is configured', () => {
+    expect(darkClassesFor({ darkClass: 'my-dark' })).toEqual(['my-dark'])
+  })
+
+  it('appends sandboxDarkClass when a book still sets it', () => {
+    expect(darkClassesFor({ darkClass: 'my-dark', sandboxDarkClass: 'legacy' })).toEqual(['my-dark', 'legacy'])
+  })
+
+  it('returns one class when both names are the same', () => {
+    expect(darkClassesFor({ darkClass: 'dark', sandboxDarkClass: 'dark' })).toEqual(['dark'])
+  })
+
+  // `classList.toggle('')` throws, and the sandbox runs it during boot, so an
+  // empty entry leaves every preview blank rather than merely unstyled. Only
+  // the empty string reaches here — defu fills an undefined class.
+  describe('when a configured class name is empty', () => {
+    it('drops an empty theme class', () => {
+      expect(darkClassesFor({ darkClass: '' })).toEqual([])
+    })
+
+    it('drops an empty sandboxDarkClass', () => {
+      expect(darkClassesFor({ sandboxDarkClass: '' })).toEqual(['dark'])
+    })
+  })
+})

package/src/app/components/panel/StoryControls.vue

@@ -58,7 +58,7 @@ const hasInitState = computed(() => Object
       slot-name="controls"
       :variant="variant"
       :story="story"
-      class="__poveste-render-custom-controls __histoire-render-custom-controls flex-none"
+      class="__poveste-controls-slot __poveste-render-custom-controls __histoire-render-custom-controls flex-none"
       @ready="ready = true"
     />
 

package/src/app/components/story/StoryVariantGridItem.vue

@@ -8,7 +8,7 @@ import { computed, ref, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { useStoryStore } from '../../stores/story'
-import { usePreviewDark } from '../../util/color-scheme'
+import { previewDarkClasses, usePreviewDark } from '../../util/color-scheme'
 import { povesteConfig } from '../../util/config'
 import { getSourceCode } from '../../util/docs'
 import { getContrastColor } from '../../util/preview-settings'
@@ -163,9 +163,7 @@ const useIframe = computed(() => {
           :variant="variant"
           :story="story"
           :dir="settings.textDirection"
-          :class="{
-            [povesteConfig.theme.darkClass]: previewDark,
-          }"
+          :class="previewDark ? previewDarkClasses() : undefined"
           @ready="onReady"
         />
       </div>

package/src/app/components/story/StoryVariantSinglePreviewNative.vue

@@ -3,7 +3,7 @@ import type { Story, Variant } from '../../types'
 import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { useStoryStore } from '../../stores/story'
-import { usePreviewDark } from '../../util/color-scheme'
+import { previewDarkClasses, usePreviewDark } from '../../util/color-scheme'
 import { povesteConfig } from '../../util/config'
 import { getContrastColor } from '../../util/preview-settings'
 import GenericRenderStory from './GenericRenderStory.vue'
@@ -57,10 +57,7 @@ const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastC
         :variant="variant"
         :story="story"
         class="h-full"
-        :class="{
-          [povesteConfig.sandboxDarkClass]: previewDark, // @TODO remove
-          [povesteConfig.theme.darkClass]: previewDark,
-        }"
+        :class="previewDark ? previewDarkClasses() : undefined"
         :dir="settings.textDirection"
         @ready="onReady"
       />

package/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -7,7 +7,7 @@ import { computed, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import { useEventsStore } from '../../stores/events'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { useStoryStore } from '../../stores/story'
-import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from '../../util/const'
+import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from '../../util/const'
 import { trackWindow } from '../../util/keyboard'
 import { getSandboxUrl } from '../../util/sandbox'
 import { toRawDeep } from '../../util/state'
@@ -26,7 +26,7 @@ const settings = usePreviewSettingsStore().currentSettings
 const iframe = ref<HTMLIFrameElement>()
 
 function syncState() {
-  if (iframe.value && props.variant.previewReady) {
+  if (iframe.value?.contentWindow && props.variant.previewReady) {
     iframe.value.contentWindow.postMessage({
       type: STATE_SYNC,
       state: toRawDeep(props.variant.state, true),
@@ -72,6 +72,9 @@ useEventListener(window, 'message', (event) => {
     case SANDBOX_READY:
       setPreviewReady()
       break
+    case PREVIEW_SETTINGS_REQUEST:
+      syncSettings()
+      break
     case SANDBOX_HEIGHT:
       if (typeof event.data.h === 'number') {
         const next = Math.max(40, event.data.h)
@@ -118,7 +121,7 @@ onBeforeUnmount(() => {
 // Settings
 
 function syncSettings() {
-  if (iframe.value) {
+  if (iframe.value?.contentWindow) {
     iframe.value.contentWindow.postMessage({
       type: PREVIEW_SETTINGS_SYNC,
       settings: toRaw(settings),

package/src/app/sandbox.ts

@@ -8,9 +8,8 @@ import { parseQuery } from 'vue-router'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import GenericRenderStory from './components/story/GenericRenderStory.vue'
 import { setupPluginApi } from './plugin.js'
-import { resolvePreviewDark } from './util/color-scheme.js'
-import { povesteConfig } from './util/config.js'
-import { PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from './util/const.js'
+import { previewDarkClasses, resolvePreviewDark } from './util/color-scheme.js'
+import { PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from './util/const.js'
 import { isDark } from './util/dark.js'
 import { mapFile } from './util/mapping'
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from './util/preview-settings.js'
@@ -28,15 +27,20 @@ if (storedSettings) {
   applyPreviewSettings(storedSettings)
 }
 
+// The app pushes settings when it sees the iframe load, which is one document
+// swap away from being wrong: a push aimed at a document that is going away is
+// dropped with no error and nothing re-sends it, leaving the sandbox on the
+// stored value or on none at all (#75). Ask instead — a request can only come
+// from a document that is running and listening.
+if (window.parent && window.parent !== window) {
+  window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin)
+}
+
 // The story preview has its own color scheme, independent from the app chrome.
 // The fallback covers settings stored before the option existed.
 const prefersDark = usePreferredDark()
 const previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value))
 
-// `sandboxDarkClass` is poveste's own deprecated config option, superseded by
-// `theme.darkClass`. Still honoured on purpose: dropping it would silently stop
-// applying the class for anyone who set it. Removing the option is a breaking
-// config change and belongs to a major, not here.
 /*
  * The class also has to land *inside* the story's `@scope` root, not only on
  * `<html>` (#101).
@@ -60,9 +64,9 @@ watch(previewDark, (value) => {
   for (const el of darkClassTargets) {
     if (!el) continue
 
-    // eslint-disable-next-line ts/no-deprecated
-    el.classList.toggle(povesteConfig.sandboxDarkClass, value)
-    el.classList.toggle(povesteConfig.theme.darkClass, value)
+    for (const className of previewDarkClasses()) {
+      el.classList.toggle(className, value)
+    }
   }
 }, {
   immediate: true,

package/src/app/style/sandbox.css

@@ -1,8 +1,11 @@
 @import '@poveste/controls/dist/index.es.css';
 
+/* Lets the toolbar's preview background show through. Not `!important`: this
+   file is wrapped in `@layer poveste-defaults` so consumer rules outrank it,
+   and an important declaration would invert that. */
 html,
 body {
-  background: transparent !important;
+  background: transparent;
 }
 
 body {

package/src/app/util/color-scheme.ts

@@ -34,3 +34,16 @@ export function usePreviewDark(settings: PreviewSettings) {
   const prefersDark = usePreferredDark()
   return computed(() => resolvePreviewDark(settings.colorScheme, prefersDark.value, isDark.value))
 }
+
+/**
+ * Classes the story root carries in dark mode, identical on all three render
+ * paths. The deprecated `sandboxDarkClass` is emitted only when a book sets it
+ * (#126).
+ */
+export function previewDarkClasses(): string[] {
+  const { darkClass } = povesteConfig.theme
+  // eslint-disable-next-line ts/no-deprecated
+  const legacy = povesteConfig.sandboxDarkClass
+  // Empty entries are dropped: `classList.toggle('')` throws, during boot.
+  return [...new Set([darkClass, legacy])].filter((name): name is string => !!name)
+}

package/src/app/util/const.ts

@@ -2,4 +2,5 @@ export const STATE_SYNC = '__poveste:state-sync'
 export const SANDBOX_READY = '__poveste:sandbox-ready'
 export const EVENT_SEND = '__poveste:event'
 export const PREVIEW_SETTINGS_SYNC = '__poveste:preview-settings-sync'
+export const PREVIEW_SETTINGS_REQUEST = '__poveste:preview-settings-request'
 export const SANDBOX_HEIGHT = '__poveste:sandbox-height'