@poveste/app 0.5.3 → 0.6.1

package/src/__tests__/grid-slots.spec.ts

@@ -0,0 +1,84 @@
+import type { Variant } from '../app/types'
+import type { Slot } from '../app/util/grid-slots.js'
+import { describe, expect, it } from 'vitest'
+import { assignSlots, trimSlots } from '../app/util/grid-slots.js'
+
+function variants(ids: string[]): Variant[] {
+  return ids.map(id => ({ id }) as Variant)
+}
+
+function shown(slots: Slot[]) {
+  return slots.map(s => (s.visible ? `${s.storyId}:${s.variant.id}@${s.order}` : `(${s.storyId}:${s.variant.id})`))
+}
+
+describe('assignSlots', () => {
+  it('opens a slot per visible variant in screen order', () => {
+    const slots = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
+
+    expect(shown(slots)).toEqual(['a:v1@0', 'a:v2@1', 'a:v3@2'])
+  })
+
+  it('keeps a still-visible variant in its slot when the window moves', () => {
+    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
+
+    const next = assignSlots(first, 'a', variants(['v2', 'v3', 'v4']))
+
+    expect(shown(next)).toEqual(['a:v4@2', 'a:v2@0', 'a:v3@1'])
+  })
+
+  it('hides a slot whose variant left rather than dropping it', () => {
+    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
+
+    const next = assignSlots(first, 'a', variants(['v2', 'v3']))
+
+    expect(shown(next)).toEqual(['(a:v1)', 'a:v2@0', 'a:v3@1'])
+  })
+
+  it('hands a hidden slot to a variant coming in before opening a new one', () => {
+    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3']))
+    const hidden = assignSlots(first, 'a', variants(['v2', 'v3']))
+
+    const next = assignSlots(hidden, 'a', variants(['v2', 'v3', 'v4']))
+
+    expect(shown(next)).toEqual(['a:v4@2', 'a:v2@0', 'a:v3@1'])
+  })
+
+  it('does not match a variant of another story by id', () => {
+    const first = assignSlots([], 'a', variants(['v1', 'v2']))
+
+    const next = assignSlots(first, 'b', variants(['v1', 'v2']))
+
+    expect(next.map(s => s.storyId)).toEqual(['b', 'b'])
+    expect(next.every(s => s.visible)).toBe(true)
+    expect(next[0].variant).not.toBe(first[0].variant)
+  })
+})
+
+describe('trimSlots', () => {
+  it('leaves a pool with nothing hidden alone', () => {
+    const slots = assignSlots([], 'a', variants(['v1', 'v2']))
+
+    expect(trimSlots(slots)).toBe(slots)
+  })
+
+  it('drops trailing hidden slots and keeps interior ones as spares', () => {
+    const first = assignSlots([], 'a', variants(['v1', 'v2', 'v3', 'v4']))
+    const moved = assignSlots(first, 'a', variants(['v1', 'v3', 'v5']))
+    expect(shown(moved)).toEqual(['a:v1@0', 'a:v5@2', 'a:v3@1', '(a:v4)'])
+
+    const next = trimSlots(moved)
+
+    expect(shown(next)).toEqual(['a:v1@0', 'a:v5@2', 'a:v3@1'])
+  })
+
+  it('compacts the pool when hidden slots outnumber visible ones', () => {
+    const big = assignSlots([], 'a', variants(['v1', 'v2', 'v3', 'v4', 'v5', 'v6']))
+    const small = assignSlots(big, 'a', variants(['v2', 'v6']))
+    expect(shown(small)).toEqual(['(a:v1)', 'a:v2@0', '(a:v3)', '(a:v4)', '(a:v5)', 'a:v6@1'])
+
+    const next = trimSlots(small)
+
+    // v2 stays where it is; v6 moves down into the first free slot.
+    expect(shown(next)).toEqual(['a:v6@1', 'a:v2@0'])
+  })
+})

package/src/__tests__/icons.spec.ts

