@djangocfg/ui-tools 2.1.270 → 2.1.272

package/dist/index.cjs

@@ -6,7 +6,7 @@ require('./chunk-F2N7P5XU.cjs');
 var chunkIHAY6FO6_cjs = require('./chunk-IHAY6FO6.cjs');
 var chunk77HQWEQ6_cjs = require('./chunk-77HQWEQ6.cjs');
 var chunkF2CMIIOH_cjs = require('./chunk-F2CMIIOH.cjs');
-var chunkVAL2LCQD_cjs = require('./chunk-VAL2LCQD.cjs');
+var chunkWM4RT5KX_cjs = require('./chunk-WM4RT5KX.cjs');
 var chunk33AMWFBZ_cjs = require('./chunk-33AMWFBZ.cjs');
 require('./chunk-2SMCH62O.cjs');
 var chunkL37FZYJU_cjs = require('./chunk-L37FZYJU.cjs');
@@ -372,7 +372,7 @@ var CodeBlock = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ code, language, isUs
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkVAL2LCQD_cjs.PrettyCode_default,
+      chunkWM4RT5KX_cjs.PrettyCode_default,
       {
         data: code,
         language,
@@ -735,14 +735,14 @@ function OpenapiLoadingFallback() {
 }
 chunkWGEGR3DF_cjs.__name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyPlaygroundLayout = createLazyComponent(
-  () => import('./PlaygroundLayout-LIAN63CZ.cjs').then((mod) => ({ default: mod.PlaygroundLayout })),
+  () => import('./PlaygroundLayout-ZO2LO7M5.cjs').then((mod) => ({ default: mod.PlaygroundLayout })),
   {
     displayName: "LazyPlaygroundLayout",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(OpenapiLoadingFallback, {})
   }
 );
 var LazyOpenapiViewer = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ config }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkVAL2LCQD_cjs.PlaygroundProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(LazyPlaygroundLayout, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkWM4RT5KX_cjs.PlaygroundProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(LazyPlaygroundLayout, {}) });
 }, "LazyOpenapiViewer");
 LazyOpenapiViewer.displayName = "LazyOpenapiViewer";
 var LazyJsonSchemaForm = createLazyComponent(
@@ -890,11 +890,11 @@ function LottiePlayer(props) {
 }
 chunkWGEGR3DF_cjs.__name(LottiePlayer, "LottiePlayer");
 var PlaygroundLayout = React3.lazy(
-  () => import('./PlaygroundLayout-LIAN63CZ.cjs').then((mod) => ({ default: mod.PlaygroundLayout }))
+  () => import('./PlaygroundLayout-ZO2LO7M5.cjs').then((mod) => ({ default: mod.PlaygroundLayout }))
 );
 var LoadingFallback9 = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
 var Playground = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ config }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkVAL2LCQD_cjs.PlaygroundProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(React3.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback9, {}), children: /* @__PURE__ */ jsxRuntime.jsx(PlaygroundLayout, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkWM4RT5KX_cjs.PlaygroundProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(React3.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback9, {}), children: /* @__PURE__ */ jsxRuntime.jsx(PlaygroundLayout, {}) }) });
 }, "Playground");
 var OpenapiViewer_default = Playground;
 var CronSchedulerClient = React3.lazy(() => import('./CronScheduler.client-A4GO6YBY.cjs'));
