@alfakit/vue 0.1.2 → 0.1.6

package/src/components/table/ColumnManager.vue

@@ -261,24 +261,28 @@ const move = (name: string, offset: -1 | 1, event: MouseEvent) => {
   reorder(name, moveColumnInManager(names.value, name, offset, props.table.columnGroups))
 }
 
-const apply = () => {
-  if (orderDraft.value && orderChanged.value) void save(orderDraft.value)
-
-  if (draft.value && columnDraftChanged(props.table.visibleColumns, draft.value)) {
-    visitTable(props.table.identifier, { columns: draft.value }, ['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 order = orderDraft.value && orderChanged.value ? orderDraft.value : null
+  const columns =
+    draft.value && columnDraftChanged(props.table.visibleColumns, draft.value) ? draft.value : null
 
   draft.value = null
   orderDraft.value = null
   announcement.value = ''
   open.value = false
+
+  if (order) await save(order)
+
+  if (columns) visitTable(props.table.identifier, { columns }, ['page'])
 }
 
 // Reset: the defined column order and, for toggleable columns, the default visibility.
-const reset = () => {
+const reset = async () => {
   if (reorderable.value) {
     orderDraft.value = null
-    void save([])
+    await save([])
   }
 
   if (toggleable.value) {

package/src/components/table/ContentLayoutSort.vue

@@ -14,6 +14,12 @@ const props = defineProps<{ table: TableSchema; columns: ColumnSchema[] }>()
 const t = useT()
 const sortable = computed(() => props.columns.filter((column) => column.sortable))
 const direction = computed(() => props.table.sort?.direction ?? 'asc')
+// A default sort on a column the select doesn't list (`created_at`) shows the placeholder.
+const selected = computed(() =>
+  sortable.value.some((column) => column.name === props.table.sort?.column)
+    ? (props.table.sort?.column ?? '')
+    : '',
+)
 
 const sortBy = (event: Event) => {
   const value = (event.target as HTMLSelectElement).value
@@ -39,7 +45,7 @@ const flip = () =>
     <label class="flex items-center gap-2 text-sm">
       <span class="sr-only">{{ t('table.sort_by', {}, 'Sort by') }}</span>
       <select
-        :value="props.table.sort?.column ?? ''"
+        :value="selected"
         class="border-input h-8 rounded-md border bg-transparent px-2 text-sm"
         @change="sortBy"
       >

package/src/components/table/TableCellContent.vue

@@ -22,7 +22,9 @@ import TextInputCell from './TextInputCell.vue'
 const props = defineProps<CellProps>()
 const registry = useRegistry()
 // A component registered as `column:<type>` replaces the built-in cell renderer.
-const custom = computed(() => registry.resolve(columnRegistryKey(props.column)))
+const custom = computed(() =>
+  props.fromRegistry ? undefined : registry.resolve(columnRegistryKey(props.column)),
+)
 const t = useT()
 // `ViewColumn`: the application component registered under the column's `view()` name.
 const viewName = computed(() => (props.column as { component?: string }).component ?? '')
@@ -106,7 +108,7 @@ const descriptionPosition = computed(
 </script>
 
 <template>
-  <component :is="custom" v-if="custom" v-bind="props" />
+  <component :is="custom" v-if="custom" v-bind="props" :from-registry="true" />
   <component
     :is="view"
     v-else-if="view"

package/src/components/table/TablePagination.vue

@@ -10,12 +10,13 @@ import {
 } from '@alfakit/core'
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { useT } from '../../context'
+import { useFormatter, useT } from '../../context'
 import { Icon } from '../../lib/icons'
 import Button from '../ui/Button.vue'
 
 const props = defineProps<{ table: TableSchema }>()
 const t = useT()
+const format = useFormatter()
 const pagination = computed(() => props.table.pagination)
 
 function pageWindow(current: number, last: number): Array<number | null> {
@@ -66,13 +67,17 @@ const summary = computed(() => {
   return numbered.value
     ? t(
         'table.showing',
-        { first: value.from, last: value.to, total: numbered.value.total },
-        `Showing ${value.from}–${value.to} of ${numbered.value.total}`,
+        {
+          first: format.value.number(value.from),
+          last: format.value.number(value.to),
+          total: format.value.number(numbered.value.total),
+        },
+        'Showing :first–:last of :total',
       )
     : t(
         'table.showing_range',
-        { first: value.from, last: value.to },
-        `Showing ${value.from}–${value.to}`,
+        { first: format.value.number(value.from), last: format.value.number(value.to) },
+        'Showing :first–:last',
       )
 })
 const goTo = (page: number) => visitTable(props.table.identifier, { page }, ['page'])
@@ -173,7 +178,7 @@ onBeforeUnmount(() => observer?.disconnect())
           @change="setPerPage"
         >
           <option v-for="option in pagination.pageOptions" :key="option" :value="String(option)">
-            {{ option === 'all' ? t('table.all', {}, 'All') : option }}
+            {{ option === 'all' ? t('table.all', {}, 'All') : format.number(option) }}
           </option>
         </select>
       </label>
@@ -251,7 +256,7 @@ onBeforeUnmount(() => observer?.disconnect())
             size="icon-sm"
             :aria-current="page === numbered.currentPage ? 'page' : undefined"
             @click="goTo(page)"
-            >{{ page }}</Button
+            >{{ format.number(page) }}</Button
           >
         </template>
       </template>

package/src/components/table/cell-update.ts

@@ -10,6 +10,12 @@ 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 useCellUpdate(props: CellProps) {

package/src/components/ui/CommandAutoHighlight.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { injectListboxRootContext } from 'reka-ui'
+import { nextTick, watch } from 'vue'
+
+/**
+ * Inside a `Command`: highlights the first item when `items` change and nothing (still on
+ * the page) is highlighted, as cmdk does in React. Results that arrive after typing (a
+ * server search) would otherwise leave Enter with nothing to select.
+ */
+const props = defineProps<{ items: unknown }>()
+const root = injectListboxRootContext()
+
+watch(
+  () => props.items,
+  () =>
+    nextTick(() => {
+      const highlighted = root.highlightedElement.value
+
+      if (!highlighted || !highlighted.isConnected) root.highlightFirstItem()
+    }),
+  { deep: true },
+)
+</script>
+
+<template>
+  <slot />
+</template>

package/src/components/ui/DialogContent.vue

@@ -6,6 +6,7 @@ import {
   DialogContent,
   DialogOverlay,
   DialogPortal,
+  useDirection,
   useForwardPropsEmits,
   type DialogContentEmits,
   type DialogContentProps,
@@ -28,6 +29,9 @@ defineOptions({ inheritAttrs: false })
 
 const emits = defineEmits<DialogContentEmits>()
 const forwarded = useForwardPropsEmits(reactiveOmit(props, 'class', 'showCloseButton'), emits)
+// Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+// standalone components leave <html dir> to the host).
+const dir = useDirection()
 const t = useT()
 </script>
 
@@ -39,7 +43,7 @@ const t = useT()
     />
     <DialogContent
       data-slot="dialog-content"
-      v-bind="{ ...forwarded, ...$attrs }"
+      v-bind="{ dir, ...forwarded, ...$attrs }"
       :class="
         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/PopoverContent.vue

@@ -3,6 +3,7 @@ import { reactiveOmit } from '@vueuse/core'
 import {
   PopoverContent,
   PopoverPortal,
+  useDirection,
   useForwardPropsEmits,
   type PopoverContentEmits,
   type PopoverContentProps,
@@ -20,13 +21,16 @@ defineOptions({ inheritAttrs: false })
 
 const emits = defineEmits<PopoverContentEmits>()
 const forwarded = useForwardPropsEmits(reactiveOmit(props, 'class'), emits)
+// Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+// standalone components leave <html dir> to the host).
+const dir = useDirection()
 </script>
 
 <template>
   <PopoverPortal>
     <PopoverContent
       data-slot="popover-content"
-      v-bind="{ ...forwarded, ...$attrs }"
+      v-bind="{ ...forwarded, dir: forwarded.dir ?? dir, ...$attrs }"
       :class="
         cn(
           'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',

package/src/components/ui/SheetContent.vue

@@ -6,6 +6,7 @@ import {
   DialogContent,
   DialogOverlay,
   DialogPortal,
+  useDirection,
   useForwardPropsEmits,
   type DialogContentEmits,
   type DialogContentProps,
@@ -35,6 +36,9 @@ const forwarded = useForwardPropsEmits(
   reactiveOmit(props, 'class', 'side', 'showCloseButton'),
   emits,
 )
+// Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+// standalone components leave <html dir> to the host).
+const dir = useDirection()
 const t = useT()
 </script>
 
@@ -46,7 +50,7 @@ const t = useT()
     />
     <DialogContent
       data-slot="sheet-content"
-      v-bind="{ ...forwarded, ...$attrs }"
+      v-bind="{ dir, ...forwarded, ...$attrs }"
       :class="
         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/TooltipContent.vue

@@ -4,6 +4,7 @@ import {
   TooltipArrow,
   TooltipContent,
   TooltipPortal,
+  useDirection,
   useForwardPropsEmits,
   type TooltipContentEmits,
   type TooltipContentProps,
@@ -21,13 +22,16 @@ defineOptions({ inheritAttrs: false })
 
 const emits = defineEmits<TooltipContentEmits>()
 const forwarded = useForwardPropsEmits(reactiveOmit(props, 'class'), emits)
+// Portaled outside Alfakit's root: carry the reading direction (starter kit pages and
+// standalone components leave <html dir> to the host).
+const dir = useDirection()
 </script>
 
 <template>
   <TooltipPortal>
     <TooltipContent
       data-slot="tooltip-content"
-      v-bind="{ ...forwarded, ...$attrs }"
+      v-bind="{ dir, ...forwarded, ...$attrs }"
       :class="
         cn(
           'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--reka-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',

package/src/context.ts

@@ -36,6 +36,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>
 }
 
 export const ALFAKIT_KEY: InjectionKey<AlfakitContextValue> = Symbol('alfakit')
@@ -69,6 +74,11 @@ export function usePollComponent(): NonNullable<AlfakitContextValue['poll']> {
   return inject(ALFAKIT_KEY, null)?.poll ?? pollComponent
 }
 
+/** How `live()` components refresh: their own fetch outside panels, else a partial reload. */
+export function useRefreshComponents(): AlfakitContextValue['refresh'] {
+  return inject(ALFAKIT_KEY, null)?.refresh
+}
+
 export function provideAlfakit(value: AlfakitContextValue): void {
   provide(ALFAKIT_KEY, value)
 }

package/src/create-alfakit.ts

@@ -6,6 +6,7 @@ import {
   configureCharts,
   configureRealtime,
   debugRecorder,
+  documentNonce,
   effectiveErrorNotifications,
   initializeAppearance,
   installErrorNotifications,
@@ -27,6 +28,7 @@ import type { App, DefineComponent } from 'vue'
 import AlfakitRoot from './AlfakitRoot.vue'
 import { showToast } from './components/notifications/flash-toasts'
 import { ALFAKIT_KEY, 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/AlfakitPage.vue'
@@ -54,6 +56,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> = {
@@ -158,6 +161,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

@@ -102,6 +102,8 @@ export { discoverComponents, discoveredComponent, type DiscoveredComponents } fr
 export { Icon, hasIcon, resolveIcon } from './lib/icons'
 export { cn } from './lib/utils'
 export * from './pages'
+// `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/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('./FullscreenLayout.vue').then((m) => m.default),
+}).map(discoveredComponent).components

package/src/layouts/panel-layouts.ts

@@ -0,0 +1,17 @@
+import type { AnyComponent } from '../context'
+import AppLayout from './AppLayout.vue'
+import AuthLayout from './AuthLayout.vue'
+import BlankLayout from './BlankLayout.vue'
+import FullscreenLayout from './FullscreenLayout.vue'
+
+/**
+ * The panel's own layouts (sidebar or top navigation, auth card, blank, fullscreen), which
+ * `createAlfakit()` registers up front. Starter kit pages render in the host's layout and
+ * never import these: `PageShell` loads one on demand if such a page asks for it.
+ */
+export const panelLayouts: Record<string, AnyComponent> = {
+  'layout:app': AppLayout,
+  'layout:auth': AuthLayout,
+  'layout:blank': BlankLayout,
+  'layout:fullscreen': FullscreenLayout,
+}

package/src/lib/lazy.ts

@@ -29,8 +29,18 @@ export function lazyComponent(
     inheritAttrs: false,
     setup(_, { attrs }) {
       const mounted = useAppMounted()
+      // Picked once per instance: switching from the async wrapper to the loaded component
+      // on a later render would be a new component type, so Vue would remount it and its
+      // state (a spreadsheet's undo history, an editor's selection) would be lost.
+      let component: Component | null = null
 
-      return () => h(mounted.value ? (loaded ?? Async) : fallback, attrs)
+      return () => {
+        if (!mounted.value) return h(fallback, attrs)
+
+        component ??= loaded ?? Async
+
+        return h(component, attrs)
+      }
     },
   })
 }

package/src/pages/PageShell.vue

@@ -5,10 +5,7 @@ import { computed, onBeforeUnmount, watch } from 'vue'
 import KeyboardShortcuts from '../components/panel/KeyboardShortcuts.vue'
 import Slot from '../components/panel/Slot.vue'
 import { useRegistry } from '../context'
-import AppLayout from '../layouts/AppLayout.vue'
-import AuthLayout from '../layouts/AuthLayout.vue'
 import BlankLayout from '../layouts/BlankLayout.vue'
-import FullscreenLayout from '../layouts/FullscreenLayout.vue'
 import SubNavigationLayout from '../components/panel/SubNavigationLayout.vue'
 import ConflictBanner from '../components/realtime/ConflictBanner.vue'
 import PageHeader from './PageHeader.vue'
@@ -17,10 +14,12 @@ const props = defineProps<{ page: PageSchema }>()
 const registry = useRegistry()
 
 // Each layout can be replaced: createAlfakit({ components: { 'layout:app': MyLayout } }).
-const Auth = computed(() => registry.resolve('layout:auth') ?? AuthLayout)
+// `createAlfakit()` registers the panel's layouts (`panelLayouts`), the starter kit its content
+// layout; importing the panel layouts here would put the sidebar in every starter kit page.
+const Auth = computed(() => registry.resolve('layout:auth') ?? BlankLayout)
 const Blank = computed(() => registry.resolve('layout:blank') ?? BlankLayout)
-const Fullscreen = computed(() => registry.resolve('layout:fullscreen') ?? FullscreenLayout)
-const App = computed(() => registry.resolve('layout:app') ?? AppLayout)
+const Fullscreen = computed(() => registry.resolve('layout:fullscreen') ?? BlankLayout)
+const App = computed(() => registry.resolve('layout:app') ?? BlankLayout)
 // Edit pages: somebody else saved the record (`detectConflicts()`, `Panel::realtime()`).
 const Conflicts = computed(() => registry.resolve('page:conflict-banner') ?? ConflictBanner)
 

package/src/standalone/AlfakitComponent.vue

@@ -67,14 +67,23 @@ const version = ref(0)
 const state = new StandaloneComponentState(props.component, () => version.value++)
 const poll = (target: string, interval: string | number | null | undefined) =>
   state.poll(target, interval)
+const refresh = (targets: string[]) => state.refresh(targets)
 
 const context: AlfakitContextValue = parent
-  ? { ...parent, registry: createStandaloneRegistry(props.components, parent.registry), poll }
-  : createStandaloneContext(
-      { action: props.component.endpoints.action, modal: props.component.endpoints.modal },
-      props.components,
+  ? {
+      ...parent,
+      registry: createStandaloneRegistry(props.components, parent.registry),
       poll,
-    )
+      refresh,
+    }
+  : {
+      ...createStandaloneContext(
+        { action: props.component.endpoints.action, modal: props.component.endpoints.modal },
+        props.components,
+        poll,
+      ),
+      refresh,
+    }
 
 provide(ALFAKIT_KEY, context)
 
@@ -124,9 +133,11 @@ onMounted(() => {
     { immediate: true },
   )
 
+  // The watcher runs before the new payload renders: hand it over, or the response would
+  // count as stale and lazy widgets (a calendar after its action) keep their old schema.
   watch(
     () => props.component.token,
-    () => void state.loadLazy(),
+    () => void state.loadLazy(props.component),
     { immediate: true },
   )
 

package/src/starter-kit/AlfakitStarterKitRoot.vue

@@ -56,7 +56,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
-    <slot />
-  </AlfakitRoot>
+  <!-- The reading direction and language of Alfakit's content only: the host layout around it
+       (sidebar, header) and the app's own pages keep the document's. -->
+  <div
+    data-slot="starter-kit-root"
+    :dir="page.props.alfakit?.localization?.direction ?? 'ltr'"
+    :lang="page.props.alfakit?.localization?.tag"
+    class="contents"
+  >
+    <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
+      <slot />
+    </AlfakitRoot>
+  </div>
 </template>

package/src/starter-kit/dashboard-widgets.ts

@@ -0,0 +1,93 @@
+import {
+  standaloneWidgetCount,
+  starterKitDashboardWidgets,
+  type StandaloneComponentSchema,
+} from '@alfakit/core'
+import { usePage } from '@inertiajs/vue3'
+import { computed, defineComponent, h, type PropType } from 'vue'
+import type { AnyComponent } from '../context'
+import { lazyComponent } from '../lib/lazy'
+
+/** Widget-sized boxes until the widgets' code has loaded (also during SSR). */
+const WidgetsPlaceholder = defineComponent({
+  name: 'AlfakitWidgetsPlaceholder',
+  props: {
+    component: { type: Object as PropType<StandaloneComponentSchema>, required: true },
+    // Declared so it does not fall through as an attribute.
+    components: { type: Object as PropType<Record<string, AnyComponent>>, default: undefined },
+  },
+  setup(props) {
+    return () =>
+      h(
+        'div',
+        {
+          'data-slot': 'starter-kit-widgets-placeholder',
+          'aria-busy': 'true',
+          class: 'grid auto-rows-min gap-4 md:grid-cols-2',
+        },
+        Array.from({ length: Math.max(standaloneWidgetCount(props.component), 1) }, (_, index) =>
+          h('div', {
+            key: index,
+            'aria-hidden': 'true',
+            class: 'bg-muted h-28 animate-pulse rounded-xl',
+          }),
+        ),
+      )
+  },
+})
+
+const LoadedWidgets = lazyComponent(
+  'AlfakitLoadedWidgets',
+  () => import('../standalone/AlfakitComponent.vue').then((module) => module.default),
+  WidgetsPlaceholder,
+)
+
+/**
+ * The dashboard widgets of a `starterKit()` panel on the host's own dashboard. Reads the
+ * `alfakitWidgets` prop (shared on the panel's `starterKitDashboard()` pages only, the
+ * starter kit's `/dashboard` by default) and renders the widgets with the host's theme, as
+ * `<AlfakitComponent>` renders standalone widgets: lazy widgets, polling and table widget
+ * actions go through the panel's endpoints. Its code loads once mounted; the server render
+ * and hydration show placeholders. Renders its default slot (the kit's placeholder boxes)
+ * when there are no widgets to show: other pages, guests, users who may not open the panel.
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { AlfakitWidgets } from '@alfakit/vue'
+ * </script>
+ *
+ * <template>
+ *   <AlfakitWidgets>
+ *     <MyEmptyState />
+ *   </AlfakitWidgets>
+ * </template>
+ * ```
+ */
+export const AlfakitWidgets = defineComponent({
+  name: 'AlfakitWidgets',
+  inheritAttrs: false,
+  props: {
+    /** The `starterKit()` panel whose widgets to show (the first one by default). */
+    panel: { type: String as PropType<string | undefined>, default: undefined },
+    /** Frontend components of custom widgets (`{ RevenueWidget }`), as for `<AlfakitComponent>`. */
+    components: {
+      type: Object as PropType<Record<string, AnyComponent> | undefined>,
+      default: undefined,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const page = usePage()
+    const component = computed(() => starterKitDashboardWidgets(page.props, props.panel))
+
+    return () =>
+      component.value
+        ? h('div', { 'data-slot': 'starter-kit-widgets' }, [
+            h(LoadedWidgets, {
+              component: component.value,
+              components: props.components,
+              class: attrs.class,
+            }),
+          ])
+        : slots.default?.()
+  },
+})

package/src/starter-kit/index.ts

@@ -1,5 +1,11 @@
 export { default as AlfakitStarterKitRoot } from './AlfakitStarterKitRoot.vue'
+export { AlfakitWidgets } from './dashboard-widgets'
 export { useAlfakitNavigation, type AlfakitNavigation } from './navigation'
 export { createStarterKitPage, type StarterKitPageOptions } from './starter-kit'
 export { default as StarterKitContentLayout } from './StarterKitContentLayout.vue'
-export { AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher } from './widgets'
+export {
+  AlfakitCopilot,
+  AlfakitNotifications,
+  AlfakitSearch,
+  AlfakitTenantSwitcher,
+} from './widgets'

package/src/starter-kit/runtime.ts

@@ -6,6 +6,9 @@ import {
 } from '@alfakit/core'
 import { showToast } from '../components/notifications/flash-toasts'
 import type { AlfakitContextValue, AnyComponent } from '../context'
+import AuthLayout from '../layouts/AuthLayout.vue'
+import { lazyPanelLayouts } from '../layouts/lazy-layouts'
+import { discoverComponents } from '../lib/discovery'
 import { preloadIcons } from '../lib/icons'
 import AlfakitPage from '../pages/AlfakitPage.vue'
 import { createDefaultRegistry } from '../registry'
@@ -21,6 +24,12 @@ export interface StarterKitPageOptions extends Pick<
    * `null` renders the pages without a host layout.
    */
   layout?: AnyComponent | null
+  /**
+   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass
+   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\/*.vue')`
+   * from `resources/js/pages/Alfakit/Page.vue` and every file there registers under its name.
+   */
+  discover?: AlfakitOptions<AnyComponent>['discover']
 }
 
 // One context for the browser session (it survives navigations between host and Alfakit
@@ -28,14 +37,21 @@ export interface StarterKitPageOptions extends Pick<
 let browserContext: AlfakitContextValue | null = null
 
 function createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {
+  // The host's layout replaces the panel's. Auth pages (invitations, tenant registration)
+  // keep the panel's card; the fullscreen layout loads on demand.
+  // Auto-registered files sit between the built-ins and the explicit `components` / `pages`.
+  const discovered = discoverComponents(options.discover)
   const registry = createDefaultRegistry()
+    .registerMany(lazyPanelLayouts)
+    .register('layout:auth', AuthLayout)
     .register('layout:app', StarterKitContentLayout)
+    .registerMany(discovered.components)
     .registerMany(options.components ?? {})
   const translator = new Translator()
 
   return {
     registry,
-    pages: { 'Alfakit/Page': AlfakitPage, ...options.pages },
+    pages: { 'Alfakit/Page': AlfakitPage, ...discovered.pages, ...options.pages },
     translator,
     actions: new ActionRunner({
       endpoints: { action: '', modal: '' },