@alfakit/react 0.1.2 → 0.1.6

package/src/components/panel/app-sidebar.tsx

@@ -41,50 +41,14 @@ import {
   SidebarMenuSubItem,
   SidebarRail,
 } from '../ui/sidebar'
+import { Brand } from './brand'
 import { GlobalSearch } from './global-search'
 import { NavLabel } from './nav-label'
 import { Slot } from './slot'
 import { TenantMenu } from './tenant-menu'
 import { UserMenu } from './user-menu'
 
-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>
-  )
-}
+export { Brand } from './brand'
 
 function NavBadge({ item }: { item: NavigationItemSchema }) {
   const t = useT()

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

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

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/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'

package/src/layouts/app-layout.tsx

@@ -15,36 +15,12 @@ import { Topbar } from '../components/panel/topbar'
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '../components/ui/sidebar'
 import { useAlfakitProps, useRegistry } from '../context'
 import { cn } from '../lib/utils'
+import { MAX_WIDTHS } from './max-widths'
 import { TopNavLayout } from './top-nav-layout'
 
-export const MAX_WIDTHS: Record<string, string> = {
-  '3xs': 'max-w-3xs',
-  '2xs': 'max-w-2xs',
-  xs: 'max-w-xs',
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  '2xl': 'max-w-2xl',
-  '3xl': 'max-w-3xl',
-  '4xl': 'max-w-4xl',
-  '5xl': 'max-w-5xl',
-  '6xl': 'max-w-6xl',
-  '7xl': 'max-w-7xl',
-  none: 'max-w-none',
-  min: 'max-w-min',
-  max: 'max-w-max',
-  fit: 'max-w-fit',
-  prose: 'max-w-prose',
-  container: 'container',
-  'screen-sm': 'max-w-(--breakpoint-sm)',
-  'screen-md': 'max-w-(--breakpoint-md)',
-  'screen-lg': 'max-w-(--breakpoint-lg)',
-  'screen-xl': 'max-w-(--breakpoint-xl)',
-  'screen-2xl': 'max-w-(--breakpoint-2xl)',
-  full: 'max-w-full',
-  screen: 'max-w-screen',
-}
+// Re-exported for code that imported it from here; the map lives in `./max-widths` so the
+// starter kit's content layout doesn't pull the panel chrome in.
+export { MAX_WIDTHS } from './max-widths'
 
 export interface AppLayoutProps {
   children: ReactNode

package/src/layouts/auth-layout.tsx

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react'
-import { Brand } from '../components/panel/app-sidebar'
+import { Brand } from '../components/panel/brand'
 import { LocaleSwitcher } from '../components/panel/locale-switcher'
 import { Slot } from '../components/panel/slot'
 import { ThemeToggle } from '../components/panel/theme-toggle'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
 import { usePanel } from '../context'
 import { cn } from '../lib/utils'
-import { MAX_WIDTHS } from './app-layout'
+import { MAX_WIDTHS } from './max-widths'
 
 export interface AuthLayoutProps {
   children: ReactNode

package/src/layouts/fullscreen-layout.tsx

@@ -3,7 +3,7 @@ import { Link } from '@inertiajs/react'
 import { LogOutIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
-import { Brand } from '../components/panel/app-sidebar'
+import { Brand } from '../components/panel/brand'
 import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
 import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
 import { Slot } from '../components/panel/slot'

package/src/layouts/lazy-layouts.ts

@@ -0,0 +1,14 @@
+import { lazyComponents } from '@alfakit/core'
+import type { AnyComponent } from '../context'
+import { discoveredComponent } from '../lib/discovery'
+
+/**
+ * The fullscreen layout (`$layout = 'fullscreen'`), loaded on demand by starter kit pages:
+ * they render in the host's layout, so the page chunk never imports the panel's header,
+ * menus and notifications for a layout few pages use. Only the starter kit registers it;
+ * `createAlfakit()` registers the layouts themselves up front (`panelLayouts`), so a panel's
+ * bundle has no extra lazy entry points.
+ */
+export const lazyPanelLayouts: Record<string, AnyComponent> = lazyComponents<AnyComponent>({
+  'layout:fullscreen': () => import('./fullscreen-layout').then((m) => m.FullscreenLayout),
+}).map(discoveredComponent).components

package/src/layouts/max-widths.ts

@@ -0,0 +1,29 @@
+/** Tailwind classes for the `maxContentWidth` setting of the panel and its pages. */
+export const MAX_WIDTHS: Record<string, string> = {
+  '3xs': 'max-w-3xs',
+  '2xs': 'max-w-2xs',
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  none: 'max-w-none',
+  min: 'max-w-min',
+  max: 'max-w-max',
+  fit: 'max-w-fit',
+  prose: 'max-w-prose',
+  container: 'container',
+  'screen-sm': 'max-w-(--breakpoint-sm)',
+  'screen-md': 'max-w-(--breakpoint-md)',
+  'screen-lg': 'max-w-(--breakpoint-lg)',
+  'screen-xl': 'max-w-(--breakpoint-xl)',
+  'screen-2xl': 'max-w-(--breakpoint-2xl)',
+  full: 'max-w-full',
+  screen: 'max-w-screen',
+}