@poveste/app 0.2.0 → 0.3.0

package/dist/app/style/floating.pcss

@@ -5,18 +5,24 @@
 }
 
 .v-popper--theme-dropdown {
-  .ptw-dark & {
-    .v-popper__inner {
-      @apply ptw-bg-gray-700 ptw-border-gray-850 ptw-text-gray-100;
-    }
+  /*
+   * Written with the `dark:` variant rather than a `.ptw-dark &` descendant
+   * rule. The chrome CSS is wrapped in `@scope`, and `.ptw-dark` sits on
+   * `<html>` — above the scope root — so a descendant rule keyed on it never
+   * matches and the dropdown silently falls back to floating-vue's stock light
+   * theme. `dark:` compiles to `&:where(.ptw-dark, .ptw-dark *)`, which puts the
+   * condition on the subject and survives the wrapper. See #101.
+   */
+  .v-popper__inner {
+    @apply dark:bg-gray-700 dark:border-gray-850 dark:text-gray-100;
+  }
 
-    .v-popper__arrow-inner {
-      @apply ptw-border-gray-700;
-    }
+  .v-popper__arrow-inner {
+    @apply dark:border-gray-700;
+  }
 
-    .v-popper__arrow-outer {
-      @apply ptw-border-gray-850;
-    }
+  .v-popper__arrow-outer {
+    @apply dark:border-gray-850;
   }
 
   &.v-popper__popper--show-from .v-popper__wrapper {

package/dist/app/style/main.pcss

@@ -2,40 +2,115 @@
 @import 'floating-vue/dist/style.css';
 @import '@poveste/controls/dist/index.es.css';
 
-@import 'floating.pcss';
-@import 'transitions.pcss';
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
+@import './floating.pcss';
+@import './transitions.pcss';
 
-a,
-input,
-button {
-  color: inherit;
-}
+/*
+ * Tailwind v4. Preflight is intentionally omitted (was `corePlugins.preflight:
+ * false` in v3) — the manual reset below replaces it. The `ptw-` utility prefix
+ * is gone; chrome/story isolation is handled by @scope (postcss-scope-wrapper, #27).
+ */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
 
-a {
-  text-decoration: inherit;
-}
+/* v4 auto-detection only scans this package; the app renders controls, so their
+   utility classes must be generated here too (was a content glob in v3). */
+@source "../../../../poveste-controls/src";
 
-input, button {
-  font-family: inherit;
-}
+/* The markdown renderer builds the docs code-block chrome as an HTML string, so
+   its utility classes live in a package v4 never scans. */
+@source "../../../../poveste/src/node/markdown.ts";
+
+/* TODO(#36): port the v3 typography theme() customization to v4 CSS. */
+@plugin '@tailwindcss/typography';
+
+/* Chrome dark mode. Deliberately a distinct class from the story-side
+   `theme.darkClass` default (`dark`) so chrome and story themes stay independent —
+   in v3 the `ptw-` prefix applied to the dark class and kept them separate. */
+@custom-variant dark (&:where(.ptw-dark, .ptw-dark *));
 
-a,
-button {
-  user-select: none;
+@theme {
+  /*
+   * primary + gray are themable at runtime: resolved-theme.ts injects
+   * --_poveste-color-<name>-<key> as space-separated RGB channels, and v4's
+   * native color-mix handles opacity (replacing the v3 withOpacityValue shim).
+   */
+  --color-primary-50: rgb(var(--_poveste-color-primary-50));
+  --color-primary-100: rgb(var(--_poveste-color-primary-100));
+  --color-primary-200: rgb(var(--_poveste-color-primary-200));
+  --color-primary-300: rgb(var(--_poveste-color-primary-300));
+  --color-primary-400: rgb(var(--_poveste-color-primary-400));
+  --color-primary-500: rgb(var(--_poveste-color-primary-500));
+  --color-primary-600: rgb(var(--_poveste-color-primary-600));
+  --color-primary-700: rgb(var(--_poveste-color-primary-700));
+  --color-primary-800: rgb(var(--_poveste-color-primary-800));
+  --color-primary-900: rgb(var(--_poveste-color-primary-900));
+
+  --color-gray-50: rgb(var(--_poveste-color-gray-50));
+  --color-gray-100: rgb(var(--_poveste-color-gray-100));
+  --color-gray-200: rgb(var(--_poveste-color-gray-200));
+  --color-gray-300: rgb(var(--_poveste-color-gray-300));
+  --color-gray-400: rgb(var(--_poveste-color-gray-400));
+  --color-gray-500: rgb(var(--_poveste-color-gray-500));
+  --color-gray-600: rgb(var(--_poveste-color-gray-600));
+  --color-gray-700: rgb(var(--_poveste-color-gray-700));
+  --color-gray-750: rgb(var(--_poveste-color-gray-750));
+  --color-gray-800: rgb(var(--_poveste-color-gray-800));
+  --color-gray-850: rgb(var(--_poveste-color-gray-850));
+  --color-gray-900: rgb(var(--_poveste-color-gray-900));
+  --color-gray-950: rgb(var(--_poveste-color-gray-950));
+
+  /* border radius (ported from the root v3 config) */
+  --radius-sm: 0.25rem;
+  --radius: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+ * Manual reset — replaces Preflight, which is intentionally disabled.
+ *
+ * MUST stay inside `@layer base`. Unlayered rules beat *every* layered rule
+ * regardless of specificity, so an unlayered `* { border-width: 0 }` silently
+ * defeats `.border` in `@layer utilities` — every border in the app renders at
+ * zero width. In v3 this block was safe unlayered because `@tailwind utilities`
+ * emitted unlayered rules that won on specificity; v4 puts them in a real
+ * cascade layer, which inverts the outcome. Same trap for the `a`/`input`/
+ * `button` rules below vs. text-colour and font utilities.
+ */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+  }
+
+  a,
+  input,
+  button {
+    color: inherit;
+  }
+
+  a {
+    text-decoration: inherit;
+  }
+
+  input, button {
+    font-family: inherit;
+  }
+
+  a,
+  button {
+    user-select: none;
+  }
+}
 
 @layer base {
   body,
@@ -73,7 +148,7 @@ button {
     background: transparent !important;
   }
 
-  .ptw-prose {
+  .prose {
     h1, h2, h3, h4 {
       &:not(:hover) {
         .header-anchor[aria-hidden="true"] {
@@ -93,8 +168,93 @@ button {
     background-repeat: no-repeat;
     background-position: right;
 
-    .ptw-dark & {
+    /* Subject-side, not `.ptw-dark &` — see the note in floating.pcss. */
+    &:where(.ptw-dark, .ptw-dark *) {
       background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }
   }
 }
+
+/*
+ * Typography (@tailwindcss/typography) customization — ported from the v3
+ * `theme.extend.typography` JS config to CSS. Unlayered so it overrides the
+ * plugin's layered defaults. Needs a visual pass on the docs/markdown pages.
+ */
+.prose {
+  --tw-prose-invert-quote-borders: var(--color-gray-800);
+  --tw-prose-invert-hr: var(--color-gray-800);
+  --tw-prose-invert-bullets: var(--color-gray-500);
+
+  /*
+   * The guard repeats what the plugin puts on every rule it generates, so
+   * `not-prose` opts out of ours too. In v3 these lived in
+   * `theme.extend.typography` and the plugin added it for us; hand-written CSS
+   * gets nothing.
+   *
+   * `:where()` keeps the guard at zero specificity, so every selector below
+   * weighs exactly what its unguarded form did.
+   */
+  & :not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    &:is(a) {
+      color: var(--color-primary-500);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &:is(h1, h2, h3, h4, th) {
+      margin-bottom: 0.75rem;
+
+      &:not(:first-child) {
+        margin-top: 1.25rem;
+      }
+    }
+
+    &:is(blockquote) {
+      margin-left: 0;
+      margin-right: 0;
+      background-color: var(--color-gray-100);
+      padding: 0.25rem 0.375rem;
+
+      &:where(.ptw-dark, .ptw-dark *) {
+        background-color: var(--color-gray-750);
+      }
+
+      & p:first-child {
+        margin-top: 0;
+      }
+
+      & p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &:is(li) {
+      margin-top: 0.1rem;
+      margin-bottom: 0.1rem;
+    }
+
+    /*
+     * Inline code only. markdown-it wraps the highlighted output in
+     * `<pre><code class="language-x">`, and that `code` is the parent of the
+     * `not-prose` island rather than part of it, so the guard above misses it —
+     * as does the island itself for shiki's own `code`, which sits in a `pre`
+     * too. The plugin's `pre code` reset would have handled both, but it lives
+     * in a cascade layer and this rule is unlayered: unlayered wins outright,
+     * the same inversion as #104.
+     */
+    &:is(code):not(:where(pre *)) {
+      background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+      font-weight: normal;
+      padding: 0.05rem 0.5rem;
+      border-radius: 0.25rem;
+      font-size: 0.8rem;
+
+      &::before, &::after {
+        display: none;
+      }
+    }
+  }
+}

package/dist/app/style/sandbox.css

@@ -14,7 +14,9 @@ html {
   font-family: 'Noto Sans Display', system-ui, sans-serif;
 }
 
-.ptw-sandbox-hidden {
+/* Namespaced: sandbox.css is not @scope-wrapped, so this rule shares the
+   document with user story markup. */
+.__poveste-sandbox-hidden {
   display: none;
 }
 

package/dist/app/style/transitions.pcss

@@ -1,51 +1,50 @@
-.__poveste-scale-x {
-  &-enter-active,
-  &-leave-active {
-    transition: transform .15s, opacity .15s;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: scaleX(0);
-    opacity: 0;
-  }
-}
-
-.__poveste-scale-y {
-  &-enter-active,
-  &-leave-active {
-    transition: transform .15s, opacity .15s;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: scaleY(0);
-    opacity: 0;
-  }
-}
-
-.__poveste-fade {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity .15s;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.__poveste-fade-bottom {
-  &-enter-active,
-  &-leave-active {
-    transition: transform .15s, opacity .15s;
-    transform: translateY(0px);
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translateY(32px);
-    opacity: 0;
-  }
+/*
+ * Vue transition classes. Written out in full rather than with SCSS-style
+ * `&-enter-active` concatenation: Tailwind v4 uses native CSS nesting, where
+ * `&` is a real selector reference (`:is(…)`) and cannot be string-joined
+ * with a suffix. v3 resolved that through postcss-nested.
+ */
+
+.__poveste-scale-x-enter-active,
+.__poveste-scale-x-leave-active {
+  transition: transform .15s, opacity .15s;
+}
+
+.__poveste-scale-x-enter-from,
+.__poveste-scale-x-leave-to {
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+.__poveste-scale-y-enter-active,
+.__poveste-scale-y-leave-active {
+  transition: transform .15s, opacity .15s;
+}
+
+.__poveste-scale-y-enter-from,
+.__poveste-scale-y-leave-to {
+  transform: scaleY(0);
+  opacity: 0;
+}
+
+.__poveste-fade-enter-active,
+.__poveste-fade-leave-active {
+  transition: opacity .15s;
+}
+
+.__poveste-fade-enter-from,
+.__poveste-fade-leave-to {
+  opacity: 0;
+}
+
+.__poveste-fade-bottom-enter-active,
+.__poveste-fade-bottom-leave-active {
+  transition: transform .15s, opacity .15s;
+  transform: translateY(0px);
+}
+
+.__poveste-fade-bottom-enter-from,
+.__poveste-fade-bottom-leave-to {
+  transform: translateY(32px);
+  opacity: 0;
 }

package/dist/bundled/App.js

@@ -0,0 +1,5 @@
+import App_vue_vue_type_script_setup_true_lang_default from "./App.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/App.vue
+var App_default = App_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { App_default as default };

package/dist/bundled/App.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,169 @@
+import { povesteConfig } from "./util/config.js";
+import { toggleDark } from "./util/dark.js";
+import { isMobile } from "./util/responsive.js";
+import { onKeyboardShortcut } from "./util/keyboard.js";
+import AppActions_default from "./components/app/AppActions.js";
+import AppHeader_default from "./components/app/AppHeader.js";
+import { useStoryStore } from "./stores/story.js";
+import StoryList_default from "./components/tree/StoryList.js";
+import Breadcrumb_default from "./components/app/Breadcrumb.js";
+import InitialLoading_default from "./components/app/InitialLoading.js";
+import TopBar_default from "./components/app/TopBar.js";
+import BaseSplitPane_default from "./components/base/BaseSplitPane.js";
+import { useCommandStore } from "./stores/command.js";
+import CommandPromptsModal_default from "./components/command/CommandPromptsModal.js";
+import { useLayoutStore } from "./stores/layout.js";
+import LayoutModal_default from "./components/layout/LayoutModal.js";
+import SearchModal_default from "./components/search/SearchModal.js";
+import GenericMountStory_default from "./components/story/GenericMountStory.js";
+import { mapFile } from "./util/mapping.js";
+import { useTitle } from "@poveste/vendors/vue-use";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onMounted, openBlock, ref, resolveComponent, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { files, onUpdate, tree } from "virtual:$poveste-stories";
+//#region src/app/App.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-app-root h-full" };
+var _hoisted_2 = {
+	key: 0,
+	class: "poveste-app hidden"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "h-full flex flex-col divide-y divide-gray-100 dark:divide-gray-800"
+};
+var _hoisted_4 = { class: "flex items-center gap-2 pr-4" };
+var _hoisted_5 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
+var _hoisted_6 = { class: "flex flex-col h-full" };
+var _hoisted_7 = {
+	key: 2,
+	class: "h-full flex flex-col"
+};
+var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "PovesteApp",
+	setup(__props) {
+		const files$1 = ref(files.map((file) => mapFile(file)));
+		const tree$1 = ref(tree);
+		onUpdate((newFiles, newTree) => {
+			loading.value = false;
+			files$1.value = newFiles.map((file) => {
+				const existingFile = files$1.value.find((f) => f.id === file.id);
+				return mapFile(file, existingFile);
+			});
+			tree$1.value = newTree;
+		});
+		const stories = computed(() => files$1.value.reduce((acc, file) => {
+			acc.push(file.story);
+			return acc;
+		}, []));
+		const storyStore = useStoryStore();
+		watch(stories, (value) => {
+			storyStore.setStories(value);
+		}, { immediate: true });
+		useTitle(computed(() => {
+			if (storyStore.currentStory) {
+				let title = storyStore.currentStory.title;
+				if (storyStore.currentVariant) title += ` › ${storyStore.currentVariant.title}`;
+				return `${title} | ${povesteConfig.theme.title}`;
+			}
+			return povesteConfig.theme.title;
+		}));
+		const loadSearch = ref(false);
+		const isSearchOpen = ref(false);
+		const isLayoutOpen = ref(false);
+		watch(isSearchOpen, (value) => {
+			if (value) loadSearch.value = true;
+		});
+		onKeyboardShortcut(["ctrl+k", "meta+k"], (event) => {
+			isSearchOpen.value = true;
+			event.preventDefault();
+		});
+		onKeyboardShortcut(["ctrl+shift+l", "meta+shift+l"], (event) => {
+			isLayoutOpen.value = !isLayoutOpen.value;
+			event.preventDefault();
+		});
+		onKeyboardShortcut(["ctrl+shift+d", "meta+shift+d"], (event) => {
+			event.preventDefault();
+			toggleDark();
+		});
+		const loading = ref(false);
+		if (import.meta.hot && !files.length) {
+			loading.value = true;
+			import.meta.hot.on("poveste:all-stories-loaded", () => {
+				loading.value = false;
+			});
+		}
+		const mounted = ref(false);
+		onMounted(() => {
+			mounted.value = true;
+		});
+		const commandStore = useCommandStore();
+		const layoutStore = useLayoutStore();
+		return (_ctx, _cache) => {
+			const _component_RouterView = resolveComponent("RouterView");
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				unref(storyStore).currentStory ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(), createBlock(GenericMountStory_default, {
+					key: unref(storyStore).currentStory.id,
+					story: unref(storyStore).currentStory
+				}, null, 8, ["story"]))])) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: "h-screen bg-gray-100 dark:bg-gray-750 dark:text-gray-100",
+					style: normalizeStyle({ opacity: mounted.value ? 1 : 0 })
+				}, [
+					unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+						createElementVNode("div", _hoisted_4, [createVNode(AppHeader_default, { class: "flex-1" }), createVNode(AppActions_default, {
+							class: "flex-none",
+							onLayout: _cache[0] || (_cache[0] = ($event) => isLayoutOpen.value = true),
+							onSearch: _cache[1] || (_cache[1] = ($event) => isSearchOpen.value = true)
+						})]),
+						createVNode(Breadcrumb_default, {
+							tree: tree$1.value,
+							stories: stories.value
+						}, null, 8, ["tree", "stories"]),
+						createVNode(_component_RouterView, { class: "grow" })
+					])) : unref(layoutStore).settings.storyListVisible ? (openBlock(), createBlock(BaseSplitPane_default, {
+						key: 1,
+						"save-id": "main-horiz",
+						min: 5,
+						max: 50,
+						"default-split": 15,
+						class: "h-full"
+					}, {
+						first: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(AppHeader_default, { class: "flex-none" }), createVNode(StoryList_default, {
+							tree: tree$1.value,
+							stories: stories.value,
+							class: "flex-1"
+						}, null, 8, ["tree", "stories"])])]),
+						last: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(TopBar_default, {
+							onLayout: _cache[2] || (_cache[2] = ($event) => isLayoutOpen.value = true),
+							onSearch: _cache[3] || (_cache[3] = ($event) => isSearchOpen.value = true)
+						}), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])]),
+						_: 1
+					})) : (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(TopBar_default, {
+						onLayout: _cache[4] || (_cache[4] = ($event) => isLayoutOpen.value = true),
+						onSearch: _cache[5] || (_cache[5] = ($event) => isSearchOpen.value = true)
+					}), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])),
+					!unref(isMobile) ? (openBlock(), createBlock(LayoutModal_default, {
+						key: 3,
+						shown: isLayoutOpen.value,
+						onClose: _cache[6] || (_cache[6] = ($event) => isLayoutOpen.value = false)
+					}, null, 8, ["shown"])) : createCommentVNode("", true),
+					loadSearch.value ? (openBlock(), createBlock(SearchModal_default, {
+						key: 4,
+						shown: isSearchOpen.value,
+						onClose: _cache[7] || (_cache[7] = ($event) => isSearchOpen.value = false)
+					}, null, 8, ["shown"])) : createCommentVNode("", true),
+					_ctx.__POVESTE_DEV__ ? (openBlock(), createBlock(CommandPromptsModal_default, {
+						key: 5,
+						shown: unref(commandStore).showPromptsModal,
+						onClose: _cache[8] || (_cache[8] = ($event) => unref(commandStore).showPromptsModal = false)
+					}, null, 8, ["shown"])) : createCommentVNode("", true)
+				], 4),
+				createVNode(Transition, { name: "__poveste-fade" }, {
+					default: withCtx(() => [loading.value ? (openBlock(), createBlock(InitialLoading_default, { key: 0 })) : createCommentVNode("", true)]),
+					_: 1
+				})
+			]);
+		};
+	}
+});
+//#endregion
+export { App_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/_virtual/_plugin-vue_export-helper.js

@@ -1,10 +1,8 @@
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-export {
-  _export_sfc as default
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
 };
+//#endregion
+export { _plugin_vue_export_helper_default as default };

package/dist/bundled/api.js

@@ -1,12 +1,8 @@
-import { isDark as isDark$1 } from "./util/dark.js";
-import { toggleDark } from "./util/dark.js";
+import { isDark as isDark$1, toggleDark } from "./util/dark.js";
 import { logEvent } from "./util/events.js";
-"use strict";
+//#region src/app/api.ts
 function isDark() {
-  return isDark$1.value;
+	return isDark$1.value;
 }
-export {
-  isDark,
-  logEvent,
-  toggleDark
-};
+//#endregion
+export { isDark, logEvent, toggleDark };