@alfakit/vue 0.1.1 → 0.1.6

package/src/components/notifications/NotificationsMenu.vue

@@ -67,6 +67,17 @@ watch(open, (isOpen) => {
   if (isOpen) void center?.load()
 })
 
+// Every visit brings the server's unread count (another user after impersonating, or
+// notifications read in another tab): follow it instead of waiting for the next poll.
+watch(
+  () => config.value?.unreadCount,
+  (count) => {
+    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {
+      center.store.update({ unreadCount: count })
+    }
+  },
+)
+
 // Realtime notifications announce stored ones, so the unread count updates right away.
 let stopListening: (() => void) | null = null
 onMounted(() => {

package/src/components/panel/GlobalSearch.vue

@@ -144,6 +144,7 @@ onBeforeUnmount(() => stopListening?.())
       >
       <kbd
         v-if="hydrated && suffix?.type === 'keyBinding'"
+        dir="ltr"
         class="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline"
         >{{ formatKeyBinding(suffix.keyBinding) }}</kbd
       >

package/src/components/panel/GlobalSearchPalette.vue

@@ -30,6 +30,7 @@ import CommandEmpty from '../ui/CommandEmpty.vue'
 import CommandGroup from '../ui/CommandGroup.vue'
 import CommandInput from '../ui/CommandInput.vue'
 import CommandItem from '../ui/CommandItem.vue'
+import CommandAutoHighlight from '../ui/CommandAutoHighlight.vue'
 import CommandList from '../ui/CommandList.vue'
 import Spinner from '../ui/Spinner.vue'
 import ShortcutKeys from './ShortcutKeys.vue'
@@ -276,6 +277,7 @@ const hasResults = computed(() => groups.value.length > 0 || local.value.length
       @update:model-value="query = $event"
     />
     <CommandList>
+      <CommandAutoHighlight :items="[groups, local, leading]" />
       <CommandEmpty v-if="!loading && !hasResults">{{
         query ? t('no_results', {}, 'No results.') : placeholder
       }}</CommandEmpty>

package/src/components/panel/ShortcutKeys.vue

@@ -26,6 +26,7 @@ const steps = computed(() => shortcutSteps(props.binding))
         t('shortcuts.then', {}, 'then')
       }}</span>
       <kbd
+        dir="ltr"
         class="bg-muted text-muted-foreground rounded border px-1.5 font-mono text-[10px] leading-5"
         >{{ step }}</kbd
       >

package/src/components/panel/TenantMenu.vue

@@ -154,7 +154,7 @@ const tenants = computed(() =>
       <DropdownMenuItem v-else-if="tenancy.profileUrl" as-child>
         <Link :href="tenancy.profileUrl" class="w-full"
           ><Icon name="alfakit::panels.tenant-menu.profile-button" :fallback="SettingsIcon" />
-          {{ t('tenancy.profile', {}, 'Settings') }}</Link
+          {{ tenancy.profileLabel ?? t('tenancy.profile', {}, 'Settings') }}</Link
         >
       </DropdownMenuItem>
       <MenuItemEntries v-if="tenancy.menu" :items="tenancy.menu" menu="tenantMenu" />
@@ -162,7 +162,7 @@ const tenants = computed(() =>
       <DropdownMenuItem v-else-if="tenancy.registrationUrl" as-child>
         <Link :href="tenancy.registrationUrl" class="w-full"
           ><Icon name="alfakit::panels.tenant-menu.registration-button" :fallback="PlusIcon" />
-          {{ t('tenancy.register', {}, 'New') }}</Link
+          {{ tenancy.registrationLabel ?? t('tenancy.register', {}, 'New') }}</Link
         >
       </DropdownMenuItem>
     </DropdownMenuContent>

package/src/components/realtime/use-live-updates.ts

@@ -6,7 +6,7 @@ import {
   type RecordKey,
 } from '@alfakit/core'
 import { onMounted, onScopeDispose, shallowRef, watch, type ShallowRef } from 'vue'
-import { usePollComponent } from '../../context'
+import { usePollComponent, useRefreshComponents } from '../../context'
 
 /**
  * Follow `live()` updates of a table or widget: refresh it in place when its records
@@ -22,6 +22,7 @@ export function useLiveUpdates(
   },
 ): { controller: ShallowRef<LiveUpdates | null>; state: ShallowRef<LiveUpdatesState> } {
   const poll = usePollComponent()
+  const refresh = useRefreshComponents()
   const controller = shallowRef<LiveUpdates | null>(null)
   const state = shallowRef<LiveUpdatesState>({ pending: 0, connected: false })
   let stop: (() => void) | null = null
@@ -68,6 +69,7 @@ export function useLiveUpdates(
           target,
           polling,
           poll,
+          refresh,
         })
 
         controller.value = next

package/src/components/table/ColumnHeader.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ColumnSchema, TableSchema } from '@alfakit/core'
-import { ariaSort, columnVisibilityClasses, visitTable } from '@alfakit/core'
+import { ariaSort, columnVisibilityClasses, debounce, visitTable } from '@alfakit/core'
 import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'
 import { createReusableTemplate } from '@vueuse/core'
-import { ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import { useT } from '../../context'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -47,17 +47,26 @@ const sort = () => {
   })
 }
 
+// The column search applies after the same pause as the table search; Enter applies at once.
+const pushColumnSearch = debounce(
+  (value: string) =>
+    visitTable(
+      props.table.identifier,
+      { columnSearch: { ...(props.table.columnSearches ?? {}), [props.column.name]: value } },
+      ['page'],
+    ),
+  props.table.searchDebounce,
+)
+
+onBeforeUnmount(() => pushColumnSearch.cancel())
+
+const onColumnSearchInput = (value: string) => {
+  if (!props.table.searchOnBlur) pushColumnSearch(value)
+}
+
 const columnSearch = (event: Event) => {
-  visitTable(
-    props.table.identifier,
-    {
-      columnSearch: {
-        ...(props.table.columnSearches ?? {}),
-        [props.column.name]: (event.target as HTMLInputElement).value,
-      },
-    },
-    ['page'],
-  )
+  pushColumnSearch((event.target as HTMLInputElement).value)
+  pushColumnSearch.flush()
 }
 </script>
 
@@ -138,6 +147,8 @@ const columnSearch = (event: Event) => {
         :placeholder="t('search', {}, 'Search')"
         :aria-label="`${t('search', {}, 'Search')} ${props.column.label}`"
         class="h-7 text-xs font-normal"
+        @update:model-value="onColumnSearchInput"
+        @blur="props.table.searchOnBlur && columnSearch($event)"
         @keydown.enter="columnSearch"
       />
     </div>

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/GroupHeaderRow.vue

@@ -3,6 +3,7 @@ import type { TableRecordGroupSchema } from '@alfakit/core'
 import { ChevronDownIcon, ChevronRightIcon } from '@lucide/vue'
 import { computed } from 'vue'
 import { useT } from '../../context'
+import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import Checkbox from '../ui/Checkbox.vue'
 import TableCell from '../ui/TableCell.vue'
@@ -20,6 +21,11 @@ const props = defineProps<{
 const emit = defineEmits<{ toggle: [] }>()
 const t = useT()
 
+// An enum group shows its `HasIcon` icon, in its `HasColor` colour, before the title.
+const groupIconClass = computed(
+  () => `size-4 shrink-0 ${colorClass(textColorClasses, props.group.color, 'gray')}`,
+)
+
 const toggleLabel = computed(
   () =>
     `${props.collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${props.group.title}`,
@@ -56,6 +62,12 @@ const toggleLabel = computed(
             class="size-4 shrink-0"
             aria-hidden="true"
           />
+          <Icon
+            v-if="props.group.icon"
+            :name="props.group.icon"
+            :class="groupIconClass"
+            aria-hidden="true"
+          />
           <span class="flex flex-col items-start">
             <span class="font-medium">{{ props.group.title }}</span>
             <span
@@ -65,6 +77,21 @@ const toggleLabel = computed(
             >
           </span>
         </button>
+        <span
+          v-else-if="props.group.icon"
+          data-slot="table-group-title"
+          class="flex items-center gap-2"
+        >
+          <Icon :name="props.group.icon" :class="groupIconClass" aria-hidden="true" />
+          <span class="flex flex-col items-start">
+            <span class="font-medium">{{ props.group.title }}</span>
+            <span
+              v-if="props.group.description"
+              class="text-muted-foreground text-xs font-normal"
+              >{{ props.group.description }}</span
+            >
+          </span>
+        </span>
         <span v-else class="flex flex-col items-start">
           <span class="font-medium">{{ props.group.title }}</span>
           <span v-if="props.group.description" class="text-muted-foreground text-xs font-normal">{{

package/src/components/table/SelectCell.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { SelectColumnSchema } from '@alfakit/core'
 import { isOptionGroup } from '@alfakit/core'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { cn } from '../../lib/utils'
 import { useCellUpdate, type CellProps } from './cell-update'
 
 const props = defineProps<CellProps>()
 const schema = computed(() => props.column as SelectColumnSchema)
 const { update, saving, error } = useCellUpdate(props)
+const errorId = useId()
 const value = ref(
   props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),
 )
@@ -29,7 +30,9 @@ const onChange = (event: Event) => {
     <select
       :value="value"
       :disabled="Boolean(props.cell.disabled) || saving"
+      :aria-label="props.column.label || props.column.name"
       :aria-invalid="error ? true : undefined"
+      :aria-describedby="error ? errorId : undefined"
       :class="
         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]',
@@ -48,6 +51,6 @@ const onChange = (event: Event) => {
         {{ option.label }}
       </option>
     </select>
-    <span v-if="error" class="text-destructive block text-xs">{{ error }}</span>
+    <span v-if="error" :id="errorId" class="text-destructive block text-xs">{{ error }}</span>
   </span>
 </template>

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/TextInputCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TextInputColumnSchema } from '@alfakit/core'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -10,9 +10,13 @@ import { useCellUpdate, type CellProps } from './cell-update'
 const props = defineProps<CellProps>()
 const schema = computed(() => props.column as TextInputColumnSchema)
 const { update, saving, error } = useCellUpdate(props)
-const initial =
-  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state)
-const value = ref(initial)
+const errorId = useId()
+// The saved value: follows the cell after the table reloads, so changing the input back to
+// an earlier value is saved too.
+const initial = computed(() =>
+  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),
+)
+const value = ref(initial.value)
 // `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.
 const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
 </script>
@@ -57,7 +61,9 @@ const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
           :step="schema.step"
           :inputmode="schema.inputMode"
           :disabled="Boolean(props.cell.disabled) || saving"
+          :aria-label="props.column.label || props.column.name"
           :aria-invalid="error ? true : undefined"
+          :aria-describedby="error ? errorId : undefined"
           :class="
             cn(
               'h-8 min-w-32',
@@ -92,6 +98,6 @@ const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
         >{{ props.cell.suffix }}</span
       >
     </span>
-    <span v-if="error" class="text-destructive block text-xs">{{ error }}</span>
+    <span v-if="error" :id="errorId" class="text-destructive block text-xs">{{ error }}</span>
   </span>
 </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