@poveste/app 0.19.0 → 0.20.0

package/dist/bundled/app.css

@@ -1,4 +1,45 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.poveste-top-bar-chip-item {
+  display: flex;
+  align-items: center;
+  gap: .25rem;
+  padding: .375rem .625rem;
+  border: 0;
+  font: inherit;
+  color: var(--color-gray-900);
+  cursor: pointer;
+@media (prefers-reduced-motion: no-preference) {
+    transition: color .15s ease-out, background-color .15s ease-out;
+}
+&:hover {
+    background-color: rgb(255 255 255 / .5);
+    color: var(--color-primary-500);
+}
+&:active {
+    background-color: rgb(255 255 255 / .7);
+}
+
+  /* Inset: the chip clips its items to its rounded border. */
+&:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: -2px;
+}
+
+  /* Spelled out on the subject: `.ptw-dark` sits above the `@scope` root, so a
+     descendant rule keyed on it never matches from in here (#101). */
+&:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-gray-100);
+&:hover {
+      background-color: rgb(255 255 255 / .1);
+      color: var(--color-primary-400);
+}
+&:active {
+      background-color: rgb(255 255 255 / .15);
+}
+}
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .bind-tree-margin[data-v-83161585] {
   margin-left: var(--v0299061e);
 }
@@ -94,6 +135,46 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.poveste-layout-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem 1.5rem;
+  border: 0;
+  font: inherit;
+  text-align: start;
+  color: var(--color-gray-900);
+  cursor: pointer;
+&:hover {
+    background-color: var(--color-primary-100);
+}
+&:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: -2px;
+}
+&.active {
+    background-color: var(--color-primary-500);
+    color: var(--color-white);
+&:hover {
+      background-color: var(--color-primary-600);
+}
+}
+
+  /* Spelled out on the subject: `.ptw-dark` sits above the `@scope` root, so a
+     descendant rule keyed on it never matches from in here (#101). */
+&:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-gray-100);
+&:hover {
+      background-color: var(--color-primary-900);
+}
+&.active {
+      color: var(--color-black);
+}
+}
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 /* Outside the layer — registration is document-global, not cascaded. */
 @property --poveste-count {
   syntax: '<integer>';
@@ -133,6 +214,98 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.poveste-component-docs {
+&[data-v-aa8468d5] {
+  padding: 1rem;
+  font-size: .875rem;
+  color: var(--color-gray-800);
+
+  /* On the subject, not `.ptw-dark &`: `.ptw-dark` sits above the `@scope` root (#101). */
+}
+&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-gray-200);
+}
+}
+section + section[data-v-aa8468d5] {
+  margin-top: 1.5rem;
+}
+h3[data-v-aa8468d5] {
+  font-weight: 600;
+  font-size: 1rem;
+  margin-bottom: .5rem;
+}
+table[data-v-aa8468d5] {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+th[data-v-aa8468d5] {
+  text-align: start;
+  font-weight: 500;
+  color: var(--color-gray-500);
+}
+th,
+td {
+&[data-v-aa8468d5] {
+  padding: .375rem .5rem;
+  border-bottom: 1px solid var(--color-gray-200);
+  vertical-align: top;
+}
+&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+    border-color: var(--color-gray-750);
+}
+}
+code {
+&[data-v-aa8468d5] {
+  font-size: .8125rem;
+  background-color: var(--color-gray-100);
+  border-radius: .25rem;
+  padding: 0 .25rem;
+}
+&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+    background-color: var(--color-gray-750);
+}
+}
+pre code[data-v-aa8468d5] {
+  display: block;
+  padding: .5rem;
+  margin-top: .25rem;
+  white-space: pre-wrap;
+}
+.deprecated[data-v-aa8468d5] {
+  text-decoration: line-through;
+}
+[data-slot='required'][data-v-aa8468d5] {
+  color: var(--color-red-500);
+  margin-inline-start: .125rem;
+}
+[data-slot='deprecated'],
+[data-slot='default-conflict'] {
+&[data-v-aa8468d5] {
+  color: var(--color-amber-600);
+  font-weight: 500;
+}
+&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-amber-400);
+}
+}
+[data-slot='default-conflict'][data-v-aa8468d5] {
+  margin-inline-start: .25rem;
+  cursor: help;
+}
+[data-slot='see'][data-v-aa8468d5] {
+  display: block;
+  margin-top: .25rem;
+}
+a[data-slot='see'][data-v-aa8468d5] {
+  color: var(--color-primary-500);
+  text-decoration: underline;
+}
+[data-slot='error'][data-v-aa8468d5] {
+  color: var(--color-gray-500);
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .poveste-base-select-popper {
   /* The trigger's own width, which is what floating-vue's `auto-size` gave. */
   min-width: var(--reka-popper-anchor-width);
@@ -150,7 +323,7 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-ed711d57] {
+.__poveste-code-placeholder[data-v-4b28d655] {
   color: inherit;
   font-size: inherit;
 }

package/dist/bundled/components/HomeView.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { customLogos, povesteConfig } from "../util/config.js";
+import { customLogos } from "../util/config.js";
 import { useStoryStore } from "../stores/story.js";
-import poveste_default from "../assets/poveste.js";
+import "../assets/poveste.js";
 import HomeCounter_default from "./app/HomeCounter.js";
 import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock } from "@poveste/vendors/vue";
 //#region src/app/components/HomeView.vue?vue&type=script&setup=true&lang.ts
@@ -14,7 +14,7 @@ var _hoisted_3 = {
 var HomeView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "HomeView",
 	setup(__props) {
-		const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos?.square ?? "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width='512'%20height='512'%20fill='none'%3e%3cdefs%3e%3clinearGradient%20id='pv'%20x1='96'%20y1='416'%20x2='416'%20y2='96'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2324C56A'/%3e%3cstop%20offset='1'%20stop-color='%2317A6C6'/%3e%3c/linearGradient%3e%3c/defs%3e%3crect%20x='16'%20y='16'%20width='480'%20height='480'%20rx='112'%20fill='url(%23pv)'/%3e%3crect%20x='140'%20y='142'%20width='232'%20height='44'%20rx='16'%20fill='%23fff'/%3e%3crect%20x='151'%20y='217'%20width='88'%20height='146'%20rx='9'%20stroke='%23fff'%20stroke-width='22'/%3e%3crect%20x='172'%20y='244'%20width='30'%20height='92'%20rx='13'%20fill='%23fff'/%3e%3crect%20x='262'%20y='206'%20width='110'%20height='168'%20rx='20'%20fill='%23fff'/%3e%3crect%20x='284'%20y='226'%20width='66'%20height='58'%20rx='13'%20fill='url(%23pv)'/%3e%3c/svg%3e" : poveste_default);
+		const logoUrl = computed(() => customLogos?.square ?? "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width='512'%20height='512'%20fill='none'%3e%3cdefs%3e%3clinearGradient%20id='pv'%20x1='96'%20y1='416'%20x2='416'%20y2='96'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2324C56A'/%3e%3cstop%20offset='1'%20stop-color='%2317A6C6'/%3e%3c/linearGradient%3e%3c/defs%3e%3crect%20x='16'%20y='16'%20width='480'%20height='480'%20rx='112'%20fill='url(%23pv)'/%3e%3crect%20x='140'%20y='142'%20width='232'%20height='44'%20rx='16'%20fill='%23fff'/%3e%3crect%20x='151'%20y='217'%20width='88'%20height='146'%20rx='9'%20stroke='%23fff'%20stroke-width='22'/%3e%3crect%20x='172'%20y='244'%20width='30'%20height='92'%20rx='13'%20fill='%23fff'/%3e%3crect%20x='262'%20y='206'%20width='110'%20height='168'%20rx='20'%20fill='%23fff'/%3e%3crect%20x='284'%20y='226'%20width='66'%20height='58'%20rx='13'%20fill='url(%23pv)'/%3e%3c/svg%3e");
 		const storyStore = useStoryStore();
 		const stats = computed(() => {
 			let storyCount = 0;

package/dist/bundled/components/app/AppLogo.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { customLogos, povesteConfig } from "../../util/config.js";
 import { isDark } from "../../util/dark.js";
-import poveste_text_dark_default from "../../assets/poveste-text-dark.js";
-import poveste_text_default from "../../assets/poveste-text.js";
+import "../../assets/poveste-text-dark.js";
+import "../../assets/poveste-text.js";
 import { computed, createElementBlock, defineComponent, openBlock } from "@poveste/vendors/vue";
 //#region src/app/components/app/AppLogo.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src", "alt"];
@@ -9,8 +9,8 @@ var AppLogo_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	__name: "AppLogo",
 	setup(__props) {
 		const logoUrl = computed(() => {
-			if (isDark.value) return povesteConfig.theme.logo?.dark ? customLogos?.dark ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjZjhmYWZjIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K" : poveste_text_dark_default;
-			return povesteConfig.theme.logo?.light ? customLogos?.light ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjMWUyOTNiIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K" : poveste_text_default;
+			if (isDark.value) return customLogos?.dark ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjZjhmYWZjIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K";
+			return customLogos?.light ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjMWUyOTNiIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K";
 		});
 		const altText = computed(() => `${povesteConfig.theme.title} logo`);
 		return (_ctx, _cache) => {

package/dist/bundled/components/app/TopBarChipItem.js

@@ -1,13 +1,17 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import { createElementBlock, openBlock, renderSlot } from "@poveste/vendors/vue";
+/* empty css                                               */
+import { createBlock, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "@poveste/vendors/vue";
 //#region src/app/components/app/TopBarChipItem.vue
 var _sfc_main = {};
-var _hoisted_1 = ["role"];
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("a", {
-		role: _ctx.$attrs["href"] ? void 0 : "button",
-		class: "poveste-top-bar-chip-item flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 active:bg-white/70 dark:hover:bg-white/10 dark:active:bg-white/15 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors"
-	}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+	return openBlock(), createBlock(resolveDynamicComponent(_ctx.$attrs["href"] ? "a" : "button"), {
+		type: _ctx.$attrs["href"] ? void 0 : "button",
+		class: "poveste-top-bar-chip-item",
+		"data-slot": "top-bar-chip-item"
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["type"]);
 }
 var TopBarChipItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion

package/dist/bundled/components/layout/LayoutItem.js

@@ -1,4 +1,5 @@
 import LayoutItem_vue_vue_type_script_setup_true_lang_default from "./LayoutItem.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
 //#region src/app/components/layout/LayoutItem.vue
 var LayoutItem_default = LayoutItem_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/bundled/components/layout/LayoutItem.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,4 @@
-import BaseListItem_default from "../base/BaseListItem.js";
-import { createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/layout/LayoutItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex-1" };
@@ -14,27 +13,25 @@ var LayoutItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	emits: ["click"],
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(BaseListItem_default, {
-				"is-active": __props.isActive,
-				class: "px-6 py-4 gap-4",
-				onNavigate: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
-			}, {
-				default: withCtx(() => [
-					createVNode(unref(Icon), {
-						class: "w-4 h-4 flex-none",
-						icon: __props.icon,
-						"aria-hidden": "true"
-					}, null, 8, ["icon"]),
-					createElementVNode("span", _hoisted_1, toDisplayString(__props.title), 1),
-					__props.stateIcon ? (openBlock(), createBlock(unref(Icon), {
-						key: 0,
-						class: "w-4 h-4 flex-none opacity-70",
-						icon: __props.stateIcon,
-						"aria-hidden": "true"
-					}, null, 8, ["icon"])) : createCommentVNode("", true)
-				]),
-				_: 1
-			}, 8, ["is-active"]);
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				class: normalizeClass(["poveste-layout-item", { active: __props.isActive }]),
+				"data-slot": "layout-item",
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
+			}, [
+				createVNode(unref(Icon), {
+					class: "w-4 h-4 flex-none",
+					icon: __props.icon,
+					"aria-hidden": "true"
+				}, null, 8, ["icon"]),
+				createElementVNode("span", _hoisted_1, toDisplayString(__props.title), 1),
+				__props.stateIcon ? (openBlock(), createBlock(unref(Icon), {
+					key: 0,
+					class: "w-4 h-4 flex-none opacity-70",
+					icon: __props.stateIcon,
+					"aria-hidden": "true"
+				}, null, 8, ["icon"])) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });

package/dist/bundled/components/panel/ComponentDocs.js

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import ComponentDocs_vue_vue_type_script_setup_true_lang_default from "./ComponentDocs.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                              */
+//#region src/app/components/panel/ComponentDocs.vue
+var ComponentDocs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ComponentDocs_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-aa8468d5"]]);
+//#endregion
+export { ComponentDocs_default as default };

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

@@ -0,0 +1,132 @@
+import { tagHref, tagText } from "../../util/component-docs.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "@poveste/vendors/vue";
+//#region src/app/components/panel/ComponentDocs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "poveste-component-docs",
+	"data-testid": "component-docs"
+};
+var _hoisted_2 = ["data-component"];
+var _hoisted_3 = { "data-slot": "component-name" };
+var _hoisted_4 = {
+	key: 0,
+	"data-slot": "error"
+};
+var _hoisted_5 = {
+	key: 0,
+	"data-slot": "props"
+};
+var _hoisted_6 = ["data-prop"];
+var _hoisted_7 = {
+	key: 0,
+	title: "Required",
+	"data-slot": "required"
+};
+var _hoisted_8 = { key: 0 };
+var _hoisted_9 = ["title"];
+var _hoisted_10 = {
+	key: 0,
+	"data-slot": "deprecated"
+};
+var _hoisted_11 = ["href"];
+var _hoisted_12 = {
+	key: 1,
+	"data-slot": "see"
+};
+var _hoisted_13 = {
+	key: 1,
+	"data-slot": "example"
+};
+var _hoisted_14 = {
+	key: 1,
+	"data-slot": "slots"
+};
+var _hoisted_15 = ["data-slot-name"];
+var _hoisted_16 = { key: 0 };
+var _hoisted_17 = {
+	key: 2,
+	"data-slot": "events"
+};
+var _hoisted_18 = ["data-event"];
+var _hoisted_19 = { key: 0 };
+var ComponentDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ComponentDocs",
+	props: { components: {} },
+	setup(__props) {
+		function shownDefault(prop) {
+			return prop.default ?? prop.defaultTag;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.components, (component) => {
+				return openBlock(), createElementBlock("section", {
+					key: component.file,
+					"data-slot": "component",
+					"data-component": component.name
+				}, [createElementVNode("h3", _hoisted_3, toDisplayString(component.name), 1), component.error ? (openBlock(), createElementBlock("p", _hoisted_4, " Could not read this component's types: " + toDisplayString(component.error), 1)) : component.doc ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					component.doc.props.length ? (openBlock(), createElementBlock("table", _hoisted_5, [_cache[1] || (_cache[1] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+						createElementVNode("th", null, "Prop"),
+						createElementVNode("th", null, "Type"),
+						createElementVNode("th", null, "Default"),
+						createElementVNode("th", null, "Description")
+					])], -1)), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(component.doc.props, (prop) => {
+						return openBlock(), createElementBlock("tr", {
+							key: prop.name,
+							"data-prop": prop.name
+						}, [
+							createElementVNode("td", null, [createElementVNode("code", { class: normalizeClass({ deprecated: unref(tagText)(prop.tags, "deprecated") !== void 0 }) }, toDisplayString(prop.name), 3), prop.required ? (openBlock(), createElementBlock("span", _hoisted_7, "*")) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(prop.type), 1)]),
+							createElementVNode("td", null, [shownDefault(prop) !== void 0 ? (openBlock(), createElementBlock("code", _hoisted_8, toDisplayString(shownDefault(prop)), 1)) : createCommentVNode("", true), _ctx.__POVESTE_DEV__ && prop.defaultConflict ? (openBlock(), createElementBlock("span", {
+								key: 1,
+								title: `The code's default is shown; the @default tag says ${prop.defaultTag}`,
+								"data-slot": "default-conflict"
+							}, "≠", 8, _hoisted_9)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [
+								unref(tagText)(prop.tags, "deprecated") !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_10, [_cache[0] || (_cache[0] = createTextVNode("Deprecated", -1)), unref(tagText)(prop.tags, "deprecated") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(": " + toDisplayString(unref(tagText)(prop.tags, "deprecated")), 1)], 64)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+								createTextVNode(" " + toDisplayString(prop.description) + " ", 1),
+								(openBlock(true), createElementBlock(Fragment, null, renderList(prop.tags.filter((tag) => tag.name === "see" || tag.name === "link"), (tag) => {
+									return openBlock(), createElementBlock(Fragment, { key: tag.text }, [unref(tagHref)(tag.text ?? "") ? (openBlock(), createElementBlock("a", {
+										key: 0,
+										href: unref(tagHref)(tag.text ?? ""),
+										target: "_blank",
+										rel: "noopener",
+										"data-slot": "see"
+									}, toDisplayString(tag.text), 9, _hoisted_11)) : (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(tag.text), 1))], 64);
+								}), 128)),
+								unref(tagText)(prop.tags, "example") ? (openBlock(), createElementBlock("pre", _hoisted_13, [createElementVNode("code", null, toDisplayString(unref(tagText)(prop.tags, "example")), 1)])) : createCommentVNode("", true)
+							])
+						], 8, _hoisted_6);
+					}), 128))])])) : createCommentVNode("", true),
+					component.doc.slots.length ? (openBlock(), createElementBlock("table", _hoisted_14, [_cache[2] || (_cache[2] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+						createElementVNode("th", null, "Slot"),
+						createElementVNode("th", null, "Type"),
+						createElementVNode("th", null, "Description")
+					])], -1)), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(component.doc.slots, (slot) => {
+						return openBlock(), createElementBlock("tr", {
+							key: slot.name,
+							"data-slot-name": slot.name
+						}, [
+							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(slot.name), 1)]),
+							createElementVNode("td", null, [slot.type ? (openBlock(), createElementBlock("code", _hoisted_16, toDisplayString(slot.type), 1)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, toDisplayString(slot.description), 1)
+						], 8, _hoisted_15);
+					}), 128))])])) : createCommentVNode("", true),
+					component.doc.events.length ? (openBlock(), createElementBlock("table", _hoisted_17, [_cache[3] || (_cache[3] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+						createElementVNode("th", null, "Event"),
+						createElementVNode("th", null, "Payload"),
+						createElementVNode("th", null, "Description")
+					])], -1)), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(component.doc.events, (event) => {
+						return openBlock(), createElementBlock("tr", {
+							key: event.name,
+							"data-event": event.name
+						}, [
+							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(event.name), 1)]),
+							createElementVNode("td", null, [event.type ? (openBlock(), createElementBlock("code", _hoisted_19, toDisplayString(event.type), 1)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, toDisplayString(event.description), 1)
+						], 8, _hoisted_18);
+					}), 128))])])) : createCommentVNode("", true)
+				], 64)) : createCommentVNode("", true)], 8, _hoisted_2);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+export { ComponentDocs_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,6 +1,8 @@
 import { povesteConfig } from "../../util/config.js";
 import DevOnlyToolbarOpenInEditor_default from "../toolbar/DevOnlyToolbarOpenInEditor.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
+import { useComponentDocs } from "../../util/component-docs.js";
+import ComponentDocs_default from "./ComponentDocs.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, toRefs, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { useRoute, useRouter } from "@poveste/vendors/vue-router";
@@ -49,6 +51,7 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const emit = __emit;
 		const { story } = toRefs(props);
 		const { renderedDoc } = useStoryDoc(story);
+		const { components } = useComponentDocs(computed(() => story.value?.id));
 		const router = useRouter();
 		const fakeHost = `http://a.com`;
 		function onClick(e) {
@@ -104,27 +107,35 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return openBlock(), createElementBlock("div", {
 				class: "poveste-story-docs",
 				onClickCapture: onClick
-			}, [_ctx.__POVESTE_DEV__ && unref(renderedDoc) && filePath.value ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				class: normalizeClass(["flex items-center gap-2 p-2", { "pt-4": !__props.standalone }])
-			}, [filePath.value ? (openBlock(), createBlock(DevOnlyToolbarOpenInEditor_default, {
-				key: 0,
-				file: filePath.value,
-				tooltip: "Edit docs in editor"
-			}, null, 8, ["file"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), !unref(renderedDoc) ? (openBlock(), createBlock(BaseEmpty_default, { key: 1 }, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: "carbon:document-unknown",
-					class: "w-8 h-8 opacity-50 mb-6"
-				}), _cache[0] || (_cache[0] = createTextVNode(" No documentation available ", -1))]),
-				_: 1
-			})) : (openBlock(), createElementBlock("div", {
-				key: 2,
-				ref_key: "renderedEl",
-				ref: renderedEl,
-				class: "prose dark:prose-invert p-4 max-w-none",
-				"data-testid": "story-docs",
-				innerHTML: unref(renderedDoc)
-			}, null, 8, _hoisted_1))], 32);
+			}, [
+				_ctx.__POVESTE_DEV__ && unref(renderedDoc) && filePath.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["flex items-center gap-2 p-2", { "pt-4": !__props.standalone }])
+				}, [filePath.value ? (openBlock(), createBlock(DevOnlyToolbarOpenInEditor_default, {
+					key: 0,
+					file: filePath.value,
+					tooltip: "Edit docs in editor"
+				}, null, 8, ["file"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				!unref(renderedDoc) && !unref(components)?.length ? (openBlock(), createBlock(BaseEmpty_default, { key: 1 }, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:document-unknown",
+						class: "w-8 h-8 opacity-50 mb-6"
+					}), _cache[0] || (_cache[0] = createTextVNode(" No documentation available ", -1))]),
+					_: 1
+				})) : createCommentVNode("", true),
+				unref(renderedDoc) ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					ref_key: "renderedEl",
+					ref: renderedEl,
+					class: "prose dark:prose-invert p-4 max-w-none",
+					"data-testid": "story-docs",
+					innerHTML: unref(renderedDoc)
+				}, null, 8, _hoisted_1)) : createCommentVNode("", true),
+				unref(components)?.length ? (openBlock(), createBlock(ComponentDocs_default, {
+					key: 3,
+					components: unref(components)
+				}, null, 8, ["components"])) : createCommentVNode("", true)
+			], 32);
 		};
 	}
 });

