@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/JsonForm/widgets/ColorWidget.tsx

@@ -3,21 +3,24 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 
 import { Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 import { useAppT } from '@djangocfg/i18n';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
- * Color input widget for JSON Schema Form
- * Supports HSL format (h s% l%) and HEX format
- * Click on color box to open native color picker directly
+ * Color input widget for JSON Schema Form.
+ *
+ * Supports HSL format (h s% l%) and HEX format. Click on the color box
+ * to open the native color picker directly. Honors `density` and
+ * `ui:disabledWhen` via `useWidgetEnv`.
  */
 export function ColorWidget(props: WidgetProps) {
   const {
     id,
     placeholder,
     required,
-    disabled,
-    readonly,
     autofocus,
     value,
     onChange,
@@ -26,6 +29,7 @@ export function ColorWidget(props: WidgetProps) {
     options,
     rawErrors,
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
 
   const t = useAppT();
   const pickColorLabel = useMemo(() => t('tools.color.pick'), [t]);
@@ -173,10 +177,10 @@ export function ColorWidget(props: WidgetProps) {
 
   // Click on color box opens native color picker
   const handleColorBoxClick = useCallback(() => {
-    if (!disabled && !readonly) {
+    if (!disabled) {
       colorInputRef.current?.click();
     }
-  }, [disabled, readonly]);
+  }, [disabled]);
 
   return (
     <div className="flex items-center gap-2">
@@ -185,8 +189,11 @@ export function ColorWidget(props: WidgetProps) {
         <button
           type="button"
           onClick={handleColorBoxClick}
-          disabled={disabled || readonly}
-          className="h-10 w-10 shrink-0 rounded-md border-2 border-input cursor-pointer hover:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={disabled}
+          className={cn(
+            'shrink-0 rounded-md border-2 border-input cursor-pointer hover:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            compact ? 'h-7 w-7' : 'h-10 w-10',
+          )}
           style={{ backgroundColor: previewColor }}
           aria-label={pickColorLabel}
         />
@@ -197,7 +204,7 @@ export function ColorWidget(props: WidgetProps) {
           value={hexValue}
           onChange={handleColorPickerChange}
           className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
-          disabled={disabled || readonly}
+          disabled={disabled}
           tabIndex={-1}
         />
       </div>
@@ -208,14 +215,15 @@ export function ColorWidget(props: WidgetProps) {
         type="text"
         placeholder={placeholder || (format === 'hsl' ? '217 91% 60%' : '#3b82f6')}
         disabled={disabled}
-        readOnly={readonly}
         autoFocus={autofocus}
         value={safeValue}
         required={required}
         onChange={handleChange}
         onBlur={handleBlur}
         onFocus={handleFocus}
-        className={`flex-1 font-mono text-sm ${hasError ? 'border-destructive' : ''}`}
+        title={tooltipText}
+        aria-invalid={hasError || undefined}
+        className={cn('flex-1 font-mono text-sm', hasError && 'border-destructive', compact && 'h-7 text-xs')}
       />
     </div>
   );

package/src/tools/JsonForm/widgets/NumberWidget.tsx

@@ -3,19 +3,21 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
- * Number input widget for JSON Schema Form
- * Handles integer and number fields
+ * Number input widget for JSON Schema Form.
+ * Handles `integer` and `number` fields. Honors `density` and
+ * `ui:disabledWhen` via `useWidgetEnv`.
  */
 export function NumberWidget(props: WidgetProps) {
   const {
     id,
     placeholder,
     required,
-    disabled,
-    readonly,
     autofocus,
     value,
     onChange,
@@ -25,11 +27,12 @@ export function NumberWidget(props: WidgetProps) {
     schema,
     rawErrors,
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
 
   // Memoize widget configuration
   const config = useMemo(() => ({
     isInteger: schema.type === 'integer',
-    step: schema.type === 'integer' ? '1' : 'any',
+    step: schema.multipleOf ?? (schema.type === 'integer' ? 1 : 'any'),
     min: schema.minimum,
     max: schema.maximum,
     emptyValue: options?.emptyValue,
@@ -39,11 +42,12 @@ export function NumberWidget(props: WidgetProps) {
   const safeValue = useMemo(() => {
     if (value === null || value === undefined || value === '') return '';
     if (typeof value === 'number' && !isNaN(value)) return value;
-    return '';
+    const coerced = Number(value);
+    return isNaN(coerced) ? '' : coerced;
   }, [value]);
 
   const hasError = useMemo(() => {
-    return rawErrors && rawErrors.length > 0;
+    return Boolean(rawErrors && rawErrors.length > 0);
   }, [rawErrors]);
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -73,7 +77,6 @@ export function NumberWidget(props: WidgetProps) {
       type="number"
       placeholder={placeholder}
       disabled={disabled}
-      readOnly={readonly}
       autoFocus={autofocus}
       value={safeValue}
       required={required}
@@ -83,7 +86,9 @@ export function NumberWidget(props: WidgetProps) {
       step={config.step}
       min={config.min}
       max={config.max}
-      className={hasError ? 'border-destructive' : ''}
+      title={tooltipText}
+      aria-invalid={hasError || undefined}
+      className={cn(hasError && 'border-destructive', compact && 'h-7 text-xs')}
     />
   );
 }

package/src/tools/JsonForm/widgets/RadioWidget.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Label, RadioGroup, RadioGroupItem } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { WidgetProps } from '@rjsf/utils';
+
+import { useWidgetEnv } from './_useWidgetEnv';
+
+/**
+ * Radio group widget for JSON Schema Form.
+ *
+ * Renders `enum` fields as a vertical list of radio buttons — an
+ * alternative to `SelectWidget` for small option sets. Opt in via
+ * `uiSchema`:
+ *
+ *     { plan: { 'ui:widget': 'radio' } }
+ *
+ * Set `ui:options.inline = true` to lay the options out in a row.
+ * Honors `density` and `ui:disabledWhen` via `useWidgetEnv`.
+ */
+export function RadioWidget(props: WidgetProps) {
+  const { id, value, options, onChange, onBlur, onFocus } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
+
+  const enumOptions = useMemo(() => {
+    const opts = options?.enumOptions;
+    if (!Array.isArray(opts)) return [];
+    return opts.filter((opt) => opt && opt.value !== undefined);
+  }, [options]);
+
+  const inline = options?.inline === true;
+
+  const safeValue = useMemo(() => {
+    if (value === null || value === undefined) return '';
+    return String(value);
+  }, [value]);
+
+  const handleChange = useCallback((next: string) => {
+    onChange(next);
+    onBlur(id, next);
+  }, [onChange, onBlur, id]);
+
+  if (enumOptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <RadioGroup
+      value={safeValue}
+      onValueChange={handleChange}
+      disabled={disabled}
+      onFocus={() => onFocus(id, value)}
+      title={tooltipText}
+      className={cn(
+        inline ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'grid gap-2',
+        compact && 'gap-1.5',
+      )}
+    >
+      {enumOptions.map((option: { value: unknown; label?: string }) => {
+        const optValue = String(option.value);
+        const optId = `${id}-${optValue}`;
+        return (
+          <div key={optValue || '__empty__'} className="flex items-center gap-2">
+            <RadioGroupItem value={optValue} id={optId} disabled={disabled} />
+            <Label
+              htmlFor={optId}
+              className={cn('cursor-pointer font-normal', compact && 'text-xs')}
+            >
+              {option.label || optValue}
+            </Label>
+          </div>
+        );
+      })}
+    </RadioGroup>
+  );
+}

package/src/tools/JsonForm/widgets/SelectWidget.tsx

@@ -66,6 +66,7 @@ export function SelectWidget(props: WidgetProps) {
         disabled={disabled}
         readOnly={disabled}
         title={tooltipText}
+        aria-invalid={hasError || undefined}
         className={`flex h-10 w-full rounded-md border ${
           hasError ? 'border-destructive' : 'border-input'
         } bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`}

package/src/tools/JsonForm/widgets/SliderWidget.tsx

@@ -54,21 +54,24 @@ export function SliderWidget(props: WidgetProps) {
     return { min, max, step, unit, showInput };
   }, [schema, options]);
 
-  // Parse value - handle string values like "0.5rem"
+  // Parse value - handle string values like "0.5rem". The result is
+  // clamped to [min, max] so an out-of-range value never pushes the
+  // Radix thumb off the track.
   const numericValue = useMemo(() => {
+    const clamp = (n: number) => Math.min(config.max, Math.max(config.min, n));
     if (value === null || value === undefined || value === '') {
       return config.min;
     }
     if (typeof value === 'number') {
-      return value;
+      return isNaN(value) ? config.min : clamp(value);
     }
     if (typeof value === 'string') {
       // Extract number from string like "0.5rem"
       const parsed = parseFloat(value);
-      return isNaN(parsed) ? config.min : parsed;
+      return isNaN(parsed) ? config.min : clamp(parsed);
     }
     return config.min;
-  }, [value, config.min]);
+  }, [value, config.min, config.max]);
 
   const hasError = useMemo(() => {
     return rawErrors && rawErrors.length > 0;

package/src/tools/JsonForm/widgets/TextWidget.tsx

@@ -2,20 +2,41 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Input } from '@djangocfg/ui-core/components';
+import { Input, Textarea } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
- * Text input widget for JSON Schema Form
- * Handles string fields with optional textarea for multiline
+ * Text input widget for JSON Schema Form.
+ *
+ * Handles `string` fields. Switches to a multiline `Textarea` when
+ * `options.widget === 'textarea'` (see `TextareaWidget`). Maps the
+ * schema `format` to a native input type (`email`, `url`, `tel`,
+ * `password`, `date`, `datetime-local`, `time`). Honors `density`
+ * and `ui:disabledWhen` via `useWidgetEnv`.
  */
+
+/** Maps JSON Schema `format` values to native `<input type>` values. */
+const FORMAT_INPUT_TYPE: Record<string, string> = {
+  email: 'email',
+  uri: 'url',
+  url: 'url',
+  tel: 'tel',
+  phone: 'tel',
+  password: 'password',
+  date: 'date',
+  'date-time': 'datetime-local',
+  datetime: 'datetime-local',
+  time: 'time',
+};
+
 export function TextWidget(props: WidgetProps) {
   const {
     id,
     placeholder,
     required,
-    disabled,
-    readonly,
     autofocus,
     value,
     onChange,
@@ -25,13 +46,16 @@ export function TextWidget(props: WidgetProps) {
     schema,
     rawErrors,
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
 
   // Memoize widget configuration
   const config = useMemo(() => ({
     isTextarea: options?.widget === 'textarea',
-    rows: options?.rows || 3,
+    rows: typeof options?.rows === 'number' ? options.rows : 3,
     emptyValue: options?.emptyValue,
-  }), [options]);
+    inputType:
+      (typeof schema.format === 'string' && FORMAT_INPUT_TYPE[schema.format]) || 'text',
+  }), [options, schema.format]);
 
   // Ensure value is always a string
   const safeValue = useMemo(() => {
@@ -40,7 +64,7 @@ export function TextWidget(props: WidgetProps) {
   }, [value]);
 
   const hasError = useMemo(() => {
-    return rawErrors && rawErrors.length > 0;
+    return Boolean(rawErrors && rawErrors.length > 0);
   }, [rawErrors]);
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -58,14 +82,10 @@ export function TextWidget(props: WidgetProps) {
 
   if (config.isTextarea) {
     return (
-      <textarea
+      <Textarea
         id={id}
-        className={`flex min-h-[80px] w-full rounded-md border ${
-          hasError ? 'border-destructive' : 'border-input'
-        } bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`}
         placeholder={placeholder}
-        disabled={disabled || readonly}
-        readOnly={readonly}
+        disabled={disabled}
         autoFocus={autofocus}
         value={safeValue}
         required={required}
@@ -73,6 +93,9 @@ export function TextWidget(props: WidgetProps) {
         onBlur={handleBlur}
         onFocus={handleFocus}
         rows={config.rows}
+        title={tooltipText}
+        aria-invalid={hasError || undefined}
+        className={cn(hasError && 'border-destructive', compact && 'text-xs')}
       />
     );
   }
@@ -80,17 +103,18 @@ export function TextWidget(props: WidgetProps) {
   return (
     <Input
       id={id}
-      type="text"
+      type={config.inputType}
       placeholder={placeholder}
       disabled={disabled}
-      readOnly={readonly}
       autoFocus={autofocus}
       value={safeValue}
       required={required}
       onChange={handleChange}
       onBlur={handleBlur}
       onFocus={handleFocus}
-      className={hasError ? 'border-destructive' : ''}
+      title={tooltipText}
+      aria-invalid={hasError || undefined}
+      className={cn(hasError && 'border-destructive', compact && 'h-7 text-xs')}
     />
   );
 }

package/src/tools/JsonForm/widgets/index.ts

@@ -10,6 +10,7 @@ export { TextareaWidget } from './TextareaWidget';
 export { NumberWidget } from './NumberWidget';
 export { CheckboxWidget } from './CheckboxWidget';
 export { SelectWidget } from './SelectWidget';
+export { RadioWidget } from './RadioWidget';
 export { SwitchWidget } from './SwitchWidget';
 export { ColorWidget } from './ColorWidget';
 export { SliderWidget } from './SliderWidget';

package/src/tools/JsonTree/components/JsonContent.tsx

@@ -2,33 +2,78 @@
 
 import React, { memo } from 'react';
 import { CommonExternalProps, JSONTree } from 'react-json-tree';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 
-// JSON inspector uses a fixed dark palette regardless of the host
-// theme — same convention as PrettyCode and devtool-style data
-// renderers (Chrome DevTools, Insomnia, Bruno). Syntax highlighting
-// has its own contrast model; mixing it with semantic UI tokens on
-// a light surface flattens keys/values into low-contrast pastels.
-const JSON_TREE_SURFACE_BG = '#0d1117';
-const JSON_TREE_THEME = {
-  scheme: 'djangocfg-dark',
-  base00: 'transparent',
-  base01: '#1a1a1a',
-  base02: '#2a2a2a',
-  base03: '#6b7280',
-  base04: '#9ca3af',
-  base05: '#e5e7eb',
-  base06: '#f3f4f6',
-  base07: '#ffffff',
-  base08: '#ef4444', // null, undefined
-  base09: '#f97316', // numbers
-  base0A: '#eab308', // strings
-  base0B: '#22c55e', // booleans
-  base0C: '#06b6d4', // dates, regex
-  base0D: '#3b82f6', // keys
-  base0E: '#a855f7', // functions
-  base0F: '#f43f5e', // deprecations
+// JSON inspector keeps its own syntax-highlight contrast model rather
+// than reusing semantic UI tokens — same convention as Chrome DevTools,
+// Insomnia and Bruno. It still follows the host light/dark theme, but
+// each mode gets a hand-tuned base16 palette so keys/values stay
+// high-contrast instead of flattening into pastels.
+interface JsonTreePalette {
+  surface: string;
+  fg: string; // base05 — default text
+  title: string; // base06 — title
+  muted: string; // base04 — collection counts, meta
+  string: string; // base0A — strings + link color
+  theme: Record<string, string>;
+}
+
+const DARK_PALETTE: JsonTreePalette = {
+  surface: '#0d1117',
+  fg: '#e5e7eb',
+  title: '#f3f4f6',
+  muted: '#9ca3af',
+  string: '#eab308',
+  theme: {
+    scheme: 'djangocfg-dark',
+    base00: 'transparent',
+    base01: '#1a1a1a',
+    base02: '#2a2a2a',
+    base03: '#6b7280',
+    base04: '#9ca3af',
+    base05: '#e5e7eb',
+    base06: '#f3f4f6',
+    base07: '#ffffff',
+    base08: '#ef4444', // null, undefined
+    base09: '#f97316', // numbers
+    base0A: '#eab308', // strings
+    base0B: '#22c55e', // booleans
+    base0C: '#06b6d4', // dates, regex
+    base0D: '#3b82f6', // keys
+    base0E: '#a855f7', // functions
+    base0F: '#f43f5e', // deprecations
+  },
+};
+
+const LIGHT_PALETTE: JsonTreePalette = {
+  surface: '#ffffff',
+  fg: '#1f2937',
+  title: '#111827',
+  muted: '#6b7280',
+  string: '#b45309',
+  theme: {
+    scheme: 'djangocfg-light',
+    base00: 'transparent',
+    base01: '#f3f4f6',
+    base02: '#e5e7eb',
+    base03: '#9ca3af',
+    base04: '#6b7280',
+    base05: '#1f2937',
+    base06: '#111827',
+    base07: '#000000',
+    base08: '#dc2626', // null, undefined
+    base09: '#c2410c', // numbers
+    base0A: '#b45309', // strings
+    base0B: '#15803d', // booleans
+    base0C: '#0e7490', // dates, regex
+    base0D: '#1d4ed8', // keys
+    base0E: '#7e22ce', // functions
+    base0F: '#be123c', // deprecations
+  },
 };
 
+const TRUNCATION_SUFFIX = '…';
+
 interface JsonContentProps {
   data: unknown;
   renderKey: number;
@@ -49,6 +94,7 @@ interface JsonContentProps {
  *
  * Memoised: re-renders only when any prop changes. `data` is compared
  * by reference — the parent should not mutate the object in place.
+ * Light/dark palette follows the host theme via `useResolvedTheme`.
  */
 const JsonContent = memo(({
   data,
@@ -64,52 +110,81 @@ const JsonContent = memo(({
   shouldExpandNodeInitially,
   jsonTreeProps = {},
 }: JsonContentProps) => {
+  const resolvedTheme = useResolvedTheme();
+  const palette = resolvedTheme === 'dark' ? DARK_PALETTE : LIGHT_PALETTE;
+
   const getItemString = showCollectionInfo
     ? (nodeType: string, nodeData: unknown) => {
         if (nodeType === 'Array') {
           const length = Array.isArray(nodeData) ? nodeData.length : 0;
-          return length > 0 ? <span className="text-xs" style={{ color: '#9ca3af' }}>({length})</span> : null;
+          return length > 0 ? <span className="text-xs" style={{ color: palette.muted }}>({length})</span> : null;
         }
         if (nodeType === 'Object') {
           const keys = nodeData && typeof nodeData === 'object' ? Object.keys(nodeData) : [];
-          return keys.length > 0 ? <span className="text-xs" style={{ color: '#9ca3af' }}>{`{${keys.length}}`}</span> : null;
+          return keys.length > 0 ? <span className="text-xs" style={{ color: palette.muted }}>{`{${keys.length}}`}</span> : null;
         }
         return null;
       }
     : () => null;
 
-  const postprocessValue = (value: unknown) => {
-    if (typeof value === 'string' && value.length > maxStringLength) {
-      return value.substring(0, maxStringLength) + '... (truncated)';
+  const isUrl = (value: unknown): value is string =>
+    typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'));
+
+  // Truncation lives in valueRenderer (not postprocessValue) so the full
+  // string stays intact for copy/download and is still reachable via the
+  // `title` tooltip. URLs render as clickable links.
+  const valueRenderer = (displayValue: unknown, rawValue: unknown) => {
+    if (isUrl(rawValue)) {
+      const truncated =
+        rawValue.length > maxStringLength
+          ? rawValue.slice(0, maxStringLength) + TRUNCATION_SUFFIX
+          : rawValue;
+      return (
+        <a
+          href={rawValue}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={rawValue}
+          style={{ color: palette.string, textDecoration: 'underline' }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {`"${truncated}"`}
+        </a>
+      );
+    }
+    if (typeof rawValue === 'string' && rawValue.length > maxStringLength) {
+      return (
+        <span title={rawValue}>
+          {`"${rawValue.slice(0, maxStringLength)}${TRUNCATION_SUFFIX}"`}
+        </span>
+      );
     }
-    return value;
+    return displayValue as React.ReactNode;
   };
 
-  const isCustomNode = (value: unknown) =>
-    typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'));
-
   return (
     <div
-      className={`overflow-auto h-full rounded-md ${padding}`}
+      role="region"
+      aria-label={title ? `JSON: ${title}` : 'JSON data'}
+      className={`overflow-auto h-full rounded-md border border-border/60 ${padding}`}
       style={{
-        backgroundColor: JSON_TREE_SURFACE_BG,
-        color: '#e5e7eb',
+        backgroundColor: palette.surface,
+        color: palette.fg,
         ...(fontSize ? { fontSize } : null),
       }}
     >
       {showTitle && title && (
-        <h6 className="text-sm font-semibold mb-2" style={{ color: '#f3f4f6' }}>{title}</h6>
+        <h6 className="text-sm font-semibold mb-2" style={{ color: palette.title }}>{title}</h6>
       )}
       <JSONTree
         key={renderKey}
         data={data}
-        theme={JSON_TREE_THEME}
+        theme={palette.theme}
         invertTheme={false}
         hideRoot={true}
         shouldExpandNodeInitially={shouldExpandNodeInitially}
         getItemString={getItemString}
-        postprocessValue={postprocessValue}
-        isCustomNode={isCustomNode}
+        valueRenderer={valueRenderer}
         collectionLimit={collectionLimit}
         sortObjectKeys={!preserveKeyOrder}
         {...jsonTreeProps}