@alfakit/vue 0.1.9 → 0.1.10

package/src/components/fields/CheckboxListField.vue

@@ -73,7 +73,7 @@ const toggle = (key: string, checked: boolean) => {
     <div class="flex flex-col gap-2">
       <div
         v-if="props.component.searchable || (props.component.bulkToggleable && !readOnly)"
-        class="flex items-center gap-2"
+        class="flex min-w-0 flex-wrap items-center gap-2"
       >
         <Input
           v-if="props.component.searchable"
@@ -82,7 +82,7 @@ const toggle = (key: string, checked: boolean) => {
           :aria-label="props.component.searchPrompt ?? t('search', {}, 'Search')"
           class="h-8"
         />
-        <div v-if="props.component.bulkToggleable && !readOnly" class="flex gap-1">
+        <div v-if="props.component.bulkToggleable && !readOnly" class="flex flex-wrap gap-1">
           <Button
             v-if="!props.component.selectAllAction?.hidden"
             type="button"

package/src/components/fields/DatePickerField.vue

@@ -251,6 +251,7 @@ const weekStartsOn = computed(
         <PopoverContent class="w-auto p-0" align="start">
           <Calendar
             :model-value="calendarValue"
+            :calendar-label="props.component.label || t('form.pick_date', {}, 'Pick a date')"
             :locale="locale"
             :dir="direction"
             :today="toCalendarDate(wallClockNow(props.component.timezone))"

package/src/components/fields/RichEditorSuggestions.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { EditorSuggestions } from '@alfakit/core'
+import { fixedContainingBlockOffset, type EditorSuggestions } from '@alfakit/core'
 import type { Editor } from '@tiptap/vue-3'
+import { computed } from 'vue'
 import { useT } from '../../context'
 import { cn } from '../../lib/utils'
 import { useStore } from '../../composables/use-store'
@@ -13,6 +14,16 @@ const props = defineProps<{
 }>()
 const t = useT()
 const state = useStore(props.suggestions.store)
+// Inside a modal the dialog's transform is the containing block of this fixed list.
+const position = computed(() => {
+  const coords = state.value.coords
+
+  if (!coords) return undefined
+
+  const offset = fixedContainingBlockOffset(props.editor?.view.dom)
+
+  return { left: `${coords.left - offset.x}px`, top: `${coords.bottom + 4 - offset.y}px` }
+})
 </script>
 
 <template>
@@ -23,11 +34,7 @@ const state = useStore(props.suggestions.store)
     :aria-label="t('editor.suggestions', {}, 'Suggestions')"
     data-slot="rich-editor-suggestions"
     class="bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md"
-    :style="
-      state.coords
-        ? { left: `${state.coords.left}px`, top: `${state.coords.bottom + 4}px` }
-        : undefined
-    "
+    :style="position"
   >
     <div
       v-if="state.loading && state.items.length === 0"

package/src/components/fields/RichEditorToolbarGroup.vue

@@ -44,6 +44,20 @@ const active = computed(() => {
   return buttons.value.some((name) => props.commands[name]?.active?.(props.editor))
 })
 const label = (name: string) => commandLabel(name, props.commands, translate)
+// After a pick, typing goes on in the editor (the command focused it); the menu would
+// otherwise return focus to its trigger. Closing without a pick (Escape) still does.
+let picked = false
+const pick = (name: string) => {
+  picked = true
+  emit('run', name)
+}
+const closeAutoFocus = (event: Event) => {
+  if (!picked) return
+
+  picked = false
+  event.preventDefault()
+  props.editor.commands.focus()
+}
 const pressed = (name: string) => {
   void props.tick
 
@@ -79,6 +93,7 @@ const pressed = (name: string) => {
       align="start"
       :aria-label="props.group.label"
       :class="cn(!props.group.textual && 'flex min-w-0 flex-row gap-0.5')"
+      @close-auto-focus="closeAutoFocus"
     >
       <DropdownMenuItem
         v-for="name in buttons"
@@ -86,7 +101,7 @@ const pressed = (name: string) => {
         :aria-label="props.group.textual ? undefined : label(name)"
         :title="label(name)"
         :class="cn(pressed(name) && 'bg-accent text-accent-foreground')"
-        @select="emit('run', name)"
+        @select="pick(name)"
       >
         <RichEditorToolIcon :name="name" :label="label(name)" :tools="props.tools" />
         <span v-if="props.group.textual">{{ label(name) }}</span>

package/src/components/file-manager/FileManagerView.vue

@@ -1112,7 +1112,8 @@ const onPreviewKeyDown = (event: KeyboardEvent) => {
       :open="dialog?.type === 'createFolder' || dialog?.type === 'rename'"
       @update:open="onDialogOpen"
     >
-      <DialogContent data-slot="file-manager-dialog">
+      <!-- The title and the labelled field say it all: no description. -->
+      <DialogContent data-slot="file-manager-dialog" :aria-describedby="undefined">
         <form class="flex flex-col gap-4" @submit.prevent="submitName">
           <DialogHeader>
             <DialogTitle>
@@ -1396,6 +1397,7 @@ const onPreviewKeyDown = (event: KeyboardEvent) => {
       <DialogContent
         class="flex max-h-[90vh] flex-col sm:max-w-4xl"
         data-slot="file-manager-preview"
+        :aria-describedby="undefined"
         @keydown="onPreviewKeyDown"
       >
         <DialogHeader>

package/src/components/layout/CalloutComponent.vue

@@ -6,7 +6,9 @@ import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
+import { useOptionalFormStore } from '../form/form-context'
 import ActionList from '../actions/ActionList.vue'
+import { useFieldActionContext } from '../schema/field-actions'
 import MixedContent from './MixedContent.vue'
 
 const CALLOUT_COLORS: Record<string, string> = {
@@ -29,7 +31,12 @@ const CALLOUT_ICON_SIZES: Record<string, string> = {
 }
 
 const props = defineProps<{ component: CalloutSchema }>()
-const context = usePageActionContext()
+// Inside a form the actions run as field actions of this component, so `$get` / `$set`
+// reach the form (like a section's header actions).
+const form = useOptionalFormStore()
+const pageContext = usePageActionContext()
+const fieldContext = useFieldActionContext(() => props.component)
+const context = computed(() => (form ? fieldContext.value : pageContext))
 const tone = computed(() => props.component.color ?? props.component.status)
 // `iconColor()`, or the status colour once `color(null)` removed the background.
 const iconColor = computed(
@@ -78,10 +85,16 @@ const iconColor = computed(
         size="sm"
         :class="cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))"
       />
-      <MixedContent :items="props.component.footer" name="callout-footer" class="mt-2" />
+      <MixedContent
+        :items="props.component.footer"
+        :context="context"
+        name="callout-footer"
+        class="mt-2"
+      />
     </div>
     <MixedContent
       :items="props.component.controls"
+      :context="context"
       name="callout-controls"
       class="-me-1 -mt-1 shrink-0 gap-1"
     />

package/src/components/layout/EmptyStateComponent.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 import type { EmptyStateComponentSchema } from '@alfakit/core'
+import { computed } from 'vue'
 import { colorClass, iconBackgroundColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
+import { useOptionalFormStore } from '../form/form-context'
 import ActionList from '../actions/ActionList.vue'
+import { useFieldActionContext } from '../schema/field-actions'
 import MixedContent from './MixedContent.vue'
 
 const props = defineProps<{ component: EmptyStateComponentSchema }>()
-const context = usePageActionContext()
+// Inside a form the actions run as field actions of this component, so `$get` / `$set`
+// reach the form (like a section's header actions).
+const form = useOptionalFormStore()
+const pageContext = usePageActionContext()
+const fieldContext = useFieldActionContext(() => props.component)
+const context = computed(() => (form ? fieldContext.value : pageContext))
 </script>
 
 <template>
@@ -49,6 +57,7 @@ const context = usePageActionContext()
     />
     <MixedContent
       :items="props.component.footer"
+      :context="context"
       name="empty-state-footer"
       class="justify-center"
     />

package/src/components/layout/MixedContent.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import type { AnyActionSchema, ContentSlotItem, SchemaComponent } from '@alfakit/core'
+import type {
+  ActionContext,
+  AnyActionSchema,
+  ContentSlotItem,
+  SchemaComponent,
+} from '@alfakit/core'
 import { computed, type HTMLAttributes } from 'vue'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
@@ -8,16 +13,19 @@ import RenderComponent from '../schema/RenderComponent.vue'
 
 /**
  * Actions and components placed in a layout component's fixed spot (a section's
- * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,
- * like section header actions.
+ * `afterHeader()`, a callout's `controls()`). Actions run in the owner's action context
+ * (`context`: inside a form, the owner's field context, so `$get` / `$set` work), else the
+ * page's.
  */
 const props = defineProps<{
   items: ContentSlotItem[] | undefined
   name: string
   class?: HTMLAttributes['class']
+  context?: ActionContext
 }>()
 
-const context = usePageActionContext()
+const pageContext = usePageActionContext()
+const context = computed(() => props.context ?? pageContext)
 
 type Group =
   | { kind: 'actions'; key: string; actions: AnyActionSchema[] }

package/src/components/layout/SectionComponent.vue

@@ -104,7 +104,11 @@ const t = useT()
           :context="context"
           size="sm"
         />
-        <MixedContent :items="props.component.afterHeader" name="section-after-header" />
+        <MixedContent
+          :items="props.component.afterHeader"
+          name="section-after-header"
+          :context="context"
+        />
         <CollapsibleTrigger v-if="props.component.collapsible" as-child>
           <Button
             type="button"
@@ -155,7 +159,11 @@ const t = useT()
               :context="context"
               :class="actionsAlignmentClass(props.component.footerActionsAlignment) || undefined"
             />
-            <MixedContent :items="props.component.footer" name="section-footer-content" />
+            <MixedContent
+              :items="props.component.footer"
+              name="section-footer-content"
+              :context="context"
+            />
           </div>
         </div>
       </CollapsibleContent>
@@ -208,7 +216,11 @@ const t = useT()
           :context="context"
           size="sm"
         />
-        <MixedContent :items="props.component.afterHeader" name="section-after-header" />
+        <MixedContent
+          :items="props.component.afterHeader"
+          name="section-after-header"
+          :context="context"
+        />
         <CollapsibleTrigger v-if="props.component.collapsible" as-child>
           <Button
             type="button"
@@ -250,7 +262,11 @@ const t = useT()
             :context="context"
             :class="actionsAlignmentClass(props.component.footerActionsAlignment) || undefined"
           />
-          <MixedContent :items="props.component.footer" name="section-footer-content" />
+          <MixedContent
+            :items="props.component.footer"
+            name="section-footer-content"
+            :context="context"
+          />
         </div>
       </CollapsibleContent>
     </section>

package/src/components/notifications/NotificationsMenu.vue

@@ -4,9 +4,13 @@ import {
   notificationTintStyles,
   onDatabaseNotificationsSent,
   onOpenDatabaseNotifications,
+  pwaStore,
+  startPwa,
+  togglePushNotifications,
 } from '@alfakit/core'
-import { BellIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'
+import { BellIcon, BellOffIcon, BellRingIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'
 import { computed, onMounted, onScopeDispose, ref, watch } from 'vue'
+import { toast } from 'vue-sonner'
 import { useStore } from '../../composables/use-store'
 import { useDirection, useFormatter, usePanel, useT } from '../../context'
 import { cssColor, textColorClasses } from '../../lib/colors'
@@ -94,6 +98,24 @@ onScopeDispose(() => stopOpenListener?.())
 
 onScopeDispose(() => center?.stopPolling())
 const format = useFormatter()
+
+// `pwa(push: true)` in a starter kit: the app's user menu has no AlfaKit entries, so Web
+// Push is turned on or off from the bell's menu.
+const pwa = useStore(pwaStore)
+const pushToggle = computed(
+  () =>
+    Boolean(panel.value.starterKit && panel.value.pwa?.push) && pwa.value.push !== 'unsupported',
+)
+onMounted(() => {
+  if (panel.value.starterKit && panel.value.pwa?.push) startPwa(panel.value.pwa)
+})
+async function togglePush() {
+  const { message } = await togglePushNotifications()
+  const text = t(message.key, {}, message.fallback)
+
+  if (message.error) toast.error(text)
+  else toast.success(text)
+}
 </script>
 
 <template>
@@ -150,6 +172,28 @@ const format = useFormatter()
       <div class="flex items-center justify-between border-b px-3 py-2">
         <span class="text-sm font-semibold">{{ t('notifications', {}, 'Notifications') }}</span>
         <div class="flex items-center gap-1">
+          <Button
+            v-if="pushToggle"
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            data-slot="pwa-push"
+            :disabled="pwa.pushBusy || pwa.push === 'denied'"
+            :title="
+              pwa.push === 'subscribed'
+                ? t('pwa.notifications.disable', {}, 'Turn off notifications')
+                : t('pwa.notifications.enable', {}, 'Turn on notifications')
+            "
+            :aria-label="
+              pwa.push === 'subscribed'
+                ? t('pwa.notifications.disable', {}, 'Turn off notifications')
+                : t('pwa.notifications.enable', {}, 'Turn on notifications')
+            "
+            @click="void togglePush()"
+          >
+            <BellOffIcon v-if="pwa.push === 'subscribed'" />
+            <BellRingIcon v-else />
+          </Button>
           <Button
             v-if="state.unreadCount > 0"
             type="button"

package/src/components/panel/ShortcutsOverlay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'
 import {
-  bindingFromEvent,
+  ShortcutRecorder,
   flattenActionGroup,
   saveShortcutOverrides,
   shortcutOverlayGroups,
@@ -76,47 +76,52 @@ const change = (item: ShortcutListItem) => {
   recording.value = item.id
 }
 
-// While recording, the next key press is the new binding (Escape cancels). Listening in the
-// capture phase keeps the key from closing the dialog or running another shortcut.
+// While recording, the keys pressed are the new binding: one key (with modifiers) or a
+// sequence ("g o"), finished a second after the last key (Escape cancels). Listening in
+// the capture phase keeps the keys from closing the dialog or running another shortcut.
 watch(recording, (id, _old, onCleanup) => {
   if (!id || typeof window === 'undefined') return
 
   shortcuts.setPaused(true)
 
-  const listener = (event: KeyboardEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (event.key === 'Escape') {
+  const recorder = new ShortcutRecorder({
+    onDone: (binding) => {
       recording.value = null
-      message.value = t('shortcuts.cancelled', {}, 'Change cancelled.')
 
-      return
-    }
+      const conflict = shortcuts.conflict([binding], id)
 
-    const binding = bindingFromEvent(event)
+      if (conflict) {
+        message.value = t(
+          'shortcuts.conflict',
+          { label: conflict.label },
+          `Already used by “${conflict.label}”.`,
+        )
 
-    if (!binding) return
+        return
+      }
 
-    const conflict = shortcuts.conflict([binding], id)
+      void save(id, [binding])
+    },
+  })
 
-    recording.value = null
+  const listener = (event: KeyboardEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
 
-    if (conflict) {
-      message.value = t(
-        'shortcuts.conflict',
-        { label: conflict.label },
-        `Already used by “${conflict.label}”.`,
-      )
+    if (event.key === 'Escape') {
+      recorder.cancel()
+      recording.value = null
+      message.value = t('shortcuts.cancelled', {}, 'Change cancelled.')
 
       return
     }
 
-    void save(id, [binding])
+    recorder.press(event)
   }
 
   window.addEventListener('keydown', listener, true)
   onCleanup(() => {
+    recorder.cancel()
     window.removeEventListener('keydown', listener, true)
     shortcuts.setPaused(false)
   })

package/src/components/table/ColumnManager.vue

@@ -169,7 +169,7 @@ const drop = (name: string) => {
   dropTarget.value = null
 }
 
-const save = async (order: string[]): Promise<boolean> => {
+const save = async (order: string[], options: { reload?: boolean } = {}): Promise<boolean> => {
   const endpoint = panel.value.endpoints.tableColumns
 
   if (!endpoint) return false
@@ -177,7 +177,7 @@ const save = async (order: string[]): Promise<boolean> => {
   saving.value = true
 
   try {
-    await saveColumnOrder(endpoint, props.token, props.component, order)
+    await saveColumnOrder(endpoint, props.token, props.component, order, options)
 
     return true
   } catch (error) {
@@ -273,7 +273,8 @@ const apply = async () => {
   announcement.value = ''
   open.value = false
 
-  if (order) await save(order)
+  // The visibility visit renders the new order too: no second reload racing it.
+  if (order) await save(order, { reload: !columns })
 
   if (columns) visitTable(props.table.identifier, { columns }, ['page'])
 }
@@ -282,7 +283,8 @@ const apply = async () => {
 const reset = async () => {
   if (reorderable.value) {
     orderDraft.value = null
-    await save([])
+    // The visibility visit below renders the defined order too.
+    await save([], { reload: !toggleable.value })
   }
 
   if (toggleable.value) {

package/src/components/table/Spreadsheet.vue

@@ -524,15 +524,20 @@ const vFocus = { mounted: (element: HTMLElement) => element.focus() }
         <DialogHeader>
           <DialogTitle>{{ t('table.spreadsheet.paste_title', {}, 'Paste cells') }}</DialogTitle>
           <DialogDescription>
-            {{
+            <!-- One line per count: translations can't join two sentences. -->
+            <span class="block">{{
               choice(
                 'table.spreadsheet.paste_summary',
                 preview?.plan.changes.length ?? 0,
                 {},
                 ':count cell will change|:count cells will change',
               )
-            }}
-            <template v-if="(preview?.plan.skipped ?? 0) > 0">
+            }}</span>
+            <span
+              v-if="(preview?.plan.skipped ?? 0) > 0"
+              class="block"
+              data-slot="spreadsheet-paste-skipped"
+            >
               {{
                 choice(
                   'table.spreadsheet.paste_skipped',
@@ -541,7 +546,7 @@ const vFocus = { mounted: (element: HTMLElement) => element.focus() }
                   ':count read-only cell is skipped|:count read-only cells are skipped',
                 )
               }}
-            </template>
+            </span>
           </DialogDescription>
         </DialogHeader>
         <div data-slot="spreadsheet-paste" class="flex flex-col gap-3">

package/src/components/translation-manager/TranslationManagerView.vue

@@ -356,7 +356,7 @@ const editLabel = (key: string, locale: string) =>
             <tr>
               <th
                 scope="col"
-                class="bg-muted sticky start-0 z-10 min-w-56 border-b px-3 py-2 text-start font-medium"
+                class="bg-card sticky start-0 z-10 min-w-56 border-b [background-image:linear-gradient(var(--muted),var(--muted))] px-3 py-2 text-start font-medium"
               >
                 {{ t('translation-manager.key', {}, 'Key') }}
               </th>

package/src/components/ui/SidebarMenuButton.vue

@@ -8,6 +8,10 @@ import TooltipContent from './TooltipContent.vue'
 import TooltipTrigger from './TooltipTrigger.vue'
 import { useSidebar } from './use-sidebar'
 
+// Attributes from an `as-child` parent (CollapsibleTrigger's click handler and ARIA state,
+// a nav item's extra attributes) go on the button, not on the renderless Tooltip root.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<
     PrimitiveProps & {
@@ -27,6 +31,7 @@ const { isMobile, state } = useSidebar()
   <Tooltip v-if="props.tooltip">
     <TooltipTrigger as-child>
       <Primitive
+        v-bind="$attrs"
         data-slot="sidebar-menu-button"
         data-sidebar="menu-button"
         :data-size="props.size"
@@ -46,6 +51,7 @@ const { isMobile, state } = useSidebar()
   </Tooltip>
   <Primitive
     v-else
+    v-bind="$attrs"
     data-slot="sidebar-menu-button"
     data-sidebar="menu-button"
     :data-size="props.size"

package/src/components/widgets/StatCard.vue

@@ -39,7 +39,9 @@ const props = defineProps<{ stat: StatSchema }>()
     >
       <div class="flex items-start justify-between gap-3">
         <div class="flex flex-col gap-1">
-          <span class="text-muted-foreground text-sm font-medium">{{ props.stat.label }}</span>
+          <span class="text-muted-foreground text-sm font-medium"
+            ><bdi>{{ props.stat.label }}</bdi></span
+          >
           <span
             v-if="(props.stat.value === null || props.stat.value === '') && props.stat.placeholder"
             class="text-muted-foreground text-2xl font-semibold tracking-tight"
@@ -54,7 +56,7 @@ const props = defineProps<{ stat: StatSchema }>()
                 props.stat.color && textColorClasses[props.stat.color],
               )
             "
-            >{{ props.stat.value }}</span
+            ><bdi>{{ props.stat.value }}</bdi></span
           >
           <span
             v-if="props.stat.description"
@@ -72,7 +74,8 @@ const props = defineProps<{ stat: StatSchema }>()
               :name="props.stat.descriptionIcon"
               class="size-3.5"
             />
-            {{ props.stat.description }}
+            <!-- Mixed-direction text (a Latin "-3% this month" in Arabic) keeps its order. -->
+            <bdi>{{ props.stat.description }}</bdi>
             <Icon
               v-if="props.stat.descriptionIcon && props.stat.descriptionIconPosition === 'after'"
               :name="props.stat.descriptionIcon"

package/src/pages/AlfakitPage.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { openDefaultAction, resolveLazyComponents, type DefaultActionOpener } from '@alfakit/core'
+import {
+  customPageProps,
+  openDefaultAction,
+  resolveLazyComponents,
+  type DefaultActionOpener,
+} from '@alfakit/core'
 import { Head } from '@inertiajs/vue3'
 import { computed, onMounted, watch } from 'vue'
 import { providePageActionContext } from '../components/actions/action-context'
@@ -28,6 +33,11 @@ const title = computed(() =>
     : panel.value.brandName,
 )
 const custom = computed(() => (page.value?.view ? pages[page.value.view.component] : undefined))
+// A custom component brings its own `PageShell` (as in panel mode, where it is the Inertia
+// page itself) and takes the live props, so `reloadProps()` reaches it.
+const customProps = computed(() =>
+  customPageProps(page.value?.view?.props, props.value as Record<string, unknown>),
+)
 
 // The page's default action (`$defaultAction`, `?tableAction=`) opens once the page has
 // hydrated, and once per page: re-renders after the action ran don't open it again.
@@ -61,9 +71,9 @@ providePageActionContext({
         )
       }}
     </div>
+    <component :is="custom" v-else-if="page.view && custom" v-bind="customProps" :page="page" />
     <PageShell v-else :page="page">
-      <component :is="custom" v-if="page.view && custom" v-bind="page.view.props" :page="page" />
-      <PageContent v-else :page="page" />
+      <PageContent :page="page" />
     </PageShell>
   </template>
 </template>

package/src/standalone/AlfakitComponent.vue

@@ -130,15 +130,19 @@ watch(
 // on the page renders one (checked after every component mounted).
 const ownsToaster = ref(false)
 
-onMounted(() => {
-  ensureStandaloneRuntime()
-
-  // Partial reloads (sorting, paging, inline edits) request this component's own prop.
+// Partial reloads (sorting, paging, inline edits) request this component's own prop.
+// Registered in setup (browser only), before the children's `onMounted`: a `deferLoading()`
+// table's first reload must already ask for this prop, not the panel `page` prop.
+if (typeof window !== 'undefined') {
   watch(
     () => findStandalonePropName(inertiaPage.props as Record<string, unknown>, props.component),
     (name, _old, onCleanup) => onCleanup(registerStandaloneProp(name ?? null)),
     { immediate: true },
   )
+}
+
+onMounted(() => {
+  ensureStandaloneRuntime()
 
   // The watcher runs before the new payload renders: hand it over, or the response would
   // count as stale and lazy widgets (a calendar after its action) keep their old schema.

package/src/standalone/runtime.ts

@@ -3,6 +3,7 @@ import {
   ComponentRegistry,
   FlashNotificationTracker,
   Translator,
+  installPrefetchInvalidation,
   reloadOnExpiredPage,
   resolveRequestErrorNotification,
   type NotificationSchema,
@@ -27,6 +28,8 @@ export function ensureStandaloneRuntime(): void {
 
   browserReady = true
   reloadOnExpiredPage()
+  // Pages restored by Back after a change are reloaded; shared with a surrounding panel.
+  installPrefetchInvalidation()
 }
 
 /**