@poveste/app 0.14.0 → 0.15.0

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

@@ -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/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);
@@ -89,7 +83,7 @@ function isMatchingCombination(combination) {
 	const splitted = combination.split("+").map((key) => key.trim());
 	const targetKey = splitted.pop();
 	if (!targetKey) return false;
-	for (const mod in modifiers) if (splitted.includes(mod) !== modifiers[mod].pressed) 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,7 +38,7 @@ 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({

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.14.0",
+  "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.14.0",
-    "@poveste/shared": "^0.14.0",
-    "@poveste/vendors": "^0.14.0",
+    "@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": "^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

@@ -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) => {

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/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 {

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { SetupContext, VNode } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useResizeObserver } from '@vueuse/core'
 import { computed, h, onBeforeUnmount, reactive, ref } from 'vue'
@@ -11,9 +12,9 @@ const el = ref<HTMLDivElement>()
 
 const availableWidth = ref(0)
 
-useResizeObserver(el, (entries) => {
-  const containerWidth = entries[0].contentRect.width
-  availableWidth.value = containerWidth - overflowButtonWidth
+useResizeObserver(el, ([entry]) => {
+  if (!entry) return
+  availableWidth.value = entry.contentRect.width - overflowButtonWidth
 })
 
 // Children
@@ -28,8 +29,8 @@ const children = ref(new Map<HTMLElement, ChildState>())
 const visibleChildrenCount = computed(() => {
   let width = 0
   const c = [...children.value.values()].sort((a, b) => a.index - b.index)
-  for (let i = 0; i < c.length; i++) {
-    width += c[i].width
+  for (const [i, child] of c.entries()) {
+    width += child.width
     if (width > availableWidth.value) {
       return i
     }
@@ -43,18 +44,18 @@ const visibleChildrenCount = computed(() => {
 const ChildWrapper = {
   name: 'ChildWrapper',
   props: ['index'],
-  setup(props, { slots }) {
+  setup(props: { index: number }, { slots }: SetupContext) {
     const el = ref<HTMLDivElement>()
 
     const state = reactive({ width: 0, index: props.index })
 
-    useResizeObserver(el, (entries) => {
+    useResizeObserver(el, ([entry]) => {
       // The observer only fires for an element it is observing, so this is
       // never null here — but `children` is keyed by the element, and an
       // undefined key would silently make a second entry for the same child.
       const element = el.value
-      if (!element) return
-      const width = entries[0].contentRect.width
+      if (!element || !entry) return
+      const width = entry.contentRect.width
       if (!children.value.has(element)) {
         children.value.set(element, state)
       }
@@ -68,24 +69,24 @@ const ChildWrapper = {
 
     const visible = computed(() => visibleChildrenCount.value > state.index)
 
-    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots.default())
+    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots['default']?.())
   },
 }
 
 /**
  * Wraps each child with a <ChildWrapper>
  */
-function ChildrenRender(props, { slots }) {
-  const [fragment] = slots.default()
-  return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode]))
+function ChildrenRender(_props: unknown, { slots }: SetupContext) {
+  const children = slots['default']?.()[0]?.children
+  return Array.isArray(children) ? children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode])) : []
 }
 
 /**
  * Only renders a part of a children list
  */
-function ChildrenSlice(props, { slots }) {
-  const [fragment] = slots.default()
-  return fragment.children.slice(props.start, props.end)
+function ChildrenSlice(props: { start?: number, end?: number }, { slots }: SetupContext) {
+  const children = slots['default']?.()[0]?.children
+  return Array.isArray(children) ? children.slice(props.start, props.end) as VNode[] : []
 }
 </script>
 

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

@@ -1,12 +1,22 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
 import { Icon } from '@iconify/vue'
+import { refAutoReset } from '@vueuse/core'
 import { Dropdown as VDropdown } from 'floating-vue'
-import { computed } from 'vue'
+import { computed, ref, useId } from 'vue'
+
+/*
+ * The WAI-ARIA select-only combobox: the trigger keeps focus and names the active
+ * option through `aria-activedescendant`, so the popup needs no focus of its own.
+ * It was a click-only `<div>` with `<div>` options, which a keyboard could not open
+ * and a screen reader did not list (#828).
+ */
 
 const props = defineProps<{
   modelValue: string
   options: Record<string, string> | Array<string>
+  /** The accessible name of the picker and its list. */
+  label: string
 }>()
 
 const emit = defineEmits<{
@@ -21,23 +31,159 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   return props.options
 })
 
+const entries = computed(() => Object.entries(formattedOptions.value))
+
 const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
 
-function selectValue(value: string, hide: () => void) {
-  emit('update:modelValue', value)
-  emit('select', value)
-  hide()
+const id = useId()
+const listboxId = `${id}-listbox`
+function optionId(index: number) {
+  return `${id}-option-${index}`
+}
+
+const combobox = ref<HTMLElement>()
+const open = ref(false)
+const activeIndex = ref(-1)
+
+function openList(index?: number) {
+  const selected = entries.value.findIndex(([value]) => value === props.modelValue)
+  activeIndex.value = index ?? Math.max(selected, 0)
+  open.value = true
+}
+
+/*
+ * Type-to-select, as the pattern recommends: typed characters within half a second
+ * form one search, and repeating a single character steps through the options
+ * that start with it.
+ */
+const typed = refAutoReset('', 500)
+
+function isTypeaheadKey(event: KeyboardEvent) {
+  if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) {
+    return false
+  }
+  // Space chooses, unless it continues a search already under way.
+  return event.key !== ' ' || typed.value !== ''
+}
+
+function typeahead(char: string) {
+  const previous = typed.value
+  typed.value = previous + char.toLowerCase()
+  const repeated = [...typed.value].every(c => c === typed.value[0])
+  const search = repeated ? typed.value.charAt(0) : typed.value
+  // A new or repeated character looks past the active option; a longer search may
+  // still match it.
+  const start = repeated ? activeIndex.value + 1 : Math.max(activeIndex.value, 0)
+  const count = entries.value.length
+  for (let offset = 0; offset < count; offset++) {
+    const index = (start + offset) % count
+    if (entries.value[index]?.[1].toLowerCase().startsWith(search)) {
+      activeIndex.value = index
+      return
+    }
+  }
+}
+
+function close() {
+  open.value = false
 }
+
+function choose(index: number) {
+  const entry = entries.value[index]
+  if (entry) {
+    emit('update:modelValue', entry[0])
+    emit('select', entry[0])
+  }
+  close()
+  combobox.value?.focus()
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const last = entries.value.length - 1
+
+  if (isTypeaheadKey(event)) {
+    event.preventDefault()
+    if (!open.value) {
+      openList()
+    }
+    typeahead(event.key)
+    return
+  }
+
+  if (!open.value) {
+    if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault()
+      openList(event.key === 'Home' ? 0 : event.key === 'End' ? last : undefined)
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, last)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      if (event.altKey) {
+        choose(activeIndex.value)
+      }
+      else {
+        activeIndex.value = Math.max(activeIndex.value - 1, 0)
+      }
+      break
+    case 'Home':
+      event.preventDefault()
+      activeIndex.value = 0
+      break
+    case 'End':
+      event.preventDefault()
+      activeIndex.value = last
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      choose(activeIndex.value)
+      break
+    case 'Escape':
+      event.preventDefault()
+      close()
+      break
+    case 'Tab':
+      // Keeps the default: focus moves on, with the active option chosen.
+      choose(activeIndex.value)
+      break
+  }
+}
+
+defineExpose({
+  focus: () => combobox.value?.focus(),
+})
 </script>
 
 <template>
+  <!-- `no-auto-focus`: floating-vue otherwise moves focus into the popup once it
+       shows, and the combobox pattern keeps it on the trigger, which owns the keys. -->
   <VDropdown
+    v-model:shown="open"
     class="poveste-base-select"
+    :triggers="[]"
+    no-auto-focus
     auto-size
     auto-boundary-max-size
   >
     <div
-      class="cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
+      ref="combobox"
+      role="combobox"
+      tabindex="0"
+      :aria-label="label"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      :aria-controls="open ? listboxId : undefined"
+      :aria-activedescendant="open && activeIndex >= 0 ? optionId(activeIndex) : undefined"
+      class="cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
+      @click="open ? close() : openList()"
+      @keydown="onKeydown"
     >
       <div class="flex-1 truncate">
         <slot :label="selectedLabel">
@@ -49,24 +195,34 @@ function selectValue(value: string, hide: () => void) {
         class="w-4 h-4 flex-none ml-auto"
       />
     </div>
-    <template #popper="{ hide }">
-      <div class="flex flex-col bg-gray-50 dark:bg-gray-700">
+    <template #popper>
+      <div
+        :id="listboxId"
+        role="listbox"
+        :aria-label="label"
+        class="flex flex-col bg-gray-50 dark:bg-gray-700"
+      >
         <div
-          v-for="(label, value) in formattedOptions"
-          v-bind="{ ...$attrs, class: null, style: null }"
-          :key="label"
+          v-for="([value, optionLabel], index) of entries"
+          :id="optionId(index)"
+          :key="value"
+          role="option"
+          :aria-selected="value === modelValue"
           class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
           :class="{
-            'bg-primary-200 dark:bg-primary-800': props.modelValue === value,
+            'bg-primary-200 dark:bg-primary-800': value === modelValue,
+            'outline outline-2 -outline-offset-2 outline-primary-500': index === activeIndex,
           }"
-          @click="selectValue(value, hide)"
+          @mousedown.prevent
+          @mousemove="activeIndex = index"
+          @click="choose(index)"
         >
           <slot
             name="option"
-            :label="label"
+            :label="optionLabel"
             :value="value"
           >
-            {{ label }}
+            {{ optionLabel }}
           </slot>
         </div>
       </div>