@alfakit/react 0.1.1 → 0.1.6

package/src/components/panel/brand.tsx

@@ -0,0 +1,46 @@
+import { Link } from '@inertiajs/react'
+import { usePanel } from '../../context'
+import { cn } from '../../lib/utils'
+
+/**
+ * The panel's logo (or initial) and name, linking to the panel home. Its own module, so the
+ * auth layout doesn't import the sidebar.
+ */
+export function Brand({ className }: { className?: string }) {
+  const panel = usePanel()
+
+  return (
+    <Link
+      href={panel.url ?? '/'}
+      className={cn('flex items-center gap-2 overflow-hidden', className)}
+    >
+      {panel.brandLogo ? (
+        <>
+          <img
+            src={panel.brandLogo}
+            alt={panel.brandName}
+            style={{ height: panel.brandLogoHeight ?? '1.75rem' }}
+            className={cn('max-w-full object-contain', panel.darkModeBrandLogo && 'dark:hidden')}
+          />
+          {panel.darkModeBrandLogo && (
+            <img
+              src={panel.darkModeBrandLogo}
+              alt={panel.brandName}
+              style={{ height: panel.brandLogoHeight ?? '1.75rem' }}
+              className="hidden max-w-full object-contain dark:block"
+            />
+          )}
+        </>
+      ) : (
+        <>
+          <span className="bg-primary text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold">
+            {panel.brandName.charAt(0)}
+          </span>
+          <span className="truncate text-sm font-semibold group-data-[collapsible=icon]:hidden">
+            {panel.brandName}
+          </span>
+        </>
+      )}
+    </Link>
+  )
+}

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/realtime/live-records-pill.tsx

@@ -1,7 +1,7 @@
 import { LiveUpdates, shownRecordKeys, type LiveUpdatesSchema, type RecordKey } from '@alfakit/core'
 import { ArrowUpIcon } from 'lucide-react'
 import { useEffect, useMemo } from 'react'
-import { useChoice, usePollComponent } from '../../context'
+import { useChoice, usePollComponent, useRefreshComponents } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { Button } from '../ui/button'
 