@@ -0,0 +1,26 @@
+import { execFileSync } from 'node:child_process'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const packageRoot = resolve(__dirname, '../..')
+const script = resolve(packageRoot, 'scripts/icons.mjs')
+const generated = resolve(packageRoot, 'src/app/util/icons.generated.ts')
+
+describe('bundled chrome icons', () => {
+  // Run as a child process rather than imported: the generator is plain ESM
+  // with `import.meta.url`, which vitest's transform does not leave intact.
+  it('icons.generated.ts matches the icons the sources use', () => {
+    // A stale file means an Icon the chrome renders is missing from the bundle
+    // and falls back to a CDN fetch at runtime — exactly what bundling is for.
+    expect(() => execFileSync('node', [script, '--check'], { stdio: 'pipe' })).not.toThrow()
+  })
+
+  it('carries the icons the chrome is known to use', () => {
+    const source = readFileSync(generated, 'utf8')
+    expect(source).toContain('"prefix":"carbon"')
+    expect(source).toContain('"cube":')
+    expect(source).toContain('"search":')
+    expect(source).toContain('"subtract-line":')
+  })
+})

package/src/__tests__/state-bridge.spec.ts

@@ -0,0 +1,155 @@
+import { describe, expect, it } from 'vitest'
+import { createStateBridge } from '../app/util/state-bridge.js'
+
+// A stand-in for `postMessage`: messages queue rather than being delivered, so a
+// test can put two of them in flight at once — which is the whole point. Real
+// `postMessage` gives the same shape, one task apart, which is exactly how long
+// it takes for both sides to have written before either has heard.
+function link() {
+  const queues = { host: [] as any[], sandbox: [] as any[] }
+  const state = { host: {} as any, sandbox: {} as any }
+
+  const bridges = {
+    host: createStateBridge(changes => queues.sandbox.push(changes)),
+    sandbox: createStateBridge(changes => queues.host.push(changes)),
+  }
+
+  return {
+    state,
+    /** The side's state changed; it composes and sends. */
+    send(side: 'host' | 'sandbox') {
+      bridges[side].send(structuredClone(state[side]))
+    },
+    /** Deliver everything currently in flight to the given side. */
+    deliver(side: 'host' | 'sandbox') {
+      const inbox = queues[side].splice(0)
+      for (const changes of inbox) {
+        bridges[side].receive(state[side], changes)
+      }
+    },
+    settle() {
+      for (let i = 0; i < 6; i++) {
+        this.deliver('host')
+        this.send('host')
+        this.deliver('sandbox')
+        this.send('sandbox')
+      }
+    },
+  }
+}
+
+describe('createStateBridge', () => {
+  it('carries an edit in each direction', () => {
+    const bridge = link()
+    bridge.state.host = { a: 0, b: 0 }
+    bridge.state.sandbox = { a: 0, b: 0 }
+    bridge.settle()
+
+    bridge.state.host.a = 1
+    bridge.send('host')
+    bridge.deliver('sandbox')
+    expect(bridge.state.sandbox.a).toBe(1)
+
+    bridge.state.sandbox.b = 2
+    bridge.send('sandbox')
+    bridge.deliver('host')
+    expect(bridge.state.host.b).toBe(2)
+  })
+
+  it('does not echo what it was just sent', () => {
+    const bridge = link()
+    bridge.state.host = { a: 0 }
+    bridge.state.sandbox = { a: 0 }
+    bridge.settle()
+
+    bridge.state.host.a = 1
+    bridge.send('host')
+    bridge.deliver('sandbox')
+
+    // The sandbox's own watcher fires on the write it just applied. It has
+    // nothing of its own to report, so nothing goes back.
+    bridge.send('sandbox')
+    expect(bridge.state.host.a).toBe(1)
+    bridge.deliver('host')
+    expect(bridge.state.host.a).toBe(1)
+  })
+
+  it('keeps both edits when the two sides write before either has heard', () => {
+    // The race, exactly: both write, both compose, then both deliver. Sending
+    // the whole state here meant each message carried its sender's stale copy of
+    // the other's key, and each end applied that over its own fresh value — so
+    // the two sides ended up disagreeing with nothing left to settle it.
+    const bridge = link()
+    bridge.state.host = { label: 'start', bumps: 0 }
+    bridge.state.sandbox = { label: 'start', bumps: 0 }
+    bridge.settle()
+
+    bridge.state.host.label = 'raced'
+    bridge.state.sandbox.bumps = 1
+    bridge.send('host')
+    bridge.send('sandbox')
+
+    bridge.deliver('host')
+    bridge.deliver('sandbox')
+    bridge.settle()
+
+    expect(bridge.state.host).toEqual({ label: 'raced', bumps: 1 })
+    expect(bridge.state.sandbox).toEqual({ label: 'raced', bumps: 1 })
+  })
+
+  it('does not revert the sender when the receiver refuses the write', () => {
+    // `applyState` swallows a write a setter refuses — a read-only `computed` in
+    // state is the case that occurs — and reports it as written anyway. Agreeing
+    // to it regardless is worse than losing it: the receiver still holds the old
+    // value, its next firing diffs that against a baseline claiming the new one,
+    // and it comes back as a fresh edit that reverts the sender. The reader's
+    // control edit undoes itself with nothing to show for it.
+    const queues: any = { host: [], sandbox: [] }
+    const host: any = { a: 0 }
+    const sandbox: any = {}
+    Object.defineProperty(sandbox, 'a', { get: () => 0, enumerable: true, configurable: true })
+
+    const hostBridge = createStateBridge(changes => queues.sandbox.push(changes))
+    const sandboxBridge = createStateBridge(changes => queues.host.push(changes))
+
+    hostBridge.send({ ...host })
+    for (const changes of queues.sandbox.splice(0)) sandboxBridge.receive(sandbox, changes)
+
+    host.a = 1
+    hostBridge.send({ a: 1 })
+    for (const changes of queues.sandbox.splice(0)) sandboxBridge.receive(sandbox, changes)
+
+    // The sandbox refused it, so its own next firing still reads 0.
+    sandboxBridge.send({ a: sandbox.a })
+    for (const changes of queues.host.splice(0)) hostBridge.receive(host, changes)
+
+    expect(host.a).toBe(1)
+  })
+
+  it('leaves a simultaneous write to the same key unresolved, as it always did', () => {
+    // Not something a diff can fix, and not something this changed. Both ends
+    // accept what the other sent, so the two values swap. Landing them on one
+    // value needs each end to know which of its own writes the other has seen
+    // yet — acknowledgements, a real protocol — and picking a winner without
+    // that would mean dropping legitimate later edits from the losing side.
+    //
+    // Recorded here so the limit is a decision rather than a surprise. Writing
+    // the same key from the story and the panel in one task is a genuine
+    // conflict; writing *different* keys, which is the case above, is not.
+    const bridge = link()
+    bridge.state.host = { a: 0 }
+    bridge.state.sandbox = { a: 0 }
+    bridge.settle()
+
+    bridge.state.host.a = 1
+    bridge.state.sandbox.a = 2
+    bridge.send('host')
+    bridge.send('sandbox')
+    bridge.deliver('host')
+    bridge.deliver('sandbox')
+    bridge.settle()
+
+    expect(bridge.state.host.a).toBe(2)
+    expect(bridge.state.sandbox.a).toBe(1)
+  })
+})