package/dist/bundled/components/panel/StorySourceCode.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StorySourceCode_vue_vue_type_script_setup_true_lang_default from "./StorySourceCode.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 //#region src/app/components/panel/StorySourceCode.vue
-var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed711d57"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4b28d655"]]);
 //#endregion
 export { StorySourceCode_default as default };

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

@@ -27,8 +27,15 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const props = __props;
 		const generateSourceCodeFn = shallowRef(null);
+		const dynamicSettled = ref(false);
+		const staticSettled = ref(false);
 		watchEffect(async () => {
-			const generate = await loadGenerateSourceCode(props.story);
+			let generate;
+			try {
+				generate = await loadGenerateSourceCode(props.story);
+			} finally {
+				if (!generate) dynamicSettled.value = true;
+			}
 			if (generate) generateSourceCodeFn.value = markRaw(generate);
 		});
 		const highlighter = shallowRef();
@@ -39,12 +46,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			if (!generateSourceCodeFn.value) return;
 			error.value = null;
 			dynamicSourceCode.value = "";
+			dynamicSettled.value = false;
 			try {
 				dynamicSourceCode.value = await getDynamicSourceCode(props.variant, generateSourceCodeFn.value) ?? "";
 			} catch (e) {
 				console.error(e);
 				error.value = e instanceof Error ? e.message : String(e);
 			}