@@ -16,15 +16,16 @@ export function useLiveUpdates(
   options: { polling?: boolean; records?: ReadonlyArray<{ key?: RecordKey }> | null } = {},
 ): LiveUpdates | null {
   const poll = usePollComponent()
+  const refresh = useRefreshComponents()
   const key = live ? JSON.stringify(live) : ''
   const polling = options.polling
   const records = options.records
 
   const controller = useMemo(
-    () => (live ? new LiveUpdates({ live, target, polling, poll }) : null),
+    () => (live ? new LiveUpdates({ live, target, polling, poll, refresh }) : null),
     // `live` is compared by value (`key`): a reload brings a new object with the same settings.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [key, target, polling, poll],
+    [key, target, polling, poll, refresh],
   )
 
   // Updates of records on other pages don't refresh the table.

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 {
@@ -60,15 +60,22 @@ export interface CellProps {
   recordKey: RecordKey
   token: string
   component: string
+  /**
+   * Set when this renderer was picked from the registry (`column:<type>`): it then renders
+   * the built-in cell instead of looking itself up again, so an ejected `TableCellContent`
+   * registered for a column type doesn't render itself forever.
+   */
+  fromRegistry?: boolean
 }
 
 export function TableCellContent(props: CellProps) {
   const { column } = props
+  const registry = useRegistry()
   // A component registered as `column:<type>` replaces the built-in cell renderer.
-  const Custom = useRegistry().resolve(columnRegistryKey(column))
+  const Custom = props.fromRegistry ? undefined : registry.resolve(columnRegistryKey(column))
 
   if (Custom) {
-    return createElement(Custom, props)
+    return createElement(Custom, { ...props, fromRegistry: true })
   }
 
   switch (column.type) {
@@ -587,6 +594,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 +605,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 +622,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 +641,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 +664,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 +724,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/column-manager.tsx

@@ -193,24 +193,26 @@ export function ColumnManager({
 
   const orderChanged = Boolean(orderDraft && columnOrderChanged(appliedNames, orderDraft))
 
-  const apply = () => {
-    if (orderDraft && orderChanged) void save(orderDraft)
-
-    if (draft && columnDraftChanged(table.visibleColumns, draft)) {
-      visitTable(table.identifier, { columns: draft }, ['page'])
-    }
+  // The order is saved before the visibility visit: both requests share the session, and a
+  // visit running alongside the save would write the old order back when it finishes.
+  const apply = async () => {
+    const columns = draft && columnDraftChanged(table.visibleColumns, draft) ? draft : null
 
     setDraft(null)
     setOrderDraft(null)
     setAnnouncement('')
     setOpen(false)
+
+    if (orderDraft && orderChanged) await save(orderDraft)
+
+    if (columns) visitTable(table.identifier, { columns }, ['page'])
   }
 
   // Reset: the defined column order and, for toggleable columns, the default visibility.
-  const reset = () => {
+  const reset = async () => {
     if (reorderable) {
       setOrderDraft(null)
-      void save([])
+      await save([])
     }
 
     if (toggleable) {
@@ -237,7 +239,7 @@ export function ColumnManager({
       disabled={saving}
       data-slot="column-manager-reset"
       className={cn(!applyView && 'w-full')}
-      onClick={reset}
+      onClick={() => void reset()}
     />
   ) : null
   const inHeader = table.columnManagerResetActionPosition === 'header'
@@ -394,7 +396,7 @@ export function ColumnManager({
               disabled={
                 !orderChanged && (!draft || !columnDraftChanged(table.visibleColumns, draft))
               }
-              onClick={apply}
+              onClick={() => void apply()}
             />
           )}
         </div>

package/src/components/table/content-layout.tsx

@@ -313,13 +313,17 @@ export function ContentLayoutSort({
   if (sortable.length === 0) return null
 
   const direction = table.sort?.direction ?? 'asc'
+  // A default sort on a column the select doesn't list (`created_at`) shows the placeholder.
+  const selected = sortable.some((column) => column.name === table.sort?.column)
+    ? (table.sort?.column ?? '')
+    : ''
 
   return (
     <div className="flex items-center gap-1">
       <label className="flex items-center gap-2 text-sm">
         <span className="sr-only">{t('table.sort_by', {}, 'Sort by')}</span>
         <select
-          value={table.sort?.column ?? ''}
+          value={selected}
           onChange={(event) =>
             visitTable(
               table.identifier,

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/components/table/pagination.tsx

@@ -14,12 +14,13 @@ import {
   ChevronsRightIcon,
 } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
-import { useT } from '../../context'
+import { useFormatter, useT } from '../../context'
 import { Icon } from '../../lib/icons'
 import { Button } from '../ui/button'
 
 export function TablePagination({ table }: { table: TableSchema }) {
   const t = useT()
+  const format = useFormatter()
   const pagination = table.pagination
 
   if (!pagination) {
@@ -41,13 +42,17 @@ export function TablePagination({ table }: { table: TableSchema }) {
   const summary = numbered
     ? t(
         'table.showing',
-        { first: pagination.from, last: pagination.to, total: pagination.total },
-        `Showing ${pagination.from}–${pagination.to} of ${pagination.total}`,
+        {
+          first: format.number(pagination.from),
+          last: format.number(pagination.to),
+          total: format.number(pagination.total),
+        },
+        'Showing :first–:last of :total',
       )
     : t(
         'table.showing_range',
-        { first: pagination.from, last: pagination.to },
-        `Showing ${pagination.from}–${pagination.to}`,
+        { first: format.number(pagination.from), last: format.number(pagination.to) },
+        'Showing :first–:last',
       )
 
   return (
@@ -114,7 +119,7 @@ export function TablePagination({ table }: { table: TableSchema }) {
                   onClick={() => visitTable(table.identifier, { page }, ['page'])}
                   aria-current={page === pagination.currentPage ? 'page' : undefined}
                 >
-                  {page}
+                  {format.number(page)}
                 </Button>
               ),
             )}
@@ -169,6 +174,7 @@ function PerPageSelect({
   pagination: AnyPaginationSchema
 }) {
   const t = useT()
+  const format = useFormatter()
 
   if (pagination.pageOptions.length <= 1) return null
 
@@ -188,7 +194,7 @@ function PerPageSelect({
       >
         {pagination.pageOptions.map((option) => (
           <option key={option} value={String(option)}>
-            {option === 'all' ? t('table.all', {}, 'All') : option}
+            {option === 'all' ? t('table.all', {}, 'All') : format.number(option)}
           </option>
         ))}
       </select>
@@ -210,6 +216,7 @@ function AppendingPagination({
   pagination: Extract<AnyPaginationSchema, { mode: 'load-more' | 'infinite' }>
 }) {
   const t = useT()
+  const format = useFormatter()
   const sentinel = useRef<HTMLDivElement>(null)
   const [loading, setLoading] = useState(false)
   const [failed, setFailed] = useState(false)
@@ -290,8 +297,8 @@ function AppendingPagination({
         <span>
           {t(
             'table.showing_range',
-            { first: pagination.from, last: pagination.to },
-            `Showing ${pagination.from}–${pagination.to}`,
+            { first: format.number(pagination.from), last: format.number(pagination.to) },
+            'Showing :first–:last',
           )}
         </span>
         <PerPageSelect table={table} pagination={pagination} />

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

@@ -202,6 +202,20 @@ export function DataTable({
     [table.identifier, table.searchDebounce],
   )
 
+  // Column searches (`searchable(isIndividual: true)`) apply after the same pause as the table
+  // search; Enter applies at once. Callers pass every column's search (the others unchanged).
+  const pushColumnSearch = useMemo(
+    () =>
+      debounce(
+        (columnSearch: Record<string, string>) =>
+          visitTable(table.identifier, { columnSearch }, ['page']),
+        table.searchDebounce,
+      ),
+    [table.identifier, table.searchDebounce],
+  )
+  const searchColumn = (name: string, value: string) =>
+    pushColumnSearch({ ...(table.columnSearches ?? {}), [name]: value })
+
   // Polls refresh only this table (a partial reload of its own schema), share one request
   // with other components on the same interval and pause while the tab is hidden.
   const pollComponent = usePollComponent()
@@ -619,19 +633,18 @@ export function DataTable({
               placeholder={t('search', {}, 'Search')}
               aria-label={`${t('search', {}, 'Search')} ${column.label}`}
               className="h-7 text-xs font-normal"
-              onKeyDown={(event) =>
-                event.key === 'Enter' &&
-                visitTable(
-                  table.identifier,
-                  {
-                    columnSearch: {
-                      ...(table.columnSearches ?? {}),
-                      [column.name]: (event.target as HTMLInputElement).value,
-                    },
-                  },
-                  ['page'],
-                )
+              onChange={(event) => {
+                if (!table.searchOnBlur) searchColumn(column.name, event.target.value)
+              }}
+              onBlur={(event) =>
+                table.searchOnBlur && searchColumn(column.name, event.target.value)
               }
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter') return
+
+                searchColumn(column.name, (event.target as HTMLInputElement).value)
+                pushColumnSearch.flush()
+              }}
             />
           )}
         </div>

package/src/components/ui/dialog.tsx

@@ -1,5 +1,5 @@
 import { XIcon } from 'lucide-react'
-import { Dialog as DialogPrimitive } from 'radix-ui'
+import { Dialog as DialogPrimitive, Direction } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { useT } from '../../context'
 import { Icon } from '../../lib/icons'
@@ -40,11 +40,15 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }) {
+  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+  // standalone components leave <html dir> to the host).
+  const dir = Direction.useDirection()
   const t = useT()
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
+        dir={dir}
         data-slot="dialog-content"
         className={cn(
           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',

package/src/components/ui/popover.tsx

@@ -1,4 +1,4 @@
-import { Popover as PopoverPrimitive } from 'radix-ui'
+import { Direction, Popover as PopoverPrimitive } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { cn } from '../../lib/utils'
 
@@ -16,9 +16,13 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }: ComponentProps<typeof PopoverPrimitive.Content>) {
+  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+  // standalone components leave <html dir> to the host).
+  const dir = Direction.useDirection()
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
+        dir={dir}
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}

package/src/components/ui/sheet.tsx

@@ -1,5 +1,5 @@
 import { XIcon } from 'lucide-react'
-import { Dialog as SheetPrimitive } from 'radix-ui'
+import { Direction, Dialog as SheetPrimitive } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { useT } from '../../context'
 import { Icon } from '../../lib/icons'
@@ -44,11 +44,15 @@ function SheetContent({
   side?: 'top' | 'right' | 'bottom' | 'left'
   showCloseButton?: boolean
 }) {
+  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+  // standalone components leave <html dir> to the host).
+  const dir = Direction.useDirection()
   const t = useT()
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
+        dir={dir}
         data-slot="sheet-content"
         className={cn(
           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',

package/src/components/ui/tooltip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip as TooltipPrimitive } from 'radix-ui'
+import { Direction, Tooltip as TooltipPrimitive } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { cn } from '../../lib/utils'
 
@@ -29,9 +29,13 @@ function TooltipContent({
   children,
   ...props
 }: ComponentProps<typeof TooltipPrimitive.Content>) {
+  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+  // standalone components leave <html dir> to the host).
+  const dir = Direction.useDirection()
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
+        dir={dir}
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(

package/src/context.tsx

@@ -28,6 +28,11 @@ export interface AlfakitContextValue {
    * their own schemas by token.
    */
   poll?: (target: string, interval: string | number | null | undefined) => () => void
+  /**
+   * Fetches fresh schemas of components now (`live()` tables and widgets after a record
+   * change). Panels leave it out (a partial reload); components outside panels fetch theirs.
+   */
+  refresh?: (targets: string[]) => Promise<void>
 }
 
 const AlfakitContext = createContext<AlfakitContextValue | null>(null)
@@ -126,6 +131,11 @@ export function usePollComponent(): NonNullable<AlfakitContextValue['poll']> {
   return useContext(AlfakitContext)?.poll ?? pollComponent
 }
 
+/** How `live()` components refresh: their own fetch outside panels, else a partial reload. */
+export function useRefreshComponents(): AlfakitContextValue['refresh'] {
+  return useContext(AlfakitContext)?.refresh
+}
+
 export function useAlfakitProps(): AlfakitPageProps {
   return useOptionalPageProps()
 }

package/src/create-alfakit.tsx

@@ -7,6 +7,7 @@ import {
   configureCharts,
   configureRealtime,
   debugRecorder,
+  documentNonce,
   effectiveErrorNotifications,
   initializeAppearance,
   installErrorNotifications,
@@ -43,6 +44,7 @@ import { SchemaContractGuard } from './components/panel/schema-contract-guard'
 import { Toaster } from './components/ui/sonner'
 import { TooltipProvider } from './components/ui/tooltip'
 import { AlfakitProvider, useAlfakit, type AlfakitContextValue, type AnyComponent } from './context'
+import { panelLayouts } from './layouts/panel-layouts'
 import { discoverComponents } from './lib/discovery'
 import { preloadIcons } from './lib/icons'
 import { AlfakitPage } from './pages/page'
@@ -72,9 +74,13 @@ export function AlfakitRoot({
     translator.setLocale(localization?.tag ?? 'en')
   }
 
+  // Starter kit mode: the host app owns `<html lang dir>` (its own pages and layout are not
+  // mirrored); `AlfakitStarterKitRoot` puts the direction on Alfakit's own root element.
+  const ownsDocument = panel?.starterKit !== true
+
   useLayoutEffect(() => {
-    applyDocumentLocale(localization)
-  }, [localization])
+    if (ownsDocument) applyDocumentLocale(localization)
+  }, [localization, ownsDocument])
 
   useLayoutEffect(() => {
     applyPanelTheme(panel)
@@ -133,6 +139,7 @@ export function bootAlfakit(
   // Auto-registered files sit between the built-ins and the explicit `components` / `pages`.
   const discovered = discoverComponents(options.discover)
   const registry = createDefaultRegistry()
+    .registerMany(panelLayouts)
     .registerMany(discovered.components)
     .registerMany(options.components ?? {})
   const pages: Record<string, AnyComponent> = {
@@ -237,6 +244,8 @@ export function bootAlfakit(
   return createInertiaApp<AlfakitPageProps>({
     title: (title) => title,
     progress: options.progress === undefined ? { color: 'var(--primary)' } : options.progress,
+    // The page's CSP nonce, so the progress bar's injected <style> passes a nonce-based policy.
+    nonce: documentNonce(),
     resolve: (name, page) => {
       const component = pages[name]
 

package/src/index.ts

@@ -99,6 +99,8 @@ export { discoverComponents, discoveredComponent, type DiscoveredComponents } fr
 export { Icon } from './lib/icons'
 export { cn } from './lib/utils'
 export { AlfakitPage, ContentBlockRenderer, PageContent, PageHeader, PageShell } from './pages/page'
+// `createAlfakit()` registers these; a registry built by hand for `AlfakitPage` needs them too.
+export { panelLayouts } from './layouts/panel-layouts'
 export { createDefaultRegistry } from './registry'
 export * from './standalone'
 export * from './starter-kit'