@poveste/app 0.2.0 → 0.3.0

package/src/app/components/toolbar/ToolbarResponsiveSize.vue

@@ -13,46 +13,46 @@ const settings = usePreviewSettingsStore().currentSettings
     placement="bottom-end"
     :skidding="6"
     :disabled="!povesteConfig.responsivePresets?.length"
-    class="poveste-toolbar-responsive-size ptw-flex-none"
+    class="poveste-toolbar-responsive-size flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
-      class="ptw-flex ptw-items-center ptw-gap-1 ptw-px-2.5 ptw-py-1.5 ptw-text-gray-900 dark:ptw-text-gray-100 ptw-transition-colors ptw-group"
+      class="flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group"
       :class="{
-        'hover:ptw-bg-white/50 dark:hover:ptw-bg-white/10 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer': povesteConfig.responsivePresets?.length,
+        'hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer': povesteConfig.responsivePresets?.length,
       }"
     >
       <Icon
         icon="carbon:devices"
-        class="ptw-w-4 ptw-h-4"
+        class="w-4 h-4"
       />
       <Icon
         icon="carbon:chevron-down"
-        class="ptw-w-3 ptw-h-3 ptw-opacity-40 group-hover:ptw-opacity-70"
+        class="w-3 h-3 opacity-40 group-hover:opacity-70"
       />
     </div>
 
     <template #popper="{ hide }">
-      <div class="ptw-flex ptw-flex-col ptw-items-stretch">
+      <div class="flex flex-col items-stretch">
         <BaseCheckbox v-model="settings.rotate">
           Rotate
         </BaseCheckbox>
 
-        <div class="ptw-flex ptw-items-center ptw-gap-2 ptw-px-4 ptw-py-3">
+        <div class="flex items-center gap-2 px-4 py-3">
           <input
             v-model.number="settings.responsiveWidth"
             v-tooltip="'Responsive width (px)'"
             type="number"
-            class="ptw-bg-transparent ptw-border ptw-border-gray-200 dark:ptw-border-gray-850 ptw-rounded ptw-w-20 ptw-opacity-50 focus:ptw-opacity-100 ptw-flex-1 ptw-min-w-0"
+            class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
             step="16"
             placeholder="Auto"
           >
-          <span class="ptw-opacity-50">×</span>
+          <span class="opacity-50">×</span>
           <input
             v-model.number="settings.responsiveHeight"
             v-tooltip="'Responsive height (px)'"
             type="number"
-            class="ptw-bg-transparent ptw-border ptw-border-gray-200 dark:ptw-border-gray-850 ptw-rounded ptw-w-20 ptw-opacity-50 focus:ptw-opacity-100 ptw-flex-1 ptw-min-w-0"
+            class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
             step="16"
             placeholder="Auto"
           >
@@ -61,16 +61,16 @@ const settings = usePreviewSettingsStore().currentSettings
         <button
           v-for="(preset, index) in povesteConfig.responsivePresets"
           :key="index"
-          class="ptw-px-4 ptw-py-3 ptw-cursor-pointer ptw-text-left ptw-flex ptw-gap-4"
+          class="px-4 py-3 cursor-pointer text-left flex gap-4"
           :class="[
             settings.responsiveWidth === preset.width && settings.responsiveHeight === preset.height
-              ? 'ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black'
-              : 'ptw-bg-transparent hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700',
+              ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+              : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
           ]"
           @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height;hide()"
         >
           {{ preset.label }}
-          <span class="ptw-ml-auto ptw-opacity-70 ptw-flex ptw-gap-1">
+          <span class="ml-auto opacity-70 flex gap-1">
             <span v-if="preset.width">{{ preset.width }}<span v-if="!preset.height">px</span></span>
             <span v-if="preset.width && preset.height">x</span>
             <span v-if="preset.height">{{ preset.height }}<span v-if="!preset.width">px</span></span>

package/src/app/components/toolbar/ToolbarTextDirection.vue

@@ -14,7 +14,7 @@ const settings = usePreviewSettingsStore().currentSettings
   >
     <Icon
       :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
-      class="ptw-w-4 ptw-h-4"
+      class="w-4 h-4"
     />
   </TopBarChipItem>
 </template>

package/src/app/components/toolbar/ToolbarTitle.vue

