@poveste/app 0.13.1 → 0.15.0

package/dist/bundled/util/commands.js

@@ -2,27 +2,38 @@ import { router } from "../router.js";
 import { useStoryStore } from "../stores/story.js";
 import { openInEditor } from "./open-in-editor.js";
 //#region src/app/util/commands.ts
+/**
+* The path "Open file in editor" should open, or undefined when there is none.
+*
+* `Story.file` is optional, and `let file: string` used to be assigned
+* `story.file?.filePath` in both branches — so a story without a file produced
+* `file: undefined`, and `openInEditor` sent
+* `__open-in-editor?file=undefined` to the dev server: a request to open a file
+* literally named "undefined", with nothing said in the UI (#667).
+*
+* A docs-only story prefers its markdown, falling back to the component file
+* when the story has both.
+*/
+function editableFilePath(story) {
+	const file = story?.file;
+	if (!file) return void 0;
+	return story?.docsOnly ? file.docsFilePath ?? file.filePath : file.filePath;
+}
 var builtinCommands = [{
 	id: "builtin:open-in-editor",
 	label: "Open file in editor",
 	icon: "carbon:script-reference",
-	showIf: ({ route }) => route.name === "story" && !!useStoryStore().currentStory,
-	getParams: () => {
-		const story = useStoryStore().currentStory;
-		let file;
-		if (story.docsOnly) file = story.file?.docsFilePath ?? story.file?.filePath;
-		else file = story.file?.filePath;
-		return { file };
-	},
+	showIf: ({ route }) => route.name === "story" && !!editableFilePath(useStoryStore().currentStory),
+	getParams: () => ({ file: editableFilePath(useStoryStore().currentStory) }),
 	clientAction: ({ file }) => {
-		openInEditor(file);
+		if (file) openInEditor(file);
 	}
 }, {
 	id: "builtin:poveste-docs",
 	label: "Open Poveste Documentation",
 	icon: "carbon:help",
 	clientAction: () => {
-		window.open("https://poveste.dev/guide/getting-started.html", "_blank");
+		window.open("https://poveste.dev/guide/getting-started", "_blank");
 	}
 }];
 function executeCommand(command, params) {

package/dist/bundled/util/dark.js

@@ -4,7 +4,7 @@ import { watch } from "@poveste/vendors/vue";
 //#region src/app/util/dark.ts
 var isDark = useDark({
 	valueDark: "ptw-dark",
-	initialValue: povesteConfig.theme.defaultColorScheme,
+	...povesteConfig.theme.defaultColorScheme ? { initialValue: povesteConfig.theme.defaultColorScheme } : {},
 	storageKey: "poveste-color-scheme",
 	storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage
 });

package/dist/bundled/util/docs.js

@@ -7,7 +7,8 @@ async function getSourceCode(story, variant) {
 		const source = variant.slots?.().source()[0].children;
 		if (source) return unindent(source);
 	} else {
-		const clientPlugin = clientSupportPlugins[story.file?.supportPluginId];
+		const supportPluginId = story.file?.supportPluginId;
+		const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
 		if (clientPlugin) return (await clientPlugin()).generateSourceCode(variant);
 	}
 	const sourceLoader = story.file?.source;

package/dist/bundled/util/events.js

@@ -19,7 +19,7 @@ async function logEvent(name, argument) {
 }
 function stringifyEvent(e) {
 	const obj = {};
-	for (const k in e) obj[k] = e[k];
+	for (const k in e) obj[k] = Reflect.get(e, k);
 	return JSON.stringify(obj, (k, v) => {
 		if (v instanceof Node) return "Node";
 		if (v instanceof Window) return "Window";

package/dist/bundled/util/grid-slots.js

@@ -11,7 +11,7 @@ function assignSlots(slots, storyId, visible) {
 	const next = slots.map((slot) => slot.storyId === storyId && position.has(slot.variant.id) ? {
 		...slot,
 		visible: true,
-		order: position.get(slot.variant.id)
+		order: position.get(slot.variant.id) ?? 0
 	} : {
 		...slot,
 		visible: false,
@@ -57,7 +57,7 @@ function trimSlots(slots) {
 		next = kept;
 	}
 	let end = next.length;
-	while (end > 0 && !next[end - 1].visible) end--;
+	while (end > 0 && !next[end - 1]?.visible) end--;
 	return end === next.length ? next : next.slice(0, end);
 }
 //#endregion

package/dist/bundled/util/icons.generated.js

@@ -6,7 +6,6 @@ var iconCollections = [
 			"add-alt": { "body": "<path fill=\"currentColor\" d=\"M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16S9.4 4 16 4m0-2C8.3 2 2 8.3 2 16s6.3 14 14 14s14-6.3 14-14S23.7 2 16 2\"/><path fill=\"currentColor\" d=\"M24 15h-7V8h-2v7H8v2h7v7h2v-7h7z\"/>" },
 			"area": { "body": "<path fill=\"currentColor\" d=\"M27 22.142V9.858A3.992 3.992 0 1 0 22.142 5H9.858A3.992 3.992 0 1 0 5 9.858v12.284A3.992 3.992 0 1 0 9.858 27h12.284A3.992 3.992 0 1 0 27 22.142M26 4a2 2 0 1 1-2 2a2 2 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m16.142-3H9.858A4 4 0 0 0 7 22.142V9.858A4 4 0 0 0 9.858 7h12.284A4 4 0 0 0 25 9.858v12.284A3.99 3.99 0 0 0 22.142 25M26 28a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>" },
 			"audio-console": { "body": "<path fill=\"currentColor\" d=\"M28 14.005h-1v-12h-2v12h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v10h2v-10h1a2.003 2.003 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10-12h-1v-4h-2v4h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v18h2v-18h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10 10H7v-18H5v18H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v4h2v-4h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4H4v-2h4Z\"/>" },
-			"bring-forward": { "body": "<path fill=\"currentColor\" d=\"M12 15h-2v-3a2 2 0 0 1 2-2h3v2h-3Zm3 15h-3a2 2 0 0 1-2-2v-3h2v3h3Zm3-2h4v2h-4zm10 2h-3v-2h3v-3h2v3a2 2 0 0 1-2 2M10 18h2v4h-2zm18 0h2v4h-2zm2-3h-2v-3h-3v-2h3a2 2 0 0 1 2 2Zm-12-5h4v2h-4z\"/><path fill=\"currentColor\" d=\"M8 22H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4h-2V4H4v16h4Z\"/>" },
 			"caret-down": { "body": "<path fill=\"currentColor\" d=\"m24 12l-8 10l-8-10z\"/>" },
 			"caret-right": { "body": "<path fill=\"currentColor\" d=\"m12 8l10 8l-10 8z\"/>" },
 			"checkbox": { "body": "<path fill=\"currentColor\" d=\"M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M6 26V6h20v20Z\"/>" },

package/dist/bundled/util/keyboard.js

@@ -24,30 +24,24 @@ var pressedKeys = /* @__PURE__ */ new Set();
 var trackedWindows = shallowRef([]);
 function bindTracking(target) {
 	const onKeydown = (event) => {
-		for (const i in modifiers) {
-			const mod = modifiers[i];
-			if (mod.key === event.key) {
-				mod.pressed = true;
-				return;
-			}
+		for (const mod of Object.values(modifiers)) if (mod.key === event.key) {
+			mod.pressed = true;
+			return;
 		}
 		pressedKeys.add(event.key.toLocaleLowerCase());
 	};
 	const onKeyup = (event) => {
 		requestAnimationFrame(() => {
 			pressedKeys.clear();
-			for (const i in modifiers) {
-				const mod = modifiers[i];
-				if (mod.key === event.key) {
-					mod.pressed = false;
-					break;
-				}
+			for (const mod of Object.values(modifiers)) if (mod.key === event.key) {
+				mod.pressed = false;
+				break;
 			}
 		});
 	};
 	const onBlur = () => {
 		pressedKeys.clear();
-		for (const i in modifiers) modifiers[i].pressed = false;
+		for (const mod of Object.values(modifiers)) mod.pressed = false;
 	};
 	target.addEventListener("keydown", onKeydown);
 	target.addEventListener("keyup", onKeyup);
@@ -88,7 +82,8 @@ function isMatchingShortcut(shortcut) {
 function isMatchingCombination(combination) {
 	const splitted = combination.split("+").map((key) => key.trim());
 	const targetKey = splitted.pop();
-	for (const mod in modifiers) if (splitted.includes(mod) !== modifiers[mod].pressed) return false;
+	if (!targetKey) return false;
+	for (const [name, mod] of Object.entries(modifiers)) if (splitted.includes(name) !== mod.pressed) return false;
 	return pressedKeys.has(targetKey);
 }
 function formatKey(key) {

package/dist/bundled/util/mapping.js

@@ -20,7 +20,7 @@ function mapFile(file, existingFile) {
 			file: markRaw(result),
 			variants: file.story.variants.map((v) => mapVariant(v, existingFile.story.variants.find((item) => item.id === v.id)))
 		};
-		else if (key !== "component") result[key] = file[key];
+		else if (key !== "component") Reflect.set(result, key, Reflect.get(file, key));
 	} else result = {
 		...file,
 		component: markRaw(file.component),
@@ -38,14 +38,14 @@ function mapVariant(variant, existingVariant) {
 	let result;
 	if (existingVariant) {
 		result = existingVariant;
-		for (const key in variant) if (!copiedFromExistingVariant.includes(key)) result[key] = variant[key];
+		for (const key in variant) if (!copiedFromExistingVariant.includes(key)) Reflect.set(result, key, Reflect.get(variant, key));
 	} else result = {
 		...variant,
 		state: reactive({
 			_hPropState: {},
 			_hPropDefs: {}
 		}),
-		setupApp: null,
+		setupApp: void 0,
 		slots: () => ({
 			default: void 0,
 			controls: void 0,

package/dist/bundled/util/preview-settings.js

@@ -24,7 +24,7 @@ function applyPreviewSettings(settings) {
 	if (povesteConfig.autoApplyContrastColor) document.documentElement.style.color = contrastColor;
 }
 function getContrastColor(setting) {
-	return povesteConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
+	return povesteConfig.backgroundPresets?.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
 }
 //#endregion
 export { PREVIEW_SETTINGS_STORAGE_KEY, applyPreviewSettings, getContrastColor, loadStoredPreviewSettings, receivedSettings };

package/dist/bundled/util/render-tracker.js

@@ -0,0 +1,33 @@
+//#region src/app/util/render-tracker.ts
+/**
+* Whether the render now under way inside a realm reported a throw.
+*
+* The host cannot see inside the realm, so "did this render succeed" has to be
+* read off the two named messages it does see. A throw reaches
+* `app.config.errorHandler` during mount and `SANDBOX_READY` is emitted after
+* `await host.mount()` returns, so the order is always error-then-ready — which
+* makes a ready with nothing recorded since the render began a clean render.
+*
+* Clearing on the story and variant ids changing instead cleared the pair being
+* navigated *to*, so arriving at a broken story wiped its marker, and the fixed
+* story the comment was about was never reached at all: a file edited in place
+* keeps its ids, so that watcher did not fire on the one path it named (#597).
+*/
+function createRenderTracker() {
+	let threw = false;
+	return {
+		/** A new render is starting: what the previous one reported no longer holds. */
+		begin() {
+			threw = false;
+		},
+		threw() {
+			threw = true;
+		},
+		/** True when the render that has just reported ready said nothing before it. */
+		wasClean() {
+			return !threw;
+		}
+	};
+}
+//#endregion
+export { createRenderTracker };

package/dist/bundled/util/variant.js

@@ -8,14 +8,24 @@ import { useRoute } from "@poveste/vendors/vue-router";
 * has to tell "a variant is on its way" from "this story is waiting for the
 * reader to pick one" needs the same answer it will give — hence one predicate
 * rather than two copies of the condition (#328).
+*
+* Any story with variants, deliberately. It used to require a remembered choice
+* or exactly one variant, which made `StoryView`'s `variants[0]` fallback
+* unreachable: a story with several variants and no history satisfied neither
+* clause, so the first visit of a session showed an empty panel and every visit
+* after it worked, because the first one recorded the history (#724).
+*
+* No layout clause. Grid stories already auto-selected on revisit through the
+* remembered choice, so excluding them here would auto-open them on the second
+* visit and never the first — this defect, made permanent for one layout.
 */
 function autoSelectsVariant(story) {
-	return !!story && (!!story.lastSelectedVariant || story.variants.length === 1);
+	return !!story && story.variants.length > 0;
 }
 function useCurrentVariantRoute(variant) {
 	const route = useRoute();
 	return {
-		isActive: computed(() => route.query.variantId === variant.value.id),
+		isActive: computed(() => route.query["variantId"] === variant.value.id),
 		targetRoute: computed(() => ({
 			...route,
 			query: {

package/dist/style.css

@@ -274,7 +274,7 @@
     inherits: false;
     initial-value: solid;
   }
-  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
+  .__poveste-json-code[data-v-68225145] .cm-editor {
     min-width: 280px;
     height: 100%;
   }
@@ -1012,6 +1012,9 @@
     .mb-8 {
       margin-bottom: calc(var(--spacing) * 8);
     }
+    .mb-\[10px\] {
+      margin-bottom: 10px;
+    }
     .ml-4 {
       margin-left: calc(var(--spacing) * 4);
     }
@@ -1670,6 +1673,9 @@
     .stroke-2 {
       stroke-width: 2;
     }
+    .p-0 {
+      padding: 0px;
+    }
     .p-1 {
       padding: var(--spacing);
     }
@@ -1927,6 +1933,16 @@
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
     }
+    .outline-2 {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    .-outline-offset-2 {
+      outline-offset: calc(2px * -1);
+    }
+    .outline-primary-500 {
+      outline-color: var(--color-primary-500);
+    }
     .blur {
       --tw-blur: blur(8px);
       filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2022,6 +2038,9 @@
     .group-focus-within\:visible:is(:where(.group):focus-within *) {
       visibility: visible;
     }
+    .group-focus-within\:flex:is(:where(.group):focus-within *) {
+      display: flex;
+    }
     @media (hover: hover) {
       .group-hover\:flex:is(:where(.group):hover *) {
         display: flex;
@@ -2166,6 +2185,9 @@
     .focus-visible\:border-primary-500:focus-visible {
       border-color: var(--color-primary-500);
     }
+    .focus-visible\:opacity-100:focus-visible {
+      opacity: 100%;
+    }
     .active\:bg-gray-600\/50:active {
       background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-600)) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan",
@@ -23,13 +23,9 @@
     "access": "public"
   },
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/bundle-index.js"
-    },
+    ".": "./dist/bundle-index.js",
     "./*": "./*"
   },
-  "types": "./src/index.ts",
   "files": [
     "dist",
     "src"
@@ -38,11 +34,11 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "dependencies": {
-    "@poveste/controls": "^0.13.1",
-    "@poveste/shared": "^0.13.1",
-    "@poveste/vendors": "^0.13.1",
+    "@poveste/controls": "^0.15.0",
+    "@poveste/shared": "^0.15.0",
+    "@poveste/vendors": "^0.15.0",
     "fuse.js": "^7.0.0",
-    "shiki": "^3.0.0"
+    "shiki": "^4.4.3"
   },
   "devDependencies": {
     "@fontsource/noto-sans-display": "^5.3.0",
@@ -56,19 +52,19 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
     "@vitejs/plugin-vue": "^6.0.0",
-    "chokidar": "^4.0.1",
-    "concurrently": "^9.1.0",
+    "chokidar": "^5.0.0",
+    "concurrently": "^10.0.5",
     "fs-extra": "^11.2.0",
-    "globby": "^14.0.2",
-    "pathe": "^1.1.2",
+    "globby": "^16.2.4",
+    "pathe": "^2.0.3",
     "postcss": "^8.5.23",
-    "postcss-cli": "^11.0.1",
+    "postcss-cli": "^12.0.0",
     "tailwindcss": "^4.3.3",
-    "typescript": "5.6.3",
+    "typescript": "6.0.3",
     "vite": "^8.2.0",
-    "vitest": "^4.1.10",
+    "vitest": "^5.0.0",
     "vue": "^3.5.26",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^3.3.11"
   },
   "scripts": {
     "build": "pnpm run icons && rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",

package/src/__tests__/render-tracker.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { createRenderTracker } from '../app/util/render-tracker.js'
+
+describe('createRenderTracker', () => {
+  it('calls a render clean when nothing was reported during it', () => {
+    const render = createRenderTracker()
+
+    render.begin()
+
+    expect(render.wasClean()).toBe(true)
+  })
+
+  it('does not call a render clean when a throw was reported during it', () => {
+    const render = createRenderTracker()
+    render.begin()
+
+    render.threw()
+
+    expect(render.wasClean()).toBe(false)
+  })
+
+  // The half #597 is about. Without it a story that threw once stays marked for
+  // the life of the tab: every later render inherits the first one's verdict,
+  // so the marker the old comment promised to lift on a fix never lifts.
+  it('forgets the previous render when a new one begins', () => {
+    const render = createRenderTracker()
+    render.begin()
+    render.threw()
+
+    render.begin()
+
+    expect(render.wasClean()).toBe(true)
+  })
+
+  it('treats a render that has reported nothing yet as clean', () => {
+    expect(createRenderTracker().wasClean()).toBe(true)
+  })
+})

package/src/app/App.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { StoryFile, Tree } from './types'
+import type { Story, StoryFile, Tree } from './types'
 import { useTitle } from '@vueuse/core'
 import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$poveste-stories'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -29,7 +29,7 @@ import { onKeyboardShortcut } from './util/keyboard'
 import { mapFile } from './util/mapping'
 import { isMobile } from './util/responsive'
 
-const files = ref<StoryFile[]>(rawFiles.map(file => mapFile(file)))
+const files = ref<StoryFile[]>(rawFiles.map((file: StoryFile) => mapFile(file)))
 const tree = ref<Tree>(rawTree)
 
 onUpdate((newFiles: StoryFile[], newTree: Tree) => {
@@ -41,8 +41,11 @@ onUpdate((newFiles: StoryFile[], newTree: Tree) => {
   tree.value = newTree
 })
 
-const stories = computed(() => files.value.reduce((acc, file) => {
-  acc.push(file.story)
+// The accumulator needs a type: `[]` alone infers `never[]`, so the push was an
+// error about the seed rather than about the story. A file whose story has not
+// been collected yet contributes nothing.
+const stories = computed(() => files.value.reduce<Story[]>((acc, file) => {
+  if (file.story) acc.push(file.story)
   return acc
 }, []))
 

package/src/app/components/HomeView.vue

@@ -5,7 +5,7 @@ import { useStoryStore } from '../stores/story'
 import { customLogos, povesteConfig } from '../util/config'
 import HomeCounter from './app/HomeCounter.vue'
 
-const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos.square : PovesteLogo)
+const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos?.square ?? PovesteLogo : PovesteLogo)
 const storyStore = useStoryStore()
 
 const stats = computed(() => {

package/src/app/components/app/AppLogo.vue

@@ -6,11 +6,15 @@ import PovesteLogoLight from '../../assets/poveste-text.svg'
 import { customLogos, povesteConfig } from '../../util/config'
 import { isDark } from '../../util/dark'
 
+// `theme.logo` is what the config asked for; `customLogos` is the resolved URL
+// map from the virtual module. Two objects, so a check on one narrows nothing
+// about the other — and falling back to the bundled logo beats rendering an
+// `<img>` with no `src` if they ever disagree.
 const logoUrl = computed(() => {
   if (isDark.value) {
-    return povesteConfig.theme.logo?.dark ? customLogos.dark : PovesteLogoDark
+    return povesteConfig.theme.logo?.dark ? customLogos?.dark ?? PovesteLogoDark : PovesteLogoDark
   }
-  return povesteConfig.theme.logo?.light ? customLogos.light : PovesteLogoLight
+  return povesteConfig.theme.logo?.light ? customLogos?.light ?? PovesteLogoLight : PovesteLogoLight
 })
 
 const altText = computed(() => `${povesteConfig.theme.title} logo`)

package/src/app/components/app/Breadcrumb.vue

@@ -16,7 +16,8 @@ const storyStore = useStoryStore()
 const story = computed(() => storyStore.currentStory)
 
 const folders = computed(() => {
-  return story.value.file.path.slice(0, -1)
+  // No story, or a story with no file behind it, means no trail to draw.
+  return story.value?.file?.path.slice(0, -1) ?? []
 })
 
 const isMenuOpened = ref(false)

package/src/app/components/app/TopBar.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useStoryStore } from '../../stores/story'
 import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
 import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
@@ -15,6 +16,10 @@ defineEmits({
 })
 
 const storyStore = useStoryStore()
+
+// Named once so the `v-if` and the binding below read the same value; a story
+// without a file has nothing to open.
+const editableFile = computed(() => storyStore.currentStory?.file?.filePath)
 </script>
 
 <template>
@@ -51,8 +56,8 @@ const storyStore = useStoryStore()
         :story="storyStore.currentStory"
       />
       <DevOnlyToolbarOpenInEditor
-        v-if="__POVESTE_DEV__"
-        :file="storyStore.currentStory.file?.filePath"
+        v-if="__POVESTE_DEV__ && editableFile"
+        :file="editableFile"
         tooltip="Edit story in editor"
       />
     </TopBarChip>

package/src/app/components/app/TopBarChipItem.vue

@@ -2,7 +2,7 @@
   <!-- Without an href this is not a link, so `aria-label` on it is prohibited and
        it has no accessible role. Chip items are used both ways (#310). -->
   <a
-    :role="$attrs.href ? undefined : 'button'"
+    :role="$attrs['href'] ? undefined : '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"
   >
     <slot />

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

@@ -28,7 +28,7 @@ const progress = computed(() => props.modelValue ? 1 : 0)
 const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
 
 watch(path, () => {
-  dasharray.value = path.value.getTotalLength?.() ?? 21.21
+  dasharray.value = path.value?.getTotalLength?.() ?? 21.21
 })
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="poveste-base-empty base-empty flex flex-col items-center justify-center space-y-4 py-12 h-full text-center text-gray-400  text-lg">
+  <div class="poveste-base-empty base-empty flex flex-col items-center justify-center space-y-4 py-12 h-full text-center text-gray-500 dark:text-gray-400 text-lg">
     <slot />
   </div>
 </template>

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

@@ -26,9 +26,11 @@ export default defineComponent({
   },
 
   setup(props, { emit }) {
-    function handleNavigate(event, navigate: (event) => unknown) {
+    function handleNavigate(event: MouseEvent | KeyboardEvent, navigate: (event?: MouseEvent) => unknown) {
       emit('navigate')
-      navigate(event)
+      // vue-router types this as a click, but its guard reads only the modifier
+      // keys and `defaultPrevented`, which a key press carries too.
+      navigate(event as MouseEvent)
     }
 
     return {