@alfakit/react 0.1.11 → 0.1.13

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/create-alfakit.tsx

@@ -32,6 +32,7 @@ import { Direction } from 'radix-ui'
 import {
   StrictMode,
   createElement,
+  useEffect,
   useLayoutEffect,
   type ReactElement,
   type ReactNode,
@@ -51,6 +52,7 @@ import { discoverComponents } from './lib/discovery'
 import { preloadIcons } from './lib/icons'
 import { AlfakitPage } from './pages/page'
 import { builtInComponents, createDefaultRegistry } from './registry'
+import { claimToaster } from './standalone/toaster-claims'
 
 /**
  * Rendered inside Inertia's page tree, so it follows the current page: the reading
@@ -91,6 +93,10 @@ export function AlfakitRoot({
     applyPanelTheme(panel)
   }, [panel])
 
+  // This root renders the toaster: starter kit header components and standalone components
+  // on the same page don't mount a second one.
+  useEffect(() => claimToaster(), [])
+
   return (
     <Direction.Provider dir={direction}>
       <TooltipProvider delayDuration={0}>

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>
       )

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-loaded.tsx

@@ -1,12 +1,15 @@
 import {
   ActionRunner,
   ComponentRegistry,
+  STARTER_KIT_TOASTER_ID,
   Translator,
   initials,
   isAlfakitPage,
   loadStarterKitPanel,
   loadedStarterKitPanel,
   openRequestedStarterKitSearch,
+  overlayPlacementDirection,
+  resolveToastPosition,
   showsLanguageSwitcher,
   starterKitCopilot,
   starterKitPanelLocale,
@@ -17,12 +20,15 @@ import {
   tenantNameText,
   type PanelSchema,
   type StarterKitWidgets,
+  type ToastPosition,
 } from '@alfakit/core'
 import { router, usePage } from '@inertiajs/react'
 import { ChevronsUpDownIcon, LanguagesIcon, PlusIcon } from 'lucide-react'
 import { Direction } from 'radix-ui'
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
 import { AiCopilot } from '../components/ai/copilot'
+import { setToasterId } from '../components/notifications/flash-toasts'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
 import { RealtimeNotifications } from '../components/notifications/realtime-notifications'
 import { GlobalSearch } from '../components/panel/global-search'
@@ -38,16 +44,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../components/ui/dropdown-menu'
+import { Toaster } from '../components/ui/sonner'
 import { TooltipProvider } from '../components/ui/tooltip'
 import {
   AlfakitProvider,
   StandaloneProvider,
   useLocalization,
+  useRegistry,
   useT,
   type AlfakitContextValue,
   type AnyComponent,
 } from '../context'
 import { Icon } from '../lib/icons'
+import { ensureFlashToasts } from '../standalone/runtime'
+import { claimToaster, hasToaster } from '../standalone/toaster-claims'
 import {
   CopilotTrigger,
   LanguageSwitcherTrigger,
@@ -117,16 +127,89 @@ function useWidgetsPanel(source: StarterKitWidgets): PanelSchema | null {
   )
 }
 
+/**
+ * AlfaKit's toaster on a host page (as `<AlfakitToaster>`, without its standalone context):
+ * Alfakit's toasts go to it, and so do flashed notifications.
+ */
+function HostToaster({ position, dir }: { position?: ToastPosition; dir: 'ltr' | 'rtl' }) {
+  const registry = useRegistry()
+
+  useEffect(() => {
+    ensureFlashToasts(registry)
+  }, [registry])
+
+  useEffect(() => {
+    setToasterId(STARTER_KIT_TOASTER_ID)
+
+    return () => setToasterId(undefined)
+  }, [])
+
+  return (
+    <Toaster
+      id={STARTER_KIT_TOASTER_ID}
+      position={resolveToastPosition(position, dir)}
+      dir={dir}
+      richColors
+      closeButton
+    />
+  )
+}
+
+/**
+ * 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's effects, and again after each visit.
+ */
+function useOwnsHostToaster(): boolean {
+  const alfakitPage = isAlfakitPage(usePage().props)
+  const [owns, setOwns] = useState(false)
+
+  useEffect(() => {
+    if (alfakitPage) return undefined
+
+    let release: (() => void) | null = null
+    let cancelled = false
+
+    queueMicrotask(() => {
+      if (cancelled || hasToaster()) return
+
+      release = claimToaster()
+      setOwns(true)
+    })
+
+    return () => {
+      cancelled = true
+      release?.()
+      setOwns(false)
+    }
+  }, [alfakitPage])
+
+  return owns && !alfakitPage
+}
+
 function WidgetShell({ panel, children }: { panel: PanelSchema; children: ReactNode }) {
   const context = useWidgetsContext(panel)
   const page = useMemo(() => starterKitWidgetsPage(), [])
+  const ownsToaster = useOwnsHostToaster()
+  const direction = panel.localization?.direction ?? 'ltr'
 
   return (
     <AlfakitProvider value={context}>
       <StandaloneProvider value={{ panel, page }}>
-        <Direction.Provider dir={panel.localization?.direction ?? 'ltr'}>
+        <Direction.Provider dir={direction}>
           <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
         </Direction.Provider>
+        {/* 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. */}
+        {ownsToaster &&
+          createPortal(
+            <HostToaster
+              position={panel.toastPosition}
+              dir={overlayPlacementDirection(direction, true)}
+            />,
+            document.body,
+          )}
       </StandaloneProvider>
     </AlfakitProvider>
   )