@@ -20,19 +20,19 @@ const subtitle = computed(() => {
 </script>
 
 <template>
-  <div class="poveste-toolbar-title ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0">
+  <div class="poveste-toolbar-title flex items-center gap-2 min-w-0">
     <Icon
       :icon="icon"
-      class="ptw-w-4 ptw-h-4 ptw-flex-none"
+      class="w-4 h-4 flex-none"
       :class="[
-        iconColor ? 'bind-icon-color' : 'ptw-text-gray-500 dark:ptw-text-gray-400',
+        iconColor ? 'bind-icon-color' : 'text-gray-500 dark:text-gray-400',
       ]"
     />
-    <div class="ptw-flex ptw-flex-col ptw-justify-center ptw-min-w-0 ptw-leading-tight ptw-text-center ptw-h-[2.25rem]">
-      <span class="ptw-truncate ptw-text-sm ptw-font-medium ptw-text-gray-900 dark:ptw-text-gray-100">{{ title }}</span>
+    <div class="flex flex-col justify-center min-w-0 leading-tight text-center h-[2.25rem]">
+      <span class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{{ title }}</span>
       <span
         v-if="subtitle"
-        class="ptw-truncate ptw-text-xs ptw-text-gray-500 dark:ptw-text-gray-400"
+        class="truncate text-xs text-gray-500 dark:text-gray-400"
       >{{ subtitle }}</span>
     </div>
   </div>

package/src/app/components/tree/StoryGroup.vue

@@ -27,23 +27,23 @@ function toggleOpen() {
 <template>
   <div
     data-test-id="story-group"
-    class="poveste-story-group ptw-my-2 first:ptw-mt-0 last:ptw-mb-0 ptw-group"
+    class="poveste-story-group my-2 first:mt-0 last:mb-0 group"
   >
     <template v-if="group.title">
-      <div class="ptw-h-[1px] ptw-bg-gray-500/10 ptw-mx-6 ptw-mb-2 group-first:ptw-hidden" />
+      <div class="h-[1px] bg-gray-500/10 mx-6 mb-2 group-first:hidden" />
       <div
         role="button"
         tabindex="0"
-        class="ptw-px-0.5 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900 ptw-cursor-pointer ptw-select-none ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0 ptw-opacity-50 hover:ptw-opacity-100"
+        class="px-0.5 py-2 md:py-1.5 mx-1 rounded-sm hover:bg-primary-100 dark:hover:bg-primary-900 cursor-pointer select-none flex items-center gap-2 min-w-0 opacity-50 hover:opacity-100"
         @click="toggleOpen"
         @keyup.enter="toggleOpen"
         @keyup.space="toggleOpen"
       >
         <Icon
           :icon="isFolderOpen ? 'ri:subtract-line' : 'ri:add-line'"
-          class="ptw-w-4 ptw-h-4 ptw-ml-4 ptw-rounded-sm ptw-border ptw-border-gray-500/40"
+          class="w-4 h-4 ml-4 rounded-sm border border-gray-500/40"
         />
-        <span class="ptw-truncate">{{ group.title }}</span>
+        <span class="truncate">{{ group.title }}</span>
       </div>
     </template>
 

package/src/app/components/tree/StoryList.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="poveste-story-list ptw-overflow-y-auto">
+  <div class="poveste-story-list overflow-y-auto">
     <template
       v-for="element of tree"
       :key="element.title"

package/src/app/components/tree/StoryListFolder.vue

@@ -37,22 +37,22 @@ const folderPadding = computed(() => {
     <div
       role="button"
       tabindex="0"
-      class="poveste-story-list-folder-button ptw-px-0.5 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900 ptw-cursor-pointer ptw-select-none ptw-flex"
+      class="poveste-story-list-folder-button px-0.5 py-2 md:py-1.5 mx-1 rounded-sm hover:bg-primary-100 dark:hover:bg-primary-900 cursor-pointer select-none flex"
       @click="toggleOpen"
       @keyup.enter="toggleOpen"
       @keyup.space="toggleOpen"
     >
-      <span class="bind-tree-padding ptw-flex ptw-items-center ptw-gap-2 ptw-min-w-0">
-        <span class="ptw-flex ptw-flex-none ptw-items-center ptw-opacity-30 [.poveste-story-list-folder-button:hover_&]:ptw-opacity-100 ptw-ml-4 ptw-w-4 ptw-h-4 ptw-rounded-sm ptw-border ptw-border-gray-500/40">
+      <span class="bind-tree-padding flex items-center gap-2 min-w-0">
+        <span class="flex flex-none items-center opacity-30 [.poveste-story-list-folder-button:hover_&]:opacity-100 ml-4 w-4 h-4 rounded-sm border border-gray-500/40">
           <Icon
             icon="carbon:caret-right"
-            class="ptw-w-full ptw-h-full ptw-transition-transform ptw-duration-150"
+            class="w-full h-full transition-transform duration-150"
             :class="{
-              'ptw-rotate-90': isFolderOpen,
+              'rotate-90': isFolderOpen,
             }"
           />
         </span>
-        <span class="ptw-truncate">{{ folder.title }}</span>
+        <span class="truncate">{{ folder.title }}</span>
       </span>
     </div>
 

package/src/app/components/tree/StoryListItem.vue

@@ -37,23 +37,23 @@ useScrollOnActive(isActive, el)
           storyId: story.id,
         },
       }"
-      class="ptw-pl-0.5 ptw-pr-2 ptw-py-2 md:ptw-py-1.5 ptw-mx-1 ptw-rounded-sm"
+      class="pl-0.5 pr-2 py-2 md:py-1.5 mx-1 rounded-sm"
     >
-      <span class="bind-tree-margin ptw-flex ptw-items-center ptw-gap-2 ptw-pl-4 ptw-min-w-0">
+      <span class="bind-tree-margin flex items-center gap-2 pl-4 min-w-0">
         <Icon
           :icon="story.icon ?? 'carbon:cube'"
-          class="ptw-w-5 ptw-h-5 sm:ptw-w-4 sm:ptw-h-4 ptw-flex-none"
+          class="w-5 h-5 sm:w-4 sm:h-4 flex-none"
           :class="{
-            'ptw-text-primary-500': !active && !story.iconColor,
+            'text-primary-500': !active && !story.iconColor,
             'bind-icon-color': !active && story.iconColor,
           }"
         />