@@ -2151,7 +2151,7 @@ Object.defineProperty(exports, "useCronWeekDays", {
 });
 Object.defineProperty(exports, "PrettyCode", {
   enumerable: true,
-  get: function () { return chunkVAL2LCQD_cjs.PrettyCode_default; }
+  get: function () { return chunkWM4RT5KX_cjs.PrettyCode_default; }
 });
 Object.defineProperty(exports, "JsonTree", {
   enumerable: true,

package/dist/index.mjs

@@ -4,8 +4,8 @@ import './chunk-JWB2EWQO.mjs';
 export { ImageViewer } from './chunk-GGKGH5PM.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-5LBDYFWH.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PZKAH7WQ.mjs';
-import { PlaygroundProvider, PrettyCode_default } from './chunk-FX3GCEUL.mjs';
-export { PrettyCode_default as PrettyCode } from './chunk-FX3GCEUL.mjs';
+import { PlaygroundProvider, PrettyCode_default } from './chunk-QZ55LYK2.mjs';
+export { PrettyCode_default as PrettyCode } from './chunk-QZ55LYK2.mjs';
 export { JsonTree_default as JsonTree } from './chunk-LFWQ36LJ.mjs';
 import './chunk-SSUOENAZ.mjs';
 export { ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, CheckboxWidget, ColorWidget, ErrorListTemplate, FieldTemplate, JsonSchemaForm, NumberWidget, ObjectFieldTemplate, SelectWidget, SliderWidget, SwitchWidget, TextWidget, getRequiredFields, hasRequiredFields, mergeDefaults, normalizeFormData, safeJsonParse, safeJsonStringify, validateRequiredFields, validateSchema } from './chunk-JUGQNNDC.mjs';
@@ -708,7 +708,7 @@ function OpenapiLoadingFallback() {
 }
 __name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyPlaygroundLayout = createLazyComponent(
-  () => import('./PlaygroundLayout-FRKIMYVN.mjs').then((mod) => ({ default: mod.PlaygroundLayout })),
+  () => import('./PlaygroundLayout-G325I6HM.mjs').then((mod) => ({ default: mod.PlaygroundLayout })),
   {
     displayName: "LazyPlaygroundLayout",
     fallback: /* @__PURE__ */ jsx(OpenapiLoadingFallback, {})
@@ -863,7 +863,7 @@ function LottiePlayer(props) {
 }
 __name(LottiePlayer, "LottiePlayer");
 var PlaygroundLayout = lazy(
-  () => import('./PlaygroundLayout-FRKIMYVN.mjs').then((mod) => ({ default: mod.PlaygroundLayout }))
+  () => import('./PlaygroundLayout-G325I6HM.mjs').then((mod) => ({ default: mod.PlaygroundLayout }))
 );
 var LoadingFallback9 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
 var Playground = /* @__PURE__ */ __name(({ config }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.270",
+  "version": "2.1.272",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -90,8 +90,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.270",
-    "@djangocfg/ui-core": "^2.1.270",
+    "@djangocfg/i18n": "^2.1.272",
+    "@djangocfg/ui-core": "^2.1.272",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "react": "^19.1.0",
@@ -133,10 +133,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.270",
+    "@djangocfg/i18n": "^2.1.272",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.270",
-    "@djangocfg/ui-core": "^2.1.270",
+    "@djangocfg/typescript-config": "^2.1.272",
+    "@djangocfg/ui-core": "^2.1.272",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/OpenapiViewer/components/PlaygroundLayout/EndpointList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ChevronRight, Filter, Search } from 'lucide-react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
     Combobox,
@@ -71,6 +71,13 @@ export function EndpointList() {
     const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } =
         useOpenApiSchema({ schemas: config.schemas, defaultSchemaId: config.defaultSchemaId });
 
+    // ── Debounced search ──────────────────────────────────────────────────────
+    const [debouncedSearch, setDebouncedSearch] = useState(state.searchTerm);
+    useEffect(() => {
+        const id = setTimeout(() => setDebouncedSearch(state.searchTerm), 150);
+        return () => clearTimeout(id);
+    }, [state.searchTerm]);
+
     // ── Data ──────────────────────────────────────────────────────────────────
     const schemaOptions = useMemo(
         () => schemas.map((s) => ({ value: s.id, label: s.name })),
@@ -82,8 +89,8 @@ export function EndpointList() {
         if (state.selectedCategory !== 'All') {
             list = list.filter((e) => e.category === state.selectedCategory);
         }
-        if (state.searchTerm) {
-            const q = state.searchTerm.toLowerCase();
+        if (debouncedSearch) {
+            const q = debouncedSearch.toLowerCase();
             list = list.filter((e) =>
                 e.name.toLowerCase().includes(q) ||
                 e.description.toLowerCase().includes(q) ||
@@ -91,7 +98,7 @@ export function EndpointList() {
             );
         }
         return list;
-    }, [endpoints, state.selectedCategory, state.searchTerm, state.selectedVersion]);
+    }, [endpoints, state.selectedCategory, debouncedSearch, state.selectedVersion]);
 
     // ── Derived ───────────────────────────────────────────────────────────────
     const isFiltered = state.selectedCategory !== 'All';

package/src/tools/OpenapiViewer/components/PlaygroundLayout/RequestPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Key, Loader2, Send, Terminal } from 'lucide-react';
+import { Key, Loader2, Send, Sparkles, Terminal } from 'lucide-react';
 import React, { useMemo } from 'react';
 
 import {
@@ -123,7 +123,18 @@ export function RequestPanel() {
             <div className="shrink-0 border-b px-4 py-3 bg-muted/20 space-y-1.5">
                 <div className="flex items-center gap-2">
                     <MethodBadge method={ep.method} />
-                    <span className="font-mono text-xs text-foreground/70 truncate min-w-0">{epPath}</span>
+                    <span className="font-mono text-xs text-foreground/70 truncate min-w-0 flex-1">{epPath}</span>
+                    <Button
+                        onClick={sendRequest}
+                        disabled={isSendDisabled}
+                        size="sm"
+                        className="shrink-0 gap-1.5 h-7 text-xs px-3"
+                    >
+                        {state.loading
+                            ? <><Loader2 className="h-3 w-3 animate-spin" /> Sending…</>
+                            : <><Send className="h-3 w-3" /> Send</>
+                        }
+                    </Button>
                 </div>
                 {urlChanged && (
                     <div className="font-mono text-[10px] text-muted-foreground/50 break-all leading-snug pl-0.5">
@@ -141,10 +152,26 @@ export function RequestPanel() {
                 {/* Body */}
                 {hasBody && (
                     <div className="space-y-1.5">
-                        <div className="flex items-baseline gap-2">
-                            <SectionLabel>Body</SectionLabel>
-                            {bodyType && (
-                                <span className="text-[10px] text-muted-foreground/40 font-mono">{bodyType}</span>
+                        <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-baseline gap-2">
+                                <SectionLabel>Body</SectionLabel>
+                                {bodyType && (
+                                    <span className="text-[10px] text-muted-foreground/40 font-mono">{bodyType}</span>
+                                )}
+                            </div>
+                            {isJsonValid && state.requestBody && (
+                                <button
+                                    type="button"
+                                    onClick={() => {
+                                        try {
+                                            setRequestBody(JSON.stringify(JSON.parse(state.requestBody), null, 2));
+                                        } catch {}
+                                    }}
+                                    className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+                                >
+                                    <Sparkles className="h-2.5 w-2.5" />
+                                    Format
+                                </button>
                             )}
                         </div>
                         <Textarea

package/src/tools/OpenapiViewer/components/PlaygroundLayout/ResponsePanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Loader2, Send, Terminal } from 'lucide-react';
+import { Loader2, Send, Terminal, WifiOff } from 'lucide-react';
 import { useMemo } from 'react';
 
 import { CopyButton } from '@djangocfg/ui-core/components';
@@ -50,6 +50,7 @@ export function ResponsePanel() {
 
     // ── Derived ───────────────────────────────────────────────────────────────
     const sizeKb     = rawText ? `${(rawText.length / 1024).toFixed(1)} KB` : '';
+    const duration   = response?.duration != null ? `${response.duration}ms` : '';
     const hasError   = Boolean(response?.error);
     const hasStatus  = response?.status != null;
     const hasCopy    = Boolean(rawText);
@@ -67,6 +68,17 @@ export function ResponsePanel() {
     if (!selectedEndpoint) return <EmptyState icon={Terminal} text="Response will appear here" />;
     if (!response)         return <EmptyState icon={Send} text='Press "Send Request" to see the response' />;
 
+    // Pure network error (no HTTP response at all — CORS, offline, timeout)
+    if (hasError && !hasStatus) {
+        return (
+            <EmptyState
+                icon={WifiOff}
+                text={response.error!}
+                className="text-destructive [&_svg]:text-destructive"
+            />
+        );
+    }
+
     // ── Render ────────────────────────────────────────────────────────────────
     return (
         <>
@@ -80,6 +92,9 @@ export function ResponsePanel() {
                     {sizeKb && (
                         <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">{sizeKb}</span>
                     )}
+                    {duration && (
+                        <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">{duration}</span>
+                    )}
                 </div>
                 {hasCopy && (
                     <CopyButton value={rawText} variant="ghost" size="sm" className="h-6 px-2 text-[10px] text-muted-foreground shrink-0">
@@ -88,7 +103,7 @@ export function ResponsePanel() {
                 )}
             </div>
 
-            {/* Network/request error */}
+            {/* HTTP-level error body (4xx/5xx — has status but also error flag) */}
             {hasError && (
                 <div className="shrink-0 mx-4 mt-3 rounded border border-destructive/20 bg-destructive/5 px-3 py-2">
                     <p className="text-xs text-destructive">{response.error}</p>