@alfakit/react 0.1.8 → 0.1.10

package/src/components/table/spreadsheet.tsx

@@ -539,14 +539,25 @@ export function Spreadsheet({ table, token, component, onClose }: SpreadsheetPro
           <DialogHeader>
             <DialogTitle>{t('table.spreadsheet.paste_title', {}, 'Paste cells')}</DialogTitle>
             <DialogDescription>
-              {choice(
-                'table.spreadsheet.paste_summary',
-                preview?.plan.changes.length ?? 0,
-                {},
-                ':count cell will change|:count cells will change',
+              {/* One line per count: translations can't join two sentences. */}
+              <span className="block">
+                {choice(
+                  'table.spreadsheet.paste_summary',
+                  preview?.plan.changes.length ?? 0,
+                  {},
+                  ':count cell will change|:count cells will change',
+                )}
+              </span>
+              {(preview?.plan.skipped ?? 0) > 0 && (
+                <span className="block" data-slot="spreadsheet-paste-skipped">
+                  {choice(
+                    'table.spreadsheet.paste_skipped',
+                    preview?.plan.skipped ?? 0,
+                    {},
+                    ':count read-only cell is skipped|:count read-only cells are skipped',
+                  )}
+                </span>
               )}
-              {(preview?.plan.skipped ?? 0) > 0 &&
-                ` ${choice('table.spreadsheet.paste_skipped', preview?.plan.skipped ?? 0, {}, ':count read-only cell is skipped|:count read-only cells are skipped')}`}
             </DialogDescription>
           </DialogHeader>
           <div data-slot="spreadsheet-paste" className="flex flex-col gap-3">

package/src/components/translation-manager/translation-manager.tsx

@@ -330,7 +330,7 @@ function TranslationManagerView({ schema }: { schema: TranslationManagerSchema }
                 <tr>
                   <th
                     scope="col"
-                    className="bg-muted sticky start-0 z-10 min-w-56 border-b px-3 py-2 text-start font-medium"
+                    className="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/tooltip.tsx

@@ -20,7 +20,16 @@ function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
 }
 
 function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  // With asChild the child keeps its own data-slot (an action's `button`, which the
+  // button-shape and touch-target CSS select).
+  // (The key must be left out, not set to undefined: Slot passes it on and the child's own
+  // `{...props}` would erase its data-slot.)
+  return (
+    <TooltipPrimitive.Trigger
+      {...(props.asChild ? {} : { 'data-slot': 'tooltip-trigger' })}
+      {...props}
+    />
+  )
 }
 
 function TooltipContent({

package/src/components/widgets/stats-overview.tsx

@@ -71,7 +71,9 @@ function StatCard({ stat }: { stat: StatSchema }) {
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex flex-col gap-1">
-          <span className="text-muted-foreground text-sm font-medium">{stat.label}</span>
+          <span className="text-muted-foreground text-sm font-medium">
+            <bdi>{stat.label}</bdi>
+          </span>
           {(stat.value === null || stat.value === '') && stat.placeholder ? (
             <span
               className="text-muted-foreground text-2xl font-semibold tracking-tight"
@@ -86,7 +88,7 @@ function StatCard({ stat }: { stat: StatSchema }) {
                 stat.color && textColorClasses[stat.color],
               )}
             >
-              {stat.value}
+              <bdi>{stat.value}</bdi>
             </span>
           )}
           {stat.description && (
@@ -101,7 +103,8 @@ function StatCard({ stat }: { stat: StatSchema }) {
               {stat.descriptionIcon && stat.descriptionIconPosition !== 'after' && (
                 <Icon name={stat.descriptionIcon} className="size-3.5" />
               )}
-              {stat.description}
+              {/* Mixed-direction text (a Latin "-3% this month" in Arabic) keeps its order. */}
+              <bdi>{stat.description}</bdi>
               {stat.descriptionIcon && stat.descriptionIconPosition === 'after' && (
                 <Icon name={stat.descriptionIcon} className="size-3.5" />
               )}

package/src/layouts/top-nav-layout.tsx

@@ -118,7 +118,7 @@ function TopNavMenu({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="min-w-48">
         {items.map((item) => (
-          <DropdownMenuItem key={item.label} asChild>
+          <DropdownMenuItem key={item.url ?? item.label} asChild>
             <Link
               {...extraProps(item.extraAttributes, cn('w-full', item.active && 'font-medium'))}
               href={item.url ?? '#'}
@@ -150,7 +150,7 @@ function TopNavGroup({ group }: { group: NavigationGroupSchema }) {
     return (
       <>
         {group.items.map((item) => (
-          <TopNavLink key={item.label} item={item} />
+          <TopNavLink key={item.url ?? item.label} item={item} />
         ))}
       </>
     )
@@ -181,7 +181,7 @@ function MobileNav({ onNavigate }: { onNavigate: () => void }) {
             .flatMap((item) => [item, ...(item.children ?? [])])
             .map((item) => (
               <Link
-                key={item.label}
+                key={item.url ?? item.label}
                 href={item.url ?? '#'}
                 onClick={onNavigate}
                 data-active={item.active ? 'true' : undefined}

package/src/pages/page.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@alfakit/core'
 import {
   applyBodyAttributes,
+  customPageProps,
   hasRelationManagerTabs,
   isLazyPlaceholder,
   openDefaultAction,
@@ -102,9 +103,12 @@ export function AlfakitPage() {
     return (
       <PageActionProvider value={{ token: page.token, component: 'page' }}>
         <Head title={title} />
-        <PageShell page={page}>
-          <Custom {...page.view.props} page={page} />
-        </PageShell>
+        {/* The 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. */}
+        <Custom
+          {...customPageProps(page.view.props, props as Record<string, unknown>)}
+          page={page}
+        />
       </PageActionProvider>
     )
   }

package/src/standalone/alfakit-component.tsx

@@ -8,7 +8,7 @@ import {
 } from '@alfakit/core'
 import { usePage } from '@inertiajs/react'
 import { Direction } from 'radix-ui'
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from 'react'
 import { PageActionProvider } from '../components/actions/action-context'
 import { ActionList } from '../components/actions/action-list'
 import { ActionModals } from '../components/actions/action-modals'
@@ -55,6 +55,9 @@ export interface AlfakitComponentProps {
  * <AlfakitComponent component={orders} className="max-w-4xl" />
  * ```
  */
+// `useLayoutEffect` warns during a server render, where nothing registers anyway.
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 export function AlfakitComponent({
   component,
   components,
@@ -83,8 +86,18 @@ export function AlfakitComponent({
     const refresh = (targets: string[]) => state.refresh(targets)
 
     if (parent) {
+      // Inside a panel page: the panel's registry and translator, but this component's own
+      // action runner, so its actions post to its own endpoints with its own token (sharing
+      // the panel's runner sent them to the panel's endpoint: 403).
+      const own = createStandaloneContext(
+        { action: component.endpoints.action, modal: component.endpoints.modal },
+        components,
+        poll,
+      )
+
       return {
         ...parent,
+        actions: own.actions,
         registry: createStandaloneRegistry(components, parent.registry),
         poll,
         refresh,
@@ -128,7 +141,9 @@ export function AlfakitComponent({
   // Partial reloads (sorting, paging, inline edits) request this component's own prop.
   const propName = findStandalonePropName(props, component)
 
-  useEffect(() => registerStandaloneProp(propName ?? null), [propName])
+  // A layout effect runs before the children's effects: a `deferLoading()` table's first
+  // reload must already ask for this component's prop, not the panel `page` prop.
+  useIsomorphicLayoutEffect(() => registerStandaloneProp(propName ?? null), [propName])
 
   useEffect(() => {
     void state.loadLazy(component)
@@ -201,7 +216,7 @@ export function AlfakitComponent({
         {footer}
       </div>
       <ActionModals />
-      {ownsToaster && <AlfakitToaster claimed />}
+      {ownsToaster && <AlfakitToaster claimed dir={direction} />}
     </PageActionProvider>
   )
 

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()
 }
 
 /**

package/src/starter-kit/navigation.ts

@@ -1,8 +1,10 @@
 import {
   starterKitNavigation,
   toStarterKitNavGroups,
+  toStarterKitUserMenuItems,
   type StarterKitNavGroup,
   type StarterKitNavigationSchema,
+  type StarterKitUserMenuItem,
 } from '@alfakit/core'
 import { usePage } from '@inertiajs/react'
 import { useMemo } from 'react'
@@ -12,6 +14,11 @@ export interface AlfakitNavigation {
   navigation: StarterKitNavigationSchema | null
   /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */
   groups: StarterKitNavGroup[]
+  /**
+   * The panel's user menu links (`userMenuItems()`, Billing's entry…) for the kit's user
+   * menu: `<AlfakitUserMenuItems />` renders them with the app's dropdown items.
+   */
+  userMenuItems: StarterKitUserMenuItem[]
 }
 
 /**
@@ -28,7 +35,11 @@ export function useAlfakitNavigation(panelId?: string): AlfakitNavigation {
   const navigation = starterKitNavigation(props, panelId)
 
   return useMemo(
-    () => ({ navigation, groups: toStarterKitNavGroups(navigation?.groups) }),
+    () => ({
+      navigation,
+      groups: toStarterKitNavGroups(navigation?.groups),
+      userMenuItems: toStarterKitUserMenuItems(navigation?.userMenu),
+    }),
     [navigation],
   )
 }

package/src/starter-kit/starter-kit.tsx

@@ -16,6 +16,7 @@ import {
 import { usePage } from '@inertiajs/react'
 import { useEffect, useState, type ComponentType, type ReactNode } from 'react'
 import { setToasterId, showToast } from '../components/notifications/flash-toasts'
+import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
 import { Slot } from '../components/panel/slot'
 import {
   AlfakitProvider,
@@ -181,7 +182,15 @@ export function AlfakitStarterKitRoot({
         lang={panel?.localization?.tag}
         className="contents"
       >
-        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>{children}</AlfakitRoot>
+        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>
+          {children}
+          {/* The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't
+              render: float it in the corner instead (nothing without `alfakitDebug`). The corner is the
+              document's right: the kit's sidebar stays on the left in a right-to-left panel language. */}
+          <div data-slot="starter-kit-debug-panel" className="fixed right-16 bottom-16 z-40">
+            <DebugPanelSlot />
+          </div>
+        </AlfakitRoot>
       </div>
     </AlfakitProvider>
   )

package/src/styles.css

@@ -289,7 +289,8 @@
 }
 /* Rich editor mentions, merge tags and custom blocks (RichEditor extensions) */
 .alfakit-prose :where(.alfakit-mention):not(:where(.alfakit-not-prose *)) {
-  @apply bg-primary/10 text-primary rounded px-1 font-medium;
+  /* Full-contrast text on the tint (WCAG AA); the ring marks it as a mention. */
+  @apply bg-primary/10 text-foreground ring-primary/30 rounded px-1 font-medium ring-1;
 }
 .alfakit-prose :where(.alfakit-merge-tag):not(:where(.alfakit-not-prose *)) {
   @apply bg-muted text-muted-foreground rounded px-1 font-mono text-xs;