@alfakit/react 0.1.11 → 0.1.12

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

@@ -152,11 +152,15 @@ export function useRichEditorExtensions(
 
     if (!result || !editor || editor.isDestroyed) return
 
-    editor
-      .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 } = editor.state
+    const chain = editor.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/wizard.tsx

@@ -21,6 +21,7 @@ import { cn } from '../../lib/utils'
 import { ActionButton } from '../actions/action-button'
 import { usePageActionContext } from '../actions/action-context'
 import { useOptionalFormStore } from '../form/form-context'
+import { useFieldActionContext } from '../schema/field-actions'
 import { SchemaRenderer } from '../schema/schema-renderer'
 import { Button } from '../ui/button'
 import { DeferredSchema } from './deferred'
@@ -52,6 +53,9 @@ export function WizardComponent({ component }: { component: WizardSchema }) {
     if (stepQueryKey) persistWizardStep(current, stepQueryKey)
   }, [current, stepQueryKey])
   const store = useOptionalFormStore()
+  // Inside a form the submit action runs as a field action, so `$get` / `$set` work (W-S2-09).
+  const fieldContext = useFieldActionContext(component)
+  const submitContext = store ? fieldContext : actionContext
 
   // An action modal around this wizard shows its submit button on the last step only.
   useEffect(() => {
@@ -229,7 +233,7 @@ export function WizardComponent({ component }: { component: WizardSchema }) {
             </Button>
           )
         ) : component.submitAction ? (
-          <ActionButton action={component.submitAction} context={actionContext} />
+          <ActionButton action={component.submitAction} context={submitContext} />
         ) : component.submitActionHtml ? (
           <div
             data-slot="wizard-submit"

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

@@ -43,6 +43,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/notifications/notifications-menu.tsx

@@ -19,7 +19,7 @@ import { Button } from '../ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import { ScrollArea } from '../ui/scroll-area'
 import { Spinner } from '../ui/spinner'
-import { NotificationActionButton } from './flash-toasts'
+import { NotificationActionButton, toastOptions } from './flash-toasts'
 
 export interface NotificationsMenuProps {
   /**
@@ -104,8 +104,8 @@ export function NotificationsMenu({ variant = 'topbar' }: NotificationsMenuProps
     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())
   }
 
   const pushLabel =

package/src/components/panel/pwa.tsx

@@ -14,6 +14,7 @@ import { toast } from 'sonner'
 import { usePanel, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { Icon } from '../../lib/icons'
+import { toastOptions } from '../notifications/flash-toasts'
 import { DropdownMenuItem } from '../ui/dropdown-menu'
 
 const UPDATE_TOAST_ID = 'alfakit-pwa-update'
@@ -27,7 +28,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 }),
     )
   }
 }
@@ -49,11 +50,14 @@ export function PwaManager() {
   useEffect(() => {
     if (!updateAvailable) return
 
-    toast(t('pwa.update_available', {}, 'A new version is available'), {
-      id: UPDATE_TOAST_ID,
-      duration: Infinity,
-      action: { label: t('pwa.reload', {}, 'Reload'), onClick: () => applyPwaUpdate() },
-    })
+    toast(
+      t('pwa.update_available', {}, 'A new version is available'),
+      toastOptions({
+        id: UPDATE_TOAST_ID,
+        duration: Infinity,
+        action: { label: t('pwa.reload', {}, 'Reload'), onClick: () => applyPwaUpdate() },
+      }),
+    )
   }, [updateAvailable, t])
 
   return null
@@ -74,15 +78,25 @@ export function PwaMenuItems() {
       state.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(),
+      )
     }
   }
 

package/src/components/panel/shortcuts-overlay.tsx

@@ -221,7 +221,7 @@ export function ShortcutsOverlay({
                               aria-label={t(
                                 'shortcuts.reset_label',
                                 { label: item.label },
-                                `Restore the default shortcut for ${item.label}`,
+                                `Reset the shortcut for ${item.label}`,
                               )}
                               onClick={() => void save(item.id, null)}
                             >

package/src/components/table/cells.tsx

@@ -242,7 +242,9 @@ function ImageCell({ column, cell }: CellProps) {
         <span
           data-slot="image-remaining"
           className={cn(
-            'text-muted-foreground ms-1',
+            'text-muted-foreground',
+            // The last image keeps the stack's negative end margin (W-S3-03).
+            schema.stacked && usesDefaultImageStack(schema) ? 'ms-3' : 'ms-1',
             remainingTextSizeClass(schema.limitedRemainingTextSize),
           )}
         >

package/src/pages/page.tsx

@@ -281,7 +281,7 @@ export function ContentBlockRenderer({ block }: { block: ContentBlock }) {
         <div data-slot="infolist" className="contents">
           <SchemaRenderer
             components={(block as InfolistBlock).components}
-            columns={{ default: 1, lg: 2 }}
+            columns={(block as InfolistBlock).columns ?? { default: 1, lg: 2 }}
           />
         </div>
       )