package/src/__tests__/state-clone.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest'
+import { toPresetState } from '../app/util/state'
+
+/**
+ * What the state-presets panel does to a variant's state before storing it.
+ * `ComplexParameter.story.vue` builds both shapes this has to survive: a prop
+ * holding a callback, and a pair of objects that reference each other.
+ */
+const asPreset = (state: Record<string, any>) => toPresetState(state)
+
+function stateWithACallbackAndACycle() {
+  const parent: Record<string, any> = { name: 'hello' }
+  const child: Record<string, any> = {}
+  parent.child = child
+  child.parent = parent
+
+  return {
+    complexParameter: [{ action: () => {} }],
+    recursiveParameter: parent,
+    count: 1,
+  }
+}
+
+describe('a variant\'s state as a preset', () => {
+  it('is detached from the state it was taken from', () => {
+    const state = stateWithACallbackAndACycle()
+
+    const preset = asPreset(state)
+    state.recursiveParameter.name = 'edited'
+
+    expect(preset.recursiveParameter.name).toBe('hello')
+  })
+
+  it('keeps a self-referential prop as a cycle, which is what it is', () => {
+    const preset = asPreset(stateWithACallbackAndACycle())
+
+    expect(preset.recursiveParameter.child.parent).toBe(preset.recursiveParameter)
+  })
+
+  it('drops the callback, which no stored preset could carry anyway', () => {
+    const preset = asPreset(stateWithACallbackAndACycle())
+
+    expect(preset.complexParameter).toEqual([{}])
+  })
+
+  // The whole of the defect: the copy came out correct either way, but a story
+  // with a callback in its props logged a warning and an error on every mount.
+  it('does so without falling back, so nothing is logged at the reader', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    asPreset(stateWithACallbackAndACycle())
+
+    expect(warn).not.toHaveBeenCalled()
+    expect(error).not.toHaveBeenCalled()
+    warn.mockRestore()
+    error.mockRestore()
+  })
+
+  it('still copies the ordinary values beside them', () => {
+    const preset = asPreset(stateWithACallbackAndACycle())
+
+    expect(preset.count).toBe(1)
+    expect(preset.recursiveParameter.name).toBe('hello')
+  })
+})

