@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/ImageViewer/components/ImageToolbar.tsx

@@ -7,7 +7,7 @@
 import { useMemo } from 'react';
 import { ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
 import { useControls } from 'react-zoom-pan-pinch';
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@djangocfg/ui-core/components';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@djangocfg/ui-core/components';
 import { useAppT } from '@djangocfg/i18n';
 import { cn } from '@djangocfg/ui-core/lib';
 import { ZOOM_PRESETS } from '../utils';
@@ -17,6 +17,18 @@ import type { ImageToolbarProps } from '../types';
 // COMPONENT
 // =============================================================================
 
+// The toolbar floats over the image, whose brightness is unknown and
+// unrelated to the host theme. A theme-bound `bg-background` surface
+// would clash with a dark photo (white slab) or a light photo in dark
+// mode. A fixed dark-glass overlay with light icons stays readable on
+// any content — the same model the gallery nav arrows and media
+// players use.
+const TB_BUTTON =
+  'inline-flex items-center justify-center rounded-md text-white/90 ' +
+  'transition-colors hover:bg-white/15 hover:text-white ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 ' +
+  'disabled:opacity-40 disabled:pointer-events-none';
+
 export function ImageToolbar({
   scale,
   transform,
@@ -45,23 +57,25 @@ export function ImageToolbar({
   }, [scale]);
 
   return (
-    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg">
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-black/60 backdrop-blur-sm border border-white/10 rounded-lg p-1 shadow-lg">
       {/* Zoom controls */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
+      <button
+        type="button"
+        className={cn(TB_BUTTON, 'h-7 w-7')}
         onClick={() => zoomOut()}
         title={labels.zoomOut}
       >
         <ZoomOut className="h-3.5 w-3.5" />
-      </Button>
+      </button>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-7 px-2 min-w-[52px] font-mono text-xs">
+          <button
+            type="button"
+            className={cn(TB_BUTTON, 'h-7 px-2 min-w-[52px] font-mono text-xs')}
+          >
             {zoomLabel}
-          </Button>
+          </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="center" className="min-w-[80px]">
           {ZOOM_PRESETS.map((preset) => (
@@ -76,80 +90,74 @@ export function ImageToolbar({
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
+      <button
+        type="button"
+        className={cn(TB_BUTTON, 'h-7 w-7')}
         onClick={() => zoomIn()}
         title={labels.zoomIn}
       >
         <ZoomIn className="h-3.5 w-3.5" />
-      </Button>
+      </button>
 
-      <div className="w-px h-4 bg-border mx-1" />
+      <div className="w-px h-4 bg-white/20 mx-1" />
 
       {/* Fit to view */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
+      <button
+        type="button"
+        className={cn(TB_BUTTON, 'h-7 w-7')}
         onClick={() => resetTransform()}
         title={labels.fitToView}
       >
         <Maximize2 className="h-3.5 w-3.5" />
-      </Button>
+      </button>
 
-      <div className="w-px h-4 bg-border mx-1" />
+      <div className="w-px h-4 bg-white/20 mx-1" />
 
       {/* Transform controls */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn('h-7 w-7', transform.flipH && 'bg-accent')}
+      <button
+        type="button"
+        className={cn(TB_BUTTON, 'h-7 w-7', transform.flipH && 'bg-white/20 text-white')}
         onClick={onFlipH}
         title={labels.flipHorizontal}
       >
         <FlipHorizontal className="h-3.5 w-3.5" />
-      </Button>
+      </button>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn('h-7 w-7', transform.flipV && 'bg-accent')}
+      <button
+        type="button"
+        className={cn(TB_BUTTON, 'h-7 w-7', transform.flipV && 'bg-white/20 text-white')}
         onClick={onFlipV}
         title={labels.flipVertical}
       >
         <FlipVertical className="h-3.5 w-3.5" />
-      </Button>
+      </button>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
+      <button
+        type="button"
+        className={cn(TB_BUTTON, 'h-7 w-7')}
         onClick={onRotate}
         title={labels.rotate}
       >
         <RotateCw className="h-3.5 w-3.5" />
-      </Button>
+      </button>
 
       {transform.rotation !== 0 && (
-        <span className="text-[10px] text-muted-foreground font-mono pl-1">
+        <span className="text-[10px] text-white/60 font-mono pl-1">
           {transform.rotation}°
         </span>
       )}
 
       {onExpand && (
         <>
-          <div className="w-px h-4 bg-border mx-1" />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
+          <div className="w-px h-4 bg-white/20 mx-1" />
+          <button
+            type="button"
+            className={cn(TB_BUTTON, 'h-7 w-7')}
             onClick={onExpand}
             title={labels.fullscreen}
           >
             <Expand className="h-3.5 w-3.5" />
-          </Button>
+          </button>
         </>
       )}
     </div>

package/src/tools/ImageViewer/components/ImageViewer.tsx

@@ -14,8 +14,12 @@
  */
 
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { ImageIcon, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
-import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
+import { ImageIcon, AlertCircle, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import {
+  TransformWrapper,
+  TransformComponent,
+  type ReactZoomPanPinchRef,
+} from 'react-zoom-pan-pinch';
 import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription } from '@djangocfg/ui-core';
 import { useAppT } from '@djangocfg/i18n';
 import { useHotkey } from '@djangocfg/ui-core/hooks';
@@ -23,7 +27,8 @@ import { useHotkey } from '@djangocfg/ui-core/hooks';
 import { ImageToolbar } from './ImageToolbar';
 import { ImageInfo } from './ImageInfo';
 import { useImageTransform, useImageLoading } from '../hooks';
-import type { ImageViewerProps, ImageItem } from '../types';
+import { KEYBOARD_PAN_STEP } from '../utils';
+import type { ImageViewerProps } from '../types';
 
 // =============================================================================
 // COMPONENT
@@ -51,13 +56,16 @@ export function ImageViewer({
   const [scale, setScale] = useState(1);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [loadError, setLoadError] = useState(false);
+  const [imgDecoded, setImgDecoded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const controlsRef = useRef<ReturnType<typeof useControls> | null>(null);
+  const controlsRef = useRef<ReactZoomPanPinchRef | null>(null);
 
   const labels = useMemo(() => ({
     noImage: t('tools.image.noImage'),
     failedToLoad: t('tools.image.failedToLoad'),
     loading: t('ui.form.loading'),
+    prev: t('tools.gallery.previous'),
+    next: t('tools.gallery.next'),
   }), [t]);
 
   const {
@@ -73,16 +81,34 @@ export function ImageViewer({
     src: current?.src,
   });
 
-  useEffect(() => { setLoadError(false); }, [src]);
+  // Reset per-source load flags whenever the source changes
+  useEffect(() => {
+    setLoadError(false);
+    setImgDecoded(false);
+  }, [src]);
 
   const { transform, rotate, flipH, flipV, transformStyle } = useImageTransform({
     resetKey: current?.file.path ?? '',
   });
 
   const handleZoomPreset = useCallback((value: number | 'fit') => {
-    if (!controlsRef.current) return;
-    if (value === 'fit') controlsRef.current.resetTransform();
-    else controlsRef.current.setTransform(0, 0, value);
+    const controls = controlsRef.current;
+    if (!controls) return;
+    if (value === 'fit') {
+      controls.resetTransform();
+      return;
+    }
+    // Anchor preset zoom to the canvas center instead of the top-left origin
+    const el = controls.instance.wrapperComponent;
+    if (el) {
+      const cx = el.offsetWidth / 2;
+      const cy = el.offsetHeight / 2;
+      const x = cx - cx * value;
+      const y = cy - cy * value;
+      controls.setTransform(x, y, value);
+    } else {
+      controls.setTransform(0, 0, value);
+    }
   }, []);
 
   const handleExpand = useCallback(() => setDialogOpen(true), []);
@@ -97,7 +123,18 @@ export function ImageViewer({
     [images.length]
   );
 
-  // Keyboard: zoom/rotate (only when container focused)
+  // Pan the image by a fixed offset (arrow keys)
+  const panBy = useCallback((dx: number, dy: number) => {
+    const controls = controlsRef.current;
+    if (!controls) return false;
+    const { positionX, positionY, scale: s } = controls.instance.transformState;
+    // Only pan when the image is zoomed in — otherwise it cannot move
+    if (s <= 1) return false;
+    controls.setTransform(positionX + dx, positionY + dy, s);
+    return true;
+  }, []);
+
+  // Keyboard: zoom / rotate / pan (only when container focused)
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!containerRef.current?.contains(document.activeElement) &&
@@ -106,18 +143,33 @@ export function ImageViewer({
       if (!controls) return;
       switch (e.key) {
         case '+': case '=': e.preventDefault(); controls.zoomIn(); break;
-        case '-': e.preventDefault(); controls.zoomOut(); break;
+        case '-': case '_': e.preventDefault(); controls.zoomOut(); break;
         case '0': e.preventDefault(); controls.resetTransform(); break;
-        case 'r': if (!e.metaKey && !e.ctrlKey) { e.preventDefault(); rotate(); } break;
+        case 'r': case 'R':
+          if (!e.metaKey && !e.ctrlKey) { e.preventDefault(); rotate(); }
+          break;
+        // Arrow keys pan only when zoomed in. While at fit scale they
+        // fall through to gallery navigation (handled by useHotkey).
+        case 'ArrowUp': if (panBy(0, KEYBOARD_PAN_STEP)) e.preventDefault(); break;
+        case 'ArrowDown': if (panBy(0, -KEYBOARD_PAN_STEP)) e.preventDefault(); break;
+        case 'ArrowLeft': if (panBy(KEYBOARD_PAN_STEP, 0)) e.preventDefault(); break;
+        case 'ArrowRight': if (panBy(-KEYBOARD_PAN_STEP, 0)) e.preventDefault(); break;
       }
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [rotate]);
+  }, [rotate, panBy]);
 
-  // Keyboard: gallery navigation (global when open)
-  useHotkey('ArrowLeft', prev, { enabled: hasMultiple, preventDefault: true });
-  useHotkey('ArrowRight', next, { enabled: hasMultiple, preventDefault: true });
+  // Keyboard: gallery navigation (global, only while not zoomed in so it
+  // never competes with arrow-key panning)
+  useHotkey('ArrowLeft', prev, {
+    enabled: hasMultiple && scale <= 1,
+    preventDefault: true,
+  });
+  useHotkey('ArrowRight', next, {
+    enabled: hasMultiple && scale <= 1,
+    preventDefault: true,
+  });
 
   if (!current) {
     return (
@@ -153,8 +205,11 @@ export function ImageViewer({
     <div
       ref={containerRef}
       tabIndex={0}
+      role="img"
+      aria-label={current.file.name}
       className={cn(
         'flex-1 h-full relative overflow-hidden outline-none',
+        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
         'bg-[length:16px_16px]',
         '[background-color:color-mix(in_oklab,var(--muted)_20%,transparent)]',
         '[background-image:linear-gradient(45deg,color-mix(in_oklab,var(--muted)_40%,transparent)_25%,transparent_25%),linear-gradient(-45deg,color-mix(in_oklab,var(--muted)_40%,transparent)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,color-mix(in_oklab,var(--muted)_40%,transparent)_75%),linear-gradient(-45deg,transparent_75%,color-mix(in_oklab,var(--muted)_40%,transparent)_75%)]',
@@ -164,19 +219,31 @@ export function ImageViewer({
       {src && <ImageInfo src={src} />}
 
       {useProgressiveLoading && !isFullyLoaded && (
-        <div className="absolute top-3 left-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono flex items-center gap-1.5">
-          <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+        <div className="absolute top-3 left-3 z-10 px-2 py-1 bg-black/60 backdrop-blur-sm border border-white/10 rounded text-[10px] text-white/80 font-mono flex items-center gap-1.5">
+          <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse" />
           {labels.loading}
         </div>
       )}
 
+      {/* Spinner while a non-progressive image is still decoding */}
+      {!useProgressiveLoading && !imgDecoded && !loadError && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 pointer-events-none">
+          <Loader2 className="w-8 h-8 text-muted-foreground/60 animate-spin" />
+          <span className="text-xs text-muted-foreground">{labels.loading}</span>
+        </div>
+      )}
+
       <TransformWrapper
         initialScale={1}
         minScale={0.1}
         maxScale={8}
         centerOnInit
         centerZoomedOut
-        onTransformed={(ref, state) => { setScale(state.scale); controlsRef.current = ref; }}
+        onTransformed={(ref, state) => {
+          controlsRef.current = ref;
+          // Avoid a re-render on every pan frame — only when zoom changes
+          setScale((prev) => (prev === state.scale ? prev : state.scale));
+        }}
         onInit={(ref) => { controlsRef.current = ref; }}
         wheel={{ step: 0.1 }}
         doubleClick={{ mode: 'toggle', step: 2 }}
@@ -222,11 +289,12 @@ export function ImageViewer({
                 className="max-w-full max-h-full object-contain select-none"
                 style={{
                   transform: transformStyle,
-                  transition: useProgressiveLoading ? 'transform 0.15s ease-out, opacity 0.3s ease-out' : 'transform 0.15s ease-out',
-                  opacity: useProgressiveLoading && !isFullyLoaded ? 0 : 1,
+                  transition: 'transform 0.15s ease-out, opacity 0.3s ease-out',
+                  opacity:
+                    (useProgressiveLoading && !isFullyLoaded) || !imgDecoded ? 0 : 1,
                 }}
                 draggable={false}
-                crossOrigin="anonymous"
+                onLoad={() => setImgDecoded(true)}
                 onError={() => setLoadError(true)}
               />
             )}
@@ -240,18 +308,22 @@ export function ImageViewer({
           <button
             type="button"
             onClick={prev}
-            className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors"
+            aria-label={labels.prev}
+            title={labels.prev}
+            className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
           >
             <ChevronLeft className="h-5 w-5" />
           </button>
           <button
             type="button"
             onClick={next}
-            className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors"
+            aria-label={labels.next}
+            title={labels.next}
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
           >
             <ChevronRight className="h-5 w-5" />
           </button>
-          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 bg-black/50 text-white text-xs px-2 py-0.5 rounded-full pointer-events-none">
+          <div className="absolute top-3 left-1/2 -translate-x-1/2 z-10 bg-black/60 backdrop-blur-sm border border-white/10 text-white/80 text-xs font-mono px-2 py-0.5 rounded-full pointer-events-none">
             {currentIndex + 1} / {images.length}
           </div>
         </>

package/src/tools/ImageViewer/hooks/useImageLoading.ts

@@ -171,11 +171,16 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
       return;
     }
 
+    setLqip(null);
     setIsFullyLoaded(false);
     imageDebug.state('progressive loading', { size });
 
+    // Guard against state updates after src change / unmount
+    let cancelled = false;
+
     // Create low-quality placeholder
     createLQIP(src).then((placeholder) => {
+      if (cancelled || !isMountedRef.current) return;
       if (placeholder) {
         imageDebug.debug('LQIP created');
         setLqip(placeholder);
@@ -185,6 +190,7 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
     // Pre-load full image
     const img = new Image();
     img.onload = () => {
+      if (cancelled || !isMountedRef.current) return;
       imageDebug.state('fully loaded');
       setIsFullyLoaded(true);
     };
@@ -192,6 +198,13 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
       imageDebug.error('Failed to load full image');
     };
     img.src = src;
+
+    return () => {
+      cancelled = true;
+      img.onload = null;
+      img.onerror = null;
+      img.src = '';
+    };
   }, [src, useProgressiveLoading, size]);
 
   return {

package/src/tools/ImageViewer/utils/constants.ts

@@ -37,6 +37,9 @@ export const MIN_ZOOM = 0.1;
 /** Maximum zoom level */
 export const MAX_ZOOM = 8;
 
+/** Pixels to pan per arrow-key press */
+export const KEYBOARD_PAN_STEP = 60;
+
 /** Available zoom presets */
 export const ZOOM_PRESETS: readonly ZoomPreset[] = [
   { label: 'Fit', value: 'fit' },

package/src/tools/ImageViewer/utils/index.ts

@@ -11,6 +11,7 @@ export {
   LQIP_QUALITY,
   MIN_ZOOM,
   MAX_ZOOM,
+  KEYBOARD_PAN_STEP,
   ZOOM_PRESETS,
   DEFAULT_TRANSFORM,
 } from './constants';

package/src/tools/JsonForm/JsonSchemaForm.tsx

@@ -17,7 +17,8 @@ import {
 import { JsonFormContext, JsonSchemaFormProps } from './types';
 import { normalizeFormData, validateSchema } from './utils';
 import {
-    CheckboxWidget, ColorWidget, NumberWidget, SelectWidget, SliderWidget, SwitchWidget, TextareaWidget, TextWidget
+    CheckboxWidget, ColorWidget, NumberWidget, RadioWidget, SelectWidget, SliderWidget, SwitchWidget,
+    TextareaWidget, TextWidget
 } from './widgets';
 
 /**
@@ -108,6 +109,7 @@ export function JsonSchemaForm<T = any>(props: JsonSchemaFormProps<T>) {
     NumberWidget,
     CheckboxWidget,
     SelectWidget,
+    RadioWidget,
     SwitchWidget,
     ColorWidget,
     SliderWidget,
@@ -117,6 +119,7 @@ export function JsonSchemaForm<T = any>(props: JsonSchemaFormProps<T>) {
     number: NumberWidget,
     checkbox: CheckboxWidget,
     select: SelectWidget,
+    radio: RadioWidget,
     switch: SwitchWidget,
     color: ColorWidget,
     slider: SliderWidget,

package/src/tools/JsonForm/templates/ArrayFieldTemplate.tsx

@@ -4,6 +4,7 @@ import { Plus } from 'lucide-react';
 import React from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
+import { useAppT } from '@djangocfg/i18n';
 import { ArrayFieldTemplateProps } from '@rjsf/utils';
 
 /**
@@ -23,6 +24,7 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
     onAddClick,
     required,
   } = props;
+  const t = useAppT();
 
   return (
     <div className="space-y-4">
@@ -41,7 +43,7 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
               className="gap-2"
             >
               <Plus className="h-4 w-4" />
-              Add Item
+              {t('tools.jsonForm.addItem')}
             </Button>
           )}
         </div>
@@ -54,7 +56,7 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
 
       {items.length === 0 && (
         <div className="text-center py-8 text-muted-foreground border-2 border-dashed rounded-md">
-          No items added yet.
+          {t('tools.jsonForm.noItems')}
           {canAdd && (
             <Button
               type="button"
@@ -64,7 +66,7 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
               className="mt-2 gap-2"
             >
               <Plus className="h-4 w-4" />
-              Add First Item
+              {t('tools.jsonForm.addFirstItem')}
             </Button>
           )}
         </div>

package/src/tools/JsonForm/templates/BaseInputTemplate.tsx

@@ -3,8 +3,11 @@
 import React, { ChangeEvent, FocusEvent, useCallback, useMemo } from 'react';
 
 import { Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 import { getInputProps, WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from '../widgets/_useWidgetEnv';
+
 /**
  * Base input template for JSON Schema Form
  *
@@ -24,8 +27,6 @@ export function BaseInputTemplate(props: WidgetProps) {
     id,
     type,
     value,
-    readonly,
-    disabled,
     autofocus,
     onBlur,
     onFocus,
@@ -35,6 +36,7 @@ export function BaseInputTemplate(props: WidgetProps) {
     rawErrors,
     placeholder,
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
 
   // Get input props from RJSF utils (handles step, min, max, etc.)
   const inputProps = useMemo(() => {
@@ -92,13 +94,14 @@ export function BaseInputTemplate(props: WidgetProps) {
       type={inputType}
       value={safeValue}
       disabled={disabled}
-      readOnly={readonly}
       autoFocus={autofocus}
       onChange={handleChange}
       onBlur={handleBlur}
       onFocus={handleFocus}
       placeholder={placeholder}
-      className={hasError ? 'border-destructive' : ''}
+      title={tooltipText}
+      aria-invalid={hasError || undefined}
+      className={cn(hasError && 'border-destructive', compact && 'h-7 text-xs')}
       step={inputProps.step}
       min={inputProps.min}
       max={inputProps.max}

package/src/tools/JsonForm/templates/ErrorListTemplate.tsx

@@ -4,6 +4,7 @@ import { AlertCircle } from 'lucide-react';
 import React from 'react';
 
 import { Alert, AlertDescription, AlertTitle } from '@djangocfg/ui-core/components';
+import { useAppT } from '@djangocfg/i18n';
 import { ErrorListProps } from '@rjsf/utils';
 
 /**
@@ -12,6 +13,7 @@ import { ErrorListProps } from '@rjsf/utils';
  */
 export function ErrorListTemplate(props: ErrorListProps) {
   const { errors } = props;
+  const t = useAppT();
 
   if (!errors || errors.length === 0) {
     return null;
@@ -20,7 +22,7 @@ export function ErrorListTemplate(props: ErrorListProps) {
   return (
     <Alert variant="destructive" className="mb-6">
       <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Validation Errors</AlertTitle>
+      <AlertTitle>{t('tools.jsonForm.validationErrors')}</AlertTitle>
       <AlertDescription>
         <ul className="list-disc list-inside space-y-1 mt-2">
           {errors.map((error, index) => (

package/src/tools/JsonForm/templates/ObjectFieldTemplate.tsx

@@ -9,6 +9,21 @@ import { ObjectFieldTemplateProps } from '@rjsf/utils';
 
 import type { JsonFormDensity, UiGroup } from '../types';
 
+/**
+ * Static map of literal grid-column classes.
+ *
+ * Tailwind JIT only compiles classes it can see at build time, so a
+ * runtime-built `grid-cols-${n}` string is never emitted. Listing the
+ * full literal classes here keeps `ui:grid` working. Columns collapse
+ * to a single column on small screens for responsive behaviour.
+ */
+const GRID_COL_CLASS: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4',
+};
+
 /**
  * Object field template for JSON Schema Form
  *
@@ -53,9 +68,14 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   // Check if this is root object (no title usually means root)
   const isRoot = !title;
 
-  // Grid class based on columns
-  const gridClass = gridCols
-    ? `grid gap-4 grid-cols-${gridCols}`
+  // Grid class based on columns. `ui:grid` is clamped to the 1-4 range
+  // covered by GRID_COL_CLASS so Tailwind always has a literal class.
+  const colClass =
+    typeof gridCols === 'number'
+      ? GRID_COL_CLASS[Math.min(4, Math.max(1, Math.round(gridCols)))]
+      : undefined;
+  const gridClass = colClass
+    ? cn('grid', compact ? 'gap-2' : 'gap-4', colClass)
     : compact
       ? 'space-y-2'
       : 'space-y-4';