@alfakit/vue 0.1.11 → 0.1.13

package/src/components/fields/RepeaterField.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RepeaterSchema, SchemaComponent } from '@alfakit/core'
 import {
+  itemExtraActions,
   isDeferredPlaceholder,
   VIRTUAL_ESTIMATES,
   appendRepeaterItem,
@@ -194,7 +195,9 @@ const add = () =>
         :virtual="virtual"
         :context="context"
         :resolve="resolve"
-        :extra-actions-for="(index: number) => props.component.items[index]?.actions"
+        :extra-actions-for="
+          (index: number) => itemExtraActions(props.component, props.component.items[index])
+        "
         @move="moveItem"
         @clone="cloneItem"
         @remove="removeItem"
@@ -272,7 +275,11 @@ const add = () =>
                 :index="index"
                 :count="items.length"
                 :resolve="(name: ItemActionName) => resolve(name, index)"
-                :extra-actions="disabled ? undefined : props.component.items[index]?.actions"
+                :extra-actions="
+                  disabled
+                    ? undefined
+                    : itemExtraActions(props.component, props.component.items[index])
+                "
                 :buttons="buttons"
                 :can-clone="Boolean(props.component.cloneable) && canAdd"
                 :can-delete="canDelete"

package/src/components/fields/rich-editor-extensions.ts

@@ -102,11 +102,15 @@ export function useRichEditorExtensions(
 
     if (!result || !instance || instance.isDestroyed) return
 
-    instance
-      .chain()
-      .focus()
-      .insertContent({ type: 'customBlock', attrs: { id: result.id, config: result.config } })
-      .run()
+    const block = { type: 'customBlock', attrs: { id: result.id, config: result.config } }
+    // A block inserted just before is still selected (a node selection): insert after it
+    // instead of replacing it (W-S2-05).
+    const { selection } = instance.state
+    const chain = instance.chain().focus()
+    ;('node' in selection && selection.node
+      ? chain.insertContentAt(selection.to, block)
+      : chain.insertContent(block)
+    ).run()
   }
 
   return { extensions, suggestions, insertBlock, context }

package/src/components/layout/WizardComponent.vue

@@ -21,6 +21,7 @@ import { cn } from '../../lib/utils'
 import ActionButton from '../actions/ActionButton.vue'
 import { usePageActionContext } from '../actions/action-context'
 import { useOptionalFormStore } from '../form/form-context'
+import { useFieldActionContext } from '../schema/field-actions'
 import SchemaRenderer from '../schema/SchemaRenderer.vue'
 import Button from '../ui/Button.vue'
 import DeferredSchema from './DeferredSchema.vue'
@@ -52,6 +53,9 @@ watch(
   { immediate: true },
 )
 const store = useOptionalFormStore()
+// Inside a form the submit action runs as a field action, so `$get` / `$set` work (W-S2-09).
+const fieldContext = useFieldActionContext(() => props.component)
+const submitContext = computed(() => (store ? fieldContext.value : actionContext))
 
 // An action modal around this wizard shows its submit button on the last step only.
 watch(
@@ -234,7 +238,7 @@ const next = async () => {
       <ActionButton
         v-else-if="props.component.submitAction"
         :action="props.component.submitAction"
-        :context="actionContext"
+        :context="submitContext"
       />
       <div
         v-else-if="props.component.submitActionHtml"

package/src/components/notifications/NotificationsMenu.vue

@@ -11,6 +11,7 @@ import {
 import { BellIcon, BellOffIcon, BellRingIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'
 import { computed, onMounted, onScopeDispose, ref, watch } from 'vue'
 import { toast } from 'vue-sonner'
+import { toastOptions } from './flash-toasts'
 import { useStore } from '../../composables/use-store'
 import { useDirection, useFormatter, usePanel, useT } from '../../context'
 import { cssColor, textColorClasses } from '../../lib/colors'
@@ -113,8 +114,8 @@ async function togglePush() {
   const { message } = await togglePushNotifications()
   const text = t(message.key, {}, message.fallback)
 
-  if (message.error) toast.error(text)
-  else toast.success(text)
+  if (message.error) toast.error(text, toastOptions())
+  else toast.success(text, toastOptions())
 }
 </script>
 

package/src/components/notifications/flash-toasts.ts

@@ -18,6 +18,14 @@ export function setToasterId(id: string | undefined): void {
   toasterId = id
 }
 
+/**
+ * Options for a direct `toast.*()` call: the starter kit toaster's id merged in, so PWA and
+ * notification messages reach AlfaKit's toaster in a starter kit too (W-S1-03).
+ */
+export function toastOptions<T extends object>(options?: T): T & { toasterId?: string } {
+  return { ...(options ?? ({} as T)), toasterId }
+}
+
 /** `closeNotification(id)` (or a `close-notification` event) dismisses that toast. */
 export function listenForClosedNotifications(): void {
   if (closeListening || typeof window === 'undefined') return

package/src/components/panel/PwaManager.vue

@@ -2,6 +2,7 @@
 import { applyPwaUpdate, pwaStore, startPwa } from '@alfakit/core'
 import { onMounted, watch } from 'vue'
 import { toast } from 'vue-sonner'
+import { toastOptions } from '../notifications/flash-toasts'
 import { useStore } from '../../composables/use-store'
 import { usePanel, useT } from '../../context'
 
@@ -26,11 +27,14 @@ watch(
   (available) => {
     if (!available) return
 
-    toast(t('pwa.update_available', {}, 'A new version is available'), {
-      id: 'alfakit-pwa-update',
-      duration: Infinity,
-      action: { label: t('pwa.reload', {}, 'Reload'), onClick: () => applyPwaUpdate() },
-    })
+    toast(
+      t('pwa.update_available', {}, 'A new version is available'),
+      toastOptions({
+        id: 'alfakit-pwa-update',
+        duration: Infinity,
+        action: { label: t('pwa.reload', {}, 'Reload'), onClick: () => applyPwaUpdate() },
+      }),
+    )
   },
   { immediate: true },
 )

package/src/components/panel/PwaMenuItems.vue

@@ -3,6 +3,7 @@ import { canInstallPwa, pwaStore, subscribeToPush, unsubscribeFromPush } from '@
 import { BellIcon, BellOffIcon, DownloadIcon } from '@lucide/vue'
 import { computed } from 'vue'
 import { toast } from 'vue-sonner'
+import { toastOptions } from '../notifications/flash-toasts'
 import { useStore } from '../../composables/use-store'
 import { usePanel, useT } from '../../context'
 import { Icon } from '../../lib/icons'
@@ -23,15 +24,25 @@ async function togglePush() {
     state.value.push === 'subscribed' ? await unsubscribeFromPush() : await subscribeToPush()
 
   if (outcome === 'subscribed') {
-    toast.success(t('pwa.notifications.enabled', {}, 'Notifications are on for this device'))
+    toast.success(
+      t('pwa.notifications.enabled', {}, 'Notifications are on for this device'),
+      toastOptions(),
+    )
   } else if (outcome === 'unsubscribed') {
-    toast.success(t('pwa.notifications.disabled', {}, 'Notifications are off for this device'))
+    toast.success(
+      t('pwa.notifications.disabled', {}, 'Notifications are off for this device'),
+      toastOptions(),
+    )
   } else if (outcome === 'denied') {
     toast.error(
       t('pwa.notifications.blocked', {}, 'Notifications are blocked in your browser settings'),
+      toastOptions(),
     )
   } else {
-    toast.error(t('pwa.notifications.failed', {}, 'Couldn’t change notifications. Try again.'))
+    toast.error(
+      t('pwa.notifications.failed', {}, 'Couldn’t change notifications. Try again.'),
+      toastOptions(),
+    )
   }
 }
 </script>

package/src/components/panel/ShortcutsOverlay.vue

@@ -216,7 +216,7 @@ const update = (next: boolean) => {
                       t(
                         'shortcuts.reset_label',
                         { label: item.label },
-                        `Restore the default shortcut for ${item.label}`,
+                        `Reset the shortcut for ${item.label}`,
                       )
                     "
                     @click="save(item.id, null)"

package/src/components/panel/pwa.ts

@@ -1,5 +1,6 @@
 import { promptPwaInstall, type Translator } from '@alfakit/core'
 import { toast } from 'vue-sonner'
+import { toastOptions } from '../notifications/flash-toasts'
 
 /** Show the browser's install prompt, or the "Add to Home Screen" hint on iOS Safari. */
 export async function installPwa(t: Translator['t']): Promise<void> {
@@ -10,7 +11,7 @@ export async function installPwa(t: Translator['t']): Promise<void> {
         {},
         'To install this app, tap the Share button and then “Add to Home Screen”.',
       ),
-      { duration: 10000 },
+      toastOptions({ duration: 10000 }),
     )
   }
 }

package/src/components/table/TableCellContent.vue

@@ -191,7 +191,9 @@ const descriptionPosition = computed(
         data-slot="image-remaining"
         :class="
           cn(
-            'text-muted-foreground ms-1',
+            'text-muted-foreground',
+            // The last image keeps the stack's negative end margin (W-S3-03).
+            imageSchema.stacked && defaultImageStack ? 'ms-3' : 'ms-1',
             remainingTextSizeClass(imageSchema.limitedRemainingTextSize),
           )
         "

package/src/lib/discovery.ts

@@ -6,6 +6,7 @@ import {
 } from '@alfakit/core'
 import { defineAsyncComponent, defineComponent, h } from 'vue'
 import type { AnyComponent } from '../context'
+import { startIdScope } from './hydration'
 
 /**
  * A discovered component: rendered straight away once its code has loaded (the pages that
@@ -21,6 +22,11 @@ export function discoveredComponent(entry: DiscoveredEntry<AnyComponent>): AnyCo
       // Chosen once per mount, so loading never remounts a field.
       const Loaded = entry.current ?? Async
 
+      // The async component starts an id scope; a loaded one starts the same, so the server
+      // (which keeps loaded code between requests) and a hydrating browser that still loads
+      // it number Reka's ids alike (W-V2-13, W-V3-28).
+      if (Loaded !== Async) startIdScope()
+
       return () => h(Loaded, attrs, slots)
     },
   })

package/src/lib/hydration.ts

@@ -12,12 +12,17 @@ const mountedApps = new WeakMap<AppContext, Ref<boolean>>()
  * the server render and hydration), then `true` for every component in that app, so
  * content rendered later draws at once (reactive). Lazily loaded parts (named icons, heavy
  * fields) render their server markup until then, whatever has loaded already.
+ *
+ * A component that hydrates server markup after the app mounted (inside an async
+ * component whose code arrived later, such as a lazily split built-in) waits for its own
+ * mount: its server markup is the fallback too (W-V3-28).
  */
 export function useAppMounted(): Ref<boolean> {
-  const context = getCurrentInstance()?.appContext
+  const instance = getCurrentInstance()
+  const context = instance?.appContext
 
   // Outside a component there is no hydration to wait for.
-  if (!context) return ref(true)
+  if (!instance || !context) return ref(true)
 
   let mounted = mountedApps.get(context)
 
@@ -27,9 +32,40 @@ export function useAppMounted(): Ref<boolean> {
   }
 
   const flag = mounted
+
+  // Hydration hands each component its server element before setup runs.
+  if (instance.vnode.el && flag.value) {
+    const own = ref(false)
+
+    onMounted(() => {
+      own.value = true
+    })
+
+    return own
+  }
+
   onMounted(() => {
     flag.value = true
   })
 
   return flag
 }
+
+/**
+ * Start a new `useId()` scope at the current component, as Vue does at an async component
+ * (its internal `markAsyncBoundary()`): ids below it are numbered from zero under a prefix
+ * that counts scopes, not the ids generated before it. So
+ * - AlfaKit's ids don't follow the host layout's (a starter kit's sidebar renders a sheet on
+ *   phones in the browser but the desktop sidebar on the server), and
+ * - a lazily split component renders the same ids whether its code was loaded before
+ *   rendering (the server after its first request) or arrives during hydration (an async
+ *   component, which starts a scope itself).
+ */
+export function startIdScope(): void {
+  const instance = getCurrentInstance() as { ids?: [string, number, number] } | null
+  const ids = instance?.ids
+
+  if (!instance || !Array.isArray(ids) || ids.length !== 3) return
+
+  instance.ids = [`${ids[0]}${ids[2]++}-`, 0, 0]
+}

package/src/pages/ContentBlockRenderer.vue

@@ -38,7 +38,7 @@ const mainTable = computed(() => props.block.type === 'Table' && props.block.key
   <div v-else-if="props.block.type === 'Infolist'" data-slot="infolist" class="contents">
     <SchemaRenderer
       :components="(props.block as InfolistBlock).components"
-      :columns="{ default: 1, lg: 2 }"
+      :columns="(props.block as InfolistBlock).columns ?? { default: 1, lg: 2 }"
     />
   </div>
   <SchemaRenderer

package/src/standalone/AlfakitComponent.vue

@@ -21,6 +21,7 @@ import {
   type AlfakitContextValue,
   type AnyComponent,
 } from '../context'
+import { startIdScope } from '../lib/hydration'
 import { cn } from '../lib/utils'
 import ContentBlockRenderer from '../pages/ContentBlockRenderer.vue'
 import AlfakitToaster from './AlfakitToaster.vue'
@@ -59,6 +60,9 @@ defineSlots<{
   default?: (props: { blocks: ContentBlock[]; page: StandaloneComponentSchema }) => unknown
 }>()
 
+// Reka's ids inside the component don't depend on the host page's (W-V2-13).
+startIdScope()
+
 const parent = useOptionalAlfakit()
 const inertiaPage = usePage()
 

package/src/standalone/runtime.ts

@@ -95,20 +95,8 @@ export function createStandaloneContext(
 
 // ---------------------------------------------------------------- Toaster ownership
 
-let toasters = 0
-
-/** An `<AlfakitToaster>` (or the component that took the role) is mounted; returns a release. */
-export function claimToaster(): () => void {
-  toasters++
-
-  return () => {
-    toasters--
-  }
-}
-
-export function hasToaster(): boolean {
-  return toasters > 0
-}
+// In a module of its own: the starter kit header components check it without loading this one.
+export { claimToaster, hasToaster } from './toaster-claims'
 
 // ---------------------------------------------------------------- Flashed notifications
 

package/src/standalone/toaster-claims.ts

@@ -0,0 +1,16 @@
+// Who renders AlfaKit's toaster on the page: `<AlfakitToaster>`, `AlfakitRoot`, the first
+// standalone component or the starter kit header components on the host's own pages.
+let toasters = 0
+
+/** An `<AlfakitToaster>` (or the component that took the role) is mounted; returns a release. */
+export function claimToaster(): () => void {
+  toasters++
+
+  return () => {
+    toasters--
+  }
+}
+
+export function hasToaster(): boolean {
+  return toasters > 0
+}

package/src/starter-kit/widgets/WidgetShell.vue

@@ -1,9 +1,21 @@
 <script setup lang="ts">
-import { starterKitWidgetsPage, type PanelSchema } from '@alfakit/core'
+import {
+  isAlfakitPage,
+  overlayPlacementDirection,
+  resolveToastPosition,
+  STARTER_KIT_TOASTER_ID,
+  starterKitWidgetsPage,
+  type PanelSchema,
+} from '@alfakit/core'
+import { usePage } from '@inertiajs/vue3'
 import { ConfigProvider } from 'reka-ui'
-import { computed, toRef, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRef, watch } from 'vue'
+import { setToasterId } from '../../components/notifications/flash-toasts'
+import Toaster from '../../components/ui/Toaster.vue'
 import TooltipProvider from '../../components/ui/TooltipProvider.vue'
 import { provideAlfakit, provideStandalone } from '../../context'
+import { ensureFlashToasts } from '../../standalone/runtime'
+import { claimToaster, hasToaster } from '../../standalone/toaster-claims'
 import { widgetsAlfakitContext } from './use-widgets'
 
 /**
@@ -26,6 +38,58 @@ watch(
   },
   { immediate: true, flush: 'sync' },
 )
+
+/**
+ * On the host's own pages no AlfaKit toaster is mounted, so the first loaded header
+ * component renders one: the push toggle's and the PWA's messages show there too (W-S1-03).
+ * AlfaKit pages (`AlfakitRoot`) and standalone components claim it themselves; the check
+ * runs after every component mounted, and again after each visit.
+ */
+const inertiaPage = usePage()
+const alfakitPage = computed(() => isAlfakitPage(inertiaPage.props))
+const ownsToaster = ref(false)
+const placement = computed(() =>
+  overlayPlacementDirection(props.panel.localization?.direction ?? 'ltr', true),
+)
+let releaseToaster: (() => void) | null = null
+let check = 0
+
+function releaseHostToaster(): void {
+  check++
+
+  if (releaseToaster) {
+    releaseToaster()
+    setToasterId(undefined)
+  }
+
+  releaseToaster = null
+  ownsToaster.value = false
+}
+
+function claimHostToaster(): void {
+  releaseHostToaster()
+
+  if (alfakitPage.value) return
+
+  const current = check
+
+  queueMicrotask(() => {
+    if (current !== check || hasToaster()) return
+
+    releaseToaster = claimToaster()
+    ownsToaster.value = true
+    // As `<AlfakitToaster>`: Alfakit's toasts and flashed notifications go to this one.
+    setToasterId(STARTER_KIT_TOASTER_ID)
+    ensureFlashToasts(context.registry)
+  })
+}
+
+onMounted(() => {
+  claimHostToaster()
+  watch(alfakitPage, claimHostToaster)
+})
+
+onUnmounted(releaseHostToaster)
 </script>
 
 <template>
@@ -34,4 +98,15 @@ watch(
       <slot />
     </TooltipProvider>
   </ConfigProvider>
+  <!-- In the body, not in the header (a header with a backdrop filter would hold its fixed
+       position), placed in the document's direction as on AlfaKit pages. -->
+  <Teleport v-if="ownsToaster" to="body">
+    <Toaster
+      :id="STARTER_KIT_TOASTER_ID"
+      :position="resolveToastPosition(props.panel.toastPosition, placement)"
+      :dir="placement"
+      rich-colors
+      close-button
+    />
+  </Teleport>
 </template>