@alfakit/react 0.1.1 → 0.1.6

package/dist/themes.css

@@ -1,3 +1,5 @@
+@import './components.css';
+
 /*
  * Alfakit themes. Shared by every renderer and imported by their `styles.css`.
  *
@@ -285,7 +287,7 @@
   --secondary: oklch(0.967 0.003 264.542);
   --secondary-foreground: oklch(0.21 0.034 264.665);
   --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted-foreground: oklch(0.535 0.027 264.364);
   --accent: oklch(0.967 0.003 264.542);
   --accent-foreground: oklch(0.21 0.034 264.665);
   --border: oklch(0.928 0.006 264.531);
@@ -676,6 +678,11 @@
     color: var(--primary);
   }
 
+  /* The schema inspector's round button (dev tools) sits above the bar, not on its last item. */
+  :root[data-mobile='bottom'] [data-slot='dev-tools-toggle'] {
+    bottom: calc(var(--alfakit-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1rem);
+  }
+
   /* Room for the bar, sticky actions sit right above it. */
   :root[data-mobile='bottom'] [data-slot='content'] {
     padding-bottom: calc(
@@ -1004,337 +1011,3 @@
   box-shadow: none;
   outline: none;
 }
-
-/* ------------------------------------------------------------------ Charts */
-
-/*
- * Chart.js paints axes, legends and tooltips on the canvas, so chart widgets read these
- * properties from <html> (re-read when the theme or dark mode changes). Colours take any
- * CSS colour; the widths and radius are unitless numbers. Override them in a theme:
- *   :root[data-alfakit-theme~='acme'] { --chart-tooltip-bg: oklch(0.2 0 0); }
- * Stat sparklines (`[data-slot='stat-chart']`) use the `--stat-chart-*` properties.
- */
-:root {
-  --chart-text: var(--muted-foreground);
-  --chart-grid: var(--border);
-  --chart-legend-foreground: var(--muted-foreground);
-  --chart-tooltip-bg: var(--popover);
-  --chart-tooltip-foreground: var(--popover-foreground);
-  --chart-tooltip-border: var(--border);
-  --chart-tooltip-border-width: 1;
-  --chart-tooltip-radius: 6;
-  --stat-chart-stroke-width: 2;
-  --stat-chart-fill-opacity: 0.12;
-}
-
-/*
- * RichEditor `grid` column blocks and `lead` / `small` text, in the editor and in rendered
- * content (`RichContentRenderer`). Columns stack on small screens. Stored as
- * `<div data-type="grid" class="alfakit-grid alfakit-grid-cols-2"><div data-type="gridColumn">`
- * and `<p class="alfakit-lead">`; copy these rules when showing content outside a panel.
- */
-:where(.alfakit-grid) {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr);
-  margin-block: 0.5rem;
-}
-:where(.alfakit-grid-column) {
-  min-width: 0;
-}
-:where(.alfakit-grid-column) > :first-child {
-  margin-block-start: 0;
-}
-@media (min-width: 768px) {
-  :where(.alfakit-grid-cols-2) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-3) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-4) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-5) {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-6) {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}
-:where([contenteditable] .alfakit-grid-column) {
-  border: 1px dashed var(--border);
-  border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
-}
-:where(.alfakit-lead) {
-  font-size: 1.125em;
-  line-height: 1.6;
-}
-:where(.alfakit-prose small) {
-  font-size: 0.8125em;
-}
-
-/* ---------------------------------------------------------- Calendar and tree */
-
-/*
- * The calendar widget (alfasix/alfakit-calendar) draws FullCalendar inside
- * `[data-slot="calendar"]`; FullCalendar reads these `--fc-*` variables, so every theme's
- * tokens (and dark mode) apply. Override them on the slot to restyle one calendar.
- */
-:where(.fc[data-slot='calendar']) {
-  --fc-small-font-size: 0.75rem;
-  --fc-page-bg-color: var(--card);
-  --fc-neutral-bg-color: var(--muted);
-  --fc-neutral-text-color: var(--muted-foreground);
-  --fc-border-color: var(--border);
-  --fc-button-text-color: var(--foreground);
-  --fc-button-bg-color: var(--background);
-  --fc-button-border-color: var(--border);
-  --fc-button-hover-bg-color: var(--accent);
-  --fc-button-hover-border-color: var(--border);
-  --fc-button-active-bg-color: var(--secondary);
-  --fc-button-active-border-color: var(--border);
-  --fc-event-bg-color: var(--primary);
-  --fc-event-border-color: var(--primary);
-  --fc-event-text-color: var(--primary-foreground);
-  --fc-event-selected-overlay-color: color-mix(in oklab, var(--foreground) 25%, transparent);
-  --fc-more-link-bg-color: var(--muted);
-  --fc-more-link-text-color: var(--foreground);
-  --fc-non-business-color: color-mix(in oklab, var(--muted) 60%, transparent);
-  --fc-bg-event-color: var(--primary);
-  --fc-bg-event-opacity: 0.2;
-  --fc-highlight-color: color-mix(in oklab, var(--primary) 15%, transparent);
-  --fc-today-bg-color: color-mix(in oklab, var(--primary) 6%, transparent);
-  --fc-now-indicator-color: var(--destructive);
-  --fc-list-event-hover-bg-color: var(--accent);
-  color: var(--card-foreground);
-}
-/*
- * FullCalendar puts its `fc` class on the slot element itself and injects its own CSS
- * (`.fc .fc-button`, two classes), so these rules are plain selectors anchored on
- * `.fc[data-slot='calendar']` (three) rather than `:where()`, which would always lose.
- * Restyle one calendar with a more specific selector or with the `--fc-*` variables.
- */
-.fc[data-slot='calendar'] .fc-toolbar-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.75rem;
-  color: var(--foreground);
-}
-.fc[data-slot='calendar'] .fc-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.25rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: var(--radius);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  box-shadow: none;
-  text-transform: capitalize;
-}
-.fc[data-slot='calendar'] .fc-button .fc-icon {
-  font-size: 1.125rem;
-}
-.fc[data-slot='calendar'] .fc-button-group > .fc-button:not(:first-child) {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-.fc[data-slot='calendar'] .fc-button-group > .fc-button:not(:last-child) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.fc[data-slot='calendar'] .fc-button-primary:disabled {
-  opacity: 0.5;
-}
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled).fc-button-active,
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled):active {
-  color: var(--secondary-foreground);
-}
-.fc[data-slot='calendar'] .fc-button-primary:focus,
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled).fc-button-active:focus,
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled):active:focus {
-  box-shadow: none;
-}
-.fc[data-slot='calendar'] .fc-button:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-  z-index: 2;
-}
-.fc[data-slot='calendar'] a {
-  color: inherit;
-}
-.fc[data-slot='calendar'] .fc-daygrid-day-number,
-.fc[data-slot='calendar'] .fc-col-header-cell-cushion {
-  text-decoration: none;
-}
-.fc[data-slot='calendar'] .fc-col-header-cell-cushion {
-  padding-block: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--muted-foreground);
-}
-.fc[data-slot='calendar'] .fc-daygrid-day-number {
-  font-size: 0.875rem;
-}
-.fc[data-slot='calendar'] .fc-day-other .fc-daygrid-day-number {
-  color: var(--muted-foreground);
-}
-/* Today: a tinted cell (`--fc-today-bg-color`) and the date in a primary pill. */
-.fc[data-slot='calendar'] .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.75rem;
-  height: 1.75rem;
-  margin: 0.25rem;
-  padding: 0 0.375rem;
-  border-radius: 9999px;
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: 600;
-}
-.fc[data-slot='calendar'] .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
-  color: var(--primary);
-  font-weight: 600;
-}
-.fc[data-slot='calendar'] .fc-event {
-  border-radius: min(var(--radius), 0.375rem);
-}
-.fc[data-slot='calendar'] .fc-daygrid-event,
-.fc[data-slot='calendar'] .fc-timegrid-event .fc-event-main,
-.fc[data-slot='calendar'] .fc-list-event td {
-  font-size: 0.75rem;
-}
-.fc[data-slot='calendar'] .fc-daygrid-dot-event:hover,
-.fc[data-slot='calendar'] .fc-daygrid-dot-event.fc-event-mirror {
-  background: var(--accent);
-}
-.fc[data-slot='calendar'] .fc-list-day-cushion,
-.fc[data-slot='calendar'] .fc-popover-header {
-  color: var(--foreground);
-}
-.fc[data-slot='calendar'] .fc-popover {
-  border-radius: var(--radius);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  overflow: hidden;
-}
-.fc[data-slot='calendar'] .fc-timegrid-slot-label,
-.fc[data-slot='calendar'] .fc-timegrid-axis,
-.fc[data-slot='calendar'] .fc-list-event-time {
-  color: var(--muted-foreground);
-  font-size: 0.75rem;
-}
-/*
- * The list view hides its column headers for screen readers with `left: -10000px`. Right to
- * left that is scrollable overflow: the whole page gains a 10 000 px horizontal scroll and the
- * top bar slides under the sidebar. Clip it in place instead (still read by screen readers).
- */
-.fc[data-slot='calendar'] .fc-list-table thead {
-  left: auto;
-  inset-inline-start: 0;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/*
- * Fields contain what they position. Headless switches, checkboxes and radios render a
- * visually hidden native input beside the control, absolutely positioned (and shifted by
- * -100%); without a positioned field it lands at the page edge and, right to left, widens
- * the page on phones.
- */
-:where([data-slot='field']) {
-  position: relative;
-}
-
-/*
- * Narrow screens: FullCalendar keeps its header toolbar on one row, wider than a phone.
- * Its chunks (navigation, title, views) wrap instead, and the title shrinks. Flex gaps and
- * `justify-content` follow the writing direction, so this works right to left too. (Plain
- * selectors: FullCalendar injects its own CSS, which would beat `:where()`; the slot is
- * the `.fc` element itself.)
- */
-@media (max-width: 39.99rem) {
-  [data-slot='calendar'] .fc-toolbar.fc-header-toolbar {
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-  [data-slot='calendar'] .fc-toolbar .fc-toolbar-chunk {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.25rem;
-    min-width: 0;
-  }
-  [data-slot='calendar'] .fc-toolbar .fc-toolbar-title {
-    font-size: 1rem;
-    overflow-wrap: anywhere;
-  }
-  [data-slot='calendar'] .fc-toolbar .fc-button {
-    font-size: 0.8125rem;
-  }
-}
-
-/*
- * The tree (alfasix/alfakit-tree): the drop indicator while dragging. Rows carry
- * `data-drop="before|after|inside"`; lines are drawn above or below the row, so they
- * need no direction.
- */
-:where([data-slot='tree-item'][data-drop='before']) {
-  box-shadow: inset 0 2px 0 0 var(--primary);
-}
-:where([data-slot='tree-item'][data-drop='after']) {
-  box-shadow: inset 0 -2px 0 0 var(--primary);
-}
-:where([data-slot='tree-item'][data-drop='inside']) {
-  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-  outline: 1px dashed var(--primary);
-  outline-offset: -1px;
-}
-
-/*
- * The Kanban board (alfasix/alfakit-kanban). A card being dragged leaves a dashed
- * placeholder (`data-picked="pointer"`) while a copy follows the pointer
- * (`data-slot="kanban-ghost"`); a card picked up with the keyboard is lifted
- * (`data-picked="keyboard"`). A list the picked card may not enter has `data-refused`.
- */
-:where([data-slot='kanban-card'][data-picked='pointer']) {
-  opacity: 0.45;
-}
-:where([data-slot='kanban-card'][data-picked='pointer'] > [data-slot='kanban-card-body']) {
-  border-style: dashed;
-  box-shadow: none;
-}
-:where([data-slot='kanban-card'][data-picked='keyboard'] > [data-slot='kanban-card-body']) {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
-}
-:where([data-slot='kanban-card'][data-saving]) {
-  opacity: 0.7;
-}
-:where([data-slot='kanban-ghost']) {
-  cursor: grabbing;
-  list-style: none;
-  box-shadow: 0 18px 40px -16px color-mix(in oklab, var(--foreground) 55%, transparent);
-}
-:where([data-slot='kanban-dropzone'][data-refused]) {
-  background-color: color-mix(in oklab, var(--destructive) 8%, transparent);
-  outline: 1px dashed var(--destructive);
-  outline-offset: -1px;
-}
-:where(body[data-kanban-dragging]) {
-  cursor: grabbing;
-  user-select: none;
-  -webkit-user-select: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  :where([data-slot='kanban-card'] > [data-slot='kanban-card-body']) {
-    transition: none;
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/react",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "description": "React + shadcn/ui renderer for Alfakit, the Laravel admin panel builder by Alfa Six.",
   "license": "MIT",
   "author": "Alfa Six (https://alfasixbh.com)",
@@ -96,7 +96,7 @@
     "react-day-picker": "^10.0.2",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
-    "@alfakit/core": "0.1.1"
+    "@alfakit/core": "0.1.6"
   },
   "peerDependencies": {
     "@inertiajs/react": "^3.0.0",

package/src/components/actions/action-button.tsx

@@ -3,6 +3,8 @@ import {
   bindsKeyBindings,
   formatKeyBinding,
   iconButtonSize,
+  isActionLoading,
+  isActionProcessing,
   registerKeyBindings,
   resolveActionSize,
 } from '@alfakit/core'
@@ -71,7 +73,7 @@ function buttonClasses(action: ActionSchema, variant: ActionSchema['variant']):
       return colorClass(ghostButtonColorClasses, color, 'gray')
     case 'link':
       return cn(
-        'h-auto p-0 underline-offset-4 hover:underline',
+        'h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0',
         colorClass(textColorClasses, color, 'primary'),
       )
     case 'icon-button':
@@ -95,9 +97,10 @@ export function ActionButton({
 }: ActionButtonProps) {
   const runner = useActionRunner()
   const t = useT()
-  const loading = useStoreSelector(runner.store, (state) => state.loading === action.name)
+  // Only this run (this record's button), not the same action in every table row.
+  const loading = useStoreSelector(runner.store, (state) => isActionLoading(state, action, context))
   const processing = useStoreSelector(runner.store, (state) =>
-    state.modals.some((modal) => modal.action.name === action.name && modal.processing),
+    isActionProcessing(state, action, context),
   )
 
   const variant =
@@ -244,7 +247,7 @@ export function ActionButton({
       <TooltipContent>
         {tooltip}
         {shortcut && (
-          <kbd className="ms-2 rounded border border-white/20 px-1 font-mono text-[10px]">
+          <kbd dir="ltr" className="ms-2 rounded border border-white/20 px-1 font-mono text-[10px]">
             {formatKeyBinding(shortcut)}
           </kbd>
         )}

package/src/components/actions/action-modals.tsx

@@ -4,6 +4,7 @@ import {
   actionFormParams,
   actionPath,
   confirmModalClose,
+  formIdPrefix,
   FormStore,
   guardModalUnload,
   isModalHiddenByChild,
@@ -156,6 +157,8 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
     return new FormStore(schema.form, {
       token: context.token,
       component: actionFormComponent(action, context),
+      // Own field ids: the modal opens over a form whose fields may share names.
+      idPrefix: formIdPrefix(actionFormComponent(action, context)),
       record: context.record ?? null,
       refreshUrl: panel.endpoints.schemaRefresh,
       optionsUrl: panel.endpoints.schemaOptions,
@@ -219,6 +222,16 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
 
   const submit = (createAnother = false) => {
     submittedRef.current = true
+
+    // A click that blurred a live field started a refresh: send the state it returns.
+    if (form) {
+      form.whenSettled(() => run(createAnother))
+    } else {
+      run(createAnother)
+    }
+  }
+
+  const run = (createAnother: boolean) => {
     const values = form?.state.values ?? {}
     const options = {
       ...(schema.passwordConfirmation ? { password } : {}),
@@ -472,7 +485,6 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
             {footer}
           </DialogFooter>
         )}
-        <span className="sr-only">{t('close', {}, 'Close')}</span>
       </DialogContent>
     </Dialog>
   )

package/src/components/ai/copilot.tsx

@@ -29,7 +29,14 @@ export function useCopilotState(controller: CopilotController): CopilotState {
  * a chat slide-over. Questions, tools and actions run on the server; proposed actions
  * run only when the user confirms them in the chat.
  */
-export function AiCopilot({ component }: { component: AiCopilotSchema }) {
+export function AiCopilot({
+  component,
+  autoOpen = false,
+}: {
+  component: AiCopilotSchema
+  /** Open once mounted (starter kit header: clicked or `mod+j` before its code loaded). */
+  autoOpen?: boolean
+}) {
   const t = useT()
   // One controller per panel: Inertia visits pass new props objects.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -42,6 +49,12 @@ export function AiCopilot({ component }: { component: AiCopilotSchema }) {
   // The panel mounts the first time the copilot opens (button or shortcut), then stays.
   useEffect(() => controller.subscribe((next) => next.open && setMounted(true)), [controller])
 
+  useEffect(() => {
+    if (autoOpen && component.canUse !== false) controller.open()
+    // Only when it mounts.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controller])
+
   useEffect(() => {
     const bindings = JSON.parse(keys) as string[]
 

package/src/components/cms/live-preview.tsx

@@ -78,6 +78,9 @@ export function CmsLivePreview({ component }: { component: CmsLivePreviewSchema
   const autosaveRef = useRef<CmsAutosave | null>(null)
   const status =
     snapshot.hasChanges && component.changedStatus ? component.changedStatus : component.status
+  // "Publish changes" appears as soon as an autosave makes the draft differ.
+  const actions =
+    snapshot.hasChanges && component.changedActions ? component.changedActions : component.actions
 
   // Measured in the browser after mounting: stick right under the panel's topbar when it
   // sticks too, and open the pane beside the form on wide screens (the viewer's last
@@ -220,9 +223,9 @@ export function CmsLivePreview({ component }: { component: CmsLivePreviewSchema
               : t('cms.live_preview', {}, 'Live preview')}
           </Button>
         )}
-        {component.actions && component.actions.length > 0 && (
+        {actions && actions.length > 0 && (
           <div onPointerDownCapture={() => void autosaveRef.current?.flush()}>
-            <ActionList actions={component.actions} context={actionContext} size="sm" />
+            <ActionList actions={actions} context={actionContext} size="sm" />
           </div>
         )}
       </div>

package/src/components/fields/builder.tsx

@@ -89,7 +89,7 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
   const context = useFieldActionContext(component)
   const runner = useActionRunner()
   const runItemAction = useRunItemAction(context)
-  const fallbacks = useItemActionFallbacks(component.addActionLabel)
+  const fallbacks = useItemActionFallbacks(component.addActionLabel, 'builder')
   const resolve = useItemActions(component, fallbacks)
   // Long lists render only the visible blocks (plus a few around them).
   const virtual = useVirtualList(
@@ -142,6 +142,13 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
   }
 
   const blockOf = (type: string) => component.blocks.find((block) => block.name === type)
+  // Summaries are made on the server: collapsing items whose block has one brings them up
+  // to date with the edits.
+  const refreshSummaries = (indexes: number[]) => {
+    if (indexes.some((index) => blockOf(items[index]?.type ?? '')?.summary)) {
+      void form?.refresh(component.statePath)
+    }
+  }
   const underMax = component.maxItems == null || items.length < component.maxItems
   const canAdd = component.addable && !locked && underMax
   const canDelete =
@@ -197,9 +204,10 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
           <CollapseAllActions
             context={context}
             resolve={(name) => resolve(name)}
-            onCollapseAll={() =>
+            onCollapseAll={() => {
               setCollapsed(Object.fromEntries(items.map((_, index) => [index, true])))
-            }
+              refreshSummaries(items.map((_, index) => index))
+            }}
             onExpandAll={() =>
               setCollapsed(Object.fromEntries(items.map((_, index) => [index, false])))
             }
@@ -317,9 +325,10 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
                       onMove={moveWithButton}
                       onClone={() => cloneItem(index)}
                       onDelete={() => removeItem(index)}
-                      onToggle={() =>
+                      onToggle={() => {
                         setCollapsed((state) => ({ ...state, [index]: !isCollapsed }))
-                      }
+                        if (!isCollapsed) refreshSummaries([index])
+                      }}
                     >
                       {hasPreview && !locked && (
                         <Button

package/src/components/fields/color-picker.tsx

@@ -36,6 +36,7 @@ export function ColorPickerField({ component }: { component: ColorPickerSchema }
         <Input
           id={id}
           name={component.name}
+          dir="ltr"
           value={value ?? ''}
           onChange={(event) => setValue(event.target.value)}
           onBlur={blur}

package/src/components/fields/file-upload.tsx

@@ -6,10 +6,10 @@ import {
   editableImageName,
   fetchEditableImage,
   fieldMemory,
+  fileManagerSize,
   filesFromClipboard,
   fileUploadAccept,
   fileUploadPaths,
-  formatBytes,
   insertUploadedFile,
   moveRepeaterItem,
   panelUploadOptions,
@@ -29,7 +29,7 @@ import {
   XIcon,
 } from 'lucide-react'
 import { useRef, useState, type ClipboardEvent, type DragEvent } from 'react'
-import { useChoice, usePanel, useT } from '../../context'
+import { useChoice, useFormatter, usePanel, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { cn } from '../../lib/utils'
 import { useField, useFormStore } from '../form/form-context'
@@ -47,6 +47,7 @@ interface LocalFile extends UploadedFile {
 
 export function FileUploadField({ component }: { component: FileUploadSchema }) {
   const t = useT()
+  const formatter = useFormatter()
   const choice = useChoice()
   const panel = usePanel()
   const { value, setValue, error, id, disabled, readOnly, aria } = useField<
@@ -375,7 +376,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
         variant={circle ? 'secondary' : 'ghost'}
         size="icon-xs"
         className={cn(circle && 'rounded-full shadow')}
-        aria-label={t('remove', {}, 'Remove')}
+        aria-label={t('file_upload.remove', { name: file.name }, 'Remove :name')}
         onClick={() => {
           if (file.error || file.progress !== undefined) {
             releasePreview(file.preview)
@@ -467,7 +468,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                           : file.progress !== undefined && !file.error
                             ? (component.uploadingMessage ?? t('form.uploading', {}, 'Uploading…'))
                             : file.size
-                              ? formatBytes(file.size)
+                              ? fileManagerSize(file.size, formatter)
                               : file.temporary
                                 ? t('form.uploading', {}, 'Pending')
                                 : '')}
@@ -486,7 +487,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                         type="button"
                         variant="ghost"
                         size="icon-xs"
-                        aria-label={t('form.move_up', {}, 'Move up')}
+                        aria-label={t('file_upload.move_up', { name: file.name }, 'Move :name up')}
                         disabled={index === 0}
                         onClick={() => move(index, index - 1)}
                       >
@@ -496,7 +497,11 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                         type="button"
                         variant="ghost"
                         size="icon-xs"
-                        aria-label={t('form.move_down', {}, 'Move down')}
+                        aria-label={t(
+                          'file_upload.move_down',
+                          { name: file.name },
+                          'Move :name down',
+                        )}
                         disabled={index === files.length - 1}
                         onClick={() => move(index, index + 1)}
                       >
@@ -510,7 +515,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                       variant={circle ? 'secondary' : 'ghost'}
                       size="icon-xs"
                       className={cn(circle && 'rounded-full shadow')}
-                      aria-label={t('image_editor.title', {}, 'Edit image')}
+                      aria-label={t('file_upload.edit', { name: file.name }, 'Edit :name')}
                       title={t('image_editor.title', {}, 'Edit image')}
                       data-action="edit-image"
                       onClick={() => void editExisting(file)}
@@ -524,7 +529,7 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                         href={uploadedFileLinks(file).open}
                         target="_blank"
                         rel="noopener noreferrer"
-                        aria-label={`${t('open', {}, 'Open')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`}
+                        aria-label={`${t('file_upload.open', { name: file.name }, 'Open :name')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`}
                       >
                         <ExternalLinkIcon />
                       </a>
@@ -535,7 +540,11 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                       <a
                         href={uploadedFileLinks(file).download}
                         download
-                        aria-label={t('download', {}, 'Download')}
+                        aria-label={t(
+                          'file_upload.download',
+                          { name: file.name },
+                          'Download :name',
+                        )}
                       >
                         <DownloadIcon />
                       </a>
@@ -596,7 +605,9 @@ export function FileUploadField({ component }: { component: FileUploadSchema })
                 <span className="text-muted-foreground text-xs">
                   {[
                     component.acceptedFileTypes?.join(', '),
-                    component.maxSize ? `≤ ${formatBytes(component.maxSize * 1024, 0)}` : null,
+                    component.maxSize
+                      ? `≤ ${fileManagerSize(component.maxSize * 1024, formatter)}`
+                      : null,
                     component.minFiles
                       ? choice(
                           'form.min_files',