@exxatdesignux/ui 0.2.17 → 0.2.19

package/template/components/table-properties/drawer.tsx

@@ -26,7 +26,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
+import {
+  CALENDAR_MAIN_VIEW_TILES,
+  type DataListDisplayOptions,
+} from "@/lib/data-list-display-options"
 import { Tip } from "@/components/ui/tip"
 import { ToggleSwitch } from "@/components/ui/toggle-switch"
 import { Button } from "@/components/ui/button"
@@ -95,6 +98,11 @@ export interface TablePropertiesDrawerProps {
   // View type
   currentView?: DataListViewType
   onViewChange?: (view: DataListViewType) => void
+  /**
+   * View-type tiles in Properties — defaults to all `DATA_LIST_VIEW_TILES`.
+   * Pass hub-filtered options (same set as `ListPageTemplate` `supportedViewTypes`).
+   */
+  viewTypeOptions?: readonly { value: DataListViewType; label: string; icon: string }[]
   /** Lifecycle context (e.g. tab filter) — shown in the drawer header */
   lifecycleTabLabel?: string
   /**
@@ -117,6 +125,9 @@ export interface TablePropertiesDrawerProps {
 
 type SheetPanel = "main" | "table-display" | "filter" | "sort" | "group" | "columns" | "conditional-rules"
 
+/** Properties sheet uses `z-[80]`; default portaled menus are `z-50` and sit underneath. */
+const PROPERTIES_SHEET_PORTAL_Z = "z-[90]"
+
 export function TablePropertiesDrawer({
   open,
   onOpenChange,
@@ -158,6 +169,7 @@ export function TablePropertiesDrawer({
   filterFields = FILTER_FIELDS,
   currentView,
   onViewChange,
+  viewTypeOptions = DATA_LIST_VIEW_TILES,
   lifecycleTabLabel,
   fieldDefinitions,
   resolveColumnLabel: resolveColumnLabelProp,
@@ -197,6 +209,7 @@ export function TablePropertiesDrawer({
 
   const viewSurface = currentView ?? "table"
   const isBoardView = viewSurface === "board"
+  const isCalendarView = viewSurface === "calendar"
   const boardGroupByLabel =
     boardGroupByColumnOptions?.find(o => o.key === displayOptions.boardGroupByColumnKey)?.label
   const viewDisplayLabel = dataListViewLabel(viewSurface)
@@ -219,10 +232,16 @@ export function TablePropertiesDrawer({
     if (viewSurface === "dashboard") {
       return "Charts · KPI metrics"
     }
+    if (viewSurface === "calendar") {
+      return [
+        displayOptions.showCalendarSummaryPanel ? "Summary panel" : "No summary",
+        displayOptions.calendarMainView === "week" ? "Week layout" : "Month layout",
+      ].join(" · ")
+    }
     return [showGridlines ? "Gridlines" : null, pagination ? "Paginated" : null].filter(Boolean).join(" · ") || "Default"
   })()
   const viewDisplayIcon =
-    DATA_LIST_VIEW_TILES.find(t => t.value === viewSurface)?.icon ?? "fa-table"
+    viewTypeOptions.find(t => t.value === viewSurface)?.icon ?? "fa-table"
 
   // ── Sort drag-and-drop ────────────────────────────────────────────────────
   const sortDrag = useDraggableList(sortRules, r => r.id, onSortRulesChange)
@@ -243,7 +262,7 @@ export function TablePropertiesDrawer({
       : "—"
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    <Sheet open={open} onOpenChange={onOpenChange} modal={false}>
       <SheetContent
         side="right"
         showCloseButton={false}
@@ -284,7 +303,7 @@ export function TablePropertiesDrawer({
               <div className="px-4 pb-3">
                 <SelectionTileGrid<DataListViewType>
                   sectionLabel="View type"
-                  options={DATA_LIST_VIEW_TILES}
+                  options={viewTypeOptions}
                   columns={4}
                   value={currentView}
                   onValueChange={onViewChange}
@@ -435,6 +454,12 @@ export function TablePropertiesDrawer({
                     </p>
                   ) : null}
 
+                  {isCalendarView ? (
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                      {dataListViewLabel("calendar")} uses the same filtered rows as table and board. Scroll the main calendar vertically to move between months; use the summary panel for a mini month picker and event list.
+                    </p>
+                  ) : null}
+
                   {isBoardView && boardGroupByColumnOptions && boardGroupByColumnOptions.length > 1 ? (
                     <div className="flex items-center justify-between gap-3 py-2">
                       <div className="flex items-center gap-2.5 min-w-0 flex-1">
@@ -462,7 +487,7 @@ export function TablePropertiesDrawer({
                         >
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent align="end">
+                        <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                           {boardGroupByColumnOptions.map(o => (
                             <SelectItem key={o.key} value={o.key}>
                               {o.label}
@@ -510,7 +535,8 @@ export function TablePropertiesDrawer({
                   <div
                     className={cn(
                       "space-y-3",
-                      (viewSurface === "board" || viewSurface === "table") && "border-t border-border pt-4",
+                      (viewSurface === "board" || viewSurface === "table" || isCalendarView) &&
+                        "border-t border-border pt-4",
                     )}
                   >
                     <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Display options</p>
@@ -533,7 +559,7 @@ export function TablePropertiesDrawer({
                             <SelectTrigger size="sm" className="w-[6.5rem] shrink-0" id="board-line-count" aria-label="Line count">
                               <SelectValue />
                             </SelectTrigger>
-                            <SelectContent align="end">
+                            <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                               <SelectItem value="1">1 line</SelectItem>
                               <SelectItem value="2">2 lines</SelectItem>
                               <SelectItem value="3">3 lines</SelectItem>
@@ -618,6 +644,44 @@ export function TablePropertiesDrawer({
                         </>
                       )}
 
+                      {isCalendarView && (
+                        <>
+                          <div className="flex items-center justify-between gap-2 py-2">
+                            <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                              <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
+                                <i className="fa-light fa-sidebar text-[15px] text-secondary-foreground" aria-hidden="true" />
+                              </span>
+                              <div className="min-w-0">
+                                <p className="text-sm font-medium text-foreground leading-tight">Summary panel</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">
+                                  Mini month, event list, and layout on the left.
+                                </p>
+                              </div>
+                            </div>
+                            <ToggleSwitch
+                              id="toggle-calendar-summary"
+                              checked={displayOptions.showCalendarSummaryPanel}
+                              onChange={v => onDisplayOptionsChange({ showCalendarSummaryPanel: v })}
+                            />
+                          </div>
+                          <div className="pt-2">
+                            <SelectionTileGrid
+                              sectionLabel="Main calendar layout"
+                              options={CALENDAR_MAIN_VIEW_TILES.map(t => ({
+                                value: t.value,
+                                label: t.label,
+                                icon: t.icon,
+                              }))}
+                              columns={2}
+                              value={displayOptions.calendarMainView}
+                              onValueChange={v => onDisplayOptionsChange({ calendarMainView: v })}
+                              interaction="button"
+                              idPrefix="props-calendar-main-view"
+                            />
+                          </div>
+                        </>
+                      )}
+
                       {(viewSurface === "table" || viewSurface === "list") && (
                         <div className="flex items-center justify-between gap-2 py-2">
                           <div className="flex items-center gap-2.5 min-w-0 flex-1">
@@ -659,7 +723,7 @@ export function TablePropertiesDrawer({
                         {[
                           { icon: "fa-circle-1", text: "Click \"Add filter\" below" },
                           { icon: "fa-circle-2", text: "Choose a field to filter by" },
-                          { icon: "fa-circle-3", text: "Pick a condition and value" },
+                          { icon: "fa-circle-3", text: "Pick at least one value — the grid updates immediately" },
                         ].map(step => (
                           <div key={step.icon} className="flex items-center gap-2 text-xs text-muted-foreground">
                             <i className={`fa-light ${step.icon} text-muted-foreground text-xs shrink-0`} aria-hidden="true" />
@@ -726,7 +790,7 @@ export function TablePropertiesDrawer({
 
                   {/* Add filter + Remove all */}
                   <div className="flex items-center gap-2 pt-2">
-                    <DropdownMenu>
+                    <DropdownMenu modal={false}>
                       <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
@@ -737,11 +801,11 @@ export function TablePropertiesDrawer({
                           Add filter
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
+                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                         <DropdownMenuLabel className="text-xs">Filter by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {filterFields.map(f => (
-                          <DropdownMenuItem key={f.key} onClick={() => onAddFilter(f.key)}>
+                          <DropdownMenuItem key={f.key} onSelect={() => onAddFilter(f.key)}>
                             <i className={`fa-light ${f.icon}`} aria-hidden="true" />
                             {f.label}
                           </DropdownMenuItem>
@@ -833,7 +897,7 @@ export function TablePropertiesDrawer({
 
                   {/* Add sort + Remove all */}
                   <div className="flex items-center gap-2 pt-2">
-                    <DropdownMenu>
+                    <DropdownMenu modal={false}>
                       <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
@@ -844,11 +908,11 @@ export function TablePropertiesDrawer({
                           Add sort
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
+                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                         <DropdownMenuLabel className="text-xs">Sort by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {sortFieldList.filter(f => !sortRules.some(r => r.fieldKey === f.key)).map(col => (
-                          <DropdownMenuItem key={col.key} onClick={() => onAddSortRule(col.key)}>
+                          <DropdownMenuItem key={col.key} onSelect={() => onAddSortRule(col.key)}>
                             <i className="fa-light fa-arrow-up-arrow-down text-xs" aria-hidden="true" />
                             {col.label}
                           </DropdownMenuItem>
@@ -1052,7 +1116,7 @@ function ConditionalRulesPanel({
       )}
 
       <div className="flex items-center gap-2 pt-2">
-        <DropdownMenu>
+        <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
             <Button
               type="button"
@@ -1063,13 +1127,13 @@ function ConditionalRulesPanel({
               Add rule
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
+          <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
             <DropdownMenuLabel className="text-xs">Rule for column</DropdownMenuLabel>
             <DropdownMenuSeparator />
             {filterFields.map(f => (
               <DropdownMenuItem
                 key={f.key}
-                onClick={() => onAdd({
+                onSelect={() => onAdd({
                   fieldKey: f.key,
                   operator: f.operators[0],
                   values: [],

package/template/components/templates/focused-workflow-layouts.tsx

@@ -0,0 +1,448 @@
+"use client"
+
+/**
+ * Body layouts for `FocusedWorkflowPageTemplate` — single column, stepped wizard,
+ * sectioned sidebar (settings-style), and empty placeholder.
+ */
+
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { Shortcut } from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { useModKeyLabel } from "@/hooks/use-mod-key-label"
+import { useAltKeyLabel } from "@/hooks/use-mod-key-label"
+
+export interface FocusedWorkflowStep {
+  id: string
+  label: string
+  description?: string
+}
+
+export interface FocusedWorkflowSingleColumnProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/** Default body — stack header, form sections, and actions in one column. */
+export function FocusedWorkflowSingleColumn({
+  children,
+  className,
+}: FocusedWorkflowSingleColumnProps) {
+  return <div className={cn("flex min-h-0 flex-1 flex-col gap-6", className)}>{children}</div>
+}
+
+export interface FocusedWorkflowStepIndicatorProps {
+  steps: readonly FocusedWorkflowStep[]
+  currentIndex: number
+  className?: string
+  /** When set, step buttons call this instead of being decorative only. */
+  onStepSelect?: (index: number) => void
+}
+
+export function FocusedWorkflowStepIndicator({
+  steps,
+  currentIndex,
+  className,
+  onStepSelect,
+}: FocusedWorkflowStepIndicatorProps) {
+  const progress =
+    steps.length > 0 ? ((currentIndex + 1) / steps.length) * 100 : 0
+
+  return (
+    <nav
+      className={cn("flex flex-col gap-3", className)}
+      aria-label="Workflow progress"
+    >
+      <div className="flex flex-col gap-1">
+        <p className="text-xs font-medium text-muted-foreground">
+          Step{" "}
+          <span className="tabular-nums text-foreground">{currentIndex + 1}</span>{" "}
+          of <span className="tabular-nums">{steps.length}</span>
+        </p>
+        <div
+          className="h-2 w-full overflow-hidden rounded-full bg-muted"
+          aria-hidden="true"
+        >
+          <div
+            className="h-full rounded-full transition-all duration-300"
+            style={{ width: `${progress}%`, background: "var(--brand-color)" }}
+          />
+        </div>
+      </div>
+      <ol className="flex flex-col gap-2 sm:gap-1.5">
+        {steps.map((step, index) => {
+          const isComplete = index < currentIndex
+          const isCurrent = index === currentIndex
+          const rowClass = cn(
+            "flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors",
+            isCurrent
+              ? "border-[var(--brand-color)]/40 bg-muted/50"
+              : "border-border bg-card",
+            onStepSelect && !isCurrent && "hover:bg-muted/30",
+          )
+          const inner = (
+            <>
+              {isComplete ? (
+                <span
+                  className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-emerald-300/70 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300"
+                  aria-hidden="true"
+                >
+                  <i className="fa-light fa-check text-xs" aria-hidden="true" />
+                </span>
+              ) : (
+                <span
+                  className={cn(
+                    "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold tabular-nums",
+                    isCurrent
+                      ? "border-transparent bg-[var(--brand-color)] text-primary-foreground"
+                      : "border-border bg-background text-muted-foreground",
+                  )}
+                  aria-hidden="true"
+                >
+                  {index + 1}
+                </span>
+              )}
+              <span className="min-w-0 flex-1">
+                <span className="block text-sm font-semibold text-foreground">
+                  {step.label}
+                </span>
+                {step.description && isCurrent ? (
+                  <span className="mt-1 block text-xs leading-snug text-muted-foreground sm:text-sm">
+                    {step.description}
+                  </span>
+                ) : null}
+              </span>
+            </>
+          )
+          return (
+            <li key={step.id} aria-current={isCurrent ? "step" : undefined}>
+              {onStepSelect ? (
+                <button
+                  type="button"
+                  onClick={() => onStepSelect(index)}
+                  className={cn(
+                    rowClass,
+                    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                  )}
+                >
+                  {inner}
+                </button>
+              ) : (
+                <div className={rowClass}>{inner}</div>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+export interface FocusedWorkflowStepFormProps {
+  steps: readonly FocusedWorkflowStep[]
+  currentIndex: number
+  onStepSelect?: (index: number) => void
+  children: React.ReactNode
+  footer: React.ReactNode
+  className?: string
+}
+
+/** Multi-step wizard body — step list, active panel, sticky action footer. */
+export function FocusedWorkflowStepForm({
+  steps,
+  currentIndex,
+  onStepSelect,
+  children,
+  footer,
+  className,
+}: FocusedWorkflowStepFormProps) {
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col gap-8", className)}>
+      <FocusedWorkflowStepIndicator
+        steps={steps}
+        currentIndex={currentIndex}
+        onStepSelect={onStepSelect}
+      />
+      <div className="min-h-0 flex-1">{children}</div>
+      <div className="sticky bottom-0 z-10 -mx-4 border-t border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+        {footer}
+      </div>
+    </div>
+  )
+}
+
+export interface FocusedWorkflowSidebarSection {
+  id: string
+  label: string
+}
+
+export interface FocusedWorkflowSidebarSectionsProps {
+  sections: readonly FocusedWorkflowSidebarSection[]
+  activeSectionId?: string
+  onSectionSelect?: (id: string) => void
+  /** Full-width block above the nav + content grid (e.g. `PageHeader`). */
+  header?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+  navLabel?: string
+}
+
+/** Grid for settings-style section nav + body (shared with route loading skeleton). */
+export const FOCUSED_WORKFLOW_SIDEBAR_SECTIONS_GRID_CLASS =
+  "lg:grid lg:grid-cols-[minmax(10rem,12rem)_minmax(0,1fr)] lg:gap-x-12 lg:gap-y-8 lg:items-start"
+
+/**
+ * Sectioned form with a **left nav rail** (settings-style). Use `id` on each
+ * `<section>` in `children` matching `sections[].id` for in-page anchors.
+ */
+export function FocusedWorkflowSidebarSections({
+  sections,
+  activeSectionId,
+  onSectionSelect,
+  header,
+  children,
+  className,
+  navLabel = "Sections",
+}: FocusedWorkflowSidebarSectionsProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-8",
+        FOCUSED_WORKFLOW_SIDEBAR_SECTIONS_GRID_CLASS,
+        className,
+      )}
+    >
+      {header ? <div className="min-w-0 lg:col-span-2">{header}</div> : null}
+      <nav
+        className="flex shrink-0 flex-col gap-0.5 lg:sticky lg:top-6 lg:self-start"
+        aria-label={navLabel}
+      >
+        {sections.map(section => {
+          const isActive = section.id === activeSectionId
+          return (
+            <button
+              key={section.id}
+              type="button"
+              onClick={() => onSectionSelect?.(section.id)}
+              className={cn(
+                "rounded-md py-2 text-left text-sm transition-colors",
+                "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                isActive
+                  ? "bg-muted font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+              )}
+              aria-current={isActive ? "true" : undefined}
+            >
+              {section.label}
+            </button>
+          )
+        })}
+      </nav>
+      <div className="min-w-0 flex-1 flex flex-col gap-16">{children}</div>
+    </div>
+  )
+}
+
+export interface FocusedWorkflowEmptyStateProps {
+  iconClass?: string
+  title: string
+  description?: string
+  action?: React.ReactNode
+  className?: string
+}
+
+export function FocusedWorkflowEmptyState({
+  iconClass = "fa-layer-group",
+  title,
+  description,
+  action,
+  className,
+}: FocusedWorkflowEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[min(24rem,50vh)] flex-col items-center justify-center gap-4 px-4 text-center",
+        className,
+      )}
+      role="status"
+    >
+      <span
+        className="flex size-14 items-center justify-center rounded-xl bg-muted text-muted-foreground"
+        aria-hidden="true"
+      >
+        <i className={cn("fa-light text-xl", iconClass)} aria-hidden="true" />
+      </span>
+      <div className="max-w-md space-y-2">
+        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {action}
+    </div>
+  )
+}
+
+export interface FocusedWorkflowActionFooterProps {
+  onCancel: () => void
+  cancelLabel?: string
+  cancelDisabled?: boolean
+  primary: React.ReactNode
+  secondary?: React.ReactNode
+  className?: string
+}
+
+/** Workflow footer — Cancel (Esc) + primary slot (usually submit with ⏎ Kbd). */
+export function FocusedWorkflowActionFooter({
+  onCancel,
+  cancelLabel = "Cancel",
+  cancelDisabled,
+  primary,
+  secondary,
+  className,
+}: FocusedWorkflowActionFooterProps) {
+  return (
+    <>
+      <Shortcut keys="Escape" disabled={cancelDisabled} onInvoke={onCancel} />
+      <div className={cn("flex flex-wrap items-center gap-2", className)}>
+        <Button
+          type="button"
+          variant="outline"
+          className="flex-1 min-w-[8rem] sm:flex-none"
+          disabled={cancelDisabled}
+          onClick={onCancel}
+        >
+          {cancelLabel}
+          <KbdGroup className="ml-1.5">
+            <Kbd variant="bare">Esc</Kbd>
+          </KbdGroup>
+        </Button>
+        {secondary}
+        <div className="flex flex-1 min-w-[8rem] justify-end sm:flex-none">{primary}</div>
+      </div>
+    </>
+  )
+}
+
+export interface FocusedWorkflowWizardFooterProps {
+  stepIndex: number
+  stepCount: number
+  onBack: () => void
+  onCancel: () => void
+  onNext: () => void
+  onSubmit?: () => void
+  isFirstStep?: boolean
+  isLastStep?: boolean
+  nextLabel?: string
+  submitLabel?: string
+  cancelLabel?: string
+  disabled?: boolean
+  submitting?: boolean
+}
+
+/** Step wizard footer — Back (⌘⌥←), Cancel (Esc), Next (⌘⏎) or Submit (⏎). */
+export function FocusedWorkflowWizardFooter({
+  stepIndex,
+  stepCount,
+  onBack,
+  onCancel,
+  onNext,
+  onSubmit,
+  isFirstStep,
+  isLastStep,
+  nextLabel = "Next",
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  disabled,
+  submitting,
+}: FocusedWorkflowWizardFooterProps) {
+  const mod = useModKeyLabel()
+  const alt = useAltKeyLabel()
+  const first = isFirstStep ?? stepIndex === 0
+  const last = isLastStep ?? stepIndex >= stepCount - 1
+
+  return (
+    <>
+      <Shortcut keys="Escape" disabled={disabled || submitting} onInvoke={onCancel} />
+      {!first ? (
+        <Shortcut
+          keys={`${mod}${alt}←`}
+          disabled={disabled || submitting}
+          onInvoke={onBack}
+        />
+      ) : null}
+      {last ? (
+        <Shortcut keys="Enter" disabled={disabled || submitting} onInvoke={() => onSubmit?.()} />
+      ) : (
+        <Shortcut keys={`${mod}Enter`} disabled={disabled || submitting} onInvoke={onNext} />
+      )}
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          disabled={disabled || submitting}
+          onClick={onCancel}
+        >
+          {cancelLabel}
+          <KbdGroup className="ml-1.5">
+            <Kbd variant="bare">Esc</Kbd>
+          </KbdGroup>
+        </Button>
+        {!first ? (
+          <Button
+            type="button"
+            variant="outline"
+            disabled={disabled || submitting}
+            onClick={onBack}
+          >
+            Back
+            <KbdGroup className="ml-1.5">
+              <Kbd variant="bare">
+                {mod}
+                {alt}←
+              </Kbd>
+            </KbdGroup>
+          </Button>
+        ) : null}
+        <div className="ms-auto flex flex-1 min-w-[8rem] justify-end sm:flex-none">
+          {last ? (
+            <Button
+              type="button"
+              disabled={disabled || submitting}
+              aria-busy={submitting}
+              onClick={() => onSubmit?.()}
+            >
+              {submitting ? (
+                <>
+                  <i
+                    className="fa-light fa-spinner-third fa-spin text-[13px]"
+                    aria-hidden="true"
+                  />
+                  Saving…
+                </>
+              ) : (
+                <>
+                  {submitLabel}
+                  <KbdGroup className="ml-1.5">
+                    <Kbd variant="bare">⏎</Kbd>
+                  </KbdGroup>
+                </>
+              )}
+            </Button>
+          ) : (
+            <Button type="button" disabled={disabled || submitting} onClick={onNext}>
+              {nextLabel}
+              <KbdGroup className="ml-1.5">
+                <Kbd variant="bare">
+                  {mod}⏎
+                </Kbd>
+              </KbdGroup>
+            </Button>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}