@alfakit/react 0.1.0 → 0.1.2

package/src/components/fields/file-upload.tsx

@@ -6,10 +6,10 @@ import {
   editableImageName,
   fetchEditableImage,
   fieldMemory,
+  fileManagerSize,
   filesFromClipboard,
   fileUploadAccept,
   fileUploadPaths,
-  formatBytes,
   insertUploadedFile,
   moveRepeaterItem,
   panelUploadOptions,
@@ -29,7 +29,7 @@ import {
   XIcon,
 } from 'lucide-react'
 import { useRef, useState, type ClipboardEvent, type DragEvent } from 'react'
-import { useChoice, usePanel, useT } from '../../context'
+import { useChoice, useFormatter, usePanel, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { cn } from '../../lib/utils'
 import { useField, useFormStore } from '../form/form-context'
@@ -47,6 +47,7 @@ interface LocalFile extends UploadedFile {
 
 export function FileUploadField({ component }: { component: FileUploadSchema }) {
   const t = useT()
+  const formatter = useFormatter()
   const choice = useChoice()
   const panel = usePanel()
   const { value, setValue, error, id, disabled, readOnly, aria } = useField<
@@ -375,7 +376,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
         variant={circle ? 'secondary' : 'ghost'}
         size="icon-xs"
         className={cn(circle && 'rounded-full shadow')}
-        aria-label={t('remove', {}, 'Remove')}
+        aria-label={t('file_upload.remove', { name: file.name }, 'Remove :name')}
         onClick={() => {
           if (file.error || file.progress !== undefined) {
             releasePreview(file.preview)
@@ -467,7 +468,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                           : file.progress !== undefined && !file.error
                             ? (component.uploadingMessage ?? t('form.uploading', {}, 'Uploading…'))
                             : file.size
-                              ? formatBytes(file.size)
+                              ? fileManagerSize(file.size, formatter)
                               : file.temporary
                                 ? t('form.uploading', {}, 'Pending')
                                 : '')}
@@ -486,7 +487,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                         type="button"
                         variant="ghost"
                         size="icon-xs"
-                        aria-label={t('form.move_up', {}, 'Move up')}
+                        aria-label={t('file_upload.move_up', { name: file.name }, 'Move :name up')}
                         disabled={index === 0}
                         onClick={() => move(index, index - 1)}
                       >
@@ -496,7 +497,11 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                         type="button"
                         variant="ghost"
                         size="icon-xs"
-                        aria-label={t('form.move_down', {}, 'Move down')}
+                        aria-label={t(
+                          'file_upload.move_down',
+                          { name: file.name },
+                          'Move :name down',
+                        )}
                         disabled={index === files.length - 1}
                         onClick={() => move(index, index + 1)}
                       >
@@ -510,7 +515,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                       variant={circle ? 'secondary' : 'ghost'}
                       size="icon-xs"
                       className={cn(circle && 'rounded-full shadow')}
-                      aria-label={t('image_editor.title', {}, 'Edit image')}
+                      aria-label={t('file_upload.edit', { name: file.name }, 'Edit :name')}
                       title={t('image_editor.title', {}, 'Edit image')}
                       data-action="edit-image"
                       onClick={() => void editExisting(file)}
@@ -524,7 +529,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                         href={uploadedFileLinks(file).open}
                         target="_blank"
                         rel="noopener noreferrer"
-                        aria-label={`${t('open', {}, 'Open')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`}
+                        aria-label={`${t('file_upload.open', { name: file.name }, 'Open :name')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`}
                       >
                         <ExternalLinkIcon />
                       </a>
@@ -535,7 +540,11 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                       <a
                         href={uploadedFileLinks(file).download}
                         download
-                        aria-label={t('download', {}, 'Download')}
+                        aria-label={t(
+                          'file_upload.download',
+                          { name: file.name },
+                          'Download :name',
+                        )}
                       >
                         <DownloadIcon />
                       </a>
@@ -596,7 +605,9 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                 <span className="text-muted-foreground text-xs">
                   {[
                     component.acceptedFileTypes?.join(', '),
-                    component.maxSize ? `≤ ${formatBytes(component.maxSize * 1024, 0)}` : null,
+                    component.maxSize
+                      ? `≤ ${fileManagerSize(component.maxSize * 1024, formatter)}`
+                      : null,
                     component.minFiles
                       ? choice(
                           'form.min_files',

package/src/components/fields/one-time-code-input.tsx

@@ -25,7 +25,6 @@ export function OneTimeCodeInputField({ component }: { component: OneTimeCodeInp
         inputMode="numeric"
         autoComplete="one-time-code"
         pattern="[0-9]*"
-        maxLength={component.length}
         value={value ?? ''}
         onChange={(event) => {
           const code = oneTimeCodeDigits(event.target.value, component.length)
@@ -45,6 +44,7 @@ export function OneTimeCodeInputField({ component }: { component: OneTimeCodeInp
         required={component.required}
         autoFocus={component.autofocus}
         data-slot="one-time-code-input"
+        data-input=""
         {...aria}
         {...extraProps(
           component.extraInputAttributes,

package/src/components/fields/repeater-table.tsx

@@ -7,6 +7,7 @@ import type {
   TableColumnSchema,
 } from '@alfakit/core'
 import { resolveItemAction, tableColumnAlignmentClass, tableColumnCells } from '@alfakit/core'
+import type { CSSProperties } from 'react'
 import { useT } from '../../context'
 import type { VirtualListBinding } from '../../hooks/use-virtual-list'
 import { cn } from '../../lib/utils'
@@ -41,6 +42,16 @@ export interface RepeaterTableProps {
   extraActionsFor?: (index: number) => ActionSchema[] | undefined
 }
 
+/**
+ * A fixed `width()` (`9rem`, `120px`) is also the column's minimum, so the table scrolls
+ * sideways instead of squeezing its fields; percentages stay flexible.
+ */
+function columnWidthStyle(width?: string | null): CSSProperties | undefined {
+  if (!width) return undefined
+
+  return width.trim().endsWith('%') ? { width } : { width, minWidth: width }
+}
+
 /** Header cells shared by the Repeater and RepeatableEntry tables. */
 export function TableColumnHeaders({ columns }: { columns: TableColumnSchema[] }) {
   return (
@@ -49,7 +60,7 @@ export function TableColumnHeaders({ columns }: { columns: TableColumnSchema[] }
         <th
           key={`${column.name ?? 'column'}-${index}`}
           scope="col"
-          style={column.width ? { width: column.width } : undefined}
+          style={columnWidthStyle(column.width)}
           className={cn(
             'text-muted-foreground px-3 py-2 text-xs font-medium',
             tableColumnAlignmentClass(column),

package/src/components/fields/select.tsx

@@ -65,7 +65,9 @@ export function SelectField({ component }: { component: SelectSchema }) {
             className="border-input dark:bg-input/30 focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
           >
             {component.selectablePlaceholder && (
-              <option value="">{component.placeholder ?? ''}</option>
+              <option value="">
+                {component.placeholder ?? t('select_option', {}, 'Select an option')}
+              </option>
             )}
             {component.options.map((option) =>
               isOptionGroup(option) ? (
@@ -103,7 +105,9 @@ export function SelectField({ component }: { component: SelectSchema }) {
               aria-readonly={readOnly || undefined}
               className="w-full"
             >
-              <SelectValue placeholder={component.placeholder ?? ''} />
+              <SelectValue
+                placeholder={component.placeholder ?? t('select_option', {}, 'Select an option')}
+              />
             </SelectTrigger>
             <SelectContent>
               {component.selectablePlaceholder &&
@@ -411,7 +415,7 @@ function ComboboxSelect({
             error && 'border-destructive',
           )}
         >
-          <span className="flex flex-1 flex-wrap items-center gap-1 text-start">
+          <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
             {selected.length === 0 && (
               <span className="text-muted-foreground">
                 {component.placeholder ?? t('select_option', {}, 'Select an option')}

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

@@ -322,7 +322,7 @@ export function FileManagerView({ schema, onChoose, onCancel }: FileManagerViewP
         )}
         <nav
           aria-label={tt('breadcrumb', {}, 'Folder path')}
-          className="min-w-0 flex-1"
+          className="min-w-0 flex-[1_1_12rem]"
           data-slot="file-manager-breadcrumb"
         >
           <ol className="flex min-w-0 flex-wrap items-center gap-1 text-sm">

package/src/components/form/form-block.tsx

@@ -13,6 +13,7 @@ import {
   registerFormSubmitter,
   registerPageForm,
   resolvePartialProps,
+  shouldResyncForm,
   wizardProgressStore,
 } from '@alfakit/core'
 import { router } from '@inertiajs/react'
@@ -93,6 +94,10 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
   const latestBlock = useRef(block)
   const submittedBlock = useRef<FormBlockSchema | null>(null)
   const refillPending = useRef(false)
+  // Another action succeeded and its new block has not arrived yet.
+  const resyncPending = useRef(false)
+  // The block when the latest non-GET visit started, to tell whether its response arrived.
+  const visitBlock = useRef<FormBlockSchema | null>(null)
 
   useEffect(() => {
     latestBlock.current = block
@@ -101,6 +106,12 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
       refillPending.current = false
       store.fill(block)
     }
+
+    if (resyncPending.current) {
+      resyncPending.current = false
+
+      if (!store.isDirty) store.fill(block)
+    }
   }, [block, store])
 
   const actions: ActionSchema[] = useMemo(
@@ -152,11 +163,24 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
       if (submitting.current && !submitVisit.current && visit.method !== 'get') {
         submitVisit.current = visit.id
       }
+
+      if (visit.method !== 'get') visitBlock.current = latestBlock.current
     })
 
     const offSuccess = router.on('success', (event) => {
       const id = submitVisit.current
 
+      // Another action changed the record: show the server's new form unless it holds edits.
+      if (!id && shouldResyncForm(pageFlash(event.detail.page), store)) {
+        if (latestBlock.current !== visitBlock.current) {
+          store.fill(latestBlock.current)
+        } else {
+          resyncPending.current = true
+        }
+
+        return
+      }
+
       if (!id || (event.detail.visitId ?? id) !== id) return
 
       // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.

package/src/components/form/form-context.tsx

@@ -1,5 +1,5 @@
 import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'
-import { fieldAria } from '@alfakit/core'
+import { fieldAria, fieldDomId } from '@alfakit/core'
 import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react'
 import { useStore, useStoreSelector } from '../../hooks/use-store'
 
@@ -65,10 +65,7 @@ export function useField<T = unknown>(field: BaseField): FieldBinding<T> {
   const setValue = useCallback((next: T) => store.setValue(path, next), [store, path])
   const blur = useCallback(() => store.blur(path), [store, path])
 
-  const id = useMemo(
-    () => field.id ?? `alfakit-${path.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
-    [field.id, path],
-  )
+  const id = useMemo(() => field.id ?? fieldDomId(store.idPrefix, path), [field.id, store, path])
 
   const aria = useMemo(
     () =>

package/src/components/layout/fused-group.tsx

@@ -25,7 +25,11 @@ export function FusedGroupComponent({ component }: { component: FusedGroupSchema
       {...extraProps(component.extraAttributes, 'flex flex-col gap-1.5')}
     >
       {component.label && (
-        <span id={labelId} className="text-sm leading-none font-medium select-none">
+        <span
+          id={labelId}
+          data-slot="label"
+          className="text-sm leading-none font-medium select-none"
+        >
           {component.label}
         </span>
       )}

package/src/components/layout/tabs.tsx

@@ -1,30 +1,51 @@
 import type { TabSchema, TabsSchema } from '@alfakit/core'
-import { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'
+import {
+  componentHasErrors,
+  readPersisted,
+  schemaGapClass,
+  tabFromQuery,
+  tabQueryValue,
+  tabToReveal,
+  writePersisted,
+} from '@alfakit/core'
 import { usePage } from '@inertiajs/react'
 import { useEffect, useState } from 'react'
+import { useT } from '../../context'
 import { useHydrated } from '../../hooks/use-hydrated'
+import { useStoreSelector } from '../../hooks/use-store'
 import { extraProps } from '../../lib/attributes'
 import { badgeColorClasses, colorClass } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
+import { useOptionalFormStore } from '../form/form-context'
 import { SchemaRenderer } from '../schema/schema-renderer'
 import { Badge } from '../ui/badge'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
 import { DeferredSchema, useDeferredBadge } from './deferred'
 
+// Used when tabs render outside a form. Module-level so the snapshot stays stable.
+const NO_ERRORS: Record<string, string[]> = {}
+const NO_FORM_STORE = {
+  get: () => ({ errors: NO_ERRORS }),
+  subscribe: () => () => {},
+}
+
+const TAB_INVALID_CLASSES =
+  'text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive'
+
 export function TabsComponent({ component }: { component: TabsSchema }) {
   const tabs = component.schema ?? []
   // The page URL (not `window.location`) so the server renders the same tab as the browser.
   const url = usePage().url
+  // The tab's readable value (`?tab=billing-address`), or its key in links from older versions.
   const fromQuery = component.queryStringKey
-    ? new URL(url, 'http://localhost').searchParams.get(component.queryStringKey)
+    ? tabFromQuery(
+        tabs,
+        new URL(url, 'http://localhost').searchParams.get(component.queryStringKey),
+      )
     : null
   const [initial] = useState<string>(
-    () =>
-      tabs.find((tab) => tab.key === fromQuery)?.key ??
-      tabs[Math.max(0, component.activeTab - 1)]?.key ??
-      tabs[0]?.key ??
-      '',
+    () => fromQuery ?? tabs[Math.max(0, component.activeTab - 1)]?.key ?? tabs[0]?.key ?? '',
   )
 
   const persist = component.persistTab
@@ -36,6 +57,21 @@ export function TabsComponent({ component }: { component: TabsSchema }) {
     hydrated && persist && !fromQuery ? readPersisted(persist.key, persist.storage) : null
   const active = chosen ?? (stored && tabs.some((tab) => tab.key === stored) ? stored : initial)
 
+  // Tabs holding a field with a validation error are marked, and when a submit brings new
+  // errors while the open tab has none, the first tab with an error opens.
+  const t = useT()
+  const store = useOptionalFormStore()
+  const errors = useStoreSelector(store?.store ?? NO_FORM_STORE, (state) => state.errors)
+  const [seenErrors, setSeenErrors] = useState<Record<string, string[]>>({})
+
+  if (seenErrors !== errors) {
+    setSeenErrors(errors)
+
+    const reveal = tabToReveal(tabs, active, seenErrors, errors)
+
+    if (reveal !== null) setChosen(reveal)
+  }
+
   const changeTab = (value: string) => {
     setChosen(value)
 
@@ -45,10 +81,11 @@ export function TabsComponent({ component }: { component: TabsSchema }) {
   useEffect(() => {
     if (!component.queryStringKey || typeof window === 'undefined') return
 
+    const tab = tabs.find((item) => item.key === active)
     const url = new URL(window.location.href)
-    url.searchParams.set(component.queryStringKey, active)
+    url.searchParams.set(component.queryStringKey, tab ? tabQueryValue(tab) : active)
     window.history.replaceState(window.history.state, '', url)
-  }, [active, component.queryStringKey])
+  }, [active, component.queryStringKey, tabs])
 
   return (
     <Tabs
@@ -76,14 +113,32 @@ export function TabsComponent({ component }: { component: TabsSchema }) {
               : 'relative max-w-full overflow-x-auto',
         )}
       >
-        {tabs.map((tab) => (
-          <TabsTrigger key={tab.key} value={tab.key}>
-            {tab.icon && tab.iconPosition !== 'after' && <Icon name={tab.icon} />}
-            {tab.label}
-            {tab.icon && tab.iconPosition === 'after' && <Icon name={tab.icon} />}
-            <TabBadge tab={tab} />
-          </TabsTrigger>
-        ))}
+        {tabs.map((tab) => {
+          const invalid = componentHasErrors(tab, errors)
+
+          return (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              data-invalid={invalid || undefined}
+              className={invalid ? TAB_INVALID_CLASSES : undefined}
+            >
+              {tab.icon && tab.iconPosition !== 'after' && <Icon name={tab.icon} />}
+              {tab.label}
+              {tab.icon && tab.iconPosition === 'after' && <Icon name={tab.icon} />}
+              <TabBadge tab={tab} />
+              {invalid && (
+                <>
+                  <span
+                    aria-hidden="true"
+                    className="bg-destructive size-1.5 shrink-0 rounded-full"
+                  />
+                  <span className="sr-only">({t('translatable.has_errors')})</span>
+                </>
+              )}
+            </TabsTrigger>
+          )
+        })}
       </TabsList>
       {tabs.map((tab) => (
         <TabsContent

package/src/components/panel/global-search.tsx

@@ -133,7 +133,7 @@ export function GlobalSearch({ variant = 'topbar' }: { variant?: 'topbar' | 'sid
           </span>
         )}
         {hydrated && suffix?.type === 'keyBinding' && (
-          <kbd className="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline">
+          <kbd dir="ltr" className="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline">
             {formatKeyBinding(suffix.keyBinding)}
           </kbd>
         )}

package/src/components/panel/shortcut-keys.tsx

@@ -24,7 +24,10 @@ export function ShortcutKeys({ binding, className }: { binding: string; classNam
               {t('shortcuts.then', {}, 'then')}
             </span>
           )}
-          <kbd className="bg-muted text-muted-foreground rounded border px-1.5 font-mono text-[10px] leading-5">
+          <kbd
+            dir="ltr"
+            className="bg-muted text-muted-foreground rounded border px-1.5 font-mono text-[10px] leading-5"
+          >
             {step}
           </kbd>
         </span>

package/src/components/panel/tenant-menu.tsx

@@ -151,7 +151,7 @@ export function TenantMenu({ variant = 'sidebar' }: { variant?: 'sidebar' | 'top
             <DropdownMenuItem asChild>
               <Link href={tenancy.profileUrl} className="w-full">
                 <Icon name="alfakit::panels.tenant-menu.profile-button" fallback={SettingsIcon} />{' '}
-                {t('tenancy.profile', {}, 'Settings')}
+                {tenancy.profileLabel ?? t('tenancy.profile', {}, 'Settings')}
               </Link>
             </DropdownMenuItem>
           )
@@ -164,7 +164,7 @@ export function TenantMenu({ variant = 'sidebar' }: { variant?: 'sidebar' | 'top
             <DropdownMenuItem asChild>
               <Link href={tenancy.registrationUrl} className="w-full">
                 <Icon name="alfakit::panels.tenant-menu.registration-button" fallback={PlusIcon} />{' '}
-                {t('tenancy.register', {}, 'New')}
+                {tenancy.registrationLabel ?? t('tenancy.register', {}, 'New')}
               </Link>
             </DropdownMenuItem>
           )

package/src/components/table/cells.tsx

@@ -26,7 +26,7 @@ import {
 } from '@alfakit/core'
 import { router } from '@inertiajs/react'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
-import { createElement, useEffect, useRef, useState } from 'react'
+import { createElement, useEffect, useId, useRef, useState } from 'react'
 import { usePanel, useRegistry, useT } from '../../context'
 import { extraProps } from '../../lib/attributes'
 import {
@@ -587,6 +587,8 @@ function NativeSelectCell(props: CellProps) {
     cell.state === null || cell.state === undefined ? '' : String(cell.state),
   )
 
+  const errorId = useId()
+
   return (
     <span onClick={(event) => event.stopPropagation()}>
       <select
@@ -596,7 +598,9 @@ function NativeSelectCell(props: CellProps) {
           setValue(event.target.value)
           void update(event.target.value === '' ? null : event.target.value)
         }}
+        aria-label={column.label || column.name}
         aria-invalid={error ? true : undefined}
+        aria-describedby={error ? errorId : undefined}
         className={cn(
           'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]',
           error && 'border-destructive',
@@ -611,7 +615,11 @@ function NativeSelectCell(props: CellProps) {
             </option>
           ))}
       </select>
-      {error && <span className="text-destructive block text-xs">{error}</span>}
+      {error && (
+        <span id={errorId} className="text-destructive block text-xs">
+          {error}
+        </span>
+      )}
     </span>
   )
 }
@@ -626,6 +634,7 @@ function TextInputCell(props: CellProps) {
   const initial = cell.state === null || cell.state === undefined ? '' : String(cell.state)
   // `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.
   const grouped = Boolean(cell.prefix || cell.suffix)
+  const errorId = useId()
 
   const field = (
     <span className={cn('relative block', grouped && 'min-w-0 flex-1')}>
@@ -648,7 +657,9 @@ function TextInputCell(props: CellProps) {
         step={schema.step}
         inputMode={schema.inputMode as React.HTMLAttributes<HTMLInputElement>['inputMode']}
         disabled={Boolean(cell.disabled) || saving}
+        aria-label={column.label || column.name}
         aria-invalid={error ? true : undefined}
+        aria-describedby={error ? errorId : undefined}
         className={cn(
           'h-8 min-w-32',
           schema.prefixIcon && 'ps-8',
@@ -706,7 +717,11 @@ function TextInputCell(props: CellProps) {
       ) : (
         field
       )}
-      {error && <span className="text-destructive block text-xs">{error}</span>}
+      {error && (
+        <span id={errorId} className="text-destructive block text-xs">
+          {error}
+        </span>
+      )}
     </span>
   )
 }

package/src/components/table/grouping.tsx

@@ -14,6 +14,7 @@ import {
 import { ChevronDownIcon, ChevronRightIcon, LayersIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useT } from '../../context'
+import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
 import { Checkbox } from '../ui/checkbox'
@@ -183,7 +184,7 @@ export function GroupHeaderRow({
   selection?: { checked: boolean | 'indeterminate'; onChange: (checked: boolean) => void }
 }) {
   const t = useT()
-  const content = (
+  const text = (
     <span className="flex flex-col items-start">
       <span className="font-medium">{group.title}</span>
       {group.description && (
@@ -191,6 +192,19 @@ export function GroupHeaderRow({
       )}
     </span>
   )
+  // An enum group shows its `HasIcon` icon, in its `HasColor` colour, before the title.
+  const content = group.icon ? (
+    <span data-slot="table-group-title" className="flex items-center gap-2">
+      <Icon
+        name={group.icon}
+        className={cn('size-4 shrink-0', colorClass(textColorClasses, group.color, 'gray'))}
+        aria-hidden="true"
+      />
+      {text}
+    </span>
+  ) : (
+    text
+  )
 
   return (
     <TableRow data-slot="table-group" className="bg-muted/50 hover:bg-muted/50">

package/src/standalone/alfakit-toaster.tsx

@@ -1,5 +1,6 @@
-import { resolveToastPosition, type ToastPosition } from '@alfakit/core'
+import { resolveToastPosition, STARTER_KIT_TOASTER_ID, type ToastPosition } from '@alfakit/core'
 import { useEffect, useMemo } from 'react'
+import { setToasterId } from '../components/notifications/flash-toasts'
 import { Toaster } from '../components/ui/sonner'
 import { useOptionalAlfakit, type AlfakitContextValue } from '../context'
 import { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'
@@ -46,7 +47,25 @@ export function AlfakitToaster({
     ensureFlashToasts(context.registry)
   }, [context])
 
+  // Our own toaster gets an id, so a `<Toaster />` the app's layout already mounts (the
+  // starter kits have one) doesn't show every Alfakit toast a second time.
+  useEffect(() => {
+    if (!toaster) return undefined
+
+    setToasterId(STARTER_KIT_TOASTER_ID)
+
+    return () => setToasterId(undefined)
+  }, [toaster])
+
   if (!toaster) return null
 
-  return <Toaster position={resolveToastPosition(position, dir)} dir={dir} richColors closeButton />
+  return (
+    <Toaster
+      id={STARTER_KIT_TOASTER_ID}
+      position={resolveToastPosition(position, dir)}
+      dir={dir}
+      richColors
+      closeButton
+    />
+  )
 }

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

@@ -207,7 +207,7 @@ function TenantChooser({ panel }: { panel: PanelSchema }) {
             {tenancy.tenants.length > 0 && <DropdownMenuSeparator />}
             <DropdownMenuItem onSelect={() => router.visit(tenancy.registrationUrl!)}>
               <Icon name="alfakit::panels.tenant-menu.registration-button" fallback={PlusIcon} />
-              {t('tenancy.register', {}, 'New')}
+              {tenancy.registrationLabel ?? t('tenancy.register', {}, 'New')}
             </DropdownMenuItem>
           </>
         )}

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

@@ -49,7 +49,7 @@ export function SearchTrigger({ source, onLoad }: WidgetProps & { onLoad?: () =>
       <SearchIcon className="size-4" aria-hidden="true" />
       <span className="sr-only sm:not-sr-only sm:flex-1 sm:text-start">{placeholder}</span>
       {hydrated && binding && (
-        <kbd className="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline">
+        <kbd dir="ltr" className="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline">
           {formatKeyBinding(binding)}
         </kbd>
       )}