package/src/app/components/app/AppActions.vue

@@ -24,7 +24,7 @@ const themeIcon = computed(() => {
       v-if="!isMobile"
       v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')"
       aria-label="Open layout customization"
-      data-test-id="layout-btn"
+      data-testid="layout-btn"
       @click="$emit('layout')"
     >
       <Icon
@@ -35,7 +35,7 @@ const themeIcon = computed(() => {
 
     <TopBarChipItem
       v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
-      data-test-id="search-btn"
+      data-testid="search-btn"
       @click="$emit('search')"
     >
       <Icon

package/src/app/components/layout/LayoutModal.vue

@@ -29,7 +29,7 @@ onKeyboardShortcut(['escape'], () => {
   <div
     v-show="shown"
     class="poveste-layout-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20"
-    data-test-id="layout-modal"
+    data-testid="layout-modal"
   >
     <div
       class="absolute inset-0"
@@ -44,7 +44,7 @@ onKeyboardShortcut(['escape'], () => {
           type="button"
           class="flex items-center justify-center p-1 bg-transparent border-0 text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer"
           aria-label="Close layout customization"
-          data-test-id="layout-modal-close"
+          data-testid="layout-modal-close"
           @click="close()"
         >
           <Icon

package/src/app/components/layout/LayoutPane.vue

@@ -13,14 +13,14 @@ const settings = useLayoutStore().settings
         title="Story List"
         icon="carbon:open-panel-filled-left"
         :state-icon="settings.storyListVisible ? 'carbon:view' : 'carbon:view-off'"
-        data-test-id="layout-toggle-story-list"
+        data-testid="layout-toggle-story-list"
         @click="settings.storyListVisible = !settings.storyListVisible"
       />
       <LayoutItem
         title="Story Options"
         icon="carbon:open-panel-filled-right"
         :state-icon="settings.storyOptionsVisible ? 'carbon:view' : 'carbon:view-off'"
-        data-test-id="layout-toggle-story-options"
+        data-testid="layout-toggle-story-options"
         @click="settings.storyOptionsVisible = !settings.storyOptionsVisible"
       />
     </LayoutItemGroup>
@@ -30,14 +30,14 @@ const settings = useLayoutStore().settings
         title="Right"
         icon="carbon:open-panel-filled-right"
         :is-active="settings.storyOptionsPlacement === 'right'"
-        data-test-id="layout-placement-right"
+        data-testid="layout-placement-right"
         @click="settings.storyOptionsPlacement = 'right'"
       />
       <LayoutItem
         title="Bottom"
         icon="carbon:open-panel-filled-bottom"
         :is-active="settings.storyOptionsPlacement === 'bottom'"
-        data-test-id="layout-placement-bottom"
+        data-testid="layout-placement-bottom"
         @click="settings.storyOptionsPlacement = 'bottom'"
       />
     </LayoutItemGroup>

package/src/app/components/panel/StatePresets.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { applyState, clone, omit } from '@poveste/shared'
+import { applyState, clone } from '@poveste/shared'
 import { onClickOutside, useStorage, useTimeoutFn } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
-import { toRawDeep } from '../../util/state'
+import { toPresetState, toRawDeep } from '../../util/state'
 import BaseSelect from '../base/BaseSelect.vue'
 
 const props = defineProps<{
@@ -18,7 +18,7 @@ const saveId = computed(() => `${props.story.id}:${props.variant.id}`)
 
 const omitKeys = ['_hPropDefs']
 
-const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys))
+const defaultState = toPresetState(props.variant.state, omitKeys)
 
 const selectedOption = useStorage<string>(
   `_poveste-presets/${saveId.value}/selected`,
@@ -66,7 +66,7 @@ const isEditing = ref(false)
 async function createPreset() {
   const id = Date.now().toString()
 
-  presetStates.value.set(id, { state: clone(omit(toRawDeep(props.variant.state), omitKeys)), label: 'New preset' })
+  presetStates.value.set(id, { state: toPresetState(props.variant.state, omitKeys), label: 'New preset' })
   selectedOption.value = id
   isEditing.value = true
   await nextTick()
@@ -82,7 +82,7 @@ async function savePreset() {
   if (!canEdit.value) return
 
   const preset = presetStates.value.get(selectedOption.value)
-  preset.state = clone(omit(toRawDeep(props.variant.state), omitKeys))
+  preset.state = toPresetState(props.variant.state, omitKeys)
   savedNotif.value = true
   savedTimeout.start()
 }

package/src/app/components/panel/StoryControls.vue

@@ -37,7 +37,7 @@ const hasInitState = computed(() => Object
 
 <template>
   <div
-    data-test-id="story-controls"
+    data-testid="story-controls"
     class="poveste-story-controls flex flex-col divide-y divide-gray-100 dark:divide-gray-750"
   >
     <!-- Toolbar -->

package/src/app/components/panel/StoryDocs.vue

@@ -195,7 +195,7 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
       v-else
       ref="renderedEl"
       class="prose dark:prose-invert p-4 max-w-none"
-      data-test-id="story-docs"
+      data-testid="story-docs"
       v-html="renderedDoc"
     />
   </div>

package/src/app/components/panel/StoryEvent.vue

@@ -22,7 +22,7 @@ const formattedArgument = computed(() => {
   <VDropdown
     class="poveste-story-event group"
     placement="right"
-    data-test-id="event-item"
+    data-testid="event-item"
   >
     <template #default="{ shown }">
       <div

package/src/app/components/panel/StorySidePanel.vue

@@ -55,7 +55,7 @@ const panelContentComponent = computed(() => {
         :save-id="`story-sidepane-${innerOrientation}`"
         :orientation="innerOrientation"
         class="poveste-story-side-panel poveste-loaded h-full"
-        data-test-id="story-side-panel"
+        data-testid="story-side-panel"
       >
         <template #first>
           <div class="flex flex-col h-full">

package/src/app/components/panel/StorySourceCode.vue

@@ -218,7 +218,7 @@ watch(sourceHtml, async () => {
       class="__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0"
       :value="displayedSourceCode"
       readonly
-      data-test-id="story-source-code"
+      data-testid="story-source-code"
       @scroll="onScroll"
     />
     <!-- eslint-disable vue/no-v-html -->
@@ -226,7 +226,7 @@ watch(sourceHtml, async () => {
       v-else
       ref="scroller"
       class="w-full h-full overflow-auto"
-      data-test-id="story-source-code"
+      data-testid="story-source-code"
       @scroll="onScroll"
     >
       <div

package/src/app/components/search/SearchItem.vue

@@ -40,7 +40,7 @@ function action() {
   <div
     ref="el"
     class="poveste-search-item"
-    data-test-id="search-item"
+    data-testid="search-item"
     :data-selected="selected ? '' : undefined"
   >
     <BaseListItemLink

package/src/app/components/search/SearchModal.vue

@@ -28,7 +28,7 @@ function close() {
   <div
     v-show="shown"
     class="poveste-search-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20"
-    data-test-id="search-modal"
+    data-testid="search-modal"
   >
     <div
       class="absolute inset-0"

package/src/app/components/search/SearchPane.vue

@@ -284,6 +284,14 @@ const {
 const router = useRouter()
 
 onKeyboardShortcut(['enter'], () => {
+  // The modal hides with `v-show`, so this pane stays mounted and the listener
+  // stays live once search has been opened — without this guard, Enter anywhere
+  // in the app navigates to the last selected result (#114). `LayoutModal`'s
+  // escape handler guards on `shown` the same way.
+  if (!props.shown) {
+    return
+  }
+
   const result = results.value[selectedIndex.value]
 
   if (!result) {