+			dynamicSettled.value = true;
 			if (!dynamicSourceCode.value) displayedSource.value = "static";
 		}, {
 			deep: true,
@@ -53,8 +62,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const staticSourceCode = ref("");
 		watch(() => [props.story, props.story?.file?.source], async () => {
 			staticSourceCode.value = "";
-			staticSourceCode.value = await getStaticSourceCode(props.story) ?? "";
+			staticSettled.value = false;
+			try {
+				staticSourceCode.value = await getStaticSourceCode(props.story) ?? "";
+			} finally {
+				staticSettled.value = true;
+			}
 		}, { immediate: true });
+		const loading = computed(() => displayedSource.value === "dynamic" ? !dynamicSettled.value : !staticSettled.value);
 		const displayedSourceCode = computed(() => {
 			if (displayedSource.value === "dynamic") return dynamicSourceCode.value;
 			return staticSourceCode.value;
@@ -107,13 +122,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				}, 8, ["content"])]),
 				createVNode(unref(HstCopyIcon), {
 					content: displayedSourceCode.value,
+					loading: loading.value,
 					class: "flex-none"
-				}, null, 8, ["content"])
+				}, null, 8, ["content", "loading"])
 			])) : createCommentVNode("", true), error.value ? (openBlock(), createElementBlock("div", _hoisted_4, " Error: " + toDisplayString(error.value), 1)) : !displayedSourceCode.value ? (openBlock(), createBlock(BaseEmpty_default, { key: 2 }, {
 				default: withCtx(() => [createVNode(unref(Icon), {
 					icon: "carbon:code-hide",
 					class: "w-8 h-8 opacity-50 mb-6"
-				}), _cache[4] || (_cache[4] = createElementVNode("span", null, "Not available", -1))]),
+				}), createElementVNode("span", null, toDisplayString(loading.value ? "Loading" : "Not available"), 1)]),
 				_: 1
 			})) : !sourceHtml.value ? (openBlock(), createElementBlock("textarea", {
 				key: 3,