-        <span class="ptw-truncate">{{ story.title }}</span>
+        <span class="truncate">{{ story.title }}</span>
       </span>
 
       <span
         v-if="!story.docsOnly"
-        class="ptw-opacity-40 ptw-text-sm"
+        class="opacity-40 text-sm"
       >
         {{ story.variants.length }}
       </span>

package/src/app/sandbox.ts

@@ -33,14 +33,36 @@ if (storedSettings) {
 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).
+ *
+ * User CSS is wrapped in `@scope (.__poveste-render-story)`, and `<html>` sits
+ * above that root, so `@scope` cannot match it. A rule shaped like
+ * `.dark .foo { … }` — which is what Tailwind's `darkMode: 'class'` and most
+ * hand-written dark styling produce — is therefore inert, with no error and no
+ * warning to say so.
+ *
+ * Putting it on the scope root itself is *not* enough: a descendant combinator
+ * needs the ancestor to be matchable in scope too, and the root does not
+ * qualify. `#app` is strictly inside the root, which does.
+ *
+ * It stays on `<html>` as well, for user CSS that is not scope-wrapped and for
+ * anyone keying off `html.dark`.
+ */
+const darkClassTargets = [document.documentElement, document.querySelector('#app')]
+
 watch(previewDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add(povesteConfig.sandboxDarkClass) // @TODO remove
-    document.documentElement.classList.add(povesteConfig.theme.darkClass)
-  }
-  else {
-    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass) // @TODO remove
-    document.documentElement.classList.remove(povesteConfig.theme.darkClass)
+  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)
   }
 }, {
   immediate: true,
@@ -53,6 +75,11 @@ const app = createApp({
     const story = computed(() => file.value.story)
     const variant = computed(() => story.value?.variants.find(v => v.id === query.variantId))
 
+    // `synced` is the sandbox end of the same flag the host holds, with the same
+    // #95 caveat: only set it when the apply will actually provoke the watcher
+    // below, which is what `applyState`'s return value reports. Set it
+    // unconditionally and an apply that changes nothing leaves it stuck, so the
+    // next edit the story makes never reaches the host.
     let synced = false
     let mounted = false
 
@@ -60,8 +87,7 @@ const app = createApp({
       // console.log('[sandbox] received message', event.data)
       if (event.data?.type === STATE_SYNC) {
         if (!mounted) return
-        synced = true
-        applyState(variant.value.state, event.data.state)
+        synced = applyState(variant.value.state, event.data.state)
       }
       else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
         applyPreviewSettings(event.data.settings)
@@ -93,7 +119,7 @@ const app = createApp({
 
   render() {
     return [
-      h('div', { class: 'ptw-sandbox-hidden' }, [
+      h('div', { class: '__poveste-sandbox-hidden' }, [
         h(GenericMountStory, {
           key: file.value.story.id,
           story: file.value.story,

package/src/app/stores/story.ts

@@ -36,6 +36,22 @@ export const useStoryStore = defineStore('story', () => {
     return maps.value.variants.get(idWithStoryId)
   }
 
+  /**
+   * Whether a variant's preview has finished mounting. The preview components
+   * report it and `StorySidePanel` waits on it, so it has to be reachable from
+   * both — and it stays a field on the variant rather than a map in here
+   * because it pairs with `configReady`, which the framework plugins write from
+   * inside the sandbox. The side panel reads the two together; splitting them
+   * across two owners would make that condition harder to follow, not easier.
+   *
+   * What does belong here is the write. This store owns the variant objects,
+   * so a component reaching into one of its own props to flip the flag was the
+   * part that needed to go.
+   */
+  function setPreviewReady(variant: Variant, value: boolean) {
+    variant.previewReady = value
+  }
+
   return {
     stories,
     setStories,
@@ -43,5 +59,6 @@ export const useStoryStore = defineStore('story', () => {
     currentVariant,
     getStoryById,
     getVariantById,
+    setPreviewReady,
   }
 })

package/src/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/src/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/src/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;
 }